/* Kavrakovi consolidated public stylesheet.
+ Page base rules are scoped with zero-specificity :where() selectors.
+ The shared design system below remains later in source order, preserving
+ the established cascade while keeping one public CSS source. */
/* ===== index.html base styles (scoped) ===== */
:where(html.page-home) *{box-sizing:border-box;}
html:where(.page-home){scroll-behavior:smooth;}
:where(html.page-home) body{
margin:0;
background:var(--white);
color:var(--ink);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
line-height:1.5;
}
/* ===== Problems / solution finder page ===== */
:where(html.page-problems){scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
:where(html.page-problems) *{box-sizing:border-box;}
:where(html.page-problems) body{margin:0;overflow-x:hidden;background:#fff;color:var(--ink);font-family:var(--font-body);font-size:var(--type-body);line-height:1.55;-webkit-font-smoothing:antialiased;}
:where(html.page-problems) img{display:block;max-width:100%;}
:where(html.page-problems) a{color:inherit;text-decoration:none;}
:where(html.page-problems) button,:where(html.page-problems) input{font:inherit;}
:where(html.page-problems) .problems-wrap{width:min(100% - 64px,1296px);margin-inline:auto;}
:where(html.page-problems) .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
:where(html.page-problems) .problems-skip-link{position:fixed;z-index:1000;top:10px;left:12px;padding:10px 14px;border-radius:8px;background:var(--ink);color:#fff;transform:translateY(-150%);transition:transform .18s ease;}
:where(html.page-problems) .problems-skip-link:focus{transform:translateY(0);}
:where(html.page-problems) .problems-hero{position:relative;min-height:300px;overflow:hidden;background:radial-gradient(circle at 50% 115%,rgba(25,181,189,.11),transparent 48%),linear-gradient(112deg,#fbf8f2 0%,#f6f4ef 52%,#f0f7f5 100%);border-bottom:1px solid var(--section-line);}
:where(html.page-problems) .problems-hero-search{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-block:44px;text-align:center;}
:where(html.page-problems) .problems-hero-grid{position:relative;z-index:1;min-height:430px;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);align-items:center;gap:58px;padding-block:56px;}
:where(html.page-problems) .problems-hero-copy{max-width:660px;}
:where(html.page-problems) .problems-eyebrow,:where(html.page-problems) .problems-section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--moss-dark);font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;}
:where(html.page-problems) .problems-eyebrow::before,:where(html.page-problems) .problems-section-kicker::before{content:"";width:26px;height:1px;background:currentColor;}
:where(html.page-problems) .problems-hero h1{max-width:760px;margin:0 0 12px;font-size:clamp(34px,4.2vw,54px);font-weight:550;line-height:1.08;letter-spacing:-.04em;text-wrap:balance;}
:where(html.page-problems) .problems-hero-search>p{max-width:720px;margin:0 0 24px;color:var(--ink-soft);font-size:16px;line-height:1.6;text-wrap:balance;}
:where(html.page-problems) .problems-hero-copy>p{max-width:590px;margin:0;color:#4e5657;font-size:clamp(16px,1.5vw,18px);line-height:1.7;}
:where(html.page-problems) .problems-search{position:relative;display:flex;align-items:center;width:min(100%,640px);height:58px;margin:0;border:1px solid rgba(20,58,62,.12);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 18px 48px -34px rgba(7,94,102,.48);}
:where(html.page-problems) .problems-search svg{position:absolute;left:18px;width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;pointer-events:none;}
:where(html.page-problems) .problems-search input{width:100%;height:100%;padding:0 18px 0 50px;border:0;border-radius:inherit;background:transparent;color:var(--ink);font-size:16px;outline:0;}
:where(html.page-problems) .problems-search:focus-within{border-color:var(--moss);box-shadow:var(--control-focus-ring),0 18px 48px -34px rgba(7,94,102,.48);}
:where(html.page-problems) .problems-hero-collage{position:relative;height:310px;}
:where(html.page-problems) .problems-hero-collage img{position:absolute;width:68%;aspect-ratio:3/2;object-fit:cover;border:6px solid rgba(255,255,255,.82);border-radius:110px 24px 110px 24px;box-shadow:0 28px 54px -35px rgba(7,94,102,.5);}
:where(html.page-problems) .problems-hero-collage img:first-child{top:0;right:0;z-index:1;}
:where(html.page-problems) .problems-hero-collage img:nth-child(2){bottom:-8px;left:0;z-index:2;width:56%;border-radius:24px 100px 24px 100px;}
:where(html.page-problems) .problems-hero-leaf{position:absolute;z-index:3;right:3%;bottom:-10px;width:94px;color:var(--moss);transform:rotate(12deg);opacity:.76;}
:where(html.page-problems) .problems-hero-leaf svg{fill:rgba(141,217,216,.28);stroke:currentColor;stroke-width:2;}
:where(html.page-problems) .problems-catalog{padding:62px 0 48px;background:linear-gradient(#fff 0%,#fbfdfc 100%);}
:where(html.page-problems) .problems-section-head{text-align:center;margin:0 auto 34px;}
:where(html.page-problems) .problems-section-kicker{justify-content:center;}
:where(html.page-problems) .problems-section-kicker::after{content:"";width:26px;height:1px;background:currentColor;}
:where(html.page-problems) .problems-section-head h2{margin:10px 0 8px;font-size:clamp(30px,3.2vw,44px);font-weight:550;line-height:1.15;letter-spacing:-.035em;}
:where(html.page-problems) .problems-section-head p{margin:0;color:var(--ink-soft);font-size:15px;}
:where(html.page-problems) .problems-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
:where(html.page-problems) .problem-card{position:relative;min-height:408px;overflow:hidden;border:1px solid rgba(20,58,62,.09);border-radius:22px;background:var(--problem-bg,#f5faf7);box-shadow:0 18px 46px -39px rgba(7,94,102,.4);isolation:isolate;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);}
:where(html.page-problems) .problem-card::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(0deg,var(--problem-bg,#f5faf7) 0%,var(--problem-bg,#f5faf7) 48%,rgba(255,255,255,0) 78%);pointer-events:none;}
:where(html.page-problems) .problem-card:hover{transform:translateY(-4px);border-color:rgba(7,138,147,.28);box-shadow:0 28px 58px -35px rgba(7,94,102,.5);}
:where(html.page-problems) .problem-card:active{transform:translateY(-1px);}
:where(html.page-problems) .problem-card--sage{--problem-bg:#f3f7ec;--problem-accent:#5d812d;--problem-icon-bg:#e2edd2;}
:where(html.page-problems) .problem-card--lavender{--problem-bg:#f7f2fa;--problem-accent:#775092;--problem-icon-bg:#eadcf3;}
:where(html.page-problems) .problem-card--blush{--problem-bg:#f2f7fc;--problem-accent:#2f6fae;--problem-icon-bg:#dcecf8;}
:where(html.page-problems) .problem-card--aqua{--problem-bg:#eef8f7;--problem-accent:#087f86;--problem-icon-bg:#d8efed;}
:where(html.page-problems) .problem-card--sand{--problem-bg:#fbf5ea;--problem-accent:#a46419;--problem-icon-bg:#f4e5c8;}
:where(html.page-problems) .problem-card--rose{--problem-bg:#fbf1f4;--problem-accent:#a63f60;--problem-icon-bg:#f5dce4;}
:where(html.page-problems) .problem-card>img{position:absolute;z-index:0;inset:0 0 auto;width:100%;height:64%;object-fit:cover;object-position:66% center;filter:saturate(.86) contrast(.98);transition:transform .4s var(--ease);}
:where(html.page-problems) .problem-card:hover>img{transform:scale(1.025);}
:where(html.page-problems) .problem-product{position:absolute;z-index:3;top:16px;left:16px;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px;max-width:calc(100% - 32px);min-height:58px;padding:5px 13px 5px 5px;border:1px solid rgba(20,58,62,.1);border-radius:14px;background:rgba(255,255,255,.93);box-shadow:0 14px 32px -24px rgba(7,94,102,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
:where(html.page-problems) .problem-product[hidden]{display:none;}
:where(html.page-problems) .problem-product-media{display:grid;place-items:center;width:48px;height:48px;overflow:hidden;border-radius:10px;background:#f5f7f4;}
:where(html.page-problems) .problem-product-media img{width:100%;height:100%;object-fit:contain;padding:3px;}
:where(html.page-problems) .problem-product.has-no-image{grid-template-columns:1fr;padding:10px 13px;}
:where(html.page-problems) .problem-product.has-no-image .problem-product-media{display:none;}
:where(html.page-problems) .problem-product>span:last-child{min-width:0;}
:where(html.page-problems) .problem-product em{display:block;color:var(--problem-accent);font-size:9px;font-style:normal;font-weight:800;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;}
:where(html.page-problems) .problem-product b{display:block;max-width:190px;margin-top:3px;overflow:hidden;color:var(--ink);font-size:11px;font-weight:700;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;}
:where(html.page-problems) .problem-card-copy{position:absolute;z-index:2;inset:auto 0 0;display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:start;width:100%;height:57%;padding:42px 22px 22px;}
:where(html.page-problems) .problem-icon{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:var(--problem-icon-bg);color:var(--problem-accent);box-shadow:0 0 0 1px rgba(255,255,255,.82) inset;}
:where(html.page-problems) .problem-icon svg{width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;}
:where(html.page-problems) .problem-icon .icon-fill{fill:currentColor;stroke:none;opacity:.18;}
:where(html.page-problems) .problem-icon .icon-dot{fill:currentColor;stroke:none;}
:where(html.page-problems) .problem-card-text{display:flex;min-height:172px;flex-direction:column;align-items:flex-start;}
:where(html.page-problems) .problem-card-text strong{margin:2px 0 9px;font-size:clamp(18px,1.45vw,22px);font-weight:700;line-height:1.16;letter-spacing:-.025em;}
:where(html.page-problems) .problem-card-text small{max-width:250px;color:#505758;font-size:13px;line-height:1.55;}
:where(html.page-problems) .problem-card-text>span{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-top:auto;color:var(--problem-accent);font-size:13px;font-weight:750;}
:where(html.page-problems) .problem-card-text b{font-size:18px;transition:transform .2s ease;}
:where(html.page-problems) .problem-card:hover .problem-card-text b{transform:translateX(4px);}
:where(html.page-problems) .problems-empty{margin:24px 0;padding:28px;border:1px dashed var(--line);border-radius:16px;background:var(--cream);color:var(--ink-soft);text-align:center;font-size:16px;}
:where(html.page-problems) .problems-help{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:22px;margin-top:28px;padding:24px 28px;overflow:hidden;border:1px solid rgba(20,58,62,.08);border-radius:20px;background:linear-gradient(100deg,#f3f7ee 0%,#f7faf6 58%,#eaf5ef 100%);}
:where(html.page-problems) .problems-help::after{content:"";position:absolute;right:-70px;width:260px;height:260px;border-radius:50%;background:rgba(141,217,216,.18);}
:where(html.page-problems) .problems-help-icon{position:relative;z-index:1;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:#fff;color:#557a37;box-shadow:0 12px 30px -24px rgba(7,94,102,.45);}
:where(html.page-problems) .problems-help-icon svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
:where(html.page-problems) .problems-help div{position:relative;z-index:1;}
:where(html.page-problems) .problems-help h2{margin:0 0 5px;font-size:20px;line-height:1.3;letter-spacing:-.02em;}
:where(html.page-problems) .problems-help p{margin:0;color:var(--ink-soft);font-size:13px;}
:where(html.page-problems) .problems-help>a{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 20px;border-radius:12px;background:var(--moss);color:#fff;font-weight:700;white-space:nowrap;transition:background .2s ease,transform .2s ease;}
:where(html.page-problems) .problems-help>a:hover{background:var(--moss-dark);transform:translateY(-2px);}
:where(html.page-problems) .problems-disclaimer{max-width:840px;margin:22px auto 0;color:#6c7374;font-size:12px;text-align:center;}
@media (max-width:1050px){
:where(html.page-problems) .problems-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
:where(html.page-problems) .problem-card-copy{width:100%;grid-template-columns:76px minmax(0,1fr);padding-left:20px;}
:where(html.page-problems) .problem-icon{width:74px;height:74px;}
:where(html.page-problems) .problem-icon svg{width:52px;height:52px;}
}
@media (max-width:860px){
:where(html.page-problems) .problems-wrap{width:min(100% - 40px,760px);}
:where(html.page-problems) .problems-hero-grid{min-height:auto;grid-template-columns:1fr;padding-block:54px 42px;}
:where(html.page-problems) .problems-hero-copy{max-width:680px;}
:where(html.page-problems) .problems-hero-collage{display:none;}
:where(html.page-problems) .problems-catalog{padding-top:58px;}
:where(html.page-problems) .problems-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
:where(html.page-problems) .problem-card{min-height:400px;}
:where(html.page-problems) .problem-card-copy{width:100%;grid-template-columns:78px minmax(0,1fr);padding-left:22px;}
:where(html.page-problems) .problem-icon{width:76px;height:76px;}
:where(html.page-problems) .problem-icon svg{width:53px;height:53px;}
}
@media (max-width:600px){
:where(html.page-problems) .problems-wrap{width:100%;padding-inline:16px;}
:where(html.page-problems) .problems-hero{min-height:auto;}
:where(html.page-problems) .problems-hero-search{min-height:260px;padding-block:32px;}
:where(html.page-problems) .problems-hero h1{margin-bottom:10px;font-size:clamp(31px,9.5vw,42px);}
:where(html.page-problems) .problems-hero-search>p{margin-bottom:20px;font-size:14px;line-height:1.55;}
:where(html.page-problems) .problems-hero-copy>p{font-size:16px;}
:where(html.page-problems) .problems-search{height:54px;margin:0;}
:where(html.page-problems) .problems-catalog{padding:48px 0 30px;}
:where(html.page-problems) .problems-section-head{margin-bottom:24px;}
:where(html.page-problems) .problems-section-head p{font-size:14px;}
:where(html.page-problems) .problems-grid{grid-template-columns:1fr;gap:14px;}
:where(html.page-problems) .problem-card{min-height:380px;}
:where(html.page-problems) .problem-card::after{background:linear-gradient(0deg,var(--problem-bg) 0%,var(--problem-bg) 48%,rgba(255,255,255,0) 78%);}
:where(html.page-problems) .problem-card>img{inset:0 0 auto;width:100%;height:57%;object-position:66% center;}
:where(html.page-problems) .problem-product{top:12px;left:12px;max-width:calc(100% - 24px);}
:where(html.page-problems) .problem-card-copy{position:absolute;inset:auto 0 0;width:100%;height:59%;grid-template-columns:74px minmax(0,1fr);align-items:start;padding:26px 18px 18px;}
:where(html.page-problems) .problem-icon{width:72px;height:72px;}
:where(html.page-problems) .problem-icon svg{width:50px;height:50px;}
:where(html.page-problems) .problem-card-text{min-height:170px;}
:where(html.page-problems) .problem-card-text strong{font-size:21px;}
:where(html.page-problems) .problem-card-text small{font-size:12.5px;}
:where(html.page-problems) .problems-help{grid-template-columns:58px minmax(0,1fr);gap:14px;padding:20px;}
:where(html.page-problems) .problems-help-icon{width:56px;height:56px;}
:where(html.page-problems) .problems-help>a{grid-column:1/-1;width:100%;}
}
@media (prefers-reduced-motion:reduce){
:where(html.page-problems) *{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important;}
}
:where(html.page-home) img{max-width:100%;display:block;}
:where(html.page-home) button{font-family:inherit;}
:where(html.page-home) a{color:inherit;text-decoration:none;}
/* Visible keyboard focus everywhere */
:where(html.page-home) a:focus-visible,:where(html.page-home) button:focus-visible,:where(html.page-home) input:focus-visible,:where(html.page-home) select:focus-visible,:where(html.page-home) [tabindex]:focus-visible{
outline:2.5px solid var(--clay);
outline-offset:3px;
border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
:where(html.page-home) *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
:where(html.page-home) .wrap{
max-width:1360px;
margin:0 auto;
padding:0 32px;
}
:where(html.page-home) .carousel-actions{
display:flex;
gap:10px;
flex-shrink:0;
}
:where(html.page-home) .carousel-btn{
width:44px;
height:44px;
border-radius:50%;
border:1px solid var(--line);
background:var(--white);
color:var(--ink);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
:where(html.page-home) .carousel-btn:hover{
background:var(--cream);
border-color:rgba(30,29,26,0.22);
transform:translateY(-1px);
}
:where(html.page-home) .program-carousel{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(280px, 31%);
gap:18px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-padding:2px;
padding:2px 2px 12px;
-webkit-overflow-scrolling:touch;
}
:where(html.page-home) .program-carousel::-webkit-scrollbar{height:7px;}
:where(html.page-home) .program-carousel::-webkit-scrollbar-track{background:rgba(30,29,26,0.06); border-radius:999px;}
:where(html.page-home) .program-carousel::-webkit-scrollbar-thumb{background:rgba(7, 138, 147,0.38); border-radius:999px;}
:where(html.page-home) .program-card{
scroll-snap-align:start;
background:var(--white);
border:1px solid var(--line);
border-radius:var(--radius-m);
padding:24px;
min-height:300px;
display:flex;
flex-direction:column;
box-shadow:var(--shadow-card);
}
:where(html.page-home) .program-card.featured{
border-color:rgba(25, 181, 189,0.38);
}
:where(html.page-home) .program-kicker{
display:inline-flex;
align-items:center;
width:max-content;
margin-bottom:16px;
padding:6px 10px;
border-radius:999px;
background:var(--sage-light);
color:var(--moss-dark);
font-size:11px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}
:where(html.page-home) .program-card.featured .program-kicker{
background:rgba(25, 181, 189,0.15);
color:var(--clay-dark);
}
:where(html.page-home) .program-card h3{
font-family:var(--font-display);
font-size:23px;
font-weight:500;
line-height:1.15;
margin:0 0 10px;
}
:where(html.page-home) .program-card p{
margin:0 0 18px;
color:var(--ink-soft);
font-size:14px;
}
:where(html.page-home) .program-list{
list-style:none;
padding:0;
margin:0 0 22px;
display:grid;
gap:10px;
}
:where(html.page-home) .program-list li{
position:relative;
padding-left:20px;
color:var(--ink);
font-size:13.5px;
}
:where(html.page-home) .program-list li::before{
content:"";
position:absolute;
left:0;
top:.65em;
width:7px;
height:7px;
border-radius:50%;
background:var(--clay);
}
:where(html.page-home) .program-link{
margin-top:auto;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:11px 18px;
border-radius:999px;
background:var(--moss);
color:#fff;
font-size:13.5px;
font-weight:700;
transition:background .2s var(--ease);
}
:where(html.page-home) .program-link:hover{background:var(--moss-dark);}
/* =====================================================
STORE SECTION
===================================================== */
:where(html.page-home) .store-section{
padding:54px 0 100px;
}
:where(html.page-home) .store-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:34px;
flex-wrap:wrap;
}
:where(html.page-home) .store-head h2{
font-family:var(--font-display);
font-size:clamp(28px, 3.4vw, 38px);
font-weight:500;
margin:0 0 6px;
}
:where(html.page-home) .store-head p{
margin:0;
color:var(--ink-soft);
font-size:15px;
max-width:480px;
}
:where(html.page-home) .results-count{
font-size:13.5px;
color:var(--ink-soft);
font-weight:500;
white-space:nowrap;
}
:where(html.page-home) .results-count b{color:var(--ink);}
/* ---- Controls bar ---- */
:where(html.page-home) .controls{
position:sticky;
top:73px;
z-index:40;
background:var(--glass-background-strong);
-webkit-backdrop-filter:var(--glass-blur);
backdrop-filter:var(--glass-blur);
padding:14px 0;
margin-bottom:30px;
border-bottom:1px solid var(--line);
}
:where(html.page-home) .controls-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
flex-wrap:wrap;
}
:where(html.page-home) .chips{
display:flex;
gap:10px;
flex-wrap:wrap;
}
:where(html.page-home) .chip{
border:1.5px solid var(--line);
background:var(--white);
color:var(--ink-soft);
font-size:13.5px;
font-weight:500;
padding:9px 18px;
border-radius:999px;
cursor:pointer;
transition:all .2s var(--ease);
white-space:nowrap;
}
:where(html.page-home) .chip:hover{
border-color:var(--moss);
color:var(--moss-dark);
}
:where(html.page-home) .chip.is-active{
background:var(--moss);
border-color:var(--moss);
color:#fff;
}
:where(html.page-home) .sort-search{
display:flex;
gap:10px;
align-items:center;
}
:where(html.page-home) .search-box{
position:relative;
}
:where(html.page-home) .search-box input{
width:230px;
padding:10px 14px 10px 38px;
border-radius:999px;
border:1.5px solid var(--line);
background:var(--white);
font-size:13.5px;
font-family:inherit;
color:var(--ink);
transition:border-color .2s var(--ease);
}
:where(html.page-home) .search-box input:focus{border-color:var(--moss); outline:none;}
:where(html.page-home) .search-box svg{
position:absolute;
left:13px; top:50%;
transform:translateY(-50%);
width:15px; height:15px;
color:#A6A395;
pointer-events:none;
}
:where(html.page-home) .sort-select{
padding:10px 34px 10px 16px;
border-radius:999px;
border:1.5px solid var(--line);
background:var(--white) url('data:image/svg+xml;utf8,') no-repeat right 12px center;
font-size:13.5px;
font-family:inherit;
color:var(--ink);
cursor:pointer;
appearance:none;
-webkit-appearance:none;
}
:where(html.page-home) .sort-select:focus{outline:none; border-color:var(--moss);}
/* ---- Product grid ---- */
:where(html.page-home) .grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
gap:22px;
}
:where(html.page-home) .card{
background:var(--white);
border-radius:var(--radius-m);
overflow:hidden;
box-shadow:var(--shadow-card);
border:.5px solid rgba(30,29,26,0.10);
transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
display:flex;
flex-direction:column;
opacity:0;
transform:translateY(14px);
animation:cardIn .55s var(--ease) forwards;
}
@keyframes cardIn{
to{opacity:1; transform:translateY(0);}
}
:where(html.page-home) .card:hover{
transform:translateY(-5px);
box-shadow:var(--shadow-card-hover);
border-color:rgba(7, 138, 147,0.22);
}
:where(html.page-home) .card-media{
position:relative;
aspect-ratio:1/1;
background:var(--cream);
overflow:hidden;
}
:where(html.page-home) .card-media .ph{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
padding:0;
width:100%;
border:none;
background:none;
cursor:pointer;
}
:where(html.page-home) .card-media .ph img{
width:100%;
height:100%;
object-fit:cover;
border:none;
border-radius:0;
background:var(--cream);
padding:0;
transition:transform .35s var(--ease);
}
:where(html.page-home) .card:hover .card-media .ph img{transform:scale(1.025);}
:where(html.page-home) .card-media .ph.is-empty{
padding:16px;
color:var(--ink-soft);
font-size:12.5px;
font-weight:700;
text-align:center;
}
:where(html.page-home) .badge-stack{
position:absolute;
top:10px;
left:10px;
display:flex;
flex-direction:column;
gap:6px;
align-items:flex-start;
z-index:2;
}
:where(html.page-home) .product-badge{
font-size:11px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
line-height:1;
padding:5px 10px;
border-radius:999px;
}
:where(html.page-home) .product-badge.sale{background:var(--ink); color:#fff;}
:where(html.page-home) .product-badge.sale:not(.subscription-badge){font-size:12.5px;padding:7px 12px;}
:where(html.page-home) .product-badge.sold{background:rgba(30,29,26,.55); color:#fff;}
:where(html.page-home) .subscription-corner-ribbon{
position:absolute;z-index:3;top:0;right:0;width:132px;height:102px;
overflow:hidden;pointer-events:none;
}
:where(html.page-home) .subscription-corner-ribbon span{
position:absolute;top:18px;right:-47px;width:176px;padding:8px 0;
transform:rotate(39deg);background:#2ba9d2;color:#083847;
box-shadow:0 5px 14px rgba(30,29,26,.16);
font-size:9px;font-weight:800;letter-spacing:.07em;line-height:1;
text-align:center;text-transform:uppercase;
}
:where(html.page-home) .quick-add{
position:absolute;
left:10px; right:10px; bottom:10px;
display:flex;
justify-content:center;
opacity:0;
transform:translateY(8px);
transition:opacity .25s var(--ease), transform .25s var(--ease);
z-index:2;
}
:where(html.page-home) .card:hover .quick-add{opacity:1; transform:translateY(0);}
:where(html.page-home) .quick-add button{
width:100%;
background:var(--ink);
color:#fff;
border:none;
border-radius:999px;
padding:10px 14px;
font-size:12.5px;
font-weight:600;
letter-spacing:.01em;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
transition:background .2s var(--ease);
}
:where(html.page-home) .quick-add button:hover{background:var(--moss-dark);}
:where(html.page-home) .quick-add button:disabled{background:#A6A395; cursor:not-allowed;}
:where(html.page-home) .quick-add-mobile{display:none;}
:where(html.page-home) .card-body{
padding:14px 14px 16px;
display:flex;
flex-direction:column;
gap:7px;
flex:1;
}
:where(html.page-home) .card-cat{
font-size:10.5px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--sage);
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}
:where(html.page-home) .card-cat .nat-pill{
background:var(--sage-light);
color:var(--moss-dark);
border-radius:999px;
padding:1.5px 7px;
font-size:10px;
letter-spacing:0;
text-transform:none;
}
:where(html.page-home) .card h3{
margin:0;
font-family:var(--font-display);
font-size:16px;
font-weight:500;
line-height:1.25;
min-height:56px;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
:where(html.page-home) .card h3 a{transition:color .2s var(--ease);}
:where(html.page-home) .card h3 a:hover{color:var(--moss);}
:where(html.page-home) .card .desc{
font-size:12.5px;
color:var(--ink-soft);
margin:0;
flex:1;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
:where(html.page-home) .card-bottom{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:8px;
margin-top:4px;
}
:where(html.page-home) .price{
display:flex;
flex-direction:row;
align-items:baseline;
flex-wrap:wrap;
column-gap:5px;
row-gap:3px;
}
:where(html.page-home) .price .now{
font-family:var(--font-display);
font-size:17px;
font-weight:600;
line-height:1.15;
}
:where(html.page-home) .price .old{
flex:0 0 auto;
font-size:12px;
color:var(--ink-soft);
text-decoration:line-through;
white-space:nowrap;
}
:where(html.page-home) .price .month{
font-size:11.5px;
color:var(--ink-soft);
}
:where(html.page-home) .rating{
display:flex;
align-items:center;
gap:4px;
font-size:12px;
color:var(--ink-soft);
}
:where(html.page-home) .rating svg{width:13px; height:13px; fill:var(--clay); stroke:none;}
:where(html.page-home) .card.is-sold .card-media{filter:grayscale(.25) opacity(.85);}
:where(html.page-home) .card.is-sold .quick-add button{background:#A6A395 !important; }
/* =====================================================
EMPTY STATE
===================================================== */
:where(html.page-home) .empty-state{
grid-column:1/-1;
text-align:center;
padding:80px 20px;
color:var(--ink-soft);
}
:where(html.page-home) .empty-state svg{width:54px; height:54px; margin-bottom:18px; opacity:.5;}
:where(html.page-home) .empty-state h3{font-family:var(--font-display); font-size:22px; color:var(--ink); margin:0 0 8px;}
:where(html.page-home) .empty-state button{
margin-top:18px;
background:var(--moss);
color:#fff;
border:none;
padding:11px 22px;
border-radius:999px;
font-size:13.5px;
font-weight:600;
cursor:pointer;
}
/* =====================================================
TRUST STRIP
===================================================== */
:where(html.page-home) .trust{
background:var(--moss);
color:var(--sage-light);
padding:40px 0;
}
:where(html.page-home) .trust .wrap{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}
:where(html.page-home) .trust-item{
display:flex;
align-items:center;
gap:14px;
}
:where(html.page-home) .trust-item svg{width:28px; height:28px; flex-shrink:0; stroke:#fff;}
:where(html.page-home) .trust-item b{display:block; font-size:14px; color:#fff; font-weight:600;}
:where(html.page-home) .trust-item span{font-size:12.5px; opacity:.8;}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width:1100px){
:where(html.page-home) .grid{grid-template-columns:repeat(3,1fr);}
:where(html.page-home) .hero{min-height:auto;}
:where(html.page-home) .hero-stage{min-height:980px;}
:where(html.page-home) .hero-photo-wrap{left:40px;top:58px;width:min(54vw,520px);height:650px;}
:where(html.page-home) .hero-copy{left:42%;right:28px;top:142px;}
:where(html.page-home) .hero-script{font-size:clamp(34px,4.5vw,50px);padding-left:0;}
:where(html.page-home) .hero-title-strip{left:-90px;max-width:min(92vw,820px);padding:20px 30px 22px;}
:where(html.page-home) .hero h1{font-size:clamp(40px,5.8vw,62px);}
:where(html.page-home) .hero p.lead{font-size:19px;line-height:1.75;}
:where(html.page-home) .trust .wrap{grid-template-columns:repeat(2,1fr); row-gap:24px;}
}
@media (max-width:860px){
:where(html.page-home) .wrap{padding:0 20px;}
:where(html.page-home) .nav{padding:10px 14px;gap:10px;}
:where(html.page-home) .logo{font-size:21px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
:where(html.page-home) .nav-actions{gap:4px;}
:where(html.page-home) .icon-btn{width:42px;height:42px;}
:where(html.page-home) .nav-links{display:none;}
:where(html.page-home) .burger{
display:flex;
background:none; border:none; cursor:pointer;
align-items:center; justify-content:center;
}
:where(html.page-home) .grid{grid-template-columns:repeat(2,1fr); gap:16px;}
:where(html.page-home) .controls{top:65px;}
:where(html.page-home) .controls-inner{flex-direction:column; align-items:stretch;}
:where(html.page-home) .sort-search{justify-content:space-between; gap:8px;}
:where(html.page-home) .search-box{flex:1; min-width:0;}
:where(html.page-home) .search-box input{width:100%; min-width:0;}
:where(html.page-home) .sort-select{flex-shrink:0; max-width:46%; padding-right:30px;}
:where(html.page-home) .chips{overflow-x:auto; padding-bottom:4px; flex-wrap:nowrap;}
:where(html.page-home) .chips::-webkit-scrollbar{display:none;}
:where(html.page-home) .quick-add{opacity:1; transform:none;}
:where(html.page-home) .program-carousel{grid-auto-columns:minmax(260px, 82%);}
}
@media (max-width:520px){
:where(html.page-home) .nav{padding:10px 14px;}
:where(html.page-home) .logo{font-size:20px;}
:where(html.page-home) .hero{min-height:auto;background:#f8f8f8;}
:where(html.page-home) .hero::before{width:100%;height:360px;bottom:auto;background-size:680px auto;background-position:left top;}
:where(html.page-home) .hero::after{display:none;}
:where(html.page-home) .hero-stage{min-height:auto;padding:28px 18px 54px;}
:where(html.page-home) .hero-photo-wrap{position:relative;left:auto;top:auto;width:82%;height:auto;aspect-ratio:0.76;margin:0 0 0 0;}
:where(html.page-home) .hero-photo{object-position:center 32%;}
:where(html.page-home) .hero-copy{position:relative;left:auto;right:auto;top:auto;margin-top:28px;}
:where(html.page-home) .hero-script{font-size:clamp(32px,8.2vw,44px);margin:0 0 18px;padding-left:0;transform:rotate(-3deg);max-width:100%;}
:where(html.page-home) .hero-title-strip{left:0;width:calc(100% + 18px);max-width:none;margin:0 0 24px;padding:16px 18px;}
:where(html.page-home) .hero h1{font-size:clamp(31px,8.6vw,42px);line-height:1;white-space:nowrap;}
:where(html.page-home) .hero p.lead{font-size:16px;line-height:1.75;margin-bottom:28px;}
:where(html.page-home) .hero-actions{margin-bottom:0;}
:where(html.page-home) .primary-cta{width:100%;}
:where(html.page-home) .carousel-actions{width:100%; justify-content:flex-end;}
:where(html.page-home) .program-carousel{grid-auto-columns:88%;}
:where(html.page-home) .program-card{padding:20px;}
:where(html.page-home) .grid{grid-template-columns:1fr 1fr; gap:12px;}
:where(html.page-home) .card-body{padding:12px 12px 14px; gap:6px;}
:where(html.page-home) .card h3{font-size:14.5px;}
:where(html.page-home) .product-badge.sale:not(.subscription-badge){font-size:11.5px;padding:6px 10px;letter-spacing:.025em;}
:where(html.page-home) .subscription-corner-ribbon{width:112px;height:88px;}
:where(html.page-home) .subscription-corner-ribbon span{top:14px;right:-50px;width:158px;padding:7px 0;font-size:7.5px;}
:where(html.page-home) .price .now{font-size:16px;}
:where(html.page-home) .card .desc{display:none;}
:where(html.page-home) .price{flex-direction:row;align-items:baseline;column-gap:5px;row-gap:1px;flex-wrap:wrap;}
:where(html.page-home) .price .now,:where(html.page-home) .price .month{white-space:nowrap;}
:where(html.page-home) .price .old{flex:0 0 auto;white-space:nowrap;}
:where(html.page-home) .quick-add-media{display:none;}
:where(html.page-home) .quick-add-mobile{
position:static;
display:flex;
opacity:1;
transform:none;
margin-top:auto;
padding-top:4px;
width:100%;
}
:where(html.page-home) .quick-add button{padding:10px 8px;font-size:11.5px;line-height:1;white-space:nowrap;}
:where(html.page-home) .quick-add button svg{display:none;}
:where(html.page-home) .quick-add button span.full{display:inline;}
:where(html.page-home) .store-head{flex-direction:column; align-items:flex-start;}
:where(html.page-home) .trust .wrap{grid-template-columns:1fr;}
}
/* =====================================================
SECTION SHARED HEADER
===================================================== */
:where(html.page-home) .section-head{
text-align:center;
margin-bottom:var(--home-heading-content-gap);
}
:where(html.page-home) .section-eyebrow{
display:inline-block;
font-size:12.5px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--clay-dark);
margin-bottom:12px;
}
:where(html.page-home) .section-head h2,
:where(html.page-home) .section-head h3{
font-family:var(--font-display);
font-weight:500;
font-size:clamp(30px, 3.5vw, 44px);
line-height:1.06;
margin:0;
}
:where(html.page-home) .section-head h2 em,
:where(html.page-home) .section-head h3 em{
font-style:italic;
color:var(--moss);
}
:where(html.page-home) .section-head p{
font-size:16px;
color:var(--ink-soft);
max-width:520px;
margin:14px auto 0;
}
@media(min-width:761px){
:where(html.page-home) .section-head.section-head-one-line p{
max-width:none;
white-space:nowrap;
}
}
:where(html.page-home) .section-cta-row{display:flex;justify-content:center;margin-top:var(--home-content-cta-gap);text-align:center;}
/* =====================================================
BESTSELLERS
===================================================== */
:where(html.page-home) .bestsellers-section{
padding:var(--home-section-edge) 0;
}
:where(html.page-home) .bestsellers-grid{
display:grid;
grid-template-columns:repeat(var(--home-product-columns),minmax(0,1fr));
gap:var(--home-product-gap);
}
:where(html.page-home) .bestsellers-grid .card{height:100%;}
:where(html.page-home) .bestsellers-grid .card-bottom{margin-top:auto;}
/* Homepage hero v2 — scoped so the remainder of the backup page stays unchanged. */
:where(html.page-home) .home-hero{position:relative;isolation:isolate;min-height:clamp(520px,44vw,622px);overflow:hidden;background:linear-gradient(105deg,#fff 0%,#FBFDFD 42%,#F4FAF9 74%,#EEF8F7 100%)}
:where(html.page-home) .home-hero::before{content:'';position:absolute;inset:auto -9% -20% -8%;height:58%;z-index:-3;background:linear-gradient(160deg,transparent 13%,rgba(244,206,216,.54) 14% 38%,rgba(255,255,255,.75) 39% 52%,rgba(239,187,202,.46) 53%);transform:skewY(-7deg)}
:where(html.page-home) .home-hero::after{content:'';position:absolute;width:780px;height:780px;right:4%;top:-43%;z-index:-2;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85),rgba(246,192,207,.2) 44%,transparent 70%);filter:blur(4px)}
:where(html.page-home) .home-hero .hero-sparkles{position:absolute;inset:0;z-index:-1;opacity:.7;background-image:radial-gradient(circle at 15% 66%,#fff 0 2px,transparent 3px),radial-gradient(circle at 27% 22%,#fff 0 1.5px,transparent 3px),radial-gradient(circle at 68% 16%,#fff 0 2px,transparent 3px),radial-gradient(circle at 84% 56%,#fff 0 1.5px,transparent 3px);background-size:210px 210px,170px 170px,240px 240px,130px 130px}
:where(html.page-home) .home-hero .botanical{position:absolute;right:-2%;top:0;width:min(38vw,600px);height:64%;z-index:-1;opacity:.26;color:#078A93}:where(html.page-home) .home-hero .botanical path{fill:none;stroke:currentColor;stroke-width:1.5}
:where(html.page-home) .home-hero .hero-inner{min-height:inherit;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);align-items:center;position:relative}
:where(html.page-home) .home-hero .hero-copy{position:relative;inset:auto;padding:42px 0 50px;max-width:640px;text-align:center;z-index:2}
:where(html.page-home) .home-hero .hero-heading{margin:0;color:inherit;font:inherit}
:where(html.page-home) .home-hero .hero-kicker{display:block;font-size:clamp(25px,3vw,42px);font-weight:800;line-height:1.05;letter-spacing:.025em}
:where(html.page-home) .home-hero .hero-source{display:block;margin:6px 0 2px;color:#078A93;font-family:'Inter',sans-serif;font-size:clamp(44px,4.9vw,70px);font-weight:700;line-height:1.08;white-space:nowrap;transform:none}
:where(html.page-home) .home-hero .hero-ending{display:block;font-size:clamp(27px,3.25vw,44px);font-weight:800;line-height:1.05;letter-spacing:.015em}
:where(html.page-home) .home-hero .hero-subtitle{margin:34px auto 0;max-width:590px;font-size:clamp(16px,1.4vw,19px);line-height:1.55}:where(html.page-home) .home-hero .hero-subtitle strong{font-weight:800}
:where(html.page-home) .home-hero .hero-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px}
:where(html.page-home) .home-hero .hero-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;margin-top:26px;padding:14px 32px;border-radius:10px;background:linear-gradient(135deg,#075E66,#078A93);color:#fff;font-size:14px;font-weight:800;letter-spacing:.025em;box-shadow:0 12px 30px rgba(7, 94, 102,.22);transition:transform .2s,box-shadow .2s}:where(html.page-home) .home-hero .hero-cta:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(7, 94, 102,.3)}
:where(html.page-home) .home-hero .hero-actions .hero-cta{margin-top:0}
:where(html.page-home) .home-hero .hero-actions .hero-cta-secondary{background:#fff!important;background-image:none!important;color:#181818!important;border:2px solid #47686B!important;box-shadow:none!important}
:where(html.page-home) .home-hero .hero-actions .hero-cta-secondary:hover{background:#fff!important;background-image:none!important;color:#181818!important;border-color:#181818!important;box-shadow:none!important}
@media(max-width:1000px){:where(html.page-home) .home-hero .hero-inner{grid-template-columns:1fr minmax(330px,.8fr)}}
@media(max-width:760px){:where(html.page-home) .home-hero{min-height:0}:where(html.page-home) .home-hero .hero-inner{min-height:0;display:flex;flex-direction:column;padding:48px 20px 0}:where(html.page-home) .home-hero .hero-copy{width:100%;padding:0;max-width:100%}:where(html.page-home) .home-hero .hero-source{font-size:clamp(32px,9vw,42px);line-height:1.08;letter-spacing:-.02em;white-space:nowrap;transform:none}:where(html.page-home) .home-hero .hero-subtitle{margin-top:26px;font-size:16px;line-height:1.55;max-width:520px}:where(html.page-home) .home-hero .hero-actions{flex-direction:column;width:min(100%,310px);margin:26px auto 0;gap:10px}:where(html.page-home) .home-hero .hero-cta{width:100%;font-size:14px}:where(html.page-home) .home-hero .botanical{width:75vw;height:42%}}
@media(max-width:520px){:where(html.page-home) .home-hero .hero-inner{padding:38px 16px 0}:where(html.page-home) .home-hero .hero-kicker{font-size:clamp(25px,7.2vw,29px)}:where(html.page-home) .home-hero .hero-ending{font-size:clamp(27px,8vw,31px)}:where(html.page-home) .home-hero .hero-source{font-size:clamp(30px,9vw,38px);margin:7px auto}:where(html.page-home) .home-hero .hero-subtitle{max-width:360px;margin-top:24px;font-size:16px;line-height:1.55}:where(html.page-home) .home-hero .hero-actions{margin-top:24px}:where(html.page-home) .home-hero .hero-cta{min-height:52px;padding:14px 20px;font-size:14px}}
/* Full-width trust bar below the homepage campaign slider. */
:where(html.page-home) .site-trust.home-trust{
position:relative;
z-index:4;
width:100%;
margin:0;
padding:0;
overflow:hidden;
background:#080808;
color:#fff;
}
:where(html.page-home) .home-trust-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
align-items:center;
width:min(100%,1540px);
margin:0 auto;
}
html.page-home .home-trust-item{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
min-width:0;
min-height:76px;
padding:12px clamp(18px,2.2vw,36px);
color:#fff;
font-family:'Inter',sans-serif;
}
html.page-home .home-trust-item svg{
width:29px;
height:29px;
flex:0 0 29px;
fill:none;
stroke:#fff;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
:where(html.page-home) .home-trust-copy{
display:flex;
min-width:0;
flex-direction:column;
gap:3px;
line-height:1.18;
text-align:left;
}
:where(html.page-home) .home-trust-copy strong{
color:#fff;
font-size:clamp(13px,1vw,16px);
font-weight:800;
letter-spacing:.015em;
}
:where(html.page-home) .home-trust-copy span{
color:rgba(255,255,255,.86);
font-size:clamp(11px,.84vw,13px);
font-weight:500;
letter-spacing:.02em;
}
@media(max-width:900px){
:where(html.page-home) .home-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html.page-home .home-trust-item{min-height:72px}
}
@media(max-width:520px){
html.page-home .home-trust-item{justify-content:flex-start;gap:10px;min-height:72px;padding:10px 12px}
html.page-home .home-trust-item svg{width:24px;height:24px;flex-basis:24px}
:where(html.page-home) .home-trust-copy{gap:4px}
:where(html.page-home) .home-trust-copy strong{font-size:11.5px;line-height:1.2}
:where(html.page-home) .home-trust-copy span{font-size:9.5px;line-height:1.25}
}
/* Homepage shopping paths: three primary ways into the catalogue. */
:where(html.page-home) .home-paths{
padding:var(--home-section-edge) 0;
}
:where(html.page-home) .home-paths-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(16px,1.8vw,24px);
}
:where(html.page-home) .home-path-card{
position:relative;
isolation:isolate;
display:block;
min-width:0;
height:clamp(250px,18.5vw,278px);
overflow:hidden;
border:1px solid rgba(20,58,62,.1);
border-radius:var(--radius-l);
background:#e8ece7;
color:#fff;
text-decoration:none;
box-shadow:0 22px 48px -38px rgba(20,58,62,.58);
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
touch-action:manipulation;
}
:where(html.page-home) .home-path-card>img{
position:absolute;
z-index:-2;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center right;
filter:saturate(.94) contrast(.99) brightness(1.01);
transition:transform .5s var(--ease),filter .3s var(--ease);
}
:where(html.page-home) .home-path-card-shade{
position:absolute;
z-index:-1;
inset:0;
background:
linear-gradient(90deg,rgba(3,31,34,.78) 0%,rgba(3,31,34,.58) 42%,rgba(3,31,34,.16) 68%,transparent 100%),
linear-gradient(0deg,rgba(3,31,34,.34) 0%,transparent 62%);
}
:where(html.page-home) .home-path-card-content{
position:absolute;
inset:0 auto 0 0;
display:grid;
grid-template-rows:26px auto 42px;
row-gap:6px;
align-items:flex-start;
align-content:end;
width:70%;
padding:clamp(20px,1.7vw,24px);
text-shadow:0 2px 12px rgba(3,24,26,.55),0 1px 2px rgba(3,24,26,.65);
}
:where(html.page-home) .home-path-card-content>strong{
color:#fff;
font-family:var(--font-display);
font-size:clamp(21px,1.65vw,24px);
font-weight:650;
line-height:1.08;
letter-spacing:-.035em;
white-space:nowrap;
}
:where(html.page-home) .home-path-card-content>strong+span{
max-width:29ch;
margin-top:0;
color:rgba(255,255,255,.86);
font-size:13.5px;
line-height:1.35;
}
:where(html.page-home) .home-path-card-action{
display:inline-flex;
align-items:center;
justify-self:start;
gap:9px;
min-height:42px;
margin-top:0;
padding:9px 13px;
border:1px solid rgba(255,255,255,.46);
border-radius:999px;
background:rgba(255,255,255,.94);
color:var(--moss-dark);
font-size:11px;
font-weight:800;
letter-spacing:.08em;
line-height:1;
text-shadow:none;
text-transform:uppercase;
}
:where(html.page-home) .home-path-card-action svg{
width:16px;
height:16px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
transition:transform .2s ease;
}
:where(html.page-home) .home-path-card:hover{
border-color:rgba(7,138,147,.3);
box-shadow:0 30px 58px -34px rgba(20,58,62,.65);
transform:translateY(-4px);
}
:where(html.page-home) .home-path-card:hover>img{filter:saturate(1) contrast(1) brightness(1.02);transform:scale(1.035)}
:where(html.page-home) .home-path-card:hover .home-path-card-action svg{transform:translateX(3px)}
:where(html.page-home) .home-path-card:focus-visible{outline:3px solid var(--clay);outline-offset:4px}
@media(max-width:900px){
:where(html.page-home) .home-paths-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
:where(html.page-home) .home-path-card{height:260px}
:where(html.page-home) .home-path-card:last-child{grid-column:1/-1}
}
@media(max-width:620px){
:where(html.page-home) .home-paths-grid{grid-template-columns:1fr;gap:14px}
:where(html.page-home) .home-path-card,
:where(html.page-home) .home-path-card:last-child{grid-column:auto;height:230px}
:where(html.page-home) .home-path-card-content{width:82%;padding:20px}
:where(html.page-home) .home-path-card-content>strong{font-size:clamp(19px,5.7vw,22px)}
:where(html.page-home) .home-path-card-content>strong+span{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
:where(html.page-home) .home-path-card,
:where(html.page-home) .home-path-card>img,
:where(html.page-home) .home-path-card-action svg{transition:none}
}
/* Homepage product promotions use the shared product grid and a two-row carousel on phones. */
:where(html.page-home) .home-promotions{padding:var(--home-section-edge) 0;}
:where(html.page-home) .home-promotions-carousel{overflow:visible;}
:where(html.page-home) .home-promotions-grid{
display:grid;
grid-template-columns:repeat(var(--home-product-columns),minmax(0,1fr));
gap:var(--home-product-gap);
}
:where(html.page-home) .home-promotions-grid .card{height:100%;}
:where(html.page-home) .home-promotions-grid .card-bottom{margin-top:auto;}
:where(html.page-home) .home-promotions-status{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:where(html.page-home) .home-promotions-empty{
grid-column:1/-1;padding:42px 20px;border:1px solid var(--line);border-radius:var(--radius-m);
background:var(--white);color:var(--ink-soft);text-align:center;
}
@media(max-width:600px){
:where(html.page-home) .home-promotions-carousel{
overflow-x:auto;margin-inline:-20px;padding:2px 20px 10px;scroll-padding-inline:20px;
scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
:where(html.page-home) .home-promotions-carousel::-webkit-scrollbar{display:none;}
:where(html.page-home) .home-promotions-grid{
display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
grid-auto-columns:calc((100vw - 52px)/2);grid-template-columns:none;
width:max-content;gap:12px;align-items:stretch;
}
:where(html.page-home) .home-promotions-grid .card{width:100%;min-width:0;height:100%;scroll-snap-align:start;scroll-snap-stop:always;}
:where(html.page-home) .home-promotions-grid .card:nth-child(n+9){display:none;}
:where(html.page-home) .home-promotions-grid .quick-add-media{display:none;}
:where(html.page-home) .home-promotions-grid .quick-add-mobile{position:static;display:flex;opacity:1;transform:none;margin-top:auto;padding-top:4px;width:100%;}
}
/* Global video player — thumbnail first; the embed loads on activation. */
.site-video-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;overflow:hidden;border:0;background:linear-gradient(145deg,#123f43,#082b2e);cursor:pointer}
.site-video-poster img{width:100%;height:100%;object-fit:cover;transition:transform .28s var(--ease),filter .2s var(--ease)}
.site-video-poster::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,32,34,.02),rgba(8,32,34,.22));transition:background .2s var(--ease)}
.site-video-play{position:absolute;z-index:1;top:50%;left:50%;display:grid;width:58px;height:58px;place-items:center;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(7,138,147,.92);box-shadow:0 12px 30px rgba(0,0,0,.26);transform:translate(-50%,-50%);transition:transform .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease)}
.site-video-play svg{width:24px;height:24px;margin-left:3px;fill:#fff}
.site-video-poster:hover img{transform:scale(1.025);filter:saturate(1.04)}
.site-video-poster:hover::after{background:linear-gradient(180deg,rgba(8,32,34,0),rgba(8,32,34,.3))}
.site-video-poster:hover .site-video-play{background:var(--moss);box-shadow:0 15px 34px rgba(0,0,0,.32);transform:translate(-50%,-50%) scale(1.06)}
.site-video-poster:focus-visible{outline:3px solid var(--crystal);outline-offset:-5px}
@media(max-width:620px){.site-video-play{width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){.site-video-poster img,.site-video-poster::after,.site-video-play{transition:none}}
/* Homepage surface and vertical rhythm — one source of truth. */
:root:where(.page-home){
--home-section-edge:64px;
--home-heading-content-gap:32px;
--home-content-cta-gap:32px;
--home-product-columns:5;
--home-product-gap:18px;
}
:where(html.page-home) .home-paths,
:where(html.page-home) .bestsellers-section,
:where(html.page-home) .home-quality,
:where(html.page-home) .home-promotions,
:where(html.page-home) .home-reviews{
background:#fff;
}
:where(html.page-home) .home-reviews .product-reviews-section{
padding-block:var(--home-section-edge);
border:0;
background:#fff;
}
@media(max-width:680px){
:root:where(.page-home){
--home-section-edge:48px;
--home-heading-content-gap:24px;
--home-content-cta-gap:24px;
}
}
@media(max-width:1200px){
:root:where(.page-home){
--home-product-columns:4;
}
}
@media(max-width:920px){
:root:where(.page-home){
--home-product-columns:3;
}
}
@media(max-width:760px){
:root:where(.page-home){
--home-product-columns:2;
--home-product-gap:14px;
}
}
@media(max-width:480px){
:root:where(.page-home){
--home-product-gap:12px;
}
}
/* Homepage quality proof — brand-aligned pillars and real certification marks. */
:where(html.page-home) .home-quality {
padding: var(--home-section-edge) 0;
overflow: hidden;
}
:where(html.page-home) .home-quality-head {
max-width: 880px;
margin: 0 auto var(--home-heading-content-gap);
text-align: center;
}
:where(html.page-home) .home-quality-eyebrow {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 6px 16px;
border-radius: 999px;
background: var(--mint);
color: var(--crystal-deep);
font-size: 12px;
font-weight: 800;
letter-spacing: .09em;
}
:where(html.page-home) .home-quality-head p {
max-width: 740px;
margin: 0 auto;
color: var(--ink-soft);
font-size: clamp(15px, 1.35vw, 18px);
line-height: 1.65;
text-wrap: balance;
}
:where(html.page-home) .home-quality-pillars {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 0;
}
:where(html.page-home) .home-quality-pillar {
min-width: 0;
padding: 0 clamp(22px, 2.3vw, 36px);
}
:where(html.page-home) .home-quality-pillar + .home-quality-pillar {
border-left: 1px solid rgba(var(--crystal-rgb), .13);
}
:where(html.page-home) .home-quality-icon {
display: grid;
width: 126px;
height: 126px;
margin: 0 auto 20px;
place-items: center;
border-radius: 44% 56% 51% 49% / 49% 45% 55% 51%;
background: linear-gradient(145deg, rgba(221,244,242,.86), rgba(250,252,252,.96));
color: var(--graphite);
}
:where(html.page-home) .home-quality-icon > svg {
width: 72px;
height: 72px;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
:where(html.page-home) .home-quality-icon .quality-icon-accent {
stroke: var(--crystal-bright);
stroke-width: 3.2;
}
:where(html.page-home) .home-quality-icon--years {
align-content: center;
gap: 0;
}
:where(html.page-home) .home-quality-icon--years > span {
color: var(--graphite);
font-size: 46px;
font-weight: 300;
line-height: .8;
letter-spacing: -.07em;
}
:where(html.page-home) .home-quality-icon--years sup {
color: var(--crystal);
font-size: .42em;
font-weight: 700;
vertical-align: top;
}
:where(html.page-home) .home-quality-icon--years > svg {
width: 42px;
height: 28px;
margin-left: 8px;
stroke: var(--crystal);
stroke-width: 2.4;
}
:where(html.page-home) .home-quality-number {
display: block;
margin-bottom: 6px;
color: var(--crystal-bright);
font-size: 13px;
font-weight: 850;
letter-spacing: .08em;
}
:where(html.page-home) .home-quality-pillar h3 {
margin: 0 0 10px;
color: var(--graphite);
font-family: var(--font-body);
font-size: clamp(17px, 1.45vw, 20px);
font-weight: 750;
line-height: 1.25;
}
:where(html.page-home) .home-quality-pillar p {
margin: 0;
color: var(--ink-soft);
font-size: 14px;
line-height: 1.65;
}
:where(html.page-home) .home-certificates {
margin-top:var(--home-section-edge);
padding: clamp(30px, 4vw, 48px) clamp(18px, 2.6vw, 34px) clamp(24px, 3vw, 38px);
border: 1px solid rgba(var(--crystal-rgb), .13);
border-radius: 24px;
background:#fff;
box-shadow: 0 18px 50px rgba(20,58,62,.055);
}
:where(html.page-home) .home-certificates-head {
text-align: center;
}
:where(html.page-home) .home-certificates-viewport {
max-width: 100%;
}
:where(html.page-home) .home-certificates-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
:where(html.page-home) .home-certificate-card {
display: flex;
min-width: 0;
flex-direction: column;
align-items: center;
padding: 4px clamp(10px, 1.15vw, 18px) 2px;
text-align: center;
}
:where(html.page-home) .home-certificate-card + .home-certificate-card {
border-left: 1px solid rgba(var(--crystal-rgb), .12);
}
:where(html.page-home) .home-certificate-logo {
display: grid;
width: 100%;
height: 116px;
place-items: center;
}
:where(html.page-home) .home-certificate-logo img {
width: auto;
max-width: 112px;
max-height: 96px;
object-fit: contain;
}
:where(html.page-home) .home-certificate-logo--wide img {
max-width: 148px;
max-height: 74px;
}
:where(html.page-home) .home-certificate-card p {
margin: 10px 0 0;
color: var(--graphite);
font-size: 12px;
line-height: 1.45;
}
:where(html.page-home) .home-certificate-dots { display: none; }
@media (max-width: 1040px) {
:where(html.page-home) .home-quality-pillars {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 38px 0;
}
:where(html.page-home) .home-quality-pillar:nth-child(3) { border-left: 0; }
:where(html.page-home) .home-certificates-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px 0;
}
:where(html.page-home) .home-certificate-card:nth-child(4) { border-left: 0; }
}
@media (max-width: 600px) {
:where(html.page-home) .home-quality-head p { font-size: 15px; line-height: 1.6; }
:where(html.page-home) .home-quality-pillars {
grid-template-columns: 1fr;
gap: 14px;
margin-top: 0;
}
:where(html.page-home) .home-quality-pillar,
:where(html.page-home) .home-quality-pillar + .home-quality-pillar {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 16px;
align-items: center;
padding: 18px;
border: 1px solid rgba(var(--crystal-rgb), .12);
border-radius: 16px;
background: rgba(255,255,255,.76);
}
:where(html.page-home) .home-quality-icon {
width: 78px;
height: 78px;
margin: 0;
}
:where(html.page-home) .home-quality-icon > svg { width: 48px; height: 48px; }
:where(html.page-home) .home-quality-icon--years > span { font-size: 31px; }
:where(html.page-home) .home-quality-icon--years > svg { width: 30px; height: 18px; }
:where(html.page-home) .home-quality-number { margin-bottom: 3px; font-size: 11px; }
:where(html.page-home) .home-quality-pillar h3 { margin-bottom: 6px; font-size: 17px; }
:where(html.page-home) .home-quality-pillar p { font-size: 13px; line-height: 1.5; }
:where(html.page-home) .home-certificates {
margin-inline: -4px;
padding: 28px 0 24px;
border-radius: 18px;
}
:where(html.page-home) .home-certificates-head { padding-inline: 18px; }
:where(html.page-home) .home-certificates-viewport {
overflow-x: auto;
padding: 2px 18px 12px;
scroll-padding-inline: 18px;
scroll-snap-type: x mandatory;
overscroll-behavior-inline: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
:where(html.page-home) .home-certificates-viewport::-webkit-scrollbar { display: none; }
:where(html.page-home) .home-certificates-grid {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: 18px;
width: 100%;
}
:where(html.page-home) .home-certificate-card,
:where(html.page-home) .home-certificate-card + .home-certificate-card {
min-height: 206px;
padding: 18px 16px;
border: 1px solid rgba(var(--crystal-rgb), .12);
border-radius: 14px;
background: #fff;
scroll-snap-align: start;
scroll-snap-stop: always;
}
:where(html.page-home) .home-certificate-logo { height: 118px; }
:where(html.page-home) .home-certificate-logo img { max-width: 126px; max-height: 104px; }
:where(html.page-home) .home-certificate-logo--wide img { max-width: 180px; max-height: 82px; }
:where(html.page-home) .home-certificate-card p { margin-top: 8px; font-size: 13px; }
:where(html.page-home) .home-certificate-dots {
display: flex;
align-items: center;
justify-content: center;
margin-top: 4px;
padding-inline: 12px;
}
:where(html.page-home) .home-certificate-dots button {
display: grid;
width: 44px;
height: 44px;
padding: 0;
place-items: center;
border: 0;
background: transparent;
cursor: pointer;
touch-action: manipulation;
}
:where(html.page-home) .home-certificate-dots span {
display: block;
width: 7px;
height: 7px;
border-radius: 999px;
background: rgba(var(--crystal-rgb), .25);
transition: width .2s var(--ease), background-color .2s var(--ease);
}
:where(html.page-home) .home-certificate-dots button.is-active span {
width: 20px;
background: var(--crystal);
}
}
/* ===== store.html base styles (scoped) ===== */
:where(html.page-store) *{box-sizing:border-box;}
html:where(.page-store){scroll-behavior:smooth;}
:where(html.page-store) body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5;}
:where(html.page-store) img{max-width:100%;display:block;}
:where(html.page-store) button,:where(html.page-store) input,:where(html.page-store) select,:where(html.page-store) textarea{font-family:var(--font-body);}
:where(html.page-store) a{color:inherit;text-decoration:none;}
:where(html.page-store) a:focus-visible,:where(html.page-store) button:focus-visible,:where(html.page-store) input:focus-visible,:where(html.page-store) select:focus-visible,:where(html.page-store) [tabindex]:focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){:where(html.page-store) *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}
:where(html.page-store) .wrap{max-width:1360px;margin:0 auto;padding:0 32px;}
/* =====================================================
MAIN CATEGORY TABS — primary navigation
===================================================== */
:where(html.page-store) .cat-tabs-wrap{
background:var(--white);
border-bottom:1px solid var(--line);
position:sticky;
top:61px;
z-index:50;
display:none;
}
:where(html.page-store) .cat-tabs{
display:flex;
gap:0;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
:where(html.page-store) .cat-tabs::-webkit-scrollbar{display:none;}
:where(html.page-store) .cat-tab{
flex-shrink:0;
display:flex;
align-items:center;
gap:8px;
padding:16px 22px;
font-size:14px;
font-weight:500;
color:var(--ink-soft);
border:none;
background:none;
cursor:pointer;
border-bottom:2.5px solid transparent;
transition:color .2s var(--ease), border-color .2s var(--ease);
white-space:nowrap;
}
:where(html.page-store) .cat-tab:hover{color:var(--ink);}
:where(html.page-store) .cat-tab.is-active{color:var(--moss);border-bottom-color:var(--moss);}
/* =====================================================
STORE LAYOUT — sidebar + grid
===================================================== */
:where(html.page-store) .store-layout{
display:grid;
grid-template-columns:260px 1fr;
gap:0;
align-items:start;
padding-bottom:100px;
}
/* =====================================================
SIDEBAR FILTERS
===================================================== */
:where(html.page-store) .sidebar{
padding:28px 24px 28px 0;
position:sticky;
top:82px;
max-height:calc(100vh - 96px);
overflow-y:auto;
}
:where(html.page-store) .sidebar::-webkit-scrollbar{width:4px;}
:where(html.page-store) .sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;}
:where(html.page-store) .sidebar-section{margin-bottom:24px;}
:where(html.page-store) .sidebar-section:last-child{margin-bottom:0;}
:where(html.page-store) .product-category-nav{display:flex;flex-direction:column;gap:12px;}
:where(html.page-store) .product-category-group{display:flex;flex-direction:column;gap:1px;}
:where(html.page-store) .category-group-link{
display:block;
padding:4px 8px;
color:var(--ink);font-size:14px;font-weight:750;line-height:1.4;
text-decoration:none;transition:color .18s var(--ease);
}
:where(html.page-store) .category-group-link:hover{color:var(--crystal-deep);}
:where(html.page-store) .category-group-link.is-current-group,
:where(html.page-store) .category-group-link.is-active{color:var(--ink);background:transparent;}
:where(html.page-store) .category-group-link:focus-visible{outline:2px solid rgba(7,138,147,.34);outline-offset:1px;}
:where(html.page-store) .maincat-list{display:flex;flex-direction:column;gap:0;padding-left:10px;}
:where(html.page-store) .maincat-btn{
display:flex;
align-items:center;
justify-content:flex-start;
width:100%;
min-height:32px;
padding:5px 8px;
border-radius:var(--radius-s);
border:none;
background:none;
font-size:13.5px;
line-height:1.35;
font-weight:500;
color:var(--ink-soft);
cursor:pointer;
text-align:left;
transition:background .15s var(--ease), color .15s var(--ease);
}
:where(html.page-store) .maincat-btn:hover{background:rgba(7, 138, 147,.045);color:var(--ink);}
:where(html.page-store) .maincat-btn.is-active{background:transparent;color:var(--moss);font-weight:700;border-color:transparent!important;box-shadow:none!important;}
:where(html.page-store) .maincat-btn.is-active:hover{background:rgba(241,223,228,.38);color:var(--moss-dark);}
:where(html.page-store) .maincat-btn:focus-visible{outline:2px solid rgba(7, 138, 147,.28);outline-offset:1px;}
:where(html.page-store) .maincat-btn .maincat-title{display:flex;align-items:center;gap:10px;min-width:0;}
:where(html.page-store) .maincat-dot{
width:11px;height:11px;flex:0 0 11px;border-radius:50%;
border:1px solid rgba(91,90,82,.12);background:rgba(91,90,82,.13);
transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease);
}
:where(html.page-store) .maincat-btn:hover .maincat-dot{border-color:rgba(7, 138, 147,.22);background:rgba(7, 138, 147,.13);}
:where(html.page-store) .maincat-btn.is-active .maincat-dot{border-color:var(--moss);background:var(--moss);box-shadow:0 0 0 3px rgba(7, 138, 147,.08);}
:where(html.page-store) .sidebar-label{
font-size:11px;
font-weight:700;
letter-spacing:.10em;
text-transform:uppercase;
color:var(--ink-soft);
margin:0 0 10px;
}
:where(html.page-store) .content-meta{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
flex-wrap:wrap;
}
:where(html.page-store) .top-sort select{
min-width:190px;
padding:10px 34px 10px 14px;
border-radius:var(--radius-s);
border:1.5px solid var(--line);
background:var(--white) url('data:image/svg+xml;utf8,') no-repeat right 12px center;
font:500 13.5px/1.35 var(--font-body);
color:var(--ink);
cursor:pointer;
appearance:none;
-webkit-appearance:none;
}
:where(html.page-store) .top-sort select:focus{outline:none;border-color:var(--moss);}
/* =====================================================
CONTENT AREA — search bar + grid
===================================================== */
:where(html.page-store) .content-area{
border-left:1px solid var(--line);
padding:28px 0 0 28px;
}
:where(html.page-store) .content-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:24px;
flex-wrap:wrap;
}
:where(html.page-store) .content-heading{
font-family:var(--font-display);
font-size:22px;
font-weight:450;
margin:0;
line-height:1.2;
}
:where(html.page-store) .content-heading em{font-style:italic;color:var(--moss);}
:where(html.page-store) .content-title-block{display:flex;flex-direction:column;gap:5px;}
:where(html.page-store) .result-line{
font-size:13px;
color:var(--ink-soft);
font-weight:500;
white-space:nowrap;
}
:where(html.page-store) .result-line b{color:var(--ink);}
:where(html.page-store) .top-sort{
display:flex;
align-items:center;
gap:8px;
}
:where(html.page-store) .sort-label{
font-size:13px;
color:var(--ink-soft);
font-weight:600;
white-space:nowrap;
}
:where(html.page-store) .mobile-category-picker{display:none;}
:where(html.page-store) .mobile-category-trigger{
width:100%;min-height:48px;padding:10px 12px;border:1.5px solid var(--line);
border-radius:var(--radius-s);background:var(--white);color:var(--ink);
font:500 14px/1.35 var(--font-body);text-align:left;cursor:pointer;
display:grid;grid-template-columns:20px minmax(0,1fr) 18px;align-items:center;gap:9px;
transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
:where(html.page-store) .mobile-category-trigger:hover{border-color:rgba(7, 138, 147,.32);background:var(--cream);}
:where(html.page-store) .mobile-category-trigger:focus-visible{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(7, 138, 147,.12);}
:where(html.page-store) .mobile-category-trigger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
:where(html.page-store) .mobile-category-trigger .category-trigger-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
:where(html.page-store) .mobile-category-trigger .category-trigger-chevron{transition:transform .22s var(--ease);}
:where(html.page-store) .mobile-category-trigger[aria-expanded="true"] .category-trigger-chevron{transform:rotate(180deg);}
/* =====================================================
PRODUCT GRID
===================================================== */
:where(html.page-store) .product-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
grid-auto-flow:row dense;
gap:20px;
}
:where(html.page-store) .product-grid.no-card-entrance .card{opacity:1;transform:none;animation:none;}
:where(html.page-store) .catalog-skeleton{height:410px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.38) 25%,rgba(255,255,255,.78) 50%,rgba(255,255,255,.38) 75%);background-size:220% 100%;animation:catalogShimmer 1.25s ease-in-out infinite;border:1px solid rgba(7, 94, 102,.06)}
@keyframes catalogShimmer{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){:where(html.page-store) .catalog-skeleton{animation:none}}
:where(html.page-store) .card{
background:var(--white);
border-radius:var(--radius-m);
overflow:hidden;
box-shadow:var(--shadow-card);
border:.5px solid rgba(30,29,26,0.10);
transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
display:flex;
flex-direction:column;
opacity:0;
transform:translateY(12px);
animation:cardIn .5s var(--ease) forwards;
}
@keyframes cardIn{to{opacity:1;transform:translateY(0);}}
:where(html.page-store) .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:rgba(7, 138, 147,0.22);}
:where(html.page-store) .card-media{
position:relative;
aspect-ratio:1/1;
background:var(--cream);
overflow:hidden;
}
:where(html.page-store) .card-media .ph{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
padding:0;
width:100%;
border:none;
background:none;
cursor:pointer;
}
:where(html.page-store) .card-media .ph img{width:100%;height:100%;object-fit:cover;border:none;border-radius:0;background:var(--cream);padding:0;transition:transform .35s var(--ease);}
:where(html.page-store) .card:hover .card-media .ph img{transform:scale(1.025);}
:where(html.page-store) .card-media .ph.is-empty{
padding:16px;
color:var(--ink-soft);
font-size:12.5px;
font-weight:700;
text-align:center;
}
:where(html.page-store) .thumb.is-empty{color:var(--ink-soft);font-size:10px;font-weight:800;text-align:center;line-height:1.15;}
:where(html.page-store) .badge-stack{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:2;}
:where(html.page-store) .product-badge{
font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
line-height:1;padding:4px 9px;border-radius:999px;
}
:where(html.page-store) .product-badge.sale{background:var(--ink);color:#fff;font-size:12.5px;padding:7px 12px;}
:where(html.page-store) .product-badge.sold{background:rgba(30,29,26,.55);color:#fff;}
:where(html.page-store) .subscription-corner-ribbon{
position:absolute;z-index:3;top:0;right:0;width:132px;height:102px;
overflow:hidden;pointer-events:none;
}
:where(html.page-store) .subscription-corner-ribbon span{
position:absolute;top:18px;right:-47px;width:176px;padding:8px 0;
transform:rotate(39deg);color:#fff;
box-shadow:0 5px 14px rgba(30,29,26,.16);
font-size:9px;font-weight:800;letter-spacing:.07em;line-height:1;
text-align:center;text-transform:uppercase;
}
:where(html.page-store) .subscription-corner-ribbon.is-subscription span{background:#2ba9d2;color:#083847;}
:where(html.page-store) .subscription-corner-ribbon.is-one-time span{background:#c69a2d;color:#342707;}
:where(html.page-store) .quick-add{
position:absolute;left:10px;right:10px;bottom:10px;
display:flex;justify-content:center;
opacity:0;transform:translateY(6px);
transition:opacity .25s var(--ease),transform .25s var(--ease);
z-index:2;
}
:where(html.page-store) .card:hover .quick-add{opacity:1;transform:translateY(0);}
:where(html.page-store) .quick-add button{
width:100%;background:var(--ink);color:#fff;border:none;
border-radius:999px;padding:10px 14px;
font-size:12.5px;font-weight:600;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:6px;
transition:background .2s var(--ease);
}
:where(html.page-store) .quick-add button:hover{background:var(--moss);}
:where(html.page-store) .quick-add button:disabled{background:#A6A395;cursor:not-allowed;}
:where(html.page-store) .quick-add-mobile{display:none;}
:where(html.page-store) .card-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:7px;flex:1;}
:where(html.page-store) .card-cat{
font-size:10.5px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--sage);
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
:where(html.page-store) .nat-pill{
background:var(--sage-light);color:var(--moss-dark);
border-radius:999px;padding:1.5px 7px;
font-size:10px;letter-spacing:0;text-transform:none;font-weight:600;
}
:where(html.page-store) .card h3{
margin:0;font-family:var(--font-display);
font-size:16px;font-weight:500;line-height:1.25;
min-height:56px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
:where(html.page-store) .card h3 a{transition:color .2s;}
:where(html.page-store) .card h3 a:hover{color:var(--moss);}
:where(html.page-store) .product-sale-timer{
display:flex;align-items:center;justify-content:center;gap:6px;
min-height:34px;padding:7px 9px;border:1px solid #e4b95b;border-radius:10px;
background:linear-gradient(110deg,#fff1c9,#fff9e9);
color:#754b0b;font-variant-numeric:tabular-nums;
box-shadow:0 7px 16px -15px rgba(117,75,11,.8);
}
:where(html.page-store) .product-sale-timer-icon{
width:14px;height:14px;fill:none;stroke:#d68a0a;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;
}
:where(html.page-store) .product-sale-timer strong{
font-size:clamp(9.5px,.75vw,11px);font-weight:800;line-height:1.2;letter-spacing:-.005em;text-align:center;white-space:nowrap;
}
:where(html.page-store) .product-title-link{
border:none;
background:none;
padding:0;
color:inherit;
font:inherit;
text-align:left;
cursor:pointer;
}
:where(html.page-store) .product-title-link:hover{color:var(--moss);}
:where(html.page-store) .card .desc{
font-size:12.5px;color:var(--ink-soft);margin:0;flex:1;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
:where(html.page-store) .card-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;}
:where(html.page-store) .price{display:flex;flex-direction:row;align-items:baseline;flex-wrap:wrap;column-gap:5px;row-gap:2px;}
:where(html.page-store) .price-current-line{display:inline-flex;align-items:baseline;gap:4px;max-width:100%;white-space:nowrap;}
:where(html.page-store) .price .now{font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.15;white-space:nowrap;}
:where(html.page-store) .price .old{flex:0 0 auto;font-size:12px;color:var(--ink-soft);text-decoration:line-through;white-space:nowrap;}
:where(html.page-store) .price .month{font-size:10.5px;color:var(--ink-soft);white-space:nowrap;}
:where(html.page-store) .low-stock-card{
display:flex;align-items:center;gap:7px;
color:var(--moss);font-size:11.5px;font-weight:700;line-height:1.35;
}
:where(html.page-store) .low-stock-card::before{
content:"";width:7px;height:7px;border-radius:50%;
background:var(--clay);box-shadow:0 0 0 3px rgba(25, 181, 189,.14);
flex:0 0 auto;
}
:where(html.page-store) .card.is-sold .card-media{filter:grayscale(.25) opacity(.85);}
/* =====================================================
EMPTY STATE
===================================================== */
:where(html.page-store) .empty-state{
grid-column:1/-1;text-align:center;padding:72px 20px;color:var(--ink-soft);
}
:where(html.page-store) .empty-state svg{width:48px;height:48px;margin:0 auto 16px;opacity:.45;}
:where(html.page-store) .empty-state h3{font-family:var(--font-display);font-size:21px;color:var(--ink);margin:0 0 7px;}
:where(html.page-store) .empty-state p{font-size:14px;margin:0 0 20px;}
:where(html.page-store) .empty-state button{
background:var(--moss);color:#fff;border:none;
padding:11px 22px;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;
}
/* =====================================================
TRUST STRIP
===================================================== */
:where(html.page-store) .trust{background:var(--moss);color:var(--sage-light);padding:40px 0;}
:where(html.page-store) .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
:where(html.page-store) .trust-item{display:flex;align-items:center;gap:14px;}
:where(html.page-store) .trust-item svg{width:26px;height:26px;flex-shrink:0;stroke:#fff;}
:where(html.page-store) .trust-item b{display:block;font-size:13.5px;color:#fff;font-weight:600;}
:where(html.page-store) .trust-item span{font-size:12px;opacity:.8;}
/* =====================================================
RESPONSIVE
===================================================== */
@media(max-width:1100px){
:where(html.page-store) .product-grid{grid-template-columns:repeat(3,1fr);}
:where(html.page-store) .trust .wrap{grid-template-columns:repeat(2,1fr);row-gap:20px;}
}
@media(max-width:860px){
:where(html.page-store) .wrap{padding:0 20px;}
:where(html.page-store) .nav{padding:10px 14px;gap:10px;}
:where(html.page-store) .logo{font-size:21px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
:where(html.page-store) .nav-actions{gap:4px;}
:where(html.page-store) .icon-btn{width:42px;height:42px;}
:where(html.page-store) .nav-links{display:none;}
:where(html.page-store) .burger{display:flex;background:none;border:none;cursor:pointer;align-items:center;justify-content:center;}
:where(html.page-store) .store-layout{grid-template-columns:1fr;}
:where(html.page-store) .sidebar{display:none;}
:where(html.page-store) .content-area{border-left:none;padding:20px 0 0;}
:where(html.page-store) .content-top{align-items:flex-start;margin-bottom:14px;}
:where(html.page-store) .content-title-block{width:100%;}
:where(html.page-store) .content-meta{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:10px;}
:where(html.page-store) .mobile-category-picker,:where(html.page-store) .top-sort{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;}
:where(html.page-store) .mobile-category-picker{display:flex;}
:where(html.page-store) .mobile-category-trigger{grid-template-columns:minmax(0,1fr) 18px;}
:where(html.page-store) .mobile-category-trigger>svg:first-child{display:none;}
:where(html.page-store) .mobile-control-label,:where(html.page-store) .sort-label{font-size:10.5px;line-height:1.2;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);}
:where(html.page-store) .mobile-category-trigger,:where(html.page-store) .top-sort select{font:500 16px/1.35 var(--font-body);letter-spacing:0;}
:where(html.page-store) .top-sort select{width:100%;min-width:0;min-height:48px;padding:10px 34px 10px 12px;}
:where(html.page-store) .product-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
}
@media(max-width:520px){
:where(html.page-store) .nav{padding:10px 14px;}
:where(html.page-store) .logo{font-size:20px;}
:where(html.page-store) .product-grid{grid-template-columns:1fr 1fr;gap:12px;}
:where(html.page-store) .card-body{padding:12px 12px 14px;gap:6px;}
:where(html.page-store) .card h3{font-size:14.5px;}
:where(html.page-store) .product-badge.sale{font-size:11.5px;padding:6px 10px;letter-spacing:.025em;}
:where(html.page-store) .subscription-corner-ribbon{width:112px;height:88px;}
:where(html.page-store) .subscription-corner-ribbon span{top:14px;right:-50px;width:158px;padding:7px 0;font-size:7.5px;}
:where(html.page-store) .price .now{font-size:14px;}
:where(html.page-store) .is-subscription-card .price .now{font-size:12px;}
:where(html.page-store) .is-subscription-card .price .month{font-size:9px;}
:where(html.page-store) .price-current-line{gap:3px;}
:where(html.page-store) .low-stock-card{font-size:10.5px;gap:6px;}
:where(html.page-store) .low-stock-card::before{width:6px;height:6px;box-shadow:0 0 0 2px rgba(25, 181, 189,.14);}
:where(html.page-store) .card .desc{display:none;}
:where(html.page-store) .quick-add{opacity:1;transform:none;}
:where(html.page-store) .price{flex-direction:row;align-items:baseline;column-gap:5px;row-gap:1px;flex-wrap:wrap;}
:where(html.page-store) .price .old{flex:0 0 auto;white-space:nowrap;}
:where(html.page-store) .top-sort{width:auto;}
:where(html.page-store) .top-sort select{flex:1;min-width:0;}
:where(html.page-store) .quick-add-media{display:none;}
:where(html.page-store) .quick-add-mobile{
position:static;
display:flex;
opacity:1;
transform:none;
margin-top:auto;
padding-top:4px;
width:100%;
}
:where(html.page-store) .quick-add button{padding:10px 8px;font-size:11.5px;line-height:1;white-space:nowrap;}
:where(html.page-store) .quick-add button svg{display:none;}
:where(html.page-store) .quick-add button span.full{display:inline;}
:where(html.page-store) .product-sale-timer{
width:100%;
min-width:0;
padding:7px 6px;
gap:4px;
overflow:hidden;
}
:where(html.page-store) .product-sale-timer-icon{width:13px;height:13px;}
:where(html.page-store) .product-sale-timer strong{
display:block;
min-width:0;
overflow:hidden;
font-size:10px;
letter-spacing:0;
text-overflow:clip;
white-space:nowrap;
}
:where(html.page-store) .trust .wrap{grid-template-columns:1fr;}
}
/* ===== product.html base styles (scoped) ===== */
:where(html.page-product){--purchase-choice-title-size:14px;--purchase-choice-price-size:14px;--purchase-choice-meta-size:11px;--purchase-choice-badge-size:10px;}
:where(html.page-product) *{box-sizing:border-box;}
html:where(.page-product){scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
:where(html.page-product) body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5;}
:where(html.page-product) img{max-width:100%;display:block;}
:where(html.page-product) button{font-family:inherit;}
:where(html.page-product) a{color:inherit;text-decoration:none;}
:where(html.page-product) a:focus-visible,:where(html.page-product) button:focus-visible,:where(html.page-product) input:focus-visible,:where(html.page-product) [tabindex]:focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){:where(html.page-product) *{animation-duration:.001ms!important;transition-duration:.001ms!important;}}
:where(html.page-product) .wrap{max-width:1360px;margin:0 auto;padding:0 32px;}
/* BREADCRUMB */
:where(html.page-product) .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);min-width:0;flex-wrap:wrap;margin:0 0 12px;}
:where(html.page-product) .breadcrumb a{color:var(--ink-soft);transition:color .15s;}
:where(html.page-product) .breadcrumb a:hover{color:var(--moss);}
:where(html.page-product) .breadcrumb svg{width:12px;height:12px;flex-shrink:0;opacity:.5;}
:where(html.page-product) .breadcrumb .current{color:var(--ink-soft);font-weight:500;min-width:0;overflow-wrap:anywhere;}
:where(html.page-product) .breadcrumb-mobile{display:none;}
/* PRODUCT PAGE LAYOUT */
:where(html.page-product) .product-page{padding:28px 0 80px;}
:where(html.page-product) .product-loading{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:36px;
margin-top:28px;
}
:where(html.page-product) .product-loading-media,:where(html.page-product) .product-loading-line{position:relative;overflow:hidden;background:#f4f0ed;}
:where(html.page-product) .product-loading-media{aspect-ratio:1;border-radius:var(--radius-l);border:1px solid var(--line);}
:where(html.page-product) .product-loading-copy{padding-top:12px;}
:where(html.page-product) .product-loading-line{height:18px;margin-bottom:16px;border-radius:999px;}
:where(html.page-product) .product-loading-line.is-breadcrumb{width:42%;height:12px;margin-bottom:24px;}
:where(html.page-product) .product-loading-line.is-title{width:78%;height:34px;}
:where(html.page-product) .product-loading-line.is-price{width:34%;height:26px;margin:22px 0 30px;}
:where(html.page-product) .product-loading-line.is-detail{width:92%;}
:where(html.page-product) .product-loading-line.is-detail-short{width:67%;}
:where(html.page-product) .product-loading-media::after,:where(html.page-product) .product-loading-line::after{
content:"";position:absolute;inset:0;
background:linear-gradient(100deg,transparent 15%,rgba(255,255,255,.72) 45%,transparent 75%);
transform:translateX(-100%);animation:productLoadingShimmer 1.35s ease-in-out infinite;
}
@keyframes productLoadingShimmer{to{transform:translateX(100%);}}
@media(prefers-reduced-motion:reduce){
:where(html.page-product) .product-loading-media::after,:where(html.page-product) .product-loading-line::after{animation:none!important;transform:none;opacity:.35;}
}
:where(html.page-product) .product-layout{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:36px;
align-items:start;
margin-top:28px;
}
/* IMAGE GALLERY */
:where(html.page-product) .gallery{position:sticky;top:90px;width:100%;max-width:none;min-width:0;}
:where(html.page-product) .gallery-main{
background:#fff;
border-radius:var(--radius-l);
aspect-ratio:1/1;
max-width:none;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
position:relative;
border:1px solid var(--line);
box-shadow:var(--shadow-card);
}
:where(html.page-product) .gallery-main img{
width:100%;height:100%;
object-fit:contain;
border:0;
border-radius:0;
background:#fff;
transition:transform .4s var(--ease);
}
:where(html.page-product) .gallery-main:hover img{transform:scale(1.025);}
:where(html.page-product) .gallery-main img,:where(html.page-product) .rich-product-desc img,:where(html.page-product) .story-image img{cursor:zoom-in;}
:where(html.page-product) .gallery-empty{
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
color:var(--ink-soft);font-size:14px;font-weight:800;
}
:where(html.page-product) .gallery-thumbs{
display:flex;
width:100%;
max-width:100%;
min-width:0;
gap:10px;
margin-top:12px;
padding:2px 2px 7px;
overflow-x:auto;
overflow-y:hidden;
overscroll-behavior-inline:contain;
scroll-snap-type:x proximity;
scrollbar-width:thin;
scrollbar-color:rgba(7, 138, 147,.28) transparent;
-webkit-overflow-scrolling:touch;
}
:where(html.page-product) .gallery-thumbs::-webkit-scrollbar{height:5px;}
:where(html.page-product) .gallery-thumbs::-webkit-scrollbar-track{background:transparent;}
:where(html.page-product) .gallery-thumbs::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(7, 138, 147,.28);}
:where(html.page-product) .thumb-btn{
width:62px;height:62px;border-radius:12px;
background:var(--cream);border:0;
cursor:pointer;overflow:hidden;padding:0;
transition:transform .18s var(--ease),box-shadow .18s var(--ease),opacity .18s var(--ease);
flex:0 0 62px;opacity:.72;scroll-snap-align:start;
}
:where(html.page-product) .thumb-btn img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;}
:where(html.page-product) .thumb-btn.is-active{opacity:1;box-shadow:0 0 0 2px rgba(7, 138, 147,.22);}
:where(html.page-product) .thumb-btn:hover{opacity:1;transform:translateY(-1px);}
/* PRODUCT INFO */
:where(html.page-product) .product-info{}
:where(html.page-product) .product-info h1{
font-family:var(--font-display);
font-size:clamp(22px,2.45vw,31px);
font-weight:450;
line-height:1.16;
margin:0 0 14px;
}
:where(html.page-product) .product-info h1 em{font-style:italic;color:var(--moss);}
:where(html.page-product) .price-block{
display:flex;align-items:center;gap:12px 16px;
margin-bottom:18px;flex-wrap:wrap;
}
:where(html.page-product) .product-info .price-block .price-now{
font-family:var(--font-display);
font-size:24px!important;font-weight:600;color:var(--moss);line-height:1.15;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
:where(html.page-product) .product-info .price-block .price-old{
font-size:17px!important;color:var(--ink-soft);
text-decoration:line-through;text-decoration-thickness:1.5px;line-height:1.25;
white-space:nowrap;
}
:where(html.page-product) .price-per-month{font-size:12.5px;color:var(--ink-soft);align-self:center;}
:where(html.page-product) .product-info .price-block .discount-pill{
background:var(--moss);color:#fff;
font-size:12px!important;font-weight:650;letter-spacing:0!important;
padding:7px 12px;border-radius:999px;line-height:1.1;
align-self:center;
white-space:nowrap;
}
:where(html.page-product) .low-stock-notice{
display:inline-flex;align-items:center;gap:9px;
margin:-4px 0 18px;padding:9px 12px;
border:1px solid rgba(7, 138, 147,.14);border-radius:10px;
background:rgba(241,223,228,.48);color:var(--moss-dark);
font-size:13px;font-weight:700;line-height:1.4;
}
:where(html.page-product) .low-stock-notice::before{
content:"";width:8px;height:8px;border-radius:50%;
background:var(--clay);box-shadow:0 0 0 4px rgba(25, 181, 189,.14);
flex:0 0 auto;
}
:where(html.page-product) .product-highlights{
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:17px 0;
margin:0 0 22px;
}
:where(html.page-product) .product-benefits{margin:0;padding:0;border:0;}
:where(html.page-product) .product-benefits ul{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
}
:where(html.page-product) .product-benefits li{
display:grid;
grid-template-columns:22px minmax(0,1fr);
gap:9px;
align-items:start;
color:var(--ink-soft);
font-size:14.5px;
line-height:1.45;
}
:where(html.page-product) .product-benefits svg{
width:18px;
height:18px;
stroke:var(--moss);
margin-top:1px;
}
:where(html.page-product) .product-certificates{margin:0 0 18px;}
:where(html.page-product) .product-certificates:last-child{margin-bottom:0;}
:where(html.page-product) .product-certificates-title,:where(html.page-product) .product-description-title{
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--ink-soft);
margin:0 0 10px;
}
:where(html.page-product) .product-certificates-grid{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:center;
}
:where(html.page-product) .product-certificate{
display:flex;
align-items:center;
justify-content:center;
width:auto;
min-height:0;
border:0;
border-radius:0;
background:transparent;
padding:0;
}
:where(html.page-product) .product-certificate img{width:auto;height:46px;max-width:110px;object-fit:contain;}
:where(html.page-product) .certificate-showcase{width:100%;}
:where(html.page-product) .certificate-showcase-grid{display:grid;grid-template-columns:1fr;gap:8px;}
:where(html.page-product) .certificate-showcase-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;width:100%;min-height:0;padding:9px 14px;border:1px solid var(--line);border-radius:14px;background:var(--white);box-shadow:0 5px 18px rgba(30,29,26,.04);}
:where(html.page-product) .certificate-showcase-logo{height:72px;display:flex;align-items:center;justify-content:center;padding:3px 9px 3px 0;border-right:1px solid var(--line);background:#fff;}
:where(html.page-product) .certificate-showcase-logo img{width:100%;height:100%;object-fit:contain;}
:where(html.page-product) .certificate-showcase-copy{min-width:0;}
:where(html.page-product) .product-section-content .certificate-showcase-copy h3{margin:0 0 4px;font-family:var(--font-body);font-size:13.5px;font-weight:750;color:var(--ink);line-height:1.35;}
:where(html.page-product) .certificate-showcase-separator{color:var(--ink-soft);}
:where(html.page-product) .certificate-showcase-summary{color:var(--moss-dark);}
:where(html.page-product) .certificate-showcase-description{max-width:none;margin:0!important;font-size:12.5px!important;line-height:1.5!important;color:var(--ink-soft)!important;}
:where(html.page-product) .short-desc{
padding:0;
margin:0 0 22px;
}
:where(html.page-product) .rich-product-desc,:where(html.page-product) .story-accordion .story-content{
color:var(--ink-soft);
font-size:14.5px;
line-height:1.65;
font-family:var(--font-body);
}
:where(html.page-product) .rich-product-desc p{margin:0 0 10px;}
:where(html.page-product) .rich-product-desc p:last-child{margin-bottom:0;}
:where(html.page-product) .rich-product-desc h3,:where(html.page-product) .rich-product-desc h4{font-family:var(--font-display);color:var(--moss-dark);line-height:1.3;margin:18px 0 8px;}
:where(html.page-product) .rich-product-desc h3:first-child,:where(html.page-product) .rich-product-desc h4:first-child{margin-top:0;}
:where(html.page-product) .rich-product-desc h3{font-size:20px;font-weight:600;}
:where(html.page-product) .rich-product-desc h4{font-size:17px;font-weight:600;}
:where(html.page-product) .rich-product-desc ul,:where(html.page-product) .rich-product-desc ol{margin:0 0 14px;padding-left:14px;}
:where(html.page-product) .rich-product-desc li{margin-bottom:5px;}
:where(html.page-product) .rich-product-desc strong{color:var(--ink);font-weight:700;}
:where(html.page-product) :where(.rich-product-desc,.product-section-content,.section-rich,.story-content) a{
color:var(--content-link);
font-weight:600;
text-decoration-line:underline;
text-decoration-thickness:1.5px;
text-underline-offset:3px;
overflow-wrap:anywhere;
transition:color .18s var(--ease),text-decoration-thickness .18s var(--ease);
}
:where(html.page-product) :where(.rich-product-desc,.product-section-content,.section-rich,.story-content) a:visited{color:var(--content-link);}
:where(html.page-product) :where(.rich-product-desc,.product-section-content,.section-rich,.story-content) a:hover{
color:var(--content-link-hover);
text-decoration-thickness:2px;
}
:where(html.page-product) .rich-product-desc img{max-width:100%;border-radius:var(--radius-s);margin:12px 0;display:block;}
:where(html.page-product) .rich-product-desc .desc-video-embed{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;margin:14px 0;border-radius:var(--radius-s);overflow:hidden;background:var(--moss-dark);}
:where(html.page-product) .rich-product-desc .desc-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
:where(html.page-product) .product-story{margin:0 0 28px;display:flex;flex-direction:column;gap:16px;}
:where(html.page-product) .product-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-m);overflow:hidden;background:var(--moss-dark);box-shadow:var(--shadow-card);}
:where(html.page-product) .product-video iframe,:where(html.page-product) .product-video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;}
:where(html.page-product) .story-image{width:100%;border-radius:var(--radius-m);overflow:hidden;background:var(--cream);box-shadow:var(--shadow-card);}
:where(html.page-product) .story-image img{width:100%;height:auto;display:block;}
:where(html.page-product) .story-accordion{display:flex;flex-direction:column;gap:8px;}
:where(html.page-product) .story-accordion details{border:1.5px solid var(--line);border-radius:var(--radius-m);background:var(--white);overflow:hidden;}
:where(html.page-product) .story-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-weight:700;color:var(--moss-dark);cursor:pointer;list-style:none;}
:where(html.page-product) .story-accordion summary::-webkit-details-marker{display:none;}
:where(html.page-product) .story-accordion summary::after{content:"+";font-size:18px;color:var(--clay-dark);}
:where(html.page-product) .story-accordion details[open] summary::after{content:"−";}
:where(html.page-product) .story-accordion .story-content{padding:0 16px 16px;}
:where(html.page-product) .story-accordion .story-content p{margin:0 0 10px;}
:where(html.page-product) .story-accordion .story-content p:last-child{margin-bottom:0;}
:where(html.page-product) .story-accordion .story-content ul{margin:0;padding-left:14px;}
:where(html.page-product) .story-accordion .story-content li{margin-bottom:6px;}
:where(html.page-product) .story-accordion .story-content strong{color:var(--ink);font-weight:700;}
:where(html.page-product) .story-accordion .story-content .product-video,:where(html.page-product) .story-accordion .story-content .story-image{margin:10px 0 12px;}
:where(html.page-product) .product-content-wrap{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:42px;align-items:start;margin-top:54px;border-top:1px solid var(--line);}
:where(html.page-product) .product-content-main{min-width:0;}
:where(html.page-product) .product-sections{margin:0;border:0;}
:where(html.page-product) .product-section{padding:44px 0;border-bottom:1px solid var(--line);scroll-margin-top:92px;}
:where(html.page-product) .product-section:last-child{border-bottom:0;}
:where(html.page-product) .product-section.is-accordion:has(+ .product-section.is-accordion){border-bottom:0;padding-bottom:5px;}
:where(html.page-product) .product-section.is-accordion + .product-section.is-accordion{padding-top:5px;}
:where(html.page-product) .product-section.bg-soft,:where(html.page-product) .product-section.bg-cream,:where(html.page-product) .product-section.bg-sage{padding:30px 28px;border-radius:var(--radius-m);border:1px solid var(--line);margin:24px 0;}
:where(html.page-product) .product-section.bg-soft{background:rgba(7, 138, 147,.045)}:where(html.page-product) .product-section.bg-cream{background:var(--cream)}:where(html.page-product) .product-section.bg-sage{background:var(--sage-light)}
:where(html.page-product) .product-section-head{margin-bottom:13px;max-width:820px}:where(html.page-product) .product-section-head h2{font-family:var(--font-display);font-size:17px;font-weight:600;line-height:1.38;letter-spacing:-.008em;text-wrap:balance;margin:0;color:var(--moss-dark)}:where(html.page-product) .product-section-head p{margin:6px 0 0;color:#514047;font-size:14px;line-height:1.6}
:where(html.page-product) .product-section-content{color:#514047;font-size:15px;line-height:1.65}:where(html.page-product) .product-section-content p{margin:0 0 12px;max-width:78ch}:where(html.page-product) .product-section-content p:has(>br:only-child){min-height:1.65em;margin-bottom:0}:where(html.page-product) .product-section-content h3,:where(html.page-product) .product-section-content h4{color:var(--moss-dark);margin:20px 0 8px}:where(html.page-product) .product-section-content ul,:where(html.page-product) .product-section-content ol{padding-left:21px}:where(html.page-product) .product-section-content li{margin-bottom:7px}
:where(html.page-product) .product-section-rail{position:sticky;top:92px;align-self:start;padding-top:38px;}
:where(html.page-product) .product-section-rail-title{margin:0 0 14px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);}
:where(html.page-product) .product-section-rail-list{list-style:none;margin:0;padding:0;border-left:1.5px solid var(--line);}
:where(html.page-product) .product-section-rail-list li{position:relative;margin:0;padding:0 0 18px 18px;}
:where(html.page-product) .product-section-rail-list li::before{content:'';position:absolute;left:-4.5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s;}
:where(html.page-product) .product-section-rail-list a{display:block;color:#514047;font-size:12.5px;line-height:1.4;text-decoration:none;transition:color .2s;}
:where(html.page-product) .product-section-rail-list a:hover,:where(html.page-product) .product-section-rail-list li.is-current a{color:var(--moss-dark);}
:where(html.page-product) .product-section-rail-list li.is-current::before{background:var(--moss);transform:scale(1.08);}
:where(html.page-product) .section-layout{display:grid;gap:clamp(28px,5vw,64px);align-items:start}:where(html.page-product) .section-layout.text_only{grid-template-columns:1fr;width:100%}:where(html.page-product) .section-layout.text_only .section-rich{width:100%}:where(html.page-product) .section-layout.text_only .section-rich>p,:where(html.page-product) .section-layout.text_only .section-rich>.section-block-flow>p{max-width:1000px}:where(html.page-product) .section-layout.text_image_right,:where(html.page-product) .section-layout.text_video{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr)}:where(html.page-product) .section-layout.text_image_left,:where(html.page-product) .section-layout.video_text{grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr)}:where(html.page-product) .section-layout.media_full_width{grid-template-columns:1fr}:where(html.page-product) .section-layout.cards .section-rich ul,:where(html.page-product) .section-layout.icon_list .section-rich ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;padding:0}:where(html.page-product) .section-layout.cards .section-rich li,:where(html.page-product) .section-layout.icon_list .section-rich li{padding:17px 18px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--white)}
:where(html.page-product) .section-media img{width:100%;height:auto;border-radius:var(--radius-m);box-shadow:var(--shadow-card)}:where(html.page-product) .section-media .product-video{margin:0;max-width:none}:where(html.page-product) .section-block-flow{display:flex;flex-direction:column;gap:24px}:where(html.page-product) .section-rich .section-block-flow{gap:0}:where(html.page-product) .section-rich>p,:where(html.page-product) .section-rich .section-block-flow>p{margin:0 0 14px}:where(html.page-product) .section-rich>ul,:where(html.page-product) .section-rich>ol,:where(html.page-product) .section-rich .section-block-flow>ul,:where(html.page-product) .section-rich .section-block-flow>ol{margin:0 0 14px;padding-left:22px}:where(html.page-product) .section-rich>p:last-child,:where(html.page-product) .section-rich>ul:last-child,:where(html.page-product) .section-rich>ol:last-child,:where(html.page-product) .section-rich .section-block-flow>p:last-child,:where(html.page-product) .section-rich .section-block-flow>ul:last-child,:where(html.page-product) .section-rich .section-block-flow>ol:last-child{margin-bottom:0}:where(html.page-product) .section-rich li,:where(html.page-product) .section-rich .section-block-flow li{margin:0 0 6px}:where(html.page-product) .section-rich li:last-child,:where(html.page-product) .section-rich .section-block-flow li:last-child{margin-bottom:0}:where(html.page-product) .section-block-flow .story-image,:where(html.page-product) .section-block-flow .product-video{margin:0;max-width:900px}
:where(html.page-product) .section-rich .section-block-flow>p:has(>b:only-child),:where(html.page-product) .section-rich .section-block-flow>p:has(>strong:only-child){margin:20px 0 8px;max-width:none}:where(html.page-product) .section-rich .section-block-flow>p:first-child:has(>b:only-child),:where(html.page-product) .section-rich .section-block-flow>p:first-child:has(>strong:only-child){margin-top:0}
/* Rich text must use normal document flow. A flex column blockifies inline
elements such as / and incorrectly pushes following text down. */
:where(html.page-product) .section-rich .section-block-flow{display:block}
:where(html.page-product) .section-icon-grid{display:grid;grid-template-columns:repeat(var(--icon-grid-cols,3),minmax(0,1fr));gap:10px}:where(html.page-product) .section-icon-card{display:flex;align-items:center;min-height:54px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--white);box-shadow:none;color:var(--ink)}:where(html.page-product) .section-icon-card::before{content:none}:where(html.page-product) .section-icon-card p{max-width:none;margin:0;font-size:14px;line-height:1.45;color:var(--ink)}:where(html.page-product) .section-icon-card p:last-child{margin-bottom:0}
:where(html.page-product) .section-steps,:where(html.page-product) .section-block-flow.has-steps{counter-reset:product-step}:where(html.page-product) .section-steps{display:grid;gap:13px;max-width:820px}:where(html.page-product) .section-step{counter-increment:product-step;display:grid;grid-template-columns:34px minmax(0,1fr);gap:13px;align-items:start;padding:0;border:0;background:transparent}:where(html.page-product) .section-step::before{content:counter(product-step);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sage-light);color:var(--moss-dark);font-size:12px;font-weight:800}:where(html.page-product) .section-step p:last-child{margin-bottom:0}:where(html.page-product) .section-block-flow.has-steps>.section-step{margin:0 0 13px;max-width:820px}:where(html.page-product) .section-block-flow.has-steps>.section-step+*:not(.section-step){margin-top:8px}
:where(html.page-product) .section-video-pair,:where(html.page-product) .section-steps-pair{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:clamp(28px,5vw,64px);align-items:start}:where(html.page-product) .section-video-gallery,:where(html.page-product) .section-steps-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}:where(html.page-product) .section-video-copy{max-width:760px}:where(html.page-product) .section-steps-pair .section-steps{max-width:none}:where(html.page-product) .section-steps-media .product-video{margin:0;max-width:none}:where(html.page-product) .section-extra-content{margin-top:28px}
:where(html.page-product) .section-gallery{width:min(1120px,100%);max-width:100%;min-width:0;margin-inline:auto}
:where(html.page-product) .section-block-flow>.section-gallery{margin-block:24px}
:where(html.page-product) .section-gallery-viewport{position:relative;width:100%;max-width:100%;min-width:0;overflow:hidden}
:where(html.page-product) .section-gallery-track{display:flex;width:100%;max-width:100%;min-width:0;gap:18px;align-items:stretch;transition:transform .38s var(--ease);will-change:transform}
:where(html.page-product) .section-gallery-slide{position:relative;flex:0 0 calc((100% - 18px)/2);max-width:100%;min-width:0;aspect-ratio:4/5;overflow:hidden;background:#fff;box-shadow:none;border:1px solid var(--line);border-radius:var(--radius-m)}
:where(html.page-product) .section-gallery-slide img{width:100%;height:100%;object-fit:contain;cursor:zoom-in;background:#fff}
:where(html.page-product) .section-gallery.is-single .section-gallery-slide{flex-basis:100%}
:where(html.page-product) .section-gallery.is-landscape .section-gallery-slide{flex:0 0 100%;width:auto;max-width:100%;min-width:0;aspect-ratio:16/9}
:where(html.page-product) .section-gallery-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:52px;height:84px;padding:0;border:0;background:rgba(30,29,26,.76);color:#fff;cursor:pointer;transition:background .2s var(--ease)}
:where(html.page-product) .section-gallery-arrow:hover,:where(html.page-product) .section-gallery-arrow:focus-visible{background:rgba(7, 94, 102,.9);outline:none}
:where(html.page-product) .section-gallery-arrow.prev{left:0}:where(html.page-product) .section-gallery-arrow.next{right:0}
:where(html.page-product) .section-gallery-arrow svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(html.page-product) .section-gallery-dots{display:flex;justify-content:center;gap:7px;min-height:8px;margin-top:12px}
:where(html.page-product) .section-gallery-dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s var(--ease),transform .2s var(--ease)}
:where(html.page-product) .section-gallery-dot.is-active{background:var(--moss);transform:scale(1.15)}
:where(html.page-product) .product-section-accordion{padding:0;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--white);overflow:hidden}:where(html.page-product) .product-section-accordion summary{min-height:56px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:700;color:var(--moss-dark);list-style:none}:where(html.page-product) .product-section-accordion summary::-webkit-details-marker{display:none}:where(html.page-product) .product-section-accordion summary::after{content:'+';font-size:22px}:where(html.page-product) .product-section-accordion[open] summary::after{content:'−'}:where(html.page-product) .product-section-accordion .product-section-content{padding:0 18px 20px}
:where(html.page-product) .section-table-wrap{overflow-x:auto;max-width:100%}:where(html.page-product) .product-section table{width:100%;min-width:540px;border-collapse:collapse}:where(html.page-product) .product-section th,:where(html.page-product) .product-section td{padding:10px 12px;border:1px solid var(--line);text-align:left}
:where(html.page-product) .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
:where(html.page-product) .subscription-comparison-section{padding:46px 0 40px;}
:where(html.page-product) .subscription-comparison-block{width:100%;margin:18px 0;}
:where(html.page-product) .section-block-flow>.subscription-comparison-block:first-child{margin-top:0;}
:where(html.page-product) .section-block-flow>.subscription-comparison-block:last-child{margin-bottom:0;}
:where(html.page-product) .subscription-comparison-head{max-width:760px;margin-bottom:24px;}
:where(html.page-product) .subscription-comparison-kicker{display:inline-flex;align-items:center;min-height:28px;padding:5px 11px;margin-bottom:10px;border-radius:999px;background:var(--sage-light);color:var(--moss-dark);font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;}
:where(html.page-product) .subscription-comparison-table-wrap{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--white);box-shadow:0 18px 55px rgba(30,29,26,.08);}
:where(html.page-product) .product-section .subscription-comparison-table{width:100%;min-width:0;border-collapse:separate;border-spacing:0;table-layout:fixed;}
:where(html.page-product) .product-section .subscription-comparison-table th,:where(html.page-product) .product-section .subscription-comparison-table td{border:0;border-bottom:1px solid var(--line);padding:14px 16px;text-align:center;vertical-align:middle;overflow-wrap:anywhere;}
:where(html.page-product) .product-section .subscription-comparison-table tr:last-child th,:where(html.page-product) .product-section .subscription-comparison-table tr:last-child td{border-bottom:0;}
:where(html.page-product) .product-section .subscription-comparison-table thead th{background:var(--cream);color:var(--ink);font-size:13px;font-weight:800;}
:where(html.page-product) .product-section .subscription-comparison-table thead th:first-child{width:27%;text-align:left;}
:where(html.page-product) .product-section .subscription-comparison-table thead .is-featured{position:relative;background:var(--moss);color:#fff;}
:where(html.page-product) .subscription-comparison-table thead .is-featured span{display:block;font-size:15px;}
:where(html.page-product) .subscription-comparison-table thead .is-featured small{display:inline-flex;margin-top:5px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.16);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
:where(html.page-product) .product-section .subscription-comparison-table tbody th{text-align:left;color:var(--ink);font-size:13px;font-weight:800;background:#fff;}
:where(html.page-product) .product-section .subscription-comparison-table tbody td{color:#5d5558;font-size:13.5px;line-height:1.4;}
:where(html.page-product) .product-section .subscription-comparison-table tbody td.is-featured{background:rgba(220,227,211,.28);color:var(--moss-dark);}
:where(html.page-product) .subscription-comparison-table td strong{display:block;color:var(--ink);font-family:var(--font-display);font-size:18px;line-height:1.2;}
:where(html.page-product) .subscription-comparison-table td.is-featured strong{color:var(--moss-dark);font-size:20px;}
:where(html.page-product) .subscription-comparison-table td small{display:block;margin-top:3px;font-size:10.5px;color:var(--ink-soft);}
:where(html.page-product) .subscription-price-line{display:inline-flex;align-items:baseline;justify-content:center;gap:6px;white-space:nowrap;}
:where(html.page-product) .subscription-comparison-table .subscription-price-line small{margin:0;font-size:11px;font-weight:600;}
:where(html.page-product) .subscription-comparison-table td>span:not(.comparison-icon){display:inline;}
:where(html.page-product) .comparison-icon{display:inline-grid;place-items:center;width:22px;height:22px;margin:0 7px 0 0;border-radius:50%;vertical-align:middle;}
:where(html.page-product) .comparison-icon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;}
:where(html.page-product) .comparison-icon.is-positive{background:var(--sage-light);color:var(--moss-dark);}
:where(html.page-product) .comparison-icon.is-neutral{background:var(--cream-deep);color:#8d8588;}
:where(html.page-product) .subscription-cancel-note{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:16px;padding:14px 18px;border:1px solid rgba(7,138,147,.13);border-radius:12px;background:rgba(7,138,147,.04);color:var(--moss-dark);font-size:13.5px;text-align:center;}
:where(html.page-product) .product-section .subscription-result-note{margin:8px auto 0;color:var(--ink-soft);font-size:11.5px;font-weight:500;line-height:1.45;text-align:center;}
:where(html.page-product) .subscription-gifts-block{margin-top:18px;}
:where(html.page-product) .subscription-gifts-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;}
:where(html.page-product) .subscription-gifts-heading span{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--moss-dark);line-height:1.35;}
:where(html.page-product) .subscription-gifts-heading small{color:var(--crystal);font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
:where(html.page-product) .subscription-gifts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:10px;}
:where(html.page-product) .subscription-gift-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 5px 18px rgba(30,29,26,.04);}
:where(html.page-product) .subscription-gift-badge{position:absolute;z-index:1;top:9px;left:9px;display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--moss);color:#fff;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;}
:where(html.page-product) .subscription-gift-images{display:grid;grid-template-columns:repeat(var(--gift-cols,1),minmax(0,1fr));align-items:center;gap:6px;height:190px;padding:0;background:#fff;border-bottom:1px solid var(--line);}
:where(html.page-product) .subscription-gift-images[data-count="2"]{--gift-cols:2;}
:where(html.page-product) .subscription-gift-images[data-count="3"]{--gift-cols:3;}
:where(html.page-product) .subscription-gift-images[data-count="4"]{--gift-cols:4;}
:where(html.page-product) .subscription-gift-image{min-width:0;min-height:0;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;}
:where(html.page-product) .subscription-gift-image img{width:100%;height:100%;object-fit:contain;object-position:center;}
:where(html.page-product) .subscription-gift-copy{display:flex;flex:1;flex-direction:column;padding:8px 10px 10px;background:#fff;}
:where(html.page-product) .subscription-gift-names{display:grid;gap:1px;}
:where(html.page-product) .product-section .subscription-gift-copy h3{position:relative;margin:0;padding:4px 0 4px 11px;color:var(--ink);font-family:var(--font-body);font-size:11px;font-weight:600;line-height:1.35;}
:where(html.page-product) .product-section .subscription-gift-copy h3::before{content:"";position:absolute;left:0;top:10px;width:3.5px;height:3.5px;border-radius:50%;background:var(--moss);}
:where(html.page-product) .product-section .subscription-gift-copy p{margin:0;color:var(--ink-soft);font-size:11px;}
:where(html.page-product) .subscription-gift-price{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:auto!important;padding-top:7px;border-top:1px solid rgba(7,138,147,.12);font-variant-numeric:tabular-nums;}
:where(html.page-product) .subscription-gift-price del{color:var(--ink-soft);text-decoration-color:currentColor;}
:where(html.page-product) .product-section .subscription-gift-copy p strong{color:var(--moss-dark);font-size:13px;}
/* IMAGE LIGHTBOX */
:where(html.page-product) .image-lightbox{
position:fixed;
inset:0;
z-index:300;
display:none;
align-items:center;
justify-content:center;
padding:72px 28px 34px;
background:rgba(30,29,26,.54);
backdrop-filter:blur(14px) saturate(120%);
}
:where(html.page-product) .image-lightbox.is-open{display:flex;}
:where(html.page-product) .image-lightbox-inner{
max-width:min(1120px,100%);
max-height:100%;
display:flex;
align-items:center;
justify-content:center;
}
:where(html.page-product) .image-lightbox img{
max-width:100%;
max-height:calc(100vh - 120px);
object-fit:contain;
border-radius:14px;
background:#fff;
box-shadow:0 24px 80px rgba(30,29,26,.34);
}
:where(html.page-product) .image-lightbox-close{
position:fixed;
top:22px;
right:22px;
width:44px;
height:44px;
border-radius:999px;
border:1px solid rgba(255,255,255,.34);
background:rgba(255,255,255,.94);
color:var(--ink);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 12px 30px rgba(30,29,26,.18);
transition:transform .18s var(--ease),background .18s var(--ease);
}
:where(html.page-product) .image-lightbox-close:hover{transform:scale(1.04);background:#fff;}
:where(html.page-product) .image-lightbox-close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;}
/* CTA BUTTONS */
:where(html.page-product) .cta-area{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
:where(html.page-product) .product-choice{min-width:0;margin:4px 0 2px;padding:0;border:0}:where(html.page-product) .product-choice legend{width:100%;margin:0 0 10px;padding:0;color:var(--ink,#231f20);font-size:14px;font-weight:800;line-height:1.35}:where(html.page-product) .product-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}:where(html.page-product) .product-choice-option{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr) 20px;align-items:center;gap:10px;min-height:54px;padding:10px 12px;border:1.5px solid #e6e8e6;border-radius:12px;background:#fff;color:#292525;text-align:left;font:700 13px/1.3 inherit;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}:where(html.page-product) .product-choice-option:hover{border-color:#67b6b9;background:#fbffff}:where(html.page-product) .product-choice-option.is-selected{border-color:#078a93;background:#f5ffff;box-shadow:0 0 0 2px rgba(7,138,147,.1)}:where(html.page-product) .product-choice-swatch{width:22px;height:22px;border:4px solid #fff;border-radius:50%;background:var(--choice-color);box-shadow:0 0 0 1.5px var(--choice-color)}:where(html.page-product) .product-choice-option svg{width:20px;height:20px;border-radius:50%;background:#078a93;fill:none;stroke:#fff;stroke-width:2.2;opacity:0;transition:opacity .18s ease}:where(html.page-product) .product-choice-option.is-selected svg{opacity:1}@media(max-width:640px){:where(html.page-product) .product-choice-grid{grid-template-columns:1fr}:where(html.page-product) .product-choice-option{min-height:50px}}
:where(html.page-product) .quantity-variations{display:grid;gap:10px;margin:2px 0 4px;}
:where(html.page-product) .quantity-variations[hidden]{display:none;}
:where(html.page-product) .product-choice-mix{margin:2px 0 6px;border:1px solid #cbe8e9;border-radius:14px;background:#f7ffff;overflow:hidden}:where(html.page-product) .product-choice-mix[hidden],:where(html.page-product) .product-choice-mix-panel[hidden]{display:none}:where(html.page-product) .product-choice-mix-summary{display:grid;gap:5px;padding:12px 14px}:where(html.page-product) .product-choice-mix-summary>span{font-size:13px;font-weight:800;color:var(--ink)}:where(html.page-product) .product-choice-mix-summary button{display:flex;align-items:center;gap:5px;width:max-content;max-width:100%;padding:0;border:0;background:none;color:#078a93;font:800 13px/1.35 inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}:where(html.page-product) .product-choice-mix-summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .18s ease}:where(html.page-product) .product-choice-mix-summary button[aria-expanded=true] svg{transform:rotate(180deg)}:where(html.page-product) .product-choice-mix-panel{padding:14px;border-top:1px solid #dceeee;background:#fff}:where(html.page-product) .product-choice-mix-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:7px;text-transform:uppercase;letter-spacing:.045em}:where(html.page-product) .product-choice-mix-head strong{font-size:12px}:where(html.page-product) .product-choice-mix-head span{padding:4px 8px;border-radius:999px;background:#fff1e7;color:#9c542d;font-size:11px;font-weight:800}:where(html.page-product) .product-choice-mix-head span.is-complete{background:#e9f8ef;color:#247b4e}:where(html.page-product) .product-choice-mix-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid #edf1f0}:where(html.page-product) .product-choice-mix-row:last-child{border-bottom:0}:where(html.page-product) .product-choice-mix-row strong{font-size:13px}:where(html.page-product) .product-choice-mix-row .product-choice-swatch{width:17px;height:17px;border-width:3px}:where(html.page-product) .product-choice-mix-stepper{display:grid;grid-template-columns:34px 26px 34px;align-items:center;text-align:center}:where(html.page-product) .product-choice-mix-stepper button{width:32px;height:32px;border:1px solid #b9dfe1;border-radius:9px;background:#f8ffff;color:#078a93;font-size:18px;font-weight:800;cursor:pointer}:where(html.page-product) .product-choice-mix-stepper button:disabled{opacity:.35;cursor:not-allowed}:where(html.page-product) .product-choice-mix-stepper span{font-size:14px;font-weight:850}:where(html.page-product) .product-choice-mix-error{margin:8px 0 0;color:#a24b36;font-size:12px;font-weight:700}
:where(html.page-product) .quantity-variations-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--ink);}
:where(html.page-product) .quantity-variations-head strong{font-size:14px;font-weight:800;}
:where(html.page-product) .quantity-variations-head span{font-size:12px;color:var(--ink-soft);}
:where(html.page-product) .quantity-variations-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
:where(html.page-product) .quantity-variation-option{min-width:0;border:1.5px solid var(--line);border-radius:var(--radius-m);background:var(--white);padding:12px;display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;text-align:left;color:var(--ink);cursor:pointer;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);}
:where(html.page-product) .quantity-variation-option:hover{border-color:var(--sage);}
:where(html.page-product) .quantity-variation-option.is-selected{border-color:var(--moss);background:rgba(220,227,211,.25);box-shadow:0 0 0 1px var(--moss);}
:where(html.page-product) .quantity-variation-option.is-unavailable{opacity:.58;cursor:not-allowed;background:var(--cream);}
:where(html.page-product) .quantity-variation-radio{width:17px;height:17px;border:2px solid var(--sage);border-radius:50%;display:grid;place-items:center;margin-top:1px;}
:where(html.page-product) .quantity-variation-option.is-selected .quantity-variation-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--moss);}
:where(html.page-product) .quantity-variation-copy,:where(html.page-product) .quantity-variation-price{display:grid;gap:2px;min-width:0;}
:where(html.page-product) .quantity-variation-copy strong{font-size:var(--purchase-choice-title-size);line-height:1.3;}
:where(html.page-product) .quantity-variation-price strong{font-size:var(--purchase-choice-price-size);line-height:1.3;font-weight:800;font-variant-numeric:tabular-nums;}
:where(html.page-product) .quantity-variation-copy small{font-size:var(--purchase-choice-meta-size);color:var(--ink-soft);}
:where(html.page-product) .quantity-variation-price{grid-column:2;margin-top:7px;padding-top:7px;border-top:1px solid var(--line);}
:where(html.page-product) .quantity-variation-price small{font-size:10px;font-weight:800;color:var(--moss);}
/* Product flavours and package choices */
:where(html.page-product) .product-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
:where(html.page-product) .product-choice-option{grid-template-columns:30px minmax(0,1fr) 20px;min-height:64px;padding:8px 12px;border:2px solid transparent;border-radius:15px;background:color-mix(in srgb,var(--choice-color) 8%,#fff);font-size:13px;font-weight:800;text-align:center}
:where(html.page-product) .product-choice-option:hover{border-color:color-mix(in srgb,var(--choice-color) 55%,#fff);background:color-mix(in srgb,var(--choice-color) 11%,#fff)}
:where(html.page-product) .product-choice-option.is-selected{border-color:var(--choice-color);background:color-mix(in srgb,var(--choice-color) 10%,#fff);box-shadow:0 0 0 1px color-mix(in srgb,var(--choice-color) 28%,transparent)}
:where(html.page-product) .product-choice-option svg{background:var(--choice-color)}
:where(html.page-product) .quantity-variations-grid{grid-template-columns:1fr;gap:10px}
:where(html.page-product) .quantity-variation-option{position:relative;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:82px;margin-top:8px;padding:15px 17px;border:2px solid #e1e9ed;border-radius:16px;overflow:visible}
:where(html.page-product) .quantity-variation-option.is-selected{border-color:#1aafd0;background:linear-gradient(110deg,#f0fbff,#fff);box-shadow:none}
:where(html.page-product) .quantity-variation-edge-badge{position:absolute;z-index:2;top:-12px;display:inline-flex;align-items:center;justify-content:center;max-width:calc(50% - 20px);min-height:25px;padding:4px 12px;border:2px solid #d4e8f0;border-radius:999px;background:#fff;color:#17627d;font-size:var(--purchase-choice-badge-size);font-weight:900;line-height:1.15;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
:where(html.page-product) .quantity-variation-edge-badge.is-left{left:16px}
:where(html.page-product) .quantity-variation-edge-badge.is-right{right:16px;background:#173e50;border-color:#173e50;color:#fff}
:where(html.page-product) .quantity-variation-option.is-selected .quantity-variation-edge-badge.is-left{background:#24afd1;border-color:#24afd1;color:#fff}
:where(html.page-product) .purchase-option.has-edge-badges{position:relative;overflow:visible;margin-top:8px}
:where(html.page-product) .purchase-option.has-edge-badges .quantity-variation-edge-badge.is-left{left:16px}
:where(html.page-product) .purchase-option.has-edge-badges .quantity-variation-edge-badge.is-right{right:16px}
:where(html.page-product) .purchase-option.has-edge-badges.is-selected .quantity-variation-edge-badge.is-left{background:#24afd1;border-color:#24afd1;color:#fff}
:where(html.page-product) .quantity-variation-option.is-buy-x-get-y .quantity-variation-copy em{background:var(--moss);color:#fff}
:where(html.page-product) .quantity-variation-radio{width:21px;height:21px;border-color:#bdd3de}
:where(html.page-product) .quantity-variation-option.is-selected .quantity-variation-radio{border-color:#1aafd0;background:#1aafd0}
:where(html.page-product) .quantity-variation-option.is-selected .quantity-variation-radio::after{width:7px;height:7px;background:#fff}
:where(html.page-product) .quantity-variation-copy{gap:3px}
:where(html.page-product) .quantity-variation-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;min-width:0}
:where(html.page-product) .quantity-variation-title small{color:#758a96;font-size:var(--purchase-choice-meta-size);font-weight:650;line-height:1.35;white-space:nowrap}
:where(html.page-product) .quantity-variation-copy em{width:max-content;max-width:100%;margin-top:3px;padding:4px 8px;border-radius:7px;background:#e4f7ed;color:#197649;font-size:var(--purchase-choice-badge-size);font-style:normal;font-weight:800}
:where(html.page-product) .quantity-variation-copy>.quantity-variation-deadline{width:max-content;max-width:100%;margin-top:4px;color:var(--ink-soft);font-size:var(--purchase-choice-meta-size);font-weight:650;line-height:1.35}
:where(html.page-product) .quantity-variation-price{grid-column:auto;align-content:center;justify-items:end;margin:0;padding:0;border:0;text-align:right}
:where(html.page-product) .quantity-variation-price del{color:#99aab2;font-size:var(--purchase-choice-meta-size);font-weight:500;line-height:1.25;font-variant-numeric:tabular-nums}
:where(html.page-product) .price-block[hidden]{display:none!important}
@media(max-width:760px){
:where(html.page-product) .product-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
:where(html.page-product) .product-choice-option{
display:flex;
min-height:88px;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
padding:9px 12px;
font-size:13px;
line-height:1.25;
text-align:center;
}
:where(html.page-product) .product-choice-option .product-choice-swatch{width:29px;height:29px;border-width:4px}
:where(html.page-product) .product-choice-option svg{position:absolute;top:-7px;right:-7px;width:24px;height:24px;box-shadow:0 0 0 3px #fff}
}
@media(max-width:430px){
:where(html.page-product) .product-choice-option{min-height:82px;padding:9px 8px;font-size:12px}
:where(html.page-product) .quantity-variation-option{padding:14px 12px}
:where(html.page-product) .quantity-variation-title{column-gap:4px}
}
@media(max-width:560px){
}
:where(html.page-product) .product-gift-offer{display:grid;gap:8px;margin:0 0 18px;}
:where(html.page-product) .product-gift-offer:empty{display:none;}
:where(html.page-product) .product-gift-offer-list{display:grid;justify-items:start;gap:10px;width:100%;}
:where(html.page-product) .product-gift-offer-item{
position:relative;overflow:hidden;
display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;gap:14px;
width:min(100%,570px);min-height:90px;padding:8px 18px 8px 8px;
border:1px solid rgba(213,169,44,.48);border-radius:20px;
background:linear-gradient(115deg,#fff8df 0%,#fffdf7 52%,#fff 100%);
box-shadow:0 12px 30px -25px rgba(105,72,0,.75);
}
:where(html.page-product) .product-gift-offer-thumb{
width:74px;height:74px;display:grid;place-items:center;overflow:visible;
border:0;border-radius:0;background:transparent;box-shadow:none;
}
:where(html.page-product) .product-gift-offer-thumb img{width:100%;height:100%;padding:2px;object-fit:contain;mix-blend-mode:normal;}
:where(html.page-product) .product-gift-offer-copy{min-width:0;}
:where(html.page-product) .product-gift-offer-copy .product-gift-offer-kicker{
display:flex;align-items:center;flex-wrap:wrap;gap:5px 7px;margin:0 0 5px;
color:#7b5000;font-size:11.5px;font-weight:850;letter-spacing:.045em;line-height:1.25;
}
:where(html.page-product) .product-gift-offer-kicker svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
:where(html.page-product) .product-gift-offer-copy>strong{display:block;color:var(--ink);font-size:14.5px;font-weight:750;line-height:1.35;}
:where(html.page-product) .product-gift-offer-copy .product-gift-offer-meta{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:5px;color:#75633a;font-size:11px;line-height:1.35;}
:where(html.page-product) .product-gift-offer-value{color:#88754c;white-space:nowrap;}
:where(html.page-product) .product-gift-offer-value del{text-decoration-thickness:1px;}
@media(max-width:520px){
:where(html.page-product) .product-gift-offer-item{grid-template-columns:64px minmax(0,1fr);gap:11px;min-height:80px;padding:8px 10px 8px 8px;border-radius:17px;}
:where(html.page-product) .product-gift-offer-thumb{width:64px;height:64px;}
:where(html.page-product) .product-gift-offer-copy>strong{font-size:13px;}
:where(html.page-product) .product-gift-offer-copy .product-gift-offer-kicker{gap:4px 6px;font-size:10.5px;}
:where(html.page-product) .product-gift-offer-copy .product-gift-offer-meta{font-size:10px;}
}
:where(html.page-product) .product-cart-row{
display:grid;
grid-template-columns:120px minmax(0,1fr);
gap:10px;
align-items:stretch;
}
:where(html.page-product) .sticky-purchase-bar{
position:fixed;z-index:75;left:50%;bottom:18px;
width:min(1120px,calc(100vw - 40px));
padding:10px 12px;
border:1px solid rgba(30,29,26,.12);border-radius:20px;
background:rgba(255,255,255,.96);
box-shadow:0 20px 60px -18px rgba(30,29,26,.34);
-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
opacity:0;pointer-events:none;
transform:translate(-50%,calc(100% + 40px));
transition:opacity .22s var(--ease),transform .26s var(--ease);
}
:where(html.page-product) .sticky-purchase-bar.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
:where(html.page-product) .sticky-purchase-inner{display:grid;grid-template-columns:minmax(230px,1fr) auto minmax(230px,310px);align-items:center;gap:14px;}
:where(html.page-product) .sticky-purchase-product{display:flex;align-items:center;gap:11px;min-width:0;}
:where(html.page-product) .sticky-purchase-product img{width:48px;height:48px;flex:0 0 auto;border:1px solid var(--line);border-radius:12px;background:#fff;object-fit:contain;}
:where(html.page-product) .sticky-purchase-copy{min-width:0;}
:where(html.page-product) .sticky-purchase-name{display:block;overflow:hidden;color:var(--ink);font-size:12.5px;font-weight:700;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;}
:where(html.page-product) .sticky-purchase-price{display:flex;align-items:baseline;gap:7px;margin-top:3px;color:var(--moss-dark);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
:where(html.page-product) .sticky-purchase-price del{color:var(--ink-soft);font-size:10.5px;font-weight:500;}
:where(html.page-product) .sticky-price-mobile,:where(html.page-product) .sticky-purchase-mode-select-wrap,:where(html.page-product) .sticky-add-label-mobile{display:none;}
:where(html.page-product) .sticky-purchase-modes{display:flex;align-items:center;gap:3px;padding:4px;border-radius:999px;background:var(--cream);border:1px solid var(--line);}
:where(html.page-product) .sticky-purchase-mode{min-height:38px;padding:8px 13px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);font-size:11.5px;font-weight:750;white-space:nowrap;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);}
:where(html.page-product) .sticky-purchase-mode.is-selected{background:#fff;color:var(--moss-dark);box-shadow:0 3px 12px rgba(30,29,26,.09);}
:where(html.page-product) .sticky-purchase-add{min-height:48px;padding:12px 20px;}
@media(min-width:769px){
:where(html.page-product) .sticky-purchase-bar:not(.has-purchase-modes) .sticky-purchase-add{grid-column:3;}
}
:where(html.page-product) body.has-sticky-purchase{padding-bottom:92px;}
:where(html.page-product) .product-qty{
min-height:48px;
display:inline-flex;
align-items:center;
justify-content:space-between;
border:1.5px solid var(--line);
border-radius:999px;
overflow:hidden;
background:var(--white);
}
:where(html.page-product) .product-qty button{
width:44px;
min-width:44px;
height:100%;
border:0;
background:transparent;
color:var(--ink-soft);
cursor:pointer;
font-size:17px;
display:flex;
align-items:center;
justify-content:center;
transition:background .15s var(--ease),color .15s var(--ease);
}
:where(html.page-product) .product-qty button:hover{background:var(--cream-deep);color:var(--ink);}
:where(html.page-product) .product-qty span{
min-width:0;
flex:1 1 auto;
text-align:center;
font-size:13.5px;
font-weight:800;
color:var(--ink);
font-variant-numeric:tabular-nums;
}
:where(html.page-product) .btn-primary{
background:var(--moss);color:#fff;border:none;
border-radius:999px;padding:14px 28px;
font-size:14px;font-weight:700;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:10px;
transition:background .2s var(--ease),transform .15s var(--ease);
width:100%;
}
:where(html.page-product) .btn-primary:hover{background:var(--moss-dark);transform:translateY(-1px);}
:where(html.page-product) .btn-primary svg{flex-shrink:0;}
:where(html.page-product) .btn-secondary{
background:transparent;color:var(--ink);
border:1.5px solid var(--line);
border-radius:999px;padding:13px 28px;
font-size:13.5px;font-weight:600;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:10px;
transition:border-color .2s var(--ease),background .2s var(--ease);
width:100%;
}
:where(html.page-product) .btn-secondary:hover{border-color:var(--moss);background:var(--cream);}
:where(html.page-product) .btn-subscription{
border-color:var(--sage);
background:var(--cream);
color:var(--moss-dark);
}
:where(html.page-product) .btn-subscription:hover{background:var(--sage-light);border-color:var(--moss);}
:where(html.page-product) .purchase-options{display:grid;gap:10px;margin-bottom:14px}:where(html.page-product) .purchase-option{border:1.5px solid var(--line);border-radius:var(--radius-m);background:var(--white);overflow:hidden;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}:where(html.page-product) .purchase-option.is-selected{border-color:var(--moss);background:rgba(220,227,211,.25);box-shadow:0 0 0 1px var(--moss)}:where(html.page-product) .purchase-option-trigger{width:100%;min-height:58px;border:0;background:transparent;padding:14px 16px;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;color:var(--ink);cursor:pointer}:where(html.page-product) .purchase-radio{width:20px;height:20px;border:2px solid var(--sage);border-radius:50%;display:grid;place-items:center}:where(html.page-product) .purchase-option.is-selected .purchase-radio::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--moss)}:where(html.page-product) .purchase-option-title{display:grid;gap:4px;min-width:0;font-size:var(--purchase-choice-title-size);font-weight:800;line-height:1.3}:where(html.page-product) .purchase-option-title-line{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0}:where(html.page-product) .purchase-option-subtitle{color:var(--ink-soft);font-size:var(--purchase-choice-meta-size);font-weight:650;line-height:1.35}:where(html.page-product) .purchase-save{display:inline-flex;margin-left:0;padding:4px 8px;border-radius:999px;background:var(--sage-light);color:var(--moss-dark);font-size:var(--purchase-choice-badge-size);font-weight:800}:where(html.page-product) .purchase-option-price{font-size:var(--purchase-choice-price-size);font-weight:800;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}:where(html.page-product) .purchase-option-price del{display:block;color:var(--ink-soft);font-size:var(--purchase-choice-meta-size);font-weight:500;line-height:1.25;text-align:right;font-variant-numeric:tabular-nums}:where(html.page-product) .subscription-benefits{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;padding:0 16px 16px 50px}:where(html.page-product) .subscription-benefit{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.45;color:var(--ink-soft)}:where(html.page-product) .subscription-benefit svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--moss);margin-top:1px}:where(html.page-product) .subscription-frequency{grid-column:1/-1;margin-top:3px;font-size:12px;font-weight:700;color:var(--ink)}
:where(html.page-product) .purchase-option.is-subscription-only,:where(html.page-product) .purchase-option.is-subscription-only .purchase-option-trigger{cursor:default;}
:where(html.page-product) .purchase-option.is-subscription-only .purchase-radio{border-color:var(--moss);background:var(--moss);}
:where(html.page-product) .purchase-option.is-subscription-only .purchase-radio::after{width:8px;height:5px;border:0;border-left:2px solid #fff;border-bottom:2px solid #fff;border-radius:0;background:transparent;transform:rotate(-45deg) translate(1px,-1px);}
:where(html.page-product) .out-of-stock-note{
background:var(--cream-deep);
border-radius:var(--radius-s);
padding:14px 18px;
font-size:13.5px;
color:var(--ink-soft);
text-align:center;
}
/* PERKS */
:where(html.page-product) .perks{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:12px 24px;
margin:2px 0 24px;
padding:0;
}
:where(html.page-product) .perk{
display:flex;align-items:center;gap:7px;
min-width:0;padding:0;background:transparent;border-radius:0;
}
:where(html.page-product) .perk svg{width:18px;height:18px;flex-shrink:0;stroke:var(--moss);stroke-linecap:round;stroke-linejoin:round;}
:where(html.page-product) .perk span{font-size:13px;color:var(--ink-soft);line-height:1.4;white-space:nowrap;}
/* TABS */
:where(html.page-product) .tabs-nav{
display:flex;gap:0;border-bottom:1px solid var(--line);
margin-bottom:20px;
}
:where(html.page-product) .tab-btn{
padding:11px 18px;
font-size:13.5px;font-weight:500;
color:var(--ink-soft);border:none;background:none;cursor:pointer;
border-bottom:2.5px solid transparent;margin-bottom:-1px;
transition:color .2s var(--ease),border-color .2s var(--ease);
}
:where(html.page-product) .tab-btn:hover{color:var(--ink);}
:where(html.page-product) .tab-btn.is-active{color:var(--moss);border-bottom-color:var(--moss);font-weight:600;}
:where(html.page-product) .tab-panel{display:none;}
:where(html.page-product) .tab-panel.is-active{display:block;}
:where(html.page-product) .tab-panel p{font-size:14.5px;color:var(--ink-soft);line-height:1.7;margin:0 0 14px;}
:where(html.page-product) .tab-panel p:last-child{margin-bottom:0;}
:where(html.page-product) .tab-panel ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px;margin:0 0 16px;}
:where(html.page-product) .tab-panel ul li{
font-size:14.5px;color:var(--ink-soft);
padding-left:20px;position:relative;line-height:1.55;
}
:where(html.page-product) .tab-panel ul li::before{
content:"";position:absolute;left:0;top:8px;
width:6px;height:6px;border-radius:50%;background:var(--clay);
}
/* HOW TO USE */
:where(html.page-product) .how-steps{display:flex;flex-direction:column;gap:16px;}
:where(html.page-product) .how-step{display:flex;gap:14px;align-items:flex-start;}
:where(html.page-product) .step-num{
width:32px;height:32px;border-radius:50%;
background:var(--sage-light);color:var(--moss-dark);
font-size:13px;font-weight:700;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
:where(html.page-product) .step-body b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px;}
:where(html.page-product) .step-body span{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
/* RELATED SECTION */
:where(html.page-product) .related-section{
padding:64px 0 80px;
border-top:1px solid var(--line);
}
:where(html.page-product) .related-section h2{
font-family:var(--font-display);
font-size:clamp(24px,3vw,34px);
font-weight:450;
margin:0 0 32px;
line-height:1.2;
}
:where(html.page-product) .related-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
gap:20px;
}
/* PRODUCT CARDS (same as store) */
:where(html.page-product) .card{
background:var(--white);border-radius:var(--radius-m);overflow:hidden;
box-shadow:var(--shadow-card);border:.5px solid rgba(30,29,26,0.10);
transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
display:flex;flex-direction:column;
opacity:0;transform:translateY(12px);
animation:cardIn .5s var(--ease) forwards;
}
@keyframes cardIn{to{opacity:1;transform:translateY(0);}}
:where(html.page-product) .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:rgba(7, 138, 147,0.22);}
:where(html.page-product) .card-media{position:relative;aspect-ratio:1/1;background:var(--cream);overflow:hidden;}
:where(html.page-product) .card-media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0;width:100%;border:none;background:none;cursor:pointer;}
:where(html.page-product) .card-media .ph img{width:100%;height:100%;object-fit:cover;border:none;border-radius:0;background:var(--cream);padding:0;transition:transform .35s var(--ease);}
:where(html.page-product) .card:hover .card-media .ph img{transform:scale(1.025);}
:where(html.page-product) .card-media .ph.is-empty{color:var(--ink-soft);font-size:13px;font-weight:800;text-decoration:none;background:var(--cream);}
:where(html.page-product) .badge-stack{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:2;}
:where(html.page-product) .product-badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;padding:4px 9px;border-radius:999px;}
:where(html.page-product) .product-badge.sale{background:var(--ink);color:#fff;font-size:12.5px;padding:7px 12px;}
:where(html.page-product) .product-badge.sold{background:rgba(30,29,26,.55);color:#fff;}
:where(html.page-product) .quick-add{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:2;}
:where(html.page-product) .card:hover .quick-add{opacity:1;transform:translateY(0);}
:where(html.page-product) .quick-add button{width:100%;background:var(--ink);color:#fff;border:none;border-radius:999px;padding:10px 14px;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .2s var(--ease);}
:where(html.page-product) .quick-add button:hover{background:var(--moss);}
:where(html.page-product) .quick-add button:disabled{background:#A6A395;cursor:not-allowed;}
:where(html.page-product) .quick-add-mobile{display:none;}
:where(html.page-product) .card-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:7px;flex:1;}
:where(html.page-product) .related-card-footer{display:grid;gap:7px;margin-top:auto;}
:where(html.page-product) .card-cat{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
:where(html.page-product) .nat-pill{background:var(--sage-light);color:var(--moss-dark);border-radius:999px;padding:1.5px 7px;font-size:10px;letter-spacing:0;text-transform:none;font-weight:600;}
:where(html.page-product) .card h3{margin:0;font-family:var(--font-display);font-size:16px;font-weight:500;line-height:1.25;min-height:56px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
:where(html.page-product) .card h3 a{transition:color .2s;}
:where(html.page-product) .card h3 a:hover{color:var(--moss);}
:where(html.page-product) .card .desc{font-size:12.5px;color:var(--ink-soft);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
:where(html.page-product) .card-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:4px;}
:where(html.page-product) .price{display:flex;flex-direction:row;align-items:baseline;flex-wrap:wrap;column-gap:5px;row-gap:2px;}
:where(html.page-product) .price .now{font-family:var(--font-display);font-size:17px;font-weight:600;line-height:1.15;}
:where(html.page-product) .price .old{flex:0 0 auto;font-size:12px;color:var(--ink-soft);text-decoration:line-through;white-space:nowrap;}
:where(html.page-product) .price .month{font-size:11.5px;color:var(--ink-soft);}
:where(html.page-product) .low-stock-card{display:flex;align-items:center;gap:7px;color:var(--moss);font-size:11.5px;font-weight:700;line-height:1.35;}
:where(html.page-product) .low-stock-card::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 3px rgba(25, 181, 189,.14);flex:0 0 auto;}
:where(html.page-product) .card.is-sold .card-media{filter:grayscale(.25) opacity(.85);}
/* RESPONSIVE */
@media(max-width:1024px){
:where(html.page-product) .product-layout,:where(html.page-product) .product-loading{grid-template-columns:1fr;gap:40px;}
:where(html.page-product) .product-loading-media{width:min(100%,460px);margin:0 auto;}
:where(html.page-product) .gallery{position:static;max-width:460px;margin:0 auto;}
:where(html.page-product) .gallery-main{max-width:460px;margin:0 auto;}
:where(html.page-product) .gallery-thumbs{justify-content:flex-start;}
}
@media(max-width:900px){
:where(html.page-product) .product-content-wrap{grid-template-columns:1fr;gap:0;}
:where(html.page-product) .product-section-rail{display:none;}
:where(html.page-product) .certificate-showcase-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
:where(html.page-product) .product-page{max-width:100%;overflow-x:hidden;overflow-x:clip;}
:where(html.page-product) .wrap{padding:0 20px;}
:where(html.page-product) .nav{padding:10px 14px;gap:10px;}
:where(html.page-product) .logo{font-size:21px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
:where(html.page-product) .nav-actions{gap:4px;}
:where(html.page-product) .icon-btn{width:42px;height:42px;}
:where(html.page-product) .nav-links{display:none;}
:where(html.page-product) .burger{display:flex;}
:where(html.page-product) .breadcrumb{font-size:12.5px;gap:6px;line-height:1.35;}
:where(html.page-product) .breadcrumb .current{color:var(--ink-soft);}
:where(html.page-product) .breadcrumb-mobile{display:flex;margin-bottom:-14px;}
:where(html.page-product) .product-info>.breadcrumb{display:none;}
:where(html.page-product) .product-page{padding-top:18px;}
:where(html.page-product) .product-layout{margin-top:18px;gap:28px;}
:where(html.page-product) .perks{align-items:flex-start;flex-direction:column;gap:9px;}
:where(html.page-product) .perk span{white-space:normal;}
:where(html.page-product) .trust .wrap{grid-template-columns:1fr 1fr;}
:where(html.page-product) .footer-grid{grid-template-columns:1fr 1fr;}
:where(html.page-product) .product-info h1{font-size:clamp(21px,7vw,28px);}
:where(html.page-product) .product-info .price-block{gap:8px 10px;}
:where(html.page-product) .product-info .price-block .price-now{font-size:22px!important;}
:where(html.page-product) .product-info .price-block .price-old{font-size:14px!important;}
:where(html.page-product) .product-info .price-block .discount-pill{font-size:11px!important;padding:6px 10px;}
:where(html.page-product) .related-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
:where(html.page-product) .quick-add{opacity:1;transform:none;}
:where(html.page-product) .image-lightbox{padding:64px 14px 24px;}
:where(html.page-product) .image-lightbox img{max-height:calc(100dvh - 96px);border-radius:10px;}
:where(html.page-product) .image-lightbox-close{top:14px;right:14px;width:42px;height:42px;}
:where(html.page-product) .product-content-wrap,:where(html.page-product) .product-content-main,:where(html.page-product) .product-sections,:where(html.page-product) .product-section,:where(html.page-product) .product-section-content,:where(html.page-product) .section-layout,:where(html.page-product) .section-rich{max-width:100%;min-width:0}
:where(html.page-product) .product-content-wrap{margin-top:42px}:where(html.page-product) .product-sections{margin-top:0}:where(html.page-product) .product-section{padding:34px 0}:where(html.page-product) .product-section-head{margin-bottom:10px}:where(html.page-product) .product-content-main .product-sections .product-section>.product-section-head>h2{font-size:15px!important;line-height:1.4!important;font-weight:600!important;letter-spacing:0!important}:where(html.page-product) .product-section.bg-soft,:where(html.page-product) .product-section.bg-cream,:where(html.page-product) .product-section.bg-sage{padding:26px 20px;margin:18px -20px;border-radius:0}:where(html.page-product) .section-layout,:where(html.page-product) .section-layout.text_only,:where(html.page-product) .section-layout.text_image_right,:where(html.page-product) .section-layout.text_video,:where(html.page-product) .section-layout.text_image_left,:where(html.page-product) .section-layout.video_text,:where(html.page-product) .section-video-pair,:where(html.page-product) .section-steps-pair{grid-template-columns:1fr}:where(html.page-product) .section-layout.text_image_left .section-media,:where(html.page-product) .section-layout.video_text .section-media{order:2}:where(html.page-product) .section-layout.cards .section-rich ul,:where(html.page-product) .section-layout.icon_list .section-rich ul{grid-template-columns:1fr}:where(html.page-product) .product-section-content{font-size:15px}
:where(html.page-product) .section-gallery-track{gap:12px}:where(html.page-product) .section-gallery-slide{flex-basis:86%;aspect-ratio:4/5}:where(html.page-product) .section-gallery-arrow{width:44px;height:68px}:where(html.page-product) .section-gallery-arrow svg{width:24px;height:24px}
:where(html.page-product) .section-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
:where(html.page-product) .certificate-showcase-grid{grid-template-columns:1fr;}
:where(html.page-product) .subscription-comparison-section{padding:32px 0 28px;}
:where(html.page-product) .product-section .subscription-comparison-table th,:where(html.page-product) .product-section .subscription-comparison-table td{padding:10px 6px;font-size:11px;}
:where(html.page-product) .product-section .subscription-comparison-table thead th:first-child{width:25%;}
:where(html.page-product) .subscription-comparison-table thead .is-featured span{font-size:13px;}
:where(html.page-product) .subscription-comparison-table td strong,:where(html.page-product) .subscription-comparison-table td.is-featured strong{font-size:15px;}
:where(html.page-product) .comparison-icon{display:grid;width:19px;height:19px;margin:0 auto 3px;}
:where(html.page-product) .comparison-icon svg{width:11px;height:11px;}
:where(html.page-product) .subscription-cancel-note{margin-top:12px;padding:10px 12px;font-size:11.5px;}
:where(html.page-product) .subscription-cancel-note .comparison-icon{display:inline-grid;margin:0 4px 0 0;}
:where(html.page-product) .product-section .subscription-result-note{margin:6px auto 0;font-size:10.5px;}
:where(html.page-product) .subscription-gifts-block{margin-top:14px;}
:where(html.page-product) .subscription-gifts-heading{display:flex;margin-bottom:8px;}
:where(html.page-product) .subscription-gifts-heading span{font-size:15px;}
:where(html.page-product) .subscription-gifts-heading small{font-size:9px;}
:where(html.page-product) .subscription-gifts-grid{grid-template-columns:1fr;}
:where(html.page-product) .subscription-gift-card{min-height:0;}
:where(html.page-product) .subscription-gift-card.has-images{display:grid;grid-template-columns:124px minmax(0,1fr);align-items:stretch;}
:where(html.page-product) .subscription-gift-badge{top:7px;left:7px;padding:4px 7px;font-size:8px;}
:where(html.page-product) .subscription-gift-images{grid-column:1;height:auto;min-height:124px;padding:0;border-right:1px solid var(--line);border-bottom:0;}
:where(html.page-product) .subscription-gift-images[data-count="3"],:where(html.page-product) .subscription-gift-images[data-count="4"]{--gift-cols:2;}
:where(html.page-product) .subscription-gift-image{padding:0;}
:where(html.page-product) .subscription-gift-image img{max-width:none;max-height:none;}
:where(html.page-product) .subscription-gift-copy{grid-column:2;padding:10px;}
:where(html.page-product) .product-section .subscription-gift-copy h3{padding:3px 0 3px 10px;font-size:11px;line-height:1.3;}
:where(html.page-product) .product-section .subscription-gift-copy h3::before{top:9px;}
:where(html.page-product) .subscription-gift-price{padding-top:6px;}
:where(html.page-product) .sticky-purchase-bar{
left:0;right:0;bottom:0;width:100%;
padding:8px 10px calc(8px + env(safe-area-inset-bottom));
border:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;
transform:translateY(calc(100% + 24px));
box-shadow:0 -14px 44px -24px rgba(30,29,26,.42);
}
:where(html.page-product) .sticky-purchase-bar.is-visible{transform:translateY(0);}
:where(html.page-product) .sticky-purchase-inner{grid-template-columns:minmax(82px,.7fr) minmax(150px,1.3fr);gap:7px;}
:where(html.page-product) .sticky-purchase-bar.has-purchase-modes .sticky-purchase-inner{grid-template-columns:minmax(82px,.7fr) minmax(106px,.9fr) minmax(142px,1.25fr);gap:6px;}
:where(html.page-product) .sticky-purchase-product{min-height:46px;grid-column:1;grid-row:1;}
:where(html.page-product) .sticky-purchase-product img,:where(html.page-product) .sticky-purchase-name{display:none;}
:where(html.page-product) .sticky-purchase-price{display:block;margin:0;font-size:16px;line-height:1.08;white-space:nowrap;}
:where(html.page-product) .sticky-purchase-price del{display:block;margin-top:3px;font-size:9.5px;line-height:1;}
:where(html.page-product) .sticky-price-desktop,:where(html.page-product) .sticky-purchase-modes,:where(html.page-product) .sticky-add-label-desktop{display:none;}
:where(html.page-product) .sticky-price-mobile,:where(html.page-product) .sticky-add-label-mobile{display:inline;}
:where(html.page-product) .sticky-purchase-mode-select-wrap{display:block;position:relative;grid-column:2;grid-row:1;min-width:0;}
:where(html.page-product) .sticky-purchase-mode-select-wrap select{
width:100%;height:48px;padding:0 28px 0 12px;border:1px solid var(--line);border-radius:999px;
background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:13px;font-weight:700;line-height:1;
letter-spacing:0;appearance:none;outline:none;
}
:where(html.page-product) .sticky-purchase-mode-select-wrap svg{position:absolute;pointer-events:none;right:9px;top:50%;width:14px;height:14px;transform:translateY(-50%);fill:none;stroke:currentColor;stroke-width:2;}
:where(html.page-product) .sticky-purchase-bar.has-purchase-modes .sticky-purchase-add{grid-column:3;grid-row:1;}
:where(html.page-product) .sticky-purchase-mode{flex:1;min-height:36px;padding:7px 10px;font-size:11.5px;}
:where(html.page-product) .btn-primary.sticky-purchase-add{
grid-column:2;grid-row:1;height:48px;min-height:48px;padding:0 10px;
font-family:var(--font-body);font-size:13px;font-weight:700;line-height:1;letter-spacing:0;white-space:nowrap;
}
:where(html.page-product) body.has-sticky-purchase{padding-bottom:calc(72px + env(safe-area-inset-bottom));}
}
@media(max-width:480px){
:where(html.page-product) .product-badge.sale{font-size:11.5px;padding:6px 10px;letter-spacing:.025em;}
:where(html.page-product) .section-icon-grid{grid-template-columns:1fr!important;}
:where(html.page-product) .certificate-showcase-card{grid-template-columns:48px minmax(0,1fr);gap:8px;align-items:center;min-height:0;padding:8px 10px;}
:where(html.page-product) .certificate-showcase-logo{height:48px;padding:2px 6px 2px 0;}
:where(html.page-product) .certificate-showcase-copy{display:block;}
:where(html.page-product) .product-section-content .certificate-showcase-copy h3{margin:0 0 3px;font-size:13px;line-height:1.35;}
:where(html.page-product) .certificate-showcase-description{font-size:12px!important;line-height:1.45!important;}
:where(html.page-product) .subscription-gift-card.has-images{grid-template-columns:112px minmax(0,1fr);}
:where(html.page-product) .subscription-gift-images{min-height:112px;padding:0;}
:where(html.page-product) .subscription-gift-image img{max-width:none;max-height:none;}
:where(html.page-product) .subscription-comparison-kicker{font-size:9.5px;}
:where(html.page-product) .product-section .subscription-comparison-table th,:where(html.page-product) .product-section .subscription-comparison-table td{padding:9px 4px;font-size:10px;}
:where(html.page-product) .subscription-comparison-table thead .is-featured span{font-size:12px;}
:where(html.page-product) .subscription-comparison-table td strong,:where(html.page-product) .subscription-comparison-table td.is-featured strong{font-size:13px;}
:where(html.page-product) .trust .wrap{grid-template-columns:1fr;}
:where(html.page-product) .footer-grid{grid-template-columns:1fr;}
:where(html.page-product) .tabs-nav{gap:0;overflow-x:auto;}
:where(html.page-product) .tab-btn{padding:12px 14px;font-size:13px;white-space:nowrap;}
:where(html.page-product) .product-cart-row{grid-template-columns:116px minmax(0,1fr);gap:8px;}
:where(html.page-product) .quantity-variations-grid{grid-template-columns:1fr;}
:where(html.page-product) .quantity-variation-option{grid-template-columns:18px minmax(0,1fr) auto;align-items:center;}
:where(html.page-product) .quantity-variation-price{grid-column:auto;margin:0;padding:0 0 0 10px;border:0;border-left:1px solid var(--line);text-align:right;}
:where(html.page-product) .quantity-variations-head span{display:none;}
:where(html.page-product) .product-qty{min-height:46px;}
:where(html.page-product) .product-qty button{width:44px;min-width:44px;}
:where(html.page-product) .btn-primary{padding:13px 18px;font-size:13.5px;}
:where(html.page-product) .sticky-purchase-inner{grid-template-columns:minmax(78px,.68fr) minmax(146px,1.32fr);}
:where(html.page-product) .sticky-purchase-bar.has-purchase-modes .sticky-purchase-inner{grid-template-columns:minmax(76px,.62fr) minmax(124px,1fr) minmax(132px,1.1fr);}
:where(html.page-product) .sticky-purchase-add svg{display:block;width:17px;height:17px;}
:where(html.page-product) .purchase-option-trigger{grid-template-columns:20px minmax(0,1fr);padding:13px}:where(html.page-product) .purchase-option-price{grid-column:2;text-align:left}:where(html.page-product) .purchase-option-price del{text-align:left;display:inline;margin-left:5px}:where(html.page-product) .subscription-benefits{grid-template-columns:1fr;padding:0 13px 14px 45px}
:where(html.page-product) .related-section{padding:46px 0 64px;}
:where(html.page-product) .related-section h2{font-size:24px;margin-bottom:22px;}
:where(html.page-product) .related-grid{grid-template-columns:1fr 1fr;gap:12px;}
:where(html.page-product) .card-body{padding:12px 12px 14px;gap:6px;}
:where(html.page-product) .card h3{font-size:14.5px;}
:where(html.page-product) .card .desc{display:none;}
:where(html.page-product) .price .now{font-size:16px;}
:where(html.page-product) .low-stock-card{font-size:10.5px;gap:6px;}
:where(html.page-product) .low-stock-card::before{width:6px;height:6px;box-shadow:0 0 0 2px rgba(25, 181, 189,.14);}
:where(html.page-product) .price{flex-direction:row;align-items:baseline;column-gap:5px;row-gap:1px;flex-wrap:wrap;}
:where(html.page-product) .price .now,:where(html.page-product) .price .month{white-space:nowrap;}
:where(html.page-product) .price .old{flex:0 0 auto;white-space:nowrap;}
:where(html.page-product) .quick-add-media{display:none;}
:where(html.page-product) .quick-add-mobile{
position:static;
display:flex;
opacity:1;
transform:none;
margin-top:auto;
padding-top:4px;
width:100%;
}
:where(html.page-product) .quick-add button{padding:10px 8px;font-size:11.5px;line-height:1;white-space:nowrap;}
:where(html.page-product) .quick-add button svg{display:none;}
:where(html.page-product) .quick-add button span.full{display:inline;}
}
/* ===== cart.html base styles (scoped) ===== */
:where(html.page-cart) *{box-sizing:border-box;} html:where(.page-cart){scroll-behavior:smooth;}
:where(html.page-cart) body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5;}
:where(html.page-cart) img{max-width:100%;display:block;} :where(html.page-cart) button{font-family:inherit;} :where(html.page-cart) a{color:inherit;text-decoration:none;}
:where(html.page-cart) a:focus-visible,:where(html.page-cart) button:focus-visible,:where(html.page-cart) input:focus-visible,:where(html.page-cart) select:focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){:where(html.page-cart) *{animation-duration:.001ms!important;transition-duration:.001ms!important;}}
:where(html.page-cart) .wrap{max-width:1360px;margin:0 auto;padding:0 32px;}
/* BREADCRUMB */
:where(html.page-cart) .breadcrumb{padding:20px 0 0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);min-width:0;flex-wrap:wrap;}
:where(html.page-cart) .breadcrumb a{color:var(--ink-soft);transition:color .2s;}
:where(html.page-cart) .breadcrumb a:hover{color:var(--ink);}
:where(html.page-cart) .breadcrumb span{opacity:.5;}
/* PAGE TITLE */
:where(html.page-cart) .page-title-block{padding:28px 0 40px;}
:where(html.page-cart) .page-title-block h1{font-family:var(--font-display);font-size:clamp(30px,4vw,48px);font-weight:450;margin:0 0 6px;}
:where(html.page-cart) .page-title-block p{color:var(--ink-soft);margin:0;font-size:15px;}
/* CART LAYOUT */
:where(html.page-cart) .cart-layout{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;padding-bottom:100px;}
/* CART ITEMS */
:where(html.page-cart) .cart-items-block{}
:where(html.page-cart) .cart-header-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--line);margin-bottom:4px;}
:where(html.page-cart) .cart-header-row span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
:where(html.page-cart) .cart-header-row .col-price{text-align:right;}
:where(html.page-cart) .cart-header-row .col-total{text-align:right;min-width:80px;}
:where(html.page-cart) .cart-item{display:grid;grid-template-columns:90px 1fr auto auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);}
:where(html.page-cart) .cart-item:last-child{border-bottom:none;}
:where(html.page-cart) .item-thumb{width:90px;height:90px;border-radius:var(--radius-m);background:var(--cream-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
:where(html.page-cart) .cart-item.is-gift{
position:relative;overflow:hidden;
grid-template-columns:74px minmax(0,1fr);gap:14px;
width:calc(100% - 34px);min-height:90px;margin:8px 0 18px 34px;padding:8px 18px 8px 8px;
border:1px solid rgba(213,169,44,.48);border-radius:20px;
background:linear-gradient(115deg,#fff8df 0%,#fffdf7 52%,#fff 100%);
box-shadow:0 12px 30px -25px rgba(105,72,0,.75);
}
:where(html.page-cart) .cart-item.is-gift .item-thumb{
width:74px;height:74px;border:0;border-radius:0;background:transparent;overflow:visible;
}
:where(html.page-cart) .cart-item.is-gift .item-thumb img{width:100%;height:100%;padding:2px;object-fit:contain;mix-blend-mode:normal;}
:where(html.page-cart) .cart-item.is-gift .item-info{min-width:0;}
:where(html.page-cart) .gift-kicker{
display:flex;align-items:center;flex-wrap:wrap;gap:5px 7px;margin:0 0 5px;
color:#7b5000;font-size:11.5px;font-weight:850;letter-spacing:.045em;line-height:1.25;
}
:where(html.page-cart) .gift-kicker svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
:where(html.page-cart) .cart-item.is-gift .item-name{margin:0;color:var(--ink);font-size:14.5px;font-weight:750;line-height:1.35;}
:where(html.page-cart) .gift-value{margin:5px 0 0;color:#88754c;font-size:11px;line-height:1.35;}
:where(html.page-cart) .gift-value del{text-decoration-thickness:1px;}
:where(html.page-cart) .item-thumb svg{width:48%;height:48%;}
:where(html.page-cart) .item-info{}
:where(html.page-cart) .item-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);margin-bottom:4px;}
:where(html.page-cart) .item-name{font-family:var(--font-display);font-size:18px;font-weight:500;margin:0 0 4px;}
:where(html.page-cart) .item-desc{font-size:13px;color:var(--ink-soft);margin:0 0 10px;}
:where(html.page-cart) .item-remove{background:none;border:none;cursor:pointer;font-size:12.5px;color:var(--ink-soft);padding:0;transition:color .2s;}
:where(html.page-cart) .item-remove:hover{color:var(--clay);}
:where(html.page-cart) .item-price{font-family:var(--font-display);font-size:17px;font-weight:500;text-align:right;white-space:nowrap;}
:where(html.page-cart) .item-price .old-price{display:block;font-size:12px;color:var(--ink-soft);text-decoration:line-through;font-family:var(--font-body);font-weight:400;margin-top:2px;}
:where(html.page-cart) .item-total{font-family:var(--font-display);font-size:18px;font-weight:600;text-align:right;min-width:80px;white-space:nowrap;}
/* QTY CONTROL */
:where(html.page-cart) .qty-ctrl{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--white);}
:where(html.page-cart) .qty-ctrl button{width:32px;height:32px;border:none;background:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:background .15s,color .15s;}
:where(html.page-cart) .qty-ctrl button:hover{background:var(--cream-deep);color:var(--ink);}
:where(html.page-cart) .qty-ctrl span{font-size:13px;width:28px;text-align:center;font-weight:700;}
/* EMPTY CART */
:where(html.page-cart) .empty-cart{text-align:center;padding:80px 20px;grid-column:1/-1;}
:where(html.page-cart) .empty-cart svg{width:64px;height:64px;margin:0 auto 20px;opacity:.35;display:block;}
:where(html.page-cart) .empty-cart h2{font-family:var(--font-display);font-size:26px;font-weight:450;margin:0 0 10px;}
:where(html.page-cart) .empty-cart p{color:var(--ink-soft);margin:0 0 28px;font-size:15px;}
:where(html.page-cart) .empty-cart a{display:inline-flex;align-items:center;gap:8px;background:var(--moss);color:#fff;padding:14px 28px;border-radius:999px;font-size:14px;font-weight:700;transition:background .2s;}
:where(html.page-cart) .empty-cart a:hover{background:var(--moss-dark);}
/* COUPON ROW */
:where(html.page-cart) .coupon-row{display:flex;gap:10px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);}
:where(html.page-cart) .coupon-row input{flex:1;padding:12px 16px;border-radius:999px;border:1.5px solid var(--line);font-size:13.5px;font-family:inherit;color:var(--ink);transition:border-color .2s;}
:where(html.page-cart) .coupon-row input:focus{outline:none;border-color:var(--moss);}
:where(html.page-cart) .coupon-row button{background:var(--cream-deep);color:var(--ink);border:1.5px solid var(--line);padding:12px 20px;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s;}
:where(html.page-cart) .coupon-row button:hover{border-color:var(--moss);background:var(--sage-light);}
:where(html.page-cart) .coupon-msg{margin-top:10px;font-size:13px;font-weight:500;}
:where(html.page-cart) .coupon-msg.ok{color:var(--moss-dark);}
:where(html.page-cart) .coupon-msg.err{color:var(--clay-dark);}
/* ORDER SUMMARY */
:where(html.page-cart) .summary-card{background:var(--cream);border-radius:var(--radius-l);padding:32px;position:sticky;top:100px;}
:where(html.page-cart) .summary-card h2{font-family:var(--font-display);font-size:22px;font-weight:500;margin:0 0 24px;}
:where(html.page-cart) .summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;color:var(--ink-soft);}
:where(html.page-cart) .summary-line b{color:var(--ink);font-weight:500;}
:where(html.page-cart) .summary-line.discount b{color:var(--moss-dark);}
:where(html.page-cart) .summary-divider{border:none;border-top:1px solid var(--line);margin:16px 0;}
:where(html.page-cart) .summary-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
:where(html.page-cart) .summary-total span:first-child{font-size:15px;font-weight:700;}
:where(html.page-cart) .summary-total span:last-child{font-family:var(--font-display);font-size:26px;font-weight:600;}
:where(html.page-cart) .summary-vat{font-size:12px;color:var(--ink-soft);text-align:right;margin-bottom:22px;}
:where(html.page-cart) .checkout-btn{width:100%;background:var(--moss);color:#fff;border:none;padding:16px;border-radius:999px;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease);display:flex;align-items:center;justify-content:center;gap:10px;}
:where(html.page-cart) .checkout-btn:hover{background:var(--moss-dark);transform:translateY(-1px);}
:where(html.page-cart) .checkout-btn:active{transform:translateY(0);}
:where(html.page-cart) .pay-methods{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;}
:where(html.page-cart) .pay-methods span{font-size:11.5px;color:var(--ink-soft);}
:where(html.page-cart) .pay-pill{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;color:var(--ink-soft);}
:where(html.page-cart) .secure-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:12px;color:var(--ink-soft);}
:where(html.page-cart) .free-ship-bar{margin-top:20px;background:var(--white);border-radius:var(--radius-m);padding:14px 16px;}
:where(html.page-cart) .free-ship-bar .label{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;}
:where(html.page-cart) .free-ship-bar .label b{color:var(--moss-dark);}
:where(html.page-cart) .free-ship-achieved{font-size:12.5px;color:var(--moss-dark);font-weight:600;text-align:center;margin-top:8px;}
/* UPSELL */
:where(html.page-cart) .upsell-section{margin-top:48px;}
:where(html.page-cart) .upsell-section h3{font-family:var(--font-display);font-size:22px;font-weight:450;margin:0 0 20px;}
:where(html.page-cart) .upsell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
:where(html.page-cart) .upsell-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
:where(html.page-cart) .upsell-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
:where(html.page-cart) .upsell-thumb{width:100%;aspect-ratio:1/1;background:var(--cream-deep);border-radius:var(--radius-s);display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
:where(html.page-cart) .upsell-thumb svg{width:44%;height:44%;}
:where(html.page-cart) .upsell-cat{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);}
:where(html.page-cart) .upsell-name{font-family:var(--font-display);font-size:15px;font-weight:500;line-height:1.25;margin:0;}
:where(html.page-cart) .upsell-price{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--moss-dark);}
:where(html.page-cart) .upsell-add{width:100%;background:var(--cream-deep);color:var(--ink);border:1.5px solid var(--line);padding:9px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:auto;}
:where(html.page-cart) .upsell-add:hover{background:var(--moss);color:#fff;border-color:var(--moss);}
/* RESPONSIVE */
@media(max-width:1000px){
:where(html.page-cart) .cart-layout{grid-template-columns:1fr;gap:32px;}
:where(html.page-cart) .summary-card{position:static;}
:where(html.page-cart) .upsell-grid{grid-template-columns:repeat(2,1fr);}
:where(html.page-cart) .footer-grid{grid-template-columns:1.2fr 1fr 1fr;}
}
@media(max-width:860px){
:where(html.page-cart) .wrap{padding:0 20px;}
:where(html.page-cart) .nav{padding:10px 14px;gap:10px;}
:where(html.page-cart) .logo{font-size:21px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
:where(html.page-cart) .nav-actions{gap:4px;}
:where(html.page-cart) .icon-btn{width:42px;height:42px;}
:where(html.page-cart) .nav-links{display:none;}
:where(html.page-cart) .burger{display:flex;background:none;border:none;cursor:pointer;align-items:center;justify-content:center;}
:where(html.page-cart) .breadcrumb{font-size:12.5px;gap:6px;line-height:1.35;}
:where(html.page-cart) .cart-item{grid-template-columns:70px 1fr;gap:14px;}
:where(html.page-cart) .cart-item.is-gift{grid-template-columns:64px minmax(0,1fr);gap:11px;width:100%;min-height:80px;margin:8px 0 18px;padding:8px 10px 8px 8px;border-radius:17px;}
:where(html.page-cart) .cart-item.is-gift .item-thumb{width:64px;height:64px;}
:where(html.page-cart) .cart-item.is-gift .item-name{font-size:13px;}
:where(html.page-cart) .gift-kicker{gap:4px 6px;font-size:10.5px;}
:where(html.page-cart) .gift-value{font-size:10px;}
:where(html.page-cart) .cart-item .item-price,:where(html.page-cart) .cart-item .item-total{display:none;}
:where(html.page-cart) .cart-header-row{display:none;}
:where(html.page-cart) .footer-grid{grid-template-columns:1fr 1fr;row-gap:30px;}
:where(html.page-cart) .footer-grid>div:first-child{grid-column:1/-1;}
}
@media(max-width:520px){
:where(html.page-cart) .upsell-grid{grid-template-columns:1fr;}
:where(html.page-cart) .footer-grid{grid-template-columns:1fr;}
:where(html.page-cart) .nav{padding:10px 14px;}
:where(html.page-cart) .logo{font-size:20px;}
}
/* ===== checkout.html base styles (scoped) ===== */
:where(html.page-checkout) *{box-sizing:border-box;} html:where(.page-checkout){scroll-behavior:smooth;}
:where(html.page-checkout) body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;}
:where(html.page-checkout) img{max-width:100%;display:block;} :where(html.page-checkout) button{font-family:inherit;} :where(html.page-checkout) a{color:inherit;text-decoration:none;}
:where(html.page-checkout) a:focus-visible,:where(html.page-checkout) button:focus-visible,:where(html.page-checkout) input:focus-visible,:where(html.page-checkout) select:focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){:where(html.page-checkout) *{animation-duration:.001ms!important;transition-duration:.001ms!important;}}
:where(html.page-checkout) .wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
:where(html.page-checkout) .logo{font-family:var(--font-display);font-weight:600;letter-spacing:.01em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;}
:where(html.page-checkout) .logo span{color:var(--clay);}
:where(html.page-checkout) .icon-btn{background:none;border:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;position:relative;transition:background .2s var(--ease),color .2s var(--ease);touch-action:manipulation;}
:where(html.page-checkout) .icon-btn:hover{background:var(--cream-deep);}
:where(html.page-checkout) .icon-btn.is-active{background:var(--cream-deep);color:var(--clay);}
:where(html.page-checkout) .icon-btn.is-active svg{fill:var(--clay);stroke:var(--clay);}
:where(html.page-checkout) .cart-count{position:absolute;top:2px;right:2px;background:var(--clay);color:#fff;font-size:10.5px;font-weight:700;min-width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--cream);}
/* LAYOUT */
:where(html.page-checkout) .checkout-body{padding:40px 0 80px;}
:where(html.page-checkout) .checkout-intro{margin:0 0 26px;}
:where(html.page-checkout) .checkout-intro h1{font-family:var(--font-display);font-size:clamp(28px,4vw,42px);font-weight:450;line-height:1.12;margin:0 0 8px;}
:where(html.page-checkout) .checkout-intro p{margin:0;color:var(--ink-soft);font-size:15px;max-width:900px;}
:where(html.page-checkout) .checkout-grid{display:grid;grid-template-columns:1fr 400px;grid-template-areas:"forms summary";gap:40px;align-items:start;}
:where(html.page-checkout) .forms-col{grid-area:forms;min-width:0;}
/* FORM SECTIONS */
:where(html.page-checkout) .form-section{background:var(--white);border-radius:var(--radius-l);padding:32px;margin-bottom:20px;box-shadow:var(--shadow-card);}
:where(html.page-checkout) .form-section:last-child{margin-bottom:0;}
:where(html.page-checkout) .form-section-title{display:flex;align-items:center;gap:12px;margin-bottom:24px;}
:where(html.page-checkout) .form-section-title h2{font-family:var(--font-display);font-size:20px;font-weight:500;margin:0;}
:where(html.page-checkout) .section-num{width:30px;height:30px;border-radius:50%;background:var(--moss);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
:where(html.page-checkout) .delivery-address-section{display:none;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);}
:where(html.page-checkout) .delivery-address-section.is-visible{display:block;animation:addressReveal .25s ease both;}
:where(html.page-checkout) .delivery-address-heading{font-family:var(--font-display);font-size:17px;font-weight:500;margin:0 0 18px;}
:where(html.page-checkout) .shipping-error{display:none;margin:12px 0 0;font-size:12px;font-weight:600;color:#B42318;}
:where(html.page-checkout) .shipping-error.is-visible{display:block;}
:where(html.page-checkout) .form-row.is-hidden{display:none;}
:where(html.page-checkout) .field.is-hidden{display:none;}
:where(html.page-checkout) .field-help{font-size:11.5px;color:var(--ink-soft);line-height:1.35;}
@keyframes addressReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
/* FORM ELEMENTS */
:where(html.page-checkout) .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
:where(html.page-checkout) .form-row.single{grid-template-columns:1fr;}
:where(html.page-checkout) .form-row.triple{grid-template-columns:1fr 1fr 1fr;}
:where(html.page-checkout) .field{display:flex;flex-direction:column;gap:5px;}
:where(html.page-checkout) .field label{font-size:12.5px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em;}
:where(html.page-checkout) .field input,:where(html.page-checkout) .field select,:where(html.page-checkout) .field textarea{
padding:12px 16px;
border:1.5px solid var(--line);
border-radius:var(--radius-m);
font-size:14px;
font-family:inherit;
color:var(--ink);
background:var(--white);
transition:border-color .2s,box-shadow .2s;
}
:where(html.page-checkout) .field input:focus,:where(html.page-checkout) .field select:focus,:where(html.page-checkout) .field textarea:focus{
outline:none;
border-color:var(--moss);
box-shadow:0 0 0 3px rgba(7, 138, 147,.12);
}
:where(html.page-checkout) .field input.err,:where(html.page-checkout) .field select.err{border-color:#B42318;box-shadow:0 0 0 1px rgba(180,35,24,.12);}
:where(html.page-checkout) .field .err-msg{font-size:11.5px;font-weight:700;color:#B42318;display:none;}
:where(html.page-checkout) .field input.err ~ .err-msg,:where(html.page-checkout) .field select.err ~ .err-msg,:where(html.page-checkout) .field .show-err{display:block;}
:where(html.page-checkout) .field textarea{resize:vertical;min-height:80px;}
:where(html.page-checkout) .field select{appearance:none;-webkit-appearance:none;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
:where(html.page-checkout) .office-combobox{position:relative;}
:where(html.page-checkout) .office-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;max-height:260px;overflow-y:auto;background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-card);padding:6px;}
:where(html.page-checkout) .office-results[hidden]{display:none;}
:where(html.page-checkout) .office-result{width:100%;border:none;background:transparent;color:var(--ink);font:inherit;text-align:left;padding:10px 11px;border-radius:10px;cursor:pointer;line-height:1.35;}
:where(html.page-checkout) .office-result:hover,:where(html.page-checkout) .office-result:focus-visible{background:var(--cream);outline:none;}
:where(html.page-checkout) .office-result b{display:block;font-size:13px;font-weight:700;}
:where(html.page-checkout) .office-result span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
:where(html.page-checkout) .office-select-hidden{display:none;}
/* RADIO CARDS */
:where(html.page-checkout) .radio-cards{display:flex;flex-direction:column;gap:12px;margin-bottom:0;}
:where(html.page-checkout) .radio-card{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1.5px solid var(--line);border-radius:var(--radius-m);cursor:pointer;transition:border-color .2s,background .2s;position:relative;}
:where(html.page-checkout) .radio-card:hover{border-color:var(--sage);}
:where(html.page-checkout) .radio-card.selected{border-color:var(--moss);background:rgba(7, 138, 147,.05);}
:where(html.page-checkout) .radio-card input[type=radio]{position:absolute;opacity:0;pointer-events:none;}
:where(html.page-checkout) .radio-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .2s;}
:where(html.page-checkout) .radio-card.selected .radio-dot{border-color:var(--moss);}
:where(html.page-checkout) .radio-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--moss);opacity:0;transition:opacity .2s;}
:where(html.page-checkout) .radio-card.selected .radio-dot::after{opacity:1;}
:where(html.page-checkout) .radio-card-icon{width:40px;height:40px;border-radius:var(--radius-s);background:var(--cream-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
:where(html.page-checkout) .radio-card-icon svg{width:22px;height:22px;}
:where(html.page-checkout) .radio-card-icon img{display:block;max-width:100%;height:auto;}
:where(html.page-checkout) .radio-card-icon.speedy-brand{background:#fff;border:1px solid rgba(30,29,26,.08);padding:6px;}
:where(html.page-checkout) .radio-card-icon.speedy-brand img{width:24px;}
:where(html.page-checkout) .radio-card-label{flex:1;}
:where(html.page-checkout) .radio-card-label b{display:block;font-size:14px;font-weight:600;margin-bottom:2px;}
:where(html.page-checkout) .radio-card-label span{font-size:12.5px;color:var(--ink-soft);}
:where(html.page-checkout) .radio-card-price{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--moss-dark);white-space:nowrap;}
:where(html.page-checkout) .shipping-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
:where(html.page-checkout) .shipping-options .radio-card{min-width:0;padding:13px 10px;flex-direction:column;justify-content:flex-start;gap:7px;text-align:center;}
:where(html.page-checkout) .shipping-options .radio-dot{display:none;}
:where(html.page-checkout) .shipping-options .radio-card-icon{width:36px;height:36px;}
:where(html.page-checkout) .shipping-options .radio-card-icon svg{width:20px;height:20px;}
:where(html.page-checkout) .shipping-options .radio-card-icon.speedy-brand{width:36px;height:36px;}
:where(html.page-checkout) .shipping-options .radio-card-icon.speedy-brand img{width:24px;}
:where(html.page-checkout) .shipping-options .radio-card-label{flex:0;width:100%;}
:where(html.page-checkout) .shipping-options .radio-card-label b{font-size:12.5px;line-height:1.25;margin:0;}
:where(html.page-checkout) .shipping-options .radio-card-label span{display:none;}
:where(html.page-checkout) .shipping-options .radio-card-price{font-size:12px;line-height:1.25;white-space:normal;}
/* PAYMENT TABS */
:where(html.page-checkout) .pay-tabs{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:20px;border:1.5px solid var(--line);border-radius:var(--radius-m);overflow:hidden;background:var(--white);}
:where(html.page-checkout) .pay-option+.pay-option{border-top:1px solid var(--line);}
:where(html.page-checkout) .pay-tab{width:100%;min-height:62px;padding:13px 18px;border:0;border-radius:0;background:var(--white);cursor:pointer;display:flex;align-items:center;gap:12px;text-align:left;font-size:14px;font-weight:700;color:var(--ink-soft);transition:background .2s,color .2s;}
:where(html.page-checkout) .pay-tab:hover{background:rgba(221,244,242,.28);color:var(--moss-dark);}
:where(html.page-checkout) .pay-tab.active{background:rgba(221,244,242,.45);color:var(--moss-dark);}
:where(html.page-checkout) .pay-tab:focus-visible{outline:3px solid rgba(7,138,147,.28);outline-offset:-3px;}
:where(html.page-checkout) .pay-tab svg{width:24px;height:24px;flex:0 0 24px;}
:where(html.page-checkout) .pay-radio{width:20px;height:20px;border:2px solid #aeb8ba;border-radius:50%;display:grid;place-items:center;flex:0 0 20px;transition:border-color .2s;}
:where(html.page-checkout) .pay-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--moss);opacity:0;transform:scale(.4);transition:opacity .18s,transform .18s;}
:where(html.page-checkout) .pay-tab.active .pay-radio{border-color:var(--moss);}
:where(html.page-checkout) .pay-tab.active .pay-radio::after{opacity:1;transform:scale(1);}
:where(html.page-checkout) .pay-tab-label{flex:1;min-width:0;}
:where(html.page-checkout) .pay-panel{display:none;}
:where(html.page-checkout) .pay-panel.active{display:block;animation:paymentNoteReveal .2s ease-out both;}
@keyframes paymentNoteReveal{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
:where(html.page-checkout) .payment-method-note{background:var(--cream-deep);border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 20px 18px 70px;}
:where(html.page-checkout) .payment-method-note b{display:block;font-size:14px;line-height:1.35;margin-bottom:5px;}
:where(html.page-checkout) .payment-method-note p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-soft);}
:where(html.page-checkout) .stripe-payment-panel{padding:18px 18px 16px;background:var(--white);border-top:1px solid var(--line);}
:where(html.page-checkout) #stripePaymentElement{min-height:92px;}
:where(html.page-checkout) .stripe-payment-loading{margin:0;padding:12px 0;color:var(--ink-soft);font-size:13px;}
:where(html.page-checkout) .stripe-payment-error{margin:12px 0 0;padding:10px 12px;border-radius:7px;background:#FEF3F2;color:#B42318;font-size:13px;line-height:1.45;}
:where(html.page-checkout) .stripe-payment-provider{margin:13px 0 0;color:var(--ink-soft);font-size:11.5px;line-height:1.5;}
:where(html.page-checkout) .revolut-panel{background:#f7f7f7;border-color:#d9d9d9;display:flex;gap:14px;align-items:center;}
:where(html.page-checkout) .revolut-mark{width:44px;height:44px;border-radius:12px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;flex-shrink:0;}
:where(html.page-checkout) .revolut-mark svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
:where(html.page-checkout) .revolut-panel b{font-size:15px;}
:where(html.page-checkout) .revolut-success{display:none;background:#f7f7f7;border:1.5px solid #d9d9d9;border-radius:var(--radius-l);padding:22px;max-width:460px;margin:18px auto 0;text-align:center;}
:where(html.page-checkout) .revolut-success.is-visible{display:block;}
:where(html.page-checkout) .revolut-success .revolut-mark{margin:0 auto 12px;}
:where(html.page-checkout) .revolut-success h3{font-family:var(--font-display);font-size:20px;margin:0 0 7px;}
:where(html.page-checkout) .revolut-success p{font-size:13.5px;color:var(--ink-soft);margin:0 0 16px;}
html.page-checkout .pay-option .pay-panel{border:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
@media(prefers-reduced-motion:reduce){
:where(html.page-checkout) .pay-panel.active{animation:none;}
}
:where(html.page-checkout) .offline-payment-success{display:none;background:#DDF4F2;border:1.5px solid var(--clay);border-radius:var(--radius-l);padding:24px;max-width:520px;margin:24px auto 0;text-align:left;}
:where(html.page-checkout) .offline-payment-success.is-visible{display:block;}
:where(html.page-checkout) .offline-payment-success h3{font-family:var(--font-display);font-size:20px;margin:0 0 14px;text-align:center;}
:where(html.page-checkout) .offline-payment-details{display:grid;gap:9px;}
:where(html.page-checkout) .offline-payment-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start;font-size:13.5px;}
:where(html.page-checkout) .offline-payment-row span{color:var(--ink-soft);}
:where(html.page-checkout) .offline-payment-row strong{color:var(--ink);overflow-wrap:anywhere;}
:where(html.page-checkout) .offline-payment-row.total strong{color:var(--clay-dark);font-size:16px;}
:where(html.page-checkout) .offline-payment-note{margin:15px 0 0!important;max-width:none!important;font-size:12.5px!important;line-height:1.6;color:var(--ink-soft)!important;text-align:left;}
:where(html.page-checkout) .revolut-pay-btn{display:flex;align-items:center;justify-content:center;width:100%;margin-top:20px;padding:14px 20px;border-radius:999px;background:#000;color:#fff;font-size:14px;font-weight:700;}
/* CARD FIELD */
:where(html.page-checkout) .card-number-wrap{position:relative;}
:where(html.page-checkout) .card-number-wrap input{padding-right:90px;}
:where(html.page-checkout) .card-icons{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;gap:4px;}
:where(html.page-checkout) .card-icon-pill{background:var(--cream-deep);border-radius:4px;padding:3px 7px;font-size:10px;font-weight:700;color:var(--ink-soft);}
/* SUMMARY CARD */
:where(html.page-checkout) .summary-card{grid-area:summary;background:var(--white);border-radius:var(--radius-l);padding:28px;box-shadow:var(--shadow-card);position:sticky;top:24px;}
:where(html.page-checkout) .summary-card h3{font-family:var(--font-display);font-size:20px;font-weight:500;margin:0 0 20px;}
:where(html.page-checkout) .order-items{display:flex;flex-direction:column;gap:14px;margin-bottom:20px;}
:where(html.page-checkout) .order-item{display:flex;align-items:center;gap:12px;}
:where(html.page-checkout) .order-item.is-gift{
position:relative;overflow:hidden;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;
width:calc(100% - 18px);min-height:80px;margin:2px 0 2px 18px;padding:8px 12px 8px 8px;
border:1px solid rgba(213,169,44,.48);border-radius:17px;
background:linear-gradient(115deg,#fff8df 0%,#fffdf7 52%,#fff 100%);
box-shadow:0 12px 30px -25px rgba(105,72,0,.75);
}
:where(html.page-checkout) .order-item.is-gift .order-thumb .th{width:64px;height:64px;border:0;border-radius:0;background:transparent;overflow:visible;}
:where(html.page-checkout) .order-item.is-gift .order-thumb .th img{width:100%;height:100%;padding:2px;object-fit:contain;mix-blend-mode:normal;}
:where(html.page-checkout) .order-item.is-gift .order-item-name{min-width:0;}
:where(html.page-checkout) .checkout-gift-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin:0 0 4px;color:#7b5000;font-size:10.5px;font-weight:850;letter-spacing:.045em;line-height:1.25;}
:where(html.page-checkout) .checkout-gift-kicker svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
:where(html.page-checkout) .order-item.is-gift .order-item-name>strong{display:block;color:var(--ink);font-size:13px;font-weight:750;line-height:1.35;}
:where(html.page-checkout) .checkout-gift-value{margin:4px 0 0;color:#88754c;font-size:10px;font-weight:500;line-height:1.35;}
:where(html.page-checkout) .checkout-gift-value del{text-decoration-thickness:1px;}
:where(html.page-checkout) .checkout-gift-confirmation{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;margin:12px 0 0;padding:10px 12px;border:1px solid rgba(7,138,147,.20);border-radius:12px;background:rgba(255,255,255,.72)}
:where(html.page-checkout) .checkout-gift-confirmation-image{width:64px;height:64px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
:where(html.page-checkout) .checkout-gift-confirmation-copy{min-width:0}
:where(html.page-checkout) .checkout-gift-confirmation-label{display:inline-flex;margin-bottom:4px;padding:3px 7px;border-radius:999px;background:#DDF4F2;color:var(--moss-dark);font-size:9px;font-weight:800;line-height:1.2;letter-spacing:.03em;text-transform:uppercase}
:where(html.page-checkout) .checkout-gift-confirmation-copy strong{display:block;color:var(--ink);font-size:13px;line-height:1.3}
:where(html.page-checkout) .checkout-gift-confirmation-copy small{display:block;margin-top:3px;color:var(--ink-soft);font-size:10.5px;font-weight:600;line-height:1.35}
:where(html.page-checkout) .checkout-gift-confirmation-free{color:var(--moss-dark);font-size:13px;font-weight:800;white-space:nowrap}
:where(html.page-checkout) .order-thumb{position:relative;flex-shrink:0;}
:where(html.page-checkout) .order-thumb .th{width:52px;height:52px;border-radius:var(--radius-s);background:var(--cream-deep);display:flex;align-items:center;justify-content:center;}
:where(html.page-checkout) .order-thumb .th svg{width:52%;height:52%;}
:where(html.page-checkout) .order-item-name{flex:1;font-size:13px;font-weight:600;line-height:1.3;}
:where(html.page-checkout) .order-item-price{font-weight:600;font-size:13.5px;white-space:nowrap;}
:where(html.page-checkout) .checkout-qty{display:inline-flex;align-items:center;margin-top:7px;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--white);}
:where(html.page-checkout) .checkout-qty button{width:28px;height:28px;border:none;background:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:background .15s,color .15s;}
:where(html.page-checkout) .checkout-qty button:hover{background:var(--cream-deep);color:var(--ink);}
:where(html.page-checkout) .checkout-qty span{width:26px;text-align:center;font-size:12px;font-weight:700;}
:where(html.page-checkout) .summary-divider{border:none;border-top:1px solid var(--line);margin:16px 0;}
:where(html.page-checkout) .summary-line{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-soft);margin-bottom:10px;}
:where(html.page-checkout) #cashOnDeliveryFeeLine[hidden]{display:none!important;}
:where(html.page-checkout) .summary-line b{color:var(--ink);font-weight:500;}
:where(html.page-checkout) .summary-line.discount b{color:var(--moss-dark);}
:where(html.page-checkout) .coupon-box{margin:12px 0 12px;}
:where(html.page-checkout) .coupon-box[hidden]{display:none!important;}
:where(html.page-checkout) .coupon-toggle{border:none;background:none;padding:0;margin:0;color:var(--moss-dark);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px;transition:color .2s;}
:where(html.page-checkout) .coupon-toggle:hover{color:var(--clay-dark);}
:where(html.page-checkout) .coupon-row{display:flex;gap:8px;align-items:center;}
:where(html.page-checkout) .coupon-row.is-hidden{display:none;}
:where(html.page-checkout) .coupon-row input{min-width:0;flex:1;min-height:40px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);padding:0 14px;font:inherit;font-size:13px;line-height:40px;color:var(--ink);}
:where(html.page-checkout) .coupon-row input:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(7, 138, 147,.10);}
:where(html.page-checkout) .coupon-row button{min-height:40px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);color:var(--moss-dark);padding:0 14px;font-size:12.5px;font-weight:700;line-height:40px;cursor:pointer;white-space:nowrap;transition:border-color .2s,background .2s,color .2s;}
:where(html.page-checkout) .coupon-row button:hover{border-color:var(--moss);background:var(--cream);}
:where(html.page-checkout) .coupon-msg{display:none;margin:7px 2px 0;font-size:12px;font-weight:600;line-height:1.35;}
:where(html.page-checkout) .coupon-msg.ok{display:block;color:var(--moss-dark);}
:where(html.page-checkout) .coupon-msg.err{display:block;color:#B42318;}
:where(html.page-checkout) .summary-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;}
:where(html.page-checkout) .summary-total-row span:first-child{font-size:15px;font-weight:700;}
:where(html.page-checkout) .summary-total-row span:last-child{font-family:var(--font-display);font-size:26px;font-weight:600;}
:where(html.page-checkout) .summary-vat{font-size:11.5px;color:var(--ink-soft);text-align:right;margin-top:4px;margin-bottom:20px;}
/* SUBMIT BTN */
:where(html.page-checkout) .submit-btn{width:100%;background:var(--moss);color:#fff;border:none;padding:16px;border-radius:999px;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease);display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;}
:where(html.page-checkout) .submit-btn:hover{background:var(--moss-dark);transform:translateY(-1px);}
:where(html.page-checkout) .submit-btn:active{transform:translateY(0);}
:where(html.page-checkout) .submit-btn:disabled{background:#A6A395;cursor:not-allowed;transform:none;}
:where(html.page-checkout) .mobile-submit-panel{display:none;}
:where(html.page-checkout) .checkout-terms-consent{margin:0 0 16px;padding:0;border:0;background:transparent;}
:where(html.page-checkout) .checkout-terms-consent label{display:flex;align-items:flex-start;gap:11px;min-height:44px;padding-block:4px;cursor:pointer;color:var(--ink);font-size:13px;line-height:1.55;}
:where(html.page-checkout) .checkout-terms-consent input{width:20px;height:20px;margin:1px 0 0;flex:0 0 20px;accent-color:var(--moss);cursor:pointer;}
:where(html.page-checkout) .checkout-terms-consent a{color:var(--moss-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
:where(html.page-checkout) .checkout-terms-consent a:hover{color:var(--moss);}
:where(html.page-checkout) .checkout-terms-consent strong{color:#a52a2a;}
:where(html.page-checkout) .checkout-terms-consent.is-invalid label{color:#9f1d16;}
:where(html.page-checkout) .checkout-terms-consent input:focus-visible{outline:3px solid rgba(7,138,147,.28);outline-offset:3px;}
:where(html.page-checkout) .checkout-terms-error{margin:8px 0 0 31px;color:#9f1d16;font-size:12px;font-weight:700;line-height:1.45;}
:where(html.page-checkout) .checkout-global-error{margin:0 0 20px;padding:14px 16px;border:1px solid #E7A49D;border-radius:12px;background:#FCEAE8;color:#8C2F27;font-size:14px;font-weight:700;line-height:1.5;}
:where(html.page-checkout) .secure-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--ink-soft);margin-bottom:16px;}
:where(html.page-checkout) .secure-note svg{width:13px;height:13px;stroke:var(--moss);}
:where(html.page-checkout) .terms-note{font-size:11.5px;color:var(--ink-soft);text-align:center;line-height:1.5;}
:where(html.page-checkout) .terms-note a{text-decoration:underline;color:var(--ink-soft);}
/* PREMIUM CHECKOUT */
:where(html.page-checkout) .checkout-body{padding:52px 0 88px;background:#fff;}
:where(html.page-checkout) .checkout-body>.wrap{max-width:1200px;}
:where(html.page-checkout) .checkout-intro{max-width:720px;margin-bottom:38px;}
:where(html.page-checkout) .checkout-intro h1{font-size:clamp(30px,3vw,42px);font-weight:650;letter-spacing:-.035em;}
:where(html.page-checkout) .checkout-intro p{font-size:15px;line-height:1.65;color:#6c6970;}
:where(html.page-checkout) .checkout-grid{grid-template-columns:minmax(0,1.08fr) minmax(390px,.82fr);gap:56px;}
:where(html.page-checkout) .forms-col{padding:6px 0;}
:where(html.page-checkout) .form-section{padding:0;margin:0 0 36px;border-radius:0;box-shadow:none;background:transparent;}
:where(html.page-checkout) .form-section-title{margin-bottom:18px;}
:where(html.page-checkout) .form-section-title h2{font-size:25px;font-weight:700;letter-spacing:-.025em;}
:where(html.page-checkout) .section-num{display:none;}
:where(html.page-checkout) .form-row{gap:16px;margin-bottom:14px;}
:where(html.page-checkout) .field{position:relative;gap:0;}
:where(html.page-checkout) .field label{position:absolute;z-index:2;left:14px;top:6px;font-size:11px;font-weight:500;color:#777681;pointer-events:none;letter-spacing:0;}
:where(html.page-checkout) .field input,:where(html.page-checkout) .field select,:where(html.page-checkout) .field textarea{min-height:52px;padding:19px 14px 6px;border:1px solid #cfd2d8;border-radius:9px;font-size:14.5px;background:#fff;}
:where(html.page-checkout) .field textarea{padding-top:21px;}
:where(html.page-checkout) .field input:focus,:where(html.page-checkout) .field select:focus,:where(html.page-checkout) .field textarea:focus{border-color:var(--moss);box-shadow:0 0 0 1px var(--moss);}
:where(html.page-checkout) .field .err-msg{margin:5px 2px 0;}
:where(html.page-checkout) .shipping-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
:where(html.page-checkout) .shipping-options .radio-card{min-height:52px;padding:10px 18px;border:1.5px solid #272328;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;}
:where(html.page-checkout) .shipping-options .radio-card.selected{background:#111;border-color:#111;color:#fff;}
:where(html.page-checkout) .shipping-options .radio-card-icon,:where(html.page-checkout) .shipping-options .radio-card-price,:where(html.page-checkout) .shipping-options .radio-dot{display:none!important;}
:where(html.page-checkout) .shipping-options .radio-card-label b{font-size:15px;font-weight:600;line-height:1.2;}
:where(html.page-checkout) .delivery-address-section{margin:0;padding:18px;border:1.5px solid var(--moss);border-radius:10px;background:#EFF8F7;}
:where(html.page-checkout) .delivery-address-section.is-office .form-row{grid-template-columns:1fr;}
:where(html.page-checkout) .delivery-address-section.is-office #speedyOfficeField,:where(html.page-checkout) .delivery-address-section.is-office .office-combobox,:where(html.page-checkout) .delivery-address-section.is-office #speedyOfficeSearch{width:100%;}
:where(html.page-checkout) .delivery-address-heading{font-size:16px;margin:16px 0 14px;}
:where(html.page-checkout) .speedy-delivery-card-head{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:16px;}
:where(html.page-checkout) .speedy-delivery-card-head img,:where(html.page-checkout) .speedy-delivery-card-head>svg{width:34px;height:42px;object-fit:contain;}
:where(html.page-checkout) #speedyOfficeHelp{display:none!important;}
:where(html.page-checkout) .speedy-delivery-card-head b{display:block;font-size:14.5px;line-height:1.25;}
:where(html.page-checkout) .speedy-delivery-card-head span{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px;}
:where(html.page-checkout) .speedy-delivery-card-head strong{font-size:14px;white-space:nowrap;}
:where(html.page-checkout) .office-results{top:calc(100% + 4px);padding:0;border-radius:8px;box-shadow:0 14px 34px rgba(30,29,26,.16);}
:where(html.page-checkout) .office-result{padding:12px 14px;border-radius:0;border-bottom:1px solid var(--line);}
:where(html.page-checkout) .office-result:last-child{border-bottom:0;}
:where(html.page-checkout) .checkout-continue-btn{width:100%;min-height:58px;margin:-12px 0 36px;border:0;border-radius:8px;background:linear-gradient(135deg,var(--moss),var(--moss-dark));color:#fff;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:filter .2s,transform .2s;}
:where(html.page-checkout) .checkout-continue-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
:where(html.page-checkout) .checkout-continue-btn[hidden]{display:none;}
:where(html.page-checkout) .checkout-payment-step[hidden]{display:none!important;}
:where(html.page-checkout) .checkout-payment-step{padding-top:32px;border-top:1px solid var(--line);animation:addressReveal .28s ease both;}
:where(html.page-checkout) .summary-card{padding:34px;background:#f5f5f7;border:1px solid #e2e3e7;border-radius:12px;box-shadow:none;top:22px;}
:where(html.page-checkout) .summary-card h3{font-size:22px;font-weight:700;letter-spacing:-.02em;}
:where(html.page-checkout) .order-item{display:grid;grid-template-columns:68px minmax(0,1fr) auto;align-items:start;gap:14px;}
:where(html.page-checkout) .order-thumb .th{width:68px;height:68px;border:1px solid #d9dbe0;border-radius:9px;background:#fff;}
:where(html.page-checkout) .order-item-name{font-size:14px;}
:where(html.page-checkout) .order-item-price{font-size:14px;padding-top:3px;}
:where(html.page-checkout) .checkout-qty{border-radius:8px;margin-top:9px;}
:where(html.page-checkout) .coupon-toggle{display:none!important;}
:where(html.page-checkout) .coupon-row,:where(html.page-checkout) .coupon-row.is-hidden{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;}
:where(html.page-checkout) .coupon-row input{min-height:50px;border-radius:8px;background:#fff;line-height:48px;}
:where(html.page-checkout) .coupon-row button{min-height:50px;border-radius:8px;background:#e4e5e9;color:#5f626c;line-height:48px;padding:0 20px;}
:where(html.page-checkout) .summary-divider{border-color:#d8d9dd;}
:where(html.page-checkout) .summary-line{font-size:14px;margin-bottom:14px;}
:where(html.page-checkout) .summary-total-row span:first-child{font-size:18px;}
:where(html.page-checkout) .summary-total-row span:last-child{font-size:25px;}
:where(html.page-checkout) .summary-card .submit-btn,:where(html.page-checkout) .summary-card>.secure-note{display:none;}
:where(html.page-checkout) .checkout-payment-step.is-visible~.mobile-submit-panel{display:block;}
/* SUCCESS SCREEN */
:where(html.page-checkout) .success-screen{display:none;text-align:center;padding:38px 20px 72px;outline:0;}
:where(html.page-checkout) .success-screen .check-circle{width:80px;height:80px;border-radius:50%;background:#FFF0DF;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
:where(html.page-checkout) .success-screen .check-circle svg{width:38px;height:38px;stroke:#F28C28;fill:none;}
:where(html.page-checkout) .success-screen .success-pending-icon{display:none;}
:where(html.page-checkout) .success-screen.is-submitting .success-check-icon{display:none;}
:where(html.page-checkout) .success-screen.is-submitting .success-pending-icon{display:block;animation:checkout-pending-spin .8s linear infinite;}
@keyframes checkout-pending-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
:where(html.page-checkout) .success-screen.is-submitting .success-pending-icon{animation:none;}
}
:where(html.page-checkout) .success-screen h1{font-family:var(--font-display);font-size:clamp(34px,4vw,50px);font-weight:560;line-height:1.12;letter-spacing:-.025em;margin:0 0 14px;}
:where(html.page-checkout) .success-screen h1 span{display:block;margin-top:6px;font-size:inherit;font-weight:650;}
:where(html.page-checkout) .success-screen p{color:var(--ink-soft);font-size:16px;max-width:500px;margin:0 auto;}
:where(html.page-checkout) .success-screen.has-upsell{padding-top:8px;text-align:left;}
:where(html.page-checkout) .success-screen.has-upsell .check-circle{display:none;}
:where(html.page-checkout) .success-screen.has-upsell h1{text-align:center;color:var(--moss-dark);max-width:860px;margin-left:auto;margin-right:auto;margin-bottom:22px;font-family:var(--font-body);font-size:clamp(34px,3.5vw,46px);font-weight:750;line-height:1.12;letter-spacing:-.03em;}
:where(html.page-checkout) .success-screen.has-upsell h1 span{margin-top:18px;color:var(--ink);font-size:clamp(32px,3.3vw,44px);font-weight:750;}
:where(html.page-checkout) .success-screen.has-upsell #successMessage{text-align:center;max-width:760px;font-size:clamp(18px,2vw,24px);font-weight:750;color:var(--ink);}
:where(html.page-checkout) .success-upsell-panel{max-width:1040px;margin:0 auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;}
:where(html.page-checkout) .success-upsell-panel[hidden]{display:none!important;}
:where(html.page-checkout) .success-upsell-head{text-align:center;margin:0 auto 18px;}
:where(html.page-checkout) .success-upsell-kicker{display:none;}
:where(html.page-checkout) .success-upsell-head h2{margin:0;color:var(--ink);font-family:var(--font-body);font-size:clamp(28px,3vw,38px);line-height:1.16;font-weight:750;letter-spacing:-.03em;}
:where(html.page-checkout) .success-upsell-head p{margin:9px auto 0;font-size:15px;line-height:1.45;color:var(--ink-soft);max-width:680px;}
:where(html.page-checkout) .success-upsell-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px;}
:where(html.page-checkout) .success-upsell-grid .checkout-upsell-option{min-height:130px;grid-template-columns:100px minmax(0,1fr);align-items:start;padding:14px;border-radius:22px;background:#fff;}
:where(html.page-checkout) .success-upsell-grid .checkout-upsell-image{width:100px;height:100px;border-radius:18px;}
:where(html.page-checkout) .success-upsell-grid .checkout-upsell-copy strong{font-size:15px;font-weight:750;line-height:1.32;}
:where(html.page-checkout) .success-upsell-grid .checkout-upsell-add-state{grid-column:2;justify-self:start;min-height:38px;margin-top:10px;}
:where(html.page-checkout) .success-upsell-selection{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 12px;padding:14px 16px;border-radius:16px;background:var(--cream);color:var(--ink-soft);font-size:14px;}
:where(html.page-checkout) .success-upsell-selection strong{color:var(--ink);font-size:18px;font-variant-numeric:tabular-nums;}
:where(html.page-checkout) .success-upsell-error{min-height:0!important;margin:0 0 10px!important;color:#B42318!important;font-size:13px!important;text-align:center!important;max-width:none!important;}
:where(html.page-checkout) .success-upsell-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;}
:where(html.page-checkout) .success-upsell-actions .checkout-upsell-skip{width:100%;min-width:0;margin-top:0;padding:0 18px;}
:where(html.page-checkout) .success-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
:where(html.page-checkout) .success-actions[hidden],
:where(html.page-checkout) .delivery-info[hidden]{display:none!important;}
:where(html.page-checkout) .success-actions a{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;font-size:14px;font-weight:700;transition:all .2s;}
:where(html.page-checkout) .success-actions .primary{background:var(--moss);color:#fff;}
:where(html.page-checkout) .success-actions .primary:hover{background:var(--moss-dark);}
:where(html.page-checkout) .success-actions .secondary{border:1.5px solid var(--line);color:var(--ink);}
:where(html.page-checkout) .success-actions .secondary:hover{background:var(--cream-deep);}
:where(html.page-checkout) .delivery-info{background:var(--cream);border-radius:var(--radius-l);padding:24px;max-width:460px;margin:32px auto 0;text-align:left;}
:where(html.page-checkout) .delivery-info h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:0 0 12px;}
:where(html.page-checkout) .delivery-step{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);}
:where(html.page-checkout) .delivery-step:last-child{border-bottom:none;}
:where(html.page-checkout) .delivery-step svg{width:18px;height:18px;stroke:var(--moss);fill:none;flex-shrink:0;}
:where(html.page-checkout) .delivery-step span{font-size:13.5px;}
/* Checkout upsell modal */
:where(html.page-checkout) body.checkout-upsell-open{overflow:hidden;}
:where(html.page-checkout) .checkout-upsell-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,34,36,.62);backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s var(--ease);}
:where(html.page-checkout) .checkout-upsell-modal.is-visible{opacity:1;visibility:visible;}
:where(html.page-checkout) .checkout-upsell-dialog{position:relative;width:min(720px,100%);max-height:min(780px,calc(100dvh - 40px));overflow:auto;overscroll-behavior:contain;padding:36px;border:1px solid rgba(7,138,147,.18);border-radius:24px;background:#fff;box-shadow:0 28px 80px rgba(8,34,36,.28);transform:translateY(14px) scale(.985);transition:transform .24s var(--ease);}
:where(html.page-checkout) .checkout-upsell-modal.is-visible .checkout-upsell-dialog{transform:translateY(0) scale(1);}
:where(html.page-checkout) .checkout-upsell-close{position:absolute;top:16px;right:16px;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease);}
:where(html.page-checkout) .checkout-upsell-close:hover{background:var(--cream);border-color:var(--moss);}
:where(html.page-checkout) .checkout-upsell-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
:where(html.page-checkout) .checkout-upsell-badge{display:block;margin:0 52px 10px 0;padding:0;background:transparent;color:var(--moss);font-size:16px;font-weight:800;line-height:1.3;letter-spacing:0;text-transform:none;}
:where(html.page-checkout) .checkout-upsell-dialog h2{margin:0 52px 22px 0;color:var(--ink);font-family:var(--font-display);font-size:clamp(25px,3.5vw,34px);font-weight:650;line-height:1.15;}
:where(html.page-checkout) .checkout-upsell-dialog>p{margin:0 52px 22px 0;color:var(--ink-soft);font-size:14px;line-height:1.55;}
:where(html.page-checkout) .checkout-upsell-list{display:grid;gap:10px;}
:where(html.page-checkout) .checkout-upsell-option{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:116px;padding:12px 14px;border:1.5px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);}
:where(html.page-checkout) .checkout-upsell-option:hover{border-color:rgba(7,138,147,.55);}
:where(html.page-checkout) .checkout-upsell-option.is-selected{border-color:var(--moss);background:rgba(221,244,242,.55);box-shadow:0 0 0 3px rgba(7,138,147,.1);}
:where(html.page-checkout) .checkout-upsell-option input{position:absolute;opacity:0;pointer-events:none;}
:where(html.page-checkout) .checkout-upsell-image{width:92px;height:92px;display:grid;place-items:center;border-radius:12px;background:var(--cream);overflow:hidden;}
:where(html.page-checkout) .checkout-upsell-image img{width:100%;height:100%;padding:5px;object-fit:contain;}
:where(html.page-checkout) .checkout-upsell-copy{min-width:0;}
:where(html.page-checkout) .checkout-upsell-copy strong{display:block;color:var(--ink);font-size:15px;line-height:1.35;}
:where(html.page-checkout) .checkout-upsell-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 9px;margin-top:8px;font-variant-numeric:tabular-nums;}
:where(html.page-checkout) .checkout-upsell-price del{color:var(--ink-soft);font-size:11.5px;font-weight:550;line-height:1.3;}
:where(html.page-checkout) .checkout-upsell-current-price{color:var(--moss-dark);font-size:15px;font-weight:850;line-height:1.3;}
:where(html.page-checkout) .checkout-upsell-add-state{min-width:94px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 13px;border:1.5px solid var(--moss);border-radius:999px;color:var(--moss-dark);background:#fff;font-size:12px;font-weight:800;white-space:nowrap;}
:where(html.page-checkout) .checkout-upsell-add-state::before{content:"+";font-size:18px;font-weight:500;line-height:1;}
:where(html.page-checkout) .checkout-upsell-option.is-selected .checkout-upsell-add-state{background:var(--moss);color:#fff;}
:where(html.page-checkout) .checkout-upsell-option.is-selected .checkout-upsell-add-state::before{content:"✓";font-size:14px;font-weight:800;}
:where(html.page-checkout) .checkout-upsell-selection{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 12px;padding:12px 14px;border-radius:12px;background:var(--cream);color:var(--ink-soft);font-size:12.5px;}
:where(html.page-checkout) .checkout-upsell-selection strong{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums;}
:where(html.page-checkout) .checkout-upsell-error{min-height:0!important;margin:0 0 8px!important;color:#B42318!important;font-size:12px!important;text-align:center;}
:where(html.page-checkout) .checkout-upsell-confirm,:where(html.page-checkout) .checkout-upsell-skip{width:100%;min-height:50px;border-radius:999px;font:800 14px var(--font-body);cursor:pointer;transition:background .18s var(--ease),opacity .18s var(--ease),transform .12s var(--ease);}
:where(html.page-checkout) .checkout-upsell-confirm{border:0;background:#e51b1f;color:#fff;box-shadow:0 10px 24px rgba(229,27,31,.22);}
:where(html.page-checkout) .checkout-upsell-confirm:hover:not(:disabled){background:#c91418;}
:where(html.page-checkout) .checkout-upsell-confirm:disabled{background:#e51b1f;opacity:.45;cursor:not-allowed;box-shadow:none;}
:where(html.page-checkout) .checkout-upsell-skip{margin-top:8px;border:0;background:transparent;color:var(--ink-soft);font-weight:650;}
:where(html.page-checkout) .checkout-upsell-skip:hover{color:var(--ink);background:var(--cream);}
:where(html.page-checkout) .checkout-upsell-confirm:active:not(:disabled),:where(html.page-checkout) .checkout-upsell-skip:active{transform:scale(.99);}
:where(html.page-checkout) .checkout-upsell-close:focus-visible,:where(html.page-checkout) .checkout-upsell-option:focus-within,:where(html.page-checkout) .checkout-upsell-confirm:focus-visible,:where(html.page-checkout) .checkout-upsell-skip:focus-visible{outline:3px solid rgba(7,138,147,.3);outline-offset:3px;}
@media(max-width:600px){
:where(html.page-checkout) .success-screen{padding:24px 0 52px;}
:where(html.page-checkout) .success-screen.has-upsell{padding-top:22px;}
:where(html.page-checkout) .success-screen .check-circle{width:72px;height:72px;margin-bottom:16px;}
:where(html.page-checkout) .success-screen .check-circle svg{width:34px;height:34px;}
:where(html.page-checkout) .success-screen h1{margin-bottom:10px;}
:where(html.page-checkout) .success-screen p{font-size:14px;line-height:1.5;}
:where(html.page-checkout) .success-screen.has-upsell #successMessage{font-size:17px;line-height:1.35;}
:where(html.page-checkout) .success-upsell-panel{margin-top:24px;padding:0;border-radius:0;}
:where(html.page-checkout) .success-upsell-grid{grid-template-columns:1fr;gap:10px;}
:where(html.page-checkout) .success-upsell-grid .checkout-upsell-option{grid-template-columns:78px minmax(0,1fr);min-height:102px;padding:10px;}
:where(html.page-checkout) .success-upsell-grid .checkout-upsell-image{width:78px;height:78px;border-radius:14px;}
:where(html.page-checkout) .success-upsell-grid .checkout-upsell-add-state{grid-column:1/-1;justify-self:stretch;}
:where(html.page-checkout) .success-upsell-actions{grid-template-columns:1fr;}
:where(html.page-checkout) .success-upsell-actions .checkout-upsell-skip{width:100%;}
:where(html.page-checkout) .revolut-success{margin-top:16px;padding:18px 16px;}
:where(html.page-checkout) .checkout-upsell-modal{align-items:flex-end;padding:0;}
:where(html.page-checkout) .checkout-upsell-dialog{width:100%;max-height:calc(100dvh - 12px);padding:28px 16px calc(18px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;}
:where(html.page-checkout) .checkout-upsell-close{top:12px;right:12px;}
:where(html.page-checkout) .checkout-upsell-badge{margin-right:46px;font-size:15px;}
:where(html.page-checkout) .checkout-upsell-dialog h2{margin-right:44px;font-size:25px;}
:where(html.page-checkout) .checkout-upsell-dialog>p{margin-right:0;font-size:13px;}
:where(html.page-checkout) .checkout-upsell-option{grid-template-columns:76px minmax(0,1fr);gap:12px;min-height:100px;padding:10px;}
:where(html.page-checkout) .checkout-upsell-image{width:76px;height:76px;}
:where(html.page-checkout) .checkout-upsell-copy strong{font-size:13.5px;}
:where(html.page-checkout) .checkout-upsell-add-state{grid-column:1/-1;width:100%;}
}
@media(prefers-reduced-motion:reduce){
:where(html.page-checkout) .checkout-upsell-modal,:where(html.page-checkout) .checkout-upsell-dialog{transition:none;}
}
/* FOOTER minimal */
/* RESPONSIVE */
@media(max-width:900px){
:where(html.page-checkout) .checkout-body{padding:28px 0 56px;}
:where(html.page-checkout) .checkout-grid{grid-template-columns:1fr;grid-template-areas:"summary" "forms";gap:20px;}
:where(html.page-checkout) .summary-card{position:static;order:0;}
:where(html.page-checkout) .summary-card .submit-btn,:where(html.page-checkout) .summary-card > .secure-note{display:none!important;}
:where(html.page-checkout) .mobile-submit-panel{display:block;background:transparent;border-radius:0;box-shadow:none;margin:20px 0 0;padding:0 0 calc(20px + env(safe-area-inset-bottom));}
:where(html.page-checkout) .mobile-submit-panel[hidden]{display:none!important;}
:where(html.page-checkout) .mobile-submit-panel .submit-btn{margin:0;min-height:52px;}
:where(html.page-checkout) .checkout-terms-consent{margin-bottom:14px;padding:0;}
:where(html.page-checkout) .checkout-terms-consent label{font-size:12.5px;}
:where(html.page-checkout) .mobile-submit-panel .secure-note{margin:12px 0 0;}
}
@media(min-width:901px){
:where(html.page-checkout) .mobile-submit-panel{display:block!important;background:transparent;box-shadow:none;padding:0;margin:0;}
:where(html.page-checkout) .mobile-submit-panel[hidden]{display:none!important;}
}
@media(max-width:600px){
:where(html.page-checkout) .offline-payment-success{padding:20px 16px;}
:where(html.page-checkout) .offline-payment-row{grid-template-columns:1fr;gap:2px;}
:where(html.page-checkout) .wrap{padding:0 16px;}
:where(html.page-checkout) .checkout-intro{margin-bottom:20px;}
:where(html.page-checkout) .checkout-intro h1{font-size:29px;}
:where(html.page-checkout) .checkout-intro p{font-size:14px;}
:where(html.page-checkout) .form-section{padding:0;}
:where(html.page-checkout) .form-row{grid-template-columns:1fr;}
:where(html.page-checkout) .form-row.triple{grid-template-columns:1fr 1fr;}
:where(html.page-checkout) .pay-tabs{grid-template-columns:1fr;gap:0;margin-bottom:12px;}
:where(html.page-checkout) .pay-tab{min-width:0;min-height:58px;padding:12px 13px;gap:10px;font-size:13px;line-height:1.3;}
:where(html.page-checkout) .pay-tab svg{width:22px;height:22px;flex-basis:22px;}
:where(html.page-checkout) .pay-radio{width:19px;height:19px;flex-basis:19px;}
:where(html.page-checkout) .pay-radio::after{width:9px;height:9px;}
:where(html.page-checkout) .payment-method-note{padding:13px 14px 15px 64px;}
:where(html.page-checkout) .payment-method-note p{font-size:12px;line-height:1.5;}
:where(html.page-checkout) .revolut-panel{gap:11px;align-items:center;}
:where(html.page-checkout) .revolut-mark{width:38px;height:38px;border-radius:10px;}
:where(html.page-checkout) .revolut-mark svg{width:21px;height:21px;}
:where(html.page-checkout) .shipping-options{gap:6px;}
:where(html.page-checkout) .shipping-options .radio-card{padding:11px 5px;gap:6px;border-radius:10px;}
:where(html.page-checkout) .shipping-options .radio-card-icon{width:32px;height:32px;}
:where(html.page-checkout) .shipping-options .radio-card-icon.speedy-brand{width:32px;height:32px;padding:5px;}
:where(html.page-checkout) .shipping-options .radio-card-icon.speedy-brand img{width:22px;}
:where(html.page-checkout) .shipping-options .radio-card-label b{font-size:10.5px;line-height:1.2;}
:where(html.page-checkout) .shipping-options .radio-card-price{font-size:9.5px;line-height:1.2;}
:where(html.page-checkout) .delivery-address-section{margin-top:18px;padding-top:18px;}
:where(html.page-checkout) .delivery-address-heading{font-size:16px;margin-bottom:16px;}
:where(html.page-checkout) .summary-card{padding:22px 18px;border-radius:22px;}
:where(html.page-checkout) .summary-card h3{font-size:19px;margin-bottom:18px;}
:where(html.page-checkout) .order-item{align-items:flex-start;}
:where(html.page-checkout) .order-item-price{font-size:12px;padding-top:3px;}
:where(html.page-checkout) .coupon-box{margin:10px 0 12px;}
:where(html.page-checkout) .coupon-row{gap:6px;}
:where(html.page-checkout) .coupon-row input{padding:0 12px;font-size:12.5px;line-height:40px;}
:where(html.page-checkout) .coupon-row button{padding:0 12px;font-size:12px;line-height:40px;}
:where(html.page-checkout) .summary-total-row{align-items:flex-start;gap:12px;}
:where(html.page-checkout) .summary-total-row span:last-child{font-size:24px;text-align:right;line-height:1.15;}
:where(html.page-checkout) .submit-btn{white-space:normal;line-height:1.25;padding:15px 18px;}
:where(html.page-checkout) .mobile-submit-panel{margin-top:18px;border-radius:22px;padding:18px 16px calc(18px + env(safe-area-inset-bottom));}
}
/* ===== contacts.html base styles (scoped) ===== */
:where(html.page-contacts) *{box-sizing:border-box;}
html:where(.page-contacts){scroll-behavior:smooth;}
:where(html.page-contacts) body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5;}
:where(html.page-contacts) button,:where(html.page-contacts) input,:where(html.page-contacts) textarea,:where(html.page-contacts) select{font-family:inherit;}
:where(html.page-contacts) a{color:inherit;text-decoration:none;}
:where(html.page-contacts) a:focus-visible,:where(html.page-contacts) button:focus-visible,:where(html.page-contacts) input:focus-visible,:where(html.page-contacts) textarea:focus-visible,:where(html.page-contacts) select:focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:4px;}
:where(html.page-contacts) .wrap{max-width:1360px;margin:0 auto;padding:0 32px;}
:where(html.page-contacts) .hero{background:linear-gradient(108deg,var(--moss-dark) 0%,var(--moss) 60%,#078A93 100%);color:#fff;padding:48px 0 52px;position:relative;overflow:hidden;}
:where(html.page-contacts) .hero::before{content:"";position:absolute;right:-100px;top:-130px;width:440px;height:440px;border-radius:50%;background:rgba(141, 217, 216,.16);}
:where(html.page-contacts) .hero::after{content:"";position:absolute;right:230px;bottom:-120px;width:250px;height:250px;border-radius:50%;background:rgba(25, 181, 189,.12);}
:where(html.page-contacts) .hero-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
:where(html.page-contacts) .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:12px;}
:where(html.page-contacts) .hero h1{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);line-height:1.1;margin:0 0 10px;font-weight:450;letter-spacing:0;max-width:620px;}
:where(html.page-contacts) .hero p{margin:0;color:rgba(220,227,211,.78);font-size:15px;max-width:480px;}
:where(html.page-contacts) .hero-actions{display:flex;gap:10px;flex-wrap:wrap;}
:where(html.page-contacts) .hero-action{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-m);padding:16px 20px;font-size:13px;font-weight:600;}
:where(html.page-contacts) .hero-action svg{width:16px;height:16px;stroke:currentColor;fill:none;}
:where(html.page-contacts) .contact-main{padding:38px 0 90px;background:var(--white);}
:where(html.page-contacts) .contact-grid{display:block;}
:where(html.page-contacts) .form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-card);}
:where(html.page-contacts) .form-card{padding:28px;}
:where(html.page-contacts) .form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px;}
:where(html.page-contacts) .form-head h2{font-size:22px;line-height:1.2;margin:0 0 8px;font-weight:600;}
:where(html.page-contacts) .form-head p{margin:0;color:var(--ink-soft);font-size:14.5px;max-width:520px;}
:where(html.page-contacts) .response-pill{display:inline-flex;align-items:center;gap:7px;background:var(--sage-light);color:var(--moss-dark);border-radius:999px;padding:6px 11px;font-size:11.5px;font-weight:700;white-space:nowrap;}
:where(html.page-contacts) .response-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--moss);}
:where(html.page-contacts) .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
:where(html.page-contacts) .field{display:flex;flex-direction:column;gap:7px;}
:where(html.page-contacts) .field.full{grid-column:1/-1;}
:where(html.page-contacts) .field label{font-size:14px;line-height:1.4;font-weight:700;color:var(--ink);}
:where(html.page-contacts) .field input,:where(html.page-contacts) .field textarea,:where(html.page-contacts) .field select{width:100%;border:1.5px solid var(--line);background:var(--white);border-radius:var(--radius-m);padding:13px 15px;font-size:16px;color:var(--ink);transition:border-color .2s,box-shadow .2s;}
:where(html.page-contacts) .field textarea{min-height:130px;resize:vertical;}
:where(html.page-contacts) .field input:focus,:where(html.page-contacts) .field textarea:focus,:where(html.page-contacts) .field select:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(7, 138, 147,.12);}
:where(html.page-contacts) .form-footer{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:20px;}
:where(html.page-contacts) .contact-email{margin:18px 0 0;text-align:center;font-size:14px;color:var(--ink-soft);}
:where(html.page-contacts) .contact-email a{font-weight:700;color:var(--moss-dark);}
:where(html.page-contacts) .contact-email a:hover{text-decoration:underline;}
:where(html.page-contacts) .submit-btn{border:none;background:var(--moss);color:#fff;border-radius:999px;padding:14px 24px;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background .2s var(--ease),transform .2s var(--ease);}
:where(html.page-contacts) .submit-btn:hover{background:var(--moss-dark);transform:translateY(-1px);}
:where(html.page-contacts) .submit-btn:disabled{opacity:.65;cursor:wait;transform:none;}
:where(html.page-contacts) .submit-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;}
:where(html.page-contacts) .contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;}
@media(max-width:960px){
:where(html.page-contacts) .nav{padding:10px 14px;gap:10px;}
:where(html.page-contacts) .logo{font-size:21px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
:where(html.page-contacts) .nav-actions{gap:4px;}
:where(html.page-contacts) .icon-btn{width:42px;height:42px;}
:where(html.page-contacts) .nav-links{display:none;}
:where(html.page-contacts) .burger{display:flex;background:none;border:none;cursor:pointer;align-items:center;justify-content:center;}
:where(html.page-contacts) .footer-grid{grid-template-columns:1fr 1fr;}
:where(html.page-contacts) .footer-grid>div:first-child{grid-column:1/-1;}
}
@media(max-width:560px){
:where(html.page-contacts) .wrap{padding:0 20px;}
:where(html.page-contacts) .nav{padding:10px 14px;}
:where(html.page-contacts) .logo{font-size:20px;}
:where(html.page-contacts) .hero{padding:32px 0 36px;}
:where(html.page-contacts) .hero-actions,:where(html.page-contacts) .form-footer{flex-direction:column;align-items:stretch;}
:where(html.page-contacts) .hero-action,:where(html.page-contacts) .submit-btn{justify-content:center;width:100%;}
:where(html.page-contacts) .contact-main{padding:28px 0 70px;}
:where(html.page-contacts) .form-card{padding:22px 18px;}
:where(html.page-contacts) .form-head{flex-direction:column;}
:where(html.page-contacts) .form-grid{grid-template-columns:1fr;}
:where(html.page-contacts) .footer-grid{grid-template-columns:1fr;}
}
/* ===== reviews.html base styles (scoped) ===== */
:where(html.page-reviews) *{box-sizing:border-box}
html:where(.page-reviews){scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(html.page-reviews) body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5}
:where(html.page-reviews) img{max-width:100%;display:block}:where(html.page-reviews) button{font-family:inherit}:where(html.page-reviews) a{color:inherit;text-decoration:none}
:where(html.page-reviews) a:focus-visible,:where(html.page-reviews) button:focus-visible,:where(html.page-reviews) [tabindex]:focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:4px}
/* ===== Shared global design system ===== */
/* Kavrakovi global storefront stylesheet.
Single source of truth for tokens, typography, surfaces, components,
responsive behavior and the turquoise crystal visual system. */
/* ===== Foundation: tokens and interaction states ===== */
/* Global foundation tokens. Page surfaces and components live below in this file. */
:root {
/* Brand palette. */
--crystal-deep: #075E66;
--crystal: #078A93;
--crystal-bright: #19B5BD;
--sale-badge: #B8322A;
--sale-badge-text: #FFFFFF;
--commerce-final-action: #E51B1F;
--commerce-final-action-hover: #C91418;
--commerce-final-action-rgb: 229, 27, 31;
--price-previous: #C9342C;
--price-savings: #078A93;
--aqua: #8DD9D8;
--mint: #DDF4F2;
--pearl: #FAFCFC;
--hero-cream: #F6F1E7;
--hero-cream-rgb: 246, 241, 231;
--silver: #DCE5E8;
--graphite: #181818;
--crystal-rgb: 7, 138, 147;
--graphite-rgb: 20, 58, 62;
/* Compatibility aliases used by existing component markup. */
--moss: var(--crystal);
--moss-dark: var(--crystal-deep);
--clay: var(--crystal-bright);
--clay-dark: var(--crystal-deep);
--sage: var(--aqua);
--sage-light: var(--mint);
--cream: var(--pearl);
--cream-deep: #EFF7F7;
--ink: var(--graphite);
--ink-soft: #666666;
--white: #FFFFFF;
--line: rgba(var(--graphite-rgb), .11);
--red: var(--crystal-deep);
/* Typography. */
--font-display: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--landing-heading-size: clamp(30px, 3.5vw, 44px);
--landing-heading-weight: 500;
--landing-heading-line-height: 1.06;
--landing-heading-tracking: normal;
--landing-body-size: 16px;
--landing-body-line-height: 1.6;
--type-xs: 11px;
--type-sm: 12px;
--type-label: 12.5px;
--type-body: 14px;
--type-body-lg: 15px;
--type-title: 18px;
--type-heading: clamp(24px, 3vw, 34px);
--type-page: clamp(28px, 4vw, 42px);
/* Brand semantics. */
--brand-primary: var(--crystal);
--brand-primary-dark: var(--crystal-deep);
--brand-accent: var(--crystal-bright);
--brand-accent-soft: var(--mint);
--content-link: #005FC6;
--content-link-hover: #00458F;
--brand-surface: var(--pearl);
--brand-surface-strong: #EFF8F7;
--brand-on-surface: var(--graphite);
--brand-on-surface-muted: #666666;
--brand-gradient: linear-gradient(135deg, #19B5BD 0%, #078A93 50%, #075E66 100%);
--brand-gradient-hover: linear-gradient(135deg, #36C8CE 0%, #0798A1 48%, #064E55 100%);
/* Page and component surfaces. */
--page-background: #FFFFFF;
--section-white: #FFFFFF;
--section-soft: #F1F9F8;
--section-line: rgba(var(--graphite-rgb), .09);
--control-background: rgba(255, 255, 255, .96);
--control-border: rgba(var(--crystal-rgb), .22);
--control-focus-ring: 0 0 0 4px rgba(25, 181, 189, .14);
--focus-outline: 3px solid rgba(25, 181, 189, .52);
--focus-offset: 3px;
/* Restrained glass and elevation. */
--glass-background: rgba(250, 252, 252, .82);
--glass-background-strong: rgba(255, 255, 255, .94);
--glass-border: rgba(255, 255, 255, .94);
--glass-blur: blur(14px) saturate(118%);
--glass-shadow: 0 18px 45px -34px rgba(7, 94, 102, .34),
0 1px 0 rgba(255, 255, 255, .95) inset,
0 0 0 1px rgba(7, 138, 147, .08);
--glass-shadow-hover: 0 25px 54px -32px rgba(7, 94, 102, .42),
0 1px 0 #FFFFFF inset,
0 0 0 1px rgba(25, 181, 189, .2);
--shadow-card: var(--glass-shadow);
--shadow-card-hover: var(--glass-shadow-hover);
--shadow-pop: 0 30px 75px -34px rgba(7, 94, 102, .48);
/* Shared controls and panels. */
--toast-background: var(--graphite);
--toast-shadow: 0 18px 46px -14px rgba(7, 94, 102, .36);
--side-panel-background: rgba(250, 252, 252, .98);
--side-panel-shadow: -22px 0 65px -34px rgba(7, 94, 102, .5);
--side-panel-overlay: rgba(20, 58, 62, .38);
--side-panel-width: min(400px, 92vw);
--side-panel-head-height: 66px;
--side-panel-head-padding: 20px 24px;
--side-panel-title-size: 17px;
--side-panel-title-weight: 500;
--side-panel-close-size: 44px;
--radius-s: 10px;
--radius-m: 18px;
--radius-l: 30px;
--ease: cubic-bezier(.22, .61, .36, 1);
}
/* Shared commerce price treatment: product lists, cart drawer, cart and checkout. */
.commerce-price{
display:inline-flex;
flex-wrap:wrap;
align-items:baseline;
justify-content:flex-end;
gap:3px 8px;
color:var(--ink);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.commerce-price-old{
color:var(--price-previous);
font-family:inherit;
font-size:.875em;
font-weight:600;
line-height:1.2;
text-decoration-color:currentColor;
text-decoration-line:line-through;
text-decoration-thickness:1.5px;
}
/* One global treatment for every visible previous/struck-through price. */
:where(del, s, .price-old, .price .old, .old-price, .commerce-price-old){
color:var(--price-previous)!important;
text-decoration-color:currentColor!important;
}
.commerce-price-current{
color:var(--ink)!important;
font-family:inherit;
font-size:1em;
font-weight:inherit;
line-height:1.2;
}
.commerce-order-savings{
margin:8px 0 14px;
color:var(--price-savings);
font-size:12.5px;
font-weight:650;
line-height:1.4;
}
.commerce-order-savings[hidden]{display:none!important;}
.commerce-order-savings strong{font-weight:850;}
:where(html.page-cart) .summary-card .commerce-order-savings,
:where(html.page-checkout) .summary-card .commerce-order-savings{text-align:right;}
:where(html.page-cart) .item-price .commerce-price,
:where(html.page-cart) .item-total .commerce-price,
:where(html.page-checkout) .order-item-price .commerce-price{max-width:100%;}
body {
color: var(--ink);
}
.card,
.product-card,
.contact-card,
.form-section,
.summary-card,
.section-icon-card,
.section-step {
border-color: var(--line);
}
.product-badge:not(.sold),
.purchase-save,
.response-pill,
.nat-pill {
background: var(--brand-accent-soft);
color: var(--brand-primary-dark);
}
.logo span,
.nav-links a.active,
.nav-links .site-products-main-link.active,
.mobile-menu a.active,
.breadcrumb a:hover,
.remove-btn:hover,
.item-remove:hover {
color: var(--brand-primary);
}
.nav-links a.active::after,
.nav-links .site-products-main-link.active::after,
.cart-count,
.response-pill::before,
.purchase-option.is-selected .purchase-radio::after {
background: var(--brand-primary);
}
.icon-btn:hover,
.icon-btn.is-active,
.qty-ctrl button:hover,
.thumb-btn:hover {
background-color: var(--brand-surface-strong);
}
.icon-btn.is-active,
.icon-btn.is-active svg,
.section-icon-card::before,
.subscription-benefit svg {
color: var(--brand-primary);
stroke: var(--brand-primary);
}
.purchase-option.is-selected,
.radio-card.selected,
.pay-tab.active,
.cat-tab.is-active,
.maincat-btn.is-active {
border-color: var(--brand-primary);
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--brand-primary);
box-shadow: var(--control-focus-ring);
}
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not(.success-screen)):focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
:where(button, summary, [role="button"]):not(:disabled) {
cursor: pointer;
}
::selection {
background: rgba(25, 181, 189, .22);
color: var(--brand-primary-dark);
}
/* One primary-action treatment across the public site. */
.btn-primary,
.submit-btn,
.checkout-btn,
.quick-add button,
.quick-add .quick-view-link,
[data-add],
[data-product-add],
.upsell-add,
.empty-cart a,
.not-found a,
.program-link,
.hero-cta,
.elixir-btn,
.newsletter button,
button[type="submit"] {
background: var(--brand-gradient);
border-color: transparent;
color: #fff;
box-shadow: 0 10px 24px rgba(7, 94, 102, .18);
transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.quick-add .quick-view-link{
width:100%;min-height:44px;padding:10px 14px;border:0;border-radius:999px;
display:flex;align-items:center;justify-content:center;gap:7px;
font-size:12.5px;font-weight:600;line-height:1.2;letter-spacing:.01em;text-decoration:none;
}
/* Shared interaction sizing: every primary shopping action must remain easy
to tap on touch screens, regardless of the page-specific card layout. */
.quick-add button,
.quick-add .quick-view-link,
[data-product-add],
.sticky-purchase-mode,
.top-sort select {
min-height: 44px;
}
.product-qty button {
min-width: 44px;
min-height: 44px;
}
.btn-primary:hover,
.submit-btn:hover,
.checkout-btn:hover,
.quick-add button:hover,
.quick-add .quick-view-link:hover,
[data-add]:hover,
[data-product-add]:hover,
.upsell-add:hover,
.empty-cart a:hover,
.not-found a:hover,
.program-link:hover,
.hero-cta:hover,
.elixir-btn:hover,
.newsletter button:hover,
button[type="submit"]:hover {
background: var(--brand-gradient-hover);
box-shadow: 0 14px 30px rgba(7, 94, 102, .26);
}
.btn-primary:active,
.submit-btn:active,
.checkout-btn:active,
.quick-add .quick-view-link:active,
[data-add]:active,
[data-product-add]:active,
.upsell-add:active {
transform: translateY(1px) scale(.99);
}
.btn-primary:focus-visible,
.submit-btn:focus-visible,
.checkout-btn:focus-visible,
[data-add]:focus-visible,
[data-product-add]:focus-visible,
.upsell-add:focus-visible {
outline: 3px solid rgba(25, 181, 189, .48);
outline-offset: 3px;
}
/* One feedback component across cart, catalogue, product and contact pages. */
.toast {
position: fixed;
z-index: 140;
right: auto;
bottom: 28px;
left: 50%;
display: flex;
align-items: center;
gap: 10px;
max-width: min(440px, calc(100vw - 32px));
padding: 12px 20px;
border: 0;
border-radius: 999px;
background: var(--toast-background);
color: #FFFFFF;
box-shadow: var(--toast-shadow);
font-size: 13.5px;
font-weight: 600;
line-height: 1.4;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 16px);
transition: opacity .24s ease, transform .24s ease;
}
.toast.is-show {
opacity: 1;
transform: translate(-50%, 0);
}
.toast svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
/* One compact subscription treatment for every product-card context. */
/* Solid inputs and 16px mobile type prevent Safari from zooming form controls. */
:where(
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea
) {
background-color: var(--control-background);
}
button:disabled,
[data-add]:disabled,
[data-product-add]:disabled {
box-shadow: none;
cursor: not-allowed;
}
@media (max-width: 520px) {
:root {
--side-panel-head-height: 62px;
--side-panel-head-padding: 18px 20px;
}
}
/* Homepage promotional carousel — 3:1 desktop artwork and dedicated 4:5
mobile artwork. Copy stays in HTML for clarity, accessibility and editing. */
:where(html.page-home) .home-campaign-slider {
position: relative;
isolation: isolate;
width: 100%;
aspect-ratio: 3 / 1;
overflow: hidden;
background: #f3f4ea;
}
:where(html.page-home) .home-campaign-slider-viewport {
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
overscroll-behavior-inline: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
:where(html.page-home) .home-campaign-slider-viewport::-webkit-scrollbar { display: none; }
:where(html.page-home) .home-campaign-slider-viewport:focus-visible { outline: 3px solid #087f86; outline-offset: -3px; }
:where(html.page-home) .home-campaign-slider-track {
display: flex;
width: 100%;
height: 100%;
}
:where(html.page-home) .home-campaign-slide {
position: relative;
isolation: isolate;
flex: 0 0 100%;
width: 100%;
height: 100%;
overflow: hidden;
scroll-snap-align: start;
scroll-snap-stop: always;
}
:where(html.page-home) .home-campaign-slide-visual {
position: absolute;
z-index: -1;
inset: 0;
display: block;
}
:where(html.page-home) .home-campaign-slide-visual img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:where(html.page-home) .home-campaign-slide-inner {
display: flex;
align-items: center;
height: 100%;
}
:where(html.page-home) .home-campaign-slide-copy {
width: min(49%, 760px);
padding: clamp(18px, 2.1vw, 40px) 0;
}
:where(html.page-home) .home-campaign-slide h1,
:where(html.page-home) .home-campaign-slide h2 {
max-width: 760px;
margin: 0;
color: #173c3e;
font-family: var(--font-display);
font-size: clamp(24px, 2.55vw, 49px);
font-weight: 760;
line-height: 1.02;
letter-spacing: -.045em;
text-transform: uppercase;
text-wrap: balance;
}
:where(html.page-home) .home-campaign-slide p {
max-width: 650px;
margin: clamp(9px, 1vw, 19px) 0 0;
color: #425d5e;
font-size: clamp(12px, 1vw, 18px);
font-weight: 520;
line-height: 1.42;
}
:where(html.page-home) .home-campaign-slide-copy > strong {
display: block;
max-width: 680px;
margin-top: clamp(4px, .45vw, 8px);
color: #0b686d;
font-size: clamp(14px, 1.2vw, 22px);
font-weight: 820;
line-height: 1.28;
letter-spacing: -.02em;
text-wrap: balance;
}
:where(html.page-home) .home-campaign-slide-cta {
width: fit-content;
min-height: clamp(44px, 3.5vw, 54px);
margin-top: clamp(12px, 1.2vw, 22px);
padding: clamp(10px, .9vw, 15px) clamp(18px, 1.65vw, 28px);
}
:where(html.page-home) .home-campaign-slide--problem h2 {
width: min(100%, 650px);
font-size: clamp(29px, 3.35vw, 62px);
}
:where(html.page-home) .home-campaign-slider-dots {
position: absolute;
z-index: 4;
left: 50%;
bottom: 6px;
display: flex;
transform: translateX(-50%);
}
:where(html.page-home) .home-campaign-slider-dot {
display: grid;
width: 44px;
height: 44px;
padding: 0;
place-items: center;
border: 0;
background: transparent;
cursor: pointer;
touch-action: manipulation;
}
:where(html.page-home) .home-campaign-slider-dot span {
display: block;
width: 11px;
height: 11px;
border: 2px solid rgba(20,58,62,.82);
border-radius: 50%;
background: rgba(255,255,255,.95);
box-shadow: 0 1px 5px rgba(20,58,62,.24);
transition: width .2s ease, border-color .2s ease, background .2s ease;
}
:where(html.page-home) .home-campaign-slider-dot.is-active span {
width: 25px;
border-radius: 999px;
border-color: #0d665f;
background: #0d665f;
}
:where(html.page-home) .home-campaign-slider-dot:focus-visible { outline: 3px solid #087f86; outline-offset: -5px; border-radius: 999px; }
@media (max-width: 760px) {
:where(html.page-home) .home-campaign-slider { aspect-ratio: 4 / 5; }
:where(html.page-home) .home-campaign-slide-inner {
align-items: flex-start;
justify-content: center;
padding: clamp(24px, 6.5vw, 34px) 18px 48px;
text-align: center;
}
:where(html.page-home) .home-campaign-slide-copy {
width: min(100%, 470px);
padding: 0;
}
:where(html.page-home) .home-campaign-slide h1,
:where(html.page-home) .home-campaign-slide h2 {
font-size: clamp(25px, 7.3vw, 34px);
line-height: 1.02;
letter-spacing: -.04em;
}
:where(html.page-home) .home-campaign-slide p {
max-width: 390px;
margin: 12px auto 0;
font-size: clamp(13px, 3.5vw, 16px);
line-height: 1.38;
}
:where(html.page-home) .home-campaign-slide-copy > strong {
max-width: 390px;
margin: 5px auto 0;
font-size: clamp(14px, 3.75vw, 17px);
}
:where(html.page-home) .home-campaign-slide-cta {
min-height: 48px;
margin: 16px auto 0;
padding: 12px 20px;
font-size: 12px;
}
:where(html.page-home) .home-campaign-slide--problem h2 {
max-width: 360px;
margin-inline: auto;
font-size: clamp(28px, 8vw, 37px);
}
:where(html.page-home) .home-campaign-slide--zeitgard .home-campaign-slide-inner {
padding-top: 12px;
}
:where(html.page-home) .home-campaign-slide--zeitgard h1 {
font-size: clamp(19px, 5.5vw, 22px);
line-height: 1.04;
letter-spacing: -.03em;
}
:where(html.page-home) .home-campaign-slide--zeitgard p {
max-width: 350px;
margin-top: 7px;
font-size: clamp(12px, 3.15vw, 14px);
line-height: 1.28;
}
:where(html.page-home) .home-campaign-slide--zeitgard .home-campaign-slide-copy > strong {
max-width: 350px;
margin-top: 3px;
font-size: clamp(12px, 3.25vw, 14px);
line-height: 1.2;
}
:where(html.page-home) .home-campaign-slide--zeitgard .home-campaign-slide-cta {
min-height: 44px;
margin-top: 8px;
padding-block: 9px;
}
}
@media (max-width: 380px) {
:where(html.page-home) .home-campaign-slide-inner { padding-top: 20px; }
:where(html.page-home) .home-campaign-slide h1 { font-size: 24px; }
:where(html.page-home) .home-campaign-slide--zeitgard .home-campaign-slide-inner { padding-top: 10px; }
:where(html.page-home) .home-campaign-slide--zeitgard h1 { font-size: 19px; }
:where(html.page-home) .home-campaign-slide p { margin-top: 9px; font-size: 13px; }
:where(html.page-home) .home-campaign-slide--zeitgard p { margin-top: 6px; font-size: 12px; }
:where(html.page-home) .home-campaign-slide-copy > strong { font-size: 14px; }
:where(html.page-home) .home-campaign-slide--zeitgard .home-campaign-slide-copy > strong { font-size: 12px; }
:where(html.page-home) .home-campaign-slide-cta { min-height: 44px; margin-top: 12px; }
:where(html.page-home) .home-campaign-slide--zeitgard .home-campaign-slide-cta { margin-top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
:where(html.page-home) .home-campaign-slider-viewport { scroll-behavior: auto; }
:where(html.page-home) .home-campaign-slider-dot span { transition: none; }
}
@media (max-width: 860px) {
.icon-btn,
.burger,
.site-side-panel-close {
min-width: 44px;
min-height: 44px;
}
:where(
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea
) {
font-size: 16px;
}
/* Mobile feedback stays visible above either drawer without covering its CTA. */
.toast,
.toast.is-show {
top: 50%;
right: auto;
bottom: auto;
left: 50%;
width: min(360px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
margin: 0;
white-space: normal;
text-align: left;
z-index: 140;
}
.toast { transform: translate(-50%, -50%) scale(.96); }
.toast.is-show { transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
:where(.toast, .site-side-panel, .site-side-panel-overlay, .card, .product-card, .btn-primary, .submit-btn, .checkout-btn) {
transition-duration: .01ms;
animation-duration: .01ms;
animation-iteration-count: 1;
}
}
/* ===== Typography ===== */
/* Unified storefront typography — compact, commerce-first, Shopify-inspired. */
html{font-size:16px}
body{font-size:var(--type-body);line-height:1.55;letter-spacing:-.005em}
button,input,select,textarea{font-size:var(--type-body)}
/* Global commerce chrome */
.logo{font-size:22px!important;line-height:1.1}
.nav-links a,.nav-links .site-products-main-link{font-size:13px!important}
.mobile-menu a{font-size:14px!important}
.breadcrumb{font-size:var(--type-sm)!important}
.footer-logo{font-size:18px!important}
.footer-col h4{font-size:11.5px!important}
.footer-col a,.footer-col p,.footer-bottom{font-size:var(--type-sm)!important}
/* Page and section hierarchy */
.store-banner h1,.page-title-block h1,.checkout-intro h1,.contacts-page .hero h1,.contact-hero h1{font-size:var(--type-page)!important;line-height:1.08}
.store-head h2,.section-head h2,.section-head h3,.related-section h2,.product-section-head h2,.product-reviews-head h2{font-size:var(--type-heading)!important;line-height:1.15}
.form-head h2,.summary-card h2,.summary-card h3,.upsell-section h3{font-size:var(--type-title)!important}
/* Product cards */
.card h3,.product-card h3{font-size:14px!important;line-height:1.35!important;min-height:auto}
.card .desc,.product-card .desc{font-size:12px!important;line-height:1.5}
.price .now,.price-now{font-size:16px!important}
.price .old,.price .month,.price-old,.price-per-month{font-size:11.5px!important}
.product-badge,.badge,.discount-pill{font-size:10px!important;letter-spacing:.04em}
.quick-add button,.btn-primary,.btn-secondary,.checkout-btn,.submit-btn{font-size:13px!important;line-height:1.2}
/* Product detail */
.product-info h1{font-size:clamp(22px,2.7vw,30px)!important;line-height:1.16}
.product-benefits li,.rich-product-desc,.story-accordion .story-content{font-size:13.5px!important;line-height:1.6}
.product-section-content{font-size:14px!important;line-height:1.62}
.product-section-content h3{font-size:17px!important}
.product-section-content h4{font-size:15px!important}
.product-section-accordion summary{font-size:14px!important}
.product-reviews-head p,.review-text{font-size:13px!important}
.reviewer{font-size:13px!important}.review-date{font-size:11px!important}
.review-avg{font-size:25px!important}.review-meta,.review-meta b{font-size:12px!important}
/* Cart, checkout and forms */
.item-name{font-size:15px!important}.item-price,.item-total{font-size:15px!important}
.form-section-title h2{font-size:17px!important}.delivery-address-heading{font-size:15px!important}
.field label,.form-field label{font-size:12px!important}
.field input,.field textarea,.field select,.form-field input,.form-field textarea,.form-field select{font-size:14px!important;line-height:1.45}
.summary-total span:last-child,.summary-total-row span:last-child{font-size:22px!important}
:where(html:not(.page-thank-you)) .success-screen h1{font-size:var(--type-page)!important}.success-screen p{font-size:14px!important}
/* Drawers and supporting UI */
.site-side-panel-title{font-size:var(--side-panel-title-size)!important}
.cart-row .name{font-size:13px!important}
.cart-row .sub,.cart-row .price-tag{font-size:11.5px!important}
/* Product editorial sections: compact, readable hierarchy inspired by the
dynamic section template while retaining the storefront font family. */
.product-section-head h2{font-size:clamp(17px,1.55vw,20px)!important;line-height:1.3!important}
.product-section-content{font-size:15px!important;line-height:1.65!important}
.product-section-content h3{font-size:17px!important}
.product-section-content h4{font-size:15px!important}
@media(max-width:760px){
:root{--type-body:13.5px;--type-body-lg:14px;--type-heading:clamp(22px,7vw,28px);--type-page:clamp(26px,8vw,34px)}
.logo{font-size:19px!important}
.hero h1{font-size:clamp(32px,10vw,42px)!important}
.hero p.lead{font-size:14px!important;line-height:1.65}
.product-info h1{font-size:clamp(21px,7vw,27px)!important}
.product-section-content{font-size:15px!important;line-height:1.65!important}
.card h3,.product-card h3{font-size:13px!important}
.price .now,.price-now{font-size:15px!important}
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea,
.field input,
.field textarea,
.field select,
.form-field input,
.form-field textarea,
.form-field select{font-size:16px!important}
}
/* ===== Performance ===== */
/* Lightweight rendering hints for long product lists */
.product-grid > .card,
.related-grid > .card,
.upsell-card {
content-visibility: auto;
contain-intrinsic-size: 360px;
}
img[loading="lazy"] {
content-visibility: auto;
}
/* ===== Surfaces ===== */
/* Niya Nikolaeva — public surface system
White sections + restrained glass panels. No decorative layers on panels. */
html {
background: var(--page-background);
}
body {
margin: 0;
overflow-x: hidden;
background: var(--page-background);
}
/* Product pages use a clean white canvas instead of the atmospheric/glass
page background. Product cards keep their borders and restrained shadow. */
body.product-site {
--page-background: #FFFFFF;
--section-soft: #FFFFFF;
--glass-background: #FFFFFF;
--glass-background-strong: #FFFFFF;
--glass-border: var(--section-line);
background: #FFFFFF;
background-image: none;
background-attachment: scroll;
}
/* Non-campaign page heroes. The shared store-banner component is defined
once in the global brand layer below. */
.hero:not(.home-hero) {
background: var(--section-white);
border-bottom: 1px solid var(--section-line);
color: var(--ink);
}
.hero:not(.home-hero)::before,
.hero:not(.home-hero)::after {
display: none;
}
.hero:not(.home-hero) h1,
.hero:not(.home-hero) p {
color: inherit;
}
/* Homepage: one atmospheric hero, followed by clear white/soft sections. */
.home-hero {
background:
radial-gradient(circle at 12% 10%, rgba(224, 229, 249, .66), transparent 31rem),
radial-gradient(circle at 88% 14%, rgba(244, 216, 228, .64), transparent 32rem),
linear-gradient(135deg, #FFFFFF 8%, #FAFAFD 54%, #FFF9FB 100%);
}
.home-promotions,
.bestsellers-section,
.home-reviews,
.newsletter,
.standard-page-main,
.product-page {
background: var(--section-white);
}
.cart-page,
.checkout-body {
background: var(--section-soft);
}
.home-promotions,
.bestsellers-section,
.home-reviews,
.newsletter,
.standard-page-main,
.product-page,
.cart-page,
.checkout-body {
border-color: var(--section-line);
}
/* Store: one continuous white section. Sidebar and catalogue share the same plane. */
.store-main-section {
background: var(--section-white);
border-bottom: 1px solid var(--section-line);
}
.store-layout,
.content-area,
.sidebar {
background: transparent;
}
.sidebar {
border: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.content-area {
border-left-color: var(--section-line);
}
.maincat-btn:hover {
background: rgba(221, 244, 242, .65);
}
.maincat-btn.is-active,
.maincat-btn.is-active:hover {
background: transparent;
box-shadow: none;
}
/* Glass is reserved for bounded interactive surfaces. */
.card,
.product-card,
.newsletter-box,
.form-card,
.contact-card,
.summary-card,
.cart-items-block,
.upsell-card,
.product-main,
.section-icon-card,
.section-step,
.certificate-showcase-card,
.subscription-gift-card,
.review-card,
.review-chat-card,
.review-archive-card,
.empty-cart {
background: var(--glass-background);
border-color: var(--glass-border);
box-shadow: var(--glass-shadow);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
/* Structural containers inherit the page atmosphere; they are not cards. */
.product-section:not(.bg-soft):not(.bg-cream):not(.bg-sage),
.related-section,
.form-section {
background: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Never stack glass inside glass. Nested controls stay flat and readable. */
.form-section .radio-card,
.form-section .pay-panel,
.form-section .speedy-delivery-card,
.summary-card .coupon-box,
.product-section .section-icon-card,
.product-section .section-step,
.product-section .certificate-showcase-card,
.product-section .subscription-gift-card {
background: rgba(255, 255, 255, .7);
border-color: var(--section-line);
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.product-reviews-section {
background: transparent;
border-color: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.card:hover,
.product-card:hover,
.contact-card:hover,
.upsell-card:hover {
border-color: rgba(7, 138, 147, .16);
box-shadow: var(--glass-shadow-hover);
}
.card-media,
.main-image,
.order-thumb .th,
.item-thumb,
.cart-row .thumb {
background: rgba(255, 255, 255, .58);
}
/* Fillable controls are intentionally solid white for maximum legibility. */
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea,
.office-combobox,
.mobile-category-trigger {
background-color: #FFFFFF;
border-color: rgba(7, 138, 147, .2);
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
input:not([type="radio"]):not([type="checkbox"]):hover,
select:hover,
textarea:hover,
.mobile-category-trigger:hover {
background-color: #FFFFFF;
}
input:not([type="radio"]):not([type="checkbox"]):focus,
select:focus,
textarea:focus,
.mobile-category-trigger:focus-visible {
background-color: #FFFFFF;
}
/* Checkout controls stay crisp and high-contrast on the soft page surface. */
.checkout-body .field input,
.checkout-body .field select,
.checkout-body .field textarea,
.checkout-body .coupon-row input {
background-color: #FFFFFF;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.checkout-body .field input:hover,
.checkout-body .field select:hover,
.checkout-body .field textarea:hover,
.checkout-body .field input:focus,
.checkout-body .field select:focus,
.checkout-body .field textarea:focus,
.checkout-body .coupon-row input:hover,
.checkout-body .coupon-row input:focus {
background-color: #FFFFFF;
}
.checkout-body .shipping-options .radio-card {
background: #FFFFFF;
border-color: #272328;
color: var(--ink);
}
.checkout-body .shipping-options .radio-card.selected {
background: #111111;
border-color: #111111;
color: #FFFFFF;
}
@media (max-width: 860px) {
:root {
--glass-background: rgba(255, 255, 255, .86);
--glass-blur: blur(10px) saturate(115%);
--glass-shadow: 0 14px 34px -28px rgba(49, 29, 48, .28), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
body {
background: var(--page-background);
background-attachment: scroll;
}
.store-layout {
background: transparent;
}
.content-area {
border-left: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.card,
.product-card {
transition-duration: .01ms !important;
}
}
/* ===== Focused Shopify-style checkout shell ===== */
html.page-checkout{
--checkout-border:#d9dadd;
--checkout-muted:#6d7175;
--checkout-summary:#f5f5f7;
--checkout-summary-value-size:13.5px;
--checkout-summary-value-weight:650;
--checkout-action:#111111;
--checkout-final-action:var(--commerce-final-action);
--checkout-final-action-hover:var(--commerce-final-action-hover);
background:#fff;
}
html.page-checkout body{min-height:100dvh;background:#fff;}
html.page-checkout .checkout-header{position:relative;z-index:30;height:90px;border-bottom:1px solid var(--checkout-border);background:#fff;}
html.page-checkout .checkout-header-inner{width:min(1080px,calc(100% - 64px));height:100%;margin:0 auto;display:flex;align-items:center;}
html.page-checkout .checkout-logo{display:inline-flex;align-items:center;width:158px;min-height:48px;padding:4px 0;}
html.page-checkout .checkout-logo img{display:block;width:100%;height:auto;max-height:64px;object-fit:contain;object-position:left center;}
html.page-checkout .checkout-body{position:relative;padding:0!important;background:transparent!important;overflow-x:clip;}
html.page-checkout .checkout-body>.wrap{width:min(1080px,calc(100% - 64px));max-width:none!important;padding:0!important;}
html.page-checkout .checkout-intro{display:none;}
html.page-checkout .checkout-grid{position:relative;isolation:isolate;grid-template-columns:minmax(0,55.56%) minmax(0,44.44%)!important;gap:0!important;align-items:stretch;min-height:calc(100dvh - 90px);}
html.page-checkout .forms-col{padding:44px 48px 60px 0!important;}
html.page-checkout .summary-card{align-self:stretch;position:relative!important;z-index:0;top:auto!important;min-height:100%;margin:0;padding:44px 0 60px 40px!important;border:0!important;border-left:1px solid var(--checkout-border)!important;border-radius:0!important;background:var(--checkout-summary)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
html.page-checkout .summary-card::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw) 0 0;background:var(--checkout-summary);pointer-events:none;}
html.page-checkout .summary-sticky-content{position:sticky;top:24px;}
html.page-checkout .mobile-summary-toggle{display:none;}
html.page-checkout .order-summary-details{display:block;}
html.page-checkout .form-section{margin:0 0 28px!important;padding:0!important;background:transparent!important;}
html.page-checkout .form-section-title{margin:0 0 14px!important;}
html.page-checkout .form-section-title h2{font-size:19px!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1.3;}
html.page-checkout .form-row{gap:10px!important;margin-bottom:10px!important;}
html.page-checkout .field input,
html.page-checkout .field select,
html.page-checkout .field textarea{min-height:50px!important;padding:19px 13px 6px!important;border:1px solid #c9ccd1!important;border-radius:7px!important;background:#fff!important;font-size:14px!important;box-shadow:none!important;}
html.page-checkout .field label{top:6px!important;left:13px!important;color:var(--checkout-muted)!important;font-size:10.5px!important;}
html.page-checkout .field input:hover,
html.page-checkout .field select:hover,
html.page-checkout .field textarea:hover{border-color:#8c9196!important;}
html.page-checkout .field input:focus,
html.page-checkout .field select:focus,
html.page-checkout .field textarea:focus{border-color:var(--moss)!important;box-shadow:0 0 0 1px var(--moss)!important;}
html.page-checkout .shipping-options{gap:10px!important;}
html.page-checkout .shipping-options .radio-card{min-height:50px!important;padding:10px 14px!important;border:1px solid #8c9196!important;border-radius:7px!important;color:#202223!important;background:#fff!important;}
html.page-checkout .shipping-options .radio-card:hover{border-color:#111!important;}
html.page-checkout .shipping-options .radio-card.selected{border-color:#111!important;background:#111!important;color:#fff!important;box-shadow:inset 0 0 0 1px #111!important;}
html.page-checkout .shipping-options .radio-card-label b{font-size:13px!important;font-weight:650!important;}
html.page-checkout .delivery-address-section{padding:14px!important;border:1px solid #c9ccd1!important;border-radius:7px!important;background:var(--checkout-summary)!important;}
html.page-checkout .checkout-continue-btn,
html.page-checkout .submit-btn{min-height:52px!important;border-radius:7px!important;background:var(--checkout-action)!important;color:#fff!important;box-shadow:none!important;font-size:14px!important;font-weight:700!important;letter-spacing:.01em;}
html.page-checkout .checkout-continue-btn:hover,
html.page-checkout .submit-btn:hover{background:#2b2b2b!important;filter:none!important;transform:none!important;}
html.page-checkout .submit-btn{background:var(--checkout-final-action)!important;}
html.page-checkout .submit-btn:hover{background:var(--checkout-final-action-hover)!important;}
html.page-checkout .submit-btn:disabled{background:#a6a6a6!important;color:#fff!important;cursor:not-allowed!important;}
html.page-checkout .checkout-payment-step{padding-top:26px!important;border-top:1px solid var(--checkout-border)!important;}
html.page-checkout .checkout-payment-step .form-section-title{margin-bottom:2px!important;}
html.page-checkout .payment-security-copy{margin:0 0 14px!important;color:var(--checkout-muted)!important;font-size:13px!important;line-height:1.45!important;}
html.page-checkout .pay-tabs{overflow:hidden!important;border:1px solid #c9ccd1!important;border-radius:8px!important;background:#fff!important;background-clip:padding-box!important;}
html.page-checkout .pay-option+.pay-option{border-top:1px solid #c9ccd1!important;}
html.page-checkout .pay-tab{min-height:48px!important;padding:0 14px!important;gap:10px!important;background:#fff!important;color:#3f4145!important;}
html.page-checkout .pay-tab:hover{background:var(--checkout-summary)!important;color:#202223!important;}
html.page-checkout .pay-tab.active{position:relative;z-index:1;width:calc(100% + 2px)!important;min-height:50px!important;margin:-1px!important;border:1px solid #202223!important;border-radius:0!important;background:var(--checkout-summary)!important;color:#202223!important;box-shadow:none!important;}
html.page-checkout .pay-option:first-child .pay-tab.active{border-radius:8px 8px 0 0!important;}
html.page-checkout .pay-tab>svg{display:none!important;}
html.page-checkout .pay-tab-label{flex:0 1 auto!important;font-weight:650!important;white-space:nowrap;}
html.page-checkout .pay-radio{border-color:#8c9196!important;}
html.page-checkout .pay-radio::after{background:#202223!important;}
html.page-checkout .pay-tab.active .pay-radio{border-color:#202223!important;}
html.page-checkout .payment-brands{display:flex;align-items:center;gap:4px;margin-left:auto;flex:0 0 auto;}
html.page-checkout .payment-brand{width:38px;height:23px;border:1px solid #d5d7da;border-radius:3px;background:#fff;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;font-family:Arial,sans-serif;font-size:9px;font-weight:800;line-height:1;letter-spacing:-.03em;box-shadow:0 1px 1px rgba(0,0,0,.04);}
html.page-checkout .payment-brand-visa{border-color:#123ca6;background:#123ca6;color:#fff;font-size:10px;font-style:italic;letter-spacing:-.06em;}
html.page-checkout .payment-brand-mastercard{position:relative;}
html.page-checkout .payment-brand-mastercard i{position:absolute;width:14px;height:14px;border-radius:50%;background:#e51b24;}
html.page-checkout .payment-brand-mastercard i:first-child{left:7px;}
html.page-checkout .payment-brand-mastercard i:last-child{right:7px;background:#f59d19;mix-blend-mode:multiply;}
html.page-checkout .payment-brand-amex{border-color:#1773b0;background:#1773b0;color:#fff;font-size:8px;letter-spacing:-.05em;}
html.page-checkout .payment-brand-more{width:27px;color:#54575c;font-size:9px;font-weight:700;letter-spacing:0;}
html.page-checkout .payment-method-note{padding:10px 16px 11px 46px!important;border-top:0!important;background:var(--checkout-summary)!important;}
html.page-checkout .payment-method-note p{line-height:1.4!important;}
html.page-checkout .stripe-payment-panel{padding:16px!important;border-top:0!important;background:var(--checkout-summary)!important;}
html.page-checkout .summary-card h3{margin:0 0 20px!important;font-size:18px!important;font-weight:700!important;letter-spacing:-.015em!important;}
html.page-checkout .summary-card .submit-btn,
html.page-checkout .summary-card .secure-note{display:none!important;}
html.page-checkout .order-items{gap:16px!important;margin-bottom:20px!important;}
html.page-checkout .order-item{grid-template-columns:60px minmax(0,1fr) auto!important;gap:12px!important;align-items:start!important;}
html.page-checkout .order-item-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start;}
html.page-checkout .order-thumb .th{width:60px!important;height:60px!important;border:1px solid #d1d3d6!important;border-radius:7px!important;background:#fff!important;overflow:hidden;}
html.page-checkout .order-item-name{width:100%;min-width:0;font-size:13px!important;font-weight:600!important;}
html.page-checkout .order-item-price{font-size:var(--checkout-summary-value-size)!important;font-weight:var(--checkout-summary-value-weight)!important;}
html.page-checkout .order-item-price .commerce-price{display:inline-flex;flex-wrap:nowrap;align-items:baseline;justify-content:flex-end;gap:8px;}
@media(max-width:600px){
html.page-checkout .order-item-price .commerce-price{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:2px;
}
}
html.page-checkout .checkout-qty{margin-top:7px!important;border:1px solid #c9ccd1!important;border-radius:6px!important;}
html.page-checkout .checkout-qty button{width:28px!important;height:28px!important;}
html.page-checkout .order-item.is-package-composite{grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:start!important;}
html.page-checkout .order-item.is-package-composite .order-thumb[hidden]{display:none!important;}
html.page-checkout .coupon-box{margin:16px 0!important;background:transparent!important;}
html.page-checkout .coupon-toggle{display:inline-flex!important;align-items:center;min-height:44px;padding:0!important;color:#3f4145!important;font-size:13px!important;font-weight:600!important;text-decoration:underline;text-underline-offset:3px;}
html.page-checkout .coupon-toggle[aria-expanded="true"]{display:none!important;}
html.page-checkout .coupon-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:0!important;align-items:stretch!important;}
html.page-checkout .coupon-row.is-hidden{display:none!important;}
html.page-checkout .coupon-row input{min-width:0!important;min-height:46px!important;border:1px solid #c9ccd1!important;border-radius:7px 0 0 7px!important;background:#fff!important;font-size:13px!important;}
html.page-checkout .coupon-row button{min-height:46px!important;margin:0!important;border:1px solid #d5d7da!important;border-left:0!important;border-radius:0 7px 7px 0!important;background:#e6e7e9!important;color:#54575c!important;font-size:13px!important;font-weight:700!important;}
html.page-checkout .coupon-row button:not(:disabled):hover{background:#dcdde0!important;color:#202223!important;}
html.page-checkout .summary-divider{margin:18px 0!important;border-color:#d7d8db!important;}
html.page-checkout .summary-line{margin-bottom:12px!important;color:#3f4145!important;font-size:var(--checkout-summary-value-size)!important;}
html.page-checkout .summary-line b{color:#202223!important;font-weight:var(--checkout-summary-value-weight)!important;text-align:right;}
html.page-checkout .summary-total-row{align-items:baseline!important;}
html.page-checkout .summary-total-row span:first-child{font-size:17px!important;font-weight:700!important;}
html.page-checkout .summary-total-row span:last-child{font-size:21px!important;font-weight:750!important;letter-spacing:-.02em!important;text-align:right;}
html.page-checkout .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
html.page-checkout .summary-value-loading{display:inline-flex!important;width:132px!important;min-height:1em!important;align-items:center!important;justify-content:flex-end!important;color:transparent!important;pointer-events:none!important;}
html.page-checkout .summary-value-loading::after{content:"";display:block;width:118px;height:14px;border-radius:4px;background:#dfe1e4;}
@media(prefers-reduced-motion:no-preference){
html.page-checkout .summary-value-loading::after{background:linear-gradient(90deg,#dfe1e4 25%,#eceef0 50%,#dfe1e4 75%);background-size:200% 100%;animation:checkout-summary-loading 1.2s ease-in-out infinite;}
}
@keyframes checkout-summary-loading{from{background-position:200% 0}to{background-position:-200% 0}}
html.page-checkout .checkout-terms-consent{padding:0!important;background:transparent!important;}
html.page-checkout #checkoutTermsConsent{margin:0 0 20px!important;}
html.page-checkout #checkoutTermsConsent + .checkout-continue-btn{margin-top:0!important;}
html.page-checkout .checkout-terms-consent label{color:#45474b!important;}
html.page-checkout .checkout-terms-consent input{accent-color:#111!important;}
html.page-checkout .checkout-terms-consent a{color:#6d7175!important;font-weight:500!important;text-decoration:underline!important;text-underline-offset:3px;}
html.page-checkout .checkout-terms-consent a:hover{color:#4f5357!important;}
html.page-checkout .secure-note{color:var(--checkout-muted)!important;}
@media(max-width:900px){
html.page-checkout body{background:#fff;}
html.page-checkout .checkout-header{height:82px;}
html.page-checkout .checkout-header-inner{width:min(100% - 40px,720px);justify-content:flex-start;}
html.page-checkout .checkout-logo{width:150px;}
html.page-checkout .checkout-body>.wrap{width:min(100% - 40px,720px)!important;}
html.page-checkout .checkout-grid{grid-template-columns:1fr!important;grid-template-areas:"summary" "forms"!important;min-height:0;}
html.page-checkout .summary-card{min-height:0;margin:0 -20px!important;padding:0 20px!important;border-left:0!important;border-bottom:1px solid var(--checkout-border)!important;}
html.page-checkout .summary-card{background:var(--checkout-summary)!important;}
html.page-checkout .summary-sticky-content{position:static;top:auto;}
html.page-checkout .summary-sticky-content>h3{display:none!important;}
html.page-checkout .mobile-summary-toggle{display:grid;width:100%;min-height:72px;padding:14px 0;border:0;background:transparent;color:#202223;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;text-align:left;cursor:pointer;}
html.page-checkout .mobile-summary-toggle-label{display:flex;min-width:0;align-items:center;gap:7px;color:var(--moss-dark);font-size:15px;font-weight:650;line-height:1.3;}
html.page-checkout .mobile-summary-toggle-label svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s ease;}
html.page-checkout .mobile-summary-toggle strong{color:#202223;font-size:14px;font-weight:750;line-height:1.25;text-align:right;white-space:nowrap;}
html.page-checkout .summary-card:not(.is-collapsed) .mobile-summary-toggle-label svg{transform:rotate(180deg);}
html.page-checkout .summary-card.is-collapsed .order-summary-details{display:none;}
html.page-checkout .order-summary-details{padding:8px 0 28px;}
html.page-checkout .forms-col{padding:36px 0 56px!important;}
html.page-checkout .mobile-submit-panel:not([hidden]){display:flex!important;flex-direction:column;}
html.page-checkout .mobile-submit-panel .submit-btn{order:1;}
html.page-checkout .mobile-submit-panel .secure-note{order:2;}
html.page-checkout .mobile-submit-panel .checkout-terms-consent{order:2;margin:14px 0 0!important;}
}
@media(max-width:600px){
html.page-checkout #checkoutTermsConsent{margin-bottom:16px!important;}
html.page-checkout .checkout-header{height:68px;}
html.page-checkout .checkout-header-inner,
html.page-checkout .checkout-body>.wrap{width:100%!important;padding-left:16px!important;padding-right:16px!important;}
html.page-checkout .checkout-logo{width:112px;min-height:44px;}
html.page-checkout .summary-card{margin:0 -16px!important;padding:0 16px!important;border-radius:0!important;}
html.page-checkout .mobile-summary-toggle{min-height:70px;gap:10px;}
html.page-checkout .mobile-summary-toggle-label{font-size:14px;}
html.page-checkout .mobile-summary-toggle strong{font-size:13px;}
html.page-checkout .coupon-row input{font-size:16px!important;}
html.page-checkout .forms-col{padding-top:30px!important;}
html.page-checkout .form-section-title h2{font-size:20px!important;}
html.page-checkout .form-row{grid-template-columns:1fr!important;}
html.page-checkout .shipping-options{grid-template-columns:1fr 1fr!important;gap:8px!important;}
html.page-checkout .shipping-options .radio-card{min-height:46px!important;padding:7px 8px!important;}
html.page-checkout .shipping-options .radio-card-label b{font-size:12.5px!important;}
html.page-checkout .payment-brand{width:34px;height:22px;}
html.page-checkout .payment-brand-more{width:25px;}
html.page-checkout .pay-tab{padding-left:12px!important;padding-right:10px!important;gap:8px!important;}
}
/* Compact subscription gift product names. */
html.page-product .product-section .subscription-gift-copy h3{
font-size:15px!important;
line-height:1.35!important;
}
@media(max-width:600px){
html.page-product .product-section .subscription-gift-copy h3{
font-size:13px!important;
}
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.card,
.product-card,
.newsletter-box,
.form-card,
.summary-card,
.cart-items-block {
background: #FFFFFF;
}
}
/* ===== Header and navigation ===== */
/* Shared public-site header and mobile navigation */
.site-partner-bar {
display: flex;
min-height: 34px;
padding: 7px 20px;
align-items: center;
justify-content: center;
background: #000;
color: #fff;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 12.5px;
font-weight: 700;
line-height: 1.35;
letter-spacing: .01em;
text-align: center;
}
.site-promo-bar {
position: sticky;
top: 0;
z-index: 70;
display: flex;
min-height: 48px;
padding: 10px 20px;
align-items: center;
justify-content: center;
background:
linear-gradient(105deg,#80500d 0%,#b87a18 18%,#e7bd57 43%,#f4d77f 52%,#c58a21 76%,#80500d 100%);
color: #2f1b00;
font-family: var(--font-body, 'Inter', sans-serif);
text-align: center;
box-shadow:0 2px 10px rgba(91,54,3,.22);
}
.site-promo-bar a {
color: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0;
text-decoration: none;
}
.site-promo-bar strong {
font-weight: 800;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.site-promo-bar a:hover strong,
.site-promo-bar a:focus-visible strong {
text-decoration-thickness: 2px;
}
.site-promo-bar a:focus-visible {
outline: 2px solid #2f1b00;
outline-offset: 4px;
border-radius: 2px;
}
@media (max-width: 520px) {
.site-partner-bar {
min-height: 32px;
padding: 7px 12px;
font-size: 11px;
line-height: 1.3;
}
.site-promo-bar {
min-height: 54px;
padding: 9px 16px;
}
.site-promo-bar a {
max-width: 360px;
font-size: 13px;
line-height: 1.35;
}
}
header.site {
position: sticky;
top: 48px;
z-index: 60;
background: rgba(255, 255, 255, .84);
border-bottom: 1px solid rgba(255, 255, 255, .92);
box-shadow: 0 12px 38px -34px rgba(7, 94, 102, .32);
-webkit-backdrop-filter: var(--glass-blur, blur(16px) saturate(125%));
backdrop-filter: var(--glass-blur, blur(16px) saturate(125%));
}
@media (max-width: 520px) {
header.site { top: 54px; }
}
header.site .nav {
position: relative;
width: 100%;
max-width: 1360px;
min-height: 72px;
margin: 0 auto;
padding: 12px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
header.site .logo {
flex: 0 0 auto;
width: 178px;
min-width: 0;
line-height: 0;
display: flex;
align-items: center;
}
header.site .logo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1000 / 373;
object-fit: contain;
object-position: left center;
}
header.site .nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 1.7vw, 24px);
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.3;
font-weight: 500;
visibility: hidden;
}
header.site .nav-links.is-ready {
visibility: visible;
}
header.site .nav-links a,
header.site .nav-links .site-products-main-link {
position: relative;
padding: 10px 0;
color: var(--ink-soft);
white-space: nowrap;
}
header.site .nav-links a.active,
header.site .nav-links .site-products-main-link.active {
color: var(--ink);
font-weight: 600;
}
header.site .nav-links a.active::after,
header.site .nav-links .site-products-main-link.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 2px;
border-radius: 2px;
background: var(--clay);
}
header.site .site-products-menu {
position: relative;
display: flex;
align-items: center;
}
header.site .site-products-menu .site-products-main-link {
appearance: none;
-webkit-appearance: none;
border: 0;
margin: 0;
background: transparent;
font: inherit;
cursor: pointer;
touch-action: manipulation;
padding-right: 0;
}
header.site .site-products-dropdown {
position: absolute;
z-index: 100;
top: calc(100% + 1px);
left: -24px;
width: min(340px, calc(100vw - 32px));
max-height: min(70vh, 640px);
padding: 18px 0;
overflow-y: auto;
border: 1px solid var(--section-line, rgba(20, 58, 62, .075));
border-radius: 0;
background: #fff;
box-shadow: var(--glass-shadow-hover, 0 24px 54px -30px rgba(49, 29, 48, .38));
-webkit-backdrop-filter: none;
backdrop-filter: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-4px);
transition: opacity .18s ease, transform .22s ease, visibility 0s linear .22s;
}
header.site .site-products-dropdown::before {
content: "";
position: absolute;
top: -14px;
right: 0;
left: 0;
height: 16px;
}
header.site .site-products-menu:hover .site-products-dropdown,
header.site .site-products-menu:focus-within .site-products-dropdown,
header.site .site-products-menu.is-open .site-products-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition-delay: 0s;
}
header.site .site-products-category-grid {
display: flex;
flex-direction: column;
}
header.site .site-products-dropdown .site-category-link {
min-height: 44px;
padding: 11px 24px;
color: var(--moss, #078A93);
display: block;
font-size: 14px;
line-height: 1.55;
font-weight: 500;
white-space: normal;
text-decoration: none;
text-underline-offset: 4px;
transition: color .18s ease;
}
header.site .site-products-dropdown .site-category-link::after { display: none; }
header.site .site-products-dropdown .site-category-link:hover,
header.site .site-products-dropdown .site-category-link:focus-visible,
header.site .site-products-dropdown .site-category-link.is-current {
color: var(--moss-dark, #075E66);
text-decoration: underline;
}
header.site .site-products-menu-empty{
display:block;padding:16px 24px;color:var(--ink-soft);font-size:13px;line-height:1.45;
}
header.site .nav-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
header.site .icon-btn,
header.site .burger {
width: 44px;
height: 44px;
min-width: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
touch-action: manipulation;
}
header.site .icon-btn:hover,
header.site .burger:hover {
background: var(--cream-deep);
}
header.site .icon-btn svg {
width: 20px;
height: 20px;
}
header.site .burger {
display: none;
}
header.site .burger svg {
width: 22px;
height: 22px;
}
header.site .cart-count {
position: absolute;
top: 1px;
right: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 17px;
height: 17px;
padding: 0 3px;
border: 2px solid #fff;
border-radius: 50%;
background: var(--moss, #078A93);
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.mobile-menu {
display: none;
width: 100%;
padding: 4px 20px 10px;
border-top: 1px solid var(--line);
background: rgba(246, 241, 231, 0.99);
box-shadow: 0 16px 28px -24px rgba(30, 29, 26, 0.4);
}
.mobile-menu.is-open {
display: flex;
flex-direction: column;
}
.mobile-menu-overlay {
display: none;
}
.mobile-menu > a,
.mobile-products-trigger {
box-sizing: border-box;
width: 100%;
height: 44px;
min-height: 44px;
flex: 0 0 44px;
padding: 9px 4px;
display: flex;
align-items: center;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px;
line-height: 1.35;
font-weight: 600;
letter-spacing: -.005em;
color: var(--ink-soft);
}
.mobile-menu > a {
border-bottom: 1px solid var(--line);
}
.mobile-menu > a:last-child {
border-bottom: 0;
}
.mobile-menu > a.active,
.mobile-products-trigger.active {
color: var(--clay-dark);
font-weight: 600;
}
.mobile-menu > a.active,
.mobile-products-trigger.active > span {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
.mobile-products-menu {
border-bottom: 0;
}
.mobile-products-trigger {
appearance: none;
-webkit-appearance: none;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
margin: 0;
background: transparent;
justify-content: space-between;
gap: 16px;
text-align: left;
cursor: pointer;
touch-action: manipulation;
}
.mobile-products-submenu-shell {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .24s var(--ease);
}
.mobile-products-menu.is-open .mobile-products-submenu-shell { grid-template-rows: 1fr; }
.mobile-products-submenu {
min-height: 0;
max-height: none;
overflow: hidden;
background: #fff;
}
.mobile-products-menu.is-open .mobile-products-submenu {
margin-bottom: 4px;
padding: 2px 0 4px 12px;
overflow: visible;
}
.mobile-products-submenu .site-category-link {
min-height: 44px;
padding: 8px 4px;
border: 0;
display: block;
color: var(--moss);
font-size: 14px;
font-weight: 500;
text-underline-offset: 4px;
}
.mobile-products-submenu .site-category-link:hover,
.mobile-products-submenu .site-category-link:focus-visible {
text-decoration: underline;
}
.mobile-products-submenu .site-category-link.is-current {
color: var(--clay-dark);
text-decoration: underline;
}
.mobile-products-submenu .site-products-menu-empty{
display:block;padding:12px 4px;color:var(--ink-soft);font-size:13px;line-height:1.45;
}
@media (max-width: 860px) {
header.site .nav {
min-height: 62px;
padding: 9px 12px;
gap: 8px;
}
header.site .logo {
width: 126px;
}
header.site .nav-links {
display: none;
}
.mobile-menu-overlay {
display: block;
}
.mobile-menu,
.mobile-menu.is-open {
max-height: none;
padding: 0 20px max(18px, env(safe-area-inset-bottom));
border: 0;
background: #fff;
box-shadow: -4px 0 40px rgba(30, 29, 26, .15);
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.mobile-menu-head {
position: sticky;
z-index: 2;
top: 0;
margin: 0 -20px;
}
.mobile-menu-title {
color: var(--ink);
}
.mobile-menu-close {
touch-action: manipulation;
}
header.site .nav-actions {
gap: 2px;
}
header.site .icon-btn,
header.site .burger {
width: 42px;
height: 42px;
min-width: 42px;
}
header.site .burger {
display: flex;
}
}
@media (max-width: 390px) {
header.site .nav {
padding-left: 10px;
padding-right: 8px;
}
header.site .logo {
width: 118px;
}
header.site .icon-btn,
header.site .burger {
width: 40px;
height: 40px;
min-width: 40px;
}
}
/* Expandable product search shared by every public-page header. */
.site-product-search {
position: relative;
display: flex;
align-items: center;
flex: 0 0 auto;
}
.site-product-search .site-product-search-input {
position: absolute;
z-index: 1;
top: 50%;
right: 0;
width: 44px;
height: 44px;
padding: 0 48px 0 16px;
border: 1px solid rgba(7, 138, 147, .16);
border-radius: 999px;
outline: none;
background: #fff;
color: var(--ink, #2a1c20);
font: inherit;
font-size: 16px;
line-height: 1.25;
opacity: 0;
pointer-events: none;
transform: translateY(-50%);
box-shadow: 0 12px 35px rgba(20, 58, 62, .10);
transition: width .24s ease, opacity .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* Keep the shared custom close control as the single clear/close action. */
.site-product-search .site-product-search-input::-webkit-search-cancel-button,
.site-product-search .site-product-search-input::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.site-product-search .site-product-search-input::-ms-clear,
.site-product-search .site-product-search-input::-ms-reveal {
display: none;
width: 0;
height: 0;
}
.site-product-search.is-open .site-product-search-input {
width: min(390px, calc(100vw - 28px));
opacity: 1;
pointer-events: auto;
}
.site-product-search .site-product-search-input:focus {
border-color: var(--crystal, #078A93);
box-shadow: 0 12px 35px rgba(20, 58, 62, .12), 0 0 0 3px rgba(25, 181, 189, .12);
}
.site-product-search > .icon-btn {
position: relative;
z-index: 2;
}
.site-product-search-icon {
display: grid;
place-items: center;
transition: opacity .18s ease, transform .22s ease;
}
.site-product-search-icon-close {
position: absolute;
opacity: 0;
transform: rotate(-45deg) scale(.75);
}
.site-product-search.is-open .site-product-search-icon-search {
opacity: 0;
transform: rotate(45deg) scale(.75);
}
.site-product-search.is-open .site-product-search-icon-close {
opacity: 1;
transform: rotate(0) scale(1);
}
.site-product-search-results {
position: absolute;
z-index: 1000;
top: calc(100% + 12px);
right: 0;
width: min(390px, calc(100vw - 28px));
max-height: min(480px, 68vh);
padding: 8px;
overflow-y: auto;
border: 1px solid rgba(7, 138, 147, .12);
border-radius: 18px;
background: #fff;
box-shadow: 0 22px 55px rgba(20, 58, 62, .16);
}
.site-product-search-results[hidden] {
display: none;
}
.site-product-search-result {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
align-items: center;
gap: 13px;
min-height: 76px;
padding: 7px;
border-radius: 13px;
color: var(--ink, #2a1c20);
text-decoration: none;
transition: background-color .18s ease, transform .18s ease;
}
.site-product-search-result:hover,
.site-product-search-result:focus-visible,
.site-product-search-result.is-active {
outline: none;
background: var(--cream, #f8f7f9);
}
.site-product-search-thumb {
display: grid;
place-items: center;
width: 62px;
height: 62px;
overflow: hidden;
border-radius: 11px;
background: #fbf8f8;
}
.site-product-search-thumb img {
width: 100%;
height: 100%;
padding: 4px;
object-fit: contain;
}
.site-product-search-copy {
display: flex;
min-width: 0;
flex-direction: column;
gap: 5px;
}
.site-product-search-copy strong {
display: -webkit-box;
overflow: hidden;
color: var(--ink, #2a1c20);
font-size: 15px;
font-weight: 700;
line-height: 1.35;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.site-product-search-prices {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 8px;
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.site-product-search-price {
color: var(--crystal, #078A93);
font-size: 13px;
font-weight: 700;
}
.site-product-search-old-price {
color: var(--price-previous, #C9342C);
font-size: 11.5px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.site-product-search-empty {
padding: 22px 16px;
color: var(--muted, #76666a);
font-size: 14px;
text-align: center;
}
@media (max-width: 860px) {
header.site.site-search-open {
padding-bottom: 64px;
}
.site-product-search.is-open {
position: absolute;
z-index: 70;
top: calc(100% + 8px);
right: 12px;
left: 12px;
height: 48px;
justify-content: flex-end;
transform: none;
}
.site-product-search.is-open .site-product-search-input {
top: 0;
right: 0;
left: 0;
width: 100%;
height: 48px;
padding: 0 52px 0 18px;
transform: none;
box-shadow: 0 12px 35px rgba(20, 58, 62, .14), 0 0 0 1px rgba(7, 138, 147, .04);
}
.site-product-search.is-open > .icon-btn {
width: 48px;
height: 48px;
min-width: 48px;
}
.site-product-search-results {
top: calc(100% + 10px);
right: 0;
left: 0;
width: 100%;
max-height: min(480px, calc(100dvh - 190px));
animation: site-product-search-results-in .18s ease-out both;
}
.site-product-search-result {
grid-template-columns: 56px minmax(0, 1fr);
min-height: 70px;
}
.site-product-search-thumb {
width: 56px;
height: 56px;
}
}
@keyframes site-product-search-results-in {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
header.site .site-products-dropdown,
.mobile-products-submenu-shell {
transition: none;
}
.site-product-search .site-product-search-input,
.site-product-search-result,
.site-product-search-icon {
transition: none;
}
.site-product-search-results {
animation: none;
}
}
/* ===== Drawers and modal panels ===== */
/* Canonical cart content. Page-specific cart CSS must not own this component. */
#overlay:not([data-shared-drawer]),
#cartDrawer:not([data-shared-drawer]) {
display: none;
}
[data-shared-drawer="cart"] .drawer-body {
flex: 1;
overflow-y: auto;
padding: 16px 24px;
background: var(--side-panel-background);
}
[data-shared-drawer="cart"] .drawer-empty {
padding: 60px 20px;
color: var(--ink-soft);
text-align: center;
}
[data-shared-drawer="cart"] .drawer-empty svg {
width: 48px;
height: 48px;
margin: 0 auto 14px;
opacity: .4;
}
[data-shared-drawer="cart"] .drawer-empty p {
margin: 0 0 18px;
font-size: 14px;
line-height: 1.5;
}
[data-shared-drawer="cart"] .cart-row {
display: grid;
grid-template-columns: 70px minmax(0, 1fr) auto;
gap: 14px;
align-items: start;
padding: 16px 0;
border-bottom: 1px solid var(--line);
}
[data-shared-drawer="cart"] .cart-row:last-child { border-bottom: 0; }
[data-shared-drawer="cart"] .cart-row > div:not(.thumb):not(.right) { min-width: 0; }
[data-shared-drawer="cart"] .cart-row.is-gift {
grid-template-columns: 56px minmax(0, 1fr) auto;
margin-left: 20px;
padding: 11px 0;
}
[data-shared-drawer="cart"] .cart-row.is-gift .thumb { width: 56px; height: 56px; }
[data-shared-drawer="cart"] .cart-row.is-gift .price-tag { color: var(--moss-dark); }
[data-shared-drawer="cart"] .cart-row.is-gift .name::before {
content: 'Подарък';
display: table;
margin-bottom: 4px;
padding: 3px 7px;
border-radius: 999px;
background: var(--sage-light);
color: var(--moss-dark);
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
}
.cart-gift-progress{display:grid;gap:10px;margin:14px 0 4px;padding:14px;border:1px solid var(--moss);border-radius:12px;background:var(--sage-light);color:var(--ink);}
.cart-gift-progress-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.cart-gift-progress-head>strong{max-width:62%;font-size:13px;line-height:1.35;color:var(--moss-dark);}
.cart-gift-progress-remaining{flex:0 0 auto;padding:4px 8px;border-radius:999px;background:var(--white);color:var(--moss-dark)!important;font-size:10px!important;font-weight:800;line-height:1.25!important;white-space:nowrap;}
.cart-gift-progress>p{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink-soft);}
.cart-gift-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.cart-gift-preview-grid.is-single{grid-template-columns:1fr;}
.cart-gift-preview-card{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:8px;border:1px solid rgba(20,92,99,.16);border-radius:10px;background:rgba(255,255,255,.82);}
.cart-gift-preview-image{display:grid;width:46px;height:46px;place-items:center;border-radius:7px;background:var(--cream);overflow:hidden;}
.cart-gift-preview-image img{width:100%;height:100%;object-fit:contain;}
.cart-gift-preview-copy{display:block;min-width:0;}
.cart-gift-preview-copy strong,.cart-gift-preview-copy small{display:block;line-height:1.3;}
.cart-gift-preview-copy strong{color:var(--ink);font-size:10.5px;}
.cart-gift-preview-copy small{margin-top:3px;color:var(--moss-dark);font-size:8.5px;font-weight:650;}
.cart-gift-preview-grid.is-single .cart-gift-preview-card{grid-template-columns:54px minmax(0,1fr);}
.cart-gift-preview-grid.is-single .cart-gift-preview-image{width:54px;height:54px;}
.cart-gift-preview-grid.is-single .cart-gift-preview-copy strong{font-size:12px;}
.cart-gift-preview-grid.is-single .cart-gift-preview-copy small{font-size:9.5px;}
.cart-gift-choice{min-width:0;margin:16px 0 6px;padding:16px;border:1px solid rgba(7,138,147,.24);border-radius:16px;background:rgba(7,138,147,.035);}
.cart-gift-choice legend{padding:0 8px;color:var(--moss-dark);font-size:15px;font-weight:800;line-height:1.3;}
.cart-gift-choice>p{margin:0 0 12px;color:var(--ink-soft);font-size:12px;line-height:1.5;}
.cart-gift-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr));gap:10px;}
.cart-gift-choice-card{position:relative;display:flex;min-width:0;min-height:164px;padding:14px 10px 12px;flex-direction:column;align-items:center;justify-content:flex-start;border:1px solid var(--line);border-radius:12px;background:var(--white);cursor:pointer;text-align:center;touch-action:manipulation;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.cart-gift-choice-card:hover{border-color:rgba(7,138,147,.42);transform:translateY(-1px);}
.cart-gift-choice-card:has(input:checked){border-color:var(--crystal);background:#fff;box-shadow:0 0 0 3px rgba(7,138,147,.11);}
.cart-gift-choice-card:has(input:focus-visible){outline:3px solid rgba(25,181,189,.28);outline-offset:2px;}
.cart-gift-choice-card input{position:absolute;top:12px;left:12px;width:18px;height:18px;margin:0;accent-color:var(--crystal);}
.cart-gift-choice-image{display:grid;width:76px;height:76px;margin:0 auto 8px;place-items:center;border-radius:10px;background:var(--cream);overflow:hidden;}
.cart-gift-choice-image img{width:100%;height:100%;padding:3px;object-fit:contain;border-radius:inherit;}
.cart-gift-choice-card>span:last-child{display:block;min-width:0;}
.cart-gift-choice-card strong,.cart-gift-choice-card small{display:block;line-height:1.35;}
.cart-gift-choice-card strong{color:var(--ink);font-size:12px;font-weight:750;}
.cart-gift-choice-card small{margin-top:4px;color:var(--moss-dark);font-size:10px;font-weight:600;}
.cart-gift-choice-required{display:block;margin-top:10px;color:#8f2d24;font-size:11px;font-weight:700;}
[data-shared-drawer="cart"] .cart-row.is-promotion-gift{grid-template-columns:56px minmax(0,1fr);column-gap:12px;row-gap:6px;margin:12px 0 0;padding:12px;border:1px solid rgba(7,138,147,.16);border-radius:12px;background:var(--white);}
[data-shared-drawer="cart"] .cart-row.is-promotion-gift .thumb{grid-row:1 / span 2;}
[data-shared-drawer="cart"] .cart-row.is-promotion-gift .right{grid-column:2;width:100%;flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px;text-align:left;}
[data-shared-drawer="cart"] .promotion-gift-value{max-width:none;color:var(--ink-soft);font-size:9.5px;font-weight:600;line-height:1.35;text-align:right;}
@media(max-width:420px){
.cart-gift-choice{padding:14px}
.cart-gift-choice-grid{gap:8px}
.cart-gift-choice-card{min-height:156px;padding-inline:8px}
.cart-gift-choice-image{width:68px;height:68px}
.cart-gift-progress{padding:12px}
.cart-gift-progress-head{display:grid;gap:6px}
.cart-gift-progress-head>strong{max-width:none}
.cart-gift-progress-remaining{justify-self:start}
.cart-gift-preview-card{grid-template-columns:42px minmax(0,1fr);padding:7px}
.cart-gift-preview-image{width:42px;height:42px}
.cart-gift-preview-copy strong{font-size:10px}
.cart-gift-preview-copy small{font-size:8px}
}
@media(max-width:640px){
:where(html.page-checkout) .checkout-gift-confirmation{grid-template-columns:54px minmax(0,1fr);gap:10px;padding:9px}
:where(html.page-checkout) .checkout-gift-confirmation-image{grid-row:1 / span 2;width:54px;height:54px}
:where(html.page-checkout) .checkout-gift-confirmation-free{grid-column:2;font-size:12px}
:where(html.page-checkout) .checkout-gift-confirmation-copy strong{font-size:12px}
:where(html.page-checkout) .checkout-gift-confirmation-copy small{font-size:9.5px}
}
[data-shared-drawer="cart"] .cart-row .thumb {
width: 70px;
height: 70px;
padding: 0;
overflow: hidden;
border: 0;
border-radius: var(--radius-s);
background: transparent;
box-shadow: none;
display: grid;
place-items: center;
}
[data-shared-drawer="cart"] .cart-row .thumb img {
width: 100%;
height: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
object-fit: contain;
}
[data-shared-drawer="cart"] .cart-row .name {
margin: 0 0 8px;
color: var(--ink);
font-family: var(--font-display);
font-size: 14.5px;
font-weight: 500;
line-height: 1.25;
}
[data-shared-drawer="cart"] .cart-row .sub {
margin: 0 0 8px;
color: var(--ink-soft);
font-size: 12px;
line-height: 1.35;
}
[data-shared-drawer="cart"] .cart-row .right {
display: flex;
flex-shrink: 0;
flex-direction: column;
align-items: flex-end;
gap: 8px;
margin-left: 0;
text-align: right;
}
[data-shared-drawer="cart"] .cart-row .price-tag {
color: var(--ink);
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
[data-shared-drawer="cart"] .cart-row .price-tag .commerce-price {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-end;
gap: 3px;
}
.package-contents{display:grid;gap:7px;margin:10px 0 2px;}
.package-content-item{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:6px 8px;border:1px solid rgba(7,138,147,.14);border-radius:9px;background:#f9fdfd;}
.package-content-item img{width:34px;height:34px;object-fit:contain;}
.package-content-item span{display:grid;gap:1px;min-width:0;}
.package-content-item strong{font-size:12px;line-height:1.25;color:var(--ink);}
.package-content-item small{font-size:10px;line-height:1.25;color:var(--ink-soft);}
[data-shared-drawer="cart"] .qty-ctrl {
display: inline-flex;
align-items: center;
overflow: hidden;
min-height: 30px;
margin-top: 8px;
border: 1px solid #c9ccd1;
border-radius: 6px;
background: var(--white);
box-shadow: none;
}
[data-shared-drawer="cart"] .qty-ctrl button {
width: 30px;
height: 30px;
padding: 0;
border: 0;
background: transparent;
color: var(--ink-soft);
display: grid;
place-items: center;
font-size: 15px;
line-height: 1;
cursor: pointer;
touch-action: manipulation;
transition: background-color .15s ease,color .15s ease;
}
[data-shared-drawer="cart"] .qty-ctrl button:hover {
background: var(--cream-deep);
color: var(--ink);
}
[data-shared-drawer="cart"] .qty-ctrl button:active {
background: var(--line);
}
[data-shared-drawer="cart"] .qty-ctrl button:focus-visible {
position: relative;
z-index: 1;
outline: 2px solid var(--moss);
outline-offset: -2px;
}
[data-shared-drawer="cart"] .qty-ctrl span {
width: 26px;
color: var(--ink);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
}
@media (max-width:860px) {
[data-shared-drawer="cart"] .qty-ctrl button {
width: 36px;
height: 36px;
}
[data-shared-drawer="cart"] .qty-ctrl span {
width: 28px;
}
}
[data-shared-drawer="cart"] .remove-btn {
padding: 0;
border: 0;
background: transparent;
color: var(--ink-soft);
font-size: 12px;
}
[data-shared-drawer="cart"] .drawer-footer {
padding: 16px 24px 24px;
border-top: 1px solid var(--line);
background: var(--side-panel-background);
}
[data-shared-drawer="cart"] .sum-row {
display: flex;
justify-content: space-between;
gap: 18px;
margin-bottom: 12px;
color: var(--ink);
font-size: 14px;
line-height: 1.35;
}
[data-shared-drawer="cart"] .sum-row.total,
[data-shared-drawer="cart"] .free-ship-note { display: none; }
[data-shared-drawer="cart"] .checkout-btn {
width: 100%;
min-height: 52px;
margin-top: 14px;
border: 0;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
/* One visual system for every right-side panel: cart, navigation and future drawers. */
html.site-side-panel-open,
html.site-side-panel-open body {
overflow: hidden;
overscroll-behavior: none;
}
.site-side-panel {
position: fixed;
z-index: 90;
top: 0;
right: 0;
bottom: 0;
width: var(--side-panel-width);
max-width: 100vw;
height: 100dvh;
background: var(--side-panel-background);
color: var(--ink);
font-family: var(--font-body, 'Inter', sans-serif);
box-shadow: var(--side-panel-shadow);
display: flex;
flex-direction: column;
transform: translateX(100%);
visibility: hidden;
pointer-events: none;
transition: transform .35s var(--ease),
visibility 0s linear .35s;
will-change: transform;
}
/* The page behind both menu and cart uses the same non-transparent scrim. */
.site-side-panel-overlay,
.category-sheet-overlay {
background: var(--side-panel-overlay, rgba(42, 27, 34, .44));
-webkit-backdrop-filter: blur(4px) saturate(82%);
backdrop-filter: blur(4px) saturate(82%);
}
.category-sheet {
background: var(--side-panel-background, #fff);
border-color: var(--glass-border, rgba(255, 255, 255, .88));
box-shadow: var(--side-panel-shadow, -18px 0 52px -30px rgba(49, 29, 48, .42));
}
.category-sheet-head,
.category-sheet-list {
background: transparent;
}
/* Mobile catalogue category sheet. Kept here because it follows the same
modal, scroll-lock and surface rules as the navigation and cart drawers. */
.category-sheet-overlay {
position: fixed;
z-index: 170;
inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .24s var(--ease), visibility 0s linear .24s;
}
.category-sheet-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.category-sheet {
position: fixed;
z-index: 175;
top: max(12px, env(safe-area-inset-top));
right: 12px;
bottom: max(12px, env(safe-area-inset-bottom));
left: 12px;
max-height: none;
padding: 0;
border: 1px solid rgba(255,255,255,.9);
border-radius: 24px;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(16px) scale(.985);
transform-origin: center;
visibility: hidden;
overflow: hidden;
transition: transform .24s var(--ease), opacity .2s ease, visibility 0s linear .24s;
}
.category-sheet.is-open {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
transition-delay: 0s;
}
.category-sheet-handle {
display: none;
}
.category-sheet-head {
padding: 16px 18px 12px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.category-sheet-head h2 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; }
.category-sheet-head p { margin: 3px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.35; }
.category-sheet-close {
width: 44px;
height: 44px;
flex: 0 0 44px;
border: 0;
border-radius: 50%;
background: var(--cream);
color: var(--ink);
display: grid;
place-items: center;
}
.category-sheet-close:hover { background: var(--cream-deep); }
.category-sheet-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.category-sheet-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 12px; scrollbar-gutter: stable; }
.category-sheet-group + .category-sheet-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.category-sheet-parent {
width: 100%; min-height: 44px; padding: 7px 8px; border: 1px solid transparent;
border-radius: 12px; background: transparent; color: var(--ink);
display: block;
text-align: left; font: 750 15px/1.3 var(--font-body);
transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.category-sheet-parent:hover { background: var(--cream); }
.category-sheet-parent.is-current-group,
.category-sheet-parent.is-active { color: var(--ink); background: transparent; border-color: transparent; }
.category-sheet-children { padding-left: 6px; }
.category-sheet-option {
width: 100%;
min-height: 44px;
padding: 6px 8px;
border: 1px solid transparent;
border-radius: 12px;
background: transparent;
color: var(--ink);
display: grid;
grid-template-columns: 22px minmax(0, 1fr) 22px;
align-items: center;
gap: 10px;
text-align: left;
font-family: inherit;
transition: background .18s var(--ease), border-color .18s var(--ease);
}
.category-sheet-option .maincat-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(91,90,82,.12); background: rgba(91,90,82,.13); }
.category-sheet-option.is-active .maincat-dot { border-color: var(--moss); background: var(--moss); box-shadow: 0 0 0 3px rgba(7,138,147,.08); }
.category-sheet-option:hover { background: var(--cream); }
.category-sheet-option.is-active { background: var(--cream); border-color: rgba(7, 138, 147, .16); }
.category-sheet-option > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.category-sheet-option-name { font-size: 14px; font-weight: 650; line-height: 1.3; }
.category-sheet-option-check { opacity: 0; color: var(--moss); }
.category-sheet-option-check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.category-sheet-option.is-active .category-sheet-option-check { opacity: 1; }
html.category-sheet-open,
html.category-sheet-open body {
overflow: hidden;
overscroll-behavior: none;
}
@media (prefers-reduced-motion: reduce) {
.category-sheet,
.category-sheet-overlay { transition: none; }
}
/* Avoid a second backdrop rendering context in iOS while a drawer is open. */
html.site-side-panel-open header.site {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.site-side-panel.is-open {
transform: translateX(0);
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.site-side-panel-overlay {
position: fixed;
z-index: 80;
inset: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s var(--ease),
visibility 0s linear .3s;
touch-action: none;
}
.site-side-panel-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.site-side-panel .site-side-panel-head {
box-sizing: border-box;
min-height: var(--side-panel-head-height);
padding: var(--side-panel-head-padding);
border-bottom: 1px solid var(--line);
background: var(--side-panel-background);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.site-side-panel-head .site-side-panel-title {
margin: 0;
color: var(--ink);
font-family: var(--font-display, var(--font-body, 'Inter', sans-serif));
font-size: var(--side-panel-title-size);
line-height: 1.2;
font-weight: var(--side-panel-title-weight);
letter-spacing: 0;
}
.site-side-panel-head .site-side-panel-close {
box-sizing: border-box;
width: var(--side-panel-close-size);
height: var(--side-panel-close-size);
min-width: var(--side-panel-close-size);
padding: 8px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink);
display: grid;
place-items: center;
cursor: pointer;
}
.site-side-panel-head .site-side-panel-close:hover,
.site-side-panel-head .site-side-panel-close:focus-visible {
background: var(--cream-deep);
}
.site-side-panel-head .site-side-panel-close svg {
width: 18px;
height: 18px;
}
@media (max-width: 520px) {
[data-shared-drawer="cart"] .drawer-body { padding: 12px 20px; }
[data-shared-drawer="cart"] .drawer-footer { padding: 14px 20px calc(20px + env(safe-area-inset-bottom)); }
[data-shared-drawer="cart"] .cart-row {
grid-template-columns: 66px minmax(0, 1fr) auto;
gap: 12px;
}
[data-shared-drawer="cart"] .cart-row .thumb { width: 66px; height: 66px; }
[data-shared-drawer="cart"] .cart-row .name { font-size: 14px; }
[data-shared-drawer="cart"] .cart-row .price-tag { font-size: 16px; }
}
/* Composite subscriptions and package offers use their selected products as
the visual identity while remaining one purchasable cart line. */
[data-shared-drawer="cart"] .cart-row:is(.is-subscription-composite,.is-package-composite) {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 14px;
}
[data-shared-drawer="cart"] .cart-row:is(.is-subscription-composite,.is-package-composite) .cart-row-main {
min-width: 0;
}
@media (max-width: 520px) {
[data-shared-drawer="cart"] .cart-row:is(.is-subscription-composite,.is-package-composite) {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 12px;
}
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.site-side-panel { background: #fff; }
}
/* ===== Trust components ===== */
.site-trust {
--trust-surface-edge: #F5F6F7;
--trust-surface-center: #E9EBED;
--trust-border: rgba(31, 38, 41, .09);
border-top: 1px solid var(--trust-border);
border-bottom: 1px solid var(--trust-border);
background:
linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,0) 58%),
linear-gradient(100deg, var(--trust-surface-edge), var(--trust-surface-center) 50%, var(--trust-surface-edge));
color: #64696D;
padding: 58px 0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.82),
inset 0 -1px 0 rgba(255,255,255,.42);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.site-trust .wrap {
display: grid;
grid-template-columns: repeat(4, max-content);
justify-content: space-between;
align-items: center;
gap: 48px;
width: min(1548px, calc(100% - 96px));
margin: 0 auto;
}
.site-trust-item {
display: flex;
align-items: center;
gap: 28px;
min-width: 0;
}
.site-trust-item > div {
max-width: 230px;
}
.site-trust-item svg {
width: 34px;
height: 34px;
flex: 0 0 34px;
fill: none;
stroke: var(--crystal, #078A93);
}
.home-trust-item svg {
stroke: var(--crystal, #078A93);
}
.home-trust-item {
color: var(--graphite, #181818);
}
.site-trust-item b {
display: block;
margin: 0 0 4px;
color: var(--ink, #24171b);
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 650;
line-height: 1.22;
}
.site-trust-item span {
display: block;
color: #64696D;
opacity: .84;
font-family: 'Inter', sans-serif;
font-size: 13.5px;
line-height: 1.4;
}
@media (max-width: 980px) {
.site-trust {
padding: 28px 0;
}
.site-trust .wrap {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 20px;
width: min(100% - 32px, 640px);
}
.site-trust-item {
gap: 14px;
}
.site-trust-item > div {
max-width: none;
}
}
@media (max-width: 480px) {
.site-trust .wrap {
gap: 22px 14px;
}
.site-trust-item {
align-items: flex-start;
gap: 10px;
}
.site-trust-item svg {
width: 24px;
height: 24px;
flex-basis: 24px;
}
.site-trust-item b {
font-size: 11.5px;
}
.site-trust-item span {
font-size: 10.5px;
}
}
/* ===== Newsletter ===== */
/* Shared public-site newsletter — source of truth: homepage newsletter. */
.newsletter {
padding: 64px 0;
background: #fff;
}
.newsletter > .wrap {
width: 100%;
max-width: 1360px;
margin: 0 auto;
padding-right: 32px;
padding-left: 32px;
}
.newsletter-box {
display: grid;
grid-template-columns: 1.1fr .9fr;
align-items: center;
gap: 40px;
padding: 54px;
border: 1px solid rgba(7, 138, 147, .13);
border-radius: var(--radius-l, 24px);
background: #fff;
box-shadow: var(--shadow-card);
}
.newsletter-box h2,
.newsletter-box h3 {
margin: 0 0 10px;
font-family: var(--font-display, inherit);
font-size: 30px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -.025em;
}
.newsletter-box p {
margin: 0;
color: var(--ink-soft, #68545b);
font-size: 15px;
}
.nl-form {
display: flex;
gap: 10px;
min-width: 0;
}
.nl-form input {
min-width: 0;
min-height: 48px;
flex: 1;
padding: 13px 18px;
border: 1.5px solid var(--line, rgba(20, 58, 62, .11));
border-radius: 999px;
background: #fff;
font: 14px var(--font-body, inherit);
}
.nl-form input:focus {
outline: none;
border-color: var(--crystal, #078A93);
}
.nl-form button {
min-height: 48px;
padding: 13px 26px;
border: 0;
border-radius: 999px;
color: #fff;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
@media (max-width: 860px) {
.newsletter > .wrap {
padding-right: 20px;
padding-left: 20px;
}
.newsletter-box {
grid-template-columns: 1fr;
padding: 36px 26px;
text-align: center;
}
.nl-form {
flex-direction: column;
}
}
@media (max-width: 520px) {
.newsletter {
padding: 48px 0;
}
.newsletter-box {
padding: 30px 20px;
}
}
/* ===== Footer ===== */
/* Shared public-site footer — one global source of truth. */
footer.site.site-footer {
position: relative;
overflow: hidden;
background: #fff;
color: #666;
border: 0;
padding: 60px 0 30px;
}
.site-footer .wrap {
width: 100%;
max-width: 1360px;
margin: 0 auto;
padding-left: 32px;
padding-right: 32px;
}
.site-footer .footer-grid {
display: grid;
grid-template-columns: minmax(250px, 1.3fr) minmax(190px, 1fr) minmax(150px, .7fr) minmax(190px, .9fr);
gap: 36px;
padding-bottom: 36px;
border: 0;
}
.site-footer .footer-grid h4,
.site-footer .footer-grid .footer-heading {
margin: 0 0 16px;
color: var(--graphite, #181818);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
letter-spacing: .08em;
text-transform: uppercase;
}
.site-footer .footer-grid .footer-heading {
margin-top: 0;
}
.site-footer .footer-grid p {
max-width: none;
margin: 0;
color: #666;
font-size: 13.5px;
line-height: 1.7;
}
.site-footer .footer-grid ul {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer .footer-grid a {
color: #666;
font-size: 13.5px;
line-height: 1.5;
transition: color .2s ease;
}
.site-footer .footer-link-button {
width: fit-content;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: #666;
font: inherit;
font-size: 13.5px;
line-height: 1.5;
text-align: left;
cursor: pointer;
transition: color .2s ease;
}
.site-footer .footer-link-button:hover,
.site-footer .footer-link-button:focus-visible {
color: var(--crystal, #078A93);
}
.site-footer .footer-grid a:hover,
.site-footer .footer-grid a:focus-visible {
color: var(--crystal, #078A93);
}
.site-footer .footer-logo {
margin-bottom: 14px;
color: var(--graphite, #181818);
font-family: var(--font-display, inherit);
font-size: 21px;
font-weight: 500;
line-height: 1.25;
}
.site-footer .footer-logo img {
display: block;
width: 190px;
max-width: 100%;
height: 84px;
border-radius: 0;
object-fit: contain;
object-position: left center;
filter: drop-shadow(0 8px 14px rgba(7, 94, 102, .12));
}
.site-footer .footer-bottom {
display: flex;
justify-content: space-between;
gap: 10px;
border-top: 0;
padding-top: 22px;
color: #666;
font-size: 12.5px;
line-height: 1.5;
opacity: 1;
flex-wrap: wrap;
}
@media (max-width: 1100px) {
.site-footer .footer-grid {
grid-template-columns: 1.2fr 1fr;
}
}
@media (max-width: 860px) {
.site-footer .wrap {
padding-left: 20px;
padding-right: 20px;
}
.site-footer .footer-grid {
grid-template-columns: 1fr 1fr;
row-gap: 30px;
}
.site-footer .footer-grid > div:first-child {
grid-column: 1 / -1;
}
}
/* ===== Cookie consent ===== */
.cookie-consent[hidden] { display: none !important; }
.cookie-consent {
position: fixed;
z-index: 1200;
right: max(18px, env(safe-area-inset-right));
bottom: max(18px, env(safe-area-inset-bottom));
left: max(18px, env(safe-area-inset-left));
width: min(1120px, calc(100% - 36px));
margin: 0 auto;
border: 1px solid rgba(7, 138, 147, .2);
border-radius: 20px;
background: rgba(255, 255, 255, .97);
color: #181818;
box-shadow: 0 22px 60px rgba(7, 62, 67, .2), 0 4px 16px rgba(7, 62, 67, .08);
opacity: 0;
transform: translate3d(0, 18px, 0);
transition: opacity .22s ease, transform .22s ease;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.cookie-consent.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.cookie-consent__inner {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
padding: 18px 20px;
}
.cookie-consent__icon {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 14px;
background: #DDF4F2;
color: #078A93;
}
.cookie-consent__icon svg { width: 27px; height: 27px; }
.cookie-consent__copy { min-width: 0; }
.cookie-consent__copy p {
max-width: 720px;
margin: 0;
color: #666666;
font-size: 13.5px;
line-height: 1.55;
}
.cookie-consent__copy a {
color: #08777E;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.cookie-consent__actions {
display: flex;
align-items: center;
gap: 10px;
}
.cookie-consent__button {
min-height: 48px;
padding: 11px 18px;
border: 1.5px solid #078A93;
border-radius: 999px;
font: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
touch-action: manipulation;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.cookie-consent__button--primary {
background: linear-gradient(135deg, #19B5BD, #08777E);
color: #fff;
box-shadow: 0 8px 18px -12px rgba(7, 94, 102, .8);
}
.cookie-consent__button--secondary { background: #fff; color: #075E66; }
.cookie-consent__button:hover { box-shadow: 0 8px 20px -12px rgba(7, 94, 102, .75); }
.cookie-consent__button--secondary:hover { background: #EFF9F8; }
.cookie-consent a:focus-visible,
.cookie-consent button:focus-visible,
.site-footer .footer-link-button:focus-visible {
outline: 3px solid rgba(25, 181, 189, .34);
outline-offset: 3px;
}
@media (max-width: 820px) {
.cookie-consent__inner { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px; }
.cookie-consent__icon { width: 44px; height: 44px; }
.cookie-consent__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
.cookie-consent__button { width: 100%; }
}
@media (max-width: 520px) {
.cookie-consent {
right: max(10px, env(safe-area-inset-right));
bottom: max(10px, env(safe-area-inset-bottom));
left: max(10px, env(safe-area-inset-left));
width: min(100% - 20px, 480px);
border-radius: 17px;
}
.cookie-consent__inner { display: block; padding: 16px; }
.cookie-consent__icon { display: none; }
.cookie-consent__copy p { font-size: 12.5px; }
.cookie-consent__actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 13px; }
.cookie-consent__button { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
.cookie-consent { transition: none; }
}
@media (max-width: 520px) {
footer.site.site-footer {
padding: 48px 0 24px;
}
.site-footer .footer-grid {
grid-template-columns: 1fr;
}
.site-footer .footer-grid > div:first-child {
grid-column: auto;
}
.site-footer .footer-bottom {
flex-direction: column;
gap: 6px;
}
}
/* ===== Standard page shell ===== */
/* Shared shell for standard public pages such as Contacts and Reviews. */
.standard-page {
margin: 0;
background: var(--white, #fff);
color: var(--ink, #181818);
font-family: var(--font-body, 'Inter', sans-serif);
-webkit-font-smoothing: antialiased;
}
.standard-page,
.standard-page *,
.standard-page *::before,
.standard-page *::after { box-sizing: border-box; }
.standard-page img { display: block; max-width: 100%; }
.standard-page button,
.standard-page input,
.standard-page select,
.standard-page textarea { font-family: inherit; }
.standard-page a { color: inherit; text-decoration: none; }
.standard-page a:focus-visible,
.standard-page button:focus-visible,
.standard-page input:focus-visible,
.standard-page select:focus-visible,
.standard-page textarea:focus-visible,
.standard-page [tabindex]:focus-visible {
outline: 2.5px solid var(--clay);
outline-offset: 3px;
border-radius: 4px;
}
.standard-page .wrap {
width: 100%;
max-width: 1360px;
margin-right: auto;
margin-left: auto;
padding-right: 32px;
padding-left: 32px;
}
.standard-page-main {
padding: 38px 0 90px;
background: var(--white, #fff);
}
.standard-page .store-banner h1 {
max-width: 100%;
}
/* Shared long-form content for informational pages. */
.standard-copy {
width: 100%;
margin: 0;
}
.standard-copy > section {
padding: 28px 0;
border-bottom: 1px solid var(--line, rgba(20, 58, 62, .11));
}
.standard-copy > section:first-child { padding-top: 0; }
.standard-copy > section:last-child { padding-bottom: 0; border-bottom: 0; }
.standard-copy h2 {
margin: 0 0 12px;
color: var(--ink, #181818);
font-family: var(--font-display, 'Inter', sans-serif);
font-size: clamp(19px, 2vw, 24px);
font-weight: 600;
line-height: 1.3;
}
.standard-copy h3 {
margin: 22px 0 10px;
color: var(--ink, #181818);
font-family: var(--font-display, 'Inter', sans-serif);
font-size: 17px;
font-weight: 600;
line-height: 1.4;
}
.standard-copy p {
margin: 0 0 12px;
color: var(--ink-soft, #666666);
font-size: 15px;
line-height: 1.75;
}
.standard-copy ul,
.standard-copy ol {
margin: 0;
padding-left: 22px;
color: var(--ink-soft, #666666);
}
.standard-copy li {
margin: 0 0 8px;
padding-left: 2px;
font-size: 15px;
line-height: 1.75;
}
.standard-copy li:last-child { margin-bottom: 0; }
.standard-copy p:last-child { margin-bottom: 0; }
.standard-copy a { color: var(--clay-dark, #08777E); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
.standard-page .wrap {
padding-right: 20px;
padding-left: 20px;
}
}
@media (max-width: 560px) {
.store-banner {
padding: 26px 0 28px;
}
.standard-page-main {
padding: 28px 0 70px;
}
.standard-copy > section { padding: 22px 0; }
.standard-copy p,
.standard-copy li { font-size: 14.5px; line-height: 1.7; }
}
/* ===== Reviews ===== */
.product-reviews-section{
padding:64px 0 68px;
border:0;
background:transparent;
}
.product-reviews-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:28px;
}
.product-reviews-head h2,
.home-reviews .section-head h2{
margin:0;
color:var(--moss-dark,#075E66);
font-family:var(--font-display);
font-size:clamp(22px,2.35vw,31px);
font-weight:450;
line-height:1.25;
letter-spacing:0;
}
.product-reviews-viewport{
position:relative;
height:560px;
overflow:hidden;
}
.review-columns{display:flex;align-items:flex-start;gap:14px}
.review-columns.is-tablet,.review-columns.is-mobile{display:none}
.review-column{flex:1;min-width:0}
.review-track{display:flex;flex-direction:column;transform:translate3d(0,0,0);will-change:transform}
.review-track-set{display:flex;flex-direction:column;gap:12px;padding-bottom:12px}
.review-track.is-scrolling{animation:niyaReviewScrollUp var(--review-duration,78s) linear infinite}
.product-reviews-viewport:hover .review-track.is-scrolling,
.product-reviews-viewport:focus-within .review-track.is-scrolling{animation-play-state:paused}
.review-chat-card{
width:100%;
min-width:0;
margin:0;
overflow:hidden;
border:1px solid var(--line,rgba(30,29,26,.12));
border-radius:14px;
background:var(--white,#fff);
box-shadow:0 3px 16px rgba(30,29,26,.07);
}
.review-chat-card img{display:block;width:100%;height:auto}
.product-reviews-fade{position:absolute;z-index:2;left:0;right:0;height:64px;pointer-events:none}
.product-reviews-fade.is-top{top:0;background:linear-gradient(to bottom,rgba(255,255,255,.98),rgba(255,255,255,0))}
.product-reviews-fade.is-bottom{bottom:0;background:linear-gradient(to top,rgba(255,255,255,.98),rgba(255,255,255,0))}
.reviews-empty{padding:54px 20px;text-align:center;color:var(--ink-soft,#666666);font-size:14px}
@keyframes niyaReviewScrollUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--review-distance,-50%),0)}}
.reviews-page-main{background:var(--white,#fff)}
.reviews-archive-group+.reviews-archive-group{margin-top:58px;padding-top:48px;border-top:1px solid var(--line,rgba(30,29,26,.12))}
.reviews-archive-group-head{max-width:680px;margin:0 0 22px}
.reviews-archive-group-head h2{margin:0;color:var(--ink,#173A3D);font-size:clamp(22px,3vw,30px);font-weight:650;letter-spacing:-.02em}
.reviews-archive-columns{display:block;column-count:var(--review-archive-columns,4);column-gap:16px}
.review-archive-card{
display:block;
width:100%;
margin:0 0 16px;
overflow:hidden;
page-break-inside:avoid;
break-inside:avoid;
border:1px solid var(--line,rgba(30,29,26,.12));
border-radius:14px;
background:#fff;
box-shadow:0 4px 18px rgba(30,29,26,.065);
}
.review-archive-card img{display:block;width:100%;height:auto}
.reviews-archive-status{min-height:180px;display:grid;place-items:center;color:var(--ink-soft,#666666);font-size:14px}
@media(max-width:980px){
.product-reviews-viewport{height:520px}
.review-columns.is-desktop{display:none}
.review-columns.is-tablet{display:flex}
}
@media(max-width:680px){
.product-reviews-section{padding:46px 0 50px}
.product-reviews-head{margin-bottom:20px}
.product-reviews-head h2{font-size:22px;line-height:1.3;letter-spacing:-.015em}
.product-reviews-viewport{
height:520px;
overflow-x:hidden;
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
touch-action:pan-y;
scrollbar-width:thin;
scrollbar-color:rgba(7,138,147,.34) transparent;
padding-right:3px;
}
.product-reviews-viewport::-webkit-scrollbar{width:4px}
.product-reviews-viewport::-webkit-scrollbar-thumb{background:rgba(7,138,147,.34);border-radius:999px}
.review-columns.is-tablet{display:none}
.review-columns.is-mobile{display:flex}
.review-columns{gap:0}
.review-track{animation:none!important;transform:none!important;will-change:auto}
.review-track-set[aria-hidden="true"]{display:none}
.product-reviews-fade{display:none}
.reviews-archive-group+.reviews-archive-group{margin-top:40px;padding-top:34px}
.reviews-archive-group-head{margin-bottom:16px}
.reviews-archive-columns{column-gap:14px}
.review-archive-card{margin-bottom:14px;border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
.review-track{animation:none!important;transform:none!important}
.product-reviews-viewport{height:auto;max-height:640px;overflow-y:auto}
.product-reviews-fade{display:none}
}
/* ===== Turquoise crystal design system ===== */
/* Kavrakovi — turquoise crystal, pearl and silver design system. */
html { background: var(--page-background); }
body,
body.product-site {
color: var(--graphite);
background:
radial-gradient(circle at 4% 1%, rgba(141, 217, 216, .22), transparent 27rem),
radial-gradient(circle at 96% 8%, rgba(220, 229, 232, .52), transparent 30rem),
linear-gradient(180deg, #FCFEFE 0%, #F5FAFA 100%);
background-attachment: fixed;
}
::selection { background: rgba(25, 181, 189, .22); color: var(--crystal-deep); }
/* Premium glass belongs to bounded navigation/panel surfaces only. */
header.site {
border:0;
background:#fff;
box-shadow:none;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
header.site .nav-links a,
header.site .nav-links .site-products-main-link { color: #666666; }
header.site .logo {
width: 168px;
height: 56px;
justify-content: flex-start;
}
header.site .logo img {
width: 100%;
height: 56px;
aspect-ratio: auto;
border-radius: 0;
object-fit: contain;
object-position: left center;
filter: drop-shadow(0 5px 8px rgba(7,94,102,.12));
}
header.site .nav-links a:hover,
header.site .nav-links a.active,
header.site .nav-links .site-products-main-link:hover,
header.site .nav-links .site-products-main-link.active { color: var(--crystal-deep); }
header.site .nav-links a.active::after,
header.site .nav-links .site-products-main-link.active::after {
height: 2px;
background: linear-gradient(90deg, var(--crystal-bright), var(--crystal-deep));
box-shadow: 0 2px 8px rgba(25, 181, 189, .25);
}
header.site .icon-btn:hover,
header.site .burger:hover {
background: var(--mint);
color: var(--crystal-deep);
}
header.site .cart-count {
background: var(--brand-gradient);
border-color: var(--pearl);
box-shadow: 0 3px 9px rgba(7, 94, 102, .22);
}
header.site .site-products-dropdown,
.site-side-panel,
.category-sheet,
.mobile-menu {
border-color: rgba(7, 138, 147, .14);
background: rgba(250, 252, 252, .96);
box-shadow: var(--side-panel-shadow);
-webkit-backdrop-filter: blur(18px) saturate(118%);
backdrop-filter: blur(18px) saturate(118%);
}
header.site .site-products-dropdown { border-radius: 0 0 18px 18px; }
header.site .site-products-dropdown .site-category-link { color: var(--crystal); }
header.site .site-products-dropdown .site-category-link:hover { color: var(--crystal-deep); background: rgba(221,244,242,.55); }
@media (min-width: 861px) {
header.site .site-products-dropdown {
max-height: none;
padding: 10px 0;
overflow-y: visible;
}
header.site .site-products-dropdown .site-category-link {
min-height: 36px;
padding: 7px 24px;
font-size: 13px !important;
line-height: 1.4;
}
}
/* Pearl page canvases and restrained organic atmosphere. */
.home-hero,
.hero:not(.home-hero) {
position: relative;
isolation: isolate;
overflow: hidden;
background:
radial-gradient(ellipse at 14% 12%, rgba(141, 217, 216, .34), transparent 34%),
radial-gradient(ellipse at 84% 18%, rgba(220, 229, 232, .66), transparent 36%),
linear-gradient(135deg, #FFFFFF 4%, #F2FAF9 54%, #E8F6F5 100%);
border-color: rgba(7, 138, 147, .1);
color: var(--graphite);
}
.home-hero::before,
.hero:not(.home-hero)::before {
content: "";
display: block;
position: absolute;
z-index: -1;
width: clamp(260px, 36vw, 560px);
aspect-ratio: 1;
right: -12%;
top: -46%;
border: 1px solid rgba(7, 138, 147, .13);
border-radius: 44% 56% 61% 39% / 52% 44% 56% 48%;
background: linear-gradient(145deg, rgba(255,255,255,.45), rgba(141,217,216,.08));
transform: rotate(18deg);
}
/* One global page-title banner. Products, Contacts, Reviews and all future
standard pages use this exact component without page-scoped overrides. */
.store-banner {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 34px 0 36px;
border-bottom: 1px solid rgba(7, 138, 147, .12);
background:
radial-gradient(ellipse at 14% 12%, rgba(141, 217, 216, .34), transparent 34%),
radial-gradient(ellipse at 84% 18%, rgba(220, 229, 232, .66), transparent 36%),
linear-gradient(135deg, #FFFFFF 4%, #F2FAF9 54%, #E8F6F5 100%);
color: var(--graphite);
}
.store-banner::before {
content: "";
display: block;
position: absolute;
z-index: 0;
width: clamp(220px, 28vw, 430px);
height: auto;
aspect-ratio: 1;
right: -7%;
top: -78%;
bottom: auto;
border: 1px solid rgba(7, 138, 147, .12);
border-radius: 44% 56% 61% 39% / 52% 44% 56% 48%;
background: linear-gradient(145deg, rgba(255,255,255,.48), rgba(141,217,216,.1));
transform: rotate(18deg);
pointer-events: none;
}
.store-banner::after {
content: "";
display: block;
position: absolute;
z-index: 0;
width: clamp(110px, 14vw, 220px);
height: auto;
aspect-ratio: 1;
right: 18%;
top: 22%;
border: 1px solid rgba(220, 229, 232, .7);
border-radius: 50%;
background: rgba(255,255,255,.22);
pointer-events: none;
}
.store-banner .banner-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.store-banner h1 {
max-width: 620px;
margin: 0;
color: var(--graphite);
font-family: var(--font-display, 'Inter', sans-serif);
font-size: var(--type-page, clamp(28px, 4vw, 42px)) !important;
font-weight: 450;
line-height: 1.08;
letter-spacing: 0;
}
.hero-heading,
.store-banner h1,
.standard-page h1,
.product-title,
.section-head h2,
.section-head h3,
.product-reviews-head h2,
.home-reviews .section-head h2 { color: var(--graphite); }
.hero-kicker,
.section-eyebrow,
.breadcrumb a,
.store-banner h1 em { color: var(--crystal); }
.botanical { color: var(--crystal); opacity: .15; }
.hero-sparkles { opacity: .5; filter: hue-rotate(125deg) saturate(.8); }
/* Homepage has a later, page-local visual block; keep the brand layer decisive. */
.home-hero {
background:
radial-gradient(ellipse at 14% 12%, rgba(141, 217, 216, .14), transparent 34%),
radial-gradient(ellipse at 84% 18%, rgba(220, 229, 232, .38), transparent 36%),
linear-gradient(135deg, #FFFFFF 4%, #FBFDFD 58%, #F4FAF9 100%);
}
.home-hero::before {
inset: auto -9% -20% -8%;
width: auto;
height: 58%;
aspect-ratio: auto;
border: 0;
border-radius: 0;
background: linear-gradient(160deg, transparent 13%, rgba(141,217,216,.1) 14% 38%, rgba(255,255,255,.94) 39% 52%, rgba(220,229,232,.24) 53%);
transform: skewY(-7deg);
}
.home-hero::after {
background: radial-gradient(circle, rgba(255,255,255,.98), rgba(141,217,216,.08) 44%, transparent 70%);
}
.home-hero .hero-source { color: var(--crystal); }
.home-hero .botanical { color: var(--crystal); opacity: .1; }
.home-hero .hero-copy {
max-width: 760px;
text-align: left;
}
.home-hero .hero-inner {
grid-template-columns: minmax(0, 1.2fr) minmax(380px, .8fr);
}
.home-hero .hero-heading {
margin: 0;
color: var(--graphite);
font-family: var(--font-display);
font-size: clamp(33px, 2.4vw, 37px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -.035em;
}
.home-hero .hero-heading > span {
display: block;
white-space: nowrap;
}
.home-hero .hero-subtitle {
max-width: 620px;
margin: 24px 0 0;
color: #666666;
font-family: var(--font-body);
font-size: clamp(16px, 1.35vw, 19px);
font-weight: 500;
line-height: 1.65;
text-wrap: pretty;
}
.home-hero .hero-person {
position: absolute;
right: -2%;
bottom: 0;
width: min(46%, 600px);
height: 100%;
overflow: visible;
isolation: isolate;
pointer-events: none;
}
.home-hero .hero-family-frame {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: auto;
overflow: visible;
filter: drop-shadow(0 26px 34px rgba(7,94,102,.16));
}
.home-hero .hero-frame-surface {
fill: url(#heroCrystalFill);
}
.home-hero .hero-frame-outline {
fill: none;
stroke: url(#heroCrystalLine);
stroke-width: 4;
opacity: .7;
}
.home-hero .hero-frame-inner {
fill: none;
stroke: rgba(255,255,255,.92);
stroke-width: 3;
}
.home-hero .hero-actions {
justify-content: flex-start;
margin-right: 0;
margin-left: 0;
}
.home-hero .hero-cta:not(.hero-cta-secondary) {
border: 1px solid rgba(220,229,232,.82);
border-radius: 14px;
background: var(--brand-gradient);
box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 11px 25px -12px rgba(7,94,102,.62);
}
.home-hero .hero-actions .hero-cta-secondary {
background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(221,244,242,.48)) !important;
color: var(--crystal-deep) !important;
border: 1px solid rgba(7,138,147,.3) !important;
border-radius: 14px;
box-shadow: inset 0 1px #fff, 0 8px 20px -18px rgba(7,94,102,.5) !important;
}
.home-hero .hero-actions .hero-cta-secondary:hover {
background: var(--mint) !important;
color: var(--crystal-deep) !important;
border-color: var(--crystal-bright) !important;
}
/* Continuous product storytelling surface. Reviews must not appear as a
separate white sheet inside the pearl page canvas. */
.product-site #productReviewsMount,
.product-site .product-reviews-section {
background: transparent;
}
.product-site .product-reviews-section {
border-top-color: rgba(7, 138, 147, .12);
border-bottom: 1px solid rgba(7, 138, 147, .08);
}
/* Standard informational pages share the site atmosphere instead of resetting
the entire canvas to flat white. Their cards remain solid for readability. */
body.standard-page {
background:
radial-gradient(circle at 4% 1%, rgba(141, 217, 216, .22), transparent 27rem),
radial-gradient(circle at 96% 8%, rgba(220, 229, 232, .52), transparent 30rem),
linear-gradient(180deg, #FCFEFE 0%, #F5FAFA 100%);
background-attachment: fixed;
}
.standard-page .standard-page-main {
background: rgba(255, 255, 255, .62);
}
/* Remove the last legacy burgundy traces from controls and scroll affordances. */
:where(
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea,
.office-combobox,
.mobile-category-trigger
) {
border-color: rgba(7, 138, 147, .2) !important;
}
.category-sheet-option.is-active {
border-color: rgba(7, 138, 147, .24);
background: var(--mint);
}
.gallery-thumbs,
.product-reviews-viewport {
scrollbar-color: rgba(7, 138, 147, .34) transparent;
}
.gallery-thumbs::-webkit-scrollbar-thumb,
.product-reviews-viewport::-webkit-scrollbar-thumb {
background: rgba(7, 138, 147, .34);
}
.thumb-btn.is-active {
box-shadow: 0 0 0 2px rgba(25, 181, 189, .38);
}
.section-gallery-arrow:hover,
.section-gallery-arrow:focus-visible {
background: rgba(7, 94, 102, .92);
}
.home-promotions,
.bestsellers-section,
.home-reviews,
.newsletter,
.standard-page-main,
.product-page,
.store-main-section { background: #fff; }
.cart-page,
.checkout-body,
.bg-soft,
.bg-cream,
.bg-sage {
background:
radial-gradient(circle at 92% 12%, rgba(141,217,216,.16), transparent 22rem),
linear-gradient(180deg, #F5FBFA 0%, #EFF8F7 100%);
}
/* Cards: pearl/silver edges with product content remaining dominant. */
:where(
.card, .product-card,
.newsletter-box, .form-card, .contact-card,
.summary-card, .cart-items-block, .upsell-card, .product-main,
.section-icon-card, .section-step, .certificate-showcase-card,
.subscription-gift-card, .review-card, .review-chat-card,
.review-archive-card, .empty-cart, .purchase-option, .radio-card,
.pay-panel, .speedy-delivery-card, .coupon-box
) {
border-color: rgba(7, 138, 147, .13);
background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(250,252,252,.9));
box-shadow: var(--glass-shadow);
}
:where(
.card, .product-card,
.contact-card, .upsell-card, .purchase-option, .radio-card
):hover {
border-color: rgba(25, 181, 189, .34);
box-shadow: var(--glass-shadow-hover);
transform: translateY(-3px);
}
.card-media,
.main-image,
.order-thumb .th,
.item-thumb,
.cart-row .thumb,
.ph,
.thumb {
background:
radial-gradient(circle at 28% 18%, #FFFFFF 0%, rgba(255,255,255,.9) 24%, transparent 44%),
linear-gradient(145deg, #FDFEFE, #EDF7F6);
}
.product-badge:not(.sold),
.purchase-save,
.response-pill,
.nat-pill {
border: 1px solid rgba(7, 138, 147, .16);
background: linear-gradient(135deg, rgba(221,244,242,.96), rgba(255,255,255,.86));
color: var(--crystal-deep);
box-shadow: inset 0 1px #fff;
}
.price,
.product-price,
.summary-total,
.cart-total,
.line-total { color: var(--crystal-deep); font-variant-numeric: tabular-nums; }
/* Crystal primary controls, with silver edge and one restrained reflection. */
:where(
.btn-primary, .submit-btn, .checkout-btn, .quick-add button,
[data-add], [data-product-add], .upsell-add, .empty-cart a,
.not-found a, .program-link, .hero-cta:not(.hero-cta-secondary),
.elixir-btn, .newsletter button, button[type="submit"]
) {
position: relative;
overflow: hidden;
min-height: 46px;
border: 1px solid rgba(220, 229, 232, .82);
border-radius: 14px;
background: var(--brand-gradient);
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 11px 25px -12px rgba(7,94,102,.62);
text-shadow: 0 1px 1px rgba(7,94,102,.22);
transition: transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s ease;
}
:where(
.btn-primary, .submit-btn, .checkout-btn, .quick-add button,
[data-add], [data-product-add], .upsell-add, .empty-cart a,
.not-found a, .program-link, .hero-cta:not(.hero-cta-secondary),
.elixir-btn, .newsletter button, button[type="submit"]
)::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.2) 44%, transparent 61%);
transform: translateX(-115%);
transition: transform .65s var(--ease);
}
:where(
.btn-primary, .submit-btn, .checkout-btn, .quick-add button,
[data-add], [data-product-add], .upsell-add, .empty-cart a,
.not-found a, .program-link, .hero-cta:not(.hero-cta-secondary),
.elixir-btn, .newsletter button, button[type="submit"]
):hover {
background: var(--brand-gradient-hover);
box-shadow: inset 0 1px 0 rgba(255,255,255,.56), 0 16px 30px -13px rgba(7,94,102,.72);
transform: translateY(-2px);
filter: saturate(1.04);
}
:where(
.btn-primary, .submit-btn, .checkout-btn, .quick-add button,
[data-add], [data-product-add], .upsell-add, .empty-cart a,
.not-found a, .program-link, .hero-cta:not(.hero-cta-secondary),
.elixir-btn, .newsletter button, button[type="submit"]
):hover::after { transform: translateX(115%); }
.hero-cta-secondary,
.btn-secondary,
.secondary-btn,
.continue-shopping,
.coupon-btn {
min-height: 44px;
border: 1px solid rgba(7, 138, 147, .24);
border-radius: 14px;
background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(221,244,242,.38));
color: var(--crystal-deep);
box-shadow: inset 0 1px #fff, 0 8px 20px -18px rgba(7,94,102,.5);
}
.hero-cta-secondary:hover,
.btn-secondary:hover,
.secondary-btn:hover,
.continue-shopping:hover,
.coupon-btn:hover { border-color: var(--crystal-bright); background: var(--mint); color: var(--crystal-deep); }
/* Catalogue, filters and form controls. */
.cat-tabs-wrap { background: rgba(250,252,252,.92); border-color: rgba(7,138,147,.1); }
.cat-tab,
.maincat-btn,
.filter-option,
.mobile-category-trigger { color: #666666; }
.cat-tab:hover,
.maincat-btn:hover,
.filter-option:hover { background: rgba(221,244,242,.65); color: var(--crystal-deep); }
.cat-tab.is-active,
.maincat-btn.is-active,
.filter-option.is-active { color: var(--crystal-deep); border-color: var(--crystal); }
:where(input:not([type="radio"]):not([type="checkbox"]), select, textarea, .office-combobox, .mobile-category-trigger) {
min-height: 46px;
border-color: rgba(7, 138, 147, .2);
border-radius: 12px;
background-color: rgba(255,255,255,.96);
color: var(--graphite);
box-shadow: inset 0 1px 2px rgba(20,58,62,.025);
}
:where(input:not([type="radio"]):not([type="checkbox"]), select, textarea, .office-combobox, .mobile-category-trigger):focus {
border-color: var(--crystal-bright);
box-shadow: var(--control-focus-ring);
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--crystal); }
.purchase-option.is-selected,
.radio-card.selected,
.pay-tab.active { border-color: var(--crystal); background: rgba(221,244,242,.45); }
/* Testimonials and shared commerce surfaces. */
.review-chat-card,
.review-archive-card { border-color: rgba(7,138,147,.12); }
.drawer-head,
[data-shared-drawer="cart"] .drawer-footer { border-color: rgba(7,138,147,.12); background: rgba(250,252,252,.96); }
.qty-ctrl { border-color: rgba(7,138,147,.22) !important; background: #fff; }
.qty-ctrl button:hover { background: var(--mint) !important; color: var(--crystal-deep); }
.toast { border: 1px solid rgba(141,217,216,.28); }
@media (max-width: 860px) {
body,
body.product-site { background-attachment: scroll; }
body.standard-page { background-attachment: scroll; }
header.site .nav { padding-left: 18px; padding-right: 14px; }
header.site .logo { width: 142px; height: 52px; }
header.site .logo img { width: 100%; height: 52px; }
.mobile-menu > a,
.mobile-products-trigger { border-color: rgba(7,138,147,.1); }
.mobile-menu > a.active,
.mobile-products-trigger.active { color: var(--crystal-deep); }
.home-hero .hero-copy { text-align: center; }
.home-hero .hero-heading > span { white-space: normal; }
.home-hero .hero-heading {
font-size: clamp(27px, 7.4vw, 38px);
line-height: 1.12;
}
.home-hero .hero-subtitle {
max-width: 560px;
margin: 20px auto 0;
font-size: 16px;
text-align: center;
}
.home-hero .hero-actions {
align-items: stretch;
justify-content: center;
margin-right: auto;
margin-left: auto;
}
.home-hero .hero-person {
position: relative;
right: auto;
bottom: auto;
width: min(94%, 440px);
height: auto;
aspect-ratio: 1 / 1;
margin: 16px auto 0;
}
.home-hero .hero-family-frame {
right: 50%;
top: 0;
bottom: auto;
width: 100%;
transform: translateX(50%);
}
:where(.card, .product-card):hover { transform: none; }
}
@media (max-width: 520px) {
:root { --radius-l: 22px; --radius-m: 16px; }
.home-hero::before,
.store-banner::before,
.hero:not(.home-hero)::before { right: -42%; top: -20%; }
.store-banner::after { right: 8%; top: 46%; }
.home-hero .hero-heading {
font-size: clamp(26px, 7.2vw, 31px);
letter-spacing: -.04em;
}
:where(.hero-cta, .btn-primary, .submit-btn, .checkout-btn, button[type="submit"]) { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; }
:where(.card, .product-card, .btn-primary, .submit-btn, .checkout-btn, .hero-cta)::after { display: none; }
:where(.card, .product-card, .btn-primary, .submit-btn, .checkout-btn, .hero-cta) { transition-duration: .01ms !important; }
}
/* Homepage campaign carousel — separate desktop/mobile artwork per slide. */
:where(html.page-home) .campaign-slider {
position: relative;
isolation: isolate;
width: 100%;
aspect-ratio: 3 / 1;
overflow: hidden;
background: #f8f8f7;
}
:where(html.page-home) .campaign-slider-viewport {
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
:where(html.page-home) .campaign-slider-viewport::-webkit-scrollbar { display: none; }
:where(html.page-home) .campaign-slider-viewport:focus-visible { outline: 3px solid #087f86; outline-offset: -3px; }
:where(html.page-home) .campaign-slider-track {
display: flex;
width: 100%;
height: 100%;
}
:where(html.page-home) .campaign-hero {
display: block;
position: relative;
isolation: isolate;
flex: 0 0 100%;
width: 100%;
height: 100%;
overflow: hidden;
scroll-snap-align: start;
scroll-snap-stop: normal;
background: #f8f8f7;
cursor: pointer;
}
:where(html.page-home) .campaign-hero-visual {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
}
:where(html.page-home) .campaign-hero-visual::after { content: none; }
:where(html.page-home) .campaign-hero-visual img {
position: absolute;
inset: 0;
width: 100%;
max-width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:where(html.page-home) .campaign-hero-inner {
display: flex;
align-items: center;
min-height: 0;
height: 100%;
}
:where(html.page-home) .campaign-hero-title {
position: relative;
z-index: 1;
width: min(57%, 730px);
margin: 0;
color: #143a3e;
font-family: var(--font-body);
font-size: clamp(42px, 4.15vw, 76px);
font-weight: 800;
line-height: .98;
letter-spacing: -.045em;
text-transform: uppercase;
text-wrap: balance;
transition: opacity .2s ease;
}
:where(html.page-home) .campaign-hero-title span,
:where(html.page-home) .campaign-hero-title strong { display: block; }
:where(html.page-home) .campaign-hero-title strong {
margin: 0 0 .22em;
color: #143a3e;
font-size: .68em;
font-weight: 800;
letter-spacing: -.035em;
}
:where(html.page-home) .campaign-hero-title span { color: #3f7d2a; }
:where(html.page-home) .campaign-hero-title--family {
width: min(64%, 880px);
font-size: clamp(34px, 3.35vw, 62px);
}
:where(html.page-home) .campaign-hero-title--family strong {
color: #143a3e;
font-size: .68em;
}
:where(html.page-home) .campaign-hero-title--family span {
color: #c88418;
white-space: nowrap;
}
:where(html.page-home) .campaign-sun-title {
width: min(47%, 760px);
color: #15494d;
font-size: clamp(38px, 3.8vw, 70px);
line-height: 1;
}
:where(html.page-home) .campaign-sun-title strong {
margin-bottom: .28em;
color: #e52219;
font-size: .47em;
letter-spacing: .065em;
}
:where(html.page-home) .campaign-sun-title span {
color: #15494d;
}
:where(html.page-home) .campaign-sun-title span:last-child {
margin-top: .18em;
color: #347c37;
font-size: .62em;
letter-spacing: -.025em;
}
:where(html.page-home) .campaign-sun-discount {
position: absolute;
z-index: 3;
top: clamp(22px, 3vw, 52px);
right: clamp(28px, 4vw, 78px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: clamp(124px, 10.5vw, 190px);
aspect-ratio: 1;
border: clamp(3px, .25vw, 5px) solid rgba(255,255,255,.9);
border-radius: 50%;
background: #e52219;
color: #fff;
box-shadow: 0 14px 32px rgba(117, 18, 12, .28);
font-family: var(--font-body);
line-height: 1;
pointer-events: none;
transform: rotate(3deg);
}
:where(html.page-home) .campaign-sun-discount strong {
font-size: clamp(32px, 3.15vw, 58px);
font-weight: 800;
letter-spacing: -.055em;
font-variant-numeric: tabular-nums;
}
:where(html.page-home) .campaign-sun-discount small {
margin-top: .4em;
font-size: clamp(9px, .7vw, 13px);
font-weight: 800;
letter-spacing: .09em;
}
:where(html.page-home) .campaign-hero:hover .campaign-hero-title { opacity: .88; }
:where(html.page-home) .campaign-slide--dual-elixir .campaign-hero-visual::after {
content: "";
display: block;
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(54, 9, 31, .52) 0%, rgba(54, 9, 31, .25) 21%, transparent 34%, transparent 66%, rgba(0, 33, 35, .22) 79%, rgba(0, 33, 35, .58) 100%);
pointer-events: none;
}
:where(html.page-home) .campaign-elixir-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
padding-left: clamp(28px, 3.1vw, 60px);
padding-right: clamp(16px, 1.9vw, 36px);
}
:where(html.page-home) .campaign-elixir-side {
display: flex;
align-items: center;
min-width: 0;
height: 100%;
color: #fff;
text-decoration: none;
text-shadow: 0 2px 12px rgba(2, 17, 19, .4);
}
:where(html.page-home) .campaign-elixir-side--women { justify-content: flex-start; }
:where(html.page-home) .campaign-elixir-side--men { justify-content: flex-end; }
:where(html.page-home) .campaign-elixir-side--women .campaign-elixir-copy {
width: clamp(210px, 14.5vw, 280px);
transform: translateX(clamp(18px, 2.1vw, 40px));
}
:where(html.page-home) .campaign-elixir-side--men .campaign-elixir-copy {
width: clamp(180px, 14vw, 260px);
}
:where(html.page-home) .campaign-elixir-copy {
width: clamp(210px, 14.5vw, 280px);
}
:where(html.page-home) .campaign-elixir-title {
display: flex;
flex-direction: column;
width: 100%;
margin: 0 0 clamp(10px, .9vw, 16px);
color: #fff;
font-family: var(--font-body);
font-size: clamp(28px, 2.35vw, 45px);
font-weight: 800;
line-height: .92;
letter-spacing: -.04em;
text-transform: uppercase;
}
:where(html.page-home) .campaign-elixir-title span,
:where(html.page-home) .campaign-elixir-title strong {
display: block;
color: #fff;
font-size: 1em;
font-weight: 800;
}
:where(html.page-home) .campaign-elixir-title strong {
margin: .08em 0;
font-size: 1.16em;
}
:where(html.page-home) .campaign-elixir-benefits {
display: grid;
gap: clamp(3px, .35vw, 6px);
margin: 0;
padding: 0;
list-style: none;
}
:where(html.page-home) .campaign-elixir-benefits li {
display: flex;
gap: 8px;
align-items: flex-start;
color: #fff;
font-size: clamp(11px, .76vw, 14px);
font-weight: 700;
line-height: 1.2;
}
:where(html.page-home) .campaign-elixir-benefits li::before {
content: "";
flex: 0 0 auto;
width: 6px;
height: 6px;
margin-top: .38em;
border: 1px solid rgba(255, 255, 255, .72);
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
}
:where(html.page-home) .campaign-elixir-dose {
margin: clamp(8px, .65vw, 12px) 0 0;
color: rgba(255, 255, 255, .92);
font-size: clamp(11px, .72vw, 13px);
font-style: italic;
font-weight: 650;
line-height: 1.2;
}
:where(html.page-home) .campaign-elixir-side:hover .campaign-elixir-copy { opacity: .88; }
:where(html.page-home) .campaign-elixir-side:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
:where(html.page-home) .campaign-slider-dots {
position: absolute;
z-index: 3;
left: 50%;
bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(-50%);
}
:where(html.page-home) .campaign-slider-dot {
display: grid;
width: 44px;
height: 44px;
padding: 0;
place-items: center;
border: 0;
background: transparent;
cursor: pointer;
touch-action: manipulation;
}
:where(html.page-home) .campaign-slider-dot span {
display: block;
width: 11px;
height: 11px;
border: 2px solid rgba(20,58,62,.82);
border-radius: 50%;
background: rgba(255,255,255,.92);
box-shadow: 0 1px 5px rgba(20,58,62,.24);
transition: width .2s ease, border-color .2s ease, background .2s ease;
}
:where(html.page-home) .campaign-slider-dot.is-active span {
width: 25px;
border-radius: 999px;
border-color: #0d665f;
background: #0d665f;
}
:where(html.page-home) .campaign-slider-dot:focus-visible { outline: 3px solid #087f86; outline-offset: -6px; border-radius: 999px; }
@media (max-width: 900px) {
:where(html.page-home) .campaign-hero-title { width: 58%; font-size: clamp(36px, 5.6vw, 50px); }
:where(html.page-home) .campaign-hero-title--family {
width: min(68%, 700px);
font-size: clamp(30px, 4.4vw, 44px);
}
:where(html.page-home) .campaign-elixir-split { padding-right: 22px; padding-left: 22px; }
:where(html.page-home) .campaign-elixir-side--women .campaign-elixir-copy { width: min(25vw, 180px); transform: none; }
:where(html.page-home) .campaign-elixir-side--men .campaign-elixir-copy { width: min(20vw, 145px); }
:where(html.page-home) .campaign-elixir-title { font-size: clamp(24px, 3.45vw, 31px); }
:where(html.page-home) .campaign-elixir-benefits li { font-size: clamp(10px, 1.3vw, 12px); }
}
@media (max-width: 700px) {
:where(html.page-home) .campaign-slider { aspect-ratio: 4 / 5; background: #fafafa; }
:where(html.page-home) .campaign-hero-inner {
position: relative;
z-index: 1;
width: 100%;
min-height: 0;
height: 100%;
align-items: flex-start;
justify-content: center;
padding-top: clamp(24px, 8vw, 36px);
padding-bottom: 0;
}
:where(html.page-home) .campaign-hero-title {
width: min(100%, 480px);
font-size: clamp(30px, 9.6vw, 38px);
text-align: center;
}
:where(html.page-home) .campaign-hero-title--family {
width: calc(100% - 16px);
max-width: 480px;
font-size: clamp(23px, 7.4vw, 29px);
letter-spacing: -.075em;
}
:where(html.page-home) .campaign-hero-title--family strong {
font-size: .9em;
letter-spacing: -.045em;
}
:where(html.page-home) .campaign-slide--sun .campaign-hero-inner {
justify-content: flex-start;
padding-top: clamp(116px, 32vw, 170px);
}
:where(html.page-home) .campaign-sun-title {
width: calc(100% - 32px);
max-width: 480px;
margin-right: auto;
margin-left: auto;
font-size: clamp(28px, 8.7vw, 38px);
line-height: .98;
text-align: center;
}
:where(html.page-home) .campaign-sun-title strong {
font-size: .52em;
line-height: 1.15;
}
:where(html.page-home) .campaign-sun-title span:last-child {
font-size: .64em;
line-height: 1.08;
}
:where(html.page-home) .campaign-sun-discount {
top: clamp(20px, 6vw, 30px);
right: clamp(16px, 5vw, 26px);
width: clamp(92px, 25vw, 118px);
border-width: 3px;
box-shadow: 0 10px 24px rgba(117, 18, 12, .25);
}
:where(html.page-home) .campaign-sun-discount strong {
font-size: clamp(25px, 7.6vw, 35px);
}
:where(html.page-home) .campaign-sun-discount small {
font-size: clamp(8px, 2.2vw, 10px);
}
:where(html.page-home) [data-desktop-only] { display: none !important; }
:where(html.page-home) .campaign-hero-visual {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
background: #f1f2f1;
}
:where(html.page-home) .campaign-hero-visual::after { display: none; }
:where(html.page-home) .campaign-hero-visual img {
inset: 0;
width: 100%;
max-width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Mobile elixir artwork has two stacked product scenes. Keep only the
product titles in the open left-hand area so the packaging stays clear. */
:where(html.page-home) .campaign-slide--dual-elixir .campaign-elixir-split {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, minmax(0, 1fr));
padding: 0;
}
:where(html.page-home) .campaign-slide--dual-elixir .campaign-elixir-side {
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 0;
padding: 12px 0 12px clamp(18px, 5vw, 24px);
text-shadow: none;
}
:where(html.page-home) .campaign-slide--dual-elixir .campaign-elixir-copy {
display: block;
width: min(27vw, 112px);
transform: none;
}
:where(html.page-home) .campaign-elixir-side--women .campaign-elixir-copy {
transform: translateY(clamp(-72px, -14vw, -46px));
}
:where(html.page-home) .campaign-elixir-side--men .campaign-elixir-copy {
transform: translateY(clamp(-136px, -30vw, -106px));
}
:where(html.page-home) .campaign-slide--dual-elixir .campaign-elixir-title {
margin: 0;
color: #fff;
font-size: clamp(19px, 5.4vw, 23px);
line-height: .94;
letter-spacing: -.035em;
text-shadow: 0 2px 10px rgba(8, 32, 35, .34);
}
:where(html.page-home) .campaign-slide--dual-elixir .campaign-elixir-benefits,
:where(html.page-home) .campaign-slide--dual-elixir .campaign-elixir-dose {
display: none;
}
:where(html.page-home) .campaign-slide--dual-elixir .campaign-elixir-title span,
:where(html.page-home) .campaign-slide--dual-elixir .campaign-elixir-title strong {
color: #fff;
}
:where(html.page-home) .campaign-slider-dots { bottom: 6px; }
}
@media (max-width: 420px) {
:where(html.page-home) .campaign-hero-inner { padding-right: 16px; padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
:where(html.page-home) .campaign-slider-viewport { scroll-behavior: auto; }
:where(html.page-home) .campaign-slider-dot span { transition: none; }
}
/* Homepage primary hero — one site-wide promise instead of rotating campaigns. */
:where(html.page-home) .home-main-hero {
position: relative;
isolation: isolate;
overflow: hidden;
border-bottom:0;
background:var(--hero-cream);
}
:where(html.page-home) .home-main-hero::before {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background: linear-gradient(90deg,
rgba(var(--hero-cream-rgb),.99) 0%,
rgba(var(--hero-cream-rgb),.96) 30%,
rgba(var(--hero-cream-rgb),.76) 45%,
rgba(var(--hero-cream-rgb),.22) 61%,
transparent 74%);
}
:where(html.page-home) .home-main-hero-inner {
display: flex;
align-items: center;
min-height: clamp(620px, 50vw, 760px);
padding-top: clamp(40px, 5vw, 68px);
padding-bottom: clamp(40px, 5vw, 68px);
}
:where(html.page-home) .home-main-hero-copy {
position: relative;
z-index: 1;
max-width: 660px;
}
:where(html.page-home) .home-main-hero h1 {
max-width: 650px;
margin: 0;
color: #143a3e;
font-family: var(--font-display);
font-size: clamp(38px, 4.15vw, 62px);
font-weight: 650;
line-height: 1.05;
letter-spacing: -.045em;
text-wrap: balance;
}
:where(html.page-home) .home-main-hero-copy > p {
max-width: 610px;
margin: 24px 0 0;
color: #4f5f60;
font-size: clamp(16px, 1.35vw, 19px);
line-height: 1.65;
}
:where(html.page-home) .home-main-hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.site-primary-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;
min-height: 54px;
padding: 15px 25px;
border: 1px solid #075e66;
border-radius: 10px;
background: #075e66;
color: #fff;
font-size: 13px;
font-weight: 800;
letter-spacing: .07em;
line-height: 1.2;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 13px 28px rgba(7, 94, 102, .2);
transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
touch-action: manipulation;
}
.site-primary-cta span + span {
font-size: 20px;
font-weight: 500;
line-height: 1;
transition: transform .2s ease;
}
.site-primary-cta:hover {
background: #078a93;
box-shadow: 0 17px 34px rgba(7, 94, 102, .26);
transform: translateY(-2px);
}
.site-primary-cta:hover span + span { transform: translateX(3px); }
.site-primary-cta:focus-visible { outline: 3px solid #19b5bd; outline-offset: 4px; }
:where(html.page-home) .home-main-hero-cta-secondary {
border-color: #4f5f60;
background: #fff;
color: #4f5f60;
box-shadow: none;
}
:where(html.page-home) .home-main-hero-cta-secondary:hover {
border-color: #143a3e;
background: #f7f7f5;
color: #143a3e;
box-shadow: 0 12px 26px rgba(20, 58, 62, .1);
}
:where(html.page-home) .home-main-hero-proof {
display: flex;
align-items: center;
gap: 13px;
width: fit-content;
margin-top: 20px;
color: #143a3e;
}
:where(html.page-home) .home-main-hero-proof-avatars {
display: flex;
align-items: center;
padding-left: 2px;
}
:where(html.page-home) .home-main-hero-proof-avatars > span {
display: grid;
place-items: center;
width: 38px;
height: 38px;
margin-left: -8px;
border: 3px solid rgba(255, 255, 255, .96);
border-radius: 50%;
background: var(--crystal-bright);
color: #fff;
font-size: 13px;
font-weight: 850;
line-height: 1;
box-shadow: 0 6px 15px rgba(20, 58, 62, .13);
}
:where(html.page-home) .home-main-hero-proof-avatars > span:first-child { margin-left: 0; }
:where(html.page-home) .home-main-hero-proof-avatars > span:nth-child(2) { background: var(--crystal-deep); }
:where(html.page-home) .home-main-hero-proof-avatars > span:nth-child(3) { background: var(--crystal); }
:where(html.page-home) .home-main-hero-proof-avatars > span:last-child {
background: #fff;
color: var(--crystal-deep);
}
:where(html.page-home) .home-main-hero-proof-summary {
display: grid;
gap: 3px;
}
:where(html.page-home) .home-main-hero-proof-stars {
display: flex;
align-items: center;
gap: 2px;
color: #d99a00;
}
:where(html.page-home) .home-main-hero-proof-stars svg {
width: 16px;
height: 16px;
fill: currentColor;
}
:where(html.page-home) .home-main-hero-proof-summary strong {
font-size: 13px;
font-weight: 750;
line-height: 1.25;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}
:where(html.page-home) .home-main-hero-media {
position: absolute;
z-index: 0;
inset: 0;
width: 100%;
height: 100%;
max-height: none;
aspect-ratio: auto;
min-height: 0;
overflow: hidden;
border: 0;
border-radius: 0;
background:var(--hero-cream);
box-shadow: none;
}
:where(html.page-home) .home-main-hero-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
:where(html.page-home) .home-main-hero-media picture {
display: block;
width: 100%;
height: 100%;
}
@media (max-width: 980px) {
:where(html.page-home) .home-main-hero-inner {
min-height: 620px;
}
:where(html.page-home) .home-main-hero h1 { font-size: clamp(35px, 4.7vw, 48px); }
:where(html.page-home) .home-main-hero-media { height: 100%; border-radius: 0; }
}
@media (max-width: 760px) {
:where(html.page-home) .home-main-hero::before {
background: linear-gradient(180deg,
rgba(var(--hero-cream-rgb),.99) 0%,
rgba(var(--hero-cream-rgb),.97) 42%,
rgba(var(--hero-cream-rgb),.68) 50%,
rgba(var(--hero-cream-rgb),.18) 62%,
transparent 74%);
}
:where(html.page-home) .home-main-hero-inner {
align-items: flex-start;
min-height: 760px;
padding-top: 44px;
padding-bottom: 48px;
}
:where(html.page-home) .home-main-hero-copy { max-width: 620px; }
:where(html.page-home) .home-main-hero h1 {
max-width: 600px;
font-size: clamp(34px, 9.3vw, 46px) !important;
line-height: 1.07;
}
:where(html.page-home) .home-main-hero-copy > p {
margin-top: 20px;
font-size: 16px;
line-height: 1.6;
}
:where(html.page-home) .home-main-hero-actions {
flex-direction: column;
align-items: stretch;
width: min(100%, 370px);
margin: 25px auto 0;
gap: 10px;
}
:where(html.page-home) .home-main-hero-actions .home-main-hero-cta { width: 100%; }
:where(html.page-home) .home-main-hero-proof { justify-content: center; margin-inline: auto; }
:where(html.page-home) .home-main-hero-media {
inset: 400px 0 0;
height: auto;
min-height: 0;
aspect-ratio: auto;
border-radius: 0;
}
:where(html.page-home) .home-main-hero-media img { object-position: right center; }
}
@media (max-width: 520px) {
:where(html.page-home) .home-main-hero {
min-height: 0;
background:var(--hero-cream);
}
:where(html.page-home) .home-main-hero::before {
display: none;
}
:where(html.page-home) .home-main-hero-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 0;
padding-top: 32px;
padding-bottom: 0;
}
:where(html.page-home) .home-main-hero h1 {
font-size: clamp(30px, 8.7vw, 36px) !important;
line-height: 1.08;
}
:where(html.page-home) .home-main-hero-copy > p {
margin-top: 18px;
font-size: 15px;
line-height: 1.55;
}
:where(html.page-home) .home-main-hero-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: 22px 0 0;
gap: 10px;
}
.site-primary-cta {
min-height: 50px;
padding: 12px 24px;
gap: 8px;
font-size: 11px;
letter-spacing: .055em;
white-space: nowrap;
}
:where(html.page-home) .home-main-hero-actions .home-main-hero-cta {
align-self: flex-start;
width: fit-content;
max-width: 100%;
}
.site-primary-cta span + span { font-size: 18px; }
:where(html.page-home) .home-main-hero-proof {
justify-content: flex-start;
gap: 9px;
margin: 8px 0 0;
}
:where(html.page-home) .home-main-hero-proof-avatars > span {
width: 32px;
height: 32px;
border-width: 2px;
font-size: 12px;
}
:where(html.page-home) .home-main-hero-proof-stars svg { width: 14px; height: 14px; }
:where(html.page-home) .home-main-hero-proof-summary strong { font-size: 11.5px; }
:where(html.page-home) .home-main-hero-media {
position: relative;
inset: auto;
width: 100vw;
height: clamp(320px, 92vw, 360px);
margin: 24px 0 0 calc(50% - 50vw);
aspect-ratio: auto;
border-radius: 0;
background:var(--hero-cream);
}
:where(html.page-home) .home-main-hero-media img {
height: 100%;
margin-top: 0;
object-position: center 48%;
transform: none;
-webkit-mask-image: linear-gradient(to bottom,
transparent 0,
rgba(0, 0, 0, .28) 18px,
rgba(0, 0, 0, .78) 48px,
#000 76px);
mask-image: linear-gradient(to bottom,
transparent 0,
rgba(0, 0, 0, .28) 18px,
rgba(0, 0, 0, .78) 48px,
#000 76px);
}
}
@media (prefers-reduced-motion: reduce) {
.site-primary-cta,
.site-primary-cta span + span { transition: none; }
}
/* Primary navigation typography matched to the supplied reference. */
header.site .nav-links a,
header.site .nav-links .site-products-main-link {
font-family: 'Inter', sans-serif;
font-size: 14px !important;
font-weight: 700;
line-height: 20px;
letter-spacing: 0;
text-transform: uppercase;
}
@media (min-width: 1024px) {
header.site .nav-links a,
header.site .nav-links .site-products-main-link {
font-size: 14px !important;
line-height: 20px;
}
}
header.site .nav-links a.active,
header.site .nav-links .site-products-main-link.active {
font-weight: 700;
}
header.site .site-products-menu .site-products-main-link {
padding-right: 17px;
}
header.site .site-products-menu .site-products-main-link::before {
content: "";
position: absolute;
top: 50%;
right: 1px;
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-65%) rotate(45deg);
transition: transform .2s ease;
}
header.site .site-products-menu.is-open .site-products-main-link::before,
header.site .site-products-menu:focus-within .site-products-main-link::before {
transform: translateY(-25%) rotate(225deg);
}
@media (max-width: 860px) {
.mobile-menu > a,
.mobile-products-trigger {
font-family: 'Inter', sans-serif;
font-size: 14px !important;
font-weight: 700;
line-height: 20px;
letter-spacing: 0;
text-transform: uppercase;
}
.mobile-menu > a.active,
.mobile-products-trigger.active {
font-weight: 700;
}
.mobile-products-trigger::after {
content: "";
width: 7px;
height: 7px;
margin-right: 3px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform .2s ease;
}
.mobile-products-menu.is-open .mobile-products-trigger::after {
transform: translateY(2px) rotate(225deg);
}
}
/* Checkout validation must remain visibly red, including while a field is focused. */
html.page-checkout .field input.err,
html.page-checkout .field input.err:focus,
html.page-checkout .field select.err,
html.page-checkout .field select.err:focus {
border-color: #B42318 !important;
box-shadow: 0 0 0 2px rgba(180, 35, 24, .14) !important;
}
html.page-checkout .field .err-msg,
html.page-checkout .shipping-error.is-visible {
color: #B42318 !important;
}
.subscription-modal{
position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
padding:24px;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;
}
.subscription-modal.is-open{opacity:1;visibility:visible;}
.subscription-modal-backdrop{position:absolute;inset:0;background:rgba(14,35,37,.58);backdrop-filter:blur(5px);}
.subscription-dialog{
position:relative;z-index:1;width:min(100%,590px);max-height:min(88vh,780px);overflow:auto;
border:1px solid rgba(12,111,115,.16);border-radius:24px;background:#fff;
box-shadow:0 28px 90px rgba(12,48,51,.28);color:#173f43;
transform:translateY(14px) scale(.985);transition:transform .25s ease;
scrollbar-width:thin;scrollbar-color:#b7cfcc transparent;
}
.subscription-modal.is-open .subscription-dialog{transform:none;}
.subscription-dialog-close{
position:absolute;z-index:2;top:8px;right:11px;width:44px;height:44px;
display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#587274;cursor:pointer;
}
.subscription-dialog-close:hover{background:#f1f6f5;color:#173f43;}
.subscription-dialog-close svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;}
.subscription-dialog-body{padding:42px 30px 30px;}
.subscription-step[hidden]{display:none!important;}
.subscription-dialog-head{margin-bottom:21px;}
.subscription-dialog-kicker{margin:0 0 7px;color:#078a93;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;}
.subscription-dialog-head h2,.subscription-cart-offers-step h2,.subscription-success h2{margin:0;color:#173f43;font-size:clamp(27px,4vw,36px);line-height:1.12;letter-spacing:-.025em;}
.subscription-dialog-head>p:last-child,.subscription-success>p{margin:10px 0 0;color:#607678;font-size:15px;line-height:1.55;}
.subscription-product-summary{
display:flex;align-items:center;gap:14px;margin-bottom:21px;padding:13px;
border:1px solid #dce7e5;border-radius:14px;background:#f7faf9;
}
.subscription-product-summary img{width:66px;height:66px;object-fit:contain;border-radius:10px;background:#fff;border:1px solid #e0e8e7;}
.subscription-product-summary div{min-width:0;display:grid;gap:4px;}
.subscription-product-summary strong{font-size:15px;line-height:1.35;color:#173f43;}
.subscription-product-summary span{font-size:13px;color:#078a93;font-weight:750;}
.subscription-product-summary .subscription-summary-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.subscription-summary-price del{color:#819193;font-size:12px;font-weight:600;text-decoration-thickness:1.5px;}
.subscription-product-summary.subscription-cart-summary{display:grid;gap:0;padding:4px 13px;max-height:230px;overflow:auto;}
.subscription-cart-summary-row{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #e2ebe9;}
.subscription-cart-summary-row:last-child{border-bottom:0;}
.subscription-cart-summary .subscription-cart-summary-row img{width:52px;height:52px;object-fit:contain;border-radius:9px;background:#fff;border:1px solid #e0e8e7;}
.subscription-cart-summary .subscription-cart-summary-row div{min-width:0;display:grid;gap:4px;}
.subscription-cart-summary .subscription-cart-summary-row strong{font-size:13.5px;line-height:1.35;color:#173f43;}
.subscription-cart-summary .subscription-cart-summary-row span{font-size:12.5px;color:#078a93;font-weight:750;}
.subscription-cart-summary .subscription-cart-summary-row .package-contents{margin:5px 0 0;gap:5px;}
.subscription-cart-summary .subscription-cart-summary-row .package-content-item{grid-template-columns:28px minmax(0,1fr);gap:7px;padding:5px 7px;}
.subscription-cart-summary .subscription-cart-summary-row .package-content-item img{width:28px;height:28px;border:0;border-radius:5px;}
.subscription-cart-summary .subscription-cart-summary-row .package-content-item span{color:inherit;}
.subscription-cart-summary .subscription-cart-summary-row .package-content-item strong{font-size:11px;}
.subscription-cart-summary .subscription-cart-summary-row .package-content-item small{font-size:9px;color:var(--ink-soft);}
.subscription-contact-form{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.subscription-field{display:grid;gap:6px;}
.subscription-field:last-of-type{grid-column:1/-1;}
.subscription-field label{font-size:12px;font-weight:750;color:#294e51;}
.subscription-field label span{color:#078a93;}
.subscription-field input{
width:100%;min-height:50px;padding:12px 14px;border:1.5px solid #cddad8;border-radius:10px;
background:#fff;color:#173f43;font:500 15px/1.2 inherit;outline:none;transition:border-color .18s,box-shadow .18s;
}
.subscription-field input:focus{border-color:#078a93;box-shadow:0 0 0 3px rgba(7,138,147,.1);}
.subscription-field.is-invalid input{border-color:#c94b45;box-shadow:0 0 0 3px rgba(201,75,69,.08);}
.subscription-field small{min-height:15px;color:#b53731;font-size:11px;}
.subscription-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;}
.subscription-submit{
grid-column:1/-1;min-height:52px;display:flex;align-items:center;justify-content:center;gap:10px;
padding:13px 20px;border:0;border-radius:999px;background:var(--brand-gradient);color:#fff;cursor:pointer;
font-family:var(--font-body);font-size:14px;font-weight:700;line-height:1.2;letter-spacing:0;
box-shadow:0 10px 24px rgba(7,94,102,.18);transition:transform .18s,background .18s,opacity .18s,box-shadow .18s;
}
.subscription-submit:hover{background:var(--brand-gradient-hover);box-shadow:0 14px 30px rgba(7,94,102,.26);transform:translateY(-1px);}
.subscription-submit:disabled{opacity:.6;cursor:wait;transform:none;}
.subscription-submit svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;}
.subscription-submit.subscription-checkout-submit,
.subscription-cart-offers-step .subscription-submit{background:#e51b1f;box-shadow:0 10px 24px rgba(229,27,31,.22);}
.subscription-submit.subscription-checkout-submit:hover,
.subscription-cart-offers-step .subscription-submit:hover{background:#c91418;box-shadow:0 14px 30px rgba(201,20,24,.28);}
.subscription-submit.subscription-checkout-submit:active,
.subscription-cart-offers-step .subscription-submit:active{background:#b81115;box-shadow:0 8px 18px rgba(184,17,21,.24);transform:none;}
.subscription-submit.subscription-checkout-submit:disabled,
.subscription-cart-offers-step .subscription-submit:disabled{background:#e51b1f;box-shadow:0 10px 24px rgba(229,27,31,.16);transform:none;}
.subscription-privacy{grid-column:1/-1;margin:0;text-align:center;color:#819193;font-size:11.5px;line-height:1.45;}
.subscription-submit-error{
grid-column:1/-1;margin:0;padding:11px 13px;border:1px solid rgba(180,35,24,.28);border-radius:10px;
background:#fff4f2;color:#9f2218;font-size:12.5px;font-weight:650;line-height:1.45;text-align:center;
}
.subscription-submit-error[hidden]{display:none;}
.subscription-offers{display:grid;gap:10px;margin-bottom:19px;}
.subscription-offer{
position:relative;display:grid;grid-template-columns:22px 64px 1fr auto;gap:12px;align-items:center;
padding:12px;border:1.5px solid #dce5e4;border-radius:14px;background:#fff;cursor:pointer;transition:border-color .18s,background .18s;
}
.subscription-offer:hover{border-color:#9fbcba;}
.subscription-offer.is-selected{border-color:#0b6f73;background:#f2f8f7;}
.subscription-offer input{position:absolute;opacity:0;pointer-events:none;}
.subscription-offer-check{width:21px;height:21px;border:1.5px solid #9eb1b0;border-radius:5px;background:#fff;display:grid;place-items:center;}
.subscription-offer.is-selected .subscription-offer-check{border-color:#111;background:#111;}
.subscription-offer-check svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;opacity:0;}
.subscription-offer.is-selected .subscription-offer-check svg{opacity:1;}
.subscription-offer-image{width:64px;height:64px;display:grid;place-items:center;border:1px solid #e0e8e7;border-radius:10px;background:#fff;overflow:hidden;}
.subscription-offer img{width:64px;height:64px;object-fit:contain;border:1px solid #e0e8e7;border-radius:10px;background:#fff;}
.subscription-offer-image img{border:0;border-radius:0;}
.subscription-offer-copy{min-width:0;}
.subscription-offer-copy strong{display:block;color:#173f43;font-size:14px;line-height:1.35;}
.subscription-offer-copy small{display:block;margin-top:4px;color:#078a93;font-size:11.5px;font-weight:750;}
.subscription-offer-price{color:#173f43;font-size:14px;font-weight:800;white-space:nowrap;}
.subscription-total{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;padding-top:16px;border-top:1px solid #dce7e5;}
.subscription-total span{color:#607678;font-size:14px;}
.subscription-total strong{color:#173f43;font-size:20px;}
.subscription-cart-offers-step .subscription-dialog-kicker{margin-right:42px;}
.subscription-offers-intro{margin:9px 42px 20px 0;color:#607678;font-size:14px;line-height:1.5;}
.subscription-offers-loading{grid-column:1/-1;margin:8px 0 20px;padding:18px;border:1px solid #dce7e5;border-radius:12px;background:#f7faf9;color:#607678;text-align:center;font-size:13px;font-weight:650;}
.subscription-offers-error{min-height:18px;margin:0 0 8px;color:#b53731;font-size:12px;line-height:1.45;}
.subscription-cart-offers-step .subscription-submit{width:100%;}
.subscription-skip{display:block;margin:13px auto 0;border:0;background:transparent;color:#657a7c;text-decoration:underline;cursor:pointer;font:650 12.5px/1.4 inherit;}
.subscription-success{text-align:center;padding:34px 12px 20px;}
.subscription-success-icon{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;background:#e7f5f2;display:grid;place-items:center;color:#078a93;}
.subscription-success-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;}
.subscription-processing-icon svg{animation:subscription-processing-pulse 1s ease-in-out infinite;}
@keyframes subscription-processing-pulse{50%{opacity:.45;transform:scale(.92);}}
.subscription-success .subscription-submit{width:100%;margin-top:22px;}
@media (prefers-reduced-motion:reduce){.subscription-processing-icon svg{animation:none;}}
/* Subscription upsell mirrors the regular checkout offer; only its prices differ. */
.subscription-modal.is-upsell{padding:20px;}
.subscription-modal.is-upsell .subscription-modal-backdrop{
background:rgba(8,34,36,.62);backdrop-filter:blur(7px);
}
.subscription-modal.is-upsell .subscription-dialog{
width:min(720px,100%);max-height:min(780px,calc(100dvh - 40px));
box-shadow:0 28px 80px rgba(8,34,36,.28);
}
.subscription-modal.is-upsell .subscription-dialog-body{padding:36px;}
.subscription-modal.is-upsell .subscription-dialog-close{
top:16px;right:16px;width:44px;height:44px;border:1px solid var(--line);background:#fff;color:var(--ink);
}
.subscription-modal.is-upsell .subscription-dialog-close:hover{background:var(--cream);border-color:var(--moss);}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-badge{
display:block;margin:0 52px 10px 0;color:var(--moss);font-size:16px;font-weight:800;line-height:1.3;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"]>h2{
margin:0 52px 22px 0;color:var(--ink);font-family:var(--font-display);
font-size:clamp(25px,3.5vw,34px);font-weight:650;line-height:1.15;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-list{display:grid;gap:10px;margin-bottom:0;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-option{
position:relative;display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;
gap:16px;min-height:116px;padding:12px 14px;border:1.5px solid var(--line);border-radius:16px;
background:#fff;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-option:hover{border-color:rgba(7,138,147,.55);}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-option.is-selected{
border-color:var(--moss);background:rgba(221,244,242,.55);box-shadow:0 0 0 3px rgba(7,138,147,.1);
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-option input{position:absolute;opacity:0;pointer-events:none;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-image{
width:92px;height:92px;display:grid;place-items:center;border-radius:12px;background:var(--cream);overflow:hidden;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-image img{
width:100%;height:100%;padding:5px;object-fit:contain;border:0;border-radius:0;background:transparent;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-copy{min-width:0;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-copy strong{
display:block;color:var(--ink);font-size:15px;line-height:1.35;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-price{
display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 9px;margin-top:8px;font-variant-numeric:tabular-nums;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-price del{
color:var(--ink-soft);font-size:11.5px;font-weight:550;line-height:1.3;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-current-price{
color:var(--moss-dark);font-size:15px;font-weight:850;line-height:1.3;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-add-state{
min-width:94px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
padding:9px 13px;border:1.5px solid var(--moss);border-radius:999px;color:var(--moss-dark);
background:#fff;font-size:12px;font-weight:800;white-space:nowrap;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-add-state::before{content:"+";font-size:18px;font-weight:500;line-height:1;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-option.is-selected .checkout-upsell-add-state{background:var(--moss);color:#fff;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-option.is-selected .checkout-upsell-add-state::before{content:"✓";font-size:14px;font-weight:800;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-selection{
display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 12px;padding:12px 14px;
border-radius:12px;background:var(--cream);color:var(--ink-soft);font-size:12.5px;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-selection strong{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-error{
min-height:0;margin:0 0 8px;color:#b42318;font-size:12px;text-align:center;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-confirm,
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-skip{
width:100%;min-height:50px;border-radius:999px;font:800 14px var(--font-body);cursor:pointer;
transition:background .18s var(--ease),opacity .18s var(--ease),transform .12s var(--ease);
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-confirm{
border:0;background:#e51b1f;color:#fff;box-shadow:0 10px 24px rgba(229,27,31,.22);
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-confirm:hover:not(:disabled){background:#c91418;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-confirm:disabled{background:#e51b1f;opacity:.45;cursor:not-allowed;box-shadow:none;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-skip{
margin-top:8px;border:0;background:transparent;color:var(--ink-soft);font-weight:650;text-decoration:none;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-skip:hover{color:var(--ink);background:var(--cream);}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-confirm:active:not(:disabled),
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-skip:active{transform:scale(.99);}
.subscription-modal.is-upsell .subscription-dialog-close:focus-visible,
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-option:focus-within,
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-confirm:focus-visible,
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-skip:focus-visible{outline:3px solid rgba(7,138,147,.3);outline-offset:3px;}
body.has-subscription-modal{overflow:hidden;}
@media(max-width:640px){
.subscription-modal{padding:0;display:block;}
.subscription-dialog{
width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;
box-shadow:none;transform:translateY(10px);
}
.subscription-dialog-close{top:calc(10px + env(safe-area-inset-top));right:12px;}
.subscription-dialog-body{
min-height:100%;padding:calc(54px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}
.subscription-submit{min-height:48px;font-size:13px;font-weight:700;}
.subscription-contact-form{grid-template-columns:1fr;gap:11px;}
.subscription-field:last-of-type{grid-column:auto;}
.subscription-offer{grid-template-columns:21px 54px 1fr;gap:10px;}
.subscription-offer-image{width:54px;height:54px;}
.subscription-offer img{width:54px;height:54px;}
.subscription-offer-price{grid-column:3;margin-top:-4px;}
.subscription-modal.is-upsell{padding:0;}
.subscription-modal.is-upsell .subscription-dialog-body{padding:28px 16px calc(18px + env(safe-area-inset-bottom));}
.subscription-modal.is-upsell .subscription-dialog{height:100dvh;max-height:100dvh;border-radius:0;}
.subscription-modal.is-upsell .subscription-dialog-close{top:calc(10px + env(safe-area-inset-top));right:12px;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-badge{margin-right:46px;font-size:15px;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"]>h2{margin-right:44px;font-size:25px;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-option{
grid-template-columns:76px minmax(0,1fr);gap:12px;min-height:100px;padding:10px;
}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-image{width:76px;height:76px;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-copy strong{font-size:13.5px;}
.subscription-modal.is-upsell [data-cart-subscription-step="offers"] .checkout-upsell-add-state{grid-column:1/-1;width:100%;}
}
@media(prefers-reduced-motion:reduce){
.subscription-modal,.subscription-dialog{transition:none;}
}
/* One consistent, high-contrast treatment for percentage discounts. */
.product-badge.sale,
.discount-pill {
border-color: transparent !important;
background: var(--sale-badge) !important;
color: var(--sale-badge-text) !important;
box-shadow: 0 5px 14px -10px rgba(84, 15, 11, .9) !important;
}
/* Checkout payment methods: explicit choice, branded wallets and accessible icons. */
html.page-checkout .pay-tabs{
gap:8px!important;
overflow:visible!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
}
html.page-checkout .pay-option,
html.page-checkout .pay-option+.pay-option{
overflow:hidden;
border:1px solid #d5d8dc!important;
border-radius:8px;
background:#fff;
transition:border-color .2s ease,box-shadow .2s ease;
}
html.page-checkout .pay-option:has(.pay-tab.active){
border-color:var(--moss)!important;
box-shadow:0 0 0 1px var(--moss);
}
html.page-checkout .pay-tab,
html.page-checkout .pay-tab.active{
position:relative;
z-index:auto;
width:100%!important;
min-height:62px!important;
margin:0!important;
padding:7px 12px!important;
gap:10px!important;
border:0!important;
border-radius:0!important;
background:#fff!important;
color:#202223!important;
box-shadow:none!important;
touch-action:manipulation;
}
html.page-checkout .pay-tab:hover{background:#f7f9f9!important;}
html.page-checkout .pay-tab.active{background:#f3fbfa!important;}
html.page-checkout .pay-radio{
width:20px!important;
height:20px!important;
flex:0 0 20px!important;
border:2px solid #747a80!important;
}
html.page-checkout .pay-radio::after{
width:10px!important;
height:10px!important;
background:var(--moss)!important;
}
html.page-checkout .pay-tab.active .pay-radio{border-color:var(--moss)!important;}
html.page-checkout .pay-method-icon{
width:50px;
height:38px;
flex:0 0 50px;
display:grid;
place-items:center;
overflow:hidden;
border:1px solid #25282b;
border-radius:7px;
background:#fff;
color:#555b60;
}
html.page-checkout .pay-method-icon>svg{
display:block!important;
width:24px!important;
height:24px!important;
flex:none!important;
}
html.page-checkout .pay-method-icon-brand{
color:#111;
font-family:Arial,Helvetica,sans-serif;
white-space:nowrap;
}
html.page-checkout .apple-pay-mark{font-size:11.5px;font-weight:700;letter-spacing:-.03em;}
html.page-checkout .google-pay-mark{display:flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:-.02em;}
html.page-checkout .google-pay-mark b{color:#4285f4;font-size:16px;line-height:1;}
html.page-checkout .pay-tab-copy{
min-width:0;
flex:1;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:2px;
}
html.page-checkout .pay-tab-label{
flex:none!important;
max-width:100%;
color:#202223;
font-size:14px;
font-weight:700!important;
line-height:1.25;
white-space:normal!important;
}
html.page-checkout .pay-tab-description{
color:#697078;
font-size:12px;
font-weight:450;
line-height:1.35;
}
html.page-checkout .payment-method-note,
html.page-checkout .stripe-payment-panel{
padding:12px 14px!important;
border-top:1px solid #dfe2e5!important;
background:#f8fbfb!important;
}
html.page-checkout .payment-method-error{
margin:-2px 0 14px;
padding:11px 13px;
border:1px solid #f2b8b5;
border-radius:7px;
background:#fef3f2;
color:#b42318;
font-size:13px;
line-height:1.4;
}
html.page-checkout .wallet-payment-confirmation{
margin:14px 0 18px;
padding:16px;
border:1px solid var(--moss);
border-radius:10px;
background:#f3fbfa;
outline:none;
}
html.page-checkout .wallet-payment-confirmation>strong{
display:block;
margin:0 0 5px;
color:#202223;
font-size:15px;
line-height:1.35;
}
html.page-checkout .wallet-payment-confirmation>p:not(.stripe-payment-error){
margin:0 0 13px;
color:#60676e;
font-size:12.5px;
line-height:1.5;
}
html.page-checkout #walletPaymentConfirmationSlot,
html.page-checkout .wallet-express-shell{width:100%;min-height:54px;}
.wallet-element-staging{
position:fixed;
top:-10000px;
left:-10000px;
z-index:-1;
width:360px;
visibility:hidden;
pointer-events:none;
}
.wallet-element-staging .wallet-express-shell{visibility:hidden;}
@media(min-width:901px){
html.page-checkout #checkoutTermsConsent{margin-bottom:8px!important;}
html.page-checkout .checkout-terms-consent label{
min-height:44px;
padding-block:0;
align-items:center;
}
html.page-checkout .checkout-terms-consent input{margin-top:0;}
}
@media(max-width:560px){
html.page-checkout .checkout-payment-step{margin-bottom:12px!important;}
html.page-checkout .mobile-submit-panel{
width:100%;
margin:0!important;
padding:0 0 calc(16px + env(safe-area-inset-bottom))!important;
border-radius:0!important;
}
html.page-checkout .mobile-submit-panel .submit-btn{
width:100%!important;
margin:0!important;
}
html.page-checkout .mobile-submit-panel .secure-note{margin:10px 0 0!important;}
html.page-checkout .pay-tab,
html.page-checkout .pay-tab.active{
min-height:74px!important;
padding:9px 10px!important;
gap:9px!important;
}
html.page-checkout .pay-radio{
width:22px!important;
height:22px!important;
flex-basis:22px!important;
}
html.page-checkout .pay-radio::after{width:10px!important;height:10px!important;}
html.page-checkout .pay-method-icon{width:56px;height:44px;flex-basis:56px;}
html.page-checkout .pay-tab-label{font-size:13.5px;}
html.page-checkout .pay-tab-description{font-size:11.5px;}
}
@media(prefers-reduced-motion:reduce){
html.page-checkout .pay-option{transition:none;}
}
/* =====================================================
PRODUCT HTML BLOCKS — SMOOTH COCOA LANDING
Markup is admin-editable; presentation remains versioned and safe here.
===================================================== */
html.page-product .product-content-wrap.has-html-landing{
grid-template-columns:minmax(0,1fr);
gap:0;
width:100%;
max-width:1440px;
}
html.page-product .product-content-wrap.has-html-landing>.product-section-rail{display:none;}
html.page-product .product-html-section{
padding:0;
border:0;
overflow:hidden;
border-radius:24px;
background:#f7efe7;
}
html.page-product .product-html-block{min-width:0;color:#24150f;}
html.page-product .smooth-cocoa-landing{
--sc-ink:#24150f;
--sc-brown:#4a2112;
--sc-brown-deep:#241108;
--sc-cocoa:#7a351d;
--sc-caramel:#b7643c;
--sc-cream:#fbf6f0;
--sc-soft:#f3e4d7;
--sc-line:rgba(75,36,20,.15);
--sc-white:#fff;
--sc-section-accent:#8b462b;
width:100%;
overflow:hidden;
background:var(--sc-cream);
color:var(--sc-ink);
font-family:var(--font-body);
}
html.page-product .smooth-cocoa-landing *{box-sizing:border-box;}
html.page-product .smooth-cocoa-landing img{display:block;width:100%;height:auto;margin:0;border:0;border-radius:0;}
html.page-product .smooth-cocoa-landing :where(h2,h3,h4,p,ul){margin-top:0;}
html.page-product .sc-shell{width:min(1180px,calc(100% - 48px));margin-inline:auto;}
html.page-product .sc-kicker{
display:inline-flex;
align-items:center;
min-height:28px;
margin-bottom:12px;
padding:5px 11px;
border:1px solid currentColor;
border-radius:999px;
font-size:11px;
font-weight:850;
letter-spacing:.1em;
text-transform:uppercase;
}
html.page-product .sc-title{
margin-bottom:14px!important;
color:inherit!important;
font-family:var(--font-display)!important;
font-size:clamp(31px,4vw,58px)!important;
font-weight:600!important;
line-height:1.04!important;
letter-spacing:-.035em!important;
text-wrap:balance;
}
html.page-product .sc-lead{
max-width:62ch!important;
margin-bottom:0!important;
color:inherit!important;
font-size:clamp(16px,1.65vw,20px)!important;
line-height:1.58!important;
}
html.page-product .sc-facts{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
border-bottom:1px solid var(--sc-line);
background:#fff;
}
html.page-product .sc-fact{padding:25px 22px;text-align:center;border-right:1px solid var(--sc-line);}
html.page-product .sc-fact:last-child{border-right:0;}
html.page-product .sc-fact strong{display:block;margin-bottom:3px;color:var(--sc-brown);font-size:clamp(21px,2.2vw,31px);font-weight:850;font-variant-numeric:tabular-nums;}
html.page-product .sc-fact span{display:block;color:#67554c;font-size:12px;font-weight:700;line-height:1.4;text-transform:uppercase;letter-spacing:.045em;}
html.page-product .sc-story{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
min-height:560px;
background:var(--sc-brown-deep);
color:#fff8f1;
}
html.page-product .sc-story-media{min-height:520px;overflow:hidden;}
html.page-product .sc-story-media img{height:100%;object-fit:cover;}
html.page-product .sc-story-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(42px,6vw,82px);}
html.page-product .sc-story-copy .sc-lead{color:#eadbd2!important;}
html.page-product .sc-mini-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:34px;border-top:1px solid rgba(255,255,255,.2);}
html.page-product .sc-mini-metric{padding:18px 14px 0 0;}
html.page-product .sc-mini-metric strong{display:block;color:#fff;font-size:18px;font-weight:850;}
html.page-product .sc-mini-metric span{display:block;margin-top:4px;color:#d9c3b7;font-size:12px;line-height:1.35;}
html.page-product .sc-section{padding:clamp(56px,7vw,96px) 0;}
html.page-product .sc-ingredients{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
html.page-product .sc-ingredient{overflow:hidden;border:1px solid var(--sc-line);border-radius:18px;background:#fff;box-shadow:0 18px 45px rgba(66,31,16,.07);}
html.page-product .sc-ingredient figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--sc-soft);}
html.page-product .sc-ingredient figure img{height:100%;object-fit:cover;transition:transform .28s ease-out;}
html.page-product .sc-ingredient:hover figure img{transform:scale(1.025);}
html.page-product .sc-ingredient-copy{padding:20px 19px 22px;}
html.page-product .sc-ingredient h3{margin:0 0 7px!important;color:var(--sc-ink)!important;font-family:var(--font-body)!important;font-size:16px!important;font-weight:850!important;line-height:1.3!important;}
html.page-product .sc-ingredient p{margin:0!important;color:#6b574d!important;font-size:13.5px!important;line-height:1.55!important;}
html.page-product .sc-uses{background:linear-gradient(135deg,#2b140b,#572616);color:#fff8f1;}
html.page-product .sc-uses-image{overflow:hidden;margin-bottom:24px;border-radius:20px;border:1px solid rgba(255,255,255,.14);aspect-ratio:16/7;background:#190b06;}
html.page-product .sc-uses-image img{height:100%;object-fit:cover;}
html.page-product .sc-use-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
html.page-product .sc-use{min-height:148px;padding:23px 20px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.07);}
html.page-product .sc-use span{display:grid;place-items:center;width:34px;height:34px;margin-bottom:17px;border-radius:50%;background:#fff7ef;color:var(--sc-brown);font-size:13px;font-weight:900;}
html.page-product .sc-use h3{margin:0 0 6px!important;color:#fff!important;font-family:var(--font-body)!important;font-size:16px!important;font-weight:850!important;}
html.page-product .sc-use p{margin:0!important;color:#dec9bd!important;font-size:13px!important;line-height:1.5!important;}
html.page-product .sc-routine{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:#efe0d3;}
html.page-product .sc-routine-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(42px,6vw,82px);}
html.page-product .sc-routine-media{min-height:520px;overflow:hidden;}
html.page-product .sc-routine-media img{height:100%;object-fit:cover;object-position:center;}
html.page-product .sc-details{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:start;}
html.page-product .sc-nutrition,html.page-product .sc-accordions{min-width:0;padding:24px;border:1px solid var(--sc-line);border-radius:18px;background:#fff;box-shadow:0 16px 42px rgba(66,31,16,.06);}
html.page-product .sc-card-title{margin:0 0 18px!important;color:var(--sc-ink)!important;font-family:var(--font-display)!important;font-size:23px!important;font-weight:600!important;line-height:1.2!important;}
html.page-product .sc-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
html.page-product .sc-nutrition table{width:100%;min-width:520px;border:0;border-collapse:collapse;font-variant-numeric:tabular-nums;}
html.page-product .sc-nutrition th,html.page-product .sc-nutrition td{padding:10px 11px;border:0;border-bottom:1px solid var(--sc-line);font-size:12.5px;text-align:right;}
html.page-product .sc-nutrition th:first-child,html.page-product .sc-nutrition td:first-child{text-align:left;}
html.page-product .sc-nutrition thead th{color:#765f53;font-size:11px;text-transform:uppercase;letter-spacing:.04em;}
html.page-product .sc-nutrition tbody tr:last-child td{border-bottom:0;}
html.page-product .sc-accordions{display:grid;gap:10px;}
html.page-product .sc-accordion{overflow:hidden;border:1px solid var(--sc-line);border-radius:13px;background:var(--sc-cream);}
html.page-product .sc-accordion summary{position:relative;display:flex;align-items:center;min-height:56px;padding:14px 48px 14px 16px;color:var(--sc-ink);font-size:14px;font-weight:850;line-height:1.35;cursor:pointer;list-style:none;}
html.page-product .sc-accordion summary::-webkit-details-marker{display:none;}
html.page-product .sc-accordion summary::after{content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;}
html.page-product .sc-accordion[open] summary::after{content:'−';}
html.page-product .sc-accordion-copy{padding:0 16px 16px;color:#604b41;font-size:13.5px;line-height:1.62;}
html.page-product .sc-accordion-copy p{margin:0!important;max-width:none!important;color:inherit!important;font-size:inherit!important;line-height:inherit!important;}
html.page-product .sc-final{position:relative;overflow:hidden;padding:clamp(58px,8vw,100px) 24px;background:var(--sc-brown-deep);color:#fff;text-align:center;}
html.page-product .sc-final::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle at 50% 50%,rgba(183,100,60,.32),transparent 48%);pointer-events:none;}
html.page-product .sc-final-copy{position:relative;z-index:1;width:min(680px,100%);margin-inline:auto;}
html.page-product .sc-final h2{margin:0 0 12px!important;color:#fff!important;font-family:var(--font-display)!important;font-size:clamp(31px,4vw,54px)!important;font-weight:600!important;line-height:1.05!important;letter-spacing:-.03em!important;}
html.page-product .sc-final p{margin:0 auto 25px!important;color:#dec9bd!important;font-size:16px!important;line-height:1.55!important;}
html.page-product .smooth-cocoa-landing a.sc-cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:min(100%,300px);
min-height:52px;
padding:13px 24px;
border:2px solid #fff;
border-radius:999px;
background:#fff;
color:var(--sc-brown-deep)!important;
font-size:14px;
font-weight:850;
text-decoration:none!important;
transition:transform .2s ease-out,background .2s ease-out,color .2s ease-out;
}
html.page-product .smooth-cocoa-landing a.sc-cta:hover{transform:translateY(-1px);background:transparent;color:#fff!important;}
html.page-product .smooth-cocoa-landing a.sc-cta:focus-visible{outline:3px solid #f3bd95;outline-offset:4px;}
@media(max-width:900px){
html.page-product .product-html-section{margin-inline:-20px;border-radius:0;}
html.page-product .sc-story,html.page-product .sc-routine{grid-template-columns:1fr;}
html.page-product .sc-story-media,html.page-product .sc-routine-media{min-height:0;aspect-ratio:16/10;}
html.page-product .sc-story-copy,html.page-product .sc-routine-copy{padding:48px 32px;}
html.page-product .sc-ingredients,html.page-product .sc-use-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
html.page-product .sc-details{grid-template-columns:1fr;}
}
@media(max-width:620px){
html.page-product .sc-shell{width:min(100% - 32px,1180px);}
html.page-product .sc-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
html.page-product .sc-fact:nth-child(2){border-right:0;}
html.page-product .sc-fact:nth-child(-n+2){border-bottom:1px solid var(--sc-line);}
html.page-product .sc-fact{padding:19px 12px;}
html.page-product .sc-fact strong{font-size:22px;}
html.page-product .sc-fact span{font-size:10.5px;}
html.page-product .sc-story-media,html.page-product .sc-routine-media{aspect-ratio:4/3;}
html.page-product .sc-story-copy,html.page-product .sc-routine-copy{padding:38px 20px;}
html.page-product .sc-mini-metrics{grid-template-columns:1fr;gap:0;}
html.page-product .sc-mini-metric{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);}
html.page-product .sc-mini-metric:last-child{border-bottom:0;}
html.page-product .sc-section{padding:54px 0;}
html.page-product .sc-ingredients{grid-template-columns:1fr;gap:13px;}
html.page-product .sc-ingredient{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;}
html.page-product .sc-ingredient figure{height:100%;min-height:150px;aspect-ratio:auto;}
html.page-product .sc-ingredient-copy{padding:17px 16px;}
html.page-product .sc-uses-image{aspect-ratio:4/3;}
html.page-product .sc-use-grid{grid-template-columns:1fr;}
html.page-product .sc-use{min-height:0;}
html.page-product .sc-nutrition,html.page-product .sc-accordions{padding:17px;border-radius:15px;}
html.page-product .sc-final{padding-inline:20px;}
}
@media(prefers-reduced-motion:reduce){
html.page-product .sc-ingredient figure img,html.page-product .smooth-cocoa-landing a.sc-cta{transition:none;}
}
/* Smooth Cocoa editorial landing v2 — aligned to the approved reference */
html.page-product .product-html-section{
border-radius:0;
background:#f8efe7;
box-shadow:0 28px 80px rgba(57,25,12,.08);
}
html.page-product .smooth-cocoa-landing{
--sc-ink:#1f130e;
--sc-brown:#5b2815;
--sc-brown-deep:#241008;
--sc-cocoa:#77351e;
--sc-caramel:#b96842;
--sc-cream:#fff9f4;
--sc-soft:#f1ded0;
--sc-line:rgba(70,31,15,.14);
background:#f8eee5;
}
html.page-product .smooth-cocoa-landing :where(.sc-title,.sc-card-title,.sc-final h2){
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,var(--font-display),sans-serif!important;
font-weight:700!important;
letter-spacing:.005em!important;
text-transform:uppercase;
}
html.page-product .sc-shell{width:min(1240px,calc(100% - 56px));}
html.page-product .sc-facts{
grid-template-columns:repeat(4,minmax(0,1fr));
padding:22px clamp(20px,4vw,58px);
border:0;
background:rgba(255,252,249,.96);
}
html.page-product .sc-fact{
display:grid;
grid-template-columns:58px minmax(0,1fr);
grid-template-rows:auto auto;
column-gap:14px;
align-items:center;
padding:12px clamp(14px,2vw,26px);
border-right:1px solid var(--sc-line);
text-align:left;
}
html.page-product .sc-fact-ring{
grid-row:1/3;
display:grid;
place-items:center;
width:58px;
height:58px;
border:1.5px solid var(--sc-brown);
border-radius:50%;
color:var(--sc-brown);
font-size:14px;
font-weight:900;
letter-spacing:-.02em;
}
html.page-product .sc-fact strong{
align-self:end;
margin:0 0 2px;
color:var(--sc-ink);
font-size:13px;
line-height:1.25;
text-transform:uppercase;
}
html.page-product .sc-fact span:not(.sc-fact-ring){
align-self:start;
color:#7a665b;
font-size:11px;
font-weight:600;
line-height:1.35;
letter-spacing:0;
text-transform:none;
}
html.page-product .sc-story{
grid-template-columns:minmax(0,1.06fr) minmax(400px,.94fr);
min-height:620px;
background:linear-gradient(135deg,#2a1208 0%,#5b2815 100%);
}
html.page-product .sc-story-media{min-height:620px;}
html.page-product .sc-story-media img{object-position:center 48%;}
html.page-product .sc-story-copy{padding:clamp(54px,6vw,92px);}
html.page-product .sc-story-copy::before{
content:"ШОКОЛАДОВА МЕЧТА";
display:block;
margin-bottom:12px;
color:#e7b193;
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;
font-size:13px;
font-weight:800;
letter-spacing:.16em;
}
html.page-product .sc-title{font-size:clamp(38px,4.4vw,67px)!important;line-height:.98!important;}
html.page-product .sc-story-copy .sc-kicker{display:none;}
html.page-product .sc-mini-metrics{margin-top:38px;}
html.page-product .sc-mini-metric strong{font-size:20px;}
html.page-product .sc-section{padding:clamp(62px,7vw,102px) 0;}
html.page-product .sc-ingredients{gap:18px;}
html.page-product .sc-ingredient{
border-radius:12px;
border-color:rgba(91,40,21,.12);
box-shadow:0 16px 38px rgba(73,33,16,.08);
}
html.page-product .sc-ingredient figure{aspect-ratio:1.12/1;}
html.page-product .sc-ingredient-copy{min-height:142px;padding:20px;text-align:center;}
html.page-product .sc-ingredient h3{
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif!important;
font-size:20px!important;
text-transform:uppercase;
}
html.page-product .sc-uses{
padding-top:56px;
background:linear-gradient(145deg,#170905 0%,#3c190c 52%,#160804 100%);
}
html.page-product .sc-uses-image{
margin-bottom:0;
border:0;
border-radius:0;
aspect-ratio:2.32/1;
box-shadow:0 20px 60px rgba(0,0,0,.28);
}
html.page-product .sc-use-grid{gap:0;border:1px solid rgba(255,255,255,.12);border-top:0;}
html.page-product .sc-use{
min-height:126px;
padding:20px;
border:0;
border-right:1px solid rgba(255,255,255,.12);
border-radius:0;
background:rgba(255,255,255,.045);
text-align:center;
}
html.page-product .sc-use:last-child{border-right:0;}
html.page-product .sc-use span{margin:0 auto 12px;background:#f1d5c2;}
html.page-product .sc-use h3{
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif!important;
font-size:19px!important;
text-transform:uppercase;
}
html.page-product .sc-details{gap:24px;}
html.page-product .sc-nutrition,html.page-product .sc-accordions{
border-radius:14px;
box-shadow:0 18px 44px rgba(71,31,14,.07);
}
html.page-product .sc-card-title{font-size:29px!important;}
html.page-product .sc-final{
padding-block:clamp(56px,7vw,84px);
background:linear-gradient(100deg,#291108,#6d3019 55%,#291108);
}
html.page-product .sc-final h2{font-size:clamp(38px,4.4vw,62px)!important;}
@media(max-width:1080px){
html.page-product .sc-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
html.page-product .sc-fact:nth-child(2){border-right:0;}
html.page-product .sc-fact:nth-child(-n+2){border-bottom:1px solid var(--sc-line);}
}
@media(max-width:760px){
html.page-product .sc-shell{width:min(100% - 28px,1240px);}
html.page-product .sc-story{grid-template-columns:1fr;min-height:0;}
html.page-product .sc-story-media{min-height:0;aspect-ratio:1.35/1;}
html.page-product .sc-story-copy{padding:40px 22px 46px;}
html.page-product .sc-facts{padding:8px 14px;}
html.page-product .sc-fact{grid-template-columns:42px minmax(0,1fr);column-gap:10px;padding:14px 8px;}
html.page-product .sc-fact-ring{width:42px;height:42px;font-size:11px;}
html.page-product .sc-fact strong{font-size:10.5px;}
html.page-product .sc-fact span:not(.sc-fact-ring){font-size:9.5px;}
html.page-product .sc-ingredient{grid-template-columns:132px minmax(0,1fr);}
html.page-product .sc-ingredient-copy{min-height:0;text-align:left;}
html.page-product .sc-uses-image{aspect-ratio:1.5/1;}
html.page-product .sc-use-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
html.page-product .sc-use:nth-child(2){border-right:0;}
html.page-product .sc-use:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12);}
}
/* Smooth Cocoa v3 — exact nutrition story and four preparation cards */
html.page-product .sc-nutrition-story{
overflow:hidden;
padding:clamp(40px,5vw,70px) 0;
background:
radial-gradient(circle at 73% 46%,rgba(132,63,34,.34),transparent 34%),
linear-gradient(112deg,#251008 0%,#3d190e 47%,#1a0a05 100%);
color:#fff8f2;
}
html.page-product .sc-nutrition-story-grid{
display:grid;
grid-template-columns:minmax(260px,.72fr) minmax(610px,1.55fr);
align-items:center;
min-height:430px;
}
html.page-product .sc-nutrition-story-copy{
position:relative;
z-index:2;
padding:24px 34px 24px 0;
}
html.page-product .sc-nutrition-story-copy .sc-kicker{
min-height:0;
margin:0 0 14px;
padding:0;
border:0;
color:#e7b08f;
letter-spacing:.16em;
}
html.page-product .sc-nutrition-story-copy .sc-title{
margin:0 0 6px!important;
color:#fff!important;
font-size:clamp(36px,3.7vw,58px)!important;
line-height:.98!important;
}
html.page-product .sc-nutrition-story-copy h3{
margin:0 0 26px!important;
color:#d9895f!important;
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif!important;
font-size:clamp(23px,2.25vw,34px)!important;
font-weight:500!important;
line-height:1.05!important;
text-transform:uppercase;
}
html.page-product .sc-nutrition-story-copy p{
max-width:38ch!important;
margin:0!important;
color:#f2e3da!important;
font-size:15px!important;
line-height:1.65!important;
}
html.page-product .sc-nutrition-visual{
position:relative;
min-height:430px;
isolation:isolate;
}
html.page-product .sc-nutrition-visual::before{
content:"";
position:absolute;
left:50%;
top:50%;
z-index:0;
width:min(47%,390px);
aspect-ratio:1;
transform:translate(-50%,-50%);
border:1px solid rgba(224,157,116,.42);
border-radius:50%;
box-shadow:0 0 0 38px rgba(217,137,95,.055),0 0 0 76px rgba(217,137,95,.035);
}
html.page-product .sc-nutrition-visual img{
position:absolute;
inset:0;
z-index:-1;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
opacity:.98;
}
html.page-product .sc-nutrient{
position:absolute;
z-index:2;
width:168px;
min-height:52px;
color:#fff;
}
html.page-product .sc-nutrient strong{
display:block;
margin:0 0 3px;
color:#fff;
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;
font-size:14px;
font-weight:700;
letter-spacing:.04em;
line-height:1.1;
text-transform:uppercase;
}
html.page-product .sc-nutrient small{
display:block;
color:#ead6ca;
font-size:10.5px;
line-height:1.35;
}
html.page-product .sc-nutrient-icon{
position:absolute;
top:0;
display:grid;
place-items:center;
width:34px;
height:34px;
border:1px solid rgba(255,235,223,.74);
border-radius:50%;
color:#fff4ed;
font-size:10px;
font-weight:850;
}
html.page-product .sc-nutrient::after{
content:"";
position:absolute;
top:17px;
width:52px;
height:1px;
background:linear-gradient(90deg,rgba(230,173,139,.18),rgba(230,173,139,.72));
}
html.page-product .sc-nutrient-protein,
html.page-product .sc-nutrient-carbs,
html.page-product .sc-nutrient-fibre{
left:1%;
padding-right:46px;
text-align:right;
}
html.page-product .sc-nutrient-protein .sc-nutrient-icon,
html.page-product .sc-nutrient-carbs .sc-nutrient-icon,
html.page-product .sc-nutrient-fibre .sc-nutrient-icon{right:0;}
html.page-product .sc-nutrient-protein::after,
html.page-product .sc-nutrient-carbs::after,
html.page-product .sc-nutrient-fibre::after{left:calc(100% + 8px);}
html.page-product .sc-nutrient-fats,
html.page-product .sc-nutrient-vitamins,
html.page-product .sc-nutrient-minerals{
right:1%;
padding-left:46px;
text-align:left;
}
html.page-product .sc-nutrient-fats .sc-nutrient-icon,
html.page-product .sc-nutrient-vitamins .sc-nutrient-icon,
html.page-product .sc-nutrient-minerals .sc-nutrient-icon{left:0;}
html.page-product .sc-nutrient-fats::after,
html.page-product .sc-nutrient-vitamins::after,
html.page-product .sc-nutrient-minerals::after{
right:calc(100% + 8px);
transform:scaleX(-1);
}
html.page-product .sc-nutrient-protein,html.page-product .sc-nutrient-fats{top:9%;}
html.page-product .sc-nutrient-carbs,html.page-product .sc-nutrient-vitamins{top:42%;}
html.page-product .sc-nutrient-fibre,html.page-product .sc-nutrient-minerals{top:75%;}
@media(max-width:1080px){
html.page-product .sc-nutrition-story-grid{grid-template-columns:minmax(230px,.68fr) minmax(520px,1.45fr);}
html.page-product .sc-nutrient{width:142px;}
html.page-product .sc-nutrient::after{width:30px;}
}
@media(max-width:860px){
html.page-product .sc-nutrition-story-grid{grid-template-columns:1fr;}
html.page-product .sc-nutrition-story-copy{padding:12px 0 34px;text-align:center;}
html.page-product .sc-nutrition-story-copy p{margin-inline:auto!important;}
html.page-product .sc-nutrition-visual{min-height:440px;}
}
@media(max-width:560px){
html.page-product .sc-nutrition-story{padding:38px 0 44px;}
html.page-product .sc-nutrition-story-copy{text-align:left;}
html.page-product .sc-nutrition-story-copy .sc-title{font-size:38px!important;}
html.page-product .sc-nutrition-story-copy h3{font-size:25px!important;}
html.page-product .sc-nutrition-story-copy p{font-size:14px!important;}
html.page-product .sc-nutrition-visual{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 14px;
min-height:0;
padding-top:72%;
}
html.page-product .sc-nutrition-visual::before{top:28%;width:42%;}
html.page-product .sc-nutrition-visual img{height:auto;aspect-ratio:1.72/1;object-fit:cover;}
html.page-product .sc-nutrient{
position:relative;
inset:auto;
width:auto;
min-height:74px;
padding:14px 0 12px 42px;
border-top:1px solid rgba(255,255,255,.16);
text-align:left;
}
html.page-product .sc-nutrient-icon,
html.page-product .sc-nutrient-protein .sc-nutrient-icon,
html.page-product .sc-nutrient-carbs .sc-nutrient-icon,
html.page-product .sc-nutrient-fibre .sc-nutrient-icon,
html.page-product .sc-nutrient-fats .sc-nutrient-icon,
html.page-product .sc-nutrient-vitamins .sc-nutrient-icon,
html.page-product .sc-nutrient-minerals .sc-nutrient-icon{left:0;right:auto;top:13px;}
html.page-product .sc-nutrient::after{display:none;}
html.page-product .sc-nutrient strong{font-size:12px;}
html.page-product .sc-nutrient small{font-size:9.5px;}
}
/* =====================================================
SMOOTH COCOA LANDING V5
Full-bleed chapters aligned with the Kavrakovi design system.
===================================================== */
html.page-product body{overflow-x:hidden;overflow-x:clip;}
html.page-product .product-content-wrap.has-html-landing{
position:relative;
left:auto;
display:block;
width:100vw;
width:100dvw;
max-width:none;
margin-top:64px!important;
margin-right:calc(50% - 50vw)!important;
margin-right:calc(50% - 50dvw)!important;
margin-left:calc(50% - 50vw)!important;
margin-left:calc(50% - 50dvw)!important;
border-top:0;
}
html.page-product .product-page:has(.product-content-wrap.has-html-landing){
padding-bottom:0;
}
html.page-product .product-content-wrap.has-html-landing .product-content-main,
html.page-product .product-content-wrap.has-html-landing .product-sections,
html.page-product .product-content-wrap.has-html-landing .product-html-section,
html.page-product .product-content-wrap.has-html-landing .product-html-block{
width:100%;
max-width:none;
min-width:0;
margin:0;
}
html.page-product .product-content-wrap.has-html-landing .product-html-section{
padding:0;
overflow:visible;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
}
html.page-product .smooth-cocoa-landing{
--sc-brand:var(--crystal,#078a93);
--sc-brand-deep:var(--crystal-deep,#075e66);
--sc-brand-bright:var(--crystal-bright,#19b5bd);
--sc-ink:var(--ink,#181818);
--sc-muted:#665d58;
--sc-cocoa:#6f351f;
--sc-cocoa-dark:#24110a;
--sc-cocoa-mid:#4a2315;
--sc-caramel:#c57a51;
--sc-cream:#fbf6f1;
--sc-cream-deep:#f1e2d7;
--sc-aqua:#eff8f7;
--sc-line:rgba(31,19,14,.12);
width:100%;
max-width:none;
overflow:hidden;
background:#fff;
color:var(--sc-ink);
font-family:var(--font-body,'Inter',sans-serif);
font-size:16px;
line-height:1.55;
}
html.page-product .smooth-cocoa-landing *,
html.page-product .smooth-cocoa-landing *::before,
html.page-product .smooth-cocoa-landing *::after{box-sizing:border-box;}
html.page-product .smooth-cocoa-landing img{
display:block;
width:100%;
max-width:100%;
height:auto;
margin:0;
border:0;
border-radius:0;
}
html.page-product .smooth-cocoa-landing :where(h2,h3,p,ul,figure){margin-top:0;}
html.page-product .sc-shell{
width:min(1280px,calc(100% - 64px));
margin-inline:auto;
}
html.page-product .smooth-cocoa-landing :where(.sc-title,.sc-card-title,.sc-final h2){
font-family:var(--font-display,'Inter',sans-serif)!important;
font-weight:620!important;
letter-spacing:-.035em!important;
text-transform:none;
text-wrap:balance;
}
html.page-product .sc-kicker{
display:inline-flex;
align-items:center;
min-height:0;
margin:0 0 14px;
padding:0;
border:0;
border-radius:0;
color:var(--sc-brand-deep);
font-size:11px;
font-weight:800;
letter-spacing:.13em;
line-height:1.3;
text-transform:uppercase;
}
html.page-product .sc-kicker::before{
content:"";
width:26px;
height:1px;
margin-right:9px;
background:currentColor;
}
html.page-product .sc-title{
margin:0 0 10px!important;
color:inherit!important;
font-size:clamp(36px,4vw,58px)!important;
line-height:1.02!important;
}
html.page-product .sc-section{
width:100%;
padding:clamp(64px,7vw,104px) 0;
}
/* Compact benefit band between the product area and the story. */
html.page-product .sc-facts-band{
width:100%;
padding:18px 0 16px;
border-block:1px solid var(--sc-line);
background:#fff;
}
html.page-product .sc-facts{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
align-items:start;
gap:clamp(24px,2.8vw,44px);
padding:0;
border:0;
background:transparent;
}
html.page-product .sc-fact{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:10px;
min-width:0;
padding:8px 0;
border:0;
text-align:center;
}
html.page-product .sc-fact > div{
display:flex;
min-height:40px;
align-items:flex-start;
justify-content:center;
}
html.page-product .sc-fact:first-child,
html.page-product .sc-fact:last-child{padding-inline:0;border:0;}
html.page-product .smooth-cocoa-landing .sc-fact-ring{
display:block;
width:clamp(74px,6vw,94px);
max-width:94px;
height:clamp(74px,6vw,94px);
border:0;
border-radius:50%;
object-fit:contain;
mix-blend-mode:multiply;
}
html.page-product .sc-fact strong{
display:block;
align-self:flex-start;
margin:0;
color:var(--sc-ink);
max-width:16ch;
font-size:clamp(10.5px,.75vw,11.5px);
font-weight:800;
line-height:1.24;
letter-spacing:.02em;
text-align:center;
text-transform:uppercase;
}
html.page-product .sc-fact span:not(.sc-fact-ring){
display:block;
color:#77716d;
font-size:11px;
font-weight:500;
line-height:1.4;
letter-spacing:0;
text-transform:none;
}
/* Dark nutrition chapter. */
html.page-product .sc-nutrition-story{
position:relative;
width:100%;
overflow:hidden;
min-height:500px;
padding:0;
background:#21100a;
color:#fff;
}
html.page-product .smooth-cocoa-landing .sc-nutrition-backdrop{
position:absolute;
inset:0;
z-index:0;
width:100%;
max-width:none;
height:100%;
object-fit:cover;
object-position:center;
}
html.page-product .sc-nutrition-story::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:linear-gradient(90deg,rgba(22,10,6,.95) 0%,rgba(32,14,8,.84) 25%,rgba(32,14,8,.14) 48%,rgba(20,8,4,.06) 74%,rgba(20,8,4,.24) 100%);
}
html.page-product .sc-nutrition-story-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(280px,.31fr) minmax(650px,.69fr);
align-items:center;
min-height:500px;
}
html.page-product .sc-nutrition-story-copy{position:relative;z-index:2;padding:56px 38px 56px 0;}
html.page-product .sc-nutrition-story-copy .sc-title{
max-width:none;
margin:0 0 24px!important;
color:#fff!important;
font-family:"Arial Narrow","Helvetica Neue Condensed",var(--font-display,'Inter',sans-serif)!important;
font-size:clamp(33px,2.85vw,43px)!important;
font-stretch:condensed;
font-weight:700!important;
letter-spacing:.01em!important;
line-height:1.04!important;
text-transform:uppercase;
}
html.page-product .sc-nutrition-story-copy .sc-title span{white-space:nowrap;}
html.page-product .sc-nutrition-story-copy p{
max-width:35ch!important;
margin:0!important;
color:#e9ddd6!important;
font-size:14px!important;
line-height:1.68!important;
}
html.page-product .sc-nutrition-visual{position:relative;min-height:500px;}
html.page-product .sc-nutrition-visual::before{display:none;}
html.page-product .sc-nutrient{position:absolute;z-index:2;width:172px;min-height:62px;color:#fff;}
html.page-product .sc-nutrient strong{
display:block;
margin:0 0 3px;
color:#fff;
font-size:12.5px;
font-weight:800;
letter-spacing:.06em;
line-height:1.2;
text-transform:uppercase;
}
html.page-product .sc-nutrient-value{
display:block;
margin:0 0 4px;
color:#e7a07d;
font-size:11px;
font-weight:750;
line-height:1.22;
}
html.page-product .sc-nutrient small{display:block;color:#eadbd3;font-size:10.5px;line-height:1.42;}
html.page-product .sc-nutrient-icon{
position:absolute;
top:0;
display:grid;
place-items:center;
width:46px;
height:46px;
border:1.5px solid rgba(255,255,255,.52);
border-radius:50%;
background:rgba(34,14,8,.18);
background-position:center;
background-repeat:no-repeat;
background-size:27px 27px;
backdrop-filter:blur(2px);
}
html.page-product .sc-nutrient-protein .sc-nutrient-icon{background-image:url('/images/smooth-cocoa-landing/icons/protein.svg');}
html.page-product .sc-nutrient-carbs .sc-nutrient-icon{background-image:url('/images/smooth-cocoa-landing/icons/carbs.svg');}
html.page-product .sc-nutrient-fats .sc-nutrient-icon{background-image:url('/images/smooth-cocoa-landing/icons/fats.svg');}
html.page-product .sc-nutrient-fibre .sc-nutrient-icon{background-image:url('/images/smooth-cocoa-landing/icons/fibre.svg');}
html.page-product .sc-nutrient-vitamins .sc-nutrient-icon{background-image:url('/images/smooth-cocoa-landing/icons/vitamins.svg');}
html.page-product .sc-nutrient-minerals .sc-nutrient-icon{background-image:url('/images/smooth-cocoa-landing/icons/minerals.svg');}
html.page-product .smooth-cocoa-landing .sc-nutrient-icon img{
display:block;
width:27px;
max-width:27px;
height:27px;
object-fit:contain;
}
html.page-product .sc-nutrient::after{content:"";position:absolute;top:23px;width:44px;height:1px;background:rgba(255,255,255,.52);}
html.page-product .sc-nutrient-protein,
html.page-product .sc-nutrient-carbs,
html.page-product .sc-nutrient-fats{left:1%;right:auto;padding-right:58px;text-align:right;}
html.page-product .sc-nutrient-protein .sc-nutrient-icon,
html.page-product .sc-nutrient-carbs .sc-nutrient-icon,
html.page-product .sc-nutrient-fats .sc-nutrient-icon{left:auto;right:0;}
html.page-product .sc-nutrient-protein::after,
html.page-product .sc-nutrient-carbs::after,
html.page-product .sc-nutrient-fats::after{left:calc(100% + 10px);right:auto;}
html.page-product .sc-nutrient-fibre,
html.page-product .sc-nutrient-vitamins,
html.page-product .sc-nutrient-minerals{left:auto;right:1%;padding-left:58px;text-align:left;}
html.page-product .sc-nutrient-fibre .sc-nutrient-icon,
html.page-product .sc-nutrient-vitamins .sc-nutrient-icon,
html.page-product .sc-nutrient-minerals .sc-nutrient-icon{left:0;right:auto;}
html.page-product .sc-nutrient-fibre::after,
html.page-product .sc-nutrient-vitamins::after,
html.page-product .sc-nutrient-minerals::after{left:auto;right:calc(100% + 10px);}
html.page-product .sc-nutrient-protein,html.page-product .sc-nutrient-fibre{top:9%;}
html.page-product .sc-nutrient-carbs,html.page-product .sc-nutrient-vitamins{top:41%;}
html.page-product .sc-nutrient-fats,html.page-product .sc-nutrient-minerals{top:73%;}
/* Ingredients chapter. */
html.page-product .sc-ingredients-section{
display:none!important;
background:#fff;
}
html.page-product .sc-ingredients{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
html.page-product .sc-ingredient{
overflow:hidden;
border:1px solid var(--sc-line);
border-radius:18px;
background:#fff;
box-shadow:0 18px 45px rgba(54,27,15,.07);
transition:transform .22s ease-out,box-shadow .22s ease-out;
}
html.page-product .sc-ingredient:hover{transform:translateY(-3px);box-shadow:0 24px 54px rgba(54,27,15,.11);}
html.page-product .sc-ingredient figure{margin:0;overflow:hidden;aspect-ratio:1.15/1;background:var(--sc-cream-deep);}
html.page-product .sc-ingredient figure img{height:100%;object-fit:cover;transition:transform .3s ease-out;}
html.page-product .sc-ingredient:hover figure img{transform:scale(1.025);}
html.page-product .sc-ingredient-copy{min-height:134px;padding:20px;text-align:left;}
html.page-product .sc-ingredient h3{
margin:0 0 7px!important;
color:var(--sc-ink)!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:17px!important;
font-weight:680!important;
line-height:1.3!important;
}
html.page-product .sc-ingredient p{margin:0!important;color:var(--sc-muted)!important;font-size:13px!important;line-height:1.55!important;}
/* Product facts and expandable information, using the shared section hierarchy. */
html.page-product .smooth-cocoa-landing .sc-details-section{
--sc-section-accent:#7d3f28;
border-top:1px solid rgba(111,53,31,.08);
background:#fff;
}
html.page-product .smooth-cocoa-landing .sc-details{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:20px;
align-items:start;
}
html.page-product .smooth-cocoa-landing .sc-nutrition,
html.page-product .smooth-cocoa-landing .sc-accordions{
min-width:0;
overflow:hidden;
padding:0;
border:1px solid rgba(111,53,31,.12);
border-radius:22px;
background:rgba(255,255,255,.92);
box-shadow:0 18px 46px rgba(66,31,16,.07);
}
html.page-product .smooth-cocoa-landing .sc-detail-card-head{
padding:27px 28px 22px;
border-bottom:1px solid rgba(111,53,31,.1);
background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(250,240,232,.78));
}
html.page-product .smooth-cocoa-landing .sc-detail-card-label{
display:block;
margin-bottom:8px;
color:#7d3f28;
font-size:10.5px;
font-weight:800;
letter-spacing:.1em;
line-height:1.3;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-detail-card-title{
margin:0 0 8px!important;
color:var(--sc-ink)!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:clamp(21px,2vw,26px)!important;
font-weight:650!important;
letter-spacing:-.02em!important;
line-height:1.2!important;
text-transform:none!important;
}
html.page-product .smooth-cocoa-landing .sc-detail-card-head p{
max-width:52ch!important;
margin:0!important;
color:var(--ink-soft,#6f6f6f)!important;
font-size:13.5px!important;
line-height:1.55!important;
}
html.page-product .smooth-cocoa-landing .sc-table-wrap{
width:100%;
padding:12px 22px 20px;
overflow:hidden;
}
html.page-product .smooth-cocoa-landing .sc-nutrition table{
width:100%;
min-width:0;
border:0;
border-collapse:separate;
border-spacing:0;
table-layout:fixed;
font-variant-numeric:tabular-nums;
}
html.page-product .smooth-cocoa-landing .sc-nutrition th,
html.page-product .smooth-cocoa-landing .sc-nutrition td{
padding:10px 9px;
border:0;
border-bottom:1px solid rgba(111,53,31,.09);
color:#55443b;
font-size:12.5px;
line-height:1.35;
text-align:right;
vertical-align:middle;
}
html.page-product .smooth-cocoa-landing .sc-nutrition tbody th{font-weight:500;}
html.page-product .smooth-cocoa-landing .sc-nutrition th:first-child,
html.page-product .smooth-cocoa-landing .sc-nutrition td:first-child{width:42%;text-align:left;}
html.page-product .smooth-cocoa-landing .sc-nutrition th:nth-child(2),
html.page-product .smooth-cocoa-landing .sc-nutrition td:nth-child(2),
html.page-product .smooth-cocoa-landing .sc-nutrition th:nth-child(3),
html.page-product .smooth-cocoa-landing .sc-nutrition td:nth-child(3){width:29%;}
html.page-product .smooth-cocoa-landing .sc-nutrition th:nth-child(3),
html.page-product .smooth-cocoa-landing .sc-nutrition td:nth-child(3){background:rgba(125,63,40,.055);font-weight:700;}
html.page-product .smooth-cocoa-landing .sc-nutrition thead th{
color:#765447;
font-size:10.5px;
font-weight:800;
letter-spacing:.045em;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-nutrition tbody tr:last-child > *{border-bottom:0;}
html.page-product .smooth-cocoa-landing .sc-accordions{padding-bottom:16px;}
html.page-product .smooth-cocoa-landing .sc-accordion{
overflow:hidden;
margin:12px 18px 0;
border:1px solid rgba(111,53,31,.12);
border-radius:14px;
background:#fffaf6;
}
html.page-product .smooth-cocoa-landing .sc-accordion summary{
position:relative;
display:flex;
align-items:center;
min-height:58px;
padding:15px 50px 15px 18px;
color:var(--sc-ink);
font-size:14px;
font-weight:750;
line-height:1.35;
cursor:pointer;
list-style:none;
}
html.page-product .smooth-cocoa-landing .sc-accordion summary::-webkit-details-marker{display:none;}
html.page-product .smooth-cocoa-landing .sc-accordion summary::after{
content:"+";
position:absolute;
top:50%;
right:18px;
color:#7d3f28;
font-size:23px;
font-weight:400;
transform:translateY(-50%);
}
html.page-product .smooth-cocoa-landing .sc-accordion[open]{background:#fff;}
html.page-product .smooth-cocoa-landing .sc-accordion[open] summary::after{content:"−";}
html.page-product .smooth-cocoa-landing .sc-accordion-copy{padding:0 18px 18px;color:#625952;font-size:13px;line-height:1.65;}
html.page-product .smooth-cocoa-landing .sc-accordion-copy p{max-width:none!important;margin:0!important;color:inherit!important;font-size:inherit!important;line-height:inherit!important;}
@media(max-width:860px){
html.page-product .smooth-cocoa-landing .sc-details{grid-template-columns:1fr;gap:16px;}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-detail-card-head{padding:22px 18px 18px;}
html.page-product .smooth-cocoa-landing .sc-detail-card-title{font-size:21px!important;}
html.page-product .smooth-cocoa-landing .sc-detail-card-head p{font-size:13px!important;}
html.page-product .smooth-cocoa-landing .sc-nutrition,
html.page-product .smooth-cocoa-landing .sc-accordions{border-radius:18px;}
html.page-product .smooth-cocoa-landing .sc-table-wrap{padding:10px 10px 15px;}
html.page-product .smooth-cocoa-landing .sc-nutrition th,
html.page-product .smooth-cocoa-landing .sc-nutrition td{padding:10px 7px;font-size:12px;}
html.page-product .smooth-cocoa-landing .sc-nutrition thead th{font-size:10.5px;}
html.page-product .smooth-cocoa-landing .sc-accordion{margin:10px 12px 0;}
html.page-product .smooth-cocoa-landing .sc-accordion summary{min-height:54px;padding:13px 46px 13px 15px;font-size:13.5px;}
html.page-product .smooth-cocoa-landing .sc-accordion-copy{padding:0 15px 16px;font-size:13.5px;}
}
/* Site-brand conversion ending. */
html.page-product .sc-final{
position:relative;
width:100%;
overflow:hidden;
padding:clamp(64px,7vw,96px) 24px;
background:linear-gradient(135deg,var(--sc-brand-deep) 0%,var(--sc-brand) 55%,#096b72 100%);
color:#fff;
text-align:center;
}
html.page-product .sc-final::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 50% 50%,rgba(141,217,216,.24),transparent 42%);pointer-events:none;}
html.page-product .sc-final-copy{position:relative;z-index:1;width:min(680px,100%);margin-inline:auto;}
html.page-product .sc-final .sc-kicker{justify-content:center;color:#d8ffff;}
html.page-product .sc-final h2{margin:0 0 12px!important;color:#fff!important;font-size:clamp(32px,4vw,52px)!important;line-height:1.06!important;}
html.page-product .sc-final p{margin:0 auto 26px!important;color:#d9f2f1!important;font-size:15px!important;line-height:1.6!important;}
html.page-product .smooth-cocoa-landing a.sc-cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:min(100%,280px);
min-height:52px;
padding:13px 24px;
border:1px solid #fff;
border-radius:999px;
background:#fff;
color:var(--sc-brand-deep)!important;
font-size:14px;
font-weight:800;
text-decoration:none!important;
cursor:pointer;
transition:transform .2s ease-out,background .2s ease-out,color .2s ease-out;
}
html.page-product .smooth-cocoa-landing a.sc-cta:hover{transform:translateY(-2px);background:transparent;color:#fff!important;}
html.page-product .smooth-cocoa-landing a.sc-cta:focus-visible{outline:3px solid rgba(255,255,255,.72);outline-offset:4px;}
@media(max-width:1120px){
html.page-product .sc-shell{width:min(100% - 48px,1120px);}
html.page-product .sc-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 36px;}
html.page-product .sc-fact,
html.page-product .sc-fact:first-child,
html.page-product .sc-fact:nth-child(2),
html.page-product .sc-fact:nth-child(3),
html.page-product .sc-fact:last-child{padding:8px 0;border:0;}
html.page-product .sc-nutrition-story-grid{grid-template-columns:minmax(240px,.32fr) minmax(520px,.68fr);}
html.page-product .sc-nutrient{width:150px;}
html.page-product .sc-nutrient::after{width:30px;}
}
@media(max-width:860px){
html.page-product .product-content-wrap.has-html-landing{margin-top:48px;}
html.page-product .sc-shell{width:min(100% - 40px,760px);}
html.page-product .sc-nutrition-story{min-height:0;padding:0 0 42px;}
html.page-product .smooth-cocoa-landing .sc-nutrition-backdrop{
top:264px;
bottom:auto;
height:292px;
object-position:60% center;
}
html.page-product .sc-nutrition-story::after{
background:
linear-gradient(180deg,#21100a 0,#21100a 245px,rgba(33,16,10,.12) 330px,rgba(33,16,10,.06) 500px,#21100a 556px),
linear-gradient(90deg,rgba(25,11,6,.18),transparent 70%);
}
html.page-product .sc-nutrition-story-grid{display:block;min-height:0;}
html.page-product .sc-nutrition-story-copy{
min-height:264px;
max-width:620px;
padding:42px 0 32px;
text-align:left;
}
html.page-product .sc-nutrition-story-copy .sc-title{max-width:none;font-size:40px!important;}
html.page-product .sc-nutrition-story-copy p{max-width:52ch!important;}
html.page-product .sc-nutrition-visual{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 22px;
min-height:0;
padding-top:316px;
}
html.page-product .sc-nutrient,
html.page-product .sc-nutrient-protein,
html.page-product .sc-nutrient-carbs,
html.page-product .sc-nutrient-fibre,
html.page-product .sc-nutrient-fats,
html.page-product .sc-nutrient-vitamins,
html.page-product .sc-nutrient-minerals{
position:relative;
inset:auto;
width:auto;
min-height:90px;
padding:17px 0 15px 56px;
border-top:1px solid rgba(255,255,255,.15);
text-align:left;
}
html.page-product .sc-nutrient-icon,
html.page-product .sc-nutrient-protein .sc-nutrient-icon,
html.page-product .sc-nutrient-carbs .sc-nutrient-icon,
html.page-product .sc-nutrient-fibre .sc-nutrient-icon,
html.page-product .sc-nutrient-fats .sc-nutrient-icon,
html.page-product .sc-nutrient-vitamins .sc-nutrient-icon,
html.page-product .sc-nutrient-minerals .sc-nutrient-icon{left:0;right:auto;top:16px;}
html.page-product .sc-nutrient::after{display:none;}
html.page-product .sc-nutrient strong{font-size:11.5px;}
html.page-product .sc-nutrient-value{font-size:10px;}
html.page-product .sc-nutrient small{font-size:9.75px;}
html.page-product .sc-ingredients{grid-template-columns:repeat(2,minmax(0,1fr));}
html.page-product .sc-details{grid-template-columns:1fr;}
}
@media(max-width:600px){
html.page-product .product-content-wrap.has-html-landing{margin-top:40px;}
html.page-product .sc-shell{width:min(100% - 32px,560px);}
html.page-product .sc-section{padding:56px 0;}
html.page-product .sc-facts-band{padding:16px 0 14px;}
html.page-product .sc-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px;}
html.page-product .sc-fact,
html.page-product .sc-fact:first-child,
html.page-product .sc-fact:nth-child(3),
html.page-product .sc-fact:last-child{
min-height:0;
padding:6px 0;
border:0;
}
html.page-product .smooth-cocoa-landing .sc-fact-ring{width:58px;max-width:58px;height:58px;}
html.page-product .sc-fact > div{min-height:34px;}
html.page-product .sc-fact strong{font-size:8.25px;line-height:1.2;}
html.page-product .sc-fact:last-child{grid-column:2;}
html.page-product .sc-nutrition-story{padding:0 0 34px;}
html.page-product .smooth-cocoa-landing .sc-nutrition-backdrop{
top:250px;
height:224px;
object-position:62% center;
}
html.page-product .sc-nutrition-story::after{
background:linear-gradient(180deg,#21100a 0,#21100a 232px,rgba(33,16,10,.08) 290px,rgba(33,16,10,.05) 430px,#21100a 474px);
}
html.page-product .sc-nutrition-story-copy{min-height:250px;padding:38px 0 28px;}
html.page-product .sc-nutrition-story-copy .sc-title{font-size:35px!important;}
html.page-product .sc-nutrition-story-copy .sc-title span{white-space:normal;}
html.page-product .sc-nutrition-story-copy p{max-width:38ch!important;font-size:13px!important;line-height:1.58!important;}
html.page-product .sc-nutrition-visual{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 12px;
min-height:0;
padding-top:244px;
}
html.page-product .sc-nutrient,
html.page-product .sc-nutrient-protein,
html.page-product .sc-nutrient-carbs,
html.page-product .sc-nutrient-fibre,
html.page-product .sc-nutrient-fats,
html.page-product .sc-nutrient-vitamins,
html.page-product .sc-nutrient-minerals{
position:relative;
inset:auto;
width:auto;
min-height:92px;
padding:15px 0 13px 44px;
border-top:1px solid rgba(255,255,255,.15);
text-align:left;
}
html.page-product .sc-nutrient-icon,
html.page-product .sc-nutrient-protein .sc-nutrient-icon,
html.page-product .sc-nutrient-carbs .sc-nutrient-icon,
html.page-product .sc-nutrient-fibre .sc-nutrient-icon,
html.page-product .sc-nutrient-fats .sc-nutrient-icon,
html.page-product .sc-nutrient-vitamins .sc-nutrient-icon,
html.page-product .sc-nutrient-minerals .sc-nutrient-icon{left:0;right:auto;top:14px;width:36px;height:36px;}
html.page-product .sc-nutrient-icon{background-size:21px 21px;}
html.page-product .smooth-cocoa-landing .sc-nutrient-icon img{width:21px;max-width:21px;height:21px;}
html.page-product .sc-nutrient::after{display:none;}
html.page-product .sc-nutrient strong{font-size:10px;line-height:1.22;}
html.page-product .sc-nutrient-value{font-size:9px;}
html.page-product .sc-nutrient small{font-size:8.75px;line-height:1.38;}
html.page-product .sc-ingredients{grid-template-columns:1fr;gap:12px;}
html.page-product .sc-ingredient{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:stretch;border-radius:14px;}
html.page-product .sc-ingredient figure{height:100%;min-height:146px;aspect-ratio:auto;}
html.page-product .sc-ingredient-copy{display:flex;min-height:0;flex-direction:column;justify-content:center;padding:16px;}
html.page-product .sc-ingredient h3{font-size:15px!important;}
html.page-product .sc-ingredient p{font-size:14px!important;}
html.page-product .sc-nutrition,
html.page-product .sc-accordions{padding:20px 16px;border-radius:14px;}
html.page-product .sc-card-title{font-size:24px!important;}
html.page-product .sc-final{padding:58px 20px;}
html.page-product .sc-final h2{font-size:34px!important;}
html.page-product .smooth-cocoa-landing a.sc-cta{width:100%;min-width:0;}
}
@media(prefers-reduced-motion:reduce){
html.page-product .sc-ingredient,
html.page-product .sc-ingredient figure img,
html.page-product .smooth-cocoa-landing a.sc-cta{transition:none;}
}
/* Smooth Cocoa — premium meal-profile chapter */
html.page-product .sc-meal-profile{
position:relative;
isolation:isolate;
overflow:hidden;
padding:clamp(64px,7vw,104px) 0 clamp(52px,6vw,88px);
background:
radial-gradient(circle at 50% 58%,rgba(255,255,255,.96) 0,rgba(255,250,246,.72) 34%,transparent 66%),
linear-gradient(135deg,#f7eee8 0%,#fffaf6 48%,#f1ded3 100%);
color:#35190f;
}
html.page-product .sc-meal-profile::before,
html.page-product .sc-meal-profile::after{
content:"";
position:absolute;
z-index:-1;
border-radius:50%;
filter:blur(1px);
pointer-events:none;
}
html.page-product .sc-meal-profile::before{
top:-220px;
left:-180px;
width:560px;
height:560px;
background:radial-gradient(circle,rgba(187,123,89,.14),transparent 69%);
}
html.page-product .sc-meal-profile::after{
right:-220px;
bottom:-260px;
width:620px;
height:620px;
background:radial-gradient(circle,rgba(131,70,42,.12),transparent 70%);
}
html.page-product .sc-meal-profile-grid{
display:grid;
grid-template-columns:minmax(230px,.72fr) minmax(470px,1.45fr) minmax(240px,.78fr);
align-items:center;
gap:clamp(18px,2.3vw,38px);
min-height:460px;
}
html.page-product .sc-meal-product{
position:relative;
z-index:1;
align-self:stretch;
margin:0;
}
html.page-product .smooth-cocoa-landing .sc-meal-product img{
width:100%;
height:100%;
min-height:460px;
object-fit:contain;
object-position:center bottom;
filter:drop-shadow(0 22px 34px rgba(76,36,20,.12));
}
html.page-product .sc-meal-stats{
display:grid;
align-content:center;
min-width:0;
}
html.page-product .sc-meal-stat{
display:grid;
grid-template-columns:78px minmax(0,1fr);
align-items:center;
gap:20px;
min-height:138px;
padding:22px 0;
border-bottom:1px solid rgba(91,51,33,.14);
}
html.page-product .sc-meal-stat:last-child{border-bottom:0;}
html.page-product .sc-meal-stat-icon,
html.page-product .sc-meal-micros-icon{
position:relative;
display:block;
flex:none;
width:76px;
height:76px;
border:1px solid rgba(125,78,54,.48);
border-radius:50%;
background-color:rgba(255,255,255,.42);
color:#512b1d;
box-shadow:inset 0 0 0 6px rgba(255,255,255,.16);
}
html.page-product .sc-meal-stat-icon::after,
html.page-product .sc-meal-micros-icon::after{
content:"";
position:absolute;
inset:18px;
background:#512b1d;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-size:contain;
mask-size:contain;
}
html.page-product .sc-meal-stat-energy .sc-meal-stat-icon::after{-webkit-mask-image:url('/images/smooth-cocoa-landing/icons/calories.svg');mask-image:url('/images/smooth-cocoa-landing/icons/calories.svg');}
html.page-product .sc-meal-stat-protein .sc-meal-stat-icon::after{-webkit-mask-image:url('/images/smooth-cocoa-landing/icons/protein.svg');mask-image:url('/images/smooth-cocoa-landing/icons/protein.svg');}
html.page-product .sc-meal-stat-fibre .sc-meal-stat-icon::after{-webkit-mask-image:url('/images/smooth-cocoa-landing/icons/fibre.svg');mask-image:url('/images/smooth-cocoa-landing/icons/fibre.svg');}
html.page-product .sc-meal-stat > div{display:grid;min-width:0;}
html.page-product .sc-meal-stat strong{
display:block;
color:#35170e;
font-size:clamp(36px,3.3vw,52px);
font-weight:760;
letter-spacing:-.045em;
line-height:.9;
font-variant-numeric:tabular-nums;
}
html.page-product .sc-meal-stat strong em{font-size:.48em;font-style:normal;letter-spacing:-.02em;}
html.page-product .sc-meal-stat span:not(.sc-meal-stat-icon){
margin-top:6px;
color:#4b2d22;
font-size:20px;
line-height:1.05;
}
html.page-product .sc-meal-stat small{
margin-top:6px;
color:#775c50;
font-size:12px;
line-height:1.35;
}
html.page-product .sc-meal-micros{
display:grid;
grid-template-columns:76px minmax(0,1fr);
align-items:start;
gap:20px;
padding:26px 0;
}
html.page-product .sc-meal-micros-icon::after{-webkit-mask-image:url('/images/smooth-cocoa-landing/icons/minerals.svg');mask-image:url('/images/smooth-cocoa-landing/icons/minerals.svg');}
html.page-product .sc-meal-micros h3{
margin:0 0 16px!important;
color:#35170e!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:clamp(22px,2vw,30px)!important;
font-weight:720!important;
letter-spacing:-.03em!important;
line-height:1.06!important;
text-transform:uppercase;
}
html.page-product .sc-meal-micros strong{
display:block;
margin-bottom:10px;
color:#81513c;
font-size:13px;
font-weight:800;
letter-spacing:.02em;
line-height:1.35;
text-transform:uppercase;
}
html.page-product .sc-meal-micros p{
max-width:28ch!important;
margin:0!important;
color:#65483b!important;
font-size:14px!important;
line-height:1.7!important;
}
@media(max-width:1120px){
html.page-product .sc-meal-profile-grid{
grid-template-columns:minmax(190px,.64fr) minmax(410px,1.35fr) minmax(205px,.7fr);
gap:20px;
}
html.page-product .sc-meal-stat,
html.page-product .sc-meal-micros{grid-template-columns:62px minmax(0,1fr);gap:14px;}
html.page-product .sc-meal-stat-icon,
html.page-product .sc-meal-micros-icon{width:62px;height:62px;}
html.page-product .sc-meal-stat-icon::after,
html.page-product .sc-meal-micros-icon::after{inset:15px;}
html.page-product .sc-meal-stat span:not(.sc-meal-stat-icon){font-size:17px;}
}
@media(max-width:860px){
html.page-product .sc-meal-profile{padding:60px 0 56px;}
html.page-product .sc-meal-profile-grid{
grid-template-columns:1fr;
gap:16px;
min-height:0;
}
html.page-product .sc-meal-product{grid-row:1;min-height:0;aspect-ratio:1.42/1;}
html.page-product .smooth-cocoa-landing .sc-meal-product img{min-height:0;object-position:center bottom;}
html.page-product .sc-meal-stats{
grid-row:2;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
html.page-product .sc-meal-stat{
grid-template-columns:1fr;
align-content:start;
gap:12px;
min-height:190px;
padding:22px 16px;
border:1px solid rgba(91,51,33,.12);
border-radius:18px;
background:rgba(255,255,255,.46);
text-align:center;
}
html.page-product .sc-meal-stat:last-child{border-bottom:1px solid rgba(91,51,33,.12);}
html.page-product .sc-meal-stat-icon{margin-inline:auto;}
html.page-product .sc-meal-micros{
grid-row:3;
grid-template-columns:68px minmax(0,1fr);
gap:18px;
margin-top:2px;
padding:24px;
border:1px solid rgba(91,51,33,.12);
border-radius:18px;
background:rgba(255,255,255,.5);
}
html.page-product .sc-meal-micros-icon{width:68px;height:68px;}
html.page-product .sc-meal-micros-icon::after{inset:16px;}
html.page-product .sc-meal-micros p{max-width:50ch!important;}
}
@media(max-width:600px){
html.page-product .sc-meal-profile{padding:48px 0 44px;}
html.page-product .sc-meal-product{aspect-ratio:1.08/1;margin-inline:-8px;}
html.page-product .smooth-cocoa-landing .sc-meal-product img{object-position:center;}
html.page-product .sc-meal-stats{gap:8px;}
html.page-product .sc-meal-stat{min-height:164px;padding:16px 6px;border-radius:14px;}
html.page-product .sc-meal-stat-icon{width:48px;height:48px;}
html.page-product .sc-meal-stat-icon::after{inset:12px;}
html.page-product .sc-meal-stat strong{font-size:30px;}
html.page-product .sc-meal-stat span:not(.sc-meal-stat-icon){font-size:13px;font-weight:700;}
html.page-product .sc-meal-stat small{font-size:9.5px;}
html.page-product .sc-meal-micros{grid-template-columns:52px minmax(0,1fr);gap:14px;padding:20px 16px;}
html.page-product .sc-meal-micros-icon{width:52px;height:52px;}
html.page-product .sc-meal-micros-icon::after{inset:13px;}
html.page-product .sc-meal-micros h3{font-size:21px!important;}
html.page-product .sc-meal-micros strong{font-size:11px;}
html.page-product .sc-meal-micros p{font-size:12.5px!important;line-height:1.6!important;}
}
/* Global heading component for primary product-content sections. */
html.page-product .smooth-cocoa-landing .sc-content-head{
width:min(1040px,100%);
max-width:1040px;
margin:0 auto 48px;
text-align:center!important;
}
html.page-product .smooth-cocoa-landing .sc-content-head .sc-kicker{
display:inline-grid!important;
grid-template-columns:26px auto 26px;
align-items:center;
column-gap:9px;
justify-content:center!important;
color:var(--sc-section-accent)!important;
text-align:center!important;
}
html.page-product .smooth-cocoa-landing .sc-content-head .sc-kicker::before,
html.page-product .smooth-cocoa-landing .sc-content-head .sc-kicker::after{
content:"";
display:block;
width:26px;
height:1px;
margin:0;
background:currentColor;
}
html.page-product .smooth-cocoa-landing .sc-content-head h2{
margin:0 0 14px!important;
color:var(--ink,#171717)!important;
font-family:var(--font-display)!important;
font-size:var(--landing-heading-size)!important;
font-weight:var(--landing-heading-weight)!important;
letter-spacing:var(--landing-heading-tracking)!important;
line-height:var(--landing-heading-line-height)!important;
text-align:center!important;
text-transform:none!important;
text-wrap:balance;
}
html.page-product .smooth-cocoa-landing .sc-content-head p{
max-width:600px!important;
margin:0 auto!important;
color:var(--ink-soft,#6f6f6f)!important;
font-size:16px!important;
line-height:1.6!important;
text-align:center!important;
}
@media(min-width:1024px){
html.page-product .smooth-cocoa-landing .sc-content-head h2{
white-space:nowrap;
text-wrap:nowrap;
}
html.page-product .smooth-cocoa-landing .sc-content-head p{
width:max-content;
max-width:100%!important;
white-space:nowrap;
}
}
@media(min-width:601px) and (max-width:1023px){
html.page-product .smooth-cocoa-landing .sc-content-head h2{
font-size:36px!important;
line-height:1.08!important;
}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-content-head{
margin-bottom:32px;
text-align:center!important;
}
html.page-product .smooth-cocoa-landing .sc-content-head h2{
font-size:30px!important;
line-height:1.06!important;
white-space:normal;
}
html.page-product .smooth-cocoa-landing .sc-content-head p{
font-size:15px!important;
}
}
/* Smooth Cocoa — compact four-point meal profile */
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-shell{
width:min(calc(100% - 48px),1160px);
max-width:1160px;
}
html.page-product .smooth-cocoa-landing .sc-meal-carousel{
position:relative;
touch-action:pan-y;
}
html.page-product .smooth-cocoa-landing .sc-meal-profile-grid{
display:grid;
grid-template-columns:minmax(340px,390px) minmax(0,1fr);
grid-template-rows:repeat(4,minmax(74px,1fr));
grid-template-areas:
"product protein"
"product fibre"
"product energy"
"product minerals";
align-items:center;
justify-content:center;
gap:10px clamp(32px,4vw,56px);
min-height:380px;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat-protein{grid-area:protein;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-fibre{grid-area:fibre;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-energy{grid-area:energy;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-minerals{grid-area:minerals;}
html.page-product .smooth-cocoa-landing .sc-meal-product{
grid-area:product;
display:flex;
align-items:center;
justify-content:center;
align-self:center;
width:100%;
max-width:380px;
aspect-ratio:1/1;
padding:14px;
border:1px solid rgba(91,51,33,.13);
border-radius:24px;
background:linear-gradient(145deg,#fff 0%,#f9eee7 100%);
box-shadow:0 18px 42px rgba(72,35,19,.09);
min-height:0;
margin:0 auto;
}
html.page-product .smooth-cocoa-landing .sc-meal-product img{
display:block;
width:100%;
height:100%;
max-height:380px;
min-height:0;
object-fit:contain;
object-position:center;
-webkit-mask-image:none;
mask-image:none;
opacity:1;
transform:translate3d(0,0,0) scale(1);
transition:opacity .22s ease-out,transform .22s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-changing .sc-meal-product img{
opacity:.08;
transform:translate3d(0,5px,0) scale(.988);
}
html.page-product .smooth-cocoa-landing .sc-meal-stat{
display:grid;
grid-template-columns:44px minmax(0,1fr);
align-items:center;
align-self:stretch;
gap:12px;
min-height:0;
padding:13px 16px;
border:1px solid rgba(91,51,33,.12);
border-radius:13px;
background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(252,246,241,.78));
box-shadow:0 12px 28px rgba(72,35,19,.055);
text-align:left;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat::after{display:none;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon{
width:44px;
height:44px;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon::after{inset:11px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-minerals .sc-meal-stat-icon::after{
-webkit-mask-image:url('/images/smooth-cocoa-landing/icons/minerals.svg');
mask-image:url('/images/smooth-cocoa-landing/icons/minerals.svg');
}
html.page-product .smooth-cocoa-landing .sc-meal-stat > div{
display:flex;
min-width:0;
align-items:center;
gap:10px;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong{
flex:0 0 auto;
font-size:30px;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong b{
color:inherit;
font:inherit;
font-weight:inherit;
letter-spacing:inherit;
line-height:inherit;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong em{
font-size:.42em;
font-weight:650;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat span:not(.sc-meal-stat-icon){
margin:0;
font-size:13px;
font-weight:720;
line-height:1.08;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat small{
display:none;
color:#72584c;
font-size:12px;
line-height:1.45;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat-heading{
margin:0!important;
color:#35170e!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:16px!important;
font-weight:720!important;
letter-spacing:-.025em!important;
line-height:1.1!important;
white-space:nowrap;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat-heading br{display:none;}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-nav{
display:grid;
justify-items:center;
gap:12px;
margin-top:22px;
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-meal-current-name{
min-height:20px;
margin:0!important;
color:#65483b!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:13px!important;
font-weight:720!important;
letter-spacing:.06em!important;
line-height:1.4!important;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-dots{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:8px;
max-width:100%;
}
html.page-product .smooth-cocoa-landing a.sc-meal-dot{
position:relative;
display:block;
width:44px;
height:44px;
flex:0 0 44px;
border:0;
border-radius:999px;
background:transparent;
cursor:pointer;
touch-action:manipulation;
}
html.page-product .smooth-cocoa-landing a.sc-meal-dot::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:10px;
height:10px;
transform:translate(-50%,-50%);
border:1px solid rgba(91,51,33,.28);
border-radius:999px;
background:rgba(91,51,33,.16);
box-shadow:0 0 0 0 rgba(125,63,40,0);
transition:width .22s ease-out,background-color .22s ease-out,border-color .22s ease-out,box-shadow .22s ease-out;
}
html.page-product .smooth-cocoa-landing a.sc-meal-dot:hover::before{
border-color:rgba(91,51,33,.5);
background:rgba(91,51,33,.34);
}
html.page-product .smooth-cocoa-landing a.sc-meal-dot.sc-meal-dot-active::before{
width:28px;
border-color:#7c3f28;
background:#7c3f28;
box-shadow:0 0 0 4px rgba(124,63,40,.1);
}
html.page-product .smooth-cocoa-landing a.sc-meal-dot:focus-visible{
outline:2px solid #0a919b;
outline-offset:-3px;
}
@media(max-width:960px){
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-shell{
width:min(calc(100% - 40px),920px);
}
html.page-product .smooth-cocoa-landing .sc-meal-profile-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:auto;
grid-template-areas:
"product product"
"protein energy"
"fibre minerals";
gap:12px;
min-height:0;
}
html.page-product .smooth-cocoa-landing .sc-meal-product{
width:min(100%,620px);
max-width:620px;
aspect-ratio:auto;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
margin:0 auto 8px;
}
html.page-product .smooth-cocoa-landing .sc-meal-product img{max-height:560px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat > div{display:grid;}
html.page-product .smooth-cocoa-landing .sc-meal-stat small{display:block;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-heading br{display:block;}
html.page-product .smooth-cocoa-landing .sc-meal-stat{
grid-template-columns:58px minmax(0,1fr);
align-self:stretch;
min-height:148px;
padding:18px;
border:1px solid rgba(91,51,33,.12);
border-radius:16px;
background:rgba(255,255,255,.48);
text-align:left;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat::after{display:none;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon{width:56px;height:56px;margin:0;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon::after{inset:13px;}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-shell{
width:min(calc(100% - 24px),520px);
}
html.page-product .smooth-cocoa-landing .sc-meal-profile-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:auto;
grid-template-areas:
"product product"
"protein energy"
"fibre minerals";
gap:10px;
min-height:0;
overflow:visible;
}
html.page-product .smooth-cocoa-landing .sc-meal-product{
position:relative;
z-index:1;
width:100%;
max-width:430px;
justify-self:center;
margin:0 auto 8px;
overflow:visible;
}
html.page-product .smooth-cocoa-landing .sc-meal-product img{
width:100%;
max-width:none;
max-height:410px;
}
html.page-product .smooth-cocoa-landing .sc-meal-product .sc-meal-carousel-nav{
width:100%;
margin:8px auto 0;
gap:0;
}
html.page-product .smooth-cocoa-landing .sc-meal-product .sc-meal-current-name{display:none;}
html.page-product .smooth-cocoa-landing .sc-meal-product .sc-meal-carousel-dots{gap:0;}
html.page-product .smooth-cocoa-landing .sc-meal-product a.sc-meal-dot{
width:28px;
height:30px;
flex-basis:28px;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat{
z-index:2;
display:grid;
grid-template-columns:46px minmax(0,1fr);
align-items:center;
gap:10px;
min-width:0;
min-height:116px;
padding:14px 12px;
border:1px solid rgba(91,51,33,.12);
border-radius:18px;
background:rgba(255,255,255,.6);
text-align:left;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat-protein,
html.page-product .smooth-cocoa-landing .sc-meal-stat-fibre,
html.page-product .smooth-cocoa-landing .sc-meal-stat-energy,
html.page-product .smooth-cocoa-landing .sc-meal-stat-minerals{
align-items:center;
text-align:left;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat::after{display:none;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon{
width:44px;
height:44px;
margin:0;
flex:0 0 44px;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon::after{inset:11px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat > div{display:grid;max-width:100%;}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong{font-size:28px;line-height:.94;}
html.page-product .smooth-cocoa-landing .sc-meal-stat span:not(.sc-meal-stat-icon){
margin-top:4px;
font-size:11.5px;
line-height:1.08;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat small{
max-width:18ch;
margin-top:5px;
font-size:10.5px;
line-height:1.3;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat-heading{
font-size:16px!important;
line-height:1.03!important;
}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-nav{
gap:4px;
margin-top:10px;
}
html.page-product .smooth-cocoa-landing .sc-meal-current-name{min-height:17px;font-size:11px!important;}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-dots{gap:0;max-width:100%;}
html.page-product .smooth-cocoa-landing a.sc-meal-dot{
width:30px;
height:36px;
flex-basis:30px;
}
html.page-product .smooth-cocoa-landing a.sc-meal-dot::before{width:8px;height:8px;}
html.page-product .smooth-cocoa-landing a.sc-meal-dot.sc-meal-dot-active::before{width:22px;}
}
@media(max-width:370px){
html.page-product .smooth-cocoa-landing .sc-meal-profile-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:auto;
grid-template-areas:
"product product"
"protein energy"
"fibre minerals";
gap:8px;
min-height:0;
}
html.page-product .smooth-cocoa-landing .sc-meal-product{
width:100%;
max-width:330px;
margin-bottom:4px;
}
html.page-product .smooth-cocoa-landing .sc-meal-product img{max-height:320px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat,
html.page-product .smooth-cocoa-landing .sc-meal-stat-protein,
html.page-product .smooth-cocoa-landing .sc-meal-stat-fibre,
html.page-product .smooth-cocoa-landing .sc-meal-stat-energy,
html.page-product .smooth-cocoa-landing .sc-meal-stat-minerals{
display:grid;
grid-template-columns:36px minmax(0,1fr);
min-height:92px;
align-items:center;
gap:8px;
padding:11px 9px;
border:1px solid rgba(91,51,33,.12);
border-radius:14px;
background:rgba(255,255,255,.52);
text-align:left;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat::after{display:none;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon{width:36px;height:36px;flex-basis:36px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon::after{inset:9px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong{font-size:23px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat span:not(.sc-meal-stat-icon){font-size:10.5px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat small{display:none;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-heading{font-size:12px!important;}
html.page-product .smooth-cocoa-landing a.sc-meal-dot{width:27px;flex-basis:27px;}
}
@media(prefers-reduced-motion:reduce){
html.page-product .smooth-cocoa-landing .sc-meal-product img,
html.page-product .smooth-cocoa-landing a.sc-meal-dot::before{transition:none;}
}
/* Smooth Cocoa — three-step shaker preparation */
html.page-product .smooth-cocoa-landing .sc-preparation{
position:relative;
padding:clamp(64px,7vw,96px) 0;
overflow:hidden;
border-top:1px solid rgba(91,51,33,.08);
background:#fff;
}
html.page-product .smooth-cocoa-landing .sc-preparation .sc-shell{
width:min(1200px,calc(100% - 64px));
}
html.page-product .smooth-cocoa-landing .sc-preparation-selector{
display:flex;
width:max-content;
max-width:100%;
margin:-20px auto 42px;
padding:4px;
border:1px solid rgba(111,53,31,.17);
border-radius:999px;
background:#fffaf7;
box-shadow:0 8px 24px rgba(72,35,19,.06);
}
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link{
display:block;
min-width:100px;
padding:10px 17px;
border-radius:999px;
color:#745849!important;
font-size:11px!important;
font-weight:800!important;
letter-spacing:.07em;
line-height:1.2;
text-align:center;
text-decoration:none!important;
text-transform:uppercase;
transition:background-color .2s ease-out,color .2s ease-out,box-shadow .2s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link:hover{color:#4c2617!important;}
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link-active{
background:#6f351f;
color:#fff!important;
box-shadow:0 5px 12px rgba(83,40,22,.18);
}
html.page-product .smooth-cocoa-landing .sc-preparation-steps{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:start;
gap:clamp(24px,3.2vw,48px);
margin:0;
padding:0;
list-style:none;
counter-reset:none;
}
html.page-product .smooth-cocoa-landing .sc-preparation-step{
display:flex;
flex-direction:column;
align-items:center;
min-width:0;
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-preparation-media{
position:relative;
width:min(100%,330px);
margin:0 auto;
aspect-ratio:1/1;
border:7px solid #f4ebe5;
border-radius:50%;
background:#f7eee8;
box-shadow:0 22px 54px rgba(72,35,19,.12);
}
html.page-product .smooth-cocoa-landing .sc-preparation-media::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:linear-gradient(180deg,transparent 64%,rgba(58,28,15,.08));
pointer-events:none;
}
html.page-product .smooth-cocoa-landing .sc-preparation-media img{
width:100%;
height:100%;
border-radius:50%;
object-fit:cover;
transition:transform .3s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-preparation-step:hover .sc-preparation-media img{
transform:scale(1.018);
}
html.page-product .smooth-cocoa-landing .sc-preparation-number{
position:absolute;
z-index:2;
right:auto;
bottom:-43px;
left:50%;
display:flex;
width:86px;
height:86px;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
padding:0;
transform:translateX(-50%);
border:6px solid #fff;
border-radius:50%;
background:#6f351f;
color:#fff;
box-shadow:0 14px 30px rgba(67,29,14,.22);
font-family:var(--font-display,'Inter',sans-serif);
line-height:1;
}
html.page-product .smooth-cocoa-landing .sc-preparation-number small{
color:rgba(255,255,255,.78);
font-size:8px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-preparation-number b{
display:block;
width:auto;
height:auto;
border-radius:0;
background:transparent;
color:#fff;
font-size:25px;
font-weight:700;
font-variant-numeric:tabular-nums;
letter-spacing:-.02em;
}
html.page-product .smooth-cocoa-landing .sc-preparation-copy{
width:100%;
min-height:0;
padding:61px 8px 0;
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-preparation-label{
display:none;
}
html.page-product .smooth-cocoa-landing .sc-preparation-copy h3{
margin:0 0 10px!important;
color:var(--ink,#181818)!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:21px!important;
font-weight:600!important;
letter-spacing:0!important;
line-height:1.22!important;
text-align:center!important;
}
html.page-product .smooth-cocoa-landing .sc-preparation-copy p{
max-width:35ch!important;
margin:0 auto!important;
color:var(--ink-soft,#666)!important;
font-size:14px!important;
line-height:1.62!important;
text-align:center!important;
}
html.page-product .smooth-cocoa-landing .sc-preparation-tip,
html.page-product .smooth-cocoa-landing .sc-preparation-steps + .sc-preparation-tip-mark + div{
position:relative;
isolation:isolate;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
margin:56px auto 0!important;
padding:27px clamp(24px,4vw,52px) 28px;
border:1px solid rgba(111,53,31,.14);
border-radius:20px;
background:linear-gradient(135deg,#fffaf7 0%,#f8eee8 52%,#fffaf7 100%);
box-shadow:0 14px 36px rgba(72,35,19,.07),inset 0 1px 0 rgba(255,255,255,.9);
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-preparation-tip::after,
html.page-product .smooth-cocoa-landing .sc-preparation-steps + .sc-preparation-tip-mark + div::after{
content:none;
}
html.page-product .smooth-cocoa-landing .sc-preparation-tip-mark{
display:none!important;
}
html.page-product .smooth-cocoa-landing .sc-preparation-steps + .sc-preparation-tip-mark{
display:none!important;
}
html.page-product .smooth-cocoa-landing .sc-preparation-steps + .sc-preparation-tip-mark + div{
margin-top:56px!important;
}
html.page-product .smooth-cocoa-landing .sc-preparation-tip div{
display:grid;
min-width:0;
justify-items:center;
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-preparation-tip strong,
html.page-product .smooth-cocoa-landing .sc-preparation-steps + .sc-preparation-tip-mark + div strong{
display:block;
margin-bottom:9px;
color:#35170e;
font-family:var(--font-display,'Inter',sans-serif);
font-size:20px;
font-weight:700;
line-height:1.25;
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-preparation-tip p,
html.page-product .smooth-cocoa-landing .sc-preparation-steps + .sc-preparation-tip-mark + div p{
max-width:62ch!important;
margin:0!important;
color:var(--ink-soft,#666)!important;
font-size:15px!important;
line-height:1.6!important;
text-align:center!important;
}
@media(max-width:900px){
html.page-product .smooth-cocoa-landing .sc-preparation .sc-shell{
width:min(860px,calc(100% - 40px));
}
html.page-product .smooth-cocoa-landing .sc-preparation-steps{
gap:16px;
}
html.page-product .smooth-cocoa-landing .sc-preparation-media{width:min(100%,250px);}
html.page-product .smooth-cocoa-landing .sc-preparation-copy{padding:55px 2px 0;}
html.page-product .smooth-cocoa-landing .sc-preparation-copy h3{font-size:18px!important;}
html.page-product .smooth-cocoa-landing .sc-preparation-copy p{font-size:13px!important;}
}
@media(max-width:720px){
html.page-product .smooth-cocoa-landing .sc-preparation{padding:48px 0;}
html.page-product .smooth-cocoa-landing .sc-preparation .sc-shell{
width:min(520px,calc(100% - 28px));
}
html.page-product .smooth-cocoa-landing .sc-preparation-selector{margin:-14px auto 34px;}
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link{min-width:0;padding:9px 12px;font-size:10px!important;}
html.page-product .smooth-cocoa-landing .sc-preparation-steps{
grid-template-columns:1fr;
gap:40px;
}
html.page-product .smooth-cocoa-landing .sc-preparation-media{width:min(62vw,240px);}
html.page-product .smooth-cocoa-landing .sc-preparation-number{
bottom:-36px;
width:72px;
height:72px;
border-width:5px;
}
html.page-product .smooth-cocoa-landing .sc-preparation-number b{font-size:22px;}
html.page-product .smooth-cocoa-landing .sc-preparation-copy{
padding:51px 14px 0;
}
html.page-product .smooth-cocoa-landing .sc-preparation-copy h3{font-size:20px!important;}
html.page-product .smooth-cocoa-landing .sc-preparation-copy p{font-size:14px!important;}
html.page-product .smooth-cocoa-landing .sc-preparation-tip,
html.page-product .smooth-cocoa-landing .sc-preparation-steps + .sc-preparation-tip-mark + div{
width:100%;
margin:44px auto 0!important;
padding:24px 20px 25px;
border-radius:18px;
}
html.page-product .smooth-cocoa-landing .sc-preparation-tip strong,
html.page-product .smooth-cocoa-landing .sc-preparation-steps + .sc-preparation-tip-mark + div strong{font-size:17px;}
html.page-product .smooth-cocoa-landing .sc-preparation-tip p,
html.page-product .smooth-cocoa-landing .sc-preparation-steps + .sc-preparation-tip-mark + div p{font-size:14px!important;line-height:1.6!important;}
}
@media(prefers-reduced-motion:reduce){
html.page-product .smooth-cocoa-landing .sc-preparation-media img{transition:none;}
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link{transition:none;}
}
/* Smooth Cocoa — day-in-the-life purchase motivation. */
html.page-product .smooth-cocoa-landing .sc-why-shake{
--sc-section-accent:#e4b489;
position:relative;
isolation:isolate;
overflow:hidden;
width:100%;
padding:clamp(72px,8vw,112px) 0;
background:
radial-gradient(circle at 12% 8%,rgba(194,121,78,.2),transparent 32%),
radial-gradient(circle at 88% 100%,rgba(120,63,39,.32),transparent 38%),
linear-gradient(135deg,#21110c 0%,#3b1e14 52%,#24120d 100%);
color:#fff;
}
html.page-product .smooth-cocoa-landing .sc-why-shake::before{
content:"";
position:absolute;
z-index:0;
top:-240px;
left:50%;
width:720px;
height:480px;
border:1px solid rgba(237,185,143,.12);
border-radius:50%;
transform:translateX(-50%) rotate(-8deg);
}
html.page-product .smooth-cocoa-landing .sc-why-shake::after{
content:"";
position:absolute;
z-index:0;
inset:0;
pointer-events:none;
background-image:
url("/images/smooth-cocoa-landing/decor-cocoa-beans-real.webp?v=1"),
url("/images/smooth-cocoa-landing/decor-chocolate-real.webp?v=1");
background-position:left -60px bottom 16px,right -68px top 26px;
background-repeat:no-repeat;
background-size:320px auto,330px auto;
opacity:.42;
}
html.page-product .smooth-cocoa-landing .sc-why-shake .sc-shell{
position:relative;
z-index:1;
width:min(calc(100% - 64px),1180px);
}
html.page-product .smooth-cocoa-landing .sc-why-shake .sc-content-head h2{
color:#fff!important;
}
html.page-product .smooth-cocoa-landing .sc-why-shake .sc-content-head p{
color:rgba(255,255,255,.72)!important;
}
/* Smooth Cocoa — complete FIGUACTIVE concept. */
html.page-product .smooth-cocoa-landing .sc-concept{
--sc-section-accent:#0e8f94;
position:relative;
width:100%;
padding:clamp(52px,5vw,72px) 0;
overflow:hidden;
background:#fff;
}
html.page-product .smooth-cocoa-landing .sc-concept .sc-shell{
width:min(calc(100% - 48px),1240px);
}
html.page-product .smooth-cocoa-landing .sc-concept-layout{
display:grid;
grid-template-columns:minmax(360px,.78fr) minmax(520px,1.22fr);
align-items:center;
gap:clamp(36px,4vw,56px);
}
html.page-product .smooth-cocoa-landing .sc-concept-copy{
min-width:0;
padding:4px 0;
}
html.page-product .smooth-cocoa-landing .sc-concept-kicker{
margin:0 0 14px!important;
color:var(--sc-section-accent)!important;
font-family:var(--font-body,'Inter',sans-serif)!important;
font-size:11px!important;
font-weight:850!important;
letter-spacing:.1em!important;
line-height:1.3!important;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-concept-copy h2{
max-width:18ch;
margin:0 0 14px!important;
color:var(--ink,#171717)!important;
font-family:var(--font-display)!important;
font-size:var(--landing-heading-size)!important;
font-weight:var(--landing-heading-weight)!important;
letter-spacing:var(--landing-heading-tracking)!important;
line-height:var(--landing-heading-line-height)!important;
text-align:left!important;
text-transform:none!important;
text-wrap:balance;
}
html.page-product .smooth-cocoa-landing .sc-concept-lead{
max-width:40ch;
margin:0 0 22px!important;
color:var(--ink-soft,#6f6f6f)!important;
font-size:16px!important;
line-height:1.6!important;
text-align:left!important;
}
html.page-product .smooth-cocoa-landing .sc-concept-list{
max-width:500px;
}
html.page-product .smooth-cocoa-landing .sc-concept-item{
display:grid;
grid-template-columns:62px minmax(0,1fr);
min-height:88px;
align-items:center;
gap:17px;
padding:11px 0;
border-top:1px solid rgba(71,55,47,.13);
}
html.page-product .smooth-cocoa-landing .sc-concept-item:first-child{
border-top:0;
}
html.page-product .smooth-cocoa-landing .sc-concept-icon{
display:grid;
width:58px;
height:58px;
place-items:center;
border-radius:50%;
background:#f5f7f6;
box-shadow:inset 0 0 0 1px rgba(14,143,148,.08);
}
html.page-product .smooth-cocoa-landing .sc-concept-icon::before{
content:"";
width:30px;
height:30px;
background:center/contain no-repeat;
}
html.page-product .smooth-cocoa-landing .sc-concept-item--breakfast .sc-concept-icon::before{background-image:url('/images/smooth-cocoa-landing/icons/muesli.svg');}
html.page-product .smooth-cocoa-landing .sc-concept-item--shakes .sc-concept-icon::before{background-image:url('/images/smooth-cocoa-landing/icons/shakes.svg');}
html.page-product .smooth-cocoa-landing .sc-concept-item--soups .sc-concept-icon::before{background-image:url('/images/smooth-cocoa-landing/icons/soups.svg');}
html.page-product .smooth-cocoa-landing .sc-concept-item h3{
margin:0 0 4px!important;
color:#231d1a!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:18px!important;
font-weight:700!important;
letter-spacing:normal!important;
line-height:1.25!important;
}
html.page-product .smooth-cocoa-landing .sc-concept-item p{
margin:0!important;
color:var(--ink-soft,#6f6f6f)!important;
font-size:14px!important;
line-height:1.55!important;
}
html.page-product .smooth-cocoa-landing .sc-concept-visual{
position:relative;
width:min(100%,690px);
margin:0 0 0 auto;
min-width:0;
overflow:hidden;
border-radius:28px;
background:#fffaf6;
box-shadow:0 18px 48px rgba(76,46,31,.07),inset 0 0 0 1px rgba(108,76,58,.05);
}
html.page-product .smooth-cocoa-landing .sc-concept-visual img{
display:block;
width:100%;
height:auto;
}
@media(max-width:1040px){
html.page-product .smooth-cocoa-landing .sc-concept .sc-shell{width:min(calc(100% - 48px),920px);}
html.page-product .smooth-cocoa-landing .sc-concept-layout{grid-template-columns:1fr;gap:34px;}
html.page-product .smooth-cocoa-landing .sc-concept-copy{width:min(100%,690px);margin:0 auto;}
html.page-product .smooth-cocoa-landing .sc-concept-copy h2{max-width:18ch;}
html.page-product .smooth-cocoa-landing .sc-concept-lead{max-width:54ch;}
html.page-product .smooth-cocoa-landing .sc-concept-list{max-width:none;}
html.page-product .smooth-cocoa-landing .sc-concept-visual{width:min(100%,760px);margin:0 auto;}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-concept{padding:48px 0 44px;}
html.page-product .smooth-cocoa-landing .sc-concept .sc-shell{width:calc(100% - 28px);}
html.page-product .smooth-cocoa-landing .sc-concept-layout{gap:28px;}
html.page-product .smooth-cocoa-landing .sc-concept-kicker{margin-bottom:12px!important;}
html.page-product .smooth-cocoa-landing .sc-concept-copy h2{max-width:none;margin-right:auto!important;margin-left:auto!important;font-size:30px!important;line-height:1.06!important;text-align:center!important;}
html.page-product .smooth-cocoa-landing .sc-concept-lead{margin-right:auto!important;margin-bottom:20px!important;margin-left:auto!important;font-size:15px!important;text-align:center!important;}
html.page-product .smooth-cocoa-landing .sc-concept-item{grid-template-columns:56px minmax(0,1fr);min-height:82px;gap:14px;padding:10px 0;}
html.page-product .smooth-cocoa-landing .sc-concept-icon{width:52px;height:52px;}
html.page-product .smooth-cocoa-landing .sc-concept-icon::before{width:27px;height:27px;}
html.page-product .smooth-cocoa-landing .sc-concept-item h3{font-size:17px!important;}
html.page-product .smooth-cocoa-landing .sc-concept-item p{font-size:13.5px!important;}
html.page-product .smooth-cocoa-landing .sc-concept-visual{border-radius:20px;}
}
/* =====================================================
PRODUCT SHAKE SHOWCASE
Premium, data-driven flavour selector with synchronized hero composition.
===================================================== */
html.page-product .shake-showcase{
--shake-accent:#74341d;
--shake-flavour-accent:#7c3f28;
--shake-ink:var(--ink,#181818);
--shake-muted:var(--ink-soft,#6f6f6f);
position:relative;
grid-column:1/-1;
width:100vw;
width:100dvw;
margin:0 calc(50% - 50vw);
margin:0 calc(50% - 50dvw);
padding:clamp(72px,7vw,112px) 0;
overflow:hidden;
background:
radial-gradient(circle at 13% 36%,color-mix(in srgb,var(--shake-flavour-accent) 13%,transparent) 0,transparent 31%),
linear-gradient(135deg,#fffdfa 0%,#f8f1e9 52%,#fffaf5 100%);
transition:background-color .38s ease;
}
html.page-product .shake-showcase-shell{
position:relative;
width:min(calc(100% - 64px),1480px);
margin:0 auto;
padding:0;
}
html.page-product .shake-showcase-layout{
display:grid;
grid-template-columns:minmax(370px,38%) minmax(0,62%);
grid-template-areas:"hero head" "hero stage";
gap:42px clamp(40px,5vw,84px);
align-items:center;
}
html.page-product .shake-showcase-head{
grid-area:head;
align-self:end;
max-width:850px;
margin:0;
padding:0 64px;
text-align:center;
}
html.page-product .shake-showcase-eyebrow{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin:0 0 15px;
color:var(--shake-accent);
font-family:var(--font-body);
font-size:12px;
font-weight:800;
letter-spacing:.16em;
line-height:1.3;
text-transform:uppercase;
}
html.page-product .shake-showcase-eyebrow::before,
html.page-product .shake-showcase-eyebrow::after{
content:"";
width:34px;
height:1px;
background:currentColor;
opacity:.62;
}
html.page-product .shake-showcase-head h2{
margin:0;
color:var(--shake-ink);
font-family:var(--font-display);
font-size:clamp(40px,4.2vw,68px);
font-weight:450;
letter-spacing:-.035em;
line-height:1.02;
text-wrap:balance;
}
html.page-product .shake-showcase-head p{
margin:18px 0 0;
color:var(--shake-muted);
font-family:var(--font-body);
font-size:14px;
font-weight:750;
letter-spacing:.14em;
line-height:1.4;
text-transform:uppercase;
}
html.page-product .shake-showcase-hero{
grid-area:hero;
position:relative;
min-width:0;
align-self:stretch;
padding:30px 0 0;
}
html.page-product .shake-showcase-hero::before{
content:"";
position:absolute;
inset:2% -10% 18% -24%;
border-radius:50%;
background:color-mix(in srgb,var(--shake-flavour-accent) 18%,#f6e2cf);
opacity:.66;
transition:background-color .38s ease;
}
html.page-product .shake-showcase-hero-visual{
position:relative;
z-index:1;
min-height:560px;
transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
html.page-product .shake-showcase-hero-visual.is-changing{
opacity:.28;
transform:translateY(7px);
}
html.page-product .shake-showcase-hero-visual img{
display:block;
width:100%;
height:100%;
min-height:560px;
object-fit:cover;
object-position:center;
border-radius:34px;
}
html.page-product .shake-showcase-hero-copy{
position:relative;
z-index:2;
width:min(86%,430px);
margin:-56px 0 0 auto;
padding:24px 28px 26px;
border:1px solid rgba(98,56,32,.1);
border-radius:22px;
background:rgba(255,253,249,.92);
box-shadow:0 20px 48px rgba(82,48,29,.11);
backdrop-filter:blur(10px);
}
html.page-product .shake-showcase-hero-label{
display:block;
margin:0 0 8px;
color:var(--shake-accent);
font-size:11px;
font-weight:800;
letter-spacing:.15em;
text-transform:uppercase;
}
html.page-product .shake-showcase-hero-copy h3{
margin:0;
color:var(--shake-ink);
font-family:var(--font-display);
font-size:clamp(30px,2.7vw,44px);
font-weight:500;
letter-spacing:-.025em;
line-height:1.06;
}
html.page-product .shake-showcase-hero-copy p{
max-width:34ch;
margin:10px 0 0;
color:var(--shake-muted);
font-size:15px;
line-height:1.55;
}
html.page-product .shake-showcase-stage{
grid-area:stage;
min-width:0;
display:grid;
grid-template-columns:48px minmax(0,1fr) 48px;
gap:10px;
align-items:center;
}
html.page-product .shake-showcase-viewport{
min-width:0;
padding:30px 0 34px;
overflow:hidden;
}
html.page-product .shake-showcase-track{
display:flex;
align-items:center;
width:max-content;
gap:18px;
min-width:100%;
padding:20px 0;
scroll-behavior:smooth;
scrollbar-width:none;
outline:none;
will-change:transform;
transition:transform .42s cubic-bezier(.2,.72,.2,1);
}
html.page-product .shake-showcase-track::-webkit-scrollbar{display:none;}
html.page-product .shake-showcase-item{
appearance:none;
position:relative;
display:flex;
flex:0 0 clamp(228px,19.5vw,286px);
min-width:220px;
min-height:440px;
padding:18px 18px 20px;
flex-direction:column;
align-items:center;
border:1px solid rgba(82,42,24,.11);
border-radius:24px;
background:rgba(255,255,255,.58);
box-shadow:0 12px 32px rgba(82,48,29,.045);
color:var(--shake-ink);
cursor:pointer;
font:inherit;
text-align:center;
scroll-snap-align:center;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
transform:scale(.93);
transition:transform .32s cubic-bezier(.2,.72,.2,1),border-color .3s ease,box-shadow .3s ease,background-color .3s ease;
}
html.page-product .shake-showcase-image-wrap{
position:relative;
display:grid;
width:100%;
height:292px;
flex:0 0 auto;
place-items:center;
overflow:hidden;
}
html.page-product .shake-showcase-item img{
display:block;
width:100%;
height:100%;
object-fit:contain;
transform:scale(1.08);
transition:transform .32s cubic-bezier(.2,.72,.2,1);
}
html.page-product .shake-showcase-card-badge{
position:absolute;
z-index:3;
top:14px;
right:14px;
padding:8px 11px 7px;
border-radius:999px;
background:var(--shake-flavour-accent);
color:#fff;
font-size:9px;
font-weight:800;
letter-spacing:.1em;
line-height:1;
text-transform:uppercase;
opacity:0;
transform:translateY(-4px);
transition:opacity .24s ease,transform .24s ease;
}
html.page-product .shake-showcase-card-copy{
display:block;
width:100%;
min-height:74px;
margin-top:8px;
}
html.page-product .shake-showcase-card-copy strong{
display:block;
color:var(--shake-ink);
font-family:var(--font-display);
font-size:20px;
font-weight:600;
line-height:1.15;
}
html.page-product .shake-showcase-card-copy small{
display:block;
margin:8px auto 0;
color:var(--shake-muted);
font-size:12px;
line-height:1.45;
}
html.page-product .shake-showcase-indicator{
display:grid;
width:26px;
height:26px;
margin-top:auto;
place-items:center;
border:1px solid rgba(82,42,24,.26);
border-radius:50%;
background:#fff;
color:#fff;
transition:background-color .25s ease,border-color .25s ease,transform .25s ease;
}
html.page-product .shake-showcase-indicator svg{
width:16px;
height:16px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
html.page-product .shake-showcase-item.is-centered{
z-index:2;
border-color:color-mix(in srgb,var(--shake-flavour-accent) 72%,#fff);
background:rgba(255,255,255,.9);
box-shadow:0 24px 52px rgba(84,48,25,.13);
transform:translateY(-12px) scale(1.06);
}
html.page-product .shake-showcase-item.is-centered img{transform:scale(1.15);}
html.page-product .shake-showcase-item.is-centered .shake-showcase-card-badge{opacity:1;transform:none;}
html.page-product .shake-showcase-item.is-centered .shake-showcase-indicator{
border-color:var(--shake-flavour-accent);
background:var(--shake-flavour-accent);
transform:scale(1.08);
}
html.page-product .shake-showcase-item:not(.is-centered):hover{border-color:rgba(82,42,24,.22);transform:translateY(-4px) scale(.95);}
html.page-product .shake-showcase-item:not(.is-centered):hover img{transform:scale(1.11);}
html.page-product .shake-showcase-item:focus-visible{
outline:3px solid color-mix(in srgb,var(--shake-flavour-accent) 55%,#fff);
outline-offset:3px;
}
html.page-product .shake-showcase-arrow{
display:grid;
width:48px;
height:48px;
padding:0;
place-items:center;
border:1px solid rgba(82,42,24,.14);
border-radius:50%;
background:rgba(255,255,255,.76);
box-shadow:0 10px 24px rgba(82,48,29,.08);
color:#4b2415;
cursor:pointer;
transition:transform .2s ease,border-color .2s ease,background-color .2s ease;
}
html.page-product .shake-showcase-arrow svg{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
html.page-product .shake-showcase-arrow:hover{border-color:var(--shake-flavour-accent);background:#fff;transform:scale(1.05);}
html.page-product .shake-showcase-arrow:focus-visible{outline:3px solid color-mix(in srgb,var(--shake-flavour-accent) 50%,#fff);outline-offset:3px;}
@media(max-width:1023px){
html.page-product .shake-showcase{padding:64px 0 72px;}
html.page-product .shake-showcase-shell{width:min(calc(100% - 40px),760px);}
html.page-product .shake-showcase-layout{
display:grid;
grid-template-columns:1fr;
grid-template-areas:"head" "hero" "stage";
gap:34px;
}
html.page-product .shake-showcase-head{max-width:680px;margin:auto;padding:0;}
html.page-product .shake-showcase-head h2{font-size:clamp(38px,7vw,58px);}
html.page-product .shake-showcase-hero{width:min(100%,620px);margin:auto;padding:0;}
html.page-product .shake-showcase-hero::before{inset:4% 4% 20%;}
html.page-product .shake-showcase-hero-visual,
html.page-product .shake-showcase-hero-visual img{min-height:0;}
html.page-product .shake-showcase-hero-visual img{aspect-ratio:4/3;object-fit:cover;}
html.page-product .shake-showcase-hero-copy{width:min(82%,420px);margin:-46px auto 0;}
html.page-product .shake-showcase-stage{display:block;}
html.page-product .shake-showcase-viewport{margin:0 -20px;padding:28px 0;overflow:visible;}
html.page-product .shake-showcase-track{
width:100%;
min-width:0;
gap:16px;
padding:18px calc((100% - min(72vw,340px))/2);
overflow-x:auto;
scroll-snap-type:x mandatory;
overscroll-behavior-x:contain;
transform:none!important;
transition:none;
scroll-padding-inline:calc((100% - min(72vw,340px))/2);
}
html.page-product .shake-showcase-item{
flex:0 0 min(72vw,340px);
min-width:0;
min-height:460px;
}
html.page-product .shake-showcase-item.is-centered{transform:translateY(-8px) scale(1.035);}
html.page-product .shake-showcase-arrow{display:none;}
}
@media(max-width:600px){
html.page-product .shake-showcase{padding:48px 0 58px;}
html.page-product .shake-showcase-shell{width:calc(100% - 32px);}
html.page-product .shake-showcase-layout{gap:27px;}
html.page-product .shake-showcase-eyebrow{gap:9px;margin-bottom:12px;font-size:10px;letter-spacing:.11em;}
html.page-product .shake-showcase-eyebrow::before,
html.page-product .shake-showcase-eyebrow::after{width:22px;}
html.page-product .shake-showcase-head h2{font-size:34px;line-height:1.06;}
html.page-product .shake-showcase-head p{margin-top:13px;font-size:11px;letter-spacing:.12em;}
html.page-product .shake-showcase-hero-visual img{aspect-ratio:1/1.08;border-radius:24px;}
html.page-product .shake-showcase-hero-copy{width:calc(100% - 28px);margin:-28px auto 0;padding:20px 22px;border-radius:18px;}
html.page-product .shake-showcase-hero-copy h3{font-size:30px;}
html.page-product .shake-showcase-hero-copy p{font-size:14px;}
html.page-product .shake-showcase-viewport{margin:0 -16px;padding:22px 0;}
html.page-product .shake-showcase-track{
gap:12px;
padding-inline:calc((100% - min(78vw,302px))/2);
scroll-padding-inline:calc((100% - min(78vw,302px))/2);
}
html.page-product .shake-showcase-item{
flex-basis:min(78vw,302px);
min-height:420px;
padding:15px 15px 18px;
border-radius:20px;
}
html.page-product .shake-showcase-image-wrap{height:282px;}
html.page-product .shake-showcase-card-copy strong{font-size:19px;}
html.page-product .shake-showcase-card-copy small{font-size:11.5px;}
}
@media(prefers-reduced-motion:reduce){
html.page-product .shake-showcase-track{scroll-behavior:auto;}
html.page-product .shake-showcase *,
html.page-product .shake-showcase *::before,
html.page-product .shake-showcase *::after{scroll-behavior:auto!important;transition:none!important;}
}
html.page-product .smooth-cocoa-landing .sc-why-shake-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
html.page-product .smooth-cocoa-landing .sc-why-shake-card{
position:relative;
min-width:0;
min-height:248px;
padding:26px 24px 28px;
border:1px solid rgba(255,255,255,.13);
border-radius:20px;
background:linear-gradient(155deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 42px rgba(8,3,2,.12);
}
html.page-product .smooth-cocoa-landing .sc-why-shake-card::after{
content:"";
position:absolute;
right:24px;
bottom:0;
left:24px;
height:2px;
border-radius:2px 2px 0 0;
background:linear-gradient(90deg,transparent,#d99d70,transparent);
opacity:.7;
}
html.page-product .smooth-cocoa-landing .sc-why-shake-card-top{
display:flex;
align-items:flex-start;
margin-bottom:30px;
}
html.page-product .smooth-cocoa-landing .sc-why-shake-icon{
display:grid;
width:54px;
height:54px;
flex:none;
place-items:center;
border:1px solid rgba(229,177,134,.42);
border-radius:50%;
background:rgba(12,5,3,.16);
color:#efc09a;
}
html.page-product .smooth-cocoa-landing .sc-why-shake-icon::before{
content:"";
display:block;
width:28px;
height:28px;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
}
html.page-product .smooth-cocoa-landing .sc-why-shake-icon--morning::before{background-image:url("/images/smooth-cocoa-landing/icons/morning.svg?v=3");}
html.page-product .smooth-cocoa-landing .sc-why-shake-icon--office::before{background-image:url("/images/smooth-cocoa-landing/icons/office.svg?v=3");}
html.page-product .smooth-cocoa-landing .sc-why-shake-icon--moving::before{background-image:url("/images/smooth-cocoa-landing/icons/on-the-go.svg?v=3");}
html.page-product .smooth-cocoa-landing .sc-why-shake-icon--evening::before{background-image:url("/images/smooth-cocoa-landing/icons/evening.svg?v=3");}
html.page-product .smooth-cocoa-landing .sc-why-shake-card h3{
margin:0 0 9px!important;
color:#fff!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:23px!important;
font-weight:680!important;
letter-spacing:-.025em!important;
line-height:1.2!important;
}
html.page-product .smooth-cocoa-landing .sc-why-shake-card p{
margin:0!important;
color:rgba(255,255,255,.67)!important;
font-size:13.5px!important;
line-height:1.58!important;
}
@media(max-width:900px){
html.page-product .smooth-cocoa-landing .sc-why-shake .sc-shell{width:min(calc(100% - 40px),760px);}
html.page-product .smooth-cocoa-landing .sc-why-shake::after{
background-position:left -92px bottom 12px,right -110px top 66px;
background-size:270px auto,265px auto;
opacity:.32;
}
html.page-product .smooth-cocoa-landing .sc-why-shake-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
html.page-product .smooth-cocoa-landing .sc-why-shake-card{min-height:220px;}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-why-shake{padding:56px 0;}
html.page-product .smooth-cocoa-landing .sc-why-shake::after{
background-image:url("/images/smooth-cocoa-landing/decor-cocoa-beans-real.webp?v=1");
background-position:left -92px bottom 12px;
background-size:205px auto;
opacity:.24;
}
html.page-product .smooth-cocoa-landing .sc-why-shake .sc-shell{width:min(calc(100% - 28px),520px);}
html.page-product .smooth-cocoa-landing .sc-why-shake-grid{grid-template-columns:1fr;gap:10px;}
html.page-product .smooth-cocoa-landing .sc-why-shake-card{
display:grid;
grid-template-columns:54px minmax(0,1fr);
grid-template-rows:auto auto;
column-gap:16px;
min-height:0;
padding:20px;
border-radius:16px;
}
html.page-product .smooth-cocoa-landing .sc-why-shake-card-top{grid-row:1/-1;margin:0;}
html.page-product .smooth-cocoa-landing .sc-why-shake-card h3{grid-column:2;margin:3px 0 5px!important;font-size:19px!important;}
html.page-product .smooth-cocoa-landing .sc-why-shake-card p{grid-column:2;font-size:14px!important;}
}
/* Smooth Cocoa — value comparison before preparation. */
html.page-product .smooth-cocoa-landing .sc-difference{
padding:clamp(64px,7vw,96px) 0;
border-top:1px solid rgba(18,55,59,.07);
background:linear-gradient(180deg,#f8fafb 0%,#f4f7f7 100%);
}
html.page-product .smooth-cocoa-landing .sc-difference-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
align-items:stretch;
}
html.page-product .smooth-cocoa-landing .sc-difference-card{
position:relative;
min-width:0;
padding:38px clamp(26px,3.2vw,44px) 40px;
border-radius:24px;
}
html.page-product .smooth-cocoa-landing .sc-difference-card-basic{
border:1px solid rgba(34,73,77,.14);
background:#fff;
box-shadow:0 16px 42px rgba(21,54,58,.06);
}
html.page-product .smooth-cocoa-landing .sc-difference-card-product{
overflow:hidden;
border:1px solid rgba(255,255,255,.1);
background:
radial-gradient(circle at 92% 0,rgba(190,119,76,.24),transparent 42%),
linear-gradient(145deg,#2b160f 0%,#4b2819 56%,#351b12 100%);
box-shadow:0 24px 58px rgba(58,29,17,.18);
}
html.page-product .smooth-cocoa-landing .sc-difference-card h3{
margin:0 0 26px!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:22px!important;
font-weight:700!important;
letter-spacing:-.015em!important;
line-height:1.25!important;
}
html.page-product .smooth-cocoa-landing .sc-difference-card-basic h3{color:#24373a!important;}
html.page-product .smooth-cocoa-landing .sc-difference-card-product h3{color:#fff!important;}
html.page-product .smooth-cocoa-landing .sc-difference-list{
display:grid;
gap:20px;
margin:0;
padding:0;
list-style:none;
}
html.page-product .smooth-cocoa-landing .sc-difference-list li{
position:relative;
display:grid;
gap:4px;
min-height:42px;
padding-left:48px;
}
html.page-product .smooth-cocoa-landing .sc-difference-list li::before{
position:absolute;
top:1px;
left:0;
display:grid;
width:32px;
height:32px;
place-items:center;
border-radius:50%;
font-family:Arial,sans-serif;
font-size:20px;
font-weight:400;
line-height:1;
}
html.page-product .smooth-cocoa-landing .sc-difference-card-basic li::before{
content:"×";
border:1px solid rgba(126,90,68,.26);
color:#966246;
}
html.page-product .smooth-cocoa-landing .sc-difference-card-product li::before{
content:"✓";
border:1px solid rgba(242,190,147,.55);
color:#f3bd8f;
}
html.page-product .smooth-cocoa-landing .sc-difference-list strong{
font-size:15.5px;
font-weight:750;
line-height:1.3;
}
html.page-product .smooth-cocoa-landing .sc-difference-list span{
font-size:13.5px;
line-height:1.55;
}
html.page-product .smooth-cocoa-landing .sc-difference-card-basic .sc-difference-list strong{color:#263638;}
html.page-product .smooth-cocoa-landing .sc-difference-card-basic .sc-difference-list span{color:#667577;}
html.page-product .smooth-cocoa-landing .sc-difference-card-product .sc-difference-list strong{color:#fff;}
html.page-product .smooth-cocoa-landing .sc-difference-card-product .sc-difference-list span{color:rgba(255,255,255,.74);}
html.page-product .smooth-cocoa-landing .sc-difference-trust{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:0;
margin:24px 0 0;
padding:0;
border:1px solid rgba(111,53,31,.12);
border-radius:16px;
background:rgba(255,255,255,.76);
list-style:none;
box-shadow:0 10px 30px rgba(45,27,18,.04);
}
html.page-product .smooth-cocoa-landing .sc-difference-trust li{
position:relative;
display:flex;
min-height:62px;
align-items:center;
justify-content:center;
padding:14px 16px;
color:#62402f;
font-size:11px;
font-weight:750;
letter-spacing:.025em;
line-height:1.35;
text-align:center;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-difference-trust li + li::before{
content:"";
position:absolute;
top:16px;
bottom:16px;
left:0;
width:1px;
background:rgba(111,53,31,.14);
}
@media(max-width:860px){
html.page-product .smooth-cocoa-landing .sc-difference-grid{grid-template-columns:1fr;gap:16px;}
html.page-product .smooth-cocoa-landing .sc-difference-card{padding:32px 30px 34px;}
html.page-product .smooth-cocoa-landing .sc-difference-trust{grid-template-columns:repeat(3,minmax(0,1fr));}
html.page-product .smooth-cocoa-landing .sc-difference-trust li:nth-child(4),
html.page-product .smooth-cocoa-landing .sc-difference-trust li:nth-child(5){border-top:1px solid rgba(111,53,31,.12);}
html.page-product .smooth-cocoa-landing .sc-difference-trust li:nth-child(4)::before{display:none;}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-difference{padding:52px 0;}
html.page-product .smooth-cocoa-landing .sc-difference-card-product{order:-1;}
html.page-product .smooth-cocoa-landing .sc-difference-card{padding:26px 22px 28px;border-radius:18px;}
html.page-product .smooth-cocoa-landing .sc-difference-card h3{margin-bottom:22px!important;font-size:19px!important;}
html.page-product .smooth-cocoa-landing .sc-difference-list{gap:18px;}
html.page-product .smooth-cocoa-landing .sc-difference-list li{padding-left:42px;}
html.page-product .smooth-cocoa-landing .sc-difference-list li::before{width:29px;height:29px;font-size:18px;}
html.page-product .smooth-cocoa-landing .sc-difference-list strong{font-size:14.5px;}
html.page-product .smooth-cocoa-landing .sc-difference-list span{font-size:13.5px;}
html.page-product .smooth-cocoa-landing .sc-difference-trust{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:14px;}
html.page-product .smooth-cocoa-landing .sc-difference-trust li{min-height:60px;padding:12px 9px;font-size:11px;}
html.page-product .smooth-cocoa-landing .sc-difference-trust li:nth-child(n+3){border-top:1px solid rgba(111,53,31,.12);}
html.page-product .smooth-cocoa-landing .sc-difference-trust li:nth-child(odd)::before{display:none;}
html.page-product .smooth-cocoa-landing .sc-difference-trust li:last-child{grid-column:1/-1;}
}
/* FIGUACTIVE — neutral, site-aligned palette for the full product range. */
html.page-product .smooth-cocoa-landing{
--sc-cocoa:var(--crystal-deep,#075e66);
--sc-cocoa-dark:#16464b;
--sc-cocoa-mid:#0b737a;
--sc-caramel:var(--crystal,#078a93);
--sc-cream:#f8faf9;
--sc-cream-deep:#edf4f3;
--sc-line:rgba(10,83,89,.13);
}
html.page-product .smooth-cocoa-landing .sc-nutrition-story{
background:linear-gradient(112deg,#15494e 0%,#0b7077 48%,#16464b 100%);
color:#fff;
}
html.page-product .smooth-cocoa-landing .sc-nutrition-story::after{
background:linear-gradient(90deg,rgba(10,63,68,.94) 0%,rgba(10,91,97,.79) 38%,rgba(10,91,97,.16) 64%,rgba(10,63,68,.3) 100%);
}
html.page-product .smooth-cocoa-landing .sc-nutrition-story-copy .sc-kicker,
html.page-product .smooth-cocoa-landing .sc-nutrition-story-copy h3{color:#bde8e8!important;}
html.page-product .smooth-cocoa-landing .sc-nutrition-story-copy p,
html.page-product .smooth-cocoa-landing .sc-nutrient small{color:rgba(255,255,255,.8)!important;}
html.page-product .smooth-cocoa-landing .sc-nutrition-visual::before{
border-color:rgba(180,231,231,.5);
box-shadow:0 0 0 38px rgba(181,231,231,.07),0 0 0 76px rgba(181,231,231,.035);
}
html.page-product .smooth-cocoa-landing .sc-nutrient-icon{border-color:rgba(216,255,255,.74);color:#e8ffff;}
html.page-product .smooth-cocoa-landing .sc-nutrient::after{background:linear-gradient(90deg,rgba(188,237,238,.16),rgba(188,237,238,.75));}
html.page-product .smooth-cocoa-landing .sc-meal-profile{
background:linear-gradient(135deg,#f4f8f8 0%,#fff 48%,#edf6f5 100%);
color:var(--sc-ink);
}
html.page-product .smooth-cocoa-landing .sc-meal-profile::before{background:radial-gradient(circle,rgba(25,181,189,.1),transparent 69%);}
html.page-product .smooth-cocoa-landing .sc-meal-profile::after{background:radial-gradient(circle,rgba(7,138,147,.09),transparent 70%);}
html.page-product .smooth-cocoa-landing .sc-meal-product{border-color:rgba(7,138,147,.16);background:linear-gradient(145deg,#fff,#eef7f6);}
html.page-product .smooth-cocoa-landing .sc-meal-product img{filter:drop-shadow(0 22px 34px rgba(7,94,102,.12));}
html.page-product .smooth-cocoa-landing .sc-meal-stat{border-color:rgba(7,94,102,.13);background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,248,247,.8));}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon,
html.page-product .smooth-cocoa-landing .sc-meal-micros-icon{border-color:rgba(7,138,147,.35);background-color:rgba(255,255,255,.7);color:var(--sc-brand-deep);}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon::after,
html.page-product .smooth-cocoa-landing .sc-meal-micros-icon::after{background:var(--sc-brand-deep);}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong,
html.page-product .smooth-cocoa-landing .sc-meal-micros h3{color:#193c40!important;}
html.page-product .smooth-cocoa-landing .sc-meal-stat span:not(.sc-meal-stat-icon),
html.page-product .smooth-cocoa-landing .sc-meal-micros strong{color:#28727a;}
html.page-product .smooth-cocoa-landing .sc-meal-stat small,
html.page-product .smooth-cocoa-landing .sc-meal-micros p{color:#60787b;}
html.page-product .smooth-cocoa-landing a.sc-meal-dot::before{background:rgba(7,94,102,.25);}
html.page-product .smooth-cocoa-landing a.sc-meal-dot.sc-meal-dot-active::before{background:var(--sc-brand);}
html.page-product .smooth-cocoa-landing .sc-why-shake{
--sc-section-accent:var(--sc-brand-deep);
background:linear-gradient(135deg,#16464b 0%,#0b7077 54%,#16464b 100%);
}
html.page-product .smooth-cocoa-landing .sc-why-shake::after{display:none;}
html.page-product .smooth-cocoa-landing .sc-why-shake-card{border-color:rgba(216,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 42px rgba(4,54,58,.14);}
html.page-product .smooth-cocoa-landing .sc-why-shake-card::after{background:linear-gradient(90deg,transparent,#76d8da,transparent);}
html.page-product .smooth-cocoa-landing .sc-why-shake-icon{border-color:rgba(184,237,238,.52);background:rgba(4,65,70,.18);color:#c9f4f4;}
html.page-product .smooth-cocoa-landing .sc-difference{border-top-color:rgba(7,94,102,.08);background:linear-gradient(180deg,#f7faf9 0%,#edf5f4 100%);}
html.page-product .smooth-cocoa-landing .sc-difference-card-basic{border-color:rgba(7,94,102,.15);box-shadow:0 16px 42px rgba(7,94,102,.06);}
html.page-product .smooth-cocoa-landing .sc-difference-card-product{
border-color:rgba(211,250,250,.2);
background:radial-gradient(circle at 92% 0,rgba(91,207,211,.22),transparent 42%),linear-gradient(145deg,#16464b 0%,#0b7077 56%,#16464b 100%);
box-shadow:0 24px 58px rgba(7,94,102,.18);
}
html.page-product .smooth-cocoa-landing .sc-difference-card-basic li::before{border-color:rgba(9,111,119,.3);color:#29767d;}
html.page-product .smooth-cocoa-landing .sc-difference-card-product li::before{border-color:rgba(193,244,244,.62);color:#c9f4f4;}
html.page-product .smooth-cocoa-landing .sc-difference-trust{border-color:rgba(7,94,102,.14);box-shadow:0 10px 30px rgba(7,94,102,.04);}
html.page-product .smooth-cocoa-landing .sc-difference-trust li{color:#23646a;}
html.page-product .smooth-cocoa-landing .sc-difference-trust li + li::before{background:rgba(7,94,102,.15);}
html.page-product .smooth-cocoa-landing .sc-preparation{border-top-color:rgba(7,94,102,.09);background:#fff;}
html.page-product .smooth-cocoa-landing .sc-preparation-selector{border-color:rgba(7,94,102,.18);background:#f7fbfa;box-shadow:0 8px 24px rgba(7,94,102,.06);}
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link{color:#4e7478!important;}
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link:hover{color:var(--sc-brand-deep)!important;}
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link-active{background:var(--sc-brand-deep);box-shadow:0 5px 12px rgba(7,94,102,.18);}
html.page-product .smooth-cocoa-landing .sc-preparation-media{border-color:#e6f0ef;background:#eef7f6;box-shadow:0 22px 54px rgba(7,94,102,.12);}
html.page-product .smooth-cocoa-landing .sc-preparation-media::after{background:linear-gradient(180deg,transparent 64%,rgba(7,94,102,.08));}
html.page-product .smooth-cocoa-landing .sc-preparation-number{background:var(--sc-brand-deep);box-shadow:0 14px 30px rgba(7,94,102,.22);}
html.page-product .smooth-cocoa-landing .sc-preparation-tip,
html.page-product .smooth-cocoa-landing .sc-preparation-steps + .sc-preparation-tip-mark + div{
border-color:rgba(7,94,102,.14);
background:linear-gradient(135deg,#f8fbfb 0%,#eef7f6 52%,#f8fbfb 100%);
box-shadow:0 14px 36px rgba(7,94,102,.07),inset 0 1px 0 rgba(255,255,255,.9);
}
html.page-product .smooth-cocoa-landing .sc-preparation-tip strong,
html.page-product .smooth-cocoa-landing .sc-preparation-steps + .sc-preparation-tip-mark + div strong{color:#193c40;}
/* FIGUACTIVE meal profile — category-first, compact nutrition overview. */
html.page-product .smooth-cocoa-landing .sc-meal-profile{
padding:clamp(62px,6vw,88px) 0 clamp(56px,5vw,74px);
background:linear-gradient(135deg,#f4f9f8 0%,#fff 50%,#edf7f6 100%);
}
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-content-head{margin-bottom:26px;}
html.page-product .smooth-cocoa-landing .sc-meal-category-selector,
html.page-product .smooth-cocoa-landing .sc-preparation-selector{
display:flex;
width:min(100%,440px);
margin:0 auto 34px;
padding:4px;
border:1px solid rgba(7,94,102,.18);
border-radius:999px;
background:#f7fbfa;
box-shadow:0 8px 24px rgba(7,94,102,.06);
}
html.page-product .smooth-cocoa-landing .sc-meal-category-selector-link,
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link{
flex:1 1 0;
min-width:0;
padding:10px 16px;
border:0;
border-radius:999px;
background:transparent;
color:#4e7478!important;
font:800 11px/1.2 var(--font-display,'Inter',sans-serif)!important;
letter-spacing:.07em;
text-align:center;
text-decoration:none!important;
text-transform:uppercase;
cursor:pointer;
transition:background-color .2s ease-out,color .2s ease-out,box-shadow .2s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-meal-category-selector-link:hover,
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link:hover{color:var(--sc-brand-deep)!important;}
html.page-product .smooth-cocoa-landing .sc-meal-category-selector-link-active,
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link-active{
background:var(--sc-brand-deep);
color:#fff!important;
box-shadow:0 5px 12px rgba(7,94,102,.18);
}
html.page-product .smooth-cocoa-landing .sc-meal-category-selector-link:focus-visible{outline:2px solid var(--sc-brand);outline-offset:2px;}
html.page-product .smooth-cocoa-landing .sc-meal-profile-grid{
grid-template-columns:minmax(350px,390px) minmax(0,540px);
grid-template-rows:repeat(4,minmax(60px,1fr));
grid-template-areas:
"product protein"
"product fibre"
"product energy"
"product minerals";
align-items:center;
justify-content:center;
gap:10px clamp(26px,4vw,56px);
min-height:310px;
margin-bottom:58px;
}
html.page-product .smooth-cocoa-landing .sc-meal-product{
position:relative;
max-width:390px;
padding:10px;
overflow:visible;
border-color:rgba(7,138,147,.17);
border-radius:22px;
background:linear-gradient(145deg,#fff,#f0f8f7);
box-shadow:0 18px 44px rgba(7,94,102,.09);
}
html.page-product .smooth-cocoa-landing .sc-meal-product img{filter:drop-shadow(0 18px 28px rgba(7,94,102,.12));}
html.page-product .smooth-cocoa-landing .sc-meal-stat{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
justify-self:start;
width:min(100%,540px);
min-height:60px;
padding:6px 6px 6px 22px;
overflow:hidden;
border-color:rgba(7,94,102,.11);
border-radius:999px;
background:#f7fbfa;
box-shadow:0 8px 20px rgba(7,94,102,.035);
}
html.page-product .smooth-cocoa-landing .sc-meal-stat::before{
content:"";
position:absolute;
top:0;
left:0;
display:none;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon{display:none;}
html.page-product .smooth-cocoa-landing .sc-meal-stat > div{display:contents;}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong{
display:flex;
grid-column:2;
grid-row:1;
min-width:112px;
min-height:48px;
align-items:center;
justify-content:center;
padding:0 18px;
border-radius:999px;
background:var(--sc-brand-deep);
color:#fff!important;
font-size:25px;
font-weight:780;
letter-spacing:-.045em;
line-height:1;
font-variant-numeric:tabular-nums;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat span:not(.sc-meal-stat-icon){
grid-column:1;
grid-row:1;
margin:0;
color:#173e42;
font-size:14px;
font-weight:800;
letter-spacing:.01em;
line-height:1.2;
text-transform:none;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat small{
display:none;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat-heading{
font-size:25px!important;
font-weight:780!important;
line-height:1!important;
letter-spacing:-.045em!important;
white-space:normal;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong em{color:inherit;font-size:.56em;font-weight:700;}
html.page-product .smooth-cocoa-landing .sc-meal-portion{
width:min(100%,540px);
margin:-42px 0 28px auto!important;
color:#668084!important;
font-size:11px!important;
line-height:1.35!important;
text-align:left;
}
html.page-product .smooth-cocoa-landing .sc-meal-portion strong{color:#176a72;font-weight:800;}
html.page-product .smooth-cocoa-landing .sc-meal-product .sc-meal-carousel-nav{
position:absolute;
top:calc(100% + 14px);
left:50%;
z-index:3;
width:max-content;
max-width:calc(100vw - 36px);
margin:0;
transform:translateX(-50%);
gap:6px;
}
html.page-product .smooth-cocoa-landing .sc-meal-current-name{color:#386469!important;}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-controls{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-dots{gap:4px;}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-arrow{
display:grid;
width:32px;
height:32px;
place-items:center;
border:1px solid rgba(7,94,102,.22);
border-radius:50%;
background:#fff;
color:#176a72;
box-shadow:0 5px 12px rgba(7,94,102,.08);
font-size:17px;
line-height:1;
cursor:pointer;
transition:transform .18s ease-out,background-color .18s ease-out,color .18s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-arrow:hover{background:var(--sc-brand-deep);color:#fff;transform:scale(1.06);}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-arrow:focus-visible{outline:2px solid var(--sc-brand);outline-offset:2px;}
html.page-product .smooth-cocoa-landing a.sc-meal-dot{width:34px;height:34px;flex-basis:34px;}
html.page-product .smooth-cocoa-landing a.sc-meal-dot[hidden]{display:none!important;}
html.page-product .smooth-cocoa-landing a.sc-meal-dot::before{width:9px;height:9px;border-color:rgba(7,94,102,.28);background:rgba(7,94,102,.22);}
html.page-product .smooth-cocoa-landing a.sc-meal-dot:hover::before{border-color:rgba(7,94,102,.6);background:rgba(7,94,102,.45);}
html.page-product .smooth-cocoa-landing a.sc-meal-dot.sc-meal-dot-active::before{width:24px;border-color:var(--sc-brand-deep);background:var(--sc-brand-deep);box-shadow:0 0 0 4px rgba(7,138,147,.11);}
@media(max-width:960px){
html.page-product .smooth-cocoa-landing .sc-meal-profile-grid{
grid-template-columns:minmax(0,540px);
grid-template-rows:auto repeat(4,minmax(58px,1fr));
grid-template-areas:"product" "protein" "fibre" "energy" "minerals";
gap:10px;
}
html.page-product .smooth-cocoa-landing .sc-meal-product{padding:10px;border:1px solid rgba(7,138,147,.15);}
html.page-product .smooth-cocoa-landing .sc-meal-stat{justify-self:center;}
html.page-product .smooth-cocoa-landing .sc-meal-profile-grid{margin-bottom:56px;}
html.page-product .smooth-cocoa-landing .sc-meal-portion{margin:-38px auto 28px!important;text-align:center;}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-meal-category-selector,
html.page-product .smooth-cocoa-landing .sc-preparation-selector{width:100%;margin-bottom:24px;}
html.page-product .smooth-cocoa-landing .sc-meal-category-selector-link,
html.page-product .smooth-cocoa-landing .sc-preparation-selector-link{padding:10px 6px;font-size:10px!important;}
html.page-product .smooth-cocoa-landing .sc-meal-stat{grid-template-columns:minmax(0,1fr) auto;min-height:54px;padding:5px 5px 5px 16px;gap:8px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong{min-width:88px;min-height:42px;padding:0 13px;font-size:21px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat span:not(.sc-meal-stat-icon){font-size:12px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-heading{font-size:21px!important;}
html.page-product .smooth-cocoa-landing .sc-meal-profile-grid{margin-bottom:52px;}
html.page-product .smooth-cocoa-landing .sc-meal-product .sc-meal-carousel-nav{top:calc(100% + 10px);}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-arrow{width:28px;height:28px;font-size:15px;}
html.page-product .smooth-cocoa-landing .sc-meal-portion{margin:-34px auto 24px!important;font-size:10px!important;}
html.page-product .smooth-cocoa-landing .sc-meal-product .sc-meal-carousel-dots{gap:2px;}
html.page-product .smooth-cocoa-landing .sc-meal-product a.sc-meal-dot{width:30px;height:30px;flex-basis:30px;}
}
html.page-product .smooth-cocoa-landing .sc-why-shake::before{border-color:rgba(192,240,241,.16);}
/* Smooth Cocoa certificate band: static grid on desktop, continuous brand ticker on phones. */
html.page-product .smooth-cocoa-landing .sc-facts-marquee{
width:100%;
overflow:hidden;
}
html.page-product .smooth-cocoa-landing .sc-facts-track{width:100%;}
html.page-product .smooth-cocoa-landing .sc-facts-group-clone{display:none;}
@keyframes scFactsMarquee{to{transform:translate3d(-50%,0,0);}}
@media(max-width:820px){
html.page-product .smooth-cocoa-landing .sc-facts-band{
overflow:hidden;
padding:10px 0 8px;
}
html.page-product .smooth-cocoa-landing .sc-facts-marquee{
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
html.page-product .smooth-cocoa-landing .sc-facts-track{
display:flex;
width:max-content;
will-change:transform;
animation:scFactsMarquee 30s linear infinite;
}
html.page-product .smooth-cocoa-landing .sc-facts-group,
html.page-product .smooth-cocoa-landing .sc-facts-group-clone{
display:flex;
flex:0 0 auto;
align-items:flex-start;
gap:16px;
width:max-content;
max-width:none;
margin:0;
padding:4px 6px 10px;
}
html.page-product .smooth-cocoa-landing .sc-fact,
html.page-product .smooth-cocoa-landing .sc-fact:first-child,
html.page-product .smooth-cocoa-landing .sc-fact:last-child{
display:flex;
box-sizing:border-box;
flex:0 0 124px;
grid-column:auto;
width:124px;
min-width:124px;
max-width:124px;
min-height:122px;
align-items:center;
justify-content:flex-start;
gap:8px;
padding:8px 5px 6px;
border:0;
overflow:hidden;
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-fact > div{
display:flex;
box-sizing:border-box;
width:100%;
min-width:0;
min-height:42px;
align-items:flex-start;
justify-content:center;
}
html.page-product .smooth-cocoa-landing .sc-fact-ring{
width:64px;
max-width:64px;
height:64px;
}
html.page-product .smooth-cocoa-landing .sc-fact strong{
display:block;
width:100%;
max-width:100%;
padding:0 2px;
font-size:9.5px;
line-height:1.18;
overflow-wrap:normal;
word-break:normal;
white-space:normal;
}
html.page-product .smooth-cocoa-landing .sc-facts-band:hover .sc-facts-track,
html.page-product .smooth-cocoa-landing .sc-facts-band:focus-within .sc-facts-track{animation-play-state:paused;}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
html.page-product .smooth-cocoa-landing .sc-facts-marquee{
overflow-x:auto;
-webkit-mask-image:none;
mask-image:none;
scrollbar-width:none;
}
html.page-product .smooth-cocoa-landing .sc-facts-marquee::-webkit-scrollbar{display:none;}
html.page-product .smooth-cocoa-landing .sc-facts-track{animation:none;will-change:auto;}
html.page-product .smooth-cocoa-landing .sc-facts-group-clone{display:none;}
}
/* FIGUACTIVE nutrition profile v19 — premium, compact nutrition panel. */
html.page-product .smooth-cocoa-landing .sc-meal-profile{
--meal-ink:#153d41;
--meal-muted:#657d80;
--meal-line:rgba(7,94,102,.13);
--meal-soft:#f2f8f7;
--meal-surface:rgba(255,255,255,.92);
padding:clamp(64px,7vw,96px) 0 clamp(60px,6vw,88px);
overflow:hidden;
background:
radial-gradient(circle at 8% 18%,rgba(25,181,189,.09),transparent 27%),
radial-gradient(circle at 94% 82%,rgba(7,138,147,.08),transparent 29%),
#f8fbfa;
}
html.page-product .smooth-cocoa-landing .sc-meal-profile::before,
html.page-product .smooth-cocoa-landing .sc-meal-profile::after{display:none;}
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-shell{width:min(1180px,calc(100% - 40px));}
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-content-head{
width:min(760px,100%);
margin:0 auto 28px;
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-content-head h2{
color:#142f32;
font-size:clamp(34px,4vw,58px);
letter-spacing:-.045em;
line-height:1.04;
}
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-content-head p{
max-width:680px;
margin:14px auto 0;
color:var(--meal-muted);
font-size:clamp(15px,1.35vw,18px);
line-height:1.55;
}
html.page-product .smooth-cocoa-landing .sc-meal-category-selector{
width:min(100%,470px);
margin:0 auto clamp(30px,4vw,46px);
padding:5px;
border:1px solid var(--meal-line);
background:rgba(255,255,255,.78);
box-shadow:0 12px 34px rgba(10,74,79,.07);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
html.page-product .smooth-cocoa-landing .sc-meal-category-selector-link{
min-height:44px;
display:grid;
place-items:center;
padding:10px 18px;
color:#496d71!important;
font-size:12px!important;
letter-spacing:.075em;
}
html.page-product .smooth-cocoa-landing .sc-meal-category-selector-link-active{
background:#0b6d74;
color:#fff!important;
box-shadow:0 8px 18px rgba(7,94,102,.2),inset 0 1px 0 rgba(255,255,255,.16);
}
html.page-product .smooth-cocoa-landing .sc-meal-profile-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(440px,1.04fr);
grid-template-rows:auto;
grid-template-areas:"product nutrition";
align-items:center;
gap:clamp(34px,5vw,72px);
min-height:0;
margin:0;
}
html.page-product .smooth-cocoa-landing .sc-meal-product{
grid-area:product;
display:flex;
width:100%;
max-width:520px;
min-width:0;
margin:0 auto;
padding:14px;
flex-direction:column;
border:1px solid rgba(7,94,102,.12);
border-radius:30px;
background:rgba(255,255,255,.82);
box-shadow:0 28px 70px -34px rgba(7,73,79,.34),inset 0 1px 0 #fff;
}
html.page-product .smooth-cocoa-landing .sc-meal-product::after{
content:"";
position:absolute;
inset:auto 11% -16px;
z-index:-1;
height:42px;
border-radius:50%;
background:rgba(7,94,102,.12);
filter:blur(22px);
}
html.page-product .smooth-cocoa-landing .sc-meal-product img{
display:block;
width:100%;
height:auto;
aspect-ratio:1;
border-radius:20px;
object-fit:cover;
filter:none;
transition:opacity .22s ease-out,transform .28s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-card{
grid-area:nutrition;
width:100%;
overflow:hidden;
border:1px solid var(--meal-line);
border-radius:28px;
background:var(--meal-surface);
box-shadow:0 26px 70px -42px rgba(7,73,79,.42),inset 0 1px 0 #fff;
}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-head{
display:flex;
min-height:86px;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 24px;
border-bottom:1px solid var(--meal-line);
background:linear-gradient(135deg,rgba(232,246,244,.9),rgba(255,255,255,.72));
}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-head > div{display:grid;gap:3px;}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-head span{
color:#5b7679;
font-size:10px;
font-weight:800;
letter-spacing:.12em;
line-height:1.2;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-head strong{
color:var(--meal-ink);
font-size:20px;
font-weight:800;
letter-spacing:-.025em;
line-height:1.2;
}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-head > small{
padding:8px 12px;
border:1px solid rgba(7,94,102,.13);
border-radius:999px;
background:#fff;
color:#4d7175;
font-size:11px;
font-weight:750;
white-space:nowrap;
}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-list{padding:4px 24px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat,
html.page-product .smooth-cocoa-landing .sc-meal-stat-protein,
html.page-product .smooth-cocoa-landing .sc-meal-stat-fibre,
html.page-product .smooth-cocoa-landing .sc-meal-stat-energy,
html.page-product .smooth-cocoa-landing .sc-meal-stat-minerals{
grid-area:auto!important;
position:relative;
display:grid;
width:100%;
min-height:78px;
grid-template-columns:44px minmax(0,1fr);
align-items:center;
gap:14px;
margin:0;
padding:14px 0;
overflow:visible;
border:0;
border-bottom:1px solid var(--meal-line);
border-radius:0;
background:transparent;
box-shadow:none;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat:last-child{border-bottom:0;}
html.page-product .smooth-cocoa-landing .sc-meal-stat::before,
html.page-product .smooth-cocoa-landing .sc-meal-stat::after{display:none;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon{
display:block;
width:44px;
height:44px;
margin:0;
border:1px solid rgba(7,138,147,.17);
border-radius:14px;
background:#eef8f7;
color:#0b727a;
flex-basis:44px;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon::after{inset:11px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat > div{
display:grid;
min-width:0;
grid-template-columns:minmax(0,1fr) auto;
grid-template-rows:auto auto;
align-items:center;
column-gap:18px;
row-gap:3px;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat span:not(.sc-meal-stat-icon){
grid-column:1;
grid-row:1;
margin:0;
color:var(--meal-ink);
font-size:15px;
font-weight:800;
letter-spacing:-.01em;
line-height:1.25;
text-transform:none;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat small{
display:block;
grid-column:1;
grid-row:2;
color:var(--meal-muted);
font-size:11.5px;
font-weight:500;
line-height:1.35;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong,
html.page-product .smooth-cocoa-landing .sc-meal-stat-heading{
display:flex;
min-width:108px;
min-height:0;
grid-column:2;
grid-row:1 / 3;
align-items:baseline;
justify-content:flex-end;
padding:0;
border-radius:0;
background:transparent;
color:#0a6870!important;
font-size:30px!important;
font-weight:800!important;
letter-spacing:-.05em!important;
line-height:1!important;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong b{font:inherit;color:inherit;}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong em{
margin-left:3px;
color:#476e72;
font-size:12px;
font-style:normal;
font-weight:750;
letter-spacing:0;
}
html.page-product .smooth-cocoa-landing .sc-meal-portion{
display:flex;
width:auto;
min-height:54px;
align-items:center;
justify-content:space-between;
gap:18px;
margin:0!important;
padding:14px 24px;
border-top:1px solid var(--meal-line);
background:#f4f9f8;
color:var(--meal-muted)!important;
font-size:11px!important;
line-height:1.35!important;
text-align:left;
}
html.page-product .smooth-cocoa-landing .sc-meal-portion span{
font-weight:650;
letter-spacing:.02em;
}
html.page-product .smooth-cocoa-landing .sc-meal-portion strong{
color:#115f66;
font-size:12px;
font-weight:850;
text-align:right;
}
html.page-product .smooth-cocoa-landing .sc-meal-product .sc-meal-carousel-nav{
position:static;
top:auto;
left:auto;
width:100%;
max-width:100%;
margin:17px auto 1px;
transform:none;
gap:8px;
}
html.page-product .smooth-cocoa-landing .sc-meal-current-name{
margin:0;
color:#234f54!important;
font-size:12px!important;
font-weight:850!important;
letter-spacing:.09em!important;
text-align:center;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-controls{gap:2px;}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-arrow{
width:44px;
height:44px;
border-color:var(--meal-line);
background:#f3f8f7;
color:#0b6d74;
box-shadow:none;
}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-arrow svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-arrow:hover{background:#0b6d74;color:#fff;transform:none;}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-dots{gap:0;}
html.page-product .smooth-cocoa-landing a.sc-meal-dot,
html.page-product .smooth-cocoa-landing .sc-meal-product a.sc-meal-dot{
width:32px;
height:44px;
flex-basis:32px;
}
html.page-product .smooth-cocoa-landing a.sc-meal-dot::before{
width:7px;
height:7px;
border:0;
background:#bfd3d3;
}
html.page-product .smooth-cocoa-landing a.sc-meal-dot.sc-meal-dot-active::before{
width:22px;
height:7px;
border:0;
background:#0b6d74;
box-shadow:none;
}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-changing .sc-meal-product img{opacity:.34;transform:scale(.985);}
@media(max-width:960px){
html.page-product .smooth-cocoa-landing .sc-meal-profile-grid{
grid-template-columns:minmax(0,520px);
grid-template-areas:"product" "nutrition";
justify-content:center;
gap:30px;
margin:0;
}
html.page-product .smooth-cocoa-landing .sc-meal-product{max-width:500px;}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-card{max-width:520px;margin:0 auto;}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-meal-profile{padding:48px 0 52px;}
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-shell{width:min(100% - 28px,520px);}
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-content-head{margin-bottom:22px;}
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-content-head h2{font-size:32px;line-height:1.08;}
html.page-product .smooth-cocoa-landing .sc-meal-profile .sc-content-head p{font-size:15px;line-height:1.5;}
html.page-product .smooth-cocoa-landing .sc-meal-category-selector{margin-bottom:26px;}
html.page-product .smooth-cocoa-landing .sc-meal-category-selector-link{min-height:44px;padding:9px 5px;font-size:10px!important;}
html.page-product .smooth-cocoa-landing .sc-meal-profile-grid{gap:24px;}
html.page-product .smooth-cocoa-landing .sc-meal-product{padding:9px;border-radius:22px;}
html.page-product .smooth-cocoa-landing .sc-meal-product img{border-radius:15px;}
html.page-product .smooth-cocoa-landing .sc-meal-product .sc-meal-carousel-nav{margin-top:12px;}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-card{border-radius:22px;}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-head{min-height:76px;padding:16px 18px;}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-head strong{font-size:18px;}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-head > small{padding:7px 9px;font-size:9.5px;}
html.page-product .smooth-cocoa-landing .sc-meal-nutrition-list{padding:2px 18px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat,
html.page-product .smooth-cocoa-landing .sc-meal-stat-protein,
html.page-product .smooth-cocoa-landing .sc-meal-stat-fibre,
html.page-product .smooth-cocoa-landing .sc-meal-stat-energy,
html.page-product .smooth-cocoa-landing .sc-meal-stat-minerals{
min-height:72px;
grid-template-columns:40px minmax(0,1fr);
gap:12px;
padding:12px 0;
}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat-icon::after{inset:10px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat > div{column-gap:10px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat span:not(.sc-meal-stat-icon){font-size:13px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat small{font-size:10px;}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong,
html.page-product .smooth-cocoa-landing .sc-meal-stat-heading{min-width:82px;font-size:25px!important;}
html.page-product .smooth-cocoa-landing .sc-meal-stat strong em{font-size:10px;}
html.page-product .smooth-cocoa-landing .sc-meal-portion{min-height:50px;padding:12px 18px;font-size:9.5px!important;}
html.page-product .smooth-cocoa-landing .sc-meal-portion strong{font-size:10.5px;}
html.page-product .smooth-cocoa-landing .sc-meal-carousel-arrow{width:44px;height:44px;}
html.page-product .smooth-cocoa-landing a.sc-meal-dot,
html.page-product .smooth-cocoa-landing .sc-meal-product a.sc-meal-dot{width:26px;height:44px;flex-basis:26px;}
}
@media(prefers-reduced-motion:reduce){
html.page-product .smooth-cocoa-landing .sc-meal-product img,
html.page-product .smooth-cocoa-landing .sc-meal-category-selector-link,
html.page-product .smooth-cocoa-landing .sc-meal-carousel-arrow{transition:none!important;}
}
/* FIGUACTIVE full composition — progressive disclosure inside the meal profile. */
html.page-product .smooth-cocoa-landing .sc-meal-details-toggle{
display:flex;
width:calc(100% - 48px);
min-height:48px;
align-items:center;
justify-content:center;
gap:10px;
margin:0 24px 20px;
padding:11px 18px;
border:1px solid rgba(11,109,116,.22);
border-radius:14px;
background:#fff;
color:#0b6d74;
font:inherit;
font-size:12px;
font-weight:850;
letter-spacing:.035em;
cursor:pointer;
transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-meal-details-toggle:hover{
border-color:rgba(11,109,116,.46);
background:#eef7f6;
}
html.page-product .smooth-cocoa-landing .sc-meal-details-toggle:focus-visible{
outline:3px solid rgba(27,179,189,.38);
outline-offset:3px;
}
html.page-product .smooth-cocoa-landing .sc-meal-details-toggle svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:2;
transition:transform .2s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-meal-details-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
html.page-product .smooth-cocoa-landing .sc-meal-full-details[hidden]{display:none!important;}
html.page-product .smooth-cocoa-landing .sc-meal-full-details{
overflow:hidden;
margin-top:26px;
border:1px solid var(--meal-line);
border-radius:24px;
background:#fff;
box-shadow:0 24px 60px -48px rgba(4,70,75,.5);
animation:scMealDetailsReveal .22s ease-out both;
}
@keyframes scMealDetailsReveal{
from{opacity:0;transform:translateY(-8px);}
to{opacity:1;transform:translateY(0);}
}
html.page-product .smooth-cocoa-landing .sc-meal-full-details-head{
display:flex;
min-height:88px;
align-items:center;
justify-content:space-between;
gap:24px;
padding:20px 28px;
border-bottom:1px solid var(--meal-line);
background:linear-gradient(110deg,#edf8f7,#fff);
}
html.page-product .smooth-cocoa-landing .sc-meal-full-details-head > div > span,
html.page-product .smooth-cocoa-landing .sc-meal-full-kicker{
display:block;
margin-bottom:5px;
color:#0b777f;
font-size:10px;
font-weight:850;
letter-spacing:.12em;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-details-head h3{
margin:0!important;
color:#17393d!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:clamp(21px,2vw,28px)!important;
font-weight:760!important;
letter-spacing:-.025em!important;
line-height:1.18!important;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-details-head > strong{
flex:0 0 auto;
max-width:330px;
padding:9px 13px;
border:1px solid rgba(11,109,116,.14);
border-radius:999px;
background:#fff;
color:#41676b;
font-size:11px;
line-height:1.35;
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-details-grid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
align-items:stretch;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition{
min-width:0;
padding:25px 22px 22px;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition h4{
margin:0 6px 14px!important;
color:#17393d!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:18px!important;
font-weight:760!important;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-table-wrap{overflow-x:auto;overscroll-behavior-inline:contain;}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition table{
width:100%;
border:0;
border-collapse:collapse;
font-variant-numeric:tabular-nums;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition th,
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition td{
padding:10px;
border:0;
border-bottom:1px solid rgba(11,109,116,.1);
color:#425b5e;
font-size:12px;
text-align:right;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition th:first-child,
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition td:first-child{width:42%;text-align:left;}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition thead th{
color:#607a7d;
font-size:9.5px;
font-weight:800;
letter-spacing:.045em;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition th:nth-child(3),
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition td:nth-child(3){background:rgba(11,109,116,.055);color:#123f43;font-weight:800;}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition tbody tr:last-child > *{border-bottom:0;}
html.page-product .smooth-cocoa-landing .sc-meal-full-ingredients{
position:relative;
display:flex;
min-width:0;
flex-direction:column;
justify-content:center;
overflow:hidden;
padding:38px 34px 28px;
background:linear-gradient(145deg,#0b6269,#074c52);
isolation:isolate;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-ingredients::before{
content:"";
position:absolute;
right:-76px;
bottom:-88px;
z-index:-1;
width:270px;
height:270px;
border:56px solid rgba(255,255,255,.035);
border-radius:50%;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-ingredients-icon{
display:grid;
width:52px;
height:52px;
margin-bottom:20px;
place-items:center;
border:1px solid rgba(255,255,255,.22);
border-radius:16px;
background:rgba(255,255,255,.09);
color:#bde8e8;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-ingredients-icon svg{
width:25px;
height:25px;
fill:none;
stroke:currentColor;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:1.7;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-ingredients .sc-meal-full-kicker{color:#a9e0e2;}
html.page-product .smooth-cocoa-landing .sc-meal-full-ingredients h4{
max-width:20ch;
margin:0 0 15px!important;
color:#fff!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:clamp(21px,2vw,27px)!important;
font-weight:730!important;
letter-spacing:-.025em!important;
line-height:1.2!important;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-ingredients div > p{
max-width:58ch!important;
margin:0!important;
color:rgba(239,251,251,.86)!important;
font-size:13px!important;
line-height:1.7!important;
}
html.page-product .smooth-cocoa-landing .sc-meal-full-ingredients > small{
margin-top:22px;
padding-top:16px;
border-top:1px solid rgba(255,255,255,.14);
color:rgba(224,245,246,.7);
font-size:10.5px;
line-height:1.5;
}
@media(max-width:860px){
html.page-product .smooth-cocoa-landing .sc-meal-full-details-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-meal-details-toggle{width:calc(100% - 36px);margin:0 18px 18px;}
html.page-product .smooth-cocoa-landing .sc-meal-full-details{margin-top:20px;border-radius:20px;}
html.page-product .smooth-cocoa-landing .sc-meal-full-details-head{display:block;min-height:0;padding:18px;}
html.page-product .smooth-cocoa-landing .sc-meal-full-details-head h3{font-size:21px!important;}
html.page-product .smooth-cocoa-landing .sc-meal-full-details-head > strong{display:inline-block;max-width:100%;margin-top:11px;text-align:left;}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition{padding:20px 10px 17px;}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition h4{margin-inline:8px!important;font-size:16px!important;}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition th,
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition td{padding:9px 7px;font-size:10.5px;}
html.page-product .smooth-cocoa-landing .sc-meal-full-nutrition thead th{font-size:8px;}
html.page-product .smooth-cocoa-landing .sc-meal-full-ingredients{padding:28px 20px 23px;}
html.page-product .smooth-cocoa-landing .sc-meal-full-ingredients h4{font-size:21px!important;}
html.page-product .smooth-cocoa-landing .sc-meal-full-ingredients div > p{font-size:13px!important;line-height:1.65!important;}
}
@media(prefers-reduced-motion:reduce){
html.page-product .smooth-cocoa-landing .sc-meal-details-toggle,
html.page-product .smooth-cocoa-landing .sc-meal-details-toggle svg{transition:none!important;}
html.page-product .smooth-cocoa-landing .sc-meal-full-details{animation:none!important;}
}
/* FIGUACTIVE FAQ — reusable accordion before the final offer. */
html.page-product .smooth-cocoa-landing .sc-faq{
background:#fff;
color:#17393d;
}
html.page-product .smooth-cocoa-landing .sc-faq-columns{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start;
gap:16px;
}
html.page-product .smooth-cocoa-landing .sc-faq-column{
display:grid;
min-width:0;
gap:10px;
}
html.page-product .smooth-cocoa-landing .sc-faq-item{
overflow:hidden;
border:1px solid rgba(8,119,127,.15);
border-radius:18px;
background:#fff;
box-shadow:0 18px 44px -40px rgba(5,72,77,.48);
transition:border-color .2s ease-out,box-shadow .2s ease-out,background-color .2s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-faq-item[open]{
border-color:rgba(8,119,127,.3);
background:#fbfdfd;
box-shadow:0 22px 48px -38px rgba(5,72,77,.42);
}
html.page-product .smooth-cocoa-landing .sc-faq-item summary{
display:grid;
min-height:62px;
grid-template-columns:30px minmax(0,1fr) 28px;
align-items:center;
gap:12px;
padding:12px 16px;
color:#17393d;
cursor:pointer;
list-style:none;
touch-action:manipulation;
}
html.page-product .smooth-cocoa-landing .sc-faq-item summary::-webkit-details-marker{display:none;}
html.page-product .smooth-cocoa-landing .sc-faq-item summary > span{
color:#0a858d;
font-size:11px;
font-weight:850;
letter-spacing:.08em;
font-variant-numeric:tabular-nums;
}
html.page-product .smooth-cocoa-landing .sc-faq-item summary > strong{
color:inherit;
font-family:var(--font-display,'Inter',sans-serif);
font-size:14px;
font-weight:740;
letter-spacing:-.012em;
line-height:1.4;
}
html.page-product .smooth-cocoa-landing .sc-faq-item summary::after{
content:"+";
display:grid;
width:28px;
height:28px;
place-items:center;
border:1px solid rgba(8,119,127,.18);
border-radius:50%;
background:#f2f8f8;
color:#08777f;
font-size:18px;
font-weight:500;
line-height:1;
transition:transform .2s ease-out,background-color .2s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-faq-item[open] summary::after{
background:#e6f3f3;
transform:rotate(45deg);
}
html.page-product .smooth-cocoa-landing .sc-faq-item summary:focus-visible{
outline:3px solid rgba(27,179,189,.38);
outline-offset:-3px;
border-radius:17px;
}
html.page-product .smooth-cocoa-landing .sc-faq-answer{
margin:0 16px 0 58px;
padding:0 36px 16px 0;
}
html.page-product .smooth-cocoa-landing .sc-faq-answer > p{
max-width:68ch!important;
margin:0!important;
color:#5c7376!important;
font-size:13px!important;
line-height:1.65!important;
}
html.page-product .smooth-cocoa-landing .sc-faq-answer > p strong{color:#274b4f;}
html.page-product .smooth-cocoa-landing .sc-faq-composition-link{
display:inline-flex;
min-height:46px;
align-items:center;
justify-content:center;
margin-top:16px;
padding:10px 17px;
border:1px solid rgba(8,119,127,.28);
border-radius:12px;
background:#fff;
color:#08777f!important;
font-size:12px;
font-weight:850;
letter-spacing:.025em;
text-decoration:none!important;
transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-faq-composition-link:hover{
border-color:rgba(8,119,127,.48);
background:#edf7f7;
color:#075f66!important;
}
html.page-product .smooth-cocoa-landing .sc-faq-composition-link:focus-visible{
outline:3px solid rgba(27,179,189,.38);
outline-offset:3px;
}
html.page-product .smooth-cocoa-landing #sc-meal-profile,
html.page-product .smooth-cocoa-landing #sc-meal-details-toggle{scroll-margin-top:120px;}
@media(max-width:760px){
html.page-product .smooth-cocoa-landing .sc-faq-columns{grid-template-columns:1fr;gap:10px;}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-faq-item{border-radius:16px;}
html.page-product .smooth-cocoa-landing .sc-faq-item summary{
min-height:60px;
grid-template-columns:28px minmax(0,1fr) 28px;
gap:11px;
padding:12px 14px;
}
html.page-product .smooth-cocoa-landing .sc-faq-item summary > strong{font-size:14px;line-height:1.42;}
html.page-product .smooth-cocoa-landing .sc-faq-item summary::after{width:28px;height:28px;font-size:18px;}
html.page-product .smooth-cocoa-landing .sc-faq-answer{margin:0 14px 0 53px;padding:0 28px 18px 0;}
html.page-product .smooth-cocoa-landing .sc-faq-answer > p{font-size:13px!important;line-height:1.68!important;}
html.page-product .smooth-cocoa-landing .sc-faq-composition-link{width:100%;min-height:48px;}
}
@media(prefers-reduced-motion:reduce){
html.page-product .smooth-cocoa-landing .sc-faq-item,
html.page-product .smooth-cocoa-landing .sc-faq-item summary::after,
html.page-product .smooth-cocoa-landing .sc-faq-composition-link{transition:none!important;}
}
/* FIGUACTIVE — final conversion panel */
html.page-product .smooth-cocoa-landing .sc-final{
position:relative;
width:100%;
overflow:hidden;
padding:clamp(56px,6vw,88px) clamp(18px,3vw,40px);
background:#fff;
color:#fff;
text-align:left;
}
html.page-product .smooth-cocoa-landing .sc-final::before{display:none;}
html.page-product .smooth-cocoa-landing .sc-final-inner{
position:relative;
display:grid;
width:min(1180px,100%);
grid-template-columns:minmax(0,1.18fr) minmax(320px,.72fr);
align-items:stretch;
gap:clamp(28px,4vw,64px);
margin:0 auto;
padding:clamp(38px,4.5vw,64px);
overflow:hidden;
border:1px solid rgba(255,255,255,.12);
border-radius:30px;
background:
radial-gradient(circle at 35% 18%,rgba(78,190,193,.18),transparent 38%),
linear-gradient(135deg,#092f35 0%,#07474e 58%,#08636a 100%);
box-shadow:0 32px 80px -48px rgba(5,54,60,.68);
}
html.page-product .smooth-cocoa-landing .sc-final-inner::before{
content:"";
position:absolute;
top:0;
right:0;
left:0;
height:12px;
background:repeating-linear-gradient(135deg,#26b7c0 0 16px,#0a3e45 16px 32px);
}
html.page-product .smooth-cocoa-landing .sc-final-copy{
position:relative;
z-index:1;
display:flex;
width:auto;
flex-direction:column;
justify-content:center;
margin:0;
padding-top:8px;
}
html.page-product .smooth-cocoa-landing .sc-final-eyebrow{
display:block;
margin-bottom:16px;
color:#8ee0e2;
font-size:12px;
font-weight:850;
letter-spacing:.18em;
line-height:1;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-final h2{
max-width:760px;
margin:0 0 18px!important;
color:#fff!important;
font-family:var(--font-display)!important;
font-size:clamp(36px,3.7vw,54px)!important;
font-weight:650!important;
letter-spacing:-.035em!important;
line-height:1.02!important;
text-align:left!important;
text-wrap:balance;
}
html.page-product .smooth-cocoa-landing .sc-final-copy > p{
max-width:62ch;
margin:0!important;
color:#d3e5e5!important;
font-size:clamp(15px,1.35vw,18px)!important;
line-height:1.65!important;
text-align:left!important;
}
html.page-product .smooth-cocoa-landing .sc-final-offer{
position:relative;
z-index:1;
display:flex;
min-height:300px;
flex-direction:column;
align-items:center;
justify-content:center;
padding:clamp(28px,3vw,46px);
border:1px solid rgba(8,75,82,.08);
border-radius:24px;
background:#fff;
box-shadow:0 24px 48px -34px rgba(0,33,38,.72);
color:#0b3439;
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-final-offer-label{
color:#5d7478;
font-size:12px;
font-weight:850;
letter-spacing:.12em;
line-height:1.35;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-final-offer-price{
margin:22px 0 8px!important;
color:#0b3439!important;
font-family:var(--font-display)!important;
font-size:clamp(28px,3vw,40px)!important;
font-weight:800!important;
letter-spacing:-.035em!important;
line-height:1!important;
white-space:nowrap;
}
html.page-product .smooth-cocoa-landing .sc-final-offer-note{
color:#62797c;
font-size:13px;
line-height:1.5;
}
html.page-product .smooth-cocoa-landing .sc-final a.sc-cta{
display:inline-flex;
min-width:220px;
min-height:56px;
align-items:center;
justify-content:center;
gap:10px;
margin-top:25px;
padding:14px 24px;
border:0;
border-radius:15px;
background:linear-gradient(135deg,#1bb3bd,#08777f);
box-shadow:0 14px 28px -20px rgba(5,87,95,.82);
color:#fff!important;
font-size:14px;
font-weight:850;
text-decoration:none!important;
transition:transform .2s ease-out,box-shadow .2s ease-out,filter .2s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-final a.sc-cta svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:2;
}
html.page-product .smooth-cocoa-landing .sc-final a.sc-cta:hover{
transform:translateY(-2px);
background:linear-gradient(135deg,#1bb3bd,#08777f);
box-shadow:0 18px 34px -20px rgba(5,87,95,.92);
color:#fff!important;
filter:saturate(1.05);
}
html.page-product .smooth-cocoa-landing .sc-final a.sc-cta:focus-visible{
outline:3px solid #74d4d8;
outline-offset:4px;
}
@media(max-width:860px){
html.page-product .smooth-cocoa-landing .sc-final-inner{
width:min(680px,100%);
grid-template-columns:1fr;
gap:32px;
}
html.page-product .smooth-cocoa-landing .sc-final-offer{min-height:260px;}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-final{padding:40px 14px;}
html.page-product .smooth-cocoa-landing .sc-final-inner{
gap:27px;
padding:34px 20px 20px;
border-radius:24px;
}
html.page-product .smooth-cocoa-landing .sc-final-inner::before{height:9px;}
html.page-product .smooth-cocoa-landing .sc-final-eyebrow{margin-bottom:13px;font-size:10px;}
html.page-product .smooth-cocoa-landing .sc-final h2{font-size:32px!important;line-height:1.04!important;}
html.page-product .smooth-cocoa-landing .sc-final-copy > p{font-size:15px!important;line-height:1.55!important;}
html.page-product .smooth-cocoa-landing .sc-final-offer{
min-height:0;
padding:28px 20px 20px;
border-radius:18px;
}
html.page-product .smooth-cocoa-landing .sc-final-offer-label{font-size:10px;}
html.page-product .smooth-cocoa-landing .sc-final-offer-price{margin-top:18px!important;font-size:30px!important;}
html.page-product .smooth-cocoa-landing .sc-final-offer-note{font-size:12px;}
html.page-product .smooth-cocoa-landing .sc-final a.sc-cta{
width:100%;
min-width:0;
min-height:54px;
margin-top:21px;
}
}
@media(prefers-reduced-motion:reduce){
html.page-product .smooth-cocoa-landing .sc-final a.sc-cta{transition:none!important;}
}
/* Dynamic FIGUACTIVE nutrition details — synchronized with the meal profile carousel. */
html.page-product .smooth-cocoa-landing .sc-details-section{
--sc-detail-accent:#08777f;
--sc-detail-ink:#17393d;
--sc-detail-muted:#647b7e;
position:relative;
overflow:hidden;
border-top:1px solid rgba(8,119,127,.1);
background:
radial-gradient(circle at 8% 12%,rgba(27,179,189,.1),transparent 28%),
radial-gradient(circle at 94% 88%,rgba(8,119,127,.08),transparent 27%),
#fbfdfd;
}
html.page-product .smooth-cocoa-landing .sc-details-intro{
max-width:820px;
margin-inline:auto;
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-details-kicker{
display:block;
margin-bottom:12px;
color:var(--sc-detail-accent);
font-size:11px;
font-weight:850;
letter-spacing:.14em;
line-height:1.3;
}
html.page-product .smooth-cocoa-landing .sc-details-intro > p{
max-width:58ch!important;
margin:16px auto 0!important;
color:var(--sc-detail-muted)!important;
font-size:15px!important;
line-height:1.6!important;
}
html.page-product .smooth-cocoa-landing .sc-details-selector{
width:min(780px,100%);
margin:34px auto 30px;
}
html.page-product .smooth-cocoa-landing .sc-details-category-tabs{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:5px;
padding:5px;
border:1px solid rgba(8,119,127,.18);
border-radius:999px;
background:rgba(244,249,249,.92);
}
html.page-product .smooth-cocoa-landing .sc-details-category-tabs button{
min-height:48px;
padding:10px 16px;
border:0;
border-radius:999px;
background:transparent;
color:#47676a;
font:inherit;
font-size:13px;
font-weight:850;
letter-spacing:.035em;
text-transform:uppercase;
cursor:pointer;
transition:background-color .2s ease-out,color .2s ease-out,box-shadow .2s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-details-category-tabs button:hover{background:rgba(8,119,127,.07);color:#075f66;}
html.page-product .smooth-cocoa-landing .sc-details-category-tabs button.is-active{
background:linear-gradient(135deg,#096c73,#0a858d);
box-shadow:0 10px 24px -18px rgba(4,80,86,.9);
color:#fff;
}
html.page-product .smooth-cocoa-landing .sc-details-category-tabs button:focus-visible,
html.page-product .smooth-cocoa-landing .sc-details-arrow:focus-visible,
html.page-product .smooth-cocoa-landing .sc-details-select-wrap select:focus-visible{
outline:3px solid rgba(27,179,189,.38);
outline-offset:3px;
}
html.page-product .smooth-cocoa-landing .sc-details-product-switcher{
display:grid;
grid-template-columns:52px minmax(0,1fr) 52px;
gap:10px;
margin-top:13px;
}
html.page-product .smooth-cocoa-landing .sc-details-arrow{
display:grid;
width:52px;
height:52px;
place-items:center;
padding:0;
border:1px solid rgba(8,119,127,.2);
border-radius:16px;
background:#fff;
color:var(--sc-detail-accent);
cursor:pointer;
transition:background-color .2s ease-out,border-color .2s ease-out,transform .2s ease-out;
}
html.page-product .smooth-cocoa-landing .sc-details-arrow:hover{border-color:rgba(8,119,127,.45);background:#f0f8f8;transform:translateY(-1px);}
html.page-product .smooth-cocoa-landing .sc-details-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;}
html.page-product .smooth-cocoa-landing .sc-details-select-wrap{position:relative;display:block;min-width:0;}
html.page-product .smooth-cocoa-landing .sc-details-select-wrap select{
width:100%;
height:52px;
padding:0 52px 0 20px;
border:1px solid rgba(8,119,127,.2);
border-radius:16px;
appearance:none;
background:#fff;
color:var(--sc-detail-ink);
font:inherit;
font-size:15px;
font-weight:800;
cursor:pointer;
}
html.page-product .smooth-cocoa-landing .sc-details-select-wrap > svg{
position:absolute;
top:50%;
right:18px;
width:18px;
height:18px;
pointer-events:none;
fill:none;
stroke:var(--sc-detail-accent);
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:2;
transform:translateY(-50%);
}
html.page-product .smooth-cocoa-landing .sc-details-live{
width:min(1120px,100%);
margin-inline:auto;
overflow:hidden;
border:1px solid rgba(8,119,127,.14);
border-radius:28px;
background:rgba(255,255,255,.84);
box-shadow:0 28px 72px -48px rgba(3,75,81,.42);
}
html.page-product .smooth-cocoa-landing .sc-details-product-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:25px 30px;
border-bottom:1px solid rgba(8,119,127,.1);
background:linear-gradient(110deg,rgba(235,248,248,.92),rgba(255,255,255,.96));
}
html.page-product .smooth-cocoa-landing .sc-details-product-heading > div > span{
display:block;
margin-bottom:5px;
color:#70878a;
font-size:10px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}
html.page-product .smooth-cocoa-landing .sc-details-product-heading h3{
margin:0!important;
color:var(--sc-detail-ink)!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:clamp(23px,2.2vw,32px)!important;
font-weight:750!important;
letter-spacing:-.025em!important;
line-height:1.15!important;
}
html.page-product .smooth-cocoa-landing .sc-details-serving{
flex:0 0 auto;
max-width:360px;
padding:10px 15px;
border:1px solid rgba(8,119,127,.13);
border-radius:999px;
background:#fff;
color:#41676b;
font-size:12px;
font-weight:750;
line-height:1.35;
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-details-grid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
gap:0;
align-items:stretch;
}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition{
border:0;
border-right:1px solid rgba(8,119,127,.1);
border-radius:0;
background:#fff;
box-shadow:none;
}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-detail-card-head{
padding:25px 28px 18px;
border-bottom:0;
background:#fff;
}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-detail-card-label{color:var(--sc-detail-accent);}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-table-wrap{padding:0 20px 24px;}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition th,
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition td{
padding:11px 10px;
border-bottom:1px solid rgba(8,119,127,.085);
color:#425b5e;
font-size:12.5px;
}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition th:nth-child(3),
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition td:nth-child(3){background:rgba(8,119,127,.055);color:#123f43;font-weight:800;}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition thead th{color:#557377;font-size:10px;}
html.page-product .smooth-cocoa-landing .sc-ingredients-story{
position:relative;
display:flex;
min-width:0;
flex-direction:column;
justify-content:center;
overflow:hidden;
padding:42px 36px 32px;
background:linear-gradient(145deg,#0b6269,#074c52);
isolation:isolate;
}
html.page-product .smooth-cocoa-landing .sc-ingredients-story::before{
content:"";
position:absolute;
right:-70px;
bottom:-74px;
z-index:-1;
width:280px;
height:280px;
border:58px solid rgba(255,255,255,.035);
border-radius:50%;
}
html.page-product .smooth-cocoa-landing .sc-ingredients-icon{
display:grid;
width:58px;
height:58px;
margin-bottom:24px;
place-items:center;
border:1px solid rgba(255,255,255,.22);
border-radius:18px;
background:rgba(255,255,255,.09);
color:#bde8e8;
}
html.page-product .smooth-cocoa-landing .sc-ingredients-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;}
html.page-product .smooth-cocoa-landing .sc-ingredients-copy .sc-detail-card-label{color:#a9e0e2;}
html.page-product .smooth-cocoa-landing .sc-ingredients-copy h3{
max-width:18ch;
margin:0 0 18px!important;
color:#fff!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:clamp(22px,2vw,28px)!important;
font-weight:720!important;
letter-spacing:-.025em!important;
line-height:1.18!important;
}
html.page-product .smooth-cocoa-landing .sc-ingredients-copy > p{
max-width:56ch!important;
margin:0!important;
color:rgba(239,251,251,.84)!important;
font-size:13.5px!important;
line-height:1.72!important;
}
html.page-product .smooth-cocoa-landing .sc-ingredients-note{
margin:26px 0 0!important;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.14);
color:rgba(224,245,246,.68)!important;
font-size:11.5px!important;
line-height:1.55!important;
}
html.page-product .smooth-cocoa-landing .sc-details-static-fallback{
display:grid;
max-width:720px;
gap:8px;
margin:30px auto 0;
padding:26px;
border:1px solid rgba(8,119,127,.14);
border-radius:20px;
background:#fff;
color:var(--sc-detail-ink);
text-align:center;
}
html.page-product .smooth-cocoa-landing .sc-details-static-fallback p{margin:0!important;color:var(--sc-detail-muted)!important;}
@media(max-width:860px){
html.page-product .smooth-cocoa-landing .sc-details-grid{grid-template-columns:1fr;}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition{border-right:0;border-bottom:1px solid rgba(8,119,127,.1);}
html.page-product .smooth-cocoa-landing .sc-ingredients-story{min-height:380px;}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-details-intro{text-align:center;}
html.page-product .smooth-cocoa-landing .sc-details-intro > p{font-size:14px!important;}
html.page-product .smooth-cocoa-landing .sc-details-selector{margin:26px auto 22px;}
html.page-product .smooth-cocoa-landing .sc-details-category-tabs{gap:3px;padding:4px;}
html.page-product .smooth-cocoa-landing .sc-details-category-tabs button{min-height:44px;padding:8px 6px;font-size:11px;}
html.page-product .smooth-cocoa-landing .sc-details-product-switcher{grid-template-columns:46px minmax(0,1fr) 46px;gap:7px;margin-top:9px;}
html.page-product .smooth-cocoa-landing .sc-details-arrow{width:46px;height:48px;border-radius:14px;}
html.page-product .smooth-cocoa-landing .sc-details-select-wrap select{height:48px;padding:0 38px 0 13px;border-radius:14px;font-size:14px;}
html.page-product .smooth-cocoa-landing .sc-details-select-wrap > svg{right:12px;width:16px;height:16px;}
html.page-product .smooth-cocoa-landing .sc-details-live{border-radius:21px;}
html.page-product .smooth-cocoa-landing .sc-details-product-heading{display:block;padding:21px 18px;}
html.page-product .smooth-cocoa-landing .sc-details-product-heading h3{font-size:24px!important;}
html.page-product .smooth-cocoa-landing .sc-details-serving{display:inline-block;max-width:100%;margin-top:13px;padding:8px 12px;text-align:left;}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-detail-card-head{padding:22px 17px 12px;}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-table-wrap{padding:0 10px 18px;}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition th,
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition td{padding:10px 8px;font-size:12px;}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition th:nth-child(2),
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition td:nth-child(2){display:none;}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition th:first-child,
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition td:first-child{width:55%;}
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition th:nth-child(3),
html.page-product .smooth-cocoa-landing .sc-details-grid .sc-nutrition td:nth-child(3){width:45%;}
html.page-product .smooth-cocoa-landing .sc-ingredients-story{min-height:0;padding:32px 21px 24px;}
html.page-product .smooth-cocoa-landing .sc-ingredients-icon{width:52px;height:52px;margin-bottom:20px;border-radius:16px;}
html.page-product .smooth-cocoa-landing .sc-ingredients-copy h3{font-size:23px!important;}
html.page-product .smooth-cocoa-landing .sc-ingredients-copy > p{font-size:13px!important;line-height:1.68!important;}
html.page-product .smooth-cocoa-landing .sc-ingredients-note{font-size:11px!important;}
}
@media(prefers-reduced-motion:reduce){
html.page-product .smooth-cocoa-landing .sc-details-category-tabs button,
html.page-product .smooth-cocoa-landing .sc-details-arrow{transition:none!important;}
}
/* FIGUACTIVE audience — reusable landing-section component */
html.page-product .smooth-cocoa-landing .sc-fit{
position:relative;
overflow:hidden;
border-top:1px solid rgba(8,119,127,.1);
background:
radial-gradient(circle at 8% 16%,rgba(25,181,189,.1),transparent 28%),
radial-gradient(circle at 92% 88%,rgba(7,138,147,.08),transparent 30%),
linear-gradient(180deg,#f9fcfc 0%,#f1f8f7 100%);
}
html.page-product .smooth-cocoa-landing .sc-fit .sc-shell{
width:min(1180px,calc(100% - 64px));
}
html.page-product .smooth-cocoa-landing .sc-fit-head{
max-width:860px;
margin-bottom:42px;
}
html.page-product .smooth-cocoa-landing .sc-fit-head h2{
white-space:normal;
text-wrap:balance;
}
html.page-product .smooth-cocoa-landing .sc-fit-head p{
width:auto;
max-width:760px!important;
white-space:normal;
text-wrap:balance;
}
html.page-product .smooth-cocoa-landing .sc-fit-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
html.page-product .smooth-cocoa-landing .sc-fit-card{
position:relative;
display:flex;
min-width:0;
min-height:224px;
flex-direction:column;
padding:26px;
overflow:hidden;
border:1px solid rgba(8,119,127,.14);
border-radius:24px;
background:rgba(255,255,255,.92);
box-shadow:0 16px 38px rgba(15,64,68,.06);
}
html.page-product .smooth-cocoa-landing .sc-fit-card::before{
content:"";
position:absolute;
top:0;
left:26px;
width:54px;
height:3px;
border-radius:0 0 999px 999px;
background:linear-gradient(90deg,var(--sc-brand),var(--sc-brand-bright));
}
html.page-product .smooth-cocoa-landing .sc-fit-icon{
display:grid;
width:50px;
height:50px;
margin-bottom:22px;
flex:0 0 50px;
place-items:center;
border:1px solid rgba(8,119,127,.18);
border-radius:16px;
background:var(--sc-aqua);
color:var(--sc-brand-deep);
}
html.page-product .smooth-cocoa-landing .sc-fit-icon::before{
content:"";
display:block;
width:25px;
height:25px;
background:currentColor;
-webkit-mask:var(--sc-fit-icon-image) center/contain no-repeat;
mask:var(--sc-fit-icon-image) center/contain no-repeat;
}
html.page-product .smooth-cocoa-landing .sc-fit-icon-time{--sc-fit-icon-image:url('/images/smooth-cocoa-landing/icons/fit-time.svg');}
html.page-product .smooth-cocoa-landing .sc-fit-icon-balance{--sc-fit-icon-image:url('/images/smooth-cocoa-landing/icons/fit-balance.svg');}
html.page-product .smooth-cocoa-landing .sc-fit-icon-goal{--sc-fit-icon-image:url('/images/smooth-cocoa-landing/icons/fit-goal.svg');}
html.page-product .smooth-cocoa-landing .sc-fit-icon-work{--sc-fit-icon-image:url('/images/smooth-cocoa-landing/icons/fit-work.svg');}
html.page-product .smooth-cocoa-landing .sc-fit-icon-variety{--sc-fit-icon-image:url('/images/smooth-cocoa-landing/icons/fit-variety.svg');}
html.page-product .smooth-cocoa-landing .sc-fit-copy h3{
margin:0 0 9px!important;
color:#153a3e!important;
font-family:var(--font-display,'Inter',sans-serif)!important;
font-size:20px!important;
font-weight:720!important;
letter-spacing:-.02em!important;
line-height:1.22!important;
text-transform:none!important;
text-wrap:balance;
}
html.page-product .smooth-cocoa-landing .sc-fit-copy p{
margin:0!important;
color:#627579!important;
font-size:14px!important;
line-height:1.6!important;
}
@media(max-width:920px){
html.page-product .smooth-cocoa-landing .sc-fit-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-fit{padding:52px 0;}
html.page-product .smooth-cocoa-landing .sc-fit .sc-shell{width:min(100% - 32px,1180px);}
html.page-product .smooth-cocoa-landing .sc-fit-head{margin-bottom:28px;}
html.page-product .smooth-cocoa-landing .sc-fit-head h2{font-size:29px!important;}
html.page-product .smooth-cocoa-landing .sc-fit-head p{font-size:14px!important;line-height:1.55!important;}
html.page-product .smooth-cocoa-landing .sc-fit-grid{grid-template-columns:1fr;gap:12px;}
html.page-product .smooth-cocoa-landing .sc-fit-card{
display:grid;
grid-template-columns:46px minmax(0,1fr);
gap:14px;
min-height:0;
padding:18px;
border-radius:19px;
}
html.page-product .smooth-cocoa-landing .sc-fit-card::before{left:18px;width:46px;}
html.page-product .smooth-cocoa-landing .sc-fit-icon{
width:46px;
height:46px;
margin:0;
flex-basis:46px;
border-radius:14px;
}
html.page-product .smooth-cocoa-landing .sc-fit-icon::before{width:23px;height:23px;}
html.page-product .smooth-cocoa-landing .sc-fit-copy h3{margin-bottom:6px!important;font-size:17px!important;line-height:1.25!important;}
html.page-product .smooth-cocoa-landing .sc-fit-copy p{font-size:13.5px!important;line-height:1.52!important;}
}
/* One global vertical rhythm for standard FIGUACTIVE content sections. */
html.page-product .smooth-cocoa-landing .sc-section{
padding-block:clamp(48px,5vw,72px);
}
@media(max-width:600px){
html.page-product .smooth-cocoa-landing .sc-section{padding-block:48px;}
}
/* Shared purchase CTA color: product actions, product-card actions and cart checkout. */
:is(html.page-home,html.page-store,html.page-product) article.card .quick-add button,
:is(html.page-home,html.page-store,html.page-product) article.card .quick-add .quick-view-link,
html.page-product [data-product-add],
html.page-product [data-sticky-product-add],
.site-primary-cta:not(.home-main-hero-cta-secondary),
[data-shared-drawer="cart"] .checkout-btn {
border-color:transparent!important;
background:var(--commerce-final-action)!important;
color:#fff!important;
box-shadow:0 10px 24px rgba(var(--commerce-final-action-rgb),.22)!important;
filter:none!important;
text-shadow:none!important;
}
:is(html.page-home,html.page-store,html.page-product) article.card .quick-add button:hover,
:is(html.page-home,html.page-store,html.page-product) article.card .quick-add .quick-view-link:hover,
html.page-product [data-product-add]:hover,
html.page-product [data-sticky-product-add]:hover,
.site-primary-cta:not(.home-main-hero-cta-secondary):hover,
[data-shared-drawer="cart"] .checkout-btn:hover {
background:var(--commerce-final-action-hover)!important;
box-shadow:0 12px 28px rgba(var(--commerce-final-action-rgb),.28)!important;
filter:none!important;
}
:is(html.page-home,html.page-store,html.page-product) article.card .quick-add button:focus-visible,
:is(html.page-home,html.page-store,html.page-product) article.card .quick-add .quick-view-link:focus-visible,
html.page-product [data-product-add]:focus-visible,
html.page-product [data-sticky-product-add]:focus-visible,
.site-primary-cta:not(.home-main-hero-cta-secondary):focus-visible,
[data-shared-drawer="cart"] .checkout-btn:focus-visible {
outline:3px solid rgba(var(--commerce-final-action-rgb),.28);
outline-offset:3px;
}
/* One mobile product-card treatment across home, catalog and recommendations. */
@media(max-width:600px){
:is(html.page-home,html.page-store,html.page-product) article.card{
border:1px solid rgba(7,138,147,.13)!important;
background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(250,252,252,.9))!important;
box-shadow:var(--glass-shadow)!important;
transform:none!important;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
:is(html.page-home,html.page-store,html.page-product) article.card:hover{
border-color:rgba(7,138,147,.13)!important;
box-shadow:var(--glass-shadow)!important;
transform:none!important;
}
:is(html.page-home,html.page-store,html.page-product) article.card:active{
border-color:rgba(7,138,147,.24)!important;
}
:is(html.page-home,html.page-store,html.page-product) article.card .quick-add{
display:none!important;
}
}
:where(.site-skip-link){position:fixed;z-index:100000;top:8px;left:8px;padding:12px 16px;border-radius:8px;background:#171717;color:#fff;font:600 14px/1.2 Inter,system-ui,sans-serif;text-decoration:none;transform:translateY(-150%);transition:transform .18s ease;}
:where(.site-skip-link:focus){transform:translateY(0);outline:3px solid #fff;outline-offset:2px;}
@media(max-width:820px){
header.site .icon-btn,header.site .burger{width:44px;min-width:44px;min-height:44px;touch-action:manipulation;}
:where(.site-footer a){display:inline-flex;align-items:center;min-height:44px;}
}
/* ZEITGARD PRO — editorial product description, built independently of previous versions. */
html.page-product .product-html-zeitgard-pro-v9{--zg9-ink:var(--ink,#181818);--zg9-muted:var(--ink-soft,#666);--zg9-accent:var(--crystal-deep,#075e66);--zg9-line:#deded9;--zg9-soft:#f8f7f4;--zg9-rose:#eee6e1;color:var(--zg9-ink);background:#fff;font-family:var(--font-body);font-size:16px;line-height:1.6;}
html.page-product .product-html-zeitgard-pro-v9 *{box-sizing:border-box;}
html.page-product .product-html-zeitgard-pro-v9 [id]{scroll-margin-top:110px;}
html.page-product .product-html-zeitgard-pro-v9 img{display:block;max-width:100%;height:auto;content-visibility:visible;}
html.page-product .product-html-zeitgard-pro-v9 figure{margin:0;}
html.page-product .product-html-zeitgard-pro-v9 h2{font-family:var(--font-display)!important;font-size:var(--landing-heading-size)!important;font-weight:500!important;line-height:1.06!important;letter-spacing:normal!important;text-transform:none!important;color:var(--zg9-ink)!important;text-align:left!important;margin:16px 0 24px!important;max-width:none!important;}
html.page-product .product-html-zeitgard-pro-v9 h3{font-family:var(--font-display)!important;font-size:20px!important;font-weight:650!important;line-height:1.25!important;letter-spacing:-.015em!important;text-transform:none!important;color:var(--zg9-ink)!important;text-align:left!important;margin:0 0 12px!important;}
html.page-product .product-html-zeitgard-pro-v9 h4{font-family:var(--font-display)!important;font-size:15px!important;font-weight:650!important;line-height:1.4!important;letter-spacing:normal!important;text-transform:none!important;color:var(--zg9-ink)!important;margin:0 0 6px!important;}
html.page-product .product-html-zeitgard-pro-v9 p{font-size:16px!important;font-weight:400!important;line-height:1.6!important;letter-spacing:normal!important;text-align:left!important;color:var(--zg9-muted)!important;margin:0 0 20px!important;max-width:none!important;}
html.page-product .product-html-zeitgard-pro-v9 a{color:inherit;}
html.page-product .product-html-zeitgard-pro-v9 a:focus-visible,html.page-product .product-html-zeitgard-pro-v9 summary:focus-visible{outline:3px solid var(--crystal,#078a93);outline-offset:5px;border-radius:4px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-shell{width:min(1184px,calc(100% - 80px));margin:0 auto;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-section{padding:88px 0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-soft{background:var(--zg9-soft);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-kicker{display:block;color:var(--zg9-accent);font-size:11px;font-weight:800;line-height:1.4;letter-spacing:.11em;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-heading>p{max-width:62ch!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro{padding-top:72px;padding-bottom:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro-top{display:grid;grid-template-columns:1.18fr 1fr;gap:96px;align-items:end;margin-bottom:44px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro-copy p:last-child{margin-bottom:24px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-card{display:block;text-decoration:none;min-width:0;padding-bottom:28px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-image{position:relative;overflow:hidden;border-radius:10px;background:#faf9f7;aspect-ratio:1;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-image img{width:100%;height:100%;object-fit:contain;transition:transform .25s ease;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-card:hover img{transform:scale(1.035);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-index{position:absolute;left:16px;top:16px;z-index:1;font-size:11px;font-weight:600;color:#625950;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-card-arrow{position:absolute;right:16px;bottom:16px;background:#fff;border-radius:50%;display:grid;place-items:center;width:36px;height:36px;font-size:20px;color:var(--zg9-accent);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-card h3{margin:20px 0 6px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-card p{font-size:14px!important;margin:0 0 12px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-time{display:block;font-size:12px;font-weight:600;color:var(--zg9-accent);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:32px 0 40px;border-top:1px solid var(--zg9-line);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition>div{display:flex;flex-direction:column;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition span{font-size:10px;letter-spacing:.12em;font-weight:700;color:#777;margin-bottom:6px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition strong{font-size:15px;font-weight:650;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition small{font-size:12px;color:#777;margin-top:4px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-editorial{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-photo{align-self:stretch;min-width:0;background:#eee6e1;border-radius:12px;overflow:hidden;position:relative;display:flex;flex-direction:column;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-photo>img{width:100%;height:100%;min-height:480px;flex:1;object-fit:cover;object-position:40% 50%;}
html.page-product .product-html-zeitgard-pro-v9 #zg9-cleanse-photo>img{object-position:36% 50%;}
html.page-product .product-html-zeitgard-pro-v9 #zg9-face-photo>img,html.page-product .product-html-zeitgard-pro-v9 #zg9-peel-photo>img{object-position:50% 50%;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-photo figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;padding:12px 20px;font-size:11px;color:#777;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-zoom{display:inline-flex;gap:14px;align-items:center;min-height:36px;font-size:12px;font-weight:600;text-decoration:none;color:var(--zg9-accent);white-space:nowrap;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-zoom:hover{text-decoration:underline;text-underline-offset:4px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-spec{display:flex;flex-direction:column;gap:6px;padding:18px 0;margin:0 0 20px;border-top:1px solid var(--zg9-line);border-bottom:1px solid var(--zg9-line);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-spec span{font-size:10px;font-weight:750;color:var(--zg9-accent);letter-spacing:.1em;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-spec strong{font-size:14px;font-weight:600;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-steps{padding:0;margin:28px 0 24px;list-style:none;display:grid;gap:18px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-steps li>span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid #cbd8d6;color:var(--zg9-accent);border-radius:50%;font-size:10px;font-weight:650;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-steps h4{font-size:14px!important;margin:0 0 3px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-steps p{font-size:14px!important;line-height:1.55!important;margin:0!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-zones{display:grid;grid-template-columns:repeat(3,1fr);padding:20px 0;border-top:1px solid var(--zg9-line);border-bottom:1px solid var(--zg9-line);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-zones>div{display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--zg9-line);padding:0 12px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-zones>div:first-child{padding-left:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-zones>div:last-child{border-right:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-zones span{font-size:11px;color:var(--zg9-muted);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-zones strong{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-zones small{font-size:12px;font-weight:400;letter-spacing:normal;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-note{font-size:12px;line-height:1.6;color:var(--zg9-muted);margin-top:20px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-note strong{color:var(--zg9-ink);font-weight:650;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-peel-rule{display:grid;grid-template-columns:repeat(3,1fr);padding:24px;background:#eef4f3;border-radius:10px;gap:16px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-peel-rule>div{display:flex;flex-direction:column;gap:8px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-peel-rule strong{font-size:34px;line-height:1.1;letter-spacing:-.03em;font-weight:600;color:var(--zg9-accent);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-peel-rule small{font-size:12px;letter-spacing:normal;font-weight:500;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-peel-rule span{font-size:11px;color:#5c6c68;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula{display:grid;grid-template-columns:1fr 1.2fr;gap:72px;border-top:1px solid var(--zg9-line);padding-top:56px;margin-top:64px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula h2{font-size:30px!important;line-height:1.12!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula-flow span{display:block;font-size:11px;color:var(--zg9-accent);font-weight:700;padding-top:16px;border-top:1px solid #b9c9c6;margin-bottom:12px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula-flow strong{font-size:13px;line-height:1.45;display:block;min-height:38px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula-flow p{font-size:12px!important;line-height:1.6!important;margin:8px 0 0!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-heading{display:flex;justify-content:space-between;gap:48px;align-items:center;margin-bottom:36px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-tag{display:flex;align-items:center;gap:20px;flex:none;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-tag strong{font-size:84px;font-weight:500;line-height:1;color:var(--zg9-accent);letter-spacing:-.05em;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-tag span{font-size:13px;line-height:1.5;color:var(--zg9-muted);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-layout{display:grid;grid-template-columns:1.32fr 1fr;gap:64px;align-items:center;}
html.page-product .product-html-zeitgard-pro-v9 #zg9-body-photo>img{min-height:420px;object-position:45% 50%;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-directions{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:36px 0 20px;padding-top:24px;border-top:1px solid var(--zg9-line);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-directions span{font-size:10px;font-weight:750;letter-spacing:.08em;color:var(--zg9-accent);display:block;margin-bottom:12px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-directions h4{font-size:14px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-directions p{font-size:13px!important;margin:8px 0 0!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-trio{width:100%;margin:36px 0 40px;border-radius:12px;overflow:hidden;background:#f1ebe2;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-trio img{width:100%;max-height:530px;object-fit:cover;object-position:50% 58%;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-cosmetics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e4e2db;min-width:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product-picture{height:300px;display:flex;justify-content:center;align-items:center;padding:24px 16px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-pack{position:relative;overflow:hidden;height:100%;flex:none;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-pack-cleansing{aspect-ratio:435/535;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-pack-toner{aspect-ratio:340/530;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-pack-body{aspect-ratio:500/560;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-pack img{position:absolute;height:auto!important;max-width:none!important;top:-3.74%;left:-80.46%;width:263.91%!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-pack-toner img{top:-3.77%;left:-126.47%;width:339.41%!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-pack-body img{top:-3.57%;left:-64%;width:225.6%!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product-copy{padding:4px 26px 26px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product .sc-zg9-kicker{font-size:10px;letter-spacing:.06em;color:#777;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product h3{font-size:22px!important;margin:10px 0 12px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product p{font-size:14px!important;line-height:1.7!important;margin:0 0 20px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-pairing{font-size:11px;font-weight:600;color:var(--zg9-accent);display:block;margin-bottom:20px;padding:10px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product-detail h4{font-size:11px!important;font-weight:700!important;letter-spacing:.04em!important;margin:24px 0 8px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product-tag{padding-top:16px;border-top:1px solid #eee;font-size:10px;font-weight:600;color:var(--zg9-accent);line-height:1.5;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-small{font-size:12px!important;line-height:1.7!important;margin:20px 0 0!important;color:#6c6c67!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-tabs{display:flex;gap:8px;padding:6px;background:#f1f2ef;border-radius:99px;width:fit-content;margin:32px 0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-tab{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:99px;font-size:14px;font-weight:600;text-decoration:none;color:#555;transition:background .2s,color .2s;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-tab[aria-selected="true"]{background:#fff;box-shadow:0 3px 14px #00000008;color:var(--zg9-accent);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-panel{display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:center;border:1px solid var(--zg9-line);border-radius:12px;padding:24px 36px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-panel+.sc-zg9-routine-panel{margin-top:16px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-panel[hidden]{display:none!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-art img{border-radius:10px;width:100%;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-panel h3{margin-top:0!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-chain{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;margin:24px 0;padding:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-chain li{display:flex;flex-direction:column;gap:6px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-chain span{font-size:10px;font-weight:700;color:var(--zg9-accent);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-chain strong{font-size:14px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-chain small{font-size:12px;color:var(--zg9-muted);line-height:1.5;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-panel p{font-size:13px!important;margin:0!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-extra{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-extra>div{border-left:2px solid #b9c9c6;padding-left:20px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-extra span{font-size:10px;font-weight:750;letter-spacing:.07em;color:var(--zg9-accent);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-extra p{font-size:14px!important;margin:8px 0 0!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results{background:#edf3f2;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:40px 0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results-grid article{border-top:1px solid #b7cbc7;padding-top:20px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results-grid article>span{display:block;font-size:10px;font-weight:650;color:#48665f;min-height:40px;line-height:1.5;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results-grid article>strong{display:block;font-size:clamp(36px,3.3vw,52px);font-weight:650;line-height:1.1;letter-spacing:-.045em;color:var(--zg9-accent);margin:8px 0 18px;font-variant-numeric:tabular-nums;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results-grid h3{font-size:16px!important;line-height:1.5!important;min-height:72px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results-grid p{font-size:12px!important;margin:0!important;line-height:1.65!important;color:#536862!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-study{border-top:1px solid #b7cbc7;border-bottom:1px solid #b7cbc7;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-study summary,html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-faq summary{list-style:none;cursor:pointer;font-size:14px;font-weight:650;line-height:1.5;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:20px 0;}
html.page-product .product-html-zeitgard-pro-v9 summary::-webkit-details-marker{display:none;}
html.page-product .product-html-zeitgard-pro-v9 summary::after{content:'+';flex:none;font-size:22px;font-weight:400;color:var(--zg9-accent);}
html.page-product .product-html-zeitgard-pro-v9 details[open]>summary::after{content:'−';}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-study-content{padding-bottom:32px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-study-content p{font-size:14px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-study-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;margin:32px 0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-study-columns h4{color:var(--zg9-accent)!important;margin-bottom:12px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-lab{border-top:1px solid #b7cbc7;padding-top:24px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-lab h4{margin-bottom:12px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-video-grid .product-html-video{margin:0 0 24px!important;border-radius:12px;overflow:hidden;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-video-grid p{font-size:14px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:104px;}
html.page-product .product-html-zeitgard-pro-v9 #zg9-questions{background:#fff;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-faq-layout>div>img{width:300px;margin:32px auto 0;border-radius:10px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-faq{border-bottom:1px solid var(--zg9-line);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-faq:first-child{border-top:1px solid var(--zg9-line);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-faq p{font-size:14px!important;padding-right:26px;margin-bottom:24px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-close{padding-top:64px;padding-bottom:32px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-close .sc-zg9-shell{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:center;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-close h2{font-size:34px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 28px;border-radius:99px;background:var(--zg9-accent);color:#fff;text-decoration:none;font-size:15px;font-weight:600;min-height:60px;transition:background .2s;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-cta:hover{background:var(--crystal,#078a93);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-cta>span{font-size:22px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-disclosure{max-width:1184px!important;width:calc(100% - 80px);margin:40px auto 0!important;padding-top:20px;border-top:1px solid var(--zg9-line);font-size:11px!important;color:#777!important;}
.sc-zg9-dialog{width:min(920px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:12px;background:#fff;overflow:auto;box-shadow:0 24px 100px #0005;}
.sc-zg9-dialog::backdrop{background:#171a19cc;}
.sc-zg9-dialog-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 24px;position:sticky;top:0;background:#fff;border-bottom:1px solid #ddd;z-index:1;font:500 14px var(--font-body);}
.sc-zg9-dialog-close{border:1px solid #ccc;border-radius:99px;padding:10px 20px;min-height:44px;background:#fff;font:600 13px var(--font-body);cursor:pointer;}
.sc-zg9-dialog-close:focus-visible{outline:3px solid var(--crystal);outline-offset:3px;}
.sc-zg9-dialog>img{display:block;width:100%;max-height:calc(100dvh - 112px);object-fit:contain;}
@media(min-width:601px) and (max-width:1023px){html.page-product .product-html-zeitgard-pro-v9{--landing-heading-size:36px;}html.page-product .product-html-zeitgard-pro-v9 h2{line-height:1.08!important;}}
@media(max-width:1023px){
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-shell{width:calc(100% - 48px);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-section{padding:64px 0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro{padding-bottom:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro-top{gap:40px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-editorial{gap:36px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-photo>img{min-height:540px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-photo figcaption>span{display:none;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-photo figcaption{justify-content:flex-end;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula{gap:32px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-layout{gap:32px;grid-template-columns:1fr 1fr;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-directions{grid-template-columns:1fr 1fr;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product-copy{padding:4px 20px 24px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product-picture{height:260px;padding:24px 12px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-cosmetics-grid{gap:16px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-panel{gap:24px;grid-template-columns:140px 1fr;padding:24px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results-grid{gap:20px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-faq-layout{gap:48px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-close .sc-zg9-shell{gap:40px;}
}
@media(max-width:760px){
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro-top,html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-editorial,html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula,html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-layout,html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-faq-layout,html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-close .sc-zg9-shell{grid-template-columns:1fr;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-grid{grid-template-columns:1fr 1fr;gap:28px 16px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-card{padding-bottom:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition{margin-top:32px;gap:20px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-photo{order:-1;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-photo>img{height:auto;min-height:0;max-height:540px;aspect-ratio:4/5;flex:none;object-position:center;}
html.page-product .product-html-zeitgard-pro-v9 #zg9-cleanse-photo>img{aspect-ratio:1;object-position:36% 50%;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-editorial{gap:32px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-tag{display:none;}
html.page-product .product-html-zeitgard-pro-v9 #zg9-body-photo>img{height:auto;min-height:0;aspect-ratio:1;object-position:40% 50%;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-heading{margin-bottom:28px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-cosmetics-grid,html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-video-grid{grid-template-columns:1fr;gap:24px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product{display:grid;grid-template-columns:150px 1fr;align-items:start;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product-picture{height:260px;margin-top:24px;padding:24px 16px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product-copy{padding:28px 24px 28px 0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-trio img{max-height:none;object-fit:contain;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results-grid{grid-template-columns:1fr 1fr;gap:32px 24px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-faq-layout>div>img{display:none;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-panel{grid-template-columns:120px 1fr;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-chain{grid-template-columns:1fr;gap:16px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-chain li{padding-left:26px;position:relative;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-chain span{position:absolute;left:0;top:2px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-close{padding-bottom:28px;}
}
@media(max-width:600px){
html.page-product .product-html-zeitgard-pro-v9{--landing-heading-size:30px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-shell{width:calc(100% - 40px);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-section{padding:48px 0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro{padding-top:40px;padding-bottom:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro-top{gap:0;margin-bottom:24px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-card h3{font-size:17px!important;margin-top:14px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-card p{font-size:12px!important;line-height:1.55!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-head-time{font-size:10px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-index{left:12px;top:12px;font-size:10px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-card-arrow{width:28px;height:28px;font-size:17px;right:10px;bottom:10px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition{grid-template-columns:1fr;gap:16px;padding:24px 0 28px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition>div{display:grid;grid-template-columns:86px 1fr;gap:3px 12px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition span{grid-row:1/3;margin:3px 0 0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition strong{font-size:12px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition small{font-size:10px;margin:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-steps h4{font-size:15px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-steps p{font-size:15px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-zones strong{font-size:28px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-zones span{font-size:10px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-peel-rule{padding:20px 16px;gap:12px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-peel-rule strong{font-size:28px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula{gap:0;margin-top:40px;padding-top:36px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula h2{font-size:26px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula-flow{grid-template-columns:1fr;gap:20px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula-flow>div{display:grid;grid-template-columns:28px 1fr;gap:4px 12px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula-flow span{border:0;padding:0;grid-row:1/3;margin:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula-flow strong{min-height:0;font-size:14px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-formula-flow p{font-size:13px!important;margin:0!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-directions{gap:24px 20px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-directions h4{font-size:13px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product{display:block;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product-picture{height:300px;padding:28px 20px;margin:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product-copy{padding:0 24px 28px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-product p{font-size:16px!important;line-height:1.6!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-tabs{width:100%;border-radius:12px;gap:4px;padding:4px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-tab{width:50%;padding:10px 12px;font-size:12px;line-height:1.5;text-align:center;border-radius:9px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-panel{grid-template-columns:1fr;padding:24px;gap:20px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-art img{width:150px;margin:0 auto;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-panel p{font-size:14px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-extra{grid-template-columns:1fr;gap:24px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results-grid{gap:28px 20px;margin:32px 0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results-grid article>span{min-height:48px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-results-grid h3{font-size:14px!important;min-height:84px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-study-columns{grid-template-columns:1fr;gap:16px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-study-content p{font-size:15px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-faq p{font-size:15px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-close h2{font-size:30px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-close .sc-zg9-shell{gap:12px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-disclosure{width:calc(100% - 40px);font-size:11px!important;}
.sc-zg9-dialog-bar{padding:12px 16px;font-size:12px;gap:16px;}
.sc-zg9-dialog-close{padding:10px 14px;}
}
@media(prefers-reduced-motion:reduce){html.page-product .product-html-zeitgard-pro-v9 *{transition:none!important;animation:none!important;}}
/* ZEITGARD uses the same centered type scale as the shake description. */
html.page-product .product-html-zeitgard-pro-v9{text-align:center;}
html.page-product .product-html-zeitgard-pro-v9 :is(h2,h3,h4,p,summary,figcaption,li){text-align:center!important;}
html.page-product .product-html-zeitgard-pro-v9 h2{font-size:var(--landing-heading-size)!important;font-weight:var(--landing-heading-weight)!important;line-height:var(--landing-heading-line-height)!important;letter-spacing:var(--landing-heading-tracking)!important;text-wrap:balance;margin:0 auto 14px!important;}
html.page-product .product-html-zeitgard-pro-v9 :is(h3,h4){font-weight:700!important;}
html.page-product .product-html-zeitgard-pro-v9 p{font-size:16px!important;line-height:1.6!important;}
html.page-product .product-html-zeitgard-pro-v9 p strong{font-weight:700;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-heading{margin:0 auto 32px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-heading>p{max-width:600px!important;margin:0 auto!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-kicker{margin:0 auto 14px;text-align:center;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-section{padding-block:clamp(48px,5vw,72px);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro{padding-bottom:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro-top{display:block;max-width:800px;margin:0 auto 40px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro-copy{max-width:600px;margin:auto;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro-copy p:last-child{margin-bottom:0!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:48px 0 56px;align-items:start;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate{min-width:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate figure{display:flex;align-items:center;justify-content:center;height:220px;margin-bottom:28px;background:#fff;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate img{width:auto;height:auto;max-width:100%;max-height:200px;object-fit:contain;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate h3{min-height:50px;margin-bottom:16px!important;font-size:20px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate p{margin-bottom:16px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate p strong{font-size:inherit;font-weight:700;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-heading{flex-direction:column;gap:16px;align-items:center;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-tag{justify-content:center;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-routine-tabs{margin-left:auto;margin-right:auto;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-photo figcaption{justify-content:center;flex-wrap:wrap;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-close .sc-zg9-shell{grid-template-columns:1fr;justify-items:center;gap:16px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-disclosure{margin-inline:auto!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-faq summary{padding-left:44px;padding-right:44px;}
@media(min-width:601px) and (max-width:1023px){
html.page-product .product-html-zeitgard-pro-v9 h2{font-size:36px!important;line-height:1.08!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition{gap:24px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate figure{height:180px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate img{max-height:160px;}
}
@media(max-width:600px){
html.page-product .product-html-zeitgard-pro-v9 h2{font-size:30px!important;line-height:1.06!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-section{padding-block:48px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-intro{padding-bottom:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-recognition{display:grid;grid-template-columns:1fr;gap:36px;padding:36px 0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate{display:block;max-width:440px;margin:auto;padding-bottom:24px;border-bottom:1px solid var(--zg9-line);}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate:last-child{border-bottom:0;padding-bottom:0;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate figure{height:180px;margin-bottom:24px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate img{max-width:290px;max-height:170px;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-certificate h3{min-height:0;}
}
/* Local alignment within the centered ZEITGARD section system. */
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-copy{grid-column:1;grid-row:1;}
html.page-product .product-html-zeitgard-pro-v9 #zg9-body-photo{grid-column:2;grid-row:1;}
@media(max-width:767px){
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-copy{grid-column:1;grid-row:1;}
html.page-product .product-html-zeitgard-pro-v9 #zg9-body-photo{grid-column:1;grid-row:2;}
}
html.page-product .product-html-zeitgard-pro-v9 #zg9-awards .sc-zg9-recognition{padding:0;border-top:0;}
html.page-product .product-html-zeitgard-pro-v9 :is(#zg9-cleanse,#zg9-peel,#zg9-face,#zg9-body,.sc-zg9-product-copy,.sc-zg9-faq>div){text-align:left;}
html.page-product .product-html-zeitgard-pro-v9 :is(#zg9-cleanse,#zg9-peel,#zg9-face,#zg9-body,.sc-zg9-product-copy,.sc-zg9-faq>div) :is(h2,h3,h4,p,li,.sc-zg9-kicker){text-align:left!important;}
html.page-product .product-html-zeitgard-pro-v9 :is(#zg9-cleanse,#zg9-peel,#zg9-face,#zg9-body) .sc-zg9-heading{margin-left:0;margin-right:0;}
html.page-product .product-html-zeitgard-pro-v9 :is(#zg9-cleanse,#zg9-peel,#zg9-face,#zg9-body) .sc-zg9-heading>p{margin-left:0!important;margin-right:0!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-layout{grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
/* Reuse the actual shake final component, preserving its type and colors. */
html.page-product .product-html-zeitgard-pro-v9 .sc-final h2{color:#fff!important;font-size:clamp(36px,3.7vw,54px)!important;font-weight:650!important;letter-spacing:-.035em!important;line-height:1.02!important;text-align:left!important;margin:0 0 18px!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-final-copy>p{color:#d3e5e5!important;font-size:clamp(15px,1.35vw,18px)!important;line-height:1.65!important;text-align:left!important;margin:0!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-final-offer-price{color:#0b3439!important;font-size:clamp(28px,3vw,40px)!important;font-weight:800!important;letter-spacing:-.035em!important;line-height:1.15!important;margin:22px 0 8px!important;text-align:center!important;}
@media(min-width:601px) and (max-width:1023px){html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-layout{gap:32px;}}
@media(max-width:767px){html.page-product .product-html-zeitgard-pro-v9 .sc-zg9-body-layout{grid-template-columns:1fr;gap:32px;}}
@media(max-width:600px){
html.page-product .product-html-zeitgard-pro-v9 .sc-final h2{font-size:32px!important;line-height:1.04!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-final-copy>p{font-size:15px!important;line-height:1.55!important;}
html.page-product .product-html-zeitgard-pro-v9 .sc-final-offer-price{font-size:30px!important;margin-top:18px!important;}
}