/**
 * 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: block; margin: 0; font-family: var(--secondary-font-family); font-size: 1.25rem; }
.tg-specs__form { margin-top: 1.1rem; }
.tg-specs__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.tg-specs__atc { min-width: 190px; }
.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; }