/* =======================================================================
   HYDRELLA — PREMIUM LUXURY THEME
   "The Balance of Nature and Science"
   Soft luxury minimalism + scientific elegance.
   Scoped to override existing stylesheet.css cascade — no HTML/twig
   structure, copy, links, or functionality is altered by this file.
   ======================================================================= */

:root {
  /* ---- Core palette ---- */
  --hy-cream:        #FBF7EF;   /* warm off-white background */
  --hy-cream-deep:    #F4EEE1;   /* secondary panel background */
  --hy-white:         #FFFFFF;
  --hy-forest:        #223B2F;   /* deep forest green — primary */
  --hy-forest-dark:    #16281E;
  --hy-sage:          #7C9A82;   /* soft sage accent */
  --hy-sage-light:     #E4EBE0;   /* pale sage tint for backgrounds */
  --hy-gold:          #B68A4E;   /* warm gold / champagne */
  --hy-gold-light:     #E9D8B8;
  --hy-gold-soft:      #F4E9D3;
  --hy-blush:          #EFDCD3;   /* soft blush/peach secondary accent */
  --hy-blush-deep:      #E3B7A6;
  --hy-ink:            #26302A;   /* body copy — high contrast on cream */
  --hy-ink-soft:        #5B6B60;
  --hy-line:           #E4DCC9;   /* hairline borders */
  --hy-line-soft:       rgba(34, 59, 47, 0.10);

  /* ---- Typography ---- */
  --hy-font-display: 'Playfair Display', 'Georgia', serif;
  --hy-font-body:    'Inter', 'ProximaNovaRegular', Arial, Helvetica, sans-serif;

  /* ---- Elevation / shape ---- */
  --hy-radius-sm:  10px;
  --hy-radius-md:  18px;
  --hy-radius-lg:  28px;
  --hy-shadow-soft:  0 6px 24px rgba(34, 59, 47, 0.08);
  --hy-shadow-mid:   0 14px 40px rgba(34, 59, 47, 0.12);
  --hy-shadow-lift:  0 24px 60px rgba(34, 59, 47, 0.16);
  --hy-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =======================================================================
   BASE
   ======================================================================= */

/* Site-wide design system. Originally built homepage-only (#common-home
   scoping) across earlier rounds; the rules in this file that are safe as
   generic Bootstrap-class overrides (headings, buttons, cards, accordion,
   forms, tables, pagination, breadcrumbs) are now unscoped so every page
   — product, cart, checkout, account, blog, information — gets the same
   design language. Rules that depend on homepage-only markup (hero
   carousel, Shop by Concern, the Reviews carousel, the FAQ layout) stay
   under #common-home / #common-home #section-review / #common-home
   #home-faq, same as before — those DOM structures genuinely don't exist
   elsewhere. */

body {
  background: var(--hy-cream) !important;
  color: var(--hy-ink) !important;
  font-family: var(--hy-font-body) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
#common-home .home-faq-title,
.offer-title,
.shop-concern-heading {
  font-family: var(--hy-font-display) !important;
  color: var(--hy-forest) !important;
  letter-spacing: 0.01em;
  font-weight: 600 !important;
}

/* Safety net: some pre-existing pages put a heading on a dark hero band
   using Bootstrap's .text-white/.text-light utility (or an inline style)
   rather than a page-specific class we've individually found and
   overridden above — without this, the blanket h1/h2/h3 color:forest
   !important rule would make that heading nearly invisible against its
   own dark background. Keeps those headings light automatically,
   present and future, without having to enumerate every dark-hero
   class in the legacy stylesheet by name. */
h1.text-white, h2.text-white, h3.text-white,
h1.text-light, h2.text-light, h3.text-light,
.text-white h1, .text-white h2, .text-white h3,
[style*="color: white"] h1, [style*="color:#fff"] h1 {
  color: var(--hy-cream) !important;
}

a { color: var(--hy-forest); }
::selection { background: var(--hy-gold-light); color: var(--hy-forest-dark); }

/* Subtle botanical/molecular watermark behind the whole home content — very light, never busy */
#common-home {
  position: relative;
  background:
    radial-gradient(circle at 8% 4%, rgba(124, 154, 130, 0.07) 0%, transparent 38%),
    radial-gradient(circle at 96% 18%, rgba(182, 138, 78, 0.07) 0%, transparent 34%),
    var(--hy-cream);
}

/* =======================================================================
   ANNOUNCEMENT BAR
   ======================================================================= */

.hydrella-announcement-bar {
  position: relative;
  background: linear-gradient(90deg, var(--hy-forest-dark) 0%, var(--hy-forest) 50%, var(--hy-forest-dark) 100%);
  color: var(--hy-gold-soft);
  overflow: hidden;
}

.hydrella-announcement-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--hy-gold) 50%, transparent 100%);
  opacity: 0.55;
}

.hydrella-announcement-bar__track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7em;
  padding: 9px 16px;
  font-family: var(--hy-font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
}

.hydrella-announcement-bar__item { white-space: nowrap; }
.hydrella-announcement-bar__divider {
  color: var(--hy-gold);
  opacity: 0.55;
  font-size: 0.7rem;
}

@media (max-width: 640px) {
  .hydrella-announcement-bar__divider:nth-of-type(2) { display: none; }
  .hydrella-announcement-bar__item:nth-of-type(3) { display: none; }
}

/* =======================================================================
   HEADER
   ======================================================================= */

.custom-header {
  /* Opaque, not translucent+blur: backdrop-filter on a sticky ancestor
     creates a new containing block for position:fixed descendants (CSS
     spec behavior), which trapped the header's own floating "Best Seller"
     / "Back to Home" buttons (rendered inside <header> via {{ menu }})
     against the header's box instead of the viewport — they rendered
     pinned near the top-right instead of the bottom. Do not reintroduce
     backdrop-filter here without moving those floats outside <header>. */
  background: var(--hy-cream) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--hy-line);
  transition: box-shadow 0.35s var(--hy-ease), background 0.35s var(--hy-ease);
}

.custom-header.hy-scrolled {
  box-shadow: 0 8px 28px rgba(34, 59, 47, 0.10) !important;
}

.custom-header .header-icon {
  color: var(--hy-forest) !important;
  font-size: 1.05rem;
  transition: color 0.25s var(--hy-ease), transform 0.25s var(--hy-ease);
}

.custom-header .icon-list a:hover .header-icon,
.custom-header .icon-list a:focus-visible .header-icon {
  color: var(--hy-gold) !important;
  transform: translateY(-1px);
}

.custom-header .icon-list .badge.bg-danger {
  background: var(--hy-gold) !important;
  color: var(--hy-forest-dark) !important;
  font-weight: 700;
}

.flash-offers-inline,
.flash-offers-mobile {
  font-family: var(--hy-font-body);
}

/* Fancy pill treatment for the "Flat X% OFF" offer strip near the logo —
   was plain unstyled text; now a soft gold-bordered card with a gift
   icon, matching the badge/pill language used across the rest of the
   redesign. Underlying crossfade mechanics (.flash-offers-single /
   .flash-offer-link.active, opacity-toggled by JS) are untouched. */
.flash-offers-inline {
  background: linear-gradient(135deg, var(--hy-gold-soft) 0%, var(--hy-cream) 100%);
  border: 1px solid var(--hy-gold-light);
  border-radius: 999px;
  padding: 6px 20px 6px 16px !important;
  box-shadow: 0 4px 14px rgba(182, 138, 78, 0.16);
  min-width: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
  max-width: 300px !important;
  height: auto !important;
}

.flash-offers-inline .flash-offers-track {
  width: auto !important;
  min-width: 253px;
}

.flash-offers-inline::before {
  content: '\f06b'; /* gift icon */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--hy-gold);
  font-size: 1rem;
  margin-right: 10px;
  align-self: center;
  flex-shrink: 0;
}

.flash-offer-link {
  color: var(--hy-forest) !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em;
}

/* .flash-offer-link inside here is absolutely positioned (inset:0,
   centered text) by a legacy media-query rule in hydrella-inline-shared.css
   — the icon below sits in normal flow at the left edge, so without
   reserving real space for it the absolutely-centered text overlaps the
   icon. Fixed via a fixed-width icon rail (padding-left on the pill +
   matching left offset on the link) rather than fighting the absolute
   positioning. */
.flash-offers-mobile {
  background: linear-gradient(135deg, var(--hy-gold-soft) 0%, var(--hy-cream) 100%) !important;
  border: 1px solid var(--hy-gold-light);
  border-radius: 999px;
  padding: 8px 16px 8px 34px !important;
  position: relative;
  box-shadow: 0 4px 12px rgba(182, 138, 78, 0.14) !important;
}

.flash-offers-mobile::before {
  content: '\f06b';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--hy-gold);
  font-size: 0.8rem;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.flash-offers-mobile .flash-offer-link {
  left: 34px !important;
  right: 8px !important;
  color: var(--hy-forest) !important;
  font-size: 0.72rem !important;
  text-shadow: none !important;
}

/* Desktop menu */
.main-desktop-menu {
  background: var(--hy-forest) !important;
  border-top: 1px solid rgba(182, 138, 78, 0.25);
}

.main-desktop-menu a,
.main-desktop-menu .nav-link {
  color: var(--hy-cream) !important;
  font-family: var(--hy-font-body);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.main-desktop-menu a:hover,
.main-desktop-menu .nav-link:hover {
  color: var(--hy-gold-light) !important;
}

.main-desktop-menu .dropdown-menu {
  background: var(--hy-white);
  border: 1px solid var(--hy-line);
  border-radius: var(--hy-radius-sm);
  box-shadow: var(--hy-shadow-mid);
}

.main-desktop-menu .dropdown-menu a {
  color: var(--hy-ink) !important;
  text-transform: none;
}

.main-desktop-menu .dropdown-menu a:hover {
  color: var(--hy-forest) !important;
  background: var(--hy-sage-light);
}

#mobile-menu-panel {
  background: var(--hy-cream) !important;
}

#mobile-navbar-menu a {
  font-family: var(--hy-font-body);
  color: var(--hy-forest) !important;
}

.desktop-search-panel {
  background: var(--hy-white);
  border: 1px solid var(--hy-line);
  box-shadow: var(--hy-shadow-mid);
  border-radius: var(--hy-radius-sm);
}

.header-search-input,
.desktop-search-panel input {
  font-family: var(--hy-font-body);
  border-radius: var(--hy-radius-sm) !important;
  border: 1px solid var(--hy-line) !important;
}

.header-search-input:focus,
.desktop-search-panel input:focus {
  border-color: var(--hy-sage) !important;
  box-shadow: 0 0 0 3px rgba(124, 154, 130, 0.18) !important;
}

.header-search-btn {
  background: var(--hy-forest) !important;
  color: var(--hy-cream) !important;
}

/* =======================================================================
   BUTTONS (global override, softened to the palette)
   ======================================================================= */

/* Primary CTA — dark green pill, site-wide (Add to Cart, Login, Submit,
   Continue, Confirm Order, etc. all use Bootstrap's .btn-primary). */
.btn-primary,
#common-home #section-review .review-write-btn-modern,
.home-faq-contact-btn,
#btn-submit-question,
.home-modal-action-btn.btn-primary {
  background: var(--hy-forest) !important;
  border-color: var(--hy-forest) !important;
  color: var(--hy-cream) !important;
  font-family: var(--hy-font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px !important;
  padding-left: 1.4em;
  padding-right: 1.4em;
  transition: background 0.25s var(--hy-ease), transform 0.2s var(--hy-ease), box-shadow 0.25s var(--hy-ease);
  box-shadow: 0 6px 18px rgba(34, 59, 47, 0.18);
}

.btn-primary:hover,
#common-home #section-review .review-write-btn-modern:hover,
.home-faq-contact-btn:hover,
#btn-submit-question:hover {
  background: var(--hy-forest-dark) !important;
  border-color: var(--hy-forest-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--hy-shadow-mid);
}

.btn-primary:active,
#common-home #section-review .review-write-btn-modern:active,
.home-faq-contact-btn:active,
#common-home #section-review .review-ask-btn:active,
#common-home #section-review .review-ask-btn-modern:active,
#btn-submit-question:active,
#common-home .btn-danger:active,
.featured-buy-now-btn:active,
.offer-btn-buy:active {
  transform: translateY(0) scale(0.98);
}

/* "Buy Now" / upsell treatment for .btn-danger stays homepage-only —
   the same Bootstrap class is reused elsewhere (cart, order actions) for
   genuinely destructive actions, where this brand pink would misread as
   a positive action. See the "destructive actions" rule further down for
   those. */
#common-home .btn-danger,
.featured-buy-now-btn,
.offer-btn-buy {
  background: #d72654 !important;
  border-color: #d72654 !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(215, 38, 84, 0.28);
  transition: background 0.25s var(--hy-ease), transform 0.2s var(--hy-ease);
}

#common-home .btn-danger:hover,
.featured-buy-now-btn:hover,
.offer-btn-buy:hover {
  background: #b81f45 !important;
  border-color: #b81f45 !important;
  transform: translateY(-2px);
}

/* Category grid card "Buy Now" (.buy-now-btn — plain Bootstrap red in
   stylesheet.css) brought in line with every other Buy Now CTA. */
.buy-now-btn {
  background-color: #d72654 !important;
  border-color: #d72654 !important;
  color: #ffffff !important;
}

.buy-now-btn:hover {
  background-color: #b81f45 !important;
  border-color: #b81f45 !important;
}

/* Destructive actions everywhere else (cart "Remove", order "Cancel",
   account "Delete address", etc.) — refined soft rose, not Bootstrap red,
   but still unmistakably a warning/removal action, never gold.
   :not(.buy-now-btn) excludes the category-card Buy Now button, which
   also carries Bootstrap's .btn-danger class but is not a destructive
   action — without the exclusion this rule's higher specificity
   (body:not(...) .btn-danger) overrides the plain .buy-now-btn rule
   above and repaints it this blush pink instead of the brand pink. */
body:not(:has(#common-home)) .btn-danger:not(.buy-now-btn),
#column-left .btn-danger:not(.buy-now-btn),
#column-right .btn-danger:not(.buy-now-btn),
.table .btn-danger:not(.buy-now-btn) {
  background: var(--hy-blush-deep) !important;
  border-color: var(--hy-blush-deep) !important;
  color: var(--hy-white) !important;
  font-weight: 600;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(227, 183, 166, 0.35);
  transition: background 0.25s var(--hy-ease), transform 0.2s var(--hy-ease);
}

body:not(:has(#common-home)) .btn-danger:hover:not(.buy-now-btn),
#column-left .btn-danger:hover:not(.buy-now-btn),
#column-right .btn-danger:hover:not(.buy-now-btn),
.table .btn-danger:hover:not(.buy-now-btn) {
  background: #c78e78 !important;
  border-color: #c78e78 !important;
  transform: translateY(-1px);
}

.btn-outline-secondary,
.featured-icon-action-btn {
  border-color: var(--hy-line) !important;
  color: var(--hy-forest) !important;
  border-radius: 999px !important;
  background: var(--hy-white) !important;
}

.btn-outline-secondary:hover,
.featured-icon-action-btn:hover {
  background: var(--hy-sage-light) !important;
  border-color: var(--hy-sage) !important;
  color: var(--hy-forest) !important;
}

.btn-secondary {
  background: var(--hy-white) !important;
  color: var(--hy-ink-soft) !important;
  border: 1px solid var(--hy-line) !important;
  border-radius: 999px !important;
  font-weight: 600;
  transition: background 0.25s var(--hy-ease), color 0.25s var(--hy-ease);
}

.btn-secondary:hover {
  background: var(--hy-sage-light) !important;
  color: var(--hy-forest) !important;
}

/* Product page's main CTAs (.btn-add-cart / .btn-buy-now) are custom
   classes, not Bootstrap's .btn-primary/.btn-danger, styled plain
   black/red elsewhere — bring them into the same forest/gold pairing as
   every other primary/upsell action on the site. */
.btn-add-cart {
  background: var(--hy-forest) !important;
  border-color: var(--hy-forest) !important;
  color: var(--hy-cream) !important;
  font-family: var(--hy-font-body);
  letter-spacing: 0.04em;
  border-radius: 999px !important;
  transition: background 0.25s var(--hy-ease), transform 0.2s var(--hy-ease), box-shadow 0.25s var(--hy-ease);
  box-shadow: 0 6px 18px rgba(34, 59, 47, 0.18);
}

.btn-add-cart:hover {
  background: var(--hy-forest-dark) !important;
  border-color: var(--hy-forest-dark) !important;
  opacity: 1 !important;
  transform: translateY(-2px);
}

.btn-buy-now {
  background: #d72654 !important;
  border-color: #d72654 !important;
  color: #ffffff !important;
  font-family: var(--hy-font-body);
  letter-spacing: 0.04em;
  border-radius: 999px !important;
  transition: background 0.25s var(--hy-ease), transform 0.2s var(--hy-ease), box-shadow 0.25s var(--hy-ease);
  box-shadow: 0 6px 18px rgba(215, 38, 84, 0.28);
}

.btn-buy-now:hover {
  background: #b81f45 !important;
  border-color: #b81f45 !important;
  opacity: 1 !important;
  transform: translateY(-2px);
}

/* Coupon apply/remove buttons (product page, cart, checkout) */
.btn-outline-dark {
  background: var(--hy-forest) !important;
  border-color: var(--hy-forest) !important;
  color: var(--hy-cream) !important;
  border-radius: 999px !important;
  font-weight: 600;
  transition: background 0.25s var(--hy-ease);
}

.btn-outline-dark:hover {
  background: var(--hy-forest-dark) !important;
  border-color: var(--hy-forest-dark) !important;
  color: var(--hy-cream) !important;
}

.btn-outline-danger {
  background: var(--hy-white) !important;
  border-color: var(--hy-blush-deep) !important;
  color: var(--hy-blush-deep) !important;
  border-radius: 999px !important;
  font-weight: 600;
  transition: background 0.25s var(--hy-ease), color 0.25s var(--hy-ease);
}

.btn-outline-danger:hover {
  background: var(--hy-blush-deep) !important;
  color: var(--hy-white) !important;
}

.offer-btn-cart {
  background: var(--hy-white) !important;
  color: var(--hy-forest) !important;
  border: 1.5px solid var(--hy-forest) !important;
  border-radius: 999px !important;
  font-weight: 600;
}

.offer-btn-cart:hover {
  background: var(--hy-forest) !important;
  color: var(--hy-cream) !important;
}

/* Kill the periodic "shake" animation — reads as loud, not premium */
.shake-periodic { animation: none !important; }

/* =======================================================================
   SITE-WIDE COMPONENTS — cards, accordion, forms, tables, pagination,
   breadcrumbs. These are generic Bootstrap classes reused across every
   page type (category/shop grid, product detail tabs & FAQ, cart,
   checkout steps, account forms, blog, information pages) so styling
   them here (unscoped) is what makes the rest of the site match the
   homepage instead of just carrying default Bootstrap looks.
   ======================================================================= */

.card {
  border: 1px solid var(--hy-line) !important;
  border-radius: var(--hy-radius-md) !important;
  box-shadow: var(--hy-shadow-soft);
  transition: transform 0.35s var(--hy-ease), box-shadow 0.35s var(--hy-ease), border-color 0.35s var(--hy-ease);
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hy-shadow-mid);
  border-color: var(--hy-gold-light) !important;
}

.card-title {
  font-family: var(--hy-font-body);
  font-weight: 700;
  color: var(--hy-forest);
}

.card-title a { color: inherit; }

/* Product/category grid cards specifically (image on cream, price in
   forest, discount/label badges in gold/forest) — same visual language
   as the homepage's Featured Products cards, without duplicating those
   homepage-only selectors. */
.product-card-img,
.card-img-top {
  background: var(--hy-sage-light) !important;
}

.price-new,
.text-primary.fw-bold,
.card .price {
  color: var(--hy-forest) !important;
}

/* Generic accordion (product FAQ, information pages) — same soft-card +
   gold-chevron treatment as the homepage FAQ, minus the homepage's
   sticky-column layout which depends on markup only home.twig has. */
.accordion-item {
  background: var(--hy-white) !important;
  border: 1px solid var(--hy-line) !important;
  border-radius: var(--hy-radius-md) !important;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: var(--hy-shadow-soft);
  transition: box-shadow 0.3s var(--hy-ease), border-color 0.3s var(--hy-ease);
}

.accordion-item:hover {
  box-shadow: var(--hy-shadow-mid);
}

.accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--hy-gold) !important;
  border-left: 3px solid var(--hy-gold) !important;
}

.accordion-button {
  font-family: var(--hy-font-body);
  font-weight: 600;
  color: var(--hy-forest) !important;
  background: var(--hy-white) !important;
}

.accordion-button:not(.collapsed) {
  color: var(--hy-forest) !important;
  background: var(--hy-sage-light) !important;
  box-shadow: none !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(182, 138, 78, 0.22) !important;
}

.accordion-button::after {
  filter: sepia(40%) saturate(400%) hue-rotate(80deg);
}

.accordion-body {
  color: var(--hy-ink-soft) !important;
  line-height: 1.7;
}

/* Forms — checkout, account, contact, search, review. Soft rounded
   fields with a sage focus ring instead of Bootstrap's default blue. */
.form-control,
.form-select,
select.form-control,
textarea.form-control {
  border: 1px solid var(--hy-line) !important;
  border-radius: var(--hy-radius-sm) !important;
  font-family: var(--hy-font-body);
  color: var(--hy-ink) !important;
  transition: border-color 0.25s var(--hy-ease), box-shadow 0.25s var(--hy-ease);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--hy-sage) !important;
  box-shadow: 0 0 0 3px rgba(124, 154, 130, 0.18) !important;
}

.form-label {
  font-family: var(--hy-font-body);
  font-weight: 600;
  color: var(--hy-forest);
}

.form-check-input:checked {
  background-color: var(--hy-forest) !important;
  border-color: var(--hy-forest) !important;
}

/* Tables — cart, order history, address book */
.table thead th {
  font-family: var(--hy-font-body);
  font-weight: 700;
  color: var(--hy-forest);
  border-bottom: 2px solid var(--hy-line) !important;
}

.table td, .table th {
  border-color: var(--hy-line) !important;
  vertical-align: middle;
}

/* Pagination — reviews, category grid, order history */
.pagination .page-link {
  color: var(--hy-forest) !important;
  border-color: var(--hy-line) !important;
  font-family: var(--hy-font-body);
}

.pagination .page-item.active .page-link {
  background: var(--hy-forest) !important;
  border-color: var(--hy-forest) !important;
  color: var(--hy-cream) !important;
}

.pagination .page-link:hover {
  background: var(--hy-sage-light) !important;
  color: var(--hy-forest) !important;
}

/* Breadcrumbs */
.breadcrumb-item a { color: var(--hy-ink-soft); }
.breadcrumb-item.active { color: var(--hy-forest); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--hy-line); }

/* Alerts — success/error messages on forms across the site */
.alert-success {
  background: var(--hy-sage-light) !important;
  color: var(--hy-forest-dark) !important;
  border-color: var(--hy-sage) !important;
}

.alert-danger {
  background: #FBEEEA !important;
  color: #8a4a36 !important;
  border-color: var(--hy-blush-deep) !important;
}

/* =======================================================================
   HERO CAROUSEL
   ======================================================================= */

.home-live-hero-slider {
  /* hydrella-inline-shared.css sets `margin: 0.5rem 0 1.5rem !important`
     on this same selector — that top margin (8px) is what created the
     visible gap under the header; padding alone here can't beat it since
     it's !important, so it must be overridden with matching !important. */
  margin: 0 0 1.5rem !important;
  padding: 0 0 4px;
}

.home-live-hero-carousel {
  border-radius: var(--hy-radius-lg);
  overflow: hidden;
  box-shadow: var(--hy-shadow-mid);
  position: relative;
}

.home-live-hero-carousel .home-live-hero-slide,
.home-hero-carousel .carousel-item {
  border-radius: var(--hy-radius-lg);
}

.home-live-hero-indicators {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.home-live-hero-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.3s var(--hy-ease);
  padding: 0;
}

.home-live-hero-indicator.active {
  background: var(--hy-gold);
  width: 22px;
  border-radius: 999px;
}

.home-live-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(251, 247, 239, 0.85);
  color: var(--hy-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--hy-shadow-soft);
  backdrop-filter: blur(6px);
  transition: background 0.25s var(--hy-ease), transform 0.25s var(--hy-ease);
  opacity: 0;
}

.home-live-hero-carousel:hover .home-live-hero-nav { opacity: 1; }
.home-live-hero-nav:hover { background: var(--hy-white); transform: translateY(-50%) scale(1.06); }
.home-live-hero-prev { left: 16px; }
.home-live-hero-next { right: 16px; }

@media (max-width: 767px) {
  .home-live-hero-nav { opacity: 1; width: 34px; height: 34px; }
  .home-live-hero-carousel { border-radius: var(--hy-radius-md); }
  .home-live-hero-slider { padding-top: 0; }
}

.home-hero-slider { display: none; } /* legacy secondary carousel stays hidden (was empty already when banners present) */

/* =======================================================================
   SEO / BRAND INTRO STRIP
   ======================================================================= */

.home-seo-intro {
  text-align: center;
  padding: 24px 16px 40px;
  max-width: 820px;
  margin: 0 auto;
}

.home-seo-intro__tagline {
  font-family: var(--hy-font-body);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--hy-gold);
  margin-bottom: 14px;
  position: relative;
  display: inline-block;
}

.home-seo-intro__tagline::before,
.home-seo-intro__tagline::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28px;
  height: 1px;
  background: var(--hy-gold);
  opacity: 0.6;
}

.home-seo-intro__tagline::before { left: -42px; }
.home-seo-intro__tagline::after { right: -42px; }

.home-seo-intro__title {
  font-family: var(--hy-font-display) !important;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 600 !important;
  color: var(--hy-forest) !important;
  line-height: 1.2;
  margin-bottom: 18px;
}

.home-seo-intro__summary {
  font-family: var(--hy-font-body);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--hy-ink-soft);
  margin: 0;
}

@media (max-width: 767px) {
  .home-seo-intro { padding: 40px 12px 28px; }
  .home-seo-intro__tagline::before,
  .home-seo-intro__tagline::after { display: none; }
}

/* =======================================================================
   SHOP BY CONCERN (footer.twig markup, appears mid-home via JS reorder)
   "SeaSoul" style: clean white cards, image on top, copy below,
   circular arrow CTA on the right — light, airy, no dark overlays.
   ======================================================================= */

.grey_bgcol {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  text-align: center;
  padding: 12px 4px 6px !important;
}

.grey_bgcol::before {
  display: none !important;
}

.grey_bgcol h2 {
  text-shadow: none !important;
}

.grey_bgcol h2::after {
  display: none !important;
}

.shop-concern-heading {
  font-family: var(--hy-font-display) !important;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.01em;
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.shop-concern-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 1.5px;
  background: var(--hy-gold);
  opacity: 0.85;
}

.sbc-slider {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
  padding: 12px 48px 32px;
}

.sbc-inner { border-radius: 0 !important; overflow: visible !important; }

/* ---- Card: white shell, image on top, copy below (no overlay) ---- */

.shop-concern-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--hy-white);
  border: 1px solid var(--hy-line);
  border-radius: var(--hy-radius-lg) !important;
  box-shadow: var(--hy-shadow-soft) !important;
  transition: transform 0.4s var(--hy-ease), box-shadow 0.4s var(--hy-ease), border-color 0.4s var(--hy-ease);
  overflow: hidden;
  height: 100%;
}

.shop-concern-card:hover,
.shop-concern-card:focus-visible {
  transform: translateY(-6px) scale(1.012);
  box-shadow: var(--hy-shadow-lift) !important;
  border-color: var(--hy-gold-light);
}

/* Image sits in normal flow at a fixed aspect ratio at the top of the
   card only — not the full card height — so there's real white space
   for the title/description/arrow row beneath it (no wrapper div
   needed; the <img> itself is the cropped frame). */
.shop-concern-image {
  display: block;
  position: static;
  width: 100% !important;
  aspect-ratio: 4 / 5;
  height: auto !important;
  object-fit: cover;
  object-position: center;
  border-radius: var(--hy-radius-lg) var(--hy-radius-lg) 0 0;
  transition: transform 0.8s var(--hy-ease);
}

.shop-concern-card:hover .shop-concern-image {
  transform: scale(1.06);
}

/* Copy block: plain white background, dark text — no gradient veil.
   Title and description stack full-width (so long titles like
   "Dullness & Uneven Skin Tone" get room to wrap cleanly on two lines
   instead of being squeezed by a same-row arrow button); the circular
   arrow sits on its own row at the bottom, right-aligned. */
.shop-concern-overlay {
  position: static;
  inset: auto;
  display: flex;
  flex-direction: column;
  background: none !important;
  padding: 20px 20px 18px !important;
  flex: 1;
}

.shop-concern-card:hover .shop-concern-overlay {
  background: none !important;
}

.shop-concern-overlay-copy {
  min-width: 0;
  flex: 1;
}

.shop-concern-card-title {
  font-family: var(--hy-font-display) !important;
  font-weight: 600 !important;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--hy-forest) !important;
  text-shadow: none !important;
  margin-bottom: 8px !important;
}

.shop-concern-overlay p.small {
  font-family: var(--hy-font-body);
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--hy-ink-soft) !important;
  opacity: 1;
  margin-bottom: 0 !important;
}

/* Circular arrow CTA on its own bottom row, right-aligned. The button's
   text ("Shop Now") stays for screen readers/accessible name but is
   visually replaced by an arrow glyph — no copy was changed. */
.shop-concern-card-btn {
  flex-shrink: 0;
  align-self: flex-end;
  margin-top: 16px;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--hy-cream-deep) !important;
  color: var(--hy-forest) !important;
  border: 1px solid var(--hy-line) !important;
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.3s var(--hy-ease), border-color 0.3s var(--hy-ease), transform 0.3s var(--hy-ease);
  box-shadow: none;
}

.shop-concern-card-btn::after {
  content: '\2192'; /* → */
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 400;
  transition: transform 0.3s var(--hy-ease);
}

.shop-concern-card:hover .shop-concern-card-btn {
  background: var(--hy-forest) !important;
  border-color: var(--hy-forest) !important;
  color: var(--hy-cream) !important;
}

.shop-concern-card:hover .shop-concern-card-btn::after {
  transform: translateX(3px);
}

.sbc-control {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hy-line);
  background: var(--hy-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--hy-shadow-soft);
  transition: background 0.25s var(--hy-ease), transform 0.25s var(--hy-ease);
  z-index: 4;
}

.sbc-control:hover {
  background: var(--hy-forest);
  transform: translateY(-50%) scale(1.06);
}

.sbc-control:hover .carousel-control-prev-icon,
.sbc-control:hover .carousel-control-next-icon {
  filter: invert(1);
}

.sbc-prev { left: 0; }
.sbc-next { right: 0; }
.sbc-control .carousel-control-prev-icon,
.sbc-control .carousel-control-next-icon {
  filter: invert(20%) sepia(15%) saturate(600%) hue-rotate(90deg);
  width: 14px;
  height: 14px;
  transition: filter 0.25s var(--hy-ease);
}

@media (max-width: 767px) {
  .sbc-slider { padding: 4px 6px 26px; }
  .shop-concern-card { border-radius: var(--hy-radius-md) !important; }
  .shop-concern-image { border-radius: var(--hy-radius-md) var(--hy-radius-md) 0 0; aspect-ratio: 1 / 1.05; }
  .shop-concern-overlay { padding: 14px 14px 14px !important; }
  .shop-concern-card-title { font-size: 0.92rem; margin-bottom: 6px !important; }
  .shop-concern-overlay p.small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.74rem; }
  .shop-concern-card-btn { width: 36px; height: 36px; margin-top: 12px; }
  .shop-concern-card-btn::after { font-size: 0.9rem; }
  .sbc-control { width: 32px; height: 32px; }
}

/* =======================================================================
   FEATURED PRODUCTS
   ======================================================================= */

/*.featured-module { padding: 48px 0 8px; }*/

.featured-heading {
  font-family: var(--hy-font-display) !important;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: none !important;
  color: var(--hy-forest) !important;
}

.featured-heading-divider {
  width: 56px;
  height: 2px;
  background: var(--hy-gold);
  margin: 10px auto 0;
}

.featured-shipping-note {
  font-family: var(--hy-font-body);
  font-size: 0.85rem;
  color: var(--hy-ink-soft) !important;
}

/* ---- Card shell ---- */

.product-card {
  background: var(--hy-white);
  border: 1px solid var(--hy-line) !important;
  border-radius: var(--hy-radius-md) !important;
  overflow: hidden;
  transition: transform 0.4s var(--hy-ease), box-shadow 0.4s var(--hy-ease), border-color 0.4s var(--hy-ease);
  box-shadow: var(--hy-shadow-soft);
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--hy-shadow-lift);
  border-color: var(--hy-gold) !important;
}

/* ---- Image frame ---- */

.featured-product-image-wrap {
  position: relative;
  background: linear-gradient(155deg, var(--hy-sage-light) 0%, var(--hy-cream-deep) 100%);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}

.featured-product-image-wrap .product-thumb {
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.6s var(--hy-ease);
  filter: drop-shadow(0 10px 18px rgba(34, 59, 47, 0.14));
}

.product-card:hover .product-thumb { transform: scale(1.07); }

.featured-badge-discount {
  background: var(--hy-gold) !important;
  color: var(--hy-forest-dark) !important;
  font-weight: 700;
  font-size: 0.7rem;
  border-radius: 999px;
  font-family: var(--hy-font-body);
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(182, 138, 78, 0.35);
}

.featured-badge-label {
  background: var(--hy-forest) !important;
  color: var(--hy-cream) !important;
  border-radius: 999px;
  font-size: 0.7rem;
}

/* ---- Category pill: sits just under the image, refined + contained ---- */

.skin-type-badge {
  display: inline-block;
  margin: 12px 14px 0 !important;
  padding: 4px 12px;
  background: var(--hy-sage-light);
  color: var(--hy-forest) !important;
  border-radius: 999px;
  font-family: var(--hy-font-body);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 28px);
}

.featured-card-body {
  padding: 10px 14px 14px !important;
}

.featured-card-body .card-title,
.featured-card-body .card-title a,
.featured-product-link {
  font-family: var(--hy-font-body);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--hy-forest) !important;
}

.featured-brand-note {
  font-size: 0.68rem;
  color: var(--hy-ink-soft) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px !important;
}

.featured-rating-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.featured-rating-stars {
  color: var(--hy-gold);
  font-size: 0.82rem;
  letter-spacing: 1px;
}

.featured-rating-count {
  font-size: 0.72rem;
}

.featured-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}

.featured-price-new {
  color: var(--hy-forest) !important;
  font-family: var(--hy-font-display);
  font-size: 1.18rem;
  font-weight: 600;
}

.featured-price-old { color: var(--hy-ink-soft) !important; font-size: 0.85rem; }

.featured-status-note-success {
  color: var(--hy-sage) !important;
  font-size: 0.72rem;
  font-weight: 600;
}

.featured-status-note-danger {
  color: var(--hy-blush-deep) !important;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ---- Action stack: Add to Cart / Buy Now / Wishlist ---- */

.product-action-stack {
  margin-top: 12px;
}

.featured-add-to-cart-btn,
.featured-buy-now-btn {
  font-size: 0.82rem;
  padding: 0.55em 1em !important;
}

.featured-icon-action-btn {
  font-size: 0.82rem;
  padding: 0.55em 1em !important;
  border-radius: 999px !important;
  transition: all 0.25s var(--hy-ease);
}

.featured-icon-action-btn:hover {
  background: var(--hy-sage-light) !important;
  border-color: var(--hy-sage) !important;
  color: var(--hy-forest) !important;
  transform: translateY(-1px);
}

/* =======================================================================
   PRODUCT CARD VIDEO SECTION
   Autoplaying, looping, muted product-related video
   ======================================================================= */
.product-card-video-wrap {
  width: 100%;
  padding: 10px 14px 6px;
  box-sizing: border-box;
}

.product-card-video-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 250px;
  border-radius: var(--hy-radius-sm, 14px);
  overflow: hidden;
  background: #000000;
  border: 1px solid var(--hy-line, #E4DCC9);
  box-shadow: 0 6px 18px rgba(34, 59, 47, 0.08);
}

.product-card-video,
.product-card-video-iframe,
.product-card-video-inner iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1.35);
  border: 0;
  display: block;
  pointer-events: none;
  object-fit: cover;
}

.product-card-video-tag {
  display: none !important;
}

/* Site-wide Compare Icon / Button Removal */
.featured-compare-btn,
.compare-btn,
.special-compare-btn,
#compare-total,
[data-oc-load*="compare"],
button[formaction*="compare"] {
  display: none !important;
}

/* =======================================================================
   COMBO OFFERS
   ======================================================================= */

.offer-grid {
  display: grid;
  gap: 24px;
}

.offer-card {
  background: var(--hy-white);
  border-radius: var(--hy-radius-md);
  border: 1px solid var(--hy-line);
  box-shadow: var(--hy-shadow-soft);
  overflow: hidden;
  transition: transform 0.35s var(--hy-ease), box-shadow 0.35s var(--hy-ease);
}

.offer-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hy-shadow-mid);
}

.offer-badge-sale {
  background: var(--hy-gold) !important;
  color: var(--hy-forest-dark) !important;
  font-weight: 700;
  border-radius: 999px;
}

.offer-title,
.offer-title-link {
  font-family: var(--hy-font-display) !important;
  color: var(--hy-forest) !important;
}

.offer-tagline { color: var(--hy-ink-soft); }

.price-new { color: var(--hy-forest) !important; font-weight: 700; }
.price-old { color: var(--hy-ink-soft) !important; }
.price-normal { color: var(--hy-forest) !important; font-weight: 700; }

/* =======================================================================
   REVIEWS — homepage only, "Moody Community Voices" horizontal-scroll
   card carousel. review_list.twig is SHARED with product-page review
   AJAX loads, and #section-review is not even a unique ID site-wide
   (product.twig has its own separate element with the same ID) — every
   rule here is scoped under #common-home #section-review, which only
   exists on the homepage, so product pages keep the plain default look.
   ======================================================================= */

#common-home #section-review {
  position: relative;
  background: #F6F6F4;
  border-radius: var(--hy-radius-lg);
 /* padding: 56px 0 48px !important;*/
  margin: 8px 0 40px;
  border-top: none !important;
  overflow: hidden;
}

/* Flex column so the card carousel can be reordered ahead of the rating
   breakdown without touching the twig's natural DOM order (header →
   breakdown → cards → pagination). */
#common-home #section-review .review-panel {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: none;
  margin: 0;
}

/* Every direct child of the panel sizes to its own content. Without this
   the panel's children stretch/reserve vertical space (the rating summary
   block keeps its box even with its two children hidden), leaving a tall
   dead zone between the card row and the "Ask a question" button. */
#common-home #section-review .review-panel > * {
  flex: 0 0 auto;
}

/* Section title + "Write A Review" ghost link, both centered up top. */
#common-home #section-review .review-header-row {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  margin-bottom: 36px;
  text-align: center;
}

/* The original "Reviews" text stays in the DOM (untouched content, so
   nothing breaks for anything reading/testing against it) but is
   visually swapped for "#Hydrella Community Voices" via a CSS-generated
   ::before, matching the Moody reference's section title exactly. */
#common-home #section-review .review-header-title {
  font-family: var(--hy-font-display) !important;
  font-size: 0;
  font-weight: 600 !important;
  color: var(--hy-forest) !important;
  text-transform: none !important;
  letter-spacing: 0.01em;
}

#common-home #section-review .review-header-title::before {
  content: '#Hydrella Community Voices';
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

#common-home #section-review .review-toolbar {
  position: static;
}

#common-home #section-review .review-write-btn-modern {
  background: var(--hy-white) !important;
  color: var(--hy-forest) !important;
  border: 1px solid var(--hy-line) !important;
  box-shadow: var(--hy-shadow-soft) !important;
  font-size: 0.72rem;
  padding: 0.5em 1.2em !important;
}

/* Aggregate rating summary ("N Reviews" + gold star row) and the
   5★–1★ breakdown bars are hidden per request — they duplicate the
   per-card star ratings already shown on each review and read as
   clutter below the carousel. "Ask a question" lives in the same
   .review-summary-grid wrapper (.review-cta-wrap, further below) and
   stays visible + fully functional — only its two siblings are hidden,
   not the wrapper itself. */
#common-home #section-review .review-summary-overview,
#common-home #section-review .review-breakdown {
  display: none !important;
}

#common-home #section-review .review-summary-grid {
  order: 3;
  padding: 22px 0 0;
  margin: 40px auto 0;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#common-home #section-review .review-cta-wrap {
  display: flex;
  justify-content: center;
}

#common-home #section-review .review-ask-btn,
#common-home #section-review .review-ask-btn-modern {
  background: var(--hy-forest) !important;
  border: 1px solid var(--hy-forest) !important;
  color: var(--hy-cream) !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  padding: 0.45em 1.1em !important;
  min-height: 28px !important;
  box-shadow: none !important;
}

#common-home #section-review .review-ask-btn:hover,
#common-home #section-review .review-ask-btn-modern:hover {
  background: var(--hy-forest-dark) !important;
  border-color: var(--hy-forest-dark) !important;
  color: var(--hy-cream) !important;
}

/* ---- The horizontal-scroll card row ---- */

/* Wraps the scroll track + arrow buttons; JS adds this around
   .review-card-grid so the arrows can be positioned against it without
   a twig change. Falls back to a plain horizontally-scrollable strip
   (native touch/trackpad scroll, no arrows) if JS hasn't run. */
#common-home #section-review .hy-review-viewport {
  order: 2;
  position: relative;
  padding: 0 56px;
}

/* Fallback order (JS not yet run / disabled): the grid isn't wrapped in
   .hy-review-viewport yet, so it needs the same order directly. */
#common-home #section-review .review-card-grid {
  order: 2;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 6px 0 20px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#common-home #section-review .review-card-grid::-webkit-scrollbar { display: none; }

/* Each card: fixed comfortable width so several sit in a row and the
   rest peek/scroll — light, airy, soft-shadowed white card. */
#common-home #section-review .review-card {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--hy-white);
  border: 1px solid var(--hy-line);
  border-radius: var(--hy-radius-lg);
  padding: 24px 22px 26px;
  box-shadow: var(--hy-shadow-soft);
  transition: transform 0.35s var(--hy-ease), box-shadow 0.35s var(--hy-ease), border-color 0.35s var(--hy-ease);
}

#common-home #section-review .review-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hy-shadow-lift);
  border-color: var(--hy-gold-light);
}

/* 1) Product photo, top of card, inside a soft rounded square */
#common-home #section-review .review-card-product-media {
  order: 1;
  width: 84px;
  height: 84px;
  border-radius: var(--hy-radius-md);
  background: var(--hy-sage-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 18px;
}

#common-home #section-review .review-card-product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* 2) The customer quote, in the middle. Fixed 3-line height: all 55
   reviews share one scroll track, so a variable-height quote makes the
   whole row as tall as the longest one and leaves dead space under the
   short cards on screen. */
#common-home #section-review .ft-review-body {
  order: 2;
  margin-bottom: 14px;
  height: 69px;
  overflow: hidden;
}

#common-home #section-review .review-card-text {
  font-family: var(--hy-font-body);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--hy-ink);
}

#common-home #section-review .review-card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The quote glyphs sit outside the review's inner <p>, so as plain
   pseudo-elements each one takes a line box of its own — ~60px of dead
   height per card. Float them onto the text's own first/last line, and
   drop the <p>'s default bottom margin, so the card hugs its quote. */
#common-home #section-review .review-card-text > p {
  margin: 0;
  display: inline;
}

#common-home #section-review .review-card-text::before {
  content: '\201C';
  margin-right: 1px;
}

#common-home #section-review .review-card-text::after {
  content: '\201D';
  margin-left: 1px;
}

#common-home #section-review .full-review-text.review-hidden { display: none; }

#common-home #section-review .review-read-more-inline {
  display: inline-block;
  margin-top: 6px;
  color: var(--hy-gold) !important;
  font-family: var(--hy-font-body);
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 600;
}

/* 3) Gold star rating */
#common-home #section-review .review-card-stars {
  order: 3;
  color: var(--hy-gold);
  font-size: 0.85rem;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

/* 4) Product name — highlighted luxury badges in distinct line colors */
#common-home #section-review .review-card-product-name {
  order: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hy-font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: #1b3d2f;
  background: #edf5f0;
  border: 1px solid rgba(27, 61, 47, 0.2);
  border-radius: 999px;
  padding: 6px 14px;
  margin-top: auto;
  margin-bottom: 6px;
  max-width: 100%;
  letter-spacing: 0.015em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.25s var(--hy-ease);
  text-align: center;
}

#common-home #section-review .review-card:hover .review-card-product-name {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

/* 4a) Hydrating Range (Ocean Sky Blue) */
#common-home #section-review .review-card-product-name.product-tag-hydrating,
.product-tag-hydrating {
  color: #09527f !important;
  background: #eaf4fb !important;
  border-color: rgba(14, 116, 175, 0.28) !important;
}
#common-home #section-review .review-card:hover .review-card-product-name.product-tag-hydrating,
.review-card:hover .product-tag-hydrating {
  background: #dbeefa !important;
  border-color: rgba(14, 116, 175, 0.45) !important;
  color: #063a5a !important;
}

/* 4b) Skin Clarifying / Acne Range (Botanical Fresh Green) */
#common-home #section-review .review-card-product-name.product-tag-clarifying,
.product-tag-clarifying {
  color: #1a6128 !important;
  background: #eef8f0 !important;
  border-color: rgba(30, 107, 48, 0.28) !important;
}
#common-home #section-review .review-card:hover .review-card-product-name.product-tag-clarifying,
.review-card:hover .product-tag-clarifying {
  background: #e0f3e3 !important;
  border-color: rgba(30, 107, 48, 0.45) !important;
  color: #11441c !important;
}

/* 4c) Brightening / Radiance Range (Radiant Warm Amber / Gold) */
#common-home #section-review .review-card-product-name.product-tag-brightening,
.product-tag-brightening {
  color: #944a00 !important;
  background: #fff6e8 !important;
  border-color: rgba(194, 116, 11, 0.3) !important;
}
#common-home #section-review .review-card:hover .review-card-product-name.product-tag-brightening,
.review-card:hover .product-tag-brightening {
  background: #ffeed4 !important;
  border-color: rgba(194, 116, 11, 0.48) !important;
  color: #733900 !important;
}

/* 4d) Combo / Bundles Range (Regal Rose Plum) */
#common-home #section-review .review-card-product-name.product-tag-combo,
.product-tag-combo {
  color: #8c1448 !important;
  background: #fcf0f5 !important;
  border-color: rgba(163, 29, 87, 0.28) !important;
}
#common-home #section-review .review-card:hover .review-card-product-name.product-tag-combo,
.review-card:hover .product-tag-combo {
  background: #f8dfec !important;
  border-color: rgba(163, 29, 87, 0.45) !important;
  color: #690e36 !important;
}

/* 5) Customer name, bottom of card */
#common-home #section-review .review-card-head {
  order: 5;
  display: flex;
  align-items: center;
  gap: 6px;
}

#common-home #section-review .review-card-author {
  font-family: var(--hy-font-body);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--hy-ink-soft);
}

#common-home #section-review .review-verified-badge {
  background: var(--hy-sage-light);
  color: var(--hy-forest);
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
}

/* Date footer stays hidden — not part of the Moody card layout */
#common-home #section-review .review-card-footer { order: 6; display: none; }

/* ---- Left / right nav arrows ---- */

#common-home #section-review .hy-review-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hy-line);
  background: var(--hy-white);
  color: var(--hy-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--hy-shadow-soft);
  transition: background 0.25s var(--hy-ease), transform 0.25s var(--hy-ease), opacity 0.25s var(--hy-ease);
  z-index: 3;
}

#common-home #section-review .hy-review-arrow:hover {
  background: var(--hy-forest);
  color: var(--hy-cream);
  transform: translateY(-50%) scale(1.06);
}

#common-home #section-review .hy-review-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

#common-home #section-review .hy-review-arrow:disabled:hover {
  background: var(--hy-white);
  color: var(--hy-forest);
  transform: translateY(-50%);
}

#common-home #section-review .hy-review-arrow-prev { left: 0; }
#common-home #section-review .hy-review-arrow-next { right: 0; }

/* The pagination wrapper div is a direct .review-panel child (order 4,
   last) — hidden once JS marks it .hy-review-js-managed since the
   horizontal scroll + arrows replace it visually; the links themselves
   stay in the DOM untouched underneath for no-JS / crawler fallback. */
#common-home #section-review > .review-panel > .d-flex.justify-content-center {
  order: 4;
}

#common-home #section-review .hy-review-pagination-native.hy-review-js-managed { display: none; }

@media (max-width: 767px) {
  #common-home #section-review { padding: 40px 0 36px !important; }
  #common-home #section-review .hy-review-viewport { padding: 0 8px; }
  #common-home #section-review .hy-review-arrow { display: none; }
  #common-home #section-review .review-card { width: 240px; padding: 20px 18px 22px; }
  #common-home #section-review .review-card-text { font-size: 0.84rem; }
}

/* =======================================================================
   FAQ — homepage only. #home-faq is unique to home.twig (unlike
   #section-review, there's no colliding ID elsewhere), but the generic
   Bootstrap accordion classes (.accordion-item/.accordion-button/
   .accordion-body) ARE shared with product.twig's own FAQ block, so
   every rule below is still scoped under #common-home #home-faq to
   avoid leaking onto product pages — the old unscoped .accordion-body
   rule here previously did exactly that.
   ======================================================================= */

#common-home #home-faq {
  position: relative;
  background: linear-gradient(155deg, var(--hy-sage-light) 0%, var(--hy-cream-deep) 55%, var(--hy-sage-light) 100%);
  border-radius: var(--hy-radius-lg);
  padding: 64px 28px !important;
  margin: 8px 0 16px;
  overflow: hidden;
}

/* Faint decorative watermark — a single soft radial bloom, never busy */
#common-home #home-faq::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 138, 78, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* ---- Left column: eyebrow + title + intro + Contact Us ----
   Sticky on desktop so it stays in view alongside the (much taller)
   accordion instead of leaving a large empty gap below "Contact Us"
   once the list scrolls past it — a standard pattern for a short
   intro column next to a long list. */

#common-home #home-faq .row > .col-lg-4 {
  position: sticky;
  top: 96px; /* clears the sticky site header */
  align-self: flex-start;
}

#common-home #home-faq .row {
  display: flex;
  flex-wrap: wrap;
}

#common-home #home-faq .home-faq-title {
  font-family: var(--hy-font-display) !important;
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  font-weight: 600 !important;
  color: var(--hy-forest) !important;
  line-height: 1.25;
  position: relative;
  padding-bottom: 18px;
}

#common-home #home-faq .home-faq-title::before {
  content: 'SUPPORT';
  display: block;
  font-family: var(--hy-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--hy-gold);
  margin-bottom: 10px;
}

#common-home #home-faq .home-faq-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--hy-gold);
}

#common-home #home-faq .home-faq-intro {
  color: var(--hy-ink-soft) !important;
  font-size: 0.96rem;
  line-height: 1.75;
  max-width: 34ch;
}

#common-home #home-faq .home-faq-contact-btn {
  background: var(--hy-forest) !important;
  border-color: var(--hy-forest) !important;
  color: var(--hy-cream) !important;
  font-family: var(--hy-font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px !important;
  padding: 0.75em 1.7em !important;
  box-shadow: 0 8px 22px rgba(34, 59, 47, 0.20);
  transition: background 0.3s var(--hy-ease), transform 0.3s var(--hy-ease), box-shadow 0.3s var(--hy-ease);
}

#common-home #home-faq .home-faq-contact-btn:hover {
  background: var(--hy-forest-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(34, 59, 47, 0.26);
}

#common-home #home-faq .home-faq-trust-list {
  margin: 36px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(34, 59, 47, 0.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#common-home #home-faq .home-faq-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hy-font-body);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--hy-ink-soft);
}

#common-home #home-faq .home-faq-trust-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hy-white);
  border: 1px solid var(--hy-gold-light);
  color: var(--hy-gold);
  font-size: 0.85rem;
}

/* ---- Right column: the accordion itself ---- */

#common-home #home-faq .accordion-flush {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#common-home #home-faq .home-faq-item {
  background: var(--hy-white) !important;
  border: 1px solid var(--hy-line) !important;
  border-radius: var(--hy-radius-md) !important;
  overflow: hidden;
  box-shadow: var(--hy-shadow-soft);
  transition: box-shadow 0.35s var(--hy-ease), transform 0.35s var(--hy-ease), border-color 0.35s var(--hy-ease);
}

#common-home #home-faq .home-faq-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--hy-shadow-mid);
  border-color: var(--hy-gold-light) !important;
}

/* Open state: soft sage highlight + left accent bar in brand gold,
   applied to the whole card so it reads as a clear "active" state. */
#common-home #home-faq .home-faq-item:has(.home-faq-button:not(.collapsed)) {
  border-color: var(--hy-gold) !important;
  box-shadow: var(--hy-shadow-mid);
  border-left: 3px solid var(--hy-gold) !important;
}

#common-home #home-faq .home-faq-button {
  font-family: var(--hy-font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--hy-forest) !important;
  background: var(--hy-white) !important;
  padding: 1.15rem 1.4rem;
  transition: color 0.3s var(--hy-ease), background 0.3s var(--hy-ease);
}

#common-home #home-faq .home-faq-button:not(.collapsed) {
  color: var(--hy-forest) !important;
  background: var(--hy-sage-light) !important;
  box-shadow: none !important;
}

#common-home #home-faq .home-faq-button:focus {
  box-shadow: 0 0 0 3px rgba(182, 138, 78, 0.22) !important;
}

/* Elegant chevron: Bootstrap's default caret, recolored to sage/gold and
   given a smooth rotate — no extra markup needed, it's the accordion's
   own ::after glyph. */
#common-home #home-faq .home-faq-button::after {
  filter: none;
  background-image: none;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f078'; /* chevron-down */
  font-size: 0.78rem;
  color: var(--hy-sage);
  transition: transform 0.4s var(--hy-ease), color 0.3s var(--hy-ease);
}

#common-home #home-faq .home-faq-button:not(.collapsed)::after {
  color: var(--hy-gold);
  transform: rotate(180deg);
}

#common-home #home-faq .accordion-collapse {
  transition: height 0.4s var(--hy-ease);
}

#common-home #home-faq .accordion-body {
  color: var(--hy-ink-soft) !important;
  font-family: var(--hy-font-body);
  font-size: 0.92rem;
  line-height: 1.75;
  padding: 0 1.4rem 1.3rem;
}

@media (max-width: 991px) {
  #common-home #home-faq { padding: 44px 20px !important; }
  #common-home #home-faq .home-faq-intro { max-width: none; }
  /* Columns stack full-width below Bootstrap's lg breakpoint — sticky
     would just pin the intro block awkwardly above the accordion. */
  #common-home #home-faq .row > .col-lg-4 { position: static; }
  #common-home #home-faq .home-faq-trust-list { flex-direction: row; flex-wrap: wrap; gap: 20px 28px; }
  #common-home #home-faq .home-faq-trust-item { flex: 1 1 auto; min-width: 200px; }
}

@media (max-width: 575px) {
  #common-home #home-faq .home-faq-button { font-size: 0.9rem; padding: 1rem 1.1rem; }
  #common-home #home-faq .accordion-body { font-size: 0.86rem; padding: 0 1.1rem 1.1rem; }
}

/* =======================================================================
   MODALS
   ======================================================================= */

.home-modal-content,
.featured-modal-shell,
.login-required-modal__content,
#skinSurveyModal .skin-survey-modal {
  border-radius: var(--hy-radius-md) !important;
  border: none !important;
  box-shadow: var(--hy-shadow-lift) !important;
}

.home-modal-action-btn.btn-secondary {
  background: var(--hy-white) !important;
  color: var(--hy-ink-soft) !important;
  border: 1px solid var(--hy-line) !important;
  font-family: var(--hy-font-body);
  font-weight: 600;
  border-radius: 999px !important;
  padding-left: 1.4em;
  padding-right: 1.4em;
  transition: background 0.25s var(--hy-ease), color 0.25s var(--hy-ease);
}

.home-modal-action-btn.btn-secondary:hover {
  background: var(--hy-sage-light) !important;
  color: var(--hy-forest) !important;
}

.home-modal-header,
.login-required-modal__header {
  background: var(--hy-forest) !important;
  color: var(--hy-cream) !important;
  border-radius: var(--hy-radius-md) var(--hy-radius-md) 0 0 !important;
}

.home-modal-title,
.login-required-modal__title { color: var(--hy-cream) !important; font-family: var(--hy-font-display); }
.home-modal-header .btn-close,
.login-required-modal__header .btn-close { filter: invert(1); }

.home-modal-textarea:focus,
.skin-survey-form input:focus,
.skin-survey-form textarea:focus {
  border-color: var(--hy-sage) !important;
  box-shadow: 0 0 0 3px rgba(124, 154, 130, 0.18) !important;
}

.skin-survey-head { background: var(--hy-forest); color: var(--hy-cream); border-radius: var(--hy-radius-md) var(--hy-radius-md) 0 0; padding: 24px; }
.skin-survey-title { font-family: var(--hy-font-display); color: var(--hy-cream); }
.skin-survey-tag {
  background: var(--hy-gold);
  color: var(--hy-forest-dark);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 8px;
}
.skin-survey-subtitle { color: var(--hy-sage-light); }
.skin-survey-head .btn-close { filter: invert(1); }

.skin-issue-item {
  border: 1px solid var(--hy-line);
  border-radius: var(--hy-radius-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.skin-issue-item:has(input:checked) {
  border-color: var(--hy-sage);
  background: var(--hy-sage-light);
}

/* =======================================================================
   FOOTER
   ======================================================================= */

.footer-fancy {
  position: relative;
  background:
    radial-gradient(circle at 12% 0%, rgba(182, 138, 78, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 88% 100%, rgba(124, 154, 130, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, var(--hy-forest) 0%, var(--hy-forest-dark) 100%) !important;
  border-top: none !important;
  color: var(--hy-cream) !important;
  margin-top: 32px !important;
  padding-top: 12px !important;
  padding-bottom: 8px !important;
}

/* Soft glowing top edge instead of a flat border line */
.footer-fancy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--hy-gold) 50%, transparent 100%);
  opacity: 0.65;
}

.footer-fancy h5 {
  position: relative;
  color: var(--hy-gold-light) !important;
  font-family: var(--hy-font-display);
  letter-spacing: 0.08em;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  padding-bottom: 10px;
  margin-bottom: 16px !important;
}
.footer-fancy h5 i { color: var(--hy-gold) !important; }

.footer-fancy h5::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--hy-gold);
  opacity: 0.7;
}

@media (max-width: 767px) {
  .footer-fancy h5::after { left: 50%; transform: translateX(-50%); }
}

/* The concern-card overlay used to be a dark translucent box over the
   photo, so its text carried a heavy dark shadow for contrast. The
   redesign made that panel solid white with dark text, leaving the
   0 2px 6px rgba(0,0,0,.7) shadow smearing every glyph. Drop it. */
.shop-concern-overlay,
.shop-concern-overlay p,
.shop-concern-overlay p.small,
.shop-concern-card-title {
  text-shadow: none !important;
}

/* menu.twig holds the page-level floating buttons AND is included twice
   in header.twig (once for the desktop nav, once for the mobile menu
   panel). So every float renders twice, stacked a few px apart at
   slightly different widths — that misregistration is the "overlap" on
   the Best Seller pill, not a spacing problem. Keep the first copy,
   hide the one that comes with the mobile panel. */
#mobile-menu-panel .best-seller-float,
#mobile-menu-panel .whatsapp-float,
#mobile-menu-panel .btn-back-home {
  display: none !important;
}

/* The combo sticker module also renders twice — once inside the page
   content column, once standalone. Both are fixed-positioned to the same
   spot, so the copies sit exactly on top of each other and double the
   shadow. Hide the one nested in the content column. */
.common-home__content .combo-sticker-container {
  display: none !important;
}

/* Bottom-right stack: WhatsApp (20px), Best Seller (92px, 50px tall →
   top edge 142px), combo sticker above it with a clear 16px gap. */
.combo-sticker-container,
body.common-home .combo-sticker-container {
  bottom: 158px !important;
}

@media (max-width: 767px) {
  .combo-sticker-container,
  body.common-home .combo-sticker-container {
    bottom: 150px !important;
  }

  .combo-sticker-container img {
    width: 72px !important;
  }
}

/* Bootstrap's responsive container max-widths never apply here, so the
   footer container ran the full 1440px with zero padding — the first
   column sat flush against the left edge and the last against the right.
   Cap it and give it real side gutters so the columns breathe evenly. */
.footer-fancy .container {
  max-width: 1320px;
  padding-left: 32px;
  padding-right: 32px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991px) {
  .footer-fancy .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ps-md-5 on every column added ~48px of left indent on top of the
   container gutter, pushing each column off its own grid track. */
.footer-fancy .container .row > [class*="col-"].ps-md-5 {
  padding-left: var(--bs-gutter-x, 1.5rem) !important;
}

.footer-fancy .footer-links-row { padding: 8px 0 4px; }
.footer-fancy .footer-links-row li { margin-bottom: 10px !important; }

.footer-fancy a.text-muted-hover {
  color: rgba(251, 247, 239, 0.78) !important;
  transition: color 0.25s var(--hy-ease), padding-left 0.25s var(--hy-ease);
}

.footer-fancy a.text-muted-hover:hover {
  color: var(--hy-gold-light) !important;
  padding-left: 4px;
}

.footer-fancy hr {
  border: none !important;
  height: 1px;
  opacity: 1;
  background: linear-gradient(90deg, transparent 0%, rgba(182, 138, 78, 0.4) 50%, transparent 100%) !important;
}

/* Certificate badges: two of the four source assets (Clinically Tested,
   100% Vegan) are white-on-transparent artwork made for a dark backdrop —
   a light/cream wrapper made them invisible. A deep-forest wrapper gives
   every badge (white ones and the colored PETA/ISO marks alike) real
   contrast, reads as an intentional "certification strip." A caption is
   added purely via CSS (::after, generated text — not new DOM/copy) so
   each badge reads clearly without touching the twig markup. */
.footer-fancy .footer-symmetric-row:first-of-type {
  padding: 22px 0 18px;
  row-gap: 34px !important;
}

.footer-fancy .footer-img-wrapper {
  position: relative;
  background: var(--hy-forest-dark);
  border: 1px solid rgba(182, 138, 78, 0.28);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  width: 78px;
  height: 78px;
  border-radius: 18px !important;
  transition: transform 0.3s var(--hy-ease), border-color 0.3s var(--hy-ease), box-shadow 0.3s var(--hy-ease);
}

.footer-fancy .footer-img-wrapper:hover {
  transform: translateY(-3px);
  border-color: var(--hy-gold);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.footer-fancy .footer-img { max-height: 50px; max-width: 50px; }

.footer-fancy .col-6.col-md-3:nth-child(1) .footer-img-wrapper::after { content: 'Clinically Tested'; }
.footer-fancy .col-6.col-md-3:nth-child(2) .footer-img-wrapper::after { content: '100% Vegan'; }
.footer-fancy .col-6.col-md-3:nth-child(3) .footer-img-wrapper::after { content: 'PETA Certified'; }
.footer-fancy .col-6.col-md-3:nth-child(4) .footer-img-wrapper::after { content: 'ISO Certified'; }

.footer-fancy .footer-img-wrapper::after {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(251, 247, 239, 0.55);
}

.hydrella-footer-social-wrap a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: transform 0.25s var(--hy-ease), box-shadow 0.25s var(--hy-ease);
}

/* Facebook */
.hydrella-footer-social-wrap a.social-link-fb,
.hydrella-footer-social-wrap a:has(.fa-facebook-f) {
  background: #1877F2 !important;
  border: 1px solid #1877F2 !important;
}

/* Instagram */
.hydrella-footer-social-wrap a.social-link-ig,
.hydrella-footer-social-wrap a:has(.fa-instagram) {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  border: 1px solid transparent !important;
}

/* YouTube */
.hydrella-footer-social-wrap a.social-link-yt,
.hydrella-footer-social-wrap a:has(.fa-youtube) {
  background: #FF0000 !important;
  border: 1px solid #FF0000 !important;
}

/* LinkedIn */
.hydrella-footer-social-wrap a.social-link-in,
.hydrella-footer-social-wrap a:has(.fa-linkedin-in) {
  background: #0A66C2 !important;
  border: 1px solid #0A66C2 !important;
}

/* X / Twitter */
.hydrella-footer-social-wrap a.social-link-x,
.hydrella-footer-social-wrap a:has(.fa-x-twitter) {
  background: #000000 !important;
  border: 1px solid #333333 !important;
}

.hydrella-footer-social-wrap a i {
  font-size: 1rem !important;
  color: #ffffff !important;
  line-height: 1;
}

.hydrella-footer-social-wrap a:hover {
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

.hydrella-footer-social-wrap a:hover i {
  color: #ffffff !important;
}

.hydrella-footer-social-wrap a,
.hydrella-footer-social-wrap a:hover,
.hydrella-footer-social-wrap a:focus {
  text-decoration: none !important;
  padding-left: 0 !important;
}

.hydrella-footer-copyright-bottom {
  color: rgba(251, 247, 239, 0.6) !important;
  letter-spacing: 0.02em;
  text-align: center !important;
}
.hydrella-footer-copyright-bottom a { color: var(--hy-gold-light) !important; }

/* Bottom bar reads as its own darker strip, matching the reference
   luxury-brand footers (divider + copyright visually separated from the
   link columns above), without touching the twig markup — the <p> is
   the last child of .container so a full-bleed bar needs to escape it
   via negative margins matched by extra padding. */
.footer-fancy .container > .hydrella-footer-copyright-bottom {
  margin: 20px calc(-50vw + 50%) 0 !important;
  padding: 16px calc(50vw - 50%) 4px !important;
  background: rgba(0, 0, 0, 0.16);
}

/* =======================================================================
   FLOATING WIDGETS (back-to-home, WhatsApp, best-seller sticker)
   ======================================================================= */

.btn-back-home {
  background: var(--hy-forest) !important;
  box-shadow: var(--hy-shadow-mid) !important;
}

.btn-back-home:hover {
  background: var(--hy-forest-dark) !important;
}

/* =======================================================================
   SCROLL-REVEAL (class toggled by header.twig's IntersectionObserver)
   ======================================================================= */

.hy-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--hy-ease), transform 0.7s var(--hy-ease);
}

.hy-reveal.hy-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =======================================================================
   MOTION-SAFE / ACCESSIBILITY
   ======================================================================= */

#common-home a:focus-visible,
#common-home button:focus-visible,
.footer-fancy a:focus-visible {
  outline: 2px solid var(--hy-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #common-home *,
  .footer-fancy * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =======================================================================
   OTHER PAGES WITH THEIR OWN PRE-BUILT DESIGN — these were styled in
   earlier, unrelated sessions with their own hardcoded palettes (a navy/
   pink "hyd-contact-*" system on the Contact page, a pink/coral "hyauth-*"
   inline <style> on the OTP login page — the latter recolored directly in
   auth.twig instead of here, see that file's comment). Retargeting via
   CSS custom-property overrides where the page already uses variables,
   rather than rewriting every rule, keeps this a small, low-risk diff.
   ======================================================================= */

.hyd-contact-page {
  --hyd-navy: var(--hy-forest);
  --hyd-ink: var(--hy-ink);
  --hyd-muted: var(--hy-ink-soft);
  --hyd-pink: var(--hy-gold);
  --hyd-pink-soft: var(--hy-gold-soft);
  --hyd-border: var(--hy-line);
  --hyd-surface: var(--hy-white);
  --hyd-shadow: var(--hy-shadow-mid);
  background: var(--hy-cream);
}

.hyd-contact-hero {
  background: var(--hy-forest-dark) !important;
}

.hyd-contact-title,
.hyd-contact-hero h1,
.hyd-contact-hero h2 {
  font-family: var(--hy-font-display) !important;
  color: var(--hy-cream) !important;
}

.hyd-contact-card-icon {
  background: var(--hy-gold-soft) !important;
  color: var(--hy-gold) !important;
}

/* Two more pre-existing dark-background hero bands with a heading inside
   (product compare page, generic information/CMS page hero) — same
   contrast risk as the contact page above: the global h1/h2/h3 color
   rule would otherwise force dark-on-dark text. Recolor to the palette
   and guarantee light text explicitly rather than relying on inheritance
   from a page-level "color: white" that the global heading rule beats. */
.compare-hero {
  background: linear-gradient(135deg, var(--hy-forest) 0%, var(--hy-forest-dark) 100%) !important;
}

.compare-hero h1 {
  font-family: var(--hy-font-display) !important;
  color: var(--hy-cream) !important;
}

.page-hero-section {
  background: linear-gradient(135deg, var(--hy-forest) 0%, var(--hy-forest-dark) 100%) !important;
}

.page-hero-section .page-title,
.page-hero-section h1 {
  font-family: var(--hy-font-display) !important;
  color: var(--hy-cream) !important;
}