/* ==========================================================================
   FashionHub — typography
   A fluid scale so text grows with the viewport instead of jumping at
   breakpoints, plus the minimum sizes mobile browsers actually need.
   Loaded after style.css so it can raise sizes that were fixed in px.
   ========================================================================== */

:root{
  /* Fluid scale: clamp(min, preferred, max).
     The middle term is viewport-relative, so sizes glide between 360px
     and 1440px rather than snapping. */
  --fs-micro : clamp(0.75rem,  0.72rem + 0.14vw, 0.8125rem); /* 12 → 13px  tags, badges */
  --fs-tiny  : clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem); /* 13 → 14px  meta, captions */
  --fs-small : clamp(0.813rem, 0.78rem + 0.18vw, 0.875rem);  /* 13 → 14px  secondary copy */
  --fs-base  : clamp(0.9375rem, 0.9rem + 0.2vw,  1rem);      /* 15 → 16px  body */
  --fs-lead  : clamp(1rem,     0.96rem + 0.22vw, 1.125rem);  /* 16 → 18px  intro copy */
  --fs-h4    : clamp(1.0625rem, 1rem + 0.3vw,    1.25rem);
  --fs-h3    : clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem);
  --fs-h2    : clamp(1.5rem,   1.25rem + 1.2vw,  2.25rem);
  --fs-h1    : clamp(1.875rem, 1.4rem + 2.2vw,   3.25rem);
  --fs-hero  : clamp(2.25rem,  1.4rem + 4vw,     4rem);

  /* Rhythm */
  --lh-tight : 1.15;
  --lh-snug  : 1.35;
  --lh-body  : 1.65;
  --lh-loose : 1.85;

  /* Tracking: small uppercase labels need air, big serif headings need less */
  --tr-label : .16em;
  --tr-wide  : .22em;
  --tr-tight : -0.015em;
}

/* Crisper rendering for the serif display face */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-size:var(--fs-base);
  line-height:var(--lh-body);
}

/* Large serif headings read better slightly tightened */
h1,h2,h3,.sec-head h2,.fh-h1,.fh-h2,
.hero-text h1,.women-section-title,.related-title,
.gtl-head h2,.crow-head h2,.fsplit-head h2{
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-tight);
  font-optical-sizing:auto;
}

/* ─────────────── minimum readable sizes on small screens ───────────────
   The desktop design uses a lot of 9–11px text. That is fine on a 27"
   monitor and unreadable on a phone, so the floor is raised below 900px. */
@media (max-width:900px){
  .topbar{font-size:var(--fs-micro);letter-spacing:.08em;}
  .topbar a{font-size:var(--fs-micro);}

  .slide-tag,.pbadge,.disc,.badge,
  .gtl-eyebrow,.crow-eyebrow,.fsplit-eyebrow,
  .sec-head p,.psub,.lbl,.rev-loc,
  .hero-scroll,.pd-info .tag,.mood-label,
  .footer-col h4,.footer-col p,.pay-badge,
  .fh-badge,.ad-badge,.acc-card .cnt,
  .lb-text p,.rev-verified,.brands-sec p,
  .feat span,.insta-overlay,.marquee span{
    font-size:var(--fs-micro) !important;
    letter-spacing:var(--tr-label);
  }

  .fh-crumbs,.breadcrumb-bar,.crumb,.breadcrumb,
  .fg-count,.muted,.fh-cart-meta,.pd-section-label{
    font-size:var(--fs-tiny) !important;
  }

  .pname,.crow-name,.gtl-name,.fsplit-name,.rcard-body h4{
    font-size:var(--fs-small);
    line-height:var(--lh-snug);
  }

  .pprice,.gtl-price,.crow-price,.fsplit-price{font-size:var(--fs-base);}

  p,li,.fh-sub,.lead,.ad-hint{font-size:var(--fs-small);line-height:var(--lh-loose);}
}

/* ─────────────── iOS zoom guard ───────────────
   Mobile Safari zooms the page when a focused field is under 16px. Every
   field goes to exactly 16px on touch-sized screens, which stops the jump. */
@media (max-width:900px){
  input[type=text],input[type=email],input[type=password],input[type=tel],
  input[type=number],input[type=search],input[type=url],input[type=date],
  input[type=datetime-local],select,textarea,
  .price-inp,.sort-select,.fh-field input,.fh-field select,.fh-field textarea,
  .ad-field input,.ad-field select,.ad-field textarea,
  .search-input,.fh-search-form input{
    font-size:16px !important;
    line-height:1.4;
  }
  /* keep the visual weight sensible now that they are bigger */
  .fh-field input,.fh-field select,.fh-field textarea{padding:12px 14px;}
  .sort-select{padding:10px 30px 10px 12px;}
}

/* ─────────────── headings across breakpoints ───────────────
   Each clamp tops out at the size the desktop design already used, so a wide
   screen looks exactly as it did before; only the small end is raised so the
   heading stays readable on a phone. */
.hero-text h1{font-size:clamp(2rem, 1.1rem + 4.2vw, 4rem);}          /* 32 → 64 */
.sec-head h2,.fh-h1{font-size:clamp(1.5rem, 1.05rem + 2.1vw, 2.6rem);} /* 24 → 41.6 */
.page-banner h1,.fh-banner h1{font-size:clamp(1.4rem, 1.05rem + 1.6vw, 2.2rem);}
.pd-info h1{font-size:clamp(1.3rem, 0.95rem + 1.7vw, 2rem);}          /* 21 → 32 */
.women-section-title{font-size:clamp(1.25rem, 1rem + 1.2vw, 1.75rem);} /* 20 → 28 */
.fh-h2,.related-title{font-size:clamp(1.15rem, 0.95rem + 1vw, 1.5rem);} /* 18 → 24 */

@media (max-width:560px){
  .sec-head h2,.fh-h1{letter-spacing:-0.01em;}
  .hero-text p{font-size:var(--fs-small);line-height:var(--lh-body);}
  .sec-head small{font-size:var(--fs-tiny);}
}

/* ─────────────── uppercase label treatment ───────────────
   Small caps lose legibility without tracking; buttons keep theirs. */
.fh-field label,.ad-field label,.pd-section-label,
.filter-group .fg-head span,.fs-header h3{
  letter-spacing:var(--tr-label);
}
.fh-btn,.pd-btn,.hero-btns a,.gtl-cta,.btn-yellow{
  letter-spacing:.12em;
}
@media (max-width:560px){
  .fh-btn,.pd-btn,.hero-btns a,.gtl-cta{letter-spacing:.09em;font-size:var(--fs-tiny);}
}

/* ─────────────── measure ───────────────
   Long paragraphs are hard to track past ~70 characters. */
/*.fh-cms p,.fh-cms li,.about-copy p,.pd-desc p{max-width:68ch;}
*/
/* Long unbroken strings (SKUs, emails, URLs) must not force a scroll, but
   `anywhere` breaks ordinary words mid-syllable, which looks wrong in a
   product name. Only the containers that genuinely receive machine strings
   get it; readable text gets normal word wrapping. */
body,td,th,code,.fh-cart-meta,.muted{
  overflow-wrap:anywhere;
  word-break:normal;
}
p,li,.pname,.fh-cart-name,.gtl-name,.crow-name,.fsplit-name,.rcard-body h4{
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}

/* Two-line product names keep every card in a row the same height. */
.pname{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.psub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pbadge{max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* A missing image shows the grey box rather than blue alt text. */
.pcard-img img,.products img,.product-grid img{
  color:transparent;
  background:var(--gray,#f2f2f3);
}

/* Numerals line up in prices and tables */
.pprice,.fh-sum-row,.fh-table td,.fh-cart-price,
.gtl-price,.crow-price,.fsplit-price,.pd-price,.ad-table td{
  font-variant-numeric:tabular-nums;
}

/* ─────────────── 320px (iPhone SE and similar) ─────────────── */
@media (max-width:360px){
  :root{--fs-base:0.9375rem;}
  .nav-logo{font-size:1.15rem;}
  .product-grid,.products,.mood-grid,.related-grid{grid-template-columns:repeat(2,1fr);gap:9px;}
  .pcard-img{height:172px;}
  .fh-page{padding:20px 10px 44px;}
  .fh-card,.fh-summary{padding:16px 13px;}
  .hero-text{left:16px;right:16px;}
  .time-box{min-width:44px;padding:8px 6px;}
  .time-box .num{font-size:1.05rem;}
}

/* Footer column headings and payment chips, moved off inline styles so the
   fluid scale can reach them. */
.footer-col-head{
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:#fff;
  margin-bottom:16px;
}
.pay-badge{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  padding:5px 10px;
  font-size:var(--fs-micro);
  color:rgba(255,255,255,.7);
  border-radius:3px;
  display:inline-block;
}
.mood-label{font-size:var(--fs-micro);}

/* Comfortable tap targets in the header.
   Sizing only — the burger's display is owned by responsive.css (hidden on
   desktop) and mobile-header.css (shown on phones). Setting display here
   made it visible at every width. */
@media (max-width:980px){
  .nav-burger{min-width:42px;min-height:42px;align-items:center;justify-content:center;}
  .nav-icon-btn{min-width:40px;min-height:40px;}
  .drawer-close{min-width:42px;min-height:42px;}
}

/* ─────────────── hit areas ───────────────
   Some controls are visually small by design (carousel dots, text links).
   Padding enlarges what a finger can hit without changing how they look. */
@media (max-width:900px){
  .hdot{position:relative;}
  .hdot::after{content:'';position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:36px;height:36px;}
  .fs-clear,.filter-clear,.fh-link-danger,.crumb a,.fh-crumbs a{
    display:inline-block;padding:6px 2px;}
  .nav-logo{padding:6px 0;display:inline-flex;align-items:center;}
  .drawer-logo{padding:4px 0;display:inline-flex;align-items:center;}
  .footer-links a{display:inline-block;padding:5px 0;}
}