/* ===========================================================================
   SMAPPY — SITE 1 SKIN (design only)
   Loaded AFTER each page's own styles. Changes appearance only: colours, type,
   borders, radii, shadows, buttons, pills. No markup, content or behaviour.
   =========================================================================== */
:root{
  --bg:oklch(.968 .018 98); --card:oklch(.99 .008 98); --fg:oklch(.27 .045 175);
  --forest:oklch(.3 .055 172); --forest-fg:oklch(.96 .025 98); --sun:oklch(.85 .17 88);
  --sec:oklch(.935 .02 120); --mut:oklch(.5 .02 175); --bd:oklch(.87 .02 110); --coral:oklch(.72 .16 35); --mint:oklch(.88 .08 160);
  --pop:0 6px 0 0 var(--forest); --soft:0 20px 60px -25px color-mix(in oklab,var(--forest) 45%,transparent);
  --disp:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --green:var(--forest); --yellow:var(--sun); --cream:var(--bg); --ink:var(--fg); --muted:var(--mut); --line:var(--bd);
}
body{background:var(--bg)!important;color:var(--fg)!important;font-family:"Manrope",ui-sans-serif,system-ui,sans-serif!important}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.035em;font-weight:800;color:var(--forest)}
.app-shell{max-width:1440px;background:transparent!important;box-shadow:none!important}

/* ---- header: floating pill ---- */
.topbar{margin:16px 24px 0;height:68px;padding:0 14px 0 20px;border:2px solid var(--forest)!important;border-radius:999px;background:var(--card)!important;box-shadow:none;top:12px;gap:14px;grid-template-columns:150px minmax(240px,1fr) 190px 46px 112px}
.brand img{width:130px}
.topbar .search{height:44px;border:2px solid var(--forest)!important;border-radius:999px;background:var(--bg)!important;box-shadow:none!important;color:var(--mut)}
.topbar .search:hover{background:var(--sec)!important}
.topbar .location{background:var(--sec)!important;border-radius:999px;padding:8px 14px!important;font-weight:700}
.topbar .location small{color:var(--mut)}
.topbar .cart{width:44px;height:44px;border:2px solid var(--forest);border-radius:50%;display:grid;place-items:center;font-size:20px}
.topbar .cart:hover{background:var(--sun)}
.topbar .cart i{background:var(--coral)!important;color:var(--forest-fg)!important;right:-6px;top:-8px;font-family:var(--disp)!important;font-weight:800}
.topbar .signup{height:46px;background:var(--sun)!important;color:var(--fg)!important;font-family:var(--disp);font-weight:800;border-radius:999px;border:0}
.topbar .signup:hover{background:var(--forest)!important;color:var(--forest-fg)!important}

/* ---- category bar: pill links ---- */
.categories{display:flex!important;gap:10px;overflow-x:auto;scrollbar-width:none;border:0!important;background:transparent!important;padding:18px 28px 6px;height:auto}
.categories::-webkit-scrollbar{display:none}
.categories a{flex:0 0 auto;flex-direction:row!important;gap:9px!important;border:2px solid var(--forest)!important;border-radius:999px;background:var(--card);padding:9px 18px;font-size:16px!important;color:var(--forest)}
.categories a:hover{background:var(--sun);transform:translateY(-2px)}
.categories b{font-family:var(--disp);font-size:12.5px!important;letter-spacing:.12em!important;font-weight:800}

/* ---- eyebrow, hero, headings ---- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--forest);background:var(--card);border-radius:999px;padding:6px 16px;font-family:var(--disp);font-size:12px!important;font-weight:800;letter-spacing:.18em!important;color:var(--forest)!important;text-transform:uppercase}
.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral)}
.hero{background:transparent!important;min-height:480px;gap:24px;padding:24px 0}
.hero h1,.page-hero h1{font-family:var(--disp)!important;font-weight:800;letter-spacing:-.045em!important;line-height:.95;color:var(--forest);font-size:clamp(44px,7.4vw,96px)!important}
.hero h1 em,.hero h1 span{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--forest)}
.lead,.page-hero p{color:var(--mut)!important;font-size:clamp(16px,1.6vw,19px)!important;line-height:1.55}
.hero-art{border:2px solid var(--forest);border-radius:2.5rem;margin:12px 40px 24px 0;box-shadow:16px 16px 0 var(--sun);transform:rotate(1.2deg)}
.hero-art:before{display:none!important}
.chips a,.tabs button{border:2px solid var(--bd)!important;background:var(--card)!important;border-radius:999px!important;padding:9px 20px!important;font-family:var(--disp)!important;font-weight:700!important;font-size:14px!important;color:var(--fg)!important;box-shadow:none!important}
.chips a:hover,.tabs button:hover{border-color:var(--forest)!important;background:var(--card)!important;transform:none}
.tabs button.active{background:var(--forest)!important;border-color:var(--forest)!important;color:var(--forest-fg)!important}

/* ---- page shell ---- */
.page-main{padding-top:28px}
.page-hero{background:transparent!important;border:0!important;box-shadow:none!important}
.section-head h2,.section h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em}
.section-head a{font-family:var(--disp);font-weight:800;color:var(--forest);text-decoration:underline;text-underline-offset:4px}

/* ---- buttons ---- */
.btn{border:2px solid var(--forest)!important;border-radius:999px!important;font-family:var(--disp)!important;font-weight:800!important;padding:13px 26px!important;box-shadow:none!important}
.btn-primary{background:var(--forest)!important;color:var(--forest-fg)!important}
.btn-primary:hover{background:var(--sun)!important;color:var(--fg)!important;transform:translateY(-2px)}
.btn-yellow{background:var(--sun)!important;color:var(--fg)!important}
.btn-yellow:hover{background:var(--forest)!important;color:var(--forest-fg)!important;transform:translateY(-2px)}
.btn-ghost{background:transparent!important;color:var(--forest)!important}
.btn-ghost:hover{background:var(--sec)!important}

/* ---- cards ---- */
.card,.order-card,.creator-card,.reel-card,.row,.summary,.promo,.empty,.metric-row,.detail>div{border:2px solid var(--forest)!important;border-radius:2rem!important;background:var(--card)!important;box-shadow:none!important}
.card{overflow:hidden;transition:transform .45s,box-shadow .45s}
.card:hover{transform:translateY(-6px);box-shadow:var(--pop)!important}
.thumb{border-radius:0!important}
.thumb img{transition:transform .7s}
.card:hover .thumb img{transform:scale(1.05)}
.card h3,.row h3{font-family:var(--disp);font-weight:800;color:var(--forest)}
.card p,.row p{color:var(--mut)}
.pill{background:var(--sun)!important;color:var(--fg)!important;border-radius:999px!important;font-family:var(--disp);font-weight:800}
.price{font-family:var(--disp)!important;font-weight:800!important;color:var(--forest)!important}
.promo{background:var(--forest)!important;color:var(--forest-fg)}
.promo h2,.promo h3{color:var(--sun)}
.promo p{color:var(--forest-fg)}
.avatar{border:2px solid var(--forest)}

/* ---- forms ---- */
.field input,.field select,.field textarea,.search-box input{border:2px solid var(--forest)!important;border-radius:1rem!important;background:var(--card)!important;font-family:"Manrope",sans-serif}
.field input:focus,.field select:focus,.field textarea:focus,.search-box input:focus{outline:3px solid var(--sun);outline-offset:1px}
.field label{font-family:var(--disp);font-weight:700;color:var(--forest)}
.search-box{border:2px solid var(--forest)!important;border-radius:999px!important;background:var(--card)!important}
.search-box button{border-radius:999px;background:var(--forest);color:var(--forest-fg);font-family:var(--disp);font-weight:800}

/* ---- timeline ---- */
.step i{background:var(--sun)!important;border:2px solid var(--forest)!important;color:var(--fg)!important}
.step.current i{background:var(--forest)!important;color:var(--forest-fg)!important}
.step:before{background:var(--forest)!important}

/* ---- marketplace icon shelf ---- */
.marketplace{background:transparent!important}
.marketplace-item .icon-wrap{border:2px solid var(--forest)!important;background:var(--card)!important;border-radius:50%!important;box-shadow:none!important}
.marketplace-item:hover .icon-wrap{background:var(--sun)!important;transform:translateY(-4px)}
.marketplace-item span{font-family:var(--disp);font-weight:700;color:var(--forest)}
.marketplace:before,.marketplace:after{display:none!important}

/* ---- footer ---- */
.footer{margin:56px 24px 24px;background:var(--forest);color:var(--forest-fg)!important;border:0!important;border-radius:2.5rem;padding:36px 40px;font-size:13px}
.footer a{color:var(--sun)}
.mobile-nav{background:var(--card)!important;border-top:2px solid var(--forest)!important}

@media(max-width:900px){
  .topbar{margin:10px 12px 0;height:auto;padding:10px 14px;border-radius:2rem;grid-template-columns:1fr auto auto;row-gap:10px}
  .categories{padding:14px 14px 4px}
  .hero-art{margin:8px 14px 20px;box-shadow:10px 10px 0 var(--sun)}
}

/* alignment: hero text lines up with the card grid */
.page-main{padding-left:40px;padding-right:40px}
.page-hero{padding-left:0!important;padding-right:0!important}
.section,.tabs,.card-grid{padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
.tabs{margin:22px 0 22px!important}