/* =========================================================
   PREMIUM HEADER
   Ported from design/premium-header.html. Every value below
   comes from assets/css/base/tokens.css  see BRAND-IDENTITY.md
   for the token reference. Class names are namespaced "ph-"
   (all scoped inside .ph-root) so this can be dropped into a
   WooCommerce header independently of any other section.
   ========================================================= */

.ph-root {
  /* display:contents removes .ph-root's own box from layout  a sticky
     descendant can only stay pinned for as long as its DIRECT parent
     still has height left to scroll through, and .ph-root (which
     otherwise only wraps the header + two position:fixed siblings that
     contribute no flow height) is barely taller than the header itself.
     With no box of its own, .ph-root's children lay out as if they were
     direct children of #page instead  which spans the whole page
     (header + <main> + footer)  giving .ph-sticky-wrap below real room
     to stay stuck for the full scroll instead of un-sticking almost
     immediately. Inheritance (font-family) and the box-sizing reset
     below still apply either way  display:contents only changes box
     generation, not the cascade or the DOM. */
  display: contents;
  font-family: var(--fm-font-sans);
}
.ph-root, .ph-root * { box-sizing: border-box; margin: 0; padding: 0; }
/* :where() keeps these resets at zero specificity so any single-class
   component rule below (e.g. .ph-subnav-link) wins automatically 
   without it, ".ph-root a" (a class + a tag) outranks a plain
   component class and silently overrides its color. */
.ph-root :where(a) { color: inherit; text-decoration: none; }
.ph-root :where(ul) { list-style: none; }
.ph-root :where(button) { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
.ph-root :where(input) { font: inherit; }

.ph-header {
  /* Same display:contents reasoning as .ph-root above, one level down 
     <header> itself only wraps the topbar + .ph-sticky-wrap, so it's
     just as short; removing its box lets .ph-sticky-wrap's containing
     block resolve all the way up to #page. role="banner" on the
     element (see site-header.php) keeps its landmark semantics, since
     display:contents can otherwise drop that in some browsers. Visually
     nothing is lost  the topbar and .ph-sticky-wrap both already paint
     their own background (below), so <header>'s own background here
     was always redundant. */
  display: contents;
}
/* The topbar (trust badges, phone, currency, social) is NOT sticky  it
   scrolls away normally with the page, like regular content. Only the
   main row + sub navigation, wrapped in .ph-sticky-wrap below, pin to
   the top of the viewport. This is a plain, unconditional
   position:sticky (no JS involved in making it stick)  the only thing
   JS still toggles is .is-stuck, purely for the compact-padding/shadow
   cosmetic once you've scrolled. */
.ph-sticky-wrap {
  position: sticky;
  top: 0;
  z-index: var(--fm-z-header);
  background: var(--fm-black);
  transition: box-shadow var(--fm-duration-med) var(--fm-ease);
}
.ph-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ---------------- topbar ---------------- */
/* Height is intentionally auto now, not the old fixed 32px  the search
   bar (moved here from the main row, see site-header.php) needs more
   room than the contact/social row alone did. .ph-topbar-inner's own
   padding controls the bar's actual thickness. */
.ph-topbar {
  background: #C9A236;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
/* Every topbar text/icon color below is pinned dark instead of following
   --fm-cream-dim/--fm-gold (both designed for a near-black strip)  those
   would have poor or invisible contrast against this solid gold fill.
   Pinned rather than theme-scoped, so the topbar reads the same way in
   both dark and light mode  unlike the rest of this header, its
   background is no longer a token that flips with the theme.
   .ph-mobile-utility (its own mobile-only currency/language bar, see
   site-header.php) shares this same solid-gold treatment, so every rule
   here applies to both. */
.ph-topbar,
.ph-topbar .ph-contact-list,
.ph-topbar .ph-select,
.ph-topbar .ph-gtranslate .gtranslate_wrapper > a.glink,
.ph-mobile-utility,
.ph-mobile-utility .ph-select,
.ph-mobile-utility .ph-gtranslate .gtranslate_wrapper > a.glink { color: #000000; }
.ph-topbar .ph-contact-item .ph-contact-icon-line,
.ph-topbar .ph-select svg.ph-caret,
.ph-topbar .ph-social svg,
.ph-mobile-utility .ph-select svg.ph-caret { stroke: #000000; }
.ph-topbar .ph-contact-item .ph-contact-icon-fill { fill: #000000; }
.ph-topbar .ph-contact-whatsapp .ph-contact-icon-fill {
  fill: #25D366;
  stroke: #ffffff;
  stroke-width: 16px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.ph-topbar .ph-select.ph-currency .ph-currency-trigger,
.ph-topbar .ph-gtranslate select.gt_selector,
.ph-mobile-utility .ph-select.ph-currency .ph-currency-trigger,
.ph-mobile-utility .ph-gtranslate select.gt_selector { color: #000000; }
/* Hover/focus previously repeated the same #000000 as the resting state
   here, which silently cancelled any hover feedback (currency, language,
   social all looked dead on hover)  white gives a real, visible state
   change against the gold fill instead. */
.ph-topbar .ph-select.ph-currency .ph-currency-trigger:hover,
.ph-topbar .ph-select.ph-currency .ph-currency-trigger:focus,
.ph-topbar .ph-gtranslate select.gt_selector:hover,
.ph-topbar .ph-gtranslate select.gt_selector:focus,
.ph-topbar .ph-gtranslate .gtranslate_wrapper > a.glink:hover,
.ph-mobile-utility .ph-select.ph-currency .ph-currency-trigger:hover,
.ph-mobile-utility .ph-select.ph-currency .ph-currency-trigger:focus,
.ph-mobile-utility .ph-gtranslate select.gt_selector:hover,
.ph-mobile-utility .ph-gtranslate select.gt_selector:focus,
.ph-mobile-utility .ph-gtranslate .gtranslate_wrapper > a.glink:hover { color: #ffffff; }
.ph-topbar .ph-select.ph-currency:hover .ph-caret,
.ph-mobile-utility .ph-select.ph-currency:hover .ph-caret { stroke: #ffffff; }
.ph-topbar .ph-select.ph-gtranslate:has(select.gt_selector)::after,
.ph-mobile-utility .ph-select.ph-gtranslate:has(select.gt_selector)::after {
  border-right-color: #000000;
  border-bottom-color: #000000;
}
/* ---- topbar hover: premium treatment ----
   A thin accent line sweeps in from the center under each text link
   (the same accent-line language as the main nav's .ph-subnav-link::after),
   with icons/text shifting to white, rather than a flat color swap alone. */
.ph-topbar .ph-contact-item a,
.ph-topbar .ph-select.ph-currency .ph-currency-trigger,
.ph-topbar .ph-gtranslate .gtranslate_wrapper > a.glink {
  position: relative;
}
.ph-topbar .ph-contact-item a::after,
.ph-topbar .ph-select.ph-currency .ph-currency-trigger::after,
.ph-topbar .ph-gtranslate .gtranslate_wrapper > a.glink::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--fm-duration-base) var(--fm-ease);
  pointer-events: none;
}
.ph-topbar .ph-contact-item a:hover::after,
.ph-topbar .ph-contact-item a:focus-visible::after,
.ph-topbar .ph-select.ph-currency .ph-currency-trigger:hover::after,
.ph-topbar .ph-select.ph-currency .ph-currency-trigger:focus::after,
.ph-topbar .ph-gtranslate .gtranslate_wrapper > a.glink:hover::after { transform: scaleX(1); }

.ph-topbar .ph-social svg,
.ph-topbar .ph-contact-item svg {
  transition: stroke var(--fm-duration-fast) var(--fm-ease), fill var(--fm-duration-fast) var(--fm-ease);
}
.ph-topbar .ph-social a:hover svg { stroke: #ffffff; }

.ph-topbar .ph-contact-item a:hover,
.ph-topbar .ph-contact-item a:focus-visible { color: #ffffff; opacity: 1; letter-spacing: 0.8px; }
.ph-topbar .ph-contact-item a:hover .ph-contact-icon-line,
.ph-topbar .ph-contact-item a:focus-visible .ph-contact-icon-line { stroke: #ffffff; }
.ph-topbar .ph-contact-item:not(.ph-contact-whatsapp) a:hover .ph-contact-icon-fill,
.ph-topbar .ph-contact-item:not(.ph-contact-whatsapp) a:focus-visible .ph-contact-icon-fill { fill: #ffffff; }
.ph-topbar .ph-select.ph-currency .ph-currency-trigger:hover,
.ph-topbar .ph-select.ph-currency .ph-currency-trigger:focus { letter-spacing: 0.9px; }

/* Hidden by default (desktop/tablet already has currency + language in
   .ph-topbar above)  shown only at the same 520px cutoff where that
   topbar disappears, see the @media block near the bottom of this file. */
.ph-mobile-utility { display: none; }

.ph-topbar-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 11px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Search, moved here from the main row (see site-header.php)  sits
   between the contact links and currency/language/social, and gets its
   own white-on-gold treatment instead of the translucent-dark styling
   .ph-search normally has for the near-black main row (that combination
   would read as gold-on-gold and nearly disappear here). Kept to a fixed
   flex-basis rather than filling the whole middle gap, so it doesn't
   crowd out the contact links or the social icons on medium widths. */
.ph-topbar .ph-search {
  flex: 1 1 360px;
  max-width: 420px;
  height: 36px;
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.18);
}
.ph-topbar .ph-search:focus-within {
  border-color: #000000;
  background: #ffffff;
}
.ph-topbar .ph-search input { color: #000000; }
.ph-topbar .ph-search input::placeholder { color: rgba(0, 0, 0, 0.45); }
.ph-topbar .ph-search-btn { width: 46px; height: 30px; background: var(--fm-gold); }
.ph-topbar .ph-search-btn:hover { background: #b8912e; }
.ph-topbar .ph-search-btn svg { stroke: #000000; }

/* Left side of the topbar: contact channels only (phone, WhatsApp, email).
   Icons/text are sized well above the old trust-badge glyphs (21px/13px vs
   13px/11.5px) to read as the topbar's main visual anchor. */
.ph-contact-list {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  overflow: hidden;
}
.ph-contact-item a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fm-text-13);
  font-weight: 500;
  letter-spacing: 0.4px;
  color: inherit;
  transition: opacity var(--fm-duration-fast) var(--fm-ease), color var(--fm-duration-fast) var(--fm-ease), letter-spacing var(--fm-duration-base) var(--fm-ease);
}
.ph-contact-item a:hover,
.ph-contact-item a:focus-visible { opacity: 0.65; }
.ph-contact-item svg { width: 21px; height: 21px; flex-shrink: 0; }
.ph-contact-item .ph-contact-icon-line { stroke: var(--fm-gold); fill: none; stroke-width: 1.6; }
.ph-contact-item .ph-contact-icon-fill { fill: var(--fm-gold); stroke: none; }
/* WhatsApp keeps its own brand green rather than the shared gold  it's
   the one icon people scan the topbar for, and green is what makes it
   instantly recognizable as WhatsApp. Selector needs to outrank the
   pinned-black override below (same 3-class weight), hence the extra
   .ph-contact-whatsapp qualifier on both the base and topbar-scoped rule.
   A thin white outline traces the glyph so it stays legible sitting
   directly on the gold topbar fill, where a flat green shape alone would
   blend in at this icon size. */
.ph-contact-whatsapp .ph-contact-icon-fill {
  fill: #25D366;
  stroke: #ffffff;
  stroke-width: 16px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.ph-topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

.ph-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fm-text-11-5);
  letter-spacing: 0.6px;
  color: var(--fm-cream-dim);
  cursor: pointer;
}
.ph-select svg.ph-caret { width: 9px; height: 9px; stroke: var(--fm-cream-dim); fill: none; stroke-width: 2; }

/* Currency switcher  a custom trigger + listbox (assets/js/header.js's
   setupCurrencySwitcher()) instead of a native <select>. A native select's
   OPEN option list is OS-rendered chrome in most browsers (Chrome/Edge on
   Windows paint it with the OS's own highlight blue, ignoring page CSS
   entirely), so there was no way to make that popup match the site's own
   look; this trades the native control for a fully-styled one with the
   same closed-state appearance as before. */
.ph-currency-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: var(--fm-text-11-5);
  letter-spacing: 0.6px;
  color: var(--fm-cream-dim);
  cursor: pointer;
  transition: color var(--fm-duration-fast) var(--fm-ease), letter-spacing var(--fm-duration-base) var(--fm-ease);
}
.ph-currency-trigger:hover,
.ph-currency-trigger:focus-visible,
.ph-select.ph-currency.is-open .ph-currency-trigger { color: var(--fm-cream); }
.ph-select.ph-currency.is-open .ph-caret { transform: rotate(180deg); }
.ph-caret { transition: transform var(--fm-duration-fast) var(--fm-ease); }

.ph-currency-list {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 108px;
  background: var(--fm-surface);
  border-top: 2px solid var(--fm-gold);
  box-shadow: var(--fm-shadow-flyout);
  padding: 6px 0;
  z-index: 200;
}
.ph-currency-list[hidden] { display: none; }
.ph-currency-list [role="option"] {
  padding: 8px 16px;
  font-size: var(--fm-text-13);
  letter-spacing: 0.3px;
  color: var(--fm-ink-soft);
  cursor: pointer;
  transition: background var(--fm-duration-fast) var(--fm-ease), color var(--fm-duration-fast) var(--fm-ease), padding-left var(--fm-duration-fast) var(--fm-ease);
}
.ph-currency-list [role="option"]:hover,
.ph-currency-list [role="option"]:focus,
.ph-currency-list [role="option"][aria-selected="true"] {
  background: rgba(var(--fm-rgb-gold), 0.1);
  color: var(--fm-gold-deep);
  padding-left: 20px;
  outline: none;
}
.ph-currency-list [role="option"][aria-selected="true"] { font-weight: 600; }

/* GTranslate's "Widget look" (wp-admin > Settings > GTranslate) decides
   what actually gets injected into .gtranslate_wrapper below  a native
   <select> for "Simple dropdown", an <a> trigger + flag for "Popup"/
   "Flags", both together for "Nice dropdown with flags", etc.  and it's
   deliberately not pinned to one look here (see site-header.php), so all
   of the shapes below are covered rather than just whichever one was
   selected when this was written. Anything already SVG/image-based (flag
   icons, the popup's own modal) is left alone; this only recolors plain
   text/native-control chrome so it doesn't look like a foreign widget
   dropped into a dark header of custom `.ph-select` items. */
.ph-gtranslate .gtranslate_wrapper { display: flex; align-items: center; gap: 4px; }

/* "Simple dropdown"  a bare native <select>, which otherwise renders with
   the browser's own white/boxed chrome. Its OPEN option list is still the
   browser/OS's native popup  CSS can't reach into that. */
.ph-select.ph-gtranslate:has(select.gt_selector) { padding-right: 13px; }
.ph-select.ph-gtranslate:has(select.gt_selector)::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--fm-cream-dim);
  border-bottom: 1.5px solid var(--fm-cream-dim);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.ph-gtranslate select.gt_selector {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: none; border: none; outline: none; box-shadow: none;
  margin: 0; padding: 0;
  font-family: inherit; font-size: var(--fm-text-11-5); letter-spacing: 0.6px;
  color: var(--fm-cream-dim); cursor: pointer;
}
.ph-gtranslate select.gt_selector::-ms-expand { display: none; }
.ph-gtranslate select.gt_selector:hover,
.ph-gtranslate select.gt_selector:focus { color: var(--fm-cream); }
.ph-gtranslate select.gt_selector option { color: #000000; background: #fff; }

/* "Popup" / "Flags" / "Language names"  an <a class="glink"> trigger
   (flag + language name + a hardcoded grey â–¼). Scoped to a *direct* child
   of the wrapper so this only touches that trigger, never the language
   links inside the popup's own list/modal (nested two levels deeper,
   and meant to stay on the plugin's own light popup background). */
.ph-gtranslate .gtranslate_wrapper > a.glink {
  display: flex; align-items: center; gap: 4px;
  color: var(--fm-cream-dim); text-decoration: none;
  font-family: inherit; font-size: var(--fm-text-11-5); letter-spacing: 0.6px;
}
.ph-gtranslate .gtranslate_wrapper > a.glink:hover { color: var(--fm-cream); }
.ph-gtranslate .gtranslate_wrapper > a.glink img { border-radius: var(--fm-radius-sm); vertical-align: middle; }
.ph-gtranslate .gtranslate_wrapper > a.glink span:last-of-type { color: inherit !important; }

.ph-social {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ph-social svg { width: 21px; height: 21px; stroke: var(--fm-cream-dim); fill: none; stroke-width: 1.5; transition: stroke var(--fm-duration-fast) var(--fm-ease); }
.ph-social a:hover svg { stroke: var(--fm-gold); }

/* ---------------- main row ---------------- */
/* Logo, nav (.ph-subnav) and account/wishlist/cart now share this one row
   instead of nav getting its own full-width row below  see
   site-header.php's ph-main-inner. Nav sits between logo and actions as a
   flexible middle section (flex:1, min-width:0) so it's what shrinks
   under pressure; logo and actions keep their natural width
   (flex-shrink:0) so they never get squeezed. */
.ph-main {
  border-bottom: 1px solid var(--fm-hairline-dark);
}
.ph-main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 9px;
  padding-bottom: 9px;
  transition: padding var(--fm-duration-med) var(--fm-ease);
}

/* logo  two files (assets/img/logo-on-dark.png, a flat cream knockout;
   logo-on-light.png, the real full-color mark), swapped by html[data-theme]
   rather than one file recolored via CSS: unlike the text wordmark this
   replaced, an <img>'s own pixels can't pick up --fm-cream/--fm-black the
   way the rest of the header's theme-swap does. Dark theme (default) shows
   the light-on-dark file since the main row's background is dark there;
   the light-theme override at the bottom of this file swaps them. */
.ph-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* .ph-logo .ph-logo-img (not just .ph-logo-img) is deliberate: WooCommerce's
   own core CSS ships `.woocommerce img, .woocommerce-page img { height:
   auto; max-width:100%; }` on every WooCommerce-templated page (shop,
   category archives, single product, cart…  anywhere <body> gets a
   .woocommerce/.woocommerce-page class, which this theme's own front-page.php
   doesn't), and a class+element selector like that outranks a single-class
   one regardless of load order  it was silently overriding this back to
   the image's raw intrinsic 961x260px size everywhere except the home
   page. The extra .ph-logo ancestor is enough to win instead of reaching
   for !important. */
.ph-logo .ph-logo-img { display: block; height: 40px; width: auto; }
.ph-logo-img-on-light { display: none; }

/* search */
.ph-search {
  position: relative;
  flex: 0 1 420px;
  display: flex;
  align-items: center;
  height: 40px;
  background: rgba(var(--fm-rgb-white), 0.04);
  border: 1px solid rgba(var(--fm-rgb-white), 0.22);
  border-radius: var(--fm-radius-sm);
  padding: 0 6px 0 18px;
  transition: border-color var(--fm-duration-base) var(--fm-ease), background var(--fm-duration-base) var(--fm-ease);
}
.ph-search:focus-within {
  border-color: var(--fm-gold);
  background: rgba(var(--fm-rgb-white), 0.06);
}
.ph-search input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fm-cream);
  font-size: var(--fm-text-13);
  letter-spacing: 0.2px;
}
.ph-search input::placeholder { color: rgba(var(--fm-rgb-cream), 0.4); }
.ph-search-btn {
  width: 56px; height: 34px;
  margin: auto 0;
  border-radius: var(--fm-radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--fm-gold);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(var(--fm-rgb-black), 0.3);
  transition: background var(--fm-duration-fast) var(--fm-ease), transform var(--fm-duration-fast) var(--fm-ease);
}
.ph-search-btn:hover { background: var(--fm-gold-light); transform: scale(1.04); }
.ph-search-btn svg { width: 15px; height: 15px; stroke: var(--fm-black); fill: none; stroke-width: 2.2; }

/* search suggestions dropdown (desktop .ph-search + mobile drawer .ph-drawer-search) */
.ph-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--fm-surface);
  border-radius: var(--fm-radius-lg);
  border-top: 2px solid var(--fm-gold);
  box-shadow: var(--fm-shadow-flyout);
  padding: 10px 0;
  max-height: 70vh;
  overflow-y: auto;
  z-index: var(--fm-z-flyout);
}
.ph-search-results[hidden] { display: none; }
.ph-search-group-title {
  padding: 6px 18px;
  font-size: var(--fm-text-10-5);
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fm-gold-deep);
}
.ph-search-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 18px;
  font-size: var(--fm-text-13-5);
  color: var(--fm-ink-soft);
  transition: background var(--fm-duration-fast) var(--fm-ease), color var(--fm-duration-fast) var(--fm-ease);
}
.ph-search-category-count { font-size: var(--fm-text-11-5); color: var(--fm-ink-faint); }
.ph-search-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  transition: background var(--fm-duration-fast) var(--fm-ease);
}
.ph-search-product-thumb {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: var(--fm-radius-sm);
  overflow: hidden;
  background: rgba(var(--fm-rgb-gold), 0.08);
}
.ph-search-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-search-product-info { min-width: 0; flex: 1; }
.ph-search-product-name {
  font-size: var(--fm-text-13-5);
  color: var(--fm-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph-search-product-price { font-size: var(--fm-text-12); font-weight: 600; color: var(--fm-gold-deep); }
.ph-search-category:hover,
.ph-search-category.is-active,
.ph-search-product:hover,
.ph-search-product.is-active {
  background: rgba(var(--fm-rgb-gold), 0.08);
}
.ph-search-category:hover,
.ph-search-category.is-active { color: var(--fm-gold-deep); }
.ph-search-divider { margin: 8px 0; border-top: 1px solid var(--fm-divider-soft); }
.ph-search-empty,
.ph-search-loading {
  padding: 14px 18px;
  font-size: var(--fm-text-13);
  color: var(--fm-ink-faint);
}

/* reviews badge */
.ph-reviews {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 20px;
  padding-right: 20px;
  margin-right: 4px;
  border-right: 1px solid var(--fm-hairline-dark);
}
.ph-reviews-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ph-reviews-text .ph-rating-num { font-size: var(--fm-text-11-5); font-weight: 500; color: var(--fm-cream); }
.ph-reviews-text .ph-rating-sub { font-size: var(--fm-text-9-5); color: var(--fm-cream-dim); }
.ph-stars {
  position: relative;
  width: 74px; height: 14px;
  display: inline-block;
}
.ph-stars-row { position: absolute; top: 0; left: 0; display: flex; gap: 1px; }
.ph-stars-row svg { width: 14px; height: 14px; }
.ph-stars-bg svg { fill: rgba(var(--fm-rgb-white), 0.3); }
.ph-stars-fg { width: 96%; overflow: hidden; }
.ph-stars-fg svg { fill: var(--fm-gold); }

/* action icons (account / wishlist / cart) */
.ph-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.ph-action {
  position: relative;
}
.ph-action-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--fm-cream);
}
.ph-action-icon-wrap {
  position: relative;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.ph-action-icon-wrap svg { width: 22px; height: 22px; stroke: var(--fm-cream); fill: none; stroke-width: 1.3; transition: stroke var(--fm-duration-fast) var(--fm-ease); }
.ph-action-trigger:hover .ph-action-icon-wrap svg { stroke: var(--fm-gold); }
.ph-action-label { font-size: var(--fm-text-9); letter-spacing: 0.7px; text-transform: uppercase; color: var(--fm-cream-dim); }
.ph-badge {
  position: absolute;
  top: -7px; right: -10px;
  min-width: 15px; height: 15px;
  border-radius: var(--fm-radius-sm);
  background: var(--fm-gold);
  color: var(--fm-black);
  font-size: var(--fm-text-9);
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* flyout panels (account / wishlist / cart) */
.ph-flyout {
  position: absolute;
  top: calc(100% + 22px);
  right: -18px;
  width: 220px;
  max-width: calc(100vw - 24px);
  background: var(--fm-surface);
  border-radius: var(--fm-radius-lg);
  border-top: 2px solid var(--fm-gold);
  box-shadow: var(--fm-shadow-flyout);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--fm-duration-fast) var(--fm-ease), transform var(--fm-duration-fast) var(--fm-ease), visibility var(--fm-duration-fast);
  z-index: var(--fm-z-flyout);
}
[dir="rtl"] .ph-flyout { right: auto; left: -18px; }
.ph-action.is-open .ph-flyout { opacity: 1; visibility: visible; transform: translateY(0); }
.ph-flyout-title {
  font-size: var(--fm-text-10-5);
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fm-gold-deep);
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--fm-divider-strong);
}
.ph-flyout-link {
  display: block;
  padding: 8px 0;
  font-size: var(--fm-text-13-5);
  color: var(--fm-ink-soft);
  border-bottom: 1px solid var(--fm-divider-soft);
  transition: color var(--fm-duration-fast) var(--fm-ease), padding-left var(--fm-duration-fast) var(--fm-ease);
}
.ph-flyout-link:last-child { border-bottom: none; }
.ph-flyout-link:hover { color: var(--fm-gold-deep); padding-left: 4px; }
.ph-flyout-cta {
  display: block;
  margin-top: 14px;
  text-align: center;
  padding: 11px;
  background: var(--fm-black);
  color: var(--fm-cream);
  font-size: var(--fm-text-11-5);
  letter-spacing: 1.6px;
  border-radius: var(--fm-radius-sm);
  transition: background var(--fm-duration-fast) var(--fm-ease);
}
.ph-flyout-cta:hover { background: var(--fm-gold-deep); }
.ph-flyout-empty {
  font-size: var(--fm-text-13);
  line-height: 1.6;
  color: var(--fm-ink-faint);
  margin: 0 0 4px;
}

/* ---------------- cart drawer ----------------
   A full right-side sidecart, at every width (not just mobile)  a
   dropdown-sized preview undersells "you just added something to your
   bag", so this mirrors .ph-drawer (the mobile nav off-canvas panel)
   instead of .ph-flyout: its own fixed panel + overlay, toggled by JS
   with .is-open/.is-active, always sliding in from the same edge
   regardless of viewport width.

   A clean light panel (the site is light-theme only): white surface, a gold
   top edge, slim item rows with a larger photo / variant chips / quantity
   pill / Remove link, and a footer with the subtotal and stacked buttons.
   Colors are the local --cd-* variables; item markup lives in
   template-parts/header/site-header.php and assets/js/header.js
   (renderCartFlyout), which must stay in step. */
.ph-cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--fm-rgb-black-warm), 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fm-duration-med) var(--fm-ease), visibility var(--fm-duration-med);
  z-index: var(--fm-z-drawer);
}
.ph-cart-drawer-overlay.is-active { opacity: 1; visibility: visible; }

.ph-cart-drawer {
  --cd-bg: #ffffff;
  --cd-ink: #1a1714;
  --cd-muted: #656565;
  --cd-faint: #8a8074;
  --cd-line: #ece3d8;
  --cd-row: #faf6f1;
  --cd-gold: #C9A236;
  --cd-gold-deep: #a8752a;

  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  /* A normal fixed-width drawer on tablet/laptop/desktop; below 460px of
     viewport width min() lets it go edge-to-edge. */
  width: min(460px, 100%);
  background: var(--cd-bg);
  border-top: 3px solid var(--cd-gold);
  box-shadow: -24px 0 60px -24px rgba(26, 23, 20, 0.35);
  display: flex;
  flex-direction: column;
  color: var(--cd-ink);
  transform: translateX(100%);
  transition: transform var(--fm-duration-slow) var(--fm-ease);
  z-index: calc(var(--fm-z-drawer) + 1);
}
[dir="rtl"] .ph-cart-drawer { right: auto; left: 0; transform: translateX(-100%); box-shadow: 24px 0 60px -24px rgba(26, 23, 20, 0.35); }
.ph-cart-drawer.is-open { transform: translateX(0); }

/* header */
.ph-cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--cd-line);
}
.ph-cart-drawer-head h3 {
  margin: 0;
  font-family: var(--fm-font-serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.2px;
  color: var(--cd-ink);
}
.ph-cart-drawer-head button {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  color: var(--cd-ink);
  background: none;
  border: 1px solid var(--cd-line);
  border-radius: var(--fm-radius-circle);
  cursor: pointer;
  transition: background var(--fm-duration-fast) var(--fm-ease), border-color var(--fm-duration-fast) var(--fm-ease);
}
.ph-cart-drawer-head button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.ph-cart-drawer-head button:hover { background: var(--cd-gold); border-color: var(--cd-gold); }

/* list */
.ph-cart-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--cd-line) transparent;
}
.ph-cart-drawer-list::-webkit-scrollbar { width: 5px; }
.ph-cart-drawer-list::-webkit-scrollbar-track { background: transparent; }
.ph-cart-drawer-list::-webkit-scrollbar-thumb { background: var(--cd-line); border-radius: var(--fm-radius-sm); }

.ph-cart-drawer-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; }
.ph-cart-drawer-empty svg { width: 44px; height: 44px; stroke: var(--cd-gold-deep); fill: none; stroke-width: 1; opacity: 0.7; margin-bottom: 16px; }
.ph-cart-drawer-empty p { margin: 0; font-family: var(--fm-font-serif); font-size: 17px; color: var(--cd-muted); }

/* item: photo | (name + price / chips / quantity + remove) */
.ph-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--cd-line);
}
.ph-cart-item:last-of-type { border-bottom: 0; }
.ph-cart-thumb {
  flex: 0 0 78px;
  width: 78px; height: 78px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--cd-row);
  border: 1px solid var(--cd-line);
  border-radius: var(--fm-radius-md);
}
.ph-cart-thumb svg { width: 24px; height: 24px; stroke: var(--cd-gold-deep); fill: none; stroke-width: 1.3; }
.ph-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ph-cart-item-info { flex: 1; min-width: 0; }
.ph-cart-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ph-cart-item-name {
  font-family: var(--fm-font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cd-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ph-cart-item-price {
  flex: 0 0 auto;
  font-family: var(--fm-font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--cd-ink);
  white-space: nowrap;
}
.ph-cart-item-variants { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.ph-cart-chip {
  padding: 2px 9px;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--cd-muted);
  background: var(--cd-row);
  border: 1px solid var(--cd-line);
  border-radius: var(--fm-radius-pill);
}
.ph-cart-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ph-cart-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--cd-line);
  border-radius: var(--fm-radius-pill);
  background: #ffffff;
  overflow: hidden;
}
.ph-cart-qty button {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--cd-ink);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--fm-duration-fast) var(--fm-ease);
}
.ph-cart-qty button:hover { background: var(--cd-gold); }
.ph-cart-qty span { min-width: 26px; text-align: center; font-size: 13px; font-weight: 600; color: var(--cd-ink); }

/* Remove: a quiet text link with a bin icon */
.ph-cart-remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-family: var(--fm-font-sans);
  font-size: 12px;
  color: var(--cd-faint);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--fm-duration-fast) var(--fm-ease);
}
.ph-cart-remove svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ph-cart-remove:hover { color: #c0564a; }

/* footer: subtotal, note, stacked buttons (Checkout first) */
.ph-cart-drawer-footer {
  flex-shrink: 0;
  padding: 20px 28px 26px;
  background: var(--cd-row);
  border-top: 1px solid var(--cd-line);
}
.ph-cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--cd-muted); }
.ph-cart-subtotal strong { font-family: var(--fm-font-serif); font-size: 24px; font-weight: 700; color: var(--cd-ink); }
.ph-cart-note { margin: 4px 0 0; font-size: 12px; color: var(--cd-faint); }
.ph-cart-actions { display: flex; flex-direction: column-reverse; gap: 10px; margin-top: 18px; }
.ph-cart-actions .ph-flyout-cta,
.ph-cart-actions .ph-btn-outline {
  display: block;
  width: 100%;
  margin: 0;
  padding: 15px 20px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.8px;
  border-radius: var(--fm-radius-pill);
  transition: background var(--fm-duration-base) var(--fm-ease), border-color var(--fm-duration-base) var(--fm-ease), color var(--fm-duration-base) var(--fm-ease);
}
.ph-cart-actions .ph-flyout-cta { background: var(--cd-ink); border: 1px solid var(--cd-ink); color: #ffffff; }
.ph-cart-actions .ph-flyout-cta:hover { background: var(--cd-gold); border-color: var(--cd-gold); color: var(--cd-ink); }
.ph-cart-actions .ph-btn-outline { background: transparent; border: 1px solid var(--cd-ink); color: var(--cd-ink); }
.ph-cart-actions .ph-btn-outline:hover { background: #ffffff; border-color: var(--cd-gold-deep); color: var(--cd-gold-deep); }

/* ---------------- sub navigation ---------------- */
/* Sits inline in the main row now (flex:1, between the logo and
   account/wishlist/cart  see .ph-main-inner and site-header.php) rather
   than getting its own full-width row below. min-width:0 lets it actually
   shrink under pressure instead of forcing the row wider than its
   container; nowrap + overflow:hidden on the list is the safety net if it
   ever still doesn't fit (the @media block further down switches this
   category version to the burger menu well before that point). */
.ph-subnav {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.ph-subnav-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 4px;
}
.ph-subnav-list > li { position: relative; }
.ph-subnav-list > li.ph-subnav-right-start { margin-left: auto; }
.ph-subnav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: var(--fm-text-12);
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fm-cream-dim);
  position: relative;
  transition: color var(--fm-duration-fast) var(--fm-ease);
}
.ph-subnav-link::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 8px;
  height: 1px;
  background: var(--fm-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--fm-duration-base) var(--fm-ease);
}
.ph-subnav-link svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform var(--fm-duration-base) var(--fm-ease); }
.ph-subnav-list > li:hover .ph-subnav-link,
.ph-subnav-list > li.is-active .ph-subnav-link { color: var(--fm-cream); }
.ph-subnav-list > li:hover .ph-subnav-link::after,
.ph-subnav-list > li.is-active .ph-subnav-link::after { transform: scaleX(1); }
.ph-subnav-list > li:hover .ph-subnav-link svg { transform: rotate(180deg); }
.ph-subnav-list > li.ph-sale-item .ph-subnav-link { color: var(--fm-gold-sale); }
.ph-subnav-list > li.ph-sale-item .ph-subnav-link::after { background: var(--fm-gold-sale); }

/* ---------------- front-page simple nav ---------------- */
/* Swapped in for the category subnav only on the front page (see the
   is_front_page() branch in site-header.php)  the original site's
   homepage nav was just these four links, now centered inline in the
   merged main row rather than on its own full-width row below. A
   dedicated class set rather than reusing .ph-subnav-link, since the gold
   highlight here is a single shared pill (.ph-simple-nav-pill, positioned
   by assets/js/header.js) that slides between items on hover instead of
   each link lighting up its own background independently. */
.ph-simple-nav-list {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 6px 0;
}
/* Positioned/sized by header.js (left/width, in px, matching whichever
   item is active/hovered) rather than in CSS  its target moves between
   arbitrary sibling items, which media queries and :hover alone can't
   express as a single continuously-transitioning element. */
.ph-simple-nav-pill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--fm-gold);
  transition: left var(--fm-duration-base) var(--fm-ease), width var(--fm-duration-base) var(--fm-ease);
  pointer-events: none;
}
.ph-simple-nav-item { position: relative; z-index: 1; }
.ph-simple-nav-link {
  display: block;
  padding: 9px 26px;
  font-size: var(--fm-text-12-5);
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--fm-cream-dim);
  position: relative;
  z-index: 1;
  transition: color var(--fm-duration-fast) var(--fm-ease);
}
/* .is-lit tracks whichever item the pill currently sits under (the active
   page at rest, the hovered item on hover)  kept separate from .is-active
   so hovering a different item doesn't visually compete with Home's own
   active state. */
.ph-simple-nav-item.is-lit .ph-simple-nav-link { color: #ffffff; }
html[data-theme="light"] .ph-simple-nav-link { color: #000000; }
html[data-theme="light"] .ph-simple-nav-item.is-lit .ph-simple-nav-link { color: #ffffff; }

/* shared mega-menu flyout region  .ph-mega itself is positioned (its
   `left`) by JS in header.js, aligned under whichever subnav item is
   hovered and clamped to stay inside the viewport, instead of always
   centering under the full-width region. */
.ph-mega-region {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: var(--fm-z-mega);
}
.ph-mega {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  width: min(920px, 92vw);
  margin-top: 0;
  background: var(--fm-surface);
  border-radius: var(--fm-radius-md);
  box-shadow: var(--fm-shadow-mega);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* 0.22s is a deliberate one-off  see base/tokens.css §12. */
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s, left 0.18s ease;
}
.ph-mega-region.is-active .ph-mega { opacity: 1; visibility: visible; transform: translateY(0); }

.ph-mega-col-title {
  font-size: var(--fm-text-11);
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fm-gold-deep);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fm-divider-strong);
}
.ph-mega-links li + li { margin-top: 2px; }
.ph-mega-links a {
  display: block;
  padding: 7px 0;
  font-size: var(--fm-text-14);
  color: var(--fm-ink-soft);
  transition: color var(--fm-duration-fast) var(--fm-ease), padding-left var(--fm-duration-fast) var(--fm-ease);
}
.ph-mega-links a:hover { color: var(--fm-gold-deep); padding-left: 4px; }

.ph-mega-promo {
  position: relative;
  isolation: isolate; /* without its own stacking context, the image below (z-index:-1) paints behind this element's own gradient background too, not just behind it  see .ph-mega-promo-image */
  border-radius: var(--fm-radius-lg);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  background: linear-gradient(160deg, var(--fm-grad-promo-1) 0%, var(--fm-grad-promo-2) 50%, var(--fm-grad-promo-3) 100%);
  text-decoration: none;
  color: inherit;
}
.ph-mega-promo-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
.ph-mega-promo::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 75% 20%, rgba(var(--fm-rgb-gold), 0.35), transparent 60%),
    linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 55%, transparent 100%);
}
.ph-mega-promo-content { position: relative; z-index: 1; }
.ph-mega-promo-eyebrow {
  font-size: var(--fm-text-10);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fm-gold);
  margin-bottom: 8px;
}
.ph-mega-promo-title {
  font-family: var(--fm-font-serif);
  font-style: italic;
  font-size: var(--fm-text-21);
  color: var(--fm-headline-light);
  margin-bottom: 14px;
  max-width: 220px;
  line-height: 1.3;
}
.ph-mega-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fm-text-11-5);
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fm-headline-light);
  border-bottom: 1px solid var(--fm-gold);
  padding-bottom: 3px;
  transition: gap var(--fm-duration-fast) var(--fm-ease);
}
.ph-mega-promo-cta:hover { gap: 12px; }

/* backdrop dim */
.ph-backdrop {
  position: fixed;
  inset: 0;
  top: var(--ph-header-h, 130px);
  background: rgba(var(--fm-rgb-black-warm), 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fm-duration-med) var(--fm-ease), visibility var(--fm-duration-med);
  z-index: var(--fm-z-backdrop);
}
.ph-backdrop.is-active { opacity: 1; visibility: visible; }

/* ---------------- sticky compact state ---------------- */
/* .is-stuck is only ever added once .ph-sticky-wrap has actually
   scrolled to the top (see header.js)  the topbar (never sticky, see
   .ph-header above) has by then already scrolled out of view on its
   own, so there's nothing left for this state to hide. */
.ph-header.is-stuck .ph-sticky-wrap { box-shadow: var(--fm-shadow-sticky); }
.ph-header.is-stuck .ph-main-inner { padding-top: 6px; padding-bottom: 6px; }

/* ---------------- mobile toggle ---------------- */
.ph-burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ph-burger svg { width: 22px; height: 22px; stroke: var(--fm-cream); fill: none; stroke-width: 1.6; }

/* ---------------- mobile drawer ---------------- */
.ph-drawer {
  position: fixed;
  top: 0; left: 0;
  width: min(360px, 86vw);
  height: 100%;
  background: var(--fm-black);
  z-index: var(--fm-z-drawer);
  transform: translateX(-100%);
  /* 0.32s is a deliberate one-off  see base/tokens.css §12. */
  transition: transform 0.32s ease;
  overflow-y: auto;
  padding: 26px 26px 40px;
}
.ph-drawer.is-open { transform: translateX(0); }
.ph-drawer-close { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.ph-drawer-close svg { width: 20px; height: 20px; stroke: var(--fm-cream); fill: none; stroke-width: 1.6; }
.ph-drawer-search {
  position: relative;
  display: flex; align-items: center;
  border: 1px solid rgba(var(--fm-rgb-white), 0.22);
  border-radius: var(--fm-radius-sm); /* matches .ph-search's square corners */
  padding: 0 6px 0 16px;
  height: 42px;
  margin-bottom: 24px;
}
.ph-drawer-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--fm-cream); font-size: var(--fm-text-13-5); }
.ph-drawer-search svg { width: 15px; height: 15px; stroke: var(--fm-cream-dim); fill: none; stroke-width: 2; }

/* reviews badge + currency switcher  the only mobile access point for
   either, since both otherwise live only in the desktop topbar/main row. */
.ph-drawer-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--fm-hairline-dark);
}
.ph-drawer-reviews { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ph-drawer-utility .ph-select.ph-currency,
.ph-drawer-utility .ph-select.ph-gtranslate { flex-shrink: 0; }

/* trust badges  the drawer's only mobile home for these, since the
   topbar itself is hidden below 520px (see the responsive section). */
.ph-drawer-trust { margin-bottom: 8px; }
.ph-drawer-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: var(--fm-text-12);
  letter-spacing: 0.4px;
  color: var(--fm-cream-dim);
  border-bottom: 1px solid var(--fm-hairline-dark);
}
.ph-drawer-trust svg { width: 15px; height: 15px; stroke: var(--fm-gold); fill: none; stroke-width: 1.6; flex-shrink: 0; }

.ph-drawer-nav li { border-bottom: 1px solid var(--fm-hairline-dark); }
.ph-drawer-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 2px;
  font-size: var(--fm-text-14);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fm-cream);
}
.ph-drawer-nav-link svg { width: 11px; height: 11px; stroke: var(--fm-cream-dim); fill: none; stroke-width: 2; transition: transform var(--fm-duration-base) var(--fm-ease); }
.ph-drawer-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--fm-duration-med) var(--fm-ease);
}
li.is-expanded .ph-drawer-sub { max-height: 1200px; }
li.is-expanded .ph-drawer-nav-link svg { transform: rotate(180deg); }
.ph-drawer-sub-group { padding: 4px 0 12px; }
.ph-drawer-sub-title {
  font-size: var(--fm-text-10-5);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fm-gold);
  padding: 8px 2px 8px 14px;
}
.ph-drawer-sub a {
  display: block;
  padding: 8px 2px 8px 14px;
  font-size: var(--fm-text-13);
  color: var(--fm-cream-dim);
  transition: color var(--fm-duration-fast) var(--fm-ease), padding-left var(--fm-duration-fast) var(--fm-ease);
}
.ph-drawer-sub a:hover,
.ph-drawer-sub a:active { color: var(--fm-gold); padding-left: 18px; }

/* promo card  the drawer's equivalent of the desktop mega menu's third
   column, as a compact horizontal card instead of a full-width panel. */
.ph-drawer-sub-promo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 10px 14px;
  padding: 10px;
  border: 1px solid var(--fm-hairline-dark);
  border-radius: var(--fm-radius-lg);
}
.ph-drawer-sub-promo img { width: 48px; height: 48px; border-radius: var(--fm-radius-md); object-fit: cover; flex-shrink: 0; }
.ph-drawer-sub-promo-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ph-drawer-sub-promo-title {
  font-family: var(--fm-font-serif);
  font-style: italic;
  font-size: var(--fm-text-13);
  color: var(--fm-headline-light);
  line-height: 1.3;
}
.ph-drawer-sub-promo-cta { font-size: var(--fm-text-10); letter-spacing: 1px; text-transform: uppercase; color: var(--fm-gold); }
.ph-drawer-actions { display: flex; gap: 14px; margin-top: 26px; }
.ph-drawer-actions a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fm-text-10); letter-spacing: 0.6px; text-transform: uppercase; color: var(--fm-cream-dim); }
.ph-drawer-actions svg { width: 20px; height: 20px; stroke: var(--fm-cream); fill: none; stroke-width: 1.4; }

/* social icons  drawer-only footer row, the topbar's own being hidden
   below 520px along with everything else in it. */
.ph-drawer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--fm-hairline-dark);
}
.ph-drawer-social svg { width: 16px; height: 16px; stroke: var(--fm-cream-dim); fill: none; stroke-width: 1.5; transition: stroke var(--fm-duration-fast) var(--fm-ease); }
.ph-drawer-social a:hover svg { stroke: var(--fm-gold); }

/* ---------------- responsive ---------------- */
/* The category subnav (New Arrivals/Rings/Necklace/…/Gifts/Sale, up to 9
   items) now lives inline in the main row with the logo and
   account/wishlist/cart (see .ph-main-inner and site-header.php) instead
   of a full-width row of its own, so it has far less room than before.
   Two steps rather than one straight to the burger: a compact mode first
   (smaller nav padding/letter-spacing + icon-only actions), which is
   enough to fit ordinary laptop widths (1366/1440px are the most common
   screens there are  collapsing to a hamburger that early was the actual
   bug reported here), and only falls back to the burger menu itself at a
   real small-screen/tablet width. The front page's own nav (.ph-nav-simple,
   just Home/Shop/About Us/Blogs) is short enough to need neither step,
   staying inline all the way down to the general 860px cutoff below. */
@media (max-width: 1440px) {
  .ph-nav-category .ph-subnav-link { padding: 12px 10px; letter-spacing: 0.6px; }
  .ph-nav-category .ph-subnav-list { gap: 0; }
  .ph-nav-category .ph-main-inner { gap: 16px; }
  .ph-nav-category .ph-action-label { display: none; }
}
@media (max-width: 1024px) {
  .ph-nav-category .ph-subnav { display: none; }
  .ph-nav-category .ph-burger { display: flex; }
}
@media (max-width: 1180px) {
  /* Full contact text doesn't fit next to currency/language/social below
     this width  shrink to icon-only (title="" on each <a> keeps the text
     as a hover tooltip) so contact links, and everything in
     .ph-topbar-right, keep their place in the topbar all the way down to
     the mobile cutoff instead of disappearing piecemeal. */
  .ph-contact-text { display: none; }
  .ph-contact-list { gap: 18px; }
  .ph-inner, .ph-topbar-inner { padding-left: 24px; padding-right: 24px; }
  .ph-topbar .ph-search { flex-basis: 240px; }
}
@media (max-width: 980px) {
  .ph-reviews { display: none; }
  .ph-topbar .ph-search { max-width: 220px; }
  .ph-action-label { display: none; }
}
@media (max-width: 860px) {
  .ph-subnav { display: none; }
  .ph-burger { display: flex; }
  .ph-main-inner { gap: 16px; }
  .ph-actions { gap: 16px; }
  /* Search stays visible in the topbar (it's no longer fighting the main
     row for space against the logo/icons) rather than disappearing here
     the way it used to  it now only drops out once the whole topbar
     does, at 520px, when the mobile drawer's own search takes over. */
  .ph-topbar .ph-search { flex-basis: 160px; max-width: 200px; }

  /* Account and Wishlist crowd the icon-only top row on touch widths and
     just double what the drawer footer (.ph-drawer-actions) already
     offers  keep only Cart up top, since checkout state is worth
     surfacing without opening the drawer. */
  .ph-action[data-flyout="account"],
  .ph-action[data-flyout="wishlist"] { display: none; }

  .ph-action-icon-wrap { width: 28px; height: 28px; }
  .ph-action-icon-wrap svg { width: 24px; height: 24px; }
  .ph-badge { top: -5px; right: -7px; }
}
@media (max-width: 650px) {
  /* Contact links + search + currency/language/social no longer all fit
     in the topbar at this width, even icon-only/shrunk  drop search
     here rather than letting the topbar overflow or wrap; it's still
     reachable via the burger drawer's own search field. The topbar
     itself only disappears entirely at 520px, below. */
  .ph-topbar .ph-search { display: none; }
}
@media (max-width: 520px) {
  .ph-inner { padding-left: 16px; padding-right: 16px; }
  .ph-logo .ph-logo-img { height: 36px; }

  /* Every item inside the topbar (phone/WhatsApp/email, social, currency,
     GTranslate) is already hidden by this width  reviews stay in the
     drawer (.ph-drawer-utility), while currency + language get their own
     slim bar below instead, since they're worth surfacing without a trip
     into the burger menu  so rather than an empty dark bar sitting above
     the header, drop the topbar itself. */
  .ph-topbar { display: none; }

  /* Currency + language's mobile home: a slim gold strip above the main
     row, matching the topbar's own look. Not position:sticky (see the
     comment on .ph-mobile-utility in site-header.php)  it scrolls away
     with the page exactly like .ph-topbar does on wider screens, so it's
     only visible at the very top of the page and never fights the sticky
     main row for space once scrolled. */
  .ph-mobile-utility {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 30px;
    background: #C9A236;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }
}

/* =========================================================
   LIGHT THEME
   Scoped to .ph-root (see base/tokens.css's own light-theme comment for
   why this isn't a blanket redefinition of --fm-black/--fm-cream on
   :root): every dark chrome surface in the header  main row, topbar,
   subnav, mobile drawer, cart drawer  and its paired text/border tokens
   swap to light here, and nowhere else these same tokens are used (the
   mega-menu/drawer promo tiles keep their own dark photo gradient, since
   they don't consume any of the tokens redefined below).
   ========================================================= */
html[data-theme="light"] .ph-root {
  --fm-black: #ffffff;
  --fm-black-2: #F5EDE6;
  --fm-cream: #000000;
  --fm-cream-dim: #656565;
  --fm-hairline-dark: rgba(0, 0, 0, 0.1);
  --fm-rgb-white: 0, 0, 0;
  --fm-rgb-cream: 0, 0, 0;
  --fm-grad-sidebar-1: #ffffff;
  --fm-grad-sidebar-2: #F5EDE6;
}
/* .ph-sticky-wrap/.ph-subnav paint flush against each other and against
   .ph-topbar  a hairline is what separated them from the page/each other
   in dark mode (there, contrast came from the surrounding page being a
   different near-black shade); on white-on-white they'd otherwise run
   together with no seam at all. */
html[data-theme="light"] .ph-sticky-wrap,
html[data-theme="light"] .ph-topbar { border-bottom: 1px solid var(--fm-divider-soft); }
/* Two spots use --fm-black specifically for dark text/an icon ON TOP OF
   a solid gold circle (the cart/wishlist count badge, the search
   button's icon)  not as a panel background, so they must stay dark
   regardless of theme rather than following the flip above. */
html[data-theme="light"] .ph-badge { color: #000000; }
html[data-theme="light"] .ph-search-btn svg { stroke: #000000; }
/* Subnav links (New Arrivals/Rings/Necklace/…): --fm-cream-dim reads as a
   washed-out mid-gray on this now-white bar, when :hover/.is-active
   already jump to full black (--fm-cream, also redefined above)  pinned
   to the same sharp black at rest too instead of only on hover, so the
   row doesn't look dim/half-rendered by default. .ph-sale-item's own gold
   is untouched (that rule's extra classes already outrank this). */
html[data-theme="light"] .ph-subnav-link { color: #000000; }
/* Logo swap: the main row's background just flipped from dark to white
   above (--fm-black), so the cream knockout mark shown by default would
   now be nearly invisible  the real full-color file reads correctly on
   white instead. */
html[data-theme="light"] .ph-logo-img-on-dark { display: none; }
html[data-theme="light"] .ph-logo-img-on-light { display: block; }