/* ==========================================================================
   5MA FASHIONS — RESPONSIVE

   One block per screen size, in order. Font sizes, line heights and spacing
   are plain px so any device can be tuned without touching the others.

     TABLET AND UP        576px +
     LAPTOP AND UP        992px +
     DESKTOP AND UP      1400px +
     BELOW DESKTOP     up to 1399px
     LARGE LAPTOP      up to 1199px
     TABLET            up to 991px
     MOBILE LANDSCAPE  up to 767px
     MOBILE            up to 575px
     SMALL MOBILE      up to 400px
     PRINT

   No clamp(), no variables for type or spacing.
   ========================================================================== */


/* --------------------------------------------------------------------------
   TABLET AND UP        576px +
   ----------------------------------------------------------------------- */
@media (min-width: 576px) {
  h1, .h1              { font-size: 34px; }
  h2, .h2,
  .section-head__title { font-size: 26px; }
  h3, .h3              { font-size: 20px; }

  /* body */
  body                 { font-size: 15px; }
  .ftr-news__title       { font-size: 26px; }
  .err__code             { font-size: 138px; }
  .search-form input     { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   LAPTOP AND UP        992px +
   ----------------------------------------------------------------------- */
@media (min-width: 992px) {
  h1, .h1              { font-size: 52px; }
  h2, .h2,
  .section-head__title { font-size: 38px; }
  h3, .h3              { font-size: 26px; }

  body                 { font-size: 15px; }
  .sidegrid__title       { font-size: 31px; }
  .ftr-news__title       { font-size: 30px; }
  .pdp__title            { font-size: 28px; }
  .err__code             { font-size: 176px; }
  .search-form input     { font-size: 32px; }
  .mainnav          { gap: 26px; }
}

/* --------------------------------------------------------------------------
   DESKTOP AND UP      1400px +
   ----------------------------------------------------------------------- */
@media (min-width: 1400px) {
  h1, .h1              { font-size: 52px; }
  h2, .h2,
  .section-head__title { font-size: 40px; }
  h3, .h3              { font-size: 26px; }

  body                 { font-size: 15px; }
  .sidegrid__title       { font-size: 36px; }
  .ftr-news__title       { font-size: 30px; }
  .pdp__title            { font-size: 28px; }
  .err__code             { font-size: 176px; }
  .search-form input     { font-size: 32px; }
  .mainnav          { gap: 35px; }
}

/* --------------------------------------------------------------------------
   BELOW DESKTOP     up to 1399px
   ----------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .insta-grid { grid-template-columns: repeat(6, 1fr); }
}

/* --------------------------------------------------------------------------
   LARGE LAPTOP      up to 1199px
   ----------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  /* Logo steps down before the row does, so the tagline holds to the last */
  .hdr { height: 134px; }
  .brand__mark { height: 104px; }

  .usp-grid { grid-template-columns: repeat(2, 1fr); }

  .offer__body { padding: 48px; }
  .shop-layout     { grid-template-columns: 240px minmax(0,1fr); gap: 32px; }
  .cart-layout     { grid-template-columns: minmax(0,1fr) 330px; gap: 32px; }
  .checkout-layout { grid-template-columns: minmax(0,1fr) 340px; gap: 32px; }
  .account-layout  { grid-template-columns: 232px minmax(0,1fr); gap: 32px; }
  .pdp             { gap: 32px; }
  .post            { grid-template-columns: minmax(0,1fr) 240px; gap: 32px; }
  .numbers         { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .sidegrid      { grid-template-columns: 220px minmax(0,1fr); gap: 32px; }

  .usp-strip__list { gap: 26px; }
  .usp-strip__icon { width: 46px; height: 46px; }
  .rail__track { grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; }
}

/* --------------------------------------------------------------------------
   TABLET            up to 991px
   ----------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* Burger left, logo centred, actions right — still one row */
  .hdr { grid-template-columns: auto 1fr auto; gap: 12px; height: 104px; }
  .hdr .hdr__burger { display: inline-flex; grid-column: 1; justify-self: start; }
  .brand { grid-column: 2; justify-self: center; }
  .brand__mark { height: 78px; }
  .hdr__actions { grid-column: 3; }
  .site-header.is-stuck .hdr { height: 76px; }
  .site-header.is-stuck .brand__mark { height: 54px; }

  /* Account icon moves into the drawer to keep the bar uncluttered */
  .header-actions .icon-btn--account { display: none; }

  /* Sticky bottom nav appears; keep page content clear of it */
  .mobile-nav { display: block; }
  body { padding-bottom: 64px; }

  /* Stage strip stacks into a row of three compact tiles */
  .stages__item { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 16px; }
  .stages__item::after { display: none; }
  .stages__step { width: 38px; height: 38px; }

  /* Section head stacks */
  .section-head { flex-direction: column; align-items: flex-start; }

  .insta-grid { grid-template-columns: repeat(3, 1fr); }

  /* Offer + newsletter stack */
  .offer { grid-template-columns: 1fr; }
  .offer__media { min-height: 240px; order: -1; }
  .offer__body { padding: 32px; }

  .editorial { min-height: 340px; }
  .editorial--tall { min-height: 400px; }
  .editorial__body { padding: 32px; }

  .u-desktop-only { display: none; }
  .u-mobile-only  { display: block; }
  /* Sidebars move into a drawer or stack */
  .shop-layout { grid-template-columns: 1fr; }
  /* The content column must be allowed to shrink; a grid/flex child without
     min-width:0 refuses to and overflows the page. */
  .shop-layout > * { min-width: 0; max-width: 100%; }
  /* Toolbar (count + Sort) wraps and never forces width; the sort box goes full-width. */
  .toolbar { flex-wrap: wrap; }
  /* View all + Sort by share ONE row on mobile, side by side, filling the width. */
  .toolbar__right { flex-wrap: nowrap; width: 100%; max-width: 100%; gap: 10px; align-items: stretch; }
  .toolbar__right [data-view-all] { flex: 1 1 54%; min-width: 0; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
  /* Empty View-all slot (on /shop) takes no space, so Sort by fills the row with no gap. */
  [data-view-all-slot]:empty { display: none; }
  .sortbox { flex: 1 1 46%; min-width: 0; }
  .sortbox .field__select { width: 100%; }
  /* The product grid uses a Bootstrap-style .row with negative side margins.
     Keep it within the column so those margins can't push the page sideways. */
  [data-product-grid] { max-width: 100%; }
  .filters { display: none; }
  .filterbar { display: flex; }

  .cart-layout,
  .checkout-layout,
  .account-layout,
  .contact-layout,
  .post,
  .legal,
  .split { grid-template-columns: 1fr; gap: 32px; }
  /* Stacked: always show the image before its content (About Us image-right section).
     The image sits in the LAST grid child (a wrapper div), so reorder that. */
  .split--rev > div:last-child { order: -1; }

  .summary,
  .acctnav,
  .post__aside,
  .legal__aside,
  .gallery,
  .filters { position: static; }

  /* Stacked product page. minmax(0,1fr) (not a bare 1fr = minmax(auto,1fr)) so the
     horizontal thumbnail strip's intrinsic width — N thumbs × 74px + gaps, which
     can exceed a phone's width — can never inflate the gallery/info column.
     Without this the stage (128% of its WIDTH) grew to the strip's width, the
     image rendered wider and taller than the screen, and the whole column
     pushed off the right edge on phones narrower than the strip. */
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; min-width: 0; }
  .gallery__stage, .pdp__info { min-width: 0; max-width: 100%; }
  .gallery__thumbs { flex-direction: row; overflow-x: auto; order: 2; scrollbar-width: none; -ms-overflow-style: none; min-width: 0; width: 100%; max-width: 100%; }
  .gallery__thumbs::-webkit-scrollbar { display: none; }
  .gallery__thumb { flex: 0 0 74px; }
  .gallery__thumbwrap { display: block; position: relative; order: 2; min-width: 0; width: 100%; max-width: 100%; }
  .gallery__thumbwrap .gallery__thumbs { order: 0; }
  .gallery__thumbnav { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 3; }
  .gallery__thumbnav--next { right: 0; }
  .gallery__thumbnav--prev { left: 0; }
  .gallery__thumbnav[hidden] { display: none; }
  .gallery__thumbnav::before { content: ""; position: absolute; top: 0; bottom: 0; width: 54px; pointer-events: none; z-index: -1; }
  .gallery__thumbnav--next::before { right: 0;}
  .gallery__thumbnav--prev::before { left: 0;}
  .gallery__thumbnav i { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #E7DCE1; box-shadow: 0 2px 6px rgba(117,23,78,.14); display: flex; align-items: center; justify-content: center; color: #75174E; font-size: 13px; }

  /* Main product image slider arrows on mobile — same look as the thumbnail nav. */
  .gallery__stagenav { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 4; }
  .gallery__stagenav--prev { left: 8px; }
  .gallery__stagenav--next { right: 8px; }
  .gallery__stagenav[hidden] { display: none; }
  .gallery__stagenav i { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #E7DCE1; box-shadow: 0 2px 6px rgba(117,23,78,.14); display: flex; align-items: center; justify-content: center; color: #75174E; font-size: 13px; }
  .gallery__stagenav:active i { background: #F7EEF3; }

  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth__aside { display: none; }
  .auth__panel { padding: 0; }

  .revsum { grid-template-columns: 1fr; gap: 24px; }
  .legal__aside { display: none; }
  .pagehero { grid-template-columns: 1fr; padding: 32px; }
  .pagehero__facts { gap: 24px; }
  .pagehero__fact { text-align: left; }
  .nextsteps { grid-template-columns: 1fr; gap: 12px; }
  .lengthpick { grid-template-columns: 1fr; }

  .sidegrid      { grid-template-columns: 1fr; }
  .sidegrid__head { position: static; text-align: center; }
  .sidegrid__head .sidegrid__dots { justify-content: center; }
  .sidegrid__head .sidegrid__text { margin-left: auto; margin-right: auto; max-width: 440px; }

  .lookbook      { min-height: 380px; }

  .usp-strip { padding-block: 32px; }
  .usp-strip__list { grid-template-columns: repeat(2, 1fr); gap: 26px 32px; }
  .quotes { padding-inline: 64px; }
  .ftr-secure__row { gap: 18px; }
}

/* --------------------------------------------------------------------------
   MOBILE LANDSCAPE  up to 767px
   ----------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  body { font-size: 15px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn5 { width: 100%; }

  /* Stage strip becomes a single column list */
  .stages__grid { grid-template-columns: 1fr; }
  .stages__item { flex-direction: row; align-items: center; padding: 16px; }
  .stages__item + .stages__item { border-left: 0; border-top: 1px solid #F6EFEF; }
  .pcard__wish { opacity: 1; transform: none; width: 34px; height: 34px; font-size: 13px; }
  .pcard:hover .pcard__img { transform: none; }
  .pcard__title { font-size: 15px; }
  .pcard__price-now { font-size: 15px; }

  .ccard::before { padding-top: 128%; }
  .ccard__go { opacity: 1; transform: none; }
  .ccard__body { padding: 16px; }

  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  .usp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .usp { padding: 16px; }
  .usp__icon { width: 40px; height: 40px; margin-bottom: 12px; }
  .usp__title { font-size: 15px; }

  .editorial { min-height: 300px; }
  .editorial--tall { min-height: 320px; }

  .section-head { margin-bottom: 24px; }
  .section-head__cta { width: 100%; }

  .tabs { width: 100%; overflow-x: auto; }

  .search-overlay { padding-top: 10vh; }
  .search-overlay__close { top: 16px; right: 16px; width: 40px; height: 40px; }
  /* Tighter row + trimmer button so all three parts fit narrow phones */
  .search-form { gap: 12px; }
  .search-form .btn5 { padding: 0 16px; }
  /* Cart + order tables become stacked cards with inline labels */
  .cartlist__head { display: none; }
  .cartline {
    grid-template-columns: 1fr;
    gap: 12px;
    position: relative;
    padding: 20px 16px;   /* even left/right gutter inside the card */
  }
  /* Only the product row reserves space for the × button, so the value rows stay evenly inset. */
  .cartline__product { padding-right: 34px; }
  .cartline__label { display: block; }
  .cartline__remove { position: absolute; top: 14px; right: 10px; }
  .cartline__cell { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

  .orderrow { grid-template-columns: 1fr; gap: 8px; padding: 16px 14px; border: 1px solid #F0E6E6; border-radius: 12px; margin-bottom: 12px; }
  .orderrow:hover { background: transparent; }
  .orderrow__label { display: block; }
  .orderrow__cell { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left !important; }
  .orderrow__action { justify-self: stretch; display: block; }
  .orderrow__action .btn5 { width: 100%; }
  .orderrow__action .btn5 + .btn5 { margin-top: 8px; }

  .statgrid { grid-template-columns: 1fr; }
  .numbers  { grid-template-columns: repeat(2, 1fr); }

  .toolbar { gap: 12px; }
  .toolbar__right { width: 100%; gap: 10px; }
  .sortbox { flex: 1 1 46%; min-width: 0; }
  /* Match the button and dropdown heights so the row reads as one control. */
  .toolbar__right [data-view-all] { min-height: 42px; flex: 1 1 54%; }

  .is-listview .pcard { grid-template-columns: 120px minmax(0,1fr); gap: 16px; }

  .stepcard, .panelcard { padding: 24px; }
  .pdp__buy .btn5 { flex: 1 1 0; width: auto; min-width: 130px; }   /* 50/50 on mobile, stacks if too narrow */

  .gallery__stage.is-zoomed img { transform: scale(2); }   /* tap-to-zoom on mobile */
  .err { padding-block: 64px; }
  .measure { grid-template-columns: 1fr; }
  .searchsum__q { font-size: 24px; }
  .success__mark { width: 62px; height: 62px; font-size: 24px; }
  .ranked__num { width: 28px; height: 28px; font-size: 11px; }
  .ranked .pcard__flags { left: 46px; }
  .tier { height: 38px; padding: 0 16px; font-size: 14px; }
  .brand__mark { height: 66px; }
  .site-header.is-stuck .brand__mark { height: 40px; }

  .rail__track { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; }

  .lookbook      { min-height: 320px; }
  .quote__text   { font-size: 18px; }
  .rail__track {
    grid-auto-columns: 76%;
    gap: 12px;
    padding-inline: 12%;
    scroll-padding-inline: 12%;
  }
  .railcard { scroll-snap-align: center; }

  /* Controls centre too, or the row reads lopsided above a centred card */
  .rail-head {
    justify-content: center;
    text-align: center;
  }
  /* With the paging row gone the arrows are the only visible control, so they
     move below the quote rather than being hidden. Overlapping the text was
     the reason they were suppressed here; sitting under it, they do not. */
  .quotes { padding-inline: 0; padding-bottom: 64px; }
  .row { margin-inline: -8px; }
  .row > [class*="col-"] { padding-inline: 8px; }
  .row > [class*="col-"].mb-4 { margin-bottom: 16px !important; }
  /* Category and rating stack instead of sharing a row. Side by side they
     need about 200px; the card has 156px, which is what pushed the category
     onto three lines. Stacked, each gets the full width and the category is
     truncated with an ellipsis rather than wrapping. */
  .pcard__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-bottom: 4px;
  }

  .pcard__cat {
    display: block;
    max-width: 100%;
    font-size: 13px;
    letter-spacing: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pcard__rating { display: inline-flex; align-items: center; gap: 4px;
                   font-size: 13px; white-space: nowrap; }
  .pcard__rating .stars { font-size: 9px; letter-spacing: normal; }

  .pcard__rating-mini {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #1C1A1A;
  }
  .pcard__rating-mini i { font-size: 10px; color: #75174E; }
  .pcard__rating-count  { color: #6D6767; font-weight: 400; }


  .pcard__body  { padding: 12px 2px 0; }
  .pcard__title { font-size: 15px; line-height: 1.45; }

  /* Price: the two figures share a line, the saving drops below */
  .pcard__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-top: 8px;
  }
  .pcard__price-now { font-size: 15px; }
  .pcard__price-was { font-size: 13px; }
  .pcard__price-off { flex: 1 0 100%; font-size: 13px; margin-top: 2px; }

  .pcard__flags .badge5      { font-size: 10px; padding: 0 7px; height: 20px; }

  .access { font-size: 13px; padding: 2px 8px; margin-top: 8px; }
  .pcard__cart { margin-top: 8px; padding: 8px 12px; font-size: 13px; letter-spacing: normal; }
  .railcard__count { font-size: 13px; padding-top: 4px; }
  .ftr-secure { padding-block: 24px; }
  .ftr-secure__row { flex-direction: column; align-items: flex-start; gap: 14px; }

}

/* --------------------------------------------------------------------------
   MOBILE            up to 575px
   ----------------------------------------------------------------------- */
@media (max-width: 575.98px) {

  /* iOS Safari auto-zooms when a focused input's font is below 16px. Nudge the
     form controls to 16px on small screens (visually ~identical to 15px) so
     checkout / login / address / contact forms don't jump-zoom on focus. The
     search overlay input keeps its own large size (different selector). */
  .field__control,
  select.field__control,
  textarea.field__control,
  .input5 { font-size: 16px; }

  .brand__mark { height: 32px; }
  .icon-btn { width: 38px; height: 38px; }
  .hero__title { font-size: 38px; }

  .offer__countdown { gap: 8px; }
  .offer__unit { min-width: 0; flex: 1 1 0; padding: 8px; }
  .offer__num { font-size: 19px; }
  .inline-field { flex-direction: column; border-radius: 18px; padding: 12px; }
  .inline-field input { padding: 8px 8px; }
  .inline-field .btn5 { width: 100%; }

  .rcard { padding: 24px; }
  .revsum__score { font-size: 42px; }
  .pdp__price { font-size: 25px; }
  .cartline__thumb { width: 68px; flex: 0 0 68px; }
  .coupon { flex-direction: column; }
  .track li { padding-left: 48px; }
  .brand__mark { height: 58px; }
  .site-header.is-stuck .brand__mark { height: 54px; }
  .quote__others { flex-wrap: wrap; }
  .usp-strip { padding-block: 24px; }
  .usp-strip__list { grid-template-columns: 1fr; gap: 20px; }
  .usp-strip__icon { width: 42px; height: 42px; }
  .usp-strip__title { font-size: 15px; }
  .rail__track { grid-auto-columns: 78%; padding-inline: 11%; scroll-padding-inline: 11%; }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE      up to 400px
   ----------------------------------------------------------------------- */
@media (max-width: 400px) {
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-grid { grid-template-columns: 1fr; }
  .mobile-nav__link { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   TINY MOBILE       up to 359px
   ----------------------------------------------------------------------- */
@media (max-width: 359.98px) {
  /* Below this a two-up card is too narrow to read a price and a title */
  .row > .col-6 { flex: 0 0 100%; max-width: 100%; }
  /* Single column here, so the full card returns */
  .pcard__cat    { display: block; }
  .pcard__rating { display: inline-flex; font-size: 13px; }
  .pcard__rating .stars { font-size: 12px; letter-spacing: normal; }
}

/* --------------------------------------------------------------------------
   PRINT
   ----------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; padding-bottom: 0; }
  .section { padding-block: 16px; }
}


/* ==========================================================================
   SPACING AND HEADER PER DEVICE

   These were :root overrides before. Writing them against the selectors that
   actually used them means the values are visible where they apply, and no
   rule depends on a token defined somewhere else in the file.
   ========================================================================== */

/* LARGE LAPTOP — up to 1199px */
@media (max-width: 1199.98px) {
  .section              { padding-block: 80px; }
  .u-mt-9               { margin-top: 80px; }
  .shell,
  .shell-narrow         { padding-inline: 16px; }
}

/* TABLET — up to 991px */
@media (max-width: 991.98px) {
  .section              { padding-block: 64px; }
  .u-mt-9               { margin-top: 64px; }
  .blank                { padding-block: 64px; }

  /* header shrinks, so everything pinned below it moves up with it */
  .sidegrid__head,
  .filters,
  .gallery,
  .summary,
  .acctnav              { top: 66px; }

  .legal__body h2,
  .legal__body [id],
  .faq-group            { scroll-margin-top: 96px; }
}

/* MOBILE LANDSCAPE — up to 767px */
@media (max-width: 767.98px) {
  .section              { padding-block: 48px; }
  .u-mt-9               { margin-top: 48px; }
  .blank                { padding-block: 48px; }
  .shell,
  .shell-narrow         { padding-inline: 16px; }
}

/* MOBILE — up to 575px */
@media (max-width: 575.98px) {
  .section              { padding-block: 48px; }
  .u-mt-9               { margin-top: 48px; }
  .blank                { padding-block: 48px; }
}


/* ==========================================================================
   INNER PAGE BANNER — per device

   Each size is written out, so the banner on tablet can be tuned without
   touching mobile or desktop.
   ========================================================================== */

/* TABLET — 576px and up */
@media (min-width: 576px) {
  .pagehead              { padding-top: 48px; padding-bottom: 48px; }
  .pagehead__title       { font-size: 38px; }
  .pagehead__lead        { font-size: 15px; }
  .pagehead__nav         { margin-bottom: 16px; }
  .pagehead__rule        { width: 54px; margin-top: 24px; }
}

/* LAPTOP — 992px and up */
@media (min-width: 992px) {
  .pagehead              { padding-top: 64px; padding-bottom: 64px; }
  .pagehead__title       { font-size: 50px; }
  .pagehead__lead        { font-size: 16px; margin-top: 12px; }
  .pagehead__nav         { margin-bottom: 16px; }
  .pagehead__rule        { width: 60px; margin-top: 24px; }
  .pagehead .crumb       { font-size: 14px; }
}

/* DESKTOP — 1400px and up */
@media (min-width: 1400px) {
  .pagehead              { padding-top: 80px; padding-bottom: 80px; }
  .pagehead__title       { font-size: 58px; }
  .pagehead__rule        { width: 68px; margin-top: 32px; }
}

/* MOBILE — the veil leans darker because the text sits over more of it */
@media (max-width: 575.98px) {
  
}


/* ==========================================================================
   SPACING PER DEVICE

   Section rhythm scales down as the screen narrows. 120px between sections
   is right on a desktop and absurd on a phone, where it becomes a scroll
   through nothing. The ratios hold; only the step changes.
   ========================================================================== */

/* LARGE LAPTOP — up to 1199px */
@media (max-width: 1199.98px) {
  .section             { padding-block: 96px; }
  .section--tight      { padding-block: 64px; }
  .section-head        { margin-bottom: 48px; }
}

/* TABLET — up to 991px */
@media (max-width: 991.98px) {
  .section             { padding-block: 80px; }
  .section--tight      { padding-block: 48px; }
  .section-head        { margin-bottom: 40px; }
  .panelcard           { padding: 24px; }
}

/* MOBILE LANDSCAPE — up to 767px */
@media (max-width: 767.98px) {
  .section             { padding-block: 64px; }
  .section--tight      { padding-block: 40px; }
  .section-head        { margin-bottom: 32px; }
  .section-head__title { margin-bottom: 12px; }

  /* Gutters tighten so two cards still fit side by side */
  .row                 { margin-inline: -8px; }
  .row > [class*="col-"] { padding-inline: 8px; margin-bottom: 16px; }

  .field               { margin-bottom: 16px; }
}

/* MOBILE — up to 575px */
@media (max-width: 575.98px) {
  .section             { padding-block: 48px; }
  .section--tight      { padding-block: 32px; }
  .section-head        { margin-bottom: 24px; }
  .panelcard           { padding: 16px; margin-bottom: 16px; }
}


/* ==========================================================================
   HEADINGS PER DEVICE
   Only the top three move. H4 to H6 sit close to body size already, and
   scaling them would collapse them into the paragraph.
   ========================================================================== */

/* TABLET — 576px and up */
@media (min-width: 576px) {
  h1 { font-size: 34px; }
  h2 { font-size: 27px; }
  h3 { font-size: 20px; }
}

/* LAPTOP — 992px and up */
@media (min-width: 992px) {
  h1 { font-size: 42px; }
  h2 { font-size: 31px; }
  h3 { font-size: 22px; }
}

/* DESKTOP — 1400px and up */
@media (min-width: 1400px) {
  h1 { font-size: 46px; }
  h2 { font-size: 34px; }
  h3 { font-size: 24px; }
}


/* ==========================================================================
   ARCHED TILES — per device
   Four across is right on a desktop. Below that the arch has to stay tall
   enough to read as an arch, so the column count drops rather than the
   tiles being squeezed.
   ========================================================================== */

/* LARGE LAPTOP — up to 1199px */
@media (max-width: 1199.98px) {
}

/* TABLET — up to 991px */
@media (max-width: 991.98px) {
}

/* MOBILE LANDSCAPE — up to 767px */
@media (max-width: 767.98px) {
}

/* MOBILE — up to 400px */
@media (max-width: 400px) {
}


/* ==========================================================================
   COLLECTION TILES — per device

   The column count drops rather than the tiles being squeezed: below a
   certain width an arch stops reading as an arch, and the caption inside
   would crowd the garment.
   ========================================================================== */

/* LARGE LAPTOP — up to 1199px */
@media (max-width: 1199.98px) {
}

/* TABLET — up to 991px */
@media (max-width: 991.98px) {
}

/* MOBILE LANDSCAPE — up to 767px */
@media (max-width: 767.98px) {
}

/* MOBILE — up to 480px
   One column. Two tiles at this width leave the caption fighting the
   garment for the same 140px. */
@media (max-width: 479.98px) {
}


/* Arch and model per device. The model narrows before the text does, because
   a cramped caption is worse than a smaller figure. */
@media (max-width: 991.98px) {
}

@media (max-width: 767.98px) {
}

@media (max-width: 479.98px) {
}


/* ==========================================================================
   COLLECTION TILES — per device

   The model scales with the tile because it is sized in percentages, so it
   never crops or stretches. What changes per breakpoint is how much room the
   words need: on a narrow tile the figure gives up width first, because a
   cramped caption is worse than a slightly smaller dress.
   ========================================================================== */

/* DESKTOP — 1400px and up */
@media (min-width: 1400px) {
  .archgrid    { gap: 36px 28px; }
}

/* LARGE LAPTOP — up to 1199px */
@media (max-width: 1199.98px) {
  .archgrid    { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
}

/* TABLET — up to 991px */
@media (max-width: 991.98px) {
  .archgrid    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}

/* MOBILE LANDSCAPE — up to 767px */
@media (max-width: 767.98px) {
  .arch        { aspect-ratio: 1 / 1; }
}

/* MOBILE — up to 479px
   One column. Two tiles at this width leaves the caption and the figure
   fighting for the same 140px. */
@media (max-width: 479.98px) {
  .archgrid    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .arch        { aspect-ratio: 1 / 1; }
}


/* ==========================================================================
   TILE TEXT — per device

   The gutter between the words and the figure is a percentage, so it holds
   at every width. What changes is the type size: a 19px name that fits three
   lines on a 320px tile will not fit on a 170px one, so it steps down and the
   figure gives up a little width at the same time.
   ========================================================================== */

/* DESKTOP — 1400px and up */
@media (min-width: 1400px) {
  .arch__name  { font-size: 20px; margin-bottom: 20px; }
  .arch__go    { font-size: 12px; }
}

/* LARGE LAPTOP — up to 1199px */
@media (max-width: 1199.98px) {
  .arch__name  { font-size: 18px; margin-bottom: 16px; }
}

/* TABLET — up to 991px */
@media (max-width: 991.98px) {
  .arch__body  { width: 50%; padding-left: 7%; top: 15%; bottom: 13%; }
  .arch__model { width: 40%; }
  .arch__name  { font-size: 17px; margin-bottom: 14px; }
  .arch__go    { font-size: 11px; }
}

/* MOBILE LANDSCAPE — up to 767px
   Two tiles across is about 170px each. The name steps down again and the
   figure narrows, because at this size the words need the room more. */
@media (max-width: 767.98px) {
  .arch__body  { width: 52%; padding-left: 7%; top: 14%; bottom: 12%; }
  .arch__model { width: 38%; height: 90%; }
  .arch__name  { font-size: 12px; line-height: 1.2; margin-bottom: 10px; }
  .arch__go    { font-size: 10px; gap: 6px; }
  .arch__go svg { width: 15px; }
}

/* MOBILE — up to 479px
   One tile across, so the tile is wide again and the type can come back up. */
@media (max-width: 479.98px) {
  .arch        { aspect-ratio: 1 / 1; }
  .arch__body  { width: 52%; padding-left: 7%; top: 14%; bottom: 12%; }
  .arch__model { width: 38%; height: 90%; }
  .arch__name  { font-size: 12px; line-height: 1.2; margin-bottom: 10px; }
  .arch__go    { font-size: 10px; }
}


/* ==========================================================================
   BANNER — per device

   The artwork is 3.08:1, which is a wide strip: on a phone it is only about
   127px tall, far too short to hold a headline, a paragraph and a button.
   So below 768px the text moves out from over the image and sits beneath it,
   on the page. Nothing is cropped and nothing is squeezed.
   ========================================================================== */

/* DESKTOP — 1400px and up */
@media (min-width: 1400px) {
  .banner__title { font-size: 40px; }
  .banner__lead  { font-size: 16px; }
}

/* LARGE LAPTOP — up to 1199px */
@media (max-width: 1199.98px) {
  .banner__title { font-size: 28px; }
  .banner__lead  { font-size: 14px; margin-bottom: 20px; }
  .banner__text  { width: 56%; }
  .banner__inner { padding-inline: 28px; }
}

/* TABLET — up to 991px */
@media (max-width: 991.98px) {
  /* Below 992px the dedicated mobile/tablet artwork (4:5) is shown via <picture>. */
  .banner__img  { aspect-ratio: 1200 / 1200; max-height: 100vh; }
  /* ONE centered content wrapper in the upper-middle safe area: below the
     leaves / lights / flowers at the top, above the models lower-right.
     Percentage top keeps it in place for any banner's dynamic text. */
  .banner__inner { padding: 0; }
  .banner__text {
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    width: 86%;
    max-width: 850px;
    margin: 0;
    text-align: center;
  }
  .banner__title { font-size: 26px; line-height: 1.16; margin: 0 0 22px; text-wrap: balance; }
  .banner__lead  { font-size: 14px; line-height: 1.65; margin: 0 auto 26px; max-width: 34ch; }
  .banner__cta   { min-height: 44px; padding: 0 26px; font-size: 12px; }
}

/* MOBILE — up to 767px
   Inherits the centered upper-middle wrapper from the ≤991 rule; only the
   type sizes and top offset are tuned for the narrower phone artwork. */
@media (max-width: 767.98px) {
  .banner        { background: #FBE9DC; }   /* the artwork's own tone */
  .banner::before { display: none; }

  .banner__text  { top: 12%; width: 88%; }
  .banner__title { font-size: 23px; margin: 0 0 18px; }
  .banner__lead  { font-size: 14px; line-height: 1.6; margin: 0 auto 22px; max-width: 30ch; }
  .banner__cta   { min-height: 44px; }
}

/* MOBILE — up to 479px */
@media (max-width: 479.98px) {
  .banner__title { font-size: 22px; }
  .banner__lead  { font-size: 14px; }
}


/* ==========================================================================
   SECTION HEADING — per device
   Only the heading and the ornament scale. The eyebrow and the lead sit near
   body size already, and shrinking them would collapse them into the page.
   ========================================================================== */

/* DESKTOP — 1400px and up */
@media (min-width: 1400px) {
  .arches__title { font-size: 38px; }
}

/* LARGE LAPTOP — up to 1199px */
@media (max-width: 1199.98px) {
  .arches__title { font-size: 30px; }
  .arches__head  { margin-bottom: 48px; }
}

/* TABLET — up to 991px */
@media (max-width: 991.98px) {
  .arches__title { font-size: 26px; letter-spacing: .03em; }
  .arches__head  { margin-bottom: 40px; }
  .arches__lead  { font-size: 14px; }
}

/* MOBILE — up to 575px */
@media (max-width: 575.98px) {
  .arches__title  { font-size: 21px; letter-spacing: .02em; }
  .arches__eyebrow { font-size: 11px; letter-spacing: .16em; }
  .arches__rule   { width: 120px; }
  .arches__head   { margin-bottom: 32px; }
  .arches__lead   { font-size: 14px; line-height: 1.7; }
}


/* Side-grid heading — per device */
@media (min-width: 1400px) {
  .sidegrid__title { font-size: 34px; }
}
@media (max-width: 1199.98px) {
  .sidegrid__title { font-size: 27px; }
}
@media (max-width: 991.98px) {
  .sidegrid__title { font-size: 24px; letter-spacing: .02em; }
  .sidegrid__text  { font-size: 14px; }
}
@media (max-width: 575.98px) {
  .sidegrid__title { font-size: 21px; }
  .sidegrid__head .eyebrow { font-size: 11px; letter-spacing: .16em; }
  .sidegrid__head .eyebrow + .sidegrid__title::after { width: 92px; }
}


/* ==========================================================================
   TESTIMONIALS — per device
   The arrows move below the quote on small screens: flanking a narrow column
   they would leave the text barely 200px wide.
   ========================================================================== */
@media (min-width: 1400px) {
  .gsection__title { font-size: 36px; }
}

@media (max-width: 1199.98px) {
  .gsection__title { font-size: 28px; }
}

@media (max-width: 991.98px) {
  .gsection__title { font-size: 24px; letter-spacing: .03em; }
  .gwrap           { gap: 14px; }
  .gquote__name    { font-size: 15px; }
}

@media (max-width: 767.98px) {
  .gwrap        { flex-wrap: wrap; }
  .quotes       { order: 1; flex: 1 0 100%; }
  .gnav--prev   { order: 2; }
  .gnav--next   { order: 3; }
  .gnav         { margin-top: 22px; }
  .gsection__title { font-size: 20px; letter-spacing: .02em; }
  .gbadge__label { font-size: 12px; }
}

@media (max-width: 479.98px) {
  .gsection__title { font-size: 18px; }
}

/* Product Details title — tablet size (desktop/mobile handled above). */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pdp__title { font-size: 26px; }
}

/* Very narrow phones: trim the Shop controls row so View all + Sort by still fit on one line. */
@media (max-width: 380px) {
  .toolbar__right { gap: 8px; }
  .toolbar__right [data-view-all] { padding-left: 10px; padding-right: 10px; font-size: 13px; }
  .sortbox .field__select { font-size: 13px; }
}