/* ==========================================================================
   GVB-SPES — WooCommerce styles (archives, single product, shared widgets)
   Skins Woo's native markup — no template overrides to maintain.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BREADCRUMBS (single product pill). The shop / category archive band was
   replaced by the secondary hero (v3, .gvb-hero-sec in main.css); the retired
   .gvb-page-hero--shop / __desc / __crumbs rules were removed with it.
   -------------------------------------------------------------------------- */
.gvb-crumbs a { color: var(--teal); }
.gvb-crumbs a:hover { color: var(--teal-d); }

.gvb-shop { padding-top: 32px; padding-bottom: 56px; }

/* --------------------------------------------------------------------------
   RESULT COUNT + ORDERING ROW
   -------------------------------------------------------------------------- */
.woocommerce-result-count {
  float: left;
  font-size: .8rem;
  color: var(--text-m);
  margin: 6px 0 18px;
}
.woocommerce-ordering { float: right; margin: 0 0 18px; }
.woocommerce-ordering select {
  border: 1px solid var(--border-d);
  border-radius: var(--r-s);
  background: var(--white);
  padding: 7px 30px 7px 12px;
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23475569' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* --------------------------------------------------------------------------
   PRODUCT GRID
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  clear: both;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
  width: auto;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--ease), transform var(--ease);
  display: flex;
  flex-direction: column;
  position: relative;
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product-category:hover {
  box-shadow: var(--sh-m);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product > a,
.woocommerce ul.products li.product-category > a {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
}
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product-category img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  background: var(--teal-ul);
  transition: transform .38s ease;
}
.woocommerce ul.products li.product:hover img,
.woocommerce ul.products li.product-category:hover img { transform: scale(1.04); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  padding: 13px 15px 4px;
  margin: 0;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title { color: var(--teal); }
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark {
  display: block;
  background: none;
  color: var(--text-m);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  margin-top: 2px;
}
.woocommerce ul.products li.product .price {
  color: var(--teal-d);
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 700;
  padding: 0 15px 14px;
  margin: 0;
  margin-top: auto;
}
.woocommerce ul.products li.product .price del { color: var(--text-m); font-weight: 400; opacity: .7; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button { display: none; } /* catalog browsing: card click leads to product */

/* Sale badge */
.woocommerce span.onsale {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  min-height: 0; min-width: 0;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  margin: 0;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination { text-align: center; margin-top: 30px; }
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 6px;
  border: none;
  margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: var(--white);
  color: var(--text-b);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--teal-ul); color: var(--teal); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--teal); border-color: var(--teal); color: #fff; }

/* --------------------------------------------------------------------------
   CATEGORY TREE (sidebar)
   -------------------------------------------------------------------------- */
.gvb-cat-tree { list-style: none; margin: 0; padding: 0; }
.gvb-cat-tree__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-radius: var(--r-s);
  transition: background var(--ease);
  margin: 1px 0;
}
.gvb-cat-tree__row:hover { background: var(--teal-ul); }
.gvb-cat-tree__row a {
  flex: 1;
  padding: 7px 10px;
  font-size: .84rem;
  color: var(--text-b);
}
.gvb-cat-tree__row a:hover { color: var(--teal); }

/* top-level parents styled as section labels */
.gvb-cat-tree--depth-0 > li > .gvb-cat-tree__row > a {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-b);
}
.gvb-cat-tree__toggle {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border: none; background: none; cursor: pointer;
  position: relative;
}
.gvb-cat-tree__toggle::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-m);
  border-bottom: 2px solid var(--text-m);
  transform: translate(-50%, -65%) rotate(45deg);
  transition: transform var(--ease), border-color var(--ease);
}
.gvb-cat-tree__toggle:hover::after { border-color: var(--teal); }
li.is-open > .gvb-cat-tree__row .gvb-cat-tree__toggle::after {
  transform: translate(-50%, -35%) rotate(-135deg);
}

.gvb-cat-tree .gvb-cat-tree { display: none; padding-left: 14px; }
li.is-open > .gvb-cat-tree { display: block; }
.gvb-cat-tree--depth-2 a { font-size: .78rem; }

li.is-current > .gvb-cat-tree__row { background: var(--teal-l); }
li.is-current > .gvb-cat-tree__row > a { color: var(--teal-dd); font-weight: 700; }

/* Search widget in sidebar: pill styles come from main.css (.gvb-livesearch);
   only the slightly taller field is shop-specific. */
.gvb-widget--search .gvb-livesearch { height: 38px; }

/* --------------------------------------------------------------------------
   SINGLE PRODUCT
   -------------------------------------------------------------------------- */
.single-product div.product { position: relative; }

.woocommerce div.product div.images { margin-bottom: 0; }
.woocommerce div.product div.images img {
  border-radius: var(--r-l);
  border: 1px solid var(--border);
}
.woocommerce div.product div.images .flex-control-thumbs { margin-top: 10px; gap: 8px; display: flex; }
.woocommerce div.product div.images .flex-control-thumbs li {
  width: 72px;
  border-radius: var(--r-s);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
}

.woocommerce div.product .product_title {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 10px;
}
.woocommerce div.product .summary .price {
  color: var(--teal-d);
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 14px;
}
.woocommerce div.product .summary .price del { color: var(--text-m); font-weight: 400; }
.woocommerce div.product .summary .price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-b);
  font-size: .92rem;
  line-height: 1.7;
}
.woocommerce div.product .product_meta {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 18px;
  font-size: .8rem;
  color: var(--text-m);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }
.woocommerce div.product .product_meta a { color: var(--teal); }

/* Quantity + add to cart */
.woocommerce div.product form.cart { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce .quantity .qty {
  height: 44px;
  width: 70px;
  border: 1px solid var(--border-d);
  border-radius: var(--r-s);
  text-align: center;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--text);
}
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 14px 30px;
  transition: background var(--ease), box-shadow var(--ease);
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background: var(--teal-d);
  color: #fff;
  box-shadow: var(--sh-h);
}
.woocommerce div.product form.cart .button:disabled { opacity: .55; }

/* Variations table */
.woocommerce div.product form.cart .variations { margin-bottom: 12px; }
.woocommerce div.product form.cart .variations td { padding: 4px 0; vertical-align: middle; }
.woocommerce div.product form.cart .variations label { font-weight: 700; font-size: .85rem; color: var(--text); }
.woocommerce div.product form.cart .variations select {
  border: 1px solid var(--border-d);
  border-radius: var(--r-s);
  padding: 8px 30px 8px 12px;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--text);
  max-width: 100%;
  appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23475569' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.woocommerce div.product form.cart .reset_variations { font-size: .75rem; color: var(--text-m); }
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-price { margin-bottom: 12px; }

/* Stock / availability */
.woocommerce div.product p.stock { font-size: .85rem; font-weight: 600; }
.woocommerce div.product p.stock.in-stock { color: var(--teal-d); }
.woocommerce div.product p.stock.out-of-stock { color: #b23b3b; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs { margin-top: 44px; clear: both; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0 0 24px;
  border-bottom: 2px solid var(--border);
  background: none;
  overflow: visible;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 22px;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-m);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--ease), border-color var(--ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}
.woocommerce div.product .woocommerce-Tabs-panel { padding: 4px 0 0; }
.woocommerce div.product .woocommerce-Tabs-panel h2:first-of-type { display: none; }
.woocommerce div.product .woocommerce-Tabs-panel p { font-size: .92rem; color: var(--text-b); line-height: 1.75; }
.woocommerce table.shop_attributes {
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  overflow: hidden;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  font-size: .85rem;
  font-style: normal;
  background: none;
}
.woocommerce table.shop_attributes th { background: var(--teal-ul); color: var(--text); width: 200px; }

/* Related products */
.woocommerce .related.products {
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
  clear: both;
}
.woocommerce .related.products > h2 {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 24px;
}

/* Compact, uncropped related cards on product pages (item 7). Scoped to the
   single-product related loop; shop / category archives are unaffected. The
   server also serves an uncropped image size here (single_product_archive_thumbnail_size). */
.single-product .related.products ul.products {
  max-width: 1080px;
  margin-inline: auto;
  gap: 16px;
}
.single-product .related.products ul.products li.product img {
  aspect-ratio: auto;
  height: 120px;
  object-fit: contain;
  background: var(--white);
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.single-product .related.products ul.products li.product:hover img { transform: none; }
.single-product .related.products ul.products li.product .woocommerce-loop-product__title {
  font-size: .8rem;
  padding: 10px 12px 4px;
}
.single-product .related.products ul.products li.product .price { font-size: .82rem; padding: 0 12px 12px; }
@media (max-width: 600px) {
  .single-product .related.products ul.products li.product img { height: 100px; }
}

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: none;
  border-left: 4px solid var(--teal);
  background: var(--white);
  border-radius: var(--r-s);
  box-shadow: var(--sh-xs);
  color: var(--text-b);
  font-size: .88rem;
  /* Flexbox layout: the ::before icon and the message become sibling flex
     items, so the icon can NEVER overlap the text (independent of any padding
     reset elsewhere in the cascade). */
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: .6em;
  padding: 1em 1.4em !important;
  position: relative;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
  position: static !important;
  flex: 0 0 auto;
  margin: 0 !important;
  line-height: 1.5;
}
.woocommerce-message > li, .woocommerce-info > li, .woocommerce-error > li {
  flex: 1 1 60%;
  min-width: 60%;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
/* action button inside a notice keeps its natural size, pushed to the right */
.woocommerce-message > .button, .woocommerce-info > .button, .woocommerce-error > .button,
.woocommerce-message > .wc-forward, .woocommerce-info > .wc-forward, .woocommerce-error > .wc-forward {
  flex: 0 0 auto;
  margin-left: auto;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--teal); }
.woocommerce-error { border-left-color: #b23b3b; }
.woocommerce-error::before { color: #b23b3b; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 921px) {
  .gvb-shop { padding-top: 20px; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* woocommerce-smallscreen.css forces width:48% + floats — neutralize inside our grid */
  .woocommerce ul.products[class*='columns-'] li.product,
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product-category {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    float: none;
    width: 100%;
  }
  .woocommerce div.product div.summary { margin-top: 22px; }
  .woocommerce-result-count { display: none; }
  .woocommerce-ordering { float: none; margin-bottom: 14px; }
}
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .8rem; padding: 10px 11px 3px; }
  .woocommerce ul.products li.product .price { font-size: .82rem; padding: 0 11px 11px; }
}

/* Sidebar on the LEFT on shop screens (parity with the current site) */
.gvb-shop .gvb-content__side { order: -1; }
@media (max-width: 921px) {
  /* content first on mobile, tree below */
  .gvb-shop .gvb-content__side { order: 1; }
  /* the column flex uses align-items:flex-start, so the main column must be
     told to fill the row (parity with __side) — otherwise wide inline content
     such as a reference table shrink-wraps and pushes the page horizontally */
  .gvb-shop .gvb-content__main { width: 100%; min-width: 0; }
}

/* Long names wrap instead of clipping (loop + category tiles, all sizes) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  overflow-wrap: anywhere;
  white-space: normal;
}

/* ==========================================================================
   FICHA DE ACCESORIO (single product) — breadcrumb pill, chip variation
   picker, referencias section, category band. Adapted from the approved
   accessory-demo template; uses theme tokens only.
   ========================================================================== */

/* ---- single product: full width, no sidebar (§8.1) ---- */
.single-product .gvb-content__main { width: 100%; min-width: 0; }

/* ---- breadcrumb row: pill + desktop «Categorías» button/dropdown ---- */
.gvb-acc-crumbrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  margin: 0 0 26px;
}
.gvb-acc-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 9px 20px;
  margin: 0;
  max-width: 100%;
}
.gvb-acc-crumbs .woocommerce-breadcrumb {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--text-m);
  line-height: 1.5;
}
.gvb-acc-crumbs .woocommerce-breadcrumb a { color: var(--text-b); font-weight: 600; }
.gvb-acc-crumbs .woocommerce-breadcrumb a:hover { color: var(--teal); }
.gvb-acc-crumbs .sep { color: var(--border-d); margin: 0 5px; }

/* The desktop «Categorías» pill/dropdown was retired in favour of the «Tienda»
   header mega-menu (item 1); its markup, CSS and JS were removed. */

/* ---- mobile category block (§8.3) — shown ≤900px only ---- */
.gvb-acc-mobcats { display: none; padding: 34px 0 0; clear: both; }
.gvb-acc-mobcats__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--sh-s);
  padding: 18px 16px;
}
.gvb-acc-mobcats__card h4 {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-m);
  margin: 0 0 10px 6px;
}

/* ---- modern gallery (§8.4) — replaces Woo flexslider ---- */
.woocommerce div.product .gvb-acc-has-gal .woocommerce-product-gallery__wrapper { display: none; }
.woocommerce div.product .gvb-acc-has-gal { opacity: 1 !important; }
.gvb-acc-gal { position: relative; min-width: 0; }
.gvb-acc-gal__stage {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--sh-s);
  height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  touch-action: pan-y;
}
.gvb-acc-gal__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  transition: opacity .22s ease;
  border: none !important;
  border-radius: 0 !important;
}
.gvb-acc-gal__img.is-fading { opacity: 0; }
.gvb-acc-gnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .92);
  color: var(--text-b);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-s);
  transition: opacity .18s ease, background var(--ease), border-color var(--ease), color var(--ease);
  opacity: 0;
  z-index: 5;
  padding: 0;
}
.gvb-acc-gal__stage:hover .gvb-acc-gnav { opacity: 1; }
.gvb-acc-gnav:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.gvb-acc-gnav--prev { left: 14px; }
.gvb-acc-gnav--next { right: 14px; }
.gvb-acc-gnav svg { width: 16px; height: 16px; }
.gvb-acc-gal__count {
  position: absolute;
  right: 12px; bottom: 12px;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-m);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  z-index: 5;
}
.gvb-acc-gal__thumbs {
  display: flex;
  gap: 7px;
  margin-top: 10px;
  overflow-x: auto;
  padding: 2px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.gvb-acc-gal__thumbs::-webkit-scrollbar { display: none; }
.gvb-acc-gal__thumb {
  flex: 0 0 58px;
  width: 58px; height: 58px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--ease), border-color var(--ease), box-shadow var(--ease);
  opacity: .75;
}
.gvb-acc-gal__thumb:hover { opacity: 1; }
.gvb-acc-gal__thumb.on { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); opacity: 1; }
.gvb-acc-gal__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border: none !important; border-radius: 0 !important; }
.gvb-acc-gal--single .gvb-acc-gal__thumbs,
.gvb-acc-gal--single .gvb-acc-gnav,
.gvb-acc-gal--single .gvb-acc-gal__count { display: none; }

/* ---- gallery lightbox (§8.4) ---- */
.gvb-acc-lb[hidden] { display: none; } /* author display:flex would beat UA [hidden] otherwise */
.gvb-acc-lb {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 32, 29, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.gvb-acc-lb img {
  max-width: 100%;
  max-height: 100%;
  background: var(--white);
  border-radius: var(--r-s);
  padding: 12px;
  cursor: zoom-out;
}
.gvb-acc-lb .gvb-acc-gnav {
  opacity: 1;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.gvb-acc-lb .gvb-acc-gnav:hover { background: var(--teal); border-color: var(--teal); }
.gvb-acc-lb .gvb-acc-gnav--prev { left: 3vw; }
.gvb-acc-lb .gvb-acc-gnav--next { right: 3vw; }
.gvb-acc-lb__x {
  position: absolute;
  top: 20px; right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: .8;
}
.gvb-acc-lb__count {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  padding: 4px 14px;
}

/* ---- SKU dedupe: hide Woo's native sku_wrapper (§8.6) — !important beats
   the theme's `.product_meta > span { display:block }` rule ---- */
.single-product .product_meta .sku_wrapper { display: none !important; }

/* ---- pack pill (summary) ---- */
.gvb-acc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.gvb-acc-chip {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  color: var(--teal-d);
  background: var(--white);
  border: 1px solid var(--teal-l);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  white-space: nowrap;
}

/* ---- chip variation picker ---- */
.gvb-acc-vstep { margin-bottom: 14px; }
.gvb-acc-vlab {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 7px;
}
.gvb-acc-vlab small { font-weight: 500; color: var(--text-m); }
.gvb-acc-vchips { display: flex; gap: 8px; flex-wrap: wrap; }
.gvb-acc-vchip {
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--text-b);
  background: var(--white);
  border: 1px solid var(--border-d);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
  display: inline-flex;
  align-items: center;
}
.gvb-acc-vchip:hover { border-color: var(--teal); }
.gvb-acc-vchip.on { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.gvb-acc-vchip.on .gvb-dot { border-color: rgba(255, 255, 255, .7); }
/* native selects hidden only once chips have rendered successfully */
.gvb-acc-picker-on .variations { display: none; }
/* Woo sets an inline display on the reset link, so !important is required */
.gvb-acc-picker-on .reset_variations { display: none !important; }

/* ---- selected-variation price (item 4) ---- */
.gvb-acc-price {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--teal-d);
  margin: 0 0 8px;
}
.gvb-acc-price .woocommerce-Price-amount { font-weight: 800; }
.gvb-acc-price del { color: var(--text-m); font-weight: 400; opacity: .7; margin-right: 6px; }
.gvb-acc-price ins { text-decoration: none; }
/* hide the variable range once the picker drives the price… */
.single-product .summary.gvb-acc-priced > .price { display: none; }
/* …and Woo's own in-form variation price, to avoid duplication (cart flow intact) */
.gvb-acc-picker-on .woocommerce-variation-price { display: none; }

/* ---- modern field cards (item 3) — multi-attribute / >6 options ---- */
.gvb-acc-fields-on .variations {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  border: 0;
}
.gvb-acc-fields-on .variations tbody { display: flex; flex-wrap: wrap; gap: 10px; }
.gvb-acc-fields-on .variations tr { display: contents; }
.gvb-acc-fields-on .variations th.label,
.gvb-acc-fields-on .variations td.label { display: none; }
.gvb-acc-fields-on .variations td.value {
  display: block;
  flex: 1 1 150px;
  min-width: 0;
  padding: 0;
  margin: 0;
}
.gvb-acc-field {
  position: relative;
  min-height: 56px;
  background: var(--white);
  border: 1px solid var(--border-d);
  border-radius: var(--r);
  padding: 9px 40px 9px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.gvb-acc-field:hover { border-color: var(--teal); }
.gvb-acc-field.is-open,
.gvb-acc-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-l); }
.gvb-acc-field__eye {
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--teal-d);
  line-height: 1.2;
  margin-bottom: 2px;
}
.gvb-acc-field__val {
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gvb-acc-field__chev {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--teal);
  pointer-events: none;
  transition: transform .18s ease;
}
.gvb-acc-field.is-open .gvb-acc-field__chev { transform: translateY(-50%) rotate(180deg); }
/* the REAL Woo select, transparent overlay → native dropdown UX + a11y kept */
.gvb-acc-field__sel {
  position: absolute;
  inset: -1px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.gvb-acc-field.is-disabled { opacity: .62; pointer-events: none; }
.gvb-acc-field.is-disabled .gvb-acc-field__chev { display: none; }
.gvb-acc-fields__help { font-size: .72rem; color: var(--text-m); margin: 8px 0 0; }
@media (max-width: 700px) {
  .gvb-acc-fields-on .variations td.value { flex: 1 1 100%; }
}

/* ---- SKU line (summary) — the [hidden] attr must win until JS unhides it ---- */
.gvb-acc-sku { margin: 12px 0 0; font-size: .8rem; color: var(--text-m); }
.gvb-acc-sku b {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text-b);
  letter-spacing: .03em;
}

/* ---- compat enquiry link + shipping note (mockup 5b) — additive, sits after
   the add-to-cart in the summary. The compat link stays discreet so it never
   competes with the buy button; the shipnote is a subtle teal-accent box. ---- */
.gvb-compat { margin: 16px 0 0; }
.gvb-compat__link {
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--text-b);
  text-decoration: none;
  border-bottom: 1px dashed var(--border-d);
  padding-bottom: 1px;
  transition: color var(--ease), border-color var(--ease);
}
.gvb-compat__link:hover,
.gvb-compat__link:focus-visible { color: var(--teal-d); border-color: var(--teal); }

.gvb-shipnote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--teal-ul);
  border: 1px solid var(--teal-l);
  border-left: 3px solid var(--teal);
  border-radius: var(--r);
}
.gvb-shipnote__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--teal);
  margin-top: 1px;
}
.gvb-shipnote p {
  margin: 0;
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text-b);
}
.gvb-shipnote a {
  color: var(--teal-d);
  font-weight: 600;
  text-decoration: underline;
}
.gvb-shipnote a:hover,
.gvb-shipnote a:focus-visible { color: var(--teal-dd); }

/* Cart totals: delivery-time note appended under the order summary
   (render_block_woocommerce/cart-order-summary-block). Reuses .gvb-shipnote. */
.gvb-cart-shipnote { margin: 18px 0 4px; }

/* ---- centered product core (item 5) — buy area (gallery + summary) capped
   and centered at 1080. The referencias inner, the category band content and
   the related grid (rendered outside div.product) all share the same 1080px
   centered content width so their left edges line up down the page. ---- */
.single-product div.product { max-width: 1080px; margin-inline: auto; }

/* ---- referencias section ---- */
.gvb-acc-refs { padding: 44px 0 8px; clear: both; }
.gvb-acc-refs > div { max-width: 1080px; margin-inline: auto; }
.gvb-acc-refs h2 {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.gvb-acc-refs h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--teal);
  margin: 12px 0 20px;
}
.gvb-acc-blocknav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; }
.gvb-acc-blocknav a {
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-b);
  background: var(--white);
  border: 1px solid var(--border-d);
  border-radius: var(--r-pill);
  padding: 7px 15px;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.gvb-acc-blocknav a:hover { color: var(--teal-d); border-color: var(--teal); background: var(--teal-ul); }
.gvb-acc-block { padding: 6px 0 30px; scroll-margin-top: 80px; }
.gvb-acc-block + .gvb-acc-block { border-top: 1px solid var(--border-d); padding-top: 28px; }
.gvb-acc-block h3 {
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}

/* ==========================================================================
   REFERENCIAS — layout A (horizontal cards, ≤4 blocks) + accordion D (>4)
   The picker JS wraps each block into .gvb-acc-bbody > .gvb-acc-binner and
   builds a .gvb-acc-dhead header; the section class chooses the chrome.
   ========================================================================== */
.gvb-acc-dhead { display: none; }                 /* header shown only in D */
.gvb-acc-refs--a .gvb-acc-bbody,
.gvb-acc-refs--a .gvb-acc-binner { display: contents; }

/* ----- Layout A · horizontal cards ----- */
.gvb-acc-refs--a .gvb-acc-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--sh-s);
  padding: 22px;
  margin-bottom: 26px;
  display: grid;
  column-gap: 26px;
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "media title" "media checks" "table table" "note note";
}
.gvb-acc-refs--a .gvb-acc-block + .gvb-acc-block { border-top: 1px solid var(--border); padding-top: 22px; }
.gvb-acc-refs--a .gvb-acc-media { grid-area: media; align-self: start; margin: 0; }
.gvb-acc-refs--a .gvb-acc-media figure { width: 190px; height: 150px; padding: 10px; }
.gvb-acc-refs--a .gvb-acc-media img { height: 100%; max-width: 100%; }
.gvb-acc-refs--a .gvb-acc-block h3 { grid-area: title; margin: 0 0 10px; }
.gvb-acc-refs--a .gvb-acc-checks { grid-area: checks; margin: 0 0 4px; }
.gvb-acc-refs--a .gvb-acc-checks--2col { columns: 2; column-gap: 30px; }
.gvb-acc-refs--a .gvb-acc-checks--2col li { break-inside: avoid; }
.gvb-acc-refs--a .gvb-acc-tblwrap { grid-area: table; margin-top: 16px; }
.gvb-acc-refs--a .gvb-acc-note { grid-area: note; }

/* ----- Accordion D · compact ----- */
.gvb-acc-refs--acc .gvb-acc-blocknav { display: none; }
.gvb-acc-refs--acc .gvb-acc-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--sh-s);
  overflow: hidden;
  margin-bottom: 12px;
  padding: 0;
}
.gvb-acc-refs--acc .gvb-acc-block + .gvb-acc-block { border-top: 1px solid var(--border); padding-top: 0; }
.gvb-acc-refs--acc .gvb-acc-dhead {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 11px 16px;
  text-align: left;
  font-family: inherit;
}
.gvb-acc-dhead__mini {
  width: 48px; height: 48px; flex: 0 0 48px;
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 4px;
}
.gvb-acc-dhead__title { flex: 1; min-width: 0; font-family: var(--font-head); font-size: .95rem; font-weight: 700; color: var(--text); }
.gvb-acc-dhead__count { font-size: .78rem; color: var(--text-m); white-space: nowrap; }
.gvb-acc-dhead__chev { flex: 0 0 auto; display: flex; color: var(--text-m); transition: transform .25s ease; }
.gvb-acc-refs--acc .gvb-acc-block.is-open .gvb-acc-dhead__chev { transform: rotate(180deg); }
.gvb-acc-refs--acc .gvb-acc-bbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.gvb-acc-refs--acc .gvb-acc-block.is-open .gvb-acc-bbody { grid-template-rows: 1fr; }
.gvb-acc-refs--acc .gvb-acc-binner { overflow: hidden; min-height: 0; padding: 0 16px; }
.gvb-acc-refs--acc .gvb-acc-binner h3 { display: none; }  /* title lives in the header */
.gvb-acc-refs--acc .gvb-acc-media { margin: 4px 0 12px; }
.gvb-acc-refs--acc .gvb-acc-media figure { height: 150px; min-width: 120px; max-width: 240px; }
.gvb-acc-refs--acc .gvb-acc-media img { height: 100%; max-width: 100%; object-fit: contain; }
.gvb-acc-refs--acc .gvb-acc-checks { margin: 0 0 12px; }
.gvb-acc-refs--acc .gvb-acc-tblwrap { margin-bottom: 16px; }

/* ----- Prose exception · gvb-acc-block--prose -----
   Narrative intro sections render as plain paragraphs in BOTH layouts: no card
   chrome, no media grid, never an accordion row (JS skips them, so in --acc
   they sit above the collapsible rows as flowing text). */
.gvb-acc-refs--a .gvb-acc-block--prose,
.gvb-acc-refs--acc .gvb-acc-block--prose {
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0 2px 26px;
  margin-bottom: 14px;
}
.gvb-acc-refs .gvb-acc-block--prose p {
  color: var(--text-b);
  font-size: .95rem;
  line-height: 1.65;
  margin: 0 0 10px;
  max-width: 76ch;
}

/* ---- ✓ checklist (short description + blocks) ---- */
.gvb-acc-checks,
.woocommerce-product-details__short-description .gvb-acc-checks {
  list-style: none;
  margin: 12px 0 4px;
  padding: 0;
}
.gvb-acc-checks li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 7px;
  color: var(--text-b);
  font-size: .95rem;
}
.gvb-acc-checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal);
  font-weight: 700;
}
.gvb-acc-block .gvb-acc-checks li { font-size: .9rem; margin-bottom: 5px; }

/* ---- block media (figures) ---- */
.gvb-acc-media { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0 18px; }
.gvb-acc-media figure {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 14px;
  cursor: zoom-in;
  transition: box-shadow var(--ease), transform var(--ease);
}
.gvb-acc-media figure:hover { box-shadow: var(--sh-s); transform: translateY(-2px); }
.gvb-acc-media img { height: 150px; width: auto; max-width: 240px; object-fit: contain; }
/* keep very tall/thin product photos from collapsing to a sliver: give each
   figure an even minimum footprint and centre the image, so a row of mixed
   aspect ratios reads uniformly. */
.gvb-acc-media figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}
/* Wide variant for long-thin landscape reference photos (aspect ≥2.5): a
   wider, shorter box so panoramic probes fill the space instead of rendering
   as a sliver. The server tags the <figure> from the attachment's metadata
   ratio (see gvb_acc_refs_section). Applies to layout A + accordion. */
.gvb-acc-refs--a .gvb-acc-media figure.gvb-acc-media__fig--wide,
.gvb-acc-refs--acc .gvb-acc-media figure.gvb-acc-media__fig--wide {
  width: 340px;
  max-width: 340px;
  height: 110px;
}
.gvb-acc-media figure.gvb-acc-media__fig--wide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
@media (max-width: 900px) {
  .gvb-acc-refs--a .gvb-acc-media figure.gvb-acc-media__fig--wide,
  .gvb-acc-refs--acc .gvb-acc-media figure.gvb-acc-media__fig--wide {
    width: auto;
    max-width: 100%;
  }
}

/* ---- reference tables (canonical + transitional tablepress) ---- */
.gvb-acc-tblwrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  box-shadow: var(--sh-s);
  background:
    linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat local,
    linear-gradient(90deg, rgba(15, 40, 35, .14), rgba(15, 40, 35, 0) 12px) left / 14px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(15, 40, 35, .14), rgba(15, 40, 35, 0) 12px) right / 14px 100% no-repeat scroll,
    #fff;
}
.gvb-acc-refs table.gvb-acc-table,
.gvb-acc-refs table.tablepress {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  margin: 0;
  font-size: .85rem;
  background: transparent;
}
.gvb-acc-refs table.gvb-acc-table th,
.gvb-acc-refs table.tablepress th {
  font-family: var(--font-head);
  font-weight: 700;
  text-align: left;
  background: var(--teal-ul);
  color: var(--text);
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.gvb-acc-refs table.gvb-acc-table td,
.gvb-acc-refs table.tablepress td {
  padding: 9px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-b);
  vertical-align: top;
}
.gvb-acc-refs table.gvb-acc-table tr:last-child td,
.gvb-acc-refs table.tablepress tbody tr:last-child td { border-bottom: none; }
.gvb-acc-refs table.gvb-acc-table tbody tr:nth-child(even),
.gvb-acc-refs table.tablepress tbody tr:nth-child(even) { background: #fafcfc; }
.gvb-acc-refs table.gvb-acc-table td:first-child,
.gvb-acc-refs table.tablepress td:first-child {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
/* sticky first column keeps references legible while the table scrolls */
.gvb-acc-tblwrap th:first-child,
.gvb-acc-tblwrap td:first-child { position: sticky; left: 0; z-index: 1; }
.gvb-acc-tblwrap thead th:first-child { background: var(--teal-ul); }
.gvb-acc-tblwrap tbody td:first-child { background: var(--white); }
.gvb-acc-tblwrap tbody tr:nth-child(even) td:first-child { background: #fafcfc; }

/* In-cell images: some (legacy/hand-authored) reference tables embed a product
   photo inside a cell. Normalise every one so rows stay even on desktop and the
   stacked cards stay uniform on mobile (see the ≤900px block below). */
.gvb-acc-refs table.gvb-acc-table td img,
.gvb-acc-refs table.tablepress td img {
  display: block;
  max-height: 80px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

.gvb-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18);
  vertical-align: -2px;
  margin-right: 7px;
}
.gvb-acc-note { font-size: .8rem; color: var(--text-m); margin: 10px 2px 0; }
.gvb-acc-note b { color: var(--text-b); font-weight: 600; }

/* ---- parent-category band (white over mint) ---- */
.gvb-acc-ctx {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 26px 30px;
  margin-top: 38px;
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
}
.gvb-acc-ctx__body { flex: 1; min-width: 240px; }
.gvb-acc-ctx__k {
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 5px;
}
.gvb-acc-ctx h2 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; margin: 0 0 4px; }
.gvb-acc-ctx p { margin: 0; color: var(--text-b); font-size: .94rem; max-width: 56ch; }
.gvb-acc-ctx .gvb-acc-ctx__more {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  white-space: nowrap;
  margin-left: auto;
  color: var(--teal);
}
.gvb-acc-ctx .gvb-acc-ctx__more:hover { color: var(--teal-d); }

/* ==========================================================================
   FICHA DE ACCESORIO — mobile (≤900px): dropdown → block, tables → cards
   ========================================================================== */
@media (max-width: 900px) {
  /* phones get the mobile category block instead of the header mega */
  .gvb-acc-mobcats { display: block; }

  /* gallery: shorter stage, arrows always visible */
  .gvb-acc-gal__stage { height: 300px; padding: 18px; }
  .gvb-acc-gal__stage .gvb-acc-gnav { opacity: 1; width: 36px; height: 36px; }

  /* layout A cards stack: photo on top, then text, bullets 1-col, table below */
  .gvb-acc-refs--a .gvb-acc-block {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "title" "checks" "table" "note";
  }
  .gvb-acc-refs--a .gvb-acc-media { flex-wrap: wrap; }
  .gvb-acc-refs--a .gvb-acc-media figure { flex: 1 1 120px; width: auto; height: 130px; max-width: 100%; }
  .gvb-acc-refs--a .gvb-acc-checks--2col { columns: 1; }

  /* reference tables → stacked cards (no horizontal scroll) */
  .gvb-acc-tblwrap {
    overflow: visible;
    border: none;
    box-shadow: none;
    background: none;
  }
  .gvb-acc-refs table.gvb-acc-table,
  .gvb-acc-refs table.tablepress { min-width: 0; display: block; }
  .gvb-acc-refs table.gvb-acc-table thead,
  .gvb-acc-refs table.tablepress thead { display: none; }
  .gvb-acc-refs table.gvb-acc-table tbody,
  .gvb-acc-refs table.tablepress tbody { display: block; }
  .gvb-acc-refs table.gvb-acc-table tbody tr,
  .gvb-acc-refs table.tablepress tbody tr {
    display: block;
    background: var(--white) !important;
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh-s);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .gvb-acc-refs table.gvb-acc-table td,
  .gvb-acc-refs table.tablepress td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--teal-ul);
    white-space: normal;
    text-align: right;
  }
  .gvb-acc-refs table.gvb-acc-table td:last-child,
  .gvb-acc-refs table.tablepress td:last-child { border-bottom: none; }
  .gvb-acc-refs table.gvb-acc-table td::before,
  .gvb-acc-refs table.tablepress td::before {
    content: attr(data-label);
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-m);
    text-align: left;
    flex: 0 0 auto;
  }
  /* first cell = teal card header */
  .gvb-acc-refs table.gvb-acc-table td:first-child,
  .gvb-acc-refs table.tablepress td:first-child {
    display: block;
    position: static;
    background: var(--teal-ul);
    font-size: .85rem;
    text-align: left;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    white-space: normal;
  }
  .gvb-acc-refs table.gvb-acc-table td:first-child::before,
  .gvb-acc-refs table.tablepress td:first-child::before { display: none; }

  /* an image cell becomes a consistent centred image row (white bg), so every
     card has the same structure whether or not it carries a photo */
  .gvb-acc-refs table.gvb-acc-table td:has(img),
  .gvb-acc-refs table.tablepress td:has(img) {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 12px 14px;
    text-align: center;
  }
  .gvb-acc-refs table.gvb-acc-table td:has(img)::before,
  .gvb-acc-refs table.tablepress td:has(img)::before { display: none; }
  .gvb-acc-refs table.gvb-acc-table td img,
  .gvb-acc-refs table.tablepress td img { max-height: 110px; }

  /* empty value cells add nothing but their label in card view — drop the row
     (never the first cell / card header, which stays even if blank) */
  .gvb-acc-refs table.gvb-acc-table td:not(:first-child):empty,
  .gvb-acc-refs table.tablepress td:not(:first-child):empty { display: none; }
}

@media (max-width: 860px) {
  .gvb-acc-crumbs { font-size: .72rem; padding: 8px 14px; }
  .gvb-acc-ctx { padding: 22px; }
  .gvb-acc-ctx .gvb-acc-ctx__more { margin-left: 0; }
}