@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Transcell site header -- generated by transcell-site-build/make_deploy.py from
   transcell-nav-mockup.html. Load after the theme's stylesheets. */

/* bare element rules on a page (li{margin-bottom:9px}, li a{border-bottom:1px}, figcaption{padding-left:14px} on the case studies)
   stop at the header. :where() keeps these at one class, so every rule of the nav below still wins (2026-09-30) */
.tcn :where(li,ul,p,figure),.tcn-drawer :where(li,ul,p,figure){margin:0}
.tcn :where(a),.tcn-drawer :where(a){border:0;color:inherit;font-weight:inherit;text-decoration:none;transition:none}
.tcn :where(button),.tcn-drawer :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
/* the live theme sets body and nav to Montserrat 400; the header states its own face (size, line height and colour: see
   ".tcn,.tcn-drawer" further down) */
.tcn,.tcn-ribbon,.tcn-drawer{font-family:"Inter","Segoe UI",Arial,sans-serif;font-weight:400}
/* the theme's "body :focus" draws its own ring on anything clicked and removes the outline; the header uses the
   browser's keyboard ring, or its own :focus-visible outline below. html + :not(input) lifts this just past the theme */
html :is(.tcn,.tcn-drawer,.tcn-ribbon) :where(:focus):not(input){box-shadow:none;outline:revert}
html .tsx-field input:focus{box-shadow:none;outline:0}
/* the theme's input[type=search]{border;margin:.333em 0;padding:.75em;width:100%} ties with the search CSS, so the
   winner depended on which stylesheet loaded last; one type selector more settles it */
html .tsx-field input{border:0;margin:0;padding:0;width:auto;max-width:none}
/* the theme's img{height:auto} and .site{overflow:hidden} (the latter stops a sticky header) */
.tcn-drawer-top img{display:block;height:24px;width:auto;max-width:none}
#page.site{overflow:clip}
.tcn :where(figcaption,li,ul),.tcn-drawer :where(figcaption,li,ul){padding:0}

.tcn-skip,.tcn-bar,.tcn,.tcn-ribbon,.tcn-drawer,.tcn-scrim,.tsx-panel,.tsx-field{
  --tc-blue:#2C5E9E;--tc-blue-deep:#214B82;--tc-blue-ink:#12294A;--tc-blue-50:#F4F7FB;--tc-blue-100:#E7EEF6;--tc-blue-200:#CBD9EA;
  --tc-ink:#0B1422;--tc-body:#4A5667;--tc-muted:#667586;--tc-line:#ECEEF2;--tc-bg:#FAFBFD;--tc-paper:#fff;--tc-red:#C8102E;
  /* the hub column: 1520px, or the window less a 32px margin each side */
  --max:min(1520px, calc(100vw - 64px));
  --bar-h:64px;--r:4px;
}
.tcn,.tcn *,.tcn-ribbon,.tcn-drawer,.tcn-drawer *,.tcn-scrim,.tcn-skip{box-sizing:border-box}
.tcn :where(.col){max-width:var(--max);margin:0 auto}


/* shipping message: a light ribbon under the bar */
.tcn-ribbon{background:var(--tc-blue-50);border-bottom:1px solid var(--tc-line);text-align:center;font-size:16px;line-height:normal;letter-spacing:normal;color:var(--tc-ink);padding:11px 16px}  /* 16px, dark (owner 2026-09-30: "I like how the Free shipping banner is a bit bigger") */
.tcn-ribbon b{color:var(--tc-ink);font-weight:700}

/* ── main bar ── */
.tcn{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--tc-line);transition:box-shadow .2s}
.tcn.is-stuck{box-shadow:0 6px 24px rgba(11,20,34,.06)}
.tcn-bar{height:var(--bar-h);display:flex;align-items:center;gap:40px}
.tcn-logo{flex:none}
.tcn-logo:is(:hover,:focus,:active),.tcn-feed a:is(:hover,:focus,:active){color:inherit}
.tcn-logo img{display:block;height:30px;width:auto;max-width:none}
.tcn-links{display:flex;align-items:stretch;gap:4px;height:100%;margin:0;padding:0;list-style:none}
.tcn-links>li{display:flex;align-items:center}
.tcn-top{position:relative;display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:var(--r);font-size:14.5px;font-weight:600;color:var(--tc-ink);letter-spacing:-.005em;transition:background .15s,color .15s}
.tcn-top{white-space:nowrap;text-decoration:none}
.tcn-top svg{flex:none;width:10px;height:10px;opacity:.5;transition:transform .2s}
.tcn-top:is(:focus,:active){color:var(--tc-ink)}
.tcn-top:hover,.tcn-top[aria-expanded="true"]{color:var(--tc-blue)} /* text colour only, no box (2026-09-25) */
.tcn-top[aria-expanded="true"] svg{transform:rotate(180deg);opacity:.9}
.tcn-top:focus-visible,.tcn-ico:focus-visible,.tcn-cta:focus-visible,.tcn-panel a:focus-visible{outline:2px solid var(--tc-blue);outline-offset:2px}
.tcn-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tcn-search{display:flex;align-items:center;gap:10px;height:42px;width:clamp(220px,22vw,340px);padding:0 16px;border:1px solid var(--tc-blue-200);border-radius:var(--r);background:#fff;transition:border-color .15s,background .15s,box-shadow .15s}
.tcn-search:focus-within{background:#fff;border-color:var(--tc-blue-200);box-shadow:0 0 0 4px rgba(44,94,158,.10)}
.tcn-search svg{width:16px;height:16px;color:var(--tc-muted);flex:none}
.tcn-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--tc-ink)}
.tcn-search input::placeholder{color:var(--tc-muted)}
.tcn-ico{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r);color:var(--tc-ink);transition:background .15s,color .15s}
.tcn-ico:is(:focus,:active){color:var(--tc-ink)}
.tcn-ico:hover{background:var(--tc-blue-50);color:var(--tc-blue)}
.tcn-ico svg{width:20px;height:20px}
.tcn-ico.tcn-acct{width:auto;padding:0 12px 0 10px;display:flex;gap:8px;font-size:14px;font-weight:600}
.tcn-badge{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--tc-red);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center}
.tcn-cta,.tcn-acct{white-space:nowrap}
.tcn-cta{display:inline-flex;align-items:center;height:36px;padding:0 18px;margin-left:6px;border-radius:var(--r);background:var(--tc-blue);color:#fff;font-size:14px;font-weight:600;transition:background .15s}
.tcn-cta:is(:hover,:focus,:active){color:#fff}
.tcn-cta:hover{background:var(--tc-blue-deep)} /* same fill and hover as the hero's "Shop all products" (.fh-btn--fill): one action blue, darker on hover */
.tcn-burger{display:none}

/* ── panels. One vocabulary, borrowed from the sites studied: a full-width white sheet, content packed left on
   the page column, hierarchy from type size (large primary links, small secondary links, quiet grey labels),
   whitespace instead of rules, the page blurred behind. ── */
.tcn-links>li{position:static}
.tcn-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--tc-line);box-shadow:0 28px 48px -12px rgba(11,20,34,.14);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.tcn-panel.is-open{opacity:1;visibility:visible}
.tcn-pin{display:flex;align-items:flex-start;gap:88px;padding:40px 0 52px}
.tcn-panel.is-open .tcn-pin>*{animation:tcnIn .32s cubic-bezier(.2,.7,.2,1) both}
.tcn-panel.is-open .tcn-pin>*:nth-child(2){animation-delay:.04s}
.tcn-panel.is-open .tcn-pin>*:nth-child(3){animation-delay:.08s}
@keyframes tcnIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.tcn-lab{margin:0 0 14px;font-size:12px;font-weight:400;color:var(--tc-muted);letter-spacing:0}
.tcn-big,.tcn-sm{list-style:none;margin:0;padding:0}
.tcn-big a{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--tc-ink);transition:color .12s}
/* the live theme's a:hover,a:focus,a:active{color:#1d1d1d} ties with these link rules, so each states its own colour */
.tcn-big a:is(:focus,:active){color:var(--tc-ink)}
.tcn-big a:hover,.tcn-big a.is-active{color:var(--tc-blue)}
.tcn-big a i{font-style:normal;font-size:18px;font-weight:500;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.tcn-big a.is-active i{opacity:1;transform:none}
.tcn-sm a{display:block;padding:5px 0;font-size:14px;font-weight:600;color:rgba(11,20,34,.76);transition:color .12s}
.tcn-sm a:is(:focus,:active){color:rgba(11,20,34,.76)}
.tcn-sm a:hover{color:var(--tc-blue)}
.tcn-sm.is-2{columns:2;column-gap:56px}
.tcn-sm.is-3{columns:3;column-gap:56px}
.tcn-sm li{break-inside:avoid}
.tcn-sm .is-all a{color:var(--tc-blue)}
.tcn-minor{margin-top:22px}

/* every panel is the same three zones: large links | what the hovered link holds | a picture of it */
.tcn-pri{flex:0 0 300px}
.tcn-pri .tcn-lab:not(:first-child){margin-top:22px}
.tcn-mid{flex:0 0 430px;min-height:292px}
#p-sol .tcn-mid{flex-basis:540px}
.tcn-sub{display:none}
.tcn-sub.is-active{display:block;animation:tcnIn .24s both}
.tcn-sm a.is-active{color:var(--tc-blue)}
.tcn-desc{margin:0 0 14px;max-width:400px;font-size:16px;line-height:1.6;color:var(--tc-body)}
.tcn-go{font-size:14px;font-weight:600;color:var(--tc-blue)}
.tcn-go:is(:hover,:focus,:active){color:var(--tc-blue)}
.tcn-go:hover{text-decoration:underline}
.tcn-pic{flex:1;min-width:0;height:292px;display:flex;align-items:center;justify-content:flex-end}
.tcn-pic>*{display:none}
.tcn-pic>.is-active{display:block;animation:tcnFade .3s both}
@keyframes tcnFade{from{opacity:0}to{opacity:1}}
/* product cut-outs sit bare. They ship on an opaque near-white ground; multiply drops it into the sheet */
/* the photos carry a faint grey vignette on white; lifting brightness 6% clips it to white. Proper fix: transparent cut-outs */
/* product cut-outs: one 480x292 frame, each photo placed so its product fills the frame (placements computed from the
   images' pixel bounding boxes). They ship on white with a faint grey vignette; brightness clips it, multiply drops the rest */
/* the frame clips top, bottom and right; a larger product may run into the empty space on its left (2026-10-01) */
.tcn-pic.is-cutout{flex:0 1 480px;position:relative;height:auto;width:min(480px,100%);aspect-ratio:480/292;margin-left:auto;clip-path:inset(0 0 0 -30%)}
.tcn-pic.is-cutout img{position:absolute;height:auto;max-width:none;filter:brightness(1.06);mix-blend-mode:multiply;pointer-events:none} /* max-width:none: the theme's img{max-width:100%} shrank the pictures wider than the frame (staging 2026-10-01) */
.tcn-pic.is-cutout img[data-k=lc]{width:99.25%;left:.7%;top:-29.6%}
.tcn-pic.is-cutout img[data-k=ins]{width:135%;left:-28.78%;top:-15.75%} /* 25% larger (owner 2026-10-01) */
.tcn-pic.is-cutout img[data-k=sc]{width:121.56%;left:-20.91%;top:-25.52%} /* 20% larger, 14px lower (owner 2026-10-01) */
.tcn-pic.is-cutout img[data-k=ca]{width:117.37%;left:-11.78%;top:-5.96%} /* 10% larger (owner 2026-10-01) */
/* scene photographs are cropped to one frame */
.tcn-pic figure{margin:0;width:min(440px,100%)}
.tcn-pic figure img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.tcn-pic figure.is-fit img{object-fit:contain}
/* services: the two groups stand side by side and the photo fills the rest of the row as a wide crop */
#p-svc .tcn-pri{flex-basis:auto;min-width:220px}
#p-svc .tcn-pic{flex:1 1 0}
#p-svc .tcn-pic figure{width:100%}
#p-svc .tcn-pic figure img{aspect-ratio:auto;height:292px}
#p-svc .tcn-pic figcaption,#p-sol .tcn-pic figcaption{line-height:1.5}
#p-svc .tcn-pic figcaption,#p-sol .tcn-pic figcaption{min-height:3em;text-wrap:balance}  /* every description is written to fit two lines at the narrowest desktop menu (1241px); the box keeps two lines so a one-line description does not shift the menu */
.tcn-pic figcaption{margin-top:10px;font-size:13px;color:var(--tc-muted)}
/* resources: the latest articles take the two right-hand zones */
.tcn-feed{flex:1;min-width:0}
.tcn-feed-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:900px}
.tcn-feed a{display:block}
.tcn-feed img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.tcn-feed b{display:block;margin-top:12px;font-size:14.5px;font-weight:600;line-height:1.4;color:var(--tc-ink);transition:color .12s}
.tcn-feed a:hover b{color:var(--tc-blue)}

@media (max-width:1400px){
  .tcn-bar{gap:24px}
  .tcn-top{padding:0 10px}
  .tcn-search{width:200px}
  .tcn-pin{gap:56px}
  .tcn-pri{flex-basis:270px}
  .tcn-mid{flex-basis:400px}
  #p-sol .tcn-mid{flex-basis:480px}
  .tcn-feed-g{gap:20px}
  .tcn-sm.is-2,.tcn-sm.is-3{column-gap:36px}
  .tcn-big a{font-size:21px}
}

.tcn-scrim{position:fixed;inset:0;z-index:40;background:rgba(11,20,34,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}
.tcn-scrim.is-on{opacity:1;visibility:visible}
/* one white sheet: with a menu or the search open, the frosted bar sampled #F7F7F8 over the dimmed page, a seam above the #FFFFFF panel */
.tcn:has(.tcn-panel.is-open),html.tsx-open .tcn{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
/* the drawer groups its links the way the desktop menus do */
.tcn-drawer .tcn-dlab{margin:10px 0 2px;font-size:12px;font-weight:400;color:var(--tc-muted)}
.tcn-drawer .tcn-dlab:first-child{margin-top:0}
/* second level in the drawer: a family or group, opened on its own; its links sit indented under it */
/* everything inside a top-level item sits one step in from it, and a family's types one step further */
.tcn-drawer>details>div{padding-left:16px}
.tcn-drawer .tcn-d2{border-bottom:0}
.tcn-drawer .tcn-d2 summary{padding:11px 0;font-size:16px;font-weight:500;color:var(--tc-ink)}
.tcn-drawer .tcn-d2 summary::after{font-size:19px}
.tcn-drawer .tcn-d2:not([open]) summary::after{content:"+"}  /* the open parent's minus must not reach a closed child */
.tcn-drawer .tcn-d2>div{padding:0 0 8px 16px}
.tcn-drawer .tcn-d2 a{padding:8px 0;font-size:15px}
.tcn-drawer .tcn-dsub>a{padding:11px 0;font-size:15px}
.tcn-drawer .tcn-dsub{padding-bottom:10px}
/* a one-line ribbon on phones (the full sentence ran to two lines, with "No" orphaned) */
.tcn-rib-s{display:none}
@media (max-width:640px){.tcn-rib-l{display:none}.tcn-rib-s{display:inline}}

/* ── mobile ── */
.tcn-drawer{display:none}
@media (max-width:1240px){
  .tcn-links{display:none}
  .tcn-cta{display:none}
  .tcn-bar{gap:16px}
  .tcn-search{flex:1;width:auto}
  .tcn-right{flex:1}
  .tcn-burger{display:grid}
  .tcn-panel{display:none}
  .tcn-drawer{display:block;position:fixed;z-index:60;top:0;right:0;bottom:0;width:min(420px,100vw);background:#fff;transform:translateX(100%);transition:transform .25s;overflow-y:auto;padding:16px 24px 32px}
  .tcn-drawer.is-open{transform:none;box-shadow:-20px 0 48px rgba(11,20,34,.18)}
  .tcn-drawer-top{display:flex;justify-content:space-between;align-items:center;height:48px;margin-bottom:8px}
  .tcn-drawer details{border-bottom:1px solid var(--tc-line)}
  .tcn-drawer summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:17px;font-weight:600;color:var(--tc-ink);cursor:pointer}
  .tcn-drawer summary::-webkit-details-marker{display:none}
  .tcn-drawer summary::after{content:"+";font-weight:400;font-size:22px;color:var(--tc-muted)}
  .tcn-drawer details[open] summary::after{content:"–"}
  .tcn-drawer details a{display:block;padding:9px 0;font-size:15px;color:var(--tc-body)}
  .tcn-drawer details div{padding-bottom:14px}
  .tcn-drawer .tcn-cta{display:flex;justify-content:center;margin:24px 0 0;height:48px}
}
@media (max-width:640px){
  :root,.tcn-skip,.tcn-bar,.tcn,.tcn-ribbon,.tcn-drawer,.tcn-scrim,.tsx-panel,.tsx-field{--max:calc(100vw - 32px);--bar-h:60px}  /* also on the header elements: they declare the tokens themselves, so a :root-only override never reached them */
  .tcn-acct-lab{display:none}
  .tcn-ico.tcn-acct{width:42px;padding:0;display:grid}
  .tcn-logo img{height:24px}
  .tcn-search{display:none}
  .tcn-right{flex:none}
  .tcn-ico.tcn-search-ico{display:grid}
}
.tcn-search-ico{display:none}

/* smallest phones (under 360px): logo, search, account, cart and menu need 332px and a 320px screen has 288px
   inside its margins, so the row ran 30-odd px off the right edge (2026-09-28). Slightly smaller logo, 40px icons,
   tighter gaps: 282px. */
@media (max-width:359px){
  .tcn-bar{gap:8px}
  .tcn-logo img{height:22px}
  .tcn-right{gap:2px}
  .tcn-right .tcn-ico,.tcn-right > a[href*="/cart/"]{width:40px!important;height:40px}
}
/* Shop: the Outlet link sits close under the four families, level with the middle column's last row, not adrift below them (owner 2026-09-30) */
#p-shop .tcn-minor{margin-top:8px}
/* the header keeps its own type whatever the page sets on body (2026-09-30): the combined site's pages set 15.5px / 1.6 /
   -0.006em on body, the menu inherited it and every list row grew about 5px, so the Shop menu's rows did not line up as on
   the homepage; a page's a:hover underline reached the menu too. These are the homepage's own (browser default) values. */
.tcn,.tcn-drawer{font-size:16px;line-height:normal;letter-spacing:normal;color:#000}
.tcn a:hover,.tcn-drawer a:hover{text-decoration:none}
.tcn .tcn-go:hover{text-decoration:underline}
.tcn-badge[hidden]{display:none}  /* an empty cart shows no count */
/* phone drawer (owner 2026-09-30): it is as tall as what is open, so the page shows through the dimmed, blurred scrim below it as
   on desktop, instead of a full-height white sheet; the logo row stays pinned while a long list scrolls; links under a small
   label ("Custom & OEM", "Company") are indented under it */
.tcn-drawer{bottom:auto;max-height:100vh;max-height:100dvh;padding-top:0;scroll-padding-top:72px}
.tcn-drawer.is-open{box-shadow:0 28px 48px -12px rgba(11,20,34,.18)}
.tcn-drawer-top{position:sticky;top:0;z-index:2;background:#fff;height:64px;padding:16px 24px 0;margin:0 -24px 8px;box-sizing:border-box}
.tcn-drawer .tcn-dlab~a{padding-left:16px}
/* the four top items are the primary navigation landmark (review 2026-09-30, finding 12); the wrapper takes the
   list's place in the bar and is reset against theme rules on bare nav elements */
.tcn-nav{display:flex;align-items:stretch;align-self:stretch;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit}
@media (max-width:1240px){.tcn-nav{display:none}}
/* skip link: the first stop for a keyboard user, out of sight until it has focus. It jumps to the theme's
   <main id="content">; the live theme's own .skip-link points at #primary, which no page has */
.tcn-skip{position:fixed;left:16px;top:8px;z-index:200;padding:10px 16px;border-radius:var(--r);background:var(--tc-blue);color:#fff;font:600 14px/1.2 "Inter","Segoe UI",Arial,sans-serif;text-decoration:none;transform:translateY(-200%);transition:transform .15s}
.tcn-skip:is(:hover,:active){color:#fff}
.tcn-skip:focus{transform:none;color:#fff;box-shadow:none;outline:2px solid var(--tc-blue-ink);outline-offset:2px}
/* reduced motion (finding 11): the panels, their lists and pictures appear without the slide and fade, and the
   drawer, chevrons and skip link stop moving. Opacity fades on the sheet and dim stay; they are not motion */
@media (prefers-reduced-motion:reduce){
  .tcn-panel.is-open .tcn-pin>*,.tcn-sub.is-active,.tcn-pic>.is-active{animation:none}
  .tcn-drawer,.tcn-top svg,.tcn-big a i,.tcn-skip{transition:none}
}
/* menu pictures load on demand (finding 01): until then an img has no src, and the frames keep their size */
.tcn-pic img:not([src]){visibility:hidden}
/* the search field inside the bar: full width of the free space from 1240px down (it may shrink below its
   placeholder, or the bar ran 51px off a 641px screen), hidden on phones where the icon opens the sheet */
@media (max-width:1240px){.tcn-right{min-width:0}.tsx-field.tcn-search,.tsx-field.tcn-search:focus-within,.tsx-field.tcn-search.is-open{width:auto;flex:1;min-width:0}}
@media (max-width:640px){.tsx-field.tcn-search{display:none}}
/* the search module positions its host relatively; the bar stays sticky */
.tcn.tsx-host{position:sticky}


/* header cart: the word "Cart" beside the icon, styled like "Log in". Phones keep the
   icon only, as they do for Log in. The badge stays on the icon's top-right corner. */
.tcn-right > a[href*="/cart/"] { width: auto !important; padding: 0 12px 0 10px; display: flex !important; gap: 13px; font-size: 14px; font-weight: 600; }  /* 13px, not Log in's 8px: the count badge overhangs the icon and needs the room */
.tcn-right > a[href*="/cart/"] .tcn-badge { right: auto; left: 22px; }
@media (max-width: 640px) {
  .tcn-cart-lab { display: none; }
  .tcn-right > a[href*="/cart/"] { width: 42px !important; padding: 0; display: grid !important; }
  .tcn-right > a[href*="/cart/"] .tcn-badge { left: auto; right: 3px; }
}



/* ===== live-site additions (make_deploy.py) -- not in the standalone mockup =====
   Stacking, as on the combined site (49 pages): above the pages' own sticky bars
   (the hubs' "On this page" bar is 40), below their modals (200); the search sheet
   lifts itself to 1000 while it is open. */
.tcn{z-index:150}.tcn-scrim{z-index:140}.tcn-drawer{z-index:160}
/* --tcn-stick / --tcn-fix: the header's height, kept current by header.js. Page CSS
   adds it to the top of its own sticky or fixed bars so they sit under the header. */
:root{--tcn-stick:64px;--tcn-fix:64px}
@media (max-width:640px){:root{--tcn-stick:60px;--tcn-fix:60px}}
/* in-page links land below the sticky header, not under it */
html{scroll-padding-top:var(--tcn-stick)}
/* WooCommerce's "… has been added to your cart. View cart" box on a product page (staging, Faris 2026-10-01: "looks
   terrible"): the header's cart badge already shows the new count. Only that notice (it carries the View cart link,
   a.wc-forward); errors such as "Please choose product options" and every cart-page notice still show. */
.single-product .woocommerce-notices-wrapper .woocommerce-message:has(a.wc-forward){display:none}