/* ============================================
   KM Creations – Pink Yarn & Wool Theme
   Palette:
     Rose Pink    #E8547A
     Deep Rose    #C23B63
     Blush        #FDE8EF
     Soft Pink    #F9C8D9
     Cream White  #FFF5F8
     Dark Text    #3D1A26
     Muted        #9B6070
   Fonts: Playfair Display + Nunito
   ============================================ */

/* Fonts loaded via <link> in layout.html head — @import removed to avoid double load */

:root {
  --km-pink:        #E8547A;
  --km-pink-dark:   #C23B63;
  --km-pink-light:  #F0799A;
  --km-blush:       #FDE8EF;
  --km-soft:        #F9C8D9;
  --km-cream:       #FFF5F8;
  --km-bg:          #FFF8FA;
  --km-border:      #F2C4D4;
  --km-text:        #3D1A26;
  --km-muted:       #9B6070;
  --km-radius:      14px;
  --km-shadow:      0 4px 28px rgba(232,84,122,.13);
  --km-transition:  .25s ease;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--km-bg);
  color: var(--km-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* =============================================
   LIVE YARN BACKGROUND  (CSS-only, no emoji)
   Layered: base gradient + soft mesh overlay
   + three slow-drifting radial orbs + thread lines
   ============================================= */

/* Base parchment gradient that slowly shifts */
.yarn-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(232,84,122,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(194,59,99,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 40%, rgba(249,200,217,.15) 0%, transparent 50%),
    linear-gradient(160deg, #FFF8FA 0%, #FFF0F5 50%, #FDE8EF 100%);
  animation: bgShift 30s ease-in-out infinite alternate;
}

@keyframes bgShift {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  50%  { filter: hue-rotate(5deg) brightness(1.015); }
  100% { filter: hue-rotate(-3deg) brightness(0.99); }
}

/* Soft diagonal thread-line mesh */
.yarn-threads {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .045;
  background-image:
    repeating-linear-gradient(
      135deg,
      var(--km-pink) 0px,
      var(--km-pink) 1px,
      transparent 1px,
      transparent 48px
    ),
    repeating-linear-gradient(
      45deg,
      var(--km-pink-dark) 0px,
      var(--km-pink-dark) 1px,
      transparent 1px,
      transparent 72px
    );
  animation: threadsDrift 40s linear infinite;
}

@keyframes threadsDrift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 200px 200px, -150px 150px; }
}

/* Orb 1 – large top-left */
.yarn-orb {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
}
.yarn-orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(232,84,122,.18) 0%, transparent 70%);
  top: -120px; left: -100px;
  animation: orb1 22s ease-in-out infinite alternate;
}
.yarn-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(194,59,99,.14) 0%, transparent 70%);
  bottom: -80px; right: -80px;
  animation: orb2 28s ease-in-out infinite alternate;
}
.yarn-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(249,200,217,.22) 0%, transparent 65%);
  top: 40%; left: 50%;
  transform: translate(-50%,-50%);
  animation: orb3 18s ease-in-out infinite alternate;
}

@keyframes orb1 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(80px, 70px) scale(1.2); }
}
@keyframes orb2 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-70px, -60px) scale(1.15); }
}
@keyframes orb3 {
  0%   { transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  100% { transform: translate(-50%,-50%) scale(1.3) rotate(15deg); }
}

/* =============================================
   PAGE WRAPPER (above floating bg)
   ============================================= */
.page-content {
  position: relative;
  z-index: 1;
}

/* =============================================
   NAVBAR
   ============================================= */
.km-navbar {
  background: linear-gradient(135deg, #C23B63 0%, #E8547A 60%, #F0799A 100%);
  padding: .6rem 0;
  z-index: 1030;
  box-shadow: 0 2px 20px rgba(194,59,99,.35);
  position: relative;
}

.km-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.km-brand-logo {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.5);
  background: #fff;
}
.km-brand-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: #fff;
  line-height: 1.1;
  letter-spacing: .5px;
}
.km-brand-text span {
  display: block;
  font-size: .6rem;
  letter-spacing: 3px;
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  opacity: .8;
  text-transform: uppercase;
}

.km-navbar .nav-link {
  color: rgba(255,255,255,.9) !important;
  font-weight: 600;
  font-size: .88rem;
  padding: .4rem .65rem !important;
  border-radius: 8px;
  transition: background var(--km-transition);
}
.km-navbar .nav-link:hover {
  background: rgba(255,255,255,.18);
  color: #fff !important;
}

.km-search .form-control {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px 0 0 10px;
  font-size: .9rem;
}
.km-search .form-control::placeholder { color: rgba(255,255,255,.6); }
.km-search .form-control:focus {
  background: rgba(255,255,255,.28);
  color: #fff;
  box-shadow: none;
  border-color: rgba(255,255,255,.6);
}
.km-search .btn {
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.3);
  border-left: none;
  border-radius: 0 10px 10px 0;
  color: #fff;
}
.km-search .btn:hover { background: rgba(255,255,255,.38); }

.km-avatar {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.22);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: #fff;
  border: 1px solid rgba(255,255,255,.4);
}

.km-cart-badge { position: relative; display: inline-block; }
.km-cart-badge .badge {
  position: absolute; top: -8px; right: -8px;
  background: #fff;
  color: var(--km-pink-dark);
  font-size: .65rem;
  font-weight: 700;
}

/* =============================================
   HERO SECTION
   ============================================= */
.km-hero {
  min-height: 580px;
  background: #14050D;
  display: flex; align-items: center;
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}

/* Yarn circle decorations in hero */
.km-hero::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 60px solid rgba(255,255,255,.07);
  top: -100px; right: -100px;
}
.km-hero::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 40px solid rgba(255,255,255,.05);
  bottom: -80px; left: 10%;
}

.km-hero-logo {
  width: 180px; height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255,255,255,.4);
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
  background: #fff;
  animation: heroBob 4s ease-in-out infinite;
}
@keyframes heroBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Hero background video — scoped to .km-hero only (home page) */
.km-hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.km-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.km-hero-video-overlay {
  position: absolute;
  inset: 0;
  /* Neutral dark tint (not the hero's own pink hue) so the video stays visibly distinct, not masked */
  background: linear-gradient(160deg, rgba(20,5,15,.45) 0%, rgba(30,8,20,.35) 50%, rgba(40,12,25,.25) 100%);
  z-index: 1;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-km {
  background: linear-gradient(135deg, var(--km-pink-dark), var(--km-pink));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  transition: all var(--km-transition);
  box-shadow: 0 3px 16px rgba(232,84,122,.35);
}
.btn-km:hover {
  background: linear-gradient(135deg, #A8305A, var(--km-pink-dark));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(232,84,122,.45);
}
.btn-km-outline {
  border: 2px solid var(--km-pink);
  color: var(--km-pink);
  background: transparent;
  border-radius: 10px;
  font-weight: 700;
  transition: all var(--km-transition);
}
.btn-km-outline:hover {
  background: var(--km-pink);
  color: #fff;
}

/* White variant for hero */
.btn-km-white {
  background: #fff;
  color: var(--km-pink-dark);
  border: none;
  border-radius: 10px;
  font-weight: 700;
  transition: all var(--km-transition);
  box-shadow: 0 3px 16px rgba(0,0,0,.12);
}
.btn-km-white:hover {
  background: var(--km-blush);
  color: var(--km-pink-dark);
  transform: translateY(-2px);
}

/* =============================================
   PRODUCT CARDS
   ============================================= */
.km-product-card {
  background: #fff;
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius);
  transition: transform var(--km-transition), box-shadow var(--km-transition);
  overflow: hidden;
}
.km-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(232,84,122,.2);
}

.km-product-img-wrap {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--km-blush);
  position: relative;
}
.km-product-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.km-product-card:hover .km-product-img { transform: scale(1.07); }

.km-product-overlay {
  position: absolute; inset: 0;
  background: rgba(194,59,99,.5);
  opacity: 0;
  transition: opacity var(--km-transition);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.km-product-card:hover .km-product-overlay { opacity: 1; }

/* =============================================
   COLOR SWATCHES
   ============================================= */
.color-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--km-transition), transform var(--km-transition);
  display: inline-block;
}
.color-swatch.active,
.color-swatch:hover {
  border-color: var(--km-pink-dark);
  transform: scale(1.25);
}

/* =============================================
   SECTION TITLES
   ============================================= */
.km-section-title {
  font-family: 'Playfair Display', serif;
  color: var(--km-pink-dark);
  position: relative;
  display: inline-block;
}
.km-section-title::after {
  content: '';
  display: block;
  width: 55%;
  height: 3px;
  background: linear-gradient(to right, var(--km-pink), transparent);
  margin-top: 6px;
  border-radius: 2px;
}

/* =============================================
   CARDS / CONTAINERS
   ============================================= */
.km-card {
  background: #fff;
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius);
  box-shadow: var(--km-shadow);
}
.km-card-header {
  background: linear-gradient(135deg, var(--km-pink-dark), var(--km-pink));
  color: #fff;
  border-radius: var(--km-radius) var(--km-radius) 0 0;
  padding: 20px 24px;
  font-family: 'Playfair Display', serif;
}

/* =============================================
   TRUST BADGES
   ============================================= */
.km-badge-card {
  background: #fff;
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius);
  transition: transform var(--km-transition), box-shadow var(--km-transition);
}
.km-badge-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--km-shadow);
}

/* =============================================
   AUTH FORMS
   ============================================= */
.km-auth-wrap {
  min-height: 100vh;
  background: linear-gradient(160deg, #FDE8EF 0%, #FFF5F8 50%, #F9C8D9 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px;
  position: relative;
  overflow: hidden;
}
.km-auth-wrap::before {
  content: '';
  position: absolute; top: 5%; left: 5%;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,84,122,.12) 0%, transparent 70%);
  font-size: 0; opacity: 1;
  animation: floatYarn 12s linear infinite;
}
.km-auth-wrap::after {
  content: '🪡';
  position: absolute; bottom: 10%; right: 8%;
  font-size: 4rem; opacity: .1;
  animation: floatYarn 16s linear infinite reverse;
}

.km-auth-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 60px rgba(232,84,122,.2);
  overflow: hidden;
  width: 100%; max-width: 440px;
}
.km-auth-header {
  background: linear-gradient(135deg, #C23B63, #E8547A);
  padding: 32px;
  text-align: center;
}
.km-auth-header .auth-logo {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.5);
  margin-bottom: 12px;
  background: #fff;
}
.km-auth-header h1 {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 1.7rem;
  margin: 0;
  letter-spacing: 1px;
}
.km-auth-header .tagline {
  color: rgba(255,255,255,.7);
  font-size: .7rem;
  letter-spacing: 3px;
  margin: 6px 0 0;
}
.km-auth-body { padding: 32px; }

.km-form-label {
  color: var(--km-pink-dark);
  font-weight: 700;
  font-size: .88rem;
  margin-bottom: 5px;
}
.km-form-control {
  border: 1.5px solid var(--km-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .95rem;
  transition: border-color var(--km-transition), box-shadow var(--km-transition);
  background: var(--km-cream);
}
.km-form-control:focus {
  border-color: var(--km-pink);
  box-shadow: 0 0 0 3px rgba(232,84,122,.15);
  outline: none;
  background: #fff;
}

/* OTP boxes */
.otp-input {
  width: 44px; height: 52px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  border: 2px solid var(--km-border);
  border-radius: 10px;
  background: var(--km-cream);
  transition: border-color var(--km-transition);
}
.otp-input:focus {
  border-color: var(--km-pink);
  box-shadow: 0 0 0 3px rgba(232,84,122,.15);
  outline: none;
}

/* =============================================
   REVIEWS
   ============================================= */
.km-review-card {
  background: var(--km-cream);
  border: 1px solid var(--km-border);
  border-radius: 12px;
  padding: 16px;
}
.star-rating .star { font-size: 1.4rem; cursor: pointer; transition: color var(--km-transition); }

/* =============================================
   ORDER STATUS BADGES
   ============================================= */
.km-status-badge {
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  letter-spacing: .4px;
}
.status-CONFIRMED, .status-PROCESSING { background: #FFF3CD; color: #856404; }
.status-SHIPPED   { background: #CCE5FF; color: #004085; }
.status-DELIVERED { background: #D4EDDA; color: #155724; }
.status-CANCELLED { background: #F8D7DA; color: #721C24; }
.status-PENDING   { background: #E2E3E5; color: #383D41; }
.paid-tick {
  display: inline-flex; align-items: center; gap: 4px;
  background: #D4EDDA; color: #155724;
  border-radius: 20px; padding: 3px 10px;
  font-size: .72rem; font-weight: 700;
}

/* =============================================
   FOOTER
   ============================================= */
.km-footer {
  background: linear-gradient(135deg, #A8305A 0%, #C23B63 50%, #E8547A 100%);
  color: rgba(255,255,255,.85);
  font-size: .88rem;
  padding: 40px 0 20px;
}
.km-footer a { color: rgba(255,255,255,.75); text-decoration: none; transition: color var(--km-transition); }
.km-footer a:hover { color: #fff; }
.km-footer h5 { font-family: 'Playfair Display', serif; color: #fff; letter-spacing: 1px; }
.km-footer-logo {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.4);
  background: #fff;
}

/* =============================================
   ALERTS
   ============================================= */
.km-alert-success {
  background: #FFF0F5;
  border: 1px solid var(--km-soft);
  color: var(--km-pink-dark);
  border-radius: 10px;
}
.km-alert-error {
  background: #FFF0EE;
  border: 1px solid #F5A0A0;
  color: #8B0000;
  border-radius: 10px;
}

/* =============================================
   CHECKOUT
   ============================================= */
.km-shipping-info {
  background: var(--km-blush);
  border: 1px dashed var(--km-pink);
  border-radius: 10px;
  padding: 12px;
  font-size: .9rem;
  color: var(--km-pink-dark);
}

/* =============================================
   ADMIN PANEL
   ============================================= */
.km-admin-sidebar {
  background: linear-gradient(180deg, #A8305A 0%, #C23B63 50%, #E8547A 100%);
  min-height: 100vh;
  width: 220px;
  padding: 20px 0;
  position: fixed; left: 0; top: 0; bottom: 0;
  z-index: 100;
}
.km-admin-sidebar .nav-link {
  color: rgba(255,255,255,.8);
  padding: 10px 20px;
  font-size: .9rem;
  transition: background var(--km-transition);
}
.km-admin-sidebar .nav-link:hover,
.km-admin-sidebar .nav-link.active {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.km-admin-content {
  margin-left: 220px;
  padding: 24px;
}

/* =============================================
   UTILITY
   ============================================= */
.font-serif  { font-family: 'Playfair Display', serif; }
.text-km     { color: var(--km-pink-dark); }
.bg-km-cream { background: var(--km-cream); }
.border-km   { border-color: var(--km-border) !important; }

/* =============================================
   MOBILE RESPONSIVE – Global fixes
   ============================================= */

/* Product detail action buttons stack on mobile */
@media (max-width: 576px) {
  .d-flex.flex-wrap.gap-2 .btn {
    width: 100%;
    justify-content: center;
  }

  /* Product detail qty row */
  .d-flex.align-items-center.gap-3 {
    flex-wrap: wrap;
    gap: .75rem !important;
  }

  /* Headings scale down */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }

  /* Price text */
  .fs-3 { font-size: 1.4rem !important; }

  /* Cards full-width padding */
  .km-card { padding: 1rem !important; }

  /* Hero section on home */
  .km-hero-title { font-size: 2rem !important; }

  /* Breadcrumb wraps */
  .breadcrumb { flex-wrap: wrap; font-size: .82rem; }

  /* Color dropdown full width on mobile */
  #colorDropdown { max-width: 100% !important; }

  /* Cart table adjustments */
  .table td, .table th { font-size: .82rem; padding: .4rem .5rem; }

  /* Admin sidebar collapse on mobile */
  .km-admin-sidebar { width: 100%; position: relative; min-height: auto; }
  .km-admin-content { margin-left: 0; padding: 16px; }
}

@media (max-width: 767px) {
  /* Product grid 2-col on phones */
  .col-6 { padding-left: 8px; padding-right: 8px; }

  /* Search bar full width */
  .km-search { width: 100%; max-width: 100% !important; }

  /* Footer columns stack */
  .km-footer .row > div { margin-bottom: 1.25rem; }

  /* Section title smaller */
  .km-section-title { font-size: 1.2rem; }

  /* Checkout summary card */
  .km-checkout-summary { margin-top: 1.5rem; }
}

/* =============================================
   FIXES & NEW COMPONENTS
   ============================================= */

/* Remove duplicate Google Fonts @import — fonts are loaded via <link> in layout.html */
/* (The @import at the top of this file has been removed) */

/* ── NAVBAR FIXES ─────────────────────────────────── */
.km-avatar-nav {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.5);
}
.km-nav-link {
  color: rgba(255,255,255,.9) !important;
  font-weight: 600;
  font-size: .9rem;
  padding: .45rem .9rem !important;
  border-radius: 10px;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .3px;
  text-decoration: none;
}
.km-nav-link:hover, .km-nav-link.active {
  background: rgba(255,255,255,.2);
  color: #fff !important;
  transform: translateY(-1px);
}
.km-icon-btn {
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  padding: .35rem .55rem;
  border: none;
  line-height: 1;
  transition: background .2s;
}
.km-icon-btn:hover { background: rgba(255,255,255,.28); }
.km-mobile-menu {
  padding: .5rem 0 .75rem;
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: .25rem;
  display: flex; flex-direction: column; gap: 2px;
}
.km-mobile-link {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.92);
  font-weight: 600; font-size: .95rem;
  padding: .65rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .18s;
  cursor: pointer;
}
.km-mobile-link:hover { background: rgba(255,255,255,.18); color: #fff; }
.km-mobile-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.km-mobile-logout { background: rgba(255,100,100,.15); color: #ffaaaa; }

/* ── PAGE BACKGROUND — homepage only ─────────────── */
/* Orb animations respect prefers-reduced-motion */
.km-page-bg {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(232,84,122,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(194,59,99,.14) 0%, transparent 50%),
    radial-gradient(ellipse at 55% 45%, rgba(249,200,217,.2) 0%, transparent 45%),
    linear-gradient(160deg, #FFF0F5 0%, #FFF8FA 40%, #FDE8EF 100%);
}
.km-orb {
  position: fixed; pointer-events: none; z-index: 0;
  border-radius: 50%; filter: blur(70px); opacity: .6;
}
.km-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(232,84,122,.2) 0%, transparent 65%);
  top: -120px; left: -100px;
}
.km-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(194,59,99,.16) 0%, transparent 65%);
  bottom: -80px; right: -80px;
}
.km-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(249,180,210,.25) 0%, transparent 60%);
  top: 35%; left: 60%;
}
.km-threads {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: .03;
  background-image:
    repeating-linear-gradient(135deg, #C23B63 0px, #C23B63 1px, transparent 1px, transparent 52px),
    repeating-linear-gradient(45deg, #E8547A 0px, #E8547A 1px, transparent 1px, transparent 78px);
}
@media (prefers-reduced-motion: no-preference) {
  .km-page-bg { animation: bgPulse 20s ease-in-out infinite alternate; }
  .km-orb-1   { animation: floatOrb1 25s ease-in-out infinite alternate; }
  .km-orb-2   { animation: floatOrb2 30s ease-in-out infinite alternate; }
  .km-orb-3   { animation: floatOrb3 20s ease-in-out infinite alternate; }
  .km-threads { animation: threadsDrift 45s linear infinite; }
}
@keyframes bgPulse {
  0%   { opacity: 1; filter: hue-rotate(0deg); }
  100% { opacity: .95; filter: hue-rotate(4deg); }
}
@keyframes floatOrb1 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(80px,70px) scale(1.15); }
}
@keyframes floatOrb2 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-70px,-60px) scale(1.1); }
}
@keyframes floatOrb3 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-40px,40px) scale(1.2); }
}
@keyframes threadsDrift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 200px 200px, -160px 160px; }
}

/* ── COLOUR SWATCH MAP ────────────────────────────── */
/* Named yarn colours → real hex values               */
/* Used by JS in main.js to set swatch backgrounds    */
:root {
  --swatch-white:      #FFFFFF;
  --swatch-pink:       #FFB7C5;
  --swatch-blue:       #89CFF0;
  --swatch-yellow:     #FFE066;
  --swatch-red:        #E05D5D;
  --swatch-navy:       #2E3F6F;
  --swatch-grey:       #A8A8A8;
  --swatch-gray:       #A8A8A8;
  --swatch-black:      #2C2C2C;
  --swatch-cream:      #F5ECD7;
  --swatch-ivory:      #FFFFF0;
  --swatch-beige:      #D4B896;
  --swatch-brown:      #8B5E3C;
  --swatch-natural:    #D4C5A9;
  --swatch-terracotta: #C6724B;
  --swatch-sage:       #8FAF7E;
  --swatch-mint:       #98DEC8;
  --swatch-lavender:   #C4A8D4;
  --swatch-purple:     #9B6BB5;
  --swatch-blush:      #F2B8C6;
  --swatch-burgundy:   #800020;
  --swatch-camel:      #C19A6B;
  --swatch-mustard:    #FFDB58;
  --swatch-peach:      #FFCBA4;
  --swatch-teal:       #2EAAAA;
  --swatch-orange:     #F4874B;
  --swatch-green:      #5BAD6F;
  --swatch-mixed:      linear-gradient(135deg,#FFB7C5,#89CFF0,#FFE066,#8FAF7E);
  --swatch-multi-color:#E8547A;
  --swatch-pastel:     linear-gradient(135deg,#FFD1DC,#D1ECF1,#D4EDDA);
}

/* ── INSTAGRAM PROMO BAR ──────────────────────────── */
.km-instagram-bar {
  background: linear-gradient(135deg, #833AB4 0%, #C13584 40%, #E1306C 70%, #F77737 100%);
  padding: .85rem 0;
  position: relative; z-index: 1;
}
.km-instagram-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.km-instagram-bar-left {
  display: flex; align-items: center; gap: 14px;
}
.km-instagram-icon-wrap {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff;
  flex-shrink: 0;
}
.km-instagram-bar-title {
  color: #fff; font-weight: 700; font-size: .95rem;
}
.km-instagram-bar-sub {
  color: rgba(255,255,255,.8); font-size: .78rem;
}
.km-instagram-bar-btn {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
  font-weight: 700; font-size: .88rem;
  padding: .5rem 1.2rem;
  border-radius: 30px;
  text-decoration: none;
  transition: background .2s, transform .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.km-instagram-bar-btn:hover {
  background: rgba(255,255,255,.3);
  color: #fff;
  transform: translateY(-1px);
}
@media (max-width: 575px) {
  .km-instagram-bar-inner { justify-content: center; text-align: center; }
  .km-instagram-bar-left  { flex-direction: column; gap: 6px; }
}

/* ── WHATSAPP CHAT BUTTON ─────────────────────────── */
.km-instagram-btn {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  padding: 12px 14px 12px 14px;
  box-shadow: 0 4px 20px rgba(214,36,159,.4);
  transition: transform .2s, box-shadow .2s, padding .2s;
  font-weight: 700; font-size: .9rem;
  max-width: 54px; overflow: hidden;
}
.km-instagram-btn:hover {
  max-width: 200px;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(214,36,159,.5);
  padding: 12px 18px 12px 14px;
}
.km-instagram-icon { font-size: 1.5rem; flex-shrink: 0; }
.km-instagram-label {
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width .3s ease, opacity .25s ease;
  font-size: .88rem;
}
.km-instagram-btn:hover .km-instagram-label {
  max-width: 140px;
  opacity: 1;
}

.km-whatsapp-btn {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  padding: 12px 18px 12px 14px;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: transform .2s, box-shadow .2s, padding .2s;
  font-weight: 700; font-size: .9rem;
  max-width: 54px; overflow: hidden;
}
.km-whatsapp-btn:hover {
  max-width: 200px;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,211,102,.55);
}
.km-whatsapp-icon { font-size: 1.5rem; flex-shrink: 0; }
.km-whatsapp-label {
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width .3s ease, opacity .25s ease;
  font-size: .88rem;
}
.km-whatsapp-btn:hover .km-whatsapp-label {
  max-width: 140px;
  opacity: 1;
}

/* ── FOOTER CONTACT LINKS ─────────────────────────── */
.km-footer-contact-link {
  display: inline-flex; align-items: center;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .9rem;
  transition: color .2s;
}
.km-footer-contact-link:hover { color: #fff; }

/* ── HERO IMAGE RING (replaces emoji decorations) ─── */
.km-hero-ring {
  position: relative;
  display: inline-block;
}
.km-hero-ring-outer {
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.km-hero-ring-inner {
  width: 255px; height: 255px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
  .km-hero-ring-outer { animation: heroSpin 30s linear infinite; }
}

/* ── WHY-CHOOSE ICONS (replaces large emoji) ──────── */
.km-feature-icon {
  width: 60px; height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--km-blush), var(--km-soft));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 1.6rem; color: var(--km-pink-dark);
}

/* ── SHIPPING LABEL ON PRODUCT DETAIL ─────────────── */
.km-shipping-label {
  font-size: .82rem;
  color: var(--km-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.km-shipping-label.free { color: #2D8A4E; font-weight: 700; }

/* ── LOADING SPINNER ON SUBMIT BUTTONS ────────────── */
.km-btn-loading { pointer-events: none; opacity: .8; }

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 767px) {
  /* Navbar */
  .km-brand-text { font-size: 1rem; }
  .km-brand-text span { font-size: .55rem; letter-spacing: 2px; }
  .km-brand-logo { width: 38px; height: 38px; }

  /* Layout */
  .container { padding-left: 12px; padding-right: 12px; }

  /* Product cards — 2 columns, tighter */
  .km-product-card .card-body { padding: 10px !important; }
  .km-product-card h6 { font-size: .82rem; }
  .km-product-card .text-muted.small { display: none; }

  /* Product detail page */
  .col-md-5, .col-md-7 { width: 100% !important; }

  /* Order detail tracking bar — smaller dots */
  .km-tracking-dot { width: 32px !important; height: 32px !important; font-size: .9rem !important; }

  /* Admin sidebar — hide on mobile, show bottom nav */
  .km-admin-sidebar { display: none; }
  .km-admin-content { padding: 16px !important; margin-left: 0 !important; padding-bottom: 80px !important; }
  .km-admin-mobile-nav { display: flex !important; }

  /* Cart page table → stacked cards */
  .km-cart-table thead { display: none; }
  .km-cart-table tr { display: block; margin-bottom: 12px; border: 1px solid var(--km-border); border-radius: 10px; padding: 10px; }
  .km-cart-table td { display: flex; justify-content: space-between; border: none !important; padding: 4px 0; }
  .km-cart-table td::before { content: attr(data-label); font-weight: 600; color: var(--km-brown); font-size: .8rem; }

  /* Floating buttons */
  .km-whatsapp-btn  { bottom: 16px; right: 16px; }
  .km-instagram-btn { bottom: 16px; left: 16px; }

  /* Auth cards */
  .km-auth-card { margin: 16px; }

  /* Section titles */
  .km-section-title { font-size: 1.4rem; }

  /* Order history cards */
  .km-card { border-radius: 10px; }

  /* Checkout form */
  .col-lg-8, .col-lg-4 { width: 100% !important; }

  /* Dashboard stat cards */
  .km-admin-content h2 { font-size: 1.3rem; }
}

/* Tablet tweaks */
@media (max-width: 991px) {
  .km-admin-sidebar { width: 200px; min-width: 200px; }
  .km-admin-sidebar .nav-link { font-size: .82rem; padding: 8px 10px; }
}

/* ── UNAUTHENTICATED CART MESSAGE ─────────────────── */
.km-login-nudge {
  background: var(--km-blush);
  border: 1px solid var(--km-border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .9rem;
  color: var(--km-text);
  display: flex; align-items: center; gap: 10px;
}
.km-login-nudge a { color: var(--km-pink-dark); font-weight: 700; }

/* ── CTA BANNER ────────────────────────────────────── */
.km-cta-banner {
  background: linear-gradient(135deg, #9B1942 0%, #C23B63 50%, #E8547A 100%);
  box-shadow: 0 8px 40px rgba(194,59,99,.35);
  position: relative; overflow: hidden;
}