/** Shopify CDN: Minification failed

Line 11:0 All "@import" rules must come first

**/
html, body {
    background-color: #F5F3EB!important;
  font-family: "HelveticaNeue", san-serif!important;
}

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');


h1 {font-family: "Bitter", serif!important; font-weight: 600!important;}
h2 {font-family: "Bitter", serif!important; font-size: 38px!important; color: #2f4f4f!important; font-weight: 600!important;}
h3 {font-family: "Bitter", serif!important; font-size: 30px!important; font-weight: 600!important;}
h4 {}
p {font-family: "HelveticaNeue", san-serif!important; font-size: 15px; font-weight: 400; line-height: 21px;}

.productitem--title {font-family: "HelveticaNeue", san-serif!important; font-size: 18px!important; font-weight: 400!important;}

.utility-bar .social-link, .utility-bar__menu-link {color: #000!important;}

.cart-item--content-title {font-size: 1.125rem!important;}

.highlights-banner__heading {font-weight: 600!important; font-size: 25px!important; color: #2F4F4F;}

.back-to-top__button {color: #fff; background-color: #008080!important; border: 1px solid #008080!important;}
.back-top-top__button:hover {color: #008080; background-color: #fff; border: 1px solid #008080;}

.product-recently-viewed__wrapper {background-color: #F5F3EB!important;}
.site-header-main {background-color: #F5F3EB!important;}
.site-navigation {background-color: #F5F3EB!important; justify-content: center!important;}
.productitem--emphasis .productitem__price .price__current {color: #000!important; font-weight: 600!important;}
.productgrid--utils {background: #f5f3eb!important;}

.product-form--atc-button {color: #fff; background-color: #008080!important; border: 1px solid #008080!important;}
.product-form--atc-button:hover {color: #000!important; background-color: #fff!important; border: 1px solid #353535!important;}

.product-block:first-child>:first-child {color: #008080;}

.atc--product-details--title {font-size: 20px!important;}

.site-footer-block-newsletter .newsletter .button-primary {border-radius: 5px !important;}

.shopify-payment-button .shopify-payment-button__more-options {color: #2f4f4f!important;}

.social-link {color: #fff!important;}

.blogposts--footer-link {
  background: #008080;
  color: #fff!important;
  padding: 10px 30px;
  border-radius: 25px;
}
.blogposts--footer {
  margin-top: 3.25rem!important;
}

.product-recently-viewed--section .flickity-viewport:before, .product-recently-viewed--section .flickity-viewport:after {background: none!important;}
.product-recently-viewed--section .flickity-viewport:after {background: none!important;}

.product-recently-viewed__clear {color: #2f4f4f!important;}

#yotpo-main-widget-btn[data-v-45e7fb23] {color: #000000!important; background-color: #ffffff!important; border: 1px solid;}

.site-footer-wrapper {
  color: #fff!important;
  background: #2f4f4f!important;
}

.slideshow-slide__button--primary {border-radius: 25px!important;}
.slideshow-slide__button--primary:not(.disabled):hover {border-radius: 25px;}

.button-primary {
  background-color: #008080!important;
  border: 1px solid #008080!important; border-radius: 25px!important;
}
.button-secondary{background-color: #fff!important; border: 1px solid #000!important; color: #000!important; border-radius: 25px!important;}

.product-title {font-weight: 600!important;}

.free-shipping-bar {background-color: #f5f3eb!important;}
.free-shipping-bar__progress {background-color: #2f4f4f!important;}

.site-footer-block-title {font-size: 18px!important; color: #fff!important;}
.site-footer-wrapper {margin-top: 80px!important;}
.site-footer-item--information {
  border-top: 1px solid #659090!important;
}
.site-footer-credits {
  color: #fff!important;
}
.site-footer-item--information .navmenu .navmenu-item:not(:last-child) {
  border-right: 1px solid #fff!important;
}

.site-footer-wrapper .navmenu-link, .site-footer-wrapper .site-footer-credits a, .site-footer-wrapper .rte a {color: #fff!important;}

.collection--title {text-align: center;}
.collection--description {width: 100%; max-width: 60% !important; margin: 0 auto; text-align:center!important;}
#ch {display: none;}
#ch:checked ~ .content {display: block;}
#ch:checked ~ label {display: none;}
.content {display: none;}
.label1 {display: inline-block; cursor: pointer; color: #008080; margin-top: 12px;}

/* General Styling for the Calculator */
#skirting-board-calculator {
    background-color: transparent; /* Transparent background */
    padding: 20px;
    max-width: 600px;
    margin: 20px auto;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

#skirting-board-calculator h3 {
    color: #333333;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Spacing for form sections */
.form-section {
    margin-bottom: 20px;
}

/* Tab Styling */
.tab-container {
    display: flex;
    margin-bottom: 20px;
    gap: 10px; /* Add spacing between tabs */
}

.tab-link {
    flex: 1;
    padding: 10px;
    text-align: center;
    background-color: #008080; /* Default background */
    color: #ffffff;
    cursor: pointer;
    border: none;
    font-size: 16px;
    border-radius: 5px; /* Rounded corners for tabs */
}

.tab-link.active {
    background-color: #6ea91c; /* Active tab color */
}

.tab-link:hover {
    background-color: #2E5050; /* Hover effect */
    color: #ffffff;
}

/* Tab Content Styling */
.tab-content {
    display: none; /* Hidden by default */
    padding: 0px; /* Remove background color and keep padding for consistent spacing */
}

.tab-content.active {
    display: block; /* Show active tab */
}

/* Input Fields */
#skirting-board-calculator input[type="number"],
#skirting-board-calculator select {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    background-color: transparent;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-sizing: border-box;
    color: #333333;
    margin-bottom: 20px; /* Add spacing between input fields */
}

/* Buttons */
#skirting-board-calculator button {
    background-color: #008080;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    margin-top: 20px; /* Add spacing above buttons */
    margin-bottom: 20px; /* Add spacing below buttons to separate from next elements */
    display: block;
    width: auto; /* Prevent buttons from being too wide */
}

#skirting-board-calculator button:hover {
    background-color: #2E5050;
}

/* Remove Icon Style for Room and Wall (Unified Style) */
.remove-icon {
    font-size: 18px;
    cursor: pointer;
    color: #ff0000; /* Red remove icon */
}

.remove-icon:hover {
    color: #cc0000; /* Darker red on hover */
}

/* Wall Input and Room Removal */
.wall-input-container,
.room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px; /* Consistent spacing for wall inputs */
}

/* Results */
#result {
    margin-top: 20px;
    padding: 20px;
    background-color: #2E5050; /* Dark greenish background */
    border-radius: 4px;
    color: #ffffff!important; /* White text */
}

#result h4 {
    color: #ffffff!important; /* White text */
}


/* Dabo */
#dadoRailCalculator {
  font-family: HelveticaNeue, sans-serif;
  max-width: 600px;
  margin: 50px auto;
  padding: 30px;
  background-color: transparent;
  border: 1px solid #dddddd;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  color: rgb(29, 29, 29);
  font-size: 15px;
  line-height: 21px;
}

.dabo-heading {
  font-family: HelveticaNeue, sans-serif;
  font-weight: 600;
  font-size: 45px;
  color: rgb(47, 79, 79);
  text-align: center;
  margin-bottom: 20px;
  line-height: normal;
}

.dabo-label {
  display: block;
  margin-bottom: 10px;
  font-family: HelveticaNeue, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgb(29, 29, 29);
}

.dabo-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.dabo-input {
  width: 75%;
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: #fafafa;
  color: rgb(29, 29, 29);
}

.dabo-select {
  width: 25%;
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: #fafafa;
  color: rgb(29, 29, 29);
}

/* Centering all buttons */
.button-container {
  text-align: center; /* Center container content */
}

.dabo-btn {
  display: inline-block;
  padding: 12px 24px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif; /* Font family */
  font-style: normal; /* Font style */
  font-weight: 800; /* Font weight */
  font-size: 12px; /* Font size */
  line-height: normal; /* Line height */
  color: #ffffff;
  background-color: #008080;
  border: 2px solid #008080;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  margin: 10px 0; /* Space between buttons */
}

.dabo-btn:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

.dabo-output {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #dddddd;
  border-radius: 5px;
  text-align: center; /* Center content inside output */
}

/* Note: an unscoped `strong` rule used to sit here but never applied because the
   .dabo-btn block above was missing its closing brace. It is intentionally not
   revived, so fixing the brace does not recolour bold text site-wide. The
   calculator's own `.dabo-output strong` rule below covers the intended case. */

@media (max-width: 480px) {
  .dabo-heading {
    font-size: 35px;
  }
  .dabo-input-group {
    flex-direction: column;
    gap: 10px;
  }
  .dabo-input, .dabo-select {
    width: 100%;
  }
}

.dabo-output p {
  margin: 10px 0;
  font-size: 15px;
  font-weight: 400;
  color: rgb(29, 29, 29);
}

.dabo-output strong {
  font-weight: 600;
  color: rgb(47, 79, 79);
}

/* Mobile/tablet header: hide the Contact Us promo and keep the logo compact */
@media screen and (max-width: 1023px) {
  .site-header-main .small-promo,
  .site-header-main .small-promo-content--link { display: none !important; }
  .site-header-main-content.small-promo-enabled { margin-right: 0; }
}
@media screen and (max-width: 679px) {
  .site-header-logo { min-height: 0; }
  .site-logo { max-width: 120px !important; }
  .site-logo-image { max-height: 56px !important; width: auto; height: auto; }
}

/* C03: call icon beside the cart wherever the Contact Us promo above is hidden */
.site-header-phone { display: none; }
@media screen and (max-width: 1023px) {
  .site-header-phone { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; z-index: 125; }
  .site-header-phone--button { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: inherit; }
}
@media screen and (max-width: 679px) {
  .site-header-phone { position: absolute; top: 10px; right: 50px; }
}
@media screen and (min-width: 680px) and (max-width: 1023px) {
  .site-header-right { display: flex; align-items: flex-start; }
  .site-header-phone { position: relative; flex: 0 0 auto; }
}

/* C03: Contact at the top of the mobile drawer (the number is not repeated here) */
.site-mobile-nav .mobile-nav-contact { display: flex; margin: 0 25px 12px; }
.site-mobile-nav .mobile-nav-contact__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none !important; border: 2px solid #008080; background: transparent; color: #006767 !important; }


/* Tablet / narrow desktop (1024–1199px): the nine-item main nav no longer fits on one
   line, so collapse it into the burger. Empire's JS reads the current breakpoint from
   html::after (readCSSCurrentBreakpoint); reporting "M" here makes the burger open the
   mobile drawer exactly as it does on tablet. The header keeps its desktop layout
   (logo, search, actions) and the burger sits where Empire puts it when sticky-scrolled.
   theme.css loads after this file, hence :root + !important. */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  html:root::after { content: "M" !important; }
  .site-navigation-wrapper,
  .site-header-nav--open .site-navigation-wrapper { display: none !important; }
  .site-header-menu-toggle { opacity: 1 !important; visibility: visible !important; }
  .site-header-main-content { margin-left: 50px !important; }
  /* The utility bar section (z-index 1250) is hidden on real tablets but visible here and
     paints over the drawer, whose stacking is capped by the sticky header. Drop the utility
     bar beneath the drawer's overlay while the drawer is open. */
  body:has(.site-mobile-nav[data-open="true"]) .utility-bar { z-index: 0 !important; }
}


/* Fire-rated products (Batch 2B item 12): badge on cards + PDP title, certificate block */
:root { --mrm-fire: #A3402E; }
.pdp-fire-badge,
.productitem__badge--fire {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.25;
  padding: 7px 11px;
  color: #fff;
  background: var(--mrm-fire);
}
/* One line always (Toby, 2026-09-25). At 13px the text needs ~168px, and the narrowest
   Empire card that carries this badge is wider than that. */
.pdp-fire-badge,
.productitem__badge--fire { white-space: nowrap; }
.product-title-with-icon__content .pdp-fire-badge { margin-top: 8px; }
.productitem__badge--fire { position: absolute; top: 8px; left: 8px; bottom: auto; z-index: 1; }
.pdp-fire-cert { width: 100%; margin: 0 auto 3rem; padding: 0 1.5rem; }
.pdp-fire-cert__inner {
  max-width: var(--mr-content-max, 1200px);
  margin: 0 auto;
  padding: 26px 26px 30px;
  background: var(--mrm-stone, #F5F3EB);
  border: 1px solid var(--mrm-hairline, #DDDDDD);
}
.pdp-fire-cert__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pdp-fire-cert__heading { margin: 0; font-family: var(--mr-font-heading); font-size: 20px; color: inherit; }
.pdp-fire-cert__text { margin-top: 12px; font-family: var(--mr-font-body); font-size: 15px; line-height: 24px; }
.pdp-fire-cert__text p { margin: 0; }
.pdp-fire-cert__files { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-fire-cert__link {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--mrm-ink, #1D1D1D);
  color: var(--mrm-ink, #1D1D1D);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.pdp-fire-cert__link:hover { background: var(--mrm-ink, #1D1D1D); color: #fff; }
.pdp-fire-cert__request { margin: 12px 0 0; font-size: 15px; line-height: 24px; }

/* C13: "How many lengths?" beside the PDP quantity label; hidden if the calculator section is off */
/* The quantity column is only ~150-200px wide; the row runs past it into the empty space beside it. */
.quantity-selector__head { display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 32px); white-space: nowrap; }
.quantity-selector__head .quantity-selector__label { margin-bottom: 0; }
.pdp-calc-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: #006767 !important; text-decoration: underline !important; text-underline-offset: 3px; }
body:not(:has(#pdp-calculator)) .pdp-calc-link { display: none; }
#pdp-calculator { scroll-margin-top: 130px; }

/* Desktop (1200px and up): scrolling used to swap the whole nav for a burger, hiding every
   menu item behind a tap (Toby, 2026-09-24). The sticky header keeps its nav row instead.
   1024–1199px is left alone — the burger there is deliberate, since nine items do not fit.
   theme.css loads after this file, hence !important. */
@media screen and (min-width: 1200px) {
  .site-header-sticky--scrolled .site-navigation-wrapper { display: block !important; }
  .site-header-sticky--scrolled .site-header-menu-toggle { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}

/* Meganav gutter (Toby, 2026-09-25): the panel inherits Empire's shared container rule
   (theme.css.liquid ~2001), which gives every container only 10px of side padding. On the
   meganav that puts "Shop by type" hard against the panel edge, which reads as cramped under a
   centred nav row. Desktop only — the mobile drawer uses its own markup. */
@media screen and (min-width: 1200px) {
  .navmenu-meganav--desktop .navmenu-meganav-wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }
}