/* ═══════════════════ SHOP / CATALOGUE LAYOUT ═══════════════════ */
/* Side padding restated here on purpose: this shorthand loads after
   .tc-container's `padding:0 24px` (main.css) and overrides ALL sides,
   so `150px 0 100px` silently zeroed the side padding — on viewports
   narrower than the max-width cap the product grid ran flush against
   the window edge and looked clipped on the right. */
.tc-shop{padding:150px 24px 100px}
/* Full-width catalogue (Amazon-style): the container grows with the
   viewport and the auto-fill product grid (below) adds/removes columns
   as space allows, keeping each card near its designed width instead of
   stretching a fixed column count. Capped at 1960px for readability:
   grid area = container - 48px padding - 300px sidebar - 32px gap, and
   a 6th column would need 6x250px cards + 5x20px gaps = 1600px, so the
   cap keeps the grid just under that — max 5 columns, centered with
   even gutters on ultrawide monitors instead of sprawling wider. */
.tc-container.tc-shop{max-width:1960px}
/* Single-product breadcrumb bar must share the product content's box: the
   same max-width AND the same 24px side padding as .tc-shop (the base
   .tc-breadcrumb-bar zeroes its horizontal padding), so its left edge
   lines up with the gallery/title and the rest of the product content. */
.tc-container.tc-breadcrumb-bar--product{max-width:1960px;padding-left:24px;padding-right:24px}
.tc-shop-layout{display:grid;grid-template-columns:320px 1fr;gap:32px}
@media(max-width:1023px){.tc-shop-layout{grid-template-columns:1fr}}

.tc-shop-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.tc-shop-toolbar__count{font-size:14px;color:var(--muted)}
.tc-shop-toolbar select{padding:10px 14px;border:1.5px solid var(--border);border-radius:0;font-family:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.tc-shop-search{position:relative;display:flex;align-items:center;gap:8px;flex:1 1 320px;min-width:240px;max-width:620px;padding:0 14px;border:1.5px solid var(--border);border-radius:0;background:var(--card);color:var(--muted);transition:border-color .2s,box-shadow .2s}
.tc-shop-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(234,88,12,.14)}
.tc-shop-search svg{flex-shrink:0}
.tc-shop-search input[type=search]{flex:1;min-width:0;border:none;background:transparent;padding:10px 0;font-family:inherit;font-size:14px;color:var(--ink)}
.tc-shop-search input[type=search]:focus{outline:none}
.tc-shop-search input[type=search]::placeholder{color:var(--dim)}

.tc-b2b-banner{background:var(--navy);border-radius:0;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:32px;color:#fff}
.tc-b2b-banner p{font-size:14px;color:rgba(255,255,255,.72);margin:0}
.tc-b2b-banner strong{color:#fff}

/* ═══════════════════ PRODUCT GRID / CARD ═══════════════════ */
/* Amazon-style fluid grid: cards hold their familiar 4-column width
   (~250-300px) and the column count derives from available space
   (auto-fill), so wider screens get more columns instead of wider
   cards — 4 cols on a 1440px laptop, 5 at 1920, more on ultrawides.
   250px min still fits one column on a 320px phone (320 - 2x24px side
   padding = 272px available). */
ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin:0;padding:0}

ul.products li.product,.tc-product-card{background:var(--card);border:1px solid var(--border);border-radius:0;overflow:hidden;list-style:none;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;position:relative}
ul.products li.product:hover,.tc-product-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(14,26,43,.1)}

.tc-product-card__badge{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:5px 11px;border-radius:50px;background:var(--btn);color:#fff}
.tc-product-card__badge--new{background:var(--green);color:#fff}

/* Product photos are white-background 1:1 shots — the media area stays
   white in both color modes so photos blend edge-to-edge instead of
   floating as white squares on a tinted panel. */
.tc-product-card__thumb{position:relative;aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tc-product-card__thumb img{width:100%;height:100%;object-fit:cover;padding:0}

.tc-product-card__body{padding:18px 20px 22px}
.tc-product-card__brand{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
ul.products li.product .woocommerce-loop-product__title,.tc-product-card__title{font-size:15px;color:var(--heading);margin:0 0 10px;line-height:1.4}
ul.products li.product .price,.tc-product-card__price{font-size:15px;font-weight:800;color:var(--blue);margin-bottom:0;display:block}
ul.products li.product .price del{color:var(--muted);font-weight:500;margin-right:6px}
/* WooCommerce wraps the tax-rate suffix ("alv 0 %") in a bare <small>,
   which otherwise inherits the price's bold weight at the browser's
   shrunk <small> size — bold text rendered that small anti-aliases into
   a blurry smudge. Give it its own explicit, legible size/weight instead
   of inheriting. */
ul.products li.product .price .woocommerce-price-suffix,.tc-product-card__price .woocommerce-price-suffix{display:inline-block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-left:4px;vertical-align:1px}

ul.products li.product .button,.tc-product-card .button{display:flex;width:100%;text-align:center;justify-content:center;align-items:center;gap:8px;padding:11px;border-radius:0;font-size:13.5px;font-weight:700;text-decoration:none;background:var(--btn);color:#fff;border:none;transition:background .2s}
ul.products li.product .button:hover,.tc-product-card .button:hover{background:var(--blue-deep)}
ul.products li.product .button.tc-btn--outline-dark{background:transparent;border:1.5px solid var(--border);color:var(--ink)}
ul.products li.product .button.tc-btn--outline-dark:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
ul.products li.product .added_to_cart{display:block;text-align:center;font-size:12px;margin-top:8px;color:var(--blue);text-decoration:none}

/* ── Card hover reveals: pack chips + buy row ── */
/* Hidden by collapsing height so the card grows on hover (like the
   reference storefront); devices without hover always show both. */
.tc-card-packs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 20px;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.16,1,.3,1),opacity .25s,margin .3s}
.tc-card-packs__label{flex-basis:100%;font-size:11px;font-weight:600;color:var(--muted)}
.tc-card-packs .tc-pack-chip{display:inline-block;width:auto;margin:0;padding:5px 10px;font-size:11.5px}
.tc-card-buy{display:flex;align-items:stretch;gap:10px;padding:0 20px;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.16,1,.3,1),opacity .25s,padding .3s}
ul.products li.product:hover .tc-card-packs,
ul.products li.product:focus-within .tc-card-packs{max-height:70px;opacity:1;margin-bottom:12px}
ul.products li.product:hover .tc-card-buy,
ul.products li.product:focus-within .tc-card-buy{max-height:80px;opacity:1;padding-bottom:20px}
@media(hover:none){
  .tc-card-packs{max-height:none;opacity:1;overflow:visible}
  .tc-card-buy{max-height:none;opacity:1;overflow:visible;padding-bottom:20px}
}
.tc-card-buy .button{width:auto;flex:1}
/* No hover lift inside the buy row: the row is an overflow-clipped
   reveal with no top padding, so .tc-btn's translateY(-2px) hover would
   push the button's top border outside it and visibly cut it off. */
.tc-card-buy .button:hover,.tc-card-buy .tc-btn:hover{transform:none;box-shadow:none}
.tc-card-buy .added_to_cart{flex-basis:100%;margin-top:0;align-self:center}
.tc-card-qty{display:flex;align-items:stretch;border:1.5px solid var(--border);border-radius:0;overflow:hidden;flex-shrink:0;background:var(--card)}
.tc-card-qty__btn{width:30px;background:var(--soft);border:none;cursor:pointer;color:var(--ink-soft);font-size:15px;font-family:inherit}
.tc-card-qty__btn:hover{background:var(--soft-2)}
.tc-card-qty__input{width:42px;border:none;text-align:center;font-family:inherit;font-size:14px;background:var(--card);color:var(--ink);-moz-appearance:textfield}
.tc-card-qty__input::-webkit-inner-spin-button,.tc-card-qty__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ═══════════ WOOCOMMERCE EMBEDDED IN POST/PAGE CONTENT ═══════════ */
/* Products dropped into a blog post or page — via [products], the Products
   block, or [product_page] — must stay compact and on-brand. Without this
   they render at full/native size (giant empty image boxes, add-to-cart
   text wrapping one letter per line, prose-link underlines bleeding into
   titles). The real shop/product pages use the .tc-shop wrapper, NOT
   .tc-page-content, so none of this touches them. */

/* Product grid: compact responsive columns, not full shop scale. */
.tc-page-content ul.products,
.tc-page-content .wc-block-grid__products{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;margin:24px 0;padding:0;list-style:none}
.tc-page-content ul.products li.product,
.tc-page-content .wc-block-grid__product{width:auto!important;margin:0!important;float:none;text-align:center;background:var(--card);border:1px solid var(--border);padding:0 0 16px;list-style:none}
/* Thumbnails: square, contained, capped — kills the giant empty image box
   (and keeps a broken/missing image from ballooning the card). */
.tc-page-content li.product img,
.tc-page-content .wc-block-grid__product-image img,
.tc-page-content .attachment-woocommerce_thumbnail{aspect-ratio:1/1;width:100%!important;height:auto;max-height:230px;object-fit:contain;background:#fff;margin:0 0 12px;display:block}
/* Titles/prices: theme colours, no prose underline. */
.tc-page-content li.product a,
.tc-page-content .wc-block-grid__product a{text-decoration:none}
.tc-page-content li.product .woocommerce-loop-product__title,
.tc-page-content .wc-block-grid__product-title{font-size:14.5px;font-weight:700;color:var(--heading);padding:0 12px;line-height:1.35;margin:0 0 8px}
.tc-page-content li.product .price,
.tc-page-content .woocommerce-Price-amount{color:var(--blue);font-weight:800}

/* Any WooCommerce button in content never wraps vertically; auto width,
   themed. Covers loop add-to-cart, single add-to-cart, box (SL/UL) buttons
   and block buttons. */
.tc-page-content .woocommerce a.button,
.tc-page-content .woocommerce button.button,
.tc-page-content .woocommerce input.button,
.tc-page-content .wc-block-grid__product .wp-block-button__link,
.tc-page-content .single_add_to_cart_button,
.tc-page-content .tc-box-add{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:0;max-width:100%;white-space:nowrap;box-sizing:border-box;background:var(--btn);color:#fff;border:none;border-radius:0;padding:11px 18px;margin:6px auto 0;font-size:13.5px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}
.tc-page-content .woocommerce a.button:hover,
.tc-page-content .woocommerce button.button:hover,
.tc-page-content .single_add_to_cart_button:hover{background:var(--blue-deep);color:#fff}
.tc-page-content .tc-box-add{background:transparent;border:1.5px solid var(--border);color:var(--ink)}
.tc-page-content .tc-box-add:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}

/* Embedded SINGLE product ([product_page]) — stack cleanly in the narrow
   prose column instead of the two-column shop grid (which squeezes the
   add-to-cart button into a sliver). */
.tc-page-content .woocommerce div.product{display:block}
.tc-page-content .woocommerce div.product .woocommerce-product-gallery,
.tc-page-content .woocommerce div.product .images{width:100%!important;max-width:400px;margin:0 0 24px;float:none}
.tc-page-content .woocommerce div.product .summary,
.tc-page-content .woocommerce div.product .entry-summary{width:100%!important;float:none;margin:0}
.tc-page-content .woocommerce div.product img{max-height:360px;object-fit:contain}
.tc-page-content .woocommerce div.product form.cart{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0}
.tc-page-content .woocommerce div.product form.cart .quantity{flex:0 0 auto}
.tc-page-content .woocommerce div.product form.cart .single_add_to_cart_button{margin:0}

/* ═══════════════════ SHOP SIDEBAR (filters) ═══════════════════ */
.widget_layered_nav ul,.widget_product_categories ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}

/* Layered-nav filter checkboxes (attribute filters) — a plain <a> row,
   unrelated to the category walker below. */
.tc-shop-sidebar .tc-widget li.chosen{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:6px}
.tc-shop-sidebar .tc-widget li.chosen>a{color:var(--ink-soft);font-size:14px;font-weight:600;text-decoration:none;transition:color .2s}
.tc-shop-sidebar .tc-widget li.chosen>a:hover,
.tc-shop-sidebar .tc-widget li.chosen>a{color:var(--blue)}
.widget_layered_nav .count,.widget_product_categories .count{color:var(--muted);font-size:12px;flex-shrink:0}

/* Product categories — custom walker (inc/category-walker.php) wraps
   each row in .tc-cat-row (icon + label + count + toggle) instead of a
   bare <a>, and adds a .tc-cat-toggle button on any category that has
   children so the nested <ul class="children"> can expand/collapse
   (toggled by core.js) instead of always showing every sub-category. */
.tc-shop-sidebar .tc-widget li.cat-item{display:block}
/* flex-start (not center): a long, unbreakable Finnish compound category
   name (no spaces to wrap at) needs overflow-wrap to drop to a 2nd line —
   center-aligning the row would then float the count/toggle into the
   middle of that wrapped text instead of pinning them to the first line. */
.tc-cat-row{display:flex;align-items:flex-start;gap:10px}
.tc-cat-icon{width:28px;height:28px;border-radius:0;overflow:hidden;flex-shrink:0;background:#fff}
/* The white image plate needs no outline on a light page — it reads as
   part of the card. On dark it does: without the hairline the plate's
   edge cuts straight into the dark surface. */
:is(html.dark,body.color-switch-dark) .tc-cat-icon{border:1px solid var(--border)}
.tc-cat-icon img{width:100%;height:100%;object-fit:cover;display:block}
/* No thumbnail set: a quiet themed square (keeps rows aligned), NOT the
   white image backdrop above — an empty #fff box glows in dark mode. */
.tc-cat-icon--placeholder{background:var(--soft)}
.tc-cat-link{flex:1;min-width:0;color:var(--ink-soft);font-size:15px;font-weight:600;text-decoration:none;transition:color .2s;overflow-wrap:anywhere}
.tc-cat-row .count{white-space:nowrap;margin-top:2px}
.tc-cat-row .tc-cat-icon,.tc-cat-row .tc-cat-toggle{margin-top:1px}
.tc-cat-link:hover{color:var(--blue)}
.tc-shop-sidebar .tc-widget li.current-cat>.tc-cat-row .tc-cat-link{color:var(--blue)}
.tc-cat-toggle{width:26px;height:26px;flex-shrink:0;border:none;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s,color .2s}
.tc-cat-toggle:hover{background:var(--soft-2);color:var(--ink)}
.tc-shop-sidebar .tc-widget li.cat-item.tc-cat-open>.tc-cat-row .tc-cat-toggle{transform:rotate(180deg)}
.tc-shop-sidebar .tc-widget li.cat-item>ul.children{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:6px;margin:0 0 0 38px;padding-left:14px;border-left:2px solid var(--border)}
.tc-shop-sidebar .tc-widget li.cat-item.tc-cat-open>ul.children{max-height:1000px;margin-top:8px}

/* Sidebars are grid items in .tc-shop-layout / .tc-blog-layout, so by
   default they stretch to the (often very tall) main column. Pin them to
   their own content height instead — nothing inside needs the extra room. */
.tc-shop-sidebar,.tc-sidebar{align-self:start}
/* Tighter horizontal padding in the shop sidebar so long Finnish compound
   category names (e.g. "Nestekaasutyökalut ja Paineilmatyökalut") get more
   room and wrap on word boundaries instead of breaking mid-word. */
.tc-shop-sidebar .tc-widget{padding:22px 18px}

/* Compact product lists in widgets — Recently Viewed, Top Rated, On Sale,
   Products, mini-cart. This custom theme doesn't load WooCommerce's own
   stylesheet, so without this the widget thumbnails render at their full
   ~150px size stacked vertically, inflating each row and leaving big empty
   gaps. Lay the thumbnail out beside the title at a small fixed size. */
.tc-widget .product_list_widget{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.tc-widget .product_list_widget li{position:relative;min-height:52px;margin:0;padding:12px 0 12px 64px;border-bottom:1px solid var(--border);font-size:13.5px;line-height:1.4}
.tc-widget .product_list_widget li:first-child{padding-top:0;min-height:56px}
.tc-widget .product_list_widget li:last-child{border-bottom:0;padding-bottom:0}
.tc-widget .product_list_widget li img{position:absolute;left:0;top:12px;width:52px;height:52px;object-fit:contain;background:#fff;border:1px solid var(--border);margin:0}
.tc-widget .product_list_widget li:first-child img{top:0}
.tc-widget .product_list_widget li a{display:block;color:var(--ink-soft);font-weight:600;text-decoration:none}
.tc-widget .product_list_widget li a:hover{color:var(--blue)}
.tc-widget .product_list_widget li .product-title{display:block}
.tc-widget .product_list_widget li .woocommerce-Price-amount,
.tc-widget .product_list_widget li .amount,
.tc-widget .product_list_widget li ins,
.tc-widget .product_list_widget li del{font-size:13px;font-weight:800;color:var(--blue)}
.tc-widget .product_list_widget li del{color:var(--muted);font-weight:500;margin-right:5px}
.tc-widget .product_list_widget li .tc-price-login{display:inline-block;margin-top:3px;font-size:12px;font-weight:600}
.tc-widget .product_list_widget li .reviewer,
.tc-widget .product_list_widget li .star-rating{margin-top:3px}

/* Dark mode: widget content can carry its own light styling from the
   block editor (Group/List blocks with a background or text colour set,
   inline styles left over from the old light site). Those explicit
   colours would punch white panels into the dark shop, so retint them
   to tokens — the sidebar must follow the theme, not the widget. */
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar .has-background,
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar [class*="-background-color"],
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar [style*="background"]{background-color:var(--card)!important;background-image:none!important}
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar .has-text-color,
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar .has-text-color *,
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar [class*="-color"] a{color:var(--ink-soft)!important}
/* Third-party menu plugins that paint their own light panel (Iks Menu
   renders .iksm / .iksm-container with a hardcoded white background and
   pale text). The earlier retint above only catches inline styles and
   block-editor colour classes, so a plugin stylesheet slips through and
   leaves an unreadable white box in dark mode. Retint the container and
   everything in it to theme tokens; !important because the plugin's own
   rules are more specific than a theme selector. */
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar [class*="iksm"]{
	background-color:var(--card)!important;background-image:none!important;
	border-color:var(--border)!important;color:var(--ink-soft)!important;
	box-shadow:none!important;
}
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar [class*="iksm"] a,
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar [class*="iksm"] span,
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar [class*="iksm"] li{
	color:var(--ink-soft)!important;background-color:transparent!important;
}
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar [class*="iksm"] a:hover,
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar [class*="iksm"] .current-cat>a{
	color:var(--blue)!important;
}
/* Its expand/collapse chevrons are drawn in a dark ink that vanishes on
   a dark panel — inherit the row colour instead. */
:is(html.dark,body.color-switch-dark) .tc-shop-sidebar [class*="iksm"] svg{fill:currentColor!important;stroke:currentColor!important}

/* Generic sidebar links — block widgets, plain lists, third-party menu
   plugins (e.g. Iks Menu) — anything without the walker's .tc-cat-link
   markup gets token colours. Scoped to the whole sidebar rather than
   .tc-widget: plugin widgets can render outside that wrapper, and an
   uncoloured link falls back to the browser default — including the
   default purple :visited that shows up in dark mode. */
.tc-shop-sidebar a:not(.tc-cat-link):not(.button){color:var(--ink-soft);text-decoration:none}
.tc-shop-sidebar a:not(.tc-cat-link):not(.button):hover{color:var(--blue)}

/* ═══════════════════ SINGLE PRODUCT ═══════════════════ */
/* Third-party "Tilaustuote" backorder notice (crwcpn plugin) ships its own
   light styling, which leaves an illegible near-white box on the dark
   product page. Retint it to the dark surface tokens in both dark modes. */
:is(html.dark,body.color-switch-dark) .crwcpn-notice,
:is(html.dark,body.color-switch-dark) .crwcpn-product-notice{
	background:var(--soft)!important;background-image:none!important;
	color:var(--ink-soft)!important;border-color:var(--border)!important;
}
:is(html.dark,body.color-switch-dark) .crwcpn-notice *,
:is(html.dark,body.color-switch-dark) .crwcpn-product-notice *{color:var(--ink-soft)!important}

.tc-single-product{padding:150px 0 100px}
/* Image column capped, not 50/50: the square gallery at half of a wide
   screen grew taller than the first viewport, pushing the summary's meta
   rows (brand/SKU/EAN etc.) below the fold. 480px keeps the photo large
   while the buy column gets the rest and the meta card stays on-screen. */
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:48px;position:relative;align-items:start}
@media(max-width:899px){.woocommerce div.product{grid-template-columns:minmax(0,1fr);gap:32px}}

/* Gallery + summary form the two columns; everything else spans full width */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .up-sells{grid-column:1 / -1}

/* Sale flash badge floated over the gallery (not a grid cell) */
.woocommerce span.onsale{position:absolute;top:16px;left:16px;z-index:3;background:var(--btn);color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:5px 12px;border-radius:50px;line-height:1.4}

.woocommerce div.product .woocommerce-product-gallery{position:relative;border-radius:0;overflow:hidden;background:#fff;border:1px solid var(--border)}
.woocommerce div.product .woocommerce-product-gallery img{width:100%;object-fit:contain;aspect-ratio:1/1}
/* Gallery viewport pinned to the intended square, deterministically.
   flexslider's JS writes an INLINE height onto .flex-viewport via its
   smoothHeight routine, re-measuring on load / resize / variation swap.
   A bare `height:auto!important` (v1.1.44) beat the explosion case but
   left the box's height at flexslider's mercy in the normal case — on a
   non-variable product the viewport could size to a stale/zero runtime
   measurement, breaking the image box. Pinning aspect-ratio:1/1 with
   height:auto makes the box derive its height from its own width instead
   of any inline value flexslider computes: it can neither collapse nor
   explode, and it matches the 1:1 the gallery <img> already uses. The
   !important on height keeps aspect-ratio in control of the box height
   by overriding flexslider's inline height (stylesheet !important beats
   a non-important inline style). */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport{aspect-ratio:1/1;height:auto!important}
.woocommerce div.product .woocommerce-product-gallery__wrapper{margin:0;padding:0}
.woocommerce div.product .woocommerce-product-gallery__image a{display:block;outline-offset:-2px}

/* Zoom / lightbox trigger icon */
.woocommerce div.product .woocommerce-product-gallery__trigger{background:var(--card);border:1px solid var(--border);border-radius:50%;cursor:pointer;height:38px;width:38px;padding:0;position:absolute;right:14px;top:14px;z-index:5;text-indent:-9999px;overflow:hidden}
.woocommerce div.product .woocommerce-product-gallery__trigger::before{content:'';position:absolute;left:10px;top:10px;width:11px;height:11px;border:2px solid var(--ink);border-radius:50%}
.woocommerce div.product .woocommerce-product-gallery__trigger::after{content:'';position:absolute;left:22px;top:22px;width:2px;height:8px;background:var(--ink);border-radius:2px;transform:rotate(-45deg)}

/* Thumbnail nav row — WooCommerce's flexslider builds this <ol> at
   runtime (assets/js/flexslider). Without this block it renders as an
   unstyled vertical list, stacking full-width thumbnails under the main
   image instead of a compact row. */
/* Show at most 4 thumbnails per row; a 5th+ image scrolls horizontally
   instead of wrapping onto a second row of small images. Each item's
   width is sized so exactly 4 (plus their gaps) fill the row exactly —
   nowrap then pushes anything beyond that into the scrollable overflow. */
/* ── Gallery thumbnail carousel ──
   The thumb strip used to be a plain overflow-x:auto row with a visible
   scrollbar. It is now arrow-driven: core.js wraps the strip in
   .tc-gal-nav, adds prev/next buttons and a segmented progress bar (one
   small square per image, active one highlighted). The scrollbar is
   hidden in every engine but the strip stays scrollable, so touch swipe
   and keyboard still work and the arrows are purely additive. */
.tc-gal-nav{position:relative;margin-top:12px}
.woocommerce div.product .flex-control-thumbs{display:flex;flex-wrap:nowrap;gap:10px;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.woocommerce div.product .flex-control-thumbs li{flex:0 0 calc(25% - 7.5px);list-style:none;margin:0;scroll-snap-align:start}
.woocommerce div.product .flex-control-thumbs::-webkit-scrollbar{display:none;width:0;height:0}
/* Arrows: centred on the strip, tucked just outside its edges. Hidden
   (not just disabled) when the strip doesn't overflow, so short galleries
   stay clean. */
.tc-gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;background:var(--card);border:1.5px solid var(--border);color:var(--ink);border-radius:0;transition:background .2s,border-color .2s,color .2s,opacity .2s}
.tc-gal-arrow:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.tc-gal-arrow--prev{left:-6px}
.tc-gal-arrow--next{right:-6px}
.tc-gal-arrow[hidden]{display:none}
.tc-gal-arrow:disabled{opacity:.3;cursor:default}
.tc-gal-arrow:disabled:hover{background:var(--card);border-color:var(--border);color:var(--ink)}
/* Segmented progress: one square per image, active highlighted. */
/* Same segmented progress bar as the front-page Kärkituotteet slider
   (.ind-promo__dot): a 22px rule per image, the current one orange and
   wider. Only the inactive colour differs — the promo sits on navy, this
   on the light product column. */
.tc-gal-bar{display:flex;justify-content:center;gap:8px;margin-top:12px}
.tc-gal-bar[hidden]{display:none}
.tc-gal-dot{width:22px;height:3px;padding:0;border:none;border-radius:0;cursor:pointer;background:var(--border);transition:background .2s,width .2s}
.tc-gal-dot:hover{background:var(--muted)}
.tc-gal-dot.is-active{background:var(--ind-orange);width:34px}
.tc-gal-dot:focus-visible{outline:2px solid var(--ind-orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .woocommerce div.product .flex-control-thumbs{scroll-behavior:auto}
  .tc-gal-dot{transition:none}
}
.woocommerce div.product .flex-control-thumbs img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:0;border:2px solid transparent;cursor:pointer;opacity:.65;transition:opacity .2s,border-color .2s}
.woocommerce div.product .flex-control-thumbs img:hover{opacity:1}
.woocommerce div.product .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--blue)}

.woocommerce div.product .product_title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:var(--heading);letter-spacing:-.02em;margin-bottom:12px}
.woocommerce div.product p.price{font-size:24px;font-weight:800;color:var(--blue);margin-bottom:20px}
.woocommerce div.product p.price .woocommerce-price-suffix{display:inline-block;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-left:6px;vertical-align:2px}
.woocommerce div.product .woocommerce-product-details__short-description{font-size:15px;color:var(--ink-soft);line-height:1.7;margin-bottom:24px}

.woocommerce div.product form.cart{display:flex;align-items:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}
.woocommerce div.product .quantity{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:0;overflow:hidden}
.tc-qty-btn{width:38px;height:46px;background:var(--soft);border:none;font-size:16px;cursor:pointer;color:var(--ink-soft)}
.tc-qty-btn:hover{background:var(--soft-2)}
.woocommerce div.product .quantity input.qty{width:52px;height:46px;border:none;text-align:center;font-family:inherit;font-size:15px;background:var(--card);color:var(--ink)}
/* type="number" inputs get native browser spinner arrows by default —
   we already provide our own −/+ buttons (.tc-qty-btn), so the native
   ones are redundant, and in a narrow input they overlap and cut off
   the digits themselves (as seen with 2-digit stock counts). Strip them
   everywhere a quantity field appears: single product, variations, cart. */
.woocommerce input.qty{-moz-appearance:textfield}
.woocommerce input.qty::-webkit-inner-spin-button,
.woocommerce input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.woocommerce div.product .single_add_to_cart_button{background:var(--btn);color:#fff;border:none;padding:14px 28px;border-radius:0;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(234,88,12,.18)}
.woocommerce div.product .single_add_to_cart_button:hover{background:var(--blue-deep)}

/* Quick-add box buttons — add a full Sisälaatikko/Ulkolaatikko in one
   click (see functions.php). Outline style so the primary add-to-cart
   button keeps visual priority. */
.tc-box-add{display:inline-flex;align-items:center;gap:8px;padding:14px 20px;border-radius:0;font-size:14px;font-weight:700;font-family:inherit;background:var(--card);border:1.5px solid var(--border);color:var(--ink-soft);cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .15s}
.tc-box-add:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.tc-box-add:active{transform:scale(.97)}
.tc-box-add svg{flex-shrink:0}

/* ── Variation attribute selector (e.g. "Malli" dropdown) ── */
/* .variations_form only exists on variable products (added by
   add-to-cart/variable.php), so this never affects the simple-product
   add-to-cart row. Boxed as its own labelled card — same visual language
   as the "Korvaava tuote" notice above it — so the attribute picker,
   price and stock status read as one clearly bounded group. */
.woocommerce div.product form.variations_form{background:var(--soft);border:1px solid var(--border);border-radius:0;padding:22px 22px 24px;margin-bottom:24px}
.woocommerce div.product form.variations_form::before{content:'Valitse malli';display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.woocommerce div.product table.variations{width:100%;border-collapse:collapse;margin-bottom:4px}
.woocommerce div.product table.variations tr+tr th,
.woocommerce div.product table.variations tr+tr td{padding-top:14px}
.woocommerce div.product table.variations th.label{text-align:left;padding:0 16px 0 0;width:1%;white-space:nowrap;vertical-align:middle}
.woocommerce div.product table.variations th.label label{font-size:14px;font-weight:700;color:var(--heading);margin:0}
.woocommerce div.product table.variations td.value{vertical-align:middle}
.woocommerce div.product table.variations select{padding:11px 36px 11px 14px;border:1.5px solid var(--border);border-radius:0;font-family:inherit;font-size:14px;background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>") no-repeat right 12px center;appearance:none;-webkit-appearance:none;color:var(--ink);cursor:pointer;transition:border-color .2s}
.woocommerce div.product table.variations select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(234,88,12,.14)}
.woocommerce div.product a.reset_variations{margin-left:14px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.woocommerce div.product a.reset_variations:hover{color:var(--blue)}

/* ── Selected-variation summary: price, stock status, description ── */
/* .woocommerce-variation-price/.woocommerce-variation-availability are
   populated by WooCommerce's own JS (a wp.template, not this theme's
   markup) once an attribute is chosen — reused .price styling from
   above applies automatically, this just gives the block its own
   spacing and a highlighted chip instead of floating plain text. */
/* form.cart is a flex row (simple-product qty+button layout above), so
   inside a variations_form the wrap would shrink to content width as a
   centered flex item — force it onto its own full-width row so the
   variation info card spans the panel. */
.woocommerce div.product .single_variation_wrap{margin-top:18px;flex-basis:100%;width:100%;min-width:0}
/* WooCommerce wraps qty+button for variable products in their own div
   (unlike simple products, where they're direct children of form.cart
   and already inherit its flex row) — without this it stacks full-width
   at the form's block-level default instead of a compact inline row. */
.woocommerce div.product .woocommerce-variation-add-to-cart{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* …and hidden until a variation is actually chosen. WooCommerce toggles
   -enabled/-disabled on this row itself, so the state is read from its
   own classes rather than from whether the wrapper happens to have been
   slid up: before a choice is made there is no price, no stock state and
   no variation to add, so an active qty+"Lisää ostoskoriin" there only
   invites a click that can't work. */
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart{display:none}
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-enabled{display:flex}
.woocommerce div.product .woocommerce-variation-description{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-bottom:8px}
/* The variation price is $product->get_price_html() called directly
   (no wrapping <p>, unlike the main summary price from price.php) —
   it's a bare <span class="price">, so target the class, not the tag. */
.woocommerce div.product .woocommerce-variation-price .price{font-size:22px;font-weight:800;color:var(--blue);margin:0 0 10px;padding:12px 16px;background:var(--blue-soft);border-radius:0;display:inline-block}
.woocommerce div.product .woocommerce-variation-price .price .woocommerce-price-suffix{display:inline-block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-left:6px;vertical-align:1px}
.woocommerce div.product .woocommerce-variation-availability{margin-bottom:14px}
.woocommerce div.product .woocommerce-variation-availability p.stock{font-size:13px;font-weight:600;padding:6px 12px;border-radius:50px;display:inline-flex;align-items:center;gap:6px;margin:0;background:var(--soft-2);color:var(--ink-soft)}
.woocommerce div.product .woocommerce-variation-availability p.stock.in-stock{background:var(--green-soft);color:var(--green-text)}
.woocommerce div.product .woocommerce-variation-availability p.stock.out-of-stock,
.woocommerce div.product .woocommerce-variation-availability p.stock.available-on-backorder{background:var(--amber-soft);color:var(--amber-text)}

/* ── Per-variation info card (add-to-cart/variation.php wp.template) ──
   Rendered by WooCommerce's JS on found_variation: SKU / EAN / packaging
   rows (data injected into the variation JSON in functions.php) for both
   customers and guests — guests receive no price or description data at
   all, so those blocks simply don't render for them. Sits inside the
   soft variations_form panel, so it uses the card surface to stand out. */
.woocommerce div.product .tc-variation-card{background:var(--card);border:1px solid var(--border);border-radius:0;padding:16px 18px;display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.woocommerce div.product .tc-variation-meta{display:flex;flex-direction:column;gap:9px}
.woocommerce div.product .tc-variation-meta:empty{display:none}
.woocommerce div.product .tc-variation-card .woocommerce-variation-price{margin-top:4px}
.woocommerce div.product .tc-variation-card .woocommerce-variation-price .price{margin-bottom:0}
.woocommerce div.product .tc-variation-card .woocommerce-variation-availability{margin-bottom:0}

/* ── Product meta footer (SKU, EAN, packaging, price, category, brand, tags) ── */
/* Theme override (woocommerce/single-product/meta.php) renders every row
   as icon + label + value — boxed as its own labelled card, same
   treatment as the variant-selector card above. */
.woocommerce div.product .product_meta{display:flex;flex-direction:column;gap:12px;margin-top:24px;padding:20px 22px;background:var(--card);border:1px solid var(--border);border-radius:0;font-size:13.5px;color:var(--muted);box-shadow:0 20px 50px rgba(14,26,43,.06)}
.woocommerce div.product .product_meta::before{content:'Tuotetiedot';display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
/* Brand logos are uploaded at wildly inconsistent native sizes (some tall
   print-resolution files) — any <img> a brand plugin/hook drops into this
   card (ours never does; this guards third-party ones too) is capped to a
   small logo footprint instead of reserving its full aspect-ratio box,
   which is what turned some brands' rows into a mostly-empty card. */
.woocommerce div.product .product_meta img{max-width:140px;max-height:44px;width:auto;height:auto;object-fit:contain;align-self:flex-start}
.tc-meta-row{display:flex;align-items:center;gap:10px;min-width:0}
.tc-meta-row svg{flex-shrink:0;color:var(--muted)}
.tc-meta-label{flex-shrink:0;color:var(--muted);min-width:118px}
.tc-meta-value{color:var(--ink-soft);font-weight:600;min-width:0;overflow-wrap:anywhere}
.tc-meta-value a{color:var(--ink-soft);font-weight:600;text-decoration:none;transition:color .2s}
.tc-meta-value a:hover{color:var(--blue)}

/* Category/tag rows inside the Lisätiedot tab (reuse the meta-row look;
   the top border only separates them when an attributes table renders
   above, which the :first-child guard handles). */
/* Attributes table in the Lisätiedot tab — WooCommerce centers/right-
   aligns the label column by default; left-align both columns and give
   the labels a fixed comfortable width. */
.woocommerce-tabs .panel table.woocommerce-product-attributes{width:100%;border-collapse:collapse;margin:0}
.woocommerce-tabs .panel .woocommerce-product-attributes th,
.woocommerce-tabs .panel .woocommerce-product-attributes td{text-align:left;padding:8px 24px 8px 0;border:none;font-size:14px;vertical-align:top}
.woocommerce-tabs .panel .woocommerce-product-attributes th{width:220px;color:var(--heading);font-weight:700}
.woocommerce-tabs .panel .woocommerce-product-attributes td{color:var(--ink-soft)}
.woocommerce-tabs .panel .woocommerce-product-attributes td p{margin:0}

.tc-meta-suffix{font-size:12px;color:var(--muted);font-weight:600}

.tc-tab-meta{display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border);font-size:13.5px}
.tc-tab-meta:first-child{margin-top:0;padding-top:0;border-top:none}
/* Outrank the rich-content link rule (.woocommerce-tabs .panel a) that
   would otherwise underline these term links inside the tab panel. */
.woocommerce-tabs .panel .tc-tab-meta a{color:var(--ink-soft);text-decoration:none}
.woocommerce-tabs .panel .tc-tab-meta a:hover{color:var(--blue)}

.woocommerce-tabs{margin-top:48px;border-top:1px solid var(--border);padding-top:32px}
.woocommerce-tabs ul.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;list-style:none;padding:0}
/* Uppercase across the row: plugin tabs (Tuotevertailu, Liitteet, GPSR)
   ship their titles already capitalised, so leaving WooCommerce's own
   "Kuvaus"/"Lisätiedot" in sentence case made one strip of tabs look like
   two different components. Transformed in CSS, not in the titles, so the
   accessible name and any plugin's own label stay untouched. */
.woocommerce-tabs ul.tabs li{padding:10px 18px;border-radius:0;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--soft);cursor:pointer;color:var(--ink-soft);list-style:none}
.woocommerce-tabs ul.tabs li a{color:inherit;text-decoration:none}
.woocommerce-tabs ul.tabs li.active{background:var(--btn);color:#fff}
/* Tab switching itself is handled by core.js (guaranteed to run — see
   functions.php), not WooCommerce's own wc-single-product.js, so it
   works even when the host defers/strips scripts by handle. Panels
   default to hidden except the first so nothing stacks if JS is ever
   fully unavailable. */
.woocommerce-tabs .panel{display:none;font-size:15px;color:var(--ink-soft);line-height:1.8;background:var(--card);border:1px solid var(--border);border-radius:0;padding:28px 30px;box-shadow:0 20px 50px rgba(14,26,43,.06)}
.woocommerce-tabs .panel:first-of-type{display:block}

/* Rich description content (product descriptions are raw post_content —
   headings, paragraphs, hr dividers and lists with no spacing rules of
   their own render as one dense, hard-to-scan block without these). */
.woocommerce-tabs .panel h2,.woocommerce-tabs .panel h3,.woocommerce-tabs .panel h4{color:var(--heading);font-weight:800;letter-spacing:-.01em;line-height:1.3;margin:30px 0 14px}
.woocommerce-tabs .panel>h2:first-child,.woocommerce-tabs .panel>h3:first-child,.woocommerce-tabs .panel>h4:first-child{margin-top:0}
.woocommerce-tabs .panel h2{font-size:22px}
.woocommerce-tabs .panel h3{font-size:18px}
.woocommerce-tabs .panel h4{font-size:16px}
.woocommerce-tabs .panel p{margin:0 0 16px}
.woocommerce-tabs .panel p:last-child{margin-bottom:0}
.woocommerce-tabs .panel ul,.woocommerce-tabs .panel ol{margin:0 0 20px 22px;list-style:revert}
.woocommerce-tabs .panel li{margin-bottom:14px;line-height:1.7}
.woocommerce-tabs .panel li:last-child{margin-bottom:0}
.woocommerce-tabs .panel li p{margin-bottom:4px}
.woocommerce-tabs .panel li p:last-child{margin-bottom:0}
.woocommerce-tabs .panel strong,.woocommerce-tabs .panel b{color:var(--heading);font-weight:700}
.woocommerce-tabs .panel hr{border:none;border-top:1px solid var(--border);margin:28px 0}
.woocommerce-tabs .panel a{color:var(--blue);text-decoration:underline}
.woocommerce-tabs .panel img{max-width:100%;border-radius:0;margin:20px 0}

/* ═══════════════════ RELATED PRODUCTS ═══════════════════ */
.related.products{margin-top:80px;padding-top:56px;border-top:1px solid var(--border)}
.related.products > h2{font-size:22px;font-weight:800;color:var(--heading);margin-bottom:28px}

/* ═══════════════════ CART / CHECKOUT ═══════════════════ */
.tc-woo-page{padding:150px 0 100px}
.woocommerce table.shop_table{width:100%;border-collapse:collapse;margin-bottom:32px}
.woocommerce table.shop_table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:14px 12px;background:var(--soft);border-bottom:1px solid var(--border)}
.woocommerce table.shop_table td{padding:16px 12px;border-bottom:1px solid var(--border);font-size:14px;color:var(--ink-soft)}
/* Both dimensions fixed on purpose. height:auto + aspect-ratio looked
   equivalent but only holds for images that LOAD — a broken image has no
   intrinsic ratio, so the box fell back to auto height and grew to fit
   the wrapped alt text, blowing a cart row up to hundreds of pixels.
   A hard 64×64 box + object-fit:contain renders any real image shape
   undistorted and keeps a dead image (alt text clipped) the same size
   as a live one. overflow:hidden clips the alt-text rendering. */
.woocommerce table.shop_table img{width:64px;height:64px;object-fit:contain;overflow:hidden;border-radius:0;margin:0!important;background:#fff}

/* Cart column balancing (product name flexes, numerics align right) */
.woocommerce table.cart th.product-remove,.woocommerce table.cart td.product-remove{width:44px;text-align:center}
.woocommerce table.cart th.product-thumbnail,.woocommerce table.cart td.product-thumbnail{width:88px}
.woocommerce table.cart th.product-name,.woocommerce table.cart td.product-name{text-align:left;width:auto}
.woocommerce table.cart th.product-price,.woocommerce table.cart td.product-price,
.woocommerce table.cart th.product-quantity,.woocommerce table.cart td.product-quantity,
.woocommerce table.cart th.product-subtotal,.woocommerce table.cart td.product-subtotal{text-align:right;width:120px;white-space:nowrap}
.woocommerce table.cart td.product-quantity .quantity{display:inline-flex;justify-content:flex-end}

.woocommerce .cart-collaterals{display:grid;grid-template-columns:1fr;gap:24px;max-width:420px;margin-left:auto}
.woocommerce .cart_totals{background:var(--soft);border:1px solid var(--border);border-radius:0;padding:24px}
.woocommerce .cart_totals table{width:100%}
/* th gets a right padding and td right-aligns: with neither, the table
   column collapsed to exactly the widest label and amounts rendered
   flush against it ("YHTEENSÄ8 162,52 €"). */
.woocommerce .cart_totals tr td,.woocommerce .cart_totals tr th{padding:10px 0;font-size:14px;border-bottom:1px solid var(--border);color:var(--ink-soft)}
.woocommerce .cart_totals tr th{text-align:left;padding-right:20px}
.woocommerce .cart_totals tr td{text-align:right}
.woocommerce .cart_totals .woocommerce-shipping-totals td{text-align:left}
.woocommerce .wc-proceed-to-checkout .checkout-button{display:flex;width:100%;text-align:center;justify-content:center;background:var(--btn);color:#fff;padding:15px;border-radius:0;font-weight:700;text-decoration:none;margin-top:16px}

.woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media(max-width:899px){.woocommerce-checkout .col2-set{grid-template-columns:1fr}}
.woocommerce-checkout input[type="text"],.woocommerce-checkout input[type="email"],.woocommerce-checkout input[type="tel"],.woocommerce-checkout textarea,.woocommerce-checkout select{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:0;font-family:inherit;font-size:15px;margin-bottom:6px;background:var(--card);color:var(--ink)}
.woocommerce-checkout label{font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;display:block}
.woocommerce-checkout #place_order{background:var(--btn);color:#fff;border:none;padding:16px 32px;border-radius:0;font-size:15px;font-weight:700;cursor:pointer;width:100%}

/* Unscoped (not just inside .woocommerce-notices-wrapper): checkout's
   coupon/login toggles render .woocommerce-info OUTSIDE the wrapper and
   were getting the colors but none of the padding/margin — stacked
   notices sat flush against each other with no spacing. */
.woocommerce-message,.woocommerce-error,.woocommerce-info{display:block;padding:16px 20px;border-radius:0;font-size:14px;margin-bottom:14px}
.woocommerce-message{background:var(--green-soft);color:var(--green-text);border:1px solid rgba(21,128,61,.25)}
.woocommerce-error{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA}
.woocommerce-info{background:var(--blue-soft);color:var(--blue);border:1px solid rgba(234,88,12,.25)}
.woocommerce-message .wc-forward,.woocommerce-error .wc-forward{margin-left:10px;font-weight:700;text-decoration:underline;color:inherit}

/* Give cart & checkout more room than the default article column */
.woocommerce-cart .tc-page-content,
.woocommerce-checkout .tc-page-content{max-width:1120px}

/* Reset .tc-page-content typographic bleed into WooCommerce markup */
.woocommerce ul,.woocommerce ol{list-style:none;margin:0;padding:0}
.tc-page-content .woocommerce a{text-decoration:none}
.tc-page-content .woocommerce li{font-size:inherit;color:inherit;margin:0}

/* Cart table cells */
.woocommerce table.shop_table td.product-name a{color:var(--heading);font-weight:700}
.woocommerce table.shop_table td.product-name a:hover{color:var(--blue)}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal{font-weight:700;color:var(--heading);white-space:nowrap}
.woocommerce a.remove{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--soft-2);color:var(--muted)!important;font-size:16px;line-height:1;font-weight:700}
.woocommerce a.remove:hover{background:#FEE2E2;color:#B91C1C!important}
.woocommerce .cart input.qty{width:64px;height:44px;text-align:center;border:1.5px solid var(--border);border-radius:0;background:var(--card);color:var(--ink);font-family:inherit;font-size:15px}

/* Cart actions row (coupon + update) */
/* The td stays a real table cell (flexing it would void its colspan and
   collapse the row to one column's width); the inner div is the flex row. */
.woocommerce .cart .actions{padding:20px 12px}
.woocommerce .cart .actions .tc-cart-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.woocommerce .cart .actions .coupon{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Explicit width, not just max-width: without WooCommerce's own styles
   the input falls back to its tiny intrinsic size and truncates even its
   placeholder ("Kupongin k…"). */
.woocommerce .cart .actions .coupon .input-text{width:220px;max-width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:0;font-family:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.woocommerce .cart .actions .button{background:var(--card);border:1.5px solid var(--border);color:var(--ink);padding:12px 20px;border-radius:0;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.woocommerce .cart .actions .button:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.woocommerce .cart_totals h2{font-size:18px;font-weight:800;color:var(--heading);margin-bottom:14px}
.woocommerce .cart_totals .order-total th,.woocommerce .cart_totals .order-total td{font-weight:800;color:var(--heading);font-size:16px}

/* Checkout */
.woocommerce-checkout h3{font-size:18px;font-weight:800;color:var(--heading);margin:0 0 18px}
.woocommerce-checkout #order_review_heading{margin-top:40px}
.woocommerce form .form-row{margin-bottom:14px}
.woocommerce form .form-row label{font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;display:block}
.woocommerce-checkout #order_review{background:var(--soft);border:1px solid var(--border);border-radius:0;padding:24px;margin-top:8px}
.woocommerce-checkout #order_review .shop_table th{background:transparent}
.woocommerce-checkout #order_review .order-total .amount{color:var(--heading);font-size:18px;font-weight:800}
.woocommerce-checkout #payment{background:var(--card);border:1px solid var(--border);border-radius:0;padding:20px;margin-top:20px}
.woocommerce-checkout #payment ul.payment_methods{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.woocommerce-checkout #payment ul.payment_methods li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
.woocommerce-checkout #payment ul.payment_methods li label{margin:0;font-weight:600}
.woocommerce-checkout #payment .payment_box{flex-basis:100%;font-size:13px;color:var(--muted);background:var(--soft);border-radius:0;padding:12px 14px;margin:4px 0 0}
.woocommerce-checkout #payment .place-order{margin-top:4px}

/* ── Split-backorder cart sections (see inc/backorder-split.php) ── */
.tc-cart-section td{padding:12px 16px!important;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}
.tc-cart-section td svg{vertical-align:-2px;margin-right:8px}
.tc-cart-section--instock td{background:var(--green-soft);color:var(--green-text)}
.tc-cart-section--backorder td{background:var(--amber-soft);color:var(--amber-text)}
.tc-cart-section__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tc-stash-btn{background:var(--card);border:1.5px solid var(--border);color:var(--ink-soft);padding:7px 14px;border-radius:0;font-size:12px;font-weight:700;font-family:inherit;letter-spacing:0;text-transform:none;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.tc-stash-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
/* Parked ("saved for later") section — neutral, clearly not part of the order */
.tc-cart-section--saved td{background:var(--soft-2);color:var(--muted)}
.woocommerce table.cart tr.tc-saved-row td{background:var(--soft);color:var(--muted)}

/* ── Cart export ("Vie Exceliin") — see inc/cart-export.php ── */
.tc-export-btn{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--border);color:var(--ink);padding:12px 20px;border-radius:0;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.tc-export-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.tc-export-btn svg{flex-shrink:0}

.tc-export-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.tc-export-modal[hidden]{display:none}
.tc-export-modal__backdrop{position:absolute;inset:0;background:rgba(14,26,43,.55);backdrop-filter:blur(2px)}
.tc-export-modal__dialog{position:relative;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;background:var(--card);border-radius:0;padding:32px;box-shadow:0 30px 70px rgba(14,26,43,.25)}
.tc-export-modal__close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:0;border:none;background:var(--soft);color:var(--muted);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.tc-export-modal__close:hover{background:var(--blue-soft);color:var(--blue)}
.tc-export-modal__title{font-size:20px;font-weight:800;color:var(--heading);margin:0 0 6px;padding-right:30px}
.tc-export-modal__sub{font-size:14px;color:var(--ink-soft);margin:0 0 20px}
.tc-export-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:16px}
.tc-export-field{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);cursor:pointer}
.tc-export-field input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer;flex-shrink:0}
.tc-export-modal__actions{display:flex;gap:16px;margin-bottom:22px}
.tc-export-select-all{background:none;border:none;padding:0;color:var(--blue);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:underline}
.tc-export-submit{width:100%;justify-content:center;padding:15px;border-radius:0;font-size:15px;border:none;cursor:pointer;font-family:inherit}
.tc-export-submit:disabled{opacity:.65;cursor:default}
.tc-export-modal__error{margin:12px 0 0;padding:12px 14px;border-radius:0;background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;font-size:13px}
body.tc-export-open{overflow:hidden}

@media (max-width:520px){
  .tc-export-fields{grid-template-columns:1fr}
  .tc-export-modal__dialog{padding:26px 20px}
}

/* ── "Pyydä tarjous" quote-request popup (guest product page) ── */
.tc-quote-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.tc-quote-modal[hidden]{display:none}
.tc-quote-modal__backdrop{position:absolute;inset:0;background:rgba(14,26,43,.55);backdrop-filter:blur(2px)}
.tc-quote-modal__dialog{position:relative;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;background:var(--card);border-radius:0;padding:32px;box-shadow:0 30px 70px rgba(14,26,43,.25)}
.tc-quote-modal__close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:0;border:none;background:var(--soft);color:var(--muted);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.tc-quote-modal__close:hover{background:var(--blue-soft);color:var(--blue)}
.tc-quote-modal__title{font-size:20px;font-weight:800;color:var(--heading);margin:0 0 14px;padding-right:30px}
.tc-quote-modal__product{display:flex;flex-direction:column;gap:2px;padding:12px 14px;margin-bottom:20px;background:var(--soft);border-left:3px solid var(--blue)}
.tc-quote-modal__product-name{font-size:14px;font-weight:700;color:var(--heading)}
.tc-quote-modal__product-sku{font-size:12.5px;color:var(--muted);font-family:var(--mono,monospace)}
.tc-quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.tc-quote-modal .tc-field{margin-bottom:14px}
.tc-quote-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tc-quote-submit{width:100%;justify-content:center;padding:15px;border-radius:0;font-size:15px;border:none;cursor:pointer;font-family:inherit;margin-top:4px}
.tc-quote-submit:disabled{opacity:.65;cursor:default}
.tc-quote-privacy{font-size:12px;color:var(--muted);line-height:1.5;margin:12px 0 0}
.tc-quote-privacy a{color:var(--blue);text-decoration:underline}
.tc-quote-error{margin:12px 0 0;padding:12px 14px;border-radius:0;background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;font-size:13px}
.tc-quote-success{margin:6px 0 0;text-align:center;padding:16px;background:var(--green-soft);border:1px solid rgba(21,128,61,.3);border-radius:0;color:var(--green-text);font-size:14px;font-weight:600}
body.tc-quote-open,body.tc-nav-quote-open{overflow:hidden}

@media (max-width:520px){
  .tc-quote-grid{grid-template-columns:1fr}
  .tc-quote-modal__dialog{padding:26px 20px}
}
.woocommerce table.cart tr.tc-saved-row .product-name a{color:var(--muted)}
.woocommerce table.cart tr.tc-saved-row img{opacity:.7}
/* ── Pack chips (SL/UL) + quantity-match flag in the cart ── */
.woocommerce table.cart th.product-packs,.woocommerce table.cart td.product-packs{width:96px;text-align:center;white-space:nowrap}
.tc-pack-chip{display:block;width:84px;margin:0 auto 6px;padding:7px 8px;background:var(--card);border:1px solid var(--border);border-radius:0;font-size:12.5px;font-weight:700;font-family:inherit;color:var(--blue);cursor:pointer;transition:border-color .2s,background .2s,transform .1s}
.tc-pack-chip:last-child{margin-bottom:0}
.tc-pack-chip:hover{border-color:var(--blue);background:var(--blue-soft)}
.tc-pack-chip:active{transform:scale(.95)}
.tc-pack-chip.is-loading{opacity:.5;pointer-events:none}
.tc-pack-chip.is-added{background:var(--green-soft);border-color:var(--green-text);color:var(--green-text)}
.tc-pack-chip.is-capped{background:var(--amber-soft);border-color:var(--amber-text);color:var(--amber-text)}
.woocommerce-cart-form.tc-cart-updating{opacity:.55;pointer-events:none;transition:opacity .2s}
.tc-pack-none{color:var(--dim)}
.tc-qty-flag{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:8px;vertical-align:middle}
.tc-qty-flag--none{visibility:hidden}
.tc-qty-flag--up{color:var(--amber-text)}
.tc-qty-flag--up .tc-qty-flag__dot{display:none}
.tc-qty-flag--ok .tc-qty-flag__arrow{display:none}
.tc-qty-flag__dot{width:12px;height:12px;border-radius:50%;background:var(--green)}
/* Themed hover tooltip on the quantity-match flag (replaces the browser's
   native title). Anchored to the flag's right edge so it grows leftward and
   never clips the cart's right side; the mismatch tip carries a second,
   actionable line (white-space:pre-line honours the \n in data-tip). */
.tc-qty-flag[data-tip]{position:relative}
.tc-qty-flag[data-tip]::after,
.tc-qty-flag[data-tip]::before{position:absolute;opacity:0;visibility:hidden;pointer-events:none;z-index:40;transition:opacity .15s ease,transform .15s ease}
.tc-qty-flag[data-tip]::after{content:attr(data-tip);bottom:calc(100% + 9px);right:-6px;width:max-content;max-width:230px;white-space:pre-line;text-align:left;background:var(--navy);color:#fff;font-size:11.5px;font-weight:600;line-height:1.45;letter-spacing:0;text-transform:none;padding:9px 12px;box-shadow:0 12px 28px rgba(14,26,43,.32);transform:translateY(4px)}
.tc-qty-flag[data-tip]::before{content:'';bottom:calc(100% + 3px);right:5px;border:6px solid transparent;border-top-color:var(--navy);transform:translateY(4px)}
.tc-qty-flag[data-tip]:hover::after,
.tc-qty-flag[data-tip]:hover::before,
.tc-qty-flag[data-tip]:focus-visible::after,
.tc-qty-flag[data-tip]:focus-visible::before{opacity:1;visibility:visible;transform:translateY(0)}
/* qty cell fits input + flag side by side */
.woocommerce table.cart td.product-quantity .quantity{vertical-align:middle}

/* Availability column */
.woocommerce table.cart th.product-availability,.woocommerce table.cart td.product-availability{text-align:center;white-space:nowrap;width:auto;min-width:92px}
.tc-avail{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700}
.tc-avail--ok{color:var(--green-text)}
.tc-avail--ok svg{color:var(--green)}
.tc-avail--part{color:var(--amber-text)}
.tc-avail--part svg{color:var(--amber-text)}
.tc-avail--none{color:var(--amber-text)}
.tc-avail--eta{color:var(--amber-text);font-size:13px}

/* Standalone parked-items panel on the empty-cart view */
/* Shop-page reminder that parked backorder lines wait in the cart —
   compact single-row variant of .tc-saved-panel, same restore form. */
.tc-stash-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--ind-orange);border-radius:0;padding:13px 18px;margin-bottom:24px}
.tc-stash-banner__msg{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.tc-stash-banner__msg svg{color:var(--ind-orange);flex-shrink:0}
.tc-stash-banner__actions{display:flex;align-items:center;gap:14px}
.tc-stash-banner__actions form{margin:0}
.tc-stash-banner__link{font-size:13px;font-weight:700;color:var(--blue);text-decoration:none}
.tc-stash-banner__link:hover{text-decoration:underline}

.tc-saved-panel{background:var(--card);border:1px solid var(--border);border-radius:0;padding:22px;margin:24px 0;max-width:560px}
.tc-saved-panel__title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.tc-saved-panel ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.tc-saved-panel li{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.tc-saved-panel li a{color:var(--ink-soft);font-weight:600;text-decoration:none}
.tc-saved-panel li a:hover{color:var(--blue)}
.tc-saved-panel li span{color:var(--muted);flex-shrink:0}
/* Amber tint carries down the backorder rows so the group reads as one
   block even between the header and the totals. */
.woocommerce table.cart tr.tc-cart-item--backorder td{background:var(--amber-row)}
.woocommerce table.cart tr.tc-cart-item--backorder .backorder_notification{font-size:12px;font-weight:600;color:var(--amber-text);margin:4px 0 0}
.tc-backorder-badge{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 9px;border-radius:50px;background:var(--amber-soft);color:var(--amber-text);vertical-align:1px}

/* Checkout summary ("Tilauksesi"): backorder rows form their own labelled
   block. Rows carry .tc-cart-item--backorder from the same class filter
   the cart uses, and the cart is pre-sorted in-stock-first, so the label
   goes on the first backorder row that follows an in-stock one — pure
   CSS, no template override or render-state tracking needed. */
.woocommerce-checkout-review-order-table tr.tc-cart-item--backorder td{background:var(--amber-row)}
.woocommerce-checkout-review-order-table tr.cart_item:not(.tc-cart-item--backorder)+tr.tc-cart-item--backorder td:first-child::before{content:'Jälkitoimituksena — oma tilaus (2/2)';display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-text);margin-bottom:6px}

/* ── Responsive cart: collapse the table into stacked cards on mobile ── */
@media(max-width:768px){
  .woocommerce table.shop_table_responsive,
  .woocommerce table.shop_table_responsive tbody,
  .woocommerce table.shop_table_responsive tbody tr,
  .woocommerce table.shop_table_responsive tbody td{display:block;width:100%}
  .woocommerce table.shop_table_responsive thead{display:none}
  .woocommerce table.shop_table_responsive tbody tr.cart_item{border:1px solid var(--border);border-radius:0;margin-bottom:16px;padding:6px 16px;position:relative}
  .woocommerce table.shop_table_responsive tbody td{display:flex;justify-content:space-between;align-items:center;text-align:right;border:0;border-bottom:1px solid var(--border);padding:12px 0}
  .woocommerce table.shop_table_responsive tbody tr.cart_item td:last-child{border-bottom:0}
  .woocommerce table.shop_table_responsive tbody td::before{content:attr(data-title);font-weight:700;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;text-align:left;margin-right:16px}
  .woocommerce table.shop_table_responsive td.product-thumbnail{display:none}
  .woocommerce table.shop_table_responsive td.product-remove{position:absolute;top:10px;right:10px;width:auto;padding:0;border:0}
  .woocommerce table.shop_table_responsive td.product-remove::before{display:none}
  .woocommerce table.shop_table_responsive td.product-name{padding-right:40px;font-weight:700}
  .woocommerce table.shop_table_responsive td.product-name::before{display:none}
  .woocommerce table.shop_table_responsive td.product-packs{text-align:right;width:auto;white-space:normal}
  .woocommerce table.shop_table_responsive td.product-packs .tc-pack-chip{display:inline-block;width:auto;margin:0 0 0 6px}
  .woocommerce table.shop_table_responsive .actions{display:block}
  .woocommerce .cart .actions .tc-cart-actions{flex-direction:column;align-items:stretch}
  .woocommerce .cart .actions .coupon{flex-direction:column;align-items:stretch}
  .woocommerce .cart .actions .coupon .input-text{width:100%;max-width:none}
  .woocommerce .cart .actions .button{width:100%}
  .woocommerce .cart-collaterals{max-width:none}
}

/* ═══════════════════ MY ACCOUNT / B2B PORTAL ═══════════════════ */
.tc-account{padding:150px 0 100px}

/* Account navigation as a horizontal tab bar */
.woocommerce-MyAccount-navigation{margin-bottom:32px}
.woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--border);padding-bottom:0}
.woocommerce-MyAccount-navigation li{display:flex}
.woocommerce-MyAccount-navigation a{display:block;padding:12px 18px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.woocommerce-MyAccount-navigation a:hover{color:var(--ink)}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--blue);border-bottom-color:var(--blue)}
.woocommerce-MyAccount-content{font-size:15px;color:var(--ink-soft);line-height:1.7}
.woocommerce-MyAccount-content a:not(.button){color:var(--blue);font-weight:600}
.woocommerce-MyAccount-content table.shop_table{margin-top:16px}
.woocommerce-MyAccount-content .woocommerce-Address{margin-top:16px}
.woocommerce address{font-style:normal;color:var(--ink-soft);line-height:1.8;background:var(--soft);border:1px solid var(--border);border-radius:0;padding:20px}
.woocommerce-column__title,.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{font-size:16px;font-weight:800;color:var(--heading);margin:0 0 12px}

/* ── Order detail / thank-you / view-order ── */
.woocommerce mark{background:transparent;color:var(--heading);font-weight:700}
.woocommerce .woocommerce-notice,.woocommerce-order > p:first-child{font-size:15px;color:var(--ink-soft);line-height:1.7;margin-bottom:24px}
.woocommerce-order-overview{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 32px;padding:0}
.woocommerce-order-overview li{flex:1;min-width:150px;background:var(--soft);border:1px solid var(--border);border-radius:0;padding:16px 18px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.woocommerce-order-overview li strong{display:block;margin-top:6px;font-size:16px;color:var(--heading);text-transform:none;letter-spacing:0}
.woocommerce-order-details{margin-bottom:40px}
.woocommerce-order-details__title{font-size:18px;font-weight:800;color:var(--heading);margin:0 0 16px}
.woocommerce-customer-details .woocommerce-columns--addresses,.woocommerce-columns--addresses{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
@media(max-width:767px){.woocommerce-columns--addresses{grid-template-columns:1fr}}

/* Dashboard link cards */
.tc-account-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
@media(max-width:767px){.tc-account-cards{grid-template-columns:1fr}}
.tc-account-card{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:0;padding:20px;text-decoration:none;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.tc-account-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(14,26,43,.08);border-color:var(--blue)}
.tc-account-card__icon{width:42px;height:42px;border-radius:0;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tc-account-card__title{display:block;font-size:15px;font-weight:700;color:var(--heading);margin-bottom:3px}
.tc-account-card__desc{display:block;font-size:13px;color:var(--muted);line-height:1.5}

/* Orders table (WooCommerce default) */
.woocommerce-orders-table__cell-order-actions .button{padding:8px 14px;font-size:13px;border-radius:0}
.woocommerce-orders-table .button{background:var(--card);border:1.5px solid var(--border);color:var(--ink);text-decoration:none;font-weight:700;transition:border-color .2s,color .2s,background .2s}
.woocommerce-orders-table .button:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}

/* ── Login / register forms ── */
.woocommerce-account:not(.logged-in) .tc-page-content{max-width:960px}
.woocommerce .u-columns.col2-set,.woocommerce .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(max-width:767px){.woocommerce .u-columns.col2-set,.woocommerce .col2-set{grid-template-columns:1fr}}
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.woocommerce-ResetPassword,
.woocommerce .woocommerce-EditAccountForm,
.woocommerce .woocommerce-address-fields{background:var(--card);border:1px solid var(--border);border-radius:0;padding:32px;box-shadow:0 10px 30px rgba(14,26,43,.05)}
.woocommerce .col-1 h2,.woocommerce .col-2 h2{font-size:20px;font-weight:800;color:var(--heading);margin-bottom:8px}
.woocommerce-form-login__submit,.woocommerce-form-register__submit,
.woocommerce-Button,.woocommerce-EditAccountForm button,.woocommerce-address-fields button{background:var(--btn)!important;color:#fff!important;border:none;padding:14px 26px;border-radius:0;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(234,88,12,.18);transition:background .2s,transform .2s}
.woocommerce-form-login__submit:hover,.woocommerce-form-register__submit:hover,.woocommerce-Button:hover{background:var(--blue-deep)!important;transform:translateY(-2px)}

/* Woo form fields (login / account / address) */
.woocommerce form .form-row label,.woocommerce-account label{font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;display:block}
.woocommerce form .input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"]{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:0;font-family:inherit;font-size:15px;background:var(--card);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.woocommerce form .input-text:focus,
.woocommerce-account input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(234,88,12,.14)}
.woocommerce-form-login__rememberme,.woocommerce form .form-row label.woocommerce-form__label-for-checkbox{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--muted)}
.woocommerce-LostPassword{margin-top:12px;font-size:14px}
.woocommerce-LostPassword a{color:var(--blue);font-weight:600}

/* Show/hide-password toggle. WooCommerce wraps the password field as
   <span class="password-input"><input…><span class="show-password-input">
   and draws the eye as a currentColor fill behind a CSS mask — without
   explicit rules the icon degrades to a bare colour rectangle (a white
   square in dark mode) that wraps onto its own line below the field.
   Take ownership: pin the toggle inside the field's right edge and draw
   the eye / eye-off icons with our own masks in token colours. */
.woocommerce form span.password-input{position:relative;display:block;width:100%}
.woocommerce form .password-input .input-text{padding-right:46px}
.woocommerce form .password-input .show-password-input{position:absolute;top:0;right:0;bottom:0;width:44px;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.woocommerce form .password-input .show-password-input::after{content:'';display:block;width:20px;height:20px;background:var(--muted);
	-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7Z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7Z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.woocommerce form .password-input .show-password-input:hover::after{background:var(--ink)}
.woocommerce form .password-input .show-password-input.display-password::after{
	-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7Z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='m4%204%2016%2016'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7Z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='m4%204%2016%2016'/%3E%3C/svg%3E") center/contain no-repeat}

/* ═══════════════════ QUANTITY +/- (JS hooks) ═══════════════════ */
.quantity{position:relative}

/* "billed separately" hint on zero-counted backorder line subtotals */
.tc-billed-later{display:block;font-size:11px;font-weight:600;color:var(--amber-text)}

/* ═══════════════════════════════════════════════════════════════
   INDUSTRIAL STOREFRONT ACCENTS
   Layered on top of the retained shop structure (buttons, product
   meta, backorder split are untouched) — just the industrial look.
   ═══════════════════════════════════════════════════════════════ */
/* page hero: hazard rule + technical title */
.tc-page-hero{position:relative}
.tc-page-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(-45deg,var(--ind-orange) 0 14px,var(--ind-ink) 14px 28px)}
.tc-page-hero__eyebrow{font-family:var(--mono);letter-spacing:.18em;color:var(--ind-orange)}
.tc-page-hero__title{text-transform:uppercase;font-weight:900;letter-spacing:-.01em}

/* B2B login banner: slate + orange key */
.tc-b2b-banner{border-left:5px solid var(--ind-orange)}
.tc-b2b-banner strong{color:var(--ind-orange)}

/* toolbar + widgets: technical labels */
.tc-shop-toolbar__count{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:12.5px;color:var(--heading)}
.tc-widget__title{text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;font-weight:800;padding-bottom:12px;border-bottom:2px solid var(--ind-orange);margin-bottom:16px}

/* product card: blueprint thumb, mono SKU, hard offset accent */
.tc-product-card__thumb{background:var(--soft);border-bottom:1.5px solid var(--border);position:relative}
.tc-product-card__thumb::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(23,34,46,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,34,46,.045) 1px,transparent 1px);background-size:22px 22px}
.tc-product-card__thumb img{position:relative;z-index:1}
.tc-product-card__badge{top:0;left:0;letter-spacing:.1em;font-weight:800}
.tc-product-card__brand{font-family:var(--mono);letter-spacing:.04em;font-weight:600}
ul.products li.product .price,.tc-product-card__price{font-weight:900}
ul.products li.product .button,.tc-product-card .button{text-transform:uppercase;letter-spacing:.05em;font-weight:800}

/* pagination: orange current key */
.tc-pagination .page-numbers.current{background:var(--ind-orange);color:#fff}