/* =====================================================================
   Festive "clay & marigold" theme layer (loaded after style.css)
   - warm golden-hour glows ........ comfort, warmth, premium feel
   - faint kolam / rangoli motif .... cultural familiarity, handmade
   - clay grain texture ............. tactile, handcrafted
   - marigold & mango-leaf thoranam . welcome, auspicious, festive
   ===================================================================== */
html { background: #FBF5EC; }
body { background: transparent; position: relative; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 8% -6%, rgba(255, 190, 130, .38), transparent 70%),
    radial-gradient(760px 480px at 100% 4%, rgba(255, 214, 120, .30), transparent 70%),
    radial-gradient(900px 700px at 50% 110%, rgba(150, 175, 130, .20), transparent 70%),
    linear-gradient(180deg, #FCF7EF 0%, #F8EFE3 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23B8572F' stroke-width='1.1' opacity='.13'%3E%3Cg transform='translate(60 60)'%3E%3Cellipse rx='5' ry='13' cy='-15'/%3E%3Cellipse rx='5' ry='13' cy='-15' transform='rotate(45)'/%3E%3Cellipse rx='5' ry='13' cy='-15' transform='rotate(90)'/%3E%3Cellipse rx='5' ry='13' cy='-15' transform='rotate(135)'/%3E%3Cellipse rx='5' ry='13' cy='-15' transform='rotate(180)'/%3E%3Cellipse rx='5' ry='13' cy='-15' transform='rotate(225)'/%3E%3Cellipse rx='5' ry='13' cy='-15' transform='rotate(270)'/%3E%3Cellipse rx='5' ry='13' cy='-15' transform='rotate(315)'/%3E%3Ccircle r='5'/%3E%3Ccircle r='34' stroke-dasharray='2 7'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23B8572F' opacity='.14'%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='120' cy='0' r='2'/%3E%3Ccircle cx='0' cy='120' r='2'/%3E%3Ccircle cx='120' cy='120' r='2'/%3E%3Ccircle cx='60' cy='60' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px, 120px 120px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .35) 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .35) 100%);
}

/* Marigold & mango-leaf thoranam hanging from the header */
.hdr { background: rgba(252, 246, 237, .92); }
.hdr::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='34' viewBox='0 0 72 34'%3E%3Cpath d='M0 2 Q18 7 36 2 T72 2' stroke='%238A4B2A' stroke-width='1.4' fill='none'/%3E%3Cpath d='M18 5 C11 12 12 23 18 31 C24 23 25 12 18 5 Z' fill='%23517F3C'/%3E%3Cpath d='M18 7 V29' stroke='%23A9C98A' stroke-width='.8'/%3E%3Cpath d='M54 3 V7' stroke='%238A4B2A' stroke-width='1.2'/%3E%3Ccircle cx='54' cy='12' r='6.5' fill='%23F08A1C'/%3E%3Ccircle cx='54' cy='12' r='4.3' fill='%23F6B12E'/%3E%3Ccircle cx='54' cy='12' r='1.8' fill='%23E06A12'/%3E%3Ccircle cx='54' cy='23' r='5.3' fill='%23F6B12E'/%3E%3Ccircle cx='54' cy='23' r='3.3' fill='%23FACB4E'/%3E%3Ccircle cx='54' cy='23' r='1.4' fill='%23F08A1C'/%3E%3C/svg%3E") repeat-x 0 0 / 72px 34px;
  filter: drop-shadow(0 3px 3px rgba(90, 50, 20, .18));
  transition: opacity .35s, transform .35s;
}
.hdr.scrolled::after { opacity: 0; transform: translateY(-8px); }
main { position: relative; z-index: 0; padding-top: 14px; }

/* Warm diya-light bokeh drifting inside the hero */
.slider::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 1; mix-blend-mode: soft-light;
  background:
    radial-gradient(60px 60px at 20% 30%, rgba(255, 200, 90, .55), transparent 70%),
    radial-gradient(40px 40px at 35% 75%, rgba(255, 170, 80, .45), transparent 70%),
    radial-gradient(80px 80px at 70% 20%, rgba(255, 220, 140, .50), transparent 70%),
    radial-gradient(30px 30px at 85% 65%, rgba(255, 180, 90, .55), transparent 70%),
    radial-gradient(50px 50px at 55% 55%, rgba(255, 235, 170, .40), transparent 70%);
  animation: bokeh 18s ease-in-out infinite alternate;
}
@keyframes bokeh { to { transform: translate(4%, -3%) scale(1.05); } }
.slide { background-image: linear-gradient(120deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%); }

/* Section heading ornament: a small diya-flame divider */
.sec-head h2::after {
  content: ""; display: block; width: 86px; height: 12px; margin-top: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='12' viewBox='0 0 86 12'%3E%3Cpath d='M0 6 H33 M53 6 H86' stroke='%23C99A3B' stroke-width='1.2'/%3E%3Cpath d='M43 0 C39 4 39 8 43 11 C47 8 47 4 43 0 Z' fill='%23E8742A'/%3E%3Ccircle cx='36' cy='6' r='1.5' fill='%23C99A3B'/%3E%3Ccircle cx='50' cy='6' r='1.5' fill='%23C99A3B'/%3E%3C/svg%3E") no-repeat;
}

/* Cards & panels: warm, lifted surfaces */
.card, .trust div, .filters, .pbox, .summary, .panel, .cart-list, .story, .empty { box-shadow: 0 1px 2px rgba(90, 50, 20, .05), 0 8px 24px -16px rgba(90, 50, 20, .25); }
.card:hover { box-shadow: 0 18px 40px -18px rgba(150, 70, 30, .40); }
.cat .ci { box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 10px 24px -14px rgba(90, 50, 20, .45); }

/* Footer: scalloped clay edge */
.ftr { position: relative; margin-top: 96px; }
.ftr::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 23px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='23' viewBox='0 0 44 23'%3E%3Cpath d='M0 23 V14 Q11 0 22 14 Q33 0 44 14 V23 Z' fill='%23221914'/%3E%3C/svg%3E") repeat-x 0 0 / 44px 23px;
}

@media (max-width: 640px) {
  .hdr::after { height: 26px; background-size: 56px 26px; }
  body::after { background-size: 160px 160px, 96px 96px; }
}
@media (prefers-reduced-motion: reduce) { .slider::after { animation: none; } }

/* ---------- Brand: The Craftify Garden logo colours (olive #3C411E on beige #CFC1B5) ---------- */
:root { --olive: #3C411E; --olive-2: #56622F; --beige: #CFC1B5; --sage: #56622F; --sage-dark: #3C411E; --sage-soft: #ECE8D9; }
.brand .logo { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 4px 14px -6px rgba(60, 65, 30, .55); transition: transform .3s var(--ease); }
.brand:hover .logo { transform: rotate(-6deg) scale(1.04); }
.hdr .brand-text b { color: var(--olive); }
.hdr .brand-text small { color: var(--clay); }
.ftr { background: #2B2F16; color: #D8D4C2; }
.ftr::before { filter: hue-rotate(0deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='23' viewBox='0 0 44 23'%3E%3Cpath d='M0 23 V14 Q11 0 22 14 Q33 0 44 14 V23 Z' fill='%232B2F16'/%3E%3C/svg%3E"); }
.ftr-top p, .ftr-bot { color: #B7B39E; }
.ftr-bot { border-top-color: #41462A; }
.ftr .brand-text small, .ftr .contact svg, .ftr-bot .credit a { color: var(--beige); }
.ftr-brand .logo { width: 96px; height: 96px; box-shadow: 0 0 0 3px rgba(207, 193, 181, .35); }
.ftr-tag { font-family: var(--serif); font-size: 16px; color: var(--beige); }
.socials a { border-color: #4B512E; }
.announce { background: linear-gradient(90deg, #2F3418, #3C411E 50%, #2F3418); }
@media (max-width: 900px) { .brand .logo { width: 46px; height: 46px; } }

/* ---------- Stock, account, space ---------- */
.opt-sw.sold, .opt-size.sold { position: relative; opacity: .45; }
.opt-sw.sold::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: #B3261E; transform: rotate(45deg); }
.opt-size.sold b { text-decoration: line-through; }
.seo-pre { padding: 24px 0; }
.seo-pre img { border-radius: 16px; margin: 12px 0; max-width: 100%; height: auto; }
/* Tighter layout: more products per screen */
.section { padding-top: 40px; }
.sec-head { margin-bottom: 18px; }
.hero { padding-top: 16px; }
.slide { min-height: 400px; }
.slide-art { min-height: 400px; }
.grid { gap: 18px; }
@media (max-width: 640px) {
  .section { padding-top: 30px; }
  .slide-copy { padding: 26px 22px 4px; }
  .slide-art { padding: 8px 22px 52px; }
  .slide-art .frame { width: min(230px, 64%); }
  .slide h1, .slide h2 { font-size: 30px; margin: 10px 0; }
  .trust { margin-top: 16px; }
  .trust div span span { display: none; }
  .card-body { padding: 9px 10px 11px; }
  .grid { gap: 10px; }
  .offer { margin-top: 10px; }
  .offer-in { padding: 16px; }
  .ftr { margin-top: 60px; }
  .act.acct .lbl { display: none; }
}
.bulk-link { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }
.bulk-link b { color: var(--clay); }
.login-hint { display: flex; gap: 10px; align-items: center; margin: 12px 0 0; }