/*
Theme Name: Hubert
Theme URI: https://www.hubert.com.ua
Author: Qwazar
Author URI: https://github.com/qwazar14
Description: Own theme for hubert.com.ua — workshop and shop. One stylesheet, one script, WooCommerce + Polylang.
Version: 2.0.0
Requires PHP: 7.4
Text Domain: hubert
*/

/*
 * Rules (DESIGN.md): paper for pages, white wells for product photos, ink for the header, footer, the works band and
 * the photo viewer. Red only for the one primary action on screen, sale prices, errors and the focus ring.
 * Sentence case, square surfaces (2px on controls), 1px rules, a 2px ink rule over each section heading.
 * Fixel (Ukrainian, MacPaw, OFL): Display 700 for headings, Text 400/600 for everything else.
 * Nothing moves on load or scroll; transitions only answer a hover, tap or key.
 */

/* =========================================================
   0. Fonts: two subset files (Latin + Cyrillic + ₴ №), metric-matched fallbacks so the swap doesn't shift layout
   ========================================================= */
@font-face { font-family: 'Fixel Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/fixel-display-700.woff2) format('woff2'); }
@font-face { font-family: 'Fixel Text'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/fixel-text.woff2) format('woff2'); }
@font-face { font-family: 'Fixel Display Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); size-adjust: 102.3%; ascent-override: 87.9%; descent-override: 18.6%; line-gap-override: 28.3%; }
@font-face { font-family: 'Fixel Text Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 101.6%; ascent-override: 88.6%; descent-override: 18.7%; line-gap-override: 28.5%; }
@font-face { font-family: 'Fixel Display Fallback R'; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 108%; ascent-override: 83.3%; descent-override: 17.6%; line-gap-override: 26.9%; }
@font-face { font-family: 'Fixel Text Fallback R'; src: local('Roboto'), local('Roboto-Regular'); size-adjust: 101.3%; ascent-override: 88.9%; descent-override: 18.8%; line-gap-override: 28.6%; }

/* =========================================================
   1. Tokens: the only colour, font and size literals
   ========================================================= */
:root {
	--ink: #0b0606;            /* dark surfaces */
	--text: #150c0c;           /* text on light */
	--paper: #f6f2ef;          /* page */
	--white: #fff;             /* image wells, inputs, summary boxes */
	--red: #820000;            /* primary action on light, sale price, errors */
	--red-press: #6a0000;
	--hot: #e0383f;            /* focus ring; primary action on dark */
	--hot-hover: #ec5a60;
	--muted: #6b5f5d;          /* secondary text on light */
	--muted-d: #b8aca9;        /* secondary text on dark */
	--edge: #8a7f7c;           /* borders of inputs, checkboxes, outline buttons */
	--line: rgba(11, 6, 6, .14);
	--line-d: rgba(246, 242, 239, .14);
	--disp: 'Fixel Display', 'Fixel Display Fallback', 'Fixel Display Fallback R', system-ui, sans-serif;
	--font: 'Fixel Text', 'Fixel Text Fallback', 'Fixel Text Fallback R', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--t-xs: 13px; --t-sm: 14px; --t-base: 16px; --t-md: 20px; --t-lg: 25px; --t-xl: 31px; --t-2xl: 39px;
	--wrap: 1280px;
	--gut: 32px;
	--veil: rgba(11, 6, 6, .5);
	--backdrop: rgba(11, 6, 6, .96);
	--hover-d: rgba(246, 242, 239, .1);
	--lift: 0 1px 2px rgba(11, 6, 6, .08), 0 8px 24px rgba(11, 6, 6, .12); /* floating layers only */
	--ease: cubic-bezier(.16, 1, .3, 1);
	color-scheme: light;
}
@media (min-width: 1024px) { :root { --t-lg: 31px; --t-xl: 39px; --t-2xl: 49px; } }
@media (max-width: 1199px) { :root { --gut: 24px; } }
@media (max-width: 767px) { :root { --gut: 16px; } }

/* =========================================================
   2. Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.hub-lock, html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 var(--t-base)/1.55 var(--font); font-synthesis: none; -webkit-font-smoothing: antialiased; }
::selection { background: var(--red); color: var(--white); }
img, svg, iframe, video { max-width: 100%; }
img { height: auto; }
a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { a:hover { color: var(--red); } }
h1, h2, h3, h4 { margin: 0 0 .5em; color: inherit; text-wrap: balance; }
h1, h2 { font-family: var(--disp); font-weight: 700; }
h3, h4 { font-family: var(--font); font-weight: 600; }
p { margin: 0 0 1em; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.hub-wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.hub-skip { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 10px 16px; background: var(--red); color: var(--white); }
.hub-skip:focus { left: 8px; top: 8px; }
.hub-main { display: block; min-height: 50vh; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
table { border-collapse: collapse; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--text); width: 18px; height: 18px; }

/* =========================================================
   3. Components: buttons, section heading, forms
   ========================================================= */
.hub-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 2px; font: 600 var(--t-base)/1.15 var(--font); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .12s, color .12s, border-color .12s; }
.hub-btn-p { border-color: var(--red); background: var(--red); color: var(--white); }
.hub-btn-o { border-color: var(--edge); background: transparent; color: var(--text); }
@media (hover: hover) {
	.hub-btn-p:hover { border-color: var(--red-press); background: var(--red-press); color: var(--white); }
	.hub-btn-o:hover { border-color: var(--text); background: var(--text); color: var(--paper); }
}
.hub-tlink { font-weight: 600; }

.hub-shead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 32px; padding-top: 16px; border-top: 2px solid var(--text); }
.hub-shead h2 { margin: 0; font-size: var(--t-lg); line-height: 1.15; letter-spacing: -.01em; }
.hub-shead a { font-weight: 600; }
.hub-sec { padding-top: 96px; }
.hub-lead { max-width: 65ch; margin: 0 0 32px; color: var(--muted); font-size: 17px; }
.hub-more { margin: 32px 0 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], select, textarea { max-width: 100%; border: 1px solid var(--edge); border-radius: 2px; background: var(--white); color: var(--text); font-size: var(--t-base); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select { min-height: 44px; padding: 8px 12px; }
textarea { padding: 10px 12px; }

/* =========================================================
   4. Header
   ========================================================= */
.hub-header { position: relative; z-index: 900; background: var(--ink); color: var(--paper); }
.hub-header a { color: inherit; text-decoration: none; }
@media (hover: hover) { .hub-header a:hover { color: var(--white); text-decoration: underline; } }
.hub-top { border-bottom: 1px solid var(--line-d); font-size: var(--t-sm); color: var(--muted-d); }
.hub-top .hub-wrap { display: flex; align-items: center; gap: 20px; height: 36px; }
.hub-toplinks { display: flex; gap: 20px; margin-right: auto; }
.hub-top a { color: var(--muted-d); }
.hub-hours { min-width: 19ch; text-align: right; color: var(--muted-d); } /* the computed text changes length: keep neighbours still */
.hub-lang { display: flex; gap: 2px; }
.hub-lang a { padding: 3px 7px; border-radius: 2px; font-weight: 600; font-size: var(--t-sm); }
.hub-lang a[aria-current] { background: var(--paper); color: var(--ink); }
.hub-bar { position: relative; z-index: 4; background: var(--ink); } /* stays above the dimming veil, so search works with the catalog open */
.hub-bar .hub-wrap { display: flex; align-items: center; gap: 12px; height: 68px; }
.hub-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-right: 8px; }
.hub-logo img { width: 44px; height: 44px; border-radius: 50%; }
.hub-logo span { display: flex; flex-direction: column; font: 400 var(--t-sm)/1.2 var(--font); color: var(--muted-d); }
.hub-logo b { font: 700 18px/1.15 var(--disp); color: var(--white); }
.hub-catbtn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 2px; background: transparent; color: var(--paper); font: 600 var(--t-base)/1 var(--font); cursor: pointer; flex-shrink: 0; }
.hub-catbtn[aria-expanded="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
@media (hover: hover) { .hub-catbtn:hover { border-color: var(--paper); } }
.hub-catbtn i, .hub-burger span { position: relative; width: 16px; height: 2px; background: currentColor; }
.hub-catbtn i::before, .hub-catbtn i::after, .hub-burger span::before, .hub-burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
.hub-catbtn i::before, .hub-burger span::before { top: -5px; }
.hub-catbtn i::after, .hub-burger span::after { top: 5px; }
.hub-catbtn[aria-expanded="true"] i, .hub-burger[aria-expanded="true"] span { background: transparent; }
.hub-catbtn[aria-expanded="true"] i::before, .hub-burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.hub-catbtn[aria-expanded="true"] i::after, .hub-burger[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }
.hub-navlink { padding: 0 8px; font-weight: 600; white-space: nowrap; }
.hub-search { display: flex; height: 44px; border-radius: 2px; background: var(--white); }
.hub-search.is-bar { flex: 1; max-width: 480px; margin-left: auto; }
.hub-search input[type="search"] { flex: 1; min-width: 0; min-height: 0; height: 100%; padding: 0 14px; border: 0; background: transparent; outline: 0; }
.hub-search:focus-within { outline: 2px solid var(--hot); outline-offset: 2px; }
.hub-search button { width: 48px; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.hub-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; flex-shrink: 0; }
.hub-count { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 2px; background: var(--paper); color: var(--ink); font: 600 12px/20px var(--font); text-align: center; }
.hub-count[hidden] { display: none; }
.hub-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--white); cursor: pointer; flex-shrink: 0; }
.hub-srow { display: none; }

/* catalog panel: full width under the header on desktop, a drawer on phones */
.hub-cat { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; max-height: calc(100vh - 120px - var(--hb-cookie-h, 0px)); overflow: auto; background: var(--paper); color: var(--text); box-shadow: var(--lift); }
.hub-cat[hidden] { display: none; }
.hub-cat-head, .hub-cat-more { display: none; }
.hub-mega { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; padding-top: 28px; padding-bottom: 36px; }
.hub-mega-col { padding-top: 8px; border-top: 1px solid var(--line); }
.hub-mega-t { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text) !important; }
.hub-mega ul { margin: 0; padding: 0; list-style: none; }
.hub-mega li a { display: block; padding: 3px 0; font-size: var(--t-sm); color: var(--muted) !important; }
.hub-mega .hub-mega-all { color: var(--text) !important; font-weight: 600; }
@media (hover: hover) { .hub-mega a:hover { color: var(--red) !important; text-decoration: underline; } }
.hub-veil { position: fixed; inset: 0; z-index: 1; background: var(--veil); }
.hub-veil[hidden] { display: none; }

/* =========================================================
   5. Footer
   ========================================================= */
.hub-footer { margin-top: 112px; background: var(--ink); color: var(--muted-d); font-size: var(--t-sm); }
.hub-footer a { color: var(--paper); text-decoration: none; }
@media (hover: hover) { .hub-footer a:hover { color: var(--white); text-decoration: underline; } }
.hub-fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 48px; }
.hub-footer h2 { margin: 0 0 14px; padding-top: 12px; border-top: 1px solid var(--line-d); font: 600 var(--t-sm)/1.3 var(--font); color: var(--white); }
.hub-footer ul { margin: 0 0 14px; padding: 0; list-style: none; }
.hub-footer li { margin: 0; }
.hub-footer li a { display: inline-block; padding: 4px 0; }
.hub-fphone { display: block; margin-bottom: 12px; font-size: var(--t-md); font-weight: 600; }
.hub-fbottom { border-top: 1px solid var(--line-d); }
.hub-fbottom .hub-wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.hub-fseal { display: inline-flex; align-items: center; gap: 10px; }
.hub-fseal img { border-radius: 50%; }

/* =========================================================
   6. Pages, articles, cards
   ========================================================= */
.hub-page { padding-top: 32px; }
.hub-phead { margin-bottom: 28px; }
.hub-h1 { margin: 0; font: 700 var(--t-xl)/1.1 var(--disp); letter-spacing: -.02em; }
.hub-meta { margin: 10px 0 0; color: var(--muted); }
.hub-prose { max-width: 70ch; font-size: 17px; line-height: 1.65; }
.hub-prose h2, .hub-prose h3, .hub-prose h4 { margin: 1.8em 0 .5em; font-family: var(--font); font-weight: 600; line-height: 1.3; }
.hub-prose h2 { font-size: 23px; }
.hub-prose h3 { font-size: var(--t-md); }
.hub-prose h4 { font-size: 18px; }
.hub-prose > :first-child { margin-top: 0; }
.hub-prose ul, .hub-prose ol { padding-left: 1.3em; }
.hub-prose li { margin-bottom: .4em; }
.hub-prose img { display: block; }
.hub-prose > img, .hub-prose > p > img, .hub-prose > p > a > img, .hub-prose figure > img, .hub-prose figure > a > img { margin: 1.2em 0; }
.hub-prose figure { margin: 1.2em 0; } /* the browser's default 40px side margin narrowed every image and pushed tables off the screen */
.hub-prose figure img { margin: 0; }
.hub-prose .wp-block-table { overflow-x: auto; }
.hub-prose .wc-block-components-product-image img { max-width: 100% !important; height: auto; } /* product blocks print max-width:none inline */
.hub-prose a img { cursor: zoom-in; }
.hub-prose table { width: 100%; margin: 1.2em 0; font-size: 15.5px; }
.hub-prose th, .hub-prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hub-prose th { font-weight: 600; }
.hub-prose blockquote { margin: 1.4em 0; padding: 2px 0 2px 20px; border-left: 1px solid var(--text); color: var(--muted); }
.hub-prose iframe { width: 100%; border: 0; }
.hub-cover { margin: 0 0 32px; }
.hub-cover img { display: block; width: 100%; max-height: 560px; object-fit: cover; }
.hub-postnav { display: flex; justify-content: space-between; gap: 20px; max-width: 70ch; margin-top: 48px; padding-top: 16px; border-top: 2px solid var(--text); }
.hub-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.hub-card-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--white); }
.hub-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-card-body { padding-top: 12px; }
.hub-card-body time { font-size: var(--t-sm); color: var(--muted); }
.hub-card-title { margin: 4px 0 8px; font: 600 var(--t-md)/1.3 var(--font); }
.hub-card-title a { text-decoration: none; }
@media (hover: hover) { .hub-card-title a:hover { text-decoration: underline; } }
.hub-card-body p { margin: 0; color: var(--muted); }
.navigation.pagination, .woocommerce nav.woocommerce-pagination { margin-top: 40px; }
.nav-links, .woocommerce nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; border: 0; list-style: none; }
.woocommerce nav.woocommerce-pagination ul li { margin: 0; border: 0; }
.nav-links .page-numbers, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--text); font-weight: 600; text-decoration: none; }
.nav-links .page-numbers.current, .woocommerce nav.woocommerce-pagination ul li span.current { background: transparent; color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (hover: hover) { .nav-links a.page-numbers:hover, .woocommerce nav.woocommerce-pagination ul li a:hover { background: transparent; color: var(--red); text-decoration: underline; } }
.hub-empty, .hub-404 p { color: var(--muted); }
.hub-contacts { max-width: 760px; margin: 0; border-top: 2px solid var(--text); }
.hub-contacts div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hub-contacts dt { font-weight: 600; }
.hub-contacts dd { margin: 0; }
.hub-contacts-big { font-size: var(--t-md); font-weight: 600; }

/* =========================================================
   7. Home
   ========================================================= */
.hub-sign { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 0 64px; align-items: end; padding-top: 48px; }
.hub-sign-photo { grid-column: 1 / -1; }
.hub-sign-facts { margin: 0; border-top: 2px solid var(--text); }
.hub-sign-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hub-sign-facts dt { color: var(--muted); }
.hub-sign-facts dd { margin: 0; font-weight: 600; }
.hub-sign h1 { max-width: 16ch; margin: 0 0 16px; font-size: var(--t-2xl); line-height: 1.05; letter-spacing: -.025em; }
.hub-sign-lead { max-width: 40ch; margin: 0 0 28px; font-size: var(--t-md); line-height: 1.4; }
.hub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hub-sign-photo { margin: 40px 0 0; }
.hub-sign-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 760; max-height: 600px; object-fit: cover; background: var(--ink); }
.hub-sign-photo figcaption { margin-top: 8px; font-size: var(--t-xs); color: var(--muted); }

/* services: a price list. The two main ones carry a photo. */
.hub-svc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hub-svc li { display: grid; grid-template-columns: 240px 260px minmax(0, 1fr); gap: 0 32px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.hub-svc li > :first-child:not(img) { grid-column: 2; }
.hub-svc li.is-main { align-items: center; padding: 24px 0; }
.hub-svc img { display: block; width: 240px; height: 160px; object-fit: cover; background: var(--ink); }
.hub-svc h3 { margin: 0; font-size: var(--t-md); }
.hub-svc p { max-width: 60ch; margin: 0; color: var(--muted); }
.hub-svc li.is-main p { color: var(--text); }

/* works: the page's one dark band */
.hub-band { margin-top: 96px; padding: 64px 0 72px; background: var(--ink); color: var(--paper); }
.hub-band .hub-shead { border-top-color: var(--paper); margin-bottom: 12px; }
.hub-band-lead { margin-bottom: 32px; color: var(--muted-d); }
.hub-band .hub-btn-o { border-color: var(--muted-d); color: var(--paper); }
@media (hover: hover) { .hub-band .hub-btn-o:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); } }
.hub-works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; margin: 0; padding: 0; list-style: none; }
.hub-works li { margin: 0; }
.hub-works li.is-extra { display: none; }
.hub-works.is-all li.is-extra { display: block; }
.hub-works a { display: block; background: var(--text); cursor: zoom-in; }
.hub-works img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.hub-works p { margin: 10px 0 0; font-size: var(--t-sm); line-height: 1.4; color: var(--paper); }
.hub-works p span { display: block; margin-top: 2px; color: var(--muted-d); }

/* catalog tree: every category and its subcategories (all open on wide screens, accordion on phones) */
.hub-catsec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 0 48px; align-items: start; }
.hub-catsec-side .hub-shead { margin-bottom: 20px; }
.hub-catsec .hub-tree { padding-top: 0; } /* the first row's rule lines up with the heading's */
.hub-tree { columns: 3 220px; column-gap: 32px; }
.hub-tree-i { display: block; break-inside: avoid; margin: 0 0 24px; padding-top: 10px; border-top: 1px solid var(--text); text-decoration: none; }
.hub-tree summary a { display: inline-block; padding: 4px 0; color: inherit; text-decoration: none; } /* 25px tall: WCAG 2.2 target size */
@media (hover: hover) { .hub-tree summary a:hover { color: var(--red); text-decoration: underline; } }
.hub-tree summary, .hub-tree-leaf { display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: 17px; color: var(--text); }
.hub-tree summary { cursor: pointer; list-style: none; }
.hub-tree summary::-webkit-details-marker { display: none; }
.hub-tree summary span, .hub-tree-leaf span { margin-left: auto; font-weight: 400; font-size: var(--t-sm); color: var(--muted); }
.hub-tree ul { margin: 8px 0 0; padding: 0; list-style: none; }
.hub-tree li a { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; text-decoration: none; font-size: 15px; }
.hub-tree li a span { margin-left: auto; font-size: var(--t-xs); color: var(--muted); }
@media (hover: hover) { .hub-tree li a:hover, .hub-tree-leaf:hover b { color: var(--red); text-decoration: underline; } }
.hub-tree .hub-tree-all { font-weight: 600; }
.hub-brands { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.8; }
.hub-brands b { display: block; }

.hub-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.hub-steps li { counter-increment: step; }
.hub-steps h3 { margin: 0 0 6px; font-size: var(--t-md); }
.hub-steps h3::before { content: counter(step) ". "; }
.hub-steps p { margin: 0; color: var(--muted); }
.hub-faq-t { margin: 64px 0 12px; font-size: var(--t-md); }
.hub-faq { max-width: 800px; border-top: 1px solid var(--line); }
.hub-faq details { border-bottom: 1px solid var(--line); }
.hub-faq summary { position: relative; padding: 16px 44px 16px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 18px; line-height: 1.35; }
.hub-faq summary::-webkit-details-marker { display: none; }
.hub-faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 400 26px/1 var(--font); transition: transform .15s var(--ease); }
.hub-faq details[open] summary::after { transform: rotate(45deg); }
.hub-faq details p { max-width: 70ch; margin: 0; padding: 0 0 18px; }
.hub-contact-line { margin: 24px 0 0; }

/* photo viewer (hubert.js): the photo on a dark screen, a counter, a caption and controls */
.hub-view { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 56px 0 64px; border: 0; background: var(--ink); color: var(--white); overscroll-behavior: contain; }
.hub-view[open] { display: flex; align-items: center; justify-content: center; }
.hub-view::backdrop { background: var(--backdrop); }
.hub-view-img { position: absolute; inset: 56px 0 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hub-view img { display: block; max-width: calc(100% - 32px); max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.hub-view.is-zoom .hub-view-img { display: block; overflow: auto; }
.hub-view.is-zoom img { max-width: none; max-height: none; cursor: zoom-out; }
.hub-view-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 20px; font-size: 15px; line-height: 1.4; }
.hub-view-bar span { flex-shrink: 0; color: var(--muted-d); }
.hub-view-bar p { margin: 0; color: var(--paper); }
.hub-view button { position: absolute; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; background: transparent; color: var(--white); font: 300 34px/1 var(--font); cursor: pointer; }
@media (hover: hover) { .hub-view button:hover { background: var(--hover-d); } }
.hub-view-x { top: 0; right: 0; }
.hub-view-prev { left: 0; top: 50%; transform: translateY(-50%); }
.hub-view-next { right: 0; top: 50%; transform: translateY(-50%); }
.hub-view.is-single .hub-view-prev, .hub-view.is-single .hub-view-next { display: none; }

/* =========================================================
   8. WooCommerce
   ========================================================= */
.woocommerce-breadcrumb { margin: 0 0 16px; font-size: var(--t-xs); color: var(--muted); }
.woocommerce-breadcrumb a { display: inline-block; padding: 4px 0; color: var(--muted); }

/* buttons: secondary by default; primary (red) for add to cart on the product page, checkout and placing the order */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--edge); border-radius: 2px; background: transparent; color: var(--text); font: 600 var(--t-base)/1.15 var(--font); text-decoration: none; transition: background-color .12s, color .12s, border-color .12s;
}
.woocommerce div.product form.cart .button, .woocommerce a.checkout-button, .woocommerce #place_order, .woocommerce button.button.alt, .woocommerce a.button.alt { border-color: var(--red); background: var(--red); color: var(--white); }
@media (hover: hover) {
	.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { border-color: var(--text); background: var(--text); color: var(--paper); }
	.woocommerce div.product form.cart .button:hover, .woocommerce a.checkout-button:hover, .woocommerce #place_order:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover { border-color: var(--red-press); background: var(--red-press); color: var(--white); }
}
.woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] { border-color: var(--edge); background: transparent; color: var(--text); opacity: .4; cursor: not-allowed; }
.woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover { border-color: var(--red); background: var(--red); color: var(--white); opacity: 1; cursor: pointer; } /* pressing it asks for the variant */
.woocommerce .button.is-loading { opacity: .6; pointer-events: none; }
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale { position: absolute; top: 12px; left: 12px; right: auto; z-index: 1; min-width: 0; min-height: 0; margin: 0; padding: 2px 8px; border: 1px solid var(--text); border-radius: 2px; background: var(--white); color: var(--text); font: 600 var(--t-xs)/1.4 var(--font); }

/* notices: a plain box */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 24px; padding: 14px 18px; border: 1px solid var(--edge); border-radius: 0; background: var(--white); color: var(--text); list-style: none; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-error { border-color: var(--red); color: var(--red); }
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus { outline: none; } /* WooCommerce moves focus here for screen readers; it is not a control */
.woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; }

/* product cards */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { position: relative; display: flex; flex-direction: column; width: auto !important; margin: 0 !important; padding: 16px 16px 20px; float: none !important; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.woocommerce ul.products li.product:nth-child(4n) { border-right: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: flex; flex: 1; flex-direction: column; text-decoration: none; }
.woocommerce ul.products li.product a img { width: 100%; margin: 0 0 12px; padding: 8%; aspect-ratio: 1; object-fit: contain; background: var(--white); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 8px; padding: 0; font: 400 var(--t-base)/1.4 var(--font); color: var(--text); }
@media (hover: hover) { .woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { text-decoration: underline; text-underline-offset: 3px; } }
.woocommerce ul.products li.product .star-rating { display: none; }
.woocommerce ul.products li.product .price { display: block; margin: auto 0 2px; font: 600 17px/1.3 var(--font); color: var(--text); }
.woocommerce ul.products li.product .price del { margin-right: 6px; font-weight: 400; color: var(--muted); opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--red); }
.hub-avail { display: block; font-size: var(--t-sm); color: var(--text); }
.hub-avail:not(.is-instock) { color: var(--muted); }
.woocommerce ul.products li.product .hub-avail { margin: 0 0 12px; }
.woocommerce ul.products li.product .button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; margin: 0; }
.woocommerce ul.products li.product .added_to_cart { display: none; }

/* listing */
.hub-lhead { margin-bottom: 24px; }
.hub-up { display: inline-flex; align-items: center; gap: 2px; margin-bottom: 8px; font-size: var(--t-sm); text-decoration: none; }
.hub-up svg { width: 18px; height: 18px; }
.hub-up-m { display: none; }
.hub-nw { white-space: nowrap; }
.hub-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 48px; padding: 0; list-style: none; }
.hub-tiles a { display: block; text-decoration: none; }
.hub-tiles img, .hub-noimg { display: block; width: 100%; height: auto; aspect-ratio: 1; padding: 10%; object-fit: contain; background: var(--white); }
.hub-tiles span { display: block; margin-top: 8px; font-weight: 600; }
@media (hover: hover) { .hub-tiles a:hover span { text-decoration: underline; color: var(--red); } }
.hub-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.hub-subcats a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 9px 14px; border: 1px solid var(--edge); border-radius: 2px; text-decoration: none; font-size: 15px; }
.hub-subcats a span { color: var(--muted); font-size: var(--t-xs); }
.hub-subcats a[aria-current] { border-color: var(--text); background: var(--text); color: var(--paper); }
.hub-subcats a[aria-current] span { color: var(--muted-d); }
.hub-listing { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; align-items: start; }
.hub-filters > summary { display: none; }
.hub-filters-in > * + * { margin-top: 20px; }
.hub-facet-t { display: block; margin: 0 0 8px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 600; font-size: var(--t-sm); }
.hub-facet summary.hub-facet-t { display: flex; justify-content: space-between; cursor: pointer; list-style: none; }
.hub-facet summary.hub-facet-t::-webkit-details-marker { display: none; }
.hub-facet summary.hub-facet-t::after { content: "+"; font: 400 18px/1 var(--font); transition: transform .15s var(--ease); }
.hub-facet[open] summary.hub-facet-t::after { transform: rotate(45deg); }
.hub-filters ul { margin: 0; padding: 0; list-style: none; }
.hub-filters .woocommerce-widget-layered-nav-list.is-cut li:nth-child(n+7) { display: none; }
.hub-filters .woocommerce-widget-layered-nav-list__item { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: var(--t-sm); }
.hub-filters .woocommerce-widget-layered-nav-list__item a { position: relative; flex: 1; padding-left: 26px; text-decoration: none; }
.hub-filters .woocommerce-widget-layered-nav-list__item a::before, .hub-instock::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border: 1px solid var(--edge); border-radius: 2px; background: var(--white); }
.hub-filters .woocommerce-widget-layered-nav-list__item--chosen a::before, .hub-instock.is-on::before { border-color: var(--text); background: var(--text); box-shadow: inset 0 0 0 3px var(--white); }
@media (hover: hover) { .hub-filters .woocommerce-widget-layered-nav-list__item a:hover { text-decoration: underline; } }
.hub-filters .count { color: var(--muted); font-size: var(--t-xs); }
.hub-up, .hub-specs-more, .hub-showall { min-height: 32px; }
.hub-showall { display: inline-flex; align-items: center; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--text); font-size: var(--t-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hub-chosen { margin-bottom: 14px; }
.hub-chosen ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hub-chosen li a { display: inline-flex; align-items: center; gap: .3em; min-height: 36px; padding: 5px 10px; border: 1px solid var(--text); border-radius: 2px; text-decoration: none; font-size: var(--t-sm); }
.hub-chosen li a::before { content: "× "; white-space: pre; }
.hub-instock { position: relative; display: block; padding-left: 26px; text-decoration: none; font-weight: 600; font-size: var(--t-sm); }
.hub-price { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-price .hub-facet-t { flex-basis: 100%; }
.hub-price input[type="number"] { flex: 1 1 0; width: auto; min-width: 0; }
.hub-price button { flex: 0 0 auto; padding: 0 12px; min-height: 44px; border: 1px solid var(--edge); border-radius: 2px; background: transparent; cursor: pointer; font-weight: 600; }
.hub-ltools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hub-ltools .woocommerce-result-count { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select { padding-right: 32px; }
.hub-ldesc { margin-top: 64px; padding-top: 16px; border-top: 2px solid var(--text); }
.hub-emptycats { margin-top: 24px; }

/* product page */
.single-product .hub-shop { padding-top: 24px; }
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 56px; align-items: start; }
.woocommerce div.product > :not(.images):not(.summary) { grid-column: 1 / -1; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { min-width: 0; width: auto !important; float: none !important; margin: 0 !important; }
.hub-gal-open { display: block; width: 100%; padding: 0; border: 0; background: var(--white); cursor: zoom-in; }
.hub-gal-main img { display: block; width: 100%; aspect-ratio: 1; padding: 4%; object-fit: contain; }
.hub-gal-thumbs { display: flex; gap: 8px; margin: 4px -4px 0; padding: 4px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.hub-gal-thumbs button { display: block; flex-shrink: 0; width: 76px; height: 76px; padding: 4px; border: 1px solid transparent; background: var(--white); cursor: pointer; }
.hub-gal-thumbs button.is-on { border-color: var(--text); }
.hub-gal-thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; }
.woocommerce div.product .product_title { margin: 0 0 8px; font: 700 var(--t-lg)/1.2 var(--disp); letter-spacing: -.01em; }
.hub-pmeta { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; font-size: var(--t-xs); color: var(--muted); }
.hub-stock { margin: 10px 0 0; }
.hub-stock .hub-avail { font-size: var(--t-base); font-weight: 600; }
.hub-pmeta { margin-top: 14px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { margin: 0; font: 600 var(--t-xl)/1.2 var(--font); color: var(--text); }
.woocommerce div.product p.price del { margin-right: 8px; font-size: .6em; font-weight: 400; color: var(--muted); opacity: 1; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--red); }
.woocommerce div.product .summary > p.stock { display: none; }
.woocommerce div.product .stock { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.woocommerce div.product .stock.out-of-stock { color: var(--muted); }
.woocommerce-product-details__short-description { margin: 14px 0 0; }
.woocommerce-product-details__short-description p { margin: 0 0 .6em; }
.woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { content: none; }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.woocommerce div.product form.cart .button { flex: 1; min-height: 52px; padding: 0 28px; font-size: 17px; }
.woocommerce div.product form.cart div.quantity { float: none; margin: 0; }
.woocommerce .quantity .qty { width: 72px; min-height: 52px; text-align: center; font-weight: 600; }
.woocommerce div.product form.cart .variations { width: 100%; margin: 0 0 6px; border: 0; }
.woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { display: block; padding: 0; text-align: left; line-height: 1.4; }
.woocommerce div.product form.cart .variations th { padding: 0 0 6px; font-weight: 600; }
.woocommerce div.product form.cart .variations td { padding-bottom: 12px; }
.woocommerce div.product form.cart .variations select { width: 100%; }
.woocommerce div.product form.cart .reset_variations { appearance: none; min-height: 44px; padding: 0 4px; border: 0; border-radius: 0; background: none; color: var(--text); font: inherit; font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.woocommerce div.product form.cart .single_variation_wrap { width: 100%; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; gap: 10px; }
.woocommerce-variation-price { margin-bottom: 10px; }
.hub-ask { display: inline-block; margin-top: 14px; font-weight: 600; }
.hub-specs { margin: 24px 0 0; border-top: 1px solid var(--line); font-size: 15px; }
.hub-specs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hub-specs dt { color: var(--muted); }
.hub-specs dd { margin: 0; }
.hub-specs-more { display: inline-block; margin-top: 10px; font-weight: 600; font-size: var(--t-sm); }
.hub-pnotes { margin: 28px 0 0; border-top: 2px solid var(--text); font-size: 15px; }
.hub-pnotes div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.hub-pnotes dt { font-weight: 600; }
.hub-pnotes dd { margin: 0; }
.hub-psec { margin-top: 72px; }
.hub-psec .hub-specs { max-width: 900px; margin: 0; columns: 2; column-gap: 48px; border-top: 0; }
.hub-psec .hub-specs div { break-inside: avoid; }
.hub-ph2, .related > h2, .upsells > h2 { margin: 0 0 24px; padding-top: 14px; border-top: 2px solid var(--text); font: 700 var(--t-lg)/1.15 var(--disp); letter-spacing: -.01em; }
.hub-pdesc { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.hub-pdesc .hub-prose.is-cut { max-height: 520px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hub-readmore { margin-top: 12px; }
.hub-previews { max-width: 800px; }
.woocommerce #reviews #comments h2, .woocommerce #reviews #reply-title { font: 600 var(--t-md)/1.3 var(--font); }
.woocommerce #reviews #comments ol.commentlist { padding: 0; }
.woocommerce #reviews #comments ol.commentlist li img.avatar { display: none; }
.woocommerce #reviews #comments ol.commentlist li .comment-text { margin: 0; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.star-rating { position: relative; display: inline-block; width: 5.4em; height: 1.1em; overflow: hidden; font-size: 15px; line-height: 1; vertical-align: middle; }
.star-rating::before { content: "\2606\2606\2606\2606\2606"; position: absolute; left: 0; top: 0; letter-spacing: .08em; color: var(--edge); }
.star-rating span { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; padding-top: 1.5em; }
.star-rating span::before { content: "\2605\2605\2605\2605\2605"; position: absolute; left: 0; top: 0; letter-spacing: .08em; color: var(--text); }
.woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--t-sm); }
.woocommerce p.stars { margin: 4px 0 14px; }
.woocommerce p.stars span { display: inline-flex; gap: 2px; }
.woocommerce p.stars a { position: relative; width: 36px; height: 36px; overflow: hidden; color: var(--text); font-size: 0; text-decoration: none; }
.woocommerce p.stars a::before { content: "\2606"; position: absolute; inset: 0; font-size: 28px; line-height: 36px; text-align: center; }
.woocommerce p.stars:hover a::before, .woocommerce p.stars.selected a.active::before, .woocommerce p.stars.selected a:not(.active)::before { content: "\2605"; }
.woocommerce p.stars a:hover ~ a::before, .woocommerce p.stars.selected a.active ~ a::before { content: "\2606"; }
.woocommerce #reviews #comments ol.commentlist { list-style: none; }
.woocommerce #reviews #comments .woocommerce-Reviews-title { margin: 0 0 24px; padding-top: 14px; border-top: 2px solid var(--text); font: 700 var(--t-lg)/1.15 var(--disp); letter-spacing: -.01em; }
.woocommerce #review_form textarea, .woocommerce #review_form input[type="text"], .woocommerce #review_form input[type="email"] { width: 100%; }
.related, .upsells { margin-top: 80px; }
.hub-buybar { display: none; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.hub-chips button { min-width: 48px; min-height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 2px; background: var(--white); color: var(--text); font-weight: 600; cursor: pointer; }
.hub-chips button[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--paper); }
.hub-chips button:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.hub-chips-sel, .woocommerce div.product form.cart .variations select.hub-chips-sel { position: absolute !important; width: 1px; min-height: 0; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.hub-need { margin: 6px 0 0; color: var(--red); font-weight: 600; }

/* cart, checkout, account */
.woocommerce table.shop_table { border: 0; border-top: 2px solid var(--text); border-radius: 0; background: transparent; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px 10px; border-top: 0; border-bottom: 1px solid var(--line); }
.woocommerce table.shop_table th { font-weight: 600; }
.woocommerce table.shop_table img { width: 72px; background: var(--white); }
.woocommerce a.remove { color: var(--text) !important; font-weight: 400; }
@media (hover: hover) { .woocommerce a.remove:hover { background: var(--text); color: var(--paper) !important; } }
.woocommerce .cart-collaterals .cart_totals { float: none; width: auto; padding: 20px; border: 1px solid var(--edge); background: var(--white); }
.woocommerce .cart-collaterals { float: none; width: auto; }
.woocommerce a.checkout-button { display: flex; width: 100%; min-height: 52px; }
.woocommerce table.shop_table tr td { background: transparent !important; }
.woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { border-top: 0; }
.woocommerce form .form-row .required, .woocommerce form .form-row abbr.required { color: var(--red); text-decoration: none; border: 0; }
@media (min-width: 1024px) {
	.woocommerce-cart .hub-wc > .woocommerce { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0 32px; align-items: start; }
	.woocommerce-cart .hub-wc > .woocommerce > :not(.cart-collaterals):not(.woocommerce-cart-form) { grid-column: 1 / -1; }
	.woocommerce-cart .cart-collaterals { position: sticky; top: 24px; }
}
.woocommerce-checkout form.checkout { max-width: 640px; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
.woocommerce-checkout #order_comments { min-height: 96px; }
.woocommerce table.cart td.actions .coupon .input-text { width: 180px; min-height: 44px; margin-right: 6px; }
.woocommerce table.cart td.actions .button { min-height: 44px; }
.woocommerce .cart-collaterals .cart_totals table.shop_table { border-top: 0; }
.woocommerce .cart-collaterals .cart_totals h2, .woocommerce-checkout h3, .woocommerce-MyAccount-content h2, .woocommerce-account h2 { font: 600 var(--t-md)/1.3 var(--font); }
.woocommerce-checkout #payment { border-radius: 0; background: var(--white); }
.woocommerce-checkout #payment div.payment_box { border-radius: 0; background: var(--paper); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce form .form-row label { font-weight: 600; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border-radius: 2px; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--red); }
.select2-container .select2-selection--single { height: 44px; border: 1px solid var(--edge); border-radius: 2px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--text); }
.woocommerce-MyAccount-navigation li a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.woocommerce-MyAccount-navigation li.is-active a { font-weight: 600; }

/* =========================================================
   9. Responsive
   ========================================================= */
@media (min-width: 641px) {
	.hub-tree details::details-content { content-visibility: visible; display: block; } /* all groups open on wide screens */
	.hub-tree .hub-tree-all { display: none; }
	.hub-tree summary { cursor: default; }
}
@media (min-width: 1024px) {
	.hub-filters::details-content { content-visibility: visible; display: block; }
	.hub-filters > summary { display: none; }
}
@media (max-width: 1199px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.woocommerce ul.products li.product:nth-child(4n) { border-right: 1px solid var(--line); }
	.woocommerce ul.products li.product:nth-child(3n) { border-right: 0; }
	.hub-mega { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hub-svc li { grid-template-columns: 200px 220px minmax(0, 1fr); gap: 0 24px; }
	.hub-svc img { width: 200px; height: 133px; }
	.hub-navlink { display: none; }
}
@media (max-width: 1023px) {
	.hub-top { display: none; }
	.hub-bar .hub-wrap { height: 56px; gap: 4px; }
	.hub-burger { display: inline-flex; margin-left: -10px; }
	.hub-catbtn, .hub-search.is-bar { display: none; }
	.hub-logo { margin-right: auto; gap: 10px; }
	.hub-logo img { width: 36px; height: 36px; }
	.hub-logo span { display: block; font-size: 0; }
	.hub-logo b { font-size: 17px; }
	.hub-srow { display: block; padding-bottom: 8px; }
	.hub-srow .hub-search { width: 100%; }
	/* the menu drawer */
	.hub-cat { position: fixed; inset: 0; z-index: 1001; max-height: none; box-shadow: none; }
	.hub-cat-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--gut); border-bottom: 1px solid var(--line); background: var(--paper); font: 700 var(--t-md) var(--disp); }
	.hub-close { width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; color: var(--text); font-size: 30px; line-height: 1; cursor: pointer; }
	.hub-mega { display: block; padding: 0 var(--gut); }
	.hub-mega-col { padding: 0; border-top: 0; border-bottom: 1px solid var(--line); }
	.hub-mega-t { display: flex; align-items: center; min-height: 48px; margin: 0; font-size: 17px; }
	.hub-mega ul { display: none; }
	.hub-cat-more { display: block; padding: 24px var(--gut) 40px; }
	.hub-cat-more nav { display: flex; flex-direction: column; margin-bottom: 20px; }
	.hub-cat-more b { margin-bottom: 4px; font-size: var(--t-sm); color: var(--muted); }
	.hub-cat-more a { padding: 7px 0; }
	.hub-cat-more .hub-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 0 10px; border: 1px solid var(--edge); }
	.hub-cat-more p a { display: flex; align-items: center; min-height: 44px; padding: 0; }
	.hub-cat-more .hub-lang a[aria-current] { background: var(--text); border-color: var(--text); color: var(--paper); }
	.hub-veil { display: none !important; }
	.hub-sign { grid-template-columns: 1fr; }
	.hub-catsec { grid-template-columns: 1fr; }
	.hub-catsec .hub-tree { padding-top: 8px; }
	.hub-sign-facts { margin-top: 32px; max-width: 520px; }
	.hub-sec { padding-top: 64px; }
	.hub-band { margin-top: 64px; padding: 48px 0 56px; }
	.hub-footer { margin-top: 72px; }
	.hub-fgrid { grid-template-columns: 1fr 1fr; }
	.hub-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
	.hub-steps { grid-template-columns: 1fr 1fr; }
	.hub-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* listing: the filters fold behind one button above the products */
	.hub-listing { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.hub-filters { margin-bottom: 16px; }
	.hub-filters > summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 2px; background: var(--white); cursor: pointer; list-style: none; font-weight: 600; }
	.hub-filters > summary::-webkit-details-marker { display: none; }
	.hub-filters > summary span { margin-left: 8px; padding: 0 7px; border-radius: 2px; background: var(--text); color: var(--paper); font-size: var(--t-xs); }
	.hub-filters > summary::after { content: "+"; margin-left: auto; font: 400 22px/1 var(--font); transition: transform .15s var(--ease); }
	.hub-filters[open] > summary::after { transform: rotate(45deg); }
	.hub-filters-in { padding: 16px; border: 1px solid var(--edge); border-top: 0; background: var(--white); }
	.hub-filters .woocommerce-widget-layered-nav-list__item a, .hub-instock { display: flex; align-items: center; min-height: 40px; }
	.hub-filters .woocommerce-widget-layered-nav-list__item a::before, .hub-instock::before { top: 50%; transform: translateY(-50%); }
	/* product on phones: back link, title, gallery, then price, stock and the button before anything else */
	.single-product .woocommerce-breadcrumb { display: none; }
	.hub-up-m { display: inline-flex; }
	.woocommerce div.product { display: flex; flex-direction: column; align-items: stretch; }
	.woocommerce div.product div.summary { display: contents; }
	.woocommerce div.product > *, .woocommerce div.product .summary > * { order: 20; min-width: 0; max-width: 100%; }
	.woocommerce div.product .summary > .product_title { order: -1; margin-bottom: 14px; font-size: var(--t-lg); }
	.woocommerce div.product div.images { order: 0; margin-bottom: 18px !important; }
	.woocommerce div.product .summary > * { order: 10; }
	.hub-gal-thumbs { max-width: 100%; }
	.hub-gal-main img { aspect-ratio: 5 / 4; padding: 2%; }
	.woocommerce div.product .summary > .price { order: 1; }
	.woocommerce div.product .summary > .hub-stock { order: 2; }
	.woocommerce div.product .summary > form.cart { order: 3; margin-top: 4px; }
	.woocommerce div.product .summary > .hub-pmeta { order: 6; }
	.woocommerce div.product .summary > .hub-ask { order: 4; }
	.woocommerce div.product .summary > .woocommerce-product-details__short-description { order: 5; }
	.hub-psec { margin-top: 48px; }
	.hub-psec .hub-specs { columns: 1; }
	.hub-posts { grid-template-columns: 1fr 1fr; }
	/* phones get a buy bar when the main button is off screen */
	.hub-buybar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--hb-cookie-h, env(safe-area-inset-bottom))); z-index: 800; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; background: var(--white); box-shadow: var(--lift); transform: translateY(calc(100% + 40px)); transition: transform .2s var(--ease); }
	.hub-buybar { visibility: hidden; transition: transform .2s var(--ease), visibility 0s .2s; }
	.hub-buybar.is-on { visibility: visible; transform: none; transition-delay: 0s; }
	.hub-buybar-p { font-weight: 600; font-size: 18px; }
	.hub-buybar-p del { font-size: var(--t-sm); font-weight: 400; color: var(--muted); }
	.hub-buybar-p ins { text-decoration: none; color: var(--red); }
	.hub-buybar .hub-btn { min-height: 44px; }
}
@media (max-width: 640px) {
	.hub-shead { margin-bottom: 20px; }
	.hub-sign { padding-top: 28px; }
	.hub-sign-lead { font-size: 18px; }
	.hub-actions .hub-btn { flex: 1 1 calc(50% - 6px); }
	.hub-actions .hub-tlink { flex-basis: 100%; }
	.hub-sign-photo { margin: 28px calc(var(--gut) * -1) 0; }
	.hub-sign-photo img { aspect-ratio: 1080 / 608; }
	.hub-sign-photo figcaption { padding: 0 var(--gut); }
	.hub-svc li, .hub-svc li.is-main { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
	.hub-svc li > :first-child:not(img) { grid-column: auto; }
	.hub-svc img { width: 100%; height: auto; aspect-ratio: 3 / 2; margin-bottom: 8px; }
	.hub-works:not(.is-all) li:nth-child(n+7) { display: none; }
	.hub-tree { columns: 1; }
	.hub-tree-i { margin-bottom: 0; padding: 0; border-top: 0; border-bottom: 1px solid var(--line); }
	.hub-tree summary, .hub-tree-leaf { min-height: 48px; padding: 12px 0; }
	.hub-tree summary a { pointer-events: none; } /* on phones the row opens the group */
	.hub-tree summary::after { content: "+"; margin-left: 4px; font: 400 22px/.8 var(--font); transition: transform .15s var(--ease); }
	.hub-tree details[open] summary::after { transform: rotate(45deg); }
	.hub-tree-leaf span { margin-right: 18px; }
	.hub-tree ul { margin: 0 0 12px; }
	.hub-tree li a { padding: 8px 0; }
	.hub-steps { grid-template-columns: 1fr; gap: 20px; }
	.hub-faq summary { font-size: 17px; }
	.hub-posts { grid-template-columns: 1fr; }
	.hub-fgrid { grid-template-columns: 1fr; gap: 0; padding-top: 32px; }
	.hub-fcol { padding-bottom: 20px; }
	.hub-footer li a { display: block; padding: 10px 0; }
	.hub-footer nav.hub-fcol ul { columns: 2; column-gap: 16px; }
	.hub-footer nav.hub-fcol li { break-inside: avoid; }
	.hub-contacts div { grid-template-columns: 1fr; gap: 2px; }
	.hub-tiles { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
	.hub-tiles span { font-size: 15px; }
	.hub-tiles.is-sub { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
	.hub-tiles.is-sub a { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
	.hub-tiles.is-sub img, .hub-tiles.is-sub .hub-noimg { width: 56px; padding: 4px; }
	.hub-tiles.is-sub span { margin: 0; }
	/* products: two columns */
	.woocommerce ul.products { grid-template-columns: 1fr 1fr; }
	.woocommerce ul.products li.product:nth-child(3n) { border-right: 1px solid var(--line); }
	.woocommerce ul.products li.product:nth-child(2n) { border-right: 0; }
	.woocommerce ul.products li.product { padding: 12px 10px 14px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--t-sm); }
	.woocommerce ul.products li.product .price { font-size: var(--t-base); }
	.woocommerce ul.products li.product .button { min-height: 44px; padding: 0 8px; font-size: 15px; }
	.hub-picks ul.products li.product:nth-child(n+5) { display: none; }
	.hub-ltools { flex-wrap: wrap; }
	.woocommerce .woocommerce-ordering { flex: 1; }
	.woocommerce .woocommerce-ordering select { width: 100%; }
	.hub-pnotes div { grid-template-columns: 1fr; gap: 0; }
	.hub-specs div { grid-template-columns: 1fr; gap: 0; }
	.hub-gal-thumbs button { width: 60px; height: 60px; }
	.hub-view .hub-view-prev, .hub-view .hub-view-next { display: none; }
	.hub-view:not(.is-zoom) img { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   10. Small parts added after review
   ========================================================= */
.hub-mega-ws { display: none; }
.hub-mega-shop { grid-column: 1 / -1; justify-self: start; font-weight: 600; }
.hub-shop .hub-picks { margin-top: 0; }
@media (max-width: 1023px) {
	.hub-mega-ws { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--text) !important; }
	.hub-mega-shop { display: flex; align-items: center; min-height: 48px; }
}

/* Encyclopedia viewer (plugin, drawn in a shadow root after load): reserve the screen it takes, so the article under it doesn't jump */
.hub-iwd .iwd-root { min-height: calc(100vh - 52px); }

/* =========================================================
   11. Fixes after the live review
   ========================================================= */
/* Focus never ends up under the fixed bars (cookie bar; buy bar on phones) */
html { scroll-padding-bottom: calc(var(--hb-cookie-h, 0px) + 16px); }
@media (max-width: 1023px) { html:has(body.single-product) { scroll-padding-bottom: calc(var(--hb-cookie-h, 0px) + 96px); } }

/* Checkout: address fields the Nova Poshta plugin adds back although they are off in the field editor and not
   required; on "pickup" they showed as three unlabeled boxes */
#billing_address_1_field, #billing_state_field, #billing_postcode_field { display: none !important; }
.woocommerce form .form-row label abbr, .woocommerce form .form-row label .asterisk-color, .woocommerce form .form-row label .required { color: var(--red); text-decoration: none; border: 0; }
#ship-to-different-address, .woocommerce-account-fields .create-account { font: 600 var(--t-base)/1.3 var(--font); }
.woocommerce-checkout #ship-to-different-address label { font-weight: 600; }

/* WooCommerce's own boxes around the login, register and coupon forms */
.woocommerce form.login, .woocommerce form.register, .woocommerce form.checkout_coupon, .woocommerce form.lost_reset_password { margin: 0 0 24px; padding: 24px; border: 1px solid var(--line); border-radius: 0; background: var(--white); }
.woocommerce form .form-row { padding: 0; }

/* Cart on phones: one row per product (photo, name, price, quantity, sum) instead of WooCommerce's label table */
@media (max-width: 768px) {
	.woocommerce table.cart thead { display: none; }
	.woocommerce table.cart tr.cart_item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img name remove" "img price price" "img qty sub"; gap: 6px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
	.woocommerce table.cart tr.cart_item td { display: block; padding: 0; border: 0; text-align: left !important; }
	.woocommerce table.cart tr.cart_item td::before { display: none; }
	.woocommerce table.cart tr.cart_item td.product-thumbnail { grid-area: img; display: block; }
	.woocommerce table.cart tr.cart_item td.product-thumbnail img { width: 64px; }
	.woocommerce table.cart tr.cart_item td.product-name { grid-area: name; font-weight: 600; }
	.woocommerce table.cart tr.cart_item td.product-remove { grid-area: remove; }
	.woocommerce table.cart tr.cart_item td.product-price { grid-area: price; color: var(--muted); font-size: var(--t-sm); }
	.woocommerce table.cart tr.cart_item td.product-quantity { grid-area: qty; }
	.woocommerce table.cart tr.cart_item td.product-subtotal { grid-area: sub; align-self: center; font-weight: 600; }
	.woocommerce table.cart td.actions { display: block; padding: 16px 0; text-align: left !important; }
	.woocommerce table.cart td.actions::before { display: none; }
	.woocommerce table.cart td.actions .coupon { display: flex; gap: 8px; float: none; margin-bottom: 8px; padding: 0; border: 0; }
	.woocommerce table.cart td.actions .coupon .input-text { flex: 1 1 auto; width: auto; margin: 0; }
	.woocommerce table.cart td.actions .coupon .button { flex: 0 0 auto; width: auto; }
	.woocommerce table.cart td.actions > .button { width: 100%; }
	.woocommerce .cart_totals tr.woocommerce-shipping-totals td { text-align: left !important; }
	.woocommerce .cart_totals tr.woocommerce-shipping-totals td::before { display: block; float: none; margin-bottom: 6px; }
}
.woocommerce-cart .cross-sells { margin-top: 48px; }
.woocommerce-cart .cross-sells > h2 { margin: 0 0 24px; padding-top: 14px; border-top: 2px solid var(--text); font: 700 var(--t-lg)/1.15 var(--disp); }