/*
Theme Name: Fiji Homes
Theme URI: https://fijihomes.co.ke/
Author: David Kajeni
Author URI: https://fijihomes.co.ke/
Description: A WooCommerce-ready theme for Fiji Homes — bedding, flooring, decor and organization. Soft-luxe boutique design in the Fiji Homes forest green, with a full motion layer, WhatsApp ordering, M-Pesa checkout instructions and Elementor-friendly templates.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fiji-homes
Tags: e-commerce, woocommerce, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
WC requires at least: 7.0
WC tested up to: 9.1
*/

/* =============================================================
   1. Tokens
============================================================= */
:root{
  --fh-green:#1e4121;
  --fh-green-dark:#122a15;
  --fh-green-mid:#2e5a32;
  --fh-sage:#9db287;
  --fh-sage-soft:#e6ecdf;
  --fh-sage-mist:#f0f3ea;
  --fh-tan:#c9a96a;
  --fh-mustard:#d8a03c;
  --fh-cream:#faf9f6;
  --fh-sand:#f2efe8;
  --fh-line:#e6e1d8;
  --fh-ink:#1f241d;
  --fh-muted:#6f7568;
  --fh-white:#fff;
  --fh-danger:#b3402e;

  --fh-font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --fh-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --fh-r-sm:14px;
  --fh-r:22px;
  --fh-r-lg:36px;
  --fh-r-xl:56px;
  --fh-arch:240px 240px 28px 28px;

  --fh-shadow-sm:0 2px 10px rgba(24,45,26,.05);
  --fh-shadow:0 18px 48px -22px rgba(24,45,26,.34);
  --fh-shadow-lg:0 42px 90px -34px rgba(24,45,26,.44);

  --fh-wrap:1280px;
  --fh-gap:clamp(16px,2.2vw,30px);
  --fh-ease:cubic-bezier(.22,.61,.36,1);
  --fh-ease-soft:cubic-bezier(.4,0,.2,1);
  --fh-dur:.72s;

  /* Glass material — see section 21. Three depths of the same frosted
     surface: soft for large panels, plain for cards, strong for chrome
     and overlays that must stay readable over photography. */
  --fh-glass-soft:rgba(255,255,255,.40);
  --fh-glass:rgba(255,255,255,.58);
  --fh-glass-strong:rgba(250,249,246,.76);
  --fh-glass-tint:rgba(240,243,234,.52);
  --fh-glass-ink:rgba(18,42,21,.38);
  --fh-glass-ink-strong:rgba(18,42,21,.62);

  --fh-blur:16px;
  --fh-blur-lg:26px;
  --fh-blur-sm:9px;
  --fh-sat:1.35;

  --fh-glass-line:rgba(255,255,255,.55);
  --fh-glass-line-ink:rgba(30,65,33,.10);
  --fh-glass-lift:inset 0 1px 0 rgba(255,255,255,.62);
  --fh-glass-lift-ink:inset 0 1px 0 rgba(255,255,255,.14);
  --fh-glass-shadow:0 16px 40px -26px rgba(24,45,26,.34),var(--fh-glass-lift);
  --fh-glass-shadow-lg:0 40px 88px -38px rgba(24,45,26,.5),var(--fh-glass-lift);
}

/* =============================================================
   2. Base
============================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--fh-ink);
  background:
    radial-gradient(1100px 620px at 82% -6%,var(--fh-sage-mist) 0%,transparent 62%),
    radial-gradient(760px 520px at 4% 12%,#f7f4ed 0%,transparent 58%),
    var(--fh-cream);
  font-family:var(--fh-font-body);font-size:16.5px;line-height:1.68;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
img{max-width:100%;height:auto;display:block}
a{color:var(--fh-green);text-decoration:none;transition:color .25s var(--fh-ease)}
a:hover{color:var(--fh-green-mid)}
h1,h2,h3,h4,h5{
  font-family:var(--fh-font-head);font-weight:600;line-height:1.08;color:var(--fh-green-dark);
  margin:0 0 .5em;letter-spacing:-.022em;font-variation-settings:"SOFT" 0,"WONK" 0
}
h1{font-size:clamp(2.5rem,6vw,4.6rem)}
h2{font-size:clamp(1.95rem,4vw,3.1rem)}
h3{font-size:clamp(1.18rem,1.9vw,1.5rem)}
p{margin:0 0 1.15em}
hr{border:0;border-top:1px solid var(--fh-line);margin:2.6rem 0}
blockquote{margin:1.6em 0;padding:1.2em 1.6em;background:var(--fh-sage-mist);border-radius:var(--fh-r);font-style:italic}
table{width:100%;border-collapse:collapse}
th,td{padding:.8em;border-bottom:1px solid var(--fh-line);text-align:left}
:focus-visible{outline:2.5px solid var(--fh-mustard);outline-offset:3px;border-radius:6px}
::selection{background:var(--fh-sage-soft);color:var(--fh-green-dark)}

.fh-wrap{width:min(var(--fh-wrap),calc(100% - 2.8rem));margin-inline:auto}
.fh-wrap--narrow{width:min(880px,calc(100% - 2.8rem))}
.fh-section{padding:clamp(56px,8vw,124px) 0;position:relative}
.fh-section--tight{padding:clamp(34px,4.4vw,64px) 0}
.fh-panel{border-radius:var(--fh-r-xl);background:var(--fh-white);box-shadow:var(--fh-shadow-sm)}
.fh-bg-mist{background:var(--fh-sage-mist)}
.fh-bg-sage{background:var(--fh-sage-soft)}
.fh-bg-sand{background:var(--fh-sand)}
.fh-bg-green{background:var(--fh-green);color:rgba(250,249,246,.86)}
.fh-bg-green h2,.fh-bg-green h3{color:var(--fh-white)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--fh-green);color:#fff;padding:.8rem 1.2rem;z-index:9999}
.skip-link:focus{left:0}

.fh-eyebrow{
  display:inline-flex;align-items:center;gap:.55em;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--fh-green-mid);margin:0 0 1rem
}
.fh-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.5}
.fh-section-head--center .fh-eyebrow::before{display:none}
.fh-bg-green .fh-eyebrow,.fh-cta .fh-eyebrow{color:var(--fh-tan)}
.fh-lead{font-size:clamp(1rem,1.25vw,1.12rem);color:var(--fh-muted);max-width:56ch;line-height:1.72}
.fh-bg-green .fh-lead,.fh-cta .fh-lead{color:rgba(250,249,246,.82)}
.fh-section-head{margin-bottom:clamp(30px,4vw,58px);max-width:60ch}
.fh-section-head--center{margin-inline:auto;text-align:center}
.fh-section-head--center .fh-lead{margin-inline:auto}
.fh-headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}

/* =============================================================
   3. Buttons
============================================================= */
.fh-btn,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,
.wp-block-button__link{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--fh-font-body);font-weight:600;font-size:.92rem;letter-spacing:.005em;
  padding:.95em 1.75em;border-radius:999px;border:1.5px solid var(--fh-green);
  background:var(--fh-green);color:var(--fh-cream)!important;cursor:pointer;text-align:center;line-height:1.2;
  transition:transform .38s var(--fh-ease),box-shadow .38s var(--fh-ease),background .3s var(--fh-ease),border-color .3s var(--fh-ease)
}
.fh-btn::after,
.woocommerce a.button::after,.woocommerce button.button::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.22) 42%,transparent 62%);
  transform:translateX(-130%);transition:transform .75s var(--fh-ease)
}
.fh-btn:hover::after,.woocommerce a.button:hover::after,.woocommerce button.button:hover::after{transform:translateX(130%)}
.fh-btn:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.wp-block-button__link:hover{
  background:var(--fh-green-mid);border-color:var(--fh-green-mid);color:#fff!important;
  transform:translateY(-3px);box-shadow:0 16px 32px -14px rgba(24,45,26,.6)
}
.fh-btn:active{transform:translateY(-1px)}
.fh-btn--ghost{background:transparent;color:var(--fh-green)!important;border-color:rgba(30,65,33,.28)}
.fh-btn--ghost:hover{background:var(--fh-green);color:var(--fh-cream)!important;border-color:var(--fh-green)}
.fh-btn--light{background:var(--fh-cream);border-color:var(--fh-cream);color:var(--fh-green-dark)!important}
.fh-btn--light:hover{background:#fff;border-color:#fff;color:var(--fh-green-dark)!important}
.fh-btn--gold{background:var(--fh-mustard);border-color:var(--fh-mustard);color:var(--fh-green-dark)!important}
.fh-btn--gold:hover{background:#c8922f;border-color:#c8922f;color:var(--fh-green-dark)!important}
.fh-btn--wa{background:#1f9d55;border-color:#1f9d55;color:#fff!important}
.fh-btn--wa:hover{background:#188047;border-color:#188047}
.fh-btn--block{display:flex;width:100%}
.fh-btn--sm{padding:.68em 1.2em;font-size:.83rem}
.fh-btn--lg{padding:1.08em 2.1em;font-size:1rem}
.fh-btn svg{width:1.1em;height:1.1em;flex:none;transition:transform .4s var(--fh-ease)}
.fh-btn:hover svg{transform:translateX(3px)}

.fh-link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.92rem;color:var(--fh-green-dark)}
.fh-link-arrow svg{transition:transform .4s var(--fh-ease)}
.fh-link-arrow:hover svg{transform:translateX(5px)}

/* =============================================================
   4. Header
============================================================= */
.fh-topbar{background:var(--fh-green-dark);color:rgba(250,249,246,.86);font-size:.78rem;overflow:hidden}
.fh-topbar .fh-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;flex-wrap:wrap}
.fh-topbar a{color:rgba(250,249,246,.86)}
.fh-topbar a:hover{color:var(--fh-mustard)}
.fh-topbar__msg{display:flex;align-items:center;gap:.55em;margin:0}
.fh-topbar__links{display:flex;gap:1.4rem;align-items:center}

.fh-header{
  position:sticky;top:0;z-index:200;background:rgba(250,249,246,.82);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .4s var(--fh-ease),background .4s var(--fh-ease),box-shadow .4s var(--fh-ease)
}
.fh-header.is-stuck{border-bottom-color:var(--fh-line);box-shadow:0 14px 34px -28px rgba(24,45,26,.7)}
.fh-header__inner{display:flex;align-items:center;gap:1.6rem;min-height:84px;transition:min-height .4s var(--fh-ease)}
.fh-header.is-stuck .fh-header__inner{min-height:68px}
.fh-brand{display:flex;align-items:center;gap:.7rem;flex:none;margin-right:auto}
.fh-brand img,.fh-brand .custom-logo{max-height:56px;width:auto;transition:max-height .4s var(--fh-ease)}
.fh-header.is-stuck .fh-brand img,.fh-header.is-stuck .fh-brand .custom-logo{max-height:44px}
.fh-brand__text{font-family:var(--fh-font-head);font-size:1.3rem;font-weight:600;color:var(--fh-green-dark)}

.fh-nav ul{list-style:none;display:flex;align-items:center;gap:1.7rem;margin:0;padding:0}
.fh-nav li{position:relative}
.fh-nav a{font-size:.92rem;font-weight:500;color:var(--fh-ink);padding:.35rem 0;display:inline-block;position:relative}
.fh-nav>ul>li>a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--fh-green);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--fh-ease)
}
.fh-nav>ul>li:hover>a::after,.fh-nav .current-menu-item>a::after{transform:scaleX(1);transform-origin:left}
.fh-nav .sub-menu{
  position:absolute;top:calc(100% + 10px);left:-1.1rem;min-width:230px;background:#fff;
  border-radius:var(--fh-r);box-shadow:var(--fh-shadow);padding:.6rem;display:block;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:top left;
  transition:opacity .3s var(--fh-ease),transform .3s var(--fh-ease),visibility .3s;z-index:30
}
.fh-nav li:hover>.sub-menu,.fh-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.fh-nav .sub-menu a{display:block;padding:.6rem .9rem;border-radius:12px;width:100%}
.fh-nav .sub-menu a:hover{background:var(--fh-sage-mist);color:var(--fh-green-dark)}

.fh-header__actions{display:flex;align-items:center;gap:.35rem;flex:none}
.fh-icon-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;color:var(--fh-green-dark);cursor:pointer;position:relative;
  transition:background .3s var(--fh-ease),transform .3s var(--fh-ease)
}
.fh-icon-btn:hover{background:var(--fh-sage-mist);transform:translateY(-2px)}
.fh-icon-btn svg{width:21px;height:21px}
.fh-cart-count{
  position:absolute;top:1px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--fh-mustard);color:var(--fh-green-dark);font-size:.66rem;font-weight:700;
  display:flex;align-items:center;justify-content:center
}
.fh-burger{display:none}

.fh-search{
  position:fixed;inset:0;background:rgba(18,42,21,.5);backdrop-filter:blur(6px);z-index:400;
  display:flex;align-items:flex-start;justify-content:center;padding-top:16vh;opacity:0;visibility:hidden;transition:.35s var(--fh-ease)
}
.fh-search.is-open{opacity:1;visibility:visible}
.fh-search__box{
  width:min(700px,92vw);background:#fff;border-radius:var(--fh-r-lg);padding:1.5rem;box-shadow:var(--fh-shadow-lg);
  transform:translateY(-16px) scale(.97);transition:transform .45s var(--fh-ease)
}
.fh-search.is-open .fh-search__box{transform:none}
.fh-search input[type=search]{width:100%;border:1px solid var(--fh-line);border-radius:999px;padding:1rem 1.4rem;font-size:1.02rem;font-family:inherit}
.fh-search__hint{margin:.9rem .4rem 0;font-size:.8rem;color:var(--fh-muted)}

.fh-drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(360px,88vw);background:var(--fh-cream);z-index:500;
  transform:translateX(105%);transition:transform .5s var(--fh-ease);display:flex;flex-direction:column;
  box-shadow:var(--fh-shadow-lg);padding:1.3rem;overflow-y:auto
}
.fh-drawer.is-open{transform:none}
.fh-drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.fh-drawer ul{list-style:none;margin:0;padding:0}
.fh-drawer li{border-bottom:1px solid var(--fh-line)}
.fh-drawer a{display:block;padding:.95rem .2rem;font-weight:500;color:var(--fh-ink);font-family:var(--fh-font-head);font-size:1.1rem}
.fh-drawer .sub-menu a{padding-left:1.2rem;font-size:.9rem;color:var(--fh-muted);font-family:var(--fh-font-body)}
.fh-drawer.is-open li{animation:fh-slide-in .5s var(--fh-ease) backwards}
.fh-drawer.is-open li:nth-child(1){animation-delay:.08s}
.fh-drawer.is-open li:nth-child(2){animation-delay:.13s}
.fh-drawer.is-open li:nth-child(3){animation-delay:.18s}
.fh-drawer.is-open li:nth-child(4){animation-delay:.23s}
.fh-drawer.is-open li:nth-child(5){animation-delay:.28s}
.fh-drawer.is-open li:nth-child(6){animation-delay:.33s}
@keyframes fh-slide-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.fh-overlay{position:fixed;inset:0;background:rgba(18,42,21,.42);z-index:450;opacity:0;visibility:hidden;transition:.4s var(--fh-ease)}
.fh-overlay.is-open{opacity:1;visibility:visible}

/* scroll progress */
.fh-progress{position:fixed;top:0;left:0;height:2.5px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--fh-green),var(--fh-mustard));z-index:600}

/* preloader */
.fh-loader{
  position:fixed;inset:0;z-index:900;background:var(--fh-green-dark);display:grid;place-items:center;
  transition:opacity .7s var(--fh-ease),visibility .7s
}
.fh-loader.is-done{opacity:0;visibility:hidden}
.fh-loader__mark{width:min(240px,48vw)}
.fh-loader__mark img{width:100%;height:auto;clip-path:inset(100% 0 0 0);animation:fh-draw 1.3s var(--fh-ease) .15s forwards}
@keyframes fh-draw{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.fh-loader__bar{position:absolute;bottom:18%;left:50%;transform:translateX(-50%);width:120px;height:2px;background:rgba(250,249,246,.2);overflow:hidden;border-radius:2px}
.fh-loader__bar span{display:block;height:100%;width:40%;background:var(--fh-tan);animation:fh-bar 1.1s var(--fh-ease-soft) infinite}
@keyframes fh-bar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* =============================================================
   5. Hero
============================================================= */
.fh-hero{position:relative;padding:clamp(30px,5vw,72px) 0 clamp(40px,6vw,90px);overflow:hidden}
.fh-hero__inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(28px,4.5vw,70px)}
.fh-hero__badge{
  display:inline-flex;align-items:center;gap:.55em;background:rgba(255,255,255,.7);border:1px solid var(--fh-line);
  color:var(--fh-green-dark);border-radius:999px;padding:.5em 1.05em;font-size:.76rem;font-weight:600;margin-bottom:1.3rem;
  backdrop-filter:blur(6px)
}
.fh-hero__badge svg{color:var(--fh-green-mid)}
.fh-hero h1{margin-bottom:.7rem}
.fh-hero h1 em{font-style:italic;color:var(--fh-green-mid);font-variation-settings:"SOFT" 40,"WONK" 1}
.fh-hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}
.fh-hero__meta{display:flex;gap:clamp(1.4rem,3vw,2.8rem);margin-top:2.6rem;flex-wrap:wrap}
.fh-hero__meta div{font-size:.82rem;color:var(--fh-muted);max-width:14ch;line-height:1.45}
.fh-hero__meta strong{
  display:block;font-family:var(--fh-font-head);font-size:clamp(1.6rem,2.6vw,2.15rem);color:var(--fh-green-dark);
  line-height:1;margin-bottom:.3rem
}

.fh-hero__media{position:relative;padding:14px 14px 0 0}
.fh-hero__frame{
  position:relative;border-radius:var(--fh-arch);overflow:hidden;box-shadow:var(--fh-shadow-lg);
  transform:translateZ(0)
}
.fh-hero__frame img{width:100%;aspect-ratio:4/4.6;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--fh-ease)}
.fh-hero__blob{
  position:absolute;inset:auto -18px -22px auto;width:62%;aspect-ratio:1;border-radius:50% 50% 46% 54%/54% 44% 56% 46%;
  background:linear-gradient(150deg,var(--fh-sage-soft),var(--fh-sage));opacity:.55;z-index:-1;
  animation:fh-morph 14s ease-in-out infinite
}
.fh-hero__ring{
  position:absolute;top:-26px;left:-30px;width:130px;height:130px;border:1px solid rgba(30,65,33,.22);border-radius:50%;
  z-index:-1;animation:fh-float 9s ease-in-out infinite
}
@keyframes fh-morph{
  0%,100%{border-radius:50% 50% 46% 54%/54% 44% 56% 46%;transform:rotate(0)}
  50%{border-radius:44% 56% 58% 42%/48% 56% 44% 52%;transform:rotate(8deg)}
}
@keyframes fh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.fh-chip{
  position:absolute;background:rgba(250,249,246,.92);backdrop-filter:blur(10px);border-radius:var(--fh-r);
  padding:.85rem 1.1rem;font-size:.82rem;box-shadow:var(--fh-shadow);max-width:250px;line-height:1.45
}
.fh-chip strong{display:block;font-family:var(--fh-font-head);color:var(--fh-green-dark);font-size:.98rem;margin-bottom:.15rem}
.fh-chip--bl{left:-16px;bottom:44px;animation:fh-float 7s ease-in-out infinite}
.fh-chip--tr{right:-6px;top:34px;display:flex;align-items:center;gap:.7rem;animation:fh-float 8.5s ease-in-out .6s infinite}
.fh-chip__avatars{display:flex}
.fh-chip__avatars span{
  width:26px;height:26px;border-radius:50%;border:2px solid #fff;margin-left:-9px;
  background:linear-gradient(140deg,var(--fh-sage),var(--fh-tan))
}
.fh-chip__avatars span:first-child{margin-left:0}

/* =============================================================
   6. Marquee
============================================================= */
.fh-marquee{
  overflow:hidden;border-block:1px solid var(--fh-line);padding:1.1rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.fh-marquee__track{display:flex;width:max-content;gap:0;animation:fh-marquee 34s linear infinite}
.fh-marquee:hover .fh-marquee__track{animation-play-state:paused}
.fh-marquee__group{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem}
.fh-marquee span{
  font-family:var(--fh-font-head);font-size:clamp(1.1rem,2vw,1.6rem);color:var(--fh-green-dark);
  white-space:nowrap;display:flex;align-items:center;gap:2.6rem
}
.fh-marquee span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--fh-tan);flex:none}
@keyframes fh-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fh-marquee--green{background:var(--fh-green);border:0}
.fh-marquee--green span{color:rgba(250,249,246,.9);font-family:var(--fh-font-body);font-size:.86rem;letter-spacing:.2em;text-transform:uppercase}

/* =============================================================
   7. Category arches
============================================================= */
.fh-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--fh-gap)}
.fh-cat{position:relative;display:block;isolation:isolate}
.fh-cat__img{
  border-radius:var(--fh-arch);overflow:hidden;background:var(--fh-sand);aspect-ratio:3/4.1;
  box-shadow:var(--fh-shadow-sm);transition:box-shadow .55s var(--fh-ease),transform .55s var(--fh-ease)
}
.fh-cat__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--fh-ease)}
.fh-cat:hover .fh-cat__img{transform:translateY(-8px);box-shadow:var(--fh-shadow)}
.fh-cat:hover .fh-cat__img img{transform:scale(1.07)}
.fh-cat__body{padding:1.1rem .3rem 0;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.fh-cat__body h3{margin:0 0 .15rem;font-size:1.16rem}
.fh-cat__body span{font-size:.8rem;color:var(--fh-muted)}
.fh-cat__go{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--fh-line);display:grid;place-items:center;flex:none;
  color:var(--fh-green-dark);transition:background .4s var(--fh-ease),color .4s var(--fh-ease),transform .4s var(--fh-ease)
}
.fh-cat:hover .fh-cat__go{background:var(--fh-green);color:#fff;border-color:var(--fh-green);transform:rotate(-45deg)}

/* =============================================================
   8. Product cards
============================================================= */
.woocommerce ul.products,ul.products{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);list-style:none;margin:0 0 3rem;padding:0
}
/* WooCommerce clears its float layout with ::before/::after on the list.
   In a grid container those become two grid items, which pushed every
   card one cell along and left the first column empty. */
.woocommerce ul.products::before,.woocommerce ul.products::after,
ul.products::before,ul.products::after{display:none!important}
.woocommerce ul.products li.product,ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;background:transparent;border:0;
  display:flex;flex-direction:column;position:relative;text-align:left
}
ul.products li.product .woocommerce-loop-product__link{display:block;position:relative}
ul.products li.product a img,ul.products li.product img{
  width:100%;aspect-ratio:1/1.08;object-fit:cover;margin:0;background:var(--fh-sand);
  border-radius:var(--fh-r-lg);transition:transform .9s var(--fh-ease),box-shadow .5s var(--fh-ease)
}
ul.products li.product:hover img{transform:translateY(-6px) scale(1.02);box-shadow:var(--fh-shadow)}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2{
  font-family:var(--fh-font-head);font-size:1.02rem!important;font-weight:600;line-height:1.28;
  padding:.85rem 0 .15rem!important;margin:0;color:var(--fh-green-dark);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em
}
.fh-loop-cat{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fh-muted);margin-top:1rem;display:block}
ul.products li.product .price{
  color:var(--fh-green)!important;font-weight:600;font-size:1rem;font-family:var(--fh-font-body);margin:0 0 .9rem;display:block
}
ul.products li.product .price del{color:var(--fh-muted)!important;font-weight:400;opacity:.65;margin-right:.45em}
ul.products li.product .price ins{text-decoration:none;background:transparent}
.fh-loop-actions{
  margin-top:auto;display:grid;gap:.5rem;
  opacity:1;transform:none;transition:opacity .45s var(--fh-ease),transform .45s var(--fh-ease)
}
@media (hover:hover) and (min-width:901px){
  .fh-loop-actions{opacity:0;transform:translateY(10px)}
  ul.products li.product:hover .fh-loop-actions,
  ul.products li.product:focus-within .fh-loop-actions{opacity:1;transform:none}
}
ul.products li.product a.button,ul.products li.product .button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--fh-font-body);
  font-weight:600;font-size:.85rem;padding:.75em 1em;border-radius:999px;border:1.5px solid var(--fh-green);
  background:var(--fh-green);color:var(--fh-cream)!important;width:100%;text-align:center;line-height:1.2;margin:0;
  transition:background .3s var(--fh-ease),transform .3s var(--fh-ease)
}
ul.products li.product a.button:hover{background:var(--fh-green-mid);border-color:var(--fh-green-mid);transform:translateY(-2px)}
ul.products li.product .added_to_cart{display:none}
span.onsale,ul.products li.product .onsale{
  position:absolute;top:14px;left:14px;right:auto;background:var(--fh-mustard);color:var(--fh-green-dark);
  border-radius:999px;padding:.3em .9em;font-size:.72rem;font-weight:700;min-height:0;min-width:0;line-height:1.6;margin:0;z-index:3
}
.fh-badge-new{
  position:absolute;top:14px;right:14px;background:rgba(250,249,246,.92);backdrop-filter:blur(6px);color:var(--fh-green-dark);
  border-radius:999px;padding:.3em .85em;font-size:.7rem;font-weight:600;z-index:3
}
.star-rating{color:var(--fh-mustard);font-size:.78em;margin:0 0 .4rem}

/* =============================================================
   9. Shoppable room
============================================================= */
.fh-room{position:relative;border-radius:var(--fh-r-xl);overflow:hidden;box-shadow:var(--fh-shadow)}
.fh-room img{width:100%;aspect-ratio:16/9.4;object-fit:cover}
.fh-hotspot{
  position:absolute;width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(250,249,246,.94);display:grid;place-items:center;transform:translate(-50%,-50%);
  box-shadow:0 8px 22px rgba(18,42,21,.3);z-index:4
}
.fh-hotspot::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(250,249,246,.75);
  animation:fh-pulse 2.6s var(--fh-ease-soft) infinite
}
.fh-hotspot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--fh-green)}
@keyframes fh-pulse{0%{transform:scale(.75);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.fh-hotspot__card{
  position:absolute;left:50%;bottom:calc(100% + 16px);transform:translateX(-50%) translateY(8px);
  width:210px;background:#fff;border-radius:var(--fh-r);padding:.85rem;box-shadow:var(--fh-shadow);
  opacity:0;visibility:hidden;transition:.35s var(--fh-ease);text-align:left;z-index:6;pointer-events:none
}
.fh-hotspot:hover .fh-hotspot__card,.fh-hotspot:focus-visible .fh-hotspot__card,.fh-hotspot.is-open .fh-hotspot__card{
  opacity:1;visibility:visible;transform:translateX(-50%);pointer-events:auto
}
.fh-hotspot__card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;margin-bottom:.55rem}
.fh-hotspot__card strong{display:block;font-family:var(--fh-font-head);font-size:.9rem;color:var(--fh-green-dark);line-height:1.25}
.fh-hotspot__card span{font-size:.85rem;color:var(--fh-green);font-weight:600}

/* =============================================================
   10. Bundles
============================================================= */
.fh-bundles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fh-gap)}
.fh-bundle{
  background:#fff;border-radius:var(--fh-r-lg);padding:1.5rem;display:flex;flex-direction:column;
  box-shadow:var(--fh-shadow-sm);transition:transform .5s var(--fh-ease),box-shadow .5s var(--fh-ease)
}
.fh-bundle:hover{transform:translateY(-6px);box-shadow:var(--fh-shadow)}
.fh-bundle__imgs{display:flex;margin-bottom:1.1rem}
.fh-bundle__imgs img{
  width:33%;aspect-ratio:1;object-fit:cover;border-radius:18px;border:3px solid #fff;margin-left:-16px;
  transition:transform .5s var(--fh-ease)
}
.fh-bundle__imgs img:first-child{margin-left:0}
.fh-bundle:hover .fh-bundle__imgs img:nth-child(1){transform:translateY(-4px) rotate(-3deg)}
.fh-bundle:hover .fh-bundle__imgs img:nth-child(3){transform:translateY(-4px) rotate(3deg)}
.fh-bundle h3{margin-bottom:.3rem}
.fh-bundle__list{list-style:none;padding:0;margin:.9rem 0 1.1rem;display:grid;gap:.45rem;font-size:.88rem;color:var(--fh-muted)}
.fh-bundle__list li{display:flex;gap:.55rem;align-items:flex-start}
.fh-bundle__list svg{width:16px;height:16px;color:var(--fh-sage);flex:none;margin-top:.28rem}
.fh-bundle__price{margin-top:auto;display:flex;align-items:baseline;gap:.6rem;margin-bottom:.9rem}
.fh-bundle__price strong{font-family:var(--fh-font-head);font-size:1.5rem;color:var(--fh-green-dark)}
.fh-bundle__price del{color:var(--fh-muted);font-size:.9rem}
.fh-bundle__save{background:var(--fh-sage-soft);color:var(--fh-green-dark);border-radius:999px;padding:.2em .7em;font-size:.72rem;font-weight:700}

/* =============================================================
   11. Editorial, quotes, CTA
============================================================= */
.fh-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.fh-split__media{position:relative;padding:0 0 18px 18px}
.fh-split__media img{border-radius:var(--fh-r-lg);box-shadow:var(--fh-shadow);width:100%}
.fh-split__media::before{
  content:"";position:absolute;left:0;bottom:0;width:56%;height:64%;border-radius:var(--fh-r-lg);
  background:var(--fh-sage-soft);z-index:-1
}
.fh-split--sticky .fh-split__copy{position:sticky;top:120px}
.fh-list-check{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.85rem}
.fh-list-check li{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem}
.fh-list-check svg{width:20px;height:20px;color:var(--fh-green-mid);flex:none;margin-top:.2rem}
.fh-bg-green .fh-list-check svg{color:var(--fh-tan)}

.fh-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fh-gap)}
.fh-quote{background:#fff;border-radius:var(--fh-r-lg);padding:1.8rem;box-shadow:var(--fh-shadow-sm);position:relative;overflow:hidden}
.fh-quote::before{
  content:"”";position:absolute;top:-26px;right:14px;font-family:var(--fh-font-head);font-size:8rem;color:var(--fh-sage-mist);line-height:1
}
.fh-quote p{font-size:.96rem;position:relative}
.fh-quote__stars{color:var(--fh-mustard);letter-spacing:.16em;margin-bottom:.7rem;font-size:.88rem}
.fh-quote__who{font-size:.8rem;color:var(--fh-muted);margin:0}
.fh-quote__who strong{color:var(--fh-green-dark);display:block;font-family:var(--fh-font-head);font-size:1rem}

.fh-cta{
  position:relative;overflow:hidden;border-radius:var(--fh-r-xl);background:var(--fh-green);color:rgba(250,249,246,.86);
  padding:clamp(38px,6vw,84px) clamp(24px,4vw,64px);text-align:center
}
.fh-cta h2{color:#fff}
.fh-cta::before,.fh-cta::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(250,249,246,.14)}
.fh-cta::before{width:340px;height:340px;top:-150px;left:-110px}
.fh-cta::after{width:220px;height:220px;bottom:-90px;right:-40px;background:rgba(157,178,135,.12);border:0}
.fh-cta .fh-hero__cta{justify-content:center;position:relative}

.fh-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fh-gap)}
.fh-card{background:#fff;border-radius:var(--fh-r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--fh-shadow-sm);transition:transform .5s var(--fh-ease),box-shadow .5s var(--fh-ease)}
.fh-card:hover{transform:translateY(-6px);box-shadow:var(--fh-shadow)}
.fh-card__img{overflow:hidden}
.fh-card__img img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .9s var(--fh-ease)}
.fh-card:hover .fh-card__img img{transform:scale(1.06)}
.fh-card__body{padding:1.4rem}
.fh-card__body h3{font-size:1.1rem;margin-bottom:.4rem}
.fh-card__meta{font-size:.72rem;color:var(--fh-muted);letter-spacing:.16em;text-transform:uppercase}

/* =============================================================
   12. Content layout
============================================================= */
.fh-pagehead{padding:clamp(40px,6vw,84px) 0 clamp(22px,3vw,40px);text-align:center}
.fh-pagehead h1{margin-bottom:.4rem}
.fh-breadcrumb,.woocommerce .woocommerce-breadcrumb{font-size:.8rem;color:var(--fh-muted);margin:0}
.fh-content{padding:clamp(28px,4vw,64px) 0 clamp(48px,6vw,96px)}
.fh-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(26px,3.6vw,56px);align-items:start}
.fh-layout--full{grid-template-columns:minmax(0,1fr)}
.fh-entry{background:#fff;border-radius:var(--fh-r-lg);padding:clamp(22px,3.6vw,52px);box-shadow:var(--fh-shadow-sm)}
.fh-entry img{border-radius:var(--fh-r)}
.fh-sidebar .widget{background:#fff;border-radius:var(--fh-r);padding:1.3rem;margin-bottom:1.2rem;box-shadow:var(--fh-shadow-sm)}
.fh-sidebar .widget-title,.fh-sidebar h2{font-size:1rem;margin-bottom:.9rem}
.fh-sidebar ul{list-style:none;padding:0;margin:0}
.fh-sidebar li{padding:.4rem 0;border-bottom:1px solid var(--fh-line);font-size:.9rem}
.fh-sidebar li:last-child{border-bottom:0}

/* WooCommerce chrome */
.woocommerce-result-count{color:var(--fh-muted);font-size:.85rem}
.woocommerce .woocommerce-ordering select{border:1px solid var(--fh-line);border-radius:999px;padding:.6rem 1.1rem;font-family:inherit;background:#fff}
.woocommerce div.product{margin-top:.5rem}
.woocommerce div.product div.images img{border-radius:var(--fh-r-lg)}
.woocommerce div.product .product_title,.product_title{margin-bottom:.35rem;font-size:clamp(1.75rem,3vw,2.6rem)}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--fh-green);font-size:1.75rem;font-weight:600;font-family:var(--fh-font-body)}
.woocommerce div.product p.price ins,.woocommerce div.product span.price ins{text-decoration:none;background:transparent}
.woocommerce div.product p.price del,.woocommerce div.product span.price del{color:var(--fh-muted);font-weight:400;font-size:.8em;opacity:.7;margin-right:.35em}
.woocommerce div.product form.cart{margin:1.6rem 0;display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.woocommerce div.product form.cart .button{flex:1 1 auto;min-width:200px}
.woocommerce .quantity .qty{width:82px;padding:.8rem .4rem;border:1px solid var(--fh-line);border-radius:999px;text-align:center;font-family:inherit;background:#fff}
.woocommerce-tabs ul.tabs{padding:0;margin:0 0 1.6rem;border-bottom:1px solid var(--fh-line);list-style:none;display:flex;flex-wrap:wrap}
.woocommerce-tabs ul.tabs::before{display:none}
.woocommerce-tabs ul.tabs li{background:transparent;border:0;border-radius:0;margin:0 1.6rem 0 0;padding:0}
.woocommerce-tabs ul.tabs li::before,.woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce-tabs ul.tabs li a{font-family:var(--fh-font-body);font-weight:600;color:var(--fh-muted);padding:.8rem 0;display:block;border-bottom:2px solid transparent}
.woocommerce-tabs ul.tabs li.active a{color:var(--fh-green-dark);border-bottom-color:var(--fh-green)}
.fh-product-meta{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.6rem;font-size:.9rem;color:var(--fh-muted)}
.fh-product-meta li{display:flex;gap:.65rem;align-items:center}
.fh-product-meta svg{width:18px;height:18px;color:var(--fh-green-mid);flex:none}

.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top:0;border-left:3px solid var(--fh-green);background:var(--fh-sage-mist);border-radius:var(--fh-r);
  padding:1.1em 1.5em;color:var(--fh-green-dark);font-size:.92rem;list-style:none
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}
.woocommerce-error{border-left-color:var(--fh-danger);background:#fbeceb;color:#7d2b1e}
.woocommerce table.shop_table{border:1px solid var(--fh-line);border-radius:var(--fh-r);border-collapse:separate;overflow:hidden;background:#fff}
.woocommerce table.shop_table th{background:var(--fh-sage-mist);font-family:var(--fh-font-body);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fh-muted)}
.woocommerce-cart .cart-collaterals .cart_totals{background:#fff;border-radius:var(--fh-r-lg);padding:1.6rem;box-shadow:var(--fh-shadow-sm)}
.woocommerce #payment,.woocommerce-checkout #payment{background:#fff;border-radius:var(--fh-r-lg)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{border:1px solid var(--fh-line);border-radius:14px;padding:.8rem 1rem;font-family:inherit;background:#fff;height:auto}
.fh-pay-note{background:var(--fh-sage-mist);border-radius:var(--fh-r);padding:1.2rem 1.4rem;margin:1.3rem 0;font-size:.92rem}
.fh-pay-note strong{color:var(--fh-green-dark)}
.fh-pay-note code{background:#fff;border-radius:8px;padding:.18em .55em;font-weight:700;color:var(--fh-green-dark)}
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:.45rem;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  border-radius:999px;min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--fh-green-dark);box-shadow:var(--fh-shadow-sm)
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--fh-green);color:#fff}

.fh-wa-block{margin:1.1rem 0 0;display:grid;gap:.6rem}
.fh-wa-block small{color:var(--fh-muted);font-size:.8rem}
.fh-wa-float{
  position:fixed;right:20px;bottom:20px;z-index:300;width:58px;height:58px;border-radius:50%;
  background:#1f9d55;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -8px rgba(31,157,85,.65);transition:transform .4s var(--fh-ease);
  animation:fh-pop .6s var(--fh-ease) 1.2s backwards
}
.fh-wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(31,157,85,.5);animation:fh-pulse 3s var(--fh-ease-soft) infinite}
.fh-wa-float:hover{transform:scale(1.09) rotate(4deg);color:#fff}
.fh-wa-float svg{width:30px;height:30px}
@keyframes fh-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}

/* =============================================================
   13. Footer
============================================================= */
.fh-footer{background:var(--fh-green-dark);color:rgba(250,249,246,.72);padding-top:clamp(48px,6vw,88px);margin-top:clamp(40px,6vw,90px);position:relative;overflow:hidden}
.fh-footer a{color:rgba(250,249,246,.72)}
.fh-footer a:hover{color:var(--fh-mustard)}
.fh-footer__grid{display:grid;grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr) 1.3fr;gap:clamp(24px,3vw,52px);padding-bottom:3rem;position:relative;z-index:2}
.fh-footer h4{color:#fff;font-family:var(--fh-font-body);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.1rem}
.fh-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;font-size:.9rem}
.fh-footer__logo img{max-height:86px;width:auto;margin-bottom:1.1rem}
.fh-footer__about{font-size:.9rem;max-width:34ch}
.fh-social{display:flex;gap:.6rem;margin-top:1.2rem}
.fh-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(250,249,246,.2);display:flex;align-items:center;justify-content:center;transition:.35s var(--fh-ease)}
.fh-social a:hover{background:var(--fh-green);border-color:var(--fh-green);transform:translateY(-3px)}
.fh-social svg{width:17px;height:17px}
.fh-footer__bottom{border-top:1px solid rgba(250,249,246,.12);padding:1.3rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;position:relative;z-index:2}
.fh-paylogos{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.fh-paylogos span{border:1px solid rgba(250,249,246,.2);border-radius:8px;padding:.24em .7em;font-size:.72rem;letter-spacing:.06em}
.fh-wordmark{
  position:relative;z-index:1;text-align:center;line-height:.82;padding:.4rem 0 0;
  font-family:var(--fh-font-head);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(3.4rem,15.5vw,15rem);color:transparent;
  -webkit-text-stroke:1px rgba(250,249,246,.22);
  user-select:none;white-space:nowrap;overflow:hidden
}
.fh-wordmark span{display:block;transform:translateY(14%);will-change:transform}

/* =============================================================
   14. Motion utilities
============================================================= */
.fh-r{opacity:0;transform:translateY(26px);transition:opacity var(--fh-dur) var(--fh-ease),transform var(--fh-dur) var(--fh-ease)}
.fh-r.is-in{opacity:1;transform:none}
/* The wipe is applied to the CHILDREN: clip-path on an observed element
   collapses its intersection rect, so IntersectionObserver would never fire. */
.fh-r--mask{opacity:1;transform:none}
.fh-r--mask>*{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--fh-ease)}
.fh-r--mask.is-in>*{clip-path:inset(0 0 0 0)}
.fh-r--mask>*:nth-child(2){transition-delay:.18s}
.fh-r--mask>*:nth-child(3){transition-delay:.26s}
.fh-r--mask>*:nth-child(4){transition-delay:.34s}
.fh-r--mask>*:nth-child(5){transition-delay:.42s}
/* hotspots must not be clipped — their popover sits outside the button box */
.fh-room.fh-r--mask>.fh-hotspot{clip-path:none;opacity:0;transition:opacity .55s var(--fh-ease) .55s}
.fh-room.fh-r--mask.is-in>.fh-hotspot{opacity:1}
.fh-r--right{transform:translateX(34px)}
.fh-r--scale{transform:scale(.94)}
[data-fh-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .8s var(--fh-ease),transform .8s var(--fh-ease)}
[data-fh-stagger].is-in>*{opacity:1;transform:none}
[data-fh-stagger].is-in>*:nth-child(1){transition-delay:.05s}
[data-fh-stagger].is-in>*:nth-child(2){transition-delay:.13s}
[data-fh-stagger].is-in>*:nth-child(3){transition-delay:.21s}
[data-fh-stagger].is-in>*:nth-child(4){transition-delay:.29s}
[data-fh-stagger].is-in>*:nth-child(5){transition-delay:.37s}
[data-fh-stagger].is-in>*:nth-child(6){transition-delay:.45s}
[data-fh-stagger].is-in>*:nth-child(7){transition-delay:.53s}
[data-fh-stagger].is-in>*:nth-child(8){transition-delay:.61s}
.fh-words{display:inline-block}
.fh-words .fh-word{display:inline-block;overflow:hidden;vertical-align:top}
.fh-words .fh-word i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .95s var(--fh-ease)}
.fh-words.is-in .fh-word i{transform:none}
.fh-parallax{will-change:transform}
.is-in .fh-hero__frame img,.fh-hero__frame.is-in img{transform:scale(1)}

/* =============================================================
   15. Responsive
============================================================= */
@media (max-width:1100px){
  .fh-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .woocommerce ul.products,ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fh-bundles{grid-template-columns:minmax(0,1fr)}
  .fh-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fh-quotes,.fh-posts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .fh-nav{display:none}
  .fh-burger{display:inline-flex}
  .fh-hero__inner{grid-template-columns:1fr}
  .fh-hero__media{order:-1;padding:8px 8px 0 0}
  .fh-hero__frame img{aspect-ratio:4/3.4}
  .fh-chip--tr{display:none}
  .fh-chip--bl{left:8px;bottom:16px;max-width:200px}
  .fh-split{grid-template-columns:1fr}
  .fh-split--sticky .fh-split__copy{position:static}
  .fh-layout{grid-template-columns:minmax(0,1fr)}
  .fh-topbar__links{display:none}
  .fh-hotspot__card{width:170px}
}
@media (max-width:640px){
  .woocommerce ul.products,ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fh-footer__grid{grid-template-columns:minmax(0,1fr)}
  ul.products li.product .woocommerce-loop-product__title{font-size:.9rem!important}
  .fh-room img{aspect-ratio:4/3.4}
  body{font-size:16px}
  .fh-cat__img{aspect-ratio:3/3.6}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fh-r,[data-fh-stagger]>*,.fh-r--mask>*{opacity:1!important;transform:none!important;clip-path:none!important}
  .fh-words .fh-word i{transform:none!important}
  .fh-loader{display:none}
  .fh-loop-actions{opacity:1!important;transform:none!important}
}

/* trust points (light variant) */
.fh-strip__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,52px)}
.fh-strip__item{display:flex;gap:1.05rem;align-items:flex-start}
.fh-strip__item svg{width:30px;height:30px;flex:none;color:var(--fh-green-mid);margin-top:.2rem}
.fh-strip__item h4{margin:0 0 .3rem;font-size:1.16rem;font-family:var(--fh-font-head);line-height:1.2}
.fh-strip__item p{margin:0;font-size:.95rem;color:var(--fh-muted);line-height:1.55}
@media (max-width:900px){.fh-strip__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fh-strip__grid{grid-template-columns:minmax(0,1fr)}}

/* =============================================================
   16. Shop toolbar, category pills, quick view
============================================================= */
.fh-pills{
  display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center;margin:0 0 clamp(22px,3vw,40px)
}
.fh-pill{
  display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.2em;border-radius:999px;
  border:1px solid var(--fh-line);background:rgba(255,255,255,.7);font-size:.86rem;font-weight:500;color:var(--fh-ink);
  transition:background .3s var(--fh-ease),color .3s var(--fh-ease),border-color .3s var(--fh-ease),transform .3s var(--fh-ease)
}
.fh-pill:hover{transform:translateY(-2px);border-color:var(--fh-sage);color:var(--fh-green-dark)}
.fh-pill.is-active{background:var(--fh-green);border-color:var(--fh-green);color:var(--fh-cream)}
.fh-pill span{font-size:.72rem;opacity:.6}

.fh-toolbar{
  position:sticky;top:calc(var(--fh-header-h,84px) - 6px);z-index:120;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:.7rem 1.1rem;margin:0 0 clamp(20px,2.6vw,34px);
  background:rgba(250,249,246,.86);backdrop-filter:blur(14px);border:1px solid var(--fh-line);border-radius:999px
}
.fh-toolbar .woocommerce-result-count{margin:0}
.fh-toolbar form.woocommerce-ordering{margin:0}
.fh-toolbar__right{display:flex;align-items:center;gap:.6rem}

.fh-quickview-btn{
  position:absolute;left:50%;bottom:14px;transform:translate(-50%,10px);opacity:0;
  background:rgba(250,249,246,.94);backdrop-filter:blur(8px);color:var(--fh-green-dark);border:0;border-radius:999px;
  padding:.6em 1.2em;font-family:var(--fh-font-body);font-weight:600;font-size:.8rem;cursor:pointer;white-space:nowrap;
  box-shadow:var(--fh-shadow);transition:opacity .35s var(--fh-ease),transform .35s var(--fh-ease);z-index:4
}
ul.products li.product:hover .fh-quickview-btn,ul.products li.product:focus-within .fh-quickview-btn{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.fh-quickview-btn{display:none}}

.fh-qv{
  position:fixed;inset:0;z-index:520;display:flex;justify-content:flex-end;
  opacity:0;visibility:hidden;transition:opacity .4s var(--fh-ease),visibility .4s
}
.fh-qv.is-open{opacity:1;visibility:visible}
.fh-qv__scrim{position:absolute;inset:0;background:rgba(18,42,21,.45);backdrop-filter:blur(3px)}
.fh-qv__panel{
  position:relative;width:min(460px,92vw);height:100dvh;overflow-y:auto;background:var(--fh-cream);
  padding:1.4rem;box-shadow:var(--fh-shadow-lg);transform:translateX(40px);transition:transform .5s var(--fh-ease)
}
.fh-qv.is-open .fh-qv__panel{transform:none}
.fh-qv__close{position:absolute;top:1rem;right:1rem;z-index:2}
.fh-qv__img{border-radius:var(--fh-r-lg);overflow:hidden;margin-bottom:1.2rem;background:var(--fh-sand)}
.fh-qv__img img{width:100%;aspect-ratio:1/1.05;object-fit:cover}
.fh-qv__cat{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fh-muted)}
.fh-qv h3{font-size:1.4rem;margin:.3rem 0 .4rem}
.fh-qv__price{font-size:1.25rem;font-weight:600;color:var(--fh-green);margin-bottom:.9rem}
.fh-qv__price del{color:var(--fh-muted);font-weight:400;font-size:.95rem;margin-right:.4em;opacity:.7}
.fh-qv__desc{font-size:.92rem;color:var(--fh-muted)}
.fh-qv__actions{display:grid;gap:.6rem;margin-top:1.2rem}
.fh-qv__skeleton{height:340px;border-radius:var(--fh-r-lg);background:linear-gradient(100deg,var(--fh-sand) 30%,#fff 50%,var(--fh-sand) 70%);background-size:220% 100%;animation:fh-shimmer 1.4s linear infinite}
@keyframes fh-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* =============================================================
   17. Single product
============================================================= */
.woocommerce div.product div.images.woocommerce-product-gallery{margin-bottom:2rem}
.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child img{border-radius:var(--fh-arch)}

/* Own the single-product layout rather than inheriting WooCommerce's floats.
   A sticky summary inside a float layout never lets the tabs and the related
   grid clear it, so they ran underneath the buy card. As grid items the two
   columns sit in one row, everything after them spans the full width, and the
   sticky travel is bounded by the row — it can no longer reach the content
   below. */
.woocommerce div.product{display:block}
.fh-product-top{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,3.6vw,58px);align-items:start
}
.fh-product-top > div.images,
.fh-product-top > .summary{float:none!important;width:auto!important;margin:0!important}
.fh-product-top > div.images{grid-column:1}
.fh-product-top > .summary{grid-column:2}
.woocommerce div.product .woocommerce-tabs{margin-top:clamp(28px,4vw,56px);clear:both}
.woocommerce div.product .related,.woocommerce div.product .up-sells{margin-top:clamp(28px,4vw,56px)}
.woocommerce div.product .summary{position:sticky;top:calc(var(--fh-header-h,84px) + 18px)}
.fh-buycard{
  background:#fff;border-radius:var(--fh-r-lg);padding:clamp(18px,2.4vw,28px);box-shadow:var(--fh-shadow-sm);margin-top:.4rem
}
.fh-sizeguide{
  margin-top:1.2rem;border-top:1px solid var(--fh-line);padding-top:1rem
}
.fh-sizeguide summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--fh-green-dark);list-style:none;display:flex;align-items:center;gap:.5rem}
.fh-sizeguide summary::-webkit-details-marker{display:none}
.fh-sizeguide summary::after{content:"+";margin-left:auto;font-size:1.1rem;color:var(--fh-muted);transition:transform .3s var(--fh-ease)}
.fh-sizeguide[open] summary::after{transform:rotate(45deg)}
.fh-sizeguide table{margin-top:.9rem;font-size:.86rem}
.fh-sizeguide th,.fh-sizeguide td{padding:.5em .6em}

.fh-stickybuy{
  position:fixed;left:0;right:0;bottom:0;z-index:250;display:none;align-items:center;gap:.8rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));background:rgba(250,249,246,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--fh-line);transform:translateY(110%);transition:transform .45s var(--fh-ease)
}
.fh-stickybuy.is-visible{transform:none}
.fh-stickybuy__meta{flex:1;min-width:0}
.fh-stickybuy strong{display:block;font-family:var(--fh-font-head);font-size:.92rem;color:var(--fh-green-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh-stickybuy span{font-size:.85rem;color:var(--fh-green);font-weight:600}
@media (max-width:900px){
  .fh-stickybuy{display:flex}
  .fh-product-top{grid-template-columns:minmax(0,1fr)}
  .fh-product-top > div.images,
  .fh-product-top > .summary{grid-column:1/-1}
  .woocommerce div.product .summary{position:static}
  .fh-wa-float{bottom:88px}
}

/* =============================================================
   18. Trade & bulk quote builder
============================================================= */
.fh-trade-hero{
  border-radius:var(--fh-r-xl);background:var(--fh-green);color:rgba(250,249,246,.86);
  padding:clamp(32px,5vw,68px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;
  position:relative;overflow:hidden
}
.fh-trade-hero h1,.fh-trade-hero h2{color:#fff}
.fh-trade-hero .fh-eyebrow{color:var(--fh-tan)}
.fh-trade-hero .fh-lead{color:rgba(250,249,246,.82)}
.fh-trade-hero::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(157,178,135,.14);right:-80px;top:-90px}
.fh-trade-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;position:relative}
.fh-trade-stats div{background:rgba(250,249,246,.08);border-radius:var(--fh-r);padding:1rem}
.fh-trade-stats strong{display:block;font-family:var(--fh-font-head);font-size:1.6rem;color:#fff;line-height:1}
.fh-trade-stats span{font-size:.76rem;color:rgba(250,249,246,.7)}

.fh-quotebuilder{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(22px,3vw,44px);align-items:start}
.fh-quote__items{display:grid;gap:.6rem}
.fh-qitem{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:1rem;align-items:center;background:#fff;
  border-radius:var(--fh-r);padding:.7rem .9rem;box-shadow:var(--fh-shadow-sm);
  transition:box-shadow .3s var(--fh-ease),transform .3s var(--fh-ease)
}
.fh-qitem.is-picked{box-shadow:0 0 0 1.5px var(--fh-sage),var(--fh-shadow-sm)}
.fh-qitem img{width:64px;height:64px;object-fit:cover;border-radius:14px;background:var(--fh-sand)}
.fh-qitem__name{font-family:var(--fh-font-head);font-size:.98rem;color:var(--fh-green-dark);line-height:1.25}
.fh-qitem__price{font-size:.85rem;color:var(--fh-muted)}
.fh-stepper{display:flex;align-items:center;gap:.35rem;background:var(--fh-sage-mist);border-radius:999px;padding:.25rem}
.fh-stepper button{
  width:32px;height:32px;border-radius:50%;border:0;background:#fff;color:var(--fh-green-dark);font-size:1.05rem;
  cursor:pointer;line-height:1;display:grid;place-items:center;transition:background .25s var(--fh-ease),transform .25s var(--fh-ease)
}
.fh-stepper button:hover{background:var(--fh-green);color:#fff;transform:scale(1.06)}
.fh-stepper input{
  width:48px;border:0;background:transparent;text-align:center;font-family:inherit;font-weight:600;font-size:.95rem;color:var(--fh-green-dark);
  -moz-appearance:textfield
}
.fh-stepper input::-webkit-outer-spin-button,.fh-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.fh-quote__panel{
  position:sticky;top:calc(var(--fh-header-h,84px) + 18px);background:#fff;border-radius:var(--fh-r-lg);
  padding:1.5rem;box-shadow:var(--fh-shadow)
}
.fh-quote__panel h3{font-size:1.2rem;margin-bottom:.2rem}
.fh-quote__summary{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.5rem;font-size:.88rem;max-height:230px;overflow-y:auto}
.fh-quote__summary li{display:flex;justify-content:space-between;gap:1rem;color:var(--fh-muted)}
.fh-quote__summary li strong{color:var(--fh-green-dark);font-weight:600}
.fh-quote__empty{font-size:.88rem;color:var(--fh-muted);margin:1rem 0}
.fh-quote__total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--fh-line);padding-top:.9rem;margin-bottom:1rem}
.fh-quote__total strong{font-family:var(--fh-font-head);font-size:1.5rem;color:var(--fh-green-dark)}
.fh-quote__fields{display:grid;gap:.6rem;margin-bottom:1rem}
.fh-quote__fields input,.fh-quote__fields select,.fh-quote__fields textarea{
  width:100%;border:1px solid var(--fh-line);border-radius:14px;padding:.75rem .9rem;font-family:inherit;font-size:.9rem;background:#fff
}
.fh-quote__note{font-size:.76rem;color:var(--fh-muted);margin:.7rem 0 0;text-align:center}

/* =============================================================
   19. Photo wall & journal hotspots
============================================================= */
.fh-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem;align-items:start}
.fh-wall>*:nth-child(even){margin-top:22px}
.fh-wall a,.fh-wall figure{
  position:relative;display:block;margin:0;border-radius:var(--fh-r);overflow:hidden;background:var(--fh-sand);
  aspect-ratio:1;transition:transform .5s var(--fh-ease),box-shadow .5s var(--fh-ease)
}
.fh-wall a:hover,.fh-wall figure:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--fh-shadow);z-index:2}
.fh-wall img{width:100%;height:100%;object-fit:cover}
.fh-wall a::after{
  content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,42,21,.45),transparent 55%);
  opacity:0;transition:opacity .4s var(--fh-ease)
}
.fh-wall a:hover::after{opacity:1}
.fh-wall__tag{
  position:absolute;left:.7rem;bottom:.6rem;color:#fff;font-size:.74rem;font-weight:600;z-index:2;
  opacity:0;transform:translateY(6px);transition:.4s var(--fh-ease)
}
.fh-wall a:hover .fh-wall__tag{opacity:1;transform:none}
@media (max-width:900px){.fh-wall{grid-template-columns:repeat(3,minmax(0,1fr))}.fh-wall>*:nth-child(even){margin-top:14px}}

.fh-journal-room{margin:2rem 0}
.fh-journal-room .fh-room{border-radius:var(--fh-r-lg)}

/* =============================================================
   20. Slide-out mini cart
============================================================= */
.fh-cartpanel{
  position:fixed;top:0;right:0;height:100dvh;width:min(400px,92vw);background:var(--fh-cream);z-index:520;
  transform:translateX(105%);transition:transform .5s var(--fh-ease);display:flex;flex-direction:column;
  box-shadow:var(--fh-shadow-lg)
}
.fh-cartpanel.is-open{transform:none}
.fh-cartpanel__head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.3rem;border-bottom:1px solid var(--fh-line)}
.fh-cartpanel__head h3{margin:0;font-size:1.15rem}
.fh-cartpanel__body{flex:1;overflow-y:auto;padding:1.2rem 1.3rem}
.fh-cartpanel__foot{padding:1.1rem 1.3rem;border-top:1px solid var(--fh-line);display:grid;gap:.6rem;background:#fff}
.fh-cartpanel .woocommerce-mini-cart{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem}
.fh-cartpanel .woocommerce-mini-cart-item{position:relative;padding:0 34px 0 0;margin:0;border:0}
.fh-cartpanel .woocommerce-mini-cart-item>a:not(.remove){
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:.9rem;align-items:center;
  font-family:var(--fh-font-head);font-size:.95rem;color:var(--fh-green-dark);line-height:1.3
}
.fh-cartpanel .woocommerce-mini-cart-item img{
  width:72px;height:72px;object-fit:cover;border-radius:16px;margin:0;float:none;background:var(--fh-sand)
}
.fh-cartpanel .quantity{display:block;margin:.4rem 0 0 84px;font-size:.85rem;color:var(--fh-muted)}
.fh-cartpanel .remove_from_cart_button{
  position:absolute;top:2px;right:0;width:26px;height:26px;border-radius:50%;background:var(--fh-sage-mist);
  color:var(--fh-green-dark)!important;display:grid;place-items:center;font-size:.9rem;text-decoration:none;line-height:1
}
.fh-cartpanel .remove_from_cart_button:hover{background:var(--fh-sage);color:#fff!important}
.fh-cartpanel .woocommerce-mini-cart__total{
  display:flex;justify-content:space-between;font-size:1rem;margin:1.4rem 0 0;padding:1rem 0 0;
  border:0;border-top:1px solid var(--fh-line)
}
.fh-cartpanel .woocommerce-mini-cart__total strong{font-family:var(--fh-font-head);font-size:1.15rem;color:var(--fh-green-dark)}
.fh-cartpanel .woocommerce-mini-cart__buttons{display:none}
.fh-cartpanel__empty{text-align:center;padding:2.4rem 1rem;color:var(--fh-muted)}
.fh-cartpanel__empty svg{width:44px;height:44px;color:var(--fh-sage);margin:0 auto 1rem}
.fh-qitem__ph{width:64px;height:64px;border-radius:14px;background:var(--fh-sage-mist);display:block}
@media (max-width:1100px){.fh-quotebuilder{grid-template-columns:minmax(0,1fr)}.fh-quote__panel{position:static}.fh-trade-hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.fh-qitem{grid-template-columns:52px minmax(0,1fr);row-gap:.6rem}.fh-qitem img,.fh-qitem__ph{width:52px;height:52px}.fh-qitem .fh-stepper{grid-column:1/-1;justify-self:start}.fh-trade-stats{grid-template-columns:minmax(0,1fr)}}

/* =============================================================
   21. Glass layer
   One frosted material at three depths — soft for wide panels, plain
   for cards, strong for chrome and anything sitting over photography.
   Glass only reads as glass when there is something behind it to
   refract, so 21.1 lays an ambient wash under the whole page and the
   tinted bands become translucent instead of flat.
   Everything here degrades: see 21.8 for the no-backdrop-filter,
   reduced-transparency and small-screen paths.
============================================================= */

/* --- 21.1 ambient backdrop -------------------------------------- */
body::before{
  content:"";position:fixed;inset:-20vh -10vw;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 12% 18%,rgba(157,178,135,.34),transparent 62%),
    radial-gradient(30vw 30vw at 88% 8%,rgba(201,169,106,.24),transparent 64%),
    radial-gradient(42vw 42vw at 74% 62%,rgba(46,90,50,.16),transparent 66%),
    radial-gradient(26vw 26vw at 24% 88%,rgba(216,160,60,.14),transparent 62%);
  animation:fh-drift 48s var(--fh-ease-soft) infinite alternate
}
@keyframes fh-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-3%,2%,0) scale(1.08)}
}
/* The tinted band keeps its sage cast but lets the wash through, so
   cards sitting on it have depth to blur rather than flat colour. */
.fh-bg-mist{
  background:linear-gradient(170deg,rgba(240,243,234,.72),rgba(230,236,223,.5) 60%,rgba(247,244,237,.66))
}

/* --- 21.2 the material ------------------------------------------ */
.fh-glass,
.fh-panel,
.fh-bundle,.fh-quote,.fh-card,.fh-entry,.fh-sidebar .widget,
.fh-buycard,.fh-qitem,.fh-quote__panel,
.fh-hotspot__card,.fh-search__box,.fh-nav .sub-menu,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce #payment,.woocommerce-checkout #payment{
  background:var(--fh-glass);
  -webkit-backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  border:1px solid var(--fh-glass-line);
  box-shadow:var(--fh-glass-shadow)
}
.fh-glass--soft{background:var(--fh-glass-soft)}
.fh-glass--strong{background:var(--fh-glass-strong)}
/* Wide, quiet surfaces read better at a lower opacity. */
.fh-panel,.fh-entry{background:var(--fh-glass-soft);box-shadow:var(--fh-glass-shadow-lg)}
.fh-bundle:hover,.fh-card:hover{box-shadow:var(--fh-glass-shadow-lg);border-color:rgba(255,255,255,.7)}
.fh-quote::before{color:rgba(201,169,106,.26)}

/* --- 21.3 chrome ------------------------------------------------- */
.fh-topbar{
  background:rgba(18,42,21,.88);
  -webkit-backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  box-shadow:var(--fh-glass-lift-ink)
}
.fh-header{
  background:var(--fh-glass-strong);
  -webkit-backdrop-filter:blur(var(--fh-blur-lg)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur-lg)) saturate(var(--fh-sat));
  box-shadow:var(--fh-glass-lift)
}
.fh-header.is-stuck{
  background:rgba(250,249,246,.86);border-bottom-color:var(--fh-glass-line);
  box-shadow:0 18px 40px -32px rgba(24,45,26,.7),var(--fh-glass-lift)
}
.fh-nav .sub-menu{background:var(--fh-glass-strong)}
.fh-nav .sub-menu a:hover{background:rgba(255,255,255,.6);color:var(--fh-green-dark)}
.fh-icon-btn:hover{background:rgba(255,255,255,.62);box-shadow:var(--fh-glass-shadow)}

.fh-search{background:var(--fh-glass-ink);-webkit-backdrop-filter:blur(var(--fh-blur));backdrop-filter:blur(var(--fh-blur))}
.fh-search__box{background:var(--fh-glass-strong);box-shadow:var(--fh-glass-shadow-lg)}
.fh-search input[type=search]{background:rgba(255,255,255,.66);border-color:var(--fh-glass-line)}

.fh-overlay{background:var(--fh-glass-ink);-webkit-backdrop-filter:blur(var(--fh-blur-sm));backdrop-filter:blur(var(--fh-blur-sm))}
.fh-qv__scrim{background:var(--fh-glass-ink);-webkit-backdrop-filter:blur(var(--fh-blur-sm));backdrop-filter:blur(var(--fh-blur-sm))}

/* Drawers sit above a blurred scrim, so they carry the strong tier and
   their inner sections use flat tints — blur stacked on blur muddies. */
.fh-drawer,.fh-qv__panel,.fh-cartpanel{
  background:var(--fh-glass-strong);
  -webkit-backdrop-filter:blur(var(--fh-blur-lg)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur-lg)) saturate(var(--fh-sat));
  border-left:1px solid var(--fh-glass-line);
  box-shadow:var(--fh-glass-shadow-lg)
}
.fh-cartpanel__head,.fh-cartpanel__foot{border-color:var(--fh-glass-line)}
.fh-cartpanel__foot{background:rgba(255,255,255,.42)}
.fh-drawer li{border-bottom-color:var(--fh-glass-line)}
.fh-cartpanel .remove_from_cart_button{background:rgba(255,255,255,.6)}

/* --- 21.4 pills, chips, badges, toolbars ------------------------- */
.fh-hero__badge,.fh-chip,.fh-pill,.fh-badge-new,.fh-quickview-btn,.fh-toolbar,
.fh-hotspot,.fh-cat__go,.fh-stepper button,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  -webkit-backdrop-filter:blur(var(--fh-blur-sm)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur-sm)) saturate(var(--fh-sat))
}
.fh-hero__badge,.fh-pill{background:var(--fh-glass);border-color:var(--fh-glass-line);box-shadow:var(--fh-glass-lift)}
.fh-pill:hover{background:var(--fh-glass-strong);border-color:var(--fh-glass-line)}
.fh-chip{background:var(--fh-glass-strong);border:1px solid var(--fh-glass-line);box-shadow:var(--fh-glass-shadow)}
.fh-badge-new,.fh-quickview-btn{
  background:var(--fh-glass-strong);border:1px solid var(--fh-glass-line);box-shadow:var(--fh-glass-shadow)
}
span.onsale,ul.products li.product .onsale{
  background:rgba(216,160,60,.82);
  -webkit-backdrop-filter:blur(var(--fh-blur-sm));backdrop-filter:blur(var(--fh-blur-sm));
  border:1px solid rgba(255,255,255,.45);box-shadow:var(--fh-glass-lift)
}
.fh-toolbar{background:var(--fh-glass-strong);border-color:var(--fh-glass-line);box-shadow:var(--fh-glass-shadow)}
.fh-cat__go{background:var(--fh-glass);border-color:var(--fh-glass-line)}
.fh-hotspot{background:var(--fh-glass-strong);border:1px solid var(--fh-glass-line)}
.fh-hotspot__card{background:var(--fh-glass-strong)}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{background:var(--fh-glass);border:1px solid var(--fh-glass-line)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--fh-green);border-color:var(--fh-green)}

/* Ghost and light buttons become glass; solid green stays solid so the
   primary action keeps its weight. The :not() guards matter — a
   WhatsApp button is rendered as `fh-btn--wa fh-btn--ghost`, and
   glassing the ghost would leave its white label on a white pane. */
.fh-btn--ghost:not(.fh-btn--wa){
  background:var(--fh-glass);border-color:var(--fh-glass-line-ink);
  -webkit-backdrop-filter:blur(var(--fh-blur-sm));backdrop-filter:blur(var(--fh-blur-sm));
  box-shadow:var(--fh-glass-lift)
}
.fh-btn--ghost:not(.fh-btn--wa):hover{background:var(--fh-green);border-color:var(--fh-green)}
.fh-btn--light:not(.fh-btn--wa){
  background:var(--fh-glass-strong);border-color:var(--fh-glass-line);
  -webkit-backdrop-filter:blur(var(--fh-blur));backdrop-filter:blur(var(--fh-blur))
}
/* WhatsApp green, frosted, with a border bright enough to hold the edge. */
.fh-btn--wa{
  background:rgba(28,146,79,.86);border-color:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(var(--fh-blur-sm)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur-sm)) saturate(var(--fh-sat));
  box-shadow:var(--fh-glass-lift-ink)
}
.fh-btn--wa:hover{background:#188047;border-color:rgba(255,255,255,.5)}

/* --- 21.5 product & category cards ------------------------------- */
.woocommerce ul.products li.product,ul.products li.product{
  background:var(--fh-glass-soft);
  -webkit-backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  border:1px solid var(--fh-glass-line);border-radius:var(--fh-r-lg);
  padding:.55rem .55rem 1rem;box-shadow:var(--fh-glass-shadow);
  transition:transform .5s var(--fh-ease),box-shadow .5s var(--fh-ease),background .4s var(--fh-ease)
}
.woocommerce ul.products li.product:hover,ul.products li.product:hover{
  background:var(--fh-glass);transform:translateY(-4px);box-shadow:var(--fh-glass-shadow-lg)
}
ul.products li.product a img,ul.products li.product img{border-radius:calc(var(--fh-r-lg) - 10px)}
/* the lift now belongs to the card, so the image only zooms */
ul.products li.product:hover img{transform:scale(1.03);box-shadow:none}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product .price,
.fh-loop-cat,
ul.products li.product .fh-loop-actions,
ul.products li.product .star-rating{padding-inline:.55rem}
.fh-loop-cat{margin-top:.85rem}

/* The department label lifts off the arch as a floating plate. */
.fh-cat__body{
  position:relative;z-index:2;margin:-30px .8rem 0;padding:.95rem 1.05rem;
  background:var(--fh-glass-strong);border:1px solid var(--fh-glass-line);border-radius:var(--fh-r);
  -webkit-backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  box-shadow:var(--fh-glass-shadow);align-items:center;
  transition:transform .5s var(--fh-ease),box-shadow .5s var(--fh-ease),background .4s var(--fh-ease)
}
.fh-cat:hover .fh-cat__body{transform:translateY(-6px);background:rgba(250,249,246,.86);box-shadow:var(--fh-glass-shadow-lg)}
.fh-bundle__imgs img{border-color:rgba(255,255,255,.72)}
.fh-bundle__save{background:rgba(255,255,255,.6);border:1px solid var(--fh-glass-line)}

/* --- 21.6 forms, tables, notices --------------------------------- */
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container--default .select2-selection--single,
.fh-quote__fields input,.fh-quote__fields select,.fh-quote__fields textarea,
.woocommerce .quantity .qty,.woocommerce .woocommerce-ordering select,
.fh-sizeguide table,input[type=text],input[type=email],input[type=tel],input[type=search],textarea{
  background:rgba(255,255,255,.55);border-color:var(--fh-glass-line-ink);
  -webkit-backdrop-filter:blur(var(--fh-blur-sm));backdrop-filter:blur(var(--fh-blur-sm))
}
.woocommerce form .form-row input.input-text:focus,.fh-quote__fields input:focus,
.fh-quote__fields textarea:focus,textarea:focus,input[type=text]:focus{background:rgba(255,255,255,.78)}
.fh-stepper{background:rgba(255,255,255,.46);border:1px solid var(--fh-glass-line)}
.fh-stepper button{background:rgba(255,255,255,.72)}
.woocommerce table.shop_table{
  background:var(--fh-glass-soft);border-color:var(--fh-glass-line);
  -webkit-backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat))
}
.woocommerce table.shop_table th{background:rgba(240,243,234,.6)}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.fh-pay-note,blockquote{
  background:var(--fh-glass-tint);border:1px solid var(--fh-glass-line);border-left:3px solid var(--fh-green);
  -webkit-backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  box-shadow:var(--fh-glass-lift)
}
.woocommerce-error{border-left-color:var(--fh-danger);background:rgba(251,236,235,.62)}
.fh-pay-note code{background:rgba(255,255,255,.72)}

/* --- 21.7 dark glass -------------------------------------------- */
.fh-cta,.fh-trade-hero{
  background:linear-gradient(150deg,rgba(30,65,33,.94),rgba(18,42,21,.88));
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(var(--fh-blur-lg)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur-lg)) saturate(var(--fh-sat));
  box-shadow:var(--fh-glass-shadow-lg),var(--fh-glass-lift-ink)
}
.fh-bg-green{
  background:linear-gradient(160deg,rgba(30,65,33,.92),rgba(18,42,21,.86));
  -webkit-backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat))
}
.fh-trade-stats div{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(var(--fh-blur-sm));backdrop-filter:blur(var(--fh-blur-sm));
  box-shadow:var(--fh-glass-lift-ink)
}
.fh-footer{
  background:linear-gradient(180deg,rgba(18,42,21,.92),rgba(11,28,14,.96));
  -webkit-backdrop-filter:blur(var(--fh-blur-lg)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur-lg)) saturate(var(--fh-sat))
}
.fh-social a,.fh-paylogos span{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(var(--fh-blur-sm));backdrop-filter:blur(var(--fh-blur-sm));
  box-shadow:var(--fh-glass-lift-ink)
}
.fh-social a:hover{background:rgba(157,178,135,.28);border-color:rgba(255,255,255,.34)}
.fh-marquee--green{
  background:linear-gradient(90deg,rgba(30,65,33,.9),rgba(18,42,21,.82));
  -webkit-backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur)) saturate(var(--fh-sat))
}
.fh-marquee{border-color:var(--fh-glass-line)}
.fh-stickybuy{
  background:var(--fh-glass-strong);border-top-color:var(--fh-glass-line);
  -webkit-backdrop-filter:blur(var(--fh-blur-lg)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur-lg)) saturate(var(--fh-sat))
}
.fh-wa-float{
  background:rgba(31,157,85,.86);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(var(--fh-blur-sm)) saturate(var(--fh-sat));
  backdrop-filter:blur(var(--fh-blur-sm)) saturate(var(--fh-sat))
}

/* --- 21.8 the ways out ------------------------------------------- */
/* No backdrop-filter (older Firefox with the flag off, some in-app
   browsers): swap every frosted surface for an opaque one. Alpha alone
   over the ambient wash would leave text sitting on a muddy field. */
@supports not ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  body::before{opacity:.45}
  .fh-glass,.fh-panel,.fh-bundle,.fh-quote,.fh-card,.fh-entry,.fh-sidebar .widget,
  .fh-buycard,.fh-qitem,.fh-quote__panel,.fh-hotspot__card,.fh-search__box,.fh-nav .sub-menu,
  .woocommerce-cart .cart-collaterals .cart_totals,.woocommerce #payment,
  .woocommerce ul.products li.product,ul.products li.product,
  .fh-cat__body,.fh-chip,.fh-badge-new,.fh-quickview-btn,.fh-toolbar,.fh-hotspot,
  .fh-header,.fh-drawer,.fh-qv__panel,.fh-cartpanel,.fh-stickybuy,.woocommerce table.shop_table{
    background:#fff
  }
  .fh-hero__badge,.fh-pill,.fh-cat__go,.fh-btn--ghost:not(.fh-btn--wa),.fh-btn--light:not(.fh-btn--wa),
  .fh-search input[type=search],.fh-stepper button,
  .woocommerce nav.woocommerce-pagination ul li a{background:var(--fh-cream)}
  .fh-topbar,.fh-footer,.fh-marquee--green{background:var(--fh-green-dark)}
  .fh-cta,.fh-trade-hero,.fh-bg-green{background:var(--fh-green)}
  .fh-bg-mist{background:var(--fh-sage-mist)}
  .fh-btn--wa{background:#1f9d55;border-color:#1f9d55}
  .fh-wa-float{background:#1f9d55}
  .fh-search,.fh-overlay,.fh-qv__scrim{background:rgba(18,42,21,.72)}
  .woocommerce-message,.woocommerce-info,.fh-pay-note,blockquote{background:var(--fh-sage-mist)}
  .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
  .woocommerce form .form-row select,.fh-quote__fields input,.fh-quote__fields select,
  .fh-quote__fields textarea,.woocommerce .quantity .qty,
  .woocommerce .woocommerce-ordering select{background:#fff}
}

/* Someone who has asked for less transparency gets none of it. */
@media (prefers-reduced-transparency:reduce){
  body::before{display:none}
  .fh-glass,.fh-panel,.fh-bundle,.fh-quote,.fh-card,.fh-entry,.fh-sidebar .widget,
  .fh-buycard,.fh-qitem,.fh-quote__panel,.fh-hotspot__card,.fh-search__box,.fh-nav .sub-menu,
  .woocommerce-cart .cart-collaterals .cart_totals,.woocommerce #payment,
  .woocommerce ul.products li.product,ul.products li.product,
  .fh-cat__body,.fh-chip,.fh-badge-new,.fh-quickview-btn,.fh-toolbar,.fh-hotspot,
  .fh-header,.fh-drawer,.fh-qv__panel,.fh-cartpanel,.fh-stickybuy,.woocommerce table.shop_table{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none
  }
  .fh-topbar,.fh-footer,.fh-marquee--green{background:var(--fh-green-dark);-webkit-backdrop-filter:none;backdrop-filter:none}
  .fh-btn--wa{background:#1f9d55;border-color:#1f9d55;-webkit-backdrop-filter:none;backdrop-filter:none}
  .fh-wa-float{background:#1f9d55;-webkit-backdrop-filter:none;backdrop-filter:none}
  .fh-cta,.fh-trade-hero,.fh-bg-green{background:var(--fh-green);-webkit-backdrop-filter:none;backdrop-filter:none}
  .fh-bg-mist{background:var(--fh-sage-mist)}
  .fh-search,.fh-overlay,.fh-qv__scrim{background:rgba(18,42,21,.8);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Phones: a grid of twelve blurred cards is the one place this gets
   expensive, so cards go opaque below 640px and only the chrome,
   overlays and hero furniture stay frosted. */
@media (max-width:640px){
  :root{--fh-blur:12px;--fh-blur-lg:18px;--fh-blur-sm:7px}
  .woocommerce ul.products li.product,ul.products li.product{
    -webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.82);padding:.45rem .45rem .85rem
  }
  .fh-bundle,.fh-quote,.fh-card,.fh-qitem{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.86)}
  body::before{animation:none}
}

@media print{
  body::before{display:none}
  .fh-glass,.fh-panel,.fh-card,.fh-entry,ul.products li.product{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none
  }
}

/* =============================================================
   22. Colour
   The palette was carrying the brand through accents only, on an
   almost uniformly cream page. This layer gives the page a rhythm of
   tinted bands, warms the glass off pure white and puts sage, tan and
   mustard on the small parts that were reading grey.
============================================================= */

/* --- 22.1 bands and wash ----------------------------------------- */
/* Tinted bands are translucent so the ambient wash reads through them
   and the glass panels on top still have something to refract. */
.fh-bg-mist{
  background:linear-gradient(168deg,rgba(230,236,223,.82),rgba(240,243,234,.62) 55%,rgba(247,244,237,.78))
}
.fh-bg-sage{
  background:linear-gradient(168deg,rgba(217,228,205,.86),rgba(230,236,223,.7))
}
.fh-bg-sand{
  background:linear-gradient(168deg,rgba(240,232,215,.8),rgba(242,239,232,.62) 58%,rgba(233,238,224,.6))
}
/* Bands butt straight up against cream; a hairline keeps the seam crisp. */
.fh-bg-mist,.fh-bg-sage,.fh-bg-sand{border-block:1px solid rgba(157,178,135,.22)}

body::before{
  background:
    radial-gradient(38vw 38vw at 12% 16%,rgba(157,178,135,.52),transparent 62%),
    radial-gradient(32vw 32vw at 88% 6%,rgba(201,169,106,.38),transparent 64%),
    radial-gradient(44vw 44vw at 76% 58%,rgba(46,90,50,.24),transparent 66%),
    radial-gradient(28vw 28vw at 22% 86%,rgba(216,160,60,.22),transparent 62%),
    radial-gradient(30vw 30vw at 50% 40%,rgba(157,178,135,.20),transparent 68%)
}

/* Warm the glass off pure white so panels read as part of the palette. */
:root{
  --fh-glass-soft:rgba(250,251,246,.44);
  --fh-glass:rgba(250,251,246,.60);
  --fh-glass-strong:rgba(250,250,244,.80);
}

/* --- 22.2 the green band ----------------------------------------- */
/* Cards inside a green section keep their own dark text — they are
   light glass on deep green, not part of the inverted band. */
.fh-bg-green .fh-quote,.fh-bg-green .fh-card,.fh-bg-green .fh-bundle{
  color:var(--fh-ink);background:rgba(252,252,248,.9);border-color:rgba(255,255,255,.6)
}
.fh-bg-green .fh-quote{border-top-color:var(--fh-tan)}
.fh-note{text-align:center;font-size:.8rem;color:var(--fh-muted);margin:1.6rem 0 0}
.fh-bg-green .fh-note{color:rgba(250,249,246,.66)}
.fh-bg-green .fh-quote p,.fh-bg-green .fh-card p{color:var(--fh-ink)}
.fh-bg-green .fh-quote__who{color:var(--fh-muted)}
.fh-bg-green .fh-quote__who strong,.fh-bg-green .fh-card h3{color:var(--fh-green-dark)}
.fh-bg-green .fh-quote::before{color:rgba(157,178,135,.34)}
.fh-bg-green .fh-card__meta{color:var(--fh-muted)}
.fh-bg-green .fh-link-arrow{color:var(--fh-tan)}

/* --- 22.3 accents ------------------------------------------------ */
/* The trust points sat as grey line art; each icon now gets a sage disc. */
.fh-strip__item svg{
  width:46px;height:46px;padding:8px;border-radius:50%;
  background:linear-gradient(150deg,rgba(157,178,135,.42),rgba(230,236,223,.85));
  color:var(--fh-green-dark);margin-top:0;
  border:1px solid rgba(157,178,135,.55);box-shadow:var(--fh-glass-lift)
}
.fh-strip__item h4{color:var(--fh-green-dark)}

.fh-eyebrow::before{background:var(--fh-tan);opacity:1;height:2px}
.fh-loop-cat{color:var(--fh-green-mid);font-weight:600}
.fh-bundle__save{background:var(--fh-sage-soft);border-color:rgba(157,178,135,.45);color:var(--fh-green-dark)}
.fh-quote{border-top:3px solid var(--fh-tan)}
.fh-quote__stars{color:var(--fh-mustard)}
.fh-cat__img{background:var(--fh-sage-soft)}
.fh-cat__go{border-color:rgba(157,178,135,.5);color:var(--fh-green)}
.fh-hero__badge{background:rgba(230,236,223,.72);border-color:rgba(157,178,135,.45);color:var(--fh-green-dark)}
.fh-hero__blob{opacity:.72}
.fh-hero__ring{border-color:rgba(201,169,106,.5);border-width:2px}
.fh-pill{border-color:rgba(157,178,135,.38)}
.fh-pill:hover{background:var(--fh-sage-soft);border-color:var(--fh-sage)}
.fh-marquee:not(.fh-marquee--green){
  background:linear-gradient(90deg,rgba(230,236,223,.5),rgba(242,239,232,.42),rgba(230,236,223,.5));
  border-block-color:rgba(157,178,135,.3)
}
.fh-marquee:not(.fh-marquee--green) span{color:var(--fh-green)}
.fh-marquee span::after{background:var(--fh-mustard)}
.fh-marquee--green span::after{background:var(--fh-tan)}
.fh-list-check svg{color:var(--fh-green-mid)}
.fh-product-meta svg{color:var(--fh-green-mid)}
.fh-footer h4{color:var(--fh-tan)}
.fh-footer .fh-social a:hover{background:var(--fh-sage);border-color:var(--fh-sage);color:var(--fh-green-dark)}
.fh-wordmark{-webkit-text-stroke-color:rgba(157,178,135,.4)}
.woocommerce-message,.woocommerce-info{border-left-color:var(--fh-sage)}

/* Sale and new badges: mustard for money, sage for newness. */
.fh-badge-new{background:rgba(230,236,223,.9);color:var(--fh-green-dark);border-color:rgba(157,178,135,.5)}

@media (max-width:520px){
  .fh-strip__item svg{width:40px;height:40px;padding:7px}
}

/* a listing still waiting on its price */
.fh-ask-price{
  display:inline-block;font-size:.86rem;font-weight:600;color:var(--fh-green-dark);
  background:var(--fh-sage-soft);border:1px solid rgba(157,178,135,.5);
  border-radius:999px;padding:.18em .8em
}

/* =============================================================
   23. Phones
   The grid columns above can now shrink; this section deals with the
   individual things that were wider than a phone, the controls that were
   too small to hit, and the labels that were too small to read.
============================================================= */

/* --- 23.1 things that were forcing a sideways scroll -------------- */
/* 35 pages of products in a nowrap flex row measured 450px. */
.woocommerce nav.woocommerce-pagination ul{flex-wrap:wrap;row-gap:.45rem}

/* A textarea carries a `cols` attribute, and its min-content is that many
   characters wide — 372px on a 390px phone. Same for any stray fixed-width
   field in a comment or checkout form. */
textarea,input[type=text],input[type=email],input[type=url],input[type=tel],
input[type=search],input[type=number],input[type=password],select{max-width:100%}
.comment-form textarea,.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url]{width:100%;box-sizing:border-box}
.comment-form p{max-width:100%}

/* WooCommerce's block markup (the cart's "New in store" grid, block columns)
   brings its own widths and negative margins, which escaped the article box. */
.fh-entry .wc-block-grid,.fh-entry .wc-block-grid__products,
.fh-entry .wp-block-columns,.fh-entry .wp-block-group,
.wc-block-components-notices,.wp-block-woocommerce-cart{max-width:100%}
.fh-entry .wc-block-grid__products{margin-left:0;margin-right:0}
.fh-entry img,.fh-entry iframe,.fh-entry video{max-width:100%;height:auto}
/* long product names and URLs should wrap rather than push the page */
.fh-entry,.fh-card__body,.fh-qitem__name,ul.products li.product{overflow-wrap:break-word}

@media (max-width:900px){
  /* tables of sizes and prices scroll inside themselves, never the page */
  .fh-entry table,.woocommerce table.shop_table{display:block;overflow-x:auto;width:100%}
  .fh-entry table{-webkit-overflow-scrolling:touch}
}

/* --- 23.2 department cards at phone width ------------------------ */
@media (max-width:640px){
  /* The floating plate could not fit a word like "Organization" beside the
     arrow, so the card's min-content pushed the grid wider than the screen.
     On a phone the whole card is the tap target; the arrow is decoration. */
  .fh-cat__go{display:none}
  .fh-cat__body{
    margin:-26px .5rem 0;padding:.75rem .85rem;gap:.4rem;
    flex-direction:column;align-items:flex-start
  }
  .fh-cat__body h3{font-size:.98rem;overflow-wrap:anywhere;hyphens:auto}
  .fh-cat__body span{font-size:.76rem}
}

/* --- 23.3 controls big enough to hit ----------------------------- */
/* 44px is the accessibility guideline and about the width of an adult thumb. */
@media (max-width:900px){
  .fh-btn,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
  ul.products li.product a.button,ul.products li.product .button,
  .wp-block-button__link,.fh-quote__fields button,button[type=submit],input[type=submit]{
    min-height:44px
  }
  .fh-icon-btn{width:46px;height:46px}
  .fh-stepper button{width:40px;height:40px}
  .fh-stepper input{width:52px;font-size:1rem}
  .fh-hotspot{width:42px;height:42px}
  .woocommerce .woocommerce-ordering select,.fh-toolbar select,
  .fh-quote__fields select,.fh-quote__fields input,.fh-quote__fields textarea{
    min-height:44px;font-size:16px            /* 16px stops iOS zooming on focus */
  }
  .woocommerce .quantity .qty{min-height:44px;font-size:16px}
  .fh-pill{min-height:38px;padding:.55em 1em}
  .fh-drawer a{padding-block:.85rem}
  .fh-social a{width:44px;height:44px}
}

/* --- 23.4 legible labels ----------------------------------------- */
@media (max-width:900px){
  /* nothing below 12px: the tracked-out uppercase labels were 10.9–11.8px */
  .fh-loop-cat{font-size:.75rem;letter-spacing:.14em}
  .fh-eyebrow{font-size:.75rem;letter-spacing:.18em}
  .fh-card__meta{font-size:.75rem}
  .fh-footer h4{font-size:.78rem}
  .fh-badge-new,.fh-bundle__save{font-size:.75rem}
  .fh-quote__note,.fh-wa-block small,.fh-note{font-size:.78rem}
  .fh-topbar{font-size:.8rem}
  .fh-marquee--green span{font-size:.78rem}
}

/* --- 23.5 floating furniture ------------------------------------- */
@media (max-width:900px){
  /* the WhatsApp button must not sit on top of the sticky buy bar or the
     last row of content */
  .fh-wa-float{width:54px;height:54px;right:14px}
  .fh-footer{padding-bottom:78px}
}

/* --- 23.6 the last of the small targets -------------------------- */
@media (max-width:900px){
  /* Breadcrumbs and card titles are real navigation on a phone, and both were
     15–25px tall. Padding rather than font size, so the type stays calm. */
  .woocommerce-breadcrumb,.fh-breadcrumb{line-height:2.4}
  .woocommerce-breadcrumb a,.fh-breadcrumb a{display:inline-block;padding:.45rem .1rem}
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2{padding-block:.6rem .25rem!important}
  .fh-card__body h3 a,.fh-card__body h3{display:block;padding-block:.3rem}
  .fh-link-arrow{display:inline-flex;padding:.6rem 0;min-height:44px;align-items:center}
  .fh-footer ul a,.fh-topbar a{display:inline-block;padding-block:.35rem}
  .fh-paylogos span{font-size:.78rem;padding:.35em .8em}
}

/* WordPress's own pagination (search, blog) never got the WooCommerce
   treatment, so its page numbers were 10px wide. Style both the same. */
.page-numbers{display:inline-flex}
nav.navigation .nav-links,.woocommerce nav.woocommerce-pagination ul{flex-wrap:wrap}
nav.navigation .nav-links{display:flex;gap:.45rem;justify-content:center;flex-wrap:wrap}
.fh-content .page-numbers:not(ul),
nav.navigation .page-numbers{
  min-width:44px;min-height:44px;align-items:center;justify-content:center;
  border-radius:999px;background:var(--fh-glass);border:1px solid var(--fh-glass-line);
  color:var(--fh-green-dark);padding:0 .7rem;font-size:.92rem
}
.fh-content .page-numbers.current,nav.navigation .page-numbers.current{
  background:var(--fh-green);color:#fff;border-color:var(--fh-green)
}

/* --- 23.7 list and card links ------------------------------------ */
@media (max-width:900px){
  .fh-bundle__list li a,.fh-bundle__list li{padding-block:.5rem}
  .fh-bundle__list li a{display:block}
  .fh-bundle__list{gap:.15rem}
  .fh-card__body h3{padding-block:.45rem}
  .fh-footer ul a{padding-block:.5rem}
  .fh-quote__summary li{padding-block:.3rem}
}

/* --- 23.8 the stragglers ----------------------------------------- */
@media (max-width:900px){
  .fh-bundle__list li a{padding-block:.7rem}
  /* The gallery magnifier is icon-only, so width matters as much as height.
     WooCommerce styles it through a longer selector, so match that specificity. */
  .woocommerce div.product div.images .woocommerce-product-gallery__trigger,
  .woocommerce-product-gallery__trigger{
    width:46px;height:46px;display:grid!important;place-items:center;
    font-size:1.1rem;line-height:1;padding:0
  }
  /* "Categories: Kitchen & Dining, Kitchen Tools" under the buy card */
  .product_meta a,.posted_in a,.sku_wrapper{display:inline-block;padding-block:.45rem}
  .product_meta{line-height:2}
  /* previous/next post links */
  .post-navigation a,.nav-links a,.nav-previous a,.nav-next a{display:inline-block;padding-block:.5rem}
  /* search and journal result titles */
  .fh-card__body h3 a{display:block;padding-block:.4rem}
}

/* --- 23.9 last two ------------------------------------------------ */
@media (max-width:900px){
  .fh-postnav a{display:inline-block;padding-block:.6rem;min-height:44px;display:inline-flex;align-items:center}
  .fh-card__body h3 a{padding-block:.75rem}
}

/* --- 23.10 card label vs badge ------------------------------------ */
@media (max-width:900px){
  /* A two-line department label ran underneath the New / sale badge, which sits
     absolutely at the top right of the card. Reserve the badge's width. */
  /* One tidy line, clear of the badge. Wrapping split words mid-letter, because
     the card sets overflow-wrap:break-word for long product names. */
  .fh-loop-cat{
    padding-right:52px;display:block;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    overflow-wrap:normal;word-break:normal
  }
}