/* ==========================================================================
   Pickerpunk — design system (dark zine flyer wall)
   Ported from the locked mockups. Sections: tokens, base, header/marquee,
   buttons, cards/grid, footer, shopkeeper, homepage, product, shop, woo.
   ========================================================================== */

:root{
  --wall:#17140F; --wall2:#1F1A13; --cream:#F1E7D4; --ink:#1A1611; --ctext:#ECE2CF;
  --red:#DA3B2E; --teal:#33AEA3; --amber:#E3A72C; --muted:#A99C85; --lineD:#ffffff22; --lineL:#1a161122;
  --poster:"Arial Black","Franklin Gothic Heavy","Arial Narrow Bold",sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Roboto Mono","Courier New",monospace;
  --script:"Bradley Hand","Segoe Print","Brush Script MT",cursive;
  --noise: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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
body{margin:0;background:var(--wall);color:var(--ctext);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background-image:var(--noise);opacity:.06;mix-blend-mode:overlay;pointer-events:none;z-index:9999}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;text-wrap:balance}
.kick{font-family:var(--mono);text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;color:var(--teal);margin:0 0 .5rem}

/* marquee */
.marquee{background:#0F0C08;color:var(--cream);overflow:hidden;white-space:nowrap;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;padding:10px 0;border-bottom:1px solid var(--lineD)}
.marquee span{display:inline-block;padding-left:100%;animation:pp-scroll 30s linear infinite}
.marquee b{color:var(--amber)}
@keyframes pp-scroll{to{transform:translateX(-100%)}}

/* header / nav */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--wall) 90%,transparent);backdrop-filter:blur(9px);border-bottom:1px solid var(--lineD)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{font-family:var(--poster);font-size:1.65rem;letter-spacing:-.03em;text-transform:uppercase;color:var(--cream);display:flex;align-items:center;gap:.26em}
.brand .spark{color:var(--red)}
.links{display:flex;gap:26px;font-size:.95rem}
.links a{color:var(--muted)}
.links a:hover,.links a.active,.links .current-menu-item>a{color:var(--red)}
.tools{display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:.85rem;color:var(--cream)}
.bag{border:1.5px solid var(--cream);border-radius:3px;padding:7px 13px}
.bag:hover{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:880px){.links{display:none}}

/* buttons */
.btn{display:inline-block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.09em;font-size:.84rem;background:var(--red);color:#fff;border:none;padding:14px 22px;border-radius:4px;cursor:pointer;text-align:center}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--cream);border:1.5px solid var(--cream)}
.btn.big{font-size:.95rem;padding:16px 26px}

/* breadcrumb */
.crumb{font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:22px 0 0}
.crumb a:hover{color:var(--red)}
.crumb .sep{opacity:.5;margin:0 8px}

/* flyer card */
.card{position:relative;background:var(--cream);color:var(--ink);border-radius:2px;transform:rotate(var(--rot,0));transition:transform .2s;box-shadow:6px 7px 0 rgba(0,0,0,.5)}
.card:hover{transform:rotate(0) translateY(-5px);z-index:6}
.card .tape{position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);width:64px;height:20px;background:color-mix(in srgb,var(--amber) 42%,transparent);border:1px dashed #00000033;z-index:3}
.card .frame{display:block;position:relative;aspect-ratio:1;overflow:hidden;background:#e7dcc5;border-bottom:1px solid var(--lineL)}
.card .frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .frame img{transform:scale(1.05)}
.card .only{position:absolute;top:9px;left:9px;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;background:var(--red);color:#fff;padding:3px 8px}
.card .cbody{padding:14px 14px 16px}
.card .cbody h3{font-family:var(--poster);text-transform:uppercase;font-size:.98rem;line-height:1.08;letter-spacing:-.01em;margin:.1rem 0 .35rem;color:var(--ink)}
.card .cbody h3 a{color:var(--ink)}
.card .cmeta{font-family:var(--mono);font-size:.74rem;color:#7a6f5c;margin:0 0 12px}
.card .trow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ticket{position:relative;font-family:var(--mono);font-weight:700;font-size:.96rem;background:var(--amber);color:#241a0c;padding:6px 11px 6px 18px;border-radius:2px;font-variant-numeric:tabular-nums}
.ticket .hole{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--cream)}
.card .add{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;background:transparent;border:1.5px solid var(--ink);color:var(--ink);padding:7px 11px;border-radius:3px;cursor:pointer}
.card .add:hover{background:var(--red);border-color:var(--red);color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px}
@media(max-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}

/* section heads */
.pp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:8px}
.pp-head h2{font-family:var(--poster);text-transform:uppercase;font-size:2rem;letter-spacing:-.01em;color:var(--cream)}
.pp-head .link{font-family:var(--mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
.rule{height:2px;background:repeating-linear-gradient(90deg,var(--lineD) 0 9px,transparent 9px 16px);margin:14px 0 30px}
.block{padding:46px 0}

/* footer */
footer{border-top:1px solid var(--lineD);margin-top:40px;padding:34px 0 90px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
footer .brand{font-size:1.15rem;color:var(--cream)}

/* shopkeeper */
.fab{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:10px;background:var(--red);color:#fff;border:none;border-radius:30px;padding:13px 19px 13px 14px;cursor:pointer;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.fab .fd{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-content:center;font-family:var(--poster)}
.chatpanel{position:fixed;right:20px;bottom:74px;z-index:81;width:min(346px,92vw);background:var(--cream);color:var(--ink);border-radius:8px;box-shadow:0 24px 50px -16px rgba(0,0,0,.7);overflow:hidden}
.chatpanel[hidden]{display:none}
.cp-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--lineL)}
.cp-av{width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-content:center;font-family:var(--poster);flex:none}
.cp-who{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:#7a6f5c}
.cp-who b{display:block;font-family:var(--poster);text-transform:none;font-size:1.05rem;letter-spacing:0;color:var(--ink)}
.cp-x{margin-left:auto;background:none;border:none;font-size:1.2rem;cursor:pointer;color:#7a6f5c;line-height:1}
.cp-msgs{padding:14px 16px;display:flex;flex-direction:column;gap:8px;max-height:230px;overflow-y:auto}
.bub{max-width:86%;padding:9px 12px;border-radius:11px;font-size:.92rem;line-height:1.4}
.bub.shop{background:#e7dcc5;border-bottom-left-radius:3px;align-self:flex-start}
.bub.me{background:var(--ink);color:var(--cream);border-bottom-right-radius:3px;align-self:flex-end}
.cp-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.cp-chips .chip{font-family:var(--mono);font-size:.72rem;background:transparent;border:1.5px solid var(--lineL);color:var(--ink);padding:5px 10px;border-radius:16px;cursor:pointer}
.cp-chips .chip:hover{border-color:var(--red);color:var(--red)}
.cp-in{display:flex;gap:7px;padding:0 16px 16px}
.cp-in input{flex:1;background:#faf4e8;border:1.5px solid var(--lineL);border-radius:8px;padding:10px 12px;font-family:var(--sans);font-size:.9rem;color:var(--ink)}
.cp-in input:focus{outline:2px solid var(--red);outline-offset:1px}
.cp-in button{background:var(--red);color:#fff;border:none;border-radius:8px;padding:0 15px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;cursor:pointer}

/* ===== homepage ===== */
.hero{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;padding:58px 0 56px}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;color:var(--red);display:flex;align-items:center;gap:9px;margin-bottom:16px}
.eyebrow::before{content:"\2605";color:var(--amber)}
.hero h1{font-family:var(--poster);text-transform:uppercase;font-size:clamp(2.9rem,6.2vw,5.2rem);line-height:.9;letter-spacing:-.02em;color:var(--cream)}
.hero h1 .r{color:var(--red)}
.lede{max-width:40ch;color:var(--muted);font-size:1.08rem;margin:20px 0 4px}
.lede b{color:var(--ctext);font-weight:600}
.note{margin-top:24px;position:relative;background:var(--cream);color:var(--ink);border-radius:3px;padding:18px;max-width:520px;box-shadow:7px 8px 0 rgba(0,0,0,.45);transform:rotate(-1deg)}
.note .pin{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;background:var(--red);box-shadow:0 3px 5px rgba(0,0,0,.4),inset 0 -2px 3px rgba(0,0,0,.3)}
.note-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-content:center;font-family:var(--poster);flex:none}
.who{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:#7a6f5c}
.who b{display:block;font-family:var(--poster);text-transform:none;font-size:1.12rem;letter-spacing:0;color:var(--ink)}
.livenow{margin-left:auto;font-family:var(--mono);font-size:.66rem;color:#1c7a72;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:5px}
.livenow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 11px}
.chip{font-family:var(--mono);font-size:.76rem;background:transparent;border:1.5px solid var(--lineL);color:var(--ink);padding:6px 11px;border-radius:16px;cursor:pointer}
.chip:hover{border-color:var(--red);color:var(--red)}
.btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.hero-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.season-tag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:#241a0c;background:var(--amber);padding:6px 14px;border-radius:20px;box-shadow:5px 5px 0 rgba(0,0,0,.4)}
.hero-collage{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;padding:10px 0}
.hero-collage .card{flex:0 0 auto;width:min(174px,42vw)}
.hero-collage .card:nth-child(1){transform:rotate(-4deg) translateY(-18px)}
.hero-collage .card:nth-child(2){transform:rotate(2.5deg) translateY(18px)}
.hero-collage .card:nth-child(3){transform:rotate(-2deg) translateY(-6px)}
.hero-collage .card:hover{transform:rotate(0) translateY(-10px);z-index:9}
/* Before hero.js trims the seasonal pool to 3, only show the first three (no flash of the pool). */
.hero-collage .card:nth-child(n+4){display:none}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:30px;padding:36px 0}.hero-collage{gap:16px}.hero-collage .card{width:42vw}}

.disco-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.disco-cta p{font-family:var(--mono);font-size:.82rem;color:var(--muted);margin:0}
.catgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:1000px){.catgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.catgrid{grid-template-columns:repeat(2,1fr)}}
.crate{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1.5px solid var(--lineD);background:var(--wall2);padding:12px 15px;border-radius:4px;font-family:var(--poster);text-transform:uppercase;font-size:.92rem;letter-spacing:-.01em;color:var(--cream);transition:all .2s;white-space:nowrap;overflow:hidden}
.crate>span:first-child{overflow:hidden;text-overflow:ellipsis}
.crate:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.cn{font-family:var(--mono);font-size:.8rem;color:var(--teal);font-variant-numeric:tabular-nums;flex:none}

.hang{background:var(--cream);color:var(--ink);border-radius:8px;padding:44px;margin:14px 0;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;position:relative;overflow:hidden;box-shadow:8px 9px 0 rgba(0,0,0,.4)}
.hang h2{grid-column:1/-1;font-family:var(--poster);text-transform:uppercase;font-size:1.75rem;color:var(--ink)}
.hang .pt .kick{color:var(--red)}
.hang .pt p{color:#5a5140;font-size:.98rem;margin:.3rem 0 0}
@media(max-width:720px){.hang{grid-template-columns:1fr;padding:30px}}

.signup{text-align:center;padding:60px 0 46px}
.signup .sc{font-family:var(--script);color:var(--amber);font-size:1.8rem}
.signup h2{font-family:var(--poster);text-transform:uppercase;font-size:2.1rem;color:var(--cream);margin:6px 0 8px}
.signup p{color:var(--muted);max-width:46ch;margin:0 auto 22px}
.form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.form input{flex:1;min-width:220px;background:var(--wall2);border:1.5px solid var(--lineD);color:var(--cream);padding:14px 16px;border-radius:6px;font-family:var(--mono);font-size:.9rem}
.form input:focus{outline:2px solid var(--red);outline-offset:1px}

/* ===== product page ===== */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;padding:26px 0 20px}
@media(max-width:860px){.pdp{grid-template-columns:1fr;gap:28px}}
.gallery{position:sticky;top:88px;align-self:start}
.gmain{position:relative;background:var(--cream);border-radius:3px;box-shadow:7px 8px 0 rgba(0,0,0,.5);transform:rotate(-1deg);overflow:hidden}
.gmain img{width:100%;aspect-ratio:1;object-fit:cover}
.gmain .only{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;background:var(--red);color:#fff;padding:4px 10px}
.thumbs{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.thumbs button{width:64px;height:64px;padding:0;border:2px solid var(--lineD);border-radius:3px;overflow:hidden;cursor:pointer;background:none}
.thumbs button.on{border-color:var(--red)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pinfo h1{font-family:var(--poster);text-transform:uppercase;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:.98;letter-spacing:-.02em;color:var(--cream);margin:.2rem 0 .6rem}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.badge{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:16px;border:1.5px solid var(--lineD);color:var(--ctext)}
.badge.only{background:var(--red);border-color:var(--red);color:#fff}
.badge.szn{background:var(--amber);border-color:var(--amber);color:#241a0c}
.priceline{display:flex;align-items:center;gap:14px;margin:6px 0 22px}
.bigticket{position:relative;font-family:var(--mono);font-weight:700;font-size:1.7rem;background:var(--amber);color:#241a0c;padding:10px 16px 10px 26px;border-radius:3px;font-variant-numeric:tabular-nums;box-shadow:5px 6px 0 rgba(0,0,0,.4)}
.bigticket .hole{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--wall)}
.buys{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.buys .btn{flex:1;min-width:150px}
.trust{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:16px 0 26px;padding:14px 0;border-top:1px solid var(--lineD);border-bottom:1px solid var(--lineD)}
.trust b{color:var(--teal)}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--lineD);border:1px solid var(--lineD);border-radius:4px;overflow:hidden;margin-bottom:24px}
.specs div{background:var(--wall2);padding:11px 14px;display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.78rem}
.specs dt{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.68rem}
.specs dd{margin:0;color:var(--ctext);text-align:right}
.desc h2{font-family:var(--poster);text-transform:uppercase;font-size:1.1rem;color:var(--cream);margin:0 0 8px}
/* eBay descriptions carry arbitrary inline colours/backgrounds — force them readable on the dark wall. */
.desc,.desc p,.desc div,.desc span,.desc li,.desc td,.desc strong,.desc b{color:var(--ctext) !important;max-width:100%}
.desc *{background:transparent !important;border-color:var(--lineD) !important}
.desc p,.desc div{margin:0 0 10px}

/* ===== shop / category ===== */
.shophead{padding:22px 0 6px}
.shophead h1{font-family:var(--poster);text-transform:uppercase;font-size:clamp(2.4rem,5vw,3.6rem);line-height:.95;letter-spacing:-.02em;color:var(--cream)}
.shophead p{color:var(--muted);max-width:60ch;margin:12px 0 0}
.shophead .count{color:var(--amber);font-family:var(--mono);font-weight:700}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:22px 0 6px;padding:14px 0;border-top:1px solid var(--lineD);border-bottom:1px solid var(--lineD)}
.results{font-family:var(--mono);font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sortwrap{display:flex;align-items:center;gap:10px}
.sortwrap label{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
select{background:var(--wall2);color:var(--ctext);border:1.5px solid var(--lineD);border-radius:4px;padding:9px 12px;font-family:var(--mono);font-size:.8rem;cursor:pointer}
.filters{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 30px}
.filt{font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;background:var(--wall2);border:1.5px solid var(--lineD);color:var(--ctext);padding:8px 14px;border-radius:20px;cursor:pointer;transition:all .18s}
.filt:hover,.filt.on{border-color:var(--red);color:var(--red)}
.filt.on{background:color-mix(in srgb,var(--red) 14%,var(--wall2))}
.loadmore{display:flex;justify-content:center;padding:44px 0 10px}

/* ===== WooCommerce baseline (custom templates carry most of it) ===== */
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:var(--wall2);border-left:3px solid var(--amber);color:var(--ctext);padding:14px 18px;border-radius:4px;font-family:var(--mono);font-size:.85rem;list-style:none;margin:0 0 20px}
.woocommerce-error{border-left-color:var(--red)}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{background:var(--red);color:#fff;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;border-radius:4px;padding:12px 20px;border:none}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--red);filter:brightness(1.08)}
.woocommerce .price{font-family:var(--mono);font-variant-numeric:tabular-nums}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.select2-container .select2-selection{background:var(--wall2);color:var(--ctext);border:1.5px solid var(--lineD);border-radius:4px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}