/* Theme Name: SSU Soccer Theme URI: https://soccershopusa.com/ Description: Light soccer-shop child theme for the SSU catalog clone. White surfaces, crest navy and USA red used as accents, tuned for kit and boot photography. Author: SSU Tools Template: storefront Version: 21.2 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 7.4 WC requires at least: 8.0 WC tested up to: 11.0.1 */ :root { --ssu-navy: #123a6d; --ssu-navy-dark: #0d2a50; --ssu-red: #d81f26; --ssu-red-dark: #b0161c; --ssu-pitch: #0b6b3a; --ssu-ink: #1b2430; --ssu-muted: #6b7787; --ssu-line: #e6eaf0; --ssu-bg: #fbfcfe; } body { background: var(--ssu-bg); color: var(--ssu-ink); } a { color: var(--ssu-navy); } a:hover { color: var(--ssu-red); } /* ---------- header: white, with the flag stripe as the only strong colour ---------- */ .site-header { background: #fff; border-bottom: 1px solid var(--ssu-line); box-shadow: 0 1px 3px rgba(18, 58, 109, .05); padding-top: .5em; padding-bottom: .5em; position: relative; } .site-header::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--ssu-navy) 0 34%, var(--ssu-red) 34% 68%, #dfe5ee 68% 100%); } .site-header .custom-logo-link img { max-height: 56px; width: auto; } .site-header, .site-header a, .site-header .site-title a { color: var(--ssu-ink); } .site-branding .site-description { color: var(--ssu-muted); } /* ---------- navigation: light bar, navy type ---------- */ .storefront-primary-navigation, .main-navigation { background: #fff; } .main-navigation ul li a, .site-header-cart .cart-contents { color: var(--ssu-navy); font-weight: 600; letter-spacing: .01em; } .main-navigation ul li a:hover, .site-header-cart .cart-contents:hover { color: var(--ssu-red); } .main-navigation ul.menu > li.current-menu-item > a { box-shadow: inset 0 -3px 0 var(--ssu-red); } .main-navigation ul.nav-menu ul.children, .main-navigation ul.nav-menu ul.sub-menu { background: #fff; border: 1px solid var(--ssu-line); box-shadow: 0 8px 24px rgba(18,58,109,.1); } /* ---------- buttons ---------- */ button, .button, input[type="submit"], .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--ssu-navy); color: #fff; font-weight: 700; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; font-size: .9em; } button:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--ssu-navy-dark); color: #fff; } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit.alt { background: var(--ssu-red); } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--ssu-red-dark); } /* ---------- product grid ---------- */ .woocommerce ul.products li.product { background: #fff; border: 1px solid var(--ssu-line); border-radius: 10px; padding: 12px 12px 16px; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .woocommerce ul.products li.product:hover { border-color: #c9d5e6; box-shadow: 0 10px 24px rgba(18, 58, 109, .10); transform: translateY(-2px); } .woocommerce ul.products li.product img { border-radius: 8px; background: #fff; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .95em; font-weight: 600; line-height: 1.35; color: var(--ssu-ink); } .woocommerce ul.products li.product .price { color: var(--ssu-navy); font-weight: 700; } .woocommerce ul.products li.product .price del { color: var(--ssu-muted); font-weight: 400; } .woocommerce ul.products li.product .price ins { color: var(--ssu-red); text-decoration: none; } .woocommerce span.onsale { background: var(--ssu-red); color: #fff; border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .72em; padding: .35em .9em; min-height: auto; min-width: auto; line-height: 1.6; } /* ---------- single product ---------- */ .woocommerce div.product { background: #fff; border: 1px solid var(--ssu-line); border-radius: 12px; padding: 22px; } .woocommerce div.product .product_title { color: var(--ssu-navy); font-weight: 800; letter-spacing: -.01em; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ssu-navy); font-weight: 800; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ssu-red); } .woocommerce .quantity .qty { border-radius: 6px; border: 1px solid var(--ssu-line); } .woocommerce .stock.in-stock { color: var(--ssu-pitch); font-weight: 600; } .woocommerce .stock.out-of-stock { color: var(--ssu-red); font-weight: 600; } /* ---------- category cards ---------- */ .woocommerce ul.products li.product-category a img { border-radius: 8px; } .woocommerce ul.products li.product-category h2.woocommerce-loop-category__title { background: #fff; color: var(--ssu-navy); border: 1px solid var(--ssu-line); border-radius: 6px; font-size: .9em; padding: .6em; font-weight: 700; } .woocommerce ul.products li.product-category mark { background: transparent; color: var(--ssu-muted); } /* ---------- sidebar / widgets ---------- */ .widget { background: #fff; border: 1px solid var(--ssu-line); border-radius: 10px; padding: 16px; } .widget .widget-title { color: var(--ssu-navy); font-size: .95em; font-weight: 700; } /* ---------- footer: light ---------- */ .site-footer { background: #fff; color: var(--ssu-muted); border-top: 1px solid var(--ssu-line); box-shadow: inset 0 3px 0 0 rgba(18,58,109,.06); } .site-footer a { color: var(--ssu-navy); } .site-footer a:hover { color: var(--ssu-red); } .site-footer .widget-title, .site-footer h2 { color: var(--ssu-ink); } /* ---------- homepage hero: light, tinted, not a dark slab ---------- */ .ssu-hero { background: linear-gradient(115deg, #ffffff 0%, #f2f6fc 46%, #fdf1f2 100%), repeating-linear-gradient(90deg, rgba(18,58,109,.03) 0 92px, transparent 92px 184px); border: 1px solid var(--ssu-line); border-left: 5px solid var(--ssu-red); color: var(--ssu-ink); border-radius: 12px; padding: 28px 30px; margin-bottom: 28px; } .ssu-hero h2 { color: var(--ssu-navy); margin: 0 0 6px; font-weight: 800; letter-spacing: -.02em; } .ssu-hero p { margin: 0; color: var(--ssu-muted); } .ssu-hero .ssu-hero-tag { display: inline-block; margin-bottom: 10px; font-size: .72em; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; background: #fff; color: var(--ssu-navy); border: 1px solid var(--ssu-line); border-radius: 999px; padding: 4px 12px; } /* ---------- focus rings ---------- Storefront ships a purple outline. Keep a visible ring for keyboard users, but not on mouse clicks, and in the crest colours rather than purple. */ a, button, input, select, textarea, .button, [tabindex] { outline-color: var(--ssu-navy); } a:focus, button:focus, input:focus, select:focus, textarea:focus, .button:focus, [tabindex]:focus { outline: 2px solid var(--ssu-navy); outline-offset: 2px; box-shadow: none; } /* a click should not leave a ring behind */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), .button:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible), input[type="submit"]:focus:not(:focus-visible) { outline: none; box-shadow: none; } a:focus-visible, button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ssu-navy); outline-offset: 2px; } /* text fields read better with a soft ring than a hard outline */ input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="password"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--ssu-navy); box-shadow: 0 0 0 3px rgba(18, 58, 109, .14); } /* highlight and tap flash, both purple by default */ ::selection { background: rgba(18, 58, 109, .18); color: var(--ssu-ink); } ::-moz-selection { background: rgba(18, 58, 109, .18); color: var(--ssu-ink); } a, button, .button { -webkit-tap-highlight-color: rgba(18, 58, 109, .15); } /* Storefront's own purple accents */ .woocommerce-message, .woocommerce-info { border-top-color: var(--ssu-navy); } .woocommerce-message::before, .woocommerce-info::before { color: var(--ssu-navy); } /* ---------- mega menu ---------- Top-level items open a full-width panel of grouped columns, in the style of the big soccer retailers: heading per column, links beneath, sticky header. */ .storefront-primary-navigation { position: sticky; top: 0; z-index: 90; background: #fff; border-bottom: 1px solid var(--ssu-line); box-shadow: 0 2px 6px rgba(18,58,109,.05); } .main-navigation ul.menu, .main-navigation ul.nav-menu { position: relative; } .main-navigation ul.menu > li.menu-item { position: static; } .main-navigation ul.menu > li.menu-item > a { text-transform: uppercase; font-weight: 800; font-size: .82em; letter-spacing: .06em; padding: 1.1em .95em; } .main-navigation ul.menu > li.menu-item-has-children > a::after { content: '▾'; font-size: .7em; margin-left: .45em; opacity: .55; } .main-navigation ul.menu > li.menu-item:hover > a, .main-navigation ul.menu > li.menu-item:focus-within > a { color: var(--ssu-red); box-shadow: inset 0 -3px 0 var(--ssu-red); } /* the panel itself */ .main-navigation ul.menu > li.menu-item-has-children > ul.sub-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; width: 100%; background: #fff; border: 1px solid var(--ssu-line); border-top: 3px solid var(--ssu-red); border-radius: 0 0 10px 10px; box-shadow: 0 18px 40px rgba(18, 58, 109, .16); padding: 26px 30px 30px; margin: 0; z-index: 95; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 34px; } .main-navigation ul.menu > li.menu-item-has-children:hover > ul.sub-menu, .main-navigation ul.menu > li.menu-item-has-children:focus-within > ul.sub-menu { display: grid; } /* columns */ .main-navigation ul.menu > li > ul.sub-menu > li { position: static; float: none; width: auto; border: 0; background: none; padding: 0; } .main-navigation ul.menu > li > ul.sub-menu > li > a { display: block; padding: 0 0 8px; margin-bottom: 8px; font-size: .76em; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--ssu-navy); border-bottom: 1px solid var(--ssu-line); cursor: default; } .main-navigation ul.menu > li > ul.sub-menu > li.mega-col-title > a:hover { color: var(--ssu-navy); } /* links inside a column */ .main-navigation ul.menu > li > ul.sub-menu ul.sub-menu { display: block; position: static; width: auto; background: none; border: 0; box-shadow: none; padding: 0; margin: 0; opacity: 1; visibility: visible; } .main-navigation ul.menu > li > ul.sub-menu ul.sub-menu li { border: 0; width: auto; } .main-navigation ul.menu > li > ul.sub-menu ul.sub-menu li a { display: block; padding: 5px 0; font-size: .88em; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ssu-ink); } .main-navigation ul.menu > li > ul.sub-menu ul.sub-menu li a:hover { color: var(--ssu-red); padding-left: 4px; } /* Storefront's mobile menu should stay a plain list */ @media (max-width: 767px) { .main-navigation ul.menu > li.menu-item-has-children > ul.sub-menu { position: static; display: block; grid-template-columns: 1fr; border: 0; box-shadow: none; padding: 0 0 0 12px; border-radius: 0; } .storefront-primary-navigation { position: static; } } .mega-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main-navigation ul.menu > li > ul.sub-menu ul.sub-menu li a { display: flex; align-items: center; } /* ---------- navigation gets its own full-width row under the header ---------- */ .storefront-primary-navigation { width: 100%; background: #fff; border-top: 1px solid var(--ssu-line); border-bottom: 1px solid var(--ssu-line); box-shadow: 0 2px 8px rgba(18, 58, 109, .06); } .storefront-primary-navigation .col-full { padding-top: 0; padding-bottom: 0; } .main-navigation { float: none; width: auto; margin: 0; } .main-navigation ul.menu, .main-navigation ul.nav-menu { display: flex; flex-wrap: wrap; align-items: center; margin: 0; } .main-navigation ul.menu > li.menu-item { float: none; } .main-navigation ul.menu > li.menu-item > a { display: block; } /* cart sits at the end of the same row rather than stacking */ .site-header-cart { float: none; margin: 0; } .site-header-cart .cart-contents { padding: 1.1em .9em; font-size: .82em; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } @media (max-width: 767px) { .storefront-primary-navigation .col-full { display: block; } .site-header .col-full { flex-wrap: wrap; } } /* belt and braces: hide the cart markup if the theme prints it anyway */ .site-header-cart, .storefront-primary-navigation .site-header-cart, .site-header .site-header-cart, .handheld-header .site-header-cart { display: none !important; } /* product search back in the header, sized to the theme */ .site-search { display: block !important; float: none; width: 100%; max-width: 420px; margin: 10px 0 0 auto; } .site-search .widget_product_search form { position: relative; margin: 0; } .site-search .widget_product_search input[type="search"] { width: 100%; padding: 10px 14px; border: 1px solid var(--ssu-line); border-radius: 999px; background: var(--ssu-bg); font-size: .9em; } .site-search .widget_product_search input[type="search"]:focus { background: #fff; border-color: var(--ssu-navy); box-shadow: 0 0 0 3px rgba(18,58,109,.12); outline: none; } .site-search .widget_product_search button[type="submit"] { display: none; } @media (max-width: 767px) { .site-search { max-width: none; margin-left: 0; } } /* ---------- header layout: let Storefront own it, we only add the nav row ---------- */ .site-header { overflow: visible; } .site-header > .col-full .site-branding { float: none; width: auto; margin-bottom: .5em; } .site-header .site-branding img { display: block; } /* nav row: one clean line, cart and search gone */ .storefront-primary-navigation { clear: both; overflow: visible; } .main-navigation { float: none; width: 100%; } .main-navigation ul.menu { display: flex; flex-wrap: wrap; align-items: center; } .site-header-cart, .storefront-handheld-footer-bar { display: none !important; } /* the mega panel must sit above the page, and the header must not clip it */ .site-header, .storefront-primary-navigation, .main-navigation, .main-navigation ul.menu { overflow: visible; } .main-navigation ul.menu > li.menu-item-has-children > ul.sub-menu { z-index: 200; } .storefront-primary-navigation { z-index: 100; } /* ---------- wide layout ---------- Storefront caps the container around 966px, which leaves huge margins on a desktop and squeezes the product grid. Widen it and let the grid breathe. */ .col-full { max-width: 1320px; padding-left: 28px; padding-right: 28px; box-sizing: border-box; } /* the page banner and hero follow the same width */ .storefront-primary-navigation .col-full, .site-header .col-full, .site-footer .col-full { max-width: 1320px; } /* more products per row once there is room */ @media (min-width: 1280px) { .woocommerce ul.products.columns-4 li.product, .woocommerce-page ul.products.columns-4 li.product { width: 22.6%; margin-right: 3.2%; } .woocommerce ul.products.columns-4 li.product:nth-child(4n), .woocommerce-page ul.products.columns-4 li.product:nth-child(4n) { margin-right: 0; } } /* single product: use the width rather than a narrow column */ @media (min-width: 1280px) { .woocommerce div.product div.images { width: 46%; } .woocommerce div.product div.summary { width: 50%; } } @media (max-width: 1100px) { } @media (max-width: 767px) { } /* ---------- overflow fix + responsiveness ---------- The panel's padding was adding to its width, so an 8-column grid pushed past the container edge. Border-box everywhere inside the menu, and column counts that step down with the viewport. */ .main-navigation ul.menu > li > ul.sub-menu, .main-navigation ul.menu > li > ul.sub-menu * { box-sizing: border-box; } .main-navigation ul.menu > li.menu-item-has-children > ul.sub-menu { max-width: 100%; overflow-x: hidden; } .main-navigation ul.menu > li > ul.sub-menu > li { min-width: 0; } /* grid items may shrink */ .main-navigation ul.menu > li > ul.sub-menu ul.sub-menu li a { min-width: 0; word-break: break-word; } /* brand tiles step down cleanly instead of squeezing */ @media (max-width: 1280px) { } @media (max-width: 980px) { } /* grouped panels: fewer columns as space runs out */ @media (max-width: 1100px) { .main-navigation ul.menu > li.menu-item-has-children > ul.sub-menu { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 22px; padding: 20px 22px 24px; } } /* the top-level row scrolls rather than wrapping into two lines */ @media (max-width: 1100px) and (min-width: 768px) { .main-navigation ul.menu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .main-navigation ul.menu::-webkit-scrollbar { display: none; } .main-navigation ul.menu > li.menu-item > a { padding: 1.1em .7em; font-size: .76em; } } /* ---------- the rest of the page ---------- */ .col-full { width: 100%; } img, .woocommerce ul.products li.product img, .pcard img { max-width: 100%; height: auto; } /* Storefront gives .col-full its own side margins below 1064px and 568px (1.41575em / 2.617924em, on top of its own padding) to make room around a centred, narrower column. This theme instead runs .col-full edge-to-edge with its own padding at every width, so those margins were never zeroed — they just stacked on top of a box already sized to 100%, pushing everything right and clipping the far edge on any screen under ~1064px wide. */ @media (max-width: 1064px) { .col-full { margin-left: 0 !important; margin-right: 0 !important; } } @media (max-width: 1100px) { .ssu-hero { padding: 22px 20px; } .ssu-hero h2 { font-size: 1.4em; } } @media (max-width: 767px) { .col-full { padding-left: 16px; padding-right: 16px; } .site-header .custom-logo-link img { max-height: 60px; } .ssu-hero { padding: 18px 16px; border-radius: 10px; } .woocommerce ul.products li.product { padding: 8px 8px 12px; } .woocommerce div.product { padding: 14px; } .woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100%; float: none; } } @media (max-width: 480px) { } /* tables (orders, variations) scroll instead of forcing the page wide */ .woocommerce table.shop_table, .woocommerce table.shop_attributes { display: block; overflow-x: auto; max-width: 100%; } /* ---------- top-level nav: louder text, evenly spread ---------- */ .main-navigation ul.menu, .main-navigation ul.nav-menu { display: flex; align-items: stretch; width: 100%; } /* each item takes an equal share of the row instead of hugging the left */ .main-navigation ul.menu > li.menu-item { flex: 1 1 0; min-width: 0; text-align: center; } .main-navigation ul.menu > li.menu-item > a { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; height: 100%; padding: 1.15em .5em; font-size: .95em; font-weight: 800; letter-spacing: .04em; color: var(--ssu-navy); white-space: nowrap; } .main-navigation ul.menu > li.menu-item > a::after { opacity: .7; margin-left: 0; } .main-navigation ul.menu > li.menu-item:hover > a, .main-navigation ul.menu > li.menu-item:focus-within > a { color: var(--ssu-red); background: color-mix(in srgb, var(--ssu-red) 5%, #fff); box-shadow: inset 0 -3px 0 var(--ssu-red); } /* thin divider between items so the even spacing reads as deliberate */ .main-navigation ul.menu > li.menu-item + li.menu-item { border-left: 1px solid var(--ssu-line); } @media (max-width: 1100px) and (min-width: 768px) { .main-navigation ul.menu { flex-wrap: nowrap; } .main-navigation ul.menu > li.menu-item > a { font-size: .84em; padding: 1.05em .35em; letter-spacing: .02em; } } @media (max-width: 767px) { .main-navigation ul.menu { display: block; } .main-navigation ul.menu > li.menu-item { text-align: left; border-left: 0; } .main-navigation ul.menu > li.menu-item > a { justify-content: flex-start; } } /* ---------- nav bar spans the viewport, items share it equally ---------- The nav row was capped at the 1320px content container, so on a wide screen the items bunched in the middle. Let the bar go edge to edge. */ .storefront-primary-navigation .col-full { max-width: 1320px; /* same container as the rest of the page */ width: 100%; padding-left: 28px; padding-right: 28px; } .main-navigation { float: none !important; width: 100% !important; margin: 0 !important; } .main-navigation ul.menu, .main-navigation ul.nav-menu, .main-navigation div.menu > ul { display: flex !important; width: 100% !important; margin: 0 !important; padding: 0 !important; align-items: stretch; justify-content: space-between; list-style: none; } .main-navigation ul.menu > li.menu-item { flex: 1 1 0 !important; float: none !important; width: auto !important; min-width: 0; display: flex; } .main-navigation ul.menu > li.menu-item > a { width: 100%; justify-content: center; } /* the dropdown still aligns to the bar, which is now the full width */ .main-navigation ul.menu > li.menu-item-has-children > ul.sub-menu { left: 0; right: 0; width: 100%; } @media (max-width: 767px) { .main-navigation ul.menu { display: block !important; } .main-navigation ul.menu > li.menu-item { display: block; } } /* ================= BRAND TILES (single source of truth) ================= One block only — earlier iterations left several conflicting rules that fought each other. The mark is a background image, so it can never overflow its tile no matter how wide the logo is. */ .main-navigation ul.menu > li.mega-brands > ul.sub-menu { display: none; grid-template-columns: repeat(8, 1fr); gap: 10px; padding: 18px 24px 22px; } .main-navigation ul.menu > li.mega-brands:hover > ul.sub-menu, .main-navigation ul.menu > li.mega-brands:focus-within > ul.sub-menu { display: grid; } .main-navigation ul.menu > li.mega-brands > ul.sub-menu > li { margin: 0; padding: 0; border: 0; } .main-navigation ul.menu > li.mega-brands > ul.sub-menu > li > a { display: block; height: 58px; padding: 10px 12px; border: 1px solid var(--ssu-line); border-radius: 8px; background: #fff; overflow: hidden; } .main-navigation ul.menu > li.mega-brands > ul.sub-menu > li > a:hover { border-color: var(--ssu-navy); box-shadow: 0 3px 10px rgba(18, 58, 109, .12); } /* the mark fills the tile, letterboxed, never cropped */ .main-navigation ul.menu > li.mega-brands .mega-brand-logo { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; } .main-navigation ul.menu > li.mega-brands .mega-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* small marks beside the names in the other panels' brand columns */ .main-navigation ul.menu > li:not(.mega-brands) .mega-brand-logo { display: inline-block; width: 22px; height: 18px; margin-right: 8px; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: contain; } @media (max-width: 1280px) { .main-navigation ul.menu > li.mega-brands > ul.sub-menu { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 980px) { .main-navigation ul.menu > li.mega-brands > ul.sub-menu { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 767px) { .main-navigation ul.menu > li.mega-brands > ul.sub-menu { grid-template-columns: repeat(4, 1fr); padding: 10px; } } /* ---------- sticky nav, with the crest sliding in once it sticks ---------- */ .storefront-primary-navigation { position: sticky; top: 0; z-index: 100; transition: box-shadow .18s ease, padding .18s ease; } .storefront-primary-navigation .col-full { position: relative; } .storefront-primary-navigation.is-stuck { box-shadow: 0 4px 16px rgba(18, 58, 109, .12); } .stuck-logo { position: absolute; left: 8px; top: 50%; width: 0; height: 34px; margin-top: -17px; background-repeat: no-repeat; background-position: left center; background-size: contain; opacity: 0; overflow: hidden; transition: width .18s ease, opacity .18s ease; pointer-events: none; } .storefront-primary-navigation.is-stuck .stuck-logo { width: 40px; opacity: 1; pointer-events: auto; } /* the menu shifts over to make room for it */ .storefront-primary-navigation.is-stuck .main-navigation { padding-left: 52px; transition: padding .18s ease; } @media (max-width: 767px) { .stuck-logo { display: none; } } /* ---------- plain white content area ---------- */ :root { --ssu-bg: #ffffff; } body, .site, #page, .site-content, .content-area, #primary, #content, .woocommerce, .woocommerce-page { background: #fff; } /* cards previously separated themselves by tint; give them a hairline instead */ .woocommerce ul.products li.product { background: #fff; border-color: #e9edf3; } .widget { background: #fff; } .ssu-hero { background: #fff; border: 1px solid #e9edf3; border-left: 5px solid var(--ssu-red); } /* ---------- header and content as one surface ---------- No rules or shadows while the page sits at the top; the nav only announces itself once it sticks, where a boundary is genuinely needed. */ .site-header { background: #fff; border-bottom: 0; box-shadow: none; } .storefront-primary-navigation { background: #fff; border-top: 0; border-bottom: 0; box-shadow: none; } .storefront-primary-navigation.is-stuck { border-bottom: 1px solid #e9edf3; box-shadow: 0 6px 18px rgba(18, 58, 109, .10); } /* the flag stripe stays as the only ornament at the very top */ .site-header::before { height: 3px; } /* dividers between menu items were adding visual noise against a white page */ .main-navigation ul.menu > li.menu-item + li.menu-item { border-left: 0; } /* content starts flush under the nav */ .site-content { padding-top: 1.4em; } #content, .site-content, .content-area { background: #fff; } .ssu-hero { margin-top: 0; } /* ---------- menu keeps a clear edge against the content ---------- */ .storefront-primary-navigation { border-bottom: 1px solid #e3e8ef; box-shadow: 0 10px 22px rgba(18, 58, 109, .12); } .storefront-primary-navigation.is-stuck { box-shadow: 0 6px 18px rgba(18, 58, 109, .12); } .site-content { padding-top: 2em; } /* ---------- home page ---------- */ .home-head { margin: 34px 0 16px; font-size: 1.3em; font-weight: 800; color: var(--ssu-navy); letter-spacing: -.01em; padding-bottom: 8px; border-bottom: 2px solid #eef1f6; } .home-cats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 6px; } .home-cat { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e3e8ef; border-radius: 10px; text-decoration: none; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .home-cat:hover { border-color: var(--ssu-navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(18,58,109,.10); } .home-cat-img { width: 54px; height: 54px; flex: none; border-radius: 8px; background: #f4f7fb center/cover no-repeat; } .home-cat-body { display: grid; gap: 2px; min-width: 0; } .home-cat-body strong { font-size: 1.02em; color: var(--ssu-navy); } .home-cat-body em { font-style: normal; font-size: .82em; color: var(--ssu-muted); } .home-cat-count { font-size: .74em; text-transform: uppercase; letter-spacing: .06em; color: var(--ssu-red); font-weight: 700; } .home-brands { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .home-brand { display: block; height: 66px; padding: 10px 14px; border: 1px solid #e3e8ef; border-radius: 8px; background: #fff; } .home-brand:hover { border-color: var(--ssu-navy); box-shadow: 0 4px 12px rgba(18,58,109,.10); } .home-brand span { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; } /* ---------- make sticky actually stick ---------- Storefront sets overflow-x:hidden on body and .hfeed, which turns them into scroll containers and silently disables position:sticky on the nav. overflow-x:clip stops sideways scrolling without that side effect. */ body, body.home, .hfeed, #page, .site { overflow-x: clip !important; overflow-y: visible !important; } /* ---------- pinned navigation ---------- */ .storefront-primary-navigation { position: relative; z-index: 100; } .storefront-primary-navigation.is-stuck { position: fixed; top: 0; left: 0; right: 0; background: #fff; border-bottom: 1px solid #e3e8ef; box-shadow: 0 6px 18px rgba(18, 58, 109, .12); } .nav-spacer { height: 0; } /* the pinned crest, sized to read at a glance */ .stuck-logo { height: 42px !important; margin-top: -21px !important; background-position: center !important; } .storefront-primary-navigation.is-stuck .stuck-logo { width: 42px !important; } .storefront-primary-navigation.is-stuck .main-navigation { padding-left: 58px; } /* pinned lockup: crest and wordmark together, sized by width not height */ .stuck-logo { height: 34px !important; margin-top: -17px !important; background-position: left center !important; background-size: contain !important; } .storefront-primary-navigation.is-stuck .stuck-logo { width: 150px !important; } .storefront-primary-navigation.is-stuck .main-navigation { padding-left: 166px; } @media (max-width: 1180px) { .storefront-primary-navigation.is-stuck .stuck-logo { width: 112px !important; height: 28px !important; margin-top: -14px !important; left: 6px !important; } .storefront-primary-navigation.is-stuck .main-navigation { padding-left: 124px; } } /* ---------- pinned bar: wider, with search and cart on the right ---------- */ .storefront-primary-navigation.is-stuck .col-full { max-width: 1560px; /* wider than the page container so the menu breathes */ padding-left: 24px; padding-right: 24px; } .storefront-primary-navigation.is-stuck .main-navigation { padding-right: 108px; } .stuck-actions { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: none; align-items: center; gap: 6px; z-index: 3; } .storefront-primary-navigation.is-stuck .stuck-actions { display: flex; } .stuck-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e3e8ef; background: #fff; color: var(--ssu-navy); cursor: pointer; padding: 0; text-decoration: none; } .stuck-btn:hover { border-color: var(--ssu-navy); color: var(--ssu-red); background: #fff; } .stuck-cart-count { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; border-radius: 999px; background: var(--ssu-red); color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; padding: 0 4px; } /* the field the magnifier reveals */ .stuck-search { position: absolute; right: 68px; top: 50%; transform: translateY(-50%); width: 0; opacity: 0; overflow: hidden; transition: width .18s ease, opacity .18s ease; z-index: 3; margin: 0; } .storefront-primary-navigation.is-stuck .col-full.search-open .stuck-search { width: 300px; opacity: 1; } .stuck-search input[type="search"] { width: 100%; padding: 8px 14px; font-size: .9em; border: 1px solid #e3e8ef; border-radius: 999px; background: #fff; } .stuck-search input[type="search"]:focus { outline: none; border-color: var(--ssu-navy); box-shadow: 0 0 0 3px rgba(18,58,109,.12); } .storefront-primary-navigation.is-stuck .col-full.search-open .main-navigation { opacity: .25; pointer-events: none; } @media (max-width: 1180px) { .storefront-primary-navigation.is-stuck .col-full { max-width: 100%; } .storefront-primary-navigation.is-stuck .col-full.search-open .stuck-search { width: 200px; } } @media (max-width: 767px) { .stuck-actions, .stuck-search { display: none !important; } } /* ---------- footer ---------- */ .site-footer { padding: 0; background: #fff; border-top: 0; } .ssu-footer { background: #f7f9fc; border-top: 1px solid #e3e8ef; padding: 40px 0 0; margin-top: 48px; } .ssu-footer-grid { display: grid; gap: 30px 36px; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; padding-bottom: 32px; } @media (max-width: 1100px) { .ssu-footer-grid { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 640px) { .ssu-footer-grid { grid-template-columns: 1fr; gap: 24px; } } .ssu-foot-logo { max-width: 190px; height: auto; display: block; margin-bottom: 12px; } .ssu-foot-brand p { font-size: .86em; color: var(--ssu-muted); line-height: 1.6; margin: 0 0 14px; max-width: 34ch; } .ssu-social { display: flex; gap: 8px; } .ssu-social a { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e3e8ef; color: var(--ssu-navy); font-size: 11px; font-weight: 800; text-transform: uppercase; text-decoration: none; letter-spacing: .02em; } .ssu-social a:hover { background: var(--ssu-navy); border-color: var(--ssu-navy); color: #fff; } .ssu-foot-col h3 { font-size: .78em; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--ssu-navy); margin: 0 0 12px; } .ssu-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .ssu-foot-col a { font-size: .88em; color: var(--ssu-ink); text-decoration: none; display: flex; justify-content: space-between; gap: 10px; } .ssu-foot-col a:hover { color: var(--ssu-red); } .ssu-foot-col a span { color: var(--ssu-muted); font-size: .82em; font-variant-numeric: tabular-nums; } .ssu-foot-news p { font-size: .84em; color: var(--ssu-muted); margin: 0 0 10px; line-height: 1.55; } .ssu-news-form { display: flex; gap: 6px; } .ssu-news-form input { flex: 1; min-width: 0; padding: 9px 12px; font-size: .88em; border: 1px solid #dbe2ec; border-radius: 8px; background: #fff; } .ssu-news-form input:focus { outline: none; border-color: var(--ssu-navy); box-shadow: 0 0 0 3px rgba(18,58,109,.12); } .ssu-news-form button { padding: 9px 18px; border: 0; border-radius: 8px; cursor: pointer; background: var(--ssu-red); color: #fff; font-weight: 800; font-size: .84em; text-transform: uppercase; letter-spacing: .04em; } .ssu-news-form button:hover { background: var(--ssu-red-dark); } .ssu-foot-note { font-size: .72em !important; color: #98a3b3 !important; margin-top: 8px !important; } .ssu-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #e3e8ef; padding: 16px 0 22px; font-size: .8em; color: var(--ssu-muted); } .ssu-pay { display: flex; gap: 6px; } .ssu-pay i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; background: #fff; border: 1px solid #e3e8ef; border-radius: 4px; padding: 4px 7px; color: #5b6879; } .ssu-foot-links { display: flex; gap: 14px; } .ssu-foot-links a { color: var(--ssu-muted); text-decoration: none; } .ssu-foot-links a:hover { color: var(--ssu-navy); } /* ---------- a clear divider between every menu item ---------- */ .main-navigation ul.menu > li.menu-item + li.menu-item { border-left: 1px solid #dde4ee; } .main-navigation ul.menu > li.menu-item:first-child { border-left: 1px solid #dde4ee; } .main-navigation ul.menu > li.menu-item:last-child { border-right: 1px solid #dde4ee; } /* dividers run the full height of the bar rather than floating mid-air */ .main-navigation ul.menu > li.menu-item { align-items: stretch; } .main-navigation ul.menu > li.menu-item > a { padding-top: 1.15em; padding-bottom: 1.15em; } /* ---------- footer band spans the viewport ---------- The tinted band already ran edge to edge; its inner container was capped at the 1320px content width, which left the columns bunched in the middle. */ .ssu-footer { width: 100%; } .ssu-footer > .col-full { max-width: 100%; padding-left: 40px; padding-right: 40px; } @media (min-width: 1700px) { .ssu-footer > .col-full { padding-left: 64px; padding-right: 64px; } } @media (max-width: 767px) { .ssu-footer > .col-full { padding-left: 16px; padding-right: 16px; } } /* Storefront wraps the footer hook inside its own .col-full, so the band was inheriting the 1320px cap. Release the wrapper, keep padding on the inner one. */ .site-footer > .col-full { max-width: 100% !important; width: 100%; padding-left: 0 !important; padding-right: 0 !important; } .site-footer { padding-bottom: 0; } .ssu-footer { margin-left: 0; margin-right: 0; } /* ---------- footer store locations ---------- */ .ssu-footer-grid { grid-template-columns: 1.3fr 2.4fr 1fr 1.3fr; } @media (max-width: 1100px) { .ssu-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .ssu-footer-grid { grid-template-columns: 1fr; } } .ssu-stores { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .ssu-stores { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .ssu-stores { grid-template-columns: 1fr; } } .ssu-store { display: grid; gap: 4px; align-content: start; } .ssu-store strong { font-size: .84em; color: var(--ssu-navy); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding-bottom: 5px; border-bottom: 2px solid var(--ssu-red); justify-self: start; } .ssu-store span { font-size: .84em; color: var(--ssu-ink); line-height: 1.55; } .ssu-store-meta { color: var(--ssu-muted) !important; font-size: .78em !important; } /* ---------- dividers run the full height of the bar ---------- The list was shorter than its container, so the borders started partway down. */ .storefront-primary-navigation .col-full { display: flex; align-items: stretch; padding-top: 0 !important; padding-bottom: 0 !important; } .main-navigation { display: flex; align-items: stretch; margin: 0 !important; } .main-navigation > div, .main-navigation .menu-primary-container { display: flex; align-items: stretch; width: 100%; } .main-navigation ul.menu { align-items: stretch; min-height: 100%; margin: 0 !important; padding: 0 !important; } .main-navigation ul.menu > li.menu-item { display: flex; align-items: stretch; } .main-navigation ul.menu > li.menu-item > a { display: flex; align-items: center; height: auto; } /* the flex wrapper needs to grow, or the list collapses to content width */ .main-navigation { flex: 1 1 auto; min-width: 0; } .main-navigation > div, .main-navigation .menu-primary-container { flex: 1 1 auto; min-width: 0; } .main-navigation ul.menu { flex: 1 1 auto; width: 100% !important; } .main-navigation ul.menu > li.menu-item { flex: 1 1 0 !important; min-width: 0; } .main-navigation ul.menu > li.menu-item > a { width: 100%; justify-content: center; white-space: nowrap; } /* ---------- keep the mobile menu out of the desktop row ---------- A blanket `.main-navigation > div { display:flex }` had made Storefront's handheld nav visible, so it shared the row and halved the menu's width. */ @media (min-width: 768px) { .main-navigation .handheld-navigation { display: none !important; } .main-navigation > div.primary-navigation { display: flex !important; flex: 1 1 auto !important; min-width: 0; width: 100%; } } @media (max-width: 767px) { .main-navigation > div.primary-navigation { display: none !important; } .main-navigation .handheld-navigation { display: block !important; } } /* ---------- brands marquee ---------- */ .home-sub { margin: -8px 0 16px; color: var(--ssu-muted); font-size: .9em; } .brand-marquee { position: relative; overflow: hidden; padding: 6px 0; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; } /* fade the edges so logos enter and leave rather than being chopped */ .brand-marquee::before, .brand-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; } .brand-marquee::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); } .brand-marquee::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); } .brand-track { display: flex; align-items: center; gap: 34px; width: max-content; animation: brand-scroll 104s linear infinite; } .brand-marquee:hover .brand-track { animation-play-state: paused; } .brand-slide { display: block; flex: none; width: 128px; height: 62px; padding: 6px; } .brand-slide span { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; filter: grayscale(1); opacity: .62; transition: filter .2s ease, opacity .2s ease; } .brand-slide:hover span { filter: none; opacity: 1; } @keyframes brand-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } /* exactly one copy of the doubled track */ } @media (prefers-reduced-motion: reduce) { .brand-track { animation: none; } .brand-marquee { overflow-x: auto; } } /* ---------- no rule under the main content ---------- */ .site-content, #content, .content-area, #primary, .site-main { border-bottom: 0 !important; box-shadow: none !important; } .ssu-footer { border-top: 0; } /* ---------- marquee: no frame ---------- */ .brand-marquee { border: 0; border-radius: 0; background: transparent; padding: 10px 0 4px; } /* the edge fades still need to match the page behind them */ .brand-marquee::before { background: linear-gradient(90deg, #fff 25%, rgba(255,255,255,0)); } .brand-marquee::after { background: linear-gradient(270deg, #fff 25%, rgba(255,255,255,0)); } /* ---------- marquee: larger marks ---------- */ .brand-slide { width: 190px; height: 92px; padding: 4px; } .brand-track { gap: 46px; } .brand-marquee { padding: 14px 0 6px; } .brand-slide span { opacity: .7; } .brand-slide:hover span { opacity: 1; } /* previous/next product arrows on the single product page */ .storefront-product-pagination, .storefront-product-pagination a { display: none !important; } /* no rule above the footer */ .site-footer, .ssu-footer { border-top: 0 !important; box-shadow: none !important; } .site-footer::before, .ssu-footer::before { display: none; } /* marquee: logos closer together */ .brand-track { gap: 14px; } .brand-slide { width: 160px; height: 88px; padding: 2px; } /* ---------- tighten the gap between content and footer ---------- */ .site-content { padding-bottom: .6em !important; } #content, .content-area, .site-main { margin-bottom: 0 !important; padding-bottom: 0 !important; } .ssu-footer { margin-top: 20px; padding-top: 32px; } .woocommerce .site-main, .woocommerce-page .site-main { margin-bottom: 0; } /* WooCommerce leaves a large gap under the product grid and pagination */ .woocommerce ul.products, .woocommerce-page ul.products { margin-bottom: 1em; } .woocommerce nav.woocommerce-pagination { margin-bottom: .5em; } .storefront-full-width-content .site-main { padding-bottom: 0; } /* ---------- the search button becomes a close button while open ---------- */ .stuck-search-toggle .ico-close { display: none; } .col-full.search-open .stuck-search-toggle .ico-search { display: none; } .col-full.search-open .stuck-search-toggle .ico-close { display: block; } .col-full.search-open .stuck-search-toggle { background: var(--ssu-navy); border-color: var(--ssu-navy); color: #fff; } .col-full.search-open .stuck-search-toggle:hover { background: var(--ssu-navy-dark); color: #fff; } /* ---------- close the gap under the brands marquee ---------- */ .brand-marquee { padding-bottom: 0; margin-bottom: 0; } .brand-marquee + p, .brand-marquee + div { margin-top: 0; } /* the marquee is the last thing on the home page, so the page ends with it */ .home .entry-content > *:last-child, .page .entry-content > *:last-child { margin-bottom: 0 !important; } .home .entry-content, .page .entry-content { padding-bottom: 0 !important; margin-bottom: 0 !important; } .home .site-main, .home #primary, .home .content-area { padding-bottom: 0 !important; margin-bottom: 0 !important; } .ssu-footer { margin-top: 8px; } .ssu-store-tel a { font-size: .84em; color: var(--ssu-navy); font-weight: 600; text-decoration: none; } .ssu-store-tel a:hover { color: var(--ssu-red); } .ssu-store-meta { line-height: 1.5; } /* ---------- the menu row needs a rule above it too ---------- Only the bottom edge was drawn, so each item divider looked like it hung from nothing at the top of the bar. */ .storefront-primary-navigation { border-top: 1px solid #e3e8ef; } .storefront-primary-navigation.is-stuck { border-top: 0; } /* ---------- payment marks ---------- */ .ssu-pay { display: flex; align-items: center; gap: 7px; } .ssu-pay-card { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 26px; padding: 3px 5px; background: #fff; border: 1px solid #e3e8ef; border-radius: 5px; box-shadow: 0 1px 2px rgba(18, 58, 109, .05); } .ssu-pay-card svg { width: 100%; height: 100%; display: block; } /* ---------- header search modal ---------- */ .ssu-smodal[hidden] { display: none; } .ssu-smodal { position: fixed; inset: 0; z-index: 9999; } .ssu-smodal-back { position: absolute; inset: 0; background: rgba(10, 22, 40, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: ssu-smodal-fade .16s ease; } body.ssu-smodal-open { overflow: hidden; } .ssu-smodal-card { position: relative; width: min(720px, 94vw); margin: 9vh auto 0; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(9, 22, 42, .35); overflow: hidden; animation: ssu-smodal-rise .18s cubic-bezier(.2, .8, .3, 1); } @keyframes ssu-smodal-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes ssu-smodal-rise { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } } .ssu-smodal-top { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; border-bottom: 1px solid #eef1f6; color: var(--ssu-navy); } .ssu-smodal-top svg { flex: 0 0 auto; opacity: .75; } .ssu-smodal-top input[type=search] { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; box-shadow: none; font-size: 1.05em; font-weight: 600; color: var(--ssu-navy); padding: 2px 0; } .ssu-smodal-top input[type=search]::placeholder { color: #9aa6b6; font-weight: 500; } .ssu-smodal-top input[type=search]::-webkit-search-cancel-button { display: none; } .ssu-smodal-x { flex: 0 0 auto; background: #f2f5fa; border: 1px solid #e3e8ef; color: #6b7787; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; cursor: pointer; line-height: 1; } .ssu-smodal-x:hover { background: #e9eef6; color: var(--ssu-navy); } .ssu-smodal-body { max-height: min(58vh, 520px); overflow-y: auto; } .ssu-smodal-body.is-loading { opacity: .45; } .ssu-smodal-note { margin: 0; padding: 26px 20px; text-align: center; color: var(--ssu-muted); font-size: .9em; } .ssu-sug { display: flex; align-items: center; gap: 14px; padding: 10px 18px; text-decoration: none; color: inherit; border-bottom: 1px solid #f3f5f9; } .ssu-sug:last-of-type { border-bottom: 0; } .ssu-sug:hover, .ssu-sug.is-on { background: #f5f8fd; } .ssu-sug-img { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 8px; border: 1px solid #eef1f6; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ssu-sug-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .ssu-sug-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; } .ssu-sug-name { font-size: .92em; font-weight: 600; color: var(--ssu-navy); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ssu-sug-name mark, .ssu-sug-sku mark { background: #ffeaa7; color: inherit; padding: 0 1px; border-radius: 2px; } .ssu-sug-meta { display: flex; gap: 10px; font-size: .74em; color: var(--ssu-muted); } .ssu-sug-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; } .ssu-sug-brand { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } .ssu-sug-right { flex: 0 0 auto; text-align: right; display: grid; gap: 3px; } .ssu-sug-price { font-size: .86em; font-weight: 700; color: var(--ssu-navy); } .ssu-sug-price del { color: var(--ssu-muted); font-weight: 500; margin-right: 4px; } .ssu-sug-price ins { text-decoration: none; color: var(--ssu-red); } .ssu-sug-oos { font-size: .68em; text-transform: uppercase; letter-spacing: .06em; color: #b0392f; } .ssu-sug-all { display: block; padding: 13px 18px; text-align: center; background: #f7f9fc; border-top: 1px solid #eef1f6; font-size: .82em; font-weight: 700; color: var(--ssu-navy); text-decoration: none; } .ssu-sug-all:hover, .ssu-sug-all.is-on { background: var(--ssu-navy); color: #fff; } .ssu-smodal-foot { display: flex; gap: 18px; justify-content: center; padding: 10px 16px; border-top: 1px solid #eef1f6; background: #fbfcfe; font-size: .72em; color: var(--ssu-muted); } .ssu-smodal-foot kbd { display: inline-block; min-width: 18px; text-align: center; border: 1px solid #dfe5ee; border-bottom-width: 2px; border-radius: 4px; background: #fff; padding: 1px 5px; margin-right: 3px; font-family: inherit; font-size: 11px; color: #6b7787; } @media (max-width: 600px) { .ssu-smodal-card { margin-top: 0; width: 100vw; height: 100%; border-radius: 0; } .ssu-smodal-body { max-height: calc(100% - 118px); } .ssu-smodal-foot { display: none; } } /* the old inline slide-out field is replaced by the modal */ .stuck-search { display: none !important; } /* ---------- header search sits bare, no pill container ---------- */ .site-search .widget_product_search input[type="search"] { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 8px 2px 8px 26px !important; font-weight: 600; color: var(--ssu-navy); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123a6d' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: 17px 17px !important; } .site-search .widget_product_search input[type="search"]::placeholder { color: var(--ssu-muted); font-weight: 500; } .site-search .widget_product_search input[type="search"]:focus { background-color: transparent !important; box-shadow: none !important; border-bottom: 1px solid var(--ssu-line) !important; } .site-search { max-width: 260px; } /* ---------- the header search field needs no card around it ---------- The product-search widget was inheriting the sidebar widget card. */ .site-search .widget_product_search { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .site-search .widget_product_search form::before { display: none !important; } .site-search { margin-top: 18px; } /* ---------- socials live under the newsletter now ---------- */ .ssu-foot-news .ssu-social { margin-top: 14px; } .ssu-social a { width: 32px; height: 32px; transition: transform .14s ease, background .14s ease, color .14s ease; } .ssu-social a:hover { transform: translateY(-2px); } .ssu-social svg { display: block; } /* ---------- the gap under the marquee was Storefront's .hentry margin ---------- It collapsed out of .site-main and, because #primary floats, was contained there as 67.8px of empty column below the last row. */ .home article.hentry, .home .site-main > article { margin-bottom: 0 !important; } .home .ssu-footer { margin-top: 0; } /* ---------- store lines carry an icon ---------- */ .ssu-store span { display: flex; align-items: flex-start; gap: 8px; } .ssu-store .ssu-ico { flex: 0 0 auto; margin-top: 3px; color: var(--ssu-red); } .ssu-store-tel { align-items: center !important; } .ssu-store-tel .ssu-ico { margin-top: 0; } .ssu-store-meta .ssu-ico { color: var(--ssu-muted); } /* ---------- search modal: quieter chrome ---------- */ .ssu-smodal-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #f2f5fa; border: 1px solid #e3e8ef; color: #6b7787; cursor: pointer; } .ssu-smodal-x:hover { background: var(--ssu-navy); border-color: var(--ssu-navy); color: #fff; } .ssu-smodal-empty { display: flex; align-items: center; justify-content: center; padding: 44px 0 48px; color: #d9e0ea; } .ssu-smodal-body { min-height: 0; } /* ---------- social icons inherit the footer link layout, undo it ---------- Moving them under the newsletter put them inside .ssu-foot-col, whose links are flex with space-between, so each glyph was pinned to the left edge. */ .ssu-social a { justify-content: center !important; align-items: center !important; display: inline-flex !important; padding: 0 !important; gap: 0 !important; font-size: inherit !important; } .ssu-social a svg { display: block; margin: 0 auto; } /* ---------- marquee: bigger marks again ---------- */ .brand-slide { width: 216px; height: 118px; padding: 2px; } .brand-track { gap: 20px; } .brand-marquee { padding: 18px 0 10px; } @media (max-width: 900px) { .brand-slide { width: 168px; height: 92px; } } /* ---------- breathing room over the footer ---------- */ .home .ssu-footer { margin-top: 0; } .home .site-content { padding-bottom: 46px !important; } /* ---------- brand strip: stepped slide, not a drift ---------- */ .brand-track { animation: none !important; will-change: transform; } .brand-marquee:hover .brand-track { animation-play-state: running; } /* ---------- the Locations page ---------- */ .ssu-locations { max-width: 100%; } .ssu-loc-intro { font-size: 1.02em; color: var(--ssu-ink); max-width: 640px; margin: 0 0 30px; } .ssu-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 980px) { .ssu-loc-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .ssu-loc-grid { grid-template-columns: 1fr; } } .ssu-loc-card { display: flex; flex-direction: column; border: 1px solid #e3e8ef; border-radius: 12px; background: #fff; padding: 24px 24px 20px; transition: border-color .15s ease, box-shadow .15s ease; } .ssu-loc-card:hover { border-color: #cfdaea; box-shadow: 0 10px 26px rgba(18, 58, 109, .08); } .ssu-loc-name { font-size: 1.15em !important; font-weight: 800; color: var(--ssu-navy); margin: 0 0 4px !important; padding-bottom: 12px; border-bottom: 2px solid var(--ssu-red); align-self: flex-start; } .ssu-loc-line { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0 !important; font-size: .94em; line-height: 1.55; color: var(--ssu-ink); } .ssu-loc-line .ssu-ico { flex: 0 0 auto; margin-top: 3px; color: var(--ssu-red); } .ssu-loc-line a { color: var(--ssu-navy); font-weight: 700; text-decoration: none; } .ssu-loc-line a:hover { color: var(--ssu-red); } .ssu-loc-hours { margin-top: 18px; border-top: 1px solid #eef1f6; padding-top: 14px; } .ssu-loc-hourhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .74em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ssu-muted); } .ssu-loc-hourhead .ssu-ico { color: var(--ssu-muted); } .ssu-loc-hourrow { display: flex; justify-content: space-between; gap: 14px; font-size: .88em; color: var(--ssu-ink); padding: 3px 0; } .ssu-loc-hourrow span:first-child { color: var(--ssu-muted); } .ssu-loc-dir { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: auto; padding-top: 18px; font-size: .84em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ssu-navy); text-decoration: none; } .ssu-loc-dir:hover { color: var(--ssu-red); } .ssu-loc-dir svg { transition: transform .15s ease; } .ssu-loc-dir:hover svg { transform: translateX(3px); } .ssu-loc-foot { margin-top: 30px !important; font-size: .92em; color: var(--ssu-muted); } .ssu-loc-foot a { color: var(--ssu-navy); font-weight: 700; text-decoration: none; } .ssu-loc-foot a:hover { color: var(--ssu-red); } /* the footer heading and store names now link through to that page */ .ssu-foot-stores h3 a { color: inherit; text-decoration: none; } .ssu-foot-stores h3 a:hover { color: var(--ssu-red); } .ssu-store strong a { color: inherit; text-decoration: none; } .ssu-store strong a:hover { color: var(--ssu-red); } /* content links are underlined by Storefront; the location cards read better without */ .ssu-locations a { text-decoration: none !important; } .ssu-locations a:hover { text-decoration: none !important; } /* heading link keeps the navy */ /* the Locations heading is a link now, so it needs the heading colour back */ .ssu-foot-stores h3 a { color: var(--ssu-navy) !important; font-weight: 800; } .ssu-foot-stores h3 a:hover { color: var(--ssu-red) !important; } /* ---------- addresses open a map in a new tab ---------- */ .ssu-loc-addr, .ssu-store-addr { color: inherit; text-decoration: none; } .ssu-loc-addr:hover, .ssu-store-addr:hover { color: var(--ssu-red) !important; } .ssu-store-addr { display: inline-block; } /* ---------- the contact row spans the stores column ---------- */ .ssu-stores-mail { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e4e9f1; font-size: .88em; } .ssu-stores-mail .ssu-ico { flex: 0 0 auto; color: var(--ssu-red); } .ssu-stores-mail a { color: var(--ssu-navy); font-weight: 600; text-decoration: none; } .ssu-stores-mail a:hover { color: var(--ssu-red); } /* ---------- locations own the middle of the footer ---------- Help sits under the brand blurb as a two-column link list, which frees the whole centre of the row for the three store cards. */ .ssu-footer-grid { grid-template-columns: 1.25fr 2.7fr 1.1fr !important; } @media (max-width: 1150px) { .ssu-footer-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 700px) { .ssu-footer-grid { grid-template-columns: 1fr !important; } } .ssu-foot-help { margin-top: 22px; } .ssu-foot-help h3 { font-size: .78em; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--ssu-navy); margin: 0 0 12px; } .ssu-foot-help ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .ssu-foot-help a { font-size: .86em; color: var(--ssu-ink); text-decoration: none; } .ssu-foot-help a:hover { color: var(--ssu-red); } /* ---------- store photos on the Locations page ---------- */ .ssu-loc-photo { display: block; margin: -24px -24px 18px; height: 190px; overflow: hidden; border-radius: 12px 12px 0 0; background: #eef2f8; } .ssu-loc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .ssu-loc-photo:hover img { transform: scale(1.04); } .ssu-loc-photo.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(135deg, #eef2f8, #dfe7f2); color: var(--ssu-muted); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; } .ssu-loc-photo.is-empty .ssu-ico { width: 22px; height: 22px; color: var(--ssu-red); } /* ---------- the store photo shows whole, no crop and no zoom ---------- */ .ssu-loc-photo { height: 210px; background: #f4f7fb; border-bottom: 1px solid #eef1f6; } .ssu-loc-photo img { object-fit: contain !important; padding: 10px; transition: none !important; } .ssu-loc-photo:hover img { transform: none !important; } /* ---------- header row: logo, search, actions ---------- */ .site-header > .col-full { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; padding-top: 12px; padding-bottom: 12px; } .site-header > .col-full .site-branding { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; width: auto; float: none; text-align: center; } .site-header > .col-full .site-branding img.custom-logo { max-width: 210px; height: auto; display: block; } /* the search takes the middle of the row */ .site-header > .col-full .site-search { order: 2; flex: 1 1 320px; min-width: 0; max-width: none !important; margin: 0 !important; float: none; } .site-search .widget_product_search input[type="search"] { width: 100%; padding: 11px 4px 11px 30px !important; border-bottom: 1px solid #e3e8ef !important; border-radius: 0 !important; font-size: 1em; background-size: 19px 19px !important; } .site-search .widget_product_search input[type="search"]:focus { border-bottom-color: var(--ssu-navy) !important; } /* account and cart, on the right */ .ssu-head-actions { order: 3; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-left: auto; } .ssu-head-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ssu-navy); text-decoration: none; transition: background .15s ease, color .15s ease; } .ssu-head-btn:hover { background: #f2f5fa; color: var(--ssu-red); } .ssu-head-count { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--ssu-red); color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; } /* the text version of the same two links is redundant now */ .site-header > .col-full .secondary-navigation { display: none !important; } @media (max-width: 720px) { .site-header > .col-full .site-search { order: 4; flex: 1 1 100%; } .site-header > .col-full .site-branding img.custom-logo { max-width: 160px; } } /* DOM order puts the actions before the search; flex order fixes the row */ .site-header > .col-full .site-branding { order: 1; } .site-header > .col-full .site-search { order: 2 !important; } .site-header .ssu-head-actions { order: 3 !important; } /* ---------- slimmer menu bar ---------- The links carried 1.15em of padding top and bottom, making the row 59.5px. 0.7em brings it to about 46px while the dividers still run full height. */ .main-navigation ul.menu > li.menu-item > a { padding-top: .7em !important; padding-bottom: .7em !important; } .storefront-primary-navigation.is-stuck .main-navigation ul.menu > li.menu-item > a { padding-top: .62em !important; padding-bottom: .62em !important; } /* ---------- hover: a red bar grows along the top of the item ---------- The old state was an inset box-shadow under the current item; the bar now sits at the top and expands from the centre on hover, focus and for the page you are on. */ .main-navigation ul.menu > li.current-menu-item > a { box-shadow: none !important; } .main-navigation ul.menu > li.menu-item > a { position: relative; overflow: hidden; } .main-navigation ul.menu > li.menu-item > a::before { content: ''; display: block !important; position: absolute; top: 0; left: 50%; width: 0; height: 3px; background: var(--ssu-red); border-radius: 0 0 2px 2px; transition: width .26s cubic-bezier(.4, 0, .2, 1), left .26s cubic-bezier(.4, 0, .2, 1); } .main-navigation ul.menu > li.menu-item:hover > a::before, .main-navigation ul.menu > li.menu-item:focus-within > a::before, .main-navigation ul.menu > li.current-menu-item > a::before, .main-navigation ul.menu > li.current-menu-ancestor > a::before, .main-navigation ul.menu > li.current-menu-parent > a::before { left: 0; width: 100%; } /* the page you are on reads in red rather than navy */ .main-navigation ul.menu > li.current-menu-item > a, .main-navigation ul.menu > li.current-menu-ancestor > a, .main-navigation ul.menu > li.current-menu-parent > a { color: var(--ssu-red) !important; } .main-navigation ul.menu > li.menu-item:hover > a { color: var(--ssu-red); } @media (prefers-reduced-motion: reduce) { .main-navigation ul.menu > li.menu-item > a::before { transition: none; } } /* ---------- panels slide down instead of snapping open ---------- display:none cannot be animated, so the panel is always laid out (it is absolutely positioned, so it costs no space) and hidden with opacity plus visibility. visibility is delayed on the way out so the slide can finish. */ .main-navigation ul.menu > li.menu-item-has-children > ul.sub-menu, .main-navigation ul.menu > li.mega-brands > ul.sub-menu { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px); transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .3, 1), visibility 0s linear .28s; } .main-navigation ul.menu > li.menu-item-has-children:hover > ul.sub-menu, .main-navigation ul.menu > li.menu-item-has-children:focus-within > ul.sub-menu, .main-navigation ul.menu > li.mega-brands:hover > ul.sub-menu, .main-navigation ul.menu > li.mega-brands:focus-within > ul.sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .3, 1), visibility 0s; } @media (prefers-reduced-motion: reduce) { .main-navigation ul.menu > li.menu-item-has-children > ul.sub-menu, .main-navigation ul.menu > li.mega-brands > ul.sub-menu { transition: none; transform: none; } } /* ---------- the pinned bar sits a little taller ---------- */ .storefront-primary-navigation.is-stuck .main-navigation ul.menu > li.menu-item > a { padding-top: .95em !important; padding-bottom: .95em !important; } /* ---------- only the top bar marks the item ---------- The open panel carried a 3px red border along its top edge, which read as a red line under the whole menu row. The indicator lives on top of the item now, so the panel just needs a quiet edge. */ .main-navigation ul.menu > li.menu-item-has-children > ul.sub-menu, .main-navigation ul.menu > li.mega-brands > ul.sub-menu { border-top: 1px solid var(--ssu-line) !important; } .main-navigation ul.menu > li.menu-item > a, .main-navigation ul.menu > li.current-menu-item > a, .main-navigation ul.menu > li.current-menu-ancestor > a { box-shadow: none !important; border-bottom: 0 !important; } .main-navigation ul.menu > li.menu-item > a::after { bottom: auto; } /* ---------- brand tiles are square ---------- The tiles were 58px tall and as wide as an eighth of the bar, so every mark floated in a letterbox. A square tile with the mark contained inside reads as a proper logo grid. */ .main-navigation ul.menu > li.mega-brands > ul.sub-menu { grid-template-columns: repeat(8, 1fr) !important; gap: 12px !important; padding: 22px 24px 24px !important; } .main-navigation ul.menu > li.mega-brands > ul.sub-menu > li > a { height: auto !important; aspect-ratio: 1 / 1; padding: 14px !important; display: flex !important; align-items: center; justify-content: center; border-radius: 10px !important; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .main-navigation ul.menu > li.mega-brands > ul.sub-menu > li > a:hover { transform: translateY(-2px); } .main-navigation ul.menu > li.mega-brands .mega-brand-logo { width: 100%; height: 100%; } @media (max-width: 1280px) { .main-navigation ul.menu > li.mega-brands > ul.sub-menu { grid-template-columns: repeat(6, 1fr) !important; } } @media (max-width: 980px) { .main-navigation ul.menu > li.mega-brands > ul.sub-menu { grid-template-columns: repeat(5, 1fr) !important; } } @media (max-width: 767px) { .main-navigation ul.menu > li.mega-brands > ul.sub-menu { grid-template-columns: repeat(4, 1fr) !important; padding: 12px !important; } } /* ---------- the mark is an , not a background ---------- The old block set background-size: contain on an element that carries no background image, so the 320x120 file was stretched to fill a 170x170 tile (object-fit defaulted to `fill`) and the wide wordmarks ran past their tile. */ .main-navigation ul.menu > li.mega-brands .mega-brand-logo, .main-navigation ul.menu > li:not(.mega-brands) .mega-brand-logo { object-fit: contain !important; max-width: 100%; max-height: 100%; } .main-navigation ul.menu > li.mega-brands .mega-brand-logo { width: 100% !important; height: 100% !important; } /* ---------- the tile is exactly one grid column wide ---------- height:100% on the mark inside an auto-height tile left the height indeterminate, so the tile sized itself from the image (200px) while its grid column was 141px — that is what made the tiles overlap. */ .main-navigation ul.menu > li.mega-brands > ul.sub-menu > li > a { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; padding: 10px !important; } .main-navigation ul.menu > li.mega-brands .mega-brand-logo { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain !important; } /* ---------- the name rides over the mark on hover ---------- The label was screen-reader-only; on hover it becomes a navy scrim across the tile with the brand name centred on it. */ .main-navigation ul.menu > li.mega-brands > ul.sub-menu > li > a { position: relative; } .main-navigation ul.menu > li.mega-brands .mega-brand-name { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; white-space: normal !important; display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; line-height: 1.25; background: rgba(12, 40, 78, .58); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 9px; opacity: 0; transition: opacity .18s ease; } .main-navigation ul.menu > li.mega-brands > ul.sub-menu > li > a:hover .mega-brand-name, .main-navigation ul.menu > li.mega-brands > ul.sub-menu > li > a:focus-visible .mega-brand-name { opacity: 1; } .main-navigation ul.menu > li.mega-brands > ul.sub-menu > li > a:hover .mega-brand-logo { filter: grayscale(1) opacity(.55); } @media (prefers-reduced-motion: reduce) { .main-navigation ul.menu > li.mega-brands .mega-brand-name { transition: none; } } /* ---------- the header search reads as a field again ---------- */ .site-header > .col-full .site-search { position: relative; } .site-search .widget_product_search input[type="search"] { padding: 12px 16px 12px 42px !important; border: 1px solid #dde4ee !important; border-radius: 10px !important; background-color: #f7f9fc !important; background-position: 15px center !important; background-size: 18px 18px !important; font-size: .95em; font-weight: 500; color: var(--ssu-navy); transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .site-search .widget_product_search input[type="search"]:focus { background-color: #fff !important; border-color: var(--ssu-navy) !important; box-shadow: 0 0 0 3px rgba(18, 58, 109, .1) !important; } /* suggestions under the header field */ .ssu-hsug { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 300; background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; box-shadow: 0 20px 44px rgba(9, 22, 42, .18); max-height: min(64vh, 520px); overflow-y: auto; } .ssu-hsug[hidden] { display: none; } .ssu-hsug .ssu-sug { padding: 9px 14px; } .ssu-hsug .ssu-sug-img { width: 46px; height: 46px; } /* ---------- account and cart: icon over label ---------- */ .ssu-head-btn { flex-direction: column; gap: 3px; width: auto !important; height: auto !important; min-width: 62px; padding: 6px 10px 5px; border-radius: 10px; } .ssu-head-label { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1; color: inherit; } .ssu-head-count { top: 0; right: 6px; } .ssu-head-actions { gap: 2px; } @media (max-width: 480px) { .ssu-head-label { display: none; } } /* ---------- the search runs from the logo to the icons ---------- */ .site-header > .col-full { gap: 16px 18px !important; } .site-header > .col-full .site-branding { margin-right: 0 !important; } .site-header > .col-full .site-branding img.custom-logo { max-width: 190px; } .site-header > .col-full .site-search { flex: 1 1 auto !important; } /* a field you cannot miss: deeper border, submit button on the right */ .site-search .widget_product_search form { position: relative; } .site-search .widget_product_search input[type="search"] { padding: 13px 58px 13px 44px !important; border: 1.5px solid #cfdaea !important; background-color: #fff !important; box-shadow: inset 0 1px 2px rgba(18, 58, 109, .05); } .site-search .widget_product_search input[type="search"]::placeholder { color: #8996a8; font-weight: 500; } .site-search .widget_product_search button[type="submit"] { display: block !important; position: absolute; top: 5px; right: 5px; bottom: 5px; width: 44px; padding: 0 !important; border: 0; border-radius: 8px; background-color: var(--ssu-navy); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 19px 19px; color: transparent; font-size: 0; line-height: 0; overflow: hidden; cursor: pointer; transition: background-color .15s ease; } .site-search .widget_product_search button[type="submit"]:hover { background-color: var(--ssu-red); } /* ---------- a divider between Account and Cart ---------- */ .ssu-head-actions { gap: 0; } .ssu-head-actions .ssu-head-btn + .ssu-head-btn { border-left: 1px solid #e3e8ef; border-radius: 0 10px 10px 0; margin-left: 0; } .ssu-head-actions .ssu-head-btn { padding-left: 14px; padding-right: 14px; } /* ---------- the submit button is screen-reader-hidden by WooCommerce ---------- clip + 1px height, so setting display and width alone left a 1x1 box. */ .site-search .widget_product_search button[type="submit"] { width: 44px !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: hidden !important; position: absolute !important; top: 5px !important; right: 5px !important; bottom: 5px !important; left: auto !important; margin: 0 !important; } /* ---------- account and cart: bigger, no hover fill ---------- */ .ssu-head-btn { padding: 6px 18px 5px !important; } .ssu-head-btn svg { width: 30px !important; height: 30px !important; stroke-width: 1.7; } .ssu-head-label { font-size: 10.5px !important; letter-spacing: .08em; opacity: .9; } .ssu-head-btn:hover { background: none !important; color: var(--ssu-red); } .ssu-head-count { top: 2px; right: 12px; } /* ---------- nothing may sit over the pinned bar ---------- Defensive: the bar sat at z-index 100, within reach of banners, product cards and plugin overlays, and a hidden modal must never eat clicks. */ .storefront-primary-navigation.is-stuck { z-index: 1000 !important; pointer-events: auto !important; } .storefront-primary-navigation.is-stuck .col-full, .storefront-primary-navigation.is-stuck .main-navigation, .storefront-primary-navigation.is-stuck .stuck-actions, .storefront-primary-navigation.is-stuck .stuck-logo { pointer-events: auto !important; } .ssu-smodal[hidden] { display: none !important; } /* ---------- quick links column, where the newsletter used to be ---------- */ .ssu-footer-grid { grid-template-columns: 1.2fr 2.6fr 1.1fr !important; } @media (max-width: 1150px) { .ssu-footer-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 700px) { .ssu-footer-grid { grid-template-columns: 1fr !important; } } .ssu-foot-quick ul { display: grid; gap: 9px; margin: 0 0 4px; padding: 0; list-style: none; } .ssu-foot-quick a { font-size: .88em; color: var(--ssu-ink); text-decoration: none; display: inline-block; } .ssu-foot-quick a:hover { color: var(--ssu-red); } .ssu-foot-quick .ssu-foot-follow { margin-top: 26px; } .ssu-foot-quick .ssu-social { margin-top: 0; } /* ---------- quick links, tightened ---------- */ .ssu-foot-quick h3 { margin-bottom: 9px; } .ssu-foot-quick ul { gap: 5px; margin-bottom: 0; } .ssu-foot-quick a { font-size: .84em; line-height: 1.35; } .ssu-foot-quick .ssu-foot-follow { margin-top: 16px; margin-bottom: 8px; } .ssu-foot-quick .ssu-social { gap: 6px; } .ssu-foot-quick .ssu-social a { width: 28px; height: 28px; } .ssu-foot-quick .ssu-social svg { width: 14px; height: 14px; } /* ---------- footer headings carry an icon, content lines up past it ---------- */ .ssu-foot-col h3 { display: flex; align-items: center; gap: 8px; } .ssu-foot-col h3 .ssu-h3-ico { flex: 0 0 auto; color: var(--ssu-red); } .ssu-foot-stores .ssu-stores, .ssu-foot-stores .ssu-stores-mail, .ssu-foot-quick ul, .ssu-foot-quick .ssu-social { padding-left: 23px; } .ssu-foot-stores .ssu-stores-mail { margin-left: 0; } @media (max-width: 700px) { .ssu-foot-stores .ssu-stores, .ssu-foot-stores .ssu-stores-mail, .ssu-foot-quick ul, .ssu-foot-quick .ssu-social { padding-left: 0; } } /* ---------- the locations heading sits between two rules ---------- */ .ssu-foot-stores h3 { justify-content: center; gap: 10px; margin-bottom: 16px; } .ssu-foot-stores h3::before, .ssu-foot-stores h3::after { content: ''; flex: 1 1 auto; height: 1px; background: #dfe5ee; } /* the heading now spans the column, so its content is no longer indented */ .ssu-foot-stores .ssu-stores, .ssu-foot-stores .ssu-stores-mail { padding-left: 0; } .ssu-foot-stores .ssu-stores-mail { justify-content: center; } /* ---------- quick links, tighter still ---------- */ .ssu-foot-quick h3 { margin-bottom: 7px !important; } .ssu-foot-quick ul { gap: 1px !important; } .ssu-foot-quick li { line-height: 1.25; } .ssu-foot-quick a { font-size: .8em !important; padding: 2px 0; } .ssu-foot-quick .ssu-foot-follow { margin-top: 14px !important; margin-bottom: 6px !important; } .ssu-foot-quick .ssu-social a { width: 26px; height: 26px; } .ssu-foot-quick .ssu-social svg { width: 13px; height: 13px; } /* ---------- the email sits with the blurb now ---------- */ .ssu-foot-brand .ssu-stores-mail { justify-content: flex-start; border-top: 0; margin-top: 4px; padding-top: 0; font-size: .86em; } /* ---------- a shimmer sweeps across the logo every few seconds ---------- */ .site-header .custom-logo-link { position: relative; overflow: hidden; isolation: isolate; } /* the pinned crest is already absolutely positioned; only clip it, never re-position it, or it drops out of its slot in the bar */ .stuck-logo { overflow: hidden; isolation: isolate; } .site-header .custom-logo-link { display: inline-block; } .site-header .custom-logo-link::after, .stuck-logo::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 38%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, .78) 55%, rgba(255, 255, 255, 0) 100%); transform: translateX(-260%) skewX(-18deg); animation: ssu-logo-shimmer 20s ease-in-out infinite; pointer-events: none; z-index: 2; } /* the pinned bar's crest is smaller, so it gets its own timing offset */ .stuck-logo::after { animation-duration: 24s; animation-delay: 4s; } @keyframes ssu-logo-shimmer { 0% { transform: translateX(-260%) skewX(-18deg); } 12% { transform: translateX(330%) skewX(-18deg); } /* ~2.4s to cross */ 100% { transform: translateX(330%) skewX(-18deg); } } @media (prefers-reduced-motion: reduce) { .site-header .custom-logo-link::after, .stuck-logo::after { animation: none; opacity: 0; } } /* ---------- the brand wall on Shop by Brands ---------- */ .ssu-brandwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin: 6px 0 10px; } .ssu-brandwall-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 14px 16px; text-decoration: none !important; border: 1px solid var(--ssu-line); border-radius: 12px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .ssu-brandwall-item:hover { border-color: #c9d6e8; box-shadow: 0 10px 24px rgba(18, 58, 109, .1); transform: translateY(-2px); } .ssu-brandwall-mark { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; max-width: 128px; } .ssu-brandwall-mark img { max-width: 100%; max-height: 100%; object-fit: contain; } .ssu-brandwall-initial { font-size: 2.4em; font-weight: 800; color: #c9d6e8; font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif; } .ssu-brandwall-name { font-size: .92em; font-weight: 700; color: var(--ssu-navy); text-align: center; line-height: 1.25; } .ssu-brandwall-count { font-size: .74em; color: var(--ssu-muted); letter-spacing: .04em; } @media (max-width: 600px) { .ssu-brandwall { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } } /* ---------- catalog cards cross-fade to the second photo ---------- */ .ssu-thumbswap { position: relative; display: block; } .ssu-thumbswap img { display: block; width: 100%; height: auto; } .ssu-thumbswap .ssu-thumb-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(1.015); transition: opacity .55s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1); will-change: opacity; pointer-events: none; } .woocommerce ul.products li.product:hover .ssu-thumbswap .ssu-thumb-alt, .woocommerce ul.products li.product:focus-within .ssu-thumbswap .ssu-thumb-alt { opacity: 1; transform: scale(1); } .woocommerce ul.products li.product .ssu-thumbswap img:first-child { transition: transform .6s cubic-bezier(.4, 0, .2, 1); } .woocommerce ul.products li.product:hover .ssu-thumbswap img:first-child { transform: scale(1.015); } @media (prefers-reduced-motion: reduce) { .ssu-thumbswap .ssu-thumb-alt, .ssu-thumbswap img:first-child { transition: none; } } /* ---------- catalog: filter rail beside the grid ---------- */ .ssu-shop { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; } @media (max-width: 900px) { .ssu-shop { grid-template-columns: 1fr; gap: 20px; } } .ssu-shopmain { min-width: 0; } .ssu-shopfilters { position: sticky; top: 70px; border: 1px solid var(--ssu-line); border-radius: 12px; background: #fff; padding: 16px 16px 14px; } .ssu-filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .ssu-filter-head h2 { margin: 0; font-size: .82em; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ssu-navy); } .ssu-filter-head-actions { display: flex; align-items: center; gap: 12px; } .ssu-filter-clear { background: none; border: 0; padding: 0; cursor: pointer; font-size: .76em; font-weight: 700; color: var(--ssu-muted); text-transform: uppercase; letter-spacing: .06em; } .ssu-filter-clear:hover { color: var(--ssu-red); } .ssu-filter-collapse { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin: 0; border: 1px solid var(--ssu-line); border-radius: 50%; background: #fff; color: var(--ssu-navy); cursor: pointer; flex: 0 0 auto; transition: background .15s ease, color .15s ease, transform .2s ease; } .ssu-filter-collapse:hover { background: var(--ssu-navy); color: #fff; } .ssu-filter-group { border-top: 1px solid #eef1f6; padding: 12px 0 4px; } .ssu-filter-group h3 { margin: 0 0 9px; font-size: .74em; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--ssu-navy); } .ssu-filter-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .ssu-filter-group label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .85em; color: var(--ssu-ink); line-height: 1.3; } .ssu-filter-group label span { flex: 1 1 auto; min-width: 0; } .ssu-filter-group label em { font-style: normal; font-size: .82em; color: var(--ssu-muted); } .ssu-filter-group input[type=checkbox] { flex: 0 0 auto; margin: 0; accent-color: var(--ssu-navy); } .ssu-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ssu-chip { border: 1px solid var(--ssu-line); background: #fff; border-radius: 7px; padding: 5px 9px; font-size: .78em; font-weight: 600; color: var(--ssu-ink); cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; } .ssu-chip:hover { border-color: var(--ssu-navy); background: var(--ssu-navy); color: #fff; } .ssu-filter-price { display: flex; align-items: center; gap: 8px; } .ssu-filter-price input { width: 100%; min-width: 0; padding: 7px 9px; font-size: .84em; border: 1px solid var(--ssu-line); border-radius: 7px; background: #fff; } .ssu-filter-price span { color: var(--ssu-muted); } .ssu-filter-note { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #eef1f6; font-size: .72em; color: var(--ssu-muted); font-style: italic; line-height: 1.4; } /* the grid is narrower now, so three to a row reads better than four */ @media (min-width: 901px) { .ssu-shopmain .woocommerce ul.products, .ssu-shopmain ul.products { } } /* ---------- paging loads as you scroll ---------- */ .ssu-lazy-on nav.woocommerce-pagination { display: none !important; } .ssu-lazyfoot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 26px; min-height: 46px; } .ssu-lazymore { border: 1px solid var(--ssu-line); background: #fff; color: var(--ssu-navy); border-radius: 999px; padding: 11px 26px; cursor: pointer; font-size: .8em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: background .15s ease, color .15s ease, border-color .15s ease; } .ssu-lazymore:hover { background: var(--ssu-navy); border-color: var(--ssu-navy); color: #fff; } .ssu-lazyfoot.is-busy .ssu-lazymore { opacity: .5; pointer-events: none; } .ssu-lazystatus { font-size: .78em; color: var(--ssu-muted); letter-spacing: .03em; } /* newly appended cards fade up rather than snapping in */ .woocommerce ul.products li.product { transition: opacity .45s ease, transform .45s ease; } .woocommerce ul.products li.product.ssu-lazy-in { opacity: 0; transform: translateY(10px); } @media (prefers-reduced-motion: reduce) { .woocommerce ul.products li.product { transition: none; } } /* ---------- cards lead with the brand, and read left ---------- */ .woocommerce ul.products li.product { text-align: left; } .woocommerce ul.products li.product .ssu-card-brand { display: block; margin: 12px 0 2px; font-size: .68em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ssu-muted); } .woocommerce ul.products li.product .woocommerce-loop-product__title { text-align: left; font-size: .92em; line-height: 1.35; color: var(--ssu-navy); padding-top: 0 !important; margin-bottom: 6px; } .woocommerce ul.products li.product .price { text-align: left; display: block; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { margin-left: 0; margin-right: auto; } .woocommerce ul.products li.product .star-rating { margin-left: 0; } /* ---------- roomier cards, and a clear sale price ---------- */ .woocommerce ul.products li.product { padding: 14px 14px 18px !important; border-radius: 12px; } .woocommerce ul.products li.product .ssu-card-brand { font-size: .76em; letter-spacing: .13em; margin: 16px 0 4px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.04em; line-height: 1.38; font-weight: 700; margin-bottom: 8px; } .woocommerce ul.products li.product .price { font-size: 1.12em; font-weight: 800; color: var(--ssu-navy); } /* on sale: the old price is struck through, the new one carries the accent */ .woocommerce ul.products li.product .price del, .woocommerce div.product p.price del, .woocommerce div.product span.price del { opacity: 1; color: var(--ssu-muted); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1.5px; margin-right: 8px; font-size: .88em; } .woocommerce ul.products li.product .price ins, .woocommerce div.product p.price ins, .woocommerce div.product span.price ins { text-decoration: none; background: none; color: var(--ssu-red); font-weight: 800; } .woocommerce ul.products li.product .price .from, .woocommerce ul.products li.product .price small { font-size: .72em; color: var(--ssu-muted); font-weight: 600; } /* the sale flash reads as a tag in the corner of the picture */ .woocommerce ul.products li.product .onsale { position: absolute !important; /* Storefront prints it inline under the price */ top: 12px; left: 12px; right: auto; bottom: auto; margin: 0; z-index: 3; width: auto; height: auto; display: inline-block; background: var(--ssu-red); color: #fff; border-radius: 6px; font-size: .68em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; min-height: 0; min-width: 0; line-height: 1; } /* ---------- cards share a row height, four to a row ---------- */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px; margin: 0 0 10px !important; } @media (max-width: 1180px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .woocommerce ul.products { grid-template-columns: 1fr; } } .woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; display: flex; flex-direction: column; } .woocommerce ul.products li.product .woocommerce-loop-product__link { display: flex; flex-direction: column; flex: 1 1 auto; } /* the picture keeps a square slot, so titles start at the same line */ .woocommerce ul.products li.product .ssu-thumbswap, .woocommerce ul.products li.product > a > img, .woocommerce ul.products li.product img.attachment-woocommerce_thumbnail { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; } .woocommerce ul.products li.product .ssu-thumbswap img { height: 100%; object-fit: contain; } .woocommerce ul.products li.product .price { margin-top: auto; padding-top: 4px; } /* ---------- nothing left in any size ---------- */ .woocommerce ul.products li.product { position: relative; } .ssu-oos-flag { position: absolute; top: 12px; left: 12px; z-index: 3; background: #6b7787; color: #fff; border-radius: 6px; font-size: .66em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; line-height: 1; } .woocommerce ul.products li.product.outofstock { background: #fafbfd; } .woocommerce ul.products li.product.outofstock .ssu-thumbswap, .woocommerce ul.products li.product.outofstock > a > img { filter: grayscale(1); opacity: .55; } .woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title, .woocommerce ul.products li.product.outofstock .price { color: var(--ssu-muted); } .woocommerce ul.products li.product.outofstock .price ins { color: var(--ssu-muted); } .woocommerce ul.products li.product.outofstock:hover .ssu-thumb-alt { opacity: 0; } /* ---------- catalogue toolbar ---------- */ .ssu-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid #eef1f6; } .ssu-filter-toggle { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--ssu-line); background: #fff; color: var(--ssu-navy); border-radius: 8px; padding: 9px 15px; cursor: pointer; font-size: .8em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: border-color .15s ease, background .15s ease, color .15s ease; } .ssu-filter-toggle:hover { border-color: var(--ssu-navy); background: var(--ssu-navy); color: #fff; } .ssu-filter-toggle svg { flex: 0 0 auto; } .ssu-toolbar-count { flex: 1 1 auto; min-width: 0; } .ssu-toolbar-count .woocommerce-result-count { margin: 0 !important; padding: 0 !important; font-size: .84em; color: var(--ssu-muted); } .ssu-toolbar-sort { display: flex; align-items: center; gap: 10px; margin-left: auto; } .ssu-sort-label { font-size: .78em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ssu-navy); } .ssu-toolbar-sort .woocommerce-ordering { margin: 0 !important; } .ssu-toolbar-sort select { border: 1px solid var(--ssu-line); border-radius: 8px; background: #fff; padding: 8px 34px 8px 12px; font-size: .84em; color: var(--ssu-navy); font-weight: 600; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123a6d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px; } .ssu-toolbar-sort select:focus { border-color: var(--ssu-navy); outline: none; box-shadow: 0 0 0 3px rgba(18,58,109,.1); } /* the rail folds away and the grid takes the room */ .ssu-shop.is-railoff { grid-template-columns: minmax(0, 1fr); } .ssu-shop.is-railoff .ssu-shopfilters { display: none; } @media (max-width: 700px) { .ssu-toolbar { gap: 10px; } .ssu-toolbar-count { order: 3; flex: 1 1 100%; } .ssu-toolbar-sort { margin-left: 0; } } /* ---------- the grid must not inherit float-era clearfixes ---------- WooCommerce puts ::before/::after on ul.products for the old float layout; inside a grid each becomes an item, which left the first cell empty. */ .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none !important; display: none !important; } /* the toolbar spans the whole width, above the rail and the grid */ .ssu-toolbar { margin-top: 2px; } .woocommerce .ssu-toolbar + .ssu-shop { margin-top: 0; } /* ---------- brands page header, in the category house style ---------- */ .ssu-brandwall-head { margin: 0 0 26px; } .ssu-brandwall-head h1 { margin: 0; color: var(--ssu-navy); font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif; font-size: clamp(2.1em, 4vw, 3.4em); font-weight: 700; letter-spacing: .02em; line-height: 1.02; text-transform: uppercase; } .ssu-brandwall-head p { margin: 9px 0 0; font-size: 1.02em; line-height: 1.5; color: var(--ssu-muted); } .page-id-17018 .entry-header, .page-id-17018 .entry-title { display: none; } /* ---------- brand mark on the card ---------- */ .woocommerce ul.products li.product .ssu-card-brand { display: flex; align-items: center; gap: 6px; } .woocommerce ul.products li.product .ssu-card-brand img.ssu-card-brandlogo, .ssu-card-brandlogo { flex: 0 0 auto; height: 16px !important; width: auto !important; max-width: 46px !important; aspect-ratio: auto !important; object-fit: contain; object-position: left center; display: inline-block; margin: 0; opacity: .8; } .woocommerce ul.products li.product:hover .ssu-card-brandlogo { opacity: 1; } .woocommerce ul.products li.product.outofstock .ssu-card-brandlogo { filter: grayscale(1); opacity: .45; } /* ---------- the branded placeholder tile ---------- */ .woocommerce ul.products li.product img.ssu-placeholder, .woocommerce div.product img.ssu-placeholder { background: #fff; object-fit: contain; } /* ---------- the discount badge ---------- */ .woocommerce ul.products li.product .onsale, .woocommerce div.product .onsale { position: absolute !important; top: 16px; right: 14px; left: auto; bottom: auto; margin: 0; z-index: 4; display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: auto; padding: 9px 15px 8px; /* an inked rubber stamp: outlined, tilted, sitting on the picture */ background: rgba(255, 255, 255, .72); color: var(--ssu-red); border: 2.5px solid var(--ssu-red); border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(216, 31, 38, .35); font-size: 1.02em; font-weight: 900; letter-spacing: .2em; line-height: 1; text-indent: .2em; /* balances the tracking on the last letter */ text-transform: uppercase; transform: rotate(11deg); transition: transform .18s ease; } .woocommerce ul.products li.product:hover .onsale { transform: rotate(11deg) scale(1.06); } .woocommerce div.product .onsale { top: 20px; right: 20px; left: auto; font-size: 1.15em; padding: 11px 18px 10px; } /* ---------- card details, scaled up ---------- */ .woocommerce ul.products li.product { padding: 16px 16px 20px !important; } .woocommerce ul.products li.product .ssu-card-brand { font-size: .84em !important; letter-spacing: .12em; margin: 18px 0 6px !important; color: #7b8798; } .woocommerce ul.products li.product .ssu-card-brand img.ssu-card-brandlogo, .ssu-card-brandlogo { height: 18px !important; max-width: 54px !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.16em !important; line-height: 1.35; font-weight: 700; margin-bottom: 10px; color: var(--ssu-navy); } .woocommerce ul.products li.product .price { font-size: 1.3em !important; font-weight: 800; padding-top: 6px; } .woocommerce ul.products li.product .price del { font-size: .74em; margin-right: 9px; } .ssu-oos-flag { font-size: .72em; padding: 6px 11px; } /* ---------- card polish: tighter brand, clamped title, clearer price ---------- */ .woocommerce ul.products li.product .ssu-card-brand { margin: 18px 0 1px !important; } /* two lines, then an ellipsis, with the second line fading out */ .woocommerce ul.products li.product .woocommerce-loop-product__title { margin-top: 0 !important; margin-bottom: 8px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: calc(1.35em * 2 * 1.16); /* keeps one and two line cards level */ -webkit-mask-image: linear-gradient(180deg, #000 42%, rgba(0, 0, 0, .28) 100%); mask-image: linear-gradient(180deg, #000 42%, rgba(0, 0, 0, .28) 100%); } /* price: what you pay first and large, what it was beside it */ .woocommerce ul.products li.product .price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding-top: 8px; font-size: 1.32em !important; letter-spacing: -.01em; } .woocommerce ul.products li.product .price ins { order: 1; color: var(--ssu-red); font-weight: 800; text-decoration: none; } .woocommerce ul.products li.product .price del { order: 2; margin: 0 !important; font-size: .68em; color: #9aa6b6; font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1.5px; } .woocommerce ul.products li.product .price .woocommerce-Price-amount { font-weight: inherit; } /* ---------- the page you are on is tinted, not just coloured ---------- */ .main-navigation ul.menu > li.current-menu-item > a, .main-navigation ul.menu > li.current-menu-ancestor > a, .main-navigation ul.menu > li.current-menu-parent > a { background: rgba(216, 31, 38, .07); } .main-navigation ul.menu > li.menu-item:hover > a { background: rgba(216, 31, 38, .04); } /* ---------- hard two-line cut on card titles ---------- The clamp was losing to an earlier display rule, so a third line showed through the fade. Pin display, clamp and height together. */ .woocommerce ul.products li.product a .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-product__title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; overflow: hidden !important; max-height: calc(1.35em * 2) !important; min-height: calc(1.35em * 2) !important; } /* ---------- footer artwork: a ball and a pitch, ghosted into the band ---------- */ .ssu-footer { position: relative; overflow: hidden; } .ssu-footer > .col-full { position: relative; z-index: 2; } .ssu-footer::before, .ssu-footer::after { content: ''; position: absolute; z-index: 1; pointer-events: none; background-repeat: no-repeat; background-size: contain; } /* the ball sits half off the right edge */ .ssu-footer::before { right: -70px; bottom: -60px; width: 300px; height: 300px; background-image: url("data:image/svg+xml;charset=utf-8, "); opacity: .05; transform: rotate(-8deg); } /* half a pitch bleeds off the left */ .ssu-footer::after { left: -120px; top: -40px; width: 420px; height: 420px; background-image: url("data:image/svg+xml;charset=utf-8, "); opacity: .04; } /* a marker cone tucked behind the newsletter column */ .ssu-foot-quick { position: relative; } .ssu-foot-quick::before { content: ''; position: absolute; right: -6px; top: -18px; width: 74px; height: 74px; z-index: -1; pointer-events: none; background: url("data:image/svg+xml;charset=utf-8, ") no-repeat center / contain; opacity: .06; transform: rotate(9deg); } @media (max-width: 900px) { .ssu-footer::after { display: none; } .ssu-footer::before { width: 200px; height: 200px; right: -50px; } } /* ---------- the sale word sits beside the brand, above the title ---------- */ .woocommerce ul.products li.product .ssu-card-top { display: flex; align-items: center; gap: 10px; margin: 18px 0 1px; } .woocommerce ul.products li.product .ssu-card-brand { margin: 0 !important; } .woocommerce ul.products li.product .ssu-card-top .onsale, .woocommerce ul.products li.product .onsale { position: static !important; margin: 0 0 0 auto !important; transform: none !important; display: inline-flex; align-items: center; height: 21px; padding: 0 10px; background: var(--ssu-red); color: #fff; border: 0; border-radius: 999px; box-shadow: none; font-size: .68em; font-weight: 800; letter-spacing: .1em; line-height: 1; text-transform: uppercase; text-indent: 0; } .woocommerce ul.products li.product:hover .onsale { transform: none !important; } /* ---------- single product: brand row, no boxed container ---------- */ .ssu-single-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 2px; } /* the title is the one line in here with no natural break point of its own, so as a flex item it was refusing to shrink or wrap at all — its full, one-line width became the minimum width of the row, which is what was pulling the whole two-column grid out wide on any narrow screen. */ .ssu-single-top .product_title { min-width: 0; flex: 1 1 auto; } .ssu-single-top .ssu-single-brand { min-width: 0; flex: 0 1 auto; } .woocommerce div.product .product_title { margin-top: 0 !important; padding-top: 0 !important; line-height: 1.12; } .ssu-single-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none !important; font-size: .82em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #7b8798; } .ssu-single-brand:hover { color: var(--ssu-red); } .ssu-single-brandlogo { height: 22px !important; width: auto !important; max-width: 68px !important; object-fit: contain; opacity: .85; } .woocommerce div.product .ssu-single-top .onsale { position: static !important; transform: none !important; margin: 0 0 0 auto !important; display: inline-flex; align-items: center; height: 23px; padding: 0 11px; background: var(--ssu-red); color: #fff; border: 0; border-radius: 999px; box-shadow: none; font-size: .7em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-indent: 0; } /* the summary sat inside a bordered card; let it breathe on the page */ .woocommerce div.product, .woocommerce div.product .summary, .woocommerce #content div.product { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; } .woocommerce div.product .product_title { margin-top: 0; } /* no house glyph in the breadcrumb, now that Home is gone */ .woocommerce-breadcrumb::before, .woocommerce-breadcrumb .home::before, nav.woocommerce-breadcrumb > a:first-child::before { content: none !important; display: none !important; } /* ---------- single product: the gallery leads the page ---------- */ .woocommerce div.product { display: grid !important; grid-template-columns: 60fr 40fr; gap: 46px; align-items: start; } .woocommerce div.product div.images, .woocommerce div.product div.summary { width: auto !important; float: none !important; margin: 0 !important; clear: none !important; } .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .up-sells, .woocommerce div.product .ssu-single-foot { grid-column: 1 / -1; } @media (max-width: 860px) { /* a bare 1fr still lets the track's automatic minimum size follow the content inside it; minmax(0, 1fr) is the part that actually pins the floor at zero regardless of what refuses to shrink in there */ .woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: 26px; } /* .ssu-acc is moved to just after div.summary in the DOM at this width (see the script below) so it lands after the buying decision — the price, the size, add to cart — rather than between the pictures and it. That is a plain sibling move, not a grid placement, so nothing here needs to say where it goes. */ } /* thumbnails run down the side of the main picture, each in its own frame. flexslider measures the wrapper itself, so the gallery keeps its normal block layout and the thumb strip is placed into a gutter instead. */ .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery { position: relative; padding-left: 102px; } .woocommerce-product-gallery .flex-control-thumbs { position: absolute; left: 0; top: 0; width: 88px; display: grid !important; grid-template-columns: 1fr; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none; max-height: 100%; overflow-y: auto; } .woocommerce-product-gallery .flex-control-thumbs li { width: 100% !important; margin: 0 !important; float: none !important; list-style: none; } .woocommerce-product-gallery .flex-control-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; padding: 5px; border: 1px solid var(--ssu-line); border-radius: 9px; opacity: 1 !important; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .woocommerce-product-gallery .flex-control-thumbs img:hover { border-color: #c9d6e8; } .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs li.flex-active img { border-color: var(--ssu-navy); box-shadow: 0 0 0 2px rgba(18, 58, 109, .12); } .woocommerce-product-gallery__image img { border-radius: 10px; } @media (max-width: 640px) { .woocommerce-product-gallery { padding-left: 0; } /* a fixed 5-column grid left a shorter last row exactly as wide as one thumbnail, with the rest of the row sitting empty beside it. Flexible wrapping items close that gap instead of reserving it. */ .woocommerce-product-gallery .flex-control-thumbs { position: static; width: auto; display: flex !important; flex-wrap: wrap; gap: 10px; margin-top: 12px !important; } .woocommerce-product-gallery .flex-control-thumbs li { /* the base rule sets this li to width:100% !important for the desktop single-column strip; only an equally-important rule displaces it */ width: calc((100% - 40px) / 5) !important; min-width: 0; flex: 0 0 auto; } .woocommerce-product-gallery .flex-control-thumbs img { min-width: 0; } } /* ---------- the product clearfix cannot be a grid item ---------- Same trap as the shop loop: WooCommerce puts a table-display ::before on div.product, which took the first cell and pushed the gallery sideways. */ .woocommerce div.product::before, .woocommerce div.product::after, .woocommerce #content div.product::before, .woocommerce #content div.product::after { content: none !important; display: none !important; } /* ---------- place the two halves explicitly ---------- Storefront renders the gallery as .woocommerce-product-gallery with no .images wrapper, and auto-placement was dropping it into the narrow column. */ .woocommerce div.product > .woocommerce-product-gallery, .woocommerce div.product > div.images { grid-column: 1 !important; grid-row: 1 !important; width: auto !important; float: none !important; } .woocommerce div.product > div.summary { grid-column: 2 !important; grid-row: 1 !important; width: auto !important; float: none !important; } .woocommerce div.product > .woocommerce-tabs, .woocommerce div.product > .related, .woocommerce div.product > .up-sells, .woocommerce div.product > nav { grid-column: 1 / -1 !important; } @media (max-width: 860px) { .woocommerce div.product > .woocommerce-product-gallery, .woocommerce div.product > div.summary { grid-column: 1 !important; grid-row: auto !important; } } /* ---------- the main picture fills its column ---------- flexslider writes its own widths on the wrapper, the viewport and each slide; overriding those stopped the thumbnails from switching the image, so only the inside a slide is sized here. */ .woocommerce div.product .woocommerce-product-gallery__image img, .woocommerce div.product .woocommerce-product-gallery__wrapper img { width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: contain; } /* ---------- the breadcrumb sits close to the product ---------- */ .woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb { margin: 0 0 16px !important; padding: 0 !important; font-size: .92em; } .single-product .site-content { padding-top: 18px !important; } .woocommerce div.product { margin-top: 0 !important; } .single-product .site-main > .product:first-child { margin-top: 0 !important; } /* ---------- the breadcrumb wrapper carries the gap, not the list ---------- Storefront wraps it in .storefront-breadcrumb, which sits outside .site-content and holds ~5em of margin underneath. */ .storefront-breadcrumb { margin-bottom: 0 !important; padding-bottom: 0 !important; padding-top: 14px !important; } .storefront-breadcrumb .col-full { padding-bottom: 0 !important; margin-bottom: 0 !important; } .single-product .site-content, .woocommerce-page .site-content { padding-top: 14px !important; } /* ---------- the lightbox over a pale, blurred page ---------- */ .woocommerce-product-gallery__trigger { display: none !important; } .woocommerce div.product .woocommerce-product-gallery__image a { cursor: zoom-in; } .pswp__bg { background: rgba(244, 247, 251, .82) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 1 !important; } .pswp__scroll-wrap { color: var(--ssu-navy); } .pswp__caption__center { color: var(--ssu-navy); text-align: center; font-size: .9em; } .pswp__counter { color: var(--ssu-navy); opacity: .7; font-weight: 700; } .pswp__button { filter: invert(1) brightness(.35); } .pswp__button--arrow--left::before, .pswp__button--arrow--right::before { background-color: rgba(255, 255, 255, .8); border-radius: 8px; } .pswp__img { border-radius: 10px; box-shadow: 0 18px 50px rgba(9, 22, 42, .18); background: #fff; } .pswp--animated-in .pswp__bg { transition: opacity .2s ease; } /* ---------- the gallery reacts to a drag ---------- */ .woocommerce div.product .woocommerce-product-gallery__wrapper { touch-action: pan-y; -webkit-user-select: none; user-select: none; } .woocommerce div.product .woocommerce-product-gallery__wrapper img { -webkit-user-drag: none; user-drag: none; } /* ---------- the brand mark stands alone ---------- */ .woocommerce ul.products li.product .ssu-card-brand img.ssu-card-brandlogo, .ssu-card-brandlogo { height: 17px !important; max-width: 48px !important; } .ssu-single-brandlogo { height: 26px !important; max-width: 84px !important; } .ssu-card-brand .screen-reader-text, .ssu-single-brand .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* ---------- the mark sits beside the name above the title ---------- */ .ssu-single-brandlogo { display: inline-block !important; } .ssu-single-brandname { font-size: 1em; letter-spacing: .13em; } /* ---------- wordmark logos stand alone ---------- */ .woocommerce ul.products li.product .ssu-card-brand img.ssu-card-brandlogo, .ssu-card-brandlogo { height: 18px !important; max-width: 88px !important; } .ssu-single-brandlogo { height: 28px !important; max-width: 130px !important; } /* ---------- size boxes instead of a dropdown ---------- */ .ssu-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; } .woocommerce div.product form.cart .variations select.ssu-size-select { display: none !important; } .ssu-size { /* every box the same size, whatever the label */ min-width: 52px; height: 46px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ssu-line); border-radius: 9px; background: #fff; color: var(--ssu-navy); font-size: .92em; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease; } .ssu-size:hover:not(:disabled) { border-color: var(--ssu-navy); } .ssu-size.is-active { border-color: var(--ssu-navy); background: var(--ssu-navy); color: #fff; box-shadow: 0 3px 10px rgba(18, 58, 109, .18); } .ssu-size.is-out { color: #b6c0cd; border-color: #eef1f6; cursor: not-allowed; background: repeating-linear-gradient(135deg, #fff 0 6px, #f6f8fb 6px 12px); text-decoration: line-through; } .woocommerce div.product form.cart .variations { margin-bottom: 10px; } .woocommerce div.product form.cart .variations th.label, .woocommerce div.product form.cart .variations label { font-size: .78em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ssu-navy); } .woocommerce div.product form.cart .reset_variations { font-size: .78em; } /* ---------- header crest, larger ---------- */ .site-header > .col-full .site-branding img.custom-logo { max-width: 260px; } @media (max-width: 900px) { .site-header > .col-full .site-branding img.custom-logo { max-width: 200px; } } @media (max-width: 720px) { .site-header > .col-full .site-branding img.custom-logo { max-width: 170px; } } /* ---------- thumbnail rail: no scrollbar, chevrons, fades ---------- */ .woocommerce-product-gallery .ssu-thumbrail { position: absolute; left: 0; top: 0; width: 88px; height: 100%; } .woocommerce-product-gallery .ssu-thumbrail .flex-control-thumbs { position: static !important; width: 100% !important; height: 100%; max-height: 100%; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .woocommerce-product-gallery .ssu-thumbrail .flex-control-thumbs::-webkit-scrollbar { width: 0; height: 0; display: none; } /* the fades only appear when there is something beyond the edge */ .ssu-thumbrail::before, .ssu-thumbrail::after { content: ''; position: absolute; left: 0; right: 0; height: 46px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .18s ease; } .ssu-thumbrail::before { top: 0; background: linear-gradient(180deg, #fff 15%, rgba(255, 255, 255, 0)); } .ssu-thumbrail::after { bottom: 0; background: linear-gradient(0deg, #fff 15%, rgba(255, 255, 255, 0)); } .ssu-thumbrail.can-up::before, .ssu-thumbrail.can-down::after { opacity: 1; } .ssu-thumbnav { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; width: 30px; height: 30px; padding: 0; display: none; align-items: center; justify-content: center; border: 1px solid var(--ssu-line); border-radius: 50%; background: #fff; color: var(--ssu-navy); cursor: pointer; box-shadow: 0 3px 10px rgba(18, 58, 109, .14); transition: background .14s ease, color .14s ease, border-color .14s ease; } .ssu-thumbnav:hover { background: var(--ssu-navy); border-color: var(--ssu-navy); color: #fff; } .ssu-thumbnav-up { top: 2px; } .ssu-thumbnav-down { bottom: 2px; } .ssu-thumbrail.can-up .ssu-thumbnav-up, .ssu-thumbrail.can-down .ssu-thumbnav-down { display: inline-flex; } @media (max-width: 640px) { .woocommerce-product-gallery .ssu-thumbrail { position: static; width: auto; height: auto; margin-top: 12px; } .woocommerce-product-gallery .ssu-thumbrail .flex-control-thumbs { height: auto; } .ssu-thumbnav { display: none !important; } .ssu-thumbrail::before, .ssu-thumbrail::after { display: none; } } /* the size dropdown is hidden from the first paint, before the script runs */ .woocommerce div.product form.cart .variations select[data-ssu-size] { display: none !important; } /* ---------- scrollable panes should not draw a focus ring ---------- Chrome makes any scroll container keyboard-focusable, so clicking the gallery and then pressing an arrow key outlined the whole area. Real controls keep their outline. */ .woocommerce div.product .woocommerce-product-gallery:focus, .woocommerce div.product .woocommerce-product-gallery__wrapper:focus, .woocommerce div.product .flex-viewport:focus, .woocommerce div.product .flex-control-thumbs:focus, .woocommerce div.product .ssu-thumbrail:focus, .woocommerce div.product div:focus, .woocommerce div.product figure:focus, .woocommerce div.product ol:focus, .woocommerce div.product li:focus { outline: none !important; box-shadow: none !important; } .woocommerce div.product a:focus-visible, .woocommerce div.product button:focus-visible, .woocommerce div.product input:focus-visible, .woocommerce div.product select:focus-visible { outline: 2px solid var(--ssu-navy); outline-offset: 2px; } /* ---------- no ring on any layout container ---------- Chrome focuses scroll containers on click and rings them on the next key press. Layout wrappers never need a ring; controls still get one. */ div:focus, div:focus-visible, figure:focus, figure:focus-visible, section:focus, section:focus-visible, ol:focus, ol:focus-visible, ul:focus, ul:focus-visible, li:focus, li:focus-visible, main:focus, main:focus-visible, article:focus, article:focus-visible, nav:focus, nav:focus-visible { outline: none !important; box-shadow: none !important; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--ssu-navy) !important; outline-offset: 2px; } /* ---------- thumbs pack to the top, evenly spaced ---------- With a full-height grid the rows were free to spread out when a product had only two or three pictures. */ .woocommerce-product-gallery .ssu-thumbrail .flex-control-thumbs { align-content: start !important; justify-content: start !important; grid-auto-rows: max-content !important; gap: 10px !important; } .woocommerce-product-gallery .ssu-thumbrail .flex-control-thumbs li { height: auto !important; } /* ---------- variation type, larger ---------- */ .ssu-size { font-size: 1.06em !important; min-width: 58px !important; height: 50px !important; padding: 0 13px !important; } .woocommerce div.product form.cart .variations th.label, .woocommerce div.product form.cart .variations label { font-size: 1.02em !important; letter-spacing: .06em; } .woocommerce div.product form.cart .reset_variations { font-size: .84em !important; } /* ---------- the variation label reads clearly, choices sit under it ---------- */ .woocommerce div.product form.cart .variations th.label, .woocommerce div.product form.cart .variations label { font-size: 1.14em !important; font-weight: 800 !important; letter-spacing: .04em; text-transform: none !important; color: var(--ssu-navy) !important; display: block; margin-bottom: 10px !important; } .woocommerce div.product form.cart .ssu-sizes { padding-left: 20px; } .woocommerce div.product form.cart .reset_variations { margin-left: 20px; } /* ---------- the chosen size is outlined, not filled ---------- */ .ssu-size.is-active { background: rgba(18, 58, 109, .05) !important; color: var(--ssu-navy) !important; border: 2px solid var(--ssu-navy) !important; box-shadow: 0 0 0 3px rgba(18, 58, 109, .13) !important; font-weight: 800; } .ssu-size.is-active::after { content: ''; position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--ssu-navy); } .ssu-size { position: relative; } /* ---------- the chosen size, quietly marked ---------- */ .ssu-size.is-active { background: rgba(18, 58, 109, .04) !important; color: var(--ssu-navy) !important; border: 2px solid var(--ssu-navy) !important; box-shadow: none !important; } .ssu-size.is-active::after { content: none !important; } /* the boxes toggle, so the reset link is redundant */ .woocommerce div.product form.cart .reset_variations { display: none !important; } /* ---------- the price leads the summary ---------- */ .woocommerce div.product p.price, .woocommerce div.product span.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 14px 0 18px !important; font-size: 2.15em !important; font-weight: 800; line-height: 1.05; color: var(--ssu-navy); } .woocommerce div.product p.price ins, .woocommerce div.product span.price ins { order: 1; text-decoration: none; background: none; color: var(--ssu-red); font-weight: 800; } .woocommerce div.product p.price del, .woocommerce div.product span.price del { order: 2; opacity: 1; margin: 0 !important; font-size: .5em; font-weight: 600; color: #9aa6b6; text-decoration: line-through; text-decoration-thickness: 2px; } .woocommerce div.product p.price .woocommerce-Price-amount { font-weight: inherit; } .woocommerce div.product p.price small.woocommerce-price-suffix { font-size: .38em; color: var(--ssu-muted); } @media (max-width: 700px) { .woocommerce div.product p.price { font-size: 1.8em !important; } } /* ---------- the quantity and the cart button share a row ---------- */ .woocommerce div.product form.cart, .woocommerce div.product .woocommerce-variation-add-to-cart { display: flex !important; align-items: stretch; gap: 12px; flex-wrap: wrap; } .woocommerce div.product form.cart .variations, .woocommerce div.product form.cart .woocommerce-variation, .woocommerce div.product form.cart .woocommerce-variation-description, .woocommerce div.product form.cart .woocommerce-variation-price, .woocommerce div.product form.cart .woocommerce-variation-availability { flex: 1 1 100%; } .ssu-qty { flex: 0 0 20%; min-width: 130px; display: flex; align-items: stretch; border: 1.5px solid var(--ssu-line); border-radius: 10px; overflow: hidden; background: #fff; } .ssu-qty .quantity { flex: 1 1 auto; margin: 0 !important; display: flex; } .ssu-qty input.qty { width: 100% !important; height: auto; min-height: 50px; border: 0 !important; border-radius: 0 !important; background: none !important; text-align: center; font-size: 1.02em; font-weight: 700; color: var(--ssu-navy); box-shadow: none !important; padding: 0 2px !important; -moz-appearance: textfield; } .ssu-qty input.qty::-webkit-outer-spin-button, .ssu-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ssu-qty-btn { flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: #f6f8fb; color: var(--ssu-navy); cursor: pointer; padding: 0; transition: background .14s ease, color .14s ease; } .ssu-qty-btn:hover { background: var(--ssu-navy); color: #fff; } .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; min-height: 50px; border-radius: 10px; font-size: .92em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } @media (max-width: 520px) { .ssu-qty { flex: 0 0 40%; } } /* ---------- wishlist row, under the cart row ---------- */ .ssu-wishlist { flex: 1 1 100%; order: 99; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px; margin-top: 2px; border: 1.5px solid var(--ssu-line); border-radius: 10px; background: #fff; color: var(--ssu-navy); cursor: pointer; font-size: .86em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; transition: border-color .15s ease, color .15s ease, background .15s ease; } .ssu-wishlist:hover { border-color: var(--ssu-red); color: var(--ssu-red); } .ssu-wishlist.is-on { border-color: var(--ssu-red); color: var(--ssu-red); background: rgba(216, 31, 38, .05); } .ssu-wishlist .ssu-wish-icon { flex: 0 0 auto; } /* ---------- a rule under the price ---------- */ .woocommerce div.product p.price, .woocommerce div.product span.price { padding-bottom: 18px !important; border-bottom: 1px solid #e8ecf3; margin-bottom: 20px !important; } /* not on the cards or inside the variation block, only the summary */ .woocommerce ul.products li.product .price, .woocommerce div.product .woocommerce-variation-price .price { padding-bottom: 0 !important; border-bottom: 0 !important; } /* ---------- the wishlist button keeps its white face ---------- Storefront paints every