/* ==========================================================================
   GoodsAxis — brand tokens
   ========================================================================== */
:root{
  --navy-dark:   #071D3D;
  --navy:        #0B2C56;
  --navy-light:  #1B4A85;
  --gray-900:    #2A2C30;
  --gray-700:    #48484A;
  --gray-500:    #6B7280;
  --gray-300:    #C6CAD1;
  --gray-100:    #F3F5F8;
  --bg:          #FFFFFF;
  --bg-alt:      #F5F7FA;
  --accent:      #E1592F;
  --accent-dark: #B8431F;
  --line:        #E4E8EE;
  --radius:      10px;
  --shadow-sm:   0 1px 3px rgba(11,44,86,0.08);
  --shadow-md:   0 6px 24px rgba(11,44,86,0.10);
  --container:   1200px;
  --font: 'Lexend', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--gray-900);
  background:var(--bg);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--navy); text-decoration:none; }
a:hover{ color:var(--accent); }
h1,h2,h3,h4{ font-family:var(--font); font-weight:600; line-height:1.25; color:var(--navy-dark); margin:0 0 .6em; }
h1{ font-size:clamp(1.9rem, 4vw, 2.7rem); }
h2{ font-size:clamp(1.5rem, 3vw, 2rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1em; color:var(--gray-700); }
ul{ margin:0 0 1em; padding-left:1.2em; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:64px 0; }
.section--alt{ background:var(--bg-alt); }
.section-head{ max-width:680px; margin:0 auto 40px; text-align:center; }
.section-head p{ color:var(--gray-500); }
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:2px solid transparent; cursor:pointer; transition:all .15s ease; line-height:1;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); color:#fff; }
.btn-outline{ background:transparent; border-color:var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; }
.btn-outline-light{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn-outline-light:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:.85rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  border-bottom:1px solid var(--line);
  background:#fff;
  position:sticky; top:0; z-index:100;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:16px 24px;
}
.site-logo img, .site-logo .custom-logo{ height:44px !important; width:auto !important; max-width:none; }
.site-logo{ flex:none; display:flex; align-items:center; }
.site-logo a{ display:flex; align-items:center; }

.main-nav{ flex:1; display:flex; justify-content:center; }
.main-nav ul{ display:flex; list-style:none; margin:0; padding:0; gap:26px; }
.main-nav li{ position:relative; }
.main-nav a{
  color:var(--navy-dark); font-weight:500; font-size:.96rem; padding:8px 0; position:relative;
  white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
}
.main-nav a:hover{ color:var(--accent); }

/* Dropdown submenu (e.g. "Company" grouping How It Works / About / Contact) */
.main-nav li.menu-item-has-children > a::after{
  content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); margin-top:-4px;
}
.main-nav ul ul{
  display:none; list-style:none; margin:0; padding:8px; gap:0; flex-direction:column;
  position:absolute; top:100%; left:0; min-width:180px; background:#fff;
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-md); z-index:50;
}
.main-nav li:hover > ul, .main-nav li:focus-within > ul{ display:flex; }
.main-nav ul ul a{ display:block; padding:8px 10px; border-radius:6px; white-space:nowrap; }
.main-nav ul ul a:hover{ background:var(--bg-alt); }

@media (max-width:900px){
  .main-nav ul ul{
    display:flex; position:static; border:none; box-shadow:none; padding:0 0 0 14px;
    background:none;
  }
  .main-nav li.menu-item-has-children > a::after{ display:none; }
}

.header-actions{ display:flex; align-items:center; gap:14px; flex:none; min-width:0; }
.inquiry-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem;
  color:var(--navy); padding:9px 16px; border:1.5px solid var(--navy); border-radius:999px;
  white-space:nowrap;
}
.inquiry-link:hover{ background:var(--navy); color:#fff; }
.inquiry-link-text-short{ display:none; }
.inquiry-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:.72rem; font-weight:700;
}

.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; flex:none; }
.menu-toggle span{ display:block; width:24px; height:2px; background:var(--navy-dark); margin:5px 0; }

/* Nav-drawer-only account link: hidden in the header bar's own row (it moves
   into the mobile nav drawer below 900px so the bar has room for the quote
   button + hamburger without overflowing). Needs the extra `.main-nav`
   ancestor in the selector to out-specificity the `.main-nav a` base rule
   above, which would otherwise win the cascade and force it visible. */
.main-nav .account-link--nav{ display:none; }

@media (max-width: 900px){
  /* Safety net: even after trimming the bar's contents below, flex-wrap keeps
     the logo/quote-button/hamburger row from forcing horizontal scroll on the
     page if content ever doesn't fit (long translations, very narrow devices). */
  .header-inner{ flex-wrap:wrap; row-gap:10px; }
  .site-logo img, .site-logo .custom-logo{ height:34px !important; }

  .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); padding:12px 24px 20px; }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:4px; }
  .main-nav a{ display:block; padding:10px 0; }
  .menu-toggle{ display:block; }

  /* Account link moves from the header bar into the nav drawer. Selectors
     need the `.main-nav`/`.header-actions` ancestor to out-specificity the
     `.main-nav a` / `.header-actions` base rules above (both `0,1,1`),
     which would otherwise win the cascade over a plain `.account-link--*`
     class selector (`0,1,0`) and leave the link visible/unstyled in the
     wrong place. */
  .header-actions .account-link--bar{ display:none; }
  .main-nav .account-link--nav{ display:block; border-top:1px solid var(--line); margin-top:8px; padding-top:14px; }
}

@media (max-width:480px){
  .header-inner{ padding:14px 16px; gap:10px; }
  .inquiry-link{ padding:8px 12px; font-size:.85rem; gap:6px; }
  .inquiry-link-text{ display:none; }
  .inquiry-link-text-short{ display:inline; }
}

/* Top strip */
.top-strip{
  background:var(--navy-dark); color:#cfe0f7; font-size:.82rem;
}
.top-strip .container{ display:flex; justify-content:space-between; align-items:center; padding:8px 24px; gap:16px; flex-wrap:wrap; }
.top-strip a{ color:#fff; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background:linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-light) 100%);
  color:#fff; padding:90px 0;
}
.hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr; grid-template-areas:"top form" "bottom form";
  gap:48px; align-items:center;
}
.hero-copy-top{ grid-area:top; }
.hero-form-card{ grid-area:form; }
.hero-copy-bottom{ grid-area:bottom; }
.hero h1{ color:#fff; }
.hero-lede{ color:#c9d8ee; font-size:1.1rem; max-width:52ch; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-trust{ display:flex; gap:28px; margin-top:40px; flex-wrap:wrap; }
.hero-trust div{ font-size:.85rem; color:#c9d8ee; }
.hero-trust strong{ display:block; color:#fff; font-size:1.4rem; font-weight:700; }
.hero-form-card{
  background:#fff; border-radius:16px; padding:28px; box-shadow:0 20px 50px rgba(0,0,0,.25);
}

@media (max-width:820px){
  .hero-inner{ grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "form" "bottom"; }
  .hero-inner > *{ min-width:0; }
  .hero-form-card{ margin:8px 0; }
  .hero-trust{ margin-top:28px; }
}

/* ==========================================================================
   General inquiry form — the site's primary conversion goal
   ========================================================================== */
.inquiry-form-title{ margin-bottom:4px; color:var(--navy-dark); }
.inquiry-form-sub{ color:var(--gray-500); font-size:.86rem; margin-bottom:18px; }
.hero-form-card .inquiry-form-sub{ margin-bottom:18px; }
.rfq-form--inline{ max-width:none; border:none; padding:0; border-radius:0; }
.inquiry-form-wrap--compact .field{ margin-bottom:14px; }
.inquiry-alert{
  border-radius:8px; padding:12px 14px; font-size:.88rem; margin-bottom:16px; font-weight:500;
}
.inquiry-alert--success{ background:#e8f6ee; color:#1a7a41; border:1px solid #bfe8cf; }
.inquiry-alert--error{ background:#fdecea; color:#b3261e; border:1px solid #f6c6c2; }

/* Contact page uses the same form, but on a light section */
.rfq-form{ text-align:left; }

/* ==========================================================================
   Catalog teaser — deliberately low-key, the inquiry form is the main CTA
   ========================================================================== */
.section--catalog-teaser{ padding:48px 0 72px; }
.catalog-teaser-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  margin-bottom:20px; flex-wrap:wrap;
}
.catalog-teaser-head h3{ margin:0; font-size:1.2rem; }
.cat-pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.cat-pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--bg-alt);
  border:1px solid var(--line); border-radius:999px; padding:8px 16px;
  font-size:.86rem; font-weight:500; color:var(--navy-dark);
}
.cat-pill:hover{ border-color:var(--navy); color:var(--navy); }
.cat-pill span{ color:var(--gray-500); font-size:.78rem; }

/* ==========================================================================
   Category grid
   ========================================================================== */
.cat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.cat-card{
  display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; text-align:left; transition:box-shadow .15s ease, transform .15s ease;
}
.cat-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.cat-card .cat-ico{
  width:46px; height:46px; border-radius:10px; background:var(--bg-alt); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:16px;
}
.cat-card h3{ font-size:1rem; margin-bottom:4px; }
.cat-card span{ font-size:.82rem; color:var(--gray-500); }
@media (max-width:960px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   How it works
   ========================================================================== */
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:step; }
.step{ position:relative; padding-top:10px; }
.step::before{
  counter-increment:step; content:counter(step);
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff;
  font-weight:700; margin-bottom:16px;
}
.step h3{ font-size:1.05rem; }
.step p{ font-size:.92rem; }
@media (max-width:820px){ .steps-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps-grid{ grid-template-columns:1fr; } }

/* Why us */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.why-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.why-card .cat-ico{ background:var(--bg-alt); }
@media (max-width:820px){ .why-grid{ grid-template-columns:1fr; } }

/* CTA band */
.cta-band{
  background:var(--navy-dark); color:#fff; border-radius:20px; padding:56px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; margin-bottom:6px; }
.cta-band p{ color:#c9d8ee; margin:0; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.woocommerce-breadcrumb{ font-size:.85rem; color:var(--gray-500); margin:0 0 16px; }
.woocommerce-breadcrumb a{ color:var(--gray-500); }
.woocommerce-breadcrumb a:hover{ color:var(--accent); }

/* ==========================================================================
   Shop / product archive
   ========================================================================== */
.shop-layout{ display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:start; }
.shop-main{ min-width:0; }

.category-nav{ position:sticky; top:96px; }
.category-nav-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px;
}
.category-nav-title{
  cursor:pointer; font-weight:600; color:var(--navy-dark); font-size:.95rem;
  list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.category-nav-title::-webkit-details-marker{ display:none; }
.category-nav-title::after{ content:'\2212'; color:var(--gray-500); font-weight:400; }
.category-nav-panel:not([open]) .category-nav-title::after{ content:'+'; }
.category-nav-list{ list-style:none; margin:14px 0 0; padding:0; max-height:60vh; overflow-y:auto; }
.category-nav-list li{ margin:0; }
.category-nav-list a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 0; color:var(--gray-700); font-size:.88rem; border-bottom:1px solid var(--gray-100);
}
.category-nav-list li:last-child a{ border-bottom:none; }
.category-nav-list li.is-active a{ color:var(--accent); font-weight:600; }
.category-nav-count{ color:var(--gray-500); font-size:.78rem; flex:none; }
.category-nav-list li.is-active .category-nav-count{ color:var(--accent); }

@media (min-width:901px) and (max-width:1300px){ .shop-layout ul.products{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:900px){
  .shop-layout{ grid-template-columns:1fr; }
  .category-nav{ position:static; }
  /* The panel defaults to expanded (see functions.php) for a permanently-
     visible desktop sidebar. Stacked above the product grid on mobile, that
     same "expanded" list of 40+ categories would push every product off the
     first several screens, so it gets its own scroll area here instead of
     growing unbounded. */
  .category-nav-list{ max-height:320px; overflow-y:auto; }
}

.products-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
ul.products{ display:grid !important; grid-template-columns:repeat(4, 1fr); gap:24px; list-style:none; margin:0; padding:0; }
/* WooCommerce's float-layout clearfix (::before/::after{display:table}) becomes a
   real grid item once .products is display:grid, eating the first and last cell. */
ul.products::before, ul.products::after{ display:none !important; content:none !important; }
ul.products li.product{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:box-shadow .15s ease, transform .15s ease;
  width:auto !important; float:none !important; margin:0 !important; clear:none !important;
  display:flex; flex-direction:column; height:100%;
}
ul.products li.product:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
ul.products li.product a img{ aspect-ratio:1/1; object-fit:cover; }
ul.products li.product > a.woocommerce-loop-product__link{
  display:flex !important; flex-direction:column; flex:1 1 auto;
}
ul.products li.product .woocommerce-loop-product__title{
  font-size:.95rem; font-weight:600; color:var(--navy-dark); padding:14px 16px 0; margin:0;
  line-height:1.35; min-height:calc(1.35em * 2);
}
ul.products li.product .price{ display:none !important; }
.product-card-body{ padding:0 16px 18px; }
/* Pinned to the bottom of the <a> (via margin-top:auto), so it always sits
   flush above the "Request A Free Quote" button regardless of title length. */
ul.products li.product .product-sku{ margin-top:auto; }
.product-sku{ font-size:.78rem; color:var(--gray-500); padding:4px 16px 0; }
.no-price-tag{
  display:inline-block; font-size:.78rem; font-weight:600; color:var(--accent);
  padding:4px 16px 0;
}
@media (max-width:1100px){ ul.products{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:760px){ ul.products{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:480px){ ul.products{ grid-template-columns:1fr !important; } }

.woocommerce div.product .woocommerce-product-gallery{ max-width:520px; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ display:none !important; }
.price-notice{
  background:var(--bg-alt); border:1px dashed var(--gray-300); border-radius:8px;
  padding:14px 16px; font-size:.9rem; color:var(--gray-700); margin:14px 0;
}

/* ==========================================================================
   Quote request button (product cards + single product) — dynamic, AJAX-
   driven via goodsaxis-b2b's assets/js/quote-frontend.js. The plain href
   still works with JS disabled (progressive enhancement).
   ========================================================================== */
.gx-quote-button-wrap{ margin:16px 0; }
ul.products .gx-quote-button-wrap{ padding:0 16px 18px; margin:0; }
.gx-quote-btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important;
  border-radius:999px !important; font-weight:600 !important; padding:12px 24px !important;
  font-family:var(--font) !important; font-size:.92rem !important; position:relative;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.gx-quote-btn:hover{ background:var(--accent-dark) !important; border-color:var(--accent-dark) !important; }
.gx-quote-btn--added{
  background:#fff !important; border:1.5px solid var(--navy) !important; color:var(--navy) !important;
}
.gx-quote-btn--added:hover{ background:var(--navy) !important; border-color:var(--navy) !important; color:#fff !important; }
ul.products .gx-quote-btn{ width:100%; padding:9px 16px !important; font-size:.82rem !important; }
/* Replace the browser's default focus ring (an unthemed blue/orange that
   clashed with the pill's own navy/accent colors) with one that matches. */
.gx-quote-btn:focus, .gx-quote-btn:active{ outline:none !important; box-shadow:none !important; }
.gx-quote-btn:focus-visible{ outline:2px solid var(--accent) !important; outline-offset:2px; }
.gx-quote-btn--added:focus-visible{ outline-color:var(--navy) !important; }

.gx-quote-btn-icon{ width:15px; height:15px; flex:none; }
.gx-quote-btn[data-state="added"] .gx-quote-btn-icon--cart,
.gx-quote-btn:not([data-state="added"]) .gx-quote-btn-icon--check{ display:none; }
.gx-quote-btn.is-loading{ pointer-events:none; }
.gx-quote-btn.is-loading .gx-quote-btn-label, .gx-quote-btn.is-loading .gx-quote-btn-icon{ opacity:0; }
.gx-quote-btn.is-loading::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:gx-spin .7s linear infinite;
}
.gx-quote-btn--added.is-loading::after{ border-color:rgba(11,44,86,.3); border-top-color:var(--navy); }
@keyframes gx-spin{ to{ transform:rotate(360deg); } }

/* Transient toast (add/remove/update confirmations) */
.gx-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 16px); z-index:9999;
  background:var(--navy-dark); color:#fff; padding:12px 22px; border-radius:999px;
  font-size:.88rem; font-weight:500; box-shadow:var(--shadow-md); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; max-width:90vw; text-align:center;
}
.gx-toast--error{ background:#b3261e; }
.gx-toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

/* Inquiry / quote list page */
.inquiry-table{ width:100%; border-collapse:collapse; }
.inquiry-table th{ text-align:left; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-500); padding:0 12px 12px; border-bottom:2px solid var(--line); }
.inquiry-table td{ padding:16px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.inquiry-table img{ width:60px; height:60px; object-fit:cover; border-radius:8px; }

/* Footer */
.site-footer{ background:var(--navy-dark); color:#c9d8ee; padding:56px 0 24px; margin-top:80px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
.footer-grid h4{ color:#fff; font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ color:#c9d8ee; font-size:.9rem; }
.footer-grid a:hover{ color:#fff; }
.footer-logo img{ height:36px; margin-bottom:14px; filter:brightness(0) invert(1); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:#8fa4c6; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* Inquiry / RFQ form page */
.rfq-form{ max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:16px; padding:36px; }

/* Shared by the general inquiry form, the per-product enquiry form, and the
   /my-quote/ details form — any label/input wrapped in a .field div. */
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; color:var(--navy-dark); }
.field label .required, .field label sup{ color:var(--accent); }
.field input, .field textarea, .field select{
  width:100%; padding:11px 14px; border:1px solid var(--gray-300); border-radius:8px;
  font-family:var(--font); font-size:.95rem; color:var(--gray-900); background:#fff;
  transition:border-color .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--navy); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }

/* ==========================================================================
   Products archive — "can't find it?" inquiry CTA
   ========================================================================== */
.shop-inquiry-cta .section-head{ margin-bottom:28px; }

/* ==========================================================================
   /my-quote/ populated state — dynamic item list rendered by the
   goodsaxis-b2b plugin's my-quote-cart.php template, progressively enhanced
   by assets/js/quote-frontend.js (AJAX qty/remove/submit, no page reloads).
   ========================================================================== */
.quote-empty-note{ color:var(--gray-700); margin-bottom:24px; }

.quote-cart-wrap{ max-width:760px; margin:0 auto 40px; text-align:left; }
.quote-cart-wrap + .inquiry-form-wrap{ padding-top:36px; border-top:1px solid var(--line); }

.gx-quote-items{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:12px; }
.gx-quote-item{
  display:grid; grid-template-columns:56px 1fr auto auto; align-items:center; gap:16px;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  transition:opacity .25s ease, transform .25s ease;
}
.gx-quote-item.is-removing{ opacity:0; transform:scale(.97); }
.gx-quote-item.is-saving{ opacity:.6; }
.gx-quote-item-thumb{ width:56px !important; height:56px !important; object-fit:cover; border-radius:8px; background:var(--bg-alt); }
.gx-quote-item-body{ min-width:0; }
.gx-quote-item-name{ font-weight:600; font-size:.92rem; color:var(--navy-dark); line-height:1.35; }
.gx-quote-item-sku{ font-size:.78rem; color:var(--gray-500); margin-top:2px; }

.gx-quote-item-qty{
  display:inline-flex; align-items:center; border:1px solid var(--gray-300); border-radius:999px;
  overflow:hidden; flex:none;
}
.gx-qty-btn{
  width:32px; height:32px; border:none; background:var(--bg-alt); color:var(--navy-dark);
  font-size:1.05rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.gx-qty-btn:hover{ background:var(--gray-100); color:var(--accent); }
.gx-qty-input{
  width:44px; height:32px; border:none; border-left:1px solid var(--gray-300); border-right:1px solid var(--gray-300);
  text-align:center; font-family:var(--font); font-size:.9rem; -moz-appearance:textfield; padding:0;
}
.gx-qty-input::-webkit-outer-spin-button, .gx-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.gx-qty-input:focus{ outline:none; }

.gx-quote-item-remove{
  width:34px; height:34px; border:1px solid var(--gray-300); border-radius:50%; background:#fff;
  color:var(--gray-500); display:flex; align-items:center; justify-content:center; cursor:pointer;
  flex:none; transition:all .15s ease;
}
.gx-quote-item-remove:hover{ border-color:#b3261e; color:#b3261e; background:#fdecea; }

.gx-quote-empty{
  background:var(--bg-alt); border:1px dashed var(--gray-300); border-radius:12px;
  padding:24px; text-align:center; margin-bottom:28px; color:var(--gray-700);
}
.gx-quote-empty a{ font-weight:600; }

.gx-quote-details-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px; }
.gx-quote-details-card h3{ margin-bottom:18px; }

@media (max-width:560px){
  .gx-quote-item{
    grid-template-columns:44px 1fr auto; grid-template-rows:auto auto;
    grid-template-areas:"thumb name name" "qty qty remove"; row-gap:12px;
  }
  .gx-quote-item-thumb{ grid-area:thumb; width:44px !important; height:44px !important; }
  .gx-quote-item-body{ grid-area:name; }
  .gx-quote-item-qty{ grid-area:qty; justify-self:start; }
  .gx-quote-item-remove{ grid-area:remove; justify-self:end; align-self:center; }
}

/* Honeypot field on public forms: off-screen (not display:none), so most
   scripted bots that fill every field still trip it, while it stays out of
   the way for sighted and screen-reader users alike. */
.gx-hp-field{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}

/* ==========================================================================
   My Account — WooCommerce ships almost no default styling for this page
   (bare nav links, unstyled tables/buttons), so this reskins it to match
   the rest of the site instead of overriding template markup.
   ========================================================================== */
.woocommerce-account .woocommerce-wrap{ max-width:1080px; }
.woocommerce-account .woocommerce-notices-wrapper:empty{ display:none; }

/* Notices (error is a bare <ul>, message/info are <div>s). WooCommerce's own
   base rule renders the icon as an absolutely-positioned ::before and relies
   on a wide left padding (3.5em) to clear it — our tighter, flexed padding
   broke that, so the icon overlapped the text/button. Fixed by popping the
   icon back into normal flow as a flex item instead of chasing padding math. */
.woocommerce-account ul.woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info{
  list-style:none; margin:0 0 24px; padding:14px 18px; border-radius:8px;
  font-size:.9rem; font-weight:500; display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 16px;
  background:#eef3fb; color:var(--navy-dark); border:1px solid #cfe0f7;
}
.woocommerce-account ul.woocommerce-error{ background:#fdecea; color:#b3261e; border-color:#f6c6c2; }
.woocommerce-account ul.woocommerce-error li{ list-style:none; }
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account ul.woocommerce-error::before{
  position:static; top:auto; left:auto; flex:none; font-size:1.15em;
}
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button,
.woocommerce-account ul.woocommerce-error .button{
  float:none; margin:0 0 0 auto; flex:none; padding:9px 18px;
}

/* Buttons — the template markup only offers a bare .button class. WooCommerce's
   own a.button/button.button/input.button rule outranks a plain ".button"
   selector by one element-selector's worth of specificity, so these match
   that same shape to actually win the cascade. */
.woocommerce-account a.button,
.woocommerce-account button.button,
.woocommerce-account input.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:999px; font-weight:600; font-size:.88rem;
  font-family:var(--font); border:2px solid var(--navy); background:var(--navy);
  color:#fff; cursor:pointer; transition:all .15s ease; line-height:1; text-decoration:none;
}
.woocommerce-account a.button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover{ background:var(--navy-light); border-color:var(--navy-light); color:#fff; }
.woocommerce-account a.button.wc-forward,
.woocommerce-account a.button.view{ background:transparent; color:var(--navy); }
.woocommerce-account a.button.wc-forward:hover,
.woocommerce-account a.button.view:hover{ background:var(--navy); color:#fff; }
.woocommerce-account a.button.cancel{ background:transparent; border-color:#b3261e; color:#b3261e; }
.woocommerce-account a.button.cancel:hover{ background:#b3261e; color:#fff; }
.woocommerce-account a.button.pay{ background:var(--accent); border-color:var(--accent); }
.woocommerce-account a.button.pay:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }

/* Sidebar nav + content layout (logged in; logged-out shows only a login form) */
.woocommerce-account .woocommerce-wrap:has(.woocommerce-MyAccount-navigation){
  display:grid; grid-template-columns:230px 1fr; gap:32px; align-items:start;
}
.woocommerce-MyAccount-navigation{ position:sticky; top:96px; }
.woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--line); }
.woocommerce-MyAccount-navigation li:last-child{ border-bottom:none; }
.woocommerce-MyAccount-navigation li a{
  display:block; padding:13px 18px; font-size:.9rem; font-weight:500; color:var(--gray-700);
  border-left:3px solid transparent; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover{ background:var(--bg-alt); color:var(--navy); }
.woocommerce-MyAccount-navigation li.is-active a{
  background:var(--bg-alt); color:var(--navy); font-weight:600; border-left-color:var(--accent);
}
.woocommerce-MyAccount-navigation-link--customer-logout a{ color:#b3261e; }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover{ background:#fdecea; color:#b3261e; }

.woocommerce-MyAccount-content{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px 36px; min-width:0;
}
.woocommerce-MyAccount-content > p:first-child{ margin-top:0; }
.woocommerce-MyAccount-content h2{ font-size:1.25rem; margin-bottom:16px; }
.woocommerce-MyAccount-content > p a{ font-weight:600; }

@media (max-width:768px){
  .woocommerce-account .woocommerce-wrap:has(.woocommerce-MyAccount-navigation){ grid-template-columns:1fr; }
  .woocommerce-MyAccount-navigation{ position:static; }
  .woocommerce-MyAccount-navigation ul{ display:flex; overflow-x:auto; border-radius:999px; }
  .woocommerce-MyAccount-navigation li{ border-bottom:none; border-right:1px solid var(--line); flex:none; }
  .woocommerce-MyAccount-navigation li:last-child{ border-right:none; }
  .woocommerce-MyAccount-navigation li a{ white-space:nowrap; border-left:none; border-bottom:3px solid transparent; }
  .woocommerce-MyAccount-navigation li.is-active a{ border-left-color:transparent; border-bottom-color:var(--accent); }
  .woocommerce-MyAccount-content{ padding:24px; }
}

/* Login / register (shown instead of the dashboard when logged out) */
.woocommerce-account .woocommerce-wrap > form.woocommerce-form-login{
  max-width:440px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:36px; text-align:left;
}
.woocommerce-account #customer_login{
  max-width:920px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2{
  float:none !important; width:100% !important; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:32px; text-align:left;
}
.woocommerce-account #customer_login h2{ font-size:1.15rem; margin-bottom:18px; }
@media (max-width:768px){
  .woocommerce-account #customer_login{ grid-template-columns:1fr; }
}

/* Form fields shared across login, addresses, and account-details forms */
.woocommerce-account .form-row label{
  display:block; font-weight:600; font-size:.85rem; margin-bottom:6px; color:var(--navy-dark);
}
.woocommerce-account .form-row .required{ color:var(--accent); text-decoration:none; }
.woocommerce-account .input-text,
.woocommerce-account select{
  padding:11px 14px; border:1px solid var(--gray-300); border-radius:8px;
  font-family:var(--font); font-size:.92rem; color:var(--gray-900); background:#fff;
  transition:border-color .15s ease;
}
.woocommerce-account .input-text:focus,
.woocommerce-account select:focus{ outline:none; border-color:var(--navy); }
.woocommerce-account fieldset{ border:none; padding:20px 0 0; margin:8px 0 0; border-top:1px solid var(--line); }
.woocommerce-account fieldset legend{ font-weight:600; color:var(--navy-dark); padding:0 0 12px; font-size:.95rem; }
.woocommerce-account .select2-container .select2-selection--single{
  height:44px; border:1px solid var(--gray-300) !important; border-radius:8px !important;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:42px; color:var(--gray-900); padding-left:14px;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow{ height:42px; }

/* Addresses */
.woocommerce-account .woocommerce-Address{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px;
}
.woocommerce-Address-title{ margin-bottom:12px; }
.woocommerce-Address-title h2,
.woocommerce-Address-title h3{ margin:0 0 4px; font-size:1rem; }
.woocommerce-Address-title .edit{
  float:none !important; /* wins over WC's own .woocommerce-account .addresses .title .edit{float:right} */
  display:inline-block; font-size:.82rem; font-weight:600; color:var(--navy);
}
.woocommerce-Address-title .edit:hover{ color:var(--accent); }
.woocommerce-Address address{ font-style:normal; color:var(--gray-700); font-size:.92rem; line-height:1.7; }

/* Orders / downloads / payment-methods tables */
.woocommerce-account table.shop_table{ width:100%; border-collapse:collapse; margin:0 0 8px; }
.woocommerce-account table.shop_table th{
  text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600;
  color:var(--gray-500); padding:0 14px 12px; border-bottom:2px solid var(--line);
}
.woocommerce-account table.shop_table td{
  padding:16px 14px; border-bottom:1px solid var(--line); vertical-align:middle;
  font-size:.92rem; color:var(--gray-900);
}
.woocommerce-account table.shop_table tr:last-child td{ border-bottom:none; }
.woocommerce-account table.shop_table td a:not(.button){ font-weight:600; }
.woocommerce-account table.shop_table .button{ padding:8px 16px; font-size:.8rem; }

/* Order status color cues (status text is plain, no wrapper element to hook) */
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status{ color:#1a7a41; font-weight:600; }
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status{ color:var(--navy); font-weight:600; }
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status{ color:#a6740a; font-weight:600; }
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status{ color:#b3261e; font-weight:600; }

@media (max-width:768px){
  .woocommerce-account table.shop_table_responsive td{ border-bottom:none; padding:6px 0; }
  .woocommerce-account table.shop_table_responsive tr{
    display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 16px; margin-bottom:12px;
  }
  /* The order-number cell is a <th> (row header); WooCommerce's own
     smallscreen stylesheet hides all tbody th, which would otherwise drop
     the order number from each stacked mobile card entirely. */
  .woocommerce-account table.shop_table_responsive tbody th{
    display:block !important; text-align:left !important; padding:0 0 10px;
    margin-bottom:8px; border-bottom:1px solid var(--line);
    font-size:1rem; font-weight:700; color:var(--navy-dark);
  }
}

/* Inline images inside editable page copy (home, guides, about…): keep them a sensible size. */
.page-content img{ max-width:min(100%, 480px); border-radius:12px; margin:20px 0; }

/* Cloudflare Turnstile's widget is a fixed 300x65 iframe; inside a narrow form card it
   would push the whole page wider than the viewport, so scale it down on small screens. */
.gx-turnstile{ max-width:100%; }
@media (max-width:420px){
  .gx-turnstile{ width:300px; height:57px; transform:scale(.88); transform-origin:left top; }
}
@media (max-width:350px){
  .gx-turnstile{ height:46px; transform:scale(.72); }
}