/* ========================================================================== Loaloa: main stylesheet (mobile-first, RTL/LTR via logical properties) 1. Fonts 2. Tokens 3. Base 4. Type 5. Layout 6. Controls 7. Header 8. Drawers & overlays 9. Home 10. Shop 11. Product 12. Cart/Checkout/Account 13. Pages 14. Footer 15. Motion 16. Utilities ========================================================================== */ /* 1. Fonts (self-hosted, swap) ------------------------------------------- */ @font-face { font-family: "Messiri"; src: url(../fonts/el-messiri-arabic.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Messiri"; src: url(../fonts/el-messiri-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plex Arabic"; src: url(../fonts/plex-arabic-arabic-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Plex Arabic"; src: url(../fonts/plex-arabic-arabic-600.woff2) format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Plex Arabic"; src: url(../fonts/plex-arabic-latin-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plex Arabic"; src: url(../fonts/plex-arabic-latin-600.woff2) format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant"; src: url(../fonts/cormorant-latin.woff2) format("woff2"); font-weight: 300 700; font-display: swap; } @font-face { font-family: "Cormorant"; src: url(../fonts/cormorant-latin-italic.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; } @font-face { font-family: "Jost"; src: url(../fonts/jost-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; } /* 2. Design tokens -------------------------------------------------------- Colours can be changed in Customizer → Loaloa Theme → Brand & Design System. ------------------------------------------------------------------------- */ :root { /* Colour */ --c-bg: #F7F2EA; --c-surface: #FFFDF9; --c-sand: #EEE5D7; --c-taupe: #D6C7B6; --c-ink: #1B1815; --c-muted: #6F665C; --c-gold: #C8902E; --c-gold-deep: #8E6418; --c-gold-light: #F3D27A; --c-ivory: #F6F0E6; --c-sale: #8E2F25; --c-success: #2F6B4F; --c-line: color-mix(in srgb, var(--c-ink) 12%, transparent); --c-line-strong: color-mix(in srgb, var(--c-ink) 24%, transparent); --g-gold: linear-gradient(135deg, #B9802A 0%, #F6DC8A 48%, #E3A93D 100%); /* Type */ --f-body-ar: "Plex Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; --f-display-ar: "Messiri", "Plex Arabic", serif; --f-body-en: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; --f-display-en: "Cormorant", "Times New Roman", serif; --display-scale-en: 1.14; --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); --fs-xl: clamp(1.55rem, 1.25rem + 1.3vw, 2.25rem); --fs-2xl: clamp(1.9rem, 1.4rem + 2.4vw, 3.25rem); --fs-3xl: clamp(2.3rem, 1.6rem + 3.6vw, 4.5rem); /* Space & shape */ --gutter: 16px; --container: 1320px; --section: clamp(56px, 7vw, 112px); --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-card: 4px; --r-btn: 999px; --shadow-1: 0 1px 2px rgb(27 24 21 / .06), 0 8px 24px -12px rgb(27 24 21 / .18); --shadow-2: 0 24px 60px -24px rgb(27 24 21 / .35); /* Motion */ --ease: cubic-bezier(.22, .68, .16, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur: .35s; --header-h: 64px; } @media (min-width: 768px) { :root { --gutter: 24px; } } @media (min-width: 1024px) { :root { --gutter: 40px; --header-h: 84px; } } body { --f-body: var(--f-body-ar); --f-display: var(--f-display-ar); --display-scale: 1; --lh: 1.85; --track: 0; } body.lang-en { --f-body: var(--f-body-en); --f-display: var(--f-display-en); --display-scale: var(--display-scale-en); --lh: 1.65; --track: .16em; } /* 3. Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--f-body); font-size: var(--fs-base); line-height: var(--lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } body.is-locked { overflow: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } a:hover { color: var(--c-gold-deep); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--c-gold-light); color: var(--c-ink); } hr { border: 0; border-top: 1px solid var(--c-line); margin: 32px 0; } table { border-collapse: collapse; width: 100%; } [hidden] { display: none !important; } /* 4. Type ---------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 500; line-height: 1.25; margin: 0 0 .5em; letter-spacing: 0; text-wrap: balance; } .lang-en h1, .lang-en h2, .lang-en h3 { font-weight: 500; line-height: 1.1; } p { margin: 0 0 1em; text-wrap: pretty; } .eyebrow { margin: 0 0 12px; font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--track); color: var(--c-gold-deep); } .lang-en .eyebrow { text-transform: uppercase; font-size: var(--fs-xs); } .section-title { font-size: calc(var(--fs-2xl) * var(--display-scale)); margin-bottom: 12px; } .section-sub { color: var(--c-muted); max-width: 52ch; margin-inline: auto; } .prose { font-size: var(--fs-base); } .prose > * + * { margin-top: 1em; } .prose h2 { font-size: calc(var(--fs-xl) * var(--display-scale)); margin-top: 1.6em; } .prose h3 { font-size: calc(var(--fs-lg) * var(--display-scale)); margin-top: 1.4em; } .prose ul, .prose ol { padding-inline-start: 1.25em; } .prose li { margin-bottom: .4em; } .prose li::marker { color: var(--c-gold); } .prose a { text-decoration: underline; text-decoration-color: var(--c-gold); text-underline-offset: 4px; } .prose img { border-radius: var(--r-md); } .prose figure { margin: 2em 0; } .container.prose--page { max-width: 808px; margin-inline: auto; padding-bottom: var(--section); } .prose details { border-bottom: 1px solid var(--c-line); padding: 4px 0; } .prose details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 600; font-size: var(--fs-md); } .prose details > summary::-webkit-details-marker { display: none; } .prose details > summary::after { content: "+"; font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--c-gold-deep); transition: transform var(--dur) var(--ease); } .prose details[open] > summary::after { transform: rotate(45deg); } .prose details > p { color: var(--c-muted); padding-bottom: 12px; margin: 0; } .prose .wp-block-heading:first-child { margin-top: 0; } /* 5. Layout -------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } .section--sand { background: var(--c-sand); } .section-head { margin-bottom: clamp(28px, 4vw, 48px); } .section-head--center { text-align: center; } .section-head .link-arrow { margin-top: 12px; } .site-main { min-height: 50vh; } /* 6. Controls ------------------------------------------------------------ */ .icon { width: 22px; height: 22px; flex: none; } [dir="rtl"] .icon-dir { transform: scaleX(-1); } .btn, .button, button.button, .wc-flow .button, .woocommerce-button, .single_add_to_cart_button, .checkout-button, #place_order { --btn-bg: var(--c-ink); --btn-fg: var(--c-ivory); --btn-hover-bg: var(--c-ivory); --btn-hover-fg: var(--c-ink); --btn-hover-border: var(--c-gold); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border: 1px solid var(--btn-bg); border-radius: var(--r-btn); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: calc(var(--track) / 4); line-height: 1.2; text-align: center; cursor: pointer; transition: color .4s var(--ease), border-color .4s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); -webkit-tap-highlight-color: transparent; } .btn::before, .single_add_to_cart_button::before, .checkout-button::before, #place_order::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--btn-hover-bg); clip-path: circle(0% at 50% 50%); transition: clip-path .55s var(--ease); } .btn:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover { color: var(--btn-hover-fg); border-color: var(--btn-hover-border); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgb(27 24 21 / .45), inset 0 0 0 1px var(--btn-hover-border); } .btn:hover::before, .single_add_to_cart_button:hover::before, .checkout-button:hover::before, #place_order:hover::before { clip-path: circle(75% at 50% 50%); } .btn:active, .button:active { transform: scale(.98); } .btn .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); } .btn:hover .icon-dir { transform: translateX(4px); } [dir="rtl"] .btn:hover .icon-dir { transform: scaleX(-1) translateX(4px); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-hover-bg: var(--c-ink); --btn-hover-fg: var(--c-ivory); --btn-hover-border: var(--c-ink); border-color: var(--c-ink); } .btn--light { --btn-bg: var(--c-ivory); --btn-fg: var(--c-ink); --btn-hover-bg: var(--c-ink); --btn-hover-fg: var(--c-ivory); --btn-hover-border: var(--c-gold-light); } .btn--block { width: 100%; } .btn[disabled], .button.disabled, .button:disabled { opacity: .5; pointer-events: none; } .btn.is-loading, .single_add_to_cart_button.is-loading { color: transparent !important; pointer-events: none; } .btn.is-loading::after, .single_add_to_cart_button.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2px solid var(--c-ivory); border-inline-end-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } .icon-btn { display: inline-grid; place-items: center; position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; transition: background var(--dur) var(--ease); } .icon-btn:hover { background: color-mix(in srgb, var(--c-ink) 6%, transparent); color: inherit; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-sm); letter-spacing: calc(var(--track) / 3); border-bottom: 1px solid currentColor; padding-bottom: 2px; } .link-arrow .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); } .link-arrow:hover .icon-dir { transform: translateX(4px); } [dir="rtl"] .link-arrow:hover .icon-dir { transform: scaleX(-1) translateX(4px); } .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--c-line-strong); border-radius: 999px; font-size: var(--fs-sm); white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .chip:hover { border-color: var(--c-ink); color: var(--c-ink); } .chip.is-active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ivory); } .chips--light .chip { border-color: rgb(255 255 255 / .45); color: #fff; backdrop-filter: blur(6px); background: rgb(255 255 255 / .08); } .chips--light .chip:hover { background: #fff; color: var(--c-ink); } @media (min-width: 768px) { .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } } input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], select, textarea, .input-text { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); appearance: none; } textarea { min-height: 120px; resize: vertical; } select { padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1815' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: right 14px center; } [dir="rtl"] select { background-position: left 14px center; } input:focus, select:focus, textarea:focus, .input-text:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 22%, transparent); } ::placeholder { color: color-mix(in srgb, var(--c-muted) 80%, transparent); } label { font-size: var(--fs-sm); font-weight: 500; } .field { display: grid; gap: 6px; margin: 0 0 16px; } .field-row { display: grid; gap: 0 16px; } @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } } .hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-msg { min-height: 1.5em; margin: 10px 0 0; font-size: var(--fs-sm); } .form-msg.is-ok, .form-notice.is-ok { color: var(--c-success); } .form-msg.is-error, .form-notice.is-error { color: var(--c-sale); } .form-notice { font-weight: 600; } .badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--c-surface); color: var(--c-ink); font-size: var(--fs-xs); font-weight: 600; letter-spacing: calc(var(--track) / 3); box-shadow: var(--shadow-1); } .badge--sale { background: var(--c-ink); color: var(--c-gold-light); } .badge--muted { background: color-mix(in srgb, var(--c-surface) 85%, transparent); color: var(--c-muted); } .badges { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; pointer-events: none; } /* 7. Header -------------------------------------------------------------- */ .skip-link { position: absolute; inset-inline-start: 12px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--c-ink); color: var(--c-ivory); border-radius: var(--r-sm); } .skip-link:focus { top: 12px; color: var(--c-ivory); } .announce { background: var(--c-ink); color: var(--c-ivory); font-size: var(--fs-xs); height: 36px; overflow: hidden; display: flex; align-items: center; } .announce__track { display: flex; width: max-content; animation: marquee 38s linear infinite; } [dir="rtl"] .announce__track { animation-name: marquee-rtl; } .announce:hover .announce__track { animation-play-state: paused; } .announce__group { display: flex; align-items: center; gap: 28px; padding-inline-end: 28px; white-space: nowrap; letter-spacing: calc(var(--track) / 2); } .announce__group i { font-style: normal; color: var(--c-gold); font-size: .6rem; } .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: transform .45s var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); view-transition-name: site-header; } .site-header.is-scrolled { border-color: var(--c-line); } .site-header.is-hidden { transform: translateY(-100%); } .admin-bar .site-header { top: 46px; } @media (min-width: 783px) { .admin-bar .site-header { top: 32px; } } .header-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); } .header-side { display: flex; align-items: center; gap: 2px; } .header-side--end { justify-content: flex-end; } .brand { display: inline-flex; align-items: center; justify-content: center; } .brand .logo-img { height: 44px; width: auto; } @media (min-width: 1024px) { .brand .logo-img { height: 60px; } } .cart-btn { position: relative; } .cart-count { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-ink); color: var(--c-ivory); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; transition: transform .4s var(--ease); } .cart-count.is-empty { transform: scale(0); } .cart-count.is-bump { animation: bump .5s var(--ease); } .lang-switch { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font-size: var(--fs-sm); font-weight: 600; } .lang-switch__short { display: none; } .lang-switch:hover { color: var(--c-gold-deep); } .lang-switch[hreflang="ar"] { font-family: var(--f-body-ar); } .lang-switch[hreflang="en"] { font-family: var(--f-body-en); letter-spacing: .04em; } .primary-nav { border-top: 1px solid var(--c-line); } .menu { list-style: none; margin: 0; padding: 0; } .menu--primary { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 30px; } .menu--primary > li { position: relative; } .menu--primary > li > a { position: relative; display: inline-flex; align-items: center; height: 50px; font-size: var(--fs-sm); font-weight: 500; letter-spacing: calc(var(--track) / 3); } .menu--primary > li > a::after { content: ""; position: absolute; inset-inline: 0; bottom: 12px; height: 1px; background: var(--c-gold); transform: scaleX(0); transition: transform .45s var(--ease); } .menu--primary > li:hover > a::after, .menu--primary > li.current-menu-item > a::after, .menu--primary > li.current-menu-ancestor > a::after { transform: scaleX(1); } .menu--primary > .menu-item-has-children > a { padding-inline-end: 16px; } .menu--primary > .menu-item-has-children > a::before { content: ""; position: absolute; inset-inline-end: 0; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); } .menu--primary .sub-menu { position: absolute; top: 100%; left: 50%; z-index: 10; min-width: 220px; margin: 0; padding: 10px; list-style: none; background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; translate: -50% 8px; transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), visibility var(--dur); } .menu--primary li:hover > .sub-menu, .menu--primary li:focus-within > .sub-menu { opacity: 1; visibility: visible; translate: -50% 0; } .menu--primary .sub-menu a { display: block; padding: 10px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); } .menu--primary .sub-menu a:hover { background: var(--c-bg); } /* 8. Drawers, search, toast ---------------------------------------------- */ .backdrop { position: fixed; inset: 0; z-index: 60; background: rgb(17 14 11 / .45); backdrop-filter: blur(2px); opacity: 0; transition: opacity .4s var(--ease); } .backdrop.is-visible { opacity: 1; } .drawer { position: fixed; top: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; width: min(90vw, 420px); background: var(--c-surface); box-shadow: var(--shadow-2); transition: transform .5s var(--ease), visibility .5s; visibility: hidden; } .drawer--start { inset-inline-start: 0; transform: translateX(-100%); } .drawer--end { inset-inline-end: 0; transform: translateX(100%); } [dir="rtl"] .drawer--start { transform: translateX(100%); } [dir="rtl"] .drawer--end { transform: translateX(-100%); } .drawer.is-open { transform: none; visibility: visible; } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--c-line); } [dir="rtl"] .drawer__head { padding: 12px 20px 12px 12px; } .drawer__head .logo-img { height: 40px; width: auto; } .drawer__title { margin: 0; font-size: var(--fs-lg); } .drawer__body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; overscroll-behavior: contain; } .drawer__foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); display: grid; gap: 10px; } .drawer__link { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; } .drawer__link .icon { width: 20px; height: 20px; } .menu--drawer > li { border-bottom: 1px solid var(--c-line); } .menu--drawer li { position: relative; } .menu--drawer > li > a { display: flex; align-items: center; min-height: 58px; font-family: var(--f-display); font-size: calc(var(--fs-lg) * var(--display-scale)); } .menu--drawer .sub-menu { list-style: none; margin: 0 0 12px; padding: 0 0 0 12px; display: grid; } .menu--drawer .sub-menu a { display: block; padding: 8px 0; color: var(--c-muted); } .js .menu--drawer .sub-menu { display: none; } .js .menu--drawer .is-open > .sub-menu { display: grid; animation: fade-up .4s var(--ease); } .submenu-toggle { position: absolute; inset-inline-end: -10px; top: 7px; } .submenu-toggle .icon { transition: transform var(--dur) var(--ease); } .is-open > .submenu-toggle .icon { transform: rotate(180deg); } .drawer .social { justify-content: flex-start; } .search-panel { position: fixed; inset-inline: 0; top: 0; z-index: 70; max-height: 100svh; overflow-y: auto; padding-block: 16px 28px; background: var(--c-surface); box-shadow: var(--shadow-2); transform: translateY(-105%); visibility: hidden; transition: transform .5s var(--ease), visibility .5s; } .search-panel.is-open { transform: none; visibility: visible; } .search-form { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--c-ink); } .search-form > .icon { color: var(--c-muted); } .search-form input[type="search"] { border: 0; background: transparent; min-height: 60px; font-size: var(--fs-lg); padding-inline: 4px; box-shadow: none; } .search-form--inline { border: 1px solid var(--c-line-strong); border-radius: var(--r-btn); padding-inline-start: 16px; max-width: 520px; margin: 24px auto 0; } .search-form--inline input[type="search"] { min-height: 48px; font-size: var(--fs-base); } .search-results { display: grid; gap: 4px; margin-top: 16px; } .search-results:empty { display: none; } .sr-item { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 8px; border-radius: var(--r-md); } .sr-item:hover { background: var(--c-bg); color: inherit; } .sr-item img { width: 56px; height: 70px; object-fit: cover; border-radius: var(--r-sm); } .sr-item__name { font-weight: 500; } .sr-item__price { font-size: var(--fs-sm); font-weight: 600; display: flex; flex-wrap: wrap; gap: 0 6px; justify-content: flex-end; } .sr-item__price del { color: var(--c-muted); font-weight: 400; } .sr-item__price ins { text-decoration: none; color: var(--c-sale); } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .sr-all { justify-self: center; margin-top: 8px; } .search-popular { margin-top: 24px; } .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 90; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 22px; border-radius: 999px; background: var(--c-ink); color: var(--c-ivory); font-size: var(--fs-sm); box-shadow: var(--shadow-2); translate: -50% 20px; opacity: 0; transition: opacity .4s var(--ease), translate .4s var(--ease); } .toast.is-visible { opacity: 1; translate: -50% 0; } .toast .icon { color: var(--c-gold-light); width: 18px; height: 18px; } /* Mini cart */ .minicart__items { display: grid; align-content: start; gap: 0; } .minicart__empty { padding: 48px 0; text-align: center; color: var(--c-muted); } .mc-item { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-line); animation: fade-up .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); } .mc-item img { width: 76px; height: 95px; object-fit: cover; border-radius: var(--r-sm); background: var(--c-sand); } .mc-item__name { font-weight: 500; line-height: 1.4; margin: 0 0 2px; } .mc-item__meta { font-size: var(--fs-xs); color: var(--c-muted); margin: 0 0 8px; } .mc-item__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mc-item__price { font-weight: 600; font-size: var(--fs-sm); } .mc-qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line-strong); border-radius: 999px; height: 36px; } .mc-qty button { width: 34px; height: 34px; border: 0; background: none; display: grid; place-items: center; } .mc-qty button .icon { width: 16px; height: 16px; } .mc-qty span { min-width: 22px; text-align: center; font-size: var(--fs-sm); font-weight: 600; } .mc-remove { border: 0; background: none; color: var(--c-muted); font-size: var(--fs-xs); text-decoration: underline; padding: 4px; } .minicart__total { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-md); } .minicart__note { font-size: var(--fs-xs); color: var(--c-muted); margin: 0; } .minicart.is-busy .minicart__items { opacity: .5; pointer-events: none; } .freeship { padding: 12px 20px; background: var(--c-sand); font-size: var(--fs-sm); } .freeship p { margin: 0 0 8px; } .freeship__bar { display: block; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--c-ink) 10%, transparent); overflow: hidden; } .freeship__bar span { display: block; height: 100%; width: var(--p, 0%); background: var(--g-gold); border-radius: inherit; transition: width .8s var(--ease); } .wc-flow .freeship { border-radius: var(--r-md); margin-bottom: 20px; } /* 9. Home ---------------------------------------------------------------- */ /* Hero */ .hero { position: relative; background: var(--c-ink); color: #fff; overflow: hidden; } .hero__slides { display: grid; } .hero__slide { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease-in-out), visibility 1.1s; } .hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .hero__slide:not(.is-active) .hero__content { opacity: 0; transition: opacity .3s ease; } .hero__media { position: relative; aspect-ratio: 4 / 5; max-height: calc(100svh - 100px); width: 100%; overflow: hidden; background: var(--c-sand); } .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 7s cubic-bezier(.2, .6, .2, 1); } .hero__slide.is-active .hero__media img { transform: scale(1); } .hero__content { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: 120px var(--gutter) 84px; background: linear-gradient(to top, rgb(17 14 11 / .82) 0%, rgb(17 14 11 / .5) 50%, rgb(17 14 11 / 0) 100%); } .hero__eyebrow { color: var(--c-gold-light); } .hero__title { font-size: calc(var(--fs-3xl) * var(--display-scale)); line-height: 1.12; margin-bottom: 14px; overflow: hidden; padding-bottom: .08em; } .hero__title span { display: inline-block; } .hero__text { max-width: 44ch; margin-bottom: 24px; color: rgb(255 255 255 / .86); font-size: var(--fs-md); } .hero .btn--primary { --btn-bg: var(--c-ivory); --btn-fg: var(--c-ink); --btn-hover-bg: var(--c-ink); --btn-hover-fg: var(--c-ivory); --btn-hover-border: var(--c-gold-light); } .has-motion.js .hero__eyebrow, .has-motion.js .hero__title span, .has-motion.js .hero__text, .has-motion.js .hero__btn { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1s var(--ease); } .has-motion.js .hero__title span { transform: translateY(105%); opacity: 1; transition-duration: 1.1s; } .has-motion.js .hero__slide.is-active .hero__eyebrow { opacity: 1; transform: none; transition-delay: .25s; } .has-motion.js .hero__slide.is-active .hero__title span { transform: none; transition-delay: .35s; } .has-motion.js .hero__slide.is-active .hero__text { opacity: 1; transform: none; transition-delay: .55s; } .has-motion.js .hero__slide.is-active .hero__btn { opacity: 1; transform: none; transition-delay: .7s; } .hero__nav { position: absolute; z-index: 3; bottom: 24px; inset-inline: var(--gutter); display: flex; align-items: center; justify-content: center; gap: 12px; } .hero__arrow { display: none; } .hero__dots { display: flex; gap: 8px; } .hero__dot { position: relative; width: 44px; height: 24px; padding: 0; border: 0; background: none; } .hero__dot::before, .hero__dot span { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; } .hero__dot::before { background: rgb(255 255 255 / .35); } .hero__dot span { background: #fff; transform: scaleX(0); transform-origin: left; } [dir="rtl"] .hero__dot span { transform-origin: right; } .hero__dot.is-active span { transform: scaleX(1); } .hero.is-playing .hero__dot.is-active span { animation: progress var(--hero-dur, 6s) linear forwards; } .hero.is-paused .hero__dot.is-active span { animation-play-state: paused; } @media (min-width: 1024px) { .hero { background: var(--c-sand); color: var(--c-ink); } .hero__slide { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: min(calc(100svh - 170px), 820px); } .hero__media { order: 2; aspect-ratio: auto; max-height: none; height: 100%; } .hero__content { position: relative; inset: auto; display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(40px, 6vw, 112px); background: none; } .hero__eyebrow { color: var(--c-gold-deep); } .hero__text { color: var(--c-muted); } .hero .btn--primary { --btn-bg: var(--c-ink); --btn-fg: var(--c-ivory); --btn-hover-bg: var(--c-ivory); --btn-hover-fg: var(--c-ink); --btn-hover-border: var(--c-gold); align-self: flex-start; } .hero__nav { bottom: 40px; inset-inline: clamp(40px, 6vw, 112px) auto; justify-content: flex-start; } .hero__arrow { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--c-line-strong); border-radius: 50%; background: transparent; color: var(--c-ink); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .hero__arrow:hover { background: var(--c-ink); color: var(--c-ivory); } .hero__arrow .icon { width: 18px; height: 18px; } .hero__dot::before { background: var(--c-line-strong); } .hero__dot span { background: var(--c-ink); } } /* Image frames (Customizer → Image frame shape) */ .frame { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--c-sand); isolation: isolate; } .frame img { width: 100%; height: 100%; object-fit: cover; } .shape-arch .frame { border-radius: 50% 50% var(--r-sm) var(--r-sm) / 40% 40% var(--r-sm) var(--r-sm); } .shape-rounded .frame { border-radius: var(--r-lg); } .shape-square .frame { border-radius: 0; } /* Categories */ .rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); list-style: none; margin: 0; padding-block: 0 8px; } .rail::-webkit-scrollbar { display: none; } .cats__list .cat { flex: 0 0 40%; scroll-snap-align: start; } .cat a { display: grid; gap: 12px; text-align: center; } .cat a:hover { color: inherit; } .cat__frame img { transition: transform 1.2s var(--ease); } .cat a:hover .cat__frame img { transform: scale(1.06); } .cat__name { font-family: var(--f-display); font-size: calc(var(--fs-md) * var(--display-scale)); font-weight: 500; } @media (min-width: 640px) { .cats__list .cat { flex-basis: 28%; } } @media (min-width: 1024px) { .cats__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 28px; max-width: var(--container); margin-inline: auto; overflow: visible; } } /* Product grid & cards */ .products { list-style: none; margin: 0; padding: 0; } .product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; } @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; } } @media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; } } @media (max-width: 1023px) { .product-grid--rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } .product-grid--rail::-webkit-scrollbar { display: none; } .product-grid--rail > .card { flex: 0 0 46%; scroll-snap-align: start; } } @media (min-width: 640px) and (max-width: 1023px) { .product-grid--rail > .card { flex-basis: 31%; } } @media (min-width: 1024px) { .product-grid--rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .card { position: relative; container-type: inline-size; } /* Neutralise woocommerce-layout.css (loaded on cart/checkout/account) for theme grids. */ .woocommerce ul.products.product-grid, .woocommerce-page ul.products.product-grid { margin: 0; } .woocommerce ul.products.product-grid::before, .woocommerce ul.products.product-grid::after, .woocommerce-page ul.products.product-grid::before, .woocommerce-page ul.products.product-grid::after { display: none; } .woocommerce ul.products.product-grid li.product, .woocommerce-page ul.products.product-grid li.product { float: none; width: auto; margin: 0; clear: none; padding: 0; } .woocommerce ul.products.product-grid li.product a img, .woocommerce-page ul.products.product-grid li.product a img { width: 100%; height: 100%; margin: 0; box-shadow: none; } .card__media { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-card); background: var(--c-sand); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .card:hover .card__media img { transform: scale(1.05); } .card__add { position: absolute; z-index: 3; top: calc(125cqw - 52px); inset-inline-end: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 999px; background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-1); font-size: var(--fs-sm); font-weight: 600; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .card__add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .card__add .icon { width: 20px; height: 20px; } .card__add .icon-done { display: none; } .card__add.is-done { background: var(--c-ink); color: var(--c-gold-light); } .card__add.is-done .icon-done { display: block; } .card__add.is-done .icon-plus { display: none; } .card__add.is-loading .icon { animation: spin .8s linear infinite; } .card__add:hover { background: var(--c-ink); color: var(--c-ivory); } @media (hover: hover) and (min-width: 1024px) { .card__add { inset-inline: 12px; width: auto; height: 46px; top: calc(125cqw - 58px); opacity: 0; transform: translateY(10px); } .card__add span { position: static; width: auto; height: auto; clip-path: none; } .card:hover .card__add, .card__add:focus-visible, .card__add.is-done, .card__add.is-loading { opacity: 1; transform: none; } } .card__body { padding-top: 12px; } .card__cat { margin: 0 0 2px; font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: calc(var(--track) / 2); } .lang-en .card__cat { text-transform: uppercase; } .card__title { margin: 0 0 4px; font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 500; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 768px) { .card__title { font-size: var(--fs-base); } } .price { font-weight: 600; font-size: var(--fs-sm); display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } @media (min-width: 768px) { .card .price { font-size: var(--fs-base); } } .price del { color: var(--c-muted); font-weight: 400; font-size: .9em; } .price ins { text-decoration: none; color: var(--c-sale); } .woocommerce-Price-currencySymbol { font-size: .82em; font-weight: 500; } /* Story */ .story__grid { display: grid; gap: 40px; align-items: center; } .story__media { position: relative; max-width: 520px; width: 100%; margin-inline: auto; } .story__frame { aspect-ratio: 4 / 5; } .story__mark { position: absolute; bottom: -24px; inset-inline-end: -8px; width: 96px; height: 96px; border-radius: 50%; box-shadow: var(--shadow-2); animation: float 6s ease-in-out infinite; } .story__text { color: var(--c-muted); font-size: var(--fs-md); max-width: 56ch; margin-bottom: 28px; } @media (min-width: 1024px) { .story__grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 120px); } .story__mark { width: 120px; height: 120px; inset-inline-end: -40px; bottom: 48px; } } /* Winter */ .winter { padding-top: 0; } .winter__banner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; min-height: min(86svh, 680px); color: #fff; overflow: hidden; background: var(--c-ink); } .winter__media { position: absolute; inset: 0; } .winter__media img { width: 100%; height: 100%; object-fit: cover; } .winter__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(17 14 11 / .85) 0%, rgb(17 14 11 / .35) 55%, rgb(17 14 11 / .1) 100%); } .winter__content { position: relative; z-index: 1; padding-block: 64px 48px; } .winter__content .eyebrow { color: var(--c-gold-light); } .winter__title { font-size: calc(var(--fs-3xl) * var(--display-scale)); max-width: 14ch; } .winter__text { color: rgb(255 255 255 / .85); max-width: 46ch; font-size: var(--fs-md); } .winter__content .chips { margin-block: 20px 28px; } .winter__products { padding-top: clamp(32px, 5vw, 64px); } @media (min-width: 1024px) { .winter__banner { align-items: center; } .winter__media::after { background: linear-gradient(to left, rgb(17 14 11 / 0) 20%, rgb(17 14 11 / .78) 100%); } [dir="rtl"] .winter__media::after { background: linear-gradient(to right, rgb(17 14 11 / 0) 20%, rgb(17 14 11 / .78) 100%); } .winter__content > * { max-width: 560px; } } @supports (animation-timeline: view()) { .has-motion .winter__media img { animation: parallax linear both; animation-timeline: view(); animation-range: cover; } } /* Fragrance */ .fragrance { background: var(--c-ink); color: var(--c-ivory); } .fragrance .eyebrow { color: var(--c-gold-light); } .fragrance__grid { display: grid; gap: 40px; align-items: center; } .fragrance__media .frame { max-width: 520px; margin-inline: auto; background: #2a241f; } .fragrance__text { color: rgb(246 240 230 / .75); max-width: 50ch; font-size: var(--fs-md); } .fragrance .product-grid { margin-block: 28px 32px; gap: 24px 12px; } .fragrance .card__cat, .fragrance .price del { color: rgb(246 240 230 / .6); } .fragrance .card__title a:hover { color: var(--c-gold-light); } .fragrance .price ins { color: var(--c-gold-light); } .fragrance .card__media { background: #2a241f; } .product-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } @media (min-width: 1024px) { .fragrance__grid { grid-template-columns: 1fr 1.1fr; gap: clamp(48px, 7vw, 110px); } } /* Values */ .values { padding-block: clamp(40px, 5vw, 72px); border-block: 1px solid var(--c-line); } .values__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } .value { text-align: center; } .value__icon { width: 34px; height: 34px; margin: 0 auto 12px; color: var(--c-gold-deep); stroke-width: 1.2; } .value__title { font-family: var(--f-body); font-size: var(--fs-base); font-weight: 600; margin-bottom: 4px; } .value__text { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; max-width: 28ch; margin-inline: auto; } @media (min-width: 1024px) { .values__list { grid-template-columns: repeat(4, 1fr); } } .has-motion.js .value__icon { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1.6s var(--ease) .2s; } .has-motion.js .value.is-in .value__icon { stroke-dashoffset: 0; } /* Lookbook */ .lookbook__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .look a { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-card); } .look img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .look__name { position: absolute; inset-inline: 0; bottom: 0; padding: 40px 14px 12px; color: #fff; font-size: var(--fs-sm); font-weight: 500; background: linear-gradient(to top, rgb(17 14 11 / .7), transparent); } .look a:hover img { transform: scale(1.06); } @media (min-width: 768px) { .lookbook__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (hover: hover) and (min-width: 1024px) { .look__name { opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .look a:hover .look__name { opacity: 1; transform: none; } .look:nth-child(3n+2) { transform: translateY(40px); } .lookbook__grid { padding-bottom: 40px; } } /* Newsletter */ .newsletter__card { position: relative; max-width: 760px; margin-inline: auto; padding: 48px 20px; text-align: center; background: var(--c-sand); border-radius: 200px 200px var(--r-lg) var(--r-lg); } .shape-rounded .newsletter__card { border-radius: var(--r-lg); } .shape-square .newsletter__card { border-radius: 0; } .newsletter__mark { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; } .newsletter__form { display: grid; gap: 10px; max-width: 480px; margin: 24px auto 0; } @media (min-width: 640px) { .newsletter__card { padding: 72px 48px 56px; } .newsletter__form { grid-template-columns: 1fr auto; } .newsletter__form .form-msg { grid-column: 1 / -1; } } .newsletter__form input[type="email"] { border-radius: var(--r-btn); text-align: start; } /* 10. Shop --------------------------------------------------------------- */ .archive-hero, .page-hero { padding-block: clamp(28px, 5vw, 64px) clamp(20px, 3vw, 40px); text-align: center; } .archive-hero__title, .page-hero__title { font-size: calc(var(--fs-2xl) * var(--display-scale)); margin-bottom: 8px; } .archive-hero__desc, .page-hero__sub { color: var(--c-muted); max-width: 56ch; margin: 0 auto; } .breadcrumb { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 14px; padding-block: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; } .breadcrumb .sep { opacity: .5; } .single-product .breadcrumb { justify-content: flex-start; padding-block: 16px 0; } .shop-body { padding-bottom: var(--section); } .shop-body > .chips { margin-bottom: 24px; justify-content: center; } .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; margin-bottom: 24px; border-block: 1px solid var(--c-line); } .woocommerce-result-count { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); } .woocommerce-ordering { margin: 0; } .woocommerce-ordering select { min-height: 40px; width: auto; max-width: 56vw; border-radius: 999px; font-size: var(--fs-sm); padding-block: 6px; } .woocommerce-pagination { margin-top: 48px; } .woocommerce-pagination ul, .nav-links { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; } .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--c-line); font-size: var(--fs-sm); } .page-numbers.current { background: var(--c-ink); color: var(--c-ivory); border-color: var(--c-ink); } .empty-state { padding: 64px 0; text-align: center; color: var(--c-muted); } .empty-state .btn { margin-top: 16px; } /* 11. Single product ----------------------------------------------------- */ .single-product div.product { display: grid; gap: 28px; max-width: var(--container); margin-inline: auto; padding: 16px 0 0; } .pgallery { position: relative; } .pgallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .pgallery__track::-webkit-scrollbar { display: none; } .pgallery__item { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; background: var(--c-sand); } .pgallery__item img { width: 100%; height: 100%; object-fit: cover; } .pgallery__dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; } .pgallery__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / .6); transition: width var(--dur) var(--ease), background var(--dur); } .pgallery__dots span.is-active { width: 20px; border-radius: 3px; background: #fff; } .summary { padding-inline: var(--gutter); } .summary .product_title { font-size: calc(var(--fs-xl) * var(--display-scale)); margin-bottom: 8px; } .summary > .price { font-size: var(--fs-lg); margin-bottom: 16px; display: flex; } .woocommerce-product-details__short-description { color: var(--c-muted); margin-bottom: 20px; } .woocommerce-product-details__short-description p { margin: 0; } .stock { font-size: var(--fs-sm); margin: 0 0 12px; } .stock.in-stock { color: var(--c-success); } .stock.out-of-stock { color: var(--c-sale); font-weight: 600; } form.cart { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 24px; } form.cart .single_add_to_cart_button { flex: 1; min-height: 52px; } form.variations_form { display: block; } .opt { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; } .opt__legend { display: flex; justify-content: space-between; width: 100%; margin-bottom: 10px; padding: 0; font-weight: 600; font-size: var(--fs-sm); } .opt__guide { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; color: var(--c-muted); } .opt__pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; } .pill { position: relative; } .pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .pill span { display: grid; place-items: center; height: 46px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); font-weight: 600; font-size: var(--fs-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .pill:hover span { border-color: var(--c-ink); } .pill input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ivory); } .pill input:focus-visible + span { outline: 2px solid var(--c-gold); outline-offset: 2px; } .pill.is-out span { color: var(--c-muted); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--c-line) 6px 7px); text-decoration: line-through; } .pill.is-out input { cursor: not-allowed; } .opt.is-invalid .opt__pills { animation: shake .4s; } .variation-status { min-height: 1.6em; font-size: var(--fs-sm); margin-bottom: 8px; } .variation-status .price { font-size: var(--fs-md); } .variations_button { display: flex; gap: 10px; } .quantity { display: inline-flex; align-items: center; height: 52px; border: 1px solid var(--c-line-strong); border-radius: var(--r-btn); background: var(--c-surface); } .quantity .qty { width: 44px; min-height: 0; height: 100%; padding: 0; border: 0; background: transparent; text-align: center; font-weight: 600; -moz-appearance: textfield; box-shadow: none !important; } .quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-btn { width: 40px; height: 100%; border: 0; background: none; display: grid; place-items: center; color: var(--c-ink); } .qty-btn .icon { width: 16px; height: 16px; } .accordion { border-top: 1px solid var(--c-line); margin-top: 8px; } .accordion details { border-bottom: 1px solid var(--c-line); } .accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; cursor: pointer; list-style: none; font-weight: 600; } .accordion summary::-webkit-details-marker { display: none; } .accordion summary .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); color: var(--c-gold-deep); } .accordion details[open] summary .icon { transform: rotate(45deg); } .accordion .prose { padding-bottom: 20px; color: var(--c-muted); font-size: var(--fs-sm); } .accordion details[open] .prose { animation: fade-up .45s var(--ease); } .size-table { margin-top: 12px; font-size: var(--fs-sm); } .size-table th, .size-table td { padding: 10px 12px; border-bottom: 1px solid var(--c-line); text-align: start; } .size-table th { color: var(--c-ink); font-weight: 600; } .related.products, .upsells.products { max-width: var(--container); margin-inline: auto; padding: var(--section) var(--gutter) 0; } .related.products > h2 { text-align: center; font-size: calc(var(--fs-2xl) * var(--display-scale)); margin-bottom: 32px; } .single-product .shop-main { padding-bottom: var(--section); } .buybar { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--c-surface) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--c-line); box-shadow: 0 -10px 30px -20px rgb(0 0 0 / .3); transform: translateY(110%); transition: transform .45s var(--ease); } .buybar.is-visible { transform: none; } .buybar__info { display: grid; min-width: 0; line-height: 1.35; } .buybar__title { font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .buybar__price .price, .buybar__price { font-size: var(--fs-sm); font-weight: 600; } .buybar .btn { min-height: 46px; padding-inline: 22px; flex: none; } @media (min-width: 1024px) { .single-product div.product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); padding: 24px var(--gutter) 0; align-items: start; } .pgallery__track { display: grid; gap: 12px; overflow: visible; } .pgallery__item { border-radius: var(--r-card); overflow: hidden; } .pgallery__dots { display: none; } .summary { position: sticky; top: calc(var(--header-h) + 72px); padding-inline: 0; padding-top: 24px; } .buybar { display: none; } } /* Upsell & cross-sell ("Complete your look") */ .xsell { margin-top: 24px; } .xsell__title { font-size: calc(var(--fs-md) * var(--display-scale)); margin-bottom: 12px; } .xsell__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .xs-card { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; padding-inline-end: 10px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); animation: fade-up .45s var(--ease) both; } .xs-card__img { display: block; overflow: hidden; border-radius: var(--r-sm); background: var(--c-sand); } .xs-card__img img { width: 72px; height: 90px; object-fit: cover; transition: transform 1s var(--ease); } .xs-card:hover .xs-card__img img { transform: scale(1.05); } .xs-card__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; } .xs-card .price { font-size: var(--fs-sm); } .xs-card .xs-card__add { position: static; inset: auto; top: auto; width: 40px; height: 40px; opacity: 1; transform: none; background: var(--c-ink); color: var(--c-ivory); box-shadow: none; } .xs-card .xs-card__add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .xs-card .xs-card__add .icon { width: 18px; height: 18px; } .xs-card .xs-card__add:hover { background: var(--c-gold-deep); color: #fff; } .xsell--drawer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-line); } /* Cart & checkout: product tiles with large photos */ .xsell--cart .xsell__list, .xsell--checkout .xsell__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 768px) { .xsell--cart .xsell__list, .xsell--checkout .xsell__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } .xsell--cart .xs-card, .xsell--checkout .xs-card { container-type: inline-size; grid-template-columns: 1fr; align-items: start; gap: 0; padding: 0; overflow: hidden; border-radius: var(--r-md); } .xsell--cart .xs-card__img, .xsell--checkout .xs-card__img { border-radius: 0; aspect-ratio: 4 / 5; } .xsell--cart .xs-card__img img, .xsell--checkout .xs-card__img img { width: 100%; height: 100%; } .xsell--cart .xs-card__info, .xsell--checkout .xs-card__info { display: grid; gap: 4px; padding: 12px 12px 14px; } .xsell--cart .xs-card .xs-card__add, .xsell--checkout .xs-card .xs-card__add { position: absolute; top: calc(125cqw - 50px); inset-inline-end: 10px; width: 40px; height: 40px; background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-1); } .xsell--cart .xs-card .xs-card__add:hover, .xsell--checkout .xs-card .xs-card__add:hover { background: var(--c-ink); color: var(--c-ivory); } .xsell--cart .xs-card .xs-card__add.is-done, .xsell--checkout .xs-card .xs-card__add.is-done { background: var(--c-ink); color: var(--c-gold-light); } .xsell--cart { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--c-line); } .xsell--cart .xsell__title { font-size: calc(var(--fs-xl) * var(--display-scale)); text-align: center; margin-bottom: 24px; } .xsell--checkout { padding: 20px; background: var(--c-sand); border-radius: var(--r-lg); } .xsell--checkout .xsell__title { margin-bottom: 16px; } .woocommerce-cart .xsell--cart { grid-column: 1 / -1; } /* 12. Notices, cart, checkout, account ------------------------------------ */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .wc-block-components-notice-banner { list-style: none; margin: 0 0 24px; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--c-surface); border: 1px solid var(--c-line); border-inline-start: 3px solid var(--c-gold); border-radius: var(--r-md); font-size: var(--fs-sm); } .woocommerce-error { border-inline-start-color: var(--c-sale); display: block; } .woocommerce-message .button, .woocommerce-info .button { min-height: 40px; padding: 0 18px; order: 2; } .wc-flow { padding-bottom: var(--section); } .wc-flow__body { max-width: 1180px; } .wc-flow .page-hero { padding-bottom: 24px; } .shop_table { width: 100%; border: 0; font-size: var(--fs-sm); } .shop_table th { text-align: start; font-weight: 600; padding: 14px 10px; border-bottom: 1px solid var(--c-line-strong); } .shop_table td { padding: 16px 10px; border-bottom: 1px solid var(--c-line); vertical-align: middle; } .shop_table img { width: 72px; height: 90px; object-fit: cover; border-radius: var(--r-sm); } .shop_table .product-remove a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; color: var(--c-muted); border: 1px solid var(--c-line); } .shop_table .product-remove a:hover { background: var(--c-sale); color: #fff; border-color: var(--c-sale); } .shop_table .product-name a { font-weight: 500; } .woocommerce-cart-form .actions { padding-top: 20px; } .coupon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .coupon label { display: none; } .coupon .input-text { width: auto; flex: 1; min-width: 160px; min-height: 48px; } .cart-collaterals { margin-top: 32px; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { width: 100%; float: none; } .cart_totals { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; } .cart_totals h2, #order_review_heading, .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-size: calc(var(--fs-lg) * var(--display-scale)); } .cart_totals .shop_table th, .cart_totals .shop_table td { padding-inline: 0; } .wc-proceed-to-checkout { padding-top: 16px; } .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px; font-size: var(--fs-base); } #shipping_method { list-style: none; margin: 0; padding: 0; } #shipping_method li { margin-bottom: 6px; } .woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: var(--fs-xs); color: var(--c-muted); } .cart-empty.woocommerce-info { justify-content: center; text-align: center; padding: 32px; font-size: var(--fs-md); } .return-to-shop { text-align: center; } @media (min-width: 1024px) { .woocommerce-cart .wc-flow__body > .woocommerce { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(380px, 1fr); gap: 40px; align-items: start; } .woocommerce-cart .woocommerce-notices-wrapper, .woocommerce-cart .freeship { grid-column: 1 / -1; } .cart-collaterals { margin-top: 0; } } .form-row { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; } .form-row label .required { color: var(--c-sale); text-decoration: none; } .form-row .woocommerce-input-wrapper { display: block; } .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--c-ink); } .select2-container .select2-selection--single { height: 50px !important; border: 1px solid var(--c-line-strong) !important; border-radius: var(--r-md) !important; background: var(--c-surface) !important; display: flex !important; align-items: center; } .select2-container .select2-selection__rendered { padding-inline: 16px !important; line-height: 48px !important; } .select2-container .select2-selection__arrow { height: 48px !important; } .select2-dropdown { border-color: var(--c-line-strong) !important; border-radius: var(--r-md) !important; overflow: hidden; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; } @media (min-width: 640px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .woocommerce-billing-fields__field-wrapper .form-row-wide, .woocommerce-shipping-fields__field-wrapper .form-row-wide, .woocommerce-address-fields__field-wrapper .form-row-wide, #billing_address_1_field, #billing_address_2_field, #shipping_address_1_field, #shipping_address_2_field { grid-column: 1 / -1; } } .woocommerce-checkout form.checkout { display: grid; gap: 32px; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; } #order_review { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 20px; } #order_review .shop_table td, #order_review .shop_table th { padding-inline: 0; } #payment { margin-top: 20px; } #payment .payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; } #payment .payment_methods > li { padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--r-md); } #payment .payment_box { margin-top: 8px; font-size: var(--fs-sm); color: var(--c-muted); } #payment .payment_box p { margin: 0; } #place_order { width: 100%; min-height: 56px; font-size: var(--fs-base); } .woocommerce-terms-and-conditions-wrapper { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 12px; } .woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info { justify-content: flex-start; } @media (min-width: 1024px) { .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr); gap: 48px; align-items: start; } .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; } .woocommerce-checkout .xsell--checkout { grid-column: 1; grid-row: 3; margin-top: 0; } .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; } .woocommerce-checkout #order_review { grid-column: 2; grid-row: 2 / span 2; align-self: start; position: sticky; top: calc(var(--header-h) + 72px); } } .woocommerce-order-overview { list-style: none; padding: 20px; margin: 0 0 24px; display: grid; gap: 12px; background: var(--c-surface); border-radius: var(--r-lg); border: 1px solid var(--c-line); } .woocommerce-thankyou-order-received { font-size: var(--fs-lg); font-family: var(--f-display); text-align: center; } .woocommerce-account .wc-flow__body > .woocommerce { display: grid; gap: 28px; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--c-line-strong); border-radius: 999px; white-space: nowrap; font-size: var(--fs-sm); } .woocommerce-MyAccount-navigation .is-active a { background: var(--c-ink); color: var(--c-ivory); border-color: var(--c-ink); } .woocommerce-MyAccount-content { min-width: 0; } .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; } .u-columns.col2-set { display: grid; gap: 24px; } .u-columns .col-1, .u-columns .col-2 { width: 100% !important; float: none !important; } @media (min-width: 1024px) { .woocommerce-account .wc-flow__body > .woocommerce { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; } .woocommerce-MyAccount-navigation ul { flex-direction: column; } .woocommerce-MyAccount-navigation a { width: 100%; border-radius: var(--r-md); } .u-columns.col2-set { grid-template-columns: 1fr 1fr; } .woocommerce-account:not(.logged-in) .wc-flow__body > .woocommerce { grid-template-columns: 1fr; } } /* Shop filters */ .filter-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1px solid var(--c-ink); border-radius: 999px; background: var(--c-ink); color: var(--c-ivory); font-size: var(--fs-sm); font-weight: 600; transition: background var(--dur) var(--ease); } .filter-btn:hover { background: var(--c-gold-deep); border-color: var(--c-gold-deep); } .filter-btn .icon { width: 18px; height: 18px; } .filter-btn__count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--c-gold-light); color: var(--c-ink); font-size: 11px; } .shop-toolbar { flex-wrap: wrap; } .shop-toolbar .woocommerce-result-count { flex: 1; text-align: center; } @media (max-width: 639px) { .shop-toolbar .woocommerce-result-count { display: none; } } .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 24px; } .chip--remove { gap: 6px; background: var(--c-surface); min-height: 34px; padding: 0 12px; font-size: var(--fs-xs); } .chip--remove .icon { width: 14px; height: 14px; } .chip--remove:hover { border-color: var(--c-sale); color: var(--c-sale); } .active-filters__clear { font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px; color: var(--c-muted); } .filter-drawer .filters { display: flex; flex-direction: column; flex: 1; min-height: 0; } .filter-group { border: 0; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--c-line); min-width: 0; } .filter-group legend { padding: 0; margin-bottom: 14px; font-weight: 600; font-size: var(--fs-base); float: left; width: 100%; } [dir="rtl"] .filter-group legend { float: right; } .filter-group legend + * { clear: both; } .filter-group legend small { color: var(--c-muted); font-weight: 400; } .range { position: relative; height: 28px; margin: 4px 10px 14px; } .range__track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--c-line-strong); } .range__fill { position: absolute; top: 0; bottom: 0; background: var(--g-gold); border-radius: 4px; } .range input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-ink); box-shadow: var(--shadow-1); pointer-events: auto; cursor: grab; } .range input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-ink); pointer-events: auto; cursor: grab; } .range input[type="range"]::-webkit-slider-runnable-track, .range input[type="range"]::-moz-range-track { background: none; } .range__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .range__inputs label { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--c-muted); } .range__inputs input { min-height: 44px; text-align: center; -moz-appearance: textfield; } .filter-group .opt__pills { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } .pill input[type="checkbox"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; } .switch { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: var(--fs-sm); font-weight: 500; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch__ui { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--c-line-strong); transition: background var(--dur) var(--ease); } .switch__ui::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease); } .switch input:checked + .switch__ui { background: var(--c-ink); } .switch input:checked + .switch__ui::after { transform: translateX(18px); } [dir="rtl"] .switch input:checked + .switch__ui::after { transform: translateX(-18px); } .switch input:focus-visible + .switch__ui { outline: 2px solid var(--c-gold); outline-offset: 2px; } .filters__foot { grid-template-columns: 1fr 1.4fr; } /* Header "Offers" menu item (add the CSS class "menu-offers" to any menu item) */ .menu-offers > a { color: var(--c-sale) !important; font-weight: 600 !important; } .menu-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-inline-start: 6px; padding: 0 6px; border-radius: 999px; background: var(--c-sale); color: #fff; font-size: 11px; font-weight: 600; font-family: var(--f-body-en); line-height: 1; vertical-align: middle; } .menu-offers > a::after { background: var(--c-sale) !important; } .site-footer .menu-offers > a { color: var(--c-gold-light) !important; } /* Checkout progress steps */ .page-hero--flow { padding-bottom: 28px; } .steps { list-style: none; margin: 16px auto 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 8px; max-width: 520px; font-size: var(--fs-sm); } .steps li { display: flex; align-items: center; gap: 8px; color: var(--c-muted); white-space: nowrap; } .steps li:not(:last-child)::after { content: ""; width: clamp(18px, 6vw, 56px); height: 1px; background: var(--c-line-strong); margin-inline-start: 4px; } .steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c-line-strong); font-weight: 600; font-size: var(--fs-xs); background: var(--c-surface); } .steps .icon { width: 14px; height: 14px; } .steps .is-done { color: var(--c-ink); } .steps .is-done span { background: var(--c-ink); color: var(--c-gold-light); border-color: var(--c-ink); } .steps .is-done::after { background: var(--c-ink) !important; } .steps .is-current { color: var(--c-ink); font-weight: 600; } .steps .is-current span { border-color: var(--c-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-gold) 22%, transparent); } @media (max-width: 420px) { .steps li { font-size: var(--fs-xs); } } /* Bag (cart page) */ .bag__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .bag__title { font-size: calc(var(--fs-lg) * var(--display-scale)); margin: 0; } .bag__title span { color: var(--c-muted); font-size: .8em; } .bag__items { display: grid; gap: 12px; } .bag-item { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); transition: box-shadow var(--dur) var(--ease); animation: fade-up .5s var(--ease) both; } .bag-item:hover { box-shadow: var(--shadow-1); } .bag-item__img img { width: 96px; height: 120px; object-fit: cover; border-radius: var(--r-md); background: var(--c-sand); } .bag-item__info { display: grid; align-content: start; gap: 4px; padding-inline-end: 36px; min-width: 0; } .bag-item__name { font-weight: 600; line-height: 1.45; } .bag-item__info .variation { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; font-size: var(--fs-xs); color: var(--c-muted); } .bag-item__info .variation dt, .bag-item__info .variation dd, .bag-item__info .variation p { margin: 0; display: inline; } .bag-item__unit { font-size: var(--fs-sm); color: var(--c-muted); } .bag-item__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; } .bag-item__row .quantity { height: 42px; } .bag-item__row .qty-btn { width: 36px; } .bag-item__total { font-size: var(--fs-md); } .bag-item .product-remove { position: absolute; top: 10px; inset-inline-end: 10px; } .bag-item .product-remove a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--c-muted); transition: background var(--dur), color var(--dur); } .bag-item .product-remove a:hover { background: color-mix(in srgb, var(--c-sale) 10%, transparent); color: var(--c-sale); } .bag-item .product-remove .icon { width: 18px; height: 18px; } @media (min-width: 640px) { .bag-item { grid-template-columns: 120px minmax(0, 1fr); } .bag-item__img img { width: 120px; height: 150px; } } .bag__actions { margin-top: 16px; } .bag__coupon { border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); padding: 0 16px; } .bag__coupon summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: 600; } .bag__coupon summary::-webkit-details-marker { display: none; } .bag__coupon summary .icon { width: 18px; height: 18px; color: var(--c-gold-deep); transition: transform var(--dur) var(--ease); } .bag__coupon[open] summary .icon { transform: rotate(45deg); } .bag__coupon .coupon { padding-bottom: 16px; } .bag__coupon .btn { min-height: 48px; } .bag__update { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; overflow: hidden; clip-path: inset(50%); border: 0 !important; } .cart_totals { box-shadow: var(--shadow-1); } .cart_totals .shop_table { border: 0; } .cart_totals .shop_table tr:last-child th, .cart_totals .shop_table tr:last-child td { border-bottom: 0; } .cart_totals .order-total td, .cart_totals .order-total th { font-size: var(--fs-md); padding-top: 18px; } .trust { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--c-line); display: grid; gap: 10px; font-size: var(--fs-xs); color: var(--c-muted); } .trust li { display: flex; align-items: center; gap: 10px; } .trust .icon { width: 18px; height: 18px; color: var(--c-gold-deep); } .woocommerce-cart .cart-empty { margin-top: 24px; } /* Shorter checkout */ .loaloa-hidden-field, #billing_country_field, #billing_last_name_field { display: none !important; } .woocommerce-checkout #customer_details { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 20px; } @media (min-width: 640px) { .woocommerce-checkout #customer_details { padding: 32px; } } .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { grid-column: auto; } @media (max-width: 639px) { .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { grid-column: 1 / -1; } } .woocommerce-billing-fields h3 { margin-bottom: 20px; } .woocommerce-additional-fields h3 { display: none; } .woocommerce-checkout #billing_phone, .woocommerce-checkout #billing_email { text-align: start; direction: ltr; } [dir="rtl"] .woocommerce-checkout #billing_phone, [dir="rtl"] .woocommerce-checkout #billing_email { text-align: right; } #order_review .shop_table .product-name { font-weight: 500; } /* Thank-you */ .thanks { padding-bottom: var(--section); } .thanks__hero { text-align: center; max-width: 640px; margin: 0 auto 40px; } .thanks__seal { position: relative; width: 112px; height: 112px; margin: 8px auto 24px; display: grid; place-items: center; } .thanks__ring { position: absolute; inset: 0; border-radius: 50%; background: var(--g-gold); animation: seal-pop .8s var(--ease) both; box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--c-gold) 70%, transparent); } .thanks__check { position: relative; width: 60px; height: 60px; fill: none; stroke: var(--c-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .thanks__check circle { stroke: none; } .thanks__check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .6s .55s var(--ease) forwards; } .thanks__seal i { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--c-gold); opacity: 0; transform: rotate(var(--a)) translateY(0); animation: burst 1.1s .45s var(--ease) forwards; } .thanks__seal i:nth-child(odd) { background: var(--c-ink); width: 5px; height: 5px; } .thanks__title { font-size: calc(var(--fs-2xl) * var(--display-scale)); margin-bottom: 10px; animation: fade-up .7s .3s var(--ease) both; } .thanks__lead { color: var(--c-muted); animation: fade-up .7s .45s var(--ease) both; } .thanks__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; animation: fade-up .7s .6s var(--ease) both; } .thanks__pills span { padding: 8px 16px; border-radius: 999px; background: var(--c-sand); font-size: var(--fs-sm); } .thanks__grid { display: grid; gap: 16px; } @media (min-width: 1024px) { .thanks__grid { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } } .thanks__card { padding: 24px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); animation: fade-up .7s .7s var(--ease) both; } .thanks__card h2 { font-size: calc(var(--fs-lg) * var(--display-scale)); margin-bottom: 8px; } .thanks__eta { font-size: var(--fs-md); font-weight: 600; color: var(--c-gold-deep); margin-bottom: 20px; } .timeline { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 0; } .timeline li { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 0; color: var(--c-muted); font-size: var(--fs-sm); } .timeline li span { position: relative; z-index: 1; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-line-strong); background: var(--c-surface); } .timeline li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 7px; top: 26px; bottom: -10px; width: 2px; background: var(--c-line); } .timeline .is-done { color: var(--c-ink); } .timeline .is-done span { background: var(--c-ink); border-color: var(--c-ink); } .timeline .is-done::before { background: var(--c-ink) !important; } .timeline .is-current { color: var(--c-ink); font-weight: 600; } .timeline .is-current span { border-color: var(--c-gold); background: var(--c-gold-light); animation: pulse 1.8s ease-in-out infinite; } .thanks__meta { margin: 0; display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); } .thanks__meta div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; } .thanks__meta dt { color: var(--c-muted); } .thanks__meta dd { margin: 0; font-weight: 500; } .thanks__items { list-style: none; margin: 0 0 12px; padding: 0; } .thanks__items li { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); } .thanks__items img { width: 56px; height: 70px; object-fit: cover; border-radius: var(--r-sm); } .thanks__items small { color: var(--c-muted); } .thanks__totals { margin: 0; display: grid; gap: 8px; font-size: var(--fs-sm); } .thanks__totals div { display: flex; justify-content: space-between; gap: 12px; } .thanks__totals dd { margin: 0; } .thanks__totals .order_total { font-size: var(--fs-md); font-weight: 600; padding-top: 8px; border-top: 1px solid var(--c-line); } .thanks__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; } .thanks__more { margin-top: var(--section); text-align: center; } .thanks__more .products { text-align: start; } .thanks__hero--failed { padding: 32px; background: var(--c-surface); border-radius: var(--r-lg); } @keyframes seal-pop { 0% { transform: scale(0); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1 - 40px)) scale(.4); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-gold) 50%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } } /* Dropdowns: native selects, WooCommerce's selectWoo/select2, and the sort menu */ @supports (appearance: base-select) { select.orderby, .woocommerce-ordering select, .contact select, .wc-flow select:not(.select2-hidden-accessible) { appearance: base-select; } select.orderby::picker(select), .woocommerce-ordering select::picker(select), .contact select::picker(select), .wc-flow select:not(.select2-hidden-accessible)::picker(select) { appearance: base-select; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 6px; background: var(--c-surface); box-shadow: var(--shadow-2); margin-block: 6px; transition: opacity .25s var(--ease), translate .25s var(--ease), display .25s allow-discrete, overlay .25s allow-discrete; } select::picker-icon { display: none; } select option { padding: 10px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); } select option:hover, select option:focus-visible { background: var(--c-bg); } select option:checked { background: var(--c-ink); color: var(--c-ivory); font-weight: 600; } select option::checkmark { display: none; } } .select2-container--default .select2-selection--single { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .select2-container--open .select2-selection--single, .select2-container--focus .select2-selection--single { border-color: var(--c-gold) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 22%, transparent); } .select2-container--default .select2-selection--single .select2-selection__arrow b { border: 0 !important; width: 18px; height: 18px; margin: -9px 0 0 -9px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1815' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform var(--dur) var(--ease); } .select2-container--open .select2-selection__arrow b { transform: rotate(180deg); } .select2-container .select2-selection__arrow { width: 40px !important; } [dir="rtl"] .select2-container .select2-selection__arrow { left: 4px !important; right: auto !important; } .select2-dropdown { background: var(--c-surface) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-2); padding: 6px; margin-top: 6px; font-family: var(--f-body); animation: fade-up .25s var(--ease); } .select2-container--open .select2-dropdown--above { margin-top: -6px; } .select2-search--dropdown { padding: 4px 4px 8px !important; } .select2-search--dropdown .select2-search__field { min-height: 42px; border: 1px solid var(--c-line-strong) !important; border-radius: var(--r-sm) !important; padding: 8px 12px !important; background: var(--c-bg); } .select2-results__options { max-height: 260px !important; scrollbar-width: thin; } .select2-results__option { padding: 10px 14px !important; border-radius: var(--r-sm); font-size: var(--fs-sm); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--c-bg) !important; color: var(--c-ink) !important; } .select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"] { background: var(--c-ink) !important; color: var(--c-ivory) !important; font-weight: 600; } /* 13. Pages -------------------------------------------------------------- */ .page-main { padding-bottom: 0; } .page-main.wc-flow { padding-bottom: var(--section); } .wp-block-image.is-style-arch img, .is-style-arch img { border-radius: 50% 50% var(--r-md) var(--r-md) / 34% 34% var(--r-md) var(--r-md); aspect-ratio: 4 / 5; object-fit: cover; max-width: 480px; margin-inline: auto; width: 100%; } .contact { display: grid; gap: 40px; padding-bottom: var(--section); } .contact__info .prose { margin-bottom: 24px; color: var(--c-muted); } .contact-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .contact-card { padding: 20px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); } .contact-card .icon { color: var(--c-gold-deep); margin-bottom: 10px; } .contact-card h2 { font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); margin-bottom: 2px; } .contact-card p, .contact-card a { margin: 0; font-weight: 500; word-break: break-word; } .form-card { padding: 24px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .form-card__title { font-size: calc(var(--fs-lg) * var(--display-scale)); } @media (min-width: 1024px) { .contact { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .form-card { padding: 40px; } } .notfound { text-align: center; padding-block: clamp(64px, 12vw, 140px); } .notfound__mark { width: 96px; margin: 0 auto 20px; border-radius: 50%; animation: float 6s ease-in-out infinite; } .notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; } .post-grid { display: grid; gap: 40px 24px; padding-bottom: var(--section); } @media (min-width: 768px) { .post-grid { grid-template-columns: repeat(3, 1fr); } } .post-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-card); margin-bottom: 14px; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; } .post-card__title { font-size: calc(var(--fs-lg) * var(--display-scale)); } .post-cover img { width: 100%; border-radius: var(--r-md); margin-bottom: 32px; } /* 14. Footer ------------------------------------------------------------- */ .site-footer { background: var(--c-ink); color: rgb(246 240 230 / .72); padding-top: clamp(56px, 7vw, 96px); font-size: var(--fs-sm); } .site-footer a:hover { color: var(--c-gold-light); } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; padding-bottom: 48px; } .footer-brand { grid-column: 1 / -1; } .brand--footer { justify-content: flex-start; margin-bottom: 18px; } .brand--footer .logo-img { height: 64px; width: auto; } .footer-about { max-width: 40ch; } .footer-title { color: var(--c-ivory); font-size: calc(var(--fs-md) * var(--display-scale)); margin-bottom: 16px; } .footer-col .menu li { margin-bottom: 10px; } .footer-col:last-child { grid-column: 1 / -1; } .contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .contact-list li { display: flex; align-items: flex-start; gap: 10px; } .contact-list .icon { width: 18px; height: 18px; color: var(--c-gold); margin-top: 4px; } .social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid currentColor; opacity: .85; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .social a:hover { background: var(--c-gold-light); color: var(--c-ink); border-color: var(--c-gold-light); opacity: 1; } .social .icon { width: 18px; height: 18px; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(246 240 230 / .12); font-size: var(--fs-xs); } .footer-bottom p { margin: 0; } .payments { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .payments li { padding: 4px 10px; border: 1px solid rgb(246 240 230 / .22); border-radius: var(--r-sm); font-family: var(--f-body-en); font-weight: 500; letter-spacing: .02em; } .lang-switch--footer { min-height: 36px; border: 1px solid rgb(246 240 230 / .22); border-radius: 999px; } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; } .footer-brand, .footer-col:last-child { grid-column: auto; } } /* 15. Motion ------------------------------------------------------------- */ .has-motion.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .has-motion.js .reveal.is-in { opacity: 1; transform: none; } .has-motion.js .cat.reveal .frame img, .has-motion.js .story__media.reveal img:not(.story__mark), .has-motion.js .fragrance__media.reveal img { transform: scale(1.18); transition: transform 1.8s var(--ease); } .has-motion.js .cat.reveal.is-in .frame img, .has-motion.js .story__media.reveal.is-in img:not(.story__mark), .has-motion.js .fragrance__media.reveal.is-in img { transform: scale(1); } .has-motion.js .story__media.reveal .frame, .has-motion.js .fragrance__media.reveal .frame { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); transition: clip-path 1.4s var(--ease); } .has-motion.js .story__media.reveal.is-in .frame, .has-motion.js .fragrance__media.reveal.is-in .frame { clip-path: inset(0 0 0 0 round 0); } @keyframes marquee { to { transform: translateX(-50%); } } @keyframes marquee-rtl { to { transform: translateX(50%); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } } @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } @keyframes parallax { from { transform: translateY(-6%) scale(1.14); } to { transform: translateY(6%) scale(1.14); } } @view-transition { navigation: auto; } ::view-transition-old(root) { animation: .22s ease both vt-out; } ::view-transition-new(root) { animation: .38s var(--ease) both vt-in; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .has-motion.js .reveal, .has-motion.js .hero__slide * { opacity: 1 !important; transform: none !important; clip-path: none !important; } .announce__track { animation: none; width: auto; justify-content: center; } .announce__group[aria-hidden="true"], .announce__group i, .announce__group span:not(:first-child) { display: none; } @view-transition { navigation: none; } } /* 16. Utilities ---------------------------------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (max-width: 1023px) { .hide-mobile { display: none !important; } } @media (min-width: 1024px) { .hide-desktop { display: none !important; } }