/* Shop Actuators storefront: layout and WooCommerce block overrides. Tokens live in theme.json. */

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
::selection { background: var(--wp--preset--color--accent-soft); }

/* Header */
.ts-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--wp--preset--color--line); }
.admin-bar .ts-header { top: 32px; }
/* Logo: the actuator mark (housing, rod, rod end), then the wordmark. */
.ts-logo a { color: var(--wp--preset--color--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5em; }
.ts-logo a::before { content: ""; width: 22px; height: 22px; flex: 0 0 auto; background: url("../logo-mark.svg") center / contain no-repeat; }
.ts-nav a { color: var(--wp--preset--color--ink-2); }
.ts-nav a:hover { color: var(--wp--preset--color--ink); }
.ts-search .wp-block-search__inside-wrapper { border: 0; background: var(--wp--preset--color--tile); border-radius: 999px; padding: 2px 4px 2px 14px; min-width: 250px; }
.ts-search .wp-block-search__button { border-radius: 999px; }
.ts-search input { background: transparent; border: 0; font-size: 0.875rem; }
.ts-search input:focus { outline: none; }
.ts-search .wp-block-search__button { background: transparent; color: var(--wp--preset--color--ink-2); padding: 0.4rem; }
@media (max-width: 1100px) { .ts-search { display: none; } }

/* Headings with serif accent */
.ts-hero__title em, h1 em, h2 em { font-style: italic; color: var(--wp--preset--color--accent); }
.ts-hero__title { margin: 0.25rem 0 1.25rem; }
.ts-hero__lede { color: var(--wp--preset--color--ink-2); max-width: 36ch; margin-bottom: 2rem; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); }

.ts-proof { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); padding: 2.5rem 0; gap: 2.5rem; }
.ts-proof h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.ts-proof p { color: var(--wp--preset--color--muted); font-size: 0.9rem; margin: 0; }
.ts-section { margin-top: var(--wp--preset--spacing--70) !important; }
.ts-rail { margin-top: var(--wp--preset--spacing--70) !important; }
.ts-rail__head { margin-bottom: 1.5rem; gap: 1rem; }
.ts-rail__head h2 { margin: 0; }
.ts-rail__lede { color: var(--wp--preset--color--muted); margin: 0.4rem 0 0; max-width: 60ch; }
.ts-see-all { margin: 0; font-weight: 500; font-size: 0.9rem; }

/* Product grid and cards (Faire: supplier under the image; Apple: quiet tiles) */
.ts-products .wc-block-product-template { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.5rem !important; }
.ts-products .wc-block-product-template.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ts-products .wc-block-product-template > li { width: auto !important; max-width: none !important; margin: 0 !important; }
@media (max-width: 1000px) { .ts-products .wc-block-product-template, .ts-products .wc-block-product-template.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem !important; } }
.ts-products .wc-block-product { text-align: left; }
.ts-card-img { margin: 0 !important; }
.ts-card-img a, .ts-card-img .wc-block-components-product-image { display: block; background: var(--wp--preset--color--tile); border-radius: 6px; overflow: hidden; }
.ts-card-img img { aspect-ratio: 1; object-fit: contain !important; padding: 9%; box-sizing: border-box; mix-blend-mode: multiply; transition: transform .3s ease; background: transparent !important; }
.wc-block-product:hover .ts-card-img img { transform: scale(1.035); }
.ts-card-title { font-size: 0.95rem !important; font-weight: 600; line-height: 1.35 !important; margin: 0.2rem 0 0 !important; font-family: var(--wp--preset--font-family--sans) !important; letter-spacing: -0.01em !important; }
.ts-card-title a { color: var(--wp--preset--color--ink); }
.ts-card-price { margin-top: 0.5rem !important; font-size: 0.95rem !important; text-align: left !important; }
.ts-card-price .ts-badge { font-size: 0.65rem; }
.ts-empty { color: var(--wp--preset--color--muted); }

/* Archive layout */
.ts-archive-head h1 { margin: 0.5rem 0 0.5rem; }
.ts-term-desc { color: var(--wp--preset--color--muted); max-width: 64ch; }
.ts-archive-head .ts-subcats { margin-top: 1.25rem; }
.ts-toolbar { border-bottom: 1px solid var(--wp--preset--color--line); padding-bottom: 0.9rem; margin-bottom: 1.75rem; font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.ts-toolbar__title { margin: 0 !important; }
.ts-toolbar select { font: inherit; border: 1px solid var(--wp--preset--color--line); border-radius: 3px; padding: 0.4rem 0.9rem; background: var(--wp--preset--color--surface); }
/* The sidebar sticks, and scrolls on its own when the filters are taller than
   the window, so every filter and the Apply button stay reachable. */
.ts-shop-sidebar { position: sticky; top: 88px; align-self: flex-start; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 0.5rem; }
.admin-bar .ts-shop-sidebar { top: 120px; max-height: calc(100vh - 136px); }
.ts-filters { font-size: 0.875rem; }
/* Keep every filter inside the 240px sidebar: browsers give <fieldset> a
   groove border and min-width:min-content, which pushed lists into the grid. */
.ts-shop-sidebar, .ts-filters, .ts-filters > * { min-width: 0; max-width: 100%; }
.ts-filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ts-filters legend { padding: 0; }
.ts-filters .wc-block-product-filter-checkbox-list__items,
.ts-filters .wc-block-product-filter-checkbox-list__item { width: auto; max-width: 100%; }
.ts-filters label { overflow-wrap: anywhere; }
/* Price filter: WooCommerce lays out two fixed 170px boxes; make them share the width. */
.ts-filters .wc-block-product-filter-price-slider__content { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr) !important; column-gap: 0.5rem; }
.ts-filters .wc-block-product-filter-price-slider__content input[type="text"] { width: 100%; min-width: 0; box-sizing: border-box; }
.ts-filters .wp-block-woocommerce-product-filter-attribute,
.ts-filters .wp-block-woocommerce-product-filter-price,
.ts-filters .wp-block-woocommerce-product-filter-taxonomy { border-bottom: 1px solid var(--wp--preset--color--line); padding-bottom: 1.1rem; margin-bottom: 1.1rem; }
.ts-filter-heading { font-size: 0.75rem !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--muted); margin: 0 0 0.6rem !important; font-weight: 600 !important; }
.ts-filters .wc-block-product-filter-checkbox-list__items { gap: 0.35rem; }
.ts-filters input[type=checkbox] { accent-color: var(--wp--preset--color--ink); }
@media (max-width: 781px) { .ts-shop-sidebar { position: static; max-height: none; overflow: visible; } }

/* Product page (Apple: big image, sticky buy box, typeset specs) */
.ts-pdp { margin-top: 1rem; }
.ts-pdp__media .woocommerce-product-gallery, .ts-pdp__media .wp-block-woocommerce-product-image-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.ts-pdp__media .woocommerce-product-gallery__image, .ts-pdp__media .flex-viewport { background: var(--wp--preset--color--tile); border-radius: 8px; overflow: hidden; }
.ts-pdp__media .woocommerce-product-gallery__image img { aspect-ratio: 4 / 3.4; object-fit: contain; padding: 7%; box-sizing: border-box; mix-blend-mode: multiply; }
.ts-pdp__media .flex-control-thumbs { display: flex; gap: 0.6rem; margin-top: 0.75rem !important; }
.ts-pdp__media .flex-control-thumbs li { width: 76px !important; background: var(--wp--preset--color--tile); border-radius: 6px; overflow: hidden; }
.ts-pdp__media .flex-control-thumbs img { mix-blend-mode: multiply; padding: 6px; box-sizing: border-box; opacity: .7; }
.ts-pdp__media .flex-control-thumbs img.flex-active { opacity: 1; }
.ts-buybox { position: sticky; top: 100px; display: grid; gap: 1rem; }
.ts-pdp__title { font-size: clamp(2rem, 3vw, 2.75rem) !important; margin: 0 !important; }
.ts-pdp__price { margin: 0 !important; }
.ts-pdp__excerpt { color: var(--wp--preset--color--ink-2); font-size: 0.95rem; }
.ts-buybox form.cart { display: flex; gap: 0.75rem; align-items: stretch; margin: 0.25rem 0 0.5rem; }
.ts-buybox .quantity input { height: 100%; width: 4.5rem; border: 1px solid var(--wp--preset--color--line); border-radius: 3px; text-align: center; font: inherit; background: var(--wp--preset--color--surface); }
.ts-buybox .single_add_to_cart_button { flex: 1; font-size: 1rem !important; padding: 0.95rem 1.5rem !important; }
.ts-pdp-details { margin-top: var(--wp--preset--spacing--70) !important; }
.ts-about .wp-block-post-content { color: var(--wp--preset--color--ink-2); font-size: 0.95rem; }
.ts-supplier-panel { margin-bottom: 2.5rem; }

/* Cart and checkout blocks */
.wc-block-cart, .wc-block-checkout { font-size: 0.95rem; }
.wc-block-components-button:not(.is-link) { border-radius: 3px !important; }

/* Footer */
.ts-footer { background: var(--wp--preset--color--surface); border-top: 1px solid var(--wp--preset--color--line); }
.ts-footer h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--muted); }
.ts-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; font-size: 0.9rem; }
.ts-footer-lede { color: var(--wp--preset--color--muted); max-width: 40ch; font-size: 0.9rem; }
.ts-footer-fine { color: var(--wp--preset--color--subtle); font-size: 0.75rem; margin-top: 3rem !important; max-width: 90ch; }

/* Plain pages: breadcrumb, title and body share one left edge (templates/page*.html). */
.ts-page-head .ts-page-title { margin: 0.6rem 0 0; }
.ts-page-lede { color: var(--wp--preset--color--ink-2); font-size: 1.1rem; max-width: 62ch; margin-top: 0; }
.ts-page-body > * { margin-left: 0 !important; }
.ts-page-body h2 { font-size: 1.6rem; margin: 2.5rem 0 0.75rem; }
.ts-page-body h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }
.ts-page-body ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.ts-page--wide .ts-page-body > p, .ts-page--wide .ts-page-body > ul { max-width: 72ch; }
.woocommerce-cart .wp-block-woocommerce-empty-cart-block, .wc-block-cart__empty-cart__title { font-family: var(--wp--preset--font-family--serif); }

/* Home: full-width bands alternate backgrounds so the page reads in sections. */
.ts-home > .ts-band { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.ts-band--tile { background: var(--wp--preset--color--tile); }
.ts-band--white { background: var(--wp--preset--color--surface); }
.ts-band--accent { background: var(--wp--preset--color--accent-soft); }
.ts-band--ink { background: var(--wp--preset--color--ink); color: #f5f5f4; padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
.ts-band--marquee { padding: 0 !important; background: var(--wp--preset--color--surface); border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.ts-band > .ts-rail:first-child, .ts-band .ts-rail:first-of-type { margin-top: 0 !important; }
.ts-home .ts-rail { margin-top: var(--wp--preset--spacing--60) !important; }
.home .ts-footer { margin-top: 0 !important; }
.ts-hero__eyebrow { color: var(--wp--preset--color--accent); }
.ts-hero .wp-block-buttons { gap: 0.75rem; }

/* Header tools: compare count and a visible Log in / My account link. */
.ts-header-tools { align-items: center; }
.ts-header-compare { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--accent-soft); border-radius: 3px; padding: 0.35rem 0.8rem; white-space: nowrap; }
.ts-header-compare[hidden] { display: none; }
.ts-header-compare .ts-icon { width: 18px; height: 18px; }
.ts-header-compare__count { background: var(--wp--preset--color--accent); color: #fff; border-radius: 999px; min-width: 1.3em; text-align: center; padding: 0 0.35em; font-size: 0.72rem; }
.ts-account a { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.ts-account .wc-block-customer-account__account-icon { width: 22px; height: 22px; }
body:not(.logged-in) .ts-account a { border: 1px solid var(--wp--preset--color--ink); border-radius: 3px; padding: 0.3rem 0.85rem 0.3rem 0.6rem; }
body:not(.logged-in) .ts-account a:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); }
.ts-header--checkout { position: static; }
.ts-checkout-note { margin: 0; font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
@media (max-width: 781px) { .ts-checkout-note, .ts-header-compare span:not(.ts-header-compare__count) { display: none; } }
.ts-band--base { background: var(--wp--preset--color--base); }
.ts-home > .ts-band--hero { padding-top: 0 !important; padding-bottom: 0 !important; }
.ts-home > .ts-band--sections { padding: 0 !important; }
.ts-home { margin-top: 0 !important; padding-top: 0 !important; }
.ts-home > :first-child { margin-top: 0 !important; }
.home .wp-site-blocks > * + * { margin-block-start: 0; }

/* Product gallery fills its column (WooCommerce's block wrapper caps it at 512px). */
.ts-pdp__media .wp-block-woocommerce-product-image-gallery { width: 100% !important; max-width: none !important; }
.ts-pdp__media .woocommerce-product-gallery__image img { width: 100% !important; height: auto; }

/* Hover zoom, Amazon style (market.js): a lens over the photo and a magnified pane beside it. */
.ts-pdp__media { position: relative; }
.ts-zoom-lens { position: absolute; pointer-events: none; border: 1px solid var(--wp--preset--color--ink-2); background: rgba(255,255,255,.35); box-shadow: 0 0 0 9999px rgba(250,250,249,.25); z-index: 5; display: none; }
.ts-zoom-pane { position: absolute; top: 0; left: calc(100% + var(--wp--preset--spacing--60, 2rem)); width: min(620px, 42vw); aspect-ratio: 1; background-color: #fff; background-repeat: no-repeat; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; box-shadow: 0 18px 40px rgba(28,25,23,.14); z-index: 40; display: none; }
.ts-zoom-on .ts-zoom-lens, .ts-zoom-on .ts-zoom-pane { display: block; }
.ts-zoom-hint { position: absolute; right: 12px; bottom: 12px; z-index: 4; font-size: 0.75rem; color: var(--wp--preset--color--ink-2); background: rgba(255,255,255,.9); border-radius: 3px; padding: 0.25rem 0.6rem; pointer-events: none; }
@media (hover: none), (max-width: 1000px) { .ts-zoom-lens, .ts-zoom-pane, .ts-zoom-hint { display: none !important; } }
