/* ============================================================================
   H&M General Trading — "Gold-Standard General Store" design layer
   ----------------------------------------------------------------------------
   Applies the design system (~/.impeccable/design.json) over the stock
   Hummingbird theme (Bootstrap 5.3.3). Loaded AFTER theme.css.
   One metallic gold accent on a calm white canvas; flat-at-rest surfaces;
   shadows only on state change; motion rationed to moments that reward
   attention. Reversible: remove the {block name='hm_custom_assets'} link in
   themes/hummingbird/templates/_partials/head.tpl to disable everything here.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Tokens  +  re-point Bootstrap's single accent (was #0b69f6 blue) to gold
   ---------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --hm-gold: #c2922f;          /* Brand Gold — fills only */
  --hm-bronze: #8a5d22;        /* gradient end */
  --hm-gold-ink: #7a521d;      /* gold as text on light (passes 4.5:1) */
  --hm-gold-ink-hover: #5a4115;
  --hm-gold-grad: linear-gradient(135deg, #c2922f, #8a5d22);
  --hm-ink: #1c2024;
  --hm-muted: #6b7280;
  --hm-line: #e7e9ee;
  --hm-surface: #f7f8fa;
  --hm-rating: #f5a623;

  --hm-shadow-ambient: 0 6px 22px rgba(20, 26, 40, .08);
  --hm-shadow-lift: 0 18px 44px rgba(20, 26, 40, .16);
  --hm-glow: 0 4px 14px rgba(160, 115, 40, .30);
  --hm-glow-hover: 0 8px 22px rgba(160, 115, 40, .42);

  --hm-ease: cubic-bezier(.2, .7, .2, 1);
  --hm-radius: 14px;

  /* distinctive display face for headings (body stays Inter) */
  --hm-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bootstrap re-point: gold is now the one accent across the whole UI */
  --bs-primary: #c2922f;
  --bs-primary-rgb: 194, 146, 47;
  --bs-link-color: #7a521d;          /* gold ink, never bright gold, for text */
  --bs-link-color-rgb: 122, 82, 29;
  --bs-link-hover-color: #5a4115;
  --bs-link-hover-color-rgb: 90, 65, 21;
  --bs-body-color: #1c2024;
  --bs-body-color-rgb: 28, 32, 36;
  --bs-emphasis-color: #1c2024;
  --bs-border-color: #e7e9ee;
}

body {
  color: var(--hm-ink);
  background: #fff;
}

/* characterful display face on headings (the de-slop lever) */
.hm-hero__title,
.section-title, h2.section-title,
.page-title-section, h1.page-title-section,
.hm-nav__trigger,
.product__name, .product-detail .h1,
.footer-block__title {
  font-family: var(--hm-display);
  letter-spacing: -.015em;
}
.hm-hero__title { letter-spacing: -.03em; }

/* gold selection */
::selection { background: rgba(194, 146, 47, .22); color: var(--hm-ink); }

/* a precise, calm gold focus ring everywhere (replaces Bootstrap blue glow) */
*:focus-visible,
.form-control:focus,
.btn:focus-visible,
.btn-check:focus-visible + .btn {
  outline: none !important;
  box-shadow: 0 0 0 .2rem rgba(194, 146, 47, .35) !important;
  border-color: var(--hm-gold) !important;
}

/* ----------------------------------------------------------------------------
   2. Buttons — gold gradient pill (primary), hairline pill (outline/secondary)
   ---------------------------------------------------------------------------- */
.btn {
  border-radius: 999px;
  font-weight: 600;
  transition: box-shadow .28s var(--hm-ease), filter .28s var(--hm-ease),
              transform .28s var(--hm-ease), background-color .28s var(--hm-ease),
              color .28s var(--hm-ease), border-color .28s var(--hm-ease);
}
.btn-primary,
.btn-primary:active,
.btn-primary.active {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  background-image: var(--hm-gold-grad);
  border: none;
  color: #fff;
  box-shadow: var(--hm-glow);
}
.btn-primary:hover {
  background-image: var(--hm-gold-grad);
  color: #fff;
  box-shadow: var(--hm-glow-hover);
  filter: brightness(1.04);
}
.btn-primary:active { transform: translateY(1px); }

.btn-outline-primary,
.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--hm-gold-ink);
  --bs-btn-border-color: var(--hm-line);
  --bs-btn-bg: #fff;
  --bs-btn-hover-color: var(--hm-gold-ink);
  --bs-btn-hover-bg: var(--hm-surface);
  --bs-btn-hover-border-color: var(--hm-gold);
  --bs-btn-active-color: var(--hm-gold-ink);
  --bs-btn-active-bg: var(--hm-surface);
  --bs-btn-active-border-color: var(--hm-gold);
}

/* links */
a { text-decoration: none; }
a:hover { color: var(--hm-gold-ink-hover); }

/* ----------------------------------------------------------------------------
   3. Header — calm white bar, sticky-shrink with an ambient shadow on scroll
   ---------------------------------------------------------------------------- */
#header.header {
  background: #fff;
  border-bottom: 1px solid var(--hm-line);
  transition: box-shadow .28s var(--hm-ease), background .28s var(--hm-ease);
}
#header .header-top {
  border-bottom: 1px solid var(--hm-line);
  font-size: .9rem;
}
#header .header-bottom__container { padding-top: 1.15rem; padding-bottom: 1.15rem; transition: padding .28s var(--hm-ease); }
#header .header-bottom__logo img { transition: max-height .28s var(--hm-ease); }

/* shrunk state (toggled by hm-custom.js once the page is scrolled) */
#header.hm-shrink { box-shadow: var(--hm-shadow-ambient); border-bottom-color: transparent; }
#header.hm-shrink .header-bottom__container { padding-top: .55rem; padding-bottom: .55rem; }
#header.hm-shrink .header-bottom__logo img { max-height: 44px; }

/* header utility links (Contact / sign-in) in calm ink, gold on hover */
#header .header-top a,
#header .ps-contactinfo a { color: var(--hm-muted); }
#header .header-top a:hover { color: var(--hm-gold-ink); }

/* ----------------------------------------------------------------------------
   4. Main navigation — flat pills, gold-ink on hover
   ---------------------------------------------------------------------------- */
.ps-mainmenu__desktop a,
.ps-mainmenu a.ps-mainmenu__link {
  color: var(--hm-ink);
  font-weight: 600;
  border-radius: 999px;
  padding: .55rem 1rem;
  transition: background .28s var(--hm-ease), color .28s var(--hm-ease);
}
.ps-mainmenu__desktop a:hover,
.ps-mainmenu a.ps-mainmenu__link:hover {
  background: var(--hm-surface);
  color: var(--hm-gold-ink);
}

/* ----------------------------------------------------------------------------
   5. Search — joined pill (rounded field fused to a gold submit affordance)
   ---------------------------------------------------------------------------- */
.ps-searchbar__form {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 460px;
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  background: #fff;
  padding-left: .85rem;
  transition: border-color .28s var(--hm-ease), box-shadow .28s var(--hm-ease);
}
.ps-searchbar__form:focus-within {
  border-color: var(--hm-gold);
  box-shadow: 0 0 0 .2rem rgba(194, 146, 47, .25);
}
.ps-searchbar__magnifier {
  color: var(--hm-gold-ink);
  font-size: 1.15rem;
}
.ps-searchbar__input.form-control {
  border: none !important;
  background: transparent;
  box-shadow: none !important;
  border-radius: 999px;
  padding: .6rem .9rem .6rem 2.1rem;
}
.ps-searchbar__input.form-control::placeholder { color: var(--hm-muted); }

/* ----------------------------------------------------------------------------
   6. Cart toggle — gold pill in the header, pulses on cart update
   ---------------------------------------------------------------------------- */
#header .ps-shoppingcart .header-block.blockcart .header-block__action-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background-image: var(--hm-gold-grad);
  color: #fff;
  border-radius: 999px;
  padding: .55rem 1rem !important;   /* left padding; right is forced to 0 by pe-md-0 and matched via the title's margin-right below for symmetry */
  box-shadow: var(--hm-glow);
  transition: filter .28s var(--hm-ease), box-shadow .28s var(--hm-ease);
  position: relative;
}
.ps-shoppingcart .header-block.blockcart .header-block__action-btn:hover {
  filter: brightness(1.04);
  box-shadow: var(--hm-glow-hover);
  color: #fff;
}
.ps-shoppingcart .header-block__icon,
.ps-shoppingcart .header-block__title { color: #fff; }
/* breathing room on the right (Bootstrap's pe-md-0 zeroes the pill's padding-right,
   so add it via the title's margin instead) */
.ps-shoppingcart .header-block.blockcart .header-block__title { margin-right: 1rem; }  /* == pill padding-left, so the pill is symmetric (pe-md-0 zeroes padding-right) */
/* count = small badge tucked onto the cart-icon's top-right corner (notification
   style), instead of a centered chip floating after the text */
#header .ps-shoppingcart .header-block__icon  { order: 0; }
#header .ps-shoppingcart .header-block__title { order: 2; }
#header .ps-shoppingcart .header-block__badge {
  order: 1; align-self: flex-start;
  margin: -3px 0 0 -13px !important;        /* pull it onto the icon's top-right corner */
  position: relative !important; inset: auto !important; z-index: 2;
  min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--hm-gold-ink);
  border-radius: 999px; font-size: .68rem; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 1.5px var(--hm-gold-ink-hover), 0 1px 4px rgba(20, 26, 40, .3);
}
.ps-shoppingcart.hm-bump .header-block__action-btn { animation: hm-cart-bump .45s ease; }
@keyframes hm-cart-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  60%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
/* mobile cart/account placeholder icons → gold ink */
#_mobile_ps_shoppingcart .header-block__icon,
#_mobile_ps_customersignin .header-block__icon { color: var(--hm-gold-ink); }
#_mobile_ps_shoppingcart .header-block__badge {
  background: var(--hm-gold); color: #fff; border-radius: 999px;
}

/* ----------------------------------------------------------------------------
   7. Hero slider (ps_imageslider carousel) — refined scrim, gold controls
   ---------------------------------------------------------------------------- */
.ps-imageslider .carousel-item { background: var(--hm-surface); }
.ps-imageslider .ps-imageslider__figure { position: relative; }
.ps-imageslider .ps-imageslider__figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20, 26, 40, .45) 0%, rgba(20, 26, 40, .12) 45%, transparent 70%);
  pointer-events: none;
}
.ps-imageslider .ps-imageslider__figcaption.carousel-caption {
  right: auto;
  left: 6%;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  max-width: min(560px, 60%);
  text-align: left;
  background: transparent;
  padding: 0;
}
.ps-imageslider .ps-imageslider__figcaption h2,
.ps-imageslider .ps-imageslider__figcaption .h2 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-bottom: .5rem;
}
.ps-imageslider .ps-imageslider__figcaption p { color: rgba(255, 255, 255, .92); }
.ps-imageslider .ps-imageslider__figcaption::before {
  content: "";
  display: block;
  width: 56px; height: 4px;
  background: var(--hm-gold-grad);
  border-radius: 999px;
  margin-bottom: 1rem;
}
/* indicators → slim gold pills */
.ps-imageslider .carousel-indicators [data-bs-target] {
  width: 28px; height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  border: none;
  transition: background .28s var(--hm-ease), width .28s var(--hm-ease);
}
.ps-imageslider .carousel-indicators .active {
  background: var(--hm-gold);
  width: 40px;
}
/* prev/next controls → white gold-ink circles */
.ps-imageslider .carousel-control-prev,
.ps-imageslider .carousel-control-next { width: auto; opacity: 1; }
.ps-imageslider .carousel-control-prev-icon,
.ps-imageslider .carousel-control-next-icon {
  background-color: #fff;
  border-radius: 50%;
  width: 2.6rem; height: 2.6rem;
  background-size: 1.1rem;
  box-shadow: var(--hm-shadow-ambient);
  transition: box-shadow .28s var(--hm-ease), transform .28s var(--hm-ease);
}
.ps-imageslider .carousel-control-prev:hover .carousel-control-prev-icon,
.ps-imageslider .carousel-control-next:hover .carousel-control-next-icon {
  box-shadow: var(--hm-shadow-lift);
  transform: scale(1.06);
}

/* ----------------------------------------------------------------------------
   8. Section titles — calm, confident, gold underline accent
   ---------------------------------------------------------------------------- */
.section-title,
h2.section-title {
  font-weight: 700;
  color: var(--hm-ink);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  letter-spacing: -.01em;
  position: relative;
  padding-bottom: .65rem;
  margin-bottom: 1.75rem;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 3px;
  border-radius: 999px;
  background: var(--hm-gold-grad);
}
/* centre the accent when the title itself is centred */
.text-center .section-title::after,
.section-title.text-center::after { left: 50%; transform: translateX(-50%); }

.module-products { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.module-products__buttons .btn { padding-inline: 1.5rem; }
/* alternating soft band so the homepage isn't flat white top-to-bottom */
.page-content--home .ps-newproducts { background: var(--hm-surface); }
.page-content--home .ps-newproducts .product-miniature__inner { background: #fff; }

/* ----------------------------------------------------------------------------
   9. Product card — flat at rest, lifts + zooms image + reveals actions on hover
   ---------------------------------------------------------------------------- */
.product-miniature__inner {
  background: #fff;
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .28s var(--hm-ease), box-shadow .28s var(--hm-ease),
              border-color .28s var(--hm-ease);
}
.product-miniature:hover .product-miniature__inner {
  transform: translateY(-6px);
  box-shadow: var(--hm-shadow-lift);
  border-color: transparent;
}
.product-miniature__top { position: relative; overflow: hidden; background: var(--hm-surface); }
.product-miniature__image-container,
.product-miniature__image-link { display: block; overflow: hidden; }
.product-miniature__image {
  display: block;
  width: 100%; height: auto;
  transition: transform .5s ease;
}
.product-miniature:hover .product-miniature__image { transform: scale(1.08); }

.product-miniature__bottom { padding: 1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.product-miniature__title {
  color: var(--hm-ink);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-miniature__title:hover { color: var(--hm-gold-ink); }

.product-miniature__prices { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.product-miniature__price { color: var(--hm-ink); font-weight: 700; font-size: 1.1rem; }
.product-miniature__regular-price {
  color: var(--hm-muted);
  text-decoration: line-through;
  font-weight: 500;
  font-size: .9rem;
}

/* flags: the ONE sale cue is a gold pill; "new" is a quiet hairline pill */
.product-flags { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.product-flags .badge {
  background-image: var(--hm-gold-grad);
  background-color: transparent;
  color: #fff;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 999px;
  box-shadow: var(--hm-shadow-ambient);
  width: fit-content;
}
.product-flags .badge.new {
  background-image: none;
  background-color: #fff;
  color: var(--hm-gold-ink);
  border: 1px solid var(--hm-line);
  box-shadow: none;
}

/* one clear, always-visible gold action per card (no dead space at rest);
   the qty stepper is hidden on listing cards — buyers set quantity in the cart */
.product-miniature__actions { margin-top: auto; padding-top: .65rem; }
.product-miniature__form { display: flex; align-items: center; gap: .4rem; }
.product-miniature__form .quantity-button { display: none; }
.product-miniature__add.btn.btn-primary {
  width: 100%; border-radius: 10px; padding: .62rem .75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  /* light at rest so a grid of cards isn't a wall of gold; fills gold on hover */
  background-image: none !important;
  background-color: var(--hm-surface) !important;
  color: var(--hm-gold-ink) !important;
  box-shadow: inset 0 0 0 1px var(--hm-line) !important;
}
.product-miniature:hover .product-miniature__add.btn.btn-primary,
.product-miniature__add.btn.btn-primary:hover,
.product-miniature__add.btn.btn-primary:focus-visible {
  background-image: var(--hm-gold-grad) !important;
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--hm-glow) !important;
}
.product-miniature__add-text { display: inline; }
.product-miniature__details.btn { width: 100%; border-radius: 10px; }

/* rating stars use the dedicated amber status colour, not the gold accent */
.product-list-review .star-on,
.grade-stars .star-on,
.star.on,
.comments-nb { color: var(--hm-rating); }

/* ----------------------------------------------------------------------------
   10. Custom text block + generic content sections — readable measure
   ---------------------------------------------------------------------------- */
.ps-customtext { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.ps-customtext p { color: var(--hm-muted); max-width: 70ch; }
.ps-customtext h2 { color: var(--hm-ink); font-weight: 700; }

/* ----------------------------------------------------------------------------
   11. Footer — soft surface, gold-ink column heads, gold link hover
   ---------------------------------------------------------------------------- */
.footer__main { background: var(--hm-surface); border-top: 1px solid var(--hm-line); padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.footer-block__title,
.footer-block__title--toggle,
.footer .menu__title,
.footer__main .title {
  color: var(--hm-ink) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .82rem;
}
.footer a,
.footer-block__list a,
.footer .ps-contactinfo a { color: var(--hm-muted); }
.footer a:hover,
.footer-block__list a:hover { color: var(--hm-gold-ink); }
.footer .ps-contactinfo .data,
.footer__main { color: var(--hm-muted); }
.footer__before { background: #fff; border-top: 1px solid var(--hm-line); }

/* newsletter / reassurance touches */
.blockreassurance .block-icon svg path,
.blockreassurance svg { fill: var(--hm-gold-ink); }
.ps-emailsubscription .btn { white-space: nowrap; }

/* ----------------------------------------------------------------------------
   12. Homepage hero — a full-width gold hero that replaces the demo modules
       (slider / blue banner / Lorem text block are hidden on home; reversible)
   ---------------------------------------------------------------------------- */
.page-content--home .ps-imageslider,
.page-content--home .ps-banner,
.page-content--home .ps-customtext { display: none !important; }

.hm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  /* deeper, directional gold-bronze — reads as a material, not a flat AI gradient */
  background:
    radial-gradient(125% 150% at 82% -20%, rgba(255, 255, 255, .14), transparent 55%),
    linear-gradient(107deg, #3d2a0b 0%, #5c4214 34%, #80571e 66%, #a8761f 100%);
}
.hm-hero::before {            /* single soft diagonal light sheen, like light on metal */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(104deg, transparent 48%, rgba(255, 255, 255, .075) 64%, transparent 82%);
  pointer-events: none;
}
.hm-hero__inner {
  position: relative; z-index: 1;
  padding-block: clamp(2.5rem, 1.6rem + 5vw, 5.5rem);
  display: flex; align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
.hm-hero__content { flex: 1 1 56%; min-width: 0; }
.hm-hero__media {
  flex: 0 1 42%; align-self: center; position: relative;
  animation: hm-float 7s ease-in-out infinite;          /* subtle float, no tilt */
}
/* crossfading product slides */
.hm-hero__slides {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 20px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 30px 70px rgba(20, 26, 40, .35), 0 0 0 1px rgba(255, 255, 255, .14) inset;
}
.hm-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .9s var(--hm-ease), visibility .9s var(--hm-ease); }
.hm-hero__slide.is-active { opacity: 1; visibility: visible; }
.hm-hero__slide-link { position: absolute; inset: 0; display: block; }
.hm-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the product bubble */
.hm-hero__bubble {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  max-width: calc(100% - 96px);
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  padding: .7rem .85rem .78rem;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(9px) saturate(1.15); backdrop-filter: blur(9px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 15px;
  box-shadow: 0 14px 34px rgba(20, 26, 40, .24);
  transform: translateY(10px); transition: transform .6s var(--hm-ease) .1s;
}
.hm-hero__slide.is-active .hm-hero__bubble { transform: translateY(0); }
.hm-hero__bubble-name {
  font-family: var(--hm-display); font-weight: 700; color: var(--hm-ink);
  font-size: .92rem; line-height: 1.22; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-hero__bubble-btn {
  display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
  background-image: var(--hm-gold-grad); color: #fff; font-weight: 700; font-size: .8rem; line-height: 1;
  padding: .48rem .85rem; border-radius: 999px; text-decoration: none;
  box-shadow: 0 4px 12px rgba(194, 146, 47, .38);
  transition: transform .2s var(--hm-ease), box-shadow .2s var(--hm-ease);
}
.hm-hero__bubble-btn:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 7px 18px rgba(194, 146, 47, .5); }
.hm-hero__bubble-btn svg { width: 13px; height: 13px; }
/* slide indicator dots (on a small frosted pill so they read on any image) */
.hm-hero__dots {
  position: absolute; top: 13px; right: 13px; z-index: 3;
  display: flex; gap: .4rem; padding: 6px 8px; border-radius: 999px;
  background: rgba(20, 26, 40, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hm-hero__dot { width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer; border-radius: 999px;
  background: rgba(255, 255, 255, .55); transition: width .3s var(--hm-ease), background .3s var(--hm-ease); }
.hm-hero__dot:hover { background: rgba(255, 255, 255, .85); }
.hm-hero__dot.is-active { width: 22px; background: #fff; }
/* prev/next arrows */
.hm-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(20, 26, 40, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 5px 16px rgba(20, 26, 40, .28);
  transition: background .25s var(--hm-ease), transform .25s var(--hm-ease);
}
.hm-hero__arrow:hover { background: var(--hm-gold); color: #fff; transform: translateY(-50%) scale(1.08); }
.hm-hero__arrow--prev { left: 10px; }
.hm-hero__arrow--next { right: 10px; }
.hm-hero__arrow svg { width: 18px; height: 18px; }
@keyframes hm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ---- Shop-by-category showcase (image tiles below the hero) ---- */
.hm-cats { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.hm-cats__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.hm-cats__title { font-family: var(--hm-display); font-weight: 800; color: var(--hm-ink); letter-spacing: -.02em; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin: 0; }
.hm-cats__all { font-weight: 700; color: var(--hm-gold-ink); text-decoration: none; }
.hm-cats__all:hover { color: var(--hm-gold-ink-hover); }
.hm-cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.hm-cat {
  position: relative; display: block; aspect-ratio: 5 / 4; border-radius: var(--hm-radius);
  overflow: hidden; background: var(--hm-surface);
  box-shadow: var(--hm-shadow-ambient);
  transition: transform .3s var(--hm-ease), box-shadow .3s var(--hm-ease);
}
.hm-cat:hover { transform: translateY(-5px); box-shadow: var(--hm-shadow-lift); }
.hm-cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.hm-cat:hover .hm-cat__img { transform: scale(1.07); }
.hm-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 26, 40, .82), rgba(20, 26, 40, .12) 55%, transparent 78%); }
.hm-cat__name { position: absolute; left: 1rem; right: 1rem; bottom: .85rem; z-index: 1; color: #fff; font-family: var(--hm-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.hm-cat__name::after { content: ""; display: block; width: 26px; height: 3px; margin-top: .45rem; border-radius: 999px; background: var(--hm-gold-grad); transition: width .3s var(--hm-ease); }
.hm-cat:hover .hm-cat__name::after { width: 44px; }
@media (max-width: 991.98px) { .hm-cats__grid { grid-template-columns: repeat(2, 1fr); } }
.hm-hero__eyebrow {
  margin: 0 0 1rem;
  font-weight: 700; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.hm-hero__eyebrow::before { content: none; }
.hm-hero__title {
  margin: 0 0 1.1rem;
  font-weight: 800; line-height: 1.04; letter-spacing: -.02em;
  font-size: clamp(2.2rem, 1.1rem + 4vw, 4.4rem);
  max-width: 18ch; color: #fff;
}
.hm-hero__lead {
  margin: 0 0 2rem;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.6;
  color: rgba(255, 255, 255, .92); max-width: 52ch;
}
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.hm-hero__btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: .8rem 1.7rem; font-weight: 700;
  transition: transform .28s var(--hm-ease), box-shadow .28s var(--hm-ease),
              background .28s var(--hm-ease), color .28s var(--hm-ease);
}
.hm-hero__btn--solid {
  background: #fff; color: var(--hm-gold-ink);
  box-shadow: 0 10px 30px rgba(20, 26, 40, .18);
}
.hm-hero__btn--solid:hover {
  transform: translateY(-2px); color: var(--hm-gold-ink);
  box-shadow: 0 16px 40px rgba(20, 26, 40, .26);
}
.hm-hero__btn--ghost {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.hm-hero__btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ----------------------------------------------------------------------------
   12b. Product detail page
   ---------------------------------------------------------------------------- */
.product__price {
  font-weight: 700; color: var(--hm-ink); line-height: 1.1;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
}
.product__tax-label, .product__tax-infos { color: var(--hm-muted); font-size: .85rem; }
.product__prices .regular-price, .regular-price {
  color: var(--hm-muted); text-decoration: line-through; font-weight: 500;
}
.product__prices .discount, .product-discount, .product__price--reduction,
.discount.discount-percentage, .discount-amount {
  background-image: var(--hm-gold-grad); background-color: transparent;
  color: #fff; border-radius: 999px; padding: .2rem .55rem; font-weight: 700;
}

/* gallery: rounded cover + gold ring on the active thumbnail */
.product-cover, .product__cover { border-radius: var(--hm-radius); overflow: hidden; }
.product__thumbnail {
  border-radius: 10px; overflow: hidden; border: 1px solid var(--hm-line);
  transition: border-color .28s var(--hm-ease), box-shadow .28s var(--hm-ease);
}
.product__thumbnail:hover { border-color: var(--hm-gold); }
.product__thumbnail.active,
.product__thumbnail.js-thumb-selected,
.product__thumbnail[aria-current="true"] {
  border-color: var(--hm-gold); box-shadow: 0 0 0 2px rgba(194, 146, 47, .35);
}

/* primary add-to-cart a touch larger; quantity stepper stays neutral so the
   gold add-to-cart remains the single clear primary action */
.product__add-to-cart-button.btn { padding: .8rem 1.7rem; font-size: 1.05rem; }
.quantity-button__group .btn,
.quantity-button__group button {
  background: #fff !important; background-image: none !important;
  color: var(--hm-ink) !important; border: 1px solid var(--hm-line) !important;
  box-shadow: none !important; border-radius: 8px;
}
.quantity-button__group .btn:hover,
.quantity-button__group button:hover {
  border-color: var(--hm-gold) !important; color: var(--hm-gold-ink) !important;
}
.quantity-button__group .form-control, .js-quantity-wanted {
  border: 1px solid var(--hm-line); text-align: center; font-weight: 700;
}

.product__description, .product__description-short { color: var(--hm-ink); }
.product__description { max-width: 75ch; }
.social-sharing a:hover, .product-additional-info a:hover { color: var(--hm-gold-ink); }

/* product-page reassurance → gold trust cards (clickable, gold on hover) */
.blockreassurance--product { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.25rem; }
.blockreassurance--product .reassurance {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem .95rem; border: 1px solid var(--hm-line); border-radius: var(--hm-radius);
  background: #fff; text-decoration: none;
  transition: border-color .25s var(--hm-ease), box-shadow .25s var(--hm-ease), transform .25s var(--hm-ease);
}
a.reassurance.reassurance--link { cursor: pointer; }
a.reassurance--link:hover { border-color: var(--hm-gold); box-shadow: var(--hm-shadow-ambient); transform: translateY(-2px); }
.blockreassurance--product .reassurance__image {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: var(--hm-surface);
  color: var(--hm-gold-ink);
  transition: background .25s var(--hm-ease), color .25s var(--hm-ease);
}
.blockreassurance--product .reassurance__image img,
.blockreassurance--product .reassurance__image svg { width: 22px; height: 22px; }
/* gold-tint the (inlined) SVG icons; covers fill- and stroke-based icons */
.blockreassurance--product .reassurance__image svg { color: var(--hm-gold-ink); stroke: var(--hm-gold-ink); fill: none; }
.blockreassurance--product .reassurance__image svg [fill]:not([fill="none"]),
.blockreassurance--product .reassurance__image svg path[fill]:not([fill="none"]),
.blockreassurance--product .reassurance__image svg g[fill]:not([fill="none"]) { fill: var(--hm-gold-ink) !important; }
a.reassurance--link:hover .reassurance__image { background: var(--hm-gold-grad); color: #fff; }
a.reassurance--link:hover .reassurance__image svg { color: #fff; stroke: #fff; }
a.reassurance--link:hover .reassurance__image svg [fill]:not([fill="none"]),
a.reassurance--link:hover .reassurance__image svg path[fill]:not([fill="none"]),
a.reassurance--link:hover .reassurance__image svg g[fill]:not([fill="none"]) { fill: #fff !important; }
.blockreassurance--product .reassurance__title { font-family: var(--hm-display); font-weight: 700; color: var(--hm-ink); font-size: .98rem; line-height: 1.25; }
a.reassurance--link:hover .reassurance__title { color: var(--hm-gold-ink); }
.blockreassurance--product .reassurance__desc { color: var(--hm-muted); font-size: .85rem; line-height: 1.4; }

/* ----------------------------------------------------------------------------
   12c. Category / product-listing pages (+ shared page headers)
   ---------------------------------------------------------------------------- */
.page-title-section, h1.page-title-section {
  font-weight: 800; color: var(--hm-ink); letter-spacing: -.02em;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
}
.category__header { padding-block: clamp(.75rem, .4rem + 1vw, 1.5rem); }
.category__description, .cms-description, .rte-content { color: var(--hm-muted); max-width: 75ch; }

/* tertiary buttons (e.g. the sort dropdown) → neutral hairline pill, gold ink */
.btn-outline-tertiary, .btn-tertiary {
  --bs-btn-color: var(--hm-gold-ink); --bs-btn-border-color: var(--hm-line); --bs-btn-bg: #fff;
  --bs-btn-hover-color: var(--hm-gold-ink); --bs-btn-hover-bg: var(--hm-surface); --bs-btn-hover-border-color: var(--hm-gold);
  --bs-btn-active-color: var(--hm-gold-ink); --bs-btn-active-bg: var(--hm-surface); --bs-btn-active-border-color: var(--hm-gold);
}
.products__count, .products__selection, .products__sort-label { color: var(--hm-muted); }

/* subcategory chips */
.subcategory__list { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; list-style: none; }
.subcategory__link {
  display: inline-flex; align-items: center; border: 1px solid var(--hm-line);
  border-radius: 999px; padding: .45rem 1rem; color: var(--hm-ink); font-weight: 600;
  transition: background .28s var(--hm-ease), color .28s var(--hm-ease), border-color .28s var(--hm-ease);
}
.subcategory__link:hover { background: var(--hm-surface); border-color: var(--hm-gold); color: var(--hm-gold-ink); }

/* pagination → gold current page */
.pagination .page-item.active .page-link,
.pagination__number.current, .pagination__number[aria-current="true"],
.page-list .current a {
  background-image: var(--hm-gold-grad); border-color: transparent; color: #fff;
}
.pagination .page-link, .pagination__number { color: var(--hm-gold-ink); border-radius: 8px; }
.pagination .page-link:hover { background: var(--hm-surface); color: var(--hm-gold-ink); border-color: var(--hm-line); }

/* faceted search sidebar (covers both ps_facetedsearch class conventions) */
.facet .facet-title, .facet__title, .facet__header h2, .search-filters .h6 { color: var(--hm-ink); font-weight: 700; }
.facet__label, .facet-label, .search-filters label { color: var(--hm-ink); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--hm-gold); }
.active-filters { background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: var(--hm-radius); }
.active-filters .filter-block, .active-filter {
  background: #fff; border: 1px solid var(--hm-line); border-radius: 999px; color: var(--hm-ink);
}
.active-filters a.text-muted, .active-filters .js-search-link { color: var(--hm-gold-ink); }

/* main navigation: many categories → wrap cleanly as a calm row of pills */
.ps-mainmenu__desktop > ul,
.ps-mainmenu__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem;
  list-style: none; margin: 0; padding: 0;
}

/* ----------------------------------------------------------------------------
   12d. Header refinement + motion/life (logo, sticky-collapse, entrances)
   ---------------------------------------------------------------------------- */
/* a more present logo */
#header .header-bottom__logo img.logo,
#header .logo.img-fluid { max-height: 66px; width: auto; transition: max-height .28s var(--hm-ease); }
#header.hm-shrink .header-bottom__logo img.logo,
#header.hm-shrink .logo.img-fluid { max-height: 48px; }
/* slimmer header: trim the empty space above/below the logo */
#header .header-bottom { padding-top: .35rem; padding-bottom: .35rem; }
#header .header-bottom__row { min-height: 0; }
#header .header-bottom__logo { padding-top: 0; padding-bottom: 0; }

#header .header-bottom__container { align-items: center; }

/* the stock inline category dump is replaced by the custom "Produse" nav bar.
   #header prefix beats Bootstrap's .d-xl-block !important (equal specificity tie). */
#header .ps-mainmenu__desktop,
#header .ps-mainmenu--desktop > .ps-mainmenu__desktop { display: none !important; }

/* ---- Inline "Produse" category nav (lives in the logo row, next to the logo) ---- */
.hm-nav { display: flex; align-items: center; gap: .1rem; }
/* center the Produse/Oferte/Contact nav between logo and search on desktop:
   the stock desktop-menu column (.ps-mainmenu--desktop, col-xl) is empty here
   (replaced by .hm-nav) yet grows and eats the space — neutralise it + the
   search's auto-margin so .hm-nav's mx-auto can center it. */
@media (min-width: 1200px) {
  #header .ps-mainmenu--desktop { display: none !important; }
  #header .header-bottom__row > .order-2.ms-auto { margin-left: 0 !important; }
}

.hm-nav__link,
.hm-nav__trigger {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--hm-ink); text-decoration: none;
  padding: .6rem 1.05rem; border-radius: 999px;
  transition: background .28s var(--hm-ease), color .28s var(--hm-ease);
}
.hm-nav__trigger { font-weight: 700; }
.hm-nav__link:hover,
.hm-nav__produse:hover .hm-nav__trigger,
.hm-nav__trigger:focus-visible { background: var(--hm-surface); color: var(--hm-gold-ink); }

.hm-nav__produse { position: relative; }
.hm-nav__chev { transition: transform .28s var(--hm-ease); }
.hm-nav__produse:hover .hm-nav__chev { transform: rotate(180deg); }

.hm-nav__panel {
  position: absolute; top: 100%; left: 0; z-index: 1050;
  margin-top: 6px; min-width: 620px; padding: 1.15rem 1.3rem;
  background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .26s var(--hm-ease), transform .26s var(--hm-ease), visibility .26s;
}
.hm-nav__produse:hover .hm-nav__panel,
.hm-nav__produse:focus-within .hm-nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.hm-nav__panel::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.hm-nav__panel-title {
  margin: 0 0 .7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--hm-line);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--hm-muted);
}
.hm-nav__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .05rem .4rem; }
.hm-nav__cat {
  display: block; padding: .5rem .7rem; border-radius: 8px;
  color: var(--hm-ink); font-weight: 500; font-size: .94rem; text-decoration: none;
  transition: background .2s var(--hm-ease), color .2s var(--hm-ease), padding-left .2s var(--hm-ease);
}
.hm-nav__cat:hover { background: var(--hm-surface); color: var(--hm-gold-ink); padding-left: .95rem; }

/* hero: staggered entrance on load (skipped for reduced-motion below) */
@keyframes hm-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hm-rise  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hm-hero__eyebrow { animation: hm-enter .6s cubic-bezier(.2,.7,.2,1) both; }
.hm-hero__title   { animation: hm-enter .6s cubic-bezier(.2,.7,.2,1) .08s both; }
.hm-hero__lead    { animation: hm-enter .6s cubic-bezier(.2,.7,.2,1) .16s both; }
.hm-hero__actions { animation: hm-enter .6s cubic-bezier(.2,.7,.2,1) .24s both; }

/* scroll-reveal: animation-based + JS failsafe (hm.js reveals all after 2.5s),
   so a section can never stay invisible even if the observer misfires */
.hm-reveal { opacity: 0; }
.hm-reveal.hm-in { animation: hm-rise .7s cubic-bezier(.2,.7,.2,1) forwards; }

/* the gold underline draws itself in as each home section reveals (alive) */
@media (prefers-reduced-motion: no-preference) {
  .page-content--home .module-products .section-title::after { width: 0; transition: width .7s var(--hm-ease) .15s; }
  .page-content--home .module-products.hm-in .section-title::after { width: 48px; }
}

/* ----------------------------------------------------------------------------
   13. Responsive (lg = 991.98px) + reduced motion
   ---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ps-imageslider .ps-imageslider__figcaption.carousel-caption { left: 5%; max-width: 88%; }
  .ps-searchbar__form { max-width: 100%; }
  .hm-hero__inner { flex-direction: column; align-items: flex-start; }
  .hm-hero__media { display: none; }   /* text-focused hero on small screens */
  .hm-hero__btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .product-miniature__actions { opacity: 1; transform: none; }
  .hm-reveal, .hm-reveal.hm-in { opacity: 1 !important; animation: none !important; }
  .hm-hero__eyebrow, .hm-hero__title, .hm-hero__lead, .hm-hero__actions { animation: none !important; opacity: 1 !important; }
}

/* ----------------------------------------------------------------------------
   14. Legal / CMS pages (.hm-legal) — readable long-form typography
   ---------------------------------------------------------------------------- */
.hm-legal { max-width: 860px; margin: 0 auto; color: var(--hm-ink); font-size: 1.02rem; line-height: 1.75; }
.hm-legal__meta { display: inline-block; margin: 0 0 1.6rem; padding: .3rem .85rem; border-radius: 999px;
  background: var(--hm-surface); color: var(--hm-muted); font-size: .82rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--hm-line); }
.hm-legal h2 { font-family: var(--hm-display); font-weight: 800; letter-spacing: -.015em;
  color: var(--hm-ink); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  margin: 2.4rem 0 .9rem; padding-bottom: .5rem; border-bottom: 2px solid var(--hm-line); }
.hm-legal h2:first-of-type { margin-top: .5rem; }
.hm-legal h3 { font-family: var(--hm-display); font-weight: 700; color: var(--hm-gold-ink);
  font-size: 1.12rem; margin: 1.7rem 0 .55rem; }
.hm-legal h4 { font-weight: 700; color: var(--hm-ink); font-size: 1rem; margin: 1.15rem 0 .4rem; }
.hm-legal p { margin: 0 0 .9rem; color: var(--hm-muted); }
.hm-legal__entity { margin: .4rem 0 .8rem; }
.hm-legal__entity strong { font-family: var(--hm-display); color: var(--hm-gold-ink); font-size: 1.08rem; letter-spacing: -.01em; }
.hm-legal ul { margin: 0 0 1.1rem; padding: 0; list-style: none; }
.hm-legal li { position: relative; padding: .12rem 0 .12rem 1.4rem; color: var(--hm-muted); }
.hm-legal li::before { content: ""; position: absolute; left: .25rem; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--hm-gold-grad); }
.hm-legal a { color: var(--hm-gold-ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--hm-gold-ink) 35%, transparent); }
.hm-legal a:hover { color: var(--hm-gold-ink-hover); border-bottom-color: var(--hm-gold-ink); }

/* ---- "Despre noi" / About page (.hm-about) — lively, on-brand ---- */
.hm-about { max-width: 920px; margin: 0 auto; }
.hm-about__hero { text-align: center; padding: .25rem 0 2.4rem; }
.hm-about__eyebrow { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hm-gold-ink); background: var(--hm-surface);
  padding: .32rem .85rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hm-line); }
.hm-about__title { font-family: var(--hm-display); font-weight: 800; letter-spacing: -.02em; color: var(--hm-ink);
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); margin: 1rem 0 .85rem; }
.hm-about__lead { font-size: 1.1rem; line-height: 1.7; color: var(--hm-muted); max-width: 680px; margin: 0 auto; }
.hm-about__lead strong { color: var(--hm-ink); }

.hm-about__values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 0 0 2.4rem; }
.hm-about__value { background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius);
  padding: 1.7rem 1.3rem; text-align: center; box-shadow: var(--hm-shadow-ambient);
  transition: transform .3s var(--hm-ease), box-shadow .3s var(--hm-ease); }
.hm-about__value:hover { transform: translateY(-5px); box-shadow: var(--hm-shadow-lift); }
.hm-about__icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px;
  border-radius: 50%; background: var(--hm-gold-grad); color: #fff; margin-bottom: .95rem;
  box-shadow: 0 8px 22px rgba(194, 146, 47, .32); }
.hm-about__icon svg { width: 28px; height: 28px; }
.hm-about__value h3 { font-family: var(--hm-display); font-weight: 700; color: var(--hm-ink); font-size: 1.2rem; margin: 0 0 .5rem; }
.hm-about__value p { color: var(--hm-muted); font-size: .95rem; line-height: 1.6; margin: 0; }

.hm-about__mission { text-align: center; color: #fff; border-radius: 18px; padding: 2.3rem 1.6rem; margin: 0 0 2.4rem;
  background: radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.12), transparent 55%),
              linear-gradient(107deg, #3d2a0b 0%, #5c4214 34%, #80571e 66%, #a8761f 100%);
  box-shadow: 0 24px 60px rgba(20, 26, 40, .28); }
.hm-about__mission h3 { font-family: var(--hm-display); font-weight: 800; font-size: 1.45rem; margin: 0 0 .6rem; color: #fff; }
.hm-about__mission p { font-size: 1.12rem; line-height: 1.7; max-width: 640px; margin: 0 auto; color: rgba(255, 255, 255, .92); }

.hm-about__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 2.6rem; margin: 0 0 2.4rem; }
.hm-about__trust-item { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--hm-ink); }
.hm-about__trust-item svg { width: 24px; height: 24px; color: var(--hm-gold-ink); flex: 0 0 auto; }

.hm-about__cta { text-align: center; padding-top: .25rem; }
.hm-about__thanks { font-family: var(--hm-display); font-weight: 700; font-size: 1.25rem; color: var(--hm-gold-ink); margin: 0 0 1.25rem; }
.hm-about__btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.hm-about__btn { display: inline-flex; align-items: center; padding: .72rem 1.7rem; border-radius: 999px;
  font-weight: 700; text-decoration: none; transition: transform .2s var(--hm-ease), box-shadow .2s var(--hm-ease); }
.hm-about__btn--solid { background-image: var(--hm-gold-grad); color: #fff; box-shadow: 0 6px 16px rgba(194, 146, 47, .35); }
.hm-about__btn--solid:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 9px 22px rgba(194, 146, 47, .45); }
.hm-about__btn--ghost { color: var(--hm-gold-ink); box-shadow: inset 0 0 0 1.5px var(--hm-line); }
.hm-about__btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--hm-gold); color: var(--hm-gold-ink-hover); }
@media (max-width: 767px) { .hm-about__values { grid-template-columns: 1fr; } }

/* footer company-identity block (legal presence) — one consistent palette:
   dark titles/name, muted-grey body + links, gold only on hover */
.hm-fcompany { font-size: .82rem; line-height: 1.65; color: var(--hm-muted); }
.hm-fcompany strong { color: var(--hm-ink); font-weight: 700; }
.copyright .hm-fcompany a,
.copyright .hm-anpc,
.copyright .hm-credit a { color: var(--hm-muted); text-decoration: none; border-bottom: 0; font-weight: 600; }
.copyright .hm-fcompany a:hover,
.copyright .hm-anpc:hover,
.copyright .hm-credit a:hover { color: var(--hm-gold-ink); }
.hm-anpc { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .8rem; }
/* the theme defaults .copyright to a near-white color (rgb 222) meant for a dark
   footer — override so nothing in the band can render near-invisible */
.footer .copyright, .copyright { color: var(--hm-muted); }
.copyright .hm-copyline { color: var(--hm-ink); font-size: .92rem; }
.hm-credit { margin-top: .5rem; font-size: .8rem; color: var(--hm-muted); }

/* footer separators — GOLD (exploratory), give the dense footer clear structure */
@media (min-width: 992px) {
  .footer__main-top { align-items: stretch; }              /* equal-height columns */
  .footer__main-top > .footer-block + .footer-block {
    border-left: 1px solid rgba(194, 146, 47, .5);         /* gold dividers between the 5 columns */
  }
}
/* line between the newsletter band and the link columns */
.footer__main { border-top: 1px solid rgba(194, 146, 47, .5); padding-bottom: 1.5rem; }
/* line separating the link columns from the legal / company band */
.footer .copyright { border-top: 1px solid rgba(194, 146, 47, .5); margin-top: 1.75rem; padding-top: 1.4rem; }
/* small centered gold separator above the ANPC line */
.hm-sep-mini { display: block; width: 40px; height: 1px; background: rgba(194, 146, 47, .75); margin: 1rem auto .35rem; }

/* ---- Mobile offcanvas menu: header elements on top + restore scrolling ---- */
/* the categories container becomes the flex-grow, scrollable region
   (was flex:0 1 auto + overflow:visible, so long category lists were clipped) */
#mobileMenu .ps-mainmenu__mobile { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
#mobileMenu .ps-mainmenu__additionnals { flex: 0 0 auto; }
.hm-mmenu-head { padding: .35rem 1.25rem 0; }
.hm-mmenu-search { display: flex; align-items: center; margin: 0 0 .85rem; border: 1px solid var(--hm-line);
  border-radius: 999px; background: var(--hm-surface); overflow: hidden; }
.hm-mmenu-search input[type="text"] { flex: 1; min-width: 0; border: 0; background: transparent;
  padding: .62rem .95rem; font-size: .95rem; color: var(--hm-ink); }
.hm-mmenu-search input[type="text"]:focus { outline: 0; }
.hm-mmenu-search button { border: 0; background: transparent; color: var(--hm-gold-ink);
  padding: 0 .85rem; display: flex; align-items: center; cursor: pointer; }
.hm-mmenu-link { display: flex; align-items: center; gap: .7rem; padding: .62rem .2rem;
  color: var(--hm-ink); font-weight: 600; font-size: 1rem; text-decoration: none; }
.hm-mmenu-link:hover, .hm-mmenu-link:focus { color: var(--hm-gold-ink); }
.hm-mmenu-link .material-icons { font-size: 21px; color: var(--hm-gold-ink); flex: 0 0 auto; }
.hm-mmenu-divider { height: 1px; background: var(--hm-line); margin: .4rem 1.25rem 1rem; }

/* footer: 5 blocks were col-lg-3 (25%) → the 5th wrapped to a 2nd row.
   Make all five share one row evenly on desktop. */
@media (min-width: 992px) {
  .footer__main-top.row { flex-wrap: nowrap; }
  .footer__main-top > .footer-block.col-lg-3 { flex: 0 0 20%; max-width: 20%; }
}

/* === Mobile: collapsible left-column category tree (ps_categorytree) ======= */
.left-block__title-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.hm-cattree-toggle {
  border:0; background:transparent; color:var(--hm-gold-ink); cursor:pointer;
  display:inline-flex; align-items:center; gap:.25rem; padding:.3rem .55rem; line-height:1;
  font-family:var(--hm-display); font-weight:700; font-size:.9rem; border-radius:999px;
}
.hm-cattree-toggle:hover { background:rgba(194,146,47,.10); }
.hm-cattree-toggle .material-icons { font-size:1.5rem; transition:transform .25s var(--hm-ease); }
.hm-cattree-toggle[aria-expanded="true"] .material-icons { transform:rotate(180deg); }

@media (min-width:768px) {
  /* Desktop: always show the tree; the toggle is hidden and the list stays open */
  .hm-cattree-toggle { display:none !important; }
  .hm-cattree-collapse { display:block !important; height:auto !important; visibility:visible !important; overflow:visible !important; }
}
@media (max-width:767.98px) {
  .ps-categorytree.left-block { border:1px solid var(--hm-line); border-radius:var(--hm-radius); padding:.35rem .35rem .35rem .85rem; margin-bottom:1rem; }
  .ps-categorytree .left-block__title { margin:0; }
}

/* === Top-bar free-shipping promo (centered, lg+) ========================== */
.hm-topbar-promo { justify-content:center; align-items:center; }
.hm-topbar-promo__text {
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--hm-display); font-weight:600; font-size:.82rem; letter-spacing:.01em;
  color:var(--hm-gold-ink); white-space:nowrap; line-height:1;
}
.hm-topbar-promo__text .material-icons { font-size:1.1rem; }

/* === Mobile: compress the subcategory button list into one swipeable row === */
@media (max-width:767.98px) {
  .subcategory__list {
    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:.5rem;
    -webkit-overflow-scrolling:touch; padding-bottom:.4rem; scrollbar-width:thin;
  }
  .subcategory__list > *, .subcategory__list .subcategory__link { flex:0 0 auto; white-space:nowrap; }
}

/* === Free-shipping promo bar for mobile/tablet (<992px) =================== */
.hm-promobar {
  display:flex; justify-content:center; align-items:center; gap:.4rem;
  padding:.5rem .85rem; border-bottom:1px solid var(--hm-line);
}
.hm-promobar__text {
  display:inline-flex; align-items:center; gap:.4rem; text-align:center; line-height:1.25;
  font-family:var(--hm-display); font-weight:600; font-size:.78rem; letter-spacing:.01em;
  color:var(--hm-gold-ink);
}
.hm-promobar__text .material-icons { font-size:1rem; flex:0 0 auto; }
@media (min-width:992px) { .hm-promobar { display:none !important; } }

/* === Lenis smooth scroll (recommended base styles) ======================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* === Footer: section-title links match the plain title color (not grey) ==== */
/* "Contul tău" title is an <a>, so it was inheriting the grey footer-link color
   while sibling titles (plain text) were dark — made the section look greyer. */
.footer .footer-block__title a,
.footer .footer-block__title--toggle a { color: var(--hm-ink); text-decoration: none; }
.footer .footer-block__title a:hover,
.footer .footer-block__title--toggle a:hover { color: var(--hm-gold-ink); }

/* === Product variant radios: round, gold accent, clean inline layout ======= */
.product-variant__radios { display:flex; flex-wrap:wrap; gap:.45rem 1.3rem; margin-top:.15rem; }
.product-variant__radio.form-check { display:inline-flex; align-items:center; gap:.5rem; margin:0; padding:0; min-height:0; }
.product-variant__radio .form-check-input { float:none; margin:0; width:1.15rem; height:1.15rem; accent-color:var(--hm-gold); cursor:pointer; }
.product-variant__radio .form-check-input:focus { box-shadow:0 0 0 .2rem rgba(194,146,47,.28); border-color:var(--hm-gold); }
.product-variant__radio label { margin:0; cursor:pointer; }
.product-variant__radio .form-check-label { font-weight:600; color:var(--hm-ink); }

/* Quick view: keep the full description readable + scrollable within the modal */
.product__description--quickview { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--hm-line); color:var(--hm-ink); font-size:.92rem; line-height:1.55; }
.product__description--quickview p { margin-bottom:.6rem; }

/* === Reassurance icons: unfill the inline SVGs on ALL variants (cart, etc.) === */
/* The product-page rules only covered .blockreassurance--product; the site-wide
   ".blockreassurance svg { fill }" still filled them on the cart. Outline everywhere. */
.blockreassurance .reassurance__image svg { fill: none; stroke: var(--hm-gold-ink); }
.blockreassurance .reassurance__image svg path,
.blockreassurance .reassurance__image svg g { fill: none; }
a.reassurance--link:hover .reassurance__image svg { stroke: #fff; }

/* === Footer: official ANPC SAL + SOL pictogram badges ===================== */
.hm-anpc-badges { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.75rem; margin:.25rem 0 .1rem; }
.hm-anpc-badges a { display:inline-flex; line-height:0; border-radius:8px; transition:transform .2s var(--hm-ease), box-shadow .2s var(--hm-ease); }
.hm-anpc-badges a:hover { transform:translateY(-1px); box-shadow:var(--hm-shadow-ambient); }
.hm-anpc-badges img { width:250px; height:auto; max-width:100%; display:block; border-radius:8px; }
@media (max-width:480px){ .hm-anpc-badges img { width:220px; } }