/* ==========================================================================
   MAHIRA SELECT - home.css
   Homepage sections. Loaded on the front page only.

   Rhythm: full bleed hero slider, service strip, department tiles, product
   grid, editorial split, values row, product grid on sand, occasion bento,
   dark Kalamkari feature, product grid, dark jewellery feature, ink sale band,
   brand story, reviews, newsletter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Hero slider

   Every slide sits in the same single grid cell, so the section is exactly as
   tall as its tallest slide and nothing jumps as the banner rotates. Inactive
   slides are hidden with visibility rather than opacity alone, which also
   takes their links out of the tab order for free.

   The banner is full bleed: one photograph across the whole width with the
   copy laid over it. There is no cream panel beside the picture any more, so
   every slide is dark ground and light type, and the slider chrome is light
   in every state rather than swapping with the slide.
   -------------------------------------------------------------------------- */
.ms-heroslider{
  position:relative;isolation:isolate;background:var(--ms-ink);
  overflow:hidden;
  /* Vertical panning still belongs to the page; horizontal belongs here. */
  touch-action:pan-y;
  cursor:grab;
}
.ms-heroslider:active{cursor:grabbing;}
.ms-heroslider__track{
  display:grid;
  transition:transform 320ms var(--ms-ease);
}
.ms-heroslider__track > .ms-hero{grid-area:1/1;}
/* The controls stay put while the track is dragged under them. */
.ms-heroslider__controls{cursor:default;}

/*
 * Staggered rather than a straight crossfade. Two slides at half opacity puts
 * one headline on top of another and both become unreadable, so the outgoing
 * slide clears first and the incoming one waits for it, leaving only a brief
 * overlap on the brand ground.
 */
.ms-heroslider--many .ms-hero{
  opacity:0;visibility:hidden;
  transition:opacity 280ms var(--ms-ease),visibility 0s linear 280ms;
}
.ms-heroslider--many .ms-hero.is-active{
  opacity:1;visibility:visible;
  transition:opacity 520ms var(--ms-ease) 240ms,visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .ms-heroslider--many .ms-hero{transition:none;}
}

/* ---- Controls. One row, aligned under the copy rather than floated over the
   photograph, so nothing ever lands on a face. Light gold throughout, because
   the ground behind them is dark on every slide now. ---- */
.ms-heroslider__controls{
  position:absolute;z-index:3;
  left:max(var(--ms-gutter),calc((100vw - var(--ms-container)) / 2 + var(--ms-gutter)));
  bottom:clamp(18px,3vh,34px);
  display:flex;align-items:center;gap:14px;
}
.ms-heroslider__arrow{
  width:38px;height:38px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(203,163,97,.5);border-radius:50%;
  background:transparent;color:var(--ms-gold-light);cursor:pointer;
  transition:background var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease);
}
.ms-heroslider__arrow:hover{background:var(--ms-gold);border-color:var(--ms-gold);color:var(--ms-ink);}
.ms-heroslider__dots{display:flex;align-items:center;gap:9px;}
.ms-heroslider__dot{
  width:26px;height:18px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;cursor:pointer;
}
.ms-heroslider__dot span{
  display:block;width:100%;height:2px;
  background:rgba(203,163,97,.45);
  transition:background var(--ms-t) var(--ms-ease),height var(--ms-t) var(--ms-ease);
}
.ms-heroslider__dot:hover span{background:var(--ms-gold-light);}
.ms-heroslider__dot.is-active span{background:var(--ms-gold-light);height:3px;}

.ms-hero{
  position:relative;
  background:var(--ms-ink);
  overflow:hidden;
  isolation:isolate;
}

/* ---- Shared geometry ----
   Both layouts are dark ground with the copy held to the same line as every
   container further down the page, so the box the copy sits in is described
   once and the two modifiers differ only in what they paint behind it. */
.ms-hero__media{position:absolute;inset:0;z-index:0;}
.ms-hero__inner{
  position:relative;z-index:1;
  display:flex;align-items:center;
  width:100%;max-width:var(--ms-container);
  margin-inline:auto;
  padding-inline:var(--ms-gutter);
  padding-block:clamp(48px,7vh,96px);
  min-height:clamp(520px,74vh,760px);
}
.ms-hero__content{max-width:min(600px,54%);}

.ms-hero__title{
  font-family:var(--ms-font-heading);
  /* The measure here is roughly 600px, and the full hero size would push
     TIMELESS FASHION. onto a second line. */
  font-size:clamp(1.75rem,1rem + 2.6vw,3.5rem);
  line-height:1.06;font-weight:500;
  text-transform:uppercase;letter-spacing:.005em;
  color:var(--ms-cream);
  margin-bottom:18px;
}
/* A longer custom headline set in the Customizer breaks evenly rather than
   leaving one orphaned word. */
.ms-hero__title span{display:block;text-wrap:balance;}
.ms-hero__sub{
  font-size:var(--ms-fs-lead);line-height:1.55;font-weight:300;
  color:rgba(245,242,234,.86);
  max-width:44ch;margin-bottom:30px;
}
.ms-hero__actions{display:flex;gap:12px;flex-wrap:wrap;}

/* The controls occupy the bottom of the copy column, so the copy stops short
   of them rather than sitting behind them. */
.ms-heroslider--many .ms-hero__inner{padding-bottom:clamp(74px,10vh,116px);}

/* ---- Full bleed. One photograph across the whole banner ----
   Used by any slide that has an image.

   Two things keep the type legible over a photograph and neither one is
   optional. The photography is commissioned dark and deliberately empty down
   its left side, and a scrim is laid over that side regardless. The scrim is
   the insurance: it costs nothing on an image that already has the empty
   corner, and it is the only thing standing between the headline and a bright
   picture the day somebody sets one from the Customizer without reading the
   brief. */
.ms-hero--full .ms-hero__media{background:var(--ms-ink);}
/* The picture element is a source switch, not a box. display:contents takes
   it out of the layout entirely so the img inside keeps resolving its inset
   against .ms-hero__media exactly as it did when it was an only child. */
.ms-hero__picture{display:contents;}
.ms-hero--full .ms-hero__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* The subject is framed in the right third, so the crop is biased right and
     high: centring it would slice her off the edge on a narrow viewport and
     cut the face on a wide one. */
  object-position:78% 20%;
}
.ms-hero--full .ms-hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(13,13,13,.90) 0%,rgba(13,13,13,.78) 24%,rgba(13,13,13,.42) 50%,rgba(13,13,13,0) 72%),
    linear-gradient(180deg,rgba(13,13,13,.34) 0%,rgba(13,13,13,0) 30%);
}

/* ---- Fallback. Brand ground and monogram, used until an image is set ---- */
.ms-hero--noimage .ms-hero__media{
  background:
    radial-gradient(70% 86% at 76% 24%,rgba(203,163,97,.20),transparent 62%),
    linear-gradient(140deg,var(--ms-ink-lift) 0%,var(--ms-ink) 46%,var(--ms-umber-lift) 100%);
}
.ms-hero--noimage .ms-hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(13,13,13,.72) 0%,rgba(13,13,13,.34) 56%,transparent 100%);
}
.ms-hero__watermark{
  position:absolute;right:-2%;top:50%;transform:translateY(-50%);
  width:min(44vw,460px);height:auto;opacity:.14;
}

@media (max-width:900px){
  /* Portrait phone, one photograph, copy at the foot of it. The scrim turns
     through ninety degrees to match: the empty part of the frame is now above
     the type rather than beside it. */
  .ms-hero__inner{
    align-items:flex-end;
    min-height:clamp(460px,72vh,620px);
    padding-block:clamp(32px,6vh,56px);
  }
  .ms-hero__content{max-width:100%;}
  .ms-hero--full .ms-hero__img{object-position:72% 16%;}
  .ms-hero--full .ms-hero__scrim{
    background:linear-gradient(0deg,rgba(13,13,13,.94) 0%,rgba(13,13,13,.74) 34%,rgba(13,13,13,.36) 62%,rgba(13,13,13,.14) 100%);
  }
  .ms-hero--noimage .ms-hero__scrim{
    background:linear-gradient(0deg,rgba(13,13,13,.9) 0%,rgba(13,13,13,.6) 48%,rgba(13,13,13,.28) 100%);
  }
  .ms-hero__watermark{right:-20%;opacity:.1;}
  /* One row, two buttons, on every slide (client, 2026-09-22).

     The labels are Customizer copy and they are not the same length: the
     Women slide asks for SHOP WOMEN and NEW ARRIVALS, the Jewellery slide for
     SHOP JEWELLERY and EXPLORE COLLECTIONS. Under flex:1 1 auto the short
     pair fitted one row and the long pair wrapped into two full width rows,
     so the banner changed shape as it rotated.

     nowrap plus flex:1 1 0 fixes the row at two equal halves whatever the
     labels say. A label too long for its half now breaks onto a second line
     inside its own button rather than pushing the button onto a row of its
     own, and stretch keeps the shorter button the same height as it. */
  .ms-hero__actions{flex-wrap:nowrap;align-items:stretch;}
  .ms-hero__actions .ms-btn{flex:1 1 0;min-width:0;}
  .ms-heroslider__controls{left:var(--ms-gutter);gap:10px;}
  .ms-heroslider--many .ms-hero__inner{padding-bottom:clamp(74px,11vh,104px);}
}
@media (max-width:600px){
  /* Half a phone screen is about 165px of button, and the desktop 12px type
     with a 28px pad needs more than that for EXPLORE COLLECTIONS. The size
     tracks the viewport so the longest label of the three slides sets on one
     line from 360px up; the padding-block and line-height are the fallback
     for anything longer still, which breaks inside its own button. */
  .ms-hero__actions{gap:10px;}
  .ms-hero__actions .ms-btn{
    padding:12px 10px;
    font-size:clamp(.625rem,.5rem + .55vw,.75rem);
    letter-spacing:.06em;line-height:1.3;
  }
}
@media (max-width:560px){
  .ms-heroslider__arrow{display:none;}
}

/* --------------------------------------------------------------------------
   03. Editorial bands
   "Crafted for every occasion", Kalamkari, Jewellery and the brand story.

   Four full width photographs with the copy laid over them. This one block
   replaced three separate constructions on 2026-09-10 — an editorial split, a
   pair of feature blocks and an asymmetric story band, which used to be
   sections 03, 06 and 08 of this file. The client read every one of them the
   same way: a picture in one half and a coloured panel in the other looks like
   two pieces pushed together, not like one section. That is the objection that
   took the panel off the hero first. Feathering the seam and running a gold
   hairline down it had already been tried here and did not answer it, because
   the join was never the problem — two grounds meeting anywhere in the frame
   was.

   So this is the hero's construction, and it inherits the hero's terms. The
   media layer is absolute and bleeds to both edges of the viewport; the copy
   sits on the container measure on top of it; and a scrim over the copy side
   guarantees the contrast whatever photograph is set.

   --left and --right say which side the copy is on, so the subject belongs in
   the other third. The homepage alternates them down the page (hero left, then
   right, left, right, left) and each photograph is composed for its side:
   flipping one without recomposing its picture puts the headline over a face.

   --ink and --ivory are the two grounds, and which one a band takes is a fact
   about its photograph rather than a choice about the page. The ivory scrim
   resolves to the page colour, so on a frame that really is pale where the
   copy sits the band has no edge at all - the photograph washes out into the
   page. On a frame that is not, the same wash has to be heavy enough to erase
   that half of the picture, and the band then reads as a photograph pushed up
   against a cream panel. That is the objection the client has now raised three
   times, and it is why Story moved to --ink on 2026-09-15: the third of its
   frame the copy sits on is a mid warm brown, so the only wash that leaves a
   picture visible under type there is a dark one.
   -------------------------------------------------------------------------- */
.ms-band{
  position:relative;overflow:hidden;isolation:isolate;
  /* The copy column, and the distance from the copy side edge of the band out
     to that column's far edge. The column is a fixed measure sitting inside a
     container that stops growing at 1600px, so that distance is not a fixed
     fraction of the band: it is 38% of it at 1600px and 44% at 3440px. The
     ivory wash below is laid out from it rather than from percentages for
     exactly that reason. Under about 1200px the 52% cap is what sizes the
     column instead, so the min() has to carry that case too.

     The editorial band overrides both the container and the column, so this
     does not describe it - but its scrim is off at every width, so nothing
     there reads this. */
  --ms-band-measure:560px;
  --ms-band-copy:calc(
    (100vw - min(100vw,var(--ms-container))) / 2
    + var(--ms-gutter)
    + min(var(--ms-band-measure),(min(100vw,var(--ms-container)) - 2 * var(--ms-gutter)) * .52)
  );
}
.ms-band__media{position:absolute;inset:0;z-index:0;}
.ms-band__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  /* Set per band from the template. The subject is never in the middle of
     these frames, so a centred crop would cut it on one viewport and lose it
     on another. */
  object-position:var(--ms-band-focus,center);
}
.ms-band__scrim{position:absolute;inset:0;}

.ms-band__inner{
  position:relative;z-index:1;
  display:flex;align-items:center;
  width:100%;max-width:var(--ms-container);
  margin-inline:auto;
  padding-inline:var(--ms-gutter);
  padding-block:clamp(48px,6vh,88px);
  /* Shorter than the hero, which owns the fold, but not by much: the band has
     to stay tall enough that a 3:2 photograph is not sliced to a strip. At
     this height a wide screen keeps roughly the middle three fifths of the
     frame. */
  min-height:clamp(470px,62vh,660px);
}
.ms-band--right .ms-band__inner{justify-content:flex-end;}
.ms-band__content{max-width:min(var(--ms-band-measure),52%);}

/* ---- Type ---- */
.ms-band .ms-band__title{
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.375rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.12;
}
.ms-band .ms-rule{margin-bottom:18px;}
/*
 * Both paragraphs in a band are one setting: the lead size, on the client's
 * instruction of 2026-09-13, and from 2026-09-14 the lead colour with it. The
 * bands carry two paragraphs at most and both are brand copy rather than body
 * text, so the second dropping to the smaller size read as a footnote to the
 * first rather than as the rest of the statement - and once the sizes matched,
 * the first sitting in ink against the second's muted grey read as a size
 * difference all over again. The client asked for the second paragraph's
 * setting on both, so .ms-lead is no longer put on either: see band.php.
 *
 * A flat 16px since 2026-09-15, on the client's instruction. It was the lead
 * token, then two pixels under it, and the client asked for a plain 16 in the
 * end - so this is the one piece of running type on the page that is off the
 * scale, deliberately. Written as 1rem rather than 16px so a reader who has
 * raised their browser's default still gets the increase.
 *
 * The 46ch measure went with it. A ch measure holds the line length steady as
 * the size changes, which is the whole point of it, but at 16px it resolved to
 * 453px against a 532px headline and the block read as an indent under the
 * heading rather than as the same column. The column's own 560px cap is the
 * measure now - 61 characters at this size, still inside a comfortable range -
 * so the heading and the copy under it always share one edge.
 */
.ms-band__para{
  max-width:100%;text-wrap:pretty;
  font-size:1rem;
  line-height:1.55;
  font-weight:300;
}
.ms-band__para + .ms-band__para{margin-top:14px;}
.ms-band__cta{margin-top:clamp(22px,2.6vw,32px);}

/* ---- Ink. Dark photograph, cream type ---- */
.ms-band--ink{background:var(--ms-ink);}
.ms-band--ink .ms-band__title{color:var(--ms-cream);}
.ms-band--ink .ms-band__para{color:rgba(245,242,234,.86);}
.ms-band--ink.ms-band--left .ms-band__scrim{
  background:
    linear-gradient(90deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.80) 26%,rgba(13,13,13,.44) 52%,rgba(13,13,13,0) 76%),
    linear-gradient(180deg,rgba(13,13,13,.32) 0%,rgba(13,13,13,0) 34%);
}
.ms-band--ink.ms-band--right .ms-band__scrim{
  background:
    linear-gradient(270deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.80) 26%,rgba(13,13,13,.44) 52%,rgba(13,13,13,0) 76%),
    linear-gradient(180deg,rgba(13,13,13,.32) 0%,rgba(13,13,13,0) 34%);
}

/* ---- Ivory. Light photograph, ink type ----
   No band on the homepage takes this ground now - Editorial turns its scrim
   off above 900px, and Story moved to --ink on 2026-09-15 - but --ivory is
   still an option in band.php, and the two things settled here are what any
   future light band has to satisfy.

   First, the wash has to be held harder than the ink band's, because ink type
   needs a cleaner ground under it than cream type does. At .97 it puts an
   earth gold eyebrow, the smallest type in a band, at about 4.6:1 over a
   mid-toned frame.

   Second, where the wash ENDS decides whether the band reads as one piece. It
   used to run to 78% of the band, most of the way across the frame, with a
   second gradient laying another .30 of cream over the top third on its own
   account. The client called that whiteness on 2026-09-14: the subject sat
   under a milky veil and the picture read as washed out rather than as lit.
   The top one is gone, and the horizontal one now holds full strength across
   the copy column and is spent within 240px of it.

   Its stops are offsets from --ms-band-copy rather than percentages of the
   band, because the copy column is a fixed measure in a container that stops
   growing and its far edge therefore is not at a fixed fraction of anything.
   A percentage tuned to clear the subject at 1600px leaves type sitting on
   bare photograph at 2560px.

   What none of it answers is the objection that followed on 2026-09-15: a
   pale wash over a frame that is not itself pale erases that half of the
   picture whatever its stops are, and a cleaner fade only sharpens the seam
   it leaves. Only a frame with a genuinely light, quiet third can carry this
   ground at all. */
.ms-band--ivory{background:var(--ms-cream);}
.ms-band--ivory .ms-band__title{color:var(--ms-ink);}
.ms-band--ivory .ms-band__para{color:var(--ms-muted);}
.ms-band--ivory.ms-band--left .ms-band__scrim{
  background:linear-gradient(90deg,
    rgba(245,242,234,.97) 0,
    rgba(245,242,234,.97) var(--ms-band-copy),
    rgba(245,242,234,.52) calc(var(--ms-band-copy) + 95px),
    rgba(245,242,234,0) calc(var(--ms-band-copy) + 240px));
}
.ms-band--ivory.ms-band--right .ms-band__scrim{
  background:linear-gradient(270deg,
    rgba(245,242,234,.97) 0,
    rgba(245,242,234,.97) var(--ms-band-copy),
    rgba(245,242,234,.52) calc(var(--ms-band-copy) + 95px),
    rgba(245,242,234,0) calc(var(--ms-band-copy) + 240px));
}

/* ---- The category groups, read live from the taxonomy ----
   Kalamkari and Jewellery carry these. A band whose copy is a heading, one
   sentence and a button leaves most of its measure empty, and the empty part
   was the part the client kept pointing at. These give the space a job and
   let a customer enter the edit where they actually want to. */
.ms-band__links{
  list-style:none;margin:22px 0 4px;padding:0;width:100%;max-width:44ch;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 28px;
}
.ms-band__links a{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;
  font-size:clamp(.8125rem,.79rem + .14vw,.9375rem);
  transition:color var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease);
}
.ms-band__links a::before{
  content:"";flex:0 0 auto;width:14px;height:1px;background:var(--ms-gold);
  transition:width var(--ms-t) var(--ms-ease);
}
.ms-band__links a:hover::before{width:24px;}
.ms-band--ink .ms-band__links a{
  color:rgba(245,242,234,.80);
  border-bottom:1px solid rgba(245,242,234,.13);
}
.ms-band--ink .ms-band__links a:hover{color:var(--ms-cream);border-bottom-color:var(--ms-gold-line);}
.ms-band--ivory .ms-band__links a{
  color:var(--ms-muted);
  border-bottom:1px solid var(--ms-border);
}
.ms-band--ivory .ms-band__links a:hover{color:var(--ms-ink);border-bottom-color:var(--ms-gold-line);}

/* ---- No photograph set. The brand ground, as the hero does it ---- */
.ms-band--noimage.ms-band--ink .ms-band__media{
  background:
    radial-gradient(70% 86% at 76% 24%,rgba(203,163,97,.20),transparent 62%),
    linear-gradient(140deg,var(--ms-ink-lift) 0%,var(--ms-ink) 46%,var(--ms-umber-lift) 100%);
}
.ms-band--noimage.ms-band--ivory .ms-band__media{
  background:
    radial-gradient(110% 100% at 14% 0%,rgba(203,163,97,.16),transparent 60%),
    linear-gradient(152deg,var(--ms-champagne) 0%,var(--ms-sand) 62%,var(--ms-sand-deep) 100%);
}
/* With no photograph under it the scrim would only mute the gradient. */
.ms-band--noimage .ms-band__scrim{display:none;}

@media (max-width:900px){
  /* Portrait phone. The copy drops to the foot of the photograph and the
     scrim turns through ninety degrees to match: the quiet part of the frame
     is now above the type rather than beside it. Same move as the hero, and
     it is why the left and right variants collapse to one here. */
  .ms-band__inner{
    align-items:flex-end;
    /*
     * Taller than it was, and the wash below is the reason. The editorial
     * band's copy measures about 435px on a phone, which is the whole of the
     * 519px the old clamp gave it at 812px of viewport - so a wash sized to
     * the copy covered the entire frame and the photograph was gone. At 78vh
     * the same copy leaves roughly 110px of picture showing above it, which
     * is enough to read the frame as a photograph rather than as a texture.
     *
     * The 480px floor is for a short screen, where the copy is taller than
     * 78vh and sets the height itself; there the feather is clipped at the
     * top edge, which is the same as it always was.
     *
     * Both numbers now reach only the --noimage band. Where there is a
     * photograph the height is composed instead - the picture strip plus
     * whatever the copy runs to - a few rules below this one.
     */
    min-height:clamp(480px,78vh,700px);
    padding-block:clamp(32px,5vh,52px);
  }
  .ms-band--right .ms-band__inner{justify-content:flex-start;}
  .ms-band__content{max-width:100%;}
  .ms-band__links{max-width:100%;}
  .ms-band__para{max-width:100%;}

  /* ---- The photograph is given a height of its own ----
     Client instruction, 2026-09-14: on a phone there was next to no picture
     showing. The strip was never sized - it was whatever the band had left over
     once the copy had taken its share, and measured on staging at a 375px
     viewport it came to 181px on Jewellery, 152 on Editorial, 101 on Kalamkari
     and 57 on Story. The top 46px of any strip is the wash feather, so the
     Story band was showing eleven clear pixels of photograph.

     So the strip is now stated rather than inherited: the inner's top padding
     IS the picture, the band's height is that plus whatever the copy runs to,
     and every band shows the same amount of frame however long its copy is.
     About 345px at 375px of viewport, near three times the 123px the four
     bands averaged before.

     The media is cut to match, and that half is not cosmetic. Left covering the
     whole band, the 1966x800 frames would sit in a box up to 975px tall, where
     object-fit scales them 1.22x UP and keeps 16% of their width - a blurred
     vertical sliver, and every pixel added to the band made it narrower. Held
     to the strip the same frame is scaled 0.54x down with 35% of it in view.
     Below the cut there is nothing to lose: the wash is at .96 by the first
     pixel of the eyebrow, and the band's own ground is the exact colour that
     wash ends on. The mask feathers the last few per cent away over 100px so
     no edge can show even under a high contrast frame.

     --noimage is left out of both rules. It has no photograph, so it would get
     an empty coloured strip and a masked gradient for nothing. */
  .ms-band{--ms-band-strip:clamp(260px,92vw,420px);}
  .ms-band:not(.ms-band--noimage) .ms-band__inner{
    min-height:0;
    padding-top:var(--ms-band-strip);
  }
  .ms-band:not(.ms-band--noimage) .ms-band__media{
    inset:0 0 auto 0;
    height:calc(var(--ms-band-strip) + 120px);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 100px),transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 100px),transparent 100%);
  }

  /* ---- The wash follows the copy, not the frame ----
     The scrim used to be a gradient over the whole band, which works only
     while the copy is short enough to sit in the near opaque end of it. The
     editorial band's copy is not: a heading of two lines and two paragraphs
     fill a phone sized band top to bottom, so the eyebrow and the heading
     landed where the gradient had faded to about a quarter and sat on bare
     photograph - over a face, in the frame the client was looking at on
     2026-09-13.

     Anchoring the wash to the copy instead of to the band fixes that at any
     copy length: the type always has the same ground under it, and the
     picture keeps whatever room is left above it. The 46px offset and the
     stops in it are one measurement - the wash is at .96 by the first pixel
     of the eyebrow and feathers to nothing across the 46px above it, so
     there is no edge anywhere.

     The .96 is what the contrast needs, not a taste call. Over the darkest
     photograph the wash can sit on, it puts the earth gold eyebrow at 4.6:1
     and the ink heading past 8:1; anything lighter and the eyebrow, which is
     the smallest type in the band, drops under 4.5:1. */
  .ms-band__scrim{display:none;}
  .ms-band__content{position:relative;}
  .ms-band__content::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    left:50%;width:100vw;transform:translateX(-50%);
    top:-46px;
    /* Down to the foot of the band: the inner's own bottom padding. */
    bottom:calc(-1 * clamp(32px,5vh,52px));
  }
  .ms-band--ink .ms-band__content::before{
    background:linear-gradient(180deg,
      rgba(13,13,13,0) 0,
      rgba(13,13,13,.50) 20px,
      rgba(13,13,13,.94) 46px,
      rgba(13,13,13,.97) 100%);
  }
  .ms-band--ivory .ms-band__content::before{
    background:linear-gradient(180deg,
      rgba(245,242,234,0) 0,
      rgba(245,242,234,.55) 20px,
      rgba(245,242,234,.96) 46px,
      rgba(245,242,234,.99) 100%);
  }
  /* The muted grey was chosen against the near white the old scrim painted.
     On a .96 wash over a dark photograph it falls to 4.3:1, so the second
     paragraph takes the same near ink brown the desktop editorial band
     already uses for it. */
  .ms-band--ivory .ms-band__para{color:#2A2320;}
}
@media (max-width:560px){
  .ms-band__links{grid-template-columns:1fr;max-width:34ch;}
}

/* ---- The bands photographed for the full bleed ----
   Editorial, Kalamkari, Jewellery and Story each carry a 1966x800 frame cut
   for this band and mirrored to match it: the subject in the right third with
   the quiet ground on the left for Jewellery, the reverse for the other three.
   Any band still on a 4:3 or 3:2 picture has to be cropped to whatever height
   the band happens to be; these four are already the shape of the band, so the
   height is taken from the photograph instead of the other way round and the
   frame arrives whole.

   Story keeps its scrim, and that is not an oversight. Sampled the same way as
   the editorial band, its wall comes in at a median relative luminance of 0.19
   against editorial's 0.33 - dark enough that even ink manages only 4.46:1 on
   it, under the 4.5 a small size needs, while the muted grey falls to 1.37:1.
   Editorial can carry type on the bare photograph; this frame cannot, so the
   wash stays until either the picture or the type changes.

   Why it is worth the special case: the 4:3 pictures these replaced were
   being scaled 1.3x to cover a 660px band and sliced to a close up of a face,
   which is what the client saw. Driving the height from the ratio means the
   crop is nil at every width down to the point where the copy needs more room
   than the ratio gives - that floor is the 470px, and it is the plain value
   rather than the 62vh clamp above because a viewport-height term would put
   the band back in charge and start cropping again on a short laptop screen.

   The 800/1966 has to stay in step with the files. Replace either photograph
   with a different cut and this ratio is what decides whether it is shown
   whole, not anything in the template.

   Scoped to the two column layout on purpose. Under 900px the copy drops to
   the foot of the frame and the band wants the taller portrait proportion the
   base rule gives it, not this one. */
@media (min-width:901px){
  .ms-band--editorial .ms-band__inner,
  .ms-band--kalamkari .ms-band__inner,
  .ms-band--jewellery .ms-band__inner,
  .ms-band--story .ms-band__inner{
    min-height:max(470px, calc(100vw * 800 / 1966));
  }
}

/* ---- Editorial takes the dark ground too ----
   This band spent two revisions trying to carry dark type on bare photograph.
   The wash came off it on 2026-09-13 on the client's instruction - image and
   text, nothing between them - and it could come off, because the family sits
   in the left half and the right half is a sunlit wall. Keeping type legible
   on that wall then cost a run of special cases: the inner dropped the
   container cap and took a percentage inset so the copy could be pinned to the
   52-83% window where the wall actually is, the column was capped in vw to
   match, a second inset was needed below 1155px where the band's own edge is
   nowhere near the picture's, the crop moved to 46% to stop the wall sliding
   out from under the copy, and the eyebrow and paragraphs were re-picked twice
   against luminance sampled across that window.

   All of it comes off again on 2026-09-15, when the client asked for the Story
   band's treatment here: one photograph, cream type laid on it, the wash back
   underneath. Every one of those cases existed only to keep dark type on a
   bare frame, and a scrim under cream type needs none of them - the copy can
   sit anywhere in the picture. So the band goes back to the standard geometry,
   which is also what the client asked for in the same breath: it puts the copy
   about 90px further right than the 17% inset had it, and in line with the
   Story band further down the page.

   What it keeps is a firmer scrim than the other ink bands. This wall is the
   brightest ground any copy on the page sits on - sampled across the copy
   window it reaches 0.30, against the Story interior's 0.20 - and on the
   shared gradient the gold eyebrow, the smallest type in the band, comes to
   3.74:1. Holding the stops out to .94/.86/.46/0 puts it at 5.05:1, the
   paragraphs at 8.3:1 and the heading at 10.6:1.

   Its selector has to carry --ink as well as the band key. The tone rule it
   overrides is two classes deep on the same element, so a one-class band
   selector loses the cascade to it and the firmer stops silently never land -
   which is exactly how this shipped for one deploy on 2026-09-15.

   The 46% crop stays. It is about where the family sits in the frame rather
   than about the wash: above about 1500px the ratio sets the height and it
   changes nothing, below it the crop turns horizontal and 46% splits the
   overflow evenly instead of dragging the group off one side. */
@media (min-width:901px){
  .ms-band--editorial .ms-band__img{object-position:46% 15%;}
  .ms-band--ink.ms-band--editorial .ms-band__scrim{
    background:
      linear-gradient(270deg,rgba(13,13,13,.94) 0%,rgba(13,13,13,.86) 34%,rgba(13,13,13,.46) 56%,rgba(13,13,13,0) 80%),
      linear-gradient(180deg,rgba(13,13,13,.32) 0%,rgba(13,13,13,0) 34%);
  }
}

/* --------------------------------------------------------------------------
   04. Values row. Thin gold circular line icons, per the design board.
   -------------------------------------------------------------------------- */
.ms-why__row{
  display:grid;gap:clamp(28px,3.2vw,40px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:900px){ .ms-why__row{grid-template-columns:repeat(4,minmax(0,1fr));} }
.ms-why__item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
}
.ms-why__icon{
  width:clamp(64px,5.2vw,78px);height:clamp(64px,5.2vw,78px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ms-gold-line);color:var(--ms-earth);
  background:var(--ms-gold-soft);
  margin-bottom:6px;
}
/* Sentence case at a readable size. The old treatment was 11px uppercase with
   heavy tracking, which is a label, not a heading. */
.ms-why__title{
  font-family:var(--ms-font-body);
  font-size:clamp(.9375rem,.88rem + .3vw,1.125rem);
  font-weight:600;letter-spacing:.01em;
  color:var(--ms-ink);margin:0;line-height:1.35;
}
.ms-why__copy{
  font-size:clamp(.875rem,.83rem + .22vw,1rem);
  color:var(--ms-muted);max-width:26ch;line-height:1.6;
}

/* --------------------------------------------------------------------------
   05. Shop by occasion

   Six equal rounded boxes of the same squat proportion read as a table of
   contents rather than as merchandising, which is the complaint that came
   back. Three changes answer it: square corners, a mosaic of two wide tiles
   over four portrait ones, and a call to action that is on the tile all the
   time instead of an arrow that only appears under the pointer.

   The mosaic proportions are chosen so both rows land on nearly the same
   height at every container width. Inside a 1360px container a tile spanning
   six of twelve columns is about 671px wide, so 3/2 puts it at 447px tall;
   a tile spanning three is about 326px, so 3/4 puts it at 435px. The two
   rows stay within about ten pixels of each other from 1080px upwards.
   -------------------------------------------------------------------------- */
.ms-occasion__grid{
  display:grid;gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:760px){ .ms-occasion__grid{grid-template-columns:repeat(3,minmax(0,1fr));} }

/* Two wide tiles, then the remainder across the lower row. Twelve tracks
   divide by four and by three alike, so five tiles lay out as cleanly as six —
   which is what the row came down to when Traditional left with the Men
   department on 2026-09-17. */
@media (min-width:1080px){
  .ms-occasion__grid--mosaic{grid-template-columns:repeat(12,minmax(0,1fr));}
  .ms-occasion__grid--mosaic6 > *{grid-column:span 3;}
  .ms-occasion__grid--mosaic5 > *{grid-column:span 4;}
  .ms-occasion__grid--mosaic > :nth-child(1),
  .ms-occasion__grid--mosaic > :nth-child(2){grid-column:span 6;}
}

.ms-occasion__cell{
  position:relative;display:flex;align-items:flex-end;
  min-height:158px;padding:clamp(18px,2vw,30px);
  overflow:hidden;isolation:isolate;
  border-radius:0;
}
.ms-occasion__ground{position:absolute;inset:0;z-index:-1;transition:transform 700ms var(--ms-ease);}
.ms-occasion__cell:hover .ms-occasion__ground{transform:scale(1.05);}
/* Plain ground, used only where a category has no thumbnail yet. */
.ms-occasion__cell:not(.ms-occasion__cell--photo) .ms-occasion__ground{
  background:linear-gradient(148deg,var(--ms-champagne),var(--ms-sand));
}

/* ---- Photographed tiles ---- */
/*
 * Portrait by default. Fashion photography is shot tall, and the old landscape
 * box cropped every one of these pictures to a strip. The cells are grid
 * items, so the ratio acts as a floor: a tile whose copy needs more room grows
 * rather than clipping it.
 */
.ms-occasion__cell--photo{aspect-ratio:3/4;}
@media (min-width:760px){ .ms-occasion__cell--photo{aspect-ratio:1/1;} }
@media (min-width:1080px){
  .ms-occasion__grid--mosaic .ms-occasion__cell--photo{aspect-ratio:3/4;}
  /* Three across the lower row rather than four, so each tile is a third wider
     and 3/4 would stand a head taller than the two above it. Square lands it
     within a few pixels of them instead: inside a 1360px container the wide
     tiles are 671px at 3/2, or 447px tall, and a third of the row is 441px. */
  .ms-occasion__grid--mosaic5 .ms-occasion__cell--photo{aspect-ratio:1/1;}
  .ms-occasion__grid--mosaic > :nth-child(1).ms-occasion__cell--photo,
  .ms-occasion__grid--mosaic > :nth-child(2).ms-occasion__cell--photo{aspect-ratio:3/2;}
}
/*
 * Lifted, not centred. The master is square and the mosaic shows it at 3/2 in
 * the two wide tiles, which keeps only the middle two thirds of its height —
 * a centred crop takes the top off the model's head. Pulling the visible band
 * upwards keeps the headroom and drops floor the picture does not need. It is
 * a no-op on the portrait tiles, which have no vertical overflow to position,
 * so one declaration covers every breakpoint.
 */
.ms-occasion__img{width:100%;height:100%;object-fit:cover;object-position:center 26%;display:block;}
/*
 * Foot only. This was a full height wash plus a flat brown tint over the whole
 * tile: it held the copy at contrast but left every photograph looking muddy
 * and half lit, which is exactly what the client objected to. The gradient now
 * clears completely by two thirds up, so the model and the garment are shown
 * at full strength and only the band the words actually occupy is darkened.
 * Cream still measures about 4.5:1 where the heading sits and better below it,
 * which the photography has to hold up: the brief for these six asks for the
 * foot of the frame to fall into a deeper tone for exactly this reason.
 *
 * The scrim is on the cell rather than the ground so the hover zoom moves the
 * picture without dragging the gradient with it.
 */
.ms-occasion__cell--photo::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,
    rgba(13,13,13,.92) 0%,
    rgba(13,13,13,.80) 18%,
    rgba(13,13,13,.58) 34%,
    rgba(13,13,13,.26) 50%,
    rgba(13,13,13,0) 68%);
}
.ms-occasion__cell--photo .ms-occasion__title{color:var(--ms-cream);}
.ms-occasion__cell--photo .ms-occasion__copy{color:rgba(245,242,234,.84);}

/*
 * Below the mosaic the tile loses most of its height but the copy block does
 * not shrink with it, so the words climb out of the gradient and land on the
 * model's face. The scrim reaches higher to meet them at these sizes — it is
 * still a foot gradient, just a taller foot on a shorter tile.
 */
@media (max-width:1079px){
  .ms-occasion__cell--photo::after{
    background:linear-gradient(0deg,
      rgba(13,13,13,.92) 0%,
      rgba(13,13,13,.80) 20%,
      rgba(13,13,13,.56) 40%,
      rgba(13,13,13,.24) 56%,
      rgba(13,13,13,0) 72%);
  }
}
/*
 * Two up on a phone puts the tile at about 158px wide, where the description
 * wrapped to four lines, filled the picture and pushed the name up over the
 * face. The name and the call to action carry the tile on their own at that
 * size; the sentence returns as soon as there is room for it.
 */
@media (max-width:759px){
  .ms-occasion__cell--photo .ms-occasion__copy{display:none;}
  .ms-occasion__cell--photo::after{
    background:linear-gradient(0deg,
      rgba(13,13,13,.92) 0%,
      rgba(13,13,13,.78) 18%,
      rgba(13,13,13,.50) 36%,
      rgba(13,13,13,.18) 52%,
      rgba(13,13,13,0) 68%);
  }
}

/* The hover hairline, drawn just inside the tile. Same gesture as the
   department row above, so the page has one answer to the pointer. */
.ms-occasion__cell::before{
  content:"";position:absolute;inset:12px;z-index:1;pointer-events:none;
  border:1px solid var(--ms-gold-line);
  opacity:0;transform:scale(1.015);
  transition:opacity var(--ms-t) var(--ms-ease),transform var(--ms-t) var(--ms-ease);
}
.ms-occasion__cell:hover::before,.ms-occasion__cell:focus-visible::before{opacity:1;transform:scale(1);}

.ms-occasion__text{display:flex;flex-direction:column;align-items:flex-start;gap:7px;max-width:32ch;}
.ms-occasion__rule{
  display:block;width:32px;height:1px;background:var(--ms-gold);
  margin-bottom:6px;
  transition:width var(--ms-t) var(--ms-ease);
}
.ms-occasion__cell:hover .ms-occasion__rule{width:52px;}
.ms-occasion__title{
  font-family:var(--ms-font-heading);
  font-size:clamp(1.1875rem,.98rem + .78vw,1.625rem);
  font-weight:500;line-height:1.1;color:var(--ms-ink);
}
@media (min-width:1080px){
  .ms-occasion__grid--mosaic > :nth-child(1) .ms-occasion__title,
  .ms-occasion__grid--mosaic > :nth-child(2) .ms-occasion__title{
    font-size:clamp(1.5rem,1.1rem + 1.25vw,2.25rem);
  }
}
.ms-occasion__copy{
  font-size:clamp(.8125rem,.78rem + .18vw,.9375rem);
  color:var(--ms-muted);line-height:1.55;text-wrap:pretty;
}
/*
 * Standing, not revealed. A tile that only admits it is a link once the
 * pointer is over it looks like decoration, and on a touch screen it never
 * admits it at all.
 */
.ms-occasion__cta{
  margin-top:12px;display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ms-gold);
  padding-bottom:5px;border-bottom:1px solid rgba(203,163,97,.34);
  transition:border-color var(--ms-t) var(--ms-ease);
}
.ms-occasion__cell:not(.ms-occasion__cell--photo) .ms-occasion__cta{
  color:var(--ms-earth);border-bottom-color:var(--ms-gold-line);
}
.ms-occasion__cta svg{transition:transform var(--ms-t) var(--ms-ease);}
.ms-occasion__cell:hover .ms-occasion__cta{border-bottom-color:var(--ms-gold);}
.ms-occasion__cell:hover .ms-occasion__cta svg{transform:translateX(4px);}

/* --------------------------------------------------------------------------
   07. Sale band

   On the brand's soft sand rather than ink. The band used to be a second
   black slab between two dark sections, which flattened the whole lower half
   of the page; the sand separates it and lets the product photography carry
   the section instead of fighting a dark ground.
   -------------------------------------------------------------------------- */
.ms-sale{
  background:
    radial-gradient(100% 90% at 50% 0%,rgba(203,163,97,.13),transparent 60%),
    var(--ms-sand);
}

/* ---- Tabs ---- */
.ms-tabs__list{
  display:flex;gap:4px;flex-wrap:wrap;justify-content:center;
  margin-bottom:clamp(26px,3vw,40px);
  padding:5px;
  background:var(--ms-cream);
  border:1px solid var(--ms-border);
  border-radius:999px;
  width:fit-content;margin-inline:auto;
  max-width:100%;
}
.ms-tabs__tab{
  appearance:none;border:0;cursor:pointer;
  padding:11px 22px;border-radius:999px;
  background:transparent;color:var(--ms-muted);
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-xs);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
  transition:background var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease);
}
.ms-tabs__tab:hover{color:var(--ms-ink);}
.ms-tabs__tab.is-on{background:var(--ms-ink);color:var(--ms-cream);}
.ms-tabs__panel[hidden]{display:none;}

@media (max-width:560px){
  .ms-tabs__list{
    border-radius:var(--ms-radius-card);
    width:100%;justify-content:stretch;
  }
  .ms-tabs__tab{flex:1 1 0;min-width:0;padding:11px 8px;letter-spacing:.04em;border-radius:calc(var(--ms-radius-card) - 4px);}
}

/* The cards sit on sand, so the frame takes the deeper sand rather than the
   cream it uses on the plain page ground. */
.ms-sale .ms-card__frame{background:var(--ms-sand-deep);}

/* --------------------------------------------------------------------------
   09. Reviews
   -------------------------------------------------------------------------- */
/* Left on the page's own cream. The story band above is champagne and the
   newsletter below is ink, so a third tone here would only blur the seam with
   the story; the white cards carry the contrast instead. */
.ms-reviews__row{
  display:grid;gap:clamp(16px,1.8vw,24px);
  grid-template-columns:1fr;
  align-items:stretch;
}
@media (min-width:800px){ .ms-reviews__row{grid-template-columns:repeat(3,minmax(0,1fr));} }

/*
 * A card, not a column of centred text. Most reviews are three or four words
 * long, and left unbounded those words sat alone in a very wide band with
 * nothing to give them weight. The card gives the shortest review the same
 * footprint as the longest, and the product it is about does the rest.
 */
.ms-review{
  margin:0;position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:clamp(24px,2.4vw,32px);
  background:var(--ms-surface);
  border:var(--ms-hairline);
  border-radius:var(--ms-radius-media);
  transition:border-color var(--ms-t) var(--ms-ease),transform var(--ms-t) var(--ms-ease),box-shadow var(--ms-t) var(--ms-ease);
}
.ms-review:hover{
  border-color:var(--ms-gold-line);
  transform:translateY(-2px);
  box-shadow:0 14px 34px -22px rgba(21,18,14,.5);
}

/* The opening quote, set as a watermark rather than as punctuation. */
.ms-review__mark{
  position:absolute;top:6px;right:clamp(18px,2vw,26px);
  font-family:var(--ms-font-heading);
  font-size:clamp(4rem,6vw,5.5rem);line-height:1;
  color:var(--ms-gold);opacity:.18;
  pointer-events:none;user-select:none;
}

.ms-review__stars{display:flex;gap:3px;color:var(--ms-border);}
.ms-review__stars svg.is-on{color:var(--ms-gold);fill:currentColor;}

/* The quote takes the space a short one would otherwise leave to the footer,
   so all three cards line their attribution up on the same baseline. */
.ms-review__quote{margin:0;flex:1 1 auto;}
.ms-review__quote p{
  font-family:var(--ms-font-heading);
  font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);
  line-height:1.5;font-weight:400;
  color:var(--ms-ink);
}

.ms-review__by{display:flex;align-items:center;gap:11px;width:100%;}
.ms-review__avatar{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ms-champagne);
  border:1px solid var(--ms-gold-line);
  font-family:var(--ms-font-heading);
  font-size:1rem;line-height:1;color:var(--ms-earth);
}
.ms-review__who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ms-review__name{
  color:var(--ms-ink);font-weight:500;font-size:var(--ms-fs-sm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ms-review__meta{font-size:var(--ms-fs-micro);color:var(--ms-muted);}
.ms-review__verified{display:inline-flex;align-items:center;gap:4px;color:var(--ms-earth);}
.ms-review__verified svg{stroke-width:2.4;}

/* The piece the review is about, as a row across the foot of the card. */
.ms-review__product{
  display:flex;align-items:center;gap:11px;width:100%;
  margin-top:2px;padding-top:16px;
  border-top:var(--ms-hairline);
  font-size:var(--ms-fs-xs);color:var(--ms-muted);
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-review__product:hover{color:var(--ms-gold-ink);}
.ms-review__thumb{
  flex:0 0 auto;width:44px;height:52px;overflow:hidden;
  border-radius:6px;background:var(--ms-sand);
}
.ms-review__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ms-review__pname{
  flex:1 1 auto;min-width:0;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ms-review__product svg{flex:0 0 auto;opacity:.6;}
.ms-review__product:hover svg{opacity:1;}

/* --------------------------------------------------------------------------
   10. Newsletter
   -------------------------------------------------------------------------- */
.ms-news{background:var(--ms-ink);}
.ms-news__inner{text-align:center;}
.ms-news__inner .ms-h2{color:var(--ms-cream);text-transform:uppercase;letter-spacing:.02em;}
.ms-news__inner .ms-lead{margin-inline:auto;color:rgba(245,242,234,.72);}
.ms-news__form{
  display:flex;gap:10px;flex-wrap:wrap;
  max-width:520px;margin:28px auto 0;
}
.ms-news__form input[type='email']{
  flex:1 1 240px;min-width:0;
  background:transparent;border-color:rgba(245,242,234,.32);color:var(--ms-cream);
}
.ms-news__form input[type='email']::placeholder{color:rgba(245,242,234,.5);}
.ms-news__form input[type='email']:focus{border-color:var(--ms-gold);}
.ms-news__form .ms-btn{background:var(--ms-gold);color:var(--ms-ink);border-color:var(--ms-gold);}
.ms-news__form .ms-btn:hover{background:var(--ms-cream);border-color:var(--ms-cream);}
@media (max-width:560px){
  /* Once the field and button no longer sit on one line, the button spans the row. */
  .ms-news__form .ms-btn{flex:1 1 100%;}
}
.ms-news__ok,.ms-news__err{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  margin:24px auto 0;font-size:var(--ms-fs-sm);
}
.ms-news__ok{color:var(--ms-gold);}
.ms-news__err{color:var(--ms-sale-light);}

/* ------------------------------------------------------------------
   Google reviews
   A small score card on the left, the reviews on the right. The rating
   breakdown and the duplicate footer link row were dropped on the client's
   instruction (2026-09-16) — see parts/sections/google-reviews.php for why.
   ------------------------------------------------------------------ */

.ms-grev__layout{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2.2vw,24px);
  align-items:start;
}
@media (min-width:860px){
  .ms-grev__layout{grid-template-columns:minmax(0,236px) minmax(0,1fr);}
}

/* The score card. Deliberately small: a credential, not a feature. */
.ms-grev__score{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:7px;
  background:var(--ms-surface);
  border:1px solid var(--ms-border);
  padding:22px 20px 20px;
}
.ms-grev__mark{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--ms-fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ms-muted);
}
.ms-grev__markText{line-height:1;padding-top:1px;}

/* Body face, not Playfair. The display face sets figures old-style, so the
   zero in "5.0" drops below the cap height and reads as a lowercase letter. */
.ms-grev__number{
  margin:2px 0 0;
  font-family:var(--ms-font-body);
  font-size:2.125rem;
  font-weight:600;
  line-height:1;
  letter-spacing:-.005em;
  color:var(--ms-ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.ms-grev__count{margin:0;font-size:var(--ms-fs-xs);color:var(--ms-muted);}

/* Five stars with the gold layer clipped to the score, so 4.7 reads as 4.7
   rather than rounding up to a fifth star the store has not earned. */
.ms-grev__stars{position:relative;display:inline-block;line-height:0;}
.ms-grev__starsBase,
.ms-grev__starsFill{display:flex;gap:3px;}
.ms-grev__starsBase{color:var(--ms-border);}
.ms-grev__starsFill{
  position:absolute;inset-block-start:0;inset-inline-start:0;
  overflow:hidden;color:var(--ms-gold);
}
.ms-grev__starsBase svg,
.ms-grev__starsFill svg{fill:currentColor;flex:0 0 auto;}

.ms-grev__cta{
  display:flex;flex-direction:column;align-items:center;
  gap:11px;width:100%;
  margin-top:12px;padding-top:14px;
  border-top:1px solid var(--ms-border);
}
.ms-grev__write{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:100%;
  /* The card is 236px wide, so the button default of 28px side padding
     pushed "Write a review" onto two lines. */
  padding-inline:14px;
  white-space:nowrap;
}
.ms-grev__all{display:inline-flex;align-items:center;gap:6px;font-size:var(--ms-fs-xs);}

/* The reviews. Column count comes from the template, capped at three. */
.ms-grev__row{
  list-style:none;margin:0;padding:0;
  display:grid;gap:12px;
  grid-template-columns:1fr;
  align-items:stretch;
}
.ms-grev__row > li{display:flex;}
@media (min-width:560px) and (max-width:859px){
  .ms-grev__row--c2,
  .ms-grev__row--c3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:860px){
  .ms-grev__row--c2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ms-grev__row--c3{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:559px){
  .ms-grev__row{
    grid-auto-flow:column;
    grid-auto-columns:84%;
    grid-template-columns:none;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    margin-inline:calc(var(--ms-gutter) * -1);
    padding-inline:var(--ms-gutter);
    padding-block-end:4px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .ms-grev__row::-webkit-scrollbar{display:none;}
  .ms-grev__row > li{scroll-snap-align:start;}
}

.ms-grev__card{
  position:relative;margin:0;width:100%;
  display:flex;flex-direction:column;gap:11px;
  background:var(--ms-surface);
  border:1px solid var(--ms-border);
  padding:17px 16px;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.ms-grev__card:hover{
  border-color:var(--ms-gold-line);
  box-shadow:0 10px 26px rgba(13,13,13,.06);
  transform:translateY(-2px);
}
.ms-grev__cardTop{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ms-grev__cardG{display:inline-flex;line-height:0;opacity:.9;}
.ms-grev__quote{margin:0;flex:1 1 auto;}
.ms-grev__quote p{margin:0;font-size:var(--ms-fs-xs);line-height:1.66;color:var(--ms-ink-80);}
.ms-grev__by{display:flex;align-items:center;gap:9px;min-width:0;}
.ms-grev__avatar{
  flex:0 0 auto;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:var(--ms-gold-soft);
  color:var(--ms-gold-ink);
  font-size:var(--ms-fs-xs);font-weight:600;
}
.ms-grev__avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.ms-grev__who{display:flex;flex-direction:column;gap:1px;min-width:0;}
.ms-grev__name{
  font-size:var(--ms-fs-xs);font-weight:500;color:var(--ms-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ms-grev__meta{font-size:var(--ms-fs-micro);color:var(--ms-muted);}

/* A real anchor stretched over the card, so it still opens from the keyboard
   and still offers the browser's own "open in new tab". */
.ms-grev__cardLink{position:absolute;inset:0;z-index:1;}
.ms-grev__cardLink:focus-visible{outline:2px solid var(--ms-focus);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  .ms-grev__card{transition:none;}
  .ms-grev__card:hover{transform:none;}
}