/* =========================================================
   Design tokens — Mirabai Handloom storefront (Festive Radiance)
   ========================================================= */
:root{
  --marigold:#d97a12;
  --fuchsia:#a91659;
  --peacock:#085f5b;
  --paper:#f1e4cb;
  --paper-deep:#e9d9b8;
  --panel:#fffaf0;
  --ink:#241408;
  --muted:#6e5c42;
  --whatsapp:#189440;
  --line:#d9c090;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
img{max-width:100%;display:block}

/* ================= Header ================= */
.site-header{
  background:linear-gradient(100deg,var(--marigold) 0%,var(--fuchsia) 55%,var(--peacock) 100%);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 6vw;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:16px}
.brand-logo{width:64px;height:64px;border-radius:16px;object-fit:contain;background:#fff;border:3px solid #fff;box-shadow:0 6px 20px rgba(36,20,8,.3)}
.brand-text h1{
  font-family:var(--font-display);font-weight:700;font-size:1.85rem;margin:0;
  color:#fff;line-height:1.05;text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.brand-text p{margin:2px 0 0;color:#ffeed4;font-style:italic;font-size:.92rem}

.whatsapp-btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--whatsapp);color:#fff;
  padding:12px 22px;border-radius:30px;text-decoration:none;font-weight:700;font-size:.92rem;
  white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.whatsapp-btn:hover{background:#137a34}
.whatsapp-btn-large{padding:13px 22px;font-size:1rem;margin-top:18px}

/* ================= Hero ================= */
.hero{
  background:linear-gradient(180deg,#c4602f 0%,var(--paper-deep) 65%);
  padding:56px 6vw 60px;display:flex;gap:6vw;align-items:center;flex-wrap:wrap;
}
.hero-photo{flex:1 1 320px;max-width:640px;width:52%}
.hero-photo img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 92%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 92%);
}
.hero-copy{flex:1 1 320px;min-width:260px}
.hero-copy .copy-panel{
  background:#fbf3e2;border-radius:14px;padding:26px 30px;box-shadow:0 6px 20px rgba(36,20,8,.12);
}
.hero-section{margin-bottom:22px}
.hero-section:last-child{margin-bottom:0}
.hero-section-title{
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin:0 0 10px;
  color:var(--fuchsia);
}
.hero-copy p{margin:0 0 10px;font-size:1rem;line-height:1.65;color:#3a2412}
.hero-copy p:last-child{margin-bottom:0}

/* ================= Filter bar ================= */
.filter-bar{
  background:var(--paper-deep);
  padding:16px 6vw;display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--line);
}
.filter-bar input,.filter-bar select{
  font-family:var(--font-body);font-size:.95rem;padding:11px 15px;
  border:2px solid var(--marigold);border-radius:24px;background:#fffaf0;color:var(--ink);
}
.filter-bar input:focus,.filter-bar select:focus{outline:2px solid var(--fuchsia);outline-offset:1px}
#search-input{flex:0 1 340px;min-width:160px}
.price-filter{display:flex;align-items:center;gap:8px}
.price-filter input{width:110px}
.price-sep{color:var(--muted)}
#sort-select{cursor:pointer;padding-right:12px}
#clear-filters-btn{
  font-family:var(--font-body);font-size:.88rem;font-weight:700;color:var(--fuchsia);
  background:transparent;border:2px solid var(--fuchsia);border-radius:24px;padding:10px 18px;
  cursor:pointer;
}
#clear-filters-btn:hover{background:var(--fuchsia);color:#fff}

/* ================= Category bar ================= */
.category-bar{padding:22px 6vw 0;max-width:1400px;margin:0 auto 8px}
.category-grid{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.category-btn{
  flex:1 1 0;min-width:84px;max-width:150px;
  background:none;border:none;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-body);
}
.category-photo{
  width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;
  background:var(--paper-deep);box-shadow:0 6px 16px rgba(169,22,89,.12);
  transition:transform .2s,box-shadow .2s;border:3px solid transparent;
}
.category-photo img{width:100%;height:100%;object-fit:cover;display:block}
.category-btn:hover .category-photo{transform:translateY(-3px);box-shadow:0 10px 22px rgba(169,22,89,.2)}
.category-btn.active .category-photo{border-color:var(--fuchsia)}
.category-label{
  font-size:.9rem;font-weight:600;color:var(--ink);text-align:center;
}
.category-btn.active .category-label{color:var(--fuchsia)}
@media (max-width:640px){
  .category-grid{gap:10px}
  .category-btn{min-width:66px}
  .category-label{font-size:.78rem}
}

/* ================= Main / grid ================= */
main{padding:32px 6vw 60px;max-width:1400px;margin:0 auto}
.results-count{color:var(--muted);font-size:.9rem;margin:0 0 20px}

.tile-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:30px 24px;
}
.tile{cursor:pointer;border:none;background:none;padding:0;text-align:left;font-family:var(--font-body)}
.tile-photo-wrap{
  aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--panel);
  margin-bottom:12px;box-shadow:0 8px 22px rgba(169,22,89,.14);transition:transform .25s;
  position:relative;
}
.tile:hover .tile-photo-wrap{transform:translateY(-5px) scale(1.015)}
.tile-photo-wrap img{width:100%;height:100%;object-fit:cover}

.tile-featured-ribbon{
  position:absolute;top:16px;right:-42px;width:160px;
  transform:rotate(45deg);transform-origin:center;
  text-align:center;padding:5px 0;
  font-family:var(--font-body);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:#c0392b;
  border-top:3px solid #fff;border-bottom:3px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  z-index:2;pointer-events:none;
}
.tile-desc{
  font-family:var(--font-display);font-size:1.02rem;font-weight:500;color:var(--ink);
  margin:0 0 4px;line-height:1.3;
}
.tile-price{font-size:1.05rem;font-weight:700;color:var(--fuchsia);margin:0}

.empty-state{
  text-align:center;padding:60px 20px;color:var(--muted);font-size:1rem;
  grid-column:1/-1;
}

/* ================= Footer ================= */
.site-footer{
  text-align:center;padding:50px 6vw 40px;background:var(--paper-deep);border-top:1px solid var(--line);
}
.site-footer p{color:var(--ink);font-size:1.05rem;margin:0 0 16px;font-family:var(--font-display)}
.footer-fine{margin-top:22px !important;font-family:var(--font-body) !important;font-size:.8rem !important;color:var(--muted) !important}

/* ================= Detail modal ================= */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(36,20,8,.6);display:flex;
  align-items:center;justify-content:center;z-index:50;padding:20px;
}
.modal{
  background:var(--panel);border-radius:18px;max-width:820px;width:100%;max-height:90vh;
  overflow-y:auto;display:flex;position:relative;
}
.modal-photo-wrap{flex:1 1 50%;background:var(--paper-deep);min-height:280px;position:relative;overflow:hidden}
.carousel-viewport{width:100%;height:100%;min-height:280px}
.carousel-viewport img,.carousel-viewport video{width:100%;height:100%;object-fit:cover;min-height:280px;display:block}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.85);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(36,20,8,.25);
}
.carousel-arrow:hover{background:#fff}
.carousel-prev{left:14px}
.carousel-next{right:14px}
.carousel-dots{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:7px;
}
.carousel-dots .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer}
.carousel-dots .dot.active{background:#fff;box-shadow:0 0 0 2px rgba(169,22,89,.5)}
.modal-info{flex:1 1 50%;padding:34px 36px;display:flex;flex-direction:column}
.modal-seq{
  font-family:var(--font-body);font-size:.78rem;letter-spacing:.03em;color:var(--muted);
  margin:0 0 8px;
}
.modal-info h2{
  font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin:0 0 14px;
  color:var(--ink);line-height:1.25;
}
.modal-price{font-size:1.6rem;font-weight:700;color:var(--fuchsia);margin:0 0 8px}
.modal-close{
  position:absolute;top:16px;right:16px;background:rgba(255,255,255,.92);border:none;
  width:34px;height:34px;border-radius:50%;font-size:1rem;cursor:pointer;color:var(--ink);
  z-index:2;
}
.pay-btn{
  display:inline-block;text-align:center;margin-top:10px;background:var(--peacock);color:#fff;
  padding:13px 22px;border-radius:30px;text-decoration:none;font-weight:700;font-size:1rem;
}
.pay-btn:hover{background:#054340}

@media (max-width:760px){
  .site-header{justify-content:center;text-align:center;padding:20px 5vw}
  .brand{flex-direction:column;text-align:center;gap:8px}
  .hero{flex-direction:column;text-align:center;padding:44px 6vw}
  .hero-photo{width:88%;max-width:420px}
  .hero-section-title{font-size:1.05rem}
  .filter-bar{padding:14px 5vw}
  .price-filter input{width:90px}
  #search-input{flex:1 1 100%}
  #sort-select{flex:1 1 auto}
  main{padding:22px 5vw 44px}
  .tile-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 14px}
  .modal{flex-direction:column;max-height:94vh}
  .modal-photo-wrap{min-height:220px}
  .carousel-viewport img,.carousel-viewport video{min-height:220px}
  .modal-info{padding:24px 22px}
}