/* ==========================================================================
   components.css — product cards, search, badges, ratings, buttons, forms
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  border: 1px solid transparent;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); }

.btn-accent {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}
.btn-accent:hover { background: var(--color-accent-dark); color: #fff; }

.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-surface-sunken);
  color: var(--color-muted);
  cursor: not-allowed;
  border-color: var(--color-border);
}

.btn-block { width: 100%; }

/* ---------- Quantity stepper (replaces "Add to Cart" once an item is in
   the cart — same footprint as the .btn it swaps with, product card and
   product page both use this) ---------- */
.qty-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
  font-weight: 600;
  font-size: 0.92rem;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

.qty-stepper__btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-stepper__btn:active { transform: translateY(1px); }
.qty-stepper__value { min-width: 24px; text-align: center; }

/* ---------- Search bar (header) ---------- */
.search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 560px;
}

.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.search-form:focus-within {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.search-form svg { flex-shrink: 0; color: var(--color-muted); width: 18px; height: 18px; }

.search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.92rem;
  color: var(--color-ink);
}

.search-input::placeholder { color: var(--color-muted); }

.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 50;
  max-height: 70vh;
  overflow-y: auto;
}

.search-suggestions[hidden] { display: none; }

.search-suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.search-suggestion:last-child { border-bottom: none; }

.search-suggestion:hover,
.search-suggestion.is-highlighted {
  background: var(--color-primary-tint);
}

.search-suggestion img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--color-surface-sunken);
}

.search-suggestion__meta { min-width: 0; flex: 1; }

.search-suggestion__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggestion__title mark {
  background: none;
  color: var(--color-clay);
  font-weight: 700;
}

.search-suggestion__sub {
  font-size: 0.76rem;
  color: var(--color-muted);
}

.search-suggestion.is-out-of-stock .search-suggestion__title { color: var(--color-muted); }

.search-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-muted);
  font-size: 0.88rem;
}

.search-see-all {
  display: block;
  text-align: center;
  padding: 10px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--color-primary);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg, #FAF8F3);
}
.search-see-all:hover { text-decoration: underline; }

/* ---------- Category chips ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.chip {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

.chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---------- Filter bar (shared by Home / Category / Search results) ---------- */
.filter-bar {
  margin-bottom: var(--space-5);
}

.filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.filter-select,
.filter-price {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.83rem;
  color: var(--color-ink);
}

.filter-price { width: 80px; }
.filter-select--sort { margin-left: auto; }

.filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.83rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.filter-clear {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: transparent;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}
.filter-clear:hover { border-color: var(--color-primary); color: var(--color-primary); }

.filter-bar__count {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

@media (max-width: 559px) {
  .filter-select--sort { margin-left: 0; width: 100%; }
}

/* ---------- Product grid & card ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.product-grid__sentinel { height: 1px; width: 100%; }

@media (min-width: 560px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}
@media (min-width: 1180px) {
  .product-grid { grid-template-columns: repeat(5, 1fr); }
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ---------- Skeleton loading (card-shaped shimmer, shown while products
   are being fetched — see ProductLoader.renderSkeletonGrid) ---------- */
.product-card--skeleton { pointer-events: none; }
.product-card--skeleton .product-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 10px; }

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}
.skeleton--media { width: 100%; aspect-ratio: 1 / 1; border-radius: 0; }
.skeleton--line { height: 0.8em; }
.skeleton--btn { height: 38px; margin-top: 6px; border-radius: var(--radius-sm); }

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card.is-out-of-stock .product-card__media img {
  opacity: 0.55;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-3);
  gap: 6px;
}

.product-card__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.product-card__category {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.product-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.product-card__rating svg { width: 12px; height: 12px; flex-shrink: 0; fill: #e8a33d; }
.product-card__rating .product-card__rating-count { font-weight: 400; color: var(--color-muted); }

.product-card__title {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.35;
  /* Fixed-height clamp so cards never resize based on title length */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
}

.product-card__price-row {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.price-current {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary-dark);
}

.price-mrp {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-decoration: line-through;
}

.product-card__cta {
  margin-top: 8px;
}

/* Signature element: a hand-tied market price tag, used for the discount
   badge and the out-of-stock badge. The clip-path notch + punched "hole"
   nods to Angan's courtyard-market positioning without being a generic
   ribbon/pill badge. */
.price-tag {
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px 5px 18px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-clay);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  filter: drop-shadow(0 2px 3px rgba(28,43,57,0.18));
}

.price-tag::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-surface);
  transform: translateY(-50%);
}

.price-tag--stock {
  background: var(--color-ink-soft);
}

/* Inline variant — sits next to the price in the price row instead of
   overlaying the product image. Kept for Google Merchant Center / Meta
   catalog compliance: product images with promotional badges/overlays
   (like "% OFF") are not allowed since they read as ad creative rather
   than a clean product photo, and the feed's own `price` value already
   communicates the discount when paired with the strikethrough MRP. */
.price-tag--inline {
  position: static;
  padding: 3px 10px 3px 14px;
  font-size: 0.68rem;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  filter: none;
}

.price-tag--inline::after {
  left: 5px;
  width: 3px;
  height: 3px;
}

/* ---------- Out of stock overlay/state ---------- */
.oos-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-danger);
  background: var(--color-danger-tint);
  padding: 3px 9px;
  border-radius: 999px;
  width: fit-content;
}

/* ---------- Star rating ---------- */
.stars {
  position: relative;
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
}

.stars__track { color: var(--color-border); }

.stars__fill {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  color: var(--color-accent-dark);
  white-space: nowrap;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* Interactive star input (review form) */
.star-input {
  display: inline-flex;
  gap: 4px;
  direction: ltr;
}

.star-input button {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-border);
  transition: color 0.1s ease, transform 0.1s ease;
}

.star-input button.is-filled,
.star-input button:hover,
.star-input button:focus-visible {
  color: var(--color-accent-dark);
}

.star-input button:hover ~ button { color: var(--color-border); }

/* ---------- Product detail layout ---------- */
.product-detail {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-8);
}

@media (min-width: 860px) {
  .product-detail { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

/* Gallery */
.gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  cursor: zoom-in;
}

.gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  overflow-x: auto;
  padding-bottom: 4px;
}

.gallery__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--color-surface-sunken);
}

.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--color-primary); }

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.gallery__nav--prev { left: var(--space-2); }
.gallery__nav--next { right: var(--space-2); }
.gallery__nav:hover { background: #fff; }

.gallery__dots {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.gallery__dot.is-active { background: var(--color-primary); border-color: var(--color-primary); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 38, 57, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.lightbox[hidden] { display: none; }

.lightbox__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
}

.lightbox img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  touch-action: pan-y;
}

.lightbox__caption {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  max-width: 480px;
  text-align: left;
}
.lightbox__caption strong { display: block; margin-top: 2px; font-size: 0.85rem; }
.lightbox__caption p { margin: 4px 0 0; font-size: 0.88rem; color: var(--color-ink-soft); }

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: #fff;
  font-size: 1.8rem;
  padding: var(--space-2);
}

/* Product info column */
.product-info__brand {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-1);
}

.product-info__category {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.product-info__title {
  margin-top: 4px;
  margin-bottom: var(--space-2);
}

.product-info__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  flex-wrap: wrap;
}

.product-info__price .price-current { font-size: 1.6rem; }
.product-info__price .price-mrp { font-size: 1rem; }

.discount-pill {
  background: var(--color-success-tint);
  color: var(--color-success);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 999px;
}

.delivery-partner-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}

.delivery-partner-note strong {
  color: var(--color-ink);
}

/* Small and crisp, never stretched — object-fit keeps the partner's logo
   from looking pixelated or squashed regardless of its original size. */
#delivery-partner-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--color-surface-sunken);
}

.product-info__short {
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}

.product-info__actions {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  flex-wrap: wrap;
}
.product-info__actions[hidden] { display: none; }

.product-info__meta {
  font-size: 0.82rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-tabs {
  margin-top: var(--space-6);
}

.product-tabs__desc {
  color: var(--color-ink-soft);
  max-width: 68ch;
  white-space: pre-line;
}

/* ---------- Reviews (Meesho-style summary + rating bars) ---------- */
.pdp-reviews {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.pdp-reviews h2 {
  font-size: 1.15rem;
  margin-bottom: var(--space-4);
}

.reviews-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.reviews-summary__score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 72px;
}

.reviews-summary__score {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--color-primary-dark);
  line-height: 1;
}

.reviews-summary__note {
  font-size: 0.8rem;
  color: var(--color-muted);
  max-width: 40ch;
  text-align: center;
}

.reviews-summary__bars {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reviews-summary__bar-row {
  display: grid;
  grid-template-columns: 72px 1fr 34px;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.76rem;
  color: var(--color-ink-soft);
}

.reviews-summary__bar-track {
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.reviews-summary__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-success);
}
.reviews-summary__bar-row[data-tier="good"] .reviews-summary__bar-fill { background: var(--color-accent-dark); }
.reviews-summary__bar-row[data-tier="average"] .reviews-summary__bar-fill,
.reviews-summary__bar-row[data-tier="poor"] .reviews-summary__bar-fill { background: var(--color-danger); }

.reviews-summary__bar-count {
  text-align: right;
  color: var(--color-muted);
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.form-field { display: flex; flex-direction: column; gap: 6px; }

.form-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink);
}

.form-field textarea,
.form-field select,
.form-field input[type="file"],
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="password"],
.form-field input[type="search"],
.form-field input[type="url"],
.form-field input[type="date"] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--color-surface);
  font-size: 0.9rem;
  width: 100%;
}

.form-field select { cursor: pointer; }

.form-field textarea { min-height: 90px; resize: vertical; }

.form-error {
  font-size: 0.8rem;
  color: var(--color-danger);
  display: none;
}

.form-error.is-visible { display: block; }

.form-hint {
  font-size: 0.76rem;
  color: var(--color-muted);
}

/* ---- review comment box: textarea + "+" add-image button ---- */
.review-comment-box {
  position: relative;
}

.review-comment-box textarea {
  padding-right: 44px; /* room for the + button so text never runs under it */
}

.review-comment-box__add-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.review-comment-box__add-btn:hover { background: var(--color-surface-sunken); }

.review-image-popover {
  position: absolute;
  top: 42px;
  right: 8px;
  z-index: 5;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: none;
}
.review-image-popover.is-open { display: block; }
.review-image-popover button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.review-image-popover button:hover { background: var(--color-surface-sunken); }

.review-photo-previews {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.review-photo-preview {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.review-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.review-photo-preview__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(20, 38, 57, 0.75);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-list { display: flex; flex-direction: column; gap: var(--space-4); }

.review-item {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-4);
}

.review-item__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.review-item__rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--color-success);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}
.review-item__rating-badge[data-tier="good"] { background: var(--color-accent-dark); }
.review-item__rating-badge[data-tier="poor"] { background: var(--color-danger); }

.review-item__author { font-weight: 600; font-size: 0.88rem; }
.review-item__date { font-size: 0.76rem; color: var(--color-muted); }
.review-item__comment { color: var(--color-ink-soft); font-size: 0.92rem; }

.review-item__images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.review-item__image {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  cursor: zoom-in;
}

.review-view-all-btn {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.85rem;
  padding: var(--space-2) 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.review-view-all-btn:hover { text-decoration: underline; }

.review-load-more-btn {
  align-self: center;
  margin-top: var(--space-2);
}

.review-toast {
  font-size: 0.85rem;
  color: var(--color-success);
  background: var(--color-success-tint);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  display: none;
}
.review-toast.is-visible { display: block; }

/* ---- Reviews drawer ("View All Reviews") — right-side panel on desktop,
   full-width sheet on small screens, same pattern as Meesho's. ---- */
.review-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 38, 57, 0.55);
  display: flex;
  justify-content: flex-end;
}
.review-drawer-overlay[hidden] { display: none; }

.review-drawer {
  width: 100%;
  max-width: 480px;
  height: 100%;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  animation: review-drawer-in 0.2s ease;
}

@keyframes review-drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.review-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.review-drawer__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-primary-dark);
}

.review-drawer__close {
  font-size: 1.4rem;
  line-height: 1;
  padding: 4px 8px;
  color: var(--color-ink-soft);
}

.review-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---------- Right-column sidebar cards (Sold By / Delivery checker) ---------- */
.pdp-sidebar-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.pdp-sidebar-card__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.sold-by-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sold-by-row__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.sold-by-row__name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-ink);
}

.sold-by-row__note {
  font-size: 0.76rem;
  color: var(--color-muted);
}

.delivery-checker__row {
  display: flex;
  gap: var(--space-2);
}

.delivery-checker__row input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 0.9rem;
}

.delivery-checker__result {
  margin-top: var(--space-3);
  font-size: 0.85rem;
  display: none;
}
.delivery-checker__result.is-visible { display: block; }

.delivery-checker__result-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.delivery-checker__icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.delivery-checker__result[data-status="ok"] .delivery-checker__headline { color: var(--color-success); font-weight: 700; }
.delivery-checker__result[data-status="error"] .delivery-checker__headline { color: var(--color-danger); font-weight: 700; }

/* ---------- Stock status pill (below price) + Notify Me ---------- */
.stock-status-row { margin: 0 0 var(--space-3); }

.low-stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-accent-dark);
  background: #FCF1DD;
  padding: 3px 9px;
  border-radius: 999px;
  width: fit-content;
}

.notify-me-block { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 180px; }
/* Without this, the rule above (same specificity as the browser's
   built-in `[hidden]{display:none}`) wins the tie and the block stays
   visible even when JS sets `.hidden = true` — this was why "Notify Me"
   kept showing alongside Add to Cart/Buy Now on in-stock products. */
.notify-me-block[hidden] { display: none; }

.notify-me-form {
  display: none;
  gap: var(--space-2);
}
.notify-me-form.is-open { display: flex; }
.notify-me-form input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 0.9rem;
}

.notify-me-status {
  font-size: 0.8rem;
}
.notify-me-status[data-tone="success"] { color: var(--color-success); }
.notify-me-status[data-tone="error"] { color: var(--color-danger); }

/* Blog post rich text editor (admin.html) — WordPress-classic-style Visual/Code toggle */
.rte-wrap {
  border: 1px solid var(--color-border, #ddd);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  background: #fff;
}
.rte-toolbar, .rte-img-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--color-surface-sunken, #f2eee5);
  border-bottom: 1px solid var(--color-border, #ddd);
}
.rte-img-toolbar { background: #fff8e8; }
.rte-img-toolbar__label { font-size: 0.8rem; font-weight: bold; color: var(--color-ink-soft, #888); margin-right: 4px; }
.rte-img-toolbar__caption { flex: 1; min-width: 120px; padding: 5px 8px; border: 1px solid var(--color-border, #ddd); border-radius: 4px; font-size: 0.85rem; }
.rte-sep { width: 1px; align-self: stretch; background: var(--color-border, #ddd); margin: 0 4px; }
.rte-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--color-ink, #222);
}
.rte-btn:hover { background: #fff; border-color: var(--color-border, #ddd); }
.rte-btn.is-active { background: var(--color-accent, #e8a33d); border-color: var(--color-accent-dark, #c97f1e); color: #fff; }
.rte-btn--danger { color: var(--color-danger, #c0392b); }
.rte-tabs { display: flex; gap: 2px; padding: 6px 10px 0; background: #fafafa; border-bottom: 1px solid var(--color-border, #ddd); }
.rte-tab-btn {
  padding: 8px 16px;
  border: 1px solid var(--color-border, #ddd);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: #eee;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-ink-soft, #666);
  transform: translateY(1px);
}
.rte-tab-btn.active { background: #fff; color: var(--color-ink, #222); font-weight: bold; }
.rte-editor {
  min-height: 320px;
  max-height: 640px;
  overflow-y: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  padding: 16px 18px;
  font-size: 0.98rem;
  line-height: 1.6;
  outline: none;
}
.rte-editor:empty::before { content: attr(data-placeholder); color: #999; }
.rte-editor h1 { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.75rem); margin: 24px 0 10px; }
.rte-editor h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin: 20px 0 8px; }
.rte-editor h3 { font-size: 1.25rem; margin: 16px 0 8px; }
.rte-editor h4 { font-size: 1.05rem; margin: 14px 0 6px; }
.rte-editor h5 { font-size: 0.95rem; margin: 12px 0 6px; font-weight: 600; }
.rte-editor h6 { font-size: 0.85rem; margin: 10px 0 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.rte-editor p { margin: 0 0 12px; }
.rte-editor blockquote { margin: 12px 0; padding: 6px 16px; border-left: 3px solid var(--color-accent, #e8a33d); color: #555; font-style: italic; }
.rte-editor ul, .rte-editor ol { padding-left: 1.4em; margin: 0 0 12px; list-style: disc; }
.rte-editor ol { list-style: decimal; }
.rte-editor a { color: var(--color-accent-dark, #c97f1e); text-decoration: underline; }
.rte-editor img { max-width: 100%; cursor: pointer; border: 2px solid transparent; }
.rte-editor img.rte-img--selected { border-color: var(--color-accent, #e8a33d); }
.rte-editor figure { margin: 12px 0; }
.rte-editor figure figcaption { font-size: 0.8rem; color: #888; text-align: center; margin-top: 4px; }
.rte-editor::after { content: ""; display: table; clear: both; }

/* Text-size classes applied via the toolbar's "Size" dropdown — shared by
   the admin editor (.rte-editor) and the live post body (.prose) so text
   sized while writing renders the same size on the published page. */
.rte-fs-sm { font-size: 0.82em; }
.rte-fs-normal { font-size: 1em; }
.rte-fs-lg { font-size: 1.3em; }
.rte-fs-xl { font-size: 1.75em; }

.rte-select {
  height: 30px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font-size: 0.82rem;
  color: var(--color-ink, #222);
  cursor: pointer;
  max-width: 108px;
}
.rte-select:hover { background: #fff; border-color: var(--color-border, #ddd); }

/* Category / tag pills — used on the live post page and blog cards. */
.taxonomy-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.taxonomy-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.78rem; background: var(--color-surface-sunken, #f2eee5); color: var(--color-ink-soft, #666);
}
.taxonomy-pill--category { background: var(--color-accent, #e8a33d); color: #fff; font-weight: 600; }
.rte-code {
  display: block;
  width: 100%;
  min-height: 320px;
  max-height: 640px;
  box-sizing: border-box;
  border: none;
  padding: 16px 18px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
  outline: none;
}
/* `display: block` above has the same specificity as the browser's built-in
   `[hidden] { display: none }` rule, and author CSS always wins that tie —
   so without this, the Code textarea stayed visible (stacked under the
   Visual pane) even while "hidden" was set on it in Visual mode. This rule
   restores hidden actually hiding it, so only one pane ever shows at once. */
.rte-code[hidden] { display: none; }

/* Image size/align classes — shared by the admin editor (.rte-editor) and
   the public post body (.prose) so what you see while writing matches the
   live page. */
.rte-img--small { width: 25%; }
.rte-img--medium { width: 50%; }
.rte-img--large { width: 75%; }
.rte-img--full { width: 100%; }
.rte-img--left { float: left; margin: 4px 18px 12px 0; }
.rte-img--right { float: right; margin: 4px 0 12px 18px; }
.rte-img--center { display: block; float: none; margin-left: auto; margin-right: auto; }
.rte-img--none { float: none; margin: 4px 0 12px; }

/* Blog post block editor (admin.html) */
.block-item {
  border: 1px solid var(--color-border, #ddd);
  border-radius: var(--radius-sm, 6px);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}
.block-item.dragging { opacity: 0.4; }
.block-item.drag-over { border-color: var(--color-accent, #333); border-style: dashed; }
.block-item__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.block-item__handle {
  cursor: grab;
  font-size: 18px;
  color: var(--color-ink-soft, #888);
  user-select: none;
}
.block-item__type {
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--color-ink-soft, #888);
  flex: 1;
}
.block-item__actions { display: flex; gap: 4px; }
.block-item__actions button {
  padding: 2px 8px;
  font-size: 0.8rem;
}
.block-item textarea, .block-item input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

/* Public blog pages (blog.html, blog-post.html) */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.blog-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.blog-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--color-surface-alt, #f2f2f2);
}
.blog-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.blog-card__title { margin: 0; font-size: 1.05rem; }
.blog-card__excerpt { margin: 0; font-size: 0.9rem; color: var(--color-ink-soft); line-height: 1.5; }
.blog-card__date { font-size: 0.8rem; color: var(--color-ink-soft); }
.blog-empty { color: var(--color-ink-soft); padding: var(--space-5) 0; }

.blog-post__figure { margin: var(--space-5) 0; }
.blog-post__figure img { width: 100%; border-radius: var(--radius-md, 10px); display: block; }
.blog-post__figure figcaption { font-size: 0.85rem; color: var(--color-ink-soft); margin-top: 6px; text-align: center; }
.blog-post__meta { color: var(--color-ink-soft); font-size: 0.9rem; margin-bottom: var(--space-4); }

/* Full-screen order-processing / order-success overlay (checkout.html).
   Fixed + covers the whole viewport on both mobile and desktop — this is
   intentionally NOT a small centered popup. Starts hidden; JS toggles
   [hidden] off and adds .is-visible on the same frame it swaps the src,
   which triggers the fade-in + zoom-in transition below. There is no
   exit/fade-out transition by design — it's hidden instantly once the
   success animation has finished playing. */
.order-status-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.order-status-overlay[hidden] { display: none; }
.order-status-overlay.is-visible { opacity: 1; transform: scale(1); }
.order-status-overlay__gif {
  width: min(260px, 60vw);
  height: auto;
}

/* "Add to Home Screen" banner (js/a2hs.js). Bottom sheet on mobile,
   bottom-left card on wider screens. Slides/fades in via .a2hs-in,
   added one frame after insertion so the transition actually runs. */
#a2hs-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  display: flex;
  justify-content: center;
  padding: var(--space-4);
  pointer-events: none;
}
#a2hs-banner .a2hs-card {
  pointer-events: auto;
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-4) var(--space-3);
  position: relative;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
#a2hs-banner.a2hs-in .a2hs-card { transform: translateY(0); opacity: 1; }
#a2hs-banner .a2hs-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  padding: 4px;
}
#a2hs-banner .a2hs-close:hover { color: var(--color-ink); }
#a2hs-banner .a2hs-body {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-right: var(--space-5);
}
#a2hs-banner .a2hs-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
#a2hs-banner .a2hs-text { display: flex; flex-direction: column; gap: 2px; }
#a2hs-banner .a2hs-title { font-size: 0.95rem; color: var(--color-ink); }
#a2hs-banner .a2hs-sub { font-size: 0.83rem; color: var(--color-ink-soft); }
#a2hs-banner .a2hs-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
#a2hs-banner .a2hs-actions .btn { flex: 1; }

@media (min-width: 640px) {
  #a2hs-banner { justify-content: flex-start; padding: var(--space-5); }
}

/* ---------- Product page: Size / Color variant selector ---------- */
.variant-selector-group { margin-bottom: var(--space-4); }
.variant-selector-group__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-2);
  display: block;
}
.variant-size-row, .variant-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.variant-size-btn {
  padding: 7px 14px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.variant-size-btn:hover:not(:disabled) { border-color: var(--color-primary); }
.variant-size-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.variant-size-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.variant-color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.variant-color-swatch:hover:not(:disabled) { transform: scale(1.08); }
.variant-color-swatch.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.variant-color-swatch:disabled { opacity: 0.3; cursor: not-allowed; }
.variant-color-swatch__label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

/* Compact variant of .rte-editor for Product > Short Description — same
   auto-grows-with-content behavior, just a smaller starting/max height
   since it's meant to stay to a line or two, not a full article. */
.rte-editor--compact { min-height: 90px; max-height: 260px; }
.rte-code--compact { min-height: 90px; max-height: 260px; }

/* ---------- Product page: full-width Description section ---------- */
.product-description-section {
  max-width: 900px;
  margin: 0 0 var(--space-6);
}
.product-description-section__body {
  position: relative;
  max-height: 220px;
  overflow: hidden;
  line-height: 1.7;
  color: var(--color-ink);
}
.product-description-section__body.is-expanded { max-height: none; }
.product-description-section__body:not(.is-expanded)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--color-bg, #fff));
  pointer-events: none;
}
.product-description-section__body p { margin: 0 0 12px; }
.product-description-section__body img { max-width: 100%; }
.product-description-section__toggle {
  margin-top: var(--space-3);
  background: none;
  border: none;
  padding: 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary);
  cursor: pointer;
}
.product-description-section__toggle:hover { text-decoration: underline; }

/* ---------- Global loading overlay (js/loading-overlay.js) ---------- */
#global-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Subtle white veil — the page stays visible/readable underneath,
     this is a "something's happening" cue, not a blocking splash. */
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
#global-loading-overlay.is-visible { opacity: 1; pointer-events: auto; }

.global-loading-spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(232, 163, 61, 0.22); /* var(--color-accent) at low alpha */
  border-top-color: var(--color-accent, #E8A33D);
  /* Infinite, constant-rate loop — see loading-overlay.js: this never
     "completes" on its own, only hide() removing the overlay does. */
  animation: global-loading-spin 0.75s linear infinite;
}
@keyframes global-loading-spin { to { transform: rotate(360deg); } }