/* ============================================================
   LUXE — premium lingerie design layer
   Loaded AFTER bootstrap.min.css / styles.css / app-overrides.css.
   Re-skins the themesflat "Modave" theme via its own CSS variables
   plus targeted overrides. Palette: ivory / blush / rose / nude /
   gold with noir accents. Fonts: Cormorant Garamond + Jost.
   ============================================================ */

/* ------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------ */
:root {
  --luxe-ivory: #fffcfa;
  --luxe-blush-50: #fbf1ef;
  --luxe-blush-100: #f7e4e1;
  --luxe-rose-200: #f2cdd0;
  --luxe-rose-300: #e8b4b8;
  --luxe-rose-500: #c97c86;
  --luxe-rose-600: #af5f6c;
  --luxe-nude: #ead9cd;
  --luxe-beige: #d9c4b5;
  --luxe-gold: #c9a268;
  --luxe-gold-soft: #e6d3b3;
  --luxe-ink: #3a3134;
  --luxe-ink-soft: #7d6f74;
  --luxe-noir: #1c1719;

  --luxe-font-display: 'Cormorant Garamond', 'Marcellus', serif;
  --luxe-font-body: 'Jost', 'Albert Sans', sans-serif;

  --luxe-radius-sm: 8px;
  --luxe-radius: 16px;
  --luxe-radius-lg: 24px;
  --luxe-radius-pill: 999px;

  --luxe-shadow-sm: 0 2px 10px rgba(175, 95, 108, 0.07);
  --luxe-shadow: 0 8px 28px rgba(175, 95, 108, 0.12);
  --luxe-shadow-lg: 0 18px 48px rgba(175, 95, 108, 0.16);

  --luxe-space-section: clamp(56px, 8vw, 104px);
  --luxe-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Re-skin the theme's own variables --- */
  --main: var(--luxe-noir);
  --secondary: #6d5f64;
  --secondary-2: #a8969c;
  --surface: var(--luxe-blush-50);
  --line: #f0e0dc;
  --backdrop: rgba(28, 23, 25, 0.32);
  --gradient: linear-gradient(87deg, #fbf1ef 3.59%, #f8f1ea 95.02%);
  --main-rgba-1: rgba(175, 95, 108, 0.16);
  --main-rgba-2: rgba(175, 95, 108, 0.14);
  --shadow1: var(--luxe-shadow);
  --shadow2: var(--luxe-shadow-lg);
  --critical: #c94f4f;
  --primary: var(--luxe-rose-500);
  --rgba-primary: rgba(201, 124, 134, 0.1);
  --bg-scrollbar-thumb: var(--luxe-rose-300);
  --bg-scrollbar-track: var(--luxe-blush-50);
}

/* ------------------------------------------------------------
   2. Base — typography & canvas
   ------------------------------------------------------------ */
body {
  font-family: var(--luxe-font-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--luxe-ink);
  background-color: var(--luxe-ivory);
}

h1, h2, h3, h4, .heading-section .heading, .heading-section-2 .heading {
  font-family: var(--luxe-font-display);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--luxe-noir);
}

h5, h6 {
  font-family: var(--luxe-font-body);
  font-weight: 500;
  color: var(--luxe-noir);
}

body a {
  transition: color 0.25s var(--luxe-ease);
}

body a:hover {
  color: var(--luxe-rose-600);
}

::selection {
  background: var(--luxe-rose-300);
  color: var(--luxe-noir);
}

/* Section rhythm */
body .flat-spacing {
  padding-top: var(--luxe-space-section);
  padding-bottom: var(--luxe-space-section);
}

/* Section headings: elegant eyebrow + serif heading */
.heading-section .heading,
.heading-section-2 .heading {
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.2;
}

.heading-section .subheading,
.heading-section-2 .subheading {
  font-family: var(--luxe-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--luxe-rose-500);
}

/* ------------------------------------------------------------
   3. Luxe utilities
   ------------------------------------------------------------ */
.luxe-serif {
  font-family: var(--luxe-font-display) !important;
}

.luxe-eyebrow {
  display: inline-block;
  font-family: var(--luxe-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--luxe-rose-500);
  margin-bottom: 10px;
}

.luxe-divider {
  width: 56px;
  height: 1px;
  background: var(--luxe-gold);
  border: 0;
  opacity: 1;
  margin: 18px auto;
}

.luxe-divider.start {
  margin-left: 0;
}

.luxe-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--luxe-radius);
  box-shadow: var(--luxe-shadow-sm);
  transition: box-shadow 0.35s var(--luxe-ease), transform 0.35s var(--luxe-ease);
}

.luxe-card:hover {
  box-shadow: var(--luxe-shadow);
}

.luxe-surface {
  background: var(--luxe-blush-50);
  border-radius: var(--luxe-radius-lg);
}

.luxe-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--luxe-radius-pill);
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  color: var(--luxe-ink);
  cursor: pointer;
  transition: all 0.25s var(--luxe-ease);
}

.luxe-chip:hover {
  border-color: var(--luxe-rose-300);
  color: var(--luxe-rose-600);
}

.luxe-chip.active {
  background: var(--luxe-noir);
  border-color: var(--luxe-noir);
  color: #fff;
}

.luxe-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: var(--luxe-radius-pill);
  border: 1px solid var(--luxe-noir);
  background: transparent;
  color: var(--luxe-noir);
  font-family: var(--luxe-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--luxe-ease);
}

.luxe-btn-ghost:hover {
  background: var(--luxe-noir);
  color: #fff;
  transform: translateY(-1px);
}

.luxe-pill-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--luxe-radius-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.luxe-status {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--luxe-radius-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--luxe-blush-50);
  color: var(--luxe-ink);
  text-transform: capitalize;
}

.luxe-status--success { background: #e8f3e8; color: #3d7a3d; }
.luxe-status--warning { background: #faf0dc; color: #9a7226; }
.luxe-status--danger  { background: #f9e3e3; color: #b04a4a; }
.luxe-status--info    { background: var(--luxe-blush-100); color: var(--luxe-rose-600); }

/* Empty states */
.luxe-empty {
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 24px;
}

.luxe-empty .luxe-empty-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--luxe-blush-100), var(--luxe-blush-50));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--luxe-rose-500);
  box-shadow: var(--luxe-shadow-sm);
}

.luxe-empty h3 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 8px;
}

.luxe-empty p {
  color: var(--secondary);
  max-width: 420px;
  margin: 0 auto 24px;
}

/* ------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------ */
body .tf-btn {
  font-family: var(--luxe-font-body);
  letter-spacing: 0.08em;
  border-radius: var(--luxe-radius-pill);
  transition: all 0.3s var(--luxe-ease);
}

body .tf-btn.btn-fill {
  background-color: var(--luxe-noir);
  border-color: var(--luxe-noir);
  color: #fff;
}

body .tf-btn.btn-fill:hover {
  background-color: var(--luxe-rose-600);
  border-color: var(--luxe-rose-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--luxe-shadow);
}

body .tf-btn.btn-white {
  border-radius: var(--luxe-radius-pill);
}

body .tf-btn.btn-white:hover {
  background: var(--luxe-rose-600);
  border-color: var(--luxe-rose-600);
  color: #fff;
}

/* The theme ships no .btn-outline — define it as an elegant ghost
   button so every `tf-btn btn-outline` in the app stops falling back
   to the default noir fill. */
body .tf-btn.btn-outline {
  background: transparent;
  border: 1px solid var(--luxe-noir);
  color: var(--luxe-noir);
}

body .tf-btn.btn-outline:hover {
  background: var(--luxe-noir);
  border-color: var(--luxe-noir);
  color: #fff;
}

/* "Remove" text-buttons (mini cart): strip the global <button> pill */
body .tf-btn-remove {
  background: transparent !important;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  color: var(--luxe-rose-600);
  text-decoration: underline;
}

body .tf-btn.btn-line {
  border-radius: 0;
}

body .btn-line::after,
body .tf-btn.btn-line::after {
  background: var(--luxe-gold);
}

body .btn-line:hover {
  color: var(--luxe-rose-600);
}

/* Card "Add to cart" reveal bar */
body .card-product .btn-main-product {
  background: rgba(255, 252, 250, 0.94);
  color: var(--luxe-noir);
  font-family: var(--luxe-font-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  border-radius: var(--luxe-radius-pill);
  backdrop-filter: blur(6px);
  transition: all 0.3s var(--luxe-ease);
}

body .card-product .btn-main-product:hover {
  background: var(--luxe-rose-600);
  color: #fff;
}

/* Icon action buttons on cards */
body .card-product .box-icon {
  border-radius: 50%;
  background: rgba(255, 252, 250, 0.94);
  color: var(--luxe-noir);
  backdrop-filter: blur(6px);
  transition: all 0.3s var(--luxe-ease);
}

body .card-product .box-icon:hover,
body .card-product .box-icon.active {
  background: var(--luxe-rose-500);
  color: #fff;
}

/* ------------------------------------------------------------
   5. Product cards
   ------------------------------------------------------------ */
body .card-product .card-product-wrapper {
  border-radius: var(--luxe-radius);
  overflow: hidden;
  background: var(--luxe-blush-50);
}

body .card-product .card-product-wrapper .img-product,
body .card-product .card-product-wrapper .img-hover {
  transition: opacity 0.5s var(--luxe-ease), transform 0.7s var(--luxe-ease);
}

body .card-product:hover .card-product-wrapper .img-product,
body .card-product:hover .card-product-wrapper .img-hover {
  transform: scale(1.06);
}

body .card-product .card-product-info {
  padding-top: 14px;
}

body .card-product .card-product-info .title {
  font-family: var(--luxe-font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
}

body .card-product .price {
  font-family: var(--luxe-font-body);
  font-weight: 500;
  color: var(--luxe-noir);
}

body .card-product .price .old-price {
  color: var(--secondary-2);
  text-decoration: line-through;
  font-weight: 400;
  margin-right: 8px;
}

body .card-product .price .new-price {
  color: var(--luxe-rose-600);
}

/* Sale / New badges (high specificity to beat the theme's --critical red) */
body .on-sale-item,
body .card-product .card-product-wrapper .on-sale-wrap .on-sale-item {
  background-color: var(--luxe-rose-500);
  color: #fff;
  border-radius: var(--luxe-radius-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
}

/* ------------------------------------------------------------
   6. Header & navigation
   ------------------------------------------------------------ */
body .tf-topbar {
  background-color: var(--luxe-noir) !important;
}

body .tf-topbar .topbar-left a,
body .tf-topbar p {
  color: #f7e4e1;
  letter-spacing: 0.06em;
}

#header {
  background: rgba(255, 252, 250, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* Uploaded logo images: cap height so wide/tall marks sit nicely */
body .logo-header img.logo {
  max-height: 56px;
  width: auto;
}

body .footer-logo img.logo {
  max-height: 48px;
  width: auto;
}

@media (max-width: 575px) {
  body .logo-header img.logo {
    max-height: 42px;
  }
}

.store-logo-text {
  font-family: var(--luxe-font-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 1.6rem !important;
  color: var(--luxe-noir) !important;
}

body .nav-menu .menu-item > a,
body #header .box-nav-ul .menu-item > a {
  font-family: var(--luxe-font-body);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
}

/* Rose underline on nav hover.
   The theme's .item-link::after is an invisible hover-bridge for
   dropdowns — leave it alone and draw the underline with ::before. */
body #header .box-nav-ul .menu-item > a.item-link {
  position: relative;
}

body #header .box-nav-ul .menu-item > a.item-link::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--luxe-rose-500);
  transition: width 0.3s var(--luxe-ease), left 0.3s var(--luxe-ease);
}

body #header .box-nav-ul .menu-item:hover > a.item-link::before,
body #header .box-nav-ul .menu-item.active > a.item-link::before {
  width: 100%;
  left: 0;
}

/* Header icon buttons: neutralize the theme's global <button> pill
   (noir background, white text, 15px/32px padding) so the search,
   cart, and hamburger buttons render as plain dark icons. */
body .nav-icon .nav-icon-item,
body #header .mobile-menu {
  background: transparent !important;
  color: var(--luxe-noir);
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
}

body .nav-icon .nav-icon-item:hover {
  color: var(--luxe-rose-600);
}

/* Cart / wishlist count badge */
body .nav-icon .count-box {
  background: var(--luxe-rose-500);
  box-shadow: 0 0 0 2px var(--luxe-ivory);
}

/* Announcement bar */
body .announcement-bar,
body .announcement-marquee {
  background-color: var(--luxe-noir);
}

body .announcement-marquee .marquee-child-item p,
body .announcement-bar p {
  color: #f7e4e1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
}

body .announcement-marquee .marquee-child-item .icon {
  color: var(--luxe-gold);
}

/* ------------------------------------------------------------
   7. Forms
   ------------------------------------------------------------ */
body input[type='text'],
body input[type='email'],
body input[type='password'],
body input[type='number'],
body input[type='tel'],
body input[type='search'],
body textarea,
body select,
body .form-control,
body .form-select {
  border-radius: var(--luxe-radius-sm);
  border-color: var(--line);
  font-family: var(--luxe-font-body);
  transition: border-color 0.25s var(--luxe-ease), box-shadow 0.25s var(--luxe-ease);
}

body input[type='text']:focus,
body input[type='email']:focus,
body input[type='password']:focus,
body input[type='number']:focus,
body input[type='tel']:focus,
body input[type='search']:focus,
body textarea:focus,
body select:focus,
body .form-control:focus,
body .form-select:focus {
  border-color: var(--luxe-rose-300);
  box-shadow: 0 0 0 4px rgba(232, 180, 184, 0.22);
  outline: none;
}

body .form-check-input:checked {
  background-color: var(--luxe-rose-500);
  border-color: var(--luxe-rose-500);
}

/* ------------------------------------------------------------
   8. Swatches & PDP details
   ------------------------------------------------------------ */
body .swatch-color {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid transparent;
  outline: 1px solid var(--line);
  outline-offset: 2px;
  transition: outline-color 0.25s var(--luxe-ease), transform 0.25s var(--luxe-ease);
}

body .swatch-color:hover {
  transform: scale(1.08);
}

body .swatch-color.active {
  border-color: #fff;
  outline: 2px solid var(--luxe-rose-500);
}

body .swatch-size {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  background: #fff;
  color: var(--luxe-ink);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--luxe-radius-pill);
  border: 1px solid var(--line);
  font-family: var(--luxe-font-body);
  transition: all 0.25s var(--luxe-ease);
}

body .swatch-size:hover {
  border-color: var(--luxe-rose-500);
  color: var(--luxe-rose-600);
}

body .swatch-size.active {
  border-color: var(--luxe-noir);
  background: var(--luxe-noir);
  color: #fff;
}

body .product-gallery-thumb {
  border-radius: var(--luxe-radius-sm);
  overflow: hidden;
  transition: opacity 0.25s var(--luxe-ease), border-color 0.25s var(--luxe-ease);
}

body .product-gallery-thumb.active {
  border-color: var(--luxe-rose-500);
}

/* Main gallery image container */
.luxe-gallery-main {
  border-radius: var(--luxe-radius);
  overflow: hidden;
  background: var(--luxe-blush-50);
  position: relative;
}

.luxe-gallery-main img {
  transition: transform 0.4s var(--luxe-ease);
  will-change: transform;
  display: block;
  width: 100%;
}

/* Cursor-follow zoom only on hover-capable (non-touch) devices */
@media (hover: hover) and (pointer: fine) {
  .luxe-gallery-main.zooming img {
    transform: scale(1.9);
  }
}

/* Sticky purchase column on desktop PDP */
@media (min-width: 768px) {
  .luxe-sticky-info {
    position: sticky;
    top: 96px;
  }
}

/* Ratings */
body .icon-star,
body .rate-box .icon {
  color: var(--luxe-gold);
}

/* Close (✕) buttons rendered as <button>: strip the global pill */
body button.icon-close-popup,
body .modal .btn-close {
  background: transparent !important;
  color: var(--luxe-noir);
  padding: 0;
  border-radius: 0;
}

/* Search modal submit button: plain icon pinned inside the field */
body .modal-search .form-search {
  position: relative;
}

body .modal-search .form-search button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: var(--luxe-noir);
  padding: 0;
  border: 0;
}

body .modal-search .form-search button:hover {
  color: var(--luxe-rose-600);
}

/* ------------------------------------------------------------
   9. Modals, offcanvas, drawers
   ------------------------------------------------------------ */
body .modal-content {
  border-radius: var(--luxe-radius-lg);
  border: none;
  box-shadow: var(--luxe-shadow-lg);
  overflow: hidden;
}

body .modal-header {
  border-bottom: 1px solid var(--line);
}

body .offcanvas {
  box-shadow: var(--luxe-shadow-lg);
}

body .offcanvas-end {
  border-radius: var(--luxe-radius-lg) 0 0 var(--luxe-radius-lg);
}

body .offcanvas-start {
  border-radius: 0 var(--luxe-radius-lg) var(--luxe-radius-lg) 0;
}

body .modal-backdrop,
body .offcanvas-backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(3px);
}

/* ------------------------------------------------------------
   10. Skeletons
   ------------------------------------------------------------ */
.luxe-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--luxe-blush-50);
  border-radius: var(--luxe-radius-sm);
}

.luxe-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.65),
    transparent
  );
  animation: luxe-shimmer 1.6s infinite;
}

@keyframes luxe-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.luxe-skeleton--image {
  aspect-ratio: 3 / 4;
  border-radius: var(--luxe-radius);
}

.luxe-skeleton--text {
  height: 14px;
  margin-bottom: 8px;
}

.luxe-skeleton--line {
  height: 20px;
}

/* ------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------ */
body #footer,
body footer.footer {
  background-color: var(--luxe-blush-50);
  border-top: 1px solid var(--line);
}

body #footer .footer-heading,
body footer .footer-heading {
  font-family: var(--luxe-font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
}

body #footer .footer-menu-list a:hover,
body footer .footer-menu-list a:hover {
  color: var(--luxe-rose-600);
}

body #footer .footer-bottom,
body footer .footer-bottom {
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------
   12. Misc theme touch-ups
   ------------------------------------------------------------ */
body .bg-main {
  background-color: var(--luxe-noir) !important;
}

body .bg-surface {
  background-color: var(--luxe-blush-50) !important;
}

body .tf-icon-box .icon-box {
  color: var(--luxe-rose-500);
}

/* Iconbox medallion */
.luxe-medallion {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  background: var(--luxe-blush-100);
  color: var(--luxe-rose-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  transition: transform 0.3s var(--luxe-ease), background 0.3s var(--luxe-ease);
}

.tf-icon-box:hover .luxe-medallion {
  transform: translateY(-4px);
  background: var(--luxe-rose-200);
}

/* Pagination (reset the theme's global <button> pill styling) */
body .pagination .page-item .page-link,
body .wg-pagination .pagination-item {
  padding: 0;
  background: transparent;
  color: var(--luxe-ink);
  font-size: 14px;
  border-radius: 50%;
  font-family: var(--luxe-font-body);
  transition: all 0.25s var(--luxe-ease);
}

body .wg-pagination .pagination-item:hover {
  border-color: var(--luxe-rose-500);
  color: var(--luxe-rose-600);
}

body .pagination .page-item.active .page-link,
body .wg-pagination .pagination-item.active {
  background: var(--luxe-noir);
  border-color: var(--luxe-noir);
  color: #fff;
}

/* Shop grid/list view toggle (plain <button>s with no theme rule) */
body .tf-view-layout .btn-view {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--luxe-ink);
  border: 1px solid var(--line);
  border-radius: var(--luxe-radius-sm);
  font-size: 18px;
  transition: all 0.25s var(--luxe-ease);
}

body .tf-view-layout .btn-view:hover {
  border-color: var(--luxe-rose-500);
  color: var(--luxe-rose-600);
}

body .tf-view-layout .btn-view.active {
  background: var(--luxe-noir);
  border-color: var(--luxe-noir);
  color: #fff;
}

/* Swiper dots */
body .swiper-pagination-bullet {
  background: var(--luxe-rose-300);
  opacity: 0.5;
}

body .swiper-pagination-bullet-active,
body .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--luxe-rose-500);
  opacity: 1;
}

/* Breadcrumbs — the theme spreads .tf-breadcrumb-wrap children with
   space-between (it expects prev/next controls); keep ours inline */
body .breadcrumbs,
body .tf-breadcrumb {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body .tf-breadcrumb-wrap {
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

body .tf-breadcrumb .luxe-crumb .text {
  color: var(--secondary-2);
  font-size: 11px;
  letter-spacing: 0.16em;
  transition: color 0.25s var(--luxe-ease);
}

body .tf-breadcrumb .luxe-crumb a.text:hover {
  color: var(--luxe-rose-600);
}

body .tf-breadcrumb .luxe-crumb .luxe-crumb-current {
  color: var(--luxe-noir);
}

.luxe-crumb-sep {
  margin: 0 10px;
  color: var(--luxe-rose-300);
  font-size: 11px;
}

/* Free-shipping progress */
.luxe-progress {
  height: 6px;
  border-radius: var(--luxe-radius-pill);
  background: var(--luxe-blush-100);
  overflow: hidden;
}

.luxe-progress .luxe-progress-bar {
  height: 100%;
  border-radius: var(--luxe-radius-pill);
  background: linear-gradient(90deg, var(--luxe-rose-300), var(--luxe-rose-500));
  transition: width 0.6s var(--luxe-ease);
}

/* Accordion (FAQ) */
.luxe-accordion {
  border-top: 1px solid var(--line);
}

.luxe-accordion-item {
  border-bottom: 1px solid var(--line);
}

.luxe-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--luxe-font-display);
  font-size: 19px;
  color: var(--luxe-noir);
  transition: color 0.25s var(--luxe-ease);
}

.luxe-accordion-trigger:hover {
  color: var(--luxe-rose-600);
}

.luxe-accordion-trigger .luxe-accordion-icon {
  font-size: 14px;
  color: var(--luxe-rose-500);
  transition: transform 0.3s var(--luxe-ease);
}

.luxe-accordion-item.open .luxe-accordion-icon {
  transform: rotate(45deg);
}

.luxe-accordion-body {
  overflow: hidden;
}

.luxe-accordion-body p {
  padding: 0 4px 20px;
  color: var(--secondary);
  max-width: 720px;
}

/* Testimonial card */
.luxe-testimonial {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--luxe-radius-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--luxe-shadow-sm);
  height: 100%;
}

.luxe-testimonial .quote-mark {
  font-family: var(--luxe-font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--luxe-rose-300);
}

.luxe-testimonial blockquote {
  font-family: var(--luxe-font-display);
  font-size: clamp(17px, 1.6vw, 21px);
  font-style: italic;
  line-height: 1.55;
  color: var(--luxe-ink);
  margin: 8px 0 20px;
}

.luxe-testimonial .author {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--luxe-noir);
}

.luxe-testimonial .author small {
  display: block;
  margin-top: 2px;
  color: var(--secondary-2);
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 400;
}

/* Editorial prose (CMS articles) */
.luxe-prose {
  color: var(--luxe-ink);
  line-height: 1.75;
}

.luxe-prose h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 36px 0 12px;
}

.luxe-prose h3 {
  font-size: clamp(18px, 2vw, 22px);
  margin: 28px 0 10px;
}

.luxe-prose p {
  margin-bottom: 16px;
  color: var(--secondary);
}

.luxe-prose a {
  color: var(--luxe-rose-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.luxe-prose ul,
.luxe-prose ol {
  margin: 0 0 16px 20px;
  color: var(--secondary);
}

.luxe-prose li {
  margin-bottom: 6px;
  list-style: disc;
}

.luxe-prose ol li {
  list-style: decimal;
}

.luxe-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-size: 14px;
}

.luxe-prose th {
  font-family: var(--luxe-font-body);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  background: var(--luxe-blush-50);
  color: var(--luxe-noir);
}

.luxe-prose th,
.luxe-prose td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
}

.luxe-prose tr:nth-child(even) td {
  background: #fffdfc;
}

@media (max-width: 575px) {
  .luxe-prose table {
    display: block;
    overflow-x: auto;
  }
}

/* Editorial / hero helpers */
.luxe-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 8, 10, 0.2) 0%,
    rgba(12, 8, 10, 0.05) 45%,
    rgba(12, 8, 10, 0.3) 100%
  );
  pointer-events: none;
}

/* Hero slides — dark editorial treatment (centered, letterspaced serif) */
body .tf-slideshow .wrap-slider .box-content {
  text-align: center;
}

body .tf-slideshow .wrap-slider .content-slider {
  max-width: 860px;
  margin: 0 auto;
}

body .tf-slideshow .wrap-slider .subheading {
  font-family: var(--luxe-font-display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.1em;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--luxe-gold-soft);
  margin-bottom: 10px;
}

body .tf-slideshow .wrap-slider .heading.title-display {
  font-family: var(--luxe-font-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 60px);
  line-height: 1.3;
  text-shadow: 0 2px 24px rgba(10, 6, 8, 0.45);
}

body .tf-slideshow .wrap-slider .box-btn-slider {
  margin-top: 28px;
}

body .tf-slideshow .wrap-slider .tf-btn {
  background: transparent;
  border: 1px solid rgba(255, 252, 250, 0.75);
  color: #fffcfa;
  padding: 13px 40px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 400;
}

body .tf-slideshow .wrap-slider .tf-btn:hover {
  background: #fffcfa;
  border-color: #fffcfa;
  color: var(--luxe-noir);
  transform: translateY(-2px);
}

.luxe-img-frame {
  border-radius: var(--luxe-radius-lg);
  overflow: hidden;
  background: var(--luxe-blush-50);
}

.luxe-img-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--luxe-ease);
}

.luxe-img-frame:hover img {
  transform: scale(1.05);
}

/* Promo banner pill: keep the title on its own line with the
   subtitle beneath, instead of everything running together */
body .collection-position-2 .cls-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
}

body .collection-position-2 .cls-btn p {
  flex-basis: 100%;
  order: 3;
  margin: 2px 0 0;
  font-size: 13px;
}

/* Marquee separators */
body .tf-marquee .marquee-child-item .icon {
  color: var(--luxe-gold);
}

/* Checkout / auth cards */
.luxe-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--luxe-radius-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--luxe-shadow-sm);
}

.luxe-panel .luxe-panel-title {
  font-family: var(--luxe-font-display);
  font-size: 24px;
  margin-bottom: 20px;
}

.luxe-auth-wash {
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(247, 228, 225, 0.9), transparent),
    radial-gradient(50% 70% at 10% 90%, rgba(234, 217, 205, 0.7), transparent),
    var(--luxe-ivory);
}

/* Success check animation canvas */
.luxe-success-ring {
  width: 104px;
  height: 104px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--luxe-blush-50);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--luxe-shadow);
}

/* Countdown digits — serif numerals in rounded nude tiles */
body .tf-countdown-lg .countdown__item,
body .countdown__item {
  background: var(--luxe-nude);
  border-radius: var(--luxe-radius);
  padding: 12px 8px;
}

body .countdown__value {
  font-family: var(--luxe-font-display);
  font-weight: 500;
  color: var(--luxe-noir);
}

body .countdown__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* ------------------------------------------------------------
   13. Responsive refinements
   ------------------------------------------------------------ */
/* Tables inside .table-responsive keep readable column widths and
   scroll horizontally on narrow screens instead of crushing */
.table-responsive .luxe-table-min {
  min-width: 560px;
}

@media (max-width: 991px) {
  .luxe-sticky-info {
    position: static;
  }
}

@media (max-width: 767px) {
  :root {
    --luxe-space-section: clamp(40px, 10vw, 64px);
  }

  .luxe-panel {
    padding: 20px 16px;
  }

  .luxe-panel .luxe-panel-title {
    font-size: 21px;
  }

  .luxe-empty {
    padding: 40px 16px;
  }

  .luxe-empty .luxe-empty-icon {
    width: 76px;
    height: 76px;
    font-size: 28px;
    margin-bottom: 18px;
  }

  .luxe-accordion-trigger {
    font-size: 17px;
    padding: 16px 2px;
  }

  .luxe-testimonial {
    padding: 20px;
  }

  .luxe-testimonial .quote-mark {
    font-size: 40px;
  }

  .luxe-testimonial blockquote {
    font-size: 16px;
  }

  .luxe-medallion {
    width: 52px;
    height: 52px;
    min-width: 52px;
    font-size: 21px;
  }

  .luxe-btn-ghost {
    padding: 10px 22px;
    font-size: 13px;
  }

  .luxe-eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
  }

  .heading-section .subheading,
  .heading-section-2 .subheading {
    letter-spacing: 0.2em;
  }

  body .swatch-size {
    min-width: 40px;
    height: 40px;
  }

  .luxe-success-ring {
    width: 88px;
    height: 88px;
  }
}

@media (max-width: 575px) {
  .store-logo-text {
    font-size: 1.25rem !important;
    letter-spacing: 0.1em !important;
  }

  body .card-product .card-product-info .title {
    font-size: 14px;
  }

  body .card-product .price {
    font-size: 14px;
  }

  body .on-sale-item {
    font-size: 10px;
    padding: 3px 10px;
  }
}

/* ------------------------------------------------------------
   14. Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .luxe-skeleton::after {
    animation: none;
  }
}