/* Scientech Blocks — assembled by plugin/build.py from redesign/*.css.
   Do not edit this file directly; edit the source and rebuild. */

/* ===========================================================================
   Scientech Mart — shared design tokens
   Palette keyed to the logo blue (sampled #2460CC, range #1854E4–#3084D8).

   Concentric radii
   ----------------
   Nested corners only look right when the inner radius is the outer radius
   minus the gap between them: r_inner = r_outer - padding. The scale below is
   built on a 4px step so the common nestings work out exactly:

     hero (--r-2xl 20) > card (--r-lg 12, inset 8) > media (--r-md 8, inset 4)
     card (--r-lg 12)  > pill/icon (--r-full)

   Use the pair that matches the actual padding rather than picking by eye.
   ========================================================================== */

:root {
  --sm-blue-900: #0b2354;
  --sm-blue-800: #12317a;
  --sm-blue-700: #1a4aad;
  --sm-blue-600: #2460cc; /* core brand blue */
  --sm-blue-500: #1854e4;
  --sm-blue-400: #3084d8;
  --sm-blue-300: #5aa7ea;
  --sm-blue-050: #e8eefb;

  --sm-ink: #16233d;
  --sm-ink-soft: #2a3550;
  --sm-ink-muted: #8a93a6;
  --sm-line: #e4e8f0;

  /* 4px-step radius scale */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 9999px;

  /* Page container. The theme's Elementor sections resolve to a 1520px content
     box with a 15px gutter, so the redesigned sections use the same figures —
     otherwise their edges (and the rules under section headings) sit at a
     different x than every existing section on the page. */
  --sm-gutter: 0.9375rem;
  --sm-container: calc(1520px + 2 * var(--sm-gutter));

  /* Inset that makes each nesting concentric */
  --pad-card: 8px; /* --r-2xl outer -> --r-lg inner is 8px of padding */
  --pad-media: 4px; /* --r-lg outer -> --r-md inner is 4px of padding */
}

/* ===========================================================================
   Scientech Mart — product page
   Two-column gallery + buy box, then a specifications grid. Palette and the
   concentric radius scale come from tokens.css:
     stage --r-xl (16) > inset 8 > nothing nested
     panel --r-lg (12) > inset 4 > rows --r-md (8)
   ========================================================================== */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 992px) {
  .pdp {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 2.5rem;
  }
}

/* --- gallery ---------------------------------------------------------------- */

.pdp__media {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (max-width: 991px) {
  .pdp__media { position: static; }
}

.pdp__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--sm-line);
}

.pdp__hero {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.5rem;
  transition: opacity 150ms ease;
}

.pdp__stage-actions {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  gap: 0.5rem;
}

.pdp__icon-btn,
.pdp__icon-btn:hover,
.pdp__icon-btn:focus,
.pdp__icon-btn:active {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--sm-line) !important;
  border-radius: var(--r-full) !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--sm-ink) !important;
  box-shadow: 0 2px 8px -3px rgba(4, 20, 55, 0.25) !important;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease !important;
}

.pdp__icon-btn svg { width: 18px; height: 18px; }
.pdp__icon-btn:hover { border-color: var(--sm-blue-600) !important; color: var(--sm-blue-600) !important; }
.pdp__icon-btn.is-on { color: var(--sm-blue-600) !important; border-color: var(--sm-blue-600) !important; }
.pdp__icon-btn.is-on svg { fill: currentColor; }

/* A fixed 4-column grid only ever looks right with exactly 4 images — a 5th
   wrapped onto a second row beside three empty cells, and 3 stretched to fill
   the width. A scrolling rail with a fixed thumb size handles any count, and
   matches the scroll-with-edge-fade pattern used elsewhere on the site. */
.pdp__thumbs {
  position: relative;
}

.pdp__thumbs-track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 2px;
  margin: -2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pdp__thumbs-track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pdp__thumbs-track { scroll-behavior: auto; }
}

.pdp__thumbs-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 2.5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.pdp__thumbs.can-scroll-start .pdp__thumbs-fade--start,
.pdp__thumbs.can-scroll-end .pdp__thumbs-fade--end { opacity: 1; }

.pdp__thumbs-fade--start {
  left: 0;
  background: linear-gradient(to right, #fff 20%, rgba(255, 255, 255, 0));
}

.pdp__thumbs-fade--end {
  right: 0;
  background: linear-gradient(to left, #fff 20%, rgba(255, 255, 255, 0));
}

.pdp__thumb,
.pdp__thumb:hover,
.pdp__thumb:focus,
.pdp__thumb:active {
  display: grid;
  place-items: center;
  flex: none;
  width: 5.25rem;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  padding: 0.25rem !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid var(--sm-line) !important;
  /* concentric with the stage: --r-xl outer, 8px in, --r-md here */
  border-radius: var(--r-md) !important;
  background: #fff !important;
  background-image: none !important;
  cursor: pointer;
  transition: border-color 150ms ease !important;
}

.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumb:hover { border-color: #c9d1e0 !important; }
.pdp__thumb.is-active { border-color: var(--sm-blue-600) !important; }

/* --- buy box ---------------------------------------------------------------- */

/* --- one vertical scale for the whole buy column -----------------------------
   Every block previously carried its own margin, which produced nine different
   steps (6, 10, 16, 14, 20, 24, 20, 32, 32) down a single column. The scale
   below is the only source of vertical spacing here:

     tight   6px   a label bound to the thing beneath it
     step   12px   lines within one group
     group  24px   between groups
     section 32px  between major sections
*/

.pdp__buy {
  --pdp-tight: 0.375rem;
  --pdp-step: 0.75rem;
  --pdp-group: 1.5rem;
  --pdp-section: 2rem;

  display: flex;
  flex-direction: column;
}

.pdp__buy > * { margin: 0; }

.pdp__buy > .pdp__title { margin-top: var(--pdp-tight); }

.pdp__buy > .pdp__meta,
.pdp__buy > .pdp__price,
.pdp__buy > .pdp__summary { margin-top: var(--pdp-step); }

.pdp__buy > .pdp__actions,
.pdp__buy > .pdp__panel,
.pdp__buy > .pdp__cats { margin-top: var(--pdp-group); }

.pdp__buy > .pdp__stacked { margin-top: var(--pdp-section); }

.pdp__brand {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sm-blue-600);
}

.pdp__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sm-ink);
}

@media (min-width: 768px) {
  .pdp__title { font-size: 1.875rem; }
}

.pdp__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--sm-ink-muted);
}

.pdp__meta-sep {
  width: 1px;
  height: 0.875rem;
  background: var(--sm-line);
}

.pdp__price {}

.pdp__price-amount {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sm-ink);
}

.pdp__summary {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sm-ink-soft);
}

/* --- actions ---------------------------------------------------------------- */

/* Stepper and button share one control height so they align exactly. */
.pdp__actions {
  --pdp-control-h: 3rem;

  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}

.pdp__qty {
  display: flex;
  align-items: stretch;
  flex: none;
  height: var(--pdp-control-h);
  border: 1px solid var(--sm-line);
  border-radius: var(--r-full);
  background: #fff;
  overflow: hidden;
  transition: border-color 150ms ease;
}

.pdp__qty:focus-within { border-color: var(--sm-blue-600); }

.pdp__qty-btn,
.pdp__qty-btn:hover,
.pdp__qty-btn:focus,
.pdp__qty-btn:active {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--sm-ink) !important;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease !important;
}

.pdp__qty-btn svg { width: 16px; height: 16px; }
.pdp__qty-btn:hover { background: #eef2f9 !important; color: var(--sm-blue-600) !important; }
.pdp__qty-btn:active { background: #e3e9f5 !important; }
.pdp__qty-btn:focus-visible { outline: 2px solid var(--sm-blue-600); outline-offset: -3px; }

/* At the minimum, decrement is a dead end — say so rather than letting it look
   pressable. Set by pdp.js. */
.pdp__qty-btn[disabled],
.pdp__qty-btn[disabled]:hover {
  color: #c2c8d4 !important;
  background: #fff !important;
  cursor: not-allowed;
}

.pdp__qty-input {
  width: 2.5rem;
  height: 100%;
  border: 0 !important;
  padding: 0 !important;
  background: #fff;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sm-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

.pdp__qty-input::-webkit-outer-spin-button,
.pdp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp__qty-input:focus { outline: none; }

.pdp__cart,
.pdp__cart:hover,
.pdp__cart:focus,
.pdp__cart:active {
  flex: 1 1 12rem;
  height: var(--pdp-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.5rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--r-full) !important;
  background: var(--sm-blue-600) !important;
  background-image: none !important;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff !important;
  cursor: pointer;
  transition: background-color 150ms ease, transform 100ms ease !important;
}

.pdp__cart:hover { background: var(--sm-blue-500) !important; }
.pdp__cart:active { transform: translateY(1px); }
.pdp__cart:focus-visible { outline: 2px solid var(--sm-blue-600); outline-offset: 2px; }

/* Confirmation state, held briefly after a click. */
.pdp__cart.is-added,
.pdp__cart.is-added:hover {
  background: #10883f !important;
}

/* --- delivery panel --------------------------------------------------------- */

.pdp__panel {
  padding: var(--pad-media);
  border: 1px solid var(--sm-line);
  border-radius: var(--r-lg);
  background: #fff;
}

.pdp__panel-title {
  margin: 0;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sm-ink);
}

.pdp__list { margin: 0; padding: 0; list-style: none; }

.pdp__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  padding: 0.5rem 0.625rem;
  /* concentric: --r-lg panel, --pad-media inset, --r-md rows */
  border-radius: var(--r-md);
  font-size: 0.8125rem;
}

.pdp__list li:nth-child(odd) { background: #f7f9fc; }
.pdp__list-k { color: var(--sm-ink-muted); }
.pdp__list-v { color: var(--sm-ink-soft); font-weight: 500; text-align: right; }

/* --- categories -------------------------------------------------------------- */

.pdp__cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.pdp__cats-label {
  margin-right: 0.25rem;
  font-size: 0.8125rem;
  color: var(--sm-ink-muted);
}

.pdp__cats a {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--sm-line);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  color: var(--sm-ink-soft) !important;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease;
}

.pdp__cats a:hover {
  border-color: var(--sm-blue-600);
  color: var(--sm-blue-600) !important;
}

/* --- blocks moved into the buy column ---------------------------------------
   pdp.js appends the specs grid and the description tabs here, so they need
   one shared top rhythm rather than whatever margins they arrived with. */

.pdp__stacked {
  margin-bottom: 0 !important;
  width: 100%;
}

/* Strip the theme's own outer spacing so the rhythm above is the only one.

   Tab bar and panel are one card. The theme borders the panel on its left,
   right and bottom only and pushes it 1.25rem clear of the tab bar, so those
   side borders started well below the bar and left an open notch at both top
   corners. One border on the wrapper closes the box; the children carry none. */
.pdp__buy .woocommerce-tabs {
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--sm-line);
  border-radius: var(--r-lg);
  background: #fff;
}

.pdp__buy .woocommerce-tabs .panel {
  /* concentric with the --r-lg wrapper; nothing inside is rounded */
  padding: 1.25rem !important;
  margin-bottom: 0 !important;
  border: 0 !important;
}

.pdp__buy .woocommerce-tabs .panel > * { max-width: 100%; }

/* --- tab bar ----------------------------------------------------------------
   Underline tabs on a filled header: the active one is marked by weight,
   colour and a rule under its own label. The bar carries the same 1.25rem
   inset on every side as the panel below it, so the labels line up with the
   copy — the 0.25rem the underline needs is taken out of the bottom padding
   rather than added to it. */

.woocommerce-tabs .wc-tabs,
.woocommerce-tabs ul.tabs {
  display: flex !important;
  gap: 1.5rem;
  margin: 0 !important;
  padding: 1.25rem 1.25rem 1rem !important;
  border-bottom: 1px solid var(--sm-line);
  border-radius: 0 !important;
  background: #f4f6fa !important;
  list-style: none !important;
}

.woocommerce-tabs .wc-tabs::before,
.woocommerce-tabs .wc-tabs::after,
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after { content: none !important; }

.woocommerce-tabs .wc-tabs li,
.woocommerce-tabs ul.tabs li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

.woocommerce-tabs .wc-tabs li::before,
.woocommerce-tabs .wc-tabs li::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { content: none !important; }

.woocommerce-tabs .wc-tabs li a,
.woocommerce-tabs ul.tabs li a {
  display: block;
  /* Only the underline gap — the bar's own padding does the rest. */
  padding: 0 0 0.25rem !important;
  margin-bottom: 0;
  border-bottom: 2px solid transparent;
  /* Sized like .pdp-specs__title at full width — these are the section
     headings of this column, not a secondary control — but allowed to step
     down with the viewport.

     A flat 1.25rem was written against the mock, where this column is wide.
     Live it sits in the buy column, which is 485px on a 1057px viewport: the
     three labels measured 443px against 443px of usable width, so
     "Additional information" wrapped and the row came apart. clamp() keeps
     the intended 20px from ~1430px up and eases to 15px on narrower screens,
     with no breakpoint to guess at. */
  font-size: clamp(0.9375rem, 1.4vw, 1.25rem) !important;
  white-space: nowrap;
  font-weight: 700;
  color: var(--sm-ink-muted) !important;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}

.woocommerce-tabs .wc-tabs li a:hover,
.woocommerce-tabs ul.tabs li a:hover { color: var(--sm-ink) !important; }

.woocommerce-tabs .wc-tabs li.active a,
.woocommerce-tabs ul.tabs li.active a {
  color: var(--sm-blue-600) !important;
  border-bottom-color: var(--sm-blue-600);
}

.woocommerce-tabs .wc-tabs li a:focus-visible {
  outline: 2px solid var(--sm-blue-600);
  outline-offset: 2px;
}

/* --- panel content ----------------------------------------------------------
   The theme sets `li { display: inline-block }`, which collapsed every bullet
   list into a single run-on line, and colours all body copy #73787D. Both are
   readability problems, not stylistic ones. */

.woocommerce-Tabs-panel {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--sm-ink-soft);
}

.woocommerce-Tabs-panel p { margin: 0 0 0.875rem; color: var(--sm-ink-soft); }
.woocommerce-Tabs-panel p:last-child { margin-bottom: 0; }

.woocommerce-Tabs-panel h1,
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4 {
  margin: 1.75rem 0 0.625rem !important;
  padding: 0 !important;
  background: none !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.3;
  color: var(--sm-ink) !important;
}

.woocommerce-Tabs-panel > *:first-child { margin-top: 0 !important; }

.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.woocommerce-Tabs-panel li {
  /* the actual fix: one item per line */
  display: block !important;
  position: relative;
  margin: 0 0 0.375rem !important;
  /* !important: the theme zeroes list padding, which put the bullet on top of
     the first character. */
  padding-left: 1.125rem !important;
  font-size: 0.9375rem;
  color: var(--sm-ink-soft) !important;
}

.woocommerce-Tabs-panel li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.6875rem;
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--sm-blue-600);
}

/* --- spec table -------------------------------------------------------------- */

/* The table needs a visible outer edge — a bare stack of row rules just stops,
   with nothing closing it off at the bottom. */
.woocommerce-Tabs-panel table {
  width: 100% !important;
  margin: 0 0 1rem;
  border: 1px solid var(--sm-line);
  border-radius: var(--r-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.875rem;
}

/* The theme borders all four sides of every cell. With border-spacing 0 each
   cell's edge lands on its neighbour's, drawing every internal rule twice —
   that is the doubled border. Reset first, then keep only the two edges that
   actually separate rows and columns. */
.woocommerce-Tabs-panel thead th {
  padding: 0.625rem 0.75rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sm-line) !important;
  background: #f4f6fa;
  font-weight: 600;
  text-align: left;
  color: var(--sm-ink) !important;
}

.woocommerce-Tabs-panel tbody td {
  padding: 0.625rem 0.75rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sm-line) !important;
  /* The theme centres cells, which makes a two-column spec table hard to
     scan — both columns read down a ragged centre line. */
  text-align: left !important;
  color: var(--sm-ink-soft) !important;
}

/* First column is the label, second the value. */
.woocommerce-Tabs-panel tbody td:first-child {
  width: 40%;
  color: var(--sm-ink-muted) !important;
}

.woocommerce-Tabs-panel tbody td:last-child { font-weight: 500; }

/* The last row keeps its rule — the table's own border closes the box, and
   dropping this line was what left the table hanging open at the bottom. */
.woocommerce-Tabs-panel tbody tr:last-child td { border-bottom: 0 !important; }

/* Vertical separator between label and value, so the two columns read as a
   table rather than two loose lists. */
.woocommerce-Tabs-panel tbody td:first-child,
.woocommerce-Tabs-panel thead th:first-child {
  border-right: 1px solid var(--sm-line) !important;
}

/* --- review panel ------------------------------------------------------------
   The theme lays the review form and the reviews list side by side in a flex
   row, which squeezed each to ~180px inside the buy column — the heading broke
   onto six lines. Stack them instead, with the "no reviews yet" notice first
   so the state is read before the form asking you to change it. */

#tab-new_tab .product-review-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem;
}

#tab-new_tab .comment-review-content { order: -1; }

#tab-new_tab .product-review-content > *,
#tab-new_tab .content-review,
#tab-new_tab .comment-review-content,
#tab-new_tab #reviews,
#tab-new_tab #comments,
#tab-new_tab #review_form_wrapper,
#tab-new_tab #review_form,
#tab-new_tab #respond,
#tab-new_tab .comment-form {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The form itself is flex too, which collapsed the field rows. */
#tab-new_tab .comment-form { display: block !important; }

#tab-new_tab .comment-reply-title {
  display: block;
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sm-ink);
}

.woocommerce-Tabs-panel .woocommerce-noreviews {
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px dashed var(--sm-line);
  border-radius: var(--r-lg);
  background: #f9fbfd;
  color: var(--sm-ink-muted) !important;
}

.woocommerce-Tabs-panel #review_form_wrapper { margin-top: 0.5rem; }

.woocommerce-Tabs-panel .comment-form input[type="text"],
.woocommerce-Tabs-panel .comment-form input[type="email"],
.woocommerce-Tabs-panel .comment-form textarea {
  width: 100%;
  padding: 0.625rem 0.75rem !important;
  border: 1px solid var(--sm-line) !important;
  border-radius: var(--r-md) !important;
  background: #fff;
  font-size: 0.9375rem;
  color: var(--sm-ink);
  transition: border-color 150ms ease;
}

.woocommerce-Tabs-panel .comment-form input:focus,
.woocommerce-Tabs-panel .comment-form textarea:focus {
  border-color: var(--sm-blue-600) !important;
  outline: none;
}

.woocommerce-Tabs-panel .comment-form label {
  display: block;
  margin-bottom: 0.3125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sm-ink);
}

.woocommerce-Tabs-panel .comment-form p { margin-bottom: 1rem; }

.woocommerce-Tabs-panel .comment-form .submit,
.woocommerce-Tabs-panel .comment-form input[type="submit"] {
  height: 2.75rem;
  padding: 0 1.5rem !important;
  border: 0 !important;
  border-radius: var(--r-full) !important;
  background: var(--sm-blue-600) !important;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff !important;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.woocommerce-Tabs-panel .comment-form .submit:hover,
.woocommerce-Tabs-panel .comment-form input[type="submit"]:hover {
  background: var(--sm-blue-500) !important;
}

/* --- specifications ---------------------------------------------------------- */

.pdp-specs {}

/* In the narrower buy column the 8-across grid no longer fits. */
.pdp__buy .pdp-specs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .pdp__buy .pdp-specs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pdp-specs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pdp-specs__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sm-ink);
}

.pdp-specs__all {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sm-blue-600) !important;
  text-decoration: none;
}

.pdp-specs__all:hover { text-decoration: underline; }

.pdp-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 640px) { .pdp-specs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pdp-specs__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* Grid rows stretch every tile to the tallest in the row, so a two-line value
   left every one-line neighbour hanging from the top edge. Centre the pair in
   whatever height the row resolves to. */
.pdp-spec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.875rem 0.75rem;
  border-radius: var(--r-lg);
  background: #f4f6fa;
  text-align: center;
}

.pdp-spec__k {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  color: var(--sm-ink-muted);
}

.pdp-spec__v {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sm-ink);
}





/* ===========================================================================
   Product page — the delta between the design and the live theme.

   redesign/pdp.css is the design, and it applies to the live page unchanged:
   pdp-bind.js gives the theme's own title, price, short description, cart form
   and categories the class names it was written against. This file is only
   what that binding cannot cover.

   Three kinds of rule live here, and nothing else belongs:

     1. The gallery. The design drew a static hero plus a thumbnail rail; live
        it is a Swiper from the nickx gallery plugin, with zoom and a lightbox
        worth keeping. Its frame is reproduced against the plugin's own classes
        because the design's `.pdp__stage` / `.pdp__thumbs-track` rules set
        `display: grid` and `overflow-x: auto`, either of which breaks a
        Swiper.

     2. Blocks the design has no slot for, kept at the owner's request — the
        compare button and the stock progress bar.

     3. Theme rules that outrank the design on the elements it now shares.
   ========================================================================== */

/* --- 0. the two columns -----------------------------------------------------
   The design lays `.pdp` out as a grid, 1.05fr : 1fr with a 1.5rem gutter. The
   theme lays the same element out as flex with a 40px gap and a 60px left
   margin on the summary, and wins on specificity — so the split came out
   613/560 against the design's ~700/665, and the buy column was over 100px
   narrow.

   Forced here rather than in pdp.css because the losing declaration is the
   theme's, on the theme's own element. */
.product-wrap.pdp {
  display: grid !important;
  gap: 1.5rem !important;
  align-items: start !important;
}

.product-wrap.pdp > .sticky-sidebar,
.product-wrap.pdp > .summary {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Placed explicitly rather than left to auto-flow. With `display: grid` the
   two items came out in the wrong cells — gallery right, buy box left — even
   though the DOM order is gallery-first and neither carries an `order` or a
   `grid-column` of its own. Rather than chase which theme rule reverses them,
   the cells are named: that is deterministic, and it stays correct if the
   theme ever adds a third child.

   MUST stay inside this media query. Unscoped, these two rules pinned the
   summary to column 2 at every width — including the single-column mobile
   layout, where `.pdp` is `grid-template-columns: minmax(0, 1fr)`. The summary
   then created an implicit second track and took all of it, and the gallery,
   still nailed to column 1, computed to *zero width*: measured
   `grid-template-columns: 0px 382px` at a 375px viewport, with the product
   image absent from the page entirely. It only reads as correct on desktop,
   which is where it was written and looked at. */
@media (min-width: 992px) {
  .product-wrap.pdp > .sticky-sidebar { grid-column: 1 !important; grid-row: 1 !important; }
  .product-wrap.pdp > .summary        { grid-column: 2 !important; grid-row: 1 !important; }
}

/* --- the sticky gallery -----------------------------------------------------
   The design pins the gallery with plain CSS `position: sticky`. The theme
   does the same job with a script (theiaStickySidebar), which pins the inner
   wrapper with an inline `position: fixed` — taking it out of flow, which
   collapses its grid cell and leaves the column geometry to fall over.

   The two cannot both drive it. The script's inline styles are overridden back
   to static and the design's sticky is left to do the work: it is what the
   mirror does, it needs no JS, and it cannot disagree with the grid. */
.pdp .theiaStickySidebar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  transform: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Neutralising the inner wrapper above was not enough: theia also writes
   `position: relative` inline on the *column* itself, which beat the design's
   plain `position: sticky` and left the gallery scrolling away with the page —
   measured static at every scroll depth, gone from the viewport by 1800px
   while the summary column still had 2,500px to run.

   An author `!important` outranks a normal inline declaration, so this is what
   takes the column back. It also fixes a second symptom for free: while the
   column was `relative`, the design's `top: 1.5rem` stopped being a sticky
   offset and became a permanent 24px downward shift, which is why the gallery
   started lower than the brand eyebrow beside it. As `sticky`, that same
   `top` is the offset it was always meant to be.

   Verified live: pinned at 24px from the top through the full length of the
   summary, releasing at the end of the grid row. */
@media (min-width: 992px) {
  .pdp .pdp__media {
    position: sticky !important;
    top: 1.5rem !important;
    align-self: start;
  }
}

/* Below the two-column breakpoint the columns stack and there is nothing to
   stick to; theia's inline `position: relative` is harmless there, but the
   design's own `position: static` needs to outrank the rule above. */
@media (max-width: 991px) {
  .pdp .pdp__media { position: static !important; }
}

/* --- vertical rhythm --------------------------------------------------------
   pdp.css zeroes every block's margin and then steps them apart with
   `margin-top` alone. The theme sets a `margin-bottom` on each of these too —
   14px under the title, 20px under the price, 33px under the short
   description, 31px under the cart form — and outranks `.pdp__buy > *`, so
   every step in the column came out roughly double. */
.pdp .summary > * { margin-bottom: 0 !important; }

/* --- 1. gallery -------------------------------------------------------------
   The frame the design draws around the hero: white card, hairline, the same
   outer radius as everything else on the page. Put on the slider's outer box
   rather than on a slide, so it frames the gallery rather than each image. */
.pdp .images {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pdp .nickx-slider-for {
  /* Containing block for .pdp__stage-actions, which the design pins to the
     stage's top-right corner. */
  position: relative;
  border: 1px solid var(--sm-line, #e6e9ef);
  border-radius: var(--r-xl, 16px);
  background: #fff;
  overflow: hidden;
}

/* The plugin sizes slides itself; this only stops a portrait image from
   stretching the frame taller than the square the design draws. */
.pdp .nickx-slider-for .nswiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Thumbnails: the design's rounded tile with a selected ring. Width is left to
   the plugin — it sets an inline width per slide, and overriding it desyncs
   the rail from the slider it drives. */
.pdp .thumbnail-slider .nickx-thumbnail {
  border: 1px solid var(--sm-line, #e6e9ef);
  border-radius: var(--r-md, 10px);
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 150ms ease;
  box-sizing: border-box;
}

.pdp .thumbnail-slider .nickx-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pdp .thumbnail-slider .nickx-thumbnail:hover { border-color: #c9d1e0; }

/* `.is-active` is mirrored off the plugin's own active class by pdp-bind.js,
   so the ring can never disagree with which slide is showing. */
.pdp .thumbnail-slider .nickx-thumbnail.is-active {
  border-color: var(--sm-blue-600, #2460cc);
}

/* The plugin's arrows sit over the hero. The design has none there — the rail
   below is the control — but removing them would take the only way to page a
   long gallery on a touch device, so they are quietened rather than dropped. */
.pdp .nickx-slider-for .main_arrow {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-full, 9999px);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  opacity: 0;
  transition: opacity 150ms ease;
}

.pdp .nickx-slider-for:hover .main_arrow,
.pdp .nickx-slider-for .main_arrow:focus-visible { opacity: 1; }

/* --- 2. the two blocks the design has no slot for ---------------------------
   The wishlist is moved by pdp-bind.js onto the gallery, where the design puts
   it — an icon button in the stage's top-right corner, out of the buy column's
   vertical rhythm entirely. The compare button stays in the summary; see the
   note further down. */
.pdp .pdp__stage-actions {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}

/* The chrome, for whichever of the two is on screen. `display` is deliberately
   NOT set here: the theme hides the compare button on single products, and
   forcing a display value onto it overrode that and put an empty white circle
   next to the heart. Only the wishlist is laid out, below. */
.pdp .pdp__stage-actions .yith-wcwl-add-to-wishlist-button {
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-full, 9999px);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}

.pdp .pdp__stage-actions .yith-wcwl-add-to-wishlist-button {
  display: grid;
  color: var(--sm-ink, #16233d);
}

/* The wishlist's own wrapper arrives at `opacity: 0` and white text — it is
   built to be revealed on card hover in a product grid. On the product page it
   is a permanent control, so it is shown outright. */
.pdp .pdp__stage-actions .yith-add-to-wishlist-button-block {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
  transform: none;
  overflow: visible;
  background: none;
  color: inherit;
}

.pdp__stage-actions .woosc-btn:hover,
.pdp__stage-actions .yith-wcwl-add-to-wishlist-button:hover {
  color: var(--sm-blue-600, #2460cc);
}

/* The stock bar. Hidden by the theme on products that do not manage stock —
   that inline `display:none` is left to win, so this styles it only for the
   products where it genuinely has something to say. */
.pdp__buy > .special-progress { margin-top: var(--pdp-group, 24px); }

.pdp .special-progress .progress {
  height: 6px;
  border-radius: var(--r-full, 9999px);
  background: #eef1f6;
  overflow: hidden;
}

.pdp .special-progress .progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sm-blue-600, #2460cc);
}

.pdp .special-progress .infor-sold {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--sm-ink-muted, #8a93a6);
}

/* --- 3. theme rules that outrank the design ---------------------------------
   Each of these is a value the theme sets on an element the design now shares.
   They are overrides, not new design decisions — the values come from pdp.css.
   ========================================================================== */

/* The theme prints the price in link blue at its own size; the design makes it
   the page's headline figure in ink. The struck-through original on a sale
   keeps the theme's smaller muted treatment, which is why only the amount
   pdp-bind.js tagged is restated here. */
.pdp .summary > .price { color: inherit; }
.pdp .summary > .price del { opacity: 0.6; font-size: 0.9375rem; font-weight: 400; }
.pdp .summary > .price ins { text-decoration: none; }

/* --- the theme's hairlines --------------------------------------------------
   The theme rules the buy column into bands: a 1px underline plus 20px of
   padding beneath the price, the same beneath the cart form, and a pair of
   them around anything that follows. That is a different layout idea from the
   design, which separates blocks by space alone — and stacked with the
   design's own vertical scale it opened ~100px voids above and below the buy
   row. The rules are the theme's, on the theme's own elements, so they are
   cleared here rather than in pdp.css.

   Only the price and the cart form are named. The panel's own 1px border and
   4px padding look like the same thing in a computed-style dump but are
   pdp.css's own frame — zeroing them here would strip the panel's outline. */
.pdp .summary > .price,
.pdp .summary > form.cart,
.pdp .summary > .special-progress {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* WooCommerce floats the cart form's children on some themes and this one
   gives the button a block width; the design lays the row out with flex. */
.pdp form.cart::before,
.pdp form.cart::after { content: none; }

.pdp form.cart .quantity {
  float: none;
  margin: 0;
  flex: none;
}

/* The "Quantity:" label. WooCommerce marks it `.screen-reader-text`, but this
   theme un-hides it — so it printed beside the stepper and took 75px of the
   pill. The design has no such label; the stepper reads as itself.

   `display: none`, not the usual clip-and-offscreen recipe. The theme sets
   `width: 75px` on this label with enough weight that even an inline
   `!important` did not shift it — only removing it from layout does. The
   accessible name is not lost: pdp-bind.js puts an `aria-label` on the number
   field, which is what the label was there to provide. */
.pdp .summary form.cart .quantity > label.screen-reader-text {
  display: none !important;
}

/* --- the stepper: put the buttons back in flow ------------------------------
   THIS is what broke the control, and it is worth stating plainly because
   every obvious fix fails against it.

   The theme lays the stepper out by overlaying: `.qty_button` is
   `position: absolute; top: 0; left: 0; right: -4px` on top of the number
   field. Out-of-flow children contribute nothing to their parent's width, so
   `.inner-quantity` sized itself to the 40px field alone — 42px — and the
   design's `overflow: hidden` pill then clipped the minus and the number out
   of sight, leaving a lone "+".

   Because the cause was `position`, no amount of width did anything. Raising
   specificity, `!important`, and even an inline `width: max-content !important`
   all left it at 42px, because width was never the losing property.

   Returning the buttons to static makes them flex items of the row the design
   expects, and the pill sizes to 44 + 40 + 44 on its own. `height: 100%`
   against the pill's own 3rem is what squares them up; `align-self: stretch`
   does not survive the theme's height. */
/* The pill is given a fixed width rather than sized to its contents.
   Intrinsic sizing cannot be trusted here: with the buttons back in flow the
   theme still computes this box's `max-content` as 90px against 128px of
   actual controls, so `width: max-content` collapses it — and because the
   design's pill has `overflow: hidden`, the collapse ate a button. It showed
   up as the row jumping the moment you hovered a +/- control.

   8.125rem is the design's own arithmetic: 2.75 + 2.5 + 2.75rem of controls
   (8rem) plus the pill's two 1px borders (0.125rem) = 130px.

   This was 8.625rem for several releases, and the comment claimed that was the
   same sum — it is not, it is 0.5rem too wide. The error was invisible while
   the pill laid out inline, because the surplus was spread through the
   whitespace between the buttons. Making the pill a real flex container (see
   below) collected all 8px into one dead strip at the right-hand edge, so the
   "+" hover tint stopped short of the pill's own border. Measured live: 128px
   of controls in a 136px content box, 8px gap after the last child. */
.pdp .summary form.cart .quantity,
.pdp .summary form.cart .inner-quantity {
  flex: 0 0 auto !important;
  width: 8.125rem !important;
  min-width: 8.125rem !important;
  max-width: 8.125rem !important;
  /* The row must never wrap. On hover the "+" dropped onto a second line,
     underneath the minus — so the button moved out from under the cursor as
     you reached for it. That is what read as flickering, and it is why
     clicking did nothing: the pointer was landing where the button had just
     been. The handler was fine all along; a synthetic click always worked.

     nowrap makes the failure impossible rather than merely unlikely — flex
     items in a nowrap row cannot move to a second line whatever the theme
     adds on hover. But see the `display` rule below: for three releases this
     declaration was inert, because the box was never a flex container. */
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* --- the pill must actually be a flex container -----------------------------
   The one that mattered, and the reason three fixes in a row missed.

   The design gives `.pdp__qty` `display: flex`, but the theme carries

     .woo-single-post-class .summary .cart .quantity .inner-quantity
       { display: inline-block }

   at specificity 0,5,0 against the design's 0,1,0. The theme wins, so live the
   pill was a *block* container laying its three inputs out as inline text —
   and every fix aimed at the wrong layout model:

     - `position: static` returned the buttons to flow, but inline flow, not
       flex. The comment above claiming they become flex items was never true
       of the live page.
     - `flex-wrap: nowrap` does nothing on a non-flex container. It measured as
       "applied" because the declaration was present; it could never have an
       effect.
     - pinning the buttons' geometry pinned the buttons, but the overflow was
       never the buttons: inline layout puts a whitespace gap between each
       pair, and those gaps are not any element's box.

   Measured live: 128px of controls (44+40+44) + 8px of inter-element
   whitespace = 136px inside a 136px content box. Exactly zero slack, so the
   row sat permanently one sub-pixel away from wrapping and the hover repaint
   was enough to tip it.

   Flex collapses the whitespace — children land contiguous at 44/40/44 with
   8px to spare — and only then does the nowrap above become real. Verified by
   applying it live before shipping: the wrap could not be reproduced after. */
.pdp .summary form.cart .quantity .inner-quantity,
.pdp .summary form.cart .inner-quantity {
  display: flex !important;
  align-items: stretch !important;
}

.pdp .summary form.cart .inner-quantity > .qty_button,
.pdp .summary form.cart .inner-quantity > input.qty {
  position: static !important;
  height: 100% !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

.pdp .summary form.cart .inner-quantity > .qty_button {
  width: 2.75rem !important;
  line-height: 1 !important;
}

.pdp .summary form.cart .inner-quantity > input.qty {
  width: 2.5rem !important;
}

/* The theme's category line is an inline `Categories: a, b, c` with a label
   span; the design draws the terms as chips. The label keeps its text — it is
   the design's own `.pdp__cats-label` — and the separating commas, which are
   bare text nodes between the links, are the one thing that cannot be selected
   away. They are spaced out of the way by the chip gap rather than removed. */
.pdp .summary > .product-category > .title { margin-right: 0.25rem; }

/* Specs sit at a section step below the categories, the same as when pdp.js
   stacks them in the mirror. */
.pdp__buy > .pdp-specs { margin-top: var(--pdp-section, 32px); }

/* --- steps the theme still wins ---------------------------------------------
   Three values measured against the mirror and restated at a weight that
   clears the theme's own:

     price   margin-top   theme 0   -> design 12 (--pdp-step)
     tabs    margin-top   theme 56  -> design 32 (--pdp-section)
     title   type         theme 22px/600 -> design 24px/700, 1.2 leading
   ========================================================================== */
.pdp .summary > .price { margin-top: var(--pdp-step, 12px) !important; }

.pdp .summary > .woocommerce-tabs { margin-top: var(--pdp-section, 32px) !important; }

.pdp .summary > h1.product_title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* --- gallery icons: only the wishlist travels ---------------------------------
   The compare button was moved onto the stage too, on the reasoning that the
   theme hid it anyway. It hid it with a rule scoped to the summary — so moving
   it out of the summary *un*-hid it, and it landed on the artwork as an empty
   36x40 box beside the heart, because nothing renders a glyph for it there.

   It stays in the summary now, where the theme's own rule keeps it hidden and
   where it will appear in a sensible place if the shop ever turns it on. Only
   the wishlist is a stage control, and it is pinned to an exact 40x40 so it
   cannot inherit a width from whatever wraps it. */
.pdp .pdp__stage-actions .yith-wcwl-add-to-wishlist-button,
.pdp .pdp__stage-actions .yith-add-to-wishlist-button-block {
  width: 2.5rem !important;
  min-width: 2.5rem !important;
  max-width: 2.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  box-sizing: border-box !important;
}

/* The glyph inside it was centred vertically and flush left horizontally, and
   the asymmetry is why it read as "not centred" rather than simply misplaced.

   The button is `display: grid` with `align-items: center` but
   `justify-content: flex-start`. On a single-item grid that centres the row
   track and pins the column track to the left edge — so the 30px SVG sat at
   the button's own x, 5px left of centre in a 40px box, while its y was
   exactly right. Sizing the button (above) could never fix it: the offset is
   in how the track is placed, not how big the box is.

   `place-content` centres the track, `place-items` centres the glyph in it;
   both are needed because either alone leaves one axis pinned. Measured live
   after applying: offset 0,0 on both axes. */
.pdp .pdp__stage-actions .yith-wcwl-add-to-wishlist-button,
.pdp .pdp__stage-actions .yith-add-to-wishlist-button-block > a {
  display: grid !important;
  place-content: center !important;
  place-items: center !important;
}

/* --- the wishlist hover was two treatments fighting --------------------------
   The theme ships a coherent pair of its own:

     .yith-add-to-wishlist-button-block:hover     { background: rgb(51,62,72) }
     .yith-add-to-wishlist-button-block:hover svg { color: #fff }

   — a dark slate disc with a white heart. That reads fine on the stock page.
   Here it does not, because the disc the user sees is not that element: the
   design paints the white circle on the *inner* <a>, which sits on top at
   rgba(255,255,255,.92). So the theme's dark fill was showing only through
   that 8% of translucency and around the anchor's edge — a muddy ring rather
   than a filled button — while the white glyph washed out against it.

   Our own `color: var(--sm-blue-600)` on the anchor could not correct the
   glyph either: YITH sets the SVG's colour directly
   (`var(--add-to-wishlist-icon-color, #000)`), so an inherited colour from the
   anchor never reached it. The rule had been inert since it was written.

   So the theme's pair is neutralised and the treatment is stated on the
   elements that actually paint: the circle is the anchor, and the glyph is
   addressed directly. The values are the counter's, so the two controls on
   this page respond identically. */
.pdp .pdp__stage-actions .yith-add-to-wishlist-button-block:hover {
  background-color: transparent !important;
}

.pdp .pdp__stage-actions a.yith-wcwl-add-to-wishlist-button {
  background-color: #fff !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.pdp .pdp__stage-actions a.yith-wcwl-add-to-wishlist-button:hover {
  background-color: #eef2f9 !important;
}

/* Both selectors, because the theme's white-glyph rule hangs off the block and
   ours off the anchor; either alone leaves one of them winning on its own. */
.pdp .pdp__stage-actions .yith-add-to-wishlist-button-block:hover svg,
.pdp .pdp__stage-actions a.yith-wcwl-add-to-wishlist-button:hover svg {
  color: var(--sm-blue-600, #2460cc) !important;
}

/* --- the counter must not move, in any state --------------------------------
   Two attempts at this failed because each fixed one way the box could change
   size. Rather than chase a third, every property that can affect the button's
   geometry is pinned identically for rest, hover, focus and active. A control
   that cannot change size cannot slide out from under the cursor, which is
   what the flicker is: the pointer leaving the button, the hover state
   dropping, the button returning, repeating.

   Colour is left free — that is the whole visible hover response, and it
   cannot move anything. */
.pdp .summary form.cart .inner-quantity > .qty_button,
.pdp .summary form.cart .inner-quantity > .qty_button:hover,
.pdp .summary form.cart .inner-quantity > .qty_button:focus,
.pdp .summary form.cart .inner-quantity > .qty_button:focus-visible,
.pdp .summary form.cart .inner-quantity > .qty_button:active {
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  max-width: 2.75rem !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  outline-offset: -2px !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  transform: none !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

/* --- gallery column: fill it, and stop it sitting 24px low ------------------

   Two separate defects, both only visible against the live page — neither
   exists in the local mock, because neither the nickx gallery nor the theme's
   theiaStickySidebar script runs there.

   1. The grid gutter was never the problem. .product-wrap.pdp is a grid with
      gap: 24px and that is already correct. The visible gap measured 79px
      because nickx caps its own gallery at

          .images.nickx_product_images_with_video { max-width: 650px }

      while the grid column is 705px — so 55px of dead space sat inside the
      gallery column and read as an oversized gutter. Releasing the cap lets
      the gallery fill its column and the gap becomes the 24px the grid always
      specified, matching the vertical rhythm of the summary beside it.

   The 24px-low symptom that used to be patched here is now handled by taking
   the column back to `position: sticky` outright — see the sticky block
   above. */
.pdp .images.nickx_product_images_with_video {
  max-width: none;
}

/* --- product data tabs: the theme's font-size leaking into the row ----------
   The design sizes the tab *links*; it never sets the <li>, because in the
   mock the list inherits the page font. Live the theme puts 22px on the li,
   so each one boxed to 54px tall around a 20px label and the three labels sat
   on mismatched baselines — the row read as oversized and slightly broken.

   Setting the line-height on both takes the row back to the label's own
   height (measured 54px -> 30px), and baseline alignment keeps the labels on
   one line even if a longer tab name ever does wrap onto two. */
.pdp .woocommerce-tabs ul.tabs,
.pdp .woocommerce-tabs .wc-tabs {
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.pdp .woocommerce-tabs ul.tabs li,
.pdp .woocommerce-tabs .wc-tabs li {
  font-size: inherit !important;
  line-height: 1.25 !important;
}

.pdp .woocommerce-tabs ul.tabs li a,
.pdp .woocommerce-tabs .wc-tabs li a {
  line-height: 1.25 !important;
}