
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#fff;font-family:Tahoma,Arial,sans-serif;overflow-x:hidden}
button,select{font:inherit}.site-header{height:82px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 26px;background:#fff;color:#222;position:sticky;top:0;z-index:30;border-bottom:1px solid #ececec}
.site-logo img{width:225px;display:block}.cart{border:0;background:transparent;font-size:24px;position:relative}.cart span{position:absolute;top:-5px;right:-8px;width:18px;height:18px;border-radius:50%;background:#176047;color:#fff;font-size:10px;display:grid;place-items:center}
.menu{display:none;border:0;background:transparent;width:42px}.menu i{display:block;height:2px;background:#222;margin:6px 0}nav{display:flex;justify-content:center;gap:28px}nav a{color:#222;text-decoration:none}
.hero{min-height:720px;display:grid;grid-template-columns:46% 54%;gap:30px;align-items:center;padding:64px 7vw;background:radial-gradient(circle at 78% 35%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 30%),linear-gradient(125deg,var(--bg),var(--panel));border-bottom:1px solid rgba(255,255,255,.08)}
.eyebrow{color:var(--gold);font-size:21px}.hero h1{font-family:Georgia,serif;font-size:clamp(68px,9vw,135px);line-height:.9;margin:10px 0;color:var(--cream);letter-spacing:.04em}.hero blockquote{margin:26px 0;font-size:27px;color:var(--gold)}.intro{line-height:2.1;color:#d7d7d3;font-size:17px;max-width:620px}
.blend{display:flex;gap:26px;margin-top:25px;flex-wrap:wrap}.blend article{border-right:1px solid rgba(255,255,255,.14);padding-right:17px;min-width:145px}.blend strong{display:block;font-size:34px;color:var(--gold)}.blend span,.blend small{display:block}.blend small{color:#bfc2c4;margin-top:5px}
.roast{margin-top:24px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.roast b{border:1px solid var(--gold);padding:8px 13px;border-radius:8px;color:var(--gold)}
.product-stage{min-height:560px;display:grid;place-items:center;perspective:1000px;position:relative}.product-stage:before{content:"";position:absolute;width:480px;height:500px;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 28%,transparent),transparent 70%);filter:blur(22px)}.product-stage img{width:min(500px,82%);border-radius:24px;box-shadow:0 35px 70px rgba(0,0,0,.58);z-index:1;transition:.2s}
.section{padding:82px 7vw;border-bottom:1px solid rgba(255,255,255,.08)}.section-title{text-align:center;margin-bottom:38px}.section-title span{color:var(--gold)}.section-title h2{font-size:36px;margin:9px 0}
.fit-grid,.cards,.faq-grid,.features{display:grid;gap:16px}.fit-grid{grid-template-columns:repeat(4,1fr)}.fit-grid article,.card,.faq,.features article{border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 34%,transparent),rgba(0,0,0,.28));border-radius:18px;padding:22px}
.cards{grid-template-columns:repeat(3,1fr)}.card b{color:var(--gold)}.card strong{display:block;font-size:22px;margin:12px 0}.card p,.faq p,.features span{color:#c6c9cb;line-height:1.8}
.meters{max-width:920px;margin:auto;display:grid;gap:22px}.meter{display:grid;grid-template-columns:90px 1fr 55px;gap:16px;align-items:center}.meter i{height:10px;background:rgba(255,255,255,.1);border-radius:20px;overflow:hidden}.meter b{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));transition:1.1s}.meter span{color:var(--gold)}
.story{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;background:#eee9df;color:#222}.story img{width:100%;border-radius:24px;box-shadow:0 22px 50px rgba(0,0,0,.2)}.story p{line-height:2.2;color:#5a6265}.story h2{font-size:40px}.story span{color:#7a5a24}
.brew-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.brew-grid span{text-align:center;padding:18px 10px;border:1px solid rgba(255,255,255,.13);border-radius:11px}
.purchase{display:grid;grid-template-columns:.95fr 1.05fr;gap:45px}.buy-box{border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:28px;background:rgba(0,0,0,.22)}.price{font-size:32px;color:var(--gold);margin-bottom:20px}.price small{font-size:15px}.weights,.product-type{display:grid;gap:8px}.weights{grid-template-columns:repeat(3,1fr)}.product-type{grid-template-columns:1fr 1fr;margin-top:8px}.weights button,.product-type button{border:1px solid rgba(255,255,255,.15);background:transparent;color:#fff;padding:12px;border-radius:8px}.weights button.active,.product-type button.active{background:var(--gold);color:#222}.label{display:block;margin-top:20px;margin-bottom:8px}.grind-panel{display:none;margin-top:15px}.grind-panel.show{display:block}.grind-panel select{width:100%;padding:13px;border-radius:8px;background:#151719;color:#fff;border:1px solid rgba(255,255,255,.18)}.grind-panel small{display:block;color:#bfc2c4;margin-top:8px;line-height:1.7}
.cart-row{display:flex;gap:10px;margin-top:18px}.qty{display:flex;border:1px solid rgba(255,255,255,.15);border-radius:8px;overflow:hidden}.qty button,.qty strong{width:42px;border:0;background:#151719;color:#fff;display:grid;place-items:center}.add{flex:1;border:0;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--gold));font-weight:bold;color:#1c1c1c}
.features{grid-template-columns:1fr 1fr}.features b{display:block;color:var(--gold);margin-bottom:7px}
.faq-grid{grid-template-columns:1fr 1fr}.faq h3{font-size:18px;margin-top:0}.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.related a{display:block;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:15px;padding:18px;background:rgba(255,255,255,.03)}
footer{padding:32px 7vw;background:#050607;color:#aaa;text-align:center}.reveal{opacity:0;transform:translateY(24px);transition:.75s}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.site-header{grid-template-columns:1fr auto 1fr;height:74px;padding:0 17px}.site-logo{grid-column:2}.site-logo img{width:180px}.cart{grid-column:1;justify-self:start}.menu{display:block;grid-column:3;justify-self:end}nav{position:absolute;top:74px;right:0;left:0;display:none;flex-direction:column;background:#fff;padding:12px}nav.open{display:flex}.hero{grid-template-columns:1fr;padding:48px 20px}.hero-copy{text-align:center}.blend,.roast{justify-content:center}.fit-grid{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr 1fr}.story{grid-template-columns:1fr}.brew-grid{grid-template-columns:repeat(3,1fr)}.purchase{grid-template-columns:1fr}.related{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.hero h1{font-size:56px}.hero blockquote{font-size:20px}.product-stage{min-height:390px}.product-stage img{width:92%}.section{padding:60px 18px}.fit-grid,.cards,.faq-grid,.features,.related{grid-template-columns:1fr}.brew-grid{grid-template-columns:1fr 1fr}.cart-row{flex-direction:column}.add{min-height:50px}.meter{grid-template-columns:72px 1fr 45px}}


/* =========================================================
   Build 009 — Premium Minimal Contrast Fix
   Applies to all 8 Coffee Blend product pages
   ========================================================= */

body{
  background:#f3f0e9;
  color:#211d19;
}

/* Keep the hero expressive/dark while the content area is light and legible */
.hero{
  color:#fff;
  border-bottom:1px solid rgba(0,0,0,.10);
}
.hero .intro{color:#f0ebe3}
.hero .blend small{color:#e5ddd2}
.hero .blend article{border-right-color:rgba(255,255,255,.30)}

/* Compact, clearly readable content sections */
.section{
  padding:54px 7vw;
  background:#f3f0e9;
  color:#211d19;
  border-bottom:1px solid #c9c0b5;
}
.section:nth-of-type(even){
  background:#faf8f4;
}
.section-title{
  margin-bottom:26px;
}
.section-title span{
  color:#8a622d;
  font-weight:700;
}
.section-title h2{
  color:#211d19;
  font-size:clamp(30px,4vw,42px);
  line-height:1.35;
}

/* Recommendation cards: active-looking, not disabled */
.fit-grid{
  gap:12px;
}
.fit-grid article{
  min-height:92px;
  display:flex;
  align-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 54%,#70685f);
  background:color-mix(in srgb,var(--accent) 13%,#fff);
  color:#211d19;
  box-shadow:0 8px 24px rgba(42,33,24,.06);
  font-weight:700;
}

/* Product profile cards */
.cards{
  gap:12px;
}
.card{
  background:#fff;
  border:1px solid #bfb4a7;
  color:#211d19;
  box-shadow:0 8px 24px rgba(42,33,24,.055);
}
.card b{
  color:#815b27;
  font-weight:800;
}
.card strong{
  color:#211d19;
}
.card p{
  color:#625b54;
}

/* Coffee DNA */
.meter{
  color:#211d19;
}
.meter label{
  font-weight:700;
}
.meter i{
  background:#d7d0c6;
  border:1px solid #c3b9ac;
}
.meter span{
  color:#785425;
  font-weight:800;
}

/* Brewing / features / FAQ */
.brew-grid span,
.features article,
.faq{
  color:#211d19;
  background:#fff;
  border:1px solid #bfb4a7;
}
.features span,
.faq p{
  color:#625b54;
}

/* Purchase controls need visible active states */
.buy-box{
  background:#fff;
  color:#211d19;
  border:1px solid #b9aea1;
  box-shadow:0 12px 32px rgba(42,33,24,.07);
}
.price{color:#745021}
.weights button,
.product-type button,
.grind-options button{
  background:#fff;
  color:#211d19;
  border-color:#9f9385;
}
.weights button:hover,
.product-type button:hover,
.grind-options button:hover{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,#fff);
}
.weights button.active,
.product-type button.active,
.grind-options button.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* Story stays intentionally warm but with stronger copy contrast */
.story p{color:#48423d}
.story span{color:#76501f}

/* Mobile: substantially less vertical sprawl */
@media(max-width:720px){
  .section{padding:40px 18px}
  .section-title{margin-bottom:22px}
  .section-title h2{font-size:34px}
  .fit-grid{gap:10px}
  .fit-grid article{
    min-height:68px;
    padding:16px 18px;
    border-radius:14px;
  }
  .cards{gap:10px}
  .card{
    padding:17px;
    border-radius:14px;
  }
  .card strong{font-size:19px}
  .card p{font-size:13px}
}


/* Build 010 — Actual packaging palette / no mockup */
body{background:var(--cream);color:#211d19}
.hero{
  background:linear-gradient(145deg,var(--panel) 0%,color-mix(in srgb,var(--panel) 82%,#000) 100%);
}
.section{
  background:color-mix(in srgb,var(--cream) 88%,#fff);
  border-bottom-color:color-mix(in srgb,var(--accent) 24%,#b8afa5);
}
.section:nth-of-type(even){
  background:color-mix(in srgb,var(--cream) 68%,#fff);
}
.section-title span,.card b,.meter span,.story span,.price{color:var(--gold)}
.section-title h2,.card strong,.meter label{color:#211d19}
.fit-grid article{
  background:color-mix(in srgb,var(--accent) 10%,#fff);
  border-color:color-mix(in srgb,var(--accent) 48%,#aaa096);
  color:#211d19;
}
.card,.brew-grid span,.features article,.faq,.buy-box{
  background:color-mix(in srgb,var(--cream) 28%,#fff);
  border-color:color-mix(in srgb,var(--accent) 30%,#aaa096);
}
.meter i{background:color-mix(in srgb,var(--accent) 12%,#ddd)}
.meter i b{background:var(--accent)}
.weights button.active,.product-type button.active,.grind-options button.active,.add{
  background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important
}
.weights button,.product-type button,.grind-options button{
  background:#fff;color:#211d19;border-color:color-mix(in srgb,var(--accent) 50%,#91877c)
}
.story{
  background:color-mix(in srgb,var(--cream) 78%,#fff);
}
/* Only actual supplied package images are displayed; no generated packaging/mockup assets. */
.product-stage img,.story img{object-fit:contain}


/* Build 011 — Related Products readability fix */
.related .card,
.related article,
.related a,
.related-grid .card,
.related-grid article,
.related-grid a,
.recommendations .card,
.recommendations article,
.recommendations a{
  color:#211d19 !important;
}

.related .card strong,
.related .card b,
.related article strong,
.related article b,
.related a strong,
.related a b,
.related-grid strong,
.related-grid b,
.recommendations strong,
.recommendations b{
  color:#211d19 !important;
}

.related .card p,
.related .card span,
.related article p,
.related article span,
.related a p,
.related a span,
.related-grid p,
.related-grid span,
.recommendations p,
.recommendations span{
  color:#514a43 !important;
}

/* Existing project uses .related-list on blend pages */
.related-list article{
  color:#211d19 !important;
  background:color-mix(in srgb,var(--cream) 24%,#fff) !important;
  border-color:color-mix(in srgb,var(--accent) 32%,#9c9287) !important;
}
.related-list article b,
.related-list article strong{
  color:#211d19 !important;
}
.related-list article span,
.related-list article p,
.related-list article small{
  color:#514a43 !important;
}

/* General safeguard: light cards never inherit white hero text */
.section .card,
.section article{
  --card-text:#211d19;
}
.section .card:not(.dark-card),
.section article:not(.dark-card){
  color:var(--card-text);
}


/* =========================================================
   Build 012 — Product Pages Premium Minimal
   Compact architecture for all Coffee Blend product pages
   ========================================================= */

.product-page .hero,
body .hero{
  min-height:auto !important;
  padding-top:96px !important;
  padding-bottom:42px !important;
}

.hero .hero-inner,
.hero-inner{
  min-height:auto !important;
}

.section{
  padding-top:36px !important;
  padding-bottom:36px !important;
}

.section-title{
  margin-bottom:18px !important;
}

.section-title h2{
  margin-top:6px !important;
  margin-bottom:4px !important;
  font-size:clamp(26px,3.4vw,38px) !important;
}

.section-title p{
  margin:6px 0 0 !important;
  max-width:720px;
  line-height:1.8 !important;
}

.fit-grid,
.cards,
.brew-grid,
.features{
  gap:9px !important;
}

.fit-grid article{
  min-height:58px !important;
  padding:14px 16px !important;
  border-radius:12px !important;
}

.cards{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

.card{
  min-height:auto !important;
  padding:14px 15px !important;
  border-radius:12px !important;
}

.card b{
  font-size:11px !important;
}

.card strong{
  font-size:17px !important;
  margin-top:5px !important;
}

.card p{
  font-size:12px !important;
  line-height:1.7 !important;
  margin-top:5px !important;
}

/* Coffee DNA becomes a compact strip */
.dna,
.coffee-dna{
  padding-top:28px !important;
  padding-bottom:28px !important;
}

.meters,
.dna-grid{
  gap:8px !important;
}

.meter{
  padding:10px 0 !important;
}

/* Related products: compact horizontal list */
.related-list,
.related-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:9px !important;
}

.related-list article,
.related-grid article,
.related-list a,
.related-grid a{
  min-height:auto !important;
  padding:14px 16px !important;
  border-radius:12px !important;
}

.related-list article b,
.related-list article strong,
.related-grid b,
.related-grid strong{
  font-size:16px !important;
}

.related-list article span,
.related-list article p,
.related-grid span,
.related-grid p{
  font-size:11px !important;
  line-height:1.65 !important;
}

/* Brewing recommendations: smaller tiles */
.brew-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.brew-grid span,
.brew-grid article{
  min-height:92px !important;
  padding:14px !important;
  border-radius:12px !important;
}

/* FAQ and secondary details become collapsible-looking compact blocks */
.faq{
  padding:14px 16px !important;
  border-radius:12px !important;
  margin-bottom:8px !important;
}

/* Purchase block compact */
.buy-box{
  padding:20px !important;
  border-radius:14px !important;
}
.buy-box .price,
.price{
  margin:8px 0 12px !important;
}

/* Story should not occupy a full screen */
.story{
  min-height:auto !important;
  padding-top:34px !important;
  padding-bottom:34px !important;
}
.story p{
  max-width:760px !important;
  line-height:1.9 !important;
}

/* Product image stage: keep actual product image, no mockup generation */
.product-stage{
  min-height:auto !important;
}
.product-stage img{
  max-height:520px !important;
}

/* Remove unnecessary vertical emptiness created by fixed heights */
.section,
.card,
.fit-grid article,
.features article,
.brew-grid span,
.related-list article{
  height:auto !important;
}

/* Mobile compact system */
@media(max-width:720px){
  .hero{
    padding:82px 18px 30px !important;
  }
  .hero > *{
    min-width:0;
  }
  .product-stage::before{
    width:min(480px,100%);
    max-width:100%;
  }
  .hero h1{
    max-width:100%;
    font-size:clamp(48px,13.2vw,56px) !important;
    margin-bottom:10px !important;
  }
  .section{
    padding:28px 18px !important;
  }
  .section-title{
    margin-bottom:14px !important;
  }
  .section-title h2{
    font-size:29px !important;
  }
  .cards{
    grid-template-columns:1fr 1fr !important;
  }
  .card{
    padding:13px !important;
  }
  .fit-grid{
    grid-template-columns:1fr !important;
  }
  .fit-grid article{
    min-height:54px !important;
    padding:13px 15px !important;
  }
  .brew-grid{
    grid-template-columns:1fr 1fr !important;
  }
  .brew-grid span,
  .brew-grid article{
    min-height:78px !important;
    padding:12px !important;
  }
  .related-list,
  .related-grid{
    grid-template-columns:1fr !important;
  }
  .related-list article,
  .related-grid article{
    padding:13px 15px !important;
  }
  .story{
    padding:28px 18px !important;
  }
  .product-stage img{
    max-height:390px !important;
  }
}

/* Extra-small phone */
@media(max-width:420px){
  .cards{
    grid-template-columns:1fr 1fr !important;
  }
  .card strong{
    font-size:15px !important;
  }
  .section-title h2{
    font-size:27px !important;
  }
}

/* Build 020 */
body{background:#f5f1e9;color:#211d19}.cl-head{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px 5vw;background:#fffdf9eF;backdrop-filter:blur(12px);border-bottom:1px solid #d8cec0}.cl-logo{font:700 18px Georgia;color:#5c3b27;text-decoration:none}.cl-logo span{font-size:14px}.cart-pill{padding:8px 12px;border:1px solid #d8cec0;border-radius:999px;text-decoration:none;color:#211d19}.store-shell{width:min(1180px,92vw);margin:auto;padding:46px 0 80px}.store-intro,.category-head{max-width:720px;margin-bottom:30px}.store-intro h1,.category-head h1,.signature-hero h1{font-size:clamp(38px,6vw,72px);line-height:1.2;margin:5px 0}.kicker{font-size:10px;font-weight:900;letter-spacing:.13em;color:#8b653a}.store-gates{display:grid;grid-template-columns:1fr 1fr;gap:14px}.gate{min-height:260px;padding:28px;border:1px solid #d8cec0;border-radius:22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;justify-content:flex-end;transition:.2s}.gate:hover{transform:translateY(-3px)}.gate small{color:#9b6f3b}.gate h2{font-size:27px;margin:4px 0}.gate p{color:#6b625a}.gate.signature{background:#183f31;color:#fff}.gate.signature p{color:#dce9e2}.gate.coffee{background:#eee5d8}.gate.powder{background:#f0dfb7}.gate.equipment{background:#e4e8e5}.finder{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:24px;border-radius:18px;background:#203f37;color:#fff;margin:25px 0}.finder p{color:#d9e6e1}.finder button,.builder button{border:0;border-radius:999px;padding:11px 16px;font-weight:800;cursor:pointer}.finder-panel{padding:22px;border:1px solid #d8cec0;border-radius:18px;background:#fff;margin-bottom:20px}.quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quiz-grid label{display:grid;gap:5px}.quiz-grid select,.buy-row select{padding:9px;border:1px solid #d8cec0;border-radius:10px;background:#fff}.finder-results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.finder-results article{padding:15px;background:#f4efe7;border-radius:13px}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.product-card{background:#fff;border:1px solid #ddd2c4;border-radius:16px;overflow:hidden}.product-card img{width:100%;aspect-ratio:1/1;object-fit:cover}.product-card>div{padding:14px}.product-card h3{font-size:21px;margin:2px 0}.product-card p{margin:3px 0;color:#655c54;font-size:12px}.product-card .note{min-height:38px}.buy-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}.quick-add{border:0;border-radius:10px;background:#24443b;color:#fff;font-weight:800;cursor:pointer}.detail-link{display:block;margin-top:9px;font-size:11px;color:#6c4d34}.signature-hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:35px;padding:26px;background:#173f31;color:#fff;border-radius:24px}.signature-hero p{color:#dce8e2}.signature-hero figure{margin:0;border-radius:18px;overflow:hidden;background:#e9edc9}.signature-hero img{width:100%;display:block;max-height:470px;object-fit:cover;object-position:center}.rule-pills{display:flex;flex-wrap:wrap;gap:7px}.rule-pills span{font-size:10px;padding:6px 9px;border:1px solid #ffffff55;border-radius:999px}.builder{display:grid;gap:12px;margin-top:18px}.step{padding:24px;border:1px solid #d8cec0;border-radius:18px;background:#fff}.step>small{color:#a07039;font-weight:900}.step h2{margin:4px 0 14px}.component{display:grid;grid-template-columns:1fr 100px 38px;gap:7px;margin:7px 0}.component select,.component input{width:100%;padding:10px;border:1px solid #d8cec0;border-radius:10px;background:#fff}.remove{background:#eee!important}.outline{background:#f4efe8!important;border:1px solid #d8cec0!important}.percent-meter{display:flex;gap:10px;margin-top:12px;align-items:center}.percent-meter b{font-size:24px}.choice-row{display:flex;gap:8px;flex-wrap:wrap}.choice-row label,.tool-grid label{padding:10px 12px;border:1px solid #d8cec0;border-radius:12px;cursor:pointer}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.micro{font-size:11px;color:#6b625a}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.summary>div{padding:12px;border-radius:12px;background:#f5f1e9}.summary p{margin:3px 0;font-size:12px}.summary .price{font-size:18px;font-weight:900}.final-step button{background:#173f31;color:#fff}.final-step button:disabled{opacity:.35}.final-step button:not(:disabled){background:#173f31;color:#fff}
@media(max-width:850px){.product-grid{grid-template-columns:1fr 1fr}.signature-hero{grid-template-columns:1fr}.summary{grid-template-columns:1fr 1fr}.store-gates{grid-template-columns:1fr}.finder{grid-template-columns:1fr}.quiz-grid{grid-template-columns:1fr}}
@media(max-width:520px){.store-shell{padding-top:28px}.product-grid{grid-template-columns:1fr 1fr;gap:8px}.product-card>div{padding:10px}.buy-row{grid-template-columns:1fr}.signature-hero{padding:18px}.signature-hero h1{font-size:38px}.tool-grid,.summary,.finder-results{grid-template-columns:1fr}.component{grid-template-columns:1fr 78px 34px}}

/* Build 021 */
.builder .step:first-child{position:relative;overflow:hidden;background:linear-gradient(145deg,#fffdf8,#eee2d0);border:1px solid #b89566;box-shadow:0 20px 60px rgba(62,42,24,.10)}
.builder .step:first-child:before{content:"SIGNATURE FORMULA";position:absolute;left:22px;top:18px;font:700 10px Georgia;letter-spacing:.22em;color:#a98250}
.builder .step:first-child h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,4vw,44px);color:#3d291c;margin-top:15px}
.builder .step:first-child .component{padding:9px;border-radius:14px;background:#ffffffbd;border:1px solid #ddc9ad}
.ratio{font-size:18px!important;font-weight:900;color:#173f31}
.quick-modal{position:fixed;inset:0;z-index:100;background:#17130faa;display:grid;place-items:end center;padding:18px}.quick-modal[hidden]{display:none}.quick-sheet{width:min(720px,100%);max-height:88vh;overflow:auto;background:#fffdf9;border-radius:24px;padding:24px;position:relative}.modal-close{position:absolute;left:16px;top:14px;border:0;border-radius:50%;width:36px;height:36px;font-size:22px}.confirm-quick,.powder-quick-add,.smart-buy{border:0;border-radius:999px;background:#173f31;color:#fff;padding:11px 16px;font-weight:800;cursor:pointer}.powder-quick-add{margin:10px 14px 14px}

/* Build 021.1 — restrained Premium Signature Formula */
.builder .step:first-child{
 background:#fbf8f2;
 border:1px solid rgba(116,83,48,.28);
 box-shadow:0 14px 38px rgba(61,43,26,.065);
 padding:clamp(22px,4vw,38px);
}
.builder .step:first-child:before{
 content:"SIGNATURE FORMULA";
 left:28px;top:24px;
 color:#9a774d;
 letter-spacing:.18em;
 opacity:.72;
}
.builder .step:first-child h2{
 font-family:inherit;
 font-size:clamp(27px,3.6vw,39px);
 font-weight:800;
 color:#2e261f;
 margin:4px 0 6px;
}
.builder .step:first-child>p{
 color:#776b60;
 max-width:650px;
 margin-bottom:22px;
}
.formula-live{
 display:grid;
 grid-template-columns:minmax(190px,auto) 1fr;
 gap:18px;
 align-items:center;
 padding:13px 16px;
 margin:0 0 18px;
 background:#fff;
 border:1px solid #e6dccf;
 border-radius:14px;
}
.formula-live small{display:block;color:#9b7b54;font-size:10px;margin-bottom:3px}
.formula-live strong{font-size:14px;color:#3d342c}
.formula-line{
 direction:ltr;
 display:flex;
 height:5px;
 overflow:hidden;
 border-radius:999px;
 background:#eee8df;
}
.formula-line i{display:block;height:100%;transition:width .25s ease}
#arabicaLine{background:#b28a58}
#robustaLine{background:#4b3527}
.builder .step:first-child .component{
 display:grid;
 grid-template-columns:minmax(0,1fr) 92px 34px;
 gap:9px;
 align-items:center;
 padding:8px;
 margin:8px 0;
 background:#fff;
 border:1px solid #e7ddd1;
 border-radius:12px;
 box-shadow:none;
}
.builder .step:first-child .component select,
.builder .step:first-child .component input{
 border:0;
 background:#f7f3ed;
 border-radius:9px;
 min-height:43px;
 color:#312920;
 outline:none;
}
.builder .step:first-child .component select:focus,
.builder .step:first-child .component input:focus{
 box-shadow:0 0 0 1px #a98250 inset;
}
.builder .step:first-child .outline{
 margin-top:10px;
 background:transparent!important;
 border:1px dashed #bda98e!important;
 color:#5e4935;
}
.builder .step:first-child .percent-meter{
 justify-content:space-between;
 margin-top:18px;
 padding:13px 2px 0;
 border-top:1px solid #e3d7c7;
 color:#776b60;
}
.builder .step:first-child .percent-meter b{
 color:#5d4027;
 font-family:Georgia,serif;
 font-size:26px;
}
@media(max-width:600px){
 .formula-live{grid-template-columns:1fr;gap:8px}
 .builder .step:first-child{padding:20px 15px}
 .builder .step:first-child:before{position:static;display:block;margin-bottom:8px}
 .builder .step:first-child .component{grid-template-columns:minmax(0,1fr) 76px 32px}
}

/* Build 021.2 — Signature Formula UX Redesign */
.signature-formula-step{
  background:#fbf8f2!important;
  border:1px solid #d7c8b3!important;
  box-shadow:0 16px 42px rgba(64,45,27,.07)!important;
  padding:clamp(22px,4vw,36px)!important;
}
.signature-formula-step:before{
  content:"SIGNATURE FORMULA";
  display:block;
  margin-bottom:8px;
  color:#9b7448;
  font:700 10px Georgia,serif;
  letter-spacing:.18em;
}
.signature-formula-step h2{
  font-family:inherit!important;
  font-size:clamp(28px,4vw,40px)!important;
  color:#2f271f!important;
  margin:0 0 6px!important;
}
.signature-formula-step>p{
  margin:0 0 20px;
  color:#786d62;
  max-width:660px;
}
.signature-total{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  padding:12px 14px;
  margin-bottom:14px;
  background:#fff;
  border:1px solid #e2d7c9;
  border-radius:13px;
}
.signature-total small{display:block;font-size:10px;color:#9a7953;margin-bottom:2px}
.signature-total strong{font-size:14px;color:#3d342c}
.signature-total-line{
  direction:ltr;
  display:flex;
  height:5px;
  background:#eee8df;
  border-radius:999px;
  overflow:hidden;
}
.signature-total-line i{display:block;height:100%;transition:width .25s ease}
#arabicaLine{background:#b38a57}
#robustaLine{background:#4f3828}

.formula-stack{display:grid;gap:8px}
.formula-item{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto auto;
  gap:12px;
  align-items:center;
  min-height:76px;
  padding:11px 13px;
  background:#fff;
  border:1px solid #e4dacd;
  border-radius:13px;
}
.formula-item-index{
  font:700 12px Georgia,serif;
  color:#aa8455;
}
.formula-item-main{display:grid;gap:2px}
.formula-item-main strong{font-size:17px;color:#2d261f}
.formula-item-main span{font-size:11px;color:#7b7168}
.formula-item-control{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 7px;
  background:#f6f1ea;
  border-radius:999px;
}
.formula-item-control b{
  min-width:44px;
  text-align:center;
  font-size:15px;
  color:#3a3028;
}
.pct-btn{
  width:29px;
  height:29px;
  border:0!important;
  border-radius:50%!important;
  padding:0!important;
  background:#fff!important;
  color:#4b3d31!important;
  font-size:18px!important;
  line-height:1!important;
  box-shadow:0 0 0 1px #ded2c2 inset;
}
.formula-remove{
  border:0!important;
  background:transparent!important;
  color:#9a8675!important;
  padding:7px!important;
  font-size:10px!important;
}
.formula-actions{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid #e3d8ca;
}
.add-formula-item{
  border:1px dashed #b69b79!important;
  background:transparent!important;
  color:#5d4935!important;
  border-radius:999px!important;
}
.add-formula-item:disabled{opacity:.4}
.formula-status{
  display:flex;
  gap:10px;
  align-items:center;
  color:#756a60;
}
.formula-status b{
  font:700 24px Georgia,serif;
  color:#5c4028;
}
.formula-status span{font-size:12px}
.formula-status span.complete{color:#2d6a4f;font-weight:800}

.coffee-picker[hidden]{display:none}
.coffee-picker{
  position:fixed;
  inset:0;
  z-index:120;
}
.coffee-picker-backdrop{
  position:absolute;
  inset:0;
  background:rgba(21,17,13,.55);
}
.coffee-picker-sheet{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(760px,calc(100% - 24px));
  max-height:84vh;
  overflow:auto;
  background:#fffdf9;
  border-radius:22px;
  padding:24px;
  box-shadow:0 28px 90px rgba(0,0,0,.2);
}
.coffee-picker-close{
  position:absolute;
  left:16px;
  top:14px;
  width:36px;
  height:36px;
  border:0!important;
  border-radius:50%!important;
  background:#f0e8dd!important;
  font-size:22px!important;
  padding:0!important;
}
.coffee-tabs{
  display:flex;
  gap:7px;
  margin:16px 0 12px;
}
.coffee-tab{
  padding:8px 13px!important;
  border:1px solid #d7c9b7!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#4e4034!important;
}
.coffee-tab.active{
  background:#2c443c!important;
  color:#fff!important;
  border-color:#2c443c!important;
}
.coffee-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.coffee-option{
  display:flex!important;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  text-align:right;
  padding:13px 14px!important;
  border:1px solid #e3d8ca!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#2d261f!important;
}
.coffee-option div{display:grid;gap:2px}
.coffee-option strong{font-size:15px}
.coffee-option span{font-size:11px;color:#7b7168}
.coffee-option small{font-size:10px;color:#98764f;white-space:nowrap}
.coffee-empty{color:#7b7168;font-size:13px}
.modal-open{overflow:hidden}

@media(max-width:650px){
  .signature-total{grid-template-columns:1fr;gap:8px}
  .formula-item{
    grid-template-columns:34px minmax(0,1fr);
    grid-template-areas:
      "idx main"
      "control control"
      "remove remove";
    gap:8px;
  }
  .formula-item-index{grid-area:idx}
  .formula-item-main{grid-area:main}
  .formula-item-control{grid-area:control;justify-content:center}
  .formula-remove{grid-area:remove;justify-self:end}
  .formula-actions{align-items:flex-start;flex-direction:column}
  .coffee-options{grid-template-columns:1fr}
}

/* Build 021.3 execution fixes */
.formula-item-control .pct-btn:disabled{opacity:.35;cursor:not-allowed}
.coffee-option:active{transform:translateY(1px)}

/* Build 021.4 — intentional empty start */
.formula-empty{
  width:100%;
  min-height:125px;
  display:grid;
  place-items:center;
  gap:3px;
  border:1px dashed #bca789!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#5b4938!important;
  padding:20px!important;
}
.formula-empty span{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#f3ece2;
  font-size:20px;
}
.formula-empty strong{font-size:15px}
.formula-empty small{font-size:10px;color:#8a7d71}


/* =========================================================
   Build 033 — Real GLB Signature Object integrated in shop
   ========================================================= */
.signature-real3d{
  margin:18px 0 22px;
  padding:22px;
  border:1px solid #d8cec1;
  border-radius:24px;
  background:
    radial-gradient(circle at 63% 47%,rgba(159,108,66,.16),transparent 29%),
    linear-gradient(145deg,#12100e,#201710 66%,#0d0c0b);
  color:#fff;
  overflow:hidden;
  box-shadow:0 22px 60px rgba(45,29,17,.12);
}
.signature-real3d-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
  padding:4px 4px 14px;
  position:relative;
  z-index:6;
}
.signature-real3d-head h3{
  margin:4px 0;
  font-size:clamp(22px,3vw,34px);
  color:#fff;
}
.signature-real3d-head p{
  margin:0;
  max-width:600px;
  font-size:11px;
  color:#aaa098;
}
.signature-real3d-ratio{
  text-align:left;
  direction:rtl;
  flex:0 0 auto;
}
.signature-real3d-ratio small{
  display:block;
  font:800 8px Arial,sans-serif;
  letter-spacing:.17em;
  color:#a87a52;
}
.signature-real3d-ratio strong{
  display:block;
  margin-top:5px;
  font-size:11px;
  color:#e4d8cc;
}
.signature-real3d-stage{
  height:420px;
  position:relative;
  border-top:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(191,132,82,.17),transparent 28%),
    radial-gradient(circle at 50% 65%,rgba(255,255,255,.025),transparent 45%);
}
.signature-bean-model{
  position:absolute;
  inset:0;
  z-index:4;
  width:100%;
  height:100%;
  opacity:0;
  transform:scale(.94);
  transition:opacity .65s ease,transform .75s cubic-bezier(.2,.8,.2,1),filter .5s;
  --poster-color:transparent;
}
.signature-real3d-stage.has-selection .signature-bean-model{
  opacity:1;
  transform:scale(1);
}
.signature-real3d-stage:not(.has-selection) .signature-bean-model{
  pointer-events:none;
}
.signature-real3d-empty{
  position:absolute;
  z-index:8;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:opacity .45s,transform .55s;
}
.signature-real3d-empty span{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  margin-bottom:10px;
  border:1px solid #634a39;
  border-radius:50%;
  color:#c09268;
  font-size:25px;
}
.signature-real3d-empty strong{font-size:14px}
.signature-real3d-empty small{
  margin-top:5px;
  color:#80766e;
  font-size:9px;
}
.signature-real3d-stage.has-selection .signature-real3d-empty{
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-46%) scale(.96);
}
.signature-real3d-orbit{
  position:absolute;
  z-index:2;
  left:50%;top:50%;
  border-radius:50%;
  border:1px solid rgba(188,141,99,.12);
  pointer-events:none;
}
.signature-real3d-orbit.orbit-one{
  width:330px;height:330px;
  transform:translate(-50%,-50%) rotateX(70deg);
}
.signature-real3d-orbit.orbit-two{
  width:250px;height:250px;
  transform:translate(-50%,-50%) rotateX(72deg) rotateZ(34deg);
  border-color:rgba(255,255,255,.06);
}
.signature-real3d-controls{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  direction:rtl;
}
.signature-real3d-controls button{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(16,13,11,.78);
  color:#bfb4ab;
  border-radius:999px;
  padding:8px 11px;
  font-size:9px;
  cursor:pointer;
  backdrop-filter:blur(10px);
}
.signature-real3d-controls button.active{
  border-color:#976c49;
  color:#fff;
  background:#2a1d16;
}
.signature-real3d-hint{
  position:absolute;
  z-index:9;
  right:20px;
  bottom:28px;
  direction:ltr;
  color:#6e655e;
  font:800 7px Arial,sans-serif;
  letter-spacing:.15em;
}
.signature-real3d-complete{
  position:absolute;
  z-index:12;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:radial-gradient(circle,rgba(20,14,10,.64),rgba(7,6,5,.95));
  opacity:0;
  pointer-events:none;
  transition:opacity .55s;
}
.signature-real3d-complete.show{opacity:1}
.signature-real3d-complete small{
  color:#b4845d;
  font:800 8px Arial,sans-serif;
  letter-spacing:.2em;
}
.signature-real3d-complete strong{
  margin:8px 0;
  color:#fff;
  font-size:clamp(24px,4vw,42px);
}
.signature-real3d-complete span{
  font:700 32px Georgia,serif;
  color:#c29268;
}
@media(max-width:760px){
  .signature-real3d{padding:15px;border-radius:18px}
  .signature-real3d-head{align-items:flex-start;flex-direction:column}
  .signature-real3d-ratio{text-align:right}
  .signature-real3d-stage{height:380px}
  .signature-real3d-controls{bottom:18px;width:100%;justify-content:center}
  .signature-real3d-hint{display:none}
}

/* =========================================================
   Build 034 — 3D color / scale / layout correction
   ========================================================= */
.signature-real3d{
  margin:16px 0 20px!important;
  padding:18px!important;
}
.signature-real3d-head{
  padding:2px 2px 10px!important;
  align-items:flex-start!important;
}
.signature-real3d-head h3{
  font-size:clamp(20px,2.5vw,30px)!important;
}
.signature-real3d-head p{
  max-width:520px!important;
  line-height:1.9!important;
}
.signature-real3d-stage{
  height:340px!important;
  max-height:340px!important;
  background:
    radial-gradient(circle at 50% 46%,rgba(164,106,64,.13),transparent 25%),
    linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.08))!important;
}
.signature-bean-model{
  width:82%!important;
  height:82%!important;
  left:9%!important;
  top:7%!important;
  right:auto!important;
  bottom:auto!important;
  filter:saturate(.98) contrast(1.03) brightness(.92)!important;
}
.signature-real3d-orbit.orbit-one{
  width:250px!important;height:250px!important;
}
.signature-real3d-orbit.orbit-two{
  width:190px!important;height:190px!important;
}
.signature-real3d-controls{
  bottom:14px!important;
}
.signature-real3d-controls button{
  padding:7px 10px!important;
  font-size:8px!important;
}
.signature-real3d-hint{
  bottom:20px!important;
  right:16px!important;
}
.signature-real3d-ratio strong{
  font-size:10px!important;
}
@media(max-width:760px){
  .signature-real3d-stage{
    height:300px!important;
    max-height:300px!important;
  }
  .signature-bean-model{
    width:88%!important;
    height:88%!important;
    left:6%!important;
    top:4%!important;
  }
}

/* Build 035 — true PBR material conversion + composition correction */
.signature-real3d-stage{
  height:300px!important;
  max-height:300px!important;
}
.signature-bean-model{
  width:72%!important;
  height:72%!important;
  left:14%!important;
  top:10%!important;
  filter:none!important;
}
.signature-real3d-orbit.orbit-one{width:210px!important;height:210px!important}
.signature-real3d-orbit.orbit-two{width:160px!important;height:160px!important}
.signature-real3d-head{padding-bottom:8px!important}
@media(max-width:760px){
  .signature-real3d-stage{height:280px!important;max-height:280px!important}
  .signature-bean-model{
    width:78%!important;
    height:78%!important;
    left:11%!important;
    top:7%!important;
  }
}


/* =========================================================
   Build 036 — Multi-bean Blend Sculpture
   Each selected coffee adds one real 3D bean.
   Bean prominence reacts to percentage.
   ========================================================= */
.signature-bean-composition{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  perspective:1200px;
  transform-style:preserve-3d;
}
.signature-bean-composition .signature-bean-model{
  position:absolute!important;
  width:46%!important;
  height:68%!important;
  left:27%!important;
  top:13%!important;
  opacity:0;
  pointer-events:none;
  transform-origin:center center;
  transition:
    left .75s cubic-bezier(.2,.8,.2,1),
    top .75s cubic-bezier(.2,.8,.2,1),
    width .75s cubic-bezier(.2,.8,.2,1),
    height .75s cubic-bezier(.2,.8,.2,1),
    opacity .45s ease,
    filter .55s ease,
    transform .75s cubic-bezier(.2,.8,.2,1);
}
.signature-real3d-stage.has-selection .signature-bean-composition .signature-bean-model{
  opacity:1;
}
.signature-bean-composition .bean-slot{
  --bean-scale:1;
  --bean-depth:0;
  filter:brightness(calc(.88 + var(--bean-depth) * .06))
         saturate(1.02)
         drop-shadow(0 18px 18px rgba(0,0,0,.22));
  transform:
    translateZ(calc(var(--bean-depth) * 1px))
    scale(var(--bean-scale));
}
.signature-bean-composition .bean-slot.primary{
  z-index:8;
  filter:brightness(1.03) saturate(1.04) drop-shadow(0 20px 22px rgba(0,0,0,.25));
}
.signature-bean-composition .bean-slot.secondary{z-index:6}
.signature-bean-composition .bean-slot.tertiary{z-index:4}
.signature-bean-composition .bean-slot.quaternary{z-index:3}

/* One coffee: hero bean centered and restrained */
.signature-bean-composition.count-1 .slot-1{
  width:43%!important;
  height:64%!important;
  left:28.5%!important;
  top:15%!important;
}

/* Two coffees: split composition */
.signature-bean-composition.count-2 .slot-1{
  left:14%!important;
  top:15%!important;
  width:39%!important;
  height:61%!important;
}
.signature-bean-composition.count-2 .slot-2{
  left:47%!important;
  top:20%!important;
  width:37%!important;
  height:58%!important;
}

/* Three coffees: triangular sculpture */
.signature-bean-composition.count-3 .slot-1{
  left:11%!important;top:14%!important;width:36%!important;height:57%!important;
}
.signature-bean-composition.count-3 .slot-2{
  left:48%!important;top:14%!important;width:36%!important;height:57%!important;
}
.signature-bean-composition.count-3 .slot-3{
  left:31%!important;top:42%!important;width:34%!important;height:53%!important;
}

/* Four coffees: balanced constellation */
.signature-bean-composition.count-4 .slot-1{
  left:10%!important;top:10%!important;width:34%!important;height:53%!important;
}
.signature-bean-composition.count-4 .slot-2{
  left:55%!important;top:11%!important;width:34%!important;height:53%!important;
}
.signature-bean-composition.count-4 .slot-3{
  left:18%!important;top:44%!important;width:32%!important;height:50%!important;
}
.signature-bean-composition.count-4 .slot-4{
  left:50%!important;top:44%!important;width:32%!important;height:50%!important;
}

.bean-mini-label{
  position:absolute;
  z-index:11;
  min-width:74px;
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(16,13,11,.66);
  backdrop-filter:blur(8px);
  color:#c9bbb0;
  font-size:8px;
  text-align:center;
  opacity:0;
  transition:opacity .35s;
  pointer-events:none;
}
.signature-real3d-stage.has-selection .bean-mini-label{opacity:1}
.bean-mini-label b{
  color:#fff;
  margin-right:4px;
}
.bean-mini-label.label-1{left:18%;top:16%}
.bean-mini-label.label-2{right:18%;top:18%}
.bean-mini-label.label-3{left:25%;bottom:19%}
.bean-mini-label.label-4{right:24%;bottom:19%}

.signature-real3d-stage.count-many .signature-real3d-orbit.orbit-one{
  width:240px!important;height:240px!important;
}
.signature-real3d-stage.count-many .signature-real3d-orbit.orbit-two{
  width:180px!important;height:180px!important;
}

@media(max-width:760px){
  .signature-bean-composition .signature-bean-model{
    width:50%!important;
    height:62%!important;
  }
  .bean-mini-label{
    font-size:7px;
    min-width:62px;
    padding:4px 6px;
  }
}

/* Build 039 — Signature 3D UX cleanup */
.signature-real3d-controls{display:none!important}
.signature-real3d-empty > span{display:none!important}
.signature-real3d-head h3{display:none!important}
.signature-real3d-head p{display:none!important}
.signature-real3d-head{min-height:38px}

/* =========================================================
   Build 040 — Dark Roast visual differentiation in 3D
   Dark SKUs: Vietnam Dark + Indonesia Java Dark
   ========================================================= */
.signature-bean-composition .bean-slot.dark-roast{
  filter:
    brightness(.53)
    contrast(1.16)
    saturate(.72)
    sepia(.08)
    drop-shadow(0 18px 20px rgba(0,0,0,.34))!important;
}
.signature-bean-composition .bean-slot.dark-roast.primary{
  filter:
    brightness(.57)
    contrast(1.18)
    saturate(.74)
    sepia(.06)
    drop-shadow(0 20px 22px rgba(0,0,0,.38))!important;
}
.bean-mini-label.dark-roast-label{
  border-color:rgba(160,120,88,.18);
  background:rgba(8,7,6,.78);
}
.bean-mini-label.dark-roast-label em{
  font-style:normal;
  color:#9b7558;
  font-size:7px;
  margin:0 3px;
}

/* =========================================================
   Build 041 — Roast variants + brighter 3D presentation
   ========================================================= */
.signature-roast-choice-title{
  margin:18px 0 8px;
  color:#5a4638;
  font-size:13px;
  font-weight:900;
  line-height:1.6;
}
.signature-real3d{
  background:
    radial-gradient(circle at 63% 47%,rgba(196,140,92,.23),transparent 30%),
    linear-gradient(145deg,#241c17,#3a2a20 66%,#1a1512)!important;
}
.signature-real3d-stage{
  background:
    radial-gradient(circle at 50% 46%,rgba(215,158,107,.22),transparent 29%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.025))!important;
}

.commerce-entry-card{
  margin:0 0 18px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid #ddcfc3;
  border-radius:15px;
  background:#fffaf5;
}
.commerce-entry-card div{display:flex;flex-direction:column;gap:4px}
.commerce-entry-card small{font:800 7px Arial,sans-serif;letter-spacing:.14em;color:#a17758}
.commerce-entry-card strong{font-size:11px;color:#33251e}
.commerce-entry-card span{font-size:9px;color:#82746a}
.commerce-entry-card a{padding:10px 13px;border-radius:10px;background:#34241c;color:#fff;text-decoration:none;font-size:9px;font-weight:900;white-space:nowrap}
@media(max-width:650px){.commerce-entry-card{align-items:flex-start;flex-direction:column}.commerce-entry-card a{width:100%;text-align:center}}

.product-card img,.powder-card img,.equipment-card img,.shop-card img{cursor:pointer}

.powder-image-link{display:block;width:100%;height:100%;text-decoration:none}
.powder-image-link img{display:block;width:100%;height:100%;object-fit:cover}
