/* ===========================================================
   ZELÝX — Brand Theme Overrides
   Loaded AFTER styles.css. Do not edit styles.css directly;
   keep all brand customization isolated here so template
   updates don't clobber it.

   Palette v2 — softer, more delicate direction (ivory/blush/gold),
   moving away from the heavier gold-on-black treatment of v1.
   Reference: Nuevaé-style soft skincare hero (airy, light, thin serif).
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  /* --- Zelýx palette v2 --- */
  --primary: #B8893E;              /* Metallic Gold — logo, buttons, borders */
  --third: #D3B384;                /* Champagne Gold — soft accents */

  --black: #171515;                /* Luxury Black — headings/text */
  --white: #ffffff;

  --bg: #F6F2EB;                   /* Soft Ivory — main background */
  --bg-2: #E3D9CB;                 /* Warm Cream — sections/cards */
  --bg-3-accent: #D9C8B3;          /* Champagne Salmon / Blush Champagne — accent bg */
  --bg-4: #171515;                 /* Luxury Black — dark bookend sections (topbar, footer) */
  --bg-6: #C1A26E;                 /* Topbar background — was Luxury Black #171515 */
  --bg-13: #F6F2EB;
  --bg-16: #FBF9F5;

  --text: #3D3833;                 /* body copy, softened black */
  --text-2: #B5A290;               /* Warm Taupe — secondary text */
  --text-3: #171515;               /* DEFAULT text = Luxury Black (site is light).
                                        Topbar/footer override this back to ivory locally. */
  --text-11: #D3B384;              /* Champagne Gold — soft accent text */
  --text-13: #8B6A45;              /* Antique Bronze — dark gold details */

  --line: #E3D9CB;                 /* Warm Cream–tinted divider */
  --line-2: #D9C8B3;               /* Blush Champagne */
  --line-6: #E3D9CB;

  /* Neutralize every other leftover template accent color (greens,
     purples, oranges, extra reds/maroons) so nothing off-palette can
     surface in a section we haven't customized yet. All mapped to
     brand-safe tones. */
  --bg-3: #E3D9CB;
  --bg-5: #E3D9CB;
  --bg-7: #F6F2EB;
  --bg-8: #D9C8B3;
  --bg-9: #F6F2EB;
  --bg-10: #8B6A45;
  --bg-11: #D9C8B3;
  --bg-12: #171515;
  --bg-14: #171515;                /* was maroon #521F24 — "About Zelýx" banner bg */
  --bg-15: #171515;
  --bg-17: #E3D9CB;

  /* Neutralize the template's leftover reds so nothing pink/red can
     leak through on badges, sale tags, form validation swatches, etc. */
  --error_600: #8B6A45;
  --error_700: #6E5334;
  --rose_600: #B8893E;
  --rose_800: #8B6A45;
  --critical: #8B6A45;

  --shadow: 0 0 24px rgba(23, 21, 21, 0.08);
}

/* --- Global light base ---
   The template paints every page body with .bg-black (var(--black)).
   Override at the body level only, so elements that deliberately keep
   the .bg-black utility class (footer) still render dark. */
body.bg-black {
  background: var(--bg) !important;
}

/* --- Hero: left-aligned layout inspired by Nuevaé — light, airy,
   product-forward. Since we don't have real product photography yet,
   the right side carries a simple gold line-art DNA helix (echoing
   the actual logo mark) instead of a stock photo. --- */
.tf-hero-banner-v4 {
  background: linear-gradient(120deg, #FBF9F5 0%, #F6F2EB 45%, #EFE6D6 100%);
}

/* --- Hero slider: centered layout, bottle photography as the focal
   point, 3 auto-rotating slides (fade transition). Built on the
   template's existing Swiper auto-init (.tf-swiper + data attrs), so
   no custom JS is needed. --- */
.zelyx-hero-slider-wrap {
  padding: 0;
}

.zelyx-hero-swiper {
  width: 100%;
  min-height: 520px; /* reduced further from 700px (was 1050px originally) */
}

.zelyx-hero-swiper .swiper-slide {
  height: auto;
}

.zelyx-hero-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 1800px;
  margin: 0 auto;
  padding: 32px 24px 32px; /* reduced further from 60px 24px 48px (was 100px 24px 64px originally) */
}

.zelyx-hero-slide-text {
  max-width: 1300px;
}

.zelyx-hero-slide-text .hero__desc {
  margin-top: 16px;
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
  font-size: 24px;
}

.zelyx-hero-slide h1.font-instrument_serif {
  font-size: clamp(28px, 3.5vw, 52px) !important; /* reduced further from clamp(36px, 5vw, 72px) (was clamp(48px, 7vw, 120px) originally) */
  line-height: 1.15;
  margin-top: 6px;
}

.zelyx-hero-slide-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px; /* increased from 20px, text was overlapping the bottle photo */
  min-height: 180px;
  width: 100%;
}

.zelyx-hero-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211,179,132,0.35) 0%, rgba(211,179,132,0) 70%);
  filter: blur(4px);
}

.zelyx-hero-slide-cta {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.zelyx-hero-btn.tf-btn {
  display: inline-flex;
  height: 52px;
  padding: 0 32px;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #D3B384 0%, #B8893E 100%) !important;
  color: var(--white) !important;
  border: none;
  box-shadow: 0 8px 24px rgba(184, 137, 62, 0.28);
}
.zelyx-hero-btn.tf-btn:hover {
  background: linear-gradient(135deg, #B8893E 0%, #8B6A45 100%) !important;
}

.zelyx-hero-trust {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.zelyx-hero-stars {
  color: var(--primary);
  font-size: 15px;
  letter-spacing: 2px;
}
.zelyx-hero-trust-text {
  font-family: "Playfair Display", serif;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--text-2);
  text-transform: uppercase;
}

/* Slide progress dots */
.zelyx-hero-dots.tf-sw-pagination {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.zelyx-hero-dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-2);
  opacity: 0.4;
  transition: all 0.3s ease;
}
.zelyx-hero-dots .swiper-pagination-bullet-active {
  opacity: 1;
  width: 22px;
  border-radius: 4px;
  background: var(--primary);
}

/* --- 3D bottle photography: real product photo, gentle 3D tilt
   (a full 360° spin would flip the photo backwards, so this reads as
   a premium "showcase sway" instead). Reused across all 3 slides in
   different arrangements for visual rhythm. --- */
.zelyx-bottle-scene {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  perspective: 1400px;
}

.zelyx-bottle {
  perspective: 1400px;
  position: relative;
}

/* Moving shadow beneath the bottle — shrinks/shifts in sync with the
   tilt, selling the illusion that the object is actually turning in
   space rather than just a flat photo swaying. */
.zelyx-bottle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 70%;
  height: 14px;
  background: radial-gradient(ellipse, rgba(23,21,21,0.28) 0%, rgba(23,21,21,0) 75%);
  transform: translateX(-50%);
  animation: zelyx-bottle-shadow 6s ease-in-out infinite;
  z-index: -1;
}
.zelyx-bottle-2::after { animation-duration: 7s; animation-delay: 0.4s; }
.zelyx-bottle-3::after { animation-duration: 6.5s; animation-delay: 0.8s; }

@keyframes zelyx-bottle-shadow {
  0%, 100% { transform: translateX(-50%) scaleX(0.85) translateX(-8px); opacity: 0.7; }
  50%      { transform: translateX(-50%) scaleX(1.05) translateX(8px); opacity: 1; }
}

.zelyx-bottle-spin {
  transform-style: preserve-3d;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(23,21,21,0.18);
  animation: zelyx-bottle-tilt 6s ease-in-out infinite;
  position: relative;
}
.zelyx-bottle-2 .zelyx-bottle-spin { animation-duration: 7s; animation-delay: 0.4s; }
.zelyx-bottle-3 .zelyx-bottle-spin { animation-duration: 6.5s; animation-delay: 0.8s; }

.zelyx-bottle-spin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Light sweep — a diagonal highlight that slides across the glass in
   sync with the tilt, like a reflection catching the light as the
   bottle turns. */
.zelyx-bottle-spin::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-15deg);
  animation: zelyx-bottle-shine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.zelyx-bottle-2 .zelyx-bottle-spin::before { animation-duration: 7s; animation-delay: 0.4s; }
.zelyx-bottle-3 .zelyx-bottle-spin::before { animation-duration: 6.5s; animation-delay: 0.8s; }

@keyframes zelyx-bottle-shine {
  0%, 100% { left: -60%; }
  50%      { left: 120%; }
}

@keyframes zelyx-bottle-tilt {
  0%, 100% { transform: rotateY(-18deg) rotateX(3deg); }
  50%      { transform: rotateY(18deg) rotateX(-3deg); }
}

.zelyx-bottle-1 { transform: translateY(0); }
.zelyx-bottle-1 .zelyx-bottle-spin { width: 160px; height: 203px; } /* reduced from 250x316 */

.zelyx-bottle-2 { transform: translateY(-24px); z-index: 2; }
.zelyx-bottle-2 .zelyx-bottle-spin { width: 185px; height: 236px; } /* reduced from 290x370 */

.zelyx-bottle-3 { transform: translateY(10px); }
.zelyx-bottle-3 .zelyx-bottle-spin { width: 145px; height: 184px; } /* reduced from 225x286 */
/* Slide 2: single large hero bottle */
.zelyx-bottle-scene-single .zelyx-bottle-solo .zelyx-bottle-spin {
  width: 200px;   /* reduced further from 300px (was 480px originally) */
  height: 254px;  /* proportion kept */
  animation-duration: 7s;
}

/* Slide 3: pair arrangement */
.zelyx-bottle-scene-pair .zelyx-bottle-1 .zelyx-bottle-spin { width: 175px; height: 224px; } /* reduced from 280x358 */
.zelyx-bottle-scene-pair .zelyx-bottle-2 { transform: translateY(-16px); }
.zelyx-bottle-scene-pair .zelyx-bottle-2 .zelyx-bottle-spin { width: 195px; height: 249px; animation-duration: 7.5s; } /* reduced from 310x396 */

@media (max-width: 991px) {
  .zelyx-hero-swiper { min-height: 640px; }
  .zelyx-hero-slide { padding: 100px 20px 56px; }
  .zelyx-bottle-scene {
    gap: 12px;
    transform: scale(0.72);
  }
}

.tf-hero-banner-v4 .hero__tag,
.section-science-2 .mini-title {
  background: linear-gradient(90deg, #8B6A45 0%, #F0D9B0 45%, #D3B384 55%, #8B6A45 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text-13);
  animation: zelyx-shimmer 4s linear infinite;
}

@keyframes zelyx-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.tf-hero-banner-v4 h1.font-instrument_serif,
.tf-hero-banner-v4 .hero__desc {
  color: var(--black) !important;
}

/* Thin gold signature rule under the hero eyebrow label */
.tf-hero-banner-v4 .hero__tag {
  position: relative;
  padding-bottom: 2px;
  line-height: 1;
  display: inline-block;
}
.tf-hero-banner-v4 .hero__tag::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #B8893E, transparent);
}
@media (max-width: 991px) {
  .tf-hero-banner-v4 .hero__tag::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* --- Header layout: logo fixed left, nav + icons grouped toward the
   right, nothing wraps. Replaces the template's 3-column grid which
   put the logo in a narrow center column and let long nav labels
   ("PEPTIDE THERAPY", "HOW IT WORKS") wrap onto multiple lines. --- */
.zelyx-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 70px; /* reduced from 140px */
  padding: 10px 0; /* reduced from 20px 0 */
}

.zelyx-header-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.zelyx-header-nav {
  display: flex;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.zelyx-header-nav .box-navigation {
  display: flex !important;
  min-width: 0;
}

.zelyx-header-nav .box-nav-menu {
  flex-wrap: nowrap;
  gap: 14px;
  white-space: nowrap;
}

.zelyx-header-nav .item-link .text {
  white-space: nowrap;
  font-size: 16px; /* reduced from 34px — was overflowing and cutting off "Weight Loss" */
  letter-spacing: 0.03em;
}

.zelyx-header-icons {
  flex-shrink: 0;
}

.zelyx-header-icons .nav-icon-list {
  gap: 16px;
}

.zelyx-header-icons .nav-icon-item .text {
  font-family: "Playfair Display", serif; /* matches nav menu font */
  font-size: 16px; /* matches nav menu size, was 22px */
  letter-spacing: 0.03em;
}

/* Start Consultation now sits on its own row, centered below the nav */
.zelyx-header-cta-row {
  display: flex;
  justify-content: center;
  padding: 14px 0 18px;
}

@media (max-width: 1280px) {
  .zelyx-header-nav .box-nav-menu {
    gap: 14px;
  }
  .zelyx-header-nav .item-link .text {
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .zelyx-header-nav {
    display: none;
  }
}
.tf-header .box-navigation.style-light-v1 .item-link,
.tf-header .box-navigation.style-light-v1 .item-link .icon,
.tf-header .nav-icon-item,
.tf-header .box-btn-open-menu .icon {
  color: var(--black) !important;
}
.tf-header .box-navigation.style-light-v1 .item-link::before {
  background: var(--black) !important;
}
.tf-header .zelyx-logo-text {
  color: var(--black) !important;
}

/* Header "Start Consultation" CTA — soft metallic gold, no harsh shine */
.zelyx-header-cta-btn.tf-btn.btn-fill {
  background: linear-gradient(135deg, #D3B384 0%, #B8893E 100%) !important;
  color: var(--white) !important;
  border: none;
  border-radius: 8px !important;
}
.zelyx-header-cta-btn.tf-btn.btn-fill:hover {
  background: linear-gradient(135deg, #B8893E 0%, #8B6A45 100%) !important;
}

/* --- Topbar: intentional dark bookend strip (Luxury Black), text forced
   back to ivory. --- */
/* --- Topbar: removed per request (was the black/gold bar with social
   icons + rotating messages at the very top of the page). --- */
.tf-topbar.bg-main-6 {
  display: none !important;
}

/* --- Sticky header: the template turns this solid black once you
   scroll down (a totally different element from the topbar above).
   Override it to match the site's cream background instead. --- */
header.header-sticky.scr-black {
  background: #E9CE9F !important;
}

/* Default (unscrolled) header state — the template makes this
   transparent, letting the hero show through and blending in.
   Give it the same gold as the sticky state so the header always
   reads as its own distinct bar. */
header.header-v5:not(.header-sticky) {
  background: #E9CE9F !important;
}

/* NOTE: we previously forced position:sticky here, but the theme has
   its own native JS-driven sticky/absolute header behavior (toggles
   the .header-abs / .header-sticky classes on scroll). Forcing sticky
   conflicted with that script and caused content to render underneath
   the header. Removed — the background-color rules above are enough
   to keep the header's look consistent in both of the theme's own
   states. */

/* The header is intentionally position:absolute (overlaps the hero
   by design, meant to be transparent). Since we made its background
   solid gold instead of transparent, it now visually covers the top
   of the hero content that sits underneath it. Push the hero down by
   the header's real height so nothing is hidden behind it. */
.tf-hero-banner-v4 {
  padding-top: 110px;
}

.tf-topbar .cl-text-3,
.tf-topbar .topbar-center,
.tf-topbar .tf-dropdown-select.color-text-3 > .dropdown-toggle {
  color: var(--black) !important;
}

/* --- Footer: intentional dark bookend (still .bg-black) --- */
.tf-footer.bg-black .cl-text-3,
.tf-footer.bg-black .cl-text-3_64 {
  color: var(--bg) !important;
}

/* Newsletter form inside the dark footer — the <input> and
   <button> here don't carry the .cl-text-3 class, so the rule
   above doesn't reach them; they were rendering with the theme's
   default dark text on the black background (invisible). Force
   ivory/white explicitly. */
.tf-footer.bg-black .form-subcribe input {
  color: #ffffff !important;
}
.tf-footer.bg-black .form-subcribe input::placeholder {
  color: #ffffff !important;
  opacity: 0.85;
}
.tf-footer.bg-black .form-subcribe .icon-Envelope {
  color: #ffffff !important;
}
.tf-footer.bg-black .form-subcribe .btn-action {
  color: #ffffff !important;
  border-color: #ffffff !important;
}
.tf-footer.bg-black .form-subcribe .btn-action .icon-Send {
  color: #ffffff !important;
}

/* --- "About Zelýx" banner: also an intentional dark section
   (--bg-14), so its text needs to stay ivory, not flip to ink. --- */
.section-banner-about .cl-text-3 {
  color: var(--bg) !important;
}
.section-banner-about .eyebrow-label .br-dot {
  background: var(--primary) !important;
}

/* Slim gold hairline across the very top — delicate, not a thick metallic
   bar this time */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8B6A45 0%, #D3B384 50%, #8B6A45 100%);
  z-index: 9999;
}

/* --- Typography --- */
html,
body {
  font-family: "Lora", serif;
  background: var(--bg);
  color: var(--text);
  max-width: 100%;
  overflow-x: hidden; /* Safari fix: prevents a blank strip on the right
                          caused by elements using 100vw, which in Safari
                          doesn't account for the scrollbar width */
}

.tf-header .box-nav-menu > .menu-item > .item-link .text,
.hero__tag,
.text-note,
.mini-title,
.tf-btn,
.nav-icon-item .text,
.topbar-center,
.zelyx-eyebrow {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.06em;
}

.tf-header .box-nav-menu > .menu-item > .item-link .text {
  font-size: 16px; /* reduced from 28px, matches header nav fix */
}

/* --- Compliance disclosure strip --- */
.zelyx-disclosure {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
  text-align: center;
}

.zelyx-disclosure p {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 1040px;
  margin-inline: auto;
}

/* --- Logo wordmark (temporary text logo, pending final SVG) --- */
.zelyx-logo-text {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 64px;
  letter-spacing: 0.02em;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
}

/* Logo wordmark accent color */
.zelyx-logo-text .accent {
  color: var(--primary);
  font-style: italic;
}

/* Logo image (replaces text wordmark) */
.zelyx-logo-image {
  display: flex;
  align-items: center;
}
.zelyx-logo-image img {
  height: 60px; /* reduced from 110px, to match shorter header */
  width: auto;
  display: block;
}

/* Tighten the gap between the products section and the video banner
   below it — was 128px + 80px combined, felt like a lot of empty
   space. */
.zelyx-tight-bottom {
  padding-bottom: 0px !important;
}
.zelyx-tight-top {
  padding-top: 0px !important;
}

/* "Research Articles" / other stroke buttons — solid gold fill,
   matching the "Browse Our Products" button, gets brighter/more
   golden on hover instead of turning solid black. */
.zelyx-glow-btn.tf-btn.btn-stroke {
  border: none;
  border-radius: 8px !important;
  color: var(--white) !important;
  background: linear-gradient(135deg, #D3B384 0%, #B8893E 100%) !important;
  box-shadow: 0 8px 24px rgba(184, 137, 62, 0.28);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.zelyx-glow-btn.tf-btn.btn-stroke:hover {
  background: linear-gradient(135deg, #E7CBA0 0%, #D3B384 100%) !important;
  color: var(--white) !important;
  box-shadow: 0 8px 28px rgba(184, 137, 62, 0.5);
}

/* Science section image — moved out of the inline heading, now sits
   centered below the full sentence. */
.zelyx-science-image {
  display: flex;
  justify-content: center;
  margin-top: -80px;
  margin-bottom: 80px;
}
.zelyx-science-image img {
  border-radius: 8px;
}

/* Discover by Category images (Rosaline template's .section-banner-v2) */
.section-banner-v2 { padding: 40px 0 !important; }
.section-banner-v2 img { max-width: 100%; height: auto; max-height: 340px; object-fit: cover; }

/* ===========================================================
   WooCommerce — Shop / Category page styling
   Brings the default WooCommerce archive (product-category,
   shop) pages in line with the Zelýx ivory/gold aesthetic.
   =========================================================== */

.woocommerce,
.woocommerce-page {
  background: var(--bg);
  color: var(--text);
  font-family: "Lora", serif;
}

/* Page title ("HEALING", "SHOP", etc.) */
.woocommerce-products-header__title.page-title,
.woocommerce-page .page-title {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: var(--black);
  letter-spacing: 0.02em;
  font-size: clamp(32px, 4vw, 48px);
}

/* Breadcrumb ("Home / Healing") */
.woocommerce-breadcrumb {
  font-family: "Playfair Display", serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 24px;
}
.woocommerce-breadcrumb a {
  color: var(--text-13);
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

/* "Showing all X results" + sorting dropdown */
.woocommerce-result-count {
  font-family: "Lora", serif;
  color: var(--text-2);
  font-size: 14px;
}
.woocommerce-ordering select {
  font-family: "Playfair Display", serif;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
  padding: 8px 12px;
}

/* Product grid */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 24px;
}
.woocommerce ul.products li.product {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(23, 21, 21, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  text-align: center;
  padding-bottom: 20px;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 12px 32px rgba(184, 137, 62, 0.18);
  transform: translateY(-4px);
}

/* Product image */
.woocommerce ul.products li.product a img {
  border-radius: 0;
  margin-bottom: 16px;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "Playfair Display", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  padding: 0 16px;
  margin-bottom: 6px;
}

/* Price */
.woocommerce ul.products li.product .price {
  font-family: "Lora", serif;
  color: var(--text-13);
  font-size: 16px;
}
.woocommerce ul.products li.product .price del {
  color: var(--text-2);
  opacity: 0.7;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
}

/* Sale badge */
.woocommerce span.onsale {
  font-family: "Playfair Display", serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #D3B384 0%, #B8893E 100%);
  color: var(--white);
  border-radius: 6px;
  min-height: unset;
  min-width: unset;
  padding: 6px 14px;
  top: 16px;
  right: 16px;
  left: auto;
  box-shadow: 0 4px 12px rgba(184, 137, 62, 0.3);
}

/* Add to cart button */
.woocommerce ul.products li.product .button {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
  border: none;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #D3B384 0%, #B8893E 100%) !important;
  color: var(--white) !important;
  padding: 12px 20px;
  margin: 8px 16px 0;
  width: calc(100% - 32px);
  box-shadow: 0 8px 24px rgba(184, 137, 62, 0.22);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.woocommerce ul.products li.product .button:hover {
  background: linear-gradient(135deg, #B8893E 0%, #8B6A45 100%) !important;
  box-shadow: 0 8px 28px rgba(184, 137, 62, 0.4);
}

/* Single product page — buttons, tabs, price */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.03em;
  color: var(--black);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--primary);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--text-13);
  font-family: "Lora", serif;
}
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #D3B384 0%, #B8893E 100%) !important;
  color: var(--white) !important;
  box-shadow: 0 8px 24px rgba(184, 137, 62, 0.22);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: linear-gradient(135deg, #B8893E 0%, #8B6A45 100%) !important;
  box-shadow: 0 8px 28px rgba(184, 137, 62, 0.4);
}

/* Cart / Checkout tables */
.woocommerce table.shop_table {
  border: 1px solid var(--line-2);
  font-family: "Lora", serif;
}
.woocommerce table.shop_table th {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.03em;
  background: var(--bg-2);
  color: var(--black);
}

/* ===========================================================
   WooCommerce BLOCKS — Shop / Category page styling
   Twenty Twenty-Five is a block theme; product archives here
   are rendered with the Product Collection block, confirmed via
   inspector to use these exact classes (WordPress core block
   markup, not classic WooCommerce template markup).
   =========================================================== */

/* Product title */
h2.wp-block-post-title {
  font-family: "Playfair Display", serif !important;
  font-weight: 600 !important;
  color: var(--black) !important;
  font-size: 18px !important;
}

/* Price wrapper */
div.wp-block-woocommerce-product-price,
div.wp-block-woocommerce-product-price .price {
  font-family: "Lora", serif !important;
  color: var(--text-13) !important;
}
div.wp-block-woocommerce-product-price del {
  color: var(--text-2) !important;
  opacity: 0.7;
}
div.wp-block-woocommerce-product-price ins {
  text-decoration: none !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* Add to cart button */
div.wp-block-woocommerce-product-button .wp-block-button__link.wp-element-button {
  font-family: "Playfair Display", serif !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #D3B384 0%, #B8893E 100%) !important;
  color: var(--white) !important;
  box-shadow: 0 8px 24px rgba(184, 137, 62, 0.22);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
div.wp-block-woocommerce-product-button .wp-block-button__link.wp-element-button:hover {
  background: linear-gradient(135deg, #B8893E 0%, #8B6A45 100%) !important;
  box-shadow: 0 8px 28px rgba(184, 137, 62, 0.4);
}

/* Sale badge (if shown) */
.wc-block-components-product-sale-badge {
  font-family: "Playfair Display", serif !important;
  font-size: 12px !important;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #D3B384 0%, #B8893E 100%) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  box-shadow: 0 4px 12px rgba(184, 137, 62, 0.3);
}

/* Product card container (grid item) */
li.wc-block-product,
.wp-block-woocommerce-product-template > li {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(23, 21, 21, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  padding-bottom: 12px;
}
li.wc-block-product:hover,
.wp-block-woocommerce-product-template > li:hover {
  box-shadow: 0 12px 32px rgba(184, 137, 62, 0.18);
  transform: translateY(-4px);
}

/* Page title / breadcrumb, block-theme archive header */
.wp-block-post-title,
.woocommerce-products-header__title {
  font-family: "Playfair Display", serif !important;
  font-weight: 600 !important;
  color: var(--black) !important;
}
/* Remove all divider lines inside the /Preview/ footer (column
   separators + bottom row separators), per request — keep it
   solid black without the thin gray dividing lines. */
.tf-footer.bg-black .br-line {
  display: none !important;
}
/* Make the gold underline on the newsletter email field always
   visible, not just on :focus (was invisible until clicked). */
.tf-footer.bg-black .form-subcribe fieldset {
  border-bottom: 1px solid #B8893E !important;
}
/* Tighten spacing across the whole hero text block (eyebrow label,
   headline, description) by taking direct control via flexbox gap,
   instead of fighting individual margins that may be overridden
   elsewhere with higher specificity. */
.zelyx-hero-slide-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zelyx-hero-slide-text .hero__tag {
  margin-bottom: 0 !important;
}
.zelyx-hero-slide-text h1.font-instrument_serif {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}