:root{--o:#ff6a00;--p:#ff5bae;--r:#e62b2b;--y:#ffd100;--b:#00a8e8;--d:#1a1a1a}.savora-caramel-body{background:var(--y)}.caramel-product-page{--flavor-accent:var(--r);overflow:hidden;color:var(--d)}.caramel-product-page button{font:inherit}.caramel-hero{position:relative;min-height:100svh;padding:150px 5vw 90px;background:var(--y);overflow:hidden}.caramel-hero:before,.caramel-hero:after{content:"";position:absolute;border:1px solid #1a1a1a33;border-radius:50%}.caramel-hero:before{width:46vw;height:46vw;right:-15vw;top:-20vw}.caramel-hero:after{width:28vw;height:28vw;left:-12vw;bottom:-15vw}.caramel-breadcrumbs{position:relative;display:flex;gap:9px;max-width:1760px;margin:0 auto 42px;font-size:13px;font-weight:800;text-transform:uppercase}.caramel-breadcrumbs a{color:inherit}.caramel-breadcrumbs span:last-child{opacity:.5}.caramel-config{position:relative;display:grid;grid-template-columns:minmax(360px,.9fr) minmax(500px,1.1fr);gap:clamp(40px,6vw,110px);align-items:center;max-width:1760px;margin:auto}.caramel-stage{--px:0px;--py:0px;position:relative;min-height:650px;display:grid;place-items:center;padding:70px 35px;background:var(--o);border:2px solid var(--d);border-radius:52px;box-shadow:16px 16px 0 var(--d);overflow:hidden}.caramel-stage:before,.caramel-stage:after{content:"";position:absolute;border-radius:50%;border:2px solid #ffffffa0;animation:cpPulse 3.6s ease-out infinite}.caramel-stage:before{width:68%;aspect-ratio:1}.caramel-stage:after{width:88%;aspect-ratio:1;animation-delay:1.2s}.caramel-stage-orbit{position:absolute;width:48%;aspect-ratio:1;border:2px dashed #1a1a1a55;border-radius:50%;animation:cpSpin 18s linear infinite}.caramel-stage img{position:relative;z-index:3;width:min(63%,390px);max-height:500px;object-fit:contain;filter:drop-shadow(0 28px 18px #1a1a1a52);transform:translate(var(--px),var(--py));animation:cpFloat 3.8s ease-in-out infinite}.caramel-stage img.is-switching{animation:cpSwitch .42s ease}.caramel-stage-label{position:absolute;z-index:4;padding:11px 16px;background:#fff;border:2px solid var(--d);border-radius:999px;font-size:12px;font-weight:900;text-transform:uppercase}.caramel-stage-label.is-top{top:28px;left:28px}.caramel-stage-label.is-bottom{right:28px;bottom:28px;background:var(--flavor-accent)}.caramel-stage-stats{position:absolute;left:28px;bottom:28px;z-index:4;display:flex;gap:10px}.caramel-stage-stat{min-width:102px;padding:11px;background:var(--d);color:#fff;border-radius:16px}.caramel-stage-stat strong{display:block;font-size:24px}.caramel-stage-stat small{font-size:9px;font-weight:900}.caramel-kicker{font-size:14px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.caramel-title{margin:22px 0;font-size:clamp(66px,7vw,142px);line-height:.83;letter-spacing:-.075em;text-transform:uppercase;color:#fff;text-shadow:6px 6px 0 var(--r),12px 12px 0 var(--d)}.caramel-lead{max-width:720px;font-size:clamp(18px,1.4vw,26px);line-height:1.35;font-weight:650}.caramel-selector{margin-top:28px}.caramel-selector-head{display:flex;justify-content:space-between;gap:15px;margin-bottom:14px}.caramel-selector-head h2{margin:0;font-size:16px;text-transform:uppercase}.caramel-selection{font-size:14px;font-weight:900;color:var(--r)}.caramel-flavor-list{display:flex;flex-wrap:wrap;gap:10px}.caramel-flavor-chip{position:relative;width:52px;height:52px;border:2px solid var(--d);border-radius:50%;background:var(--swatch);cursor:pointer;transition:.2s}.caramel-flavor-chip span{font-size:22px}.caramel-flavor-chip:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,6px);padding:7px 9px;background:var(--d);color:#fff;border-radius:7px;font-size:10px;font-weight:800;white-space:nowrap;opacity:0;transition:.2s}.caramel-flavor-chip:hover,.caramel-flavor-chip.is-active{transform:translateY(-5px) rotate(-4deg);box-shadow:4px 4px 0 var(--d)}.caramel-flavor-chip:hover:after{opacity:1;transform:translate(-50%,0)}.caramel-pack-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.caramel-pack-option{padding:12px 6px;border:2px solid var(--d);border-radius:14px;background:transparent;font-size:11px;font-weight:900;text-transform:uppercase;cursor:pointer;transition:.2s}.caramel-pack-option:hover,.caramel-pack-option.is-active{background:var(--d);color:#fff;transform:translateY(-3px)}.caramel-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.caramel-action{display:inline-flex;align-items:center;justify-content:center;min-height:60px;padding:0 28px;border:2px solid var(--d);border-radius:18px;font-weight:900;text-transform:uppercase}.caramel-action.primary{background:var(--d);color:#fff}.caramel-action.secondary{color:var(--d);background:#fff}.caramel-action:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--r)}.caramel-section{padding:clamp(90px,10vw,180px) 5vw}.caramel-section-head{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end;max-width:1760px;margin:0 auto 60px}.caramel-section-head h2{margin:0;font-size:clamp(58px,7vw,126px);line-height:.86;letter-spacing:-.065em;text-transform:uppercase}.caramel-section-head p{font-size:20px;font-weight:700}.caramel-flavors{background:var(--p);color:#fff}.caramel-flavors h2{text-shadow:5px 5px 0 #b31f70,10px 10px 0 #1a1a1a44}.caramel-flavor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1760px;margin:auto}.caramel-flavor-card{position:relative;min-height:240px;padding:24px;border:1px solid #ffffffb3;border-radius:30px;background:linear-gradient(145deg,#ffffff4d,#ffffff14);color:#fff;text-align:left;overflow:hidden;cursor:pointer;transition:.25s}.caramel-flavor-card:before{content:"";position:absolute;width:130px;height:130px;right:-28px;bottom:-34px;border-radius:50%;background:var(--tile);opacity:.82}.caramel-flavor-card:hover,.caramel-flavor-card.is-active{transform:translateY(-10px) rotate(-1deg);box-shadow:0 20px 38px #70164b47}.caramel-flavor-card.is-active{outline:3px solid #fff}.caramel-flavor-card strong{position:relative;display:block;font-size:clamp(26px,2vw,38px)}.caramel-flavor-card small{position:relative;display:block;margin-top:8px;max-width:72%;font-size:14px}.caramel-flavor-card .emoji{position:absolute;right:25px;top:20px;font-size:38px}.caramel-flavor-card .number{position:absolute;left:24px;bottom:20px;font-size:12px;font-weight:900}.caramel-packs{background:var(--b);color:#fff}.caramel-pack-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;max-width:1760px;margin:auto}.caramel-pack-card{min-height:430px;padding:22px;border:2px solid #fff;border-radius:30px;background:#ffffff21;color:#fff;text-align:left;cursor:pointer;transition:.25s}.caramel-pack-card:hover,.caramel-pack-card.is-active{transform:translateY(-10px);background:#fff;color:var(--d);box-shadow:10px 10px 0 var(--d)}.caramel-pack-card img{display:block;width:100%;height:275px;object-fit:contain;filter:drop-shadow(0 18px 12px #1a1a1a40);transition:.25s}.caramel-pack-card:hover img{transform:scale(1.08) rotate(3deg)}.caramel-pack-card strong{font-size:22px}.caramel-pack-card small{display:block;margin-top:8px}.caramel-note{padding:120px 5vw;background:var(--r);color:#fff;text-align:center}.caramel-note h2{max-width:1200px;margin:0 auto 28px;font-size:clamp(60px,8vw,145px);line-height:.82;letter-spacing:-.07em;text-transform:uppercase;text-shadow:7px 7px 0 #b81818,14px 14px 0 #1a1a1a47}.caramel-note p{max-width:760px;margin:0 auto 30px;font-size:20px;font-weight:700}.caramel-note .caramel-action{background:#fff;color:var(--r)}
@keyframes cpPulse{0%{transform:scale(.7);opacity:.8}80%,100%{transform:scale(1.22);opacity:0}}@keyframes cpSpin{to{transform:rotate(360deg)}}@keyframes cpFloat{0%,100%{translate:0 -7px;rotate:-1deg}50%{translate:0 9px;rotate:2deg}}@keyframes cpSwitch{45%{scale:.7;opacity:.2;rotate:-8deg}}
@media(max-width:1199px){.caramel-config{grid-template-columns:1fr;max-width:900px}.caramel-stage{min-height:560px}.caramel-flavor-grid,.caramel-pack-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:767px){.caramel-hero{padding:118px 18px 64px}.caramel-config{gap:34px}.caramel-stage{min-height:430px;border-radius:30px;box-shadow:8px 8px 0 var(--d)}.caramel-stage img{width:min(65%,260px);max-height:310px}.caramel-stage-stats{left:14px;bottom:14px}.caramel-stage-label.is-top{left:14px;top:14px}.caramel-stage-label.is-bottom{right:14px;bottom:14px}.caramel-title{font-size:clamp(54px,18vw,82px);text-shadow:4px 4px 0 var(--r),8px 8px 0 var(--d)}.caramel-pack-list{grid-template-columns:repeat(2,1fr)}.caramel-action{width:100%}.caramel-section{padding:84px 18px}.caramel-section-head{grid-template-columns:1fr;margin-bottom:36px}.caramel-section-head h2{font-size:clamp(48px,15vw,76px)}.caramel-flavor-grid,.caramel-pack-grid{grid-template-columns:1fr}.caramel-flavor-card{min-height:190px}.caramel-pack-card{min-height:350px}.caramel-pack-card img{height:225px}.caramel-note{padding:95px 18px}.caramel-note h2{font-size:clamp(52px,15vw,82px)}}
/* Product hero information hierarchy */
.caramel-title {
  max-width: 900px;
  margin: 0 0 24px;
  font-size: clamp(38px, 3.2vw, 64px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-transform: none;
}

@media (max-width: 767px) {
  .caramel-breadcrumbs {
    margin-bottom: 28px;
  }

  .caramel-config {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .caramel-copy {
    display: contents;
  }

  .caramel-title {
    order: 1;
    max-width: 100%;
    margin: 0;
    font-size: clamp(38px, 11.2vw, 54px);
    line-height: 0.94;
    letter-spacing: -0.045em;
    text-shadow: 3px 3px 0 var(--r), 6px 6px 0 var(--d);
  }

  .caramel-stage {
    order: 2;
  }

  .caramel-copy > .caramel-selector {
    order: 3;
    margin-top: 0;
  }

  .caramel-copy > .caramel-selector + .caramel-selector {
    order: 4;
  }

  .caramel-lead {
    order: 5;
    max-width: 100%;
    margin: 0;
  }

  .caramel-actions {
    order: 6;
    margin-top: 0;
  }
}
/* Product hero refinement: compact copy, black shadow and pack controls */
.savora-caramel-body .mxd-header-permanent .savora-language__toggle,
.savora-caramel-body .mxd-header-permanent .savora-language__toggle .savora-language__code,
.savora-caramel-body .mxd-header-permanent .savora-language__toggle .savora-language__icon,
.savora-caramel-body .mxd-header-permanent .savora-language__toggle svg,
.savora-caramel-body .mxd-header-permanent .savora-language__toggle svg * {
  color: var(--d);
  stroke: var(--d);
}

.caramel-title {
  text-shadow: 5px 5px 0 var(--d), 10px 10px 0 rgba(26, 26, 26, 0.22);
}

.caramel-lead {
  max-width: 790px;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.48;
  font-weight: 650;
}

.caramel-selector--packs {
  max-width: 760px;
}

.caramel-pack-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.caramel-product-page .caramel-pack-option {
  min-width: 0;
  min-height: 38px;
  padding: 6px 4px;
  border-width: 1.5px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .caramel-title {
    font-size: clamp(30px, 8.8vw, 42px);
    text-shadow: 3px 3px 0 var(--d), 6px 6px 0 rgba(26, 26, 26, 0.2);
  }

  .caramel-lead {
    font-size: 14px;
    line-height: 1.5;
  }

  .caramel-pack-list {
    display: flex;
    gap: 7px;
  }

  .caramel-product-page .caramel-pack-option {
    min-height: 36px;
    padding: 7px 11px;
    font-size: 10px;
  }
}
.savora-caramel-body .mxd-header-permanent .savora-language__toggle,
.savora-caramel-body .mxd-header-permanent .savora-language__toggle .savora-language__code,
.savora-caramel-body .mxd-header-permanent .savora-language__toggle .savora-language__icon,
.savora-caramel-body .mxd-header-permanent .savora-language__toggle svg,
.savora-caramel-body .mxd-header-permanent .savora-language__toggle svg * {
  color: var(--d) !important;
  stroke: var(--d) !important;
}

/* Compact two-line packaging tiles and clear selected-value badges */
.caramel-selector-head {
  align-items: center;
}

.caramel-selector-head h2 {
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: .14em;
}

.caramel-selection {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1.5px solid var(--d);
  border-radius: 999px;
  background: #fff;
  color: var(--d);
  box-shadow: 3px 3px 0 var(--p);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.caramel-pack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.caramel-product-page .caramel-pack-option {
  display: flex;
  flex: 0 0 104px;
  min-width: 0;
  min-height: 72px;
  padding: 10px 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-width: 2px;
  border-radius: 14px;
  white-space: normal;
}

.caramel-pack-option strong {
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.caramel-pack-option small {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}

@media (max-width: 767px) {
  .caramel-selector-head {
    gap: 10px;
  }

  .caramel-selector-head h2 {
    font-size: 12px;
    letter-spacing: .12em;
  }

  .caramel-selection {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 10px;
  }

  .caramel-pack-list {
    justify-content: center;
    gap: 8px;
  }

  .caramel-product-page .caramel-pack-option {
    flex: 0 0 calc((100% - 16px) / 3);
    min-height: 76px;
    padding: 10px 6px;
  }
}
/* Caramel page language contrast and inline selector labels */
.savora-caramel-body .mxd-header-permanent .savora-language__code {
  color: var(--d) !important;
  -webkit-text-fill-color: var(--d) !important;
  opacity: 1 !important;
}

.caramel-selector-head {
  justify-content: flex-start;
  gap: 12px;
}

@media (max-width: 767px) {
  .caramel-selector-head {
    gap: 9px;
  }
}
/* Product title, description and action polish */
.savora-caramel-body .mxd-header-permanent .savora-language__toggle,
.savora-caramel-body .mxd-header-permanent .savora-language__toggle .savora-language__code {
  color: var(--d) !important;
  -webkit-text-fill-color: var(--d) !important;
  opacity: 1 !important;
}

.savora-caramel-body .caramel-title {
  text-shadow: 5px 5px 0 var(--d);
}

.savora-caramel-body .caramel-title span {
  display: block;
}

.savora-caramel-body .caramel-lead {
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.5;
  font-weight: 500;
}

.savora-caramel-body .caramel-actions {
  margin-top: clamp(46px, 4vw, 64px);
}

@media (max-width: 767px) {
  .savora-caramel-body .caramel-title {
    text-shadow: 3px 3px 0 var(--d);
  }

  .savora-caramel-body .caramel-lead {
    font-size: 13px;
    line-height: 1.52;
    font-weight: 500;
  }

  .savora-caramel-body .caramel-actions {
    margin-top: 48px;
  }
}
/* Caramelized Popcorn section rebuild and interaction fixes */
.savora-caramel-body .caramel-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.caramel-hero {
  padding-bottom: clamp(130px, 10vw, 180px);
}

.caramel-flavor-chip {
  touch-action: manipulation;
  isolation: isolate;
  overflow: visible;
  padding: 0;
}

.caramel-flavor-chip__image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.caramel-flavor-chip::after {
  pointer-events: none;
  z-index: 20;
}

.caramel-details {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--p);
}

.caramel-details::before {
  content: "";
  position: absolute;
  width: min(55vw, 780px);
  aspect-ratio: 1;
  right: -18%;
  top: -42%;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255, 255, 255, .045), 0 0 0 145px rgba(255, 255, 255, .025);
  pointer-events: none;
}

.caramel-details__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  gap: clamp(42px, 6vw, 110px);
  align-items: stretch;
  width: min(100%, 1760px);
  margin-inline: auto;
}

.caramel-details__content {
  align-self: center;
}

.caramel-details__eyebrow,
.caramel-related__head > p {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.caramel-details__content > h2,
.caramel-related__head h2 {
  margin: 0;
  font-size: clamp(52px, 5.6vw, 104px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.caramel-details__content > h2 {
  max-width: 9ch;
  text-shadow: 5px 5px 0 #b31f70;
}

.caramel-accordion {
  margin-top: clamp(42px, 5vw, 72px);
  border-top: 1px solid rgba(255,255,255,.62);
}

.caramel-accordion__item {
  border-bottom: 1px solid rgba(255,255,255,.48);
}

.caramel-accordion__item h3 {
  margin: 0;
}

.caramel-accordion__item button {
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border: 0;
  color: #fff;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.caramel-accordion__item button span {
  font-size: clamp(20px, 1.65vw, 30px);
  font-weight: 850;
}

.caramel-accordion__item button i {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 50%;
}

.caramel-accordion__item button i::before,
.caramel-accordion__item button i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}

.caramel-accordion__item button i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.caramel-accordion__item.is-open button i::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.caramel-accordion__panel {
  overflow: hidden;
}

.caramel-accordion__panel p {
  max-width: 68ch;
  margin: -5px 0 26px;
  color: rgba(255,255,255,.82);
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 550;
  line-height: 1.55;
}

.caramel-details__visual {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: clamp(34px, 4vw, 68px);
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 18px 18px 0 #b31f70;
  backdrop-filter: blur(22px);
}

.caramel-details__visual::before {
  content: "CRISP";
  position: absolute;
  left: -5%;
  top: 6%;
  z-index: -1;
  color: rgba(255,255,255,.12);
  font-size: clamp(110px, 11vw, 210px);
  font-weight: 950;
  letter-spacing: -.1em;
}

.caramel-details__visual-kicker {
  position: absolute;
  z-index: 5;
  left: 32px;
  top: 28px;
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.caramel-details__visual > img {
  position: relative;
  z-index: 3;
  width: min(58%, 380px);
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 32px 22px rgba(82, 8, 49, .36));
  animation: cpFloat 4.2s ease-in-out infinite;
}

.caramel-details__orbit {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  animation: cpPulse 4.4s ease-out infinite;
}

.caramel-details__orbit--one { width: 52%; aspect-ratio: 1; }
.caramel-details__orbit--two { width: 78%; aspect-ratio: 1; animation-delay: 1.5s; }

.caramel-details__stats {
  position: absolute;
  z-index: 5;
  left: 28px;
  right: 28px;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.caramel-details__stats span {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 16px;
  background: rgba(126, 7, 72, .2);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.caramel-details__stats strong {
  font-size: 18px;
  line-height: 1.05;
}

.caramel-related {
  color: #fff;
  background: var(--b);
}

.caramel-related__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .34fr);
  gap: 24px 60px;
  align-items: end;
  width: min(100%, 1760px);
  margin: 0 auto clamp(50px, 6vw, 90px);
}

.caramel-related__head > p {
  grid-column: 1 / -1;
  margin: 0;
}

.caramel-related__head h2 {
  max-width: 11ch;
  text-shadow: 5px 5px 0 #006c96;
}

.caramel-related__head > span {
  align-self: end;
  color: rgba(255,255,255,.82);
  font-size: clamp(16px, 1.25vw, 21px);
  font-weight: 650;
  line-height: 1.45;
}

.caramel-related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: min(100%, 1760px);
  margin-inline: auto;
}

.caramel-related__card {
  position: relative;
  min-height: 570px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px;
  border: 2px solid #1a1a1a;
  border-radius: 32px;
  color: #1a1a1a;
  box-shadow: 9px 9px 0 #1a1a1a;
  transition: transform .3s ease, box-shadow .3s ease;
}

.caramel-related__card--pink { background: #ff5bae; }
.caramel-related__card--yellow { background: #ffd100; }
.caramel-related__card--green { background: #7ac943; }
.caramel-related__card--orange { background: #ff6a00; }

.caramel-related__card::before {
  content: "";
  position: absolute;
  width: 68%;
  aspect-ratio: 1;
  right: -18%;
  top: -12%;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(255,255,255,.08);
}

.no-touch .caramel-related__card:hover,
.caramel-related__card:focus-visible {
  transform: translate(-5px, -7px) rotate(-.6deg);
  box-shadow: 15px 17px 0 #1a1a1a;
  outline: none;
}

.caramel-related__number {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  padding: 8px 12px;
  border: 1px solid currentColor;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 900;
}

.caramel-related__card img {
  position: relative;
  z-index: 2;
  width: 82%;
  height: 300px;
  margin: 8px auto 0;
  object-fit: contain;
  filter: drop-shadow(0 20px 16px rgba(26,26,26,.25));
  transition: transform .35s ease;
}

.no-touch .caramel-related__card:hover img { transform: translateY(-8px) rotate(3deg) scale(1.04); }

.caramel-related__card h3 {
  position: relative;
  z-index: 2;
  margin: auto 0 20px;
  font-size: clamp(34px, 3vw, 56px);
  font-weight: 950;
  line-height: .85;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

@media (min-width: 1200px) {
  html[lang="sk"] .caramel-related__card[href="caramel-popcorn.html"] h3 {
    font-size: clamp(34px, 2.7vw, 52px);
  }
}

@media (min-width: 1200px) and (max-width: 1499px) {
  html[lang="sk"] .caramel-related__card[href="caramel-popcorn.html"] h3 {
    font-size: clamp(30px, 2.45vw, 36px);
  }
}

.caramel-related__link {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid currentColor;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.caramel-related__link i { font-size: 22px; font-style: normal; }

.caramel-contact-cta .savora-pl-contact-cta__title { max-width: 11ch; }

@media (max-width: 1199px) {
  .caramel-details__layout { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: 44px; }
  .caramel-details__visual { min-height: 620px; }
  .caramel-details__stats { grid-template-columns: repeat(2, 1fr); }
  .caramel-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .caramel-hero { padding-bottom: 94px; }
  .caramel-details { padding-inline: 22px; }
  .caramel-details__layout { display: block; }
  .caramel-details__content > h2 { max-width: 10ch; font-size: clamp(44px, 13vw, 64px); text-shadow: 3px 3px 0 #b31f70; }
  .caramel-details__visual { display: none; }
  .caramel-accordion { margin-top: 38px; }
  .caramel-accordion__item button { min-height: 72px; grid-template-columns: 1fr 30px; }
  .caramel-accordion__item button span { font-size: 20px; }
  .caramel-accordion__panel p { font-size: 14px; }
  .caramel-related { padding-inline: 18px; }
  .caramel-related__head { display: block; margin-bottom: 42px; }
  .caramel-related__head h2 { margin-top: 18px; font-size: clamp(46px, 13vw, 68px); text-shadow: 3px 3px 0 #006c96; }
  .caramel-related__head > span { display: block; margin-top: 22px; font-size: 15px; }
  .caramel-related__grid { grid-template-columns: 1fr; gap: 20px; }
  .caramel-related__card { min-height: 440px; padding: 20px; border-radius: 26px; box-shadow: 7px 7px 0 #1a1a1a; }
  .caramel-related__card img { height: 225px; width: 72%; }
  .caramel-related__card h3 { font-size: 42px; }
  .caramel-contact-cta .savora-pl-contact-cta__content {
    width: 100%;
    max-width: 100%;
  }

  .caramel-contact-cta .savora-pl-contact-cta__title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(3.8rem, 12vw, 6.2rem);
    line-height: .9;
    letter-spacing: -.06em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
  }
}
/* Caramel information infographic and related-section polish (2026-07-18) */
.caramel-details__content > h2 {
  max-width: 13ch;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(40px, 3.8vw, 68px);
  line-height: .94;
  letter-spacing: -.055em;
  text-shadow: 4px 4px 0 #b31f70;
}

.caramel-accordion__item button,
.caramel-accordion__item button span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.caramel-details__visual {
  display: block;
  min-height: 700px;
  perspective: 1100px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.2) 0 1px, transparent 2px) 0 0 / 24px 24px,
    linear-gradient(145deg, rgba(255,255,255,.31), rgba(255,255,255,.09));
}

.caramel-details__visual::before {
  content: "";
  inset: 9%;
  border: 1px dashed rgba(255,255,255,.34);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
}

.caramel-details__product {
  --detail-rx: 0deg;
  --detail-ry: 0deg;
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  width: min(42%, 295px);
  transform: translate(-50%, -48%) rotateX(var(--detail-rx)) rotateY(var(--detail-ry));
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
  will-change: transform;
}

.caramel-details__product img {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  transform: translateZ(42px);
  filter: drop-shadow(0 26px 18px rgba(82, 8, 49, .34));
}

.caramel-detail-point {
  position: absolute;
  z-index: auto;
  min-width: 142px;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 10px;
  align-items: center;
  color: #fff;
}

.caramel-detail-point__icon {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: rgba(179,31,112,.62);
  box-shadow: 0 8px 18px rgba(103,0,55,.18);
  font-size: 10px;
  font-weight: 900;
}

.caramel-detail-point strong {
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 900;
  line-height: 1.05;
}

.caramel-detail-point small {
  margin-top: 3px;
  color: rgba(255,255,255,.76);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.caramel-detail-point > * {
  position: relative;
  z-index: 8;
}

.caramel-detail-point::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  width: clamp(48px, 5vw, 82px);
  border-top: 1px dashed rgba(255,255,255,.66);
}

.caramel-detail-point--kernels { left: 5%; top: 13%; }
.caramel-detail-point--air { right: 5%; top: 13%; }
.caramel-detail-point--coconut { left: 3%; top: 47%; }
.caramel-detail-point--caramel { right: 3%; top: 47%; }
.caramel-detail-point--seal { z-index: 6; left: 50%; bottom: 7%; transform: translateX(-50%); }
.caramel-detail-point--kernels::after,
.caramel-detail-point--coconut::after { left: calc(100% + 12px); }
.caramel-detail-point--air::after,
.caramel-detail-point--caramel::after { right: calc(100% + 12px); }
.caramel-detail-point--seal::after {
  left: 50%;
  top: auto;
  bottom: calc(100% + 12px);
  width: 0;
  height: 48px;
  border-top: 0;
  border-left: 1px dashed rgba(255,255,255,.66);
}

.caramel-related__head > p {
  color: #fff !important;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(30px, 3.2vw, 52px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .01em;
  text-transform: none;
}

.caramel-related__head h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 5px 5px 0 #006c96, 9px 9px 0 rgba(26,26,26,.48);
}

.caramel-related__card--green img,
.caramel-related__card--orange img {
  width: 64%;
}

@media (max-width: 1199px) and (min-width: 768px) {
  .caramel-details__visual { min-height: 620px; }
  .caramel-detail-point { min-width: 118px; }
  .caramel-detail-point strong { font-size: 14px; }
  .caramel-detail-point small { font-size: 10px; }
  .caramel-detail-point::after { width: 34px; }
  .caramel-details__product { width: min(40%, 245px); }
}

@media (max-width: 767px) {
  .caramel-details__content > h2 {
    max-width: 12ch;
    font-size: clamp(34px, 10vw, 50px);
    text-shadow: 3px 3px 0 #b31f70;
  }
  .caramel-related__head > p { font-size: clamp(34px, 11vw, 48px); }
  .caramel-related__head h2 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 3px 3px 0 #006c96, 6px 6px 0 rgba(26,26,26,.45);
  }
  .caramel-related__card--green img,
  .caramel-related__card--orange img { width: 58%; }
}
/* Infographic connectors and mobile related-products carousel (2026-07-18) */
.caramel-detail-point--kernels::after,
.caramel-detail-point--air::after {
  width: clamp(86px, 8vw, 138px);
}

.caramel-detail-point--kernels::before,
.caramel-detail-point--air::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  height: clamp(78px, 8vw, 118px);
  border-left: 1px dashed rgba(255,255,255,.66);
}

.caramel-detail-point--kernels::before {
  left: calc(100% + 12px + clamp(86px, 8vw, 138px));
}

.caramel-detail-point--air::before {
  right: calc(100% + 12px + clamp(86px, 8vw, 138px));
}

.caramel-related__viewport { overflow: visible; }
.caramel-related__dots { display: none; }
.caramel-related__card.is-carousel-clone { display: none; }

@media (max-width: 767px) {
  .caramel-details__visual { display: none !important; }

  .caramel-related__viewport {
    overflow: hidden;
    padding: 0 8px 12px;
    touch-action: pan-y;
  }

  .caramel-related__grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    transition: transform .46s cubic-bezier(.22,.7,.25,1);
    will-change: transform;
  }

  .caramel-related__card,
  .caramel-related__card.is-carousel-clone {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  .caramel-related__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }

  .caramel-related__dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 50%;
    background: rgba(255,255,255,.28);
    cursor: pointer;
    transition: width .24s ease, border-radius .24s ease, background .24s ease, transform .24s ease;
  }

  .caramel-related__dots button.is-active {
    width: 27px;
    border-radius: 999px;
    background: #fff;
    transform: scaleY(1.08);
  }
}
@media (min-width: 768px) {
  [data-related-track] {
    transform: none !important;
    transition: none !important;
  }
}
/* Packaging selector SVG icons (2026-07-20) */
.caramel-pack-option__icon {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
  transition: filter .2s ease, transform .2s ease;
}

.caramel-product-page .caramel-pack-option:hover .caramel-pack-option__icon,
.caramel-product-page .caramel-pack-option.is-active .caramel-pack-option__icon {
  filter: brightness(0) invert(1);
  transform: scale(1.06);
}

.caramel-product-page .caramel-pack-option small {
  color: currentColor;
}

@media (max-width: 767px) {
  .caramel-pack-option__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}
/* Final product hero palette + selected flavor badge */
.savora-caramel-body,
.savora-caramel-body .caramel-hero {
  background: var(--base) !important;
}
.savora-caramel-body .caramel-stage {
  background: #FFD100 !important;
}
.savora-caramel-body .caramel-stage-label.is-bottom {
  width: 64px;
  height: 64px;
  padding: 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff !important;
  border: 2px solid var(--d);
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 4px 4px 0 rgba(26, 26, 26, .22);
  font-size: 0;
  color: transparent;
  line-height: 0;
}
.savora-caramel-body .caramel-stage-label.is-bottom::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-color: var(--flavor-accent, #E62B2B);
  background-image: var(--flavor-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}


/* Dynamic title palette: product / flavor / packaging */
.savora-caramel-body .caramel-title .caramel-title__product {
  color: var(--o) !important;
  -webkit-text-fill-color: var(--o) !important;
}

.savora-caramel-body .caramel-title .caramel-title__variant {
  display: block;
}

.savora-caramel-body .caramel-title .caramel-title__variant .caramel-title__flavor,
.savora-caramel-body .caramel-title .caramel-title__variant .caramel-title__pack {
  display: inline;
}

.savora-caramel-body .caramel-title .caramel-title__flavor {
  color: var(--p) !important;
  -webkit-text-fill-color: var(--p) !important;
}

.savora-caramel-body .caramel-title .caramel-title__pack {
  color: var(--b) !important;
  -webkit-text-fill-color: var(--b) !important;
}

/* Stable dynamic product title.
   Desktop always uses three rows; mobile always uses four rows. */
.savora-caramel-body .caramel-title {
  --product-title-size: clamp(30px, 2.65vw, 54px);
  --variant-title-size: clamp(28px, 2.35vw, 48px);
  display: grid;
  grid-template-rows: auto auto;
  width: min(100%, 980px);
  min-height: calc(var(--product-title-size) + var(--variant-title-size) + var(--variant-title-size));
  align-content: start;
  text-shadow: none;
}

.savora-caramel-body .caramel-title .caramel-title__product {
  display: block;
  min-width: 0;
  height: 1em;
  overflow: visible;
  font-size: var(--product-title-size);
  line-height: .92;
  white-space: nowrap;
  text-shadow: .055em .055em 0 rgba(26, 26, 26, .72);
}

.savora-caramel-body .caramel-title .caramel-title__product-line {
  display: inline;
}

.savora-caramel-body .caramel-title .caramel-title__product-line + .caramel-title__product-line::before {
  content: " ";
}

.savora-caramel-body .caramel-title .caramel-title__variant {
  display: grid;
  grid-template-rows: repeat(2, var(--variant-title-size));
  min-width: 0;
  height: calc(var(--variant-title-size) + var(--variant-title-size));
}

.savora-caramel-body .caramel-title .caramel-title__variant .caramel-title__flavor,
.savora-caramel-body .caramel-title .caramel-title__variant .caramel-title__pack {
  display: block;
  min-width: 0;
  height: 1em;
  overflow: visible;
  font-size: var(--variant-title-size);
  line-height: .92;
  letter-spacing: -.055em;
  white-space: nowrap;
  text-shadow: .055em .055em 0 rgba(26, 26, 26, .72);
}

@media (max-width: 767px) {
  .savora-caramel-body .caramel-title {
    --product-title-size: clamp(34px, 10.3vw, 44px);
    --variant-title-size: clamp(26px, 7.9vw, 34px);
    min-height: calc(var(--product-title-size) + var(--product-title-size) + var(--variant-title-size) + var(--variant-title-size));
  }

  .savora-caramel-body .caramel-title .caramel-title__product {
    height: 2em;
    white-space: normal;
  }

  .savora-caramel-body .caramel-title .caramel-title__product-line {
    display: block;
    height: 1em;
    white-space: nowrap;
  }

  .savora-caramel-body .caramel-title .caramel-title__product-line + .caramel-title__product-line::before {
    content: none;
  }
}

/* Flavored Popcorn availability states */
.caramel-pack-list--four { grid-template-columns: repeat(4, 1fr); }
.caramel-pack-list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.caramel-pack-list--one { grid-template-columns: minmax(150px, 230px); }
.caramel-flavor-chip.is-unavailable,
.caramel-flavor-chip:disabled {
  opacity: .28;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Desktop infographic connectors: preserve the original five routes and
   terminate every segment at the same calculated center point. */
@media (min-width: 768px) {
  html[lang="sk"] .caramel-detail-point {
    width: clamp(180px, 22vw, 210px);
    min-width: 0;
  }

  html[lang="sk"] .caramel-detail-point strong {
    font-size: clamp(13px, .92vw, 16px);
    line-height: 1.08;
  }

  html[lang="sk"] .caramel-detail-point small {
    font-size: clamp(9px, .62vw, 10px);
    line-height: 1.18;
  }
  .caramel-detail-point--kernels::after,
  .caramel-detail-point--air::after,
  .caramel-detail-point--coconut::after,
  .caramel-detail-point--caramel::after {
    width: var(--connector-horizontal);
  }

  .caramel-detail-point--kernels::before,
  .caramel-detail-point--air::before {
    display: block;
    height: var(--connector-vertical);
  }

  .caramel-detail-point--kernels::before {
    left: calc(100% + 12px + var(--connector-horizontal));
  }

  .caramel-detail-point--air::before {
    right: calc(100% + 12px + var(--connector-horizontal));
  }

  .caramel-detail-point--seal::after {
    height: var(--connector-vertical);
  }
}

/* Responsive product presentation for the unified 1500x1500 catalog images. */
.caramel-stage {
  padding: 30px;
}

.caramel-stage > img {
  width: min(86%, 560px);
  max-height: 600px;
}

@media (max-width: 767px) {
  .caramel-stage {
    padding: 18px;
  }

  .caramel-stage > img {
    width: min(86%, 320px);
    max-height: 400px;
  }
}

/* Product discovery titles: fluid sizing without forced line breaks. */
.caramel-related__head h2 {
  line-height: 0.98;
}

.caramel-related__card h3 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 3.75em;
  font-size: clamp(28px, 2.55vw, 50px);
  line-height: 0.94;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

@media (max-width: 767px) {
  .caramel-related__head h2 {
    line-height: 1;
  }

  .caramel-related__card h3 {
    min-height: 0;
    font-size: clamp(28px, 9vw, 40px);
  }
}