class so the rules apply regardless of which WordPress page template is active. */ .woocommerce-cart .site-main, .woocommerce-checkout .site-main, .woocommerce-account .site-main { background: var(--color-cream); padding-bottom: 0; min-height: auto; } /* WC notice area — ensure it's not clipped */ .woocommerce-notices-wrapper { width: 100%; } /* Override WooCommerce's own default form widths inside our containers */ .woo-cart-container .woocommerce, .woo-checkout-container .woocommerce, .woo-account-container .woocommerce { width: 100%; max-width: none; float: none; } /* ── Page Header ──────────────────────────────────────────────────────────── */ .woo-page-header { background: var(--color-cream); border-bottom: 1px solid var(--color-cream-dark); padding: var(--space-32) 0 var(--space-24); text-align: center; } .woo-page-header__title { font-size: clamp(1.75rem, 5vw, 2.75rem); } .woo-page-header__count { color: var(--color-ink-muted); } .woo-page-header__sub { font-family: var(--font-body); font-size: 1rem; color: var(--color-ink-muted); margin: var(--space-8) 0 0; } /* ── Shared Input Styling ─────────────────────────────────────────────────── */ .woo-input { display: block; width: 100%; height: 48px; padding: 0 var(--space-16); background: var(--color-white); border: 1.5px solid var(--color-cream-dark); border-radius: 6px; font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; } .woo-input::placeholder { color: var(--color-ink-subtle); } .woo-input:focus-visible { border-color: var(--color-rose); box-shadow: 0 0 0 3px rgba(181,72,90,.18); } .woo-input--textarea { height: auto; padding: var(--space-12) var(--space-16); resize: vertical; min-height: 120px; } .woo-input--select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A756E' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-12) center; padding-right: var(--space-40); cursor: pointer; } .woo-field-group { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-20); } .woo-field-label { font-family: var(--font-label); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-mid); } .woo-field-required { color: var(--color-rose); margin-left: 2px; } .woo-field-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-20); } .woo-checkbox-label { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-body); font-size: 0.875rem; color: var(--color-ink-mid); cursor: pointer; } .woo-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-rose); cursor: pointer; } .woo-forgot-link { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-rose); text-decoration: none; } .woo-forgot-link:hover { text-decoration: underline; } .woo-password-wrap { position: relative; } /* ── Gold Line Accent ─────────────────────────────────────────────────────── */ .gold-line { display: block; width: 36px; height: 2px; background: var(--color-gold); margin-top: var(--space-8); border-radius: 2px; } /* ============================================================================ LOGIN / REGISTER ============================================================================ */ .woo-login-page { padding-bottom: var(--space-64); } .woo-login-page .woo-page-header--inline { text-align: left; padding-bottom: var(--space-32); } .login-register-layout { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-16); } @media (min-width: 768px) { .login-register-layout { flex-direction: row; align-items: stretch; gap: 0; } .login-panel { flex: 1; padding-right: var(--space-48); border-right: 1px solid var(--color-cream-dark); } .register-panel { flex: 1; padding-left: var(--space-48); } .auth-panel__divider { display: none; } } .auth-panel__divider { display: flex; align-items: center; justify-content: center; gap: var(--space-16); font-family: var(--font-body); font-size: 0.875rem; color: var(--color-ink-subtle); padding: var(--space-12) 0; } .auth-panel__divider::before, .auth-panel__divider::after { content: ''; flex: 1; height: 1px; background: var(--color-cream-dark); } .auth-panel__inner { padding: var(--space-8) 0; } .auth-panel__heading { font-family: var(--font-display); font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 400; color: var(--color-ink); margin: 0 0 var(--space-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); } .auth-panel__sub { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink-muted); margin: 0 0 var(--space-24); line-height: 1.6; } .auth-panel__privacy { font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-ink-subtle); line-height: 1.6; margin-bottom: var(--space-20); } .auth-panel__privacy a { color: var(--color-rose); } .auth-panel__auto-password { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-ink-muted); font-style: italic; margin-bottom: var(--space-16); } /* ============================================================================ MY ACCOUNT ============================================================================ */ .woo-account-page { padding-bottom: var(--space-64); } .account-layout { display: flex; flex-direction: column; gap: var(--space-32); padding-top: var(--space-40); } @media (min-width: 1024px) { .account-layout { flex-direction: row; align-items: flex-start; gap: var(--space-48); } .account-sidebar { flex: 0 0 240px; position: sticky; top: calc(var(--header-h, 72px) + var(--space-24)); } .account-content { flex: 1 1 0; min-width: 0; } } /* ── Sidebar ──────────────────────────────────────────────────────────────── */ .account-sidebar__inner { background: var(--color-white); border: 1px solid var(--color-cream-dark); border-radius: 12px; overflow: hidden; } .account-sidebar__greeting { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-20); background: var(--color-cream); border-bottom: 1px solid var(--color-cream-dark); } .account-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .account-sidebar__hello { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-ink-muted); margin: 0; } .account-sidebar__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; color: var(--color-ink); margin: 0; } /* ── Account Nav ──────────────────────────────────────────────────────────── */ .wc-account-nav__list { list-style: none; margin: 0; padding: var(--space-8) 0; } .wc-account-nav__item { position: relative; } .wc-account-nav__link { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-12) var(--space-20); font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink-mid); text-decoration: none; transition: color 0.2s, background 0.2s; position: relative; } .wc-account-nav__link::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-rose); opacity: 0; transition: opacity 0.2s; border-radius: 0 2px 2px 0; } .wc-account-nav__item.is-active .wc-account-nav__link, .wc-account-nav__item.woocommerce-MyAccount-navigation-link--dashboard.is-active .wc-account-nav__link { color: var(--color-rose); font-weight: 500; } .wc-account-nav__item.is-active .wc-account-nav__link::before { opacity: 1; } .wc-account-nav__link:hover { color: var(--color-rose); background: var(--color-rose-tint); } .wc-account-nav__link:hover::before { opacity: 0.5; } .wc-account-nav__link:focus-visible { outline: 3px solid var(--color-rose); outline-offset: -3px; } .wc-account-nav__link--logout { color: var(--color-ink-muted); margin-top: var(--space-8); border-top: 1px solid var(--color-cream-dark); } .wc-account-nav__link--logout:hover { color: var(--color-error); background: rgba(192,57,43,.05); } .wc-account-nav__icon { flex-shrink: 0; opacity: 0.8; } /* ── Dashboard ────────────────────────────────────────────────────────────── */ .account-dashboard {} .dashboard-welcome { display: flex; align-items: flex-start; justify-content: space-between; background: linear-gradient(135deg, var(--color-rose-tint) 0%, var(--color-gold-tint) 100%); border: 1px solid var(--color-cream-dark); border-radius: 12px; padding: var(--space-24) var(--space-24); margin-bottom: var(--space-32); gap: var(--space-16); } .dashboard-welcome__heading { font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.625rem); font-weight: 400; color: var(--color-ink); margin: 0 0 var(--space-8); } .dashboard-welcome__name { color: var(--color-rose); } .dashboard-welcome__sub { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink-muted); margin: 0; } /* ── Stats ────────────────────────────────────────────────────────────────── */ .dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); margin-bottom: var(--space-32); } .dashboard-stat { background: var(--color-white); border: 1px solid var(--color-cream-dark); border-radius: 10px; padding: var(--space-20); text-align: center; position: relative; } .dashboard-stat--coming-soon { opacity: 0.6; } .dashboard-stat__value { font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--color-rose); margin: 0 0 var(--space-4); line-height: 1; } .dashboard-stat__label { font-family: var(--font-label); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-muted); margin: 0; } .dashboard-stat__badge { position: absolute; top: var(--space-8); right: var(--space-8); background: var(--color-cream-dark); color: var(--color-ink-subtle); font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 20px; } /* ── Quick Links ──────────────────────────────────────────────────────────── */ .dashboard-quick-links { margin-top: var(--space-32); } .dashboard-quick-links__heading { font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; color: var(--color-ink); margin: 0 0 var(--space-16); } .dashboard-quick-links__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-12); } @media (min-width: 640px) { .dashboard-quick-links__grid { grid-template-columns: repeat(4, 1fr); } } .dashboard-quick-link { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); background: var(--color-white); border: 1px solid var(--color-cream-dark); border-radius: 10px; padding: var(--space-20) var(--space-12); text-decoration: none; font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-ink-mid); transition: border-color 0.2s, box-shadow 0.2s; text-align: center; } .dashboard-quick-link:hover { border-color: var(--color-rose-light); box-shadow: 0 2px 12px rgba(181,72,90,.1); color: var(--color-rose); } .dashboard-quick-link:focus-visible { outline: 3px solid var(--color-rose); } /* WooCommerce account content generic styles */ .woocommerce-MyAccount-content { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink); line-height: 1.6; } .woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .woocommerce-MyAccount-content table th { font-family: var(--font-label); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-muted); text-align: left; padding: var(--space-10) var(--space-12) var(--space-10) 0; border-bottom: 1px solid var(--color-cream-dark); } .woocommerce-MyAccount-content table td { padding: var(--space-12) var(--space-12) var(--space-12) 0; border-bottom: 1px solid var(--color-cream-dark); color: var(--color-ink-mid); } /* WooCommerce notices — WC renders these as

children */ .woocommerce-notices-wrapper { margin-bottom: var(--space-20); } .woocommerce-message, .woocommerce-info, .woocommerce-error { display: block; padding: var(--space-14) var(--space-16) var(--space-14) var(--space-20); border-radius: 8px; font-family: var(--font-body); font-size: 0.9375rem; margin-bottom: var(--space-16); list-style: none; } .woocommerce-message { background: rgba(58,124,82,.08); border-left: 3px solid var(--color-success); color: var(--color-success); } .woocommerce-info { background: var(--color-gold-tint); border-left: 3px solid var(--color-gold); color: var(--color-gold-dark); } .woocommerce-error { background: rgba(192,57,43,.06); border-left: 3px solid var(--color-error); color: var(--color-error); } /* Each notice
stacks vertically */ .woocommerce-message li, .woocommerce-info li, .woocommerce-error li { display: block; padding: var(--space-4) 0; font-family: var(--font-body); font-size: 0.9375rem; } /* WC sometimes puts a link/button inside notices */ .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { float: right; font-family: var(--font-label); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: 4px; text-decoration: none; background: transparent; border: 1px solid currentColor; color: inherit; cursor: pointer; } /* ============================================================================= WC DEFAULT STYLE OVERRIDES Neutralise woocommerce-layout.css floats & style WC's own form classes so checkout billing/shipping fields inherit our woo-input design. ============================================================================= */ /* ── Reset WC float-based layouts inside our containers ──────────────────── */ .woo-checkout-container .woocommerce-billing-fields, .woo-checkout-container .woocommerce-shipping-fields { float: none; width: 100%; } .woo-checkout-container .form-row { float: none !important; width: 100% !important; overflow: visible; margin: 0 0 var(--space-20); padding: 0; } /* Side-by-side first/last name on ≥640px */ @media (min-width: 640px) { .woo-checkout-container .woocommerce-billing-fields__field-wrapper, .woo-checkout-container .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-20); } .woo-checkout-container .form-row-wide { grid-column: 1 / -1; } } /* ── Checkout & account form fields ──────────────────────────────────────── */ .woo-checkout-container .form-row label, .woo-account-container .form-row label { display: block; font-family: var(--font-label); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-mid); margin-bottom: var(--space-6); } .woo-checkout-container .form-row label .optional, .woo-account-container .form-row label .optional { color: var(--color-ink-subtle); font-weight: 300; } .woo-checkout-container .form-row label .required, .woo-account-container .form-row label .required { color: var(--color-rose); } .woo-checkout-container .form-row .input-text, .woo-checkout-container .form-row select, .woo-checkout-container .form-row textarea, .woo-account-container .form-row .input-text, .woo-account-container .form-row select, .woo-account-container .form-row textarea { display: block; width: 100%; height: 48px; padding: 0 var(--space-16); background: var(--color-white); border: 1.5px solid var(--color-cream-dark); border-radius: 6px; font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; box-sizing: border-box; } .woo-checkout-container .form-row textarea, .woo-account-container .form-row textarea { height: auto; padding: var(--space-12) var(--space-16); resize: vertical; min-height: 100px; } .woo-checkout-container .form-row .input-text:focus-visible, .woo-checkout-container .form-row select:focus-visible, .woo-account-container .form-row .input-text:focus-visible, .woo-account-container .form-row select:focus-visible { border-color: var(--color-rose); box-shadow: 0 0 0 3px rgba(181,72,90,.18); } /* WC wraps input in a span — remove any block weirdness */ .woo-checkout-container .woocommerce-input-wrapper, .woo-account-container .woocommerce-input-wrapper { display: block; width: 100%; } /* ── Account form: reset WC's float-based layout (woocommerce-layout.css) ── */ /* woocommerce-layout.css sets form .form-row-first { float:left; width:47% } — nuke it */ .woo-account-container form .form-row { float: none !important; clear: none !important; margin: 0 0 var(--space-20) !important; padding: 0 !important; } .woo-account-container form .form-row-first, .woo-account-container form .form-row-last { width: 100% !important; float: none !important; } .woo-account-container form .form-row-wide { clear: none !important; } /* ── Validation states (set by WC's JS and server-side handler) ──────────── */ .woo-account-container .form-row.woocommerce-invalid > label, .woo-account-container .form-row.woocommerce-invalid .woocommerce-input-wrapper ~ label { color: var(--color-error) !important; } .woo-account-container .form-row.woocommerce-invalid .input-text, .woo-account-container .form-row.woocommerce-invalid select { border-color: var(--color-error) !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14) !important; } .woo-account-container .form-row.woocommerce-validated .input-text, .woo-account-container .form-row.woocommerce-validated select { border-color: var(--color-success) !important; } /* Inline "this field is required" notice under fields */ .woo-account-container .form-row .woocommerce-error { display: block !important; padding: var(--space-6) var(--space-10) !important; margin: var(--space-6) 0 0 !important; border-radius: 4px !important; font-size: 0.8125rem !important; border-left-width: 2px !important; } /* ── Password show/hide toggle (WC inserts .show-password-input button) ──── */ .woo-account-container .form-row .password-input { position: relative; display: block; } .woo-account-container .form-row .password-input .input-text { padding-right: 44px !important; } .woo-account-container .form-row .show-password-input { position: absolute; right: var(--space-12); top: 50%; transform: translateY(-50%); background: transparent; border: none; padding: 0; cursor: pointer; color: var(--color-ink-muted); display: flex; align-items: center; } .woo-account-container .form-row .show-password-input:hover { color: var(--color-rose); } /* ── Select2 dropdowns (country / state in address form) ────────────────── */ .woo-account-container .select2-container { width: 100% !important; } .woo-account-container .select2-container .select2-selection--single { height: 48px !important; border: 1.5px solid var(--color-cream-dark) !important; border-radius: 6px !important; background: var(--color-white) !important; display: flex !important; align-items: center !important; outline: none !important; transition: border-color 0.2s, box-shadow 0.2s !important; } .woo-account-container .select2-container .select2-selection--single .select2-selection__rendered { line-height: 48px !important; padding: 0 40px 0 var(--space-16) !important; font-family: var(--font-body) !important; font-size: 0.9375rem !important; color: var(--color-ink) !important; } .woo-account-container .select2-container .select2-selection--single .select2-selection__arrow { height: 48px !important; right: var(--space-12) !important; } .woo-account-container .select2-container--open .select2-selection--single, .woo-account-container .select2-container--focus .select2-selection--single { border-color: var(--color-rose) !important; box-shadow: 0 0 0 3px rgba(181, 72, 90, 0.18) !important; } /* Select2 dropdown panel */ .woo-account-container .select2-dropdown, .select2-container--default.select2-container--open .select2-dropdown { border: 1.5px solid var(--color-cream-dark); border-radius: 6px; box-shadow: 0 4px 24px rgba(28, 26, 24, 0.12); font-family: var(--font-body); font-size: 0.9375rem; } .woo-account-container .select2-search--dropdown .select2-search__field { border: 1.5px solid var(--color-cream-dark) !important; border-radius: 4px !important; padding: var(--space-8) var(--space-12) !important; font-family: var(--font-body) !important; font-size: 0.875rem !important; outline: none !important; } .woo-account-container .select2-search--dropdown .select2-search__field:focus { border-color: var(--color-rose) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background-color: var(--color-rose) !important; color: var(--color-white) !important; } .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[data-selected=true] { background-color: var(--color-rose-tint) !important; color: var(--color-rose) !important; } /* ── Account form: WC's abbr required marker ─────────────────────────────── */ .woo-account-container .form-row label abbr.required[title] { color: var(--color-rose); text-decoration: none; font-weight: 500; margin-left: 2px; } /* ── Checkout: ship-to-different-address checkbox ────────────────────────── */ .woocommerce-checkout .woocommerce-shipping-fields h3 label { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; text-transform: none; letter-spacing: 0; cursor: pointer; } /* ── Order review table (rendered by WC via woocommerce_checkout_order_review) */ .checkout-order-review .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .checkout-order-review .woocommerce-checkout-review-order-table th, .checkout-order-review .woocommerce-checkout-review-order-table td { padding: var(--space-10) 0; border-bottom: 1px solid var(--color-cream-dark); font-family: var(--font-body); color: var(--color-ink-mid); text-align: left; } .checkout-order-review .woocommerce-checkout-review-order-table th { font-family: var(--font-label); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-muted); } .checkout-order-review .woocommerce-checkout-review-order-table .order-total th, .checkout-order-review .woocommerce-checkout-review-order-table .order-total td { font-weight: 600; color: var(--color-ink); border-bottom: none; padding-top: var(--space-16); font-size: 1rem; } /* ── Payment section ─────────────────────────────────────────────────────── */ .checkout-payment #payment { background: var(--color-white); border: 1.5px solid var(--color-cream-dark); border-radius: 10px; padding: var(--space-20); } .checkout-payment #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 var(--space-16); } .checkout-payment #payment ul.payment_methods li { padding: var(--space-10) 0; border-bottom: 1px solid var(--color-cream-dark); } .checkout-payment #payment ul.payment_methods li:last-child { border-bottom: none; } .checkout-payment #payment ul.payment_methods label { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink); display: inline-flex; align-items: center; gap: var(--space-8); cursor: pointer; } .checkout-payment #payment .payment_box { background: var(--color-cream); border-radius: 6px; padding: var(--space-12) var(--space-16); margin-top: var(--space-8); font-size: 0.875rem; color: var(--color-ink-muted); } /* Place Order button */ .checkout-payment #payment #place_order { display: block; width: 100%; float: none; height: 52px; background: var(--color-rose); color: var(--color-white); border: none; border-radius: 6px; font-family: var(--font-label); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease; margin-top: var(--space-16); } .checkout-payment #payment #place_order:hover { background: var(--color-rose-dark); } /* ── My Account: WC default nav floats ──────────────────────────────────── */ .woo-account-container .woocommerce-MyAccount-navigation { float: none; width: auto; } .woo-account-container .woocommerce-MyAccount-content { float: none; width: auto; } /* ============================================================================= ADDRESSES PAGE (.acct-addresses / my-address.php) ============================================================================= */ .acct-section-header { margin-bottom: var(--space-24); } .acct-section-title { font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.625rem); font-weight: 400; color: var(--color-ink); margin: 0 0 var(--space-8); } .acct-section-sub { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink-muted); margin: 0; } /* ── Address grid ────────────────────────────────────────────────────────── */ .acct-address-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16); } @media (min-width: 600px) { .acct-address-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Address card ────────────────────────────────────────────────────────── */ .acct-address-card { background: var(--color-white); border: 1px solid var(--color-cream-dark); border-radius: 12px; overflow: hidden; transition: box-shadow 0.2s; } .acct-address-card:hover { box-shadow: 0 4px 20px rgba(181, 72, 90, 0.08); } .acct-address-card__head { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-16) var(--space-20); background: var(--color-cream); border-bottom: 1px solid var(--color-cream-dark); } .acct-address-card__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--color-rose-tint); border-radius: 8px; color: var(--color-rose); flex-shrink: 0; } .acct-address-card__title { flex: 1; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; color: var(--color-ink); margin: 0; } .acct-address-card__edit { display: inline-flex; align-items: center; gap: var(--space-4); font-family: var(--font-label); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-rose); text-decoration: none; padding: 6px 12px; border: 1px solid var(--color-rose-light); border-radius: 6px; background: var(--color-white); transition: background 0.2s, border-color 0.2s; flex-shrink: 0; } .acct-address-card__edit:hover { background: var(--color-rose-tint); border-color: var(--color-rose); } .acct-address-card__edit:focus-visible { outline: 3px solid var(--color-rose); outline-offset: 2px; } .acct-address-card__body { padding: var(--space-20); } .acct-address-card__address { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink-mid); line-height: 1.65; font-style: normal; } .acct-address-card__empty { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink-subtle); margin: 0 0 var(--space-14); font-style: italic; } .acct-address-card__add-cta { display: inline-flex; align-items: center; gap: var(--space-6); font-family: var(--font-label); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-rose); text-decoration: none; border-bottom: 1px solid var(--color-rose-light); padding-bottom: 2px; transition: border-color 0.2s, color 0.2s; } .acct-address-card__add-cta:hover { color: var(--color-rose-dark); border-color: var(--color-rose); } .acct-address-card__add-cta:focus-visible { outline: 3px solid var(--color-rose); outline-offset: 3px; } /* ============================================================================= ACCOUNT EDIT FORMS (form-edit-address.php + form-edit-account.php) ============================================================================= */ .acct-edit-form { background: var(--color-white); border: 1px solid var(--color-cream-dark); border-radius: 12px; overflow: hidden; } /* ── Form header ─────────────────────────────────────────────────────────── */ .acct-edit-form__header { padding: var(--space-20) var(--space-24); background: var(--color-cream); border-bottom: 1px solid var(--color-cream-dark); } .acct-edit-form__back { display: inline-flex; align-items: center; gap: var(--space-6); font-family: var(--font-label); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); text-decoration: none; margin-bottom: var(--space-10); transition: color 0.2s; } .acct-edit-form__back:hover { color: var(--color-rose); } .acct-edit-form__back:focus-visible { outline: 3px solid var(--color-rose); outline-offset: 3px; } .acct-edit-form__title { font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 400; color: var(--color-ink); margin: 0; } .acct-edit-form__sub { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink-muted); margin: var(--space-6) 0 0; } /* ── Form body ───────────────────────────────────────────────────────────── */ .acct-edit-form__form { padding: var(--space-24); } /* Responsive 2-col field grid (first/last name side-by-side on wider screens) */ .acct-fields-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: var(--space-24); } @media (min-width: 600px) { .acct-fields-grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-20); } /* Wide fields, and first/last-name pairs that aren't consecutive: span full width */ .acct-fields-grid .form-row-wide, .acct-fields-grid .woocommerce-form-row--wide { grid-column: 1 / -1; } /* Side-by-side: first sits col 1, last sits col 2 */ .acct-fields-grid .form-row-first { grid-column: 1; } .acct-fields-grid .form-row-last { grid-column: 2; } } /* All form-row children of the grid must be width:100% regardless of WC floats */ .acct-fields-grid .form-row { width: 100% !important; float: none !important; clear: none !important; margin: 0 0 var(--space-20) !important; padding: 0 !important; box-sizing: border-box; } /* Form rows inside acct-edit-form inherit .woo-account-container styles but also need their own margin management */ .acct-edit-form__form .form-row { margin: 0 0 var(--space-20); } /* Field hint (display name description) */ .acct-field-hint { display: block; font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-ink-subtle); margin-top: var(--space-6); font-style: italic; } .acct-field-optional { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 300; color: var(--color-ink-subtle); letter-spacing: 0; text-transform: none; } /* ── Password change fieldset ────────────────────────────────────────────── */ .acct-password-fieldset { border: 1.5px solid var(--color-cream-dark); border-radius: 10px; padding: var(--space-20) var(--space-24); margin: 0 0 var(--space-24); } .acct-password-fieldset__legend { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; color: var(--color-ink); padding: 0 var(--space-8); margin-left: calc(var(--space-8) * -1); } .acct-password-fieldset .acct-fields-grid { margin-bottom: 0; margin-top: var(--space-16); } /* ── Form actions (Save button row) ─────────────────────────────────────── */ .acct-edit-form__actions { display: flex; align-items: center; gap: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--color-cream-dark); margin-top: var(--space-8); } /* ============================================================================= FORGOT / RESET PASSWORD (form-lost-password.php, form-reset-password.php, lost-password-confirmation.php) Renders inside .account-content — centred narrow card, no sidebar needed. ============================================================================= */ .pwd-form { max-width: 440px; margin: 0 auto; padding: var(--space-40) 0 var(--space-56); text-align: center; } /* Circle icon badge */ .pwd-form__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--color-rose-tint); color: var(--color-rose); margin: 0 auto var(--space-24); } .pwd-form__icon--success { background: rgba(58,124,82,.08); color: var(--color-success); } .pwd-form__icon--sent { background: var(--color-gold-tint); color: var(--color-gold); } .pwd-form__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-12); } .pwd-form__sub { font-size: .9375rem; color: var(--color-ink-muted); line-height: 1.7; margin-bottom: var(--space-32); } .pwd-form__note { font-size: .8125rem; color: var(--color-ink-subtle); line-height: 1.7; margin-bottom: var(--space-32); border: 1px solid var(--color-cream-dark); border-radius: var(--r-md); background: var(--color-cream); padding: var(--space-12) var(--space-16); } .pwd-form__form { text-align: left; margin-bottom: var(--space-24); } /* Field groups and inputs inherit woo-field-group / woo-input — just add bottom gap */ .pwd-form__form .woo-field-group { margin-bottom: var(--space-20); } /* Submit button sits flush below the last field */ .pwd-form__form .btn { margin-top: var(--space-8); } /* "Back to sign in" link below the form */ .pwd-form__back { margin-top: var(--space-8); font-size: .875rem; } .pwd-form__back a { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-ink-muted); text-decoration: none; font-family: var(--font-label); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; transition: color var(--t-base); } .pwd-form__back a:hover { color: var(--color-rose); } .pwd-form__back a svg { transition: transform var(--t-base); } .pwd-form__back a:hover svg { transform: translateX(-3px); } /* Confirmation variant — extra breathing room, no text-align: left override */ .pwd-form--confirmation .pwd-form__sub { margin-bottom: var(--space-16); } /* ── Cart page: WC default table.cart override ──────────────────────────── */ /* WC may render a table.cart if its own template fires — hide it, ours takes over */ .woo-cart-container table.cart { display: none; } .woo-cart-container .cart-collaterals { display: none; } /* ============================================================================= WooCommerce BLOCKS — Cart & Checkout (block-based pages, React-rendered) IMPORTANT: Do NOT override display/grid/flex on WC block containers. WC blocks handle their own responsive layout. We layer brand styles on top. ============================================================================= */ /* ── Shared block page wrapper ───────────────────────────────────────────── */ .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { font-family: var(--font-body); color: var(--color-ink); padding-top: var(--space-32); padding-bottom: var(--space-64); box-sizing: border-box; } /* ── Branded page header (injected via the_content filter) ───────────────── */ .woo-page-header--block { text-align: center; background: var(--color-cream); border-bottom: 1px solid var(--color-cream-dark); padding: var(--space-32) 0 var(--space-24); } .woo-checkout-steps { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin-top: var(--space-8); } .woo-checkout-step { font-family: var(--font-label); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-subtle); } .woo-checkout-step--done { color: var(--color-gold); text-decoration: line-through; text-decoration-color: var(--color-gold-light); } .woo-checkout-step--active { color: var(--color-rose); font-weight: 600; } .woo-checkout-steps svg { color: var(--color-ink-subtle); flex-shrink: 0; } /* ── CART BLOCK: cosmetic styling (WC handles its own grid layout) ────────── */ /* Cart items panel */ .wp-block-woocommerce-cart-items-block { background: var(--color-white); border: 1px solid var(--color-cream-dark); border-radius: 12px; padding: var(--space-24); box-sizing: border-box; } /* Cart totals panel */ .wp-block-woocommerce-cart-totals-block { background: var(--color-white); border: 1px solid var(--color-cream-dark); border-radius: 12px; padding: var(--space-24); box-sizing: border-box; overflow: visible; } /* Order summary inside totals */ .wp-block-woocommerce-cart-order-summary-block { border-bottom: 1px solid var(--color-cream-dark); margin-bottom: var(--space-20); padding-bottom: var(--space-20); } /* "Order summary" heading */ .wc-block-cart__totals-title, .wp-block-woocommerce-cart-order-summary-heading-block h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; color: var(--color-ink); margin: 0 0 var(--space-16); padding-bottom: var(--space-12); border-bottom: 2px solid var(--color-gold-light); position: relative; } .wc-block-cart__totals-title::after, .wp-block-woocommerce-cart-order-summary-heading-block h2::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 48px; height: 2px; background: var(--color-gold); } /* Cart line items table */ .wc-block-cart-items { width: 100%; border-collapse: collapse; } .wc-block-cart-items__header { font-family: var(--font-label); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-muted); border-bottom: 1px solid var(--color-cream-dark); padding-bottom: var(--space-10); } .wc-block-cart-item { border-bottom: 1px solid var(--color-cream-dark); padding: var(--space-16) 0; } .wc-block-cart-item:last-child { border-bottom: none; } /* Product image in cart */ .wc-block-cart-item__image img { border-radius: 8px; border: 1px solid var(--color-cream-dark); width: 72px; height: 72px; object-fit: cover; } /* Product name */ .wc-block-cart-item__product-name, .wc-block-cart-item__product-name a { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: var(--color-ink); text-decoration: none; } .wc-block-cart-item__product-name a:hover { color: var(--color-rose); } /* Price in cart */ .wc-block-cart-item__total .wc-block-components-product-price { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: var(--color-ink); } .wc-block-cart-item__total .wc-block-components-product-price__value--sale { color: var(--color-rose); } /* Qty stepper in cart blocks */ .wc-block-components-quantity-selector { display: inline-flex; align-items: center; border: 1.5px solid var(--color-cream-dark); border-radius: 6px; overflow: hidden; } .wc-block-components-quantity-selector__button { width: 32px; height: 36px; background: var(--color-cream); border: none; cursor: pointer; font-size: 1rem; color: var(--color-ink-mid); transition: background 0.15s ease; } .wc-block-components-quantity-selector__button:hover { background: var(--color-cream-dark); } .wc-block-components-quantity-selector__value { width: 40px; height: 36px; text-align: center; border: none; border-left: 1.5px solid var(--color-cream-dark); border-right: 1.5px solid var(--color-cream-dark); font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink); background: var(--color-white); } /* Remove item link */ .wc-block-cart-item__remove-link { font-size: 0.8125rem; color: var(--color-ink-muted); text-decoration: none; transition: color 0.15s ease; } .wc-block-cart-item__remove-link:hover { color: var(--color-rose); } /* Cross-sells heading */ .wp-block-woocommerce-product-collection h2.wp-block-heading { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; color: var(--color-ink); margin: var(--space-48) 0 var(--space-24); padding-bottom: var(--space-10); border-bottom: 1px solid var(--color-cream-dark); } /* ── Coupon form ─────────────────────────────────────────────────────────── */ .wc-block-components-totals-coupon details, .wc-block-components-totals-coupon__form { background: var(--color-cream); border-radius: 8px; padding: var(--space-12) var(--space-16); margin-bottom: var(--space-12); } .wc-block-components-totals-coupon summary { font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-dark); cursor: pointer; list-style: none; } .wc-block-components-totals-coupon summary::marker, .wc-block-components-totals-coupon summary::-webkit-details-marker { display: none; } .wc-block-components-coupon-input .wc-block-components-text-input input, .wc-block-components-totals-coupon input[type="text"] { height: 44px; border: 1.5px solid var(--color-cream-dark); border-radius: 6px; padding: 0 var(--space-12); font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink); width: 100%; box-sizing: border-box; background: var(--color-white); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .wc-block-components-coupon-input .wc-block-components-text-input input:focus, .wc-block-components-totals-coupon input[type="text"]:focus { border-color: var(--color-rose); box-shadow: 0 0 0 3px rgba(181,72,90,.15); } /* ── Totals rows ─────────────────────────────────────────────────────────── */ .wc-block-components-totals-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-8) 0; border-bottom: 1px solid var(--color-cream-dark); font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink-mid); } .wc-block-components-totals-item:last-child { border-bottom: none; } .wc-block-components-totals-item__label { font-size: 0.875rem; color: var(--color-ink-muted); } .wc-block-components-totals-item__value { font-weight: 500; color: var(--color-ink); } /* Order total row */ .wc-block-components-totals-footer-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-16) 0 0; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; color: var(--color-ink); } .wc-block-components-totals-footer-item__label { font-size: 0.875rem; } /* ── Proceed to checkout button (Cart block) ─────────────────────────────── */ .wc-block-cart__submit-container { margin-top: var(--space-20); width: 100%; box-sizing: border-box; } .wc-block-cart__submit-button, .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button { display: flex; align-items: center; justify-content: center; width: 100% !important; max-width: 100%; box-sizing: border-box; min-height: 52px; padding: var(--space-12) var(--space-16); background: var(--color-rose) !important; color: var(--color-white) !important; border: none !important; border-radius: 6px; font-family: var(--font-label); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; line-height: 1.3; word-break: normal; white-space: normal; text-align: center; transition: background 0.2s ease, transform 0.15s ease; } .wc-block-cart__submit-button:hover, .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button:hover { background: var(--color-rose-dark) !important; transform: translateY(-1px); } /* Accepted payment methods icons */ .wc-block-cart__payment-method-icons { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: center; margin-top: var(--space-16); opacity: 0.65; } /* ── CHECKOUT BLOCK: cosmetic styling (WC handles its own grid layout) ────── */ /* Left column: checkout fields */ .wp-block-woocommerce-checkout-fields-block { background: var(--color-white); border: 1px solid var(--color-cream-dark); border-radius: 12px; padding: var(--space-24); box-sizing: border-box; } /* Right column: order summary */ .wp-block-woocommerce-checkout-totals-block { background: var(--color-white); border: 1px solid var(--color-cream-dark); border-radius: 12px; padding: var(--space-20); box-sizing: border-box; } /* Checkout: step sections */ .wc-block-checkout__step { margin-bottom: var(--space-32); padding-bottom: var(--space-32); border-bottom: 1px solid var(--color-cream-dark); } .wc-block-checkout__step:last-child { border-bottom: none; margin-bottom: 0; } .wc-block-checkout__step-heading, .wc-block-components-checkout-step__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; color: var(--color-ink); margin: 0 0 var(--space-20); padding-bottom: var(--space-10); border-bottom: 2px solid var(--color-gold-light); position: relative; } .wc-block-checkout__step-heading::after, .wc-block-components-checkout-step__title::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 36px; height: 2px; background: var(--color-gold); } /* Checkout: text inputs */ .wc-block-components-text-input input, .wc-block-components-address-form input, .wc-block-components-address-form select, .wc-block-components-address-form textarea { height: 48px; width: 100%; box-sizing: border-box; padding: 0 var(--space-16); background: var(--color-white); border: 1.5px solid var(--color-cream-dark); border-radius: 6px; font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; } .wc-block-components-address-form textarea { height: auto; padding-top: var(--space-12); padding-bottom: var(--space-12); resize: vertical; min-height: 90px; } .wc-block-components-text-input input:focus, .wc-block-components-address-form input:focus, .wc-block-components-address-form select:focus { border-color: var(--color-rose); box-shadow: 0 0 0 3px rgba(181,72,90,.15); } /* Checkout: labels */ .wc-block-components-text-input label, .wc-block-components-address-form label, .wc-block-components-form-token-field-label label { display: block; font-family: var(--font-label); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-mid); margin-bottom: var(--space-6); } /* Checkout: form field groups */ .wc-block-components-address-form { display: grid; grid-template-columns: 1fr; gap: var(--space-16); } @media (min-width: 640px) { .wc-block-components-address-form { grid-template-columns: 1fr 1fr; } .wc-block-components-address-form .wc-block-components-country-input, .wc-block-components-address-form .wc-block-components-address-1-input, .wc-block-components-address-form .wc-block-components-address-2-input, .wc-block-components-address-form .wc-block-components-email-input, .wc-block-components-address-form .wc-block-components-phone-input { grid-column: 1 / -1; } } /* Contact info block */ .wp-block-woocommerce-checkout-contact-information-block { margin-bottom: var(--space-24); padding-bottom: var(--space-24); border-bottom: 1px solid var(--color-cream-dark); } /* Shipping/billing address blocks */ .wp-block-woocommerce-checkout-shipping-address-block, .wp-block-woocommerce-checkout-billing-address-block { margin-bottom: var(--space-24); padding-bottom: var(--space-24); border-bottom: 1px solid var(--color-cream-dark); } /* Checkout: order summary */ .wp-block-woocommerce-checkout-order-summary-block h2, .wc-block-components-order-summary-item__header { font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; color: var(--color-ink); margin: 0 0 var(--space-16); padding-bottom: var(--space-10); border-bottom: 2px solid var(--color-gold-light); position: relative; } .wp-block-woocommerce-checkout-order-summary-block h2::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 36px; height: 2px; background: var(--color-gold); } /* Order summary cart items */ .wc-block-order-summary-item { display: flex; gap: var(--space-12); padding: var(--space-12) 0; border-bottom: 1px solid var(--color-cream-dark); font-size: 0.875rem; } .wc-block-order-summary-item__image img { border-radius: 6px; border: 1px solid var(--color-cream-dark); width: 56px; height: 56px; object-fit: cover; } .wc-block-order-summary-item__product-details { flex: 1; font-family: var(--font-body); } .wc-block-order-summary-item__product-name { font-weight: 500; color: var(--color-ink); margin-bottom: var(--space-4); } .wc-block-order-summary-item__individual-prices { color: var(--color-ink-muted); font-size: 0.8125rem; } .wc-block-order-summary-item__total-price { font-weight: 600; color: var(--color-ink); font-size: 0.9375rem; } /* ── Checkout: Place Order button ────────────────────────────────────────── */ .wc-block-components-checkout-place-order-button, .wc-block-checkout__actions-row .wc-block-components-button { display: flex !important; align-items: center; justify-content: center; width: 100% !important; max-width: 100%; box-sizing: border-box; min-height: 52px; padding: var(--space-12) var(--space-16); background: var(--color-rose) !important; color: var(--color-white) !important; border: none !important; border-radius: 6px; font-family: var(--font-label); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; line-height: 1.3; text-align: center; transition: background 0.2s ease, transform 0.15s ease; margin-top: var(--space-16); } .wc-block-components-checkout-place-order-button:hover, .wc-block-checkout__actions-row .wc-block-components-button:hover { background: var(--color-rose-dark) !important; transform: translateY(-1px); } /* ── Checkout: payment methods ───────────────────────────────────────────── */ .wc-block-components-radio-control-accordion-content { background: var(--color-cream); border-radius: 6px; padding: var(--space-12) var(--space-16); font-size: 0.875rem; color: var(--color-ink-muted); } /* radio-control__option: border/color only, no layout override */ .wc-block-components-radio-control__option { border-bottom: 1px solid var(--color-cream-dark); font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-ink); } .wc-block-components-radio-control__option:last-child { border-bottom: none; } /* Checkbox in checkout (terms) */ .wc-block-components-checkbox input[type="checkbox"], .wc-block-components-checkout-terms-block input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-rose); cursor: pointer; } /* ── WC Block: notices ───────────────────────────────────────────────────── */ .wc-block-components-notice--error, .wc-block-store-notice--error { background: var(--color-rose-tint); border-left: 3px solid var(--color-rose); border-radius: 6px; padding: var(--space-12) var(--space-16); font-size: 0.875rem; color: var(--color-ink); margin-bottom: var(--space-16); } .wc-block-components-notice--success, .wc-block-store-notice--success { background: #eef7f2; border-left: 3px solid var(--color-success); border-radius: 6px; padding: var(--space-12) var(--space-16); font-size: 0.875rem; color: var(--color-ink); margin-bottom: var(--space-16); } /* ── Shipping methods ────────────────────────────────────────────────────── */ .wc-block-components-shipping-rates-control__package { background: var(--color-cream); border: 1px solid var(--color-cream-dark); border-radius: 8px; padding: var(--space-16); margin-bottom: var(--space-12); } .wc-block-components-shipping-rates-control__package-title { font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-10); } /* ── Express payment (Apple Pay / Google Pay) ────────────────────────────── */ .wc-block-components-express-payment { margin-bottom: var(--space-24); padding-bottom: var(--space-24); border-bottom: 1px solid var(--color-cream-dark); text-align: center; } .wc-block-components-express-payment__title { font-family: var(--font-label); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-subtle); margin-bottom: var(--space-12); } /* ── WC spinner/loading overlay ──────────────────────────────────────────── */ .wc-block-checkout__spinner, .wp-block-woocommerce-cart.is-loading::before, .wp-block-woocommerce-checkout.is-loading::before { border-color: var(--color-rose); } /* ── Ensure block containers never clip their children ───────────────────── */ .wp-block-woocommerce-cart-totals-block, .wp-block-woocommerce-checkout-totals-block, .wc-block-cart__sidebar, .wc-block-checkout__sidebar { overflow: visible; } /* ── Creative accent: gold shimmer on order total ────────────────────────── */ .wc-block-components-totals-footer-item { background: linear-gradient(135deg, var(--color-gold-tint) 0%, var(--color-cream) 100%); border-radius: 8px; padding: var(--space-12) var(--space-16) !important; margin-top: var(--space-12); border: 1px solid var(--color-gold-light); } /* ── Creative accent: trust badge strip (below checkout button) ──────────── */ .wc-block-checkout__actions-row { position: relative; } .wc-block-checkout__actions-row::after { content: '🔒 Secure checkout · SSL encrypted'; display: block; text-align: center; font-family: var(--font-label); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-subtle); margin-top: var(--space-10); } /* ── Creative accent: rose badge on filled cart submit area ──────────────── */ .wc-block-cart__submit-container { position: relative; } .wc-block-cart__submit-container::after { content: '\2736 Free shipping on orders above ₹999'; display: block; text-align: center; font-family: var(--font-label); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gold-dark); margin-top: var(--space-8); } /* Cart totals heading — keep on one line where possible */ .wc-block-cart__totals-title { font-size: 1.125rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wp-block-woocommerce-cart a, .wp-block-woocommerce-checkout a { color: var(--color-rose); text-decoration: none; } .wp-block-woocommerce-cart a:hover, .wp-block-woocommerce-checkout a:hover { text-decoration: underline; } /* ── WC block sidebar wrapper — prevent items from overflowing ───────────── */ .wc-block-cart__sidebar, .wc-block-checkout__sidebar { min-width: 0; box-sizing: border-box; } /* ── All block children inherit box-sizing ───────────────────────────────── */ .wp-block-woocommerce-cart *, .wp-block-woocommerce-checkout * { box-sizing: border-box; } /* Focus ring — WCAG */ .wp-block-woocommerce-cart *:focus-visible, .wp-block-woocommerce-checkout *:focus-visible { outline: 3px solid var(--color-rose); outline-offset: 2px; } .wp-block-woocommerce-cart .wc-block-components-sidebar-layout.wc-block-cart { padding: 0 4rem; gap: 20px; flex-wrap: unset; } .wp-block-woocommerce-checkout { max-width: 1320px; margin: 0 auto; } .wc-block-components-sidebar-layout { gap: 20px; flex-wrap: unset; } .wc-block-components-checkout-step #contact { display: block; } .wc-block-checkout__actions .wc-block-checkout__actions_row { width: 100%; } /* ============================================================================= ROUND 2 — Empty cart product grid, Checkout refinements, Spacing fixes ============================================================================= */ /* ── 1. WC block page padding (no large blank space below) ───────────────── */ .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { padding-bottom: var(--space-48); } .wc-block-cart__empty-cart__title { font-size: 1.4rem; } /* ── 2. EMPTY CART: replace default black sad-face icon ──────────────────── */ .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5485A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E") !important; background-color: transparent !important; width: 80px !important; height: 80px !important; margin: 0 auto var(--space-16) !important; opacity: 0.65; background-repeat: no-repeat; mask: unset; } /* Dots separator — subtle, don't hide entirely */ .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots { color: var(--color-ink-subtle) !important; border-color: transparent !important; margin: var(--space-16) auto !important; opacity: 0.5; } /* ── 3. "NEW IN STORE" product grid — themed tiles ────────────────────────── */ /* WC renders: .wc-block-grid > ul.wc-block-grid__products > li.wc-block-grid__product */ .wc-block-grid.wp-block-woocommerce-product-new { margin-top: 1rem; padding: 0 4rem; } .wc-block-grid.wp-block-woocommerce-product-new .wc-block-grid__product { max-width: 100%; } .wc-block-grid__products { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-16) !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } @media (min-width: 640px) { .wc-block-grid__products { grid-template-columns: repeat(3, 1fr) !important; } } @media (min-width: 1024px) { .wc-block-grid__products { grid-template-columns: repeat(4, 1fr) !important; } } /* Each product tile — width:100% overrides WC's flex-percentage */ .wc-block-grid__product { width: 100% !important; box-sizing: border-box !important; background: var(--color-white) !important; border: 1px solid var(--color-cream-dark) !important; border-radius: 10px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; position: relative; } .wc-block-grid__product:hover { box-shadow: 0 6px 24px rgba(28,26,24,.09) !important; transform: translateY(-2px) !important; } /* Product image wrapper */ .wc-block-grid__product-link { display: block !important; text-decoration: none !important; } .wc-block-grid__product-image { position: relative !important; width: 100% !important; height: 0 !important; padding-bottom: 100% !important; /* 1:1 ratio — more reliable than aspect-ratio across WC block CSS */ overflow: hidden !important; } .wc-block-grid__product-image img, .wc-block-grid__product-image a img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.45s ease !important; } .wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.05) !important; } /* Sale badge */ .wc-block-grid__product-onsale { background: var(--color-rose) !important; color: var(--color-white) !important; font-size: 0.5625rem !important; font-weight: 500 !important; letter-spacing: 0.1em !important; border-color: transparent !important; } /* Product info area */ .wc-block-grid__product-title a { font-family: var(--font-body) !important; font-size: 0.875rem !important; font-weight: 500 !important; color: var(--color-ink) !important; text-decoration: none !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; line-height: 1.4 !important; } .wc-block-grid__product-title a:hover { color: var(--color-rose) !important; } /* Price */ .wc-block-grid__product-price { font-size: 0.875rem !important; } .wc-block-grid__product-price .price { display: flex !important; gap: var(--space-6) !important; align-items: baseline !important; flex-wrap: wrap !important; } .wc-block-grid__product-price ins { color: var(--color-ink) !important; font-weight: 600 !important; text-decoration: none !important; } .wc-block-grid__product-price del { color: var(--color-ink-subtle) !important; font-size: 0.75rem !important; text-decoration: line-through !important; } /* ATC button */ .wc-block-grid__product-add-to-cart { padding: 0 var(--space-12) var(--space-12) !important; } .wc-block-grid__product .wc-block-grid__product-add-to-cart { margin: 0; } .wc-block-grid__product-add-to-cart a.button, .wc-block-grid__product-add-to-cart a.wp-block-button__link, .wc-block-grid__product-add-to-cart button { display: block !important; width: 100% !important; height: 38px !important; line-height: 38px !important; background: var(--color-ink) !important; color: var(--color-white) !important; border: none !important; border-radius: 5px !important; font-family: var(--font-label) !important; font-size: 0.6875rem !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; padding: 0 !important; transition: background 0.2s ease !important; box-sizing: border-box !important; } .wc-block-grid__product-add-to-cart a.button:hover, .wc-block-grid__product-add-to-cart a.wp-block-button__link:hover, .wc-block-grid__product-add-to-cart button:hover { background: var(--color-rose) !important; } /* ── 4. CHECKOUT — form field refinements ─────────────────────────────────── */ /* All inputs inside checkout block */ .wp-block-woocommerce-checkout input[type="text"], .wp-block-woocommerce-checkout input[type="email"], .wp-block-woocommerce-checkout input[type="tel"], .wp-block-woocommerce-checkout input[type="number"], .wp-block-woocommerce-checkout input[type="password"], .wp-block-woocommerce-checkout select, .wp-block-woocommerce-checkout textarea { font-family: var(--font-body) !important; color: var(--color-ink) !important; border-color: var(--color-cream-dark) !important; border-width: 1.5px !important; border-style: solid !important; border-radius: 8px !important; background: var(--color-white) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .wp-block-woocommerce-checkout input[type="text"]:focus, .wp-block-woocommerce-checkout input[type="email"]:focus, .wp-block-woocommerce-checkout input[type="tel"]:focus, .wp-block-woocommerce-checkout select:focus, .wp-block-woocommerce-checkout textarea:focus { border-color: var(--color-rose) !important; box-shadow: 0 0 0 3px rgba(181,72,90,.12) !important; outline: none !important; } /* Labels inside checkout block */ .wp-block-woocommerce-checkout label, .wc-block-components-checkout-step__description { font-family: var(--font-body) !important; color: var(--color-ink-muted) !important; font-size: 0.875rem !important; } /* Section step headings (Contact information / Shipping address etc.) */ .wc-block-components-checkout-step__title, .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper .wc-block-components-title { font-family: var(--font-display) !important; font-weight: 600 !important; color: var(--color-rose-dark) !important; margin-bottom: var(--space-16) !important; padding-bottom: var(--space-10) !important; border-bottom: 1px solid var(--color-cream-dark) !important; letter-spacing: 0 !important; } /* Step number badge */ .wc-block-components-checkout-step__heading-number { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: var(--color-rose) !important; color: var(--color-white) !important; font-family: var(--font-label) !important; font-size: 0.6875rem !important; font-weight: 600 !important; margin-right: var(--space-8) !important; flex-shrink: 0 !important; } /* Checkout step wrapper spacing */ .wc-block-components-checkout-step { margin-bottom: var(--space-24) !important; padding-bottom: var(--space-8) !important; } /* "You are currently checking out as a guest" info text */ .wc-block-components-checkout-step__description { background: var(--color-gold-tint) !important; border-left: 3px solid var(--color-gold) !important; border-radius: 0 6px 6px 0 !important; padding: var(--space-8) var(--space-12) !important; font-size: 0.8125rem !important; color: var(--color-ink-mid) !important; margin-bottom: var(--space-12) !important; } /* ── 5. CHECKOUT — Shipping method ───────────────────────────────────────── */ /* * WC block positions the radio input with position:absolute inside a * position:relative option wrapper, and uses padding-left on the label * to make room for it. We must NOT touch display/padding/position here — * only colors, borders, background. */ /* Outer accordion wrapper — cream card */ .wc-block-components-radio-control-accordion { background: var(--color-cream) !important; border: 1.5px solid var(--color-cream-dark) !important; border-radius: 8px !important; overflow: hidden !important; margin-top: var(--space-8) !important; } /* Each option row — only border, no layout changes */ .wc-block-components-radio-control-accordion-option { border-bottom: 1px solid var(--color-cream-dark) !important; } .wc-block-components-radio-control-accordion-option:last-child { border-bottom: none !important; } /* Radio input — colour only, no position/size override */ .wc-block-components-radio-control__input { accent-color: var(--color-rose) !important; cursor: pointer !important; } /* Label text — font/color only, no flex/layout override */ .wc-block-components-radio-control__label { font-family: var(--font-body) !important; font-size: 0.9375rem !important; color: var(--color-ink) !important; cursor: pointer !important; } /* "FREE" cost text */ .wc-block-components-radio-control__secondary-label span, .wc-block-components-radio-control__secondary-label { font-family: var(--font-label) !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; color: var(--color-success) !important; } /* ── 6. CHECKOUT — Payment options error notice ───────────────────────────── */ .wc-block-components-notice--error, .wc-block-store-notice.is-error, .wc-block-components-notice.is-error { background: #fff5f5 !important; border-left: 3px solid var(--color-error) !important; border-radius: 0 6px 6px 0 !important; padding: var(--space-12) var(--space-16) !important; font-family: var(--font-body) !important; font-size: 0.875rem !important; color: var(--color-ink) !important; margin: var(--space-8) 0 !important; } /* ── 7. CHECKOUT — Note + Terms ───────────────────────────────────────────── */ .wc-block-checkout__add-note, .wp-block-woocommerce-checkout-order-note-block { margin: var(--space-16) 0; } .wc-block-checkout__add-note .wc-block-components-checkbox, .wp-block-woocommerce-checkout-order-note-block .wc-block-components-checkbox { margin-bottom: var(--space-8); } .wc-block-checkout__add-note textarea { width: 100% !important; box-sizing: border-box !important; min-height: 80px !important; padding: var(--space-12) var(--space-16) !important; border: 1.5px solid var(--color-cream-dark) !important; border-radius: 8px !important; resize: vertical !important; font-family: var(--font-body) !important; font-size: 0.9375rem !important; color: var(--color-ink) !important; outline: none !important; } .wc-block-checkout__add-note textarea:focus { border-color: var(--color-rose) !important; box-shadow: 0 0 0 3px rgba(181,72,90,.12) !important; } /* Terms text */ .wc-block-checkout__terms { font-family: var(--font-body) !important; font-size: 0.8125rem !important; color: var(--color-ink-muted) !important; line-height: 1.6 !important; margin: var(--space-16) 0 !important; } .wc-block-checkout__terms a { color: var(--color-rose) !important; } /* ── 8. CHECKOUT — Actions row (Return to Cart | Place Order) ──────────────── */ .wc-block-checkout__actions, .wc-block-checkout__actions-row { display: flex !important; align-items: center !important; gap: var(--space-16) !important; margin-top: var(--space-24) !important; padding-top: var(--space-20) !important; border-top: 1px solid var(--color-cream-dark) !important; } /* "Return to Cart" link */ .wc-block-checkout__return-to-cart-link, a.wc-block-checkout__return-to-cart-link { font-family: var(--font-body) !important; font-size: 0.875rem !important; color: var(--color-ink-muted) !important; text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; transition: color 0.2s ease !important; } .wc-block-checkout__return-to-cart-link:hover, a.wc-block-checkout__return-to-cart-link:hover { color: var(--color-rose) !important; } /* Place Order button — fills remaining space */ .wc-block-components-checkout-place-order-button { flex: 1 !important; margin-top: 0 !important; min-height: 50px !important; max-width: 350px; } .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper .wc-block-components-totals-item.wc-block-components-totals-footer-item { max-width: calc(100% - 32px); margin: 0 auto; } /* ── 9. CHECKOUT — Right sidebar order summary refinements ─────────────────── */ .wp-block-woocommerce-checkout-order-summary-block h2, .wc-block-components-order-summary__button-text { font-family: var(--font-display) !important; font-size: 1.125rem !important; font-weight: 400 !important; color: var(--color-ink) !important; } /* Save badge in order summary */ .wc-block-order-summary-item__individual-prices ins { color: var(--color-rose) !important; font-weight: 600 !important; text-decoration: none !important; } .wc-block-order-summary-item__individual-prices del { color: var(--color-ink-subtle) !important; font-size: 0.8125rem !important; } /* Coupon section toggle */ .wc-block-components-totals-coupon__form-toggle, .wc-block-components-totals-coupon summary { font-family: var(--font-label) !important; font-size: 0.75rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--color-gold-dark) !important; cursor: pointer !important; } /* ── 10. CART — "You may be interested in" cross-sells ─────────────────────── */ .wp-block-woocommerce-filled-cart-block .wp-block-woocommerce-product-collection h2.wp-block-heading { font-family: var(--font-display) !important; font-size: 1.375rem !important; font-weight: 400 !important; color: var(--color-ink) !important; margin: var(--space-32) 0 var(--space-20) !important; padding-bottom: var(--space-10) !important; border-bottom: 1px solid var(--color-cream-dark) !important; } /* ── 11. CHECKOUT checkbox (same address / add note) ──────────────────────── */ .wc-block-components-checkbox { display: flex !important; align-items: center !important; gap: var(--space-10) !important; cursor: pointer !important; } .wc-block-components-checkbox input[type="checkbox"] { width: 18px !important; height: 18px !important; min-width: 18px !important; accent-color: var(--color-rose) !important; cursor: pointer !important; border-radius: 3px !important; } .wc-block-components-checkbox__label { font-family: var(--font-body) !important; font-size: 0.9375rem !important; color: var(--color-ink-mid) !important; cursor: pointer !important; } /* ── 12. Responsive — mobile cart & checkout ──────────────────────────────── */ @media (max-width: 767px) { .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { padding-left: var(--space-16); padding-right: var(--space-16); } .wp-block-woocommerce-checkout-fields-block, .wp-block-woocommerce-checkout-totals-block { padding: var(--space-20) !important; } .wc-block-checkout__actions, .wc-block-checkout__actions-row { flex-direction: column !important; gap: var(--space-12) !important; } .wc-block-components-checkout-place-order-button { width: 100% !important; } .wc-block-checkout__return-to-cart-link, a.wc-block-checkout__return-to-cart-link { order: 2 !important; } .wc-block-grid.wp-block-woocommerce-product-new { padding: 0; } .wp-block-woocommerce-cart .wc-block-components-sidebar-layout.wc-block-cart { padding: 0; } .wp-block-woocommerce-cart-items-block { padding: var(--space-16) !important; } .wp-block-woocommerce-cart-totals-block { padding: var(--space-16) !important; margin: 0; } .wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title { display: block !important; border: none; font-weight: bold !important; margin: 0; color: var(--color-rose-dark); } } @media (max-width: 479px) { .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-10) !important; } .wc-block-grid__product-title a { font-size: 0.8125rem !important; } .wc-block-grid__product-add-to-cart a.button, .wc-block-grid__product-add-to-cart button { font-size: 0.625rem !important; height: 34px !important; line-height: 34px !important; } } /* ── Forgot / Reset password — mobile ───────────────────────────────────── */ @media (max-width: 767px) { .pwd-form { padding: var(--space-32) var(--space-16) var(--space-40); } .pwd-form__icon { width: 60px; height: 60px; } }