/* ============================================
   SUNIDRA – Sub-pages CSS
   ============================================ */

/* ===== COLLECTION PILLS ===== */
.coll-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 16px; border-radius: 100px;
  font-size: 0.82rem; font-weight: 600;
  border: 1.5px solid var(--gray-200);
  color: var(--charcoal);
  background: #fff;
  transition: all 0.2s; white-space: nowrap;
}
.coll-pill:hover {
  background: var(--pink); color: #fff; border-color: var(--pink);
}

/* ===== PRODUCTS PAGE ===== */
.products-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

/* Filters Sidebar */
.filters-sidebar {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.filter-header h3 { font-size: 1rem; font-weight: 700; }
.clear-btn { font-size: 0.8rem; color: var(--red); font-weight: 500; }
.filter-group { margin-bottom: 24px; border-bottom: 1px solid var(--gray-200); padding-bottom: 20px; }
.filter-group:last-of-type { border-bottom: none; }
.filter-group h4 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-600); margin-bottom: 12px; }
.filter-group label { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; cursor: pointer; padding: 4px 0; color: var(--gray-800); }
.filter-group input[type="checkbox"] { accent-color: var(--navy); width: 15px; height: 15px; }

.price-range input[type="range"] { width: 100%; accent-color: var(--navy); margin-bottom: 8px; }
.price-labels { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--gray-600); }

/* Trim the large top gap between the collection pills and the product grid */
.products-page.section-padding { padding-top: 24px; }

/* Toolbar */
.products-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.filter-toggle-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  background: #fff;
}
.results-count { color: var(--gray-600); font-size: 0.9rem; flex: 1; }
.sort-wrap { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--gray-600); }
.sort-wrap select {
  padding: 8px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--gray-800);
  outline: none;
  background: #fff;
}
.sort-wrap select:focus { border-color: var(--navy); }

/* ===== PRODUCT DETAIL ===== */
/* Price block: MRP (struck) + current (red) + % off pill + tax note */
.pd-price-block { margin: 14px 0 22px; padding: 14px 0; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.pd-price-title { font-weight: 700; font-size: 1.05rem; color: var(--charcoal); margin-bottom: 8px; }
.pd-price-wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.price-mrp-label { color: var(--navy); font-size: 0.92rem; font-weight: 700; }
.pd-price-wrap .price-original { color: #9aa0a8; text-decoration: line-through; font-weight: 500; font-size: 1.05rem; }
.pd-price-wrap .price-current { color: #e00040; font-weight: 800; font-size: 1.9rem; letter-spacing: -0.01em; }
/* Quantity + "Find in a Store" on one row — balanced proportions (stepper ~40%, store ~60%) */
.pd-qty-row { display: flex; align-items: stretch; gap: 12px; }
.pd-qty-row .qty-wrap { flex: 2 1 0; width: auto; justify-content: space-between; padding: 0 4px; }
.pd-qty-row .qty-wrap .qty-btn { flex: 0 0 auto; }
.pd-qty-row .qty-wrap #qty-display { flex: 1 1 auto; text-align: center; }
.pd-store-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 1rem;
  color: var(--navy); background: #fff; text-decoration: none;
  border: 1.5px solid var(--navy); border-radius: 12px;
  transition: background .15s, color .15s;
}
.pd-store-btn i { color: var(--pink); transition: color .15s; }
.pd-store-btn:hover { background: var(--navy); color: #fff; }
.pd-store-btn:hover i { color: #fff; }
/* Inline variant: sits beside the quantity stepper, ~60% of the row, matches its height */
.pd-store-btn.pd-store-inline { flex: 3 1 0; width: auto; padding: 0 18px; }
.pd-price-wrap .badge-discount { background: #fff; border: 1px solid #e5e7eb; color: #211a1e; border-radius: 999px; padding: 2px 11px; font-size: 0.8rem; font-weight: 700; }
.pd-price-wrap .price-tax { color: #8a8f98; font-size: 0.82rem; }

.pd-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: start;
}
/* Let grid columns shrink below their content width (prevents mobile overflow). */
.pd-layout > * { min-width: 0; }

.pd-gallery {}
/* Buy box stays in view while the long-form content scrolls beside it (Emma-style). */
.pd-info {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
}
/* Sticky buy bar quantity stepper (base bar styles live in style.css) */
.pd-sticky-bar .sb-qty {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid #d7dae2; border-radius: 10px; padding: 6px 12px; flex-shrink: 0;
}
.pd-sticky-bar .sb-qty button {
  background: none; border: none; font-size: 1.1rem; line-height: 1; color: #1e2d7d;
  cursor: pointer; width: 20px;
}
.pd-sticky-bar .sb-qty span { min-width: 16px; text-align: center; font-weight: 700; color: #0f172a; }
@media (max-width: 600px) {
  .pd-sticky-bar .sb-info { display: none; }
  .pd-sticky-bar .sb-btn { flex: 1; justify-content: center; }
  .pd-sticky-bar .sb-qty { padding: 6px 10px; }
}
/* Description / specs / features flow directly under the image, filling the
   left column so there's no empty band beneath the picture. */
.pd-content { margin-top: 40px; }
.pd-content .content-tabs { margin-top: 0; }
.pd-main-img {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #f8fafc;
}
.pd-img-placeholder {
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.pd-img-placeholder p { font-size: 1.1rem; font-weight: 600; color: var(--navy); }
.pd-badges { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 4px; }

.pd-thumbnails { display: flex; gap: 12px; }
.pd-thumb {
  width: 72px; height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--gray-200);
  cursor: pointer;
  transition: border-color 0.2s;
}
.pd-thumb.active { border-color: var(--navy); }

/* PD Info */
.pd-brand { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 8px; }
.pd-title { font-size: 1.8rem; margin-bottom: 12px; }
.pd-rating-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.pd-review-count { font-size: 0.875rem; color: var(--navy); font-weight: 500; }
.pd-verified { font-size: 0.8rem; color: var(--green); display: flex; align-items: center; gap: 4px; }
.pd-price-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pd-emi { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 24px; }

.pd-option-group { margin-bottom: 20px; }
.pd-option-label { display: flex; align-items: center; gap: 12px; font-size: 1rem; margin-bottom: 10px; }
.pd-option-label strong { font-size: 1.05rem; font-weight: 700; color: #1f2937; }
.size-guide-link { font-size: 0.8rem; color: var(--navy); margin-left: auto; }

.size-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.size-option {
  padding: 12px; border: 2px solid var(--gray-200);
  border-radius: 10px; text-align: center;
  transition: all 0.2s; cursor: pointer;
}
.size-option:hover { border-color: var(--navy); }
.size-option.active { border-color: var(--navy); background: var(--navy); color: #fff; }
.size-option span { display: block; font-weight: 600; font-size: 0.9rem; }
.size-option small { display: block; font-size: 0.75rem; opacity: 0.7; margin-top: 2px; }

.thickness-options { display: flex; gap: 8px; }
.thickness-btn {
  padding: 8px 20px; border: 2px solid var(--gray-200);
  border-radius: 8px; font-weight: 600; font-size: 0.9rem;
  transition: all 0.2s; cursor: pointer;
}
.thickness-btn.active, .thickness-btn:hover { border-color: var(--navy); background: var(--navy); color: #fff; }

/* ===== PILL BUTTONS (Category / Thickness / Size unit) ===== */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* Keep the Size (category) pills on one line, incl. Custom */
#category-row { flex-wrap: nowrap; gap: 6px; }
#category-row .pill-btn { padding: 8px 15px; font-size: 0.88rem; }
.pill-btn {
  padding: 9px 22px;
  border: 1.5px solid var(--gray-200);
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.pill-btn:hover {
  border-color: #f97316;
  color: #f97316;
}
.pill-btn.active {
  background: #f97316;
  border-color: #f97316;
  color: #fff;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
}
.pill-btn.disabled,
.pill-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.pill-btn.disabled:hover,
.pill-btn:disabled:hover {
  border-color: var(--gray-200);
  color: #1f2937;
  background: #fff;
}
.pill-btn.pill-sm {
  padding: 6px 16px;
  font-size: 0.85rem;
}

/* Size unit toggle row spacing */
.size-unit-row { margin-bottom: 12px; }

/* ===== SIZE RADIO PANEL ===== */
.size-radio-panel {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px 16px;
}
.size-radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  color: #1f2937;
  user-select: none;
  white-space: nowrap;   /* keep each dimension on a single line */
}
.size-dim-label { white-space: nowrap; }
.size-radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #9ca3af;
  border-radius: 50%;
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.size-radio-option input[type="radio"]:hover {
  border-color: #f97316;
}
.size-radio-option input[type="radio"]:checked {
  border-color: #f97316;
  border-width: 2px;
}
.size-radio-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f97316;
}
.size-radio-option.checked { font-weight: 600; color: #c2410c; }

/* Currently unavailable dimension — visible but disabled */
.size-radio-option.unavailable {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}
.size-radio-option.unavailable .size-dim-label {
  text-decoration: line-through;
  color: #6b7280;
}
.size-radio-option.unavailable input[type="radio"] {
  cursor: not-allowed;
  border-color: #d1d5db;
  background: #f3f4f6;
}
.size-radio-option.unavailable input[type="radio"]:hover {
  border-color: #d1d5db;
}
.size-unavail-tag {
  display: block;
  font-size: 0.68rem;
  color: #b45309;
  font-weight: 500;
  margin-top: 1px;
  flex-basis: 100%;
}

@media (max-width: 600px) {
  /* Dimension box: single column and compact (hug the options, no big empty box) */
  .size-radio-panel { grid-template-columns: 1fr; padding: 8px 10px; gap: 2px; }
  .size-radio-option { padding: 2px 0; }
  .pill-btn { padding: 8px 18px; font-size: 0.88rem; }
}

.qty-wrap { display: flex; align-items: center; gap: 0; border: 2px solid var(--gray-200); border-radius: 8px; width: fit-content; }
.qty-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--navy); transition: background 0.15s; }
.qty-btn:hover { background: var(--gray-100); }
.qty-wrap span { padding: 0 16px; font-weight: 600; font-size: 1rem; }

.pd-cta { display: flex; gap: 12px; margin-bottom: 24px; }
.btn-xl { padding: 14px 24px !important; font-size: 0.95rem; }
.btn-add-cart.btn-xl { flex: 1; }

.pd-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; padding: 16px; background: var(--gray-50); border-radius: 12px; }
.pd-trust-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pd-trust-item i { font-size: 1.3rem; }
.pd-trust-item span { font-size: 0.75rem; font-weight: 500; color: var(--gray-800); }

.pd-delivery { padding: 16px; background: var(--gray-50); border-radius: 12px; }
.pd-delivery h4 { font-size: 0.9rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.pincode-wrap { display: flex; gap: 8px; }
.pincode-wrap input { flex: 1; padding: 10px 14px; border: 2px solid var(--gray-200); border-radius: 8px; font-size: 0.9rem; outline: none; }
.pincode-wrap input:focus { border-color: var(--navy); }
.pincode-wrap button { padding: 10px 18px; background: var(--navy); color: #fff; border-radius: 8px; font-size: 0.875rem; font-weight: 600; }
.delivery-result { margin-top: 8px; font-size: 0.875rem; }

/* Content Tabs */
.product-tabs-section { padding: 48px 0; }
.content-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--gray-200); margin-bottom: 32px; overflow-x: auto; }
.ctab {
  padding: 12px 24px; font-size: 0.9rem; font-weight: 500; color: var(--gray-600);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  white-space: nowrap; transition: all 0.2s;
}
.ctab.active { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }
.ctab:hover { color: var(--navy); }
.ctab-content { padding: 0; }
.hidden { display: none !important; }

.overview-about { margin-bottom: 28px; }
.overview-about h3 { font-size: 1.1rem; margin-bottom: 12px; }
.overview-about p { font-size: 0.9rem; color: var(--gray-600); line-height: 1.7; }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.overview-grid h3 { font-size: 1.1rem; margin-bottom: 12px; }
.overview-grid > div > p { font-size: 0.9rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 20px; }
.overview-layers h4 { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-600); margin-bottom: 12px; }
.layer-info { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.li-badge { color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.layer-info strong { display: block; font-size: 0.875rem; margin-bottom: 2px; }
.layer-info p { font-size: 0.8rem; color: var(--gray-600); }

#pd-highlights-wrap h4 { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-600); margin-bottom: 16px; }
.highlight-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.highlight-list li { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; }

.specs-table { overflow-x: auto; }
.specs-table table { width: 100%; border-collapse: collapse; }
.specs-table th { background: var(--navy); color: #fff; padding: 12px 16px; text-align: left; font-size: 0.875rem; }
.specs-table td { padding: 12px 16px; border-bottom: 1px solid var(--gray-200); font-size: 0.875rem; }
.specs-table tr:hover td { background: var(--gray-50); }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-item { background: var(--gray-50); padding: 20px; border-radius: 12px; }
.feature-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 12px; }
.feature-item h4 { font-size: 0.9rem; margin-bottom: 6px; }
.feature-item p { font-size: 0.8rem; color: var(--gray-600); line-height: 1.6; }

.reviews-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; }
.reviews-summary { text-align: center; }
.rating-big { font-size: 3rem; font-weight: 700; color: var(--navy); }
.rating-stars-big { color: var(--gold); font-size: 1.3rem; margin: 8px 0; }
.reviews-summary > p { font-size: 0.875rem; color: var(--gray-600); margin-bottom: 16px; }
.rating-bars { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.rating-bar { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.rating-bar > span:first-child { width: 24px; flex-shrink: 0; }
.rating-bar > span:last-child { width: 30px; flex-shrink: 0; color: var(--gray-600); }
.bar { flex: 1; height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.bar > div { height: 100%; border-radius: 4px; }

.reviews-list { display: flex; flex-direction: column; gap: 20px; }
.review-card { background: var(--gray-50); padding: 20px; border-radius: 12px; }
.review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review-header > div:nth-child(2) { flex: 1; }
.review-header strong { display: block; font-size: 0.9rem; }
.review-header span { font-size: 0.78rem; color: var(--gray-600); }
.review-date { font-size: 0.78rem; color: var(--gray-600); }
.review-stars { color: var(--gold); font-size: 0.85rem; margin-bottom: 8px; }
.review-card > p { font-size: 0.875rem; line-height: 1.6; color: var(--gray-800); margin-bottom: 8px; }

/* ===== CART PAGE ===== */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: start;
}

.empty-cart {
  text-align: center;
  padding: 80px 20px;
}
.empty-cart-icon { font-size: 4rem; margin-bottom: 20px; }
.empty-cart h2 { margin-bottom: 12px; }
.empty-cart p { color: var(--gray-600); margin-bottom: 28px; }

.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  align-items: start;
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin-bottom: 16px;
}
.cart-item-img {
  width: 100px; height: 100px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
}
.cart-item-details h4 { font-size: 1rem; margin-bottom: 4px; }
.cart-item-details p { font-size: 0.8rem; color: var(--gray-600); margin-bottom: 12px; }
.cart-item-qty { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--gray-200); border-radius: 8px; width: fit-content; }
.cart-item-price { text-align: right; }
.cart-item-price .price-current { display: block; font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.cart-item-price .price-original { display: block; font-size: 0.8rem; color: var(--gray-600); text-decoration: line-through; }
.cart-remove { display: block; margin-top: 8px; font-size: 0.8rem; color: var(--red); cursor: pointer; text-align: right; }

/* Cart Sidebar */
.coupon-box { background: #fff; padding: 20px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 16px; }
.coupon-box h4 { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: 12px; }
.coupon-wrap { display: flex; gap: 8px; }
.coupon-wrap input { flex: 1; padding: 10px 14px; border: 2px solid var(--gray-200); border-radius: 8px; font-size: 0.875rem; outline: none; text-transform: uppercase; }
.coupon-wrap input:focus { border-color: var(--navy); }
.coupon-wrap button { padding: 10px 16px; background: var(--navy); color: #fff; border-radius: 8px; font-size: 0.875rem; font-weight: 600; }
.coupon-msg { font-size: 0.8rem; margin-top: 8px; }
.suggested-coupons { margin-top: 12px; }
.suggested-coupons > p { font-size: 0.75rem; color: var(--gray-600); margin-bottom: 8px; }
.coupon-chip { display: inline-block; padding: 4px 10px; background: var(--gray-100); border-radius: 4px; font-size: 0.75rem; font-weight: 500; cursor: pointer; margin-right: 6px; transition: background 0.15s; }
.coupon-chip:hover { background: var(--navy); color: #fff; }

.order-summary { background: #fff; padding: 24px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 16px; }
.order-summary h3 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.summary-row.total { border-bottom: none; font-size: 1.1rem; font-weight: 700; color: var(--navy); padding-top: 12px; }
.summary-savings { background: #dcfce7; color: #065f46; font-size: 0.8rem; font-weight: 600; text-align: center; padding: 8px; border-radius: 6px; margin-top: 12px; }
.secure-badge { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.8rem; color: var(--gray-600); margin-top: 12px; }

.trial-banner { background: var(--navy); color: #fff; padding: 16px; border-radius: 12px; display: flex; align-items: flex-start; gap: 12px; }
.trial-banner i { font-size: 1.4rem; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.trial-banner strong { display: block; font-size: 0.9rem; margin-bottom: 4px; }
.trial-banner p { font-size: 0.8rem; color: #94a3b8; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
  .products-layout { grid-template-columns: 1fr; }
  .filters-sidebar { display: none; }
  .filters-sidebar.show { display: block; }
  .filter-toggle-btn { display: flex; }
  .pd-layout { grid-template-columns: 1fr; gap: 20px; }
  /* Mobile order: image → price/size/Enquire → details (dissolve pd-left so its
     children can be reordered alongside the buy box). */
  .pd-left { display: contents; }
  .pd-gallery { position: static; order: 1; min-width: 0; }
  .pd-info { position: static; order: 2; }
  .pd-info .pd-cta { margin-bottom: 0; }
  .pd-content { margin-top: 8px; order: 3; min-width: 0; }
  .pd-trust { grid-template-columns: repeat(2, 1fr); }
  .overview-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 80px 1fr; }
  .cart-item-price { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .size-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-cta { flex-direction: column; }
  .pd-trust { grid-template-columns: repeat(4, 1fr); }
  /* Product detail tabs: all four on ONE line (shrunk to fit, no sideways scroll) */
  .content-tabs { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 2px; overflow-x: visible; }
  .ctab { padding: 8px 4px; font-size: 0.7rem; white-space: nowrap; text-align: center; justify-content: center; }
  /* Features: tighter spacing (items have no card background, so big padding = wasted gap) */
  .features-grid { gap: 10px 16px; align-items: start; }
  .feature-item { padding: 4px 2px; }
  .feature-icon { margin-bottom: 8px; }

  /* "Find a Store Near You" — keep the label on a single line */
  .pd-store-btn.pd-store-inline { font-size: 0.8rem; padding: 0 10px; gap: 6px; white-space: nowrap; line-height: 1.15; }

  /* Price row: MRP, amount and "(Incl of all Taxes)" all on one line */
  .pd-price-wrap { flex-wrap: nowrap; align-items: baseline; gap: 6px; }
  .pd-price-wrap .price-mrp-label { font-size: 0.8rem; white-space: nowrap; }
  .pd-price-wrap .price-current { font-size: 1.5rem; white-space: nowrap; }
  .pd-price-wrap .price-tax { font-size: 0.72rem; white-space: nowrap; }
}

@media (max-width: 480px) {
  .pd-trust { grid-template-columns: repeat(2, 1fr); }
  .size-grid { grid-template-columns: repeat(2, 1fr); }
  /* Let the category/size pill rows wrap instead of overflowing on phones */
  #category-row { flex-wrap: wrap; }
  #category-row .pill-btn { flex: 0 0 auto; }
}