/* Urban Addiction — city-luxe overlay */
body{background:#060606;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:44px 44px}
.header{border-bottom:1px solid #ffffff38}.logo b,.desktop-nav a,.btn,.kicker,.text-link,.filter-chips button,.product-info h3{font-family:Arial Black,Arial,sans-serif;font-style:normal;text-transform:uppercase}
.logo .ua{transform:none;border:2px solid var(--gold);background:#050505;box-shadow:5px 5px 0 var(--coral);font-family:Arial Black,Arial,sans-serif;font-size:16px}
.hero{background-image:url('./assets/urban-hero.jpg');background-position:center;background-color:#171717}
.hero:after{content:"868";top:auto;right:-1vw;bottom:-4vw;color:transparent;-webkit-text-stroke:1px #ffffff2b;font-family:Arial Black,Arial,sans-serif;font-size:clamp(170px,29vw,440px);font-style:italic;transform:skew(-5deg)}
.hero-code{position:absolute;z-index:2;right:5vw;top:145px;padding:9px 12px;border:1px solid #ffffff4a;background:#05050599;color:#fff;font:700 9px/1 Arial,sans-serif;letter-spacing:.24em;transform:rotate(90deg);transform-origin:right top}
.hero h1,.section-head h2,.campaign h2,.look-copy h2,.island-note h2,.brand-story h2,.newsletter h2{font-family:Arial Black,Arial,sans-serif;font-style:italic;text-transform:uppercase;letter-spacing:-.075em}
.hero h1{line-height:.74}.hero h1 i,.section-head h2 i,.campaign h2 i,.look-copy h2 i,.island-note h2 i,.brand-story h2 i,.newsletter h2 i{font-family:inherit;font-style:inherit;color:transparent;-webkit-text-stroke:1.5px var(--bright)}
.hero-overlay{background:linear-gradient(90deg,#000f 0,#000b 37%,#0001 72%),linear-gradient(0deg,#000b,transparent 52%)}
.btn{border-width:2px;clip-path:polygon(0 0,93% 0,100% 25%,100% 100%,0 100%)}
.street-marquee{overflow:hidden;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);background:#090909;color:var(--bright);padding:14px 0;font:800 10px/1 Arial,sans-serif;letter-spacing:.22em;white-space:nowrap}.street-marquee div{width:max-content;animation:marquee 22s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}
.category-grid{gap:5px}.category{border:1px solid #ffffff18}.category h3{font-family:Arial Black,Arial,sans-serif;font-style:italic;letter-spacing:-.06em}.c1{background-image:url('./assets/urban-clothing.jpg')}.c2{background-image:url('./assets/urban-jewellery.jpg')}.c3{background-image:url('./assets/urban-look.jpg')}.c4{background-image:url('./assets/urban-hero.jpg')}.c5{background-image:url('./assets/urban-group.jpg')}
.products-section{background:#090909}.product-card{padding:6px;border:1px solid #ffffff18;background:#111}.product-media{height:470px}.product-badge{border-left:3px solid var(--coral);font-family:Arial Black,Arial,sans-serif}.product-info p{font-family:Arial Black,Arial,sans-serif;font-size:15px}.quick{border-width:2px;font-family:Arial Black,Arial,sans-serif}
.campaign{background-image:linear-gradient(90deg,#0000 30%,#000e 76%),url('./assets/urban-jewellery.jpg');background-position:center;box-shadow:inset 10px 0 0 var(--sea),inset -10px 0 0 var(--coral)}
.look-image{background-image:linear-gradient(0deg,#000b,#0000 50%),url('./assets/urban-look.jpg');background-position:center}.look-section{background:#d7c6a5}.look-copy{border-left:8px solid #111}.look-copy h2 i{-webkit-text-stroke-color:#111}
.island-note{border-top:1px solid #ffffff2a;border-bottom:1px solid #ffffff2a;background:linear-gradient(120deg,#0a2422,#090909 46%,#27110d)}
.collection-grid{gap:5px;border:0}.collection-grid a{border:1px solid #ffffff1f}.collection-grid h3{font-family:Arial Black,Arial,sans-serif;font-style:italic;letter-spacing:-.045em}
.brand-story{background-image:linear-gradient(90deg,#000f,#000c 52%,#0002),url('./assets/urban-group.jpg');background-position:center;background-size:cover}
.company-profile{padding:120px 5vw;background:#d7c6a5;color:#0a0a0a}.profile-heading{display:grid;grid-template-columns:.65fr 1.3fr 1fr;gap:50px;align-items:end;max-width:1400px;margin:0 auto 65px}.profile-heading .kicker{align-self:start;color:#76551d}.profile-heading h2{margin:0;font:italic clamp(48px,6vw,86px)/.85 Arial Black,Arial,sans-serif;letter-spacing:-.075em}.profile-heading h2 i{color:transparent;-webkit-text-stroke:1.5px #111}.profile-heading>p:last-child{margin:0;color:#51483c;font:16px/1.75 Georgia,serif}.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;max-width:1400px;margin:auto}.profile-grid article{min-height:270px;padding:35px;border:1px solid #111;background:#cdbb98}.profile-grid article:nth-child(2),.profile-grid article:nth-child(3){background:#111;color:#f3ecdf}.profile-grid span,.profile-location>span{font:800 9px/1 Arial,sans-serif;letter-spacing:.2em;color:#76551d}.profile-grid article:nth-child(2) span,.profile-grid article:nth-child(3) span{color:var(--bright)}.profile-grid h3{margin:70px 0 12px;font:italic 28px/.95 Arial Black,Arial,sans-serif;letter-spacing:-.045em}.profile-grid p{max-width:560px;margin:0;color:#574d3f;font-size:13px;line-height:1.75}.profile-grid article:nth-child(2) p,.profile-grid article:nth-child(3) p{color:#aaa195}.profile-location{display:grid;grid-template-columns:.4fr 1.5fr auto;gap:25px;align-items:center;max-width:1400px;margin:5px auto 0;padding:28px 34px;background:var(--coral);color:#080808}.profile-location span{color:#080808}.profile-location strong{font:italic 17px/1.3 Arial Black,Arial,sans-serif;letter-spacing:.02em}.profile-location a{padding:12px 15px;border:2px solid #080808;font:800 10px/1 Arial,sans-serif;letter-spacing:.1em}
.social-grid{gap:5px}.s1{background-image:url('./assets/urban-look.jpg')}.s2{background-image:url('./assets/urban-jewellery.jpg')}.s3{background-image:url('./assets/urban-clothing.jpg')}.s4{background-image:url('./assets/urban-group.jpg')}
.panel-title{font-family:Arial Black,Arial,sans-serif;font-style:italic;text-transform:uppercase;letter-spacing:-.05em}.drawer,.modal{background:#090909;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:28px 28px}
@media(max-width:700px){.hero{background-position:60% center}.hero-overlay{background:linear-gradient(0deg,#000f 0,#0009 51%,#0001 80%)}.hero-code{display:none}.hero h1{font-size:54px}.product-media{height:500px}.campaign{background-position:42% center}.brand-story{background-position:68% center}.street-marquee{font-size:8px}.company-profile{padding:80px 16px}.profile-heading{grid-template-columns:1fr;gap:22px;margin-bottom:40px}.profile-heading h2{font-size:51px}.profile-grid{grid-template-columns:1fr}.profile-grid article{min-height:240px;padding:27px}.profile-grid h3{margin-top:55px}.profile-location{grid-template-columns:1fr;gap:14px;padding:25px}.profile-location a{text-align:center}}
@media(prefers-reduced-motion:reduce){.street-marquee div{animation:none}}

/* Mobile storefront: keep every control and content block inside the viewport. */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:700px){
  .topbar{height:30px;padding:0 12px;padding-top:env(safe-area-inset-top);font-size:7px;letter-spacing:.08em;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-primary{display:block;overflow:hidden;text-overflow:ellipsis;text-align:center}
  .topbar-extra{display:none}
  .header{top:30px;grid-template-columns:48px minmax(0,1fr) 92px;padding:0 10px;height:68px}
  .mobile-nav-open{justify-self:start}
  .logo{justify-self:center;min-width:0}.logo .tag{display:none}
  .head-actions{position:absolute;top:13px;right:8px;width:92px;gap:2px;justify-content:flex-end}.head-actions .icon{width:42px;min-width:42px}
  .hero{min-height:720px;height:calc(100svh - 30px);background-position:66% center}
  .hero:after{display:none}
  .hero-copy{left:16px;right:16px;bottom:max(34px,env(safe-area-inset-bottom));max-width:none}
  .hero-copy .kicker{max-width:100%;font-size:7px;letter-spacing:.17em;line-height:1.5;white-space:normal}
  .hero h1{font-size:clamp(44px,14vw,55px);line-height:.8;overflow-wrap:anywhere}
  .hero h1 i{font-size:.94em;-webkit-text-stroke-width:1px}
  .hero h2{font-size:8px;letter-spacing:.15em;line-height:1.5}
  .hero .serif{font-size:16px}
  .cta-row{display:grid;grid-template-columns:1fr;gap:8px;margin-top:20px}
  .cta-row .btn{width:100%;min-width:0;min-height:50px;padding:0 12px;text-align:center}
  .section{padding-left:16px;padding-right:16px}
  .section-head h2{font-size:clamp(38px,12vw,52px);overflow-wrap:anywhere}
  .category{height:min(118vw,460px);padding:22px}
  .product-track{gap:12px;margin-right:-16px;padding-right:16px;scroll-padding-left:0}
  .product-card{min-width:calc(100vw - 44px)}
  .product-media{height:auto;aspect-ratio:4/5}
  .campaign{min-height:700px;padding:48px 16px;background-position:36% center;box-shadow:inset 5px 0 0 var(--sea),inset -5px 0 0 var(--coral)}
  .campaign-copy{width:100%;max-width:100%}.campaign h2{font-size:clamp(46px,15vw,66px)}
  .look-copy{padding:44px 20px}.look-copy h2{font-size:clamp(42px,13vw,58px)}
  .collection-grid{grid-template-columns:1fr}.collection-grid a{min-height:190px}
  .brand-story{padding:72px 18px;background-position:70% center}.brand-story h2{font-size:clamp(42px,13vw,60px)}
  .company-profile{padding:72px 16px}.profile-heading h2{font-size:clamp(42px,13vw,52px);overflow-wrap:anywhere}
  .profile-grid article{min-height:220px;padding:24px}.profile-grid h3{margin-top:42px;font-size:25px}
  .profile-location{padding:22px}
  .social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.social-grid a{min-width:0}
  .footer-main{grid-template-columns:1fr;gap:36px;padding-left:18px;padding-right:18px}.footer-brand{grid-column:auto}
  .drawer{width:100%;max-width:none;padding:22px 16px calc(88px + env(safe-area-inset-bottom))}
  .drawer-head{padding-top:env(safe-area-inset-top)}
  .field,.checkout-form input,.checkout-form select,.checkout-form textarea{font-size:16px;min-height:52px}
  .modal{left:0;top:0;width:100%;height:100dvh;max-height:none;border:0;transform:translateY(18px);overflow-y:auto}
  .modal.open{transform:none}.modal-close{top:max(14px,env(safe-area-inset-top));right:14px}
  .product-modal img,.product-modal-media{height:min(46vh,410px)}
  .product-modal-copy{padding:24px 18px calc(28px + env(safe-area-inset-bottom))}
  .product-detail .btn{min-height:52px}
  .whatsapp{right:12px;bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:380px){
  .header{grid-template-columns:44px minmax(0,1fr) 82px;padding:0 7px}
  .head-actions{width:82px;right:5px}.head-actions .icon{width:38px;min-width:38px}
  .hero-copy{left:13px;right:13px}.hero h1{font-size:43px}
  .social-grid{grid-template-columns:1fr}.social-grid a{min-height:280px}
}