.cbb-wrap{
  --cbb-dark:#24130d;
  --cbb-gold:#d9a455;
  --cbb-gold2:#efc47f;
  --cbb-bg:#fffaf5;
  --cbb-border:#eadccf;
  --cbb-text:#2d1d15;
  font-family:inherit;
  color:var(--cbb-text);
  margin:25px 0
}
.cbb-shell{
  max-width:1100px;margin:auto;background:var(--cbb-bg);
  border:1px solid var(--cbb-border);border-radius:22px;overflow:hidden;
  box-shadow:0 16px 45px rgba(56,34,20,.06)
}
.cbb-head{
  background:linear-gradient(135deg,#160b07,#3d2316);
  color:#fff;text-align:center;padding:42px 25px 32px
}
.cbb-head>span{color:#e4b86e;font-size:12px;font-weight:800;letter-spacing:1.2px}
.cbb-head h2{font-size:35px;margin:8px 0 10px}
.cbb-head p{margin:0;color:#eadfd7;line-height:1.9}

.cbb-body{padding:32px}
.cbb-section-title{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;margin-bottom:18px
}
.cbb-section-title h3,.cbb-weight-box h3,.cbb-summary-wrap h3{
  margin:0;font-size:23px
}
.cbb-total-badge{
  background:#f0e3d5;border-radius:999px;padding:8px 13px;
  color:#5a412f;font-size:13px
}

.cbb-coffee-list{display:grid;gap:10px}
.cbb-coffee-row{
  display:grid;grid-template-columns:1fr auto;gap:15px;align-items:center;
  background:#fff;border:1px solid var(--cbb-border);border-radius:14px;padding:15px 17px
}
.cbb-coffee-info strong{display:block;font-size:17px;margin-bottom:4px}
.cbb-coffee-info small{color:#806c5e}

.cbb-percent-control{display:flex;align-items:center;gap:7px}
.cbb-percent-control button{
  width:38px;height:38px;border:1px solid #dcc8b7;background:#fff;
  border-radius:9px;font-size:20px;cursor:pointer
}
.cbb-percent{
  width:72px!important;min-height:40px!important;text-align:center!important;
  border:1px solid #dcc8b7!important;border-radius:9px!important;
  font:inherit!important;font-weight:800!important
}
.cbb-percent-control span{font-weight:800}

.cbb-rule{
  margin-top:13px;background:#fff2e7;border:1px solid #efd5bd;
  border-radius:10px;padding:11px 14px;color:#785238
}

.cbb-weight-box{
  margin-top:30px;border-top:1px solid #eaded4;padding-top:26px
}
.cbb-weight-options{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px
}
.cbb-weight-options button{
  min-height:52px;border:1px solid var(--cbb-border);border-radius:11px;
  background:#fff;font:inherit;font-weight:800;cursor:pointer
}
.cbb-weight-options button.selected{
  background:var(--cbb-dark);border-color:var(--cbb-dark);color:#fff
}

.cbb-result-box{
  margin-top:28px;background:linear-gradient(135deg,#21120c,#432718);
  border-radius:16px;color:#fff;padding:24px 26px;
  display:flex;justify-content:space-between;align-items:center;gap:20px
}
.cbb-result-box>div:first-child span{
  display:block;color:#e7d7c8;font-size:13px;margin-bottom:5px
}
.cbb-final-price{
  display:block;color:var(--cbb-gold2);font-size:30px
}
.cbb-result-meta{
  display:grid;gap:6px;color:#e8ded5;font-size:13px;text-align:left
}
.cbb-status.ok{color:#8ee69c}
.cbb-status.bad{color:#ffaaa0}

.cbb-summary-wrap{margin-top:25px}
.cbb-summary{
  margin-top:12px;background:#fff;border:1px solid var(--cbb-border);
  border-radius:13px;padding:14px;min-height:54px
}
.cbb-summary-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px dashed #eaded4
}
.cbb-summary-item:last-child{border-bottom:0}
.cbb-empty{
  padding:35px;text-align:center;background:#fff4e9;color:#765236
}

@media(max-width:767px){
  .cbb-shell{border-radius:16px}
  .cbb-head{padding:30px 15px 24px}
  .cbb-head h2{font-size:27px}
  .cbb-body{padding:20px 13px}
  .cbb-section-title{align-items:flex-start;flex-direction:column}
  .cbb-coffee-row{grid-template-columns:1fr;gap:10px}
  .cbb-percent-control{justify-content:flex-start}
  .cbb-weight-options{grid-template-columns:1fr}
  .cbb-result-box{flex-direction:column;align-items:stretch}
  .cbb-result-meta{text-align:right}
}


.cbb-cart-actions{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px
}
.cbb-add-to-cart{
  width:100%;
  min-height:58px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,var(--cbb-gold),var(--cbb-gold2));
  color:#28170f;
  font:inherit;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
  transition:.2s
}
.cbb-add-to-cart:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(101,62,28,.15)
}
.cbb-add-to-cart:disabled{
  opacity:.42;
  cursor:not-allowed;
  filter:grayscale(.2)
}
.cbb-add-to-cart.loading{
  opacity:.75;
  cursor:wait
}
.cbb-cart-message{
  min-height:24px;
  font-size:13px;
  text-align:center
}
.cbb-cart-message.success{color:#28723a}
.cbb-cart-message.error{color:#a83c35}
.cbb-cart-message a{
  color:#7e5428;
  font-weight:800;
  text-decoration:underline
}

.cbb-blend-name-wrap{
  margin-top:25px;padding:20px;background:#fff;border:1px solid var(--cbb-border);
  border-radius:14px
}
.cbb-blend-name-wrap label{display:block;font-size:19px;font-weight:900;margin-bottom:10px}
.cbb-blend-name{
  width:100%!important;min-height:50px!important;border:1px solid #dcc8b7!important;
  border-radius:10px!important;padding:8px 13px!important;font:inherit!important
}
.cbb-blend-name:focus{border-color:var(--cbb-gold)!important;box-shadow:0 0 0 2px rgba(217,164,85,.15)!important;outline:0}
.cbb-blend-name-wrap small{display:block;margin-top:8px;color:#806c5e}


.cbb-coffee-tabs{margin-top:10px}
.cbb-tab-buttons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px
}
.cbb-tab-btn{
  min-height:50px;
  border:1px solid var(--cbb-border);
  border-radius:12px;
  background:#fff;
  color:var(--cbb-text);
  font:inherit;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  transition:.2s
}
.cbb-tab-btn:hover{border-color:var(--cbb-gold)}
.cbb-tab-btn.selected{
  background:var(--cbb-dark);
  border-color:var(--cbb-dark);
  color:#fff;
  box-shadow:0 6px 16px rgba(36,19,13,.12)
}
.cbb-tab-panel{display:none}
.cbb-tab-panel.active{display:block}
.cbb-tab-empty{
  padding:18px;
  background:#fff;
  border:1px dashed var(--cbb-border);
  border-radius:12px;
  color:#806c5e;
  text-align:center
}


.cbb-preview-wrap{
  margin-top:28px;
  border-top:1px solid #eaded4;
  padding-top:26px
}
.cbb-preview-title{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:end;
  margin-bottom:14px
}
.cbb-preview-title h3{margin:0;font-size:23px}
.cbb-preview-title span{color:#806c5e;font-size:12px}
.cbb-preview-stage{
  background:linear-gradient(135deg,#1b0e09,#3a2115);
  border-radius:16px;
  padding:16px;
  display:flex;
  justify-content:center
}
.cbb-preview-canvas{
  display:block;
  width:min(100%,520px);
  height:auto;
  border-radius:14px;
  box-shadow:0 16px 35px rgba(0,0,0,.22)
}
@media(max-width:767px){
  .cbb-preview-title{flex-direction:column;align-items:flex-start}
}


.cbb-grind-wrap{margin-top:22px;padding:18px;background:#fffaf5;border:1px solid #eaded4;border-radius:14px}
.cbb-grind-wrap label{display:block;font-size:19px;font-weight:900;margin-bottom:10px}
.cbb-grind-type{width:100%!important;min-height:50px!important;border:1px solid #dcc8b7!important;border-radius:10px!important;padding:8px 13px!important;background:#fff!important;font:inherit!important;color:var(--cbb-text)!important}
.cbb-grind-type:focus{border-color:var(--cbb-gold)!important;box-shadow:0 0 0 2px rgba(217,164,85,.15)!important;outline:0}
.cbb-grind-wrap small{display:block;margin-top:8px;color:#806c5e}




/* ===== CINEMATIC BLEND DNA v1.8 ===== */
.cbb-bean-visual-wrap{
  margin:0 0 30px;
  border:1px solid #d9c6b6;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 20px 55px rgba(44,24,14,.10)
}
.cbb-bean-visual-head{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:17px 20px;background:linear-gradient(180deg,#fff,#fbf5ef)
}
.cbb-bean-visual-head>div{display:flex;align-items:center;gap:12px}
.cbb-bean-visual-head small{
  color:#a36c38;font-size:10px;letter-spacing:1.6px;font-weight:950;
  border:1px solid #e4d3c4;border-radius:999px;padding:6px 9px;background:#fff
}
.cbb-bean-visual-head strong{font-size:19px;color:#2b1810}
.cbb-bean-visual-head>span{font-size:12px;color:#806c5e}

.cbb-bean-stage{
  --rx:0deg;--ry:0deg;--mx:0px;--my:0px;
  position:relative;
  min-height:410px;
  overflow:hidden;
  perspective:1100px;
  background:
    radial-gradient(circle at 50% 46%,rgba(211,159,91,.17),transparent 32%),
    radial-gradient(circle at 20% 10%,rgba(255,218,166,.07),transparent 28%),
    linear-gradient(145deg,#160c08 0%,#2b190f 48%,#120907 100%);
  isolation:isolate
}
.cbb-bean-stage:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.035) 46%,transparent 66%);
  transform:translateX(-60%);animation:cbbSweep 6s ease-in-out infinite
}
@keyframes cbbSweep{0%,60%{transform:translateX(-70%)}85%,100%{transform:translateX(80%)}}

.cbb-bean-atmosphere{
  position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 28% 50%,rgba(138,79,40,.28),transparent 25%),
    radial-gradient(circle at 72% 42%,rgba(192,128,72,.20),transparent 25%);
  filter:blur(25px);
  transform:translate(var(--mx),var(--my));transition:transform .18s ease-out
}
.cbb-bean-grid{
  position:absolute;left:50%;top:53%;width:52%;height:44%;z-index:0;
  transform:translate(-50%,-50%) rotateX(67deg);
  border-radius:50%;
  border:1px solid rgba(230,195,151,.12);
  box-shadow:
    0 0 0 35px rgba(230,195,151,.035),
    0 0 0 75px rgba(230,195,151,.025),
    0 0 0 115px rgba(230,195,151,.018)
}
.cbb-bean-orbit{
  position:absolute;left:50%;top:52%;z-index:1;border:1px solid rgba(223,184,131,.12);
  border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) rotate(-8deg)
}
.cbb-bean-orbit-1{width:58%;height:30%;animation:cbbOrbit 15s linear infinite}
.cbb-bean-orbit-2{width:37%;height:50%;animation:cbbOrbit2 19s linear infinite}
@keyframes cbbOrbit{to{transform:translate(-50%,-50%) rotate(352deg)}}
@keyframes cbbOrbit2{to{transform:translate(-50%,-50%) rotate(-368deg)}}

.cbb-bean-layer{
  position:absolute;inset:0;z-index:4;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .16s ease-out
}
.cbb-real-bean{
  position:absolute;left:var(--x);top:var(--y);
  width:68px;height:88px;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  opacity:0;
  filter:drop-shadow(0 16px 13px rgba(0,0,0,.48));
  transform:
    translate(-50%,-170px)
    translateZ(calc(var(--depth) * 65px))
    rotate(var(--r))
    scale(calc(var(--s) * .72));
  transition:opacity .26s ease,transform .55s cubic-bezier(.16,.82,.22,1.12),filter .3s ease;
  transition-delay:var(--delay);
  will-change:transform;
  animation:cbbFloat var(--float) ease-in-out infinite alternate;
  animation-play-state:paused
}
.cbb-real-bean.in{
  opacity:1;
  transform:
    translate(-50%,-50%)
    translateZ(calc(var(--depth) * 65px))
    rotate(var(--r))
    scale(var(--s));
  animation-play-state:running
}
.cbb-real-bean.out{
  opacity:0!important;
  transform:translate(-50%,80px) rotate(calc(var(--r) + 40deg)) scale(.35)!important
}
.cbb-real-bean:hover{
  z-index:20;
  filter:drop-shadow(0 22px 16px rgba(0,0,0,.6)) brightness(1.10);
}
@keyframes cbbFloat{
  from{margin-top:-3px;margin-left:-2px}
  to{margin-top:5px;margin-left:3px}
}

.cbb-bean-core{
  position:absolute;left:50%;top:54%;z-index:3;width:112px;height:112px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(235,199,151,.20);
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#ead5b8;text-align:center;
  background:radial-gradient(circle,rgba(93,55,31,.48),rgba(22,12,8,.20) 65%,transparent 66%);
  box-shadow:0 0 45px rgba(217,164,85,.08),inset 0 0 25px rgba(255,220,170,.03);
  pointer-events:none
}
.cbb-bean-core span{font-size:10px;letter-spacing:2.4px;font-weight:800;opacity:.75}
.cbb-bean-core b{font-size:19px;letter-spacing:3px;color:#d7a55f}

.cbb-bean-labels{
  position:absolute;top:17px;left:18px;right:18px;z-index:8;
  display:flex;flex-wrap:wrap;gap:8px;direction:rtl;pointer-events:none
}
.cbb-dna-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 10px;border-radius:999px;
  color:#fff;background:rgba(15,8,5,.62);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  backdrop-filter:blur(8px);font-size:11px
}
.cbb-dna-pill i{width:7px;height:7px;border-radius:50%;background:#7b4327;box-shadow:0 0 10px rgba(201,135,78,.35)}
.cbb-dna-pill.robusta i{background:#c38a55}
.cbb-dna-pill span{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbb-dna-pill b{color:#e8bd7d;font-size:12px}

.cbb-bean-hint{
  position:absolute;right:18px;bottom:14px;z-index:8;color:rgba(255,245,235,.48);
  font-size:9px;letter-spacing:.8px;pointer-events:none
}
.cbb-bean-empty{
  position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
  color:#eadfd7;font-weight:850;text-align:center;padding:20px;pointer-events:none
}
.cbb-bean-stage.has-beans .cbb-bean-core{
  animation:cbbPulse 3.8s ease-in-out infinite
}
@keyframes cbbPulse{
  0%,100%{box-shadow:0 0 40px rgba(217,164,85,.06),inset 0 0 25px rgba(255,220,170,.03)}
  50%{box-shadow:0 0 72px rgba(217,164,85,.14),inset 0 0 34px rgba(255,220,170,.06)}
}

@media(max-width:767px){
  .cbb-bean-visual-head{align-items:flex-start;flex-direction:column;gap:7px;padding:14px}
  .cbb-bean-stage{min-height:330px}
  .cbb-real-bean{width:53px;height:70px}
  .cbb-bean-core{width:88px;height:88px}
  .cbb-bean-core b{font-size:16px}
  .cbb-bean-labels{top:12px;left:10px;right:10px;gap:6px}
  .cbb-dna-pill{padding:6px 8px;font-size:9px}
  .cbb-dna-pill span{max-width:110px}
  .cbb-bean-hint{display:none}
  .cbb-bean-grid{width:65%}
}


/* ===== v1.9 PREMIUM SIGNATURE BLEND LAB ===== */
.cbb-bean-stage{
  border-top:1px solid rgba(255,255,255,.04);
  min-height:455px;
  box-shadow:inset 0 0 120px rgba(0,0,0,.50);
}
.cbb-bean-stage:after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 50% 48%,transparent 0 38%,rgba(9,4,2,.18) 67%,rgba(7,3,2,.52) 100%);
}
.cbb-bean-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:calc(.4 + var(--blend-energy,.0) * .35);
  background:
    radial-gradient(circle at 50% 53%,rgba(227,164,87,.09),transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 20%,transparent 76%,rgba(0,0,0,.18));
}
.cbb-bean-topbar{
  position:absolute;top:18px;left:18px;right:18px;z-index:12;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  pointer-events:none
}
.cbb-signature-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border:1px solid rgba(224,181,124,.18);
  border-radius:999px;background:rgba(17,9,5,.42);backdrop-filter:blur(9px);
  box-shadow:0 8px 24px rgba(0,0,0,.15)
}
.cbb-signature-badge span{font-size:8px;letter-spacing:1.6px;color:#ba8450;font-weight:800}
.cbb-signature-badge b{font-size:10px;letter-spacing:1.2px;color:#f0d1a5}
.cbb-live-total{
  min-width:90px;text-align:left;
  padding:8px 11px;border-radius:13px;
  background:rgba(18,9,5,.48);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(10px)
}
.cbb-live-total small{display:block;color:rgba(255,245,235,.48);font-size:8px;margin-bottom:1px}
.cbb-live-total strong{color:#f4d8b3;font-size:17px;line-height:1}
.cbb-live-total strong span{font-variant-numeric:tabular-nums}

.cbb-bean-core{
  width:132px;height:132px;
  background:
    radial-gradient(circle at 50% 40%,rgba(196,126,65,.16),transparent 38%),
    radial-gradient(circle,rgba(82,45,25,.55),rgba(22,12,8,.19) 63%,transparent 64%);
}
.cbb-core-ring{
  position:absolute;inset:-15px;border-radius:50%;
  border:1px solid rgba(229,184,126,.13);
  box-shadow:0 0 0 11px rgba(229,184,126,.025),0 0 0 24px rgba(229,184,126,.012);
  animation:cbbCoreSpin 18s linear infinite
}
.cbb-core-ring:before,.cbb-core-ring:after{
  content:"";position:absolute;width:6px;height:6px;border-radius:50%;
  background:#d4a063;box-shadow:0 0 14px rgba(212,160,99,.5)
}
.cbb-core-ring:before{top:8px;left:28px}
.cbb-core-ring:after{right:12px;bottom:24px}
@keyframes cbbCoreSpin{to{transform:rotate(360deg)}}
.cbb-bean-core small{
  display:block;margin-top:4px;font-size:6px;letter-spacing:1.4px;
  color:rgba(239,212,178,.43)
}
.cbb-bean-stage.is-complete .cbb-bean-core{
  box-shadow:0 0 90px rgba(211,149,77,.22),inset 0 0 38px rgba(255,226,184,.07);
}
.cbb-bean-stage.is-complete .cbb-core-ring{
  border-color:rgba(236,192,132,.30);
}

.cbb-blend-gauge{
  position:absolute;left:24px;bottom:20px;z-index:12;width:205px;
  pointer-events:none
}
.cbb-gauge-track{
  height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25)
}
.cbb-gauge-track i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#81502f,#d59d5f,#f0cca0);
  border-radius:999px;
  box-shadow:0 0 14px rgba(219,160,92,.35);
  transition:width .45s cubic-bezier(.2,.8,.2,1)
}
.cbb-gauge-meta{
  display:flex;justify-content:space-between;margin-top:5px;
  font-size:8px;color:rgba(255,242,226,.44)
}
.cbb-gauge-meta em{font-style:normal}

.cbb-real-bean{
  transform-origin:50% 50%;
  filter:
    drop-shadow(0 18px 15px rgba(0,0,0,.48))
    saturate(.92)
    contrast(1.03);
}
.cbb-real-bean.in{
  animation:
    cbbFloat var(--float) ease-in-out infinite alternate,
    cbbBeanGlow 5.5s ease-in-out infinite;
}
@keyframes cbbBeanGlow{
  0%,100%{filter:drop-shadow(0 18px 15px rgba(0,0,0,.48)) saturate(.92) brightness(.98)}
  50%{filter:drop-shadow(0 21px 18px rgba(0,0,0,.56)) saturate(1.02) brightness(1.05)}
}
.cbb-real-bean:nth-child(3n){animation-delay:.2s,.7s}
.cbb-real-bean:nth-child(4n){animation-delay:.5s,1.2s}

.cbb-particle-layer{
  position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden
}
.cbb-bean-particle{
  position:absolute;left:var(--px);top:var(--py);
  width:5px;height:5px;border-radius:50%;
  background:#b8733f;
  box-shadow:0 0 10px rgba(202,132,70,.35);
  opacity:0;
  transform:translate(-50%,-50%) scale(var(--ps));
  animation:cbbParticle 1s cubic-bezier(.12,.72,.25,1) var(--pd) forwards
}
.cbb-bean-particle.robusta{background:#d19b65}
@keyframes cbbParticle{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  15%{opacity:.9}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(var(--ps))}
}

.cbb-dna-pill{
  transition:transform .22s ease,background .22s ease;
  border-color:rgba(239,210,174,.11)
}
.cbb-dna-pill:hover{transform:translateY(-2px)}
.cbb-dna-pill b{
  min-width:32px;text-align:center;padding:2px 6px;border-radius:999px;
  background:rgba(214,156,93,.10)
}

.cbb-bean-empty{
  flex-direction:column;gap:5px;
  background:
    radial-gradient(circle at 50% 52%,rgba(191,124,66,.08),transparent 26%);
}
.cbb-bean-empty .cbb-empty-icon{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(233,194,145,.15);background:rgba(44,24,14,.35);
  font-size:22px;margin-bottom:8px;box-shadow:0 12px 35px rgba(0,0,0,.18)
}
.cbb-bean-empty strong{font-size:17px;color:#f0dbc1}
.cbb-bean-empty span{font-size:10px;color:rgba(245,228,209,.48);font-weight:500}
.cbb-bean-hint{
  bottom:42px;right:22px;
  letter-spacing:1.3px
}

@media(max-width:767px){
  .cbb-bean-stage{min-height:385px}
  .cbb-bean-topbar{top:12px;left:10px;right:10px}
  .cbb-signature-badge{padding:6px 8px}
  .cbb-signature-badge span{display:none}
  .cbb-live-total{min-width:74px}
  .cbb-bean-core{width:102px;height:102px}
  .cbb-core-ring{inset:-11px}
  .cbb-blend-gauge{left:14px;right:14px;bottom:14px;width:auto}
  .cbb-bean-labels{top:58px}
  .cbb-bean-empty{padding:60px 25px 45px}
}


/* v1.9.1 — darker visual treatment for dark coffee / Arabica beans */
.cbb-real-bean{
  filter:
    drop-shadow(0 19px 16px rgba(0,0,0,.55))
    saturate(.90)
    contrast(1.10)
    brightness(.88);
}
.cbb-real-bean.in{
  animation:
    cbbFloat var(--float) ease-in-out infinite alternate,
    cbbBeanGlowDark 5.5s ease-in-out infinite;
}
@keyframes cbbBeanGlowDark{
  0%,100%{
    filter:drop-shadow(0 19px 16px rgba(0,0,0,.56)) saturate(.88) contrast(1.12) brightness(.82)
  }
  50%{
    filter:drop-shadow(0 22px 19px rgba(0,0,0,.64)) saturate(.96) contrast(1.10) brightness(.91)
  }
}
/* Robusta remains a little lighter so coffees are visually distinguishable */
.cbb-real-bean[style*="robusta-"]{
  filter:
    drop-shadow(0 18px 15px rgba(0,0,0,.50))
    saturate(.92)
    contrast(1.06)
    brightness(.96);
}


/* ===== v2.0 roast level controls from WordPress admin ===== */
.cbb-real-bean.cbb-roast-light{
  filter:drop-shadow(0 17px 14px rgba(0,0,0,.43)) saturate(1.02) contrast(1.00) brightness(1.18) !important;
}
.cbb-real-bean.cbb-roast-medium{
  filter:drop-shadow(0 18px 15px rgba(0,0,0,.48)) saturate(.98) contrast(1.03) brightness(1.04) !important;
}
.cbb-real-bean.cbb-roast-medium-dark{
  filter:drop-shadow(0 19px 16px rgba(0,0,0,.54)) saturate(.93) contrast(1.08) brightness(.91) !important;
}
.cbb-real-bean.cbb-roast-dark{
  filter:drop-shadow(0 20px 17px rgba(0,0,0,.62)) saturate(.87) contrast(1.14) brightness(.73) !important;
}
.cbb-real-bean.cbb-roast-extra-dark{
  filter:drop-shadow(0 21px 18px rgba(0,0,0,.70)) saturate(.78) contrast(1.19) brightness(.58) !important;
}
.cbb-real-bean.cbb-roast-light.in,
.cbb-real-bean.cbb-roast-medium.in,
.cbb-real-bean.cbb-roast-medium-dark.in,
.cbb-real-bean.cbb-roast-dark.in,
.cbb-real-bean.cbb-roast-extra-dark.in{
  animation:cbbFloat var(--float) ease-in-out infinite alternate !important;
}


/* ======================================================================
   v2.1 — Coffee Lovers Luxury Blend Studio
   ====================================================================== */
.cbb-wrap{
  --cbb-ink:#24130d;
  --cbb-ink-2:#3a2015;
  --cbb-caramel:#b8773f;
  --cbb-caramel-2:#d6a36b;
  --cbb-cream:#fbf5ed;
  --cbb-line:#ead9ca;
  --cbb-muted:#8c7668;
  --cbb-soft:#f8efe6;
  max-width:1280px!important;
  margin:38px auto!important;
}
.cbb-shell{
  border-radius:34px!important;
  border:1px solid rgba(167,117,76,.22)!important;
  background:
    radial-gradient(circle at 90% 0,rgba(206,157,103,.12),transparent 28%),
    linear-gradient(180deg,#fffdf9 0%,#fbf5ee 100%)!important;
  box-shadow:0 34px 90px rgba(59,30,17,.10)!important;
  overflow:hidden!important;
}
.cbb-head{
  position:relative;
  padding:54px 46px 34px!important;
  text-align:right!important;
  background:linear-gradient(135deg,#26120b 0%,#3a1e13 52%,#1b0e09 100%)!important;
  color:#fff!important;
  overflow:hidden;
}
.cbb-head:before{
  content:"";position:absolute;inset:-40px -70px auto auto;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle,rgba(213,160,98,.25),transparent 70%);
  pointer-events:none
}
.cbb-head:after{
  content:"CUSTOM ROAST • CUSTOM GRIND • CUSTOM DNA";
  position:absolute;left:42px;bottom:22px;font-size:9px;letter-spacing:2.5px;color:rgba(255,255,255,.34)
}
.cbb-head>span{color:#dda86f!important;font-size:10px!important;letter-spacing:2.2px!important;font-weight:900!important}
.cbb-head h2{font-size:42px!important;line-height:1.35!important;margin:8px 0 10px!important;color:#fff!important}
.cbb-head p{max-width:680px!important;color:#dbcabb!important;font-size:14px!important;line-height:2!important;margin:0!important}

.cbb-luxury-strip{
  margin:-1px 0 0;padding:18px 34px;display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr;
  align-items:center;background:#fff;border-bottom:1px solid var(--cbb-line)
}
.cbb-luxury-strip>div{display:grid;grid-template-columns:36px 1fr;column-gap:9px;align-items:center;min-width:0}
.cbb-luxury-strip b{grid-row:1/3;width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--cbb-ink);color:#dca56b;font-size:10px;letter-spacing:.5px}
.cbb-luxury-strip span{font-size:12px;font-weight:900;color:var(--cbb-ink)}
.cbb-luxury-strip small{font-size:9px;color:#a18d80;margin-top:2px}
.cbb-luxury-strip>i{height:1px;background:linear-gradient(90deg,transparent,#d7c3b2,transparent)}

.cbb-body{padding:34px 38px 42px!important}
.cbb-section-title{margin-bottom:15px!important;padding:0 2px}
.cbb-section-title h3{font-size:21px!important;color:var(--cbb-ink)!important}
.cbb-total-badge{border:1px solid #dfc5ae!important;background:#fffaf4!important;border-radius:999px!important;padding:8px 13px!important;color:#805d46!important}

.cbb-bean-visual-wrap{
  border-radius:25px!important;overflow:hidden!important;border:1px solid rgba(152,102,68,.28)!important;
  box-shadow:0 22px 54px rgba(43,22,15,.12)!important;margin-bottom:25px!important
}
.cbb-bean-visual-head{padding:14px 18px!important;background:linear-gradient(90deg,#2e170f,#422517)!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
.cbb-bean-visual-head strong{color:#fff!important}.cbb-bean-visual-head small,.cbb-bean-visual-head span{color:#cba47f!important}
.cbb-bean-stage{min-height:480px!important}

.cbb-coffee-tabs{padding:18px!important;border:1px solid var(--cbb-line)!important;border-radius:24px!important;background:rgba(255,255,255,.78)!important;box-shadow:0 14px 36px rgba(43,22,15,.05)!important}
.cbb-tab-buttons{background:#f3e8dd!important;padding:5px!important;border-radius:15px!important;margin-bottom:14px!important}
.cbb-tab-btn{border-radius:11px!important;min-height:46px!important;font-weight:900!important;transition:.25s ease!important}
.cbb-tab-btn.selected{background:var(--cbb-ink)!important;color:#fff!important;box-shadow:0 8px 18px rgba(43,22,15,.16)!important}
.cbb-coffee-list{gap:10px!important}
.cbb-coffee-row{
  position:relative;border:1px solid #eaded2!important;border-radius:16px!important;background:#fff!important;
  padding:14px 15px!important;transition:.23s ease!important;overflow:hidden
}
.cbb-coffee-row:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:transparent;transition:.2s}
.cbb-coffee-row:hover{transform:translateY(-2px);border-color:#d4af8e!important;box-shadow:0 12px 26px rgba(64,34,20,.07)!important}
.cbb-coffee-row.cbb-active-coffee{border-color:#b98254!important;background:linear-gradient(90deg,#fffaf5,#fff)!important}
.cbb-coffee-row.cbb-active-coffee:before{background:linear-gradient(180deg,#d7a36a,#9c6035)}
.cbb-coffee-info strong{font-size:14px!important;color:var(--cbb-ink)!important}
.cbb-coffee-info small{font-size:10px!important;color:#9a8170!important}
.cbb-percent-control{background:#f7efe8!important;border:1px solid #ead8c9!important;border-radius:13px!important;padding:4px!important}
.cbb-percent-control button{width:38px!important;height:38px!important;border-radius:10px!important;background:#fff!important;border:1px solid #e4d3c5!important;color:var(--cbb-ink)!important;font-weight:900!important;transition:.2s!important}
.cbb-percent-control button:hover{background:var(--cbb-ink)!important;color:#fff!important;border-color:var(--cbb-ink)!important}
.cbb-percent{font-weight:900!important;color:var(--cbb-ink)!important;background:transparent!important}

.cbb-rule{border:1px dashed #dbb999!important;background:#fff8f1!important;border-radius:15px!important;color:#805d47!important;padding:13px 16px!important}
.cbb-weight-box,.cbb-grind-wrap,.cbb-blend-name-wrap,.cbb-summary-wrap,.cbb-preview-wrap{
  border:1px solid var(--cbb-line)!important;border-radius:22px!important;background:#fff!important;box-shadow:0 10px 28px rgba(43,22,15,.045)!important
}
.cbb-weight-box,.cbb-grind-wrap,.cbb-blend-name-wrap,.cbb-summary-wrap{padding:21px!important}
.cbb-weight-box h3,.cbb-grind-wrap label,.cbb-blend-name-wrap label,.cbb-summary-wrap h3{color:var(--cbb-ink)!important;font-weight:900!important}
.cbb-weight-options{gap:10px!important}.cbb-weight-options button{border-radius:13px!important;min-height:48px!important;border:1px solid #e1cdbb!important;background:#fffaf6!important;color:#674736!important;font-weight:900!important}
.cbb-weight-options button.selected{background:linear-gradient(135deg,#2a150e,#4b2919)!important;color:#fff!important;border-color:#2a150e!important;box-shadow:0 10px 22px rgba(43,22,15,.16)!important}
.cbb-grind-type,.cbb-blend-name{min-height:52px!important;border-radius:13px!important;border:1px solid #dbc3b0!important;background:#fffdfa!important;padding:0 14px!important;font-size:14px!important;transition:.2s!important}
.cbb-grind-type:focus,.cbb-blend-name:focus{border-color:#a96d3d!important;box-shadow:0 0 0 4px rgba(169,109,61,.09)!important;outline:none!important}

.cbb-result-box{
  position:relative;overflow:hidden;border:none!important;border-radius:24px!important;padding:25px 26px!important;
  background:linear-gradient(135deg,#24120b 0%,#402216 55%,#1a0d08 100%)!important;
  color:#fff!important;box-shadow:0 20px 44px rgba(43,22,15,.20)!important
}
.cbb-result-box:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;left:-70px;top:-100px;background:radial-gradient(circle,rgba(213,159,94,.22),transparent 70%)}
.cbb-result-eyebrow{position:absolute!important;left:22px;top:18px!important;font-size:8px!important;letter-spacing:2.2px!important;color:#d3a06c!important}
.cbb-result-box>div{position:relative;z-index:2}.cbb-result-box span{color:#cbb7a9!important}.cbb-final-price{font-size:31px!important;color:#f1c18c!important}
.cbb-result-meta{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:15px!important;padding:12px 14px!important}
.cbb-result-meta b{color:#fff!important}

.cbb-summary{gap:8px!important}.cbb-summary>div{border:1px solid #ead8c9!important;border-radius:13px!important;background:#fffaf5!important;padding:10px 12px!important}
.cbb-preview-wrap{padding:22px!important;background:linear-gradient(145deg,#fff,#faf1e8)!important}
.cbb-preview-stage{border-radius:21px!important;background:radial-gradient(circle at 50% 30%,#4b2a1b,#1b0e09 72%)!important;padding:18px!important}
.cbb-preview-canvas{border-radius:18px!important;box-shadow:0 18px 42px rgba(0,0,0,.22)!important}

.cbb-cart-actions{position:sticky!important;bottom:14px!important;z-index:40!important;margin-top:18px!important;padding:12px!important;border-radius:18px!important;background:rgba(255,250,245,.91)!important;backdrop-filter:blur(13px)!important;border:1px solid rgba(219,195,174,.82)!important;box-shadow:0 18px 44px rgba(47,24,13,.12)!important}
.cbb-add-to-cart{min-height:56px!important;border-radius:14px!important;border:0!important;background:linear-gradient(135deg,#2a150d,#4e2a19)!important;color:#fff!important;font-size:14px!important;font-weight:900!important;letter-spacing:.1px!important;box-shadow:0 12px 26px rgba(42,21,13,.18)!important;transition:.25s ease!important}
.cbb-add-to-cart:not(:disabled):hover{transform:translateY(-2px)!important;box-shadow:0 16px 34px rgba(42,21,13,.25)!important}
.cbb-add-to-cart:disabled{background:#d8c8ba!important;color:#9b887b!important;box-shadow:none!important}

@media(max-width:900px){
  .cbb-wrap{margin:16px auto!important}.cbb-shell{border-radius:22px!important}.cbb-head{padding:34px 22px 28px!important}.cbb-head h2{font-size:31px!important}.cbb-head:after{display:none}
  .cbb-luxury-strip{grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px}.cbb-luxury-strip>i{display:none}.cbb-luxury-strip>div{padding:8px;border:1px solid #eee0d4;border-radius:12px;background:#fffaf6}
  .cbb-body{padding:20px 14px 30px!important}.cbb-bean-stage{min-height:390px!important}.cbb-coffee-tabs{padding:12px!important}
  .cbb-cart-actions{bottom:7px!important}.cbb-result-box{padding:22px 18px!important}
}
@media(max-width:520px){
  .cbb-head h2{font-size:27px!important}.cbb-head p{font-size:12px!important}.cbb-luxury-strip{grid-template-columns:1fr}.cbb-bean-stage{min-height:350px!important}
  .cbb-coffee-row{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}.cbb-percent-control{justify-self:stretch!important;display:grid!important;grid-template-columns:40px 1fr auto 40px!important}
  .cbb-weight-options{grid-template-columns:1fr!important}.cbb-final-price{font-size:26px!important}
}


/* ===== v2.2 Blend Complete Celebration ===== */
.cbb-blend-celebration{
  position:fixed;
  inset:0;
  z-index:9999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
}
.cbb-blend-celebration.show{
  opacity:1;
  visibility:visible;
}
.cbb-celebrate-backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,6,3,.76);
  backdrop-filter:blur(8px);
}
.cbb-celebrate-card{
  position:relative;
  z-index:2;
  width:min(620px,100%);
  min-height:420px;
  overflow:hidden;
  border-radius:30px;
  padding:42px 38px 34px;
  text-align:center;
  color:#fff7ef;
  background:
    radial-gradient(circle at 50% 15%,rgba(218,165,96,.27),transparent 34%),
    linear-gradient(145deg,#3a1d12 0%,#1c0d08 56%,#120805 100%);
  border:1px solid rgba(226,176,112,.42);
  box-shadow:0 40px 120px rgba(0,0,0,.48);
  transform:translateY(24px) scale(.94);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.cbb-blend-celebration.show .cbb-celebrate-card{
  transform:translateY(0) scale(1);
}
.cbb-celebrate-close{
  position:absolute;
  top:15px;
  left:15px;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:25px;
  line-height:1;
  cursor:pointer;
}
.cbb-celebrate-badge{
  width:116px;
  height:116px;
  margin:0 auto 18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#27150d;
  font-size:30px;
  font-weight:950;
  background:linear-gradient(145deg,#f2d3aa,#c58a49);
  box-shadow:
    0 0 0 9px rgba(213,159,94,.08),
    0 0 0 18px rgba(213,159,94,.04),
    0 22px 45px rgba(0,0,0,.25);
  animation:cbbCompletePulse 1.6s ease-in-out infinite;
}
@keyframes cbbCompletePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.055)}
}
.cbb-celebrate-kicker{
  font-size:9px;
  letter-spacing:2px;
  color:#d7a066;
  font-weight:900;
}
.cbb-celebrate-card h2{
  margin:8px 0 9px!important;
  color:#fff8f0!important;
  font-size:34px!important;
  line-height:1.45!important;
}
.cbb-celebrate-card>p{
  max-width:470px;
  margin:0 auto 18px;
  color:rgba(255,244,235,.72);
  font-size:13px;
  line-height:2;
}
.cbb-celebrate-parts{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:16px 0 22px;
}
.cbb-celebrate-parts span{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(219,166,104,.24);
  background:rgba(255,255,255,.055);
  color:#ead4c1;
  font-size:10px;
}
.cbb-celebrate-parts b{
  color:#e0ad74;
}
.cbb-celebrate-actions button{
  min-width:270px;
  min-height:50px;
  border:0;
  border-radius:14px;
  padding:13px 22px;
  background:linear-gradient(135deg,#e1b06f,#c18445);
  color:#25130c;
  font:inherit;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(195,134,70,.22);
}
.cbb-confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.cbb-confetti i{
  --x:50%;
  --delay:0s;
  --dur:2s;
  --rot:90deg;
  --size:7px;
  position:absolute;
  top:-22px;
  left:var(--x);
  width:var(--size);
  height:calc(var(--size) * 1.7);
  border-radius:2px;
  opacity:0;
  background:#d7a05f;
  transform:rotate(var(--rot));
  animation:cbbConfettiFall var(--dur) var(--delay) ease-in forwards;
}
.cbb-confetti i:nth-child(3n){background:#f4dfbe}
.cbb-confetti i:nth-child(4n){background:#8d512e}
.cbb-confetti i:nth-child(5n){border-radius:50%;height:var(--size)}
@keyframes cbbConfettiFall{
  0%{opacity:0;transform:translateY(-20px) rotate(0deg)}
  10%{opacity:1}
  100%{opacity:0;transform:translateY(470px) rotate(var(--rot))}
}
@media(max-width:600px){
  .cbb-blend-celebration{padding:13px}
  .cbb-celebrate-card{padding:36px 18px 25px;border-radius:22px;min-height:390px}
  .cbb-celebrate-badge{width:96px;height:96px;font-size:26px}
  .cbb-celebrate-card h2{font-size:27px!important}
  .cbb-celebrate-actions button{width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .cbb-celebrate-badge,.cbb-confetti i{animation:none!important}
}