/* ===================================================================== Essence theme — visual skin. ALL rules scoped under .ess (§3.1). Colors/radius/width/fonts come from EssenceThemeStyle (CSS vars). Grid CONTAINERS + button variants come from the engine's sf-blockstyle.css (rendered via /); this file styles the content. ===================================================================== */ /* ------------------------------ base ------------------------------- */ .ess{ color:var(--ink); background:var(--bg); font-family:var(--font-body,system-ui,sans-serif); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; } .ess *,.ess *::before,.ess *::after{box-sizing:border-box} .ess h1,.ess h2,.ess h3,.ess h4{font-family:var(--font-display,inherit);line-height:1.15;letter-spacing:-.01em;margin:0} .ess a{color:inherit;text-decoration:none} .ess img{max-width:100%;display:block} .ess .wrap{max-width:var(--content,1200px);margin-inline:auto;padding-inline:22px;width:100%} .ess .wrap .wrap{max-width:none;padding-inline:0} .ess section.block{padding-block:clamp(2.4rem,5vw,4rem)} .ess .eyebrow{display:inline-block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:.5rem} .ess .chip{display:inline-flex;align-items:center;gap:.25em;font-family:var(--font-mono);font-size:.72rem;font-weight:700;padding:.18em .5em;border-radius:.5em;line-height:1} .ess .chip--sale{background:var(--warm);color:#241a00} .ess .i{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em} /* section header */ .ess .shead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.4rem} .ess .shead--center{justify-content:center;text-align:center} .ess .shead h2{font-size:clamp(1.35rem,3vw,1.9rem)} .ess .shead .sub{color:var(--muted);margin-top:.35rem;max-width:52ch} .ess .viewmore{display:inline-flex;align-items:center;gap:.35em;font-weight:600;font-size:.9rem;color:var(--brand);white-space:nowrap} .ess .viewmore .i{transition:transform .2s} .ess .viewmore:hover .i{transform:translateX(3px)} /* CTA skin (fallback if engine button variant is neutral) */ .ess .slide__cta a,.ess .promo__cta a{ display:inline-flex;align-items:center;gap:.5em; background:var(--brand);color:var(--brand-ink); font-weight:600;padding:.8em 1.5em;border-radius:999px; transition:transform .18s,box-shadow .18s,filter .18s; box-shadow:0 8px 20px -10px color-mix(in srgb,var(--brand) 70%,transparent); } .ess .slide__cta a:hover,.ess .promo__cta a:hover{transform:translateY(-2px);filter:brightness(1.05)} /* typography role: buttons */ .ess .sf-btn,.ess .slide__cta a,.ess .promo__cta a{font-family:var(--font-button,var(--font-body))} /* --------------------------- product card -------------------------- */ .ess .card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s,transform .2s} .ess .card:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));box-shadow:0 14px 30px -18px rgba(17,20,24,.35);transform:translateY(-3px)} .ess .card__media{position:relative;display:block;aspect-ratio:1/1;background:var(--panel)} .ess .card__media img{width:100%;height:100%;object-fit:cover} .ess .card__ph{position:absolute;inset:0;background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--line) 60%,var(--panel)))} .ess .card__badges{position:absolute;top:.6rem;left:.6rem;z-index:2;display:flex;gap:.35rem} .ess .card__body{padding:.85rem .9rem 1rem;display:flex;flex-direction:column;gap:.6rem;flex:1} .ess .card__title{font-weight:600;font-size:.95rem;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .ess .card__title:hover{color:var(--brand)} .ess .card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem} .ess .price{display:flex;align-items:baseline;gap:.45em;flex-wrap:wrap;font-family:var(--font-price,var(--font-mono))} .ess .price .now{font-weight:700;font-size:1rem;color:var(--ink)} .ess .price .was{font-size:.8rem;color:var(--muted);text-decoration:line-through} .ess .card__buy{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--brand);color:var(--brand-ink);flex:none;transition:filter .18s,transform .18s} .ess .card__buy:hover{filter:brightness(1.08);transform:scale(1.06)} .ess .card__cta{display:block;text-align:center;margin-top:.75rem;padding:.62rem 1rem;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-family:var(--font-button,var(--font-body));font-weight:600;font-size:.88rem;border:1px solid var(--brand);transition:filter .18s,transform .18s,background .18s} .ess .card__cta:hover{filter:brightness(1.06);transform:translateY(-1px)} .ess .card__cta--outline{background:transparent;color:var(--brand)} .ess .card__cta--outline:hover{background:color-mix(in srgb,var(--brand) 8%,transparent);filter:none;transform:translateY(-1px)} /* ------------------------------- hero ------------------------------ */ .ess .hero{position:relative} .ess .hero__view{position:relative;isolation:isolate} .ess .hero--sm .slide{min-height:clamp(320px,42vh,440px)} .ess .hero--md .slide{min-height:clamp(400px,58vh,600px)} .ess .hero--lg .slide{min-height:clamp(480px,74vh,760px)} .ess .slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease;display:flex;align-items:center} .ess .hero[data-vpos="top"] .slide{align-items:flex-start} .ess .hero[data-vpos="bottom"] .slide{align-items:flex-end} .ess .slide.is-on{position:relative;opacity:1;visibility:visible} .ess .slide__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .ess .slide__ph{background:linear-gradient(135deg,#08214b,#1967e6 140%)} .ess .slide__ov{position:absolute;inset:0;z-index:-1;background:var(--hero-ov,#0F172A);opacity:var(--hero-ov-op,.42)} .ess .slide__c{width:100%;padding-block:clamp(1.5rem,6vh,4rem)} .ess .slide .box{max-width:34rem;color:#fff;display:flex;flex-direction:column;align-items:flex-start;text-align:start} .ess .hero[data-hpos="center"] .box{margin-inline:auto;align-items:center;text-align:center} .ess .hero[data-hpos="right"] .box{margin-inline-start:auto;align-items:flex-end;text-align:end} .ess .slide .kick{display:inline-block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:color-mix(in srgb,var(--brand) 85%,transparent);padding:.3em .7em;border-radius:.5em;margin-bottom:1rem} .ess .slide h1{font-size:clamp(1.9rem,5vw,3.4rem);margin-bottom:.6rem} .ess .slide .lede{font-size:clamp(1rem,2vw,1.2rem);opacity:.92;max-width:32rem;margin-bottom:1.5rem} .ess .hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:2.7rem;height:2.7rem;display:grid;place-items:center;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:#111;cursor:pointer;transition:background .2s,transform .2s} .ess .hero__arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)} .ess .hero__arrow.prev{left:1rem}.ess .hero__arrow.next{right:1rem} .ess .hero__dots{position:absolute;bottom:1rem;left:0;right:0;display:flex;gap:.5rem;justify-content:center;z-index:3} .ess .hero__dots button{width:.55rem;height:.55rem;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:width .25s,background .25s} .ess .hero__dots button[aria-current="true"]{width:1.6rem;border-radius:1rem;background:#fff} /* --------------------------- categories ---------------------------- */ .ess .cat{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--panel)} .ess .cat img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .ess .cat:hover img{transform:scale(1.05)} .ess .cat__ph{position:absolute;inset:0;background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--brand) 20%,var(--panel)))} .ess .cat__ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,20,.72),transparent 62%)} .ess .cat__name{position:absolute;left:1rem;right:1rem;bottom:.95rem;color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.05rem} /* ------------------------------ why us ----------------------------- */ .ess .why{text-align:center;padding:.5rem} .ess .why__ic{display:grid;place-items:center;width:3.3rem;height:3.3rem;margin:0 auto .9rem;border-radius:50%;background:color-mix(in srgb,var(--brand) 10%,var(--bg));color:var(--brand)} .ess .why__ic .i{width:1.5rem;height:1.5rem} .ess .why h3{font-size:1.05rem;margin-bottom:.35rem} .ess .why p{color:var(--muted);font-size:.9rem;max-width:26ch;margin-inline:auto} /* ---------------------------- promo band --------------------------- */ .ess .promo{position:relative;border-radius:calc(var(--radius) + 4px);overflow:hidden;background:var(--brand) center/cover no-repeat;padding:clamp(2rem,5vw,3.5rem)} .ess .promo__ov{position:absolute;inset:0;background:radial-gradient(120% 120% at 15% 20%,color-mix(in srgb,var(--brand) 80%,transparent),rgba(12,14,26,.78))} .ess .promo__c{position:relative;color:#fff;max-width:34rem} .ess .promo__c .kick{display:inline-block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.8rem;opacity:.9} .ess .promo__c h2{font-size:clamp(1.5rem,3.5vw,2.4rem);margin-bottom:.5rem} .ess .promo__c p{opacity:.92;margin-bottom:1.4rem} /* --------------------------- instagram ----------------------------- */ .ess .ig{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:calc(var(--radius) - 4px);background:var(--panel)} .ess .ig__ph{position:absolute;inset:0;background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--brand) 18%,var(--panel)))} .ess .ig img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .ess .ig:hover img{transform:scale(1.06)} .ess .ig__ov{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(10,12,20,0);opacity:0;transition:opacity .25s,background .25s} .ess .ig:hover .ig__ov{opacity:1;background:rgba(10,12,20,.35)} /* =========================== PRODUCT PAGE ========================== The engine's ProductSectionRenderer emits:

{media}

{info}

{below}

→ media = first grid child, info = .pmain (the vertical-rhythm column), and the "below" region renders full-width AFTER .pdp (not in the grid). */ .ess .pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start;padding-block:clamp(1.4rem,3vw,2.4rem)} .ess .pdp>*{min-width:0} .ess .pdp>div:first-child{align-self:stretch} .ess .pdp>.pmain{display:flex;flex-direction:column;gap:22px} /* media (positions ctx.productView.media) */ .ess .media{min-width:0} .ess .media.is-sticky{position:sticky;top:86px} /* product header */ .ess .phead__title{font-size:clamp(1.5rem,3.5vw,2.2rem);margin:.25rem 0 .6rem} .ess .phead__rating{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;color:var(--muted);font-size:.88rem} .ess .phead__rc{font-family:var(--font-mono)} .ess .phead__price{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-family:var(--font-price,var(--font-mono))} .ess .phead__price .now{font-size:1.7rem;font-weight:700} .ess .phead__price .was{font-size:1rem;color:var(--muted);text-decoration:line-through} .ess .phead__promo{margin-top:.7rem;color:var(--brand);font-weight:600;font-size:.92rem} /* stars */ .ess .stars{display:inline-flex;gap:.08em;color:var(--warm)} .ess .stars .i{width:1em;height:1em;fill:currentColor;stroke:none} .ess .stars .i.off{color:var(--line)} /* features */ .ess .pfeat__h{font-size:1.1rem;margin-bottom:.8rem} .ess .pfeat__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem} .ess .pfeat__i{display:flex;gap:.7rem;align-items:flex-start} .ess .pfeat__ic{display:grid;place-items:center;width:2.1rem;height:2.1rem;flex:none;border-radius:.6rem;background:var(--feat-ic-bg,color-mix(in srgb,var(--brand) 9%,var(--bg)));color:var(--feat-ic,var(--brand))} .ess .pfeat__tx{display:flex;flex-direction:column;min-width:0} .ess .pfeat__tx strong{font-weight:600;font-size:.95rem;color:var(--feat-title,inherit);overflow-wrap:anywhere} .ess .pfeat__tx small{color:var(--feat-text,var(--muted));font-size:.82rem;line-height:1.4;overflow-wrap:anywhere} /* reviews strip (content from ctx.productView.reviews) */ .ess .rstrip{max-width:100%;overflow:hidden} .ess .rstrip__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem} .ess .rstrip__head h2{font-size:1.15rem} .ess .rstrip__score{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.85rem;color:var(--muted)} .ess .rstrip__mask{overflow:hidden;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .ess .rstrip__track{display:flex;gap:1rem;width:max-content;animation:ess-marquee var(--rev-speed,32s) linear infinite} .ess .rstrip__mask:hover .rstrip__track{animation-play-state:paused} .ess .rcard{flex:none;width:min(320px,80vw);margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem} .ess .rcard blockquote{margin:.5rem 0 .7rem;font-size:.9rem;line-height:1.5} .ess .rcard figcaption{display:flex;align-items:center;justify-content:space-between;gap:.5rem} .ess .rcard__who{font-weight:600;font-size:.85rem} .ess .rcard__tag{font-family:var(--font-mono);font-size:.68rem;color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--bg));padding:.2em .5em;border-radius:.4em} @keyframes ess-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* COD form wrapper (positions ctx.productView.codSlot) */ .ess .pform{display:block} .ess .pform__h{font-size:1.1rem;margin-bottom:.9rem} /* description (info region — stays in the info column on mobile & desktop) */ .ess .p-desc{margin-top:.25rem;padding-top:1.4rem;border-top:1px solid var(--line)} .ess .p-desc>h2{font-size:1.2rem;margin-bottom:.8rem} .ess .rte-html{color:color-mix(in srgb,var(--ink) 88%,var(--muted));line-height:1.7;max-width:760px;margin-inline:auto} .ess .rte-html h3{font-family:var(--font-display);font-size:1.05rem;margin:1.4rem 0 .5rem;color:var(--ink)} .ess .rte-html p{margin:0 0 1rem} .ess .rte-html ul,.ess .rte-html ol{margin:0 0 1rem;padding-inline-start:1.3rem} .ess .rte-html li{margin-bottom:.4rem} .ess .rte-html img{border-radius:var(--radius);margin:1rem 0} /* full-bleed: a description image set to "full" spans the whole viewport edge-to-edge (gloras-style strip) */ .ess .rte-html img[data-align="full"]{display:block;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0} .ess .rte-html a{color:var(--brand);text-decoration:underline} /* ============================ LISTING ============================= */ .ess .list__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.2rem} .ess .list__title{font-size:clamp(1.5rem,3.5vw,2.1rem)} .ess .list__count{color:var(--muted);font-size:.9rem;margin-top:.3rem} .ess .toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap} .ess .toolbar__search{display:flex;align-items:center;gap:.5rem;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;color:var(--muted)} .ess .toolbar__search input{border:none;background:none;outline:none;font:inherit;color:var(--ink);width:min(220px,42vw)} .ess .toolbar__sort{position:relative;display:flex;align-items:center;gap:.45rem;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;color:var(--muted)} .ess .toolbar__sort select{appearance:none;border:none;background:none;outline:none;font:inherit;color:var(--ink);padding-right:1rem;cursor:pointer} .ess .toolbar__sort .caret{position:absolute;right:.7rem;pointer-events:none;width:1em;height:1em} .ess .toolbar__apply{border:none;background:var(--ink);color:#fff;font:inherit;font-weight:600;padding:.55rem 1.1rem;border-radius:999px;cursor:pointer} .ess .chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem} .ess .chip--filter{display:inline-flex;align-items:center;gap:.4em;font-family:inherit;font-weight:500;font-size:.85rem;color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:.4rem .85rem;border-radius:999px;transition:border-color .2s,color .2s} .ess .chip--filter:hover{border-color:var(--brand);color:var(--brand)} .ess .list__empty{color:var(--muted);padding:2rem 0} /* pagination */ .ess .pager{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:2.2rem} .ess .pager__b{display:grid;place-items:center;min-width:2.4rem;height:2.4rem;padding:0 .5rem;border-radius:999px;border:1px solid var(--line);font-family:var(--font-mono);font-size:.88rem;color:var(--ink);transition:border-color .2s,background .2s,color .2s} .ess .pager__b:hover{border-color:var(--brand);color:var(--brand)} .ess .pager__b.is-on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)} .ess .pager__b.is-off{opacity:.4;pointer-events:none} .ess .pager__gap{color:var(--muted);padding:0 .2rem} /* ============================= CHROME ============================= */ /* announcement */ .ess .ann{background:var(--ann-bg,var(--ink));color:var(--ann-fg,#fff);overflow:hidden} .ess .ann__mask{overflow:hidden} .ess .ann__track{display:flex;gap:2.5rem;width:max-content;padding:.5rem 0;animation:ess-marquee var(--ann-speed,26s) linear infinite} .ess .ann__i{display:inline-flex;align-items:center;gap:.5em;font-size:.82rem;white-space:nowrap;opacity:.95} .ess .ann__i .i{color:var(--warm)} /* header */ .ess .topbar{position:sticky;top:0;z-index:40} .ess .topbar.is-static{position:relative} .ess .hdr{background:var(--header-bg,var(--bg));color:var(--header-fg,var(--ink));border-bottom:1px solid var(--line)} .ess .bar{position:relative;display:flex;align-items:center;min-height:var(--header-h,74px)} .ess .bar__slot{display:flex;align-items:center;gap:1.4rem} .ess .bar__end{margin-inline-start:auto} .ess .bar__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .ess .brand{display:inline-flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none} .ess .brand__logo{height:var(--logo-size,30px);width:auto;display:block} .ess .brand__name{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;line-height:1} .ess .hdr__nav{display:flex;gap:1.4rem;font-size:.92rem;font-weight:500} .ess .hdr__nav a{color:inherit;position:relative;padding:.2rem 0;text-decoration:none} .ess .hdr__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--brand);transition:right .25s} .ess .hdr__nav a:hover::after{right:0} .ess .hicons{display:flex;align-items:center;gap:.35rem} .ess .iconbtn{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;color:inherit;cursor:pointer;background:none;border:none;transition:background .2s} .ess .iconbtn:hover{background:color-mix(in srgb,var(--header-fg,var(--ink)) 10%,transparent)} .ess .burger{display:none} /* transparent-over-hero (opt-in; for stores whose page opens with a hero) */ .ess .topbar[data-transparent="true"]{position:absolute;inset-inline:0;top:0} .ess .topbar[data-transparent="true"] .hdr{background:transparent;color:#fff;border-bottom-color:transparent} .ess .topbar[data-transparent="true"] .iconbtn:hover{background:rgba(255,255,255,.16)} /* JS-free mobile drawer: the burger toggles .ess-navcheck; CSS reveals it. */ .ess .ess-navcheck{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .ess .drawer{position:fixed;top:0;bottom:0;inset-inline-end:-360px;width:min(84vw,340px);background:var(--bg);color:var(--ink);transition:inset-inline-end .3s ease;z-index:80;display:flex;flex-direction:column;padding:1.4rem;box-shadow:0 0 40px rgba(0,0,0,.18)} .ess .drawer__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem} .ess .drawer__nav{display:flex;flex-direction:column} .ess .drawer__nav a{padding:.9rem 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:1rem} .ess .nav-backdrop{position:fixed;inset:0;background:rgba(10,12,20,.42);opacity:0;visibility:hidden;transition:opacity .3s ease;z-index:70;cursor:pointer;border:none} .ess .ess-navcheck:checked ~ .drawer{inset-inline-end:0} .ess .ess-navcheck:checked ~ .nav-backdrop{opacity:1;visibility:visible} /* footer */ .ess .ftr{background:var(--footer-bg,var(--panel));color:var(--footer-fg,var(--muted));border-top:1px solid var(--line);margin-top:clamp(2rem,6vw,4rem)} .ess .ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:2rem;padding-block:clamp(2.2rem,5vw,3.4rem)} .ess .ftr__brand .brand__name{color:var(--footer-accent,var(--ink));font-family:var(--font-display);font-weight:700;font-size:1.25rem} .ess .ftr__brand .brand__logo{max-height:34px;width:auto} .ess .ftr__bio{color:var(--footer-fg,var(--muted));font-size:.9rem;margin:.9rem 0 1.1rem;max-width:34ch} .ess .ftr__social{display:flex;gap:.5rem} .ess .ftr__social a{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:transparent;border:1px solid color-mix(in srgb,var(--footer-fg,#888) 34%,transparent);color:var(--footer-accent,var(--ink));transition:color .2s,border-color .2s} .ess .ftr__social a:hover{color:var(--footer-accent,var(--brand));border-color:var(--footer-accent,var(--brand))} .ess .ftr__col h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--footer-accent,var(--muted));margin-bottom:.9rem} .ess .ftr__col a{display:block;color:var(--footer-fg,var(--ink));font-size:.9rem;padding:.28rem 0;transition:color .2s} .ess .ftr__col a:hover{color:var(--footer-accent,var(--brand))} .ess .ftr__contact p{display:flex;align-items:center;gap:.5em;color:var(--footer-fg,var(--muted));font-size:.9rem;margin:0 0 .55rem} .ess .ftr__contact a{color:inherit} .ess .ftr__contact .i{color:var(--footer-accent,var(--brand))} .ess .ftr__bar{border-top:1px solid color-mix(in srgb,var(--footer-fg,#888) 20%,transparent)} .ess .ftr__bar-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1rem;font-size:.82rem;color:var(--footer-fg,var(--muted))} .ess .ftr__pay{display:inline-flex;align-items:center;gap:.4em} /* ---------------------------- responsive --------------------------- */ @media (max-width:860px){ .ess .pdp{grid-template-columns:1fr} .ess .media.is-sticky{position:static} .ess .hdr__nav{display:none} .ess .burger{display:grid} .ess .ftr__grid{grid-template-columns:1fr 1fr} .ess .ftr__brand{grid-column:1/-1} } @media (max-width:560px){ .ess .shead{flex-direction:column;align-items:flex-start;gap:.5rem} .ess .ftr__grid{grid-template-columns:1fr} .ess .toolbar{width:100%} .ess .toolbar__search input{width:100%} } /* ------------------------- reduced motion -------------------------- */ @media (prefers-reduced-motion:reduce){ .ess .ann__track,.ess .rstrip__track{animation:none} .ess .slide{transition:none} .ess *{scroll-behavior:auto!important} } /* ── Shared-renderer shell ────────────────────────────────────────────────── CollectionSectionRenderer emits

and ProductSectionRenderer

— a shell EVERY theme must define, or the shared listing / product pages render unstyled. Essence already defines .wrap, .pdp and .pmain; .lp was missing, so its listing pages had no vertical rhythm at all. Value matches Essence's own section rhythm (`.ess section.block`), not Aurora's. */ .ess .lp{padding-block:clamp(2.4rem,5vw,4rem)}

Santé

Santé