/* 2026-09-29 Products (Bucks-style, Frausto's twist): outlined title, stair-step cards, the trio panel the cards overlap */
.fxp-sec{overflow-x:clip}
.fxp-sec .fxp-title{display:flex;justify-content:center;margin:0 0 clamp(18px,2vw,28px);font:400 clamp(58px,13.4vw,176px)/.95 var(--font-display);text-transform:uppercase;text-wrap:nowrap;color:transparent;-webkit-text-stroke:clamp(1.2px,.16vw,2.4px) var(--tan);letter-spacing:0;white-space:nowrap}
.fxp-title span{display:inline-block;transform:translateY(40%);opacity:0;transition:transform .9s cubic-bezier(.34,1.3,.5,1) calc(var(--i) * 60ms),opacity .5s ease calc(var(--i) * 60ms),color .6s ease calc(.6s + var(--i) * 60ms)}
.fxp-title.is-in span{transform:none;opacity:1}
@media (hover:hover){.fxp-title span:hover{color:var(--tan);transition-delay:0s}}
.fxp-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start;margin-bottom:clamp(40px,5vw,70px)}
.fxp-intro h3{margin:0 0 8px}.fxp-intro p{margin:0 0 10px}
.fxp-row{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);align-items:start}
.fxp-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:clamp(470px,40vw,560px);padding:26px 22px 22px;border-radius:18px;
 transform:translateY(calc(var(--i) * clamp(28px,4vw,56px)));transition:transform .5s cubic-bezier(.34,1.3,.5,1),box-shadow .5s}
.fxp-card::before{content:"";position:absolute;inset:9px;border:1.5px dashed rgb(0 0 0 / .35);border-radius:11px;pointer-events:none}
.fxp-row.is-live .fxp-card{opacity:0;transform:translateY(calc(var(--i) * clamp(28px,4vw,56px) + 120px)) rotate(calc((var(--i) - 1) * 3deg))}
.fxp-row.is-live.is-in .fxp-card{opacity:1;transform:translateY(calc(var(--i) * clamp(28px,4vw,56px)));transition:transform .9s cubic-bezier(.34,1.3,.5,1) calc(var(--i) * .14s),opacity .5s ease calc(var(--i) * .14s),box-shadow .5s}
.fxp-card--tan{background:var(--tan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.11' stroke-width='1.2'%3E%3Cpath d='M20 8c3 4 3 8 0 12-3-4-3-8 0-12zM20 32c3-4 3-8 0-12-3 4-3 8 0 12zM8 20c4-3 8-3 12 0-4 3-8 3-12 0zM32 20c-4-3-8-3-12 0 4 3 8 3 12 0z'/%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E") 0 0/44px 44px;color:var(--ink)}
.fxp-card--mail{background:linear-gradient(#fffdf8,#fffdf8) padding-box,repeating-linear-gradient(135deg,var(--ink) 0 12px,#fffdf8 12px 18px,var(--tan) 18px 30px,#fffdf8 30px 36px) border-box;border:8px solid transparent;color:var(--ink)}
.fxp-card--ink{background:#000;color:var(--paper);border:2px solid rgb(var(--tan-rgb) / .6)}
.fxp-card--ink::before{border-color:rgb(var(--tan-rgb) / .4)}
.fxp-hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.fxp-hit:focus-visible{outline:3px solid var(--tan);outline-offset:4px}
.fxp-name{position:relative;margin:4px 0 0;font:400 clamp(24px,2.3vw,32px)/1.1 var(--font-display)}
.fxp-name span{display:block;font-size:.72em;margin-top:4px;text-transform:none}
.fxp-seal{position:absolute;top:-18px;right:-12px;z-index:3;width:74px;height:74px;display:grid;place-items:center;border-radius:50%;background:#000;color:var(--tan);font:600 .66rem/1.15 var(--font-body);letter-spacing:.1em;text-transform:uppercase;rotate:12deg;box-shadow:0 0 0 3px var(--tan),0 6px 12px rgb(0 0 0 / .35)}
.fxp-seal::after{content:"";position:absolute;inset:5px;border:1px dashed rgb(var(--tan-rgb) / .7);border-radius:50%}
.fxp-art{position:relative;flex:1;width:100%;display:grid;place-items:center;margin:14px 0;min-height:220px}
.fxp-pouch{position:relative;z-index:1;width:min(190px,62%);height:auto;filter:drop-shadow(0 18px 18px rgb(0 0 0 / .35));rotate:-4deg;transition:rotate .5s cubic-bezier(.34,1.56,.64,1),scale .5s cubic-bezier(.34,1.56,.64,1)}
.fxp-peek{position:absolute;z-index:0;width:min(150px,48%);height:auto;right:4%;top:18%;rotate:14deg;
 filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 6px 8px rgb(0 0 0 / .28));transition:translate .5s cubic-bezier(.34,1.56,.64,1),rotate .5s cubic-bezier(.34,1.56,.64,1)}
.fxp-peek--pot{right:auto;left:2%;top:42%;rotate:-10deg}
.fxp-pouch--ghost{filter:grayscale(1) brightness(.55);opacity:.5}
.fxp-stamp{position:absolute;z-index:2;top:50%;left:50%;translate:-50% -50%;rotate:-14deg;padding:8px 16px;border:3px solid var(--tan);border-radius:8px;color:var(--tan);font:400 clamp(24px,2.4vw,32px)/1 var(--font-display);text-transform:uppercase;background:rgb(0 0 0 / .6);box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px var(--tan)}
.fxp-meta{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;align-items:baseline;margin:0 0 14px}
.fxp-meta b{font:400 1.6rem/1 var(--font-display)}
.fxp-card--ink .fx-poz__tag{position:relative;margin-bottom:6px}
.fxp-btns{position:relative;z-index:2;display:grid;gap:10px;width:100%}
.fxp-sec .fxp-card .fxp-buy{color:#fff;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:10px;background:#000;color:#fff;border:2px solid #000;font:600 .95rem/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.fxp-card--mail .fxp-buy{--hx-sh:#C9BCAC}
.fxp-btns .fxp-add{margin:0;width:auto}
.fxp-add{min-height:46px;border-radius:10px;border:2px solid currentColor;background:transparent;color:inherit;font:600 .85rem/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background-color .25s,color .25s}
.fxp-card--tan .fxp-add:hover,.fxp-card--mail .fxp-add:hover{background:#000;color:#fff;border-color:#000}
.fxp-soon{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:10px;border:2px solid var(--tan);color:var(--tan);font:600 .9rem/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background-color .25s,color .25s}
.fxp-soon:hover{background:var(--tan);color:#000}
@media (hover:hover){
 .fxp-row.is-in .fxp-card:hover{transform:translateY(calc(var(--i) * clamp(28px,4vw,56px) - 16px));box-shadow:0 30px 40px rgb(0 0 0 / .45)}
 .fxp-card:hover .fxp-pouch{rotate:3deg;scale:1.05}
 .fxp-card:hover .fxp-peek{translate:22% -8%;rotate:24deg}.fxp-card:hover .fxp-peek--pot{translate:-22% -6%;rotate:-20deg}
}
/* the trio panel, overlapped by the bottom of the cards */
.fxp-panel{position:relative;z-index:1;margin-top:calc(-1 * clamp(80px,9vw,130px));padding:calc(clamp(80px,9vw,130px) + clamp(70px,6vw,100px)) clamp(22px,3vw,44px) clamp(28px,3vw,44px);border-radius:22px;background:rgb(0 0 0 / .45);border:1.5px solid rgb(var(--tan-rgb) / .35)}
.fxp-panel .fx-trio>div{position:relative;padding:22px 20px;border-radius:12px;border:1.5px solid rgb(var(--tan-rgb) / .45)}
.fxp-panel .fx-trio>div::before{content:"";position:absolute;inset:5px;border:1px dashed rgb(var(--tan-rgb) / .3);border-radius:8px;pointer-events:none}
@media (max-width:900px){
 .fxp-sec .fxp-title{font-size:clamp(40px,13vw,120px)}
 .fxp-intro{grid-template-columns:1fr}
 .fxp-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * clamp(24px,5vw,70px));padding:10px clamp(24px,5vw,70px) 30px;scrollbar-width:none}
 .fxp-row::-webkit-scrollbar{display:none}
 .fxp-card{flex:0 0 min(74vw,320px);scroll-snap-align:center;min-height:500px;transform:none}
 .fxp-row.is-live .fxp-card,.fxp-row.is-live.is-in .fxp-card{transform:none}
 .fxp-row.is-live .fxp-card{opacity:0;translate:40px 0;transition:opacity .5s ease calc(var(--i) * .12s),translate .7s cubic-bezier(.34,1.3,.5,1) calc(var(--i) * .12s)}
 .fxp-row.is-live.is-in .fxp-card{opacity:1;translate:0 0}
 .fxp-panel{margin-top:0;padding:clamp(24px,5vw,40px) 18px}
 /* 2026-09-29 phone breathing room: the swipe row clips anything above it, so the Best Value seal needs headroom; the trio drops one frame so its text isn't squeezed */
 .fxp-row{padding-top:30px;scroll-padding-inline:clamp(24px,5vw,70px)}
 .fxp-seal{top:-14px;right:-6px;width:66px;height:66px}
 .fxp-card{padding:24px 18px 20px}
 .fxp-panel{padding:10px 0 0;background:none;border:0}
 .fxp-panel .fx-trio{gap:16px}
 .fxp-panel .fx-trio>div{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){.fxp-title span{opacity:1;transform:none}.fxp-row.is-live .fxp-card{opacity:1}}
.fxp-card .fx-poz__tag{position:relative;display:inline-block;margin-bottom:6px;padding:5px 9px;border-radius:6px;background:var(--paper,#fff);color:var(--ink,#000);font:600 .7rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.fxp-btns .fxp-soon{font-size:.85rem}
.fxp-note{position:relative;margin:0 0 14px;font-size:.92rem;color:rgb(255 255 255 / .8)}
.fxp-kick{margin:0 0 clamp(20px,3vw,34px);text-align:center;font:600 .78rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--tan)}
/* 2026-10-02 Quinten: the info cards slide down out from behind the product cards as you scroll (products.js sets --fxd / --fxc) */
.fxp-drop .fx-trio>div{translate:0 var(--fxd,0px);clip-path:inset(var(--fxc,0px) -20px -20px -20px);opacity:1!important;transform:none!important;will-change:translate,clip-path}

/* 2026-10-02 Quinten: phones - the first product card starts centered, swipe for the others (like the recipe box): dots you can tap,
   a "Swipe for more" sign that fades once used, and a one-time nudge. Computers show all three, so none of this appears there. */
.fxp-nav,.fxp-hint{display:none}
@media (max-width:900px){
 .fxp-row{padding-inline:calc((100vw - min(74vw,320px)) / 2);scroll-padding-inline:0}
 .fxp-nav{display:flex;justify-content:center;gap:16px;margin:-8px 0 0;position:relative;z-index:3}
 .fxp-nav button{width:10px;height:10px;padding:0;border:0;border-radius:5px;background:rgb(255 255 255 / .3);cursor:pointer;transition:width .25s ease,background .25s ease;-webkit-tap-highlight-color:transparent;position:relative}
 .fxp-nav button::after{content:"";position:absolute;inset:-12px -8px} /* a thumb-sized tap area around each small dot */
 .fxp-nav button.on{width:26px;background:var(--tan)}
 .fxp-nav button:focus-visible{outline:2px solid var(--tan);outline-offset:4px}
 .fxp-sec .fxp-hint{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:calc(100% - 32px);margin:14px auto 22px;padding:10px 16px;border:1.5px solid var(--tan);border-radius:999px;background:rgb(0 0 0 / .55);color:var(--tan);font:600 .78rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;transition:opacity .5s ease,translate .5s ease}
 .fxp-hint svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:fxp-swipe 1.6s ease-in-out infinite}
 .fxp-hint i{font-style:normal;font-size:1rem;animation:fxp-swipe 1.6s ease-in-out infinite}
 .fxp-hint.is-done{opacity:0;translate:0 6px}
 .fxp-row.is-nudge .fxp-card{animation:fxp-nudge 1.1s cubic-bezier(.45,0,.2,1)}
}
@keyframes fxp-swipe{0%,100%{translate:0 0}50%{translate:-6px 0}}
@keyframes fxp-nudge{0%,100%{transform:none}45%{transform:translateX(-56px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.fxp-hint svg,.fxp-hint i,.fxp-row.is-nudge .fxp-card{animation:none}}
/* 10-02 build check 08: on phones the cards' 40px slide-in fooled the row's snap (it centered a card mid-slide, leaving it 40px off once the slide ended). Fade only on phones. */
@media (max-width:900px){.fxp-row.is-live .fxp-card,.fxp-row.is-live.is-in .fxp-card{translate:0 0}}

/* 2026-10-03 free shipping under the price: the real $5.90 rate struck through, shipping is built into the price */
.fxp-ship{position:relative;margin:-8px 0 14px;text-align:center;font:700 .8125rem/1.2 var(--font-body);text-transform:uppercase;letter-spacing:.05em}
.fxp-ship s{font-weight:500;opacity:.65;margin-right:6px;text-decoration-thickness:2px}
.fxp-free{display:inline-block;background:#B3261E;color:#fff;padding:5px 9px 4px;border-radius:6px;font-weight:700} /* 10-03 Quinten: red so free shipping pops */