/* ============================================================
   MUSEF — SITE OVERRIDES
   Loaded last, after msf-tokens / msf-header / msf-footer.

   The reference files are kept byte-identical to the source set so they
   stay verifiable against it. Every site-specific fix lives here instead,
   which also keeps the diff reviewable in one place.
   ============================================================ */

/* ------------------------------------------------------------
   1. Search field: centred, narrower, pill corners.

   The reference sets max-width:420px, border-radius:999px and
   padding-left:42px on single-class selectors. Something in the
   theme/Woo stack lands on top of them, so the field rendered wide,
   square-cornered, and with the glyph sitting on the placeholder text.
   Set explicitly here at a specificity the theme cannot reach.

   Centring uses a 3-column grid rather than auto margins: the row had
   auto margins on both the search and the tools cluster, so free space
   was shared between them and the field never sat on the centre line.
   With 1fr auto 1fr the side tracks are equal by definition, so the
   field stays centred regardless of how wide the logo or tools get.

   Desktop only -- at <=900px the field becomes the full-width dropdown
   panel and must stay exactly as the reference has it.
   ------------------------------------------------------------ */
@media (min-width:901px){
  .msf-header .msf-row1{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    column-gap:20px;
  }
  .msf-header .msf-row1 .msf-logo{ justify-self:start; }
  .msf-header .msf-row1 .msf-tools{ justify-self:end; margin-left:0; }
  .msf-header .msf-row1 .msf-search{
    justify-self:center;
    width:min(340px, 100%);
    max-width:340px;
    margin:0;
  }
}

/* Keep it proportional in the tighter desktop band. */
@media (min-width:901px) and (max-width:1180px){
  .msf-header .msf-row1 .msf-search{
    width:min(280px, 100%);
    max-width:280px;
  }
}

/* Pill corners and a slightly shorter field, in every context. */
.msf-header .msf-search .msf-search__field{
  height:40px;
  border-radius:999px !important;
  padding-left:44px !important;
  padding-right:16px !important;
}

/* ------------------------------------------------------------
   2. Trust strip: centre each item within its column.
   ------------------------------------------------------------ */
.msff .msff-usp__grid{ justify-items:center; }
.msff .msff-usp__item{ justify-content:center; text-align:left; }

/* Stacked below 640px, keep them left aligned so the rows line up
   with each other rather than drifting. */
@media (max-width:640px){
  .msff .msff-usp__grid{ justify-items:stretch; }
  .msff .msff-usp__item{ justify-content:flex-start; }
}

/* ------------------------------------------------------------
   3. Row 2 hides while scrolling down, returns on scroll up.
   Desktop only: below 901px row 2 is already display:none and the
   drawer takes over. Scoped to .msf-js so a failed script can never
   leave the nav collapsed.
   ------------------------------------------------------------ */
@media (min-width:901px){
  /* overflow-anchor:none stops the browser correcting scrollTop when this
     row collapses. That correction was being read by msf-scroll.js as a
     scroll in the opposite direction, which flipped the row back open. */
  .msf-js .msf-header,
  .msf-js .msf-header .msf-row2{ overflow-anchor:none; }
  .msf-js .msf-header .msf-row2{
    overflow:hidden;
    max-height:var(--msf-r2);
    /* No opacity transition: a second, shorter curve fading the links
       out while the height is still moving reads as a flicker. */
    transition:max-height .2s ease;
    will-change:max-height;
  }
  .msf-js .msf-header.msf-hide-row2 .msf-row2{ max-height:0; }
}
@media (prefers-reduced-motion:reduce){
  .msf-js .msf-header .msf-row2{ transition:none; }
}

/* ------------------------------------------------------------
   4. Payment marks in the bottom bar.
   The reference shipped plain text chips; these are small SVG marks on
   light chips instead. Simplified representations, not official brand
   artwork -- swap in supplied assets if the networks provide them.
   ------------------------------------------------------------ */
.msff .msff-pay{ gap:8px; }
.msff .msff-pay .msff-pay__chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:32px; padding:0;
  background:#FFFFFF; border:1px solid var(--msff-line);
  border-radius:6px; overflow:hidden;
}
.msff .msff-pay .msff-pay__chip svg{
  width:100%; height:100%; display:block;
}

@media (max-width:480px){
  .msff .msff-pay{ gap:6px; }
  .msff .msff-pay .msff-pay__chip{ width:46px; height:29px; }
}
@media (max-width:360px){
  .msff .msff-pay{ gap:5px; }
  .msff .msff-pay .msff-pay__chip{ width:42px; height:27px; }
}

/* ------------------------------------------------------------
   5. Astra styles a bare <button> on :hover/:focus at (0,1,1):
        button:hover, button:focus{
          color:var(--ast-global-color-0);              -- orange
          background-color:var(--ast-global-color-5);   -- white
          border-color:var(--ast-global-color-0);
        }
   That outranks the reference's single-class rules, so tapping a footer
   accordion heading on a phone painted a white box with orange text
   behind it (a tap leaves the button focused), and the header/drawer
   icon buttons picked up the same treatment on hover.

   Neutralised below, then the intended states are put back. `outline` is
   deliberately untouched so the :focus-visible ring still works.
   ------------------------------------------------------------ */
.msf-header button:hover,
.msf-header button:focus,
.msf-header button:active,
.msf-drawer button:hover,
.msf-drawer button:focus,
.msf-drawer button:active,
.msff button:hover,
.msff button:focus,
.msff button:active{
  background-color:transparent;
  border-color:transparent;
  box-shadow:none;
}

/* Accordion headings stay flat in every state. */
.msff .msff-col--acc .msff-col__head,
.msff .msff-col--acc .msff-col__head:hover,
.msff .msff-col--acc .msff-col__head:focus,
.msff .msff-col--acc .msff-col__head:active{
  background:none;
  background-color:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:var(--msff-head);
  -webkit-tap-highlight-color:transparent;
}

/* Header and drawer icon buttons keep their own hover treatment. */
.msf-header .msf-icon:hover,
.msf-header .msf-icon:focus,
.msf-drawer .msf-icon:hover,
.msf-drawer .msf-icon:focus{
  background-color:var(--msf-hover);
  color:var(--msf-accent);
}
.msf-header .msf-icon.msf-wa:hover,
.msf-header .msf-icon.msf-wa:focus,
.msf-drawer .msf-icon.msf-wa:hover,
.msf-drawer .msf-icon.msf-wa:focus{
  background-color:var(--msf-wa);
  color:#FFFFFF;
}

/* The search submit is a bare glyph, not a filled control. */
.msf-header .msf-search .msf-search__go:hover,
.msf-header .msf-search .msf-search__go:focus{
  background-color:transparent;
  color:var(--msf-accent);
}

/* Subscribe keeps its fill. */
.msff .msff-news__form button:hover,
.msff .msff-news__form button:focus{
  background-color:var(--msf-accent-dark);
  color:#FFFFFF;
}
/* ------------------------------------------------------------
   6. Search field: glyph offset per breakpoint, and the focus ring.

   The glyph offset differs by breakpoint and must be scoped, not global:
   on desktop the field is its own box so the icon sits 7px in, but at
   <=900px the field becomes a full-width panel with a 16px gutter, so
   the icon has to clear that gutter too. An unscoped rule pulled the
   glyph to the screen edge on phones.

   Astra also sets `outline-style:dotted; outline-width:thin` across a
   large :focus-visible selector list, which is where the dotted ring
   around the focused field came from. Replaced with a solid accent ring
   so the field still has a clear focus indicator.
   ------------------------------------------------------------ */
@media (min-width:901px){
  .msf-header .msf-search .msf-search__go{
    left:7px;
    width:30px;
    height:30px;
    pointer-events:auto;
  }
}

@media (max-width:900px){
  .msf-header .msf-search{
    padding:10px var(--msf-gut-sm);
    box-sizing:border-box;
  }
  .msf-header .msf-search .msf-search__go{
    left:calc(var(--msf-gut-sm) + 8px);
    width:30px;
    height:30px;
    pointer-events:auto;
  }
  .msf-header .msf-search .msf-search__field{
    width:100%;
    max-width:100%;
    height:44px;
    box-sizing:border-box;
  }
}

/* One consistent focus treatment, replacing Astra's dotted ring. */
.msf-header .msf-search .msf-search__field:focus,
.msf-header .msf-search .msf-search__field:focus-visible{
  background:#FFFFFF !important;
  border-color:var(--msf-accent) !important;
  outline:2px solid var(--msf-accent) !important;
  outline-offset:2px !important;
}
/* ------------------------------------------------------------
   7. Bottom bar order on desktop.
   Copyright left, legal links centred, payment marks right.

   The three sit in the markup as copy, pay, legal. From 641px that row
   is flex, so `order` puts them in the wanted sequence. From 901px it
   becomes a grid, so the middle column is centred on the page rather
   than in whatever space is left over - and there the column of each
   one is named outright. Auto-placement would otherwise quietly follow
   the `order` values above, which is a fragile thing for the grid to
   depend on.

   Below 641px msf-footer.css stacks the three centred - left alone.
   ------------------------------------------------------------ */
@media (min-width:641px){
  .msff .msff-bottom__grid .msff-copy{ order:1; }
  .msff .msff-bottom__grid .msff-legal{ order:2; }
  .msff .msff-bottom__grid .msff-pay{ order:3; }
}
@media (min-width:901px){
  .msff .msff-bottom__grid{
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; gap:18px;
  }
  .msff .msff-bottom__grid .msff-copy{ grid-column:1; justify-self:start; text-align:left; }
  .msff .msff-bottom__grid .msff-legal{ grid-column:2; justify-self:center; }
  .msff .msff-bottom__grid .msff-pay{ grid-column:3; justify-self:end; }
}

/* ------------------------------------------------------------
   8. Logo room on phones.
   --msf-font asks for Poppins. Until it was actually enqueued, Android
   fell back to Roboto, which sets wider than the iOS system face, so
   the 60% cap on .msf-logo ellipsised the name and the tagline while
   iPhone and desktop had just enough room. Poppins is loaded now, and
   the logo additionally takes whatever width the tools row leaves
   rather than a fixed share of it.
   ------------------------------------------------------------ */
@media (max-width:900px){
  .msf-header .msf-logo{ max-width:none; flex:1 1 auto; min-width:0; }
  .msf-header .msf-tools{ flex:0 0 auto; }
}
@media (max-width:420px){
  .msf-header .msf-logo__tag{ letter-spacing:.08em; }
}
/* ------------------------------------------------------------
   9. Footer email field on WooCommerce pages.
   Astra ships `.woocommerce input[type=email] { border-radius:0;
   background-color:var(--ast-global-dark-bg-style); border-color:... }`.
   Because `.woocommerce` sits on <body>, that rule reached the footer
   newsletter field on shop and product pages only, turning the dark pill
   into a square light box. Its (0,2,0) beat the footer's own (0,1,1),
   so the field is re-asserted here one step higher.
   ------------------------------------------------------------ */
.msff .msff-news__form input[type="email"]{
  height:46px;
  padding:0 16px;
  border:1px solid var(--msff-line);
  border-radius:999px;
  background-color:var(--msff-field);
  color:var(--msff-head);
  box-shadow:none;
}
.msff .msff-news__form input[type="email"]:focus{
  border-color:var(--msf-accent);
  background-color:var(--msff-field);
  box-shadow:none;
}
.msff .msff-news__form input[type="email"]::placeholder{ color:#A99C95; opacity:1; }
/* ------------------------------------------------------------
   10. The logo is now a wordmark.
   The supplied artwork carries the name and the tagline inside it, so
   the text that sat beside it is gone from both partials. The mark used
   to be a fixed square with its own accent fill and rounded corners -
   all three would now sit behind artwork that already has them, so the
   box is reset to "as tall as asked, as wide as it needs to be".

   This also supersedes the width juggling in section 8: with no text to
   fit, the logo no longer needs a share of the row.
   ------------------------------------------------------------ */
.msf-header .msf-logo{ flex:0 0 auto; max-width:none; }
.msf-header .msf-logo__mark{
  width:auto; height:84px;
  background:none; border-radius:0; overflow:visible;
}
.msf-header .msf-logo__mark img{
  height:100%; width:auto; max-width:none;
  object-fit:contain; display:block;
}

@media (max-width:900px){
  .msf-header .msf-logo{ flex:0 0 auto; }
  .msf-header .msf-logo__mark{ height:64px; }
}
@media (max-width:600px){
  .msf-header .msf-logo__mark{ width:auto; height:58px; border-radius:0; }
}
@media (max-width:360px){
  .msf-header .msf-logo__mark{ height:50px; }
}

.msff .msff-brand__mark{
  width:auto; height:100px;
  background:none; border-radius:0; overflow:visible;
}
.msff .msff-brand__mark img{
  height:100%; width:auto; max-width:none;
  object-fit:contain; display:block;
}
.msff .msff-brand__logo{ margin-bottom:18px; }

@media (max-width:640px){
  .msff .msff-brand__mark{ height:82px; }
}
/* ------------------------------------------------------------
   11. Taller header row to carry the bigger logo.
   --msf-r1 lives in msf-tokens.css, which is kept byte-identical to the
   reference set, so the value is re-declared here instead of edited
   there. The logo is mounted to the top edge (section 13), so row 1's height is
   what gives the mark its clearance below: 108px row - 84px mark = 24px
   of air under the rounded bottom. Row 2 is untouched.
   ------------------------------------------------------------ */
:root{
  --msf-r1:   108px;   /* 84px logo + 24px of air below it */
  --msf-r2:    46px;   /* was 50px */
  --msf-r1-sm: 68px;   /* was 62px, briefly 80px */

  /* WhatsApp green (#25D366) with white text measures 1.98:1, well under
     WCAG AA. This is WhatsApp's own dark brand green and measures 7.67:1,
     so the button stays recognisably WhatsApp without the contrast cost. */
  --msf-wa-deep: #075E54;

  /* The reference set asked for Poppins. This site's own font (Astra >
     Typography) puts Montserrat on the headings and Poppins on
     everything else. This token is the everything else: the header,
     footer, shop UI, gallery and language form all read it.

     The three script faces ride behind it for the same reason they do
     in the Astra stack: Playfair holds no Arabic, Devanagari or
     Gujarati glyph, and this token styles the gallery's language pills,
     which are exactly where those scripts appear.

     Nothing extra is fetched: Playfair is one variable file already
     downloaded for the headings, and dropping Manrope removes one. */
  --msf-font: 'Poppins', 'Amiri', 'Noto Sans Gujarati', sans-serif;
}

/* ------------------------------------------------------------
   12. Row 1: every group on the same centre line.
   The row has no padding of its own - its height is the bar. The logo
   is much taller than the search field and the icons, so it sets that
   height and the smaller items were left floating in the space around
   it. The bar is tighter now (see --msf-r1 above) and each group is
   told to centre itself, rather than relying on the grid's default
   alignment surviving whatever else sets align-items later.
   ------------------------------------------------------------ */
/* align-content must stay stretch: on a single-row grid, centring the
   ROW TRACK shifts everything down by half the leftover height, which
   defeats align-self:start on the logo below. */
.msf-header .msf-row1{ align-items:center; align-content:stretch; }
.msf-header .msf-row1 > .msf-search,
.msf-header .msf-row1 > .msf-tools{ align-self:center; }

/* the logo is a link wrapping one image; centre the image inside it too */
.msf-header .msf-logo{ align-items:center; }
.msf-header .msf-logo__mark{ display:flex; align-items:center; justify-content:center; }

/* row 2 links sit on their own centre line */
.msf-header .msf-row2 .msf-wrap{ align-items:center; }
/* ------------------------------------------------------------
   13. The logo mounts to the top edge.
   The artwork's own top corners are square while the bottom two are
   rounded - it is drawn to hang from an edge, not to float in the
   middle of a bar. Centred vertically that reads as a mistake, so the
   logo is pinned to the top of row 1 (which has no padding, so its top
   IS the top of the header) and the rounded bottom is left to show
   inside the bar. Search and the icons stay on the centre line.
   ------------------------------------------------------------ */
.msf-header .msf-row1 > .msf-logo{ align-self:start; }
.msf-header .msf-logo{ align-items:flex-start; }
.msf-header .msf-logo__mark{ align-items:flex-start; }

/* ------------------------------------------------------------
   14. Shop, product and account pages line up with the header.
   Astra insets this content twice over: .ast-container carries its own
   side padding, and then the inner wrapper adds more. At every width the
   total came out wider than .msf-wrap, so the header and the page below
   it never shared an edge:

     width        Astra inset      .msf-wrap
     >=1201px     20 + 106.7px     24px
     641-992px    20 + 34.2px      24px
     545-640px    20 + 34.2px      16px
     <=544px      8.6 + 16px       16px

   The fix is the same at every size: put one gutter on .ast-container and
   take the inner wrapper's side padding away, so the inset is exactly the
   gutter .msf-wrap uses - 24px, and 16px below 640px where the header
   switches to --msf-gut-sm.

   Two things to know before editing this.

   The wrapper class is not the same on every page: WooCommerce archives
   and single products sit in .ast-woocommerce-container, while My Account
   is an ordinary page and sits in .ast-article-single.

   And the selectors carry #content on purpose. Astra's own phone rule is
   `.ast-separate-container #content .ast-container` - (1,2,0) - and an id
   outranks any number of classes, so a selector built from classes alone
   loses below 544px however many of them it has. The shop cap is the
   other one to watch: `.ast-woo-shop-archive .site-content > .ast-container`
   is (0,3,1), hence the extra class on that line.
   ------------------------------------------------------------ */
@media (min-width:993px){
  body.woocommerce-shop.ast-woo-shop-archive #content.site-content > .ast-container,
  body.woocommerce-account #content.site-content > .ast-container{
    max-width:var(--msf-max);
    padding-inline:var(--msf-gut);
  }

  /* The product page is asked to sit in from the edges the way the home
     page does. Home is Elementor and caps its content with
     .e-con{--container-max-width:1200px}, so matching it is not a matter
     of picking a nice number: the BOX has to be 1200 plus one gutter on
     each side, which lands the content on exactly 1200 and puts the page
     edge in the same place as home's at every width above 1248px.
     Shop and account stay on --msf-max, flush with the header. */
  body.single-product #content.site-content > .ast-container{
    max-width:calc(1200px + 2 * var(--msf-gut));
    padding-inline:var(--msf-gut);
  }

  body.single-product.ast-separate-container .ast-woocommerce-container,
  body.woocommerce-shop.ast-separate-container .ast-woocommerce-container{
    padding:32px 0 48px;
  }

  body.woocommerce-account.ast-separate-container .ast-article-single{
    padding:32px 0 48px;
  }
}

@media (max-width:992px){
  body.single-product #content.site-content > .ast-container,
  body.woocommerce-shop #content.site-content > .ast-container,
  body.woocommerce-account #content.site-content > .ast-container{
    padding-inline:var(--msf-gut);
  }

  /* Vertical padding is reset along with the sides: Astra's phone values
     range from 1.5em down to 0.54em, which reads as either too much air
     or none at all depending on the width. */
  body.single-product.ast-separate-container .ast-woocommerce-container,
  body.woocommerce-shop.ast-separate-container .ast-woocommerce-container{
    padding:20px 0 36px;
  }

  body.woocommerce-account.ast-separate-container .ast-article-single{
    padding:20px 0 36px;
  }
}

@media (max-width:640px){
  body.single-product #content.site-content > .ast-container,
  body.woocommerce-shop #content.site-content > .ast-container,
  body.woocommerce-account #content.site-content > .ast-container{
    padding-inline:var(--msf-gut-sm);
  }
}

/* Astra puts 64px of nothing above the first thing on the page, but not
   the same way at every width: at 993px and up it is a 4em MARGIN on
   #primary, below that the margin is 0 and it becomes 4em of PADDING.
   Both have to go, or the gap only closes on desktop. */
body.single-product.ast-separate-container #primary,
body.woocommerce-shop.ast-separate-container #primary,
body.woocommerce-account.ast-separate-container #primary{
  margin-top:0;
  padding-top:0;
}

/* ------------------------------------------------------------
   Counting stat figures, and supplied payment artwork.
   ------------------------------------------------------------ */

/* The figure climbs in assets/js/msf-count.js. Tabular digits keep it from
   jiggling in width on the way up; the real value sits beside it, out of
   sight but readable, so assistive technology never reads a half-counted
   number. */
.msf-count{ font-variant-numeric:tabular-nums; }

.msf-count__sr{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
}

/* Supplied brand artwork on the payment chips, in place of the drawn marks
   in section 4. Inset so a logo does not run to the chip's edge, and sized
   by whichever side runs out first, so a wide mark and a square one end up
   optically the same size. */
.msff .msff-pay .msff-pay__logo{
  display:block; width:auto; height:auto;
  max-width:86%; max-height:78%;
  object-fit:contain;
}

/* Each cell of a stat row rises into place, and the ones holding a quantity
   count at the same time, so the row reads as one movement rather than two
   figures climbing beside two that sit still.

   assets/js/msf-count.js only adds .msf-rise to a cell the reader has not
   reached yet, so nothing already on screen blinks out before fading in. */
.msf-rise{
  opacity:0;
  transform:translateY(10px);
}

.msf-rise--in{
  opacity:1;
  transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.7,.26,1);
}

@media (prefers-reduced-motion:reduce){
  .msf-rise,
  .msf-rise--in{ opacity:1; transform:none; transition:none; }
}