
/* ===== CALCULATOR PREMIUM 2026-04-26g ===== */
.dcc-calculator{
  margin-top: 26px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.dcc-calculator .dcc-section__head{
  margin-bottom: 14px;
  padding: 0 6px;
}
.dcc-calculator .dcc-section__head .dcc-kicker{ display:none; }
.dcc-calculator .dcc-section__head h3{
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4vw, 56px);
  line-height: .98;
  letter-spacing: -.055em;
  color: #2f1d13;
}
.dcc-calculator .dcc-section__head p{
  max-width: 760px;
  font-size: 16px;
  line-height: 1.5;
  color: #6f5b4b;
}
.dcc-calculator .dcc-calc-grid{ gap: 0; }
.dcc-calculator .dcc-form{
  gap: 20px;
  padding: 24px 24px 18px;
  border-radius: 30px;
  border: 1px solid #efe5d4;
  background: linear-gradient(180deg, rgba(255,250,243,.98), rgba(255,248,238,.98));
  box-shadow: 0 10px 28px rgba(112,80,24,.08), inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 3px rgba(243,232,208,.34);
}
.dcc-calculator .dcc-field{
  gap: 10px;
}
.dcc-calculator .dcc-field--range,
.dcc-calculator .dcc-field:not(.dcc-field--range){
  position: relative;
}
.dcc-calculator .dcc-field--range > label,
.dcc-calculator .dcc-label,
.dcc-calculator .dcc-field > span,
.dcc-calculator .dcc-field-row .dcc-field > span{
  display:flex;
  align-items:center;
  gap: 10px;
  min-height: 38px;
  padding-left: 56px;
  font-size: 15px;
  line-height: 1.2;
  color: #342015;
  font-weight: 900;
}
.dcc-calculator .dcc-field--range > label::before,
.dcc-calculator .dcc-label::before,
.dcc-calculator .dcc-field-row .dcc-field > span::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #dfd2bd;
  background: linear-gradient(180deg, #fff8ea 0%, #f6ecd9 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 10px rgba(116,92,45,.08);
  background-repeat:no-repeat;
  background-position:center;
  background-size: 18px 18px;
}
.dcc-calculator .dcc-field--range > label::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23604836' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M5 7h14l1 12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2L5 7Z'/%3E%3Cpath d='M9.5 12.5c.7.5 1.5.8 2.5.8 1 0 1.8-.3 2.5-.8'/%3E%3C/svg%3E"); }
.dcc-calculator .dcc-field > .dcc-label::before,
.dcc-calculator .dcc-field > span.dcc-label::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23604836' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.dcc-calculator .dcc-field--amount > span::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23604836' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 10a5 5 0 0 1 10 0'/%3E%3Cpath d='M5 10h14l-1.2 7a2 2 0 0 1-2 1.7H8.2A2 2 0 0 1 6.2 17L5 10Z'/%3E%3C/svg%3E"); }
.dcc-calculator .dcc-field--unit > span::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23604836' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v18'/%3E%3Cpath d='M17 6h-8'/%3E%3Cpath d='M17 10h-8'/%3E%3Cpath d='M14 14H9'/%3E%3Cpath d='M12 18H9'/%3E%3C/svg%3E"); }
.dcc-calculator .dcc-field--time > span::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23604836' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.dcc-calculator .dcc-weight-row{
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 56px;
}
.dcc-calculator .dcc-weight-row input{
  min-height: 52px;
  border-radius: 14px 0 0 14px;
  border-color: #e2d7c6;
  background: #fffefd;
  font-size: 18px;
  padding: 12px 16px;
}
.dcc-calculator .dcc-weight-row span{
  height: 52px;
  border-radius: 0 14px 14px 0;
  border: 1px solid #e2d7c6;
  border-left: 0;
  background: linear-gradient(180deg, #fbf4e4 0%, #f2e6d0 100%);
  color: #463322;
  font-weight: 800;
}
.dcc-calculator [data-dcc-weight-range]{
  appearance: none;
  -webkit-appearance:none;
  height: 16px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 2px;
}
.dcc-calculator [data-dcc-weight-range]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #efe2c9 0%, #ead7b7 100%);
  border: 1px solid #e1d0b4;
}
.dcc-calculator [data-dcc-weight-range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffefc8 0%, #d89c3f 62%, #a56b16 100%);
  border: 2px solid #b57a1e;
  box-shadow: 0 2px 10px rgba(190,131,38,.3);
  margin-top: -9px;
}
.dcc-calculator [data-dcc-weight-range]::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #efe2c9 0%, #ead7b7 100%);
  border: 1px solid #e1d0b4;
}
.dcc-calculator [data-dcc-weight-range]::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffefc8 0%, #d89c3f 62%, #a56b16 100%);
  border: 2px solid #b57a1e;
  box-shadow: 0 2px 10px rgba(190,131,38,.3);
}
.dcc-calculator .dcc-hint{
  font-size: 14px;
  color: #7d6a58;
}
.dcc-calculator .dcc-hint strong{ color:#3e2a1d; }
.dcc-calculator .dcc-type-grid{
  gap: 12px 14px;
}
.dcc-calculator .dcc-type-card{
  position: relative;
  grid-template-columns: 74px minmax(0,1fr);
  gap: 14px;
  min-height: 68px;
  padding: 8px 16px 8px 10px;
  border-radius: 16px;
  border: 1px solid #ece1d3;
  background: #fffefd;
  box-shadow: 0 3px 10px rgba(94,67,25,.06);
  transform:none !important;
}
.dcc-calculator .dcc-type-card:hover{
  border-color: #d7c3a3;
  box-shadow: 0 10px 20px rgba(94,67,25,.10);
}
.dcc-calculator .dcc-type-card.is-active{
  border-color: #d7ac5c;
  background: linear-gradient(180deg, #fffdf8 0%, #fff8ec 100%);
  box-shadow: 0 0 0 2px rgba(226,181,94,.22), 0 8px 18px rgba(120,84,26,.10);
}
.dcc-calculator .dcc-type-card.is-active::after{
  content: "✓";
  position:absolute;
  right: 14px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display:grid;
  place-items:center;
  font-size: 13px;
  font-weight: 900;
  color:#fffaf0;
  background: linear-gradient(180deg, #d8a24c 0%, #b37a22 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 4px 8px rgba(179,122,34,.26);
}
.dcc-calculator .dcc-type-card input{ position:absolute; opacity:0; pointer-events:none; }
.dcc-calculator .dcc-type-card__emoji{
  width: 58px;
  height: 58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 50%;
  overflow:hidden;
  background: linear-gradient(180deg, #f8efe0 0%, #efe1c7 100%);
  border: 1px solid #d9c8ad;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(95,72,23,.08);
  font-size:0;
}
.dcc-calculator .dcc-type-card__emoji img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.dcc-calculator .dcc-type-card strong{
  font-size: 15px;
  line-height: 1.2;
  color:#2f2015;
  padding-right: 28px;
}
.dcc-calculator .dcc-type-card small{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: #6e5d4f;
  font-weight: 700;
}
.dcc-calculator .dcc-field-row{
  gap: 12px 14px;
  grid-template-columns: minmax(0, 1.15fr) minmax(160px, .72fr) minmax(190px, .95fr);
  align-items:end;
}
.dcc-calculator .dcc-field-row .dcc-field{ position:relative; }
.dcc-calculator .dcc-field-row .dcc-field input,
.dcc-calculator .dcc-field-row .dcc-field select{
  min-height: 52px;
  border-radius: 14px;
  border-color: #dfd4c4;
  background: #fffefd;
  padding: 12px 14px;
  font-size: 16px;
  color:#2d2014;
}
.dcc-calculator .dcc-field-row .dcc-field select{
  padding-right: 40px;
}
.dcc-calculator .dcc-btn--wide{
  min-height: 50px;
  margin-top: 2px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 800;
  color: #fffaf2;
  border: 1px solid #b67a1e;
  background: linear-gradient(180deg, #d7a144 0%, #ba7616 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 4px 0 rgba(146,90,11,.18), 0 8px 18px rgba(186,118,22,.18);
}
.dcc-calculator .dcc-btn--wide::before{
  content:"✦";
  width:auto;
  height:auto;
  flex:0 0 auto;
  border:0;
  background:none;
  font-size: 15px;
  color: #fff6d7;
}
.dcc-calculator .dcc-btn--wide:hover{
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 5px 0 rgba(146,90,11,.18), 0 12px 22px rgba(186,118,22,.22);
}
@media (max-width: 900px){
  .dcc-calculator .dcc-section__head h3{ font-size: clamp(28px, 7vw, 42px); }
  .dcc-calculator .dcc-field-row{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .dcc-calculator .dcc-form{ padding: 18px 16px 16px; border-radius: 24px; }
  .dcc-calculator .dcc-type-grid{ grid-template-columns: 1fr; }
  .dcc-calculator .dcc-type-card{ grid-template-columns: 62px minmax(0,1fr); min-height: 64px; }
  .dcc-calculator .dcc-type-card__emoji{ width:52px; height:52px; }
  .dcc-calculator .dcc-field--range > label,
  .dcc-calculator .dcc-label,
  .dcc-calculator .dcc-field > span,
  .dcc-calculator .dcc-field-row .dcc-field > span{ padding-left: 48px; min-height:34px; }
  .dcc-calculator .dcc-field--range > label::before,
  .dcc-calculator .dcc-label::before,
  .dcc-calculator .dcc-field-row .dcc-field > span::before{ width:32px; height:32px; background-size:16px 16px; }
}


/* ===== CALCULATOR ALIGNMENT + GREEN CTA FIX 2026-04-26h ===== */
.dcc-calculator .dcc-section__head{
  text-align:center;
  padding-left:0;
  padding-right:0;
  margin-bottom:18px;
}
.dcc-calculator .dcc-section__head h3{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.dcc-calculator .dcc-section__head p{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.dcc-calculator .dcc-field-row .dcc-field > span{
  min-height:0;
  padding-left:0 !important;
  margin-bottom:2px;
  display:block;
}
.dcc-calculator .dcc-field-row .dcc-field > span::before{
  content:none !important;
  display:none !important;
}
.dcc-calculator .dcc-field-row .dcc-field input,
.dcc-calculator .dcc-field-row .dcc-field select{
  margin-top:0;
}
.dcc-calculator .dcc-btn--wide{
  width:min(100%, 390px) !important;
  min-width:0;
  justify-self:center;
  align-self:center;
  justify-content:center;
  text-align:center;
  min-height:54px;
  padding:14px 28px;
  margin:4px auto 0;
  border-radius:18px;
  color:#fff;
  border:1px solid rgba(131, 213, 162, .82);
  background:linear-gradient(180deg,#24b66b 0%,#11864e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 12px 24px rgba(17,134,78,.22), 0 0 0 1px rgba(255,255,255,.16);
  font-size:16px;
  font-weight:900;
  letter-spacing:.01em;
}
.dcc-calculator .dcc-btn--wide::before,
.dcc-calculator .dcc-btn--wide::after{
  content:none !important;
  display:none !important;
}
.dcc-calculator .dcc-btn--wide:hover,
.dcc-calculator .dcc-btn--wide:focus-visible{
  transform:translateY(-2px);
  background:linear-gradient(180deg,#2ccb7a 0%,#0f9656 100%);
  border-color:rgba(168,238,194,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 16px 30px rgba(17,134,78,.30), 0 0 0 3px rgba(36,182,107,.16);
  outline:none;
}
@media (max-width:720px){
  .dcc-calculator .dcc-section__head h3,
  .dcc-calculator .dcc-section__head p{
    text-align:center;
  }
  .dcc-calculator .dcc-btn--wide{
    width:100% !important;
    max-width:390px;
  }
}


/* ===== REMOVE HERO STRIP + MODAL BUTTON REDESIGN 2026-04-26i ===== */
.dcc-hero .dcc-emergency-strip{display:none !important;}
.dcc-modal__actions{
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  gap:14px !important;
  margin-top:22px !important;
}
.dcc-modal__actions .dcc-btn,
.dcc-modal__actions .dcc-btn--primary,
.dcc-modal__actions .dcc-btn--ghost{
  width:100% !important;
  min-width:0 !important;
  min-height:56px;
  border-radius:18px !important;
  padding:14px 18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:10px;
  font-weight:900 !important;
  font-size:15px !important;
  line-height:1.1 !important;
  letter-spacing:.01em;
  text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}
.dcc-modal__actions .dcc-btn::before,
.dcc-modal__actions .dcc-btn::after{
  content:none !important;
  display:none !important;
}
.dcc-modal__actions .dcc-btn--primary{
  color:#fff7e9 !important;
  border:1px solid rgba(255,196,105,.78) !important;
  background:linear-gradient(180deg,#f0a33e 0%, #c56918 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 16px 30px rgba(197,105,24,.26), 0 0 0 1px rgba(255,255,255,.08) !important;
}
.dcc-modal__actions .dcc-btn--primary:hover,
.dcc-modal__actions .dcc-btn--primary:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,221,151,.95) !important;
  background:linear-gradient(180deg,#ffb653 0%, #d7751f 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 20px 36px rgba(197,105,24,.34), 0 0 0 3px rgba(255,174,72,.14) !important;
  outline:none !important;
}
.dcc-modal__actions .dcc-btn--ghost{
  color:#ffe6ba !important;
  border:1px solid rgba(255,206,128,.44) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 28px rgba(0,0,0,.16) !important;
}
.dcc-modal__actions .dcc-btn--ghost:hover,
.dcc-modal__actions .dcc-btn--ghost:focus-visible{
  transform:translateY(-2px);
  color:#fff2d5 !important;
  border-color:rgba(255,218,154,.78) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%, rgba(255,255,255,.09) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 18px 34px rgba(0,0,0,.22), 0 0 0 3px rgba(255,218,154,.10) !important;
  outline:none !important;
}
@media (max-width:560px){
  .dcc-modal__actions{grid-template-columns:1fr;gap:10px !important;}
  .dcc-modal__actions .dcc-btn{min-height:52px;font-size:14px !important;}
}


/* 2026-04-26: chocolate scale redesign */
#dcc-scale-dcc_69ee1d8d7b0b7{} /* marker noop */
.dcc-section[id^="dcc-scale-"]{
  margin-top: 26px;
}
.dcc-section[id^="dcc-scale-"] .dcc-section__head{
  margin-bottom: 20px;
  padding: 0 6px;
}
.dcc-section[id^="dcc-scale-"] .dcc-section__head .dcc-kicker{ display:none; }
.dcc-section[id^="dcc-scale-"] .dcc-section__head h3{
  margin: 0 0 10px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.04em;
  color: #2d180f;
}
.dcc-section[id^="dcc-scale-"] .dcc-section__head p{
  max-width: 940px;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #6e5545;
}
.dcc-scale{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.dcc-scale-card{
  position:relative;
  min-height: 188px;
  padding: 22px 20px;
  display:grid;
  grid-template-columns: 94px minmax(0,1fr);
  align-items:center;
  gap:18px;
  border-radius: 22px;
  border: 1px solid #e2d3b8;
  background: linear-gradient(180deg, #fffdfa 0%, #fffaf3 100%);
  box-shadow: 0 8px 24px rgba(89, 57, 25, 0.08), inset 0 1px 0 rgba(255,255,255,.88);
  color:#352118;
  text-align:left;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
.dcc-scale-card:hover,
.dcc-scale-card:focus-visible{
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 18px 38px rgba(103, 69, 28, .14);
  border-color:#cda35a;
}
.dcc-scale-card.is-active{
  transform: translateY(-3px);
  border-color:#cda35a;
  box-shadow: 0 18px 36px rgba(118, 82, 39, .16);
}
.dcc-scale-card__media{
  width: 98px;
  height: 98px;
  border-radius: 50%;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at 30% 30%, #fffdf8 0%, #f7efd9 100%);
  box-shadow: inset 0 0 0 2px #ecd7aa, 0 8px 14px rgba(95,63,22,.10);
}
.dcc-scale-card__media img{
  width: 94px;
  height: 94px;
  object-fit:contain;
  display:block;
}
.dcc-scale-card__body{ display:block; min-width:0; }
.dcc-scale-card h4{
  margin: 0;
  color:#2f1b13;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.dcc-scale-card strong{
  display:block;
  margin: 8px 0 8px;
  font-weight: 500;
  color:#7d5c28;
  font-size: 24px;
  line-height:1;
}
.dcc-scale-card strong span{
  font-size: 28px;
  color:#c29034;
}
.dcc-scale-card i{
  display:block;
  width: 100%;
  height: 16px;
  position:relative;
  margin: 4px 0 10px;
}
.dcc-scale-card i::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background: linear-gradient(90deg, transparent 0, #d9c089 18%, #d9c089 82%, transparent 100%);
  transform: translateY(-50%);
}
.dcc-scale-card i::after{
  content:"✦";
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -54%);
  font-size: 12px;
  color:#cfab63;
  background: transparent;
  padding:0 6px;
}
.dcc-scale-card p{
  margin: 0;
  color:#6c5647;
  font-size: 15px;
  line-height: 1.38;
}
.dcc-scale-card--baking,
.dcc-scale-card--cocoa{
  background: radial-gradient(circle at 82% 16%, rgba(255,178,61,.15) 0, rgba(255,178,61,.06) 18%, rgba(255,178,61,0) 38%), linear-gradient(180deg, #4a2718 0%, #24110d 100%);
  border-color: #9b6736;
  box-shadow: 0 8px 24px rgba(53, 23, 11, 0.26), inset 0 0 0 1px rgba(226, 170, 72, 0.34);
  color:#fff4dc;
}
.dcc-scale-card--baking h4,
.dcc-scale-card--cocoa h4{ color:#fff8ec; }
.dcc-scale-card--baking strong,
.dcc-scale-card--cocoa strong{ color:#f3d18b; }
.dcc-scale-card--baking strong span,
.dcc-scale-card--cocoa strong span{ color:#ffd06b; }
.dcc-scale-card--baking p,
.dcc-scale-card--cocoa p{ color:rgba(255,247,232,.88); }
.dcc-scale-card--baking i::before,
.dcc-scale-card--cocoa i::before{ background: linear-gradient(90deg, transparent 0, rgba(241,201,117,.7) 18%, rgba(241,201,117,.7) 82%, transparent 100%); }
.dcc-scale-card--baking i::after,
.dcc-scale-card--cocoa i::after{ color:#ffd06b; }
.dcc-scale-card--baking::before,
.dcc-scale-card--cocoa::before{
  content:"⚠";
  position:absolute;
  left:12px; top:10px;
  width:32px; height:32px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:18px; font-weight:700;
  color:#3b1a0d;
  background: radial-gradient(circle at 35% 35%, #fff3cb 0%, #f0c15d 70%, #be7a17 100%);
  box-shadow: 0 5px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.dcc-scale-card--cocoa::before{ content:"!"; }
.dcc-scale-picked{
  margin-top: 16px;
  min-height: 84px;
  padding: 18px 22px 18px 86px;
  position:relative;
  border-radius: 20px;
  border:1px solid #dcc79b;
  background: linear-gradient(180deg,#fffdfa 0%,#fff8ed 100%);
  box-shadow: 0 8px 22px rgba(96, 68, 30, .08);
  color:#6c5543;
  font-size: 16px;
  line-height:1.45;
}
.dcc-scale-picked::before{
  content:"✓";
  position:absolute;
  left:22px; top:50%;
  width:44px; height:44px;
  margin-top:-22px;
  border-radius:50%;
  display:grid; place-items:center;
  color:#fffaf0;
  font-size:20px;
  font-weight:700;
  background: radial-gradient(circle at 30% 30%, #efc66b 0%, #b88126 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px rgba(112,76,30,.22);
}
.dcc-scale-picked strong{ color:#2f1b13; font-weight:800; }
.dcc-scale-picked span{ color:#9d7132; font-weight:800; }

.dcc-calculator .dcc-type-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.dcc-calculator .dcc-type-card:hover,
.dcc-calculator .dcc-type-card:focus-within{
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 18px 30px rgba(112, 83, 43, .12);
  border-color:#cca35b;
}
.dcc-calculator .dcc-type-card.is-active{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 16px 28px rgba(112, 83, 43, .14);
}
@media (max-width: 1080px){
  .dcc-scale{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px){
  .dcc-section[id^="dcc-scale-"] .dcc-section__head h3{ font-size: 34px; }
  .dcc-section[id^="dcc-scale-"] .dcc-section__head p{ font-size: 15px; }
  .dcc-scale{ grid-template-columns: 1fr; gap:14px; }
  .dcc-scale-card{ grid-template-columns: 82px minmax(0,1fr); min-height: auto; padding: 18px 16px; gap:14px; }
  .dcc-scale-card__media{ width:82px; height:82px; }
  .dcc-scale-card__media img{ width:78px; height:78px; }
  .dcc-scale-card h4{ font-size: 18px; }
  .dcc-scale-card strong{ font-size: 20px; }
  .dcc-scale-card strong span{ font-size: 24px; }
  .dcc-scale-card p{ font-size: 14px; }
  .dcc-scale-picked{ padding:16px 16px 16px 72px; font-size:15px; }
  .dcc-scale-picked::before{ left:16px; width:40px; height:40px; margin-top:-20px; }
}


/* ===== SCALE LAYOUT HOTFIX 2026-04-26k =====
   Fix inherited generic .dcc-scale-card span styles breaking nested media/body/value spans. */
.dcc-section[id^="dcc-scale-"]{
  overflow: visible;
}
.dcc-scale{
  align-items: stretch;
}
.dcc-scale .dcc-scale-card{
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  align-items: center !important;
  overflow: hidden;
  min-height: 196px;
  padding: 22px 22px 22px 20px;
}
.dcc-scale .dcc-scale-card > .dcc-scale-card__media{
  display: grid !important;
  place-items: center !important;
  width: 100px !important;
  height: 100px !important;
  min-width: 100px !important;
  min-height: 100px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: radial-gradient(circle at 30% 30%, #fffef8 0%, #f9eed7 100%) !important;
  border: 1px solid #dbc391 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.58), 0 10px 18px rgba(95,63,22,.12) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
}
.dcc-scale .dcc-scale-card > .dcc-scale-card__media img{
  display: block !important;
  width: 96px !important;
  height: 96px !important;
  object-fit: contain !important;
  border-radius: 999px !important;
  max-width: none !important;
  max-height: none !important;
}
.dcc-scale .dcc-scale-card > .dcc-scale-card__body{
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: left !important;
  place-items: initial !important;
  overflow: visible !important;
}
.dcc-scale .dcc-scale-card h4{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  color: #2e1a12 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px !important;
  line-height: 1.03 !important;
  letter-spacing: -.03em !important;
}
.dcc-scale .dcc-scale-card strong{
  display: block !important;
  margin: 8px 0 8px !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  color: #7d5c28 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}
.dcc-scale .dcc-scale-card strong > span{
  display: inline !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #c29034 !important;
  font-family: inherit !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  place-items: initial !important;
}
.dcc-scale .dcc-scale-card i{
  display: block !important;
  width: 100% !important;
  height: 16px !important;
  min-height: 0 !important;
  margin: 3px 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  position: relative !important;
}
.dcc-scale .dcc-scale-card p{
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6c5647 !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
  text-align: left !important;
}
.dcc-scale .dcc-scale-card--baking h4,
.dcc-scale .dcc-scale-card--cocoa h4{
  color: #fff7ec !important;
}
.dcc-scale .dcc-scale-card--baking strong,
.dcc-scale .dcc-scale-card--cocoa strong{
  color: #f3d18b !important;
}
.dcc-scale .dcc-scale-card--baking strong > span,
.dcc-scale .dcc-scale-card--cocoa strong > span{
  color: #ffd06b !important;
}
.dcc-scale .dcc-scale-card--baking p,
.dcc-scale .dcc-scale-card--cocoa p{
  color: rgba(255,247,232,.88) !important;
}
.dcc-scale .dcc-scale-card:hover,
.dcc-scale .dcc-scale-card:focus-visible{
  transform: translateY(-4px) scale(1.012) !important;
  z-index: 3;
}
.dcc-scale-picked{
  display: block !important;
  clear: both !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
@media (max-width: 1080px){
  .dcc-scale .dcc-scale-card{
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }
}
@media (max-width: 720px){
  .dcc-scale .dcc-scale-card{
    grid-template-columns: 86px minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 18px 16px !important;
  }
  .dcc-scale .dcc-scale-card > .dcc-scale-card__media{
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
  }
  .dcc-scale .dcc-scale-card > .dcc-scale-card__media img{
    width: 74px !important;
    height: 74px !important;
  }
  .dcc-scale .dcc-scale-card h4{font-size: 20px !important;}
  .dcc-scale .dcc-scale-card strong{font-size: 20px !important;}
  .dcc-scale .dcc-scale-card strong > span{font-size: 25px !important;}
  .dcc-scale .dcc-scale-card p{font-size: 13px !important;}
}
