/* =========================================================
   TOXICOTRIBE — SHARED COMPONENTS
   Header, mega menu, footer, product card, tiles, cart drawer
   ========================================================= */

/* ---------------------------------------------------------
   ANNOUNCEMENT BAR
   --------------------------------------------------------- */
.announce{
  height: var(--announce-h);
  background: var(--tt-black);
  color: var(--tt-white);
  display:flex; align-items:center; justify-content:center;
  /* Agency's accent voice — one weight is all this strip needs. */
  font-family: var(--font-accent); font-weight:400;
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform:uppercase;
  overflow:hidden; white-space:nowrap;
}
.announce span{ opacity:.92; }
.announce__full{ display:none; }
.announce__short{ display:inline; }
@media(min-width:640px){
  .announce__full{ display:inline; }
  .announce__short{ display:none; }
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index:60;
  background: var(--tt-white);
  border-bottom: 1px solid var(--c-border);
}
.header-row{
  height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-6);
}
.logo{
  /* Moon Walk is the wordmark face — display-only letterforms, used
     nowhere else on the site. */
  font-family: var(--font-logo); font-weight:400; font-size:1.55rem;
  letter-spacing:0.01em; text-transform:uppercase; color:var(--tt-black);
  /* gap:0 — TOXICOTRIBE is one word; the flex gap plus Moon Walk's wide
     sidebearings was splitting the wordmark into "TOXICO TRIBE". */
  display:flex; align-items:center; gap:0; flex-shrink:0;
}
.logo em{ font-style:normal; color: var(--tt-red); }

.main-nav{ display:flex; align-items:center; gap: var(--sp-6); height:100%; }
.main-nav__item{ position:relative; height:100%; display:flex; align-items:center; }
.main-nav__link{
  font-family: var(--font-display); font-weight:600; font-size:0.9rem;
  letter-spacing: var(--ls-cap); text-transform:uppercase; padding: 4px 2px;
  border-bottom: 2px solid transparent; height:100%; display:flex; align-items:center;
}
.main-nav__link:hover, .main-nav__item.is-open .main-nav__link{ border-color: var(--tt-red); }
.main-nav__link--sale{ color: var(--tt-red); }

.utility-row{ display:flex; align-items:center; gap: var(--sp-1); flex-shrink:0; }

/* ---------------------------------------------------------
   MEGA MENU
   --------------------------------------------------------- */
.mega{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:min(920px, 90vw);
  background: var(--tt-white);
  border:1px solid var(--c-border); border-top:2px solid var(--tt-black);
  box-shadow: 0 18px 32px -12px rgba(0,0,0,.14);
  padding: var(--sp-6);
  display:none;
  z-index:50;
}
.main-nav__item.is-open .mega{ display:block; }
.mega__grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)) minmax(0,1.2fr); gap: var(--sp-6); }
.mega__col-title{
  font-family: var(--font-display); font-weight:700; font-size:0.72rem;
  letter-spacing: var(--ls-wide); color: var(--c-text-muted); margin-bottom: var(--sp-3);
}
.mega__list{ display:flex; flex-direction:column; gap: var(--sp-2); }
.mega__list a{ font-size:0.9rem; }
.mega__list a:hover{ color: var(--tt-red); }
.mega__feature{ position:relative; overflow:hidden; aspect-ratio: 4/5; background: var(--c-surface); }
.mega__feature img{ width:100%; height:100%; object-fit:cover; }
.mega__feature figcaption{
  position:absolute; left:0; bottom:0; right:0; padding: var(--sp-4);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
  color: var(--tt-white); font-family: var(--font-display); font-weight:700;
  letter-spacing: var(--ls-cap); text-transform:uppercase; font-size:0.95rem;
}

/* ---------------------------------------------------------
   MOBILE NAV DRAWER
   --------------------------------------------------------- */
.mobile-drawer{
  position:fixed; inset:0; z-index:80; display:none;
}
.mobile-drawer.is-open{ display:block; }
.mobile-drawer__scrim{ position:absolute; inset:0; background:rgba(10,10,10,.5); }
.mobile-drawer__panel{
  position:absolute; top:0; left:0; height:100%; width:min(340px, 86vw);
  background: var(--tt-white); overflow-y:auto;
  padding: var(--sp-5);
}
.mobile-drawer__link{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--sp-4) 0; border-bottom:1px solid var(--c-border);
  font-family: var(--font-display); font-weight:600; letter-spacing: var(--ls-cap);
  text-transform:uppercase; font-size:1.05rem;
}

/* ---------------------------------------------------------
   PRODUCT CARD
   --------------------------------------------------------- */
.product-card{ position:relative; }
.product-card__media{
  display:block; position:relative; aspect-ratio: 3/4; background: var(--c-surface); overflow:hidden;
}
.product-card__media img,
.product-card__media .ph{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  transition: opacity var(--dur-base) var(--ease);
}
.product-card__media img.is-hover,
.product-card__media .ph.is-hover{ opacity:0; }
.product-card:hover .product-card__media img.is-base,
.product-card:hover .product-card__media .ph.is-base{ opacity:0; }
.product-card:hover .product-card__media img.is-hover,
.product-card:hover .product-card__media .ph.is-hover{ opacity:1; }
.product-card__badges{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.product-card__wishlist{
  position:absolute; top:8px; right:8px; z-index:2; width:34px; height:34px;
  background: rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
}
.product-card__wishlist svg{ width:17px; height:17px; }
.product-card__wishlist[aria-pressed="true"] svg{ fill: var(--tt-red); stroke: var(--tt-red); }
.product-card__quickadd{
  position:absolute; left:8px; right:8px; bottom:8px; z-index:2;
  opacity:0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.product-card:hover .product-card__quickadd{ opacity:1; transform:translateY(0); }
.product-card__body{ padding-top: var(--sp-3); display:flex; flex-direction:column; gap:4px; }
.product-card__sport{ font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform:uppercase; color: var(--c-text-muted); }
.product-card__prices{ display:flex; align-items:baseline; gap:8px; }
.product-card__price--sale{ color: var(--tt-red); font-weight:700; }
.product-card__price--was{ color: var(--c-text-muted); text-decoration: line-through; font-size:0.85rem; }
.product-card__discount{ color: var(--tt-red); font-size:0.8rem; font-weight:600; }

.product-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4) var(--sp-4); }
@media(min-width:768px){ .product-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-5); } }
@media(min-width:1200px){ .product-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Heading + "view all" link row — shared across the homepage sections and
   the Marvel hub page, so it lives here rather than in home.css. */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: var(--sp-6); gap: var(--sp-4); flex-wrap:wrap; }

/* ---------------------------------------------------------
   SPORT / COLLECTION TILE
   --------------------------------------------------------- */
.tile{
  position:relative; overflow:hidden; aspect-ratio: 3/4; background: var(--c-surface);
  display:flex; align-items:flex-end;
}
.tile img, .tile .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform var(--dur-slow) var(--ease); }
.tile:hover img, .tile:hover .ph{ transform: scale(1.045); }
.tile::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.72) 100%);
}
.tile__label{
  position:relative; z-index:1; padding: var(--sp-4);
  color: var(--tt-white); font-family: var(--font-display); font-weight:700;
  letter-spacing: var(--ls-cap); text-transform:uppercase; font-size:1.15rem;
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.tile__label svg{ width:16px; height:16px; }

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.site-footer{ background: var(--tt-black); color: var(--tt-off-white); }
.footer-top{ padding-block: var(--sp-8); display:grid; grid-template-columns: 1.4fr repeat(4, minmax(0,1fr)); gap: var(--sp-6); }
.footer-col-title{ font-family: var(--font-display); font-weight:700; font-size:0.78rem; letter-spacing: var(--ls-wide); color: var(--tt-white); margin-bottom: var(--sp-4); }
.footer-col a{ display:block; padding-block:6px; font-size:0.88rem; color: var(--tt-gray-300); }
.footer-col a:hover{ color: var(--tt-white); }
.footer-newsletter input{ background: var(--tt-charcoal); border-color: var(--tt-gray-600); color: var(--tt-white); }
.footer-newsletter__form{ display:flex; gap:8px; }
.footer-newsletter__form input{ flex:1; min-width:0; }
.footer-newsletter__msg{ margin-top: var(--sp-3); }
.footer-newsletter__msg[hidden]{ display:none; }

/* One-line confirmation bar for the flows that redirect (unsubscribe, and
   newsletter signup without JS) — see inc/newsletter.php. */
.tt-notice-bar{
  background: var(--tt-black); color: var(--tt-white);
  font-family: var(--font-body); font-size: var(--fs-body-sm);
  text-align:center; padding: var(--sp-3) var(--sp-4);
}
.footer-bottom{
  border-top:1px solid var(--tt-charcoal-2); padding-block: var(--sp-5);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: var(--sp-3);
  font-size:0.78rem; color: var(--tt-gray-400);
}
.footer-social{ display:flex; gap: var(--sp-3); }
.footer-social a{ width:34px; height:34px; border:1px solid var(--tt-charcoal-2); display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:15px; height:15px; }

@media(max-width: 1023px){
  .footer-top{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}

/* ---------------------------------------------------------
   CART DRAWER
   --------------------------------------------------------- */
.cart-drawer{ position:fixed; inset:0; z-index:90; display:none; }
.cart-drawer.is-open{ display:block; }
.cart-drawer__scrim{ position:absolute; inset:0; background:rgba(10,10,10,.5); }
.cart-drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(420px,92vw);
  background: var(--tt-white); display:flex; flex-direction:column;
}
.cart-drawer__head{ padding: var(--sp-5); border-bottom:1px solid var(--c-border); display:flex; align-items:center; justify-content:space-between; }
.cart-drawer__body{ flex:1; overflow-y:auto; padding: var(--sp-5); display:flex; flex-direction:column; gap: var(--sp-5); }
.cart-line{ display:grid; grid-template-columns: 76px minmax(0,1fr); gap: var(--sp-3); }
.cart-line__media{ width:76px; height:96px; background: var(--c-surface); overflow:hidden; }
.cart-line__media img{ width:100%; height:100%; object-fit:cover; }
.cart-line__meta{ font-size: var(--fs-micro); color: var(--c-text-muted); letter-spacing:.04em; text-transform:uppercase; }
.cart-drawer__foot{ padding: var(--sp-5); border-top:1px solid var(--c-border); }
.cart-summary-row{ display:flex; justify-content:space-between; padding-block:6px; font-size:0.9rem; }
.cart-summary-row--total{ font-weight:700; font-size:1.05rem; padding-top:12px; border-top:1px solid var(--c-border); margin-top:6px; }

/* ---------------------------------------------------------
   SEARCH DRAWER (top-drop overlay, same show/hide mechanism as the
   cart/mobile drawers above — no CSS transform choreography, just
   display:none/block via .is-open)
   --------------------------------------------------------- */
.search-drawer{ position:fixed; inset:0; z-index:90; display:none; }
.search-drawer.is-open{ display:block; }
.search-drawer__scrim{ position:absolute; inset:0; background:rgba(10,10,10,.5); }
.search-drawer__panel{
  position:absolute; top:0; left:0; right:0; width:100%;
  background: var(--tt-white); padding: var(--sp-6) 0;
}
.search-drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--sp-4); }
.search-form{ display:flex; gap: var(--sp-3); align-items:stretch; }
.search-form__input{ flex:1; font-family: var(--font-display); font-size:1.4rem; border:none; border-bottom:2px solid var(--tt-black); padding: var(--sp-2) 0; background:transparent; }
.search-form__input:focus{ outline:none; border-color: var(--tt-red); }
.search-form__submit{ flex:none; }

/* ---------------------------------------------------------
   WHATSAPP (floating contact button + handoff button)
   Square, not the usual circular FAB — WhatsApp green keeps it
   instantly recognizable while the sharp corners keep it inside
   this design system's "no rounded corners" rule.
   --------------------------------------------------------- */
.wa-fab{
  position:fixed; right: var(--sp-4); bottom: var(--sp-4); z-index:70;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.45);
  transition: transform var(--dur-base) var(--ease);
}
.wa-fab:hover{ transform: translateY(-2px); color:#fff; }
.wa-fab svg{ width:27px; height:27px; }
/* Two templates put a fixed bar along the bottom of the viewport on small
   screens — the PDP's add-to-cart bar and Custom Lab's live price bar.
   `tt-has-bottom-bar` is added to <body> on exactly those (see
   inc/whatsapp.php) so the button sits above them instead of on top. */
@media(max-width:1099px){
  body.tt-has-bottom-bar .wa-fab{ bottom: calc(var(--sp-4) + 72px); }
}

.btn--whatsapp{ background:#25D366; color:#fff; border-color:#25D366; }
.btn--whatsapp:hover{ background:#1DA851; border-color:#1DA851; color:#fff; }

/* ---------------------------------------------------------
   IMAGE PLACEHOLDER (production-style "image TK" plate —
   used until real campaign photography / product shots / logo
   are supplied; intentionally graphic, not a generic gray box)
   --------------------------------------------------------- */
.ph{
  position:relative; width:100%; height:100%; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px),
    linear-gradient(155deg, var(--ph-a, #1B1B1D), var(--ph-b, #0A0A0A));
  color: rgba(255,255,255,.82);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.ph--light{ --ph-a:#E4E3E1; --ph-b:#C9C8C5; color: rgba(10,10,10,.62); }
.ph::before{
  content:"+"; position:absolute; top:10px; left:10px; font-size:14px; color:rgba(255,255,255,.35);
}
.ph--light::before{ color: rgba(10,10,10,.3); }
.ph::after{
  content:"+"; position:absolute; bottom:10px; right:10px; font-size:14px; color:rgba(255,255,255,.35);
}
.ph--light::after{ color: rgba(10,10,10,.3); }
.ph__tag{
  padding: var(--sp-3); font-family: var(--font-display); font-weight:600;
  letter-spacing: var(--ls-wide); text-transform:uppercase; font-size: 0.68rem;
  overflow-wrap: anywhere; min-width:0;
}
.ph__tag span{ display:block; opacity:.6; font-weight:400; letter-spacing:.05em; margin-top:2px; font-family: var(--font-body); text-transform:none; font-size:0.7rem; }

/* ---------------------------------------------------------
   FILTER DRAWER (mobile)
   --------------------------------------------------------- */
.filter-drawer{ position:fixed; inset:0; z-index:85; display:none; }
.filter-drawer.is-open{ display:block; }
.filter-drawer__scrim{ position:absolute; inset:0; background:rgba(10,10,10,.5); }
.filter-drawer__panel{
  position:absolute; bottom:0; left:0; right:0; max-height:82vh;
  background: var(--tt-white); border-top:2px solid var(--tt-black);
  display:flex; flex-direction:column;
}
.filter-drawer__head{ padding: var(--sp-4) var(--sp-5); border-bottom:1px solid var(--c-border); display:flex; justify-content:space-between; align-items:center; }
.filter-drawer__body{ overflow-y:auto; padding: var(--sp-5); }
.filter-drawer__foot{ padding: var(--sp-4) var(--sp-5); border-top:1px solid var(--c-border); display:flex; gap: var(--sp-3); }

.filter-group{ padding-block: var(--sp-4); border-bottom:1px solid var(--c-border); }
.filter-group summary{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); font-weight:600; letter-spacing:var(--ls-cap); text-transform:uppercase; font-size:0.85rem; }
.filter-group__opts{ display:flex; flex-direction:column; gap: var(--sp-2); margin-top: var(--sp-3); }
.filter-check{ display:flex; align-items:center; gap:8px; font-size:0.88rem; }
.filter-swatches{ display:flex; flex-wrap:wrap; gap:8px; margin-top: var(--sp-3); }
.filter-sizes{ display:flex; flex-wrap:wrap; gap:8px; margin-top: var(--sp-3); }

/* ---------------------------------------------------------
   CATEGORY / SECTION TABS — shared by the collection page's
   category tabs and the Drops archive's Latest/Coming Soon/Archive tabs
   --------------------------------------------------------- */
.cat-tabs{
  display:flex; gap: var(--sp-6); overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--c-border); padding-top: var(--sp-5);
}
.cat-tabs::-webkit-scrollbar{ display:none; }
.cat-tabs__link{
  font-family: var(--font-display); font-weight:600; font-size:0.9rem;
  letter-spacing: var(--ls-cap); text-transform:uppercase; white-space:nowrap;
  padding-bottom: var(--sp-4); border-bottom:2px solid transparent; flex-shrink:0;
}
.cat-tabs__link.is-active, .cat-tabs__link:hover{ border-color: var(--tt-black); }