/**
 * TG Iwata Product Specs (Technical Info)
 * Server-rendered: heading, product image, SKU/name/price, Add-to-Cart, links.
 * The spec table (product_info_table custom field) is fetched by code via the
 * JSON API and injected into .tg-specs__table (see script.js).
 * Layout: desktop = heading top-left / table below-left / aside right;
 *         tablet + mobile = heading -> aside -> table (stacked).
 */
/* ---- Layout: table + aside on the Shadows o-layout grid ----
   Markup: .tg-specs__grid = o-layout o-layout--align-top;
     .tg-specs__table = o-layout__item u-width-12 u-width-7--l  (7/12 left)
     .tg-specs__aside = o-layout__item u-width-12 u-width-5--l o-layout__last--l
   Source order is aside-first, so o-layout__last--l flips it to the right at
   ≥60em. Custom column gutter (6rem) via --default-spacing-unit; 2rem row gap
   when the two stack below 60em. */
.tg-specs__grid { --default-spacing-unit: 6rem; }
.tg-specs__grid > .o-layout__item { margin-bottom: 2rem; }
@media (min-width: 60em) {
  .tg-specs__grid > .o-layout__item { margin-bottom: 0; }
}

/* ---- Aside: product image + purchase info ---- */
/* Mobile: image → details → actions, all stacked */
.tg-specs__aside { display: flex; flex-direction: column; gap: 1.25rem; }
.tg-specs__purchase { display: flex; flex-direction: column; gap: 1rem; }
.tg-specs__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
/* Tablet: image left, purchase (details+actions) right */
@media (min-width: 48em) and (max-width: 59.99em) {
  .tg-specs__aside { flex-direction: row; align-items: flex-start; gap: 2rem; }
  .tg-specs__media { flex: 0 0 42%; }
  .tg-specs__purchase { flex: 1; }
}
/* Desktop: image on top; below it details (left) + actions (right) */
@media (min-width: 60em) {
  .tg-specs__purchase {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }
  .tg-specs__details { flex: 2 1 0; }   /* ~66% */
  .tg-specs__actions { flex: 1 1 0; }   /* ~33% */
  /* pull the image/purchase column up on desktop (overlap the section above) */
  .tg-specs__aside { margin-top: -100px; }
}

.tg-specs__sku {
  display: block;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.tg-specs__name { margin: 0 0 0.5rem; font-weight: 700; font-family: var(--secondary-font-family); }
.tg-specs__price { display: inline; margin: 0; font-family: var(--secondary-font-family); font-size: 1.25rem; }

/* ---- MSRP / price labels — matches the hero and sticky bar ---- */
.tg-specs__pricing {
  display: block;
  font-family: var(--secondary-font-family);
}
.tg-specs__msrp {
  display: inline;
  margin-right: 0.45em;
  opacity: 0.6;
  font-weight: 400;
  font-size: 0.95em;
  white-space: nowrap;
}
.tg-specs__msrp-label { text-decoration: none; margin-right: 0.25em; }
.tg-specs__msrp-value { text-decoration: line-through; }
.tg-specs__price-label {
  display: inline;
  margin-right: 0.25em;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Free shipping flag ---- */
.tg-specs__shipping {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.35em;
  margin: 0 0 0.55rem;
  padding: 0.28em 0.65em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--secondary-font-family);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.tg-specs__shipping-icon {
  width: 1.1em;
  height: 1.1em;
  object-fit: contain;
  flex: none;
}
.tg-specs__form { margin-top: 1.1rem; width: 100%; }
.tg-specs__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
/* Full width, matching the hero card buttons */
.tg-specs__atc { width: 100%; }
.tg-specs__links { display: flex; flex-direction: column; gap: 0.45rem; }
.tg-specs__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  text-decoration: underline;
  white-space: nowrap;
}
.tg-specs__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--theme-accent-color, #236491);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
}
.tg-specs__link-icon--faq::before    { content: "?"; }
.tg-specs__link-icon--manual::before { content: "!"; }

/* ---- Spec table (custom field HTML injected) ---- */
.tg-specs__table table { width: 100%; border-collapse: collapse; }
.tg-specs__table tr { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.tg-specs__table tr:last-child { border-bottom: none; }
.tg-specs__table td {
  padding: 0.85rem 0;
  vertical-align: top;
  font-size: 0.9rem;
  line-height: 1.4;
}
.tg-specs__table td:first-child {
  width: 42%;
  padding-right: 1.5rem;
  font-weight: 700;
}
.tg-specs__table td:last-child { color: #6a6a6a; }