/*
 * tech-storefront — Product Detail Page styles (T-103).
 *
 * Enqueued only on is_singular('product'). Depends on tech-tokens (theme.css)
 * for design tokens.
 *
 * Variant policy: Balanced + Regular + Light only. No data-theme, density, or
 * dark-mode selectors. Reads tokens straight from :root.
 */

/* ---------- Wrap + layout ---------- */

.single-product-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  font-family: var(--font-sans);
  color: var(--ink);
}

.pdp-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-top: 1.25rem;
}

@media (max-width: 900px) {
  .pdp-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ---------- Gallery column ---------- */

.pdp-gallery {
  position: relative;
  min-width: 0;
}

.pdp-gallery .woocommerce-product-gallery {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.75rem;
  width: 100%;
  float: none;
  margin: 0;
}

.pdp-gallery .woocommerce-product-gallery__wrapper {
  grid-column: 2;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.pdp-gallery .woocommerce-product-gallery__image img,
.pdp-gallery .woocommerce-product-gallery__wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pdp-gallery .flex-control-thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdp-gallery .flex-control-thumbs li { margin: 0; }
.pdp-gallery .flex-control-thumbs img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.pdp-gallery .flex-control-thumbs img:hover,
.pdp-gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--accent);
}

.pdp-gallery .onsale {
  position: absolute;
  top: 0.75rem;
  left: calc(72px + 1.5rem);
  z-index: 2;
  background: var(--brand);
  color: var(--paper);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .pdp-gallery .woocommerce-product-gallery {
    grid-template-columns: 1fr;
  }
  .pdp-gallery .woocommerce-product-gallery__wrapper {
    grid-column: 1;
  }
  .pdp-gallery .flex-control-thumbs {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    overflow-x: auto;
  }
  .pdp-gallery .onsale { left: 0.75rem; }
}

/* ---------- Info column ---------- */

.pdp-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pdp-brand-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.pdp-brand {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.pdp-rating { color: var(--ink-2); }

.pdp-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.pdp-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.pdp-stock.in-stock {
  background: var(--accent-soft);
  color: var(--accent);
}
.pdp-stock.is-oos {
  background: var(--brand-soft);
  color: var(--brand);
}
.pdp-stock::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.pdp-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
}
.pdp-price-row .price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0; }
.pdp-price-row .price ins { text-decoration: none; color: var(--ink); }
.pdp-price-row .price del {
  font-size: 1rem;
  color: var(--ink-3);
  text-decoration: line-through;
  font-weight: 500;
}
.pdp-price-row .vat {
  font-size: 0.8125rem;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
}

/* Pill row (short attribute callouts) */
.pdp-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pill.outline {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ---------- Buy row (cart / notify + wishlist) ---------- */

.pdp-buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
  margin: 0.5rem 0 0.25rem;
}

.pdp-buy-row form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  flex: 1 1 320px;
  margin: 0;
}

.pdp-buy-row .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  overflow: hidden;
}
.pdp-buy-row .quantity input[type="number"] {
  width: 4ch;
  border: 0;
  text-align: center;
  padding: 0.6rem 0.4rem;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
}
.pdp-buy-row .quantity input[type="number"]:focus { outline: none; }

.pdp-buy-row .single_add_to_cart_button,
.pdp-buy-row .pdp-btn-notify {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--paper);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.pdp-buy-row .single_add_to_cart_button:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* OOS variant: keep the .btn-notify base from home.css but upgrade to primary
 * sizing + brand-soft surface so it carries the same visual weight as the
 * Add-to-cart button it's replacing. */
.pdp-buy-row .pdp-btn-notify {
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px dashed var(--brand);
  font-weight: 700;
}
.pdp-buy-row .pdp-btn-notify:hover {
  background: var(--brand);
  color: var(--paper);
}
.pdp-buy-row .pdp-btn-notify svg.tech-icon { width: 16px; height: 16px; }

/* T-126: PDP wishlist button — direct child of .pdp-info (column flex),
 * so align-self:flex-start prevents stretch to full column width, and the
 * max-width caps the row width on wide viewports. Now sits on its own row
 * below the buy row across simple, variable, grouped and external types.
 *
 * T-125: stable geometry across all states — only color/background/border
 * change on .is-active; padding, height, width, font-weight stay identical
 * so toggling state cannot shift layout. The locked min-width also defeats
 * text-length-driven flex-wrap behaviour (the T-123 build re-flowed because
 * "Add to wishlist" and "In wishlist" have different intrinsic widths). */
.pdp-wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex: 0 0 auto;
  gap: 8px;
  box-sizing: border-box;
  min-width: 200px;
  max-width: 320px;
  height: 48px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pdp-wishlist:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.pdp-wishlist.is-active,
.pdp-wishlist[data-state="in"] {
  background: rgba(236, 110, 77, 0.08);
  border-color: var(--brand);
  color: var(--brand);
  /* font-weight intentionally inherited — geometry MUST stay identical */
}
.pdp-wishlist .tech-icon,
.pdp-wishlist svg.tech-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transition: fill 0.15s ease, color 0.15s ease;
}
.pdp-wishlist.is-active .tech-icon,
.pdp-wishlist.is-active svg.tech-icon,
.pdp-wishlist[data-state="in"] .tech-icon,
.pdp-wishlist[data-state="in"] svg.tech-icon {
  fill: var(--brand);
  color: var(--brand);
}

/* Hidden YITH shortcode wrapper — clipped offscreen instead of display:none
 * so YITH's frontend JS still hydrates the .yith-add-to-wishlist-button-block
 * into a clickable anchor (display:none can skip hydration / event delegation).
 * pointer-events:auto on children lets our JS dispatch click() into the
 * hydrated YITH anchor. */
.yith-wishlist-bridge {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  visibility: visible !important;
  opacity: 0;
}
.yith-wishlist-bridge * { pointer-events: auto; }

@media (max-width: 600px) {
  .pdp-wishlist .pdp-wishlist-label { display: none; }
}

/* ---------- Trust strip (downsized inside the info column) ---------- */

.pdp-trust-strip .feat-strip {
  grid-template-columns: 1fr 1fr;
  margin: 0.5rem 0;
  padding: 0;
  gap: 0.5rem;
}
.pdp-trust-strip .feat-item { padding: 0.6rem 0.7rem; }
.pdp-trust-strip .feat-ico { width: 32px; height: 32px; flex-basis: 32px; }
.pdp-trust-strip .feat-title { font-size: 0.8125rem; }
.pdp-trust-strip .feat-sub { font-size: 0.75rem; }

@media (max-width: 480px) {
  .pdp-trust-strip .feat-strip { grid-template-columns: 1fr; }
}

/* ---------- Key specs list ---------- */

.pdp-key-specs {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.pdp-key-specs li {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.pdp-key-specs li span { color: var(--ink-3); }
.pdp-key-specs li strong { color: var(--ink); font-weight: 600; }

/* ---------- Tabs ---------- */

.pdp-tabs {
  margin-top: 2.5rem;
}

.pdp-tabs .woocommerce-tabs {
  display: block;
}
.pdp-tabs .wc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.pdp-tabs .wc-tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.pdp-tabs .wc-tabs li a {
  display: inline-block;
  padding: 0.85rem 1.1rem;
  color: var(--ink-3);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.pdp-tabs .wc-tabs li a:hover { color: var(--ink); }
.pdp-tabs .wc-tabs li.active a {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

.pdp-tabs .woocommerce-Tabs-panel {
  padding: 1.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.6;
}
.pdp-tabs .woocommerce-Tabs-panel h2 {
  font-size: 1.125rem;
  margin: 0 0 0.6rem;
}
.pdp-tabs .woocommerce-Tabs-panel[hidden] { display: none; }

.pdp-tabs .shop_attributes {
  width: 100%;
  border-collapse: collapse;
}
.pdp-tabs .shop_attributes th,
.pdp-tabs .shop_attributes td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 0.9375rem;
}
.pdp-tabs .shop_attributes th {
  color: var(--ink-3);
  font-weight: 500;
  width: 35%;
}

/* ---------- OOS modal ---------- */

.oos-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.oos-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.oos-modal[hidden] { display: none; }

.oos-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(15, 16, 20, 0.55);
}

.oos-modal-card {
  position: relative;
  width: min(440px, calc(100vw - 2rem));
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.oos-modal-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}
.oos-modal-card .soft { font-size: 0.875rem; margin: 0; }

.oos-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.oos-modal-close:hover { border-color: var(--brand); color: var(--brand); }

.oos-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.oos-form .input {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9375rem;
}
.oos-form .input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.oos-form .btn.primary {
  padding: 0.7rem 1rem;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--paper);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.oos-form .btn.primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* ==================================================================
 * PDP gallery — explicit grid placement (T-114 corrects T-113's
 * auto-flow problem where `.flex-viewport` landed in column 1).
 * Force-visible override (.woocommerce-product-gallery opacity:1)
 * still applies — Woo's single-product.min.js fades from opacity:0.
 * ================================================================== */

.pdp-gallery .woocommerce-product-gallery {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto;
  gap: 16px;
  align-items: start;
  position: relative;
}

/* Magnifier-icon trigger floats over the main image */
.pdp-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Main viewport lives in column 2 */
.pdp-gallery .flex-viewport,
.pdp-gallery .woocommerce-product-gallery--with-images .flex-viewport {
  grid-column: 2;
  grid-row: 1;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Thumbnails live in column 1 */
.pdp-gallery .flex-control-thumbs,
.pdp-gallery .flex-control-nav {
  grid-column: 1;
  grid-row: 1;
  width: 80px !important;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.pdp-gallery .flex-control-thumbs li {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
}

.pdp-gallery .flex-control-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
}

/* The product gallery image container inside flex-viewport */
.pdp-gallery .woocommerce-product-gallery__image,
.pdp-gallery .woocommerce-product-gallery__image a {
  display: block;
  width: 100%;
  height: 100%;
}

.pdp-gallery .flex-viewport img,
.pdp-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Override Woo's default --columns-N width on main slide */
.pdp-gallery .woocommerce-product-gallery--columns-3 .woocommerce-product-gallery__image,
.pdp-gallery .woocommerce-product-gallery--columns-4 .woocommerce-product-gallery__image,
.pdp-gallery .woocommerce-product-gallery--columns-5 .woocommerce-product-gallery__image {
  width: 100% !important;
  float: none !important;
}

/* Force visible regardless of single-product.min.js state */
.pdp-gallery .woocommerce-product-gallery,
.pdp-gallery .woocommerce-product-gallery--with-images {
  opacity: 1 !important;
}

/* Mobile — thumbs go below */
@media (max-width: 900px) {
  .pdp-gallery .woocommerce-product-gallery {
    grid-template-columns: 1fr;
  }
  .pdp-gallery .flex-viewport { grid-column: 1; grid-row: 1; }
  .pdp-gallery .flex-control-thumbs,
  .pdp-gallery .flex-control-nav {
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .pdp-gallery .flex-control-thumbs li {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
  }
}

/* ==================================================================
 * T-115: defeat flexslider's stale inline wrapper width.
 * Flexslider initializes once on page load and computes
 * wrapper = slide_count × initial_viewport_width. If our CSS later
 * resizes the viewport, flexslider doesn't re-measure, so the wrapper
 * stays at the old calculated width and slides overflow. Force everything
 * back to viewport-width and stack slides as display:none vs display:block
 * toggled by the .flex-active-slide class (which flexslider still maintains
 * on thumbnail clicks).
 * ================================================================== */

.pdp-gallery .woocommerce-product-gallery__wrapper {
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.pdp-gallery .woocommerce-product-gallery__image {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: none !important;
  position: absolute !important;
  top: 0;
  left: 0;
}

/* First slide visible by default (covers the moment before flexslider applies its class) */
.pdp-gallery .woocommerce-product-gallery__image:first-child {
  display: block !important;
  position: relative !important;
}

/* Once flexslider sets .flex-active-slide, that wins */
.pdp-gallery .woocommerce-product-gallery__image.flex-active-slide {
  display: block !important;
  position: relative !important;
}

/* When a non-first slide becomes active, hide the first */
.pdp-gallery .woocommerce-product-gallery__wrapper:has(.woocommerce-product-gallery__image.flex-active-slide:not(:first-child)) .woocommerce-product-gallery__image:first-child:not(.flex-active-slide) {
  display: none !important;
  position: absolute !important;
}

/* Image inside the active slide: contain at full viewport size, no overflow */
.pdp-gallery .flex-viewport .woocommerce-product-gallery__image img,
.pdp-gallery .flex-viewport .woocommerce-product-gallery__image a img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* The slide's anchor wrapper must also be 100% */
.pdp-gallery .woocommerce-product-gallery__image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.woocommerce .pdp-buy-row .single_add_to_cart_button,
.woocommerce .pdp-info .single_add_to_cart_button,
.pdp-buy-row button.single_add_to_cart_button.button.alt,
.pdp-info button.single_add_to_cart_button.button.alt {
  background: var(--brand);
  background-color: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.woocommerce .pdp-buy-row .single_add_to_cart_button:hover,
.pdp-buy-row button.single_add_to_cart_button.button.alt:hover {
  background: var(--brand-2, #d65a3f);
  background-color: var(--brand-2, #d65a3f);
  border-color: var(--brand-2, #d65a3f);
}

/* ---------- T-121: Variable product variations form ---------- */

.pdp-info .variations_form,
.pdp-info form.cart {
  margin: 16px 0;
}

.pdp-info table.variations {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px 0;
  background: transparent;
}

.pdp-info table.variations tbody {
  display: grid;
  gap: 12px;
}

.pdp-info table.variations tr {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: center;
}

.pdp-info table.variations td {
  padding: 0;
  border: 0;
  background: transparent;
}

.pdp-info table.variations td.label {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}

.pdp-info table.variations td.label label {
  margin: 0;
  font-weight: 600;
}

.pdp-info table.variations td.value select,
.pdp-info .variations select {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 36px 0 14px;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1014' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pdp-info table.variations td.value select:focus,
.pdp-info .variations select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(236, 110, 77, 0.18);
}

.pdp-info table.variations td.value select:hover,
.pdp-info .variations select:hover {
  border-color: var(--ink-3);
}

.pdp-info .variations_form .reset_variations,
.pdp-info a.reset_variations {
  display: inline-block;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.pdp-info a.reset_variations:hover {
  color: var(--brand);
}

.pdp-info .single_variation_wrap {
  margin-top: 16px;
}

.pdp-info .single_variation {
  margin-bottom: 12px;
}

.pdp-info .single_variation .price,
.pdp-info .woocommerce-variation-price {
  font-size: 22px;
  font-weight: 700;
}

.pdp-info .woocommerce-variation-availability {
  font-size: 13px;
  color: var(--ink-2);
  margin: 6px 0;
}

.pdp-info .single_add_to_cart_button.disabled,
.pdp-info .single_add_to_cart_button:disabled,
.pdp-info .single_add_to_cart_button.wc-variation-selection-needed {
  background: var(--brand) !important;
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  opacity: 0.55;
  cursor: not-allowed;
}

.pdp-info .single_add_to_cart_button.disabled:hover,
.pdp-info .single_add_to_cart_button:disabled:hover {
  background: var(--brand) !important;
}

/* ==================================================================
 * T-128: compact PDP info column. Previous build accumulated ~40px
 * between sections: 16px .pdp-info gap + 16px form.cart vertical
 * margin (line 810) + 8-12px .pdp-buy-row outer margin. Collapse
 * everything to a single 12px gap on .pdp-info and neutralise child
 * margins that were doubling it up.
 * ================================================================== */

.pdp-info {
  gap: 12px;
}

.pdp-info .pdp-brand-line { margin: 0; }
.pdp-info .pdp-title      { margin: 4px 0 8px 0; }
.pdp-info .pdp-stock      { margin: 4px 0; }
.pdp-info .pdp-price-row  { margin: 4px 0 8px 0; }

.pdp-info > .pdp-pill-row,
.pdp-info > .pill,
.pdp-info > .pill.outline {
  margin: 0 0 4px 0;
}

/* Form / buy-row wrappers — kill the 16px vertical margin from T-121
 * so spacing comes solely from .pdp-info { gap }. */
.pdp-info .variations_form,
.pdp-info form.cart,
.pdp-info .pdp-buy-row {
  margin: 0;
}

.pdp-info table.variations          { margin: 0 0 8px 0; }
.pdp-info table.variations tbody    { gap: 8px; }
.pdp-info .single_variation_wrap    { margin-top: 8px; }
.pdp-info .single_variation         { margin-bottom: 6px; }
.pdp-info .woocommerce-variation-availability { margin: 4px 0; }

.pdp-info form.cart .quantity,
.pdp-info form.cart .qty,
.pdp-info form.cart .single_add_to_cart_button {
  margin: 0;
}

.pdp-info .pdp-wishlist     { margin: 0; }
.pdp-info .pdp-trust-strip  { margin: 8px 0 0 0; }
.pdp-info .pdp-key-specs    { margin: 8px 0 0 0; }
.pdp-info .pdp-trust-strip .feat-strip { margin: 0; }

/* T-129: tech-merch's mobile-ux.js injects `.tm-mobile-buybar` (a sticky mobile
 * add-to-cart bar) by cloning `.product .price`. The new theme exposes price
 * inside `.pdp-price`, so the clone is empty and renders the literal string
 * "undefined" alongside its CTA. Our PDP already has its own buy row in
 * `.pdp-info`, so suppress tech-merch's bar here. Also reverse the
 * `body.single-product { padding-bottom: 72px }` reserved space, since the bar
 * is no longer present. */
body.single-product .tm-mobile-buybar,
body.single-product .tm-mobile-buybar .tm-bb-price,
body.single-product .tm-mobile-buybar .tm-bb-cta {
  display: none !important;
}
@media (max-width: 768px) {
  body.single-product { padding-bottom: 0 !important; }
}

/* ==================================================================
 * T-132: variations form mobile layout. T-121 set
 * `grid-template-columns: 100px 1fr` which cramps "Color" label + select
 * on narrow viewports. Stack to single column on <=600px, and reflow the
 * qty + add-to-cart row so it doesn't overflow.
 * ================================================================== */
@media (max-width: 600px) {
  .pdp-info table.variations tbody {
    display: grid;
    gap: 8px;
  }

  .pdp-info table.variations tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: stretch;
  }

  .pdp-info table.variations td.label,
  .pdp-info table.variations td.label label {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    text-align: left;
  }

  .pdp-info table.variations td.value {
    width: 100%;
  }

  .pdp-info table.variations td.value select,
  .pdp-info .variations select {
    width: 100%;
    height: 44px;
  }

  .pdp-info .variations_form .reset_variations {
    margin-top: 12px;
    display: block;
  }

  .pdp-info .single_variation_wrap {
    width: 100%;
    margin-top: 8px;
  }

  .pdp-info form.cart .quantity {
    margin: 0;
  }

  .pdp-info form.cart .single_add_to_cart_button {
    width: 100%;
    height: 48px;
    font-size: 15px;
  }

  .pdp-info form.cart > div:has(.qty),
  .pdp-info form.cart > .pdp-buy-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pdp-info form.cart .qty,
  .pdp-info form.cart input.qty {
    flex: 0 0 80px;
  }

  .pdp-info form.cart .single_add_to_cart_button {
    flex: 1;
  }
}