/* Blocksy's logo builder item optionally prints the site title text
   next to/under the logo image (its own "has_site_title" builder
   setting, defaults to on) - hidden here rather than through the
   Customizer's header builder UI so it survives without touching that
   saved JSON config. Scoped to #header only, not .site-title anywhere
   else (e.g. the offcanvas mobile menu has its own separate logo item
   and is left alone). */
#header .site-title {
  display: none;
}

/* Blocksy's native cart icon is a shopping BAG (handles, no wheels) -
   its markup comes entirely from Blocksy/Companion PHP (the free
   header Cart builder item), which this theme doesn't override, so the
   shape can't be changed by editing an SVG in our own templates.
   Swapped for a real shopping-cart glyph instead, purely visually: the
   original bag <svg> is hidden (not removed - still in the DOM,
   keeping Blocksy's own aria-hidden/count-badge JS untouched) and a
   cart-shaped icon is drawn via ::after on the same wrapper, sized/
   positioned to sit exactly where the bag used to. currentColor keeps
   it in sync with the white/orange color rules below without a second
   color to maintain. */
#header .ct-header-cart .ct-icon-container > svg {
  display: none;
}
#header .ct-header-cart .ct-icon-container {
  position: relative;
  width: 15px;
  height: 15px;
}
#header .ct-header-cart .ct-icon-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M2.5 3h2l2.4 12.4a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.6L21 8H6'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M2.5 3h2l2.4 12.4a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.6L21 8H6'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

/* Compact header row, closer to a typical premium storefront's ~64px
   header than Blocksy's default 120px. Blocksy sets that 120px via its
   own dynamic stylesheet as a --height custom property consumed by
   "#header [data-row]>div { min-height: var(--shrink-height,
   var(--height)) }" - a min-height set anywhere further down the tree
   (on [data-row="middle"] itself, or on the logo/nav) has no effect,
   since every row child just stretches (flex default align-items:
   stretch) to whatever this one number says the row should be. Redefining
   --height here is the one override point that actually works,
   everything else (logo image, nav link padding) just needs to fit
   inside the shorter row rather than trying to shrink it. */
#header [data-row="middle"] {
  --height: 4rem;
}

/* Sitewide dark header. Blocksy paints [data-row="middle"]'s background
   directly (background-color: var(--theme-palette-color-8), from its
   own colorPalette theme_mod - color7/color8, set to light neutrals in
   design-tokens.php's after_setup_theme hook for the block editor's
   sake) - not one of our tokens, so it never picked up the sitewide
   dark theme and left every page except the transparent-header homepage
   with a stray white navbar. !important is required: Blocksy's rule
   (selector "[data-header*="type-1"] .ct-header [data-row*="middle"]")
   has real specificity of its own and loads after this stylesheet. The
   transparent-header state below still overrides this back to
   transparent while un-scrolled over the hero. */
#header [data-row] {
  background: var(--hs-color-surface) !important;
}

/* Every header control (nav links, icons, lang switcher, search/cart/
   account/burger triggers) forced to pure white, not the --hs-color-text
   token (a near-white gray-50) - explicit ask: the header text/icons
   should read as unambiguously white, not "off-white that happens to
   look okay". Root cause is the same as the background above: Blocksy's
   own nav-link color comes from --theme-link-initial-color and its
   header-icon triggers from their own dynamic-styles color, neither of
   which is one of our tokens, and both ship with enough specificity/
   !important to beat a plain color rule here without !important of our
   own. */
#header .ct-menu-link,
#header .hs-header-icon-btn,
#header .ct-header-search,
#header .ct-header-cart,
#header .ct-header-account,
#header .ct-header-trigger,
/* Blocksy sets color directly on some inner elements too (the cart's
   own price/amount markup, .ct-label/.ct-amount/.woocommerce-Price-
   amount) rather than only on the container and relying on
   inheritance, so a rule on the container alone doesn't reach them -
   descendants need to be targeted explicitly. */
#header .ct-header-cart *,
#header .ct-header-search * {
  color: #fff !important;
}

/* SVG icons (search glyph, dropdown chevron, cart bag) render via
   fill, not color - color: #fff above never touches them. Blocksy sets
   fill directly on the <svg>/<path> too, so this also needs
   !important. currentColor keeps them in sync with the color rule
   above (and the orange hover/active state below) instead of a second
   hardcoded value to maintain. */
#header .ct-header-search svg,
#header .ct-header-search path,
#header .ct-header-cart svg,
#header .ct-header-cart path,
#header .hs-header-icon-btn svg,
#header .hs-header-icon-btn path {
  fill: currentColor !important;
}

#header .ct-menu-link:hover,
#header li.current-menu-item > .ct-menu-link,
#header li[class*="current-menu-"] > .ct-menu-link,
#header .hs-header-icon-btn:hover,
#header .hs-header-icon-btn.is-active,
#header .ct-header-search:hover *,
#header .ct-header-cart:hover * {
  color: var(--hs-color-primary-500) !important;
}

#header .site-branding img {
  max-height: 2.25rem;
  width: auto;
}

#header .ct-menu-link {
  padding-block: var(--hs-space-8) !important;
  font-weight: var(--hs-font-weight-medium);
  transition: color var(--hs-transition-fast) var(--hs-ease);
}

/* Thin active-page indicator instead of relying on color alone. */
#header li.current-menu-item > .ct-menu-link,
#header li[class*="current-menu-"] > .ct-menu-link {
  position: relative;
}
#header li.current-menu-item > .ct-menu-link::after,
#header li[class*="current-menu-"] > .ct-menu-link::after {
  content: '';
  position: absolute;
  inset-inline: var(--hs-space-8);
  bottom: 0;
  height: 2px;
  border-radius: var(--hs-radius-full);
  background: var(--hs-color-primary-500);
}

/* Announcement bar */

.hs-announcement-bar {
  background: var(--hs-color-primary-700);
  color: #fff;
}

.hs-announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Shorter bar than the old --hs-space-8 (.5rem) block padding - height
     is otherwise entirely content-driven (font-size + line-height), so
     this is the one lever that controls it. Automatically flows through
     everywhere the bar's real height matters: sticky-header.js measures
     it live via offsetHeight for --hs-hero-pull-up (see the transparent-
     header rules above), so nothing there needed updating. */
  padding-block: var(--hs-space-4);
  /* Marquee's sliding text would otherwise run edge-to-edge under the
     close button; reserves its width as breathing room on both sides
     (logical, not left/right, so it mirrors correctly in the RTL
     default) rather than letting text slide underneath it. */
  padding-inline: calc(var(--hs-container-padding-inline) + 1.5rem);
  overflow: hidden;
}

.hs-announcement-bar__marquee {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: hs-announcement-marquee 18s linear infinite;
}

/* Physical (not logical) direction: the marquee's scroll direction is a
   visual motion, not a text-flow property - RTL and LTR content should
   both slide the same physical way rather than mirroring, so this stays
   left/right rather than switching to inline-start/end like the padding
   above. */
@keyframes hs-announcement-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Pausing on hover/focus lets a shopper actually read a long phrase or
   reach the close button without the text sliding out from under the
   pointer mid-read. */
.hs-announcement-bar__inner:hover .hs-announcement-bar__marquee,
.hs-announcement-bar__inner:focus-within .hs-announcement-bar__marquee {
  animation-play-state: paused;
}

.hs-announcement-bar__text {
  font-size: var(--hs-font-size-caption);
  font-weight: var(--hs-font-weight-medium);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Motion-sensitive visitors get the old static, centered, wrapping
   presentation instead - the two duplicated marquee copies would
   otherwise both sit statically side by side, doubling the text. */
@media (prefers-reduced-motion: reduce) {
  .hs-announcement-bar__marquee {
    animation: none;
    width: 100%;
    justify-content: center;
  }
  .hs-announcement-bar__text {
    white-space: normal;
    text-align: center;
  }
  .hs-announcement-bar__text:last-child {
    display: none;
  }
}

.hs-announcement-bar__close {
  position: absolute;
  inset-inline-end: var(--hs-container-padding-inline);
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  opacity: .8;
  line-height: 1;
  font-size: 1.1rem;
  flex: 0 0 auto;
}
.hs-announcement-bar__close:hover {
  opacity: 1;
}

/* Desktop inline search bar (see inc/template-parts/header/search-bar.php +
   inc/hooks/header-hooks.php). Blocksy's own .ct-header-search toggle stays
   in the DOM (untouched markup/JS, still Blocksy's real modal trigger) so
   a visitor without JS - the clone script never runs - still gets a
   working search entry point instead of losing it outright; this class is
   only ever added once the clone has actually landed next to it. Scoped
   with #header for the same specificity reason as every other rule in
   this file: Blocksy's own header CSS carries real specificity of its own. */
#header .ct-header-search.hs-is-replaced-by-search-bar {
  display: none;
}

.hs-header-search {
  /* Anchors .ct-search-results' own position:absolute (see the live-
     search dropdown block further down) so the dropdown positions
     against this field specifically, not the nearest other positioned
     ancestor up the header. */
  position: relative;
  display: flex;
  align-items: center;
  /* Keeps the control compact inside the desktop navbar while still giving
     enough width for the Arabic placeholder; clamp() prevents overflow at
     the 1024px desktop/mobile switch and caps the field before it reads as
     an oversized search block. */
  width: clamp(14.375rem, 18vw, 18.75rem);
  /* 38px: matches the 40px icon buttons closely enough to sit on the same
     visual rhythm without literally matching (a hairline border adds
     ~2px of optical weight a plain icon button doesn't have) - see the
     .hs-header-icon-btn rule below for the number this is keyed to. */
  height: 2.375rem;
  /* The default solid/scrolled state uses a subtle translucent light wash
     over the dark navbar; the transparent-home header swaps this for a
     darker glass tint below so bright hero imagery cannot wash it out. */
  box-sizing: border-box;
  min-width: 0;
  overflow: visible;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  transition: border-color 160ms var(--hs-ease),
    background-color var(--hs-transition-fast) var(--hs-ease),
    box-shadow 160ms var(--hs-ease);
}

.hs-header-search:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.hs-header-search:focus-within {
  background: rgba(255, 255, 255, 0.065);
  border-color: var(--hs-color-primary-500);
  box-shadow: 0 0 0 2px rgba(249, 80, 5, 0.1);
}

/* Blocksy gives every header-row flex child a baseline `margin: 0 10px`
   via "#header [data-items] > *" - real specificity (an ID selector), so
   a plain .hs-header-search margin rule never wins regardless of source
   order, same reasoning as every other #header-scoped override in this
   file. Nav's own 10px either side is left as Blocksy set it (out of
   scope - the brief asks not to touch menu spacing); these two values are
   picked so nav's untouched 10px, plus this, lands the visible nav-to-bar
   and bar-to-icons gaps at 14px and 16px respectively - both inside the
   requested 12-18px band, confirmed against the real rendered gap rather
   than assumed from the source values alone. */
#header [data-device="desktop"] .hs-header-search {
  margin-inline-start: var(--hs-space-8);
  margin-inline-end: 0;
}

.hs-header-search__field {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 100%;
  /* Tighter than the field's old --hs-space-16 (1rem): a full-size input
     padding was part of what made this read as its own boxed widget
     rather than a compact navbar control - the icon button below already
     supplies its own visual breathing room on the other side. */
  padding-block: 0;
  padding-inline: 0.875rem var(--hs-space-12);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  color: #fff;
  font-size: var(--hs-font-size-body-sm);
  line-height: 1;
  font-family: inherit;
}

.hs-header-search__field::placeholder {
  /* Explicit translucent white rather than the --hs-color-text-muted
     token: that token is tuned for opaque light/dark surfaces, not for
     text sitting over a translucent panel that itself sits over a
     variable-brightness hero photo - a fixed, warm-neutral white at this
     opacity stays legible in both the transparent and solid header
     states without needing a separate override for either. */
  color: rgba(255, 255, 255, 0.45);
}

/* Removes Safari/Chrome's native search-field decorations (the round
   "clear" x and, in older WebKit, a magnifier glyph baked into the field
   itself) - both fight the custom submit-button icon below rather than
   complementing it. */
.hs-header-search__field::-webkit-search-decoration,
.hs-header-search__field::-webkit-search-cancel-button,
.hs-header-search__field::-webkit-search-results-button,
.hs-header-search__field::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* Resets Blocksy/WooCommerce's own global button styling (solid brand-
   orange fill, border-radius, padding - it applies to any bare <button>
   sitewide via a low-specificity element selector, but wins anyway
   because it loads after this stylesheet) - this is meant to read as a
   plain icon affordance inside the field, not a call-to-action button
   (the task explicitly asks for no large orange button here). !important
   needed for the same reason every other Blocksy-fighting rule in this
   file needs it. */
#header .hs-header-search__submit {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

.hs-header-search__submit {
  /* Anchors .ct-ajax-loader's own position:absolute;inset:0 (see
     non-critical-search-styles.min.css / main.min.css) so the spinner
     centers over this button instead of the nearest other positioned
     ancestor - needed now that this button also carries the live-search
     loading spinner, not just the static search icon. */
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Matches the field's own new 38px height, not a separate square button
     size - keeps the icon reading as one end of the same field rather
     than a bolted-on second control. */
  width: 2.5rem;
  min-width: 0;
  height: 100%;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: color 160ms var(--hs-ease);
  /* Blocksy's .ct-ajax-loader reads its color from this custom property
     (hardcoded #c5cbd0 default otherwise) - overridden here to match the
     translucent-white icon treatment instead of Blocksy's own default
     light-gray spinner. */
  --loader-size: 1.0625rem;
  --loader-color: rgba(255, 255, 255, 0.62);
}

.hs-header-search__submit:hover,
.hs-header-search__submit:focus-visible,
.hs-header-search__field:focus ~ .hs-header-search__submit {
  color: var(--hs-color-primary-500);
}

/* Mirrors the .hs-header-icons / .ct-header-search rule above: Blocksy's
   own header text/icon color rules carry enough specificity to otherwise
   win over a plain color here. Fixed white/translucent-white, not the
   --hs-color-text(-muted) tokens: those tokens are tuned for opaque
   surfaces and would go dark-on-dark the moment this bar's own surface is
   a translucent panel rather than a solid fill (see .hs-header-search
   above) - a fixed value keeps it legible over both the solid navbar and
   a hero photo without a separate override for either state. */
#header .hs-header-search__field {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding-block: 0 !important;
  padding-inline: 0.875rem var(--hs-space-12) !important;
  font-size: var(--hs-font-size-body-sm) !important;
  line-height: 1 !important;
}
#header .hs-header-search__submit {
  color: rgba(255, 255, 255, 0.62) !important;
}
#header .hs-header-search__field::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}
#header .hs-header-search__submit:hover,
#header .hs-header-search__submit:focus-visible,
#header .hs-header-search:focus-within .hs-header-search__submit {
  color: var(--hs-color-primary-500) !important;
}

#header .hs-header-search__icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Below the 1024px desktop/mobile switch (see general.scss's
   [data-device="desktop"] { display: none } rule), Blocksy already renders
   its own separate mobile row (logo + hamburger only, no search item there
   at all currently) - this bar only ever exists inside the desktop row via
   the JS clone above, but the hard display:none is kept here too as a
   defensive floor in case any narrower desktop-row state ever appears. */
@media (max-width: 61.9375rem) {
  .hs-header-search {
    display: none;
  }
}

/* Live-search results dropdown (Blocksy's own .ct-search-results, mounted
   by static/js/frontend/search-implementation.js - see
   inc/template-parts/header/search-bar.php for how this form opts into
   that mount). non-critical-search-styles.min.css already builds every
   visual property off custom properties instead of hardcoded values
   (--search-dropdown-background, --items-spacing, etc.) specifically so
   a theme can restyle it this way, without fighting Blocksy's own rule
   via specificity/!important - only .hs-header-search__field's
   role="combobox" ARIA attributes and the click/keyboard behavior are
   Blocksy's; every pixel of this dropdown's appearance is set here. */
.hs-header-search {
  /* theme-form-field-height feeds the dropdown's own padding-top (see
     non-critical-search-styles.min.css) - kept in sync with this bar's
     real 38px height so the dropdown's content starts flush under the
     field with no gap or overlap, whichever value the height above is
     ever changed to. */
  --theme-form-field-height: 2.375rem;
  --search-dropdown-background: rgba(21, 23, 25, 0.98);
  --search-dropdown-box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  --search-image-size: 3.375rem;
  --search-image-radius: var(--hs-radius-sm);
  --items-spacing: var(--hs-space-12);
  --items-padding: var(--hs-space-12);
  --items-divider: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-header-search .ct-search-results {
  top: calc(100% + var(--hs-space-8));
  inset-inline: -1px;
  width: auto;
  min-width: 0;
  padding-top: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  z-index: var(--hs-z-dropdown);
}

.hs-header-search .ct-search-item {
  color: #fff;
  text-decoration: none;
  transition: background-color var(--hs-transition-fast) var(--hs-ease);
}

.hs-header-search .ct-search-item:hover,
.hs-header-search .ct-search-item:focus-visible,
/* .is-active: keyboard-selected state (Arrow Down/Up), applied by
   assets/js/header/search-keyboard-nav.js - same visual treatment as
   :hover so a mouse user and a keyboard user see identical feedback for
   "this is the option that activates on Enter/click". */
.hs-header-search .ct-search-item.is-active {
  background: rgba(255, 255, 255, 0.06);
}

.hs-header-search .ct-media-container {
  border-radius: var(--search-image-radius);
  overflow: hidden;
  background: #fff;
}

.hs-header-search .ct-media-container img {
  width: 100%;
  height: 100%;
  /* object-fit: contain, not the shop grid's cover: this is a small
     fixed-size thumbnail representing the exact product, where cropping
     into an unrecognizable close-up (cover's behavior on a non-square
     source photo) is more likely to actively mislead in a search result
     than in a full product card. */
  object-fit: contain;
}

/* Product title: Blocksy's own markup wraps title text directly inside
   the <a>, as a sibling text node next to .product-search-meta - not in
   its own element - so line-clamping needs -webkit-box on the anchor's
   direct text content via this wrapper span rather than a dedicated
   title class Blocksy doesn't render. */
.hs-header-search .ct-search-item > span:not(.ct-media-container) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--hs-font-size-body-sm);
  line-height: var(--hs-line-height-tight);
}

.hs-header-search .product-search-meta {
  display: block;
  font-size: var(--hs-font-size-caption);
  font-weight: var(--hs-font-weight-semibold);
}

.hs-header-search .product-search-meta .price,
.hs-header-search .product-search-meta .price .woocommerce-Price-amount {
  color: var(--hs-color-primary-500);
}

/* WooCommerce's own sale-price markup (get_price_html()'s <del>/<ins>
   pair, unchanged - see product-card.php for the same pattern used on
   the shop grid): original price muted and struck through, current price
   in the brand orange - exactly the "old price muted + current price
   orange" rule the design brief asks for, using WooCommerce's real
   formatted price HTML rather than re-deriving numbers client-side. */
.hs-header-search .product-search-meta del {
  color: rgba(255, 255, 255, 0.45);
  font-weight: var(--hs-font-weight-regular);
  text-decoration: line-through;
}

.hs-header-search .product-search-meta ins {
  color: var(--hs-color-primary-500);
  text-decoration: none;
}

.hs-header-search .ct-search-more {
  justify-content: center;
  color: var(--hs-color-primary-500);
  font-size: var(--hs-font-size-body-sm);
  font-weight: var(--hs-font-weight-medium);
  text-decoration: none;
}

.hs-header-search .ct-search-more:hover,
.hs-header-search .ct-search-more:focus-visible,
.hs-header-search .ct-search-more.is-active {
  background: rgba(255, 255, 255, 0.06);
}

/* Visible "no results" panel (own markup, own translatable string - see
   search-bar.php - deliberately separate from #hs-header-search-status,
   which stays screen-reader-only and keeps carrying Blocksy's own
   ct_localizations.search_live_no_result text for the ARIA announcement,
   correct as-is in every case including an empty field). Hidden by
   default; :has() (not a JS flag) is what shows it only when the field
   genuinely has a value AND no results dropdown is present - Blocksy
   writes its OWN shared "no results" string into the ARIA element on an
   empty field too (see search-implementation.js's early-return branch),
   which is exactly the flash-before-typing this separate element and
   condition avoids. */
.hs-header-search__no-results {
  display: none;
}

.hs-header-search:focus-within:has(
  .hs-header-search__field:not(:placeholder-shown)
):not(:has(.ct-search-results)) .hs-header-search__no-results {
  display: block;
  position: absolute;
  margin: 0;
  padding: var(--hs-space-16);
  top: calc(100% + var(--hs-space-8));
  inset-inline: 0;
  background: var(--search-dropdown-background, #1c1c1c);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--hs-radius-md);
  box-shadow: var(--search-dropdown-box-shadow, 0 20px 40px rgba(0, 0, 0, 0.45));
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--hs-font-size-body-sm);
  text-align: center;
  z-index: var(--hs-z-dropdown);
}

/* Header icons: wishlist / account / cart */

.hs-header-icons {
  display: flex;
  align-items: center;
  gap: var(--hs-space-4);
  margin-inline-start: var(--hs-space-12);
}

/* Desktop-only: tightens the search-bar-to-icons gap into the same 12-18px
   band as the nav-to-bar gap on the search bar's other side. Value chosen
   empirically against the real rendered gap (see .hs-header-search's own
   margin comment above) - Blocksy's own baseline header-row item spacing
   already contributes part of this gap, so this isn't the gap's full
   value on its own. The shared 12px base above stays as-is for the
   mobile row's icons, where there's no search bar and no rhythm to match
   against. */
@media (min-width: 64rem) {
  #header [data-device="desktop"] .hs-header-icons {
    margin-inline-start: var(--hs-space-16);
  }
}

.hs-header-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--hs-radius-md);
  color: var(--hs-color-text);
  transition: background-color var(--hs-transition-fast) var(--hs-ease);
}
.hs-header-icon-btn:hover {
  background: var(--hs-color-surface-sunken);
}
/* Defensive size floor for the wishlist/account SVGs inside - see the
   identical rationale on .hs-contact__card svg in pages/contact.css. */
.hs-header-icon-btn svg {
  width: 1.1875rem;
  height: 1.1875rem;
}

.hs-header-icon-count {
  position: absolute;
  top: .1rem;
  inset-inline-end: .1rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding-inline: .2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* -fill, not the raw -500 scale value: this is small numeral text
     (10px), which needs WCAG's 4.5:1 normal-text minimum, not the 3:1
     large-text/graphical minimum -500 alone would only just fail - see
     design-tokens.php */
  background: var(--hs-color-primary-fill);
  color: #fff;
  font-size: .625rem;
  font-weight: var(--hs-font-weight-bold);
  border-radius: var(--hs-radius-full);
  line-height: 1;
}
.hs-header-icon-count[hidden] {
  display: none;
}

/* Account flyout (desktop only - the mobile drawer's own account
   accordion below has its own, unrelated styling). */

.hs-account-flyout__menu {
  width: 17rem;
  padding: var(--hs-space-20);
}

.hs-account-flyout__greeting {
  font-weight: var(--hs-font-weight-semibold);
  padding: 0 var(--hs-space-16) var(--hs-space-8);
}

.hs-account-flyout__login-form {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-12);
}

/* Labels wrap their input (see header-icons.php) instead of pairing via
   id/for, since this markup gets cloned into more than one header row -
   duplicate ids would make label associations ambiguous. */
.hs-account-flyout__login-form .hs-label {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-8);
}

.hs-account-flyout__form-error {
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-danger-600);
}

.hs-account-flyout__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--hs-font-size-caption);
}
.hs-account-flyout__links a:hover {
  color: var(--hs-color-primary-600);
}

/* Sticky header */

body.hs-sticky-header #header {
  position: sticky;
  top: 0;
  z-index: var(--hs-z-sticky-header);
  transition: box-shadow var(--hs-transition-normal) var(--hs-ease);
}

body.hs-sticky-header #header.hs-is-scrolled {
  box-shadow: var(--hs-shadow-medium);
}

/* Transparent-over-hero header (front page only, see header-hooks.php -
   only added when the hero slider is the first homepage section). Sits
   absolutely positioned over the hero instead of pushing it down, with
   the hero's own background showing through until scroll passes the
   threshold tracked by sticky-header.js, at which point it fades to a
   solid header identical to every other page.

   Desktop-only (min-width: 62rem, this theme's existing tablet/desktop
   split - see the 61.9375rem max-width breakpoint already used in
   shop.css/account.css/contact.css, and Blocksy's own equivalent
   [data-device] switch in transparent-state.scss). Below that, Blocksy
   renders a completely different mobile header row (hamburger + icons,
   no inline nav), which this flat, fixed-aspect-ratio hero banner (see
   hero-slider.css) has no baked-in headline/CTA reserving space for -
   floating it transparently over the banner there just hides the top of
   the image and any text on it behind the header controls instead of
   framing a hero photo. Solid-header mobile/tablet styling lives in the
   "Mobile / tablet header" block below. */

@media (min-width: 62rem) {
  /* top: var(--hs-hero-pull-up), not 0 - #header is absolutely
     positioned and would otherwise start at the true viewport top,
     stacking directly over the announcement bar (position: static,
     rendered before #header - see announcement-bar.php) and completely
     covering it, since #header's z-index sits above the bar's. The bar
     is in normal flow and already occupies that space at the top of
     #main-container; --hs-hero-pull-up already holds its exact measured
     height (set by sticky-header.js) for the hero's own negative margin
     below, so reusing it here to offset the header by the same amount
     is the existing mechanism, not a new one - it makes the header
     resume immediately below the bar instead of on top of it, and the
     hero pull-up math is unaffected since both the header's offset and
     the hero's negative margin move by the same amount. Falls back to
     0px (old behavior) only for the split second before JS has measured
     the bar - a non-issue in practice since the CSS custom property and
     the bar's own layout both exist before first paint. */
  body.hs-transparent-header #header {
    position: absolute;
    inset-inline: 0;
    top: var(--hs-hero-pull-up, 0px);
    z-index: var(--hs-z-sticky-header);
    background: transparent;
    transition: background-color var(--hs-transition-normal) var(--hs-ease),
      box-shadow var(--hs-transition-normal) var(--hs-ease);
  }

  /* White nav/icon text alone isn't reliably legible against a photo
     background - the hero images vary in brightness/color from spot to
     spot (see assets/images/hero-*.jpg), so a faint dark scrim behind the
     header guarantees a baseline of contrast everywhere instead of
     depending on whichever part of a given hero image happens to sit
     behind it. Kept deliberately light (barely-there, not a heavy
     overlay) so it doesn't dim the hero image itself - just enough of a
     gradient for white text to stay readable. Faded out entirely once
     scrolled/solid. */
  body.hs-transparent-header #header:not(.hs-is-scrolled)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgb(0 0 0 / .18), rgb(0 0 0 / 0));
    pointer-events: none;
  }

  /* Blocksy paints the header row's own background on this inner element,
     not on #header itself - transparent has to win here specifically. */
  body.hs-transparent-header #header [data-row="middle"] {
    background: transparent !important;
    transition: background-color var(--hs-transition-normal) var(--hs-ease);
  }

  /* Light text/icons so they stay legible over the hero image, reverted
     the moment the header goes solid on scroll. Blocksy paints
     .ct-menu-link's color from its own Customizer-driven dynamic
     stylesheet, which wins over a plain color: #fff here without
     !important regardless of selector order. */
  body.hs-transparent-header #header:not(.hs-is-scrolled) {
    --hs-color-text: #fff;
  }
  body.hs-transparent-header #header:not(.hs-is-scrolled) .site-title,
  body.hs-transparent-header #header:not(.hs-is-scrolled) .ct-menu-link,
  body.hs-transparent-header #header:not(.hs-is-scrolled) .hs-header-icon-btn {
    color: #fff !important;
  }
  body.hs-transparent-header #header:not(.hs-is-scrolled) .hs-header-icon-btn:hover {
    background: rgb(255 255 255 / .15);
  }

  body.hs-transparent-header #header:not(.hs-is-scrolled) .hs-header-search {
    background: rgba(15, 15, 15, 0.42);
    border-color: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
  }

  body.hs-transparent-header #header:not(.hs-is-scrolled) .hs-header-search:hover {
    border-color: rgba(255, 255, 255, 0.24);
  }

  body.hs-transparent-header #header:not(.hs-is-scrolled) .hs-header-search:focus-within {
    background: rgba(15, 15, 15, 0.5);
    border-color: var(--hs-color-primary-500);
    box-shadow: 0 0 0 2px rgba(249, 80, 5, 0.1);
  }

  body.hs-transparent-header #header.hs-is-scrolled {
    position: sticky;
    /* Resets the offset from the base rule above: once scrolled, the
       announcement bar (in normal flow, above the header) has already
       scrolled out of view, so the now-solid sticky header should stick
       to the true viewport top like every other page's header, not
       leave a gap sized for a bar that isn't there anymore. */
    top: 0;
    background: var(--hs-color-surface);
    box-shadow: var(--hs-shadow-medium);
  }
  body.hs-transparent-header #header.hs-is-scrolled [data-row="middle"] {
    background: var(--hs-color-surface) !important;
  }

  /* The hero renders in normal flow, directly under the announcement
     bar - no pull-up needed. (Earlier revision pulled the hero up to
     the true viewport top with a negative margin sized from
     --hs-hero-pull-up, on the assumption that #header - position:
     absolute, contributing nothing to flow - was the only thing meant
     to render over the hero's top edge. That dragged the hero up over
     the bar's own box too, since a negative margin collapses flow
     space regardless of what's visually painted there, which is what
     hid the bar on the front page: #header's top: 0 then stacked
     directly on top of it. #header is now offset by
     --hs-hero-pull-up itself - see the base transparent-header rule
     above - so it starts right below the bar instead of at the
     viewport top, and the hero needs no offset of its own to still sit
     directly beneath the bar with the header floating transparently
     over its top portion. --hs-hero-pull-up itself is left in place:
     sticky-header.js still measures and exposes it, in case a future
     layout needs the bar's height again.) */
}

/* Mobile / tablet header (<=991px): always a normal, solid, in-flow bar -
   never the desktop transparent-over-hero treatment above. Deliberately
   does NOT set position here: the front page carries both
   .hs-transparent-header and .hs-sticky-header (sticky is on by default,
   see hs_sticky_header_enabled) at once, and the "Sticky header" rule
   earlier in this file already gives #header the right position
   (sticky, or the browser default static if that setting is off) -
   overriding it here would fight that rule via pure source-order and
   either break sticky on mobile or (position: static !important) block
   it outright. Leaving position alone means #header simply stays in
   normal flow like every non-transparent page, so the hero starts
   immediately after it, with sticky-on-scroll still working exactly as
   it does everywhere else. [data-row="middle"] keeps the sitewide dark
   background from the #header [data-row] rule above
   (var(--hs-color-surface), which resolves to the dark gray-800 token
   sitewide - see design-tokens.php's data-theme="dark" stamped on
   <html>) instead of the transparent override that rule only applies on
   desktop now. Written explicitly rather than left to "no override
   applies" so the solid mobile/tablet header is a stated, deliberate
   rule and can't regress silently if the desktop block above ever
   changes shape. */
@media (max-width: 61.9375rem) {
  body.hs-transparent-header #header {
    background: var(--hs-color-surface);
  }
  body.hs-transparent-header #header [data-row="middle"] {
    background: var(--hs-color-surface) !important;
  }
}

/* Mobile/tablet main header row: hamburger + logo + cart shortcut.
   Search/wishlist/account stay inside the off-canvas drawer, while the
   cart is cloned into the mobile row by header-hooks.php. Native Blocksy
   search/account items are still hidden defensively if someone adds them
   to the mobile builder later. */
@media (max-width: 61.9375rem) {
  #header [data-device="mobile"] .ct-header-search,
  #header [data-device="mobile"] .ct-header-account,
  #header [data-device="mobile"] .hs-header-icons {
    display: none !important;
  }

  #header [data-device="mobile"] .ct-header-cart {
    display: none !important;
  }

  #header [data-device="mobile"] .hs-mobile-header-cart,
  #header [data-device="mobile"] .hs-mobile-header-cart .ct-header-cart {
    display: inline-flex !important;
    align-items: center;
  }

  /* Equal vertical centering + consistent height for whatever remains
     (trigger, logo) - Blocksy's own [data-row="middle"] flex/align-items
     already centers row children, this only guards against the mobile
     row's own [data-column] wrappers collapsing to content height
     unevenly once the icons above are removed from flow, and prevents
     horizontal overflow/extra empty space from a now-empty end column
     still reserving its own padding/margin. */
  #header [data-device="mobile"] [data-row="middle"] {
    display: flex;
    align-items: center;
  }
  /* Keeps the hamburger/logo/cart row compact without letting a hidden
     builder item reserve stray spacing. */
  #header [data-device="mobile"] [data-column="end"] {
    gap: var(--hs-space-8);
  }
  #header [data-device="mobile"] [data-column] {
    display: flex;
    align-items: center;
  }

  #header [data-device="mobile"] .ct-header-trigger {
    /* Matches the wishlist/account icon buttons' own 40px square hit
       area (see .hs-header-icon-btn above) rather than Blocksy's default
       padding-driven size, so the lone remaining control on this row
       still meets the same touch-target rhythm the rest of the header
       uses. */
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  #header [data-device="mobile"] .hs-mobile-header-cart .ct-cart-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: var(--hs-radius-md);
    color: #fff;
  }

  #header [data-device="mobile"] .hs-mobile-header-cart .ct-cart-item:hover,
  #header [data-device="mobile"] .hs-mobile-header-cart .ct-cart-item:focus-visible {
    background: var(--hs-color-surface-sunken);
    color: var(--hs-color-primary-500);
  }

  #header [data-device="mobile"] .hs-mobile-header-cart .ct-label,
  #header [data-device="mobile"] .hs-mobile-header-cart .ct-amount {
    display: none !important;
  }

  #header [data-device="mobile"] .hs-mobile-header-cart .ct-icon-container {
    width: 1.1875rem;
    height: 1.1875rem;
  }

  #header [data-device="mobile"] .hs-mobile-header-cart .ct-dynamic-count-cart {
    position: absolute;
    top: -.45rem;
    inset-inline-end: -.55rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding-inline: .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hs-color-primary-fill);
    color: #fff;
    font-size: .625rem;
    font-weight: var(--hs-font-weight-bold);
    border-radius: var(--hs-radius-full);
    line-height: 1;
  }

  #header [data-device="mobile"] .site-branding img {
    max-height: 2rem;
  }
}

/* Off-canvas drawer content: search / cart / wishlist / account rows
   (inc/template-parts/header/mobile-drawer-content.php), printed above
   Blocksy's own mobile nav menu inside the SAME #offcanvas panel the
   hamburger opens - not a second drawer. Blocksy's own panel chrome
   (position, width, slide animation, backdrop, z-index, padding) already
   applies; only the internals styled here are new. See off-canvas/
   panel.scss + offcanvas/dynamic-styles.php in the parent theme for what
   already exists (default backdrop ~rgba(18,21,25,.98), which already
   reads as dark before anything here is added). */

.hs-drawer-content {
  display: flex;
  flex-direction: column;
}

/* Search row */

.hs-drawer-search-form {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin-block: 0.875rem 1.125rem;
  box-sizing: border-box;
}

#offcanvas .hs-drawer-search-form__control {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 3rem;
  overflow: hidden;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  transition: border-color var(--hs-transition-fast) var(--hs-ease),
    box-shadow var(--hs-transition-fast) var(--hs-ease);
}

#offcanvas .hs-drawer-search-form:focus-within .hs-drawer-search-form__control {
  border-color: var(--hs-color-primary-500);
  box-shadow: 0 0 0 2px rgba(249, 80, 5, 0.1);
}

#offcanvas .hs-drawer-search-form__field {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 100%;
  padding-block: 0;
  padding-inline: 0.875rem var(--hs-space-8);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  color: #fff;
  font-size: var(--hs-font-size-body-sm);
  line-height: 1;
  font-family: inherit;
  direction: rtl;
}

#offcanvas .hs-drawer-search-form__field::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

#offcanvas .hs-drawer-search-form__field::-webkit-search-decoration,
#offcanvas .hs-drawer-search-form__field::-webkit-search-cancel-button,
#offcanvas .hs-drawer-search-form__field::-webkit-search-results-button,
#offcanvas .hs-drawer-search-form__field::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

#offcanvas .hs-drawer-search-form__field:focus {
  outline: none;
  border: 0;
  box-shadow: none;
}

#offcanvas .hs-drawer-search-form__submit {
  position: relative;
  flex: 0 0 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transform: none;
  appearance: none;
  -webkit-appearance: none;
  transition: color var(--hs-transition-fast) var(--hs-ease);
  --loader-size: 1rem;
  --loader-color: rgba(255, 255, 255, 0.65);
}

#offcanvas .hs-drawer-search-form__icon {
  display: block;
  width: 1.1875rem;
  height: 1.1875rem;
  flex: 0 0 auto;
}

#offcanvas .hs-drawer-search-form__submit:hover,
#offcanvas .hs-drawer-search-form__submit:focus-visible,
#offcanvas .hs-drawer-search-form:focus-within .hs-drawer-search-form__submit {
  color: var(--hs-color-primary-500);
}

#offcanvas .hs-drawer-search-form__submit:focus-visible {
  outline: 0;
}

#offcanvas .hs-drawer-search-form.ct-searching .hs-drawer-search-form__submit {
  display: inline-flex;
}

/* Live-search results (Blocksy's own .ct-search-results - same reuse
   contract as desktop, only visual properties set here). Normal flow
   below the field rather than absolutely positioned: the drawer panel
   already scrolls its own content (Blocksy's .ct-panel-content-inner),
   so a floating dropdown would only add a second, confusing scroll
   surface inside the first. */
.hs-drawer-search-form {
  --theme-form-field-height: 3rem;
  --search-dropdown-background: transparent;
  --search-dropdown-box-shadow: none;
  --search-image-size: 3.5rem;
  --search-image-radius: var(--hs-radius-sm);
  --items-spacing: var(--hs-space-12);
  --items-padding: var(--hs-space-12) var(--hs-space-4);
  --items-divider: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-drawer-search-form .ct-search-results {
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: var(--hs-space-8);
  padding-top: 0;
}

.hs-drawer-search-form .ct-search-item {
  min-height: 3.5rem;
  color: #fff;
  text-decoration: none;
  border-radius: var(--hs-radius-sm);
  transition: background-color var(--hs-transition-fast) var(--hs-ease);
}

.hs-drawer-search-form .ct-search-item:hover,
.hs-drawer-search-form .ct-search-item:focus-visible,
.hs-drawer-search-form .ct-search-item.is-active {
  background: rgba(249, 80, 5, 0.12);
}

.hs-drawer-search-form .ct-media-container {
  width: var(--search-image-size);
  height: var(--search-image-size);
  border-radius: var(--search-image-radius);
  overflow: hidden;
  background: #fff;
  flex: 0 0 auto;
}

.hs-drawer-search-form .ct-media-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hs-drawer-search-form .ct-search-item > span:not(.ct-media-container) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--hs-font-size-body-sm);
  line-height: var(--hs-line-height-tight);
}

.hs-drawer-search-form .product-search-meta {
  display: block;
  margin-top: var(--hs-space-4);
  font-size: var(--hs-font-size-caption);
  font-weight: var(--hs-font-weight-semibold);
}

.hs-drawer-search-form .product-search-meta .price,
.hs-drawer-search-form .product-search-meta .price .woocommerce-Price-amount {
  color: var(--hs-color-primary-500);
}

.hs-drawer-search-form .product-search-meta del {
  color: rgba(255, 255, 255, 0.45);
  font-weight: var(--hs-font-weight-regular);
  text-decoration: line-through;
}

.hs-drawer-search-form .product-search-meta ins {
  color: var(--hs-color-primary-500);
  text-decoration: none;
}

.hs-drawer-search-form .ct-search-more {
  justify-content: center;
  min-height: 3.5rem;
  color: var(--hs-color-primary-500);
  font-size: var(--hs-font-size-body-sm);
  font-weight: var(--hs-font-weight-medium);
  text-decoration: none;
  border-radius: var(--hs-radius-sm);
}

.hs-drawer-search-form .ct-search-more:hover,
.hs-drawer-search-form .ct-search-more:focus-visible,
.hs-drawer-search-form .ct-search-more.is-active {
  background: rgba(249, 80, 5, 0.12);
}

.hs-drawer-search-form__no-results {
  display: none;
  margin: 0;
  padding: var(--hs-space-12) var(--hs-space-4);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--hs-font-size-body-sm);
  text-align: center;
}

.hs-drawer-search-form:focus-within:has(
  .hs-drawer-search-form__field:not(:placeholder-shown)
):not(:has(.ct-search-results)) .hs-drawer-search-form__no-results {
  display: block;
}

/* Cart / wishlist / account action rows */

.hs-drawer-actions {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--hs-space-20);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hs-drawer-action-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--hs-space-12);
  /* 12-16px horizontal per the brief; 56px+ total row height via the
     vertical padding + icon/line-height, not a hardcoded min-height, so
     it still grows gracefully for a longer wishlist/account label at
     larger text-zoom levels. */
  padding: var(--hs-space-16) var(--hs-space-4);
  color: #fff;
  text-decoration: none;
  font-size: var(--hs-font-size-body);
  font-weight: var(--hs-font-weight-medium);
  text-align: start;
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
  transition: background-color var(--hs-transition-fast) var(--hs-ease);
}

.hs-drawer-action-row + .hs-drawer-action-row,
.hs-drawer-action-row-wrap + .hs-drawer-action-row-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-drawer-action-row:hover,
.hs-drawer-action-row:focus-visible,
.hs-drawer-action-row[aria-expanded="true"] {
  background: rgba(249, 80, 5, 0.1);
  color: var(--hs-color-primary-500);
}

.hs-drawer-action-row__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: inherit;
}
.hs-drawer-action-row__icon svg {
  width: 1.1875rem;
  height: 1.1875rem;
}

.hs-drawer-action-row__label {
  flex: 1 1 auto;
}

.hs-drawer-action-row__count {
  flex: 0 0 auto;
  min-width: 1.375rem;
  height: 1.375rem;
  padding-inline: var(--hs-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hs-color-primary-fill);
  color: #fff;
  font-size: var(--hs-font-size-caption);
  font-weight: var(--hs-font-weight-bold);
  border-radius: var(--hs-radius-full);
  line-height: 1;
}
.hs-drawer-action-row__count[hidden] {
  display: none;
}

/* Cart row: reuses Blocksy's own .ct-cart-item <a> (icon + live count +
   subtotal) verbatim inside a flex row, rather than re-marking it up -
   only laid out/recolored here, the count badge and subtotal text are
   Blocksy's own already-live markup (see mobile-drawer-content.php). */
.hs-drawer-action-row--cart {
  padding: 0;
}

.hs-drawer-action-row--cart .ct-cart-item {
  display: flex;
  align-items: center;
  gap: var(--hs-space-12);
  width: 100%;
  padding: var(--hs-space-16) var(--hs-space-4);
  color: #fff;
  text-decoration: none;
  transition: background-color var(--hs-transition-fast) var(--hs-ease);
}

.hs-drawer-action-row--cart .ct-cart-item:hover,
.hs-drawer-action-row--cart .ct-cart-item:focus-visible {
  background: rgba(249, 80, 5, 0.1);
  color: var(--hs-color-primary-500);
}

.hs-drawer-action-row--cart .ct-icon-container {
  order: -1;
  position: relative;
  width: 1.1875rem;
  height: 1.1875rem;
  flex: 0 0 auto;
}

.hs-drawer-action-row--cart .ct-dynamic-count-cart {
  position: absolute;
  top: -.4rem;
  inset-inline-end: -.5rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding-inline: .2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hs-color-primary-fill);
  color: #fff;
  font-size: .625rem;
  font-weight: var(--hs-font-weight-bold);
  border-radius: var(--hs-radius-full);
  line-height: 1;
}

.hs-drawer-action-row--cart .ct-label {
  order: 2;
  margin-inline-start: auto;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--hs-font-size-body-sm);
  font-weight: var(--hs-font-weight-regular);
}

.hs-drawer-action-row--cart .hs-drawer-action-row__label {
  flex: 1 1 auto;
}

/* Account accordion: same .hs-accordion component used elsewhere (see
   components/accordion.css), just carrying the action-row look on its
   trigger so it reads as one consistent list with the cart/wishlist rows
   above it rather than a visually distinct control. */
.hs-drawer-account .hs-accordion__item {
  border: 0;
}

.hs-drawer-account .hs-accordion__trigger {
  padding: var(--hs-space-16) var(--hs-space-4);
}

.hs-drawer-account .hs-accordion__icon {
  color: rgba(255, 255, 255, 0.5);
}

.hs-drawer-account__body {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  padding-inline: var(--hs-space-4);
}

.hs-drawer-account__greeting {
  padding-block: var(--hs-space-4) var(--hs-space-8);
  color: #fff;
  font-weight: var(--hs-font-weight-semibold);
}

.hs-drawer-account__link {
  padding-block: var(--hs-space-8);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: var(--hs-font-size-body-sm);
}
.hs-drawer-account__link:hover,
.hs-drawer-account__link:focus-visible {
  color: var(--hs-color-primary-500);
}

.hs-drawer-account__login-form {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-12);
  padding-block: var(--hs-space-4);
}

.hs-drawer-account__login-form .hs-label {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-8);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--hs-font-size-body-sm);
}

.hs-drawer-account__form-error {
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-danger-500);
}

/* Nav links: large touch targets + subtle separators per the brief,
   layered on top of Blocksy's own .mobile-menu base (mobile-menu-
   base.scss - width/flex/submenu behavior stay as-is, only touch sizing
   and dividers are added here). */
#offcanvas .mobile-menu > li {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#offcanvas .mobile-menu > li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--hs-space-4);
}

#offcanvas .mobile-menu .ct-menu-link {
  min-height: 2.75rem;
  padding-block: var(--hs-space-12) !important;
  padding-inline: var(--hs-space-4);
  color: #fff;
  font-size: var(--hs-font-size-body);
  font-weight: var(--hs-font-weight-medium);
}

#offcanvas .mobile-menu .ct-menu-link:hover,
#offcanvas .mobile-menu .ct-menu-link:focus-visible {
  color: var(--hs-color-primary-500);
}