/* Stackt · Neo-Brutalist Gumroad style · vanilla CSS (Hostinger-ready) */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,900,700,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:#FDFBF7;color:#111;-webkit-font-smoothing:antialiased;line-height:1.5;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
::selection{background:#FDE047;color:#111;}

.font-display{font-family:'Cabinet Grotesk','IBM Plex Sans',sans-serif;letter-spacing:-0.01em;}
.uppercase{text-transform:uppercase;}
.container{max-width:1280px;margin:0 auto;padding:0 1rem;}
@media(min-width:768px){.container{padding:0 2rem;}}
.section{padding:3rem 0;}
@media(min-width:768px){.section{padding:5rem 0;}}
.hidden{display:none;}
@media(min-width:768px){.md-flex{display:flex;}.md-hidden{display:none;}}
@media(min-width:1024px){.lg-flex{display:flex;}.lg-hidden{display:none;}.lg-block{display:block;}}

.brut{background:#fff;border:2px solid #111;box-shadow:6px 6px 0 #111;border-radius:0;}
.brut-sm{border:2px solid #111;box-shadow:4px 4px 0 #111;border-radius:0;}
.brut-lg{border:2px solid #111;box-shadow:10px 10px 0 #111;border-radius:0;}
.brut-hover{transition:transform 120ms ease,box-shadow 120ms ease;}
.brut-hover:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 #111;}

.btn{display:inline-flex;align-items:center;gap:.5rem;background:#A7E4C0;color:#111;border:2px solid #111;
    box-shadow:4px 4px 0 #111;padding:.7rem 1.2rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
    transition:transform 100ms ease,box-shadow 100ms ease,background 120ms ease;text-decoration:none;line-height:1;}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #111;}
.btn:active{transform:translate(4px,4px);box-shadow:none;}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn.alt{background:#fff;}
.btn.alt:hover{background:#FDE047;}
.btn.pink{background:#FFB8D1;} .btn.violet{background:#C4B5FD;} .btn.yellow{background:#FDE047;}
.btn.dark{background:#111;color:#fff;} .btn.dark:hover{background:#FDE047;color:#111;}
.btn.sm{padding:.45rem .7rem;font-size:.8rem;}
.btn.block{width:100%;justify-content:center;}

.input{width:100%;background:#fff;color:#111;border:2px solid #111;box-shadow:4px 4px 0 #111;border-radius:0;
    padding:.7rem 1rem;font:500 1rem/1.3 'IBM Plex Sans',sans-serif;
    transition:transform 100ms ease,box-shadow 100ms ease;}
.input:focus{outline:none;transform:translate(2px,2px);box-shadow:2px 2px 0 #111;}

.badge{display:inline-flex;align-items:center;gap:.25rem;background:#C4B5FD;color:#111;border:2px solid #111;
    padding:.15rem .55rem;font-size:.7rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;}

.label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;}

/* Header */
.hdr{position:sticky;top:0;z-index:40;background:#FDFBF7;border-bottom:2px solid #111;}
.hdr-row{display:flex;align-items:center;gap:1rem;padding:.9rem 0;}
.logo{display:inline-flex;align-items:center;gap:.5rem;}
.logo-tile{width:36px;height:36px;display:grid;place-items:center;background:#FDE047;border:2px solid #111;box-shadow:3px 3px 0 #111;font-weight:900;}
.logo-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:900;text-transform:uppercase;font-size:1.4rem;letter-spacing:-0.02em;}
.nav{display:none;gap:.25rem;margin-left:1rem;}
@media(min-width:1024px){.nav{display:flex;}}
.nav a{padding:.4rem .75rem;font-family:'Cabinet Grotesk',sans-serif;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;border:2px solid transparent;}
.nav a.active{background:#FDE047;border-color:#111;}
.nav a:hover:not(.active){background:rgba(253,224,71,.35);}

.search-wrap{position:relative;display:none;flex:1;max-width:420px;margin-left:.5rem;}
@media(min-width:768px){.search-wrap{display:block;}}
.search-wrap input{padding-left:2.1rem;padding-top:.55rem;padding-bottom:.55rem;}
.search-icon{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.7;}

.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;}
.icon-btn{position:relative;width:40px;height:40px;display:grid;place-items:center;background:#fff;border:2px solid #111;box-shadow:3px 3px 0 #111;}
.icon-btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 #111;}
.cart-count{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 4px;display:grid;place-items:center;background:#FFB8D1;border:2px solid #111;font-size:.7rem;font-weight:900;}
.user-chip{display:none;align-items:center;gap:.35rem;padding:.45rem .7rem;background:#A7E4C0;border:2px solid #111;box-shadow:3px 3px 0 #111;font-family:'Cabinet Grotesk',sans-serif;font-weight:800;text-transform:uppercase;font-size:.72rem;}
@media(min-width:768px){.user-chip{display:inline-flex;}}

.mobile-menu-btn{display:grid;place-items:center;}
@media(min-width:1024px){.mobile-menu-btn{display:none;}}
.mobile-menu{display:none;border-top:2px solid #111;background:#FDFBF7;padding:1rem;}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block;padding:.5rem .75rem;font-family:'Cabinet Grotesk',sans-serif;font-weight:800;text-transform:uppercase;}
.mobile-menu a.active{background:#FDE047;border:2px solid #111;}

/* Hero */
.hero{background-image:linear-gradient(#1110 1px,transparent 1px),linear-gradient(90deg,#1110 1px,transparent 1px);background-size:32px 32px;border-bottom:2px solid #111;}
.hero-row{display:grid;gap:2.5rem;padding:4rem 0;}
@media(min-width:1024px){.hero-row{grid-template-columns:7fr 5fr;padding:6rem 0;}}
.hero h1{font-family:'Cabinet Grotesk',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(2.8rem,6vw,5rem);line-height:.95;letter-spacing:-0.03em;margin:0;}
.hero h1 span.chip{display:inline-block;padding:0 .3em;border:2px solid #111;}
.hero h1 .chip.yellow{background:#FDE047;} .hero h1 .chip.pink{background:#FFB8D1;}
.hero p{font-size:1.1rem;max-width:560px;margin-top:1.3rem;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;position:relative;}
.hero-card{background:#fff;border:2px solid #111;box-shadow:6px 6px 0 #111;padding:.7rem;transition:transform 120ms,box-shadow 120ms;}
.hero-card:nth-child(even){transform:translateY(1.5rem);}
.hero-card:hover{transform:translate(-2px,-2px) translateY(0);box-shadow:10px 10px 0 #111;}
.hero-card:nth-child(even):hover{transform:translate(-2px,-2px) translateY(1.5rem - .5rem);}
.hero-card .ph-tile{aspect-ratio:1/1;border:2px solid #111;margin-bottom:.5rem;overflow:hidden;position:relative;}
.hero-card .t{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;text-transform:uppercase;font-size:.78rem;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hero-card .p{font-weight:900;margin-top:.25rem;}

.hero-bubble{position:absolute;top:-1rem;left:-1rem;width:80px;height:80px;display:grid;place-items:center;background:#A7E4C0;border:2px solid #111;box-shadow:6px 6px 0 #111;transform:rotate(-8deg);text-align:center;font-family:'Cabinet Grotesk',sans-serif;font-weight:900;text-transform:uppercase;font-size:.7rem;line-height:1.1;padding:.5rem;}
@media(max-width:767px){.hero-bubble{display:none;}}

/* Marquee */
.marquee-wrap{background:#111;color:#FDFBF7;border-bottom:2px solid #111;overflow:hidden;padding:.9rem 0;}
.marquee{display:flex;gap:3rem;white-space:nowrap;animation:marquee 30s linear infinite;font-family:'Cabinet Grotesk',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:1.2rem;}
.marquee span{padding:0 1rem;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Grids */
.grid-cats{display:grid;grid-template-columns:1fr;gap:1.2rem;}
@media(min-width:640px){.grid-cats{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.grid-cats{grid-template-columns:repeat(4,1fr);}}
.cat-tile{display:block;padding:1.5rem;border:2px solid #111;box-shadow:6px 6px 0 #111;transition:transform 120ms,box-shadow 120ms;}
.cat-tile:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 #111;}
.cat-tile h3{font-family:'Cabinet Grotesk',sans-serif;font-weight:900;text-transform:uppercase;font-size:1.2rem;margin:0 0 .5rem 0;}
.cat-tile p{margin:0;font-size:.9rem;}

.grid-products{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media(min-width:640px){.grid-products{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.grid-products{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1280px){.grid-products{grid-template-columns:repeat(4,1fr);}}

/* Product card */
.pcard{background:#fff;border:2px solid #111;box-shadow:6px 6px 0 #111;display:flex;flex-direction:column;transition:transform 120ms,box-shadow 120ms;}
.pcard:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 #111;}
.pcard-img{position:relative;aspect-ratio:4/3;border-bottom:2px solid #111;overflow:hidden;}
.pcard-img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform 400ms;}
.pcard:hover .pcard-img img{transform:scale(1.04);}
.pcard-img .badge{position:absolute;top:10px;left:10px;background:#fff;}
.ph-initials{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:.5rem;}
.ph-initials .big{font-family:'Cabinet Grotesk',sans-serif;font-weight:900;font-size:clamp(2rem,6vw,3.5rem);line-height:.9;}
.ph-initials .sub{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;text-transform:uppercase;font-size:.7rem;letter-spacing:.15em;opacity:.75;margin-top:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pcard-body{padding:1rem;display:flex;flex-direction:column;flex:1;}
.pcard-meta{display:flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:700;color:#444;}
.pcard-title{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;text-transform:uppercase;font-size:1rem;margin:.5rem 0 .5rem 0;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pcard-desc{font-size:.9rem;color:#444;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pcard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;}
.price,.money-text{font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:900;}
.price{font-size:1.6rem;}

/* Footer */
.ftr{background:#111;color:#FDFBF7;border-top:2px solid #111;margin-top:4rem;}
.ftr-grid{display:grid;grid-template-columns:1fr;gap:2rem;padding:3rem 0;}
@media(min-width:768px){.ftr-grid{grid-template-columns:repeat(4,1fr);}}
.ftr h4{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;text-transform:uppercase;color:#FDE047;font-size:.8rem;letter-spacing:.15em;margin:0 0 .75rem 0;}
.ftr ul{list-style:none;padding:0;margin:0;}
.ftr ul li{margin:.4rem 0;font-size:.9rem;}
.ftr ul li a:hover{text-decoration:underline;}
.ftr-bottom{border-top:2px solid rgba(253,224,71,.25);padding:1rem 0;font-size:.75rem;color:rgba(255,255,255,.65);display:flex;flex-direction:column;gap:.5rem;}
@media(min-width:768px){.ftr-bottom{flex-direction:row;justify-content:space-between;}}

/* Page title / headings */
.page-title{font-family:'Cabinet Grotesk',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(2.2rem,4vw,3.2rem);letter-spacing:-0.03em;margin:.5rem 0 1rem 0;}
.page-sub{color:#222;max-width:640px;}

/* Cart drawer */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:none;}
.drawer-backdrop.open{display:block;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:440px;background:#FDFBF7;border-left:2px solid #111;box-shadow:-8px 0 0 #111;display:flex;flex-direction:column;z-index:51;transform:translateX(100%);transition:transform 200ms ease;}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:2px solid #111;}
.drawer-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;}
.drawer-line{display:flex;gap:.75rem;background:#fff;border:2px solid #111;box-shadow:4px 4px 0 #111;padding:.6rem;}
.drawer-line .thumb{width:56px;height:56px;border:2px solid #111;flex-shrink:0;overflow:hidden;position:relative;}
.drawer-line .thumb img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;}
.drawer-line .t{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;text-transform:uppercase;font-size:.78rem;line-height:1.2;}
.qty{display:inline-flex;align-items:center;gap:.15rem;}
.qty button{width:26px;height:26px;display:grid;place-items:center;background:#fff;border:2px solid #111;}
.drawer-foot{background:#fff;border-top:2px solid #111;padding:1rem;display:grid;gap:.6rem;}
.row-between{display:flex;justify-content:space-between;align-items:center;}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
@media(min-width:640px){.form-grid.cols2{grid-template-columns:1fr 1fr;}}
.form-grid .span-2{grid-column:1/-1;}
.alert{background:#FFB8D1;border:2px solid #111;box-shadow:3px 3px 0 #111;padding:.7rem 1rem;font-size:.9rem;}
.alert.ok{background:#A7E4C0;}
.alert.warn{background:#FDE047;}

/* Shop layout */
.shop-row{display:grid;grid-template-columns:1fr;gap:2rem;}
@media(min-width:1024px){.shop-row{grid-template-columns:260px 1fr;}}
.filter{background:#fff;border:2px solid #111;box-shadow:6px 6px 0 #111;padding:1.25rem;position:sticky;top:90px;}
.filter h3{font-family:'Cabinet Grotesk',sans-serif;font-weight:900;text-transform:uppercase;margin:0 0 1rem 0;font-size:.95rem;}
.filter .pill{display:block;width:100%;text-align:left;padding:.5rem .7rem;font-size:.9rem;border:2px solid transparent;background:transparent;}
.filter .pill.active{border-color:#111;}
.filter .pill.active.all{background:#FDE047;}
.filter .pill:hover:not(.active){background:rgba(253,224,71,.35);}

.flex-between{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;}

/* Checkout & order */
.checkout-grid{display:grid;grid-template-columns:1fr;gap:2rem;}
@media(min-width:1024px){.checkout-grid{grid-template-columns:7fr 5fr;}}

.bg-grid{background-image:linear-gradient(#1110 1px,transparent 1px),linear-gradient(90deg,#1110 1px,transparent 1px);background-size:32px 32px;}
.notice{margin-top:1.5rem;background:#FDE047;border:2px solid #111;box-shadow:4px 4px 0 #111;padding:.85rem 1rem;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;}

.text-xs{font-size:.72rem;} .text-sm{font-size:.875rem;} .text-lg{font-size:1.1rem;} .text-xl{font-size:1.25rem;} .text-2xl{font-size:1.5rem;}
.mt-1{margin-top:.25rem;} .mt-2{margin-top:.5rem;} .mt-3{margin-top:.75rem;} .mt-4{margin-top:1rem;} .mt-6{margin-top:1.5rem;} .mt-8{margin-top:2rem;}
.mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:.75rem;} .mb-4{margin-bottom:1rem;} .mb-6{margin-bottom:1.5rem;}
.py-3{padding-top:.75rem;padding-bottom:.75rem;} .p-6{padding:1.5rem;} .p-8{padding:2rem;}
.flex{display:flex;} .gap-2{gap:.5rem;} .gap-3{gap:.75rem;} .gap-4{gap:1rem;}
.items-center{align-items:center;} .justify-between{justify-content:space-between;}
.bold{font-weight:700;} .bolder{font-weight:900;}
.muted{color:#444;}
.sep{border-top:2px solid #111;margin:.75rem 0;}

/* Toasts */
#toast-root{position:fixed;top:1rem;right:1rem;z-index:100;display:flex;flex-direction:column;gap:.5rem;}
.toast{background:#fff;border:2px solid #111;box-shadow:4px 4px 0 #111;padding:.7rem 1rem;font-weight:700;display:flex;gap:.5rem;align-items:center;max-width:340px;animation:toastIn 150ms ease-out;}
.toast.ok{background:#A7E4C0;} .toast.err{background:#FFB8D1;} .toast.warn{background:#FDE047;}
@keyframes toastIn{from{transform:translateY(-8px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* Utilities */
.hide-sm{display:none;}
@media(min-width:768px){.hide-sm{display:initial;}}
.sticky-24{position:sticky;top:5.5rem;}