/* =============================================
   LUXE – Stylesheet
   Fonts : Playfair Display (headings) | Inter (body)
   Grid  : 100% Bootstrap 5 — no custom flex/grid
   Gutter: 64px via --page-gutter on .luxe-container
   ============================================= */

/* ── CSS Custom Properties ─────────────────── */
:root{
  /* Brand */
  --p1:#003cbf;
  --p2:#009ad0;
  --s1:#002dbc;
  --s2:#006ec8;

  /* Neutrals */
  --white:#ffffff;
  --bg-soft:#f8fafc;
  --bg-tint:#eef3ff;
  --bg-cyan:#e6f4ff;
  --ink-900:#111827;
  --ink-700:#374151;
  --ink-500:#6b7280;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--p1), var(--p2));
  --grad-support: linear-gradient(135deg, var(--s1), var(--s2));
  --grad-radial: radial-gradient(circle at 20% 20%, rgba(0,154,208,.18), transparent 55%),
                 radial-gradient(circle at 85% 75%, rgba(0,60,191,.16), transparent 50%);
  --grad-mesh: linear-gradient(120deg, #00186b 0%, #003cbf 38%, #0077bd 72%, #00b6d6 100%);

  /* Elevation */
  --shadow-sm: 0 2px 10px rgba(17,24,39,.06);
  --shadow-md: 0 12px 32px rgba(0,60,191,.12);
  --shadow-lg: 0 24px 60px rgba(0,45,188,.18);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(0,154,208,.35);

  /* Radii */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .45s;

  /* Type */
  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --c-secondary: #0F172A;
  --c-text: #111827;
  --c-light: #F8FAFC;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --c-accent: #3B82F6;
  --gradient-radial-glow: radial-gradient(circle at 30% 30%, rgba(59,130,246,.35), transparent 60%);
}

/* ==========================================================================
   BASE
   ========================================================================== */
   *{ box-sizing:border-box; }
   html{ scroll-behavior:smooth; }
   body{
     font-family: var(--font-body);
     color: var(--ink-700);
     background: var(--white);
     overflow-x:hidden;
     -webkit-font-smoothing:antialiased;
   }
   h1,h2,h3,h4,h5,.font-head{
     font-family: var(--font-head);
     color: var(--ink-900);
     letter-spacing:-0.02em;
     font-weight:600;
   }
   p{ line-height:1.7; }
   a{ text-decoration:none; color:inherit; }
   ::selection{ background:var(--p2); color:#fff; }
 
   :focus-visible{
     outline: 2px solid var(--p2);
     outline-offset: 3px;
     border-radius: 4px;
   }
 
   @media (prefers-reduced-motion: reduce){
     *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
   }

.section-pad{ padding: clamp(64px, 9vw, 128px) 0; }

.section-pad .float-card.fc3 {
  width: 85px;
}

.section-pad .float-card img{
  width: 100%;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head);
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--p1);
  background: var(--bg-tint);
  padding:8px 18px; border-radius:var(--r-pill);
  margin-bottom:18px;
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--grad-brand);
}
.section-title{
  font-size:clamp(30px, 3.6vw, 44px);
  line-height:1.12;
  margin-bottom:16px;
}
.section-sub{
  color:var(--ink-500);
  font-size:clamp(16px,1.6vw,18px);
  max-width:620px;
}
.gradient-text{
  background: var(--grad-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ==========================================================================
   ADVANCED CSS ANIMATIONS
   ========================================================================== */

/* --- Scroll Reveal System --- */
.reveal{
  opacity:1;
  transform:translateY(50px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.reveal-left{
  transform:translateX(-60px) translateY(0);
}
.reveal.reveal-right{
  transform:translateX(60px) translateY(0);
}
.reveal.reveal-scale{
  transform:scale(0.85) translateY(0);
}
.reveal.revealed{
  opacity:1;
  transform:translateY(0) translateX(0) scale(1);
}

/* --- Shimmer gradient text --- */
.shimmer-text{
  background: linear-gradient(
    90deg,
    var(--ink-900) 0%,
    var(--ink-900) 40%,
    var(--p2) 50%,
    var(--p1) 55%,
    var(--ink-900) 65%,
    var(--ink-900) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: shimmerSweep 4s ease-in-out infinite;
}
@keyframes shimmerSweep{
  0%{ background-position:100% 0; }
  100%{ background-position:-100% 0; }
}

/* =============================================
   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
   ============================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: box-shadow .3s ease, background .3s ease;
  box-shadow: var(--shadow-md);
}
.topbar {
  background: var(--c-secondary);
  color: #CBD5E1;
  font-size: .8125rem;
  padding: .5rem 0;
}
.topbar a {
  color: #fff;
  font-weight: 600;
}
.luxe-nav {
  width: 100%;
  z-index: 9999999!important;
  height: auto;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0px;
  position: relative!important;
  background-color: transparent!important;
}
.logo_wrapper {
  display: none!important;
}
/* Vertically centre the inner Bootstrap container */
.luxe-nav .container-fluid {
  height: 100%;
}
.navbar-brand{
  padding: 0;
}
.luxe-container .menu_wrapper .luxe-logo {
  margin: 0;
  padding: 0;
}
.luxe-logo img{
  max-height: 60px;
}
.luxe-nav-link {
  color: var(--c-text)!important;
  font-weight: 600;
  font-size: .9375rem;
  padding: .5rem .9rem !important;
  border-radius: 999px;
  position: relative;
  transition: color .2s ease, background .2s ease;
}
.luxe-nav-link:hover { 
    color: var(--c-primary);
    background: var(--c-light);
    background: rgba(0, 89, 196, .08);
 }

/* Icon buttons – no Bootstrap component, kept minimal */
.icon-btn {
  background: none;
  border: none;
  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.
   ============================================= */

.featured-section {
  background: var(--color-bg);
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

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

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

.view-all-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 1px;
  transition: opacity 0.2s;
}
.view-all-link:hover { opacity: 0.5; }

/* 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: 400;
  color: var(--color-text);
  line-height: 1.4;
}
.product-color {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-light);
  letter-spacing: 1.5px;
}
.product-price {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  white-space: nowrap;
}


/* =============================================
   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(--color-bg-alt);
}

/* 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.2px;
  color: var(--color-text-light);
  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(--color-text);
  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(--color-text);
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
.philosophy-link:hover { opacity: 0.5; }

/* 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
   ============================================= */



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

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

.footer-col a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--color-text); }

.footer-bottom {
  border-top: 1px solid var(--color-border);
  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(--color-text-muted);
}

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

/* =============================================
   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);
}

.filter-btn--active {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}


/* =============================================
   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(--color-bg-alt);
  padding: 120px 0;
}

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

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

.newsletter-input {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid #C4C7C3;
  border-right: none;
  padding: 14px 18px;
  outline: none;
  transition: border-color 0.2s;
  margin-right: 15px;
}
.newsletter-input::placeholder { color: var(--color-text-muted); }
.newsletter-input:focus { border-color: var(--color-text); }

.newsletter-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 14px 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.newsletter-btn:hover { background: #333; }


/* 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;}
}




/* --- Hero text reveal animation --- */
.anim-text-reveal{
  animation: textRevealUp .9s var(--ease) both;
}
@keyframes textRevealUp{
  from{ opacity:0; transform:translateY(40px) skewY(2deg); }
  to{ opacity:1; transform:translateY(0) skewY(0); }
}

/* --- Hero fade up --- */
.anim-fade-up{
  animation: fadeUpIn .8s var(--ease) both;
}
@keyframes fadeUpIn{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}

/* --- Glow pulse on CTA buttons --- */
.btn-grad{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:600; font-size:15px;
  color:#fff !important;
  background: var(--grad-brand);
  border:none;
  padding:15px 30px;
  border-radius:var(--r-pill);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  overflow:hidden;
  isolation:isolate;
}
.btn-grad::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  background: var(--grad-brand);
  z-index:-2;
  opacity:0;
  filter:blur(14px);
  animation: glowPulse 2.5s ease-in-out infinite;
}
.btn-grad::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, var(--s1), var(--p2));
  opacity:0; transition:opacity var(--dur) var(--ease);
  z-index:-1;
}
.btn-grad:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,60,191,.32); color:#fff; }
.btn-grad:hover::after{ opacity:1; }
.btn-grad:hover::before{ opacity:.7; }
.btn-grad .ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
  transform:scale(0); animation:ripple .6s var(--ease);
  pointer-events:none;
}
@keyframes ripple{ to{ transform:scale(3); opacity:0; } }

@keyframes glowPulse{
  0%, 100%{ opacity:0; transform:scale(.95); }
  50%{ opacity:.5; transform:scale(1.05); }
}

/* --- Gradient border spin on feature cards --- */
.gradient-border-card{
  position:relative;
  z-index:1;
}
.gradient-border-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    var(--p1),
    var(--p2),
    var(--s2),
    var(--p1)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
              linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
  opacity:0;
  transition:opacity .5s ease;
  animation: rotateBorderAngle 4s linear infinite;
}
.gradient-border-card:hover::before{
  opacity:1;
}
@keyframes rotateBorderAngle{
  to{ --border-angle:360deg; }
}
/* @property for animation of custom property */
@property --border-angle{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* --- 3D Perspective Tilt on cards --- */
.tilt-card{
  perspective:800px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tilt-card:hover{
  transform:translateY(-10px) rotateX(3deg) rotateY(-3deg);
  box-shadow: 0 30px 60px rgba(0,45,188,.22), 0 0 0 1px rgba(0,154,208,.1);
}

/* --- Floating orbit for hero cards --- */
@keyframes floatOrbit1{
  0%{ transform:translate(0, 0) rotate(0deg); }
  25%{ transform:translate(10px, -20px) rotate(2deg); }
  50%{ transform:translate(-5px, -30px) rotate(-1deg); }
  75%{ transform:translate(-15px, -10px) rotate(1deg); }
  100%{ transform:translate(0, 0) rotate(0deg); }
}
@keyframes floatOrbit2{
  0%{ transform:translate(0, 0) rotate(0deg); }
  25%{ transform:translate(-12px, -15px) rotate(-2deg); }
  50%{ transform:translate(8px, -25px) rotate(1deg); }
  75%{ transform:translate(15px, -8px) rotate(-1deg); }
  100%{ transform:translate(0, 0) rotate(0deg); }
}
@keyframes floatOrbit3{
  0%{ transform:translate(0, 0) rotate(0deg); }
  25%{ transform:translate(15px, -10px) rotate(1deg); }
  50%{ transform:translate(-10px, -22px) rotate(-2deg); }
  75%{ transform:translate(-8px, -5px) rotate(1.5deg); }
  100%{ transform:translate(0, 0) rotate(0deg); }
}

/* --- Particle dots background --- */
.hero-particles{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: particleDrift 20s linear infinite;
}
@keyframes particleDrift{
  0%{ background-position:0 0; }
  100%{ background-position:40px 40px; }
}

/* --- Blob morph --- */
@keyframes blobMorph{
  0%, 100%{
    border-radius:42% 58% 63% 37% / 45% 55% 45% 55%;
    transform:translate(0,0) scale(1) rotate(0deg);
  }
  33%{
    border-radius:55% 45% 38% 62% / 60% 40% 60% 40%;
    transform:translate(20px,-25px) scale(1.06) rotate(4deg);
  }
  66%{
    border-radius:38% 62% 55% 45% / 35% 65% 35% 65%;
    transform:translate(-15px,15px) scale(1.03) rotate(-3deg);
  }
}

/* --- Infinite ticker marquee --- */
.ticker-section{
  background: var(--ink-900);
  padding:18px 0;
  overflow:hidden;
  position:relative;
}
.ticker-section::before,
.ticker-section::after{
  content:'';
  position:absolute;
  top:0; bottom:0;
  width:80px;
  z-index:2;
  pointer-events:none;
}
.ticker-section::before{
  left:0;
  background:linear-gradient(90deg, var(--ink-900), transparent);
}
.ticker-section::after{
  right:0;
  background:linear-gradient(-90deg, var(--ink-900), transparent);
}
.ticker-track{
  overflow:hidden;
  white-space:nowrap;
}
.ticker-content{
  display:inline-block;
  animation: tickerScroll 35s linear infinite;
}
.ticker-content span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 32px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:15px;
  color:rgba(255,255,255,.45);
  letter-spacing:.04em;
  text-transform:uppercase;
  transition: color .3s ease;
}
.ticker-content span:hover{
  color:rgba(255,255,255,.9);
}
.ticker-content span i{
  font-size:18px;
  color:var(--p2);
}
@keyframes tickerScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ==========================================================================
   BUTTONS — Additional
   ========================================================================== */

.btn-glass{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:600; font-size:15px;
  color:var(--ink-900) !important;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,.6);
  padding:14px 28px;
  border-radius:var(--r-pill);
  transition: all var(--dur) var(--ease);
}
.btn-glass:hover{ background:#fff; transform:translateY(-3px); box-shadow:var(--shadow-sm); color:var(--ink-900); }
.btn-glass.on-dark{
  color:#fff !important;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}
.btn-glass.on-dark:hover{ background:rgba(255,255,255,.2); color:#fff; }

.btn-outline-grad{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:600; font-size:14px;
  padding:12px 24px; border-radius:var(--r-pill);
  background:#fff; color:var(--p1) !important;
  border:1.5px solid var(--bg-tint);
  transition: all var(--dur) var(--ease);
}
.btn-outline-grad:hover{ border-color:var(--p2); box-shadow:var(--shadow-sm); transform:translateY(-2px); color:var(--p1); }

/* animated underline link */
.link-underline{
  position:relative; font-weight:600; color:var(--p1);
  padding-bottom:2px;
}
.link-underline::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--grad-brand); transform:scaleX(0); transform-origin:right;
  transition: transform .4s var(--ease);
}
.link-underline:hover::after{ transform:scaleX(1); transform-origin:left; }

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

@media (max-width: 991px){
  .navbar-collapse.show,
  .navbar-collapse.collapsing{
    background: rgb(255 255 255 / 97%);
        backdrop-filter: blur(16px);
        padding: 10px 22px 18px;
        box-shadow: var(--shadow-lg);
  }

  .navbar-collapse.show .nav-link-custom,
  .navbar-collapse.collapsing .nav-link-custom{
    color:#fff !important;
    display:block;
    padding:10px 0;
    margin:0;
  }
  .navbar-collapse.show .nav-link-custom::after,
  .navbar-collapse.collapsing .nav-link-custom::after{ display:none; }
}

/* #mainHeader{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  padding:22px 0;
  transition: all .4s var(--ease);
  background:transparent;
} */
#mainHeader.scrolled{
  padding:12px 0;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 30px rgba(17,24,39,.06);
}
.brand-logo{
  font-family:var(--font-head); font-weight:700; font-size:22px;
  color:#fff; display:flex; align-items:center; gap:10px;
  transition: color .3s ease;
}
#mainHeader.scrolled .brand-logo{ color:var(--ink-900); }
.brand-logo .mark{
  width:38px; height:38px; border-radius:11px;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px;
  box-shadow: var(--shadow-md);
  transition: transform .4s var(--ease);
}
.brand-logo:hover .mark{
  transform:rotate(-10deg) scale(1.1);
}
.nav-link-custom{
  font-family:var(--font-head); font-weight:500; font-size:15px;
  color:rgba(255,255,255,.88); margin:0 14px; position:relative;
  transition:color .3s ease;
}
#mainHeader.scrolled .nav-link-custom{ color:var(--ink-700); }
.nav-link-custom::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:var(--grad-brand); transition:width .3s var(--ease);
}
.nav-link-custom:hover::after,
.nav-link-custom.active::after{ width:100%; }
.nav-link-custom:hover{ color:#fff; }
#mainHeader.scrolled .nav-link-custom:hover{ color:var(--p1); }

.header-icon-btn {
  width: 42px!important;
  height: 42px;
  border-radius: 50%;
  display: flex!important;
  align-items: center;
  justify-content: center;
  background: var(--bg-tint)!important;
  color: var(--p1)!important;
  border-color: transparent!important;
  transition: all .3s var(--ease);
  position: relative!important;
}
#mainHeader.scrolled .header-icon-btn{
  background: var(--bg-tint); color:var(--p1); border-color:transparent;
}
.header-icon-btn:hover{ transform:translateY(-2px) scale(1.05); box-shadow:var(--shadow-sm); }
.cart-count{
  position:absolute; top:-4px; right:-4px;
  width:18px; height:18px; border-radius:50%;
  background:var(--s2); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.position-static {
  display: flex;
  width: 70%;
}
/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  background: var(--grad-mesh);
}
.hero::before{
  content:''; position:absolute; inset:0; background: var(--grad-radial);
  z-index:0;
}
.hero-blob{
  position:absolute; filter:blur(70px); opacity:.5;
  animation: blobMorph 14s ease-in-out infinite;
}
.hero-blob.b1{ width:420px; height:420px; background:#00e0ff; top:-120px; right:-80px; }
.hero-blob.b2{ width:360px; height:360px; background:#003cbf; bottom:-140px; left:-100px; animation-delay:-6s; }

/* Bootstrap carousel overrides for hero */
.hero > .carousel{
  height:100vh;
  z-index:1;
}
.hero > .carousel > .carousel-inner,
.hero > .carousel > .carousel-inner > .carousel-item{
  height:100%;
}
.hero-slide{
  height:100vh;
  display:flex;
  align-items:center;
  padding-top:40px;
  position:relative;
  z-index:1;
}

/* Re-trigger text animations on carousel slide */
.carousel-item.active .anim-text-reveal{
  animation: textRevealUp .9s var(--ease) both;
}
.carousel-item.active .anim-fade-up{
  animation: fadeUpIn .8s var(--ease) both;
}

.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  color:#fff; font-size:13px; font-weight:600;
  padding:8px 16px; border-radius:var(--r-pill);
  margin-bottom:22px;
  animation: fadeUpIn .6s var(--ease) both;
}
.hero-badge .dot{
  width:7px; height:7px; border-radius:50%;
  background:#3ee08a;
  box-shadow:0 0 0 4px rgba(62,224,138,.25);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(62,224,138,.25); }
  50%{ box-shadow:0 0 0 8px rgba(62,224,138,.1); }
}
.hero-title{
  font-size:clamp(38px, 5.2vw, 68px);
  color:#fff; line-height:1.06; margin-bottom:22px;
}
.hero-title .line{ display:block; overflow:hidden; }
.gradient-text-hero{
  background:linear-gradient(135deg,#7fe7ff,#fff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-text{
  color:rgba(255,255,255,.82); font-size:18px; max-width:520px; margin-bottom:34px;
}
.hero-cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:46px; }

.hero-visual{ position:relative; height:520px; }
.float-card{
  position:absolute;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-radius:var(--r-md);
  box-shadow: var(--shadow-glow);
  padding:18px 20px;
  color:#fff;
}
.float-card.fc1{ top:6%; left:2%; animation: floatOrbit1 7s ease-in-out infinite; }
.float-card.fc2{ bottom:14%; left:22%; width:190px; animation: floatOrbit2 8s ease-in-out infinite; }
.float-card.fc3{ top: 68%;
  right: -67px; width:200px; animation: floatOrbit3 9s ease-in-out infinite; }

.hero-book-stack{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:230px; height:300px;
}
.stack-cover {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 10, 40, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: #fff;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  will-change: transform;
}

.stack-cover.c1 {
  background: var(--grad-brand);
  transform: rotate(-8deg) translate(-45px, 10px);
  z-index: 1;
  opacity: .85;
}

.stack-cover.c2 {
  background: linear-gradient(135deg, #00b6d6, #003cbf);
  transform: rotate(8deg) translate(45px, -10px);
  z-index: 2;
  opacity: .92;
}

.stack-cover.c3 {
  background: #fff;
  color: var(--p1);
  transform: rotate(0deg) translate(0, 0);
  z-index: 3;
  box-shadow: 0 40px 80px rgba(0, 10, 40, .55);
}

.stack-cover img {
  width: 100%;
  display: block;
}

/* Hover on parent */
.hero-book-stack:hover .stack-cover.c1 {
  transform: rotate(-20deg) translate(-70px, 18px);
}

.hero-book-stack:hover .stack-cover.c2 {
  transform: rotate(20deg) translate(70px, -18px);
}

.hero-book-stack:hover .stack-cover.c3 {
  transform: scale(1.05) translateY(-10px);
}


/* Hero carousel indicators */
.hero-indicators{
  position:absolute; bottom:38px; left:0; width:100%;
  display:flex; justify-content:center; gap:10px; z-index:5;
}
.hero-indicators button{
  width: 34px !important;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3) !important;
  border: none !important;
  transition: all .4s var(--ease);
  padding: 0 !important;
  cursor: pointer !important;
}
.hero-indicators button.active{
  background:#fff; width:50px;
}

.scroll-cue{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:12px; text-align:center; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.scroll-cue .line{
  width:1px; height:34px;
  background:linear-gradient(#fff,transparent);
  animation:scrollLine 1.8s infinite;
}
@keyframes scrollLine{
  0%{ transform:scaleY(0); transform-origin:top;}
  50%{transform:scaleY(1); transform-origin:top;}
  51%{transform-origin:bottom;}
  100%{transform:scaleY(0); transform-origin:bottom;}
}

.benefits{
  background-color: var(--bg-cyan);
}

/* ==========================================================================
   FEATURE CARDS
   ========================================================================== */
.feature-card{
  background:#fff; border-radius:var(--r-lg);
  padding:34px 28px; height:100%;
  border:1px solid var(--bg-tint);
  transition: all var(--dur) var(--ease);
  position:relative; overflow:hidden;
}
.feature-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.feature-icon{
  width:58px; height:58px; border-radius:16px;
  background:var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; margin-bottom:22px;
  transition: transform var(--dur) var(--ease);
}
.feature-card:hover .feature-icon{ transform:rotate(-8deg) scale(1.08); }
.feature-card h5{ font-size:20px; margin-bottom:10px; }
.feature-card p{ font-size:15px; color:var(--ink-500); margin:0; }

/* ==========================================================================
   EBOOK PRODUCT CARDS
   ========================================================================== */
.ebook-card{
  background:#fff; border-radius:var(--r-lg);
  overflow:hidden; height:100%;
  border:1px solid var(--bg-tint);
  transition: all var(--dur) var(--ease);
  position:relative;
}
.ebook-card:hover{ box-shadow:var(--shadow-lg); }
.ebook-cover{
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
}
.cover-img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease), filter .7s var(--ease);
}
.ebook-card:hover .cover-img{
  transform:scale(1.08);
}
.cover-overlay{
  position:absolute; inset:0;
  opacity:.15;
  mix-blend-mode:overlay;
  transition: opacity .5s ease;
}
.ebook-card:hover .cover-overlay{
  opacity:.05;
}

.ebook-cover .cover-fill{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:52px; color:rgba(255,255,255,.92);
  transition: transform .6s var(--ease);
}
.ebook-card:hover .cover-fill{ transform:scale(1.08); }

.ebook-body{ padding:20px 20px 22px; }
.ebook-body h6{ font-size: 15px;
  margin-bottom: 10px;
  line-height: 1.4;
  color: #000; }
.ebook-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.price-now{ font-family:var(--font-head); font-weight:700; font-size:19px; color:var(--ink-900); }
.price-old{ font-size:13px; color:var(--ink-500); text-decoration:line-through; margin-left:6px; }
.add-cart-pill{
  font-family:var(--font-head); font-weight:600; font-size:13px;
  padding:9px 16px; border-radius:var(--r-pill);
  background:var(--bg-tint); color:var(--p1); border:none;
  transition: all .3s ease;
  width: auto;
}
.add-cart-pill:hover{ background:var(--grad-brand); color:#fff; }

/* cover color variety for blog overlays */
.cover-1{ background:linear-gradient(150deg,#003cbf,#009ad0); }
.cover-2{ background:linear-gradient(150deg,#002dbc,#006ec8); }
.cover-3{ background:linear-gradient(150deg,#0b1948,#003cbf); }
.cover-4{ background:linear-gradient(150deg,#005fa8,#00cfe0); }
.cover-5{ background:linear-gradient(150deg,#001b6b,#0091c9); }
.cover-6{ background:linear-gradient(150deg,#00308f,#00b6d6); }

/* ==========================================================================
   PRODUCT SLIDER
   ========================================================================== */
.product-slider-wrapper{
  position:relative;
  padding:0 60px;
}
.product-slider-viewport{
  overflow:hidden;
  border-radius:var(--r-sm);
}
.product-slider-track{
  display:flex;
  transition: transform .65s var(--ease);
  will-change:transform;
}
.product-slide{
  flex:0 0 30%;
  padding:0 12px;
  min-width:0;
}

.product-slide .ebook-cover{
  width: 60%;
  margin: auto;
}

.slider-btn{
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  width: 48px !important;
  height: 48px;
  border-radius: 50%;
  background: #fff !important;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--bg-tint) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--p1) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  transition: all .35s var(--ease);
  z-index: 3;
}
.slider-btn:hover{
  background:var(--grad-brand);
  color:#fff;
  transform:translateY(-50%) scale(1.08);
  box-shadow:var(--shadow-lg);
}
.slider-btn.disabled{
  opacity:.3;
  pointer-events:none;
}
.slider-prev{ left:0; }
.slider-next{ right:0; }

.slider-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:28px;
}
.slider-dots .dot{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--bg-tint);
  border:2px solid transparent;
  cursor:pointer;
  transition:all .35s var(--ease);
}
.slider-dots .dot.active{
  background:var(--grad-brand);
  border-color:var(--p2);
  transform:scale(1.25);
  box-shadow:0 0 0 4px rgba(0,154,208,.2);
}

@media (max-width: 991px){
  .product-slide{ flex:0 0 50%; }
  .product-slider-wrapper{ padding:0 50px; }
}
@media (max-width: 575px){
  .product-slide{ flex:0 0 100%; }
  .product-slider-wrapper{ padding:0 44px; }
}

/* ==========================================================================
   WHY CHOOSE US / ABOUT WRAP
   ========================================================================== */
.why-wrap{
  background: var(--ink-900);
  border-radius: var(--r-lg);
  position:relative; overflow:hidden;
  padding: clamp(40px,6vw,80px);
  z-index: 2;
}
.why-wrap::before{
  content:''; position:absolute; inset:0; background:var(--grad-radial); opacity:.7; z-index: -1;
}
.why-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:30px 30px;
  animation: particleDrift 25s linear infinite;
  z-index: -1;
}
#about .float-card.fc1{
  top: -34%;
}

#about .why-wrap .hero-visual{
  height: 170px;
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter-box{
  background: var(--grad-mesh);
  border-radius: var(--r-lg);
  padding: clamp(40px,6vw,72px);
  position:relative; overflow:hidden; text-align:center;
}
.newsletter-box::before{ content:''; position:absolute; inset:0; background:var(--grad-radial); }
.newsletter-box::after{
  content:'';
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:35px 35px;
}
.newsletter-box h2, .newsletter-box p{ position:relative; z-index:1; color:#fff; }
.newsletter-form{
  position:relative; z-index:1;
  display:flex; gap:10px; max-width:520px; margin:30px auto 0;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  padding:8px; border-radius:var(--r-pill); backdrop-filter:blur(10px);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.newsletter-form:focus-within{
  border-color:rgba(255,255,255,.5);
  box-shadow:0 0 30px rgba(0,154,208,.25);
}
.newsletter-form input{
  flex:1; background:transparent; border:none; color:#fff; padding:10px 16px; font-size:15px;
}
.newsletter-form input::placeholder{ color:rgba(255,255,255,.6); }
.newsletter-form input:focus{ outline:none; box-shadow:none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{ background:var(--ink-900); color:rgba(255,255,255,.65); padding-top:80px; }
footer#contact .d-flex{
  align-items: flex-start;
}
footer h6{ color:#fff; font-family:var(--font-head); margin-bottom:22px; }
footer a{ color:rgba(255,255,255,.6); transition:color .25s ease; display:inline-block; margin-bottom:10px; }
footer a:hover{ color:#fff; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center;
  margin:0 8px 0 0;
}
.footer-social a:hover{ background:var(--grad-brand); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:56px; padding:24px 0;
  font-size:13.5px;
}
footer .product-name{
  color: #fff;
  height: 0;
}
/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
#backToTop{
  position:fixed; bottom:28px; right:28px; z-index:999;
  width:48px; height:48px; border-radius:50%;
  background:var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); border:none;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition: all .35s var(--ease);
  cursor:pointer;
}
#backToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
#backToTop:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px){
  .hero-visual{ display:none; }
  .hero-slide{ padding-top:120px; }
}
@media (max-width: 767px){
  .hero-cta-row{ flex-direction:column; }
  .hero-cta-row .btn-grad, .hero-cta-row .btn-glass{ width:100%; justify-content:center; }
  .newsletter-form{ flex-direction:column; border-radius:var(--r-md); }
  .ticker-content span{ padding:0 20px; font-size:13px; }
}
/* ==========================================================================
   SHOP INTRO BANNER (formerly HERO)
   ========================================================================== */
   .shop-intro-banner {
    position: relative;
    overflow: hidden;
    padding: 7.5rem 0 0 0;
    background: linear-gradient(180deg, var(--c-light) 0%, #EFF4FC 100%);
    min-height: 390px;
  }
  
  .shop-intro-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    z-index: 0;
  }
  
  .shop-intro-shape-1 {
    width: 420px;
    height: 420px;
    background: var(--c-accent);
    top: -160px;
    right: -120px;
    opacity: .25;
  }
  
  .shop-intro-shape-2 {
    width: 280px;
    height: 280px;
    background: var(--c-primary);
    bottom: -100px;
    left: -80px;
    opacity: .2;
  }
  
  .shop-intro-shape-3 {
    width: 180px;
    height: 180px;
    background: #60A5FA;
    top: 40%;
    right: 20%;
    opacity: .15;
    animation: float-slow 9s ease-in-out infinite;
  }
  
  @keyframes float-slow {
  
    0%,
    100% {
      transform: translateY(0);
    }
  
    50% {
      transform: translateY(-24px);
    }
  }
  
  .shop-label-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(0, 89, 196, .08);
    color: var(--s2);
    font-weight: 600;
    font-size: .8125rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
  }
  
  .shop-label-pill.shop-label-light {
    background: rgba(255, 255, 255, .15);
    color: #fff;
  }
  
  .shop-intro-heading {
    background: linear-gradient(90deg, var(--ink-900) 0%, var(--ink-900) 40%, var(--p2) 50%, var(--p1) 55%, var(--ink-900) 65%, var(--ink-900) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerSweep 4s ease-in-out infinite;
  }
  
  .shop-intro-tagline {
    position: relative;
    z-index: 1;
    font-size: 1.125rem;
    color: #475569;
    max-width: 480px;
    margin-bottom: 2rem;
  }
  
  .shop-intro-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
  }
  
  .btn-shop-explore {
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 600;
    padding: .85rem 1.75rem;
    border-radius: 999px;
    box-shadow: var(--shadow-glow);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  
  .btn-shop-explore:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 89, 196, .32);
    color: #fff;
  }
  
  .btn-shop-outline {
    background: #fff;
    color: var(--c-secondary);
    font-weight: 600;
    padding: .85rem 1.75rem;
    border-radius: 999px;
    border: 1px solid var(--bg-cyan);
    transition: border-color .2s ease, transform .2s ease;
  }
  
  .btn-shop-outline:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    transform: translateY(-3px);
  }
  
  .shop-intro-stats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 2.25rem;
  }
  
  .shop-intro-stats div {
    display: flex;
    flex-direction: column;
  }
  
  .shop-intro-stats strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--c-secondary);
  }
  
  .shop-intro-stats span {
    font-size: .8125rem;
    color: #64748B;
  }
  
  .shop-intro-glow {
    position: absolute;
    inset: 10%;
    background: var(--gradient-radial-glow);
    border-radius: 50%;
    z-index: 0;
  }
  
  .shop-float-img {
    position: absolute;
    width: 180px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 6px solid #fff;
    z-index: 1;
  }

  .shop-float-img img{
    width: 100%;
  }
  
  .shop-float-img-1 {
    top: 0;
    left: 40%;
    animation: float-a 6s ease-in-out infinite;
  }
  
  .shop-float-img-2 {
    top: 38%;
    right: 0;
    width: 200px;
    animation: float-b 7s ease-in-out infinite;
  }
  
  .shop-float-img-3 {
    bottom: 0;
    left: 25%;
    width: 160px;
    animation: float-c 8s ease-in-out infinite;
  }
  
  @keyframes float-a {
  
    0%,
    100% {
      transform: translateY(0) rotate(-3deg);
    }
  
    50% {
      transform: translateY(-18px) rotate(2deg);
    }
  }
  
  @keyframes float-b {
  
    0%,
    100% {
      transform: translateY(0) rotate(2deg);
    }
  
    50% {
      transform: translateY(20px) rotate(-2deg);
    }
  }
  
  @keyframes float-c {
  
    0%,
    100% {
      transform: translateY(0) rotate(-1deg);
    }
  
    50% {
      transform: translateY(-14px) rotate(3deg);
    }
  }

  #why{
    background: #f8f2f2;
  }

  /***Shop**/

  /* ==========================================================================
   CATALOG TOOLBAR / FILTERS
   ========================================================================== */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--c-light);
  border: 1px solid var(--bg-cyan);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}

.catalog-toolbar-left,
.catalog-toolbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.catalog-result-count strong {
  color: var(--c-primary);
}

.btn-catalog-filter-mobile {
  background: #fff;
  border: 1px solid var(--bg-cyan);
  border-radius: 999px;
  padding: .5rem 1rem;
  font-weight: 600;
}

.catalog-sort-select {
  border-radius: 999px;
  border: 1px solid var(--bg-cyan);
  padding: .5rem 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  background-color: #fff;
}

.catalog-view-toggle {
  display: flex;
  background: #fff;
  border: 1px solid var(--bg-cyan);
  border-radius: 999px;
  padding: 3px;
}

.catalog-view-btn {
  border: none;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #94A3B8;
  transition: background .2s ease, color .2s ease;
}

.catalog-view-btn.active {
  background: var(--gradient-primary);
  color: #fff;
}

.catalog-filter-panel {
  background: #fff;
  border: 1px solid var(--bg-cyan);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  position: sticky;
  top: 110px;
}

.catalog-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.btn-catalog-filter-reset {
  background: none;
  border: none;
  color: var(--c-primary);
  font-weight: 600;
  font-size: .8125rem;
}

.catalog-filter-group {
  padding: 1rem 0;
  border-bottom: 1px solid var(--bg-cyan);
}

.catalog-filter-group:last-child {
  border-bottom: none;
}

.catalog-filter-label {
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-secondary);
  margin-bottom: .75rem;
}

.form-check {
  margin-bottom: .5rem;
}

.form-check-label {
  font-size: .9rem;
  color: #374151;
}

.form-check-label span {
  color: #9CA3AF;
  font-size: .8125rem;
}

.form-check-input:checked {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
}

.catalog-price-range {
  accent-color: var(--c-primary);
}

.catalog-price-range-labels {
  font-size: .8125rem;
  color: #64748B;
  margin-top: .25rem;
}

.catalog-color-swatches {
  display: flex;
  gap: .6rem;
}

.catalog-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg-cyan);
  background: var(--swatch);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}

.catalog-swatch:hover,
.catalog-swatch.active {
  transform: scale(1.12);
  border-color: var(--c-primary);
}

.catalog-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.catalog-tag-chip {
  background: var(--c-light);
  border: 1px solid var(--bg-cyan);
  border-radius: 999px;
  font-size: .8125rem;
  padding: .35rem .85rem;
  color: #374151;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.catalog-tag-chip:hover,
.catalog-tag-chip.active {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
}

.catalog-featured-block {
  padding-top: 1rem;
}

.catalog-featured-mini {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.catalog-featured-mini img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
}

.catalog-featured-mini p {
  font-size: .85rem;
  margin: 0;
  color: #374151;
}

/* ==========================================================================
   CATALOG ITEM CARDS (formerly PRODUCT CARDS)
   ========================================================================== */
.catalog-item-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--bg-cyan);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
  transform: translateY(24px);
}

.catalog-item-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

.catalog-item-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 89, 196, .25);
}

.catalog-item-media {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--c-light);
}

.catalog-item-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .45s ease, transform .5s ease;
}

.catalog-img-hover {
  opacity: 0;
}

.catalog-item-card:hover .catalog-img-default {
  transform: scale(1.04);
}

.catalog-item-card:hover .catalog-img-hover {
  opacity: 1;
}

.catalog-item-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .3rem .65rem;
  border-radius: 999px;
  color: #fff;
}

.catalog-badge-new {
  background: var(--c-success);
}

.catalog-badge-sale {
  background: #EF4444;
}

.catalog-badge-bestseller {
  background: var(--gradient-primary);
}

.catalog-badge-premium {
  background: var(--c-secondary);
}

.catalog-wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(6px);
  color: var(--c-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.catalog-wishlist-btn:hover {
  background: #fff;
  color: #EF4444;
  transform: scale(1.08);
}

.catalog-wishlist-btn.is-active {
  color: #EF4444;
}

.catalog-wishlist-btn.is-active i::before {
  content: "\f415";
}

.btn-catalog-preview {
  position: absolute;
  left: 50%;
  bottom: -50px;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, .92);
  color: #fff;
  border: none;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 2;
  transition: bottom .3s ease;
}

.catalog-item-card:hover .btn-catalog-preview {
  bottom: 16px;
}

.catalog-sold-out-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--c-secondary);
  z-index: 3;
  backdrop-filter: blur(2px);
}

.catalog-item-info {
  padding: 1.1rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}

.catalog-item-type {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-primary);
  font-weight: 700;
}

.catalog-item-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-secondary);
  margin: 0;
}

.catalog-item-desc {
  font-size: .85rem;
  color: #64748B;
  margin: 0;
}

.catalog-item-rating {
  color: #F59E0B;
  font-size: .8125rem;
}

.catalog-item-rating span {
  color: #9CA3AF;
  margin-left: .25rem;
}

.catalog-item-pricing {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .25rem;
  flex-wrap: wrap;
}

.catalog-price-now {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--c-secondary);
}

.catalog-price-was {
  font-size: .875rem;
  color: #9CA3AF;
  text-decoration: line-through;
}

.catalog-discount-tag {
  background: rgba(239, 68, 68, .1);
  color: #EF4444;
  font-size: .6875rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 6px;
}

.btn-catalog-cart {
  margin-top: .6rem;
  background: var(--c-secondary);
  color: #fff;
  font-weight: 600;
  border: none;
  padding: .65rem 1rem;
  border-radius: 10px;
  transition: background .25s ease, transform .2s ease;
}

.btn-catalog-cart:hover:not(:disabled) {
  background: var(--gradient-primary);
  transform: translateY(-2px);
  color: #fff;
}

.btn-catalog-cart:disabled {
  background: #CBD5E1;
  cursor: not-allowed;
}

.btn-catalog-cart.is-added {
  background: var(--c-success);
}

/* List view */
.catalog-grid.list-view .catalog-item-col {
  flex: 0 0 100%;
  max-width: 100%;
}

.catalog-grid.list-view .catalog-item-card {
  flex-direction: row;
}

.catalog-grid.list-view .catalog-item-media {
  width: 220px;
  flex: 0 0 220px;
  aspect-ratio: auto;
}

.catalog-grid.list-view .catalog-item-info {
  flex: 1;
}

.catalog-empty-msg {
  padding: 3rem 0;
  color: #64748B;
  font-weight: 500;
}

.catalog-pagination .page-link {
  border: 1px solid var(--bg-cyan);
  color: var(--c-secondary);
  margin: 0 4px;
  border-radius: 10px;
  font-weight: 600;
}

.catalog-pagination .page-item.active .page-link {
  background: var(--gradient-primary);
  border-color: transparent;
}


/* ==========================================================================
   OFFCANVAS / MODAL
   ========================================================================== */
   .catalog-filter-offcanvas {
    width: 320px;
  }
  
  .btn-catalog-filter-reset-mobile {
    background: #fff;
    border: 1px solid var(--bg-cyan);
    font-weight: 600;
    margin-top: 1rem;
    border-radius: 10px;
    padding: .65rem;
  }
  
  .btn-catalog-filter-apply-mobile {
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 600;
    margin-top: .75rem;
    border-radius: 10px;
    padding: .65rem;
  }
  
  .shop-preview-modal {
    border-radius: var(--radius-lg);
    border: none;
    overflow: hidden;
  }
  
  .shop-preview-modal .btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    background: #fff;
    border-radius: 50%;
    padding: .5rem;
    opacity: 1;
  }
  
  .shop-preview-img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
  }
  
  .shop-preview-body {
    padding: 2.5rem 2rem;
  }
  
  .shop-preview-desc {
    color: #64748B;
    font-size: .9375rem;
    margin: 1rem 0;
  }
  
  .shop-preview-qty {
    margin: 1.25rem 0;
  }
  
  .shop-qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--bg-cyan);
    border-radius: 10px;
    width: 130px;
  }
  
  .shop-qty-stepper button {
    width: 36px;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: var(--c-secondary);
  }
  
  .shop-qty-stepper input {
    width: 100%;
    border: none;
    text-align: center;
    -moz-appearance: textfield;
  }
  
  .shop-qty-stepper input::-webkit-outer-spin-button,
  .shop-qty-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  
  /***********Contact************/

  * ==========================================================================
   CONTACT INFO CARDS
   ========================================================================== */
.col-lg-2-4{ flex:0 0 auto; width:20%; }

.info-card{
  background:#fff; border:1px solid var(--bg-cyan); border-radius:var(--radius-md);
  padding:1.75rem 1.5rem; height:100%; text-align:left;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transform:translateY(20px);
}

.info-card.reveal{ opacity:1; transform:translateY(0); }
.info-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(0,89,196,.25); }

.info-icon{
  width:48px; height:48px; border-radius:12px; background:rgba(0,89,196,.08); color:var(--c-primary);
  display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:1rem;
}
.info-card h3{ font-size:1rem; margin-bottom:.5rem; }
.info-card p{ font-size:.875rem; color:#64748B; margin:0; line-height:1.6; }
.info-card p a{ color:var(--c-primary); font-weight:600; }

.footer_product img{
  width: 100%;
}

.product-slide .ebook-body{
   padding-bottom: 0;
}




* ============================================
   SHOP INTRO BANNER
   ============================================ */
.shop-intro-banner {
    position: relative;
    padding: 80px 0 60px;
    background: var(--grad-mesh);
    overflow: hidden;
    isolation: isolate;
    z-index: 2;
}

.shop-intro-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-radial);
    opacity: 0.6;
    z-index: -1;
}

.shop-intro-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.shop-intro-shape-1 {
    width: 400px;
    height: 400px;
    top: -150px;
    right: -100px;
    background: rgba(255,255,255,.04);
}

.shop-intro-shape-2 {
    width: 250px;
    height: 250px;
    bottom: -80px;
    left: -60px;
    background: rgba(255,255,255,.03);
}

.shop-intro-shape-3 {
    width: 180px;
    height: 180px;
    top: 50%;
    right: 30%;
    background: rgba(255,255,255,.02);
    animation: pulse-shape 4s ease-in-out infinite;
}

@keyframes pulse-shape {
    0%, 100% { transform: scale(1); opacity: .3; }
    50% { transform: scale(1.2); opacity: .6; }
}

.shop-intro-breadcrumb {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--r-pill);
    padding: 6px 0px;
    display: inline-flex;
    border: 1px solid rgba(255,255,255,.08);
    margin-top: 20px;
}

.shop-intro-breadcrumb .breadcrumb-item {
    color: rgba(255,255,255,.7);
    font-size: 40px;
    font-weight: 500;
}

.shop-intro-breadcrumb .breadcrumb-item a {
    color: #000;
    transition: color var(--dur-fast) ease;
}

.shop-intro-breadcrumb .breadcrumb-item a:hover {
    color: var(--white);
}

.shop-intro-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.3);
    content: "›";
    font-size: 20px;
    line-height: 3;
}

.shop-intro-breadcrumb .breadcrumb-item.active {
    color: var(--white);
    font-weight: 600;
}

.shop-label-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 16px 6px 12px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.06);
    margin-bottom: 16px;
    letter-spacing: 0.3px;
}

.shop-label-pill i {
    font-size: 14px;
    color: #60a5fa;
}

.shop-intro-heading {
    position: relative;
    z-index: 1;
    font-family: var(--font-head);
    font-size: 52px;
    font-weight: 700;
    line-height: 1.08;
    color: var(--white);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.shop-intro-heading .text-gradient {
    background: linear-gradient(135deg, #60a5fa, #93bbfc, #60a5fa);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer-text 4s ease-in-out infinite;
}

@keyframes shimmer-text {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.shop-intro-tagline {
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255,255,255,.75);
    max-width: 480px;
    margin-bottom: 32px;
}

.hero-cta-row {
    position: relative;
    z-index: 1;
}

.btn-grad {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 36px;
    background: var(--grad-brand);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    text-decoration: none;
    box-shadow: var(--shadow-btn);
    position: relative;
    overflow: hidden;
}

.btn-grad::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 60%);
    opacity: 0;
    transition: opacity var(--dur-fast) ease;
}

.btn-grad:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,60,191,.40);
    color: var(--white);
}

.btn-grad:hover::before {
    opacity: 1;
}

.btn-grad i {
    font-size: 18px;
}

/* ===== Shop Intro Visual ===== */
.shop-intro-visual {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop-float-img {
    position: absolute;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
    border: 2px solid rgba(255,255,255,.10);
}

.shop-float-img-1 {
  width: 140px;
  top: -9px;
  left: 36%;
  animation: float-1 6s ease-in-out infinite;
}

.shop-float-img-2 {
  width: 160px;
  top: -100px;
  right: 12%;
    animation: float-2 7s ease-in-out infinite;
}

.shop-float-img-3 {
  width: 140px;
  bottom: -80px;
  left: 10%;
  animation: float-3 5s ease-in-out infinite;
}

@keyframes float-1 {
    0%, 100% { transform: translateY(0px) rotate(-3deg); }
    50% { transform: translateY(-16px) rotate(3deg); }
}

@keyframes float-2 {
    0%, 100% { transform: translateY(0px) rotate(4deg); }
    50% { transform: translateY(-20px) rotate(-4deg); }
}

@keyframes float-3 {
    0%, 100% { transform: translateY(0px) rotate(-2deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
}

.shop-intro-glow {
    position: absolute;
    width: 710px;
    height: 710px;
    top: -222%;
    right: 0;
    background: radial-gradient(circle, rgb(96 165 250 / 68%), #00000000 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ============================================
   SHOP CATALOG
   ============================================ */
.shop-catalog {
    background: var(--bg-soft);
    padding: 60px 0;
}

/* ============================================
   PRODUCT CARD - Enhanced
   ============================================ */
.coll-product-card {
    background: var(--white);
    border-radius: var(--r-card);
    padding: 20px 20px 24px;
    transition: all var(--dur) var(--ease);
    border: 1px solid rgba(0,0,0,.04);
    box-shadow: var(--shadow-card);
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.coll-product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-brand);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    border-radius: var(--r-card);
    pointer-events: none;
}

.coll-product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(0,60,191,.10);
}

.coll-product-card:hover::before {
    opacity: .03;
}

.coll-product-img-wrap {
    position: relative;
    border-radius: var(--r-image);
    overflow: hidden;
    background: var(--bg-tint);
    aspect-ratio: 1 / 1;
}

.coll-product-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: transform var(--dur) var(--ease);
}

.coll-product-card:hover .coll-product-img {
    transform: scale(1.04);
}

.coll-product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--dur) var(--ease);
}

.coll-product-name {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 12px 0 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}

.coll-product-price {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    color: var(--p1);
    margin: 0;
}

/* ===== Purchase Type Buttons ===== */
.purchase-type-group {
    gap: 8px;
    margin-top: 12px;
}

.purchase-type-btn {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    transition: all var(--dur-fast) var(--ease);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.purchase-type-btn.active {
    background: var(--grad-brand);
    color: var(--white);
    border-color: var(--p1);
    box-shadow: 0 2px 12px rgba(0,60,191,.20);
}

.purchase-type-btn:not(.active) {
    background: var(--bg-soft);
    color: var(--ink-500);
    border-color: rgba(0,0,0,.06);
}

.purchase-type-btn:not(.active):hover {
    background: var(--bg-tint);
    color: var(--p1);
    border-color: var(--p1);
}

/* ============================================
   LOAD MORE BUTTON
   ============================================ */
.load-more-btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    padding: 14px 48px;
    background: var(--white);
    color: var(--p1);
    border: 2px solid var(--p1);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.load-more-btn:hover {
    background: var(--grad-brand);
    color: var(--white);
    border-color: var(--p1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn);
}

/* ============================================
   PAGINATION
   ============================================ */
.products-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.products-pagination .page-item {
    display: inline-flex;
}

.products-pagination .page-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    padding: 10px 18px;
    background: var(--white);
    color: var(--ink-700);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--r-sm);
    transition: all var(--dur-fast) var(--ease);
    text-decoration: none;
    min-width: 44px;
    justify-content: center;
}

.products-pagination .page-link:hover {
    background: var(--bg-tint);
    color: var(--p1);
    border-color: var(--p1);
    transform: translateY(-1px);
}

.products-pagination .active .page-link {
    background: var(--grad-brand);
    color: var(--white);
    border-color: var(--p1);
    box-shadow: 0 4px 16px rgba(0,60,191,.25);
}

.products-pagination .disabled .page-link {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.products-pagination .page-link-prev,
.products-pagination .page-link-next {
    padding: 10px 20px;
    font-size: 13px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
}

/* ============================================
   CART DRAWER
   ============================================ */
.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--dur) var(--ease);
}

.cart-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-drawer-panel {
    position: fixed;
    top: 0;
    right: -480px;
    width: 100%;
    max-width: 440px;
    height: 100%;
    background: var(--white);
    z-index: 10000;
    transition: right var(--dur) var(--ease);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.cart-drawer-overlay.active .cart-drawer-panel {
    right: 0;
}

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0,0,0,.04);
    flex-shrink: 0;
    background: var(--white);
}

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

.cart-drawer-title {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-900);
}

.cart-drawer-badge {
    background: var(--grad-brand);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    min-width: 24px;
    text-align: center;
}

.cart-drawer-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--ink-500);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    transition: all var(--dur-fast) var(--ease);
    line-height: 1;
}

.cart-drawer-close-btn:hover {
    background: var(--bg-soft);
    color: var(--ink-900);
    transform: rotate(90deg);
}

.cart-drawer-items-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.cart-drawer-items-container::-webkit-scrollbar {
    width: 4px;
}

.cart-drawer-items-container::-webkit-scrollbar-track {
    background: var(--bg-soft);
}

.cart-drawer-items-container::-webkit-scrollbar-thumb {
    background: var(--p1);
    border-radius: var(--r-pill);
}

.cart-drawer-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
    animation: slide-in-item var(--dur) var(--ease);
}

@keyframes slide-in-item {
    0% { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

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

.cart-drawer-item-img {
    width: 72px;
    height: 72px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--bg-soft);
    flex-shrink: 0;
}

.cart-item-details {
    flex: 1;
    min-width: 0;
}

.cart-item-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-price {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--p1);
    margin: 0 0 8px;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.quantity-selector {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--bg-soft);
}

.quantity-selector .quantity-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--ink-700);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-selector .quantity-btn:hover {
    background: var(--p1);
    color: var(--white);
}

.quantity-selector .quantity-val {
    min-width: 32px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-900);
}

.cart-item-remove-btn {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-500);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    transition: all var(--dur-fast) var(--ease);
}

.cart-item-remove-btn:hover {
    color: #ef4444;
    background: rgba(239,68,68,.06);
}

.cart-drawer-footer {
    border-top: 1px solid rgba(0,0,0,.04);
    padding: 20px 24px;
    background: var(--white);
    flex-shrink: 0;
}

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

.cart-summary-label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-500);
}

.cart-summary-value {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-900);
}

.cart-drawer-disclaimer {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ink-500);
    margin: 0 0 16px;
    line-height: 1.5;
}

.cart-checkout-btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    padding: 14px 24px;
    background: var(--grad-brand);
    color: var(--white);
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    text-decoration: none;
    display: block;
    text-align: center;
    box-shadow: var(--shadow-btn);
}

.cart-checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,60,191,.35);
    color: var(--white);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1199px) {
    .shop-intro-heading {
        font-size: 42px;
    }
    /* .shop-float-img-1 { width: 160px; height: 160px; }
    .shop-float-img-2 { width: 130px; height: 130px; }
    .shop-float-img-3 { width: 110px; height: 110px; } */
}

@media (max-width: 991px) {
    .shop-intro-banner {
        padding: 60px 0 40px;
        text-align: center;
    }
    .shop-intro-heading {
        font-size: 36px;
    }
    .shop-intro-tagline {
        margin-left: auto;
        margin-right: auto;
    }
    .shop-intro-visual {
        min-height: 200px;
        margin-top: 30px;
    }
    /* .shop-float-img-1 { width: 130px; height: 130px; }
    .shop-float-img-2 { width: 110px; height: 110px; }
    .shop-float-img-3 { width: 90px; height: 90px; } */
    .cart-drawer-panel {
        max-width: 380px;
    }
}

@media (max-width: 767px) {
    .shop-intro-heading {
        font-size: 28px;
    }
    .shop-intro-tagline {
        font-size: 16px;
    }
    .btn-grad {
        padding: 12px 28px;
        font-size: 14px;
    }
    .coll-product-card {
        padding: 16px;
    }
    .coll-product-name {
        font-size: 14px;
        min-height: 36px;
    }
    .coll-product-price {
        font-size: 17px;
    }
    .cart-drawer-panel {
        max-width: 100%;
        right: -100%;
    }
    .cart-drawer-header {
        padding: 16px 20px;
    }
    .cart-drawer-items-container {
        padding: 12px 16px;
    }
    .cart-drawer-footer {
        padding: 16px 20px;
    }
    /* .shop-float-img-1 { width: 100px; height: 100px; }
    .shop-float-img-2 { width: 85px; height: 85px; }
    .shop-float-img-3 { width: 70px; height: 70px; } */
    .products-pagination .page-link {
        padding: 8px 14px;
        font-size: 13px;
        min-width: 36px;
    }
}

@media (max-width: 480px) {
    .shop-intro-heading {
        font-size: 24px;
    }
    .shop-label-pill {
        font-size: 11px;
        padding: 4px 12px 4px 10px;
    }
    .shop-intro-breadcrumb {
        padding: 4px 14px;
        font-size: 12px;
    }
    .btn-grad {
        padding: 10px 20px;
        font-size: 13px;
        gap: 8px;
    }
    .coll-product-card {
        padding: 12px;
    }
    .coll-product-name {
        font-size: 13px;
    }
    .coll-product-price {
        font-size: 15px;
    }
    .purchase-type-btn {
        font-size: 10px;
        padding: 6px 10px;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-glow {
    box-shadow: var(--shadow-glow);
}

.anim-fade-up {
    animation: fade-up var(--dur) var(--ease) forwards;
    opacity: 0;
}

@keyframes fade-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* ============================================================
   PRODUCT GRID SECTION
   Premium e-commerce styling — CSS only, using existing tokens
   ============================================================ */

/* ---------- Grid Container ---------- */
#productGrid {
  background: var(--bg-soft);
  padding: var(--space-3xl) var(--space-lg);
  max-width: 1440px;
  margin: 0 auto;
}

#categoryArea {
  width: 100%;
}

.product_row {
  margin-bottom: var(--space-3xl) !important;
}

/* Increase breathing room between cards without touching HTML/grid classes */
.product_row .row.g-3 {
  --bs-gutter-x: var(--space-xl);
  --bs-gutter-y: var(--space-xl);
  row-gap: var(--space-xl);
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.product-category {
  display: flex;
}

.product-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--bg-cyan);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  will-change: transform;
  transform: translateZ(0);
  border-radius: var(--r-lg);
    border: 1px solid var(--bg-tint);
}

/* Glass sheen layer for premium feel */
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
  z-index: 2;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: var(--shadow-lg);
}

.product-card:hover::before {
  opacity: 1;
}

.product-card:focus-within {
  outline: 2px solid var(--p2);
  outline-offset: 3px;
}

/* ============================================================
   PRODUCT IMAGE
   ============================================================ */
.product-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: radial-gradient(circle at 30% 20%, var(--bg-cyan), var(--bg-tint) 65%, var(--bg-soft) 100%);
  overflow: hidden;
  border-radius: var(--r-card) var(--r-card) 0 0;
}

.product-image {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-image);
  transition: transform var(--dur-slow) var(--ease);
  transform: scale(1) rotate(0deg);
}

.product-card:hover .product-image {
  transform: scale(1.08) rotate(-1.5deg);
}

/* ============================================================
   PRODUCT CONTENT
   ============================================================ */
.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-sm);
  background: var(--white);
  position: relative;
  z-index: 1;
  padding: 20px 20px 22px;
}

.product-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.35;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.35em * 2);
}

.product-price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  letter-spacing: 0.01em;
  margin: 0;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.add-btn {
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* Override Bootstrap .btn-dark / .btn-sm / .w-100 without touching HTML */
.add-btn .btn.btn-dark.modal-sp-btn {
  position: relative;
  width: 100%;
  background: var(--grad-brand);
  background-size: 200% 100%;
  background-position: 0% 0%;
  border: none;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: var(--shadow-btn);
  transition: background-position var(--dur-slow) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

/* Shine sweep */
.add-btn .btn.btn-dark.modal-sp-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left var(--dur-slow) var(--ease);
}

.add-btn .btn.btn-dark.modal-sp-btn:hover {
  background-position: 100% 0%;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,60,191,.40), var(--shadow-glow);
  color: var(--white);
}

.add-btn .btn.btn-dark.modal-sp-btn:hover::after {
  left: 130%;
}

.add-btn .btn.btn-dark.modal-sp-btn:active {
  transform: translateY(-1px) scale(0.98);
}

.add-btn .btn.btn-dark.modal-sp-btn:focus-visible {
  outline: 2px solid var(--s2);
  outline-offset: 3px;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.products-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
}

.pagination-btn,
.page-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-700);
  background: var(--white);
  border: 1px solid var(--bg-cyan);
  border-radius: var(--r-pill);
  padding: 0.6rem 1.1rem;
  min-width: 42px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.pagination-btn:hover:not(:disabled),
.page-btn:hover:not(.active) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--p2);
  color: var(--p1);
  background: var(--bg-tint);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.page-btn.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--white);
  box-shadow: var(--shadow-btn);
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.pagination-info {
  width: 100%;
  text-align: center;
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--ink-500);
  letter-spacing: 0.01em;
}

.pagination-info span {
  color: var(--ink-900);
  font-weight: 700;
}

/* Focus states for keyboard accessibility */
.pagination-btn:focus-visible,
.page-btn:focus-visible {
  outline: 2px solid var(--p2);
  outline-offset: 2px;
}

/* ============================================================
   LOADER
   ============================================================ */
#pagination-loader {
  display: flex;
  justify-content: center;
  padding: var(--space-xl) 0;
}

.spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--bg-tint);
  border-top-color: var(--p1);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   LOAD MORE (kept hidden state intact, styled for parity)
   ============================================================ */
.load-more-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--p1);
  background: var(--white);
  border: 1.5px solid var(--p1);
  border-radius: var(--r-pill);
  padding: 0.75rem 2.5rem;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}

.load-more-btn:hover {
  background: var(--grad-brand);
  color: var(--white);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Large desktop — constrain grid width, keep 4 columns */
@media (min-width: 1440px) {
  #productGrid {
    max-width: 1360px;
  }
}

/* Desktop / laptop (col-lg-3 already yields 4 cols) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #productGrid {
    padding: var(--space-2xl) var(--space-md);
  }
}

/* Tablet (col-md-4 already yields 3 cols) */
@media (min-width: 768px) and (max-width: 991.98px) {
  #productGrid {
    padding: var(--space-2xl) var(--space-md);
  }
  .product-name {
    font-size: 1rem;
  }
}

/* Small tablet / large mobile */
@media (min-width: 576px) and (max-width: 767.98px) {
  #productGrid {
    padding: var(--space-xl) var(--space-sm);
  }
  .product_row .row.g-3 {
    --bs-gutter-x: var(--space-md);
    --bs-gutter-y: var(--space-md);
  }
}

/* Mobile (col-6 already yields 2 cols) */
@media (max-width: 575.98px) {
  #productGrid {
    padding: var(--space-lg) var(--space-sm);
  }
  .product_row .row.g-3 {
    --bs-gutter-x: var(--space-sm);
    --bs-gutter-y: var(--space-sm);
  }
  .product-body {
    padding: var(--space-md);
    gap: var(--space-xs);
  }
  .product-thumb {
    padding: var(--space-md);
  }
  .add-btn .btn.btn-dark.modal-sp-btn {
    font-size: 0.8125rem;
    padding: 0.65rem 1rem;
  }
  .products-pagination {
    gap: var(--space-xs);
  }
  .pagination-btn,
  .page-btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    min-width: 36px;
  }
}

@media (max-width: 374.98px) {
  .pagination-info {
    font-size: 0.75rem;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-image,
  .add-btn .btn.btn-dark.modal-sp-btn,
  .pagination-btn,
  .page-btn,
  .load-more-btn,
  .spinner {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}
.pro-gap{
  padding: 10px;
}
/* ============================================================
   PRODUCT DETAILS SECTION
   Premium product page styling — CSS only, using existing tokens
   ============================================================ */

/* ---------- Section Wrapper ---------- */
.product-details-row {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
  align-items: stretch;
}

/* ============================================================
   PRODUCT GALLERY — shortened image, no more tall square
   ============================================================ */
.product-gallery-wrapper {
  position: sticky;
  top: var(--space-xl);
  height: 100%;
  display: flex;
  align-items: center;
}

.product-gallery-wrapper .row.g-3 {
  width: 100%;
}

.product-gallery-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  background: radial-gradient(circle at 30% 20%, var(--bg-cyan), var(--bg-tint) 65%, var(--bg-soft) 100%);
  border: 1px solid var(--bg-cyan);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.product-gallery-img:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--p2);
}

.product-gallery-img img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-image);
  transition: transform var(--dur-slow) var(--ease);
  transform: scale(1);
}

.product-gallery-img:hover img {
  transform: scale(1.06);
}

/* ============================================================
   PRODUCT CONTENT — matching card treatment, vertically balanced
   ============================================================ */
.product-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  height: 100%;
  padding: var(--space-xl) var(--space-lg) var(--space-xl) var(--space-2xl);
  background: var(--white);
  border: 1px solid var(--bg-cyan);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.product-content-wrapper:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--p2);
}

/* ---------- Breadcrumb ---------- */
.product-breadcrumb-wrapper {
  margin-bottom: var(--space-xs);
}

.product-breadcrumb {
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-500);
  justify-content: flex-start !important;
}

.product-breadcrumb li {
  display: flex;
  align-items: center;
}

.product-breadcrumb a {
  color: var(--ink-500);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.product-breadcrumb a:hover {
  color: var(--p1);
}

.product-breadcrumb li.active {
  color: var(--ink-900);
  font-weight: 600;
}

/* ---------- Title ---------- */
.product-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0;
}

/* ---------- Price ---------- */
.product-price-wrapper {
  margin: 0;
}

.product-price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.1vw, 1.75rem);
  letter-spacing: 0.01em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}

/* ---------- Description ---------- */
.product-description {
  font-family: var(--font-body);
  font-size: 0.975rem;
  line-height: 1.75;
  color: var(--ink-700);
  margin: 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--bg-cyan);
}

.product-description p {
  margin: 0;
}

/* ============================================================
   QUANTITY CONTROL (cart-item-quantity-2)
   ============================================================ */
.cart-item-quantity-2 {
  display: flex;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--bg-cyan);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--white);
}

.qty-control .qty-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink-700);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.qty-control .qty-btn:hover {
  background: var(--grad-brand);
  color: var(--white);
}

.qty-control .qty-value {
  min-width: 40px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-900);
}

/* ============================================================
   PRODUCT OPTIONS (Color / Size / Quantity blocks)
   ============================================================ */
.product-option-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--bg-cyan);
}

.product-option-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink-900);
  margin: 0;
}

.product-option-value {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-500);
}

.product-size-guide {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--p1);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}

.product-size-guide:hover {
  color: var(--s1);
}

/* ---------- Color Swatches ---------- */
.product-color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-cyan);
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.product-color:hover {
  transform: scale(1.1);
}

.product-color.active {
  border-color: var(--p1);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--p2);
}

.product-color.beige { background: #d8c3a5; }
.product-color.black { background: var(--ink-900); }
.product-color:not(.beige):not(.black) { background: #6b7280; }

/* ---------- Size Buttons ---------- */
.product-size-wrapper {
  gap: var(--space-sm) !important;
}

.product-size-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-700);
  background: var(--white);
  border: 1.5px solid var(--bg-cyan);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}

.product-size-btn:hover {
  border-color: var(--p2);
  color: var(--p1);
  transform: translateY(-2px);
}

.product-size-btn.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--white);
  box-shadow: var(--shadow-btn);
}

/* ---------- Alternate Quantity (product-quantity-wrapper) ---------- */
.product-quantity-wrapper {
  max-width: 140px;
  border: 1px solid var(--bg-cyan);
  border-radius: var(--r-pill);
  padding: var(--space-xs) var(--space-md);
  background: var(--white);
}

.product-quantity-wrapper .qty-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink-700);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.product-quantity-wrapper .qty-btn:hover {
  color: var(--p1);
}

.qty-count {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-900);
}

/* ============================================================
   CTA BUTTONS
   ============================================================ */
.product-cta-wrapper {
  margin-top: var(--space-sm);
}

/* Primary — Add To Cart */
.add-to-cart-btn.btn-explore {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 1rem 2rem;
  background: var(--grad-brand);
  background-size: 200% 100%;
  background-position: 0% 0%;
  border: none;
  border-radius: var(--r-pill);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--shadow-btn);
  transition: background-position var(--dur-slow) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.add-to-cart-btn.btn-explore::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left var(--dur-slow) var(--ease);
}

.add-to-cart-btn.btn-explore:hover {
  background-position: 100% 0%;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,60,191,.40), var(--shadow-glow);
  color: var(--white);
}

.add-to-cart-btn.btn-explore:hover::after {
  left: 130%;
}

.add-to-cart-btn.btn-explore:active {
  transform: translateY(-1px) scale(0.98);
}

.add-to-cart-btn.btn-explore:focus-visible {
  outline: 2px solid var(--s2);
  outline-offset: 3px;
}

/* Secondary — Add To Wishlist */
.product-secondary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 1rem 2rem;
  background: var(--white);
  border: 1.5px solid var(--bg-cyan);
  border-radius: var(--r-pill);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}

.product-secondary-btn:hover {
  border-color: var(--p1);
  color: var(--p1);
  background: var(--bg-tint);
  transform: translateY(-2px);
}

.product-secondary-btn:focus-visible {
  outline: 2px solid var(--p2);
  outline-offset: 3px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Large desktop */
@media (min-width: 1440px) {
  .product-details-row {
    padding: var(--space-4xl) var(--space-lg);
  }
}

/* Tablet / small desktop — stack, drop the height matching + sticky */
@media (max-width: 991.98px) {
  .product-gallery-wrapper {
    position: static;
    height: auto;
  }

  .product-gallery-img {
    aspect-ratio: 16 / 10;
    padding: var(--space-xl);
  }

  .product-content-wrapper {
    height: auto;
    margin-top: var(--space-md);
    padding: var(--space-xl);
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .product-details-row {
    padding: var(--space-xl) var(--space-md);
  }

  .product-gallery-img {
    aspect-ratio: 4 / 3;
    padding: var(--space-lg);
    border-radius: var(--r-md);
  }

  .product-content-wrapper {
    padding: var(--space-lg);
    border-radius: var(--r-md);
    gap: var(--space-md);
  }

  .product-title {
    font-size: 1.4rem;
  }

  .product-price {
    font-size: 1.3rem;
  }

  .product-description {
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  .add-to-cart-btn.btn-explore,
  .product-secondary-btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
  }

  .product-size-wrapper {
    gap: var(--space-xs) !important;
  }

  .product-size-btn {
    min-width: 40px;
    height: 40px;
    font-size: 0.8125rem;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .product-gallery-img,
  .product-gallery-img img,
  .product-content-wrapper,
  .add-to-cart-btn.btn-explore,
  .product-secondary-btn,
  .product-size-btn,
  .product-color,
  .qty-control .qty-btn {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}
/* ============================================
   CART PAGE LAYOUT
   ============================================ */
   .cart-page {
    background: var(--bg-soft);
    min-height: 80vh;
    padding: 40px 0 80px;
}

.cart-section {
    padding: 20px 0;
}

.cart-title {
    font-family: var(--font-head);
    font-size: 32px;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 32px;
    letter-spacing: -0.02em;
    position: relative;
}

.cart-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--grad-brand);
    border-radius: var(--r-pill);
}

/* ============================================
   CART LAYOUT GRID
   ============================================ */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

/* ============================================
   CART TABLE HEADER
   ============================================ */
.cart-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    padding: 16px 24px;
    background: var(--white);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    border-bottom: 2px solid var(--bg-tint);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-500);
}

.col-product {
    text-align: left;
}

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

.col-total {
    text-align: right;
}

/* ============================================
   CART ITEMS CONTAINER
   ============================================ */
.cart-items-section {
    background: var(--white);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* ============================================
   INDIVIDUAL CART ITEM
   ============================================ */
.cart-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ink-100);
    transition: all var(--dur-fast) var(--ease);
    animation: fade-slide-in var(--dur) var(--ease);
}

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

.cart-item:hover {
    background: var(--bg-soft);
}

@keyframes fade-slide-in {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   CART ITEM PRODUCT
   ============================================ */
.cart-item-product {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-item-image {
    width: 80px;
    height: 80px;
    border-radius: var(--r-image);
    overflow: hidden;
    background: var(--bg-tint);
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.04);
    transition: all var(--dur-fast) var(--ease);
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--dur) var(--ease);
}

.cart-item:hover .cart-item-image img {
    transform: scale(1.05);
}

.cart-item-details {
    flex: 1;
    min-width: 0;
}

.cart-item-name {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0 0 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product_text_info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-item-remove {
  font-family: var(--font-body);
  font-size: 12px !important;
  font-weight: 500;
  color: var(--ink-500) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  transition: all var(--dur-fast) var(--ease);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  width: fit-content !important;
}

.cart-item-remove:hover {
    color: #ef4444;
    text-decoration-color: #ef4444;
}

/* ============================================
   QUANTITY CONTROLS - No Shaking
   ============================================ */
.cart-item-quantity {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qty-control {
    display: inline-flex;
    align-items: center;
    background: var(--bg-soft);
    border-radius: var(--r-pill);
    padding: 3px;
    border: 1px solid var(--ink-100);
    transition: all var(--dur-fast) var(--ease);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.qty-control:hover {
    border-color: var(--p1);
}

.qty-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-700);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    -moz-appearance: none;
    appearance: none;
}

.qty-btn::-ms-expand {
    display: none;
}

.qty-btn:hover {
    background: var(--p1);
    color: var(--white);
}

.qty-btn:active {
    transform: scale(0.92) translateZ(0);
    -webkit-transform: scale(0.92) translateZ(0);
}

.qty-value {
    min-width: 32px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink-900);
    padding: 0 6px;
    line-height: 1;
    flex-shrink: 0;
    transition: none;
}

.qty-control * {
    box-sizing: border-box;
}

/* ============================================
   CART ITEM TOTAL
   ============================================ */
.cart-item-total {
    text-align: right;
}

.item-total-price {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--p1);
}

/* ============================================
   ORDER SUMMARY
   ============================================ */
.order-summary {
    background: var(--white);
    border-radius: var(--r-card);
    padding: 28px 24px 32px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(0,0,0,.04);
    position: sticky;
    top: 100px;
}

.summary-title {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bg-tint);
    letter-spacing: -0.01em;
}

.summary-title::after {
    display: none;
}

.summary-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink-700);
}

.summary-label {
    font-weight: 500;
}

.summary-value {
    font-weight: 600;
    color: var(--ink-900);
}

.summary-muted {
    font-weight: 400;
    color: var(--ink-500);
    font-size: 13px;
}

.summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 2px solid var(--bg-tint);
    margin-top: 4px;
}

.summary-total-label {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-900);
}

.summary-total-value {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 800;
    color: var(--p1);
}

/* ============================================
   CHECKOUT BUTTON
   ============================================ */
.btn-checkout {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: var(--grad-brand);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    text-decoration: none;
    text-align: center;
    box-shadow: var(--shadow-btn);
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

.btn-checkout::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 60%);
    opacity: 0;
    transition: opacity var(--dur-fast) ease;
}

.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,60,191,.40);
    color: var(--white);
}

.btn-checkout:hover::before {
    opacity: 1;
}

.btn-checkout:active {
    transform: translateY(0) scale(0.98);
}

.summary-note {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-500);
    text-align: center;
    margin: 16px 0 0;
    line-height: 1.5;
}

/* ============================================
   EMPTY CART STATE
   ============================================ */
.cart-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--white);
    border-radius: var(--r-sm);
}

.cart-empty-msg {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 20px;
}

.cart-continue-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: var(--grad-brand);
    color: var(--white);
    border: none;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    text-decoration: none;
    box-shadow: var(--shadow-btn);
}

.cart-continue-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,60,191,.35);
    color: var(--white);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .cart-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .order-summary {
        position: static;
        margin-top: 10px;
    }
    
    .cart-title {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .cart-page {
        padding: 20px 0 40px;
    }
    
    .cart-title {
        font-size: 24px;
    }
    
    .cart-table-header {
        display: none;
    }
    
    .cart-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
        border-bottom: 1px solid var(--ink-100);
    }
    
    .cart-item-product {
        gap: 12px;
    }
    
    .cart-item-image {
        width: 64px;
        height: 64px;
    }
    
    .cart-item-name {
        font-size: 14px;
    }
    
    .cart-item-quantity {
        justify-content: flex-start;
        padding-left: 76px;
    }
    
    .qty-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
    .qty-value {
        min-width: 28px;
        font-size: 14px;
    }
    
    .cart-item-total {
        text-align: left;
        padding-left: 76px;
    }
    
    .item-total-price {
        font-size: 16px;
    }
    
    .order-summary {
        padding: 20px 16px 24px;
    }
    
    .summary-title {
        font-size: 18px;
    }
    
    .summary-total-value {
        font-size: 20px;
    }
    
    .btn-checkout {
        font-size: 14px;
        padding: 14px 20px;
    }
    
    .cart-empty-msg {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .cart-title {
        font-size: 20px;
    }
    
    .cart-item {
        padding: 12px;
    }
    
    .cart-item-image {
        width: 56px;
        height: 56px;
    }
    
    .cart-item-name {
        font-size: 13px;
    }
    
    .cart-item-remove {
        font-size: 11px;
    }
    
    .cart-item-quantity {
        padding-left: 68px;
    }
    
    .cart-item-total {
        padding-left: 68px;
    }
    
    .qty-btn {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
    
    .qty-value {
        min-width: 24px;
        font-size: 13px;
    }
    
    .summary-total-value {
        font-size: 18px;
    }
    
    .btn-checkout {
        font-size: 13px;
        padding: 12px 16px;
    }
}

/* ============================================
   CART DRAWER OVERLAY (for mobile)
   ============================================ */
.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--dur) var(--ease);
}

.cart-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-drawer-panel {
    position: fixed;
    top: 0;
    right: -480px;
    width: 100%;
    max-width: 440px;
    height: 100%;
    background: var(--white);
    z-index: 10000;
    transition: right var(--dur) var(--ease);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.cart-drawer-overlay.active .cart-drawer-panel {
    right: 0;
}

@media (max-width: 767px) {
    .cart-drawer-panel {
        max-width: 100%;
        right: -100%;
    }
}

/* ============================================
   UTILITY
   ============================================ */
.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-glow {
    box-shadow: var(--shadow-glow);
}

.anim-fade-up {
    animation: fade-up var(--dur) var(--ease) forwards;
    opacity: 0;
}

@keyframes fade-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ============================================
   CART PAGE DARK THEME SUPPORT
   ============================================ */
.dark-theme .cart-page {
    background: #0f0f1a;
}

.dark-theme .cart-items-section,
.dark-theme .order-summary,
.dark-theme .cart-table-header {
    background: #1a1a2e;
    border-color: rgba(255,255,255,.06);
}

.dark-theme .cart-item {
    border-color: rgba(255,255,255,.06);
}

.dark-theme .cart-item:hover {
    background: rgba(255,255,255,.03);
}

.dark-theme .cart-item-name {
    color: var(--white);
}

.dark-theme .summary-title {
    color: var(--white);
    border-color: rgba(255,255,255,.06);
}

.dark-theme .summary-row {
    color: var(--ink-300);
}

.dark-theme .summary-value {
    color: var(--white);
}

.dark-theme .summary-total-row {
    border-color: rgba(255,255,255,.06);
}

.dark-theme .summary-total-label {
    color: var(--white);
}

.dark-theme .qty-control {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.06);
}

.dark-theme .qty-btn {
    color: var(--ink-300);
}

.dark-theme .qty-btn:hover {
    background: var(--p1);
    color: var(--white);
}

.dark-theme .qty-value {
    color: var(--white);
}

.dark-theme .cart-item-remove {
    color: var(--ink-500);
}

.dark-theme .cart-item-remove:hover {
    color: #ef4444;
}

/* ============================================
   CHECKOUT PAGE LAYOUT
   ============================================ */
   .checkout-page {
    background: var(--bg-soft);
    min-height: 100vh;
    padding: 40px 0 80px;
    margin-top: 60px;
}

.checkout-wrapper {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

/* ============================================
   CHECKOUT STEPS
   ============================================ */
.checkout-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 24px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-300);
    border-bottom: 2px solid var(--ink-100);
    margin-bottom: 32px;
}

.checkout-steps span {
    transition: all var(--dur-fast) var(--ease);
}

.checkout-steps span.active {
    color: var(--p1);
    position: relative;
}

.checkout-steps span.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-brand);
    border-radius: var(--r-pill);
}

.checkout-steps span:not(.active):not(:nth-child(even)) {
    color: var(--ink-500);
}

.checkout-steps span:nth-child(even) {
    color: var(--ink-300);
    font-weight: 300;
}

/* ============================================
   CHECKOUT FORM COLUMN
   ============================================ */
.checkout-form-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ============================================
   CHECKOUT SECTION
   ============================================ */
.checkout-section {
    background: var(--white);
    border-radius: var(--r-card);
    padding: 24px 28px 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(0,0,0,.04);
    transition: all var(--dur) var(--ease);
}

.checkout-section:hover {
    border-color: rgba(0,60,191,.06);
}

.checkout-title {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink-100);
    letter-spacing: -0.01em;
}

.checkout-title::after {
    display: none;
}

/* ============================================
   FORM GROUPS - UNIFIED INPUT STYLES
   ============================================ */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

/* ===== UNIFIED INPUT STYLES ===== */
.form-group .form-control,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--input-padding);
    font-family: var(--font-body);
    font-size: var(--input-font-size);
    font-weight: 400;
    color: var(--input-text);
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: var(--input-radius);
    transition: var(--input-transition);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    line-height: 1.5;
    height: 50px;
    box-sizing: border-box;
}

/* Placeholder styling */
.form-group .form-control::placeholder,
.form-group input:not([type="checkbox"]):not([type="radio"])::placeholder,
.form-group textarea::placeholder {
    color: var(--input-placeholder);
    font-weight: 400;
    opacity: 0.8;
}

/* Focus state - identical for all inputs */
.form-group .form-control:focus,
.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--input-border-focus);
    box-shadow: var(--shadow-focus);
    background: var(--white);
}

/* Hover state */
.form-group .form-control:hover,
.form-group input:not([type="checkbox"]):not([type="radio"]):hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: var(--p2);
}

/* Disabled state */
.form-group .form-control:disabled,
.form-group input:not([type="checkbox"]):not([type="radio"]):disabled,
.form-group select:disabled,
.form-group textarea:disabled {
    background: var(--bg-soft);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ===== SELECT SPECIFIC ===== */
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
}

.form-group select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%23003cbf' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ===== TEXTAREA SPECIFIC ===== */
.form-group textarea {
    min-height: 100px;
    resize: vertical;
    height: auto;
    line-height: 1.6;
}

/* ============================================
   INPUT VALIDATION STATES
   ============================================ */
.form-group .form-control.error,
.form-group input.error:not([type="checkbox"]):not([type="radio"]),
.form-group select.error,
.form-group textarea.error {
    border-color: #ef4444;
}

.form-group .form-control.error:focus,
.form-group input.error:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select.error:focus,
.form-group textarea.error:focus {
    box-shadow: 0 0 0 3px rgba(239,68,68,.12), 0 0 0 1px #ef4444;
}

.form-group .form-control.valid,
.form-group input.valid:not([type="checkbox"]):not([type="radio"]),
.form-group select.valid,
.form-group textarea.valid {
    border-color: #10b981;
}

.form-group .form-control.valid:focus,
.form-group input.valid:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select.valid:focus,
.form-group textarea.valid:focus {
    box-shadow: 0 0 0 3px rgba(16,185,129,.12), 0 0 0 1px #10b981;
}

/* ============================================
   ERROR MESSAGE
   ============================================ */
.error-message {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: #ef4444;
    margin-top: 4px;
    display: none;
    align-items: center;
    gap: 4px;
}

.error-message::before {
    content: '⚠';
    font-size: 13px;
}

.error-message.show {
    display: flex;
}

/* ============================================
   CHECKBOX
   ============================================ */
.checkout-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    margin-bottom: 8px;
}

.checkout-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--input-border);
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--p1);
    flex-shrink: 0;
    transition: var(--input-transition);
}

.checkout-checkbox input[type="checkbox"]:checked {
    border-color: var(--p1);
}

.checkout-checkbox input[type="checkbox"]:focus {
    box-shadow: var(--shadow-focus);
}

.checkout-checkbox label {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-700);
    cursor: pointer;
}

/* ============================================
   SHIPPING OPTIONS
   ============================================ */
.shipping-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shipping-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border: 2px solid var(--input-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: var(--input-transition);
    background: var(--white);
}

.shipping-option:hover {
    border-color: var(--p2);
    background: var(--bg-tint);
}

.shipping-option.active {
    border-color: var(--p1);
    background: var(--bg-tint);
    box-shadow: var(--shadow-focus);
}

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

.shipping-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--p1);
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid var(--input-border);
    transition: var(--input-transition);
}

.shipping-option input[type="radio"]:checked {
    border-color: var(--p1);
}

.shipping-option input[type="radio"]:focus {
    box-shadow: var(--shadow-focus);
}

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

.shipping-option-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
}

.shipping-option-description {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-500);
}

.shipping-option-price {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--p1);
}

/* ============================================
   PAYMENT OPTIONS
   ============================================ */
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-option {
    border: 2px solid var(--input-border);
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: var(--input-transition);
}

.payment-option.active {
    border-color: var(--p1);
    box-shadow: var(--shadow-focus);
}

.payment-option-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: var(--input-transition);
    width: 100%;
    margin: 0;
}

.payment-option-header:hover {
    background: var(--bg-tint);
}

.payment-option-header input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--p1);
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid var(--input-border);
    transition: var(--input-transition);
}

.payment-option-header input[type="radio"]:checked {
    border-color: var(--p1);
}

.payment-option-header input[type="radio"]:focus {
    box-shadow: var(--shadow-focus);
}

.payment-option-label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
}

.payment-option-header img {
    max-height: 28px;
    width: auto;
}

/* ============================================
   CARD FIELDS
   ============================================ */
.card-fields {
    padding: 16px 18px 18px;
    background: var(--bg-soft);
    border-top: 2px solid var(--ink-100);
    animation: slide-down var(--dur) var(--ease);
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-fields .row {
    margin: 0 -8px;
}

.card-fields .row > [class*="col-"] {
    padding: 0 8px;
}

.card-fields .form-group {
    margin-bottom: 12px;
}

.card-fields .form-group label {
    font-size: 13px;
}

/* Card number input with icon */
.card-fields #creditCardNumber {
    padding-left: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 20px;
}

/* CVV with tooltip */
.cvv-wrapper {
    position: relative;
}

.cvv-wrapper .cvv-tooltip {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: help;
    color: var(--ink-500);
    font-size: 14px;
    transition: var(--input-transition);
}

.cvv-wrapper .cvv-tooltip:hover {
    color: var(--p1);
}

.cvv-wrapper .cvv-tooltip-text {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    background: var(--ink-900);
    color: var(--white);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--input-transition);
    pointer-events: none;
}

.cvv-wrapper .cvv-tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 14px;
    border: 6px solid transparent;
    border-top-color: var(--ink-900);
}

.cvv-wrapper .cvv-tooltip:hover .cvv-tooltip-text {
    opacity: 1;
    visibility: visible;
}


/* ============================================
   CHECKOUT PAGE LAYOUT
   ============================================ */
   .checkout-page {
    background: var(--bg-soft);
    min-height: 100vh;
    padding: 40px 0 80px;
    margin-top: 60px;
}

.checkout-wrapper {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

/* ============================================
   CHECKOUT STEPS
   ============================================ */
.checkout-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 24px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-300);
    border-bottom: 2px solid var(--ink-100);
    margin-bottom: 32px;
}

.checkout-steps span {
    transition: all var(--dur-fast) var(--ease);
}

.checkout-steps span.active {
    color: var(--p1);
    position: relative;
}

.checkout-steps span.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-brand);
    border-radius: var(--r-pill);
}

.checkout-steps span:not(.active):not(:nth-child(even)) {
    color: var(--ink-500);
}

.checkout-steps span:nth-child(even) {
    color: var(--ink-300);
    font-weight: 300;
}

/* ============================================
   CHECKOUT FORM COLUMN
   ============================================ */
.checkout-form-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ============================================
   CHECKOUT SECTION
   ============================================ */
.checkout-section {
    background: var(--white);
    border-radius: var(--r-card);
    padding: 24px 28px 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(0,0,0,.04);
    transition: all var(--dur) var(--ease);
}

.checkout-section:hover {
    border-color: rgba(0,60,191,.06);
}

.checkout-title {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink-100);
    letter-spacing: -0.01em;
}

.checkout-title::after {
    display: none;
}

/* ============================================
   FORM GROUPS - UNIFIED INPUT STYLES
   ============================================ */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

/* ===== UNIFIED INPUT STYLES ===== */
.form-group .form-control,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--r-sm) !important;
  font-family: var(--font-body);
  font-size: var(--input-font-size);
  font-weight: 400;
  color: var(--input-text) !important;
  background: #fff !important;
  border: 2px solid #e8e8e8 !important;
  border-radius: var(--r-sm) !important;
  transition: var(--input-transition);
  appearance: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  line-height: 1.5;
  height: 50px;
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
}

/* Placeholder styling */
.form-group .form-control::placeholder,
.form-group input:not([type="checkbox"]):not([type="radio"])::placeholder,
.form-group textarea::placeholder {
    color: var(--input-placeholder);
    font-weight: 400;
    opacity: 0.8;
}

/* Focus state - identical for all inputs */
.form-group .form-control:focus,
.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--input-border-focus);
    box-shadow: var(--shadow-focus);
    background: var(--white);
}

/* Hover state */
.form-group .form-control:hover,
.form-group input:not([type="checkbox"]):not([type="radio"]):hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: var(--p2);
}

/* Disabled state */
.form-group .form-control:disabled,
.form-group input:not([type="checkbox"]):not([type="radio"]):disabled,
.form-group select:disabled,
.form-group textarea:disabled {
    background: var(--bg-soft);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ===== SELECT SPECIFIC ===== */
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
}



/* ===== TEXTAREA SPECIFIC ===== */
.form-group textarea {
    min-height: 100px;
    resize: vertical;
    height: auto;
    line-height: 1.6;
}

/* ============================================
   INPUT VALIDATION STATES
   ============================================ */
.form-group .form-control.error,
.form-group input.error:not([type="checkbox"]):not([type="radio"]),
.form-group select.error,
.form-group textarea.error {
    border-color: #ef4444;
}

.form-group .form-control.error:focus,
.form-group input.error:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select.error:focus,
.form-group textarea.error:focus {
    box-shadow: 0 0 0 3px rgba(239,68,68,.12), 0 0 0 1px #ef4444;
}

.form-group .form-control.valid,
.form-group input.valid:not([type="checkbox"]):not([type="radio"]),
.form-group select.valid,
.form-group textarea.valid {
    border-color: #10b981;
}

.form-group .form-control.valid:focus,
.form-group input.valid:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select.valid:focus,
.form-group textarea.valid:focus {
    box-shadow: 0 0 0 3px rgba(16,185,129,.12), 0 0 0 1px #10b981;
}

/* ============================================
   ERROR MESSAGE
   ============================================ */
.error-message {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: #ef4444;
    margin-top: 4px;
    display: none;
    align-items: center;
    gap: 4px;
}

.error-message::before {
    content: '⚠';
    font-size: 13px;
}

.error-message.show {
    display: flex;
}

/* ============================================
   CHECKBOX
   ============================================ */
.checkout-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    margin-bottom: 8px;
}

.checkout-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--input-border);
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--p1);
    flex-shrink: 0;
    transition: var(--input-transition);
}

.checkout-checkbox input[type="checkbox"]:checked {
    border-color: var(--p1);
}

.checkout-checkbox input[type="checkbox"]:focus {
    box-shadow: var(--shadow-focus);
}

.checkout-checkbox label {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-700);
    cursor: pointer;
}

/* ============================================
   SHIPPING OPTIONS
   ============================================ */
.shipping-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shipping-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border: 2px solid var(--input-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: var(--input-transition);
    background: var(--white);
}

.shipping-option:hover {
    border-color: var(--p2);
    background: var(--bg-tint);
}

.shipping-option.active {
    border-color: var(--p1);
    background: var(--bg-tint);
    box-shadow: var(--shadow-focus);
}

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

.shipping-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--p1);
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid var(--input-border);
    border-radius: 50%;
    transition: var(--input-transition);
}

.shipping-option input[type="radio"]:checked {
    border-color: var(--p1);
}

.shipping-option input[type="radio"]:focus {
    box-shadow: var(--shadow-focus);
}

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

.shipping-option-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
}

.shipping-option-description {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-500);
}

.shipping-option-price {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--p1);
}

/* ============================================
   PAYMENT OPTIONS
   ============================================ */
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-option {
    border: 2px solid var(--input-border);
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: var(--input-transition);
}

.payment-option.active {
    border-color: var(--p1);
    box-shadow: var(--shadow-focus);
}

.payment-option-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: var(--input-transition);
    width: 100%;
    margin: 0;
}

.payment-option-header:hover {
    background: var(--bg-tint);
}

.payment-option-header input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--p1);
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid var(--input-border);
    border-radius: 50%;
    transition: var(--input-transition);
}

.payment-option-header input[type="radio"]:checked {
    border-color: var(--p1);
}

.payment-option-header input[type="radio"]:focus {
    box-shadow: var(--shadow-focus);
}

.payment-option-label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
}

.payment-option-header img {
    max-height: 28px;
    width: auto;
}

/* ============================================
   CARD FIELDS
   ============================================ */
.card-fields {
    padding: 16px 18px 18px;
    background: var(--bg-soft);
    border-top: 2px solid var(--ink-100);
    animation: slide-down var(--dur) var(--ease);
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-fields .row {
    margin: 0 -8px;
}

.card-fields .row > [class*="col-"] {
    padding: 0 8px;
}

.card-fields .form-group {
    margin-bottom: 12px;
}

.card-fields .form-group label {
    font-size: 13px;
}

/* Card number input with icon */
.card-fields #creditCardNumber {
    padding-left: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 20px;
}

/* CVV with tooltip */
.cvv-wrapper {
    position: relative;
}

.cvv-wrapper .cvv-tooltip {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: help;
    color: var(--ink-500);
    font-size: 14px;
    transition: var(--input-transition);
}

.cvv-wrapper .cvv-tooltip:hover {
    color: var(--p1);
}

.cvv-wrapper .cvv-tooltip-text {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    background: var(--ink-900);
    color: var(--white);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--input-transition);
    pointer-events: none;
}

.cvv-wrapper .cvv-tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 14px;
    border: 6px solid transparent;
    border-top-color: var(--ink-900);
}

.cvv-wrapper .cvv-tooltip:hover .cvv-tooltip-text {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   CHECKOUT ACTIONS
   ============================================ */
.checkout-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 0;
    margin-top: 8px;
    flex-wrap: wrap;
}

.return-cart {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-500);
    text-decoration: none;
    transition: var(--input-transition);
    padding: 8px 0;
}

.return-cart:hover {
    color: var(--p1);
}

.continue-btn {
    padding: 14px 40px;
    background: var(--grad-brand);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: var(--input-transition);
    box-shadow: 0 4px 20px rgba(0,60,191,.30);
    position: relative;
    overflow: hidden;
}

.continue-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 60%);
    opacity: 0;
    transition: opacity var(--dur-fast) ease;
}

.continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,60,191,.40);
}

.continue-btn:hover::before {
    opacity: 1;
}

.continue-btn:active {
    transform: translateY(0) scale(0.98);
}

/* ============================================
   ORDER SUMMARY (Right Column)
   ============================================ */
.checkout-summary {
    background: var(--white);
    border-radius: var(--r-card);
    padding: 28px 24px 32px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(0,0,0,.04);
    position: sticky;
    top: 100px;
}

.summary-title {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bg-tint);
    letter-spacing: -0.01em;
}

/* ============================================
   SUMMARY PRODUCTS
   ============================================ */
.summary-products {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.summary-product {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--bg-soft);
    border-radius: var(--r-sm);
    transition: var(--input-transition);
}

.summary-product:hover {
    background: var(--bg-tint);
}

.product-thumb {
    /* width: 56px;
    height: 56px; */
    border-radius: var(--r-image);
    overflow: hidden;
    background: var(--white);
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.04);
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-info {
    flex: 1;
    min-width: 0;
}

.product-info h4 {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-product > span {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--p1);
    flex-shrink: 0;
}
#products-pagination.products-pagination .pagination-btn[disabled]{

}
#products-pagination.products-pagination .page-btn.active{
  color: #0089cd;
  font-size: 18px;
}
.products-pagination .page-btn{
  font-size: 18px;
}
/* ============================================
   SUMMARY TOTALS
   ============================================ */
.summary-totals {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink-700);
}

.summary-line span:first-child {
    font-weight: 500;
}

.summary-line .muted {
    color: var(--ink-500);
    font-weight: 400;
}

.summary-line .summary-shipping {
    color: var(--ink-700);
    font-weight: 600;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 4px;
    margin-top: 8px;
    border-top: 2px solid var(--bg-tint);
}

.summary-total > span {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink-900);
}

.final_amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.final_amount small {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-500);
}

.final_amount strong {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 800;
    color: var(--p1);
}

/* ============================================
   DISCOUNT ROW
   ============================================ */
.discount-row-wrapper {
    margin: 16px 0 20px;
}

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

.discount-row input {
    flex: 1;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    border: 2px solid var(--input-border);
    border-radius: var(--r-sm);
    transition: var(--input-transition);
    background: var(--white);
    height: 46px;
    color: var(--input-text);
}

.discount-row input:focus {
    outline: none;
    border-color: var(--p1);
    box-shadow: var(--shadow-focus);
}

.discount-row input::placeholder {
    color: var(--input-placeholder);
}

.discount-row button {
    padding: 10px 24px;
    background: var(--ink-900);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: var(--input-transition);
    white-space: nowrap;
    height: 46px;
}

.discount-row button:hover {
    background: var(--p1);
    transform: translateY(-1px);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1199px) {
    .checkout-wrapper {
        grid-template-columns: 1fr 340px;
        gap: 30px;
    }
}

@media (max-width: 991px) {
    .checkout-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .checkout-summary {
        position: static;
        margin-top: 10px;
    }
    
    .checkout-page {
        padding: 20px 0 40px;
    }
}

@media (max-width: 767px) {
    .checkout-steps {
        font-size: 11px;
        gap: 8px;
        padding: 12px 0 16px;
    }
    
    .checkout-section {
        padding: 18px 16px 20px;
        margin-bottom: 14px;
    }
    
    .checkout-title {
        font-size: 16px;
        margin-bottom: 16px;
        padding-bottom: 10px;
    }
    
    .checkout-actions {
        flex-direction: column;
        gap: 12px;
    }
    
    .return-cart {
        order: 2;
    }
    
    .continue-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 14px;
    }
    
    .form-group label {
        font-size: 13px;
    }
    
    .form-group .form-control,
    .form-group input:not([type="checkbox"]):not([type="radio"]),
    .form-group select,
    .form-group textarea {
        padding: 10px 14px;
        font-size: 14px;
        height: 44px;
    }
    
    .form-group select {
        padding-right: 38px;
    }
    
    .checkout-summary {
        padding: 20px 16px 24px;
    }
    
    .summary-title {
        font-size: 18px;
    }
    
    .summary-product {
        padding: 10px;
    }
    
    .product-thumb {
        width: 48px;
        height: 48px;
    }
    
    .product-info h4 {
        font-size: 13px;
    }
    
    .summary-total > span {
        font-size: 16px;
    }
    
    .final_amount strong {
        font-size: 20px;
    }
    
    .shipping-option {
        padding: 12px 14px;
    }
    
    .payment-option-header {
        padding: 12px 14px;
    }
    
    .card-fields {
        padding: 12px 14px 14px;
    }
    
    .discount-row {
        flex-wrap: wrap;
    }
    
    .discount-row button {
        width: 100%;
        padding: 10px;
        height: 44px;
    }
    
    .discount-row input {
        height: 44px;
    }
}

@media (max-width: 480px) {
    .checkout-page {
        padding: 10px 0 30px;
    }
    
    .checkout-steps {
        font-size: 10px;
        gap: 6px;
    }
    
    .checkout-steps span:nth-child(even) {
        font-size: 12px;
    }
    
    .checkout-section {
        padding: 14px 12px 16px;
    }
    
    .checkout-title {
        font-size: 15px;
    }
    
    .checkout-checkbox label {
        font-size: 14px;
    }
    
    .form-group .form-control,
    .form-group input:not([type="checkbox"]):not([type="radio"]),
    .form-group select,
    .form-group textarea {
        height: 40px;
        font-size: 13px;
        padding: 8px 12px;
    }
    
    .shipping-option-name {
        font-size: 13px;
    }
    
    .shipping-option-price {
        font-size: 14px;
    }
    
    .payment-option-label {
        font-size: 13px;
    }
    
    .final_amount strong {
        font-size: 18px;
    }
    
    .summary-product > span {
        font-size: 14px;
    }
}

/* ============================================
   DARK THEME SUPPORT
   ============================================ */
.dark-theme .checkout-page {
    background: #0f0f1a;
}

.dark-theme .checkout-section,
.dark-theme .checkout-summary {
    background: #1a1a2e;
    border-color: rgba(255,255,255,.06);
}

.dark-theme .checkout-title {
    color: var(--white);
    border-color: rgba(255,255,255,.06);
}

.dark-theme .form-group label {
    color: var(--ink-300);
}

.dark-theme .form-group .form-control,
.dark-theme .form-group input:not([type="checkbox"]):not([type="radio"]),
.dark-theme .form-group select,
.dark-theme .form-group textarea,
.dark-theme .discount-row input {
    background: #14142a;
    border-color: rgba(255,255,255,.08);
    color: var(--white);
}

.dark-theme .form-group .form-control::placeholder,
.dark-theme .form-group input:not([type="checkbox"]):not([type="radio"])::placeholder,
.dark-theme .discount-row input::placeholder {
    color: var(--ink-500);
}

.dark-theme .form-group .form-control:focus,
.dark-theme .form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.dark-theme .form-group select:focus,
.dark-theme .form-group textarea:focus,
.dark-theme .discount-row input:focus {
    border-color: var(--p1);
}

.dark-theme .checkout-checkbox label {
    color: var(--ink-300);
}

.dark-theme .shipping-option {
    background: #14142a;
    border-color: rgba(255,255,255,.08);
}

.dark-theme .shipping-option:hover {
    background: rgba(255,255,255,.03);
}

.dark-theme .shipping-option-name {
    color: var(--white);
}

.dark-theme .payment-option {
    border-color: rgba(255,255,255,.08);
}

.dark-theme .payment-option-header:hover {
    background: rgba(255,255,255,.03);
}

.dark-theme .payment-option-label {
    color: var(--white);
}

.dark-theme .card-fields {
    background: #14142a;
    border-color: rgba(255,255,255,.06);
}

.dark-theme .summary-title {
    color: var(--white);
    border-color: rgba(255,255,255,.06);
}

.dark-theme .summary-product {
    background: #14142a;
}

.dark-theme .summary-product:hover {
    background: rgba(255,255,255,.03);
}

.dark-theme .product-info h4 {
    color: var(--white);
}

.dark-theme .summary-line {
    color: var(--ink-300);
}

.dark-theme .summary-total {
    border-color: rgba(255,255,255,.06);
}

.dark-theme .summary-total > span {
    color: var(--white);
}

.dark-theme .discount-row button {
    background: var(--p1);
}

.dark-theme .discount-row button:hover {
    background: var(--p2);
}

.dark-theme .return-cart {
    color: var(--ink-500);
}

.dark-theme .return-cart:hover {
    color: var(--p1);
}

.dark-theme .cvv-wrapper .cvv-tooltip-text {
    background: var(--white);
    color: var(--ink-900);
}

.dark-theme .cvv-wrapper .cvv-tooltip-text::after {
    border-top-color: var(--white);
}

/* ============================================
   UTILITY
   ============================================ */
.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   VALIDATION STATES
   ============================================ */
.field-valid {
    border-color: #10b981 !important;
}

.field-valid:focus {
    box-shadow: 0 0 0 3px rgba(16,185,129,.12), 0 0 0 1px #10b981 !important;
}

.field-error {
    border-color: #ef4444 !important;
}

.field-error:focus {
    box-shadow: 0 0 0 3px rgba(239,68,68,.12), 0 0 0 1px #ef4444 !important;
}

.field-error-message {
    display: flex !important;
    color: #ef4444;
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    align-items: center;
    gap: 4px;
}

.field-error-message::before {
    content: '⚠';
    font-size: 13px;
}

/* ============================================
   THANK YOU PAGE LAYOUT
   ============================================ */
   .thankyou-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-soft);
    padding: 40px 20px;
    margin-top: 60px;
}

.thankyou-main .luxe-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: stretch;
    background: var(--white);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    min-height: 600px;
}

/* ============================================
   LEFT - IMAGE PANEL
   ============================================ */
.thankyou-img-wrap {
    position: relative;
    background: linear-gradient(145deg, #1a2a3a, #0d1b26);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

.thankyou-img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0,154,208,.15), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0,60,191,.10), transparent 40%);
    z-index: 1;
}

.thankyou-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    opacity: 0.6;
    transition: opacity 0.6s ease;
}

.thankyou-img-wrap img.loaded {
    opacity: 1;
}

/* Success Icon */
.thankyou-img-wrap .success-icon {
    position: relative;
    z-index: 2;
    width: 120px;
    height: 120px;
    background: var(--grad-brand);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-check 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(0,60,191,.3);
}

@keyframes pulse-check {
    0% {
        box-shadow: 0 0 0 0 rgba(0,60,191,.3);
    }
    50% {
        box-shadow: 0 0 0 30px rgba(0,60,191,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0,60,191,0);
    }
}

.thankyou-img-wrap .success-icon svg {
    width: 56px;
    height: 56px;
    fill: none;
    stroke: var(--white);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Overlay Text */
.thankyou-img-overlay {
    position: absolute;
    bottom: 50px;
    left: 50px;
    right: 50px;
    z-index: 2;
    color: var(--white);
}

.thankyou-img-overlay h2 {
    font-family: var(--font-head);
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    color: var(--white);
}

.thankyou-img-overlay p {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: rgba(255,255,255,.75);
    margin: 0;
    line-height: 1.6;
}

/* Floating decorative shapes */
.thankyou-img-wrap .shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.thankyou-img-wrap .shape-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(0,154,208,.08), transparent 70%);
    animation: float-shape 8s ease-in-out infinite;
}

.thankyou-img-wrap .shape-2 {
    width: 200px;
    height: 200px;
    bottom: -60px;
    left: -60px;
    background: radial-gradient(circle, rgba(0,60,191,.06), transparent 70%);
    animation: float-shape 10s ease-in-out infinite reverse;
}

@keyframes float-shape {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.1); }
}

/* ============================================
   RIGHT - DETAILS PANEL
   ============================================ */
.thankyou-details {
    padding: 50px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
}

.thankyou-brand {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--p1);
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bg-tint);
}

.thankyou-headline {
    font-family: var(--font-head);
    font-size: 44px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.thankyou-headline .highlight {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.thankyou-body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-700);
    margin: 0 0 24px;
}

.thankyou-body strong {
    color: var(--ink-900);
    font-weight: 600;
}

.thankyou-divider {
    border: none;
    border-top: 2px solid var(--ink-100);
    margin: 20px 0 24px;
}

/* ============================================
   ORDER REFERENCE
   ============================================ */
.thankyou-order-ref {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-soft);
    border-radius: var(--r-sm);
    margin-bottom: 28px;
    border-left: 4px solid var(--p1);
}

.order-ref-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.order-ref-value {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--p1);
    margin: 0;
    letter-spacing: 0.5px;
}

/* ============================================
   BUTTON
   ============================================ */
.btn-return {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: var(--grad-brand);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    text-decoration: none;
    width: fit-content;
    box-shadow: var(--shadow-btn);
    position: relative;
    overflow: hidden;
}

.btn-return::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 60%);
    opacity: 0;
    transition: opacity var(--dur-fast) ease;
}

.btn-return:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,60,191,.40);
    color: var(--white);
}

.btn-return:hover::before {
    opacity: 1;
}

.btn-return:active {
    transform: translateY(0) scale(0.98);
}

.btn-return i {
    font-size: 18px;
    transition: transform var(--dur-fast) ease;
}

.btn-return:hover i {
    transform: translateX(4px);
}

/* ============================================
   ANIMATIONS
   ============================================ */
.thankyou-details {
    animation: fade-slide-up 0.7s var(--ease) forwards;
}

@keyframes fade-slide-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.thankyou-img-wrap {
    animation: fade-in 0.9s var(--ease) forwards;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .thankyou-main .luxe-container {
        gap: 30px;
    }
    
    .thankyou-headline {
        font-size: 36px;
    }
    
    .thankyou-details {
        padding: 40px 32px;
    }
    
    .thankyou-img-overlay h2 {
        font-size: 34px;
    }
}

@media (max-width: 991px) {
    .thankyou-main .luxe-container {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: var(--r-md);
    }
    
    .thankyou-img-wrap {
        min-height: 280px;
        border-radius: var(--r-md) var(--r-md) 0 0;
    }
    
    .thankyou-img-wrap .success-icon {
        width: 80px;
        height: 80px;
    }
    
    .thankyou-img-wrap .success-icon svg {
        width: 38px;
        height: 38px;
    }
    
    .thankyou-img-overlay {
        bottom: 30px;
        left: 30px;
        right: 30px;
    }
    
    .thankyou-img-overlay h2 {
        font-size: 28px;
    }
    
    .thankyou-img-overlay p {
        font-size: 14px;
    }
    
    .thankyou-details {
        padding: 30px 24px;
        border-radius: 0 0 var(--r-md) var(--r-md);
    }
    
    .thankyou-headline {
        font-size: 30px;
    }
    
    .thankyou-body {
        font-size: 15px;
    }
    
    .btn-return {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .thankyou-main {
        padding: 20px 12px;
        margin-top: 50px;
    }
    
    .thankyou-main .luxe-container {
        border-radius: var(--r-sm);
    }
    
    .thankyou-img-wrap {
        min-height: 200px;
    }
    
    .thankyou-img-wrap .success-icon {
        width: 64px;
        height: 64px;
    }
    
    .thankyou-img-wrap .success-icon svg {
        width: 30px;
        height: 30px;
    }
    
    .thankyou-img-overlay {
        bottom: 20px;
        left: 20px;
        right: 20px;
    }
    
    .thankyou-img-overlay h2 {
        font-size: 22px;
        margin-bottom: 4px;
    }
    
    .thankyou-img-overlay p {
        font-size: 13px;
    }
    
    .thankyou-details {
        padding: 24px 18px;
    }
    
    .thankyou-brand {
        font-size: 11px;
        letter-spacing: 1.5px;
    }
    
    .thankyou-headline {
        font-size: 26px;
    }
    
    .thankyou-body {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .thankyou-order-ref {
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .order-ref-label {
        font-size: 12px;
    }
    
    .order-ref-value {
        font-size: 16px;
    }
    
    .btn-return {
        padding: 12px 24px;
        font-size: 13px;
    }
    
    .thankyou-divider {
        margin: 16px 0 18px;
    }
}

@media (max-width: 480px) {
    .thankyou-main {
        padding: 10px 8px;
        margin-top: 40px;
    }
    
    .thankyou-img-wrap {
        min-height: 160px;
    }
    
    .thankyou-img-wrap .success-icon {
        width: 54px;
        height: 54px;
    }
    
    .thankyou-img-wrap .success-icon svg {
        width: 26px;
        height: 26px;
    }
    
    .thankyou-img-overlay h2 {
        font-size: 18px;
    }
    
    .thankyou-img-overlay p {
        font-size: 12px;
    }
    
    .thankyou-details {
        padding: 18px 14px;
    }
    
    .thankyou-headline {
        font-size: 22px;
    }
    
    .thankyou-body {
        font-size: 13px;
    }
    
    .thankyou-order-ref {
        padding: 10px 14px;
    }
    
    .order-ref-value {
        font-size: 14px;
    }
    
    .btn-return {
        padding: 10px 18px;
        font-size: 12px;
    }
}

/* ============================================
   DARK THEME SUPPORT
   ============================================ */
.dark-theme .thankyou-main {
    background: #0f0f1a;
}

.dark-theme .thankyou-main .luxe-container {
    background: #1a1a2e;
    border-color: rgba(255,255,255,.06);
}

.dark-theme .thankyou-details {
    background: #1a1a2e;
}

.dark-theme .thankyou-brand {
    color: var(--p2);
    border-color: rgba(255,255,255,.06);
}

.dark-theme .thankyou-headline {
    color: var(--white);
}

.dark-theme .thankyou-body {
    color: var(--ink-300);
}

.dark-theme .thankyou-body strong {
    color: var(--white);
}

.dark-theme .thankyou-divider {
    border-color: rgba(255,255,255,.06);
}

.dark-theme .thankyou-order-ref {
    background: rgba(255,255,255,.04);
    border-left-color: var(--p1);
}

.dark-theme .order-ref-label {
    color: var(--ink-500);
}

.dark-theme .order-ref-value {
    color: var(--p2);
}

/* ============================================
   CONFETTI / SUCCESS ANIMATION
   ============================================ */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -10px;
    animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-glow {
    box-shadow: var(--shadow-glow);
}

.anim-fade-up {
    animation: fade-up var(--dur) var(--ease) forwards;
    opacity: 0;
}

@keyframes fade-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/*==================================
        BLOG DETAILS
==================================*/

.blog-details{
  padding:100px 0;
  background:var(--bg-soft);
  position:relative;
  overflow:hidden;
}

.blog-details::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--grad-radial);
  pointer-events:none;
}

.blog-details .container{
  position:relative;
  z-index:2;
  max-width:920px;
}

/*==================================
      Header
==================================*/

.blog-header{
  text-align:center;
  margin-bottom:60px;
}

.blog-date{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 22px;
  border-radius:var(--r-pill);
  background:rgba(0,60,191,.08);
  color:var(--p1);
  font-size:15px;
  font-weight:600;
  margin-bottom:24px;
}

.blog-header h1{
  font-family:var(--font-head);
  font-size:clamp(2.3rem,5vw,3.6rem);
  font-weight:700;
  color:var(--ink-900);
  line-height:1.2;
  margin-bottom:25px;
}

.blog-intro{
  max-width:760px;
  margin:auto;
  font-size:18px;
  line-height:1.9;
  color:var(--ink-500);
}

/*==================================
      Featured Image
==================================*/

.blog-details img{
  width:100%;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  transition:all var(--dur) var(--ease);
}

.blog-details img:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-glow);
}

/*==================================
      Content
==================================*/

.blog-content{
  margin-top:50px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r-lg);
  padding:60px;
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
}

.blog-content::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background:var(--grad-brand);
}

/*==================================
      Typography
==================================*/

.blog-content h2{
  font-family:var(--font-head);
  font-size:32px;
  color:var(--ink-900);
  margin:45px 0 18px;
  padding-left:18px;
  position:relative;
}

.blog-content h2::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:36px;
  border-radius:20px;
  background:var(--grad-brand);
}

.blog-content p{
  color:var(--ink-700);
  font-size:17px;
  line-height:1.9;
  margin-bottom:24px;
}

/*==================================
      Lists
==================================*/

.blog-content ul{
  margin:25px 0;
  padding:0;
}

.blog-content li{
  list-style:none;
  position:relative;
  padding-left:34px;
  margin-bottom:16px;
  color:var(--ink-700);
}

.blog-content li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:2px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--grad-brand);
  color:#fff;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/*==================================
      Blockquote
==================================*/

.blog-content blockquote{
  margin:50px 0;
  padding:40px;
  border-radius:var(--r-md);
  background:var(--grad-brand);
  color:#fff;
  font-size:22px;
  line-height:1.8;
  font-weight:600;
  position:relative;
  overflow:hidden;
}

.blog-content blockquote::before{
  content:"❝";
  position:absolute;
  right:20px;
  top:-20px;
  font-size:120px;
  opacity:.15;
}

/*==================================
      Images inside content
==================================*/

.blog-content img{
  margin:35px 0;
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
}

/*==================================
      Links
==================================*/

.blog-content a{
  color:var(--p1);
  font-weight:600;
  text-decoration:none;
  transition:color var(--dur);
}

.blog-content a:hover{
  color:var(--p2);
}

/*==================================
      Author Card
==================================*/

.author-box{
  margin-top:70px;
  display:flex;
  align-items:center;
  gap:24px;
  background:var(--white);
  border-radius:var(--r-md);
  padding:30px;
  box-shadow:var(--shadow-md);
}

.author-box img{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
}

.author-box h5{
  font-family:var(--font-head);
  color:var(--ink-900);
  margin-bottom:8px;
}

.author-box p{
  margin:0;
  color:var(--ink-500);
}

/*==================================
      Tags
==================================*/

.blog-tags{
  margin-top:50px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.blog-tags a{
  padding:10px 20px;
  border-radius:var(--r-pill);
  background:var(--bg-tint);
  color:var(--p1);
  font-size:14px;
  font-weight:600;
  transition:all var(--dur) var(--ease);
}

.blog-tags a:hover{
  color:#fff;
  background:var(--grad-brand);
  transform:translateY(-3px);
}

/*==================================
      Share Buttons
==================================*/

.blog-share{
  margin-top:45px;
  display:flex;
  align-items:center;
  gap:14px;
}

.blog-share span{
  font-weight:700;
  color:var(--ink-900);
}

.blog-share a{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--bg-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--p1);
  transition:all var(--dur) var(--ease);
}

.blog-share a:hover{
  background:var(--grad-brand);
  color:#fff;
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
}

/*==================================
      Responsive
==================================*/

@media (max-width:991px){

.blog-details{
  padding:80px 0;
}

.blog-content{
  padding:40px;
}

.blog-header h1{
  font-size:42px;
}

}

@media (max-width:767px){

.blog-details{
  padding:60px 0;
}

.blog-header h1{
  font-size:32px;
}

.blog-intro{
  font-size:16px;
}

.blog-content{
  padding:28px;
}

.blog-content h2{
  font-size:26px;
}

.blog-content p{
  font-size:16px;
}

.blog-content blockquote{
  padding:28px;
  font-size:19px;
}

.author-box{
  flex-direction:column;
  text-align:center;
}

.blog-share{
  flex-wrap:wrap;
}

}

.terms_body p{
  font-size: 15px;
  line-height: 25px;
}


#cookiePopup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #006ec8 !important;
  color: #fff;
  padding: 15px;
  display: flex;
  flex-wrap: nowrap;
  z-index: 999999;
  gap: 20px;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: none;
  right: 0;
}

.cookie_content {
  text-align: left;
}

.cookie_content h4{
  color: #fff;
}

.cookieBtns {
  display: inline-flex;
  gap: 10px;
}

#cookiePopup .cookieBtns button#acceptCookie, #cookiePopup .cookieBtns button#declineCookie {
  font-size: 15px;
  margin: 10px 0;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  background: #000000;
  cursor: pointer;
  transition: all 0.5s ease;
  border: 2px solid #000000;
}

#cookiePopup .cookieBtns button#declineCookie:last-child {
  background-color: #4abcdd;
  color: #fff;
  border-color: #4abcdd;
}

.form-check-input:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}