/* Shared styles for the generated product + category pages (same look as the main shop) */
@font-face{font-family:'GothamK'; font-weight:200; src:local('Gotham Extra Light'), local('Gotham-ExtraLight');}
@font-face{font-family:'GothamK'; font-weight:300; src:local('Gotham Light'), local('Gotham-Light');}
@font-face{font-family:'GothamK'; font-weight:400; src:local('Gotham Book'), local('Gotham-Book');}
@font-face{font-family:'GothamK'; font-weight:500; src:local('Gotham Medium'), local('Gotham-Medium');}
@font-face{font-family:'GothamK'; font-weight:600; src:local('Gotham Bold'), local('Gotham-Bold');}
:root{--ink:#1D1D1F; --muted:#6E6E73; --line:#D2D2D7; --hair:#E8E8ED; --tile:#F5F5F7; --accent:#513951; --ok:#1E8E5A; --warn:#C0392B;
  --font:'GothamK','Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;}
*{box-sizing:border-box; margin:0; padding:0;}
html{overflow-x:hidden;}
body{font-family:var(--font); font-weight:300; color:var(--ink); background:#fff; line-height:1.5; letter-spacing:-.003em; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
button{font-family:var(--font); font-weight:300; cursor:pointer;}
h1,h2,h3{font-weight:500;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

/* header */
header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.8); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--hair);}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:11px; padding-bottom:11px;}
.logo{font-weight:500; font-size:17px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; flex-shrink:0;}
.logo img{width:24px; height:24px; object-fit:contain;}
.nav-right{display:flex; align-items:center; gap:4px;}
.nav-cta{display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:980px; font-size:13px; white-space:nowrap; transition:background .15s;}
.nav-cta:hover{background:var(--tile);}
.nav-cta b{font-weight:400;}

.crumbs{font-size:13px; color:var(--muted); padding:22px 0 6px;}
.crumbs a:hover{color:var(--ink); text-decoration:underline;}
.crumbs span{margin:0 8px; opacity:.6;}

/* product page */
.product{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px; padding:16px 0 56px; align-items:start;}
.gallery-main{aspect-ratio:1/1; border:1px solid var(--hair); border-radius:24px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.gallery-main img{width:100%; height:100%; object-fit:contain;}
.thumbs{display:flex; gap:10px; margin-top:12px; overflow-x:auto; scrollbar-width:none;}
.thumbs::-webkit-scrollbar{display:none;}
.thumb{width:70px; height:70px; border:1px solid var(--hair); border-radius:14px; background:#fff; padding:0; overflow:hidden; flex-shrink:0;}
.thumb.active{border-color:var(--ink);}
.thumb img{width:100%; height:100%; object-fit:contain; display:block;}
.brand{font-size:12px; font-weight:400; color:var(--muted); text-transform:uppercase; letter-spacing:.09em;}
.product h1{font-size:34px; line-height:1.15; letter-spacing:-.02em; margin:8px 0 18px;}
.price-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.price{font-size:32px; font-weight:600; letter-spacing:-.015em;}
.price-old{font-size:18px; color:var(--muted); text-decoration:line-through;}
.stock{font-size:13.5px; margin-top:8px; display:flex; align-items:center; gap:7px; color:var(--muted);}
.stock::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--ok);}
.stock.out::before{background:var(--warn);}
.actions{display:flex; flex-direction:column; gap:10px; margin:26px 0;}
.btn{height:52px; border-radius:980px; border:none; font-size:15px; font-weight:400; display:flex; align-items:center; justify-content:center; gap:9px; transition:background .15s, transform .1s;}
.btn:active{transform:scale(.99);}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:#3a3a3d;}
.btn-primary.added{background:var(--ok);}
.btn-wa{background:#25D366; color:#fff;}
.btn-wa:hover{filter:brightness(.95);}
.btn.disabled{background:transparent; border:1px solid var(--line); color:var(--muted); pointer-events:none;}
.viewcart{display:none; text-align:center; font-size:14px; color:var(--accent); text-decoration:underline;}
.viewcart.show{display:block;}
.perks{list-style:none; border-top:1px solid var(--hair); padding-top:18px; display:grid; gap:9px; font-size:13.5px; color:var(--muted);}
.perks b{color:var(--ink); font-weight:400;}
.details{border-top:1px solid var(--hair); padding:44px 0 56px; max-width:780px;}
.details h2{font-size:24px; letter-spacing:-.015em; margin-bottom:18px;}
.desc{white-space:pre-line; font-size:15px; font-weight:400; color:#3d3d41; line-height:1.75;}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:26px;}
.chip{font-size:12.5px; background:var(--tile); padding:6px 14px; border-radius:980px; color:var(--ink);}
a.chip:hover{background:#ebebef;}

/* category page */
.cat-head{padding:18px 0 8px; max-width:780px;}
.cat-head h1{font-size:42px; line-height:1.1; letter-spacing:-.025em; margin-bottom:14px;}
.cat-head p{font-size:16px; color:var(--muted); line-height:1.6;}
.jump{margin:22px 0 4px;}
.cat-section{padding:34px 0 8px; scroll-margin-top:80px;}
.cat-section h2{font-size:26px; letter-spacing:-.02em; margin-bottom:20px;}
.related{padding:8px 0 64px;}
.related h2{font-size:24px; letter-spacing:-.015em; margin-bottom:20px;}

/* product cards (category page + related) */
.pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-bottom:20px;}
.pcard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--hair); border-radius:20px; padding:20px 18px 18px; transition:border-color .2s;}
.pcard:hover{border-color:#b9b9c0;}
.pimg{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; margin-bottom:16px; background:#fff;}
.pimg img{width:100%; height:100%; object-fit:contain;}
.pimg .noimg{font-size:48px; opacity:.5;}
.pbrand{font-size:11px; font-weight:400; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; margin-bottom:5px;}
.pcard h3{font-size:15.5px; line-height:1.3; letter-spacing:-.01em; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.pfoot{margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.pprice{display:flex; align-items:baseline; gap:7px;}
.pprice b{font-size:18px; font-weight:600; letter-spacing:-.01em;}
.pprice s{font-size:12.5px; color:var(--muted);}
.pstock{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px;}
.pstock::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--ok);}
.pstock.out::before{background:var(--warn);}

/* footer */
footer{border-top:1px solid var(--hair); padding:40px 0 48px; text-align:center; font-size:12.5px; color:var(--muted); line-height:1.8;}
footer a{color:var(--ink); text-decoration:underline;}
.foot-cats{margin-bottom:14px; font-size:13px;}
.foot-cats a{margin:0 9px; text-decoration:none; color:var(--ink); white-space:nowrap;}
.foot-cats a:hover{text-decoration:underline;}
.toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 22px; border-radius:980px; font-size:13.5px; z-index:200; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width:1000px){ .pgrid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:360px){ .logo{font-size:14px; gap:6px;} .nav-cta{padding:8px 6px;} header .wrap{padding-left:16px; padding-right:16px;} .wrap{padding-left:16px; padding-right:16px;} }
@media (max-width:820px){
  .product{grid-template-columns:minmax(0,1fr); gap:26px;}
  .product > div{min-width:0;}
  .product h1{font-size:28px;} .price{font-size:28px;}
  .cat-head h1{font-size:32px;}
  .nav-cta span{display:none;} .nav-cta{padding:8px 9px;}
  .pgrid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .pcard{padding:14px 12px 14px; border-radius:16px;}
  .pprice b{font-size:16px;}
}