/* ==========================================================================
   1. BASE — spacing scale and global guards for small screens
   ========================================================================== */

:root{
  /* One scale for every gutter and gap, so sections line up down the page. */
  --m-gutter   : 16px;   /* page side padding */
  --m-gap      : 12px;   /* grid gap */
  --m-block    : 44px;   /* space between major sections */
  --m-block-sm : 28px;   /* space inside a section */
  --m-radius   : 0px;    /* the brand is square-edged */
  --m-header   : 58px;   /* sticky nav height */
  --m-promo    : 42px;   /* promo bar height */
}

@media (max-width:360px){
  :root{ --m-gutter:12px; --m-gap:10px; --m-block:36px; }
}

/* Nothing may cause a sideways scroll. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip;}
img,svg,video,iframe{max-width:100%;height:auto;}

/* Consistent rhythm between the big page blocks */
.sec-head,
.category-section,
.women-section,
.fh-page,
.brands-sec,
.insta-sec,
.rev-sec,
.newsletter-sec{
  padding-left:var(--m-gutter);
  padding-right:var(--m-gutter);
}

.category-section,
.women-section,
.brands-sec,
.insta-sec,
.rev-sec{
  padding-top:var(--m-block);
  padding-bottom:var(--m-block);
}

/* Full-bleed blocks ignore the gutter on purpose */
.hero,.fbanner,.marquee,.features,.sale-banner,.gtl-hero,.fsplit-img{
  margin-left:0;margin-right:0;
}

/* Sections that used fixed desktop padding */
.gtl,.crow,.fsplit{padding-left:0;padding-right:0;}
.gtl{padding:var(--m-block) var(--m-gutter);}
.fsplit-side{padding:var(--m-block) var(--m-gutter);}

/* Kill hover-only affordances — a finger cannot hover */
@media (hover:none){
  .pcard-hover,.padd,.pwish{opacity:1 !important;transform:none !important;}
}

/* Motion preferences */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}