/* ==========================================================================
   Global Flooring and Interior
   One stylesheet for the whole site.

   Values come from the original Elementor global kit (post-9.css) and the
   header/footer/page templates (post-17, post-25, post-15), so the rebuild
   matches the live site rather than reinterpreting it.

   Breakpoints match the original: 1024px (tablet) and 767px (mobile).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font
   One variable file, latin subset, replacing the original's 54 @font-face
   rules across 6 static files.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --blue:        #10488A;  /* primary button / pill CTA                     */
  --blue-quote:  #10518D;  /* Add to Sample List button - one shade off     */
  --teal:        #548B8E;  /* button hover, section pills, icons            */
  --secondary:   #548CA8;  /* product bullet icons                          */
  --accent:      #476072;  /* nav hover, outlined step-number stroke        */
  --text:        #1B1B1B;  /* body copy and the dark panels                 */
  --white:       #FFFFFF;
  --grey-light:  #F6F6F6;  /* About band                                    */
  --grey-band:   #F1F1F1;  /* Connect band                                  */
  --border:      #CACACA;  /* header bottom border                          */
  --pill-grey:   #D9D9D9;  /* "Connect" pill                                */
  --rule:        #DDDDDD;  /* services table border                         */
  --teal-tint:   rgba(84, 139, 142, 0.18);  /* services odd rows (#548B8E2E) */

  --container: 1140px;
  --radius-pill: 45px;
  --radius-field: 24px;

  --ease: 0.25s ease;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.5px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 300; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; }

button { font: inherit; color: inherit; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 0;
}
/* The original has no container padding at all; it simply lets the boxed
   container shrink. Below its own width we still need gutters. */
@media (max-width: 1180px) {
  .container { padding-inline: 20px; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: var(--white); padding: 12px 20px;
}
.skip-link:focus { left: 0; color: var(--white); }

/* Section eyebrow pill - "Products", "About us", "Services", "Connect" */
.pill {
  display: inline-block;
  background: var(--teal);
  color: var(--white);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.15px;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 0;
}
.pill--grey { background: var(--pill-grey); color: var(--text); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--blue);
  color: var(--white);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.5px;
  padding: 15px 25px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  transition: background var(--ease);
}
.btn:hover,
.btn:focus-visible { background: var(--teal); color: var(--white); }

.btn--block { width: 100%; }
.btn--square { border-radius: 4px; }

.btn[disabled],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--ghost:hover { background: var(--grey-light); color: var(--text); }

/* SVG fill does not inherit from `color`, so without this the icon falls back
   to black - and chevron-circle-right is a filled disc, so it came out as a
   black blob on the button. The original sets fill:#FFFFFF explicitly. */
.btn svg { fill: currentColor; }
.btn__arrow { width: 16px; height: 16px; flex: none; }

/* The hero's "Discover" control. The original stretches it across its column
   (Elementor's align-justify), fills it teal, and turns it blue on hover -
   the reverse of every other button on the site. */
.btn--discover {
  width: 100%;
  background: var(--teal);
  border-radius: 0;
  /* 21 + 16 line box + 21 = 58px, matching the original bar. */
  padding: 21px 25px;
}
.btn--discover:hover,
.btn--discover:focus-visible { background: var(--blue); }
.btn--discover .btn__arrow { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   5. Header
   Static bar - the original is NOT sticky (no position:fixed anywhere).
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 99;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.site-header__inner {
  display: grid;
  grid-template-columns: 20% 1fr auto;
  align-items: center;
  gap: 20px;
}

.site-header__logo img { width: 97%; max-width: 212px; }

.site-nav ul {
  display: flex;
  justify-content: center;
  gap: 0;
  list-style: none;
}
.site-nav a {
  display: block;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.15px;
  text-transform: uppercase;
  color: var(--text);
  padding: 0 20px;          /* 40px between labels, boxes touching */
  transition: color var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--accent); }

.site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Hamburger + off-canvas panel, shown at <=1024px like the original */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  line-height: 0;
}
.nav-toggle svg { width: 26px; height: 26px; }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease), visibility var(--ease);
  z-index: 120;
}

@media (max-width: 1024px) {
  .site-header__inner { grid-template-columns: 30% 1fr auto; }
  .site-header__logo img { max-width: 190px; }
  .nav-toggle { display: block; order: 3; }

  .site-nav {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 70%;
    max-width: 340px;
    background: var(--white);
    padding: 70px 28px;
    transform: translateX(-100%);
    transition: transform var(--ease);
    z-index: 130;
    overflow-y: auto;
  }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .site-nav a { display: block; padding: 12px 0; font-size: 16px; }

  .nav-close {
    position: absolute;
    top: 18px; right: 22px;
    background: none;
    border: 0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  body.nav-open .site-nav { transform: translateX(0); }
  body.nav-open .nav-overlay { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

@media (min-width: 1025px) {
  .nav-close { display: none; }
}

@media (max-width: 767px) {
  /* logo | cart | hamburger - three tracks, or the toggle wraps to a new row */
  .site-header__inner { grid-template-columns: 1fr auto auto; gap: 12px; }
  /* The CTA is hidden on mobile in the original; the cart stays. */
  .site-header__actions .btn { display: none; }
  .site-header__logo img { max-width: 165px; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 670px;
  background: #000 url("../img/bg/hero.webp") center/cover no-repeat;
  color: var(--white);
  overflow: hidden;
}
/* The original lays a flat black wash at 45% over the photograph. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.45;
}
/* The hero is elementor-section-full_width - it spans the viewport, it is not
   boxed to 1140. Columns are 65/35 with their own margins. */
.hero__inner {
  position: relative;
  width: 100%;
  padding-bottom: 60px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 0;
  align-items: end;
}

.hero__main { margin-left: 100px; }

.hero__title {
  font-size: 80px;
  font-weight: 400;
  line-height: 100px;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 70px;
}

/* One block: the teal Discover bar sits flush on top of the dark copy box.
   The original zeroes the widget margin between them, so there is no gap. */
.hero__aside {
  margin: 0 80px 0 50px;   /* 35% - 130px = ~399px wide at a 1513px viewport */
}
/* Full width, but the button must stay a flex box or its `gap` is dead - a
   block box ignores gap, which is why the arrow sat flush against "Discover".
   `flex` rather than `inline-flex` so there is no line-box descender under it
   to reopen the gap above the dark copy box. */
.hero__aside > * { width: 100%; }
.hero__aside .btn { display: flex; }

.hero__note {
  background: var(--text);
  border-top: 1px solid rgba(84, 139, 142, 0.36);
  color: var(--white);
  padding: 40px;
  margin: 0;
}

@media (max-width: 1024px) {
  .hero { min-height: 621px; }
  .hero__title { font-size: 56px; line-height: 66px; margin-bottom: 40px; }
  .hero__main { margin-left: 21px; }
  .hero__aside { margin: 0 20px; }
  .hero__note { padding: 15px; }
}

@media (max-width: 767px) {
  .hero {
    min-height: 610px;
    background-image: url("../img/bg/hero-mobile.webp");
  }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 40px; line-height: 48px; margin-bottom: 20px; }
  .hero__main { margin-left: 0; }
  .hero__aside { margin: 0; }
  .hero__note { padding: 10px 8px 10px 11px; }
}

/* --------------------------------------------------------------------------
   7. Products overview
   -------------------------------------------------------------------------- */
.section { padding: 70px 0 60px; }

.products-overview {
  position: relative;
  background: url("../img/bg/products.webp") top center/cover no-repeat;
}
/* A light wash over the diagonal slat panel. The original uses 0.11 - enough to
   soften the photo behind the copy, not enough to hide it. */
.products-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: 0.11;
}
.products-overview > .container { position: relative; }

/* The whole block - pill, intro and both card rows - lives inside 70% of the
   1140px container (798px). Everything else in this section follows from that.
   It has to be a child: a percentage on .container itself would resolve
   against the full-width section, not against 1140. */
.products-overview__col { width: 70%; }

.section__intro {
  max-width: none;
  color: #000;
  margin: 0 0 37px;     /* 17px paragraph margin + 20px widget margin */
}

.product-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 399px each inside the 798px block */
  column-gap: 0;                    /* the columns butt up against each other */
  row-gap: 20px;
  margin-top: 0;
}

/* 60px line-height comes from the kit's h2, which post-15 does not override. */
.product-card__title {
  font-size: 32px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  margin: 0 0 20px 50px;
}

/* The 50px indent is per-widget in the original, NOT on a shared wrapper: it
   applies to the heading and the bullet list only. The image and the buttons
   sit flush with the column. */
.product-card__body {
  display: flex;
  flex-direction: column;
}

/* DOM order is bullets -> image -> buttons, which is the desktop order. */
.product-card__media {
  margin-bottom: 20px;
  text-align: center;
}
.product-card__media img { width: 78%; margin-inline: auto; }

/* The Polygranite card indents by 20px where the other two use 50px. */
.product-card--narrow .product-card__title { margin-left: 20px; }
.product-card--narrow .feature-list { padding-left: 20px; }

.feature-list {
  list-style: none;
  margin: 0 0 20px;
  padding-left: 50px;
}
.feature-list li {
  display: flex;
  align-items: center;    /* Elementor centres list icons in the row */
  gap: 20.5px;            /* 3.5px svg margin + 12px icon padding + 5px text padding */
  color: #000;
}
.feature-list li + li { margin-top: 4px; }   /* 32px row pitch with the 28px line box */
.feature-list svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: var(--secondary);
}

.product-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
/* The original's card buttons are square, not pills, and the arrow trails the
   label (Elementor does it with flex-direction:row-reverse; here the icon simply
   comes after the text in the markup). */
.product-card__actions .btn {
  border-radius: 0;
  padding: 15px;
}

/* The WPC card's pair: each button is auto-width and centred inside its own
   half of the column. The ~39px you see between them is emergent from that,
   not a gap - hard-coding a gap never reproduces it. */
.product-card__actions--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.product-card__actions--split .btn { justify-self: center; }

@media (max-width: 1024px) {
  .section { padding: 75px 0; }
  .products-overview__col { width: 100%; }
  .feature-list { padding-left: 40px; }
  .product-card__title { margin-left: 40px; font-size: 22px; line-height: 34px; }
  .product-card--narrow .product-card__title,
  .product-card--narrow .feature-list { margin-left: 0; padding-left: 40px; }
  /* Below desktop the original puts the photo above the bullets. */
  .product-card__media { order: -1; }
  .product-card__media img { width: 100%; }
  /* And the paired buttons stack full width. */
  .product-card__actions--split { grid-template-columns: 1fr; row-gap: 15px; }
  .product-card__actions--split .btn { justify-self: stretch; }

  /* The products section swaps to the orange marble with a heavier wash. */
  .products-overview {
    background-image: url("../img/bg/products-mobile.webp");
    background-position: top right;
  }
  .products-overview::before { opacity: 0.82; }
}

@media (max-width: 767px) {
  .section { padding: 50px 0; }
  .products-overview { background-position: center center; }
  .products-overview::before { opacity: 0.64; }
  .product-cards { grid-template-columns: 1fr; row-gap: 30px; }
  .feature-list { padding-left: 0; }
  .product-card__title { margin-left: 0; font-size: 22px; line-height: 34px; }
  .product-card--narrow .feature-list { padding-left: 0; }
  .product-card__actions { justify-content: flex-start; }
  .product-card__actions .btn { font-size: 15px; padding: 12px; }
  .product-card__actions--split .btn { justify-self: stretch; }
}

/* --------------------------------------------------------------------------
   8. Process - four outlined step numbers on a photographic band
   -------------------------------------------------------------------------- */
.process {
  background: url("../img/bg/process.webp") center/cover no-repeat;
  color: var(--white);
  padding: 100px 0;
}

.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 24px;
}

/* Each step sits lower than the one before, so the four run diagonally down the
   band. In the original this is per-column top padding of 0 / 50 / 100 / 150px. */
.process__step { padding-right: 100px; }
.process__step:nth-child(2) { padding-top: 50px; }
.process__step:nth-child(3) { padding-top: 100px; }
.process__step:nth-child(4) { padding-top: 150px; }

/* Big translucent numeral with a hairline stroke, title pulled up over it. */
.process__number {
  font-size: 155px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.19);
  -webkit-text-stroke: 1px var(--accent);
  user-select: none;
}

.process__title {
  position: relative;
  z-index: 1;
  margin: -75px 0 12px 25px;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  text-transform: uppercase;
  color: var(--white);
}

.process__step p { color: var(--white); }

@media (max-width: 1024px) {
  .process { padding: 75px 0; }
  .process__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .process__number { font-size: 100px; }
  .process__title { margin: -60px 0 12px 20px; font-size: 22px; }

  /* Two per row, so the stagger becomes 50 / 75 / 100 / 100. */
  .process__step { padding-right: 40px; padding-top: 50px; }
  .process__step:nth-child(2) { padding-top: 75px; }
  .process__step:nth-child(3),
  .process__step:nth-child(4) { padding-top: 100px; }
}

@media (max-width: 767px) {
  .process {
    padding: 50px 0;
    background-image: url("../img/bg/process-mobile.webp");
  }
  .process__grid { grid-template-columns: 1fr; gap: 26px; }
  .process__number { font-size: 45px; }
  .process__title { margin: -18px 0 10px 12px; font-size: 20px; line-height: 28px; }

  /* Stacked single column - no stagger, just breathing room under the first two. */
  .process__step { padding-right: 0; padding-top: 0; }
  .process__step:nth-child(2) { padding-top: 0; }
  .process__step:nth-child(3),
  .process__step:nth-child(4) { padding-top: 0; }
  .process__step:nth-child(1),
  .process__step:nth-child(2) { padding-bottom: 25px; }
}

/* --------------------------------------------------------------------------
   9. About
   -------------------------------------------------------------------------- */
.about {
  position: relative;
  background: var(--grey-light);
  padding: 50px 0;
}

.about > .container { padding-left: 100px; }

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 520px tracks -> 500px content each */
  gap: 0;
  align-items: center;
}
.about__grid > * { padding-inline: 10px; }

@media (max-width: 1024px) {
  .about { padding: 60px 0 15px; }
  .about > .container { padding-left: 20px; }
  .about__grid { grid-template-columns: 1fr; gap: 26px; }
  /* The original reverses the order below desktop: photo first, then copy. */
  .about__media { order: -1; }
}

@media (max-width: 767px) {
  .about {
    padding: 20px 0 50px;
    background: var(--grey-light) url("../img/bg/services.webp") center/cover repeat;
  }
  .about::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--white);
    opacity: 0.5;
  }
  .about > .container { position: relative; }
}

/* --------------------------------------------------------------------------
   10. Services
   Copy sits on the left half; the right half is deliberately empty so the
   background photograph shows through, exactly as on the original.
   -------------------------------------------------------------------------- */
.services {
  position: relative;
  /* The original sets no size/position/repeat, so the 999x999 marble tiles
     from the top-left at its natural size. It is not center/cover. */
  background: url("../img/bg/services.webp") 0 0 repeat;
  padding: 30px 0 50px;
}
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: 0.78;
}
.services > .container { position: relative; }

.services__grid { display: grid; grid-template-columns: 1fr 1fr; }
/* The right half is deliberately empty so the marble shows through. */
.services__col { padding-right: 100px; }

.services__lead { font-size: 19px; line-height: 28px; margin: 0 0 17px; }

.services-table {
  width: 100%;              /* 100% of the 470px column, not a 200px stub */
  margin-top: 0;
  border: 1px solid var(--rule);
  border-collapse: collapse;
}
.services-table td {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  line-height: 1.4;         /* the table does not inherit the 28px body leading */
  text-align: left;
}
.services-table tr:nth-child(odd) { background: var(--teal-tint); }
.services-table svg { width: 16px; height: 16px; flex: none; fill: var(--text); }

@media (max-width: 1024px) {
  .services { padding: 30px 0; }
  /* The empty right column persists at tablet - only <=767 collapses it. */
  .services__col { padding: 0 10px 40px; }
}
@media (max-width: 767px) {
  .services { padding: 50px 0; }
  .services__grid { grid-template-columns: 1fr; }
  .services__col { padding: 0; }
  /* The original sets 200px here, which on a phone wraps every label over
     three lines and leaves ~170px of dead space. Full width instead. */
  .services-table { width: 100%; }
  /* On mobile the overlay is fully opaque - the marble is hidden entirely. */
  .services::before { opacity: 1; }
}

/* --------------------------------------------------------------------------
   11. Connect - contact details + map left, dark form panel right
   Lives in the shared footer block, so it repeats on every page but the
   sample list (which the original renders with no footer at all).
   -------------------------------------------------------------------------- */
.connect { background: var(--grey-band); }

.connect__grid { display: grid; grid-template-columns: 62.071% 37.929%; }

/* margin, not padding: the original offsets this column by 100px from the
   VIEWPORT edge, not from a centred container. */
.connect__info { margin: 20px 0 0 100px; padding: 0; }

.contact-list { list-style: none; margin: 20px 0 24px; }
.contact-list li { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; }
.contact-list svg { width: 17px; height: 17px; flex: none; margin-top: 6px; fill: var(--teal); }

.connect__map {
  width: calc(100% - 50px);   /* the 50px inset is on the map alone */
  height: 300px;
  border: 0;
  display: block;
}

.connect__form {
  background: var(--text);
  color: var(--white);
  padding: 63px;
}
.connect__form h2 {
  font-size: 27px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  color: var(--white);
  padding-bottom: 12px;
}

@media (max-width: 1024px) {
  .connect__grid { grid-template-columns: 60% 40%; }
  .connect__info { margin: 20px 0 0 30px; padding: 0 15px 0 0; }
  .connect__form { padding: 40px; }
}
@media (max-width: 767px) {
  .connect__grid { grid-template-columns: 1fr; }
  /* Stacked, so the map needs room under it before the dark panel starts. */
  .connect__info { margin: 20px 20px 0; padding: 0 0 30px; }
  .connect__map { width: 100%; }
  .connect__form { padding: 40px 20px; }
}

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 19px; }

.field label,
.fieldset__legend {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 24px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius-field);
  padding: 11px 18px;
}
.field textarea { min-height: 110px; resize: vertical; }

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: #C0392B; }

.fieldset { border: 0; margin: 0 0 19px; padding: 0; }

.field--inline { display: flex; flex-wrap: wrap; gap: 18px; }
.field--inline label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}
.field--inline input { width: auto; }

.required { color: #E25C5C; }

/* Bot trap: hidden from people, left in the DOM for scripts to fill. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-message {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 24px;
}
.form-message[hidden] { display: none; }
.form-message--ok    { background: rgba(40, 167, 69, 0.15); color: #1E7B34; }
.form-message--error { background: rgba(192, 57, 43, 0.15); color: #A93226; }
.connect__form .form-message--ok    { background: rgba(40, 167, 69, 0.25); color: #9BE7AC; }
.connect__form .form-message--error { background: rgba(192, 57, 43, 0.30); color: #F5B7B1; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--text);
  color: var(--white);
  padding-top: 10px;
}
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--border); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 30% 30% 1fr;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  text-align: center;
}
.site-footer__logo img { width: 66%; margin-inline: auto; }

.footer-links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 6px;
}

.social { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--teal);
  transition: background var(--ease);
}
.social a:hover { background: var(--blue); }
.social svg { width: 17px; height: 17px; fill: var(--white); }

.site-footer__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 16px;
  max-width: 1137px;
  margin-inline: auto;
  padding: 14px 20px;
  border-top: 1px solid var(--white);
}
.site-footer__bottom p { margin: 0; text-align: center; }

.nw-credit { text-align: center; margin: 14px 0; }
.nw-credit *,
.nw-credit *::before,
.nw-credit *::after { box-sizing: border-box; }
.nw-credit__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: #fff !important;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.1);
  text-decoration: none !important;
  color: #111 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: clamp(11px, 2.6vw, 13px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap;
  max-width: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nw-credit__chip:hover { box-shadow: 0 3px 10px rgba(17, 17, 17, 0.16); transform: translateY(-1px); }
.nw-credit__text { color: #111 !important; }
.nw-credit__logo {
  display: inline-block;
  height: 18px !important;
  width: auto !important;
  max-width: 100%;
  margin-left: -2px !important;
  vertical-align: middle;
  border: 0;
}
@media (max-width: 360px) {
  .nw-credit__chip { gap: 4px; padding: 6px 11px; }
  .nw-credit__logo { height: 16px !important; }
}

@media (max-width: 767px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__logo img { width: 51%; }
  .site-footer__bottom { grid-template-columns: 1fr; }
  /* The original reverses these on mobile so the copyright sits above the credit. */
  .site-footer__bottom .credit-wrap { order: 2; text-align: center; }
}

/* --------------------------------------------------------------------------
   14. Interior page furniture
   -------------------------------------------------------------------------- */
.page-main { padding-bottom: 60px; }

.breadcrumb {
  padding: 18px 0 6px;
  font-size: 15px;
  color: var(--text);
}
.breadcrumb a:hover { color: var(--accent); }

.page-title {
  font-size: 65px;
  font-weight: 300;
  line-height: 78px;
  margin: 10px 0 20px;
}

@media (max-width: 1024px) { .page-title { font-size: 46px; line-height: 56px; } }
@media (max-width: 767px)  { .page-title { font-size: 34px; line-height: 42px; } }

/* Long-form copy (privacy policy and anything like it). Narrow measure so
   lines stay readable - about 70 characters at this type size. */
.prose { max-width: 44em; }
.prose h2 {
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  text-transform: uppercase;
  margin: 44px 0 12px;
}
.prose h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  margin: 28px 0 8px;
}
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.prose li { margin-bottom: 6px; }
.prose a { text-decoration: underline; }
.prose__meta { color: #5A5A5A; font-size: 15px; }

@media (max-width: 767px) {
  .prose h2 { font-size: 20px; line-height: 28px; margin-top: 34px; }
}

/* Products archive */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.shop-toolbar select {
  font: inherit;
  font-size: 15px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  list-style: none;
}
.product-grid h2 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}
.product-grid a:hover h2 { color: var(--accent); }
.product-grid img { aspect-ratio: 1; object-fit: cover; }

@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .product-grid { grid-template-columns: 1fr; gap: 34px; } }

/* --------------------------------------------------------------------------
   15. Single product
   -------------------------------------------------------------------------- */
.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}

.product-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  list-style: none;
}
.product-swatches button {
  display: block;
  width: 72px;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.product-swatches button:hover { border-color: var(--border); }
.product-swatches button[aria-pressed="true"] { border-color: var(--blue); }
.product-swatches img { aspect-ratio: 1; object-fit: cover; }

.product-summary h1 {
  font-size: 40px;
  font-weight: 300;
  line-height: 50px;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  margin-bottom: 14px;
}

.product-summary__short { margin-bottom: 18px; }

.variation-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.variation-row label { font-size: 15px; }
.variation-row select {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white);
}

.reset-variations {
  display: inline-block;
  margin: 6px 0 0 102px;
  font-size: 14px;
  text-decoration: underline;
}
.reset-variations[hidden] { display: none; }

.variation-description {
  margin: 14px 0 0 102px;
  font-size: 15px;
}
.variation-description[hidden] { display: none; }

.qty-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.qty button {
  width: 38px;
  background: var(--grey-light);
  border: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.qty button:hover { background: var(--border); }
.qty input {
  width: 58px;
  text-align: center;
  font: inherit;
  border: 0;
  border-inline: 1px solid var(--border);
  padding: 10px 4px;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The quote plugin's own blue - deliberately one shade off the kit colour. */
.btn--sample { background: var(--blue-quote); border-radius: 4px; flex: 1 1 240px; }

.product-meta {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.product-meta span { display: block; }

.product-description { margin-top: 60px; }
.product-description h2 {
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.product-description ul { padding-left: 20px; list-style: disc; }
.product-description li { margin-bottom: 4px; }

.related { margin-top: 60px; }
.related h2 {
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.related .product-grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) { .product-layout { gap: 34px; } }
@media (max-width: 767px) {
  .product-layout { grid-template-columns: 1fr; gap: 28px; }
  .product-summary h1 { font-size: 30px; line-height: 38px; }
  .variation-row { grid-template-columns: 1fr; }
  .reset-variations,
  .variation-description { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   16. Sample list ("My List")
   -------------------------------------------------------------------------- */
.sample-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.sample-table th,
.sample-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.sample-table th { font-weight: 500; font-size: 15px; }
.sample-table img { width: 72px; aspect-ratio: 1; object-fit: cover; }

.sample-item { display: flex; align-items: center; gap: 14px; }
.sample-item__colour { font-size: 14px; color: #5A5A5A; }

.sample-remove {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
  line-height: 0;
}
.sample-remove svg { width: 17px; height: 17px; fill: #8A8A8A; }
.sample-remove:hover svg { fill: #C0392B; }

.sample-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }

.sample-empty { text-align: center; padding: 40px 0 60px; }
.sample-empty svg { width: 130px; height: auto; margin: 0 auto 24px; }
.sample-empty h2 { font-size: 22px; font-weight: 500; margin-bottom: 22px; }

.sample-form { max-width: 720px; }
.sample-form h2 {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.sample-form .field input,
.sample-form .field select,
.sample-form .field textarea {
  border-color: var(--border);
  border-radius: 6px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

@media (max-width: 767px) {
  .form-grid { grid-template-columns: 1fr; }
  .sample-table thead { display: none; }
  .sample-table tr { display: block; border-bottom: 1px solid var(--border); padding: 10px 0; }
  .sample-table td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 6px 0; }
  .sample-table td::before { content: attr(data-label); font-size: 14px; color: #5A5A5A; }
  .sample-table td:first-child::before { content: none; }
}

/* --------------------------------------------------------------------------
   17. Toast + floating sample-list button
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: 14px 18px;
  transition: transform var(--ease), opacity var(--ease);
  opacity: 0;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.toast svg { width: 22px; height: 22px; flex: none; stroke: #28A745; fill: none; stroke-width: 2; }
.toast button {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.5;
}
.toast button:hover { opacity: 1; }

/* Sample-list cart, in the header. The original used a floating pad widget,
   but it was switched off in the plugin settings and never appeared; a header
   cart is what the client asked for and is where people look for one. */
.sample-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--text);
  transition: background var(--ease), color var(--ease);
}
.sample-cart:hover { background: var(--grey-light); color: var(--blue); }
.sample-cart svg { width: 22px; height: 22px; fill: currentColor; }

.sample-cart__count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--blue);
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
}
.sample-cart__count[hidden] { display: none; }

/* --------------------------------------------------------------------------
   18. Not found
   -------------------------------------------------------------------------- */
.not-found { padding: 80px 0 100px; }