/* ======================================================================
   ARTHUBLY — PRODUCT CSS
   File: public/assets/frontend/css/arthubly-product.css

   Product dikhane wali har cheez yahin hai. Purani 3 files merge:
       card-v2.css  +  card-v3.css  +  2-quickview.css

   CONTENTS
   --------
   A. PRODUCT CARD — base layout        (purana card-v2.css)
   B. PRODUCT CARD — look + stock fix   (purana card-v3.css, A ko override karta hai)
   C. QUICK VIEW DRAWER                 (purana 2-quickview.css)
   D. PRODUCT DETAIL — EDITORIAL STORY  (purane 4 bootstrap tabs ki jagah)

   Load order: arthubly.css  →  arthubly-product.css  →  arthubly-shop.css
   ====================================================================== */


/* ==========================================================================
   A. PRODUCT CARD — BASE LAYOUT
   tha: card-v2.css
   ========================================================================== */


/* =========================================================
   ARTHUBLY — PRODUCT CARD v2
   arthubly.css ke sabse END me paste karein.
   ========================================================= */

.pcard.pcard-v2 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 14px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}

.pcard.pcard-v2:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: var(--line-2);
}

/* ---------- TOP BAR ---------- */
.pcard-v2 .pc-top {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 12px;
}

.pcard-v2 .pc-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--brass-d);
  color: #fff;
  font: 700 12px/1 var(--font-b);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.pcard-v2 .pc-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(251, 248, 242, .92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.pcard-v2 .pc-fav svg {
  width: 22px;
  height: 22px;
}

.pcard-v2 .pc-fav:hover {
  background: #fff;
  transform: scale(1.08);
}

.pcard-v2 .pc-fav.on {
  color: var(--madder);
}

.pcard-v2 .pc-fav.on svg {
  fill: var(--madder);
}

/* ---------- MEDIA ---------- */
.pcard-v2 .pc-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 1/1;
}

.pcard-v2 .pc-imglink {
  position: absolute;
  inset: 0;
  display: block;
}

.pcard-v2 .pc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}

.pcard-v2 .pc-img.alt {
  opacity: 0;
}

/* FIX: main image tabhi fade ho jab hover image maujood ho.
   :only-child = <a> ke andar sirf ek hi <img> hai, matlab hover image nahi hai
   — aise me image gayab nahi honi chahiye. */
.pcard-v2 .pc-media:hover .pc-img.main:not(:only-child) {
  opacity: 0;
}

/* hover image nahi hai — image waisi hi rahegi, bas halka sa zoom */
.pcard-v2 .pc-media:hover .pc-img.main:only-child {
  transform: scale(1.04);
}

.pcard-v2 .pc-media:hover .pc-img.alt {
  opacity: 1;
  transform: scale(1.04);
}

.pcard-v2 .pc-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.pcard-v2 .pc-label {
  background: var(--celadon);
  color: #fff;
  font: 700 10px/1 var(--font-b);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--r-pill);
}

.pcard-v2 .pc-label.sale {
  background: var(--madder);
}

.pcard-v2 .pc-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: var(--sh-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s var(--ease);
}

.pcard-v2 .pc-zoom svg {
  width: 20px;
  height: 20px;
}

.pcard-v2 .pc-zoom:hover {
  transform: scale(1.08);
}

/* ---------- BODY ---------- */
.pcard-v2 .pc-body {
  padding: 5px 4px 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* category + authentic — ek hi row */
.pcard-v2 .pc-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.pcard-v2 .pc-cat-row .pc-cat {
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard-v2 .pc-cat-row .pc-authentic {
  flex: 0 0 auto;
  white-space: nowrap;
}

.pcard-v2 .pc-cat {
  font: 600 11px/1 var(--font-b);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 8px;
}

.pcard-v2 .pc-cat a {
  color: inherit;
}

.pcard-v2 .pc-title {
  margin: 0 0 10px;
  font: 600 28px/1.18 var(--font-d);
  letter-spacing: -.01em;
}

.pcard-v2 .pc-title a {
  color: var(--ink);
}

.pcard-v2 .pc-title a:hover {
  color: var(--brass-d);
}

/* rating + trust */
.pcard-v2 .pc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pcard-v2 .pc-rating {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pcard-v2 .pc-stars {
  position: relative;
  display: inline-block;
  width: 92px;
  height: 16px;
  background: var(--line-2);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 20px);
  mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 20px);
}

.pcard-v2 .pc-stars i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--brass);
}

.pcard-v2 .pc-rcount {
  font: 500 13px/1 var(--font-b);
  color: var(--ink-50);
}

.pcard-v2 .pc-authentic {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 13px/1 var(--font-b);
  color: var(--ink-70);
}

.pcard-v2 .pc-authentic svg {
  width: 18px;
  height: 18px;
  color: var(--celadon);
}

/* price */
.pcard-v2 .pc-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pcard-v2 .pc-price {
  font: 600 32px/1 var(--font-d);
  color: var(--ink);
  letter-spacing: -.02em;
}

.pcard-v2 .pc-price-right {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

.pcard-v2 .pc-price-old {
  font: 500 16px/1 var(--font-b);
  color: var(--ink-30);
  text-decoration: line-through;
}

.pcard-v2 .pc-price-off {
  font: 700 15px/1 var(--font-b);
  color: var(--madder);
}

/* ornament */
.pcard-v2 .pc-orn {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--brass);
  margin: 18px 0;
}

.pcard-v2 .pc-orn .ln {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.pcard-v2 .pc-orn svg {
  width: 42px;
  height: 16px;
  flex: 0 0 auto;
}

/* ---------- VARIATIONS ---------- */
.pcard-v2 .pc-varhead {
  font: 600 12px/1 var(--font-b);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-d);
  margin-bottom: 14px;
}

/* Size + Finish ek hi row me */
.pcard-v2 .pc-vars {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  /* margin-bottom: 14px; */
}

.pcard-v2 .pc-sizes {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- "one of a kind" info box (jab size na ho) ---------- */
.pcard-v2 .pc-uniquebox {
  flex: 1 1 auto;
  min-width: 0;
}

.pcard-v2 .pc-unique {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 9px;
  border-radius: var(--r-md);
  background: var(--paper-2);
}

.pcard-v2 .pc-unique-ic {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
}

.pcard-v2 .pc-unique-ic svg {
  width: 15px;
  height: 15px;
}

.pcard-v2 .pc-unique-txt {
  min-width: 0;
}

.pcard-v2 .pc-unique-txt b {
  display: block;
  font: 600 12px/1.3 var(--font-b);
  color: var(--ink);
  margin-bottom: 3px;
}

.pcard-v2 .pc-unique-txt small {
  display: block;
  font: 400 11px/1.4 var(--font-b);
  color: var(--ink-70);
}

.pcard-v2 .pc-finish {
  flex: 0 0 auto;
  max-width: 100%;
}

.pcard-v2 .pc-group {
  margin-bottom: 0;
}

.pcard-v2 .pc-glabel {
  font: 600 11px/1 var(--font-b);
  color: var(--ink-70);
  letter-spacing: .04em;
  margin-bottom: 7px;
  display: block;
}

.pcard-v2 .pc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pcard-v2 .pc-chip {
  min-width: 40px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: 500 12.5px/1 var(--font-b);
  cursor: pointer;
  transition: all .2s var(--ease);
}

.pcard-v2 .pc-chip:hover {
  border-color: var(--brass);
}

.pcard-v2 .pc-chip.active {
  background: var(--brass-d);
  border-color: var(--brass-d);
  color: #fff;
  font-weight: 600;
}

.pcard-v2 .pc-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pcard-v2 .pc-swatches .color-dot {
  width: 32px;
  height: 32px;
  border-radius: 26%;
  border: 0;
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px var(--line-2);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

.pcard-v2 .pc-swatches .color-dot:hover {
  transform: translateY(-1px);
}

.pcard-v2 .pc-swatches .color-dot.active {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brass-d);
}

/* shipping bar */
.pcard-v2 .pc-ship {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  color: var(--ink-70);
  font: 500 14px/1 var(--font-b);
  margin-top: 9px;
}

.pcard-v2 .pc-ship svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* add to cart */
.pcard-v2 .pc-cartform {
  margin: 0;
}

.pcard-v2 .pc-add {
  width: 100%;
  height: 45px;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--brass-d);
  color: #fff;
  font-weight: 500;
  font-size: 19px;
  cursor: pointer;
  transition: background .2s var(--ease), transform .15s var(--ease);
}

.pcard-v2 .pc-add svg {
  width: 24px;
  height: 24px;
}

.pcard-v2 .pc-add:hover {
  background: #7a5319;
}

.pcard-v2 .pc-add:active {
  transform: translateY(1px);
}

/* trust row */
.pcard-v2 .pc-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 11px;
}

.pcard-v2 .pc-trust span {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 500 10.5px/1 var(--font-b);
  color: var(--ink-70);
}

.pcard-v2 .pc-trust span+span::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: var(--line-2);
}

.pcard-v2 .pc-trust svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--ink-50);
}

/* =========================================================
   RESPONSIVE — arthubly.css wale hi breakpoints
   1600 / 1081 / 1180 / 1080 / 980 / 900 / 860 / 820 / 768
   720 / 680 / 640 / 600 / 560 / 520 / 480 / 400
   + hover:none, prefers-reduced-motion
   ========================================================= */

/* ---------- BIG DESKTOP ---------- */
@media(min-width:1600px) {
  .pcard-v2 .pc-title {
    font-size: 30px;
  }

  .pcard-v2 .pc-price {
    font-size: 34px;
  }
}

/* ---------- DESKTOP: dense grids me card chhota ---------- */
@media(min-width:1081px) {

  .grid.cols-3 .pcard-v2 .pc-title,
  .grid.cols-4 .pcard-v2 .pc-title {
    font-size: 22px;
  }

  .grid.cols-3 .pcard-v2 .pc-price,
  .grid.cols-4 .pcard-v2 .pc-price {
    font-size: 26px;
  }

  .grid.cols-4 .pcard-v2 .pc-add {
    height: 52px;
    font-size: 16px;
  }

  .grid.cols-4 .pcard-v2 .pc-unique {
    padding: 10px 12px;
  }

  .grid.cols-4 .pcard-v2 .pc-unique-txt b {
    font-size: 12px;
  }

  .grid.cols-4 .pcard-v2 .pc-unique-txt small {
    font-size: 11px;
  }

  .grid.cols-4 .pcard-v2 .pc-chip {
    min-width: 36px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .grid.cols-4 .pcard-v2 .pc-swatches .color-dot {
    width: 28px;
    height: 28px;
  }

  .grid.cols-4 .pcard-v2 .pc-trust span {
    font-size: 11px;
    gap: 5px;
  }

  .grid.cols-4 .pcard-v2 .pc-trust svg {
    width: 14px;
    height: 14px;
  }
}

@media(max-width:1180px) {
  .pcard-v2 .pc-title {
    font-size: 26px;
  }

  .pcard-v2 .pc-price {
    font-size: 30px;
  }
}

/* ---------- LAPTOP / TABLET LANDSCAPE ---------- */
@media(max-width:1080px) {
  .pcard.pcard-v2 {
    padding: 13px;
  }

  .pcard-v2 .pc-title {
    font-size: 25px;
  }

  .pcard-v2 .pc-price {
    font-size: 29px;
  }

  .pcard-v2 .pc-add {
    height: 56px;
    font-size: 18px;
  }

  .pcard-v2 .pc-trust span {
    font-size: 7px;
  }

  .pcard-v2 .pc-unique {
    gap: 5px;
    padding: 4px 2px;
  }

  .pcard-v2 .pc-unique-txt b {
    font: 600 10px / 1.3 var(--font-b);
    margin-bottom: 3px;
  }

  .pcard-v2 .pc-unique-txt small {
    font: 400 10px / 1.4 var(--font-b);
  }

  .pcard-v2 .pc-unique-ic {
    width: 16px;
    height: 16px;
  }

  .pcard-v2 .pc-authentic {
    gap: 1px;
    font-size: 10px;
  }

  .pcard-v2 .pc-vars {
    gap: 8px;
  }

  .pcard-v2 .pc-cat {
    font-size: 8px;
  }
}

@media(max-width:980px) {
  .pcard-v2 .pc-title {
    font-size: 24px;
  }

  .pcard-v2 .pc-price {
    font-size: 28px;
  }

  .pcard-v2 .pc-authentic {
    font-size: 12.5px;
  }

  .pcard-v2 .pc-orn {
    margin: 16px 0;
  }
}

@media(max-width:900px) {
  .pcard-v2 .pc-body {
    padding-top: 16px;
  }

  .pcard-v2 .pc-chip {
    min-width: 38px;
    height: 31px;
    padding: 0 9px;
    font-size: 12px;
  }

  .pcard-v2 .pc-swatches .color-dot {
    width: 30px;
    height: 30px;
  }


  .pcard-v2 .pc-unique {
    gap: 5px;
    padding: 5px 3px;
  }

  .pcard-v2 .pc-unique-txt b {
    font: 600 11px / 1.3 var(--font-b);
    margin-bottom: 3px;
  }

  .pcard-v2 .pc-unique-txt small {
    font: 400 10px / 1.4 var(--font-b);
  }

  .pcard-v2 .pc-unique-ic {
    width: 17px;
    height: 17px;
  }

}

/* ---------- TABLET ---------- */
@media(max-width:860px) {
  .pcard-v2 .pc-title {
    font-size: 23px;
  }

  .pcard-v2 .pc-price {
    font-size: 27px;
  }

  .pcard-v2 .pc-pill {
    height: 32px;
    padding: 0 17px;
    font-size: 11.5px;
  }

  .pcard-v2 .pc-ship {
    padding: 14px 16px;
    font-size: 13.5px;
  }

  .pcard-v2 .pc-unique {
    gap: 5px;
    padding: 5px 3px;
  }

  .pcard-v2 .pc-unique-txt b {
    font: 600 11px / 1.3 var(--font-b);
    margin-bottom: 3px;
  }

  .pcard-v2 .pc-unique-txt small {
    font: 400 10px / 1.4 var(--font-b);
  }

  .pcard-v2 .pc-unique-ic {
    width: 17px;
    height: 17px;
  }

}

@media(max-width:820px) {
  .pcard-v2 .pc-trust span {
    font-size: 9.5px;
    gap: 6px;
  }

  .pcard-v2 .pc-trust svg {
    width: 15px;
    height: 15px;
  }
}

@media(max-width:768px) {
  .pcard.pcard-v2 {
    padding: 12px;
    border-radius: var(--r-lg);
  }

  .pcard-v2 .pc-title {
    font-size: 22px;
  }

  .pcard-v2 .pc-price {
    font-size: 26px;
  }

  .pcard-v2 .pc-add {
    height: 54px;
    font-size: 17px;
  }

  .pcard-v2 .pc-add svg {
    width: 22px;
    height: 22px;
  }

  .pcard-v2 .pc-unique {
    gap: 5px;
    padding: 5px 3px;
  }

  .pcard-v2 .pc-unique-txt b {
    font: 600 11px / 1.3 var(--font-b);
    margin-bottom: 3px;
  }

  .pcard-v2 .pc-unique-txt small {
    font: 400 10px / 1.4 var(--font-b);
  }

  .pcard-v2 .pc-unique-ic {
    width: 17px;
    height: 17px;
  }
}

@media(max-width:720px) {
  .pcard-v2 .pc-meta {
    gap: 8px;
    margin-bottom: 12px;
  }

  .pcard-v2 .pc-stars {
    width: 84px;
    height: 15px;
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 15px, transparent 15px 18.6px);
    mask: repeating-linear-gradient(90deg, #000 0 15px, transparent 15px 18.6px);
  }

  .pcard-v2 .pc-unique {
    gap: 5px;
    padding: 5px 3px;
  }

  .pcard-v2 .pc-unique-txt b {
    font: 600 11px / 1.3 var(--font-b);
    margin-bottom: 3px;
  }

  .pcard-v2 .pc-unique-txt small {
    font: 400 10px / 1.4 var(--font-b);
  }

  .pcard-v2 .pc-unique-ic {
    width: 17px;
    height: 17px;
  }

}

/* ---------- MOBILE LANDSCAPE / BADA PHONE ---------- */
@media(max-width:680px) {
  .pcard-v2 .pc-title {
    font-size: 21px;
  }

  .pcard-v2 .pc-price {
    font-size: 25px;
  }

  .pcard-v2 .pc-cat {
    font-size: 10.5px;
    margin-bottom: 6px;
  }

  .pcard-v2 .pc-varhead {
    margin-bottom: 12px;
  }

  .pcard-v2 .pc-group {
    /* margin-bottom: 14px; */
  }

  .pcard-v2 .pc-orn {
    margin: 5px 0;
  }

  .pcard-v2 .pc-unique {
    gap: 5px;
    padding: 5px 3px;
  }

  .pcard-v2 .pc-unique-txt b {
    font: 600 12px / 1.3 var(--font-b);
    margin-bottom: 3px;
  }

  .pcard-v2 .pc-unique-txt small {
    font: 400 11px / 1.4 var(--font-b);
  }

  .pcard-v2 .pc-unique-ic {
    width: 18px;
    height: 18px;
  }

}

@media(max-width:640px) {

  /* rating aur trust badge alag lines par */
  .pcard-v2 .pc-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }

  .pcard-v2 .pc-chips,
  .pcard-v2 .pc-swatches {
    gap: 8px;
  }
}

@media(max-width:600px) {
  .pcard-v2 .pc-price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .pcard-v2 .pc-price-right {
    gap: 10px;
  }

  .pcard-v2 .pc-price-old {
    font-size: 15px;
  }

  .pcard-v2 .pc-price-off {
    font-size: 14px;
  }
}

/* ---------- PHONE ---------- */
@media(max-width:560px) {
  .pcard.pcard-v2 {
    padding: 12px;
  }

  /* mobile: size aur finish alag-alag line par */
  .pcard-v2 .pc-vars {
    flex-direction: column;
    gap: 12px;
  }

  .pcard-v2 .pc-uniquebox {
    width: 100%;
  }

  .pcard-v2 .pc-finish {
    max-width: 100%;
  }

  .pcard-v2 .pc-chips {
    gap: 6px;
  }

  .pcard-v2 .pc-title {
    font-size: 20px;
  }

  .pcard-v2 .pc-price {
    font-size: 24px;
  }

  .pcard-v2 .pc-authentic {
    font-size: 12px;
  }

  .pcard-v2 .pc-chip {
    flex: 0 1 calc(25% - 5px);
    min-width: 0;
    height: 34px;
    padding: 0 4px;
    font-size: 12.5px;
  }

  .pcard-v2 .pc-swatches .color-dot {
    width: 42px;
    height: 42px;
  }

  .pcard-v2 .pc-add {
    height: 52px;
    font-size: 16.5px;
  }

  .pcard-v2 .pc-trust span {
    font-size: 11px;
    gap: 5px;
  }

  .pcard-v2 .pc-trust svg {
    width: 14px;
    height: 14px;
  }

  .pcard-v2 .pc-unique {
    gap: 5px;
    padding: 5px 3px;
  }

  .pcard-v2 .pc-unique-txt b {
    font: 500 10px / 1.3 var(--font-b);
    margin-bottom: 3px;
  }

  .pcard-v2 .pc-unique-txt small {
    font: 400 9px / 1.4 var(--font-b);
  }

  .pcard-v2 .pc-unique-ic {
    width: 17px;
    height: 17px;
  }


  .pcard-v2 .pc-unique {
    gap: 5px;
    padding: 5px 3px;
  }

  .pcard-v2 .pc-unique-txt b {
    font: 600 11px / 1.3 var(--font-b);
    margin-bottom: 3px;
  }

  .pcard-v2 .pc-unique-txt small {
    font: 400 10px / 1.4 var(--font-b);
  }

  .pcard-v2 .pc-unique-ic {
    width: 17px;
    height: 17px;
  }

}

@media (max-width:520px) {
  .pcard-v2 .pc-title {
    font-size: 19.5px;
  }

  .pcard-v2 .pc-price {
    font-size: 23px;
  }

  .pcard-v2 .pc-ship {
    padding: 13px 15px;
    font-size: 13px;
  }

  .pcard-v2 .pc-ship svg {
    width: 20px;
    height: 20px;
  }


  .pcard-v2 .pc-unique {
    gap: 5px;
    padding: 5px 3px;
  }

  .pcard-v2 .pc-unique-txt b {
    font: 600 11px / 1.3 var(--font-b);
    margin-bottom: 3px;
  }

  .pcard-v2 .pc-unique-txt small {
    font: 400 10px / 1.4 var(--font-b);
  }

  .pcard-v2 .pc-unique-ic {
    width: 17px;
    height: 17px;
  }

}

@media(max-width:480px) {
  .pcard.pcard-v2 {
    padding: 4px;
  }

  .pcard-v2 .pc-top {
    padding: 3px 3px 10px;
  }

  .pcard-v2 .pc-pill {
    height: 30px;
    padding: 0 15px;
    font-size: 11px;
    letter-spacing: .1em;
  }

  .pcard-v2 .pc-fav {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
  }

  .pcard-v2 .pc-fav svg {
    width: 20px;
    height: 20px;
  }

  .pcard-v2 .pc-zoom {
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
  }

  .pcard-v2 .pc-body {
    padding: 5px 2px 2px;
  }

  .pcard-v2 .pc-title {
    font-size: 16px;
  }

  .pcard-v2 .pc-price {
    font-size: 20px;
  }

  .pcard-v2 .pc-cat-row {
    gap: 3px;
    margin-bottom: 4px;
  }

  .pcard-v2 .pc-chip {
    flex: 0 1 calc(25% - 5px);
    min-width: 30px;
    max-width: 30px;
    height: 32px;
    padding: 0 4px;
    font-size: 12px;
  }

  .pcard-v2 .pc-chips {
    gap: 6px;
  }

  .pcard-v2 .pc-swatches .color-dot {
    width: 38px;
    height: 38px;
  }

  .pcard-v2 .pc-add {
    height: 45px;
    font-size: 15px;
    gap: 9px;
  }

  .pcard-v2 .pc-trust {
    /* margin-top: 13px; */
  }

  .pcard-v2 .pc-trust span {
    font-size: 8px;
    gap: 4px;
  }

  .pcard-v2 .pc-trust svg {
    width: 13px;
    height: 13px;
  }

  .pcard-v2 .pc-swatches .color-dot {
    width: 28px;
    height: 28px;
  }

  .pcard-v2 .pc-ship {
    padding: 11px 15px;
    font-size: 13px;
    margin-top: 9px;
  }

  .pcard-v2 .pc-ship svg {
    width: 18px;
    height: 18px;
  }

  .pcard-v2 .pc-unique {
    gap: 5px;
    padding: 5px 3px;
  }

  .pcard-v2 .pc-unique-txt b {
    font: 500 10px / 1.3 var(--font-b);
    margin-bottom: 3px;
  }

  .pcard-v2 .pc-unique-txt small {
    font: 400 9px / 1.4 var(--font-b);
  }

  .pcard-v2 .pc-unique-ic {
    width: 16px;
    height: 16px;
  }

}

/* ---------- CHHOTA PHONE ---------- */
@media(max-width:400px) {

  .pcard-v2 .pc-authentic {
    font-size: 8px;
    gap: 1px;
  }

  .pcard-v2 .pc-glabel {
    font: 600 10px / 1 var(--font-b);
  }

  .pcard-v2 .pc-varhead {
    font-size: 10px;
  }

  .pcard-v2 .pc-cat {
    font-size: 6.5px;
  }

  .pcard-v2 .pc-title {
    font-size: 13px;
  }

  .pcard-v2 .pc-ship {
    padding: 3px 11px;
    font-size: 9px;
    margin-top: 7px;
  }

  .pcard-v2 .pc-price {
    font-size: 20px;
  }

  .pcard-v2 .pc-stars {
    width: 76px;
    height: 14px;
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 17.4px);
    mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 17.4px);
  }

  .pcard-v2 .pc-orn svg {
    width: 34px;
  }

  /* size chips: 1 row me 3 */
  .pcard-v2 .pc-chips {
    gap: 6px;
  }

  .pcard-v2 .pc-chip {
    flex: 0 1 calc(33.333% - 4px);
    min-width: 22px;
    max-width: 22px;
    height: 25px;
    padding: 0 1px;
    font-size: 9px;
  }

  .pcard-v2 .pc-swatches .color-dot {
    width: 21px;
    height: 21px;
  }

  .pcard-v2 .pc-add {
    height: 35px;
    font-size: 12px;
  }

  .pcard-v2 .pc-add svg {
    width: 15px;
    height: 15px;
  }

  /* trust row 3 alag lines me na toote */
  .pcard-v2 .pc-trust span {
    font-size: 5.5px;
  }

  .pcard-v2 .pc-trust svg {
    width: 12px;
    height: 12px;
  }

  .pcard-v2 .pc-unique {
    gap: 5px;
    padding: 5px 3px;
  }

  .pcard-v2 .pc-unique-txt b {
    font: 500 9px / 1.3 var(--font-b);
    margin-bottom: 3px;
  }

  .pcard-v2 .pc-unique-txt small {
    font: 400 8px / 1.4 var(--font-b);
  }

  .pcard-v2 .pc-unique-ic {
    width: 15px;
    height: 15px;
  }

}

/* ---------- TOUCH DEVICES: hover effects band ---------- */
@media (hover:none) {

  .pcard.pcard-v2:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
  }

  .pcard-v2 .pc-media:hover .pc-img.main,
  .pcard-v2 .pc-media:hover .pc-img.main:not(:only-child) {
    opacity: 1;
  }

  .pcard-v2 .pc-media:hover .pc-img.main:only-child {
    transform: none;
  }

  .pcard-v2 .pc-media:hover .pc-img.alt {
    opacity: 0;
    transform: none;
  }

  .pcard-v2 .pc-zoom:hover,
  .pcard-v2 .pc-swatches .color-dot:hover {
    transform: none;
  }

  .pcard-v2 .pc-chip:hover {
    border-color: var(--line-2);
  }

  .pcard-v2 .pc-add:hover {
    background: var(--brass-d);
  }

  .pcard-v2 .pc-fav:hover {
    background: rgba(251, 248, 242, .92);
    transform: none;
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce) {

  .pcard.pcard-v2,
  .pcard-v2 .pc-img,
  .pcard-v2 .pc-fav,
  .pcard-v2 .pc-zoom,
  .pcard-v2 .pc-chip,
  .pcard-v2 .pc-add,
  .pcard-v2 .pc-swatches .color-dot {
    transition: none !important;
  }

  .pcard.pcard-v2:hover {
    transform: none;
  }
}

/* size chip jo selected finish me available nahi hai */
.pcard-v2 .pc-chip.pc-off {
  opacity: .38;
  cursor: not-allowed;
  text-decoration: line-through;
}


/* ==========================================================================
   B. PRODUCT CARD — LOOK + STOCK STATES
   tha: card-v3.css — section A ko jaan-boojh kar override karta hai
   ========================================================================== */


/* =========================================================================
   ARTHUBLY — PRODUCT CARD v3  (LOOK FIX)
   File: public/assets/frontend/css/card-v3.css

   Ye file card-v2.css ke BAAD load karein:
       <link rel="stylesheet" href="{{ asset('public/assets/frontend/css/card-v2.css') }}">
       <link rel="stylesheet" href="{{ asset('public/assets/frontend/css/card-v3.css') }}">   <-- naya

   Kya theek hota hai:
   1. Har card ki height barabar — "New arrivals" aur "Made by hand" grid ab line me.
   2. Painting crop nahi hogi — poori artwork mount (paper mat) ke andar dikhegi.
   3. Title / price / button hamesha same line par (chahe size ho ya na ho).
   4. Card ka clutter kam — ornament divider, trust row, bada shipping box hata diya.
   5. Category ka "MINIATURE PAINTI…" cut-off theek.
   6. Reveal animation ka stagger halka — 4th card upar-neeche nahi kudega.
   ========================================================================= */

/* ============ 1. GRID — kabhi squeeze nahi hoga ============ */
.grid.cols-4 {
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  align-items: stretch;
  gap: 26px 22px;
}

.grid.cols-4>* {
  min-width: 0;
}

/* reveal ka stagger halka: cards ek saath settle hon */
.reveal-group.in>* {
  transition-duration: .5s;
}

.reveal-group.in>*:nth-child(n+3) {
  transition-delay: .09s;
}

/* ============ 2. CARD SHELL ============ */
.pcard.pcard-v2 {
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  border-color: var(--line);
  background: var(--surface);
}

.pcard.pcard-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(24, 20, 14, .10);
}

/* ============ 3. MEDIA — sab images ek jaisi tile me ============
   Kyun white: aapke catalog me kuch images ka background white hai
   (peacock, horse, logo) aur kuch ka nahi. Cream mount par white
   image ek alag safed dabba lagti thi. White tile par sab merge ho
   jati hain. Ratio 1:1 rakha — grid ka rhythm barabar. */
.pcard-v2 .pc-media {
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* image tile ke kinare se thoda andar — breathing room */
.pcard-v2 .pc-imglink {
  inset: 14px;
}

.pcard-v2 .pc-img {
  object-fit: contain;
  /* poori painting dikhegi, crop nahi */
  object-position: center;
}

.pcard-v2 .pc-media:hover .pc-img.main:only-child {
  transform: scale(1.03);
}

/* badge + wishlist */
.pcard-v2 .pc-badges {
  top: 10px;
  left: 10px;
  flex-direction: row;
}

.pcard-v2 .pc-label {
  background: var(--surface);
  color: var(--ink-70);
  border: 1px solid var(--line-2);
  font-size: 9.5px;
  padding: 5px 9px;
}

.pcard-v2 .pc-label.sale {
  background: var(--madder);
  border-color: var(--madder);
  color: #fff;
}

.pcard-v2 .pc-fav {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  opacity: 0;
  transform: translateY(-4px);
}

.pcard-v2 .pc-fav svg {
  width: 18px;
  height: 18px;
}

.pcard.pcard-v2:hover .pc-fav,
.pcard-v2 .pc-fav.on,
.pcard-v2 .pc-fav:focus-visible {
  opacity: 1;
  transform: none;
}

/* ============ 4. BODY — sab kuch ek rhythm me ============ */
.pcard-v2 .pc-body {
  padding: 15px 16px 16px;
  gap: 0;
}

/* ---- meta line: category + authentic tick ---- */
.pcard-v2 .pc-cat-row {
  margin-bottom: 7px;
  gap: 8px;
}

.pcard-v2 .pc-cat {
  font-size: 10px;
  letter-spacing: .14em;
  min-width: 0;
}

/* authentic ko sirf tick rakhein — text jagah kha raha tha */
.pcard-v2 .pc-authentic {
  font-size: 0;
  gap: 0;
}

.pcard-v2 .pc-authentic svg {
  width: 16px;
  height: 16px;
}

/* ---- title: hamesha 2 line ki jagah ---- */
.pcard-v2 .pc-title {
  margin: 0 0 6px;
  font-size: 19px !important;
  line-height: 1.3;
  min-height: calc(19px * 1.3 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- rating: fixed height, taaki bina rating wale card na khiskein ---- */
.pcard-v2 .pc-meta {
  margin-bottom: 6px;
  min-height: 16px;
}

.pcard-v2 .pc-stars {
  width: 78px;
  height: 14px;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 17px);
  mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 17px);
}

/* ---- price ---- */
.pcard-v2 .pc-price-row {
  gap: 8px;
  margin-bottom: 12px;
}

.pcard-v2 .pc-price {
  font-size: 22px !important;
}

.pcard-v2 .pc-price-old {
  font-size: 13px;
}

.pcard-v2 .pc-price-off {
  font-size: 12px;
}

/* ---- hataya hua clutter ---- */
.pcard-v2 .pc-orn,
.pcard-v2 .pc-trust,
.pcard-v2 .pc-varhead {
  display: none !important;
}

/* ============ 5. VARIATIONS — fixed height row ============ */
.pcard-v2 .pc-vars {
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  min-height: 52px;
  margin-bottom: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.pcard-v2 .pc-glabel {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 6px;
}

/* FIX: pehle nowrap + overflow:hidden tha — isliye 3 se zyada size
   chips cut ho jati thi. Ab wrap hota hai, koi size chhupti nahi. */
.pcard-v2 .pc-chips {
  gap: 5px;
  flex-wrap: wrap;
  overflow: visible;
}

.pcard-v2 .pc-chip {
  min-width: 34px;
  height: 28px;
  padding: 0 9px;
  font-size: 11.5px;
  border-radius: 6px;
}

.pcard-v2 .pc-swatches {
  gap: 6px;
  flex-wrap: wrap;
}

.pcard-v2 .pc-swatches .color-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

/* "one of a kind" — box ki jagah ek shaant line */
.pcard-v2 .pc-unique {
  padding: 0;
  background: none;
  align-items: center;
  gap: 8px;
}

.pcard-v2 .pc-unique-ic {
  width: 20px;
  height: 20px;
  background: var(--paper-2);
  color: var(--ink-70);
}

.pcard-v2 .pc-unique-ic svg {
  width: 12px;
  height: 12px;
}

.pcard-v2 .pc-unique-txt b {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-70);
  margin: 0;
}

.pcard-v2 .pc-unique-txt small {
  display: none;
}

/* ============ 6. SHIPPING — chhoti line, bada box nahi ============ */
.pcard-v2 .pc-ship {
  padding: 0;
  margin: 0 0 12px;
  background: none;
  border-radius: 0;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ink-50);
}

.pcard-v2 .pc-ship svg {
  width: 15px;
  height: 15px;
}

/* ============ 7. ADD TO CART — hamesha card ke bottom par ============ */
.pcard-v2 .pc-cartform {
  margin-top: auto;
}

.pcard-v2 .pc-add {
  height: 44px !important;
  margin-top: 0;
  gap: 9px;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 8px;
  background: transparent;
  color: var(--brass-d);
  border: 1px solid var(--brass-d);
}

.pcard-v2 .pc-add svg {
  width: 17px;
  height: 17px;
}

.pcard-v2 .pc-add:hover {
  background: var(--brass-d);
  color: #fff;
}

.pcard-v2 .pc-add:focus-visible {
  outline: 2px solid var(--brass-d);
  outline-offset: 2px;
}

/* ============ 8. RESPONSIVE ============ */
@media (max-width: 1080px) {
  .grid.cols-4 {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px 16px;
  }

  .pcard-v2 .pc-title {
    font-size: 17px !important;
    min-height: calc(17px * 1.3 * 2);
  }

  .pcard-v2 .pc-price {
    font-size: 20px !important;
  }
}

@media (max-width: 640px) {

  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }

  .pcard-v2 .pc-imglink {
    inset: 10px;
  }

  .pcard-v2 .pc-body {
    padding: 12px 12px 13px;
  }

  .pcard-v2 .pc-title {
    font-size: 15px !important;
    min-height: calc(15px * 1.3 * 2);
  }

  .pcard-v2 .pc-price {
    font-size: 18px !important;
  }

  /* mobile par variations chhupa dein — tap karke product page/quick view */
  .pcard-v2 .pc-vars,
  .pcard-v2 .pc-ship {
    display: none;
  }

  .pcard-v2 .pc-fav {
    opacity: 1;
    transform: none;
  }

  .pcard-v2 .pc-add {
    height: 40px !important;
    font-size: 13px !important;
  }
}

/* ============ 9. ACCESSIBILITY ============ */
@media (prefers-reduced-motion: reduce) {

  .pcard.pcard-v2,
  .pcard-v2 .pc-img,
  .pcard-v2 .pc-fav {
    transition: none !important;
  }

  .pcard.pcard-v2:hover {
    transform: none;
  }
}

/* =========================================================================
   10. SELECTION STATES — "Please select a size" wale alert ki jagah
   ========================================================================= */

/* out of stock size — dikhegi, par clearly disabled */
.pcard-v2 .pc-chip.pc-off {
  opacity: .42;
  cursor: not-allowed;
  text-decoration: line-through;
  background: var(--paper-2);
  border-color: var(--line);
}

.pcard-v2 .pc-chip.pc-off:hover {
  border-color: var(--line);
}

/* jis group ko chunna hai wahi highlight — poora card nahi */
.pcard-v2 .pc-group.needs-pick .pc-glabel {
  color: var(--madder);
}

.pcard-v2 .pc-group.needs-pick .pc-chip:not(.pc-off),
.pcard-v2 .pc-group.needs-pick .color-dot {
  border-color: var(--madder);
  box-shadow: 0 0 0 1px var(--madder);
  animation: pc-nudge .4s ease;
}

@keyframes pc-nudge {

  0%,
  100% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(-3px);
  }

  65% {
    transform: translateX(3px);
  }
}

/* inline hint — card ke andar, alert ki jagah */
.pcard-v2 .pc-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(180, 67, 47, .07);
  color: var(--madder);
  font: 500 11.5px/1.35 var(--font-b);
}

.pcard-v2 .pc-hint svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* sab sizes out of stock */
.pcard-v2.is-soldout .pc-add {
  opacity: .5;
  cursor: not-allowed;
  border-color: var(--line-2);
  color: var(--ink-50);
}

.pcard-v2.is-soldout .pc-add:hover {
  background: transparent;
  color: var(--ink-50);
}

@media (prefers-reduced-motion: reduce) {

  .pcard-v2 .pc-group.needs-pick .pc-chip,
  .pcard-v2 .pc-group.needs-pick .color-dot {
    animation: none;
  }
}

/* out of stock finish swatch */
.pcard-v2 .color-dot.pc-off {
  opacity: .35;
  cursor: not-allowed;
  filter: grayscale(1);
  position: relative;
}

.pcard-v2 .color-dot.pc-off::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118%;
  height: 1px;
  background: var(--ink-50);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.pcard-v2 .color-dot.pc-off:hover {
  transform: none;
}

/* Sold out badge */
.pcard-v2 .pc-label.out {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* poora card sold out — image thodi halki */
.pcard-v2.is-soldout .pc-media {
  opacity: .72;
}

.pcard-v2 .pc-add:disabled {
  opacity: .5;
  cursor: not-allowed;
  border-color: var(--line-2);
  color: var(--ink-50);
  background: transparent;
}


/* ==========================================================================
   C. QUICK VIEW DRAWER
   tha: 2-quickview.css
   ========================================================================== */


/* =========================================================
   ARTHUBLY — QUICK VIEW DRAWER (redesigned card layout)
   arthubly.css ke sabse END me paste karein.
   Purani .qv-* rules ko override kar dega.
   ========================================================= */

.qv-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.qv-drawer.open {
  pointer-events: auto;
}

.qv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 30, 46, .45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}

.qv-drawer.open .qv-backdrop {
  opacity: 1;
}

.qv-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--sh-pop);
  transform: translateX(102%);
  transition: transform .42s var(--ease);
}

.qv-drawer.open .qv-panel {
  transform: none;
}

body.qv-open {
  overflow: hidden;
}

/* ---------- TOP BAR ---------- */
.qv-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 10px;
}

.qv-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--brass-d);
  color: #fff;
  font: 700 12px/1 var(--font-b);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.qv-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qv-fav,
.qv-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.qv-fav svg,
.qv-close svg {
  width: 22px;
  height: 22px;
}

.qv-fav:hover,
.qv-close:hover {
  background: var(--paper-2);
}

.qv-fav.on {
  color: var(--madder);
}

.qv-fav.on svg {
  fill: var(--madder);
}

/* ---------- SCROLL AREA ---------- */
.qv-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 20px 18px;
  -webkit-overflow-scrolling: touch;
}

/* ---------- MEDIA ---------- */
.qv-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 1 / 1;
}

.qv-media .qv-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}

.qv-media.zoomed .qv-main {
  transform: scale(1.6);
  cursor: zoom-out;
}

.qv-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: var(--sh-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s var(--ease);
}

.qv-zoom svg {
  width: 20px;
  height: 20px;
}

.qv-zoom:hover {
  transform: scale(1.08);
}

/* ---------- THUMBS ---------- */
.qv-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.qv-thumbs:empty {
  display: none;
}

.qv-thumbs .qv-thumb {
  width: 58px !important;
  height: 58px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line) !important;
  opacity: .65;
  object-fit: cover;
  cursor: pointer;
}

/* ---------- BODY ---------- */
.qv-body {
  padding-top: 18px;
}

.qv-cat {
  font: 600 11px/1 var(--font-b);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 8px;
}

.qv-cat:empty {
  display: none;
}

#qv-title {
  margin: 0 0 10px;
  font: 600 30px/1.18 var(--font-d);
  color: var(--ink);
  letter-spacing: -.01em;
}

/* rating + trust */
.qv-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.qv-rating {
  display: flex;
  align-items: center;
  gap: 7px;
}

.qv-stars {
  position: relative;
  display: inline-block;
  width: 92px;
  height: 16px;
  background: linear-gradient(var(--line-2), var(--line-2));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 20px);
  mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 20px);
}

.qv-stars i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--brass);
  display: block;
}

.qv-rcount {
  font: 500 13px/1 var(--font-b);
  color: var(--ink-50);
}

.qv-authentic {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 13.5px/1 var(--font-b);
  color: var(--ink-70);
}

.qv-authentic svg {
  width: 18px;
  height: 18px;
  color: var(--celadon);
}

/* price */
.qv-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#qv-price.product-price {
  font: 600 34px/1 var(--font-d);
  color: var(--ink);
  letter-spacing: -.02em;
}

.qv-price-right {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

.qv-price-old {
  font: 500 16px/1 var(--font-b);
  color: var(--ink-30);
  text-decoration: line-through;
}

.qv-price-off {
  font: 700 15px/1 var(--font-b);
  color: var(--madder);
}

.qv-price-old:empty,
.qv-price-off:empty {
  display: none;
}

/* ornament */
.qv-orn {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--brass);
  margin: 18px 0;
}

.qv-orn .ln {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.qv-orn svg {
  width: 42px;
  height: 16px;
  flex: 0 0 auto;
}

.qv-desc {
  margin: 0 0 18px;
  font: 400 14.5px/1.65 var(--font-b);
  color: var(--ink-70);
}

.qv-desc:empty {
  display: none;
  margin: 0;
}

/* ---------- VARIATIONS ---------- */
.qv-varhead {
  font: 600 12px/1 var(--font-b);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-d);
  margin-bottom: 14px;
}

.qv-group {
  margin-bottom: 16px;
}

.qv-group.is-hidden {
  display: none;
}

.qv-glabel {
  display: block;
  font: 600 13px/1 var(--font-b);
  color: var(--ink);
  margin-bottom: 9px;
}

.qv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.qv-chip {
  min-width: 78px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font: 500 15px/1 var(--font-b);
  cursor: pointer;
  transition: all .2s var(--ease);
}

.qv-chip:hover {
  border-color: var(--brass);
}

.qv-chip.active {
  background: var(--brass-d);
  border-color: var(--brass-d);
  color: #fff;
  font-weight: 600;
}

.qv-chip.disabled {
  opacity: .4;
  pointer-events: none;
  text-decoration: line-through;
}

/* colour / finish swatches */
.qv-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.qv-sw {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px var(--line-2);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

.qv-sw:hover {
  transform: translateY(-1px);
}

.qv-sw.active {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brass-d);
}

/* quantity */
.qv-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
}

.qv-stepper button {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.qv-stepper button:hover {
  background: var(--paper-2);
}

.qv-stepper span {
  min-width: 44px;
  text-align: center;
  font: 600 15px/1 var(--font-b);
  color: var(--ink);
}

/* shipping bar */
.qv-ship {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  color: var(--ink-70);
  font: 500 14.5px/1 var(--font-b);
  margin-top: 4px;
}

.qv-ship svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* ---------- FOOTER ---------- */
.qv-foot {
  flex: 0 0 auto;
  padding: 16px 20px 20px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.qv-submit {
  width: 100%;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--brass-d);
  color: #fff;
  font: 600 19px/1 var(--font-b);
  cursor: pointer;
  transition: background .2s var(--ease), transform .15s var(--ease);
}

.qv-submit svg {
  width: 24px;
  height: 24px;
}

.qv-submit:hover {
  background: #7a5319;
}

.qv-submit:active {
  transform: translateY(1px);
}

.qv-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 16px;
}

.qv-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 12.5px/1 var(--font-b);
  color: var(--ink-70);
  position: relative;
  flex: 1;
  justify-content: center;
}

.qv-trust span+span::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: var(--line-2);
}

.qv-trust svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--ink-50);
}

/* ---------- MOBILE ---------- */
@media (max-width: 520px) {
  .qv-panel {
    max-width: 100%;
  }

  #qv-title {
    font-size: 26px;
  }

  #qv-price.product-price {
    font-size: 29px;
  }

  .qv-trust span {
    font-size: 11px;
    gap: 5px;
  }

  .qv-trust svg {
    width: 14px;
    height: 14px;
  }
}


/* ==========================================================================
   D. PRODUCT DETAIL — EDITORIAL STORY
   product_details.blade.php ke .pdp-story ke liye.
   Purane 4 tabs (Description / Additional info / Shipping / Reviews) ki
   jagah — sab kuch ek scroll me, magazine layout.
   ========================================================================== */

.pdp-story {
  margin-top: 64px;
}

/* ---------- sticky section nav ---------- */
.ps-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 0;
  margin-bottom: 8px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.ps-nav::-webkit-scrollbar {
  display: none;
}

.ps-nav a {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font: 500 13px/1 var(--font-b);
  color: var(--ink-70);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.ps-nav a:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.ps-nav a.is-on {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- shared block ---------- */
.ps-block {
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 80px;
}

.ps-block:last-child {
  border-bottom: 0;
}

.ps-eyebrow {
  display: block;
  font: 600 11px/1 var(--font-b);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-d);
  margin-bottom: 14px;
}

.ps-title {
  margin: 0 0 18px;
  font: 400 40px/1.12 var(--font-d);
  color: var(--ink);
  letter-spacing: -.015em;
}

.ps-h3 {
  margin: 0 0 22px;
  padding-bottom: 12px;
  font: 500 22px/1.2 var(--font-d);
  color: var(--ink);
  border-bottom: 2px solid var(--brass);
  display: inline-block;
}

/* ---------- 1. THE ARTWORK ---------- */
.ps-artwork {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: 64px;
  align-items: start;
}

.ps-prose {
  font: 400 16px/1.75 var(--font-b);
  color: var(--ink-70);
  max-width: 54ch;
}

.ps-prose p {
  margin: 0 0 14px;
}

.ps-prose :is(h1, h2, h3, h4) {
  font: 500 19px/1.3 var(--font-d);
  color: var(--ink);
  margin: 24px 0 10px;
}

.ps-prose ul,
.ps-prose ol {
  padding-left: 20px;
  margin: 0 0 14px;
}

.ps-prose li {
  margin-bottom: 6px;
}

/* ---------- kya khaas hai ---------- */
.ps-points {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
  max-width: 52ch;
}

.ps-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 14.5px/1.55 var(--font-b);
  color: var(--ink-70);
}

.ps-points svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--brass-d);
}

/* ---------- detail shots strip ---------- */
.ps-shots {
  margin-top: 30px;
}

.ps-shots-label {
  display: block;
  font: 600 10.5px/1 var(--font-b);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 12px;
}

.ps-shots-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 430px;
}

.ps-shots-row img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}

.ps-shots-row img:hover {
  transform: translateY(-2px);
  border-color: var(--brass);
}

.ps-sign {
  margin: 28px 0 0;
  padding-bottom: 14px;
  font: italic 400 20px/1.3 var(--font-d);
  color: var(--brass-d);
  border-bottom: 1px solid var(--line-2);
  display: inline-block;
}

.ps-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
  max-width: 430px;
}

.ps-badges span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  font: 500 11.5px/1.4 var(--font-b);
  color: var(--ink-50);
}

.ps-badges svg {
  width: 26px;
  height: 26px;
  color: var(--brass-d);
}

/* ---------- 2. SPECIFICATIONS ---------- */
.ps-artwork-rhs {
  padding: 28px 26px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}

.ps-specs {
  margin: 0;
  display: grid;
  gap: 2px;
}

.ps-spec {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
}

.ps-spec:last-child {
  border-bottom: 0;
}

.ps-spec-ic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--paper-2);
  color: var(--brass-d);
}

.ps-spec-ic svg {
  width: 17px;
  height: 17px;
}

.ps-spec-txt {
  min-width: 0;
}

.ps-spec dt {
  font: 500 11px/1 var(--font-b);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 5px;
}

.ps-spec dd {
  margin: 0;
  font: 500 15px/1.4 var(--font-b);
  color: var(--ink);
}

.ps-note {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  font: 400 13.5px/1.6 var(--font-b);
  color: var(--ink-70);
}

/* ---------- 3. THE PROCESS ---------- */
.ps-process {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr);
  gap: 48px;
  align-items: start;
  padding: 44px;
  margin: 56px 0;
  border-radius: var(--r-lg);
  background: #3a3226;
  border-bottom: 0;
  color: #efe6d6;
}

.ps-process .ps-h3 {
  color: #fff;
  border-bottom-color: var(--brass);
}

.ps-process-lhs p {
  margin: 0 0 20px;
  font: 400 14.5px/1.7 var(--font-b);
  color: rgba(239, 230, 214, .74);
}

.ps-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13.5px/1 var(--font-b);
  color: var(--brass);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color .2s var(--ease);
}

.ps-link:hover {
  border-bottom-color: var(--brass);
  color: var(--brass);
}

.ps-link svg {
  width: 15px;
  height: 15px;
}

.ps-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 20px;
  counter-reset: none;
}

.ps-step {
  position: relative;
  padding: 0 0 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(239, 230, 214, .12);
  overflow: hidden;
}

/* step ki photo — product ki apni images se aati hai */
.ps-step-img {
  position: relative;
  margin: 0 0 14px;
  aspect-ratio: 16 / 10;
  background: rgba(239, 230, 214, .08);
  overflow: hidden;
}

.ps-step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.02);
  transition: transform .6s var(--ease);
}

.ps-step:hover .ps-step-img img {
  transform: scale(1.05);
}

/* image na ho to bhi tile khaali na lage */
.ps-step-img.is-blank::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(204, 153, 102, .22), rgba(239, 230, 214, .05));
}

.ps-step-n {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brass);
  color: #241f18;
  font: 600 12px/1 var(--font-b);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}

.ps-step b {
  display: block;
  padding: 0 16px;
  font: 500 15px/1.3 var(--font-d);
  color: #fff;
  margin-bottom: 5px;
}

.ps-step small {
  display: block;
  padding: 0 16px;
  font: 400 12.5px/1.55 var(--font-b);
  color: rgba(239, 230, 214, .66);
}

/* ---------- 4. CARE ---------- */
.ps-care-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.ps-care-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font: 400 13px/1.5 var(--font-b);
  color: var(--ink-70);
  max-width: 15ch;
  margin: 0 auto;
}

.ps-care-ic {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--brass-d);
}

.ps-care-ic svg {
  width: 22px;
  height: 22px;
}

/* ---------- 5. REVIEWS ---------- */
.ps-reviews {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 2.3fr);
  gap: 48px;
  align-items: start;
}

.ps-score-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.ps-score {
  font: 400 52px/1 var(--font-d);
  color: var(--ink);
}

/* ---------- rating breakdown bars ---------- */
.ps-bars {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 7px;
}

.ps-bars li {
  display: grid;
  grid-template-columns: 30px 1fr 26px;
  align-items: center;
  gap: 10px;
}

.ps-bar-n {
  font: 500 12px/1 var(--font-b);
  color: var(--ink-50);
}

.ps-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.ps-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--brass);
  transition: width .5s var(--ease);
}

.ps-bar-c {
  font: 500 12px/1 var(--font-b);
  color: var(--ink-50);
  text-align: right;
}

/* ---------- write review button ---------- */
.ps-writebtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 600 14px/1 var(--font-b);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.ps-writebtn:hover {
  background: var(--ink);
  color: var(--paper);
}

.ps-writebtn svg {
  width: 16px;
  height: 16px;
}

.ps-rev-mine {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  font: 400 13px/1.55 var(--font-b);
  color: var(--ink-70);
}

/* ---------- write form ---------- */
.ps-revform {
  grid-column: 1 / -1;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  display: none;
}

.ps-revform.is-open {
  display: block;
}

.ps-revform h4 {
  margin: 0 0 16px;
  font: 500 18px/1.2 var(--font-d);
  color: var(--ink);
}

.ps-stars-pick {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}

.ps-stars-pick button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--line-2);
  cursor: pointer;
  transition: transform .15s var(--ease), color .15s var(--ease);
}

.ps-stars-pick button svg {
  width: 26px;
  height: 26px;
}

.ps-stars-pick button:hover {
  transform: scale(1.12);
}

.ps-stars-pick button.on {
  color: var(--brass);
}

.ps-stars-pick button.on svg {
  fill: var(--brass);
}

.ps-stars-out {
  margin-left: 10px;
  font: 500 13px/1 var(--font-b);
  color: var(--ink-50);
}

.ps-revform textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--paper);
  font: 400 14.5px/1.6 var(--font-b);
  color: var(--ink);
  resize: vertical;
}

.ps-revform textarea:focus {
  outline: none;
  border-color: var(--brass);
}

.ps-revform-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.ps-revform-foot small {
  font: 400 12px/1.4 var(--font-b);
  color: var(--ink-50);
}

.ps-revsubmit {
  height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--brass-d);
  color: #fff;
  font: 600 14.5px/1 var(--font-b);
  cursor: pointer;
  transition: background .2s var(--ease);
}

.ps-revsubmit:hover {
  background: #7a5319;
}

.ps-formerr,
.ps-formok {
  grid-column: 1 / -1;
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  font: 500 13.5px/1.5 var(--font-b);
}

.ps-formerr {
  background: rgba(180, 67, 47, .08);
  color: var(--madder);
}

.ps-formok {
  background: rgba(47, 125, 82, .09);
  color: #2f7d52;
}

/* ---------- list + load more ---------- */
.ps-rev-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.ps-rev-more.is-hidden {
  display: none;
}

.ps-rev-date {
  display: block;
  margin-top: 10px;
  font: 400 11.5px/1 var(--font-b);
  color: var(--ink-30, var(--ink-50));
}

.ps-loadmore {
  margin-top: 20px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font: 500 13.5px/1 var(--font-b);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.ps-loadmore:hover {
  border-color: var(--brass);
  background: var(--paper-2);
}

.ps-rev-count {
  margin: 10px 0 0;
  font: 400 13.5px/1.6 var(--font-b);
  color: var(--ink-50);
}

.ps-rev-rhs {
  display: block;
}

.ps-rev {
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
}

.ps-rev header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

.ps-rev-av {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--brass-d);
  font: 600 15px/1 var(--font-b);
}

.ps-rev-who b {
  display: block;
  font: 600 14px/1.3 var(--font-b);
  color: var(--ink);
}

.ps-rev-who small {
  font: 400 11.5px/1.3 var(--font-b);
  color: var(--ink-50);
}

.ps-rev-vf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--celadon, #6b8f71) !important;
}

.ps-rev-vf svg {
  width: 12px;
  height: 12px;
}

.ps-rev p {
  margin: 10px 0 0;
  font: 400 14px/1.65 var(--font-b);
  color: var(--ink-70);
}

.ps-rev-empty {
  grid-column: 1 / -1;
  padding: 44px 24px;
  text-align: center;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-2);
  background: var(--paper-2);
}

.ps-rev-empty svg {
  width: 34px;
  height: 34px;
  color: var(--brass);
  margin-bottom: 12px;
}

.ps-rev-empty b {
  display: block;
  font: 500 17px/1.3 var(--font-d);
  color: var(--ink);
  margin-bottom: 6px;
}

.ps-rev-empty p {
  margin: 0 auto;
  max-width: 44ch;
  font: 400 13.5px/1.6 var(--font-b);
  color: var(--ink-50);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .ps-artwork {
    gap: 40px;
  }

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

  .ps-title {
    font-size: 34px;
  }
}

@media (max-width: 860px) {

  .ps-artwork,
  .ps-process,
  .ps-reviews {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .ps-process {
    padding: 32px 24px;
    margin: 40px 0;
  }

  .ps-care-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 16px;
  }

  .ps-block {
    padding: 40px 0;
  }
}

@media (max-width: 560px) {
  .ps-title {
    font-size: 28px;
  }

  .ps-h3 {
    font-size: 19px;
  }

  .ps-steps,
  .ps-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ps-shots-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .ps-artwork-rhs {
    padding: 20px 18px;
  }

  .ps-care-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ps-score {
    font-size: 42px;
  }

  .ps-prose {
    font-size: 15px;
  }
}




.pc-maker {
  margin: -2px 0 10px;
}

.pc-maker a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font: 400 13px/1 var(--font-b);
  color: var(--ink-50);
  text-decoration: none;
  transition: color .18s var(--ease);
}

.pc-maker a:hover {
  color: var(--brass-d);
}

.pc-maker svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: .7;
}

/* Naam lamba ho to card ka layout na toote */
.pc-maker span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Underline sirf naam ke neeche — icon ke neeche nahi, wo ganda lagta hai */
.pc-maker a:hover span:first-of-type {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pc-maker-vf {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--celadon-wash);
  color: var(--celadon);
}

.pc-maker-vf svg {
  width: 9px;
  height: 9px;
  opacity: 1;
}

@media (max-width: 760px) {
  .pc-maker a {
    font-size: 12px;
  }
}