/* ================================================================
   Vandana Mall — Premium Homepage (gold/cream)  •  loaded only on index.php
   Scoped with hp- prefix to avoid clashing with existing styles.
   ================================================================ */
:root{
  --hp-gold:#d4a373; --hp-gold-d:#b8864e; --hp-ink:#1a1a1a; --hp-muted:#8a8a8a;
  --hp-line:#eee; --hp-cream:#faf7f2; --hp-pink:#f7e9f0; --hp-red:#e0325b; --hp-green:#16a34a;
  --hp-radius:16px; --hp-shadow:0 6px 22px rgba(0,0,0,.06); --hp-shadow-lg:0 16px 40px rgba(0,0,0,.12);
  --hp-font:'Inter','Poppins',sans-serif;
}
/* These styles are also used by the standalone Fashion, Men, Women, Kids and
   Sale pages.  Unlike index.php, those pages do not define the base body
   rules, so keep their viewport from being widened by an overflowing rail. */
/* `clip` on body, not `hidden`. Both stop an overflowing rail from widening the
   page, but `overflow-x:hidden` forces overflow-y to `auto`, which turns body
   into a scroll container — and that silently kills `position:sticky` on
   .header-sticky-wrap, because the header then sticks to a box that scrolls away
   with the document. `clip` contains the overflow without creating that box.
   The html rule stays `hidden`: root overflow propagates to the viewport, so it
   is handled specially and does not break sticky. */
html{overflow-x:hidden;}
body{min-width:0;overflow-x:clip;background:#fff;color:var(--hp-ink);}
/* homepage replaces the plain header top-bar with the offer strip + benefits bar */
.top-bar{display:none !important;}

/* page gutter (same feel as index) — fixes edge-to-edge sticking on mens/other pages */
.container{width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;}
/* All catalogue landing pages use the same content frame, irrespective of
   which admin-managed sections are enabled for that page. */
body.catalog-page .container{max-width:1440px;}
@media(max-width:560px){.container{padding:0 12px;}}

/* Vertical margins ONLY. Every section is `class="container hp-section"`, and
   `.container` centres itself with `margin:0 auto`. A `margin:30px 0` shorthand
   here also sets margin-left/right to 0, which killed that centring — on a wide
   screen the rails sat hard against the left edge while the hero stayed centred. */
.hp-section{margin-top:30px;margin-bottom:30px;}
.hp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap;}
.hp-title{font-family:var(--hp-font);font-size:1.35rem;font-weight:800;color:var(--hp-ink);display:inline-flex;align-items:center;gap:9px;letter-spacing:-.3px;}
.hp-title.flash i{color:#f5a623;}
.hp-title.flash .hp-flash-timer{background:var(--hp-red);color:#fff;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:8px;letter-spacing:.5px;}
.hp-viewall{font-size:.82rem;font-weight:700;color:var(--hp-gold-d);text-decoration:none;white-space:nowrap;}
.hp-viewall:hover{color:var(--hp-ink);}

/* ---------- Offer strip ---------- */
.hp-offer-strip{background:linear-gradient(90deg,#4a1d4f,#7a2a5d 55%,#b8864e);color:#fff;font-family:var(--hp-font);}
.hp-offer-inner{max-width:1280px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;font-size:.85rem;}
.hp-offer-msg i{color:#ffd166;margin-right:4px;}
.hp-offer-code b{color:#ffd166;letter-spacing:.5px;}
.hp-offer-timer{display:inline-flex;align-items:center;gap:3px;font-weight:700;}
.hp-offer-timer span{background:rgba(255,255,255,.16);border-radius:5px;padding:3px 6px;min-width:26px;text-align:center;font-variant-numeric:tabular-nums;}
.hp-offer-timer i{opacity:.7;font-style:normal;}
.hp-offer-btn{background:#ffd166;color:#3a1533;font-weight:800;font-size:.8rem;padding:6px 18px;border-radius:20px;text-decoration:none;}
.hp-offer-btn:hover{background:#fff;}

/* ---------- Benefits bar ---------- */
/* Benefits bar moved to assets/css/promos.css — shared with categories.php and
   product_detail.php, which render the same section but cannot load home.css. */
.hp-view-coupons{background:var(--hp-gold);color:#1a1a1a;border:none;font-weight:700;font-size:.74rem;padding:6px 14px;border-radius:20px;cursor:pointer;font-family:inherit;}
.hp-view-coupons:hover{background:var(--hp-gold-d);}

/* Coupon modal */
.hp-coupon-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;align-items:center;justify-content:center;padding:16px;}
.hp-coupon-modal.open{display:flex;}
.hp-coupon-box{background:#fff;border-radius:18px;max-width:460px;width:100%;max-height:88vh;overflow:auto;font-family:var(--hp-font);}
.hp-coupon-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--hp-line);}
.hp-coupon-head h3{font-size:1.05rem;font-weight:800;display:flex;gap:8px;align-items:center;} .hp-coupon-head h3 i{color:var(--hp-gold);}
.hp-coupon-head button{background:#f3f0ec;border:none;width:32px;height:32px;border-radius:50%;font-size:1.2rem;cursor:pointer;color:#777;}
.hp-coupon-list{padding:14px 18px;display:flex;flex-direction:column;gap:10px;}
.hp-coupon-empty{text-align:center;color:var(--hp-muted);padding:24px;}
.hp-coupon{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px dashed var(--hp-gold);border-radius:12px;padding:12px 14px;background:var(--hp-cream);}
.hp-coupon-off{font-weight:800;color:var(--hp-red);}
.hp-coupon-min{font-size:.72rem;color:var(--hp-muted);}
.hp-coupon-ttl{font-size:.72rem;color:var(--hp-ink);margin-top:2px;}
.hp-coupon-code{font-weight:800;letter-spacing:1px;border:1px dashed #bbb;border-radius:6px;padding:4px 8px;font-size:.8rem;cursor:pointer;background:#fff;}
.hp-coupon-copy{margin-top:6px;display:block;background:var(--hp-gold);color:#1a1a1a;border:none;font-weight:700;font-size:.72rem;padding:5px 12px;border-radius:16px;cursor:pointer;}

/* ---------- Hero ---------- */
.hp-hero{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin:18px 0;}
.hp-hero-main{position:relative;border-radius:var(--hp-radius);overflow:hidden;min-height:340px;box-shadow:var(--hp-shadow);background:var(--hp-pink);}
.hp-hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;display:none;padding:38px 40px;}
.hp-hero-slide.active{display:flex;align-items:center;animation:hpFade .5s ease;}
@keyframes hpFade{from{opacity:.3}to{opacity:1}}
.hp-hero-slide::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.55) 45%,transparent 70%);}
.hp-hero-text{position:relative;max-width:52%;font-family:var(--hp-font);}
.hp-hero-badge{display:inline-block;background:var(--hp-red);color:#fff;font-weight:800;font-size:.72rem;padding:5px 12px;border-radius:20px;margin-bottom:12px;}
.hp-hero-text h1{font-size:2.3rem;line-height:1.1;font-weight:800;color:var(--hp-ink);margin-bottom:10px;}
.hp-hero-text h1 span{color:var(--hp-gold-d);display:block;}
.hp-hero-text p{color:#555;font-size:.9rem;margin-bottom:18px;}
.hp-hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.hp-btn-primary{background:var(--hp-ink);color:#fff;font-weight:700;font-size:.85rem;padding:11px 26px;border-radius:30px;text-decoration:none;transition:.2s;}
.hp-btn-primary:hover{background:var(--hp-gold-d);}
.hp-btn-ghost{background:#fff;color:var(--hp-ink);font-weight:700;font-size:.85rem;padding:11px 24px;border-radius:30px;text-decoration:none;border:1px solid var(--hp-line);}
.hp-btn-ghost:hover{border-color:var(--hp-gold);color:var(--hp-gold-d);}
.hp-hero-trust{margin-top:16px;font-size:.76rem;color:#555;} .hp-hero-trust .stars{color:var(--hp-gold);} .hp-hero-trust b{color:var(--hp-ink);}
.hp-hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:#333;font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:var(--hp-shadow);}
.hp-hero-arrow.prev{left:12px;} .hp-hero-arrow.next{right:12px;}
.hp-hero-dots{position:absolute;bottom:14px;left:40px;display:flex;gap:6px;z-index:3;}
.hp-hero-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(0,0,0,.25);cursor:pointer;padding:0;}
.hp-hero-dots button.active{background:var(--hp-gold-d);width:20px;border-radius:4px;}
.hp-hero-side{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;}
.hp-hero-card{position:relative;border-radius:14px;overflow:hidden;background:var(--hp-pink) center/cover;min-height:158px;text-decoration:none;box-shadow:var(--hp-shadow);}
.hp-hero-card::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 60%);}
.hp-hero-card-in{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;color:#fff;font-family:var(--hp-font);}
.hp-hero-card-in b{display:block;font-size:.95rem;} .hp-hero-card-in span{font-size:.72rem;color:#ffd9be;font-weight:600;}

/* ---------- Category circular icons ---------- */
.hp-cats{display:flex;gap:22px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none;}
.hp-cats::-webkit-scrollbar{display:none;}
.hp-cat{flex:0 0 auto;width:84px;text-align:center;text-decoration:none;}
.hp-cat-ic{width:74px;height:74px;border-radius:50%;overflow:hidden;display:block;margin:0 auto 8px;background:var(--hp-pink);border:1px solid #f0e3ec;}
.hp-cat-ic img{width:100%;height:100%;object-fit:cover;transition:.3s;}
.hp-cat:hover .hp-cat-ic img{transform:scale(1.08);}
.hp-cat-nm{font-size:.76rem;font-weight:600;color:#333;font-family:var(--hp-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}

/* ---------- Rails ---------- */
.hp-rail{position:relative;}
.hp-rail-track{display:flex;gap:16px;min-width:0;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none;scroll-behavior:smooth;}
.hp-rail-track::-webkit-scrollbar{display:none;}
.hp-rail-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:4;width:40px;height:40px;border-radius:50%;border:none;background:#fff;color:#333;font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:var(--hp-shadow-lg);}
.hp-rail-arrow.prev{left:-8px;} .hp-rail-arrow.next{right:-8px;}
.hp-rail-arrow:hover{background:var(--hp-gold);color:#fff;}

/* ---------- Product card + card grid ----------
   Moved to promos.css so pages that cannot take home.css wholesale
   (products.php, categories.php, product_detail.php) can still render
   the same card. Every page that loads home.css also loads promos.css. */

/* ---------- Shop by category rectangular ---------- */
.hp-sbc{flex:0 0 auto;width:150px;text-align:center;text-decoration:none;}
.hp-sbc-img{width:100%;height:150px;border-radius:14px;overflow:hidden;background:var(--hp-cream);border:1px solid var(--hp-line);}
.hp-sbc-img img{width:100%;height:100%;object-fit:cover;transition:.4s;}
.hp-sbc:hover .hp-sbc-img img{transform:scale(1.07);}
.hp-sbc-nm{display:block;margin-top:9px;font-size:.82rem;font-weight:600;color:#333;font-family:var(--hp-font);}

/* ---------- Promo tiles ---------- */
.hp-promos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0;}
.hp-promo{position:relative;border-radius:var(--hp-radius);padding:26px 22px;min-height:150px;color:#fff;font-family:var(--hp-font);display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:var(--hp-shadow);overflow:hidden;background-size:cover;background-position:center;}
.hp-promo::before{content:'';position:absolute;inset:0;z-index:0;}
.hp-promo.p1::before{background:linear-gradient(120deg,rgba(91,42,134,.9),rgba(142,59,158,.78));}
.hp-promo.p2::before{background:linear-gradient(120deg,rgba(246,183,60,.9),rgba(239,142,56,.78));}
.hp-promo.p3::before{background:linear-gradient(120deg,rgba(244,115,176,.9),rgba(236,72,153,.78));}
.hp-promo-txt{position:relative;z-index:1;}
.hp-promo h4{font-size:1.35rem;font-weight:800;}
.hp-promo p{font-size:.85rem;opacity:.95;margin:3px 0 9px;}
.hp-promo-code{font-size:.75rem;margin-bottom:11px;} .hp-promo-code b{background:rgba(255,255,255,.28);padding:2px 8px;border-radius:6px;}
/* .hp-promo-btn moved to assets/css/promos.css (shared with promo_tiles). */

/* ---------- Trust badges ---------- */
.hp-trust{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--hp-cream);border:1px solid var(--hp-line);border-radius:var(--hp-radius);padding:18px 22px;margin:30px 0;}
.hp-trust-item{display:flex;align-items:center;gap:10px;font-family:var(--hp-font);}
.hp-trust-item i{color:var(--hp-gold);font-size:1.5rem;width:30px;text-align:center;}
.hp-trust-item b{display:block;font-size:.82rem;color:var(--hp-ink);} .hp-trust-item span{font-size:.7rem;color:var(--hp-muted);}

/* ---------- Footer promos ---------- */
/* Footer promos (newsletter + mega deal) moved to assets/css/promos.css. */

/* ---------- Toast ---------- */
.hp-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120px);background:#1a1a1a;color:#fff;padding:12px 22px;border-radius:30px;font-size:.85rem;font-family:var(--hp-font);z-index:100001;opacity:0;transition:.35s;}
.hp-toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hp-hero{grid-template-columns:1fr;} .hp-hero-side{grid-template-columns:repeat(2,1fr);grid-template-rows:none;}
  .hp-hero-text{max-width:70%;} .hp-hero-text h1{font-size:1.8rem;}
  .hp-promos{grid-template-columns:1fr;}   /* .hp-footer-promos: see promos.css */
  .hp-trust{gap:16px;justify-content:flex-start;}
}
@media (max-width:560px){
  .hp-title{font-size:1.1rem;} .hp-hero-main{min-height:260px;} .hp-hero-slide{padding:22px;}
  .hp-hero-text{max-width:82%;} .hp-hero-text h1{font-size:1.4rem;}
  .hp-card{width:160px;} .hp-card-media{height:190px;}
  .hp-sbc{width:120px;} .hp-sbc-img{height:120px;}
  .hp-cat{width:72px;} .hp-cat-ic{width:62px;height:62px;}
  .hp-rail-arrow,.hp-hero-arrow{display:none;}
  .hp-offer-inner{font-size:.76rem;gap:10px;padding:8px 12px;}
  /* .hp-benefit span: see promos.css */
}