/*
Theme Name: North Print Workwear
Template: storefront
Description: Professional workwear-focused child theme for North Print Workwear. Built on Storefront (WooCommerce's own theme) for correctness and long-term compatibility; this file carries the actual visual identity.
Version: 2.6.1
Text Domain: northprint-workwear
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --npw-navy: #0B0B0C;
    --npw-navy-dark: #050505;
    --npw-hivis: #E8590C;
    --npw-hivis-dark: #C24700;
    --npw-grey: #F6F6F4;
    --npw-grey-mid: #EFEFEC;
    --npw-border: #E4E3DF;
    --npw-text: #17161A;
    --npw-text-soft: #615F5A;
    --npw-radius: 10px;
    --npw-radius-sm: 6px;
    --npw-shadow: 0 2px 10px rgba(11, 11, 12, 0.05);
    --npw-shadow-hover: 0 12px 28px rgba(11, 11, 12, 0.12);
}

* { box-sizing: border-box; }

body {
    color: var(--npw-text);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #ffffff;
}

h1, h2, h3, h4, h5,
.site-title, .entry-title, .page-title {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

p { color: var(--npw-text-soft); line-height: 1.65; }

a { transition: color 0.15s ease; }

.woocommerce-breadcrumb {
    color: var(--npw-text-soft);
    font-size: 0.85em;
    margin-bottom: 1.5em;
}
.woocommerce-breadcrumb a { color: var(--npw-text-soft); }
.woocommerce-breadcrumb a:hover { color: var(--npw-hivis); }

/* Site-wide content width -- Storefront's own .col-full caps out at
   ~1065px (66.5em) plus ~42px of padding each side, centred. On any
   screen wider than about 1150px that leaves large empty margins on
   both sides of every section (header, hero, product grids, footer
   alike, since they all share this one class) -- reported directly as
   "too much padding around the content". Widened here rather than
   left to a per-section fix since .col-full is the shared container for
   the entire site. Only the desktop rule is touched; Storefront's own
   narrower mobile/tablet overrides (which drop max-width entirely in
   favour of fixed side margins) are untouched and still apply below
   their own breakpoints. */
.col-full {
    max-width: 1400px;
    padding-left: 1.5em;
    padding-right: 1.5em;
}

/* Header -- modern, minimalist: white ground throughout (no solid-colour
   band), logo/search/account/cart as one clean row, a flat second row
   for category navigation. Deliberately NOT copying the blue corporate
   header band of the reference site the layout structure was modelled
   on -- "modern and minimalistic" was explicit, and this theme's own
   existing palette (navy text, sparing orange accent, white ground) is
   already the right one for that. ------------------------------------ */
/* The header is two rows (this element's own .col-full, then the
   .storefront-primary-navigation div directly below it -- both are
   children of the same <header id="masthead">, see header.php) that need
   to read as one deliberate unit, not two independently-floating bars.
   Only the OUTER header carries the background/shadow; the dividing line
   between the two rows is a single hairline (below), and the bottom
   border sits on the nav row so the whole thing closes with one line,
   not two competing ones. */
.site-header {
    background-color: #ffffff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Storefront reserves ~68px of margin-bottom under .site-header on the
   front page specifically (.home.page:not(.page-template-template-
   homepage) .site-header), as a stand-in for the breadcrumb spacing that
   page doesn't have. It only zeroes that back out for its own specific
   homepage template. Since this site's front page uses the full-width
   template instead (needed so alignwide/alignfull blocks reach real
   full width -- Storefront's template-homepage.php constrains content
   width instead), that exception never matches, and the gap showed up
   as a large dead band between the header and the page content below
   it, worst on mobile where the header is already taller. Reset
   directly here since this theme doesn't lean on Storefront's
   breadcrumb-spacing logic at all -- our own header CSS fully owns its
   spacing. !important because the source rule's :not() pseudo-class
   pushes its specificity above a same-length plain class selector. */
.home.page .site-header {
    margin-bottom: 0 !important;
}

.site-header .col-full {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--npw-border);
}

/* Storefront's own CSS carries hard percentage/full-width + float rules
   on these four elements, written for its original two-column float
   grid header (branding+nav ~74% left column, search+cart ~22% right
   column -- see storefront/style.css and .../woocommerce/woocommerce.css).
   This theme moved all four into new flex wrappers (this file's
   .npw-header-utility, and the .col-full flex rows) but never neutralised
   the legacy rules, which still match by class name regardless of where
   in the DOM the element now sits. Two effects, same root cause:
     - .site-branding (width:100%, storefront/style.css) and
       .main-navigation (width:100%, same file) silently render far wider
       than their actual content (measured 1028px/960px vs a real 230px/
       483px) -- not visibly broken only because their content doesn't
       fill the inflated box and nothing marks its edge.
     - .site-header-cart (width:21.7391%, storefront/.../woocommerce.css)
       resolves that percentage against its new, much narrower flex
       parent (.npw-header-utility, ~207px) instead of the original full
       nav row, collapsing to ~45px. Its own dropdown panel
       (.widget_shopping_cart) is width:100% of THAT, so the mini-cart
       rendered at 45px wide -- wrapping "Subtotal: £9.99" one character
       per line.
   Resetting width/float to auto/none here removes the legacy sizing at
   its source on all four, instead of the container-level patches that
   masked (but didn't fix) three of these and missed the cart entirely.

   !important is deliberate, not a lazy escape hatch: Storefront actually
   carries a THIRD variant of each of these four rules, scoped
   ".woocommerce-active .site-header .<element>" (three classes,
   specificity 0-3-0) specifically for WooCommerce-active sites -- which
   this is. A first attempt at this reset using ".site-header .site-
   branding" etc (0-2-0, or 0-1-0 for the bare ".site-header-cart") lost
   to that variant and silently did nothing; verified via getComputedStyle
   before/after that the reset had zero effect until !important was
   added. This is a confirmed, fully-diagnosed removal of vendor CSS this
   theme's restructured header no longer wants at any specificity, not a
   fight with our own future code. */
.site-header .site-branding,
.site-header .main-navigation,
.storefront-primary-navigation .site-search,
.site-header-cart {
    width: auto !important;
    float: none !important;
}

.site-header .site-branding {
    margin: 0;
    flex: 0 0 auto;
}

.site-header .site-title a {
    color: var(--npw-navy);
    font-weight: 800;
    font-size: 1.5em;
    letter-spacing: -0.02em;
}

.site-header .site-description { color: var(--npw-text-soft); }

/* Real logo image (custom_logo) -- constrained to the header row's own
   height rather than the huge natural size of the uploaded file. */
.site-header .custom-logo-link {
    display: block;
}
.site-header .custom-logo {
    height: 34px;
    width: auto;
    display: block;
}
.site-footer .npw-footer-logo {
    height: 28px;
    width: auto;
    display: block;
    margin-bottom: 1.2em;
    /* The source asset is black-on-transparent; invert to white for use
       on the footer's near-black background rather than shipping a
       second logo file. */
    filter: brightness(0) invert(1);
}
.npw-footer-about p {
    color: #9a9790;
    font-size: 0.9em;
    max-width: 32ch;
    margin: 0;
}

/* Logo + account/cart utility group -- these are now the header's only
   two row-1 elements (search moved to the nav row below, see
   functions.php's header hook restructure), so a plain space-between
   puts the logo hard left and this group hard right, with account and
   cart sitting tight against each other inside their own flex wrapper
   rather than stranded at opposite ends of the full row. */
.npw-header-utility {
    display: flex;
    align-items: center;
    gap: 1.4em;
    flex: 0 0 auto;
}

/* Search now lives in the nav row (row 2) instead of row 1 -- it reads
   more as a catalogue-wayfinding tool than a branding element, and
   grouping it with nav links/account/cart lets row 1 stay just logo +
   utility icons instead of three unrelated things spread across one
   row. Styled as one soft pill input rather than Storefront's bare
   default field + separate button. */
.storefront-primary-navigation .site-search {
    flex: 0 1 320px;
    max-width: 320px;
    margin: 0;
}
.storefront-primary-navigation .site-search .woocommerce-product-search {
    display: flex;
    background: var(--npw-grey);
    border: 1px solid var(--npw-border);
    border-radius: 999px;
    padding: 0.15em 0.15em 0.15em 1.1em;
}
.storefront-primary-navigation .site-search .search-field {
    flex: 1;
    border: none;
    background: transparent;
    font: inherit;
    padding: 0.55em 0;
    outline: none;
}
.storefront-primary-navigation .site-search button[type="submit"] {
    border-radius: 999px !important;
    padding: 0.55em 1.3em !important;
    font-size: 0.92em;
}

.npw-account-link {
    color: var(--npw-navy);
    font-weight: 700;
    font-size: 0.92em;
    text-decoration: none;
    white-space: nowrap;
}
.npw-account-link:hover { color: var(--npw-hivis); }

/* Nav row -- shares the header's white background and sits flush against
   row 1 (no gap/margin between them) so the two rows read as one header
   unit closed by a single bottom border, not two separate floating bars. */
.storefront-primary-navigation {
    background: #ffffff;
    border-bottom: 1px solid var(--npw-border);
}
.storefront-primary-navigation .col-full {
    display: flex;
    /* Both this row's .col-full and row 1's are matched by the earlier
       ".site-header .col-full" rule too -- .storefront-primary-navigation
       is itself nested inside .site-header (see header.php), so that
       broader selector's flex-wrap: wrap was leaking in here unopposed
       (equal specificity, but this rule never re-declared the property,
       so the earlier one won by cascade). At this row's normal desktop
       widths nav + search comfortably fit on one line; leaving it to wrap
       made search silently drop onto its own line beneath the nav links
       even when there was still room beside them. */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

.main-navigation {
    background: transparent;
}

.main-navigation ul li a {
    color: var(--npw-navy);
    font-weight: 600;
    font-size: 0.92em;
    letter-spacing: 0;
    text-transform: none;
    padding: 1em 1.1em;
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a {
    color: var(--npw-hivis);
}

.main-navigation ul ul {
    background: #ffffff;
    border: 1px solid var(--npw-border);
    border-radius: var(--npw-radius-sm);
    box-shadow: var(--npw-shadow-hover);
    border-top: 3px solid var(--npw-hivis);
    padding: 0.4em 0;
}

.main-navigation ul ul li a { color: var(--npw-text); }

/* Shop All / Brands mega-menu -- Storefront's default dropdown is a
   narrow list sized to its longest item (position:absolute with no
   width set, positioned against the parent <li>). With 10+ real
   categories/brands that's a long, cramped scrolling column, not
   something you can scan at a glance. Both dropdowns instead span the
   full width of the nav bar and lay their real categories/brands out
   individually in a row, with the existing "View all" link (already
   rendered by northprint-dynamic-nav.php as the last item) styled as
   a distinct "Shop all" action rather than just one more list entry.
   .storefront-primary-navigation .col-full is given position:relative
   below so the panel positions against the full nav width, not just
   the narrow "Shop All"/"Brands" <li> Storefront would otherwise use
   as the positioning context. */
.storefront-primary-navigation .col-full {
    position: relative;
}
#menu-item-112929,
#menu-item-112945 {
    position: static;
}
/* Layout rules (row/wrap/gap/padding) are safe unconditionally -- they
   only take effect once Storefront's own hover/focus rule (further
   below, matched here with equal specificity via the ID) sets display
   from its resting "block" to visible. The reveal itself -- left/
   right/display switching from hidden to shown -- MUST stay scoped to
   :hover/.focus, matching Storefront's exact trigger pattern, or an ID
   selector's specificity would force the panel permanently open
   instead of only on hover. */
#menu-item-112929 > ul.sub-menu,
#menu-item-112945 > ul.sub-menu {
    width: auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2em 0.4em;
    padding: 1em 1.4em;
}
#menu-item-112929:hover > ul.sub-menu,
#menu-item-112929.focus > ul.sub-menu,
#menu-item-112945:hover > ul.sub-menu,
#menu-item-112945.focus > ul.sub-menu {
    left: 0;
    right: 0;
    display: flex;
}
#menu-item-112929 > ul.sub-menu > li,
#menu-item-112945 > ul.sub-menu > li {
    flex: 0 0 auto;
}
#menu-item-112929 > ul.sub-menu > li > a,
#menu-item-112945 > ul.sub-menu > li > a {
    display: block;
    padding: 0.5em 0.9em;
    border-radius: var(--npw-radius-sm);
    white-space: nowrap;
}
#menu-item-112929 > ul.sub-menu > li > a:hover,
#menu-item-112945 > ul.sub-menu > li > a:hover {
    background: var(--npw-grey);
}
#menu-item-112929 > ul.sub-menu > li.npw-nav-view-all,
#menu-item-112945 > ul.sub-menu > li.npw-nav-view-all {
    flex: 0 0 auto;
    margin-left: auto;
}
#menu-item-112929 > ul.sub-menu > li.npw-nav-view-all > a,
#menu-item-112945 > ul.sub-menu > li.npw-nav-view-all > a {
    background: var(--npw-navy);
    color: #ffffff;
    font-weight: 700;
}
#menu-item-112929 > ul.sub-menu > li.npw-nav-view-all > a:hover,
#menu-item-112945 > ul.sub-menu > li.npw-nav-view-all > a:hover {
    background: var(--npw-hivis);
    color: var(--npw-navy);
}

/* Cart icon -- Storefront's own #site-header-cart, restyled flat/minimal
   to match rather than its default boxed treatment. */
.site-header-cart.menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-header-cart .cart-contents {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--npw-navy);
    font-weight: 700;
    font-size: 0.92em;
    text-decoration: none;
}
.site-header-cart .cart-contents:hover { color: var(--npw-hivis); }
.site-header-cart .cart-contents .count {
    background: var(--npw-hivis);
    color: #fff;
    border-radius: 999px;
    padding: 0.1em 0.6em;
    font-size: 0.85em;
    font-weight: 800;
}

/* Mini-cart dropdown -- Storefront sizes this panel at width:100% of
   .site-header-cart itself (see storefront/.../woocommerce.css). That
   made sense when the trigger was a ~22%-of-header-row box; now that
   .site-header-cart is reset to its natural (small icon + total) width
   above, 100% of it is nowhere near enough room for a product thumbnail
   + name + price without wrapping. A dropdown panel showing real cart
   contents needs its own sensible fixed width, decoupled from
   whatever size its trigger happens to be -- not sized to be exactly as
   wide as the button that opens it. left/right also flip from
   Storefront's default (which opens flush with the trigger's left edge)
   since the cart now sits near the right edge of the page; opening
   left-aligned would push much of the panel off-screen. */
.site-header-cart .widget_shopping_cart {
    width: 320px;
    max-width: calc(100vw - 2em);
}
.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart {
    left: auto;
    right: 0;
}

/* "Get a Quote" nav CTA -- deliberately distinct from ordinary nav links
   so a visitor scanning the header for "how do I get pricing on a bulk/
   custom order" finds it immediately rather than reading every item. */
.main-navigation .npw-nav-quote-cta > a {
    background: var(--npw-hivis);
    color: var(--npw-navy) !important;
    border-radius: 999px;
    padding: 0.55em 1.1em !important;
    font-weight: 800;
}
.main-navigation .npw-nav-quote-cta > a:hover {
    background: var(--npw-hivis-dark);
    color: #fff !important;
}

/* Top bar -- rendered on storefront_before_header (functions.php), i.e.
   OUTSIDE <header>/.col-full entirely, specifically so this background
   reaches both edges of the viewport with no white gap above or beside
   it (the old .npw-value-strip lived INSIDE .site-header .col-full,
   which is what caused both the "gap above the top bar" and "not edge to
   edge" complaints -- col-full's own side padding and the header's
   padding-top wrapped around it). .npw-top-bar-inner is the one thing
   capped to the site's normal content width; the coloured band itself is
   full-bleed. One line, one real number, one honest claim -- not the
   previous five-item strip. */
.npw-top-bar {
    background: var(--npw-navy);
    color: #fff;
}
.npw-top-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.5em 1.5em;
    text-align: center;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.npw-top-bar a { color: #fff; text-decoration: none; }
.npw-top-bar a:hover { text-decoration: underline; }
.npw-top-bar-mobile { display: none; }

/* Buttons ------------------------------------------------------------ */
/* :not(.menu-toggle) on every bare button/input selector below -- this
   pill-shaped, heavily-padded treatment was overriding Storefront's own
   mobile nav toggle, which relies on specific padding to position its
   hamburger-icon pseudo-element. The override didn't just restyle it, it
   broke the icon's positioning so the icon and the "Menu" label rendered
   on top of each other. The toggle gets its own explicit styles below
   instead of this generic treatment. */
.button,
button:not(.menu-toggle),
input[type="submit"],
.wp-block-button__link,
a.button.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--npw-navy) !important;
    border-color: var(--npw-navy) !important;
    color: #ffffff !important;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 999px;
    padding: 0.75em 1.6em !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}

.button:hover,
button:not(.menu-toggle):hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--npw-hivis) !important;
    border-color: var(--npw-hivis) !important;
    color: var(--npw-navy) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(232, 89, 12, 0.25);
}

/* Mobile nav toggle -- Storefront's own hamburger-icon mechanism (a
   ::before pseudo-element positioned within specific left padding) kept
   intact; only recoloured to match the site and given breathing room
   from the utility row above it. */
.menu-toggle {
    background: var(--npw-navy);
    color: #fff;
    border: none;
    border-radius: var(--npw-radius-sm);
    float: none;
    max-width: none;
    margin: 0.8em 0;
}
.menu-toggle:hover {
    background: var(--npw-hivis);
    color: var(--npw-navy);
}

.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt {
    background-color: var(--npw-hivis) !important;
    color: #0B0B0C !important;
}
.woocommerce a.button.alt:hover { background-color: var(--npw-hivis-dark) !important; color: #fff !important; }

/* Cart & Checkout blocks (Gutenberg wc-blocks, not the classic shortcode
   template -- this site's Cart/Checkout pages use the block editor
   version). The bare `button` selector above is unscoped and was landing
   on every button WooCommerce Blocks itself renders too, including tiny
   fixed-size icon controls it never designed to take a big pill shape:
   the quantity +/- stepper and the per-line "Remove item" control. The
   forced 0.75em/1.6em padding and 999px radius blew them up past their
   intended compact footprint, so they visually collided with the
   quantity number and each other -- the squashed/overlapping look on
   the Cart page. Restores WC Blocks' own compact sizing for just those
   controls; the real full-size actions in the same pages ("Proceed to
   Checkout", "Place order", "Apply coupon") are untouched and keep the
   site's normal pill-button branding. */
.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button,
.wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
    background-color: transparent !important;
    color: var(--npw-navy) !important;
    border-radius: var(--npw-radius-sm) !important;
    padding: 0 !important;
}
.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover,
.wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
    background-color: var(--npw-grey) !important;
    color: var(--npw-hivis) !important;
    transform: none;
    box-shadow: none;
}

/* Product cards -------------------------------------------------------- */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.4em;
}
/* WooCommerce core still ships a float-era clearfix
   (ul.products::before/::after { content:""; display:table; }) --
   under display:grid that generated box becomes a real grid item and
   silently eats the first cell, shifting every product over by one
   (most visible on a 2-column mobile grid: an empty top-left cell and
   the first product pushed into column 2). Grid needs no clearfix. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;
}
.woocommerce ul.products li.product {
    background: #ffffff;
    border: 1px solid var(--npw-border);
    border-radius: var(--npw-radius);
    padding: 1.1em;
    box-shadow: var(--npw-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--npw-shadow-hover);
    transform: translateY(-3px);
}

.woocommerce ul.products li.product img {
    border-radius: var(--npw-radius-sm);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-weight: 700;
    font-size: 0.98em;
    color: var(--npw-text);
    margin: 0.6em 0 0.3em;
}

.woocommerce ul.products li.product .price {
    color: var(--npw-navy);
    font-weight: 800;
    font-size: 1.02em;
}
.woocommerce ul.products li.product .price del { color: #a7acb8; font-weight: 500; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.np-vat-line { font-weight: 500 !important; }

.woocommerce span.onsale {
    background-color: var(--npw-hivis);
    color: #ffffff;
    font-weight: 700;
    border-radius: 999px;
    top: 0.6em;
    left: 0.6em;
}

/* Category / archive headers ------------------------------------------- */
.woocommerce-products-header__title,
.page-title,
.entry-title {
    color: var(--npw-navy);
    font-weight: 800;
}

.term-description,
.woocommerce-products-header + .term-description {
    background: var(--npw-grey);
    border-radius: var(--npw-radius);
    border-left: 4px solid var(--npw-hivis);
    padding: 1.1em 1.6em;
    margin-bottom: 2em;
    color: var(--npw-text-soft);
}

/* Sidebar filters (see northprint-shop-filters.php) --------------------- */
.npw-filter-box {
    background: #fff;
    border: 1px solid var(--npw-border);
    border-radius: var(--npw-radius);
    padding: 1.2em;
    margin-bottom: 1.4em;
}
.npw-filter-box h3 {
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--npw-navy);
    margin: 0 0 0.8em;
}
.npw-filter-box ul { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.npw-filter-box li { margin: 0.35em 0; }
.npw-filter-box a {
    color: var(--npw-text-soft);
    font-size: 0.9em;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
}
.npw-filter-box a:hover, .npw-filter-box a.is-active { color: var(--npw-hivis); font-weight: 700; }
.npw-filter-box .count { color: #a7acb8; }
.npw-filter-clear { display: inline-block; margin-top: 0.6em; font-size: 0.85em; color: var(--npw-hivis); }

/* Single product page ---------------------------------------------------- */
.single-product div.product .product_title {
    font-size: 2em;
    margin-bottom: 0.3em;
}
.single-product div.product p.price,
.single-product div.product span.price {
    color: var(--npw-navy);
    font-size: 1.7em;
    font-weight: 800;
}
.single-product div.product .woocommerce-product-details__short-description {
    color: var(--npw-text-soft);
    margin-bottom: 1.2em;
}

/* Variation dropdowns -- bare browser <select> by default, restyled to
   match the rest of the form controls on the page. */
.single-product table.variations select,
.single-product .quantity .qty {
    border: 1px solid var(--npw-border);
    border-radius: var(--npw-radius-sm);
    padding: 0.6em 0.9em;
    font: inherit;
    font-weight: 600;
    color: var(--npw-navy);
    background: #fff;
    min-width: 160px;
}
.single-product table.variations select:focus,
.single-product .quantity .qty:focus {
    outline: none;
    border-color: var(--npw-navy);
}
.single-product table.variations {
    width: auto;
}
.single-product table.variations td {
    padding: 0.4em 0;
}
.single-product .quantity .qty { min-width: 70px; text-align: center; }
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
}
.single-product .woocommerce-variation-price .price {
    font-size: 1.3em;
}

/* Tabs (Description / Additional information / Size Guide / Reviews) --
   WooCommerce's default is a boxed, bordered tab strip that looks like an
   unstyled browser widget next to the rest of this page. Restyled as a
   flat underline-tab row matching the site's minimal aesthetic. */
/* Storefront's own woocommerce.css turns this into a floated 30%-width
   vertical tab sidebar (ul.tabs { width: 30%; float: left }) with the
   panel floated right beside it -- a completely different layout to the
   flat horizontal underline-tab row intended here. float/width need an
   explicit reset, not just a new display value, or the flex row above
   just wraps inside that leftover 30%-wide floated box (each item on
   its own line, looking like a vertical list). */
.woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5em 1.8em;
    border-bottom: 1px solid var(--npw-border);
    border-top: none !important;
    padding: 0 !important;
    margin: 0 0 2em !important;
    list-style: none;
    width: 100% !important;
    float: none !important;
}
.woocommerce-tabs .panel {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
.woocommerce-tabs ul.tabs li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 0.2em 0 0.9em !important;
    color: var(--npw-text-soft);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    color: var(--npw-navy);
    border-bottom-color: var(--npw-hivis);
}
.woocommerce-tabs .panel h2 {
    font-size: 1.3em;
}
.woocommerce-tabs table.shop_attributes {
    border: none;
    width: 100%;
}
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
    border: none;
    border-bottom: 1px solid var(--npw-border);
    padding: 0.7em 0.5em;
}
.woocommerce-tabs table.shop_attributes th {
    color: var(--npw-navy);
    font-weight: 700;
    width: 200px;
}

/* Related products heading spacing to match rest of page rhythm */
.related.products > h2 {
    font-size: 1.5em;
    margin: 2.5em 0 1em;
}

/* WhatsApp floating button ---------------------------------------------- */
.npw-whatsapp-fab {
    position: fixed;
    /* env(safe-area-inset-bottom) clears the home-indicator/gesture area
       on notched phones; the extra 22px on top of it (see mobile override
       below) clears the browser's own bottom URL/tab bar on mobile
       Safari/Chrome, which otherwise sits directly under this button and
       reads as the button "overlapping the bottom icon bar". */
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    right: 22px;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    transition: transform 0.15s ease;
}
.npw-whatsapp-fab:hover { transform: scale(1.07); }
.npw-whatsapp-fab svg { width: 28px; height: 28px; fill: #fff; }

/* Footer ---------------------------------------------------------------- */
.site-footer,
#colophon {
    background-color: var(--npw-navy-dark);
    color: #b7bdca;
}

.site-footer a { color: #ffffff; }
.site-footer a:hover { color: var(--npw-hivis); }

.npw-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2em;
    padding: 3em 0 2em;
    max-width: 1200px;
    margin: 0 auto;
}
.npw-footer-grid h4 {
    color: #fff;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1em;
}
.npw-footer-grid ul { list-style: none; margin: 0; padding: 0; }
.npw-footer-grid li { margin-bottom: 0.6em; font-size: 0.92em; }
.npw-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1.2em 0;
    text-align: center;
    font-size: 0.82em;
}

/* Homepage hero (matches the block markup in export/homepage_content.html).
   Storefront never registers a theme editor-color-palette, so Gutenberg's
   "has-white-color"/"has-black-background-color" classes in the saved
   block content are inert -- no browser CSS rule actually exists for
   them. The background above was already forced with an explicit
   background-color rule, but nothing set the text to white, so it fell
   through to the site's default near-black body text colour and the
   global `p { color: ... }` rule -- both illegible on a navy background.
   Scoped compound selectors here (ancestor class + element) explicitly
   set every text element in the hero to white -- no !important needed,
   since ".has-black-background-color p" already beats the bare "p" rule
   above on specificity. */
.wp-block-group.has-black-background-color {
    background: linear-gradient(135deg, var(--npw-navy) 0%, var(--npw-navy-dark) 100%) !important;
    border-radius: 0 0 24px 24px;
    color: #ffffff;
}
.wp-block-group.has-black-background-color h1,
.wp-block-group.has-black-background-color h2,
.wp-block-group.has-black-background-color h3,
.wp-block-group.has-black-background-color p {
    color: #ffffff;
}
.wp-block-group.has-black-background-color .wp-block-buttons {
    flex-wrap: wrap;
    gap: 0.8em;
}
.wp-block-group.has-black-background-color .is-style-outline .wp-block-button__link {
    color: #fff;
    border: 2px solid #fff;
    background: transparent;
}
.wp-block-group.has-black-background-color .is-style-outline .wp-block-button__link:hover {
    background: #fff;
    color: var(--npw-navy);
}
/* The default solid button is the same near-black as this hero's own
   background (both use --npw-navy) -- invisible without an override.
   The primary hero action gets the accent colour instead, both to fix
   that contrast bug and because it's the one button on the page most
   worth making impossible to miss. */
.wp-block-group.has-black-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background-color: var(--npw-hivis) !important;
    border-color: var(--npw-hivis) !important;
    color: #ffffff !important;
}
.wp-block-group.has-black-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--npw-navy) !important;
}
.npw-hero-trust {
    margin-top: 1.2em !important;
    opacity: 0.85;
}

/* Closing note -- a light, bordered strip so the final "who we are"
   paragraph reads as a deliberate section, not an orphaned line of text
   dropped in above the footer. */
.npw-closing-note {
    border-top: 1px solid var(--npw-border);
    border-bottom: 1px solid var(--npw-border);
    padding: 2em 0;
    margin: 2.5em auto 0;
    text-align: center;
}
.npw-closing-note p {
    max-width: 62ch;
    margin: 0 auto;
}

/* Tablet ------------------------------------------------------------------ */
@media (max-width: 992px) {
    .npw-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .site-header .site-title a { font-size: 1.25em; }
    .site-header .custom-logo { height: 26px; }
    .npw-header-utility { gap: 1em; }
    /* One line only on mobile, per explicit instruction -- three clauses
       don't fit one line at narrow widths, so mobile drops to the phone
       number alone rather than wrapping to a second line. */
    .npw-top-bar-full { display: none; }
    .npw-top-bar-mobile { display: inline; }
    .npw-whatsapp-fab { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    /* Nav row: the toggle button and search bar no longer fit comfortably
       side by side once the full nav links list disappears behind the
       toggle -- stack the toggle above a full-width search bar instead
       of the desktop's single tight row. */
    .storefront-primary-navigation .col-full {
        flex-wrap: wrap;
        padding-top: 0;
        padding-bottom: 0.8em;
    }
    .storefront-primary-navigation .site-search {
        flex: 1 1 100%;
        max-width: none;
    }
    .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8em; }
    .wp-block-group.has-black-background-color { padding-top: 2.2em !important; padding-bottom: 2.2em !important; }
    .wp-block-group.has-black-background-color .wp-block-buttons { flex-direction: column; align-items: stretch; }
    .wp-block-group.has-black-background-color .wp-block-button { width: 100%; }
    .wp-block-group.has-black-background-color .wp-block-button__link { text-align: center; }
    .npw-footer-grid { grid-template-columns: 1fr; text-align: center; }
}