/** Shopify CDN: Minification failed

Line 80:11 Unexpected "{"
Line 80:20 Expected ":"
Line 80:27 Unexpected "{"
Line 84:11 Unexpected "{"
Line 84:20 Expected ":"

**/
/* Announcement bar: slim pill, small tracked uppercase text.
   Extra specificity so it beats the type scale's .h5 rule further down. */
[id$="__announcement-bar"] {
  margin-top: 12px !important; /* the section sets 2rem inline */
}

.utility-bar .utility-bar__grid.curve-corner {
  border-radius: 999px;
}

.utility-bar .announcement-bar__message {
  min-height: 0;
  margin: 0;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

@media screen and (min-width: 750px) {
  .utility-bar .announcement-bar__message {
    padding: 10px 24px;
    font-size: 13px;
  }
}

.curve-corner {
    border-radius: 16px;
    overflow: hidden;
}

/* Product card titles (the H3 on product cards): 17px mobile, 19px desktop */
.card-product-title {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
}

@media screen and (min-width: 750px) {
    .card-product-title {
        font-size: 19px;
    }
}

.hide-on-desktop {
    display: none !important;
}

.product-compatible-accessories .card__content {
    display: flex;
    flex-direction: column;
}
.product-compatible-accessories .card__heading a {
    font-size: 14px;
    font-weight: 500;
}

.product .product-compatible-accessories .price .price__container span {
    font-size: 14px;
}

.product-compatible-accessories .card__content .quick-add {
  z-index: 10;
}

@media (min-width: 990px) {
  #Slider-{{ section.id }} {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding-right: 18% !important;
  }
  #Slider-{{ section.id }} .grid__item {
    scroll-snap-align: start;
  }
}

.slider-buttons {
  justify-content: center;
  margin-top: 1.5rem;
}
.slider-counter {
  font-size: 1.4rem;
  margin: 0 1rem;
}

.shopify-section-group-footer-group {
    width: 100%;
}
/* MOBILE max 989 */



/* =========================================================
   TYPE SCALE (Chaptr, Sep 2026)
   Mobile = under 750px, Desktop = 750px and up.
   Body 16/17px, headings step ~1.2x mobile and ~1.25x desktop.
   ========================================================= */

body {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}

.h0 { font-size: 36px; line-height: 1.1; letter-spacing: -0.01em; }
h1, .h1 { font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; }
h2, .h2 { font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }
h3, .h3 { font-size: 20px; line-height: 1.2; letter-spacing: 0; }
h4, .h4 { font-size: 17px; line-height: 1.25; letter-spacing: 0; }
h5, .h5 { font-size: 15px; line-height: 1.3; letter-spacing: 0; }
h6, .h6 { font-size: 13px; line-height: 1.3; letter-spacing: 0.02em; }

/* H0 to H3 in Aeonik Medium (the theme asks for 600, which has no Aeonik file and falls to Bold) */
.h0, h1, .h1, h2, .h2, h3, .h3 { font-weight: 500; }

.caption { font-size: 13px; line-height: 1.4; }

@media screen and (min-width: 750px) {
  body { font-size: 17px; }
  .h0 { font-size: 56px; }
  h1, .h1 { font-size: 44px; }
  h2, .h2 { font-size: 30px; }
  h3, .h3 { font-size: 24px; }
  h4, .h4 { font-size: 18px; }
  h5, .h5 { font-size: 16px; }
  h6, .h6 { font-size: 14px; }
}

/* Product page title (section-main-product.css loads later and sets 34px, so extra specificity) */
.product__info-container .product__title h1 {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Product page price (Space Mono). Compare-at and compatible-accessory prices keep their own sizes. */
body .product .price__container span {
  font-size: 24px;
  line-height: 1.2;
}

/* Product page vendor / caption line (Space Mono) */
.product__info-container .product__text.caption-with-letter-spacing {
  font-size: 13px;
  line-height: 1.4;
}

/* Collection description: 16/18px, no 2px letter spacing (overrides component-collection-hero.css) */
.collection-hero .collection-hero__title + .collection-hero__description {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}

@media screen and (min-width: 750px) {
  .product__info-container .product__title h1 { font-size: 36px; }
  body .product .price__container span { font-size: 28px; }
  .product__info-container .product__text.caption-with-letter-spacing { font-size: 14px; }
  .collection-hero .collection-hero__title + .collection-hero__description { font-size: 18px; }
}

/* ======================= END TYPE SCALE ======================= */

/* Desktop header menu: top-level links (incl. Cart) at 18px. Dropdown items keep their own size. */
/* base.css sets 26px on the inner span, so size the span as well */
.header__inline-menu .header__menu-item:not(.caption-large),
.header__inline-menu .header__menu-item:not(.caption-large) span {
  font-size: 18px;
  letter-spacing: 0;
}

/* Vertically centre the menu links against the taller Get a Quote button */
.header__inline-menu .list-menu--inline {
  align-items: center;
}

#get-a-quote-button {
  /* Layout */
  display: flex;
  padding: 12px 25px;
  justify-content: center;
  align-items: center;
  gap: 10px;

  /* Style */
  border-radius: 50px;
  background: var(--Deep-Blue, #005FDC);
  background: var(--Deep-Blue, color(display-p3 0.0541 0.3646 0.8305));
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
#get-a-quote-button:hover,
#get-a-quote-button:focus-visible {
  background: #0044AB;
  color: #fff;
  text-decoration: none;
}
#get-a-quote-button-mobile {
  border-radius: 20px;
  background-color: #0E5DD4;
  color: #fff;
  height: 100%;
  font-size: 16px;
  line-height: 1;
  padding: 16px 25px;
  width: 100%;
}

/* Temperature variant buttons: selected colour per value.
   Default selected colour (component-product-variant-picker.css) is #0E5DD4. Icons invert to white when selected. */
.product-form__input--pill input[type='radio']:checked + label.variant-value--room-cold {
  background-color: #005FDC;
}

.product-form__input--pill input[type='radio']:checked + label.variant-value--hot-cold {
  background-color: #D9412B;
}

/* Product cards: no underline on hover, text goes to #00428D instead.
   Overrides .underline-links-hover:hover a in component-card.css. */
.product-card-wrapper.underline-links-hover:hover a {
  text-decoration: none;
  color: #00428D;
}

/* Collection pages: cap the description width. Extra specificity so it beats
   component-collection-hero.css, which loads later and sets max-width: 100% when a collection image is shown. */
.collection-hero .collection-hero__text-wrapper .collection-hero__description {
  max-width: 880px;
}

/* Quote and contact pages: form sticks as you scroll (desktop only, where it sits in its own column).
   Header hides on scroll down, so the form sits 32px from the top.
   When the header slides back in on scroll up, the form drops below it. */
@media screen and (min-width: 990px) {
  #custom-page-main-container .cp-right-content .contact {
    position: sticky;
    top: 32px;
    transition: top 0.25s ease;
  }

  body:has(.shopify-section-header-sticky:not(.shopify-section-header-hidden)) #custom-page-main-container .cp-right-content .contact {
    top: calc(var(--header-height, 100px) + 32px);
  }
}

/* Quote and contact pages: stack the copy and form below 990px, form underneath.
   The section's own inline styles force a 49/49 row, so these use extra specificity to win. */
@media screen and (max-width: 989px) {
  body #custom-page-main-container {
    flex-direction: column;
    gap: 48px;
  }

  body #custom-page-main-container .cp-left-content,
  body #custom-page-main-container .cp-right-content {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* =========================================================
   CAROUSEL CONTROLS: Featured collection sections (e.g. Popular Products on the homepage)
   and the Compatible accessories carousel on product pages.
   Prev arrow, counter and next arrow sit together in one pill.
   Round arrow buttons fill on hover; disabled arrows fade out.
   ========================================================= */
.collection slider-component .slider-buttons,
.product-compatible-accessories slider-component .slider-buttons {
  display: flex;
  width: fit-content;
  margin: 24px auto 0;
  padding: 4px;
  gap: 4px;
  border: 1px solid #E3E3E3;
  border-radius: 999px;
  background: #fff;
}

.collection slider-component .slider-button,
.product-compatible-accessories slider-component .slider-button {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #313336;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.collection slider-component .slider-button .icon,
.product-compatible-accessories slider-component .slider-button .icon {
  height: 10px;
}

.collection slider-component .slider-button:not([disabled]):hover,
.product-compatible-accessories slider-component .slider-button:not([disabled]):hover {
  background: #005FDC;
  color: #fff;
}

.collection slider-component .slider-button:not([disabled]):hover .icon,
.product-compatible-accessories slider-component .slider-button:not([disabled]):hover .icon {
  color: #fff;
}

.collection slider-component .slider-button:focus-visible,
.product-compatible-accessories slider-component .slider-button:focus-visible {
  outline: 2px solid #005FDC;
  outline-offset: 2px;
}

.collection slider-component .slider-button[disabled],
.product-compatible-accessories slider-component .slider-button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.collection slider-component .slider-button[disabled] .icon,
.product-compatible-accessories slider-component .slider-button[disabled] .icon {
  color: #313336;
}

.collection slider-component .slider-counter,
.product-compatible-accessories slider-component .slider-counter {
  min-width: 56px;
  margin: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #313336;
  align-items: center;
}

/* Desktop (990px and up): pill sits top right, in line with the section title.
   The buttons have to stay inside slider-component for the theme's slider script,
   so they're positioned up out of it rather than moved in the markup.
   The title row gets a fixed 50px height (the pill's height) so the two line up,
   plus right padding so a long title never runs under the pill. */
@media screen and (min-width: 990px) {
  .collection .collection__title--desktop-slider.title-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 50px;
    margin-bottom: 32px;
    padding-left: 2rem;
    padding-right: calc(2rem + 180px);
  }

  .collection .collection__title--desktop-slider .title {
    margin-bottom: 0;
  }

  .collection slider-component.slider-component-desktop .slider-buttons {
    position: absolute;
    right: calc(max(0px, (100% - 1660px) / 2) + 2rem);
    bottom: calc(100% + 32px);
    margin: 0;
    z-index: 2;
  }

  /* Keep the carousel inside the page width so no cards get cut off at the screen edges.
     The theme runs it edge to edge with a peek of the next card; this shows whole cards only. */
  .collection slider-component.slider-component-desktop {
    --desktop-margin-left-first-item: 0px;
    max-width: 1660px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .collection slider-component.slider-component-desktop .slider--desktop:after {
    content: none;
  }

  .collection .slider--desktop.grid--2-col-desktop .grid__item { width: calc((100% - var(--grid-desktop-horizontal-spacing)) / 2); max-width: none; }
  .collection .slider--desktop.grid--3-col-desktop .grid__item { width: calc((100% - var(--grid-desktop-horizontal-spacing) * 2) / 3); max-width: none; }
  .collection .slider--desktop.grid--4-col-desktop .grid__item { width: calc((100% - var(--grid-desktop-horizontal-spacing) * 3) / 4); max-width: none; }
  .collection .slider--desktop.grid--5-col-desktop .grid__item { width: calc((100% - var(--grid-desktop-horizontal-spacing) * 4) / 5); max-width: none; }
}

/* Mobile (under 750px): bigger cards in the carousel, about 1.3 in view.
   One full card, plus the edge of the next so it's clear you can swipe.
   Width = (screen - 15px left gutter - gap between cards) / 1.3 */
@media screen and (max-width: 749px) {
  .collection .slider.slider--tablet.grid--peek .grid__item {
    width: calc((100% - 1.5rem - var(--grid-mobile-horizontal-spacing)) / 1.3);
    max-width: none;
  }
}

/* Compatible accessories carousel (product pages, inside the product info column).
   Same pill as Popular Products: top right of the heading on desktop, centred under the cards on mobile.
   This carousel has no page counter in its markup, so the pill holds just the two arrows. */
.product-compatible-accessories slider-component .slider-button svg {
  width: auto;
  height: 10px;
}

.product-compatible-accessories .slider.slider--everywhere .slider__slide {
  scroll-snap-align: start;
}

/* The block hides its arrows on tablet; show them there too */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .product-compatible-accessories slider-component .slider-buttons.medium-hide {
    display: flex !important;
  }
}

@media screen and (min-width: 990px) {
  .product-compatible-accessories .product-compatible-accessories__heading {
    display: flex;
    align-items: center;
    min-height: 50px;
    margin: 0 0 16px;
    padding-right: 120px;
  }

  .product-compatible-accessories slider-component {
    position: relative;
  }

  .product-compatible-accessories slider-component .slider-buttons {
    position: absolute;
    right: 0;
    bottom: calc(100% + 16px);
    margin: 0;
    z-index: 2;
  }
}

/* Mobile: about 1.3 cards in view, same as Popular Products */
@media screen and (max-width: 749px) {
  .product-compatible-accessories .slider.slider--everywhere .grid__item {
    width: calc((100% - var(--grid-mobile-horizontal-spacing)) / 1.3);
    max-width: none;
  }
}

/* Collection cards (Browse our range on the homepage, and the collections page).
   Title sits under the image instead of over it. The rounded corners move from the
   whole card to the image, and the title link stretches over the card so the image stays clickable. */
.collection-card-wrapper .card {
  position: relative;
}

.collection-card-wrapper .card__heading a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.collection-list .collection-list__item.curve-corner {
  border-radius: 0;
  overflow: visible;
}

.collection-card-wrapper .card__inner {
  border-radius: 16px;
  overflow: hidden;
}

.collection-card-wrapper .card > .card__content--below {
  display: block;
  margin: 0;
  padding: 12px 0 0;
}

.collection-card-wrapper .card__content--below .card__information {
  padding: 0;
}

.collection-card-wrapper .card__content--below .card__heading {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}

.collection-card-wrapper .card__content--below .card__heading a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.collection-card-wrapper:hover .card__content--below .card__heading a {
  color: #00428D;
  text-decoration: none;
}

@media screen and (min-width: 750px) {
  .collection-card-wrapper .card__content--below .card__heading {
    font-size: 22px;
  }
}

/* Cart drawer, empty state: smaller "Your cart is empty" heading */
cart-drawer .drawer__inner-empty .cart__empty-text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}

@media screen and (min-width: 750px) {
  cart-drawer .drawer__inner-empty .cart__empty-text {
    font-size: 20px;
  }
}

/* =========================================================
   MOBILE FOOTER (under 990px)
   - Products and Customer Care sit side by side instead of one long column
   - Tighter link spacing (about 34px per row instead of about 50px)
   - Legal links on one wrapping row under a divider
   - Newsletter set apart with its own spacing
   Selectors start with .footer so they beat the footer section's own inline styles.
   ========================================================= */
@media screen and (max-width: 989px) {
  .footer .footer-block.grid__item.footer-menu--link-list-container {
    margin-top: 24px;
    margin-bottom: 0;
    gap: 24px;
  }

  .footer .footer-menu--link-list-container .footer-top-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .footer .footer-block--menu .footer-block__heading {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
  }

  .footer .footer-block__details-content > li {
    margin: 0;
  }

  .footer .footer-block__details-content .list-menu__item--link {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 16px;
    line-height: 1.4;
  }

  .footer .footer-bottom-policies {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 12px;
  }

  .footer .footer-bottom-policies ul {
    padding-top: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
  }

  .footer .footer-bottom-policies ul li {
    display: block;
  }

  .footer .footer-bottom-policies .list-menu__item--link {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
  }

  .footer .footer-newsletter-block {
    margin-top: 32px;
  }

  .footer .footer-block__newsletter .footer-block__heading {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .footer .field__input-custom,
  .footer .newsletter-form__button-custom {
    height: 48px;
    font-size: 16px;
  }

  .footer .newsletter-form__button-custom {
    padding: 0 20px;
  }
}

/* =========================================================
   DESKTOP FOOTER (990px and up)
   Layout: logo | Products + Customer Care | newsletter, on one baseline.
   Small uppercase column labels, softer link colour that brightens on hover,
   more breathing room, and a quieter legal and copyright row.
   Selectors start with .footer so they beat the footer section's own styles.
   ========================================================= */
@media screen and (min-width: 990px) {
  .footer.page-width-custom {
    padding: 72px 32px 32px;
  }

  .footer .footer__content-top {
    padding-bottom: 0;
  }

  .footer .footer__blocks-wrapper {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) minmax(0, 1.6fr);
    column-gap: 72px;
    align-items: start;
    margin: 0;
  }

  .footer .footer__blocks-wrapper > .footer-block {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .footer .footer-block__image-wrapper {
    margin-bottom: 0;
  }

  /* Link columns */
  .footer .footer-menu--link-list-container {
    gap: 0;
  }

  .footer .footer-menu--link-list-container .footer-top-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }

  /* The theme's grid gives each menu block 25% width, which squeezed it to a quarter of its column */
  .footer .footer-top-columns > .footer-block,
  .footer .footer-menu--link-list-container {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .footer .footer-block--menu .footer-block__heading,
  .footer .footer-block__details-content .list-menu__item--link {
    white-space: nowrap;
  }

  .footer .footer-block--menu .footer-block__heading {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px;
  }

  .footer .footer-block__details-content > li {
    display: block;
    margin: 0;
  }

  .footer .footer-block__details-content .list-menu__item--link {
    display: inline-block;
    padding: 5px 0;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    transition: color 0.2s ease;
  }

  .footer .footer-block__details-content .list-menu__item--link:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  /* Legal links: one quiet row under the columns */
  .footer .footer-bottom-policies {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer .footer-bottom-policies ul {
    padding-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
  }

  .footer .footer-bottom-policies ul li {
    display: block;
  }

  .footer .footer-bottom-policies .list-menu__item--link {
    padding: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
  }

  /* Newsletter */
  .footer .footer-newsletter-block {
    align-items: flex-start;
  }

  .footer .footer-block__newsletter .footer-block__heading {
    font-size: 22px;
    font-weight: 500 !important; /* the section sets 400 inline */
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
  }

  .footer .field-custom {
    gap: 8px;
  }

  .footer .field__input-custom {
    height: 48px;
    font-size: 16px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.04);
    transition: border-color 0.2s ease;
  }

  .footer .field__input-custom:focus {
    border-color: rgba(255, 255, 255, 0.6);
  }

  .footer .field__input-custom::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }

  .footer .newsletter-form__button-custom {
    height: 48px;
    padding: 0 24px;
    font-size: 16px;
    background: #005FDC;
    transition: background 0.2s ease;
  }

  .footer .newsletter-form__button-custom:hover {
    background: #0044AB;
  }

  /* The section sets 12px and #F0F0E5 inline on this line, so !important is needed */
  .footer .footer-block__newsletter > p {
    font-size: 13px !important;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 12px 0 0;
  }

  /* Copyright row */
  .footer .footer__content-bottom {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer .footer__copyright {
    margin-top: 0;
  }

  .footer .copyright__content {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
  }
}

.page-width-custom {
  margin:0 auto;
  padding: 0 1.5rem;
}

@media screen and (min-width: 750px) {
    .page-width {
        padding: 0 2rem;
    }
}


/* custom css are here you can do this to target spicific element..... */

h1 {
  /* font-size: 21px !important */
}

h2 {
  /* font-size: 21px !important */
}

h3 {
  /* font-size: 21px !important */
}

h4 {
  /* font-size: 21px !important */
}

h5 {
  /* font-size: 21px !important */
}

h6 {
  /* font-size: 21px !important */
}

p {
  /* font-size: 21px !important */
}

ul li {
  /* font-size: 21px !important */
}