/* =========================================================================
   Shiv Shakti — product quick view
   The overlay that opens from any product card. Markup is built by
   assets/quickview.js; every selector here is namespaced .qv- so it never
   collides with the per-page styles.

   Buttons reuse .btn from css/common.css, which every product page already
   loads. The stepper carries its own class rather than .qty-box: the pages
   bind their own stepper handler to that one.
   ========================================================================= */

/* ------------------------------------------------- trigger on the card */
/* A round eye button that slides in under the wishlist heart when the card is
   hovered, and opens into a "Quick view" pill when the button itself is.
   --s matches the heart's size so the two line up as one column of actions. */
.qv-btn{
  --s:34px;
  position:absolute; z-index:4; right:10px; top:calc(10px + var(--s) + 8px);
  height:var(--s); min-width:var(--s); padding:0;
  display:inline-flex; align-items:center; justify-content:flex-end;
  border:1px solid rgba(169,121,31,.28); border-radius:999px;
  background:rgba(253,250,243,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 8px 18px -8px rgba(58,10,17,.45);
  color:var(--maroon-700);
  font-family:inherit; cursor:pointer;
  opacity:0; transform:translateX(12px);
  transition:opacity .35s ease .06s, transform .45s cubic-bezier(.22,1,.36,1) .06s,
             background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.qv-solo{top:10px;}                                  /* card without a heart */
/* not .qv-label — the dialog already uses that name (with a top margin)
   for its "Quantity" heading, which knocked this text off-centre */
.qv-btn-text{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  line-height:1;
  transition:max-width .4s cubic-bezier(.22,1,.36,1), opacity .25s, padding .4s cubic-bezier(.22,1,.36,1);
}
.qv-btn-eye{
  width:calc(var(--s) - 2px); height:calc(var(--s) - 2px); flex:none;
  display:grid; place-items:center;
}
.qv-btn-eye svg{width:17px; height:17px; transition:transform .4s cubic-bezier(.34,1.56,.64,1);}

.card:hover .qv-btn, .qv-btn:focus-visible{opacity:1; transform:none;}
.qv-btn:hover, .qv-btn:focus-visible{
  color:var(--gold-300); border-color:transparent;
  background:linear-gradient(135deg,var(--maroon-700),var(--maroon-950));
  box-shadow:0 12px 24px -10px rgba(58,10,17,.75), 0 0 0 3px rgba(217,176,74,.25);
}
.qv-btn:hover .qv-btn-text, .qv-btn:focus-visible .qv-btn-text{max-width:110px; opacity:1; padding-left:14px; color:#fff3d6;}
.qv-btn:hover .qv-btn-eye svg, .qv-btn:focus-visible .qv-btn-eye svg{transform:scale(1.15);}
.qv-btn:focus-visible{outline:2px solid var(--gold-400); outline-offset:2px;}

.home-page .qv-btn{--s:38px;}
@media (max-width:640px){
  .shop-page .qv-btn{--s:30px;}
  .qv-btn-eye svg{width:15px; height:15px;}
}

/* Touch devices get no hover, so the eye simply stays on. */
@media (hover:none){
  .qv-btn{opacity:1; transform:none;}
}

/* --------------------------------------------------------------- shell */
.qv-root{
  position:fixed; inset:0; z-index:900;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.qv-root[hidden]{display:none;}
.qv-scrim{
  position:absolute; inset:0;
  background:rgba(30,4,8,.66);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s ease;
}
.qv-root.is-open .qv-scrim{opacity:1;}

/* the shell holds the card plus the prev / next arrows either side of it;
   152px of the width is left over for the arrows on narrower desktops */
.qv-shell{position:relative; width:min(960px,100% - 152px);}
.qv-dialog{
  position:relative;
  width:100%; max-height:min(88vh,760px);
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  background:var(--cream-050);
  border:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:0 40px 90px -40px rgba(30,4,8,.9);
  overflow:hidden;
  opacity:0; transform:translateY(18px) scale(.985);
  transition:opacity .32s ease, transform .38s cubic-bezier(.22,.61,.36,1);
}
.qv-root.is-open .qv-dialog{opacity:1; transform:none;}

.qv-x{
  position:absolute; z-index:4; top:14px; right:14px;
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(253,250,243,.92); border:1px solid var(--line);
  color:var(--maroon-800); cursor:pointer;
  box-shadow:0 8px 18px -10px rgba(58,10,17,.6);
  transition:background .25s, color .25s, transform .25s ease;
}
.qv-x svg{width:17px; height:17px;}
.qv-x:hover{background:var(--maroon-700); color:var(--gold-300); transform:rotate(90deg);}

/* --------------------------------------------------------------- media */
.qv-media{
  position:relative; overflow:hidden;
  touch-action:pan-y;                  /* sideways swipes are ours, vertical scroll isn't */
  background:var(--paper);
  border-right:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  min-height:0;
}
/* contain, not cover — a quick view should show the whole pack */
.qv-media img{width:100%; height:100%; object-fit:contain; padding:18px;}
.qv-media .badge{top:16px; left:16px;}

/* ------------------------------------------------------- prev / next */
/* glass circles on the dark scrim, one either side of the whole popup */
.qv-nav{
  position:absolute; z-index:5; top:50%; margin-top:-28px;
  width:56px; height:56px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  color:var(--gold-300);
  background:rgba(253,250,243,.1);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(232,200,118,.5);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8);
  opacity:0;
  transition:opacity .35s ease .1s, background .25s, color .25s, border-color .25s,
             box-shadow .25s, translate .35s cubic-bezier(.22,1,.36,1);
}
.qv-root.is-open .qv-nav{opacity:1;}
.qv-nav svg{width:24px; height:24px;}
.qv-prev{left:-80px;}
.qv-next{right:-80px;}
.qv-nav:hover, .qv-nav:focus-visible{
  color:var(--maroon-950); border-color:transparent;
  background:linear-gradient(145deg,var(--gold-300),var(--gold-500));
  box-shadow:0 16px 30px -12px rgba(0,0,0,.85), 0 0 0 5px rgba(232,200,118,.22);
}
.qv-prev:hover{translate:-4px 0;}
.qv-next:hover{translate:4px 0;}
.qv-count{
  position:absolute; z-index:3; left:50%; bottom:14px; transform:translateX(-50%);
  padding:6px 14px; border-radius:999px; white-space:nowrap;
  font-size:.74rem; letter-spacing:.14em; font-variant-numeric:tabular-nums;
  color:rgba(251,245,232,.8); background:rgba(40,5,9,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.qv-count b{font-family:var(--display); font-size:.9rem; color:var(--gold-300);}
.qv-shell.is-single .qv-nav,
.qv-shell.is-single .qv-count{display:none;}

/* the photo slides in from the side you moved towards; the details fade up */
.qv-dialog.swap-next .qv-media img{animation:qvFromRight .5s cubic-bezier(.22,1,.36,1);}
.qv-dialog.swap-prev .qv-media img{animation:qvFromLeft .5s cubic-bezier(.22,1,.36,1);}
.qv-dialog.swap-next .qv-body > *,
.qv-dialog.swap-prev .qv-body > *{animation:qvRise .45s cubic-bezier(.22,1,.36,1) both;}
.qv-dialog[class*="swap-"] .qv-body > :nth-child(2){animation-delay:.03s;}
.qv-dialog[class*="swap-"] .qv-body > :nth-child(3){animation-delay:.06s;}
.qv-dialog[class*="swap-"] .qv-body > :nth-child(4){animation-delay:.09s;}
.qv-dialog[class*="swap-"] .qv-body > :nth-child(n+5){animation-delay:.12s;}
@keyframes qvFromRight{from{opacity:0; transform:translateX(56px) scale(.96);}}
@keyframes qvFromLeft{from{opacity:0; transform:translateX(-56px) scale(.96);}}
@keyframes qvRise{from{opacity:0; transform:translateY(8px);}}

/* ---------------------------------------------------------------- body */
.qv-body{
  padding:34px 34px 30px;
  /* the cap has to sit here, not only on .qv-dialog: a grid row grows to fit
     its content, so a capped grid clipped the details instead of scrolling */
  max-height:min(88vh,760px);
  overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:12px;
}
.qv-cat{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-600); font-weight:600;
}
.qv-title{
  font-family:var(--display); font-weight:600;
  font-size:1.62rem; line-height:1.25; color:var(--ink);
  margin:0;
}
.qv-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:9px;}
.qv-price .sp{font-family:var(--display); font-size:1.5rem; font-weight:600; color:var(--maroon-700);}
.qv-price .mrp{font-size:.9rem; color:#a99b8f; text-decoration:line-through;}
.qv-price .off{
  font-size:.76rem; font-weight:700; color:#1f7a4d;
  background:rgba(31,122,77,.1); padding:3px 9px; border-radius:999px;
}
.qv-tax{font-size:.74rem; color:var(--ink-soft); margin:-4px 0 0;}
.qv-desc{
  margin:4px 0 0; font-size:.92rem; line-height:1.65; color:var(--ink-soft);
}
.qv-label{
  margin:10px 0 0; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:600;
}

/* ------------------------------------------------------------ variants */
.qv-chips{display:flex; flex-wrap:wrap; gap:8px;}
.qv-chips button{
  padding:8px 16px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--cream-100);
  font-family:inherit; font-size:.82rem; color:var(--ink);
  transition:border-color .22s, background .22s, color .22s;
}
.qv-chips button:hover{border-color:var(--gold-500);}
.qv-chips button[aria-pressed="true"]{
  border-color:var(--maroon-700); background:var(--maroon-700); color:var(--gold-300);
}

/* ------------------------------------------------- quantity + actions */
.qv-buy{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px;}
.qv-buy .btn{flex:1; min-width:180px;}
.qv-qty{
  flex:none; display:flex; align-items:center; overflow:hidden;
  border:1.5px solid var(--line); border-radius:12px; background:var(--cream-100);
}
.qv-qty button{
  width:42px; height:46px; border:0; cursor:pointer;
  background:var(--paper); color:var(--maroon-700); font-size:1.1rem;
  transition:background .2s, color .2s;
}
.qv-qty button:hover{background:var(--maroon-700); color:var(--gold-300);}
.qv-qty input{
  width:46px; text-align:center; border:0; background:transparent;
  font-family:inherit; font-size:1rem; color:var(--ink);
}
.qv-heart{
  flex:none; width:50px; height:50px; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); background:var(--cream-100);
  color:var(--maroon-700);
  transition:background .25s, color .25s, border-color .25s, transform .25s ease;
}
.qv-heart svg{width:20px; height:20px;}
.qv-heart:hover{border-color:var(--maroon-600); transform:translateY(-2px);}
.qv-heart[aria-pressed="true"]{background:var(--maroon-700); border-color:var(--maroon-700); color:var(--gold-300);}
.qv-heart[aria-pressed="true"] svg{fill:currentColor;}

.qv-more{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  margin-top:2px; padding-bottom:2px;
  font-size:.85rem; font-weight:600; color:var(--maroon-700);
  border-bottom:1.5px solid rgba(110,22,34,.28);
  transition:color .25s, border-color .25s, gap .25s;
}
.qv-more svg{width:15px; height:15px;}
.qv-more:hover{color:var(--maroon-500); border-color:var(--maroon-500); gap:12px;}

/* --------------------------------------------------------------- trust */
.qv-trust{
  margin:14px 0 0; padding-top:16px;
  border-top:1px dashed var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;
}
.qv-trust li{
  display:flex; align-items:center; gap:9px;
  font-size:.78rem; color:var(--ink-soft);
}
.qv-trust svg{width:16px; height:16px; flex:none; color:var(--gold-600);}

body.qv-locked{overflow:hidden;}

/* ---------------------------------------------------------- responsive */
@media (max-width:900px){
  .qv-root{padding:0;}
  .qv-dialog{
    grid-template-columns:1fr;
    width:100%; max-height:100vh; height:100%;
    border-radius:0; border:0;
    grid-template-rows:minmax(0,38vh) minmax(0,1fr);
  }
  .qv-media{border-right:0; border-bottom:1px solid var(--line);}
  .qv-body{padding:24px 20px 28px; max-height:none;}   /* the 38vh / 1fr rows size it here */
  .qv-title{font-size:1.36rem;}
  .qv-shell{width:100%; height:100%;}
  /* full-screen here, so the arrows move onto the photo (38vh tall) */
  .qv-nav{
    top:19vh; width:42px; height:42px; margin-top:-21px;
    color:var(--maroon-700); background:rgba(253,250,243,.92);
    border-color:rgba(169,121,31,.3);
    box-shadow:0 10px 22px -12px rgba(58,10,17,.6);
  }
  .qv-nav svg{width:20px; height:20px;}
  .qv-prev{left:10px;}
  .qv-next{right:10px;}
  .qv-count{bottom:10px;}
}
@media (max-width:480px){
  .qv-trust{grid-template-columns:1fr;}
  /* the stepper and the heart share a row, the button takes the next one */
  .qv-buy .btn{flex:1 0 100%; min-width:0; order:3;}
}
@media (prefers-reduced-motion:reduce){
  .qv-scrim, .qv-dialog, .qv-btn{transition-duration:.01ms !important;}
  .qv-dialog{transform:none;}
  .qv-dialog .qv-media img, .qv-dialog .qv-body > *{animation:none !important;}
}