/**
 * Theme Name:  CheyTac
 * Author:      Open Water Marketing Agency
 * Version:     1.1.0
 * Text Domain: cheytac
 * Template:    hello-elementor
 */

/* ---------------------------------------------------------------
   Design tokens
   Every value here was read off the ORIGINAL site: either from
   getComputedStyle on the running reference, or lifted verbatim from
   the honor theme's own compiled scheme/typography variables. Nothing
   is derived by grepping the old CSS for common colours - the honor
   theme ships several colour schemes and frequency-counting returns
   the wrong palette (it returns amber #fea526, not the brand red).

   One correction to the numbers this file used to carry: the primary
   button has NO corner radius. The 3px radius belongs to the
   transparent overlay button on the product cards.

   The base font size is 18px. A note here once claimed 16px; that came
   from measuring a page whose stylesheets had failed to load, where the
   browser default was all that was left. See the note at html{} below.
   --------------------------------------------------------------- */

/* --- honor's scheme palettes, verbatim. scheme_default is the page
       default; sections and columns opt into the others via a `scheme`
       setting carried in the Elementor data (see functions.php). --- */
:root,
.scheme_default{
  --ct-bg:          #F9F9F9;
  --ct-bd:          #E3E3E3;
  --ct-text:        #7D7D7D;   /* body copy            */
  --ct-text-light:  #AAA8A5;
  --ct-text-dark:   #1A1A18;   /* headings             */
  --ct-link:        #E02B20;   /* brand red            */
  --ct-link-hover:  #BF150A;
  --ct-alter-bg:    #FFFFFF;
}
.scheme_light{
  --ct-bg:          #FFFFFF;
  --ct-bd:          #E3E3E3;
  --ct-text:        #7D7D7D;
  --ct-text-light:  #AAA8A5;
  --ct-text-dark:   #1A1A18;
  --ct-link:        #E02B20;
  --ct-link-hover:  #BF150A;
  --ct-alter-bg:    #F9F9F9;
}
.scheme_dark,
.scheme_aqua_dark,
.scheme_greeny_dark{
  --ct-bg:          #10100F;
  --ct-bd:          #474743;
  --ct-text:        #A6A6A6;
  --ct-text-light:  #8B8B8B;
  --ct-text-dark:   #FFFFFF;   /* headings go white here */
  --ct-link:        #E02B20;
  --ct-link-hover:  #BF150A;
  --ct-alter-bg:    #1F1F1D;
}

:root{
  --ct-header-bg:   #10100F;
  --ct-white:       #FFFFFF;
  --ct-ink:         #1A1A18;
  --ct-red:         #E02B20;   /* button / link red                     */
  --ct-red-deep:    #C8102E;   /* deeper red used in page content       */
  --ct-grey-100:    #E3E3E3;
  --ct-grey-300:    #AAA8A5;
  --ct-grey-500:    #8B8B8B;
  --ct-grey-700:    #5A5A55;
  --ct-grey-900:    #2E2E2C;
  --ct-rule:        rgba(255,255,255,.14);

  --ct-font-display: Oswald, sans-serif;
  --ct-font-body:    Roboto, sans-serif;

  --ct-container: 1290px;
  --ct-header-h:  137px;   /* measured, not assumed: the nav wraps to two rows */
}

/* --- globals, matched to honor's typography variables --- */
/* The original sets an 18px root, so every em-based heading resolves against
   18px (3.167em -> 57.006px, measured). An earlier reading of this as 16px came
   from a page whose stylesheets had failed to load, where the browser default
   16px was all that was left. */
html{font-size:18px}
body{
  font-family:var(--ct-font-body);
  font-size:1rem;                /* = 18px */
  font-weight:400;
  line-height:1.62em;   /* em, not unitless: descendants inherit the computed px */
  letter-spacing:.1px;
  color:var(--ct-text);
  background:var(--ct-bg);
  margin:0;
}
p,li,ol,ul{line-height:1.62em}

/* A scheme container recolours its own text; the section background itself
   stays with Elementor, which is where the original kept it. */
.scheme_default,.scheme_light,.scheme_dark,.scheme_aqua_dark,.scheme_greeny_dark{
  color:var(--ct-text);
}

/* Headings inside a dark section go white. This is stated as an explicit
   descendant rule rather than left to the variable alone, because Elementor
   widgets nested inside the section can reset the variable. A genuinely light
   section nested inside a dark one is handled by the rule that follows, which
   wins on source order. */
.scheme_dark h1,.scheme_dark h2,.scheme_dark h3,
.scheme_dark h4,.scheme_dark h5,.scheme_dark h6,
.scheme_aqua_dark h1,.scheme_aqua_dark h2,.scheme_aqua_dark h3,
.scheme_aqua_dark h4,.scheme_aqua_dark h5,.scheme_aqua_dark h6,
.scheme_greeny_dark h1,.scheme_greeny_dark h2,.scheme_greeny_dark h3,
.scheme_greeny_dark h4,.scheme_greeny_dark h5,.scheme_greeny_dark h6{
  color:#FFFFFF;
}
.scheme_light h1,.scheme_light h2,.scheme_light h3,
.scheme_light h4,.scheme_light h5,.scheme_light h6{
  color:#1A1A18;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--ct-font-display);
  font-weight:500;
  text-transform:uppercase;      /* the original did this - it is most of the look */
  color:var(--ct-text-dark);     /* white inside a dark scheme, near-black otherwise */
  letter-spacing:normal;         /* headings do not take the body's .1px tracking */
  margin:0 0 .5em;
}
h1{font-size:3.167em;line-height:1em}
h2{font-size:2.611em;line-height:1.021em}
h3{font-size:1.944em;line-height:1.086em}
h4{font-size:1.556em;line-height:1.214em}
h5{font-size:1.333em;line-height:1.417em}
h6{font-size:1.056em;line-height:1.474em}

/* Elementor's own heading widget sets line-height:1, and the original did the
   same for genuine Elementor headings - so that is deliberately left alone.
   Only headings converted from the plugin's sc_title widget used the theme
   scale, and the one that still differs does so by about 1px. */

a{color:var(--ct-link);text-decoration:none}
a:hover,a:focus-visible{color:var(--ct-link-hover)}

/* ---------------------------------------------------------------
   Buttons
   The original had two families. The solid ones were trx_addons
   `sc_button` widgets, which the migration turned into Elementor
   buttons; they are tagged with ct-btn-* classes so they keep the
   original's look now that the widget is gone. The transparent
   overlay button on the product cards was already a native Elementor
   button and keeps its own per-widget styling - so nothing here may
   set font-family or text-transform on .elementor-button globally,
   which is what previously forced those into Oswald caps.
   --------------------------------------------------------------- */
/* Elementor puts a widget's CSS Classes on the widget WRAPPER, not on the
   <a class="elementor-button"> itself, so these are descendant selectors. The
   element qualifier (a./button.) lifts them to 0,2,1 so they beat Elementor's
   own kit rule, which is 0,2,0 and loads after this file. */
.ct-btn-primary a.elementor-button,.ct-btn-primary button.elementor-button,
.ct-btn-dark    a.elementor-button,.ct-btn-dark    button.elementor-button,
.ct-btn-simple  a.elementor-button,.ct-btn-simple  button.elementor-button{
  font-family:var(--ct-font-display);
  font-weight:500;
  text-transform:uppercase;
  border:0;
  border-radius:0;
}
.ct-btn-primary a.elementor-button,.ct-btn-primary button.elementor-button{
  font-size:13px;
  letter-spacing:1.2px;
  color:var(--ct-white);
  background-color:var(--ct-red);
  line-height:21px;
  padding:17px 57px;
}
.ct-btn-primary a.elementor-button:hover,.ct-btn-primary a.elementor-button:focus-visible,
.ct-btn-primary button.elementor-button:hover,.ct-btn-primary button.elementor-button:focus-visible{
  background-color:var(--ct-link-hover);
  color:var(--ct-white);
}
.ct-btn-primary.ct-btn-sm a.elementor-button,.ct-btn-primary.ct-btn-sm button.elementor-button{
  font-size:12px;
  padding:14px 46px;
}
/* solid near-black variant (the original's color_style_dark) */
.ct-btn-dark a.elementor-button,.ct-btn-dark button.elementor-button{
  font-size:13px;
  letter-spacing:1.2px;
  color:#F9F9F9;
  background-color:var(--ct-ink);
  line-height:21px;
  padding:17px 57px;
}
.ct-btn-dark a.elementor-button:hover,.ct-btn-dark button.elementor-button:hover{
  background-color:#000;
  color:var(--ct-white);
}
/* text-only variant with room for the trailing arrow */
.ct-btn-simple a.elementor-button,.ct-btn-simple button.elementor-button{
  font-size:14px;
  letter-spacing:1.4px;
  color:var(--ct-ink);
  background-color:transparent;
  line-height:20px;
  padding:0 32.2px 2px 0;
}
.ct-btn-simple a.elementor-button:hover,.ct-btn-simple button.elementor-button:hover{color:var(--ct-red)}

/* Transparent overlay button used on image/product cards. Its box already
   comes from the widget's own Elementor settings, which survived the
   migration; this class is here for any card that lacks them. */
.ct-btn-overlay a.elementor-button,.ct-btn-overlay button.elementor-button{
  font-family:var(--ct-font-body);
  font-size:15px;
  font-weight:400;
  text-transform:none;
  letter-spacing:.1px;
  color:var(--ct-white);
  background-color:transparent;
  border:1px solid var(--ct-white);
  border-radius:3px;
  padding:12px 24px;
}
.ct-btn-overlay a.elementor-button:hover,.ct-btn-overlay button.elementor-button:hover{
  background-color:var(--ct-white);
  color:var(--ct-ink);
}

/* ---------------------------------------------------------------
   Section eyebrow, rule and label
   Ported out of the homepage's inline <style>. It has to live in the
   theme: WordPress strips <style> from post content unless the saving
   user has unfiltered_html, and during the migration it was stripped -
   which left 1.2KB of raw CSS rendering as visible text on the page.
   --------------------------------------------------------------- */
.ct-own{font-family:'Open Sans',sans-serif;padding:60px 40px;max-width:900px;margin:0 auto}
.ct-own .eyebrow,.ct-eyebrow{
  font-family:var(--ct-font-display);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ct-red-deep);margin:0 0 11px;
}
.ct-own h2{
  font-family:var(--ct-font-display);font-size:38px;font-weight:600;
  text-transform:uppercase;color:var(--ct-ink);margin:0 0 18px;line-height:1.05;
}
.ct-own .red-rule,.ct-rule-red{
  border:none;border-top:2px solid var(--ct-red-deep);width:44px;margin:0 0 30px;
}
.ct-own p{font-size:15px;line-height:1.8;color:var(--ct-ink);margin:0 0 18px}
.ct-own .section-label,.ct-section-label{
  font-family:var(--ct-font-display);font-size:13px;font-weight:500;text-transform:uppercase;
  letter-spacing:.15em;color:var(--ct-ink);border-left:3px solid var(--ct-red-deep);
  padding-left:10px;margin:3px 0 14px;
}
.ct-own .dl-btn{
  display:inline-flex;align-items:center;gap:8px;margin:28px 0 0;background:var(--ct-red-deep);
  color:#fff;font-family:var(--ct-font-display);font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;padding:12px 24px;text-decoration:none;
  border:none;cursor:pointer;
}
.ct-own .dl-btn:hover{background:#A80D24;color:#fff}

/* Small red cartridge divider the original sets under section headings. */
.ct-divider{display:block;width:44px;height:2px;background:var(--ct-red);border:0;margin:14px 0 0}
.ct-divider--center{margin-left:auto;margin-right:auto}
.ct-heading-divider::after{
  content:"";display:block;width:44px;height:2px;background:var(--ct-red);margin:16px 0 0;
}
.ct-heading-divider.ct-heading-divider--center::after{margin-left:auto;margin-right:auto}

.ct-container{max-width:var(--ct-container);margin:0 auto;padding:0 24px}
.ct-skip{position:absolute;left:-9999px}
.ct-skip:focus{left:8px;top:8px;z-index:100;background:#fff;color:#000;padding:8px 14px}

/* --- header --- */
.ct-header{background:var(--ct-header-bg);color:var(--ct-white);position:relative;z-index:900}
.ct-header__inner{display:flex;align-items:center;gap:28px;min-height:var(--ct-header-h)}
.ct-header__brand{flex:0 0 auto;display:flex;align-items:center}
.ct-header__brand img{display:block;max-height:46px;width:auto}
.ct-header__brand .ct-wordmark{font-family:var(--ct-font-display);font-size:26px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ct-white);text-decoration:none}
.ct-header__nav{margin-left:auto}
.ct-header__actions{display:flex;align-items:center;gap:18px;flex:0 0 auto}

/* --- primary menu (15px to match the original's nav) --- */
.ct-menu,.ct-menu ul{list-style:none;margin:0;padding:0}
.ct-menu{display:flex;align-items:center;gap:26px}
.ct-menu li{position:relative}
.ct-menu a{font-family:var(--ct-font-display);font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ct-white);text-decoration:none;display:block;padding:10px 0;transition:color .15s}
.ct-menu a:hover,.ct-menu a:focus-visible,.ct-menu .current-menu-item>a{color:var(--ct-red)}
.ct-menu .menu-item-has-children>a::after{content:"";display:inline-block;margin-left:7px;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.ct-menu ul.sub-menu{position:absolute;top:100%;left:0;min-width:240px;background:#272725;
  border:1px solid var(--ct-rule);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s,transform .15s,visibility .15s}
.ct-menu li:hover>ul.sub-menu,.ct-menu li:focus-within>ul.sub-menu{opacity:1;visibility:visible;transform:none}
/* the original's dropdown links were body font, sentence case, mid grey */
.ct-menu ul.sub-menu a{font-family:var(--ct-font-body);font-weight:400;
  letter-spacing:normal;text-transform:none;color:#A6A6A6;padding:9px 18px;white-space:nowrap;
  font-size:17px}
.ct-menu ul.sub-menu a:hover,.ct-menu ul.sub-menu a:focus-visible{color:var(--ct-white)}
.ct-menu ul.sub-menu ul.sub-menu{top:0;left:100%}

/* --- socials + header button --- */
.ct-socials{display:flex;gap:14px}
.ct-socials a{color:var(--ct-grey-300);text-decoration:none;font-size:15px;line-height:1;transition:color .15s}
.ct-socials a:hover,.ct-socials a:focus-visible{color:var(--ct-white)}
.ct-btn{display:inline-block;font-family:var(--ct-font-display);font-size:13px;letter-spacing:1.2px;
  text-transform:uppercase;font-weight:500;padding:17px 34px;text-decoration:none;
  background:var(--ct-red);color:var(--ct-white);border:0;transition:background .15s,color .15s}
.ct-btn:hover,.ct-btn:focus-visible{background:var(--ct-link-hover);color:var(--ct-white)}

/* --- mobile toggle --- */
.ct-burger{display:none;background:none;border:0;color:var(--ct-white);padding:10px;cursor:pointer}
.ct-burger span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0}

@media (max-width:1100px){
  .ct-burger{display:block;margin-left:auto}
  .ct-header__nav{position:absolute;top:100%;left:0;right:0;background:var(--ct-header-bg);
    border-top:1px solid var(--ct-rule);margin-left:0;display:none}
  .ct-header__nav.is-open{display:block}
  .ct-menu{flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px}
  .ct-menu a{padding:12px 0;border-bottom:1px solid var(--ct-rule)}
  .ct-menu ul.sub-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;
    background:transparent;padding:0 0 0 16px}
  .ct-header__actions{display:none}
}

/* --- footer (mid grey links, body font - as the original's were) --- */
.ct-footer{background:var(--ct-ink);color:#A6A6A6;padding:52px 0 30px;font-size:14px}
.ct-footer a{font-family:var(--ct-font-body);text-transform:none;color:#A6A6A6;text-decoration:none}
.ct-footer a:hover{color:var(--ct-white)}
.ct-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px}
.ct-footer h3{color:var(--ct-white);font-size:15px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 14px}
.ct-footer__menu{list-style:none;margin:0;padding:0}
.ct-footer__menu li{margin:0 0 9px}
.ct-footer__bottom{margin-top:38px;padding-top:20px;border-top:1px solid var(--ct-rule);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:var(--ct-grey-500)}

/* ---------------------------------------------------------------
   Dropcap
   Carried over from the removed plugin's trx_addons_dropcap classes,
   which survived inside team-bio content as bare class names with no
   CSS behind them. Colour comes from the scheme token, so it inverts
   on dark sections exactly as the original did.
   --------------------------------------------------------------- */
.ct-dropcap{
  float:left;display:block;font-weight:500;font-family:var(--ct-font-display);
  font-size:47px;width:70px;height:70px;line-height:66px;text-align:center;
  padding:0;margin:.15em .4em 0 0;border-radius:0;
}
.ct-dropcap--2{
  background-color:transparent;color:var(--ct-text-dark);
  font-size:57px;height:58px;line-height:46px;margin:0;text-align:left;
  width:auto;min-width:55px;padding-right:10px;overflow:visible;
}

/* ---------------------------------------------------------------
   Video playlist headings
   The playlist widget ships its own type sizes (16px / 14px). On the
   original the theme's heading scale won instead, so these restore it.
   Qualified with the widget class to outrank the widget stylesheet,
   which loads after this file.
   --------------------------------------------------------------- */
.elementor-widget-video-playlist .e-tabs-header h2.e-tabs-title{
  font-family:var(--ct-font-display);font-weight:500;text-transform:uppercase;
  color:var(--ct-text-dark);font-size:2.611rem;line-height:1.021em;
}
.elementor-widget-video-playlist .e-tabs-items-wrapper .e-tab-title h4.e-tab-title-text,
.elementor-widget-video-playlist .e-tabs-items-wrapper .e-tab-title.e-active h4.e-tab-title-text,
.elementor-widget-video-playlist .e-tabs-items-wrapper .e-tab-title:hover h4.e-tab-title-text{
  font-family:var(--ct-font-display);font-weight:500;
  /* rem, not em: the tab sets its own 14px, and the original sized these
     against the 18px root. */
  font-size:1.556rem;line-height:1.214em;
}

/* ---------------------------------------------------------------
   Stacked button group (btn-stack)
   The original rendered several buttons from one widget; the migration
   split them into sibling widgets, which Elementor then stretched to
   equal widths and wrapped the labels inside. These size to their text
   and let the row wrap, as the original did.
   --------------------------------------------------------------- */
/* Elementor's own .elementor-widget__width-inherit is 0,2,0 and loads after
   this file, so the child combinator is needed to win at 0,3,0. */
.e-con > .elementor-element.btn-stack,
.elementor-widget-wrap > .elementor-element.btn-stack{width:auto;flex:0 0 auto;max-width:100%}
.btn-stack .elementor-button{white-space:nowrap}
@media (max-width:640px){
  .e-con > .elementor-element.btn-stack,
  .elementor-widget-wrap > .elementor-element.btn-stack{width:100%}
  .btn-stack .elementor-button{white-space:normal;display:block;text-align:center}
}

/* ---------------------------------------------------------------
   Counters (the odometer stat blocks)
   Measured off the original: number Oswald 57px/500 with -0.1px
   tracking, title Oswald 19px/500 uppercase. Elementor's own counter
   widget ships Roboto 69px/600, which is what made these read wrong.
   Colour comes from the scheme token, so the same rule gives white on
   the homepage's dark band and near-black on the firearm pages -
   which is what the original did in each place.
   --------------------------------------------------------------- */
.elementor-widget-counter .elementor-counter-number-wrapper,
.elementor-widget-counter .elementor-counter-number,
.elementor-widget-counter .elementor-counter-number-prefix,
.elementor-widget-counter .elementor-counter-number-suffix{
  font-family:var(--ct-font-display);
  font-weight:500;
  font-size:57px;
  line-height:1.1;
  letter-spacing:-.1px;
  color:var(--ct-text-dark);
}
/* .elementor-counter in the middle lifts this to 0,3,0 so the weight wins. */
.elementor-widget-counter .elementor-counter .elementor-counter-title{
  font-family:var(--ct-font-display);
  font-weight:500;
  font-size:19px;
  text-transform:uppercase;
  letter-spacing:normal;
  color:var(--ct-text-dark);
}

/* ---------------------------------------------------------------
   Hero background video
   Two problems this solves:
     1. black bars above/below the video at some window shapes - the
        old rule mixed vw and vh units, so the iframe stopped covering
        whenever the section's aspect ratio drifted from the viewport's;
     2. the hero running past the fold, because it was a full 100vh
        sitting *below* a 92px header.
   The iframe is now sized from its CONTAINER, not the viewport: at
   least as wide and at least as tall as the box, locked to 16:9, and
   centred. That is cover behaviour at every size with no unit coupling.
   --------------------------------------------------------------- */
.elementor-background-video-container{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
}
.elementor-background-video-container iframe,
.elementor-background-video-container video,
.elementor-background-video-embed{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:auto;height:auto;
  min-width:100%;min-height:100%;
  aspect-ratio:16/9;
  max-width:none;border:0;
}
/* a self-hosted <video> can cover on its own */
.elementor-background-video-container video{object-fit:cover;aspect-ratio:auto;width:100%;height:100%}

/* Hero height: the header plus the hero should equal one screen, so the
   next section starts exactly at the fold. svh keeps this stable while
   mobile browser chrome shows and hides; vh is the fallback. */
.elementor-section:has(> .elementor-background-video-container){
  min-height:calc(100vh - var(--ct-header-h));
  min-height:calc(100svh - var(--ct-header-h));
}
@media (max-width:1100px){
  :root{--ct-header-h:72px}
  .elementor-section:has(> .elementor-background-video-container){
    min-height:calc(100svh - var(--ct-header-h));
  }
}
/* below tablet a full-screen hero pushes everything off the fold */
@media (max-width:767px){
  .elementor-section:has(> .elementor-background-video-container){
    min-height:60svh;
  }
}

/* ---------------------------------------------------------------
   Counters (the odometer stat blocks)
   Measured off the original: number Oswald 57px/500 with -0.1px
   tracking, title Oswald 19px/500 uppercase. Elementor's own counter
   widget ships Roboto 69px/600, which is what made these read wrong.
   Colour comes from the scheme token, so the same rule gives white on
   the homepage's dark band and near-black on the firearm pages -
   which is what the original did in each place.
   --------------------------------------------------------------- */
.elementor-widget-counter .elementor-counter-number-wrapper,
.elementor-widget-counter .elementor-counter-number,
.elementor-widget-counter .elementor-counter-number-prefix,
.elementor-widget-counter .elementor-counter-number-suffix{
  font-family:var(--ct-font-display);
  font-weight:500;
  font-size:57px;
  line-height:1.1;
  letter-spacing:-.1px;
  color:var(--ct-text-dark);
}
/* .elementor-counter in the middle lifts this to 0,3,0 so the weight wins. */
.elementor-widget-counter .elementor-counter .elementor-counter-title{
  font-family:var(--ct-font-display);
  font-weight:500;
  font-size:19px;
  text-transform:uppercase;
  letter-spacing:normal;
  color:var(--ct-text-dark);
}

/* ---------------------------------------------------------------
   Background video cover
   Elementor sizes a background-video iframe from the provider's API.
   When that call does not come back the iframe is left at its natural
   size and the hero shows a letterboxed strip. This is the standard
   16:9 cover fallback, so the section fills either way.
   --------------------------------------------------------------- */
.elementor-background-video-container{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
}
.elementor-background-video-container iframe,
.elementor-background-video-embed{
  position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;              /* 16:9 by width  */
  min-width:177.78vh;min-height:100%;      /* 16:9 by height */
  transform:translate(-50%,-50%);
  border:0;
}

/* ---------------------------------------------------------------
   News list with a left thumbnail
   The original used a square thumbnail at about a third of the row
   width. Elementor's classic skin gives no width control for this,
   so it is set here.
   --------------------------------------------------------------- */
.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{
  flex:0 0 33%;max-width:33%;align-self:flex-start;
}
.elementor-posts--thumbnail-left .elementor-post__thumbnail{
  aspect-ratio:1/1;padding-bottom:0!important;height:auto;
}
.elementor-posts--thumbnail-left .elementor-post__thumbnail img{
  width:100%;height:100%;object-fit:cover;position:static;transform:none;
}

/* ---------------------------------------------------------------
   Background mask (sc_bg_mask_1 ... _9)
   Washes the section's own background COLOUR over its background
   IMAGE at n/10 opacity - the dealer locator's red over the map.
   background-color:inherit on the pseudo-element resolves to the
   section's colour without dragging the image along with it.
   --------------------------------------------------------------- */
[class*="sc_bg_mask_"]{position:relative}
[class*="sc_bg_mask_"]::before{
  content:" ";position:absolute;left:0;top:0;right:0;bottom:0;
  background-color:inherit;z-index:0;pointer-events:none;
}
/* keep the section's own content above the wash */
[class*="sc_bg_mask_"] > .elementor-container,
[class*="sc_bg_mask_"] > .e-con-inner,
[class*="sc_bg_mask_"] > .elementor-widget-wrap,
[class*="sc_bg_mask_"] > .elementor-element{position:relative;z-index:1}
/* trx suppressed a competing pseudo-element on the inner wrap */
[class*="sc_bg_mask_"] > .elementor-widget-wrap::before{display:none !important}
.sc_bg_mask_1::before{opacity:.1}
.sc_bg_mask_2::before{opacity:.2}
.sc_bg_mask_3::before{opacity:.3}
.sc_bg_mask_4::before{opacity:.4}
.sc_bg_mask_5::before{opacity:.5}
.sc_bg_mask_6::before{opacity:.6}
.sc_bg_mask_7::before{opacity:.7}
.sc_bg_mask_8::before{opacity:.8}
.sc_bg_mask_9::before{opacity:.9}

/* ---------------------------------------------------------------
   Plain (non-Elementor) pages
   WooCommerce's cart, checkout, my account, shop and wishlist are
   ordinary post content. Without a wrapper they ran edge to edge
   across the full viewport. Elementor pages are untouched - they
   bring their own containers and must stay full-bleed.
   --------------------------------------------------------------- */
.ct-page{padding:56px 24px 72px}
.ct-page__title{margin:0 0 28px}
.ct-page__content{max-width:100%}
.ct-page__content > *:first-child{margin-top:0}
.ct-page__content p,
.ct-page__content li{color:var(--ct-text)}
.ct-page__content ul,
.ct-page__content ol{padding-left:1.3em;margin:0 0 1.2em}
.ct-page__content li{margin:0 0 .4em}
.ct-page__content a{color:var(--ct-link)}
.ct-page__content a:hover{color:var(--ct-link-hover)}
.ct-page__content h2,
.ct-page__content h3,
.ct-page__content h4{margin:1.6em 0 .6em}
.ct-page__content img{height:auto}
/* WooCommerce tables and forms need room to breathe inside the container */
.ct-page__content table{width:100%;border-collapse:collapse}
.ct-page__content .woocommerce-message,
.ct-page__content .woocommerce-info,
.ct-page__content .woocommerce-error{margin:0 0 1.4em}

/* ---------------------------------------------------------------
   Archive / blog index card grid
   Used by /news/, category and tag archives and search results.
   The parent theme printed every post in full; this is a grid of
   cards in the same language as the homepage news module.
   --------------------------------------------------------------- */
.ct-archive{padding:56px 24px 80px}
.ct-archive__title{margin:0 0 10px}
.ct-archive__intro{color:var(--ct-text);margin:0 0 30px;max-width:70ch}
.ct-archive__empty{color:var(--ct-text)}

.ct-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin:30px 0 0;
}
@media (max-width:1100px){ .ct-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px} }
@media (max-width:640px){  .ct-cards{grid-template-columns:1fr;gap:24px} }

.ct-card{background:var(--ct-alter-bg);display:flex;flex-direction:column;min-width:0}
.ct-card__media{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;background:var(--ct-grey-100)}
.ct-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.ct-card:hover .ct-card__img{transform:scale(1.04)}
.ct-card__badge{
  position:absolute;top:14px;right:14px;
  background:rgba(16,16,15,.72);color:#fff;
  font-family:var(--ct-font-display);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:2px;
}
.ct-card__body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1 1 auto}
.ct-card__title{font-size:1.25rem;line-height:1.2;margin:0 0 8px}
.ct-card__title a{color:var(--ct-link);text-decoration:none}
.ct-card__title a:hover{color:var(--ct-link-hover)}
.ct-card__meta{font-size:13px;color:var(--ct-text-light);margin:0 0 12px}
.ct-card__excerpt{font-size:15px;line-height:1.6;color:var(--ct-text);margin:0 0 18px}
.ct-card__more{
  margin-top:auto;align-self:flex-start;
  font-family:var(--ct-font-display);font-size:13px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ct-link);text-decoration:none;
}
.ct-card__more:hover{color:var(--ct-link-hover)}

/* pagination */
.ct-archive .navigation.pagination{margin:48px 0 0}
.ct-archive .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ct-archive .page-numbers{
  font-family:var(--ct-font-display);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 15px;color:var(--ct-text-dark);background:var(--ct-alter-bg);text-decoration:none;
}
.ct-archive .page-numbers:hover{background:var(--ct-grey-100)}
.ct-archive .page-numbers.current{background:var(--ct-red);color:#fff}
.ct-archive .screen-reader-text{position:absolute;left:-9999px}

/* ---------------------------------------------------------------
   Single post typography
   Measured before: 132 characters per line, h1 57px, h2 47px, and
   no space above any heading. Long-form reads best at roughly 60-75
   characters, so the text column is capped in ch units and the
   display scale is replaced with an article scale that keeps a
   clear step between h1, h2 and h3.
   --------------------------------------------------------------- */
.ct-post{padding:52px 0 80px}
.ct-post .ct-container{max-width:1100px}

.ct-post__header{margin:0 0 30px}
.ct-post__eyebrow{
  font-family:var(--ct-font-display);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;margin:0 0 12px;
}
.ct-post__eyebrow a{color:var(--ct-red-deep);text-decoration:none}
.ct-post__eyebrow a:hover{color:var(--ct-link-hover)}

/* article title: still Oswald caps, but a readable size with room above */
.ct-post__title{
  font-size:2.4rem;line-height:1.12;margin:0 0 14px;max-width:24ch;
}
.ct-post__meta{font-size:14px;color:var(--ct-text-light);margin:0}

.ct-post__featured{margin:0 0 38px}
.ct-post__featured img{width:100%;height:auto;display:block}

/* the readable column */
.ct-post__content{max-width:72ch}
.ct-post__content > *{margin-left:0;margin-right:0}
.ct-post__content p{
  font-size:1.0556rem;line-height:1.75;margin:0 0 1.25em;color:var(--ct-text);
}
.ct-post__content h2{
  font-size:1.7rem;line-height:1.2;margin:2em 0 .55em;
}
.ct-post__content h3{
  font-size:1.35rem;line-height:1.25;margin:1.8em 0 .5em;
}
.ct-post__content h4{font-size:1.15rem;margin:1.6em 0 .5em}
.ct-post__content ul,
.ct-post__content ol{margin:0 0 1.25em;padding-left:1.4em}
.ct-post__content li{margin:0 0 .5em;line-height:1.7;color:var(--ct-text)}
.ct-post__content a{color:var(--ct-link);text-decoration:underline;text-underline-offset:2px}
.ct-post__content a:hover{color:var(--ct-link-hover)}
.ct-post__content strong{color:var(--ct-text-dark)}
.ct-post__content blockquote{
  margin:1.8em 0;padding:4px 0 4px 22px;border-left:3px solid var(--ct-red);
  font-size:1.1rem;line-height:1.6;color:var(--ct-text-dark);
}
.ct-post__content > *:first-child{margin-top:0}
.ct-post__content > *:last-child{margin-bottom:0}

/* let media breathe wider than the text column */
.ct-post__content img,
.ct-post__content figure,
.ct-post__content .wp-block-image,
.ct-post__content iframe{max-width:1100px;width:100%;height:auto}
.ct-post__content figure{margin:2em 0}
.ct-post__content figcaption{
  font-size:13px;color:var(--ct-text-light);margin-top:8px;
}
.ct-post__content table{width:100%;border-collapse:collapse;margin:0 0 1.5em}
.ct-post__content th,.ct-post__content td{
  border:1px solid var(--ct-bd);padding:10px 12px;text-align:left;font-size:15px;
}

@media (max-width:640px){
  .ct-post{padding:34px 0 56px}
  .ct-post__title{font-size:1.85rem;max-width:none}
  .ct-post__content p{font-size:1rem}
}

/* ---------------------------------------------------------------
   WooCommerce buttons
   The shop was using WooCommerce's stock purple. These carry the
   site's primary button treatment instead. Padding is tighter than
   the marketing buttons because shop buttons sit in tables, cards
   and form rows rather than on their own.
   --------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button,
.wc-block-components-button{
  font-family:var(--ct-font-display);
  font-size:14px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:1.2px;
  line-height:1.2;
  color:var(--ct-white);
  background-color:var(--ct-red);
  border:0;
  border-radius:0;
  padding:15px 32px;
  transition:background-color .15s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button:hover,
.wc-block-components-button:hover{
  background-color:var(--ct-link-hover);
  color:var(--ct-white);
}
/* Some Woo buttons render outside a .woocommerce wrapper - the single
   product add-to-cart is one - so these are matched on their own classes
   rather than through an ancestor. */
.single_add_to_cart_button,
a.button.alt, button.button.alt, input.button.alt,
.wc-proceed-to-checkout a.checkout-button{
  font-family:var(--ct-font-display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--ct-white);
  background-color:var(--ct-red);
  border:0;border-radius:0;
}
.single_add_to_cart_button:hover,
a.button.alt:hover, button.button.alt:hover, input.button.alt:hover,
.wc-proceed-to-checkout a.checkout-button:hover{
  background-color:var(--ct-link-hover);color:var(--ct-white);
}

/* A disabled control should not look like a call to action. WooCommerce marks
   these with a CLASS (variable products before a variation is chosen) as well
   as the attribute, so both are covered. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.button.disabled, .button:disabled,
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled{
  background-color:var(--ct-grey-300);
  color:var(--ct-ink);
  opacity:1;
  cursor:not-allowed;
}
/* Woo's notice bar picks up the brand colour too */
.woocommerce-message,
.woocommerce-info{border-top-color:var(--ct-red)}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--ct-red)}
.woocommerce-error{border-top-color:var(--ct-red-deep)}

/* ---------------------------------------------------------------
   Article body contrast
   #7D7D7D on the #F9F9F9 page ground measures 3.91:1, which is below
   the 4.5:1 WCAG AA threshold for normal-size text. Long-form reading
   is where that bites, so article copy uses the darker theme grey
   (6.59:1). Marketing pages keep the original tone.
   --------------------------------------------------------------- */
.ct-post__content p,
.ct-post__content li,
.ct-page__content p,
.ct-page__content li{color:var(--ct-grey-700)}

/* ---------------------------------------------------------------
   WooCommerce product pages
   The single-product and shop templates were running on WooCommerce's
   stock styling: a 57px h1, a mustard price, grey table cells around
   the variation picker, rounded 3px inputs and the purple pill tabs.
   None of that is the site's language.

   The type scale below is not invented - it is what the ORIGINAL site
   rendered, read off the reference install with getComputedStyle:
     product title   Oswald 35px/38px uppercase  #1A1A18
     price           Oswald 24px/29px            #E02B20
     variation label Oswald 16px uppercase, stacked ABOVE the control
     form controls   55px tall, 1px #E3E3E3, square
     add to cart     55px tall, Oswald 13px, 10px clear of the qty box
   The original had no tabs and no product meta, so those two blocks are
   styled to the same vocabulary rather than copied.
   --------------------------------------------------------------- */

/* Shop templates sat in a 1140px column while every other page on the
   site runs at 1290px. They also had no page padding at all, so content
   met the header on top and the viewport edge below 1140px. */
body.single-product main#main,
body.post-type-archive-product main#main,
body.tax-product_cat main#main,
body.tax-product_tag main#main{
  max-width:var(--ct-container);
  padding:46px 20px 86px;
}

.woocommerce .woocommerce-breadcrumb{
  font-size:.889rem;          /* 16px */
  line-height:20px;
  color:var(--ct-text);
  margin:0 0 32px;
}
.woocommerce .woocommerce-breadcrumb a{color:var(--ct-text)}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--ct-red)}

/* --- summary column ------------------------------------------- */
.woocommerce div.product .product_title{
  font-size:1.944rem;         /* 35px */
  line-height:1.086em;
  margin:0 0 19px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price{
  font-family:var(--ct-font-display);
  font-weight:500;
  color:var(--ct-red);
}
.woocommerce div.product p.price{
  font-size:1.333rem;         /* 24px */
  line-height:1.215em;
  margin:0 0 30px;
}
.woocommerce div.product p.price del{color:var(--ct-text-light);font-weight:400}
.woocommerce div.product p.price ins{text-decoration:none}

.woocommerce div.product .woocommerce-product-details__short-description{
  margin:0 0 30px;
  font-size:.944rem;
}

/* The variation picker ships as a table with a tinted cell on each side.
   Flattened to stacked label + control, which is what the original did. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td{
  display:block;
  width:100%;
  background:none;
  border:0;
  padding:0;
  margin:0;
}
.woocommerce div.product form.cart table.variations{margin:0 0 26px}
.woocommerce div.product form.cart table.variations tr + tr{margin-top:22px}
.woocommerce div.product form.cart table.variations th.label label{
  font-family:var(--ct-font-display);
  font-size:.889rem;          /* 16px */
  line-height:1.2;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--ct-text-dark);
  display:block;
  padding-bottom:13px;
}

/* One control treatment for every field in the shop: square, hairline
   border, 55px tall so the quantity box and the add-to-cart button sit
   on the same baseline. */
.woocommerce div.product form.cart .variations select,
.woocommerce div.product .quantity input.qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce #review_form input[type="text"],
.woocommerce #review_form input[type="email"],
.woocommerce #review_form select,
.woocommerce #review_form textarea{
  font-family:var(--ct-font-body);
  font-size:.889rem;
  color:var(--ct-text-dark);
  background-color:var(--ct-white);
  border:1px solid var(--ct-bd);
  border-radius:0;
  box-shadow:none;
}
.woocommerce div.product form.cart .variations select{
  width:100%;
  max-width:100%;
  height:55px;
  margin:0;
  padding:0 48px 0 18px;
}
.woocommerce div.product .quantity input.qty{
  width:96px;
  height:55px;
  padding:0 8px 0 16px;
  text-align:left;
}
.woocommerce div.product form.cart .reset_variations{
  display:inline-block;
  margin-top:12px;
  font-size:.722rem;          /* 13px */
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--ct-red);
}
.woocommerce div.product .woocommerce-variation-description p{margin:0 0 18px}
.woocommerce div.product .woocommerce-variation-price{margin:0 0 18px}
.woocommerce div.product .woocommerce-variation-price .price{font-size:1.222rem}

/* The add-to-cart row floated its children, so its own box collapsed to
   zero height and the spacing below it came from whatever followed. */
.woocommerce div.product form.cart,
.woocommerce div.product .woocommerce-variation-add-to-cart{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.woocommerce div.product form.cart.variations_form{display:block}
.woocommerce div.product form.cart .quantity,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity{
  float:none;
  margin:0;
}
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button{
  float:none;
  margin:0;
  height:55px;
  padding:0 48px;
  font-size:.722rem;          /* 13px */
  letter-spacing:1.4px;
  line-height:55px;
}
.woocommerce div.product form.cart{margin-bottom:0}

/* SKU and category ran together on one line. Given a rule above them and
   their own rows, they read as a spec block instead of a sentence. */
.woocommerce div.product .product_meta{
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--ct-bd);
  font-size:.778rem;          /* 14px */
  line-height:2;
  color:var(--ct-text);
}
.woocommerce div.product .product_meta > span{display:block}
.woocommerce div.product .product_meta .sku,
.woocommerce div.product .product_meta a{color:var(--ct-text-dark)}
.woocommerce div.product .product_meta a:hover{color:var(--ct-red)}

/* --- gallery --------------------------------------------------- */
.woocommerce div.product div.images .flex-control-thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:12px 0 0;
  padding:0;
}
.woocommerce div.product div.images .flex-control-thumbs li{
  width:auto;
  float:none;
  margin:0;
  list-style:none;
}
.woocommerce div.product div.images .flex-control-thumbs img{
  width:100%;
  opacity:.55;
  border:1px solid transparent;
  transition:opacity .15s,border-color .15s;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active{
  opacity:1;
  border-color:var(--ct-bd);
}

/* --- tabs ------------------------------------------------------ */
.woocommerce div.product .woocommerce-tabs{margin-top:64px}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:0 34px;
  margin:0 0 34px;
  padding:0;
  border-bottom:1px solid var(--ct-bd);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{
  display:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none;
  border:0;
  border-radius:0;
  margin:0;
  padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;
  padding:0 0 14px;
  margin-bottom:-1px;
  font-family:var(--ct-font-display);
  font-size:.833rem;          /* 15px */
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--ct-text);
  border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--ct-text-dark)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--ct-text-dark);
  border-bottom-color:var(--ct-red);
}
/* The tab already names the panel; the template prints the same words
   again as a 47px heading directly underneath it. */
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child{display:none}
.woocommerce div.product .woocommerce-Tabs-panel{max-width:72ch}
.woocommerce div.product .woocommerce-Tabs-panel p{margin:0 0 1.1em}
.woocommerce div.product .woocommerce-Tabs-panel--additional_information{max-width:none}

.woocommerce table.shop_attributes{
  max-width:640px;
  border:0;
  margin:0;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td{
  background:none;
  border:0;
  border-bottom:1px solid var(--ct-bd);
  padding:14px 16px 14px 0;
  font-style:normal;
  line-height:1.5;
}
.woocommerce table.shop_attributes th{
  font-family:var(--ct-font-display);
  font-size:.778rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--ct-text-dark);
  width:200px;
}
.woocommerce table.shop_attributes td p{margin:0}

.woocommerce #reviews #comments h2{font-size:1.278rem;margin:0 0 18px}
.woocommerce #review_form #respond .comment-reply-title{
  font-family:var(--ct-font-display);
  font-size:1.056rem;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--ct-text-dark);
  display:block;
  margin-bottom:14px;
}

/* --- related / upsell grid ------------------------------------- */
.woocommerce section.related,
.woocommerce section.upsells{
  margin-top:72px;
  padding-top:52px;
  border-top:1px solid var(--ct-bd);
}
.woocommerce section.related > h2,
.woocommerce section.upsells > h2{
  font-size:1.778rem;         /* 32px */
  line-height:1.15em;
  margin:0 0 34px;
}
.woocommerce ul.products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:44px 30px;
  margin:0;
  padding:0;
  list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{
  width:auto;
  float:none;
  margin:0;
  clear:none;
}
.woocommerce ul.products.columns-1{grid-template-columns:minmax(0,1fr)}
.woocommerce ul.products.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.woocommerce ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.woocommerce ul.products li.product a img{margin:0 0 16px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:.944rem;          /* 17px */
  line-height:1.3;
  padding:0;
  margin:0 0 8px;
}
.woocommerce ul.products li.product .price{
  font-size:1rem;
  margin:0 0 14px;
  display:block;
}
.woocommerce ul.products li.product .button{margin:0}

/* --- stacking -------------------------------------------------- */
@media (max-width:991px){
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary{
    float:none;
    width:100%;
    margin:0;
  }
  .woocommerce div.product div.summary{margin-top:34px}
  .woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  body.single-product main#main,
  body.post-type-archive-product main#main,
  body.tax-product_cat main#main,
  body.tax-product_tag main#main{padding:30px 18px 62px}
  .woocommerce div.product .product_title{font-size:1.611rem}   /* 29px */
  .woocommerce section.related > h2,
  .woocommerce section.upsells > h2{font-size:1.444rem}
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}
  .woocommerce div.product form.cart button.single_add_to_cart_button,
  .woocommerce div.product .single_add_to_cart_button{flex:1 1 auto;padding:0 24px}
  .woocommerce div.product .woocommerce-tabs ul.tabs{gap:0 22px}
}

/* --- specificity corrections ----------------------------------
   WooCommerce ships these three at a higher weight than the block
   above, so they are repeated here at a weight that actually wins
   rather than being marked !important:
     li.active          (0,5,2) beats a bare li
     div.quantity       (0,3,3) beats .quantity
     .alt.disabled      (0,4,1) beats .button.disabled
   -------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background:none;
  border:0;
}
.woocommerce div.product form.cart div.quantity,
.woocommerce div.product .woocommerce-variation-add-to-cart div.quantity{
  float:none;
  margin:0;
}
/* A variable product's add-to-cart is disabled until a variation is
   picked. The original site greyed it out in exactly this state, so it
   reads as "not yet" rather than as a live call to action. */
.woocommerce div.product button.button.alt.disabled,
.woocommerce div.product button.button.alt:disabled,
.woocommerce div.product button.button.alt.wc-variation-selection-needed,
.woocommerce div.product a.button.alt.disabled,
.woocommerce #respond input#submit.alt.disabled{
  background-color:var(--ct-grey-300);
  color:var(--ct-white);
  opacity:1;
  cursor:not-allowed;
}
.woocommerce div.product button.button.alt.disabled:hover,
.woocommerce div.product button.button.alt.wc-variation-selection-needed:hover{
  background-color:var(--ct-grey-300);
}

/* A full-column select for a two-option caliber list reads as a form
   field with nothing in it. Capped to the width the content needs. */
.woocommerce div.product form.cart .variations select{max-width:380px}

/* --- shop grid ------------------------------------------------
   WooCommerce sizes its product cards as a percentage of the row, on
   the assumption they are floated. Inside a grid track that percentage
   is read against the TRACK, so a card came out at 48% of its own
   column - an 80px image in a 167px cell on a phone. The percentage is
   dropped here at the weight woocommerce-smallscreen.css uses, which is
   one attribute selector higher than the main stylesheet.
   -------------------------------------------------------------- */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product{
  width:auto;
  float:none;
  margin:0;
  clear:none;
}

/* Cards in a row rarely carry the same number of title lines, so the
   buttons landed on three different baselines. Pushing the button down
   with auto margin lines them up without fixing a card height. */
.woocommerce ul.products li.product{
  display:flex;
  flex-direction:column;
}
.woocommerce ul.products li.product > a:first-of-type{display:block}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  margin-top:auto;
  align-self:flex-start;
}

/* The catalogue mixes 4:3 photographs with cut-outs on white, so the
   rows were ragged. One square tile per card, contained rather than
   cropped, keeps every image whole and every row level. */
.woocommerce ul.products li.product a img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background-color:var(--ct-white);
  margin:0 0 16px;
}

/* Related and upsell rows carry up to four items but usually hold
   three, which left a visible hole in a fixed four-column grid. */
.woocommerce section.related ul.products,
.woocommerce section.upsells ul.products{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

/* --- archive header ------------------------------------------- */
.woocommerce .woocommerce-products-header__title,
body.tax-product_cat .page-title,
body.post-type-archive-product .page-title{
  font-size:2.333rem;        /* 42px */
  line-height:1.1em;
  margin:0 0 26px;
}
.woocommerce .woocommerce-result-count{
  font-size:.889rem;
  color:var(--ct-text);
  margin:0 0 34px;
  line-height:48px;
}
.woocommerce .woocommerce-ordering{margin:0 0 34px}
.woocommerce .woocommerce-ordering select{
  width:240px;
  height:48px;
  padding:0 16px;
  font-family:var(--ct-font-body);
  font-size:.889rem;
  color:var(--ct-text-dark);
  background-color:var(--ct-white);
  border:1px solid var(--ct-bd);
  border-radius:0;
}

/* --- tabs on a phone ------------------------------------------
   Wrapped tabs put the active underline on the first row and the rule
   under the second, which reads as two unrelated lines. A single
   scrolling row keeps the indicator attached to its own baseline. */
@media (max-width:767px){
  .woocommerce div.product .woocommerce-tabs ul.tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
  .woocommerce div.product .woocommerce-tabs ul.tabs li a{white-space:nowrap}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.833rem}
  .woocommerce ul.products li.product .price{font-size:.889rem}
  .woocommerce ul.products li.product .button{padding:0 18px;font-size:.667rem}
  .woocommerce .woocommerce-products-header__title,
  body.tax-product_cat .page-title,
  body.post-type-archive-product .page-title{font-size:1.778rem}
  .woocommerce .woocommerce-ordering select{width:100%}
  .woocommerce .woocommerce-result-count{line-height:1.6;margin-bottom:14px}
}

/* --- mobile shop corrections ----------------------------------- */
@media (max-width:767px){
  .woocommerce section.related ul.products,
  .woocommerce section.upsells ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  /* the horizontal-only padding above collapsed the card button */
  .woocommerce ul.products li.product .button{padding:12px 18px;line-height:1.2}
}

/* ---------------------------------------------------------------
   Long-form pages
   The company story and the warranty terms are prose built as
   Elementor pages, so they never passed through page.php and got none
   of the article treatment: lines ran the full viewport, the title sat
   hard against the header, and body copy stayed at the marketing grey.
   The numbers below are the same ones the blog posts use (.ct-post),
   so an article and a long-form page read identically.

   Pages opt in through a body class - see cheytac_longform_slugs() in
   functions.php.
   --------------------------------------------------------------- */
body.ct-longform .elementor > .e-con{
  width:100%;
  max-width:1100px;
  margin-inline:auto;
  padding-inline:20px;
}
body.ct-longform .elementor > .e-con > .e-con-inner{
  max-width:none;
  padding-inline:0;
  width:100%;
}
body.ct-longform .elementor > .e-con:first-child{padding-top:52px}
body.ct-longform .elementor > .e-con:last-child{padding-bottom:80px}

/* the readable column: 72ch, left aligned inside the 1100px band */
body.ct-longform .elementor-widget-text-editor,
body.ct-longform .elementor-widget-heading,
body.ct-longform .elementor-widget-text-editor > .elementor-widget-container,
body.ct-longform .elementor-widget-heading > .elementor-widget-container{
  max-width:72ch;
}

body.ct-longform h1.elementor-heading-title{
  font-size:2.4rem;
  line-height:1.12;
  margin:0 0 26px;
  max-width:24ch;
}
body.ct-longform .elementor-widget-text-editor h2{
  font-size:1.7rem;
  line-height:1.2;
  margin:2em 0 .55em;
  color:var(--ct-text-dark);
}
body.ct-longform .elementor-widget-text-editor h3{
  font-size:1.35rem;
  line-height:1.25;
  margin:1.8em 0 .5em;
  color:var(--ct-text-dark);
}
body.ct-longform .elementor-widget-text-editor h4{
  font-size:1.15rem;
  margin:1.6em 0 .5em;
  color:var(--ct-text-dark);
}
body.ct-longform .elementor-widget-text-editor p{
  font-size:1.0556rem;
  line-height:1.75;
  margin:0 0 1.25em;
  color:var(--ct-grey-700);
}
body.ct-longform .elementor-widget-text-editor ul,
body.ct-longform .elementor-widget-text-editor ol{
  margin:0 0 1.25em;
  padding-left:1.4em;
}
body.ct-longform .elementor-widget-text-editor li{
  margin:0 0 .5em;
  line-height:1.7;
  color:var(--ct-grey-700);
}
body.ct-longform .elementor-widget-text-editor a{
  color:var(--ct-link);
  text-decoration:underline;
  text-underline-offset:2px;
}
body.ct-longform .elementor-widget-text-editor a:hover{color:var(--ct-link-hover)}
body.ct-longform .elementor-widget-text-editor strong{color:var(--ct-text-dark)}
body.ct-longform .elementor-widget-text-editor blockquote{
  margin:1.8em 0;
  padding:4px 0 4px 22px;
  border-left:3px solid var(--ct-red);
  font-size:1.1rem;
  line-height:1.6;
  color:var(--ct-text-dark);
}
body.ct-longform .elementor-widget-text-editor > .elementor-widget-container > *:first-child{margin-top:0}
body.ct-longform .elementor-widget-text-editor img{max-width:100%;height:auto}
body.ct-longform .elementor-widget-text-editor table{
  width:100%;border-collapse:collapse;margin:0 0 1.5em;
}
body.ct-longform .elementor-widget-text-editor th,
body.ct-longform .elementor-widget-text-editor td{
  border:1px solid var(--ct-bd);padding:10px 12px;text-align:left;font-size:15px;
}

/* The warranty page ends in a claim form. Same square control treatment
   as the shop so the two do not read as different sites. */
body.ct-longform .elementor-widget-form{max-width:720px;width:100%}
body.ct-longform .elementor-field-group > label.elementor-field-label{
  font-family:var(--ct-font-display);
  font-size:.778rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--ct-text-dark);
  margin-bottom:8px;
}
body.ct-longform .elementor-field-textual{
  height:52px;
  padding:0 16px;
  font-family:var(--ct-font-body);
  font-size:.889rem;
  color:var(--ct-text-dark);
  background-color:var(--ct-white);
  border:1px solid var(--ct-bd);
  border-radius:0;
  box-shadow:none;
}
body.ct-longform textarea.elementor-field-textual{height:auto;padding:14px 16px}

@media (max-width:640px){
  body.ct-longform .elementor > .e-con{padding-inline:18px}
  body.ct-longform .elementor > .e-con:first-child{padding-top:34px}
  body.ct-longform .elementor > .e-con:last-child{padding-bottom:56px}
  body.ct-longform h1.elementor-heading-title{font-size:1.85rem;max-width:none}
  body.ct-longform .elementor-widget-text-editor p{font-size:1rem}
}

/* --- long-form corrections -------------------------------------
   The 24ch cap .ct-post__title uses suits a short post title; the
   company-story title is 86 characters and broke into five lines, so
   long-form headings take the reading measure instead.

   The warranty page carries its heading inside the text widget rather
   than a heading widget, so both paths need the same treatment.
   -------------------------------------------------------------- */
body.ct-longform h1.elementor-heading-title{max-width:none}
body.ct-longform .elementor-widget-text-editor h1{
  font-size:2.4rem;
  line-height:1.12;
  margin:0 0 26px;
  color:var(--ct-text-dark);
}
body.ct-longform .elementor-widget-text-editor > .elementor-widget-container > h1:first-child{margin-top:0}

/* The bullet runs were literal "·" characters in paragraphs until the
   content was cleaned up; now that they are real lists they need the
   article list spacing. */
body.ct-longform .elementor-widget-text-editor ul{list-style:disc}
body.ct-longform .elementor-widget-text-editor ul li::marker{color:var(--ct-red)}

/* --- warranty claim form ---------------------------------------
   The form is the last thing on the page and ran straight on from the
   terms above it with a default grey submit. Given a rule, the same
   measure as the copy, and the site's button. */
body.ct-longform .elementor-widget-form{
  max-width:72ch;
  width:100%;
  margin-top:48px;
  padding-top:40px;
  border-top:1px solid var(--ct-bd);
}
body.ct-longform .elementor-field-group{margin-bottom:20px}
body.ct-longform .elementor-field-group.elementor-field-type-upload{align-items:flex-start}
body.ct-longform input[type="file"].elementor-field{
  font-size:.833rem;
  padding:14px 16px;
  height:auto;
  width:100%;
}
body.ct-longform .elementor-field-group .elementor-button,
body.ct-longform .elementor-form .elementor-button[type="submit"]{
  height:55px;
  padding:0 48px;
  font-family:var(--ct-font-display);
  font-size:.722rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:var(--ct-white);
  background-color:var(--ct-red);
  border:0;
  border-radius:0;
  transition:background-color .15s;
}
body.ct-longform .elementor-field-group .elementor-button:hover,
body.ct-longform .elementor-form .elementor-button[type="submit"]:hover{
  background-color:var(--ct-link-hover);
  color:var(--ct-white);
}
/* the submit sat centred under left-aligned fields */
body.ct-longform .elementor-field-group.elementor-field-type-submit{
  justify-content:flex-start;
  margin-top:12px;
}

/* The rule above landed on the widget, which Elementor sizes itself; the
   fields ended up 846px against a 721px text column. Constraining the
   widget's own container, and letting each field fill it, lines the form
   up with the copy it follows. */
body.ct-longform .elementor-widget-form{
  max-width:none;
  margin-top:0;
  padding-top:0;
  border-top:0;
}
body.ct-longform .elementor-widget-form > .elementor-widget-container{
  max-width:72ch;
  margin-top:48px;
  padding-top:40px;
  border-top:1px solid var(--ct-bd);
}
body.ct-longform .elementor-form .elementor-field-group{width:100%}
body.ct-longform .elementor-form .elementor-field-group.elementor-field-type-submit{width:auto}