/* ===== Hide Blocksy's stock header/footer + old floating widgets =====
   Reversible: delete this one block to instantly restore the stock chrome,
   with zero PHP/data changes anywhere (per the plan's rollback strategy).
   #huacan-fixed-cart (store-customizations.php) only ever contains the WC
   Mini Cart block's small trigger BUTTON server-side — its off-canvas
   drawer is injected elsewhere by the block's own JS when opened, not
   nested here — so hiding this div is safe: header.js's
   .wc-block-mini-cart__button.click() still fires on a display:none
   button, and the drawer still opens normally. Without this rule the old
   button floated fixed (top:18px;right:90px) on top of the new header's
   own cart icon — the redundant "bugged floating cart" the user reported
   2026-08-24 was this old bubble, not a bug in the new header. */
#header.ct-header,
#footer.ct-footer,
.bht-lang-switcher,
#huacan-fixed-cart {
  display: none !important;
}
/* Restore just the copy of the switcher we render ourselves inside the new
   utility bar (same underlying class/markup from bht-multilingual-commerce,
   just re-shown here — more specific selector wins over the blanket hide
   above regardless of !important, since both sides use it). */
.hp-lang-switcher-wrap .bht-lang-switcher {
  display: flex !important;
  /* 2026-08-26: this is the real cause of the "ENIPTIES" collision the
     user spotted — BHT_MLC_Switcher::render() outputs plain text " | "
     separators between the EN/PT/ES elements, and turning the <nav> into
     a flex container (with no gap) let the browser trim the leading/
     trailing whitespace off those anonymous text-node flex items, packing
     "EN", "|", "PT", "|", "ES" edge to edge — which then reads as one
     word because a bare "|" glyph in Manrope looks just like a capital I.
     A real gap restores the visual separation regardless of that
     whitespace trimming. */
  gap: 5px;
  position: static !important;
  top: auto !important;
  right: auto !important;
  font-size: 12px !important;
  color: inherit !important;
}
.hp-lang-switcher-wrap .bht-lang-switcher a { color: var(--hp-sand) !important; }
.hp-lang-switcher-wrap .bht-lang-switcher a:hover,
.hp-lang-switcher-wrap .bht-lang-switcher .bht-lang-current { color: #fff !important; }

/* ===================== Utility bar ===================== */
.hp-utility-bar {
  background: var(--hp-ink);
  color: var(--hp-sand);
}
.hp-utility-bar__inner {
  width: 100%;
  height: 44px;
  padding: 0 var(--hp-gutter-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hp-space-2);
  font: 500 12px/1 var(--hp-font-sans);
  letter-spacing: .01em;
}
.hp-utility-bar__msg { display: inline-flex; align-items: center; gap: 9px; }
.hp-utility-bar__dot { width: 5px; height: 5px; background: var(--hp-lacquer); flex: none; }
.hp-star { color: var(--hp-lacquer); letter-spacing: .08em; }
.hp-utility-bar__controls { display: flex; align-items: center; gap: var(--hp-space-2); }
.hp-utility-bar__controls a { color: var(--hp-sand); }
.hp-utility-bar__controls a:hover { color: #fff; }
.hp-utility-bar .yaycurrency-switcher-wrapper,
.hp-utility-bar select { font-family: var(--hp-font-sans); font-size: 12px; font-weight: 500; }
/* 2026-08-26: with only "USD" showing (show_flag/show_name off, see
   class-hp-header.php), the plugin's own "medium" wrapper size still
   reserved its old wider min-width — invisible extra width that was
   overlapping the language switcher immediately after it in the flex row
   (the "ENIPTIES" collision the user spotted is "EN | PT | ES" rendered
   underneath/behind that reserved space, not a text bug). Collapsing the
   wrapper to its real content width fixes the overlap without touching
   the plugin's own files. */
.hp-utility-bar .yay-currency-single-page-switcher,
.hp-utility-bar .yay-currency-custom-select-wrapper,
.hp-utility-bar .yay-currency-custom-select,
.hp-utility-bar .yay-currency-custom-select__trigger {
  width: auto !important;
  min-width: 0 !important;
}
.hp-utility-bar .yay-currency-custom-selected-option { white-space: nowrap; }
.bht-lang-switcher-inline { color: var(--hp-sand) !important; }

/* ===================== Header ===================== */
.hp-header {
  background: var(--hp-paper);
  border-bottom: 1px solid var(--hp-sand);
}
.hp-header__row {
  width: 100%;
  height: 84px;
  padding: 0 var(--hp-gutter-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hp-space-2);
}
.hp-header__logo {
  /* "Logo respirando" (2026-08-26): a touch taller + explicit horizontal
     margin so it isn't pinned edge-to-edge against the nav on either
     side — was relying entirely on the row's own space-between/gap,
     which could shrink to nothing on a tight viewport. */
  margin: 0 16px;
}
.hp-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}
.hp-header__nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font: 600 13px/1 var(--hp-font-sans);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hp-header__nav a {
  color: var(--hp-ink);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.hp-header__nav a:hover { color: var(--hp-lacquer); border-bottom-color: var(--hp-lacquer); }
.hp-header__nav--left { flex: 1; }
.hp-header__nav--right { flex: 1; justify-content: flex-end; }

/* Category dropdown (2026-09-13): a plain hover/focus reveal, no JS --
   matches the rest of this header's "reuse what already works" approach.
   .hp-header__nav-item wraps a top-level link that has real subcategories. */
.hp-header__nav-item { position: relative; display: flex; align-items: center; }
.hp-header__nav-item > a::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.hp-header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--hp-paper);
  border: 1px solid var(--hp-sand);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 50;
}
.hp-header__nav-item:hover .hp-header__dropdown,
.hp-header__nav-item:focus-within .hp-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hp-header__dropdown a {
  display: block;
  padding: 9px 18px;
  font: 500 12.5px/1.3 var(--hp-font-sans);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  border-bottom: 0;
}
.hp-header__dropdown a:hover { color: var(--hp-lacquer); background: var(--hp-cream); }

.hp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: var(--hp-cream);
  border-bottom: 1px solid #DCD3C2;
  min-width: 150px;
  color: var(--hp-meta);
  transition: border-color .2s ease, background .2s ease;
}
.hp-search:focus-within { border-bottom-color: var(--hp-lacquer); background: var(--hp-paper); }
@media (prefers-reduced-motion: reduce) {
  .hp-search { transition: none; }
}
.hp-search svg { fill: var(--hp-meta); flex-shrink: 0; }
.hp-search input[type="search"] {
  border: 0; background: none; outline: 0; flex: 1;
  font: 400 13px/1 var(--hp-font-sans);
  color: var(--hp-ink);
}
.hp-search input[type="search"]:focus-visible {
  outline: 2px solid var(--hp-lacquer); outline-offset: 2px;
}

/* ===================== Focus states (accessibility, §17) =====================
   Sitewide keyboard-focus indicator using the Lacquer token — the theme/stock
   markup this plugin renders on top of (header nav, footer links, buttons,
   cards) had no visible focus style at all before this rule; :focus-visible
   (not :focus) so it only shows for keyboard navigation, not mouse clicks. */
.hp-header a:focus-visible,
.hp-header button:focus-visible,
.hp-mobile-drawer a:focus-visible,
.hp-mobile-drawer button:focus-visible,
.hp-btn:focus-visible,
.hp-text-link:focus-visible,
.hp-mosaic__tile:focus-visible,
.hp-card__title-link:focus-visible,
li.hp-card a:focus-visible,
.huacan-footer-menu a:focus-visible {
  outline: 2px solid var(--hp-lacquer);
  outline-offset: 2px;
}
.hp-search input[type="search"]::placeholder { color: var(--hp-meta); }

.hp-header__cart {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer;
  font: 600 13px/1 var(--hp-font-sans); letter-spacing: .02em; text-transform: uppercase;
  color: var(--hp-ink); padding: 8px 0;
}
.hp-header__cart:hover { color: var(--hp-lacquer); }
.hp-header__cart-badge {
  min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--hp-lacquer); color: var(--hp-paper); font-size: 11px;
}
.hp-header__cart-badge[data-hp-empty] { display: none; }

.hp-header__burger { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; }
.hp-header__burger span { height: 1.5px; width: 22px; background: var(--hp-ink); display: block; }
.hp-header__mobile-actions { display: none; align-items: center; gap: 2px; }
/* Mobile actions are icon buttons (search glass + shopping bag), the usual
   mobile-commerce convention — not the "FIND"/"BAG" word labels the first
   redesign pass shipped. */
.hp-header__mobile-find,
.hp-header__cart--mobile {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--hp-ink);
}
.hp-header__mobile-find svg,
.hp-header__cart--mobile svg { width: 21px; height: 21px; display: block; }
.hp-header__mobile-find:active,
.hp-header__cart--mobile:active { color: var(--hp-lacquer); }
.hp-header__cart--mobile .hp-header__cart-badge {
  position: absolute; top: 4px; right: 0;
  min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px;
}

/* Microinteraction pass (2026-08-26): the drawer used to snap open/closed
   via the `hidden` attribute alone — instant, no motion at all, the one
   real "drawer" on the site with zero transition. `hidden` itself can't
   be animated (maps to display:none), so header.js now sequences a
   `.is-open` class around it: adds it a frame after removing `hidden`
   (open), removes it and waits for this transition before setting
   `hidden` back (close). max-height is a generous fixed value, not the
   drawer's real height — fine for a short nav list, revisit with a
   measured height if the drawer content ever grows much taller. */
.hp-mobile-drawer {
  background: var(--hp-paper);
  border-bottom: 1px solid var(--hp-sand);
  padding: 0 var(--hp-gutter-mobile);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
}
.hp-mobile-drawer.is-open {
  padding: var(--hp-space-2) var(--hp-gutter-mobile) var(--hp-space-3);
  /* Bumped 2026-09-13 (was 640px): drawer now also lists subcategories
     under Diamond painting / Paint by numbers, ~8 extra rows. */
  max-height: 1200px;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hp-mobile-drawer { transition: none; }
}
.hp-mobile-drawer nav { display: flex; flex-direction: column; }
.hp-mobile-drawer nav a {
  padding: 16px 0; border-bottom: 1px solid var(--hp-sand);
  font: 600 15px/1 var(--hp-font-sans); letter-spacing: .02em; text-transform: uppercase;
  color: var(--hp-ink);
}
.hp-mobile-drawer nav a.hp-mobile-drawer__child {
  padding: 12px 0 12px 16px;
  font: 500 13px/1 var(--hp-font-sans);
  text-transform: none;
  letter-spacing: normal;
  color: var(--hp-meta);
}
.hp-search--mobile { width: 100%; margin-top: var(--hp-space-2); min-width: 0; }

@media (max-width: 900px) {
  .hp-utility-bar__inner { padding: 0 var(--hp-gutter-mobile); height: auto; min-height: 38px; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; padding-top: 6px; padding-bottom: 6px; }
  .hp-utility-bar__msg { display: none; }
  .hp-header__row { padding: 0 var(--hp-gutter-mobile); height: 64px; }
  .hp-header__nav--left, .hp-header__nav--right { display: none; }
  .hp-header__burger { display: flex; }
  .hp-header__mobile-actions { display: flex; }
  .hp-header__logo img { height: 26px; }
}

/* ===================== Footer restyle (real markup from
   store-customizations.php's blocksy:footer:before callback — CSS only,
   no PHP duplicated). Rebuilt 2026-08-24 to match the mock's 4-column +
   bottom-bar structure (5th "Follow" column intentionally omitted, no
   real social accounts exist yet — see the PHP file's own comment). */
.ct-footer { background: var(--hp-ink); }
/* Real bug, found by the user 2026-08-24: .ct-footer targets Blocksy's
   own stock <footer id="footer">, which is hidden (display:none, see the
   top of this file) and holds only a copyright line — it is NOT an
   ancestor of .huacan-footer-columns (a sibling <footer> injected earlier
   at blocksy:footer:before, see store-customizations.php). The rule above
   never actually painted the visible footer dark; it inherited the page's
   light background instead, so every light-toned text color below
   (var(--hp-cream-on-dark) etc., chosen for a dark ground) was near-invisible. Background
   set directly on both real footer blocks below fixes it for real. */
/* Investigated a pale ~50-70px band between the newsletter section and
   the footer in headless-Chromium screenshots (2026-08-26) — tried
   margin:0, then height:auto/min-height:0/padding-bottom:0 on #main, zero
   visible change from any of them despite each reload being confirmed
   live (cache flushed, fpm reloaded). Given this session already hit two
   confirmed screenshot-capture false positives (a product image that was
   actually fine in the DB, and an oversized-viewport blank-canvas gap
   lower on this same page), and CSS changes here had literally no effect
   on it, this is almost certainly a third one — a Chromium
   headless-screenshot tiling/stitch artifact on a very tall page, not a
   real box-model issue. Left unresolved deliberately; don't sink more
   time into it from a screenshot alone — if a real user ever reports a
   visible gap here, that would confirm it's real and worth a fresh look. */
footer.huacan-footer-columns { margin: 0; }
.huacan-footer-columns,
.huacan-footer-bottom {
  background: var(--hp-ink);
}
/* Specificity bump, whole footer block (2026-08-26): store-customizations.php
   independently echoes its OWN <style> block with plain single-class rules
   for .huacan-footer-columns/.huacan-footer-col h4/.huacan-footer-menu a
   (a leftover from before Phase 1 rebuilt this footer) — same specificity
   as the rules below, so which one won was purely a matter of hook-priority
   print order, not a deliberate cascade. Scoping every selector here under
   `footer.huacan-footer-columns` makes ours unconditionally win regardless
   of that ordering, without needing !important or touching the mu-plugin. */
footer.huacan-footer-columns {
  width: 100%;
  max-width: none;
  padding: var(--hp-space-6) var(--hp-gutter-desktop) var(--hp-space-4);
  gap: var(--hp-space-5);
  justify-content: flex-start;
  text-align: left;
}
footer.huacan-footer-columns .huacan-footer-brand { max-width: 320px; }
footer.huacan-footer-columns .huacan-footer-logo { height: 34px; filter: brightness(0) invert(1); }
footer.huacan-footer-columns .huacan-footer-tagline { color: var(--hp-cream-on-dark); font: 400 15px/1.7 var(--hp-font-sans); }
footer.huacan-footer-columns .huacan-footer-col h4 {
  font: 600 12px/1 var(--hp-font-sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--hp-meta-soft); margin-bottom: 16px;
}
footer.huacan-footer-columns .huacan-footer-menu a { color: var(--hp-cream-on-dark); font: 400 15px/1 var(--hp-font-sans); }
footer.huacan-footer-columns .huacan-footer-menu a:hover,
footer.huacan-footer-columns .huacan-footer-menu a:focus-visible { color: var(--hp-lacquer); }
.huacan-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
  width: 100%;
  padding: 28px var(--hp-gutter-desktop) var(--hp-space-4);
  border-top: 1px solid #3A332C;
  font: 500 12px/1 var(--hp-font-sans);
  color: var(--hp-meta-soft);
}
.huacan-footer-bottom__legal { display: flex; gap: 24px; }
.huacan-footer-bottom__legal a { color: var(--hp-meta-soft); text-decoration: none; }
.huacan-footer-bottom__legal a:hover, .huacan-footer-bottom__legal a:focus-visible { color: var(--hp-lacquer); }
@media (max-width: 900px) {
  .huacan-footer-columns { padding: var(--hp-space-4) var(--hp-gutter-mobile); }
  .huacan-footer-bottom { padding: 24px var(--hp-gutter-mobile) var(--hp-space-3); justify-content: center; text-align: center; }
}

/* ===================== Product card ===================== */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 900px) {
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
}

li.hp-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}

.hp-card__media {
  /* 1:1, not the mock's 4:5 — every real product photo in this catalog is
     a square 1000x1000 (confirmed by sampling 10 random products), so a
     4:5 box + object-fit:cover was cropping ~20% off both left/right
     edges of every card sitewide. Square eliminates the crop entirely;
     revisit only if photography is ever reshot specifically for 4:5. */
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--hp-cream);
}
.hp-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-card__img--hover {
  opacity: 0;
  transition: opacity .35s ease;
}
.hp-card__media:hover .hp-card__img--hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hp-card__img--hover { transition: none; }
}

.hp-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 7px 10px;
  font: 600 10px/1 var(--hp-font-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.hp-card__badge--solid { background: var(--hp-ink); color: var(--hp-paper); }
.hp-card__badge--outline { background: var(--hp-paper); color: var(--hp-lacquer); border: 1px solid #E3C4B8; }

.hp-card__body { display: flex; flex-direction: column; gap: 7px; }
.hp-card__title-link { text-decoration: none; }
.hp-card__title {
  display: block;
  /* Was Instrument Serif 20px — product names are functional/scannable
     text, not a brand moment, per the 2026-08-26 art-direction pass.
     Manrope 600 reads faster and stops every category/search grid from
     looking like a magazine masthead. */
  font: 600 16px/1.3 var(--hp-font-sans);
  color: var(--hp-ink);
}
.hp-card__title-link:hover .hp-card__title { color: var(--hp-lacquer); }
.hp-card__spec { font: 500 13px/1 var(--hp-font-sans); color: var(--hp-meta); }

.hp-card__meta { display: flex; align-items: baseline; gap: 12px; padding-top: 3px; flex-wrap: wrap; }
.hp-card__price { font: 700 15px/1 var(--hp-font-sans); color: var(--hp-ink); }
.hp-card__price ins { text-decoration: none; }
.hp-card__price del { color: var(--hp-meta); opacity: .7; font-size: .9em; }
.hp-card__rating { font: 500 12px/1 var(--hp-font-sans); color: var(--hp-meta); display: flex; align-items: center; gap: 3px; }
.hp-card__rating .hp-star { color: var(--hp-lacquer); }

@media (max-width: 900px) {
  .hp-card__title { font-size: 15px; }
  .hp-card__price { font-size: 14px; }
  .hp-card__spec { font-size: 12px; }
}

/* ===================== Home: shared section bits ===================== */
.hp-eyebrow {
  display: block;
  /* Tracking cut from .16em to .04em (2026-08-26) — the old value was the
     single most "trying too hard" detail sitewide; a small caps label
     doesn't need typewriter-wide spacing to read as a label. */
  font: 600 11px/1 var(--hp-font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hp-meta-soft);
  margin-bottom: 16px;
}
.hp-eyebrow--on-dark { color: var(--hp-lacquer-on-dark); }
.hp-text-link {
  font: 600 12px/1 var(--hp-font-sans);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--hp-ink);
  border-bottom: 1px solid var(--hp-lacquer);
  padding-bottom: 4px;
  text-decoration: none;
}

/* ===================== Category mosaic ===================== */
.hp-mosaic {
  width: 100%;
  padding: var(--hp-space-7) var(--hp-gutter-desktop);
  display: flex;
  flex-direction: column;
  gap: var(--hp-space-4);
}
.hp-mosaic__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid var(--hp-sand);
  padding-bottom: 24px;
  gap: var(--hp-space-2);
}
.hp-mosaic__title {
  margin: 0;
  font: 400 44px/1 var(--hp-font-serif);
  letter-spacing: -.015em;
  color: var(--hp-ink);
}

.hp-mosaic__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 300px 300px;
  gap: 20px;
}
.hp-mosaic__tile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: var(--hp-cream);
}
.hp-mosaic__tile--large { grid-row: span 2; }
.hp-mosaic__tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.hp-mosaic__tile:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .hp-mosaic__tile img { transition: none; }
  .hp-mosaic__tile:hover img { transform: none; }
}

.hp-mosaic__scrim {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 36px;
  background: linear-gradient(to bottom, rgba(20,17,14,.5) 0%, rgba(20,17,14,.05) 32%, rgba(20,17,14,.06) 55%, rgba(20,17,14,.6) 100%);
}
.hp-mosaic__index {
  font: 600 12px/1 var(--hp-font-sans); letter-spacing: .04em;
  color: var(--hp-paper); text-shadow: 0 1px 8px rgba(20,17,14,.5);
}
.hp-mosaic__label { display: flex; flex-direction: column; gap: 8px; }
.hp-mosaic__name { font: 400 46px/1 var(--hp-font-serif); color: var(--hp-paper); }
.hp-mosaic__name--sm { font-size: 32px; }
.hp-mosaic__name--xs { font-size: 24px; }
.hp-mosaic__count { font: 500 13px/1 var(--hp-font-sans); color: #EDE6DA; }

.hp-mosaic__tile--dark {
  background: var(--hp-ink);
  display: flex; flex-direction: column; justify-content: space-between; padding: 28px;
}
.hp-mosaic__tile--dark .hp-mosaic__index { color: var(--hp-lacquer-on-dark); text-shadow: none; }
.hp-mosaic__tile--dark:hover { background: #181410; }

.hp-mosaic__nested { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hp-mosaic__tile--sm .hp-mosaic__scrim { padding: 22px; }

@media (max-width: 900px) {
  .hp-mosaic { padding: var(--hp-space-5) var(--hp-gutter-mobile); }
  .hp-mosaic__title { font-size: 30px; }
}

/* Tablet: was falling straight through to the mobile 1-column stack (6
   tiles full-width = a huge scroll with no grid at all) — this range never
   had its own layout, it just inherited whatever <=900px mobile did.
   2 columns keeps the mosaic feeling like a grid, not a list: the large
   tile stays tall in column 1, the 3 remaining single tiles fill column 2
   top-to-bottom, and the nested pair (Christmas/Landscape) gets its own
   full-width row at the bottom so its two mini-tiles keep real width
   instead of being squeezed into a half column. */
@media (min-width: 641px) and (max-width: 1100px) {
  .hp-mosaic__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 280px; }
  .hp-mosaic__tile--large { grid-row: span 2; grid-column: 1; }
  /* 4th grid child is always the "top3" single tile (Painting) — full width
     so it doesn't leave an orphan empty cell next to it before the nested
     pair's own full-width row. */
  .hp-mosaic__grid > :nth-child(4) { grid-column: 1 / -1; }
  .hp-mosaic__nested { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .hp-mosaic__grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .hp-mosaic__tile--large { grid-row: auto; height: 340px; }
  .hp-mosaic__tile { height: 260px; }
  .hp-mosaic__nested { grid-column: auto; }
}

/* ===================== Single product page — small, targeted fixes only =====================
   2026-08-26: found while checking a PDP for the first time this whole
   engagement (all prior verification was curl HTTP-200 checks, not real
   screenshots) — the single product template itself was never touched by
   any phase of this redesign, only the Home page and the loop/card
   component. The full PDP (gallery, payment-gateway buttons, description
   layout) is a real redesign-sized gap, NOT polish — flagged to the user
   and deliberately NOT taken on here. Only these two fixes are in scope,
   both direct extensions of decisions already made elsewhere on the site:
   1. WooCommerce's own stock "onsale" flash (`span.onsale`) — same
      reasoning as removing the Sale badge from every card sitewide
      (100% of the catalog is on_sale, see class-hp-product-card.php).
   2. The Add to Cart button recolored to the site's real accent instead
      of Woo/Blocksy's default gold-brown, so it doesn't clash with every
      other primary action on the site (.hp-btn--primary). */
.onsale { display: none !important; }
.single_add_to_cart_button.button {
  background: var(--hp-lacquer) !important;
  color: var(--hp-paper) !important;
  border: 0 !important;
  font-family: var(--hp-font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}
.single_add_to_cart_button.button:hover { background: var(--hp-lacquer-hover) !important; }