/* ============================================================
   TD Print Calculator — layout/spacing only.
   The BUTTON aesthetic (border, fill, radius, hover, selected) is left to
   woo-variation-swatches / the theme. We only do structure: full-width rows,
   the two-line footnote (paper price, size inches) and the price block.
   ============================================================ */

/* hide stock price echoes + redundant swatch tooltips.
   The last selector is deliberately (0,3,2)-specific to out-rank the child theme's
   `.woocommerce div.product .woocommerce-variation-price{display:block!important}`
   (0,3,1), which otherwise forces the raw per-in² variation price back on. */
.td-print-calc .summary > .price,
.td-print-calc .entry-summary > .price,
.td-print-calc .woocommerce-variation-price,
.td-print-calc div.product div.woocommerce-variation-price { display: none !important; }
.td-print-calc .wvs-tooltip,
body.wvs-tooltip .wvs-tooltip { display: none !important; }

.td-print-calc .td-hidden { display: none !important; }
.td-print-calc .woo-selected-variation-item-name { display: none !important; }

/* labels + stack the WC variations table rows full-width (structure, not aesthetic) */
.td-print-calc form.cart .variations,
.td-print-calc .td-field,
.td-print-calc .td-custom-size { margin: 0 0 1.4rem; }
.td-print-calc form.cart .variations .label label,
.td-print-calc .td-field label {
  display: block; font-weight: 700; font-size: 1rem; margin: 0 0 .55rem;
}
.td-print-calc table.variations { display: block; width: 100%; border: 0; }
.td-print-calc table.variations tbody,
.td-print-calc table.variations tr { display: block; }
.td-print-calc table.variations td,
.td-print-calc table.variations th { display: block; width: 100%; padding: 0; text-align: left; }
.td-print-calc .reset_variations { display: inline-block; margin: .25rem 0 0; font-size: .8rem; }
/* the attribute label cell renders as a narrow flex column (96px) → "Unidad del tamaño" wrapped.
   Give it the full row width so every label stays on one line. */
.td-print-calc .variations th.label,
.td-print-calc .variations .label { width: 100% !important; max-width: none !important; flex: 0 0 100% !important; }
.td-print-calc .variations th.label label { white-space: nowrap; }

/* ---- Swatch buttons (unit / size / paper / border / foam): one regular system ----
   We OWN layout here (grid, padding, line-height, alignment, font) so every group is spaced
   identically; the swatches plugin still owns the box (border/fill/hover/selected).
   FONT: the site's global "Bell Gothic Std" is a converted TTF whose glyph bbox overshoots its
   ascender → top-heavy leading. The buttons use "BellTD" = Bell with corrected ascent/descent/
   line-gap overrides (@font-face emitted by the plugin via content_url, same-origin). The stack
   falls back to a UI sans wherever Bell can't load. */
.td-print-calc .variable-items-wrapper {
  --td-btn-font: "BellTD", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex !important;     /* natural flow — buttons hug their text and stack to the left, wrapping */
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .5rem;
  width: 100%;
  margin: 0;
  padding: 0;
}
.td-print-calc .variable-items-wrapper li.button-variable-item {
  margin: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;              /* override woo-variation-swatches' fixed 45px height — it
                                          crammed the 2-line buttons and ate our padding */
  display: flex !important; flex-direction: column;
  align-items: flex-start !important;   /* content left-aligned */
  justify-content: flex-start !important; /* label anchored at top → labels align across mixed 1/2-line rows */
  text-align: left !important;
  padding: 13px 16px !important;        /* standardized button padding (Y X) — now actually applies */
  font-family: var(--td-btn-font) !important;
  font-size: 18px !important;           /* label size */
  line-height: 1.2 !important;          /* one regular line-height for ALL groups */
}
.td-print-calc .variable-items-wrapper li.button-variable-item .variable-item-contents {
  display: block !important;   /* plain block: label sits top-left, no internal flex-centering */
  flex: 0 0 auto !important;   /* woo-variation-swatches sets flex-grow:1 → don't stretch/center */
  min-height: 0 !important;    /* and a min-height that, as a block, added dead space above the footnote */
  height: auto !important;
  width: auto !important; margin: 0 !important; padding: 0 !important;
  align-self: flex-start; text-align: left;
}
.td-print-calc .variable-items-wrapper li.button-variable-item .variable-item-span {
  padding: 0 !important; margin: 0 !important;
  font-family: var(--td-btn-font) !important; font-size: 18px !important;
  line-height: 1.2 !important; text-align: left !important;
}
/* the secondary line (paper price / size-in-cm inch note / foam price) — standardized gap, muted */
.td-print-calc .td-paper-price,
.td-print-calc .td-size-foot {
  display: block; margin: 0;            /* footnote sits directly under the label (gap removed per request) */
  font-family: var(--td-btn-font);
  font-size: 12px; font-weight: 400;
  letter-spacing: .02em; text-transform: uppercase; opacity: .6; line-height: 1.2;
  text-align: left;
}

/* custom W×H + URL inputs (sizing only; theme styles the fields) */
.td-print-calc #td_ancho, .td-print-calc #td_alto { max-width: 9rem; }
.td-print-calc #td_url { width: 100%; max-width: 26rem; }

/* configurable field notes (e.g., the border note) */
.td-print-calc .td-note { margin: .45rem 0 0; font-size: .82rem; line-height: 1.45; opacity: .68; max-width: 32rem; }
.td-print-calc .td-note a { text-decoration: underline; }

/* price emphasis ("Esta impresión") — content, not a button */
.td-print-calc #td-price { margin: 1.6rem 0 1.2rem; }
.td-print-calc .td-price-label { display: block; font-size: 1rem; font-weight: 700; }
.td-print-calc .td-price-amount { display: block; font-size: 2.9rem; font-weight: 800; line-height: 1.02; margin: .1rem 0 .15rem; }
.td-print-calc .td-price-sub { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }