/* assets/css/style.css - Hype & Hues Luxe 3.0 (Premium RoseGlass Edition C) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Poppins:wght@300;400;600&display=swap');

:root{
  --card-bg:#fff;
  --text-dark:#222;
  --accent:rgba(255,155,170,0.12);
  --rose:#b76e79;
  --gold:#f5b642;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
margin:0;
font-family:'Poppins',sans-serif;
background: linear-gradient(
  to bottom right,
  #FDF8F6,
  #FAF0EE,
  #F5E6E0
);
color:var(--text-dark);
}
.container{max-width:1200px;margin:0 auto;padding:0 18px}
.header h1{font-family:'Playfair Display',serif;color:var(--rose);margin:0}

/* ===============================
   PRODUCT GRID RESPONSIVE
================================ */

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

/* Tablet */
@media(max-width:992px){

.grid{
grid-template-columns:repeat(2,1fr);
}

}

/* Mobile (phones) */
@media(max-width:600px){

.grid{
grid-template-columns:1fr;
gap:20px;
}

}

/* Floating tooltip */
.shade-tooltip{
  position:fixed;
  background:#ccc;
  color:#fff;
  font-size:11px;
  font-weight:600;
  padding:6px 10px;
  border-radius:6px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s ease, transform .2s ease;
  z-index:9999;
  max-width:220px;
  text-align:center;
}

/* Arrow */
.shade-tooltip::after{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:6px solid #333;
}

/* Show */
.shade-tooltip.show{
  opacity:1;
  transform:translateY(0);
}

.shade-tooltip.in-stock{
  background:#b76e79;
}

.shade-tooltip.out-stock{
  background:#ccc;
}

.filter-sidebar{
    width:260px;
    padding:20px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
    position: sticky;
    top:100px;   /* prevents collision with header */
    height:fit-content;
}

.filter-sidebar{
    max-height:calc(100vh - 120px);
    overflow:auto;
}

.mobile-filter-btn{
    display:none;
    width:100%;
    padding:12px 14px;
    background:var(--rose);
    color:#fff;
    border:none;
    border-radius:10px;
    font-weight:600;
    margin-bottom:12px;
    align-items:center;
    justify-content:center;
    gap:6px;
}

#filterOverlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
backdrop-filter:blur(2px);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:998;
}

#filterOverlay.show{
opacity:1;
visibility:visible;
}

.filter-header{
    display:none;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    font-weight:600;
    font-size:16px;
    z-index: 999;
}

.filter-header button{
    background:none;
    border:none;
    font-size:22px;
    cursor:pointer;
}

.filter-header ion-icon{
    color:#e3e0db;
    height:45px;
    width:45px;
    margin:auto;
    border-radius:50%;
    background:var(--rose);

    display:flex;
    align-items:center;
    justify-content:center;

    /* soft floating shadow */
    box-shadow:0 6px 18px rgba(0,0,0,0.18);

    transition:all .25s ease;
}

/* hover effect */
.filter-header ion-icon:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,0.25);
}

@media (max-width:900px){
    
    .filter-header{
        display: flex;
        position:fixed;
        top:150px;
    }

    .filter-sidebar{
        position:fixed;
        top:80px;  /* header safe space */
        left:-320px;
        width:280px;
        height:calc(50vh - 80px);
        background:#fff;
        padding:20px;
        box-shadow:0 10px 40px rgba(0,0,0,0.2);
        overflow-y:auto;
        transition:left .35s ease;
        border-radius:0 14px 14px 0;
        z-index:999;
    }
    
    .filter-sidebar.open{
        left:0;
    }

}

/* ===============================
   CARD CONTAINER
================================ */

.hh-card-container{
display:flex;
justify-content:center;
width:100%;
padding:12px;
}

.hh-buy-btn.disabled{
  background:#ccc !important;
  box-shadow:none !important;
  cursor:not-allowed;
}

/* Out of stock shade */
.shade-option.out-of-stock{
  opacity:0.35;
  filter:grayscale(100%);
  cursor:not-allowed;
  position:relative;
}

/* Small cross overlay (premium touch) */
.shade-option.out-of-stock::marker{ display:none; }
.shade-option.out-of-stock::before{
  content:"✕";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  color:#333;
}

/* ---------- Card Base ---------- */
.hh-card {
  position: relative;
  width: 100%;
  max-width:360px;
  height: 460px;
  background: var(--card-bg);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 36px rgba(183,110,121,0.22);
  transition: transform .45s ease, box-shadow .45s ease;
  border: 1px solid rgba(183,110,121,0.12);
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  margin:0 auto;
}

/* Hover Motion */
.hh-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(183,110,121,0.28);
}

/* ---------- SALE BADGE ---------- */
.hh-sale-badge{
  position:absolute;
  top:12px;
  left:12px;
  background:#ff3b58;
  color:#fff;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  border-radius:8px;
  z-index:10;
  letter-spacing:1px;
  box-shadow:0 4px 12px rgba(255,59,88,0.28);
}

/* ---------- Wishlist Heart ---------- */
.hh-wishlist{
  position:absolute;
  top:12px;
  right:12px;
  z-index:10;
  cursor:pointer;
  width:28px;
  height:28px;
}

.heart-icon ion-icon{
  width:28px;
  height:28px;
  color: #e63946;
  transition:.3s ease;
}

.heart-icon.active ion-icon{
  color: var(--rose);
  filter: drop-shadow(0 4px 10px rgba(183,110,121,0.35));
}

/* ---------- Circle Accent ---------- */
.hh-accent-wrap {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    overflow:visible;   /* only this wrapper allows overflow */
    pointer-events:none;
    z-index:1;
}

.hh-accent::before {
    content:"";
    position:absolute;
    top:-15%;
    right:-10%;
    width:260px;
    height:260px;
    background:var(--accent);
    clip-path:circle(130px at 80% 20%);
    opacity:0.9;
    transition: clip-path .6s ease, transform .6s ease;
    z-index:1;
}

.hh-card:hover .hh-accent::before{
    clip-path:circle(220px at 80% -10%);
    transform:scale(1.15);
}

/* ---------- Faint H&H ---------- */
.hh-card::after{
  content:"H&H";
  position:absolute;
  top:35%;
  left:-10%;
  font-family: 'Playfair Display', serif;
  font-size: 7.5em;
  color: rgba(183,110,121,0.1);
  pointer-events:none;
  z-index:1;
}

/* ---------- Product Image ---------- */
.hh-imgBx{
  cursor: pointer;
  position:relative;
  top:48%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  height:60%;
  display:flex;
  justify-content:center;
  align-items:center;
  transition: .6s ease;
  z-index:3;
}

.hh-card:hover .hh-imgBx{
  top:38%;
  transform:translate(-50%,-40%) scale(1.05);
}

.hh-imgBx img{
  width: 240px;
  object-fit:contain;
  transition: .6s;
  filter: drop-shadow(0 16px 25px rgba(0,0,0,0.18));
}

/* ---------- Content Box ---------- */
.hh-contentBx{
  position:absolute;
  bottom:0;
  width:100%;
  height:180px;
  padding:16px 18px;
  transition: height .6s ease;
  box-sizing:border-box;
  z-index:6;
}

.hh-card:hover .hh-contentBx{
  height:255px;
}

/* ---------- Title ---------- */
.hh-title{
  font-family: 'Playfair Display', serif;
  font-size:20px;
  color: var(--rose);
  letter-spacing:.7px;
  margin-bottom:10px;
}

.hh-shade-name{
  font-size:13px;
  font-weight:600;
  color:#666;
  margin-bottom:8px;
}

.hh-card:hover .hh-shade-name{
  opacity:0.65;
}

.hh-card:hover .hh-title{
  opacity:0.65;
}

/* ---------- Shade Selector ---------- */
.hh-shades{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}

.shade-option{
  width:22px;
  height:22px;
  border-radius:50%;
  cursor:pointer;
  border:2px solid transparent;
  position:relative;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  transition:.3s;
}

.shade-option.selected{
  border-color: var(--rose);
  transform:scale(1.2);
}

/* ---------- Rating + Purchase Seal ---------- */
.hh-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.stars {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stars-row {
  display: flex;
  position: relative;
}

.star-wrap {
  position: relative;
  width: 20px;
  height: 20px;
}

.star-outline,
.star-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
}

.star-outline {
  color: rgba(0,0,0,0.25);
}

.star-fill {
  color: var(--gold);
  overflow: hidden;
  clip-path: inset(0 100% 0 0); /* Start empty */
  transition: clip-path .3s ease;
}

/* ---------- Purchase Seal ---------- */
.purchase-seal{
  display:flex;
  align-items:center;
  gap:6px;
  background: #3a8bff;
  padding:6px 10px;
  border-radius:20px;
  box-shadow: 0 6px 16px rgba(58,139,255,0.25);
}

.seal-count{
  font-size:13px;
  font-weight:700;
  color:#fff;
}

/* ---------- Price + Buttons ---------- */

.hh-price-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.hh-mrp{
    font-size:14px;
    color:#888;
    text-decoration:line-through;
}

.hh-discount-tag{
    background:#ff3b58;
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:4px 8px;
    border-radius:6px;
    letter-spacing:.5px;
    box-shadow:0 4px 12px rgba(255,59,88,.35);
}


.hh-bottom{
  margin-top:10px;
}

.hh-buttons{
  display:flex;
  gap:10px;
  margin-top:8px;
  cursor: pointer;
}

.hh-buy-btn{
  background:var(--rose);
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(183,110,121,0.28);
  transition:.3s;
}

.hh-cart-btn{
  background:#fff;
  border:1px solid var(--rose);
  color:var(--rose);
  padding:10px 16px;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
}

.hh-buy-btn:hover,
.hh-cart-btn:hover{
  transform:translateY(-4px);
}

/* INFO ICON */
.hh-info{
  position:absolute;
  top:12px;
  right:50px;
  z-index:10;
  cursor:pointer;
}

.info-icon ion-icon{
  width:28px;
  height:28px;
  opacity:0.7;
  color:#555;
}

/* PRODUCT DETAILS (hidden) */
.hh-details{
  position:absolute;
  bottom:-100%;
  left:0;
  width:100%;
  height:100%;
  background:#fff;
  padding:22px;
  box-sizing:border-box;
  display:block;
  z-index:20;
  transition:bottom .45s ease;
}

.hh-details h3{
  margin-bottom:8px;
  color:var(--rose);
  font-family:'Playfair Display', serif;
}

.hh-details p{
  font-size:14px;
  line-height:1.5;
  color:#444;
}

.hh-card.info-active .hh-sale-badge,
.hh-card.info-active .hh-wishlist,
.hh-card.info-active .hh-meta,
.hh-card.info-active .hh-accent,
.hh-card.info-active .hh-shades,
.hh-card.info-active .hh-bottom{
  opacity:0;
  pointer-events:none;
}

.hh-card.info-active .hh-imgBx{
  top:35%;
  transform:translate(-50%,-40%) scale(1.15);
}

.hh-card.info-active .hh-details{
  bottom:0;
}

/* CLOSE BUTTON */
.hh-close {
  position:absolute;
  top:12px;
  right:12px;
  background:#fff;
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  z-index:30;
  transition:opacity .3s ease;
}

.close-icon ion-icon{
  width:18px;
  height:18px;
  color:#000;
}

.hh-card.info-active .hh-close {
  opacity:1;
  pointer-events:auto;
}

/* Smooth fade animation for product image */
.product-main {
  transition: opacity .35s ease, transform .35s ease;
}

.product-main.fade-out {
  opacity: 0;
  transform: scale(0.95);
}

.product-main.fade-in {
  opacity: 1;
  transform: scale(1);
}

/* Smooth accent circle color fade */
.hh-accent::before {
  transition: background .35s ease, clip-path .6s ease;
}

@media(max-width:600px){

.hh-card{
width:100%;
max-width:360px;
height:420px;
margin:auto;
}

.hh-imgBx img{
width:220px;
}

}

/* Fade transitions */
.product-main {
  transition:opacity .35s ease, transform .35s ease;
}

.product-main.fade-out { opacity:0; transform:scale(0.95); }
.product-main.fade-in { opacity:1; transform:scale(1); }

/* small tweaks to center grid items */
/* Prevent grid stretch issues */

.grid-item{
display:flex;
justify-content:center;
width:100%;
}

.otp-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.otp-box{
  background:#fff;
  padding:20px;
  width:320px;
  border-radius:12px;
  text-align:center;
}
.otp-box input{
  width:100%;
  padding:10px;
  margin:8px 0;
}
.otp-box button{
  width:100%;
  padding:10px;
  margin-top:8px;
  font-weight:600;
}
.otp-msg{
  font-size:13px;
  margin-top:6px;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal.hidden {
  display: none;
}

.modal-box {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  position: relative;
}

.address-view.hidden {
  display: none;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 15px;
}

.address-card {
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
}

.address-card.active {
  border-color: #e91e63;
  background: #fff0f4;
}

.primary-btn {
  width: 100%;
  padding: 12px;
  background: #e91e63;
  color: #fff;
  border: none;
  border-radius: 10px;
  margin-top: 10px;
}

.secondary-btn {
  width: 100%;
  padding: 10px;
  background: #f2f2f2;
  border: none;
  border-radius: 10px;
  margin-top: 10px;
}

.summary-section {
  margin-bottom: 15px;
  font-size: 14px;
}

.summary-section .row {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
}

.summary-section .total {
  border-top: 1px solid #ddd;
  padding-top: 8px;
  margin-top: 8px;
}

#summaryAddress {
  font-size: 13px;
  color: #555;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 22px;
  cursor: pointer;
  color: #666;
}
.modal-close:hover {
  color: #000;
}

.discount-row { color: #2e7d32; }
#summaryMrp { text-decoration: line-through; color: #888; }

.summary-product {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

#summaryProductImg {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #eee;
}

.summary-product-info {
  flex: 1;
}

/* ===============================
   GLOBAL MOBILE SAFETY
================================ */

img{
max-width:100%;
height:auto;
}

.container{
width:100%;
max-width:1200px;
margin:auto;
padding:0 18px;
}

body{
overflow-x:hidden;
}

/* Prevent card overflow on very small phones */

@media(max-width:380px){

.grid{
gap:10px;
}

.hh-card{
height:400px;
}

}