/* ==========================================================================
   MAHIRA SELECT - shop.css
   Product archives: shop, categories, collections and search results.

   Page rhythm: a compact editorial introduction on a warm ground, a hairline,
   the catalogue on the page ground, the category copy, sibling categories on
   sand, the service lines, then the footer. Each band changes ground rather
   than adding a border, so the page reads as composed steps and not as a
   stack of boxes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Archive hero

   An editorial introduction, not a banner. Two columns from 900px: the trail,
   headline, category copy and the routes into the section on the left, the
   photograph the category carries on the right. The band's height is set by
   the media column and capped, so the introduction can never grow tall enough
   to push the catalogue off the first screen.
   -------------------------------------------------------------------------- */
.ms-shophero{
  background:var(--ms-champagne);
  border-bottom:var(--ms-hairline);
  overflow:hidden;

  /* How far the media column has to reach past the measure to meet the edge of
     the screen. Zero until the viewport outgrows the container, so the bleed
     only exists on the screens that actually have a margin to cover. 100vw
     counts the scrollbar and the container does not, so this overshoots by
     half a scrollbar on wide desktops; the overflow above swallows it. */
  --ms-hero-bleed:max(0px,(100vw - var(--ms-container)) / 2);
}

.ms-shophero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,3vw,30px);
  padding-block:clamp(18px,2.4vw,26px) clamp(26px,3vw,38px);
}

/* The trail sits inside the hero rather than in a bar of its own, so it costs
   the page no vertical space at all. */
.ms-crumb--bare{padding-block:0;margin-bottom:14px;}

.ms-shophero__title{margin:0;}
.ms-shophero__rule{margin:clamp(14px,1.6vw,20px) 0 0;}
.ms-shophero__lead{
  margin-top:clamp(14px,1.6vw,18px);
  max-width:48ch;
}

.ms-shophero__subs{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(20px,2.2vw,26px);
}

/* ---- Media column ----
   Below the two column breakpoint the photograph becomes a short band under
   the copy. It is capped rather than left to its ratio: a full 21:9 across a
   tablet stands 300px tall on its own and turns the introduction back into the
   banner this redesign set out to remove.

   The cap is a floor as well as a ceiling. At 150px a tablet band came out
   705x196 - a 3.6:1 slice of a 4:3 photograph, which is a strip across the
   model's face whatever the offset is set to. Keeping the band nearer 2:1
   is what makes the crop below survivable at every width. */
.ms-shophero__media{
  position:relative;
  width:100%;
  height:clamp(190px,32vw,280px);
  background:var(--ms-sand);
  border-radius:var(--ms-radius-card);
  overflow:hidden;
}
/*
 * Two classes deep on purpose. WooCommerce ships `.woocommerce img{height:auto}`
 * at 0-1-1, which outranks a lone `.ms-shophero__img` at 0-1-0 on every archive
 * - and an archive is the only place this element exists. The image was
 * therefore drawing at its own ratio, overflowing the box and being sliced off
 * at the bottom by the overflow above, with object-fit and object-position dead
 * letters. Anything that sets height on an img inside .woocommerce needs two
 * classes to land. See the same trap in base.css.
 *
 * 5% rather than centred: the ms-editorial crop is 4:3 taken from the top of a
 * portrait original, so the crown of the head sits about 6% down the file. The
 * offset is a share of the slack, and the slack swings from 8px on a narrow
 * desktop panel to 570px on a wide tablet band, so a larger share that framed
 * the desktop panel well walked straight through the head on the tablet. 5%
 * leaves 12-24px of air above the head at every width measured; 8% left 10.
 */
.ms-shophero__media .ms-shophero__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 5%;
}

@media (min-width:900px){
  .ms-shophero--media .ms-shophero__inner{
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
    align-items:stretch;
    gap:clamp(32px,4vw,64px);
    padding-block:0;
  }

  .ms-shophero__text{
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(26px,3vw,42px);
  }

  /*
   * Flush to the top, bottom and right of the band. The container drops its
   * right gutter for this one case so the photograph runs to the edge of the
   * measure everything else aligns to, which is what makes the band read as
   * editorial rather than as a card sitting on a background.
   *
   * Past 1600px the measure stops growing and the screen does not, so flush to
   * the measure is no longer flush to anything the eye can see - it left a
   * 152px strip of bare champagne beside the photograph on a 1920 monitor. The
   * bleed carries the media column over that strip; the copy column stays on
   * the measure with the rest of the page.
   */
  .ms-shophero--media .ms-container{padding-right:0;}
  .ms-shophero--media .ms-shophero__media{
    height:auto;
    min-height:clamp(272px,25vw,346px);
    border-radius:0;
    width:calc(100% + var(--ms-hero-bleed));
    margin-right:calc(-1 * var(--ms-hero-bleed));
  }

  /* Blends the photograph's left edge into the ground so it belongs to the
     band instead of being pasted onto it. */
  .ms-shophero--media .ms-shophero__media::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(
      90deg,
      var(--ms-champagne) 0%,
      rgba(239,233,220,.62) 10%,
      rgba(239,233,220,0) 32%
    );
  }
}

/* Category routes. Shared with the related categories band. */
.ms-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;
  font-size:var(--ms-fs-xs);
  color:var(--ms-ink);
  border:1px solid var(--ms-border);
  border-radius:var(--ms-radius-btn);
  background:var(--ms-surface);
  transition:border-color var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease);
}
.ms-chip:hover{border-color:var(--ms-gold);color:var(--ms-gold-ink);}
.ms-chip__count{
  font-size:var(--ms-fs-micro);color:var(--ms-muted);
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   2. Catalogue layout
   -------------------------------------------------------------------------- */
.ms-shop__catalog{padding-top:clamp(26px,3.2vw,44px);}

.ms-shop__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,3vw,44px);
  padding-bottom:clamp(48px,6vw,88px);
}
.ms-shop__main{min-width:0;}

/* The sidebar column exists only when the archive actually rendered a sidebar.
   The modifier is set in PHP rather than inferred, so an archive with nothing
   to filter simply runs full width instead of leaving an empty column. */
@media (min-width:1024px){
  .ms-shop__layout--filters{grid-template-columns:266px minmax(0,1fr);align-items:start;}
}

.ms-shop__seo{
  background:var(--ms-surface);
  padding-block:clamp(40px,5vw,72px);
  border-top:var(--ms-hairline);
}
.ms-shop__seo .ms-prose{padding-bottom:0;}

/* --------------------------------------------------------------------------
   3. Toolbar
   -------------------------------------------------------------------------- */
.ms-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--ms-space-sm);flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:clamp(22px,2.5vw,32px);
  border-bottom:var(--ms-hairline);
}
.ms-toolbar__count{
  font-size:var(--ms-fs-xs);color:var(--ms-muted);margin:0;max-width:none;
  letter-spacing:.03em;font-variant-numeric:tabular-nums;
}
.ms-toolbar__controls{display:flex;align-items:center;gap:12px;}
.ms-toolbar__sort{display:flex;align-items:center;gap:10px;margin:0;}
.ms-toolbar__sortlabel{
  font-size:var(--ms-fs-micro);font-weight:500;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-muted);white-space:nowrap;
}
.ms-toolbar__sort select{
  min-height:40px;padding:8px 34px 8px 12px;
  font-size:var(--ms-fs-xs);min-width:168px;
  background-color:transparent;
  transition:border-color var(--ms-t) var(--ms-ease);
}
.ms-toolbar__sort select:hover{border-color:var(--ms-ink);}
.ms-toolbar__badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;margin-left:2px;
  background:var(--ms-gold);color:var(--ms-white);
  font-size:10px;line-height:1;border-radius:9px;
}
.ms-toolbar__active{
  flex:1 1 100%;
  display:flex;flex-wrap:wrap;gap:8px;
  padding-top:16px;
}
.ms-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;font-size:var(--ms-fs-xs);
  background:var(--ms-sand);border:1px solid transparent;
  transition:border-color var(--ms-t) var(--ms-ease);
}
.ms-pill:hover{border-color:var(--ms-ink);}
.ms-pill svg{opacity:.6;}
.ms-pill--clear{background:transparent;color:var(--ms-gold-ink);text-decoration:underline;text-underline-offset:.2em;}
.ms-pill .amount{font-variant-numeric:tabular-nums;}

/* Desktop shows the sidebar, so the trigger is only for smaller screens. */
@media (min-width:1024px){
  .ms-toolbar__filter{display:none;}
}

/* On a phone the two controls share the row evenly and keep their labels on
   one line by trading away tracking. */
@media (max-width:560px){
  .ms-toolbar{padding-bottom:14px;}
  .ms-toolbar__controls{width:100%;gap:8px;}
  .ms-toolbar__filter{
    flex:1 1 0;min-width:0;padding:0 10px;
    letter-spacing:.07em;white-space:nowrap;
  }
  .ms-toolbar__sort{flex:1 1 0;min-width:0;}
  .ms-toolbar__sortlabel{display:none;}
  .ms-toolbar__sort select{min-width:0;width:100%;}
}

/* --------------------------------------------------------------------------
   4. Filter panel
   -------------------------------------------------------------------------- */
.ms-filters{
  position:fixed;inset:0;z-index:1100;
  visibility:hidden;pointer-events:none;
}
.ms-filters.is-open{visibility:visible;pointer-events:auto;}
.ms-filters__scrim{
  position:absolute;inset:0;width:100%;
  background:rgba(21,18,14,.42);border:0;padding:0;cursor:pointer;
  opacity:0;transition:opacity var(--ms-t) var(--ms-ease);
}
.ms-filters.is-open .ms-filters__scrim{opacity:1;}
.ms-filters__panel{
  position:absolute;left:0;top:0;bottom:0;
  width:min(400px,88vw);
  background:var(--ms-surface);
  box-shadow:var(--ms-shadow-float);
  display:flex;flex-direction:column;
  transform:translateX(-102%);
  transition:transform var(--ms-t-slow) var(--ms-ease);
}
.ms-filters.is-open .ms-filters__panel{transform:translateX(0);}
.ms-filters__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:var(--ms-hairline);flex:0 0 auto;
}
.ms-filters__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 20px;}
.ms-filters__foot{
  flex:0 0 auto;display:grid;grid-template-columns:1fr;gap:10px;
  padding:16px 20px;border-top:var(--ms-hairline);background:var(--ms-cream);
}

/* The drawer carries its own titled header; the desktop column does not, so
   the quiet label only appears at the width where that header is gone. */
.ms-filters__lede{display:none;}

/* From 1024px the panel is simply a card in the page column. */
@media (min-width:1024px){
  .ms-filters,
  .ms-filters[hidden]{
    display:block;position:sticky;top:calc(var(--ms-header-h-compact) + 20px);
    inset:auto;z-index:1;visibility:visible;pointer-events:auto;
  }
  .ms-filters__scrim,
  .ms-filters__head,
  /* Show results closes the drawer, which does not exist at this width. */
  .ms-filters__foot{display:none;}
  .ms-filters__panel{
    position:static;width:auto;transform:none;
    background:var(--ms-surface);
    border:var(--ms-hairline);
    border-radius:var(--ms-radius-card);
    box-shadow:none;
    overflow:visible;
  }
  .ms-filters__body{overflow:visible;padding:2px 20px 8px;}
}

/*
 * The panel rides with the page. It carries no scroller of its own, because a
 * second bar sitting inside the window's own bar is the thing that made the
 * column feel broken: two tracks, neither obviously in charge.
 *
 * The one case that still needs a cap is a panel taller than the window: a
 * sticky element that does not fit pins at the top and its last group can
 * never be reached. max-height only engages when the content actually
 * overflows, so an ordinary screen still never sees a second scrollbar. It
 * used to be gated on a 820px viewport, which was a guess at when the panel
 * would outgrow the screen; now that the category tree carries the full
 * catalogue depth, an open branch can outgrow any screen.
 */
@media (min-width:1024px){
  .ms-filters__panel{
    max-height:calc(100vh - var(--ms-header-h-compact) - 40px);
    overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--ms-beige) transparent;
  }
  .ms-filters__panel::-webkit-scrollbar{width:6px;}
  .ms-filters__panel::-webkit-scrollbar-track{background:transparent;}
  .ms-filters__panel::-webkit-scrollbar-thumb{background:var(--ms-beige);border-radius:99px;}
}

@media (min-width:1024px){

  .ms-filters__lede{
    display:block;margin:0;max-width:none;
    padding:16px 0 12px;
    border-bottom:var(--ms-hairline);
    font-size:var(--ms-fs-micro);font-weight:600;
    letter-spacing:var(--ms-track-micro);text-transform:uppercase;
    color:var(--ms-muted);
  }
}

/* Groups */
.ms-fgroup{padding-block:18px;border-bottom:var(--ms-hairline);}
.ms-fgroup:first-of-type{padding-top:16px;}
.ms-fgroup:last-of-type{border-bottom:0;padding-bottom:14px;}
.ms-fgroup__title{
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ms-ink);margin:0 0 12px;
}
.ms-fgroup__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
}
.ms-fgroup__toggle svg{color:var(--ms-muted);transition:transform var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease);}
.ms-fgroup__toggle:hover svg{color:var(--ms-ink);}
.ms-fgroup__toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.ms-fgroup__panel{display:none;}
.ms-fgroup__panel.is-open{display:block;}
/* The rows bleed past the group edge so their hover background reads as a
   full width row. The bleed lives on the list, not on each row, otherwise the
   rows are wider than their scroll container and it grows a horizontal bar. */
.ms-fgroup__list{
  overflow-x:hidden;
  margin-inline:-10px;
}
.ms-fgroup__list li + li{margin-top:1px;}

/* --------------------------------------------------------------------------
   Category tree

   Five department rows, each one a disclosure over its own children. The flat
   twelve row list it replaces needed a 318px scroller, and once the children
   were separated from their parents two of them read as the same category.
   -------------------------------------------------------------------------- */
.ms-cattree{margin-inline:-10px;}
.ms-cattree > .ms-cattree__node + .ms-cattree__node{margin-top:2px;}

/* The row is the hover target so the name and the caret light up together. */
.ms-cattree__row{
  display:flex;align-items:center;gap:2px;
  border-radius:6px;
  transition:background var(--ms-t) var(--ms-ease);
}
.ms-cattree__row:hover{background:var(--ms-cream);}
.ms-cattree__row .ms-fopt{flex:1 1 auto;min-width:0;}
.ms-cattree__row .ms-fopt:hover{background:none;}

/* A department is the heading of its group, so it is set a shade firmer than
   the children it holds. Each level below it steps down again, which is what
   keeps four levels of the same control readable as a hierarchy. */
.ms-fopt--l1{color:var(--ms-ink);}
.ms-fopt--l1 .ms-fopt__label{font-weight:500;}

/* The branch the current category sits in. Not a tick, because nothing is
   filtering on this term; a gold marker on the checkbox instead, which reads
   as "you are here" rather than "this is applied". */
.ms-fopt.is-path{color:var(--ms-ink);}
.ms-fopt.is-path .ms-fopt__label{font-weight:500;}
.ms-fopt.is-path .ms-fopt__box{
  border-color:var(--ms-gold);
  background:
    linear-gradient(var(--ms-gold),var(--ms-gold)) center/7px 7px no-repeat,
    transparent;
}

.ms-cattree__toggle{
  flex:0 0 auto;
  width:30px;height:30px;margin-right:4px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--ms-muted);border-radius:6px;
}
.ms-cattree__toggle:hover{color:var(--ms-ink);background:var(--ms-sand);}
.ms-cattree__toggle svg{
  transition:transform var(--ms-t) var(--ms-ease);
}
.ms-cattree__toggle[aria-expanded="true"]{color:var(--ms-ink);}
.ms-cattree__toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

.ms-cattree__panel{display:none;}
.ms-cattree__panel.is-open{display:block;}

/* An indent alone was doing all the work of showing what belonged to what.
   The rail says it outright. The step narrows as it goes: four levels at the
   first level's 31px would spend a third of a 250px column on white space. */
.ms-cattree__sub{
  margin:2px 0 8px 16px;
  padding-left:12px;
  border-left:1px solid var(--ms-border);
}
.ms-cattree__sub .ms-cattree__sub{margin-left:8px;padding-left:10px;}
.ms-cattree__sub li + li{margin-top:1px;}

.ms-fopt{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;
  font-size:var(--ms-fs-sm);color:var(--ms-muted);
  border-radius:6px;
  transition:color var(--ms-t) var(--ms-ease),background var(--ms-t) var(--ms-ease);
}
.ms-fopt:hover{color:var(--ms-ink);background:var(--ms-cream);}
.ms-fopt:hover .ms-fopt__box{border-color:var(--ms-earth);}
.ms-fopt.is-on{color:var(--ms-ink);font-weight:500;}

.ms-fopt__box{
  flex:0 0 auto;width:16px;height:16px;
  border:1px solid var(--ms-border);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease);
}
.ms-fopt__box svg{opacity:0;color:var(--ms-white);}
.ms-fopt.is-on .ms-fopt__box{background:var(--ms-gold);border-color:var(--ms-gold);}
.ms-fopt.is-on .ms-fopt__box svg{opacity:1;}
.ms-fopt__label{flex:1 1 auto;min-width:0;}
.ms-fopt__count{
  flex:0 0 auto;font-size:var(--ms-fs-micro);color:var(--ms-muted);
  font-variant-numeric:tabular-nums;
}

.ms-fopt--l2{font-size:var(--ms-fs-xs);padding-block:8px;}
.ms-fopt--l2 .ms-fopt__box{width:14px;height:14px;}
.ms-fopt--l3,
.ms-fopt--l4,
.ms-fopt--l5{font-size:var(--ms-fs-xs);padding:7px 8px;gap:8px;}
.ms-fopt--l3 .ms-fopt__box,
.ms-fopt--l4 .ms-fopt__box,
.ms-fopt--l5 .ms-fopt__box{width:13px;height:13px;}
.ms-fopt--l4,
.ms-fopt--l5{color:var(--ms-muted);}

/* The caret shrinks with the row so a fourth level row is not half caret. */
.ms-cattree__sub .ms-cattree__toggle{width:26px;height:26px;margin-right:2px;}
.ms-cattree__sub .ms-cattree__sub .ms-cattree__toggle{width:24px;height:24px;}

/* ---- Price range ---- */
.ms-fprice{display:block;}
.ms-range{
  position:relative;height:28px;margin:6px 2px 14px;
  display:flex;align-items:center;
}
.ms-range__track,
.ms-range__fill{
  position:absolute;height:3px;border-radius:2px;pointer-events:none;
}
.ms-range__track{left:0;right:0;background:var(--ms-border);}
.ms-range__fill{background:var(--ms-gold);}
/*
 * Two sliders stacked on the same line. The tracks are transparent so only the
 * painted span above shows through, and only the thumbs take the pointer,
 * otherwise the upper input would swallow every press meant for the lower one.
 */
.ms-range__input{
  position:absolute;left:0;width:100%;margin:0;
  appearance:none;background:none;pointer-events:none;height:28px;
}
.ms-range__input::-webkit-slider-thumb{
  appearance:none;pointer-events:auto;
  width:18px;height:18px;border-radius:50%;
  background:var(--ms-surface);border:2px solid var(--ms-earth);
  box-shadow:0 1px 3px rgba(21,18,14,.2);cursor:grab;
}
.ms-range__input::-webkit-slider-thumb:active{cursor:grabbing;}
.ms-range__input::-moz-range-thumb{
  pointer-events:auto;
  width:18px;height:18px;border-radius:50%;
  background:var(--ms-surface);border:2px solid var(--ms-earth);
  box-shadow:0 1px 3px rgba(21,18,14,.2);cursor:grab;
}
.ms-range__input::-webkit-slider-runnable-track{background:none;height:28px;}
.ms-range__input::-moz-range-track{background:none;height:28px;}
.ms-range__input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ms-focus);outline-offset:2px;}

/*
 * The read-out is the interface once scripting is available; the number
 * fields stay in the markup for the no-JS path and are hidden only when the
 * document has announced that scripts ran.
 */
.ms-fprice__readout{
  display:flex;align-items:baseline;gap:8px;
  margin:0 2px 4px;max-width:none;
  font-size:var(--ms-fs-sm);font-weight:600;color:var(--ms-ink);
  font-variant-numeric:tabular-nums;
}
.ms-fprice__readout .ms-fprice__dash{color:var(--ms-muted);font-weight:400;}
.ms-fprice__readout .amount{font-weight:600;}
.js .ms-fprice__fields{display:none;}

.ms-fprice__fields{display:flex;align-items:center;gap:8px;}
.ms-fprice__fields input{min-height:40px;padding:8px 10px;font-size:var(--ms-fs-xs);min-width:0;width:100%;}
.ms-fprice__to{color:var(--ms-muted);flex:0 0 auto;}
.ms-fprice__fields .ms-btn{flex:0 0 auto;padding:0 14px;}

/* ---- The grid while a filter is being fetched ---- */
.ms-shop__main{transition:opacity var(--ms-t) var(--ms-ease);}
.ms-shop__main.is-loading{opacity:.45;pointer-events:none;}


/* --------------------------------------------------------------------------
   5. Grid density on the archive.

   Three across from the tablet breakpoint up, and no further. Four and five
   column rows made each card small enough that the garment stopped being
   readable at a glance, which is the one thing a fashion archive has to do.
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .ms-shop__main .ms-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/*
 * The one band where three across does not fit. From 1024px the sidebar takes
 * 266px out of the row, and on a 1024 screen that leaves 200px cards, smaller
 * than the two across cards a phone gets. Two across and a slightly narrower
 * sidebar hold the card near 340px until the viewport is wide enough to carry
 * three of them properly.
 */
@media (min-width:1024px) and (max-width:1279px){
  .ms-shop__layout--filters{grid-template-columns:236px minmax(0,1fr);}
  .ms-shop__main .ms-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* --------------------------------------------------------------------------
   6. The short row note.

   A category holding one or two pieces leaves standing holes in a three across
   row. They carry the routes onward rather than padding, so a lone card is
   never marooned beside a void. The starting column is passed from the
   template because it depends on how many cards came before it.
   -------------------------------------------------------------------------- */
.ms-gridnote{
  grid-column:1 / -1;
  display:flex;align-items:center;
  padding-top:4px;
}
.ms-gridnote__inner{max-width:36ch;}
.ms-gridnote__lede{
  margin:0;max-width:none;
  font-size:var(--ms-fs-sm);line-height:1.75;color:var(--ms-muted);
}
.ms-gridnote__em{color:var(--ms-ink);}
.ms-gridnote__actions{
  display:flex;flex-wrap:wrap;gap:14px 28px;
  margin-top:clamp(18px,2vw,24px);
}

@media (min-width:640px){
  .ms-gridnote{
    grid-column:var(--ms-gridnote-start,2) / -1;
    align-self:center;
    padding:clamp(6px,1vw,14px) 0 clamp(6px,1vw,14px) clamp(22px,2.4vw,40px);
    border-left:var(--ms-hairline);
  }
}

/* --------------------------------------------------------------------------
   7. Related categories
   -------------------------------------------------------------------------- */
.ms-related__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--ms-space-md);flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.ms-related__title{margin:0;}
.ms-related__all{flex:0 0 auto;}
.ms-related__chips{display:flex;flex-wrap:wrap;gap:10px;}

/* --------------------------------------------------------------------------
   8. Service lines

   Three restatements of a published policy, set as a quiet row rather than a
   promotional banner: hairlines between the items and nothing around them.
   -------------------------------------------------------------------------- */
.ms-assure{
  padding-block:clamp(26px,3vw,40px);
  border-bottom:var(--ms-hairline);
}
.ms-assure__row{
  display:grid;grid-template-columns:minmax(0,1fr);
  list-style:none;margin:0;padding:0;
}
.ms-assure__item{min-width:0;}
.ms-assure__inner{
  display:flex;align-items:center;gap:14px;
  padding:16px 0;min-width:0;
}
.ms-assure__icon{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--ms-champagne);color:var(--ms-gold-ink);
  transition:background var(--ms-t) var(--ms-ease);
}
.ms-assure__text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ms-assure__title{
  font-size:var(--ms-fs-sm);font-weight:500;color:var(--ms-ink);
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-assure__copy{
  font-size:var(--ms-fs-xs);color:var(--ms-muted);line-height:1.5;
}
a.ms-assure__inner:hover .ms-assure__title{color:var(--ms-gold-ink);}
a.ms-assure__inner:hover .ms-assure__icon{background:var(--ms-sand);}

/* Stacked on a phone, divided by hairlines. */
.ms-assure__item + .ms-assure__item{box-shadow:0 -1px 0 var(--ms-border);}

/* Three across only once each column can hold its line of copy without
   breaking it into four. Below that they stack and read full width. */
@media (min-width:940px){
  .ms-assure__row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ms-assure__item + .ms-assure__item{box-shadow:-1px 0 0 var(--ms-border);}
  .ms-assure__inner{justify-content:center;padding-inline:clamp(14px,2vw,28px);}
  .ms-assure__item:first-child .ms-assure__inner{justify-content:flex-start;padding-left:0;}
  .ms-assure__item:last-child .ms-assure__inner{justify-content:flex-end;padding-right:0;}
}

/* --------------------------------------------------------------------------
   9. Search results reuse the same grid without a sidebar.
   -------------------------------------------------------------------------- */
.ms-search-results .ms-shop__layout{grid-template-columns:1fr;}