/* ================================================================
   Vandana Mall — Footer promos + benefits bar (shared)
   ----------------------------------------------------------------
   Styles for sections/footer_promos.php, sections/benefits_bar.php and
   the .hp-promo-btn used by sections/promo_tiles.php.

   These lived in home.css, which only the six storefront landing pages
   load. categories.php and product_detail.php need the same sections but
   cannot take home.css wholesale — it also restyles body, .container and
   .top-bar, which would fight those pages' own layout. So the shared
   pieces live here and home.css no longer defines them.

   Every page that renders any of these sections must link this file.
   ================================================================ */

/* Same values home.css declares. Repeated so this file stands alone on
   pages that do not load home.css; identical values, so load order is
   irrelevant when both are present. */
:root {
    --hp-gold: #d4a373;
    --hp-gold-d: #b8864e;
    --hp-ink: #1a1a1a;
    --hp-muted: #8a8a8a;
    --hp-line: #eee;
    --hp-cream: #faf7f2;
    --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;
}

/* ---------- Benefits bar ---------- */
.hp-benefits{background:var(--hp-cream);border:1px solid var(--hp-line);border-radius:var(--hp-radius);margin:16px 0;box-shadow:var(--hp-shadow);}
.hp-benefits-inner{margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-around;gap:16px;flex-wrap:wrap;font-family:var(--hp-font);}
.hp-benefit{display:flex;align-items:center;gap:10px;font-size:.8rem;}
.hp-benefit i{color:var(--hp-gold);font-size:1.2rem;width:24px;text-align:center;}
.hp-benefit b{display:block;color:var(--hp-ink);font-size:.82rem;}
.hp-benefit span{color:var(--hp-muted);font-size:.72rem;}
.hp-benefit.coupons{background:#fff;border:1px dashed var(--hp-gold);border-radius:30px;padding:6px 8px 6px 14px;}

/* ---------- Shared promo button (also used by promo_tiles) ---------- */
.hp-promo-btn{display:inline-block;background:#fff;color:#1a1a1a;font-weight:800;font-size:.76rem;padding:8px 20px;border-radius:20px;text-decoration:none;}
.hp-promo-btn:hover{background:#ffd166;}

/* ---------- Footer promos: newsletter + mega deal ---------- */
.hp-footer-promos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0;font-family:var(--hp-font);}
.hp-fp{position:relative;overflow:hidden;border-radius:var(--hp-radius);padding:26px;color:#fff;box-shadow:var(--hp-shadow);min-height:200px;display:flex;align-items:center;background-size:cover;background-position:center;}
.hp-fp::before{content:'';position:absolute;inset:0;z-index:0;}
.hp-fp-news::before{background:linear-gradient(120deg,rgba(58,21,51,.94),rgba(109,42,92,.85));}
.hp-fp-mega::before{background:linear-gradient(120deg,rgba(246,183,60,.94),rgba(239,125,52,.88));}
.hp-fp-in{position:relative;z-index:1;width:100%;}
.hp-fp h4{font-size:1.25rem;font-weight:800;} .hp-fp p{font-size:.84rem;opacity:.95;margin:4px 0 14px;}
.hp-news-form{display:flex;gap:8px;flex-wrap:wrap;}
.hp-news-form input{flex:1;min-width:150px;border:none;border-radius:10px;padding:12px 14px;font-family:inherit;font-size:.84rem;outline:none;color:#1a1a1a;}
.hp-news-form button{background:var(--hp-gold);color:#1a1a1a;border:none;font-weight:800;padding:0 22px;border-radius:10px;cursor:pointer;font-family:inherit;}
.hp-news-msg{font-size:.76rem;margin-top:8px;min-height:16px;} .hp-news-msg.ok{color:#9ff5c0;} .hp-news-msg.err{color:#ffc2c2;}
.hp-mega-big{font-size:2rem;font-weight:900;line-height:1;margin:2px 0;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hp-footer-promos{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .hp-benefit span{display:none;}
}

/* ---------- Product card + card grid ----------
   Moved here from home.css. Only the six landing pages load home.css, but
   products.php and product_detail.php show the same cards and cannot take
   home.css wholesale — it restyles body, .container and .top-bar. Every page
   that loads home.css also loads this file, so nothing lost the styles. */
/* wrapping grid of hp-cards (New Arrivals) — reuses the same .hp-card as the rails
   (matches their size on desktop) but wraps into rows instead of scrolling */
.hp-cardgrid{display:flex;flex-wrap:wrap;gap:18px 16px;padding:4px 2px 6px;}
/* on narrow screens force a clean 2-per-row grid so cards don't drop to 1 each */
@media (max-width:640px){
  .hp-cardgrid{gap:14px 12px;}
  .hp-cardgrid .hp-card{width:calc(50% - 6px);}
}

/* continuous auto-rotating (marquee) rail */
.hp-rail-loop{overflow:hidden;position:relative;}
.hp-rail-track.loop{width:max-content;overflow:visible;flex-wrap:nowrap;animation-name:hp-marq;animation-timing-function:linear;animation-iteration-count:infinite;}
.hp-rail-loop:hover .hp-rail-track.loop{animation-play-state:paused;}
@keyframes hp-marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Product card ---------- */
.hp-card{flex:0 0 auto;width:210px;background:#fff;border:1px solid var(--hp-line);border-radius:14px;overflow:hidden;cursor:pointer;transition:.25s;display:flex;flex-direction:column;font-family:var(--hp-font);}
.hp-card:hover{box-shadow:var(--hp-shadow-lg);transform:translateY(-4px);border-color:#f0e3d5;}
.hp-card-media{position:relative;height:240px;background:var(--hp-cream);overflow:hidden;}
.hp-card-media img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.hp-card:hover .hp-card-media img{transform:scale(1.06);}
.hp-badge{position:absolute;top:10px;left:10px;background:var(--hp-red);color:#fff;font-size:.66rem;font-weight:800;padding:3px 9px;border-radius:6px;z-index:2;}
.hp-card .wishlist{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.95);border:none;cursor:pointer;color:#888;box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:2;}
.hp-card .wishlist:hover,.hp-card .wishlist .fas{color:var(--hp-gold);}
.hp-card-body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:3px;flex:1;}
.hp-card-brand{font-size:.68rem;color:var(--hp-muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
.hp-card-name{font-size:.85rem;font-weight:600;color:var(--hp-ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* A fixed line-height AND min-height, not just min-height: with min-height alone
   a row holding text measured 17px while an empty one measured 15px, so the
   price and button below still shifted by a couple of pixels between cards. */
.hp-card-rate{font-size:.72rem;color:#555;min-height:17px;line-height:17px;} .hp-card-rate i{color:var(--hp-gold);} .hp-card-rate span{color:var(--hp-muted);margin-left:3px;}
.hp-card-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:2px;min-height:23px;}
.hp-card-price .cur{font-size:1rem;font-weight:800;color:var(--hp-ink);}
.hp-card-price .mrp{font-size:.76rem;color:var(--hp-muted);text-decoration:line-through;}
.hp-card-price .off{font-size:.72rem;color:var(--hp-green);font-weight:700;}
/* Same idea as .hp-card-rate: the row is always in the markup and always this
   tall, whether it says "Only 3 Left", "Out of stock" or nothing. */
.hp-card-stock{font-size:.7rem;color:var(--hp-red);font-weight:600;min-height:17px;line-height:17px;}
/* margin-top:auto pins the button to the bottom of the body, so it lines up
   across a row no matter what the rows above it contain. */
.hp-card-cart{margin-top:auto;background:transparent;border:1px solid var(--hp-gold);color:var(--hp-gold-d);font-weight:700;font-size:.76rem;padding:8px;border-radius:22px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:.2s;}
.hp-card-cart:hover{background:var(--hp-gold);color:#1a1a1a;}
.hp-card-mini{width:150px;} .hp-card-mini .hp-card-media{height:150px;}
.hp-card-cart:disabled{border-color:var(--hp-line);color:var(--hp-muted);cursor:not-allowed;}
.hp-card-cart:disabled:hover{background:transparent;color:var(--hp-muted);}

/* On a phone the card is ~148px wide and "₹1 ₹20 95% OFF" wrapped onto a second
   line for some products and not others, which pushed their Add to Cart down.
   The discount is already on the badge over the image, so dropping the duplicate
   from the price row keeps it to one line — and every card the same shape. */
@media (max-width:640px){
  .hp-card-price .off{display:none;}
}