/* EDD Perfume — what theme.json cannot express. Mobile first. */ /* ---------- Base ---------- */ html { -webkit-text-size-adjust: 100%; } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } ::selection { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--charcoal); } img { height: auto; } /* Visible keyboard focus everywhere (WCAG 2.4.7 / 2.4.11) */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--gold-dark); outline-offset: 3px; box-shadow: 0 0 0 5px var(--wp--preset--color--ivory); } .has-brown-background-color :where(a, button):focus-visible, .has-charcoal-background-color :where(a, button):focus-visible, .has-burgundy-background-color :where(a, button):focus-visible { outline-color: var(--wp--preset--color--gold-light); box-shadow: none; } /* Comfortable touch targets (WCAG 2.5.8) */ .wp-block-button__link, .wp-block-navigation-item__content, .wc-block-components-button, .edd-chips a { min-height: 44px; } .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; } /* ---------- Typography helpers ---------- */ h2.edd-eyebrow, h3.edd-eyebrow, .edd-eyebrow { font-family: var(--wp--preset--font-family--body) !important; font-size: var(--wp--preset--font-size--xs); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); margin: 0; } :is(.has-brown-background-color, .has-charcoal-background-color, .has-burgundy-background-color) .edd-eyebrow { color: var(--wp--preset--color--gold-light); } .edd-lead { font-size: var(--wp--preset--font-size--lg); line-height: 1.55; max-width: 38ch; } .edd-rule { width: 3rem; height: 1px; border: 0; background: var(--wp--preset--color--gold); margin-left: 0; } .is-content-justification-center .edd-rule, .has-text-align-center + .edd-rule, .edd-center .edd-rule { margin-left: auto; margin-right: auto; } /* Secondary (outline) button */ .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: currentColor; border: 1px solid var(--wp--preset--color--gold); } .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--ivory); color: var(--wp--preset--color--charcoal); border-color: var(--wp--preset--color--ivory); } /* Links on dark sections (contrast) */ :is(.has-brown-background-color, .has-charcoal-background-color, .has-burgundy-background-color) a:not(.wp-block-button__link) { color: var(--wp--preset--color--gold-light); } :is(.has-brown-background-color, .has-charcoal-background-color, .has-burgundy-background-color) a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--ivory); } /* No stray gap between the last section and the footer */ .wp-site-blocks > *:last-child { margin-block-start: 0; } main + .wp-block-template-part, main.wp-block-group + * { margin-block-start: 0; } /* ---------- Header ---------- */ .edd-header { border-bottom: 1px solid rgba(176, 141, 87, 0.35); } .edd-header .wp-block-site-title a { text-decoration: none; } .edd-header .wp-block-navigation a { text-decoration: none; } .edd-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--wp--preset--color--gold); } .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ivory) !important; padding: 2rem 1.5rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; letter-spacing: 0; text-transform: none; } /* ---------- Hero ---------- */ .edd-hero { position: relative; background: radial-gradient(120% 90% at 85% 10%, rgba(176, 141, 87, 0.22) 0%, rgba(176, 141, 87, 0) 55%), radial-gradient(90% 80% at 0% 100%, rgba(110, 30, 43, 0.35) 0%, rgba(110, 30, 43, 0) 60%), var(--wp--preset--color--brown); } .edd-hero h1 { color: var(--wp--preset--color--ivory); max-width: 16ch; } .edd-hero p { color: var(--wp--preset--color--sand); } .edd-hero .edd-lead { color: var(--wp--preset--color--sand); } /* ---------- Collection tiles ---------- */ .edd-tiles { display: grid; gap: 1px; grid-template-columns: 1fr; background: rgba(176, 141, 87, 0.35); border: 1px solid rgba(176, 141, 87, 0.35); } @media (min-width: 600px) { .edd-tiles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .edd-tiles { grid-template-columns: repeat(3, 1fr); } } .edd-tile { margin: 0 !important; padding: 2rem 1.75rem; background: var(--wp--preset--color--ivory); display: flex; flex-direction: column; gap: 0.5rem; } .edd-tile h3 { margin: 0; } .edd-tile h3 a { text-decoration: none; } .edd-tile h3 a::after { content: ""; position: absolute; inset: 0; } .edd-tile { position: relative; transition: background-color 0.2s ease; } .edd-tile:hover, .edd-tile:focus-within { background: var(--wp--preset--color--sand); } .edd-tile p { margin: 0; color: var(--wp--preset--color--muted); } .edd-tile .edd-more { margin-top: auto; padding-top: 1rem; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); } /* ---------- Fragrance cards (the 13 compositions) ---------- */ .edd-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; } @media (min-width: 640px) { .edd-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .edd-cards { grid-template-columns: repeat(3, 1fr); } } .edd-card { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; border: 1px solid rgba(176, 141, 87, 0.45); background: #fbf8f2; margin: 0; } .edd-card:hover, .edd-card:focus-within { border-color: var(--wp--preset--color--gold-dark); } .edd-card h3 { margin: 0; font-size: 1.75rem; } .edd-card h3 a { text-decoration: none; } .edd-card h3 a::after { content: ""; position: absolute; inset: 0; } .edd-card .edd-style { margin: 0; font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.2rem; line-height: 1.35; color: var(--wp--preset--color--muted); } /* Scent pyramid (cards, product page) */ .edd-pyramid { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0.5rem 0 0; font-size: var(--wp--preset--font-size--sm); } .edd-pyramid dt { font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); padding-top: 0.15em; } .edd-pyramid dd { margin: 0; } /* ---------- Note chips ---------- */ .edd-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; } .edd-chips a { display: inline-flex; align-items: center; padding: 0.5rem 1.1rem; border: 1px solid rgba(176, 141, 87, 0.55); text-decoration: none; font-size: var(--wp--preset--font-size--sm); background: transparent; } .edd-chips a:hover { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--ivory); border-color: var(--wp--preset--color--charcoal); } /* ---------- Editorial list ---------- */ .edd-articles { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(176, 141, 87, 0.45); } @media (min-width: 900px) { .edd-articles { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; border-top: 0; } } .edd-articles li { position: relative; padding: 1.5rem 0; border-bottom: 1px solid rgba(176, 141, 87, 0.45); } @media (min-width: 900px) { .edd-articles li { border-bottom: 0; border-top: 1px solid var(--wp--preset--color--gold); padding-top: 1.75rem; } } .edd-articles h3 { margin: 0.4rem 0 0.5rem; } .edd-articles h3 a { text-decoration: none; } .edd-articles h3 a::after { content: ""; position: absolute; inset: 0; } .edd-articles p { margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); } /* ---------- Promise list (verified facts only) ---------- */ .edd-promises { display: grid; gap: 1.5rem; list-style: none; padding: 0; margin: 0; } @media (min-width: 800px) { .edd-promises { grid-template-columns: repeat(3, 1fr); gap: 3rem; } } .edd-promises li { border-top: 1px solid var(--wp--preset--color--gold); padding-top: 1.25rem; } .edd-promises strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 500; margin-bottom: 0.35rem; } /* ---------- Footer ---------- */ .edd-footer a { color: var(--wp--preset--color--sand); text-decoration: none; } .edd-footer a:hover { color: var(--wp--preset--color--ivory); text-decoration: underline; } .edd-footer .edd-eyebrow { margin-bottom: 0.9rem; } .edd-footer .edd-footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: var(--wp--preset--font-size--sm); } /* ---------- Editorial pages ---------- */ .edd-page-title { padding-bottom: var(--wp--preset--spacing--30); border-bottom: 1px solid rgba(176, 141, 87, 0.45); } .entry-content > p:first-child { font-size: var(--wp--preset--font-size--lg); line-height: 1.6; } .entry-content h2 { margin-top: var(--wp--preset--spacing--50); } .entry-content table { border-collapse: collapse; width: 100%; font-size: var(--wp--preset--font-size--sm); } .entry-content th, .entry-content td { border-bottom: 1px solid rgba(176, 141, 87, 0.45); padding: 0.75rem 0.5rem; text-align: left; vertical-align: top; } /* ---------- WooCommerce ---------- */ .edd-product-notes { margin: 1.5rem 0 2rem; padding: 1.25rem 0; border-top: 1px solid rgba(176, 141, 87, 0.45); border-bottom: 1px solid rgba(176, 141, 87, 0.45); } .edd-product-notes h2 { margin: 0 0 0.75rem; } .single-product .wp-block-post-excerpt__excerpt { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--wp--preset--color--muted); } .single-product main h1.wp-block-post-title { font-size: var(--wp--preset--font-size--xxl); } .woocommerce-breadcrumb, .wp-block-woocommerce-breadcrumbs { font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.08em; } .woocommerce-product-attributes { border: 0; } .woocommerce-product-attributes th { font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); font-weight: 500; text-align: left; width: 30%; } .woocommerce-product-attributes td, .woocommerce-product-attributes th { border-bottom: 1px solid rgba(176, 141, 87, 0.45) !important; padding: 0.85rem 0 !important; background: none !important; } .wc-block-components-product-sale-badge, .wc-block-grid__product-onsale { border-radius: 0; background: var(--wp--preset--color--burgundy); color: var(--wp--preset--color--ivory); border: 0; letter-spacing: 0.12em; text-transform: uppercase; } .wc-block-components-button:not(.is-link), .wp-block-woocommerce-product-button .wp-block-button__link, .single_add_to_cart_button { border-radius: 0 !important; background: var(--wp--preset--color--burgundy) !important; color: var(--wp--preset--color--ivory) !important; letter-spacing: 0.14em; text-transform: uppercase; font-size: var(--wp--preset--font-size--xs); } .wc-block-components-button:not(.is-link):hover, .single_add_to_cart_button:hover { background: var(--wp--preset--color--charcoal) !important; } .wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control__input, .wc-block-components-select select, .quantity .qty { border-radius: 0 !important; border-color: var(--wp--preset--color--muted) !important; background: #fff; } .wc-block-product-template .wc-block-components-product-image img, .wp-block-woocommerce-product-image img { background: var(--wp--preset--color--sand); } .wc-block-components-product-name, .wp-block-post-title a { text-decoration: none; } .woocommerce-info, .wc-block-components-notice-banner { border-radius: 0 !important; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ===================================================================== v2 — luxury house layout (2026-10-13) Material visuals are CSS placeholders until WebP photography exists: replace .edd-visual with … in the patterns. ===================================================================== */ /* Announcement + centred header */ .edd-announce { margin: 0; padding: 0.55rem 1rem; text-align: center; background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--sand); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; } .edd-header2 { border-bottom: 1px solid rgba(176, 141, 87, 0.35); background: var(--wp--preset--color--ivory); position: sticky; top: 0; z-index: 50; } .admin-bar .edd-header2 { top: 32px; } @media (max-width: 782px) { .admin-bar .edd-header2 { top: 46px; } } .edd-header2__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; max-width: 1320px; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2.5rem); } .edd-header2__nav { justify-self: start; } .edd-header2__brand { justify-self: center; margin: 0; } .edd-header2__brand a { text-decoration: none; font-size: clamp(1.25rem, 2.4vw, 1.9rem); letter-spacing: 0.22em; } .edd-header2__tools { justify-self: end; } .edd-lang { margin: 0; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.14em; } .edd-lang a { text-decoration: none; display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; } /* Buttons and text links */ .edd-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0.9rem 2rem; background: var(--wp--preset--color--burgundy); color: var(--wp--preset--color--ivory) !important; text-decoration: none; font-size: var(--wp--preset--font-size--xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid var(--wp--preset--color--burgundy); transition: background-color .2s ease; } .edd-btn:hover { background: var(--wp--preset--color--charcoal); border-color: var(--wp--preset--color--charcoal); } .edd-link { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--wp--preset--color--gold); } /* Material visuals */ .edd-visual { position: relative; width: 100%; height: 100%; min-height: 100%; overflow: hidden; background: #2a1e17; } .edd-visual::before { content: ""; position: absolute; inset: 0; } .edd-visual__grain { position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .edd-visual--oud::before { background: radial-gradient(60% 50% at 70% 35%, rgba(201, 146, 74, .55), transparent 70%), radial-gradient(80% 60% at 20% 90%, rgba(0, 0, 0, .7), transparent 70%), linear-gradient(160deg, #3b2a20 0%, #1a1310 100%); } .edd-visual--amber::before { background: radial-gradient(55% 45% at 40% 40%, rgba(240, 190, 100, .9), transparent 70%), linear-gradient(160deg, #b9792c 0%, #5a3313 100%); } .edd-visual--saffron::before { background: radial-gradient(50% 45% at 60% 35%, rgba(232, 120, 52, .85), transparent 70%), linear-gradient(160deg, #8f2a16 0%, #3d120c 100%); } .edd-visual--rose::before { background: radial-gradient(55% 45% at 35% 40%, rgba(196, 72, 92, .8), transparent 70%), linear-gradient(160deg, #6e1e2b 0%, #2c0c13 100%); } .edd-visual--musk::before { background: radial-gradient(60% 50% at 50% 40%, rgba(255, 255, 255, .95), transparent 70%), linear-gradient(160deg, #efe6d8 0%, #cdbfa8 100%); } .edd-visual--spices::before { background: radial-gradient(50% 45% at 55% 40%, rgba(196, 110, 60, .8), transparent 70%), linear-gradient(160deg, #7a3b1d 0%, #321709 100%); } .edd-visual--vanilla::before { background: radial-gradient(55% 45% at 50% 40%, rgba(250, 230, 190, .95), transparent 70%), linear-gradient(160deg, #d9b98a 0%, #8c6a3f 100%); } .edd-visual--patchouli::before { background: radial-gradient(50% 45% at 40% 40%, rgba(120, 110, 70, .7), transparent 70%), linear-gradient(160deg, #3e3a26 0%, #17150d 100%); } .edd-visual--gourmand::before { background: radial-gradient(55% 45% at 45% 40%, rgba(214, 150, 80, .85), transparent 70%), linear-gradient(160deg, #8a5524 0%, #3a2210 100%); } .edd-visual--story::before { background: radial-gradient(40% 35% at 25% 30%, rgba(201, 146, 74, .55), transparent 70%), radial-gradient(35% 30% at 75% 70%, rgba(110, 30, 43, .55), transparent 70%), radial-gradient(30% 30% at 70% 25%, rgba(240, 190, 100, .45), transparent 70%), linear-gradient(160deg, #4a3527 0%, #1c1411 100%); } /* Hero v2 */ .edd-hero2 { margin: 0 !important; } .edd-hero2__grid { display: grid; grid-template-columns: 1fr; min-height: auto; } @media (min-width: 960px) { .edd-hero2__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: min(88vh, 860px); } } .edd-hero2__text { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; padding: clamp(3rem, 8vw, 7rem) clamp(1.25rem, 6vw, 6rem); } .edd-hero2__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1.02; letter-spacing: -0.01em; max-width: 12ch; } .edd-hero2__title em { color: var(--wp--preset--color--burgundy); font-style: italic; } .edd-hero2__lead { margin: 0; max-width: 44ch; font-size: var(--wp--preset--font-size--lg); line-height: 1.55; color: var(--wp--preset--color--muted); } .edd-hero2__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: .75rem; } .edd-hero2__visual { position: relative; min-height: 56vw; } @media (min-width: 960px) { .edd-hero2__visual { min-height: 100%; } } .edd-hero2__caption { position: absolute; left: 1.5rem; bottom: 1.25rem; margin: 0; color: var(--wp--preset--color--sand); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; } /* Shop-by-note rail */ .edd-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0 0 1rem; scrollbar-width: thin; scrollbar-color: var(--wp--preset--color--gold) transparent; } @media (min-width: 700px) { .edd-rail { grid-auto-columns: minmax(220px, 34%); } } @media (min-width: 1100px) { .edd-rail { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; } } .edd-rail__item { scroll-snap-align: start; } .edd-rail__card { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .edd-rail__card .edd-visual { aspect-ratio: 3 / 4; height: auto; transition: transform .5s ease; } .edd-rail__card:hover .edd-visual, .edd-rail__card:focus-visible .edd-visual { transform: scale(1.02); } .edd-rail__meta { display: grid; gap: .2rem; padding-top: .9rem; } .edd-rail__name { font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; line-height: 1.1; } .edd-rail__desc { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); } .edd-rail__count { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); } /* Scent finder */ .edd-finder { display: grid; gap: 1rem; margin-bottom: 2.5rem; } .edd-notes { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; } .edd-note { min-height: 44px; padding: .55rem 1.2rem; background: transparent; color: var(--wp--preset--color--charcoal); border: 1px solid rgba(94, 85, 77, .55); font: inherit; font-size: var(--wp--preset--font-size--sm); cursor: pointer; } .edd-note:hover { border-color: var(--wp--preset--color--charcoal); } .edd-note[aria-pressed="true"] { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--ivory); border-color: var(--wp--preset--color--charcoal); } .edd-note[aria-pressed="true"]::before { content: "✓ "; } .edd-finder__status { margin: 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); } .edd-finder__reset { justify-self: start; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-size: var(--wp--preset--font-size--xs); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; color: var(--wp--preset--color--burgundy); cursor: pointer; } /* Product cards v2 */ .edd-pgrid { display: grid; grid-template-columns: 1fr; gap: 2.5rem 1.5rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 620px) { .edd-pgrid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .edd-pgrid { grid-template-columns: repeat(3, 1fr); } } .edd-pcard { display: flex; flex-direction: column; } .edd-pcard[hidden] { display: none; } .edd-pcard__media { display: block; } .edd-pcard__media .edd-visual { aspect-ratio: 4 / 5; height: auto; transition: transform .5s ease; } .edd-pcard:hover .edd-visual { transform: scale(1.015); } .edd-pcard__body { padding-top: 1.1rem; display: grid; gap: .4rem; } .edd-pcard__name { margin: 0; font-size: 1.9rem; } .edd-pcard__name a { text-decoration: none; } .edd-pcard__name a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-underline-offset: 6px; } .edd-pcard__style { margin: 0; font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.2rem; color: var(--wp--preset--color--muted); } /* Editorial split */ .edd-split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: 1240px; margin: 0 auto; } @media (min-width: 900px) { .edd-split { grid-template-columns: 1fr 1fr; } } .edd-split__visual .edd-visual { aspect-ratio: 4 / 5; height: auto; } .edd-split__text h2 { color: var(--wp--preset--color--ivory); margin: .5rem 0 1.25rem; font-size: var(--wp--preset--font-size--xxl); } .edd-split__lead { font-size: var(--wp--preset--font-size--lg); line-height: 1.55; } /* Shop by occasion (was "Shop by wearer" — every composition is unisex, so the range is sorted by occasion. Now holds 4 entries, so the grid goes 1 / 2 / 4 instead of 1 / 3, which kept orphaning the fourth card onto its own row.) */ .edd-duo { display: grid; grid-template-columns: 1fr; gap: 1px; list-style: none; margin: 0; padding: 0; background: rgba(176, 141, 87, .45); border: 1px solid rgba(176, 141, 87, .45); } @media (min-width: 560px) { .edd-duo { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .edd-duo { grid-template-columns: repeat(4, 1fr); } } .edd-duo a { display: grid; gap: .35rem; padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem) clamp(1.1rem, .7rem + 1.2vw, 2rem); background: var(--wp--preset--color--ivory); text-decoration: none; transition: background-color .2s ease; } .edd-duo a:hover, .edd-duo a:focus-visible { background: var(--wp--preset--color--sand); } .edd-duo__k { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem); line-height: 1.1; } .edd-duo__n { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); } .edd-promises__n { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1rem; color: var(--wp--preset--color--gold-dark); margin-bottom: .4rem; } .edd-header2__bar > * { align-self: center; margin-block: 0 !important; } .edd-header2__tools { align-items: center; } .edd-header2__tools > * { margin: 0 !important; display: flex; align-items: center; } .edd-header2__brand a { white-space: nowrap; } @media (max-width: 600px) { .edd-header2__brand a { font-size: 1.05rem; letter-spacing: 0.14em; } .edd-header2__bar { gap: .5rem; } .edd-announce { font-size: .6875rem; letter-spacing: .12em; } } /* v2.1 — gold line motifs over the material visuals */ .edd-visual::after { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; background-size: cover; pointer-events: none; } .edd-visual--oud::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22300%22 viewBox=%220 0 200 300%22%3E%3Cg stroke=%22%23C8A46B%22 fill=%22none%22 stroke-width=%221%22 stroke-opacity=%22.22%22%3E%3Cpath d=%22M-10 10 C 60 -4, 140 26, 210 6%22/%3E%3Cpath d=%22M-10 28 C 60 14, 140 44, 210 24%22/%3E%3Cpath d=%22M-10 46 C 60 32, 140 62, 210 42%22/%3E%3Cpath d=%22M-10 64 C 60 50, 140 80, 210 60%22/%3E%3Cpath d=%22M-10 82 C 60 68, 140 98, 210 78%22/%3E%3Cpath d=%22M-10 100 C 60 86, 140 116, 210 96%22/%3E%3Cpath d=%22M-10 118 C 60 104, 140 134, 210 114%22/%3E%3Cpath d=%22M-10 136 C 60 122, 140 152, 210 132%22/%3E%3Cpath d=%22M-10 154 C 60 140, 140 170, 210 150%22/%3E%3Cpath d=%22M-10 172 C 60 158, 140 188, 210 168%22/%3E%3Cpath d=%22M-10 190 C 60 176, 140 206, 210 186%22/%3E%3Cpath d=%22M-10 208 C 60 194, 140 224, 210 204%22/%3E%3Cpath d=%22M-10 226 C 60 212, 140 242, 210 222%22/%3E%3Cpath d=%22M-10 244 C 60 230, 140 260, 210 240%22/%3E%3Cpath d=%22M-10 262 C 60 248, 140 278, 210 258%22/%3E%3Cpath d=%22M-10 280 C 60 266, 140 296, 210 276%22/%3E%3Cpath d=%22M-10 298 C 60 284, 140 314, 210 294%22/%3E%3C/g%3E%3C/svg%3E"); } .edd-visual--amber::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22300%22 viewBox=%220 0 200 300%22%3E%3Cg stroke=%22%23C8A46B%22 fill=%22none%22 stroke-width=%221%22 stroke-opacity=%22.35%22%3E%3Ccircle cx=%2260%22 cy=%2290%22 r=%2226%22/%3E%3Ccircle cx=%22140%22 cy=%22170%22 r=%2216%22/%3E%3Ccircle cx=%2280%22 cy=%22230%22 r=%2210%22/%3E%3Ccircle cx=%22150%22 cy=%2260%22 r=%227%22/%3E%3C/g%3E%3C/svg%3E"); } .edd-visual--saffron::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22300%22 viewBox=%220 0 200 300%22%3E%3Cg stroke=%22%23C8A46B%22 fill=%22none%22 stroke-width=%221%22 stroke-opacity=%22.38%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M40 260 C 60 180, 50 120, 90 60%22/%3E%3Cpath d=%22M70 270 C 100 200, 80 150, 130 90%22/%3E%3Cpath d=%22M110 265 C 120 210, 150 170, 160 110%22/%3E%3Cpath d=%22M30 200 C 70 170, 90 150, 100 120%22/%3E%3C/g%3E%3C/svg%3E"); } .edd-visual--rose::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22300%22 viewBox=%220 0 200 300%22%3E%3Cg stroke=%22%23C8A46B%22 fill=%22none%22 stroke-width=%221%22 stroke-opacity=%22.32%22%3E%3Cpath d=%22M100 150 C 60 110, 60 70, 100 60 C 140 70, 140 110, 100 150 Z%22/%3E%3Cpath d=%22M100 150 C 50 150, 30 120, 45 95%22/%3E%3Cpath d=%22M100 150 C 150 150, 170 120, 155 95%22/%3E%3Cpath d=%22M100 150 C 70 190, 75 220, 100 230 C 125 220, 130 190, 100 150 Z%22/%3E%3C/g%3E%3C/svg%3E"); } .edd-visual--musk::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22300%22 viewBox=%220 0 200 300%22%3E%3Cg fill=%22none%22 stroke=%22%237A5C2E%22 stroke-opacity=%22.22%22 stroke-width=%221%22%3E%3Cellipse cx=%22100%22 cy=%22150%22 rx=%2240%22 ry=%2260%22/%3E%3Cellipse cx=%22100%22 cy=%22150%22 rx=%2265%22 ry=%2295%22/%3E%3Cellipse cx=%22100%22 cy=%22150%22 rx=%2290%22 ry=%22130%22/%3E%3C/g%3E%3C/svg%3E"); } .edd-visual--spices::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22300%22 viewBox=%220 0 200 300%22%3E%3Cg stroke=%22%23C8A46B%22 fill=%22none%22 stroke-width=%221%22 stroke-opacity=%22.35%22%3E%3Cpath d=%22M30 240 L140 70%22/%3E%3Cpath d=%22M42 248 L152 78%22/%3E%3Cpath d=%22M80 260 L170 120%22/%3E%3Cpath d=%22M90 266 L180 126%22/%3E%3Ccircle cx=%2260%22 cy=%2290%22 r=%224%22/%3E%3Ccircle cx=%22150%22 cy=%22220%22 r=%224%22/%3E%3Ccircle cx=%22120%22 cy=%2240%22 r=%223%22/%3E%3C/g%3E%3C/svg%3E"); } .edd-visual--vanilla::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22300%22 viewBox=%220 0 200 300%22%3E%3Cg fill=%22none%22 stroke=%22%237A5C2E%22 stroke-opacity=%22.22%22 stroke-width=%221%22%3E%3Cellipse cx=%22100%22 cy=%22150%22 rx=%2240%22 ry=%2260%22/%3E%3Cellipse cx=%22100%22 cy=%22150%22 rx=%2265%22 ry=%2295%22/%3E%3Cellipse cx=%22100%22 cy=%22150%22 rx=%2290%22 ry=%22130%22/%3E%3C/g%3E%3C/svg%3E"); } .edd-visual--gourmand::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22300%22 viewBox=%220 0 200 300%22%3E%3Cg stroke=%22%23C8A46B%22 fill=%22none%22 stroke-width=%221%22 stroke-opacity=%22.35%22%3E%3Ccircle cx=%2260%22 cy=%2290%22 r=%2226%22/%3E%3Ccircle cx=%22140%22 cy=%22170%22 r=%2216%22/%3E%3Ccircle cx=%2280%22 cy=%22230%22 r=%2210%22/%3E%3Ccircle cx=%22150%22 cy=%2260%22 r=%227%22/%3E%3C/g%3E%3C/svg%3E"); } .edd-visual--patchouli::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22300%22 viewBox=%220 0 200 300%22%3E%3Cg stroke=%22%23C8A46B%22 fill=%22none%22 stroke-width=%221%22 stroke-opacity=%22.22%22%3E%3Cpath d=%22M-10 10 C 60 -4, 140 26, 210 6%22/%3E%3Cpath d=%22M-10 28 C 60 14, 140 44, 210 24%22/%3E%3Cpath d=%22M-10 46 C 60 32, 140 62, 210 42%22/%3E%3Cpath d=%22M-10 64 C 60 50, 140 80, 210 60%22/%3E%3Cpath d=%22M-10 82 C 60 68, 140 98, 210 78%22/%3E%3Cpath d=%22M-10 100 C 60 86, 140 116, 210 96%22/%3E%3Cpath d=%22M-10 118 C 60 104, 140 134, 210 114%22/%3E%3Cpath d=%22M-10 136 C 60 122, 140 152, 210 132%22/%3E%3Cpath d=%22M-10 154 C 60 140, 140 170, 210 150%22/%3E%3Cpath d=%22M-10 172 C 60 158, 140 188, 210 168%22/%3E%3Cpath d=%22M-10 190 C 60 176, 140 206, 210 186%22/%3E%3Cpath d=%22M-10 208 C 60 194, 140 224, 210 204%22/%3E%3Cpath d=%22M-10 226 C 60 212, 140 242, 210 222%22/%3E%3Cpath d=%22M-10 244 C 60 230, 140 260, 210 240%22/%3E%3Cpath d=%22M-10 262 C 60 248, 140 278, 210 258%22/%3E%3Cpath d=%22M-10 280 C 60 266, 140 296, 210 276%22/%3E%3Cpath d=%22M-10 298 C 60 284, 140 314, 210 294%22/%3E%3C/g%3E%3C/svg%3E"); } .edd-visual--story::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22300%22 viewBox=%220 0 200 300%22%3E%3Cg stroke=%22%23C8A46B%22 fill=%22none%22 stroke-width=%221%22 stroke-opacity=%22.38%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M40 260 C 60 180, 50 120, 90 60%22/%3E%3Cpath d=%22M70 270 C 100 200, 80 150, 130 90%22/%3E%3Cpath d=%22M110 265 C 120 210, 150 170, 160 110%22/%3E%3Cpath d=%22M30 200 C 70 170, 90 150, 100 120%22/%3E%3C/g%3E%3C/svg%3E"); } /* How to choose */ .edd-steps { display: grid; grid-template-columns: 1fr; gap: 2rem; list-style: none; margin: 0; padding: 0; counter-reset: none; } @media (min-width: 820px) { .edd-steps { grid-template-columns: repeat(3, 1fr); gap: 3rem; } } .edd-steps li { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--gold); } .edd-steps__n { display: block; font-family: var(--wp--preset--font-family--display); font-size: 3rem; line-height: 1; color: var(--wp--preset--color--gold-dark); margin-bottom: .75rem; } .edd-steps h3 { margin: 0 0 .5rem; font-size: 1.6rem; } .edd-steps p { margin: 0; color: var(--wp--preset--color--muted); } /* Scent timeline on the product page */ .edd-tl { list-style: none; margin: .5rem 0 0; padding: 0 0 0 1.25rem; border-left: 1px solid var(--wp--preset--color--gold); display: grid; gap: 1.1rem; } .edd-tl__step { position: relative; display: grid; gap: .15rem; } .edd-tl__step::before { content: ""; position: absolute; left: calc(-1.25rem - 5px); top: .45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--ivory); border: 1px solid var(--wp--preset--color--gold-dark); } .edd-tl__step:last-child::before { background: var(--wp--preset--color--gold-dark); } .edd-tl__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); } .edd-tl__notes { font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; line-height: 1.3; } .single-product .wp-block-woocommerce-product-image-gallery img, .single-product .woocommerce-product-gallery img { background: #2a1e17; } /* Drop-down menus */ .edd-header2 .wp-block-navigation__submenu-container { background: var(--wp--preset--color--ivory) !important; border: 1px solid rgba(176, 141, 87, .45) !important; padding: .75rem 0 !important; min-width: 220px !important; box-shadow: 0 18px 40px rgba(28, 26, 25, .08); } .edd-header2 .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem 1.25rem !important; text-transform: none; letter-spacing: .02em; font-size: var(--wp--preset--font-size--sm); } .edd-header2 .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--sand); text-decoration: none; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding: .25rem 0 .75rem 1rem !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.25rem; } /* Gentle reveal on scroll (only when JS ran and motion is allowed) */ @media (prefers-reduced-motion: no-preference) { .edd-js .edd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; } .edd-js .edd-reveal.is-in { opacity: 1; transform: none; } } /* ===================================================================== v2.2 — header with mega menu + editorial footer ===================================================================== */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } /* Header */ .edd-header3 { position: sticky; top: 0; z-index: 60; background: var(--wp--preset--color--ivory); border-bottom: 1px solid rgba(176, 141, 87, .35); } .admin-bar .edd-header3 { top: 32px; } @media (max-width: 782px) { .admin-bar .edd-header3 { top: 46px; } } .edd-header3 .edd-announce { transition: margin .3s ease, padding .3s ease, max-height .3s ease; max-height: 3rem; overflow: hidden; } .edd-header3.is-scrolled .edd-announce { max-height: 0; padding-top: 0; padding-bottom: 0; } .edd-header3__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; max-width: 1320px; margin: 0 auto; padding: 1.1rem clamp(1rem, 4vw, 2.5rem); transition: padding .3s ease; } .edd-header3.is-scrolled .edd-header3__bar { padding-top: .6rem; padding-bottom: .6rem; } .edd-header3__bar > * { margin-block: 0 !important; } .edd-header3__brand { justify-self: center; margin: 0; } .edd-header3__brand a { text-decoration: none; white-space: nowrap; font-size: clamp(1.05rem, 2.4vw, 1.9rem); letter-spacing: .22em; } .edd-header3__tools { justify-self: end; align-items: center; } .edd-header3__tools > * { margin: 0 !important; display: flex; align-items: center; } .edd-nav { display: flex; align-items: center; gap: 1.75rem; justify-self: start; } .edd-nav__toggle, .edd-nav__link { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0; background: none; border: 0; color: var(--wp--preset--color--charcoal); font: inherit; font-size: var(--wp--preset--font-size--xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .edd-nav__link, .edd-nav__label { position: relative; } .edd-nav__link::after, .edd-nav__label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--wp--preset--color--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .edd-nav__link:hover::after, .edd-nav__toggle:hover .edd-nav__label::after, .edd-nav__toggle[aria-expanded="true"] .edd-nav__label::after { transform: scaleX(1); } .edd-burger { display: none; width: 22px; height: 12px; position: relative; } .edd-burger span { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .3s ease, top .3s ease; } .edd-burger span:first-child { top: 0; } .edd-burger span:last-child { top: 11px; } .edd-nav__toggle[aria-expanded="true"] .edd-burger span:first-child { top: 6px; transform: rotate(45deg); } .edd-nav__toggle[aria-expanded="true"] .edd-burger span:last-child { top: 6px; transform: rotate(-45deg); } @media (max-width: 899px) { .edd-nav__link, .edd-nav__label { display: none; } .edd-burger { display: block; } .edd-nav__toggle { min-width: 44px; justify-content: center; } } .edd-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--wp--preset--color--charcoal); font: inherit; font-size: var(--wp--preset--font-size--xs); letter-spacing: .14em; text-decoration: none; cursor: pointer; } @media (max-width: 480px) { .edd-lang2 { display: none !important; } } /* Mega menu */ .edd-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--wp--preset--color--ivory); border-top: 1px solid rgba(176, 141, 87, .35); border-bottom: 1px solid rgba(176, 141, 87, .35); box-shadow: 0 30px 60px rgba(28, 26, 25, .10); } .edd-mega[hidden] { display: none; } .edd-mega__inner { max-width: 1320px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2.5rem) 2.5rem; } .edd-mega__top { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; } .edd-search { flex: 1; display: flex; border-bottom: 1px solid var(--wp--preset--color--charcoal); max-width: 560px; } .edd-search input[type="search"] { flex: 1; min-height: 48px; border: 0; background: transparent; font: inherit; font-family: var(--wp--preset--font-family--display); font-size: 1.4rem; color: var(--wp--preset--color--charcoal); } .edd-search input[type="search"]::placeholder { color: var(--wp--preset--color--muted); } .edd-search button { min-height: 48px; padding: 0 0 0 1rem; background: none; border: 0; font: inherit; font-size: var(--wp--preset--font-size--xs); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; color: var(--wp--preset--color--burgundy); } .edd-mega__close { margin-left: auto; min-width: 44px; min-height: 44px; background: none; border: 1px solid rgba(94, 85, 77, .4); font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--wp--preset--color--charcoal); } .edd-mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 2.5rem; } .edd-mega__h { margin: 0 0 1rem; font-family: var(--wp--preset--font-family--body); font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); } .edd-mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; } .edd-mega__col a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 40px; padding: .35rem 0; font-family: var(--wp--preset--font-family--display); font-size: 1.45rem; line-height: 1.2; text-decoration: none; color: var(--wp--preset--color--charcoal); border-bottom: 1px solid transparent; } .edd-mega__col a:hover { border-bottom-color: var(--wp--preset--color--gold); } .edd-mega__n { font-family: var(--wp--preset--font-family--body); font-size: .75rem; letter-spacing: .1em; color: var(--wp--preset--color--muted); } .edd-mega__feature { position: relative; display: block; min-height: 260px; text-decoration: none; overflow: hidden; } .edd-mega__feature .edd-visual { position: absolute; inset: 0; } .edd-mega__feature-text { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; display: grid; gap: .4rem; } .edd-mega__feature .edd-eyebrow { color: var(--wp--preset--color--gold-light); } .edd-mega__feature-title { font-family: var(--wp--preset--font-family--display); font-size: 1.9rem; line-height: 1.1; color: var(--wp--preset--color--ivory); } @media (max-width: 899px) { .edd-mega { position: fixed; top: 0; bottom: 0; overflow-y: auto; box-shadow: none; border: 0; z-index: 100; } .admin-bar .edd-mega { top: 46px; } .edd-mega__inner { padding-top: 1.25rem; } .edd-mega__cols { grid-template-columns: 1fr; gap: 2rem; } .edd-mega__feature { min-height: 200px; } body.edd-menu-open { overflow: hidden; } } @media (min-width: 900px) { .edd-mega__close { display: none; } } /* Footer v2.2 */ .edd-footer2 { margin-top: 0 !important; } .edd-fband { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--sand); } .edd-fband__inner { max-width: 1320px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem); display: grid; gap: 2rem; align-items: end; } @media (min-width: 900px) { .edd-fband__inner { grid-template-columns: 1.4fr 1fr; } } .edd-fband .edd-eyebrow { color: var(--wp--preset--color--gold-light); } .edd-fband__title { margin: .5rem 0 0; color: var(--wp--preset--color--ivory); font-size: var(--wp--preset--font-size--xxl); line-height: 1.05; max-width: 16ch; } .edd-fband__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; } @media (min-width: 900px) { .edd-fband__actions { justify-content: flex-end; } } .edd-btn--light { background: var(--wp--preset--color--ivory); color: var(--wp--preset--color--charcoal) !important; border-color: var(--wp--preset--color--ivory); } .edd-btn--light:hover { background: var(--wp--preset--color--gold-light); border-color: var(--wp--preset--color--gold-light); } .edd-link--light { color: var(--wp--preset--color--ivory) !important; } .edd-fmain { background: var(--wp--preset--color--brown); color: var(--wp--preset--color--sand); } .edd-fmain__inner { max-width: 1320px; margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem) 2rem; display: grid; gap: 3rem; } @media (min-width: 1000px) { .edd-fmain__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 4rem; } } .edd-fbrand__name { margin: 0 0 1rem; font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--ivory); } .edd-fbrand__text { margin: 0 0 1.25rem; font-size: var(--wp--preset--font-size--sm); max-width: 36ch; } .edd-fpromise { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .edd-fpromise li { padding: .35rem .8rem; border: 1px solid rgba(200, 164, 107, .5); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--gold-light); } .edd-flang { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: 0; font-size: var(--wp--preset--font-size--sm); } .edd-flang__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-right: .25rem; } .edd-flang a { display: inline-flex; align-items: center; min-height: 44px; color: var(--wp--preset--color--sand) !important; text-decoration: none; } .edd-flang a[aria-current="true"] { color: var(--wp--preset--color--gold-light) !important; text-decoration: underline; text-underline-offset: 5px; } .edd-fcols { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 760px) { .edd-fcols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } } .edd-fcol { border-bottom: 1px solid rgba(200, 164, 107, .3); } @media (min-width: 760px) { .edd-fcol { border: 0; } } .edd-fcol__title { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--gold-light); } .edd-fcol__title::-webkit-details-marker { display: none; } .edd-fcol__title::after { content: "+"; font-size: 1.1rem; letter-spacing: 0; } .edd-fcol[open] .edd-fcol__title::after { content: "–"; } @media (min-width: 760px) { .edd-fcol__title { cursor: default; pointer-events: none; min-height: 0; margin-bottom: 1rem; } .edd-fcol__title::after { display: none; } } .edd-fcol ul { list-style: none; margin: 0; padding: 0 0 1rem; display: grid; gap: .1rem; } .edd-fcol a { display: inline-flex; align-items: center; min-height: 36px; color: var(--wp--preset--color--sand) !important; text-decoration: none; font-size: var(--wp--preset--font-size--sm); } .edd-fcol a:hover { color: var(--wp--preset--color--ivory) !important; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--wp--preset--color--gold); } .edd-wordmark { margin: 0; padding: 0 clamp(1rem, 4vw, 2.5rem); background: var(--wp--preset--color--brown); font-family: var(--wp--preset--font-family--display); font-size: clamp(3rem, 13.5vw, 13rem); line-height: .85; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; color: rgba(200, 164, 107, .16); text-align: center; user-select: none; } .edd-fbottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 2rem; padding: 1.25rem clamp(1rem, 4vw, 2.5rem); background: var(--wp--preset--color--brown); border-top: 1px solid rgba(200, 164, 107, .3); color: var(--wp--preset--color--sand); font-size: .8125rem; } .edd-fbottom p { margin: 0; } .edd-totop { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--wp--preset--color--sand) !important; text-decoration: none; letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; } .edd-totop:hover { color: var(--wp--preset--color--gold-light) !important; } .edd-footer2 :where(a, button, summary):focus-visible, .edd-fband :where(a):focus-visible { outline-color: var(--wp--preset--color--gold-light); box-shadow: none; } .edd-footer2 > *, .edd-header3 > * { margin-block: 0 !important; } @media (max-width: 480px) { .edd-header3__bar { gap: .25rem; padding-left: .75rem; padding-right: .5rem; } .edd-header3__brand a { font-size: 1rem; letter-spacing: .12em; } .edd-header3__tools { gap: 0 !important; min-width: 0; } .edd-header3__tools .wc-block-mini-cart__button, .edd-header3__tools .wc-block-customer-account a { padding: 0 !important; min-width: 40px; min-height: 44px; justify-content: center; } .edd-icon-btn { min-width: 40px; } } /* ===================================================================== v2.3 — compact scent finder (« Find your scent by note ») ===================================================================== */ .edd-finder2__bar { position: sticky; top: var(--edd-sticky, 72px); z-index: 20; display: grid; gap: .75rem; margin: 0 calc(-1 * clamp(1rem, 4vw, 2.5rem)) 2rem; padding: 1rem clamp(1rem, 4vw, 2.5rem); background: rgba(234, 225, 210, .96); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(176, 141, 87, .35); } .admin-bar .edd-finder2__bar { top: calc(var(--edd-sticky, 72px) + 32px); } .edd-finder2__bar .edd-notes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .edd-finder2__bar .edd-notes::-webkit-scrollbar { display: none; } @media (min-width: 1100px) { .edd-finder2__bar .edd-notes { flex-wrap: wrap; overflow: visible; } } .edd-note { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; border-radius: 999px; padding: .45rem 1rem; background: var(--wp--preset--color--ivory); } .edd-note__n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: 999px; background: var(--wp--preset--color--sand); font-size: .75rem; color: var(--wp--preset--color--muted); } .edd-note[aria-pressed="true"] .edd-note__n { background: rgba(246, 241, 232, .18); color: var(--wp--preset--color--ivory); } .edd-note[aria-pressed="true"]::before { content: none; } .edd-note[aria-disabled="true"] { opacity: .4; cursor: not-allowed; } .edd-finder2__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; } .edd-pgrid2 { display: grid; grid-template-columns: 1fr; gap: 1rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 700px) { .edd-pgrid2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .edd-pgrid2 { grid-template-columns: repeat(3, 1fr); } } .edd-pc { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.1rem; align-items: start; padding: 1.4rem; background: var(--wp--preset--color--ivory); border: 1px solid rgba(176, 141, 87, .35); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .edd-pc[hidden] { display: none; } .edd-pc:hover, .edd-pc:focus-within { border-color: var(--wp--preset--color--gold-dark); box-shadow: 0 14px 30px rgba(28, 26, 25, .07); } .edd-pc__swatch.edd-visual { width: 56px; height: 56px; min-height: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); } .edd-pc__swatch.edd-visual::after { background-size: 160%; } .edd-pc__body { display: grid; gap: .3rem; min-width: 0; } .edd-pc__name { margin: 0; font-size: 1.6rem; line-height: 1.1; } .edd-pc__name a { text-decoration: none; } .edd-pc__name a::after { content: ""; position: absolute; inset: 0; } .edd-pc__style { margin: 0 0 .4rem; font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.1rem; line-height: 1.3; color: var(--wp--preset--color--muted); } .edd-pc__notes { display: grid; grid-template-columns: 3.4rem 1fr; gap: .2rem .5rem; margin: 0; font-size: .875rem; line-height: 1.45; } .edd-pc__notes dt { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--gold-dark); padding-top: .15em; } .edd-pc__notes dd { margin: 0; } .edd-n { transition: background-color .2s ease, color .2s ease; } .edd-n.is-hit { background: rgba(176, 141, 87, .28); color: var(--wp--preset--color--charcoal); font-weight: 500; padding: 0 .2em; box-decoration-break: clone; } .edd-pc__more { margin-top: .6rem; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--burgundy); } .edd-pc:hover .edd-pc__more { text-decoration: underline; text-underline-offset: 5px; } .edd-finder2__empty { margin: 1rem 0 0; padding: 1.5rem; border: 1px dashed rgba(94, 85, 77, .5); text-align: center; color: var(--wp--preset--color--muted); } /* The template-part wrapper is the element that must stick (a sticky child of a same-height wrapper never sticks). */ .wp-block-template-part:has(> .edd-header3) { position: sticky; top: 0; z-index: 60; } .admin-bar .wp-block-template-part:has(> .edd-header3) { top: 32px; } @media (max-width: 782px) { .admin-bar .wp-block-template-part:has(> .edd-header3) { top: 46px; } } @media (max-width: 600px) { .admin-bar .wp-block-template-part:has(> .edd-header3) { top: 0; } } .edd-header3, .admin-bar .edd-header3 { position: relative; top: auto; } @media (max-width: 782px) { .admin-bar .edd-finder2__bar { top: calc(var(--edd-sticky, 72px) + 46px); } } @media (max-width: 600px) { .admin-bar .edd-finder2__bar { top: var(--edd-sticky, 72px); } } @media (max-width: 420px) { .edd-search-open { display: none !important; } .edd-header3__brand a { font-size: .95rem; letter-spacing: .1em; } .edd-finder2__bar { padding-top: .75rem; padding-bottom: .75rem; gap: .5rem; } } .edd-finder2__bar { background: var(--wp--preset--color--sand); backdrop-filter: none; box-shadow: 0 -24px 0 var(--wp--preset--color--sand); } /* ===================================================================== v2.4 — language switch with flags + favourites ===================================================================== */ .edd-langsw { display: inline-flex; align-items: center; margin-right: .25rem; border: 1px solid rgba(176, 141, 87, .45); border-radius: 999px; padding: 2px; } .edd-langsw__item { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .7rem; border-radius: 999px; font-size: .75rem; font-weight: 500; letter-spacing: .12em; color: var(--wp--preset--color--charcoal); text-decoration: none; } .edd-langsw__item.is-current { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--ivory); } .edd-langsw__item:not(.is-current):hover { background: var(--wp--preset--color--sand); } .edd-flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(28, 26, 25, .15); flex: none; } @media (max-width: 600px) { .edd-langsw { border: 0; padding: 0; margin-right: 0; } .edd-langsw__item.is-current { display: none; } .edd-langsw__item { padding: 0 .35rem; min-height: 44px; min-width: 40px; justify-content: center; } .edd-langsw__item span:not(.screen-reader-text) { display: none; } } .edd-favs-open { position: relative; } .edd-favs-count { position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--wp--preset--color--burgundy); color: var(--wp--preset--color--ivory); font-size: 10px; line-height: 16px; text-align: center; letter-spacing: 0; } .edd-favs-count[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .edd-favs-open.is-bump svg { animation: edd-bump .45s ease; } @keyframes edd-bump { 30% { transform: scale(1.25); } 60% { transform: scale(.92); } } } /* Heart toggles */ .edd-fav { position: absolute; top: .9rem; right: .9rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wp--preset--color--muted); cursor: pointer; } .edd-fav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: fill .2s ease, transform .2s ease; } .edd-fav:hover { color: var(--wp--preset--color--burgundy); background: var(--wp--preset--color--sand); } .edd-fav[aria-pressed="true"] { color: var(--wp--preset--color--burgundy); } .edd-fav[aria-pressed="true"] svg { fill: var(--wp--preset--color--burgundy); } .edd-pc .edd-pc__name { padding-right: 2.5rem; } .edd-fav--wide { position: static; width: auto; height: auto; min-height: 48px; gap: .6rem; padding: .7rem 1.4rem; margin: .5rem 0 1rem; border: 1px solid rgba(94, 85, 77, .45); border-radius: 0; background: transparent; color: var(--wp--preset--color--charcoal); font: inherit; font-size: var(--wp--preset--font-size--xs); letter-spacing: .14em; text-transform: uppercase; } .edd-fav--wide:hover { border-color: var(--wp--preset--color--burgundy); } .edd-fav--wide[aria-pressed="true"] { border-color: var(--wp--preset--color--burgundy); color: var(--wp--preset--color--burgundy); } /* Favourites drawer */ .edd-favs { position: fixed; inset: 0; z-index: 200; background: rgba(28, 26, 25, .45); display: flex; justify-content: flex-end; } .edd-favs[hidden] { display: none; } .edd-favs__panel { width: min(440px, 100%); height: 100%; overflow-y: auto; background: var(--wp--preset--color--ivory); padding: 1.5rem clamp(1.25rem, 4vw, 2rem) 2rem; display: flex; flex-direction: column; gap: 1.25rem; box-shadow: -20px 0 60px rgba(28, 26, 25, .15); } .admin-bar .edd-favs__panel { padding-top: calc(1.5rem + 32px); } .edd-favs__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(176, 141, 87, .45); } .edd-favs__title { margin: 0; font-size: 2rem; } .edd-favs__close { min-width: 44px; min-height: 44px; background: none; border: 1px solid rgba(94, 85, 77, .4); font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--wp--preset--color--charcoal); } .edd-favs__empty { margin: 0; color: var(--wp--preset--color--muted); } .edd-favs__empty[hidden] { display: none; } .edd-favs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; } .edd-favs__item { display: grid; grid-template-columns: 48px 1fr auto; gap: 1rem; align-items: center; padding: .9rem; border: 1px solid rgba(176, 141, 87, .35); background: #fbf8f2; } .edd-favs__item .edd-pc__swatch.edd-visual { width: 48px; height: 48px; } .edd-favs__text { display: grid; gap: .15rem; min-width: 0; } .edd-favs__name { font-family: var(--wp--preset--font-family--display); font-size: 1.35rem; line-height: 1.15; text-decoration: none; } .edd-favs__name:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); } .edd-favs__style { font-size: .8125rem; color: var(--wp--preset--color--muted); } .edd-favs__remove { min-height: 44px; padding: 0 .25rem; background: none; border: 0; font: inherit; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: var(--wp--preset--color--burgundy); cursor: pointer; } .edd-favs__foot { margin-top: auto; display: grid; gap: .75rem; padding-top: 1rem; } .edd-favs__foot .edd-btn { justify-content: center; } .edd-favs__note { margin: 0; font-size: .75rem; color: var(--wp--preset--color--muted); } body.edd-favs-open { overflow: hidden; } .edd-favs-count { top: 4px; right: 0; } /* v2.4.2 — header fits every width */ .edd-nav__link, .edd-nav__toggle { white-space: nowrap; } @media (max-width: 1180px) { .edd-nav__link[href="/#edd-story"] { display: none; } } @media (max-width: 1020px) and (min-width: 900px) { .edd-nav { gap: 1.1rem; } .edd-langsw__item span:not(.screen-reader-text) { display: none; } .edd-langsw__item { padding: 0 .5rem; } } @media (max-width: 899px) { .edd-header3__bar { grid-template-columns: auto minmax(0, 1fr) auto; } .edd-header3__brand { justify-self: center; min-width: 0; } .edd-header3__brand a { display: block; overflow: hidden; text-overflow: clip; } } @media (max-width: 360px) { .edd-header3__brand a { font-size: .8rem; letter-spacing: .06em; } .edd-header3__bar { padding-left: .5rem; padding-right: .25rem; } .edd-header3__tools .wp-block-woocommerce-customer-account { display: none !important; } } /* v2.5.0 — coming-soon page (Eau De Dubai) */ .edd-soon { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse at 50% 35%, #3B2A20 0%, #1C1A19 70%); color: #F6F1E8; padding: 2rem 1rem; margin: 0 !important; } .edd-soon > * { margin-block: 0 !important; } .edd-soon__eyebrow { font-size: .8125rem; letter-spacing: .32em; text-transform: uppercase; color: #C8A46B; } .edd-soon__name { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(2.75rem, 11vw, 6.5rem); letter-spacing: .02em; line-height: 1.05; color: #F6F1E8 !important; margin-top: 1.25rem !important; } .edd-soon__rule { width: 72px; border: 0; border-top: 1px solid #B08D57 !important; margin: 2rem auto !important; opacity: 1; } .edd-soon__line { font-size: 1rem; letter-spacing: .04em; color: #EAE1D2; max-width: 32ch; } body:has(.edd-soon) { background: #1C1A19; } /* ===================================================================== v2.5.2 — shop grid (eaudd.com/shop and every product archive) Currently ALSO live in Appearance > Customize > Additional CSS so the client could see it before this theme is uploaded. Once this version is on the server, CLEAR the Additional CSS box so there is one copy. Includes the portrait-image fix that used to live in a v2.5.1 block. ===================================================================== */ /* ===================================================================== EDD PERFUME — PRODUCT GRID ("The Index", final) /shop/ plus product category and product tag archives. v1.0 — 2026-10-18 HOW TO INSTALL Appearance > Customize > Additional CSS. Select everything already in that box and replace it with this file. The box currently holds only the loop-image fix; section 2 below reproduces it, so nothing is lost. HOW TO REVERT Clear the box. That is safe: the same image fix also ships in the theme itself (assets/css/edd.css, lines 619-648), so the bottles do not go back to being cropped when this is removed. WHAT THIS IS CSS only. No PHP, no JavaScript, no plugins, no template edits, no new markup. Text is injected only with content: on ::before, and only to restate a fact WooCommerce already prints in the class attribute. No invented review stars, no "bestseller", no delivery promises. HOW IT IS SCOPED (constraint: never touch the mini-cart) Every rule begins with body:is(.archive,.woocommerce-shop).woocommerce and then a product-loop container. The header mini-cart and the cart line items reuse .wc-block-components-product-image, but they are not inside a loop container and those pages are not archives, so they are never matched. The single-product page keeps its own burgundy button. CONTENTS 1 Local tokens (measured contrast noted) 2 The portrait-image fix, preserved 3 The grid: 2-up, then 3-up at 1000px 4 The card as a ruled catalogue entry 5 Typography: serif name over a small sans price 6 Availability, stated in words 7 The action: burgundy only where you can buy 8 The lone card at the end of a grid 9 Result count and the sort control 10 Pagination 11 Focus, and an optional localisation hook ===================================================================== */ /* ===================================================================== 1 — LOCAL TOKENS These read the theme's real presets, with the real hex as fallback. Measured against ivory #F6F1E8 (all values recomputed, not assumed): charcoal #1C1A19 15.4:1 name, "Sold out" label muted #5E554D 6.5:1 price, secondary text gold-dark #7A5C2E 5.5:1 eyebrow, chevron, focus ring burgundy #6E1E2B 9.9:1 buy button (ivory text on burgundy) Note for the record: the brief quoted gold-dark as #9A6B1F, which would have measured 4.15:1 and failed AA for small text. The theme's actual gold-dark is #7A5C2E and passes, so no new colour is invented here — every value below is a house token. ===================================================================== */ body:is(.archive, .woocommerce-shop).woocommerce { --edd-ink: var(--wp--preset--color--charcoal, #1C1A19); --edd-ink-soft: var(--wp--preset--color--muted, #5E554D); --edd-gold: var(--wp--preset--color--gold, #B08D57); --edd-gold-dark: var(--wp--preset--color--gold-dark, #7A5C2E); --edd-burgundy: var(--wp--preset--color--burgundy, #6E1E2B); --edd-ivory: var(--wp--preset--color--ivory, #F6F1E8); --edd-display: var(--wp--preset--font-family--display, "Cormorant Garamond", serif); --edd-body: var(--wp--preset--font-family--body, Jost, sans-serif); /* the hairline the theme already uses on .edd-pc and .edd-favs__item */ --edd-rule: rgba(176, 141, 87, 0.35); } /* ===================================================================== 2 — THE PORTRAIT-IMAGE FIX, PRESERVED The product block writes aspect-ratio:1/1 and object-fit:cover in an INLINE style on each loop . An author declaration marked !important is the only thing that beats a non-important inline style, which is why every line here carries it. The ratio is pinned on the itself (1071/1400, the real media ratio) so every card in a row gets an identical image height. object-fit is contain and never cover: the Discovery Set art is genuinely square (420x420) and the Gift Card art is a phone mockup, and cover would slice their sides off. The sand background is what makes those two letterbox onto the same field as the fourteen bottle shots instead of reading as holes. This is the theme's own fix, with two deliberate differences: - the bare .wp-block-woocommerce-product-image img selector is NOT repeated here, because unanchored it would also hit the single product page; the theme keeps that one, this file stays in loops. - ul.products (the classic loop) is added, so a category page that ever falls back to it behaves the same. Do not delete this section. ===================================================================== */ /* a. Let the wrapper and its link shrink-wrap the image. Purely permissive: it relaxes any ratio or height the block puts on the box so a now-taller image cannot be clipped. */ :is(.wc-block-product-template, .wp-block-post-template, .wc-block-grid__products, ul.products) :is(.wc-block-components-product-image, .wc-block-grid__product-image), :is(.wc-block-product-template, .wp-block-post-template, .wc-block-grid__products, ul.products) :is(.wc-block-components-product-image, .wc-block-grid__product-image) > a { aspect-ratio: auto !important; height: auto !important; overflow: visible !important; } /* b. The image: the whole bottle, never cropped. */ :is(.wc-block-product-template, .wp-block-post-template, .wc-block-grid__products, ul.products) :is(.wc-block-components-product-image, .wc-block-grid__product-image) img, :is(.wc-block-product-template, .wp-block-post-template, .wc-block-grid__products, ul.products) :is(.wc-block-components-product-image, .wc-block-grid__product-image) .woocommerce-placeholder, :is(.wc-block-product-template, .wp-block-post-template, .wc-block-grid__products, ul.products) img.attachment-woocommerce_thumbnail { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: 1071 / 1400 !important; object-fit: contain !important; object-position: center center !important; background: var(--wp--preset--color--sand, #EAE1D2); } /* ===================================================================== 3 — THE GRID Two columns on phones and tablets, three from 1000px — the same breakpoint the house already uses for .edd-pgrid, so /shop/ agrees with every other product grid on the site, and the bottle photography keeps its full measured width (~397px at 1440px, against 399px now). The column gap is tightened and the row gap is opened wide. Vertical air is what makes a grid read as a catalogue rather than a wall of merchandise, and it costs no horizontal space: the photograph is the only asset this house owns, so nothing is taken away from it. !important is here because the block prints its own column count (through a generated layout class, and in some versions the custom property below), and that has to be ours for section 8 to be true. ===================================================================== */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) { display: grid !important; --wc-product-template-columns: 2 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: clamp(0.75rem, 2.5vw, 1.5rem) !important; row-gap: clamp(2.25rem, 5vw, 4rem) !important; align-items: stretch; margin: 0 !important; padding: 0 !important; list-style: none !important; } @media (min-width: 1000px) { body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) { --wc-product-template-columns: 3 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* WooCommerce's classic stylesheet hangs a float clearfix on ul.products::before/::after. In a grid container an empty pseudo- element silently occupies a cell, which would break the row arithmetic in section 8. Nothing in this file uses them. */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products)::before, body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products)::after { content: none !important; display: none !important; } /* The classic loop and the legacy Products block size their items themselves (width:30.75%; float:left; margin-right:3.8%, or flex-basis:33%). Grid cancels the float but honours the width, which would leave a small card hugging the left of each cell. Reset it. */ body:is(.archive, .woocommerce-shop).woocommerce :is(ul.products, .wc-block-grid__products) > li { width: auto !important; max-width: none !important; min-width: 0; float: none !important; clear: none !important; flex: initial !important; } /* ===================================================================== 4 — THE CARD AS A RULED CATALOGUE ENTRY No box, no shadow, no border on three sides, no rounded corners (the house sets border-radius 0 on all commerce UI). One hairline above each card with air beneath it, so rows line up across the page like a printed index. The rule is the only ornament, and it is also the hover affordance: faint at rest, full gold-dark on hover or when anything inside it takes keyboard focus — the same pattern the theme already uses on .edd-card and .edd-pc. The card is a flex column so that section 7 can pin every action to the bottom: whatever the names do, the buttons in a row sit on one baseline. ===================================================================== */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li { display: flex !important; flex-direction: column !important; margin: 0 !important; padding: clamp(0.875rem, 1.8vw, 1.35rem) 0 0 !important; border: 0 !important; border-top: 1px solid var(--edd-rule) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; text-align: start; transition: border-top-color 0.25s ease; } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li:hover, body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li:focus-within { border-top-color: var(--edd-gold-dark) !important; } /* Card order: photograph, then the availability slot (section 6), then everything else in its natural order. Only the image wrapper has to be named for this to work; if the theme is ever re-grouped in the editor the slot simply falls to the foot of the card and still reads. */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li > * { order: 2; min-width: 0; } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li > :is(.wc-block-components-product-image, .wc-block-grid__product-image, .woocommerce-loop-product__link) { order: 0; margin: 0; } /* ===================================================================== 5 — TYPOGRAPHY: THE NAME LEADS, THE PRICE SUPPORTS Today a 20px serif name and a 17px sans price compete, and a heavy button wins over both. Here the name grows and the price becomes a small, tracked, tabular fact — so the price column reads as a column and the eye lands on the composition, not on sixteen identical slabs. ===================================================================== */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li :is(.wp-block-post-title, .wc-block-grid__product-title, .woocommerce-loop-product__title, .wc-block-components-product-name) { margin: 0 0 0.35rem; font-family: var(--edd-display); font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.45rem); font-weight: 500; line-height: 1.15; letter-spacing: 0.005em; text-wrap: balance; overflow-wrap: break-word; color: var(--edd-ink); } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li :is(.wp-block-post-title, .wc-block-grid__product-title, .wc-block-components-product-name) a { color: inherit; text-decoration: none; } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li :is(.wp-block-post-title, .wc-block-grid__product-title, .wc-block-components-product-name) a:hover { text-decoration: underline; text-decoration-color: var(--edd-gold); text-decoration-thickness: 1px; text-underline-offset: 5px; } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li :is(.wp-block-woocommerce-product-price, .wc-block-components-product-price, .wc-block-grid__product-price, .price) { margin: 0 0 0.9rem; font-family: var(--edd-body); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.06em; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--edd-ink-soft); } /* ===================================================================== 6 — AVAILABILITY, STATED IN WORDS Eight of the sixteen products on page one cannot be bought, and today the only difference is the word inside the button. WooCommerce already prints li.product.outofstock / .instock / .onbackorder, so this surfaces a fact that is in the DOM; it does not invent one. Every card reserves the same slot under the photograph, empty on an available card, so the names in a row stay on one baseline and the grid does not jump. Three independent signals, none of them colour alone, none of them behind a hover: 1. the word itself, 12px Jost caps, tracked, in full charcoal ink (15.4:1 on ivory) — it survives greyscale and colour blindness; 2. the button changes SHAPE, not hue (section 7); 3. the photograph is desaturated. On the photograph: filter only, never opacity. opacity would fade the image's own baked-in sand field and the CSS sand background behind it by different amounts and leave a visible lighter rectangle outlining every sold-out photo. filter applies to the element and its own background identically, so the two stay matched and there is no halo. And the treatment does NOT lift on hover. A phone has no hover, so restoring on hover would mean half the catalogue stays dimmed forever on mobile while reverting to "looks available" on a desktop at the exact moment a shopper is most engaged with it. It is kept mild instead — a paler plate in a catalogue, legible at all times, not an error state and not an obscured artwork. ===================================================================== */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li::before { content: ""; order: 1; display: block; min-height: 1.15em; margin: 0.85rem 0 0.5rem; font-family: var(--edd-body); font-size: 0.75rem; font-weight: 500; line-height: 1.15; letter-spacing: 0.18em; text-transform: uppercase; color: var(--edd-ink); } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li.outofstock::before { content: "Uitverkocht"; } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li.onbackorder::before { content: "In nabestelling"; } /* Signal 3: the plate recedes. No opacity, no hover reset. */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li.outofstock :is(.wc-block-components-product-image, .wc-block-grid__product-image) img { filter: saturate(0.55) brightness(1.03); } /* ===================================================================== 7 — THE ACTION: BURGUNDY ONLY WHERE YOU CAN BUY Sixteen identical filled burgundy buttons mean nothing, so the eight buyable bottles are invisible among them. After this there are eight, and a filled burgundy button anywhere in the grid means exactly one thing: this is for sale. The sold-out "Read more" becomes a quiet underlined text link — modelled on the house's existing quiet action (.edd-favs__remove), so it is not a new invention. The theme paints the loop button burgundy with !important at edd.css:169-176, so the demotion has to carry !important on background, colour, border and padding, at higher specificity, or it would silently do nothing. It does, and the hover state is restated too, so a sold-out link cannot flash a filled slab under the cursor. Touch targets stay at 44px. Focus rings are restated in section 11. ===================================================================== */ /* Pin every action to the foot of the card so a row shares one baseline. */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li :is(.wp-block-woocommerce-product-button, .wc-block-components-product-button, .wc-block-grid__product-add-to-cart) { order: 2; margin-top: auto; padding-top: 0.35rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; } /* 7a. Available: a refined burgundy block, sized to its words rather than stretched across the card. */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li:is(.instock, .onbackorder) :is(.wp-block-button__link, .wc-block-components-button:not(.is-link), a.button, button.button) { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; max-width: 100%; min-height: 44px; padding: 0.6rem clamp(0.85rem, 3vw, 1.4rem) !important; border: 1px solid var(--edd-burgundy) !important; border-radius: 0 !important; background: var(--edd-burgundy) !important; color: var(--edd-ivory) !important; font-family: var(--edd-body) !important; font-size: 0.8125rem !important; font-weight: 500; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; text-decoration: none !important; } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li:is(.instock, .onbackorder) :is(.wp-block-button__link, .wc-block-components-button:not(.is-link), a.button, button.button):hover { background: var(--edd-ink) !important; border-color: var(--edd-ink) !important; color: var(--edd-ivory) !important; } /* 7b. Sold out: the same link, a different SHAPE. No fill, no border box, a gold hairline under the words. The difference survives greyscale, so it is never carried by hue alone. */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li.outofstock :is(.wp-block-button__link, .wc-block-components-button:not(.is-link), a.button, button.button) { display: inline-flex !important; align-items: center; width: auto !important; max-width: 100%; min-height: 44px; padding: 0.6rem 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; background-color: transparent !important; color: var(--edd-ink) !important; font-family: var(--edd-body) !important; font-size: 0.75rem !important; font-weight: 500; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; text-decoration-line: underline !important; text-decoration-color: var(--edd-gold); text-decoration-thickness: 1px; text-underline-offset: 6px; } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li.outofstock :is(.wp-block-button__link, .wc-block-components-button:not(.is-link), a.button, button.button):hover { background: none !important; background-color: transparent !important; color: var(--edd-ink) !important; text-decoration-color: var(--edd-gold-dark); text-underline-offset: 4px; } /* 7c. After a successful add to cart, WooCommerce appends its own "View cart" link next to the button and toggles .loading / .added on the button itself. The wrapper above is a wrapping flex row, so the extra link sits beside the button instead of breaking the card; here it is given the same quiet voice. Nothing in this file uses ::after on a loop button, so WooCommerce's own spinner and tick are left intact. */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li a.added_to_cart { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--edd-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--edd-ink-soft); text-decoration-line: underline; text-decoration-color: var(--edd-gold); text-decoration-thickness: 1px; text-underline-offset: 6px; } /* ===================================================================== 8 — THE LONE CARD AT THE END OF A GRID Sixteen products in three columns leaves one card beside two empty cells, and page two holds a single stranded product. Both are the same condition: "the last card is also the first card of its row, so it is alone." At three columns that is :last-child:nth-child(3n+1) — item 16 is 3x5+1, and a sole item on page two is 3x0+1, so one selector covers both. At two columns it is :last-child:nth-child(odd). A trailing row of two is already balanced and is explicitly left alone, which is why the two-column rule is reset inside the three-column query before the three-column rule is armed. Pseudo-elements are not children, so the ::before in section 6 does not shift this counting. The lone card is centred in the middle column and capped, with its caption centred, so it reads as a single deliberate plate. It is NOT enlarged and carries no label: which product lands last is an accident of sort order, and treating it as a feature would be a claim the page cannot support. This is a safety net, not the cure. The cure is one setting — see the note at the foot of this file. ===================================================================== */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; max-width: min(100%, 24rem); text-align: center; } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li:last-child:nth-child(odd) :is(.wp-block-woocommerce-product-button, .wc-block-components-product-button, .wc-block-grid__product-add-to-cart) { justify-content: center; } @media (min-width: 1000px) { /* A trailing row of two at three columns is balanced: undo the two-column rule before arming the three-column one. */ body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; max-width: none; text-align: start; } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li:last-child:nth-child(odd) :is(.wp-block-woocommerce-product-button, .wc-block-components-product-button, .wc-block-grid__product-add-to-cart) { justify-content: flex-start; } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li:last-child:nth-child(3n + 1) { grid-column: 2 / 3; justify-self: center; max-width: min(100%, 26rem); text-align: center; } body:is(.archive, .woocommerce-shop).woocommerce :is(.wc-block-product-template, .wc-block-grid__products, ul.products) > li:last-child:nth-child(3n + 1) :is(.wp-block-woocommerce-product-button, .wc-block-components-product-button, .wc-block-grid__product-add-to-cart) { justify-content: center; } } /* ===================================================================== 9 — RESULT COUNT AND THE SORT CONTROL The count is real, indexable text, so it is styled rather than replaced: it becomes the page's eyebrow, in the house's uppercase gold-dark label voice (the same treatment as the product attribute table and .edd-pc__notes dt). The raw browser