/* =========================================================
   style.css — v39.2 (clean + product text safety reset)
   ========================================================= */

/* ========== DESIGN TOKENS ========== */
:root{
  --line:#e5e7eb;
  --muted:#6b7280;
  --ink:#111;
  --nav-bg:#fff;
  --nav-link:#111;
  --nav-pill:#eef3ff;
  --nav-border:#e9eef5;
  --gold:#caa536;

  /* product image windows */
  --thumb-min: 220px;
  --thumb-ideal: 28vw;
  --thumb-max: 320px;

  --detail-min: 280px;
  --detail-ideal: 45vw;
  --detail-max: 560px;

  --nav-h: 64px;
}

/* ========== GLOBAL BASE ========== */
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
}
.wrap{ max-width:1180px; margin:0 auto; padding:0 16px; }
a{ color:#111; text-underline-offset:2px; }
img{ display:block; max-width:100%; height:auto; }

/* ========== HEADER / NAV ========== */
.site-nav{
  position:sticky; top:0; z-index:1000;
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-border);
  box-shadow: 0 1px 0 rgba(17,24,39,.06);
}
.nav-wrap {
  display: flex;
  align-items: center;
  position: relative;      /* so we can center menu absolutely */
  padding: 0 40px;         /* optional: space from edges */
}

.logo {
  margin-left: 400px;   /* move logo inward from the left edge */
  margin-right: 100px;  /* keep the gap before the menu */
}

.menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* force true center */
  display: flex;
  gap: 20px;               /* spacing between menu items */
}

.header-logo { width: 250px; height:auto; object-fit:contain; display:block; }

.nav-toggle{
  display:none; background:#fff; border:1px solid #111;
  padding:8px 10px; border-radius:10px; cursor:pointer;
}

/* menu (desktop) */
.menu{ display:flex; gap:16px; align-items:center; margin-left:0; }
.menu a,
.menu button.menu-link{
  appearance:none;
  border:1px solid #cbd5e1;
  background:#fff;
  border-radius:9999px;
  padding:8px 14px;
  text-decoration:none;
  color:#111; line-height:1; cursor:pointer;
}
.menu a:hover,
.menu button.menu-link:hover{ background:#f6f7f9; }
.menu a.active,
.menu a[aria-current="page"]{
  color:#0b5fff; background:#eef3ff; border-color:#cfd9ff; font-weight:600;
}
.pill--gold{ border-color:var(--gold); color:#7a5d00; }
.pill--gold:hover{ background:#caa536; color:#fff; }
.menu .cta:hover{ background:#111; color:#fff; }

/* dropdowns (desktop) */
.has-sub{ position:relative; }
.submenu{
  display:none; position:absolute; top:100%; left:0;
  background:#fff; border:1px solid var(--nav-border);
  border-radius:12px; box-shadow:0 12px 24px rgba(0,0,0,.08);
  padding:8px; min-width:260px; z-index:1200;
}
.submenu a, .submenu .menu-link{ display:block; padding:8px 10px; border-radius:8px; }
.submenu a:hover{ background:#f3f4f6; }
.has-sub.open > .submenu{ display:block; }
.caret{ margin-left:6px; opacity:.65; transition:transform .2s; }
.has-sub.open > .menu-link .caret{ transform:rotate(90deg); }
@media(min-width:981px){
  .has-sub > .submenu .has-sub > .submenu{ top:0; left:100%; margin-left:8px; }
}

/* ========== MOBILE DRAWER ========== */
@media(max-width:900px){
  .site-nav .nav-wrap{ justify-content:space-between; height: var(--nav-h); padding: 10px 14px !important; }
  .header-logo{ width:160px !important; }

  .nav-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    margin-left:auto;
    width:44px; height:38px;
    border-radius:12px;
    border:1px solid #e5e7eb; background:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.06);
    z-index: 2002;
  }

  .menu{
    position: fixed !important;
    top: var(--nav-h); right: -100%; bottom: 0; left: auto;
    width: min(92vw, 420px);
    background:#fff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -14px 0 28px rgba(0,0,0,.12);
    display:flex; flex-direction:column; gap:10px;
    padding:16px 14px;
    overflow:auto;
    transition: right .28s ease;
    z-index: 2001;
  }
  .menu.open{ right:0; }

  .menu a, .menu .menu-link{
    width:100%; text-align:left;
    padding:12px 14px; border-radius:12px;
    border:1px solid #eef2f7; background:#f9fafb;
  }

  /* submenus inside drawer */
  .submenu{
    position: static !important;
    padding: 6px 0 !important; border:0 !important; box-shadow:none !important;
    display:none !important;
  }
  .has-sub.open > .submenu{ display:block !important; }
  .submenu a{ padding-left: 22px; }
}

/* ========== BACKDROP (single, deduped) ========== */
.nav-overlay,
.menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;        /* only block clicks when shown */
  transition: .2s ease;
  z-index: 2000;               /* below drawer (2001) and WhatsApp (2100) */
}
.nav-overlay.show,
.menu-backdrop.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
html.noscroll, body.noscroll{ overflow:hidden !important; }

/* ========== CONTENT BASICS ========== */
.hero{ padding:42px 0 14px; text-align:center; }
.muted{ color:var(--muted); }
h1,h2{ margin:0 0 10px; }

.split{ display:grid; grid-template-columns:repeat(1,1fr); gap:16px; }
@media(min-width:800px){ .split{ grid-template-columns:repeat(2,1fr); } }

.check{ padding-left:18px; }
.check li{ margin:8px 0; }

/* cards & buttons */
.cards{ display:grid; gap:16px; }
.cols-3{ grid-template-columns:repeat(1,1fr); }
@media(min-width:780px){ .cols-3{ grid-template-columns:repeat(3,1fr); } }
.card{ border:1px solid var(--line); background:#fff; border-radius:10px; }
.card .pad{ padding:12px; }
.card h3{ margin:4px 0 6px; }
.desc{ color:#4b5563; font-size:.95rem; line-height:1.45; margin:6px 0 10px; }

.btn{
  display:inline-block; background:#fff; color:#000; border:1px solid #000;
  padding:10px 14px; cursor:pointer; text-decoration:none; border-radius:8px;
}
.btn:hover{ background:#000; color:#fff; }
.btn.ghost{ background:#fff; border-color:#cbd5e1; }
.btn.ghost:hover{ background:#f6f7f9; }

/* forms (from your original) */
.formgrid.simple{ display:grid; gap:10px; grid-template-columns:repeat(4, minmax(0,1fr)); }
.formgrid.simple label{ display:flex; flex-direction:column; gap:6px; }
.formgrid.simple input, .formgrid.simple textarea{ padding:10px; border:1px solid var(--line); border-radius:8px; }
.formgrid.simple .span2{ grid-column:span 2; }
.formgrid.simple .span4{ grid-column:span 4; }
.formgrid.simple .actions{ display:flex; justify-content:flex-end; gap:10px; }

/* ========== SUBCATEGORY LISTING (product cards) ========== */
.products{ display:grid; gap:16px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width:780px){ .products{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.prod-card{ border:1px solid var(--line); background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.prod-card .thumb{
  height: clamp(var(--thumb-min), var(--thumb-ideal), var(--thumb-max));
  width: 100%;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.prod-card .thumb img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.prod-card .pad{ padding:12px; }
.prod-card h3{ margin:4px 0 6px; font-size:1.05rem; }
.prod-card .desc{ color:#4b5563; margin:6px 0 12px; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* ========== SINGLE PRODUCT PAGE (base layout) ========== */
.product-detail .split{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:900px){ .product-detail .split{ grid-template-columns: minmax(260px,520px) 1fr; } }
.product-detail .media{ background:#f8fafc; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.product-detail .media, .product-detail .media .frame{ height: clamp(var(--detail-min), var(--detail-ideal), var(--detail-max)); width:100%; }
.product-detail .media img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.info-panel{ padding:4px 2px; }

/* Optional: Thumbnail strip */
.thumbs{ display:flex; gap:8px; margin:10px 0 0; flex-wrap:wrap; }
.thumbs .thumb{ border:1px solid var(--line); border-radius:8px; background:#fff; padding:4px; cursor:pointer; }
.thumbs .thumb img{ width:72px; height:72px; object-fit:contain; display:block; }

/* Related / cross-sell */
.related-grid, #related-container, #crosssell-container { margin-top: 8px; }
.related-grid .products, #related-container .products, #crosssell-container .products{ display:grid; gap:16px; grid-template-columns:repeat(1, minmax(0,1fr)); }
@media(min-width:780px){
  .related-grid .products, #related-container .products, #crosssell-container .products{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* Payment methods */
.payments { display:grid; gap:12px; grid-template-columns:repeat(2,1fr); margin-top:16px; }
@media(min-width:780px){ .payments{ grid-template-columns:repeat(4,1fr); } }
.pay-card { border:1px solid #e5e7eb; background:#fff; border-radius:12px; padding:14px; text-align:center; }
.pay-card img { height:28px; margin-bottom:8px; }

/* Footer (3 columns) */
.footer { background-color: #fffafa; color: #000; padding: 8px 10px; }
.footer a { color: #000; text-decoration: underline; }
.footer a:hover { color: #ffffff; }
.footer .footer-wrap.footer-3col{ display: grid !important; grid-template-columns: 220px 1fr 260px; align-items: start; column-gap: 32px; row-gap: 10px; padding-block: 16px; }
.footer .footer-col.left .footer-title{ margin: 0 0 8px; font-weight: 600; }
.footer .footer-links{ list-style: none; margin: 0; padding: 0; }
.footer .footer-links li{ margin: 6px 0; }
.footer .footer-brand.center{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.footer .footer-logo{ width: 220px; height:auto; object-fit:contain; display:block; }
.footer .footer-col.right .footer-title{ margin:0 0 10px; font-weight:600; text-align:left; }
.footer .social{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.footer .social-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:9999px; border:1px solid #e5e7eb; background:#f9fafb; color:#111; text-decoration:none; }
.footer .social-btn:hover{ background:#f3f4f6; }

@media (max-width:780px){
  .footer .footer-wrap.footer-3col{ grid-template-columns:1fr; row-gap:18px; text-align:left; }
  .footer .footer-brand.center{ align-items:center; }
  .footer .social{ justify-content:center; }
}

/* WhatsApp button always above overlay */
.wa-float{
  position: fixed; left: 20px; bottom: 60px;
  width: 72px; height: 72px; border-radius: 50%;
  overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.28);
  z-index: 2100; display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float img{ width:115%; height:115%; object-fit:cover; border-radius:50%; display:block; }
.wa-float:hover{ transform: scale(1.06); box-shadow: 0 10px 22px rgba(0,0,0,.32); }
@media(max-width:600px){ .wa-float{ width:60px; height:60px; left:14px; bottom:50px; } }

/* ========== Mobile submenu visibility + indentation (deduped) ========== */
@media (max-width:900px){
  #mainMenu .submenu{ display:none !important; position:static !important; padding:6px 0 !important; border:0 !important; box-shadow:none !important; }
  #mainMenu .has-sub.open > .submenu{ display:block !important; }
  #mainMenu .has-sub{ width:100%; }
  #mainMenu .submenu a, #mainMenu .submenu .menu-link{ padding-left:22px; }
  #mainMenu .submenu .has-sub > .submenu a,
  #mainMenu .submenu .has-sub > .submenu .menu-link{ padding-left:34px; }
}

/* ===== Footer: center logo + bigger + tagline ===== */
.footer .footer-brand.center{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; justify-self: center;
}
.footer .footer-logo{ width: 300px; max-width: 100%; height: auto; object-fit: contain; display: block; margin: 0 auto; }
.footer .brand-tag, .footer .footer-tagline{ font-size: 1.1rem; font-weight: 600; margin-top: 6px; color: #000; text-align: center; }
@media (max-width: 780px){
  .footer .footer-logo{ width: 240px; }
  .footer .brand-tag, .footer .footer-tagline{ font-size: 1rem; }
}

/* ===== Mobile hotfix: prevent horizontal overflow & reset header offsets ===== */
html, body{ max-width:100%; overflow-x:hidden; }
@media (max-width:900px){
  .logo{ margin-left:0 !important; margin-right:0 !important; }
  #mainMenu.menu{
    position: fixed !important;
    left: auto !important;
    transform: none !important;
    right: -100%;
    top: var(--nav-h);
  }
  #mainMenu.menu.open{ right:0 !important; }
}

/* === UNIVERSAL product page layout + gallery (kept) === */
.product-detail .split{
  display:grid;
  grid-template-columns:minmax(320px,560px) 1fr; /* image left / info right */
  gap:28px;
  align-items:start;
}
@media (max-width:980px){ .product-detail .split{ grid-template-columns:1fr; } }

.product-detail .media{
  position:relative;
  margin:0;                               /* prevents description from dropping below */
  max-width:560px;
  background:#fff;
  border-radius:12px;
  padding:12px 12px calc(var(--thumb-size,72px) + 24px); /* room for bottom thumbs */
  box-sizing:border-box;
}
.product-detail .media > img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}

/* Bottom-center thumbnail rail (stays inside the frame) */
.product-detail .thumbs{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  display:flex;
  gap:var(--thumb-gap,8px);
  justify-content:center;
  align-items:center;
  max-width:calc(100% - 24px);
  padding:6px 8px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(2px);
  border-radius:999px;
  overflow-x:auto;            /* scrolls nicely if many thumbs */
}
.product-detail .thumbs .thumb{
  border:0;
  background:none;
  padding:0;
  width:var(--thumb-size,72px);
  height:var(--thumb-size,72px);
  border-radius:8px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  cursor:pointer;
  flex:0 0 auto;
  outline:none;
}
.product-detail .thumbs .thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.product-detail .thumbs .thumb.is-active{ box-shadow:0 0 0 2px #111; }

.product-detail .info{ min-width:0; } /* allows long text to wrap without pushing layout */

/* === PRODUCT IMAGE: MOBILE FIX (kept once) === */
main img:not([class*="logo"]):not([class*="icon"]):not([src*="svg"]) {
  display: block;
  max-width: 100%;
  height: auto !important;
}
@media (max-width: 640px) {
  main .product-hero,
  main .product-media,
  main .product-image,
  main .product-gallery,
  main [class*="product"] [class*="media"],
  main [class*="product"] [class*="image"],
  main [class*="gallery"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  main .product-hero img,
  main .product-media img,
  main .product-image img,
  main .product-gallery img,
  main [class*="product"] [class*="media"] img,
  main [class*="product"] [class*="image"] img,
  main [class*="gallery"] img {
    width: 100%;
    height: auto !important;
    object-fit: contain;
  }
  main .product-hero[style*="height"],
  main .product-media[style*="height"],
  main .product-image[style*="height"],
  main .product-gallery[style*="height"] {
    height: auto !important;
  }
  main .product-hero,
  main .product-media,
  main .product-image,
  main .product-gallery {
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 12px;
  }
}

/* === MOBILE PRODUCT IMAGE FIX (680–768px generic, kept once) === */
@media (max-width: 680px){
  .product-hero, .product-media, .product-image, .product-gallery,
  .pdp-hero, .pdp-media, .pdp-gallery, .gallery, .image-wrapper,
  .product [class*="image"], .product [class*="media"]{
    width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    margin: 0 auto !important;
  }
  .product-hero, .product-media, .product-image, .product-gallery,
  .pdp-hero, .pdp-media, .pdp-gallery, .image-wrapper, figure,
  [class*="product"] [class*="image"], [class*="product"] [class*="media"]{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    aspect-ratio: auto !important;
  }
  .product-hero img, .product-media img, .product-image img,
  .product-gallery img, .pdp-hero img, .pdp-media img, .pdp-gallery img,
  .gallery img, .image-wrapper img, main img.product-img {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: none !important;
  }
  img[class*="thumb"], img[class*="lazy"], img[class*="wp-image"],
  .woocommerce-product-gallery__image img { max-height: none !important; }
  .product-hero, .product-media, .product-image, .product-gallery {
    background: #fff;
    border-radius: 12px;
  }
}

/* --- Mobile fix: kill viewport-height hacks at <=768 --- */
@media (max-width: 768px) {
  .vh-100, [style*="vh"] { height: auto !important; min-height: 0 !important; }
}

/* ===== v38.7 hotfix for Polo 1156 (safe override, append at end) ===== */
@media (max-width: 900px){
  /* remove reserved bottom space intended for a thumbnail rail */
  .product-detail .media{
    padding: 12px !important;
  }

  /* kill fixed/clampped heights so the image can size naturally */
  .product-detail .media,
  .product-detail .media .frame{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* make the main image fill the width without cropping */
  .product-detail .media img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: none !important;
  }
}
/* ===== v39.0 hotfix: Polo 1156 image box (append at end) ===== */

/* 1) Generic: if the media box does NOT contain a .thumbs rail,
      remove the reserved bottom space and any fixed height */
.product-detail .media:not(:has(.thumbs)){
  padding: 12px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.product-detail .media:not(:has(.thumbs)) img{
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  transform: none !important;
}

/* 2) SKU-specific safety net: target the 1156 image directly */
.product-detail .media:has(img[src*="polos-ART-MUGP-Polo-1156"]){
  padding: 12px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.product-detail .media:has(img[src*="polos-ART-MUGP-Polo-1156"]) img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* =========================================================
   FINAL: Product page text safety reset (scoped, single)
   ========================================================= */
.product-detail,
.product-detail *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  letter-spacing: normal !important;
}

/* ensure the right column has room to breathe on desktop */
.product-detail .info{ min-width:320px; }
@media (max-width:900px){
  .product-detail .split{ grid-template-columns:1fr; }
  .product-detail .info{ min-width:0; }
}
/* ===== Outerwear grid fixes (match Gloves) ===== */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: start;
}

/* keep cards consistent */
.prod-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: hidden;
}

/* image area */
.prod-card .thumb {
  display: block;
  padding: 12px;
}
.prod-card .thumb img{
  width: 100%;
  height: 320px;               /* same visual height across cards */
  object-fit: contain;         /* gloves page uses contain; keeps full product visible */
  background: #fafafa;
  border-radius: 8px;
}

/* text area */
.prod-card .pad { padding: 14px 16px 16px; }
.prod-card h3 { font-size: 1rem; line-height: 1.35; margin: 0 0 8px; }
.prod-card .desc { color:#444; font-size:.95rem; margin:0 0 12px; }

/* buttons */
.prod-card .btn-row { display:flex; gap:8px; flex-wrap:wrap; }
.prod-card .btn, .prod-card .btn.ghost { min-width: 120px; text-align:center; }

/* small improvements */
.menu .is-active { font-weight: 600; }
.wa-float { z-index: 40; } /* float above content but below menus */