/* =============================================
   LUXE – Main Stylesheet
   Fonts : Manrope (headings) | Inter (body)
   ============================================= */

/* ── Global CSS Design System (Brand Colors: #029AFD & #022266) ── */
:root {
  --primary:           #029AFD;
  --primary-hover:     #0289E3;
  --primary-light:     #EAF7FF;

  --secondary:         #022266;
  --secondary-hover:   #03348F;

  --accent:            #5BC6FF;

  --success:           #16C784;

  --background:        #F8FBFF;

  --surface:           #FFFFFF;
  --surface-2:         #F3F9FF;

  --border:            #D9ECFF;

  --text:              #022266;
  --text-secondary:    #5F7391;
  --text-light:        #7D91AB;

  --shadow:            0 10px 35px rgba(2, 34, 102, 0.08);
  --shadow-hover:      0 18px 50px rgba(2, 34, 102, 0.12);

  /* Legacy & Theme Variable Mappings */
  --primary-green:     var(--primary);
  --primary-hover:     var(--primary-hover);
  --secondary-green:   var(--accent);
  --accent-champagne:  var(--primary);
  --accent-hover:      var(--primary-hover);
  --bg-main:           var(--background);
  --bg-section:        var(--surface-2);
  --card-bg:           var(--surface);
  --heading-color:     var(--secondary);
  --body-text:         var(--text-secondary);
  --muted-text:        var(--text-light);
  --border-color:      var(--border);
  --footer-bg:         var(--secondary);
  --footer-heading:    #FFFFFF;
  --footer-text:       rgba(255, 255, 255, 0.75);
  --color-success:     var(--success);
  --color-warning:     var(--accent);
  --color-error:       #E53935;

  --color-bg:          var(--background);
  --color-bg-alt:      var(--surface-2);
  --color-text:        var(--secondary);
  --color-text-light:  var(--text-secondary);
  --color-text-muted:  var(--text-light);
  --color-border:      var(--border);

  --font-display:      'Manrope', sans-serif;
  --font-body:         'Inter', sans-serif;
  --page-gutter:       64px;
}

/* ── Base ───────────────────────────────────── */
body {
  font-family: var(--font-body);
  background-color: var(--bg-main);
  color: var(--body-text);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
  padding-top: 72px !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
}

/*
  .luxe-container
  A full-width wrapper that gives every section the
  exact 64px left/right margin from the viewport edge.
  Bootstrap's own container-fluid uses padding-left/right
  which we override here.
*/
.luxe-container {
  padding-left:  var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}


/* =============================================
   NAVBAR
   Layout: 100% Bootstrap (navbar-expand-lg,
   mx-auto on nav list, d-flex ms-auto on icons)
   Custom CSS: only colours, font, height, shadow
   ============================================= */
.luxe-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: auto;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 29px 0px;
}

/* Vertically centre the inner Bootstrap container */
.luxe-nav .container-fluid {
  height: 100%;
}

.luxe-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text) !important;
  text-decoration: none;
  line-height: 1;
  margin-right: 0;
  display: inline-flex;
  align-items: center;
}

.luxe-logo-img {
  max-height: 32px !important;
  height: 32px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.luxe-footer-logo-img {
  max-height: 36px !important;
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.luxe-nav-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--color-text) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: opacity 0.2s;
}
.luxe-nav-link:hover { opacity: 0.55; }

/* Icon buttons – no Bootstrap component, kept minimal */
.icon-btn, body.ignore-app-design .icon-btn {
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 4px;
  color: var(--color-text);
  line-height: 0;
  transition: opacity 0.2s;
}
.icon-btn:hover { opacity: 0.55; }

.cart-badge {
  top: -4px;
  right: -6px;
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.menu_wrapper .luxe-logo{display: none;}

/* =============================================
   HERO
   Full-bleed section. Bootstrap is used inside
   hero-content-wrap (d-flex flex-column justify-
   content-end on the container) — layout classes
   are in the HTML.
   Custom CSS: background, overlay, typography.
   ============================================= */
.hero-section {
  margin-top: 91px; /* clear fixed navbar */
  padding-top: 64px;
}

.hero-image-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* Simulated editorial stone/fabric background */
.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.06)  0%,
    rgba(0,0,0,0.04)  40%,
    rgba(0,0,0,0.44)  80%,
    rgba(0,0,0,0.54) 100%
  );
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The Bootstrap d-flex container needs to sit above overlays */
.hero-content-wrap {
  position: relative;
  padding: 96px;
  height: 870px;
}

.hero-content {
  max-width: 650px;
  color: #fff;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 25px;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255,255,255,1);
  margin-bottom: 32px;
}

.hero-cta {
  display: inline-block;
  border: 1px solid var(--accent-champagne);
  background: var(--primary-green);
  color: #ffffff !important;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 14px 38px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.hero-cta:hover, .hero-cta:focus {
  background: var(--primary-hover);
  border-color: var(--accent-hover);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(31, 94, 75, 0.35);
}


/* =============================================
   FEATURED EDIT
   Layout: Bootstrap row > col-lg-4 col-md-4
   Custom CSS: product card visuals, typography
   ============================================= */
.featured-section {
  background: var(--bg-main);
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

.featured-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--heading-color);
  letter-spacing: -0.01em;
  margin: 0;
}

.divider{display: block;width: 100%;height: 1px;background: var(--border-color);margin: 24px 0 48px;}

.view-all-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--primary-green);
  text-decoration: none;
  border-bottom: 2px solid var(--primary-green);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.view-all-link:hover, .view-all-link:focus {
  color: var(--accent-champagne);
  border-color: var(--accent-champagne);
}

/* Product card */
.product-card { cursor: pointer; }

.product-img-wrap {
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.product-img-wrap:hover .product-img { transform: scale(1.03); }

.product-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.product-img img{
  width: inherit;
  height: 490px;
}

/* Editorial placeholder gradients */
.product-img--blazer {
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, #e8dfc8 0%, #d4c9ac 45%, #c0b294 100%),
    linear-gradient(170deg, #f0e8d6 0%, #cfc0a0 100%);
}
.product-img--camisole {
  background:
    radial-gradient(ellipse 55% 65% at 50% 40%, #e2d4b0 0%, #cdb98a 50%, #7a6545 100%),
    linear-gradient(150deg, #c4a96e 0%, #5c4a35 100%);
}
.product-img--trousers {
  background:
    radial-gradient(ellipse 50% 80% at 55% 30%, #4a4a4a 0%, #2e2e2e 50%, #1a1a1a 100%),
    linear-gradient(170deg, #383838 0%, #111 100%);
}

.product-name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--heading-color);
  line-height: 1.4;
}
.product-color {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--body-text);
  letter-spacing: 1.5px;
}
.product-price {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-green);
  white-space: nowrap;
}

.product-variant-select {
  width: 100%;
  padding: 8px 12px;
  margin-top: 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--card-bg);
  color: var(--heading-color);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color 0.25s ease;
}
.product-variant-select:focus {
  border-color: var(--primary-green);
}


/* =============================================
   PHILOSOPHY
   Layout: Bootstrap row g-0 > col-lg-7 + col-lg-5
           d-flex flex-column justify-content-center
           on text col (in HTML)
   Custom CSS: bg colour, typography, image
   ============================================= */
.philosophy-section .luxe-container .row {
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

/* Text column inner padding (not grid, just content breathing room) */
.philosophy-text-col {
  padding: var(--page-gutter);
  max-width: 510px;
  margin-left: auto;
  margin-right: 40px;
}

.philosophy-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--primary-green);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.philosophy-quote {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--heading-color);
  border: none;
  padding: 0;
  margin-bottom: 28px;
}

.philosophy-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--primary-green);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.philosophy-link:hover, .philosophy-link:focus {
  color: var(--accent-champagne);
}

/* Image column */
.philosophy-img-col {
  padding: var(--page-gutter) var(--page-gutter) var(--page-gutter) 0;
}

.philosophy-img {
  width: 100%;
  max-width: 412px;
  background-size: cover;
}
.philosophy-img img{
  width: 100%;
}

/* =============================================
   FOOTER
   Layout: Bootstrap row > col-auto (brand) +
           col-auto d-flex gap-5 (link groups)
           list-unstyled d-flex flex-column gap-2
           (link lists — in HTML Bootstrap classes)
   Custom CSS: colours, borders, typography only
   ============================================= */



.luxe-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--border-color);
  padding: 100px 0px;
  color: var(--footer-text);
}

.luxe-footer .luxe-logo {
  color: var(--footer-heading) !important;
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--footer-heading);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-col a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer-col a:hover, .footer-col a:focus {
  color: var(--accent-champagne);
}

.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  padding-bottom: 16px;
}

.footer-bottom p {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--footer-text);
}

.copyright {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--footer-text);
}

/* =============================================
   RESPONSIVE
   Bootstrap breakpoints handle column stacking.
   Custom overrides only for non-grid items.
   ============================================= */

.philosophy-section .luxe-container .row{
  flex-wrap: nowrap;
}


/* =============================================
   LUXE – Collections Page Styles
   Extends style.css (shared nav/footer/tokens)
   ============================================= */

/* Offset fixed navbar */
.mt-nav { margin-top: 91px; }


/* =============================================
   COLLECTION HERO
   row g-0: text col (left) + image col (right)
   ============================================= */
.col-hero {
  background: var(--color-bg);
  padding-top: 120px;padding-bottom: 120px;
}

/* Text column */
.col-hero-text {
  padding: 50px var(--page-gutter) 50px 0;
}

.col-hero-title {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 24px;
}

.col-hero-desc {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 32px;
}

.col-hero-cta {
  display: inline-block;
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 14px 24px;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.col-hero-cta:hover {
  background: #333;
  color: #fff;
}

/* Image column — flush to right viewport edge */
.col-hero-img-wrap {
  overflow: hidden;
}

.col-hero-img {
  width: 100%;
  height: 420px;
  background-size: cover;
  background-position: center;
}

.col-hero-img img{
  width: 100%;
}


/* =============================================
   FILTER BAR
   Bootstrap d-flex flex-wrap gap-2 in HTML
   Custom: label + pill button styles
   ============================================= */
.filter-section {
  padding: 36px 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.filter-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-right: 8px;
}

.filter-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 7px 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--color-text);
}

/* The server marks the active filter with data-app-current, the same way it
   marks the current page; --active is kept for themes that still set it from
   the client. */
.filter-btn--active,
.filter-btn[data-app-current] {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

/* Filters are anchors now, not buttons: keep them looking like controls rather
   than links. */
.filter-btn {
  text-decoration: none;
}

/* "All" carries data-app-current from the server like any other filter, so the
   rule above already covers it — no sibling-state selector needed. */


/* =============================================
   PRODUCT GRID
   Bootstrap: row g-4 > col-lg-4 col-md-4 col-sm-6
   Custom: card visuals, image gradients, typography
   ============================================= */
.products-section {
  background: var(--color-bg);
  padding-top: 52px;
  padding-bottom: 32px;
}

.coll-product-card {
  cursor: pointer;
}

.coll-product-img-wrap {
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.coll-product-img-wrap:hover .coll-product-img {
  transform: scale(1.03);
}

.coll-product-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.coll-product-img img{
  width: 100%;
  height: 490px;
}

/* ── Product image placeholders ── */
.coll-img--blazer {
  background:
    radial-gradient(ellipse 50% 80% at 50% 40%, #3a3a3a 0%, #222 50%, #111 100%),
    linear-gradient(170deg, #2e2e2e 0%, #0e0e0e 100%);
}

.coll-img--shirt {
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, #f4f2ef 0%, #e8e4de 45%, #d0cbc2 100%),
    linear-gradient(170deg, #eeebe5 0%, #d8d3cb 100%);
}

.coll-img--tee {
  background:
    radial-gradient(ellipse 55% 65% at 50% 42%, #e8dfc8 0%, #d6c9aa 50%, #bfb08e 100%),
    linear-gradient(160deg, #e2d8c0 0%, #c8b898 100%);
}

.coll-img--trouser {
  background:
    radial-gradient(ellipse 45% 85% at 50% 35%, #2a2a2a 0%, #1a1a1a 55%, #0d0d0d 100%),
    linear-gradient(170deg, #282828 0%, #101010 100%);
}

.coll-img--tote {
  background:
    radial-gradient(ellipse 55% 65% at 50% 55%, #7a3f28 0%, #5c2e1a 45%, #3a1c0e 100%),
    linear-gradient(150deg, #6b3520 0%, #3a1c10 100%);
}

.coll-img--knit {
  background:
    radial-gradient(ellipse 65% 55% at 50% 35%, #e8ddc8 0%, #d4c5a8 45%, #bfad8e 100%),
    linear-gradient(160deg, #e0d4ba 0%, #c8b898 100%);
}

/* Product text */
.coll-product-name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 4px;
  line-height: 1.4;
}

.coll-product-price {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--color-text);
  margin: 0;
}


/* =============================================
   LOAD MORE BUTTON
   Bootstrap: d-flex justify-content-center in HTML
   Custom: outlined button style
   ============================================= */
.load-more-btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-text);
  padding: 14px 48px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.load-more-btn:hover {
  background: var(--color-text);
  color: #fff;
}


/* =============================================
   NUMBERED PAGINATION (rendered by js/pagination.js)
   Structure: .products-pagination > Previous btn, .pagination-pages, Next btn, .pagination-info
   ============================================= */
.products-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Previous / Next + each page number share the outlined theme button look */
.products-pagination .pagination-btn,
.products-pagination .page-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-text);
  padding: 8px 14px;
  min-width: 38px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.products-pagination .page-btn {
  padding: 8px 0;
}

.products-pagination .pagination-btn:hover:not([disabled]),
.products-pagination .page-btn:hover {
  background: var(--color-text);
  color: #fff;
}

/* Active / current page */
.products-pagination .page-btn.active {
  background: var(--color-text);
  color: #fff;
  cursor: default;
}

/* Disabled Previous/Next at the ends */
.products-pagination .pagination-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.products-pagination .dots {
  padding: 0 4px;
  color: var(--color-text-muted);
}

/* "Showing X to Y of Z records" — full width below the controls */
.products-pagination .pagination-info {
  flex-basis: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-text-muted);
}


/* =============================================
   ACTIVE NAV LINK  (Collections page)
   ============================================= */
.active-link {
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 1px;
}


.shop_banner.col-hero{
    padding-top: var(--page-gutter);
    padding-bottom:  var(--page-gutter);
}

.shop_banner .col-hero-text{
    padding:0
}


/* =============================================
   LUXE – Shop All Page Styles
   Extends style.css (shared tokens/nav/footer)
   ============================================= */

.mt-nav { margin-top: 60px; }
.active-link { border-bottom: 1px solid var(--color-text); padding-bottom: 1px; }


/* =============================================
   PAGE BANNER
   title: 64px / 400 / #1A1C1C
   desc:  18px / #444844
   ============================================= */

.shop_banner.mt-nav{margin-top: 91px;}
   
.page-banner {
  background: var(--color-bg);
  padding: 52px 0 36px;
}

.banner-title {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  color: #1A1C1C;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.banner-desc {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: #444844;
  line-height: 1.65;
  margin: 0;
}


/* =============================================
   FILTER + SORT BAR
   filter: 12px / 600
   ============================================= */
.shop-filter-bar {
  background: var(--color-bg);
  padding: 20px 0 35px;
  border-bottom: 1px solid #C4C7C34D;
  margin-bottom: 0px;
}

.shop-filter-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.shop-filter-btn:hover { border-color: var(--color-text); }
.shop-filter-btn--active {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

/* Sort dropdown */
.sort-label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-light);
  white-space: nowrap;
}

.sort-select {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-text);
  padding: 2px 20px 2px 0;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231A1C1C' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.shop-filter-bar .filter_btn_wrapper{max-width: 100%;overflow-x: auto;display: flex;gap: 10px;}


/* =============================================
   PRODUCT GRID — shared card styles
   shop-box-title: 24px
   shop-box-text:  16px
   ============================================= */




.shop-products {
  background: var(--color-bg);
  padding: var(--page-gutter) 0;
}

.shop-card { cursor: pointer; }

/* Image wrapper — 4:5 ratio for regular, taller for featured */
.shop-img-wrap {
  width: 100%;
  height: 475px;
  aspect-ratio: 4 / 4.5;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.shop-card--featured .shop-img-wrap {
  aspect-ratio: 4 / 3.2;
}

.shop-img-wrap:hover .shop-img { transform: scale(1.03); }

.shop-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

/* Featured badge overlay */
.featured-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
  background: rgba(255, 255, 255, 1);
  padding: 5px 10px;
  backdrop-filter: blur(4px);
}

/* Typography */
.shop-box-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #1A1C1C;
  margin-bottom: 4px;
  line-height: 1.4;
}

.shop-card--featured .shop-box-title {
  font-size: 24px;
  font-family: var(--font-display);
}

.shop-box-text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--color-text-light);
  margin: 0;
}

.shop-price {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #1A1C1C;
  margin: 0;
  white-space: nowrap;
}

.shop-card--featured .shop-price { font-size: 18px; }

.shop_divider{
    display: block;
    width: 100%;
    height: 1px;
    background: #C4C7C34D;
    margin: var(--page-gutter) 0;
}

/* ── Product Image Placeholders ── */
.shop-img--overcoat {
  background:
    radial-gradient(ellipse 50% 75% at 52% 28%, #d6c9b0 0%, #b8a78a 35%, transparent 65%),
    radial-gradient(ellipse 70% 55% at 25% 85%, #3a3530 0%, transparent 55%),
    linear-gradient(160deg, #5a5248 0%, #2e2a26 55%, #1a1714 100%);
}
.shop-img--frametote {
  background:
    radial-gradient(ellipse 55% 55% at 55% 45%, #3a3530 0%, #222018 45%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 70%, #1e1c18 0%, transparent 55%),
    linear-gradient(150deg, #2a2820 0%, #111008 100%);
}
.shop-img--woolblazer {
  background:
    radial-gradient(ellipse 50% 80% at 50% 40%, #3a3a3a 0%, #222 50%, #111 100%),
    linear-gradient(170deg, #2e2e2e 0%, #0e0e0e 100%);
}
.shop-img--shirt {
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, #f4f2ef 0%, #e8e4de 45%, #d0cbc2 100%),
    linear-gradient(170deg, #eeebe5 0%, #d8d3cb 100%);
}
.shop-img--tee {
  background:
    radial-gradient(ellipse 55% 65% at 50% 42%, #e8dfc8 0%, #d6c9aa 50%, #bfb08e 100%),
    linear-gradient(160deg, #e2d8c0 0%, #c8b898 100%);
}
.shop-img--trouser {
  background:
    radial-gradient(ellipse 45% 85% at 50% 35%, #2a2a2a 0%, #1a1a1a 55%, #0d0d0d 100%),
    linear-gradient(170deg, #282828 0%, #101010 100%);
}
.shop-img--tote {
  background:
    radial-gradient(ellipse 55% 65% at 50% 55%, #7a3f28 0%, #5c2e1a 45%, #3a1c0e 100%),
    linear-gradient(150deg, #6b3520 0%, #3a1c10 100%);
}
.shop-img--knit {
  background:
    radial-gradient(ellipse 65% 55% at 50% 35%, #e8ddc8 0%, #d4c5a8 45%, #bfad8e 100%),
    linear-gradient(160deg, #e0d4ba 0%, #c8b898 100%);
}
.shop-img--linenblazer {
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, #e8dfc8 0%, #d4c9ac 45%, #c0b294 100%),
    linear-gradient(170deg, #f0e8d6 0%, #cfc0a0 100%);
}
.shop-img--camisole {
  background:
    radial-gradient(ellipse 55% 65% at 50% 40%, #e2d4b0 0%, #cdb98a 50%, #7a6545 100%),
    linear-gradient(150deg, #c4a96e 0%, #5c4a35 100%);
}
.shop-img--wooltrousers {
  background:
    radial-gradient(ellipse 50% 80% at 55% 30%, #4a4a4a 0%, #2e2e2e 50%, #1a1a1a 100%),
    linear-gradient(170deg, #383838 0%, #111 100%);
}
.shop-img--reliefknit {
  background:
    radial-gradient(ellipse 60% 60% at 50% 38%, #e4dacc 0%, #d0c4b0 45%, #b8a890 100%),
    linear-gradient(160deg, #ddd0bc 0%, #c4b49e 100%);
}
.shop-img--solstice {
  background:
    radial-gradient(ellipse 40% 65% at 50% 55%, #c8b48a 0%, #a89060 45%, #7a6840 100%),
    radial-gradient(ellipse 70% 40% at 50% 85%, #3a3020 0%, transparent 60%),
    linear-gradient(160deg, #d4bc8a 0%, #8a7048 60%, #4a3828 100%);
}
.shop-img--sneaker {
  background:
    radial-gradient(ellipse 65% 50% at 50% 55%, #f0ece6 0%, #e0dbd2 45%, #c8c0b4 100%),
    linear-gradient(160deg, #eee8e0 0%, #d4ccc0 100%);
}


/* =============================================
   PAGINATION
   Bootstrap .pagination overrides for LUXE style
   ============================================= */

.pagination_wrapper{
  padding: var(--page-gutter) 0;
}

.pagination_row{margin-left: auto;margin-right: auto;}

.shop-pagination .page-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  width: 42px;height: 42px;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0 !important;
  padding: 7px 13px;
  transition: background 0.2s, color 0.2s;
  margin: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-pagination .page-link:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.shop-pagination .page-item.active .page-link {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.shop-pagination .page-item.disabled .page-link {
  color: var(--color-text-muted);
  background: transparent;
}

.pagination-count {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-light);
}


/* =============================================
   PROMO BANNER  (Optics Collection)
   row g-0: image (col-6) + text (col-6)
   ============================================= */
.promo-banner {
  background: #fff;
  margin-bottom: 128px;
}

.promo-img {
  width: 100%;
  min-height: 420px;
  height: 100%;
  background:
    radial-gradient(ellipse 55% 70% at 52% 42%, #c8a060 0%, #8a6830 30%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 50% 50%, #2a1e10 0%, #1a1208 60%, #0d0804 100%),
    linear-gradient(160deg, #3a2810 0%, #140e06 100%);
  background-size: cover;
  background-position: center;
}

.promo-banner .promo-img{min-height: 662px;max-width: 662px;}

.promo-text-col {
  padding: 72px 20px 72px 64px;
  min-height: 420px;
}

.promo-eyebrow {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 4.8px;
  color: #181E1A;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.promo-heading {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.promo-desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--color-text-light);
  line-height: 1.7;
  max-width: 340px;
  width: 100%;
  margin-bottom: 32px;
}

.promo-cta {
  display: inline-block;
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 13px 35px;
  text-decoration: none;
  transition: background 0.25s;
}
.promo-cta:hover { background: #333; color: #fff; }


/* =============================================
   NEWSLETTER SECTION
   Centred: heading + desc + email/subscribe row
   ============================================= */
.newsletter-section {
  background: var(--bg-section);
  border-top: 1px solid var(--border-color);
  padding: 100px 0;
}

.newsletter-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--heading-color);
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

.newsletter-desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--body-text);
  line-height: 1.65;
  margin-bottom: 16px;
}

.newsletter-input {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--heading-color);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  padding: 14px 18px;
  outline: none;
  transition: border-color 0.25s ease;
  margin-right: 15px;
}
.newsletter-input::placeholder { color: var(--muted-text); }
.newsletter-input:focus { border-color: var(--primary-green); }

.newsletter-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #ffffff;
  background: var(--primary-green);
  border: 1px solid var(--primary-green);
  padding: 14px 30px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.newsletter-btn:hover, .newsletter-btn:focus {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(31, 94, 75, 0.25);
}


/* Wrapper holds the input + label together */
.float-input-wrap {
  position: relative;
  margin-right: 15px;
}

/* Input */
.newsletter-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  background: transparent;
  border:0;
  border-bottom: 1px solid var(--color-border);
  border-right: none;
  padding: 22px 18px 8px 0px; /* top padding makes room for the risen label */
  outline: none;
  transition: border-color 0.2s;
}
.newsletter-input:focus {
  border-color: var(--color-text);
}

/* Label — starts centred inside the input */
.float-input-wrap label {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-muted);
  pointer-events: none;           /* click passes through to input */
  transition: top 0.2s ease,
              transform 0.2s ease,
              font-size 0.2s ease,
              color 0.2s ease;
}

/* Label rises when input is focused OR has content */
.newsletter-input:focus   + label
 {
  top: -5px;
  transform: translateY(0);
  color: var(--color-text-light);
}


/* =============================================
   RESPONSIVE
   Bootstrap handles col stacking.
   Custom tweaks only.
   ============================================= */


@media(max-width:1024px){
  .col-hero-title { font-size: 48px; }
  .col-hero-text { padding: 50px var(--page-gutter) 50px 0; }
  .col-hero-desc  { font-size: 16px; line-height: 1.6;}
  .col-hero{padding-top: 80px;padding-bottom: 80px;}
}

@media (max-width: 768px) {
  .col-hero-title { font-size: 48px; }
  .col-hero-title br{display: none;}
  .col-hero-text  { padding: 48px var(--page-gutter); min-height: auto; }
  .col-hero-img   { height: 600px; }
  .col-hero-text{padding-left: 0;padding-right: 0;padding-top: 0;}
  .filter_btn_wrapper{max-width: 100%;overflow-x: auto;display: flex;gap: 10px;}
}

@media(max-width:992px){
    .luxe-logo{display: none;}

    .menu_wrapper .luxe-logo{
        display: flex
    }

    /* Collapse closed state */
    .navbar-collapse {
    position: absolute;
    background: rgb(255, 255, 255);
    width: 100%;
    left: 0px;
    top: 100%;
    box-shadow: rgba(44, 44, 44, 0.22) 0px 22px 13px -17px;
    border-top: 1px solid rgb(239, 239, 239);

    /* Override Bootstrap's display:none mechanism */
    display: block !important;
    overflow: hidden;

    /* Collapsed state */
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 64px;
    padding-right: 64px;

    /* Smooth transition */
    transition: max-height 0.4s ease,
                opacity    0.3s ease,
                padding    0.4s ease;
    }

    /* Collapse open state */
    .navbar-collapse.show {
      max-height: 500px;   /* larger than your actual content height */
      opacity: 1;
      padding-top: 35px;
      padding-bottom: 35px;
    }

    /* While Bootstrap is mid-animation */
    .navbar-collapse.collapsing {
    display: block !important;
    overflow: hidden;
    }

    .philosophy-text-col{
        margin-right: auto;
    }

    .luxe-footer .luxe-logo{
        display: block;
    }

    .menu_wrapper{flex-grow: 1;}

    .menu_wrapper .luxe-logo{
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-content-wrap{padding: 40px;}
    :root{--page-gutter: 32px;}
    .hero-title{font-size: 45px;}
    .hero-subtitle{font-size: 14px;}
    .hero-content-wrap{height: 700px;}
    .product-name{font-size: 15px;}
    .product-price{font-size: 15px;}
    .luxe-footer{ padding: 80px 0px;}
    .philosophy-text-col{max-width: 100%;}
    .philosophy-img{max-width: 100%;}
    .philosophy-img-col{padding: var(--page-gutter);}
}

@media(max-width:724px){
    .luxe-footer .col-auto{width: 100%;}
    .footer_logo_wrapper .luxe-logo{margin-bottom: 32px;}
    .footer_logo_wrapper .copyright{margin-bottom: 32px !important;}
    .philosophy-section{padding-bottom: 80px;}
}

@media(max-width:681px){
    :root{--page-gutter: 20px;}
    .product-name {font-size: 16px;}
    .product-price {font-size: 16px;}
    .hero-subtitle{display: none;}
    .philosophy-section .luxe-container .row{flex-wrap: wrap;flex-direction: column;} 
    .philosophy-text-col {max-width: 100%;width: 100%;}
    .philosophy-img-col{width: 100%;}
    .filter_bar{flex-wrap: wrap;flex-direction: column-reverse;gap: 40px;}
    .navbar .luxe-container .logo_wrapper{width: 33%;flex-grow: 0 !important;}
    .navbar .luxe-container .menu_wrapper{width: 33%;flex-grow: 0 !important;}
    .navbar .luxe-container .account_control_wrapper{width: 33%;flex-grow: 0 !important;}
    .shop-img-wrap{height: 375px;}
    .philosophy-quote{font-size: 30px;}
    .pagination_wrapper{flex-direction: column-reverse;gap: 20px;}
    .promo-text-col{padding-left: 0;padding-right: 0;text-align: center;}
    .promo-desc{max-width: 100%;}
    .promo-banner{margin-bottom: 0;}
    .shop-card{margin-top: 20px;}
    .newsletter-section{padding: 80px 0px;}
    .promo-eyebrow{font-size: 13px;letter-spacing: 2.8px;}
    .promo-banner .promo-img{width: 100%;min-height: 500px;}
    .newsletter_form_wrapper{flex-direction: column;display: flex;}
    .float-input-wrap{margin-right: 0;margin-bottom: 20px;}
    .shop-box-title{line-height: 25px;}
    .shop-card--featured .shop-box-title{font-size: 22px;}
    .shop_banner .col-hero-text{text-align: center;}
}

@media(max-width:400px){
    .account_control_wrapper{width: 90px;}
}
/* Current page — the runtime marks it with data-app-current instead of the
   .active class the old pagination.js added. Same treatment. */
.products-pagination .page-btn[data-app-current] {
  background: var(--color-text);
  color: #fff;
  cursor: default;
}

/* =============================================
   PAGINATION
   The theme's own rules already lay this out: a centred flex row that wraps,
   with "Showing x to y of z" dropping to its own line via flex-basis:100%.
   Only two things needed adding.
   ============================================= */

/* 1. The gap marker must occupy a number's worth of space. Left as three bare
      dots it is narrower than a page button, so the strip changed width as the
      elision moved and Next slid sideways under the cursor. */
.products-pagination .pagination-pages .dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
}

/* 2. Current page: the runtime marks it with data-app-current, while the stock
      theme styled .active. Match the attribute so the highlight still shows. */
.products-pagination .page-btn[data-app-current] {
  background: var(--color-text);
  color: #fff;
  cursor: default;
}

/* =============================================
   <product> AS A LAYOUT BOX
   The server leaves <product> in the DOM as a real element. Being a custom
   element it defaults to display:inline, so wherever the theme puts the
   Bootstrap column classes on the tag ITSELF — as the search results grid does
   — the widths never apply and the cards collapse into misaligned boxes.
   Making it a block restores normal column behaviour. Where the column is a
   CHILD of the tag instead (the collection grid), display:contents is used
   below so the column still reaches its .row.
   ============================================= */
product[class*="col-"],
crosssellproduct[class*="col-"],
productcategory[class*="col-"],
purchasedproduct[class*="col-"],
shippingmethod[class*="col-"] {
  display: block;
}

/* =============================================
   COLLECTION GRID
   The server leaves <product> in the DOM as a real element wrapping each card,
   so the Bootstrap columns are grandchildren of .row rather than direct
   children — and Bootstrap's grid only lays out direct children. Making
   <product> a transparent box (display: contents) hands its column straight to
   the row, so the cards sit side by side with the normal gutter.
   ============================================= */
#categoryArea > product {
  display: contents;
}

/* display:contents removes the wrapper from layout, but Bootstrap puts the
   gutter on the COLUMN via --bs-gutter-x padding — inherited from .row, which
   the column no longer sees as its parent box. Restore it so the cards keep
   their spacing instead of their buttons running edge to edge. */
#categoryArea > product > .product-category {
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  margin-top: var(--bs-gutter-y, 0);
}

/* Fallback for browsers without display:contents — behave like a column. */
@supports not (display: contents) {
  #categoryArea > product {
    display: block;
    width: 100%;
  }
  #categoryArea > product > .product-category {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
}

/* =============================================
   COLLECTION CARD ALIGNMENT
   Cards in a row hold different amounts of content: only a tagged product has
   a variant <select>, and names run to one line or three. Left alone each card
   is just as tall as its own content, so the prices and the buttons sit at
   different heights across the row.

   The fix is two-part: every card fills the full height of its column, and the
   button is pushed to the bottom of the card. Then the row lines up whatever
   each product happens to carry.
   ============================================= */
#categoryArea .product-category {
  display: flex;
}

#categoryArea .product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* The body takes the leftover height so its own bottom-margin auto can work. */
#categoryArea .product-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* margin-top:auto absorbs the difference between a card with a variant select
   and one without, so every "view more" lands on the same line. */
#categoryArea .product-body .add-btn {
  margin-top: auto;
}

/* Uniform image box: one height for every card, so the text below all starts
   at the same line. object-fit keeps the subject centred and undistorted while
   the box itself scales with the column. */
#categoryArea .product-thumb {
  width: 100%;
  margin-bottom: 16px;
}

#categoryArea .product-thumb .product-image {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  background: var(--color-bg-alt);
}

/* Hold the name to a constant two lines so the price below it starts at the
   same height in every card, however long the product name is. */
#categoryArea .product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  margin-bottom: 4px;
}

/* The variant control on a product card — collection, landing and shop all
   render the same bare <select>. Left unstyled it is the raw OS control, which
   reads as an unfinished form field against the flat cards, so the chrome is
   removed and the arrow drawn as a background SVG instead. appearance:none
   drops the native arrow along with the styling, hence the replacement.

   .product-variant-select is the hook a card marks itself with; the two
   structural selectors keep the existing collection markup working unchanged. */
/* The select sits in its own wrapper on the landing and shop cards; the
   collection card puts it inside .product-body, which already has spacing. */
.product-variant-wrap {
  margin-top: 12px;
}

.product-variant-select,
#categoryArea .product-body select,
.shop-card select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  margin-bottom: 12px;
  padding: 11px 36px 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background-color: #fff;
  /* Chevron, inlined so the card needs no extra request. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231A1C1C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s;
}

.product-variant-select:hover,
#categoryArea .product-body select:hover,
.shop-card select:hover,
.product-variant-select:focus,
#categoryArea .product-body select:focus,
.shop-card select:focus {
  outline: none;
  border-color: var(--color-text);
}


/* =============================================
   CROSS-SELL
   One card per <crosssellproduct>. Selecting it posts a products[n][cross]
   row and the extended-subscription flag; the runtime marks the chosen card
   data-app-selected, so the state is styled here rather than in script.
   ============================================= */
.summary-crosssell,
.upsell-crosssell {
  margin: 20px 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, #e5e5e5);
}

.summary-crosssell-title,
.upsell-crosssell-title {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #777);
  margin-bottom: 10px;
}

.summary-crosssell .summary-product,
.upsell-crosssell-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.summary-crosssell .summary-product:hover,
.upsell-crosssell-card:hover { border-color: var(--color-text, #16181d); }

/* Chosen: the runtime sets this, no class toggling in the theme. */
[data-app-selected] .summary-product,
[data-app-selected] .upsell-crosssell-card,
.summary-crosssell label:has(input:checked),
.upsell-crosssell label:has(input:checked) {
  border-color: var(--color-text, #16181d);
  background: rgba(0, 0, 0, .03);
}

.summary-crosssell img,
.upsell-crosssell-card img { width: 48px; height: 48px; object-fit: contain; }

.upsell-crosssell-name { flex: 1; }


/* ============================================================
   Selected-state feedback (FIX-A)

   The runtime marks the chosen record by putting `data-app-selected` on the
   <product> / <shippingmethod> / <crosssellproduct> element itself. Without a
   style for it the customer clicks a package, a shipping method or a cross-sell
   and nothing changes on screen.

   Keyed ONLY on the contract attribute and the record tag -- no class, id or
   name is referenced, so renaming any theme class leaves this working.
   ============================================================ */

/* The record itself, when it is the visual card */
product[data-app-selected],
shippingmethod[data-app-selected],
crosssellproduct[data-app-selected] {
  background-color: rgba(31, 94, 75, 0.05);
  border-color: var(--primary-green) !important;
}

/* ── Trust Features Section ───────────────── */
.trust-features-section {
  background: var(--bg-section);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 56px 0;
}
.trust-feature-card {
  text-align: center;
  padding: 16px 24px;
}
.trust-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(31, 94, 75, 0.08);
  color: var(--primary-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.trust-feature-card:hover .trust-feature-icon {
  transform: translateY(-3px);
  background-color: var(--primary-green);
  color: #ffffff;
}
.trust-feature-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.trust-feature-desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--body-text);
  margin: 0;
  line-height: 1.5;
}

/* ── Heritage & Stats Section ────────────── */
.heritage-section {
  background: var(--bg-section);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 100px 0;
}
.stat-card {
  text-align: center;
  padding: 24px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(24, 53, 45, 0.08);
}
.stat-number {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--primary-green);
  line-height: 1.1;
  margin-bottom: 8px;
}
.stat-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--body-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Testimonials Section ────────────────── */
.testimonials-section {
  background: var(--bg-main);
  padding: 100px 0;
}
.testimonial-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 32px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(24, 53, 45, 0.08);
}
.rating-stars {
  color: var(--accent-champagne);
  font-size: 16px;
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.testimonial-text {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  color: var(--heading-color);
  margin-bottom: 24px;
}
.reviewer-info {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}
.reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(31, 94, 75, 0.1);
  color: var(--primary-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}
.reviewer-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
  margin: 0;
}
.reviewer-badge {
  font-size: 11px;
  color: var(--color-success);
  font-weight: 500;
}

/* ── FAQ Accordion Section ───────────────── */
.faq-section {
  background: var(--bg-section);
  border-top: 1px solid var(--border-color);
  padding: 100px 0;
}
.faq-accordion .accordion-item {
  border: 1px solid var(--border-color);
  border-radius: 8px !important;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--card-bg);
}
.faq-accordion .accordion-button {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--heading-color);
  background: var(--card-bg);
  padding: 20px 24px;
  box-shadow: none !important;
}
.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--primary-green);
  background: rgba(31, 94, 75, 0.04);
}
.faq-accordion .accordion-body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--body-text);
  line-height: 1.65;
  padding: 20px 24px;
}

/* ...and when the card is the record's own child wrapper */

/* ── Press & Media Marquee Section ───────── */
.press-marquee-section {
  background: var(--bg-main);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 40px 0;
  text-align: center;
}
.press-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--muted-text);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.press-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--heading-color);
  opacity: 0.65;
  transition: opacity 0.3s ease, color 0.3s ease;
  cursor: default;
}
.press-logo:hover {
  opacity: 1;
  color: var(--primary-green);
}

/* ── Craftsmanship & Formulation Section ── */
.craftsmanship-section {
  background: var(--bg-main);
  padding: 100px 0;
}
.craft-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 32px 24px;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.craft-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(31, 94, 75, 0.1);
  border-color: var(--primary-green);
}
.craft-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(31,94,75,0.1), rgba(200,155,60,0.15));
  color: var(--primary-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.craft-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 10px;
}
.craft-desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--body-text);
  line-height: 1.6;
  margin: 0;
}

/* ── Science-Backed Product Orbit Showcase (Medicare Style Layout) ── */
.science-showcase-section {
  position: relative;
  background: radial-gradient(circle at 50% 50%, rgba(31, 94, 75, 0.06) 0%, rgba(200, 155, 60, 0.04) 45%, var(--bg-main) 80%);
  padding: 100px 0;
  overflow: hidden;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.science-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 8px 24px rgba(24, 53, 45, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
  z-index: 2;
}

.science-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(31, 94, 75, 0.12);
  border-color: var(--primary-green);
}

.science-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(31, 94, 75, 0.08);
  border: 1px solid rgba(31, 94, 75, 0.15);
  color: var(--primary-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease;
}

.science-card:hover .science-card-icon {
  background: var(--primary-green);
  color: #ffffff;
}

.science-card-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 4px;
}

.science-card-desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--body-text);
  line-height: 1.5;
  margin: 0;
}

/* Center Orbit Podium Showcase */
.podium-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 440px;
}

.podium-glow-ring {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 94, 75, 0.22) 0%, rgba(200, 155, 60, 0.15) 50%, transparent 75%);
  filter: blur(24px);
  animation: podiumPulse 4s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes podiumPulse {
  0% { transform: scale(0.90); opacity: 0.7; }
  100% { transform: scale(1.10); opacity: 1; }
}

.orbit-svg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.orbit-line {
  stroke: rgba(31, 94, 75, 0.3);
  stroke-dasharray: 6 6;
  stroke-width: 1.5px;
  fill: none;
  animation: dashRotate 30s linear infinite;
}

@keyframes dashRotate {
  to { stroke-dashoffset: -200; }
}

.podium-product-wrap {
  position: relative;
  z-index: 3;
  text-align: center;
  transition: transform 0.4s ease;
}

.podium-product-wrap:hover {
  transform: scale(1.03);
}

.podium-bottle-img {
  max-height: 340px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 35px rgba(24, 53, 45, 0.25));
}

.podium-base {
  width: 240px;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(31, 94, 75, 0.3) 0%, rgba(200, 155, 60, 0.2) 60%, transparent 100%);
  border-radius: 50%;
  margin: -15px auto 0;
  box-shadow: 0 10px 25px rgba(31, 94, 75, 0.2);
}

.podium-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 8px 22px;
  background: #ffffff;
  border: 1px solid var(--accent-champagne);
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-green);
  box-shadow: 0 6px 18px rgba(200, 155, 60, 0.18);
  letter-spacing: 0.04em;
}

/* ── Dedicated 3 Product Spotlight Sections (Male Support, Testo Boost, NO2) ── */
.prod-spotlight-section {
  padding: 100px 0;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}
.prod-spotlight-section--alt {
  background: var(--bg-section);
}
.prod-spotlight-section--main {
  background: var(--bg-main);
}

.prod-spotlight-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 12px 36px rgba(24, 53, 45, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.prod-spotlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(31, 94, 75, 0.12);
}

.prod-spotlight-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-green);
  background: rgba(31, 94, 75, 0.08);
  border: 1px solid rgba(31, 94, 75, 0.18);
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.prod-spotlight-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  color: var(--heading-color);
  line-height: 1.15;
  margin-bottom: 16px;
}

.prod-spotlight-desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--body-text);
  line-height: 1.7;
  margin-bottom: 28px;
}

.prod-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}
.prod-feature-item {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--heading-color);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.prod-feature-item::before {
  content: "✦";
  color: var(--accent-champagne);
  font-size: 14px;
  font-weight: bold;
}

.prod-spotlight-img-wrap {
  position: relative;
  text-align: center;
  padding: 30px;
}
.prod-spotlight-img-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 94, 75, 0.15) 0%, rgba(200, 155, 60, 0.08) 60%, transparent 80%);
  filter: blur(20px);
  z-index: 1;
}
.prod-spotlight-img {
  position: relative;
  z-index: 2;
  max-height: 420px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(24, 53, 45, 0.18));
  transition: transform 0.4s ease;
}
.prod-spotlight-img-wrap:hover .prod-spotlight-img {
  transform: scale(1.04);
}

/* ── NO2 Custom Background Overlay (images/no2-bg.png) ── */
#no2-section {
  position: relative;
  background: linear-gradient(135deg, rgba(24, 53, 45, 0.88) 0%, rgba(31, 94, 75, 0.82) 50%, rgba(24, 53, 45, 0.92) 100%), url('../images/no2-bg.png') center/cover no-repeat !important;
  color: #ffffff;
}

#no2-section .prod-spotlight-title {
  color: #ffffff !important;
}

#no2-section .prod-spotlight-desc {
  color: rgba(255, 255, 255, 0.9) !important;
}

#no2-section .prod-feature-item {
  color: #ffffff !important;
}

#no2-section .prod-feature-item::before {
  color: var(--accent-champagne);
}

#no2-section .prod-spotlight-badge {
  background: rgba(200, 155, 60, 0.22);
  border: 1px solid var(--accent-champagne);
  color: #F7E7B6;
}

#no2-section .prod-spotlight-img-wrap::before {
  background: radial-gradient(circle, rgba(200, 155, 60, 0.35) 0%, rgba(31, 94, 75, 0.3) 60%, transparent 80%);
  filter: blur(30px);
}







/* Consolidated Sub-styles */


/* --- hero_luxury.css --- */
/* ============================================================
   ULTRA-PREMIUM LUXURY HERO SECTION ($100M WELLNESS BRAND STYLE)
   Canvas: 1920 x 980 px | Apple / Aesop / Momentous Inspired
   ============================================================ */

:root {
  --hero-primary-teal:   #029AFD;
  --hero-accent-green:  #5BC6FF;
  --hero-teal-light:     #EAF7FF;
  --hero-dark-text:      #022266;
  --hero-body-text:      #5F7391;
  --hero-muted-text:     #7D91AB;
  --font-manrope:        'Manrope', sans-serif;
  --font-inter:          'Inter', sans-serif;
}

.hero-luxury-section {
  position: relative;
  width: 100%;
  min-height: 980px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.95) 0%, rgba(243, 249, 255, 0.90) 50%, rgba(255, 255, 255, 0.95) 100%), url('../images/hero-bg.png') center/cover no-repeat;
  padding: 120px 0 90px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── Sunlight Glows ── */
.hero-sun-glow-overlay {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 154, 253, 0.18) 0%, rgba(2, 34, 102, 0.05) 45%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

.hero-concentric-ring {
  position: absolute;
  top: 48%;
  right: 22%;
  transform: translate(50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(2, 154, 253, 0.20);
  pointer-events: none;
  z-index: 1;
}
.hero-ring-lg { width: 720px; height: 720px; }
.hero-ring-md { width: 560px; height: 560px; }
.hero-ring-sm { width: 400px; height: 400px; }

/* ── Main Hero Container (1640px Max Width) ── */
.hero-luxury-container {
  max-width: 1640px;
  width: 100%;
  margin: 0 auto;
  padding-left: 140px;
  padding-right: 100px;
  position: relative;
  z-index: 3;
}

/* ── Left Content Wrapper (Max Width 620px) ── */
.hero-left-content {
  max-width: 620px;
  width: 100%;
}

.hero-small-badge {
  display: inline-block;
  font-family: var(--font-inter);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--hero-primary-teal);
  background: #EAF7FF;
  border: 1px solid #D9ECFF;
  padding: 8px 24px;
  border-radius: 999px;
  margin-bottom: 28px;
}

.hero-main-title {
  font-family: var(--font-manrope);
  font-size: 76px;
  font-weight: 900;
  color: var(--hero-dark-text);
  line-height: 88px;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}

.hero-wellness-highlight {
  background: linear-gradient(135deg, #022266 0%, #029AFD 50%, #5BC6FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.hero-description-text {
  font-family: var(--font-inter);
  font-size: 24px;
  font-weight: 400;
  color: var(--hero-body-text);
  line-height: 38px;
  max-width: 560px;
  margin-bottom: 42px;
}

/* ── CTA Buttons Row ── */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  padding: 0 38px;
  border-radius: 999px;
  background: #029AFD;
  color: #FFFFFF !important;
  font-family: var(--font-inter);
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(2, 154, 253, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  border: none;
}

.hero-btn-primary:hover {
  transform: scale(1.03);
  background: #0289E3;
  box-shadow: 0 18px 50px rgba(2, 34, 102, 0.12);
  color: #FFFFFF;
}

.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  padding: 0 38px;
  border-radius: 999px;
  background: #022266;
  color: #FFFFFF !important;
  font-family: var(--font-inter);
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  box-shadow: 0 10px 35px rgba(2, 34, 102, 0.08);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.hero-btn-secondary:hover {
  background: #03348F;
  transform: scale(1.03);
  box-shadow: 0 18px 50px rgba(2, 34, 102, 0.12);
  color: #FFFFFF;
}

/* ── Right Stage (Hero Product Image) ── */
.hero-right-stage {
  position: relative;
  width: 680px;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-product-main-img {
  width: 100%;
  max-width: 680px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 25px 50px rgba(2, 34, 102, 0.20));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  position: relative;
  z-index: 4;
}

.hero-product-main-img:hover {
  transform: translateY(-6px) scale(1.02);
  filter: drop-shadow(0 32px 60px rgba(2, 34, 102, 0.28));
}

/* ── Bottom Floating Glass Trust Bar ── */
.hero-trust-bar-wrap {
  width: 100%;
  margin-top: 50px;
  position: relative;
  z-index: 4;
  text-align: center;
}

.hero-trust-glass-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 20px 48px;
  background: #FFFFFF;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid #D9ECFF;
  border-radius: 999px;
  box-shadow: 0 10px 35px rgba(2, 34, 102, 0.08);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-manrope);
  font-size: 15px;
  font-weight: 700;
  color: var(--hero-dark-text);
  white-space: nowrap;
}

.hero-trust-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #EAF7FF;
  color: var(--hero-primary-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.hero-trust-divider {
  width: 1px;
  height: 26px;
  background: #D9ECFF;
}

/* Responsive Overrides */
@media (max-width: 1400px) {
  .hero-luxury-container { padding-left: 40px; padding-right: 40px; }
  .hero-main-title { font-size: 60px; line-height: 72px; }
  .hero-description-text { font-size: 20px; line-height: 32px; }
}

@media (max-width: 1199px) {
  .hero-luxury-section { padding: 80px 0 60px 0; min-height: auto; }
  .hero-right-stage { width: 100%; height: auto; margin-top: 50px; }
  .hero-podium-img { width: 100%; max-width: 520px; }
  .hero-bottle-center { width: 260px; }
  .hero-bottle-left, .hero-bottle-right { width: 220px; }
  .hero-trust-glass-container { flex-wrap: wrap; gap: 20px; border-radius: 24px; padding: 20px 24px; }
  .hero-trust-divider { display: none; }
}


/* --- apple_infographic.css --- */
:root {
  --apple-primary:   #029AFD;
  --apple-secondary: #022266;
  --apple-accent:    #5BC6FF;
  --apple-bg:        #F8FBFF;
  --apple-bg-alt:    #F3F9FF;
  --apple-text:      #022266;
  --apple-muted:     #5F7391;
  --font-manrope:    'Manrope', sans-serif;
  --font-inter:      'Inter', sans-serif;
}

/* ── Section Container (1400px Max-Width, 110px Top / 100px Bottom Padding) ── */
.apple-infographic-section {
  position: relative;
  background: radial-gradient(circle at 50% 45%, #EEF8F4 0%, #F8FCFA 55%, #FFFFFF 100%);
  padding: 110px 0 100px 0;
  min-height: 900px;
  overflow: hidden;
  border-top: 1px solid rgba(15, 118, 110, 0.08);
  border-bottom: 1px solid rgba(15, 118, 110, 0.08);
}

.apple-container-1400 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Atmosphere, Mint Glow (650px) & Background Rings ── */
.apple-mint-glow-650 {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.26) 0%, rgba(15, 118, 110, 0.1) 55%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}

/* 3 Transparent Rings behind bottle (8% opacity) */
.apple-ring-bg {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--apple-primary);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}
.apple-ring-1 { width: 580px; height: 580px; }
.apple-ring-2 { width: 460px; height: 460px; }
.apple-ring-3 { width: 340px; height: 340px; }

/* Botanical Corner Blurs & Floating Leaves */
.apple-botanical-blur {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(20, 184, 166, 0.08) 60%, transparent 80%);
  filter: blur(55px);
  pointer-events: none;
}
.apple-botanical-blur--tl { top: -60px; left: -60px; }
.apple-botanical-blur--br { bottom: -60px; right: -60px; }

.apple-floating-leaf {
  position: absolute;
  font-size: 20px;
  color: var(--apple-primary);
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
  animation: leafFloat 8s infinite alternate ease-in-out;
}
.apple-floating-leaf--1 { top: 35%; left: 34%; animation-delay: 0s; }
.apple-floating-leaf--2 { top: 68%; right: 35%; animation-delay: 2s; }
.apple-floating-leaf--3 { top: 76%; left: 38%; animation-delay: 4s; }

@keyframes leafFloat {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-12px) rotate(8deg); }
  100% { transform: translateY(-20px) rotate(-6deg); }
}

/* ── Header Content ── */
.apple-header-wrap {
  max-width: 700px;
  margin: 0 auto 65px auto;
  text-align: center;
}

.apple-pill-badge {
  display: inline-block;
  font-family: var(--font-manrope);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--apple-primary);
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.2);
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.apple-main-heading {
  font-family: var(--font-manrope);
  font-size: 42px;
  font-weight: 800;
  color: var(--apple-text);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.apple-heading-primary {
  color: var(--apple-primary);
  display: block;
}

.apple-main-paragraph {
  font-family: var(--font-inter);
  font-size: 15px;
  color: var(--apple-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Left & Right Columns (Width 360px, Symmetrical 3 Cards Each) ── */
.apple-left-col,
.apple-right-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 4;
}

.apple-glass-card-left,
.apple-glass-card-right {
  width: 360px;
  height: 125px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(15, 118, 110, 0.22);
  padding: 16px 20px;
  box-shadow: 0 10px 28px rgba(21, 60, 54, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.apple-glass-card-left:hover,
.apple-glass-card-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 118, 110, 0.18), inset 0 1px 0 #ffffff;
  border-color: var(--apple-primary);
}

/* ── 52px Circular Font Awesome Icon Badges (Slim & Sleek) ── */
.apple-circle-64 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(15, 118, 110, 0.09));
  border: 1.5px solid rgba(15, 118, 110, 0.25);
  color: var(--apple-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.apple-glass-card-left:hover .apple-circle-64,
.apple-glass-card-right:hover .apple-circle-64 {
  background: var(--apple-primary);
  color: #ffffff;
  border-color: var(--apple-primary);
  transform: scale(1.08);
}

.apple-card-title-22 {
  font-family: var(--font-manrope);
  font-size: 19px;
  font-weight: 700;
  color: var(--apple-text);
  line-height: 1.18;
  margin: 0 0 2px 0;
}

.apple-card-subtag {
  font-family: var(--font-manrope);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--apple-primary);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.apple-card-body-15 {
  font-family: var(--font-inter);
  font-size: 12.5px;
  color: var(--apple-muted);
  line-height: 1.38;
  margin: 0;
}

/* ── PROMINENT SVG CONNECTOR LINES & ARROWS ── */
.apple-center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 540px;
  min-height: 540px;
}

.apple-stage-svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible !important;
}

.apple-arrowhead {
  fill: none !important;
  stroke: var(--primary, #029AFD) !important;
  stroke-width: 2.5px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.apple-svg-connector {
  stroke: var(--apple-primary);
  stroke-dasharray: 8 6;
  stroke-width: 2.5px;
  stroke-linecap: round;
  fill: none;
  opacity: 0.88;
  animation: appleDashFlow 25s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(15, 118, 110, 0.25));
}

@keyframes appleDashFlow {
  to { stroke-dashoffset: -200; }
}

/* ── BOTTLE RESTING DIRECTLY ON PODIUM SURFACE (NO GAP / NO Mid-Air Elevation) ── */
.apple-bottle-wrapper {
  position: relative;
  z-index: 4;
  margin-bottom: -135px; /* Sits 100% FLUSH ON TOP of the marble podium! */
  text-align: center;
}

.apple-bottle-img-330 {
  width: 410px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 35px rgba(21, 60, 54, 0.35));
  transition: transform 0.4s ease;
}

.apple-bottle-img-330:hover {
  transform: scale(1.03);
}

.apple-podium-img-430 {
  width: 480px;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 18px 30px rgba(21, 60, 54, 0.18));
}

/* ── Bottom Trust Bar ── */
.apple-trust-bar-50 {
  margin-top: 50px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.apple-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 700;
  color: var(--apple-text);
}

.apple-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(15, 118, 110, 0.2);
}

.apple-trust-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.08);
  color: var(--apple-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .apple-left-col, .apple-right-col { width: 100%; }
  .apple-glass-card-left, .apple-glass-card-right { width: 100%; height: auto; }
  .apple-center-stage { width: 100%; min-height: auto; }
  .apple-bottle-wrapper { margin-bottom: -85px; }
  .apple-bottle-img-330 { width: 250px; }
  .apple-podium-img-430 { width: 340px; }
  .apple-stage-svg-overlay { display: none; }
}


/* --- no2_infographic.css --- */
/* ============================================================
   NO2 NITRIC OXIDE BOOSTER INFOGRAPHIC SECTION (BLUE LUXURY THEME)
   ============================================================ */

:root {
  --no2-primary:    #1565D8;
  --no2-secondary:  #4DA3FF;
  --no2-accent:     #00B7FF;
  --no2-bg:         #F7FBFF;
  --no2-text:       #143B63;
  --no2-muted:      #4A6B8D;
  --font-manrope:   'Manrope', sans-serif;
  --font-inter:     'Inter', sans-serif;
}

.no2-infographic-section {
  position: relative;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.88) 0%, rgba(238, 246, 255, 0.80) 50%, rgba(255, 255, 255, 0.90) 100%), url('../images/product_bg.png') center/cover no-repeat;
  padding: 110px 0 100px 0;
  min-height: 900px;
  overflow: hidden;
  border-top: 1px solid rgba(21, 101, 216, 0.1);
  border-bottom: 1px solid rgba(21, 101, 216, 0.1);
}

.no2-container-1400 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Atmosphere, Blue Radial Glow & Background Rings ── */
.no2-blue-glow-650 {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 163, 255, 0.28) 0%, rgba(21, 101, 216, 0.12) 55%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}

.no2-ring-bg {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--no2-primary);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}
.no2-ring-1 { width: 580px; height: 580px; }
.no2-ring-2 { width: 460px; height: 460px; }
.no2-ring-3 { width: 340px; height: 340px; }

/* ── Header Content ── */
.no2-header-wrap {
  max-width: 720px;
  margin: 0 auto 65px auto;
  text-align: center;
}

.no2-pill-badge {
  display: inline-block;
  font-family: var(--font-manrope);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--no2-primary);
  background: rgba(21, 101, 216, 0.08);
  border: 1px solid rgba(21, 101, 216, 0.22);
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.no2-main-heading {
  font-family: var(--font-manrope);
  font-size: 42px;
  font-weight: 800;
  color: var(--no2-text);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.no2-heading-highlight {
  background: linear-gradient(135deg, #1565D8 0%, #00B7FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.no2-main-paragraph {
  font-family: var(--font-inter);
  font-size: 15px;
  color: var(--no2-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Left & Right Columns (Width 360px, Symmetrical 3 Cards Each) ── */
.no2-left-col,
.no2-right-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 4;
}

.no2-glass-card-left,
.no2-glass-card-right {
  width: 360px;
  height: 125px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(77, 163, 255, 0.38);
  padding: 16px 20px;
  box-shadow: 0 10px 28px rgba(20, 59, 99, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.no2-glass-card-left:hover,
.no2-glass-card-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(21, 101, 216, 0.20), inset 0 1px 0 #ffffff;
  border-color: var(--no2-primary);
}

/* ── 52px Circular Blue Icon Badges (Slim & Sleek) ── */
.no2-circle-64 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.20), rgba(21, 101, 216, 0.09));
  border: 1.5px solid rgba(21, 101, 216, 0.25);
  color: var(--no2-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.no2-glass-card-left:hover .no2-circle-64,
.no2-glass-card-right:hover .no2-circle-64 {
  background: var(--no2-primary);
  color: #ffffff;
  border-color: var(--no2-primary);
  transform: scale(1.08);
}

.no2-card-title-22 {
  font-family: var(--font-manrope);
  font-size: 19px;
  font-weight: 700;
  color: var(--no2-text);
  line-height: 1.18;
  margin: 0 0 2px 0;
}

.no2-card-subtag {
  font-family: var(--font-manrope);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--no2-primary);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.no2-card-body-15 {
  font-family: var(--font-inter);
  font-size: 12.5px;
  color: var(--no2-muted);
  line-height: 1.38;
  margin: 0;
}

/* ── Center Stage: NO2 Bottle (Enlarged Hero Bottle) & Blue Connectors ── */
.no2-center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 540px;
  min-height: 540px;
}

.no2-stage-svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible !important;
}

.no2-arrowhead {
  fill: none !important;
  stroke: #2563EB !important;
  stroke-width: 2.5px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.no2-svg-connector {
  stroke: var(--no2-secondary);
  stroke-dasharray: 8 6;
  stroke-width: 2.5px;
  stroke-linecap: round;
  fill: none;
  opacity: 0.88;
  animation: no2DashFlow 25s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(21, 101, 216, 0.25));
}

@keyframes no2DashFlow {
  to { stroke-dashoffset: -200; }
}

.no2-bottle-wrapper {
  position: relative;
  z-index: 3;
  text-align: center;
}

.no2-bottle-img-330 {
  width: 420px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 45px rgba(20, 59, 99, 0.35));
  transition: transform 0.4s ease;
}

.no2-bottle-img-330:hover {
  transform: scale(1.03);
}

/* ── Bottom Trust Bar ── */
.no2-trust-bar-50 {
  margin-top: 50px;
  padding: 16px 36px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(77, 163, 255, 0.25);
  border-radius: 40px;
  box-shadow: 0 8px 24px rgba(20, 59, 99, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.no2-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 700;
  color: var(--no2-text);
}

.no2-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(21, 101, 216, 0.2);
}

.no2-trust-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(21, 101, 216, 0.08);
  color: var(--no2-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .no2-left-col, .no2-right-col { width: 100%; }
  .no2-glass-card-left, .no2-glass-card-right { width: 100%; height: auto; }
  .no2-center-stage { width: 100%; min-height: auto; }
  .no2-bottle-img-330 { width: 250px; }
  .no2-stage-svg-overlay { display: none; }
}


/* --- testo_infographic.css --- */
/* ============================================================
   TESTO BOOST INFOGRAPHIC SECTION (WARM ORANGE / AMBER LUXURY THEME)
   ============================================================ */

:root {
  --testo-primary:   #E53935;
  --testo-secondary: #FF7043;
  --testo-accent:    #FFA726;
  --testo-bg:        #FFF8F5;
  --testo-text:      #1F2937;
  --testo-muted:     #6B7280;
  --font-manrope:    'Manrope', sans-serif;
  --font-inter:      'Inter', sans-serif;
}

.testo-infographic-section {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 248, 245, 0.90) 0%, rgba(255, 242, 237, 0.82) 50%, rgba(255, 255, 255, 0.92) 100%), url('../images/testo-bg.png') center/cover no-repeat;
  padding: 110px 0 100px 0;
  min-height: 900px;
  overflow: hidden;
  border-top: 1px solid rgba(229, 57, 53, 0.1);
  border-bottom: 1px solid rgba(229, 57, 53, 0.1);
}

.testo-container-1400 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Atmosphere, Warm Glow (650px) & Background Rings ── */
.testo-warm-glow-650 {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 112, 67, 0.28) 0%, rgba(229, 57, 53, 0.12) 55%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}

.testo-ring-bg {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--testo-primary);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}
.testo-ring-1 { width: 580px; height: 580px; }
.testo-ring-2 { width: 460px; height: 460px; }
.testo-ring-3 { width: 340px; height: 340px; }

/* ── Header Content ── */
.testo-header-wrap {
  max-width: 700px;
  margin: 0 auto 65px auto;
  text-align: center;
}

.testo-pill-badge {
  display: inline-block;
  font-family: var(--font-manrope);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--testo-primary);
  background: rgba(229, 57, 53, 0.08);
  border: 1px solid rgba(229, 57, 53, 0.22);
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.testo-main-heading {
  font-family: var(--font-manrope);
  font-size: 42px;
  font-weight: 800;
  color: var(--testo-text);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.testo-heading-highlight {
  background: linear-gradient(135deg, #E53935 0%, #FF7043 50%, #FFA726 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.testo-main-paragraph {
  font-family: var(--font-inter);
  font-size: 15px;
  color: var(--testo-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Left Column Cards (Width 360px, 3 Cards) ── */
.testo-left-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  z-index: 4;
}

.testo-glass-card-left {
  width: 360px;
  height: 135px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 112, 67, 0.35);
  padding: 18px 22px;
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.testo-glass-card-left:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(229, 57, 53, 0.18), inset 0 1px 0 #ffffff;
  border-color: var(--testo-primary);
}

/* ── Right Column Cards (Width 360px, 4 Cards) ── */
.testo-right-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 4;
}

.testo-glass-card-right {
  width: 360px;
  height: 120px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 112, 67, 0.35);
  padding: 16px 20px;
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.testo-glass-card-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(229, 57, 53, 0.18), inset 0 1px 0 #ffffff;
  border-color: var(--testo-primary);
}

/* ── 52px Circular Orange Icon Badges ── */
.testo-circle-64 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 112, 67, 0.20), rgba(229, 57, 53, 0.09));
  border: 1.5px solid rgba(229, 57, 53, 0.25);
  color: var(--testo-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.testo-glass-card-left:hover .testo-circle-64,
.testo-glass-card-right:hover .testo-circle-64 {
  background: var(--testo-primary);
  color: #ffffff;
  border-color: var(--testo-primary);
  transform: scale(1.08);
}

.testo-card-title-22 {
  font-family: var(--font-manrope);
  font-size: 19px;
  font-weight: 700;
  color: var(--testo-text);
  line-height: 1.18;
  margin: 0 0 2px 0;
}

.testo-card-subtag {
  font-family: var(--font-manrope);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--testo-primary);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.testo-card-body-15 {
  font-family: var(--font-inter);
  font-size: 12.5px;
  color: var(--testo-muted);
  line-height: 1.38;
  margin: 0;
}

/* ── Center Stage: Testo Bottle & Orange Connectors ── */
.testo-center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 540px;
  min-height: 540px;
}

.testo-stage-svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible !important;
}

.testo-arrowhead {
  fill: none !important;
  stroke: #DC2626 !important;
  stroke-width: 2.5px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.testo-svg-connector {
  stroke: var(--testo-secondary);
  stroke-dasharray: 8 6;
  stroke-width: 2.5px;
  stroke-linecap: round;
  fill: none;
  opacity: 0.88;
  animation: testoDashFlow 25s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(229, 57, 53, 0.25));
}

@keyframes testoDashFlow {
  to { stroke-dashoffset: -200; }
}

.testo-bottle-wrapper {
  position: relative;
  z-index: 3;
  text-align: center;
}

.testo-bottle-img-330 {
  width: 400px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 45px rgba(31, 41, 55, 0.35));
  transition: transform 0.4s ease;
}

.testo-bottle-img-330:hover {
  transform: scale(1.03);
}

/* ── Bottom Trust Bar ── */
.testo-trust-bar-50 {
  margin-top: 50px;
  padding: 16px 36px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 112, 67, 0.28);
  border-radius: 40px;
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.testo-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 700;
  color: var(--testo-text);
}

.testo-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(229, 57, 53, 0.2);
}

.testo-trust-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(229, 57, 53, 0.08);
  color: var(--testo-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .testo-left-col, .testo-right-col { width: 100%; }
  .testo-glass-card-left, .testo-glass-card-right { width: 100%; height: auto; }
  .testo-center-stage { width: 100%; min-height: auto; }
  .testo-bottle-img-330 { width: 280px; }
  .testo-stage-svg-overlay { display: none; }
}


/* --- why_us.css --- */
/* ============================================================
   WHY CHOOSE US / BETTER LIVING SECTION (LUXURY WELLNESS STYLE)
   Reference Approved Aesthetics & Pixel-Perfect Polish
   ============================================================ */

:root {
  --why-primary:    #022266;
  --why-secondary:  #029AFD;
  --why-accent:     #5BC6FF;
  --why-glow:       rgba(2, 154, 253, 0.20);
  --why-bg:         #F8FBFF;
  --why-muted:      #5F7391;
  --font-manrope:   'Manrope', sans-serif;
  --font-inter:     'Inter', sans-serif;
}

.why-us-section {
  position: relative;
  width: 100%;
  min-height: 950px;
  background: radial-gradient(circle at 85% 15%, rgba(2, 154, 253, 0.12) 0%, rgba(248, 251, 255, 0.95) 55%, #F8FBFF 100%);
  padding: 110px 0 110px 0;
  overflow: hidden;
  border-top: 1px solid #D9ECFF;
  border-bottom: 1px solid #D9ECFF;
}

.why-us-container {
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  position: relative;
  z-index: 4;
}

/* ── Top Foliage Corner Overlays ── */
.why-foliage-tl {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 320px;
  height: 280px;
  background: radial-gradient(ellipse at top left, rgba(2, 154, 253, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

.why-foliage-tr {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 320px;
  height: 280px;
  background: radial-gradient(ellipse at top right, rgba(91, 198, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* ── Sunlight Glow & Floating Accents ── */
.why-sun-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 750px;
  height: 750px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 154, 253, 0.18) 0%, rgba(2, 34, 102, 0.05) 50%, transparent 75%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

/* Floating leaf elements */
.why-leaf-particle {
  position: absolute;
  color: #029AFD;
  opacity: 0.65;
  filter: drop-shadow(0 4px 10px rgba(2, 34, 102, 0.12));
  pointer-events: none;
  z-index: 5;
  animation: whyLeafFloat 6s ease-in-out infinite alternate;
}
.why-leaf-1 { top: 28%; left: 8%; font-size: 26px; animation-delay: 0s; }
.why-leaf-2 { top: 62%; left: 24%; font-size: 20px; animation-delay: 1.5s; }
.why-leaf-3 { top: 35%; right: 9%; font-size: 28px; animation-delay: 3s; }
.why-leaf-4 { top: 70%; right: 26%; font-size: 22px; animation-delay: 4.5s; }

@keyframes whyLeafFloat {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-12px) rotate(15deg); }
}

/* ── Header Wrapper ── */
.why-header-wrap {
  max-width: 780px;
  margin: 0 auto 70px auto;
  text-align: center;
}

.why-eyebrow-wrap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.why-eyebrow-line {
  width: 38px;
  height: 1.5px;
  background: #D9ECFF;
}

.why-eyebrow {
  font-family: var(--font-inter);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--why-secondary);
}

.why-main-heading {
  font-family: var(--font-manrope);
  font-size: 74px;
  font-weight: 800;
  line-height: 1.10;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #022266 0%, #029AFD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 22px;
}

.why-sub-heading {
  font-family: var(--font-inter);
  font-size: 21px;
  font-weight: 400;
  color: var(--why-muted);
  line-height: 1.62;
  margin: 0;
}

/* ── 4 Glass Cards Grid Layout ── */
.why-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.why-glass-card {
  border-radius: 24px;
  background: #FFFFFF;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid #D9ECFF;
  padding: 36px 26px 30px 26px;
  box-shadow: 0 10px 35px rgba(2, 34, 102, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.why-glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(2, 154, 253, 0.18);
  border-color: #029AFD;
}

/* ── Icon Holder ── */
.why-icon-holder {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #EAF7FF;
  border: 1px solid #D9ECFF;
  color: var(--why-secondary);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.why-glass-card:hover .why-icon-holder {
  transform: rotate(5deg);
  background: var(--why-secondary);
  color: #ffffff;
  border-color: var(--why-secondary);
  box-shadow: 0 12px 28px rgba(2, 154, 253, 0.35);
}

.why-card-eyebrow {
  font-family: var(--font-inter);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--why-secondary);
  margin-bottom: 6px;
}

.why-card-title {
  font-family: var(--font-manrope);
  font-size: 22px;
  font-weight: 800;
  color: var(--why-primary);
  line-height: 1.22;
  margin-bottom: 18px;
}

/* ── Card Image Visual Banner ── */
.why-card-img-wrap {
  width: 100%;
  height: 170px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 10px 24px rgba(2, 34, 102, 0.08);
}

.why-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.why-glass-card:hover .why-card-img-wrap img {
  transform: scale(1.08);
}

.why-card-desc {
  font-family: var(--font-inter);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--why-muted);
  line-height: 1.52;
  margin: 0 0 16px 0;
}

/* ── Accent Line below description ── */
.why-card-line-accent {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #022266, #029AFD);
  margin-top: auto;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .why-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .why-main-heading { font-size: 56px; }
}

@media (max-width: 768px) {
  .why-cards-grid { grid-template-columns: 1fr; }
  .why-main-heading { font-size: 42px; }
  .why-sub-heading { font-size: 18px; }
}


/* --- floating_cart.css --- */
/* The drawer is styled by CONTRACT ATTRIBUTE as well as by class.
   Keying only on .cart-drawer-overlay / .cart-drawer-panel made the styling
   depend on those exact class names: rename them and the drawer silently stops
   opening. The data-app selectors below are the ones app.js actually drives,
   so the drawer works regardless of what the theme calls its classes. Classes
   are kept so existing styling is untouched. */
/* --- Floating Slide-out Cart Layer Core Elements --- */
.cart-drawer-overlay,
[data-app="cart-overlay"] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.cart-drawer-overlay.drawer-open-active,
[data-app="cart-overlay"][data-app-open] {
    opacity: 1;
    visibility: visible;
}

.cart-drawer-panel,
[data-app="cart-overlay"] > [data-app="cart"] {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 440px;
    height: 100%;
    background-color: var(--bg-section);
    box-shadow: -10px 0 40px rgba(24, 53, 45, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer-overlay.drawer-open-active .cart-drawer-panel,
[data-app="cart-overlay"][data-app-open] > [data-app="cart"] {
    transform: translateX(0);
}

/* --- Headers setup --- */
.cart-drawer-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--card-bg);
}

.cart-drawer-title-group {
    display: flex;
    align-items: center;
}

.cart-drawer-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-display);
}

.cart-drawer-badge {
    font-size: 12px;
    font-weight: 600;
    background-color: var(--primary-green);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 10px;
}

.cart-drawer-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--body-text);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.2s;
}
.cart-drawer-close-btn:hover,
.cart-drawer-close-btn:focus {
    color: var(--accent-champagne);
}

/* --- Scrollable Content Rules --- */
.cart-drawer-items-container {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 240px);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

/* Clean Minimal Scrollbar Tracks */
.cart-drawer-items-container::-webkit-scrollbar {
    width: 5px;
}
.cart-drawer-items-container::-webkit-scrollbar-track {
    background: transparent;
}
.cart-drawer-items-container::-webkit-scrollbar-thumb {
    background: var(--primary-green);
    border-radius: 10px;
}

/* --- Dynamic Listing Design Layout --- */
.cart-drawer-item {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cart-drawer-item-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-item-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--heading-color);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.cart-item-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-green);
    margin: 0 0 8px 0;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    border-radius: 4px;
    padding: 2px;
}

.quantity-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--body-text);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.quantity-btn:hover,
.quantity-btn:focus {
    color: var(--primary-green);
}

.quantity-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading-color);
    padding: 0 8px;
    min-width: 20px;
    text-align: center;
}

.cart-item-remove-btn {
    background: none;
    border: none;
    color: var(--color-error);
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.cart-item-remove-btn:hover {
    opacity: 0.8;
}

/* --- Panel Footer Layer --- */
.cart-drawer-footer {
    padding: 24px;
    background-color: var(--bg-main);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cart-drawer-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cart-summary-label {
    font-size: 13px;
    color: var(--body-text);
    text-transform: uppercase;
}

.cart-summary-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
}

.cart-drawer-disclaimer {
    font-size: 12px;
    color: var(--muted-text);
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.cart-checkout-btn {
    width: 100%;
    background-color: var(--primary-green);
    color: #ffffff;
    border: 1px solid var(--primary-green);
    padding: 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.cart-checkout-btn:hover,
.cart-checkout-btn:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
}

.cart-view-bag-btn {
    width: 100%;
    background-color: transparent;
    color: var(--heading-color);
    border: 1px solid var(--border-color);
    padding: 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.cart-view-bag-btn:hover,
.cart-view-bag-btn:focus {
    background-color: var(--card-bg);
    border-color: var(--accent-champagne);
    color: var(--accent-champagne);
}

.cart-drawer-action-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* ============================================================
   Cart drawer, driven by the runtime's state attribute instead
   of .drawer-open-active toggled by cart.js.
   ============================================================ */
.cart-drawer-overlay[data-app-open],
[data-app="cart-overlay"][data-app-open] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cart-drawer-overlay[data-app-open] .cart-drawer-panel,
[data-app="cart-overlay"][data-app-open] > [data-app="cart"] {
    transform: translateX(0);
}


/* --- searchbar.css --- */
/* ==========================================
   SEARCH OVERLAY
========================================== */

.luxe-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0,0,0,.15);

    opacity: 0;
    visibility: hidden;

    transition: all .35s ease;
}

.luxe-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.luxe-search-panel {
    background: var(--bg-section);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    transform: translateY(-100%);
    transition: transform .45s ease;
}

.luxe-search-overlay.active .luxe-search-panel {
    transform: translateY(0);
}

.luxe-search-inner {
    max-width: 1360px;
    margin: 0 auto;

    padding: 70px 60px;
    position: relative;
}

.luxe-search-close {
    position: absolute;
    top: 32px;
    right: 48px;

    width: 40px;
    height: 40px;

    border: none;
    background: transparent;

    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--heading-color);
    transition: color 0.2s;
}
.luxe-search-close:hover,
.luxe-search-close:focus {
    color: var(--accent-champagne);
}

.luxe-search-content {
    max-width: 920px;
    margin: 0 auto;
}

.luxe-search-label {
    display: block;

    margin-bottom: 28px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--body-text);
    text-transform: uppercase;
}

.luxe-search-form {
    display: flex;
    align-items: center;
    gap: 36px;
}

.luxe-search-input {
    flex: 1;

    border: none;
    border-bottom: 1px solid var(--border-color);

    height: 64px;

    padding: 0;

    font-size: 24px;
    font-family: var(--font-display);
    color: var(--heading-color);

    background: transparent;
    outline: none;
    transition: border-color 0.25s ease;
}
.luxe-search-input:focus {
    border-bottom-color: var(--primary-green);
}

.luxe-search-input::placeholder {
    color: var(--muted-text);
    font-family: var(--font-body);
    font-size: 20px;
}

.luxe-search-submit {
    min-width: 180px;
    height: 64px;

    border: 1px solid var(--primary-green);
    border-radius: 4px;

    background: var(--primary-green);
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;

    cursor: pointer;
    transition: all .25s ease;
}

.luxe-search-submit:hover,
.luxe-search-submit:focus {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(31, 94, 75, 0.25);
}

@media (max-width: 991px) {

    .luxe-search-inner {
        padding: 80px 24px 40px;
    }

    .luxe-search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .luxe-search-submit {
        width: 100%;
    }

    .luxe-search-input {
        font-size: 20px;
    }
}
/* ============================================================
   Search overlay, driven by the runtime's state attribute
   instead of a .active class toggled by searchbar.js.
   Same visual result — different trigger.
   ============================================================ */
.luxe-search-overlay[data-app-open] {
    opacity: 1;
    visibility: visible;
}

.luxe-search-overlay[data-app-open] .luxe-search-panel {
    transform: translateY(0);
}

/* The close button is absolutely positioned but had no stacking context, so
   the panel's own content could sit over it and swallow the click. */
.luxe-search-close {
    z-index: 2;
}


/* --- about.css --- */
/* ==========================================================================
   LUXE EDITORIAL ADDITIONS – ABOUT US LAYOUT ENGINE
   Implements exact typography scales and color formatting.
   ========================================================================== */

/* Navigation Baseline Clearance Padding Fix */
.about-page-main.mt-nav {
    margin-top: 91px;
    background-color: var(--color-bg, #ffffff);
}

/* --- SECTION 1: THE ESSENCE INTRO SPECIFICS --- */
.about-essence-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.essence-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.essence-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--color-text-light, #444844);
   
}

.essence-image-frame {
    width: 100%;
    overflow: hidden;
    background-color: #F3F4F3;
}

.essence-visual-asset {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

/* --- SECTION 2: LESS IS CLARITY SPECIFICS --- */
.about-clarity-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background: #F3F4F3;
}

.clarity-image-frame {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.clarity-visual-placeholder {
    width: 100%;
    max-width: 452px;
    aspect-ratio: 3 / 4;
    /* Clean custom brown tone linear-gradient representation matching image styling */
    background: radial-gradient(circle at 30% 20%, #8D6E63 0%, #4E342E 60%, #2D1510 100%);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.2);
}

.clarity-visual-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clarity-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
}

.clarity-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 28px;
    letter-spacing: -0.01em;
}

.clarity-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text-light, #444844);
    max-width: 460px;
}

/* --- SECTION 3: MATERIAL & CRAFT GRID COMPLEX SPECIFICS --- */
.about-craft-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.craft-main-heading {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 12px;
}

.craft-heading-underline {
    width: 96px;
    height: 1px;
    background-color: var(--color-text, #1A1C1C);
}

/* Image wrappers & Gradient placeholders mapping layout graphics exactly */
.craft-bench-image-wrap {
    position: relative;
    width: 100%;
    height: 428px;
    overflow: hidden;
}

.craft-bench-asset-placeholder {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #6D5E54 0%, #3E322B 100%);
}

.craft-image-tag-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #ffffff;
    opacity: 0.8;
}

.craft-dark-logo-card {
    width: 100%;
    height: 428px;
    background-color: #181E1A;
    color: #ffffff;
    padding: 40px;
}

.craft-logo-icon-mark {
    font-size: 28px;
    opacity: 0.8;
}

.craft-logo-label-text {
    font-family: var(--font-display), 'Manrope', serif;
    font-size: 24px;
    font-weight: 600;
    font-style: italic;
    color: #FFFFFF;
}
.craft-logo-label-pretext {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #FFFFFF;
    margin-bottom: 4px;
}
/* Right Column Block Elements */
.craft-sourcing-info-card {
    width: 100%;
    height: 428px;
    background-color: #EFEFEF;
    padding: 40px;
}

.sourcing-card-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 24px;
}

.sourcing-card-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844;
    margin-bottom: 18px;
    max-width: 320px;
}

.sourcing-card-action-link {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: #111111;
    border-bottom: 1px solid #1c1c1c;
    display: inline-block;
    max-width: max-content;
    text-decoration: none;
}

.craft-scissors-image-wrap {
    width: 100%;
    height: 428px;
    overflow: hidden;
}

.craft-scissors-asset-placeholder {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #777777 0%, #222222 100%);
}

/* --- SECTION 4: BIG BLOCKQUOTE INTERLUDE SPECIFICS --- */
.about-quote-interlude-section {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: var(--color-bg, #ffffff);
    border-top: 1px solid #C4C7C34D;
    border-bottom: 1px solid #C4C7C34D;
}

.quote-decorative-mark {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    color: #CCCCCC;
    line-height: 40px;
    display: block;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.about-large-blockquote {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text, #1A1C1C);
    border: none;
    padding: 0;
    margin-bottom: 20px;
}

.about-blockquote-author {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    font-style: normal;
}

/* --- SECTION 5: THE JOURNAL GRID SYSTEM SPECIFICS --- */
.about-journal-section {
    padding-top: 120px;
    padding-bottom: 120px;
   
}

.journal-section-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #444844;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 4px;
}

.journal-section-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--color-text, #1A1C1C);
    margin: 0;
}

.journal-card-item {
    width: 100%;
}

.journal-card-image-wrap {
    width: 100%;
    height: 360px;
    aspect-ratio: 1 / 1.15;
    overflow: hidden;
    background-color: var(--color-bg-alt, #F3F4F3);
}

.journal-img-placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

.journal-card-image-wrap:hover .journal-img-placeholder {
    transform: scale(1.02);
}

/* Distinct high-contrast editorial gradient variants mimicking photography tone values exactly */
.journal-img-bg-1 { background: linear-gradient(135deg, #E0E0E0 0%, #888888 100%); }
.journal-img-bg-2 { background: linear-gradient(135deg, #FFFFFF 0%, #B0B0B0 100%); }
.journal-img-bg-3 { background: linear-gradient(135deg, #777777 0%, #111111 100%); }
.journal-img-bg-4 { background: linear-gradient(135deg, #A0A0A0 0%, #333333 100%); }

.journal-card-article-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 24px;
    line-height: 1.4;
}

.journal-card-article-excerpt {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-light, #444844);
    margin: 0;
}

/* ==========================================================================
   MEDIA CONTROLS AND RESPONSE MODIFIERS
   ========================================================================== */
@media (max-width: 992px) {
    .essence-display-title { font-size: 40px; }
    .essence-visual-asset { height: 400px; }
    .about-large-blockquote { font-size: 32px; }
    .clarity-image-frame { justify-content: center; margin-bottom: 24px; }
    .clarity-visual-placeholder { max-width: 100%; }
    .craft-sourcing-info-card{height: auto;}
    .about-journal-section .luxe-container .row:first-child .col-auto:first-child{margin-bottom: 20px;}
}

@media (max-width: 576px) {
    .essence-display-title { font-size: 34px; }
    .about-large-blockquote { font-size: 24px; }
    .about-essence-section { padding-top: 60px; padding-bottom: 60px; }
    .about-clarity-section { padding-top: 40px; padding-bottom: 60px; }
    .about-craft-section { padding-top: 60px; padding-bottom: 60px; }
    .about-quote-interlude-section { padding-top: 80px; padding-bottom: 80px; }
    .about-journal-section { padding-top: 60px; padding-bottom: 80px; }
}

/* --- app-override.css --- */
/*
 * .ignore-app-design
 * Overrides all rules defined in the app's base stylesheet.
 * Apply this class to any element whose subtree should be fully reset.
 */

/* ─── Layout & float helpers ─────────────────────────────────── */
.ignore-app-design,
.ignore-app-design .clear,
.ignore-app-design .clearfix:before,
.ignore-app-design .clearfix:after,
.ignore-app-design .left,
.ignore-app-design .right,
.ignore-app-design .float-left,
.ignore-app-design .alignLeft,
.ignore-app-design .alignRright,
.ignore-app-design .alignCenter {
    float: unset;
    clear: unset;
    content: unset;
    display: revert;
    margin: revert;
}

/* ─── Body / global resets ────────────────────────────────────── */
.ignore-app-design {
    margin: revert;
    padding: revert;
    font-family: revert;
    font-size: revert;
}

/* ─── Lists ───────────────────────────────────────────────────── */
.ignore-app-design li,
.ignore-app-design ul {
    list-style-type: revert;
}

/* ─── Images ──────────────────────────────────────────────────── */
.ignore-app-design a img,
.ignore-app-design img {
    height: revert;
    max-width: revert;
    border: revert;
}

/* ─── Text alignment helpers ──────────────────────────────────── */
.ignore-app-design .text-left   { text-align: revert; }
.ignore-app-design .text-right  { text-align: revert; }
.ignore-app-design .text-center { text-align: revert; }
.ignore-app-design .text-justify { text-align: revert; }

/* ─── Config error styles ─────────────────────────────────────── */
.ignore-app-design .config-errors h3 {
    padding: revert;
    margin: revert;
}
.ignore-app-design .config-errors ul {
    padding: revert;
    margin: revert;
}
.ignore-app-design .config-errors li {
    padding: revert;
    margin: revert;
    background-color: revert;
    border: revert;
    color: revert;
    font: revert;
}
.ignore-app-design .config-errors li strong {
    float: revert;
}

/* ─── Form inputs & selects ───────────────────────────────────── */
.ignore-app-design input[type=text],
.ignore-app-design input[type=search],
.ignore-app-design input[type=number],
.ignore-app-design input[type=password],
.ignore-app-design input[type=tel],
.ignore-app-design input[type=email],
.ignore-app-design select,
.ignore-app-design textarea {
    background: revert;
    border: revert;
    color: revert;
    height: revert;
    line-height: revert;
    width: revert;
    font-size: revert;
    padding: revert;
    outline: revert;
    font-family: revert;
    font-weight: revert;
    box-sizing: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
    -o-box-sizing: revert;
    -ms-box-sizing: revert;
}

.ignore-app-design textarea {
    padding: revert;
    height: revert;
}

.ignore-app-design select {
    line-height: revert;
    padding: revert;
    height: revert;
}

/* ─── Focus styles ────────────────────────────────────────────── */
.ignore-app-design input[type=text]:focus,
.ignore-app-design input[type=search]:focus,
.ignore-app-design input[type=password]:focus,
.ignore-app-design input[type=tel]:focus,
.ignore-app-design input[type=email]:focus,
.ignore-app-design select:focus,
.ignore-app-design textarea:focus {
    background: revert;
    box-shadow: revert;
    border: revert;
}

/* ─── Input validation states ─────────────────────────────────── */
.ignore-app-design input.has-error:not([name="agree-checkbox"]),
.ignore-app-design select.has-error:not([name="agree-checkbox"]) {
    background: revert;
    border: revert;
}

.ignore-app-design input.no-error:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ignore-app-design select.no-error {
    background: revert;
    border: revert;
}

.ignore-app-design input.loading,
.ignore-app-design select.loading {
    background: revert;
    border: revert;
}

/* ─── App benchmark bar ───────────────────────────────────────── */
.ignore-app-design .app-benchmark {
    position: revert;
    width: revert;
    left: revert;
    bottom: revert;
    padding: revert;
    background-color: revert;
    color: revert;
    text-align: revert;
}

/* ─── Modals & overlays ───────────────────────────────────────── */
.ignore-app-design #app_common_modal,
.ignore-app-design #error_handler_overlay {
    position: revert;
    top: revert;
    left: revert;
    padding: revert;
    margin: revert;
    width: revert;
    height: revert;
    z-index: revert;
    background: revert;
    display: revert;
    overflow-x: revert;
    -webkit-overflow-scrolling: revert;
}

.ignore-app-design #app_common_modal .app_modal_body,
.ignore-app-design #error_handler_overlay .error_handler_body {
    max-width: revert;
    -webkit-background-clip: revert;
    font-family: revert;
    box-sizing: revert;
    outline: revert;
}

.ignore-app-design #error_handler_overlay .error_handler_body {
    margin: revert;
    width: revert;
    padding: revert;
    background-color: revert;
    background-clip: revert;
    border: revert;
    border-radius: revert;
    -webkit-box-shadow: revert;
    box-shadow: revert;
    font-size: revert;
    line-height: revert;
    color: revert;
    position: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
}

.ignore-app-design #app_common_modal_close,
.ignore-app-design #error_handler_overlay_close {
    position: revert;
    right: revert;
    top: revert;
    color: revert;
    background-color: revert;
    border: revert;
    border-radius: revert;
    width: revert;
    height: revert;
    text-align: revert;
    cursor: revert;
    text-decoration: revert;
    font-weight: revert;
    line-height: revert;
    padding: revert;
    margin: revert;
}

.ignore-app-design #app_common_modal .app_modal_body {
    margin: revert;
    min-width: revert;
    width: revert;
    min-height: revert;
    padding: revert;
    background-color: revert;
    background-clip: revert;
    border: revert;
    border-radius: revert;
    -webkit-box-shadow: revert;
    box-shadow: revert;
    font-size: revert;
    line-height: revert;
    color: revert;
    position: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
    -ms-box-sizing: revert;
}

.ignore-app-design #app_common_modal .app_modal_body iframe {
    min-height: revert;
    width: revert;
    border: revert;
}

/* ─── Exit popup ──────────────────────────────────────────────── */
.ignore-app-design .exitpop-content {
    position: revert;
    height: revert;
    width: revert;
    margin: revert;
    top: revert;
    left: revert;
    text-align: revert;
    padding: revert;
    border: revert;
    z-index: revert;
}

.ignore-app-design .exitpopup-overlay {
    background: revert;
    height: revert;
    left: revert;
    position: revert;
    top: revert;
    width: revert;
    z-index: revert;
    display: revert;
}

.ignore-app-design .exitpop-content img {
    display: revert;
    margin: revert;
    position: revert;
    text-align: revert;
    max-width: revert;
    height: revert;
}

.ignore-app-design .exitpop-discountbar {
    background-color: revert;
    border-bottom: revert;
    color: revert;
    font-family: revert;
    font-size: revert;
    font-weight: revert;
    height: revert;
    line-height: revert;
    position: revert;
    text-align: revert;
    top: revert;
    width: revert;
    z-index: revert;
    display: revert;
}

/* ─── Load spinner ────────────────────────────────────────────── */
.ignore-app-design .app-load-spinner {
    display: revert;
    position: revert;
    top: revert;
    bottom: revert;
    left: revert;
    right: revert;
    width: revert;
    height: revert;
    margin: revert;
    background-color: revert;
    border-radius: revert;
}

/* ─── Generic .clear ──────────────────────────────────────────── */
.ignore-app-design .clear {
    line-height: revert;
    height: revert;
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.ignore-app-design .button:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design button:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design input[type=button]:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design input[type=submit]:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1) {
    border: revert;
    width: revert;
    display: revert;
    cursor: revert;
    position: revert;
    outline: revert;
    padding: revert;
    background: revert;
    color: revert;
    font-size: revert;
}

.ignore-app-design .button:hover,
.ignore-app-design button:hover,
.ignore-app-design input[type=button]:hover,
.ignore-app-design input[type=submit]:hover {
    background: revert;
}

/* ─── .defult (sic) form layout ───────────────────────────────── */
.ignore-app-design .defult {
    padding: revert;
}
.ignore-app-design .defult form label {
    width: revert;
    display: revert;
}
.ignore-app-design .defult input[type=text],
.ignore-app-design .defult input[type=search],
.ignore-app-design .defult input[type=number],
.ignore-app-design .defult input[type=password],
.ignore-app-design .defult input[type=tel],
.ignore-app-design .defult input[type=email],
.ignore-app-design .defult select,
.ignore-app-design .defult textarea {
    max-width: revert;
}
.ignore-app-design .defult .button,
.ignore-app-design .defult button,
.ignore-app-design .defult input[type=button],
.ignore-app-design .defult input[type=submit] {
    max-width: revert;
}

/* ─── Card types list ─────────────────────────────────────────── */
.ignore-app-design .all-card-types li {
    float: revert;
    margin-right: revert;
}

/* ─── Loading indicator ───────────────────────────────────────── */
.ignore-app-design #loading-indicator {
    background-color: revert;
    bottom: revert;
    box-sizing: revert;
    font-size: revert;
    height: revert;
    left: revert;
    margin: revert !important;
    padding: revert !important;
    position: revert;
    right: revert;
    top: revert;
    width: revert;
    z-index: revert;
}
.ignore-app-design #loading-indicator::before,
.ignore-app-design #loading-indicator::after {
    background: revert;
    border-radius: revert;
    color: revert;
    content: revert;
    font-family: revert;
    font-size: revert;
    height: revert;
    left: revert;
    line-height: revert;
    margin-left: revert;
    margin-top: revert;
    padding-top: revert;
    position: revert;
    text-align: revert;
    top: revert;
    width: revert;
    z-index: revert;
    box-sizing: revert;
}

/* ─── Inline error ────────────────────────────────────────────── */
.ignore-app-design span.cb-inline-error {
    margin-top: revert;
    font-weight: revert;
    color: revert;
    display: revert;
}

/* ─── Form element ────────────────────────────────────────────── */
.ignore-app-design form {
    padding: revert;
}

/* ─── Transaction modal ───────────────────────────────────────── */
.ignore-app-design .modal-wrap {
    position: revert;
    top: revert;
    bottom: revert;
    left: revert;
    right: revert;
    background-color: revert;
    overflow-y: revert;
}
.ignore-app-design .modal-dilog-part {
    width: revert;
    background-color: revert;
    border-radius: revert;
    margin: revert;
}
.ignore-app-design .transaction-modal-head {
    padding: revert;
    border-bottom: revert;
    display: revert;
    position: revert;
}
.ignore-app-design .transaction-modal-head-img {
    width: revert;
}
.ignore-app-design .transaction-heading {
    color: revert;
    font-size: revert;
    font-weight: revert;
    padding-left: revert;
}
.ignore-app-design .transaction-heading span {
    display: revert;
    color: revert;
    font-size: revert;
    font-weight: revert;
    margin-top: revert;
}
.ignore-app-design .close-btn {
    padding: revert;
    width: revert;
    background-color: revert;
    position: revert;
    right: revert;
    top: revert;
}
.ignore-app-design .close-btn:hover {
    background-color: revert;
}
.ignore-app-design .padding-box {
    padding: revert;
}
.ignore-app-design .security-heading {
    color: revert;
    font-size: revert;
    margin-bottom: revert;
    text-align: revert;
}
.ignore-app-design .ask-cell {
    color: revert;
    font-size: revert;
    margin-bottom: revert;
    cursor: revert;
}
.ignore-app-design .form-row {
    margin-bottom: revert;
}

/* ─── .form-input variants ────────────────────────────────────── */
.ignore-app-design input[type=text].form-input,
.ignore-app-design input[type=search].form-input,
.ignore-app-design input[type=number].form-input,
.ignore-app-design input[type=password].form-input,
.ignore-app-design input[type=tel].form-input,
.ignore-app-design input[type=email].form-input,
.ignore-app-design select.form-input,
.ignore-app-design textarea.form-input {
    border: revert;
    height: revert;
    border-radius: revert;
    padding: revert;
}

/* ─── Flex layout helpers ─────────────────────────────────────── */
.ignore-app-design .flex-row {
    display: revert;
    margin: revert;
}
.ignore-app-design .half-col {
    width: revert;
    padding: revert;
}
.ignore-app-design .d-flex {
    display: revert;
    align-items: revert;
    justify-content: revert;
}

/* ─── Submit button ───────────────────────────────────────────── */
.ignore-app-design .submit-btn {
    display: revert;
    width: revert;
    background-color: revert;
    padding: revert;
    font-size: revert;
    font-weight: revert;
    border-radius: revert;
}
.ignore-app-design .submit-btn:hover {
    background-color: revert;
}

/* ─── Thank / link / price ────────────────────────────────────── */
.ignore-app-design .thank-link {
    color: revert;
    font-size: revert;
    margin-right: revert;
    text-decoration: revert;
}
.ignore-app-design .total-price {
    color: revert;
    font-size: revert;
    font-weight: revert;
    line-height: revert;
}

/* ─── Info / tooltip ──────────────────────────────────────────── */
.ignore-app-design .info-wrap {
    position: revert;
}
.ignore-app-design .info-cell {
    position: revert;
    top: revert;
    right: revert;
}
.ignore-app-design .select-wrap {
    position: revert;
}
.ignore-app-design .select-wrap select {
    -webkit-appearance: revert;
}
.ignore-app-design .select-wrap:after {
    top: revert;
    right: revert;
    border: revert;
    content: revert;
    height: revert;
    width: revert;
    position: revert;
    pointer-events: revert;
    border-color: revert;
    border-top-color: revert;
    border-width: revert;
}
.ignore-app-design .info-cell:hover .tooltip {
    display: revert;
}
.ignore-app-design .tooltip {
    position: revert;
    border: revert;
    padding: revert;
    font-size: revert;
    background-color: revert;
    left: revert;
    min-width: revert;
    max-width: revert;
    margin-left: revert;
    top: revert;
    transform: revert;
    -webkit-transform: revert;
    display: revert;
}
.ignore-app-design .tooltip:after,
.ignore-app-design .tooltip:before {
    right: revert;
    top: revert;
    border: revert;
    content: revert;
    height: revert;
    width: revert;
    position: revert;
    pointer-events: revert;
}
.ignore-app-design .tooltip:after {
    border-color: revert;
    border-right-color: revert;
    border-width: revert;
    margin-top: revert;
}
.ignore-app-design .tooltip:before {
    border-color: revert;
    border-right-color: revert;
    border-width: revert;
    margin-top: revert;
}

/* ─── Cart styles ─────────────────────────────────────────────── */
.ignore-app-design span#cart-count {
    background-color: revert;
    border-radius: revert;
    width: revert;
    text-align: revert;
    margin: revert;
    font-size: revert;
    font-weight: revert;
    position: revert;
}
.ignore-app-design .total-text {
    border: revert;
    border-radius: revert;
    text-decoration: revert !important;
}
.ignore-app-design .cart-slider {
    width: revert;
    position: revert;
}
.ignore-app-design .cart-slider-body {
    margin-right: revert;
    z-index: revert;
    background-color: revert;
    box-shadow: revert;
}

/* ─── Navbar ──────────────────────────────────────────────────── */
.ignore-app-design .navbar:not(.cart-navbar) {
    overflow: revert;
    background-color: revert;
    position: revert !important;
    top: revert;
    width: revert;
    z-index: revert;
}
.ignore-app-design .navbar:not(.cart-navbar) a {
    float: revert;
    display: revert;
    color: revert;
    text-align: revert;
    padding: revert;
    text-decoration: revert;
}
.ignore-app-design .navbar:not(.cart-navbar) a:hover {
    background: revert;
    color: revert;
}
.ignore-app-design .main {
    margin-top: revert !important;
}

/* ─── Card text ───────────────────────────────────────────────── */
.ignore-app-design .card-text {
    min-height: revert;
}

/* ─── Address suggestions ─────────────────────────────────────── */
.ignore-app-design ul#address-suggestions {
    padding: revert;
    border: revert;
    border-radius: revert;
    margin-top: revert;
}
.ignore-app-design ul#address-suggestions li {
    margin-bottom: revert;
}
.ignore-app-design ul#address-suggestions li:last-child {
    margin-bottom: revert;
}

/* ─── Common modal header ─────────────────────────────────────── */
.ignore-app-design #commonModal .modal-header {
    justify-content: revert;
}

/* --- cart.css --- */
/* =============================================
   CART PAGE LAYOUT
   ============================================= */
.cart-page {
    min-height: calc(100vh - 140px);
    padding: 64px 0 100px;
    background: #F9F9F8;
}

.cart-page.mt-nav{margin-top: 91px;}

.cart-title {
    font-size: 52px;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 48px;
    line-height: 1.1;
    font-family: 'Manrope', serif;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: flex-start;
}

/* =============================================
   CART ITEMS SECTION
   ============================================= */
.cart-items-section {
    background-color: transparent;
}

/* Table Header */
.cart-table-header {
    display: grid;
    grid-template-columns: 1fr 160px 120px;
    padding-bottom: 16px;
    border-bottom: 1px solid #d4d4cc;
    margin-bottom: 0;
}

.cart-table-header span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #444844
}

.col-quantity,
.col-total {
    text-align: center;
}

/* Cart Items List */
.cart-items-list {
    border-bottom: 1px solid #d4d4cc;
}

/* Individual Cart Item */
.cart-item {
    display: grid;
    grid-template-columns: 1fr 160px 120px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid #e8e8e0;
    transition: opacity 0.3s ease;
}

.cart-item:last-child {
    border-bottom: none;
}

/* Product column */
.cart-item-product {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.cart-item-image {
    width: 100px;
    height: 126px;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #e8e8e0;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-item-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 4px;
}

.cart-item-name {
    font-size: 18px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 8px;
    line-height: 1.4;
}

.cart-item-meta {
    font-size: 16px;
    font-weight: 400;
    color: #444844;
    margin-bottom: 4px;
    line-height: 1.5;
}

.cart-item-remove {
    margin-top: 16px;
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #444844;
    cursor: pointer;
    text-align: left;
    display: inline-block;
    transition: color 0.2s ease;
    border-bottom: 1px solid #C4C7C380;
    text-underline-offset: 3px;
    max-width: max-content;
}

.cart-item-remove:hover {
    color: #1a1a1a;
}

/* Quantity column */

.cart-item-quantity_wrapper{
    display: grid;
    justify-content: space-evenly;
    gap: 20px;
    max-width: -webkit-fill-available;
    width: 100%;
}


.cart-item-quantity {
  display: flex;
  justify-content: start;
  align-items: start;
  margin-top: 7px;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 0;
}

.qty-btn {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 16px;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    line-height: 1;
}

.qty-btn:hover {
    background-color: #f5f5f0;
}

.qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.qty-value {
    min-width: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;
    user-select: none;
}

/* Total column */
.cart-item-total {
    text-align: center;
}

.item-total-price {
    font-size: 18px;
    font-weight: 500;
    color: #1a1a1a;
}

/* =============================================
   EMPTY CART
   ============================================= */
.cart-empty {
    padding: 80px 0;
    text-align: center;
}

.cart-empty-msg {
    font-size: 16px;
    font-weight: 300;
    color: #666666;
}

.cart-continue-link {
    display: inline-block;
    text-decoration: none;
    margin-top: 24px;
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 14px 32px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
}

.cart-continue-link:hover {
    background-color: #333333;
}

/* =============================================
   ORDER SUMMARY SIDEBAR
   ============================================= */
.order-summary {
    background-color: #ffffff;
    padding: 36px 32px 32px;
    position: sticky;
    top: 100px;
    border: 1px solid #C4C7C34D;
}

.summary-title {
    font-family: 'Manrope', serif;
    font-size: 32px;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 28px;
    line-height: 1.2;
}

.summary-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e8e8e0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.summary-label {
    font-size: 16px;
    font-weight: 400;
    color: #444844;
    font-family: 'Inter', sans-serif;
}

.summary-value {
    font-size: 16px;
    font-weight: 500;
    color: #1A1C1C;
}

.summary-muted {
    font-size: 16px;
    font-weight: 400;
    color: #1A1C1C;
}

/* Total row */
.summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 28px;
    padding-top: 4px;
}

.summary-total-label {
    font-size: 24px;
    font-weight: 400;
    color: #1a1a1a;
    font-family: 'Manrope', serif;
}

.summary-total-value {
    font-family: 'Manrope', serif;
    font-size: 24px;
    font-weight: 500;
    color: #1a1a1a;
}

/* Checkout button */
.btn-checkout {
    width: 100%;
    background-color: #1a1a1a;
    color: #ffffff;
    border: none;
    padding: 16px 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
    display: block;
}

.btn-checkout:hover {
    background-color: #333333;
}

.summary-note {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 0;
}

/* =============================================
   REMOVING ANIMATION
   ============================================= */
.cart-item.removing {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* =============================================
   RESPONSIVE — TABLET (max 968px)
   ============================================= */
@media (max-width: 968px) {
    .cart-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .order-summary {
        position: static;
    }

    .cart-title {
        font-size: 40px;
    }

    .cart-table-header {
        grid-template-columns: 1fr 120px 100px;
    }

    .cart-item {
        grid-template-columns: 1fr 120px 100px;
    }
}

/* =============================================
   RESPONSIVE — MOBILE (max 640px)
   ============================================= */
@media (max-width: 640px) {
    .cart-page {
        padding: 40px 0 60px;
    }

    .cart-title {
        font-size: 32px;
        margin-bottom: 32px;
    }

    .cart-table-header {
        display: none;
    }

    .cart-item {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 0;
        border-top: 1px solid #e8e8e0;
    }

    .cart-item:first-child {
        border-top: 1px solid #d4d4cc;
    }

    

    .cart-item-quantity,
    .cart-item-total {
        justify-content: flex-start;
        text-align: left;
    }

    .cart-item-quantity_wrapper{
        justify-content: space-between;max-width: 100%;margin-top: 20px;
    }

    .order-summary {
        padding: 28px 20px 24px;
    }


    .summary-title {
        font-size: 24px;
    }
}

/* --- checkout.css --- */
/* ==========================================
   CHECKOUT
========================================== */

.checkout-page {
  margin-top: 91px;
  background: #fafafa;
  min-height: 100vh;
}

.checkout-wrapper {
  display: grid;
  grid-template-columns: 1.45fr 420px;
  gap: 108px;
  padding: 72px 0 120px;
}

.checkout-steps {
  display: flex;
  gap: 12px;
  margin-bottom: 72px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #8f8f8f;
}

.checkout-steps .active {
  color: #1A1C1C;
}

.checkout-title,
.summary-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 42px;
}

.checkout-section {
  margin-bottom: 20px;
}

.form-group {
  position: relative;
  margin-bottom: 32px;
}

.form-group label {
  display: block;
  margin-bottom: 14px;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.form-group input,
.form-group select {
  width: 100%;
  height: 56px;

  border: 0;
  border-bottom: 1px solid #d6d6d6;
  background: transparent;

  font-size: 16px;
  padding: 0;
  outline: none;
}

.checkout-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.checkout-checkbox label {
  font-size: 16px;
  color: #555;
}

.checkout-actions {
  border-top: 1px solid #e6e6e6;

  padding-top: 48px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.return-cart {
  color: #1A1C1C;
  text-decoration: none;
}

.continue-btn {
  width: 245px;
  height: 58px;

  border: 0;
  background: #1A1C1C;
  color: white;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
}

.checkout-summary {
  padding-top: 8px;
}

.summary-products {
  border-bottom: 1px solid #ececec;
  padding-bottom: 32px;
}

.summary-product {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}

.product-thumb {
  width: 92px;
  height: 92px;
}

.product-thumb.bag {
  background: #dcdcdc;
}

.product-info {
  flex: 1;
}

.product-info h4 {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.product-info p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #666;
}

.discount-row {
  display: flex;
  gap: 14px;
}

.discount-row-wrapper{
  padding: 36px 0;
}

.discount-row input {
  flex: 1;

  border: 0;
  border-bottom: 1px solid #d8d8d8;
  background: transparent;

  height: 48px;
}

.discount-row button {
  width: 110px;
  border: 1px solid #1A1C1C;
  background: transparent;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}

.summary-totals {
  border-top: 1px solid #ececec;
  padding-top: 36px;
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
}

.summary-line {
  margin-bottom: 22px;
  font-size: 16px;
}

.summary-line .muted {
  color: #9b9b9b;
}

.summary-total {
  border-top: 1px solid #ececec;
  margin-top: 34px;
  padding-top: 38px;
  align-items: center;
}

.summary-total small {
  font-size: 12px;
  letter-spacing: .16em;
  margin-right: 12px;
  font-weight: 600;
}

.summary-total strong {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 58px;
}

.final_amount{
    display: flex;
    align-items: center;
}

@media (max-width: 992px) {
  .checkout-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .checkout-summary {
    order: -1;
  }

  .checkout-actions {
    flex-direction: column;
    gap: 24px;
  }
}



/* ==========================================
   CHECKOUT BILLING
   Extends checkout.css — billing-specific overrides & additions
========================================== */

/* ---- Billing page uses a simplified header ---- */
.billing-header {
  border-bottom: 1px solid #e8e8e8;
  padding: 22px 0;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
}

/* ---- Page ---- */
.checkout-page {
  margin-top: 0;          /* billing page has its own header */
  background: #fafafa;
  min-height: 100vh;
}

/* ---- Two-col layout (shared with checkout.css but redeclared for safety) ---- */
.checkout-wrapper {
  display: grid;
  grid-template-columns: 1.45fr 420px;
  gap: 108px;
  padding: 72px 0 120px;
}

/* ---- Breadcrumb / steps ---- */
.checkout-steps {
  display: flex;
  gap: 12px;
  margin-bottom: 56px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #8f8f8f;
  text-transform: uppercase;
}

.checkout-steps .active {
  color: #1A1C1C;
}

/* ---- Review info block (email / phone / address) ---- */
.review-block {
  margin-bottom: 56px;
}

.review-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 0px;
  border-bottom: 1px solid #f0f0f0;
}

.review-row:last-child {
  border-bottom: 0;
}

.review-label {
  font-size: 16px;
  color: #7F7F7F;
  min-width: 130px;
  padding-top: 2px;
}

.review-value {
  font-size: 16px;
  color: #1A1C1C;
  text-align: right;
  line-height: 1.6;
}

/* ---- Section titles ---- */
.checkout-title,
.summary-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 36px;
}


/* ---- Shipping options ---- */


.shipping-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px;
  border-bottom: 1px solid #b4b3b3;
  cursor: pointer;
  transition: background .15s;
}

/* .shipping-option:last-child {
  border-bottom: 0;
} */

.shipping-option:hover {
  background: #fafafa;
}

.shipping-option-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Custom radio */
.shipping-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c4c4c4;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .15s;
}

.shipping-option input[type="radio"]:checked {
  border-color: #1A1C1C;
}

.shipping-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A1C1C;
}

.shipping-option-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shipping-option-name {
  font-size: 16px;
  color: #1A1C1C;
}

.shipping-option-days {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #7F7F7F;
  text-transform: uppercase;
}

.shipping-option-price {
  font-size: 16px;
  color: #1A1C1C;
}

/* ---- Payment Method section ---- */


.payment-option {
  border-bottom: 1px solid #C4C7C3;
  cursor: pointer;
}

.payment-option:last-child {
  border-bottom: 0;
}

.payment-option-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0px;
  transition: background .15s;
}

.payment-option-header:hover {
  background: #fafafa;
}

/* reuse same custom radio style */
.payment-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c4c4c4;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .15s;
}

.payment-option input[type="radio"]:checked {
  border-color: #1A1C1C;
}

.payment-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A1C1C;
}

.payment-option-label {
  font-size: 14px;
  color: #1A1C1C;
}

/* PayPal / Afterpay logos */
.payment-logo {
  height: 22px;
  width: auto;
}

/* Card form inside credit card option */
.card-fields {
  padding: 15px 24px 28px 35px;
  display: none;
}

.card-fields.visible {
  display: block;
}

.form-group {
  position: relative;
  margin-bottom: 32px;
}

.form-group label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1A1C1C;
}

.form-group input,
.form-group select {
  width: 100%;
  height: 48px;
  border: 0;
  border-bottom: 1px solid #d6d6d6;
  background: transparent;
  font-size: 15px;
  padding: 0;
  outline: none;
  font-family: var(--font-body);
  color: #1A1C1C;
}

.form-group input::placeholder {
  color: #bbb;
  font-size: 14px;
}

.card-row {
  /* display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px; */
}

/* ---- Actions footer ---- */
.checkout-actions {
  border-top: 1px solid #e6e6e6;
  padding-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.return-cart {
  color: #1A1C1C;
  text-decoration: none;
  font-size: 16px;
}

.continue-btn {
  width: 245px;
  height: 58px;
  border: 0;
  background: #1A1C1C;
  color: white;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  cursor: pointer;
  transition: background .2s;
  font-family: var(--font-body);
  text-transform: uppercase;
}

.continue-btn:hover {
  background: #333;
}

/* ---- Order Summary sidebar (shared styles, re-declared for self-containment) ---- */
.checkout-summary {
  padding-top: 8px;
}

.summary-products {
  border-bottom: 1px solid #ececec;
  padding-bottom: 32px;
  margin-bottom: 0;
}

.summary-product {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
  position: relative;
}

.product-thumb {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  position: relative;
}

.product-thumb.bag {
  background: #dcdcdc;
}

/* quantity badge */
.qty-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #8f8f8f;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-info {
  flex: 1;
}

.product-info h4 {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 6px;
  font-weight: 400;
}

.product-info p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #444844;
  text-transform: uppercase;
}

.discount-row {
  display: flex;
  gap: 14px;
}

.discount-row input {
  flex: 1;
  border: 0;
  border-bottom: 1px solid #d8d8d8;
  background: transparent;
  height: 48px;
  outline: none;
  font-size: 14px;
  font-family: var(--font-body);
}

.discount-row input::placeholder {
  color: #7F7F7F;
}

.discount-row button {
  width: 110px;
  height: 48px;
  border: 1px solid #1A1C1C;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s, color .2s;
}

.discount-row button:hover {
  background: #1A1C1C;
  color: #fff;
}

.summary-totals {
  border-top: 1px solid #ececec;
  padding-top: 36px;
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
}

.summary-line {
  margin-bottom: 22px;
  font-size: 16px;
}

.summary-line .muted {
  color: #9b9b9b;
}

.summary-total {
  border-top: 1px solid #ececec;
  margin-top: 34px;
  padding-top: 38px;
  align-items: center;
}


.summary-total strong {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 58px;
}

.final_amount {
  display: flex;
  align-items: center;
  color: #444844;
}

/* ---- Billing footer ---- */
.billing-footer {
  border-top: 1px solid #e8e8e8;
  padding: 28px 0;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover {
  color: #1A1C1C;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {

  .billing-header .luxe-container{text-align: center;justify-content: center;}

  .checkout-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .checkout-summary {
    order: -1;
  }

  .checkout-actions {
    flex-direction: column;
    gap: 24px;
  }

  .continue-btn {
    width: 100%;
  }
}

@media(max-width:768px){
    .billing-footer .luxe-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .billing-footer-links{gap:25px;}
}

/* --- contact.css --- */
/* ==========================================================================
   LUXE CONCIERGE & CONTACT EDITORIAL SYSTEM ARCHITECTURE
   ========================================================================== */

/* Clears framework dynamic mobile nav offset safely */
.contact-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

/* --- SECTION 1: HERO DISPLAY OVERRIDES --- */
.contact-hero-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.contact-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 24px;
}

.contact-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.contact-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    margin: 0;
}

.contact-hero-image-frame {
    width: 100%;
    overflow: hidden;
    height: 620px;
}

.contact-hero-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- SECTION 2: INTERACTIVE DIRECT COMMS & FORM SPECIFICS --- */
.contact-interactive-grid-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.comms-node-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #444844;
    display: block;
    margin-bottom: 16px;
}

.comms-primary-link {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: #1A1C1C;
    text-decoration: none;
    display: block;
    transition: opacity 0.2s ease;
}

.comms-primary-link:hover {
    opacity: 0.6;
    color: #1A1C1C;
}

.comms-node-description {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844 ;
}

.studio-locations-list li {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #1A1C1C;
}

/* Structural Action Button Elements */
.btn-luxe-dark-solid {
    background-color: #111111;
    color: #ffffff;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 12px 28px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.btn-luxe-dark-solid:hover {
    background-color: #333333;
    color: #ffffff;
}

/* Minimal Line Engine Form Controls Formatting */
.form-input-node-group {
    border-bottom: 1px solid #111111;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
}

.form-node-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #444844;
    margin-bottom: 6px;
}

.form-node-control {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #1A1C1C;
    padding: 4px 0;
}

.form-node-control:focus {
    outline: none;
}

.text-area-resize-none {
    resize: none;
}

.btn-luxe-outline-dark-action {
    background-color: transparent;
    color: #111111;
    border: 1px solid #111111;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 12px 30px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-luxe-outline-dark-action:hover {
    background-color: #111111;
    color: #ffffff;
}

/* --- SECTION 3: TEXTURE MANIFESTO BANNER SPECIFICS --- */
.contact-manifesto-interlude-section {
    width: 100%;
    background-color: #E2DBD3;
    position:relative;
    overflow: hidden;
}

.contact-manifesto-interlude-section .section_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.contact-manifesto-interlude-section .section_bg img{ 
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.contact-manifesto-interlude-section > .container-fluid {
    position: relative;
    z-index: 2;
}

.manifesto-parallax-texture-box {
    width: 100%;
    /* Soft high-contrast linear smooth brown cream color gradient emulating rich fabric waves */
    padding-top: 550px;
    padding-bottom: 50px;
    box-shadow: inset 0 20px 40px rgba(0,0,0,0.03);position: relative;z-index: 1;
}

.manifesto-parallax-texture-box::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.6) 100%);
    pointer-events: none;
}

.manifesto-quote-prose-text {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

/* ==========================================================================
   MEDIA CONTROLS RESPONSE OVERRIDES
   ========================================================================== */
@media (max-width: 992px) {
    .contact-display-title { font-size: 40px; }
    .contact-hero-section { padding-top: 60px; padding-bottom: 40px; }
    .contact-interactive-grid-section { padding-top: 40px; padding-bottom: 80px; }
    .direct-comms-sidebar-wrapper { margin-bottom: 40px; }
    .enquiry-form-wrapper { padding-left: 0 !important; }
    .manifesto-parallax-texture-box { min-height: 360px; }
    .manifesto-quote-prose-text { font-size: 26px; }
}

@media (max-width: 576px) {
    .contact-display-title { font-size: 32px; }
    .comms-primary-link { font-size: 20px; }
    .btn-luxe-dark-solid, .btn-luxe-outline-dark-action { width: 100%; text-align: center; }
    .manifesto-quote-prose-text { font-size: 22px; }
}

/* --- privacy.css --- */
/* ==========================================================================
   LUXE DATA GOVERNANCE & PRIVACY STYLING ARCHITECTURE
   ========================================================================== */

/* Clears navbar layout offset */
.privacy-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

/* --- SECTION 1: HERO HEADER SYSTEM --- */
.privacy-hero-header {
    padding-top: 64px;
    padding-bottom: 64px;

}

.legal-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    display: block;
    margin-bottom: 18px;
}

.legal-display-title {
    font-family: var(--font-display), 'Manrope', serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.legal-header-motto {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: #444844;
    margin-bottom: 16px;
}

.legal-last-updated-date {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #7F7F7F;
    display: block;
}

/* --- SECTION 2: SIDEBAR & STREAM LAYOUT --- */
.privacy-content-layout-section {
    padding-top: 80px;
    padding-bottom: 140px;
}

/* Sticky Sidebar Framework Execution */
.sticky-toc-wrapper {
    position: sticky;
    top: 140px;
    padding-bottom: 20px;
}

.toc-header-title {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #1A1C1C;
    display: block;
    margin-bottom: 24px;
    border-bottom: 1px solid #C4C7C34D;
    padding-bottom: 12px;
}

.toc-navigation-list li {
    margin-bottom: 14px;
}

.toc-anchor-link {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444844;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}

.toc-anchor-link:hover, 
.toc-anchor-link.active {
    color: #1A1C1C;
    padding-left: 4px;
}

/* Legal Prose Content Layout Structure */
.legal-text-stream-wrapper {
    max-width: 720px;
}

.legal-stream-section-node {
    margin-bottom: 64px;

}

.legal-stream-section-node:last-of-type {
    border-bottom: none;
    margin-bottom: 40px;
}

.legal-node-section-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
    border-bottom: 1px solid #C4C7C34D;
    padding-bottom: 15px;
}

.legal-stream-paragraph {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    margin-bottom: 20px;
    text-align: justify;
}

.legal-stream-paragraph.bold-lead {
    font-weight: 400;
    color: #1A1C1C;
}

/* Definitions and Log files inner groupings */
.legal-sub-definition-box {
    margin-top: 28px;
}

.legal-definition-sub-title {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1A1C1C;
    margin-bottom: 8px;
}

/* Inquiries Segment Bottom Footer Panel */
.legal-inquiries-footer-block {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #1A1C1C;
}

.inquiries-caption-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #1A1C1C;
    display: block;
    margin-bottom: 8px;
}

.inquiries-mail-link {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: #1A1C1C;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.inquiries-mail-link:hover {
    opacity: 0.7;
    color: #1A1C1C;
}

.inquiries-schedule-text {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444844;
    margin-top: 10px;
    margin-bottom: 0;
}

/* ==========================================================================
   MEDIA CONTROLS & ADAPTATION DRIVERS
   ========================================================================== */
@media (max-width: 992px) {
    .legal-display-title { font-size: 38px; }
    .sticky-toc-wrapper { position: relative; top: 0; margin-bottom: 40px; border-bottom: 1px solid #EAEAEA; padding-bottom: 32px; }
    .toc-navigation-list { display: flex; flex-wrap: wrap; gap: 16px; }
    .toc-navigation-list li { margin-bottom: 0; }
    .privacy-content-layout-section { padding-top: 40px; padding-bottom: 80px; }
    .inquiries-mail-link { font-size: 24px; }
}

@media (max-width: 576px) {
    .legal-display-title { font-size: 32px; }
    .legal-header-motto { font-size: 16px; text-align: left !important; }
    .privacy-hero-header { padding-top: 60px; padding-bottom: 50px; }
    .toc-navigation-list { flex-direction: column; gap: 8px; }
}

/* --- search.css --- */
/* =============================================
   SEARCH PAGE — search.css
   Depends on: style.css (shared LUXE tokens)
   ============================================= */


/* =============================================
   SEARCH HEADER
   ============================================= */
   .search-header {
    padding: 64px 0 0;
    background: #F9F9F8;
}

.search-header.mt-nav{margin-top: 91px;}

/* Page title — matches cart-title / col-hero-title style */
.search-title {
    font-family: 'Manrope', serif;
    font-size: 64px;
    font-weight: 400;
    color: #1A1C1C;
    line-height: 1.1;
    margin-bottom: 64px;
}

/* Meta bar: tag pill left, count right */
.search-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 1px solid #d4d4cc;
}

/* Active query tag pill.
   On the desktop search page the chip sits directly in .search-meta-bar — its
   space-between puts the chip left and the count right, so the wrapper that
   used to hold it (and its second data-app hook) was doing nothing and is gone.
   The rule stays for mobile/search.html, which still uses the wrapper. */
.search-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #1A1C1C;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.3px;
    padding: 6px 12px 6px 14px;
    line-height: 1;
}

.search-tag-remove {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.search-tag-remove:hover {
    opacity: 1;
}

/* Results count */
.search-results-count {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    white-space: nowrap;
    /* Hold the right edge on a search with no query: the chip is hidden then,
       leaving the count as the only child, and space-between alone would pull
       it to the left. The empty wrapper used to reserve that space. */
    margin-left: auto;
}


/* =============================================
   SEARCH RESULTS GRID
   Reuses .shop-card, .shop-img-wrap, .shop-img-*,
   .shop-box-title, .shop-price from style.css
   ============================================= */
.search-results {
    background: #F9F9F8;
    padding: 40px 0 100px;
}


/* =============================================
   NO RESULTS STATE
   ============================================= */
.search-no-results {
    padding: 80px 0;
    text-align: center;
}

.search-no-results-msg {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #666666;
    margin-bottom: 24px;
}

.search-browse-link {
    display: inline-block;
    text-decoration: none;
    background-color: #1A1C1C;
    color: #ffffff;
    padding: 14px 32px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    transition: background-color 0.3s ease;
}

.search-browse-link:hover {
    background-color: #333333;
    color: #ffffff;
}


/* =============================================
   RESPONSIVE — TABLET (max 768px)
   ============================================= */
@media (max-width: 768px) {
    .search-title {
        font-size: 40px;
    }
}


/* =============================================
   RESPONSIVE — MOBILE (max 640px)
   ============================================= */
@media (max-width: 640px) {
    .search-header {
        padding: 40px 0 0;
    }

    .search-title {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .search-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 20px;
    }

    .search-results {
        padding: 28px 0 60px;
    }
}

/* --- shipping-returns.css --- */
/* ==========================================================================
   LUXE CUSTOMER CARE EDITORIAL DESIGN EXTENSION — SHIPPING & RETURNS
   ========================================================================== */

/* Clears the standard layout navigation bar footprint gracefully */
.shipping-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

.page_header {
    padding-bottom: 64px;
}

/* --- SECTION 1: HEADER & HERO LAYOUT MODULES --- */
.ship-hero-section {
    padding-top: 80px;
    padding-bottom: 100px;
}

.ship-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.ship-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.ship-header-lead-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    color: #444844;
    max-width: 646px;
    margin: 0;
}

.ship-hero-image-frame {
    width: 100%;
    overflow: hidden;
    background-color: #f7f7f7;
}

.ship-hero-asset {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

/* White Glove Segment Specifics */
.experience-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    letter-spacing: -0.01em;
    margin-bottom: 32px;
}

.experience-sub-node {
    max-width: 440px;
}

.experience-node-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #444844;
    display: block;
    margin-bottom: 10px;
}

.experience-node-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: #444844;
    margin: 0;
}

/* --- SECTION 2: RETURNS THREE-COLUMN PROCESS GRID --- */
.ship-returns-process-section {
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: #F3F4F3;
}

.returns-section-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 12px;
}

.returns-section-underline {
    width: 60px;
    height: 1px;
    background-color: #1A1C1C;
}

.process-editorial-card {
    background-color: #ffffff;
    border: 1px solid #C4C7C34D;
    height: auto;
    padding: 36px;
    gap:64px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.process-card-number-id {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-style: italic;
    color: #BBBBBB;
    line-height: 1;
    display: block;
}

.process-card-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 16px;
}

.process-card-description {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844;
    margin: 0;
    min-height: 105px;
}

/* --- SECTION 3: EDITORIAL ACCORDION MODULES --- */
.ship-guidelines-section {
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: #ffffff;
}

.guidelines-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
}

.luxe-accordion-group {
    border-top: 1px solid #EAEAEA;
}

.luxe-accordion-node {
    border-bottom: 1px solid #EAEAEA;
    overflow: hidden;
}

.luxe-accordion-trigger-btn {
    width: 100%;
    background: transparent;
    border: none;
    padding: 24px 0;
    text-align: left;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.luxe-accordion-trigger-btn:focus {
    outline: none;
}

.accordion-trigger-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #1A1C1C;
}

/* Architectural +/- minimalist pseudo icon state driver */
.accordion-status-icon-marker {
    position: relative;
    width: 12px;
    height: 12px;
    display: block;
}

.accordion-status-icon-marker::before,
.accordion-status-icon-marker::after {
    content: '';
    position: absolute;
    background-color: #1A1C1C;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Horizontal stem line element */
.accordion-status-icon-marker::before {
    top: 5px;
    left: 0;
    width: 12px;
    height: 1px;
}

/* Vertical stem line element */
.accordion-status-icon-marker::after {
    top: 0;
    left: 5px;
    width: 1px;
    height: 12px;
}

/* Interactive Open Target States Override togglers */
.luxe-accordion-node.target-active .accordion-status-icon-marker::after {
    transform: rotate(90deg);
}
.luxe-accordion-node.target-active .accordion-status-icon-marker::before {
    transform: rotate(90deg);
    opacity: 0;
}

.luxe-accordion-collapse-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxe-accordion-node.target-active .luxe-accordion-collapse-panel {
    max-height: 200px; /* Generous safe operational height cutoff ceiling */
}

.accordion-panel-body-inner {
    padding-bottom: 28px;
    max-width: 820px;
}

.accordion-panel-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: #444844;
    margin: 0;
}

/* --- SECTION 4: DARK RECOURSE RADIAL ASSISTANCE FOOTER --- */
.ship-assistance-dark-banner {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #181E1A;
    color: #ffffff;
}

.assistance-headline-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.assistance-sub-paragraph {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #959B96;
    max-width: 480px;
    margin: 0 auto;
}

/* Buttons Engineering Layout Styles */
.btn-luxe-solid-white {
    background-color: #ffffff;
    color: #111111;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 14px 36px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.btn-luxe-solid-white:hover {
    background-color: #E2E5E5;
    color: #111111;
}

.btn-luxe-outline-white {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 13px 36px;
    text-decoration: none;
    display: inline-block;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.btn-luxe-outline-white:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.03);
    color: #ffffff;
}

/* ==========================================================================
   RESPONSIVE MODIFICATION ENGINE
   ========================================================================== */
@media (max-width: 992px) {
    .ship-display-title { font-size: 44px; }
    .ship-hero-section { padding-top: 50px; padding-bottom: 60px; }
    .ship-hero-image-frame { margin-bottom: 32px; }
    .ship-returns-process-section { padding-top: 60px; padding-bottom: 60px; }
    .process-editorial-card { height: auto; min-height: 220px; }
    .ship-guidelines-section { padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 576px) {
    .ship-display-title { font-size: 36px; }
    .assistance-headline-title { font-size: 26px; }
    .assistance-btn-group { width: 100%; }
    .btn-luxe-solid-white, .btn-luxe-outline-white { width: 100%; text-align: center; }
}

/* --- shop.css --- */
/* ==========================================================
   PRODUCT DETAILS PAGE
========================================================== */

.product-details-section {
    padding: 120px 0 120px;
    background: #f9f9f8;
    overflow: hidden;
}

.product-details-row {
    align-items: flex-start;
}

/* ==========================================================
   BREADCRUMB
========================================================== */

.product-breadcrumb-wrapper {
    margin-bottom: 32px;
}

.product-breadcrumb {
    gap: 12px;
    flex-wrap: wrap;
}

.product-breadcrumb li,
.product-breadcrumb li a {
    color: #7F7F7F;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: 0.3s ease;
    text-transform: uppercase;
}

.product-breadcrumb li a:hover {
    color: #1a1c1c;
}

.product-breadcrumb li.active {
    color: #1a1c1c;
}

/* ==========================================================
   PRODUCT GALLERY
========================================================== */

.product-gallery-wrapper {
    position: relative;
}

.product-gallery-img {
    width: 100%;
    overflow: hidden;
    border-radius: 0px;
    background-color: #eceae6;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.product-gallery-img img{
    width: 100%;
}

.product-gallery-main {
    height: 760px;
    background-image: url('../images/product-main.jpg');
}

.product-gallery-thumb-one,
.product-gallery-thumb-two {
    height: 132px;
}

.product-gallery-thumb-one {
    background-image: url('../images/product-thumb-1.jpg');
}

.product-gallery-thumb-two {
    background-image: url('../images/product-thumb-2.jpg');
}

/* ==========================================================
   PRODUCT CONTENT
========================================================== */

.product-content-wrapper {
    max-width: 480px;
    margin-left: auto;
    position: sticky;
    top: 120px;
}

.product-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #eceae6;
    color: #1a1c1c;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.product-title {
    margin-bottom: 20px;
    color: #1a1c1c;
    font-family: 'Manrope', serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;
}

.product-price-wrapper {
    margin-bottom: 28px;
}

.product-price {
    color: #444844;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.product-tax {
    color: #777;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.product-description {
    margin-bottom: 42px;
    color: #444844;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
}

/* ==========================================================
   PRODUCT OPTIONS
========================================================== */

.product-option-block {
    margin-bottom: 32px;
}

.product-option-title {
    color: #444844;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;text-transform: uppercase;
}

.product-option-value,
.product-size-guide {
    color: #444844;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;text-transform: uppercase;
}

.product-size-guide:hover {
    color: #1a1c1c;
}

.product-color-wrapper {
    flex-wrap: wrap;
}

.product-color {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #5c5c5c;
    transition: 0.3s ease;
}

.product-color.beige {
    background: #c4b8a6;
}

.product-color.black {
    background: #111;
}

.product-color.active {
    border-color: #1a1c1c;
    box-shadow: 0 0 0 3px #d9d9d9;
}

.product-size-wrapper {
    flex-wrap: wrap;
}

.product-size-btn {
    min-width: 56px;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #d7d7d7;
    border-radius: 0px;
    background: transparent;
    color: #1a1c1c;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s ease;
}

.product-size-btn.active,
.product-size-btn:hover {
    background: #1a1c1c;
    border-color: #1a1c1c;
    color: #fff;
}

/* ==========================================================
   VARIANT RADIOS (product tags)
========================================================== */

.product-variant-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid #d7d7d7;
    border-radius: 0px;
    background: transparent;
    color: #1a1c1c;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s ease;
}

.product-variant-radio:hover {
    border-color: #1a1c1c;
}

/* attr-selected is what the unify package stamps on the default variant's
   <label>, so it is present in the server HTML and highlights the right
   option on first paint. :has(input:checked) then keeps the highlight in
   sync once variant-tags.js takes over the native checked state. */
.product-variant-radio[attr-selected="true"],
.product-variant-radio:has(input:checked) {
    background: #1a1c1c;
    border-color: #1a1c1c;
    color: #fff;
}

.product-variant-radio input[type="radio"] {
    accent-color: #1a1c1c;
    margin: 0;
}

.product-variant-radio:has(input:checked) input[type="radio"] {
    accent-color: #fff;
}

.product-variant-price {
    opacity: 0.75;
}

/* ==========================================================
   QUANTITY
========================================================== */

.product-quantity-wrapper {
    width: 170px;
    height: 56px;
    padding: 0 18px;
    border: 1px solid #d7d7d7;
    border-radius: 0px;
    background: #fff;
}

.qty-btn {
    padding: 0;
    border: 0;
    background: transparent;
    color: #1a1c1c;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.qty-count {
    color: #1a1c1c;
    font-size: 16px;
    font-weight: 600;
}

/* ==========================================================
   VARIANT SELECT
   The purchase-option dropdown beside Quantity. Left unstyled it renders as
   the raw OS control, which reads as an unfinished form field next to the
   flat quantity box. Matched to that box — same height, same border — so the
   two read as one pair of controls.

   appearance:none removes the native arrow along with the chrome, so the
   chevron is drawn as an inlined background SVG (no extra request).
========================================================== */
/* The title sits directly above the control, as Quantity's does. */
.product-variant-block .product-option-title {
    margin-bottom: 12px;
}

.product-variant-block select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 320px;
    height: 56px;
    padding: 0 44px 0 18px;
    border: 1px solid #d7d7d7;
    border-radius: 0;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231A1C1C' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    color: #1a1c1c;
    font-size: 16px;
    font-weight: 600;
    line-height: 56px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.product-variant-block select:hover,
.product-variant-block select:focus {
    outline: none;
    border-color: #1a1c1c;
}

/* ==========================================================
   BUTTONS
========================================================== */

.product-cta-wrapper {
    margin: 42px 0;
}

.product-primary-btn,
.product-secondary-btn {
    width: 100%;
    height: 60px;
    border-radius: 0px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.product-primary-btn {
    border: 1px solid #1a1c1c;
    background: #1a1c1c;
    color: #fff;
}

.product-primary-btn:hover {
    background: transparent;
    color: #1a1c1c;
}

.product-secondary-btn {
    border: 1px solid #d7d7d7;
    background: transparent;
    color: #1a1c1c;
}

.product-secondary-btn:hover {
    border-color: #1a1c1c;
    background: #1a1c1c;
    color: #fff;
}

/* ==========================================================
   PRODUCT INFO
========================================================== */

.product-info-wrapper {
    padding-top: 24px;
    border-top: 1px solid #e4e4e4;
}

.product-info-item {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #ececec;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    
}

.product-info-title {
    margin-bottom: 10px;
    color: #1a1c1c;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;text-transform: uppercase;
}

.product-info-text {
    margin-bottom: 0;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    width: 230px;
}

/* ==========================================================
   RELATED PRODUCTS
========================================================== */

.related-products-section {
    padding: 0 0 100px;
    background: #f9f9f8;
}

.section-heading-wrapper {
    margin-bottom: 20px;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 24px;
}

.section-heading {
    color: #1a1c1c;
    font-family: 'Manrope', serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.section-link {
    color: #1a1c1c;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

.section-link:hover {
    opacity: 0.7;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1199px) {

    .product-title {
        font-size: 46px;
    }

    .product-gallery-main {
        height: 680px;
    }
}

@media (max-width: 991px) {

    .product-details-section {
        padding: 40px 0 80px;
    }

    .product-content-wrapper {
        max-width: 100%;
        position: static;
    }

    .product-title {
        font-size: 42px;
    }

    .product-gallery-main {
        height: 520px;
    }

    .related-products-section {
        padding-bottom: 80px;
    }

    .product-details-section.mt-nav{margin-top: 91px;}
    .product-breadcrumb-wrapper{margin-bottom: 20px;}
}

@media (max-width: 767px) {

    .product-details-section {
        padding: 30px 0 60px;
    }

    .product-breadcrumb-wrapper {
        margin-bottom: 30px;
    }

    .product-title {
        font-size: 34px;
    }

    .product-price {
        font-size: 24px;
    }

    .product-description {
        font-size: 15px;
    }

    .product-gallery-main {
        height: 420px;
        border-radius: 16px;
    }

    .product-gallery-thumb-one,
    .product-gallery-thumb-two {
        height: 180px;
        border-radius: 16px;
    }

    .product-quantity-wrapper {
        width: 100%;
        max-width: 170px;
    }

    .section-heading {
        font-size: 30px;
    }

    .section-heading-wrapper {
        gap: 16px;
        flex-direction: column;
        align-items: flex-start !important;
    }
}

@media (max-width: 575px) {

    .product-title {
        font-size: 28px;
    }

    .product-gallery-main {
        height: 340px;
    }

    .product-gallery-thumb-one,
    .product-gallery-thumb-two {
        height: 140px;
    }

    .product-primary-btn,
    .product-secondary-btn {
        height: 54px;
    }
}
/* Selected variant — native :checked on the hidden radio, so no JS and no
   class toggling. Matches what .product-size-btn.active looked like. */
.product-size-btn:has(input:checked) {
    background: var(--color-text, #16181d);
    color: #fff;
    border-color: var(--color-text, #16181d);
}


/* --- sustainability.css --- */
/* ==========================================================================
   LUXE EDITORIAL ADDITIONS – SUSTAINABILITY SPECIFIC STYLING LAYOUT
   ========================================================================== */

/* Clearance buffer from the standard layout header bar */
.sustainability-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

/* --- SECTION 1: HERO LAYOUT RULES --- */
.sust-hero-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.page_header{padding-bottom: 64px;}

.sust-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 24px;
}

.sust-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.sust-display-title .serif-italic {
    font-style: italic;
    color: #747874;
}

.sust-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    margin: 0;
}

.sust-hero-image-frame {
    width: 100%;
    overflow: hidden;
}

.sust-hero-asset {
    width: 100%;
    height: auto;
    max-height: 580px;
    object-fit: cover;
    display: block;
}

/* --- SECTION 2: PRINCIPLES & TRACEABILITY LAYOUT RULES --- */
.sust-principles-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.sust-sourcing-image-box {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* Emulates the clean fiber sample photography tone values closely */
.sust-placeholder-fiber-graphic {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #F4F3EF 0%, #DCDAD4 70%, #B8B5AE 100%);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.06);
}

.sust-placeholder-fiber-graphic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sust-sourcing-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 20px;
}

.sust-sourcing-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #444844;
    text-align: justify;
}

/* Right Side Stacked Items Typography Rules */
.sust-principles-list-wrap {
    border-left: 1px solid #E5E5E5;
    padding-top: 50px;
    padding-bottom: 80px;
    margin-top: 40px;
}

.sust-list-header-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #181E1A;
    display: block;
    margin-bottom: 40px;
}

.principle-item-node {
    margin-bottom: 45px;
    max-width: 440px;
}

.principle-item-node:last-child {
    margin-bottom: 0;
}

.principle-node-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    color: #1A1C1C;
    margin-bottom: 10px;
}

.principle-node-desc {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844;
    margin: 0;
}

/* --- SECTION 3: ANTI-DISPOSABLE PHILOSOPHY LAYOUT RULES --- */
.sust-philosophy-statement-section {
    padding-top: 64px;
    padding-bottom: 0px;
}

.philosophy-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    display: block;
    margin-bottom: 20px;
}

.philosophy-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.2;
    color: #1A1C1C;
    margin-bottom: 36px;
    letter-spacing: -0.01em;
}

.underline {
    width: 80px;
    height: 1px;
    background-color: #181E1A;
    margin-bottom: 36px;
    margin-left: auto;
    margin-right: auto;
}

.philosophy-paragraph-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    max-width: 760px;
    margin-bottom: 0;
}

/* --- SECTION 4: THREE COLUMN RAW INGREDIENTS LAYOUT RULES --- */
.sust-materials-showcase-section {
    padding-top: 96px;
    padding-bottom: 64px;
}

.material-card-image-wrap {
    width: 100%;
    height: 460px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.material-card-image-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.material-img-fallback {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.material-showcase-card:hover .material-img-fallback {
    transform: scale(1.02);
}

/* Gradients simulating the high-end dark slate teal, rich tan leather splits, and artisanal looms */
.mat-gradient-blue { background: linear-gradient(145deg, #3A4B4C 0%, #1F2829 100%); }
.mat-gradient-leather { background: linear-gradient(145deg, #D49653 0%, #5E3919 100%); }
.mat-gradient-loom { background: linear-gradient(145deg, #D4CFC7 0%, #6E685E 100%); }

.material-card-caption-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #1A1C1C;
    display: block;
    margin-top: 14px;
}

/* --- SECTION 5: EDITORIAL LIST SIGNUP BOX LAYOUT RULES --- */
.sust-editorial-newsletter-section {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #F8F8F8;
    border-top: 1px solid #EBEBEB;
}

.newsletter-headline-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 12px;
}

.newsletter-sub-p {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444844;
    margin-bottom: 0;
}

.newsletter-inline-form-box {
    max-width: 520px;
    margin: 40px auto 0px;
    border-bottom: 1px solid #111111;
    padding-bottom: 6px;
}

.editorial-input-text-node {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    padding: 12px 10px 12px 0;
    color: #111111;
}

.editorial-input-text-node:focus {
    outline: none;
}

.editorial-input-text-node::placeholder {
    color: #999999;
}

.editorial-submit-btn-node {
    border: none;
    background-color: #111111;
    color: #ffffff;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 12px 32px;
    transition: background-color 0.2s ease;
}

.editorial-submit-btn-node:hover {
    background-color: #333333;
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM OVERRIDES
   ========================================================================== */
@media (max-width: 992px) {
    .sust-display-title { font-size: 42px; }
    .philosophy-main-title { font-size: 36px; }
    .sust-principles-list-wrap { border-left: none; padding-left: 0 !important; margin-top: 20px;padding-top: 0px; }
    .sust-hero-section { padding-top: 60px; padding-bottom: 40px; }
    .sust-principles-section { padding-top: 40px; padding-bottom: 60px; }
    .sust-philosophy-statement-section { padding-top: 60px; }
    .sust-materials-showcase-section { padding-bottom: 80px; }
}

@media (max-width: 576px) {
    .sust-display-title { font-size: 42px; }
    .philosophy-main-title { font-size: 28px; }
    .newsletter-inline-form-box { border-bottom: none; padding-bottom: 0; gap: 12px; }
    .editorial-input-text-node { border-bottom: 1px solid #111111; padding-left: 8px; }
}

/* --- thank_you.css --- */


/* ---- Header ---- */
.billing-header {
  border-bottom: 1px solid #e4e2de;
  padding: 22px 0;
  background: #f5f4f1;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Main content ---- */
.thankyou-main {
  padding: 64px 0 80px;
  background: #f5f4f1;
  min-height: calc(100vh - 67px - 72px);
}

.thankyou-main .luxe-container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

/* ---- Left: dark editorial image panel ---- */
.thankyou-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1.22;
  position: relative;
  overflow: hidden;
  background: #1e3035;   /* deep teal fallback that matches the photo */
}

.thankyou-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay text centred on the image */
.thankyou-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  /* only visible when no real image, or always if you want text over image */
}

.thankyou-img-overlay h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 18px;
}

/* thin rule under "Thank You" */
.thankyou-img-overlay h2::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,.5);
  margin: 16px auto 0;
}

.thankyou-img-overlay p {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
}

/* ---- Right: confirmation details ---- */
.thankyou-details {
  padding-top: 64px;
  display: flex;
  flex-direction: column;
}

.thankyou-brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .18em;
  color: #1A1C1C;
  margin-bottom: 48px;
}

.thankyou-headline {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  color: #1A1C1C;
  margin-bottom: 32px;
}

.thankyou-body {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 48px;
  max-width: 340px;
}

/* Divider */
.thankyou-divider {
  border: none;
  border-top: 1px solid #C4C7C3;
  margin-bottom: 36px;
}

/* Order reference block */
.thankyou-order-ref {
  margin-bottom: 48px;
}

.order-ref-label {
  font-size: 12px;
  color: #444844;
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 1.2px;

}

.order-ref-value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #1A1C1C;
}

/* CTA */
.btn-return {
  display: inline-block;
  width: 100%;
  max-width: 324px;
  height: 58px;
  background: #1A1C1C;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s;
  text-align: center;
  line-height: 58px;
  text-decoration: none;
}

.btn-return:hover {
  background: #333;
  color: #fff;
}

/* ---- Footer ---- */
.billing-footer {
  border-top: 1px solid #e4e2de;
  padding: 24px 0;
  background: #f5f4f1;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover { color: #1A1C1C; }

/* ---- Responsive ---- */

@media (max-width: 992px) {
  .billing-header .luxe-container{text-align: center;justify-content: center;}
}

@media (max-width: 900px) {
  .thankyou-main .luxe-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .thankyou-details {
    padding-top: 0;
  }

  .thankyou-headline {
    font-size: 52px;
  }

  .btn-return {
    max-width: 100%;
  }

  .billing-footer .luxe-container {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* --- upsell.css --- */
/* ==========================================
   UPSELL PAGE
========================================== */


.luxe-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #1A1C1C;
  text-decoration: none;
}

/* ---- Header ---- */
.billing-header {
  border-bottom: 1px solid #e8e8e8;
  padding: 22px 0;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Urgency banner ---- */
.urgency-banner {
  background: #1A1C1C;
  padding: 20px 0;
  text-align: center;
}

.urgency-banner p {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #fff;
  text-transform: uppercase;margin-bottom: 0;
}

/* ---- Hero product section ---- */
.upsell-hero {
  padding: 80px 0 96px;
}

.upsell-hero .luxe-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

/* Product image */
.upsell-img-wrap {
  width: 100%;
  height: 850px;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
}

.upsell-img-wrap img {
  width: 100%;
  /* height: 100%;
  object-fit: cover;
  display: block; */
}

/* Product details */
.upsell-details {
  padding-top: 48px;
}

.upsell-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  color: #1A1C1C;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.upsell-headline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: #1A1C1C;
  margin-bottom: 28px;
}

.upsell-description {
  font-size: 16px;
  line-height: 1.75;
  color: #444844;
  margin-bottom: 36px;
}

/* Pricing row */
.upsell-pricing {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  border-top:1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 32px;
}

.price-now {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  color: #1A1C1C;
  line-height: 1;
}

.price-was {
  font-size: 18px;
  color: #747874;
  text-decoration: line-through;
}

.price-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #1A1C1C;
  background: #D8ECBF;
  padding: 5px 10px;
  text-transform: uppercase;
  margin-left: auto;
}

/* Timer box */
.upsell-timer-box {
  border: 1px solid #e4e4e4;
  padding: 20px 24px;
  margin-bottom: 36px;
  background: #F3F4F3;
}

.timer-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #58614F;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.timer-label svg {
  width: 19px;
  height: 19px;
  stroke: #58614F;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.timer-text {
  font-size: 16px;
  font-style: italic;
  color: #555;
  line-height: 1.6;
}

.timer-text strong {
  font-style: normal;
  font-weight: 700;
  color: #1A1C1C;
}

/* CTA buttons */
.upsell-ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.btn-complete {
  display: block;
  width: 100%;
  height: 58px;
  background: #1A1C1C;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s;
  text-align: center;
  line-height: 58px;
  text-decoration: none;
}

.btn-complete:hover {
  background: #333;
  color: #fff;
}

.btn-skip {
  display: block;
  width: 100%;
  height: 58px;
  background: transparent;
  color: #1A1C1C;
  border: 1px solid #1A1C1C;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s, color .2s;
  text-align: center;
  line-height: 56px;
  text-decoration: none;
}

.btn-skip:hover {
  background: #1A1C1C;
  color: #fff;
}

/* ---- Feature grid ---- */
.upsell-features {
  padding: 0 0 100px;
}

.upsell-features .luxe-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feature-card {}

.feature-img {
  width: 100%;
  aspect-ratio: 1 / 0.85;
  overflow: hidden;
  background: #ddd;
  margin-bottom: 24px;
}

.feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}

/* placeholder colour swatches when no real images */
.feature-img--leather { background: #c8c3bc; }
.feature-img--interior { background: #b8b4ae; }
.feature-img--form     { background: #a8a5a0; }

.feature-number {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #1A1C1C;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.feature-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #444844;
}

/* ---- Footer ---- */
.billing-footer {
  border-top: 1px solid #e8e8e8;
  padding: 28px 0;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover { color: #1A1C1C; }

/* ---- Responsive ---- */

@media (max-width: 992px) {
  .billing-header .luxe-container{text-align: center;justify-content: center;}
}
@media (max-width: 768px) {
  .upsell-hero .luxe-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .upsell-details { padding-top: 0; }

  .upsell-headline { font-size: 30px; }

  .upsell-features .luxe-container {
    grid-template-columns: 1fr;
  }

  .billing-footer .luxe-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .billing-footer-links{gap:25px;}

    .upsell-img-wrap {height: auto;}
}


/* =============================================
   BUNDLED COMPONENT: about.css
   ============================================= */
/* ==========================================================================
   LUXE EDITORIAL ADDITIONS – ABOUT US LAYOUT ENGINE
   Implements exact typography scales and color formatting.
   ========================================================================== */

/* Navigation Baseline Clearance Padding Fix */
.about-page-main.mt-nav {
    margin-top: 91px;
    background-color: var(--color-bg, #ffffff);
}

/* --- SECTION 1: THE ESSENCE INTRO SPECIFICS --- */
.about-essence-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.essence-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.essence-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--color-text-light, #444844);
   
}

.essence-image-frame {
    width: 100%;
    overflow: hidden;
    background-color: #F3F4F3;
}

.essence-visual-asset {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

/* --- SECTION 2: LESS IS CLARITY SPECIFICS --- */
.about-clarity-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background: #F3F4F3;
}

.clarity-image-frame {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.clarity-visual-placeholder {
    width: 100%;
    max-width: 452px;
    aspect-ratio: 3 / 4;
    /* Clean custom brown tone linear-gradient representation matching image styling */
    background: radial-gradient(circle at 30% 20%, #8D6E63 0%, #4E342E 60%, #2D1510 100%);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.2);
}

.clarity-visual-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clarity-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
}

.clarity-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 28px;
    letter-spacing: -0.01em;
}

.clarity-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text-light, #444844);
    max-width: 460px;
}

/* --- SECTION 3: MATERIAL & CRAFT GRID COMPLEX SPECIFICS --- */
.about-craft-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.craft-main-heading {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 12px;
}

.craft-heading-underline {
    width: 96px;
    height: 1px;
    background-color: var(--color-text, #1A1C1C);
}

/* Image wrappers & Gradient placeholders mapping layout graphics exactly */
.craft-bench-image-wrap {
    position: relative;
    width: 100%;
    height: 428px;
    overflow: hidden;
}

.craft-bench-asset-placeholder {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #6D5E54 0%, #3E322B 100%);
}

.craft-image-tag-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #ffffff;
    opacity: 0.8;
}

.craft-dark-logo-card {
    width: 100%;
    height: 428px;
    background-color: #181E1A;
    color: #ffffff;
    padding: 40px;
}

.craft-logo-icon-mark {
    font-size: 28px;
    opacity: 0.8;
}

.craft-logo-label-text {
    font-family: var(--font-display), 'Manrope', serif;
    font-size: 24px;
    font-weight: 600;
    font-style: italic;
    color: #FFFFFF;
}
.craft-logo-label-pretext {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #FFFFFF;
    margin-bottom: 4px;
}
/* Right Column Block Elements */
.craft-sourcing-info-card {
    width: 100%;
    height: 428px;
    background-color: #EFEFEF;
    padding: 40px;
}

.sourcing-card-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 24px;
}

.sourcing-card-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844;
    margin-bottom: 18px;
    max-width: 320px;
}

.sourcing-card-action-link {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: #111111;
    border-bottom: 1px solid #1c1c1c;
    display: inline-block;
    max-width: max-content;
    text-decoration: none;
}

.craft-scissors-image-wrap {
    width: 100%;
    height: 428px;
    overflow: hidden;
}

.craft-scissors-asset-placeholder {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #777777 0%, #222222 100%);
}

/* --- SECTION 4: BIG BLOCKQUOTE INTERLUDE SPECIFICS --- */
.about-quote-interlude-section {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: var(--color-bg, #ffffff);
    border-top: 1px solid #C4C7C34D;
    border-bottom: 1px solid #C4C7C34D;
}

.quote-decorative-mark {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    color: #CCCCCC;
    line-height: 40px;
    display: block;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.about-large-blockquote {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text, #1A1C1C);
    border: none;
    padding: 0;
    margin-bottom: 20px;
}

.about-blockquote-author {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    font-style: normal;
}

/* --- SECTION 5: THE JOURNAL GRID SYSTEM SPECIFICS --- */
.about-journal-section {
    padding-top: 120px;
    padding-bottom: 120px;
   
}

.journal-section-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #444844;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 4px;
}

.journal-section-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--color-text, #1A1C1C);
    margin: 0;
}

.journal-card-item {
    width: 100%;
}

.journal-card-image-wrap {
    width: 100%;
    height: 360px;
    aspect-ratio: 1 / 1.15;
    overflow: hidden;
    background-color: var(--color-bg-alt, #F3F4F3);
}

.journal-img-placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

.journal-card-image-wrap:hover .journal-img-placeholder {
    transform: scale(1.02);
}

/* Distinct high-contrast editorial gradient variants mimicking photography tone values exactly */
.journal-img-bg-1 { background: linear-gradient(135deg, #E0E0E0 0%, #888888 100%); }
.journal-img-bg-2 { background: linear-gradient(135deg, #FFFFFF 0%, #B0B0B0 100%); }
.journal-img-bg-3 { background: linear-gradient(135deg, #777777 0%, #111111 100%); }
.journal-img-bg-4 { background: linear-gradient(135deg, #A0A0A0 0%, #333333 100%); }

.journal-card-article-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 24px;
    line-height: 1.4;
}

.journal-card-article-excerpt {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-light, #444844);
    margin: 0;
}

/* ==========================================================================
   MEDIA CONTROLS AND RESPONSE MODIFIERS
   ========================================================================== */
@media (max-width: 992px) {
    .essence-display-title { font-size: 40px; }
    .essence-visual-asset { height: 400px; }
    .about-large-blockquote { font-size: 32px; }
    .clarity-image-frame { justify-content: center; margin-bottom: 24px; }
    .clarity-visual-placeholder { max-width: 100%; }
    .craft-sourcing-info-card{height: auto;}
    .about-journal-section .luxe-container .row:first-child .col-auto:first-child{margin-bottom: 20px;}
}

@media (max-width: 576px) {
    .essence-display-title { font-size: 34px; }
    .about-large-blockquote { font-size: 24px; }
    .about-essence-section { padding-top: 60px; padding-bottom: 60px; }
    .about-clarity-section { padding-top: 40px; padding-bottom: 60px; }
    .about-craft-section { padding-top: 60px; padding-bottom: 60px; }
    .about-quote-interlude-section { padding-top: 80px; padding-bottom: 80px; }
    .about-journal-section { padding-top: 60px; padding-bottom: 80px; }
}


/* =============================================
   BUNDLED COMPONENT: app-override.css
   ============================================= */
/*
 * .ignore-app-design
 * Overrides all rules defined in the app's base stylesheet.
 * Apply this class to any element whose subtree should be fully reset.
 */

/* ─── Layout & float helpers ─────────────────────────────────── */
.ignore-app-design,
.ignore-app-design .clear,
.ignore-app-design .clearfix:before,
.ignore-app-design .clearfix:after,
.ignore-app-design .left,
.ignore-app-design .right,
.ignore-app-design .float-left,
.ignore-app-design .alignLeft,
.ignore-app-design .alignRright,
.ignore-app-design .alignCenter {
    float: unset;
    clear: unset;
    content: unset;
    display: revert;
    margin: revert;
}

/* ─── Body / global resets ────────────────────────────────────── */
.ignore-app-design {
    margin: revert;
    padding: revert;
    font-family: revert;
    font-size: revert;
}

/* ─── Lists ───────────────────────────────────────────────────── */
.ignore-app-design li,
.ignore-app-design ul {
    list-style-type: revert;
}

/* ─── Images ──────────────────────────────────────────────────── */
.ignore-app-design a img,
.ignore-app-design img {
    height: revert;
    max-width: revert;
    border: revert;
}

/* ─── Text alignment helpers ──────────────────────────────────── */
.ignore-app-design .text-left   { text-align: revert; }
.ignore-app-design .text-right  { text-align: revert; }
.ignore-app-design .text-center { text-align: revert; }
.ignore-app-design .text-justify { text-align: revert; }

/* ─── Config error styles ─────────────────────────────────────── */
.ignore-app-design .config-errors h3 {
    padding: revert;
    margin: revert;
}
.ignore-app-design .config-errors ul {
    padding: revert;
    margin: revert;
}
.ignore-app-design .config-errors li {
    padding: revert;
    margin: revert;
    background-color: revert;
    border: revert;
    color: revert;
    font: revert;
}
.ignore-app-design .config-errors li strong {
    float: revert;
}

/* ─── Form inputs & selects ───────────────────────────────────── */
.ignore-app-design input[type=text],
.ignore-app-design input[type=search],
.ignore-app-design input[type=number],
.ignore-app-design input[type=password],
.ignore-app-design input[type=tel],
.ignore-app-design input[type=email],
.ignore-app-design select,
.ignore-app-design textarea {
    background: revert;
    border: revert;
    color: revert;
    height: revert;
    line-height: revert;
    width: revert;
    font-size: revert;
    padding: revert;
    outline: revert;
    font-family: revert;
    font-weight: revert;
    box-sizing: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
    -o-box-sizing: revert;
    -ms-box-sizing: revert;
}

.ignore-app-design textarea {
    padding: revert;
    height: revert;
}

.ignore-app-design select {
    line-height: revert;
    padding: revert;
    height: revert;
}

/* ─── Focus styles ────────────────────────────────────────────── */
.ignore-app-design input[type=text]:focus,
.ignore-app-design input[type=search]:focus,
.ignore-app-design input[type=password]:focus,
.ignore-app-design input[type=tel]:focus,
.ignore-app-design input[type=email]:focus,
.ignore-app-design select:focus,
.ignore-app-design textarea:focus {
    background: revert;
    box-shadow: revert;
    border: revert;
}

/* ─── Input validation states ─────────────────────────────────── */
.ignore-app-design input.has-error:not([name="agree-checkbox"]),
.ignore-app-design select.has-error:not([name="agree-checkbox"]) {
    background: revert;
    border: revert;
}

.ignore-app-design input.no-error:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ignore-app-design select.no-error {
    background: revert;
    border: revert;
}

.ignore-app-design input.loading,
.ignore-app-design select.loading {
    background: revert;
    border: revert;
}

/* ─── App benchmark bar ───────────────────────────────────────── */
.ignore-app-design .app-benchmark {
    position: revert;
    width: revert;
    left: revert;
    bottom: revert;
    padding: revert;
    background-color: revert;
    color: revert;
    text-align: revert;
}

/* ─── Modals & overlays ───────────────────────────────────────── */
.ignore-app-design #app_common_modal,
.ignore-app-design #error_handler_overlay {
    position: revert;
    top: revert;
    left: revert;
    padding: revert;
    margin: revert;
    width: revert;
    height: revert;
    z-index: revert;
    background: revert;
    display: revert;
    overflow-x: revert;
    -webkit-overflow-scrolling: revert;
}

.ignore-app-design #app_common_modal .app_modal_body,
.ignore-app-design #error_handler_overlay .error_handler_body {
    max-width: revert;
    -webkit-background-clip: revert;
    font-family: revert;
    box-sizing: revert;
    outline: revert;
}

.ignore-app-design #error_handler_overlay .error_handler_body {
    margin: revert;
    width: revert;
    padding: revert;
    background-color: revert;
    background-clip: revert;
    border: revert;
    border-radius: revert;
    -webkit-box-shadow: revert;
    box-shadow: revert;
    font-size: revert;
    line-height: revert;
    color: revert;
    position: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
}

.ignore-app-design #app_common_modal_close,
.ignore-app-design #error_handler_overlay_close {
    position: revert;
    right: revert;
    top: revert;
    color: revert;
    background-color: revert;
    border: revert;
    border-radius: revert;
    width: revert;
    height: revert;
    text-align: revert;
    cursor: revert;
    text-decoration: revert;
    font-weight: revert;
    line-height: revert;
    padding: revert;
    margin: revert;
}

.ignore-app-design #app_common_modal .app_modal_body {
    margin: revert;
    min-width: revert;
    width: revert;
    min-height: revert;
    padding: revert;
    background-color: revert;
    background-clip: revert;
    border: revert;
    border-radius: revert;
    -webkit-box-shadow: revert;
    box-shadow: revert;
    font-size: revert;
    line-height: revert;
    color: revert;
    position: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
    -ms-box-sizing: revert;
}

.ignore-app-design #app_common_modal .app_modal_body iframe {
    min-height: revert;
    width: revert;
    border: revert;
}

/* ─── Exit popup ──────────────────────────────────────────────── */
.ignore-app-design .exitpop-content {
    position: revert;
    height: revert;
    width: revert;
    margin: revert;
    top: revert;
    left: revert;
    text-align: revert;
    padding: revert;
    border: revert;
    z-index: revert;
}

.ignore-app-design .exitpopup-overlay {
    background: revert;
    height: revert;
    left: revert;
    position: revert;
    top: revert;
    width: revert;
    z-index: revert;
    display: revert;
}

.ignore-app-design .exitpop-content img {
    display: revert;
    margin: revert;
    position: revert;
    text-align: revert;
    max-width: revert;
    height: revert;
}

.ignore-app-design .exitpop-discountbar {
    background-color: revert;
    border-bottom: revert;
    color: revert;
    font-family: revert;
    font-size: revert;
    font-weight: revert;
    height: revert;
    line-height: revert;
    position: revert;
    text-align: revert;
    top: revert;
    width: revert;
    z-index: revert;
    display: revert;
}

/* ─── Load spinner ────────────────────────────────────────────── */
.ignore-app-design .app-load-spinner {
    display: revert;
    position: revert;
    top: revert;
    bottom: revert;
    left: revert;
    right: revert;
    width: revert;
    height: revert;
    margin: revert;
    background-color: revert;
    border-radius: revert;
}

/* ─── Generic .clear ──────────────────────────────────────────── */
.ignore-app-design .clear {
    line-height: revert;
    height: revert;
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.ignore-app-design .button:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design button:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design input[type=button]:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design input[type=submit]:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1) {
    border: revert;
    width: revert;
    display: revert;
    cursor: revert;
    position: revert;
    outline: revert;
    padding: revert;
    background: revert;
    color: revert;
    font-size: revert;
}

.ignore-app-design .button:hover,
.ignore-app-design button:hover,
.ignore-app-design input[type=button]:hover,
.ignore-app-design input[type=submit]:hover {
    background: revert;
}

/* ─── .defult (sic) form layout ───────────────────────────────── */
.ignore-app-design .defult {
    padding: revert;
}
.ignore-app-design .defult form label {
    width: revert;
    display: revert;
}
.ignore-app-design .defult input[type=text],
.ignore-app-design .defult input[type=search],
.ignore-app-design .defult input[type=number],
.ignore-app-design .defult input[type=password],
.ignore-app-design .defult input[type=tel],
.ignore-app-design .defult input[type=email],
.ignore-app-design .defult select,
.ignore-app-design .defult textarea {
    max-width: revert;
}
.ignore-app-design .defult .button,
.ignore-app-design .defult button,
.ignore-app-design .defult input[type=button],
.ignore-app-design .defult input[type=submit] {
    max-width: revert;
}

/* ─── Card types list ─────────────────────────────────────────── */
.ignore-app-design .all-card-types li {
    float: revert;
    margin-right: revert;
}

/* ─── Loading indicator ───────────────────────────────────────── */
.ignore-app-design #loading-indicator {
    background-color: revert;
    bottom: revert;
    box-sizing: revert;
    font-size: revert;
    height: revert;
    left: revert;
    margin: revert !important;
    padding: revert !important;
    position: revert;
    right: revert;
    top: revert;
    width: revert;
    z-index: revert;
}
.ignore-app-design #loading-indicator::before,
.ignore-app-design #loading-indicator::after {
    background: revert;
    border-radius: revert;
    color: revert;
    content: revert;
    font-family: revert;
    font-size: revert;
    height: revert;
    left: revert;
    line-height: revert;
    margin-left: revert;
    margin-top: revert;
    padding-top: revert;
    position: revert;
    text-align: revert;
    top: revert;
    width: revert;
    z-index: revert;
    box-sizing: revert;
}

/* ─── Inline error ────────────────────────────────────────────── */
.ignore-app-design span.cb-inline-error {
    margin-top: revert;
    font-weight: revert;
    color: revert;
    display: revert;
}

/* ─── Form element ────────────────────────────────────────────── */
.ignore-app-design form {
    padding: revert;
}

/* ─── Transaction modal ───────────────────────────────────────── */
.ignore-app-design .modal-wrap {
    position: revert;
    top: revert;
    bottom: revert;
    left: revert;
    right: revert;
    background-color: revert;
    overflow-y: revert;
}
.ignore-app-design .modal-dilog-part {
    width: revert;
    background-color: revert;
    border-radius: revert;
    margin: revert;
}
.ignore-app-design .transaction-modal-head {
    padding: revert;
    border-bottom: revert;
    display: revert;
    position: revert;
}
.ignore-app-design .transaction-modal-head-img {
    width: revert;
}
.ignore-app-design .transaction-heading {
    color: revert;
    font-size: revert;
    font-weight: revert;
    padding-left: revert;
}
.ignore-app-design .transaction-heading span {
    display: revert;
    color: revert;
    font-size: revert;
    font-weight: revert;
    margin-top: revert;
}
.ignore-app-design .close-btn {
    padding: revert;
    width: revert;
    background-color: revert;
    position: revert;
    right: revert;
    top: revert;
}
.ignore-app-design .close-btn:hover {
    background-color: revert;
}
.ignore-app-design .padding-box {
    padding: revert;
}
.ignore-app-design .security-heading {
    color: revert;
    font-size: revert;
    margin-bottom: revert;
    text-align: revert;
}
.ignore-app-design .ask-cell {
    color: revert;
    font-size: revert;
    margin-bottom: revert;
    cursor: revert;
}
.ignore-app-design .form-row {
    margin-bottom: revert;
}

/* ─── .form-input variants ────────────────────────────────────── */
.ignore-app-design input[type=text].form-input,
.ignore-app-design input[type=search].form-input,
.ignore-app-design input[type=number].form-input,
.ignore-app-design input[type=password].form-input,
.ignore-app-design input[type=tel].form-input,
.ignore-app-design input[type=email].form-input,
.ignore-app-design select.form-input,
.ignore-app-design textarea.form-input {
    border: revert;
    height: revert;
    border-radius: revert;
    padding: revert;
}

/* ─── Flex layout helpers ─────────────────────────────────────── */
.ignore-app-design .flex-row {
    display: revert;
    margin: revert;
}
.ignore-app-design .half-col {
    width: revert;
    padding: revert;
}
.ignore-app-design .d-flex {
    display: revert;
    align-items: revert;
    justify-content: revert;
}

/* ─── Submit button ───────────────────────────────────────────── */
.ignore-app-design .submit-btn {
    display: revert;
    width: revert;
    background-color: revert;
    padding: revert;
    font-size: revert;
    font-weight: revert;
    border-radius: revert;
}
.ignore-app-design .submit-btn:hover {
    background-color: revert;
}

/* ─── Thank / link / price ────────────────────────────────────── */
.ignore-app-design .thank-link {
    color: revert;
    font-size: revert;
    margin-right: revert;
    text-decoration: revert;
}
.ignore-app-design .total-price {
    color: revert;
    font-size: revert;
    font-weight: revert;
    line-height: revert;
}

/* ─── Info / tooltip ──────────────────────────────────────────── */
.ignore-app-design .info-wrap {
    position: revert;
}
.ignore-app-design .info-cell {
    position: revert;
    top: revert;
    right: revert;
}
.ignore-app-design .select-wrap {
    position: revert;
}
.ignore-app-design .select-wrap select {
    -webkit-appearance: revert;
}
.ignore-app-design .select-wrap:after {
    top: revert;
    right: revert;
    border: revert;
    content: revert;
    height: revert;
    width: revert;
    position: revert;
    pointer-events: revert;
    border-color: revert;
    border-top-color: revert;
    border-width: revert;
}
.ignore-app-design .info-cell:hover .tooltip {
    display: revert;
}
.ignore-app-design .tooltip {
    position: revert;
    border: revert;
    padding: revert;
    font-size: revert;
    background-color: revert;
    left: revert;
    min-width: revert;
    max-width: revert;
    margin-left: revert;
    top: revert;
    transform: revert;
    -webkit-transform: revert;
    display: revert;
}
.ignore-app-design .tooltip:after,
.ignore-app-design .tooltip:before {
    right: revert;
    top: revert;
    border: revert;
    content: revert;
    height: revert;
    width: revert;
    position: revert;
    pointer-events: revert;
}
.ignore-app-design .tooltip:after {
    border-color: revert;
    border-right-color: revert;
    border-width: revert;
    margin-top: revert;
}
.ignore-app-design .tooltip:before {
    border-color: revert;
    border-right-color: revert;
    border-width: revert;
    margin-top: revert;
}

/* ─── Cart styles ─────────────────────────────────────────────── */
.ignore-app-design span#cart-count {
    background-color: revert;
    border-radius: revert;
    width: revert;
    text-align: revert;
    margin: revert;
    font-size: revert;
    font-weight: revert;
    position: revert;
}
.ignore-app-design .total-text {
    border: revert;
    border-radius: revert;
    text-decoration: revert !important;
}
.ignore-app-design .cart-slider {
    width: revert;
    position: revert;
}
.ignore-app-design .cart-slider-body {
    margin-right: revert;
    z-index: revert;
    background-color: revert;
    box-shadow: revert;
}

/* ─── Navbar ──────────────────────────────────────────────────── */
.ignore-app-design .navbar:not(.cart-navbar) {
    overflow: revert;
    background-color: revert;
    position: revert !important;
    top: revert;
    width: revert;
    z-index: revert;
}
.ignore-app-design .navbar:not(.cart-navbar) a {
    float: revert;
    display: revert;
    color: revert;
    text-align: revert;
    padding: revert;
    text-decoration: revert;
}
.ignore-app-design .navbar:not(.cart-navbar) a:hover {
    background: revert;
    color: revert;
}
.ignore-app-design .main {
    margin-top: revert !important;
}

/* ─── Card text ───────────────────────────────────────────────── */
.ignore-app-design .card-text {
    min-height: revert;
}

/* ─── Address suggestions ─────────────────────────────────────── */
.ignore-app-design ul#address-suggestions {
    padding: revert;
    border: revert;
    border-radius: revert;
    margin-top: revert;
}
.ignore-app-design ul#address-suggestions li {
    margin-bottom: revert;
}
.ignore-app-design ul#address-suggestions li:last-child {
    margin-bottom: revert;
}

/* ─── Common modal header ─────────────────────────────────────── */
.ignore-app-design #commonModal .modal-header {
    justify-content: revert;
}


/* =============================================
   BUNDLED COMPONENT: apple_infographic.css
   ============================================= */
/* ============================================================
   APPLE + AESOP + AG1 INSPIRED WELLNESS INFOGRAPHIC SECTION
   Client-Approved Composition & Pixel-Perfect Dimensions
   ============================================================ */

:root {
  --apple-primary:   #029AFD;
  --apple-secondary: #022266;
  --apple-accent:    #5BC6FF;
  --apple-bg:        #F8FBFF;
  --apple-bg-alt:    #F3F9FF;
  --apple-text:      #022266;
  --apple-muted:     #5F7391;
  --font-manrope:    'Manrope', sans-serif;
  --font-inter:      'Inter', sans-serif;
}

/* ── Section Container (1400px Max-Width, 110px Top / 100px Bottom Padding) ── */
.apple-infographic-section {
  position: relative;
  background: radial-gradient(circle at 50% 45%, #F3F9FF 0%, #F8FBFF 55%, #FFFFFF 100%);
  padding: 110px 0 100px 0;
  min-height: 900px;
  overflow: hidden;
  border-top: 1px solid rgba(15, 118, 110, 0.08);
  border-bottom: 1px solid rgba(15, 118, 110, 0.08);
}

.apple-container-1400 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Atmosphere, Mint Glow (650px) & Background Rings ── */
.apple-mint-glow-650 {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.26) 0%, rgba(15, 118, 110, 0.1) 55%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}

/* 3 Transparent Rings behind bottle (8% opacity) */
.apple-ring-bg {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--apple-primary);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}
.apple-ring-1 { width: 580px; height: 580px; }
.apple-ring-2 { width: 460px; height: 460px; }
.apple-ring-3 { width: 340px; height: 340px; }

/* Botanical Corner Blurs & Floating Leaves */
.apple-botanical-blur {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(20, 184, 166, 0.08) 60%, transparent 80%);
  filter: blur(55px);
  pointer-events: none;
}
.apple-botanical-blur--tl { top: -60px; left: -60px; }
.apple-botanical-blur--br { bottom: -60px; right: -60px; }

.apple-floating-leaf {
  position: absolute;
  font-size: 20px;
  color: var(--apple-primary);
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
  animation: leafFloat 8s infinite alternate ease-in-out;
}
.apple-floating-leaf--1 { top: 35%; left: 34%; animation-delay: 0s; }
.apple-floating-leaf--2 { top: 68%; right: 35%; animation-delay: 2s; }
.apple-floating-leaf--3 { top: 76%; left: 38%; animation-delay: 4s; }

@keyframes leafFloat {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-12px) rotate(8deg); }
  100% { transform: translateY(-20px) rotate(-6deg); }
}

/* ── Header Content ── */
.apple-header-wrap {
  max-width: 700px;
  margin: 0 auto 65px auto;
  text-align: center;
}

.apple-pill-badge {
  display: inline-block;
  font-family: var(--font-manrope);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--apple-primary);
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.2);
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.apple-main-heading {
  font-family: var(--font-manrope);
  font-size: 42px;
  font-weight: 800;
  color: var(--apple-text);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.apple-heading-primary {
  color: var(--apple-primary);
  display: block;
}

.apple-main-paragraph {
  font-family: var(--font-inter);
  font-size: 15px;
  color: var(--apple-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Left & Right Columns (Width 360px, Symmetrical 3 Cards Each) ── */
.apple-left-col,
.apple-right-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 4;
}

.apple-glass-card-left,
.apple-glass-card-right {
  width: 360px;
  height: 125px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(15, 118, 110, 0.22);
  padding: 16px 20px;
  box-shadow: 0 10px 28px rgba(21, 60, 54, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.apple-glass-card-left:hover,
.apple-glass-card-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 118, 110, 0.18), inset 0 1px 0 #ffffff;
  border-color: var(--apple-primary);
}

/* ── 52px Circular Font Awesome Icon Badges (Slim & Sleek) ── */
.apple-circle-64 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(15, 118, 110, 0.09));
  border: 1.5px solid rgba(15, 118, 110, 0.25);
  color: var(--apple-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.apple-glass-card-left:hover .apple-circle-64,
.apple-glass-card-right:hover .apple-circle-64 {
  background: var(--apple-primary);
  color: #ffffff;
  border-color: var(--apple-primary);
  transform: scale(1.08);
}

.apple-card-title-22 {
  font-family: var(--font-manrope);
  font-size: 19px;
  font-weight: 700;
  color: var(--apple-text);
  line-height: 1.18;
  margin: 0 0 2px 0;
}

.apple-card-subtag {
  font-family: var(--font-manrope);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--apple-primary);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.apple-card-body-15 {
  font-family: var(--font-inter);
  font-size: 12.5px;
  color: var(--apple-muted);
  line-height: 1.38;
  margin: 0;
}

/* ── PROMINENT SVG CONNECTOR LINES & ARROWS ── */
.apple-center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 540px;
  min-height: 540px;
}

.apple-stage-svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.apple-path-glow {
  stroke: rgba(2, 154, 253, 0.25);
  stroke-width: 4px;
  fill: none !important;
}

.apple-path-main {
  stroke: #029AFD;
  stroke-width: 2px;
  stroke-dasharray: 6 4;
  fill: none !important;
  stroke-linecap: round;
  animation: appleDashFlow 20s linear infinite;
}

.apple-dot-glow {
  fill: rgba(2, 154, 253, 0.25) !important;
  stroke: none !important;
}

.apple-dot-solid {
  fill: #029AFD !important;
  stroke: none !important;
}

.apple-ring-dashed {
  stroke: rgba(2, 154, 253, 0.20);
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
  fill: none !important;
}

.apple-svg-connector {
  stroke: var(--apple-primary);
  stroke-dasharray: 8 6;
  stroke-width: 2.5px;
  stroke-linecap: round;
  fill: none !important;
  opacity: 0.88;
  animation: appleDashFlow 25s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(15, 118, 110, 0.25));
}

@keyframes appleDashFlow {
  to { stroke-dashoffset: -200; }
}

/* ── BOTTLE RESTING DIRECTLY ON PODIUM SURFACE (NO GAP / NO Mid-Air Elevation) ── */
.apple-bottle-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.apple-bottle-img-330 {
  width: 440px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: -135px; /* Sits flush on top of podium! */
  position: relative;
  z-index: 4;
  filter: drop-shadow(0 32px 50px rgba(15, 118, 110, 0.38));
  transition: transform 0.4s ease;
}

.apple-bottle-img-330:hover {
  transform: scale(1.03);
}

.apple-podium-img-430 {
  width: 540px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 20px 35px rgba(15, 118, 110, 0.20));
}

/* ── Bottom Trust Bar ── */
.apple-trust-bar-50 {
  margin-top: 50px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.apple-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 700;
  color: var(--apple-text);
}

.apple-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(15, 118, 110, 0.2);
}

.apple-trust-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.08);
  color: var(--apple-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .apple-left-col, .apple-right-col { width: 100%; }
  .apple-glass-card-left, .apple-glass-card-right { width: 100%; height: auto; }
  .apple-center-stage { width: 100%; min-height: auto; }
  .apple-bottle-wrapper { margin-bottom: -85px; }
  .apple-bottle-img-330 { width: 250px; }
  .apple-podium-img-430 { width: 340px; }
  .apple-stage-svg-overlay { display: none; }
}



/* =============================================
   BUNDLED COMPONENT: built_for.css
   ============================================= */
/* ============================================================
   ULTRA-PREMIUM "BUILT FOR" PRODUCT HIGHLIGHTS SECTION
   ============================================================ */

.built-for-section {
  padding: 90px 0 100px;
  background: radial-gradient(circle at 50% 0%, rgba(241, 245, 249, 0.8) 0%, #ffffff 70%),
              linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

.built-for-header {
  margin-bottom: 60px;
}

.built-for-subhead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  background: #EAF7FF;
  border: 1px solid #D9ECFF;
  padding: 6px 18px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
}

.built-for-subhead .subhead-line {
  width: 20px;
  height: 1.5px;
  background: linear-gradient(90deg, #022266 0%, #029AFD 100%);
  display: inline-block;
}

.built-for-subhead .subhead-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #022266;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.built-for-subhead .subhead-text i {
  color: #029AFD;
  font-size: 13px;
}

.built-for-title {
  font-family: 'Manrope', serif;
  font-size: 44px;
  font-weight: 700;
  color: #022266;
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.built-for-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #5F7391;
  line-height: 1.65;
  margin: 0 auto;
}

/* 3-CARD SHOWCASE GRID */
.built-card-wrap {
  height: 100%;
}

.built-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #D9ECFF;
  box-shadow: 0 10px 35px rgba(2, 34, 102, 0.08);
  padding: 32px 28px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.built-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--built-theme-gradient, linear-gradient(90deg, #022266 0%, #029AFD 100%));
  opacity: 0.8;
}

.built-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(2, 154, 253, 0.18);
  border-color: #029AFD;
}

.built-card--emerald,
.built-card--crimson,
.built-card--sapphire {
  --built-theme-gradient: linear-gradient(90deg, #022266 0%, #029AFD 100%);
  --built-tag-bg: #EAF7FF;
  --built-tag-color: #029AFD;
}

.built-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--built-tag-color);
  background: var(--built-tag-bg);
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}

/* PNG IMAGE STAGE */
.built-img-stage {
  position: relative;
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.built-img-stage img {
  max-height: 200px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(15, 23, 42, 0.12));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.built-card:hover .built-img-stage img {
  transform: translateY(-6px) scale(1.04);
  filter: drop-shadow(0 22px 40px rgba(15, 23, 42, 0.18));
}

.built-card-title {
  font-family: 'Manrope', serif;
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.built-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 20px;
}

.built-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  text-align: left;
  width: 100%;
}

.built-features-list li {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.built-features-list li i {
  color: var(--primary, #029AFD);
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .built-for-title { font-size: 34px; }
  .built-img-stage { height: 180px; }
  .built-img-stage img { max-height: 160px; }
}

@media (max-width: 575px) {
  .built-for-title { font-size: 28px; }
  .built-card { padding: 24px 20px 28px; }
}



/* =============================================
   BUNDLED COMPONENT: cart.css
   ============================================= */
/* ============================================================
   ULTRA-LUXURY CART ENGINE & STYLING (SCOPED STRICTLY TO .cart-page)
   ============================================================ */

/* Force visibility of Unify CMS cart items container inside .cart-page ONLY */
.cart-page [data-app="cart-items"],
.cart-page .cart-items-section,
.cart-page #pageItems {
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
}

body.ignore-app-design .cart-page,
.cart-page {
  background: #F7F8F6 !important;
  min-height: 100vh !important;
  padding: 40px 0 100px 0 !important;
  font-family: 'Inter', sans-serif !important;
  position: relative !important;
}

/* Background ambient glow */
.cart-page::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 380px !important;
  background: radial-gradient(ellipse at top center, rgba(230, 244, 234, 0.55) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.cart-page .cart-header-wrap {
  margin-bottom: 36px !important;
  position: relative !important;
  z-index: 2 !important;
}

.cart-page .cart-sub-kicker {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #8C827A !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}

.cart-page .cart-title {
  font-family: 'Manrope', serif !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 6px !important;
  line-height: 1.1 !important;
}

.cart-page .cart-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #64748B !important;
  margin-bottom: 0 !important;
}

/* Grid Layout */
body.ignore-app-design .cart-page .cart-layout,
.cart-page .cart-layout {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 36px !important;
  align-items: start !important;
}

/* ── Main Cart Left Card Block ── */
.cart-page .cart-table-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 32px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03) !important;
}

body.ignore-app-design .cart-page .cart-table-header,
.cart-page .cart-table-header {
  display: grid !important;
  grid-template-columns: 1fr 140px 100px !important;
  padding-bottom: 16px !important;
  border-bottom: 1.5px solid #F1F5F9 !important;
  margin-bottom: 24px !important;
}

.cart-page .cart-table-header span {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
}

.cart-page .col-quantity,
.cart-page .col-total {
  text-align: center !important;
}

/* Cart Item Row */
body.ignore-app-design .cart-page .cart-item,
.cart-page .cart-item {
  display: grid !important;
  grid-template-columns: 1fr 140px 100px !important;
  align-items: center !important;
  padding: 24px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.cart-page .cart-item:last-child {
  border-bottom: none !important;
}

body.ignore-app-design .cart-page .cart-item-product,
.cart-page .cart-item-product {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

.cart-page .cart-item-image {
  width: 120px !important;
  height: 120px !important;
  flex-shrink: 0 !important;
  border-radius: 16px !important;
  background: radial-gradient(circle at center, #FFFFFF 40%, #F8FAFC 100%) !important;
  border: 1px solid #E2E8F0 !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.cart-page .cart-item-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

.cart-page .cart-item-name {
  font-family: 'Manrope', serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}

.cart-page .cart-item-unit-price {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 8px !important;
}

.cart-page .c-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.cart-page .c-badge svg {
  color: #029AFD !important;
}

.cart-page .cart-item-remove {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #7D91AB !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.2s ease !important;
  margin-top: 6px !important;
}

.cart-page .cart-item-remove:hover {
  color: #029AFD !important;
}

/* Quantity Control */
.cart-page .cart-item-quantity {
  display: flex !important;
  justify-content: center !important;
}

.cart-page .qty-control {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 108px !important;
  height: 40px !important;
  border: 1.5px solid #D9ECFF !important;
  border-radius: 30px !important;
  background: #FFFFFF !important;
  padding: 0 6px !important;
  box-shadow: 0 2px 6px rgba(2, 34, 102, 0.04) !important;
}

.cart-page .qty-btn {
  background: none !important;
  border: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #022266 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.cart-page .qty-btn:hover {
  background: #EAF7FF !important;
  color: #029AFD !important;
}

.cart-page .qty-value {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  min-width: 24px !important;
  text-align: center !important;
}

/* Total Column */
.cart-page .cart-item-total {
  text-align: center !important;
}

.cart-page .item-total-price {
  font-family: 'Manrope', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

/* Promo Code Box */
.cart-page .cart-promo-block {
  background: #FDFBF7 !important;
  border: 1px solid #F5E8D3 !important;
  border-radius: 16px !important;
  padding: 18px 24px !important;
}

.cart-page .cart-promo-icon-circle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #E6F4EA !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.cart-page .cart-promo-title {
  font-family: 'Manrope', serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

.cart-page .cart-promo-subtext {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  color: #64748B !important;
}

body.ignore-app-design .cart-page .cart-promo-input,
.cart-page .cart-promo-input {
  width: 200px !important;
  height: 44px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  outline: none !important;
  background: #FFFFFF !important;
}

.cart-page .cart-promo-btn {
  height: 44px !important;
  padding: 0 24px !important;
  border-radius: 10px !important;
  background: var(--secondary, #022266) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.cart-page .cart-promo-btn:hover {
  background: #03348F !important;
}

/* Recommendations Grid */
.cart-page .cart-rec-heading {
  font-family: 'Manrope', serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #022266 !important;
}

.cart-page .cart-rec-viewall {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  color: #029AFD !important;
}

.cart-page .cart-rec-card {
  background: #FFFFFF !important;
  border: 1px solid #D9ECFF !important;
  border-radius: 24px !important;
  padding: 16px !important;
  text-align: center !important;
  box-shadow: 0 10px 35px rgba(2, 34, 102, 0.08) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.cart-page .cart-rec-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 45px rgba(2, 154, 253, 0.18) !important;
  border-color: #029AFD !important;
}

.cart-page .cart-rec-img-wrap {
  height: 120px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cart-page .cart-rec-img-wrap img {
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.cart-page .cart-rec-name {
  font-family: 'Manrope', serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #022266 !important;
  margin-bottom: 2px !important;
}

.cart-page .cart-rec-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #5F7391 !important;
  margin-bottom: 8px !important;
}

.cart-page .cart-rec-price {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #022266 !important;
  margin-bottom: 12px !important;
}

.cart-page .cart-rec-add-btn {
  display: block !important;
  width: 100% !important;
  padding: 9px 0 !important;
  background: #029AFD !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(2, 154, 253, 0.25) !important;
  transition: all 0.3s ease !important;
}

.cart-page .cart-rec-add-btn:hover {
  background: #0289E3 !important;
  color: #FFFFFF !important;
  transform: scale(1.03) !important;
}

/* Order Summary Sidebar Card */
body.ignore-app-design .cart-page .order-summary,
.cart-page .order-summary {
  background: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 32px !important;
  border: 1px solid #D9ECFF !important;
  box-shadow: 0 10px 35px rgba(2, 34, 102, 0.08) !important;
  position: sticky !important;
  top: 100px !important;
}

.cart-page .summary-title {
  font-family: 'Manrope', serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #022266 !important;
  margin-bottom: 24px !important;
}

.cart-page .summary-rows {
  border-bottom: 1.5px solid #F3F9FF !important;
  padding-bottom: 18px !important;
  margin-bottom: 20px !important;
}

.cart-page .summary-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  color: #5F7391 !important;
}

.cart-page .summary-value.text-emerald {
  color: #16C784 !important;
  font-weight: 700 !important;
}

.cart-page .summary-total-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
}

.cart-page .summary-total-label {
  font-family: 'Manrope', serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #022266 !important;
}

.cart-page .summary-total-value {
  font-family: 'Manrope', serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #022266 !important;
}

/* Proceed to Checkout CTA Button */
body.ignore-app-design .cart-page .btn-checkout,
.cart-page .btn-checkout {
  width: 100% !important;
  height: 56px !important;
  border-radius: 999px !important;
  background: #029AFD !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(2, 154, 253, 0.25) !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
}

.cart-page .btn-checkout:hover {
  background: #0289E3 !important;
  transform: scale(1.03) !important;
  box-shadow: 0 18px 50px rgba(2, 34, 102, 0.12) !important;
  color: #FFFFFF !important;
}

/* Trust Box */
.cart-page .cart-trust-box {
  background: #F3F9FF !important;
  border: 1px solid #D9ECFF !important;
  border-radius: 16px !important;
  padding: 16px 12px !important;
}

.cart-page .cart-trust-box.grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}

.cart-page .trust-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
}

.cart-page .trust-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  color: #64748B !important;
}

/* Payment Pills */
.cart-page .pay-pill {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #1E3A8A !important;
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

.cart-page .pay-pill.red {
  color: #991B1B !important;
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
}

.cart-page .pay-pill.blue {
  color: #0369A1 !important;
  background: #F0F9FF !important;
  border-color: #BAE6FD !important;
}

.cart-page .pay-pill.paypal {
  color: #1D4ED8 !important;
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
}

.cart-page .pay-pill.apple {
  color: #0F172A !important;
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* Responsive */
@media (max-width: 991px) {
  body.ignore-app-design .cart-page .cart-layout,
  .cart-page .cart-layout {
    grid-template-columns: 1fr !important;
  }
  .cart-page .cart-promo-block {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cart-page .cart-promo-input {
    width: 100% !important;
  }
}


/* =============================================
   BUNDLED COMPONENT: checkout.css
   ============================================= */
/* ==========================================
   CHECKOUT
========================================== */

.checkout-page {
  margin-top: 91px;
  background: #fafafa;
  min-height: 100vh;
}

.checkout-wrapper {
  display: grid;
  grid-template-columns: 1.45fr 420px;
  gap: 108px;
  padding: 72px 0 120px;
}

.checkout-steps {
  display: flex;
  gap: 12px;
  margin-bottom: 72px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #8f8f8f;
}

.checkout-steps .active {
  color: #1A1C1C;
}

.checkout-title,
.summary-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 42px;
}

.checkout-section {
  margin-bottom: 20px;
}

.form-group {
  position: relative;
  margin-bottom: 24px !important;
}

.form-group label {
  display: block !important;
  margin-bottom: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #334155 !important;
}

.form-group input,
.form-group select,
.ignore-app-design .form-group input,
.ignore-app-design .form-group select,
.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="tel"],
.checkout-page select {
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  padding: 0 16px !important;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

.form-group input:focus,
.form-group select:focus,
.checkout-page input:focus,
.checkout-page select:focus {
  border-color: #029AFD !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
}

.checkout-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.checkout-checkbox label {
  font-size: 16px;
  color: #555;
}

.checkout-actions {
  border-top: 1px solid #e6e6e6;

  padding-top: 48px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.return-cart {
  color: #1A1C1C;
  text-decoration: none;
}

.continue-btn {
  width: 245px;
  height: 58px;

  border: 0;
  background: #1A1C1C;
  color: white;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
}

.checkout-summary {
  padding-top: 8px;
}

.summary-products {
  border-bottom: 1px solid #ececec;
  padding-bottom: 32px;
}

.summary-product {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}

.product-thumb {
  width: 92px;
  height: 92px;
}

.product-thumb.bag {
  background: #dcdcdc;
}

.product-info {
  flex: 1;
}

.product-info h4 {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.product-info p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #666;
}

.discount-row {
  display: flex;
  gap: 14px;
}

.discount-row-wrapper{
  padding: 36px 0;
}

.discount-row input {
  flex: 1;

  border: 0;
  border-bottom: 1px solid #d8d8d8;
  background: transparent;

  height: 48px;
}

.discount-row button {
  width: 110px;
  border: 1px solid #1A1C1C;
  background: transparent;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}

.summary-totals {
  border-top: 1px solid #ececec;
  padding-top: 36px;
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
}

.summary-line {
  margin-bottom: 22px;
  font-size: 16px;
}

.summary-line .muted {
  color: #9b9b9b;
}

.summary-total {
  border-top: 1px solid #ececec;
  margin-top: 34px;
  padding-top: 38px;
  align-items: center;
}

.summary-total small {
  font-size: 12px;
  letter-spacing: .16em;
  margin-right: 12px;
  font-weight: 600;
}

.summary-total strong {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 58px;
}

.final_amount{
    display: flex;
    align-items: center;
}

@media (max-width: 992px) {
  .checkout-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .checkout-summary {
    order: -1;
  }

  .checkout-actions {
    flex-direction: column;
    gap: 24px;
  }
}



/* ==========================================
   CHECKOUT BILLING
   Extends checkout.css — billing-specific overrides & additions
========================================== */

/* ---- Billing page uses a simplified header ---- */
.billing-header {
  border-bottom: 1px solid #e8e8e8;
  padding: 22px 0;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
}

/* ---- Page ---- */
.checkout-page {
  margin-top: 0;          /* billing page has its own header */
  background: #fafafa;
  min-height: 100vh;
}

/* ---- Two-col layout (shared with checkout.css but redeclared for safety) ---- */
.checkout-wrapper {
  display: grid;
  grid-template-columns: 1.45fr 420px;
  gap: 108px;
  padding: 72px 0 120px;
}

/* ---- Breadcrumb / steps ---- */
.checkout-steps {
  display: flex;
  gap: 12px;
  margin-bottom: 56px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #8f8f8f;
  text-transform: uppercase;
}

.checkout-steps .active {
  color: #1A1C1C;
}

/* ---- Review info block (email / phone / address) ---- */
.review-block {
  margin-bottom: 56px;
}

.review-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 0px;
  border-bottom: 1px solid #f0f0f0;
}

.review-row:last-child {
  border-bottom: 0;
}

.review-label {
  font-size: 16px;
  color: #7F7F7F;
  min-width: 130px;
  padding-top: 2px;
}

.review-value {
  font-size: 16px;
  color: #1A1C1C;
  text-align: right;
  line-height: 1.6;
}

/* ---- Section titles ---- */
.checkout-title,
.summary-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 36px;
}


/* ---- Shipping options ---- */


.shipping-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px;
  border-bottom: 1px solid #b4b3b3;
  cursor: pointer;
  transition: background .15s;
}

/* .shipping-option:last-child {
  border-bottom: 0;
} */

.shipping-option:hover {
  background: #fafafa;
}

.shipping-option-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Custom radio */
.shipping-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c4c4c4;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .15s;
}

.shipping-option input[type="radio"]:checked {
  border-color: #1A1C1C;
}

.shipping-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A1C1C;
}

.shipping-option-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shipping-option-name {
  font-size: 16px;
  color: #1A1C1C;
}

.shipping-option-days {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #7F7F7F;
  text-transform: uppercase;
}

.shipping-option-price {
  font-size: 16px;
  color: #1A1C1C;
}

/* ---- Payment Method section ---- */


.payment-option {
  border-bottom: 1px solid #C4C7C3;
  cursor: pointer;
}

.payment-option:last-child {
  border-bottom: 0;
}

.payment-option-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0px;
  transition: background .15s;
}

.payment-option-header:hover {
  background: #fafafa;
}

/* reuse same custom radio style */
.payment-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c4c4c4;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .15s;
}

.payment-option input[type="radio"]:checked {
  border-color: #1A1C1C;
}

.payment-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A1C1C;
}

.payment-option-label {
  font-size: 14px;
  color: #1A1C1C;
}

/* PayPal / Afterpay logos */
.payment-logo {
  height: 22px;
  width: auto;
}

/* Card form inside credit card option */
.card-fields {
  padding: 15px 24px 28px 35px;
  display: none;
}

.card-fields.visible {
  display: block;
}

.form-group {
  position: relative;
  margin-bottom: 32px;
}

.form-group label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1A1C1C;
}

.form-group input,
.form-group select {
  width: 100% !important;
  height: 48px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  padding: 0 16px !important;
  outline: none !important;
  font-family: 'Inter', sans-serif !important;
  color: #0f172a !important;
}

.form-group input::placeholder {
  color: #bbb;
  font-size: 14px;
}

.card-row {
  /* display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px; */
}

/* ---- Actions footer ---- */
.checkout-actions {
  border-top: 1px solid #e6e6e6;
  padding-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.return-cart {
  color: #1A1C1C;
  text-decoration: none;
  font-size: 16px;
}

.continue-btn {
  width: 240px !important;
  height: 52px !important;
  border: none !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #029AFD 0%, #029AFD 100%) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  font-family: var(--font-body) !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 20px rgba(15, 118, 110, 0.25) !important;
}

.continue-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(15, 118, 110, 0.35) !important;
  background: linear-gradient(135deg, #029AFD 0%, #029AFD 100%) !important;
}

/* ---- Order Summary sidebar (shared styles, re-declared for self-containment) ---- */
.checkout-summary {
  padding-top: 8px;
}

.summary-products {
  border-bottom: 1px solid #ececec;
  padding-bottom: 32px;
  margin-bottom: 0;
}

.summary-product {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
  position: relative;
}

.product-thumb {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  position: relative;
}

.product-thumb.bag {
  background: #dcdcdc;
}

/* quantity badge */
.qty-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #8f8f8f;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-info {
  flex: 1;
}

.product-info h4 {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 6px;
  font-weight: 400;
}

.product-info p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #444844;
  text-transform: uppercase;
}

.discount-row {
  display: flex;
  gap: 14px;
}

.discount-row input {
  flex: 1 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  height: 48px !important;
  padding: 0 16px !important;
  outline: none !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
}

.discount-row input::placeholder {
  color: #94a3b8 !important;
}

.discount-row button {
  width: 120px !important;
  height: 48px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  transition: background .2s, transform .2s !important;
}

.discount-row button:hover {
  background: #029AFD !important;
  color: #ffffff !important;
}

.summary-totals {
  border-top: 1px solid #ececec;
  padding-top: 36px;
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
}

.summary-line {
  margin-bottom: 22px;
  font-size: 16px;
}

.summary-line .muted {
  color: #9b9b9b;
}

.summary-total {
  border-top: 1px solid #ececec;
  margin-top: 34px;
  padding-top: 38px;
  align-items: center;
}


.summary-total strong {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 58px;
}

.final_amount {
  display: flex;
  align-items: center;
  color: #444844;
}

/* ---- Billing footer ---- */
.billing-footer {
  border-top: 1px solid #e8e8e8;
  padding: 28px 0;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover {
  color: #1A1C1C;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {

  .billing-header .luxe-container{text-align: center;justify-content: center;}

  .checkout-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .checkout-summary {
    order: -1;
  }

  .checkout-actions {
    flex-direction: column;
    gap: 24px;
  }

  .continue-btn {
    width: 100%;
  }
}

@media(max-width:768px){
    .billing-footer .luxe-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .billing-footer-links{gap:25px;}
}


/* =============================================
   BUNDLED COMPONENT: checkout_luxury.css
   ============================================= */
/* ============================================================
   ULTRA-LUXURY REFERENCE CHECKOUT ENGINE
   Matching reference design layout & luxury aesthetic
   ============================================================ */

.checkout-page {
  background: #F7F8F6;
  min-height: 100vh;
  padding: 40px 0 80px 0;
  font-family: 'Inter', sans-serif;
  position: relative;
}

/* Background ambient light & botanical accents */
.checkout-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: radial-gradient(ellipse at top center, rgba(230, 244, 234, 0.5) 0%, transparent 70%);
  pointer-events: none;
}

.checkout-steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.checkout-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #64748B;
}

.checkout-step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #64748B;
}

.checkout-step-item.completed .checkout-step-circle {
  border-color: var(--primary, #029AFD);
  color: var(--primary, #029AFD);
  background: var(--primary-light, #EAF7FF);
}

.checkout-step-item.active .checkout-step-circle {
  background: var(--primary, #029AFD);
  border-color: var(--primary, #029AFD);
  color: #FFFFFF;
}

.checkout-step-item.active {
  color: var(--text, #022266);
  font-weight: 700;
}

.checkout-step-line {
  width: 60px;
  height: 2px;
  background: var(--border, #D9ECFF);
}

.checkout-step-line.active {
  background: var(--primary, #029AFD);
}

/* ── Grid Layout ── */
.checkout-grid-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 36px;
  align-items: start;
}

/* ── Left Column Card Blocks ── */
.checkout-heading-wrap {
  margin-bottom: 28px;
}

.checkout-main-title {
  font-family: 'Manrope', serif;
  font-size: 36px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 6px;
}

.checkout-main-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #64748B;
  margin: 0;
}

.checkout-card-block {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
}

.checkout-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.checkout-card-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-light, #EAF7FF);
  color: var(--primary, #029AFD);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.checkout-card-title {
  font-family: 'Manrope', serif;
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 2px 0;
}

.checkout-card-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: #64748B;
  margin: 0;
}

/* Form Input Controls with Icon Prefix */
.co-field-wrap {
  margin-bottom: 20px;
}

.co-field-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
}

.co-field-label span.req {
  color: #EF4444;
}

.co-input-box-wrap {
  position: relative;
  width: 100%;
}

.co-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  font-size: 15px;
  pointer-events: none;
  z-index: 2;
}

body.ignore-app-design .co-input-box-wrap input,
body.ignore-app-design .co-input-box-wrap select,
body.ignore-app-design .checkout-page input[type="text"],
body.ignore-app-design .checkout-page input[type="email"],
body.ignore-app-design .checkout-page input[type="tel"],
body.ignore-app-design .checkout-page select,
.co-input-box-wrap input,
.co-input-box-wrap select,
.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="tel"],
.checkout-page select {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 16px 0 44px !important; /* Extra left padding for icon prefix! */
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #0F172A !important;
  outline: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

body.ignore-app-design .co-input-box-wrap input.no-icon,
body.ignore-app-design .co-input-box-wrap select.no-icon,
body.ignore-app-design .checkout-page input.no-icon,
body.ignore-app-design .checkout-page select.no-icon,
.co-input-box-wrap input.no-icon,
.checkout-page input.no-icon,
.co-input-box-wrap select.no-icon {
  padding-left: 16px !important;
}

body.ignore-app-design .co-input-box-wrap input:focus,
body.ignore-app-design .co-input-box-wrap select:focus,
body.ignore-app-design .checkout-page input:focus,
body.ignore-app-design .checkout-page select:focus,
.co-input-box-wrap input:focus,
.co-input-box-wrap select:focus,
.checkout-page input:focus,
.checkout-page select:focus {
  border-color: var(--primary, #029AFD) !important;
  box-shadow: 0 0 0 4px rgba(2, 154, 253, 0.15) !important;
}

/* ── Payment Pills Grid ── */
.payment-pills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.payment-pill-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
}

.payment-pill-card.selected,
.payment-pill-card:hover {
  border-color: var(--primary, #029AFD);
  background: var(--surface-2, #F3F9FF);
}

.payment-pill-card .check-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary, #029AFD);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.payment-pill-title {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 2px;
}

.payment-pill-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: #64748B;
}

/* ── Right Column Order Summary ── */
.checkout-summary-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px 28px 32px 28px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 100px;
}

.summary-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.summary-card-title {
  font-family: 'Manrope', serif;
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.summary-item-count {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: #F1F5F9;
  padding: 6px 14px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.summary-product-item {
  background: #F8FAFC;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.summary-prod-thumb {
  width: 68px;
  height: 68px;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 6px;
  border: 1px solid #E2E8F0;
  flex-shrink: 0;
}

.summary-prod-info {
  flex-grow: 1;
}

.summary-prod-name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.summary-prod-price {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
}

.summary-prod-qty-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  background: #FFFFFF;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
}

.summary-prod-edit {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary, #029AFD);
  text-decoration: underline;
}

.summary-promo-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #F8FAFC;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  margin-bottom: 20px;
}

.summary-calc-rows {
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.summary-calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: #475569;
  margin-bottom: 12px;
}

.summary-calc-row.free-text {
  color: var(--success, #16C784);
  font-weight: 700;
}

.summary-total-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.summary-total-label {
  font-family: 'Manrope', serif;
  font-size: 26px;
  font-weight: 700;
  color: #0F172A;
}

.summary-total-amount {
  font-family: 'Manrope', serif;
  font-size: 34px;
  font-weight: 800;
  color: #0F172A;
}

/* Trust Features Box (Free Shipping, Secure Checkout, Easy Returns) */
.summary-trust-features-box {
  background: #FDFBF7;
  border: 1px solid #F5E8D3;
  border-radius: 16px;
  padding: 16px 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
  margin-bottom: 24px;
}

.trust-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.trust-feature-icon {
  font-size: 20px;
  color: var(--primary, #029AFD);
}

.trust-feature-title {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
}

.trust-feature-desc {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #64748B;
}

/* Place Order CTA Button */
.summary-place-order-btn {
  width: 100% !important;
  height: 58px !important;
  border-radius: 999px !important;
  background: var(--primary, #029AFD) !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(2, 154, 253, 0.25) !important;
  cursor: pointer !important;
  transition: transform 300ms ease, background 300ms ease, box-shadow 300ms ease !important;
}

.summary-place-order-btn:hover {
  background: var(--primary-hover, #0289E3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(15, 118, 110, 0.38) !important;
}

.summary-secure-note {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #64748B;
  text-align: center;
  margin-top: 12px;
}

/* Terms & Conditions Acceptance Box */
.checkout-terms-wrapper {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.co-terms-block {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.45;
}

.co-terms-cb {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--primary, #029AFD) !important;
  cursor: pointer;
  flex-shrink: 0;
}

.co-terms-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-secondary, #5F7391);
}

.co-terms-text a {
  color: var(--primary, #029AFD);
  font-weight: 600;
  text-decoration: underline;
}

/* Responsive Grid */
@media (max-width: 991px) {
  .checkout-grid-layout {
    grid-template-columns: 1fr;
  }
  .payment-pills-grid {
    grid-template-columns: 1fr;
  }
}



/* =============================================
   BUNDLED COMPONENT: contact.css
   ============================================= */
/* ==========================================================================
   LUXE CONCIERGE & CONTACT EDITORIAL SYSTEM ARCHITECTURE
   ========================================================================== */

/* Clears framework dynamic mobile nav offset safely */
.contact-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

/* --- SECTION 1: HERO DISPLAY OVERRIDES --- */
.contact-hero-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.contact-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 24px;
}

.contact-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.contact-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    margin: 0;
}

.contact-hero-image-frame {
    width: 100%;
    overflow: hidden;
    height: 620px;
}

.contact-hero-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- SECTION 2: INTERACTIVE DIRECT COMMS & FORM SPECIFICS --- */
.contact-interactive-grid-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.comms-node-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #444844;
    display: block;
    margin-bottom: 16px;
}

.comms-primary-link {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: #1A1C1C;
    text-decoration: none;
    display: block;
    transition: opacity 0.2s ease;
}

.comms-primary-link:hover {
    opacity: 0.6;
    color: #1A1C1C;
}

.comms-node-description {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844 ;
}

.studio-locations-list li {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #1A1C1C;
}

/* Structural Action Button Elements */
.btn-luxe-dark-solid {
    background-color: #111111;
    color: #ffffff;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 12px 28px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.btn-luxe-dark-solid:hover {
    background-color: #333333;
    color: #ffffff;
}

/* Minimal Line Engine Form Controls Formatting */
.form-input-node-group {
    border-bottom: 1px solid #111111;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
}

.form-node-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #444844;
    margin-bottom: 6px;
}

.form-node-control {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #1A1C1C;
    padding: 4px 0;
}

.form-node-control:focus {
    outline: none;
}

.text-area-resize-none {
    resize: none;
}

.btn-luxe-outline-dark-action {
    background-color: transparent;
    color: #111111;
    border: 1px solid #111111;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 12px 30px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-luxe-outline-dark-action:hover {
    background-color: #111111;
    color: #ffffff;
}

/* --- SECTION 3: TEXTURE MANIFESTO BANNER SPECIFICS --- */
.contact-manifesto-interlude-section {
    width: 100%;
    background-color: #E2DBD3;
    position:relative;
    overflow: hidden;
}

.contact-manifesto-interlude-section .section_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.contact-manifesto-interlude-section .section_bg img{ 
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.contact-manifesto-interlude-section > .container-fluid {
    position: relative;
    z-index: 2;
}

.manifesto-parallax-texture-box {
    width: 100%;
    /* Soft high-contrast linear smooth brown cream color gradient emulating rich fabric waves */
    padding-top: 550px;
    padding-bottom: 50px;
    box-shadow: inset 0 20px 40px rgba(0,0,0,0.03);position: relative;z-index: 1;
}

.manifesto-parallax-texture-box::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.6) 100%);
    pointer-events: none;
}

.manifesto-quote-prose-text {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

/* ==========================================================================
   MEDIA CONTROLS RESPONSE OVERRIDES
   ========================================================================== */
@media (max-width: 992px) {
    .contact-display-title { font-size: 40px; }
    .contact-hero-section { padding-top: 60px; padding-bottom: 40px; }
    .contact-interactive-grid-section { padding-top: 40px; padding-bottom: 80px; }
    .direct-comms-sidebar-wrapper { margin-bottom: 40px; }
    .enquiry-form-wrapper { padding-left: 0 !important; }
    .manifesto-parallax-texture-box { min-height: 360px; }
    .manifesto-quote-prose-text { font-size: 26px; }
}

@media (max-width: 576px) {
    .contact-display-title { font-size: 32px; }
    .comms-primary-link { font-size: 20px; }
    .btn-luxe-dark-solid, .btn-luxe-outline-dark-action { width: 100%; text-align: center; }
    .manifesto-quote-prose-text { font-size: 22px; }
}


/* =============================================
   BUNDLED COMPONENT: contact_cards.css
   ============================================= */
/* ============================================================
   ULTRA-PREMIUM CONTACT PAGE DESIGN (REFERENCE MATCH)
   ============================================================ */

.contact-v8-section {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.contact-v8-header {
  margin-bottom: 60px;
}

.contact-v8-subhead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.contact-v8-subhead .subhead-line {
  width: 28px;
  height: 1.5px;
  background-color: #64748b;
  display: inline-block;
}

.contact-v8-subhead .subhead-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #475569;
  text-transform: uppercase;
}

.contact-v8-title {
  font-family: 'Manrope', serif;
  font-size: 44px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.contact-v8-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.6;
  margin: 0 auto;
}

/* 4 CARDS GRID */
.contact-card-v8 {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
  padding: 36px 24px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  position: relative;
}

.contact-card-v8:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px -10px rgba(0, 0, 0, 0.09), 0 8px 18px -6px rgba(0, 0, 0, 0.04);
  border-color: rgba(203, 213, 225, 0.8);
}

/* CIRCLE ICON WRAPPERS */
.contact-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 22px;
  transition: transform 0.3s ease;
}

.contact-card-v8:hover .contact-icon-circle {
  transform: scale(1.08);
}

/* Card Specific Icon Colors */
.contact-card-v8.card-address .contact-icon-circle {
  background: #e6f7f0;
  color: #047857;
}

.contact-card-v8.card-phone .contact-icon-circle {
  background: #fef3c7;
  color: #d97706;
}

.contact-card-v8.card-email .contact-icon-circle {
  background: #e0f2fe;
  color: #0284c7;
}

.contact-card-v8.card-return .contact-icon-circle {
  background: #fae8ff;
  color: #a21caf;
}

/* CARD CONTENT */
.contact-card-title {
  font-family: 'Manrope', serif;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.contact-card-body-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.contact-card-body-text strong {
  color: #0f172a;
  font-size: 16px;
  display: block;
}

.contact-card-body-text a {
  color: #0f172a;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: color 0.2s ease;
}

.contact-card-body-text a:hover {
  color: #047857;
}

.contact-card-subtext {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 4px;
}

.contact-accent-bar {
  width: 28px;
  height: 2px;
  background-color: #047857;
  border-radius: 2px;
  margin-top: auto;
  transition: width 0.3s ease;
}

.contact-card-v8:hover .contact-accent-bar {
  width: 44px;
}

/* FORM SECTION BELOW CARDS */
.contact-form-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 12px 36px -5px rgba(0, 0, 0, 0.04);
  padding: 48px;
  margin-top: 60px;
}

.contact-form-title {
  font-family: 'Manrope', serif;
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.contact-form-subtitle {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 32px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .contact-v8-title {
    font-size: 34px;
  }
  .contact-form-card {
    padding: 30px;
  }
}



/* =============================================
   BUNDLED COMPONENT: faq_luxury.css
   ============================================= */
/* ============================================================
   ULTRA-PREMIUM LUXURY FAQ SECTION
   ============================================================ */

.faq-luxury-section {
  padding: 100px 0 110px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

.faq-header {
  margin-bottom: 60px;
}

.faq-subhead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  background: rgba(241, 245, 249, 0.85);
  border: 1px solid rgba(203, 213, 225, 0.6);
  padding: 6px 18px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
}

.faq-subhead .subhead-line {
  width: 20px;
  height: 1.5px;
  background: linear-gradient(90deg, #029AFD 0%, #029AFD 100%);
  display: inline-block;
}

.faq-subhead .subhead-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #0f172a;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.faq-subhead .subhead-text i {
  color: #029AFD;
  font-size: 13px;
}

.faq-title {
  font-family: 'Manrope', serif;
  font-size: 44px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.faq-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.65;
  margin: 0 auto;
}

/* ACCORDION STYLING */
.faq-accordion-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.faq-accordion .accordion-item {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px !important;
  margin-bottom: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.03);
  transition: all 0.35s ease;
}

.faq-accordion .accordion-item:hover {
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.06);
}

.faq-accordion .accordion-button {
  font-family: 'Manrope', serif;
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
  padding: 24px 28px;
  box-shadow: none !important;
  transition: all 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: #029AFD;
  background: rgba(236, 253, 245, 0.6);
  border-bottom: 1px solid rgba(16, 185, 129, 0.15);
}

.faq-accordion .accordion-button::after {
  background-image: none !important;
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 14px;
  color: #64748b;
  transition: transform 0.35s ease, color 0.35s ease;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  color: #029AFD;
}

.faq-accordion .accordion-body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  padding: 24px 28px 28px;
  background: #ffffff;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .faq-title { font-size: 34px; }
  .faq-accordion .accordion-button { font-size: 17px; padding: 20px 22px; }
  .faq-accordion .accordion-body { font-size: 14.5px; padding: 20px 22px 24px; }
}

@media (max-width: 575px) {
  .faq-title { font-size: 28px; }
  .faq-luxury-section { padding: 70px 0 80px; }
}



/* =============================================
   BUNDLED COMPONENT: floating_cart.css
   ============================================= */
/* The drawer is styled by CONTRACT ATTRIBUTE as well as by class.
   Keying only on .cart-drawer-overlay / .cart-drawer-panel made the styling
   depend on those exact class names: rename them and the drawer silently stops
   opening. The data-app selectors below are the ones app.js actually drives,
   so the drawer works regardless of what the theme calls its classes. Classes
   are kept so existing styling is untouched. */
/* --- Floating Slide-out Cart Layer Core Elements --- */
.cart-drawer-overlay,
[data-app="cart-overlay"] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.cart-drawer-overlay.drawer-open-active,
[data-app="cart-overlay"][data-app-open] {
    opacity: 1;
    visibility: visible;
}

.cart-drawer-panel,
[data-app="cart-overlay"] > [data-app="cart"] {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 440px;
    height: 100%;
    background-color: var(--bg-section);
    box-shadow: -10px 0 40px rgba(24, 53, 45, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer-overlay.drawer-open-active .cart-drawer-panel,
[data-app="cart-overlay"][data-app-open] > [data-app="cart"] {
    transform: translateX(0);
}

/* --- Headers setup --- */
.cart-drawer-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--card-bg);
}

.cart-drawer-title-group {
    display: flex;
    align-items: center;
}

.cart-drawer-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-display);
}

.cart-drawer-badge {
    font-size: 12px;
    font-weight: 600;
    background-color: var(--primary-green);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 10px;
}

.cart-drawer-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--body-text);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.2s;
}
.cart-drawer-close-btn:hover,
.cart-drawer-close-btn:focus {
    color: var(--accent-champagne);
}

/* --- Scrollable Content Rules --- */
.cart-drawer-items-container {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 240px);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

/* Clean Minimal Scrollbar Tracks */
.cart-drawer-items-container::-webkit-scrollbar {
    width: 5px;
}
.cart-drawer-items-container::-webkit-scrollbar-track {
    background: transparent;
}
.cart-drawer-items-container::-webkit-scrollbar-thumb {
    background: var(--primary-green);
    border-radius: 10px;
}

/* --- Dynamic Listing Design Layout --- */
.cart-drawer-item {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cart-drawer-item-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-item-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--heading-color);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.cart-item-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-green);
    margin: 0 0 8px 0;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    border-radius: 4px;
    padding: 2px;
}

.quantity-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--body-text);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.quantity-btn:hover,
.quantity-btn:focus {
    color: var(--primary-green);
}

.quantity-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading-color);
    padding: 0 8px;
    min-width: 20px;
    text-align: center;
}

.cart-item-remove-btn {
    background: none;
    border: none;
    color: var(--color-error);
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.cart-item-remove-btn:hover {
    opacity: 0.8;
}

/* --- Panel Footer Layer --- */
.cart-drawer-footer {
    padding: 24px;
    background-color: var(--bg-main);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cart-drawer-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cart-summary-label {
    font-size: 13px;
    color: var(--body-text);
    text-transform: uppercase;
}

.cart-summary-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
}

.cart-drawer-disclaimer {
    font-size: 12px;
    color: var(--muted-text);
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.cart-checkout-btn {
    width: 100%;
    background-color: var(--primary-green);
    color: #ffffff;
    border: 1px solid var(--primary-green);
    padding: 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.cart-checkout-btn:hover,
.cart-checkout-btn:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
}

.cart-view-bag-btn {
    width: 100%;
    background-color: transparent;
    color: var(--heading-color);
    border: 1px solid var(--border-color);
    padding: 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.cart-view-bag-btn:hover,
.cart-view-bag-btn:focus {
    background-color: var(--card-bg);
    border-color: var(--accent-champagne);
    color: var(--accent-champagne);
}

.cart-drawer-action-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* ============================================================
   Cart drawer, driven by the runtime's state attribute instead
   of .drawer-open-active toggled by cart.js.
   ============================================================ */
.cart-drawer-overlay[data-app-open],
[data-app="cart-overlay"][data-app-open] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cart-drawer-overlay[data-app-open] .cart-drawer-panel,
[data-app="cart-overlay"][data-app-open] > [data-app="cart"] {
    transform: translateX(0);
}



/* =============================================
   BUNDLED COMPONENT: hero_luxury.css
   ============================================= */
/* ============================================================
   ULTRA-PREMIUM LUXURY HERO SECTION (COMPACT & BEAUTIFUL NO WHITE-SPACE)
   ============================================================ */

:root {
  --hero-primary-teal:   #029AFD;
  --hero-accent-green:  #5BC6FF;
  --hero-teal-light:     #0289E3;
  --hero-dark-text:      #022266;
  --hero-body-text:      #5F7391;
  --hero-muted-text:     #7D91AB;
  --font-manrope:        'Manrope', sans-serif;
  --font-inter:          'Inter', sans-serif;
}

.hero-luxury-section {
  position: relative;
  width: 100%;
  min-height: auto;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.85) 0%, rgba(243, 249, 255, 0.60) 100%), url('../images/hero-bg.png') center/cover no-repeat;
  padding: 60px 0 50px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Radial Sunlight Glows ── */
.hero-sun-glow-overlay {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 154, 253, 0.15) 0%, rgba(234, 247, 255, 0.10) 45%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

.hero-concentric-ring {
  position: absolute;
  top: 48%;
  right: 22%;
  transform: translate(50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(217, 236, 255, 0.6);
  pointer-events: none;
  z-index: 1;
}
.hero-ring-lg { width: 640px; height: 640px; }
.hero-ring-md { width: 480px; height: 480px; }
.hero-ring-sm { width: 340px; height: 340px; }

/* ── Main Hero Container ── */
.hero-luxury-container {
  max-width: 1640px;
  width: 100%;
  margin: 0 auto;
  padding-left: 80px;
  padding-right: 80px;
  position: relative;
  z-index: 3;
}

/* ── Left Content Wrapper ── */
.hero-left-content {
  max-width: 620px;
  width: 100%;
}

.hero-small-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary, #029AFD);
  background: var(--primary-light, #EAF7FF);
  border: 1px solid var(--border, #D9ECFF);
  padding: 8px 22px;
  border-radius: 30px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(2, 154, 253, 0.10);
}

.hero-main-title {
  font-family: var(--font-manrope);
  font-size: 58px;
  font-weight: 900;
  color: var(--text, #022266);
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}

.hero-wellness-highlight {
  background: linear-gradient(135deg, #029AFD 0%, #022266 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.hero-description-text {
  font-family: var(--font-inter);
  font-size: 18.5px;
  font-weight: 400;
  color: var(--text-secondary, #5F7391);
  line-height: 1.6;
  max-width: 540px;
  margin-bottom: 30px;
}

/* ── CTA Buttons Row ── */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 38px;
  border-radius: 999px;
  background: var(--primary, #029AFD);
  color: #FFFFFF !important;
  font-family: var(--font-inter);
  font-size: 16.5px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(2, 154, 253, 0.25);
  transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
  border: none;
}

.hero-btn-primary:hover {
  transform: scale(1.03);
  background: var(--primary-hover, #0289E3);
  box-shadow: 0 18px 45px rgba(2, 154, 253, 0.35);
  color: #FFFFFF !important;
}

.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 34px;
  border-radius: 999px;
  background: var(--secondary, #022266);
  color: #FFFFFF !important;
  font-family: var(--font-inter);
  font-size: 16.5px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  box-shadow: 0 10px 35px rgba(2, 34, 102, 0.15);
  transition: transform 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.hero-btn-secondary:hover {
  background: var(--secondary-hover, #03348F);
  transform: scale(1.03);
  box-shadow: 0 18px 50px rgba(2, 34, 102, 0.25);
  color: #FFFFFF !important;
}

/* ── Right Stage Hero Product Image (BIG & BOLD DISPLAY) ── */
.hero-right-stage {
  position: relative;
  width: 100%;
  max-width: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.hero-product-halo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 154, 253, 0.20) 0%, rgba(2, 34, 102, 0.05) 55%, transparent 75%);
  filter: blur(45px);
  pointer-events: none;
  z-index: 2;
}

.hero-product-main-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 26px 50px rgba(22, 48, 41, 0.28));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  position: relative;
  z-index: 4;
}

.hero-product-main-img:hover {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 32px 60px rgba(22, 48, 41, 0.35));
}

/* ── Floating Badges on Hero Stage ── */
.hero-float-badge {
  position: absolute;
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  padding: 10px 20px;
  border-radius: 40px;
  box-shadow: 0 12px 30px rgba(22, 48, 41, 0.12);
  font-family: var(--font-manrope);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--hero-dark-text);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  animation: heroFloatBob 6s ease-in-out infinite alternate;
}

.hero-float-badge-1 {
  top: 12%;
  right: 4%;
}

.hero-float-badge-2 {
  bottom: 12%;
  left: 2%;
  animation-delay: -3s;
}

@keyframes heroFloatBob {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

/* ── Bottom Floating Glass Trust Bar ── */
.hero-trust-bar-wrap {
  width: 100%;
  margin-top: 40px;
  position: relative;
  z-index: 4;
  text-align: center;
}

.hero-trust-glass-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 16px 42px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 40px;
  box-shadow: 0 12px 32px rgba(22, 48, 41, 0.08);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-manrope);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hero-dark-text);
  white-space: nowrap;
}

.hero-trust-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.10);
  color: var(--hero-primary-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.hero-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(22, 48, 41, 0.15);
}

/* Responsive Overrides */
@media (max-width: 1400px) {
  .hero-luxury-container { padding-left: 40px; padding-right: 40px; }
  .hero-main-title { font-size: 48px; line-height: 1.18; }
  .hero-description-text { font-size: 17px; line-height: 1.55; }
}

@media (max-width: 1199px) {
  .hero-luxury-section { padding: 40px 0 30px 0; }
  .hero-right-stage { max-width: 100%; margin-top: 30px; }
  .hero-product-main-img { max-width: 480px; }
  .hero-trust-glass-container { flex-wrap: wrap; gap: 16px; border-radius: 24px; padding: 14px 20px; }
  .hero-trust-divider { display: none; }
  .hero-float-badge { display: none; }
}



/* =============================================
   BUNDLED COMPONENT: how_to_use.css
   ============================================= */
/* ============================================================
   ULTRA-PREMIUM HOW TO USE SECTION (FONT AWESOME & LUXURY DESIGN)
   ============================================================ */

.how-to-use-section {
  padding: 100px 0 110px;
  background: radial-gradient(circle at 50% 0%, rgba(241, 245, 249, 0.8) 0%, #ffffff 70%),
              linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.how-to-use-section::before {
  content: '';
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.07) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.how-to-use-header {
  margin-bottom: 64px;
  position: relative;
  z-index: 2;
}

.how-to-use-subhead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  background: rgba(241, 245, 249, 0.8);
  border: 1px solid rgba(203, 213, 225, 0.6);
  padding: 6px 18px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
}

.how-to-use-subhead .subhead-line {
  width: 20px;
  height: 1.5px;
  background: var(--primary, #029AFD);
  display: inline-block;
}

.how-to-use-subhead .subhead-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--text, #022266);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.how-to-use-subhead .subhead-text i {
  color: var(--primary, #029AFD);
  font-size: 13px;
}

.how-to-use-title {
  font-family: 'Manrope', serif;
  font-size: 46px;
  font-weight: 700;
  color: var(--text, #022266);
  line-height: 1.25;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}

.how-to-use-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary, #5F7391);
  line-height: 1.7;
  margin: 0 auto;
}

/* STEP CARDS CONTAINER & FLEX WRAPPER WITH ARROWS */
.how-to-use-grid {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  z-index: 2;
}

.how-step-card-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}

/* CARD BOX */
.how-step-card {
  background: var(--surface, #ffffff);
  border-radius: 24px;
  border: 1px solid var(--border, #D9ECFF);
  box-shadow: var(--shadow, 0 10px 35px rgba(2, 34, 102, 0.08));
  padding: 40px 26px 36px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

/* Top Accent Line on Card */
.how-step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary, #029AFD);
  opacity: 0;
  transition: opacity 300ms ease;
}

.how-step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover, 0 18px 50px rgba(2, 34, 102, 0.12));
  border-color: var(--primary, #029AFD);
}

.how-step-card:hover::before {
  opacity: 1;
}

/* ELEGANT STEP NUMBER WATERMARK/BADGE */
.step-number-bg {
  position: absolute;
  top: 18px;
  left: 22px;
  font-family: 'Manrope', serif;
  font-size: 38px;
  font-weight: 800;
  color: var(--border, #D9ECFF);
  line-height: 1;
  opacity: 0.7;
  pointer-events: none;
  transition: color 300ms ease, opacity 300ms ease, transform 300ms ease;
}

.how-step-card:hover .step-number-bg {
  color: var(--primary, #029AFD);
  opacity: 0.25;
  transform: scale(1.1);
}

/* PURE FONT AWESOME CIRCLE ICON */
.step-icon-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--primary-light, #EAF7FF);
  border: 1px solid var(--border, #D9ECFF);
  color: var(--primary, #029AFD);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-top: 22px;
  margin-bottom: 26px;
  position: relative;
  box-shadow: 0 4px 14px rgba(2, 154, 253, 0.15);
  transition: transform 300ms ease, background 300ms ease, color 300ms ease, box-shadow 300ms ease;
}

/* Ensure no hardcoded emoji pseudo-elements exist */
.step-icon-circle::after {
  content: none !important;
  display: none !important;
}

.how-step-card:hover .step-icon-circle {
  transform: scale(1.12) rotate(5deg);
  background: var(--primary, #029AFD);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(2, 154, 253, 0.35);
  border-color: transparent;
}

.step-icon-circle i {
  transition: transform 300ms ease;
}

.how-step-card:hover .step-icon-circle i {
  transform: scale(1.08);
}

/* CARD TEXT CONTENT */
.step-title {
  font-family: 'Manrope', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #022266);
  margin-bottom: 12px;
  line-height: 1.3;
}

.step-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--text-secondary, #5F7391);
  line-height: 1.65;
  margin-bottom: 24px;
  flex-grow: 1;
}

.step-accent-bar {
  width: 32px;
  height: 2.5px;
  background: var(--primary, #029AFD);
  border-radius: 3px;
  margin-top: auto;
  transition: width 300ms ease;
}

.how-step-card:hover .step-accent-bar {
  width: 54px;
}

/* STEP CONNECTING ARROWS */
.step-connector-arrow {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface, #ffffff);
  border: 1.5px solid rgba(2, 154, 253, 0.4);
  color: var(--primary, #029AFD);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(2, 154, 253, 0.15);
  transition: all 300ms ease;
}

.how-step-card-wrap:hover .step-connector-arrow {
  background: var(--primary, #029AFD);
  color: #ffffff;
  border-color: var(--primary, #029AFD);
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 6px 18px rgba(2, 154, 253, 0.3);
}

/* Hide arrow on last step */
.how-step-card-wrap:last-child .step-connector-arrow {
  display: none !important;
}

/* RESPONSIVE LAYOUT */
@media (max-width: 991px) {
  .how-to-use-grid {
    flex-direction: column;
    gap: 28px;
  }
  .step-connector-arrow {
    right: 50%;
    top: auto;
    bottom: -16px;
    transform: translateX(50%) rotate(90deg);
  }
  .how-step-card-wrap:hover .step-connector-arrow {
    transform: translateX(50%) rotate(90deg) scale(1.15);
  }
  .how-to-use-title {
    font-size: 36px;
  }
}

@media (max-width: 575px) {
  .how-to-use-title {
    font-size: 28px;
  }
  .how-step-card {
    padding: 32px 20px 28px;
  }
  .how-to-use-section {
    padding: 70px 0 80px;
  }
}



/* =============================================
   BUNDLED COMPONENT: no2_infographic.css
   ============================================= */
/* ============================================================
   NO2 NITRIC OXIDE BOOSTER INFOGRAPHIC SECTION (BLUE LUXURY THEME)
   ============================================================ */

:root {
  --no2-primary:    #1565D8;
  --no2-secondary:  #4DA3FF;
  --no2-accent:     #00B7FF;
  --no2-bg:         #F7FBFF;
  --no2-text:       #143B63;
  --no2-muted:      #4A6B8D;
  --font-manrope:   'Manrope', sans-serif;
  --font-inter:     'Inter', sans-serif;
}

.no2-infographic-section {
  position: relative;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.88) 0%, rgba(238, 246, 255, 0.80) 50%, rgba(255, 255, 255, 0.90) 100%), url('../images/product_bg.png') center/cover no-repeat;
  padding: 110px 0 100px 0;
  min-height: 900px;
  overflow: hidden;
  border-top: 1px solid rgba(21, 101, 216, 0.1);
  border-bottom: 1px solid rgba(21, 101, 216, 0.1);
}

.no2-container-1400 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Atmosphere, Blue Radial Glow & Background Rings ── */
.no2-blue-glow-650 {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 163, 255, 0.28) 0%, rgba(21, 101, 216, 0.12) 55%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}

.no2-ring-bg {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--no2-primary);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}
.no2-ring-1 { width: 580px; height: 580px; }
.no2-ring-2 { width: 460px; height: 460px; }
.no2-ring-3 { width: 340px; height: 340px; }

/* ── Header Content ── */
.no2-header-wrap {
  max-width: 720px;
  margin: 0 auto 65px auto;
  text-align: center;
}

.no2-pill-badge {
  display: inline-block;
  font-family: var(--font-manrope);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--no2-primary);
  background: rgba(21, 101, 216, 0.08);
  border: 1px solid rgba(21, 101, 216, 0.22);
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.no2-main-heading {
  font-family: var(--font-manrope);
  font-size: 42px;
  font-weight: 800;
  color: var(--no2-text);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.no2-heading-highlight {
  background: linear-gradient(135deg, #1565D8 0%, #00B7FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.no2-main-paragraph {
  font-family: var(--font-inter);
  font-size: 15px;
  color: var(--no2-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Left & Right Columns (Width 360px, Symmetrical 3 Cards Each) ── */
.no2-left-col,
.no2-right-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 4;
}

.no2-glass-card-left,
.no2-glass-card-right {
  width: 360px;
  height: 125px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(77, 163, 255, 0.38);
  padding: 16px 20px;
  box-shadow: 0 10px 28px rgba(20, 59, 99, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.no2-glass-card-left:hover,
.no2-glass-card-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(21, 101, 216, 0.20), inset 0 1px 0 #ffffff;
  border-color: var(--no2-primary);
}

/* ── 52px Circular Blue Icon Badges (Slim & Sleek) ── */
.no2-circle-64 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.20), rgba(21, 101, 216, 0.09));
  border: 1.5px solid rgba(21, 101, 216, 0.25);
  color: var(--no2-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.no2-glass-card-left:hover .no2-circle-64,
.no2-glass-card-right:hover .no2-circle-64 {
  background: var(--no2-primary);
  color: #ffffff;
  border-color: var(--no2-primary);
  transform: scale(1.08);
}

.no2-card-title-22 {
  font-family: var(--font-manrope);
  font-size: 19px;
  font-weight: 700;
  color: var(--no2-text);
  line-height: 1.18;
  margin: 0 0 2px 0;
}

.no2-card-subtag {
  font-family: var(--font-manrope);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--no2-primary);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.no2-card-body-15 {
  font-family: var(--font-inter);
  font-size: 12.5px;
  color: var(--no2-muted);
  line-height: 1.38;
  margin: 0;
}

/* ── Center Stage: NO2 Bottle (Enlarged Hero Bottle) & Blue Connectors ── */
.no2-center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 540px;
  min-height: 540px;
}

.no2-stage-svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.no2-path-glow {
  stroke: rgba(37, 99, 235, 0.35);
  stroke-width: 4px;
  fill: none !important;
}

.no2-path-main {
  stroke: #2563EB;
  stroke-width: 2px;
  stroke-dasharray: 6 4;
  fill: none !important;
  stroke-linecap: round;
  animation: no2DashFlow 20s linear infinite;
}

.no2-dot-glow {
  fill: rgba(37, 99, 235, 0.4) !important;
  stroke: none !important;
}

.no2-dot-solid {
  fill: #2563EB !important;
  stroke: none !important;
}

.no2-ring-dashed {
  stroke: rgba(37, 99, 235, 0.22);
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
  fill: none !important;
}

.no2-svg-connector {
  stroke: var(--no2-secondary);
  stroke-dasharray: 8 6;
  stroke-width: 2.5px;
  stroke-linecap: round;
  fill: none !important;
  opacity: 0.88;
  animation: no2DashFlow 25s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(21, 101, 216, 0.25));
}

@keyframes no2DashFlow {
  to { stroke-dashoffset: -200; }
}

.no2-bottle-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.no2-bottle-img,
.no2-bottle-img-330 {
  width: 440px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: -135px; /* Sits flush on top of podium! */
  position: relative;
  z-index: 4;
  filter: drop-shadow(0 32px 50px rgba(20, 59, 99, 0.38));
  transition: transform 0.4s ease;
}

.no2-bottle-img:hover,
.no2-bottle-img-330:hover {
  transform: scale(1.03);
}

.no2-podium-img,
.no2-podium-img-430 {
  width: 540px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 20px 35px rgba(20, 59, 99, 0.20));
}

/* ── Bottom Trust Bar ── */
.no2-trust-bar-50 {
  margin-top: 50px;
  padding: 16px 36px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(77, 163, 255, 0.25);
  border-radius: 40px;
  box-shadow: 0 8px 24px rgba(20, 59, 99, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.no2-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 700;
  color: var(--no2-text);
}

.no2-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(21, 101, 216, 0.2);
}

.no2-trust-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(21, 101, 216, 0.08);
  color: var(--no2-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .no2-left-col, .no2-right-col { width: 100%; }
  .no2-glass-card-left, .no2-glass-card-right { width: 100%; height: auto; }
  .no2-center-stage { width: 100%; min-height: auto; }
  .no2-bottle-img-330 { width: 250px; }
  .no2-stage-svg-overlay { display: none; }
}



/* =============================================
   BUNDLED COMPONENT: privacy.css
   ============================================= */
/* ==========================================================================
   LUXE DATA GOVERNANCE & PRIVACY STYLING ARCHITECTURE
   ========================================================================== */

/* Clears navbar layout offset */
.privacy-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

/* --- SECTION 1: HERO HEADER SYSTEM --- */
.privacy-hero-header {
    padding-top: 64px;
    padding-bottom: 64px;

}

.legal-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    display: block;
    margin-bottom: 18px;
}

.legal-display-title {
    font-family: var(--font-display), 'Manrope', serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.legal-header-motto {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: #444844;
    margin-bottom: 16px;
}

.legal-last-updated-date {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #7F7F7F;
    display: block;
}

/* --- SECTION 2: SIDEBAR & STREAM LAYOUT --- */
.privacy-content-layout-section {
    padding-top: 80px;
    padding-bottom: 140px;
}

/* Sticky Sidebar Framework Execution */
.sticky-toc-wrapper {
    position: sticky;
    top: 140px;
    padding-bottom: 20px;
}

.toc-header-title {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #1A1C1C;
    display: block;
    margin-bottom: 24px;
    border-bottom: 1px solid #C4C7C34D;
    padding-bottom: 12px;
}

.toc-navigation-list li {
    margin-bottom: 14px;
}

.toc-anchor-link {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444844;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}

.toc-anchor-link:hover, 
.toc-anchor-link.active {
    color: #1A1C1C;
    padding-left: 4px;
}

/* Legal Prose Content Layout Structure */
.legal-text-stream-wrapper {
    max-width: 720px;
}

.legal-stream-section-node {
    margin-bottom: 64px;

}

.legal-stream-section-node:last-of-type {
    border-bottom: none;
    margin-bottom: 40px;
}

.legal-node-section-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
    border-bottom: 1px solid #C4C7C34D;
    padding-bottom: 15px;
}

.legal-stream-paragraph {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    margin-bottom: 20px;
    text-align: justify;
}

.legal-stream-paragraph.bold-lead {
    font-weight: 400;
    color: #1A1C1C;
}

/* Definitions and Log files inner groupings */
.legal-sub-definition-box {
    margin-top: 28px;
}

.legal-definition-sub-title {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1A1C1C;
    margin-bottom: 8px;
}

/* Inquiries Segment Bottom Footer Panel */
.legal-inquiries-footer-block {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #1A1C1C;
}

.inquiries-caption-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #1A1C1C;
    display: block;
    margin-bottom: 8px;
}

.inquiries-mail-link {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: #1A1C1C;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.inquiries-mail-link:hover {
    opacity: 0.7;
    color: #1A1C1C;
}

.inquiries-schedule-text {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444844;
    margin-top: 10px;
    margin-bottom: 0;
}

/* ==========================================================================
   MEDIA CONTROLS & ADAPTATION DRIVERS
   ========================================================================== */
@media (max-width: 992px) {
    .legal-display-title { font-size: 38px; }
    .sticky-toc-wrapper { position: relative; top: 0; margin-bottom: 40px; border-bottom: 1px solid #EAEAEA; padding-bottom: 32px; }
    .toc-navigation-list { display: flex; flex-wrap: wrap; gap: 16px; }
    .toc-navigation-list li { margin-bottom: 0; }
    .privacy-content-layout-section { padding-top: 40px; padding-bottom: 80px; }
    .inquiries-mail-link { font-size: 24px; }
}

@media (max-width: 576px) {
    .legal-display-title { font-size: 32px; }
    .legal-header-motto { font-size: 16px; text-align: left !important; }
    .privacy-hero-header { padding-top: 60px; padding-bottom: 50px; }
    .toc-navigation-list { flex-direction: column; gap: 8px; }
}


/* =============================================
   BUNDLED COMPONENT: product_cards.css
   ============================================= */
/* ============================================================
   ULTRA-PREMIUM DYNAMIC PRODUCT CARDS (REFERENCE DESIGN MATCH)
   ============================================================ */

/* SECTION HEADER STYLES */
.product-showcase-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
}

.product-section-header {
  margin-bottom: 50px;
}

.product-section-subhead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.product-section-subhead .subhead-line {
  width: 28px;
  height: 1.5px;
  background-color: #64748b;
  display: inline-block;
}

.product-section-subhead .subhead-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #475569;
  text-transform: uppercase;
}

.product-section-title {
  font-family: 'Manrope', serif;
  font-size: 42px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.product-section-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.6;
  margin: 0 auto;
}

/* CARD CONTAINER & THEMING */
.prod-card-v8 {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
  padding: 24px 24px 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  position: relative;
  overflow: hidden;
}

.prod-card-v8:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px -10px rgba(0, 0, 0, 0.09), 0 8px 18px -6px rgba(0, 0, 0, 0.04);
  border-color: rgba(203, 213, 225, 0.8);
}

/* DYNAMIC 3-CARD COLOR THEME MATRIX */
/* Card 1: Emerald / Green Theme */
product:nth-child(3n+1) .prod-card-v8,
product-paginate:nth-child(3n+1) .prod-card-v8 {
  --theme-color: #047857;
  --theme-bg-light: #e6f7f0;
  --theme-gradient: linear-gradient(135deg, #022266 0%, #029AFD 100%);
  --theme-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}

/* Card 2: Crimson / Red Theme */
product:nth-child(3n+2) .prod-card-v8,
product-paginate:nth-child(3n+2) .prod-card-v8 {
  --theme-color: #dc2626;
  --theme-bg-light: #fee2e2;
  --theme-gradient: linear-gradient(135deg, #be123c 0%, #ef4444 100%);
  --theme-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
}

/* Card 3: Sapphire / Blue Theme */
product:nth-child(3n+3) .prod-card-v8,
product-paginate:nth-child(3n+3) .prod-card-v8 {
  --theme-color: #0284c7;
  --theme-bg-light: #e0f2fe;
  --theme-gradient: linear-gradient(135deg, #0242a5 0%, #0284c7 100%);
  --theme-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
}

/* BADGES ROW */
.prod-card-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  min-height: 32px;
}

.prod-badge-category {
  background-color: var(--theme-bg-light);
  color: var(--theme-color);
  padding: 6px 14px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.prod-badge-category i {
  font-size: 12px;
}

.prod-badge-tag {
  background-color: var(--theme-bg-light);
  color: var(--theme-color);
  padding: 6px 14px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

/* TOGGLE BADGE VISIBILITY PER CARD INDEX */
product:nth-child(3n+1) .badge-icon-2,
product:nth-child(3n+1) .badge-icon-3,
product:nth-child(3n+1) .badge-text-2,
product:nth-child(3n+1) .badge-text-3,
product:nth-child(3n+1) .badge-tag-2,
product:nth-child(3n+1) .badge-tag-3,
product-paginate:nth-child(3n+1) .badge-icon-2,
product-paginate:nth-child(3n+1) .badge-icon-3,
product-paginate:nth-child(3n+1) .badge-text-2,
product-paginate:nth-child(3n+1) .badge-text-3,
product-paginate:nth-child(3n+1) .badge-tag-2,
product-paginate:nth-child(3n+1) .badge-tag-3 {
  display: none !important;
}

product:nth-child(3n+2) .badge-icon-1,
product:nth-child(3n+2) .badge-icon-3,
product:nth-child(3n+2) .badge-text-1,
product:nth-child(3n+2) .badge-text-3,
product:nth-child(3n+2) .badge-tag-1,
product:nth-child(3n+2) .badge-tag-3,
product-paginate:nth-child(3n+2) .badge-icon-1,
product-paginate:nth-child(3n+2) .badge-icon-3,
product-paginate:nth-child(3n+2) .badge-text-1,
product-paginate:nth-child(3n+2) .badge-text-3,
product-paginate:nth-child(3n+2) .badge-tag-1,
product-paginate:nth-child(3n+2) .badge-tag-3 {
  display: none !important;
}

product:nth-child(3n+3) .badge-icon-1,
product:nth-child(3n+3) .badge-icon-2,
product:nth-child(3n+3) .badge-text-1,
product:nth-child(3n+3) .badge-text-2,
product:nth-child(3n+3) .badge-tag-1,
product:nth-child(3n+3) .badge-tag-2,
product-paginate:nth-child(3n+3) .badge-icon-1,
product-paginate:nth-child(3n+3) .badge-icon-2,
product-paginate:nth-child(3n+3) .badge-text-1,
product-paginate:nth-child(3n+3) .badge-text-2,
product-paginate:nth-child(3n+3) .badge-tag-1,
product-paginate:nth-child(3n+3) .badge-tag-2 {
  display: none !important;
}

/* PRODUCT BODY (CLICKABLE) */
.prod-card-body {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* IMAGE STAGE WITH REALISTIC BOTTLE SHADOW */
.prod-img-stage {
  position: relative;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding: 10px 0;
}

.prod-img {
  max-height: 200px;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.06));
  z-index: 2;
}

.prod-card-v8:hover .prod-img {
  transform: scale(1.06) translateY(-4px);
}

.prod-img-shadow {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 75%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.prod-card-v8:hover .prod-img-shadow {
  opacity: 0.8;
  transform: translateX(-50%) scale(1.08);
}

/* PRODUCT TEXT CONTENT */
.prod-info {
  margin-bottom: 16px;
}

.prod-title {
  font-family: 'Manrope', serif;
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.prod-card-v8:hover .prod-title {
  color: var(--theme-color);
}

.prod-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prod-price-row {
  font-family: 'Manrope', serif;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 4px;
}

.price-label {
  font-family: 'Manrope', serif;
  font-weight: 700;
  color: #0f172a;
}

.price-amount {
  font-family: 'Manrope', serif;
  font-weight: 700;
  color: var(--theme-color);
  transition: color 0.3s ease;
}

/* VARIANT DROPDOWN SELECTOR */
.prod-variant-wrap {
  margin-top: auto;
  margin-bottom: 16px;
}

.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.product-variant-select {
  width: 100%;
  height: 48px;
  padding: 0 38px 0 16px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all 0.2s ease;
}

.product-variant-select:hover,
.product-variant-select:focus {
  background-color: #ffffff;
  border-color: #cbd5e1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

.select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #64748b;
  font-size: 12px;
}

/* UNIFIED SINGLE LUXURY BUTTON STYLE FOR ALL PRODUCT BUTTONS */
.prod-action-wrap {
  width: 100% !important;
  display: block !important;
}

.btn-prod-add-cart,
.btn-luxe-primary,
.prod-card-v8 .button,
.prod-action-wrap .button,
.prod-action-wrap a {
  width: 100% !important;
  height: 52px !important;
  line-height: 52px !important;
  padding: 0 24px !important;
  border: none !important;
  border-radius: 50px !important;
  background: var(--theme-gradient, linear-gradient(135deg, #029AFD 0%, #029AFD 100%)) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
  box-shadow: var(--theme-shadow, 0 6px 20px rgba(15, 118, 110, 0.22)) !important;
  margin: 0 !important;
}

.btn-prod-add-cart i,
.btn-luxe-primary i,
.prod-card-v8 .button i,
.prod-action-wrap .button i,
.prod-action-wrap a i {
  font-size: 16px !important;
  color: #ffffff !important;
}

.btn-prod-add-cart:hover,
.btn-luxe-primary:hover,
.prod-card-v8 .button:hover,
.prod-action-wrap .button:hover,
.prod-action-wrap a:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--theme-shadow, 0 10px 25px rgba(15, 118, 110, 0.35)) !important;
  filter: brightness(1.08) !important;
  color: #ffffff !important;
}

.btn-prod-add-cart:active,
.btn-luxe-primary:active,
.prod-card-v8 .button:active,
.prod-action-wrap .button:active,
.prod-action-wrap a:active {
  transform: translateY(0) !important;
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 991px) {
  .product-section-title {
    font-size: 34px;
  }
  .prod-img-stage {
    height: 200px;
  }
  .prod-img {
    max-height: 170px;
  }
  .prod-title {
    font-size: 22px;
  }
}

@media (max-width: 575px) {
  .product-section-title {
    font-size: 28px;
  }
  .prod-card-v8 {
    padding: 20px;
  }
}



/* =============================================
   BUNDLED COMPONENT: search.css
   ============================================= */
/* =============================================
   SEARCH PAGE — search.css
   Depends on: style.css (shared LUXE tokens)
   ============================================= */


/* =============================================
   SEARCH HEADER
   ============================================= */
   .search-header {
    padding: 64px 0 0;
    background: #F9F9F8;
}

.search-header.mt-nav{margin-top: 91px;}

/* Page title — matches cart-title / col-hero-title style */
.search-title {
    font-family: 'Manrope', serif;
    font-size: 64px;
    font-weight: 400;
    color: #1A1C1C;
    line-height: 1.1;
    margin-bottom: 64px;
}

/* Meta bar: tag pill left, count right */
.search-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 1px solid #d4d4cc;
}

/* Active query tag pill.
   On the desktop search page the chip sits directly in .search-meta-bar — its
   space-between puts the chip left and the count right, so the wrapper that
   used to hold it (and its second data-app hook) was doing nothing and is gone.
   The rule stays for mobile/search.html, which still uses the wrapper. */
.search-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #1A1C1C;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.3px;
    padding: 6px 12px 6px 14px;
    line-height: 1;
}

.search-tag-remove {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.search-tag-remove:hover {
    opacity: 1;
}

/* Results count */
.search-results-count {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    white-space: nowrap;
    /* Hold the right edge on a search with no query: the chip is hidden then,
       leaving the count as the only child, and space-between alone would pull
       it to the left. The empty wrapper used to reserve that space. */
    margin-left: auto;
}


/* =============================================
   SEARCH RESULTS GRID
   Reuses .shop-card, .shop-img-wrap, .shop-img-*,
   .shop-box-title, .shop-price from style.css
   ============================================= */
.search-results {
    background: #F9F9F8;
    padding: 40px 0 100px;
}


/* =============================================
   NO RESULTS STATE
   ============================================= */
.search-no-results {
    padding: 80px 0;
    text-align: center;
}

.search-no-results-msg {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #666666;
    margin-bottom: 24px;
}

.search-browse-link {
    display: inline-block;
    text-decoration: none;
    background-color: #1A1C1C;
    color: #ffffff;
    padding: 14px 32px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    transition: background-color 0.3s ease;
}

.search-browse-link:hover {
    background-color: #333333;
    color: #ffffff;
}


/* =============================================
   RESPONSIVE — TABLET (max 768px)
   ============================================= */
@media (max-width: 768px) {
    .search-title {
        font-size: 40px;
    }
}


/* =============================================
   RESPONSIVE — MOBILE (max 640px)
   ============================================= */
@media (max-width: 640px) {
    .search-header {
        padding: 40px 0 0;
    }

    .search-title {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .search-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 20px;
    }

    .search-results {
        padding: 28px 0 60px;
    }
}


/* =============================================
   BUNDLED COMPONENT: searchbar.css
   ============================================= */
/* ==========================================
   SEARCH OVERLAY
========================================== */

.luxe-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0,0,0,.15);

    opacity: 0;
    visibility: hidden;

    transition: all .35s ease;
}

.luxe-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.luxe-search-panel {
    background: var(--bg-section);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    transform: translateY(-100%);
    transition: transform .45s ease;
}

.luxe-search-overlay.active .luxe-search-panel {
    transform: translateY(0);
}

.luxe-search-inner {
    max-width: 1360px;
    margin: 0 auto;

    padding: 70px 60px;
    position: relative;
}

.luxe-search-close {
    position: absolute;
    top: 32px;
    right: 48px;

    width: 40px;
    height: 40px;

    border: none;
    background: transparent;

    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--heading-color);
    transition: color 0.2s;
}
.luxe-search-close:hover,
.luxe-search-close:focus {
    color: var(--accent-champagne);
}

.luxe-search-content {
    max-width: 920px;
    margin: 0 auto;
}

.luxe-search-label {
    display: block;

    margin-bottom: 28px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--body-text);
    text-transform: uppercase;
}

.luxe-search-form {
    display: flex;
    align-items: center;
    gap: 36px;
}

.luxe-search-input {
    flex: 1;

    border: none;
    border-bottom: 1px solid var(--border-color);

    height: 64px;

    padding: 0;

    font-size: 24px;
    font-family: var(--font-display);
    color: var(--heading-color);

    background: transparent;
    outline: none;
    transition: border-color 0.25s ease;
}
.luxe-search-input:focus {
    border-bottom-color: var(--primary-green);
}

.luxe-search-input::placeholder {
    color: var(--muted-text);
    font-family: var(--font-body);
    font-size: 20px;
}

.luxe-search-submit {
    min-width: 180px;
    height: 64px;

    border: 1px solid var(--primary-green);
    border-radius: 4px;

    background: var(--primary-green);
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;

    cursor: pointer;
    transition: all .25s ease;
}

.luxe-search-submit:hover,
.luxe-search-submit:focus {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(31, 94, 75, 0.25);
}

@media (max-width: 991px) {

    .luxe-search-inner {
        padding: 80px 24px 40px;
    }

    .luxe-search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .luxe-search-submit {
        width: 100%;
    }

    .luxe-search-input {
        font-size: 20px;
    }
}
/* ============================================================
   Search overlay, driven by the runtime's state attribute
   instead of a .active class toggled by searchbar.js.
   Same visual result — different trigger.
   ============================================================ */
.luxe-search-overlay[data-app-open] {
    opacity: 1;
    visibility: visible;
}

.luxe-search-overlay[data-app-open] .luxe-search-panel {
    transform: translateY(0);
}

/* The close button is absolutely positioned but had no stacking context, so
   the panel's own content could sit over it and swallow the click. */
.luxe-search-close {
    z-index: 2;
}



/* =============================================
   BUNDLED COMPONENT: shipping-returns.css
   ============================================= */
/* ==========================================================================
   LUXE CUSTOMER CARE EDITORIAL DESIGN EXTENSION — SHIPPING & RETURNS
   ========================================================================== */

/* Clears the standard layout navigation bar footprint gracefully */
.shipping-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

.page_header {
    padding-bottom: 64px;
}

/* --- SECTION 1: HEADER & HERO LAYOUT MODULES --- */
.ship-hero-section {
    padding-top: 80px;
    padding-bottom: 100px;
}

.ship-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.ship-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.ship-header-lead-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    color: #444844;
    max-width: 646px;
    margin: 0;
}

.ship-hero-image-frame {
    width: 100%;
    overflow: hidden;
    background-color: #f7f7f7;
}

.ship-hero-asset {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

/* White Glove Segment Specifics */
.experience-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    letter-spacing: -0.01em;
    margin-bottom: 32px;
}

.experience-sub-node {
    max-width: 440px;
}

.experience-node-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #444844;
    display: block;
    margin-bottom: 10px;
}

.experience-node-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: #444844;
    margin: 0;
}

/* --- SECTION 2: RETURNS THREE-COLUMN PROCESS GRID --- */
.ship-returns-process-section {
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: #F3F4F3;
}

.returns-section-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 12px;
}

.returns-section-underline {
    width: 60px;
    height: 1px;
    background-color: #1A1C1C;
}

.process-editorial-card {
    background-color: #ffffff;
    border: 1px solid #C4C7C34D;
    height: auto;
    padding: 36px;
    gap:64px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.process-card-number-id {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-style: italic;
    color: #BBBBBB;
    line-height: 1;
    display: block;
}

.process-card-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 16px;
}

.process-card-description {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844;
    margin: 0;
    min-height: 105px;
}

/* --- SECTION 3: EDITORIAL ACCORDION MODULES --- */
.ship-guidelines-section {
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: #ffffff;
}

.guidelines-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
}

.luxe-accordion-group {
    border-top: 1px solid #EAEAEA;
}

.luxe-accordion-node {
    border-bottom: 1px solid #EAEAEA;
    overflow: hidden;
}

.luxe-accordion-trigger-btn {
    width: 100%;
    background: transparent;
    border: none;
    padding: 24px 0;
    text-align: left;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.luxe-accordion-trigger-btn:focus {
    outline: none;
}

.accordion-trigger-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #1A1C1C;
}

/* Architectural +/- minimalist pseudo icon state driver */
.accordion-status-icon-marker {
    position: relative;
    width: 12px;
    height: 12px;
    display: block;
}

.accordion-status-icon-marker::before,
.accordion-status-icon-marker::after {
    content: '';
    position: absolute;
    background-color: #1A1C1C;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Horizontal stem line element */
.accordion-status-icon-marker::before {
    top: 5px;
    left: 0;
    width: 12px;
    height: 1px;
}

/* Vertical stem line element */
.accordion-status-icon-marker::after {
    top: 0;
    left: 5px;
    width: 1px;
    height: 12px;
}

/* Interactive Open Target States Override togglers */
.luxe-accordion-node.target-active .accordion-status-icon-marker::after {
    transform: rotate(90deg);
}
.luxe-accordion-node.target-active .accordion-status-icon-marker::before {
    transform: rotate(90deg);
    opacity: 0;
}

.luxe-accordion-collapse-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxe-accordion-node.target-active .luxe-accordion-collapse-panel {
    max-height: 200px; /* Generous safe operational height cutoff ceiling */
}

.accordion-panel-body-inner {
    padding-bottom: 28px;
    max-width: 820px;
}

.accordion-panel-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: #444844;
    margin: 0;
}

/* --- SECTION 4: DARK RECOURSE RADIAL ASSISTANCE FOOTER --- */
.ship-assistance-dark-banner {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #181E1A;
    color: #ffffff;
}

.assistance-headline-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.assistance-sub-paragraph {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #959B96;
    max-width: 480px;
    margin: 0 auto;
}

/* Buttons Engineering Layout Styles */
.btn-luxe-solid-white {
    background-color: #ffffff;
    color: #111111;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 14px 36px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.btn-luxe-solid-white:hover {
    background-color: #E2E5E5;
    color: #111111;
}

.btn-luxe-outline-white {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 13px 36px;
    text-decoration: none;
    display: inline-block;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.btn-luxe-outline-white:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.03);
    color: #ffffff;
}

/* ==========================================================================
   RESPONSIVE MODIFICATION ENGINE
   ========================================================================== */
@media (max-width: 992px) {
    .ship-display-title { font-size: 44px; }
    .ship-hero-section { padding-top: 50px; padding-bottom: 60px; }
    .ship-hero-image-frame { margin-bottom: 32px; }
    .ship-returns-process-section { padding-top: 60px; padding-bottom: 60px; }
    .process-editorial-card { height: auto; min-height: 220px; }
    .ship-guidelines-section { padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 576px) {
    .ship-display-title { font-size: 36px; }
    .assistance-headline-title { font-size: 26px; }
    .assistance-btn-group { width: 100%; }
    .btn-luxe-solid-white, .btn-luxe-outline-white { width: 100%; text-align: center; }
}


/* =============================================
   BUNDLED COMPONENT: shop.css
   ============================================= */
/* ============================================================
   ULTRA-LUXURY SHOP ENGINE & STYLING
   ============================================================ */

.shop-hero-section {
  background: #F7F8F6 !important;
  padding: 60px 0 40px 0 !important;
  position: relative !important;
}

.shop-hero-bg-glow {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(ellipse at top center, rgba(230, 244, 234, 0.6) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.shop-hero-title {
  font-family: 'Manrope', serif !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.15 !important;
}

.shop-hero-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: #64748B !important;
  line-height: 1.6 !important;
}

/* Filter & Sort Bar */
.shop-filter-bar {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 16px 0 !important;
}

.filter-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 30px !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.filter-btn:hover,
.filter-btn--active {
  background: #022266 !important;
  color: #FFFFFF !important;
  border-color: #022266 !important;
}

.sort-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748B !important;
  text-transform: uppercase !important;
}

.sort-select {
  height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid #CBD5E1 !important;
  padding: 0 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
  outline: none !important;
  cursor: pointer !important;
}

/* Shop Products Section */
.shop-products-section {
  padding: 60px 0 80px 0 !important;
  background: #F7F8F6 !important;
}

/* Ensure product grid cards spacing & responsiveness */
#products-grid product {
  display: block !important;
}



/* =============================================
   BUNDLED COMPONENT: sustainability.css
   ============================================= */
/* ==========================================================================
   LUXE EDITORIAL ADDITIONS – SUSTAINABILITY SPECIFIC STYLING LAYOUT
   ========================================================================== */

/* Clearance buffer from the standard layout header bar */
.sustainability-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

/* --- SECTION 1: HERO LAYOUT RULES --- */
.sust-hero-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.page_header{padding-bottom: 64px;}

.sust-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 24px;
}

.sust-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.sust-display-title .serif-italic {
    font-style: italic;
    color: #747874;
}

.sust-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    margin: 0;
}

.sust-hero-image-frame {
    width: 100%;
    overflow: hidden;
}

.sust-hero-asset {
    width: 100%;
    height: auto;
    max-height: 580px;
    object-fit: cover;
    display: block;
}

/* --- SECTION 2: PRINCIPLES & TRACEABILITY LAYOUT RULES --- */
.sust-principles-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.sust-sourcing-image-box {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* Emulates the clean fiber sample photography tone values closely */
.sust-placeholder-fiber-graphic {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #F4F3EF 0%, #DCDAD4 70%, #B8B5AE 100%);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.06);
}

.sust-placeholder-fiber-graphic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sust-sourcing-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 20px;
}

.sust-sourcing-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #444844;
    text-align: justify;
}

/* Right Side Stacked Items Typography Rules */
.sust-principles-list-wrap {
    border-left: 1px solid #E5E5E5;
    padding-top: 50px;
    padding-bottom: 80px;
    margin-top: 40px;
}

.sust-list-header-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #181E1A;
    display: block;
    margin-bottom: 40px;
}

.principle-item-node {
    margin-bottom: 45px;
    max-width: 440px;
}

.principle-item-node:last-child {
    margin-bottom: 0;
}

.principle-node-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    color: #1A1C1C;
    margin-bottom: 10px;
}

.principle-node-desc {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844;
    margin: 0;
}

/* --- SECTION 3: ANTI-DISPOSABLE PHILOSOPHY LAYOUT RULES --- */
.sust-philosophy-statement-section {
    padding-top: 64px;
    padding-bottom: 0px;
}

.philosophy-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    display: block;
    margin-bottom: 20px;
}

.philosophy-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.2;
    color: #1A1C1C;
    margin-bottom: 36px;
    letter-spacing: -0.01em;
}

.underline {
    width: 80px;
    height: 1px;
    background-color: #181E1A;
    margin-bottom: 36px;
    margin-left: auto;
    margin-right: auto;
}

.philosophy-paragraph-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    max-width: 760px;
    margin-bottom: 0;
}

/* --- SECTION 4: THREE COLUMN RAW INGREDIENTS LAYOUT RULES --- */
.sust-materials-showcase-section {
    padding-top: 96px;
    padding-bottom: 64px;
}

.material-card-image-wrap {
    width: 100%;
    height: 460px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.material-card-image-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.material-img-fallback {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.material-showcase-card:hover .material-img-fallback {
    transform: scale(1.02);
}

/* Gradients simulating the high-end dark slate teal, rich tan leather splits, and artisanal looms */
.mat-gradient-blue { background: linear-gradient(145deg, #3A4B4C 0%, #1F2829 100%); }
.mat-gradient-leather { background: linear-gradient(145deg, #D49653 0%, #5E3919 100%); }
.mat-gradient-loom { background: linear-gradient(145deg, #D4CFC7 0%, #6E685E 100%); }

.material-card-caption-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #1A1C1C;
    display: block;
    margin-top: 14px;
}

/* --- SECTION 5: EDITORIAL LIST SIGNUP BOX LAYOUT RULES --- */
.sust-editorial-newsletter-section {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #F8F8F8;
    border-top: 1px solid #EBEBEB;
}

.newsletter-headline-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 12px;
}

.newsletter-sub-p {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444844;
    margin-bottom: 0;
}

.newsletter-inline-form-box {
    max-width: 520px;
    margin: 40px auto 0px;
    border-bottom: 1px solid #111111;
    padding-bottom: 6px;
}

.editorial-input-text-node {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    padding: 12px 10px 12px 0;
    color: #111111;
}

.editorial-input-text-node:focus {
    outline: none;
}

.editorial-input-text-node::placeholder {
    color: #999999;
}

.editorial-submit-btn-node {
    border: none;
    background-color: #111111;
    color: #ffffff;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 12px 32px;
    transition: background-color 0.2s ease;
}

.editorial-submit-btn-node:hover {
    background-color: #333333;
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM OVERRIDES
   ========================================================================== */
@media (max-width: 992px) {
    .sust-display-title { font-size: 42px; }
    .philosophy-main-title { font-size: 36px; }
    .sust-principles-list-wrap { border-left: none; padding-left: 0 !important; margin-top: 20px;padding-top: 0px; }
    .sust-hero-section { padding-top: 60px; padding-bottom: 40px; }
    .sust-principles-section { padding-top: 40px; padding-bottom: 60px; }
    .sust-philosophy-statement-section { padding-top: 60px; }
    .sust-materials-showcase-section { padding-bottom: 80px; }
}

@media (max-width: 576px) {
    .sust-display-title { font-size: 42px; }
    .philosophy-main-title { font-size: 28px; }
    .newsletter-inline-form-box { border-bottom: none; padding-bottom: 0; gap: 12px; }
    .editorial-input-text-node { border-bottom: 1px solid #111111; padding-left: 8px; }
}


/* =============================================
   BUNDLED COMPONENT: testo_infographic.css
   ============================================= */
/* ============================================================
   TESTO BOOST INFOGRAPHIC SECTION (WARM ORANGE / AMBER LUXURY THEME)
   ============================================================ */

:root {
  --testo-primary:   #E53935;
  --testo-secondary: #FF7043;
  --testo-accent:    #FFA726;
  --testo-bg:        #FFF8F5;
  --testo-text:      #1F2937;
  --testo-muted:     #6B7280;
  --font-manrope:    'Manrope', sans-serif;
  --font-inter:      'Inter', sans-serif;
}

.testo-infographic-section {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 248, 245, 0.90) 0%, rgba(255, 242, 237, 0.82) 50%, rgba(255, 255, 255, 0.92) 100%), url('../images/testo-bg.png') center/cover no-repeat;
  padding: 110px 0 100px 0;
  min-height: 900px;
  overflow: hidden;
  border-top: 1px solid rgba(229, 57, 53, 0.1);
  border-bottom: 1px solid rgba(229, 57, 53, 0.1);
}

.testo-container-1400 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Atmosphere, Warm Glow (650px) & Background Rings ── */
.testo-warm-glow-650 {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 112, 67, 0.28) 0%, rgba(229, 57, 53, 0.12) 55%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}

.testo-ring-bg {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--testo-primary);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}
.testo-ring-1 { width: 580px; height: 580px; }
.testo-ring-2 { width: 460px; height: 460px; }
.testo-ring-3 { width: 340px; height: 340px; }

/* ── Header Content ── */
.testo-header-wrap {
  max-width: 700px;
  margin: 0 auto 65px auto;
  text-align: center;
}

.testo-pill-badge {
  display: inline-block;
  font-family: var(--font-manrope);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--testo-primary);
  background: rgba(229, 57, 53, 0.08);
  border: 1px solid rgba(229, 57, 53, 0.22);
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.testo-main-heading {
  font-family: var(--font-manrope);
  font-size: 42px;
  font-weight: 800;
  color: var(--testo-text);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.testo-heading-highlight {
  background: linear-gradient(135deg, #E53935 0%, #FF7043 50%, #FFA726 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.testo-main-paragraph {
  font-family: var(--font-inter);
  font-size: 15px;
  color: var(--testo-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Left Column Cards (Width 360px, 3 Cards) ── */
.testo-left-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  z-index: 4;
}

.testo-glass-card-left {
  width: 360px;
  height: 135px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 112, 67, 0.35);
  padding: 18px 22px;
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.testo-glass-card-left:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(229, 57, 53, 0.18), inset 0 1px 0 #ffffff;
  border-color: var(--testo-primary);
}

/* ── Right Column Cards (Width 360px, 4 Cards) ── */
.testo-right-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 4;
}

.testo-glass-card-right {
  width: 360px;
  height: 120px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 112, 67, 0.35);
  padding: 16px 20px;
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.testo-glass-card-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(229, 57, 53, 0.18), inset 0 1px 0 #ffffff;
  border-color: var(--testo-primary);
}

/* ── 52px Circular Orange Icon Badges ── */
.testo-circle-64 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 112, 67, 0.20), rgba(229, 57, 53, 0.09));
  border: 1.5px solid rgba(229, 57, 53, 0.25);
  color: var(--testo-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.testo-glass-card-left:hover .testo-circle-64,
.testo-glass-card-right:hover .testo-circle-64 {
  background: var(--testo-primary);
  color: #ffffff;
  border-color: var(--testo-primary);
  transform: scale(1.08);
}

.testo-card-title-22 {
  font-family: var(--font-manrope);
  font-size: 19px;
  font-weight: 700;
  color: var(--testo-text);
  line-height: 1.18;
  margin: 0 0 2px 0;
}

.testo-card-subtag {
  font-family: var(--font-manrope);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--testo-primary);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.testo-card-body-15 {
  font-family: var(--font-inter);
  font-size: 12.5px;
  color: var(--testo-muted);
  line-height: 1.38;
  margin: 0;
}

/* ── Center Stage: Testo Bottle & Orange Connectors ── */
.testo-center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 540px;
  min-height: 540px;
}

.testo-stage-svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.testo-path-glow {
  stroke: rgba(220, 38, 38, 0.35);
  stroke-width: 4px;
  fill: none !important;
}

.testo-path-main {
  stroke: #DC2626;
  stroke-width: 2px;
  stroke-dasharray: 6 4;
  fill: none !important;
  stroke-linecap: round;
  animation: testoDashFlow 20s linear infinite;
}

.testo-dot-glow {
  fill: rgba(220, 38, 38, 0.4) !important;
  stroke: none !important;
}

.testo-dot-solid {
  fill: #DC2626 !important;
  stroke: none !important;
}

.testo-ring-dashed {
  stroke: rgba(220, 38, 38, 0.22);
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
  fill: none !important;
}

.testo-svg-connector {
  stroke: var(--testo-secondary);
  stroke-dasharray: 8 6;
  stroke-width: 2.5px;
  stroke-linecap: round;
  fill: none !important;
  opacity: 0.88;
  animation: testoDashFlow 25s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(229, 57, 53, 0.25));
}

@keyframes testoDashFlow {
  to { stroke-dashoffset: -200; }
}

.testo-bottle-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.testo-bottle-img,
.testo-bottle-img-330 {
  width: 440px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: -135px; /* Sits flush on top of podium! */
  position: relative;
  z-index: 4;
  filter: drop-shadow(0 32px 50px rgba(31, 41, 55, 0.38));
  transition: transform 0.4s ease;
}

.testo-bottle-img:hover,
.testo-bottle-img-330:hover {
  transform: scale(1.03);
}

.testo-podium-img,
.testo-podium-img-430 {
  width: 540px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 20px 35px rgba(31, 41, 55, 0.20));
}

/* ── Bottom Trust Bar ── */
.testo-trust-bar-50 {
  margin-top: 50px;
  padding: 16px 36px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 112, 67, 0.28);
  border-radius: 40px;
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.testo-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 700;
  color: var(--testo-text);
}

.testo-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(229, 57, 53, 0.2);
}

.testo-trust-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(229, 57, 53, 0.08);
  color: var(--testo-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .testo-left-col, .testo-right-col { width: 100%; }
  .testo-glass-card-left, .testo-glass-card-right { width: 100%; height: auto; }
  .testo-center-stage { width: 100%; min-height: auto; }
  .testo-bottle-img-330 { width: 280px; }
  .testo-stage-svg-overlay { display: none; }
}



/* =============================================
   BUNDLED COMPONENT: thank_you.css
   ============================================= */


/* ---- Header ---- */
.billing-header {
  border-bottom: 1px solid #e4e2de;
  padding: 22px 0;
  background: #f5f4f1;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Main content ---- */
.thankyou-main {
  padding: 64px 0 80px;
  background: #f5f4f1;
  min-height: calc(100vh - 67px - 72px);
}

.thankyou-main .luxe-container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

/* ---- Left: dark editorial image panel ---- */
.thankyou-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1.22;
  position: relative;
  overflow: hidden;
  background: #1e3035;   /* deep teal fallback that matches the photo */
}

.thankyou-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay text centred on the image */
.thankyou-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  /* only visible when no real image, or always if you want text over image */
}

.thankyou-img-overlay h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 18px;
}

/* thin rule under "Thank You" */
.thankyou-img-overlay h2::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,.5);
  margin: 16px auto 0;
}

.thankyou-img-overlay p {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
}

/* ---- Right: confirmation details ---- */
.thankyou-details {
  padding-top: 64px;
  display: flex;
  flex-direction: column;
}

.thankyou-brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .18em;
  color: #1A1C1C;
  margin-bottom: 48px;
}

.thankyou-headline {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  color: #1A1C1C;
  margin-bottom: 32px;
}

.thankyou-body {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 48px;
  max-width: 340px;
}

/* Divider */
.thankyou-divider {
  border: none;
  border-top: 1px solid #C4C7C3;
  margin-bottom: 36px;
}

/* Order reference block */
.thankyou-order-ref {
  margin-bottom: 48px;
}

.order-ref-label {
  font-size: 12px;
  color: #444844;
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 1.2px;

}

.order-ref-value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #1A1C1C;
}

/* CTA */
.btn-return {
  display: inline-block;
  width: 100%;
  max-width: 324px;
  height: 58px;
  background: #1A1C1C;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s;
  text-align: center;
  line-height: 58px;
  text-decoration: none;
}

.btn-return:hover {
  background: #333;
  color: #fff;
}

/* ---- Footer ---- */
.billing-footer {
  border-top: 1px solid #e4e2de;
  padding: 24px 0;
  background: #f5f4f1;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover { color: #1A1C1C; }

/* ---- Responsive ---- */

@media (max-width: 992px) {
  .billing-header .luxe-container{text-align: center;justify-content: center;}
}

@media (max-width: 900px) {
  .thankyou-main .luxe-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .thankyou-details {
    padding-top: 0;
  }

  .thankyou-headline {
    font-size: 52px;
  }

  .btn-return {
    max-width: 100%;
  }

  .billing-footer .luxe-container {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}


/* =============================================
   BUNDLED COMPONENT: upsell.css
   ============================================= */
/* ==========================================
   UPSELL PAGE
========================================== */


.luxe-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #1A1C1C;
  text-decoration: none;
}

/* ---- Header ---- */
.billing-header {
  border-bottom: 1px solid #e8e8e8;
  padding: 22px 0;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Urgency banner ---- */
.urgency-banner {
  background: #1A1C1C;
  padding: 20px 0;
  text-align: center;
}

.urgency-banner p {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #fff;
  text-transform: uppercase;margin-bottom: 0;
}

/* ---- Hero product section ---- */
.upsell-hero {
  padding: 80px 0 96px;
}

.upsell-hero .luxe-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

/* Product image */
.upsell-img-wrap {
  width: 100%;
  height: 850px;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
}

.upsell-img-wrap img {
  width: 100%;
  /* height: 100%;
  object-fit: cover;
  display: block; */
}

/* Product details */
.upsell-details {
  padding-top: 48px;
}

.upsell-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  color: #1A1C1C;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.upsell-headline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: #1A1C1C;
  margin-bottom: 28px;
}

.upsell-description {
  font-size: 16px;
  line-height: 1.75;
  color: #444844;
  margin-bottom: 36px;
}

/* Pricing row */
.upsell-pricing {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  border-top:1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 32px;
}

.price-now {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  color: #1A1C1C;
  line-height: 1;
}

.price-was {
  font-size: 18px;
  color: #747874;
  text-decoration: line-through;
}

.price-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #1A1C1C;
  background: #D8ECBF;
  padding: 5px 10px;
  text-transform: uppercase;
  margin-left: auto;
}

/* Timer box */
.upsell-timer-box {
  border: 1px solid #e4e4e4;
  padding: 20px 24px;
  margin-bottom: 36px;
  background: #F3F4F3;
}

.timer-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #58614F;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.timer-label svg {
  width: 19px;
  height: 19px;
  stroke: #58614F;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.timer-text {
  font-size: 16px;
  font-style: italic;
  color: #555;
  line-height: 1.6;
}

.timer-text strong {
  font-style: normal;
  font-weight: 700;
  color: #1A1C1C;
}

/* CTA buttons */
.upsell-ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.btn-complete {
  display: block;
  width: 100%;
  height: 58px;
  background: #1A1C1C;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s;
  text-align: center;
  line-height: 58px;
  text-decoration: none;
}

.btn-complete:hover {
  background: #333;
  color: #fff;
}

.btn-skip {
  display: block;
  width: 100%;
  height: 58px;
  background: transparent;
  color: #1A1C1C;
  border: 1px solid #1A1C1C;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s, color .2s;
  text-align: center;
  line-height: 56px;
  text-decoration: none;
}

.btn-skip:hover {
  background: #1A1C1C;
  color: #fff;
}

/* ---- Feature grid ---- */
.upsell-features {
  padding: 0 0 100px;
}

.upsell-features .luxe-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feature-card {}

.feature-img {
  width: 100%;
  aspect-ratio: 1 / 0.85;
  overflow: hidden;
  background: #ddd;
  margin-bottom: 24px;
}

.feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}

/* placeholder colour swatches when no real images */
.feature-img--leather { background: #c8c3bc; }
.feature-img--interior { background: #b8b4ae; }
.feature-img--form     { background: #a8a5a0; }

.feature-number {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #1A1C1C;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.feature-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #444844;
}

/* ---- Footer ---- */
.billing-footer {
  border-top: 1px solid #e8e8e8;
  padding: 28px 0;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover { color: #1A1C1C; }

/* ---- Responsive ---- */

@media (max-width: 992px) {
  .billing-header .luxe-container{text-align: center;justify-content: center;}
}
@media (max-width: 768px) {
  .upsell-hero .luxe-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .upsell-details { padding-top: 0; }

  .upsell-headline { font-size: 30px; }

  .upsell-features .luxe-container {
    grid-template-columns: 1fr;
  }

  .billing-footer .luxe-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .billing-footer-links{gap:25px;}

    .upsell-img-wrap {height: auto;}
}


/* =============================================
   BUNDLED COMPONENT: why_us.css
   ============================================= */
/* ============================================================
   WHY CHOOSE US / BETTER LIVING SECTION (LUXURY WELLNESS STYLE)
   Reference Approved Aesthetics & Pixel-Perfect Polish
   ============================================================ */

:root {
  --why-primary:    #022266;
  --why-secondary:  #029AFD;
  --why-accent:     #029AFD;
  --why-glow:       #F5C97B;
  --why-bg:         #FFFDF8;
  --why-muted:      #5E6B66;
  --font-manrope:   'Manrope', sans-serif;
  --font-inter:     'Inter', sans-serif;
}

.why-us-section {
  position: relative;
  width: 100%;
  min-height: 950px;
  background: radial-gradient(circle at 85% 15%, rgba(245, 201, 123, 0.22) 0%, rgba(255, 253, 248, 0.95) 55%, #FFFDF8 100%);
  padding: 110px 0 110px 0;
  overflow: hidden;
  border-top: 1px solid rgba(15, 118, 110, 0.08);
  border-bottom: 1px solid rgba(15, 118, 110, 0.08);
}

.why-us-container {
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  position: relative;
  z-index: 4;
}

/* ── Lush Botanical Top Foliage Corner Overlays ── */
.why-foliage-tl {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 320px;
  height: 280px;
  background: radial-gradient(ellipse at top left, rgba(20, 184, 166, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

.why-foliage-tr {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 320px;
  height: 280px;
  background: radial-gradient(ellipse at top right, rgba(245, 201, 123, 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* ── Sunlight Glow & Floating Leaf Accents ── */
.why-sun-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 750px;
  height: 750px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 201, 123, 0.25) 0%, rgba(24, 183, 154, 0.08) 50%, transparent 75%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

/* Floating green leaf elements */
.why-leaf-particle {
  position: absolute;
  color: #029AFD;
  opacity: 0.65;
  filter: drop-shadow(0 4px 10px rgba(18, 53, 47, 0.15));
  pointer-events: none;
  z-index: 5;
  animation: whyLeafFloat 6s ease-in-out infinite alternate;
}
.why-leaf-1 { top: 28%; left: 8%; font-size: 26px; animation-delay: 0s; }
.why-leaf-2 { top: 62%; left: 24%; font-size: 20px; animation-delay: 1.5s; }
.why-leaf-3 { top: 35%; right: 9%; font-size: 28px; animation-delay: 3s; }
.why-leaf-4 { top: 70%; right: 26%; font-size: 22px; animation-delay: 4.5s; }

@keyframes whyLeafFloat {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-12px) rotate(15deg); }
}

/* ── Header Wrapper ── */
.why-header-wrap {
  max-width: 780px;
  margin: 0 auto 70px auto;
  text-align: center;
}

.why-eyebrow-wrap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.why-eyebrow-line {
  width: 38px;
  height: 1.5px;
  background: rgba(15, 118, 110, 0.35);
}

.why-eyebrow {
  font-family: var(--font-inter);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--why-secondary);
}

.why-main-heading {
  font-family: var(--font-manrope);
  font-size: 74px;
  font-weight: 800;
  line-height: 1.10;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #022266 0%, #029AFD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 22px;
}

.why-sub-heading {
  font-family: var(--font-inter);
  font-size: 21px;
  font-weight: 400;
  color: var(--why-muted);
  line-height: 1.62;
  margin: 0;
}

/* ── 4 Glass Cards Grid Layout ── */
.why-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.why-glass-card {
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.92);
  padding: 36px 26px 30px 26px;
  box-shadow: 0 25px 60px rgba(18, 53, 47, 0.07), inset 0 1px 0 #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.why-glass-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 35px 75px rgba(15, 118, 110, 0.16), inset 0 1px 0 #ffffff;
  border-color: rgba(24, 183, 154, 0.45);
}

/* ── Luxury Circular Icon Holder with Golden Glow ── */
.why-icon-holder {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(245, 201, 123, 0.35) 100%);
  border: 2px solid rgba(245, 201, 123, 0.7);
  box-shadow: 0 10px 24px rgba(245, 201, 123, 0.35), inset 0 1px 0 #ffffff;
  color: var(--why-secondary);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.why-glass-card:hover .why-icon-holder {
  transform: scale(1.1);
  background: var(--why-secondary);
  color: #ffffff;
  border-color: var(--why-secondary);
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.38);
}

.why-card-eyebrow {
  font-family: var(--font-inter);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--why-secondary);
  margin-bottom: 6px;
}

.why-card-title {
  font-family: var(--font-manrope);
  font-size: 22px;
  font-weight: 800;
  color: var(--why-primary);
  line-height: 1.22;
  margin-bottom: 18px;
}

/* ── Card Image Visual Banner with Organic Curved Wave ── */
.why-card-img-wrap {
  width: 100%;
  height: 170px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 10px 24px rgba(18, 53, 47, 0.10);
}

.why-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.why-glass-card:hover .why-card-img-wrap img {
  transform: scale(1.08);
}

.why-card-desc {
  font-family: var(--font-inter);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--why-muted);
  line-height: 1.52;
  margin: 0 0 16px 0;
}

/* ── Accent Line below description ── */
.why-card-line-accent {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #029AFD, #029AFD);
  margin-top: auto;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .why-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .why-main-heading { font-size: 56px; }
}

@media (max-width: 768px) {
  .why-cards-grid { grid-template-columns: 1fr; }
  .why-main-heading { font-size: 42px; }
  .why-sub-heading { font-size: 18px; }
}


/* ============================================================
   ULTRA-PREMIUM LUXURY HERO SECTION (COMPACT & BEAUTIFUL NO WHITE-SPACE)
   ============================================================ */

:root {
  --hero-primary-teal:   #029AFD;
  --hero-accent-green:  #22C55E;
  --hero-teal-light:     #5BC6FF;
  --hero-dark-text:      #163029;
  --hero-body-text:      #4B5563;
  --hero-muted-text:     #7A7A7A;
  --font-manrope:        'Manrope', sans-serif;
  --font-inter:          'Inter', sans-serif;
}

.hero-luxury-section {
  position: relative;
  width: 100%;
  min-height: auto;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.45) 0%, rgba(255, 247, 238, 0.20) 50%, rgba(255, 242, 228, 0.40) 100%), url('../images/hero-bg.png') center/cover no-repeat;
  padding: 60px 0 50px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Golden Hour Radial Sunlight Glows ── */
.hero-sun-glow-overlay {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 231, 197, 0.50) 0%, rgba(255, 216, 156, 0.30) 45%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

.hero-concentric-ring {
  position: absolute;
  top: 48%;
  right: 22%;
  transform: translate(50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 216, 156, 0.45);
  pointer-events: none;
  z-index: 1;
}
.hero-ring-lg { width: 640px; height: 640px; }
.hero-ring-md { width: 480px; height: 480px; }
.hero-ring-sm { width: 340px; height: 340px; }

/* ── Main Hero Container ── */
.hero-luxury-container {
  max-width: 1640px;
  width: 100%;
  margin: 0 auto;
  padding-left: 80px;
  padding-right: 80px;
  position: relative;
  z-index: 3;
}

/* ── Left Content Wrapper ── */
.hero-left-content {
  max-width: 620px;
  width: 100%;
}

.hero-small-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hero-primary-teal);
  background: rgba(15, 118, 110, 0.10);
  border: 1px solid rgba(15, 118, 110, 0.25);
  padding: 8px 22px;
  border-radius: 30px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.08);
}

.hero-main-title {
  font-family: var(--font-manrope);
  font-size: 58px;
  font-weight: 900;
  color: var(--hero-dark-text);
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}

.hero-wellness-highlight {
  background: linear-gradient(135deg, #029AFD 0%, #5BC6FF 50%, #22C55E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.hero-description-text {
  font-family: var(--font-inter);
  font-size: 18.5px;
  font-weight: 400;
  color: var(--hero-body-text);
  line-height: 1.6;
  max-width: 540px;
  margin-bottom: 30px;
}

/* ── CTA Buttons Row ── */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, #029AFD 0%, #5BC6FF 100%);
  color: #FFFFFF !important;
  font-family: var(--font-inter);
  font-size: 16.5px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(15, 118, 110, 0.30);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background 0.35s ease;
  border: none;
}

.hero-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 118, 110, 0.42);
  color: #FFFFFF;
}

.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 34px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--hero-dark-text) !important;
  font-family: var(--font-inter);
  font-size: 16.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid rgba(22, 48, 41, 0.22);
  box-shadow: 0 6px 16px rgba(22, 48, 41, 0.05);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.hero-btn-secondary:hover {
  background: #F8FCFA;
  border-color: var(--hero-primary-teal);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(22, 48, 41, 0.12);
  color: var(--hero-dark-text);
}

/* ── Right Stage Hero Product Image (BIG & BOLD DISPLAY) ── */
.hero-right-stage {
  position: relative;
  width: 100%;
  max-width: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.hero-product-halo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.32) 0%, rgba(15, 118, 110, 0.14) 55%, transparent 75%);
  filter: blur(45px);
  pointer-events: none;
  z-index: 2;
}

.hero-product-main-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 26px 50px rgba(22, 48, 41, 0.28));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  position: relative;
  z-index: 4;
}

.hero-product-main-img:hover {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 32px 60px rgba(22, 48, 41, 0.35));
}

/* ── Floating Badges on Hero Stage ── */
.hero-float-badge {
  position: absolute;
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  padding: 10px 20px;
  border-radius: 40px;
  box-shadow: 0 12px 30px rgba(22, 48, 41, 0.12);
  font-family: var(--font-manrope);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--hero-dark-text);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  animation: heroFloatBob 6s ease-in-out infinite alternate;
}

.hero-float-badge-1 {
  top: 12%;
  right: 4%;
}

.hero-float-badge-2 {
  bottom: 12%;
  left: 2%;
  animation-delay: -3s;
}

@keyframes heroFloatBob {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

/* ── Bottom Floating Glass Trust Bar ── */
.hero-trust-bar-wrap {
  width: 100%;
  margin-top: 40px;
  position: relative;
  z-index: 4;
  text-align: center;
}

.hero-trust-glass-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 16px 42px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 40px;
  box-shadow: 0 12px 32px rgba(22, 48, 41, 0.08);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-manrope);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hero-dark-text);
  white-space: nowrap;
}

.hero-trust-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.10);
  color: var(--hero-primary-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.hero-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(22, 48, 41, 0.15);
}

/* Responsive Overrides */
@media (max-width: 1400px) {
  .hero-luxury-container { padding-left: 40px; padding-right: 40px; }
  .hero-main-title { font-size: 48px; line-height: 1.18; }
  .hero-description-text { font-size: 17px; line-height: 1.55; }
}

@media (max-width: 1199px) {
  .hero-luxury-section { padding: 40px 0 30px 0; }
  .hero-right-stage { max-width: 100%; margin-top: 30px; }
  .hero-product-main-img { max-width: 480px; }
  .hero-trust-glass-container { flex-wrap: wrap; gap: 16px; border-radius: 24px; padding: 14px 20px; }
  .hero-trust-divider { display: none; }
  .hero-float-badge { display: none; }
}


/* ============================================================
   APPLE + AESOP + AG1 INSPIRED WELLNESS INFOGRAPHIC SECTION
   Client-Approved Composition & Pixel-Perfect Dimensions
   ============================================================ */

:root {
  --apple-primary:   #029AFD;
  --apple-secondary: #5BC6FF;
  --apple-accent:    #D4AF37;
  --apple-bg:        #F8FCFA;
  --apple-bg-alt:    #EEF8F4;
  --apple-text:      #153C36;
  --apple-muted:     #5F766E;
  --font-manrope:    'Manrope', sans-serif;
  --font-inter:      'Inter', sans-serif;
}

/* ── Section Container (1400px Max-Width, 110px Top / 100px Bottom Padding) ── */
.apple-infographic-section {
  position: relative;
  background: radial-gradient(circle at 50% 45%, #EEF8F4 0%, #F8FCFA 55%, #FFFFFF 100%);
  padding: 110px 0 100px 0;
  min-height: 900px;
  overflow: hidden;
  border-top: 1px solid rgba(15, 118, 110, 0.08);
  border-bottom: 1px solid rgba(15, 118, 110, 0.08);
}

.apple-container-1400 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Atmosphere, Mint Glow (650px) & Background Rings ── */
.apple-mint-glow-650 {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.26) 0%, rgba(15, 118, 110, 0.1) 55%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}

/* 3 Transparent Rings behind bottle (8% opacity) */
.apple-ring-bg {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--apple-primary);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}
.apple-ring-1 { width: 580px; height: 580px; }
.apple-ring-2 { width: 460px; height: 460px; }
.apple-ring-3 { width: 340px; height: 340px; }

/* Botanical Corner Blurs & Floating Leaves */
.apple-botanical-blur {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(20, 184, 166, 0.08) 60%, transparent 80%);
  filter: blur(55px);
  pointer-events: none;
}
.apple-botanical-blur--tl { top: -60px; left: -60px; }
.apple-botanical-blur--br { bottom: -60px; right: -60px; }

.apple-floating-leaf {
  position: absolute;
  font-size: 20px;
  color: var(--apple-primary);
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
  animation: leafFloat 8s infinite alternate ease-in-out;
}
.apple-floating-leaf--1 { top: 35%; left: 34%; animation-delay: 0s; }
.apple-floating-leaf--2 { top: 68%; right: 35%; animation-delay: 2s; }
.apple-floating-leaf--3 { top: 76%; left: 38%; animation-delay: 4s; }

@keyframes leafFloat {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-12px) rotate(8deg); }
  100% { transform: translateY(-20px) rotate(-6deg); }
}

/* ── Header Content ── */
.apple-header-wrap {
  max-width: 700px;
  margin: 0 auto 65px auto;
  text-align: center;
}

.apple-pill-badge {
  display: inline-block;
  font-family: var(--font-manrope);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--apple-primary);
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.2);
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.apple-main-heading {
  font-family: var(--font-manrope);
  font-size: 42px;
  font-weight: 800;
  color: var(--apple-text);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.apple-heading-primary {
  color: var(--apple-primary);
  display: block;
}

.apple-main-paragraph {
  font-family: var(--font-inter);
  font-size: 15px;
  color: var(--apple-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Left & Right Columns (Width 360px, Symmetrical 3 Cards Each) ── */
.apple-left-col,
.apple-right-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 4;
}

.apple-glass-card-left,
.apple-glass-card-right {
  width: 360px;
  height: 125px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(15, 118, 110, 0.22);
  padding: 16px 20px;
  box-shadow: 0 10px 28px rgba(21, 60, 54, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.apple-glass-card-left:hover,
.apple-glass-card-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 118, 110, 0.18), inset 0 1px 0 #ffffff;
  border-color: var(--apple-primary);
}

/* ── 52px Circular Font Awesome Icon Badges (Slim & Sleek) ── */
.apple-circle-64 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(15, 118, 110, 0.09));
  border: 1.5px solid rgba(15, 118, 110, 0.25);
  color: var(--apple-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.apple-glass-card-left:hover .apple-circle-64,
.apple-glass-card-right:hover .apple-circle-64 {
  background: var(--apple-primary);
  color: #ffffff;
  border-color: var(--apple-primary);
  transform: scale(1.08);
}

.apple-card-title-22 {
  font-family: var(--font-manrope);
  font-size: 19px;
  font-weight: 700;
  color: var(--apple-text);
  line-height: 1.18;
  margin: 0 0 2px 0;
}

.apple-card-subtag {
  font-family: var(--font-manrope);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--apple-primary);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.apple-card-body-15 {
  font-family: var(--font-inter);
  font-size: 12.5px;
  color: var(--apple-muted);
  line-height: 1.38;
  margin: 0;
}

/* ── PROMINENT SVG CONNECTOR LINES & ARROWS ── */
.apple-center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 540px;
  min-height: 540px;
}

.apple-stage-svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.apple-path-glow {
  stroke: rgba(16, 185, 129, 0.35);
  stroke-width: 4px;
  fill: none !important;
}

.apple-path-main {
  stroke: #029AFD;
  stroke-width: 2px;
  stroke-dasharray: 6 4;
  fill: none !important;
  stroke-linecap: round;
  animation: appleDashFlow 20s linear infinite;
}

.apple-dot-glow {
  fill: rgba(16, 185, 129, 0.4) !important;
  stroke: none !important;
}

.apple-dot-solid {
  fill: #029AFD !important;
  stroke: none !important;
}

.apple-ring-dashed {
  stroke: rgba(16, 185, 129, 0.22);
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
  fill: none !important;
}

.apple-svg-connector {
  stroke: var(--apple-primary);
  stroke-dasharray: 8 6;
  stroke-width: 2.5px;
  stroke-linecap: round;
  fill: none !important;
  opacity: 0.88;
  animation: appleDashFlow 25s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(15, 118, 110, 0.25));
}

@keyframes appleDashFlow {
  to { stroke-dashoffset: -200; }
}

/* ── BOTTLE RESTING DIRECTLY ON PODIUM SURFACE (NO GAP / NO Mid-Air Elevation) ── */
.apple-bottle-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.apple-bottle-img-330 {
  width: 440px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: -135px; /* Sits flush on top of podium! */
  position: relative;
  z-index: 4;
  filter: drop-shadow(0 32px 50px rgba(15, 118, 110, 0.38));
  transition: transform 0.4s ease;
}

.apple-bottle-img-330:hover {
  transform: scale(1.03);
}

.apple-podium-img-430 {
  width: 540px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 20px 35px rgba(15, 118, 110, 0.20));
}

/* ── Bottom Trust Bar ── */
.apple-trust-bar-50 {
  margin-top: 50px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.apple-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 700;
  color: var(--apple-text);
}

.apple-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(15, 118, 110, 0.2);
}

.apple-trust-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.08);
  color: var(--apple-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .apple-left-col, .apple-right-col { width: 100%; }
  .apple-glass-card-left, .apple-glass-card-right { width: 100%; height: auto; }
  .apple-center-stage { width: 100%; min-height: auto; }
  .apple-bottle-wrapper { margin-bottom: -85px; }
  .apple-bottle-img-330 { width: 250px; }
  .apple-podium-img-430 { width: 340px; }
  .apple-stage-svg-overlay { display: none; }
}


/* ============================================================
   NO2 NITRIC OXIDE BOOSTER INFOGRAPHIC SECTION (BLUE LUXURY THEME)
   ============================================================ */

:root {
  --no2-primary:    #1565D8;
  --no2-secondary:  #4DA3FF;
  --no2-accent:     #00B7FF;
  --no2-bg:         #F7FBFF;
  --no2-text:       #143B63;
  --no2-muted:      #4A6B8D;
  --font-manrope:   'Manrope', sans-serif;
  --font-inter:     'Inter', sans-serif;
}

.no2-infographic-section {
  position: relative;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.88) 0%, rgba(238, 246, 255, 0.80) 50%, rgba(255, 255, 255, 0.90) 100%), url('../images/product_bg.png') center/cover no-repeat;
  padding: 110px 0 100px 0;
  min-height: 900px;
  overflow: hidden;
  border-top: 1px solid rgba(21, 101, 216, 0.1);
  border-bottom: 1px solid rgba(21, 101, 216, 0.1);
}

.no2-container-1400 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Atmosphere, Blue Radial Glow & Background Rings ── */
.no2-blue-glow-650 {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 163, 255, 0.28) 0%, rgba(21, 101, 216, 0.12) 55%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}

.no2-ring-bg {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--no2-primary);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}
.no2-ring-1 { width: 580px; height: 580px; }
.no2-ring-2 { width: 460px; height: 460px; }
.no2-ring-3 { width: 340px; height: 340px; }

/* ── Header Content ── */
.no2-header-wrap {
  max-width: 720px;
  margin: 0 auto 65px auto;
  text-align: center;
}

.no2-pill-badge {
  display: inline-block;
  font-family: var(--font-manrope);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--no2-primary);
  background: rgba(21, 101, 216, 0.08);
  border: 1px solid rgba(21, 101, 216, 0.22);
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.no2-main-heading {
  font-family: var(--font-manrope);
  font-size: 42px;
  font-weight: 800;
  color: var(--no2-text);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.no2-heading-highlight {
  background: linear-gradient(135deg, #1565D8 0%, #00B7FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.no2-main-paragraph {
  font-family: var(--font-inter);
  font-size: 15px;
  color: var(--no2-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Left & Right Columns (Width 360px, Symmetrical 3 Cards Each) ── */
.no2-left-col,
.no2-right-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 4;
}

.no2-glass-card-left,
.no2-glass-card-right {
  width: 360px;
  height: 125px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(77, 163, 255, 0.38);
  padding: 16px 20px;
  box-shadow: 0 10px 28px rgba(20, 59, 99, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.no2-glass-card-left:hover,
.no2-glass-card-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(21, 101, 216, 0.20), inset 0 1px 0 #ffffff;
  border-color: var(--no2-primary);
}

/* ── 52px Circular Blue Icon Badges (Slim & Sleek) ── */
.no2-circle-64 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.20), rgba(21, 101, 216, 0.09));
  border: 1.5px solid rgba(21, 101, 216, 0.25);
  color: var(--no2-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.no2-glass-card-left:hover .no2-circle-64,
.no2-glass-card-right:hover .no2-circle-64 {
  background: var(--no2-primary);
  color: #ffffff;
  border-color: var(--no2-primary);
  transform: scale(1.08);
}

.no2-card-title-22 {
  font-family: var(--font-manrope);
  font-size: 19px;
  font-weight: 700;
  color: var(--no2-text);
  line-height: 1.18;
  margin: 0 0 2px 0;
}

.no2-card-subtag {
  font-family: var(--font-manrope);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--no2-primary);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.no2-card-body-15 {
  font-family: var(--font-inter);
  font-size: 12.5px;
  color: var(--no2-muted);
  line-height: 1.38;
  margin: 0;
}

/* ── Center Stage: NO2 Bottle (Enlarged Hero Bottle) & Blue Connectors ── */
.no2-center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 540px;
  min-height: 540px;
}

.no2-stage-svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.no2-path-glow {
  stroke: rgba(37, 99, 235, 0.35);
  stroke-width: 4px;
  fill: none !important;
}

.no2-path-main {
  stroke: #2563EB;
  stroke-width: 2px;
  stroke-dasharray: 6 4;
  fill: none !important;
  stroke-linecap: round;
  animation: no2DashFlow 20s linear infinite;
}

.no2-dot-glow {
  fill: rgba(37, 99, 235, 0.4) !important;
  stroke: none !important;
}

.no2-dot-solid {
  fill: #2563EB !important;
  stroke: none !important;
}

.no2-ring-dashed {
  stroke: rgba(37, 99, 235, 0.22);
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
  fill: none !important;
}

.no2-svg-connector {
  stroke: var(--no2-secondary);
  stroke-dasharray: 8 6;
  stroke-width: 2.5px;
  stroke-linecap: round;
  fill: none !important;
  opacity: 0.88;
  animation: no2DashFlow 25s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(21, 101, 216, 0.25));
}

@keyframes no2DashFlow {
  to { stroke-dashoffset: -200; }
}

.no2-bottle-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.no2-bottle-img,
.no2-bottle-img-330 {
  width: 440px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: -135px; /* Sits flush on top of podium! */
  position: relative;
  z-index: 4;
  filter: drop-shadow(0 32px 50px rgba(20, 59, 99, 0.38));
  transition: transform 0.4s ease;
}

.no2-bottle-img:hover,
.no2-bottle-img-330:hover {
  transform: scale(1.03);
}

.no2-podium-img,
.no2-podium-img-430 {
  width: 540px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 20px 35px rgba(20, 59, 99, 0.20));
}

/* ── Bottom Trust Bar ── */
.no2-trust-bar-50 {
  margin-top: 50px;
  padding: 16px 36px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(77, 163, 255, 0.25);
  border-radius: 40px;
  box-shadow: 0 8px 24px rgba(20, 59, 99, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.no2-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 700;
  color: var(--no2-text);
}

.no2-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(21, 101, 216, 0.2);
}

.no2-trust-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(21, 101, 216, 0.08);
  color: var(--no2-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .no2-left-col, .no2-right-col { width: 100%; }
  .no2-glass-card-left, .no2-glass-card-right { width: 100%; height: auto; }
  .no2-center-stage { width: 100%; min-height: auto; }
  .no2-bottle-img-330 { width: 250px; }
  .no2-stage-svg-overlay { display: none; }
}


/* ============================================================
   TESTO BOOST INFOGRAPHIC SECTION (WARM ORANGE / AMBER LUXURY THEME)
   ============================================================ */

:root {
  --testo-primary:   #E53935;
  --testo-secondary: #FF7043;
  --testo-accent:    #FFA726;
  --testo-bg:        #FFF8F5;
  --testo-text:      #1F2937;
  --testo-muted:     #6B7280;
  --font-manrope:    'Manrope', sans-serif;
  --font-inter:      'Inter', sans-serif;
}

.testo-infographic-section {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 248, 245, 0.90) 0%, rgba(255, 242, 237, 0.82) 50%, rgba(255, 255, 255, 0.92) 100%), url('../images/testo-bg.png') center/cover no-repeat;
  padding: 110px 0 100px 0;
  min-height: 900px;
  overflow: hidden;
  border-top: 1px solid rgba(229, 57, 53, 0.1);
  border-bottom: 1px solid rgba(229, 57, 53, 0.1);
}

.testo-container-1400 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Atmosphere, Warm Glow (650px) & Background Rings ── */
.testo-warm-glow-650 {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 112, 67, 0.28) 0%, rgba(229, 57, 53, 0.12) 55%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}

.testo-ring-bg {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--testo-primary);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}
.testo-ring-1 { width: 580px; height: 580px; }
.testo-ring-2 { width: 460px; height: 460px; }
.testo-ring-3 { width: 340px; height: 340px; }

/* ── Header Content ── */
.testo-header-wrap {
  max-width: 700px;
  margin: 0 auto 65px auto;
  text-align: center;
}

.testo-pill-badge {
  display: inline-block;
  font-family: var(--font-manrope);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--testo-primary);
  background: rgba(229, 57, 53, 0.08);
  border: 1px solid rgba(229, 57, 53, 0.22);
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.testo-main-heading {
  font-family: var(--font-manrope);
  font-size: 42px;
  font-weight: 800;
  color: var(--testo-text);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.testo-heading-highlight {
  background: linear-gradient(135deg, #E53935 0%, #FF7043 50%, #FFA726 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.testo-main-paragraph {
  font-family: var(--font-inter);
  font-size: 15px;
  color: var(--testo-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Left Column Cards (Width 360px, 3 Cards) ── */
.testo-left-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  z-index: 4;
}

.testo-glass-card-left {
  width: 360px;
  height: 135px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 112, 67, 0.35);
  padding: 18px 22px;
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.testo-glass-card-left:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(229, 57, 53, 0.18), inset 0 1px 0 #ffffff;
  border-color: var(--testo-primary);
}

/* ── Right Column Cards (Width 360px, 4 Cards) ── */
.testo-right-col {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 4;
}

.testo-glass-card-right {
  width: 360px;
  height: 120px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 112, 67, 0.35);
  padding: 16px 20px;
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.08), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.testo-glass-card-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(229, 57, 53, 0.18), inset 0 1px 0 #ffffff;
  border-color: var(--testo-primary);
}

/* ── 52px Circular Orange Icon Badges ── */
.testo-circle-64 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 112, 67, 0.20), rgba(229, 57, 53, 0.09));
  border: 1.5px solid rgba(229, 57, 53, 0.25);
  color: var(--testo-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.testo-glass-card-left:hover .testo-circle-64,
.testo-glass-card-right:hover .testo-circle-64 {
  background: var(--testo-primary);
  color: #ffffff;
  border-color: var(--testo-primary);
  transform: scale(1.08);
}

.testo-card-title-22 {
  font-family: var(--font-manrope);
  font-size: 19px;
  font-weight: 700;
  color: var(--testo-text);
  line-height: 1.18;
  margin: 0 0 2px 0;
}

.testo-card-subtag {
  font-family: var(--font-manrope);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--testo-primary);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.testo-card-body-15 {
  font-family: var(--font-inter);
  font-size: 12.5px;
  color: var(--testo-muted);
  line-height: 1.38;
  margin: 0;
}

/* ── Center Stage: Testo Bottle & Orange Connectors ── */
.testo-center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 540px;
  min-height: 540px;
}

.testo-stage-svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.testo-path-glow {
  stroke: rgba(220, 38, 38, 0.35);
  stroke-width: 4px;
  fill: none !important;
}

.testo-path-main {
  stroke: #DC2626;
  stroke-width: 2px;
  stroke-dasharray: 6 4;
  fill: none !important;
  stroke-linecap: round;
  animation: testoDashFlow 20s linear infinite;
}

.testo-dot-glow {
  fill: rgba(220, 38, 38, 0.4) !important;
  stroke: none !important;
}

.testo-dot-solid {
  fill: #DC2626 !important;
  stroke: none !important;
}

.testo-ring-dashed {
  stroke: rgba(220, 38, 38, 0.22);
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
  fill: none !important;
}

.testo-svg-connector {
  stroke: var(--testo-secondary);
  stroke-dasharray: 8 6;
  stroke-width: 2.5px;
  stroke-linecap: round;
  fill: none !important;
  opacity: 0.88;
  animation: testoDashFlow 25s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(229, 57, 53, 0.25));
}

@keyframes testoDashFlow {
  to { stroke-dashoffset: -200; }
}

.testo-bottle-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.testo-bottle-img,
.testo-bottle-img-330 {
  width: 440px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: -135px; /* Sits flush on top of podium! */
  position: relative;
  z-index: 4;
  filter: drop-shadow(0 32px 50px rgba(31, 41, 55, 0.38));
  transition: transform 0.4s ease;
}

.testo-bottle-img:hover,
.testo-bottle-img-330:hover {
  transform: scale(1.03);
}

.testo-podium-img,
.testo-podium-img-430 {
  width: 540px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 20px 35px rgba(31, 41, 55, 0.20));
}

/* ── Bottom Trust Bar ── */
.testo-trust-bar-50 {
  margin-top: 50px;
  padding: 16px 36px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 112, 67, 0.28);
  border-radius: 40px;
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.testo-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-manrope);
  font-size: 14px;
  font-weight: 700;
  color: var(--testo-text);
}

.testo-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(229, 57, 53, 0.2);
}

.testo-trust-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(229, 57, 53, 0.08);
  color: var(--testo-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .testo-left-col, .testo-right-col { width: 100%; }
  .testo-glass-card-left, .testo-glass-card-right { width: 100%; height: auto; }
  .testo-center-stage { width: 100%; min-height: auto; }
  .testo-bottle-img-330 { width: 280px; }
  .testo-stage-svg-overlay { display: none; }
}


/* ============================================================
   WHY CHOOSE US / BETTER LIVING SECTION (LUXURY WELLNESS STYLE)
   Reference Approved Aesthetics & Pixel-Perfect Polish
   ============================================================ */

:root {
  --why-primary:    #022266;
  --why-secondary:  #029AFD;
  --why-accent:     #029AFD;
  --why-glow:       #F5C97B;
  --why-bg:         #FFFDF8;
  --why-muted:      #5E6B66;
  --font-manrope:   'Manrope', sans-serif;
  --font-inter:     'Inter', sans-serif;
}

.why-us-section {
  position: relative;
  width: 100%;
  min-height: 950px;
  background: radial-gradient(circle at 85% 15%, rgba(245, 201, 123, 0.22) 0%, rgba(255, 253, 248, 0.95) 55%, #FFFDF8 100%);
  padding: 110px 0 110px 0;
  overflow: hidden;
  border-top: 1px solid rgba(15, 118, 110, 0.08);
  border-bottom: 1px solid rgba(15, 118, 110, 0.08);
}

.why-us-container {
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  position: relative;
  z-index: 4;
}

/* ── Lush Botanical Top Foliage Corner Overlays ── */
.why-foliage-tl {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 320px;
  height: 280px;
  background: radial-gradient(ellipse at top left, rgba(20, 184, 166, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

.why-foliage-tr {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 320px;
  height: 280px;
  background: radial-gradient(ellipse at top right, rgba(245, 201, 123, 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* ── Sunlight Glow & Floating Leaf Accents ── */
.why-sun-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 750px;
  height: 750px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 201, 123, 0.25) 0%, rgba(24, 183, 154, 0.08) 50%, transparent 75%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

/* Floating green leaf elements */
.why-leaf-particle {
  position: absolute;
  color: #029AFD;
  opacity: 0.65;
  filter: drop-shadow(0 4px 10px rgba(18, 53, 47, 0.15));
  pointer-events: none;
  z-index: 5;
  animation: whyLeafFloat 6s ease-in-out infinite alternate;
}
.why-leaf-1 { top: 28%; left: 8%; font-size: 26px; animation-delay: 0s; }
.why-leaf-2 { top: 62%; left: 24%; font-size: 20px; animation-delay: 1.5s; }
.why-leaf-3 { top: 35%; right: 9%; font-size: 28px; animation-delay: 3s; }
.why-leaf-4 { top: 70%; right: 26%; font-size: 22px; animation-delay: 4.5s; }

@keyframes whyLeafFloat {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-12px) rotate(15deg); }
}

/* ── Header Wrapper ── */
.why-header-wrap {
  max-width: 780px;
  margin: 0 auto 70px auto;
  text-align: center;
}

.why-eyebrow-wrap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.why-eyebrow-line {
  width: 38px;
  height: 1.5px;
  background: rgba(15, 118, 110, 0.35);
}

.why-eyebrow {
  font-family: var(--font-inter);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--why-secondary);
}

.why-main-heading {
  font-family: var(--font-manrope);
  font-size: 74px;
  font-weight: 800;
  line-height: 1.10;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #022266 0%, #029AFD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 22px;
}

.why-sub-heading {
  font-family: var(--font-inter);
  font-size: 21px;
  font-weight: 400;
  color: var(--why-muted);
  line-height: 1.62;
  margin: 0;
}

/* ── 4 Glass Cards Grid Layout ── */
.why-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.why-glass-card {
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.92);
  padding: 36px 26px 30px 26px;
  box-shadow: 0 25px 60px rgba(18, 53, 47, 0.07), inset 0 1px 0 #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.why-glass-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 35px 75px rgba(15, 118, 110, 0.16), inset 0 1px 0 #ffffff;
  border-color: rgba(24, 183, 154, 0.45);
}

/* ── Luxury Circular Icon Holder with Golden Glow ── */
.why-icon-holder {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(245, 201, 123, 0.35) 100%);
  border: 2px solid rgba(245, 201, 123, 0.7);
  box-shadow: 0 10px 24px rgba(245, 201, 123, 0.35), inset 0 1px 0 #ffffff;
  color: var(--why-secondary);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.why-glass-card:hover .why-icon-holder {
  transform: scale(1.1);
  background: var(--why-secondary);
  color: #ffffff;
  border-color: var(--why-secondary);
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.38);
}

.why-card-eyebrow {
  font-family: var(--font-inter);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--why-secondary);
  margin-bottom: 6px;
}

.why-card-title {
  font-family: var(--font-manrope);
  font-size: 22px;
  font-weight: 800;
  color: var(--why-primary);
  line-height: 1.22;
  margin-bottom: 18px;
}

/* ── Card Image Visual Banner with Organic Curved Wave ── */
.why-card-img-wrap {
  width: 100%;
  height: 170px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 10px 24px rgba(18, 53, 47, 0.10);
}

.why-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.why-glass-card:hover .why-card-img-wrap img {
  transform: scale(1.08);
}

.why-card-desc {
  font-family: var(--font-inter);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--why-muted);
  line-height: 1.52;
  margin: 0 0 16px 0;
}

/* ── Accent Line below description ── */
.why-card-line-accent {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #029AFD, #029AFD);
  margin-top: auto;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .why-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .why-main-heading { font-size: 56px; }
}

@media (max-width: 768px) {
  .why-cards-grid { grid-template-columns: 1fr; }
  .why-main-heading { font-size: 42px; }
  .why-sub-heading { font-size: 18px; }
}


/* The drawer is styled by CONTRACT ATTRIBUTE as well as by class.
   Keying only on .cart-drawer-overlay / .cart-drawer-panel made the styling
   depend on those exact class names: rename them and the drawer silently stops
   opening. The data-app selectors below are the ones app.js actually drives,
   so the drawer works regardless of what the theme calls its classes. Classes
   are kept so existing styling is untouched. */
/* --- Floating Slide-out Cart Layer Core Elements --- */
.cart-drawer-overlay,
[data-app="cart-overlay"] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.cart-drawer-overlay.drawer-open-active,
[data-app="cart-overlay"][data-app-open] {
    opacity: 1;
    visibility: visible;
}

.cart-drawer-panel,
[data-app="cart-overlay"] > [data-app="cart"] {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 440px;
    height: 100%;
    background-color: var(--bg-section);
    box-shadow: -10px 0 40px rgba(24, 53, 45, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer-overlay.drawer-open-active .cart-drawer-panel,
[data-app="cart-overlay"][data-app-open] > [data-app="cart"] {
    transform: translateX(0);
}

/* --- Headers setup --- */
.cart-drawer-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--card-bg);
}

.cart-drawer-title-group {
    display: flex;
    align-items: center;
}

.cart-drawer-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-display);
}

.cart-drawer-badge {
    font-size: 12px;
    font-weight: 600;
    background-color: var(--primary-green);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 10px;
}

.cart-drawer-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--body-text);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.2s;
}
.cart-drawer-close-btn:hover,
.cart-drawer-close-btn:focus {
    color: var(--accent-champagne);
}

/* --- Scrollable Content Rules --- */
.cart-drawer-items-container {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 240px);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

/* Clean Minimal Scrollbar Tracks */
.cart-drawer-items-container::-webkit-scrollbar {
    width: 5px;
}
.cart-drawer-items-container::-webkit-scrollbar-track {
    background: transparent;
}
.cart-drawer-items-container::-webkit-scrollbar-thumb {
    background: var(--primary-green);
    border-radius: 10px;
}

/* --- Dynamic Listing Design Layout --- */
.cart-drawer-item {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cart-drawer-item-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-item-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--heading-color);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.cart-item-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-green);
    margin: 0 0 8px 0;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    border-radius: 4px;
    padding: 2px;
}

.quantity-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--body-text);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.quantity-btn:hover,
.quantity-btn:focus {
    color: var(--primary-green);
}

.quantity-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading-color);
    padding: 0 8px;
    min-width: 20px;
    text-align: center;
}

.cart-item-remove-btn {
    background: none;
    border: none;
    color: var(--color-error);
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.cart-item-remove-btn:hover {
    opacity: 0.8;
}

/* --- Panel Footer Layer --- */
.cart-drawer-footer {
    padding: 24px;
    background-color: var(--bg-main);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cart-drawer-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cart-summary-label {
    font-size: 13px;
    color: var(--body-text);
    text-transform: uppercase;
}

.cart-summary-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
}

.cart-drawer-disclaimer {
    font-size: 12px;
    color: var(--muted-text);
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.cart-checkout-btn {
    width: 100%;
    background-color: var(--primary-green);
    color: #ffffff;
    border: 1px solid var(--primary-green);
    padding: 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.cart-checkout-btn:hover,
.cart-checkout-btn:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
}

.cart-view-bag-btn {
    width: 100%;
    background-color: transparent;
    color: var(--heading-color);
    border: 1px solid var(--border-color);
    padding: 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.cart-view-bag-btn:hover,
.cart-view-bag-btn:focus {
    background-color: var(--card-bg);
    border-color: var(--accent-champagne);
    color: var(--accent-champagne);
}

.cart-drawer-action-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* ============================================================
   Cart drawer, driven by the runtime's state attribute instead
   of .drawer-open-active toggled by cart.js.
   ============================================================ */
.cart-drawer-overlay[data-app-open],
[data-app="cart-overlay"][data-app-open] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cart-drawer-overlay[data-app-open] .cart-drawer-panel,
[data-app="cart-overlay"][data-app-open] > [data-app="cart"] {
    transform: translateX(0);
}


/* ==========================================
   SEARCH OVERLAY
========================================== */

.luxe-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0,0,0,.15);

    opacity: 0;
    visibility: hidden;

    transition: all .35s ease;
}

.luxe-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.luxe-search-panel {
    background: var(--bg-section);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    transform: translateY(-100%);
    transition: transform .45s ease;
}

.luxe-search-overlay.active .luxe-search-panel {
    transform: translateY(0);
}

.luxe-search-inner {
    max-width: 1360px;
    margin: 0 auto;

    padding: 70px 60px;
    position: relative;
}

.luxe-search-close {
    position: absolute;
    top: 32px;
    right: 48px;

    width: 40px;
    height: 40px;

    border: none;
    background: transparent;

    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--heading-color);
    transition: color 0.2s;
}
.luxe-search-close:hover,
.luxe-search-close:focus {
    color: var(--accent-champagne);
}

.luxe-search-content {
    max-width: 920px;
    margin: 0 auto;
}

.luxe-search-label {
    display: block;

    margin-bottom: 28px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--body-text);
    text-transform: uppercase;
}

.luxe-search-form {
    display: flex;
    align-items: center;
    gap: 36px;
}

.luxe-search-input {
    flex: 1;

    border: none;
    border-bottom: 1px solid var(--border-color);

    height: 64px;

    padding: 0;

    font-size: 24px;
    font-family: var(--font-display);
    color: var(--heading-color);

    background: transparent;
    outline: none;
    transition: border-color 0.25s ease;
}
.luxe-search-input:focus {
    border-bottom-color: var(--primary-green);
}

.luxe-search-input::placeholder {
    color: var(--muted-text);
    font-family: var(--font-body);
    font-size: 20px;
}

.luxe-search-submit {
    min-width: 180px;
    height: 64px;

    border: 1px solid var(--primary-green);
    border-radius: 4px;

    background: var(--primary-green);
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;

    cursor: pointer;
    transition: all .25s ease;
}

.luxe-search-submit:hover,
.luxe-search-submit:focus {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(31, 94, 75, 0.25);
}

@media (max-width: 991px) {

    .luxe-search-inner {
        padding: 80px 24px 40px;
    }

    .luxe-search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .luxe-search-submit {
        width: 100%;
    }

    .luxe-search-input {
        font-size: 20px;
    }
}
/* ============================================================
   Search overlay, driven by the runtime's state attribute
   instead of a .active class toggled by searchbar.js.
   Same visual result — different trigger.
   ============================================================ */
.luxe-search-overlay[data-app-open] {
    opacity: 1;
    visibility: visible;
}

.luxe-search-overlay[data-app-open] .luxe-search-panel {
    transform: translateY(0);
}

/* The close button is absolutely positioned but had no stacking context, so
   the panel's own content could sit over it and swallow the click. */
.luxe-search-close {
    z-index: 2;
}


/* ==========================================================================
   LUXE EDITORIAL ADDITIONS – ABOUT US LAYOUT ENGINE
   Implements exact typography scales and color formatting.
   ========================================================================== */

/* Navigation Baseline Clearance Padding Fix */
.about-page-main.mt-nav {
    margin-top: 91px;
    background-color: var(--color-bg, #ffffff);
}

/* --- SECTION 1: THE ESSENCE INTRO SPECIFICS --- */
.about-essence-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.essence-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.essence-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--color-text-light, #444844);
   
}

.essence-image-frame {
    width: 100%;
    overflow: hidden;
    background-color: #F3F4F3;
}

.essence-visual-asset {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

/* --- SECTION 2: LESS IS CLARITY SPECIFICS --- */
.about-clarity-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background: #F3F4F3;
}

.clarity-image-frame {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.clarity-visual-placeholder {
    width: 100%;
    max-width: 452px;
    aspect-ratio: 3 / 4;
    /* Clean custom brown tone linear-gradient representation matching image styling */
    background: radial-gradient(circle at 30% 20%, #8D6E63 0%, #4E342E 60%, #2D1510 100%);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.2);
}

.clarity-visual-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clarity-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
}

.clarity-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 28px;
    letter-spacing: -0.01em;
}

.clarity-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text-light, #444844);
    max-width: 460px;
}

/* --- SECTION 3: MATERIAL & CRAFT GRID COMPLEX SPECIFICS --- */
.about-craft-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.craft-main-heading {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 12px;
}

.craft-heading-underline {
    width: 96px;
    height: 1px;
    background-color: var(--color-text, #1A1C1C);
}

/* Image wrappers & Gradient placeholders mapping layout graphics exactly */
.craft-bench-image-wrap {
    position: relative;
    width: 100%;
    height: 428px;
    overflow: hidden;
}

.craft-bench-asset-placeholder {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #6D5E54 0%, #3E322B 100%);
}

.craft-image-tag-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #ffffff;
    opacity: 0.8;
}

.craft-dark-logo-card {
    width: 100%;
    height: 428px;
    background-color: #181E1A;
    color: #ffffff;
    padding: 40px;
}

.craft-logo-icon-mark {
    font-size: 28px;
    opacity: 0.8;
}

.craft-logo-label-text {
    font-family: var(--font-display), 'Manrope', serif;
    font-size: 24px;
    font-weight: 600;
    font-style: italic;
    color: #FFFFFF;
}
.craft-logo-label-pretext {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #FFFFFF;
    margin-bottom: 4px;
}
/* Right Column Block Elements */
.craft-sourcing-info-card {
    width: 100%;
    height: 428px;
    background-color: #EFEFEF;
    padding: 40px;
}

.sourcing-card-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 24px;
}

.sourcing-card-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844;
    margin-bottom: 18px;
    max-width: 320px;
}

.sourcing-card-action-link {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: #111111;
    border-bottom: 1px solid #1c1c1c;
    display: inline-block;
    max-width: max-content;
    text-decoration: none;
}

.craft-scissors-image-wrap {
    width: 100%;
    height: 428px;
    overflow: hidden;
}

.craft-scissors-asset-placeholder {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #777777 0%, #222222 100%);
}

/* --- SECTION 4: BIG BLOCKQUOTE INTERLUDE SPECIFICS --- */
.about-quote-interlude-section {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: var(--color-bg, #ffffff);
    border-top: 1px solid #C4C7C34D;
    border-bottom: 1px solid #C4C7C34D;
}

.quote-decorative-mark {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    color: #CCCCCC;
    line-height: 40px;
    display: block;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.about-large-blockquote {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text, #1A1C1C);
    border: none;
    padding: 0;
    margin-bottom: 20px;
}

.about-blockquote-author {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    font-style: normal;
}

/* --- SECTION 5: THE JOURNAL GRID SYSTEM SPECIFICS --- */
.about-journal-section {
    padding-top: 120px;
    padding-bottom: 120px;
   
}

.journal-section-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #444844;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 4px;
}

.journal-section-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--color-text, #1A1C1C);
    margin: 0;
}

.journal-card-item {
    width: 100%;
}

.journal-card-image-wrap {
    width: 100%;
    height: 360px;
    aspect-ratio: 1 / 1.15;
    overflow: hidden;
    background-color: var(--color-bg-alt, #F3F4F3);
}

.journal-img-placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

.journal-card-image-wrap:hover .journal-img-placeholder {
    transform: scale(1.02);
}

/* Distinct high-contrast editorial gradient variants mimicking photography tone values exactly */
.journal-img-bg-1 { background: linear-gradient(135deg, #E0E0E0 0%, #888888 100%); }
.journal-img-bg-2 { background: linear-gradient(135deg, #FFFFFF 0%, #B0B0B0 100%); }
.journal-img-bg-3 { background: linear-gradient(135deg, #777777 0%, #111111 100%); }
.journal-img-bg-4 { background: linear-gradient(135deg, #A0A0A0 0%, #333333 100%); }

.journal-card-article-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--color-text, #1A1C1C);
    margin-bottom: 24px;
    line-height: 1.4;
}

.journal-card-article-excerpt {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-light, #444844);
    margin: 0;
}

/* ==========================================================================
   MEDIA CONTROLS AND RESPONSE MODIFIERS
   ========================================================================== */
@media (max-width: 992px) {
    .essence-display-title { font-size: 40px; }
    .essence-visual-asset { height: 400px; }
    .about-large-blockquote { font-size: 32px; }
    .clarity-image-frame { justify-content: center; margin-bottom: 24px; }
    .clarity-visual-placeholder { max-width: 100%; }
    .craft-sourcing-info-card{height: auto;}
    .about-journal-section .luxe-container .row:first-child .col-auto:first-child{margin-bottom: 20px;}
}

@media (max-width: 576px) {
    .essence-display-title { font-size: 34px; }
    .about-large-blockquote { font-size: 24px; }
    .about-essence-section { padding-top: 60px; padding-bottom: 60px; }
    .about-clarity-section { padding-top: 40px; padding-bottom: 60px; }
    .about-craft-section { padding-top: 60px; padding-bottom: 60px; }
    .about-quote-interlude-section { padding-top: 80px; padding-bottom: 80px; }
    .about-journal-section { padding-top: 60px; padding-bottom: 80px; }
}

/* ==========================================
   CHECKOUT
========================================== */

.checkout-page {
  margin-top: 91px;
  background: #fafafa;
  min-height: 100vh;
}

.checkout-wrapper {
  display: grid;
  grid-template-columns: 1.45fr 420px;
  gap: 108px;
  padding: 72px 0 120px;
}

.checkout-steps {
  display: flex;
  gap: 12px;
  margin-bottom: 72px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #8f8f8f;
}

.checkout-steps .active {
  color: #1A1C1C;
}

.checkout-title,
.summary-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 42px;
}

.checkout-section {
  margin-bottom: 20px;
}

.form-group {
  position: relative;
  margin-bottom: 24px !important;
}

.form-group label {
  display: block !important;
  margin-bottom: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #334155 !important;
}

.form-group input,
.form-group select,
.ignore-app-design .form-group input,
.ignore-app-design .form-group select,
.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="tel"],
.checkout-page select {
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  padding: 0 16px !important;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

.form-group input:focus,
.form-group select:focus,
.checkout-page input:focus,
.checkout-page select:focus {
  border-color: #029AFD !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
}

.checkout-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.checkout-checkbox label {
  font-size: 16px;
  color: #555;
}

.checkout-actions {
  border-top: 1px solid #e6e6e6;

  padding-top: 48px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.return-cart {
  color: #1A1C1C;
  text-decoration: none;
}

.continue-btn {
  width: 245px;
  height: 58px;

  border: 0;
  background: #1A1C1C;
  color: white;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
}

.checkout-summary {
  padding-top: 8px;
}

.summary-products {
  border-bottom: 1px solid #ececec;
  padding-bottom: 32px;
}

.summary-product {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}

.product-thumb {
  width: 92px;
  height: 92px;
}

.product-thumb.bag {
  background: #dcdcdc;
}

.product-info {
  flex: 1;
}

.product-info h4 {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.product-info p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #666;
}

.discount-row {
  display: flex;
  gap: 14px;
}

.discount-row-wrapper{
  padding: 36px 0;
}

.discount-row input {
  flex: 1;

  border: 0;
  border-bottom: 1px solid #d8d8d8;
  background: transparent;

  height: 48px;
}

.discount-row button {
  width: 110px;
  border: 1px solid #1A1C1C;
  background: transparent;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}

.summary-totals {
  border-top: 1px solid #ececec;
  padding-top: 36px;
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
}

.summary-line {
  margin-bottom: 22px;
  font-size: 16px;
}

.summary-line .muted {
  color: #9b9b9b;
}

.summary-total {
  border-top: 1px solid #ececec;
  margin-top: 34px;
  padding-top: 38px;
  align-items: center;
}

.summary-total small {
  font-size: 12px;
  letter-spacing: .16em;
  margin-right: 12px;
  font-weight: 600;
}

.summary-total strong {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 58px;
}

.final_amount{
    display: flex;
    align-items: center;
}

@media (max-width: 992px) {
  .checkout-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .checkout-summary {
    order: -1;
  }

  .checkout-actions {
    flex-direction: column;
    gap: 24px;
  }
}



/* ==========================================
   CHECKOUT BILLING
   Extends checkout.css — billing-specific overrides & additions
========================================== */

/* ---- Billing page uses a simplified header ---- */
.billing-header {
  border-bottom: 1px solid #e8e8e8;
  padding: 22px 0;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
}

/* ---- Page ---- */
.checkout-page {
  margin-top: 0;          /* billing page has its own header */
  background: #fafafa;
  min-height: 100vh;
}

/* ---- Two-col layout (shared with checkout.css but redeclared for safety) ---- */
.checkout-wrapper {
  display: grid;
  grid-template-columns: 1.45fr 420px;
  gap: 108px;
  padding: 72px 0 120px;
}

/* ---- Breadcrumb / steps ---- */
.checkout-steps {
  display: flex;
  gap: 12px;
  margin-bottom: 56px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #8f8f8f;
  text-transform: uppercase;
}

.checkout-steps .active {
  color: #1A1C1C;
}

/* ---- Review info block (email / phone / address) ---- */
.review-block {
  margin-bottom: 56px;
}

.review-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 0px;
  border-bottom: 1px solid #f0f0f0;
}

.review-row:last-child {
  border-bottom: 0;
}

.review-label {
  font-size: 16px;
  color: #7F7F7F;
  min-width: 130px;
  padding-top: 2px;
}

.review-value {
  font-size: 16px;
  color: #1A1C1C;
  text-align: right;
  line-height: 1.6;
}

/* ---- Section titles ---- */
.checkout-title,
.summary-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 36px;
}


/* ---- Shipping options ---- */


.shipping-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px;
  border-bottom: 1px solid #b4b3b3;
  cursor: pointer;
  transition: background .15s;
}

/* .shipping-option:last-child {
  border-bottom: 0;
} */

.shipping-option:hover {
  background: #fafafa;
}

.shipping-option-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Custom radio */
.shipping-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c4c4c4;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .15s;
}

.shipping-option input[type="radio"]:checked {
  border-color: #1A1C1C;
}

.shipping-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A1C1C;
}

.shipping-option-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shipping-option-name {
  font-size: 16px;
  color: #1A1C1C;
}

.shipping-option-days {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #7F7F7F;
  text-transform: uppercase;
}

.shipping-option-price {
  font-size: 16px;
  color: #1A1C1C;
}

/* ---- Payment Method section ---- */


.payment-option {
  border-bottom: 1px solid #C4C7C3;
  cursor: pointer;
}

.payment-option:last-child {
  border-bottom: 0;
}

.payment-option-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0px;
  transition: background .15s;
}

.payment-option-header:hover {
  background: #fafafa;
}

/* reuse same custom radio style */
.payment-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c4c4c4;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .15s;
}

.payment-option input[type="radio"]:checked {
  border-color: #1A1C1C;
}

.payment-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A1C1C;
}

.payment-option-label {
  font-size: 14px;
  color: #1A1C1C;
}

/* PayPal / Afterpay logos */
.payment-logo {
  height: 22px;
  width: auto;
}

/* Card form inside credit card option */
.card-fields {
  padding: 15px 24px 28px 35px;
  display: none;
}

.card-fields.visible {
  display: block;
}

.form-group {
  position: relative;
  margin-bottom: 32px;
}

.form-group label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1A1C1C;
}

.form-group input,
.form-group select {
  width: 100% !important;
  height: 48px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  padding: 0 16px !important;
  outline: none !important;
  font-family: 'Inter', sans-serif !important;
  color: #0f172a !important;
}

.form-group input::placeholder {
  color: #bbb;
  font-size: 14px;
}

.card-row {
  /* display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px; */
}

/* ---- Actions footer ---- */
.checkout-actions {
  border-top: 1px solid #e6e6e6;
  padding-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.return-cart {
  color: #1A1C1C;
  text-decoration: none;
  font-size: 16px;
}

.continue-btn {
  width: 240px !important;
  height: 52px !important;
  border: none !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #029AFD 0%, #029AFD 100%) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  font-family: var(--font-body) !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 20px rgba(15, 118, 110, 0.25) !important;
}

.continue-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(15, 118, 110, 0.35) !important;
  background: linear-gradient(135deg, #029AFD 0%, #029AFD 100%) !important;
}

/* ---- Order Summary sidebar (shared styles, re-declared for self-containment) ---- */
.checkout-summary {
  padding-top: 8px;
}

.summary-products {
  border-bottom: 1px solid #ececec;
  padding-bottom: 32px;
  margin-bottom: 0;
}

.summary-product {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
  position: relative;
}

.product-thumb {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  position: relative;
}

.product-thumb.bag {
  background: #dcdcdc;
}

/* quantity badge */
.qty-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #8f8f8f;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-info {
  flex: 1;
}

.product-info h4 {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 6px;
  font-weight: 400;
}

.product-info p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #444844;
  text-transform: uppercase;
}

.discount-row {
  display: flex;
  gap: 14px;
}

.discount-row input {
  flex: 1 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  height: 48px !important;
  padding: 0 16px !important;
  outline: none !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
}

.discount-row input::placeholder {
  color: #94a3b8 !important;
}

.discount-row button {
  width: 120px !important;
  height: 48px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  transition: background .2s, transform .2s !important;
}

.discount-row button:hover {
  background: #029AFD !important;
  color: #ffffff !important;
}

.summary-totals {
  border-top: 1px solid #ececec;
  padding-top: 36px;
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
}

.summary-line {
  margin-bottom: 22px;
  font-size: 16px;
}

.summary-line .muted {
  color: #9b9b9b;
}

.summary-total {
  border-top: 1px solid #ececec;
  margin-top: 34px;
  padding-top: 38px;
  align-items: center;
}


.summary-total strong {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 58px;
}

.final_amount {
  display: flex;
  align-items: center;
  color: #444844;
}

/* ---- Billing footer ---- */
.billing-footer {
  border-top: 1px solid #e8e8e8;
  padding: 28px 0;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover {
  color: #1A1C1C;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {

  .billing-header .luxe-container{text-align: center;justify-content: center;}

  .checkout-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .checkout-summary {
    order: -1;
  }

  .checkout-actions {
    flex-direction: column;
    gap: 24px;
  }

  .continue-btn {
    width: 100%;
  }
}

@media(max-width:768px){
    .billing-footer .luxe-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .billing-footer-links{gap:25px;}
}

/* ============================================================
   ULTRA-LUXURY REFERENCE CHECKOUT ENGINE
   Matching reference design layout & luxury aesthetic
   ============================================================ */

.checkout-page {
  background: #F7F8F6;
  min-height: 100vh;
  padding: 40px 0 80px 0;
  font-family: 'Inter', sans-serif;
  position: relative;
}

/* Background ambient light & botanical accents */
.checkout-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: radial-gradient(ellipse at top center, rgba(230, 244, 234, 0.5) 0%, transparent 70%);
  pointer-events: none;
}

.checkout-steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.checkout-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #64748B;
}

.checkout-step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #64748B;
}

.checkout-step-item.completed .checkout-step-circle {
  border-color: #029AFD;
  color: #029AFD;
  background: #E6F4EA;
}

.checkout-step-item.active .checkout-step-circle {
  background: #022266;
  border-color: #022266;
  color: #FFFFFF;
}

.checkout-step-item.active {
  color: #0F172A;
  font-weight: 700;
}

.checkout-step-line {
  width: 60px;
  height: 2px;
  background: #E2E8F0;
}

.checkout-step-line.active {
  background: #029AFD;
}

/* ── Grid Layout ── */
.checkout-grid-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 36px;
  align-items: start;
}

/* ── Left Column Card Blocks ── */
.checkout-heading-wrap {
  margin-bottom: 28px;
}

.checkout-main-title {
  font-family: 'Manrope', serif;
  font-size: 36px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 6px;
}

.checkout-main-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #64748B;
  margin: 0;
}

.checkout-card-block {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
}

.checkout-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.checkout-card-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E6F4EA;
  color: #029AFD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.checkout-card-title {
  font-family: 'Manrope', serif;
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 2px 0;
}

.checkout-card-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: #64748B;
  margin: 0;
}

/* Form Input Controls with Icon Prefix */
.co-field-wrap {
  margin-bottom: 20px;
}

.co-field-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
}

.co-field-label span.req {
  color: #EF4444;
}

.co-input-box-wrap {
  position: relative;
  width: 100%;
}

.co-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  font-size: 15px;
  pointer-events: none;
  z-index: 2;
}

body.ignore-app-design .co-input-box-wrap input,
body.ignore-app-design .co-input-box-wrap select,
body.ignore-app-design .checkout-page input[type="text"],
body.ignore-app-design .checkout-page input[type="email"],
body.ignore-app-design .checkout-page input[type="tel"],
body.ignore-app-design .checkout-page select,
.co-input-box-wrap input,
.co-input-box-wrap select,
.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="tel"],
.checkout-page select {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 16px 0 44px !important; /* Extra left padding for icon prefix! */
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #0F172A !important;
  outline: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

body.ignore-app-design .co-input-box-wrap input.no-icon,
body.ignore-app-design .co-input-box-wrap select.no-icon,
body.ignore-app-design .checkout-page input.no-icon,
body.ignore-app-design .checkout-page select.no-icon,
.co-input-box-wrap input.no-icon,
.checkout-page input.no-icon,
.co-input-box-wrap select.no-icon {
  padding-left: 16px !important;
}

body.ignore-app-design .co-input-box-wrap input:focus,
body.ignore-app-design .co-input-box-wrap select:focus,
body.ignore-app-design .checkout-page input:focus,
body.ignore-app-design .checkout-page select:focus,
.co-input-box-wrap input:focus,
.co-input-box-wrap select:focus,
.checkout-page input:focus,
.checkout-page select:focus {
  border-color: #029AFD !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
}

/* ── Payment Pills Grid ── */
.payment-pills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.payment-pill-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
}

.payment-pill-card.selected,
.payment-pill-card:hover {
  border-color: #029AFD;
  background: #F0FDF4;
}

.payment-pill-card .check-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #029AFD;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.payment-pill-title {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 2px;
}

.payment-pill-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: #64748B;
}

/* ── Right Column Order Summary ── */
.checkout-summary-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px 28px 32px 28px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 100px;
}

.summary-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.summary-card-title {
  font-family: 'Manrope', serif;
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.summary-item-count {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: #F1F5F9;
  padding: 6px 14px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.summary-product-item {
  background: #F8FAFC;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.summary-prod-thumb {
  width: 68px;
  height: 68px;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 6px;
  border: 1px solid #E2E8F0;
  flex-shrink: 0;
}

.summary-prod-info {
  flex-grow: 1;
}

.summary-prod-name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.summary-prod-price {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
}

.summary-prod-qty-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  background: #FFFFFF;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
}

.summary-prod-edit {
  font-size: 13px;
  font-weight: 600;
  color: #029AFD;
  text-decoration: underline;
}

.summary-promo-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #F8FAFC;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  margin-bottom: 20px;
}

.summary-calc-rows {
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.summary-calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: #475569;
  margin-bottom: 12px;
}

.summary-calc-row.free-text {
  color: #029AFD;
  font-weight: 700;
}

.summary-total-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.summary-total-label {
  font-family: 'Manrope', serif;
  font-size: 26px;
  font-weight: 700;
  color: #0F172A;
}

.summary-total-amount {
  font-family: 'Manrope', serif;
  font-size: 34px;
  font-weight: 800;
  color: #0F172A;
}

/* Trust Features Box (Free Shipping, Secure Checkout, Easy Returns) */
.summary-trust-features-box {
  background: #FDFBF7;
  border: 1px solid #F5E8D3;
  border-radius: 16px;
  padding: 16px 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
  margin-bottom: 24px;
}

.trust-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.trust-feature-icon {
  font-size: 20px;
  color: #029AFD;
}

.trust-feature-title {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
}

.trust-feature-desc {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #64748B;
}

/* Place Order CTA Button */
.summary-place-order-btn {
  width: 100% !important;
  height: 58px !important;
  border-radius: 50px !important;
  background: #022266 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(10, 60, 54, 0.28) !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

.summary-place-order-btn:hover {
  background: #029AFD !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(15, 118, 110, 0.38) !important;
}

.summary-secure-note {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #64748B;
  text-align: center;
  margin-top: 12px;
}

/* Terms & Conditions Acceptance Box */
.checkout-terms-wrapper {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.co-terms-block {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.45;
}

.co-terms-cb {
  width: 16px !important;
  height: 16px !important;
  accent-color: #029AFD !important;
  cursor: pointer;
  flex-shrink: 0;
}

.co-terms-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #475569;
}

.co-terms-text a {
  color: #029AFD;
  font-weight: 600;
  text-decoration: underline;
}

/* Responsive Grid */
@media (max-width: 991px) {
  .checkout-grid-layout {
    grid-template-columns: 1fr;
  }
  .payment-pills-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   LUXE CONCIERGE & CONTACT EDITORIAL SYSTEM ARCHITECTURE
   ========================================================================== */

/* Clears framework dynamic mobile nav offset safely */
.contact-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

/* --- SECTION 1: HERO DISPLAY OVERRIDES --- */
.contact-hero-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.contact-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 24px;
}

.contact-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.contact-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    margin: 0;
}

.contact-hero-image-frame {
    width: 100%;
    overflow: hidden;
    height: 620px;
}

.contact-hero-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- SECTION 2: INTERACTIVE DIRECT COMMS & FORM SPECIFICS --- */
.contact-interactive-grid-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.comms-node-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #444844;
    display: block;
    margin-bottom: 16px;
}

.comms-primary-link {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: #1A1C1C;
    text-decoration: none;
    display: block;
    transition: opacity 0.2s ease;
}

.comms-primary-link:hover {
    opacity: 0.6;
    color: #1A1C1C;
}

.comms-node-description {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844 ;
}

.studio-locations-list li {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #1A1C1C;
}

/* Structural Action Button Elements */
.btn-luxe-dark-solid {
    background-color: #111111;
    color: #ffffff;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 12px 28px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.btn-luxe-dark-solid:hover {
    background-color: #333333;
    color: #ffffff;
}

/* Minimal Line Engine Form Controls Formatting */
.form-input-node-group {
    border-bottom: 1px solid #111111;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
}

.form-node-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #444844;
    margin-bottom: 6px;
}

.form-node-control {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #1A1C1C;
    padding: 4px 0;
}

.form-node-control:focus {
    outline: none;
}

.text-area-resize-none {
    resize: none;
}

.btn-luxe-outline-dark-action {
    background-color: transparent;
    color: #111111;
    border: 1px solid #111111;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 12px 30px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-luxe-outline-dark-action:hover {
    background-color: #111111;
    color: #ffffff;
}

/* --- SECTION 3: TEXTURE MANIFESTO BANNER SPECIFICS --- */
.contact-manifesto-interlude-section {
    width: 100%;
    background-color: #E2DBD3;
    position:relative;
    overflow: hidden;
}

.contact-manifesto-interlude-section .section_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.contact-manifesto-interlude-section .section_bg img{ 
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.contact-manifesto-interlude-section > .container-fluid {
    position: relative;
    z-index: 2;
}

.manifesto-parallax-texture-box {
    width: 100%;
    /* Soft high-contrast linear smooth brown cream color gradient emulating rich fabric waves */
    padding-top: 550px;
    padding-bottom: 50px;
    box-shadow: inset 0 20px 40px rgba(0,0,0,0.03);position: relative;z-index: 1;
}

.manifesto-parallax-texture-box::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.6) 100%);
    pointer-events: none;
}

.manifesto-quote-prose-text {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

/* ==========================================================================
   MEDIA CONTROLS RESPONSE OVERRIDES
   ========================================================================== */
@media (max-width: 992px) {
    .contact-display-title { font-size: 40px; }
    .contact-hero-section { padding-top: 60px; padding-bottom: 40px; }
    .contact-interactive-grid-section { padding-top: 40px; padding-bottom: 80px; }
    .direct-comms-sidebar-wrapper { margin-bottom: 40px; }
    .enquiry-form-wrapper { padding-left: 0 !important; }
    .manifesto-parallax-texture-box { min-height: 360px; }
    .manifesto-quote-prose-text { font-size: 26px; }
}

@media (max-width: 576px) {
    .contact-display-title { font-size: 32px; }
    .comms-primary-link { font-size: 20px; }
    .btn-luxe-dark-solid, .btn-luxe-outline-dark-action { width: 100%; text-align: center; }
    .manifesto-quote-prose-text { font-size: 22px; }
}

/* ============================================================
   ULTRA-PREMIUM CONTACT PAGE DESIGN (REFERENCE MATCH)
   ============================================================ */

.contact-v8-section {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.contact-v8-header {
  margin-bottom: 60px;
}

.contact-v8-subhead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.contact-v8-subhead .subhead-line {
  width: 28px;
  height: 1.5px;
  background-color: #64748b;
  display: inline-block;
}

.contact-v8-subhead .subhead-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #475569;
  text-transform: uppercase;
}

.contact-v8-title {
  font-family: 'Manrope', serif;
  font-size: 44px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.contact-v8-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.6;
  margin: 0 auto;
}

/* 4 CARDS GRID */
.contact-card-v8 {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
  padding: 36px 24px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  position: relative;
}

.contact-card-v8:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px -10px rgba(0, 0, 0, 0.09), 0 8px 18px -6px rgba(0, 0, 0, 0.04);
  border-color: rgba(203, 213, 225, 0.8);
}

/* CIRCLE ICON WRAPPERS */
.contact-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 22px;
  transition: transform 0.3s ease;
}

.contact-card-v8:hover .contact-icon-circle {
  transform: scale(1.08);
}

/* Card Specific Icon Colors */
.contact-card-v8.card-address .contact-icon-circle {
  background: #e6f7f0;
  color: #047857;
}

.contact-card-v8.card-phone .contact-icon-circle {
  background: #fef3c7;
  color: #d97706;
}

.contact-card-v8.card-email .contact-icon-circle {
  background: #e0f2fe;
  color: #0284c7;
}

.contact-card-v8.card-return .contact-icon-circle {
  background: #fae8ff;
  color: #a21caf;
}

/* CARD CONTENT */
.contact-card-title {
  font-family: 'Manrope', serif;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.contact-card-body-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.contact-card-body-text strong {
  color: #0f172a;
  font-size: 16px;
  display: block;
}

.contact-card-body-text a {
  color: #0f172a;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: color 0.2s ease;
}

.contact-card-body-text a:hover {
  color: #047857;
}

.contact-card-subtext {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 4px;
}

.contact-accent-bar {
  width: 28px;
  height: 2px;
  background-color: #047857;
  border-radius: 2px;
  margin-top: auto;
  transition: width 0.3s ease;
}

.contact-card-v8:hover .contact-accent-bar {
  width: 44px;
}

/* FORM SECTION BELOW CARDS */
.contact-form-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 12px 36px -5px rgba(0, 0, 0, 0.04);
  padding: 48px;
  margin-top: 60px;
}

.contact-form-title {
  font-family: 'Manrope', serif;
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.contact-form-subtitle {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 32px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .contact-v8-title {
    font-size: 34px;
  }
  .contact-form-card {
    padding: 30px;
  }
}


/* ==========================================================================
   LUXE DATA GOVERNANCE & PRIVACY STYLING ARCHITECTURE
   ========================================================================== */

/* Clears navbar layout offset */
.privacy-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

/* --- SECTION 1: HERO HEADER SYSTEM --- */
.privacy-hero-header {
    padding-top: 64px;
    padding-bottom: 64px;

}

.legal-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    display: block;
    margin-bottom: 18px;
}

.legal-display-title {
    font-family: var(--font-display), 'Manrope', serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.legal-header-motto {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: #444844;
    margin-bottom: 16px;
}

.legal-last-updated-date {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #7F7F7F;
    display: block;
}

/* --- SECTION 2: SIDEBAR & STREAM LAYOUT --- */
.privacy-content-layout-section {
    padding-top: 80px;
    padding-bottom: 140px;
}

/* Sticky Sidebar Framework Execution */
.sticky-toc-wrapper {
    position: sticky;
    top: 140px;
    padding-bottom: 20px;
}

.toc-header-title {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #1A1C1C;
    display: block;
    margin-bottom: 24px;
    border-bottom: 1px solid #C4C7C34D;
    padding-bottom: 12px;
}

.toc-navigation-list li {
    margin-bottom: 14px;
}

.toc-anchor-link {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444844;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}

.toc-anchor-link:hover, 
.toc-anchor-link.active {
    color: #1A1C1C;
    padding-left: 4px;
}

/* Legal Prose Content Layout Structure */
.legal-text-stream-wrapper {
    max-width: 720px;
}

.legal-stream-section-node {
    margin-bottom: 64px;

}

.legal-stream-section-node:last-of-type {
    border-bottom: none;
    margin-bottom: 40px;
}

.legal-node-section-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
    border-bottom: 1px solid #C4C7C34D;
    padding-bottom: 15px;
}

.legal-stream-paragraph {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    margin-bottom: 20px;
    text-align: justify;
}

.legal-stream-paragraph.bold-lead {
    font-weight: 400;
    color: #1A1C1C;
}

/* Definitions and Log files inner groupings */
.legal-sub-definition-box {
    margin-top: 28px;
}

.legal-definition-sub-title {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1A1C1C;
    margin-bottom: 8px;
}

/* Inquiries Segment Bottom Footer Panel */
.legal-inquiries-footer-block {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #1A1C1C;
}

.inquiries-caption-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #1A1C1C;
    display: block;
    margin-bottom: 8px;
}

.inquiries-mail-link {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: #1A1C1C;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.inquiries-mail-link:hover {
    opacity: 0.7;
    color: #1A1C1C;
}

.inquiries-schedule-text {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444844;
    margin-top: 10px;
    margin-bottom: 0;
}

/* ==========================================================================
   MEDIA CONTROLS & ADAPTATION DRIVERS
   ========================================================================== */
@media (max-width: 992px) {
    .legal-display-title { font-size: 38px; }
    .sticky-toc-wrapper { position: relative; top: 0; margin-bottom: 40px; border-bottom: 1px solid #EAEAEA; padding-bottom: 32px; }
    .toc-navigation-list { display: flex; flex-wrap: wrap; gap: 16px; }
    .toc-navigation-list li { margin-bottom: 0; }
    .privacy-content-layout-section { padding-top: 40px; padding-bottom: 80px; }
    .inquiries-mail-link { font-size: 24px; }
}

@media (max-width: 576px) {
    .legal-display-title { font-size: 32px; }
    .legal-header-motto { font-size: 16px; text-align: left !important; }
    .privacy-hero-header { padding-top: 60px; padding-bottom: 50px; }
    .toc-navigation-list { flex-direction: column; gap: 8px; }
}

/* =============================================
   SEARCH PAGE — search.css
   Depends on: style.css (shared LUXE tokens)
   ============================================= */


/* =============================================
   SEARCH HEADER
   ============================================= */
   .search-header {
    padding: 64px 0 0;
    background: #F9F9F8;
}

.search-header.mt-nav{margin-top: 91px;}

/* Page title — matches cart-title / col-hero-title style */
.search-title {
    font-family: 'Manrope', serif;
    font-size: 64px;
    font-weight: 400;
    color: #1A1C1C;
    line-height: 1.1;
    margin-bottom: 64px;
}

/* Meta bar: tag pill left, count right */
.search-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 1px solid #d4d4cc;
}

/* Active query tag pill.
   On the desktop search page the chip sits directly in .search-meta-bar — its
   space-between puts the chip left and the count right, so the wrapper that
   used to hold it (and its second data-app hook) was doing nothing and is gone.
   The rule stays for mobile/search.html, which still uses the wrapper. */
.search-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #1A1C1C;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.3px;
    padding: 6px 12px 6px 14px;
    line-height: 1;
}

.search-tag-remove {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.search-tag-remove:hover {
    opacity: 1;
}

/* Results count */
.search-results-count {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    white-space: nowrap;
    /* Hold the right edge on a search with no query: the chip is hidden then,
       leaving the count as the only child, and space-between alone would pull
       it to the left. The empty wrapper used to reserve that space. */
    margin-left: auto;
}


/* =============================================
   SEARCH RESULTS GRID
   Reuses .shop-card, .shop-img-wrap, .shop-img-*,
   .shop-box-title, .shop-price from style.css
   ============================================= */
.search-results {
    background: #F9F9F8;
    padding: 40px 0 100px;
}


/* =============================================
   NO RESULTS STATE
   ============================================= */
.search-no-results {
    padding: 80px 0;
    text-align: center;
}

.search-no-results-msg {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #666666;
    margin-bottom: 24px;
}

.search-browse-link {
    display: inline-block;
    text-decoration: none;
    background-color: #1A1C1C;
    color: #ffffff;
    padding: 14px 32px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    transition: background-color 0.3s ease;
}

.search-browse-link:hover {
    background-color: #333333;
    color: #ffffff;
}


/* =============================================
   RESPONSIVE — TABLET (max 768px)
   ============================================= */
@media (max-width: 768px) {
    .search-title {
        font-size: 40px;
    }
}


/* =============================================
   RESPONSIVE — MOBILE (max 640px)
   ============================================= */
@media (max-width: 640px) {
    .search-header {
        padding: 40px 0 0;
    }

    .search-title {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .search-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 20px;
    }

    .search-results {
        padding: 28px 0 60px;
    }
}

/* ==========================================================================
   LUXE CUSTOMER CARE EDITORIAL DESIGN EXTENSION — SHIPPING & RETURNS
   ========================================================================== */

/* Clears the standard layout navigation bar footprint gracefully */
.shipping-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

.page_header {
    padding-bottom: 64px;
}

/* --- SECTION 1: HEADER & HERO LAYOUT MODULES --- */
.ship-hero-section {
    padding-top: 80px;
    padding-bottom: 100px;
}

.ship-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.ship-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.ship-header-lead-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    color: #444844;
    max-width: 646px;
    margin: 0;
}

.ship-hero-image-frame {
    width: 100%;
    overflow: hidden;
    background-color: #f7f7f7;
}

.ship-hero-asset {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

/* White Glove Segment Specifics */
.experience-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    letter-spacing: -0.01em;
    margin-bottom: 32px;
}

.experience-sub-node {
    max-width: 440px;
}

.experience-node-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #444844;
    display: block;
    margin-bottom: 10px;
}

.experience-node-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: #444844;
    margin: 0;
}

/* --- SECTION 2: RETURNS THREE-COLUMN PROCESS GRID --- */
.ship-returns-process-section {
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: #F3F4F3;
}

.returns-section-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 12px;
}

.returns-section-underline {
    width: 60px;
    height: 1px;
    background-color: #1A1C1C;
}

.process-editorial-card {
    background-color: #ffffff;
    border: 1px solid #C4C7C34D;
    height: auto;
    padding: 36px;
    gap:64px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.process-card-number-id {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-style: italic;
    color: #BBBBBB;
    line-height: 1;
    display: block;
}

.process-card-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 16px;
}

.process-card-description {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844;
    margin: 0;
    min-height: 105px;
}

/* --- SECTION 3: EDITORIAL ACCORDION MODULES --- */
.ship-guidelines-section {
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: #ffffff;
}

.guidelines-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
}

.luxe-accordion-group {
    border-top: 1px solid #EAEAEA;
}

.luxe-accordion-node {
    border-bottom: 1px solid #EAEAEA;
    overflow: hidden;
}

.luxe-accordion-trigger-btn {
    width: 100%;
    background: transparent;
    border: none;
    padding: 24px 0;
    text-align: left;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.luxe-accordion-trigger-btn:focus {
    outline: none;
}

.accordion-trigger-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #1A1C1C;
}

/* Architectural +/- minimalist pseudo icon state driver */
.accordion-status-icon-marker {
    position: relative;
    width: 12px;
    height: 12px;
    display: block;
}

.accordion-status-icon-marker::before,
.accordion-status-icon-marker::after {
    content: '';
    position: absolute;
    background-color: #1A1C1C;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Horizontal stem line element */
.accordion-status-icon-marker::before {
    top: 5px;
    left: 0;
    width: 12px;
    height: 1px;
}

/* Vertical stem line element */
.accordion-status-icon-marker::after {
    top: 0;
    left: 5px;
    width: 1px;
    height: 12px;
}

/* Interactive Open Target States Override togglers */
.luxe-accordion-node.target-active .accordion-status-icon-marker::after {
    transform: rotate(90deg);
}
.luxe-accordion-node.target-active .accordion-status-icon-marker::before {
    transform: rotate(90deg);
    opacity: 0;
}

.luxe-accordion-collapse-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxe-accordion-node.target-active .luxe-accordion-collapse-panel {
    max-height: 200px; /* Generous safe operational height cutoff ceiling */
}

.accordion-panel-body-inner {
    padding-bottom: 28px;
    max-width: 820px;
}

.accordion-panel-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: #444844;
    margin: 0;
}

/* --- SECTION 4: DARK RECOURSE RADIAL ASSISTANCE FOOTER --- */
.ship-assistance-dark-banner {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #181E1A;
    color: #ffffff;
}

.assistance-headline-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.assistance-sub-paragraph {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #959B96;
    max-width: 480px;
    margin: 0 auto;
}

/* Buttons Engineering Layout Styles */
.btn-luxe-solid-white {
    background-color: #ffffff;
    color: #111111;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 14px 36px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.btn-luxe-solid-white:hover {
    background-color: #E2E5E5;
    color: #111111;
}

.btn-luxe-outline-white {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 13px 36px;
    text-decoration: none;
    display: inline-block;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.btn-luxe-outline-white:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.03);
    color: #ffffff;
}

/* ==========================================================================
   RESPONSIVE MODIFICATION ENGINE
   ========================================================================== */
@media (max-width: 992px) {
    .ship-display-title { font-size: 44px; }
    .ship-hero-section { padding-top: 50px; padding-bottom: 60px; }
    .ship-hero-image-frame { margin-bottom: 32px; }
    .ship-returns-process-section { padding-top: 60px; padding-bottom: 60px; }
    .process-editorial-card { height: auto; min-height: 220px; }
    .ship-guidelines-section { padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 576px) {
    .ship-display-title { font-size: 36px; }
    .assistance-headline-title { font-size: 26px; }
    .assistance-btn-group { width: 100%; }
    .btn-luxe-solid-white, .btn-luxe-outline-white { width: 100%; text-align: center; }
}

/* ============================================================
   ULTRA-LUXURY SHOP ENGINE & STYLING
   ============================================================ */

.shop-hero-section {
  background: #F7F8F6 !important;
  padding: 60px 0 40px 0 !important;
  position: relative !important;
}

.shop-hero-bg-glow {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(ellipse at top center, rgba(230, 244, 234, 0.6) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.shop-hero-title {
  font-family: 'Manrope', serif !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.15 !important;
}

.shop-hero-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: #64748B !important;
  line-height: 1.6 !important;
}

/* Filter & Sort Bar */
.shop-filter-bar {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 16px 0 !important;
}

.filter-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 30px !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.filter-btn:hover,
.filter-btn--active {
  background: #022266 !important;
  color: #FFFFFF !important;
  border-color: #022266 !important;
}

.sort-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748B !important;
  text-transform: uppercase !important;
}

.sort-select {
  height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid #CBD5E1 !important;
  padding: 0 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
  outline: none !important;
  cursor: pointer !important;
}

/* Shop Products Section */
.shop-products-section {
  padding: 60px 0 80px 0 !important;
  background: #F7F8F6 !important;
}

/* Ensure product grid cards spacing & responsiveness */
#products-grid product {
  display: block !important;
}


/* ============================================================
   ULTRA-PREMIUM DYNAMIC PRODUCT CARDS (REFERENCE DESIGN MATCH)
   ============================================================ */

/* SECTION HEADER STYLES */
.product-showcase-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
}

.product-section-header {
  margin-bottom: 50px;
}

.product-section-subhead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.product-section-subhead .subhead-line {
  width: 28px;
  height: 1.5px;
  background-color: #64748b;
  display: inline-block;
}

.product-section-subhead .subhead-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #475569;
  text-transform: uppercase;
}

.product-section-title {
  font-family: 'Manrope', serif;
  font-size: 42px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.product-section-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.6;
  margin: 0 auto;
}

/* CARD CONTAINER & THEMING */
.prod-card-v8 {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
  padding: 24px 24px 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  position: relative;
  overflow: hidden;
}

.prod-card-v8:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px -10px rgba(0, 0, 0, 0.09), 0 8px 18px -6px rgba(0, 0, 0, 0.04);
  border-color: rgba(203, 213, 225, 0.8);
}

/* DYNAMIC 3-CARD COLOR THEME MATRIX */
/* Card 1: Emerald / Green Theme */
product:nth-child(3n+1) .prod-card-v8,
product-paginate:nth-child(3n+1) .prod-card-v8 {
  --theme-color: #047857;
  --theme-bg-light: #e6f7f0;
  --theme-gradient: linear-gradient(135deg, #022266 0%, #029AFD 100%);
  --theme-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}

/* Card 2: Crimson / Red Theme */
product:nth-child(3n+2) .prod-card-v8,
product-paginate:nth-child(3n+2) .prod-card-v8 {
  --theme-color: #dc2626;
  --theme-bg-light: #fee2e2;
  --theme-gradient: linear-gradient(135deg, #be123c 0%, #ef4444 100%);
  --theme-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
}

/* Card 3: Sapphire / Blue Theme */
product:nth-child(3n+3) .prod-card-v8,
product-paginate:nth-child(3n+3) .prod-card-v8 {
  --theme-color: #0284c7;
  --theme-bg-light: #e0f2fe;
  --theme-gradient: linear-gradient(135deg, #0242a5 0%, #0284c7 100%);
  --theme-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
}

/* BADGES ROW */
.prod-card-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  min-height: 32px;
}

.prod-badge-category {
  background-color: var(--theme-bg-light);
  color: var(--theme-color);
  padding: 6px 14px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.prod-badge-category i {
  font-size: 12px;
}

.prod-badge-tag {
  background-color: var(--theme-bg-light);
  color: var(--theme-color);
  padding: 6px 14px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

/* TOGGLE BADGE VISIBILITY PER CARD INDEX */
product:nth-child(3n+1) .badge-icon-2,
product:nth-child(3n+1) .badge-icon-3,
product:nth-child(3n+1) .badge-text-2,
product:nth-child(3n+1) .badge-text-3,
product:nth-child(3n+1) .badge-tag-2,
product:nth-child(3n+1) .badge-tag-3,
product-paginate:nth-child(3n+1) .badge-icon-2,
product-paginate:nth-child(3n+1) .badge-icon-3,
product-paginate:nth-child(3n+1) .badge-text-2,
product-paginate:nth-child(3n+1) .badge-text-3,
product-paginate:nth-child(3n+1) .badge-tag-2,
product-paginate:nth-child(3n+1) .badge-tag-3 {
  display: none !important;
}

product:nth-child(3n+2) .badge-icon-1,
product:nth-child(3n+2) .badge-icon-3,
product:nth-child(3n+2) .badge-text-1,
product:nth-child(3n+2) .badge-text-3,
product:nth-child(3n+2) .badge-tag-1,
product:nth-child(3n+2) .badge-tag-3,
product-paginate:nth-child(3n+2) .badge-icon-1,
product-paginate:nth-child(3n+2) .badge-icon-3,
product-paginate:nth-child(3n+2) .badge-text-1,
product-paginate:nth-child(3n+2) .badge-text-3,
product-paginate:nth-child(3n+2) .badge-tag-1,
product-paginate:nth-child(3n+2) .badge-tag-3 {
  display: none !important;
}

product:nth-child(3n+3) .badge-icon-1,
product:nth-child(3n+3) .badge-icon-2,
product:nth-child(3n+3) .badge-text-1,
product:nth-child(3n+3) .badge-text-2,
product:nth-child(3n+3) .badge-tag-1,
product:nth-child(3n+3) .badge-tag-2,
product-paginate:nth-child(3n+3) .badge-icon-1,
product-paginate:nth-child(3n+3) .badge-icon-2,
product-paginate:nth-child(3n+3) .badge-text-1,
product-paginate:nth-child(3n+3) .badge-text-2,
product-paginate:nth-child(3n+3) .badge-tag-1,
product-paginate:nth-child(3n+3) .badge-tag-2 {
  display: none !important;
}

/* PRODUCT BODY (CLICKABLE) */
.prod-card-body {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* IMAGE STAGE WITH REALISTIC BOTTLE SHADOW */
.prod-img-stage {
  position: relative;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding: 10px 0;
}

.prod-img {
  max-height: 200px;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.06));
  z-index: 2;
}

.prod-card-v8:hover .prod-img {
  transform: scale(1.06) translateY(-4px);
}

.prod-img-shadow {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 75%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.prod-card-v8:hover .prod-img-shadow {
  opacity: 0.8;
  transform: translateX(-50%) scale(1.08);
}

/* PRODUCT TEXT CONTENT */
.prod-info {
  margin-bottom: 16px;
}

.prod-title {
  font-family: 'Manrope', serif;
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.prod-card-v8:hover .prod-title {
  color: var(--theme-color);
}

.prod-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prod-price-row {
  font-family: 'Manrope', serif;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 4px;
}

.price-label {
  font-family: 'Manrope', serif;
  font-weight: 700;
  color: #0f172a;
}

.price-amount {
  font-family: 'Manrope', serif;
  font-weight: 700;
  color: var(--theme-color);
  transition: color 0.3s ease;
}

/* VARIANT DROPDOWN SELECTOR */
.prod-variant-wrap {
  margin-top: auto;
  margin-bottom: 16px;
}

.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.product-variant-select {
  width: 100%;
  height: 48px;
  padding: 0 38px 0 16px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all 0.2s ease;
}

.product-variant-select:hover,
.product-variant-select:focus {
  background-color: #ffffff;
  border-color: #cbd5e1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

.select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #64748b;
  font-size: 12px;
}

/* UNIFIED SINGLE LUXURY BUTTON STYLE FOR ALL PRODUCT BUTTONS */
.prod-action-wrap {
  width: 100% !important;
  display: block !important;
}

.btn-prod-add-cart,
.btn-luxe-primary,
.prod-card-v8 .button,
.prod-action-wrap .button,
.prod-action-wrap a {
  width: 100% !important;
  height: 52px !important;
  line-height: 52px !important;
  padding: 0 24px !important;
  border: none !important;
  border-radius: 50px !important;
  background: var(--theme-gradient, linear-gradient(135deg, #029AFD 0%, #029AFD 100%)) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
  box-shadow: var(--theme-shadow, 0 6px 20px rgba(15, 118, 110, 0.22)) !important;
  margin: 0 !important;
}

.btn-prod-add-cart i,
.btn-luxe-primary i,
.prod-card-v8 .button i,
.prod-action-wrap .button i,
.prod-action-wrap a i {
  font-size: 16px !important;
  color: #ffffff !important;
}

.btn-prod-add-cart:hover,
.btn-luxe-primary:hover,
.prod-card-v8 .button:hover,
.prod-action-wrap .button:hover,
.prod-action-wrap a:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--theme-shadow, 0 10px 25px rgba(15, 118, 110, 0.35)) !important;
  filter: brightness(1.08) !important;
  color: #ffffff !important;
}

.btn-prod-add-cart:active,
.btn-luxe-primary:active,
.prod-card-v8 .button:active,
.prod-action-wrap .button:active,
.prod-action-wrap a:active {
  transform: translateY(0) !important;
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 991px) {
  .product-section-title {
    font-size: 34px;
  }
  .prod-img-stage {
    height: 200px;
  }
  .prod-img {
    max-height: 170px;
  }
  .prod-title {
    font-size: 22px;
  }
}

@media (max-width: 575px) {
  .product-section-title {
    font-size: 28px;
  }
  .prod-card-v8 {
    padding: 20px;
  }
}


/* ============================================================
   ULTRA-PREMIUM "BUILT FOR" PRODUCT HIGHLIGHTS SECTION
   ============================================================ */

.built-for-section {
  padding: 90px 0 100px;
  background: radial-gradient(circle at 50% 0%, rgba(241, 245, 249, 0.8) 0%, #ffffff 70%),
              linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

.built-for-header {
  margin-bottom: 60px;
}

.built-for-subhead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  background: rgba(241, 245, 249, 0.8);
  border: 1px solid rgba(203, 213, 225, 0.6);
  padding: 6px 18px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
}

.built-for-subhead .subhead-line {
  width: 20px;
  height: 1.5px;
  background: linear-gradient(90deg, #029AFD 0%, #029AFD 100%);
  display: inline-block;
}

.built-for-subhead .subhead-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #0f172a;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.built-for-subhead .subhead-text i {
  color: #029AFD;
  font-size: 13px;
}

.built-for-title {
  font-family: 'Manrope', serif;
  font-size: 44px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.built-for-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.65;
  margin: 0 auto;
}

/* 3-CARD SHOWCASE GRID */
.built-card-wrap {
  height: 100%;
}

.built-card {
  background: #ffffff;
  border-radius: 28px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02);
  padding: 32px 28px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.built-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--built-theme-gradient, linear-gradient(90deg, #029AFD 0%, #029AFD 100%));
  opacity: 0.8;
}

.built-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 56px -12px rgba(15, 23, 42, 0.1), 0 10px 24px -6px rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
}

/* Card 1: Green / Emerald */
.built-card--emerald {
  --built-theme-gradient: linear-gradient(90deg, #029AFD 0%, #029AFD 100%);
  --built-tag-bg: rgba(236, 253, 245, 0.9);
  --built-tag-color: #029AFD;
}

/* Card 2: Crimson / Red */
.built-card--crimson {
  --built-theme-gradient: linear-gradient(90deg, #be123c 0%, #ef4444 100%);
  --built-tag-bg: rgba(254, 242, 242, 0.9);
  --built-tag-color: #dc2626;
}

/* Card 3: Sapphire / Blue */
.built-card--sapphire {
  --built-theme-gradient: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%);
  --built-tag-bg: rgba(239, 246, 255, 0.9);
  --built-tag-color: #2563eb;
}

.built-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--built-tag-color);
  background: var(--built-tag-bg);
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}

/* PNG IMAGE STAGE */
.built-img-stage {
  position: relative;
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.built-img-stage img {
  max-height: 200px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(15, 23, 42, 0.12));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.built-card:hover .built-img-stage img {
  transform: translateY(-6px) scale(1.04);
  filter: drop-shadow(0 22px 40px rgba(15, 23, 42, 0.18));
}

.built-card-title {
  font-family: 'Manrope', serif;
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.built-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 20px;
}

.built-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  text-align: left;
  width: 100%;
}

.built-features-list li {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.built-features-list li i {
  color: #029AFD;
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .built-for-title { font-size: 34px; }
  .built-img-stage { height: 180px; }
  .built-img-stage img { max-height: 160px; }
}

@media (max-width: 575px) {
  .built-for-title { font-size: 28px; }
  .built-card { padding: 24px 20px 28px; }
}


/* ============================================================
   ULTRA-PREMIUM HOW TO USE SECTION (FONT AWESOME & LUXURY DESIGN)
   ============================================================ */

.how-to-use-section {
  padding: 100px 0 110px;
  background: radial-gradient(circle at 50% 0%, rgba(241, 245, 249, 0.8) 0%, #ffffff 70%),
              linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.how-to-use-section::before {
  content: '';
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.07) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.how-to-use-header {
  margin-bottom: 64px;
  position: relative;
  z-index: 2;
}

.how-to-use-subhead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  background: rgba(241, 245, 249, 0.8);
  border: 1px solid rgba(203, 213, 225, 0.6);
  padding: 6px 18px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
}

.how-to-use-subhead .subhead-line {
  width: 20px;
  height: 1.5px;
  background: linear-gradient(90deg, #029AFD 0%, #029AFD 100%);
  display: inline-block;
}

.how-to-use-subhead .subhead-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #0f172a;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.how-to-use-subhead .subhead-text i {
  color: #029AFD;
  font-size: 13px;
}

.how-to-use-title {
  font-family: 'Manrope', serif;
  font-size: 46px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}

.how-to-use-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.7;
  margin: 0 auto;
}

/* STEP CARDS CONTAINER & FLEX WRAPPER WITH ARROWS */
.how-to-use-grid {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  z-index: 2;
}

.how-step-card-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}

/* CARD BOX */
.how-step-card {
  background: #ffffff;
  border-radius: 28px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02);
  padding: 40px 26px 36px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s ease;
}

/* Top Accent Line on Card */
.how-step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #029AFD 0%, #029AFD 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.how-step-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 56px -12px rgba(15, 23, 42, 0.1), 0 10px 24px -6px rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
}

.how-step-card:hover::before {
  opacity: 1;
}

/* ELEGANT STEP NUMBER WATERMARK/BADGE */
.step-number-bg {
  position: absolute;
  top: 18px;
  left: 22px;
  font-family: 'Manrope', serif;
  font-size: 38px;
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1;
  opacity: 0.7;
  pointer-events: none;
  transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.how-step-card:hover .step-number-bg {
  color: #029AFD;
  opacity: 0.25;
  transform: scale(1.1);
}

/* PURE FONT AWESOME CIRCLE ICON */
.step-icon-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.9) 0%, rgba(209, 250, 229, 0.6) 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #029AFD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-top: 22px;
  margin-bottom: 26px;
  position: relative;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.06), 0 8px 20px rgba(5, 150, 105, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              background 0.4s ease, 
              color 0.4s ease, 
              box-shadow 0.4s ease;
}

/* Ensure no hardcoded emoji pseudo-elements exist */
.step-icon-circle::after {
  content: none !important;
  display: none !important;
}

.how-step-card:hover .step-icon-circle {
  transform: scale(1.12) rotate(4deg);
  background: linear-gradient(135deg, #029AFD 0%, #029AFD 100%);
  color: #ffffff;
  box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.15), 0 14px 28px rgba(5, 150, 105, 0.25);
  border-color: transparent;
}

.step-icon-circle i {
  transition: transform 0.35s ease;
}

.how-step-card:hover .step-icon-circle i {
  transform: scale(1.08);
}

/* CARD TEXT CONTENT */
.step-title {
  font-family: 'Manrope', serif;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
  line-height: 1.3;
}

.step-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 24px;
  flex-grow: 1;
}

.step-accent-bar {
  width: 32px;
  height: 2.5px;
  background: linear-gradient(90deg, #029AFD 0%, #029AFD 100%);
  border-radius: 3px;
  margin-top: auto;
  transition: width 0.35s ease, background 0.35s ease;
}

.how-step-card:hover .step-accent-bar {
  width: 54px;
}

/* STEP CONNECTING ARROWS */
.step-connector-arrow {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  color: #029AFD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
  transition: all 0.35s ease;
}

.how-step-card-wrap:hover .step-connector-arrow {
  background: #029AFD;
  color: #ffffff;
  border-color: #029AFD;
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.3);
}

/* Hide arrow on last step */
.how-step-card-wrap:last-child .step-connector-arrow {
  display: none !important;
}

/* RESPONSIVE LAYOUT */
@media (max-width: 991px) {
  .how-to-use-grid {
    flex-direction: column;
    gap: 28px;
  }
  .step-connector-arrow {
    right: 50%;
    top: auto;
    bottom: -16px;
    transform: translateX(50%) rotate(90deg);
  }
  .how-step-card-wrap:hover .step-connector-arrow {
    transform: translateX(50%) rotate(90deg) scale(1.15);
  }
  .how-to-use-title {
    font-size: 36px;
  }
}

@media (max-width: 575px) {
  .how-to-use-title {
    font-size: 28px;
  }
  .how-step-card {
    padding: 32px 20px 28px;
  }
  .how-to-use-section {
    padding: 70px 0 80px;
  }
}


/* ============================================================
   ULTRA-PREMIUM LUXURY FAQ SECTION
   ============================================================ */

.faq-luxury-section {
  padding: 100px 0 110px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

.faq-header {
  margin-bottom: 60px;
}

.faq-subhead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  background: rgba(241, 245, 249, 0.85);
  border: 1px solid rgba(203, 213, 225, 0.6);
  padding: 6px 18px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
}

.faq-subhead .subhead-line {
  width: 20px;
  height: 1.5px;
  background: linear-gradient(90deg, #029AFD 0%, #029AFD 100%);
  display: inline-block;
}

.faq-subhead .subhead-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #0f172a;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.faq-subhead .subhead-text i {
  color: #029AFD;
  font-size: 13px;
}

.faq-title {
  font-family: 'Manrope', serif;
  font-size: 44px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.faq-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.65;
  margin: 0 auto;
}

/* ACCORDION STYLING */
.faq-accordion-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.faq-accordion .accordion-item {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px !important;
  margin-bottom: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.03);
  transition: all 0.35s ease;
}

.faq-accordion .accordion-item:hover {
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.06);
}

.faq-accordion .accordion-button {
  font-family: 'Manrope', serif;
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
  padding: 24px 28px;
  box-shadow: none !important;
  transition: all 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: #029AFD;
  background: rgba(236, 253, 245, 0.6);
  border-bottom: 1px solid rgba(16, 185, 129, 0.15);
}

.faq-accordion .accordion-button::after {
  background-image: none !important;
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 14px;
  color: #64748b;
  transition: transform 0.35s ease, color 0.35s ease;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  color: #029AFD;
}

.faq-accordion .accordion-body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  padding: 24px 28px 28px;
  background: #ffffff;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .faq-title { font-size: 34px; }
  .faq-accordion .accordion-button { font-size: 17px; padding: 20px 22px; }
  .faq-accordion .accordion-body { font-size: 14.5px; padding: 20px 22px 24px; }
}

@media (max-width: 575px) {
  .faq-title { font-size: 28px; }
  .faq-luxury-section { padding: 70px 0 80px; }
}


/* ==========================================================================
   LUXE EDITORIAL ADDITIONS – SUSTAINABILITY SPECIFIC STYLING LAYOUT
   ========================================================================== */

/* Clearance buffer from the standard layout header bar */
.sustainability-page-main.mt-nav {
    margin-top: 91px;
    background-color: #ffffff;
}

/* --- SECTION 1: HERO LAYOUT RULES --- */
.sust-hero-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.page_header{padding-bottom: 64px;}

.sust-eyebrow-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    text-transform: uppercase;
    display: block;
    margin-bottom: 24px;
}

.sust-display-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    color: #1A1C1C;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.sust-display-title .serif-italic {
    font-style: italic;
    color: #747874;
}

.sust-description-prose {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    margin: 0;
}

.sust-hero-image-frame {
    width: 100%;
    overflow: hidden;
}

.sust-hero-asset {
    width: 100%;
    height: auto;
    max-height: 580px;
    object-fit: cover;
    display: block;
}

/* --- SECTION 2: PRINCIPLES & TRACEABILITY LAYOUT RULES --- */
.sust-principles-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.sust-sourcing-image-box {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* Emulates the clean fiber sample photography tone values closely */
.sust-placeholder-fiber-graphic {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #F4F3EF 0%, #DCDAD4 70%, #B8B5AE 100%);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.06);
}

.sust-placeholder-fiber-graphic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sust-sourcing-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 20px;
}

.sust-sourcing-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #444844;
    text-align: justify;
}

/* Right Side Stacked Items Typography Rules */
.sust-principles-list-wrap {
    border-left: 1px solid #E5E5E5;
    padding-top: 50px;
    padding-bottom: 80px;
    margin-top: 40px;
}

.sust-list-header-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #181E1A;
    display: block;
    margin-bottom: 40px;
}

.principle-item-node {
    margin-bottom: 45px;
    max-width: 440px;
}

.principle-item-node:last-child {
    margin-bottom: 0;
}

.principle-node-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    color: #1A1C1C;
    margin-bottom: 10px;
}

.principle-node-desc {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #444844;
    margin: 0;
}

/* --- SECTION 3: ANTI-DISPOSABLE PHILOSOPHY LAYOUT RULES --- */
.sust-philosophy-statement-section {
    padding-top: 64px;
    padding-bottom: 0px;
}

.philosophy-eyebrow {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444844;
    display: block;
    margin-bottom: 20px;
}

.philosophy-main-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.2;
    color: #1A1C1C;
    margin-bottom: 36px;
    letter-spacing: -0.01em;
}

.underline {
    width: 80px;
    height: 1px;
    background-color: #181E1A;
    margin-bottom: 36px;
    margin-left: auto;
    margin-right: auto;
}

.philosophy-paragraph-body {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #444844;
    max-width: 760px;
    margin-bottom: 0;
}

/* --- SECTION 4: THREE COLUMN RAW INGREDIENTS LAYOUT RULES --- */
.sust-materials-showcase-section {
    padding-top: 96px;
    padding-bottom: 64px;
}

.material-card-image-wrap {
    width: 100%;
    height: 460px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.material-card-image-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.material-img-fallback {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.material-showcase-card:hover .material-img-fallback {
    transform: scale(1.02);
}

/* Gradients simulating the high-end dark slate teal, rich tan leather splits, and artisanal looms */
.mat-gradient-blue { background: linear-gradient(145deg, #3A4B4C 0%, #1F2829 100%); }
.mat-gradient-leather { background: linear-gradient(145deg, #D49653 0%, #5E3919 100%); }
.mat-gradient-loom { background: linear-gradient(145deg, #D4CFC7 0%, #6E685E 100%); }

.material-card-caption-label {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #1A1C1C;
    display: block;
    margin-top: 14px;
}

/* --- SECTION 5: EDITORIAL LIST SIGNUP BOX LAYOUT RULES --- */
.sust-editorial-newsletter-section {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #F8F8F8;
    border-top: 1px solid #EBEBEB;
}

.newsletter-headline-title {
    font-family: var(--font-display), 'Manrope', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #1A1C1C;
    margin-bottom: 12px;
}

.newsletter-sub-p {
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444844;
    margin-bottom: 0;
}

.newsletter-inline-form-box {
    max-width: 520px;
    margin: 40px auto 0px;
    border-bottom: 1px solid #111111;
    padding-bottom: 6px;
}

.editorial-input-text-node {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    padding: 12px 10px 12px 0;
    color: #111111;
}

.editorial-input-text-node:focus {
    outline: none;
}

.editorial-input-text-node::placeholder {
    color: #999999;
}

.editorial-submit-btn-node {
    border: none;
    background-color: #111111;
    color: #ffffff;
    font-family: var(--font-body), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 12px 32px;
    transition: background-color 0.2s ease;
}

.editorial-submit-btn-node:hover {
    background-color: #333333;
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM OVERRIDES
   ========================================================================== */
@media (max-width: 992px) {
    .sust-display-title { font-size: 42px; }
    .philosophy-main-title { font-size: 36px; }
    .sust-principles-list-wrap { border-left: none; padding-left: 0 !important; margin-top: 20px;padding-top: 0px; }
    .sust-hero-section { padding-top: 60px; padding-bottom: 40px; }
    .sust-principles-section { padding-top: 40px; padding-bottom: 60px; }
    .sust-philosophy-statement-section { padding-top: 60px; }
    .sust-materials-showcase-section { padding-bottom: 80px; }
}

@media (max-width: 576px) {
    .sust-display-title { font-size: 42px; }
    .philosophy-main-title { font-size: 28px; }
    .newsletter-inline-form-box { border-bottom: none; padding-bottom: 0; gap: 12px; }
    .editorial-input-text-node { border-bottom: 1px solid #111111; padding-left: 8px; }
}



/* ---- Header ---- */
.billing-header {
  border-bottom: 1px solid #e4e2de;
  padding: 22px 0;
  background: #f5f4f1;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Main content ---- */
.thankyou-main {
  padding: 64px 0 80px;
  background: #f5f4f1;
  min-height: calc(100vh - 67px - 72px);
}

.thankyou-main .luxe-container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

/* ---- Left: dark editorial image panel ---- */
.thankyou-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1.22;
  position: relative;
  overflow: hidden;
  background: #1e3035;   /* deep teal fallback that matches the photo */
}

.thankyou-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay text centred on the image */
.thankyou-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  /* only visible when no real image, or always if you want text over image */
}

.thankyou-img-overlay h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 18px;
}

/* thin rule under "Thank You" */
.thankyou-img-overlay h2::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,.5);
  margin: 16px auto 0;
}

.thankyou-img-overlay p {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
}

/* ---- Right: confirmation details ---- */
.thankyou-details {
  padding-top: 64px;
  display: flex;
  flex-direction: column;
}

.thankyou-brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .18em;
  color: #1A1C1C;
  margin-bottom: 48px;
}

.thankyou-headline {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  color: #1A1C1C;
  margin-bottom: 32px;
}

.thankyou-body {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 48px;
  max-width: 340px;
}

/* Divider */
.thankyou-divider {
  border: none;
  border-top: 1px solid #C4C7C3;
  margin-bottom: 36px;
}

/* Order reference block */
.thankyou-order-ref {
  margin-bottom: 48px;
}

.order-ref-label {
  font-size: 12px;
  color: #444844;
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 1.2px;

}

.order-ref-value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #1A1C1C;
}

/* CTA */
.btn-return {
  display: inline-block;
  width: 100%;
  max-width: 324px;
  height: 58px;
  background: #1A1C1C;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s;
  text-align: center;
  line-height: 58px;
  text-decoration: none;
}

.btn-return:hover {
  background: #333;
  color: #fff;
}

/* ---- Footer ---- */
.billing-footer {
  border-top: 1px solid #e4e2de;
  padding: 24px 0;
  background: #f5f4f1;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover { color: #1A1C1C; }

/* ---- Responsive ---- */

@media (max-width: 992px) {
  .billing-header .luxe-container{text-align: center;justify-content: center;}
}

@media (max-width: 900px) {
  .thankyou-main .luxe-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .thankyou-details {
    padding-top: 0;
  }

  .thankyou-headline {
    font-size: 52px;
  }

  .btn-return {
    max-width: 100%;
  }

  .billing-footer .luxe-container {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* ==========================================
   UPSELL PAGE
========================================== */


.luxe-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #1A1C1C;
  text-decoration: none;
}

/* ---- Header ---- */
.billing-header {
  border-bottom: 1px solid #e8e8e8;
  padding: 22px 0;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Urgency banner ---- */
.urgency-banner {
  background: #1A1C1C;
  padding: 20px 0;
  text-align: center;
}

.urgency-banner p {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #fff;
  text-transform: uppercase;margin-bottom: 0;
}

/* ---- Hero product section ---- */
.upsell-hero {
  padding: 80px 0 96px;
}

.upsell-hero .luxe-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

/* Product image */
.upsell-img-wrap {
  width: 100%;
  height: 850px;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
}

.upsell-img-wrap img {
  width: 100%;
  /* height: 100%;
  object-fit: cover;
  display: block; */
}

/* Product details */
.upsell-details {
  padding-top: 48px;
}

.upsell-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  color: #1A1C1C;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.upsell-headline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: #1A1C1C;
  margin-bottom: 28px;
}

.upsell-description {
  font-size: 16px;
  line-height: 1.75;
  color: #444844;
  margin-bottom: 36px;
}

/* Pricing row */
.upsell-pricing {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  border-top:1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 32px;
}

.price-now {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  color: #1A1C1C;
  line-height: 1;
}

.price-was {
  font-size: 18px;
  color: #747874;
  text-decoration: line-through;
}

.price-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #1A1C1C;
  background: #D8ECBF;
  padding: 5px 10px;
  text-transform: uppercase;
  margin-left: auto;
}

/* Timer box */
.upsell-timer-box {
  border: 1px solid #e4e4e4;
  padding: 20px 24px;
  margin-bottom: 36px;
  background: #F3F4F3;
}

.timer-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #58614F;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.timer-label svg {
  width: 19px;
  height: 19px;
  stroke: #58614F;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.timer-text {
  font-size: 16px;
  font-style: italic;
  color: #555;
  line-height: 1.6;
}

.timer-text strong {
  font-style: normal;
  font-weight: 700;
  color: #1A1C1C;
}

/* CTA buttons */
.upsell-ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.btn-complete {
  display: block;
  width: 100%;
  height: 58px;
  background: #1A1C1C;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s;
  text-align: center;
  line-height: 58px;
  text-decoration: none;
}

.btn-complete:hover {
  background: #333;
  color: #fff;
}

.btn-skip {
  display: block;
  width: 100%;
  height: 58px;
  background: transparent;
  color: #1A1C1C;
  border: 1px solid #1A1C1C;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s, color .2s;
  text-align: center;
  line-height: 56px;
  text-decoration: none;
}

.btn-skip:hover {
  background: #1A1C1C;
  color: #fff;
}

/* ---- Feature grid ---- */
.upsell-features {
  padding: 0 0 100px;
}

.upsell-features .luxe-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feature-card {}

.feature-img {
  width: 100%;
  aspect-ratio: 1 / 0.85;
  overflow: hidden;
  background: #ddd;
  margin-bottom: 24px;
}

.feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}

/* placeholder colour swatches when no real images */
.feature-img--leather { background: #c8c3bc; }
.feature-img--interior { background: #b8b4ae; }
.feature-img--form     { background: #a8a5a0; }

.feature-number {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #1A1C1C;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.feature-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #444844;
}

/* ---- Footer ---- */
.billing-footer {
  border-top: 1px solid #e8e8e8;
  padding: 28px 0;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover { color: #1A1C1C; }

/* ---- Responsive ---- */

@media (max-width: 992px) {
  .billing-header .luxe-container{text-align: center;justify-content: center;}
}
@media (max-width: 768px) {
  .upsell-hero .luxe-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .upsell-details { padding-top: 0; }

  .upsell-headline { font-size: 30px; }

  .upsell-features .luxe-container {
    grid-template-columns: 1fr;
  }

  .billing-footer .luxe-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .billing-footer-links{gap:25px;}

    .upsell-img-wrap {height: auto;}
}

/* ============================================================
   ULTRA-LUXURY CART ENGINE & STYLING (SCOPED STRICTLY TO .cart-page)
   ============================================================ */

/* Force visibility of Unify CMS cart items container inside .cart-page ONLY */
.cart-page [data-app="cart-items"],
.cart-page .cart-items-section,
.cart-page #pageItems {
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
}

body.ignore-app-design .cart-page,
.cart-page {
  background: #F7F8F6 !important;
  min-height: 100vh !important;
  padding: 40px 0 100px 0 !important;
  font-family: 'Inter', sans-serif !important;
  position: relative !important;
}

/* Background ambient glow */
.cart-page::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 380px !important;
  background: radial-gradient(ellipse at top center, rgba(230, 244, 234, 0.55) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.cart-page .cart-header-wrap {
  margin-bottom: 36px !important;
  position: relative !important;
  z-index: 2 !important;
}

.cart-page .cart-sub-kicker {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #8C827A !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}

.cart-page .cart-title {
  font-family: 'Manrope', serif !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 6px !important;
  line-height: 1.1 !important;
}

.cart-page .cart-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #64748B !important;
  margin-bottom: 0 !important;
}

/* Grid Layout */
body.ignore-app-design .cart-page .cart-layout,
.cart-page .cart-layout {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 36px !important;
  align-items: start !important;
}

/* ── Main Cart Left Card Block ── */
.cart-page .cart-table-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 32px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03) !important;
}

body.ignore-app-design .cart-page .cart-table-header,
.cart-page .cart-table-header {
  display: grid !important;
  grid-template-columns: 1fr 140px 100px !important;
  padding-bottom: 16px !important;
  border-bottom: 1.5px solid #F1F5F9 !important;
  margin-bottom: 24px !important;
}

.cart-page .cart-table-header span {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
}

.cart-page .col-quantity,
.cart-page .col-total {
  text-align: center !important;
}

/* Cart Item Row */
body.ignore-app-design .cart-page .cart-item,
.cart-page .cart-item {
  display: grid !important;
  grid-template-columns: 1fr 140px 100px !important;
  align-items: center !important;
  padding: 24px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.cart-page .cart-item:last-child {
  border-bottom: none !important;
}

body.ignore-app-design .cart-page .cart-item-product,
.cart-page .cart-item-product {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

.cart-page .cart-item-image {
  width: 120px !important;
  height: 120px !important;
  flex-shrink: 0 !important;
  border-radius: 16px !important;
  background: radial-gradient(circle at center, #FFFFFF 40%, #F8FAFC 100%) !important;
  border: 1px solid #E2E8F0 !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.cart-page .cart-item-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

.cart-page .cart-item-name {
  font-family: 'Manrope', serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}

.cart-page .cart-item-unit-price {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 8px !important;
}

.cart-page .c-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.cart-page .c-badge svg {
  color: #029AFD !important;
}

.cart-page .cart-item-remove {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.2s ease !important;
  margin-top: 6px !important;
}

.cart-page .cart-item-remove:hover {
  color: #EF4444 !important;
}

/* Quantity Control */
.cart-page .cart-item-quantity {
  display: flex !important;
  justify-content: center !important;
}

.cart-page .qty-control {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 108px !important;
  height: 40px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 30px !important;
  background: #FFFFFF !important;
  padding: 0 6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.cart-page .qty-btn {
  background: none !important;
  border: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.cart-page .qty-btn:hover {
  background: #F1F5F9 !important;
  color: #029AFD !important;
}

.cart-page .qty-value {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  min-width: 24px !important;
  text-align: center !important;
}

/* Total Column */
.cart-page .cart-item-total {
  text-align: center !important;
}

.cart-page .item-total-price {
  font-family: 'Manrope', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

/* Promo Code Box */
.cart-page .cart-promo-block {
  background: #FDFBF7 !important;
  border: 1px solid #F5E8D3 !important;
  border-radius: 16px !important;
  padding: 18px 24px !important;
}

.cart-page .cart-promo-icon-circle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #E6F4EA !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.cart-page .cart-promo-title {
  font-family: 'Manrope', serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

.cart-page .cart-promo-subtext {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  color: #64748B !important;
}

body.ignore-app-design .cart-page .cart-promo-input,
.cart-page .cart-promo-input {
  width: 200px !important;
  height: 44px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  outline: none !important;
  background: #FFFFFF !important;
}

.cart-page .cart-promo-btn {
  height: 44px !important;
  padding: 0 24px !important;
  border-radius: 10px !important;
  background: #022266 !important;
  color: #FFFFFF !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.cart-page .cart-promo-btn:hover {
  background: #029AFD !important;
}

/* Recommendations Grid */
.cart-page .cart-rec-heading {
  font-family: 'Manrope', serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

.cart-page .cart-rec-viewall {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  color: #029AFD !important;
}

.cart-page .cart-rec-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 18px !important;
  padding: 16px !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.cart-page .cart-rec-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06) !important;
}

.cart-page .cart-rec-img-wrap {
  height: 120px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cart-page .cart-rec-img-wrap img {
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.cart-page .cart-rec-name {
  font-family: 'Manrope', serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 2px !important;
}

.cart-page .cart-rec-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #64748B !important;
  margin-bottom: 8px !important;
}

.cart-page .cart-rec-price {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin-bottom: 12px !important;
}

.cart-page .cart-rec-add-btn {
  display: block !important;
  width: 100% !important;
  padding: 9px 0 !important;
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-radius: 30px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.cart-page .cart-rec-add-btn:hover {
  background: #022266 !important;
  color: #FFFFFF !important;
}

/* Order Summary Sidebar Card */
body.ignore-app-design .cart-page .order-summary,
.cart-page .order-summary {
  background: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 32px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04) !important;
  position: sticky !important;
  top: 100px !important;
}

.cart-page .summary-title {
  font-family: 'Manrope', serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 24px !important;
}

.cart-page .summary-rows {
  border-bottom: 1.5px solid #F1F5F9 !important;
  padding-bottom: 18px !important;
  margin-bottom: 20px !important;
}

.cart-page .summary-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  color: #475569 !important;
}

.cart-page .summary-value.text-emerald {
  color: #029AFD !important;
  font-weight: 700 !important;
}

.cart-page .summary-total-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
}

.cart-page .summary-total-label {
  font-family: 'Manrope', serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

.cart-page .summary-total-value {
  font-family: 'Manrope', serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

/* Proceed to Checkout CTA Button */
body.ignore-app-design .cart-page .btn-checkout,
.cart-page .btn-checkout {
  width: 100% !important;
  height: 56px !important;
  border-radius: 50px !important;
  background: #022266 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(10, 60, 54, 0.28) !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

.cart-page .btn-checkout:hover {
  background: #029AFD !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(15, 118, 110, 0.38) !important;
  color: #FFFFFF !important;
}

/* Trust Box */
.cart-page .cart-trust-box {
  background: #FDFBF7 !important;
  border: 1px solid #F5E8D3 !important;
  border-radius: 16px !important;
  padding: 16px 12px !important;
}

.cart-page .cart-trust-box.grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}

.cart-page .trust-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
}

.cart-page .trust-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  color: #64748B !important;
}

/* Payment Pills */
.cart-page .pay-pill {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #1E3A8A !important;
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

.cart-page .pay-pill.red {
  color: #991B1B !important;
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
}

.cart-page .pay-pill.blue {
  color: #0369A1 !important;
  background: #F0F9FF !important;
  border-color: #BAE6FD !important;
}

.cart-page .pay-pill.paypal {
  color: #1D4ED8 !important;
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
}

.cart-page .pay-pill.apple {
  color: #0F172A !important;
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* Responsive */
@media (max-width: 991px) {
  body.ignore-app-design .cart-page .cart-layout,
  .cart-page .cart-layout {
    grid-template-columns: 1fr !important;
  }
  .cart-page .cart-promo-block {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cart-page .cart-promo-input {
    width: 100% !important;
  }
}

/*
 * .ignore-app-design
 * Overrides all rules defined in the app's base stylesheet.
 * Apply this class to any element whose subtree should be fully reset.
 */

/* ─── Layout & float helpers ─────────────────────────────────── */
.ignore-app-design,
.ignore-app-design .clear,
.ignore-app-design .clearfix:before,
.ignore-app-design .clearfix:after,
.ignore-app-design .left,
.ignore-app-design .right,
.ignore-app-design .float-left,
.ignore-app-design .alignLeft,
.ignore-app-design .alignRright,
.ignore-app-design .alignCenter {
    float: unset;
    clear: unset;
    content: unset;
    display: revert;
    margin: revert;
}

/* ─── Body / global resets ────────────────────────────────────── */
.ignore-app-design {
    margin: revert;
    padding: revert;
    font-family: revert;
    font-size: revert;
}

/* ─── Lists ───────────────────────────────────────────────────── */
.ignore-app-design li,
.ignore-app-design ul {
    list-style-type: revert;
}

/* ─── Images ──────────────────────────────────────────────────── */
.ignore-app-design a img,
.ignore-app-design img {
    height: revert;
    max-width: revert;
    border: revert;
}

/* ─── Text alignment helpers ──────────────────────────────────── */
.ignore-app-design .text-left   { text-align: revert; }
.ignore-app-design .text-right  { text-align: revert; }
.ignore-app-design .text-center { text-align: revert; }
.ignore-app-design .text-justify { text-align: revert; }

/* ─── Config error styles ─────────────────────────────────────── */
.ignore-app-design .config-errors h3 {
    padding: revert;
    margin: revert;
}
.ignore-app-design .config-errors ul {
    padding: revert;
    margin: revert;
}
.ignore-app-design .config-errors li {
    padding: revert;
    margin: revert;
    background-color: revert;
    border: revert;
    color: revert;
    font: revert;
}
.ignore-app-design .config-errors li strong {
    float: revert;
}

/* ─── Form inputs & selects ───────────────────────────────────── */
.ignore-app-design input[type=text],
.ignore-app-design input[type=search],
.ignore-app-design input[type=number],
.ignore-app-design input[type=password],
.ignore-app-design input[type=tel],
.ignore-app-design input[type=email],
.ignore-app-design select,
.ignore-app-design textarea {
    background: revert;
    border: revert;
    color: revert;
    height: revert;
    line-height: revert;
    width: revert;
    font-size: revert;
    padding: revert;
    outline: revert;
    font-family: revert;
    font-weight: revert;
    box-sizing: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
    -o-box-sizing: revert;
    -ms-box-sizing: revert;
}

.ignore-app-design textarea {
    padding: revert;
    height: revert;
}

.ignore-app-design select {
    line-height: revert;
    padding: revert;
    height: revert;
}

/* ─── Focus styles ────────────────────────────────────────────── */
.ignore-app-design input[type=text]:focus,
.ignore-app-design input[type=search]:focus,
.ignore-app-design input[type=password]:focus,
.ignore-app-design input[type=tel]:focus,
.ignore-app-design input[type=email]:focus,
.ignore-app-design select:focus,
.ignore-app-design textarea:focus {
    background: revert;
    box-shadow: revert;
    border: revert;
}

/* ─── Input validation states ─────────────────────────────────── */
.ignore-app-design input.has-error:not([name="agree-checkbox"]),
.ignore-app-design select.has-error:not([name="agree-checkbox"]) {
    background: revert;
    border: revert;
}

.ignore-app-design input.no-error:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ignore-app-design select.no-error {
    background: revert;
    border: revert;
}

.ignore-app-design input.loading,
.ignore-app-design select.loading {
    background: revert;
    border: revert;
}

/* ─── App benchmark bar ───────────────────────────────────────── */
.ignore-app-design .app-benchmark {
    position: revert;
    width: revert;
    left: revert;
    bottom: revert;
    padding: revert;
    background-color: revert;
    color: revert;
    text-align: revert;
}

/* ─── Modals & overlays ───────────────────────────────────────── */
.ignore-app-design #app_common_modal,
.ignore-app-design #error_handler_overlay {
    position: revert;
    top: revert;
    left: revert;
    padding: revert;
    margin: revert;
    width: revert;
    height: revert;
    z-index: revert;
    background: revert;
    display: revert;
    overflow-x: revert;
    -webkit-overflow-scrolling: revert;
}

.ignore-app-design #app_common_modal .app_modal_body,
.ignore-app-design #error_handler_overlay .error_handler_body {
    max-width: revert;
    -webkit-background-clip: revert;
    font-family: revert;
    box-sizing: revert;
    outline: revert;
}

.ignore-app-design #error_handler_overlay .error_handler_body {
    margin: revert;
    width: revert;
    padding: revert;
    background-color: revert;
    background-clip: revert;
    border: revert;
    border-radius: revert;
    -webkit-box-shadow: revert;
    box-shadow: revert;
    font-size: revert;
    line-height: revert;
    color: revert;
    position: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
}

.ignore-app-design #app_common_modal_close,
.ignore-app-design #error_handler_overlay_close {
    position: revert;
    right: revert;
    top: revert;
    color: revert;
    background-color: revert;
    border: revert;
    border-radius: revert;
    width: revert;
    height: revert;
    text-align: revert;
    cursor: revert;
    text-decoration: revert;
    font-weight: revert;
    line-height: revert;
    padding: revert;
    margin: revert;
}

.ignore-app-design #app_common_modal .app_modal_body {
    margin: revert;
    min-width: revert;
    width: revert;
    min-height: revert;
    padding: revert;
    background-color: revert;
    background-clip: revert;
    border: revert;
    border-radius: revert;
    -webkit-box-shadow: revert;
    box-shadow: revert;
    font-size: revert;
    line-height: revert;
    color: revert;
    position: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
    -ms-box-sizing: revert;
}

.ignore-app-design #app_common_modal .app_modal_body iframe {
    min-height: revert;
    width: revert;
    border: revert;
}

/* ─── Exit popup ──────────────────────────────────────────────── */
.ignore-app-design .exitpop-content {
    position: revert;
    height: revert;
    width: revert;
    margin: revert;
    top: revert;
    left: revert;
    text-align: revert;
    padding: revert;
    border: revert;
    z-index: revert;
}

.ignore-app-design .exitpopup-overlay {
    background: revert;
    height: revert;
    left: revert;
    position: revert;
    top: revert;
    width: revert;
    z-index: revert;
    display: revert;
}

.ignore-app-design .exitpop-content img {
    display: revert;
    margin: revert;
    position: revert;
    text-align: revert;
    max-width: revert;
    height: revert;
}

.ignore-app-design .exitpop-discountbar {
    background-color: revert;
    border-bottom: revert;
    color: revert;
    font-family: revert;
    font-size: revert;
    font-weight: revert;
    height: revert;
    line-height: revert;
    position: revert;
    text-align: revert;
    top: revert;
    width: revert;
    z-index: revert;
    display: revert;
}

/* ─── Load spinner ────────────────────────────────────────────── */
.ignore-app-design .app-load-spinner {
    display: revert;
    position: revert;
    top: revert;
    bottom: revert;
    left: revert;
    right: revert;
    width: revert;
    height: revert;
    margin: revert;
    background-color: revert;
    border-radius: revert;
}

/* ─── Generic .clear ──────────────────────────────────────────── */
.ignore-app-design .clear {
    line-height: revert;
    height: revert;
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.ignore-app-design .button:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design button:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design input[type=button]:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design input[type=submit]:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1) {
    border: revert;
    width: revert;
    display: revert;
    cursor: revert;
    position: revert;
    outline: revert;
    padding: revert;
    background: revert;
    color: revert;
    font-size: revert;
}

.ignore-app-design .button:hover,
.ignore-app-design button:hover,
.ignore-app-design input[type=button]:hover,
.ignore-app-design input[type=submit]:hover {
    background: revert;
}

/* ─── .defult (sic) form layout ───────────────────────────────── */
.ignore-app-design .defult {
    padding: revert;
}
.ignore-app-design .defult form label {
    width: revert;
    display: revert;
}
.ignore-app-design .defult input[type=text],
.ignore-app-design .defult input[type=search],
.ignore-app-design .defult input[type=number],
.ignore-app-design .defult input[type=password],
.ignore-app-design .defult input[type=tel],
.ignore-app-design .defult input[type=email],
.ignore-app-design .defult select,
.ignore-app-design .defult textarea {
    max-width: revert;
}
.ignore-app-design .defult .button,
.ignore-app-design .defult button,
.ignore-app-design .defult input[type=button],
.ignore-app-design .defult input[type=submit] {
    max-width: revert;
}

/* ─── Card types list ─────────────────────────────────────────── */
.ignore-app-design .all-card-types li {
    float: revert;
    margin-right: revert;
}

/* ─── Loading indicator ───────────────────────────────────────── */
.ignore-app-design #loading-indicator {
    background-color: revert;
    bottom: revert;
    box-sizing: revert;
    font-size: revert;
    height: revert;
    left: revert;
    margin: revert !important;
    padding: revert !important;
    position: revert;
    right: revert;
    top: revert;
    width: revert;
    z-index: revert;
}
.ignore-app-design #loading-indicator::before,
.ignore-app-design #loading-indicator::after {
    background: revert;
    border-radius: revert;
    color: revert;
    content: revert;
    font-family: revert;
    font-size: revert;
    height: revert;
    left: revert;
    line-height: revert;
    margin-left: revert;
    margin-top: revert;
    padding-top: revert;
    position: revert;
    text-align: revert;
    top: revert;
    width: revert;
    z-index: revert;
    box-sizing: revert;
}

/* ─── Inline error ────────────────────────────────────────────── */
.ignore-app-design span.cb-inline-error {
    margin-top: revert;
    font-weight: revert;
    color: revert;
    display: revert;
}

/* ─── Form element ────────────────────────────────────────────── */
.ignore-app-design form {
    padding: revert;
}

/* ─── Transaction modal ───────────────────────────────────────── */
.ignore-app-design .modal-wrap {
    position: revert;
    top: revert;
    bottom: revert;
    left: revert;
    right: revert;
    background-color: revert;
    overflow-y: revert;
}
.ignore-app-design .modal-dilog-part {
    width: revert;
    background-color: revert;
    border-radius: revert;
    margin: revert;
}
.ignore-app-design .transaction-modal-head {
    padding: revert;
    border-bottom: revert;
    display: revert;
    position: revert;
}
.ignore-app-design .transaction-modal-head-img {
    width: revert;
}
.ignore-app-design .transaction-heading {
    color: revert;
    font-size: revert;
    font-weight: revert;
    padding-left: revert;
}
.ignore-app-design .transaction-heading span {
    display: revert;
    color: revert;
    font-size: revert;
    font-weight: revert;
    margin-top: revert;
}
.ignore-app-design .close-btn {
    padding: revert;
    width: revert;
    background-color: revert;
    position: revert;
    right: revert;
    top: revert;
}
.ignore-app-design .close-btn:hover {
    background-color: revert;
}
.ignore-app-design .padding-box {
    padding: revert;
}
.ignore-app-design .security-heading {
    color: revert;
    font-size: revert;
    margin-bottom: revert;
    text-align: revert;
}
.ignore-app-design .ask-cell {
    color: revert;
    font-size: revert;
    margin-bottom: revert;
    cursor: revert;
}
.ignore-app-design .form-row {
    margin-bottom: revert;
}

/* ─── .form-input variants ────────────────────────────────────── */
.ignore-app-design input[type=text].form-input,
.ignore-app-design input[type=search].form-input,
.ignore-app-design input[type=number].form-input,
.ignore-app-design input[type=password].form-input,
.ignore-app-design input[type=tel].form-input,
.ignore-app-design input[type=email].form-input,
.ignore-app-design select.form-input,
.ignore-app-design textarea.form-input {
    border: revert;
    height: revert;
    border-radius: revert;
    padding: revert;
}

/* ─── Flex layout helpers ─────────────────────────────────────── */
.ignore-app-design .flex-row {
    display: revert;
    margin: revert;
}
.ignore-app-design .half-col {
    width: revert;
    padding: revert;
}
.ignore-app-design .d-flex {
    display: revert;
    align-items: revert;
    justify-content: revert;
}

/* ─── Submit button ───────────────────────────────────────────── */
.ignore-app-design .submit-btn {
    display: revert;
    width: revert;
    background-color: revert;
    padding: revert;
    font-size: revert;
    font-weight: revert;
    border-radius: revert;
}
.ignore-app-design .submit-btn:hover {
    background-color: revert;
}

/* ─── Thank / link / price ────────────────────────────────────── */
.ignore-app-design .thank-link {
    color: revert;
    font-size: revert;
    margin-right: revert;
    text-decoration: revert;
}
.ignore-app-design .total-price {
    color: revert;
    font-size: revert;
    font-weight: revert;
    line-height: revert;
}

/* ─── Info / tooltip ──────────────────────────────────────────── */
.ignore-app-design .info-wrap {
    position: revert;
}
.ignore-app-design .info-cell {
    position: revert;
    top: revert;
    right: revert;
}
.ignore-app-design .select-wrap {
    position: revert;
}
.ignore-app-design .select-wrap select {
    -webkit-appearance: revert;
}
.ignore-app-design .select-wrap:after {
    top: revert;
    right: revert;
    border: revert;
    content: revert;
    height: revert;
    width: revert;
    position: revert;
    pointer-events: revert;
    border-color: revert;
    border-top-color: revert;
    border-width: revert;
}
.ignore-app-design .info-cell:hover .tooltip {
    display: revert;
}
.ignore-app-design .tooltip {
    position: revert;
    border: revert;
    padding: revert;
    font-size: revert;
    background-color: revert;
    left: revert;
    min-width: revert;
    max-width: revert;
    margin-left: revert;
    top: revert;
    transform: revert;
    -webkit-transform: revert;
    display: revert;
}
.ignore-app-design .tooltip:after,
.ignore-app-design .tooltip:before {
    right: revert;
    top: revert;
    border: revert;
    content: revert;
    height: revert;
    width: revert;
    position: revert;
    pointer-events: revert;
}
.ignore-app-design .tooltip:after {
    border-color: revert;
    border-right-color: revert;
    border-width: revert;
    margin-top: revert;
}
.ignore-app-design .tooltip:before {
    border-color: revert;
    border-right-color: revert;
    border-width: revert;
    margin-top: revert;
}

/* ─── Cart styles ─────────────────────────────────────────────── */
.ignore-app-design span#cart-count {
    background-color: revert;
    border-radius: revert;
    width: revert;
    text-align: revert;
    margin: revert;
    font-size: revert;
    font-weight: revert;
    position: revert;
}
.ignore-app-design .total-text {
    border: revert;
    border-radius: revert;
    text-decoration: revert !important;
}
.ignore-app-design .cart-slider {
    width: revert;
    position: revert;
}
.ignore-app-design .cart-slider-body {
    margin-right: revert;
    z-index: revert;
    background-color: revert;
    box-shadow: revert;
}

/* ─── Navbar ──────────────────────────────────────────────────── */
.ignore-app-design .navbar:not(.cart-navbar) {
    overflow: revert;
    background-color: revert;
    position: revert !important;
    top: revert;
    width: revert;
    z-index: revert;
}
.ignore-app-design .navbar:not(.cart-navbar) a {
    float: revert;
    display: revert;
    color: revert;
    text-align: revert;
    padding: revert;
    text-decoration: revert;
}
.ignore-app-design .navbar:not(.cart-navbar) a:hover {
    background: revert;
    color: revert;
}
.ignore-app-design .main {
    margin-top: revert !important;
}

/* ─── Card text ───────────────────────────────────────────────── */
.ignore-app-design .card-text {
    min-height: revert;
}

/* ─── Address suggestions ─────────────────────────────────────── */
.ignore-app-design ul#address-suggestions {
    padding: revert;
    border: revert;
    border-radius: revert;
    margin-top: revert;
}
.ignore-app-design ul#address-suggestions li {
    margin-bottom: revert;
}
.ignore-app-design ul#address-suggestions li:last-child {
    margin-bottom: revert;
}

/* ─── Common modal header ─────────────────────────────────────── */
.ignore-app-design #commonModal .modal-header {
    justify-content: revert;
}

/* ============================================================
   STUNNING LUXE THANK YOU PAGE STYLES
   ============================================================ */

:root {
  --luxe-gold: #c5a059;
  --luxe-gold-dark: #a37f3a;
  --luxe-dark: #111827;
  --luxe-slate: #1e293b;
  --luxe-card-bg: #ffffff;
  --luxe-border: #e5e7eb;
}

.thankyou-page-body {
  background: linear-gradient(180deg, #f8f9fa 0%, #f1f3f5 100%);
  font-family: 'Manrope', 'Inter', sans-serif;
  color: #334155;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.thankyou-main-section {
  flex: 1 0 auto;
}

/* Success Badge Animation */
.thankyou-success-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 8px 24px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
}

.thankyou-success-badge .success-icon-pulse {
  font-size: 22px;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulseIcon 2s infinite ease-in-out;
}

.thankyou-success-badge .badge-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #15803d;
}

@keyframes pulseIcon {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

.thankyou-hero-title {
  font-family: 'Manrope', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.thankyou-hero-subtitle {
  font-size: 1.1rem;
  color: #64748b;
  max-width: 580px;
  margin: 0 auto;
}

/* Order Progress Stepper */
.order-progress-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  padding: 24px 36px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.order-progress-stepper .step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.order-progress-stepper .step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.order-progress-stepper .step-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.order-progress-stepper .step-item.completed .step-circle {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(22, 163, 74, 0.3);
}

.order-progress-stepper .step-item.active .step-circle {
  background: #0f172a;
  border-color: #c5a059;
  color: #c5a059;
  box-shadow: 0 0 15px rgba(197, 160, 89, 0.4);
}

.order-progress-stepper .step-item.active .step-label {
  color: #0f172a;
  font-weight: 700;
}

.order-progress-stepper .step-line {
  flex: 1;
  height: 3px;
  background: #e2e8f0;
  margin: 0 12px;
  transform: translateY(-14px);
  position: relative;
}

.order-progress-stepper .step-line.active {
  background: linear-gradient(90deg, #16a34a, #0f172a);
}

/* Hero Showcase Card */
.thankyou-hero-card {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
  position: relative;
  min-height: 520px;
}

.thankyou-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  background: #0f172a;
}

.thankyou-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thankyou-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px;
  color: #ffffff;
}

.thankyou-img-overlay .overlay-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}

.thankyou-img-overlay h2 {
  font-family: 'Manrope', serif;
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

.thankyou-img-overlay p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.est-delivery-box {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 0.9rem;
  margin-top: 16px;
}

/* Details Card */
.thankyou-details-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.05);
}

.order-ref-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 16px;
  border: 1px solid rgba(197, 160, 89, 0.3);
  color: #ffffff;
}

.order-ref-label {
  color: #c5a059;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.order-ref-value {
  font-family: 'Inter', monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.btn-copy-ref {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-copy-ref:hover {
  background: #c5a059;
  color: #0f172a;
  border-color: #c5a059;
}

.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.text-gold {
  color: #c5a059 !important;
}

.product-thumb-container {
  background: #f8fafc;
  padding: 4px;
  border: 1px solid #e2e8f0;
}

.product-thumb-img {
  object-fit: contain;
}

.product-item-name {
  color: #0f172a;
  font-size: 15px;
}

.btn-luxe-primary {
  background: linear-gradient(135deg, #029AFD 0%, #029AFD 100%) !important;
  color: #ffffff !important;
  padding: 16px 30px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 8px 22px rgba(15, 118, 110, 0.25);
}

.btn-luxe-primary:hover {
  background: linear-gradient(135deg, #0d655e 0%, #029AFD 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.4) !important;
  filter: brightness(1.08);
}

.btn-luxe-secondary {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 16px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-luxe-secondary:hover {
  background: #029AFD !important;
  color: #ffffff !important;
  border-color: #029AFD !important;
  transform: translateY(-2px);
}
  color: #0f172a;
}

.support-help-banner {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.support-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer Styling */
.billing-footer {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #64748b;
}

.billing-footer-links a {
  font-size: 13px;
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.billing-footer-links a:hover {
  color: #0f172a;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .order-progress-stepper {
    padding: 16px;
  }
  .order-progress-stepper .step-circle {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  .order-progress-stepper .step-label {
    font-size: 10px;
  }
  .thankyou-hero-card {
    min-height: 360px;
  }
  .thankyou-img-wrap {
    min-height: 360px;
  }
}

/* ============================================================
   FDA DISCLAIMER & COOKIE CONSENT BANNER STYLES
   ============================================================ */
.fda-disclaimer-card {
  background: linear-gradient(145deg, rgba(26, 26, 32, 0.75) 0%, rgba(18, 18, 22, 0.85) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(197, 160, 89, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 30px rgba(0, 0, 0, 0.35);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.fda-disclaimer-card:hover {
  border-color: rgba(197, 160, 89, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 35px rgba(0, 0, 0, 0.45);
}
.fda-title-badge {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #c5a059;
  text-transform: uppercase;
  background: rgba(197, 160, 89, 0.1);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(197, 160, 89, 0.25);
}
.fda-title-badge .fda-icon {
  font-size: 13px;
  color: #c5a059;
}
.fda-trust-tags {
  display: flex;
  gap: 16px;
}
.fda-trust-tag {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fda-trust-tag i {
  color: #c5a059;
  font-size: 12px;
}
.fda-disclaimer-body {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11.5px;
  line-height: 1.7;
  color: #a1a1aa;
}
.fda-notice-prefix {
  color: #f4f4f5;
  font-weight: 600;
}
.fda-link {
  color: #c5a059;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.fda-link:hover {
  color: #e5c178;
  opacity: 0.9;
}

.cookie-consent-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999999;
  max-width: 420px;
  width: calc(100% - 48px);
  transform: translateY(130%) scale(0.96);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s;
  pointer-events: none;
}
.cookie-consent-banner.show-cookie-banner {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.cookie-consent-card {
  background: rgba(18, 18, 22, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(1, 150, 252, 0.3);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(1, 150, 252, 0.15);
  position: relative;
  overflow: hidden;
}
.cookie-consent-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0196fc, #38b6ff);
}
.cookie-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: none;
  color: #a1a1aa;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.cookie-close-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}
.cookie-consent-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  padding-right: 24px;
}
.cookie-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(1, 150, 252, 0.2) 0%, rgba(1, 150, 252, 0.05) 100%);
  border: 1px solid rgba(1, 150, 252, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cookie-icon-glow {
  font-size: 20px;
  color: #0196fc;
  filter: drop-shadow(0 0 8px rgba(1, 150, 252, 0.4));
  animation: cookiePulse 3s infinite ease-in-out;
}
@keyframes cookiePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(1, 150, 252, 0.3)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(1, 150, 252, 0.6)); }
}
.cookie-title {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}
.cookie-subtitle {
  font-size: 11px;
  color: #a1a1aa;
  font-weight: 400;
}
.cookie-consent-body {
  font-size: 12.5px;
  line-height: 1.6;
  color: #d4d4d8;
  margin-bottom: 18px;
}
.cookie-policy-link {
  color: #0196fc;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color 0.2s ease;
}
.cookie-policy-link:hover {
  color: #38b6ff;
}
.cookie-consent-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-cookie-accept {
  flex: 1;
  background: linear-gradient(135deg, #0196fc 0%, #0076cb 100%);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(1, 150, 252, 0.35);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-cookie-accept:hover {
  background: linear-gradient(135deg, #1aa3ff 0%, #0188e2 100%);
  box-shadow: 0 6px 20px rgba(1, 150, 252, 0.45);
  transform: translateY(-1px);
}
.btn-cookie-decline {
  background: rgba(255, 255, 255, 0.05);
  color: #d4d4d8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 16px;
  border-radius: 30px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn-cookie-decline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(1, 150, 252, 0.4);
  color: #ffffff;
}
@media (max-width: 576px) {
  .cookie-consent-banner {
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  .fda-trust-tags {
    display: none !important;
  }
}

/* ============================================================
   ULTRA-PREMIUM INNER PAGE HERO BANNER SYSTEM (WITH inner-bg.png)
   ============================================================ */
.luxe-inner-hero {
  position: relative !important;
  padding: 48px 0 42px 0 !important;
  margin-top: 0 !important;
  background: url('../images/inner-bg.png') no-repeat center center / cover !important;
  background-color: #F7F5EF !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(231, 225, 214, 0.8) !important;
}

.luxe-inner-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(247, 245, 239, 0.82) 0%, rgba(247, 245, 239, 0.95) 100%);
  z-index: 1;
}

.luxe-inner-hero-container {
  position: relative;
  z-index: 2;
}

.luxe-inner-hero-content {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}

.luxe-inner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  background: rgba(197, 160, 89, 0.12);
  border: 1px solid rgba(197, 160, 89, 0.35);
  border-radius: 50px;
  color: #8b6b23;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
  box-shadow: 0 4px 15px rgba(197, 160, 89, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.luxe-inner-badge i {
  font-size: 13px;
  color: #c5a059;
}

.luxe-inner-subhead-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.luxe-inner-subhead-line {
  width: 32px;
  height: 1.5px;
  background-color: #c5a059;
  display: inline-block;
}

.luxe-inner-subhead-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #8b6b23;
  text-transform: uppercase;
}

.luxe-inner-title {
  font-family: 'Manrope', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #1a1c1c;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

.luxe-inner-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16.5px;
  font-weight: 400;
  color: #5c6062;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .luxe-inner-hero {
    padding: 80px 0 60px 0;
    margin-top: 60px;
  }
  .luxe-inner-title {
    font-size: 34px;
  }
  .luxe-inner-subtitle {
    font-size: 14.5px;
  }
}

/* ============================================================
   ULTRA-LUXURY PRODUCT DETAILS PAGE STYLES
   ============================================================ */
.product-details-section {
  padding: 60px 0 90px 0;
  background-color: #f7f5ef;
  position: relative;
}

.luxe-product-detail-card {
  background: #ffffff;
  border-radius: 28px;
  border: 1px solid rgba(200, 155, 60, 0.18);
  box-shadow: 0 24px 60px rgba(18, 40, 32, 0.07);
  overflow: hidden;
}

.luxe-pd-gallery-wrapper {
  position: relative;
  background: radial-gradient(circle at 50% 40%, rgba(200, 155, 60, 0.12) 0%, rgba(247, 245, 239, 0.6) 65%, #ffffff 100%);
  border-radius: 22px;
  padding: 48px 24px;
  border: 1px solid rgba(18, 40, 32, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}

.luxe-pd-badge-top-left {
  position: absolute;
  top: 18px;
  left: 18px;
  background: #122820;
  color: #f7f5ef;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 7px 16px;
  border-radius: 50px;
  border: 1px solid rgba(200, 155, 60, 0.5);
  box-shadow: 0 4px 15px rgba(18, 40, 32, 0.2);
  z-index: 5;
}

.luxe-pd-badge-top-right {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #ffffff;
  color: #122820;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 7px 16px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(18, 40, 32, 0.1);
  z-index: 5;
}

.luxe-pd-img-box {
  position: relative;
  max-width: 380px;
  width: 100%;
  text-align: center;
  padding: 10px 0;
}

.luxe-pd-main-img {
  max-height: 380px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(18, 40, 32, 0.15));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxe-pd-gallery-wrapper:hover .luxe-pd-main-img {
  transform: scale(1.05) translateY(-8px);
}

.luxe-pd-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  margin-top: 24px;
}

.luxe-pd-feature-item {
  background: #ffffff;
  border: 1px solid rgba(200, 155, 60, 0.25);
  border-radius: 14px;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #122820;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(18, 40, 32, 0.03);
}

.luxe-pd-feature-item i {
  color: #c89b3c;
  font-size: 16px;
}

.luxe-pd-cat-badge {
  background: rgba(200, 155, 60, 0.12);
  color: #a67c1e;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 6px 14px;
  border-radius: 50px;
  display: inline-block;
  border: 1px solid rgba(200, 155, 60, 0.25);
}

.luxe-pd-title {
  font-family: 'Manrope', sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #122820;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.luxe-pd-price-box {
  /* background: #f7f5ef; */
  /* border: 1px solid rgba(200, 155, 60, 0.22); */
  /* border-radius: 16px; */
  /* padding: 18px 24px; */
}

.luxe-pd-price-val {
  font-family: 'Manrope', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #122820;
}

.luxe-pd-stock-badge {
  background: #e6f4ea;
  color: #137333;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.luxe-pd-desc {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  color: #4a5568;
  line-height: 1.65;
}

.luxe-pd-control-group label {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #122820;
  text-transform: uppercase;
}

.luxe-pd-qty-wrapper {
  background: #ffffff;
  border: 1.5px solid #dcd5c9;
  border-radius: 50px;
  height: 54px;
  width: 170px;
  padding: 0 14px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.luxe-pd-qty-wrapper .qty-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f7f5ef;
  color: #122820;
  border: 1px solid #e0d8c8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.luxe-pd-qty-wrapper .qty-btn:hover {
  background: #122820;
  color: #ffffff;
  border-color: #122820;
  transform: scale(1.06);
}

.luxe-pd-qty-wrapper .qty-count {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #122820;
}

.luxe-custom-select .product-variant-select {
  height: 54px;
  border-radius: 14px;
  border: 1.5px solid #dcd5c9;
  background-color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #122820;
  padding: 0 42px 0 20px;
  transition: all 0.25s ease;
}

.luxe-custom-select .product-variant-select:focus,
.luxe-custom-select .product-variant-select:hover {
  border-color: #c89b3c;
  box-shadow: 0 0 0 4px rgba(200, 155, 60, 0.15);
  outline: none;
}

.luxe-pd-add-btn {
  background: linear-gradient(135deg, #122820 0%, #022266 100%) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  height: 60px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  box-shadow: 0 12px 28px rgba(18, 40, 32, 0.25) !important;
  transition: all 0.3s ease !important;
  border: none !important;
  cursor: pointer !important;
}

.luxe-pd-add-btn:hover {
  background: linear-gradient(135deg, #c89b3c 0%, #a67c1e 100%) !important;
  box-shadow: 0 14px 35px rgba(200, 155, 60, 0.38) !important;
  transform: translateY(-3px) !important;
}

.luxe-pd-guarantee-box {
  background: #ffffff;
  border: 1px dashed rgba(200, 155, 60, 0.4);
  border-radius: 14px;
}

.luxe-pd-accordion .accordion-item {
  border: 1px solid rgba(200, 155, 60, 0.2) !important;
  border-radius: 16px !important;
  margin-bottom: 16px;
  overflow: hidden;
  background: #ffffff;
}

.luxe-pd-accordion .accordion-button {
  background-color: #ffffff;
  color: #122820;
  font-family: 'Manrope', sans-serif;
  font-size: 19px;
  font-weight: 700;
  padding: 20px 24px;
  box-shadow: none !important;
}

.luxe-pd-accordion .accordion-button:not(.collapsed) {
  background-color: #f7f5ef;
  color: #122820;
  border-bottom: 1px solid rgba(200, 155, 60, 0.15);
}

.luxe-pd-accordion .accordion-body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #4a5568;
  line-height: 1.65;
  padding: 24px;
}

@media (max-width: 991px) {
  .luxe-pd-title {
    font-size: 30px;
  }
  .luxe-pd-gallery-wrapper {
    min-height: 380px;
    padding: 36px 16px;
  }
  .luxe-pd-main-img {
    max-height: 300px;
  }
}

@media (max-width: 575px) {
  .luxe-pd-title {
    font-size: 26px;
  }
  .luxe-pd-feature-grid {
    grid-template-columns: 1fr;
  }
  .luxe-pd-price-box {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
}

/* ============================================================
   GLOBAL PRODUCT VARIANT SELECT & HEADER PROTECTION
   ============================================================ */
.custom-select-wrapper {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

.product-variant-select,
select.product-variant-select,
.prod-variant-wrap select,
body.ignore-app-design .product-variant-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 42px 0 18px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 12px !important;
  background-color: #FFFFFF !important;
  color: #122820 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.25s ease !important;
  outline: none !important;
}

.product-variant-select:hover,
.product-variant-select:focus,
body.ignore-app-design .product-variant-select:hover,
body.ignore-app-design .product-variant-select:focus {
  border-color: #C89B3C !important;
  box-shadow: 0 0 0 3.5px rgba(200, 155, 60, 0.18) !important;
  background-color: #FFFFFF !important;
}

.select-arrow,
.custom-select-wrapper .select-arrow {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: #64748B !important;
  font-size: 13px !important;
  z-index: 2 !important;
}

/* Inner banner clean alignment */
.luxe-inner-hero {
  margin-top: 0 !important;
  padding-top: 48px !important;
}

/* ============================================================
   CART PAGE STYLES (MERGED INTO STYLE.CSS)
   ============================================================ */
.cart-page [data-app="cart-items"],
.cart-page .cart-items-section,
.cart-page #pageItems {
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
}

body.ignore-app-design .cart-page,
.cart-page {
  background: #F7F8F6 !important;
  min-height: 100vh !important;
  padding: 40px 0 100px 0 !important;
  font-family: 'Inter', sans-serif !important;
  position: relative !important;
}

.cart-page::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 380px !important;
  background: radial-gradient(ellipse at top center, rgba(230, 244, 234, 0.55) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.cart-page .cart-header-wrap {
  margin-bottom: 36px !important;
  position: relative !important;
  z-index: 2 !important;
}

.cart-page .cart-sub-kicker {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #8C827A !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}

.cart-page .cart-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 6px !important;
  line-height: 1.1 !important;
}

.cart-page .cart-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #64748B !important;
  margin-bottom: 0 !important;
}

body.ignore-app-design .cart-page .cart-layout,
.cart-page .cart-layout {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 36px !important;
  align-items: start !important;
}

.cart-page .cart-table-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 32px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03) !important;
}

body.ignore-app-design .cart-page .cart-table-header,
.cart-page .cart-table-header {
  display: grid !important;
  grid-template-columns: 1fr 140px 100px !important;
  padding-bottom: 16px !important;
  border-bottom: 1.5px solid #F1F5F9 !important;
  margin-bottom: 24px !important;
}

.cart-page .cart-table-header span {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
}

.cart-page .col-quantity,
.cart-page .col-total {
  text-align: center !important;
}

body.ignore-app-design .cart-page .cart-item,
.cart-page .cart-item {
  display: grid !important;
  grid-template-columns: 1fr 140px 100px !important;
  align-items: center !important;
  padding: 24px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.cart-page .cart-item:last-child {
  border-bottom: none !important;
}

body.ignore-app-design .cart-page .cart-item-product,
.cart-page .cart-item-product {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

.cart-page .cart-item-image {
  width: 120px !important;
  height: 120px !important;
  flex-shrink: 0 !important;
  border-radius: 16px !important;
  background: radial-gradient(circle at center, #FFFFFF 40%, #F8FAFC 100%) !important;
  border: 1px solid #E2E8F0 !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.cart-page .cart-item-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

.cart-page .cart-item-name {
  font-family: 'Manrope', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}

.cart-page .cart-item-unit-price {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 8px !important;
}

.cart-page .c-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.cart-page .c-badge svg {
  color: #029AFD !important;
}

.cart-page .cart-item-remove {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.2s ease !important;
  margin-top: 6px !important;
}

.cart-page .cart-item-remove:hover {
  color: #EF4444 !important;
}

.cart-page .cart-item-quantity {
  display: flex !important;
  justify-content: center !important;
}

.cart-page .qty-control {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 108px !important;
  height: 40px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 30px !important;
  background: #FFFFFF !important;
  padding: 0 6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.cart-page .qty-btn {
  background: none !important;
  border: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.cart-page .qty-btn:hover {
  background: #F1F5F9 !important;
  color: #029AFD !important;
}

.cart-page .qty-value {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  min-width: 24px !important;
  text-align: center !important;
}

.cart-page .cart-item-total {
  text-align: center !important;
}

.cart-page .item-total-price {
  font-family: 'Manrope', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

body.ignore-app-design .cart-page .order-summary,
.cart-page .order-summary {
  background: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 32px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04) !important;
  position: sticky !important;
  top: 100px !important;
}

.cart-page .summary-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 24px !important;
}

.cart-page .summary-rows {
  border-bottom: 1.5px solid #F1F5F9 !important;
  padding-bottom: 18px !important;
  margin-bottom: 20px !important;
}

.cart-page .summary-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  color: #475569 !important;
}

.cart-page .summary-value.text-emerald {
  color: #029AFD !important;
  font-weight: 700 !important;
}

.cart-page .summary-total-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
}

.cart-page .summary-total-label {
  font-family: 'Manrope', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

.cart-page .summary-total-value {
  font-family: 'Manrope', sans-serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

body.ignore-app-design .cart-page .btn-checkout,
.cart-page .btn-checkout {
  width: 100% !important;
  height: 56px !important;
  border-radius: 50px !important;
  background: #022266 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(10, 60, 54, 0.28) !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

.cart-page .btn-checkout:hover {
  background: #029AFD !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(15, 118, 110, 0.38) !important;
  color: #FFFFFF !important;
}

.cart-page .cart-trust-box {
  background: #FDFBF7 !important;
  border: 1px solid #F5E8D3 !important;
  border-radius: 16px !important;
  padding: 16px 12px !important;
}

.cart-page .cart-trust-box.grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}

.cart-page .trust-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
}

.cart-page .trust-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  color: #64748B !important;
}

@media (max-width: 991px) {
  body.ignore-app-design .cart-page .cart-layout,
  .cart-page .cart-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   CHECKOUT PAGE STYLES (MERGED INTO STYLE.CSS)
   ============================================================ */
.checkout-page {
  background: #F7F8F6;
  min-height: 100vh;
  padding: 40px 0 80px 0;
  font-family: 'Inter', sans-serif;
  position: relative;
}

.checkout-grid-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 36px;
  align-items: start;
}

.checkout-card-block {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 24px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
}

.checkout-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.checkout-card-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E6F4EA;
  color: #029AFD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.checkout-card-title {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 2px 0;
}

.checkout-card-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: #64748B;
  margin: 0;
}

.checkout-summary-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px 28px 32px 28px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 100px;
}

.summary-place-order-btn {
  width: 100% !important;
  height: 58px !important;
  border-radius: 50px !important;
  background: #022266 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(10, 60, 54, 0.28) !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

.summary-place-order-btn:hover {
  background: #029AFD !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(15, 118, 110, 0.38) !important;
}

.checkout-terms-wrapper {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.co-terms-cb {
  width: 16px !important;
  height: 16px !important;
  accent-color: #029AFD !important;
  cursor: pointer;
  flex-shrink: 0;
}

.co-terms-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #475569;
}

.co-terms-text a {
  color: #029AFD;
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 991px) {
  .checkout-grid-layout {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ELEGANT COMPACT & SCROLLABLE ORDER SUMMARY PRODUCTS LIST
   Supports 1, 5, 10 or 15+ multi-product carts cleanly!
============================================================ */
.summary-products, #summary-items, #pageItems {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: 290px !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding-bottom: 14px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #0196fc #f1f5f9 !important;
}

/* Custom Webkit Scrollbar */
.summary-products::-webkit-scrollbar,
#summary-items::-webkit-scrollbar,
#pageItems::-webkit-scrollbar {
  width: 5px !important;
}

.summary-products::-webkit-scrollbar-track,
#summary-items::-webkit-scrollbar-track,
#pageItems::-webkit-scrollbar-track {
  background: #F1F5F9 !important;
  border-radius: 10px !important;
}

.summary-products::-webkit-scrollbar-thumb,
#summary-items::-webkit-scrollbar-thumb,
#pageItems::-webkit-scrollbar-thumb {
  background: #0196fc !important;
  border-radius: 10px !important;
}

.order-item, .summary-product-item, .summary-product {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}

.order-item:hover, .summary-product-item:hover, .summary-product:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-1px) !important;
}

.order-item-thumb, .summary-prod-thumb-wrap, .product-thumb {
  position: relative !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  border-radius: 8px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.order-item-thumb img, .summary-prod-thumb, .product-thumb img, .product-thumb image {
  width: 100% !important;
  height: 100% !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  display: block !important;
}

.order-item-badge, .summary-prod-qty-badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background: #0196fc !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 2px 5px rgba(1, 150, 252, 0.35) !important;
  z-index: 3 !important;
  line-height: 1 !important;
}

.order-item-name, .summary-prod-name, .product-info h4 {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  flex: 1 1 auto !important;
  word-break: break-word !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  padding-right: 4px !important;
}

.order-item-price, .summary-prod-price {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  white-space: nowrap !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   ULTRA-SLICK & EXECUTIVE TOTAL AMOUNT SECTION STYLING
============================================================ */
.summary-calc-rows, .summary-totals {
  background: #FAFAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  margin-bottom: 20px !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.01) !important;
}

.summary-calc-row, .summary-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  padding: 6px 0 !important;
  border-bottom: 1px dashed rgba(226, 232, 240, 0.8) !important;
}

.summary-calc-row:last-of-type, .summary-line:last-of-type {
  border-bottom: none !important;
}

.summary-calc-row span:last-child, .summary-line span:last-child {
  font-weight: 600 !important;
  color: #1E293B !important;
}

.summary-calc-row.free-text span:last-child {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #029AFD !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.5px !important;
}

.summary-total-display, .summary-total {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(135deg, rgba(1, 150, 252, 0.08) 0%, rgba(15, 23, 42, 0.04) 100%) !important;
  border: 1.5px solid rgba(1, 150, 252, 0.25) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-top: 14px !important;
  box-shadow: 0 4px 15px rgba(1, 150, 252, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}

.summary-total-display::before, .summary-total::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: linear-gradient(180deg, #0196fc 0%, #38b6ff 100%) !important;
}

.summary-total-label, .summary-total > span:first-child {
  font-family: 'Manrope', 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.summary-total-amount, .final_amount, .final_amount strong {
  font-family: 'Manrope', 'Inter', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.final_amount small {
  background: #0F172A !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* ============================================================
   ULTRA-LUXURY TERMS & PRIVACY POLICY EDITORIAL SYSTEM (WOW DESIGN)
   ============================================================ */

.privacy-page-main {
  background: linear-gradient(180deg, #F9F8F3 0%, #FFFFFF 100%) !important;
}

.privacy-content-layout-section {
  padding-top: 60px !important;
  padding-bottom: 120px !important;
}

/* ── STICKY GLASS TABLE OF CONTENTS ── */
.sticky-toc-wrapper {
  position: sticky !important;
  top: 100px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(200, 155, 60, 0.28) !important;
  border-radius: 20px !important;
  padding: 24px 22px !important;
  box-shadow: 0 12px 35px rgba(18, 40, 32, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s ease !important;
}

.sticky-toc-wrapper:hover {
  box-shadow: 0 16px 45px rgba(18, 40, 32, 0.08) !important;
  border-color: rgba(200, 155, 60, 0.45) !important;
}

.toc-header-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: #122820 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  border-bottom: 2px solid rgba(200, 155, 60, 0.25) !important;
  padding-bottom: 12px !important;
}

.toc-header-title::before {
  content: '✦';
  color: #c89b3c;
  font-size: 14px;
}

.toc-navigation-list li {
  margin-bottom: 8px !important;
}

.toc-anchor-link {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #4A5568 !important;
  text-decoration: none !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  display: block !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-left: 3px solid transparent !important;
}

.toc-anchor-link:hover {
  color: #122820 !important;
  background: rgba(200, 155, 60, 0.08) !important;
  padding-left: 16px !important;
  border-left-color: #c89b3c !important;
}

.toc-anchor-link.active {
  color: #122820 !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(200, 155, 60, 0.15) 0%, rgba(18, 40, 32, 0.04) 100%) !important;
  border-left-color: #c89b3c !important;
  padding-left: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(200, 155, 60, 0.2) !important;
}

/* ── LEGAL PROSE STREAM NODES (LUXURY CARDS) ── */
.legal-stream-section-node {
  background: #FFFFFF !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-top: 3px solid #c89b3c !important;
  border-radius: 20px !important;
  padding: 36px 40px !important;
  margin-bottom: 36px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.legal-stream-section-node:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 40px rgba(18, 40, 32, 0.06) !important;
}

.legal-node-section-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #122820 !important;
  margin-bottom: 22px !important;
  letter-spacing: -0.02em !important;
  border-bottom: 1px solid rgba(200, 155, 60, 0.2) !important;
  padding-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.legal-stream-paragraph {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.85 !important;
  color: #475569 !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}

.legal-stream-paragraph.bold-lead {
  font-size: 16.5px !important;
  font-weight: 500 !important;
  color: #122820 !important;
  line-height: 1.8 !important;
  background: rgba(247, 245, 239, 0.6) !important;
  border-left: 4px solid #022266 !important;
  padding: 16px 20px !important;
  border-radius: 0 12px 12px 0 !important;
  margin-bottom: 24px !important;
}

/* ── QUICK SUMMARY CARD IN TERMS ── */
.legal-text-stream-wrapper > .p-4.rounded-4 {
  background: linear-gradient(135deg, #122820 0%, #022266 100%) !important;
  border: 1px solid rgba(200, 155, 60, 0.4) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(18, 40, 32, 0.15) !important;
  padding: 32px !important;
}

.legal-text-stream-wrapper > .p-4.rounded-4 span.small {
  color: rgba(200, 155, 60, 0.9) !important;
  letter-spacing: 0.08em !important;
}

.legal-text-stream-wrapper > .p-4.rounded-4 strong,
.legal-text-stream-wrapper > .p-4.rounded-4 a {
  color: #FFFFFF !important;
}

/* ── DEFINITION BOXES & HIGHLIGHTS ── */
.legal-sub-definition-box {
  background: #F8FAFC !important;
  border: 1px dashed rgba(203, 213, 225, 0.8) !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  margin-top: 24px !important;
}

.legal-definition-sub-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #122820 !important;
  margin-bottom: 8px !important;
}

/* ── INQUIRIES FOOTER BLOCK ── */
.legal-inquiries-footer-block {
  margin-top: 50px !important;
  padding: 40px !important;
  background: linear-gradient(135deg, #122820 0%, #1a382d 100%) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(200, 155, 60, 0.3) !important;
  box-shadow: 0 20px 50px rgba(18, 40, 32, 0.2) !important;
}

.inquiries-caption-eyebrow {
  color: #c89b3c !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
}

.inquiries-mail-link {
  font-family: 'Playfair Display', serif !important;
  color: #FFFFFF !important;
  font-size: 26px !important;
  transition: all 0.3s ease !important;
}

.inquiries-mail-link:hover {
  color: #c89b3c !important;
  transform: translateX(4px) !important;
}

.inquiries-schedule-text {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ============================================================
   ULTRA-LUXURY CHECKOUT ORDER PROCESSING OVERLAY (WOW LOADER)
   ============================================================ */
.luxe-order-processing-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(18, 40, 32, 0.88) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.luxe-order-processing-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.luxe-processing-card {
  background: rgba(12, 34, 24, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 28px !important;
  padding: 44px 36px 36px 36px !important;
  text-align: center !important;
  max-width: 580px !important;
  width: 92% !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 50px rgba(78, 205, 137, 0.12), inset 0 0 2px rgba(255, 255, 255, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* Brand Title Header */
.luxe-loader-brand {
  margin-bottom: 24px !important;
}
.luxe-loader-brand-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: 0.35em !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}
.luxe-loader-brand-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.45em !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
}

/* Central Spinner Wrap with Leaves */
.luxe-processing-spinner-wrap {
  position: relative !important;
  width: 110px !important;
  height: 110px !important;
  margin: 0 auto 28px auto !important;
}
.luxe-spinner-leaf {
  position: absolute !important;
  color: #55cf83 !important;
  font-size: 20px !important;
  opacity: 0.8 !important;
  filter: drop-shadow(0 0 8px rgba(85, 207, 131, 0.5)) !important;
}
.luxe-leaf-1 { top: 15px !important; left: -24px !important; transform: rotate(-35deg) scale(0.9) !important; }
.luxe-leaf-2 { bottom: 15px !important; right: -24px !important; transform: rotate(40deg) scale(1.1) !important; }

.luxe-spinner-ring {
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  border: 4px solid rgba(255, 255, 255, 0.1) !important;
  border-top-color: #55cf83 !important;
  border-right-color: #f7d27e !important;
  animation: luxeSpinRing 2.2s linear infinite !important;
  box-shadow: 0 0 30px rgba(85, 207, 131, 0.3) !important;
}
.luxe-spinner-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #FFFFFF !important;
  font-size: 30px !important;
}

@keyframes luxeSpinRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Title & Subtitle with Landing Page Fonts */
.luxe-processing-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 34px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
}

.luxe-processing-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 28px !important;
  line-height: 1.5 !important;
  max-width: 440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Stepper Bar Component */
.luxe-stepper-container {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  position: relative !important;
  margin: 30px 10px 24px 10px !important;
}

.luxe-stepper-line-bg {
  position: absolute !important;
  top: 22px !important;
  left: 10% !important;
  right: 10% !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  z-index: 1 !important;
}

.luxe-stepper-step {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
}

.luxe-stepper-node {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(20, 45, 33, 0.9) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
}

.luxe-stepper-step.completed .luxe-stepper-node {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

.luxe-stepper-step.active .luxe-stepper-node {
  background: radial-gradient(circle, #38ef7d 0%, #11998e 100%) !important;
  border: 2px solid #f7d27e !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 20px rgba(56, 239, 125, 0.6) !important;
  transform: scale(1.1) !important;
}

.luxe-stepper-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-top: 10px !important;
  line-height: 1.3 !important;
  max-width: 90px !important;
  text-align: center !important;
}

.luxe-stepper-step.active .luxe-stepper-label,
.luxe-stepper-step.completed .luxe-stepper-label {
  color: #FFFFFF !important;
}

/* Security SSL Pill Badge */
.luxe-processing-secure-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding: 10px 24px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(247, 210, 126, 0.4) !important;
  border-radius: 50px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #f7d27e !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* ── ORDER SUMMARY & CHECKOUT CARD PERFECT ALIGNMENT HARMONY ── */
.checkout-grid-layout {
  display: grid !important;
  grid-template-columns: 1fr 440px !important;
  gap: 32px !important;
  align-items: start !important;
}

.checkout-card-block, .checkout-summary-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 28px 32px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03) !important;
}

.checkout-summary-card {
  position: sticky !important;
  top: 100px !important;
  margin-bottom: 24px !important;
}

.summary-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.summary-card-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.summary-item-count {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #029AFD !important;
  background: #E6F4EA !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}






/* =============================================
   BUNDLED COMPONENT: main.css
   ============================================= */

/* contact css  starts*/

/* .contact-interactive-grid-section {
    padding-top: 60px;
    padding-bottom: 60px;
}
.contact-info {
    background: #f5f5f5;
    min-height: 280px;
    padding: 5px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    overflow: hidden;
    text-align: center;
}

.contact-info > .contact-info__icon {
    display: inline-block;
   font-size: 25px; 
    width: 70px;
    height: 70px;
    background: #7bc7c7;
    color: #fff;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
}
.contact-info > .contact-info__icon > i {
    font-size: 30px;
}
.contact-info .media-body h3 {
    font-size: 25px;
    margin-bottom: 10px;
    color: #259b9b;
    font-weight: 500;
}
.phone_support_wrap {
    display: flex;
    gap: 3px;
    justify-content: center;
}
.sm_icons {
    color: #686868;
    font-size: 17px;
}
.phone_support_wrap > a {
    color: #626262;
    word-break: break-word;
}
.phone_support_wrap {
    display: flex;
    gap: 3px;
    justify-content: center;
}
.sm_icons {
    color: #686868;
    font-size: 17px;
}
.phone_support_wrap > a {
    color: #626262;
    word-break: break-word;
}
.contact-info:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
} 
*/

/* contact css  end*/

.ingredients-section {
    padding-top: 200px;
}
.ingredient-section {
    margin-bottom: 50px;
}

.ingredient-card {
    margin-bottom: 20px;
}

.ingredient-card > p {
    font-size: 28px;
    margin-bottom: 20px;
}

.ingredient-section > h2 {
    margin-bottom: 40px;
    text-align: center;
    font-size: 50px;
}



/* terms start */
/* =========================================
   TERMS PAGE
========================================= */

.terms-page-main {
    background: #f7f9fc;
}

.terms-page-main .section-gap {
    padding-top: 70px;
    padding-bottom: 70px;
}

.terms_inner_main {
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================
   PAGE CONTENT
========================================= */

.terms_body {
    background: #ffffff;
    border-radius: 18px;
    padding: 45px 50px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
}

.terms_body > table,
.terms_body table {
    width: 100%;
}

.terms_body td {
    border: 0;
}

.terms_pd_cs {
    flex-direction: column;
    gap: 5px;
    margin-bottom: 30px;
}

.terms_pd_cs > p {
    margin-bottom: 0;
    font-size: 25px;
    font-weight: 600;
}


/* =========================================
   HEADINGS
========================================= */

.terms_body h2 {
    margin-top: 0;
    margin-bottom: 18px;
    color: #172033;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
}

.terms_body h3 {
    margin-top: 8px;
    margin-bottom: 35px;
    color: #6b7280;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}


/* =========================================
   MAIN INTRO HEADING
========================================= */

.terms_body > table > tbody > tr > td > table h2 {
    color: #172033;
}

.terms_body p {
    margin-bottom: 18px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   COLLECTION SECTIONS
========================================= */

.collection {
    margin-top: 35px;
    padding: 28px 30px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.collection h2 {
    margin-bottom: 15px;
    color: #172033;
    font-size: 21px;
    font-weight: 700;
}

.collection p {
    margin-bottom: 14px;
}


/* =========================================
   PRODUCT AREA
========================================= */

.collection product {
    display: flex;
    align-items: start;
    /* justify-content: space-between; */
    flex-direction: column;
    /* gap: 25px; */
    width: 100%;
    margin-top: 25px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.collection product > p {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #172033;
}


/* =========================================
   PRODUCT PRICE
========================================= */

.product-price {
    font-size: 22px;
    font-weight: 700;
    color: #2563eb;
}


/* =========================================
   PRODUCT PURCHASE
========================================= */

.pd-purchase {
}

.pd-packs {
    width: 100%;
}

.pd-packs ul {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-packs li {
    margin: 0;
}

.pd-pack__label,
.pd-pack__price {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
}


/* =========================================
   LIST
========================================= */

.terms_body ol {
    margin: 20px 0 0;
    padding-left: 25px;
}

.terms_body ol li {
    margin-bottom: 10px;
    padding-left: 5px;
}

.terms_body ol li p {
    margin-bottom: 0;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .terms-page-main .section-gap {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .terms_body {
        padding: 25px 20px;
        border-radius: 12px;
    }

    .terms_body h2 {
        font-size: 22px;
    }

    .terms_body h3 {
        font-size: 14px;
    }

    .terms_body p {
        font-size: 14px;
        line-height: 1.7;
    }

    .collection {
        margin-top: 25px;
        padding: 20px;
    }

    .collection h2 {
        font-size: 19px;
    }

    .collection product {
        flex-direction: column;
        align-items: flex-start;
    }

    .pd-purchase {
        width: 100%;
        margin-left: 0;
    }

    .pd-packs ul {
        flex-wrap: wrap;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .terms_body {
        padding: 20px 15px;
    }

    .collection {
        padding: 16px;
    }

    .terms_body h2 {
        font-size: 20px;
    }

    .product-price {
        font-size: 19px;
    }
}
/* terms end */

/* =============================================
   BUNDLED COMPONENT: app-override.css
   ============================================= */
/*
 * .ignore-app-design
 * Overrides all rules defined in the app's base stylesheet.
 * Apply this class to any element whose subtree should be fully reset.
 */

/* ─── Layout & float helpers ─────────────────────────────────── */
.ignore-app-design,
.ignore-app-design .clear,
.ignore-app-design .clearfix:before,
.ignore-app-design .clearfix:after,
.ignore-app-design .left,
.ignore-app-design .right,
.ignore-app-design .float-left,
.ignore-app-design .alignLeft,
.ignore-app-design .alignRright,
.ignore-app-design .alignCenter {
    float: unset;
    clear: unset;
    content: unset;
    display: revert;
    margin: revert;
}

/* ─── Body / global resets ────────────────────────────────────── */
.ignore-app-design {
    margin: revert;
    padding: revert;
    font-family: revert;
    font-size: revert;
}

/* ─── Lists ───────────────────────────────────────────────────── */
.ignore-app-design li,
.ignore-app-design ul {
    list-style-type: revert;
}

/* ─── Images ──────────────────────────────────────────────────── */
.ignore-app-design a img,
.ignore-app-design img {
    height: revert;
    max-width: revert;
    border: revert;
}

/* ─── Text alignment helpers ──────────────────────────────────── */
.ignore-app-design .text-left   { text-align: revert; }
.ignore-app-design .text-right  { text-align: revert; }
.ignore-app-design .text-center { text-align: revert; }
.ignore-app-design .text-justify { text-align: revert; }

/* ─── Config error styles ─────────────────────────────────────── */
.ignore-app-design .config-errors h3 {
    padding: revert;
    margin: revert;
}
.ignore-app-design .config-errors ul {
    padding: revert;
    margin: revert;
}
.ignore-app-design .config-errors li {
    padding: revert;
    margin: revert;
    background-color: revert;
    border: revert;
    color: revert;
    font: revert;
}
.ignore-app-design .config-errors li strong {
    float: revert;
}

/* ─── Form inputs & selects ───────────────────────────────────── */
.ignore-app-design input[type=text],
.ignore-app-design input[type=search],
.ignore-app-design input[type=number],
.ignore-app-design input[type=password],
.ignore-app-design input[type=tel],
.ignore-app-design input[type=email],
.ignore-app-design select,
.ignore-app-design textarea {
    background: revert;
    border: revert;
    color: revert;
    height: revert;
    line-height: revert;
    width: revert;
    font-size: revert;
    padding: revert;
    outline: revert;
    font-family: revert;
    font-weight: revert;
    box-sizing: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
    -o-box-sizing: revert;
    -ms-box-sizing: revert;
}

.ignore-app-design textarea {
    padding: revert;
    height: revert;
}

.ignore-app-design select {
    line-height: revert;
    padding: revert;
    height: revert;
}

/* ─── Focus styles ────────────────────────────────────────────── */
.ignore-app-design input[type=text]:focus,
.ignore-app-design input[type=search]:focus,
.ignore-app-design input[type=password]:focus,
.ignore-app-design input[type=tel]:focus,
.ignore-app-design input[type=email]:focus,
.ignore-app-design select:focus,
.ignore-app-design textarea:focus {
    background: revert;
    box-shadow: revert;
    border: revert;
}

/* ─── Input validation states ─────────────────────────────────── */
.ignore-app-design input.has-error:not([name="agree-checkbox"]),
.ignore-app-design select.has-error:not([name="agree-checkbox"]) {
    background: revert;
    border: revert;
}

.ignore-app-design input.no-error:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ignore-app-design select.no-error {
    background: revert;
    border: revert;
}

.ignore-app-design input.loading,
.ignore-app-design select.loading {
    background: revert;
    border: revert;
}

/* ─── App benchmark bar ───────────────────────────────────────── */
.ignore-app-design .app-benchmark {
    position: revert;
    width: revert;
    left: revert;
    bottom: revert;
    padding: revert;
    background-color: revert;
    color: revert;
    text-align: revert;
}

/* ─── Modals & overlays ───────────────────────────────────────── */
.ignore-app-design #app_common_modal,
.ignore-app-design #error_handler_overlay {
    position: revert;
    top: revert;
    left: revert;
    padding: revert;
    margin: revert;
    width: revert;
    height: revert;
    z-index: revert;
    background: revert;
    display: revert;
    overflow-x: revert;
    -webkit-overflow-scrolling: revert;
}

.ignore-app-design #app_common_modal .app_modal_body,
.ignore-app-design #error_handler_overlay .error_handler_body {
    max-width: revert;
    -webkit-background-clip: revert;
    font-family: revert;
    box-sizing: revert;
    outline: revert;
}

.ignore-app-design #error_handler_overlay .error_handler_body {
    margin: revert;
    width: revert;
    padding: revert;
    background-color: revert;
    background-clip: revert;
    border: revert;
    border-radius: revert;
    -webkit-box-shadow: revert;
    box-shadow: revert;
    font-size: revert;
    line-height: revert;
    color: revert;
    position: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
}

.ignore-app-design #app_common_modal_close,
.ignore-app-design #error_handler_overlay_close {
    position: revert;
    right: revert;
    top: revert;
    color: revert;
    background-color: revert;
    border: revert;
    border-radius: revert;
    width: revert;
    height: revert;
    text-align: revert;
    cursor: revert;
    text-decoration: revert;
    font-weight: revert;
    line-height: revert;
    padding: revert;
    margin: revert;
}

.ignore-app-design #app_common_modal .app_modal_body {
    margin: revert;
    min-width: revert;
    width: revert;
    min-height: revert;
    padding: revert;
    background-color: revert;
    background-clip: revert;
    border: revert;
    border-radius: revert;
    -webkit-box-shadow: revert;
    box-shadow: revert;
    font-size: revert;
    line-height: revert;
    color: revert;
    position: revert;
    -webkit-box-sizing: revert;
    -moz-box-sizing: revert;
    -ms-box-sizing: revert;
}

.ignore-app-design #app_common_modal .app_modal_body iframe {
    min-height: revert;
    width: revert;
    border: revert;
}

/* ─── Exit popup ──────────────────────────────────────────────── */
.ignore-app-design .exitpop-content {
    position: revert;
    height: revert;
    width: revert;
    margin: revert;
    top: revert;
    left: revert;
    text-align: revert;
    padding: revert;
    border: revert;
    z-index: revert;
}

.ignore-app-design .exitpopup-overlay {
    background: revert;
    height: revert;
    left: revert;
    position: revert;
    top: revert;
    width: revert;
    z-index: revert;
    display: revert;
}

.ignore-app-design .exitpop-content img {
    display: revert;
    margin: revert;
    position: revert;
    text-align: revert;
    max-width: revert;
    height: revert;
}

.ignore-app-design .exitpop-discountbar {
    background-color: revert;
    border-bottom: revert;
    color: revert;
    font-family: revert;
    font-size: revert;
    font-weight: revert;
    height: revert;
    line-height: revert;
    position: revert;
    text-align: revert;
    top: revert;
    width: revert;
    z-index: revert;
    display: revert;
}

/* ─── Load spinner ────────────────────────────────────────────── */
.ignore-app-design .app-load-spinner {
    display: revert;
    position: revert;
    top: revert;
    bottom: revert;
    left: revert;
    right: revert;
    width: revert;
    height: revert;
    margin: revert;
    background-color: revert;
    border-radius: revert;
}

/* ─── Generic .clear ──────────────────────────────────────────── */
.ignore-app-design .clear {
    line-height: revert;
    height: revert;
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.ignore-app-design .button:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design button:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design input[type=button]:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
.ignore-app-design input[type=submit]:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1) {
    border: revert;
    width: revert;
    display: revert;
    cursor: revert;
    position: revert;
    outline: revert;
    padding: revert;
    background: revert;
    color: revert;
    font-size: revert;
}

.ignore-app-design .button:hover,
.ignore-app-design button:hover,
.ignore-app-design input[type=button]:hover,
.ignore-app-design input[type=submit]:hover {
    background: revert;
}

/* ─── .defult (sic) form layout ───────────────────────────────── */
.ignore-app-design .defult {
    padding: revert;
}
.ignore-app-design .defult form label {
    width: revert;
    display: revert;
}
.ignore-app-design .defult input[type=text],
.ignore-app-design .defult input[type=search],
.ignore-app-design .defult input[type=number],
.ignore-app-design .defult input[type=password],
.ignore-app-design .defult input[type=tel],
.ignore-app-design .defult input[type=email],
.ignore-app-design .defult select,
.ignore-app-design .defult textarea {
    max-width: revert;
}
.ignore-app-design .defult .button,
.ignore-app-design .defult button,
.ignore-app-design .defult input[type=button],
.ignore-app-design .defult input[type=submit] {
    max-width: revert;
}

/* ─── Card types list ─────────────────────────────────────────── */
.ignore-app-design .all-card-types li {
    float: revert;
    margin-right: revert;
}

/* ─── Loading indicator ───────────────────────────────────────── */
.ignore-app-design #loading-indicator {
    background-color: revert;
    bottom: revert;
    box-sizing: revert;
    font-size: revert;
    height: revert;
    left: revert;
    margin: revert !important;
    padding: revert !important;
    position: revert;
    right: revert;
    top: revert;
    width: revert;
    z-index: revert;
}
.ignore-app-design #loading-indicator::before,
.ignore-app-design #loading-indicator::after {
    background: revert;
    border-radius: revert;
    color: revert;
    content: revert;
    font-family: revert;
    font-size: revert;
    height: revert;
    left: revert;
    line-height: revert;
    margin-left: revert;
    margin-top: revert;
    padding-top: revert;
    position: revert;
    text-align: revert;
    top: revert;
    width: revert;
    z-index: revert;
    box-sizing: revert;
}

/* ─── Inline error ────────────────────────────────────────────── */
.ignore-app-design span.cb-inline-error {
    margin-top: revert;
    font-weight: revert;
    color: revert;
    display: revert;
}

/* ─── Form element ────────────────────────────────────────────── */
.ignore-app-design form {
    padding: revert;
}

/* ─── Transaction modal ───────────────────────────────────────── */
.ignore-app-design .modal-wrap {
    position: revert;
    top: revert;
    bottom: revert;
    left: revert;
    right: revert;
    background-color: revert;
    overflow-y: revert;
}
.ignore-app-design .modal-dilog-part {
    width: revert;
    background-color: revert;
    border-radius: revert;
    margin: revert;
}
.ignore-app-design .transaction-modal-head {
    padding: revert;
    border-bottom: revert;
    display: revert;
    position: revert;
}
.ignore-app-design .transaction-modal-head-img {
    width: revert;
}
.ignore-app-design .transaction-heading {
    color: revert;
    font-size: revert;
    font-weight: revert;
    padding-left: revert;
}
.ignore-app-design .transaction-heading span {
    display: revert;
    color: revert;
    font-size: revert;
    font-weight: revert;
    margin-top: revert;
}
.ignore-app-design .close-btn {
    padding: revert;
    width: revert;
    background-color: revert;
    position: revert;
    right: revert;
    top: revert;
}
.ignore-app-design .close-btn:hover {
    background-color: revert;
}
.ignore-app-design .padding-box {
    padding: revert;
}
.ignore-app-design .security-heading {
    color: revert;
    font-size: revert;
    margin-bottom: revert;
    text-align: revert;
}
.ignore-app-design .ask-cell {
    color: revert;
    font-size: revert;
    margin-bottom: revert;
    cursor: revert;
}
.ignore-app-design .form-row {
    margin-bottom: revert;
}

/* ─── .form-input variants ────────────────────────────────────── */
.ignore-app-design input[type=text].form-input,
.ignore-app-design input[type=search].form-input,
.ignore-app-design input[type=number].form-input,
.ignore-app-design input[type=password].form-input,
.ignore-app-design input[type=tel].form-input,
.ignore-app-design input[type=email].form-input,
.ignore-app-design select.form-input,
.ignore-app-design textarea.form-input {
    border: revert;
    height: revert;
    border-radius: revert;
    padding: revert;
}

/* ─── Flex layout helpers ─────────────────────────────────────── */
.ignore-app-design .flex-row {
    display: revert;
    margin: revert;
}
.ignore-app-design .half-col {
    width: revert;
    padding: revert;
}
.ignore-app-design .d-flex {
    display: revert;
    align-items: revert;
    justify-content: revert;
}

/* ─── Submit button ───────────────────────────────────────────── */
.ignore-app-design .submit-btn {
    display: revert;
    width: revert;
    background-color: revert;
    padding: revert;
    font-size: revert;
    font-weight: revert;
    border-radius: revert;
}
.ignore-app-design .submit-btn:hover {
    background-color: revert;
}

/* ─── Thank / link / price ────────────────────────────────────── */
.ignore-app-design .thank-link {
    color: revert;
    font-size: revert;
    margin-right: revert;
    text-decoration: revert;
}
.ignore-app-design .total-price {
    color: revert;
    font-size: revert;
    font-weight: revert;
    line-height: revert;
}

/* ─── Info / tooltip ──────────────────────────────────────────── */
.ignore-app-design .info-wrap {
    position: revert;
}
.ignore-app-design .info-cell {
    position: revert;
    top: revert;
    right: revert;
}
.ignore-app-design .select-wrap {
    position: revert;
}
.ignore-app-design .select-wrap select {
    -webkit-appearance: revert;
}
.ignore-app-design .select-wrap:after {
    top: revert;
    right: revert;
    border: revert;
    content: revert;
    height: revert;
    width: revert;
    position: revert;
    pointer-events: revert;
    border-color: revert;
    border-top-color: revert;
    border-width: revert;
}
.ignore-app-design .info-cell:hover .tooltip {
    display: revert;
}
.ignore-app-design .tooltip {
    position: revert;
    border: revert;
    padding: revert;
    font-size: revert;
    background-color: revert;
    left: revert;
    min-width: revert;
    max-width: revert;
    margin-left: revert;
    top: revert;
    transform: revert;
    -webkit-transform: revert;
    display: revert;
}
.ignore-app-design .tooltip:after,
.ignore-app-design .tooltip:before {
    right: revert;
    top: revert;
    border: revert;
    content: revert;
    height: revert;
    width: revert;
    position: revert;
    pointer-events: revert;
}
.ignore-app-design .tooltip:after {
    border-color: revert;
    border-right-color: revert;
    border-width: revert;
    margin-top: revert;
}
.ignore-app-design .tooltip:before {
    border-color: revert;
    border-right-color: revert;
    border-width: revert;
    margin-top: revert;
}

/* ─── Cart styles ─────────────────────────────────────────────── */
.ignore-app-design span#cart-count {
    background-color: revert;
    border-radius: revert;
    width: revert;
    text-align: revert;
    margin: revert;
    font-size: revert;
    font-weight: revert;
    position: revert;
}
.ignore-app-design .total-text {
    border: revert;
    border-radius: revert;
    text-decoration: revert !important;
}
.ignore-app-design .cart-slider {
    width: revert;
    position: revert;
}
.ignore-app-design .cart-slider-body {
    margin-right: revert;
    z-index: revert;
    background-color: revert;
    box-shadow: revert;
}

/* ─── Navbar ──────────────────────────────────────────────────── */
.ignore-app-design .navbar:not(.cart-navbar) {
    overflow: revert;
    background-color: revert;
    position: revert !important;
    top: revert;
    width: revert;
    z-index: revert;
}
.ignore-app-design .navbar:not(.cart-navbar) a {
    float: revert;
    display: revert;
    color: revert;
    text-align: revert;
    padding: revert;
    text-decoration: revert;
}
.ignore-app-design .navbar:not(.cart-navbar) a:hover {
    background: revert;
    color: revert;
}
.ignore-app-design .main {
    margin-top: revert !important;
}

/* ─── Card text ───────────────────────────────────────────────── */
.ignore-app-design .card-text {
    min-height: revert;
}

/* ─── Address suggestions ─────────────────────────────────────── */
.ignore-app-design ul#address-suggestions {
    padding: revert;
    border: revert;
    border-radius: revert;
    margin-top: revert;
}
.ignore-app-design ul#address-suggestions li {
    margin-bottom: revert;
}
.ignore-app-design ul#address-suggestions li:last-child {
    margin-bottom: revert;
}

/* ─── Common modal header ─────────────────────────────────────── */
.ignore-app-design #commonModal .modal-header {
    justify-content: revert;
}

/* =============================================
   BUNDLED COMPONENT: checkout.css
   ============================================= */
/* ==========================================
   CHECKOUT
========================================== */

.checkout-page {
  margin-top: 91px;
  background: #fafafa;
  min-height: 100vh;
}

.checkout-wrapper {
  display: grid;
  grid-template-columns: 1.45fr 420px;
  gap: 108px;
  padding: 72px 0 120px;
}

.checkout-steps {
  display: flex;
  gap: 12px;
  margin-bottom: 72px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #8f8f8f;
}

.checkout-steps .active {
  color: #1A1C1C;
}

.checkout-title,
.summary-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 42px;
}

.checkout-section {
  margin-bottom: 20px;
}

.form-group {
  position: relative;
  margin-bottom: 24px !important;
}

.form-group label {
  display: block !important;
  margin-bottom: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #334155 !important;
}

.form-group input,
.form-group select,
.ignore-app-design .form-group input,
.ignore-app-design .form-group select,
.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="tel"],
.checkout-page select {
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  padding: 0 16px !important;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

.form-group input:focus,
.form-group select:focus,
.checkout-page input:focus,
.checkout-page select:focus {
  border-color: #029AFD !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
}

.checkout-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.checkout-checkbox label {
  font-size: 16px;
  color: #555;
}

.checkout-actions {
  border-top: 1px solid #e6e6e6;

  padding-top: 48px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.return-cart {
  color: #1A1C1C;
  text-decoration: none;
}

.continue-btn {
  width: 245px;
  height: 58px;

  border: 0;
  background: #1A1C1C;
  color: white;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
}

.checkout-summary {
  padding-top: 8px;
}

.summary-products {
  border-bottom: 1px solid #ececec;
  padding-bottom: 32px;
}

.summary-product {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}

.product-thumb {
  width: 92px;
  height: 92px;
}

.product-thumb.bag {
  background: #dcdcdc;
}

.product-info {
  flex: 1;
}

.product-info h4 {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.product-info p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #666;
}

.discount-row {
  display: flex;
  gap: 14px;
}

.discount-row-wrapper{
  padding: 36px 0;
}

.discount-row input {
  flex: 1;

  border: 0;
  border-bottom: 1px solid #d8d8d8;
  background: transparent;

  height: 48px;
}

.discount-row button {
  width: 110px;
  border: 1px solid #1A1C1C;
  background: transparent;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}

.summary-totals {
  border-top: 1px solid #ececec;
  padding-top: 36px;
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
}

.summary-line {
  margin-bottom: 22px;
  font-size: 16px;
}

.summary-line .muted {
  color: #9b9b9b;
}

.summary-total {
  border-top: 1px solid #ececec;
  margin-top: 34px;
  padding-top: 38px;
  align-items: center;
}

.summary-total small {
  font-size: 12px;
  letter-spacing: .16em;
  margin-right: 12px;
  font-weight: 600;
}

.summary-total strong {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 58px;
}

.final_amount{
    display: flex;
    align-items: center;
}

@media (max-width: 992px) {
  .checkout-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .checkout-summary {
    order: -1;
  }

  .checkout-actions {
    flex-direction: column;
    gap: 24px;
  }
}



/* ==========================================
   CHECKOUT BILLING
   Extends checkout.css — billing-specific overrides & additions
========================================== */

/* ---- Billing page uses a simplified header ---- */
.billing-header {
  border-bottom: 1px solid #e8e8e8;
  padding: 22px 0;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
}

/* ---- Page ---- */
.checkout-page {
  margin-top: 0;          /* billing page has its own header */
  background: #fafafa;
  min-height: 100vh;
}

/* ---- Two-col layout (shared with checkout.css but redeclared for safety) ---- */
.checkout-wrapper {
  display: grid;
  grid-template-columns: 1.45fr 420px;
  gap: 108px;
  padding: 72px 0 120px;
}

/* ---- Breadcrumb / steps ---- */
.checkout-steps {
  display: flex;
  gap: 12px;
  margin-bottom: 56px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #8f8f8f;
  text-transform: uppercase;
}

.checkout-steps .active {
  color: #1A1C1C;
}

/* ---- Review info block (email / phone / address) ---- */
.review-block {
  margin-bottom: 56px;
}

.review-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 0px;
  border-bottom: 1px solid #f0f0f0;
}

.review-row:last-child {
  border-bottom: 0;
}

.review-label {
  font-size: 16px;
  color: #7F7F7F;
  min-width: 130px;
  padding-top: 2px;
}

.review-value {
  font-size: 16px;
  color: #1A1C1C;
  text-align: right;
  line-height: 1.6;
}

/* ---- Section titles ---- */
.checkout-title,
.summary-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 36px;
}


/* ---- Shipping options ---- */


.shipping-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px;
  border-bottom: 1px solid #b4b3b3;
  cursor: pointer;
  transition: background .15s;
}

/* .shipping-option:last-child {
  border-bottom: 0;
} */

.shipping-option:hover {
  background: #fafafa;
}

.shipping-option-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Custom radio */
.shipping-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c4c4c4;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .15s;
}

.shipping-option input[type="radio"]:checked {
  border-color: #1A1C1C;
}

.shipping-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A1C1C;
}

.shipping-option-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shipping-option-name {
  font-size: 16px;
  color: #1A1C1C;
}

.shipping-option-days {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #7F7F7F;
  text-transform: uppercase;
}

.shipping-option-price {
  font-size: 16px;
  color: #1A1C1C;
}

/* ---- Payment Method section ---- */


.payment-option {
  border-bottom: 1px solid #C4C7C3;
  cursor: pointer;
}

.payment-option:last-child {
  border-bottom: 0;
}

.payment-option-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0px;
  transition: background .15s;
}

.payment-option-header:hover {
  background: #fafafa;
}

/* reuse same custom radio style */
.payment-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c4c4c4;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .15s;
}

.payment-option input[type="radio"]:checked {
  border-color: #1A1C1C;
}

.payment-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A1C1C;
}

.payment-option-label {
  font-size: 14px;
  color: #1A1C1C;
}

/* PayPal / Afterpay logos */
.payment-logo {
  height: 22px;
  width: auto;
}

/* Card form inside credit card option */
.card-fields {
  padding: 15px 24px 28px 35px;
  display: none;
}

.card-fields.visible {
  display: block;
}

.form-group {
  position: relative;
  margin-bottom: 32px;
}

.form-group label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1A1C1C;
}

.form-group input,
.form-group select {
  width: 100% !important;
  height: 48px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  padding: 0 16px !important;
  outline: none !important;
  font-family: 'Inter', sans-serif !important;
  color: #0f172a !important;
}

.form-group input::placeholder {
  color: #bbb;
  font-size: 14px;
}

.card-row {
  /* display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px; */
}

/* ---- Actions footer ---- */
.checkout-actions {
  border-top: 1px solid #e6e6e6;
  padding-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.return-cart {
  color: #1A1C1C;
  text-decoration: none;
  font-size: 16px;
}

.continue-btn {
  width: 240px !important;
  height: 52px !important;
  border: none !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #029AFD 0%, #029AFD 100%) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  font-family: var(--font-body) !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 20px rgba(15, 118, 110, 0.25) !important;
}

.continue-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(15, 118, 110, 0.35) !important;
  background: linear-gradient(135deg, #029AFD 0%, #029AFD 100%) !important;
}

/* ---- Order Summary sidebar (shared styles, re-declared for self-containment) ---- */
.checkout-summary {
  padding-top: 8px;
}

.summary-products {
  border-bottom: 1px solid #ececec;
  padding-bottom: 32px;
  margin-bottom: 0;
}

.summary-product {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
  position: relative;
}

.product-thumb {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  position: relative;
}

.product-thumb.bag {
  background: #dcdcdc;
}

/* quantity badge */
.qty-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #8f8f8f;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-info {
  flex: 1;
}

.product-info h4 {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 6px;
  font-weight: 400;
}

.product-info p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #444844;
  text-transform: uppercase;
}

.discount-row {
  display: flex;
  gap: 14px;
}

.discount-row input {
  flex: 1 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  height: 48px !important;
  padding: 0 16px !important;
  outline: none !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
}

.discount-row input::placeholder {
  color: #94a3b8 !important;
}

.discount-row button {
  width: 120px !important;
  height: 48px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  transition: background .2s, transform .2s !important;
}

.discount-row button:hover {
  background: #029AFD !important;
  color: #ffffff !important;
}

.summary-totals {
  border-top: 1px solid #ececec;
  padding-top: 36px;
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
}

.summary-line {
  margin-bottom: 22px;
  font-size: 16px;
}

.summary-line .muted {
  color: #9b9b9b;
}

.summary-total {
  border-top: 1px solid #ececec;
  margin-top: 34px;
  padding-top: 38px;
  align-items: center;
}


.summary-total strong {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 58px;
}

.final_amount {
  display: flex;
  align-items: center;
  color: #444844;
}

/* ---- Billing footer ---- */
.billing-footer {
  border-top: 1px solid #e8e8e8;
  padding: 28px 0;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover {
  color: #1A1C1C;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {

  .billing-header .luxe-container{text-align: center;justify-content: center;}

  .checkout-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .checkout-summary {
    order: -1;
  }

  .checkout-actions {
    flex-direction: column;
    gap: 24px;
  }

  .continue-btn {
    width: 100%;
  }
}

@media(max-width:768px){
    .billing-footer .luxe-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .billing-footer-links{gap:25px;}
} 

/* =============================================
   BUNDLED COMPONENT: search.css
   ============================================= */
/* =============================================
   SEARCH PAGE — search.css
   Depends on: style.css (shared LUXE tokens)
   ============================================= */


/* =============================================
   SEARCH HEADER
   ============================================= */
   .search-header {
    padding: 64px 0 0;
    background: #F9F9F8;
}

.search-header.mt-nav{margin-top: 91px;}

/* Page title — matches cart-title / col-hero-title style */
.search-title {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    font-weight: 400;
    color: #1A1C1C;
    line-height: 1.1;
    margin-bottom: 64px;
}

/* Meta bar: tag pill left, count right */
.search-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 1px solid #d4d4cc;
}

/* Active query tag pill.
   On the desktop search page the chip sits directly in .search-meta-bar — its
   space-between puts the chip left and the count right, so the wrapper that
   used to hold it (and its second data-app hook) was doing nothing and is gone.
   The rule stays for mobile/search.html, which still uses the wrapper. */
.search-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #1A1C1C;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.3px;
    padding: 6px 12px 6px 14px;
    line-height: 1;
}

.search-tag-remove {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.search-tag-remove:hover {
    opacity: 1;
}

/* Results count */
.search-results-count {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    white-space: nowrap;
    /* Hold the right edge on a search with no query: the chip is hidden then,
       leaving the count as the only child, and space-between alone would pull
       it to the left. The empty wrapper used to reserve that space. */
    margin-left: auto;
}


/* =============================================
   SEARCH RESULTS GRID
   Reuses .shop-card, .shop-img-wrap, .shop-img-*,
   .shop-box-title, .shop-price from style.css
   ============================================= */
.search-results {
    background: #F9F9F8;
    padding: 40px 0 100px;
}


/* =============================================
   NO RESULTS STATE
   ============================================= */
.search-no-results {
    padding: 80px 0;
    text-align: center;
}

.search-no-results-msg {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #666666;
    margin-bottom: 24px;
}

.search-browse-link {
    display: inline-block;
    text-decoration: none;
    background-color: #1A1C1C;
    color: #ffffff;
    padding: 14px 32px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    transition: background-color 0.3s ease;
}

.search-browse-link:hover {
    background-color: #333333;
    color: #ffffff;
}


/* =============================================
   RESPONSIVE — TABLET (max 768px)
   ============================================= */
@media (max-width: 768px) {
    .search-title {
        font-size: 40px;
    }
}


/* =============================================
   RESPONSIVE — MOBILE (max 640px)
   ============================================= */
@media (max-width: 640px) {
    .search-header {
        padding: 40px 0 0;
    }

    .search-title {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .search-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 20px;
    }

    .search-results {
        padding: 28px 0 60px;
    }
}

/* =============================================
   BUNDLED COMPONENT: searchbar.css
   ============================================= */
/* ==========================================
   SEARCH OVERLAY
========================================== */

.luxe-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0,0,0,.15);

    opacity: 0;
    visibility: hidden;

    transition: all .35s ease;
}

.luxe-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.luxe-search-panel {
    background: var(--bg-section);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    transform: translateY(-100%);
    transition: transform .45s ease;
}

.luxe-search-overlay.active .luxe-search-panel {
    transform: translateY(0);
}

.luxe-search-inner {
    max-width: 1360px;
    margin: 0 auto;

    padding: 70px 60px;
    position: relative;
}

.luxe-search-close {
    position: absolute;
    top: 32px;
    right: 48px;

    width: 40px;
    height: 40px;

    border: none;
    background: transparent;

    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--heading-color);
    transition: color 0.2s;
}
.luxe-search-close:hover,
.luxe-search-close:focus {
    color: var(--accent-champagne);
}

.luxe-search-content {
    max-width: 920px;
    margin: 0 auto;
}

.luxe-search-label {
    display: block;

    margin-bottom: 28px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--body-text);
    text-transform: uppercase;
}

.luxe-search-form {
    display: flex;
    align-items: center;
    gap: 36px;
}

.luxe-search-input {
    flex: 1;

    border: none;
    border-bottom: 1px solid var(--border-color);

    height: 64px;

    padding: 0;

    font-size: 24px;
    font-family: var(--font-display);
    color: var(--heading-color);

    background: transparent;
    outline: none;
    transition: border-color 0.25s ease;
}
.luxe-search-input:focus {
    border-bottom-color: var(--primary-green);
}

.luxe-search-input::placeholder {
    color: var(--muted-text);
    font-family: var(--font-body);
    font-size: 20px;
}

.luxe-search-submit {
    min-width: 180px;
    height: 64px;

    border: 1px solid var(--primary-green);
    border-radius: 4px;

    background: var(--primary-green);
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;

    cursor: pointer;
    transition: all .25s ease;
}

.luxe-search-submit:hover,
.luxe-search-submit:focus {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(31, 94, 75, 0.25);
}

@media (max-width: 991px) {

    .luxe-search-inner {
        padding: 80px 24px 40px;
    }

    .luxe-search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .luxe-search-submit {
        width: 100%;
    }

    .luxe-search-input {
        font-size: 20px;
    }
}
/* ============================================================
   Search overlay, driven by the runtime's state attribute
   instead of a .active class toggled by searchbar.js.
   Same visual result — different trigger.
   ============================================================ */
.luxe-search-overlay[data-app-open] {
    opacity: 1;
    visibility: visible;
}

.luxe-search-overlay[data-app-open] .luxe-search-panel {
    transform: translateY(0);
}

/* The close button is absolutely positioned but had no stacking context, so
   the panel's own content could sit over it and swallow the click. */
.luxe-search-close {
    z-index: 2;
}


/* =============================================
   BUNDLED COMPONENT: thank_you.css
   ============================================= */


/* ---- Header ---- */
.billing-header {
  border-bottom: 1px solid #e4e2de;
  padding: 22px 0;
  background: #f5f4f1;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Main content ---- */
.thankyou-main {
  padding: 64px 0 80px;
  background: #f5f4f1;
  min-height: calc(100vh - 67px - 72px);
}

.thankyou-main .luxe-container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

/* ---- Left: dark editorial image panel ---- */
.thankyou-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1.22;
  position: relative;
  overflow: hidden;
  background: #1e3035;   /* deep teal fallback that matches the photo */
}

.thankyou-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay text centred on the image */
.thankyou-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  /* only visible when no real image, or always if you want text over image */
}

.thankyou-img-overlay h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 18px;
}

/* thin rule under "Thank You" */
.thankyou-img-overlay h2::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,.5);
  margin: 16px auto 0;
}

.thankyou-img-overlay p {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
}

/* ---- Right: confirmation details ---- */
.thankyou-details {
  padding-top: 64px;
  display: flex;
  flex-direction: column;
}

.thankyou-brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .18em;
  color: #1A1C1C;
  margin-bottom: 48px;
}

.thankyou-headline {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  color: #1A1C1C;
  margin-bottom: 32px;
}

.thankyou-body {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 48px;
  max-width: 340px;
}

/* Divider */
.thankyou-divider {
  border: none;
  border-top: 1px solid #C4C7C3;
  margin-bottom: 36px;
}

/* Order reference block */
.thankyou-order-ref {
  margin-bottom: 48px;
}

.order-ref-label {
  font-size: 12px;
  color: #444844;
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 1.2px;

}

.order-ref-value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #1A1C1C;
}

/* CTA */
.btn-return {
  display: inline-block;
  width: 100%;
  max-width: 324px;
  height: 58px;
  background: #1A1C1C;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s;
  text-align: center;
  line-height: 58px;
  text-decoration: none;
}

.btn-return:hover {
  background: #333;
  color: #fff;
}

/* ---- Footer ---- */
.billing-footer {
  border-top: 1px solid #e4e2de;
  padding: 24px 0;
  background: #f5f4f1;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover { color: #1A1C1C; }

/* ---- Responsive ---- */

@media (max-width: 992px) {
  .billing-header .luxe-container{text-align: center;justify-content: center;}
}

@media (max-width: 900px) {
  .thankyou-main .luxe-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .thankyou-details {
    padding-top: 0;
  }

  .thankyou-headline {
    font-size: 52px;
  }

  .btn-return {
    max-width: 100%;
  }

  .billing-footer .luxe-container {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* =============================================
   BUNDLED COMPONENT: upsell.css
   ============================================= */
/* ==========================================
   UPSELL PAGE
========================================== */


.luxe-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #1A1C1C;
  text-decoration: none;
}

/* ---- Header ---- */
.billing-header {
  border-bottom: 1px solid #e8e8e8;
  padding: 22px 0;
}

.billing-header .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #444844;
  text-transform: uppercase;
}

.billing-secure svg {
  width: 14px;
  height: 14px;
  stroke: #444844;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Urgency banner ---- */
.urgency-banner {
  background: #1A1C1C;
  padding: 20px 0;
  text-align: center;
}

.urgency-banner p {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #fff;
  text-transform: uppercase;margin-bottom: 0;
}

/* ---- Hero product section ---- */
.upsell-hero {
  padding: 80px 0 96px;
}

.upsell-hero .luxe-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

/* Product image */
.upsell-img-wrap {
  width: 100%;
  height: 850px;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
}

.upsell-img-wrap img {
  width: 100%;
  /* height: 100%;
  object-fit: cover;
  display: block; */
}

/* Product details */
.upsell-details {
  padding-top: 48px;
}

.upsell-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  color: #1A1C1C;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.upsell-headline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: #1A1C1C;
  margin-bottom: 28px;
}

.upsell-description {
  font-size: 16px;
  line-height: 1.75;
  color: #444844;
  margin-bottom: 36px;
}

/* Pricing row */
.upsell-pricing {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  border-top:1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 32px;
}

.price-now {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  color: #1A1C1C;
  line-height: 1;
}

.price-was {
  font-size: 18px;
  color: #747874;
  text-decoration: line-through;
}

.price-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #1A1C1C;
  background: #D8ECBF;
  padding: 5px 10px;
  text-transform: uppercase;
  margin-left: auto;
}

/* Timer box */
.upsell-timer-box {
  border: 1px solid #e4e4e4;
  padding: 20px 24px;
  margin-bottom: 36px;
  background: #F3F4F3;
}

.timer-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #58614F;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.timer-label svg {
  width: 19px;
  height: 19px;
  stroke: #58614F;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.timer-text {
  font-size: 16px;
  font-style: italic;
  color: #555;
  line-height: 1.6;
}

.timer-text strong {
  font-style: normal;
  font-weight: 700;
  color: #1A1C1C;
}

/* CTA buttons */
.upsell-ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.btn-complete {
  display: block;
  width: 100%;
  height: 58px;
  background: #1A1C1C;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s;
  text-align: center;
  line-height: 58px;
  text-decoration: none;
}

.btn-complete:hover {
  background: #333;
  color: #fff;
}

.btn-skip {
  display: block;
  width: 100%;
  height: 58px;
  background: transparent;
  color: #1A1C1C;
  border: 1px solid #1A1C1C;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s, color .2s;
  text-align: center;
  line-height: 56px;
  text-decoration: none;
}

.btn-skip:hover {
  background: #1A1C1C;
  color: #fff;
}

/* ---- Feature grid ---- */
.upsell-features {
  padding: 0 0 100px;
}

.upsell-features .luxe-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feature-card {}

.feature-img {
  width: 100%;
  aspect-ratio: 1 / 0.85;
  overflow: hidden;
  background: #ddd;
  margin-bottom: 24px;
}

.feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}

/* placeholder colour swatches when no real images */
.feature-img--leather { background: #c8c3bc; }
.feature-img--interior { background: #b8b4ae; }
.feature-img--form     { background: #a8a5a0; }

.feature-number {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #1A1C1C;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.feature-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #444844;
}

/* ---- Footer ---- */
.billing-footer {
  border-top: 1px solid #e8e8e8;
  padding: 28px 0;
}

.billing-footer .luxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-footer-copy {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #444844;
  text-transform: uppercase;
}

.billing-footer-links {
  display: flex;
  gap: 32px;
}

.billing-footer-links a {
  font-size: 16px;
  color: #444844;
  text-decoration: none;
  transition: color .15s;
}

.billing-footer-links a:hover { color: #1A1C1C; }

/* ---- Responsive ---- */

@media (max-width: 992px) {
  .billing-header .luxe-container{text-align: center;justify-content: center;}
}
@media (max-width: 768px) {
  .upsell-hero .luxe-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .upsell-details { padding-top: 0; }

  .upsell-headline { font-size: 30px; }

  .upsell-features .luxe-container {
    grid-template-columns: 1fr;
  }

  .billing-footer .luxe-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .billing-footer-links{gap:25px;}

    .upsell-img-wrap {height: auto;}
}

/* ============================================================
   HERO CONCENTRIC RINGS & CHECKOUT GRID FIXES
   ============================================================ */
.hero-right-stage {
  position: relative !important;
}

.hero-concentric-ring {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  border: 1.5px solid rgba(2, 154, 253, 0.22) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  box-shadow: 0 0 30px rgba(2, 154, 253, 0.08), inset 0 0 30px rgba(2, 154, 253, 0.08) !important;
  flex-shrink: 0 !important;
}

.hero-ring-lg {
  width: 440px !important;
  height: 440px !important;
  max-width: 85vw !important;
  max-height: 85vw !important;
}

.hero-ring-md {
  width: 340px !important;
  height: 340px !important;
  max-width: 68vw !important;
  max-height: 68vw !important;
}

.hero-ring-sm {
  width: 240px !important;
  height: 240px !important;
  max-width: 50vw !important;
  max-height: 50vw !important;
}

/* Checkout Page Grid Harmonization */
.checkout-grid-layout {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 36px !important;
  align-items: start !important;
  padding: 40px 0 100px !important;
}

.checkout-left-col {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

.checkout-right-col {
  width: 100% !important;
  min-width: 0 !important;
  position: sticky !important;
  top: 90px !important;
}

@media (max-width: 991px) {
  .checkout-grid-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 24px 0 60px !important;
  }
  .checkout-right-col {
    position: static !important;
  }
}

/* ============================================================
   INFOGRAPHIC SHOWCASE SECTIONS (ADVANCED FORMULA, NO2 & TESTO)
   ============================================================ */

/* 1. Perfect Circle SVG Overlays & Concentric Rings */
.apple-stage-svg-overlay,
.no2-stage-svg-overlay,
.testo-stage-svg-overlay {
  width: 540px !important;
  height: 540px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: visible !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.apple-ring-dashed,
.no2-ring-dashed,
.testo-ring-dashed {
  transform-origin: center !important;
  vector-effect: non-scaling-stroke !important;
}

/* 2. Outstanding Section Titles & Badges */
.apple-pill-badge,
.no2-pill-badge,
.testo-pill-badge {
  display: inline-block !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  padding: 8px 22px !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, rgba(2, 154, 253, 0.12), rgba(2, 34, 102, 0.08)) !important;
  border: 1px solid rgba(2, 154, 253, 0.25) !important;
  color: #029AFD !important;
  box-shadow: 0 4px 15px rgba(2, 154, 253, 0.10) !important;
  margin-bottom: 16px !important;
}

.apple-main-heading,
.no2-main-heading,
.testo-main-heading {
  font-family: var(--font-display, 'Manrope', sans-serif) !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #022266 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
}

.apple-heading-primary,
.no2-heading-primary,
.testo-heading-primary {
  display: block !important;
  background: linear-gradient(135deg, #022266 0%, #029AFD 60%, #5BC6FF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 3. Cards Flex, Auto Height & Dynamic Sizing (Prevents text breaking/overflowing) */
.apple-glass-card-left,
.apple-glass-card-right,
.no2-glass-card-left,
.no2-glass-card-right,
.testo-glass-card-left,
.testo-glass-card-right {
  width: 320px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 110px !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(2, 154, 253, 0.18) !important;
  box-shadow: 0 8px 24px rgba(2, 34, 102, 0.06), inset 0 1px 0 #ffffff !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  transition: all 0.3s ease !important;
}

.apple-card-title-22,
.no2-card-title-22,
.testo-card-title-22 {
  font-family: var(--font-display, 'Manrope', sans-serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #022266 !important;
  margin-bottom: 3px !important;
  line-height: 1.3 !important;
}

.apple-card-subtag,
.no2-card-subtag,
.testo-card-subtag {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #029AFD !important;
  margin-bottom: 6px !important;
}

.apple-card-body-15,
.no2-card-body-15,
.testo-card-body-15 {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #475569 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  word-wrap: break-word !important;
}

/* 4. Hero Section Button Hover Fix (Prevents white background/text issues) */
.hero-btn-primary,
a.hero-btn-primary {
  background: #029AFD !important;
  color: #FFFFFF !important;
  transition: all 0.3s ease !important;
}

.hero-btn-primary:hover,
a.hero-btn-primary:hover,
.hero-cta-group a.hero-btn-primary:hover {
  background: #0274C4 !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 40px rgba(2, 154, 253, 0.45) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

.hero-btn-secondary,
a.hero-btn-secondary {
  background: #022266 !important;
  color: #FFFFFF !important;
  transition: all 0.3s ease !important;
}

.hero-btn-secondary:hover,
a.hero-btn-secondary:hover,
.hero-cta-group a.hero-btn-secondary:hover {
  background: #011645 !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 40px rgba(2, 34, 102, 0.4) !important;
  transform: translateY(-2px) scale(1.03) !important;
}



/* 6. Extended SVG Stage Arrow Overlay (Prevents clipping of extended left/right arrowheads) */
.apple-stage-svg-overlay,
.no2-stage-svg-overlay,
.testo-stage-svg-overlay {
  overflow: visible !important;
}

/* 7. Comprehensive Cart Drawer & Site-Wide Button Hover Safeguards */
.cart-checkout-btn,
.btn-checkout,
a.cart-checkout-btn,
a.btn-checkout {
  background: #029AFD !important;
  color: #FFFFFF !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.cart-checkout-btn:hover,
.btn-checkout:hover,
a.cart-checkout-btn:hover,
a.btn-checkout:hover {
  background: #0274C4 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(2, 154, 253, 0.45) !important;
  transform: translateY(-2px) !important;
}

.cart-view-bag-btn,
a.cart-view-bag-btn {
  background: #022266 !important;
  color: #FFFFFF !important;
  border: 1px solid #022266 !important;
  transition: all 0.3s ease !important;
}

.cart-view-bag-btn:hover,
a.cart-view-bag-btn:hover {
  background: #011645 !important;
  color: #FFFFFF !important;
  border-color: #011645 !important;
  box-shadow: 0 8px 24px rgba(2, 34, 102, 0.35) !important;
  transform: translateY(-2px) !important;
}

.cart-drawer-close-btn:hover {
  color: #E53935 !important;
  transform: rotate(90deg) !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.cart-item-remove-btn:hover,
.cart-item-remove:hover {
  color: #D32F2F !important;
  text-decoration: underline !important;
}

.luxe-hdr-shop-btn,
a.luxe-hdr-shop-btn {
  background: #029AFD !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.3s ease !important;
}

.luxe-hdr-shop-btn:hover,
a.luxe-hdr-shop-btn:hover {
  background: #0274C4 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(2, 154, 253, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* 8. Unify Section 1 (ADVANCED FORMULA) Design & Background Backdrop with Sections 2B & 2C */
.apple-infographic-section {
  position: relative !important;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.95) 0%, rgba(243, 249, 255, 0.90) 50%, rgba(255, 255, 255, 0.95) 100%), url('../images/product_bg.png') center/cover no-repeat !important;
  padding: 110px 0 100px 0 !important;
  min-height: 900px !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(2, 154, 253, 0.1) !important;
  border-bottom: 1px solid rgba(2, 154, 253, 0.1) !important;
}

.apple-mint-glow-650 {
  position: absolute !important;
  top: 52% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 650px !important;
  height: 650px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(2, 154, 253, 0.24) 0%, rgba(2, 34, 102, 0.08) 55%, transparent 75%) !important;
  filter: blur(50px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.apple-botanical-blur,
.apple-floating-leaf {
  display: none !important;
}

.apple-glass-card-left:hover,
.apple-glass-card-right:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 35px rgba(2, 154, 253, 0.18), inset 0 1px 0 #ffffff !important;
  border-color: #029AFD !important;
}

.apple-circle-64 {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(2, 154, 253, 0.15), rgba(2, 34, 102, 0.08)) !important;
  border: 1.5px solid rgba(2, 154, 253, 0.25) !important;
  color: #029AFD !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}

.apple-glass-card-left:hover .apple-circle-64,
.apple-glass-card-right:hover .apple-circle-64 {
  background: #029AFD !important;
  color: #ffffff !important;
  border-color: #029AFD !important;
  transform: scale(1.08) !important;
}

/* 9. Hero Banner Padding Adjustment (Top 0, Bottom 10px) */
.hero-luxury-section,
.hero-section {
  padding-top: 0px !important;
  padding-bottom: 10px !important;
  min-height: auto !important;
}

/* 10. Absolute Podium Seating (Positions Podium directly UNDER bottom of bottle & fully responsive) */
.apple-bottle-wrapper,
.no2-bottle-wrapper,
.testo-bottle-wrapper {
  position: relative !important;
  z-index: 4 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 480px !important;
}

.apple-bottle-img-330,
.no2-bottle-img-330,
.testo-bottle-img-330 {
  display: block !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 5 !important;
  width: 446px !important;
  max-width: 100% !important;
  height: auto !important;
  filter: drop-shadow(0 20px 30px rgba(2, 34, 102, 0.25)) !important;
  transition: transform 0.3s ease !important;
}

.apple-bottle-img-330:hover,
.no2-bottle-img-330:hover,
.testo-bottle-img-330:hover {
  transform: scale(1.03) !important;
}

.apple-podium-img-430,
.no2-podium-img-430,
.testo-podium-img-430 {
  position: absolute !important;
  bottom: -76px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 580px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  z-index: 2 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 15px 25px rgba(2, 34, 102, 0.15)) !important;
}

/* 11. OUR PRODUCTS Section Header Harmonization */
.product-section-subhead .subhead-text {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  color: #029AFD !important;
  text-transform: uppercase !important;
}

.product-section-subhead .subhead-line {
  background-color: rgba(2, 154, 253, 0.4) !important;
  height: 1.5px !important;
}

.product-section-title {
  font-family: var(--font-display, 'Manrope', sans-serif) !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #022266 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
}

.product-section-subtitle {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #5F7391 !important;
  line-height: 1.65 !important;
}

/* 12. Product Card Image Stage Enhancement (Prominent, High-Quality Product Image Display) */
.prod-img-stage {
  height: 280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 0 !important;
  margin-bottom: 16px !important;
  position: relative !important;
}

.prod-img-stage .product-img {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.prod-img-stage .product-img img,
.prod-img-stage img.prod-img,
img.prod-img {
  width: auto !important;
  height: 245px !important;
  max-height: 245px !important;
  max-width: 90% !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
  filter: drop-shadow(0 14px 28px rgba(2, 34, 102, 0.18)) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.prod-card-v8:hover .prod-img-stage img,
.prod-card-v8:hover .product-img img,
.prod-card-v8:hover img.prod-img {
  transform: scale(1.08) translateY(-4px) !important;
}

.prod-img-shadow {
  width: 75% !important;
  height: 20px !important;
  bottom: 0px !important;
}

/* ============================================================
   13. ULTRA-LUXURY CHECKOUT PAGE DESIGN (PURE CSS HARMONIZATION)
   ============================================================ */

.checkout-page,
body.ignore-app-design .checkout-page {
  background: #F8FAFC !important;
  padding-bottom: 90px !important;
}

/* 4-Step Progress Tracker Bar */
.checkout-steps-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  background: #FFFFFF !important;
  border-radius: 999px !important;
  border: 1px solid rgba(2, 154, 253, 0.15) !important;
  box-shadow: 0 4px 20px rgba(2, 34, 102, 0.04) !important;
  margin-bottom: 36px !important;
}

.checkout-step-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #64748B !important;
}

.checkout-step-item.active,
.checkout-step-item.completed {
  color: #022266 !important;
}

.checkout-step-circle {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border: 1px solid #CBD5E1 !important;
  transition: all 0.3s ease !important;
}

.checkout-step-item.active .checkout-step-circle {
  background: #029AFD !important;
  color: #FFFFFF !important;
  border-color: #029AFD !important;
  box-shadow: 0 0 12px rgba(2, 154, 253, 0.4) !important;
}

.checkout-step-item.completed .checkout-step-circle {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border-color: #10B981 !important;
}

.checkout-step-line {
  height: 2px !important;
  width: 40px !important;
  background: #E2E8F0 !important;
  border-radius: 2px !important;
}

.checkout-step-line.active {
  background: linear-gradient(90deg, #10B981, #029AFD) !important;
}

/* Section Title & Subtitle */
.checkout-main-title {
  font-family: var(--font-display, 'Manrope', sans-serif) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #022266 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 6px !important;
}

.checkout-main-subtitle {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 15px !important;
  color: #64748B !important;
}

/* Card Blocks (Forms & Payment) */
.checkout-card-block,
.checkout-summary-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  border: 1px solid rgba(2, 154, 253, 0.16) !important;
  box-shadow: 0 10px 30px rgba(2, 34, 102, 0.05) !important;
  padding: 28px !important;
  margin-bottom: 24px !important;
  transition: all 0.3s ease !important;
}

.checkout-card-block:hover,
.checkout-summary-card:hover {
  box-shadow: 0 16px 40px rgba(2, 154, 253, 0.10) !important;
  border-color: rgba(2, 154, 253, 0.35) !important;
}

/* Card Header & Icon Circles */
.checkout-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding-bottom: 18px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.checkout-card-icon-circle {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(2, 154, 253, 0.12), rgba(2, 34, 102, 0.06)) !important;
  border: 1px solid rgba(2, 154, 253, 0.22) !important;
  color: #029AFD !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.checkout-card-title {
  font-family: var(--font-display, 'Manrope', sans-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #022266 !important;
  margin-bottom: 2px !important;
}

.checkout-card-subtext {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 13px !important;
  color: #64748B !important;
  margin: 0 !important;
}

/* Inputs & Form Fields Styling */
.co-field-label {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #022266 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.co-field-label .req {
  color: #EF4444 !important;
}

.co-input-box-wrap {
  position: relative !important;
}

.co-input-box-wrap .co-input-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94A3B8 !important;
  font-size: 15px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  transition: color 0.3s ease !important;
}

.co-input-box-wrap input,
.co-input-box-wrap select,
input.custom_input_tag,
select.custom_select_tag {
  width: 100% !important;
  height: 48px !important;
  padding: 10px 14px 10px 14px !important;
  border-radius: 12px !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 14px !important;
  color: #0F172A !important;
  outline: none !important;
  transition: all 0.25s ease !important;
}

.co-input-box-wrap input:focus,
.co-input-box-wrap select:focus,
input.custom_input_tag:focus,
select.custom_select_tag:focus {
  border-color: #029AFD !important;
  box-shadow: 0 0 0 4px rgba(2, 154, 253, 0.15) !important;
}

.co-input-box-wrap input:focus + .co-input-icon,
.co-input-box-wrap input:focus ~ .co-input-icon {
  color: #029AFD !important;
}

/* Order Summary Box */
.checkout-summary-card {
  position: sticky !important;
  top: 100px !important;
}

.summary-title {
  font-family: var(--font-display, 'Manrope', sans-serif) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #022266 !important;
  margin-bottom: 20px !important;
}

.summary-item-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 14px !important;
  color: #475569 !important;
}

.summary-total-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 16px !important;
  margin-top: 8px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #022266 !important;
}

.summary-total-price {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #029AFD !important;
}

/* Primary CTA Submit Order Button */
.checkout-submit-btn,
.btn-checkout,
button.btn-checkout,
a.btn-checkout,
.summary-place-order-btn,
.modal-sp-btn,
.custom_place_order_btn button {
  width: 100% !important;
  height: 58px !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg, #029AFD 0%, #0274C4 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(2, 154, 253, 0.38) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.checkout-submit-btn:hover,
.btn-checkout:hover,
button.btn-checkout:hover,
.summary-place-order-btn:hover,
.modal-sp-btn:hover,
.custom_place_order_btn button:hover {
  background: linear-gradient(135deg, #0287DE 0%, #015E9F 100%) !important;
  box-shadow: 0 16px 40px rgba(2, 154, 253, 0.5) !important;
  transform: translateY(-2px) !important;
  color: #FFFFFF !important;
}
.payment-icons-strip {
  margin-bottom: 14px;
}
.payment-icons-strip img{
  width: 21%;
}

.subscribe-content p{ font-size: 14px;}


.continue-btn {
    background: #013E37;
    color: #fff;
    border: 1px solid #013E37;
    transition: all .3s ease;
}

.continue-btn:hover:not(:disabled) {
    background: #0B4D45;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(1, 62, 55, 0.18);
}




.continue-btn:disabled {
  background: #EEF2F1!important;
  color: #9AA9A5!important;
  border: 1px solid #D8E1DE!important;
  cursor: not-allowed!important;
  opacity: 1;
  box-shadow: none!important;
  transform: none;
}


.continue-btn:disabled {
  background: #EEF2F1 !important;
  color: #9AA9A5 !important;
  border: 1px solid #D8E1DE !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.continue-btn:hover:not(:disabled) {
  background: #0B4D45 !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(1, 62, 55, 0.18) !important;
  transform: translateY(-2px) !important;
}

#contactForm label.error {
  color: #dc3545!important;
  font-size: 13px;
  margin-top: 5px;
  display: block;
  font-weight: 400;
} 



.subscribe-box {
  padding: 15px;
  background: linear-gradient(90deg, #d3f2ff, #fff);
  border: 2px solid #0066b3;
  border-radius: 20px;
  margin-top: 25px;
}



/* ===============================
   Premium Product Details
================================ */

.agc-product-info{
  margin-top:28px;
}

.agc-product-info product{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Product Title + Price */

.agc-title{
  margin:0;
  font-size: 17px;
  line-height:1.35;
  font-weight:700;
  color:#16382f;
}

.agc-product-info product>.d-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding: 18px 0;
  border-bottom:1px solid #ececec;
}

.product-price{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 18px;

  font-size:18px;
  font-weight:700;

  color:#0b7757;

  background:#f4fbf7;

  border:1px solid #d8e8df;

  border-radius:999px;

}

/* ===============================
 Bundle List
================================ */

.pd-purchase{
  border:1px solid #e8ece8;
  border-radius:16px;
  overflow:hidden;
}

.pd-packs ul{

  display:grid;

  grid-template-columns:1fr auto;

  align-items:center;

  gap:18px;

  margin:0;

  padding:18px 22px;

  list-style:none;

  border-bottom:1px solid #efefef;

  transition:.25s;

}

.pd-packs ul:last-child{
  border-bottom:none;
}

.pd-packs ul:hover{

  background:#fafdfb;

}

/* Variant Name */

.pd-pack__label{

  font-size:15px;

  font-weight:500;

  color:#404b48;

  line-height:1.6;

}

/* Price */

.pd-pack__price{

  font-size:16px;

  font-weight:700;

  color:#0b7757;

  white-space:nowrap;

}

/* ===============================
 Responsive
================================ */

@media(max-width:768px){

.agc-title{

  font-size:24px;

}

.product-price{

  font-size:17px;

}

.pd-packs ul{

  grid-template-columns:1fr;

  gap:10px;

  padding:16px;

}

.pd-pack__price{

  font-size:16px;

}

}


/* ===============================
   Premium Product Details
================================ */

.agc-product-info{
  margin-top:28px;
}

.agc-product-info product{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Product Title + Price */

.agc-title{
  margin:0;
  font-size:30px;
  line-height:1.35;
  font-weight:700;
  color:#16382f;
}

.agc-product-info product>.d-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding-bottom:18px;
  border-bottom:1px solid #ececec;
}

.product-price{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 18px;

  font-size:18px;
  font-weight:700;

  color:#0b7757;

  background:#f4fbf7;

  border:1px solid #d8e8df;

  border-radius:999px;

}

/* ===============================
 Bundle List
================================ */

.pd-purchase{
  border:1px solid #e8ece8;
  border-radius:16px;
  overflow:hidden;
}

.pd-packs ul{

  display:grid;

  grid-template-columns:1fr auto;

  align-items:center;

  gap:18px;

  margin:0;

  padding:18px 22px;

  list-style:none;

  border-bottom:1px solid #efefef;

  transition:.25s;

}

.pd-packs ul:last-child{
  border-bottom:none;
}

.pd-packs ul:hover{

  background:#fafdfb;

}

/* Variant Name */

.pd-pack__label{

  font-size:15px;

  font-weight:500;

  color:#404b48;

  line-height:1.6;

}

/* Price */

.pd-pack__price{

  font-size:16px;

  font-weight:700;

  color:#0b7757;

  white-space:nowrap;

}

/* ===============================
 Responsive
================================ */

@media(max-width:768px){

.agc-title{

  font-size:24px;

}

.product-price{

  font-size:17px;

}

.pd-packs ul{

  grid-template-columns:1fr;

  gap:10px;

  padding:16px;

}

.pd-pack__price{

  font-size:16px;

}

}
.contact-info__icon i,.contact-info__icon span {
    color: #5b3573;
    font-size: 20px;
}

.contact-info .media-body h3 {
    font-size: 16px;
    margin-bottom: 0
}

.contact-info .media-body h3 a {
    color: #222
}

.contact-info .media-body p {
    color: #999999
}

.form-contact .form-group {
    margin-bottom: 10px
}

.form-contact .form-control {
    border-radius: 0;
    height: 40px;
    padding-left: 18px;
    border-color: transparent;
    background: rgba(130,139,178,0.1)
}

.form-contact .form-control:focus {
    outline: 0;
    box-shadow: none
}

.form-contact .form-control::placeholder {
    font-size: 14px;
    color: #999999
}

.form-contact .different-control {
    height: 100% !important
}

.form-contact button {
    border: 0
}