/* DIRT RICH — clean streetwear storefront */
:root {
  --bg:#090909; --panel:#111111; --panel-2:#171717; --ink:#f5f3ef;
  --muted:#92908b; --line:#292929; --red:#b91e2b; --gold:#b89a58;
  --max:1240px; --font-ui:Inter,Arial,sans-serif; --font-display:Anton,Impact,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.announcement{min-height:30px;display:flex;align-items:center;justify-content:center;gap:10px;padding:7px 14px;background:#e9e6df;color:#101010;text-align:center;font-size:9px;font-weight:800;letter-spacing:.16em}
.announcement span{color:var(--red)}
.site-header{position:relative;z-index:50;background:rgba(9,9,9,.96);border-bottom:1px solid var(--line)}
.nav-wrap{width:min(100%,var(--max));min-height:82px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:inline-flex;flex-shrink:0}
.wordmark{font-family:var(--font-display);font-size:32px;line-height:.82;letter-spacing:-.035em;font-style:italic}
.wordmark span{display:block;color:var(--gold);font-size:.72em;letter-spacing:.13em;margin-left:14px}
.nav-links{display:flex;align-items:center;justify-content:center;gap:30px}
.nav-link{font-size:10px;font-weight:800;letter-spacing:.14em;color:#c8c6c1;transition:color .2s}
.nav-link:hover,.nav-link.is-active{color:#fff}
.nav-link.is-active:after{content:"";display:block;height:2px;background:var(--red);margin-top:8px}
.nav-tools{display:flex;align-items:center;gap:18px}
.icon-btn{position:relative;width:30px;height:34px;padding:5px;border:0;background:none;color:#fff;display:flex;align-items:center;justify-content:center}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cart-count{position:absolute;top:0;right:-3px;min-width:15px;height:15px;padding:0 3px;display:grid;place-items:center;border-radius:50%;background:var(--red);font-size:9px;font-weight:800}
.menu-btn{display:none;flex-direction:column;gap:5px}
.menu-btn span{width:19px;height:1px;background:#fff}
.search-bar{padding:12px 24px;border-top:1px solid var(--line);background:#111}
.search-bar input{display:block;width:min(100%,var(--max));margin:auto;padding:13px 15px;background:#080808;color:#fff;border:1px solid #383838;outline:none}
.search-bar input:focus{border-color:var(--gold)}
.hero{position:relative;min-height:590px;max-width:1600px;margin:auto;padding:65px max(5vw,32px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;overflow:hidden;background:linear-gradient(115deg,#111 0%,#090909 58%,#191713 100%)}
.hero:before{content:"";position:absolute;width:620px;height:620px;right:4%;top:-180px;border:1px solid rgba(255,255,255,.06);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.018),0 0 0 110px rgba(255,255,255,.012)}
.hero-copy{position:relative;z-index:2;max-width:560px}
.eyebrow{margin:0 0 16px;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.24em}
.hero h1,.collection-intro h1{margin:0;font-family:var(--font-display);font-size:clamp(72px,10vw,142px);line-height:.86;letter-spacing:-.025em}
.hero h1 span{color:var(--gold)}
.hero-line{margin:20px 0 14px;font-size:clamp(17px,2.4vw,26px);font-weight:900;letter-spacing:.12em}
.hero-description{margin:0 0 28px;color:#aaa;font-size:13px;line-height:1.8}
.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;padding:0 23px;font-size:10px;font-weight:900;letter-spacing:.13em;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-2px)}
.button-light{background:#f2f0ea;color:#111}
.button-light:hover{background:var(--gold)}
.button-outline{border:1px solid #777;color:#fff}
.hero-product{position:relative;z-index:1;max-width:530px;width:100%;justify-self:center}
.hero-product-frame{aspect-ratio:1/1.02;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,#30302e 0%,#171717 50%,#101010 74%);border:1px solid #343434;padding:22px;box-shadow:22px 22px 0 rgba(185,158,94,.12)}
.hero-product-frame img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen}
.hero-caption{display:block;margin-top:16px;text-align:right;color:#777;font-size:9px;font-weight:700;letter-spacing:.2em}
.hero-index{position:absolute;right:30px;bottom:22px;color:#777;font-size:10px;letter-spacing:.15em}
.hero-index span{color:var(--gold);padding:0 5px}
.brand-statement{padding:35px 24px 38px;text-align:center;border-bottom:1px solid var(--line);border-top:1px solid var(--line);background:#0d0d0d}
.brand-statement>p:first-child{margin:0;font-family:var(--font-display);font-size:clamp(30px,5vw,54px);letter-spacing:.025em}
.brand-statement>p:first-child span{color:var(--gold)}
.statement-rule{display:block;width:42px;height:2px;margin:16px auto;background:var(--red)}
.statement-small{margin:0;color:var(--muted);font-size:11px;letter-spacing:.08em}
.section{width:min(100%,var(--max));margin:auto;padding:76px 28px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:27px}
.section-heading .eyebrow{margin-bottom:7px}
.section-heading h2,.feature-copy h2{margin:0;font-family:var(--font-display);font-size:clamp(36px,5vw,58px);line-height:.95;letter-spacing:.01em}
.text-link{font-size:9px;font-weight:800;letter-spacing:.15em;color:#c7c4bd;border-bottom:1px solid #666;padding-bottom:7px}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.card{position:relative;min-width:0}
.card-media{display:block;aspect-ratio: .82 / 1;background:#151515;border:1px solid #292929;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card-media img{transform:scale(1.035)}
.img-placeholder{width:100%;height:100%;min-height:180px;background:linear-gradient(135deg,#222,#101010)}
.card-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-top:12px}
.card-title{margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.card-price{margin:0;color:#b6b3ad;font-size:12px}
.card-add{width:30px;height:30px;flex-shrink:0;border:1px solid #555;background:transparent;color:#fff;font-size:20px;line-height:1}
.card-add:hover{background:#fff;color:#111}
.badge{position:absolute;top:12px;left:12px;z-index:2;padding:5px 8px;background:var(--red);font-size:8px;font-weight:900;letter-spacing:.12em}
.empty-state{grid-column:1/-1;padding:60px 20px;text-align:center;border:1px solid var(--line);background:#101010}
.empty-state p{margin:0 0 8px;font-family:var(--font-display);font-size:27px}
.empty-state span,.empty-state a{color:var(--muted);font-size:12px}
.feature-banner{display:grid;grid-template-columns:1fr 1fr;min-height:390px;background:#131313;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feature-image{min-height:340px;overflow:hidden}
.feature-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.75) saturate(.8)}
.feature-copy{align-self:center;padding:55px clamp(25px,7vw,90px)}
.feature-copy .eyebrow{margin-bottom:18px}
.feature-copy h2{font-size:clamp(38px,5vw,64px)}
.feature-copy h2 span{color:var(--gold)}
.feature-copy>p:not(.eyebrow){max-width:360px;margin:20px 0 26px;color:#aaa;font-size:13px;line-height:1.8}
.values{width:min(100%,var(--max));margin:auto;padding:55px 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.values>div{padding-left:18px;border-left:1px solid #494949}
.values span{color:var(--gold);font-size:9px;font-weight:800;letter-spacing:.2em}
.values h3{margin:9px 0 5px;font-size:11px;letter-spacing:.13em}
.values p{margin:0;color:var(--muted);font-size:11px}
.collection-intro{padding:72px 24px 48px;text-align:center;background:linear-gradient(180deg,#171614,#090909)}
.collection-intro .eyebrow{margin-bottom:12px}
.collection-intro h1{font-size:clamp(64px,9vw,112px)}
.collection-intro>p:last-child{margin:14px 0 0;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.3em}
.collection-toolbar{width:min(100%,var(--max));margin:auto;padding:20px 28px;display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);color:#a7a49e;font-size:9px;font-weight:800;letter-spacing:.15em}
.collection-products{width:min(100%,var(--max));margin:auto;padding:30px 28px 75px}
.site-footer{border-top:1px solid var(--line);background:#050505}
.footer-main{width:min(100%,var(--max));margin:auto;padding:52px 28px 42px;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px}
.footer-brand p{margin:14px 0 0;color:#898781;font-size:9px;font-weight:700;letter-spacing:.16em;line-height:1.9}
.footer-column h4{margin:3px 0 15px;font-size:9px;letter-spacing:.2em;color:#fff}
.footer-column a{display:block;padding:5px 0;color:#96938d;font-size:11px}
.footer-column a:hover{color:#fff}
.footer-bottom{width:min(100%,var(--max));margin:auto;padding:17px 28px;border-top:1px solid #222;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#777;font-size:8px;font-weight:700;letter-spacing:.14em}
.cart-drawer{position:fixed;z-index:180;top:0;right:0;width:min(390px,92vw);height:100%;padding:24px;background:#101010;border-left:1px solid var(--line);transform:translateX(102%);transition:transform .25s;overflow:auto}
.cart-drawer.is-open{transform:translateX(0);box-shadow:-20px 0 60px #0009}
.toast{position:fixed;z-index:300;bottom:24px;left:50%;transform:translate(-50%,150%);padding:13px 22px;background:#f3f0e8;color:#111;font-size:10px;font-weight:900;letter-spacing:.12em;transition:transform .2s;visibility:hidden}
.toast.is-visible{transform:translate(-50%,0);visibility:visible}
.modal-x{border:1px solid #555;background:transparent;color:#fff;width:34px;height:34px;font-size:20px}
.summary-row{display:flex;justify-content:space-between;padding:18px 0;border-top:1px solid var(--line);margin-top:20px}
.summary-total{font-weight:800}
.summary-note{color:var(--muted);font-size:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;background:#f1eee7;color:#111;font-size:10px;font-weight:900;letter-spacing:.12em}
.btn--block{display:flex;width:100%}
.btn--primary{background:#f1eee7;color:#111}
@media(max-width:900px){
 .nav-wrap{gap:18px;padding:0 20px}
 .nav-links{gap:18px}
 .hero{min-height:500px;padding:55px 28px;gap:25px}
 .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .footer-main{grid-template-columns:1.3fr repeat(3,1fr);gap:20px}
}
@media(max-width:680px){
 .announcement{font-size:8px;letter-spacing:.1em;min-height:28px}
 .nav-wrap{min-height:68px;padding:0 17px}
 .menu-btn{display:flex;order:3}
 .nav-links{display:none;position:absolute;top:100%;left:0;right:0;padding:16px 22px 22px;background:#0b0b0b;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:19px}
 .nav-links.is-open{display:flex}
 .nav-link.is-active:after{display:none}
 .nav-tools{margin-left:auto;gap:10px}
 .wordmark{font-size:28px}
 .hero{min-height:0;padding:42px 20px 36px;grid-template-columns:1fr;gap:28px}
 .hero h1{font-size:clamp(76px,20vw,112px)}
 .hero-line{font-size:18px;margin-top:15px}
 .hero-description{font-size:12px}
 .hero-product{width:min(100%,430px)}
 .hero-product-frame{padding:14px;box-shadow:10px 10px 0 rgba(185,158,94,.12)}
 .hero-caption{font-size:8px}
 .hero-index{right:18px;bottom:12px}
 .brand-statement{padding:28px 18px}
 .statement-small{font-size:10px}
 .section{padding:48px 17px}
 .section-heading{align-items:end;margin-bottom:19px}
 .section-heading h2{font-size:38px}
 .text-link{font-size:8px;white-space:nowrap}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
 .card-media{aspect-ratio:.78/1}
 .card-title{font-size:9px}
 .card-price{font-size:11px}
 .card-add{width:27px;height:27px}
 .feature-banner{grid-template-columns:1fr}
 .feature-image{min-height:0;aspect-ratio:1.55/1}
 .feature-copy{padding:35px 22px 42px}
 .feature-copy h2{font-size:47px}
 .values{padding:38px 20px;grid-template-columns:1fr;gap:22px}
 .values>div{padding:0 0 0 14px}
 .collection-intro{padding:55px 18px 35px}
 .collection-intro h1{font-size:76px}
 .collection-toolbar{padding:16px 17px;font-size:8px}
 .collection-products{padding:20px 14px 50px}
 .footer-main{padding:38px 20px 28px;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
 .footer-brand{grid-column:1/-1}
 .footer-bottom{padding:15px 20px;font-size:7px}
}
@media(max-width:360px){.section-heading h2{font-size:32px}.text-link{font-size:7px}}

.rs-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 4, 5, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.rs-overlay.is-open { opacity: 1; visibility: visible; }
.rs-modal {
  position: relative;
  width: min(680px, 100%);
  max-height: min(86vh, 820px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #17161a, #100f12 60%, #0b0a0c);
  border: 1px solid rgba(200, 205, 214, .22);
  border-radius: 10px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: clamp(26px, 5vw, 48px) clamp(20px, 5vw, 46px) clamp(30px, 5vw, 44px);
  color: #f2f3f5;
  transform: translateY(14px) scale(.985);
  transition: transform .28s ease;
}
.rs-overlay.is-open .rs-modal { transform: translateY(0) scale(1); }
.rs-modal::before {
  content: '';
  position: sticky;
  top: 0;
  display: block;
  height: 3px;
  margin: -14px 0 0 -9999px;
  background: linear-gradient(90deg, transparent, #c9ced8 30%, #eceff4 50%, #c9ced8 70%, transparent);
}
.rs-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(200, 205, 214, .3);
  border-radius: 50%;
  color: #e8eaee;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.rs-close:hover { background: rgba(200, 205, 214, .14); border-color: #dfe3ea; color: #fff; }
.rs-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #b9bec9;
  margin: 0 0 10px;
}
.rs-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 38px);
  line-height: .96;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #fff;
}
.rs-final {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #08070a;
  background: linear-gradient(180deg, #f4f6f9, #c6ccd6);
  border: 1px solid rgba(255,255,255,.5);
  padding: 9px 16px;
  border-radius: 3px;
  margin: 0 0 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.rs-modal h4 {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #dfe3ea;
  margin: 26px 0 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(200, 205, 214, .16);
}
.rs-modal h4::before { content: '\25C6\00a0\00a0'; color: #b9bec9; font-size: 9px; vertical-align: 2px; }
.rs-modal p, .rs-modal li {
  font-size: 13.5px;
  line-height: 1.75;
  color: #cfd3da;
  margin: 0 0 10px;
}
.rs-modal ul { margin: 0 0 10px; padding-left: 4px; list-style: none; }
.rs-modal li { padding-left: 20px; position: relative; }
.rs-modal li::before { content: '\2014'; position: absolute; left: 0; color: #9aa0ac; }
.rs-modal strong { color: #fff; }
.rs-modal .rs-ack {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid rgba(200, 205, 214, .28);
  border-radius: 6px;
  background: rgba(200, 205, 214, .05);
  font-size: 12.5px;
  color: #e8eaee;
}
@media (max-width: 560px) {
  .rs-overlay { padding: 12px; align-items: flex-end; }
  .rs-modal { max-height: 92vh; border-radius: 10px 10px 6px 6px; }
}
body.rs-locked { overflow: hidden; }





/* DIRT RICH — artwork-matched palette refinement */
:root {
  --bg:#08080b;
  --panel:#101015;
  --panel-2:#17151d;
  --ink:#f5f4f7;
  --muted:#96929f;
  --line:#292630;
  --red:#9270d6;
  --gold:#a98be8;
}
.announcement {
  background:#e8e7eb;
  color:#101014;
}
.announcement span { color:#9270d6; }
.wordmark span { color:#a98be8; }
.eyebrow,.brand-statement>p:first-child span,.feature-copy h2 span,
.values span,.collection-intro>p:last-child { color:#a98be8; }
.hero {
  background:
    radial-gradient(ellipse at 74% 43%,rgba(100,69,151,.18),transparent 38%),
    linear-gradient(112deg,#0a0a0d 0%,#0c0b11 57%,#14101b 100%);
}
.hero:before {
  border-color:rgba(190,166,239,.09);
  box-shadow:0 0 0 55px rgba(164,133,220,.025),0 0 0 110px rgba(164,133,220,.014);
}
.hero h1 span { color:#a98be8; }
.hero-product-frame {
  background:radial-gradient(ellipse at 50% 42%,#30263e 0%,#19151f 47%,#101015 76%);
  border-color:#393342;
  box-shadow:18px 18px 0 rgba(131,101,181,.12);
}
.hero-caption { color:#817b8b; }
.brand-statement { background:#0c0b10; }
.statement-rule { background:#9270d6; }
.button-light,.btn--primary {
  background:#eeeef2;
  color:#111015;
}
.button-light:hover,.btn--primary:hover { background:#c9b8ec; }
.button-outline { border-color:#70617f; }
.text-link { border-color:#77668d; }
.card-media {
  background:radial-gradient(ellipse at 50% 44%,#282331 0%,#15131a 60%,#101015 100%);
  border-color:#302b39;
}
.card-add { border-color:#5e536d; }
.card-add:hover { background:#a98be8;color:#100d15; }
.badge { background:#7754ad; }
.feature-banner { background:#111016; }
.feature-image img { filter:brightness(.82) saturate(.92); }
.values>div { border-left-color:#4c4358; }
.collection-intro {
  background:
    radial-gradient(ellipse at 50% 0%,rgba(117,83,165,.17),transparent 54%),
    linear-gradient(180deg,#15121b,#09090c);
}
.collection-toolbar { border-color:#302b39; }
.footer-column a:hover { color:#c9b8ec; }
.rs-modal {
  background:linear-gradient(180deg,#19151f,#100f14 60%,#0b0a0e);
  border-color:rgba(169,139,232,.25);
}
.rs-modal::before {
  background:linear-gradient(90deg,transparent,#8f70c6 30%,#d7c8f4 50%,#8f70c6 70%,transparent);
}
.rs-close { border-color:rgba(169,139,232,.38); }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}