/* =====================================================================
   STRATEGY CLOTHING - customer UI upgrade
   Loaded on every customer page after the page's own styles are defined (selectors start with
   "body" so they win). Pure polish: nothing here changes how a page works.
   ===================================================================== */
:root { --s-ink:#111; --s-line:#e8e8ea; --s-soft:#f4f4f6; --s-red:#c00; --s-radius:14px; }
html { scroll-behavior: smooth; }
::selection { background:#111; color:#fff; }
:focus-visible { outline:2px solid #111; outline-offset:2px; border-radius:4px; }
body a, body button, body input, body select, body textarea {
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .2s, transform .15s, opacity .2s;
}

/* ---------- top bars + header ---------- */
body .ann-bar { background:#111; color:#d9d9dc; font-size:11px; letter-spacing:.7px; padding:9px 16px; }
body .ann-bar a { color:#fff; }
body .promo-bar {
    background: linear-gradient(90deg,#a80000,#dc1a1a 50%,#a80000); background-size:200% 100%;
    animation: promoShift 9s linear infinite; font-weight:700; letter-spacing:.8px;
}
body .promo-bar a:hover { text-decoration: underline !important; }
@keyframes promoShift { 0% { background-position:0 0; } 100% { background-position:200% 0; } }
@media (prefers-reduced-motion: reduce) { body .promo-bar { animation:none; } html { scroll-behavior:auto; } }

body .site-header { background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); }
body .site-header.is-scrolled { box-shadow:0 8px 28px rgba(0,0,0,.08); border-bottom-color:transparent; }
body .site-logo { display:inline-flex; align-items:center; gap:11px; }
body .site-logo .logo-mark { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.18); }
body .header-search input { border-radius:999px; padding-left:18px; background:#f3f4f6; border-color:transparent; }
body .header-search input:focus { background:#fff; border-color:#111; box-shadow:0 0 0 3px rgba(17,17,17,.07); }
body .hdr-btn { border-radius:999px; }
body .hdr-btn:hover { background:#f0f0f2; }
@media (max-width: 560px) { body .site-logo .logo-mark { width:30px; height:30px; } }

/* ---------- shop: product cards ---------- */
body .plp-tile { border-radius:var(--s-radius); border:1px solid transparent; }
body .plp-tile:hover { box-shadow:0 16px 38px rgba(0,0,0,.10); transform:translateY(-4px); border-color:var(--s-line); }
body .plp-tile-img { border-radius:var(--s-radius) var(--s-radius) 0 0; background:var(--s-soft); }
body .plp-tile-info { padding:14px 14px 18px; }
body .plp-badge { border-radius:999px; padding:5px 10px; box-shadow:0 2px 8px rgba(0,0,0,.15); }
body .plp-name { font-weight:600; }
body .plp-sort { border-radius:999px; padding-left:16px; }
body .plp-sidebar a.active { background:#111; color:#fff; font-weight:700; border-radius:8px; padding-left:12px; }
body .plp-sidebar a { border-radius:8px; padding-left:12px; }
body .plp-sidebar a:hover { background:var(--s-soft); }
body .plp-sidebar a.active:hover { background:#111; }
body .pct-chip { transition: all .15s; }

/* mobile shop: the category list becomes a swipe-able row of chips so the products come first */
@media (max-width: 980px) {
    body .plp-sidebar {
        position: static; max-height:none; border-right:0; border-bottom:1px solid #eee; padding:12px 4%;
        display:flex; gap:8px; overflow-x:auto; flex-wrap:nowrap; align-items:center; scrollbar-width:none; background:#fff;
    }
    body .plp-sidebar::-webkit-scrollbar { display:none; }
    body .plp-sidebar h4, body .plp-sidebar .divider { display:none; }
    body .plp-sidebar a { flex:0 0 auto; white-space:nowrap; padding:8px 15px; border:1px solid #e3e3e6; border-radius:999px; font-size:12px; font-weight:600; background:#fff; }
    body .plp-sidebar a.active { background:#111; color:#fff; border-color:#111; }
    body .plp-sidebar a[href*="&search="] { display:none; }   /* sort links: the "Sort by" box is right below */
}

/* ---------- product page ---------- */
body .size-btn { border-radius:10px; transition: all .15s; }
body .size-btn:not(:disabled):hover { border-color:#111; transform:translateY(-1px); }
body .size-btn.selected { box-shadow:0 4px 14px rgba(0,0,0,.18); }
body .color-btn { border-radius:10px; }
body #add-to-cart-btn, body #buy-now-btn { border-radius:12px !important; padding:16px !important; font-size:12px; }
body #add-to-cart-btn:hover { background:#2b2b2b !important; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.2); }
body #buy-now-btn:hover { background:#111 !important; color:#fff !important; }
body .pdp-actions { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width: 700px) {
    body .pdp-actions { position:sticky; bottom:0; z-index:50; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:12px 0; margin:0 -2px; border-top:1px solid #eee; }
    body .pdp-actions button { flex:1; }
}

/* ---------- forms / cards used across account pages ---------- */
body input[type=text], body input[type=email], body input[type=password], body input[type=number], body input[type=tel], body select, body textarea { border-radius:8px; }
body input:focus, body select:focus, body textarea:focus { border-color:#111; box-shadow:0 0 0 3px rgba(17,17,17,.07); outline:none; }

/* ---------- footer ---------- */
body .site-footer { background:#0e0e10; color:#d4d4d8; padding:0; border-top:0; text-align:left; }
body .sf-inner { max-width:1180px; margin:0 auto; padding:56px 5% 34px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; }
body .sf-brand { display:flex; flex-direction:column; gap:14px; }
body .sf-brand .sf-logo { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:900; letter-spacing:5px; text-transform:uppercase; color:#fff; }
body .sf-brand .sf-logo img { width:44px; height:44px; border-radius:50%; }
body .sf-brand p { font-size:12.5px; line-height:1.75; color:#9a9aa2; margin:0; max-width:320px; }
body .sf-social { display:flex; gap:10px; margin-top:4px; }
body .sf-social a { width:38px; height:38px; border-radius:50%; background:#1c1c20; display:flex; align-items:center; justify-content:center; }
body .sf-social a:hover { background:#fff; transform:translateY(-2px); }
body .sf-social img { width:17px; height:17px; filter:invert(1); }
body .sf-social a:hover img { filter:none; }
body .sf-col h5 { font-size:10px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:#fff; margin:6px 0 16px; }
body .sf-col a, body .sf-col span { display:block; font-size:13px; color:#9a9aa2; padding:5px 0; text-decoration:none; }
body .sf-col a:hover { color:#fff; transform:translateX(3px); }
body .sf-pay { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
body .sf-pay span { display:inline-block; padding:6px 11px; background:#1c1c20; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.6px; color:#d4d4d8; }
body .sf-bottom { border-top:1px solid #1f1f23; padding:20px 5% 26px; text-align:center; font-size:11px; color:#6f6f77; letter-spacing:.6px; }
body .sf-bottom a { color:#a1a1a8; text-decoration:underline; }
@media (max-width: 860px) { body .sf-inner { grid-template-columns:1fr 1fr; padding-top:42px; } body .sf-brand { grid-column:1 / -1; } }
@media (max-width: 480px) { body .sf-inner { grid-template-columns:1fr; gap:26px; } }

/* ---------- wishlist heart ---------- */
.wl-btn { position:absolute; z-index:6; right:10px; bottom:10px; width:36px; height:36px; border-radius:50%; border:1.5px solid #111; background:#fff; color:#111; font-size:19px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:transform .15s, background .15s, color .15s; }
.wl-btn:hover { transform:scale(1.1); }
.wl-btn.on { background:#e0141b; border-color:#e0141b; color:#fff; }
.wl-btn.wl-inline { position:static; flex-shrink:0; width:44px; height:44px; font-size:22px; }
.plp-tile-img, .st-tile-img { position:relative; }

/* ---------- footer newsletter ---------- */
body .sf-news { border-top:1px solid #1f1f23; background:#0b0b0c; }
body .sf-news-in { max-width:1180px; margin:0 auto; padding:26px 5%; display:flex; align-items:center; gap:24px; flex-wrap:wrap; position:relative; }
body .sf-news-in strong { display:block; font-size:12px; letter-spacing:3px; color:#fff; }
body .sf-news-in span { font-size:12.5px; color:#9a9aa2; }
body .sf-news-in form { display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
body .sf-news-in input[type=email] { background:#1c1c20; color:#fff; border:1px solid #2a2a30; padding:12px 16px; width:260px; max-width:100%; font-size:13px; border-radius:0; }
body .sf-news-in button { background:#fff; color:#111; border:0; padding:12px 24px; font-size:11px; font-weight:900; letter-spacing:2px; text-transform:uppercase; cursor:pointer; }
body .sf-news-in button:disabled { opacity:.6; cursor:wait; }
body #nl-msg { flex-basis:100%; font-size:12px; min-height:16px; }
body #nl-msg.ok { color:#7ee2a0; } body #nl-msg.bad { color:#ff8a8a; }
@media (max-width: 700px) { body .sf-news-in form { margin-left:0; width:100%; } body .sf-news-in input[type=email] { flex:1; width:auto; } }

/* ---------- SALE: louder top bar + full-screen pop-up ---------- */
body .promo-bar { font-size:13px; padding:11px 16px; letter-spacing:.9px; }
body .promo-bar .pb-fire { display:inline-block; animation:pbFlick .8s ease-in-out infinite; }
body .promo-bar .pb-msg { font-weight:900; text-transform:uppercase; }
body .promo-bar .pb-count { margin-left:12px; background:rgba(0,0,0,.32); padding:3px 10px; border-radius:999px; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
body .promo-bar .pb-cta { margin-left:12px; background:#fff; color:#b30000; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:900; white-space:nowrap; animation:pbPulse 1.6s ease-in-out infinite; }
@keyframes pbFlick { 0%,100% { transform:scale(1) rotate(-4deg); } 50% { transform:scale(1.25) rotate(4deg); } }
@keyframes pbPulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,.7); } 50% { box-shadow:0 0 0 7px rgba(255,255,255,0); } }
@media (max-width:600px) { body .promo-bar { font-size:11.5px; } body .promo-bar .pb-count { display:inline-block; margin:4px 0 0 0; } }

.sp-overlay { position:fixed; inset:0; z-index:2147482000; align-items:center; justify-content:center; padding:18px; background:radial-gradient(circle at 50% 40%, rgba(224,20,27,.55), rgba(0,0,0,.88) 70%); opacity:0; transition:opacity .25s ease; overflow:hidden; }
.sp-card { position:relative; width:100%; max-width:460px; background:#0b0b0c; color:#fff; border:3px solid #ffc21a; box-shadow:0 0 0 6px #e0141b, 0 30px 90px rgba(0,0,0,.7), 0 0 70px rgba(255,194,26,.35); animation:spIn .55s cubic-bezier(.2,1.4,.4,1) both; text-align:center; overflow:hidden; }
.sp-x { position:absolute; top:34px; right:10px; z-index:3; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.sp-x:hover { background:#fff; color:#111; }
.sp-tape { background:repeating-linear-gradient(-45deg,#ffc21a 0 14px,#111 14px 28px); padding:0; height:30px; overflow:hidden; white-space:nowrap; position:relative; }
.sp-tape span { display:inline-block; font-family:'Anton','Impact',sans-serif; font-size:17px; letter-spacing:3px; line-height:30px; color:#111; background:#ffc21a; padding:0 10px; margin:0; animation:spTape 14s linear infinite; }
.sp-body { padding:26px 28px 24px; position:relative; }
.sp-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:900; letter-spacing:3px; color:#ffc21a; }
.sp-dot { width:9px; height:9px; border-radius:50%; background:#e0141b; box-shadow:0 0 0 0 rgba(224,20,27,.8); animation:spDot 1.2s infinite; }
.sp-big { margin:10px 0 4px; display:flex; align-items:baseline; justify-content:center; gap:10px; font-family:'Anton','Impact',sans-serif; font-weight:400; line-height:1; text-transform:uppercase; }
.sp-big small { font-size:26px; letter-spacing:3px; color:#fff; }
.sp-big b { font-size:clamp(88px, 24vw, 132px); font-weight:400; color:#ffc21a; text-shadow:4px 4px 0 #e0141b, 0 0 36px rgba(255,194,26,.45); animation:spBounce 1.5s ease-in-out infinite; display:inline-block; }
.sp-msg { margin:6px 0 14px; font-size:14px; line-height:1.55; color:#d6d6da; }
.sp-count { display:inline-block; margin-bottom:18px; padding:8px 16px; background:#1b1b1f; border:1px solid #333; border-radius:999px; font-size:13px; font-weight:900; letter-spacing:1.5px; color:#fff; font-variant-numeric:tabular-nums; }
.sp-cta { display:block; background:#ffc21a; color:#111; text-decoration:none; font-weight:900; letter-spacing:3px; font-size:14px; padding:17px 12px; text-transform:uppercase; animation:spGlow 1.6s ease-in-out infinite; }
.sp-cta:hover { background:#fff; }
.sp-later { margin-top:12px; background:none; border:0; color:#8d8d95; font-size:12px; cursor:pointer; text-decoration:underline; }
.sp-later:hover { color:#fff; }
.sp-conf { position:absolute; top:-24px; z-index:1; border-radius:2px; opacity:.95; animation:spFall linear forwards; pointer-events:none; }
@keyframes spIn { from { transform:scale(.6) rotate(-3deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
@keyframes spBounce { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
@keyframes spGlow { 0%,100% { box-shadow:0 0 0 0 rgba(255,194,26,.6); } 50% { box-shadow:0 0 28px 6px rgba(255,194,26,.55); } }
@keyframes spDot { 0% { box-shadow:0 0 0 0 rgba(224,20,27,.8); } 100% { box-shadow:0 0 0 12px rgba(224,20,27,0); } }
@keyframes spTape { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes spFall { to { top:105%; transform:translateX(30px) rotate(540deg); opacity:.8; } }
@media (prefers-reduced-motion: reduce) { .sp-card, .sp-big b, .sp-cta, .sp-dot, .sp-tape span, body .promo-bar .pb-fire, body .promo-bar .pb-cta { animation:none !important; } }

/* =====================================================================
   BRAND LAYER (street / graffiti): black + white, heavy condensed titles, hard edges
   ===================================================================== */
:root { --s-radius:2px; --st-display:'Anton','Impact','Arial Narrow Bold',sans-serif; }
body .plp-tile, body .plp-tile-img, body .plp-badge, body .plp-sort, body .plp-sidebar a, body .plp-sidebar a.active, body .size-btn, body .color-btn,
body #add-to-cart-btn, body #buy-now-btn { border-radius:0 !important; }
body .plp-tile { border:1px solid var(--s-line); }
body .plp-tile:hover { border-color:#111; box-shadow:none; transform:none; }
body .plp-tile-img { border-bottom:1px solid var(--s-line); }
body .plp-badge { font-weight:900; letter-spacing:1px; }
body .plp-name { text-transform:uppercase; letter-spacing:.3px; font-weight:700; }
body .plp-topbar .plp-title { display:none; }           /* the page banner above already says it */
body .plp-topbar { border-bottom:2px solid #111; padding-bottom:14px; }
body .plp-count { color:#111; font-weight:800; text-transform:uppercase; letter-spacing:1px; font-size:11px; margin-left:0; }
body .plp-sidebar h4 { letter-spacing:3px; }
body .plp-sidebar a.active { background:#111; }
body .pct-chip, body .plp-price-box input, body #price-go { border-radius:0 !important; }
body .pdp-h1 { font-family:var(--st-display); font-weight:400 !important; font-size:clamp(34px,4.4vw,54px) !important; line-height:1; letter-spacing:.5px; }
body .size-btn.selected { box-shadow:none; }

/* page banner */
.st-ph { position:relative; background:#0b0b0c; color:#fff; overflow:hidden; isolation:isolate; }
.st-ph::before { content:''; position:absolute; inset:0; z-index:0; opacity:.14; background-image:radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.4px); background-size:5px 5px; }
.st-ph-photo { position:absolute; z-index:0; right:0; top:0; width:min(52%,720px); height:100%; object-fit:cover; object-position:center 22%; filter:contrast(1.06) saturate(.9); -webkit-mask-image:linear-gradient(to left,#000 52%,transparent); mask-image:linear-gradient(to left,#000 52%,transparent); pointer-events:none; }
.st-ph-in { position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:46px 5% 42px; }
.st-ph-eyebrow { display:inline-flex; align-items:center; gap:12px; font-size:11px; font-weight:800; letter-spacing:4px; text-transform:uppercase; color:#a9a9b0; }
.st-ph-eyebrow::before { content:''; width:34px; height:2px; background:#fff; }
.st-ph h1 { font-family:var(--st-display); font-weight:400; text-transform:uppercase; font-size:clamp(40px,6.4vw,84px); line-height:.95; letter-spacing:.5px; margin:10px 0 0; color:#fff; }
.st-ph p { margin:14px 0 0; max-width:560px; font-size:14px; line-height:1.65; color:#bdbdc4; }
@media (max-width:720px) { .st-ph-in { padding:34px 5% 30px; } .st-ph-photo { width:100%; opacity:.32; -webkit-mask-image:none; mask-image:none; } }
body .rv-hero, body .nt-head { background:transparent; }

/* sign in / create account: brand panel + form */
main.st-auth { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:0 !important; align-items:stretch !important; justify-content:stretch !important; min-height:calc(100vh - 150px) !important; background:#fff !important; }
main.st-auth > :not(.st-auth-art) { align-self:center; justify-self:center; margin:56px 5%; }
.st-auth-art { position:sticky; top:0; align-self:start !important; height:calc(100vh - 140px); min-height:600px; background:#0b0b0c; color:#fff; overflow:hidden; display:flex; align-items:flex-end; padding:64px 8%; isolation:isolate; box-sizing:border-box; }
.st-auth-art::before { content:''; position:absolute; inset:0; z-index:0; opacity:.14; background-image:radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.4px); background-size:5px 5px; }
.st-auth-photos { position:absolute; inset:0; z-index:0; }
.st-auth-photos img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; opacity:0; animation:stAuthFade 30s infinite; filter:contrast(1.05) saturate(.92); }
.st-auth-art::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.12) 78%, rgba(0,0,0,.35) 100%); pointer-events:none; }
.st-auth-tag { position:absolute; z-index:3; left:8%; top:34px; width:150px; mix-blend-mode:screen; opacity:.95; pointer-events:none; }
@keyframes stAuthFade { 0% { opacity:0; } 4% { opacity:1; } 20% { opacity:1; } 24% { opacity:0; } 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .st-auth-photos img { animation:none; } .st-auth-photos img:first-child { opacity:1; } }
.st-auth-copy { position:relative; z-index:2; max-width:460px; }
.st-auth-copy h2 { font-family:var(--st-display); font-weight:400; text-transform:uppercase; font-size:clamp(46px,6vw,88px); line-height:.92; margin:12px 0 16px; letter-spacing:.5px; }
.st-auth-copy h2 span { -webkit-text-stroke:2px #fff; color:transparent; }
.st-auth-copy p { color:#c3c3ca; font-size:14px; line-height:1.7; margin:0 0 18px; }
.st-auth-copy ul { list-style:none; padding:0; margin:0; border-top:1px solid #2c2c30; }
.st-auth-copy li { padding:11px 0 11px 26px; border-bottom:1px solid #2c2c30; font-size:13px; font-weight:600; position:relative; }
.st-auth-copy li::before { content:'\2713'; position:absolute; left:0; color:#fff; font-weight:900; }
main.st-auth input:focus { border-color:#000 !important; }
@media (max-width:900px) {
    main.st-auth { grid-template-columns:1fr; min-height:0 !important; }
    .st-auth-art { position:relative; height:auto; padding:30px 6% 26px; min-height:190px; }
    .st-auth-tag { width:96px; top:18px; left:6%; }
    .st-auth-copy h2 { font-size:44px; margin:6px 0 6px; }
    .st-auth-copy p, .st-auth-copy ul { display:none; }
    main.st-auth > :not(.st-auth-art) { margin:28px 5% 44px; width:auto; }
}
/* on the sign in / create account pages the page itself must not be a scroll box, so the brand panel can stay in view (sticky) */
html:has(main.st-auth), body:has(main.st-auth) { overflow-x:clip !important; }

/* ---------- "Read reviews" button ---------- */
.rv-open { background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#bbb; }
.rv-open:hover { color:#111; text-decoration-color:#111; }
.st-meta .rv-open { font-size:11px; letter-spacing:.2px; }
.plp-stars .rv-open { font-size:11px; font-weight:700; margin-left:6px; }