.elementor-4708 .elementor-element.elementor-element-0e47fe9{text-align:start;}.elementor-4708 .elementor-element.elementor-element-0e47fe9 img{width:200px;}.elementor-4708 .elementor-element.elementor-element-7c1ba6b.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__container{right:0;left:auto;transform:none;}.elementor-4708 .elementor-element.elementor-element-7c1ba6b{--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}.elementor-4708 .elementor-element.elementor-element-7c1ba6b .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-4708 .elementor-element.elementor-element-2afa0d3 .elementor-menu-toggle{margin:0 auto;}.elementor-4708 .elementor-element.elementor-element-2afa0d3 .elementor-nav-menu .elementor-item{font-family:"Barlow", Sans-serif;font-size:13px;}.elementor-4708 .elementor-element.elementor-element-2afa0d3 .elementor-nav-menu--main .elementor-item{color:#3F4448;fill:#3F4448;padding-left:0px;padding-right:0px;padding-top:5px;padding-bottom:5px;}.elementor-4708 .elementor-element.elementor-element-2afa0d3 .elementor-nav-menu--main .elementor-item:hover,
					.elementor-4708 .elementor-element.elementor-element-2afa0d3 .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-4708 .elementor-element.elementor-element-2afa0d3 .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-4708 .elementor-element.elementor-element-2afa0d3 .elementor-nav-menu--main .elementor-item:focus{color:#ED1C24;fill:#ED1C24;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1366px){.elementor-4708 .elementor-element.elementor-element-7c1ba6b.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__container{right:0;left:auto;transform:none;}}@media(max-width:1024px){.elementor-4708 .elementor-element.elementor-element-7c1ba6b.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__container{right:0;left:auto;transform:none;}}@media(max-width:767px){.elementor-4708 .elementor-element.elementor-element-0e47fe9 img{width:130px;}.elementor-4708 .elementor-element.elementor-element-7c1ba6b.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__container{right:0;left:auto;transform:none;}}/* Start custom CSS *//* ===== The Spray Market header =====
   Layout is driven from here so the three rows stay consistent.
   Colours use the global palette values from Site Settings. */

/* Row A - utility bar */
.elementor-4708 .elementor-element-c325aa8 {
  background: #1C1C1C;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding: 7px 24px;
  flex-wrap: wrap;
}
.elementor-4708 .elementor-element-c325aa8 a { color: #FFFFFF; }
.elementor-4708 .elementor-element-c325aa8 a:hover { color: #ED1C24; }
/* first item (ships from) pushed left */
.elementor-4708 .elementor-element-c325aa8 > :first-child { margin-right: auto; }

/* Row B - main header */
.elementor-4708 .elementor-element-dc4835d {
  background: #FFFFFF;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
}
.elementor-4708 .elementor-element-dc4835d .elementor-element-261fc4d { flex: 1 1 auto; max-width: 720px; }

/* Row C - department nav */
.elementor-4708 .elementor-element-ec2f832 {
  background: #FFFFFF;
  border-top: 1px solid #E3E5E7;
  border-bottom: 1px solid #E3E5E7;
  flex-direction: row;
  align-items: stretch;
  padding: 0 24px;
}

/* main header sticks to the top on scroll */
.elementor-4708 .elementor-element-dc4835d {
  position: sticky;
  top: 0;
  z-index: 99;
}
/* search takes the middle, cart sits hard right */
.elementor-4708 .elementor-element-261fc4d { flex: 1 1 auto; max-width: 760px; }
.elementor-4708 .elementor-element-7c1ba6b { margin-left: auto; }

/* department dropdowns */
.elementor-4708 .elementor-element-6955df5 .sub-menu {
  border: 1px solid #E3E5E7;
  box-shadow: 0 8px 24px rgba(28,28,28,.10);
  padding: 6px 0;
}
.elementor-4708 .elementor-element-6955df5 .sub-menu a { font-size: 13px; }

/* ============================================================
   SITE-WIDE (via header template, loads on every page):
   Tablet Portrait (768-1024px) - uniform proportional scale-down
   of the Laptop layout (1025-1366px). Requested 26 Aug 2026:
   tablet must be an EXACT smaller version of the laptop layout -
   same columns/structure/proportions, never re-stacked or
   independently redesigned. Achieved by pinning the whole
   document to a fixed 1366px-wide layout (matching the laptop
   breakpoint's reference width) and visually scaling that entire
   rendering down with CSS zoom to exactly fit the real (smaller)
   tablet viewport width. Placed here (not in the Kit's global
   Custom CSS) because Kit-level saves are currently broken by an
   unrelated Elementor Pro bug - see project recap for details.
   Scoped strictly to 768-1024px so it never touches the existing,
   approved mobile (<=767px) or laptop/desktop (>1024px) rendering.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  html body {
    width: 1366px !important;
    max-width: 1366px !important;
    zoom: calc(100vw / 1366px);
  }
}

/* ============================================================
   MOBILE (<=767px) - compact sticky header on scroll
   Requested 3 Sep 2026: the single header row (dc4835d - logo,
   store-location, search, icon-links, cart, nav) wraps onto
   several stacked lines at mobile widths, and since the row is
   position:sticky that full wrapped height stays pinned at the
   top while scrolling, eating up to half the screen. Tighten the
   resting padding a bit, and once the page scrolls past ~40px
   (js in the tsmloc002 widget toggles tsm-header--scrolled on
   the header element) collapse to logo + search + cart only.
   (Updated 3 Sep 2026 follow-up: search stays visible when
   scrolled, only store-location and icon-links hide.)
   ============================================================ */
@media (max-width: 767px) {
  /* ==========================================================
     MOBILE (<=767px) - compact sticky header on scroll
     Updated 3 Sep 2026: animated tall->short collapse. Base
     (resting) rules below carry the transition declarations so
     both directions (scrolling down to collapse, back up to
     restore) ease smoothly with one shared 280ms deceleration
     curve, instead of the previous instant snap. Reduced-motion
     users get an instant snap via the override at the bottom.
     ============================================================ */
  .elementor-4708 .elementor-element-dc4835d {
    padding: 10px 16px;
    gap: 10px;
    transition: padding .24s cubic-bezier(.34,1.8,.64,1), gap .24s cubic-bezier(.34,1.8,.64,1), box-shadow .24s cubic-bezier(.34,1.8,.64,1);
  }
  .elementor-4708.tsm-header--scrolled .elementor-element-dc4835d {
    padding: 6px 16px;
    gap: 8px;
    flex-wrap: nowrap !important;
    align-items: center !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
  }

  /* Icon-links row: collapses height + fades instead of snapping to display:none */
  .elementor-4708 .elementor-element-99e0acc {
    overflow: hidden;
    max-height: 60px;
    opacity: 1;
    transition: max-height .24s cubic-bezier(.34,1.8,.64,1), opacity .24s cubic-bezier(.34,1.8,.64,1), margin .24s cubic-bezier(.34,1.8,.64,1);
  }
  .elementor-4708.tsm-header--scrolled .elementor-element-99e0acc {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    pointer-events: none;
  }

  /* Store-location bar: same treatment */
  .elementor-4708 .elementor-element-tsmloc002 {
    overflow: hidden;
    max-height: 60px;
    opacity: 1;
    transition: max-height .24s cubic-bezier(.34,1.8,.64,1), opacity .24s cubic-bezier(.34,1.8,.64,1), margin .24s cubic-bezier(.34,1.8,.64,1);
  }
  .elementor-4708.tsm-header--scrolled .elementor-element-tsmloc002 {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    pointer-events: none;
  }

  /* Logo: shrinks smoothly, width follows automatically (intrinsic ratio) */
  .elementor-4708 .elementor-element-0e47fe9 img {
    max-height: 52px;
    width: auto;
    transition: max-height .24s cubic-bezier(.34,1.8,.64,1);
  }
  .elementor-4708.tsm-header--scrolled .elementor-element-0e47fe9 {
    flex: 0 0 auto !important;
  }
  .elementor-4708.tsm-header--scrolled .elementor-element-0e47fe9 img {
    max-height: 24px !important;
    width: auto !important;
  }

  /* Search field: container + internal sizing all ease together */
  .elementor-4708.tsm-header--scrolled .elementor-element-261fc4d {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .elementor-4708.tsm-header--scrolled .elementor-element-261fc4d .elementor-widget-container,
  .elementor-4708.tsm-header--scrolled .elementor-element-261fc4d .dgwt-wcas-search-wrapp {
    min-width: 0 !important;
    width: 100% !important;
  }
  .elementor-4708 .elementor-element-261fc4d input {
    transition: height .24s cubic-bezier(.34,1.8,.64,1), padding .24s cubic-bezier(.34,1.8,.64,1), font-size .24s cubic-bezier(.34,1.8,.64,1);
  }
  .elementor-4708.tsm-header--scrolled .elementor-element-261fc4d input {
    height: 36px !important;
    padding: 6px 12px 6px 40px !important;
    font-size: 13px !important;
    min-width: 0 !important;
  }
  .elementor-4708 .elementor-element-261fc4d .dgwt-wcas-ico-magnifier {
    transition: top .24s cubic-bezier(.34,1.8,.64,1), left .24s cubic-bezier(.34,1.8,.64,1), width .24s cubic-bezier(.34,1.8,.64,1), height .24s cubic-bezier(.34,1.8,.64,1);
  }
  .elementor-4708.tsm-header--scrolled .elementor-element-261fc4d .dgwt-wcas-ico-magnifier {
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 9px !important;
    width: 14px !important;
    height: 14px !important;
  }
  .elementor-4708 .elementor-element-261fc4d .dgwt-wcas-search-submit {
    transition: top .24s cubic-bezier(.34,1.8,.64,1), left .24s cubic-bezier(.34,1.8,.64,1), height .24s cubic-bezier(.34,1.8,.64,1), width .24s cubic-bezier(.34,1.8,.64,1);
  }
  .elementor-4708.tsm-header--scrolled .elementor-element-261fc4d .dgwt-wcas-search-submit {
    top: 50% !important;
    left: 10px !important;
    transform: translateY(-50%) !important;
    height: 36px !important;
    width: 32px !important;
  }

  /* Cart: button footprint eases to a compact square; price text fades+collapses rather than snapping away */
  .elementor-4708.tsm-header--scrolled .elementor-element-7c1ba6b {
    flex: 0 0 auto !important;
  }
  .elementor-4708 .elementor-element-7c1ba6b .elementor-menu-cart__toggle_button {
    transition: width .24s cubic-bezier(.34,1.8,.64,1), height .24s cubic-bezier(.34,1.8,.64,1), padding .24s cubic-bezier(.34,1.8,.64,1), border-radius .24s cubic-bezier(.34,1.8,.64,1);
  }
  .elementor-4708.tsm-header--scrolled .elementor-element-7c1ba6b .elementor-menu-cart__toggle_button {
    width: 40px !important;
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }
  .elementor-4708 .elementor-element-7c1ba6b .elementor-button-text {
    display: block;
    max-width: 60px;
    opacity: 1;
    overflow: hidden;
    transition: max-width .24s cubic-bezier(.34,1.8,.64,1), opacity .24s cubic-bezier(.34,1.8,.64,1);
  }
  .elementor-4708.tsm-header--scrolled .elementor-element-7c1ba6b .elementor-button-text {
    max-width: 0 !important;
    opacity: 0 !important;
  }
}

/* Respect reduced-motion: snap instead of ease for the mobile header collapse above */
@media (prefers-reduced-motion: reduce) {
  .elementor-4708 .elementor-element-dc4835d,
  .elementor-4708 .elementor-element-99e0acc,
  .elementor-4708 .elementor-element-tsmloc002,
  .elementor-4708 .elementor-element-0e47fe9 img,
  .elementor-4708 .elementor-element-261fc4d input,
  .elementor-4708 .elementor-element-261fc4d .dgwt-wcas-ico-magnifier,
  .elementor-4708 .elementor-element-261fc4d .dgwt-wcas-search-submit,
  .elementor-4708 .elementor-element-7c1ba6b .elementor-menu-cart__toggle_button,
  .elementor-4708 .elementor-element-7c1ba6b .elementor-button-text {
    transition-duration: .01ms !important;
  }
}/* End custom CSS */