/* * Esha Organics store pages (esha-store plugin). The approved design (owner, 8 Oct 2026): design/esha-design/ (four * mockups and README.md), CLAUDE.md §6. * - Colour: the eight tokens of the design, plus WhatsApp's green for its glyph (owner, 8 Oct 2026), are the only colour * codes in this file (overlays reuse their RGB values). Price blue on product prices only (inside .eo-price); offer * brown on the "Kits & deals" link only; WhatsApp green on the WhatsApp glyph only. * - Fills separate sections: sand → white → forest → sand → white → sage → ink. A hairline (box-shadow) only between two * white sections. No 1px borders except form inputs. * - Type: Bricolage Grotesque 800 for h1 / h2 and the wordmark (sentence case); Figtree 400–700 for everything else. * Eyebrows 12px / 600 capitals, .08em. * - Shape: 6px buttons, 8–10px tiles, 12–16px cards. Product photos are the store's own white-background photos on * white tiles (owner, 8 Oct 2026); on a white surface the tile gets a 1px inset hairline, the one hairline a box may * have. No blend modes anywhere. * Mobile-first; desktop from 1024px in a 1180px container. These pages load no Flatsome or WooCommerce CSS. */ /* Fonts, self-hosted: Google Fonts' latin files (Bricolage Grotesque at 800 with its optical sizes; Figtree narrowed to 400–700). */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/bricolage-grotesque-800-v9-latin.woff2') format('woff2'); } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/figtree-400-700-v9-latin.woff2') format('woff2'); } /* Until the fonts arrive, Arial (iPhone, desktops) or Roboto (Android) stand in, scaled to take the same space, so nothing moves when the swap happens: size-adjust = the width of the site's own text in the real font over the stand-in (measured in Chrome, 8 Oct 2026); ascent / descent from the font files, divided by it. */ @font-face { font-family: 'Bricolage fallback A'; font-weight: 800; font-display: swap; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 100%; ascent-override: 92.96%; descent-override: 26.99%; line-gap-override: 0%; } @font-face { font-family: 'Bricolage fallback R'; font-weight: 800; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 107.1%; ascent-override: 86.84%; descent-override: 25.21%; line-gap-override: 0%; } @font-face { font-family: 'Figtree fallback A'; font-weight: 400; font-display: swap; src: local('Arial'), local('ArialMT'); size-adjust: 99.4%; ascent-override: 95.55%; descent-override: 25.14%; line-gap-override: 0%; } @font-face { font-family: 'Figtree fallback A'; font-weight: 500; font-display: swap; src: local('Arial'), local('ArialMT'); size-adjust: 100.3%; ascent-override: 94.76%; descent-override: 24.94%; line-gap-override: 0%; } @font-face { font-family: 'Figtree fallback A'; font-weight: 600; font-display: swap; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 94.8%; ascent-override: 100.17%; descent-override: 26.36%; line-gap-override: 0%; } @font-face { font-family: 'Figtree fallback A'; font-weight: 700; font-display: swap; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 95.9%; ascent-override: 99.05%; descent-override: 26.07%; line-gap-override: 0%; } @font-face { font-family: 'Figtree fallback R'; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'); size-adjust: 100.4%; ascent-override: 94.58%; descent-override: 24.89%; line-gap-override: 0%; } @font-face { font-family: 'Figtree fallback R'; font-weight: 500; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'); size-adjust: 100.4%; ascent-override: 94.60%; descent-override: 24.90%; line-gap-override: 0%; } @font-face { font-family: 'Figtree fallback R'; font-weight: 600; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 100.7%; ascent-override: 94.35%; descent-override: 24.83%; line-gap-override: 0%; } @font-face { font-family: 'Figtree fallback R'; font-weight: 700; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 101.8%; ascent-override: 93.30%; descent-override: 24.55%; line-gap-override: 0%; } :root { --eo-sand: #FBF8F3; /* page ground (owner, 8 Oct 2026: lighter than the mockup's) */ --eo-white: #FFFFFF; /* cards, header, white sections */ --eo-ink: #15201A; /* text, the footer's ground */ --eo-muted: #5E6A63; /* secondary text */ --eo-forest: #1C4A38; /* every button, the forest band, the kit card */ --eo-sage: #E3EAE1; /* where there is no photo: the WhatsApp band, "Photo coming", quiet buttons and hovers */ --eo-price: #225EAE; /* prices only (the live site's own price blue) */ --eo-offer: #8A4B22; /* the "Kits & deals" link only */ --eo-wa: #25D366; /* the WhatsApp glyph only (owner, 8 Oct 2026) */ --eo-fire: #C2410C; /* "Popular" in the menu drawer, the checkout's bank transfer saving: deep orange (5.2:1 on white) … */ --eo-fire-glow: #FFB224; /* … and the bright band that sweeps through it */ /* The checkout's form fields (design/esha-checkout-design/, 8 Oct 2026): inputs are the one place for a border. */ --eo-input: #CBD3CE; /* a checkout field's 1px edge */ --eo-hint: #8A948E; /* placeholders; a payment method's empty dot */ --eo-error: #B3261E; /* a field's edge and message when it needs fixing (never a red background) */ --eo-line: rgba(21, 32, 26, .08); /* the hairline, always a box-shadow */ --eo-edge: rgba(21, 32, 26, .24); /* a form field's 1px edge (inputs are the one place for a border) */ --eo-on-dark: rgba(255, 255, 255, .84); /* secondary text on forest and ink */ --eo-on-dark-2: rgba(255, 255, 255, .66); /* quieter still: eyebrows, the footer */ --eo-fill: var(--eo-white); /* a quiet fill that stands out from its surface: white on sand, sand on white */ --eo-display: 'Bricolage Grotesque', 'Bricolage fallback A', 'Bricolage fallback R', Arial, sans-serif; --eo-body: 'Figtree', 'Figtree fallback A', 'Figtree fallback R', system-ui, -apple-system, 'Segoe UI', sans-serif; --eo-gutter: 16px; --eo-max: 1180px; --eo-sec: 36px; /* a section's own space, top and bottom */ --eo-space: 48px; /* between blocks on the pages that aren't built of sections (lists, cart, checkout…) */ --eo-ease: cubic-bezier(.2, .7, .2, 1); --eo-shadow: 0 12px 32px rgba(21, 32, 26, .14); } @media (min-width: 768px) { :root { --eo-gutter: 32px; } } @media (min-width: 1024px) { :root { --eo-sec: 72px; --eo-space: 72px; } } /* ---------- Base ---------- */ html { background: var(--eo-ink); } /* overscroll below the footer */ body.eo-store { margin: 0; background: var(--eo-sand); color: var(--eo-ink); font: 400 15px/1.5 var(--eo-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :where(.eo-store) *, :where(.eo-store) *::before, :where(.eo-store) *::after { box-sizing: border-box; } :where(.eo-store) :is(h1, h2, h3, p, ul, ol, figure, dl, dd) { margin: 0; } :where(.eo-store) :is(ul, ol) { padding: 0; list-style: none; } :where(.eo-store) img { display: block; max-width: 100%; height: auto; } :where(.eo-store) a { color: var(--eo-forest); } :where(.eo-store) :is(button, input) { font: inherit; color: inherit; } :where(.eo-store) :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .eo-store dialog:focus { outline: none; } .eo-icon { flex: none; } .eo-store .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .eo-skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--eo-ink); color: var(--eo-white); font-weight: 600; text-decoration: none; } .eo-skip:focus { top: 8px; color: var(--eo-white); } .eo-wrap { width: 100%; max-width: calc(var(--eo-max) + 2 * var(--eo-gutter)); margin: 0 auto; padding: 0 var(--eo-gutter); } @media (max-width: 1023px) { .eo-hide-phone { display: none !important; } } @media (min-width: 1024px) { .eo-hide-desk { display: none !important; } } /* Horizontal rows: swipe with snap, no scrollbar, edge to edge on phones. */ .eo-scroll { position: relative; /* holds visually-hidden text inside, which otherwise widened the whole page */ display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .eo-scroll::-webkit-scrollbar { display: none; } .eo-scroll > * { scroll-snap-align: start; flex-shrink: 0; } .eo-bleed { margin-left: calc(-1 * var(--eo-gutter)); margin-right: calc(-1 * var(--eo-gutter)); padding-left: var(--eo-gutter); padding-right: var(--eo-gutter); scroll-padding: 0 var(--eo-gutter); } /* ---------- Type ---------- */ .eo-h1 { font: 800 40px/1.08 var(--eo-display); letter-spacing: -.01em; color: var(--eo-ink); text-wrap: balance; } .eo-h2 { font: 800 28px/1.1 var(--eo-display); letter-spacing: -.01em; color: var(--eo-ink); text-wrap: balance; } /* sentence case */ .eo-eyebrow { color: var(--eo-muted); font: 600 12px/1.2 var(--eo-body); letter-spacing: .08em; text-transform: uppercase; } .eo-more { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--eo-forest); font: 600 14px/1 var(--eo-body); text-decoration: none; white-space: nowrap; } .eo-more:hover { color: var(--eo-ink); } .eo-more .eo-icon { stroke-width: 2.5; transition: transform 120ms var(--eo-ease); } .eo-more:hover .eo-icon { transform: translateX(3px); } @media (min-width: 1024px) { .eo-h1 { font-size: 60px; } .eo-h2 { font-size: 36px; letter-spacing: -.015em; } .eo-more { font-size: 15px; } } /* ---------- Buttons: forest, 6px corners, Figtree 600; ink on hover. One filled button per section. ---------- */ .eo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border: 0; border-radius: 6px; background: var(--eo-forest); color: var(--eo-white); font: 600 15px/1 var(--eo-body); text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; } .eo-btn:hover, .eo-btn--dark:hover, .eo-btn--ink:hover, .eo-btn--accent:hover, .eo-btn--wa:hover { background: var(--eo-ink); color: var(--eo-white); } .eo-btn--sm { height: 42px; padding: 0 18px; font-size: 14px; } .eo-btn--white, .eo-btn--light { background: var(--eo-white); color: var(--eo-ink); } .eo-btn--white:hover, .eo-btn--light:hover { background: var(--eo-sage); color: var(--eo-ink); } .eo-btn--sage, .eo-btn--outline { background: var(--eo-sage); color: var(--eo-forest); } /* the quiet button */ .eo-btn--sage:hover, .eo-btn--outline:hover { background: var(--eo-forest); color: var(--eo-white); } .eo-btn--cart { width: 100%; } .eo-btn--soldout, .eo-btn--soldout:hover { background: var(--eo-sage); color: var(--eo-muted); cursor: default; } @media (min-width: 1024px) { .eo-btn { height: 50px; padding: 0 24px; } .eo-btn--sm { height: 44px; padding: 0 18px; } } /* Add-to-cart states (home.js): a spinner while adding, then "✓ Added" for 2 s. */ .eo-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; } .eo-btn.is-loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--eo-white); animation: eo-spin .7s linear infinite; } .eo-btn--white.is-loading::after, .eo-btn--light.is-loading::after, .eo-btn--sage.is-loading::after, .eo-btn--outline.is-loading::after { border-color: rgba(21, 32, 26, .2); border-top-color: var(--eo-ink); } .eo-btn.is-added, .eo-btn.is-added:hover { background: var(--eo-forest); color: var(--eo-white); } .eo-btn--white.is-added, .eo-btn--white.is-added:hover { background: var(--eo-white); color: var(--eo-forest); } @keyframes eo-spin { to { transform: rotate(360deg); } } .eo-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--eo-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; } .eo-iconbtn:hover { background: var(--eo-fill); color: var(--eo-ink); } /* Labels on product photos: "Save Rs 100" in forest, "Free face wash" and "No.1 best seller" in white. */ .eo-flags { position: absolute; top: 10px; left: 10px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .eo-flag { display: inline-block; padding: 5px 9px; border-radius: 4px; background: var(--eo-forest); color: var(--eo-white); font: 700 11px/1 var(--eo-body); white-space: nowrap; } .eo-flag--gift { background: var(--eo-white); color: var(--eo-ink); } .eo-badge { position: absolute; top: 12px; left: 12px; z-index: 1; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 4px; background: var(--eo-white); color: var(--eo-ink); font: 600 11px/1.2 var(--eo-body); letter-spacing: .08em; text-transform: uppercase; } @media (min-width: 1024px) { .eo-badge { top: 14px; left: 14px; } } /* Quiet chips (the menu drawer's concerns, popular searches): a fill that stands out from the surface. */ .eo-chips { display: flex; gap: 8px; } .eo-chip, .eo-search__popular .eo-sr__link { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 0; border-radius: 6px; background: var(--eo-fill); color: var(--eo-ink); font: 600 14px/1 var(--eo-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; } .eo-chip:hover, .eo-search__popular .eo-sr__link:hover { background: var(--eo-sage); color: var(--eo-ink); } .eo-chip.is-current, .eo-chip.is-current:hover { background: var(--eo-forest); color: var(--eo-white); } .eo-chips--wrap { flex-wrap: wrap; } /* ---------- Header: white on every page, one hairline under it. Phones 60px: menu · wordmark · search · bag (it slides away while scrolling down, back on the way up). From 1024px: wordmark · the search field · WhatsApp · Track my order · account · bag (72px), then the section links; it scrolls with the page. ---------- */ .eo-header { --eo-fill: var(--eo-sand); position: sticky; top: 0; z-index: 40; background: var(--eo-white); box-shadow: inset 0 -1px 0 var(--eo-line); transition: transform .25s var(--eo-ease); } .eo-header.is-hidden { transform: translateY(-100%); } /* home.js */ .eo-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; padding-left: 6px; padding-right: 6px; } .eo-header__menu { justify-self: start; } .eo-logo { display: flex; align-items: center; justify-self: center; text-decoration: none; } .eo-logo__img { width: auto; height: 44px; } /* the real logo (owner, 8 Oct 2026): 44px on phones, 52px from 1024px */ .eo-logo__text { color: var(--eo-forest); font: 800 20px/1 var(--eo-display); } .eo-header__find, .eo-header__link, .eo-header__account, .eo-nav { display: none; } .eo-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; } .eo-bag { position: relative; } .eo-bag__count { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--eo-forest); color: var(--eo-white); font: 700 10px/16px var(--eo-body); text-align: center; } .eo-bag__count[hidden] { display: none; } .eo-bag__count.is-bump { animation: eo-bump .45s var(--eo-ease); } @keyframes eo-bump { 40% { transform: scale(1.3); } } @media (min-width: 1024px) { .eo-header { position: relative; } .eo-header.is-hidden { transform: none; } .eo-header__bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; height: 72px; padding-left: var(--eo-gutter); padding-right: var(--eo-gutter); } .eo-header__menu, .eo-header__search, .eo-search { display: none !important; } .eo-logo { justify-self: start; } .eo-logo__img { height: 52px; } .eo-header__find { display: block; width: 100%; max-width: 480px; } .eo-header__actions { gap: 22px; } .eo-header__link { display: inline-flex; align-items: center; gap: 6px; color: var(--eo-ink); font: 500 14px/1 var(--eo-body); text-decoration: none; white-space: nowrap; } .eo-header__link:hover { color: var(--eo-forest); } .eo-header__account { display: inline-flex; } .eo-header__actions .eo-iconbtn { width: 32px; height: 32px; } .eo-header__actions .eo-bag__count { top: -2px; right: -6px; } .eo-nav { display: block; box-shadow: inset 0 1px 0 var(--eo-line); } .eo-nav__inner { display: flex; flex-wrap: wrap; gap: 0 32px; } .eo-nav__link { padding: 14px 0; color: var(--eo-ink); font: 500 14px/1 var(--eo-body); text-decoration: none; white-space: nowrap; } .eo-nav__link:hover { color: var(--eo-forest); } .eo-nav__link[aria-current="page"] { color: var(--eo-forest); font-weight: 600; box-shadow: inset 0 -2px 0 currentColor; } .eo-nav__kits, .eo-nav__kits:hover, .eo-nav__kits[aria-current="page"] { margin-left: auto; color: var(--eo-offer); font-weight: 600; } } @media (min-width: 1024px) and (max-width: 1179px) { .eo-nav__inner { gap: 0 24px; } .eo-header__bar { gap: 24px; } .eo-header__actions { gap: 16px; } } /* Search: the panel under the header on phones, the open field in the desktop header; instant results under both. The field is a sand fill (white panels) with no edge; a forest ring while typing. */ .eo-search { padding: 12px 0 14px; background: var(--eo-white); } .eo-search[hidden] { display: none; } .eo-search__form { position: relative; display: flex; flex-wrap: wrap; gap: 10px 8px; } .eo-search__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--eo-sand); color: var(--eo-muted); } .eo-search__field:focus-within { box-shadow: inset 0 0 0 2px var(--eo-forest); } .eo-search__icon { width: 18px; height: 18px; } .eo-search__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--eo-ink); font-size: 16px; outline: none; } .eo-search__input::placeholder { color: var(--eo-muted); opacity: 1; } .eo-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } .eo-search__go { height: 46px; } .eo-search__popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; } .eo-search__popular[hidden] { display: none; } .eo-search__popular-label { color: var(--eo-muted); font-size: 13px; font-weight: 600; } @media (min-width: 1024px) { .eo-header__find .eo-search__input { font-size: 15px; } } /* ---------- Sections. The homepage and product page are built of full-width sections, each on its own fill with its space inside (--eo-sec: 36px phones, 72px from 1024px); a hairline only between two white ones. The other pages keep one gap between their blocks (--eo-space). ---------- */ main > * + * { margin-top: var(--eo-space); } main { padding-bottom: var(--eo-space); } .eo-home main > * + *, .eo-product main > * + * { margin-top: 0; } .eo-home main, .eo-product main { padding-bottom: 0; } .eo-sec { padding: var(--eo-sec) 0; } .eo-sec--sand { background: var(--eo-sand); } .eo-sec--white { --eo-fill: var(--eo-sand); background: var(--eo-white); } .eo-sec--forest { background: var(--eo-forest); color: var(--eo-white); } .eo-sec--sage { background: var(--eo-sage); } .eo-sec--white + .eo-sec--white { box-shadow: inset 0 1px 0 var(--eo-line); } .eo-sec--forest .eo-eyebrow { color: var(--eo-on-dark-2); } .eo-sec--forest .eo-h2 { color: var(--eo-white); } /* A section's header: eyebrow · h2 | "All 94 →". */ .eo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .eo-head__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } @media (min-width: 1024px) { .eo-head { margin-bottom: 28px; } .eo-head__text { gap: 8px; } } /* ---------- Hero, on sand (owner, 8 Oct 2026): the video at the page's full width (4:5 on phones, 16:9 from 768px; its poster, the loop's first frame, a still until the video plays) with the featured product's panel attached under it (owner: "make the box beneath the video, let the video be its full width"), in the panel colour (--eo-hero-panel, set on the section from Customize › Homepage; forest without it), all its text white. From 768px the panel is one band: the product on the left, its price and "Add to cart" on the right. ---------- */ .eo-hero { padding: 16px 0 28px; } .eo-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "feat"; gap: 0; } .eo-hero__media { grid-area: media; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px 12px 0 0; background: var(--eo-white); } .eo-hero__media picture { display: contents; } .eo-hero__poster, .eo-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .eo-hero__video { opacity: 0; transition: opacity .4s ease; pointer-events: none; } /* shown once it plays (home.js) */ .eo-hero__video.is-playing { opacity: 1; } @media (prefers-reduced-motion: reduce) { .eo-hero__video { display: none; } } :is(.eo-hero, .eo-mists) .eo-feat { grid-area: feat; border-radius: 0 0 12px 12px; } :is(.eo-hero, .eo-mists) .eo-feat__body { flex: 1; background: var(--eo-hero-panel, var(--eo-forest)); } :is(.eo-hero, .eo-mists) .eo-feat :is(.eo-eyebrow, .eo-feat__meta, .eo-feat__note, .eo-price__was) { color: rgba(255, 255, 255, .9); } /* white text reads on the panel */ :is(.eo-hero, .eo-mists) :is(.eo-feat__add, .eo-feat__add:hover) { color: var(--eo-hero-panel, var(--eo-forest)); } .eo-feat { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; } .eo-feat__body { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 22px; background: var(--eo-forest); color: var(--eo-white); } .eo-feat .eo-eyebrow { color: var(--eo-on-dark-2); } .eo-feat__name { font: 800 24px/1.08 var(--eo-display); letter-spacing: -.01em; } .eo-feat__name a { color: var(--eo-white); text-decoration: none; } .eo-feat__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .eo-feat__meta { color: var(--eo-on-dark); font-size: 13px; line-height: 1.3; } .eo-feat__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; } .eo-feat .eo-price__now { color: var(--eo-white); font-size: 26px; line-height: 1; } /* on forest the price is white */ .eo-feat .eo-price__was { color: var(--eo-on-dark-2); } .eo-feat__add, .eo-feat__add:hover { color: var(--eo-forest); } .eo-feat__note { color: var(--eo-on-dark-2); font-size: 13px; line-height: 1.3; } @media (min-width: 768px) { .eo-hero__media { aspect-ratio: 16 / 9; border-radius: 16px 16px 0 0; } :is(.eo-hero, .eo-mists) .eo-feat { border-radius: 0 0 16px 16px; } :is(.eo-hero, .eo-mists) .eo-feat__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 40px; align-items: center; padding: 28px 32px; } :is(.eo-hero, .eo-mists) .eo-feat__body > * { grid-column: 1; } :is(.eo-hero, .eo-mists) .eo-feat__buy { grid-column: 2; grid-row: 1 / span 4; flex-direction: row; align-items: center; gap: 24px; padding-top: 0; } } @media (min-width: 1024px) { .eo-hero { padding: 40px 0 72px; } :is(.eo-hero, .eo-mists) .eo-feat__body { padding: 32px 40px; } .eo-feat__body { justify-content: center; gap: 14px; padding: 32px 28px; } .eo-feat__name { font-size: 30px; } .eo-feat__meta { font-size: 14px; } .eo-feat__buy { flex-direction: column; align-items: flex-start; gap: 14px; } .eo-feat .eo-price__now { font-size: 30px; } .eo-feat__add { height: 50px; padding: 0 24px; font-size: 15px; } } /* ---------- The mists banner (owner, 9 Oct 2026: "add the romance mist banner beneath Complete routines block, and make its block like the hand cream one, but make it convertable for all the mists"), on sand: the hero's build (its panel rules above take .eo-mists too). The banner at the full width, 4:5 on phones, 2:1 from 768px (lower than the hero's 16:9: of the promo the owner said "on pc it looks so much for one product"); the panel under it in --eo-hero-panel. The scent chips: white at 16% on the panel, the chosen one white with the panel's colour as its text. ---------- */ .eo-mists.eo-sec { padding-top: 0; } /* "Complete routines" above is sand too: its space is enough */ .eo-mists__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "feat"; } .eo-mists__media { grid-area: media; position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px 12px 0 0; background: var(--eo-white); } .eo-mists__media picture { display: contents; } .eo-mists__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .eo-mists__scents { display: flex; flex-wrap: wrap; gap: 8px; } .eo-mists__chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: var(--eo-white); font: 600 14px/1 var(--eo-body); text-decoration: none; white-space: nowrap; } .eo-mists__chip:hover { background: rgba(255, 255, 255, .26); } .eo-mists__chip[aria-checked="true"], .eo-mists__chip[aria-checked="true"]:hover { background: var(--eo-white); color: var(--eo-hero-panel, var(--eo-forest)); } .eo-mists__chip:focus-visible { outline: 2px solid var(--eo-white); outline-offset: 2px; } .eo-mists__dot { display: block; flex: none; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; background: var(--eo-white); } .eo-mists__dot img { display: block; width: 84px; max-width: none; height: 84px; margin: -28px; } /* the bottle's middle third: the scent's colour */ .eo-mists [data-eo-mists-was][hidden] { display: none; } .eo-mists__all, .eo-mists__all:hover { color: var(--eo-white); } @media (min-width: 768px) { .eo-mists__media { aspect-ratio: 2 / 1; border-radius: 16px 16px 0 0; } } /* "What's bothering your skin?": white tiles on sand, sage under the pointer. */ .eo-concerns.eo-sec { padding-top: 8px; } .eo-deals + .eo-concerns.eo-sec { padding-top: var(--eo-sec); } /* after the white Kits & deals, a full gap on its own sand */ .eo-ctiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .eo-ctile { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 112px; padding: 16px; border-radius: 8px; background: var(--eo-white); color: var(--eo-ink); text-decoration: none; transition: background-color .15s; } .eo-ctile:hover { background: var(--eo-sage); color: var(--eo-ink); } .eo-ctile__top { display: flex; flex-direction: column; gap: 4px; } .eo-ctile__name { font: 700 17px/1.2 var(--eo-body); } .eo-ctile__actives { color: var(--eo-muted); font-size: 13px; line-height: 1.3; } /* the two actives most used in the concern */ .eo-ctile__count { color: var(--eo-muted); font-size: 13px; line-height: 1; } @media (min-width: 1024px) { .eo-concerns.eo-sec { padding-top: 0; } .eo-ctiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .eo-ctile { min-height: 128px; padding: 18px; border-radius: 10px; } .eo-ctile__name { font-size: 18px; } } /* ---------- Product cards: 2 across on phones, 4 from 1024px. Photo on its sage tile, name (2 lines) and facts, the price, a forest "Add to cart"; fixed text slot, so prices and buttons line up. ---------- */ .eo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .eo-cards__item { display: flex; min-width: 0; } .eo-card { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; } .eo-card__media { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--eo-white); isolation: isolate; } .eo-card__media > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .eo-card__img { width: 84%; height: 84%; object-fit: contain; transition: transform 120ms var(--eo-ease); } .eo-card__text { display: flex; flex-direction: column; gap: 4px; min-height: 63px; } .eo-card__name { display: -webkit-box; overflow: hidden; font: 600 15px/1.3 var(--eo-body); -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .eo-card__name a { color: var(--eo-ink); text-decoration: none; } .eo-card__meta { overflow: hidden; color: var(--eo-muted); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .eo-card__price { margin-top: auto; } .eo-card .eo-price__now { font-size: 20px; line-height: 1; } @media (hover: hover) { .eo-card:hover .eo-card__img { transform: translateY(-2px); } .eo-card:hover .eo-card__name a { text-decoration: underline 1px; text-underline-offset: 3px; } } @media (min-width: 1024px) { .eo-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .eo-card { gap: 12px; } .eo-card__media { border-radius: 10px; } .eo-card__img { width: 82%; height: 82%; } .eo-card__text { min-height: 66px; } .eo-card__name { font-size: 16px; } .eo-card .eo-price__now { font-size: 22px; } } /* A photograph set to "Fill" in the media library (the fragrance mists; owner, 9 Oct 2026: "remove the white border from these images"): the whole photo fills the tile, the tile's hairline (where it has one) drawn over it, and no lift on hover (it would open a gap at the bottom; the name's underline still marks it). */ .eo-card__img.eo-card__img--fill, .eo-card:hover .eo-card__img--fill { width: 100%; height: 100%; object-fit: cover; transform: none; } .eo-card__media:has(.eo-card__img--fill)::after { position: absolute; inset: 0; border-radius: inherit; box-shadow: inherit; content: ""; pointer-events: none; } /* A white photo tile on a white surface (best sellers, a kit's card, a kit's contents, the mini cart): a 1px inset hairline so it still reads as a tile (owner, 8 Oct 2026), the one hairline a box may have. On sand: nothing. */ .eo-sec--white .eo-card__media, .eo-kit__media, .eo-sec--white .eo-inside__media, .eo-mc .eo-mc-item__img { box-shadow: inset 0 0 0 1px var(--eo-line); } /* The official WhatsApp glyph (owner, 8 Oct 2026): WhatsApp green on white, sand and sage; white inside forest buttons and on the forest and ink bands. */ .eo-wa-glyph { color: var(--eo-wa); } :is(.eo-btn, .eo-sec--forest, .eo-feat__body, .eo-kitcard, .eo-footer) .eo-wa-glyph { color: var(--eo-white); } .eo-btn:is(.eo-btn--white, .eo-btn--light, .eo-btn--sage, .eo-btn--outline) .eo-wa-glyph { color: var(--eo-wa); } .eo-q__wa, .eo-buy__help { display: inline-flex; align-items: center; gap: 6px; } .eo-q__wa .eo-icon, .eo-buy__help .eo-icon { align-self: center; } /* Prices: blue, Figtree 700; the regular price struck beside it, muted. The one place --eo-price is used. */ .eo-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; } .eo-price__now { color: var(--eo-price); font: 700 18px/1.2 var(--eo-body); } .eo-price__was { color: var(--eo-muted); font-size: 14px; font-weight: 400; } /* ---------- The promo after Best sellers (owner, 8 Oct 2026), on sand: the video fills the card at the full width (4:5 on phones; from 768px a 5:2 banner, owner: "this whole sections is taking so much space on dekstop"; its poster, the loop's first frame, set as it nears the screen), and a white card with the product sits on it: rising over the video's foot on phones, floating at its right from 1024px. ---------- */ .eo-promo__card { position: relative; } .eo-promo__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: var(--eo-sage); } .eo-promo__media picture { display: contents; } .eo-promo__poster, .eo-promo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .eo-promo__video { opacity: 0; transition: opacity .4s ease; pointer-events: none; } /* shown once it plays (home.js) */ .eo-promo__video.is-playing { opacity: 1; } @media (prefers-reduced-motion: reduce) { .eo-promo__video { display: none; } } .eo-promo__panel { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; margin: -64px 12px 0; padding: 22px 20px 20px; border-radius: 14px; background: var(--eo-white); } .eo-promo__name { font: 800 26px/1.08 var(--eo-display); letter-spacing: -.01em; } .eo-promo__name a { color: var(--eo-ink); text-decoration: none; } .eo-promo__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .eo-promo__claims { display: flex; flex-direction: column; gap: 8px; } .eo-promo__claims li { display: flex; align-items: flex-start; gap: 10px; color: var(--eo-ink); font-size: 15px; line-height: 1.4; } .eo-promo__claims .eo-icon { flex: none; margin-top: 1px; color: var(--eo-forest); stroke-width: 2.5; } .eo-promo__claims strong { font-weight: 600; } .eo-promo__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; } .eo-promo .eo-price__now { font-size: 24px; line-height: 1; } .eo-promo__more { align-self: flex-start; } @media (min-width: 768px) { .eo-promo__media { aspect-ratio: 5 / 2; } .eo-promo__panel { max-width: 440px; margin: -72px 24px 0 auto; } } @media (min-width: 1024px) { .eo-promo__panel { position: absolute; top: 50%; right: 40px; width: 400px; margin: 0; padding: 28px 28px 26px; transform: translateY(-50%); gap: 14px; } .eo-promo__name { font-size: 32px; } .eo-promo__claims li { font-size: 16px; } .eo-promo .eo-price__now { font-size: 28px; } } /* ---------- "Not just for your face": the ranges on forest, translucent white tiles: a photo on top (3:2, owner, 8 Oct 2026), then the name and the count. ---------- */ .eo-rtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .eo-rtiles li { display: flex; } .eo-rtile { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--eo-white); text-decoration: none; transition: background-color .15s; } .eo-rtile:hover { background: rgba(255, 255, 255, .14); color: var(--eo-white); } .eo-rtile__media { display: block; aspect-ratio: 3 / 2; } .eo-rtile__img { display: block; width: 100%; height: 100%; object-fit: cover; } .eo-rtile__text { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; } .eo-rtile__name { font: 700 16px/1.2 var(--eo-body); } .eo-rtile__count { margin-top: auto; color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1; } @media (min-width: 1024px) { .eo-rtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .eo-rtile__text { gap: 8px; padding: 18px 20px 20px; } } /* ---------- "Complete routines": kits on white cards (phones: the first two, one under the other). ---------- */ .eo-kits__list { display: flex; flex-direction: column; gap: 14px; } .eo-kits__item { display: flex; } .eo-kit { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 16px; border-radius: 12px; background: var(--eo-white); } .eo-kit__media { position: relative; display: flex; align-items: center; justify-content: center; height: 170px; overflow: hidden; border-radius: 8px; background: var(--eo-white); } .eo-kit__media img { width: auto; height: 84%; aspect-ratio: 1; object-fit: contain; } .eo-kit__media .eo-flag { position: absolute; top: 10px; left: 10px; } .eo-kit__text { display: flex; flex-direction: column; gap: 4px; } .eo-kit__name { font: 600 17px/1.3 var(--eo-body); } .eo-kit__name a { color: var(--eo-ink); text-decoration: none; } .eo-kit__name a:hover { text-decoration: underline 1px; text-underline-offset: 3px; } .eo-kit__meta { color: var(--eo-muted); font-size: 13px; line-height: 1.3; } .eo-kit__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; } .eo-kit .eo-price__now { font-size: 22px; line-height: 1; } @media (max-width: 1023px) { .eo-kits__item:nth-child(n+3) { display: none; } } /* A kit's banner (owner, 8 Oct 2026): across the card's top, 3:2, cropped to fit, the card's corners; no hairline. */ .eo-kit__media--banner { height: auto; aspect-ratio: 3 / 2; margin: -16px -16px 0; border-radius: 12px 12px 0 0; box-shadow: none; } .eo-kit__media--banner img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; } @media (min-width: 1024px) { .eo-kits__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .eo-kit { padding: 18px; } .eo-kit__media { height: 200px; } .eo-kit__media--banner { height: auto; margin: -18px -18px 0; } } /* ---------- "Pay at your door" on white: the facts with forest line icons, then the certificates as one line. ---------- */ .eo-facts__grid { display: flex; flex-direction: column; gap: 22px; } .eo-facts__head { display: flex; flex-direction: column; gap: 6px; } .eo-facts__list { display: flex; flex-direction: column; gap: 18px; } .eo-fact { display: flex; align-items: flex-start; gap: 12px; } .eo-fact__icon { width: 26px; height: 26px; color: var(--eo-forest); stroke-width: 1.8; } .eo-fact__title { color: var(--eo-ink); font: 600 15px/1.3 var(--eo-body); } .eo-fact__text { margin-top: 2px; color: var(--eo-muted); font-size: 13px; line-height: 1.35; } .eo-facts__certs { color: var(--eo-muted); font-size: 13px; line-height: 1.35; } .eo-facts__certs--foot { padding-top: 16px; box-shadow: inset 0 1px 0 var(--eo-line); } @media (min-width: 1024px) { .eo-facts__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; } .eo-facts__head { gap: 10px; } .eo-facts__head .eo-facts__certs { margin-top: 14px; } .eo-facts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .eo-fact { flex-direction: column; gap: 12px; } .eo-fact__icon { width: 28px; height: 28px; } .eo-fact__title { font-size: 16px; } } /* ---------- WhatsApp, on sage. ---------- */ .eo-advice__row { display: flex; flex-direction: column; gap: 14px; } .eo-advice__text { display: flex; flex-direction: column; gap: 14px; } .eo-advice__title { font-size: 24px; } .eo-advice__line { color: var(--eo-muted); font-size: 15px; line-height: 1.45; } .eo-advice__btn { align-self: flex-start; } @media (min-width: 1024px) { .eo-advice.eo-sec { padding: 56px 0; } .eo-advice__row { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } .eo-advice__text { gap: 8px; } .eo-advice__title { font-size: 28px; } .eo-advice__line { font-size: 16px; line-height: 1.5; } .eo-advice__btn { flex: none; align-self: center; } } /* ---------- Footer, on ink (owner's footer spec, 8 Oct 2026): the logo on a white tile and one line, Shop / Help, the contact row under a hairline, the legal line (desktop: the ways to pay on its right). Figtree throughout; three strengths of white only: links .9, the line and contact .6, headings and legal .45. ---------- */ .eo-footer { padding: 48px 0 calc(32px + env(safe-area-inset-bottom)); background: var(--eo-ink); color: rgba(255, 255, 255, .9); font-family: var(--eo-body); } .eo-footer a { color: rgba(255, 255, 255, .9); text-decoration: none; } .eo-footer a:hover { color: var(--eo-white); text-decoration: underline; text-underline-offset: 4px; } .eo-footer__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } .eo-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .eo-footer__logo { display: flex; align-items: center; justify-self: start; height: 44px; padding: 8px 12px; border-radius: 8px; background: var(--eo-white); } /* no white logo exists */ .eo-footer__logo .eo-logo__img { width: auto; height: 28px; } .eo-footer__logo:hover { text-decoration: none; } .eo-footer__line { max-width: 320px; margin: 0; color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.45; } .eo-footer__heading { margin: 0 0 4px; color: rgba(255, 255, 255, .45); font: 600 12px/1.2 var(--eo-body); letter-spacing: .08em; text-transform: uppercase; } .eo-footer__col ul { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; } .eo-footer__col a { display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1; } /* 44px to tap: the height does the spacing */ .eo-footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; padding-top: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .eo-footer .eo-footer__reach { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.3; } .eo-footer__legal { margin-top: 16px; color: rgba(255, 255, 255, .45); font-size: 12px; line-height: 1.5; } .eo-footer__legal p { margin: 0; } .eo-footer__pays { display: none; } .eo-footer__col--contact { display: none; } /* desktop only: phones have the contact row */ @media (min-width: 1024px) { /* the owner's desktop pass: brand | Shop | Help | Contact, links 32px tall, one bottom row */ .eo-footer { padding: 56px 0 28px; } .eo-footer__main { grid-template-columns: minmax(0, 1fr) 200px 200px 200px; gap: 40px; align-items: start; } .eo-footer__brand { grid-column: auto; } .eo-footer__col a { min-height: 32px; } .eo-footer__col--contact { display: block; } .eo-footer__col--contact a { gap: 8px; } .eo-footer__contact { display: none; } .eo-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-top: 40px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .eo-footer__pays { display: block; } } } /* ---------- Product page (templates/product.php), the approved design: on sand the breadcrumb, photos and the buy column (photos 7 | buy column 5 from 1024px, the column staying in view); on white What it does + facts + How to use; on sand Pairs well with; on white Reviews & questions; a bar at the bottom on phones. ---------- */ .eo-product .eo-h2 { font-size: 26px; } @media (min-width: 1024px) { .eo-product .eo-h2 { font-size: 34px; } } .eo-pdp { padding-bottom: 32px; } /* The breadcrumb (every page): muted links, the page itself in ink. On the product page one line, 12px (13 from 1024px), the name cut short on phones. */ .eo-crumbs { padding: 14px 0 12px; } .eo-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; color: var(--eo-muted); font-size: 13px; } .eo-crumbs li { display: flex; align-items: center; min-width: 0; } .eo-crumbs li + li::before { content: '›'; margin: 0 8px; color: var(--eo-muted); } .eo-crumbs a { color: var(--eo-muted); text-decoration: none; } .eo-crumbs a:hover { color: var(--eo-ink); text-decoration: underline 1px; text-underline-offset: 3px; } .eo-crumbs [aria-current] { overflow: hidden; color: var(--eo-ink); text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 1024px) { .eo-crumbs { padding: 20px 0 18px; } } .eo-pdp .eo-crumbs { padding: 14px 0 0; } .eo-pdp .eo-crumbs ol { flex-wrap: nowrap; font-size: 12px; line-height: 1.3; } .eo-pdp .eo-crumbs li { white-space: nowrap; } .eo-pdp .eo-crumbs li + li::before { margin: 0 6px; } .eo-pdp .eo-crumbs li:last-child { flex: 1; } .eo-pdp__grid { padding-top: 14px; } /* Photos: sage tiles; the thumbnails 4 across (6 from 1024px), the current one ringed in forest. */ .eo-gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .eo-gallery__stage { position: relative; overflow: hidden; border-radius: 12px; background: var(--eo-white); } /* The tile's hairline, drawn over the photo (a photograph fills the tile: an inset shadow would sit under it). */ .eo-gallery__stage::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--eo-line); pointer-events: none; } .eo-gallery__track { gap: 0; } .eo-gallery__slide { width: 100%; aspect-ratio: 1; } .eo-gallery__open { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0; background: var(--eo-white); cursor: zoom-in; } .eo-gallery__img { width: 86%; height: 86%; object-fit: contain; } /* a pack on white: inside the tile */ .eo-gallery__slide--photo .eo-gallery__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* a photograph: fills it (owner's gallery spec, 8 Oct 2026) */ .eo-gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .eo-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: var(--eo-white); cursor: pointer; } .eo-thumb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } /* the ring, drawn over a photo that fills the thumbnail */ .eo-thumb[aria-current="true"]::after { box-shadow: inset 0 0 0 2px var(--eo-forest); } .eo-thumb__img { width: 84%; height: 84%; object-fit: contain; } .eo-thumb--photo .eo-thumb__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .eo-thumb--slot { padding: 6px; background: var(--eo-sage); color: var(--eo-muted); font: 500 11px/1.3 var(--eo-body); text-align: center; cursor: default; } /* The buy column. */ .eo-buy { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-top: 20px; } .eo-buy__title { font-size: 32px; } .eo-buy__rating { display: inline-flex; align-items: center; gap: 8px; color: var(--eo-ink); font-size: 14px; font-weight: 600; text-decoration: none; } .eo-buy__rating:hover { color: var(--eo-ink); text-decoration: underline; text-underline-offset: 3px; } .eo-stars { display: inline-block; flex: none; font-size: 16px; line-height: 1; letter-spacing: 1px; white-space: nowrap; } .eo-stars::before { content: '\2605\2605\2605\2605\2605'; background: linear-gradient(90deg, var(--eo-forest) calc(var(--eo-rating, 0) * 20%), var(--eo-sage) 0); -webkit-background-clip: text; background-clip: text; color: transparent; } .eo-buy__meta { color: var(--eo-muted); font-size: 13px; line-height: 1.4; } .eo-buy__claims { display: flex; flex-direction: column; gap: 8px; } .eo-buy__claims li { display: flex; align-items: flex-start; gap: 10px; color: var(--eo-ink); font-size: 15px; line-height: 1.4; } .eo-buy__claims .eo-icon { margin-top: 1px; color: var(--eo-forest); stroke-width: 2.5; } .eo-buy__claims strong { font-weight: 600; } .eo-buy__gift { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--eo-ink); font-size: 14px; } .eo-buy__gift .eo-flag--gift { box-shadow: inset 0 0 0 1px var(--eo-line); } .eo-buy__label { margin-bottom: 10px; color: var(--eo-muted); font: 600 12px/1.2 var(--eo-body); letter-spacing: .08em; text-transform: uppercase; } .eo-buy__label span { color: var(--eo-ink); } .eo-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; } .eo-option { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--eo-fill); color: var(--eo-ink); font: 600 15px/1 var(--eo-body); cursor: pointer; } .eo-option__dot { width: 22px; height: 22px; border-radius: 50%; } .eo-option__sub { color: inherit; font: 400 12px/1.2 var(--eo-body); opacity: .8; } .eo-option[aria-checked="true"] { background: var(--eo-forest); color: var(--eo-white); } .eo-buy__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 12px; padding-top: 6px; } .eo-buy__price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; } .eo-buy .eo-price__now { font-size: 30px; line-height: 1; } .eo-qty { display: inline-flex; align-items: center; border-radius: 6px; background: var(--eo-fill); } .eo-qty__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--eo-ink); cursor: pointer; } .eo-qty__btn:hover { background: var(--eo-sage); color: var(--eo-ink); } .eo-qty__btn:disabled, .eo-qty__btn[aria-disabled="true"] { color: rgba(21, 32, 26, .3); } .eo-qty__btn:disabled { cursor: default; } .eo-qty__btn:disabled:hover { background: none; } .eo-qty__value { min-width: 28px; color: var(--eo-ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; transition: opacity .15s; } .eo-buy__qty { height: 44px; } .eo-buy__add { grid-column: 1 / -1; width: 100%; gap: 0; } .eo-buy__total { margin-left: .3em; } /* the leading space of a flex item is dropped */ .eo-buy__wa { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; color: var(--eo-forest); font: 600 14px/1 var(--eo-body); text-decoration: none; } .eo-buy__wa:hover { color: var(--eo-ink); text-decoration: underline; text-underline-offset: 4px; } .eo-buy__help { justify-content: center; color: var(--eo-forest); font-size: 14px; text-align: center; text-decoration: underline; text-underline-offset: 3px; } .eo-buy__lines { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 10px; background: var(--eo-white); } .eo-buy__lines li { display: flex; align-items: center; gap: 8px; color: var(--eo-ink); font-size: 13px; line-height: 1.4; } .eo-buy__lines .eo-icon { color: var(--eo-forest); } /* The kit card: forest, the kit's photo on sage, "Step 1 of 5 · Complete the routine", its price and saving. */ .eo-kitcard { display: flex; align-items: center; gap: 14px; margin-top: 2px; padding: 16px; border-radius: 12px; background: var(--eo-forest); color: var(--eo-white); } .eo-kitcard__media { flex: none; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; overflow: hidden; border-radius: 8px; background: var(--eo-white); } .eo-kitcard__media img { width: 92%; height: 92%; object-fit: contain; } .eo-kitcard__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .eo-kitcard .eo-eyebrow { color: var(--eo-on-dark-2); } .eo-kitcard__name { font: 600 16px/1.3 var(--eo-body); } .eo-kitcard__name a { color: var(--eo-white); text-decoration: none; } .eo-kitcard__name a:hover { text-decoration: underline; text-underline-offset: 3px; } .eo-kitcard__price { color: var(--eo-on-dark); font-size: 13px; line-height: 1.4; } .eo-kitcard__price strong { color: var(--eo-white); font-weight: 700; } .eo-kitcard__add { align-self: flex-start; margin-top: 4px; color: var(--eo-white); font: 600 14px/1 var(--eo-body); text-decoration: none; } .eo-kitcard__add:hover { color: var(--eo-white); text-decoration: underline; text-underline-offset: 4px; } @media (min-width: 1024px) { .eo-pdp { padding-bottom: 64px; } .eo-pdp .eo-crumbs { padding-top: 20px; } .eo-pdp .eo-crumbs ol { font-size: 13px; } .eo-pdp .eo-crumbs li + li::before { margin: 0 8px; } .eo-pdp__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; padding-top: 24px; } .eo-gallery { gap: 12px; } .eo-gallery__stage { border-radius: 16px; } .eo-gallery__img { width: 86%; height: 86%; } .eo-gallery__badge { top: 16px; left: 16px; } .eo-gallery__thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .eo-thumb { border-radius: 10px; } .eo-thumb__img { width: 82%; height: 82%; } .eo-thumb--photo .eo-thumb__img { width: 100%; height: 100%; } .eo-buy { position: sticky; top: 24px; gap: 16px; padding-top: 0; } .eo-buy__title { font-size: 40px; } .eo-buy__meta { font-size: 14px; } .eo-buy__claims li { font-size: 16px; } .eo-buy__claims .eo-icon { margin-top: 2px; } .eo-buy__row { display: flex; gap: 16px; padding-top: 8px; } .eo-buy .eo-price__now { font-size: 32px; } .eo-buy__qty, .eo-buy__qty .eo-qty__btn { height: 48px; } .eo-buy__add { flex: 1; width: auto; } .eo-buy__total { display: none; } .eo-buy__wa { align-self: flex-start; height: auto; } .eo-buy__help { justify-content: flex-start; text-align: left; } .eo-buy__lines { gap: 10px; padding: 16px 18px; } } /* The product's video (only when it has one), on sand under the photos. */ .eo-pdp-video.eo-sec { padding-top: 0; } .eo-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--eo-white); } /* the poster is the photo as it is, on white */ .eo-video__poster, .eo-video video, .eo-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; } .eo-video__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; padding: 0; border: 0; border-radius: 50%; background: var(--eo-forest); color: var(--eo-white); cursor: pointer; } .eo-video__play:hover { background: var(--eo-ink); } .eo-video__play .eo-icon { margin-left: 4px; } /* What it does + the facts + How to use, on white. Phones: the text, the facts as rows, then the steps. From 1024px: text and steps 7 | the facts in a sand box 5. */ .eo-about__grid { display: grid; grid-template-areas: "text" "facts" "use"; gap: 18px; } .eo-about__text { grid-area: text; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .eo-about__text > .eo-eyebrow { margin-bottom: -12px; } .eo-prose { color: var(--eo-ink); font-size: 15px; line-height: 1.55; } .eo-prose p + p, .eo-prose p + ul, .eo-prose ul + p, .eo-prose p + ol { margin-top: 14px; } .eo-prose ul { padding-left: 1.2em; list-style: disc; } .eo-prose ol { padding-left: 1.4em; list-style: decimal; } .eo-prose li + li { margin-top: 4px; } .eo-prose a { color: var(--eo-forest); text-underline-offset: 3px; } .eo-prose strong { font-weight: 700; } .eo-about__label { color: var(--eo-muted); font: 600 12px/1.3 var(--eo-body); letter-spacing: .08em; text-transform: uppercase; } .eo-inside { display: flex; flex-direction: column; gap: 12px; } .eo-inside li { display: flex; align-items: center; gap: 12px; } .eo-inside__media { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; overflow: hidden; border-radius: 8px; background: var(--eo-white); } .eo-inside__media img { width: 86%; height: 86%; object-fit: contain; } .eo-inside__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .eo-inside__name { color: var(--eo-ink); font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none; } .eo-inside__name:hover { color: var(--eo-ink); text-decoration: underline; text-underline-offset: 3px; } .eo-inside__type { color: var(--eo-muted); font-size: 13px; } /* A step's number: a forest circle, the white numeral. */ .eo-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--eo-forest); color: var(--eo-white); font: 700 13px/1 var(--eo-body); font-variant-numeric: tabular-nums; } .eo-facts-table { grid-area: facts; padding-top: 6px; } .eo-facts-table__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--eo-line); } .eo-facts-table__row:last-child { box-shadow: none; } .eo-facts-table dt { color: var(--eo-muted); font-size: 13px; line-height: 1.4; } .eo-facts-table dd { color: var(--eo-ink); font: 600 14px/1.4 var(--eo-body); text-align: right; } .eo-about__use { grid-area: use; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-top: 18px; } .eo-about__use-title { font: 800 22px/1.1 var(--eo-display); letter-spacing: -.01em; } .eo-steps { display: flex; flex-direction: column; gap: 16px; } .eo-step { display: flex; align-items: flex-start; gap: 14px; } .eo-step__title { color: var(--eo-ink); font: 600 15px/1.3 var(--eo-body); } .eo-step__title--plain { padding-top: 4px; font-weight: 400; line-height: 1.45; } .eo-step__text { margin-top: 2px; color: var(--eo-muted); font-size: 13px; line-height: 1.4; } .eo-about__inci { color: var(--eo-muted); font-size: 14px; line-height: 1.6; } @media (min-width: 1024px) { .eo-about__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text facts" "use facts"; gap: 0 72px; align-items: start; } .eo-about__text > .eo-eyebrow { margin-bottom: 0; } .eo-prose { font-size: 16px; line-height: 1.6; } .eo-prose p + p { margin-top: 18px; } .eo-facts-table { padding: 8px 24px; border-radius: 12px; background: var(--eo-sand); } .eo-facts-table__row { padding: 14px 0; } .eo-facts-table dd { font-size: 15px; } .eo-about__use { gap: 14px; padding-top: 36px; } .eo-about__use-title { color: var(--eo-muted); font: 600 12px/1.2 var(--eo-body); letter-spacing: .08em; text-transform: uppercase; } .eo-steps { display: grid; grid-template-columns: repeat(var(--eo-steps, 3), minmax(0, 1fr)); gap: 24px; } .eo-step { flex-direction: column; gap: 10px; } .eo-step__title { font-size: 16px; } .eo-step__title--plain { padding-top: 0; font-size: 15px; } .eo-num { width: 32px; height: 32px; font-size: 14px; } } /* Pairs well with, on sand: the product cards (phones: the first two), then the sage "See all" tile. */ @media (max-width: 1023px) { .eo-pairs__list > :nth-child(n+3) { display: none; } } .eo-seeall { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 280px; padding: 16px; border-radius: 10px; background: var(--eo-white); color: var(--eo-forest); font: 600 16px/1.3 var(--eo-body); text-align: center; text-decoration: none; transition: background-color .15s, color .15s; } .eo-seeall:hover { background: var(--eo-forest); color: var(--eo-white); } .eo-seeall .eo-icon { stroke-width: 2.5; } /* Reviews & questions, on white: the reviews | the questions (5 | 7 from 1024px). */ .eo-rq__grid { display: grid; gap: 36px; } .eo-rq__reviews, .eo-rq__faq { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .eo-rq__grid .eo-eyebrow { margin-bottom: -10px; } .eo-rq__faq .eo-h2 { font-size: 22px; } .eo-norev { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px; border-radius: 10px; background: var(--eo-sand); } .eo-norev p { color: var(--eo-ink); font-size: 15px; line-height: 1.55; } .eo-rvsum { display: flex; align-items: center; gap: 14px; } .eo-rvsum__avg { color: var(--eo-ink); font: 800 48px/1 var(--eo-display); font-variant-numeric: tabular-nums; } .eo-rvsum .eo-stars { font-size: 18px; } .eo-rvsum__count { margin-top: 4px; color: var(--eo-muted); font-size: 14px; } .eo-rvbars { display: grid; gap: 6px; max-width: 360px; } .eo-rvbars li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; gap: 10px; align-items: center; color: var(--eo-muted); font-size: 13px; font-variant-numeric: tabular-nums; } .eo-rvbars li > :last-child { text-align: right; } .eo-rvbars__bar { height: 8px; overflow: hidden; border-radius: 4px; background: var(--eo-sand); } .eo-rvbars__bar span { display: block; height: 100%; background: var(--eo-forest); } .eo-rq__more, .eo-rq__write { align-self: flex-start; } .eo-review + .eo-review { margin-top: 24px; } .eo-review__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .eo-review__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--eo-forest); font-size: 13px; font-weight: 600; } .eo-review__title { margin-top: 8px; color: var(--eo-ink); font: 600 16px/1.3 var(--eo-body); } .eo-review__text { margin-top: 6px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; } .eo-review__photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .eo-review__photos img { width: 88px; height: 88px; border-radius: 8px; object-fit: cover; background: var(--eo-sand); } .eo-review__who { margin-top: 10px; color: var(--eo-muted); font-size: 13px; } /* Questions: rows with a hairline between them, a + that turns into × when open. */ .eo-q { box-shadow: inset 0 -1px 0 var(--eo-line); } .eo-q:last-child { box-shadow: none; } .eo-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; color: var(--eo-ink); font: 600 15px/1.3 var(--eo-body); list-style: none; cursor: pointer; } .eo-q summary::-webkit-details-marker { display: none; } .eo-q__icon { color: var(--eo-muted); transition: transform .2s var(--eo-ease); } .eo-q[open] .eo-q__icon { transform: rotate(45deg); } .eo-q p { padding: 0 0 16px; color: var(--eo-ink); font-size: 15px; line-height: 1.6; } .eo-q a { color: var(--eo-forest); font-weight: 600; text-underline-offset: 3px; } @media (min-width: 1024px) { .eo-rq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; } .eo-rq__grid--one { grid-template-columns: minmax(0, 1fr); } .eo-rq__reviews, .eo-rq__faq { gap: 18px; } .eo-rq__grid .eo-eyebrow { margin-bottom: 0; } .eo-rq__faq .eo-h2 { font-size: 34px; } .eo-norev { padding: 20px; } .eo-norev p { font-size: 16px; line-height: 1.6; } .eo-q summary { padding: 18px 0; font-size: 16px; } } /* The bar at the bottom (phones): the name, the price and Add to cart, once the buy column's button scrolls away. */ .eo-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--eo-gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--eo-white); box-shadow: 0 -1px 0 var(--eo-line), 0 -8px 24px rgba(21, 32, 26, .08); transform: translateY(110%); transition: transform .2s var(--eo-ease); visibility: hidden; } .eo-buybar.is-shown { transform: none; visibility: visible; } .eo-buybar__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .eo-buybar__name { overflow: hidden; color: var(--eo-ink); font-size: 14px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .eo-buybar .eo-price__now { font-size: 18px; line-height: 1; } .eo-buybar__add { flex: none; padding: 0 22px; } .eo-product .eo-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } /* the bar never covers the © line */ @media (min-width: 1024px) { .eo-buybar { display: none; } .eo-product .eo-footer { padding-bottom: 32px; } } /* ---------- Instant search results (under the search field) ---------- */ .eo-sr { position: absolute; left: var(--eo-gutter); right: var(--eo-gutter); top: 56px; z-index: 45; max-height: min(70vh, 520px); overflow: auto; padding: 8px 0; background: var(--eo-white); box-shadow: var(--eo-shadow); } .eo-sr[hidden], .eo-sr__note[hidden] { display: none; } .eo-header__find .eo-sr { left: 0; right: 0; top: 54px; border-radius: 8px; } .eo-sr__links { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 10px; } .eo-sr__links .eo-sr__link { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; background: var(--eo-fill); color: var(--eo-ink); font-size: 13px; font-weight: 600; text-decoration: none; } .eo-sr__link small { margin-left: 6px; color: var(--eo-muted); font-size: 12px; font-weight: 400; } .eo-sr__label { padding: 4px 16px; color: var(--eo-muted); font: 600 12px/1.3 var(--eo-body); letter-spacing: .08em; text-transform: uppercase; } .eo-sr__item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 8px 16px; color: var(--eo-ink); text-decoration: none; } .eo-sr__item img { width: 48px; height: 48px; object-fit: contain; } .eo-sr__name { font-size: 14px; font-weight: 600; line-height: 1.3; } .eo-sr__meta { display: block; color: var(--eo-muted); font-size: 12px; font-weight: 400; } .eo-sr__price .eo-price__now { font-size: 14px; white-space: nowrap; } .eo-sr__all { display: block; margin: 6px 16px 4px; color: var(--eo-forest); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .eo-sr__item.is-active, .eo-sr__item:hover, .eo-sr__all.is-active { background: var(--eo-fill); } .eo-sr__links .eo-sr__link.is-active, .eo-sr__links .eo-sr__link:hover { background: var(--eo-forest); color: var(--eo-white); } .eo-sr__links .eo-sr__link.is-active small, .eo-sr__links .eo-sr__link:hover small { color: var(--eo-on-dark); } .eo-sr mark { background: none; color: var(--eo-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .eo-sr__note { padding: 10px 16px; color: var(--eo-muted); } .eo-sr .is-soldout { opacity: .55; } /* ---------- Panels (): menu drawer, mini cart, chooser ---------- */ /* overflow: clip, never scroll the dialog itself (an iPhone sheet "shot up, then dropped": Playbook Part 15, #14). */ .eo-drawer__inner, .eo-mc__panel, .eo-sheet__panel, .eo-sr, .eo-dd__list { --eo-fill: var(--eo-sand); } .eo-store dialog { max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--eo-ink); overflow: hidden; overflow: clip; } .eo-store dialog::backdrop { background: rgba(21, 32, 26, 0); transition: background-color .16s linear; } .eo-store dialog.is-open::backdrop { background: rgba(21, 32, 26, .4); } html.eo-locked { overflow: hidden; } html.eo-locked body { padding-right: var(--eo-sb, 0px); } .eo-quiet-focus:focus-visible { outline: none; } #best-sellers { scroll-margin-top: 80px; } /* ---------- Menu drawer: the header and footer on the grey band, the rows in between separated by space ---------- */ .eo-drawer { width: min(88vw, 400px); height: 100dvh; margin: 0; } .eo-drawer__inner { display: flex; flex-direction: column; height: 100%; background: var(--eo-white); transform: translateX(-100%); transition: transform .28s ease-out; will-change: transform; } .eo-drawer.is-open .eo-drawer__inner { transform: none; } .eo-drawer__head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 6px 0 16px; background: var(--eo-white); box-shadow: inset 0 -1px 0 var(--eo-line); } .eo-drawer__logo { justify-self: auto; } .eo-drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 32px; } .eo-drawer__body .eo-sr { position: static; max-height: none; margin: 4px -16px 0; padding: 4px 0 0; background: transparent; box-shadow: none; } .eo-drawer__body.is-searching .eo-drawer__sections { display: none; } .eo-drawer__section { margin-top: 28px; } .eo-drawer__title { margin-bottom: 12px; } /* "Popular" (owner, 8 Oct 2026: "orange fire skeleton shimmer on this word, eye catching"): deep orange with a bright band sweeping left to right every 2.4 s; plain deep orange for people who ask for less motion. */ .eo-fire { background: linear-gradient(110deg, var(--eo-fire) 0 38%, var(--eo-fire-glow) 50%, var(--eo-fire) 62% 100%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 700; animation: eo-fire 2.4s linear infinite; } @keyframes eo-fire { from { background-position: 100% 0; } to { background-position: 0 0; } } /* Its product box (owner: "the popular shimmer on the outline of the product box as well. Same color and outline as popular"): a 2px edge in the same orange with the same band sweeping through, in step with the word. The box's own fill sits inside it (padding-box), its content where it was (12px less the edge). */ .eo-drawer__popular .eo-mtile { padding: 10px; border: 2px solid transparent; background: linear-gradient(var(--eo-fill), var(--eo-fill)) padding-box, linear-gradient(110deg, var(--eo-fire) 0 38%, var(--eo-fire-glow) 50%, var(--eo-fire) 62% 100%) 0 0 / 300% 100% border-box; animation: eo-fire-edge 2.4s linear infinite; } @keyframes eo-fire-edge { from { background-position: 0 0, 100% 0; } to { background-position: 0 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .eo-fire, .eo-drawer__popular .eo-mtile { animation: none; } } .eo-mtile { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 12px; background: var(--eo-fill); } .eo-mtile__media { display: block; width: 88px; height: 88px; padding: 6%; overflow: hidden; border-radius: 8px; background: var(--eo-white); } .eo-mtile__img { width: 100%; height: 100%; object-fit: cover; } .eo-mtile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .eo-mtile__name { display: -webkit-box; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .eo-mtile__name a { color: var(--eo-ink); text-decoration: none; } .eo-mtile__meta { color: var(--eo-muted); font-size: 13px; line-height: 1.35; } .eo-mtile__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; } .eo-mtile__price .eo-price__now { font-size: 20px; } .eo-mtile .eo-mtile__btn { width: auto; min-height: 40px; height: 40px; margin-left: auto; padding: 0 14px; } .eo-drawer__rows { display: flex; flex-direction: column; gap: 2px; } .eo-drawer__row { display: flex; align-items: center; gap: 10px; min-height: 50px; color: var(--eo-ink); font: 600 15px/1.2 var(--eo-body); text-decoration: none; cursor: pointer; list-style: none; } .eo-drawer__row::-webkit-details-marker { display: none; } .eo-drawer__caret { color: var(--eo-muted); transition: transform .2s var(--eo-ease); } .eo-drawer__group[open] .eo-drawer__caret { transform: rotate(180deg); } .eo-drawer__sub { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 8px; } .eo-drawer__subrow { display: flex; align-items: center; min-height: 44px; padding-left: 16px; background: var(--eo-fill); color: var(--eo-ink); font-size: 15px; text-decoration: none; } .eo-drawer__subrow:hover { background: var(--eo-forest); color: var(--eo-white); } .eo-drawer__row-label { flex: 1; min-width: 0; } .eo-drawer__row-sub { color: var(--eo-muted); font: 400 13px/1.3 var(--eo-body); letter-spacing: 0; text-transform: none; white-space: nowrap; } .eo-drawer__row .eo-icon { color: var(--eo-muted); } .eo-drawer__row:hover .eo-drawer__row-label { color: var(--eo-forest); text-decoration: underline; text-underline-offset: 4px; } .eo-drawer__foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--eo-fill); } .eo-drawer__foot .eo-btn--wa { min-height: 50px; } .eo-drawer__links { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13px; } .eo-drawer__links a { display: inline-flex; align-items: center; gap: 4px; } /* ---------- Mini cart: a bottom sheet on phones (92dvh), a 420px right drawer from 768px. The head and the money block sit on the grey band; the lines in between are separated by space. ---------- */ .eo-mc { width: 100%; height: 92dvh; margin: auto 0 0; } .eo-mc__panel { display: flex; flex-direction: column; height: 100%; padding-bottom: env(safe-area-inset-bottom); background: var(--eo-white); transform: translateY(100%); transition: transform .24s ease-out; will-change: transform; } .eo-mc.is-open .eo-mc__panel { transform: none; } .eo-mc__head { position: relative; flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 6px 12px 16px; background: var(--eo-fill); touch-action: none; } .eo-mc__handle { position: absolute; top: 10px; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: 2px; background: rgba(21, 32, 26, .2); } .eo-mc__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 4px; } .eo-mc__title { color: var(--eo-ink); font: 800 20px/1.2 var(--eo-display); } .eo-mc__title:focus, .eo-mc__title:focus-visible { outline: none; } .eo-mc__meta { color: var(--eo-muted); font-size: 13px; line-height: 1.4; } .eo-mc__meta:empty { display: none; } .eo-mc__meta a { color: var(--eo-muted); text-underline-offset: 3px; } .eo-mc__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--eo-ink); cursor: pointer; } .eo-mc__close:hover { background: var(--eo-white); } .eo-mc__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 0; } .eo-mc__band { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--eo-fill); color: var(--eo-ink); font-size: 14px; line-height: 20px; overflow: hidden; transition: height .2s, padding .2s, opacity .2s; } .eo-mc__band[hidden], .eo-mc__band [hidden] { display: none; } .eo-mc__band.is-collapsing { padding-top: 0; padding-bottom: 0; opacity: 0; } .eo-mc__band-icon { flex: none; display: grid; color: var(--eo-forest); } .eo-mc__band-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eo-mc__undo { flex: none; padding: 0 2px; border: 0; background: none; color: var(--eo-ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .eo-mc__error { margin-top: 8px; padding: 12px; background: rgba(21, 32, 26, .06); color: var(--eo-ink); font-size: 14px; } .eo-mc__error[hidden] { display: none; } .eo-mc__list { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; } .eo-mc-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 0; } .eo-mc-item__media { position: relative; width: 56px; height: 56px; } .eo-mc-item__img { width: 56px; height: 56px; padding: 3px; border-radius: 6px; background: var(--eo-white); object-fit: contain; } .eo-mc-item__remove { position: absolute; top: -8px; left: -8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--eo-white); color: var(--eo-ink); box-shadow: 0 1px 4px rgba(21, 32, 26, .2); cursor: pointer; } .eo-mc-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .eo-mc-item__name { display: -webkit-box; overflow: hidden; color: var(--eo-ink); font-size: 14px; font-weight: 700; line-height: 1.35; text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .eo-mc-item__unit { color: var(--eo-muted); font-size: 13px; } .eo-mc-item__gift { color: var(--eo-forest); font-size: 13px; font-weight: 600; } .eo-mc-item__end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .eo-mc-item.is-busy .eo-qty__value { opacity: .5; } /* A line drawn the moment Add was tapped, before the server has it (home.js): its −, + and ✕ wait for that. */ .eo-mc-item.is-pending .eo-qty, .eo-mc-item.is-pending .eo-mc-item__remove, .eo-mc-item.is-pending .eo-mc-item__confirm { pointer-events: none; } .eo-mc-item[hidden] { display: none; } .eo-mc-item.is-confirm .eo-qty { display: none; } .eo-mc-item__confirm { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--eo-ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .eo-mc-item__confirm[hidden] { display: none; } .eo-mc-item__price { color: var(--eo-ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .eo-mc-item__price--free { color: var(--eo-forest); } .eo-mc__foot { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--eo-fill); } .eo-mc__foot[hidden] { display: none; } .eo-mc__foot[data-pay="cod"] [data-eo-pay-only="bacs"], .eo-mc__foot[data-pay="bacs"] [data-eo-pay-only="cod"] { display: none; } .eo-mc__lines { display: flex; flex-direction: column; gap: 6px; } .eo-mc__lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; } .eo-mc__lines dt { color: var(--eo-muted); } .eo-mc__lines dd { flex: 1 1 auto; color: var(--eo-ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* fills its row: a figure's new width never moves the box (the instant add's "…") */ .eo-mc__lines > .eo-mc__total { margin-top: 6px; } .eo-mc__lines .eo-mc__total dt { color: var(--eo-ink); font-weight: 700; } .eo-mc__total dd { font: 700 22px/1.1 var(--eo-body); } /* the only large number in the sheet */ .eo-mc__fees { margin: 0; color: var(--eo-muted); font-size: 13px; line-height: 1.4; } /* "Delivery Rs 200 is added at checkout." (Isra's words) */ /* "View cart" | "Checkout (N)", side by side (Isra's pair); on the cart page only Checkout, the full width */ .eo-mc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .eo-mc__actions .eo-btn { min-height: 52px; font-size: 15px; } .eo-cartpage .eo-mc__actions { grid-template-columns: 1fr; } .eo-cartpage .eo-mc__viewcart { display: none; } /* The kit nudge under the lines (owner, 9 Oct 2026, after Isra's "Add 1 more set to save Rs 150"): on sage (no photo in it), the kit's steps already in the cart as a bar, "See kit" */ .eo-mc__nudge { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; padding: 14px; border-radius: 10px; background: var(--eo-sage); } .eo-mc__nudge-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; } .eo-mc__nudge-title { margin: 0; color: var(--eo-ink); font-size: 14px; font-weight: 700; line-height: 1.3; } .eo-mc__nudge-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--eo-white); } .eo-mc__nudge-bar span { display: block; height: 100%; border-radius: inherit; background: var(--eo-forest); } .eo-mc__nudge-line { margin: 0; color: var(--eo-muted); font-size: 12px; line-height: 1.35; } /* the kit's whole name, on two lines if need be */ .eo-mc__nudge-btn { flex: none; } .eo-mc__lines dd, .eo-mc__checkout [data-eo-pay-only] { transition: opacity .15s; } .eo-mc.is-recalc .eo-mc__lines dd, .eo-mc.is-recalc .eo-mc__checkout [data-eo-pay-only] { opacity: .5; } .eo-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .eo-pay__chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 48px; padding: 4px 8px; border: 0; background: var(--eo-white); color: var(--eo-ink); font-size: 14px; font-weight: 600; line-height: 18px; white-space: nowrap; cursor: pointer; } .eo-pay__chip[aria-checked="true"] { background: var(--eo-forest); color: var(--eo-white); } .eo-pay__check { display: none; flex: none; } .eo-pay__chip[aria-checked="true"] .eo-pay__check { display: block; } .eo-pay__name { display: inline-flex; align-items: center; gap: 6px; } .eo-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; line-height: 1.35; } .eo-pill--save { padding: 0 6px; background: var(--eo-sage); color: var(--eo-forest); line-height: 16px; } .eo-pay__chip .eo-pill--save { justify-content: center; min-width: 84px; } /* room for "Save Rs 999": "Save …" → the figure without the pill moving */ .eo-pay__fee { align-self: stretch; color: var(--eo-muted); font-size: 12px; font-weight: 400; line-height: 16px; text-align: center; } .eo-pay__chip[aria-checked="true"] .eo-pay__fee { color: var(--eo-on-dark); } .eo-mc__foot[data-pay="cod"] .eo-pay__fee, .eo-mc__foot[data-pay="bacs"] [data-eo-pay="bacs"] .eo-pill--save { display: none; } .eo-mc__arrive { display: flex; align-items: center; gap: 8px; margin-top: -4px; color: var(--eo-muted); font-size: 13px; line-height: 1.4; } .eo-mc__checkout { width: 100%; min-height: 52px; font-size: 15px; } .eo-mc__checkout-label { flex: 1 1 auto; text-align: center; } .eo-mc__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 8px; text-align: center; } .eo-mc__empty-title { color: var(--eo-ink); font: 800 20px/1.2 var(--eo-display); } .eo-mc__empty-line { color: var(--eo-muted); font-size: 14px; } .eo-mc__shop { min-height: 48px; margin-top: 14px; } @media (min-width: 768px) { .eo-mc { width: 420px; height: 100dvh; margin: 0 0 0 auto; } .eo-mc__panel { transform: translateX(100%); } .eo-mc__handle { display: none; } .eo-mc__head { padding-top: 14px; touch-action: auto; } } /* ---------- Chooser (shades): grey squares, the chosen one forest ---------- */ .eo-sheet { width: 100%; margin: auto 0 0; } .eo-sheet__panel { display: flex; flex-direction: column; gap: 16px; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--eo-white); transform: translateY(100%); transition: transform .24s ease-out; will-change: transform; } .eo-sheet.is-open .eo-sheet__panel { transform: none; } .eo-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .eo-sheet__title { font: 800 20px/1.2 var(--eo-display); } .eo-sheet__product { margin-top: 4px; color: var(--eo-muted); font-size: 14px; } .eo-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } .eo-option { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 0; background: var(--eo-fill); color: var(--eo-ink); font: 600 15px/1 var(--eo-body); cursor: pointer; } .eo-option__dot { width: 22px; height: 22px; border-radius: 50%; } .eo-option[aria-checked="true"] { background: var(--eo-forest); color: var(--eo-white); } .eo-sheet__add { width: 100%; } .eo-sheet__more { align-self: center; color: var(--eo-forest); font-size: 14px; font-weight: 600; text-underline-offset: 4px; } @media (min-width: 768px) { .eo-sheet { width: 440px; margin: auto; } .eo-sheet__panel { padding: 24px; opacity: 0; transform: scale(.96); transition: transform .22s var(--eo-ease), opacity .2s; } .eo-sheet.is-open .eo-sheet__panel { opacity: 1; transform: none; } } /* Slow / no network: one line at the bottom of the screen; nothing on the page moves. */ .eo-toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; width: max-content; max-width: min(92vw, 420px); margin: 0; padding: 12px 16px; background: var(--eo-ink); color: var(--eo-white); font-size: 14px; line-height: 1.4; text-align: center; box-shadow: 0 8px 24px rgba(21, 32, 26, .24); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s, transform .2s; } .eo-toast.is-shown { opacity: 1; transform: translate(-50%, 0); } .eo-offline [aria-disabled="true"].eo-btn { opacity: .55; cursor: not-allowed; } /* Write a review: the chooser's sheet (phones) / dialog. Fields have the checkout's 1px edge (inputs may). */ .eo-rv .eo-sheet__panel { max-height: 94dvh; } .eo-rv__form { display: flex; flex-direction: column; gap: 16px; } .eo-rv__rate { margin: 0; padding: 0; border: 0; } .eo-rv__label { display: block; margin-bottom: 6px; color: var(--eo-ink); font-size: 14px; font-weight: 600; line-height: 1.4; } .eo-rv__opt { color: var(--eo-muted); font-weight: 400; } .eo-rv__stars { display: flex; gap: 4px; } .eo-rv__star-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .eo-rv__star { display: grid; place-items: center; width: 48px; height: 48px; background: var(--eo-fill); color: var(--eo-on-dark); font-size: 28px; line-height: 1; cursor: pointer; transition: color .12s; } .eo-rv__star.is-on { color: var(--eo-forest); } .eo-rv__star-input:focus-visible + .eo-rv__star { outline: 2px solid var(--eo-forest); outline-offset: 2px; } .eo-rv__word { min-height: 20px; margin-top: 6px; color: var(--eo-muted); font-size: 14px; } .eo-rv .eo-field { display: block; } .eo-rv input[type="text"], .eo-rv input[type="email"], .eo-rv textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--eo-edge); border-radius: 6px; background: var(--eo-white); color: var(--eo-ink); font: 400 16px/1.4 var(--eo-body); appearance: none; -webkit-appearance: none; } .eo-rv textarea { min-height: 104px; padding: 12px 14px; resize: vertical; } .eo-rv input:focus, .eo-rv textarea:focus { border-color: var(--eo-forest); outline: 2px solid var(--eo-forest); outline-offset: -2px; } .eo-rv__photos { display: flex; flex-wrap: wrap; gap: 8px; } .eo-rv__add { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 72px; height: 72px; background: var(--eo-fill); color: var(--eo-ink); font-size: 12px; font-weight: 600; cursor: pointer; } .eo-rv__add:focus-within { outline: 2px solid var(--eo-forest); outline-offset: 2px; } .eo-rv__add input { position: absolute; width: 1px; height: 1px; opacity: 0; } .eo-rv__thumb { position: relative; width: 72px; height: 72px; background: var(--eo-fill); } .eo-rv__thumb img { width: 100%; height: 100%; object-fit: cover; } .eo-rv__thumb button { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: var(--eo-ink); color: var(--eo-white); cursor: pointer; } .eo-rv__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; cursor: pointer; } .eo-rv__consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--eo-forest); } .eo-rv__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .eo-rv__error { padding: 10px 12px; background: var(--eo-fill); color: var(--eo-ink); font-size: 14px; font-weight: 600; line-height: 1.45; } .eo-rv__send { width: 100%; min-height: 52px; } .eo-rv__note { margin-top: -6px; color: var(--eo-muted); font-size: 13px; text-align: center; } .eo-rv__done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0 8px; text-align: center; } .eo-rv__done-title { font: 800 24px/1.2 var(--eo-display); } .eo-rv__done-text { color: var(--eo-muted); font-size: 15px; } .eo-rv__done .eo-btn { min-width: 160px; margin-top: 12px; } .eo-rv__form[hidden], .eo-rv__done[hidden], .eo-rv__add[hidden] { display: none; } /* The large view. */ .eo-lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(21, 32, 26, .94); color: var(--eo-white); overflow: clip; } .eo-lightbox::backdrop { background: transparent; } .eo-lightbox__inner { position: relative; height: 100%; opacity: 0; transition: opacity .2s; } .eo-lightbox.is-open .eo-lightbox__inner { opacity: 1; } .eo-lightbox__track { height: 100%; gap: 0; } .eo-lightbox__slide { display: grid; place-items: center; width: 100%; height: 100%; } .eo-lightbox__stage { display: block; width: min(100vw, calc(100dvh - 128px), 900px); aspect-ratio: 1; padding: 3%; background: var(--eo-white); } /* the photo as it is, on white */ .eo-lightbox__img { width: 100%; height: 100%; object-fit: contain; } .eo-lightbox__count { position: absolute; top: 18px; left: var(--eo-gutter); font: 600 13px/1.4 var(--eo-body); font-variant-numeric: tabular-nums; } .eo-lightbox__close, .eo-lightbox__arrow { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: rgba(255, 255, 255, .12); color: var(--eo-white); cursor: pointer; } .eo-lightbox__close { top: 8px; right: 8px; } .eo-lightbox__arrow { top: calc(50% - 24px); display: none; } .eo-lightbox__arrow--prev { left: 16px; } .eo-lightbox__arrow--next { right: 16px; } .eo-lightbox__close:hover, .eo-lightbox__arrow:hover { background: rgba(255, 255, 255, .24); } @media (min-width: 1024px) { .eo-lightbox__arrow { display: grid; } } /* ---------- Product lists (templates/shop.php), the approved design (8 Oct 2026: design/esha-category-design/): the head (breadcrumb, title, the line | sort; a type's "Also in Face" row); phones: Filter + Sort, the concern quick chips, the grid 2 across; from 1024px the filter rail (240px, staying in view) | the chips in use, "Showing X of Y", 4 across, "Show 24 more". White tiles with the hairline (this design's README); pill chips; no 1px borders. ---------- */ .eo-list__head { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "intro" "sibs" "tools" "quick"; gap: 8px; padding: 18px 0 16px; } .eo-list__crumbs { grid-area: crumbs; padding: 0; } .eo-list__crumbs ol { font-size: 12px; } .eo-list__intro { grid-area: intro; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .eo-list__title { font-size: 32px; } .eo-list__line { color: var(--eo-muted); font-size: 13px; line-height: 1.4; } /* the category's own line, else its count, size and prices */ /* "Also in Face": the type's siblings, the current one filled. */ .eo-sibs { grid-area: sibs; min-width: 0; padding-top: 4px; } .eo-sibs__list { gap: 8px; } .eo-sib { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--eo-white); box-shadow: inset 0 0 0 1px var(--eo-line); color: var(--eo-ink); font: 500 14px/1 var(--eo-body); text-decoration: none; white-space: nowrap; } .eo-sib:hover { color: var(--eo-forest); } .eo-sib[aria-current], .eo-sib[aria-current]:hover { background: var(--eo-forest); color: var(--eo-white); box-shadow: none; } /* Filter and Sort (phones): two white 44px buttons; the number of filters in use on Filter. */ .eo-list__tools { grid-area: tools; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 4px; } .eo-tool { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--eo-white); color: var(--eo-ink); font: 600 14px/1 var(--eo-body); cursor: pointer; } .eo-tool__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--eo-forest); color: var(--eo-white); font: 700 11px/20px var(--eo-body); text-align: center; } .eo-tool__n[hidden] { display: none; } /* The concerns as quick chips (phones), and the chips of the filter sheet: white pills, forest when on (with ✕). */ .eo-quick { grid-area: quick; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 6px; } .eo-quick__list { gap: 8px; } .eo-qchip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--eo-white); box-shadow: inset 0 0 0 1px var(--eo-line); color: var(--eo-ink); font: 500 14px/1 var(--eo-body); text-decoration: none; white-space: nowrap; cursor: pointer; } .eo-qchip:hover { color: var(--eo-forest); } .eo-qchip[aria-checked="true"], .eo-qchip[aria-checked="true"]:hover { background: var(--eo-forest); color: var(--eo-white); box-shadow: none; } .eo-qchip__n { color: var(--eo-muted); } .eo-qchip[aria-checked="true"] .eo-qchip__n { color: var(--eo-on-dark); } .eo-qchip__x { display: none; } .eo-qchip[aria-checked="true"] .eo-qchip__x { display: inline-flex; } .eo-qchip.is-empty, .eo-frow.is-empty { opacity: .45; } /* The sort: the Esha dropdown (owner, 8 Oct 2026: "make dropdowns esha theme native"), a
list of links that works without JavaScript; a white button (phones: icon + choice; desktop: "Sort" + choice), a white list on a soft shadow, the current choice in forest with a tick. home.js closes it on Esc / a tap elsewhere and moves with the arrows. */ .eo-dd { position: relative; } .eo-dd__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 8px; background: var(--eo-white); color: var(--eo-ink); font: 600 14px/1 var(--eo-body); white-space: nowrap; list-style: none; cursor: pointer; } .eo-dd__btn::-webkit-details-marker { display: none; } .eo-dd__btn:hover { color: var(--eo-forest); } .eo-dd__btn .eo-icon { flex: none; } .eo-dd__caret { transition: transform .15s; } .eo-dd[open] .eo-dd__caret { transform: rotate(180deg); } .eo-dd__btn:focus:not(:focus-visible) { outline: none; } .eo-dd__label { color: var(--eo-muted); font-weight: 500; } .eo-dd__list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 25; min-width: 100%; width: max-content; padding: 6px 0; border-radius: 8px; background: var(--eo-white); box-shadow: 0 10px 28px rgba(21, 32, 26, .16); } .eo-dd__opt { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 0 16px; color: var(--eo-ink); font-size: 14px; text-decoration: none; white-space: nowrap; } .eo-dd__opt:hover { background: var(--eo-fill); color: var(--eo-ink); } .eo-dd__opt:focus-visible { background: var(--eo-fill); color: var(--eo-ink); outline: none; } .eo-dd__opt[aria-current="true"] { color: var(--eo-forest); font-weight: 700; } .eo-dd__opt .eo-icon { flex: none; color: var(--eo-forest); } /* The results: the chips in use (desktop), "Showing X of Y", the grid, "Show 24 more" / "Clear filters". */ .eo-results { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .eo-results__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .eo-results__shown, .eo-results__count { color: var(--eo-muted); font-size: 13px; line-height: 1.4; } .eo-apills { display: flex; flex-wrap: wrap; gap: 10px; } .eo-apills:empty { display: none; } .eo-apill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--eo-forest); color: var(--eo-white); font: 500 13px/1 var(--eo-body); text-decoration: none; } .eo-apill:hover { background: var(--eo-ink); color: var(--eo-white); } .eo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .eo-grid__item { display: flex; min-width: 0; } .eo-grid__item[hidden] { display: none; } .eo-list-page .eo-card__media { box-shadow: inset 0 0 0 1px var(--eo-line); } .eo-flag--no1 { background: var(--eo-white); color: var(--eo-ink); box-shadow: inset 0 0 0 1px var(--eo-line); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .eo-results__foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; } .eo-results__btn { width: 100%; height: 44px; box-shadow: inset 0 0 0 1px var(--eo-line); color: var(--eo-forest); font-size: 14px; } .eo-results__btn[hidden] { display: none; } .eo-list__empty { padding: 24px 0 8px; } .eo-list__empty-title { font: 800 22px/1.3 var(--eo-display); } .eo-list__empty p + p { margin-top: 8px; color: var(--eo-muted); } .eo-list__empty a { color: var(--eo-forest); text-underline-offset: 3px; } /* The filter rail (desktop): "Filter" · "Clear all", then each group (a hairline between), its rows 36px: an 18px box, the value, its count on the right. A long group shows its first rows and "Show N more" (all of them without JS). */ .eo-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 6px; } .eo-rail__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; box-shadow: inset 0 -1px 0 var(--eo-line); } .eo-rail__clear { color: var(--eo-forest); font: 500 13px/1 var(--eo-body); text-decoration: none; } .eo-rail__clear:hover { color: var(--eo-ink); text-decoration: underline; text-underline-offset: 3px; } .eo-rail__group { display: flex; flex-direction: column; gap: 2px; } .eo-rail__group + .eo-rail__group { box-shadow: inset 0 1px 0 var(--eo-line); } .eo-rail__title { padding: 14px 0 10px; color: var(--eo-ink); font: 600 13px/1 var(--eo-body); letter-spacing: .02em; } .eo-frow { display: flex; align-items: center; height: 36px; color: var(--eo-ink); font: 400 14px/1 var(--eo-body); text-decoration: none; cursor: pointer; } .eo-frow__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 10px; border-radius: 4px; background: var(--eo-white); box-shadow: inset 0 0 0 1.5px rgba(21, 32, 26, .25); color: var(--eo-white); } .eo-frow__tick { visibility: hidden; } .eo-frow[aria-checked="true"] .eo-frow__box { background: var(--eo-forest); box-shadow: none; } .eo-frow[aria-checked="true"] .eo-frow__tick { visibility: visible; } .eo-frow__label { flex: 1; min-width: 0; } .eo-frow:hover { color: var(--eo-ink); } .eo-frow:hover .eo-frow__label { text-decoration: underline; text-underline-offset: 3px; } .eo-frow__n { color: var(--eo-muted); font-size: 12px; } .eo-rail__more { align-self: flex-start; padding: 8px 0 4px 28px; border: 0; background: none; color: var(--eo-forest); font: 500 13px/1 var(--eo-body); cursor: pointer; } .eo-rail__more, .eo-fsheet__chips > [data-eo-extra-toggle] { display: none; } .eo-js .eo-rail__group:not(.is-expanded) [data-eo-extra], .eo-js .eo-fsheet__group:not(.is-expanded) [data-eo-extra] { display: none; } .eo-js .eo-rail__group:not(.is-expanded) .eo-rail__more, .eo-js .eo-fsheet__group:not(.is-expanded) .eo-fsheet__chips > [data-eo-extra-toggle] { display: block; } /* The filter sheet (phones): the groups as chips with their counts, one "Show N products" that closes it. */ .eo-fsheet__panel { gap: 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); overflow: hidden; border-radius: 14px 14px 0 0; max-height: 88dvh; } .eo-fsheet__head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 0 8px; touch-action: none; } .eo-fsheet__handle { position: absolute; top: 0; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: 2px; background: rgba(21, 32, 26, .2); } .eo-fsheet__title { font: 800 20px/1.1 var(--eo-display); } .eo-fsheet__clear { color: var(--eo-forest); font: 500 14px/1 var(--eo-body); text-decoration: none; } .eo-fsheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .eo-fsheet__group .eo-eyebrow { padding: 16px 0 8px; } .eo-fsheet__group:first-child .eo-eyebrow { padding-top: 10px; } .eo-fsheet__chips { display: flex; flex-wrap: wrap; gap: 8px; } .eo-fsheet__foot { flex: none; padding-top: 18px; } .eo-fsheet__show { width: 100%; height: 50px; font-size: 15px; } @media (min-width: 1024px) { .eo-list__head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "crumbs crumbs" "intro tools" "sibs sibs"; align-items: end; gap: 10px 24px; padding: 28px 0 24px; } .eo-list__crumbs ol { font-size: 13px; } .eo-list__title { font-size: 40px; } .eo-list__intro { max-width: 720px; } .eo-list__line { font-size: 15px; line-height: 1.45; } .eo-list__tools { display: block; padding: 0; } .eo-dd__btn { gap: 10px; padding: 0 14px; } .eo-sibs { display: flex; align-items: center; gap: 8px; padding-top: 4px; } .eo-sibs__label { margin-right: 4px; white-space: nowrap; } .eo-sibs__list.eo-bleed { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } .eo-sib { height: 36px; } .eo-list__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 8px; } .eo-list__body--norail { grid-template-columns: minmax(0, 1fr); } .eo-results { gap: 20px; } .eo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .eo-results__foot { padding-top: 16px; } .eo-results__btn { width: auto; padding: 0 28px; } } /* ---------- Info pages (templates/page.php): privacy policy, delivery & exchange… at a reading width ---------- */ .eo-page__title { font: 800 28px/1.15 var(--eo-display); } .eo-page__updated { margin-top: 6px; color: var(--eo-muted); font-size: 13px; } .eo-page__body { margin-top: 24px; } .eo-prose h2 { margin-top: 32px; font: 800 22px/1.25 var(--eo-display); } .eo-prose h3 { margin-top: 24px; font: 800 18px/1.3 var(--eo-display); } .eo-prose h2 + p, .eo-prose h2 + ul, .eo-prose h3 + p, .eo-prose h3 + ul { margin-top: 10px; } .eo-prose strong { font-weight: 700; } @media (min-width: 1024px) { .eo-page__title { font-size: 40px; } .eo-prose h2 { font-size: 26px; } } /* ---------- Cart page (templates/cart.php): the mini cart's parts on the page. Phones: lines, then the summary. From 1024px: lines | summary (staying in view). ---------- */ .eo-cartpage__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; } .eo-cartpage__title { font: 800 28px/1.15 var(--eo-display); } .eo-cartpage .eo-mc__meta { font-size: 14px; } .eo-cartpage__grid { display: grid; gap: 24px; margin-top: 18px; } .eo-cartpage__items { min-width: 0; } .eo-cartpage .eo-mc__band { margin-bottom: 8px; } .eo-cartpage .eo-mc-item { grid-template-columns: 72px minmax(0, 1fr) auto; padding: 16px 0; } .eo-cartpage .eo-mc-item__media, .eo-cartpage .eo-mc-item__img { width: 72px; height: 72px; } .eo-cartpage .eo-mc-item__name { font-size: 15px; } .eo-cartpage .eo-mc-item__price { font-size: 15px; } .eo-cartpage__summary:has(> .eo-mc__foot[hidden]) { display: none; } .eo-cartpage__sum-title { padding: 16px 16px 0; background: var(--eo-fill); font: 800 20px/1.2 var(--eo-display); } .eo-cartpage .eo-mc__empty { align-items: flex-start; padding: 24px 0; text-align: left; } .eo-cartpage .eo-pay__chip { background: var(--eo-sand); } .eo-cartpage .eo-pay__chip[aria-checked="true"] { background: var(--eo-forest); } .eo-cartpage.is-recalc .eo-mc__lines dd, .eo-cartpage.is-recalc .eo-mc__checkout [data-eo-pay-only] { opacity: .5; } /* "Add to your order" (inc/cart.php eo_cart_recs_html()): the standard cards on the page's sand, under it all. */ .eo-head__line { color: var(--eo-muted); font-size: 14px; } .eo-cartrecs[hidden] { display: none; } @media (min-width: 1024px) { .eo-cartpage__title { font-size: 40px; } .eo-cartpage__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; } .eo-cartpage__summary { position: sticky; top: 96px; } } /* ---------- Checkout, order received, account (templates/wc-page.php): WooCommerce's standard markup in our system. Square, filled; form fields are the one place (with search) that keeps a 1px edge. ---------- */ .eo-header--checkout .eo-header__bar { grid-template-columns: 1fr auto 1fr; } .eo-header__back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--eo-ink); font: 600 14px/1 var(--eo-body); text-decoration: none; } .eo-header__back:hover { text-decoration: underline 1px; text-underline-offset: 4px; } .eo-wcpage__title { margin-top: 18px; font: 800 28px/1.15 var(--eo-display); } .eo-crumbs + .eo-wcpage__title { margin-top: 0; } .eo-wc { margin-top: 20px; color: var(--eo-ink); } .eo-wc h2, .eo-wc h3 { margin: 24px 0 12px; font: 800 20px/1.25 var(--eo-display); color: var(--eo-ink); } .eo-wc a { color: var(--eo-forest); text-underline-offset: 3px; } .eo-wc p { margin: 0 0 12px; } .eo-wc ul { list-style: none; padding: 0; } .eo-wc mark { background: none; color: inherit; font-weight: 700; } .eo-wc address { font-style: normal; line-height: 1.6; } .eo-wc strong { font-weight: 700; } /* Notices (ours and WooCommerce's). */ .eo-notices:empty, .woocommerce-notices-wrapper:empty { display: none; } .eo-store .woocommerce-error, .eo-store .woocommerce-message, .eo-store .woocommerce-info { display: block; margin: 0 0 16px; padding: 14px 16px; list-style: none; background: var(--eo-fill); color: var(--eo-ink); font-size: 14px; line-height: 1.5; } .eo-store .woocommerce-error { background: rgba(21, 32, 26, .06); } .eo-store .woocommerce-error li, .eo-store .woocommerce-message li { margin: 0; } .eo-store .woocommerce-error li + li { margin-top: 4px; } .eo-store .woocommerce-message .button, .eo-store .woocommerce-info .button { display: inline; min-height: 0; margin-left: 8px; padding: 0; background: none; color: var(--eo-forest); font: inherit; letter-spacing: 0; text-transform: none; text-decoration: underline; } .eo-cartpage .eo-notices { margin-top: 16px; } /* Fields. */ .eo-wc .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 0; } .eo-wc .form-row label { color: var(--eo-ink); font-size: 14px; font-weight: 600; line-height: 1.4; } .eo-wc .form-row label.checkbox, .eo-wc .form-row .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 10px; font-weight: 400; } .eo-wc .required { color: var(--eo-forest); text-decoration: none; border: 0; } .eo-wc .optional { color: var(--eo-muted); font-weight: 400; } .eo-wc .description, .eo-wc .woocommerce-password-hint { color: var(--eo-muted) !important; font-size: 13px !important; } .eo-wc .input-text, .eo-wc select, .eo-wc textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--eo-edge); border-radius: 6px; background: var(--eo-white); color: var(--eo-ink); font: 400 16px/1.4 var(--eo-body); /* 16px: no zoom on iPhones */ box-shadow: none; appearance: none; -webkit-appearance: none; } .eo-wc textarea { min-height: 96px; padding: 12px 14px; } .eo-wc .input-text:focus, .eo-wc select:focus, .eo-wc textarea:focus { border-color: var(--eo-forest); outline: 2px solid var(--eo-forest); outline-offset: -2px; } .eo-wc .woocommerce-invalid .input-text { border-color: var(--eo-forest); } .eo-wc input[type="checkbox"], .eo-wc input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--eo-forest); } .eo-wc .select2-container { width: 100% !important; } .eo-wc .select2-container .select2-selection--single { height: 48px; border: 1px solid var(--eo-edge); border-radius: 6px; } .eo-wc .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 14px; color: var(--eo-ink); line-height: 46px; } .eo-wc .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; } /* select2's list (the checkout's State field) opens at the end of the page, outside .eo-wc: the same look as the Esha dropdown. */ .eo-store .select2-dropdown { border: 0; border-radius: 6px; background: var(--eo-white); box-shadow: 0 10px 28px rgba(21, 32, 26, .16); font: 400 15px/1.4 var(--eo-body); } .eo-store .select2-search--dropdown { padding: 8px; } .eo-store .select2-search--dropdown .select2-search__field { height: 40px; padding: 0 12px; border: 1px solid var(--eo-edge); border-radius: 6px; font: inherit; } .eo-store .select2-search--dropdown .select2-search__field:focus { border-color: var(--eo-forest); outline: 2px solid var(--eo-forest); outline-offset: -2px; } .eo-store .select2-results__option { padding: 10px 16px; color: var(--eo-ink); } .eo-store .select2-container--default .select2-results__option--highlighted[aria-selected], .eo-store .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--eo-fill); color: var(--eo-ink); } .eo-store .select2-container--default .select2-results__option[aria-selected="true"], .eo-store .select2-container--default .select2-results__option[data-selected="true"] { background: var(--eo-white); color: var(--eo-forest); font-weight: 700; } .eo-wc .woocommerce-input-wrapper { display: block; } .eo-wc .woocommerce-billing-fields__field-wrapper, .eo-wc .woocommerce-shipping-fields__field-wrapper, .eo-wc .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 14px; } .eo-wc .clear { display: none; } .eo-wc .eo-field-hidden { display: none !important; } /* the country: Pakistan, the store's only one (inc/checkout.php) */ /* Buttons: forest, like every button; "Place order" the full-width one. */ .eo-wc .button, .eo-wc button[type="submit"], .eo-wc .woocommerce-Button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 6px; background: var(--eo-forest); color: var(--eo-white); font: 600 15px/1 var(--eo-body); text-decoration: none; cursor: pointer; } .eo-wc .button:hover, .eo-wc button[type="submit"]:hover { background: var(--eo-ink); color: var(--eo-white); } .eo-wc #place_order { width: 100%; min-height: 56px; background: var(--eo-forest); font-size: 15px; } .eo-wc #place_order:hover { box-shadow: inset 0 0 0 100px rgba(21, 32, 26, .16); } /* Tables: no lines; the total on the grey fill. */ .eo-wc table { width: 100%; border: 0; border-collapse: collapse; font-size: 14px; } .eo-wc th, .eo-wc td { padding: 10px 0; border: 0; text-align: left; vertical-align: top; } .eo-wc td:last-child, .eo-wc th:last-child { text-align: right; } .eo-wc thead th { color: var(--eo-muted); font: 600 12px/1.3 var(--eo-body); letter-spacing: .08em; text-transform: uppercase; } .eo-wc tfoot th { font-weight: 400; color: var(--eo-muted); } .eo-wc .order-total th, .eo-wc .order-total td { padding: 14px 12px; background: var(--eo-fill); color: var(--eo-ink); font-weight: 700; } .eo-wc .order-total td { font-size: 20px; } .eo-wc .product-quantity { font-weight: 400; color: var(--eo-muted); } .eo-wc .woocommerce-Price-amount { white-space: nowrap; } /* Checkout: details | your order (staying in view) from 1024px. */ .eo-wc .woocommerce-form-coupon-toggle .woocommerce-info, .eo-wc .woocommerce-form-login-toggle .woocommerce-info { margin-bottom: 12px; } .eo-wc form.checkout_coupon, .eo-wcpage--checkout .eo-wc form.woocommerce-form-login { margin: 0 0 18px; padding: 16px; background: var(--eo-fill); } .eo-wc .password-input { position: relative; display: block; } .eo-wc .password-input .input-text { padding-right: 64px; } .eo-wc .show-password-input { position: absolute; top: 0; right: 0; height: 48px; padding: 0 14px; border: 0; background: none; color: var(--eo-forest); font-size: 13px; font-weight: 600; cursor: pointer; } .eo-wc .show-password-input::after { content: 'Show'; } .eo-wc .show-password-input.display-password::after { content: 'Hide'; } .eo-wc form.checkout_coupon { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .eo-wc form.checkout_coupon p { margin: 0; } .eo-wc form.checkout_coupon .form-row-first { flex: 1 1 200px; margin: 0; } .eo-wc #order_review_heading { margin-top: 28px; } .eo-wc #order_review { min-width: 0; } .eo-wc #payment { margin-top: 8px; } .eo-wc .wc_payment_methods { display: grid; gap: 8px; } .eo-wc .wc_payment_method { padding: 14px; background: var(--eo-fill); } .eo-wc .wc_payment_method > label { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; font-weight: 600; } .eo-wc .wc_payment_method input { vertical-align: middle; } .eo-wc .payment_box { margin-top: 10px; padding: 12px; background: var(--eo-white); color: var(--eo-ink); font-size: 14px; white-space: pre-line; } .eo-wc .payment_box p:last-child { margin-bottom: 0; } .eo-wc .place-order { margin-top: 16px; } .eo-wc .woocommerce-privacy-policy-text, .eo-wc .woocommerce-terms-and-conditions-wrapper { color: var(--eo-muted); font-size: 13px; } .eo-wc .blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; } /* Order received. */ .eo-wc .woocommerce-notice--success { margin-bottom: 16px; padding: 14px 16px; background: var(--eo-fill); font-weight: 600; } .eo-wc .woocommerce-order-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; } .eo-wc .woocommerce-order-overview li { padding: 12px; background: var(--eo-fill); color: var(--eo-muted); font-size: 13px; } .eo-wc .woocommerce-order-overview li strong { display: block; margin-top: 4px; color: var(--eo-ink); font-size: 15px; } .eo-wc .woocommerce-bacs-bank-details ul { padding: 12px; background: var(--eo-fill); } /* Account: the menu as chips (a swipe row on phones), then the page. Sign in | create an account side by side. */ .eo-wc .woocommerce-MyAccount-navigation ul { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--eo-gutter)) 20px; padding: 0 var(--eo-gutter); scrollbar-width: none; } .eo-wc .woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; background: var(--eo-fill); color: var(--eo-ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; } .eo-wc .woocommerce-MyAccount-navigation .is-active a { background: var(--eo-forest); color: var(--eo-white); } .eo-wc .woocommerce-MyAccount-content { min-width: 0; } .eo-wc .u-columns { display: grid; gap: 20px; } .eo-wc .u-column1, .eo-wc .u-column2 { padding: 20px; background: var(--eo-fill); } .eo-wc .u-columns h2 { margin-top: 0; } .eo-wc .woocommerce-form-login .form-row:last-of-type, .eo-wc .woocommerce-form-register .form-row:last-of-type { margin-bottom: 0; } .eo-wc .lost_password { margin-top: 12px; font-size: 14px; } .eo-wc .woocommerce-Addresses { display: grid; gap: 20px; } .eo-wc .woocommerce-Address { padding: 16px; background: var(--eo-fill); } .eo-wc .woocommerce-password-strength { margin-top: 6px; padding: 6px 10px; background: var(--eo-fill); font-size: 13px; } .eo-wc .woocommerce-password-strength.strong { color: var(--eo-forest); } .eo-wc .woocommerce-password-strength.short, .eo-wc .woocommerce-password-strength.bad { color: var(--eo-forest); } @media (max-width: 767px) { /* order tables: one block per order */ .eo-wc table.shop_table_responsive thead { display: none; } .eo-wc table.shop_table_responsive tr { display: block; margin-bottom: 10px; padding: 8px 12px; background: var(--eo-fill); } .eo-wc table.shop_table_responsive td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; text-align: right; } .eo-wc table.shop_table_responsive td::before { content: attr(data-title); color: var(--eo-muted); font-weight: 600; text-align: left; } .eo-wc table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions::before { content: none; } } @media (min-width: 600px) { .eo-wc .woocommerce-billing-fields__field-wrapper, .eo-wc .woocommerce-shipping-fields__field-wrapper, .eo-wc .woocommerce-address-fields__field-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eo-wc .form-row-wide, .eo-wc #billing_address_1_field, .eo-wc #billing_address_2_field, .eo-wc #shipping_address_1_field, .eo-wc #shipping_address_2_field, .eo-wc #billing_email_field, .eo-wc #billing_country_field { grid-column: 1 / -1; } .eo-wc .woocommerce-order-overview { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .eo-wc .u-columns, .eo-wc .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .eo-wcpage__title { font-size: 40px; } .eo-wc .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; } .eo-wc .woocommerce-MyAccount-navigation ul { flex-direction: column; margin: 0; padding: 0; overflow: visible; } .eo-wc .woocommerce-MyAccount-navigation a { width: 100%; height: 44px; } } /* ---------- The checkout form (templates/woocommerce/checkout/), the approved design: design/esha-checkout-design/ (8 Oct 2026), laid out as Cohaar's (owner, 9 Oct 2026: "Do it like cohaar. In the end of the page"). WooCommerce's own form re-ordered: the details card (two numbered steps), then "Your order" (the items folded, the discount code, How you'll pay, the money, Place order): under it on phones, with a bar at the bottom while its Place order is out of view; beside it from 1024px (420px, staying in view). Hairlines are inset shadows; the fields are the one place for a border. ---------- */ .eo-header--checkout .eo-header__bar { height: 56px; padding-left: var(--eo-gutter); padding-right: var(--eo-gutter); } .eo-header--checkout .eo-header__back { justify-self: start; gap: 4px; font-weight: 500; } .eo-header__back-long, .eo-header__secure-more { display: none; } .eo-header__secure { justify-self: end; display: inline-flex; align-items: center; gap: 5px; color: var(--eo-muted); font: 500 12px/1 var(--eo-body); white-space: nowrap; } .eo-wcpage--checkout:has(.eo-co) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* room for the Place order bar */ html:has(.eo-co) { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* a focused field or row never ends up behind the bar */ .eo-co__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 20px 0 14px; } .eo-co__head .eo-wcpage__title { margin: 0; font-size: 30px; line-height: 1; letter-spacing: -.02em; } .eo-co__haveacc { margin: 0; color: var(--eo-muted); font-size: 14px; line-height: 1.45; text-align: right; } .eo-co__haveacc a { color: var(--eo-forest); font-weight: 600; } .eo-co__haveacc-more { display: none; } .eo-wcpage--checkout .eo-co__head + .eo-wc { margin-top: 0; } .eo-co__grid { display: flex; flex-direction: column; gap: 16px; } .eo-co__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .eo-co__card, .eo-co__order, .eo-co__login form.login { background: var(--eo-white); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--eo-line); } .eo-co__card, .eo-co__login form.login { overflow: hidden; } .eo-co__muted { color: var(--eo-muted); font-weight: 400; } /* The sign-in form, opened by "Log in" beside the title. */ .eo-co__login form.login { margin: 0 0 16px; padding: 18px 16px; } .eo-co__login form.login > p:first-child { color: var(--eo-muted); font-size: 14px; } /* Steps. */ .eo-co__step { display: flex; flex-direction: column; gap: 14px; padding: 20px 16px 22px; } .eo-co__step + .eo-co__step { box-shadow: inset 0 1px 0 var(--eo-line); } /* a hairline between steps */ .eo-co h2.eo-co__steptitle { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 18px/1.2 var(--eo-display); letter-spacing: -.02em; } .eo-co__num { flex: none; width: 26px; height: 26px; border-radius: 13px; background: var(--eo-forest); color: var(--eo-white); font: 700 13px/26px var(--eo-body); letter-spacing: 0; text-align: center; } .eo-co__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .eo-co .woocommerce-additional-fields, .eo-co .woocommerce-account-fields { display: contents; } /* Fields: label 13px/600 above, 48px with a 1px edge, 16px text on phones (no zoom on iPhones), hint 12px under. */ :is(.eo-co, .eo-co__login) .form-row { display: block; margin: 0; padding: 0; } :is(.eo-co, .eo-co__login) .form-row label { display: block; margin: 0 0 6px; color: var(--eo-ink); font: 600 13px/1.3 var(--eo-body); } .eo-co .form-row .required { display: none; } /* every field is needed but the note, which says "(optional)" */ .eo-co .form-row .optional { color: var(--eo-muted); font-weight: 400; } .eo-co__login .form-row + .form-row { margin-top: 14px; } .eo-co__login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-weight: 400; } :is(.eo-co, .eo-co__login) .input-text, .eo-co select { display: block; width: 100%; height: 48px; min-height: 48px; padding: 0 14px; border: 1px solid var(--eo-input); border-radius: 8px; background: var(--eo-white); color: var(--eo-ink); font: 400 16px/1.2 var(--eo-body); box-shadow: none; outline: none; } :is(.eo-co, .eo-co__login) .input-text::placeholder { color: var(--eo-hint); opacity: 1; } :is(.eo-co, .eo-co__login) .input-text:focus, .eo-co select:focus { border-color: var(--eo-forest); outline: none; box-shadow: none; } /* focus: the edge goes dark, no glow (owner, 8 Oct 2026: "remove this green shadow from all fields") */ .eo-co .woocommerce-invalid .input-text { border-color: var(--eo-input); } .eo-co .woocommerce-invalid .input-text:focus { border-color: var(--eo-forest); } /* Needs fixing: after Place order (WooCommerce's message under the field), or a wrong email / phone typed. */ .eo-co .form-row:has(.checkout-inline-error-message) .input-text, .eo-co .woocommerce-invalid-email .input-text, .eo-co .woocommerce-invalid-phone .input-text, .eo-co #billing_phone.phone-error, .eo-co #coupon_code.has-error { border: 1px solid var(--eo-error) !important; background: var(--eo-white) !important; /* !important: the theme's phone check paints it red-filled */ } .eo-co #billing_phone_field:has(.checkout-inline-error-message) #billing_phone, .eo-co #billing_phone_field #billing_phone.phone-error { border-color: var(--eo-error) !important; } /* over the COD note's amber edge */ .eo-co .eo-hint, .eo-co .checkout-inline-error-message, .eo-co .coupon-error-notice { display: block; margin: 6px 0 0; color: var(--eo-muted); font: 400 12px/1.4 var(--eo-body); } .eo-co .checkout-inline-error-message, .eo-co .coupon-error-notice { color: var(--eo-error); } .eo-co .form-row:has(.checkout-inline-error-message) .eo-hint, .eo-co .phone-error-msg { display: none !important; } /* the message takes the hint's place */ .eo-co .eo-field-hidden { display: none !important; } .eo-co .woocommerce-input-wrapper { display: block; } /* How you'll pay: whole rows; chosen sage with a filled forest dot, the others white with a hairline. */ .eo-co .eo-co__pay { margin: 0; } .eo-co .eo-co__paytitle { margin: 0 0 12px; color: var(--eo-ink); font: 800 18px/1.2 var(--eo-display); letter-spacing: -.02em; } .eo-co .eo-co__methods { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } .eo-co .eo-co__method { margin: 0; padding: 0; background: none; } .eo-co .eo-co__method > input.input-radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .eo-co .eo-co__method > label.eo-co__methodrow { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 0; padding: 14px; border-radius: 10px; background: var(--eo-white); box-shadow: inset 0 0 0 1px rgba(21, 32, 26, .12); cursor: pointer; font-weight: 400; } .eo-co .eo-co__method > input:checked + .eo-co__methodrow { background: var(--eo-sage); box-shadow: none; } .eo-co .eo-co__method > input:focus-visible + .eo-co__methodrow { outline: 2px solid var(--eo-forest); outline-offset: 2px; } .eo-co__dot { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 11px; background: var(--eo-white); box-shadow: inset 0 0 0 2px var(--eo-hint); } /* a ring, not a border (fields are the one place for those) */ .eo-co .eo-co__method > input:checked + .eo-co__methodrow .eo-co__dot { box-shadow: inset 0 0 0 7px var(--eo-forest); } .eo-co__methodtext { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; } .eo-co__methodtitle { color: var(--eo-ink); font: 600 15px/1.3 var(--eo-body); } .eo-co__methodtag { color: var(--eo-forest); font-weight: 500; } /* Bank transfer's saving, the COD fee it avoids (owner, 9 Oct 2026: "of a different color, maybe the orange we used on the mobile menu for popular"): white on --eo-fire (5.2:1) */ .eo-co__save { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--eo-fire); color: var(--eo-white); font: 700 12px/18px var(--eo-body); vertical-align: 1px; white-space: nowrap; } /* The shimmer is in the pill, not round the row (owner, 9 Oct 2026, of an orange edge on the row: "it looks like the customer wont know which one is selected. because both look selected"): the chosen row alone is sage with a filled dot. The "Popular" band sweeps through the pill behind its white text every 2.4 s; still for less motion. */ .eo-co__save { position: relative; overflow: hidden; isolation: isolate; vertical-align: middle; } /* overflow moves an inline-block's baseline to its bottom: centred on the title instead */ .eo-co__save::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 38%, var(--eo-fire-glow) 50%, transparent 62%) 0 0 / 300% 100%; opacity: .6; content: ""; animation: eo-fire 2.4s linear infinite; } @media (prefers-reduced-motion: reduce) { .eo-co__save::after { animation: none; opacity: 0; } } .eo-co__methodmeta { color: var(--eo-muted); font: 400 13px/1.45 var(--eo-body); } .eo-co .payment_box { margin: 10px 0 0; padding: 14px; border-radius: 10px; background: var(--eo-sand); color: var(--eo-ink); font-size: 14px; white-space: normal; } .eo-co .eo-co__bank { display: flex; flex-direction: column; gap: 10px; } .eo-co .eo-co__banktitle { margin: 0; color: var(--eo-ink); font: 600 13px/1.45 var(--eo-body); } .eo-co .eo-co__bankrows { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } .eo-co__bankrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .eo-co__bankinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .eo-co__banklabel { color: var(--eo-muted); font: 400 13px/1.45 var(--eo-body); } .eo-co__bankvalue { color: var(--eo-ink); font: 600 15px/1.2 var(--eo-body); letter-spacing: .02em; overflow-wrap: anywhere; } .eo-co__bankvalue--long { font-size: 14px; letter-spacing: .01em; } .eo-co .eo-co__banknote { margin: 0; color: var(--eo-muted); font-size: 13px; } .eo-co__copy, .eo-co button.eo-co__apply { flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: var(--eo-sage); color: var(--eo-forest); font: 600 12px/1 var(--eo-body); cursor: pointer; } .eo-co__copy { min-width: 64px; height: 30px; padding: 0 10px; } .eo-co__copy:hover, .eo-co button.eo-co__apply:hover { background: var(--eo-forest); color: var(--eo-white); } .eo-co__copy.is-copied { background: var(--eo-forest); color: var(--eo-white); } .eo-co .eo-co__payfoot { margin: 0; } /* "Your order" (Cohaar's card): its parts in the order they are read. WooCommerce's #order_review and its review fragment are laid open (display: contents), so the lines, How you'll pay (#payment) and the money lines take their places among the card's own rows. WooCommerce's "please wait" cover over the fragment covers the card. */ .eo-co__order { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 16px; } .eo-co__order > #order_review, .eo-co__review { display: contents; } .eo-co h2.eo-co__ordertitle, .eo-wc .eo-co #order_review_heading { order: 0; margin: 0; font: 800 22px/1.15 var(--eo-display); letter-spacing: -.02em; } .eo-co__itemsrow { order: 1; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin: 0; padding: 0 0 14px; border: 0; background: none; box-shadow: inset 0 -1px 0 var(--eo-line); color: var(--eo-ink); font: 400 15px/1.2 var(--eo-body); text-align: left; cursor: pointer; } .eo-co__thumbs { display: flex; gap: 4px; } .eo-co__minithumb { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; background: var(--eo-white); box-shadow: inset 0 0 0 1px var(--eo-line); overflow: hidden; } .eo-co__minithumb img { width: 84%; height: 84%; object-fit: contain; } .eo-co__itemscount { flex: 1; font-weight: 600; } .eo-co__itemstotal { font-weight: 700; white-space: nowrap; } .eo-co__itemsrow .eo-icon { flex: none; color: var(--eo-muted); transition: transform .2s var(--eo-ease); } .eo-co__itemsrow[aria-expanded="true"] .eo-icon { transform: rotate(180deg); } .eo-co__items { order: 2; display: none; flex-direction: column; gap: 12px; margin: 0; padding: 0 0 14px; list-style: none; box-shadow: inset 0 -1px 0 var(--eo-line); } .eo-co__order.is-items-open .eo-co__items { display: flex; } .eo-co__coupon, .eo-co__order > .woocommerce-message, .eo-co__order > .woocommerce-error, .eo-co__order > .woocommerce-info { order: 3; } .eo-co .eo-co__pay { order: 4; } .eo-co__totals { order: 5; } .eo-co__place { order: 6; } .eo-co__help { order: 7; } .eo-co__item { display: flex; align-items: center; gap: 12px; } .eo-co__thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 8px; background: var(--eo-white); box-shadow: inset 0 0 0 1px var(--eo-line); overflow: hidden; } .eo-co__thumb img { width: 80%; height: 80%; object-fit: contain; } .eo-co__iteminfo { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } .eo-co__itemname { color: var(--eo-ink); font: 600 14px/1.3 var(--eo-body); } .eo-co__iteminfo .product-quantity { color: var(--eo-muted); font: 400 13px/1.45 var(--eo-body); } .eo-co__iteminfo dl.variation { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0; color: var(--eo-muted); font-size: 13px; line-height: 1.45; } .eo-co__iteminfo dl.variation dt, .eo-co__iteminfo dl.variation dd, .eo-co__iteminfo dl.variation p { margin: 0; font-weight: 400; } .eo-co__itemprice { flex: none; color: var(--eo-ink); font: 600 14px/1 var(--eo-body); white-space: nowrap; } .eo-co .eo-co__coupon { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px; margin: 0; padding: 0; background: none; } .eo-co .eo-co__coupon p { margin: 0; } .eo-co .eo-co__coupon .form-row-first { flex: 1 1 auto; min-width: 0; } .eo-co .eo-co__coupon .input-text { height: 44px; min-height: 44px; } .eo-co .eo-co__coupon .form-row-last { flex: none; } .eo-co button.eo-co__apply { height: 44px; min-height: 44px; padding: 0 16px; border-radius: 8px; font-size: 14px; } .eo-co__coupon.processing { opacity: .6; pointer-events: none; } .eo-co__order > .woocommerce-message, .eo-co__order > .woocommerce-info { margin: -6px 0 0; padding: 0; background: none; color: var(--eo-forest); font-size: 13px; font-weight: 600; } .eo-co__order > .woocommerce-error { margin: -6px 0 0; padding: 0; background: none; color: var(--eo-error); font-size: 13px; } .eo-co table.eo-co__totals { width: 100%; margin: 0; padding: 0; border-collapse: collapse; font-size: 14px; box-shadow: inset 0 1px 0 var(--eo-line); } .eo-co .eo-co__totals th, .eo-co .eo-co__totals td { padding: 4px 0; border: 0; background: none; color: var(--eo-ink); font: 400 14px/1.4 var(--eo-body); vertical-align: baseline; } .eo-co .eo-co__totals tr:first-child th, .eo-co .eo-co__totals tr:first-child td { padding-top: 14px; } .eo-co .eo-co__totals th { color: var(--eo-muted); text-align: left; } .eo-co .eo-co__totals td { text-align: right; } .eo-co .eo-co__totals .order-total th, .eo-co .eo-co__totals .order-total td { padding: 12px 0 0; background: none; } .eo-co .eo-co__totals .order-total th { color: var(--eo-ink); font-size: 16px; font-weight: 700; } .eo-co .eo-co__totals .order-total td, .eo-co .eo-co__totals .order-total td strong { font: 800 26px/1 var(--eo-display); letter-spacing: -.02em; } .eo-co .eo-co__totals .includes_tax { display: block; color: var(--eo-muted); font: 400 12px/1.4 var(--eo-body); letter-spacing: 0; } .eo-co .eo-co__totals .woocommerce-remove-coupon { margin-left: 6px; color: var(--eo-forest); font-size: 13px; } .eo-co .eo-co__totals #shipping_method { margin: 0; padding: 0; list-style: none; } .eo-co .blockUI.blockOverlay { border-radius: 14px; } /* WooCommerce's "please wait" cover over its review fragment would lie over the whole card (the fragment has no box of its own here), Place order included: the money lines dim instead, and Place order stays tappable, as before. The payment rows keep their own cover. */ .eo-co__review > .blockUI { display: none !important; } .eo-co__order:has(.eo-co__review > .blockUI) .eo-co__totals { opacity: .5; transition: opacity .15s; } /* Place order, in the card: the arrival dates over it, the privacy line under it. */ .eo-co__place { display: flex; flex-direction: column; gap: 12px; } .eo-co .eo-co__arrive { margin: 0; } .eo-co__errors { margin: 0; color: var(--eo-error); font-size: 14px; line-height: 1.45; } .eo-co__errors[hidden] { display: none; } .eo-co__errors p { margin: 0; } .eo-co__errors p + p { margin-top: 4px; } .eo-co #place_order { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; min-height: 52px; margin: 0; padding: 0 18px; border: 0; border-radius: 8px; background: var(--eo-forest); color: var(--eo-white); font: 700 16px/1 var(--eo-body); cursor: pointer; } .eo-co #place_order:hover { background: var(--eo-forest); box-shadow: inset 0 0 0 100px rgba(21, 32, 26, .16); } .eo-co .woocommerce-terms-and-conditions-wrapper { margin: 0; } .eo-co .woocommerce-privacy-policy-text p { margin: 0; color: var(--eo-muted); font-size: 12px; line-height: 1.5; text-align: center; } .eo-co .woocommerce-privacy-policy-text a { color: var(--eo-forest); } .eo-co__help { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding-top: 14px; box-shadow: inset 0 1px 0 var(--eo-line); color: var(--eo-ink); font-size: 14px; line-height: 1.45; } .eo-co__help .eo-icon { flex: none; color: var(--eo-wa); } .eo-co__help a { color: var(--eo-ink); font-weight: 600; text-underline-offset: 3px; } /* Phones: the amount and Place order in a bar at the bottom while the card's own button is out of view (Cohaar's; out of the way while the keyboard is open: home.js). */ .eo-co__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px var(--eo-gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--eo-white); box-shadow: inset 0 1px 0 var(--eo-line), 0 -6px 20px rgba(21, 32, 26, .08); transform: translateY(110%); transition: transform .2s var(--eo-ease); } .eo-co__bar.is-shown { transform: none; } .eo-co.is-typing .eo-co__bar { transform: translateY(110%); } .eo-co__barinfo { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } .eo-co__barlabel { color: var(--eo-muted); font: 400 13px/1.2 var(--eo-body); } .eo-co__bartotal { color: var(--eo-ink); font: 800 20px/1.1 var(--eo-display); letter-spacing: -.02em; } .eo-co__barplace { flex: none; height: 48px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--eo-forest); color: var(--eo-white); font: 700 16px/1 var(--eo-body); cursor: pointer; } /* WooCommerce's list of what went wrong, after Place order: each field's message is under it (WooCommerce's own), so the list stays for screen readers only; anything not about a field shows above Place order (home.js). */ .eo-co__form > .woocommerce-NoticeGroup { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (min-width: 600px) { .eo-co__fields--contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eo-co__fields--contact > .form-row, .eo-co #billing_phone_field, .eo-co #billing_email_field { grid-column: auto; } .eo-co__fields--address { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eo-co__fields--address > .form-row { grid-column: 1 / -1; } .eo-co__fields--address > #billing_first_name_field { grid-column: 1; grid-row: 1; } .eo-co__fields--address > #billing_city_field { grid-column: 2; grid-row: 1; } } @media (min-width: 1024px) { .eo-header--checkout .eo-header__bar { grid-template-columns: 1fr auto 1fr; height: 64px; } .eo-header--checkout .eo-logo { justify-self: center; } .eo-header__back-short { display: none; } .eo-header__back-long { display: inline; } .eo-header__secure { gap: 6px; font-size: 13px; } .eo-header__secure-more { display: inline; } .eo-wcpage--checkout:has(.eo-co) { padding-bottom: 72px; } html:has(.eo-co) { scroll-padding-bottom: 0; } .eo-co__head { gap: 16px; padding: 40px 0 24px; } .eo-co__head .eo-wcpage__title { font-size: 40px; } .eo-co__haveacc-more { display: inline; } .eo-co__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; } .eo-co__order { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; gap: 16px; padding: 24px; border-radius: 16px; } .eo-co__card { border-radius: 16px; } .eo-co__login form.login { padding: 24px 32px; border-radius: 16px; } .eo-co__items { gap: 14px; } .eo-co__thumb { width: 56px; height: 56px; } .eo-co .eo-co__totals .order-total td, .eo-co .eo-co__totals .order-total td strong { font-size: 28px; } .eo-co__bar { display: none; } .eo-co__step { gap: 18px; padding: 28px 32px 30px; } .eo-co h2.eo-co__steptitle { gap: 12px; font-size: 20px; } .eo-co__num { width: 28px; height: 28px; border-radius: 14px; font-size: 14px; line-height: 28px; } .eo-co .input-text, .eo-co select { font-size: 15px; } .eo-co .eo-co__method > label.eo-co__methodrow { gap: 14px; padding: 16px 18px; } .eo-co .payment_box { padding: 16px 18px; } .eo-co .eo-co__banktitle { display: none; } .eo-co .eo-co__bankrows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .eo-co__bankrow { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; } .eo-co__bankrow .eo-co__copy { margin-top: auto; } /* the Copy buttons on one line when the IBAN takes two */ .eo-co__bankrow .eo-co__bankinfo { gap: 6px; } } /* ---------- Motion: none for people who ask for less ---------- */ @media (prefers-reduced-motion: reduce) { .eo-store *, .eo-store *::before, .eo-store *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }