/* ========================================================================== VIBEMOTION — WooCommerce -------------------------------------------------------------------------- Brands every commerce surface so cart / checkout / my-account / thank-you are indistinguishable from the rest of the site, in BOTH themes. Rules honoured throughout: - design tokens only (no new hard-coded colors, no new fonts) - dark is :root, light is `.light-mode` (set on or ; a `[data-theme="light"]` variant is included so either wiring works) - --text-muted is decorative only; every readable string uses --text-primary or --text-secondary so contrast stays >= 4.5:1 - fully fluid 360 -> 1920 with zero horizontal scroll (wide tables stack) - touch targets >= 44px, focus rings always visible - reuses .btn / .btn-primary / .form-input / .container visual language Loaded on every WooCommerce view AND on the front page, because the "Order Now" duration modal lives on the home pricing cards. ========================================================================== */ /* ========================================================================== 1. SHARED PRIMITIVES ========================================================================== */ .vibemotion-woo, .vm-order-modal { /* Surfaces derived from the design tokens, so a recolor stays coherent. */ --wc-panel: var(--bg-secondary); --wc-panel-alt: var(--bg-tertiary); --wc-line: var(--border-color); --wc-radius: var(--radius-md); --wc-radius-sm: var(--radius-sm); } /* Visible focus everywhere — base.css resets `outline: none` on controls. */ .vibemotion-woo a:focus-visible, .vibemotion-woo button:focus-visible, .vibemotion-woo input:focus-visible, .vibemotion-woo select:focus-visible, .vibemotion-woo textarea:focus-visible, .vm-order-modal a:focus-visible, .vm-order-modal button:focus-visible, .vm-order-modal input:focus-visible, .vm-order-modal select:focus-visible, .select2-container--default .select2-selection:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* ========================================================================== 2. ORDER-NOW DURATION MODAL Reuses the site's .modal / .modal-inner / .modal-close chrome, with a branded card instead of the 16:9 video frame. ========================================================================== */ .vm-order-modal .modal-inner.vm-order-inner { width: 100%; max-width: 560px; } .vm-order-modal .modal-close.vm-order-close { top: -58px; right: 0; width: 44px; height: 44px; } .vm-order-card { position: relative; background-color: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--card-shadow); padding: clamp(1.5rem, 4vw, 2.5rem); max-height: calc(100vh - 8rem); overflow-y: auto; overscroll-behavior: contain; } .vm-order-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent-gradient); border-radius: var(--radius-md) var(--radius-md) 0 0; pointer-events: none; } .vm-order-eyebrow { margin-bottom: 0.75rem; } .vm-order-title { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; color: var(--text-primary); margin-bottom: 0.5rem; } .vm-order-intro { font-size: 0.92rem; color: var(--text-secondary); margin-bottom: 1.75rem; line-height: 1.5; } /* --- segmented duration control ------------------------------------------ */ .vm-order-durations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.75rem; } .vm-order-dur { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 62px; padding: 0.6rem 0.35rem; border-radius: var(--radius-sm); background-color: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; transition: var(--transition-smooth); text-align: center; } .vm-order-dur:hover { border-color: var(--accent-primary); color: var(--text-primary); } .vm-order-dur.is-active { background: var(--accent-gradient); border-color: transparent; color: #ffffff; box-shadow: 0 8px 20px -8px var(--accent-glow); } .vm-order-dur-secs { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1; } .vm-order-dur-price { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em; opacity: 0.85; white-space: nowrap; } .vm-order-dur.is-active .vm-order-dur-price { opacity: 1; } /* --- live total ----------------------------------------------------------- */ .vm-order-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 1.15rem 1.25rem; border-radius: var(--radius-sm); background-color: var(--bg-secondary); border: 1px solid var(--border-color); margin-bottom: 1.5rem; } .vm-order-total-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary); width: 100%; } .vm-order-price { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 2.75rem); font-weight: 700; line-height: 1; color: var(--text-primary); } .vm-order-meta { font-size: 0.85rem; color: var(--text-secondary); } .vm-order-confirm { width: 100%; min-height: 52px; } .vm-order-confirm.is-busy { opacity: 0.7; pointer-events: none; } .vm-order-note { margin-top: 0.9rem; font-size: 0.8rem; color: var(--text-secondary); text-align: center; } @media (max-width: 575px) { .vm-order-modal { padding: 1rem; } .vm-order-modal .modal-close.vm-order-close { top: -52px; right: 0; } .vm-order-durations { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vm-order-card { max-height: calc(100vh - 6rem); } } @media (prefers-reduced-motion: reduce) { .vm-order-modal, .vm-order-dur, .vm-order-confirm { transition: none !important; } } .vm-order-modal.vm-order-instant { transition: none; } /* ========================================================================== 3. WOO PAGE CHROME (hero + body wrapper) The hero markup is owned by inc/woocommerce.php :: vibemotion_woo_page_hero() ========================================================================== */ .vibemotion-woo-hero { text-align: center; } /* Vertical rhythm comes from .section-padding (page.php and vibemotion_woo_content_open() both zero the top padding inline, because the page hero already supplies the space above). Only the measure is narrowed — commerce forms read better at 1100px than the site's 1280px. */ .vibemotion-woo > .container { max-width: 1100px; } /* WooCommerce prints its own wrappers inside our container. Neutralise them. */ .vibemotion-woo .woocommerce, .vibemotion-woo .woocommerce-page { width: 100%; } /* No breadcrumbs, no shop furniture — the design has none. */ .woocommerce-breadcrumb, .vibemotion-woo .woocommerce-breadcrumb, .vibemotion-woo .woocommerce-result-count, .vibemotion-woo .woocommerce-ordering, .vibemotion-woo .cross-sells, .vibemotion-woo .woocommerce-sidebar, .vibemotion-woo #secondary, .vibemotion-woo .woocommerce-products-header { display: none !important; } /* ========================================================================== 4. TYPOGRAPHY, LINKS, GENERIC TABLES ========================================================================== */ .vibemotion-woo h2, .vibemotion-woo h3, .vibemotion-woo h4 { font-family: var(--font-display); color: var(--text-primary); } .vibemotion-woo h2 { font-size: clamp(1.35rem, 3.2vw, 1.8rem); margin-bottom: 1.25rem; } .vibemotion-woo h3 { font-size: clamp(1.1rem, 2.6vw, 1.35rem); margin-bottom: 1rem; } .vibemotion-woo p, .vibemotion-woo li, .vibemotion-woo td, .vibemotion-woo dd { color: var(--text-secondary); } .vibemotion-woo p { margin-bottom: 1rem; } .vibemotion-woo a { color: var(--accent-primary); } .vibemotion-woo a:hover { color: var(--accent-secondary); } .vibemotion-woo mark, .vibemotion-woo .woocommerce-Price-amount { background: none; color: var(--text-primary); font-weight: 600; } .vibemotion-woo table { width: 100%; border-collapse: collapse; margin: 0 0 1.75rem; table-layout: auto; } .vibemotion-woo table th, .vibemotion-woo table td { word-break: break-word; overflow-wrap: anywhere; } /* Panelised tables (cart, totals, order review, account orders). */ .vibemotion-woo .shop_table { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: var(--card-shadow); } .vibemotion-woo .shop_table th { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--text-secondary); text-align: left; padding: 1rem 1.15rem; background-color: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); } .vibemotion-woo .shop_table td { padding: 1.15rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; font-size: 0.94rem; } .vibemotion-woo .shop_table tbody tr:last-child td, .vibemotion-woo .shop_table tfoot tr:last-child td, .vibemotion-woo .shop_table tfoot tr:last-child th { border-bottom: none; } .vibemotion-woo .shop_table tfoot th, .vibemotion-woo .shop_table tfoot td { padding: 1rem 1.15rem; border-bottom: 1px solid var(--border-color); background-color: transparent; } .vibemotion-woo .shop_table .product-name a, .vibemotion-woo .shop_table .woocommerce-table__product-name a { color: var(--text-primary); font-weight: 600; } .vibemotion-woo .shop_table .product-name a:hover { color: var(--accent-primary); } .vibemotion-woo .shop_table .variation, .vibemotion-woo .shop_table dl.variation { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 0 0.35rem; } .vibemotion-woo .shop_table dl.variation dt { font-weight: 600; color: var(--text-secondary); } .vibemotion-woo .shop_table dl.variation dd { margin: 0; } .vibemotion-woo .shop_table dl.variation dd p { margin: 0; } .vibemotion-woo .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); } /* Remove-from-cart control. */ .vibemotion-woo .product-remove a.remove, .vibemotion-woo a.remove { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; font-size: 1.1rem; line-height: 1; color: var(--text-secondary) !important; background-color: var(--bg-tertiary) !important; border: 1px solid var(--border-color); text-decoration: none; transition: var(--transition-smooth); } .vibemotion-woo .product-remove { width: 56px; text-align: center; } .vibemotion-woo a.remove:hover { color: #ffffff !important; background: var(--accent-gradient) !important; border-color: transparent; } /* ========================================================================== 5. BUTTONS — one visual language with .btn / .btn-primary ========================================================================== */ .vibemotion-woo .button, .vibemotion-woo a.button, .vibemotion-woo button.button, .vibemotion-woo input.button, .vibemotion-woo .woocommerce a.button, .vibemotion-woo .woocommerce button.button, .vibemotion-woo .woocommerce input.button, .vibemotion-woo .woocommerce #respond input#submit, .vibemotion-woo #place_order, .vibemotion-woo .woocommerce-Button, .vibemotion-woo .woocommerce-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 48px; padding: 0.9rem 1.75rem; border-radius: 9999px; border: 1px solid var(--btn-border-color); font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; line-height: 1.2; cursor: pointer; text-align: center; text-decoration: none; white-space: normal; background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; box-shadow: none; transition: var(--transition-smooth); } .vibemotion-woo .button:hover, .vibemotion-woo a.button:hover, .vibemotion-woo button.button:hover, .vibemotion-woo input.button:hover, .vibemotion-woo .woocommerce a.button:hover, .vibemotion-woo .woocommerce button.button:hover, .vibemotion-woo .woocommerce input.button:hover, .vibemotion-woo .woocommerce-Button:hover, .vibemotion-woo .woocommerce-button:hover { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; transform: translateY(-3px); } /* Primary / "alt" actions: gradient, exactly like .btn-primary. */ .vibemotion-woo .button.alt, .vibemotion-woo a.button.alt, .vibemotion-woo button.button.alt, .vibemotion-woo input.button.alt, .vibemotion-woo .woocommerce a.button.alt, .vibemotion-woo .woocommerce button.button.alt, .vibemotion-woo .woocommerce input.button.alt, .vibemotion-woo .woocommerce #respond input#submit.alt, .vibemotion-woo .btn-primary, .vibemotion-woo #place_order, .vibemotion-woo .checkout-button { background: var(--accent-gradient) !important; color: #ffffff !important; border-color: transparent; box-shadow: 0 10px 25px -5px var(--accent-glow); } .vibemotion-woo .button.alt:hover, .vibemotion-woo a.button.alt:hover, .vibemotion-woo button.button.alt:hover, .vibemotion-woo input.button.alt:hover, .vibemotion-woo .woocommerce a.button.alt:hover, .vibemotion-woo .woocommerce button.button.alt:hover, .vibemotion-woo .woocommerce input.button.alt:hover, .vibemotion-woo .btn-primary:hover, .vibemotion-woo #place_order:hover, .vibemotion-woo .checkout-button:hover { background: linear-gradient(135deg, #722217 0%, #722217 100%) !important; color: #ffffff !important; transform: translateY(-3px); box-shadow: 0 15px 30px -5px var(--accent-glow); } .vibemotion-woo .button:disabled, .vibemotion-woo .button.disabled, .vibemotion-woo button.button:disabled, .vibemotion-woo input.button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .vibemotion-woo .checkout-button, .vibemotion-woo #place_order { width: 100%; font-size: 1rem; min-height: 54px; } /* ========================================================================== 6. FORM FIELDS — mirrors .form-label / .form-input / .form-row ========================================================================== */ .vibemotion-woo form .form-row, .vibemotion-woo .woocommerce-form-row { display: flex; flex-direction: column; } .vibemotion-woo form .form-row label, .vibemotion-woo .woocommerce-form-row label, .vibemotion-woo .woocommerce-form__label, .vibemotion-woo .woocommerce-billing-fields label, .vibemotion-woo .woocommerce-shipping-fields label, .vibemotion-woo .woocommerce-additional-fields label, .vibemotion-woo .woocommerce-address-fields label { font-family: var(--font-display); font-size: 0.88rem; font-weight: 500; color: var(--text-primary); margin-bottom: 0.5rem; display: block; } .vibemotion-woo .required, .vibemotion-woo abbr.required { color: var(--accent-primary); border: none; text-decoration: none; } .vibemotion-woo input[type='text'], .vibemotion-woo input[type='email'], .vibemotion-woo input[type='tel'], .vibemotion-woo input[type='url'], .vibemotion-woo input[type='password'], .vibemotion-woo input[type='search'], .vibemotion-woo input[type='number'], .vibemotion-woo input[type='date'], .vibemotion-woo .input-text, .vibemotion-woo select, .vibemotion-woo textarea { width: 100%; min-height: 48px; padding: 0.9rem 1.25rem; border-radius: var(--radius-sm); background-color: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.4; transition: var(--transition-smooth); -webkit-appearance: none; appearance: none; } .vibemotion-woo textarea { min-height: 130px; resize: vertical; } .vibemotion-woo input::placeholder, .vibemotion-woo textarea::placeholder { color: var(--text-secondary); opacity: 0.75; } .vibemotion-woo input[type='text']:focus, .vibemotion-woo input[type='email']:focus, .vibemotion-woo input[type='tel']:focus, .vibemotion-woo input[type='url']:focus, .vibemotion-woo input[type='password']:focus, .vibemotion-woo input[type='number']:focus, .vibemotion-woo .input-text:focus, .vibemotion-woo select:focus, .vibemotion-woo textarea:focus { border-color: var(--accent-primary); background-color: var(--bg-primary); box-shadow: 0 0 0 3px var(--border-glow); } /* Native select needs its own chevron once appearance is stripped. */ .vibemotion-woo select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.75rem; cursor: pointer; } .vibemotion-woo .woocommerce-input-wrapper { display: block; width: 100%; } .vibemotion-woo .form-row .description, .vibemotion-woo .woocommerce-input-wrapper .description { color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.4rem; } /* Two-up rows (First/Last name) — mirrors .form-row from the design system. */ @media (min-width: 576px) { .vibemotion-woo form .form-row-first, .vibemotion-woo form .form-row-last { width: calc(50% - 0.75rem); display: inline-flex; vertical-align: top; } .vibemotion-woo form .form-row-first { margin-right: 1.5rem; } } .vibemotion-woo form .form-row-wide, .vibemotion-woo form .form-row.notes { width: 100%; } /* Checkboxes + radios — real 20px controls, 44px hit rows. */ .vibemotion-woo .woocommerce-form__label-for-checkbox, .vibemotion-woo label.checkbox { display: flex; align-items: flex-start; gap: 0.7rem; min-height: 44px; padding: 0.6rem 0; cursor: pointer; font-family: var(--font-sans); font-weight: 400; font-size: 0.92rem; color: var(--text-secondary); } .vibemotion-woo input[type='checkbox'], .vibemotion-woo input[type='radio'] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; min-height: 20px !important; max-height: 20px !important; margin: 2px 0 0; background-color: var(--bg-secondary); border: 1px solid var(--btn-border-color); border-radius: 5px; cursor: pointer; position: relative; transition: var(--transition-smooth); padding: 0 !important; } .vibemotion-woo input[type='radio'] { border-radius: 50% !important; } .vibemotion-woo input[type='checkbox']:checked, .vibemotion-woo input[type='radio']:checked { background: #722217 !important; border-color: transparent !important; width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; min-height: 20px !important; max-height: 20px !important; border-radius: 5px !important; padding: 0 !important; } .vibemotion-woo input[type='radio']:checked { border-radius: 50% !important; } .vibemotion-woo input[type='checkbox']:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .vibemotion-woo input[type='radio']:checked::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background-color: #ffffff; } .vibemotion-woo input[type='checkbox']:focus-visible, .vibemotion-woo input[type='radio']:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; } /* select2 / selectWoo (country + state pickers). Rendered at level, so these selectors are intentionally unscoped. */ .select2-container--default .select2-selection--single { height: 48px !important; min-height: 48px !important; padding: 0 1.25rem !important; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); transition: var(--transition-smooth); display: flex !important; align-items: center !important; } .select2-container--default .select2-selection--multiple { min-height: 48px; padding: 0.55rem 0.75rem; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); transition: var(--transition-smooth); } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary); line-height: 48px !important; padding-left: 0 !important; padding-right: 0 !important; width: 100%; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-secondary); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px !important; right: 15px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: #ffffff !important; border-bottom-color: #ffffff !important; filter: brightness(0) invert(1) !important; } .light-mode .select2-container--default .select2-selection--single .select2-selection__arrow b, [data-theme='light'] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: #2D363F !important; border-bottom-color: #2D363F !important; filter: none !important; } .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--border-glow); } .select2-dropdown { background-color: #02192B !important; /* Solid dark slate for dark theme */ border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm); box-shadow: var(--glass-shadow); overflow: hidden; } .light-mode .select2-dropdown, [data-theme='light'] .select2-dropdown { background-color: #ffffff !important; /* Solid white for light theme */ } .select2-container--default .select2-search--dropdown .select2-search__field { min-height: 44px; padding: 0.6rem 0.85rem; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); } .select2-container--default .select2-results__option { padding: 0.7rem 0.95rem; color: var(--text-secondary); background-color: transparent; font-size: 0.94rem; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected], .select2-container--default .select2-results__option--highlighted { background-color: #722217 !important; background: #722217 !important; color: #ffffff !important; } .select2-container--default .select2-results__option[aria-selected='true'], .select2-container--default .select2-results__option--selected, .select2-container--default .select2-results__option[data-selected=true], .woocommerce-page .select2-container--default .select2-results__option[aria-selected='true'], .woocommerce-page .select2-container--default .select2-results__option--selected, .woocommerce-page .select2-container--default .select2-results__option[data-selected=true], body .select2-container--default .select2-results__option[aria-selected='true'], body .select2-container--default .select2-results__option--selected, body .select2-container--default .select2-results__option[data-selected=true] { background-color: #0e293d !important; background: #0e293d !important; color: #ffffff !important; } .light-mode .select2-container--default .select2-results__option[aria-selected='true'], .light-mode .select2-container--default .select2-results__option--selected, .light-mode .select2-container--default .select2-results__option[data-selected=true], .light-mode .woocommerce-page .select2-container--default .select2-results__option[aria-selected='true'], .light-mode .woocommerce-page .select2-container--default .select2-results__option--selected, .light-mode .woocommerce-page .select2-container--default .select2-results__option[data-selected=true], [data-theme='light'] .select2-container--default .select2-results__option[aria-selected='true'], [data-theme='light'] .select2-container--default .select2-results__option--selected, [data-theme='light'] .select2-container--default .select2-results__option[data-selected=true], [data-theme='light'] .woocommerce-page .select2-container--default .select2-results__option[aria-selected='true'], [data-theme='light'] .woocommerce-page .select2-container--default .select2-results__option--selected, [data-theme='light'] .woocommerce-page .select2-container--default .select2-results__option[data-selected=true] { background-color: #f2e8e6 !important; background: #f2e8e6 !important; color: #722217 !important; } .select2-container--default .select2-results__option--highlighted[aria-selected='true'], .select2-container--default .select2-results__option--highlighted.select2-results__option--selected, .select2-container--default .select2-results__option--highlighted[data-selected=true] { background-color: #722217 !important; background: #722217 !important; color: #ffffff !important; } /* Quantity stepper. */ .vibemotion-woo .quantity { display: inline-flex; align-items: center; background-color: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 9999px; overflow: hidden; min-height: 44px; } .vibemotion-woo .quantity input.qty, .vibemotion-woo .quantity .qty { width: 78px; min-height: 44px; padding: 0.5rem 0.25rem; text-align: center; background-color: transparent; border: none; border-radius: 0; color: var(--text-primary); font-family: var(--font-display); font-weight: 600; -moz-appearance: textfield; } .vibemotion-woo .quantity input.qty::-webkit-outer-spin-button, .vibemotion-woo .quantity input.qty::-webkit-inner-spin-button { opacity: 1; height: 34px; } .vibemotion-woo .product-quantity .quantity { min-width: 78px; } /* Sold-individually products render the quantity as plain text. */ .vibemotion-woo .product-quantity strong { font-family: var(--font-display); color: var(--text-primary); font-weight: 600; } /* Validation states. */ .vibemotion-woo .woocommerce-invalid input.input-text, .vibemotion-woo .woocommerce-invalid select, .vibemotion-woo .woocommerce-invalid .select2-container--default .select2-selection--single { border-color: #722217; } .vibemotion-woo .woocommerce-validated input.input-text, .vibemotion-woo .woocommerce-validated select { border-color: rgba(34, 197, 94, 0.5); } /* ========================================================================== 7. NOTICES (success / error / info) ========================================================================== */ .vibemotion-woo .woocommerce-notices-wrapper:empty { display: none; } .vibemotion-woo .woocommerce-message, .vibemotion-woo .woocommerce-error, .vibemotion-woo .woocommerce-info, .vibemotion-woo .woocommerce-noreviews { position: relative; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0 0 1.75rem; padding: 1.05rem 1.25rem 1.05rem 1.6rem; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.94rem; line-height: 1.5; box-shadow: none; } .vibemotion-woo .woocommerce-message::before, .vibemotion-woo .woocommerce-error::before, .vibemotion-woo .woocommerce-info::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--accent-gradient); font-size: 0; margin: 0; padding: 0; } .vibemotion-woo .woocommerce-message::before { background: linear-gradient(180deg, #722217 0%, #722217 100%); } .vibemotion-woo .woocommerce-error::before { background: linear-gradient(180deg, #722217 0%, #722217 100%); } .vibemotion-woo .woocommerce-error li, .vibemotion-woo .woocommerce-message p, .vibemotion-woo .woocommerce-info p { color: var(--text-primary); width: 100%; margin: 0; } .vibemotion-woo .woocommerce-message .button, .vibemotion-woo .woocommerce-info .button, .vibemotion-woo .woocommerce-error .button { margin-left: auto; min-height: 44px; padding: 0.65rem 1.35rem; font-size: 0.88rem; } .vibemotion-woo .woocommerce-message a, .vibemotion-woo .woocommerce-info a, .vibemotion-woo .woocommerce-error a { color: var(--accent-primary); font-weight: 600; } /* ========================================================================== 8. CART ========================================================================== */ .vibemotion-woo .woocommerce-cart-form { margin-bottom: 2.5rem; } .vibemotion-woo .cart_totals, .vibemotion-woo .woocommerce-cart-form__contents { width: 100%; } .vibemotion-woo table.cart td.actions { padding: 1.15rem; background-color: var(--bg-tertiary); border-top: 1px solid var(--border-color); text-align: left; } .vibemotion-woo table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; float: none; padding: 0; border: none; } .vibemotion-woo table.cart td.actions .coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .vibemotion-woo table.cart td.actions .coupon .input-text, .vibemotion-woo #coupon_code { width: auto; flex: 1 1 50px; min-width: 0; height: 52px; min-height: unset !important; max-height: 52px; border-radius: 9999px; padding: 0.85rem 1.35rem; align-self: center; } .vibemotion-woo table.cart td.actions .button { flex: 0 0 auto; } .vibemotion-woo table.cart td.actions > .button[name='update_cart'] { float: none; margin-top: 0.75rem; width: 100%; } /* Cart totals panel. */ .vibemotion-woo .cart-collaterals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; width: 100%; } @media (min-width: 992px) { .vibemotion-woo .cart-collaterals { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } .vibemotion-woo .cart-collaterals .cart_totals { grid-column: 2; } } .vibemotion-woo .cart_totals h2 { font-size: 1.25rem; margin-bottom: 1rem; } .vibemotion-woo .cart_totals table.shop_table { margin-bottom: 1.25rem; } .vibemotion-woo .cart_totals table th { background-color: transparent; text-transform: none; font-family: var(--font-sans); font-size: 0.94rem; letter-spacing: 0; color: var(--text-secondary); width: 45%; } .vibemotion-woo .cart_totals .order-total th, .vibemotion-woo .cart_totals .order-total td { border-top: 1px solid var(--border-color); font-size: 1.05rem; } .vibemotion-woo .cart_totals .order-total .woocommerce-Price-amount { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-primary); } .vibemotion-woo .wc-proceed-to-checkout { padding: 0; } /* Empty cart. */ .vibemotion-woo .cart-empty, .vibemotion-woo .wc-empty-cart-message { text-align: center; font-size: 1.05rem; } .vibemotion-woo .return-to-shop { text-align: center; margin-top: 1.25rem; } .vibemotion-woo .return-to-shop .btn, .vibemotion-woo .return-to-shop .button { min-width: 220px; } /* ========================================================================== 9. CHECKOUT ========================================================================== */ .vibemotion-woo .woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; align-items: start; } .woocommerce-checkout .hero { background-color: transparent !important; background: none !important; } @media (min-width: 992px) { .vibemotion-woo .woocommerce-checkout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; } .vibemotion-woo #customer_details { grid-column: 1; grid-row: 1 / span 2; } .vibemotion-woo #order_review_heading { grid-column: 2; grid-row: 1; } .vibemotion-woo #order_review { grid-column: 2; grid-row: 2; } } .vibemotion-woo #customer_details, .vibemotion-woo #order_review { min-width: 0; } .vibemotion-woo #customer_details .col-1, .vibemotion-woo #customer_details .col-2 { width: 100%; float: none; padding: 0; } .vibemotion-woo #customer_details .woocommerce-billing-fields, .vibemotion-woo #customer_details .woocommerce-additional-fields, .vibemotion-woo #order_review { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--card-shadow); padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1.5rem; } .vibemotion-woo #customer_details .woocommerce-billing-fields { margin-top: 30px !important; } .vibemotion-woo #customer_details .woocommerce-billing-fields h3, .vibemotion-woo #customer_details .woocommerce-additional-fields h3, .vibemotion-woo #order_review_heading { font-family: var(--font-display); font-size: 1.2rem; color: var(--text-primary); margin: 0 0 1.25rem; } .vibemotion-woo #customer_details input, .vibemotion-woo #customer_details select, .vibemotion-woo #customer_details textarea { background-color: var(--bg-primary); } /* Login / coupon toggles above the form. */ .vibemotion-woo .woocommerce-form-login-toggle .woocommerce-info, .vibemotion-woo .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 1rem; } .vibemotion-woo form.woocommerce-form-login { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: clamp(1.25rem, 3vw, 1.75rem); margin: 0 0 1.75rem; } .vibemotion-woo form.checkout_coupon { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: clamp(1.25rem, 3vw, 1.75rem); margin: 0 0 1.75rem; } .vibemotion-woo form.checkout_coupon .form-row { margin-bottom: 0; } .vibemotion-woo form.checkout_coupon .form-row-first { margin-bottom: 15px !important; } /* Hide redundant label */ .vibemotion-woo form.checkout_coupon .form-row label { display: none !important; } /* Lock coupon input height */ .vibemotion-woo form.checkout_coupon #coupon_code, .vibemotion-woo form.checkout_coupon .input-text { height: 52px !important; min-height: 52px !important; max-height: 52px !important; border-radius: 9999px !important; padding: 0.85rem 1.35rem !important; width: 100% !important; text-align: center !important; } @media (min-width: 576px) { .vibemotion-woo form.checkout_coupon[style*="display: block"], .vibemotion-woo form.checkout_coupon[style*="display: flex"] { display: flex !important; flex-wrap: wrap !important; gap: 15px !important; align-items: center !important; justify-content: flex-start !important; } .vibemotion-woo form.checkout_coupon > p:first-child { width: 100%; margin-bottom: 5px; } .vibemotion-woo form.checkout_coupon .form-row-first { display: inline-block !important; float: none !important; width: 250px !important; margin: 0 15px 0 0 !important; } .vibemotion-woo form.checkout_coupon .form-row-last { display: inline-block !important; float: none !important; width: auto !important; margin: 0 !important; } } @media (max-width: 575px) { .vibemotion-woo form.checkout_coupon[style*="display: block"], .vibemotion-woo form.checkout_coupon[style*="display: flex"] { display: flex !important; flex-direction: column !important; gap: 15px !important; } .vibemotion-woo form.checkout_coupon .form-row-first { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; padding-bottom: 20px !important; } .vibemotion-woo form.checkout_coupon .form-row-last { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; } .vibemotion-woo form.checkout_coupon .form-row-last .button { width: 100% !important; display: block !important; } } /* Order review table. */ .vibemotion-woo .woocommerce-checkout-review-order-table { margin-bottom: 1.5rem; background-color: var(--bg-primary); } .vibemotion-woo .woocommerce-checkout-review-order-table th { background-color: var(--bg-tertiary); } .vibemotion-woo .woocommerce-checkout-review-order-table td { text-align: right; } .vibemotion-woo .woocommerce-checkout-review-order-table td.product-name { text-align: left; color: var(--text-primary); font-weight: 600; } .vibemotion-woo .woocommerce-checkout-review-order-table tfoot th { background-color: transparent; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 0.94rem; text-align: left; } .vibemotion-woo .woocommerce-checkout-review-order-table tfoot .order-total th, .vibemotion-woo .woocommerce-checkout-review-order-table tfoot .order-total td { border-top: 1px solid var(--border-color); padding-top: 1.15rem; } .vibemotion-woo .woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-primary); } /* Payment box. */ .vibemotion-woo #payment, .vibemotion-woo .woocommerce-checkout-payment { background-color: var(--bg-tertiary) !important; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: clamp(1rem, 3vw, 1.5rem); } .vibemotion-woo #payment ul.payment_methods, .vibemotion-woo .wc_payment_methods { list-style: none; margin: 0 0 1.25rem; padding: 0; border: none; } .vibemotion-woo #payment ul.payment_methods li { margin: 0 0 0.5rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); list-style: none; transition: var(--transition-smooth); } .vibemotion-woo #payment ul.payment_methods li:hover { border-color: var(--accent-primary); } .vibemotion-woo #payment ul.payment_methods li label { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 32px; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--text-primary); cursor: pointer; margin: 0; } .vibemotion-woo #payment div.payment_box { position: relative; margin: 0.5rem 0 0; padding: 0 !important; background-color: transparent !important; border: none !important; border-radius: 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; } .vibemotion-woo #payment div.payment_box::before, .vibemotion-woo #payment div.payment_box::after { display: none; } .vibemotion-woo #payment div.payment_box p:last-child { margin-bottom: 0; } .vibemotion-woo .woocommerce-privacy-policy-text, .vibemotion-woo .woocommerce-terms-and-conditions-wrapper { font-size: 0.85rem; color: var(--text-secondary); } .vibemotion-woo .woocommerce-terms-and-conditions { background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; } .vibemotion-woo #payment .place-order { padding: 0; margin: 0; } /* Blocking overlay while WooCommerce recalculates. */ .vibemotion-woo .blockUI.blockOverlay { background-color: var(--bg-primary) !important; opacity: 0.6 !important; } /* ========================================================================== 10. ORDER RECEIVED / THANK YOU / ORDER PAY / ORDER DETAILS ========================================================================== */ .vibemotion-woo .woocommerce-thankyou-order-received, .vibemotion-woo .woocommerce-notice--success { font-family: var(--font-display); font-size: clamp(1.15rem, 3vw, 1.5rem); color: var(--text-primary); text-align: center; margin-bottom: 1.75rem; } .vibemotion-woo ul.woocommerce-order-overview, .vibemotion-woo ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; list-style: none; margin: 0 0 2.5rem; padding: 0; border: none; } .vibemotion-woo ul.woocommerce-order-overview li, .vibemotion-woo ul.order_details li { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 1.15rem 1.25rem; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); float: none; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); list-style: none; text-align: left; } .vibemotion-woo ul.woocommerce-order-overview li strong, .vibemotion-woo ul.order_details li strong { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.01em; text-transform: none; color: var(--text-primary); word-break: break-word; } .vibemotion-woo .woocommerce-order-details, .vibemotion-woo .woocommerce-customer-details, .vibemotion-woo .woocommerce-order-pay { margin-bottom: 2.5rem; } .vibemotion-woo .woocommerce-order-details__title, .vibemotion-woo .woocommerce-column__title, .vibemotion-woo .woocommerce-customer-details h2 { font-family: var(--font-display); font-size: 1.2rem; color: var(--text-primary); margin-bottom: 1rem; } .vibemotion-woo .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .vibemotion-woo .woocommerce-customer-details .col-1, .vibemotion-woo .woocommerce-customer-details .col-2 { width: 100%; float: none; padding: 0; } .vibemotion-woo address { font-style: normal; line-height: 1.7; color: var(--text-secondary); background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 1.15rem 1.25rem; } .vibemotion-woo .woocommerce-customer-details--phone, .vibemotion-woo .woocommerce-customer-details--email { margin: 0.5rem 0 0; color: var(--text-secondary); } /* Pay-for-order screen reuses the checkout payment box. */ .vibemotion-woo #order_review .shop_table, .vibemotion-woo .woocommerce-order-pay .shop_table { margin-bottom: 1.5rem; } /* ========================================================================== 11. MY ACCOUNT ========================================================================== */ .vibemotion-woo .woocommerce-MyAccount-navigation, .vibemotion-woo .woocommerce-MyAccount-content { float: none; width: 100%; } @media (min-width: 900px) { .vibemotion-woo .woocommerce-account .woocommerce { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 2rem; align-items: start; } .vibemotion-woo .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } } .vibemotion-woo .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 1.75rem; padding: 0.5rem; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 0.25rem; } .vibemotion-woo .woocommerce-MyAccount-navigation li { margin: 0; list-style: none; } .vibemotion-woo .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; min-height: 46px; padding: 0.7rem 1rem; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 0.92rem; font-weight: 500; color: var(--text-secondary); transition: var(--transition-smooth); } .vibemotion-woo .woocommerce-MyAccount-navigation li a:hover { background-color: var(--bg-tertiary); color: var(--text-primary); } .vibemotion-woo .woocommerce-MyAccount-navigation li.is-active a { background: var(--accent-gradient); color: #ffffff; box-shadow: 0 8px 20px -10px var(--accent-glow); } .vibemotion-woo .woocommerce-MyAccount-content { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--card-shadow); padding: clamp(1.25rem, 3vw, 2rem); min-width: 0; } .vibemotion-woo .woocommerce-MyAccount-content > p:last-child, .vibemotion-woo .woocommerce-MyAccount-content > form:last-child, .vibemotion-woo .woocommerce-MyAccount-content > table:last-child { margin-bottom: 0; } .vibemotion-woo .woocommerce-MyAccount-content .shop_table, .vibemotion-woo .woocommerce-MyAccount-content .woocommerce-orders-table { background-color: var(--bg-primary); box-shadow: none; } .vibemotion-woo .woocommerce-orders-table__cell-order-actions .button, .vibemotion-woo .woocommerce-orders-table .button { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.84rem; margin: 0.15rem 0.25rem 0.15rem 0; } .vibemotion-woo .woocommerce-orders-table__cell-order-status { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-primary); } /* Downloads tab. */ .vibemotion-woo .woocommerce-table--order-downloads .download-product a, .vibemotion-woo .woocommerce-MyAccount-downloads .download-file a { color: var(--text-primary); font-weight: 600; } .vibemotion-woo .woocommerce-MyAccount-downloads-file { display: inline-flex; align-items: center; min-height: 44px; } /* Addresses tab. */ .vibemotion-woo .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.25rem; } .vibemotion-woo .woocommerce-Address { width: 100%; float: none; background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.35rem 1.5rem; } .vibemotion-woo .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .vibemotion-woo .woocommerce-Address-title h2, .vibemotion-woo .woocommerce-Address-title h3 { font-size: 1.05rem; margin: 0; } .vibemotion-woo .woocommerce-Address-title .edit { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-primary); min-height: 44px; display: inline-flex; align-items: center; } .vibemotion-woo .woocommerce-Address address { background: none; border: none; padding: 0; } /* Dashboard tab. */ .vibemotion-woo .woocommerce-MyAccount-content > p mark { color: var(--accent-primary); font-weight: 600; } /* Login / register / lost password / edit account. */ .vibemotion-woo .woocommerce-form-login, .vibemotion-woo .woocommerce-form-register, .vibemotion-woo .woocommerce-ResetPassword, .vibemotion-woo .lost_reset_password { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--card-shadow); padding: clamp(1.35rem, 3.5vw, 2.25rem); margin: 0 auto; max-width: 560px; width: 100%; } .vibemotion-woo .woocommerce-MyAccount-content .woocommerce-EditAccountForm { background: none; border: none; box-shadow: none; padding: 0; max-width: none; } .vibemotion-woo #customer_login { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; } @media (min-width: 768px) { .vibemotion-woo #customer_login { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .vibemotion-woo #customer_login .col-1, .vibemotion-woo #customer_login .col-2 { width: 100%; float: none; padding: 0; } .vibemotion-woo #customer_login h2 { font-size: 1.3rem; margin-bottom: 1.15rem; text-align: center; } .vibemotion-woo .woocommerce-form-login .woocommerce-form-login__submit, .vibemotion-woo .woocommerce-form-register .woocommerce-form-register__submit, .vibemotion-woo .woocommerce-EditAccountForm .woocommerce-Button, .vibemotion-woo .lost_reset_password .woocommerce-Button { width: 100%; margin: 0.5rem 0 0; } .vibemotion-woo .woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; margin: 0 0 0.5rem; color: var(--text-secondary); font-weight: 400; } .vibemotion-woo .woocommerce-LostPassword { margin: 1rem 0 0; text-align: center; font-size: 0.88rem; } .vibemotion-woo fieldset { border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 1.15rem 1.25rem; margin: 0 0 1.5rem; } .vibemotion-woo fieldset legend { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--text-primary); padding: 0 0.5rem; } /* ========================================================================== 12. PAGINATION ========================================================================== */ .vibemotion-woo .woocommerce-pagination, .vibemotion-woo .woocommerce-Pagination { margin: 2rem 0 0; text-align: center; } .vibemotion-woo .woocommerce-pagination ul.page-numbers, .vibemotion-woo .woocommerce-Pagination .page-numbers { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; border: none; } .vibemotion-woo .woocommerce-pagination ul.page-numbers li { border: none; margin: 0; list-style: none; } .vibemotion-woo .page-numbers a, .vibemotion-woo .page-numbers span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.75rem; border-radius: var(--radius-sm); background-color: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); font-weight: 600; font-size: 0.9rem; transition: var(--transition-smooth); } .vibemotion-woo .page-numbers a:hover { border-color: var(--accent-primary); color: var(--text-primary); } .vibemotion-woo .page-numbers span.current { background: var(--accent-gradient); border-color: transparent; color: #ffffff; } /* ========================================================================== 13. RESPONSIVE — 360 -> 1920, zero horizontal scroll ========================================================================== */ /* Never let a Woo table or media push the page sideways. */ .vibemotion-woo, .vibemotion-woo * { max-width: 100%; } @media (max-width: 767px) { /* Stack every data table into cards. WooCommerce already emits data-title on the cells that need one; the rest are two-column and read fine. */ .vibemotion-woo .shop_table, .vibemotion-woo .shop_table tbody, .vibemotion-woo .shop_table tfoot, .vibemotion-woo .shop_table tr, .vibemotion-woo .shop_table td, .vibemotion-woo .shop_table th { display: block; width: 100%; } .vibemotion-woo .shop_table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .vibemotion-woo .shop_table tbody tr { position: relative; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); } .vibemotion-woo .shop_table tbody tr:last-child { border-bottom: none; } .vibemotion-woo .shop_table td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 1.1rem; border-bottom: none; text-align: right; } .vibemotion-woo .shop_table td[data-title]::before { content: attr(data-title); font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); text-align: left; flex: 0 0 auto; } .vibemotion-woo .shop_table td.product-name, .vibemotion-woo .shop_table td.woocommerce-table__product-name { text-align: left; } .vibemotion-woo .shop_table td.product-remove { position: absolute; top: 0.5rem; right: 0.75rem; width: auto; padding: 0; } .vibemotion-woo .shop_table td.product-thumbnail { padding-bottom: 0; } .vibemotion-woo .shop_table td.actions { text-align: left; display: block; } .vibemotion-woo .shop_table tfoot tr { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--border-color); } .vibemotion-woo .shop_table tfoot tr:last-child { border-bottom: none; } .vibemotion-woo .shop_table tfoot th, .vibemotion-woo .shop_table tfoot td { width: auto; padding: 0.55rem 1.1rem; text-align: left; border-bottom: none; } .vibemotion-woo .woocommerce-checkout-review-order-table td, .vibemotion-woo .woocommerce-checkout-review-order-table th { text-align: left; } .vibemotion-woo table.cart td.actions .coupon { width: 100%; } .vibemotion-woo table.cart td.actions .coupon .input-text, .vibemotion-woo table.cart td.actions .coupon .button { width: 100%; flex: 1 1 100%; } } @media (max-width: 400px) { .vibemotion-woo .shop_table td, .vibemotion-woo .shop_table tfoot th, .vibemotion-woo .shop_table tfoot td { padding-left: 0.85rem; padding-right: 0.85rem; } .vibemotion-woo ul.woocommerce-order-overview, .vibemotion-woo ul.order_details, .vibemotion-woo .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr); } .vibemotion-woo .button, .vibemotion-woo a.button, .vibemotion-woo button.button, .vibemotion-woo input.button { padding-left: 1.15rem; padding-right: 1.15rem; } } /* ========================================================================== 14. LIGHT-MODE REFINEMENTS The tokens flip automatically; these are the few places that need a surface nudge so panels stay legible on the cream background. Both `.light-mode` (static build) and `[data-theme="light"]` are matched. ========================================================================== */ .light-mode .vibemotion-woo .shop_table, [data-theme='light'] .vibemotion-woo .shop_table, .light-mode .vibemotion-woo .woocommerce-MyAccount-content, [data-theme='light'] .vibemotion-woo .woocommerce-MyAccount-content, .light-mode .vibemotion-woo #customer_details .woocommerce-billing-fields, [data-theme='light'] .vibemotion-woo #customer_details .woocommerce-billing-fields, .light-mode .vibemotion-woo #customer_details .woocommerce-additional-fields, [data-theme='light'] .vibemotion-woo #customer_details .woocommerce-additional-fields, .light-mode .vibemotion-woo #order_review, [data-theme='light'] .vibemotion-woo #order_review, .light-mode .vibemotion-woo .woocommerce-form-login, [data-theme='light'] .vibemotion-woo .woocommerce-form-login, .light-mode .vibemotion-woo .woocommerce-form-register, [data-theme='light'] .vibemotion-woo .woocommerce-form-register, .light-mode .vm-order-card, [data-theme='light'] .vm-order-card { background-color: #ffffff; border-color: var(--border-color); box-shadow: var(--card-shadow); } .light-mode .vibemotion-woo .shop_table th, [data-theme='light'] .vibemotion-woo .shop_table th, .light-mode .vibemotion-woo table.cart td.actions, [data-theme='light'] .vibemotion-woo table.cart td.actions, .light-mode .vibemotion-woo #payment, [data-theme='light'] .vibemotion-woo #payment { background-color: var(--bg-secondary) !important; } .light-mode .vibemotion-woo #payment ul.payment_methods li, [data-theme='light'] .vibemotion-woo #payment ul.payment_methods li { background-color: transparent !important; } .light-mode .vibemotion-woo .woocommerce-Address, [data-theme='light'] .vibemotion-woo .woocommerce-Address, .light-mode .vm-order-dur, [data-theme='light'] .vm-order-dur, .light-mode .vm-order-total, [data-theme='light'] .vm-order-total { background-color: #ffffff !important; } .light-mode .vibemotion-woo #payment div.payment_box, [data-theme='light'] .vibemotion-woo #payment div.payment_box { background-color: transparent !important; } .light-mode .vm-order-modal, [data-theme='light'] .vm-order-modal { background-color: rgba(20, 18, 14, 0.55); } .light-mode .vm-order-modal .modal-close, [data-theme='light'] .vm-order-modal .modal-close { color: #ffffff !important; background-color: var(--accent-primary) !important; border-color: var(--accent-primary) !important; } /* ========================================================================== 15. MOTION & PRINT ========================================================================== */ @media (prefers-reduced-motion: reduce) { .vibemotion-woo *, .vibemotion-woo *::before, .vibemotion-woo *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .vibemotion-woo .button:hover, .vibemotion-woo a.button:hover, .vibemotion-woo #place_order:hover, .vibemotion-woo .checkout-button:hover { transform: none; } .vibemotion-woo-hero .hero-dot-grid { animation: none; } } @media print { .vibemotion-woo-hero, .vm-order-modal { display: none !important; } .vibemotion-woo { padding: 0; } } /* ========================================================================== SPECIFICITY BACKSTOP WooCommerce ships rules like `.woocommerce form .form-row input.input-text` (0,3,2) which outrank the block above (0,2,1) and leave form controls with the browser's default white background on My Account, checkout and the password-reset flows. These selectors restate the same design tokens at a higher specificity so the branding always wins — no !important needed. ========================================================================== */ .vibemotion-woo .woocommerce form .form-row input.input-text, .vibemotion-woo .woocommerce form .form-row textarea, .vibemotion-woo .woocommerce form .form-row select, .vibemotion-woo form.woocommerce-form input.input-text, .vibemotion-woo form.woocommerce-form-login input.input-text, .vibemotion-woo form.woocommerce-form-register input.input-text, .vibemotion-woo form.woocommerce-ResetPassword input.input-text, .vibemotion-woo form.checkout input.input-text, .vibemotion-woo form.checkout textarea, .vibemotion-woo form.checkout select, .vibemotion-woo .woocommerce-address-fields input.input-text, .vibemotion-woo .woocommerce-address-fields select, .vibemotion-woo .woocommerce-EditAccountForm input.input-text, .vibemotion-woo .woocommerce-cart-form input.input-text, .vibemotion-woo .woocommerce input.input-text, .vibemotion-woo .woocommerce textarea, .vibemotion-woo .woocommerce select, .vibemotion-woo input.woocommerce-Input, .vibemotion-woo .select2-container .select2-selection--single, .vibemotion-woo .select2-container .select2-selection--multiple { width: 100%; min-height: 48px; padding: 0.9rem 1.25rem; border-radius: var(--radius-sm); background-color: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.4; -webkit-appearance: none; appearance: none; box-shadow: none; } .vibemotion-woo .woocommerce form .form-row textarea, .vibemotion-woo form.checkout textarea, .vibemotion-woo .woocommerce textarea { min-height: 130px; resize: vertical; } .vibemotion-woo .woocommerce form .form-row input.input-text:focus, .vibemotion-woo .woocommerce form .form-row textarea:focus, .vibemotion-woo .woocommerce form .form-row select:focus, .vibemotion-woo form.woocommerce-form input.input-text:focus, .vibemotion-woo form.checkout input.input-text:focus, .vibemotion-woo form.checkout textarea:focus, .vibemotion-woo .woocommerce input.input-text:focus, .vibemotion-woo .woocommerce textarea:focus, .vibemotion-woo .woocommerce select:focus, .vibemotion-woo input.woocommerce-Input:focus { border-color: var(--accent-primary); background-color: var(--bg-primary); box-shadow: 0 0 0 3px var(--border-glow); outline: none; } /* The show/hide-password eye button WooCommerce injects into the field. */ .vibemotion-woo .woocommerce .password-input, .vibemotion-woo .woocommerce .show-password-input { background: transparent; color: var(--text-secondary); } .vibemotion-woo .woocommerce .password-input { display: block; width: 100%; position: relative; } /* Autofill would otherwise repaint the field white in Chrome. */ .vibemotion-woo input:-webkit-autofill, .vibemotion-woo input:-webkit-autofill:hover, .vibemotion-woo input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-primary); -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary) inset; caret-color: var(--text-primary); transition: background-color 5000s ease-in-out 0s; } /* WooCommerce emits the Register column before the Login column in the my-account markup, which a plain auto-placed grid renders right-to-left. Pin the order so Login is always first (left) and Register second (right). */ .vibemotion-woo #customer_login .col-1 { order: 1; } .vibemotion-woo #customer_login .col-2 { order: 2; } /* Desktop Order Modal Overrides */ @media (min-width: 992px) { .vm-order-modal { z-index: 99999 !important; padding: 2rem !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; overflow-y: auto !important; overscroll-behavior: contain !important; } .vm-order-modal .modal-inner.vm-order-inner { max-width: 560px !important; width: 100% !important; position: relative !important; margin: auto 0 !important; } .vm-order-modal .modal-close.vm-order-close { position: sticky !important; top: 0 !important; right: 0 !important; float: right !important; margin-bottom: -50px !important; width: 40px !important; height: 40px !important; z-index: 100 !important; background-color: rgba(255,255,255,0.15) !important; border: 1px solid rgba(255,255,255,0.3) !important; color: #fff !important; box-shadow: var(--glass-shadow) !important; } .light-mode .vm-order-modal .modal-close.vm-order-close, [data-theme='light'] .vm-order-modal .modal-close.vm-order-close { background-color: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: #fff !important; } .vm-order-card { max-height: none !important; padding: 2.5rem 2.5rem 4.5rem 2.5rem !important; overflow-y: visible !important; box-sizing: border-box !important; overscroll-behavior: contain !important; } }