/*
Theme Name: Gulfstream Tropical Aquarium
Theme URI: https://gta.npa.global
Author: NPA Global
Description: B2B WooCommerce theme for Gulfstream Tropical Aquarium. Navy / teal / orange, Open Sans, white masthead with SKU/UPC search, gradient hero slider, category-driven storefront. Built clean-room; restyled 2026-09-05 to look distinct from the previous site.
Version: 1.1.0
Requires PHP: 8.0
Text Domain: gta
*/

/* ---------- Fonts (variable Open Sans, self-hosted) ---------- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/opensans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/opensans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --gta-navy: #0E2A47;
  --gta-navy-2: #12385E;
  --gta-navy-dark: #0B2138;
  --gta-orange: #F36C21;
  --gta-orange-dark: #D95A15;
  --gta-teal: #2A9D8F;
  --gta-teal-dark: #167C74;   /* 2026-09-05 restyle: category bar + hero gradient end */
  --gta-gold: #FFD166;
  --gta-muted: #9FB3C8;
  --gta-slate: #475569;
  --gta-slate-2: #64748B;
  --gta-gray: #94A3B8;
  --gta-gray-2: #B0BDCB;
  --gta-line: #E2E8F0;
  --gta-card-line: #E9EEF3;
  --gta-field-line: #D8E0E8;
  --gta-band: #F4F7FA;
  --gta-footer-text: #C7D5E3;
  --gta-footer-dim: #7E93A8;
  --gta-font: 'Open Sans', Arial, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--gta-font);
  background: #fff;
  color: var(--gta-slate);
  font-size: 15px;
  line-height: 1.6;
}
a { color: var(--gta-navy); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gta-orange); }
img { max-width: 100%; height: auto; }
button { font-family: var(--gta-font); }
.gta-site { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.gta-main { flex: 1; }
.gta-container { max-width: 1280px; margin: 0 auto; width: 100%; padding: 0 32px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Header — 2026-09-05 restyle (Val: the store must look clearly
   different from the previous site; DECISIONS "The look departs from the old
   site"). Was orange bar / navy masthead / dark-navy nav, the old site's
   arrangement. Now: navy announcement bar, WHITE masthead with navy wordmark,
   teal category bar, orange kept for the actions only. ---------- */
.gta-topbar {
  background: var(--gta-navy-dark); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 8px 32px; font-size: 13px; flex-wrap: wrap;
}
.gta-topbar-msg { font-weight: 700; }
.gta-topbar-links { display: flex; gap: 18px; }
.gta-topbar-links a { color: #fff; }
.gta-topbar-links a:hover { color: var(--gta-gold); }

/* ---------- Masthead (white: logo / search / account+cart) ---------- */
.gta-masthead {
  background: #fff; border-bottom: 1px solid var(--gta-line);
  display: flex; align-items: center; gap: 28px; padding: 14px 32px; flex-wrap: wrap;
}
.gta-logo { display: flex; align-items: center; gap: 12px; flex: none; }
.gta-logo img { height: 72px; width: 72px; display: block; object-fit: contain; } /* 52 → 72, Val 2026-09-30 */
.gta-logo-word { color: var(--gta-navy); font-weight: 800; font-size: 20px; line-height: 1.15; }
.gta-logo-word small {
  font-weight: 600; font-size: 11px; color: var(--gta-teal-dark);
  letter-spacing: 1.4px; text-transform: uppercase; display: block;
}
.gta-search {
  flex: 1; display: flex; align-items: stretch; max-width: 720px; height: 44px;
  border-radius: 22px; overflow: hidden; background: #fff; min-width: 260px;
  border: 2px solid var(--gta-navy-2);
}
.gta-search input[type="search"] {
  flex: 1; border: none; outline: none; padding: 0 18px; font-size: 14px;
  font-family: var(--gta-font); color: var(--gta-navy); background: #fff; min-width: 0;
}
.gta-search-scope {
  display: flex; align-items: center; gap: 6px; padding: 0 14px;
  border-left: 1px solid var(--gta-line); color: var(--gta-slate-2); font-size: 13px; white-space: nowrap;
}
.gta-search button[type="submit"] {
  border: none; background: var(--gta-orange); color: #fff; padding: 0 20px;
  font-size: 16px; cursor: pointer;
}
.gta-search button[type="submit"]:hover { background: var(--gta-orange-dark); }
.gta-masthead-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.gta-masthead-links a { color: var(--gta-navy); line-height: 1.25; font-size: 13px; font-weight: 600; }
.gta-masthead-links a:hover { color: var(--gta-orange); }
.gta-account-hint { color: var(--gta-slate-2); display: block; font-size: 11px; font-weight: 400; }
/* Val 2026-09-30: signed-out visitors see "Join Now / Sign In" instead of My Account + Cart. */
.gta-join-signin { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.gta-masthead-links a.gta-join {
  background: var(--gta-orange); color: #fff; font-size: 14px; font-weight: 700;
  padding: 9px 18px; border-radius: 999px;
}
.gta-masthead-links a.gta-join:hover { background: var(--gta-orange-dark); color: #fff; }
.gta-join-sep { color: var(--gta-gray); font-size: 16px; }
.gta-masthead-links a.gta-signin { font-size: 14px; font-weight: 700; }
.gta-cart-link { display: flex; align-items: center; gap: 10px; }
.gta-cart-count {
  background: var(--gta-orange); color: #fff; border-radius: 50%;
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

/* ---------- Category nav bar (dark navy) ---------- */
.gta-navbar { background: var(--gta-teal-dark); display: flex; align-items: stretch; padding: 0 32px; flex-wrap: wrap; }
/* Eight equal tabs across the bar (Val, 2026-09-05). The category menu is
   tab two: same look as the others, plus its dropdown. .is-current is the
   page's own tab and stays highlighted; hover is the transient state. */
.gta-cat-menu { position: relative; flex: 1 1 0; display: flex; }
.gta-cat-btn {
  border: none; cursor: pointer; background: transparent; color: #fff; width: 100%;
  font-family: var(--gta-font); font-weight: 600; font-size: 13px; padding: 14px 8px; white-space: nowrap;
}
.gta-cat-btn:hover, .gta-cat-menu.open .gta-cat-btn { color: var(--gta-gold); background: rgba(255,255,255,.08); }
.gta-caret { font-size: 10px; margin-left: 4px; }
/* Click-driven mega menu, old-site look (Tom's annotated screenshot
   2026-08-24): the department list and the flyout are SEPARATE floating
   white panels — the flyout appears to the right only after a department
   is clicked. */
.gta-cat-drop {
  display: none; position: absolute; top: 100%; left: 0; z-index: 40;
  align-items: flex-start; gap: 5px;
}
.gta-cat-menu.open .gta-cat-drop { display: flex; }
.gta-cat-deptlist {
  flex: 0 0 300px; margin: 0; padding: 4px 0; list-style: none;
  background: #fff; border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 34px rgba(14,42,71,.20);
  overflow-y: auto; max-height: 74vh;
}
.gta-cat-deptlist li { list-style: none; }
.gta-cat-deptlist li + li .gta-cat-dept { border-top: 1px solid #eef2f6; }
.gta-cat-dept {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  border: none; background: none; cursor: pointer; text-align: left;
  padding: 15px 22px; font-size: 14.5px; font-weight: 500; color: #33424f;
  font-family: var(--gta-font);
}
.gta-cat-dept:hover, .gta-cat-dept.active { background: #f2f5f8; }
.gta-cat-dept.active { font-weight: 700; color: #1d2a35; }
.gta-cat-arrow { font-size: 15px; color: #8fa1af; line-height: 1; }
.gta-cat-megawrap {
  display: none; background: #fff; border-radius: 10px;
  box-shadow: 0 14px 34px rgba(14,42,71,.20);
  min-width: 540px; max-width: min(680px, 58vw);
  max-height: 74vh; overflow-y: auto; padding: 26px 32px 28px;
}
.gta-cat-megawrap.on { display: block; }
.gta-mega-all {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--gta-navy);
  margin-bottom: 16px;
}
.gta-mega-all:hover { color: var(--gta-orange); }
.gta-mega-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 26px 36px; }
.gta-mega-head {
  display: block; font-size: 13.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: #1d2a35; margin-bottom: 12px; line-height: 1.3;
}
.gta-mega-head:hover { color: var(--gta-orange); }
.gta-mega-link { display: block; padding: 5px 0; font-size: 14px; color: #46555f; line-height: 1.35; }
.gta-mega-link:hover { color: var(--gta-orange); }
@media (max-width: 860px) {
  .gta-cat-drop { flex-direction: column; gap: 4px; }
  .gta-cat-deptlist { flex: none; width: min(560px, 96vw); max-height: 36vh; }
  .gta-cat-megawrap { min-width: 0; width: min(560px, 96vw); max-width: none; max-height: 38vh; }
}

/* ---------- Shop filter sidebar (mirrors the existing site's Filter By) ---------- */
.gta-shop-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 30px; align-items: start; }
.gta-shop-filters { background: #fff; border: 1px solid #e4ebf2; border-radius: 10px; padding: 18px 16px 8px; }
.gsf-title { font-size: 19px; font-weight: 800; color: var(--gta-navy); margin: 0 0 14px; }
.gsf-block { margin: 0 0 18px; }
.gsf-head { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gta-navy); margin-bottom: 8px; }
.gsf-select { width: 100%; padding: 9px 10px; border: 1px solid #b8c7d6; border-radius: 6px; background: #fff; font-size: 13px; color: var(--gta-navy); }
/* sidebar category tree: departments only, subcategories fly out right */
.gsf-cats { border: 1px solid #dbe5ee; border-radius: 8px; overflow: visible; background: #fff; }
.gsf-cat-all { display: block; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--gta-navy); border-bottom: 1px solid #eef2f6; }
.gsf-cat-all:hover, .gsf-cat-all.active { color: var(--gta-orange); }
.gsf-cat-row { position: relative; }
.gsf-cat-row + .gsf-cat-row .gsf-cat-dept, .gsf-cat-all + .gsf-cat-row .gsf-cat-dept { border-top: 1px solid #eef2f6; }
.gsf-cat-dept {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  border: none; background: none; cursor: pointer; text-align: left; font-family: var(--gta-font);
  padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--gta-navy);
}
.gsf-cat-dept:hover, .gsf-cat-dept.active { background: var(--gta-band); }
.gsf-cat-dept.open { background: var(--gta-band); color: var(--gta-orange); }
.gsf-caret { color: var(--gta-orange); font-size: 15px; line-height: 1; }
.gsf-cat-fly {
  position: absolute; left: calc(100% + 6px); top: 0; z-index: 50; min-width: 210px; max-width: 260px;
  max-height: 380px; overflow-y: auto; background: #fff; border: 1px solid #dbe5ee; border-radius: 8px;
  box-shadow: 0 14px 30px rgba(14,42,71,.18); padding: 8px 0;
}
.gsf-fly-all { display: block; padding: 8px 16px; font-size: 12.5px; font-weight: 800; color: var(--gta-navy); border-bottom: 1px solid #eef2f6; margin-bottom: 4px; }
.gsf-fly-all:hover { color: var(--gta-orange); }
.gsf-fly-link { display: block; padding: 6px 16px; font-size: 12.5px; color: var(--gta-slate); }
.gsf-fly-link:hover, .gsf-fly-link.active { color: var(--gta-orange); background: var(--gta-band); }
@media (max-width: 900px) {
  /* stacked layout: fly out below instead of right (no room beside) */
  .gsf-cat-fly { position: static; left: 0; max-width: none; box-shadow: none; border: none; border-top: 1px solid #eef2f6; border-radius: 0; padding: 4px 0 4px 12px; max-height: none; }
}
.gsf-check { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; color: var(--gta-navy); }
.gsf-check:hover { color: var(--gta-orange); }
.gsf-box { width: 15px; height: 15px; border: 1.5px solid #9fb2c4; border-radius: 3px; flex: 0 0 auto; }
.gsf-check.on { font-weight: 700; }
.gsf-check.on .gsf-box { background: var(--gta-orange); border-color: var(--gta-orange); }
.gsf-price-row { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.gsf-price-row input { width: 50%; padding: 8px 8px; border: 1px solid #b8c7d6; border-radius: 6px; font-size: 13px; }
.gsf-go { border: none; cursor: pointer; border-radius: 6px; background: var(--gta-navy); color: #fff; font-weight: 700; font-size: 12.5px; padding: 8px 16px; }
.gsf-go:hover { background: var(--gta-orange); }
.gsf-clear { margin-left: 10px; font-size: 12.5px; color: #5c6f82; text-decoration: underline; }
@media (max-width: 900px) {
  .gta-shop-grid { grid-template-columns: 1fr; }
  .gta-shop-filters { padding-bottom: 2px; }
}

/* ---------- Live search suggestions (mirrors the existing site) ---------- */
.gta-search { position: relative; }
.gta-ls { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: #fff;
  border: 1px solid #dbe5ee; border-top: none; border-radius: 0 0 10px 10px;
  box-shadow: 0 18px 40px rgba(14,42,71,.25); max-height: 72vh; overflow: auto; }
.gta-ls-row { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #edf2f7; }
.gta-ls-thumb { flex: 0 0 56px; }
.gta-ls-thumb img { width: 56px; height: 56px; object-fit: contain; }
.gta-ls-body { min-width: 0; }
.gta-ls-name { display: block; font-weight: 700; font-size: 13.5px; color: var(--gta-navy); line-height: 1.3; }
.gta-ls-name:hover { color: var(--gta-orange); }
.gta-ls-name b, .gta-ls-meta b, .gta-ls-snip b { color: var(--gta-orange-dark); }
.gta-ls-price { font-weight: 800; font-size: 14px; color: var(--gta-navy); margin: 3px 0; }
.gta-ls-cart { display: flex; gap: 6px; margin: 4px 0 2px; }
.gta-ls-add { border: none; cursor: pointer; border-radius: 5px; background: var(--gta-orange);
  color: #fff; font-weight: 700; font-size: 12px; padding: 6px 12px; }
.gta-ls-add:hover { background: var(--gta-orange-dark); }
.gta-ls-add[disabled] { opacity: .6; cursor: default; }
.gta-ls-qty { width: 52px; padding: 4px 6px; border: 1px solid #b8c7d6; border-radius: 5px; font-size: 12.5px; }
.gta-ls-stock { font-size: 12.5px; font-weight: 700; margin: 2px 0; }
.gta-ls-stock.in { color: #1e7a34; }
.gta-ls-stock.out { color: #b3261e; }
.gta-ls-stock.back { color: #8a6100; }
.gta-ls-meta { font-size: 12px; color: #8195a7; }
.gta-ls-brand { font-size: 12.5px; color: var(--gta-navy); margin-top: 2px; }
.gta-ls-snip { font-size: 12px; color: #5c6f82; margin-top: 3px; }
.gta-ls-empty { padding: 16px; font-size: 13px; color: #5c6f82; }
.gta-ls-all { display: block; padding: 12px 14px; text-align: center; font-weight: 800;
  font-size: 13px; color: var(--gta-orange); background: var(--gta-band); }
.gta-nav { display: flex; align-items: stretch; gap: 0; margin: 0; flex: 1 1 auto; flex-wrap: nowrap; }
.gta-nav > a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
/* Direct children only (`>`): the category drop-down lives INSIDE .gta-nav, and
   `.gta-nav a` painted its 300-odd sub-category links white on a white panel —
   Val, 2026-09-13: "sub-categories ... just white boxes". */
.gta-nav > a, .gta-nav-right a { color: #fff; font-size: 13px; font-weight: 600; padding: 14px 8px; }
.gta-nav > a:hover, .gta-nav-right a:hover { color: var(--gta-gold); }
.gta-nav > a.is-current, .gta-cat-btn.is-current {
  background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 -3px 0 var(--gta-orange);
}
.gta-nav > a.is-current:hover, .gta-cat-btn.is-current:hover { color: #fff; }
.gta-nav-right { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.gta-nav-scan { border: 1px solid rgba(255,255,255,.5); border-radius: 18px; margin: 8px 0; padding: 6px 14px !important; font-weight: 600 !important; }
.gta-nav-scan:hover { background: rgba(255,255,255,.12); color: #fff !important; }

/* ---------- Hero slider — 2026-09-05 restyle ---------- */
/* Until 2026-09-05 the hero reproduced the old site (its slide art as a
   water-splash background, product left, big dark type right, underlined
   CTA). Val asked for the opposite: a look clearly distinct from the previous
   site. Now: a navy-to-teal gradient, copy LEFT in white with an orange
   eyebrow and a solid orange CTA, the product RIGHT on a white rounded panel,
   round dot indicators. Slide art comes from gs-data.php (GTA's own photos). */
.gta-hero {
  position: relative; overflow: hidden; height: 460px;
  background: linear-gradient(115deg, var(--gta-navy-dark) 0%, var(--gta-navy-2) 48%, var(--gta-teal-dark) 100%);
}
.gta-hero::after {
  /* a soft light sweep so the gradient does not read as flat */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 78% 50%, rgba(255,255,255,.10), transparent 55%);
}
.gta-slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: 7%; padding: 0 7%;
  transition: opacity .6s; opacity: 0; pointer-events: none; z-index: 1;
}
.gta-slide.is-active { opacity: 1; pointer-events: auto; }
.gta-slide-copy { max-width: 640px; order: 1; }
.gta-eyebrow {
  color: var(--gta-gold); font-weight: 700; font-size: 15px; line-height: 1.2;
  text-transform: uppercase; margin-bottom: 14px; letter-spacing: 2.2px;
}
.gta-slide-copy h2 { color: #fff; font-size: 50px; font-weight: 800; margin: 0 0 14px; line-height: 1.08; letter-spacing: -.5px; }
.gta-slide-sub { color: var(--gta-footer-text); font-size: 18px; line-height: 1.5; margin-bottom: 26px; max-width: 540px; }
.gta-btn {
  display: inline-block; background: var(--gta-orange); color: #fff; font-weight: 700;
  font-size: 15px; padding: 13px 30px; border-radius: 26px; border: none; cursor: pointer;
}
.gta-btn:hover { background: var(--gta-orange-dark); color: #fff; }
.gta-slide-copy .gta-btn { font-size: 16px; padding: 14px 34px; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.gta-slide-img {
  order: 2; width: 340px; height: 340px; object-fit: contain; flex: none;
  background: #fff; border-radius: 28px; padding: 26px;
  box-shadow: 0 24px 50px rgba(0,0,0,.28);
}
/* A borrowed photograph fills its frame, landscape, with its credit on it (Val, 2026-09-30). */
.gta-slide-fig { order: 2; flex: none; margin: 0; position: relative; }
.gta-slide-img--photo { display: block; width: 460px; height: 340px; object-fit: cover; padding: 0; background: #0B2138; }
.gta-slide-credit {
  position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px;
  background: rgba(11,33,56,.62); color: #fff; font-size: 11px; line-height: 1.3;
}
.gta-dots {
  position: absolute; bottom: 22px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 10px; z-index: 5;
}
.gta-dot {
  width: 12px; height: 12px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.35);
}
.gta-dot.is-active { background: var(--gta-orange); width: 32px; border-radius: 6px; }
@media (max-width: 860px) {
  .gta-hero { height: 600px; }
  /* bottom padding keeps the CTA clear of the indicators */
  .gta-slide { flex-direction: column; justify-content: center; gap: 18px; text-align: center; padding: 20px 7% 64px; }
  .gta-slide-copy { order: 2; }
  .gta-slide-img { order: 1; width: 170px; height: 170px; padding: 14px; border-radius: 20px; }
  .gta-slide-fig { order: 1; }
  .gta-slide-img--photo { width: 240px; height: 178px; padding: 0; }
  .gta-slide-credit { font-size: 9px; right: 6px; bottom: 6px; padding: 2px 6px; }
  .gta-eyebrow { font-size: 12px; margin-bottom: 8px; }
  .gta-slide-copy h2 { font-size: 28px; }
  .gta-slide-sub { font-size: 15px; margin-bottom: 18px; }
}

/* ---------- Home: tabs + product cards ---------- */
.gta-tabs { display: flex; gap: 28px; border-bottom: 2px solid var(--gta-line); margin-top: 44px; }
.gta-tab {
  border: none; background: none; cursor: pointer; font-size: 19px; font-weight: 800;
  padding: 10px 4px 14px; margin-bottom: -2px; color: var(--gta-gray);
  border-bottom: 3px solid transparent;
}
.gta-tab[aria-selected="true"] { color: var(--gta-navy); border-bottom-color: var(--gta-orange); }
.gta-panel[hidden] { display: none; }
/* Fixed column counts (4/3/2 by width) so a page of products always fills its
   rows — auto-fill let wide screens flow 5 columns and strand a 1-item last
   row with 16/page (Tom, 2026-08-24). Per-page is 24: divisible by 4, 3, 2. */
.gta-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 28px;
}
.gta-card {
  border: 1px solid var(--gta-card-line); border-radius: 8px; padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 8px; position: relative; background: #fff;
  transition: box-shadow .15s;
}
.gta-card:hover { box-shadow: 0 10px 24px rgba(14,42,71,.10); }
.gta-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11px; font-weight: 700;
  color: #fff; padding: 3px 10px; border-radius: 12px; background: var(--gta-orange);
}
.gta-badge--new { background: var(--gta-teal); }
.gta-card-imglink { display: block; text-align: center; }
.gta-card-imglink img { width: 160px; height: 160px; object-fit: contain; }
.gta-card-noimg {
  width: 160px; height: 160px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gta-band); border-radius: 8px; color: var(--gta-gray); font-size: 12px;
}
.gta-card-brand { font-size: 11px; color: var(--gta-gray); text-transform: uppercase; letter-spacing: .6px; }
.gta-card-brand:hover { color: var(--gta-orange); }
.gta-card-name { font-size: 14px; font-weight: 700; color: var(--gta-navy); line-height: 1.35; min-height: 38px; }
.gta-card-name:hover { color: var(--gta-orange); }
.gta-card-cats { font-size: 11px; color: var(--gta-gray-2); line-height: 1.5; }
.gta-card-more {
  margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 700;
  color: var(--gta-orange); border: 1px solid var(--gta-orange); border-radius: 16px; padding: 7px 16px;
}
.gta-card-more:hover { background: var(--gta-orange); color: #fff; }

/* ---------- Home: promo cards ---------- */
.gta-promos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.gta-promo {
  border-radius: 10px; padding: 26px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
}
.gta-promo h4 { color: #fff; margin: 0 0 4px; font-size: 17px; }
.gta-promo-sub { font-size: 12px; margin-bottom: 12px; color: var(--gta-muted); }
.gta-promo-link { color: var(--gta-orange); font-size: 12px; font-weight: 700; }
.gta-promo img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.gta-promo--navy { background: var(--gta-navy); }
.gta-promo--orange { background: var(--gta-orange); }
.gta-promo--orange .gta-promo-sub { color: #FFDCC5; }
.gta-promo--orange .gta-promo-link { color: #fff; }
.gta-promo--steel { background: var(--gta-navy-2); }
.gta-promo--dark { background: var(--gta-navy-dark); }

/* ---------- Home: section titles / category tiles / brands ---------- */
.gta-h2 { font-size: 26px; font-weight: 800; color: var(--gta-navy); margin: 52px 0 24px; text-align: center; }
.gta-h2--first { margin-top: 44px; }   /* Best Sellers, straight under the slides (was the tab bar's 44px) */
.gta-cattiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.gta-cattile {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  border: 1px solid var(--gta-card-line); border-radius: 10px; padding: 22px 10px;
  transition: box-shadow .15s;
}
.gta-cattile:hover { box-shadow: 0 8px 20px rgba(14,42,71,.10); }
.gta-cattile img { width: 72px; height: 72px; object-fit: contain; }
.gta-cattile span { font-size: 13px; font-weight: 700; color: var(--gta-navy); text-align: center; }
.gta-brandtiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 48px; }
.gta-brandtiles a { display: block; border-radius: 10px; overflow: hidden; }
/* Val 2026-09-30: "Shop By Brands" heads the brand photos; the name list follows them. */
.gta-h2 + .gta-brandtiles { margin-top: 0; }
.gta-brandtiles + .gta-pills { margin-top: 26px; }
/* Val 2026-09-30: nine featured categories, one card style, 3 × 3 (live goods / consumables / equipment). */
.gta-cats9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gta-cat9 {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--gta-card-line); border-radius: 12px;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.gta-cat9:hover, .gta-cat9:focus-visible { border-color: var(--gta-orange); box-shadow: 0 10px 24px rgba(14,42,71,.10); transform: translateY(-2px); }
.gta-cat9-icon {
  flex: none; width: 68px; height: 68px; border-radius: 50%; background: #FFF1E8;
  display: flex; align-items: center; justify-content: center;
}
.gta-cat9-icon img { width: 44px; height: 44px; display: block; }
.gta-cat9-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gta-cat9-name { font-size: 16px; font-weight: 800; color: var(--gta-navy); line-height: 1.25; }
.gta-cat9-sub { font-size: 13px; color: var(--gta-slate-2); }
.gta-cat9-go { flex: none; font-size: 26px; line-height: 1; color: var(--gta-orange); transition: transform .15s; }
.gta-cat9:hover .gta-cat9-go { transform: translateX(3px); }
.gta-brandtiles img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.gta-pills { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; padding-bottom: 8px; }
.gta-pills a {
  font-size: 12px; color: var(--gta-slate); border: 1px solid var(--gta-line);
  border-radius: 14px; padding: 5px 13px;
}
.gta-pills a:hover { border-color: var(--gta-orange); color: var(--gta-orange); }

/* ---------- Breadcrumb band ---------- */
.gta-band {
  background: var(--gta-band); padding: 26px 48px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.gta-band-title { margin: 0; font-size: 26px; font-weight: 800; color: var(--gta-navy); }
.gta-crumbs, .gta-band .woocommerce-breadcrumb { font-size: 13px !important; color: var(--gta-gray) !important; margin: 0 !important; }
.gta-crumbs a, .gta-band .woocommerce-breadcrumb a { color: var(--gta-gray); }
.gta-crumbs a:hover, .gta-band .woocommerce-breadcrumb a:hover { color: var(--gta-orange); }

/* ---------- Static page content ---------- */
.gta-content { max-width: 860px; margin: 0 auto; padding: 48px 32px 20px; width: 100%; }
.gta-content--wide { max-width: 1100px; }
.gta-content h2 { font-size: 30px; font-weight: 800; color: var(--gta-navy); margin: 0 0 24px; line-height: 1.2; }
.gta-content h3 { font-size: 17px; font-weight: 800; color: var(--gta-navy); margin: 26px 0 8px; }
.gta-content h3.gta-accent { color: var(--gta-orange); }
.gta-content p { font-size: 15px; line-height: 1.8; color: var(--gta-slate); margin: 0 0 16px; }
.gta-content ul, .gta-content ol { font-size: 15px; line-height: 1.8; color: var(--gta-slate); margin: 0 0 20px; padding-left: 22px; }
.gta-content li { margin-bottom: 8px; }
.gta-content a { color: var(--gta-orange); }
.gta-lead-eyebrow {
  color: var(--gta-orange); font-weight: 800; font-size: 14px;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px;
}
.gta-note-box { background: var(--gta-band); border-radius: 10px; padding: 22px 26px; margin: 8px 0 16px; }
.gta-note-box h3 { margin-top: 0; color: var(--gta-orange); }
.gta-fineprint { font-size: 12px; color: var(--gta-gray); }
.gta-callout-dark {
  background: var(--gta-navy-dark); border-radius: 12px; min-height: 280px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 12px; padding: 24px; text-align: center;
}
.gta-callout-dark .gta-scanframe {
  width: 220px; height: 130px; border: 3px dashed rgba(243,108,33,.7); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--gta-orange); font-size: 34px;
}
.gta-callout-dark p { color: var(--gta-muted); font-size: 13px; margin: 0; }

/* Contact page */
.gta-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; }
.gta-contact-block h3 {
  font-size: 14px; font-weight: 800; color: var(--gta-orange);
  text-transform: uppercase; letter-spacing: 1px; margin: 0 0 6px;
}
.gta-contact-block { margin-bottom: 22px; }
.gta-form-card { background: var(--gta-band); border-radius: 12px; padding: 32px; }
.gta-form-card h2 { font-size: 24px; margin-bottom: 20px; }
.gta-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gta-field { display: flex; flex-direction: column; gap: 6px; }
.gta-field--full { grid-column: 1 / -1; }
.gta-field label { font-size: 12px; font-weight: 700; color: var(--gta-navy); }
.gta-field input, .gta-field textarea {
  border: 1px solid var(--gta-field-line); border-radius: 6px; padding: 11px 14px;
  font-size: 14px; font-family: var(--gta-font); background: #fff;
}
.gta-field textarea { resize: vertical; }
.gta-form-card .gta-btn { margin-top: 18px; letter-spacing: 1px; font-size: 14px; font-weight: 800; padding: 13px 40px; border-radius: 24px; }
.gta-form-notice { border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.gta-form-notice--ok { background: #E7F6F2; color: #14665B; }
.gta-form-notice--err { background: #FDECE2; color: #A23E0A; }

/* ---------- Footer ---------- */
/* Val 2026-09-30: light footer (was navy) — the orange logo looked dirty on the navy.
 * Previous values: background var(--gta-navy), text var(--gta-footer-text), headings #fff,
 * legal/credit var(--gta-footer-dim), divider rgba(255,255,255,.12). */
.gta-footer { background: var(--gta-band); border-top: 1px solid var(--gta-line); color: var(--gta-slate); margin-top: 48px; }
.gta-footer-grid {
  display: grid; grid-template-columns: 200px 1fr 1fr 1fr; gap: 40px;
  padding: 48px 48px 36px; max-width: 1280px; margin: 0 auto;
}
.gta-footer-grid img { width: 110px; height: 110px; display: block; }
.gta-footer h4 { color: var(--gta-navy); font-size: 15px; margin: 0 0 14px; }
.gta-footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.gta-footer-col a { color: var(--gta-slate); }
.gta-footer-col a:hover { color: var(--gta-orange-dark); }
.gta-footer-legal {
  border-top: 1px solid var(--gta-line); padding: 16px 48px 6px;
  font-size: 12px; text-align: center; color: var(--gta-slate-2);
}
/* Val 2026-09-20 item 7 — the NPA credit. Small and muted, but readable: on the
 * light footer --gta-slate-2 (#64748B) is ~4.5:1 and the link is navy (~13:1),
 * underlined on hover. */
.gta-footer-credit {
  padding: 0 48px 18px; font-size: 12px; line-height: 1.5;
  text-align: center; color: var(--gta-slate-2);
}
.gta-footer-credit a { color: var(--gta-navy); text-decoration: none; }
.gta-footer-credit a:hover, .gta-footer-credit a:focus { color: var(--gta-orange-dark); text-decoration: underline; }

/* ---------- WooCommerce: loop / cards ---------- */
.woocommerce-page .gta-main > .gta-container, .gta-main > .gta-container { padding-top: 34px; padding-bottom: 20px; }
.woocommerce ul.products {
  display: grid !important; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin: 28px 0 0 !important; padding: 0; list-style: none;
}
@media (max-width: 1100px) {
  .woocommerce ul.products, .gta-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .woocommerce ul.products, .gta-grid { grid-template-columns: repeat(2, 1fr); }
  /* At 2 columns the card's own content width (~133px after its padding) is
   * narrower than "Add to cart" / "Select options" need to stay on one line
   * at the full-size button, so identical text wrapped on some cards and not
   * others and threw the bottom-pinned button block (see .button margin-top
   * above) out of line again. Smaller here only — cart/single-product buttons
   * are untouched. */
  .woocommerce ul.products li.product .button { padding: 8px 12px !important; font-size: 12.5px !important; }
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
/* min-width:0 — a grid item's implicit min-width is its content's max-content
 * size (a "Select options" button, an unbreakable SKU) unless told otherwise,
 * so equal `1fr` tracks were coming out unequal (measured 173px/157px at
 * phone width, 2026-09-20) whenever one column's items needed more room than
 * the other's. This lets every column actually share the row equally. */
.woocommerce ul.products li.product {
  float: none !important; width: auto !important; margin: 0 !important; min-width: 0 !important;
  border: 1px solid var(--gta-card-line); border-radius: 8px; padding: 18px 16px 16px !important;
  display: flex; flex-direction: column; gap: 8px; position: relative; background: #fff;
  transition: box-shadow .15s;
}
.woocommerce ul.products li.product:hover { box-shadow: 0 10px 24px rgba(14,42,71,.10); }
.woocommerce ul.products li.product a img {
  width: 160px !important; height: 160px; object-fit: contain; margin: 0 auto 4px !important; display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px !important; font-weight: 700; color: var(--gta-navy); line-height: 1.35; padding: 0 !important;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--gta-orange); }
.woocommerce ul.products li.product .price {
  color: var(--gta-navy) !important; font-size: 14px !important; font-weight: 700; margin-top: auto !important;
}
.woocommerce ul.products li.product .price del { color: var(--gta-gray); font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
/* Val, 2026-09-20 (item 5): a product name wraps to a different number of
 * lines per card, so the image+title+price link (woocommerce-loop-product__link)
 * is a different height tile to tile — .price's margin-top:auto above does
 * nothing for that, because .price lives INSIDE that link, not as a direct
 * flex child of li.product. The button (and the favorite heart right after
 * it) ARE direct flex children of li.product (display:flex, column), so an
 * auto top margin on the button — not a fixed 8px — is what actually pushes
 * the whole action block flush to the bottom of every card, lining the
 * buttons up across a row regardless of how tall the title above them is. */
.woocommerce ul.products li.product .button { margin-top: auto !important; align-self: flex-start; }
.woocommerce span.onsale {
  position: absolute; top: 12px !important; left: 12px !important; right: auto !important; z-index: 2;
  font-size: 11px !important; font-weight: 700; color: #fff; padding: 3px 10px !important;
  border-radius: 12px !important; background: var(--gta-orange) !important;
  min-height: 0 !important; min-width: 0 !important; line-height: 1.6 !important; margin: 0 !important;
}
/* Specials shelf (gta-specials.php): the badge names the reason, one colour each. */
.woocommerce span.onsale.gta-special-clearance    { background: var(--gta-orange) !important; }
.woocommerce span.onsale.gta-special-overstock    { background: var(--gta-navy) !important; }
.woocommerce span.onsale.gta-special-discontinued { background: var(--gta-gray) !important; }
.gta-specials-intro { color: var(--gta-navy); font-size: 14px; margin: 0 0 14px; }
.gta-specials-intro .gta-specials-counts { color: var(--gta-gray); }
.woocommerce .woocommerce-result-count { color: var(--gta-gray); font-size: 13px; margin-top: 6px !important; }
.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--gta-field-line); border-radius: 6px; padding: 8px 10px;
  font-family: var(--gta-font); font-size: 13px; color: var(--gta-navy);
}

/* ---------- WooCommerce: buttons ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #place_order,
.wc-block-components-button, .woocommerce-message .button, .woocommerce-Button {
  background-color: var(--gta-orange) !important; color: #fff !important;
  border: none !important; border-radius: 22px !important; font-weight: 700 !important;
  font-family: var(--gta-font) !important; padding: 11px 24px !important; line-height: 1.3 !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #place_order:hover { background-color: var(--gta-orange-dark) !important; }
.woocommerce a.button.disabled, .woocommerce button.button:disabled { opacity: .55; }

/* ---------- WooCommerce: single product ---------- */
.woocommerce div.product .product_title { color: var(--gta-navy); font-weight: 800; font-size: 28px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--gta-navy) !important; font-weight: 800; font-size: 22px; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--gta-slate); }
.woocommerce div.product .product_meta { color: var(--gta-gray); font-size: 13px; }
.woocommerce div.product .product_meta a { color: var(--gta-orange); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--gta-navy); }
.woocommerce div.product form.cart .quantity .qty {
  border: 1px solid var(--gta-field-line); border-radius: 6px; padding: 9px 6px; font-family: var(--gta-font);
}
.woocommerce div.product form.cart div.quantity { margin-right: 10px; }
/* −/+ stepper around every Woo quantity input (product page + cart) */
.woocommerce .quantity { display: inline-flex; align-items: stretch; gap: 4px; }
.woocommerce .quantity .qty { text-align: center; width: 64px; -moz-appearance: textfield; }
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gta-qty-btn { border: 1px solid var(--gta-field-line); background: var(--gta-band); color: var(--gta-navy);
  font-size: 17px; font-weight: 800; line-height: 1; width: 38px; border-radius: 6px; cursor: pointer; }
.gta-qty-btn:hover { background: var(--gta-orange); border-color: var(--gta-orange); color: #fff; }
.woocommerce div.product .related.products > h2, .woocommerce .up-sells > h2 {
  font-size: 26px; font-weight: 800; color: var(--gta-navy); margin: 52px 0 4px;
}
/* description typography: readable paragraphs, lists, and specs */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce-Tabs-panel--description {
  font-size: 15px; line-height: 1.75; color: var(--gta-slate); max-width: 78ch;
}
.woocommerce-Tabs-panel--description p { margin: 0 0 14px; }
.woocommerce div.product .woocommerce-product-details__short-description ul,
.woocommerce-Tabs-panel--description ul { margin: 0 0 14px 4px; padding-left: 20px; list-style: disc; }
.woocommerce div.product .woocommerce-product-details__short-description li,
.woocommerce-Tabs-panel--description li { margin-bottom: 6px; }
.woocommerce-Tabs-panel--description strong { color: var(--gta-navy); }
.woocommerce-Tabs-panel--description h2, .woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--description h4 { color: var(--gta-navy); margin: 20px 0 10px; }
.woocommerce-Tabs-panel--description table { border-collapse: collapse; margin: 0 0 16px; }
.woocommerce-Tabs-panel--description table td, .woocommerce-Tabs-panel--description table th {
  border: 1px solid var(--gta-line); padding: 7px 12px; font-size: 13.5px;
}

/* Brands directory page (card 21): list, not image blocks */
.tax-product_cat.term-brands ul.products,
.tax-product_cat.term-brands .woocommerce-result-count,
.tax-product_cat.term-brands .woocommerce-ordering,
.tax-product_cat.term-brands .woocommerce-pagination { display: none !important; }
.gta-brand-directory {
  columns: 4 200px; column-gap: 34px; margin: 18px 0 30px; max-width: 1100px;
}
.gta-brand-directory a {
  display: block; padding: 7px 0; font-size: 14.5px; font-weight: 600;
  color: var(--gta-navy); border-bottom: 1px solid #eef2f6; break-inside: avoid;
}
.gta-brand-directory a:hover { color: var(--gta-orange); }
.gta-brand-directory a span { color: #8fa1af; font-weight: 400; font-size: 12.5px; }

/* backorder disclaimer (card 28) */
.gta-backorder-note {
  padding: .7em 1em; border-left: 4px solid #d9a400; background: #fffaef;
  font-size: 13px; color: #6b5a00; margin: 6px 0 14px; max-width: 60ch;
}

/* ---------- WooCommerce: notices ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--gta-orange) !important; background: var(--gta-band) !important;
  color: var(--gta-navy) !important; font-family: var(--gta-font);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--gta-orange) !important; }
.woocommerce-error { border-top-color: #B42318 !important; }
/* The error notice is a <ul>; a list padding rule left it at 22px where the
   info/message notices sit at 3.5em, so the icon overlapped the first word
   (Val, 2026-09-02, test report item 4). Same inset as the other notices. */
.woocommerce-error { padding-left: 3.5em !important; }
.woocommerce-error li { padding: 0; margin: 0 0 8px; list-style: none; }

/* ---------- WooCommerce: forms / cart / checkout / account ---------- */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container--default .select2-selection--single {
  border: 1px solid var(--gta-field-line) !important; border-radius: 6px !important;
  padding: 11px 14px; font-size: 14px; font-family: var(--gta-font); background: #fff; height: auto;
}
.woocommerce form .form-row label { font-size: 12px; font-weight: 700; color: var(--gta-navy); }
.woocommerce table.shop_table { border: 1px solid var(--gta-card-line); border-radius: 8px; font-size: 14px; }
.woocommerce table.shop_table th { color: var(--gta-navy); font-weight: 800; }
.woocommerce-cart table.cart img { width: 64px; }
/* Val, 2026-09-20 item 4 — the product number and the buyer's own number under
 * a cart / checkout line. WooCommerce renders them in the same <dl class="variation">
 * it uses for attributes, so this styles the block once for both. */
.woocommerce table.shop_table dl.variation { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--gta-slate); }
.woocommerce table.shop_table dl.variation dt { float: left; clear: left; font-weight: 700; margin: 0 5px 0 0; }
.woocommerce table.shop_table dl.variation dd { margin: 0; }
.woocommerce table.shop_table dl.variation dd p { margin: 0; }
/* The same line on an order view (order-received, My Account → view order).
 * WooCommerce prints "Your item #" immediately below it from its own
 * <ul class="wc-item-meta">, so that list is matched to this line — otherwise
 * the pair reads as two unrelated notes, one indented and a size larger.
 * Scoped to the customer's order table: the admin screen and the e-mails
 * (which carry their own inline styles) are untouched. */
.gta-order-item-sku { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--gta-slate); }
.gta-order-item-sku-label { font-weight: 700; }
.woocommerce-table--order-details ul.wc-item-meta {
  list-style: none; margin: 2px 0 0; padding: 0;
  font-size: 12px; line-height: 1.5; color: var(--gta-slate);
}
.woocommerce-table--order-details ul.wc-item-meta li { margin: 0; }
.woocommerce-table--order-details ul.wc-item-meta li p { display: inline; margin: 0; font-size: 12px; }
.woocommerce-table--order-details ul.wc-item-meta strong.wc-item-meta-label { float: none; margin: 0 4px 0 0; font-weight: 700; }
/* "Remove all products from cart" — secondary and destructive, never the call
 * to action. It sits beside "Update cart", so it must not read as a peer of it. */
.woocommerce .cart .button.gta-empty-cart,
.woocommerce .cart input.button.gta-empty-cart {
  background: transparent !important; color: #A62B1F !important;
  border: 1px solid #D8A9A3 !important; box-shadow: none !important;
  font-weight: 600; padding: 9px 16px; margin-right: 10px;
}
.woocommerce .cart .button.gta-empty-cart:hover { background: #FBEFEE !important; color: #8C2118 !important; border-color: #A62B1F !important; }
/* Val, 2026-09-21 — "Arrange" (sort / group the cart by category, and clear it).
 * A row of plain POST buttons: it has to work with scripting off, so no links
 * that change state and no JavaScript anywhere in the control. */
.gta-cart-arrange {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px; font-size: 13px; color: var(--gta-slate);
}
.gta-cart-arrange-label { font-weight: 700; color: var(--gta-navy); }
.gta-cart-arrange .gta-arrange-opt {
  background: #fff; border: 1px solid var(--gta-card-line); border-radius: 999px;
  padding: 6px 14px; font: inherit; color: var(--gta-slate); cursor: pointer;
}
.gta-cart-arrange .gta-arrange-opt:hover { border-color: var(--gta-orange); color: var(--gta-navy); }
.gta-cart-arrange .gta-arrange-opt.is-active {
  background: var(--gta-navy); border-color: var(--gta-navy); color: #fff; font-weight: 700;
}
.gta-cart-arrange .gta-arrange-clear {
  background: none; border: 0; padding: 6px 4px; font: inherit;
  color: var(--gta-orange); text-decoration: underline; cursor: pointer;
}
/* A category heading row inside the cart table. It carries no form control, so
 * "Update cart", the remove links and "Remove all products from cart" are
 * untouched by it. */
.woocommerce table.cart tr.gta-cart-group th {
  background: var(--gta-navy); color: #fff; text-align: left;
  padding: 9px 16px; font-size: 13px; font-weight: 800; letter-spacing: .02em;
}
.woocommerce table.cart tr.gta-cart-group-sub th {
  background: #EEF3F8; color: var(--gta-navy);
  padding: 7px 16px 7px 30px; font-size: 12px; font-weight: 700;
}
/* The subtotal row closing each department in "Grouped by category" (Val, 2026-09-30). */
.woocommerce table.cart tr.gta-cart-group-total td {
  background: #FFF6EF; color: var(--gta-navy); font-weight: 800; font-size: 13px;
  padding: 9px 16px; border-top: 2px solid var(--gta-orange);
}
.woocommerce table.cart tr.gta-cart-group-total td:first-child { text-align: right; }
/* The UPC barcode on the product page, signed-in users only (Val, 2026-09-30). */
.gta-upc { display: block; margin-top: 14px; }
.gta-upc .gta-upc-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gta-slate-2); margin-bottom: 4px; }
.gta-upc .gta-upc-svg { display: block; max-width: 100%; height: auto; background: #fff; }
.gta-upc .gta-upc-empty { font-size: 13px; color: var(--gta-slate-2); }
/* Favorites: a picture on every row (Val, 2026-09-30). */
.gta-fav-table td.gta-fav-img, .gta-fav-table th.gta-fav-img { width: 72px; }
.gta-fav-table td.gta-fav-img img { width: 60px; height: 60px; object-fit: contain; background: #fff; border-radius: 6px; display: block; }
/* The "choose an option" panel above the cart (Val, 2026-09-30). */
.gta-pv { border: 2px solid var(--gta-orange); border-radius: 10px; padding: 16px 18px; margin: 0 0 22px; background: #FFF9F4; }
.gta-pv h3 { margin: 0 0 4px; font-size: 17px; color: var(--gta-navy); }
.gta-pv p.gta-pv-note { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #8A2A12; }
.gta-pv-row { display: grid; grid-template-columns: 56px 1fr minmax(220px, 320px) 80px auto auto; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid #F3E3D5; }
.gta-pv-row img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 6px; }
.gta-pv-name { font-weight: 700; color: var(--gta-navy); }
.gta-pv-row select, .gta-pv-row input[type=number] { width: 100%; padding: 8px; border: 1px solid var(--gta-field-line); border-radius: 6px; }
.gta-pv-row select.gta-pv-missing { border-color: #A62B1F; box-shadow: 0 0 0 2px rgba(166,43,31,.18); }
.gta-pv-row .button { white-space: nowrap; }
.gta-pv-remove { background: none; border: 0; color: var(--gta-slate-2); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.gta-pv-proceed-blocked { display: block; text-align: center; padding: 14px; border-radius: 8px; background: #E9EEF3; color: var(--gta-slate); font-weight: 700; }
/* The no-JavaScript confirmation panel. */
.gta-cart-confirm {
  border: 2px solid #A62B1F; border-left-width: 6px; border-radius: 8px;
  background: #FBEFEE; padding: 16px 20px; margin: 0 0 22px; color: var(--gta-navy);
}
.gta-cart-confirm p { margin: 0 0 8px; font-size: 14px; }
.gta-cart-confirm form { margin: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gta-cart-confirm .button.gta-empty-cart-confirm { background: #A62B1F !important; color: #fff !important; }
.gta-cart-confirm .gta-empty-cart-cancel { font-size: 14px; font-weight: 600; }
.woocommerce-cart .cart-collaterals .cart_totals h2, .woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .woocommerce-additional-fields > h3 {
  color: var(--gta-navy); font-weight: 800;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--gta-card-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 11px 4px; font-weight: 600; font-size: 14px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--gta-orange); }
.woocommerce-account .woocommerce-MyAccount-content { color: var(--gta-slate); }
.woocommerce-account h1.gta-band-title { text-transform: capitalize; }
.woocommerce .woocommerce-form-login, .woocommerce .woocommerce-form-register {
  border: 1px solid var(--gta-card-line) !important; border-radius: 10px !important;
}
/* My Account > Orders: View / Reorder (Val, 2026-09-20, item 5) — the global
 * pill-button padding (11px 24px, from "WooCommerce: buttons" above) made the
 * two action buttons big enough to touch with zero gap: side by side on a
 * phone where the Actions cell is wide, stacked directly on top of each
 * other on desktop where the Actions column is narrow. Compact padding/font
 * here only, plus a real margin on every side so there is always a gap
 * whichever way the buttons wrap; :last-child drops the trailing gap. */
.woocommerce-MyAccount-orders .woocommerce-orders-table__cell-order-actions a.button {
  padding: 6px 14px !important; font-size: 12.5px !important; border-radius: 16px !important;
  min-height: 32px; margin: 0 8px 8px 0; display: inline-flex; align-items: center;
  white-space: nowrap;
}
.woocommerce-MyAccount-orders .woocommerce-orders-table__cell-order-actions a.button:last-child { margin-right: 0; }

/* ---------- B2B price gate ---------- */
a.gta-price-login {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--gta-orange);
  border: 1px solid var(--gta-orange); border-radius: 14px; padding: 5px 12px;
}
a.gta-price-login:hover { background: var(--gta-orange); color: #fff; }
.gta-price-pending { font-size: 12px; color: var(--gta-gray); font-style: italic; }

/* ---------- Login page: open-an-account pitch ----------
   It sits BELOW the sign-in form since 2026-09-06 (RULES 3.20), so the gap it
   needs is above it, not under it. */
.gta-register-pitch {
  background: var(--gta-band); border-radius: 12px; padding: 30px 34px; margin: 34px 0 0;
}
.gta-register-pitch h2 {
  font-size: 24px; font-weight: 800; color: var(--gta-navy); margin: 0 0 14px; text-transform: uppercase;
}
.gta-register-pitch h3 { font-size: 16px; font-weight: 800; color: var(--gta-navy); margin: 18px 0 8px; }
.gta-register-pitch p, .gta-register-pitch ol { font-size: 15px; line-height: 1.75; color: var(--gta-slate); margin: 0 0 12px; }
.gta-register-pitch ol { padding-left: 22px; }
.gta-register-pitch li { margin-bottom: 6px; }
.gta-register-pitch a { color: var(--gta-orange); font-weight: 700; }

/* ---------- Login page: how wholesale registration works (RULES 3.20) ----------
   Val's steps, printed under the "Apply for a wholesale account" line by
   gta-registration.php. Since 2026-09-13 BOTH sit inside the grey pitch box
   (the theme opens it at priority 5 and closes it at 30); the old
   "Ready to open an account?" copy is gone (Val, answering the 6 September
   question A). */
.gta-register-pitch .gta-apply-cta { margin-top: 0 !important; font-size: 17px; }
.gta-login-steps { margin: 26px 0 0; }
.gta-register-pitch .gta-login-steps { margin-top: 18px; }
.gta-login-steps h2 {
  font-size: 20px; font-weight: 800; color: var(--gta-navy); margin: 0 0 12px;
}
.gta-login-steps p, .gta-login-steps ol, .gta-login-steps ul {
  font-size: 15px; line-height: 1.75; color: var(--gta-slate); margin: 0 0 12px;
}
.gta-login-steps ol, .gta-login-steps ul { padding-left: 22px; }
.gta-login-steps li { margin-bottom: 6px; }
.gta-login-steps a { color: var(--gta-orange); font-weight: 700; }

/* ---------- WooCommerce: pagination ---------- */
.woocommerce nav.woocommerce-pagination ul { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li { border: none !important; margin: 0 3px; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 6px; padding: 9px 14px; font-weight: 700; color: var(--gta-navy);
}
.woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--gta-orange); color: #fff;
}

/* ---------- Posts fallback ---------- */
.gta-postlist article { border-bottom: 1px solid var(--gta-card-line); padding: 22px 0; }
.gta-postlist h2 { font-size: 20px; margin: 0 0 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .gta-promos { grid-template-columns: repeat(2, 1fr); }
  .gta-cattiles { grid-template-columns: repeat(3, 1fr); }
  .gta-cats9 { gap: 14px; }
  .gta-cat9 { flex-direction: column; text-align: center; gap: 10px; padding: 18px 12px; }
  .gta-cat9-go { display: none; }
  .gta-brandtiles { grid-template-columns: repeat(3, 1fr); }
  .gta-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .gta-masthead { gap: 14px; }
  .gta-search { order: 3; flex-basis: 100%; max-width: none; }
  .gta-search-scope { display: none; }
  .gta-cat-btn { white-space: nowrap; }
  .gta-navbar { padding: 0 12px; overflow-x: auto; flex-wrap: nowrap; }
  .gta-nav { flex-wrap: nowrap; }
  /* narrow screens: tabs keep their natural width and the bar scrolls */
  .gta-nav > a, .gta-cat-menu { flex: 0 0 auto; }
  .gta-nav a, .gta-nav-right a, .gta-cat-btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
  /* hero: this block used to win over the 860px rules above with height:auto +
     min-height 420, which squeezed the new stacked slide onto the indicators
     (2026-09-05). Kept in step with the hero block. */
  .gta-hero { height: 600px; }
  .gta-slide { position: absolute; flex-direction: column; justify-content: center; text-align: center; padding: 20px 6% 64px; gap: 18px; }
  .gta-slide-img { width: 170px; height: 170px; }
  .gta-slide-img--photo { width: 240px; height: 178px; }
  .gta-slide-copy h2 { font-size: 28px; }
  .gta-contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .gta-band { padding: 20px 24px; }
  .gta-container { padding: 0 20px; }
}
@media (max-width: 600px) {
  .gta-topbar { justify-content: center; text-align: center; }
  .gta-promos, .gta-cattiles { grid-template-columns: repeat(2, 1fr); }
  .gta-cats9 { grid-template-columns: 1fr; gap: 10px; }
  .gta-cat9 { flex-direction: row; text-align: left; gap: 14px; padding: 12px 16px; }
  .gta-cat9-icon { width: 54px; height: 54px; }
  .gta-cat9-icon img { width: 36px; height: 36px; }
  .gta-cat9-go { display: block; }
  .gta-brandtiles { grid-template-columns: repeat(2, 1fr); }
  .gta-footer-grid { grid-template-columns: 1fr; gap: 26px; padding: 36px 24px 28px; }
  .gta-form-grid { grid-template-columns: 1fr; }
  .gta-footer-legal { padding-left: 24px; padding-right: 24px; }
  /* Gil's chat launcher is fixed at bottom:24px right:24px and is 60px tall, so
   * it covers the last ~84px of the viewport. Keep the credit clear of it when
   * the page is scrolled to the very bottom on a phone. */
  .gta-footer-credit { padding: 0 24px 96px; }
  .gta-cart-confirm form { gap: 12px; }
  /* shop_table_responsive turns every tr and td into a block at this width, so
   * the heading row's <th> has to be told to fill it too — left as a table-cell
   * it renders at its content width inside a block row. */
  .woocommerce table.cart tr.gta-cart-group { display: block; width: 100%; }
  .woocommerce table.cart tr.gta-cart-group th { display: block; width: 100%; box-sizing: border-box; }
  .woocommerce table.cart tr.gta-cart-group-total { display: flex; justify-content: space-between; width: 100%; }
  .woocommerce table.cart tr.gta-cart-group-total td { display: block; border: 0; }
  .woocommerce table.cart tr.gta-cart-group-total td::before { content: none !important; }
  .gta-pv-row { grid-template-columns: 48px 1fr; }
  .gta-pv-row img { width: 48px; height: 48px; }
  .gta-pv-row select, .gta-pv-row .gta-pv-qty, .gta-pv-row .button { grid-column: 1 / -1; }
  .gta-cart-arrange { font-size: 12px; gap: 6px; }
  .gta-cart-arrange .gta-arrange-opt { padding: 6px 11px; }
}

/* ---------- Wholesale account application ----------
 * The form markup in gta-registration.php uses WooCommerce's form-row / input-text
 * classes, but /wholesale-application/ is an ordinary page: it carries no
 * .woocommerce wrapper, so every rule in the WooCommerce forms block above misses
 * it and the browser fell back to default controls. This is the site's single most
 * important conversion page, so it gets its own block rather than a wrapper hack. */
.gta-application { max-width: 760px; }
.gta-application-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px;
  border: 1px solid var(--gta-card-line); border-radius: 10px;
  padding: 26px 26px 30px; background: #fff;
}
.gta-application-form > *,
.gta-application .form-row-wide,
.gta-application fieldset,
.gta-application .form-disclaimer,
.gta-application h2, .gta-application h4, .gta-application h5 { grid-column: 1 / -1; }
.gta-application .form-row-first { grid-column: 1; }
.gta-application .form-row-last  { grid-column: 2; }

.gta-application .form-row { margin: 0 0 16px; }
.gta-application label {
  display: block; font-size: 12px; font-weight: 700; color: var(--gta-navy);
  margin-bottom: 5px; letter-spacing: .01em;
}
.gta-application abbr.required { color: var(--gta-orange); border: 0; text-decoration: none; }
.gta-application input.input-text,
.gta-application input[type="text"], .gta-application input[type="email"],
.gta-application input[type="tel"],  .gta-application input[type="url"],
.gta-application select, .gta-application textarea {
  width: 100%; box-sizing: border-box; background: #fff;
  border: 1px solid var(--gta-field-line); border-radius: 6px;
  padding: 11px 14px; font-size: 14px; font-family: var(--gta-font); color: var(--gta-navy);
}
.gta-application input:focus, .gta-application select:focus, .gta-application textarea:focus {
  outline: none; border-color: var(--gta-orange); box-shadow: 0 0 0 3px rgba(243,108,33,.14);
}
.gta-application input[type="file"] {
  width: 100%; box-sizing: border-box; font-size: 13px; font-family: var(--gta-font);
  border: 1px dashed var(--gta-field-line); border-radius: 6px; padding: 12px 14px; background: var(--gta-band);
}
.gta-application .description { display: block; margin-top: 6px; font-size: 12px; color: var(--gta-slate-2); }

.gta-application h2.wssection-title {
  margin: 4px 0 18px; font-size: 20px; font-weight: 800; color: var(--gta-navy);
  padding-bottom: 10px; border-bottom: 2px solid var(--gta-band);
}
.gta-application fieldset {
  border: 1px solid var(--gta-field-line); border-radius: 8px;
  padding: 14px 16px 12px; margin: 0 0 18px; background: var(--gta-band);
}
.gta-application fieldset legend {
  padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--gta-navy);
}
.gta-application fieldset label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--gta-slate); margin: 0 0 6px;
}
.gta-application fieldset input[type="checkbox"],
.gta-application fieldset input[type="radio"],
.gta-application .form-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gta-orange); flex: none; }
.gta-application .form-row label:has(input[type="checkbox"]) {
  display: flex; align-items: flex-start; gap: 9px; font-size: 14px; font-weight: 500; color: var(--gta-slate);
}

/* The agreement, delivery-minimum chart and upload notes: reference text the
 * applicant is agreeing to, so it reads as prose, not as form furniture. */
.gta-application h4.form-disclaimer, .gta-application h5.form-disclaimer {
  margin: 20px 0 8px; font-size: 13px; font-weight: 800; color: var(--gta-navy);
  text-transform: uppercase; letter-spacing: .04em;
}
.gta-application p.form-disclaimer, .gta-application ul.form-disclaimer {
  font-size: 13px; line-height: 1.65; color: var(--gta-slate); margin: 0 0 9px;
}
.gta-application ul.form-disclaimer { padding-left: 20px; }

.gta-application button.button, .gta-application button[type="submit"] {
  margin-top: 6px; border: none; cursor: pointer; border-radius: 6px;
  background: var(--gta-orange); color: #fff; font-family: var(--gta-font);
  font-weight: 700; font-size: 15px; padding: 13px 30px;
}
.gta-application button.button:hover, .gta-application button[type="submit"]:hover { background: var(--gta-orange-dark); }

.gta-app-note, .gta-app-done {
  border: 1px solid var(--gta-card-line); border-left: 4px solid var(--gta-orange);
  border-radius: 8px; padding: 18px 22px; background: var(--gta-band); color: var(--gta-slate);
}
.gta-app-done h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--gta-navy); }

@media (max-width: 640px) {
  .gta-application-form { grid-template-columns: 1fr; padding: 18px 16px 22px; }
  .gta-application .form-row-first, .gta-application .form-row-last { grid-column: 1; }
}

/* ---- My Account: the selected tab is unmistakable (Val, 2026-08-29) ---- */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { border-left: 4px solid var(--gta-orange); background: #FFF4EC; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--gta-navy); font-weight: 800; padding-left: 10px; }

/* ---- Favorites hearts (gta-favorites.php) ---- */
.gta-fav-btn { display: inline-flex; align-items: center; gap: .35em; background: none; border: 0; padding: .3em .2em; cursor: pointer; color: var(--gta-slate-2); font-size: 13px; font-weight: 600; }
.gta-fav-btn svg path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.gta-fav-btn.is-fav { color: var(--gta-orange); }
.gta-fav-btn.is-fav svg path { fill: currentColor; stroke: currentColor; }
.gta-fav-btn:hover { color: var(--gta-orange-dark); }
ul.products li.product .gta-fav-btn { margin-top: .25em; }
.gta-fav-table input[type="checkbox"], #gta-oh-all, .gta-oh-pick { width: 16px; height: 16px; }

/* ---- Dashboard navigation tiles (Val item 9) ---- */
.gta-dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 1em 0; }
.gta-dash-tile { display: flex; flex-direction: column; gap: .3em; padding: 16px 18px; border: 1px solid var(--gta-card-line, #e3e8ef); border-radius: 8px; background: #fff; transition: box-shadow .15s, border-color .15s; }
.gta-dash-tile:hover { border-color: var(--gta-orange); box-shadow: 0 2px 10px rgba(14, 42, 71, .08); }
.gta-dash-tile strong { color: var(--gta-navy); font-size: 15px; }
.gta-dash-tile span { color: var(--gta-slate-2); font-size: 12.5px; line-height: 1.35; }

/* ---------- Page not found: "Fish Overboard!" (Val, 2026-09-29; theme 404.php) ---------- */
.gta-oops { text-align: center; padding-top: 56px; padding-bottom: 64px; }
.gta-oops-port { width: 240px; height: 240px; margin: 0 auto 28px; border-radius: 50%; overflow: hidden;
  border: 8px solid #fff; box-shadow: 0 0 0 6px var(--gta-orange), 0 12px 28px rgba(14, 42, 71, .25); }
.gta-oops-port img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gta-oops-title { margin: 0 0 18px; font-size: 44px; font-weight: 800; color: var(--gta-navy); line-height: 1.1; }
.gta-oops-lead { max-width: 640px; margin: 0 auto 18px; font-size: 18px; line-height: 1.6; color: var(--gta-slate); }
.gta-oops-todo { max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.6; color: var(--gta-slate); }
.gta-oops-todo strong { color: var(--gta-navy); }
.gta-oops a { color: var(--gta-orange); font-weight: 700; }
.gta-oops a:hover { color: var(--gta-orange-dark); }
@media (max-width: 600px) { .gta-oops-title { font-size: 34px; } .gta-oops-port { width: 180px; height: 180px; } }

/* ---------- Product page: the "no photo" picture fits the gallery (Val, 2026-09-29: "they are cut off, scale to fit
   the entire image"). The Customizer's Additional CSS (NPASupport, 2026-09-03 — a hand setting, left as it is) caps the
   gallery at 400 px and fits `.woocommerce-product-gallery__image img` inside it; a product with no picture renders
   its image in `.woocommerce-product-gallery__image--placeholder` instead, which that rule does not match, so the
   square picture stood 582 px tall and was cut at 400. Same fit, for the placeholder. ---------- */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image--placeholder img {
  max-height: 400px !important; width: auto !important; object-fit: contain !important; margin: 0 auto;
}

/* ---------- Phones and tablets (Val, 2026-10-01) ----------
   One pass over the storefront at 390 / 768 / 1024 px. Kept at the end of the
   file so it wins over the per-section rules above without !important, except
   where a plugin's own id selector has to be beaten. */

/* 1. The menu button and the tab bar. Up to 900px the green bar is hidden behind
      the button beside the logo and opens as a stacked list (body.gta-nav-open,
      set by gta.js). The category drop-down is laid out IN that list — nothing
      floats, so nothing can be clipped. (2026-10-01, first pass: the bar scrolled
      sideways here and clipped the drop-down; that is the iPhone bug Val found.) */
.gta-burger { display: none; }
@media (max-width: 900px) {
  .gta-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; flex: none;
    width: 46px; height: 46px; padding: 0 11px; margin-left: auto;
    border: 1.5px solid #c9d6e2; border-radius: 10px; background: #fff; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .gta-burger span { display: block; height: 2.5px; border-radius: 2px; background: var(--gta-navy); transition: transform .18s, opacity .18s; }
  body.gta-nav-open .gta-burger { border-color: var(--gta-orange); }
  body.gta-nav-open .gta-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.gta-nav-open .gta-burger span:nth-child(2) { opacity: 0; }
  body.gta-nav-open .gta-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  /* tablet: logo · account links · button on one row; the search takes the next */
  .gta-burger { order: 2; margin-left: 0; }
  .gta-masthead-links { order: 1; margin-left: auto; }

  .gta-navbar { display: none; padding: 0; overflow: visible; flex-wrap: wrap; }
  body.gta-nav-open .gta-navbar { display: block; }
  .gta-nav { flex-direction: column; align-items: stretch; }
  .gta-nav > a, .gta-cat-btn {
    flex: none; justify-content: flex-start; text-align: left; white-space: normal;
    padding: 15px 20px; font-size: 15px; border-top: 1px solid rgba(255,255,255,.14);
  }
  .gta-nav > a:first-child { border-top: none; }
  .gta-nav > a.is-current, .gta-cat-btn.is-current { border-bottom: none; box-shadow: inset 4px 0 0 var(--gta-orange); }
  .gta-cat-menu { display: block; flex: none; position: static; }
  .gta-cat-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; }
  .gta-cat-menu.open .gta-caret { transform: rotate(180deg); }
  .gta-caret { font-size: 13px; }
  .gta-cat-drop, .gta-cat-menu.open .gta-cat-drop { position: static; flex-direction: column; gap: 0; background: #fff; }
  .gta-cat-menu.open .gta-cat-drop { display: block; }
  .gta-cat-deptlist { flex: none; width: auto; max-height: none; overflow: visible; box-shadow: none; border-radius: 0; padding: 0; }
  .gta-cat-dept { padding: 14px 20px 14px 32px; font-size: 15px; }
  .gta-cat-dept.active .gta-cat-arrow { transform: rotate(90deg); }
  .gta-cat-megawrap {
    width: auto; min-width: 0; max-width: none; max-height: none; overflow: visible;
    box-shadow: none; border-radius: 0; background: #f6f9fb; padding: 14px 20px 18px 32px;
    border-top: 1px solid #eef2f6; margin-top: 0 !important;
  }
  .gta-mega-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .gta-mega-group { min-width: 0; overflow-wrap: break-word; }
  .gta-mega-link { padding: 7px 0; }
  .gta-nav-right { margin: 0; padding: 6px 20px 14px; border-top: 1px solid rgba(255,255,255,.14); }

  /* 1b. A product page said its name twice — in the banner and again above the
         price. On a small screen the banner keeps the breadcrumb only. */
  .single-product .gta-band .gta-band-title { display: none; }
}
/* 1c. Gil's chat launcher: 60px at 24px from the corner covers a lot of a phone.
       Smaller and tighter there, and out of the way while the menu is open. */
@media (max-width: 600px) {
  /* phone: logo · button, then the account links on their own row */
  .gta-burger { order: 0; margin-left: auto; }
  .gta-masthead-links { order: 1; margin-left: 0; flex-basis: 100%; justify-content: flex-end; }
  /* Val, 2026-10-01 (her iPhone screenshot): "Join Now / Sign In" sat alone at the right
     of its own row with the left half empty. Logo + links + button need ~384px and an
     iPhone is 375–393, so they cannot share the logo's row; the row is two equal buttons
     instead. Signed in, My Account and Cart take the same shape. */
  .gta-masthead { row-gap: 12px; }
  .gta-masthead-links { gap: 10px; }
  .gta-join-signin { display: flex; flex: 1 1 auto; gap: 10px; }
  .gta-join-sep { display: none; }
  .gta-masthead-links a.gta-join, .gta-masthead-links a.gta-signin, .gta-masthead-links > a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 700; text-align: center;
  }
  .gta-masthead-links a.gta-signin, .gta-masthead-links > a { border: 1.5px solid #c9d6e2; background: #fff; }
  .gta-masthead-links > a .gta-account-hint { display: none; }
  .gta-mega-groups { grid-template-columns: 1fr; gap: 14px; } /* one column on a phone: a long heading ran off the edge in two */
  #gta-chat-btn { width: 48px !important; height: 48px !important; right: 12px !important; bottom: 12px !important; }
  #gta-chat-btn svg { width: 22px; height: 22px; }
}
body.gta-nav-open #gta-chat-btn { display: none !important; }

@media (max-width: 900px) {
  /* 2. Shop filters fold behind their heading (the class comes from gta.js). */
  .gta-shop-filters.gsf-js .gsf-title {
    display: flex; justify-content: space-between; align-items: center; margin: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .gta-shop-filters.gsf-js .gsf-title::after { content: "\25BE"; color: var(--gta-orange); font-size: 18px; }
  .gta-shop-filters.gsf-js.gsf-open .gsf-title { margin-bottom: 14px; }
  .gta-shop-filters.gsf-js.gsf-open .gsf-title::after { content: "\25B4"; }
  .gta-shop-filters.gsf-js:not(.gsf-open) .gsf-block { display: none; }
  .gta-shop-filters.gsf-js { padding-bottom: 18px; }
  .gta-shop-filters.gsf-js.gsf-open { padding-bottom: 2px; }
  .gsf-cat-dept { padding: 12px 12px; font-size: 14px; }
  .gsf-fly-link, .gsf-fly-all { padding-top: 9px; padding-bottom: 9px; font-size: 14px; }

  /* 3. A table wider than the screen scrolls inside itself instead of dragging
        the whole page sideways (My Account → Order History did). */
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table:not(.shop_table_responsive) {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
}

/* 4. iPhone and iPad zoom the whole page when a field under 16px takes focus.
      Touch screens get 16px in every text field; the layout does not change. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="password"], input[type="url"], input[type="date"], input:not([type]), select, textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 600px) {
  /* 5. My Account: ten full-width rows above the content become two columns. */
  .woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 18px; }
}

/* The home banner takes a sideways swipe (gta.js); up-and-down still scrolls the page. */
.gta-hero { touch-action: pan-y; }

/* My Account greeting, "a little bit more prominent" (Val, 2026-10-01): larger, in a tinted panel, the name in orange. */
.woocommerce-account .woocommerce-MyAccount-content p.gta-dash-greeting {
  margin: 0 0 20px; padding: 16px 20px; border-left: 5px solid var(--gta-orange); border-radius: 10px;
  background: #FFF4EC; color: var(--gta-navy); font-size: 21px; font-weight: 700; line-height: 1.35;
}
.gta-dash-greeting .gta-dash-name { color: var(--gta-orange); font-weight: 800; }
@media (max-width: 600px) { .woocommerce-account .woocommerce-MyAccount-content p.gta-dash-greeting { font-size: 18px; padding: 14px 16px; } }

/* CONTINUE SHOPPING in the cart's button row (Val, 2026-10-01; gta-recent-front.php). An <a>, so it needs the
   centring and the spacing a <button> gets for free; on a phone the three buttons stack with a gap between them. */
.woocommerce .cart td.actions .button.gta-continue-shopping { display: inline-block; text-align: center; margin: 0 8px; vertical-align: top; }
@media (max-width: 768px) {
  .woocommerce .cart td.actions .button.gta-continue-shopping { display: block; width: 100%; box-sizing: border-box; margin: 10px 0; }
  .woocommerce .cart td.actions .button.gta-empty-cart { margin-top: 0; }
}