/* ─────────────────────────────────────────────────
   Aangan · custom styles (small + maintainable)
   Pairs with Tailwind utilities in index.html
   ───────────────────────────────────────────────── */

:root {
  --cream-50:  #FBF7EC;
  --cream-100: #F8F2E4;
  --cream-200: #F0E7D2;
  --cream-300: #E4D7B7;
  --ink-900:   #1F1A12;
  --ink-500:   #6B6256;
  --saffron:   #C97B2A;
  --pista:     #6B8E4E;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Headings get tighter, more confident tracking */
.font-display { font-feature-settings: "liga" 1, "dlig" 1; letter-spacing: -0.012em; }

/* ─────────  Category filter chips  ───────── */
.cat-chip {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 26, 18, 0.12);
  color: var(--ink-500);
  background: transparent;
  transition: all .15s ease;
  cursor: pointer;
}
.cat-chip:hover { color: var(--ink-900); border-color: rgba(31, 26, 18, 0.3); }
.cat-chip.is-active {
  background: var(--ink-900);
  color: var(--cream-50);
  border-color: var(--ink-900);
}

/* ─────────  Image placeholder (striped, with monospace label)  ─────────
   Replace the .img-placeholder div with a real <img> from your library. */
.img-placeholder {
  position: relative;
  display: block;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(31,26,18,0.04) 0 1px,
      transparent 1px 14px);
}
.img-placeholder::after {
  content: attr(data-label);
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(31,26,18,0.5);
  text-transform: lowercase;
  background: rgba(251,247,236,0.7);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* ─────────  Product card  ───────── */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform .25s ease;
}
.product-card:hover { transform: translateY(-2px); }

.product-card .pc-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 1.1rem;
  overflow: hidden;
  /* Trap #10: a white plate, so a product photo of any shape sits on it whole. */
  background: #FFFDF8;
  box-shadow: 0 1px 0 rgba(31,26,18,0.04), 0 12px 28px -18px rgba(31,26,18,0.25);
  ring: 1px solid rgba(31,26,18,0.05);
  transition: box-shadow .25s ease;
}
.product-card:hover .pc-frame {
  box-shadow: 0 1px 0 rgba(31,26,18,0.04), 0 18px 36px -16px rgba(31,26,18,0.3);
}
/* Real <img> sits above the gradient placeholder. If it 404s, JS hides it and the placeholder shows. */
.hero-img,
.about-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* editorial images, deliberately full-bleed */
  display: block;
  z-index: 1;
}

/* Trap #10: PRODUCT photos use object-contain on a white plate. Supplier
   photography arrives in whatever shape each brand shot it; cropping to a fixed
   tile cut the heads off models and sliced products in half. */
.product-card .pc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 8%;
  object-fit: contain;
  object-position: center;
  display: block;
  z-index: 1;
}
.product-card .pc-tag,
.product-card .pc-add { z-index: 2; }

.product-card .pc-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(251,247,236,0.85);
  color: var(--ink-900);
  padding: 4px 9px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.product-card .pc-tag.is-new   { background: var(--saffron); color: var(--cream-50); }
.product-card .pc-tag.is-best  { background: var(--pista); color: var(--cream-50); }

.product-card .pc-add {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--ink-900);
  color: var(--cream-50);
  border: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.product-card:hover .pc-add,
.product-card:focus-within .pc-add { opacity: 1; transform: translateY(0); }
.product-card .pc-add:hover { background: var(--saffron); }

.product-card .pc-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.product-card .pc-desc {
  color: var(--ink-500);
  font-size: 0.9rem;
  line-height: 1.5;
}
.product-card .pc-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(31,26,18,0.08);
}
.product-card .pc-price {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  color: var(--ink-900);
}
.product-card .pc-unit {
  font-size: 0.78rem;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─────────  Marquee (very subtle)  ───────── */
.marquee {
  animation: marquee 38s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
  html { scroll-behavior: auto; }
}

/* ─────────  Palette variants (toggled by Tweaks)  ───────── */
body[data-palette="saffron"] { /* default — no override needed */ }

body[data-palette="pista"] .text-saffron-500,
body[data-palette="pista"] .hover\:text-saffron-500:hover { color: var(--pista) !important; }
body[data-palette="pista"] .bg-saffron-500 { background-color: var(--pista) !important; }
body[data-palette="pista"] .text-saffron-400 { color: #88a566 !important; }
body[data-palette="pista"] .hover\:bg-saffron-500:hover { background-color: var(--pista) !important; }
body[data-palette="pista"] .product-card .pc-tag.is-new { background: var(--pista); }
body[data-palette="pista"] .product-card .pc-add:hover { background: var(--pista); }
body[data-palette="pista"] .img-placeholder { background-color: #DDE6CB; }
body[data-palette="pista"] .bg-saffron-500\/10 { background-color: rgba(107,142,78,0.10) !important; }

body[data-palette="rose"] .text-saffron-500,
body[data-palette="rose"] .hover\:text-saffron-500:hover { color: #B5605C !important; }
body[data-palette="rose"] .bg-saffron-500 { background-color: #B5605C !important; }
body[data-palette="rose"] .text-saffron-400 { color: #C97976 !important; }
body[data-palette="rose"] .hover\:bg-saffron-500:hover { background-color: #B5605C !important; }
body[data-palette="rose"] .product-card .pc-tag.is-new { background: #B5605C; }
body[data-palette="rose"] .product-card .pc-add:hover { background: #B5605C; }
body[data-palette="rose"] .bg-saffron-500\/10 { background-color: rgba(181,96,92,0.10) !important; }

/* Display font swap */
body[data-display="sans"] .font-display,
body[data-display="sans"] .product-card .pc-name,
body[data-display="sans"] .product-card .pc-price {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.025em;
  font-weight: 600;
}

/* Density */
body[data-density="airy"] section { padding-top: 7rem; padding-bottom: 7rem; }
body[data-density="compact"] section { padding-top: 4rem; padding-bottom: 4rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Shop additions — cart, forms, legal pages, admin.
   No rupee figure appears anywhere in this file; every price on the site is
   rendered from config/site.php via PHP.
   ═══════════════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* The category filter is now a real <a> so a filtered view is shareable. */
a.cat-chip { text-decoration: none; display: inline-flex; align-items: center; }

/* ── Product card buy row ─────────────────────────────────────────────────── */
.product-card .pc-buy {
  display: flex; align-items: stretch; gap: .5rem; margin-top: .25rem;
}
.product-card .pc-select {
  flex: 1 1 auto; min-width: 0;
  appearance: none;
  font: inherit; font-size: .875rem;
  color: var(--ink-700, #3A322A);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6256' stroke-width='2'><path d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right .7rem center/1rem;
  border: 1px solid rgba(31,26,18,.15);
  border-radius: 999px;
  padding: .55rem 2.1rem .55rem 1rem;
  cursor: pointer;
  transition: border-color .2s ease;
}
.product-card .pc-select:hover { border-color: rgba(31,26,18,.35); }
.product-card .pc-select:focus-visible { outline: 2px solid var(--saffron, #C97B2A); outline-offset: 2px; }
.product-card .pc-select-static {
  background-image: none; cursor: default; color: var(--ink-500, #6B6256);
  padding-right: 1rem;
}
.product-card .pc-add-btn {
  flex: 0 0 auto;
  font: inherit; font-size: .875rem; font-weight: 500;
  padding: .55rem 1.25rem;
  border-radius: 999px;
  background: var(--ink-900, #1F1A12);
  color: var(--cream-50, #FBF7EC);
  border: 0; cursor: pointer;
  transition: background-color .2s ease;
}
.product-card .pc-add-btn:hover { background: var(--saffron, #C97B2A); }
.product-card .pc-add-btn:focus-visible { outline: 2px solid var(--saffron, #C97B2A); outline-offset: 2px; }

/* ── Visible placeholders for legal facts we have not been given ──────────── */
mark.placeholder {
  background: #FDE68A;
  color: #7C2D12;
  padding: .05em .45em;
  border-radius: .3rem;
  font-weight: 600;
  font-size: .92em;
  white-space: nowrap;
  box-decoration-break: clone;
}
.draft-banner {
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  color: #7C2D12;
  border-radius: .75rem;
  padding: .9rem 1.15rem;
  font-size: .9rem;
  line-height: 1.5;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 1.1rem; }
.field > span {
  display: block; font-size: .8rem; letter-spacing: .02em;
  color: var(--ink-500, #6B6256); margin-bottom: .4rem;
}
.input, .textarea, .select {
  width: 100%; font: inherit; font-size: .95rem;
  padding: .7rem .95rem;
  border: 1px solid rgba(31,26,18,.16);
  border-radius: .75rem;
  background: #fff;
  color: var(--ink-900, #1F1A12);
  transition: border-color .2s ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--saffron, #C97B2A);
  box-shadow: 0 0 0 3px rgba(201,123,42,.13);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .95rem; font-weight: 500;
  padding: .8rem 1.6rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ink-900, #1F1A12); color: var(--cream-50, #FBF7EC);
  transition: background-color .2s ease; text-decoration: none;
}
.btn:hover { background: var(--saffron, #C97B2A); }
.btn-ghost {
  background: transparent; color: var(--ink-900, #1F1A12);
  border: 1px solid rgba(31,26,18,.16);
}
.btn-ghost:hover { background: rgba(31,26,18,.04); border-color: rgba(31,26,18,.4); }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.alert { border-radius: .75rem; padding: .8rem 1rem; font-size: .9rem; margin-bottom: 1.25rem; }
.alert-err  { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.alert-ok   { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.alert-info { background: #E0F2FE; color: #075985; border: 1px solid #7DD3FC; }

/* ── Payment method chooser ───────────────────────────────────────────────── */
.pay-option {
  display: flex; gap: .85rem; align-items: flex-start;
  border: 1px solid rgba(31,26,18,.16); border-radius: .9rem;
  padding: 1rem 1.15rem; cursor: pointer; background: #fff;
  transition: border-color .2s ease;
}
.pay-option:has(input:checked) { border-color: var(--saffron, #C97B2A); background: #FFFBF4; }
.pay-option.is-disabled {
  cursor: not-allowed; opacity: .55; background: rgba(31,26,18,.03);
}
.badge-soon {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--cream-300, #E4D7B7); color: var(--ink-700, #3A322A);
  padding: .18rem .5rem; border-radius: 999px; font-weight: 600;
}

/* Tooltip on the disabled online-payment option. */
.tip { position: relative; }
.tip .tip-body {
  position: absolute; bottom: calc(100% + .5rem); left: 0;
  background: var(--ink-900, #1F1A12); color: var(--cream-50, #FBF7EC);
  font-size: .78rem; line-height: 1.45; padding: .55rem .75rem;
  border-radius: .5rem; width: max-content; max-width: 17rem;
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 5; pointer-events: none;
}
.tip:hover .tip-body, .tip:focus-within .tip-body { opacity: 1; visibility: visible; transform: translateY(0); }

/* ── Tables (account orders, admin) ───────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th {
  text-align: left; font-weight: 500; font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-500, #6B6256);
  padding: .7rem .85rem; border-bottom: 1px solid rgba(31,26,18,.12);
  white-space: nowrap;
}
.tbl td { padding: .85rem; border-bottom: 1px solid rgba(31,26,18,.07); vertical-align: middle; }
.tbl tbody tr:hover { background: rgba(31,26,18,.02); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  padding: .22rem .6rem; border-radius: 999px; text-transform: capitalize;
}
.pill-pending          { background: #FEF3C7; color: #92400E; }
.pill-confirmed        { background: #DBEAFE; color: #1E40AF; }
.pill-out_for_delivery { background: #E0E7FF; color: #3730A3; }
.pill-delivered        { background: #DCFCE7; color: #166534; }
.pill-cancelled        { background: #FEE2E2; color: #991B1B; }
.pill-paid             { background: #DCFCE7; color: #166534; }
.pill-refunded         { background: #F3E8FF; color: #6B21A8; }
.pill-failed           { background: #FEE2E2; color: #991B1B; }
.pill-blocked          { background: #FEE2E2; color: #991B1B; }
.pill-active           { background: #DCFCE7; color: #166534; }
.pill-admin            { background: #FDE68A; color: #78350F; }
.pill-derived          { background: #FEF3C7; color: #92400E; }

/* ── Admin chrome ─────────────────────────────────────────────────────────── */
/* Deliberately its own look: no storefront header, no cart, no shopper nav. */
body.admin { background: #F5F5F4; color: #1C1917; }
.admin-bar { background: #1F1A12; color: #F8F2E4; }
.admin-bar a { color: rgba(248,242,228,.72); text-decoration: none; }
.admin-bar a:hover, .admin-bar a.is-active { color: #F8F2E4; }
.card {
  background: #fff; border: 1px solid rgba(28,25,23,.09);
  border-radius: 1rem; padding: 1.35rem;
}
.stat-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #78716C; }
.stat-value { font-size: 1.9rem; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Legal pages ──────────────────────────────────────────────────────────── */
.legal-body { font-size: .97rem; line-height: 1.75; color: var(--ink-700, #3A322A); }
.legal-body h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.65rem; line-height: 1.25; color: var(--ink-900, #1F1A12);
  margin: 2.4rem 0 .8rem;
}
.legal-body h3 { font-weight: 600; font-size: 1rem; margin: 1.5rem 0 .5rem; color: var(--ink-900, #1F1A12); }
.legal-body p, .legal-body li { margin-bottom: .8rem; }
.legal-body ul { list-style: disc; padding-left: 1.35rem; }
.legal-body ol { list-style: decimal; padding-left: 1.35rem; }
.legal-body a { color: var(--saffron, #C97B2A); text-decoration: underline; text-underline-offset: 2px; }
.legal-body strong { color: var(--ink-900, #1F1A12); font-weight: 600; }
.legal-facts {
  background: var(--cream-50, #FBF7EC); border: 1px solid rgba(31,26,18,.1);
  border-radius: .9rem; padding: 1.25rem 1.4rem; font-size: .88rem; line-height: 1.7;
}

/* With object-contain the plate stays visible around the photo, so the striped
   placeholder must go once a real image has loaded. If the image 404s, `onload`
   never fires and the placeholder correctly remains. */
.product-card .pc-frame.has-img .img-placeholder { display: none; }