/* pp333.info — Grading line: Thai mango packhouse (kraft carton, pulp tray, corrugated flute, ripeness ramp) */
:root{
  --paper:#f4f0e5;--sheet:#fbf9f3;--tray:#e7e1d0;--tray-2:#d9d1bb;--line:#cec5ae;
  --ink:#1c281f;--ink-2:#3f4a3b;--muted:#5a6352;
  --kraft:#c99c63;--kraft-l:#e2c797;--kraft-d:#8a6134;--hole:#2a1d10;
  --leaf:#2f6a3b;--leaf-d:#1b4527;--leaf-dd:#12301b;
  --r1:#86a83c;--r2:#aebb3a;--r3:#d9bf35;--r4:#f3b326;--r5:#ee9423;--r6:#e06c25;--r7:#c4432d;
  --mango:#f3b326;--blush:#c4432d;
  --fd:"Pridi","Noto Sans Thai",Georgia,serif;
  --fb:"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-head:var(--fd);--font-body:var(--fb);
  --flute:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12'%3E%3Cpath d='M0 1h20M0 11h20' stroke='%238a6134' stroke-width='2'/%3E%3Cpath d='M0 6q5-6 10 0t10 0' fill='none' stroke='%238a6134' stroke-width='1.6'/%3E%3C/svg%3E");
  --flute-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12'%3E%3Cpath d='M0 1h20M0 11h20' stroke='%232f6a3b' stroke-width='2'/%3E%3Cpath d='M0 6q5-6 10 0t10 0' fill='none' stroke='%232f6a3b' stroke-width='1.6'/%3E%3C/svg%3E");
  --cups:radial-gradient(circle at 44% 40%,#cbc2aa 0 9px,#d8d0bb 14px,#ece6d7 21px,rgba(236,230,215,0) 23px);
  --kraft-fibre:repeating-linear-gradient(97deg,rgba(255,255,255,.07) 0 2px,transparent 2px 7px),repeating-linear-gradient(8deg,rgba(80,50,15,.06) 0 1px,transparent 1px 5px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.8 var(--fb);overflow-x:clip}
img,svg{max-width:100%}
a{color:var(--leaf);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--leaf-d);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--mango);border-radius:6px}
h1,h2,h3{font-family:var(--fd);color:var(--ink);text-wrap:balance}
p{margin:0 0 1em}
.wrap{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--sheet);padding:12px 18px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:var(--sheet)}

/* ---------- header: kraft carton band ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--kraft-fibre),var(--kraft);color:var(--ink)}
.hdr::after{content:"";display:block;height:12px;background:var(--flute) repeat-x 0 0/20px 12px,var(--kraft-l)}
.hdr-in{max-width:1280px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.plu{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:48px}
.plu:hover{color:var(--ink)}
.plu-ring{display:inline-flex;align-items:center;gap:6px;padding:9px 18px 9px 14px;border-radius:50%;background:radial-gradient(120% 90% at 30% 25%,#ffd76a,var(--mango) 55%,#e7a318);box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px rgba(28,40,31,.85),0 2px 0 rgba(60,35,10,.25),0 6px 12px -6px rgba(60,35,10,.45);transform:rotate(-5deg)}
.plu-leaf{width:18px;height:18px;color:var(--leaf);flex:none}
.plu-name{font:700 1.3rem/1 var(--fd);letter-spacing:.02em}
.plu-tag{font:600 .85rem/1 var(--fd);border:1.5px solid var(--ink);border-radius:4px;padding:5px 8px 4px;transform:rotate(2deg);background:rgba(251,249,243,.35)}
.handhole{order:3;margin-left:6px;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 16px;border:0;border-radius:999px;background:var(--hole);color:var(--kraft-l);font:600 1rem/1 var(--fd);cursor:pointer;box-shadow:inset 0 5px 0 rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.12),0 1px 0 rgba(255,240,210,.5)}
.hh-bars{display:grid;gap:4px;width:18px}
.hh-bars i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.hdr.open .hh-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr.open .hh-bars i:nth-child(2){opacity:0}
.hdr.open .hh-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hdr-tools{order:2;margin-left:auto;display:flex;align-items:center;gap:10px}
.lsw{display:flex;gap:6px}
.lsw a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:46px;min-height:46px;padding:0 10px;border-radius:999px;border:1.5px solid rgba(28,40,31,.55);color:var(--ink);text-decoration:none;font:600 .9rem/1 var(--fd)}
.lsw a[aria-current]{background:var(--ink);color:var(--kraft-l);border-color:var(--ink)}
.lsw-name{display:none}
.hdr-cta{display:none;align-items:center;min-height:46px;padding:0 20px;border-radius:999px;background:var(--leaf);color:#fff;text-decoration:none;font:600 1rem/1 var(--fd);box-shadow:0 3px 0 var(--leaf-dd)}
.hdr-cta:hover{background:var(--leaf-d);color:#fff}
.nav{order:4;flex-basis:100%;display:none}
.hdr.open .nav{display:block;max-height:calc(100vh - 150px);overflow:auto;padding-bottom:6px}
.nav ul{list-style:none;margin:0;padding:0}
.nav li{border-top:1.5px dashed rgba(28,40,31,.35)}
.nav a{display:flex;align-items:center;min-height:50px;padding:6px 4px;color:var(--ink);font:600 1.08rem/1.35 var(--fd);text-decoration:none}
.nav a::before{content:"";width:10px;height:10px;border-radius:50%;margin-right:12px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);flex:none}
.nav a[aria-current]::before{background:var(--blush);box-shadow:none}
.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em}
.ripe{position:relative;height:6px;background:linear-gradient(90deg,var(--r1) 0 14.3%,var(--r2) 0 28.6%,var(--r3) 0 42.9%,var(--r4) 0 57.2%,var(--r5) 0 71.5%,var(--r6) 0 85.8%,var(--r7) 0)}
.ripe i{position:absolute;top:0;bottom:0;right:0;left:var(--p,100%);background:rgba(231,225,208,.82)}
@media (max-width:479px){.plu-tag{display:none}.lsw a[aria-current]{display:none}.handhole{padding:0 14px 0 12px;margin-left:0}.hdr-in{gap:8px 10px;padding:8px 16px}}
@media (max-width:359px){.plu-ring{padding:8px 14px 8px 11px}.plu-name{font-size:1.12rem}.hh-txt{font-size:.95rem}}
@media (min-width:640px){.hdr-cta{display:inline-flex}.lsw-name{display:inline}.lsw-code{display:none}.lsw a{padding:0 14px}}
@media (min-width:980px){
  .hdr{position:relative}
  .hdr-in{padding:14px 24px 0}
  .handhole{display:none}
  .nav{display:block;order:4;margin:4px -24px 0;padding:0 24px;border-top:1.5px dashed rgba(28,40,31,.4)}
  .nav ul{display:flex;flex-wrap:wrap;gap:0 4px}
  .nav li{border:0}
  .nav a{min-height:48px;padding:6px 14px;font-size:1rem;border-radius:0}
  .nav a::before{width:8px;height:8px;margin-right:9px}
  .nav a:hover{background:rgba(251,249,243,.28)}
  .nav a[aria-current]{text-decoration:none;background:var(--sheet);box-shadow:inset 0 -3px 0 var(--blush)}
  html{scroll-padding-top:24px}
}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:10px 22px;border-radius:999px;font:600 1.05rem/1.2 var(--fd);text-decoration:none;text-align:center;transition:transform .15s,background .15s,box-shadow .15s}
.btn:active{transform:translateY(2px)}
.btn-leaf{background:var(--leaf);color:#fff;box-shadow:0 4px 0 var(--leaf-dd)}
.btn-leaf:hover{background:var(--leaf-d);color:#fff}
.btn-mango{background:var(--mango);color:var(--ink);box-shadow:0 4px 0 #b97f0f}
.btn-mango:hover{background:#f7c24a;color:var(--ink)}
.btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);background:rgba(251,249,243,.7)}
.btn-ghost:hover{background:var(--sheet);color:var(--ink)}

/* ---------- home hero: pulp tray + crate ---------- */
.hero{position:relative;background:var(--tray);border-bottom:1px solid var(--line);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cups) 0 0/46px 46px;-webkit-mask-image:linear-gradient(180deg,transparent 0 40%,#000 70%);mask-image:linear-gradient(180deg,transparent 0 40%,#000 70%)}
.hero-in{max-width:1280px;margin:0 auto;padding:28px 16px 40px;display:grid;gap:28px;container-type:inline-size}
.badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:6px 14px;border:1.5px solid var(--ink);border-radius:999px;background:var(--sheet);font:600 .9rem/1.3 var(--fd)}
.badge-dot{width:10px;height:10px;border-radius:50%;background:var(--blush);box-shadow:0 0 0 3px rgba(196,67,45,.2)}
.hero h1{margin:0 0 16px;font-weight:700;font-size:clamp(1.85rem,1.2rem + 2.9vw,3.35rem);line-height:1.3;letter-spacing:-.005em}
.hero .lead{font-size:1.1rem;color:var(--ink-2);max-width:62ch}
.hero .lead p:last-child{margin-bottom:0}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 20px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);font-size:.92rem;line-height:1.4;color:var(--ink-2)}
.chips li::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background:var(--r1);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.chips li:nth-child(2)::before{background:var(--r4)}
.chips li:nth-child(3)::before{background:var(--r7)}
.crate{position:relative;width:100%;max-width:600px;padding:12px;border-radius:18px;background:radial-gradient(7px 3px at 50% 50%,var(--leaf-dd) 96%,transparent) 0 0/22px 13px,linear-gradient(180deg,#377844,var(--leaf) 30%,#285c33);box-shadow:0 22px 34px -20px rgba(18,48,27,.7),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.2)}
.crate-lip{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;border-radius:10px;background:var(--leaf-dd);color:#eef3e4}
.crate-t{font:600 1.05rem/1.3 var(--fd)}
.crate-s{font:600 .82rem/1.2 var(--fd);color:var(--ink);background:var(--mango);padding:5px 10px;border-radius:50%/60%;transform:rotate(-3deg)}
@media (min-width:1024px){
  .hero::before{-webkit-mask-image:linear-gradient(90deg,transparent 0 38%,#000 72%);mask-image:linear-gradient(90deg,transparent 0 38%,#000 72%)}
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(400px,500px);gap:56px;align-items:start;padding:56px 24px 72px}
  .hero-copy{padding-top:12px}
  .crate{padding:16px}
}

/* ---------- inner page head ---------- */
.phead{position:relative;background:var(--tray);border-bottom:1px solid var(--line);isolation:isolate;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cups) 0 0/46px 46px;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 150px);mask-image:linear-gradient(180deg,#000 0,transparent 150px)}
@media (min-width:760px){.phead::before{-webkit-mask-image:linear-gradient(90deg,transparent 0 45%,#000 85%);mask-image:linear-gradient(90deg,transparent 0 45%,#000 85%)}}
.phead-in{max-width:1280px;margin:0 auto;padding:18px 16px 34px;display:grid;grid-template-areas:"fig" "copy";gap:6px}
.phead-copy{grid-area:copy;min-width:0}
.phead-fig{grid-area:fig;display:flex;align-items:center;gap:14px}
.mango{width:76px;height:76px;flex:none;filter:drop-shadow(0 8px 8px rgba(60,40,10,.22))}
.ramp{display:flex;gap:4px;align-items:center}
.ramp i{display:block;width:14px;height:10px;border-radius:3px;background:var(--k);opacity:.55}
.ramp i.on{width:24px;height:16px;opacity:1;box-shadow:0 0 0 2px var(--ink)}
.crumbs ol{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;align-items:center;font:500 .95rem/1.3 var(--fd);color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"";width:6px;height:6px;margin:0 12px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.phead h1{margin:0 0 14px;font-weight:700;font-size:clamp(1.7rem,1.15rem + 2.3vw,3rem);line-height:1.3}
.phead .lead{font-size:1.08rem;color:var(--ink-2);max-width:70ch}
.phead .lead p:last-child{margin-bottom:0}
@media (min-width:760px){
  .phead-in{grid-template-areas:"copy fig";grid-template-columns:minmax(0,1fr) 250px;gap:40px;padding:30px 24px 52px;align-items:center}
  .phead-fig{flex-direction:column;justify-content:center}
  .mango{width:210px;height:210px}
}
@media (prefers-reduced-motion:no-preference){
  .mango{animation:sway 7s ease-in-out infinite;transform-origin:55% 12%}
  @keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
}

/* ---------- shelf: packing slip + content ---------- */
.shelf{background:var(--paper)}
.shelf-in{max-width:1280px;margin:0 auto;padding:26px 16px 56px;display:grid;gap:26px}
.slip-col{min-width:0}
.slip{background:var(--sheet);border-radius:4px;box-shadow:0 1px 0 var(--line),0 10px 22px -18px rgba(40,30,10,.5);position:relative}
.slip::before{content:"";display:block;height:10px;background:radial-gradient(circle at 50% 0,var(--paper) 5px,transparent 5.5px) 0 0/16px 10px repeat-x}
.slip summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;padding:4px 16px 8px;font:700 1.05rem/1.3 var(--fd);cursor:pointer}
.slip summary::-webkit-details-marker{display:none}
.slip summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.slip[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.slip ol{list-style:none;margin:0;padding:0 8px 12px;border-top:1.5px dashed var(--line)}
.slip a{display:flex;gap:10px;align-items:baseline;min-height:44px;padding:9px 8px;color:var(--ink);text-decoration:none;font-size:.95rem;line-height:1.5;border-radius:6px}
.slip a:hover{background:var(--paper)}
.slip-n{flex:none;font:600 .8rem/1 var(--fd);font-variant-numeric:tabular-nums;color:var(--muted);min-width:22px}
.slip a[aria-current]{background:rgba(243,179,38,.2)}
.slip a[aria-current] .slip-n{color:var(--blush)}
.mini-crate{display:none}
.content{min-width:0;max-width:780px;counter-reset:sec;container-type:inline-size}
.content>:first-child{margin-top:0}
.intro-extra{margin-bottom:8px}
.sec,.faq{margin-top:52px}
.sec:first-child{margin-top:8px}
.sec h2,.faq h2{position:relative;margin:0 0 18px;padding-bottom:20px;font-weight:700;font-size:clamp(1.45rem,1.15rem + 1.1vw,2rem);line-height:1.38;--c:var(--r1)}
.sec{counter-increment:sec}
.sec h2::before{content:counter(sec,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:58px;height:40px;margin-bottom:12px;border-radius:50%;background:var(--c);color:var(--ink);font:700 1rem/1 var(--fd);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 3px var(--c),inset 0 0 0 4px rgba(28,40,31,.7),0 2px 0 rgba(0,0,0,.12);transform:rotate(-6deg)}
.sec h2::after,.faq h2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--flute) repeat-x 0 0/20px 12px;opacity:.55}
.sec:nth-of-type(7n+2) h2{--c:var(--r2)}.sec:nth-of-type(7n+3) h2{--c:var(--r3)}.sec:nth-of-type(7n+4) h2{--c:var(--r4)}
.sec:nth-of-type(7n+5) h2{--c:var(--r5)}.sec:nth-of-type(7n+6) h2{--c:var(--r6)}.sec:nth-of-type(7n) h2{--c:var(--r7);color:var(--ink)}
.sec:nth-of-type(7n) h2::before{color:#fff;box-shadow:inset 0 0 0 3px var(--c),inset 0 0 0 4px rgba(255,255,255,.8),0 2px 0 rgba(0,0,0,.12)}
.content h3{margin:28px 0 10px;font-weight:600;font-size:1.25rem;line-height:1.45}
.content ul,.content ol{margin:0 0 1.2em;padding-left:1.4em}
.content li{margin:.35em 0;padding-left:.2em}
.content ul li::marker{content:"● ";color:var(--r5);font-size:.8em}
.content ol li::marker{font:700 1em var(--fd);color:var(--leaf)}
.content strong{font-weight:600;color:var(--ink)}
.content em{font-style:normal;background:linear-gradient(transparent 62%,rgba(243,179,38,.35) 0)}
.content code{font-size:.9em;background:var(--tray);padding:2px 6px;border-radius:4px}
.content table{display:block;overflow-x:auto;border-collapse:collapse;margin:0 0 1.4em;font-size:.95rem;line-height:1.55;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);border-radius:6px;max-width:100%}
.content th{background:var(--leaf-d);color:#f3efe1;font:600 .95rem/1.4 var(--fd);text-align:left;padding:10px 14px}
.content td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top;min-width:120px}
.content tr:nth-child(even) td{background:rgba(231,225,208,.4)}
@media (min-width:1024px){
  .shelf-in{grid-template-columns:260px minmax(0,1fr);gap:64px;padding:48px 24px 80px}
  .slip-col{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow:auto;padding:2px 4px 12px}
  .slip summary{pointer-events:none}
  .slip summary::after{display:none}
  .mini-crate{display:block;margin-top:22px;padding:16px;border-radius:14px;color:#eef3e4;background:radial-gradient(6px 2.5px at 50% 50%,var(--leaf-dd) 96%,transparent) 0 0/18px 11px,var(--leaf)}
  .mini-crate strong{display:block;padding:10px 12px 0;border-radius:10px 10px 0 0;background:var(--leaf-dd);font:700 1.05rem/1.35 var(--fd)}
  .mini-crate p{margin:0;padding:6px 12px 14px;background:var(--leaf-dd);border-radius:0 0 10px 10px;font-size:.92rem;line-height:1.6}
  .mini-crate .btn{width:100%;margin-top:12px;min-height:46px;font-size:.98rem}
  .shelf-legal .shelf-in{grid-template-columns:240px minmax(0,1fr)}
}

/* ---------- FAQ: pulp cups ---------- */
.faq h2{--c:var(--r7)}
.cups{display:grid;gap:10px}
.cup{background:var(--sheet);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.cup summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:58px;padding:12px 16px;cursor:pointer;font:600 1.06rem/1.5 var(--fd)}
.cup summary::-webkit-details-marker{display:none}
.cup-dot{flex:none;width:30px;height:30px;border-radius:50%;background:var(--tray);box-shadow:inset 0 4px 6px rgba(60,45,20,.28),0 1px 0 #fff;transition:background .25s}
.cup[open] .cup-dot{background:radial-gradient(circle at 36% 32%,#ffe08a,var(--mango) 45%,var(--r5));box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 0 0 3px rgba(243,179,38,.25)}
.cup summary:hover .cup-q{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.cup-a{padding:0 18px 14px 60px;color:var(--ink-2)}
.cup-a p:last-child{margin-bottom:0}
@container (max-width:420px){.cup-a{padding-left:18px}}

/* ---------- CTA strip ---------- */
.cta-strip{margin-top:56px;padding:22px;border-radius:18px;background:var(--leaf-d);color:#f1ecdc;display:grid;gap:16px;position:relative;overflow:hidden}
.cta-strip::before{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#ffe08a,var(--mango) 45%,var(--r6));opacity:.9}
.cta-strip p{margin:0;position:relative;max-width:46ch;font:600 1.15rem/1.55 var(--fd);color:#f6f1e2}
.cta-strip .btn{justify-self:start;position:relative;background:var(--mango);color:var(--ink);box-shadow:0 4px 0 #9b6a0b}
.cta-strip .btn:hover{background:#f7c24a;color:var(--ink)}
@container (min-width:620px){.cta-strip{grid-template-columns:1fr auto;align-items:center;padding:26px 30px}.cta-strip::before{right:auto;left:-40px;top:auto;bottom:-60px}.cta-strip p{padding-left:70px}}

/* ---------- related: carton end panels ---------- */
.related{background:var(--kraft-fibre),var(--kraft-l);position:relative}
.related::before{content:"";display:block;height:12px;background:var(--flute) repeat-x 0 0/20px 12px,var(--kraft)}
.related-in{max-width:1280px;margin:0 auto;padding:34px 16px 48px}
.related-t{margin:0 0 20px;font-weight:700;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.35}
.cartons{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.carton{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:34px 18px 18px;border-radius:6px;text-decoration:none;color:var(--ink);background:var(--kraft-fibre),#d8b27a;box-shadow:inset 0 0 0 7px #d8b27a,inset 0 0 0 8.5px rgba(28,40,31,.55),0 2px 0 var(--kraft-d),0 12px 18px -14px rgba(60,35,10,.6);transition:transform .18s}
.carton:hover{color:var(--ink);transform:translateY(-3px)}
.carton-hole{position:absolute;top:13px;left:50%;width:54px;height:12px;margin-left:-27px;border-radius:999px;background:var(--hole);box-shadow:inset 0 3px 0 rgba(0,0,0,.55)}
.carton::after{content:"";position:absolute;top:10px;right:14px;width:20px;height:20px;border-radius:50%;background:var(--k);box-shadow:inset 0 0 0 2px rgba(28,40,31,.6)}
.carton strong{font:700 1.12rem/1.4 var(--fd);padding-right:18px}
.carton-d{font-size:.93rem;line-height:1.6;color:#3a3325}
@media (min-width:1024px){.related-in{padding:48px 24px 64px}}

/* ---------- footer ---------- */
.ftr{background:var(--leaf-dd);color:#e6e0cc}
.ftr::before{content:"";display:block;height:12px;background:var(--flute-g) repeat-x 0 0/20px 12px,var(--leaf-d)}
.ftr-in{max-width:1280px;margin:0 auto;padding:36px 16px 24px;display:grid;gap:30px}
.ftr .plu{color:var(--ink)}
.plu-ftr .plu-tag{color:#e6e0cc;border-color:rgba(230,224,204,.6);background:transparent}
.ftr-disc{margin:16px 0 0;font-size:.95rem;line-height:1.75;max-width:52ch;color:#d9d3bf}
.ftr h2{margin:0 0 8px;font:600 1.05rem/1.3 var(--fd);color:var(--mango)}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li a{display:inline-flex;align-items:center;min-height:44px;color:#f1ebd8;text-decoration:none;font-size:.98rem;line-height:1.4}
.ftr li a:hover{color:#fff;text-decoration:underline}
.ftr :focus-visible{outline-color:var(--mango);box-shadow:none}
.ftr-base{max-width:1280px;margin:0 auto;padding:16px 16px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;border-top:1.5px dashed rgba(230,224,204,.25);font-size:.92rem}
.age{display:inline-flex;align-items:center;justify-content:center;width:58px;height:40px;border-radius:50%;background:var(--blush);color:#fff;font:700 1rem/1 var(--fd);box-shadow:inset 0 0 0 3px var(--blush),inset 0 0 0 4px rgba(255,255,255,.75);transform:rotate(-6deg)}
.ftr-copy{color:#d9d3bf}
.to-top{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;color:#f1ebd8}
.to-top:hover{color:#fff}
@media (min-width:760px){.ftr-in{grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:48px 24px 30px}.ftr-base{padding:18px 24px 30px}}

/* ---------- 404 ---------- */
.nf{max-width:640px;margin:0 auto;padding:60px 16px 80px;text-align:left}
.nf-code{margin:0;font:700 5rem/1 var(--fd);color:var(--r5)}
.nf h1{font-size:2rem;line-height:1.35;margin:10px 0}

/* ---------- Latin-only refinements ---------- */
:lang(en) .hero h1,:lang(en) .phead h1{letter-spacing:-.015em;line-height:1.14}
:lang(en) .sec h2,:lang(en) .faq h2{line-height:1.22}
:lang(en) body{line-height:1.7}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}