/*
Theme Name: ROT Niche
Theme URI: https://rightontech.com
Author: Right On Tech
Author URI: https://rightontech.com
Description: Block theme for the PAL niche-site network. Catalog-first, five style variations (one design system, accent per site), locally bundled fonts.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.1
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rot-niche
Tags: e-commerce, full-site-editing, block-patterns, custom-colors, custom-logo
*/

/* ===================================================================
   "Control Panel" design system.
   Grounded in the product: pedals/pickups are covered in mono knob labels,
   so mono uppercase micro-type carries eyebrows, tags and counts, against a
   big Space Grotesk display. White canvas, ONE accent (per-site, from the
   active style variation), generous space.

   Everything derives from theme.json presets, so the same stylesheet dresses
   the teal / copper / violet sites identically apart from the accent.
   =================================================================== */

:root{
  --ink: var(--wp--preset--color--contrast, #0C1413);
  --accent: var(--wp--preset--color--accent, #0B7C7C);
  --accent-deep: color-mix(in srgb, var(--accent) 78%, #000);
  --mute: var(--wp--preset--color--secondary, #5E6B6A);
  --line: var(--wp--preset--color--line, #E6EBEA);
  --surface: var(--wp--preset--color--surface, #F5F8F8);
  --disp: var(--wp--preset--font-family--display), "Space Grotesk", system-ui, sans-serif;
  --body: var(--wp--preset--font-family--body), Inter, system-ui, sans-serif;
  --mono: var(--wp--preset--font-family--spacemono), "Space Mono", ui-monospace, monospace;
}

*, *::before, *::after{ box-sizing:border-box; }  /* padded 1200 containers must not overflow the phone */
body{ font-family: var(--body); color: var(--ink); background:#fff; -webkit-font-smoothing:antialiased; }
a{ text-decoration:none; }

.rot-mono{
  font-family: var(--mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:11px; line-height:1.4;
}
.rot-eyebrow{ color: var(--accent-deep); }

/* ---- utility strip (top of header) ---- */
.rot-util{ background: var(--ink); color:#9FB2B0; }
.rot-util .rot-util-in{
  max-width:1200px; margin:0 auto; padding:9px 32px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}

/* ---- header ----
   Row 1 (logo / search / account+cart) is a white band with content at 1200px.
   Row 2 is a full-width DARK nav bar with its own content capped at 1200px.
   The header sits above the hero so dropdowns are never painted over. */
.rot-header{ position:relative; z-index:30; padding-inline:0 !important; }
.rot-hero{ z-index:0; }

/* kill the 24px flow gaps: between the two header rows, and between header and hero */
.rot-header-nav{ margin-block-start:0 !important; }
.wp-site-blocks > main, main.wp-block-group{ margin-block-start:0 !important; }

.rot-header-bar{
  max-width:1200px; margin-inline:auto; padding-inline:32px;
  width:100%; box-sizing:border-box; gap:2rem;
}
.rot-header-logo{ flex:0 0 auto; }
.rot-header-actions{ flex:0 0 auto; }
.rot-header-actions.is-layout-flex{ gap:10px !important; }
.rot-header-search{ flex:1 1 auto; max-width:500px; }
.rot-header-search .wp-block-search__inside-wrapper{ width:100%; border:1.5px solid var(--line); border-radius:8px; overflow:hidden; }
.rot-header-search .wp-block-search__input{ border:0; padding:5px 16px; font-size:15px; }
.rot-header-search .wp-block-search__button{
  margin:0; background: var(--accent); color:#fff; border:0; border-radius:6px;
  font-family: var(--mono); text-transform:capitalize; letter-spacing:.06em; font-size:12px; padding:8px 20px;
}
.rot-header-actions .wp-block-woocommerce-customer-account a,
.rot-header-actions .wc-block-mini-cart__button{ color: var(--ink); }
.rot-header-actions svg{ width:31px; height:31px; }
.rot-header-actions .wc-block-mini-cart__button .wc-block-mini-cart__icon{ width:2em; height:2em; }
/* plain mobile cart icon — desktop uses the WooCommerce mini-cart instead */
.rot-mobile-cart{ display:none; color:var(--ink); align-items:center; }
.rot-mobile-cart svg{ width:28px; height:28px; }
.rot-header-actions .wc-block-mini-cart__amount, .rot-header-actions .wc-block-mini-cart__quantity-badge{ font-size:14px; }

/* ---- desktop nav: full-width dark bar, white text, content at 1200 ---- */
.rot-nav-desktop-wrap{ background:var(--ink); }
.rot-nav-desktop-wrap .wp-block-navigation{
  max-width:1200px; margin-inline:auto; padding:6px 32px; box-sizing:border-box; width:100%;
  justify-content:center !important;
}
.rot-nav-desktop .wp-block-navigation-item__content,
.rot-nav-desktop .wp-block-navigation-item__label{ color:#fff !important; font-family:var(--disp); font-weight:500; }
.rot-nav-desktop .wp-block-navigation-item__content:hover,
.rot-nav-desktop .wp-block-navigation-item__content:hover .wp-block-navigation-item__label{ color:color-mix(in srgb, var(--accent), #fff 45%) !important; }
/* dropdown arrow on parent items (desktop) */
.rot-nav-desktop .wp-block-navigation-item.has-child > .wp-block-navigation-item__content{ display:inline-flex; align-items:center; }
.rot-nav-desktop .wp-block-navigation__submenu-icon{ display:inline-flex !important; margin-left:4px; padding:0; margin-top:-6px; }
.rot-nav-desktop .wp-block-navigation__submenu-icon svg{ fill:#fff; stroke:#fff; width:16px; height:16px; }
/* per request: zero the default padding on submenu item links */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content{ padding:0; }

/* ---- dropdown: solid white, elevated, above everything ---- */
.wp-block-navigation .wp-block-navigation__submenu-container{
  background:#fff !important; border:1px solid var(--line); border-radius:0 !important;
  box-shadow:0 18px 44px -18px rgba(12,20,19,.4); padding:6px 0; min-width:236px; z-index:60; margin-top:0 !important; }
/* drop the panel from the bottom edge of the dark bar, not the text baseline */
.rot-nav-desktop .wp-block-navigation__submenu-container{ margin-top:6px !important; }
/* invisible bridge over the gap so moving the mouse into the dropdown keeps it open */
.rot-nav-desktop .wp-block-navigation__submenu-container::before{
  content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.rot-nav-desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.rot-nav-desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__label{
  color:var(--ink) !important; padding:9px 20px; font-weight:500; }
.rot-nav-desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.rot-nav-desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label{
  color:var(--accent-deep) !important; }

/* ---- mobile: logo left · cart + burger right; account goes into the menu ----
   !important because WooCommerce/WP's own .wp-block-navigation display rule ties on
   specificity and would otherwise win by source order. */
.rot-nav-mobile{ display:none !important; }
@media (max-width:781px){
  .rot-nav-mobile{ display:block !important; }
  .rot-nav-desktop-wrap{ display:none !important; }
  .rot-header-actions .rot-account-icon{ display:none; }
  /* logo on its line; search hidden (lives in the menu). The cart+burger are PINNED
     to the top-right by absolute positioning, so no amount of flex/overflow weirdness
     from the WooCommerce blocks can shove them off-screen. */
  .rot-header{ position:relative; }
  .rot-header-search{ display:none; }
  /* pinned to the header (absolute, not fixed) so it scrolls away and isn't sticky.
     The root overflow-x:clip below keeps the header at viewport width so right:16 lands
     on-screen. */
  .rot-header-actions{
    position:absolute; top:20px; right:16px; z-index:20;
    display:flex !important; align-items:center; gap:18px; margin:0 !important; }
  .rot-header-actions .rot-account-icon{ display:none !important; }
  /* WooCommerce's mini-cart hides itself via a container query at phone width; swap it
     for a plain cart icon we fully control. */
  .rot-header-actions .wp-block-woocommerce-mini-cart{ display:none !important; }
  .rot-mobile-cart{ display:inline-flex !important; }
  .rot-nav-mobile{ flex:0 0 auto; display:block !important; }
  .rot-nav-mobile .wp-block-navigation__responsive-container-open{ display:flex !important; position:relative; visibility:visible !important; }
  .rot-nav-mobile .wp-block-navigation__responsive-container{ position:fixed !important; }
  /* util text is too wide for a phone and won't wrap as a flex item; hide on mobile
     (the free-shipping promise still shows in the trust bar below the hero). */
  .rot-util{ display:none; }
  /* clip any stray horizontal overflow so the page can't grow wider than the phone and
     shove the absolutely-pinned header actions past the right edge. */
  .wp-site-blocks{ overflow-x:clip; }
}
/* the "Sign in" menu item: hidden in the desktop bar, a button in the mobile overlay */
.rot-nav-desktop .rot-account-item{ display:none; }
.rot-nav-mobile .rot-account-item .wp-block-navigation-item__content{
  display:inline-block; margin-top:10px; border:1.5px solid var(--accent);
  border-radius:9px; padding:12px 24px; font-weight:600; color:var(--ink); }

/* ---- generic section head ---- */
.rot-sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
.rot-sec-head h2{ font-size:clamp(26px,3.4vw,34px); margin:6px 0 0; }
.rot-sec-head .rot-more{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--accent-deep); white-space:nowrap; }

/* ---- hero ----
   Full-bleed background image (product on the right, open space on the left) with a
   left-anchored dark scrim so the overlaid text stays readable whatever the image
   brightness. Text is light and lives in the open left third. */
.rot-hero{ position:relative; overflow:hidden;
  background: linear-gradient(90deg,#0c1413,var(--surface)); }
.rot-hero-bg{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center right; z-index:0; }
.rot-hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(9,14,13,.88) 0%, rgba(9,14,13,.62) 34%, rgba(9,14,13,.12) 62%, rgba(9,14,13,0) 80%); }
.rot-hero-in{ position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; min-height:540px; }
.rot-hero-copy{ padding:64px 0; max-width:560px; }
.rot-hero-copy h1{ color:#fff; font-size:clamp(42px,6vw,74px); line-height:.98; letter-spacing:-.03em; margin:16px 0 0; }
.rot-hero-copy h1 .rot-accent{ color:color-mix(in srgb, var(--accent), #fff 32%); }
.rot-hero-copy p{ color:rgba(255,255,255,.86); font-size:19px; line-height:1.5; margin:20px 0 28px; max-width:440px; }
.rot-hero .rot-eyebrow{ color:color-mix(in srgb, var(--accent), #fff 38%); }
.rot-hero-cta{ display:inline-flex; align-items:center; gap:12px; background:#fff; color:var(--ink);
  font-family:var(--disp); font-weight:600; font-size:16px; padding:15px 28px; border-radius:10px; }
.rot-hero-cta:hover{ background:var(--accent); color:#fff; }
.rot-hero-cta .rot-arrow{ color:var(--accent); }
.rot-hero-cta:hover .rot-arrow{ color:#fff; }
.rot-hero-specs{ display:flex; gap:30px; margin-top:34px; border-top:1px solid rgba(255,255,255,.22); padding-top:20px; }
.rot-hero-specs .n{ color:#fff; font-family:var(--disp); font-weight:700; font-size:24px; }
.rot-hero-specs .l{ color:rgba(255,255,255,.7); }

/* shared centered container for the class-based (wp:html) sections */
.rot-inner{ max-width:1200px; margin:0 auto; padding:0 32px; }

/* ---- trust strip (accent colour band, no numbers, touches the hero) ---- */
.rot-trust{ background:var(--accent); color:#fff; }
.rot-trust-in{ max-width:1200px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:repeat(4,1fr); }
.rot-trust .item{ padding:22px 22px; display:flex; flex-direction:column; gap:4px; border-left:1px solid rgba(255,255,255,.22); }
.rot-trust .item:first-child{ border-left:0; padding-left:0; }
.rot-trust .item .rot-mono{ display:none; }
.rot-trust .item b{ font-family:var(--disp); font-weight:600; font-size:15px; color:#fff; }
.rot-trust .item span{ color:rgba(255,255,255,.85); font-size:13px; }

/* homepage sections butt together — each manages its own padding, so no inter-section gap */
.wp-block-post-content > *{ margin-block-start:0 !important; margin-block-end:0 !important; }

/* ---- category tiles ---- */
.rot-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1100px){ .rot-tiles{ grid-template-columns:repeat(3,1fr); } }
.rot-tiles .wp-block-column{ margin:0 !important; }
.rot-tile{ display:block; border:1.5px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:.18s; }
.rot-tile .rot-tile-img{ aspect-ratio:16/10; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:26px; }
.rot-tile .rot-tile-img img{ max-height:100%; max-width:100%; min-width:0; width:auto; object-fit:contain; mix-blend-mode:multiply; }
.rot-tiles > *{ min-width:0; }
.rot-tile .rot-tile-meta{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-top:1.5px solid var(--line); }
.rot-tile .rot-tile-name{ font-family:var(--disp); font-weight:600; font-size:17px; color:var(--ink); }
.rot-tile .rot-tile-count{ font-family:var(--mono); font-size:12px; color:var(--accent-deep); }
.rot-tile:hover{ border-color:var(--accent); transform:translateY(-3px);
  box-shadow:0 14px 34px -20px color-mix(in srgb, var(--accent) 60%, transparent); }

/* ---- product rows: dress the WooCommerce Product Collection to match the mockup cards ----
   Do NOT override the template's layout — WooCommerce's own columns-4 flex lays the cards
   4-across correctly, and forcing a grid on top of it collapsed each card to a sliver.
   We only style the card's appearance. */
.rot-products .wp-block-woocommerce-product-template{ gap:16px; margin:0; }
.rot-products .wc-block-product{
  border:1.5px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
  transition:.18s; padding:0; display:flex; flex-direction:column; position:relative; }
.rot-products .wc-block-product:hover{
  border-color:var(--accent); transform:translateY(-3px);
  box-shadow:0 14px 34px -20px color-mix(in srgb, var(--accent) 60%, transparent); }
.rot-products .wc-block-components-product-image,
.rot-products .wp-block-woocommerce-product-image{ padding:14px 14px 6px; margin:0 !important; background:#fff; }
.rot-products .wc-block-components-product-image img{ mix-blend-mode:multiply; aspect-ratio:1 !important; object-fit:contain !important; width:100% !important; height:100% !important; }
/* lighter, more elegant product title (body face, regular weight) */
.rot-products .wp-block-post-title{ font-family:var(--body); font-weight:400; font-size:13.5px; line-height:1.4;
  padding:0 16px; margin:0 !important; letter-spacing:.005em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rot-products .wp-block-post-title a{ color:var(--ink); }
/* prices: sale in accent, original slashed smaller and vertically centred against it */
.rot-products .wc-block-components-product-price{ padding:6px 16px 14px; margin:0 !important;
  font-family:var(--disp); display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.rot-products .wc-block-components-product-price del{ color:var(--mute); font-weight:400; font-size:13px; opacity:.8; margin:0; }
.rot-products .wc-block-components-product-price ins{ text-decoration:none; color:var(--accent-deep); font-weight:600; font-size:16px; }
.rot-products .wc-block-components-product-price__value{ font-weight:600; font-size:16px; letter-spacing:-.01em; }
/* sale badge -> mono dark tag, top-left (works on every accent) */
.rot-products .wp-block-woocommerce-product-sale-badge{ position:absolute; top:0; left:0; z-index:3; }
.rot-products .wc-block-components-product-sale-badge{
  position:static; margin:12px 0 0 12px; background:var(--ink); color:#fff;
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; font-size:10px;
  padding:4px 8px; border-radius:5px; min-width:0; border:0; }

/* ---- deals band (tinted) ---- */
.rot-band{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ---- buttons ---- */
.rot-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff;
  font-family:var(--disp); font-weight:600; font-size:15px; padding:13px 26px; border-radius:9px; margin-top:22px; }
.rot-btn:hover{ background:var(--accent); color:#fff; }
.rot-btn-light{ background:#fff; color:var(--ink); }
.rot-btn-light:hover{ background:var(--accent); color:#fff; }
.rot-row-cta{ text-align:center; }
.rot-row-cta .rot-btn{ margin-top:24px; }

/* ---- brand navigator: a tidy card grid (no logos — the parent store has none) ---- */
.rot-brands .rot-sec-head{ justify-content:space-between; }
.rot-brand-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
@media (max-width:1100px){ .rot-brand-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:600px){ .rot-brand-grid{ grid-template-columns:repeat(2,1fr); } }
.rot-brand{ display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:86px; padding:14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; transition:.18s; }
.rot-brand span{ font-family:var(--disp); font-weight:600; font-size:16px; color:var(--ink); letter-spacing:-.01em; }
.rot-brand:hover{ border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 12px 28px -18px color-mix(in srgb, var(--accent) 55%, transparent); }
.rot-brand:hover span{ color:var(--accent-deep); }

/* ---- brand navigator page (/brands/) ---- */
.rot-brandnav h1{ font-size:clamp(30px,4vw,44px); margin:6px 0 4px; }
.rot-brandnav-sub{ color:var(--mute); font-size:16px; margin:0 0 24px; }
.rot-alpha{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 32px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.rot-alpha a{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px;
  border:1.5px solid var(--line); border-radius:8px; font-family:var(--disp); font-weight:600; font-size:14px; color:var(--ink); }
.rot-alpha a:hover{ border-color:var(--accent); color:var(--accent-deep); }
.rot-brand-letter{ font-family:var(--disp); font-weight:700; font-size:22px; color:var(--accent-deep); margin:28px 0 14px; scroll-margin-top:90px; }

/* ---- editorial / why-us ---- */
.rot-editorial{ background:var(--surface); }
.rot-editorial p{ max-width:680px; font-size:17px; line-height:1.7; color:var(--mute); }
.rot-whyus{ position:relative; overflow:hidden; }
.rot-whyus-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(10px) saturate(1.15); transform:scale(1.08); z-index:0; }
.rot-whyus-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(9,14,13,.72), rgba(9,14,13,.42)); }
.rot-whyus-in{ position:relative; z-index:2; }
.rot-whyus-in h2, .rot-whyus-in .rot-eyebrow{ color:#fff; }
.rot-whyus-in p{ color:rgba(255,255,255,.9); max-width:640px; font-size:17px; line-height:1.7; }

/* ---- category / shop page with filter sidebar ---- */
.rot-shop-layout{ align-items:flex-start; }
.rot-shop-sidebar{ position:sticky; top:20px; }
/* every sidebar section gets identical vertical spacing: no flow margins, no wrapper
   padding, and the (usually empty) active-filters section is collapsed so it can't add a
   phantom gap before the Brand list. */
.rot-shop-sidebar.is-layout-flow > *{ margin-block:0 !important; }
.rot-shop-sidebar .wp-block-woocommerce-product-filters{ padding:0 !important; margin:0 !important; }
.rot-cat-filter,
.rot-shop-sidebar .wp-block-woocommerce-product-filters > *{ padding:18px 0 !important; margin:0 !important; }
.rot-shop-sidebar .wp-block-woocommerce-product-filter-active{ padding:0 !important; }
.rot-filter-title{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--mute); margin:0 0 12px; }
/* scoped category navigator (replaces the all-categories filter on category pages) */
.rot-cat-filter{ padding:18px 0; }
.rot-cat-filter-list{ list-style:none; margin:0; padding:0; }
.rot-cat-filter-item{ margin:0; }
.rot-cat-filter-item a{ display:block; padding:6px 0; font-size:14px; color:var(--ink); text-decoration:none; }
.rot-cat-filter-item a:hover{ color:var(--accent-deep); }
.rot-cat-filter-item.is-active a{ color:var(--accent-deep); font-weight:600; }
/* keep the price slider (and its min/max inputs) inside the sidebar column width */
.rot-shop-sidebar .wp-block-woocommerce-product-filter-price{ width:100%; max-width:100%; box-sizing:border-box; overflow:hidden; }
.rot-shop-sidebar .wp-block-woocommerce-product-filter-price *{ box-sizing:border-box; }
.rot-shop-sidebar .wc-block-product-filter-price-slider,
.rot-shop-sidebar .wc-block-product-filter-price-slider__content,
.rot-shop-sidebar .wc-block-product-filter-price-slider__range{ width:100%; max-width:100%; margin-left:0; margin-right:0; }
.rot-shop-sidebar .wc-block-product-filter-price-slider__range input[type="range"]{ width:100%; }
.rot-shop-sidebar .wc-block-product-filter-price-slider__content{ display:flex; flex-wrap:wrap; gap:8px; padding:0 2px; }
.rot-shop-sidebar .wc-block-product-filter-price-slider__range{ flex:0 0 100%; }
.rot-shop-sidebar .wc-block-product-filter-price-slider__left,
.rot-shop-sidebar .wc-block-product-filter-price-slider__right{ flex:1 1 0; min-width:0; }
.rot-shop-sidebar .wc-block-product-filter-price-slider__content input[type="text"]{ width:100%; max-width:100%; min-width:0; }
.rot-shop-sidebar .wc-block-components-checkbox__label,
.rot-shop-sidebar label{ font-size:14px; }
.rot-shop-sidebar input[type=range]::-webkit-slider-thumb,
.rot-shop-sidebar .wc-block-components-price-slider__range-input-progress{ accent-color:var(--accent); }
.rot-shop-sidebar .wc-block-components-price-slider__range-text{ font-family:var(--disp); }
@media (max-width:840px){
  .rot-shop-layout{ flex-direction:column; }
  .rot-shop-sidebar, .rot-shop-main{ flex-basis:100% !important; position:static; }
}

/* ---- single product page ---- */
/* no 24px flow gap between wp-site-blocks children (tightens the product page top) */
.wp-site-blocks > *{ margin-block-start:0 !important; }
.rot-product{ padding-top:12px !important; padding-bottom:0 !important; }
.woocommerce .woocommerce-breadcrumb, .rot-breadcrumb{ font-size:13px !important; }
.rot-breadcrumb{ color:var(--mute); }
.rot-breadcrumb a{ color:var(--mute); }
.rot-breadcrumb a:hover{ color:var(--accent-deep); }
.rot-product-top{ align-items:flex-start; margin-block-start:10px !important; gap:24px !important; }
.rot-product-tabs{ margin-block-start:16px !important; }
/* breadcrumb: equal breathing room top and bottom, matching the product page */
.rot-breadcrumb{ margin-block-start:12px !important; margin-block-end:12px !important; }
.rot-product-gallery img:not(.zoomImg){ border-radius:12px; opacity:1 !important; mix-blend-mode:normal !important; filter:none !important;
  width:100% !important; height:auto !important; aspect-ratio:1 !important; object-fit:contain !important; max-height:600px; }
.rot-product-gallery .wc-block-components-product-image-gallery{ opacity:1 !important; }
.rot-product-gallery .wc-block-components-product-image-gallery{ position:sticky; top:20px; }
.woocommerce .wp-block-woocommerce-product-image-gallery{ max-width:none !important; }
/* classic (flexslider) gallery: a square frame so flexslider can't set a runaway viewport height */
.rot-product-gallery .woocommerce-product-gallery__image{ aspect-ratio:1; }
.rot-product-gallery .flex-viewport{ max-height:600px !important; }
.rot-product-gallery .woocommerce-product-gallery{ max-width:600px; }
/* accepted payments row (under the product summary) */
.rot-payments{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.rot-payments-label{ display:block; font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--mute); margin-bottom:10px; }
.rot-payments-cards{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.rot-pay-card{ display:inline-flex; width:46px; height:30px; border:1px solid var(--line); border-radius:5px; overflow:hidden; background:#fff; }
.rot-pay-card svg{ width:100%; height:100%; display:block; }
/* curated specs table ("Additional information") */
.rot-specs{ margin-top:8px; }
.rot-specs-title{ font-size:22px; margin:0 0 14px; }
.rot-specs-table{ width:100%; max-width:640px; border-collapse:collapse; font-size:14px; }
.rot-specs-table th, .rot-specs-table td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.rot-specs-table th{ color:var(--mute); font-weight:600; width:34%; white-space:nowrap; }
.rot-product-info .wp-block-woocommerce-product-brand{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--mute); font-size:11px; }
.rot-product-info h1{ margin:.35em 0 .2em; letter-spacing:-.02em; font-size:2em !important; }
.rot-product-info .wp-block-woocommerce-product-price,
.rot-product-info .wc-block-components-product-price{ font-family:var(--disp); font-weight:700; }
.rot-product-info .wc-block-components-product-price ins{ text-decoration:none; color:var(--accent-deep); }
.rot-product-info .wc-block-components-product-price del{ color:var(--mute); font-size:.62em; }
.rot-product-info .wp-block-post-excerpt{ line-height:1.7; }
.rot-product-info .wp-block-post-excerpt__excerpt{ color:#000 !important; }

/* tabs: clean horizontal, accent underline on the active tab */
.rot-product-tabs .wc-tabs, .rot-product-tabs ul.tabs{
  display:flex; gap:8px; list-style:none; margin:0 0 24px; padding:0 0 0 5px; }
.rot-product-tabs .wc-tabs li, .rot-product-tabs ul.tabs li{ margin:0; }
.rot-product-tabs .wc-tabs li a, .rot-product-tabs ul.tabs li a{
  display:block; padding:12px 20px; font-family:var(--disp); font-weight:600; font-size:15px;
  color:var(--mute); border-bottom:3px solid transparent; margin-bottom:-1.5px; }
.rot-product-tabs .wc-tabs li.active a, .rot-product-tabs ul.tabs li.active a{
  color:var(--ink); border-bottom-color:var(--accent); }
.rot-product-tabs .woocommerce-Tabs-panel h2{ font-size:22px; margin:0 0 14px; }
.rot-product-tabs .woocommerce-Tabs-panel{ max-width:none; line-height:1.75; color:var(--ink); }
.rot-product-tabs table.shop_attributes{ width:100%; border-collapse:collapse; font-size:14px; }
.rot-product-tabs table.shop_attributes th, .rot-product-tabs table.shop_attributes td{
  padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }
.rot-product-tabs table.shop_attributes th{ color:var(--mute); font-weight:600; width:30%; }
@media (max-width:840px){
  .rot-product-top{ flex-direction:column; }
  .rot-product-gallery, .rot-product-info{ flex-basis:100% !important; }
}

/* ---- footer ---- */
.rot-footer{ background:var(--ink); color:#B9C7C6; }
.rot-footer a{ color:#B9C7C6; }
.rot-footer a:hover{ color:#fff; }
.rot-footer h4, .rot-footer .rot-mono{ color:var(--accent); }
.rot-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
@media (max-width:781px){ .rot-footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---- section rhythm ---- */
.rot-section{ padding:64px 0; }

@media (max-width:900px){
  .rot-hero-in{ min-height:460px; }
  .rot-hero-scrim{ background:linear-gradient(90deg, rgba(9,14,13,.9) 0%, rgba(9,14,13,.72) 55%, rgba(9,14,13,.5) 100%); }
  .rot-trust-in{ grid-template-columns:1fr 1fr; }
  .rot-tiles{ grid-template-columns:1fr 1fr; }
}

/* ================= mobile polish ================= */
@media (max-width:781px){
  /* --- burger overlay menu: accordion, no shadow, bigger, organised --- */
  .rot-nav-mobile .wp-block-navigation__container{ font-size:19px; row-gap:0; align-items:stretch; }
  .rot-nav-mobile .wp-block-navigation__container > .wp-block-navigation-item{ width:100%; border-bottom:1px solid var(--line); }
  .rot-nav-mobile .wp-block-navigation-item__content{ font-family:var(--disp); font-weight:600; color:var(--ink) !important; padding:15px 2px; }
  .rot-nav-mobile .wp-block-navigation__submenu-container{
    position:static !important; box-shadow:none !important; border:0 !important; border-radius:0 !important;
    background:transparent !important; min-width:0 !important; padding:0 0 10px 16px !important; }
  .rot-nav-mobile .wp-block-navigation__submenu-container .wp-block-navigation-item{ border:0; }
  .rot-nav-mobile .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    font-size:16px; font-weight:400; color:var(--mute) !important; padding:9px 2px; }
  .rot-nav-mobile .wp-block-navigation__submenu-icon{ padding:14px; }
  .rot-nav-mobile .rot-account-item{ border-bottom:0 !important; margin-top:16px; }
  .rot-nav-mobile .rot-account-item .wp-block-navigation-item__content{
    display:block; border:1.5px solid var(--accent); border-radius:10px;
    padding:16px 30px !important; font-size:18px; text-align:center; color:var(--ink) !important; }

  /* --- homepage trust: titles only, bullets, 2 per row, no borders --- */
  .rot-trust-in{ grid-template-columns:1fr 1fr; }
  .rot-trust .item{ border:0 !important; padding:12px 14px; flex-direction:row; align-items:center; gap:8px; }
  .rot-trust .item span{ display:none; }
  .rot-trust .item b::before{ content:"\2022"; color:rgba(255,255,255,.6); margin-right:8px; }

  /* --- category tiles: bigger images, tighter gaps --- */
  .rot-tiles{ grid-template-columns:1fr 1fr; gap:10px; }
  .rot-tile .rot-tile-img{ padding:12px; aspect-ratio:1; }

  /* --- product sections: off the edges + 2 products per row --- */
  .rot-section.rot-products{ padding-left:16px !important; padding-right:16px !important; }
  .rot-products .wc-block-product{ width:calc(50% - 8px) !important; }

  /* --- brand grid: 3 per row --- */
  .rot-brand-grid{ grid-template-columns:repeat(3,1fr); }
}