/* ==========================================================================
   FAHUS - 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)
   Libre Caslon Display for display type, Mukta for everything read or tapped
   (it carries the rupee sign), Anek Telugu for the occasional Telugu word.
   All three are SIL Open Font License.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/libre-caslon-display-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/libre-caslon-display-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:'Mukta';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/mukta-300-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Mukta';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/mukta-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:'Mukta';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/mukta-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Mukta';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/mukta-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:'Mukta';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/mukta-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Mukta';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/mukta-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:'Mukta';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/mukta-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Mukta';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/mukta-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:'Mukta';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/mukta-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Mukta';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/mukta-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:'Anek Telugu';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/anek-telugu-500-telugu.woff2') format('woff2');unicode-range:U+0951-0952, U+0964-0965, U+0B83, U+0C00-0C7F, U+1CD5-1CD6, U+1CD8, U+1CDA, U+1CF2, U+200C-200D, U+25CC;}
/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* ------------------------------------------------------------------
     Colour. The Fahus palette (brand brief, 2026-10-25):
       #4E1220 kumkum maroon   #A8823A temple gold   #F8F2E7 ivory
       #EFE5D3 sandal          #1D1A17 kajal ink     #1E4D3B temple green
       #8E1B2B kemp ruby       #120D0B night
     The older token names are kept so every stylesheet keeps working;
     each now carries the Fahus value for the same job.
     ------------------------------------------------------------------ */
  --fh-maroon:#4E1220;
  --fh-maroon-deep:#3A0B16;
  --fh-maroon-soft:rgba(78,18,32,.07);
  --fh-green:#1E4D3B;
  --fh-night:#120D0B;

  --fh-ink:#1D1A17;
  --fh-ink-80:rgba(29,26,23,.80);
  --fh-ink-55:rgba(29,26,23,.55);
  --fh-ink-12:rgba(29,26,23,.12);
  --fh-charcoal:#2A221D;
  --fh-cream:#F8F2E7;
  --fh-surface:#FFFDF8;
  --fh-sand:#EFE5D3;
  --fh-champagne:#F3EADB;
  --fh-beige:#E2D3B8;
  /* Dark bands are maroon, never black: the one colour Fahus owns. */
  --fh-umber:#4A0F1C;
  --fh-border:#E5D8C3;
  --fh-muted:#6F655B;
  --fh-gold:#A8823A;
  --fh-earth:#7D6A3E;

  /* Gold splits by job. #A8823A reads 3.2:1 on ivory, so it decorates and
     sets large type only; anything small that has to be read uses the deeper
     gold at 4.7:1, and the light gold is for maroon and dark grounds (8.4:1). */
  --fh-gold-ink:#7D6A3E;
  --fh-gold-light:#D9BD7A;
  --fh-gold-soft:rgba(168,130,58,.14);
  --fh-gold-line:rgba(168,130,58,.38);

  --fh-sale:#8E1B2B;
  --fh-sale-light:#E0707F;
  /* Free shipping, COD and in-stock cues: temple green, 8.7:1 on ivory. */
  --fh-free:#1E4D3B;
  --fh-free-soft:rgba(30,77,59,.09);
  --fh-focus:#7D6A3E;

  /* Footer ground: the deepest maroon. Ivory reads about 15:1 on it and the
     light gold about 9:1. */
  --fh-espresso:#3A0B16;
  --fh-espresso-lift:#47101D;

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

  /* Derived tones */
  --fh-ink-hover:#332A24;
  --fh-ink-lift:#26201C;
  --fh-umber-lift:#5A1424;
  --fh-umber-deep:#36091A;
  --fh-sand-deep:#E6D9C2;
  --fh-beige-deep:#D4C2A2;
  --fh-white:#FFFFFF;

  /* Type */
  --fh-font-heading:'Libre Caslon Display','Libre Caslon Text',Georgia,'Times New Roman',serif;
  --fh-font-body:'Mukta','Segoe UI',system-ui,-apple-system,sans-serif;
  /* Prices share the body face: Mukta has its own rupee sign and lining
     figures, so no separate price font is needed. */
  --fh-font-price:'Mukta','Segoe UI',system-ui,sans-serif;
  --fh-font-te:'Anek Telugu','Noto Sans Telugu','Nirmala UI','Gautami',sans-serif;

  /* Caslon Display is a narrow, high contrast face, so display sizes run a
     step larger than a heavier serif would need, set in mixed case. */
  --fh-fs-hero:clamp(2.25rem,1.1rem + 4.6vw,5.125rem);
  --fh-fs-h1:clamp(2.25rem,1.55rem + 2.9vw,3.625rem);
  --fh-fs-h2:clamp(2rem,1.45rem + 2.3vw,3.25rem);
  --fh-fs-h3:clamp(1.375rem,1.15rem + .95vw,1.875rem);
  --fh-fs-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --fh-fs-body:clamp(.9688rem,.94rem + .12vw,1.0313rem);
  --fh-fs-sm:.9063rem;
  --fh-fs-xs:.8438rem;
  /* The smallest step: labels, the top bar, badges. Mukta stays legible
     here because of its large x-height. */
  --fh-fs-micro:.75rem;

  --fh-lh-display:1.04;
  --fh-lh-head:1.1;
  --fh-lh-body:1.65;
  --fh-track-micro:.2em;
  --fh-track-nav:.08em;
  --fh-track-btn:.16em;

  /* Space */
  --fh-space-xs:8px;
  --fh-space-sm:16px;
  --fh-space-md:28px;
  --fh-space-lg:56px;
  --fh-space-xl:96px;
  --fh-space-2xl:140px;
  --fh-section:clamp(40px,5vw,76px);

  /* Frame */
  --fh-container:1440px;
  --fh-pdp-max:1320px;
  --fh-gutter:20px;
  /* Square corners throughout, like a jewellery box. The only curve Fahus
     uses is the temple arch, kept for photographs that frame a person or a
     piece: --fh-arch. */
  --fh-radius:0px;
  --fh-radius-btn:0px;
  --fh-radius-buy:2px;
  --fh-radius-card:2px;
  --fh-radius-media:2px;
  /* Percentages only: mixing a px radius in would make the browser scale
     every corner down together and flatten the arch. */
  --fh-arch:50% 50% 2px 2px / 36% 36% 2px 2px;
  --fh-hairline:1px solid var(--fh-border);
  --fh-goldline:1px solid var(--fh-gold-line);

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

  /* Chrome. The header is two rows on desktop: brand row and menu row. The
     two heights below are the brand row's; the menu row is fixed. */
  --fh-topbar-h:36px;
  --fh-header-h:88px;
  --fh-header-h-compact:66px;
  --fh-navrow-h:48px;
  --fh-shadow-float:0 24px 60px rgba(58,11,22,.14);
}

@media (min-width:1024px){
  :root{ --fh-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;}
/* The WebP wrapper from fh_picture(). It is a source switch, not a box, so the
   img inside sizes against its own container exactly as it did unwrapped. */
.fh-pic{display:contents;}
/* A picture parked by fh_hold_media() until the hero has painted. With no src
   the browser would print the alt text in the empty frame instead. */
img[data-fh-held-src]{visibility:hidden;}
: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(--fh-cream);
  color:var(--fh-ink);
  font-family:var(--fh-font-body);
  font-size:var(--fh-fs-body);
  line-height:var(--fh-lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

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

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,.fh-display{
  font-family:var(--fh-font-heading);
  /* Libre Caslon Display has one weight. Anything heavier would be faked. */
  font-weight:400;
  line-height:var(--fh-lh-head);
  letter-spacing:0;
  color:var(--fh-ink);
  text-wrap:balance;
}
h1,h2,.fh-h1,.fh-h2{color:var(--fh-maroon);}
h1,.fh-h1{font-size:var(--fh-fs-h1);line-height:var(--fh-lh-display);}
h2,.fh-h2{font-size:var(--fh-fs-h2);}
h3,.fh-h3{font-size:var(--fh-fs-h3);}
h4{font-size:1.125rem;}

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

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

/* Small wide-tracked label. Rationed: at most one per three sections. */
.fh-eyebrow{
  display:block;
  font-family:var(--fh-font-body);
  /* 1rem literal, not --fh-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:.8125rem;
  font-weight:600;
  letter-spacing:var(--fh-track-micro);
  text-transform:uppercase;
  color:var(--fh-gold-ink);
  margin-bottom:var(--fh-space-sm);
}
/* The everyday Telugu word beside an English label: వడ్డాణం, బుట్టలు. */
.fh-te{font-family:var(--fh-font-te);font-weight:500;letter-spacing:0;text-transform:none;color:var(--fh-gold-ink);}
.fh-eyebrow--onDark{color:var(--fh-gold-light);}

/* The Fahus ornament: two gold hairlines meeting at a kemp-stone lozenge. */
.fh-rule{
  --fh-rule-c:var(--fh-gold);
  position:relative;display:block;
  width:76px;height:9px;border:0;
  background:
    linear-gradient(var(--fh-rule-c),var(--fh-rule-c)) left center/30px 1px no-repeat,
    linear-gradient(var(--fh-rule-c),var(--fh-rule-c)) right center/30px 1px no-repeat;
  margin:0 0 var(--fh-space-md);
}
.fh-rule::after{
  content:"";position:absolute;left:50%;top:50%;
  width:6px;height:6px;background:var(--fh-rule-c);
  transform:translate(-50%,-50%) rotate(45deg);
}
.fh-rule--center{margin-left:auto;margin-right:auto;}
.fh-rule--onDark{--fh-rule-c:var(--fh-gold-light);}

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

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

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

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

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

.fh-stack > * + *{margin-top:var(--fh-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.
 */
.fh-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
   -------------------------------------------------------------------------- */
.fh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 30px;
  font-family:var(--fh-font-body);
  font-size:.8125rem;font-weight:600;line-height:1;
  letter-spacing:var(--fh-track-btn);text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--fh-radius-btn);
  background:var(--fh-maroon);color:var(--fh-cream);
  cursor:pointer;text-align:center;
  transition:background var(--fh-t) var(--fh-ease),color var(--fh-t) var(--fh-ease),border-color var(--fh-t) var(--fh-ease),transform var(--fh-t-fast) var(--fh-ease);
}
.fh-btn:hover{background:var(--fh-maroon-deep);}
.fh-btn:active{transform:translateY(1px);}

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

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

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

.fh-btn--outlineDark{background:transparent;color:var(--fh-cream);border-color:rgba(248,242,231,.5);}
.fh-btn--outlineDark:hover{border-color:var(--fh-gold-light);color:var(--fh-gold-light);background:transparent;}

/* Filled temple gold with ink text (5:1). Works on ivory and on maroon. */
.fh-btn--gold{background:var(--fh-gold);color:var(--fh-ink);border-color:var(--fh-gold);}
.fh-btn--gold:hover{background:var(--fh-earth);color:var(--fh-white);border-color:var(--fh-earth);}

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

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

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

/* Forms */
.fh-field{display:block;margin-bottom:var(--fh-space-sm);}
.fh-label{
  display:block;font-size:var(--fh-fs-micro);font-weight:500;
  letter-spacing:var(--fh-track-micro);text-transform:uppercase;
  color:var(--fh-muted);margin-bottom:8px;
}
.fh-input,.fh-select,.fh-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(--fh-font-body);font-size:var(--fh-fs-sm);
  color:var(--fh-ink);background:var(--fh-surface);
  border:1px solid var(--fh-border);border-radius:var(--fh-radius);
  transition:border-color var(--fh-t) var(--fh-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='%231D1A17' 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(--fh-gold);}
::placeholder{color:var(--fh-muted);opacity:1;}

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

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

/* --------------------------------------------------------------------------
   7. Header
   Announcement bar, brand row and menu row (Fahus, 2026-10-25): search at the
   start, the Jhumka wordmark on the axis, account, wishlist and bag at the
   end, and the menu under a gold hairline. One row on a phone.
   -------------------------------------------------------------------------- */
.fh-topbar{
  background:var(--fh-maroon);
  color:rgba(248,242,231,.92);
  font-size:var(--fh-fs-micro);
  letter-spacing:.05em;
}
.fh-topbar__inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:16px;
  min-height:var(--fh-topbar-h);
}
.fh-topbar__side{display:flex;align-items:center;gap:24px;min-width:0;}
.fh-topbar__side--end{justify-content:flex-end;}
.fh-topbar__link{
  display:inline-flex;align-items:center;gap:7px;
  padding:0;border:0;background:none;cursor:pointer;
  color:inherit;font:inherit;letter-spacing:inherit;white-space:nowrap;
  transition:color var(--fh-t) var(--fh-ease);
}
.fh-topbar__link svg{color:var(--fh-gold-light);flex:0 0 auto;}
.fh-topbar__link:hover{color:var(--fh-gold-light);}
.fh-topbar__ticker{display:grid;justify-items:center;min-width:0;}
.fh-topbar__line{
  grid-area:1/1;display:flex;align-items:center;gap:10px;
  margin:0;max-width:none;white-space:nowrap;font-weight:500;
}
.fh-topbar__gem{width:5px;height:5px;flex:0 0 auto;background:var(--fh-gold-light);transform:rotate(45deg);}
.fh-topbar__ticker.is-rotating .fh-topbar__line{
  opacity:0;
  animation:fh-tick-4 calc(var(--fh-lines) * 4.5s) var(--fh-ease) infinite both;
  animation-delay:calc(var(--fh-i) * 4.5s);
}
.fh-topbar__ticker.is-rotating[style*="--fh-lines:2"] .fh-topbar__line{animation-name:fh-tick-2;}
.fh-topbar__ticker.is-rotating[style*="--fh-lines:3"] .fh-topbar__line{animation-name:fh-tick-3;}
.fh-topbar__ticker.is-rotating[style*="--fh-lines:5"] .fh-topbar__line{animation-name:fh-tick-5;}
@keyframes fh-tick-2{0%{opacity:0;transform:translateY(5px);}4%,46%{opacity:1;transform:none;}50%,100%{opacity:0;transform:translateY(-5px);}}
@keyframes fh-tick-3{0%{opacity:0;transform:translateY(5px);}3%,30%{opacity:1;transform:none;}33.3%,100%{opacity:0;transform:translateY(-5px);}}
@keyframes fh-tick-4{0%{opacity:0;transform:translateY(5px);}2%,22%{opacity:1;transform:none;}25%,100%{opacity:0;transform:translateY(-5px);}}
@keyframes fh-tick-5{0%{opacity:0;transform:translateY(5px);}2%,18%{opacity:1;transform:none;}20%,100%{opacity:0;transform:translateY(-5px);}}
@media (prefers-reduced-motion:reduce){
  .fh-topbar__ticker.is-rotating .fh-topbar__line{animation:none;opacity:0;}
  .fh-topbar__ticker.is-rotating .fh-topbar__line:first-child{opacity:1;}
}
@media (max-width:860px){
  .fh-topbar__inner{grid-template-columns:minmax(0,1fr);}
  .fh-topbar__side{display:none;}
  .fh-topbar{font-size:.71875rem;letter-spacing:.04em;}
}

.fh-header{
  position:sticky;top:0;z-index:900;
  background:var(--fh-cream);
  margin-bottom:0;
  transition:box-shadow var(--fh-t) var(--fh-ease),margin-bottom var(--fh-t) var(--fh-ease);
}
/* The header is sticky and so still in flow; the margin gives back exactly
   what the brand row gives up when it compacts, so the page never jumps. */
.fh-header.is-compact{
  margin-bottom:calc(var(--fh-header-h) - var(--fh-header-h-compact));
  box-shadow:0 12px 30px -20px rgba(58,11,22,.40);
}
/* Wordmark left, search centred in the free space, icons right. */
.fh-header__inner{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(20px,3vw,48px);
  min-height:var(--fh-header-h);
  transition:min-height var(--fh-t) var(--fh-ease);
}
.fh-header.is-compact .fh-header__inner{min-height:var(--fh-header-h-compact);}

.fh-burger{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--fh-ink);
}
.fh-burger svg{width:22px;height:22px;}

/* The search field: softly rounded corners, a maroon go button and suggestions
   that turn over one word at a time. */
.fh-searchpill{
  justify-self:center;
  display:flex;align-items:center;gap:12px;
  width:min(640px,100%);height:52px;padding:0 6px 0 20px;
  background:var(--fh-surface);
  border:1px solid var(--fh-border);border-radius:12px;
  box-shadow:0 8px 22px -18px rgba(58,11,22,.55);
  color:var(--fh-muted);font-size:var(--fh-fs-sm);text-align:left;cursor:text;
  transition:border-color var(--fh-t) var(--fh-ease),box-shadow var(--fh-t) var(--fh-ease);
}
.fh-searchpill:hover,
.fh-searchpill:focus-visible{
  outline:none;border-color:var(--fh-gold);
  box-shadow:0 0 0 4px var(--fh-gold-soft),0 12px 26px -18px rgba(58,11,22,.6);
}
.fh-searchpill__icon{display:grid;place-items:center;flex:0 0 auto;color:var(--fh-maroon);}
.fh-searchpill__text{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;}
.fh-searchpill__words{display:block;height:1.5em;line-height:1.5em;overflow:hidden;color:var(--fh-maroon);font-weight:500;}
.fh-searchpill__words > span{display:block;height:1.5em;animation:fh-search-words 15s var(--fh-ease) infinite;}
@keyframes fh-search-words{
  0%,16%{transform:translateY(0);}
  20%,36%{transform:translateY(-100%);}
  40%,56%{transform:translateY(-200%);}
  60%,76%{transform:translateY(-300%);}
  80%,96%{transform:translateY(-400%);}
  100%{transform:translateY(-500%);}
}
.fh-searchpill__go{
  display:grid;place-items:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:9px;
  background:var(--fh-maroon);color:var(--fh-cream);
  transition:background var(--fh-t) var(--fh-ease),transform var(--fh-t) var(--fh-ease);
}
.fh-searchpill:hover .fh-searchpill__go{background:var(--fh-maroon-deep);transform:translateX(2px);}
@media (prefers-reduced-motion:reduce){ .fh-searchpill__words > span{animation:none;} }

.fh-brand{justify-self:start;display:flex;align-items:center;}
.fh-brand img{width:auto;height:46px;transition:height var(--fh-t) var(--fh-ease);}
.fh-header.is-compact .fh-brand img{height:36px;}

.fh-header__actions{justify-self:end;display:flex;align-items:center;gap:4px;}
/* The pill does the searching on a desktop; the icon returns on a phone. */
.fh-header__actions [data-fh-open="search"]{display:none;}
.fh-iconbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--fh-ink);
  transition:color var(--fh-t) var(--fh-ease);
}
.fh-iconbtn:hover{color:var(--fh-maroon);}
.fh-iconbtn svg{width:21px;height:21px;}
.fh-iconbtn__count{
  position:absolute;top:4px;right:1px;
  min-width:18px;height:18px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--fh-maroon);color:var(--fh-cream);
  font-size:10.5px;font-weight:600;line-height:1;
  border-radius:9px;
  box-shadow:0 0 0 2px var(--fh-cream);
  font-variant-numeric:tabular-nums;
}
.fh-iconbtn__count[hidden]{display:none;}
/* A cached page's count belongs to whoever loaded it first; app.js shows it
   again once it has a figure it can stand behind. */
html[data-fh-cart] .fh-iconbtn__count{display:none;}

/* Menu row */
.fh-header__navrow{
  position:relative;
  background:var(--fh-cream);
  border-top:1px solid var(--fh-gold-line);
  border-bottom:var(--fh-hairline);
}
.fh-nav__list{
  display:flex;align-items:stretch;justify-content:center;
  gap:clamp(20px,2.7vw,46px);
  min-height:var(--fh-navrow-h);
}
.fh-nav__item{display:flex;}
.fh-nav__link{
  position:relative;display:flex;align-items:center;
  font-size:.8125rem;font-weight:600;
  letter-spacing:var(--fh-track-nav);text-transform:uppercase;
  color:var(--fh-ink);white-space:nowrap;
  transition:color var(--fh-t) var(--fh-ease);
}
/* A kemp-stone lozenge sits on the row's rule under the open item. */
.fh-nav__link::after{
  content:"";position:absolute;left:50%;bottom:-1px;
  width:7px;height:7px;background:var(--fh-gold);
  transform:translate(-50%,50%) rotate(45deg) scale(0);
  transition:transform var(--fh-t) var(--fh-ease);
}
.fh-nav__item:hover > .fh-nav__link,
.fh-nav__item.is-open > .fh-nav__link,
.fh-nav__item.is-current > .fh-nav__link{color:var(--fh-maroon);}
.fh-nav__item:hover > .fh-nav__link::after,
.fh-nav__item.is-open > .fh-nav__link::after,
.fh-nav__item.is-current > .fh-nav__link::after{transform:translate(-50%,50%) rotate(45deg) scale(1);}
.fh-nav__link--sale,
.fh-nav__item:hover > .fh-nav__link--sale{color:var(--fh-sale);}
.fh-nav__item:hover > .fh-nav__link--sale::after,
.fh-nav__item.is-current > .fh-nav__link--sale::after{background:var(--fh-sale);}

/* Medallion: a category's photograph, or its jewellery icon, set in a round
   bezel - a gold hairline, a gap of the ground colour, a second hairline. */
.fh-medallion{
  --fh-med:96px;
  --fh-med-gap:var(--fh-cream);
  position:relative;display:grid;place-items:center;flex:0 0 auto;
  width:var(--fh-med);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 36%,var(--fh-surface) 0,var(--fh-sand) 100%);
  color:var(--fh-gold);
  box-shadow:inset 0 0 0 1px var(--fh-gold-line),0 0 0 4px var(--fh-med-gap),0 0 0 5px var(--fh-gold-line);
  transition:transform var(--fh-t) var(--fh-ease),box-shadow var(--fh-t) var(--fh-ease),color var(--fh-t) var(--fh-ease);
}
.fh-medallion.has-image img{width:100%;height:100%;max-width:none;object-fit:cover;}
.fh-medallion .fh-jicon{width:48%;height:48%;}
a:hover > .fh-medallion,
a:focus-visible > .fh-medallion{
  transform:translateY(-3px);color:var(--fh-maroon);
  box-shadow:inset 0 0 0 1px var(--fh-gold),0 0 0 4px var(--fh-med-gap),0 0 0 5px var(--fh-gold);
}
.fh-jicon{display:block;}

/* --------------------------------------------------------------------------
   Mega menu: the group, its sub-categories as medallions, its styles.
   -------------------------------------------------------------------------- */
.fh-mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--fh-surface);
  border-bottom:var(--fh-hairline);
  box-shadow:0 34px 50px -34px rgba(58,11,22,.32);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 200ms var(--fh-ease),transform 200ms var(--fh-ease),visibility 0s linear 200ms;
  z-index:899;
  max-height:calc(100vh - var(--fh-header-h) - var(--fh-navrow-h) - var(--fh-topbar-h));
  overflow-y:auto;overscroll-behavior:contain;
}
.fh-header.is-compact .fh-mega{max-height:calc(100vh - var(--fh-header-h-compact) - var(--fh-navrow-h));}
.fh-nav__item.is-open .fh-mega,
.fh-mega:hover{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
.fh-mega .fh-medallion{--fh-med:92px;--fh-med-gap:var(--fh-surface);}

.fh-mega__layout{
  display:grid;grid-template-columns:270px minmax(0,1fr) 190px;
  gap:48px;padding-block:34px 40px;
}
.fh-mega__intro{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding-right:36px;border-right:1px solid var(--fh-border);
}
.fh-mega__icon{color:var(--fh-gold);}
.fh-mega__te{font-size:1.0625rem;}
.fh-mega__title{font-family:var(--fh-font-heading);font-size:2rem;line-height:1.05;color:var(--fh-maroon);}
.fh-mega__blurb{margin:0 0 8px;font-size:var(--fh-fs-sm);color:var(--fh-muted);}
.fh-mega__tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:26px 18px;align-content:start;
}
.fh-mega__tile{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;}
.fh-mega__tilename{font-size:var(--fh-fs-sm);font-weight:500;line-height:1.3;color:var(--fh-ink);transition:color var(--fh-t) var(--fh-ease);}
.fh-mega__tile:hover .fh-mega__tilename{color:var(--fh-maroon);}
.fh-mega__colhead{
  display:block;margin-bottom:14px;
  font-size:var(--fh-fs-micro);font-weight:600;
  letter-spacing:var(--fh-track-micro);text-transform:uppercase;color:var(--fh-gold-ink);
}
.fh-mega__styles ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;}
.fh-mega__styles a{font-size:var(--fh-fs-sm);color:var(--fh-ink);transition:color var(--fh-t) var(--fh-ease);}
.fh-mega__styles a:hover{color:var(--fh-maroon);}

@media (min-width:1180px) and (max-width:1365px){
  .fh-nav__list{gap:24px;}
  .fh-nav__link{font-size:.75rem;letter-spacing:.06em;}
  .fh-mega__layout{grid-template-columns:230px minmax(0,1fr) 170px;gap:32px;}
}

/* One breakpoint for the whole header: below it the drawer drives navigation. */
@media (max-width:1179px){
  :root{--fh-header-h:64px;--fh-header-h-compact:58px;}
  .fh-header{border-bottom:var(--fh-hairline);}
  .fh-header__navrow{display:none;}
  .fh-header__inner{grid-template-columns:auto minmax(0,1fr) auto;gap:4px;}
  .fh-burger{display:inline-flex;margin-left:-10px;}
  .fh-searchpill{display:none;}
  .fh-brand{justify-self:start;}
  .fh-brand img,
  .fh-header.is-compact .fh-brand img{height:32px;}
  .fh-header__actions{margin-right:-10px;gap:0;}
  .fh-header__actions [data-fh-open="search"]{display:inline-flex;}
  .fh-header__actions .fh-iconbtn--account,
  .fh-header__actions .fh-iconbtn--wishlist{display:none;}
}
@media (max-width:420px){
  .fh-brand img,
  .fh-header.is-compact .fh-brand img{height:28px;}
}

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

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

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

.fh-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--fh-space-sm);padding:22px 24px;border-bottom:var(--fh-hairline);
  flex:0 0 auto;
}
.fh-drawer__title{
  font-family:var(--fh-font-heading);font-size:1.25rem;font-weight:500;
  letter-spacing:.01em;text-transform:none;margin:0;
}
.fh-drawer__count{
  margin-left:8px;font-family:var(--fh-font-body);
  font-size:var(--fh-fs-xs);font-weight:400;color:var(--fh-muted);
}
.fh-drawer__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;min-height:0;}
.fh-drawer__foot{
  flex:0 0 auto;padding:22px 24px;
  border-top:var(--fh-hairline);background:var(--fh-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.
 */
.fh-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.

   Redesigned 2026-10-16 after the client turned down the text-only list.
   The home panel is three visibly different kinds of thing - department cards
   with their photograph, a row of collection tiles, and a grid of help and
   account tiles - on a warm ground, so the eye can find each at a glance.
   Inside a department: a photographic "Shop all" banner, then each group as
   its own card, its categories as rows, and a category's types behind a
   disclosure on its row so nothing in the catalogue is missing from the menu
   and nothing makes the panel longer until it is asked for.

   The stack itself is unchanged: a tap replaces the screen, the drawer title
   says where you are, one back button goes up.
   -------------------------------------------------------------------------- */

.fh-drawer--menu .fh-drawer__panel{width:min(440px,calc(100vw - 32px));background:var(--fh-cream);}

.fh-mnav__head{gap:4px;padding:14px 12px 14px 18px;background:var(--fh-surface);}
.fh-mnav__head .fh-drawer__title{
  flex:1 1 auto;min-width:0;font-size:1.125rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fh-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(--fh-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. */
.fh-mnav__back[hidden]{display:none;}
.fh-mnav__chev.fh-mnav__chev--back{transform:rotate(90deg);}

/* The stack. Panels are absolute inside it, so every level keeps its own
   scroll position. */
.fh-mnav{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;}
.fh-mnav__panel{
  position:absolute;inset:0;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:22px;background:var(--fh-cream);
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--fh-t) var(--fh-ease),visibility 0s linear var(--fh-t);
}
.fh-mnav__panel:focus{outline:none;}
.fh-mnav__panel.is-active{
  transform:none;visibility:visible;
  transition:transform var(--fh-t) var(--fh-ease),visibility 0s;
}
.fh-mnav__panel.is-behind{
  transform:translateX(-24%);visibility:visible;
  transition:transform var(--fh-t) var(--fh-ease),visibility 0s;
}

.fh-mnav__list,.fh-mnav__colls,.fh-mnav__tiles,.fh-mnav__chips{list-style:none;margin:0;padding:0;}
.fh-mnav__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.fh-mnav__name{
  display:block;font-size:.9375rem;font-weight:500;
  letter-spacing:.01em;line-height:1.3;color:var(--fh-ink);
}
.fh-mnav__hint{
  display:block;margin-top:3px;
  font-size:.71875rem;font-weight:400;color:var(--fh-muted);
  letter-spacing:.005em;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fh-mnav__meta{
  display:inline-block;margin-top:6px;align-self:flex-start;
  padding:2px 7px;border-radius:5px;
  background:var(--fh-gold-soft);color:var(--fh-earth);
  font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;
}
.fh-mnav__chev{flex:0 0 auto;color:var(--fh-muted);transform:rotate(-90deg);}

.fh-mnav__label{
  margin:0;padding:20px 18px 10px;
  font-size:.625rem;font-weight:600;letter-spacing:var(--fh-track-micro);
  text-transform:uppercase;color:var(--fh-earth);
}
.fh-mnav__label--first{padding-top:4px;}

/* Search hands over to the search overlay; this is the way in, not a field. */
.fh-mnav__search{padding:16px 16px 4px;}
.fh-mnav__searchbtn{
  width:100%;display:flex;align-items:center;gap:10px;
  min-height:48px;padding:0 15px;
  background:var(--fh-surface);border:1px solid var(--fh-border);border-radius:10px;
  box-shadow:0 6px 18px -14px rgba(21,18,14,.45);
  font-family:var(--fh-font-body);font-size:var(--fh-fs-sm);
  color:var(--fh-muted);text-align:left;cursor:pointer;
}
.fh-mnav__searchbtn svg{flex:0 0 auto;color:var(--fh-earth);}
.fh-mnav__searchbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fh-mnav__searchbtn:hover{border-color:var(--fh-gold-line);color:var(--fh-ink);}

/* ---- Department cards ---- */
.fh-mnav__depts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:0 16px;}
.fh-mnav__depts > li,.fh-mnav__tiles > li,.fh-mnav__colls > li{min-width:0;}
.fh-mnav__dept{
  display:flex;align-items:center;gap:14px;
  min-height:88px;padding:10px 12px 10px 10px;
  background:var(--fh-surface);
  border:1px solid var(--fh-border);border-radius:14px;
  box-shadow:0 10px 26px -22px rgba(21,18,14,.55);
  color:var(--fh-ink);
  transition:border-color var(--fh-t-fast) var(--fh-ease),box-shadow var(--fh-t-fast) var(--fh-ease),transform var(--fh-t-fast) var(--fh-ease);
}
.fh-mnav__dept:hover,.fh-mnav__dept:focus-visible{border-color:var(--fh-gold-line);box-shadow:0 14px 30px -22px rgba(21,18,14,.6);}
.fh-mnav__dept:active{transform:scale(.985);}
.fh-mnav__dept.is-current{border-color:var(--fh-gold);box-shadow:inset 0 0 0 1px var(--fh-gold);}
.fh-mnav__deptimg{
  flex:0 0 auto;position:relative;width:66px;height:66px;
  border-radius:10px;overflow:hidden;
  background:linear-gradient(145deg,var(--fh-champagne),var(--fh-sand));
}
/* Category photographs are centred product shots, so the default centre crop suits them. */
.fh-mnav .fh-mnav__deptimg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;}
.fh-mnav__dept .fh-mnav__name{font-family:var(--fh-font-heading);font-size:1.1875rem;font-weight:500;letter-spacing:.005em;}
.fh-mnav__go{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fh-cream);color:var(--fh-ink);
  transition:background var(--fh-t-fast) var(--fh-ease),color var(--fh-t-fast) var(--fh-ease);
}
.fh-mnav__dept:hover .fh-mnav__go{background:var(--fh-maroon);color:var(--fh-cream);}

/* ---- Collections: three tiles in a row ---- */
.fh-mnav__colls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 16px 0;}
.fh-mnav__coll{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:76px;padding:10px 6px;text-align:center;
  background:var(--fh-surface);border:1px solid var(--fh-border);border-radius:12px;
  font-size:.75rem;font-weight:500;line-height:1.25;color:var(--fh-ink);
  transition:border-color var(--fh-t-fast) var(--fh-ease),background var(--fh-t-fast) var(--fh-ease);
}
.fh-mnav__coll svg{color:var(--fh-earth);}
.fh-mnav__coll:hover{border-color:var(--fh-gold-line);}
.fh-mnav__coll.is-current{border-color:var(--fh-gold);}
.fh-mnav__coll--sale{color:var(--fh-sale);background:#FDF4F2;border-color:rgba(190,40,23,.2);}
.fh-mnav__coll--sale svg{color:var(--fh-sale);}

/* ---- Help and account: a two column grid of icon tiles ---- */
.fh-mnav__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 16px;}
.fh-mnav__tiles > li:last-child:nth-child(odd){grid-column:1 / -1;}
.fh-mnav__tile{
  width:100%;display:flex;align-items:center;gap:10px;
  min-height:50px;padding:10px 12px;
  background:var(--fh-surface);border:1px solid var(--fh-border);border-radius:10px;
  font-family:var(--fh-font-body);font-size:.8125rem;font-weight:400;line-height:1.25;
  color:var(--fh-ink);text-align:left;cursor:pointer;
  transition:border-color var(--fh-t-fast) var(--fh-ease);
}
.fh-mnav__tile svg{flex:0 0 auto;color:var(--fh-earth);}
.fh-mnav__tile:hover{border-color:var(--fh-gold-line);}
/* The bulk order tile is a button, and the generic .fh-bulktrigger reset
   further down would otherwise strip its card. */
.fh-mnav__tiles .fh-mnav__tile.fh-bulktrigger{
  padding:10px 12px;background:var(--fh-surface);border:1px solid var(--fh-border);
  font-family:var(--fh-font-body);font-size:.8125rem;letter-spacing:normal;text-transform:none;color:var(--fh-ink);
}
.fh-mnav__tiles .fh-mnav__tile.fh-bulktrigger:hover{border-color:var(--fh-gold-line);}
.fh-mnav__tile span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* A prominent "Home" shortcut at the top of the drawer, so it is visible the
   moment the menu opens rather than buried in the help grid (client, 2026-10-21). */
.fh-mnav__colls--home{grid-template-columns:minmax(0,1fr);padding:6px 16px 6px;}
.fh-mnav__colls--home .fh-mnav__coll{flex-direction:row;justify-content:center;gap:10px;min-height:52px;}

/* Menu drawer header shows the brand logo on the home panel and the department
   name when drilled in (client, 2026-10-21). The title text is empty at the top
   level, so only the logo shows; drilling fills it and :has hides the logo. */
.fh-mnav__brand{flex:0 1 auto;display:inline-flex;align-items:center;min-width:0;}
.fh-mnav__brand .fh-brand{display:inline-flex;}
.fh-mnav__brand .fh-mnav__logo{display:block;width:auto;height:78px;}
.fh-mnav__head .fh-mnav__titletext:empty{display:none;}
.fh-mnav__head:has([data-fh-nav-back]:not([hidden])) .fh-mnav__brand{display:none;}

/* Logout reads red in the drawer, matching the My Account menu's logout. */
.fh-mnav__tiles .fh-mnav__tile[href*="action=logout"]{color:var(--fh-sale);}
.fh-mnav__tiles .fh-mnav__tile[href*="action=logout"] svg{color:var(--fh-sale);}
.fh-mnav__tiles .fh-mnav__tile[href*="action=logout"]:hover{border-color:rgba(190,40,23,.3);background:rgba(190,40,23,.06);color:#9A1F11;}
.fh-mnav__tiles .fh-mnav__tile[href*="action=logout"]:hover svg{color:#9A1F11;}

/* ---- Inside a department ---- */
.fh-mnav__top{padding:16px 16px 6px;}
.fh-mnav__banner{
  position:relative;display:flex;align-items:flex-end;
  min-height:112px;padding:16px 18px;overflow:hidden;
  border-radius:14px;background:var(--fh-maroon);color:var(--fh-cream);isolation:isolate;
}
.fh-mnav__bannerimg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  transition:transform var(--fh-t-slow) var(--fh-ease);
}
.fh-mnav__banner::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(13,13,13,.82) 0%,rgba(13,13,13,.5) 55%,rgba(13,13,13,.12) 100%);
}
.fh-mnav__banner:hover .fh-mnav__bannerimg{transform:scale(1.04);}
.fh-mnav__bannertext{display:flex;flex-direction:column;gap:4px;}
.fh-mnav__bannerkicker{font-size:.625rem;font-weight:600;letter-spacing:var(--fh-track-micro);text-transform:uppercase;color:var(--fh-gold-light);}
.fh-mnav__bannertitle{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fh-font-heading);font-size:1.3125rem;font-weight:500;line-height:1.15;
}
.fh-mnav__bannertitle svg{flex:0 0 auto;}

.fh-mnav__section{
  margin:10px 16px 0;
  background:var(--fh-surface);border:1px solid var(--fh-border);border-radius:14px;
  overflow:hidden;
}
.fh-mnav__grouphead{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 14px 12px 16px;border-bottom:1px solid var(--fh-border);
  background:linear-gradient(180deg,#FBF8F1,var(--fh-surface));
}
.fh-mnav__groupname{
  font-size:.9375rem;font-weight:600;letter-spacing:.005em;color:var(--fh-ink);
}
.fh-mnav__grouphead.is-current .fh-mnav__groupname,
.fh-mnav__grouphead:hover .fh-mnav__groupname{color:var(--fh-gold-ink);}
.fh-mnav__groupall{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fh-gold-ink);
}
.fh-mnav__groupall svg{width:13px;height:13px;flex:0 0 auto;}

.fh-mnav__list--cats{padding:4px 0;}
.fh-mnav__cat + .fh-mnav__cat{border-top:1px solid rgba(226,218,202,.6);}
.fh-mnav__catrow{display:flex;align-items:stretch;}
.fh-mnav__row{
  display:flex;align-items:center;gap:12px;
  flex:1 1 auto;min-width:0;min-height:48px;padding:10px 16px;color:var(--fh-ink);
}
.fh-mnav__row--cat .fh-mnav__name{font-size:.875rem;font-weight:400;}
.fh-mnav__row:hover .fh-mnav__name,.fh-mnav__row:focus-visible .fh-mnav__name{color:var(--fh-gold-ink);}
.fh-mnav__row.is-current .fh-mnav__name{color:var(--fh-gold-ink);font-weight:500;}
.fh-mnav__row.is-current{box-shadow:inset 3px 0 0 var(--fh-gold-light);}
.fh-mnav__toggle{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:64px;padding:0 14px;margin:0;
  background:none;border:0;border-left:1px solid rgba(226,218,202,.6);
  color:var(--fh-muted);cursor:pointer;font-family:var(--fh-font-body);
}
.fh-mnav__count{font-size:.6875rem;font-variant-numeric:tabular-nums;}
.fh-mnav__toggle svg{transition:transform var(--fh-t) var(--fh-ease);}
.fh-mnav__toggle[aria-expanded="true"]{color:var(--fh-gold-ink);background:var(--fh-cream);}
.fh-mnav__toggle[aria-expanded="true"] .fh-mnav__plusv{opacity:0;}
.fh-mnav__toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.fh-mnav__subs{padding:4px 14px 14px 16px;background:var(--fh-cream);}
.fh-mnav__subs[hidden]{display:none;}
.fh-mnav__chips{display:flex;flex-wrap:wrap;gap:7px;}
.fh-mnav__chip{
  display:inline-flex;align-items:center;min-height:34px;padding:0 12px;
  background:var(--fh-surface);border:1px solid var(--fh-border);border-radius:8px;
  font-size:.75rem;line-height:1.2;color:var(--fh-ink);
  transition:border-color var(--fh-t-fast) var(--fh-ease),background var(--fh-t-fast) var(--fh-ease);
}
.fh-mnav__chip:hover{border-color:var(--fh-gold-line);}
.fh-mnav__chip--all{background:var(--fh-maroon);border-color:var(--fh-maroon);color:var(--fh-cream);font-weight:500;}
.fh-mnav__chip--all:hover{background:var(--fh-charcoal);border-color:var(--fh-charcoal);}
.fh-mnav__chip.is-current{border-color:var(--fh-gold);color:var(--fh-gold-ink);font-weight:500;}

.fh-mnav__ico{flex:0 0 auto;color:var(--fh-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. */
.fh-drawer--menu .fh-drawer__foot{padding:14px 18px 16px;}
/* .fh-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){
  .fh-mnav__panel{transition:visibility 0s;}
  .fh-mnav__panel.is-behind{transform:none;}
}

/* Sticky phone bar: Home, Categories, Wishlist, Bag, Account. */
.fh-mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:880;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--fh-surface);
  border-top:1px solid var(--fh-gold-line);
  box-shadow:0 -10px 24px -18px rgba(58,11,22,.35);
  padding-bottom:env(safe-area-inset-bottom);
}
.fh-mobilebar > a,
.fh-mobilebar > button{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 2px 8px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:10.5px;font-weight:500;letter-spacing:.04em;
  color:var(--fh-muted);
}
.fh-mobilebar > a[aria-current="page"]{color:var(--fh-maroon);}
.fh-mobilebar > a[aria-current="page"]::before{
  content:"";position:absolute;top:-1px;left:50%;width:6px;height:6px;
  background:var(--fh-gold);transform:translate(-50%,-50%) rotate(45deg);
}
.fh-mobilebar svg{width:20px;height:20px;}
.fh-mobilebar__icon{position:relative;display:block;}
.fh-mobilebar .fh-iconbtn__count{top:-6px;right:-10px;}
@media (min-width:861px){ .fh-mobilebar{display:none;} }
/* The bar grows by the home indicator inset on an iPhone, so the room kept
   for it under the footer has to grow with it. */
@media (max-width:860px){ body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px));} }
/* iOS rubber-bands the page past the footer and the fixed bar travels with it,
   so a hard pull at the bottom opened a tall cream gap under the bar that read
   as broken layout (client, 2026-10-17). The page has nothing past the footer
   to reveal. */
@media (max-width:860px){ html,body{overscroll-behavior-y:none;} }

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

/* --------------------------------------------------------------------------
   10. Product card (Fahus, 2026-10-25).
   Square photograph on warm white, round wishlist button, the bag button on
   the photograph's lower edge (a round icon on touch screens, a full bar on
   hover), then category, name, material line, price and rating.
   -------------------------------------------------------------------------- */
.fh-card{position:relative;display:flex;flex-direction:column;height:100%;}

.fh-card__frame{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:var(--fh-surface);
  border:1px solid var(--fh-border);
  margin-bottom:14px;
  transition:border-color var(--fh-t) var(--fh-ease),box-shadow var(--fh-t) var(--fh-ease);
}
.fh-card:hover .fh-card__frame{border-color:var(--fh-gold-line);box-shadow:0 18px 34px -24px rgba(58,11,22,.38);}
.fh-card__media{position:absolute;inset:0;display:block;}
.fh-card__media .fh-card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity var(--fh-t-slow) var(--fh-ease),transform 900ms var(--fh-ease);
}
.fh-card__img--alt{opacity:0;}
.fh-card:hover .fh-card__img--main{opacity:0;}
.fh-card:hover .fh-card__img--alt{opacity:1;}
.fh-card:hover .fh-card__img{transform:scale(1.05);}
/* With one photograph there is nothing to swap to, so it only zooms. */
.fh-card:hover .fh-card__media:not(:has(.fh-card__img--alt)) .fh-card__img--main{opacity:1;}

.fh-card__flags{
  position:absolute;top:10px;left:10px;z-index:2;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  pointer-events:none;
}
.fh-badge{
  font-family:var(--fh-font-body);
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 8px 4px;line-height:1;white-space:nowrap;
}
.fh-badge--off,
.fh-badge--sale{background:var(--fh-sale);color:var(--fh-cream);}
.fh-badge--new{background:var(--fh-green);color:var(--fh-cream);}
.fh-badge--best{background:var(--fh-gold);color:var(--fh-ink);}
.fh-badge--oos{background:var(--fh-charcoal);color:var(--fh-cream);}

.fh-card__wish{
  position:absolute;top:8px;right:8px;z-index:3;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,253,248,.94);border:1px solid var(--fh-border);cursor:pointer;color:var(--fh-ink);
  transition:background var(--fh-t) var(--fh-ease),color var(--fh-t) var(--fh-ease),transform var(--fh-t-fast) var(--fh-ease),border-color var(--fh-t) var(--fh-ease);
}
.fh-card__wish svg{width:16px;height:16px;}
.fh-card__wish:hover{color:var(--fh-maroon);border-color:var(--fh-gold-line);}
.fh-card__wish.is-active{color:var(--fh-sale);}
.fh-card__wish.is-active svg{fill:currentColor;}
.fh-card__wish.is-pulse{transform:scale(1.18);}

/* The bag button. */
.fh-card__add{
  position:absolute;z-index:3;right:8px;bottom:8px;
  width:40px;height:40px;min-height:0;padding:0;gap:8px;
  border-radius:50%;
  background:var(--fh-maroon);color:var(--fh-cream);
  font-size:.75rem;letter-spacing:.12em;
  box-shadow:0 8px 18px -10px rgba(58,11,22,.6);
}
.fh-card__add .fh-btn__label{display:none;}
.fh-btn__bag{width:17px;height:17px;flex:0 0 auto;}
.fh-btn__tick{width:0;opacity:0;flex:0 0 auto;transition:width var(--fh-t) var(--fh-ease),opacity var(--fh-t) var(--fh-ease);}
.fh-btn.is-done{background:var(--fh-green);color:var(--fh-cream);border-color:var(--fh-green);}
.fh-btn.is-done .fh-btn__tick{width:16px;opacity:1;}
.fh-btn.is-done .fh-btn__bag{display:none;}
.fh-btn.is-busy{opacity:.72;pointer-events:none;}
@media (hover:hover) and (min-width:900px){
  .fh-card__add{
    left:0;right:0;bottom:0;width:auto;height:46px;border-radius:0;box-shadow:none;
    transform:translateY(100%);
    transition:transform var(--fh-t) var(--fh-ease),background var(--fh-t) var(--fh-ease);
  }
  .fh-card__add .fh-btn__label{display:inline;}
  .fh-card:hover .fh-card__add,
  .fh-card__add:focus-visible,
  .fh-card__add.is-busy,
  .fh-card__add.is-done{transform:none;}
}

.fh-card__body{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;}
.fh-card__cat{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fh-gold-ink);
}
.fh-card__title{
  font-family:var(--fh-font-body);
  font-size:clamp(.9375rem,.91rem + .14vw,1.0313rem);
  font-weight:500;line-height:1.38;letter-spacing:0;color:var(--fh-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fh-card__title a:hover{color:var(--fh-maroon);}
.fh-card__material{margin:0;font-size:var(--fh-fs-xs);color:var(--fh-muted);}

.fh-card__meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:3px;}
.fh-card__price{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);font-weight:600;color:var(--fh-ink);
}
.fh-card__price del{color:var(--fh-muted);font-size:.8em;font-weight:400;text-decoration-thickness:1px;}
.fh-card__price ins{text-decoration:none;color:var(--fh-ink);}
.fh-card__rating{display:inline-flex;align-items:center;gap:4px;font-size:var(--fh-fs-xs);font-weight:600;color:var(--fh-ink);}
.fh-card__rating svg{width:12px;height:12px;color:var(--fh-gold);fill:currentColor;}
.fh-card__reviews{font-weight:400;color:var(--fh-muted);font-variant-numeric:tabular-nums;}
.fh-stars{display:inline-flex;gap:1px;color:var(--fh-border);}
.fh-stars svg.is-on{color:var(--fh-gold);fill:currentColor;}

.fh-card__note{display:inline-flex;align-items:center;gap:6px;margin:2px 0 0;font-size:var(--fh-fs-micro);font-weight:500;color:var(--fh-free);}
.fh-card__note--oos{color:var(--fh-muted);}
.fh-card.is-soldout .fh-card__img{filter:grayscale(.35);opacity:.8;}

/* Free shipping lines elsewhere (product page, bag, strips). */
.fh-freeship{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--fh-free);font-weight:500;font-size:var(--fh-fs-xs);line-height:1.3;}
.fh-freeship svg{flex:0 0 auto;}
.fh-freeship--box{display:flex;width:100%;padding:9px 12px;background:var(--fh-free-soft);}
.fh-freeship--box strong{font-weight:600;}

/* Every price on the site shares the body face with lining, tabular figures. */
.woocommerce-Price-amount,
.fh-card__price,.fh-cartline__price,.fh-pdp__price,.fh-buybar__price,
.fh-bag__total,.fh-bag__unit,.fh-sum__val,.fh-co-item__price,.fh-co-bar__total,
.fh-fprice__readout,.fh-upsell__price{
  font-family:var(--fh-font-price);
  font-variant-numeric:lining-nums tabular-nums;
}
.woocommerce-Price-currencySymbol{margin-right:.04em;}

/* The old below-card button, kept for templates that still print it. */
.fh-card__cta{margin-top:auto;padding-top:12px;}
.fh-card__cta .fh-btn{min-height:44px;font-size:.75rem;}

@media (hover:none){
  .fh-card:hover .fh-card__img{transform:none;}
  .fh-card:hover .fh-card__img--main{opacity:1;}
  .fh-card__img--alt{display:none;}
}
@media (max-width:560px){
  .fh-card__frame{margin-bottom:10px;}
  .fh-card__title{font-size:.875rem;}
  .fh-card__material{font-size:.78rem;}
  .fh-card__price{font-size:.98rem;}
  .fh-card__add{width:36px;height:36px;right:6px;bottom:6px;}
  .fh-card__wish{width:32px;height:32px;top:6px;right:6px;}
}

/* Product grid shared by home shelves, archives and search */
.fh-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,2.4vw,38px) clamp(12px,1.6vw,24px);
}
@media (min-width:640px){ .fh-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:1024px){ .fh-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
.fh-grid--short{justify-content:center;}
.fh-grid--of-1{grid-template-columns:minmax(0,320px);}
@media (min-width:640px){
  .fh-grid--of-2{grid-template-columns:repeat(2,minmax(0,320px));}
  .fh-grid--of-3{grid-template-columns:repeat(3,minmax(0,320px));}
}

/* --------------------------------------------------------------------------
   10b. Declared placeholder. Stands in for photography that has not been
   supplied: the Fahus monogram on a warm ground with a faint gold lattice.
   -------------------------------------------------------------------------- */
.fh-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(circle at 50% 50%,rgba(168,130,58,.14) 0 1px,transparent 1.4px) 0 0/16px 16px,
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.7),transparent 62%),
    var(--fh-sand);
}
.fh-ph--champagne{background-color:var(--fh-champagne);}
.fh-ph--beige{background-color:var(--fh-beige);}
.fh-ph--umber,.fh-ph--ink{background:radial-gradient(circle at 50% 50%,rgba(217,189,122,.16) 0 1px,transparent 1.4px) 0 0/16px 16px,var(--fh-umber);}
.fh-ph__mark{width:clamp(44px,22%,96px);height:auto;opacity:.55;}
.fh-ph__label{font-size:var(--fh-fs-micro);letter-spacing:var(--fh-track-micro);text-transform:uppercase;color:var(--fh-gold-ink);}
.fh-ph--umber .fh-ph__label,.fh-ph--ink .fh-ph__label{color:var(--fh-gold-light);}
.fh-ph--static{position:relative;aspect-ratio:1/1;}

/* --------------------------------------------------------------------------
   10c. Cart drawer lines
   -------------------------------------------------------------------------- */
.fh-cartlist{padding:4px 24px 24px;}

/* Tighten the bag's own top and bottom spacing to ~6px (client, 2026-10-21). */
[data-fh-drawer="cart"] .fh-drawer__head{padding-top:6px;padding-bottom:6px;}
[data-fh-drawer="cart"] .fh-drawer__foot{padding-bottom:6px;}
.fh-cartline{
  display:grid;grid-template-columns:78px 1fr 28px;gap:14px;
  padding:18px 0;border-bottom:var(--fh-hairline);align-items:start;
  transition:opacity var(--fh-t) var(--fh-ease);
}
.fh-cartline:last-child{border-bottom:0;}
.fh-cartline__media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--fh-sand);
  border-radius:calc(var(--fh-radius-card) - 4px);
}
/* Top anchored. The thumbnail is fh-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. */
.fh-cartline__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
}
.fh-cartline__body{min-width:0;}
.fh-cartline__title{font-family:var(--fh-font-body);font-size:var(--fh-fs-sm);font-weight:400;line-height:1.4;}
.fh-cartline__meta{font-size:var(--fh-fs-xs);color:var(--fh-muted);margin:5px 0 0;max-width:none;}
/* Stepper on the left, line total on the right, both on the same baseline. */
.fh-cartline__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:12px;
}
.fh-cartline__price{
  font-size:var(--fh-fs-sm);font-weight:600;color:var(--fh-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fh-cartline__remove{
  width:28px;height:28px;border:0;background:none;cursor:pointer;color:var(--fh-muted);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  transition:color var(--fh-t) var(--fh-ease),background var(--fh-t) var(--fh-ease);
}
.fh-cartline__remove:hover{color:var(--fh-sale);background:var(--fh-cream);}

/* ---- Quantity stepper ---- */
.fh-qty{
  display:inline-flex;align-items:center;
  border:1px solid var(--fh-border);
  border-radius:var(--fh-radius-btn);
  background:var(--fh-surface);
  overflow:hidden;
}
.fh-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(--fh-ink);
  transition:background var(--fh-t) var(--fh-ease),color var(--fh-t) var(--fh-ease);
}
.fh-qty__btn:hover{background:var(--fh-cream);}
/* The minus becomes a delete at a quantity of one, so it warns like one. */
.fh-qty__btn[data-fh-qty-step='-1']:hover{color:var(--fh-sale);}
.fh-qty__value{
  min-width:26px;text-align:center;
  font-size:var(--fh-fs-sm);font-weight:500;
  font-variant-numeric:tabular-nums;
}
.fh-cartline.is-busy,
[data-fh-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){
  .fh-qty__btn{width:38px;height:38px;}
  .fh-qty__value{min-width:30px;}
  .fh-cartline__remove{width:32px;height:32px;}
}

.fh-cartsum{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:var(--fh-fs-sm);font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;
}
.fh-cartsum strong{
  font-family:var(--fh-font-body);font-size:1.375rem;font-weight:600;
  letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;
}
.fh-cartsum__note{font-size:var(--fh-fs-xs);color:var(--fh-muted);margin:8px 0 18px;max-width:none;line-height:1.5;}
/* View cart, then checkout. Both full width, stacked. */
.fh-cartsum__ship{margin-top:12px;}
.fh-cartsum__actions{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
/* 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. */
.fh-btn#btn-1cc,.fh-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.
   -------------------------------------------------------------------------- */
.fh-shead{margin-bottom:clamp(28px,3.4vw,46px);}
.fh-shead--center{text-align:center;}
.fh-shead__title{
  font-size:var(--fh-fs-h2);line-height:1.06;
  text-transform:none;letter-spacing:0;
}
.fh-shead__flourish{
  display:block;color:var(--fh-gold);margin-top:14px;
}
.fh-shead--center .fh-shead__flourish svg{margin-inline:auto;}
.fh-shead__lead{
  font-size:var(--fh-fs-lead);font-weight:300;line-height:1.55;
  color:var(--fh-muted);margin-top:14px;max-width:56ch;
}
.fh-shead--center .fh-shead__lead{margin-inline:auto;}
.fh-shead--dark .fh-shead__title{color:var(--fh-cream);}
.fh-shead--dark .fh-shead__lead{color:rgba(245,242,234,.72);}
.fh-shead--dark .fh-shead__flourish{color:var(--fh-gold);}

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

.fh-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.
   -------------------------------------------------------------------------- */
.fh-servicestrip{
  background:var(--fh-sand);
  border-bottom:1px solid var(--fh-border);
}
.fh-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. */
  --fh-strip-pad:clamp(12px,1.5vw,22px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-inline:calc(var(--fh-strip-pad) * -1);
}
@media (min-width:900px){
  .fh-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.
 */
.fh-servicestrip__item{
  display:flex;align-items:center;justify-content:flex-start;gap:14px;
  padding:20px var(--fh-strip-pad);min-width:0;
}
.fh-servicestrip__item + .fh-servicestrip__item{
  box-shadow:-1px 0 0 var(--fh-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. */
/* The fourth cell needs both hairlines. It used to lose its top one: the
   "odd + item" rule that draws the vertical divider is (0,3,0) and outranked
   the (0,2,0) nth-child(4) rule meant to add the horizontal, so on a phone the
   line between the rows stopped halfway across. */
@media (max-width:899px){
  .fh-servicestrip__row > .fh-servicestrip__item{box-shadow:none;}
  .fh-servicestrip__row > .fh-servicestrip__item:nth-child(even){box-shadow:-1px 0 0 var(--fh-border);}
  .fh-servicestrip__row > .fh-servicestrip__item:nth-child(n+3){box-shadow:0 -1px 0 var(--fh-border);}
  .fh-servicestrip__row > .fh-servicestrip__item:nth-child(even):nth-child(n+3){box-shadow:-1px 0 0 var(--fh-border),0 -1px 0 var(--fh-border);}
}
.fh-servicestrip__item > a{display:flex;align-items:center;gap:14px;min-width:0;}
.fh-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(--fh-gold-line);color:var(--fh-earth);
  background:var(--fh-gold-soft);
}
.fh-servicestrip__text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.fh-servicestrip__title{
  font-size:var(--fh-fs-sm);font-weight:500;color:var(--fh-ink);line-height:1.3;
}
.fh-servicestrip__copy{
  font-size:var(--fh-fs-xs);color:var(--fh-muted);line-height:1.4;
}
.fh-servicestrip__item > a:hover .fh-servicestrip__title{color:var(--fh-gold-ink);}
.fh-servicestrip__item.is-free .fh-servicestrip__icon{border-color:rgba(23,120,74,.35);color:var(--fh-free);background:var(--fh-free-soft);}
.fh-servicestrip__item.is-free .fh-servicestrip__title{color:var(--fh-free);font-weight:600;}
/* 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){
  .fh-servicestrip__item{padding:14px var(--fh-strip-pad);gap:10px;}
  .fh-servicestrip__icon{width:34px;height:34px;}
  .fh-servicestrip__icon svg{width:17px;height:17px;}
  .fh-servicestrip__copy{display:none;}
  .fh-servicestrip__title{font-size:var(--fh-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.
   -------------------------------------------------------------------------- */
.fh-edit__grid{
  display:grid;gap:clamp(10px,1.2vw,18px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:620px){ .fh-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){
  .fh-edit__grid{grid-template-columns:minmax(0,1fr);}
}
@media (min-width:1280px){
  .fh-edit__grid--4up{grid-template-columns:repeat(4,minmax(0,1fr));}
  .fh-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). */
  .fh-edit__grid--6up,
  .fh-edit__grid--7up,
  .fh-edit__grid--8up,
  .fh-edit__grid--9up{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* Optional closing link under the grid, used by the About page. */
.fh-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 .fh-edit, .fh-rail and .fh-occasion rather than to .fh-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){
  .fh-edit > .fh-container,
  .fh-rail > .fh-container,
  .fh-occasion > .fh-container{ --fh-gutter:10px; }

  .fh-edit > .fh-container > .fh-shead,
  .fh-rail > .fh-container > .fh-shead,
  .fh-occasion > .fh-container > .fh-shead,
  .fh-edit > .fh-container > .fh-edit__all,
  .fh-rail > .fh-container > .fh-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. */
.fh-dept{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:3/4;background:var(--fh-sand);
  border-radius:0;
  isolation:isolate;
}
/* A fixed 420px tall tile on a phone (client's instruction, 2026-09-22;
   raised from 340px on 2026-09-28),
   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 .fh-dept alone: the base rule
   above is equally specific and declared first, so a plain .fh-dept here would
   lose to it on source order rather than on the media query. */
@media (max-width:619px){
  .fh-edit__grid > .fh-dept{aspect-ratio:auto;height:420px;}
}
.fh-dept__media{position:absolute;inset:0;display:block;}
.fh-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(--fh-ease);
}
.fh-dept--jewellery .fh-dept__img{object-position:center 30%;}
.fh-dept--kalamkari .fh-dept__img{object-position:center 26%;}
.fh-dept--accessories .fh-dept__img{object-position:center 40%;}
.fh-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. */
.fh-dept::before{
  content:'';position:absolute;inset:10px;z-index:3;pointer-events:none;
  border:1px solid var(--fh-gold-line);
  opacity:0;transform:scale(1.02);
  transition:opacity var(--fh-t) var(--fh-ease),transform var(--fh-t) var(--fh-ease);
}
.fh-dept:hover::before,.fh-dept:focus-visible::before{opacity:1;transform:scale(1);}
.fh-dept:hover .fh-dept__img{transform:scale(1.05);}
.fh-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;
}
.fh-dept__title{
  font-family:var(--fh-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(--fh-cream);
  text-transform:uppercase;letter-spacing:.03em;
  text-wrap:balance;
}
.fh-dept__cta{
  margin-top:10px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fh-cream);
  border:1px solid rgba(245,242,234,.5);
  padding:8px 18px;
  transition:background var(--fh-t) var(--fh-ease),border-color var(--fh-t) var(--fh-ease),color var(--fh-t) var(--fh-ease);
}
.fh-dept:hover .fh-dept__cta{background:var(--fh-gold);border-color:var(--fh-gold);color:var(--fh-ink);}

/* --------------------------------------------------------------------------
   11. Footer
   WhatsApp and newsletter band, the deep maroon main footer, the legal bar.
   -------------------------------------------------------------------------- */
.fh-footer{background:var(--fh-espresso);color:rgba(248,242,231,.78);font-size:var(--fh-fs-sm);}
.fh-footer a{transition:color var(--fh-t) var(--fh-ease);}
.fh-footer a:hover{color:var(--fh-gold-light);}

.fh-fnews{
  position:relative;overflow:hidden;
  background:var(--fh-umber);
  color:var(--fh-cream);
  padding-block:clamp(34px,4vw,52px);
}
/* A faint jhumka drawn into the band, the way a motif sits in a silk border. */
.fh-fnews::before{
  content:"";position:absolute;right:-40px;top:50%;width:300px;height:300px;transform:translateY(-50%);
  background:radial-gradient(circle at 50% 50%,rgba(217,189,122,.16) 0 1px,transparent 1.5px) 0 0/14px 14px;
  -webkit-mask:radial-gradient(circle,#000 0 45%,transparent 70%);mask:radial-gradient(circle,#000 0 45%,transparent 70%);
  pointer-events:none;
}
/* Copy on the left; on the right one column, flush with the container edge:
   the email field with its button inside, WhatsApp under it. */
.fh-fnews__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:clamp(24px,4vw,64px);align-items:center;position:relative;}
.fh-fnews__title{font-family:var(--fh-font-heading);font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);line-height:1.08;color:var(--fh-cream);margin:0 0 10px;}
.fh-fnews__text{color:rgba(248,242,231,.78);max-width:46ch;}
.fh-fnews__actions{display:flex;flex-direction:column;gap:14px;width:100%;justify-self:end;}
.fh-fnews__form{
  display:flex;align-items:center;gap:6px;width:100%;padding:5px;
  background:rgba(248,242,231,.07);
  border:1px solid rgba(217,189,122,.45);border-radius:12px;
  transition:border-color var(--fh-t) var(--fh-ease),box-shadow var(--fh-t) var(--fh-ease);
}
.fh-fnews__form:focus-within{border-color:var(--fh-gold-light);box-shadow:0 0 0 4px rgba(217,189,122,.16);}
.fh-fnews__form input[type="email"]{
  flex:1 1 auto;min-width:0;height:46px;padding:0 18px;margin:0;
  background:transparent;border:0;border-radius:8px;box-shadow:none;outline:none;
  color:var(--fh-cream);font-size:var(--fh-fs-sm);
}
.fh-fnews__form input[type="email"]::placeholder{color:rgba(248,242,231,.6);}
.fh-fnews__submit{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 24px;border:0;border-radius:9px;cursor:pointer;
  background:linear-gradient(135deg,#E3C27A 0%,#C39A4A 100%);color:var(--fh-maroon-deep);
  font-family:var(--fh-font-body);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 22px -14px rgba(217,189,122,.9);
  transition:filter var(--fh-t) var(--fh-ease),transform var(--fh-t) var(--fh-ease);
}
.fh-fnews__submit:hover{filter:brightness(1.07);transform:translateY(-1px);}
.fh-fnews__alt{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding-left:18px;}
.fh-fnews__or{font-size:var(--fh-fs-sm);color:rgba(248,242,231,.74);}
.fh-fnews__wa{
  display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;
  border:1px solid rgba(217,189,122,.55);border-radius:10px;color:var(--fh-cream);
  font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background var(--fh-t) var(--fh-ease),border-color var(--fh-t) var(--fh-ease),color var(--fh-t) var(--fh-ease);
}
.fh-fnews__wa svg{color:#25D366;transition:color var(--fh-t) var(--fh-ease);}
.fh-fnews__wa:hover{background:#25D366;border-color:#25D366;color:#fff;}
.fh-fnews__wa:hover svg{color:#fff;}
.fh-fnews__msg{display:flex;align-items:center;gap:8px;margin:0;color:var(--fh-gold-light);}
.fh-fnews__msg--err{color:var(--fh-sale-light);}

.fh-fmain{padding-block:clamp(38px,4.4vw,60px) 28px;}
.fh-footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) minmax(0,1.3fr);
  gap:clamp(28px,3.4vw,56px);
}
.fh-footer__brandmark{width:200px;height:auto;margin-bottom:20px;}
.fh-footer__about{max-width:36ch;color:rgba(248,242,231,.72);line-height:1.65;}
.fh-footer__title{
  margin:0 0 18px;
  font-family:var(--fh-font-body);font-size:var(--fh-fs-micro);font-weight:600;
  letter-spacing:var(--fh-track-micro);text-transform:uppercase;color:var(--fh-gold-light);
}
.fh-footer__list{margin:0;padding:0;list-style:none;display:grid;gap:11px;}
.fh-footer__list a{color:rgba(248,242,231,.82);}
.fh-footer__bulkbtn{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border:1px solid rgba(217,189,122,.5);background:none;cursor:pointer;
  color:var(--fh-gold-light);font:inherit;font-size:var(--fh-fs-xs);font-weight:500;
  transition:background var(--fh-t) var(--fh-ease),color var(--fh-t) var(--fh-ease);
}
.fh-footer__bulkbtn:hover{background:var(--fh-gold-light);color:var(--fh-espresso);}

.fh-fsocial{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px;}
.fh-fsocial__link{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(217,189,122,.45);color:var(--fh-gold-light);
  transition:background var(--fh-t) var(--fh-ease),color var(--fh-t) var(--fh-ease),border-color var(--fh-t) var(--fh-ease);
}
.fh-fsocial__link:hover{background:var(--fh-gold-light);border-color:var(--fh-gold-light);color:var(--fh-espresso)!important;}

.fh-fcall{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.fh-fcall__icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(217,189,122,.12);color:var(--fh-gold-light);flex:0 0 auto;}
.fh-fcall__body{display:grid;line-height:1.3;}
.fh-fcall__label{font-size:var(--fh-fs-micro);letter-spacing:.08em;text-transform:uppercase;color:rgba(248,242,231,.6);}
.fh-fcall__val{color:var(--fh-cream);font-weight:500;}
.fh-fcall__note{margin:4px 0 14px;font-size:var(--fh-fs-xs);color:rgba(248,242,231,.6);}
.fh-faddr{font-style:normal;font-size:var(--fh-fs-xs);line-height:1.6;color:rgba(248,242,231,.62);}

.fh-fpromise{
  margin:48px 0 0;padding:22px 0 0;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;
  border-top:1px solid rgba(217,189,122,.22);
}
.fh-fpromise li{display:flex;align-items:center;gap:10px;color:rgba(248,242,231,.82);font-size:var(--fh-fs-xs);}
.fh-fpromise svg{color:var(--fh-gold-light);flex:0 0 auto;}

.fh-flegal{background:rgba(0,0,0,.18);border-top:1px solid rgba(217,189,122,.16);}
.fh-flegal__inner{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding-block:16px;}
.fh-flegal__text{margin:0;max-width:none;font-size:var(--fh-fs-micro);letter-spacing:.02em;color:rgba(248,242,231,.66);}
.fh-flegal__text a{color:rgba(248,242,231,.82);text-decoration:underline;text-decoration-color:rgba(217,189,122,.4);text-underline-offset:3px;}
.fh-flegal__sep{display:inline-block;width:4px;height:4px;margin:0 10px 2px;background:var(--fh-gold-light);transform:rotate(45deg);opacity:.7;}
.fh-fpay{width:auto;height:24px;opacity:.92;background:var(--fh-cream);padding:3px 8px;border-radius:2px;}

.fh-footer--co .fh-flegal{background:transparent;}

@media (max-width:1100px){
  .fh-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fh-footer__col--brand{grid-column:1 / -1;}
  .fh-footer__contact{grid-column:span 3;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px;}
  .fh-footer__contact .fh-footer__title{grid-column:1 / -1;}
}
@media (max-width:860px){
  .fh-fnews__inner{grid-template-columns:minmax(0,1fr);}
  .fh-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fh-footer__contact{grid-column:1 / -1;}
  .fh-fpromise{justify-content:flex-start;}
}
@media (max-width:480px){
  .fh-fnews__form input[type="email"]{padding:0 12px;}
  .fh-fnews__submit{padding:0 16px;}
  .fh-fnews__alt{padding-left:0;}
  .fh-fnews__wa{width:100%;justify-content:center;}
}

/* --------------------------------------------------------------------------
   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 Fahus 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. */
.fh-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(--fh-wa-green);color:var(--fh-white);
  border:0;
  box-shadow:0 6px 18px rgba(13,13,13,.22);
  transition:background var(--fh-t) var(--fh-ease),transform var(--fh-t) var(--fh-ease),box-shadow var(--fh-t) var(--fh-ease);
}
.fh-wa svg{width:29px;height:29px;}
.fh-wa:hover,.fh-wa:focus-visible{
  background:var(--fh-wa-green-dark);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(13,13,13,.28);
}

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

@media (max-width:860px){
  /* Clear of the mobile bar on every phone: the bar is 59px plus the home
     indicator inset on an iPhone, which a fixed 72px did not allow for and so
     sat the button on the bar (client, 2026-10-17). */
  .fh-wa{bottom:calc(74px + env(safe-area-inset-bottom,0px));right:16px;width:50px;height:50px;}
  .fh-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. */
  .fh-wa__label{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .fh-wa:hover,.fh-wa:focus-visible{transform:none;}
}

/* --------------------------------------------------------------------------
   13. Notices and empty states
   -------------------------------------------------------------------------- */
.fh-empty{
  text-align:center;padding-block:clamp(56px,8vw,110px);
  max-width:520px;margin-inline:auto;
}
.fh-empty img.fh-empty__mark,
img.fh-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(--fh-space-md);
  opacity:.9;
}
.fh-empty h2{margin-bottom:12px;}
.fh-empty p{margin-inline:auto;margin-bottom:var(--fh-space-md);color:var(--fh-muted);}
.fh-empty__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
/* The WhatsApp question under an empty department, set off by a hairline. */
.fh-empty__ask{margin-top:var(--fh-space-md);padding-top:var(--fh-space-md);border-top:1px solid var(--fh-ink-12);}
.fh-empty .fh-empty__ask p{margin-bottom:12px;}

.fh-toast{
  position:fixed;left:50%;bottom:26px;z-index:1300;
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  background:var(--fh-maroon);color:var(--fh-cream);
  padding:13px 22px;font-size:var(--fh-fs-xs);
  letter-spacing:.05em;
  transition:opacity var(--fh-t) var(--fh-ease),transform var(--fh-t) var(--fh-ease);
  max-width:calc(100vw - 32px);
}
.fh-toast.is-visible{opacity:1;transform:translate(-50%,0);}
@media (max-width:860px){ .fh-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(--fh-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(--fh-fs-sm);
  border:1px solid var(--fh-border);
  transition:border-color var(--fh-t) var(--fh-ease),background var(--fh-t) var(--fh-ease),color var(--fh-t) var(--fh-ease);
}
.page-numbers:hover{border-color:var(--fh-ink);}
.page-numbers.current{background:var(--fh-maroon);color:var(--fh-cream);border-color:var(--fh-maroon);}
.page-numbers.dots{border-color:transparent;}

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

/* --------------------------------------------------------------------------
   15. Scroll reveal. Degrades to visible with no JS.
   -------------------------------------------------------------------------- */
.js .fh-reveal{opacity:0;transform:translateY(16px);}
.js .fh-reveal.is-in{
  opacity:1;transform:none;
  transition:opacity var(--fh-t-slow) var(--fh-ease),transform var(--fh-t-slow) var(--fh-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 .fh-reveal{opacity:1;transform:none;}
  .fh-card:hover .fh-card__img{transform:none;}
}

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

/* --------------------------------------------------------------------------
   10c+. "Complete the look" rail inside the side cart (2026-10-16).

   Lives at the foot of the scrolling line list, so the subtotal and the two
   buttons stay pinned however long the list gets. A swipe rail of compact
   cards rather than a stacked list: two and a bit cards across tells the
   shopper there is more without pushing their own bag off the screen.
   -------------------------------------------------------------------------- */
.fh-upsell{
  margin:0;padding:6px 0 6px;
  background:linear-gradient(180deg,var(--fh-cream),rgba(245,242,234,0) 92%);
  border-top:var(--fh-hairline);
}
.fh-upsell__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 24px 6px;
}
.fh-upsell__kicker{
  margin:0 0 4px;max-width:none;
  font-size:.625rem;font-weight:600;letter-spacing:var(--fh-track-micro);
  text-transform:uppercase;color:var(--fh-earth);
}
.fh-upsell__title{
  margin:0;font-family:var(--fh-font-heading);font-size:1.0625rem;font-weight:500;
  line-height:1.2;color:var(--fh-ink);
}
.fh-upsell__nav{display:flex;gap:6px;flex:0 0 auto;}
.fh-upsell__arrow{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fh-surface);border:1px solid var(--fh-border);color:var(--fh-ink);
  cursor:pointer;transition:background var(--fh-t-fast) var(--fh-ease),border-color var(--fh-t-fast) var(--fh-ease),color var(--fh-t-fast) var(--fh-ease);
}
.fh-upsell__arrow:hover{background:var(--fh-maroon);border-color:var(--fh-maroon);color:var(--fh-cream);}
.fh-upsell__arrow[disabled]{opacity:.35;pointer-events:none;}
.fh-upsell__rail{
  list-style:none;margin:0;padding:2px 24px 6px;
  display:grid;grid-auto-flow:column;grid-auto-columns:138px;gap:12px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:24px;
  scrollbar-width:none;
}
.fh-upsell__rail::-webkit-scrollbar{display:none;}
.fh-upsell__item{
  scroll-snap-align:start;min-width:0;
  display:flex;flex-direction:column;
  padding:7px 7px 9px;
  background:var(--fh-surface);
  border:1px solid var(--fh-border);border-radius:12px;
  box-shadow:0 10px 24px -20px rgba(21,18,14,.45);
  transition:transform var(--fh-t) var(--fh-ease),box-shadow var(--fh-t) var(--fh-ease),border-color var(--fh-t) var(--fh-ease),opacity var(--fh-t) var(--fh-ease);
}
@media (hover:hover){
  .fh-upsell__item:hover{transform:translateY(-2px);border-color:var(--fh-gold-line);box-shadow:0 16px 30px -20px rgba(21,18,14,.5);}
}
.fh-upsell__item.is-leaving{opacity:0;transform:scale(.96);}
.fh-upsell__media{
  position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  border-radius:8px;background:var(--fh-sand);
}
.fh-upsell__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  transition:transform var(--fh-t-slow) var(--fh-ease);
}
@media (hover:hover){ .fh-upsell__item:hover .fh-upsell__media img{transform:scale(1.04);} }
.fh-upsell__badge{
  position:absolute;top:6px;left:6px;
  padding:3px 6px;border-radius:5px;
  background:var(--fh-gold);color:var(--fh-ink);
  font-size:.5625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
}
.fh-upsell__name{
  margin:9px 2px 0;
  font-size:.75rem;line-height:1.35;color:var(--fh-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.7em;
}
.fh-upsell__name:hover{color:var(--fh-gold-ink);}
.fh-upsell__price{
  margin:5px 2px 9px;font-size:.8125rem;font-weight:600;color:var(--fh-ink);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fh-upsell__price del{color:var(--fh-muted);font-weight:400;font-size:.85em;margin-right:4px;}
.fh-upsell__price ins{text-decoration:none;color:var(--fh-sale);}
.fh-upsell__price .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.fh-upsell__add{
  margin-top:auto;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:34px;padding:0 8px;
  background:transparent;color:var(--fh-ink);
  border:1px solid var(--fh-ink);border-radius:var(--fh-radius-btn);
  font-family:var(--fh-font-body);font-size:.625rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:background var(--fh-t-fast) var(--fh-ease),color var(--fh-t-fast) var(--fh-ease);
}
.fh-upsell__add:hover,.fh-upsell__add.is-done{background:var(--fh-maroon);color:var(--fh-cream);}
.fh-upsell__add.is-busy{opacity:.6;pointer-events:none;}
.fh-upsell__add--link{border-color:var(--fh-border);color:var(--fh-muted);}
.fh-upsell__add--link:hover{border-color:var(--fh-ink);}
@media (max-width:420px){
  .fh-upsell__rail{grid-auto-columns:128px;gap:10px;}
  .fh-upsell__nav{display:none;}
}

/* --------------------------------------------------------------------------
   Bulk & wholesale enquiry popup (2026-10-16). See inc/bulk-order.php.

   A centred dialog on a desktop - a dark editorial column beside the form,
   so it reads as a considered service rather than a contact form - and a
   bottom sheet on a phone, the full height of the screen less a strip, with
   the form scrolling inside it.
   -------------------------------------------------------------------------- */
.fh-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px;}
.fh-modal[hidden]{display:none;}
.fh-modal__scrim{
  position:absolute;inset:0;border:0;padding:0;cursor:pointer;
  background:rgba(13,13,13,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity var(--fh-t) var(--fh-ease);
}
.fh-modal__panel{
  /* A definite height, not a max-height: with only a ceiling the grid row
     grows to the form and the dialog overflows the window from the top,
     where nothing can scroll it back. Held to this height the form column
     scrolls inside the dialog instead. */
  position:relative;width:min(960px,100%);
  height:min(800px,calc(100vh - 48px));height:min(800px,calc(100dvh - 48px));
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  background:var(--fh-surface);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(13,13,13,.55);
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity var(--fh-t) var(--fh-ease),transform var(--fh-t-slow) var(--fh-ease);
}
.fh-modal.is-open .fh-modal__scrim{opacity:1;}
.fh-modal.is-open .fh-modal__panel{opacity:1;transform:none;}

.fh-bulk__aside{
  position:relative;padding:40px 32px;color:var(--fh-cream);overflow:hidden;
  background:
    radial-gradient(120% 70% at 0% 0%,rgba(203,163,97,.22),transparent 60%),
    radial-gradient(90% 60% at 100% 100%,rgba(136,102,61,.25),transparent 60%),
    var(--fh-espresso);
  display:flex;flex-direction:column;
}
.fh-bulk__aside::after{
  content:"";position:absolute;inset:14px;border:1px solid rgba(203,163,97,.22);border-radius:12px;pointer-events:none;
}
.fh-bulk__kicker{margin:0 0 14px;max-width:none;font-size:.625rem;font-weight:600;letter-spacing:var(--fh-track-micro);text-transform:uppercase;color:var(--fh-gold-light);}
.fh-bulk__lede{margin:0 0 26px;max-width:none;font-family:var(--fh-font-heading);font-size:1.625rem;line-height:1.2;color:var(--fh-cream);}
.fh-bulk__points{list-style:none;margin:0;padding:0;display:grid;gap:16px;}
.fh-bulk__points li{display:flex;align-items:flex-start;gap:12px;font-size:.8125rem;line-height:1.45;color:rgba(245,242,234,.86);}
.fh-bulk__points svg{
  flex:0 0 auto;width:32px;height:32px;padding:7px;border-radius:50%;
  background:rgba(203,163,97,.14);color:var(--fh-gold-light);
}
.fh-bulk__points span{padding-top:6px;}
.fh-bulk__alt{margin:auto 0 0;padding-top:28px;max-width:none;font-size:.75rem;color:rgba(245,242,234,.7);}
.fh-bulk__alt a{display:block;margin-top:4px;font-size:.9375rem;color:var(--fh-gold-light);font-weight:500;}

.fh-bulk__main{min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:32px 34px 28px;}
.fh-bulk__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;}
.fh-bulk__eyebrow{margin:0 0 6px;max-width:none;font-size:.625rem;font-weight:600;letter-spacing:var(--fh-track-micro);text-transform:uppercase;color:var(--fh-earth);}
.fh-bulk__title{margin:0;font-family:var(--fh-font-heading);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:500;line-height:1.1;}
.fh-bulk__sub{margin:8px 0 0;max-width:46ch;font-size:.8125rem;line-height:1.55;color:var(--fh-muted);}
.fh-bulk__close{flex:0 0 auto;margin:-8px -10px 0 0;background:var(--fh-cream);}

.fh-bulk__trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;}
.fh-bulk__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 14px;}
.fh-bulk__field{min-width:0;margin:0;border:0;padding:0;}
.fh-bulk__field--full{grid-column:1 / -1;}
.fh-bulk__field > label,.fh-bulk__field > legend{
  display:block;margin-bottom:7px;padding:0;
  font-size:.75rem;font-weight:500;color:var(--fh-ink);letter-spacing:.01em;
}
.fh-bulk__field abbr{text-decoration:none;color:var(--fh-sale);}
.fh-bulk__opt{font-weight:400;color:var(--fh-muted);font-size:.6875rem;}
.fh-bulk .fh-bulk__field input[type='text'],
.fh-bulk .fh-bulk__field input[type='tel'],
.fh-bulk .fh-bulk__field input[type='email'],
.fh-bulk .fh-bulk__field input[type='date'],
.fh-bulk .fh-bulk__field select,
.fh-bulk .fh-bulk__field textarea{
  width:100%;min-height:46px;padding:11px 13px;
  font-family:var(--fh-font-body);font-size:.875rem;color:var(--fh-ink);
  background:#FCFBF8;border:1px solid var(--fh-border);border-radius:10px;
  transition:border-color var(--fh-t-fast) var(--fh-ease),box-shadow var(--fh-t-fast) var(--fh-ease),background var(--fh-t-fast) var(--fh-ease);
}
.fh-bulk .fh-bulk__field textarea{min-height:0;resize:vertical;line-height:1.5;}
.fh-bulk .fh-bulk__field input:focus,
.fh-bulk .fh-bulk__field select:focus,
.fh-bulk .fh-bulk__field textarea:focus{
  outline:none;background:var(--fh-surface);border-color:var(--fh-gold);box-shadow:0 0 0 3px rgba(203,163,97,.2);
}
.fh-bulk__select{position:relative;}
.fh-bulk .fh-bulk__select select{background-image:none;padding-right:38px;}
.fh-bulk__select svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--fh-muted);}

.fh-bulk__chips{display:flex;flex-wrap:wrap;gap:8px;}
.fh-bulk__chip{position:relative;cursor:pointer;}
.fh-bulk__chip input{position:absolute;opacity:0;width:1px;height:1px;}
.fh-bulk__chip span{
  display:inline-flex;align-items:center;min-height:38px;padding:0 14px;
  border:1px solid var(--fh-border);border-radius:8px;background:#FCFBF8;
  font-size:.78125rem;color:var(--fh-ink);
  transition:border-color var(--fh-t-fast) var(--fh-ease),background var(--fh-t-fast) var(--fh-ease),color var(--fh-t-fast) var(--fh-ease);
}
.fh-bulk__chip:hover span{border-color:var(--fh-gold-line);}
.fh-bulk__chip input:checked + span{background:var(--fh-maroon);border-color:var(--fh-maroon);color:var(--fh-cream);}
.fh-bulk__chip input:focus-visible + span{outline:2px solid var(--fh-focus);outline-offset:2px;}

.fh-bulk__field.is-invalid input,.fh-bulk__field.is-invalid select,.fh-bulk__field.is-invalid textarea,
.fh-bulk__field.is-invalid .fh-bulk__chip span{border-color:var(--fh-sale)!important;background:#FDF5F3!important;}
.fh-bulk__msg{margin:6px 0 0;max-width:none;font-size:.71875rem;color:var(--fh-sale);}
.fh-bulk__error{
  margin:16px 0 0;max-width:none;padding:11px 14px;border-radius:10px;
  background:#FDF3F1;border:1px solid rgba(190,40,23,.22);color:#8A1C10;font-size:.8125rem;
}
.fh-bulk__error[hidden]{display:none;}
.fh-bulk__submit{margin-top:20px;}
.fh-bulk__send{min-height:52px;border-radius:10px;}
.fh-bulk__send.is-busy{opacity:.7;pointer-events:none;}
.fh-bulk__fine{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;max-width:none;font-size:.6875rem;color:var(--fh-muted);}

.fh-bulk__done{padding:38px 8px 20px;text-align:center;}
.fh-bulk__done[hidden],.fh-bulk__form[hidden]{display:none;}
.fh-bulk__tick{
  display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;margin-bottom:18px;
  border-radius:50%;background:#EEF6F0;color:#2E7D4F;box-shadow:0 0 0 8px rgba(46,125,79,.07);
}
.fh-bulk__doneTitle{margin:0;font-family:var(--fh-font-heading);font-size:1.75rem;font-weight:500;}
.fh-bulk__doneText{margin:10px auto 0;max-width:40ch;font-size:.875rem;line-height:1.6;color:var(--fh-muted);}
.fh-bulk__ref{margin:14px 0 0;max-width:none;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fh-earth);font-weight:600;}
.fh-bulk__doneActions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;}

@media (max-width:860px){
  .fh-modal{padding:0;align-items:flex-end;}
  .fh-modal__panel{
    grid-template-columns:1fr;width:100%;
    height:calc(100vh - 28px);height:calc(100dvh - 28px);
    border-radius:18px 18px 0 0;transform:translateY(40px);
  }
  .fh-bulk__aside{display:none;}
  .fh-bulk__main{padding:22px 18px calc(20px + env(safe-area-inset-bottom));}
  .fh-bulk__main::before{
    content:"";display:block;width:40px;height:4px;margin:-8px auto 16px;border-radius:2px;background:var(--fh-border);
  }
}
@media (max-width:520px){
  .fh-bulk__grid{grid-template-columns:1fr;gap:12px;}
}
@media (prefers-reduced-motion:reduce){
  .fh-modal__panel,.fh-modal__scrim{transition:none;}
}

/* ---- Triggers ---- */
.fh-bulktrigger:not(.fh-btn){
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
}
.fh-topbar .fh-topbar__bulk{padding:0 16px;transition:color var(--fh-t) var(--fh-ease);}
.fh-topbar .fh-topbar__bulk:hover{color:var(--fh-gold);}
.fh-footer__bulk{margin:14px 0 0;max-width:none;}
.fh-footer__bulkbtn{color:inherit;transition:color var(--fh-t) var(--fh-ease);}
.fh-footer__bulkbtn svg{color:var(--fh-gold-light);}
.fh-footer__bulkbtn:hover{color:var(--fh-gold-light);}

/* ---- Wishlist page ---- */
.fh-wishpage__head{margin-bottom:clamp(22px,3vw,36px);padding-bottom:clamp(18px,2.4vw,28px);border-bottom:var(--fh-hairline);}
.fh-wishpage__kicker{margin:0 0 8px;max-width:none;font-size:var(--fh-fs-micro);font-weight:600;letter-spacing:var(--fh-track-micro);text-transform:uppercase;color:var(--fh-earth);}
.fh-wishpage__title{margin:0;}
.fh-wishpage__count{margin:10px 0 0;max-width:none;font-size:var(--fh-fs-sm);color:var(--fh-muted);}
.fh-wishpage__count[hidden]{display:none;}
.fh-wishpage__note{margin:8px 0 0;max-width:none;font-size:var(--fh-fs-xs);color:var(--fh-muted);}
.fh-wishpage__note a{color:var(--fh-gold-ink);text-decoration:underline;text-underline-offset:3px;}
.fh-card__wish.is-busy{opacity:.6;pointer-events:none;}

/* --------------------------------------------------------------------------
   Free shipping progress in the side cart (Fahus, 2026-10-25).
   -------------------------------------------------------------------------- */
.fh-shipbar{margin-top:12px;padding:12px 14px 14px;background:var(--fh-maroon-soft);border:1px solid var(--fh-gold-line);}
.fh-shipbar__text{display:flex;align-items:center;gap:8px;margin:0 0 10px;max-width:none;font-size:var(--fh-fs-xs);color:var(--fh-ink);}
.fh-shipbar__text svg{flex:0 0 auto;color:var(--fh-maroon);}
.fh-shipbar__text strong{color:var(--fh-maroon);font-weight:600;}
.fh-shipbar__track{position:relative;display:block;height:6px;background:var(--fh-surface);box-shadow:inset 0 0 0 1px var(--fh-border);overflow:hidden;}
.fh-shipbar__fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--fh-gold),var(--fh-maroon));transition:width 600ms var(--fh-ease);}
.fh-shipbar.is-earned{background:var(--fh-free-soft);border-color:rgba(30,77,59,.3);}
.fh-shipbar.is-earned .fh-shipbar__text svg,
.fh-shipbar.is-earned .fh-shipbar__text strong{color:var(--fh-free);}
.fh-shipbar.is-earned .fh-shipbar__fill{background:var(--fh-free);}

/* --------------------------------------------------------------------------
   Motion (Fahus, 2026-10-25): small, quick and calm.
   Soft reveal - app.js adds .fh-motion to <html> only when it can run the
   observer, so nothing is ever left hidden without it. Each item rises 18px
   and fades in over 0.6s; siblings follow 70ms apart.
   -------------------------------------------------------------------------- */
html.fh-motion .fh-rv{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity 600ms cubic-bezier(.22,.61,.36,1),transform 600ms cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--fh-rv-i,0) * 70ms);
}
html.fh-motion .fh-rv.is-in{opacity:1;transform:none;}

/* Hover: buttons lift a pixel, cards lift a little with their shadow. */
@media (hover:hover){
  .fh-btn:hover{transform:translateY(-1px);}
  .fh-card__frame{transition:border-color var(--fh-t) var(--fh-ease),box-shadow var(--fh-t) var(--fh-ease),transform var(--fh-t) var(--fh-ease);}
  .fh-card:hover .fh-card__frame{transform:translateY(-3px);}
  .fh-ceremony__arch .fh-ceremony__img{transition:transform 900ms var(--fh-ease);}
  .fh-ceremony:hover .fh-ceremony__img{transform:scale(1.05);}
}
@media (prefers-reduced-motion:reduce){
  html.fh-motion .fh-rv{opacity:1;transform:none;transition:none;}
  .fh-btn:hover,.fh-card:hover .fh-card__frame{transform:none;}
}