/* Reference composition with authentic product artwork and live 3D inspection. */
.v15-product-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:46% 54%; align-items:center; min-height:clamp(340px,34vw,520px); background:var(--ivory); overflow:hidden; }
.v15-product-hero-copy { position:relative; z-index:2; padding:28px 0 32px 13vw; }
.v15-product-hero h1 { font-size:clamp(30px,3.35vw,50px); line-height:.98; letter-spacing:-.045em; margin:24px 0 20px; text-wrap:initial; }
.v15-product-hero-copy>p { font-size:clamp(14px,1.3vw,18px); line-height:1.5; max-width:35ch; margin-top:16px; }
.v15-product-hero-copy>p::before { content:""; display:block; width:52px; height:3px; background:var(--gold); margin:0 0 15px; }
.v15-product-hero-copy>h2 { font-size:clamp(18px,1.7vw,25px); line-height:1.08; margin-top:16px; text-wrap:initial; }
.v15-product-lineup { position:relative; isolation:isolate; display:flex; align-self:stretch; align-items:end; justify-content:center; min-width:0; height:auto; min-height:360px; padding:40px 18px 68px 0; background:radial-gradient(ellipse at 60% 56%,#d5e3bd 0,#f5eddb 44%,transparent 73%); }
.v15-product-lineup::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:3; background:linear-gradient(90deg,var(--ivory),transparent 9%); }
.v15-lineup-item { position:relative; z-index:2; flex:1 1 0; min-width:0; max-width:185px; }
.v15-lineup-item>img { width:100%; height:auto; filter:drop-shadow(0 12px 7px #42321924); }
.lineup-ingredients { position:absolute; z-index:1; width:100%; height:65%; object-fit:contain; object-position:center bottom; bottom:0; right:0; opacity:.95; }
.v15-pending-pack { min-height:clamp(110px,16vw,250px); margin:0 5px 10px; padding:13px 5px 10px; border:1px dashed #9aa4aa; border-radius:5px; background:rgb(var(--rr-canvas-rgb) / 0.90980); text-align:center; display:flex; align-items:center; flex-direction:column; justify-content:center; }
.v15-pending-pack>img { width:42%; height:63px; object-fit:contain; margin-bottom:7px; }
.v15-pending-pack strong { font:700 clamp(12px,1.5vw,22px)/1.03 var(--serif); }
.v15-pending-pack span { font-size:clamp(8px,.77vw,12px); line-height:1.4; margin-top:7px; }
.v15-product-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 30px; padding:19px 20px; border-bottom:1px solid var(--line); font-size:14px; }
.v15-product-nav a { min-height:35px; display:flex; align-items:center; }
.v15-product-nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.v15-sambal-section { padding:34px 4.5vw 44px; position:relative; isolation:isolate; }
.v15-product-intro { max-width:1060px; margin:0 auto 32px; text-align:center; }
.v15-product-intro h2 { font-size:clamp(26px,2.65vw,38px); line-height:1.05; margin-bottom:16px; }
.v15-product-intro p { font-size:clamp(14px,1.2vw,17px); line-height:1.55; margin:8px auto; max-width:110ch; }
.v15-sambal-rows { max-width:1440px; margin:auto; display:grid; gap:34px; }
.v15-sambal-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:30px; }
.v15-sambal-row:nth-child(even)>.v15-pack-shot { order:2; }
.v15-sambal-row:nth-child(even)>.v15-sambal-copy { order:1; }
.v15-pack-shot { position:relative; isolation:isolate; display:flex; justify-content:center; align-items:center; min-width:0; aspect-ratio:1.43; background:radial-gradient(ellipse at 50% 35%,var(--rr-canvas) 12%,#f0e8d7 68%,#e3d6bc 100%); border-radius:5px; overflow:hidden; padding:10px 15px 27px; }
.v15-pack-shot::before { content:""; position:absolute; inset:0; background:url('assets/ingredients-v3.png') center 114%/100% auto no-repeat; opacity:.75; pointer-events:none; z-index:-1; }
.v15-pack-shot .jar-stage { width:64%; height:100%; max-height:510px; max-width:390px; min-height:0; }
.v15-pack-shot .jar-fallback { height:100%; width:100%; object-fit:contain; }
.v15-pack-shot>.model-note { position:absolute; bottom:6px; left:5px; right:5px; text-align:center; font-size:10px; margin:0; background:rgb(var(--rr-canvas-rgb) / 0.74902); line-height:1.65; }
.v15-pack-shot>.asset-pending { min-height:0; align-self:stretch; width:70%; padding:10px; background:rgb(var(--rr-canvas-rgb) / 0.92157); }
.v15-pack-shot>.asset-pending>img { max-height:130px; object-fit:contain; }
.v15-sambal-copy h2 { font-size:clamp(25px,2.55vw,38px); line-height:1.02; letter-spacing:-.045em; text-wrap:initial; }
.v15-sambal-copy h2 span { white-space:nowrap; }
.v15-sambal-copy h2 i { font-style:normal; color:#c9a240; font-weight:400; }
.v15-sambal-copy h3 { font-size:clamp(19px,1.8vw,26px); line-height:1.07; margin:5px 0 15px; }
.v15-sambal-copy>p:not(.taste-profile) { font-size:clamp(14px,1.2vw,17px); line-height:1.6; margin-top:13px; }
.v15-sambal-copy .taste-profile { background:#e5f5ff; padding:11px 14px; margin:17px 0 0; font-size:clamp(12px,1.08vw,15px); line-height:1.5; }
.v15-sambal-copy .card-link { padding-top:12px; font-size:13px; min-height:38px; }
.v15-why { padding:44px 6vw 48px; background:linear-gradient(var(--rr-canvas),var(--rr-canvas)); position:relative; isolation:isolate; }
.v15-why-heading { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; margin-bottom:32px; }
.v15-why-heading h2 { font-size:clamp(34px,3.8vw,54px); line-height:1.02; }
.v15-why-heading p:not(.eyebrow) { font-size:clamp(15px,1.25vw,18px); line-height:1.55; margin-top:20px; max-width:36ch; }
.v15-why-jars { display:flex; align-items:end; justify-content:center; min-width:0; padding:0 15px; background:radial-gradient(ellipse,#eef6e6 0,transparent 68%); }
.v15-why-jars img { width:33.333%; min-width:0; height:auto; max-height:340px; object-fit:contain; filter:drop-shadow(0 6px 4px #0018581c); }
.v15-benefits { display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; }
.v15-benefits article { position:relative; display:grid; grid-template-columns:clamp(50px,5vw,70px) 1fr; column-gap:20px; align-items:center; border:1px solid #e6cf7c; border-radius:5px; padding:22px; background:var(--rr-canvas); }
.v15-benefit-icon { color:var(--navy); grid-row:1/3; display:flex; justify-content:center; align-items:center; height:100%; min-height:66px; border-right:2px solid var(--gold); padding-right:1.5vw; }
.v15-benefit-icon svg { display:block; width:clamp(36px,3.8vw,54px); height:auto; }
.v15-benefits h3 { font-size:clamp(22px,1.9vw,28px); line-height:1.08; text-wrap:initial; }
.v15-benefits p { font-size:clamp(14px,1.15vw,17px); line-height:1.5; margin-top:8px; }
.v15-food-pairing { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:40px; margin-top:42px; }
.v15-food-pairing figure { position:relative; margin:0; min-width:0; }
.v15-food-pairing figure>img { width:100%; height:auto; object-fit:contain; }
.v15-food-pairing figcaption { font-size:10px; line-height:1.5; margin-top:5px; color:var(--muted); }
.v15-food-pairing h3 { font-size:clamp(29px,2.8vw,40px); line-height:1.08; }
.v15-food-pairing h3::before { content:""; display:block; width:54px; height:3px; background:var(--gold); margin-bottom:24px; }
.v15-product-lineup,.v15-why-jars { background-image:url('assets/v15/why-product-garnish.svg'),url('assets/v15/why-hero-background.svg'); background-position:bottom center,top center; background-size:100% auto,cover; background-repeat:no-repeat; }
.v15-why-jars { padding-bottom:24px; }
.v15-pack-shot { background-image:url('assets/v15/why-hero-background.svg'); background-position:center; background-size:cover; }
.v15-pack-shot::before { background-image:url('assets/v15/product-ingredients.svg'); background-size:auto 85%; background-position:110% bottom; opacity:1; mask-image:linear-gradient(90deg,transparent 35%,#000 80%),linear-gradient(0deg,#000 50%,transparent 90%); mask-composite:intersect; }
.v15-food-pairing p { font-size:clamp(15px,1.3vw,18px); margin-top:15px; }
.v15-products .ratu-section { background:#f0fafb; }
.v15-products .range-grid { gap:20px; }
.v15-products .range-copy h3 { font-size:clamp(22px,1.8vw,26px); }
.v15-products .certification-status { padding-block:36px; border-top:1px solid var(--line); }
.v15-products .certification-status h2 { font-size:30px; }
.v15-products .certification-status p { font-size:14px; margin-top:10px; }
@media(max-width:900px) {
 .v15-product-hero-copy { padding-left:11vw; padding-top:24px; }
 .v15-product-lineup { min-height:330px; padding-right:12px; padding-bottom:56px; }
 .v15-sambal-row { gap:22px; }.v15-sambal-section { padding-inline:24px; }.v15-why { padding-inline:5vw; }
 .v15-benefits article { padding:20px 17px; grid-template-columns:60px 1fr; gap:16px; }.v15-benefit-icon { padding-right:12px; }.v15-benefit-icon svg { width:42px; }
}
@media(max-width:700px) {
 .v15-product-hero { grid-template-columns:1fr; min-height:0; }
 .v15-product-hero-copy { padding:34px 28px 18px 27px; }
 .v15-product-hero h1 { font-size:clamp(28px,8vw,42px); line-height:1.01; max-width:none; margin-top:20px; }
 .v15-product-hero-copy>p { font-size:15px; max-width:39ch; }.v15-product-hero-copy>h2 { font-size:23px; }
 .v15-product-lineup { min-height:240px; height:275px; padding:10px 13px 38px; }
 .v15-product-lineup::after { background:linear-gradient(180deg,var(--ivory),transparent 14%); }
 .v15-lineup-item { max-width:105px; }.v15-pending-pack { min-height:131px; padding-inline:3px; margin-inline:2px; }
 .v15-pending-pack>img { height:44px; }.v15-pending-pack strong { font-size:14px; }.v15-pending-pack span { font-size:8px; }
 .v15-product-nav { gap:6px 21px; font-size:12px; padding:13px 16px; }
 .v15-sambal-section { padding:33px 20px 37px; }.v15-product-intro { margin-bottom:27px; }
 .v15-product-intro h2 { font-size:29px; line-height:1.07; }.v15-product-intro p { font-size:14px; line-height:1.65; margin-top:12px; }
 .v15-sambal-rows { gap:36px; }.v15-sambal-row { grid-template-columns:1fr; gap:22px; }
 .v15-sambal-row:nth-child(even)>.v15-pack-shot,.v15-sambal-row:nth-child(even)>.v15-sambal-copy { order:initial; }
 .v15-pack-shot { aspect-ratio:1.12; padding-bottom:28px; }.v15-pack-shot .jar-stage { width:75%; height:100%; max-height:380px; }
 .v15-sambal-copy h2 { font-size:29px; }.v15-sambal-copy h3 { font-size:22px; line-height:1.1; margin-top:8px; }
 .v15-sambal-copy>p:not(.taste-profile) { font-size:15px; line-height:1.65; }.v15-sambal-copy .taste-profile { font-size:13px; margin-top:18px; }
 .v15-why { padding:38px 20px; }.v15-why-heading { grid-template-columns:1fr; gap:20px; margin-bottom:27px; }
 .v15-why-heading h2 { font-size:34px; }.v15-why-heading p:not(.eyebrow) { font-size:16px; }
 .v15-why-jars { max-width:390px; margin:auto; padding:0 10px; }.v15-why-jars img { max-height:230px; }
 .v15-benefits { grid-template-columns:1fr; gap:14px; }.v15-benefits article { padding:22px 18px; }
 .v15-benefits h3 { font-size:23px; }.v15-benefits p { font-size:14px; }
 .v15-food-pairing { grid-template-columns:1fr; gap:23px; margin-top:30px; }.v15-food-pairing h3 { font-size:30px; }.v15-food-pairing p { font-size:16px; }
 .v15-products .certification-status h2 { font-size:28px; }
}
@media(max-width:360px) {
 .v15-product-hero-copy { padding-left:22px; padding-right:22px; }.v15-product-hero h1 { font-size:28px; }
 .v15-product-lineup { height:235px; min-height:235px; padding-inline:7px; }.v15-pending-pack { min-height:109px; }
 .v15-pending-pack>img { height:32px; }.v15-pending-pack strong { font-size:12px; }.v15-pending-pack span { font-size:7px; }
 .v15-sambal-copy h2 { font-size:27px; }.v15-sambal-copy h3 { font-size:21px; }
}


/* V15.2 — the source scene blends into the editorial canvas; pack fronts stay crisp. */
.v15-why-jars { position: relative; isolation: isolate; background: none; padding: 28px 20px 22px; }
.v15-why-jars::before { content: ''; position: absolute; z-index: -1; inset: -4% -3%; background: url('assets/v15/why-product-garnish.svg') center bottom / 100% auto no-repeat, url('assets/v15/why-hero-background.svg') center / cover no-repeat; mask-image: radial-gradient(ellipse at 50% 58%, #000 34%, transparent 73%); pointer-events: none; }
.v15-pack-shot::before { background-size: auto 90%; background-position: right bottom; mask-image: radial-gradient(ellipse at 100% 100%, #000 25%, transparent 72%); mask-composite: add; }
.v15-food-pairing figure > img { mask-image: linear-gradient(90deg, #000 82%, transparent); }
@media (max-width: 700px) {
  .v15-why-jars { padding: 22px 12px 20px; }
  .v15-food-pairing figure > img { mask-image: linear-gradient(180deg, #000 85%, transparent); }
}

/* One continuous scene per flavour, extending behind both the pack and copy. */
.v15-sambal-section { --sambal-gutter: 4.5vw; }
.v15-sambal-rows { max-width: none; margin-inline: calc(-1 * var(--sambal-gutter)); gap: 0; }
.v15-sambal-row {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(28px, 3.2vw, 48px) max(var(--sambal-gutter), calc((100vw - 1440px) / 2));
  background: var(--ivory);
}
.v15-sambal-row::before, .v15-sambal-row::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.v15-sambal-row::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgb(var(--rr-canvas-rgb) / 0.09412) 10%, rgb(var(--rr-canvas-rgb) / 0.40000) 34%, rgb(var(--rr-canvas-rgb) / 0.92941) 55%, var(--ivory) 76%),
    linear-gradient(180deg, var(--ivory), transparent 18%, transparent 78%, var(--ivory)),
    url('assets/v15/why-hero-background.svg') left center / cover no-repeat;
}
.v15-sambal-row::after {
  z-index: -1;
  background: url('assets/v15/product-ingredients.svg') left bottom / auto 88% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 8%, #000b 18%, transparent 30%), linear-gradient(0deg, transparent, #000 17%, #000 45%, transparent 85%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 8%, #000b 18%, transparent 30%), linear-gradient(0deg, transparent, #000 17%, #000 45%, transparent 85%);
  mask-composite: intersect;
}
.v15-sambal-row:nth-child(even)::before {
  background:
    linear-gradient(270deg, rgb(var(--rr-canvas-rgb) / 0.09412) 10%, rgb(var(--rr-canvas-rgb) / 0.40000) 34%, rgb(var(--rr-canvas-rgb) / 0.92941) 55%, var(--ivory) 76%),
    linear-gradient(180deg, var(--ivory), transparent 18%, transparent 78%, var(--ivory)),
    url('assets/v15/why-hero-background.svg') right center / cover no-repeat;
}
.v15-sambal-row:nth-child(even)::after { transform: scaleX(-1); }
.v15-pack-shot { background: none; border-radius: 0; overflow: visible; }
.v15-pack-shot::before { content: none; }
.v15-sambal-copy { position: relative; }
.v15-pack-shot > .model-note { background: transparent; }
.v15-products .ratu-section { background: linear-gradient(180deg, var(--paper), #f0fafb 70px, #f0fafb calc(100% - 70px), var(--paper)); }
.v15-products .certification-status { border-top: 0; }

/* Feather scenery independently; supplied jar fronts and pending labels stay crisp. */
.v15-product-lineup { background: none; }
.v15-product-lineup > .lineup-ingredients { display: none; }
.v15-pending-pack { border: 0; border-radius: 0; box-shadow: none; background: radial-gradient(ellipse at 50% 52%, rgb(var(--rr-canvas-rgb) / 0.96078) 12%, rgb(var(--rr-canvas-rgb) / 0.85490) 48%, rgb(var(--rr-canvas-rgb) / 0.00000) 76%); }
.v15-product-lineup::before {
  content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: url('assets/v15/why-hero-background.svg') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%), linear-gradient(180deg, transparent, #000 20%, #000 76%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 18%), linear-gradient(180deg, transparent, #000 20%, #000 76%, transparent);
  mask-composite: intersect;
}
.v15-product-lineup::after {
  z-index: 1; inset: auto -3% 0; height: 35%;
  background: url('assets/v15/why-product-garnish.svg') center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 87%, transparent), linear-gradient(180deg, transparent, #000 35%, #000 68%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 87%, transparent), linear-gradient(180deg, transparent, #000 35%, #000 68%, transparent);
  mask-composite: intersect;
}
@media (max-width: 900px) {
  .v15-sambal-section { --sambal-gutter: 24px; }
}
@media (max-width: 700px) {
  .v15-sambal-section { --sambal-gutter: 20px; }
  .v15-sambal-row { padding-block: 28px 34px; }
  .v15-sambal-row::before, .v15-sambal-row:nth-child(even)::before {
    background:
      linear-gradient(180deg, var(--ivory), rgb(var(--rr-canvas-rgb) / 0.25098) 12%, rgb(var(--rr-canvas-rgb) / 0.50196) 30%, var(--ivory) 49%),
      url('assets/v15/why-hero-background.svg') center top / auto 42% no-repeat;
  }
  .v15-sambal-row::after, .v15-sambal-row:nth-child(even)::after {
    inset: 0 0 auto; height: 43%; transform: none;
    background-position: right center; background-size: auto 90%;
    -webkit-mask-image: radial-gradient(ellipse at 72% 48%, #0009 10%, transparent 69%);
    mask-image: radial-gradient(ellipse at 72% 48%, #0009 10%, transparent 69%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .v15-product-lineup::before { -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 69%, transparent); mask-image: linear-gradient(180deg, transparent, #000 28%, #000 69%, transparent); }
  .v15-product-lineup::after { height: 34%; }
}