/* fabsportswear.com — replaces the gallery, thumbnail-grid and menu behaviour
   that used to be loaded from the old site builder's servers. Self-contained. */

/* ---------- navigation submenus (were JS-driven) ---------- */
/* The old builder stamped a fixed layer number on every element from its editor's
   stacking order. The navigation landed on 296, below several photos (381, 434,
   509, 641), and because that number sits on the nav's own container it also traps
   anything inside it. Lift the whole nav block above the page content so the
   drop-downs can open over photos. Stays below the lightbox, which is on <body>. */
.wsb-element-navigation{z-index:9000 !important}
.wsb-nav ul.nav-subnav{display:none}
.wsb-nav li{position:relative}
.wsb-nav > ul > li:hover > ul.nav-subnav,
.wsb-nav > ul > li:focus-within > ul.nav-subnav{
/* No padding on the list: the theme already draws a 1px line under every item,
   so any padding here shows as a thicker white band at the top and bottom than
   the separators. Border matches those lines, and the bottom one is left to the
   last item's own border so the edge does not double up. */
  display:block;position:absolute;left:0;top:100%;z-index:900;
  width:176px;margin:0;padding:0;list-style:none;
  background:#fff;border:1px solid #dadada;border-bottom:0;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.wsb-nav ul.nav-subnav li{display:block;float:none;width:auto}
/* Fixed width, wrapping text — as the original did. 176px leaves 142px of text,
   which is the width that reproduces the original's line breaks: "Buttons &
   Sweater" stays whole on the first line, "Lining & Piping colors" breaks. */
.wsb-nav ul.nav-subnav li a{display:block;padding:7px 16px;white-space:normal;
  color:#2b3e5c;text-decoration:none;line-height:1.3}
.wsb-nav ul.nav-subnav li a:hover{background:#eef1f6}

/* ---------- thumbnail grid (was media.lightbox) ---------- */
/* centred rows of inline-block cells, the spacing carried as each cell's margin
   — the original's layout, so the rows land in the same places */
.fab-grid{display:block;text-align:center;font-size:0}
.fab-grid figure{display:inline-block;vertical-align:top;cursor:zoom-in;
  background:#fff;box-shadow:0 3px 7px rgba(50,50,50,.75);overflow:hidden}
/* The original sized each thumbnail to cover its square cell and then centred it
   with a negative offset — the same result as object-fit:cover, centred. */
.fab-grid figure img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:center}
.fab-grid figcaption{font:11px/1.35 Arial,Helvetica,sans-serif;color:#555;
  padding:5px 4px 7px;text-align:center}

/* ---------- fading slideshow (was media.gallery) ---------- */
.fab-slides{position:relative;overflow:hidden}
.fab-slides .s{position:absolute;inset:0;opacity:0;transition:opacity .9s ease-in-out}
.fab-slides .s.on{opacity:1}
/* object-fit is set per slideshow in fab.js from the original's AutoSize flag */
.fab-slides .s img{width:100%;height:100%;display:block;object-position:center}
/* the dot strip: 37px tall, under the photo, centred — matching the original */
.fab-dots{height:37px;padding:5px;text-align:center;font-size:0;line-height:0}
.fab-dots button{width:10px;height:10px;margin:4px;padding:0;border:0;
  border-radius:5px;background:#969696;cursor:pointer;display:inline-block;
  vertical-align:top}
.fab-dots button[aria-current="true"]{background:#98c22a}

/* ---------- lightbox ---------- */
.fab-lb{position:fixed;inset:0;z-index:99999;background:rgba(20,20,20,.94);
  display:none;align-items:center;justify-content:center;padding:48px}
.fab-lb.on{display:flex}
.fab-lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.fab-lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font:300 34px/1 Arial,Helvetica,sans-serif;padding:14px;opacity:.82}
.fab-lb button:hover{opacity:1}
.fab-lb .x{top:8px;right:14px;font-size:28px}
.fab-lb .pv{left:6px;top:50%;transform:translateY(-50%)}
.fab-lb .nx{right:6px;top:50%;transform:translateY(-50%)}
.fab-lb .cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#ddd;
  font:12px/1.5 Arial,Helvetica,sans-serif;padding:0 40px}

/* ---------- contact form ---------- */
/* The builder laid this form out from JavaScript at runtime: a fixed label column
   beside each field. Without that script the label stacked above the box instead,
   and the two together overflowed the row's fixed 46px height — so every field
   sat on top of the next label. Restore the side-by-side layout. */
/* height:auto matters — one row was authored only 10px tall, and centring inside
   that made its field drift up into the row above */
#contact-form .form-row{display:flex;align-items:flex-start;gap:14px;height:auto}
#contact-form .form-label{padding-top:7px}
#contact-form [data-label-container-groupid]{flex:0 0 150px}
#contact-form [data-field-container-groupid]{flex:1 1 auto;min-width:0}
#contact-form .form-label{display:block;margin:0;line-height:1.25;
  font-size:15px;color:#18212f;text-align:right}
#contact-form .form-req{color:#8c1420;font-weight:700}
#contact-form .form-value{background:#fff;border:1px solid #6f6757;border-radius:2px;
  padding:7px 9px;font-size:15px;color:#18212f}
#contact-form .form-value:focus{outline:2px solid #2b3e5c;outline-offset:1px;
  border-color:#2b3e5c}
/* the submit row has no label, so indent it to line up with the fields */
#contact-form .form-row:not(:has(label)){padding-left:164px}
#contact-form input[type=submit]{cursor:pointer;background:#2b3e5c;color:#fff;
  border:0;border-radius:2px;padding:9px 26px;font-size:15px;letter-spacing:.3px}
#contact-form input[type=submit]:hover{background:#38507a}

/* No narrow-screen variant for the form on purpose: the rows sit at fixed heights
   on a fixed 1000px page, so stacking the label back on top would overlap again.
   The page has no viewport meta, so phones render it zoomed out as one piece. */

@media (max-width:760px){
  .fab-lb{padding:12px}
  .wsb-nav > ul > li:hover > ul.nav-subnav{position:static;box-shadow:none;border:0}
}

/* ---------- SEO / accessibility ---------- */
/* A promoted heading must not pick up the browser's default h1 styling, or the
   page would shift; the inner spans already carry the intended size and colour. */
.wsb-element-text h1{font-size:inherit;font-weight:inherit;line-height:inherit;
  color:inherit;margin:0;padding:0}
/* Where a page's heading is part of an image, the h1 is for screen readers and
   search engines only. It repeats the visible subject, nothing more. */
.fab-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- About us: reveal the FAB logo on the blue tile ---------- */
/* The logo block sits at layer 44 on every page, and every page's blue tile sits
   below it (37 on the product pages, 17 on Contact, 1 on Winston Collection) —
   except About us, where the tile was authored at 50 and covered the logo.
   Match the product pages. Nothing else on the page sits in that range. */
#wsb-element-38297cab-7758-4707-be5f-0731b517e0be{z-index:37 !important}