/* =====================================================================
   KUUBERA STORE — STYLESHEET
   Mobile-first, premium Indian-boutique aesthetic.
   Palette: ivory base · deep maroon · indigo · emerald · mustard · gold.
   ===================================================================== */

/* ---- Design tokens (change colours/spacing here in one place) ---- */
:root {
  --cream:        #FBF7F0;   /* page background  */
  --cream-2:      #F3EAD9;   /* warm sand (secondary surface) */
  --ivory-card:   #FFFFFF;
  --ink:          #2B2622;   /* main text        */
  --ink-soft:     #6F665C;   /* muted text       */
  --maroon:       #7B1E2B;   /* primary jewel     */
  --maroon-dark:  #5E1320;
  --indigo:       #2A2C5A;
  --emerald:      #1F5C4A;
  --mustard:      #C8842A;
  --gold:         #BFA15F;
  --gold-soft:    #E4C97A;
  --line:         #E7DECF;   /* hairline borders  */
  --shadow:       0 10px 30px rgba(64, 38, 20, 0.10);
  --shadow-lg:    0 24px 60px rgba(64, 38, 20, 0.20);
  --radius:       14px;
  --radius-sm:    10px;
  --maxw:         1180px;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* =====================  HEADER  ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 240, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo__mark { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: 0.5px;
}
.logo__sub {
  font-size: 0.62rem;
  letter-spacing: 5px;
  color: var(--gold);
  margin-top: 2px;
  font-weight: 600;
}

/* Search box */
.header__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 280px;
}
.search-icon { position: absolute; left: 14px; color: var(--ink-soft); pointer-events: none; }
#search-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  padding: 10px 14px 10px 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#search-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(191, 161, 95, 0.18);
}

/* On narrow phones, drop the search box onto its own full-width row so it
   can never crowd or overlap the logo while the page loads. */
@media (max-width: 560px) {
  .header__inner { flex-wrap: wrap; gap: 10px 14px; }
  .logo { flex: 1 1 auto; }
  .header__search { flex: 1 1 100%; order: 3; }
  .logo__name { font-size: 1.3rem; }
}

/* =====================  HERO  ===================== */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--cream);
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(191,161,95,0.30), transparent 55%),
    linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 55%, var(--indigo) 130%);
}
/* faint textile motif overlay */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.10;
  background-image:
    repeating-linear-gradient(45deg, var(--gold-soft) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, var(--gold-soft) 0 1px, transparent 1px 22px);
}
.hero__inner {
  padding: 72px 20px 84px;
  text-align: center;
  max-width: 760px;
}
.hero__eyebrow {
  margin: 0 0 14px;
  font-size: 0.78rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 600;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 4rem);
  line-height: 1.1;
  margin: 0 0 18px;
}
.hero__title em { color: var(--gold-soft); font-style: italic; }
.hero__lead {
  margin: 0 auto 30px;
  max-width: 520px;
  font-size: 1.05rem;
  color: rgba(251, 247, 240, 0.9);
  font-weight: 300;
}
.hero__cta {
  display: inline-block;
  padding: 14px 34px;
  background: var(--gold);
  color: #3a2a10;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.hero__cta:hover { transform: translateY(-2px); background: var(--gold-soft); box-shadow: 0 12px 28px rgba(0,0,0,0.28); }

/* =====================  SHOP HEAD + FILTERS  ===================== */
#shop { padding: 56px 20px 40px; }
.shop__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: var(--ink);
  margin: 0;
  position: relative;
}
.section-title::after {
  content: "";
  display: block;
  width: 54px; height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
}
.result-count { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.filter-pill {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 9px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-pill:hover { border-color: var(--gold); color: var(--maroon); }
.filter-pill.is-active {
  background: var(--maroon);
  border-color: var(--maroon);
  color: var(--cream);
}

/* =====================  PRODUCT GRID  ===================== */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobile: 2 across */
  gap: 16px;
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (min-width: 980px)  { .grid { grid-template-columns: repeat(4, 1fr); gap: 26px; } }

/* Card */
.card {
  background: var(--ivory-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* fade-in start state (JS adds .is-visible) */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
}
.card.is-visible { opacity: 1; transform: none; }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card:hover .card__media img { transform: scale(1.05); }
.card.is-soldout .card__media img { filter: grayscale(0.5) brightness(0.95); }

.badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.badge--stock   { background: rgba(31, 92, 74, 0.92); color: #fff; }
.badge--soldout { background: rgba(43, 38, 34, 0.85); color: #fff; }

/* On the product card the stock badge sits at the BOTTOM-left of the photo, clear
   of the model's face at the top. (In the popup it's inline next to the price.)
   The discount is shown as text next to the price, not on the image. */
.card__media .badge { position: absolute; z-index: 1; bottom: 10px; left: 10px; }

.card__body { padding: 14px 14px 18px; }
.card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin: 0 0 4px;
  color: var(--ink);
  line-height: 1.25;
}
.card__cat { margin: 0 0 8px; font-size: 0.74rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.card__price { margin: 0; font-weight: 600; color: var(--maroon); font-size: 1.05rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; }

/* Sale price parts (used on cards and in the modal) */
.price-now { font-weight: 700; color: var(--maroon); }
.price-mrp { font-weight: 400; color: var(--ink-soft); text-decoration: line-through; font-size: 0.85em; }
.price-off { font-weight: 600; color: var(--emerald); font-size: 0.82em; }

.empty-state { text-align: center; color: var(--ink-soft); padding: 50px 0; font-size: 1.05rem; }

/* =====================  FOOTER  ===================== */
.site-footer {
  margin-top: 50px;
  background: linear-gradient(135deg, var(--maroon-dark), var(--indigo));
  color: var(--cream);
  border-top: 3px solid var(--gold);
}
.footer__inner {
  padding: 48px 20px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.footer__brand img { width: 68px; height: 68px; object-fit: contain; margin: 0 auto 8px; }
.footer__name { font-family: var(--font-display); font-size: 1.4rem; margin: 0; color: var(--gold-soft); }
.footer__line { margin: 4px 0 0; color: rgba(251,247,240,0.85); font-weight: 300; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cream);
  font-size: 0.95rem;
  padding: 8px 18px;
  border: 1px solid rgba(228,201,122,0.4);
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s;
}
.footer__links a:hover { background: rgba(228,201,122,0.14); border-color: var(--gold-soft); }
.footer__copy { font-size: 0.8rem; color: rgba(251,247,240,0.6); margin: 10px 0 0; }

/* =====================  MODAL (PRODUCT POPUP)  ===================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal.is-open { display: flex; }
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(33, 22, 16, 0.62);
  backdrop-filter: blur(3px);
  animation: fade 0.25s ease;
}
.modal__dialog {
  position: relative;
  background: var(--cream);
  width: 100%;
  max-width: 920px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: pop 0.28s cubic-bezier(.2,.8,.2,1);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop  { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }

.modal__close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.2s, background 0.2s;
}
.modal__close:hover { transform: rotate(90deg); background: #fff; }

.modal__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .modal__grid { grid-template-columns: 1fr 1fr; } }

/* Gallery */
.gallery { background: var(--cream); }
.gallery__main { aspect-ratio: 3 / 4; overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: 8px; padding: 12px; flex-wrap: wrap; }
.thumb {
  width: 60px; height: 80px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: none;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--gold); }

/* Info column */
.modal__info { padding: 30px 28px 34px; }
.modal__cat { margin: 0 0 6px; font-size: 0.74rem; letter-spacing: 2px; text-transform: uppercase; color: var(--mustard); font-weight: 600; }
.modal__name { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; margin: 0 0 12px; line-height: 1.15; }
.modal__price { font-size: 1.4rem; font-weight: 600; color: var(--maroon); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.modal__desc { color: var(--ink-soft); margin: 0 0 22px; }

.field-label { font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); font-weight: 600; margin: 0 0 10px; }
.size-block { margin-bottom: 24px; }
.size-options { display: flex; gap: 9px; flex-wrap: wrap; }
.size-pill {
  min-width: 46px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.size-pill:hover { border-color: var(--gold); }
.size-pill.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
/* Sold-out size: shown but not selectable */
.size-pill.is-unavailable {
  color: var(--ink-soft);
  background: var(--cream-2);
  border-color: var(--line);
  text-decoration: line-through;
  opacity: 0.6;
  cursor: not-allowed;
}
.size-pill.is-unavailable:hover { border-color: var(--line); }

/* Buy buttons (WhatsApp + optional Amazon), stacked */
.buy-actions { display: flex; flex-direction: column; gap: 12px; }
.btn-whatsapp, .btn-amazon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  font-size: 1.02rem;
  font-weight: 600;
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-whatsapp svg, .btn-amazon svg { flex-shrink: 0; }

/* WhatsApp order button (primary) */
.btn-whatsapp {
  background: #25D366;
  color: #06351b;
  box-shadow: 0 8px 20px rgba(37,211,102,0.3);
}
.btn-whatsapp:hover { transform: translateY(-2px); background: #1ebe5a; box-shadow: 0 12px 26px rgba(37,211,102,0.4); }

/* Amazon buy button (secondary) */
.btn-amazon {
  background: #FF9900;
  color: #1a1208;
  box-shadow: 0 8px 20px rgba(255,153,0,0.28);
}
.btn-amazon:hover { transform: translateY(-2px); background: #f08a00; box-shadow: 0 12px 26px rgba(255,153,0,0.38); }

/* Disabled order button when every size is sold out */
.btn-whatsapp.is-disabled {
  background: #c9c4bc;
  color: #5f5a52;
  box-shadow: none;
  cursor: not-allowed;
}
.btn-whatsapp.is-disabled:hover { transform: none; background: #c9c4bc; box-shadow: none; }

.modal__note { text-align: center; font-size: 0.8rem; color: var(--ink-soft); margin: 12px 0 0; }

/* Loading / error message shown above the grid */
.status-note {
  text-align: center;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  padding: 40px 16px;
  margin: 0;
}
.status-note strong { color: var(--maroon); }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .card { opacity: 1; transform: none; }
}