/* ==========================================================================
   MAHIRA SELECT - base.css
   Tokens, reset, typography, controls, header, footer, product card.
   Loaded on every page. Everything else is conditional.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Faces (self hosted, no external request)
   -------------------------------------------------------------------------- */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/playfairdisplay-normal-400-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/playfairdisplay-normal-400-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 600;font-display:swap;src:url('../fonts/playfairdisplay-italic-400-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/poppins-normal-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-normal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-normal-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-normal-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-normal-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* ------------------------------------------------------------------
     Colour. The six values below are the supplied Mahira Select colour
     system, used verbatim:
       #0D0D0D ink        #1C1C1C deep charcoal   #CBA361 antique gold
       #F5F2EA warm ivory #EDE6D6 soft sand       #88663D earth gold
     Everything else is a derived tone, declared here so no stylesheet
     ever writes a raw hex value.
     ------------------------------------------------------------------ */
  --ms-ink:#0D0D0D;
  --ms-ink-80:rgba(13,13,13,.80);
  --ms-ink-55:rgba(13,13,13,.55);
  --ms-ink-12:rgba(13,13,13,.12);
  --ms-charcoal:#1C1C1C;
  --ms-cream:#F5F2EA;
  --ms-surface:#FFFFFF;
  --ms-sand:#EDE6D6;
  --ms-champagne:#EFE9DC;
  --ms-beige:#DDD3BE;
  --ms-umber:#1C1C1C;
  --ms-border:#E2DACA;
  --ms-muted:#6B6257;
  --ms-gold:#CBA361;
  --ms-earth:#88663D;

  /* Gold splits by job. #CBA361 is too light for text on ivory at 2.1:1,
     so anything that has to be read uses the earth gold at 4.7:1, and the
     antique gold is reserved for dark grounds, fills and decoration. */
  --ms-gold-ink:#88663D;
  --ms-gold-light:#CBA361;
  --ms-gold-soft:rgba(203,163,97,.18);
  --ms-gold-line:rgba(203,163,97,.42);

  --ms-sale:#BE2817;
  --ms-sale-light:#E9938A;
  --ms-focus:#88663D;

  /* Footer ground. A warm espresso mixed towards the earth gold rather than
     the flat ink used everywhere else, so the footer separates from the
     newsletter band directly above it instead of merging into one black
     slab. Cream reads at about 17:1 on it and the antique gold at about
     7.7:1, so both links and body copy clear AA comfortably. */
  --ms-espresso:#1A130C;
  --ms-espresso-lift:#221A11;

  /* WhatsApp's own brand green, used only for the WhatsApp float so the
     control is recognisable. Not part of the Mahira palette. */
  --ms-wa-green:#25D366;
  --ms-wa-green-dark:#1DA851;

  /* Derived tones */
  --ms-ink-hover:#262626;
  --ms-ink-lift:#171717;
  --ms-umber-lift:#262626;
  --ms-umber-deep:#141414;
  --ms-sand-deep:#E3D9C4;
  --ms-beige-deep:#CFC3AA;
  --ms-white:#FFFFFF;

  /* Type */
  --ms-font-heading:'Playfair Display',Georgia,'Times New Roman',serif;
  --ms-font-body:'Poppins','Helvetica Neue',Arial,sans-serif;

  /* Sized against the real headline. Set in uppercase Playfair, "Timeless
     fashion." measures about 9.7 times the font size, so the ceiling is held to
     72px against a 720px hero measure. Each line must hold on one line from
     360px up: the hero headline never runs to three. */
  --ms-fs-hero:clamp(1.875rem,1rem + 3.9vw,4.5rem);
  --ms-fs-h1:clamp(2.125rem,1.5rem + 2.7vw,3.25rem);
  --ms-fs-h2:clamp(1.875rem,1.4rem + 2vw,2.875rem);
  --ms-fs-h3:clamp(1.375rem,1.15rem + .95vw,1.875rem);
  --ms-fs-lead:clamp(1.0625rem,1rem + .3vw,1.3125rem);
  --ms-fs-body:clamp(.9375rem,.91rem + .12vw,1rem);
  --ms-fs-sm:.875rem;
  --ms-fs-xs:.8125rem;
  /* Tried at 1rem on 2026-09-13 and put back the same day. Two reasons, kept
     here so it is not attempted a third time: at 1rem the smallest step is
     level with body copy and above both --ms-fs-sm and --ms-fs-xs, so the
     scale stops descending and a label ends up larger than the text it
     labels; and the top bar, which reads this token, no longer fits on one
     line between roughly 1024 and 1200px, nor at 768px, standing 54px instead
     of 38px. Around a hundred rules across eleven stylesheets read it. If the
     micro sizes ever need lifting for legibility, .75rem to .8125rem does it
     without either problem. */
  --ms-fs-micro:.6875rem;

  --ms-lh-display:1.04;
  --ms-lh-head:1.12;
  --ms-lh-body:1.7;
  --ms-track-micro:.18em;
  --ms-track-nav:.06em;
  --ms-track-btn:.14em;

  /* Space */
  --ms-space-xs:8px;
  --ms-space-sm:16px;
  --ms-space-md:28px;
  --ms-space-lg:56px;
  --ms-space-xl:96px;
  --ms-space-2xl:140px;
  --ms-section:clamp(64px,8vw,124px);

  /* Frame */
  --ms-container:1600px;
  /* The product page keeps a tighter measure. At the full 1600 the gallery cell
     is around 1000px, and a 4:5 image at that width stands 1250px tall, so the
     product would not fit the fold on any normal screen. */
  --ms-pdp-max:1400px;
  --ms-gutter:24px;
  --ms-radius:0px;
  --ms-radius-btn:2px;
  /* Purchase controls — the quantity steppers, add to bag, buy now, proceed
     to checkout — share one radius so each group reads as a set. Softer than
     the site's button radius, and deliberately short of a full pill: the
     product page stepper used to be a 999px capsule beside a square button.
     Used on the product page and the cart; keep the two in step. */
  --ms-radius-buy:10px;
  /* Editorial tiles only: the occasion bento and the department cards. Small
     enough to soften a corner without turning a fashion tile into a widget. */
  --ms-radius-card:10px;
  /* Product photography. Set a step above the editorial tiles: a card is a
     smaller object seen four to a row, and at 10px the corner read as square
     next to the rounded controls sitting on top of it. */
  --ms-radius-media:16px;
  --ms-hairline:1px solid var(--ms-border);

  /* Motion */
  --ms-ease:cubic-bezier(.22,.61,.36,1);
  --ms-t-fast:180ms;
  --ms-t:280ms;
  --ms-t-slow:420ms;

  /* Chrome */
  --ms-topbar-h:38px;
  /* The header carries the primary lockup: stacked, no tagline, and on a
     canvas cropped tight to the drawing. Because none of the box is dead
     margin any more, the bar can sit at close to its original height and the
     mark still reads larger than the wide lockup it replaced. */
  --ms-header-h:112px;
  --ms-header-h-compact:80px;
  --ms-shadow-float:0 24px 60px rgba(21,18,14,.14);
}

@media (min-width:1024px){
  :root{ --ms-gutter:40px; }
}

/* --------------------------------------------------------------------------
   3. Reset. Wrapped in :where() so component classes always win.
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

:where(html){-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
:where(body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,fieldset){margin:0;padding:0;}
:where(ul[class],ol[class]){list-style:none;}
:where(img,picture,svg,video){display:block;max-width:100%;}
:where(img){height:auto;}
:where(button,input,select,textarea){font:inherit;color:inherit;}
:where(a){color:inherit;text-decoration:none;}
:where(fieldset){border:0;}
:where(table){border-collapse:collapse;width:100%;}

html{ scrollbar-gutter:stable; }

body{
  margin:0;
  background:var(--ms-cream);
  color:var(--ms-ink);
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-body);
  line-height:var(--ms-lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.ms-no-scroll{overflow:hidden;}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,.ms-display{
  font-family:var(--ms-font-heading);
  font-weight:500;
  line-height:var(--ms-lh-head);
  letter-spacing:-.005em;
  color:var(--ms-ink);
}
h1,.ms-h1{font-size:var(--ms-fs-h1);line-height:var(--ms-lh-display);}
h2,.ms-h2{font-size:var(--ms-fs-h2);}
h3,.ms-h3{font-size:var(--ms-fs-h3);}
h4{font-size:1.125rem;}

p{max-width:68ch;}
p + p{margin-top:1em;}

.ms-lead{
  font-size:var(--ms-fs-lead);
  line-height:1.55;
  color:var(--ms-muted);
  font-weight:300;
  max-width:56ch;
}

/* Small wide-tracked label. Rationed: at most one per three sections. */
.ms-eyebrow{
  display:block;
  /* 1rem literal, not --ms-fs-micro. Lifting the token was tried and reverted
     on 2026-09-13 for the two reasons noted beside it; neither applies here.
     The eyebrow always sits alone above a display heading, never beside the
     small text it would otherwise outrank, and the top bar reads the token
     rather than this class. Asked for on 2026-09-14: at 11px the section
     labels were too faint to register as headings at all. */
  font-size:1rem;
  font-weight:500;
  letter-spacing:var(--ms-track-micro);
  text-transform:uppercase;
  color:var(--ms-gold-ink);
  margin-bottom:var(--ms-space-sm);
}
.ms-eyebrow--onDark{color:var(--ms-gold-light);}

/* The one decorative flourish, borrowed from the rule under SELECT in the logo. */
.ms-rule{
  width:40px;height:1px;border:0;
  background:var(--ms-gold);
  margin:0 0 var(--ms-space-md);
}
.ms-rule--center{margin-left:auto;margin-right:auto;}
.ms-rule--onDark{background:var(--ms-gold-light);}

a{color:inherit;}
.ms-link{
  color:var(--ms-ink);
  text-decoration:underline;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
  text-decoration-color:var(--ms-border);
  transition:text-decoration-color var(--ms-t) var(--ms-ease);
}
.ms-link:hover{text-decoration-color:var(--ms-gold);}

.ms-muted{color:var(--ms-muted);}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.ms-container{
  width:100%;
  max-width:var(--ms-container);
  margin-inline:auto;
  padding-inline:var(--ms-gutter);
}
.ms-container--wide{max-width:1760px;}
.ms-container--narrow{max-width:820px;}

.ms-section{padding-block:var(--ms-section);}
.ms-section--tight{padding-block:clamp(44px,5vw,72px);}
.ms-section--sand{background:var(--ms-sand);}
.ms-section--champagne{background:var(--ms-champagne);}
.ms-section--surface{background:var(--ms-surface);}
.ms-section--dark{background:var(--ms-umber);color:var(--ms-cream);}
.ms-section--dark h1,.ms-section--dark h2,.ms-section--dark h3{color:var(--ms-cream);}
.ms-section--dark .ms-lead{color:rgba(251,249,245,.72);}
.ms-section--ink{background:var(--ms-ink);color:var(--ms-cream);}
.ms-section--ink h1,.ms-section--ink h2,.ms-section--ink h3{color:var(--ms-cream);}
.ms-section--ink .ms-lead{color:rgba(251,249,245,.70);}

.ms-section__head{margin-bottom:clamp(32px,4vw,56px);}
.ms-section__head--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--ms-space-md);flex-wrap:wrap;
}
.ms-section__head p{margin-top:12px;}

.ms-stack > * + *{margin-top:var(--ms-space-sm);}

/*
 * .screen-reader-text is WooCommerce's own visually hidden class. The theme
 * drops WooCommerce's stylesheets, so without a rule here its price markup
 * prints "Original price was: ..." and "Current price is: ..." on the page
 * next to every sale price.
 */
.ms-sr-only,
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Skip links and anything else that reveals itself on keyboard focus. */
.screen-reader-text:focus{
  position:static!important;width:auto;height:auto;margin:0;
  overflow:visible;clip:auto;clip-path:none;white-space:normal;
}

/* --------------------------------------------------------------------------
   6. Controls
   -------------------------------------------------------------------------- */
.ms-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 28px;
  font-family:var(--ms-font-body);
  font-size:.75rem;font-weight:500;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--ms-radius-btn);
  background:var(--ms-ink);color:var(--ms-cream);
  cursor:pointer;text-align:center;
  transition:background var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease),transform var(--ms-t-fast) var(--ms-ease);
}
.ms-btn:hover{background:var(--ms-ink-hover);}
.ms-btn:active{transform:translateY(1px);}

.ms-btn--secondary{background:transparent;color:var(--ms-ink);border-color:var(--ms-ink);}
.ms-btn--secondary:hover{background:var(--ms-ink);color:var(--ms-cream);}

.ms-btn--ghost{background:transparent;color:var(--ms-ink);border-color:var(--ms-border);}
.ms-btn--ghost:hover{border-color:var(--ms-ink);background:transparent;}

.ms-btn--onDark{background:var(--ms-cream);color:var(--ms-ink);}
.ms-btn--onDark:hover{background:var(--ms-white);}

.ms-btn--outlineDark{background:transparent;color:var(--ms-cream);border-color:rgba(251,249,245,.45);}
.ms-btn--outlineDark:hover{border-color:var(--ms-gold-light);color:var(--ms-gold-light);background:transparent;}

/* The design board's secondary button: filled antique gold with ink text,
   which reaches 8.3:1 and works on both the ivory and the dark grounds. */
.ms-btn--gold{background:var(--ms-gold);color:var(--ms-ink);border-color:var(--ms-gold);}
.ms-btn--gold:hover{background:var(--ms-earth);color:var(--ms-white);border-color:var(--ms-earth);}

.ms-btn--outlineGold{background:transparent;color:var(--ms-gold);border-color:var(--ms-gold);}
.ms-btn--outlineGold:hover{background:var(--ms-gold);color:var(--ms-ink);}

.ms-btn--block{display:flex;width:100%;}
.ms-btn--sm{min-height:40px;padding:0 18px;font-size:.6875rem;}
.ms-btn[disabled],.ms-btn[aria-disabled='true']{opacity:.45;pointer-events:none;}

/* Quiet text action with an arrow */
.ms-textlink{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--ms-fs-xs);font-weight:500;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid var(--ms-ink-12);
  transition:border-color var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease);
}
.ms-textlink svg{width:15px;height:15px;transition:transform var(--ms-t) var(--ms-ease);}
.ms-textlink:hover{border-color:var(--ms-gold);color:var(--ms-gold-ink);}
.ms-textlink:hover svg{transform:translateX(4px);}
.ms-textlink--onDark{color:var(--ms-cream);border-color:rgba(251,249,245,.28);}
.ms-textlink--onDark:hover{color:var(--ms-gold-light);border-color:var(--ms-gold-light);}

/* Forms */
.ms-field{display:block;margin-bottom:var(--ms-space-sm);}
.ms-label{
  display:block;font-size:var(--ms-fs-micro);font-weight:500;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-muted);margin-bottom:8px;
}
.ms-input,.ms-select,.ms-textarea,
input[type='text'],input[type='email'],input[type='tel'],input[type='password'],
input[type='search'],input[type='number'],input[type='url'],textarea,select{
  width:100%;min-height:48px;padding:12px 14px;
  font-family:var(--ms-font-body);font-size:var(--ms-fs-sm);
  color:var(--ms-ink);background:var(--ms-surface);
  border:1px solid var(--ms-border);border-radius:var(--ms-radius);
  transition:border-color var(--ms-t) var(--ms-ease);
}
textarea{min-height:140px;line-height:1.6;resize:vertical;}
select{
  appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230D0D0D' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ms-gold);}
::placeholder{color:var(--ms-muted);opacity:1;}

/* Visible focus for keyboard users only. */
:focus-visible{
  outline:2px solid var(--ms-focus);
  outline-offset:3px;
  border-radius:1px;
}
.ms-section--dark :focus-visible,.ms-section--ink :focus-visible,
.ms-footer :focus-visible,.ms-hero :focus-visible{outline-color:var(--ms-gold-light);}

.ms-skip{
  position:absolute;left:var(--ms-gutter);top:-100px;z-index:2000;
  background:var(--ms-ink);color:var(--ms-cream);
  padding:12px 20px;font-size:var(--ms-fs-xs);
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  transition:top var(--ms-t-fast) var(--ms-ease);
}
.ms-skip:focus{top:12px;}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.ms-topbar{
  background:var(--ms-ink);color:rgba(251,249,245,.86);
  font-size:var(--ms-fs-micro);letter-spacing:.08em;text-transform:uppercase;
}
.ms-topbar__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ms-space-sm);
  min-height:var(--ms-topbar-h);
}
.ms-topbar__note{margin:0;max-width:none;}
.ms-topbar__links{display:flex;align-items:center;gap:0;}
.ms-topbar a{transition:color var(--ms-t) var(--ms-ease);}
.ms-topbar a:hover{color:var(--ms-gold);}
.ms-topbar__wa,
.ms-topbar__sep{display:inline-flex;align-items:center;gap:7px;padding:0 16px;}
.ms-topbar__sep{border-left:1px solid rgba(245,242,234,.18);}
.ms-topbar__links > :last-child{padding-right:0;}
.ms-topbar__num{margin-left:5px;color:var(--ms-gold);}
@media (max-width:1023px){
  .ms-topbar__links .ms-topbar__sep{display:none;}
  .ms-topbar__wa{padding:0;}
}
@media (max-width:700px){
  .ms-topbar__note{display:none;}
  .ms-topbar__inner{justify-content:center;}
  .ms-topbar__num{display:none;}
}

.ms-header{
  position:sticky;top:0;z-index:900;
  background:var(--ms-cream);
  border-bottom:var(--ms-hairline);
  transition:box-shadow var(--ms-t) var(--ms-ease);
}
/* Flex rather than grid: the burger, nav, brand and actions reorder cleanly
   between mobile and desktop without ever wrapping to a second row. */
.ms-header__inner{
  display:flex;align-items:center;
  gap:10px;
  min-height:var(--ms-header-h);
  transition:min-height var(--ms-t) var(--ms-ease);
}
.ms-header.is-compact .ms-header__inner{min-height:var(--ms-header-h-compact);}
.ms-header.is-compact{box-shadow:0 1px 0 var(--ms-border);}

/* Mobile order: burger, centred brand, actions. */
.ms-burger{order:1;flex:0 0 auto;}
.ms-brand{order:2;flex:1 1 auto;display:flex;justify-content:center;min-width:0;}
.ms-nav{order:3;display:none;}
.ms-header__actions{order:4;flex:0 0 auto;display:flex;align-items:center;gap:2px;}

/*
 * Below the desktop breakpoint the two sides of the header are not the same
 * width — one burger on the left, search and bag on the right — so a brand
 * centred by flex lands half that difference left of true centre: 23px of a
 * 375px screen, which is plainly visible against a symmetrical mark. Taking it
 * out of flow centres it on the header itself, which is what the mark being the
 * axis of the layout actually means. The sides then need nothing but a margin
 * to push the actions back out to the edge.
 *
 * The gutter comes in at the same time. Each icon carries 11px of its own
 * padding inside a 44px tap target, so at the site's 24px gutter the glyphs sit
 * 35px from the edge and read as a deep indent against content that starts at
 * 24px. Pulling the header in by exactly that 11px lands the glyph itself on
 * the gutter, so the burger and the bag line up with the page below them at
 * every width — 24px on a phone, 40px from 1024px up — and the tap targets stay
 * the full 44px either way.
 */
@media (max-width:1179px){
  .ms-header .ms-container{padding-inline:calc(var(--ms-gutter) - 11px);}
  .ms-header__inner{position:relative;}
  /* Scoped to the site header on purpose: the checkout header renders the same
     .ms-brand lockup inside its own grid, and taking that one out of flow too
     would collapse the column it is placed in. */
  .ms-header .ms-brand{
    position:absolute;left:50%;top:0;bottom:0;
    transform:translateX(-50%);
    align-items:center;
  }
  .ms-header__actions{margin-left:auto;}
}

.ms-brand img{
  width:auto;height:70px;
  transition:height var(--ms-t) var(--ms-ease);
}
.ms-header.is-compact .ms-brand img{height:56px;}
/*
 * A phone header is mostly chrome already, so the mark comes down with it —
 * but only as far as the header actually needs. The lockup is a monogram over
 * MAHIRA over a rule over SELECT, four bands deep, so the height divided four
 * ways is what decides whether the wordmark is legible at arm's length; at
 * 50px compact the two words were reading as texture rather than type. The
 * mark now runs almost to the header's edges, 7px of clearance standing and
 * 6px compact, which buys about a third more mark for 4-6px of header.
 *
 * Scoped to .ms-header for the same reason the absolute centring above is: the
 * checkout header prints the same .ms-brand lockup, and .ms-brand img already
 * outranks that header's own .ms-co-head__logo sizing, so an unscoped bump
 * here would silently grow the checkout mark too.
 */
@media (max-width:700px){
  :root{ --ms-header-h:92px; --ms-header-h-compact:76px; }
  .ms-header .ms-brand img{height:78px;}
  .ms-header.is-compact .ms-brand img{height:64px;}
}
@media (min-width:1180px){
  .ms-brand img{height:80px;}
  .ms-header.is-compact .ms-brand img{height:60px;}
}
.ms-iconbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--ms-ink);
  border-radius:50%;
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-iconbtn:hover{color:var(--ms-gold-ink);}
.ms-iconbtn svg{width:20px;height:20px;}
.ms-iconbtn__count{
  position:absolute;top:5px;right:3px;
  min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ms-gold);color:var(--ms-white);
  font-size:10px;font-weight:500;line-height:1;
  border-radius:9px;
  font-variant-numeric:tabular-nums;
}
.ms-iconbtn__count[hidden]{display:none;}
/*
 * The page came out of a cache and the number baked into it belongs to whoever
 * loaded it first, so it is held back until app.js has a figure it can stand
 * behind. Written by the guard script in inc/woocommerce.php before the first
 * paint and cleared by app.js a moment later; see both for why this cannot be
 * left to the cart sync alone.
 */
html[data-ms-cart] .ms-iconbtn__count{display:none;}

/* Desktop navigation */
.ms-nav__list{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.1vw,36px);}
.ms-nav__link{
  display:flex;align-items:center;gap:6px;
  /* Sentence case at 15px, on the client's instruction (2026-09-10). Three
     changes that only work together: uppercase tracking is far too loose once
     the labels are set in sentence case, so it comes down to a hair; sentence
     case is also about a tenth narrower than caps, and that reclaimed width
     is what pays for both the larger size and the wider gap between items.
     The crowded breakpoint below steps the size back down but keeps the case. */
  font-size:.9375rem;font-weight:500;
  letter-spacing:.012em;text-transform:none;
  padding:10px 0;position:relative;white-space:nowrap;
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-nav__link::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--ms-gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--ms-t) var(--ms-ease);
}
.ms-nav__item:hover > .ms-nav__link::after,
.ms-nav__item.is-current > .ms-nav__link::after{transform:scaleX(1);}
/*
 * The caret. At 9px inside a 24 unit viewBox the shared 1.35 stroke resolves
 * to half a pixel and then loses half of that again to opacity, so the arrow
 * was effectively invisible. It is drawn larger, at a weight chosen to land on
 * a whole pixel at this size, and it turns over when its panel opens so the
 * control reads as a disclosure rather than decoration.
 */
.ms-nav__link svg{
  width:11px;height:11px;flex:0 0 auto;
  stroke-width:2.4;opacity:.72;
  transform:translateY(1px);
  transition:transform var(--ms-t) var(--ms-ease),opacity var(--ms-t) var(--ms-ease);
}
.ms-nav__item:hover > .ms-nav__link svg,
.ms-nav__item.is-current > .ms-nav__link svg{opacity:1;}
.ms-nav__item.is-open > .ms-nav__link svg{opacity:1;transform:translateY(1px) rotate(180deg);}
.ms-nav__link--sale{color:var(--ms-sale);font-weight:600;}
.ms-nav__item:hover > .ms-nav__link--sale::after,
.ms-nav__item.is-current > .ms-nav__link--sale::after{background:var(--ms-sale);}

/* One breakpoint, no gap between the two states. Below it the burger drives
   navigation; at or above it the full menu does. */
.ms-header__actions .ms-iconbtn--wishlist,
.ms-header__actions .ms-iconbtn--account{display:none;}

@media (min-width:1180px){
  .ms-burger{display:none;}
  .ms-brand{order:1;flex:0 0 auto;justify-content:flex-start;}
  .ms-nav{order:2;display:block;flex:1 1 auto;min-width:0;}
  .ms-header__actions{order:3;gap:4px;}
  .ms-header__actions .ms-iconbtn--wishlist,
  .ms-header__actions .ms-iconbtn--account{display:inline-flex;}
}

/* Nine primary items is a lot of menu. Between the breakpoint and 1440px the
   labels give up tracking and the logo gives up height rather than wrapping. */
@media (min-width:1180px) and (max-width:1439px){
  .ms-nav__list{gap:clamp(10px,1.15vw,20px);}
  .ms-nav__link{font-size:.875rem;letter-spacing:.008em;}
  .ms-brand img{height:72px;}
  .ms-header.is-compact .ms-brand img{height:56px;}
  .ms-header__actions{gap:0;}
  .ms-iconbtn{width:38px;}
}

/* --------------------------------------------------------------------------
   Mega menu

   A rail of the department's groups, a pane showing only the group under the
   pointer, and a picture that links to the department. The panel used to print
   every group, category and leaf at once, which for Women ran past 2300px and
   needed its own scrollbar; its height is now set by the tallest single group.
   -------------------------------------------------------------------------- */
.ms-mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--ms-cream);
  border-top:1px solid var(--ms-gold-line);
  border-bottom:var(--ms-hairline);
  box-shadow:0 26px 44px -26px rgba(13,13,13,.30);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 200ms var(--ms-ease),transform 200ms var(--ms-ease),visibility 0s linear 200ms;
  z-index:899;
  /* A ceiling is still cheap insurance: Jewellery carries eight groups and a
     short viewport can still run out of room. */
  max-height:calc(100vh - var(--ms-header-h) - var(--ms-topbar-h));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.ms-header.is-compact .ms-mega{
  max-height:calc(100vh - var(--ms-header-h-compact));
}
.ms-nav__item.is-open .ms-mega,
.ms-mega:hover{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;}

/* Three zones divided by rules rather than by gaps, so the rail reads as a
   panel of its own instead of a floating list. */
.ms-mega__inner{
  display:grid;
  grid-template-columns:200px minmax(0,1fr) 248px;
  align-items:stretch;
}
.ms-mega__inner--flat{grid-template-columns:minmax(0,1fr) 248px;}

/* ---- Rail ---- */
.ms-mega__rail{
  padding:26px 22px 26px 0;
  border-right:1px solid var(--ms-border);
  display:flex;flex-direction:column;gap:1px;
}
.ms-mega__railhead{
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ms-muted);
  padding-left:14px;margin-bottom:12px;
}
.ms-mega__tab{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px 11px 14px;
  font-size:.875rem;font-weight:500;line-height:1.3;color:var(--ms-ink);
  border-left:2px solid transparent;
  transition:background var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease);
}
.ms-mega__tab svg{
  flex:0 0 auto;color:var(--ms-gold-ink);
  opacity:0;transform:translateX(-4px);
  transition:opacity var(--ms-t) var(--ms-ease),transform var(--ms-t) var(--ms-ease);
}
/* Hover and selected have to be told apart. The pointer is normally on the
   tab whose pane is showing, so the two coincide most of the time; they part
   company while the pointer crosses the rail, and an identical treatment made
   that moment read as two selected groups. Hover takes the lighter ground. */
.ms-mega__tab:hover{background:var(--ms-champagne);}
.ms-mega__tab.is-active{
  background:var(--ms-sand);
  border-left-color:var(--ms-gold);
  font-weight:600;
}
.ms-mega__tab.is-active svg,
.ms-mega__tab:hover svg{opacity:1;transform:translateX(0);}

/* ---- Panes ---- */
.ms-mega__panes{
  padding:22px clamp(22px,2.2vw,34px);
  /* A floor, so switching between a long group and a short one does not make
     the whole panel jump under the pointer. */
  min-height:clamp(250px,25vh,330px);
}
.ms-mega__inner--flat .ms-mega__panes{padding-left:0;}
.ms-mega__pane{display:none;}
.ms-mega__pane.is-active{display:block;}
.ms-mega__panehead{
  display:block;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ms-muted);margin-bottom:18px;
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-mega__panehead:hover{color:var(--ms-gold-ink);}

/*
 * Columns, not a grid: a group holds anywhere from one category to thirteen,
 * and a column flow fills whatever width the pane happens to have without any
 * group needing a span rule of its own.
 *
 * Three wide columns, not five narrow ones. The pane used to print each
 * category's leaves under it as well, so the column width was set by how much
 * six-point grey text it had to fit; at one line per category the constraint
 * is gone, and the room goes into legible type and space between the rows
 * instead. Thirteen categories - Kalamkari Sarees, the longest group in the
 * catalogue - lands at five rows.
 */
.ms-mega__grid{
  columns:210px 3;column-gap:clamp(18px,2vw,34px);
  list-style:none;margin:0 0 6px;padding:0;
}
.ms-mega__cell{break-inside:avoid;margin:0;}
.ms-mega__cat{
  display:block;
  font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--ms-ink);
  padding:7px 0;
  /* transform rather than padding, so the hover nudge does not reflow the
     column and shuffle everything below it. */
  transition:color var(--ms-t) var(--ms-ease),transform var(--ms-t) var(--ms-ease);
}
.ms-mega__cat:hover{color:var(--ms-gold-ink);transform:translateX(3px);}

.ms-mega__more{
  display:inline-flex;align-items:center;gap:7px;margin-top:2px;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ms-gold-ink);
  padding-bottom:5px;border-bottom:1px solid var(--ms-gold-line);
  transition:border-color var(--ms-t) var(--ms-ease);
}
.ms-mega__more:hover{border-bottom-color:var(--ms-gold-ink);}
.ms-mega__more svg{transition:transform var(--ms-t) var(--ms-ease);}
.ms-mega__more:hover svg{transform:translateX(3px);}

/* ---- Feature ---- */
.ms-mega__feature{
  display:block;
  padding:26px 0 26px clamp(24px,2.2vw,34px);
  border-left:1px solid var(--ms-border);
}
.ms-mega__figure{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  background:var(--ms-sand);margin-bottom:15px;
}
.ms-mega__figure img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 20%;
  transition:transform 700ms var(--ms-ease);
}
.ms-mega__feature:hover .ms-mega__figure img{transform:scale(1.05);}
.ms-mega__caption{display:block;}
.ms-mega__captiontitle{
  display:block;
  font-family:var(--ms-font-heading);font-size:1.0625rem;font-weight:500;
  line-height:1.22;color:var(--ms-ink);margin-bottom:7px;
}
.ms-mega__captioncopy{
  display:block;font-size:.8125rem;line-height:1.55;color:var(--ms-muted);
  margin-bottom:11px;
}
.ms-mega__cta{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ms-gold-ink);
}
.ms-mega__cta svg{transition:transform var(--ms-t) var(--ms-ease);}
.ms-mega__feature:hover .ms-mega__cta svg{transform:translateX(3px);}

/* Between the menu breakpoint and 1400px the picture is the first thing to go:
   the links are what the panel is for. */
@media (max-width:1399px){
  .ms-mega__feature{display:none;}
  .ms-mega__inner{grid-template-columns:200px minmax(0,1fr);}
  .ms-mega__inner--flat{grid-template-columns:minmax(0,1fr);}
}

/* --------------------------------------------------------------------------
   8. Mobile navigation
   -------------------------------------------------------------------------- */
.ms-burger{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--ms-ink);
}
.ms-burger svg{width:22px;height:22px;}

/* Declared after the base rule so it actually wins the cascade. */
@media (min-width:1180px){
  .ms-burger{display:none;}
}

.ms-drawer{
  position:fixed;inset:0;z-index:1100;
  visibility:hidden;pointer-events:none;
}
.ms-drawer.is-open{visibility:visible;pointer-events:auto;}
.ms-drawer__scrim{
  position:absolute;inset:0;background:rgba(21,18,14,.42);
  opacity:0;transition:opacity var(--ms-t) var(--ms-ease);
  border:0;padding:0;width:100%;cursor:pointer;
}
.ms-drawer.is-open .ms-drawer__scrim{opacity:1;}
.ms-drawer__panel{
  position:absolute;top:0;bottom:0;
  width:min(420px,90vw);
  background:var(--ms-surface);
  box-shadow:var(--ms-shadow-float);
  display:flex;flex-direction:column;
  transition:transform var(--ms-t-slow) var(--ms-ease);
}
.ms-drawer--left .ms-drawer__panel{left:0;transform:translateX(-102%);}
.ms-drawer--right .ms-drawer__panel{right:0;transform:translateX(102%);}
.ms-drawer.is-open .ms-drawer__panel{transform:translateX(0);}

.ms-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--ms-space-sm);padding:22px 24px;border-bottom:var(--ms-hairline);
  flex:0 0 auto;
}
.ms-drawer__title{
  font-family:var(--ms-font-heading);font-size:1.25rem;font-weight:500;
  letter-spacing:.01em;text-transform:none;margin:0;
}
.ms-drawer__count{
  margin-left:8px;font-family:var(--ms-font-body);
  font-size:var(--ms-fs-xs);font-weight:400;color:var(--ms-muted);
}
.ms-drawer__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;min-height:0;}
.ms-drawer__foot{
  flex:0 0 auto;padding:22px 24px;
  border-top:var(--ms-hairline);background:var(--ms-cream);
  /* Lifts the summary off a list that scrolls under it. */
  box-shadow:0 -12px 24px -18px rgba(21,18,14,.5);
}

/*
 * The AJAX target sits between the panel and the body and foot it replaces, so
 * it has to carry the column layout through. Without this the foot is not a
 * flex child of the panel at all and the checkout buttons sit directly under
 * the last bag item instead of at the bottom of the drawer.
 */
.ms-cartdrawer{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
}

/* --------------------------------------------------------------------------
   Mobile navigation. A stack of panels, one level visible at a time.

   The accordion this replaces expanded in place, so opening Women then Ethnic
   Wear pushed roughly sixty rows into the middle of the list already on
   screen, three indents deep, in a catalogue 325 categories large. Here a tap
   replaces the screen instead of growing it: the list is never longer than one
   group, the drawer title says where you are and one back button goes up.
   -------------------------------------------------------------------------- */

/* Wider than the bag drawer. These rows carry a name, the line of
   subcategories under it and a chevron, and still leave a strip of the page
   showing to tap the menu shut. */
.ms-drawer--menu .ms-drawer__panel{width:min(440px,calc(100vw - 32px));}

.ms-mnav__head{gap:4px;padding:14px 12px 14px 18px;}
.ms-mnav__head .ms-drawer__title{
  flex:1 1 auto;min-width:0;font-size:1.125rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ms-mnav__back{
  flex:0 0 auto;width:38px;height:38px;margin-left:-10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--ms-ink);
}
/* display on the class would otherwise beat the browser's own [hidden] rule,
   and the top level would show a back button that has nowhere to go. */
.ms-mnav__back[hidden]{display:none;}
/* Both classes are on the same element, so this has to outrank the row
   chevron's own rotation rather than merely follow it. */
.ms-mnav__chev.ms-mnav__chev--back{transform:rotate(90deg);}

/* The stack itself. Panels are absolute inside it, so the drawer never scrolls
   as one column: every level keeps its own scroll position. */
.ms-mnav{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;}
.ms-mnav__panel{
  position:absolute;inset:0;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:20px;background:var(--ms-surface);
  transform:translateX(100%);visibility:hidden;
  /* The delay holds the outgoing panel on screen for its whole slide. */
  transition:transform var(--ms-t) var(--ms-ease),visibility 0s linear var(--ms-t);
}
.ms-mnav__panel:focus{outline:none;}
.ms-mnav__panel.is-active{
  transform:none;visibility:visible;
  transition:transform var(--ms-t) var(--ms-ease),visibility 0s;
}
/* The level behind travels a short way left rather than standing still, so
   going deeper reads as one menu moving, not a second menu opening. */
.ms-mnav__panel.is-behind{
  transform:translateX(-24%);visibility:visible;
  transition:transform var(--ms-t) var(--ms-ease),visibility 0s;
}

.ms-mnav__list{list-style:none;margin:0;padding:0;}
.ms-mnav__item + .ms-mnav__item{border-top:var(--ms-hairline);}

.ms-mnav__row{
  display:flex;align-items:center;gap:12px;
  min-height:56px;padding:12px 18px;color:var(--ms-ink);
}
.ms-mnav__text{flex:1 1 auto;min-width:0;}
.ms-mnav__name{
  display:block;font-size:.9375rem;font-weight:500;
  letter-spacing:.015em;line-height:1.35;
}
.ms-mnav__hint{
  display:block;margin-top:3px;
  font-size:var(--ms-fs-micro);font-weight:400;color:var(--ms-muted);
  letter-spacing:.01em;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ms-mnav__chev{flex:0 0 auto;color:var(--ms-muted);transform:rotate(-90deg);}
.ms-mnav__row:hover,.ms-mnav__row:focus-visible{background:var(--ms-cream);}
.ms-mnav__row:active{background:var(--ms-sand);}

/* Where the customer is standing, at whatever depth they opened the menu. */
.ms-mnav__row.is-current{box-shadow:inset 3px 0 0 var(--ms-gold-light);}
.ms-mnav__row.is-current .ms-mnav__name{color:var(--ms-gold-ink);}

.ms-mnav__row--dept .ms-mnav__name{font-size:1rem;}
.ms-mnav__row--sale .ms-mnav__name{color:var(--ms-sale);}

/* ---- Inside a department ----
   Groups are headings, not another screen to tap through. The heading is
   itself the link to the group archive, and the categories sit under it, so
   the whole department reads in one scroll and nothing in it is more than a
   tap away. */
.ms-mnav__section + .ms-mnav__section{border-top:var(--ms-hairline);}
.ms-mnav__grouphead{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:19px 18px 9px;
}
.ms-mnav__groupname{
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ms-muted);
}
.ms-mnav__grouphead.is-current .ms-mnav__groupname,
.ms-mnav__grouphead:hover .ms-mnav__groupname{color:var(--ms-gold-ink);}
/* The group's own archive, named rather than left to the heading alone: a
   heading that happens to be a link is not a link anyone taps. */
.ms-mnav__groupall{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-size:var(--ms-fs-micro);letter-spacing:.02em;color:var(--ms-gold-ink);
}
.ms-mnav__groupall svg{width:13px;height:13px;flex:0 0 auto;}
/* A category row is quieter than a department row and shorter, because a
   department panel holds up to forty of them and they read as a list. */
.ms-mnav__list--cats .ms-mnav__item + .ms-mnav__item{border-top:0;}
.ms-mnav__row--cat{min-height:44px;padding:8px 18px;}
.ms-mnav__row--cat .ms-mnav__name{font-size:var(--ms-fs-sm);font-weight:400;}

/* The head of a department panel: the way straight through to the whole of it,
   so the panel is never only a list of the parts. */
.ms-mnav__top{padding:14px 18px 15px;background:var(--ms-cream);border-bottom:var(--ms-hairline);}
.ms-mnav__all{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--ms-fs-sm);font-weight:500;letter-spacing:.02em;
  color:var(--ms-gold-ink);
}
.ms-mnav__all svg{flex:0 0 auto;}
.ms-mnav__all:hover{color:var(--ms-ink);}

/* Search hands over to the search overlay, which already owns the field, the
   suggestions and the keyboard. This is the way in, not a second field. */
.ms-mnav__search{padding:14px 18px 16px;}
.ms-mnav__searchbtn{
  width:100%;display:flex;align-items:center;gap:10px;
  min-height:44px;padding:0 14px;
  background:var(--ms-cream);border:var(--ms-hairline);border-radius:var(--ms-radius-btn);
  font-family:var(--ms-font-body);font-size:var(--ms-fs-sm);
  color:var(--ms-muted);text-align:left;cursor:pointer;
}
.ms-mnav__searchbtn svg{flex:0 0 auto;}
.ms-mnav__searchbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ms-mnav__searchbtn:hover{border-color:var(--ms-gold-line);color:var(--ms-ink);}

/* Help and account. Quieter than the catalogue, and iconed so the eye can skip
   to them rather than read the list. */
.ms-mnav__label{
  margin:0;padding:22px 18px 8px;border-top:var(--ms-hairline);
  font-size:var(--ms-fs-micro);letter-spacing:var(--ms-track-micro);
  text-transform:uppercase;color:var(--ms-muted);
}
.ms-mnav__list--quiet .ms-mnav__item + .ms-mnav__item{border-top:0;}
.ms-mnav__row--quiet{min-height:46px;padding:8px 18px;color:var(--ms-muted);}
.ms-mnav__row--quiet .ms-mnav__name{font-size:var(--ms-fs-sm);font-weight:400;}
.ms-mnav__row--quiet:hover .ms-mnav__name{color:var(--ms-ink);}
.ms-mnav__ico{flex:0 0 auto;color:var(--ms-gold-ink);}

/* The menu's foot is trimmed against the bag's. A drawer four levels deep
   needs its list space more than it needs the breathing room, and on a 667px
   phone the head and foot were taking better than a third of the screen. */
.ms-drawer--menu .ms-drawer__foot{padding:14px 18px 16px;}
/* .ms-mnav__avail is gone with the availability line the client dropped from
   the drawer on 2026-09-17. The foot is the WhatsApp button alone now, so its
   bottom padding is the button's own breathing room. */

@media (prefers-reduced-motion:reduce){
  .ms-mnav__panel{transition:visibility 0s;}
  .ms-mnav__panel.is-behind{transform:none;}
}

/* Sticky mobile commerce bar */
.ms-mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:880;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--ms-cream);border-top:var(--ms-hairline);
  padding-bottom:env(safe-area-inset-bottom);
}
.ms-mobilebar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:9px 4px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ms-muted);position:relative;
}
.ms-mobilebar a[aria-current='page']{color:var(--ms-ink);}
.ms-mobilebar svg{width:19px;height:19px;}
.ms-mobilebar .ms-iconbtn__count{top:2px;right:calc(50% - 20px);}
@media (min-width:861px){ .ms-mobilebar{display:none;} }
@media (max-width:860px){ body{padding-bottom:60px;} }

/* --------------------------------------------------------------------------
   9. Search overlay
   -------------------------------------------------------------------------- */
.ms-search{
  position:fixed;inset:0;z-index:1200;
  background:rgba(21,18,14,.42);
  opacity:0;visibility:hidden;
  transition:opacity var(--ms-t) var(--ms-ease),visibility 0s linear var(--ms-t);
}
.ms-search.is-open{opacity:1;visibility:visible;transition-delay:0s;}
.ms-search__panel{
  background:var(--ms-cream);
  transform:translateY(-14px);
  transition:transform var(--ms-t-slow) var(--ms-ease);
  max-height:88vh;overflow-y:auto;
  box-shadow:var(--ms-shadow-float);
}
.ms-search.is-open .ms-search__panel{transform:translateY(0);}
.ms-search__form{display:flex;align-items:center;gap:14px;padding-block:26px;border-bottom:var(--ms-hairline);}
.ms-search__form svg{width:22px;height:22px;flex:0 0 auto;color:var(--ms-muted);}
.ms-search__input{
  flex:1 1 auto;border:0;background:none;min-height:44px;padding:0;
  font-family:var(--ms-font-heading);
  font-size:clamp(1.375rem,1rem + 1.6vw,2.25rem);
  color:var(--ms-ink);
}
.ms-search__input:focus{outline:none;border:0;}
.ms-search__results{padding-block:26px 40px;}
.ms-search__suggests{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.ms-search__chip{
  border:1px solid var(--ms-border);border-radius:var(--ms-radius-btn);
  padding:8px 16px;font-size:var(--ms-fs-xs);
  transition:border-color var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease);
}
.ms-search__chip:hover{border-color:var(--ms-gold);color:var(--ms-gold-ink);}
.ms-search__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:clamp(16px,2vw,28px);
}

/* --------------------------------------------------------------------------
   10. Product card.
   Add to bag is a primary shopping action, so it is always visible and never
   revealed on hover. Hover only swaps the photography.
   -------------------------------------------------------------------------- */
.ms-card{display:flex;flex-direction:column;height:100%;}

.ms-card__frame{
  position:relative;
  /* 3:4, matching ms-product-card in inc/setup.php exactly, so the photograph
     meets the frame without a cover crop of its own. Widened from 4:5 on
     2026-09-19 — see the note on that image size for why. */
  aspect-ratio:3/4;overflow:hidden;
  background:var(--ms-sand);
  border-radius:var(--ms-radius-media);
  margin-bottom:14px;
}
.ms-card__media{position:absolute;inset:0;display:block;}
/* Two classes because a card is nearly always inside .woocommerce, whose
   `img{height:auto}` outranks a single class and would leave the photograph
   drawing at its own ratio inside the frame. It survives today only because
   the card thumbnail is itself cropped to the frame's ratio and the two
   happen to agree; the moment a picture arrives at any other shape it would
   overflow and be sliced at the bottom. Same trap, and the same fix, as the
   archive hero in shop.css. */
.ms-card__media .ms-card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity var(--ms-t-slow) var(--ms-ease),transform 700ms var(--ms-ease);
}
.ms-card__img--alt{opacity:0;}
.ms-card:hover .ms-card__img--main{opacity:0;}
.ms-card:hover .ms-card__img--alt{opacity:1;}
.ms-card:hover .ms-card__img{transform:scale(1.04);}

/* Badges. Every one is derived from real product data. */
.ms-card__flags{
  position:absolute;top:10px;left:10px;z-index:2;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  pointer-events:none;
}
.ms-badge{
  font-family:var(--ms-font-body);
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;line-height:1;border-radius:5px;white-space:nowrap;
}
.ms-badge--new{background:var(--ms-ink);color:var(--ms-white);}
.ms-badge--off{background:var(--ms-gold);color:var(--ms-ink);}
.ms-badge--sale{background:var(--ms-sale);color:var(--ms-white);}
.ms-badge--best{background:var(--ms-sand-deep);color:var(--ms-ink);}
.ms-badge--oos{background:var(--ms-charcoal);color:var(--ms-white);}

.ms-card__wish{
  position:absolute;top:10px;right:10px;z-index:3;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,242,234,.92);border:0;cursor:pointer;color:var(--ms-ink);
  transition:background var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease),transform var(--ms-t-fast) var(--ms-ease);
}
.ms-card__wish svg{width:16px;height:16px;}
.ms-card__wish:hover{background:var(--ms-white);color:var(--ms-gold-ink);}
.ms-card__wish.is-active{color:var(--ms-sale);}
.ms-card__wish.is-active svg{fill:currentColor;}
.ms-card__wish.is-pulse{transform:scale(1.18);}

.ms-card__body{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;}
.ms-card__cat{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ms-muted);
}
.ms-card__title{
  font-family:var(--ms-font-body);
  font-size:clamp(.9375rem,.9rem + .18vw,1.0625rem);
  font-weight:400;line-height:1.45;
  letter-spacing:0;color:var(--ms-ink);
}
.ms-card__title a:hover{color:var(--ms-gold-ink);}

.ms-card__rating{display:flex;align-items:center;gap:6px;}
.ms-stars{display:inline-flex;gap:1px;color:var(--ms-border);}
.ms-stars svg.is-on{color:var(--ms-gold);fill:currentColor;}
.ms-card__reviews{font-size:var(--ms-fs-xs);color:var(--ms-muted);font-variant-numeric:tabular-nums;}

/* The price is the second thing a customer looks for after the picture, so it
   is set larger than the name rather than smaller. */
.ms-card__price{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin-top:2px;
  font-size:clamp(1rem,.95rem + .28vw,1.1875rem);
  font-weight:600;color:var(--ms-ink);letter-spacing:.01em;
}
.ms-card__price del{
  color:var(--ms-muted);font-size:.8125em;font-weight:400;
  text-decoration-thickness:1px;
}
.ms-card__price ins{text-decoration:none;color:var(--ms-sale);font-weight:600;}
.ms-card__price .amount{font-variant-numeric:tabular-nums;}

/*
 * The call to action. Full width, high contrast, always present, and pushed to
 * the bottom of the card by the auto margin so that every button in a row
 * lines up regardless of how many lines each product name runs to.
 */
.ms-card__cta{margin-top:auto;padding-top:14px;}
.ms-card__cta .ms-btn{
  min-height:50px;font-size:.75rem;letter-spacing:.09em;
  gap:9px;border-radius:var(--ms-radius-btn);
}
.ms-card__cta .ms-btn svg{flex:0 0 auto;}
.ms-btn__bag{width:16px;height:16px;}
.ms-btn__tick{width:0;opacity:0;transition:width var(--ms-t) var(--ms-ease),opacity var(--ms-t) var(--ms-ease);}
.ms-btn.is-done{background:var(--ms-gold);color:var(--ms-ink);border-color:var(--ms-gold);}
.ms-btn.is-done .ms-btn__tick{width:15px;opacity:1;}
.ms-btn.is-busy{opacity:.7;pointer-events:none;}

/* No hover on touch, so the image swap is disabled rather than left half applied. */
@media (hover:none){
  .ms-card:hover .ms-card__img{transform:none;}
  .ms-card:hover .ms-card__img--main{opacity:1;}
  .ms-card:hover .ms-card__img--alt{opacity:0;}
}

/* Two cards across a 375px screen leaves roughly 160px per button, so the
   label gives up its tracking rather than clipping. */
@media (max-width:560px){
  .ms-card__cta{padding-top:12px;}
  .ms-card__cta .ms-btn{font-size:.6875rem;letter-spacing:.04em;padding:0 8px;min-height:46px;gap:7px;}
  .ms-card__frame{margin-bottom:11px;}
  .ms-card__cat{font-size:10px;}
  /*
   * Two points off the product name on a phone (client, 2026-09-18). The
   * clamp lands on 15.1px at 375px, which in a 172px card runs a name like
   * "Gold Alloy Women Necklace" to three lines and pushes the price and the
   * button down the card. 13px holds most names to two.
   *
   * Leading comes down with it rather than staying proportional: 1.45 was set
   * for a name at full size, and kept at 13px it leaves the two lines further
   * apart than they are tall, so the name stops reading as one phrase.
   */
  .ms-card__title{font-size:.8125rem;line-height:1.38;}
}

/* Product grid shared by home rails, archives and search */
.ms-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,34px) clamp(12px,1.6vw,26px);
}
@media (min-width:640px){ .ms-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:1024px){ .ms-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }

/*
 * A grid holding less than a full row. Left alone the cards sit in the leading
 * cells and the rest of the row stays empty, which reads as a section that
 * failed to load rather than a short one. These narrow the track count to what
 * is actually there and centre it, capped so two cards do not inflate to half
 * the page each. Declared after the media queries above so they win at every
 * width without needing extra weight.
 */
.ms-grid--short{justify-content:center;}
.ms-grid--of-1{grid-template-columns:minmax(0,340px);}
@media (min-width:640px){
  .ms-grid--of-2{grid-template-columns:repeat(2,minmax(0,340px));}
  .ms-grid--of-3{grid-template-columns:repeat(3,minmax(0,340px));}
}

/* --------------------------------------------------------------------------
   10b. Declared placeholder. Stands in for photography that has not been
   supplied. On palette, composed like the final image, honest about itself.
   -------------------------------------------------------------------------- */
.ms-ph{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.55),transparent 62%),
    var(--ms-sand);
  border:0;
}
.ms-ph--champagne{background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.6),transparent 62%),var(--ms-champagne);}
.ms-ph--beige{background:var(--ms-beige);}
.ms-ph--umber{background:radial-gradient(120% 90% at 50% 10%,rgba(208,169,63,.16),transparent 60%),var(--ms-umber);}
.ms-ph--ink{background:var(--ms-ink);}
.ms-ph__mark{
  width:clamp(48px,16%,104px);height:auto;opacity:.3;
}
.ms-ph--umber .ms-ph__mark,.ms-ph--ink .ms-ph__mark{opacity:.5;}
.ms-ph__label{
  font-size:var(--ms-fs-micro);letter-spacing:var(--ms-track-micro);
  text-transform:uppercase;color:var(--ms-muted);
}
.ms-ph--umber .ms-ph__label,.ms-ph--ink .ms-ph__label{color:var(--ms-gold-light);}

/* Placeholders sitting in a static box rather than an absolute one. */
.ms-ph--static{position:relative;aspect-ratio:4/5;}

/* --------------------------------------------------------------------------
   10c. Cart drawer lines
   -------------------------------------------------------------------------- */
.ms-cartlist{padding:4px 24px 24px;}
.ms-cartline{
  display:grid;grid-template-columns:78px 1fr 28px;gap:14px;
  padding:18px 0;border-bottom:var(--ms-hairline);align-items:start;
  transition:opacity var(--ms-t) var(--ms-ease);
}
.ms-cartline:last-child{border-bottom:0;}
.ms-cartline__media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ms-sand);
  border-radius:calc(var(--ms-radius-card) - 4px);
}
/* Top anchored. The thumbnail is ms-product-card, which is 3:4 from
   2026-09-19, and this box is 4:5 — so the picture is now taller than its
   frame and cover has to take the difference off one end. Off the bottom,
   for the same reason the crop itself is top anchored: the hem is what the
   shopper misses least, and a centred crop puts the model's head back on the
   cutting floor this rule was added to keep it off. */
.ms-cartline__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
}
.ms-cartline__body{min-width:0;}
.ms-cartline__title{font-family:var(--ms-font-body);font-size:var(--ms-fs-sm);font-weight:400;line-height:1.4;}
.ms-cartline__meta{font-size:var(--ms-fs-xs);color:var(--ms-muted);margin:5px 0 0;max-width:none;}
/* Stepper on the left, line total on the right, both on the same baseline. */
.ms-cartline__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:12px;
}
.ms-cartline__price{
  font-size:var(--ms-fs-sm);font-weight:600;color:var(--ms-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ms-cartline__remove{
  width:28px;height:28px;border:0;background:none;cursor:pointer;color:var(--ms-muted);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  transition:color var(--ms-t) var(--ms-ease),background var(--ms-t) var(--ms-ease);
}
.ms-cartline__remove:hover{color:var(--ms-sale);background:var(--ms-cream);}

/* ---- Quantity stepper ---- */
.ms-qty{
  display:inline-flex;align-items:center;
  border:1px solid var(--ms-border);
  border-radius:999px;
  background:var(--ms-surface);
  overflow:hidden;
}
.ms-qty__btn{
  width:32px;height:32px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;color:var(--ms-ink);
  transition:background var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease);
}
.ms-qty__btn:hover{background:var(--ms-cream);}
/* The minus becomes a delete at a quantity of one, so it warns like one. */
.ms-qty__btn[data-ms-qty-step='-1']:hover{color:var(--ms-sale);}
.ms-qty__value{
  min-width:26px;text-align:center;
  font-size:var(--ms-fs-sm);font-weight:500;
  font-variant-numeric:tabular-nums;
}
.ms-cartline.is-busy,
[data-ms-qty-line].is-busy{opacity:.5;pointer-events:none;}
/* 32px is fine for a cursor and too small for a thumb. */
@media (max-width:700px){
  .ms-qty__btn{width:38px;height:38px;}
  .ms-qty__value{min-width:30px;}
  .ms-cartline__remove{width:32px;height:32px;}
}

.ms-cartsum{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:var(--ms-fs-sm);font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;
}
.ms-cartsum strong{
  font-family:var(--ms-font-body);font-size:1.375rem;font-weight:600;
  letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;
}
.ms-cartsum__note{font-size:var(--ms-fs-xs);color:var(--ms-muted);margin:8px 0 18px;max-width:none;line-height:1.5;}
/* View cart, then checkout. Both full width, stacked. */
.ms-cartsum__actions{display:flex;flex-direction:column;gap:10px;}
/* Razorpay's stylesheet forces display:block on whatever wears the Magic
   Checkout ids, which would drop the flex centring on the two buttons that now
   carry them - the drawer's checkout link and the cart page's. Class plus id
   outranks its bare id, so this wins without needing to load after it. */
.ms-btn#btn-1cc,.ms-btn#btn-1cc-mini-cart{display:flex!important;}

/* --------------------------------------------------------------------------
   10d. Section heading. One component, reused by every merchandising block,
   so the page keeps a single rhythm from top to bottom.
   -------------------------------------------------------------------------- */
.ms-shead{margin-bottom:clamp(28px,3.4vw,46px);}
.ms-shead--center{text-align:center;}
.ms-shead__title{
  font-size:var(--ms-fs-h2);line-height:1.1;
  text-transform:uppercase;letter-spacing:.02em;
}
.ms-shead__flourish{
  display:block;color:var(--ms-gold);margin-top:14px;
}
.ms-shead--center .ms-shead__flourish svg{margin-inline:auto;}
.ms-shead__lead{
  font-size:var(--ms-fs-lead);font-weight:300;line-height:1.55;
  color:var(--ms-muted);margin-top:14px;max-width:56ch;
}
.ms-shead--center .ms-shead__lead{margin-inline:auto;}
.ms-shead--dark .ms-shead__title{color:var(--ms-cream);}
.ms-shead--dark .ms-shead__lead{color:rgba(245,242,234,.72);}
.ms-shead--dark .ms-shead__flourish{color:var(--ms-gold);}

.ms-shead--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--ms-space-md);flex-wrap:wrap;text-align:left;
}

.ms-rail__more{
  display:flex;justify-content:center;
  margin-top:clamp(28px,3vw,44px);
}

/* --------------------------------------------------------------------------
   10e. Service strip. Sits directly under the hero and restates real policy.
   -------------------------------------------------------------------------- */
.ms-servicestrip{
  background:var(--ms-sand);
  border-bottom:1px solid var(--ms-border);
}
.ms-servicestrip__row{
  /* One padding value for every cell, and the row pulled out by exactly that
     much. Both halves matter: equal padding is what puts the four icons on a
     truly even rhythm, and the negative margin is what lets the first cell's
     icon still line up with the container edge every other section starts on. */
  --ms-strip-pad:clamp(12px,1.5vw,22px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-inline:calc(var(--ms-strip-pad) * -1);
}
@media (min-width:900px){
  .ms-servicestrip__row{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/*
 * Four cells of equal width, every one of them starting its icon at its own
 * left edge. The row used to centre the middle two and push the outer two to
 * the container edges, which is what made it look randomly spaced: the four
 * blocks of copy are different widths, so no two of them began at the same
 * offset. Aligning all four to the start puts the icons on an exactly even
 * pitch, which is the thing the eye actually reads as aligned. A hairline
 * between cells makes the even division legible rather than implied.
 */
.ms-servicestrip__item{
  display:flex;align-items:center;justify-content:flex-start;gap:14px;
  padding:20px var(--ms-strip-pad);min-width:0;
}
.ms-servicestrip__item + .ms-servicestrip__item{
  box-shadow:-1px 0 0 var(--ms-border);
}
/* The third cell starts a new row in the two column layout, so it is a row
   start there and must not carry a divider. */
@media (max-width:899px){
  .ms-servicestrip__item:nth-child(odd) + .ms-servicestrip__item{box-shadow:-1px 0 0 var(--ms-border);}
  .ms-servicestrip__item:nth-child(odd){box-shadow:none;}
  .ms-servicestrip__item:nth-child(n+3){box-shadow:0 -1px 0 var(--ms-border);}
  .ms-servicestrip__item:nth-child(4){box-shadow:-1px 0 0 var(--ms-border),0 -1px 0 var(--ms-border);}
}
.ms-servicestrip__item > a{display:flex;align-items:center;gap:14px;min-width:0;}
.ms-servicestrip__icon{
  flex:0 0 auto;width:44px;height:44px;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);
}
.ms-servicestrip__text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ms-servicestrip__title{
  font-size:var(--ms-fs-sm);font-weight:500;color:var(--ms-ink);line-height:1.3;
}
.ms-servicestrip__copy{
  font-size:var(--ms-fs-xs);color:var(--ms-muted);line-height:1.4;
}
.ms-servicestrip__item > a:hover .ms-servicestrip__title{color:var(--ms-gold-ink);}
/* Title only on a phone. Three lines of copy per cell made the strip taller
   than the hero call to action sitting above it. */
@media (max-width:560px){
  .ms-servicestrip__item{padding:14px var(--ms-strip-pad);gap:10px;}
  .ms-servicestrip__icon{width:34px;height:34px;}
  .ms-servicestrip__icon svg{width:17px;height:17px;}
  .ms-servicestrip__copy{display:none;}
  .ms-servicestrip__title{font-size:var(--ms-fs-xs);line-height:1.35;}
}

/* --------------------------------------------------------------------------
   10f. Department and collection tiles ("Explore the collection").

   Shared by the homepage and the About page, which is why these rules live in
   base.css rather than in home.css: the About page never loads home.css. The
   two surfaces render the same section at different lengths — six department
   tiles on the homepage, those six plus the three collections on About.

   Three columns is the resting state at every width from 620px up, so both
   read as the grid the client asked for on 2026-09-10, and the
   grid reads as the three by three the client asked for. The column rule is
   still picked from the count the template prints rather than hard coded, so
   a short set (a department the shop has not created, a collection with
   nothing in it) closes up into its own clean row instead of leaving a hole.
   The wide single row rules only start at 1280px, because five or six tiles
   inside a narrower container leaves each one too narrow to set its own name
   on one line.
   -------------------------------------------------------------------------- */
.ms-edit__grid{
  display:grid;gap:clamp(10px,1.2vw,18px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:620px){ .ms-edit__grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
/*
 * One department per row on a phone, each taking the whole width, each square
 * (client, 2026-09-18). It ran two across in 3:4 portraits, which put a
 * department at 159px on a 375px screen; asked for 1:1 it went square at that
 * width, and the client's point was that the ratio was never the thing - the
 * tile has to fill the screen. A 355px square with the name over the bottom of
 * the photograph is the same object the odd last tile already was, applied to
 * every one of them, so no tile is now a different size from its neighbours.
 *
 * This also retires the old nth-child(odd):last-child rule: in a single column
 * there is no lonely tile left over to span, so the special case has nothing
 * to fix.
 */
@media (max-width:619px){
  .ms-edit__grid{grid-template-columns:minmax(0,1fr);}
}
@media (min-width:1280px){
  .ms-edit__grid--4up{grid-template-columns:repeat(4,minmax(0,1fr));}
  .ms-edit__grid--5up{grid-template-columns:repeat(5,minmax(0,1fr));}
  /* Six through nine all stay three wide. Nine across would put each tile
     under 170px; six across is about 250px, which reads as a different,
     thinner section rather than as the approved one with a row taken off —
     and six is the homepage's resting count now that the New Arrivals, Best
     Sellers and Sale tiles have gone (2026-09-10). */
  .ms-edit__grid--6up,
  .ms-edit__grid--7up,
  .ms-edit__grid--8up,
  .ms-edit__grid--9up{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* Optional closing link under the grid, used by the About page. */
.ms-edit__all{margin:clamp(26px,3vw,40px) 0 0;text-align:center;}

/* --------------------------------------------------------------------------
   10c. Phone: the merchandising grids take the width of the screen.

   The page gutter is 24px a side. On a 375px phone that is 48px spent on
   margin before the 12px between two columns, which left a department tile
   159px wide and a product photograph the same - the client's note of
   2026-09-13 was that both looked small.

   The gutter is dropped to 10px for these three sections only, which is worth
   24px of picture a side, and the copy is pushed back out to sit where it
   always did. That split is deliberate: a heading and a lead paragraph set
   10px from the edge of the screen read as a mistake, while a photograph that
   reaches for the edge reads as a decision. Tiles nearly flush, type on the
   measure.

   Scoped to .ms-edit, .ms-rail and .ms-occasion rather than to .ms-container,
   so the editorial sections, the values row and everything on the inner pages
   keep the page gutter they were designed on.

   Shop by occasion joined the other two on 2026-09-14: it is the same tile in
   the same kind of grid, and left inset it read as a smaller, lesser row than
   the departments directly above it.
   -------------------------------------------------------------------------- */
@media (max-width:600px){
  .ms-edit > .ms-container,
  .ms-rail > .ms-container,
  .ms-occasion > .ms-container{ --ms-gutter:10px; }

  .ms-edit > .ms-container > .ms-shead,
  .ms-rail > .ms-container > .ms-shead,
  .ms-occasion > .ms-container > .ms-shead,
  .ms-edit > .ms-container > .ms-edit__all,
  .ms-rail > .ms-container > .ms-rail__more{ padding-inline:14px; }
}

/* Square corners. The rounded tile is the one thing on this page the client
   picked out by name, and sharp edges are what the rest of the category
   photography is cropped for. The product card keeps its own radius: it is a
   white object on cream and needs the softening, a full bleed photograph
   does not. */
.ms-dept{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:3/4;background:var(--ms-sand);
  border-radius:0;
  isolation:isolate;
}
/* A fixed 340px tall tile on a phone (client's instruction, 2026-09-22),
   where the grid above puts one department per row at the full width of the
   screen. It replaced aspect-ratio:1/1, which was square but tied the height
   to the width: the same tile stood 340px tall on a 360px handset and 392px
   on a 412px one, so the department row grew by a sixth between two phones
   sitting side by side. A number holds the height still and the width goes on
   filling whatever screen it is given.

   The crop still favours the upper body because the focus point below is a
   percentage, not a pixel, so the photograph loses its hem rather than its
   subject.

   Written as a child selector rather than on .ms-dept alone: the base rule
   above is equally specific and declared first, so a plain .ms-dept here would
   lose to it on source order rather than on the media query. */
@media (max-width:619px){
  .ms-edit__grid > .ms-dept{aspect-ratio:auto;height:340px;}
}
.ms-dept__media{position:absolute;inset:0;display:block;}
.ms-dept__img{
  width:100%;height:100%;object-fit:cover;
  /* The supplied photography is portrait with the subject high in frame, so
     the crop favours the upper body rather than centring on the waist. */
  object-position:center 22%;
  transition:transform 800ms var(--ms-ease);
}
.ms-dept--jewellery .ms-dept__img{object-position:center 30%;}
.ms-dept--kalamkari .ms-dept__img{object-position:center 26%;}
.ms-dept--accessories .ms-dept__img{object-position:center 40%;}
.ms-dept::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(13,13,13,.86) 0%,rgba(13,13,13,.46) 42%,rgba(13,13,13,.04) 76%);
}
/* A gold hairline drawn just inside the edge on hover. The same gesture is on
   the occasion tiles, so the two grids answer to the pointer the same way. */
.ms-dept::before{
  content:'';position:absolute;inset:10px;z-index:3;pointer-events:none;
  border:1px solid var(--ms-gold-line);
  opacity:0;transform:scale(1.02);
  transition:opacity var(--ms-t) var(--ms-ease),transform var(--ms-t) var(--ms-ease);
}
.ms-dept:hover::before,.ms-dept:focus-visible::before{opacity:1;transform:scale(1);}
.ms-dept:hover .ms-dept__img{transform:scale(1.05);}
.ms-dept__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(16px,1.8vw,26px);
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
}
.ms-dept__title{
  font-family:var(--ms-font-heading);
  /* Held below the old 26px cap so ACCESSORIES, the longest of the six, sets
     on one line at the width a sixth of the container comes to. */
  font-size:clamp(1.0625rem,.86rem + .62vw,1.375rem);
  font-weight:500;line-height:1.14;color:var(--ms-cream);
  text-transform:uppercase;letter-spacing:.03em;
  text-wrap:balance;
}
.ms-dept__cta{
  margin-top:10px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ms-cream);
  border:1px solid rgba(245,242,234,.5);
  padding:8px 18px;
  transition:background var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease);
}
.ms-dept:hover .ms-dept__cta{background:var(--ms-gold);border-color:var(--ms-gold);color:var(--ms-ink);}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
/*
 * A warm espresso rather than the flat ink used everywhere else. The
 * newsletter band directly above the footer is ink, and when the footer was
 * ink too the two ran together as a single black slab with no edge. The gold
 * hairline across the top states that edge, and the faint warm wash from the
 * left keeps the whole thing from reading as a dead rectangle.
 */
.ms-footer{
  background:
    radial-gradient(90% 120% at 4% 0%,rgba(203,163,97,.10),transparent 56%),
    linear-gradient(180deg,var(--ms-espresso-lift) 0%,var(--ms-espresso) 46%);
  color:rgba(245,242,234,.74);
  font-size:var(--ms-fs-sm);
  border-top:1px solid rgba(203,163,97,.34);
}
/* Stepped up from 14px on the client's instruction (2026-09-10). The footer
   carries the business record, and at the old size the registered office and
   the GSTIN were the smallest type on the page. */
.ms-footer{font-size:.9375rem;}
.ms-footer a{transition:color var(--ms-t) var(--ms-ease);}
.ms-footer a:hover{color:var(--ms-gold-light);}
.ms-footer__grid{
  display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:1fr;
  padding-block:clamp(56px,6vw,88px);
}
@media (min-width:700px){ .ms-footer__grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .ms-footer__grid{grid-template-columns:1.45fr 1fr 1fr 1fr 1.55fr;} }

/*
 * Sized by width, not height. This is the stacked mark, and an SVG with no
 * intrinsic width under height:74px;width:auto is free to resolve its width
 * from the container: some browsers held it to the 220px attribute, others
 * blew it out to the full 335px column and took the height with it. An
 * explicit width plus the mark's own ratio pins it everywhere.
 */
.ms-footer__brandmark{
  width:160px;max-width:160px;height:auto;
  aspect-ratio:2563 / 2165;
  margin-bottom:22px;
}
.ms-footer__about{max-width:34ch;line-height:1.75;}

/* ---- Social row -----------------------------------------------------------
 * Directly under the description in the brand column. Circular chips on the
 * same gold hairline as the contact icons opposite, so the two columns read
 * as one set rather than two unrelated icon languages.
 * -------------------------------------------------------------------------- */
/*
 * Four to a row, two rows.
 *
 * The row was five profiles and wrapped only in theory. It is eight since the
 * client's own set was carried over on 2026-09-13, and eight 38px marks do not
 * fit the brand column at any width the footer uses - free wrapping put six on
 * the first row and two on the second, which reads as an overflow rather than
 * as a block. A fixed four keeps the two rows even, and it stays even on a
 * phone, where the column is wider but still short of eight.
 */
.ms-fsocial{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,38px);gap:10px;
  justify-content:start;
}
.ms-fsocial__link{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(203,163,97,.12);
  border:1px solid rgba(203,163,97,.28);
  color:var(--ms-cream);
  transition:background var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease),transform var(--ms-t) var(--ms-ease);
}
.ms-fsocial__link:hover,.ms-fsocial__link:focus-visible{
  background:var(--ms-gold);border-color:var(--ms-gold);
  color:var(--ms-ink);transform:translateY(-2px);
}
/* WhatsApp keeps its own green on hover: it is a brand mark, and it is the
   support channel rather than a social profile. */
.ms-fsocial__link--whatsapp:hover,.ms-fsocial__link--whatsapp:focus-visible{
  background:var(--ms-wa-green);border-color:var(--ms-wa-green);color:var(--ms-white);
}
@media (prefers-reduced-motion:reduce){
  .ms-fsocial__link:hover,.ms-fsocial__link:focus-visible{transform:none;}
}
.ms-footer__title{
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-micro);font-weight:600;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-cream);margin-bottom:18px;
}
.ms-footer__list li + li{margin-top:12px;}
/* ---- Contact column -------------------------------------------------------
 * A labelled icon list rather than four loose paragraphs. Each row is a chip
 * and a stacked label/value pair, so the column scans as a business record:
 * who the company is, its GST number, then the three ways to reach it. The
 * GSTIN moved up here out of the bottom bar on the client's instruction,
 * 2026-09-02; the right hand side of the bar is deliberately left empty for
 * whatever goes there next.
 * -------------------------------------------------------------------------- */
.ms-fcontact{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:15px;
}
.ms-fcontact__row{display:flex;align-items:flex-start;gap:12px;}
.ms-fcontact__icon{
  flex:0 0 auto;
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(203,163,97,.12);
  border:1px solid rgba(203,163,97,.28);
  color:var(--ms-gold-light);
  margin-top:1px;
}
.ms-fcontact__body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ms-fcontact__label{
  font-size:.75rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:rgba(245,242,234,.58);
}
.ms-fcontact__val{
  color:var(--ms-cream);font-size:.9375rem;line-height:1.55;
  overflow-wrap:anywhere;
}
a.ms-fcontact__val:hover{color:var(--ms-gold-light);}
/* The GSTIN is a reference string, not prose: tabular and opened up so it can
   be read back over the phone without transcription errors. */
.ms-fcontact__val--gst{font-variant-numeric:tabular-nums;letter-spacing:.05em;}
.ms-fcontact__brand{
  font-size:1.0625rem;font-weight:500;line-height:1.35;
  color:var(--ms-cream);letter-spacing:.01em;
}
.ms-fcontact__sub{font-size:.875rem;color:rgba(245,242,234,.66);line-height:1.5;}
.ms-fcontact__note{
  font-size:.875rem;color:rgba(245,242,234,.56);
  line-height:1.5;margin-top:2px;
}
/*
 * The registered office is printed one line per line of the client's own copy
 * and must not be re-flowed, so it is given the leading of a stacked address
 * rather than of a paragraph, and it is never allowed to break a line early:
 * `anywhere`, inherited from .ms-fcontact__val, would split "1/75-3-11,".
 */
.ms-fcontact__addr{font-style:normal;line-height:1.85;overflow-wrap:normal;}
.ms-footer__bottom{
  border-top:1px solid rgba(203,163,97,.18);
  padding-block:24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--ms-space-sm);flex-wrap:wrap;
  font-size:var(--ms-fs-xs);color:rgba(245,242,234,.58);
}
.ms-footer__bottom p{margin:0;max-width:none;}

/* ---- Payment strip --------------------------------------------------------
 * Closes the right hand side of the bottom bar. One supplied artwork file, with
 * the chips behind each scheme already drawn into it, so the footer carries no
 * white block of its own and the marks read against the espresso ground.
 *
 * Sized by width with height:auto rather than the other way round: on a narrow
 * phone max-width takes over, and a fixed height would squash the strip instead
 * of scaling it.
 * -------------------------------------------------------------------------- */
.ms-fpay{
  display:block;flex:0 0 auto;
  width:336px;max-width:100%;height:auto;
}
/*
 * A clear lane for the floating WhatsApp button.
 *
 * The float is fixed to the bottom right of the viewport and the payment strip
 * closes the bottom bar on the same side, so the two sat on top of each other
 * (client's note, 2026-09-18, on a tablet). The container is 1600px inside two
 * 40px gutters, so its right edge only clears the float's 76px of viewport
 * above 1760px - below that the bar has to keep the lane itself.
 *
 * On a phone the float moves up above the mobile bar instead of sideways, so
 * the lane there is vertical: the strip left aligns and the bar carries enough
 * foot for the button to sit under the last line rather than on it.
 */
@media (max-width:1759px){
  .ms-footer__bottom{padding-right:78px;}
}
@media (max-width:860px){
  .ms-footer__bottom{padding-right:0;padding-bottom:86px;}
}
@media (max-width:560px){
  .ms-footer__bottom{justify-content:flex-start;}
  .ms-fpay{width:288px;}
}

/* --------------------------------------------------------------------------
   12. Floating WhatsApp
   -------------------------------------------------------------------------- */
/* The WhatsApp float is a third party brand element, so it uses WhatsApp's own
   green and its own circular lockup rather than the Mahira button language.
   White on #25D366 measures only 2:1, so the mark, which is a logo and exempt,
   is the only white on green: the label sits in an ivory tooltip beside it,
   where it reads at full contrast and still names the link for assistive tech. */
.ms-wa{
  position:fixed;right:20px;bottom:20px;z-index:870;
  width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ms-wa-green);color:var(--ms-white);
  border:0;
  box-shadow:0 6px 18px rgba(13,13,13,.22);
  transition:background var(--ms-t) var(--ms-ease),transform var(--ms-t) var(--ms-ease),box-shadow var(--ms-t) var(--ms-ease);
}
.ms-wa svg{width:29px;height:29px;}
.ms-wa:hover,.ms-wa:focus-visible{
  background:var(--ms-wa-green-dark);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(13,13,13,.28);
}

.ms-wa__label{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--ms-cream);color:var(--ms-ink);
  border:1px solid var(--ms-border);
  padding:8px 14px;white-space:nowrap;
  font-size:var(--ms-fs-micro);font-weight:500;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  box-shadow:0 4px 14px rgba(13,13,13,.12);
  opacity:0;pointer-events:none;
  transition:opacity var(--ms-t) var(--ms-ease),transform var(--ms-t) var(--ms-ease);
}
.ms-wa:hover .ms-wa__label,
.ms-wa:focus-visible .ms-wa__label{opacity:1;transform:translateY(-50%) translateX(0);}

@media (max-width:860px){
  .ms-wa{bottom:72px;right:16px;width:50px;height:50px;}
  .ms-wa svg{width:26px;height:26px;}
  /* No hover on touch, so the tooltip never appears and the accessible name
     comes from the label text alone. */
  .ms-wa__label{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .ms-wa:hover,.ms-wa:focus-visible{transform:none;}
}

/* --------------------------------------------------------------------------
   13. Notices and empty states
   -------------------------------------------------------------------------- */
.ms-empty{
  text-align:center;padding-block:clamp(56px,8vw,110px);
  max-width:520px;margin-inline:auto;
}
.ms-empty img.ms-empty__mark,
img.ms-empty__mark{
  /* The full lockup rather than the bare monogram, on the client's
     instruction (2026-09-02). It carries the wordmark, so it is sized and
     weighted to be read rather than dropped to a watermark.

     The element name is load bearing. Every empty state but the 404 renders on
     a WooCommerce screen, where `.woocommerce img,.woocommerce-page img
     {height:auto}` is (0,1,1) and beats a bare class: without it the height is
     ignored and the SVG paints at its intrinsic 520px. */
  width:auto;height:96px;max-width:100%;
  margin:0 auto var(--ms-space-md);
  opacity:.9;
}
.ms-empty h2{margin-bottom:12px;}
.ms-empty p{margin-inline:auto;margin-bottom:var(--ms-space-md);color:var(--ms-muted);}
.ms-empty__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.ms-toast{
  position:fixed;left:50%;bottom:26px;z-index:1300;
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  background:var(--ms-ink);color:var(--ms-cream);
  padding:13px 22px;font-size:var(--ms-fs-xs);
  letter-spacing:.05em;
  transition:opacity var(--ms-t) var(--ms-ease),transform var(--ms-t) var(--ms-ease);
  max-width:calc(100vw - 32px);
}
.ms-toast.is-visible{opacity:1;transform:translate(-50%,0);}
@media (max-width:860px){ .ms-toast{bottom:78px;} }

/* --------------------------------------------------------------------------
   13b. Pagination. Shared by the shop, archives and search.
   -------------------------------------------------------------------------- */
.pagination,.woocommerce-pagination{
  margin-top:clamp(40px,5vw,72px);
  padding-top:clamp(24px,3vw,36px);
  border-top:var(--ms-hairline);
}
.pagination .nav-links,.woocommerce-pagination ul{
  display:flex;gap:6px;justify-content:center;align-items:center;
  list-style:none;padding:0;margin:0;border:0;
}
.woocommerce-pagination li{border:0;margin:0;}
.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;
  font-size:var(--ms-fs-sm);
  border:1px solid var(--ms-border);
  transition:border-color var(--ms-t) var(--ms-ease),background var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease);
}
.page-numbers:hover{border-color:var(--ms-ink);}
.page-numbers.current{background:var(--ms-ink);color:var(--ms-cream);border-color:var(--ms-ink);}
.page-numbers.dots{border-color:transparent;}

/* --------------------------------------------------------------------------
   14. Breadcrumb
   -------------------------------------------------------------------------- */
.ms-crumb{
  font-size:var(--ms-fs-xs);color:var(--ms-muted);
  padding-block:18px;
}
.ms-crumb a{transition:color var(--ms-t) var(--ms-ease);}
.ms-crumb a:hover{color:var(--ms-gold-ink);}
.ms-crumb__sep{margin:0 8px;opacity:.5;}

/* --------------------------------------------------------------------------
   15. Scroll reveal. Degrades to visible with no JS.
   -------------------------------------------------------------------------- */
.js .ms-reveal{opacity:0;transform:translateY(16px);}
.js .ms-reveal.is-in{
  opacity:1;transform:none;
  transition:opacity var(--ms-t-slow) var(--ms-ease),transform var(--ms-t-slow) var(--ms-ease);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .ms-reveal{opacity:1;transform:none;}
  .ms-card:hover .ms-card__img{transform:none;}
}

/* --------------------------------------------------------------------------
   16. Print
   -------------------------------------------------------------------------- */
@media print{
  .ms-header,.ms-topbar,.ms-footer,.ms-wa,.ms-mobilebar,.ms-drawer,.ms-search{display:none!important;}
  body{background:var(--ms-white);color:var(--ms-ink);}
}