/*
Theme Name: GameDress
Theme URI: https://mygamedress.com
Author: GameDress
Description: Custom WooCommerce theme for GameDress — cute college game day outfits. Editorial layout with a video hero, dynamic featured products, shop-by-team categories and a fully theme-customizer-driven homepage.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: gamedress
Tags: e-commerce, custom-colors, custom-menu, featured-images, translation-ready
*/

/* -----------------------------------------------------------
   Tokens
----------------------------------------------------------- */
:root{
  --navy:#142B4A;
  --ink:#000000;
  --red:#D83A32;
  --warm-white:#F7F3EA;
  --blue:#4F7CBF;
  --gray:#D9D9D9;
  --paper:#EFEAE0;
  --maroon:#D83A32;
  --navy-a55:#000000;
  --navy-a60:#000000;
  --navy-a82:#000000;
  --white-a15:rgba(247,243,234,0.15);

  --font-display:'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --font-body:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:'Kaushan Script', cursive;

  --container: 1280px;
  --gutter: 24px;
}

/* -----------------------------------------------------------
   Reset
----------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* Safety net: several sections (marquees, carousels) intentionally render
   content wider than the viewport and rely on their own overflow:hidden
   to clip it. This guarantees none of that — or a mobile browser sizing
   a position:fixed element oddly — can ever force a page-wide horizontal
   scrollbar, without changing normal vertical scrolling at all. */
html, body{ overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  background:var(--warm-white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
.screen-reader-text{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px; height:1px; overflow:hidden;
}
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.eyebrow{
  display:block;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
  margin-bottom:16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:14px 32px;
  font-size:12px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  white-space:nowrap;
}
.btn-outline-light{
  border:1.5px solid var(--warm-white);
  color:var(--warm-white);
}
.btn-outline-light:hover{ background:var(--warm-white); color:var(--ink); }
.btn-fill{
  background:var(--red);
  color:#fff;
  border:1.5px solid var(--red);
}
.btn-fill:hover{ background:#c22f28; border-color:#c22f28; }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--red);
}
.link-arrow svg{ transition:transform .15s ease; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* -----------------------------------------------------------
   Header
----------------------------------------------------------- */
.site-header{
  background:var(--warm-white);
  border-bottom:1px solid var(--gray);
  position:relative;
  z-index:40;
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  height:88px;
}
.site-header__nav{ display:flex; gap:32px; align-items:center; flex:1; min-width:0; }
.site-header__nav li{ list-style:none; }
.site-header__nav a{
  font-size:12px;
  font-weight:500;
  letter-spacing:1px;
  text-transform:uppercase;
  white-space:nowrap;
}
.site-header__nav .current-menu-item > a{
  border-bottom:1.5px solid var(--navy);
  padding-bottom:4px;
}
.site-header__logo{
  font-family:var(--font-script);
  font-size:28px;
  color:var(--navy);
  display:flex;
  align-items:flex-start;
  gap:3px;
  line-height:1;
  flex-shrink:0;
}
.site-header__logo sup{ font-family:var(--font-body); font-size:10px; margin-top:2px; }
.site-header__icons{ display:flex; gap:22px; align-items:center; flex:1; justify-content:flex-end; min-width:0; }
.site-header__icons a,
.site-header__icons button{ display:flex; align-items:center; flex-shrink:0; }
/* Icon size lives here, not on the inline SVG attributes, so every header
   icon (search/account/cart) stays a consistent 30px and resizes cleanly
   at the mobile breakpoint instead of overflowing its box. */
.site-header__icons svg{ width:30px; height:30px; flex-shrink:0; }
.cart-count{
  position:absolute;
  top:-6px; right:-8px;
  min-width:15px; height:15px;
  padding:0 3px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-size:9px;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.icon-wrap{ position:relative; display:flex; }
/* The toggle's box and its icon are locked to the same size (svg at
   width/height:100%) so bumping this one value can never make the icon
   larger than its button and spill outside the header/container. */
.menu-toggle{ display:none; position:relative; width:28px; height:28px; flex-shrink:0; }
.menu-toggle__icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.menu-toggle__icon svg{ width:100%; height:100%; }
.menu-toggle__icon--close{ opacity:0; }
.menu-toggle.is-open .menu-toggle__icon--open{ opacity:0; }
.menu-toggle.is-open .menu-toggle__icon--close{ opacity:1; }
.search-toggle{ display:flex; }
.mobile-nav{ display:none; }
.mobile-nav li{ list-style:none; }

.site-search{
  position:fixed; left:0; right:0; top:0;
  background:var(--warm-white);
  border-bottom:1px solid var(--gray);
  transform:translateY(-100%);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
  z-index:50;
  padding:24px;
}
.site-search.is-open{ transform:translateY(0); opacity:1; }
.site-search__inner{
  max-width:640px; margin:0 auto;
  display:flex; align-items:center; gap:16px;
}
/* Flex items default to min-width:auto, which lets an <input> refuse to
   shrink below its intrinsic width — on a narrow phone screen that pushed
   the close button out past the (now globally overflow-hidden) edge of
   the page entirely, making it unreachable rather than just off-screen. */
.site-search__inner form{ flex:1; min-width:0; max-width:none !important; }
.site-search__inner .search-form{ min-width:0; }
.site-search__inner input[type="search"]{ min-width:0; }
.site-search__close{ flex-shrink:0; }
@media (max-width:480px){
  .site-search{ padding:16px; }
  .site-search__inner{ gap:10px; }
}

@media (max-width: 1100px){
  .site-header__nav{ display:none; }
  .menu-toggle{ display:flex; align-items:center; }
  .site-header__inner{ gap:16px; }
  .mobile-nav{
    display:block;
    position:fixed; inset:88px 0 0 0;
    width:100%; max-width:100vw;
    background:var(--warm-white);
    padding:32px 24px;
    box-sizing:border-box;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    z-index:39;
    overflow-y:auto;
  }
  .mobile-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .mobile-nav a{
    display:block;
    padding:16px 0;
    border-bottom:1px solid var(--gray);
    font-size:15px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:1px;
  }
}
@media (max-width:480px){
  .site-header__icons{ gap:16px; }
  .site-header__icons svg{ width:24px; height:24px; }
  .menu-toggle{ width:24px; height:24px; }
}

/* -----------------------------------------------------------
   Hero (video)
----------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  /* A fixed px height combined with a full-width section means the box's
     aspect ratio grows wider the wider the screen is — object-fit:cover
     then has to crop more and more off the top/bottom to fill that
     increasingly wide shape, which is what was cutting people's heads off
     on large monitors. Tying height to viewport height instead keeps the
     box's own aspect roughly in line with the screen's, so cover never has
     to crop nearly as aggressively. */
  height:82vh;
  min-height:480px;
  max-height:760px;
  display:flex;
  align-items:flex-end;
  background:linear-gradient(160deg,#0a1626 0%,#142B4A 55%,#1d3a63 100%);
}
.hero__media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,22,38,0.78) 0%, rgba(10,22,38,0.15) 55%, rgba(10,22,38,0.35) 100%);
}
.hero__badge{
  position:absolute; top:20px; right:20px;
  border:1px dashed rgba(247,243,234,0.45);
  border-radius:20px;
  padding:6px 14px;
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(247,243,234,0.7);
}
.hero__play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:76px; height:76px;
  border-radius:50%;
  border:1.5px solid rgba(247,243,234,0.65);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hero__content{
  position:relative; z-index:2;
  width:100%;
  padding:56px var(--gutter);
}
.hero__content-inner{ max-width:var(--container); margin:0 auto; }
.hero__title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(32px, 6vw, 60px);
  line-height:1.1;
  color:var(--warm-white);
  margin:0 0 28px;
  max-width:680px;
}

@media (max-width:640px){
  .hero{ height:75vh; min-height:420px; max-height:620px; }
  .hero__play{ width:56px; height:56px; }
}

/* -----------------------------------------------------------
   Marquee
----------------------------------------------------------- */
.marquee{
  height:48px;
  background:var(--navy);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.marquee__track{
  display:flex;
  gap:44px;
  white-space:nowrap;
  padding-left:44px;
  animation:marquee 24s linear infinite;
  width:max-content;
}
.marquee__track span.item{
  font-size:11px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--warm-white);
}
.marquee__dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--red);
  align-self:center;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
}

/* -----------------------------------------------------------
   Gallery marquee — infinite-loop photo strip, edge-to-edge,
   sized so exactly 5 photos show at once on desktop.
----------------------------------------------------------- */
.gallery-marquee-section{ background:var(--warm-white); padding:96px 0; }
.gallery-marquee-section .section-head{ margin-bottom:40px; }
.gallery-marquee__description{ font-size:14px; color:var(--navy-a55); margin:12px 0 0; max-width:52ch; }

.gallery-marquee{ overflow:hidden; }
.gallery-marquee__track{
  display:flex;
  width:max-content;
  animation:marquee 110s linear infinite;
}
.gallery-marquee:hover .gallery-marquee__track{ animation-play-state:paused; }
.gallery-marquee__item{
  flex-shrink:0;
  width:20vw;
  aspect-ratio:3/4;
  background:var(--paper);
}
.gallery-marquee__item img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion: reduce){
  .gallery-marquee__track{ animation:none; }
  .gallery-marquee{ overflow-x:auto; }
}
@media (max-width:900px){
  .gallery-marquee__item{ width:33.333vw; }
}
@media (max-width:640px){
  .gallery-marquee-section{ padding:64px 0; }
  .gallery-marquee__item{ width:50vw; }
}

/* -----------------------------------------------------------
   Brand story
----------------------------------------------------------- */
.brand-story{
  padding:96px var(--gutter);
  background:#fff;
}
.brand-story__inner{
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  gap:64px;
}
.brand-story__title{
  width:34%;
  flex-shrink:0;
}
.brand-story__title h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:32px;
  line-height:1.25;
  color:var(--ink);
}
.brand-story__body{ max-width:640px; }
.brand-story__body p{
  font-size:15.5px;
  line-height:1.85;
  color:var(--navy-a82);
  margin:0 0 22px;
}
@media (max-width:900px){
  .brand-story__inner{ flex-direction:column; gap:32px; }
  .brand-story__title{ width:100%; }
}

/* -----------------------------------------------------------
   Section heading row
----------------------------------------------------------- */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(28px, 4vw, 40px);
  color:var(--ink);
}
.section-head .link-underline{
  font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--navy); padding-bottom:4px;
}

/* -----------------------------------------------------------
   Product grid + cards (shared: home + shop archive)
----------------------------------------------------------- */
.featured-products{ padding:96px var(--gutter); background:var(--warm-white); }
.featured-products__inner{ max-width:var(--container); margin:0 auto; }

.products-grid,
ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:36px;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
@media (max-width:960px){ .products-grid, ul.products{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; } }
@media (max-width:520px){ .products-grid, ul.products{ grid-template-columns:1fr; } }

/* -----------------------------------------------------------
   Carousel — used by Featured Products and Shop by Team on the
   homepage only (the Shop archive keeps its plain paginated grid
   above, untouched: these rules only apply once wrapped in
   .carousel, and .carousel__track wins on specificity over the
   shared grid rule above so the same markup can do either).
----------------------------------------------------------- */
.carousel{ position:relative; }
.carousel__viewport{ overflow:hidden; }
.carousel__track.products,
.carousel__track.team-grid{
  display:flex !important;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:4px;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track > *{ scroll-snap-align:start; flex:0 0 auto; }
/* !important is required here: .product-card, ul.products li.product sets
   width:auto !important elsewhere, which otherwise wins regardless of this
   rule's higher specificity — leaving flex-basis:auto to size each card by
   its own title-text width instead of an even column. That's what made
   Ohio/Texas (shorter titles) render narrower, and shorter cards, than
   the others (confirmed live: all cards had identical image aspect ratio
   but different actual widths tracking their title length exactly). */
.carousel__track.products > li.product{ width:calc((100% - 3 * 36px) / 4) !important; }
.carousel__track.team-grid > .team-block{ width:calc((100% - 3 * 28px) / 4) !important; }
@media (max-width:960px){
  .carousel__track.products > li.product{ width:calc((100% - 28px) / 2.15) !important; }
  .carousel__track.team-grid > .team-block{ width:calc((100% - 24px) / 2.15) !important; }
}
@media (max-width:520px){
  .carousel__track.products > li.product{ width:82% !important; }
  .carousel__track.team-grid > .team-block{ width:78% !important; }
}
.carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; flex-shrink:0;
  border-radius:50%; background:#fff; border:1px solid var(--gray);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(17,17,17,0.12);
  z-index:2; cursor:pointer;
  transition:opacity .15s ease, background .15s ease;
}
.carousel__nav svg{ transition:stroke .15s ease; }
.carousel__nav:hover{ background:var(--navy); }
.carousel__nav:hover svg{ stroke:#fff; }
.carousel__nav--prev{ left:-22px; }
.carousel__nav--prev svg{ transform:rotate(180deg); }
.carousel__nav--next{ right:-22px; }
.carousel__nav[disabled]{ opacity:0; pointer-events:none; }
@media (max-width:1180px){
  .carousel__nav{ display:none; }
}

.product-card, ul.products li.product{
  width:auto !important;
  margin:0 !important;
  float:none !important;
  padding:0 !important;
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid var(--gray);
  border-radius:10px;
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.product-card:hover, ul.products li.product:hover{
  transform:translateY(-4px);
  border-color:var(--navy);
  box-shadow:0 16px 32px rgba(17,17,17,0.1);
}
.product-card__media{
  position:relative;
  /* Matches the product photos' actual upload dimensions (640x736) — with
     the box in the same shape as the source photo, object-fit:cover has
     nothing left to crop, instead of trimming the top of models' heads to
     force the photo into a squarer box than it naturally is. */
  aspect-ratio:640/736;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.product-card__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
  transition:opacity .25s ease, transform .4s ease;
}
.product-card:hover .product-card__media img{ transform:scale(1.03); }
.product-card__img--hover{ opacity:0; }
.product-card__media:hover .product-card__img--main{ opacity:0; }
.product-card__media:hover .product-card__img--hover{ opacity:1; }
.product-card__tag{
  position:absolute; top:14px; left:14px;
  background:rgba(255,255,255,0.92);
  border-radius:20px;
  padding:5px 12px 5px 8px;
  display:flex; align-items:center; gap:6px;
  z-index:2;
}
.product-card__tag .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.product-card__tag span.label{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--ink); }
.product-card__wishlist{ position:absolute; top:14px; right:14px; z-index:2; }
.product-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:18px 20px 20px;
}
.product-card__body .name,
ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);
  font-size:17px; font-weight:500; color:var(--ink);
  line-height:1.3;
  margin:0 0 8px;
  /* Reserve space for 2 lines always — otherwise a short title like "Ohio
     Gameday Pocket Dress" wraps to one line while a longer one wraps to
     two, and the whole card (and its image, sized off the same width via
     aspect-ratio) ends up visibly shorter than its neighbors. */
  min-height:2.6em;
}
.product-card__body .price,
ul.products li.product .price{
  font-size:14px; font-weight:600; color:var(--ink) !important;
  font-family:var(--font-body);
}
.product-card__body .price del{ color:var(--navy-a55) !important; opacity:1; margin-right:6px; }
.product-card__body .price ins{ text-decoration:none; }
.product-card__body a.button,
.product-card__body a.added_to_cart{
  display:block;
  text-align:center;
  margin-top:18px;
  padding:12px;
  border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  color:#fff;
  background:var(--navy);
  transition:background .15s ease;
}
.product-card__body a.button:hover,
.product-card__body a.added_to_cart:hover{ background:var(--red); }
.product-card__body > a.button{ margin-top:auto; }
/* a.button--coming-soon ties a.button on specificity (both are one class
   + the <a> element), so source order alone decided the winner and the
   plain a.button rule above happened to win — the button rendered navy
   instead of maroon regardless of this rule. !important removes the
   ambiguity outright. */
.product-card__body a.button--coming-soon{
  display:flex !important; align-items:center; justify-content:center; gap:6px;
  text-align:center; margin-top:auto;
  padding:12px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  color:#fff !important; background:var(--maroon) !important;
  box-shadow:0 6px 16px rgba(216,58,50,0.35);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.product-card__body a.button--coming-soon svg{ transition:transform .15s ease; }
.product-card__body a.button--coming-soon:hover{
  background:#c22f28 !important;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(216,58,50,0.45);
}
.product-card__body a.button--coming-soon:hover svg{ transform:translateX(3px); }
.product-card__body .button--out-of-stock{
  display:block; text-align:center; margin-top:auto;
  padding:12px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  color:var(--navy-a55); background:var(--warm-white); border:1px solid var(--gray);
  cursor:default;
}
.product-card__tag--coming-soon{ background:var(--maroon) !important; }
.product-card__tag--coming-soon .label{ color:#fff; }
.product-card__tag--out-of-stock{ background:var(--red) !important; }
.product-card__tag--out-of-stock .label{ color:#fff; }
.product-card__placeholder{ width:56px; height:56px; }

/* -----------------------------------------------------------
   Shop by team
----------------------------------------------------------- */
.shop-by-team{
  padding:72px var(--gutter);
  background:#fff;
  border-top:1px solid var(--gray);
  border-bottom:1px solid var(--gray);
}
.shop-by-team__inner{ max-width:var(--container); margin:0 auto; }
.shop-by-team h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:28px;
  margin:0 0 28px;
  color:var(--ink);
}
.team-chips{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.team-chip{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--gray);
  border-radius:999px;
  padding:11px 22px;
}
.team-chip .dot{ width:9px; height:9px; border-radius:50%; }
.team-chip .label{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--ink); }

/* -----------------------------------------------------------
   Shop by team (product-card grid, distinguished from Featured Products
   above it with a white background + top divider)
----------------------------------------------------------- */
.shop-by-team{ background:#fff; border-top:1px solid var(--gray); }
.team-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:28px;
}
@media (max-width:960px){ .team-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .team-grid{ grid-template-columns:1fr; } }
.team-block{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  aspect-ratio:3/4;
  border-radius:10px;
  overflow:hidden;
  padding-bottom:22px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.team-block:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(17,17,17,0.18); }
.team-block__icon{ flex:1; display:flex; align-items:center; justify-content:center; }
.team-block__scrim{
  position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(0deg, rgba(0,0,0,0.4), transparent);
  pointer-events:none;
}
.team-block__label{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:500; font-size:18px; letter-spacing:0.3px;
  color:#fff;
}
.team-block__photo{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  object-position:center top;
  transition:transform .4s ease;
}
.team-block--photo:hover .team-block__photo{ transform:scale(1.05); }
.team-grid__hint{
  margin:20px 0 0; font-size:12px; color:var(--navy-a55); font-style:italic;
}

/* -----------------------------------------------------------
   Collection banner — full-bleed static statement + CTA
----------------------------------------------------------- */
.collection-banner{
  position:relative;
  padding:120px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:linear-gradient(160deg,#0a1626 0%,#142B4A 55%,#1d3a63 100%);
  background-size:cover;
  background-position:center;
}
.collection-banner__overlay{
  position:absolute; inset:0;
  background:rgba(10,22,38,0.4);
}
.collection-banner__inner{ position:relative; z-index:1; max-width:640px; }
.collection-banner__rule{ width:48px; height:2px; background:var(--red); margin:0 auto 28px; }
.collection-banner__heading{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(28px, 4vw, 42px);
  line-height:1.25;
  color:var(--warm-white);
  margin:0 0 32px;
}
@media (max-width:640px){
  .collection-banner{ padding:88px var(--gutter); }
}

/* -----------------------------------------------------------
   Your Team. Your Pride. — self-contained fact-card grid, no photo
   dependency (a half-empty placeholder panel never looked finished).
----------------------------------------------------------- */
.pride{ background:#fff; padding:112px var(--gutter); text-align:center; }
.pride__inner{ max-width:900px; margin:0 auto; }
.pride h2{
  font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4vw,42px);
  line-height:1.15; color:var(--ink); margin:0 0 48px;
}
.pride__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
  text-align:left;
}
.pride__card{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--warm-white);
  border:1px solid var(--gray);
  border-radius:10px;
  padding:24px 26px;
}
.pride__dot{
  flex-shrink:0; margin-top:7px;
  width:8px; height:8px; border-radius:50%; background:var(--red);
}
.pride__card p{ font-size:14.5px; line-height:1.6; color:var(--navy-a82); margin:0; }
.pride__note{
  font-size:13px; color:var(--navy-a55); line-height:1.6;
  margin:36px 0 0; text-align:center;
}
@media (max-width:640px){
  .pride{ padding:72px var(--gutter); }
  .pride__grid{ grid-template-columns:1fr; }
}

/* -----------------------------------------------------------
   How to Wear / Made with Care / Contact Us
----------------------------------------------------------- */
.value-row-wrap{ background:var(--warm-white); border-top:1px solid var(--gray); }
.value-row{
  max-width:var(--container);
  margin:0 auto;
  padding:96px var(--gutter);
}
.value-row__eyebrow-wrap{ text-align:center; margin-bottom:12px; }
.value-row__eyebrow-wrap .eyebrow{ margin-bottom:0; }
.value-row__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:28px;
  margin-top:28px;
}
.value-row__card{
  text-align:center;
  background:#fff;
  border:1px solid var(--gray);
  border-radius:10px;
  padding:40px 28px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.value-row__card:hover{
  transform:translateY(-4px);
  border-color:var(--navy);
  box-shadow:0 16px 32px rgba(17,17,17,0.1);
}
.value-row__icon{
  width:64px; height:64px; margin:0 auto 22px;
  border-radius:50%; background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.value-row__card:hover .value-row__icon{ background:var(--red); }
.value-row__card h3{
  font-family:var(--font-display); font-weight:500; font-size:19px; color:var(--ink); margin:0 0 12px;
}
.value-row__card p{ font-size:13.5px; line-height:1.65; color:var(--navy-a82); margin:0; }
@media (max-width:640px){
  .value-row{ padding:64px var(--gutter); }
  .value-row__grid{ grid-template-columns:1fr; gap:20px; }
}

/* -----------------------------------------------------------
   From the Blog
----------------------------------------------------------- */
.blog-preview{ background:#fff; border-top:1px solid var(--gray); padding:96px var(--gutter); }
.blog-preview__inner{ max-width:var(--container); margin:0 auto; }
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:32px;
}
.blog-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--gray);
  border-radius:10px;
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.blog-card:hover{
  transform:translateY(-4px);
  border-color:var(--navy);
  box-shadow:0 16px 32px rgba(0,0,0,0.1);
}
.blog-card__media-link{ display:block; }
.blog-card__media{
  position:relative; aspect-ratio:4/3;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.blog-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.blog-card__body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.blog-card__date{
  display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--navy-a55);
  margin-bottom:10px;
}
.blog-card__body h3{
  font-family:var(--font-display); font-weight:500; font-size:19px; line-height:1.3;
  margin:0 0 10px;
}
.blog-card__body h3 a{ color:var(--ink); }
.blog-card__body p{ font-size:13.5px; line-height:1.6; color:var(--navy-a82); margin:0 0 16px; }
.blog-card__readmore{ margin-top:auto; }
@media (max-width:960px){ .blog-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){
  .blog-preview{ padding:64px var(--gutter); }
  .blog-grid{ grid-template-columns:1fr; }
}

/* -----------------------------------------------------------
   Footer
----------------------------------------------------------- */
.site-footer{ background:#fff; border-top:1px solid var(--gray); padding:72px var(--gutter) 32px; }
.site-footer__inner{ max-width:var(--container); margin:0 auto; }
.site-footer__grid{ display:flex; gap:56px; flex-wrap:wrap; }
.site-footer__brand{ flex:1.4 1 220px; }
.site-footer__brand .logo{ font-family:var(--font-script); font-size:26px; color:var(--navy); }
.site-footer__logo-img{ max-height:40px; width:auto; }
.site-footer__brand p{ font-size:13px; color:var(--navy-a60); line-height:1.6; margin-top:14px; max-width:240px; }
.site-footer__social{ display:flex; gap:14px; margin-top:18px; }
.site-footer__social a{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--gray); transition:background .15s ease, border-color .15s ease;
}
.site-footer__social a:hover{ background:var(--navy); border-color:var(--navy); }
.site-footer__social a:hover svg{ stroke:#fff; }
.site-footer__col{ flex:1 1 160px; }
.site-footer__col-second{ margin-top:11px; }
.site-footer__col h3{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--navy-a55);
  margin:0 0 16px; font-weight:600;
}
.site-footer__col ul{ display:flex; flex-direction:column; gap:11px; }
.site-footer__col a{ font-size:14px; color:var(--ink); }
.site-footer__signup{ flex:1.6 1 240px; }
.site-footer__signup p{ font-size:13px; color:var(--navy-a60); margin:0 0 16px; line-height:1.6; }
.site-footer__signup form{ display:flex; border-bottom:1px solid var(--navy); padding-bottom:10px; gap:8px; }
.site-footer__signup input[type=email]{ flex:1; background:transparent; border:none; min-width:0; }
.site-footer__signup button{ color:var(--red); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1px; cursor:pointer; }
.site-footer__signup-notice{ font-size:13px; color:var(--navy); font-weight:600; padding-bottom:10px; border-bottom:1px solid var(--navy); }
.site-footer__signup-notice--error{ color:var(--red); border-bottom-color:var(--red); }
.site-footer__bottom{
  border-top:1px solid var(--gray);
  margin-top:48px; padding-top:24px;
  font-size:12px; color:var(--navy-a55);
}

/* -----------------------------------------------------------
   Generic page / blog / 404
----------------------------------------------------------- */
.page-wrap{ max-width:840px; margin:0 auto; padding:72px var(--gutter) 96px; }
.page-title{ font-family:var(--font-display); font-weight:500; font-size:40px; margin-bottom:32px; }
.entry-content{ font-size:16px; line-height:1.8; color:var(--navy-a82); }
.entry-content p{ margin:0 0 20px; }
.breadcrumb{ font-size:12px; color:var(--navy-a55); }
.breadcrumb .sep{ margin:0 8px; }

/* -----------------------------------------------------------
   Interior page hero — shared header band for Wholesale, Contact,
   Blog listing and any future one-off page.
----------------------------------------------------------- */
.page-hero{
  background:var(--warm-white);
  border-bottom:1px solid var(--gray);
  padding:72px var(--gutter) 56px;
  text-align:center;
}
.page-hero__inner{ max-width:640px; margin:0 auto; }
.page-hero .eyebrow{ justify-content:center; display:flex; }
.page-hero h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(32px, 5vw, 48px); line-height:1.15;
  color:var(--ink); margin:0 0 16px;
}
.page-hero p{ font-size:15px; line-height:1.7; color:var(--navy-a82); margin:0; }
@media (max-width:640px){ .page-hero{ padding:56px var(--gutter) 40px; } }

/* -----------------------------------------------------------
   Wholesale page
----------------------------------------------------------- */
.wholesale-embed-section{ padding:80px var(--gutter); }
.wholesale-embed-card{
  max-width:960px; margin:0 auto;
  background:#fff; border:1px solid var(--gray); border-radius:16px;
  box-shadow:0 16px 40px rgba(17,17,17,0.06);
  padding:24px;
}
/* Faire's embed is a fixed 900x600 layout, not a fluid one — resizing the
   iframe element itself just changes its internal viewport and makes
   Faire's own responsive breakpoints kick in unpredictably (that's what
   produced the broken/half-empty card). Instead we keep the iframe at its
   native 900x600 and visually scale the whole thing down with a CSS
   transform (sized by assets/js/main.js), which leaves Faire's own layout
   untouched at every screen size. */
.wholesale-embed{ width:100%; max-width:900px; margin:0 auto; overflow:hidden; }
.wholesale-embed__inner{ width:900px; height:600px; transform-origin:top left; }
.wholesale-embed__inner iframe{
  display:block; width:900px !important; height:600px !important; border:none !important;
}
.site-cta-band{
  text-align:center; padding:88px var(--gutter);
  background:linear-gradient(160deg,#0a1626 0%,#142B4A 55%,#1d3a63 100%);
}
.site-cta-band h2{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(26px, 4vw, 36px); color:var(--warm-white); margin:0 0 24px;
}
@media (max-width:640px){
  .wholesale-embed-section{ padding:56px var(--gutter); }
  .wholesale-embed-card{ padding:14px; }
}

/* -----------------------------------------------------------
   Contact page
----------------------------------------------------------- */
.contact-section{ padding:80px var(--gutter) 96px; }
.contact-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:start;
}
.contact-form-card, .contact-info-card{
  background:#fff; border:1px solid var(--gray); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.05);
  padding:36px;
}
.contact-form-card h2, .contact-info-card h2{
  font-family:var(--font-display); font-weight:500; font-size:24px; color:var(--ink); margin:0 0 24px;
}
.contact-form__row{ margin-bottom:20px; }
.contact-form__row label{
  display:block; font-size:12px; font-weight:600; letter-spacing:0.5px;
  text-transform:uppercase; color:var(--navy-a82); margin-bottom:8px;
}
.contact-form__row input,
.contact-form__row textarea{
  width:100%; border:1px solid var(--gray); border-radius:8px;
  padding:13px 16px; font-size:14px; color:var(--ink); background:var(--warm-white);
}
.contact-form__row textarea{ resize:vertical; min-height:140px; }
.contact-form__row input:focus,
.contact-form__row textarea:focus{ outline:none; border-color:var(--navy); background:#fff; }
.contact-form__honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form-card .btn-fill{ border:none; cursor:pointer; }
.contact-form__notice{
  border-radius:8px; padding:14px 18px; margin-bottom:24px;
  font-size:13.5px; line-height:1.6;
}
.contact-form__notice--success{ background:#eaf5ec; color:#1e5c2c; border:1px solid #bfe3c6; }
.contact-form__notice--error{ background:#fdeceb; color:#8a2119; border:1px solid #f3c3bf; }
.contact-info-card__intro{
  font-size:16px; line-height:1.7; color:var(--ink); margin:0 0 28px; font-weight:500;
}
.contact-info-card__intro a{ color:var(--red); text-decoration:underline; }
.contact-info-list{ display:flex; flex-direction:column; gap:20px; }
.contact-info-list__item{ display:flex; gap:14px; align-items:flex-start; }
.contact-info-list__icon{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--navy); display:flex; align-items:center; justify-content:center;
}
.contact-info-list__item h3{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--navy-a55);
  margin:0 0 4px; font-weight:600;
}
.contact-info-list__item p{ font-size:14px; line-height:1.6; color:var(--ink); margin:0; white-space:pre-line; }
.contact-info-list__item p a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .contact-section{ padding:56px var(--gutter) 72px; }
  .contact-form-card, .contact-info-card{ padding:26px; }
}

/* -----------------------------------------------------------
   Blog listing (home.php / index.php)
----------------------------------------------------------- */
.blog-listing{ background:#fff; padding:80px var(--gutter) 96px; }
.blog-listing .container > .blog-grid{ margin-bottom:56px; }
.blog-empty{ text-align:center; font-size:14px; color:var(--navy-a55); padding:40px 0; }
.blog-pagination{ display:flex; justify-content:center; }
.blog-pagination .nav-links{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
}
.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers{
  display:flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border:1px solid var(--gray); border-radius:8px;
  font-size:13px; font-weight:600; color:var(--ink);
}
.blog-pagination span.page-numbers.current{ background:var(--navy); border-color:var(--navy); color:#fff; }
.blog-pagination a.page-numbers:hover{ border-color:var(--navy); }
@media (max-width:640px){ .blog-listing{ padding:56px var(--gutter) 72px; } }