/* Homepage campaign ("Peel less. Chill more.") - popup (Editorial) + catalogue
   row (Cover card). Ported from prototype/Peel Less Campaign.html (the approved
   visual source), every selector scoped under .tzc-* so nothing here can reach
   the rest of the page, and nothing on the page restyles this (the overrides of
   the site's global .add / .stepper / .qty / h2 rules are explicit below).
   Layout, sizes and motion are locked here; admin edits only copy, the six
   colours (custom properties set by campaign.js), products and images. */

.tzc-sec,.tzc-wrap{
  --tzc-bg1:#B1C772;--tzc-bg2:#CBDB98;--tzc-ink:#1B250A;--tzc-soft:#34431A;--tzc-cta:#1B250A;--tzc-ctaInk:#F3F5E1;
  --tzc-glow:rgba(250,253,232,.72);--tzc-xbg:rgba(255,255,255,.4);--tzc-tag:#FBFBEF;
  --tzc-serif:"Fraunces",Georgia,serif;--tzc-body:"Work Sans",system-ui,-apple-system,sans-serif;--tzc-display:"Inter",system-ui,-apple-system,sans-serif;
}
.tzc-sec *,.tzc-wrap *{box-sizing:border-box}

/* ---------- popup ---------- */
.tzc-ov{position:fixed;inset:0;z-index:900;background:rgba(16,20,8,.45);cursor:pointer;touch-action:none;overscroll-behavior:contain}
.tzc-wrap{position:fixed;inset:0;z-index:901;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;
  padding:0 10px calc(12px + env(safe-area-inset-bottom,0px))}
@media (min-width:641px){.tzc-wrap{align-items:center;padding:24px}}
.tzc-pop{pointer-events:auto;position:relative;width:100%;max-width:373px;max-height:calc(100dvh - 24px);overflow:hidden;
  display:flex;flex-direction:column;border-radius:32px;color:var(--tzc-ink);outline:none;text-align:left;
  background:radial-gradient(90% 55% at 50% 72%,var(--tzc-glow),transparent 70%),linear-gradient(180deg,var(--tzc-bg2) 0%,var(--tzc-bg1) 100%);
  box-shadow:0 34px 70px -26px rgba(10,14,6,.7);font-family:var(--tzc-body);line-height:normal;-webkit-font-smoothing:antialiased}
.tzc-pop::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tzc-pop .tzc-x{position:absolute;top:14px;right:14px;z-index:20;width:44px;height:44px;margin:0;padding:0;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:var(--tzc-xbg);color:var(--tzc-ink)}
.tzc-pop .tzc-x svg{width:13px;height:13px}
.tzc-pop .tzc-x:focus-visible,.tzc-pop .tzc-cta:focus-visible{outline:2px solid var(--tzc-ink);outline-offset:3px}
.tzc-hdr{position:relative;z-index:3;padding:26px 22px 0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.tzc-eb{display:inline-flex;align-items:center;gap:8px;min-height:20px;font:600 11px/1 var(--tzc-body);letter-spacing:.2em;text-transform:uppercase;color:var(--tzc-soft)}
.tzc-eb::before{content:"";width:16px;height:1.5px;border-radius:1px;background:currentColor;opacity:.7}
.tzc-pop .tzc-big{margin:0;padding:0;display:flex;flex-direction:column;font:620 52px/.9 var(--tzc-serif);font-optical-sizing:auto;font-variation-settings:"SOFT" 50,"WONK" 0;letter-spacing:-.035em;color:var(--tzc-ink);font-kerning:normal;text-rendering:optimizeLegibility;max-width:calc(100% - 40px)}
.tzc-big>span{display:block;overflow:hidden;padding:0 8px 7px 0;margin-bottom:-7px}
.tzc-big>span>span{display:block}
.tzc-big .tzc-l2{font-style:italic;font-weight:480;font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.025em;padding-left:.02em}
.tzc-pop .tzc-desc{position:relative;z-index:9;margin:10px 22px 0;padding:0;max-width:300px;font:500 17px/1.32 var(--tzc-body);letter-spacing:-.005em;color:var(--tzc-soft);text-wrap:balance}
/* The composition is drawn on a fixed 373 x 262 stage (the approved 393 px
   phone); campaign.js scales it down on narrower screens so nothing moves
   relative to anything else. */
.tzc-stage{position:relative;z-index:4;flex:none;height:262px;margin-top:2px}
.tzc-stagein{position:absolute;left:0;top:0;width:373px;height:262px;transform-origin:0 0}
.tzc-bw{position:absolute;transform-origin:50% 100%}
.tzc-bw .tzc-cs{position:absolute;left:2%;right:2%;bottom:-7%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(30,40,0,.34),rgba(30,40,0,0))}
.tzc-bw svg.tzc-b{position:absolute;left:0;bottom:0;width:100%;height:auto;overflow:visible}
.tzc-bw .tzc-food{position:absolute}
.tzc-bw .tzc-food img{width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%;display:block;transform-origin:50% 100%}
/* No cut-out uploaded yet: the catalogue photo sits in the bowl as a round scoop. */
.tzc-bw .tzc-food.tzc-photo{display:flex;align-items:flex-end;justify-content:center}
.tzc-bw .tzc-food.tzc-photo img{object-fit:cover;object-position:50% 58%;border-radius:50% 50% 46% 46%;width:74%;height:auto;aspect-ratio:1/.8;margin:0 auto;mix-blend-mode:multiply}
.tzc-bw .tzc-front{position:absolute;left:0;bottom:0;width:100%;height:auto}
/* Photo popups: one photo fills the picture area, framed by admin (drag + zoom). */
.tzc-picture{position:absolute;inset:6px 22px 4px;border-radius:24px;overflow:hidden}
.tzc-picture img{position:absolute;left:50%;top:50%;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
/* The button's "scroll to one product" destination: a brief highlight on that card. */
.card.tzc-flash .thumb{box-shadow:0 0 0 4px #F2BF3A;transition:box-shadow .3s}
.tzc-tag{position:absolute;z-index:12;translate:-50% 0;max-width:160px;overflow:hidden;text-overflow:ellipsis;padding:5px 8px 6px;border-radius:7px;background:color-mix(in srgb,var(--tzc-tag) 82%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#24300F;font:600 11px/1 var(--tzc-body);letter-spacing:.01em;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(27,37,10,.08),0 4px 10px -8px rgba(0,0,0,.45)}
.tzc-pop .tzc-cta{position:relative;z-index:9;display:flex;align-items:center;justify-content:center;gap:8px;flex:none;width:calc(100% - 28px);margin:18px 14px 14px;padding:0 16px;height:56px;border:0;border-radius:999px;background:var(--tzc-cta);color:var(--tzc-ctaInk);font:600 16px/1 var(--tzc-body);letter-spacing:.005em;text-transform:none;cursor:pointer;box-shadow:0 12px 22px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}

/* ---------- catalogue row: Cover card ----------
   A full-width item of the open tab's .grid, after its second full row.
   min-width:0 stops the horizontal rail from widening the grid track. */
.tzc-sec{grid-column:1/-1;min-width:0;position:relative;margin:0;border-radius:22px;overflow:hidden;color:var(--tzc-ink);font-family:var(--tzc-body);line-height:normal;
  background:radial-gradient(80% 60% at 85% 0%,var(--tzc-glow),transparent 70%),linear-gradient(180deg,var(--tzc-bg2) 0%,var(--tzc-bg1) 100%)}
.tzc-sec[hidden]{display:none!important}
/* phones: 10 px from the screen edge, as approved (the catalogue's own side
   padding there is clamp(24px,5vw,60px)) */
@media (max-width:640px){.tzc-sec{margin-inline:calc(10px - clamp(24px,5vw,60px))}}
.tzc-rh{position:relative;padding:14px 16px 10px}
.tzc-kr{display:flex;align-items:center;justify-content:space-between}
.tzc-rk{display:flex;align-items:center;gap:7px;font:600 10.5px/1 var(--tzc-body);letter-spacing:.2em;text-transform:uppercase;color:var(--tzc-soft)}
.tzc-rk::before{content:"";width:14px;height:1.5px;border-radius:1px;background:currentColor;opacity:.7}
.tzc-kr i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.45);color:var(--tzc-ink);font-style:normal}
.tzc-kr i svg{width:14px;height:14px}
.tzc-rail{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:14px;padding:14px;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab}
.tzc-rail::-webkit-scrollbar{display:none}
/* Clean (approved): no header strip; a soft fade + arrow on the right edge says the row scrolls, and fades out at the end. */
.tzc-edge{position:absolute;right:0;top:0;bottom:14px;width:56px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;pointer-events:none;transition:opacity .2s;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tzc-bg1) 92%,transparent))}
.tzc-edge i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);color:var(--tzc-ink);box-shadow:0 4px 10px -6px rgba(0,0,0,.4)}
.tzc-edge svg{width:14px;height:14px}
.tzc-rail::after{content:"";flex:none;width:4px}
.tzc-rail.tzc-drag{cursor:grabbing;scroll-snap-type:none}
.tzc-cov{position:relative;flex:none;width:176px;scroll-snap-align:start;border-radius:18px;padding:16px 14px;overflow:hidden;background:#F8F6E8;color:var(--tzc-ink);display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(27,37,10,.07)}
.tzc-sec .tzc-cov h2{margin:0;padding:0;max-width:none;font:600 29px/.9 var(--tzc-serif);letter-spacing:-.03em;font-variation-settings:"SOFT" 50,"WONK" 0;color:var(--tzc-ink);outline:none;position:relative;z-index:1}
.tzc-cov h2 span{display:block}
.tzc-cov h2 .tzc-l2{font-style:italic;font-weight:480;font-variation-settings:"SOFT" 100,"WONK" 0}
.tzc-cov .tzc-rd{margin:8px 0 0;padding:0;max-width:none;font:500 12.5px/1.35 var(--tzc-body);color:var(--tzc-soft);position:relative;z-index:1;text-wrap:balance}
.tzc-cov .tzc-covart{position:absolute;right:-26px;bottom:-14px;width:150px;height:100px;pointer-events:none}
.tzc-cov .tzc-covart img{width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%;display:block;transform-origin:50% 100%}

/* product card (prices, pack, photo, stock: the live catalogue) */
.tzc-pc{position:relative;flex:none;width:150px;scroll-snap-align:start;background:#FFFFFF;border-radius:16px;padding:8px 8px 10px;display:flex;flex-direction:column;
  box-shadow:0 0 0 1px rgba(30,33,22,.07),0 6px 14px -10px rgba(30,33,22,.35)}
.tzc-im{height:112px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:#F4F6EA;margin-bottom:8px;isolation:isolate}
.tzc-im img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 58%;display:block;mix-blend-mode:multiply;filter:brightness(1.1) contrast(1.02)}
.tzc-im:not(:has(img))::before{content:"Photo\A coming soon";white-space:pre;text-align:center;font:600 9.5px/1.5 var(--tzc-body);letter-spacing:.1em;text-transform:uppercase;color:#6B6F60}
.tzc-nm{font:600 13.5px/1.25 var(--tzc-body);color:#1E2116;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 2px}
.tzc-pk{font:500 12px/1.2 var(--tzc-body);color:#6B6F60;margin-top:2px;padding:0 2px}
.tzc-pr{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:10px;padding-left:2px;min-height:36px}
.tzc-pp{font:700 15px/1 var(--tzc-display);color:#1E2116;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tzc-oosl{font:600 11px/1.2 var(--tzc-body);letter-spacing:.06em;text-transform:uppercase;color:#8C8E80}
.tzc-pc.tzc-oos .tzc-im{opacity:.45;filter:grayscale(.6)}
.tzc-pc.tzc-oos .tzc-pp{color:#9A9C8E}
/* The site's own add control (paint()/addItem()/inc()/dec() drive it), in the
   approved outline style. Each rule resets what the site's global .addwrap /
   .add / .stepper / .qty rules set. */
.tzc-sec .addwrap{position:relative;right:auto;bottom:auto;z-index:auto;display:flex;justify-content:flex-end;width:auto;height:34px;flex:none}
.tzc-sec .add{position:relative;height:34px;min-width:66px;padding:0 14px;margin:0;gap:0;border-radius:999px;border:1.5px solid #3D4A28;background:#fff;color:#3D4A28;
  font:700 12px/1 var(--tzc-body);letter-spacing:.08em;text-transform:uppercase;box-shadow:none;cursor:pointer}
.tzc-sec .add::after{content:none}
.tzc-sec .add::before{content:"";position:absolute;inset:-5px -3px}
@media (hover:hover){.tzc-sec .add:hover{background:#F3F5E8}}
.tzc-sec .stepper{width:auto;height:34px;border-radius:999px;background:#3D4A28;color:#F5F1E7;box-shadow:none;overflow:visible}
.tzc-sec .stepper button{position:relative;flex:0 0 30px;width:30px;height:34px;padding:0;border:0;border-radius:999px;background:transparent;color:#F5F1E7;font:600 18px/1 var(--tzc-body);display:grid;place-items:center;cursor:pointer}
.tzc-sec .stepper button::after{content:"";position:absolute;inset:-5px -3px}
@media (hover:hover){.tzc-sec .stepper button:hover{background:rgba(250,249,246,.12)}}
.tzc-sec .stepper .qty{flex:none;min-width:16px;height:34px;color:#F5F1E7;font:700 13.5px/1 var(--tzc-body)}