/*
Theme Name: Elite Container Hub
Theme URI: https://elitecontainerhub.com
Author: Elite Eco World Sp. z o.o.
Author URI: https://elitecontainerhub.com
Description: Custom theme for Elite Container Hub — shipping container sales, rental and modification. Built for WooCommerce, editable with the native WordPress block editor.
Version: 1.1.4
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: ech
Tags: e-commerce, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, threaded-comments, translation-ready, woocommerce

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/* ==========================================================================
   ELITE CONTAINER HUB — design system
   Palette pulled from the client logo:
     --navy      #0A2240  (hull navy — dark base)
     --navy-2    #0F2D52  (lighter navy panel)
     --orange    #E67323  (corten orange — primary accent)
     --orange-2  #C7591A  (deep orange — hover/pressed)
     --steel     #6E7A85  (steel grey container)
     --steel-lt  #B8C0C8
     --blue      #2C6187  (blue container accent, used sparingly)
     --paper     #F3F1EC  (warm off-white background)
     --ink       #16202B  (body text)
   Type:
     Display  — "Oswald" (condensed, stencilled, reads like container
                 door lettering — used for headings, size codes, labels)
     Body     — "Work Sans" (clean, technical, legible at small sizes)
     Mono     — "JetBrains Mono" (container serial / spec-plate data)
   Signature element: the "ID plate" — a bolted corten placard used for
   category tags, size codes and spec rows throughout the site.
   ========================================================================== */

/* System font stacks only — no external font requests, so type never
   falls back to a broken/default look on slow connections, ad-blockers,
   or restrictive network policies. Condensed system fonts (Arial Narrow /
   Liberation Sans Narrow) stand in for the display face; the uppercase +
   letter-spacing treatment keeps the stencilled feel. */
:root{
  --font-display: 'Arial Narrow','Liberation Sans Narrow','Helvetica Neue',Arial,sans-serif;
  --font-body: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
}
:root{
  --navy:#0A2240;
  --navy-2:#0F2D52;
  --navy-3:#132C4C;
  --orange:#E67323;
  --orange-2:#C7591A;
  --steel:#6E7A85;
  --steel-lt:#B8C0C8;
  --blue:#2C6187;
  --paper:#F3F1EC;
  --paper-2:#0A2240;
  --ink:#16202B;
  --ink-soft:#9FACB8;
  --white:#FFFFFF;
  --line: rgba(255,255,255,0.12);
  --line-dark: rgba(255,255,255,0.14);
  --radius: 2px;
  --shadow: 0 10px 30px -12px rgba(10,34,64,0.35);
  --container-w: 1240px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--navy);
  color:var(--steel-lt);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin:0 0 .5em;
  color:var(--white);
}
p{margin:0 0 1em;}
.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 28px;
}
.mono{font-family:var(--font-mono);}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* Corrugated steel texture strip — used behind section transitions */
.corrugation{
  height:14px;
  background:repeating-linear-gradient(90deg, var(--steel) 0 4px, #5c6771 4px 8px);
  opacity:.9;
}
.corrugation.orange{
  background:repeating-linear-gradient(90deg, var(--orange) 0 4px, var(--orange-2) 4px 8px);
}

/* ==========================================================================
   Focus visibility
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:2px;
}

/* ==========================================================================
   Top utility bar
   ========================================================================== */
.topbar{
  background:var(--navy);
  color:var(--steel-lt);
  font-size:.82rem;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
  flex-wrap:wrap;
  gap:8px;
}
.topbar a{color:var(--paper);}
.topbar a:hover{color:var(--orange);}
.topbar .tb-left span{margin-right:22px;}
.topbar .tb-left span:last-child{margin-right:0;}
.topbar .tb-right{display:flex;align-items:center;gap:20px;}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
header.site-header{
  background:var(--navy-2);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:60;
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:56px;width:auto;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text b{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.03em;color:var(--white);}
.brand-text small{font-size:.68rem;letter-spacing:.14em;color:var(--orange);text-transform:uppercase;}

nav.primary-nav{display:flex;align-items:center;gap:2px;}
nav.primary-nav > ul{display:flex;align-items:center;gap:2px;}
nav.primary-nav a.nav-link{
  display:block;
  padding:10px 16px;
  font-family:var(--font-display);
  font-size:.86rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--steel-lt);
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
nav.primary-nav a.nav-link:hover,
nav.primary-nav a.nav-link.active{
  color:var(--orange);
  border-bottom-color:var(--orange);
}
.nav-cta{
  font-family:var(--font-display);
  font-size:.82rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:var(--orange);
  color:var(--white) !important;
  padding:11px 20px;
  border-radius:var(--radius);
  border-bottom:none !important;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--orange-2);color:var(--white);}
.nav-phone{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.85rem;color:var(--steel-lt);
  white-space:nowrap;
}
.nav-phone svg{flex:none;}

.menu-toggle{display:none;background:none;border:2px solid var(--navy);border-radius:var(--radius);padding:8px 10px;cursor:pointer;}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--navy);margin:4px 0;}

@media (max-width: 980px){
  .nav-phone{display:none;}
  nav.primary-nav{
    position:fixed;inset:0 0 0 auto;width:280px;height:100vh;
    background:var(--navy);
    flex-direction:column;align-items:stretch;
    transform:translateX(100%);
    transition:transform .25s ease;
    padding:90px 0 24px;
    z-index:70;
  }
  nav.primary-nav.open{transform:translateX(0);}
  nav.primary-nav > ul{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  nav.primary-nav a.nav-link{color:var(--paper);padding:16px 28px;border-bottom:1px solid var(--line-dark);}
  nav.primary-nav a.nav-link:hover,nav.primary-nav a.nav-link.active{background:var(--navy-2);border-bottom-color:var(--line-dark);}
  .nav-cta{margin:20px 28px 0;text-align:center;}
  .menu-toggle{display:block;}
  .nav-scrim{display:none;position:fixed;inset:0;background:rgba(10,34,64,.5);z-index:65;}
  .nav-scrim.open{display:block;}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:.86rem;letter-spacing:.05em;text-transform:uppercase;
  padding:14px 26px;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--orange);color:var(--white);}
.btn-primary:hover{background:var(--orange-2);}
.btn-outline{background:transparent;border-color:var(--white);color:var(--white);}
.btn-outline:hover{background:var(--white);color:var(--navy);}
.btn-outline-dark{background:transparent;border-color:var(--steel-lt);color:var(--white);}
.btn-outline-dark:hover{background:var(--white);color:var(--navy);}
.btn-block{width:100%;justify-content:center;}

/* ==========================================================================
   ID PLATE — signature element (bolted corten placard)
   Used for size codes, category tags, spec rows
   ========================================================================== */
.id-plate{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--navy);
  color:var(--paper);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.06em;
  padding:6px 12px 6px 16px;
  border-radius:1px;
}
.id-plate::before,
.id-plate::after{
  content:'';
  position:absolute;
  top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--steel-lt);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.5);
}
.id-plate::before{left:5px;}
.id-plate::after{right:5px;}
.id-plate.orange{background:var(--orange);}
.id-plate.ghost{background:transparent;border:1px solid var(--line);color:var(--steel-lt);}

/* ==========================================================================
   Eyebrow label
   ========================================================================== */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin-bottom:14px;
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--orange);}
.eyebrow.on-dark{color:#F2A768;}

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero{
  position:relative;
  background:var(--navy);
  color:var(--white);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  align-items:center;
  min-height:640px;
}
.hero-copy{padding:64px 0 64px 0;position:relative;z-index:2;}
.hero-copy h1{
  color:var(--white);
  font-size:clamp(2.3rem, 4.2vw, 3.4rem);
  line-height:1.05;
  margin-bottom:22px;
}
.hero-copy h1 em{font-style:normal;color:var(--orange);}
.hero-copy p.lead{font-size:1.08rem;color:var(--steel-lt);max-width:480px;margin-bottom:32px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px;}
.hero-stats{display:flex;gap:0;border-top:1px solid var(--line-dark);padding-top:24px;flex-wrap:wrap;}
.hero-stats div{padding-right:32px;margin-right:32px;border-right:1px solid var(--line-dark);}
.hero-stats div:last-child{border-right:none;margin-right:0;}
.hero-stats b{display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--orange);}
.hero-stats span{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-lt);}

.hero-media{
  position:relative;
  height:100%;
  min-height:640px;
}
.hero-media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.hero-media::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg, var(--navy) 0%, rgba(10,34,64,0) 26%);
}
.hero-slide-caption{
  position:absolute;left:28px;bottom:28px;z-index:3;
}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{min-height:280px;order:-1;}
  .hero-copy{padding:40px 0;}
}

/* Slider dots (home hero rotates copy taglines, art is static brand asset) */
.hero-dots{display:flex;gap:8px;margin-top:26px;}
.hero-dots button{width:26px;height:3px;background:var(--line-dark);border:none;cursor:pointer;padding:0;}
.hero-dots button.active{background:var(--orange);}

/* ==========================================================================
   Section basics
   ========================================================================== */
section{padding:88px 0;}
section.tight{padding:64px 0;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:44px;flex-wrap:wrap;
}
.section-head h2{font-size:clamp(1.7rem,2.6vw,2.3rem);margin-bottom:10px;}
.section-head p{color:var(--ink-soft);max-width:520px;margin:0;}
.bg-navy{background:var(--navy);color:var(--white);}
.bg-navy h2, .bg-navy h3, .bg-navy h4{color:var(--white);}
.bg-navy .section-head p{color:var(--steel-lt);}
.bg-paper-2{background:var(--paper-2);}

/* ==========================================================================
   Offer / feature cards (industrial door panel look)
   ========================================================================== */
.grid{display:grid;gap:24px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.panel-card{
  background:var(--navy-2);
  border:1px solid var(--line);
  border-top:4px solid var(--steel);
  padding:28px 24px;
  border-radius:var(--radius);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.panel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-top-color:var(--orange);}
.panel-card .icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:var(--orange);
  margin-bottom:18px;border-radius:var(--radius);
}
.panel-card h3{font-size:1.05rem;margin-bottom:8px;}
.panel-card p{color:var(--ink-soft);font-size:.94rem;margin-bottom:0;}

/* ==========================================================================
   Category cards — corrugated "door" panel, used on home + catalog
   ========================================================================== */
.cat-card{
  position:relative;
  display:block;
  background:var(--navy);
  color:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  min-height:260px;
  isolation:isolate;
}
.cat-card::before{
  content:'';
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 26px);
  z-index:1;
}
.cat-card::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,34,64,0.15) 0%, rgba(10,34,64,0.92) 78%);
  z-index:1;
}
.cat-card-icon{
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--steel);
  background:linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
  transition:transform .4s ease, color .3s ease;
}
.cat-card-icon svg{width:64%;height:64%;opacity:.9;}
.cat-card:hover .cat-card-icon{transform:scale(1.06);color:var(--orange);}

/* Compact variant — used for the shop-page category showcase (a lighter
   strip below the page header, not a full repeat of the homepage grid). */
/* Category pills — shown inside the shop/category page-header banner
   (see ech_shop_category_pills in functions.php). */
.shop-cat-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.cat-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;border-radius:30px;
  background:var(--navy-2);border:1px solid var(--line-dark);
  color:var(--steel-lt);font-family:var(--font-display);font-size:.85rem;
  letter-spacing:.02em;white-space:nowrap;
}
.cat-pill:hover{border-color:var(--orange);color:var(--white);}
.cat-pill.active{background:var(--orange);border-color:var(--orange);color:var(--white);}
.cat-pill-count{
  font-family:var(--font-mono);font-size:.72rem;opacity:.75;
}
.cat-pill.active .cat-pill-count{opacity:.9;}

.cat-card-body{
  position:relative;z-index:2;
  height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px;
  min-height:260px;
}
.cat-card h3{color:var(--white);font-size:1.15rem;margin-bottom:6px;}
.cat-card p{color:var(--steel-lt);font-size:.86rem;margin-bottom:14px;}
.cat-card .id-plate{align-self:flex-start;margin-bottom:12px;}
.cat-card .cat-link{
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--orange);display:inline-flex;align-items:center;gap:6px;
}

/* ==========================================================================
   Stats strip
   ========================================================================== */
.stats-strip{
  background:var(--navy-2);
  color:var(--white);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.stats-strip .grid{padding:40px 0;}
.stat b{font-family:var(--font-display);font-size:2.2rem;color:var(--orange);display:block;}
.stat span{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--steel-lt);}

/* ==========================================================================
   Product cards
   ========================================================================== */
.product-card{
  background:var(--navy-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow .15s ease, transform .15s ease;
}
.product-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.product-media{
  position:relative;
  aspect-ratio:4/3;
  background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.product-media .id-plate{position:absolute;top:12px;left:12px;z-index:2;}
.product-media svg{width:58%;height:58%;color:var(--steel);opacity:.85;transition:color .2s ease;}
.product-card:hover .product-media svg{color:var(--orange);}
.product-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.product-cat{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);}
.product-card h3{font-size:1.02rem;margin-bottom:2px;}
.product-specs{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 10px;}
.product-specs span{
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);
  background:var(--paper-2);padding:3px 8px;border-radius:1px;
}
.product-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
}
.product-price{font-family:var(--font-display);font-size:1.15rem;color:var(--white);}
.product-price small{font-family:var(--font-body);font-size:.7rem;color:var(--ink-soft);text-transform:none;letter-spacing:0;display:block;}
.product-cta{
  font-family:var(--font-display);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--white);background:var(--navy);padding:9px 14px;border-radius:var(--radius);
}
.product-cta:hover{background:var(--orange);}

/* ==========================================================================
   Catalog layout (products page)
   ========================================================================== */
.catalog-layout{
  display:grid;
  grid-template-columns:var(--shop-sidebar-width, 260px) 1fr;
  gap:32px;align-items:start;
}
.catalog-main{min-width:0;order:2;}
/* The sidebar renders AFTER the product grid in the HTML (WooCommerce's
   hook order forces this — see ech_wc_wrapper_start/end in functions.php),
   but visually it needs to appear first/left. CSS Grid's `order` handles
   that without needing to fight WooCommerce's hook sequence. */
.catalog-layout > .cat-nav{order:1;}
@media (max-width:900px){.catalog-layout{grid-template-columns:1fr;}}

/* Mobile filter toggle — sidebar starts collapsed below 900px and
   expands inline above the product grid when tapped, rather than
   overlaying the products or dumping every filter open by default. */
.filter-toggle-btn{display:none;}
@media (max-width:900px){
  .filter-toggle-btn{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:14px 18px;margin-bottom:14px;
    background:var(--navy-2);border:1px solid var(--line-dark);border-radius:var(--radius);
    color:var(--white);font-family:var(--font-display);font-size:.85rem;
    letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
    order:1;
  }
  .filter-toggle-icon{transition:transform .2s ease;font-size:.8rem;color:var(--orange);}
  .filter-toggle-btn[aria-expanded="true"] .filter-toggle-icon{transform:rotate(180deg);}
  .catalog-layout .cat-nav{
    display:none;
    position:static;
    order:2;
    margin-bottom:20px;
    max-width:100%;
  }
  .catalog-layout .cat-nav.open{display:block;}
  .catalog-main{order:3;}
}

/* Wide-content layout for forms with a narrow supporting rail (quote page) */
.form-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;}
@media (max-width:900px){.form-layout{grid-template-columns:1fr;}}

/* Balanced two-column layout (contact page: info block + form) */
.contact-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start;}
@media (max-width:900px){.contact-layout{grid-template-columns:1fr;}}

.cat-nav{
  background:var(--navy-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:6px;
  position:sticky;top:96px;
  overflow:hidden;
  max-width:100%;
  box-sizing:border-box;
}
.cat-nav-title{
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-lt);padding:14px 14px 8px;
}
.cat-nav a{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 14px;font-size:.92rem;color:var(--steel-lt);
  border-left:3px solid transparent;border-radius:0;
}
.cat-nav a:hover{background:var(--navy);color:var(--white);}
.cat-nav a.active{border-left-color:var(--orange);background:var(--navy);color:var(--white);font-weight:600;}
.cat-nav a small{font-family:var(--font-mono);color:var(--steel);font-weight:400;}
.cat-nav .sub-list{padding-left:8px;}
.cat-nav .sub-list a{font-size:.85rem;padding:8px 14px 8px 22px;color:var(--ink-soft);}
.cat-nav hr{border:none;border-top:1px solid var(--line);margin:6px 10px;}

/* ==========================================================================
   Shop sidebar filter widgets — Product Categories + Filter Products by
   Attribute (Size, Condition), added via Appearance > Widgets > Shop
   Sidebar. Styled to match the .cat-nav look already used elsewhere.
   ========================================================================== */
.cat-nav .widget{padding:8px 0;border-bottom:1px solid var(--line-dark);margin-bottom:4px;}
.cat-nav .widget:last-child{border-bottom:none;margin-bottom:0;}
.cat-nav .widget ul{margin:0;padding:0;list-style:none;}
.cat-nav .widget ul li{margin:0;}
.cat-nav .widget ul li a{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:9px 14px;font-size:.88rem;color:var(--steel-lt);
  border-left:3px solid transparent;
}
.cat-nav .widget ul li a:hover{background:var(--navy);color:var(--white);}
.cat-nav .widget ul li.chosen a,
.cat-nav .widget ul li.current-cat > a{
  border-left-color:var(--orange);background:var(--navy);color:var(--white);font-weight:600;
}
.cat-nav .widget ul li .count{
  font-family:var(--font-mono);font-size:.7rem;color:var(--steel);flex:none;
}
.cat-nav .widget ul.children{padding-left:14px;}

/* "Active filters" pills — appear once a Size/Condition filter is applied,
   with a link to clear it. */
.cat-nav .widget_layered_nav_filters ul{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 4px;}
.cat-nav .widget_layered_nav_filters ul li{background:var(--orange);border-radius:20px;}
.cat-nav .widget_layered_nav_filters ul li a{
  padding:5px 12px;font-size:.72rem;color:var(--white);
  display:flex;align-items:center;gap:4px;
}

/* Dropdown-style attribute filter, if that display type is chosen instead of List */
.cat-nav .widget select{
  width:100%;margin:8px 14px;padding:10px 12px;
  background:var(--navy);border:1px solid var(--line-dark);border-radius:var(--radius);
  color:var(--white);font-family:var(--font-body);font-size:.88rem;
}

/* Price Filter widget (jQuery UI slider) — was completely unstyled and
   overflowing its column, which is what broke the whole sidebar layout.
   Constrained to the sidebar width and restyled to match the theme. */
.cat-nav .widget_price_filter{padding:6px 14px 14px;box-sizing:border-box;}
.cat-nav .widget_price_filter .price_slider{margin-bottom:16px;max-width:100%;}
.cat-nav .widget_price_filter .price_slider_wrapper{max-width:100%;}
.cat-nav .widget_price_filter .ui-slider{
  position:relative;height:4px;background:var(--line-dark);border-radius:4px;
  margin:22px 6px 16px;max-width:calc(100% - 12px);
}
.cat-nav .widget_price_filter .ui-slider-range{
  position:absolute;height:100%;background:var(--orange);border-radius:4px;
}
.cat-nav .widget_price_filter .ui-slider-handle{
  position:absolute;top:50%;
  width:16px;height:16px;margin-left:-8px;
  background:var(--white);border:2px solid var(--orange);border-radius:50%;
  transform:translateY(-50%);cursor:pointer;outline:none;box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.cat-nav .widget_price_filter .price_slider_amount{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
}
.cat-nav .widget_price_filter .price_slider_amount .button{
  order:3;width:100%;margin-top:10px;
  font-family:var(--font-display);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--orange);color:var(--white);border:none;border-radius:var(--radius);
  padding:10px;text-align:center;
}
.cat-nav .widget_price_filter .price_slider_amount .price_label{
  font-family:var(--font-mono);font-size:.78rem;color:var(--steel-lt);
  background:var(--navy);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:6px 10px;
}
.cat-nav .widget_price_filter .price_slider_amount .price_label span{color:var(--white);}

/* ==========================================================================
   Filter widget variants — classified by assets/main.js based on widget
   title text (see that file). Size renders as multi-select pill buttons;
   Condition and Category render as a checkbox-style list with counts.
   ========================================================================== */

/* Size — pill buttons, multiple per line to save sidebar space */
.cat-nav .widget.filter-pills ul{
  display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 14px;
}
.cat-nav .widget.filter-pills ul li{margin:0;}
.cat-nav .widget.filter-pills ul li a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;border-radius:16px;
  border:1px solid var(--line-dark);background:var(--navy);
  color:var(--steel-lt);font-family:var(--font-display);font-size:.7rem;
  letter-spacing:.02em;text-transform:uppercase;
  white-space:nowrap;
}
.cat-nav .widget.filter-pills ul li a .count{display:none;} /* cleaner as pure pills, no counts */
.cat-nav .widget.filter-pills ul li a:hover{border-color:var(--orange);color:var(--white);}
.cat-nav .widget.filter-pills ul li.chosen a{
  background:var(--orange);border-color:var(--orange);color:var(--white);
}

/* Condition / Category — checkbox-style list with real checkmarks (these
   widgets output <a> links, not real <input type="checkbox">, so the
   "checked" box is drawn with pseudo-elements and toggled via the
   .chosen class WooCommerce adds to the active term's <li>). */
.cat-nav .widget.filter-checklist ul{padding:4px 0;}
.cat-nav .widget.filter-checklist ul li a{
  position:relative;
  padding:9px 14px 9px 40px;
  font-size:.88rem;color:var(--steel-lt);
}
.cat-nav .widget.filter-checklist ul li a::before{
  content:'';
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:3px;
  border:1.5px solid var(--line-dark);background:var(--navy);
}
.cat-nav .widget.filter-checklist ul li a::after{
  content:'';
  position:absolute;left:18.5px;top:47%;
  width:5px;height:9px;
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
  transform:translateY(-60%) rotate(45deg) scale(0);
  transition:transform .1s ease;
}
.cat-nav .widget.filter-checklist ul li a:hover::before{border-color:var(--orange);}
.cat-nav .widget.filter-checklist ul li.chosen a::before{background:var(--orange);border-color:var(--orange);}
.cat-nav .widget.filter-checklist ul li.chosen a::after{transform:translateY(-60%) rotate(45deg) scale(1);}
.cat-nav .widget.filter-checklist ul li.chosen a{color:var(--white);font-weight:600;}
.cat-nav .widget.filter-checklist ul li a .count{
  font-family:var(--font-mono);font-size:.72rem;color:var(--steel);
}
/* Nested subcategories (Product Categories widget) get slightly deeper indent */
.cat-nav .widget.filter-checklist ul.children li a{padding-left:56px;}
.cat-nav .widget.filter-checklist ul.children li a::before{left:30px;}
.cat-nav .widget.filter-checklist ul.children li a::after{left:34.5px;}

.catalog-group{margin-bottom:56px;scroll-margin-top:100px;}
.catalog-group-head{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--orange);padding-bottom:10px;margin-bottom:22px;flex-wrap:wrap;gap:10px;
}
.catalog-group-head h2{margin-bottom:0;font-size:1.5rem;}
.catalog-group-head p{margin:0;color:var(--ink-soft);font-size:.9rem;}
.catalog-subgroup h3{
  font-size:.95rem;color:var(--steel);letter-spacing:.06em;
  border-left:3px solid var(--orange);padding-left:10px;margin:26px 0 16px;
}

/* ==========================================================================
   Testimonial / trust
   ========================================================================== */
.quote-card{
  background:var(--navy-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;position:relative;
}
.quote-card .stars{color:var(--orange);letter-spacing:2px;margin-bottom:12px;}
.quote-card p.quote{font-size:1rem;color:var(--ink);margin-bottom:18px;}
.quote-card .who{font-family:var(--font-display);font-size:.85rem;letter-spacing:.03em;color:var(--white);}
.quote-card .who span{display:block;font-family:var(--font-body);font-size:.78rem;color:var(--ink-soft);font-weight:400;}

/* ==========================================================================
   Certification strip
   ========================================================================== */
.cert-strip{display:flex;flex-wrap:wrap;gap:14px;}
.cert-badge{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line-dark);padding:12px 18px;border-radius:var(--radius);
  font-family:var(--font-display);font-size:.82rem;letter-spacing:.04em;color:var(--white);
}
.cert-badge b{color:var(--orange);}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background:var(--orange);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 26px);
}
.cta-band .container{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:52px 28px;}
.cta-band h2{color:var(--white);margin-bottom:8px;font-size:1.8rem;}
.cta-band p{color:rgba(255,255,255,.85);margin:0;}
.cta-band .btn-outline{border-color:var(--white);}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer{background:var(--navy-2);border-top:1px solid var(--line-dark);color:var(--steel-lt);padding-top:64px;}
.footer-top{display:grid;grid-template-columns:1.3fr 0.85fr 0.85fr 0.95fr 1.1fr;gap:32px;padding-bottom:48px;border-bottom:1px solid var(--line-dark);}
@media (max-width:1100px){.footer-top{grid-template-columns:1fr 1fr 1fr;}}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}
.footer-brand img{height:48px;margin-bottom:16px;}
.footer-brand p{font-size:.9rem;color:var(--steel-lt);max-width:280px;}
.footer-brand-contact{margin-top:14px;line-height:1.6;}
.footer-brand-contact a:hover{color:var(--orange);}
footer h4{color:var(--white);font-size:.85rem;letter-spacing:.06em;margin-bottom:18px;}
footer ul li{margin-bottom:10px;font-size:.9rem;}
footer ul li a:hover{color:var(--orange);}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;}
.footer-contact svg{flex:none;margin-top:2px;color:var(--orange);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding:22px 0;font-size:.8rem;color:var(--steel-lt);
}
.footer-bottom a:hover{color:var(--orange);}
.social-row{display:flex;gap:10px;}
.social-row a{
  width:34px;height:34px;border:1px solid var(--line-dark);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.social-row a:hover{border-color:var(--orange);color:var(--orange);}

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */
.page-header{
  background:var(--navy);border-bottom:1px solid var(--line-dark);
  color:var(--white);
  padding:56px 0 48px;
  position:relative;
  overflow:hidden;
}
.page-header::after{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 3px, transparent 3px 26px);
}
.page-header .container{position:relative;z-index:1;}
.breadcrumb{font-family:var(--font-mono);font-size:.78rem;color:var(--steel-lt);margin-bottom:14px;}
.breadcrumb a:hover{color:var(--orange);}
.page-header h1{color:var(--white);margin-bottom:10px;font-size:clamp(1.9rem,3.4vw,2.6rem);}
.page-header p{color:var(--steel-lt);max-width:600px;margin:0;}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card{background:var(--navy-2);border:1px solid var(--line);border-radius:var(--radius);padding:32px;}

/* Light-blue variant for the Contact page form specifically — a
   deliberate light accent against the rest of the dark theme, to make
   the form the visual focal point of the page. */
.form-card--contact{
  background:#E4EFFB;border-color:#C7DCF2;
}
.form-card--contact .form-card-heading{
  color:var(--navy);font-family:var(--font-display);text-transform:uppercase;
  font-size:1.4rem;margin-bottom:8px;
}
.form-card--contact .form-card-intro{
  color:#3C5978;font-size:.95rem;margin-bottom:26px;
}
.form-card--contact .field label{color:var(--navy);}
.form-card--contact .field input,
.form-card--contact .field select,
.form-card--contact .field textarea{
  background:var(--white);color:var(--navy);border-color:#C7DCF2;
}
.form-card--contact .field input:focus,
.form-card--contact .field select:focus,
.form-card--contact .field textarea:focus{
  background:var(--white);border-color:var(--orange);
}
.form-card--contact .field-note{color:#5A7CA0;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}
.field label{
  display:block;font-family:var(--font-display);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel-lt);margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--font-body);font-size:.95rem;background:var(--navy);color:var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--orange);background:var(--navy-2);
}
.field textarea{resize:vertical;min-height:110px;}
.field-note{font-size:.78rem;color:var(--ink-soft);margin-top:6px;}
.form-success{
  display:none;
  background:#EAF4EC;border:1px solid #BFE0C6;color:#1E5C2C;
  padding:16px 18px;border-radius:var(--radius);margin-bottom:20px;font-size:.92rem;
}
.form-success.show{display:block;}
.form-error{
  background:#FBEAEA;border:1px solid #E0BFBF;color:#7A1E1E;
  padding:16px 18px;border-radius:var(--radius);margin-bottom:20px;font-size:.92rem;
}

/* ==========================================================================
   About page bits
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px;}}
.timeline{border-left:2px solid var(--line);padding-left:24px;}
.timeline .t-item{position:relative;padding-bottom:32px;}
.timeline .t-item:last-child{padding-bottom:0;}
.timeline .t-item::before{
  content:'';position:absolute;left:-31px;top:2px;width:12px;height:12px;border-radius:50%;
  background:var(--orange);border:3px solid var(--navy);
}
.timeline b{font-family:var(--font-mono);color:var(--orange);display:block;margin-bottom:4px;}

.value-list li{display:flex;gap:14px;margin-bottom:20px;align-items:flex-start;}
.value-list .num{
  font-family:var(--font-mono);font-weight:700;color:var(--orange);
  border:1px solid var(--line);border-radius:50%;width:34px;height:34px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:.82rem;
}

/* ==========================================================================
   Map
   ========================================================================== */
.map-frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:24px;}
.map-frame iframe{display:block;width:100%;height:760px;border:0;}

/* ==========================================================================
   Contact info cards
   ========================================================================== */
.contact-card{display:flex;gap:16px;align-items:flex-start;}
.contact-card .icon{
  width:46px;height:46px;flex:none;
  background:var(--navy);color:var(--orange);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
}
.contact-card h3{font-size:1rem;margin-bottom:4px;}
.contact-card p{color:var(--ink-soft);margin-bottom:0;font-size:.92rem;}
.contact-card a:hover{color:var(--orange);}

/* ==========================================================================
   Live inventory ticker — scrolling strip of container ID codes
   ========================================================================== */
.ticker-wrap{
  background:var(--navy-2);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  overflow:hidden;
  position:relative;
}
.ticker-label{
  position:absolute;top:0;left:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:8px;
  background:var(--navy-2);
  padding:0 20px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel-lt);
  box-shadow:24px 0 24px -8px var(--navy-2);
}
.ticker-label .dot{width:7px;height:7px;border-radius:50%;background:#4ADE80;animation:pulse-dot 1.6s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.35;}}
.ticker-track{
  display:flex;
  width:max-content;
  animation:ticker-scroll 32s linear infinite;
  padding:16px 0;
}
.ticker-wrap:hover .ticker-track{animation-play-state:paused;}
@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.ticker-item{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.82rem;color:var(--steel-lt);
  padding:0 28px;border-right:1px solid var(--line-dark);white-space:nowrap;
}
.ticker-item b{color:var(--white);font-weight:700;}
.ticker-item .tag{color:var(--orange);font-weight:700;}

/* ==========================================================================
   Trust badge row (hero) — grading + price teaser, mirrors container
   condition plates riveted to a real unit
   ========================================================================== */
.hero-trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:28px;}
.hero-trust .grading{display:flex;gap:8px;}
.hero-trust .price-teaser{
  display:flex;flex-direction:column;line-height:1.2;
  border-left:1px solid var(--line-dark);padding-left:18px;
}
.hero-trust .price-teaser b{font-family:var(--font-display);font-size:1.3rem;color:var(--white);}
.hero-trust .price-teaser span{font-size:.74rem;color:var(--steel-lt);}

/* ==========================================================================
   Numbered offering cards ("What We Offer")
   ========================================================================== */
.offer-card{
  background:var(--navy-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;position:relative;transition:transform .15s ease, box-shadow .15s ease;
}
.offer-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.offer-card .offer-tag{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--orange);margin-bottom:12px;display:block;
}
.offer-card h3{font-size:1rem;margin-bottom:8px;}
.offer-card p{color:var(--ink-soft);font-size:.88rem;margin-bottom:16px;}
.offer-card .offer-foot{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding-top:14px;
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--white);
}
.offer-card .offer-foot .offer-count{font-family:var(--font-mono);color:var(--steel);text-transform:none;letter-spacing:0;}
.offer-card:hover .offer-foot{color:var(--orange);}

/* ==========================================================================
   Product badge pills (Best Seller / New Arrival / Rentable...)
   ========================================================================== */
.badge-row{position:absolute;top:12px;right:12px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.pill{
  font-family:var(--font-display);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:20px;color:var(--white);
}
.pill.best{background:var(--orange);}
.pill.new{background:var(--blue);}
.pill.rent{background:var(--steel);}

/* ==========================================================================
   Why-choose stat callout chip
   ========================================================================== */
.why-stat{
  display:flex;align-items:baseline;gap:8px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-dark);
}
.why-stat b{font-family:var(--font-display);font-size:1.3rem;color:var(--orange);}
.why-stat span{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--steel-lt);}

/* ==========================================================================
   Trust bullet row (under CTA)
   ========================================================================== */
.trust-bullets{display:flex;flex-wrap:wrap;gap:20px;margin-top:18px;}
.trust-bullets span{
  display:flex;align-items:center;gap:7px;font-size:.82rem;color:rgba(255,255,255,.9);
}
.trust-bullets span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--white);}

/* ==========================================================================
   Footer "Get Started" column + business hours
   ========================================================================== */
.footer-cta-box{background:var(--navy-2);border:1px solid var(--line-dark);border-radius:var(--radius);padding:18px;}
.footer-cta-box p{font-size:.85rem;color:var(--steel-lt);margin-bottom:14px;}
.footer-hours{margin-top:20px;}
.footer-hours li{display:flex;justify-content:space-between;font-size:.85rem;color:var(--steel-lt);margin-bottom:8px;}
.footer-hours li b{color:var(--white);font-weight:500;}


/* Utility */
.mt-0{margin-top:0;}
.text-center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}

/* ==========================================================================
   WooCommerce reskin — maps default WooCommerce markup/classes onto the
   site's existing design tokens so core Woo templates (cart, checkout,
   single product, my-account) look native without full template overrides.
   ========================================================================== */

/* Result count + sorting dropdown bar — WooCommerce outputs these as
   plain unstyled <p> and <form> elements by default. Without this they
   stack as full-width blocks with browser-default spacing, which is
   what was showing as an odd empty bar above the product grid. */
.woocommerce-result-count{
  margin:0 0 20px;display:inline-block;
  font-size:.88rem;color:var(--steel-lt);
}
.woocommerce-ordering{
  margin:0 0 20px;float:right;
}
.woocommerce-ordering select{
  padding:9px 34px 9px 14px;
  background:var(--navy-2);border:1px solid var(--line-dark);border-radius:var(--radius);
  color:var(--white);font-family:var(--font-body);font-size:.85rem;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23B8C0C8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.woocommerce-ordering select:focus{outline:none;border-color:var(--orange);}
/* Clear the float so the product grid starts cleanly below this row
   instead of overlapping it or leaving a stray gap. */
.catalog-main::after{content:'';display:table;clear:both;}

.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;margin:0;padding:0;
  clear:both; /* without this, the floated sorting dropdown above squeezes
                 just the first row of the grid, leaving room for only 2
                 columns there while every row after it correctly shows 3 */
}
@media (max-width:980px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.woocommerce ul.products{grid-template-columns:1fr;}}

.woocommerce ul.products li.product{
  background:var(--navy-2);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;padding:0;transition:box-shadow .15s ease, transform .15s ease;
  /* Defensive overrides: WooCommerce's own layout stylesheet sets float/width
     on this element for its default (non-grid) card layout. We dequeue that
     stylesheet in functions.php, but these !important rules are a second
     line of defense in case a caching layer serves an old stylesheet or a
     plugin re-adds it later — without this, cards can shrink to a stale
     float-width and leave gaps inside their grid cell. */
  width:auto !important;float:none !important;margin:0 !important;
  clear:none !important;
  /* Equal-height cards regardless of title length: the grid row already
     stretches every li to match its tallest sibling (CSS Grid default),
     this makes the CARD's own content use that full height so the
     button row can be pinned to the bottom instead of floating wherever
     the (variable-length) title happens to end. */
  display:flex;flex-direction:column;height:100%;
}
.woocommerce ul.products li.product:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.woocommerce ul.products li.product a{text-decoration:none;color:inherit;display:block;}
/* Wraps just the thumbnail + its badges (see the priority-4/15 hooks in
   functions.php) — gives the badges below a positioning box that matches
   the IMAGE exactly, not the whole card (title/price/buttons sit outside
   this wrapper, further down). */
.woocommerce ul.products li.product .product-thumb-wrap{
  position:relative;display:block;
}
.woocommerce ul.products li.product img{
  aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--paper-2);
}

/* Mini image slider on shop-grid cards (see ech_product_thumbnail_slider
   in functions.php) — arrows only render when a product has more than
   one photo; a single-image product just shows the plain thumbnail. */
.woocommerce ul.products li.product .product-image-slider{
  position:relative;display:block;
}
.woocommerce ul.products li.product .product-img-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;
  background:rgba(10,34,64,0.72);border:1px solid var(--line-dark);
  color:var(--white);font-size:.75rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:3;
  opacity:0;transition:opacity .15s ease, background .15s ease;
}
.woocommerce ul.products li.product .product-thumb-wrap:hover .product-img-arrow{opacity:1;}
.woocommerce ul.products li.product .product-img-arrow:hover{background:var(--orange);border-color:var(--orange);}
.woocommerce ul.products li.product .product-img-arrow.prev{left:8px;}
.woocommerce ul.products li.product .product-img-arrow.next{right:8px;}
.woocommerce ul.products li.product .product-img-dots{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:3;
}
.woocommerce ul.products li.product .product-img-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.4);
  transition:background .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product .product-img-dot.active{
  background:var(--orange);transform:scale(1.3);
}

/* Branded "no photo yet" placeholder (see woocommerce_placeholder_img filter
   in functions.php) — styled to match the real product image slot exactly. */
.woocommerce ul.products li.product .wc-placeholder-icon{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;width:100%;background:var(--paper-2);color:var(--steel);
}
.woocommerce ul.products li.product .wc-placeholder-icon svg{width:56%;height:56%;opacity:.85;}
.woocommerce ul.products li.product:hover .wc-placeholder-icon svg{color:var(--orange);}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);font-size:1.02rem;text-transform:none;letter-spacing:0;
  color:var(--white);padding:16px 18px 4px;margin:0;
}
.woocommerce ul.products li.product .price{
  font-family:var(--font-display);font-size:1.1rem;color:var(--white);
  padding:0 18px 16px;display:block;
}
.woocommerce ul.products li.product .price del{color:var(--steel);opacity:.6;font-size:.85em;}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--orange);}

/* Add to Cart + View Details, side by side (see ech_product_card_actions
   in functions.php, which wraps both in this container). */
.woocommerce ul.products li.product .product-card-actions{
  display:flex;gap:8px;margin:auto 18px 18px;
  /* margin-top:auto (shorthand above sets all sides, so this is the one
     that matters) pins this row to the bottom of the card regardless of
     how many lines the title/price above it take up. */
}
.woocommerce ul.products li.product .product-card-actions .button,
.woocommerce ul.products li.product .product-card-actions .view-details-btn{
  flex:1 1 0;min-width:0;margin:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;
  padding:11px 8px;border-radius:var(--radius);
  line-height:1.25;
  /* Same box-sizing + border width on both, so "same size" holds even
     though one has a visible border and the other doesn't. */
  box-sizing:border-box;border:1px solid transparent;
}
.woocommerce ul.products li.product .product-card-actions .button{
  color:var(--white) !important;background:var(--navy);border-color:var(--line-dark);
}
.woocommerce ul.products li.product .product-card-actions .button:hover{
  background:var(--navy-2);border-color:var(--orange);
}
.woocommerce ul.products li.product .product-card-actions .view-details-btn{
  color:var(--white);background:var(--orange);border-color:var(--orange);
}
.woocommerce ul.products li.product .product-card-actions .view-details-btn:hover{background:var(--orange-2);}

.woocommerce ul.products li.product .product-thumb-wrap .onsale{
  position:absolute;top:8px;right:8px;left:auto;z-index:2;
  background:var(--orange);color:var(--white);font-family:var(--font-display);
  font-size:.5rem;letter-spacing:.02em;text-transform:uppercase;
  padding:3px 7px;border-radius:10px;
  line-height:1.3;
}
/* Condition badge — same size/shape as the sale badge above, but
   bottom-left of the image and purple, so the two never collide. */
.woocommerce ul.products li.product .product-thumb-wrap .condition-badge{
  position:absolute;bottom:8px;left:8px;z-index:2;
  background:#7C3AED;color:var(--white);font-family:var(--font-display);
  font-size:.5rem;letter-spacing:.02em;text-transform:uppercase;
  padding:3px 7px;border-radius:10px;
  line-height:1.3;
}
.woocommerce ul.products li.product{position:relative;}

.woocommerce nav.woocommerce-pagination ul{
  display:flex;gap:6px;list-style:none;padding:0;margin:40px 0 0;border:none;
}
.woocommerce nav.woocommerce-pagination ul li{border:none;}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--font-mono);font-size:.85rem;color:var(--steel-lt);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--orange);color:var(--white);border-color:var(--orange);
}

/* Single product page */

/* Gallery — this is what was rendering oversized: WooCommerce's default
   gallery has no max size constraint from a theme unless one is set. */
.woocommerce div.product .woocommerce-product-gallery{
  max-width:100%;
  position:relative;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper{
  margin:0;
}
.woocommerce div.product .woocommerce-product-gallery .flex-viewport{
  border-radius:20px;
  overflow:hidden;
}
.woocommerce div.product .woocommerce-product-gallery img{
  width:100%;
  height:auto;
  max-height:560px;
  object-fit:cover;
  border-radius:20px;
}
.woocommerce div.product .flex-control-thumbs img{
  max-height:90px;object-fit:cover;border-radius:8px;
}
/* Prev/Next arrows — WooCommerce's flexslider positions these ABSOLUTELY
   on top of the image by default, and without WC's own icon-font CSS
   (dequeued along with 'woocommerce-layout') they were showing as raw
   overlapping "Previous"/"Next" text. Moved to sit BELOW the image as
   their own clean row instead of overlaying it. */
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav{
  position:static;
  display:flex;justify-content:center;gap:14px;
  margin:16px 0 0;list-style:none;padding:0;
}
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav li{margin:0;}
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a{
  position:relative;
  display:block;
  width:44px;height:44px;border-radius:50%;
  background:var(--navy-2);border:1px solid var(--line-dark);
  text-indent:-9999px;overflow:hidden;
  cursor:pointer;transition:border-color .15s ease, background .15s ease;
}
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a:hover{
  border-color:var(--orange);background:var(--navy);
}
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a::after{
  content:'';
  position:absolute;top:50%;left:50%;
  width:9px;height:9px;
}
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a.flex-prev::after{
  border-left:2px solid var(--white);border-bottom:2px solid var(--white);
  transform:translate(-30%,-60%) rotate(45deg);
}
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a.flex-next::after{
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
  transform:translate(-70%,-60%) rotate(-45deg);
}
/* PhotoSwipe lightbox (opened on click) — constrain to the viewport with
   breathing room instead of showing the image at full native resolution. */
.pswp img{ max-width:92vw !important; max-height:88vh !important; width:auto !important; height:auto !important; object-fit:contain; }

.woocommerce div.product{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
}
@media (max-width:900px){ .woocommerce div.product{ grid-template-columns:1fr; } }
.woocommerce div.product div.summary{ margin:0; }

/* Badges */
.pdp-badges{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.pdp-badge{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 14px;border-radius:20px;
}
.pdp-badge.for-sale{background:rgba(230,115,35,0.18);color:#F2A768;}
.pdp-badge.rentable{background:rgba(74,222,128,0.15);color:#4ADE80;}

.pdp-description{color:var(--steel-lt);margin:14px 0 24px;font-size:1rem;}

/* Price box */
.pdp-price-box{
  background:var(--navy-2);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:20px;
}
.pdp-price-label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-lt);display:block;margin-bottom:8px;
}
.pdp-price-value{font-family:var(--font-display);font-size:2.2rem;color:var(--white);line-height:1;}
.pdp-price-value ins{color:var(--orange);text-decoration:none;}
.pdp-price-value del{color:var(--steel);font-size:.6em;}
.pdp-price-meta{margin-top:10px;}
.pdp-stock{font-size:.85rem;font-family:var(--font-display);letter-spacing:.03em;}
.pdp-stock.in{color:#4ADE80;}
.pdp-stock.out{color:#F87171;}

/* Spec boxes */
.pdp-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px;}
@media (max-width:480px){.pdp-specs{grid-template-columns:1fr 1fr;}}
.pdp-spec-box{
  background:var(--navy-2);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:16px 12px;text-align:center;
}
.pdp-spec-box b{display:block;font-family:var(--font-display);font-size:1.1rem;color:var(--white);}
.pdp-spec-box span{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--steel-lt);}

/* Real WooCommerce Add to Cart form — light restyle only */
.woocommerce div.product form.cart{margin-bottom:20px;}
.woocommerce div.product form.cart .quantity{margin-right:10px;}
.woocommerce div.product form.cart .quantity input{
  width:70px;padding:13px 10px;border:1px solid var(--line-dark);border-radius:var(--radius);
  background:var(--navy-2);color:var(--white);text-align:center;
}
.woocommerce div.product .wc-placeholder-icon{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;width:100%;background:var(--paper-2);color:var(--steel);
}
.woocommerce div.product .wc-placeholder-icon svg{width:50%;height:50%;opacity:.85;}
.woocommerce div.product .product_title{color:var(--white);}
.woocommerce div.product p.price, .woocommerce div.product span.price{
  color:var(--white);font-family:var(--font-display);font-size:1.5rem;
}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-soft);}
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button{
  font-family:var(--font-display);letter-spacing:.05em;text-transform:uppercase;
  background:var(--orange);color:var(--white);border-radius:var(--radius);border:none;padding:13px 24px;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{
  background:var(--orange-2);color:var(--white);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  font-family:var(--font-display);text-transform:uppercase;font-size:.82rem;letter-spacing:.05em;
}
/* Description tab content — styles the "Key Features" / "Ideal Uses"
   headings and lists written into each product's long description. */
.woocommerce div.product .woocommerce-Tabs-panel h4{
  font-family:var(--font-display);text-transform:uppercase;font-size:.9rem;
  letter-spacing:.04em;color:var(--white);margin:1.4em 0 .6em;
}
.woocommerce div.product .woocommerce-Tabs-panel ul{
  list-style:none;padding:0;margin:0 0 1em;
}
.woocommerce div.product .woocommerce-Tabs-panel ul li{
  position:relative;padding-left:20px;margin-bottom:8px;color:var(--ink-soft);font-size:.95rem;
}
.woocommerce div.product .woocommerce-Tabs-panel ul li::before{
  content:'';position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--orange);
}
.woocommerce span.onsale{background:var(--orange);}
.woocommerce .star-rating{color:var(--orange);font-size:.95rem;}

/* ==========================================================================
   Product reviews tab — WooCommerce's real, native review system (star
   ratings, verified-purchase badges, avatars, review form). Genuine
   reviews display here automatically once customers leave them; nothing
   below inserts any review content of its own.
   ========================================================================== */
.woocommerce-Reviews{max-width:760px;}
.woocommerce-Reviews-title{
  font-family:var(--font-display);text-transform:uppercase;font-size:1.1rem;
  color:var(--white);margin-bottom:20px;
}
.woocommerce-Reviews .commentlist{list-style:none;margin:0 0 32px;padding:0;}
.woocommerce-Reviews .comment{
  display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-dark);
}
.woocommerce-Reviews .comment:first-child{padding-top:0;}
.woocommerce-Reviews .comment_container{display:flex;gap:16px;width:100%;}
.woocommerce-Reviews .comment_container img{
  border-radius:50%;flex:none;width:48px;height:48px;
}
.woocommerce-Reviews .comment-text{flex:1;}
.woocommerce-Reviews .woocommerce-review__author{
  font-family:var(--font-display);font-size:.95rem;color:var(--white);
  text-transform:none;letter-spacing:0;
}
.woocommerce-Reviews .woocommerce-review__verified{
  font-style:normal;color:#4ADE80;font-size:.76rem;margin-left:8px;
}
.woocommerce-Reviews .woocommerce-review__verified::before{content:'✓ ';}
.woocommerce-Reviews .woocommerce-review__dash{display:none;}
.woocommerce-Reviews .woocommerce-review__published-date{
  display:block;font-size:.78rem;color:var(--steel-lt);margin-top:2px;
}
.woocommerce-Reviews .comment-text .star-rating{margin:8px 0;}
.woocommerce-Reviews .description p{color:var(--steel-lt);margin:8px 0 0;font-size:.94rem;}
.woocommerce-Reviews .woocommerce-noreviews{color:var(--steel-lt);font-size:.94rem;}

/* Review submission form */
#review_form_wrapper{
  background:var(--navy-2);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:26px;
}
#review_form .comment-reply-title{
  font-family:var(--font-display);text-transform:uppercase;font-size:1rem;
  color:var(--white);margin-bottom:18px;display:block;
}
.woocommerce .comment-form-rating label{
  display:block;font-family:var(--font-display);font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--steel-lt);margin-bottom:8px;
}
.woocommerce .comment-form-rating .stars{display:flex;gap:4px;}
.woocommerce .comment-form-rating .stars a{
  color:var(--steel);font-size:1.3rem;text-decoration:none;line-height:1;
}
.woocommerce .comment-form-rating .stars a:hover,
.woocommerce .comment-form-rating .stars a.active,
.woocommerce .comment-form-rating .stars.selected a.active{color:var(--orange);}
.woocommerce #commentform .comment-form-author,
.woocommerce #commentform .comment-form-email,
.woocommerce #commentform .comment-form-comment{margin:16px 0;}
.woocommerce #commentform label{
  display:block;font-family:var(--font-display);font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--steel-lt);margin-bottom:8px;
}
.woocommerce #commentform input[type="text"],
.woocommerce #commentform input[type="email"],
.woocommerce #commentform textarea{
  width:100%;padding:12px 14px;background:var(--navy);border:1px solid var(--line-dark);
  border-radius:var(--radius);color:var(--white);font-family:var(--font-body);font-size:.92rem;
}
.woocommerce #commentform textarea{min-height:110px;resize:vertical;}
.woocommerce #commentform input:focus,
.woocommerce #commentform textarea:focus{outline:none;border-color:var(--orange);}
.woocommerce #commentform .form-submit{margin-top:18px;}
.woocommerce #commentform #submit{
  font-family:var(--font-display);letter-spacing:.05em;text-transform:uppercase;
  background:var(--orange);color:var(--white);border:none;border-radius:var(--radius);
  padding:12px 26px;cursor:pointer;font-size:.85rem;
}
.woocommerce #commentform #submit:hover{background:var(--orange-2);}

/* Average rating summary shown near the product title, when reviews exist */
.woocommerce div.product .woocommerce-product-rating{
  display:flex;align-items:center;gap:8px;margin:8px 0 16px;
}
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link{
  font-size:.82rem;color:var(--steel-lt);
}
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link:hover{color:var(--orange);}


/* Cart / checkout tables */
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--radius);}
.woocommerce table.shop_table th{
  font-family:var(--font-display);text-transform:uppercase;font-size:.76rem;letter-spacing:.05em;
  background:var(--paper-2);color:var(--white);
}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line);}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea{
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--navy);color:var(--white);
}
.woocommerce-message, .woocommerce-info{
  border-top-color:var(--orange);
}
.woocommerce-message::before, .woocommerce-info::before{color:var(--orange);}

/* Product category badges rendered via ech_product_size_badge() */
.woocommerce ul.products li.product .product-thumb-wrap .id-plate{position:absolute;top:12px;left:12px;z-index:2;}

/* My Account */
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;}
.woocommerce-MyAccount-navigation a{
  display:block;padding:10px 14px;font-family:var(--font-display);text-transform:uppercase;
  font-size:.82rem;letter-spacing:.04em;color:var(--steel-lt);border-left:3px solid transparent;
}
.woocommerce-MyAccount-navigation li.is-active a{border-left-color:var(--orange);background:var(--paper-2);}

/* Generic WP content pages (About / Contact / policy pages) rendered via page.php */
.entry-content{max-width:820px;}
.entry-content h2{margin-top:1.4em;}
.entry-content ul{list-style:disc;padding-left:1.3em;margin-bottom:1em;}
.entry-content ul li{margin-bottom:.4em;}
.entry-content a{color:var(--orange);text-decoration:underline;}

/* ==========================================================================
   WordPress default nav menu markup (<ul><li><a>) mapped onto the nav
   styling originally written for .nav-link. Also styles WP's automatic
   current-menu-item / current_page_item classes for the active state.
   ========================================================================== */
.primary-nav ul li{list-style:none;position:relative;}

/* Dropdown sub-menus (Appearance > Menus items nested under a parent) —
   hidden by default, revealed on hover (mouse) or focus-within (keyboard
   tab navigation). Previously these had no positioning at all, so child
   items just stacked permanently open in the bar. */
.primary-nav ul li.menu-item-has-children > a::after{
  content:'';
  display:inline-block;
  width:6px;height:6px;
  margin-left:7px;margin-bottom:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  opacity:.7;
}
.primary-nav ul li .sub-menu{
  display:none;
  position:absolute;top:100%;left:0;
  min-width:230px;
  background:var(--navy-2);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:6px;
  box-shadow:var(--shadow);
  z-index:90;
}
.primary-nav ul li:hover > .sub-menu,
.primary-nav ul li:focus-within > .sub-menu{
  display:block;
}
.primary-nav ul li .sub-menu li a{
  padding:10px 14px;border-bottom:none;font-size:.82rem;
}
.primary-nav ul li .sub-menu li a:hover{background:var(--navy);}
.primary-nav ul li a{
  display:block;padding:10px 16px;font-family:var(--font-display);font-size:.86rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--steel-lt);
  border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;
}
.primary-nav ul li a:hover,
.primary-nav ul li.current-menu-item > a,
.primary-nav ul li.current_page_item > a,
.primary-nav ul li.current-menu-parent > a{
  color:var(--orange);border-bottom-color:var(--orange);
}
/* Add the CSS class "nav-cta" to the "Get a Quote" menu item in
   Appearance > Menus (Screen Options > CSS Classes) to get this styling. */
.primary-nav ul li a.nav-cta{
  font-family:var(--font-display);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--orange);color:var(--white) !important;padding:11px 20px;border-radius:var(--radius);
  border-bottom:none !important;
}
.primary-nav ul li a.nav-cta:hover{background:var(--orange-2);}

@media (max-width:980px){
  .primary-nav ul li a{color:var(--paper);padding:16px 28px;border-bottom:1px solid var(--line-dark);}
  .primary-nav ul li a:hover,
  .primary-nav ul li.current-menu-item > a{background:var(--navy-2);border-bottom-color:var(--line-dark);color:var(--orange);}
  .primary-nav ul li a.nav-cta{margin:20px 28px 0;text-align:center;}

  /* On the mobile slide-out panel, sub-menus show expanded/indented
     rather than hidden-until-hover — there's no mouse to hover with,
     and a full-screen drawer is the right place for a drill-down list. */
  .primary-nav ul li .sub-menu{
    display:block;position:static;min-width:0;background:transparent;
    border:none;box-shadow:none;padding:0;
  }
  .primary-nav ul li .sub-menu li a{padding-left:44px;}
  .primary-nav ul li.menu-item-has-children > a::after{display:none;}
}

/* Footer menus (wp_nav_menu output) mapped onto the existing footer <ul> styling */
.footer-menu ul{list-style:none;margin:0;padding:0;}
.footer-menu ul li{margin-bottom:10px;font-size:.9rem;}
.footer-menu ul li a{color:inherit;}
.footer-menu ul li a:hover{color:var(--orange);}