/* tokens.css */
/* ==========================================================================
   Design tokens

   The live site runs Woodmart's DARK colour scheme. Backgrounds were sampled
   from the baseline screenshots (data/verify/baseline/shots/desktop/) and the
   accent from the theme's own --wd-primary-color; section colours come from
   Elementor's generated per-page CSS.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --color-primary: #db9969;          /* --wd-primary-color: rgb(219,153,105) */
  --color-primary-dark: #c8834f;
  --color-primary-light: #ebb78d;    /* --wd-alternative-color */

  /* --- surfaces (dark) -------------------------------------------------- */
  --color-bg: #1a1a1a;               /* page background */
  --color-bg-alt: #141414;           /* Elementor sets this on About and FAQ */
  --color-bg-raised: #212121;        /* header, footer */
  --color-bg-tile: #ffffff;          /* product photos sit on white tiles */

  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.24);

  /* --- text on dark ----------------------------------------------------- */
  --color-title: #ffffff;
  --color-entity-title: #ffffff;
  --color-text: rgba(255, 255, 255, 0.78);
  --color-text-strong: #ffffff;
  --color-muted: rgba(255, 255, 255, 0.5);

  /* --- text on the white product tiles ---------------------------------- */
  --color-on-tile: #242424;

  /* --- state ------------------------------------------------------------ */
  --color-success: #6ed49a;
  --color-error: #ff8a80;
  --color-success-bg: rgba(110, 212, 154, 0.12);
  --color-error-bg: rgba(255, 138, 128, 0.12);

  /* --- typography ------------------------------------------------------- */
  --font-body: 'Inter', Arial, Helvetica, sans-serif;
  --font-heading: 'Ubuntu', Arial, Helvetica, sans-serif;
  --font-nav: 'Lato', Arial, Helvetica, sans-serif;
  --font-script: 'Satisfy', Arial, Helvetica, sans-serif;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-xxl: 34px;
  --text-hero: 30px;                 /* the live hero title is modest, not huge */

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-loose: 1.8;

  /* --- layout ----------------------------------------------------------- */
  --container-max: 1222px;           /* Woodmart container width */
  --container-pad: 20px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 90px;

  --section-pad: 70px;

  /* Woodmart runs sharp corners throughout (--wd-brd-radius: 0px). */
  --radius: 0px;
  --radius-pill: 999px;

  /* --- chrome ----------------------------------------------------------- */
  --header-h: 95px;                  /* one row, not three */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);

  --transition: 0.25s ease;

  /* --- stacking --------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 300;
  --z-overlay: 400;
  /* The floating WhatsApp button, the back-to-top button and any cookie bar
     all sit at modal level, so none of them can end up behind another. */
  --z-modal: 500;
}

/* reset.css */
/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class], ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

img, picture, svg, video {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary-dark);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Visible only to screen readers, but still focusable -- used by the skip
   link and the live regions that announce quote-basket changes. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: #fff;
  transition: top var(--transition);
}

.skip-link:focus {
  top: var(--space-4);
  color: #fff;
}

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

/* typography.css */
/* ==========================================================================
   Typography — self-hosted faces + the heading scale
   Woodmart pairs Inter (body) with Ubuntu (headings, uppercase) and Lato
   (navigation, uppercase). Satisfy is the decorative script. Hind was loaded
   by the theme but never used, so it is not carried over.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ubuntu-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ubuntu-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/ubuntu-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lato-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/lato-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Satisfy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/satisfy-400.woff2') format('woff2');
}

/* --- headings ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-title);
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-xxl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5,
h6 { font-size: var(--text-base); }

/* --- body ---------------------------------------------------------------- */

p {
  margin-bottom: var(--space-4);
}

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

strong, b {
  font-weight: 600;
  color: var(--color-text-strong);
}

/* Body copy inside .prose sits on the dark page ground. */
.prose a {
  color: var(--color-primary);
}

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
}

/* --- prose: long-form content from WordPress ----------------------------- */

.prose {
  color: var(--color-text);
  line-height: var(--leading-loose);
}

.prose h2,
.prose h3,
.prose h4 {
  margin: var(--space-7) 0 var(--space-4);
}

.prose h2 { font-size: var(--text-xl); }
.prose h3 { font-size: var(--text-lg); }

.prose > *:first-child {
  margin-top: 0;
}

.prose p,
.prose ul,
.prose ol,
.prose table {
  margin-bottom: var(--space-5);
}

.prose ul,
.prose ol {
  padding-left: var(--space-5);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose img {
  margin: var(--space-5) 0;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary);
  background: rgba(255, 255, 255, 0.04);
  font-style: italic;
}

.prose table th,
.prose table td {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  text-align: left;
}

.prose table th {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-title);
  font-family: var(--font-heading);
}

/* buttons.css */
/* ==========================================================================
   Buttons — Woodmart's rectangular, uppercase button set
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-primary-dark);
  color: #fff;
}

.btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

.btn--dark {
  background: #000;
}

.btn--dark:hover,
.btn--dark:focus-visible {
  background: var(--color-primary);
}

.btn--light {
  background: transparent;
  border-color: var(--color-border-strong);
  color: #fff;
}

.btn--light:hover,
.btn--light:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn--sm {
  padding: 9px 18px;
  font-size: var(--text-xs);
}

.btn--lg {
  padding: 16px 40px;
  font-size: var(--text-base);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Woodmart's "Read more" treatment: uppercase, underlined, on the dark ground. */
.link-more {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
}

.link-more:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* --- floating actions ---------------------------------------------------- */

.whatsapp-btn {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-pill);
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  animation: whatsapp-pulse 2.4s infinite;
}

.whatsapp-btn:hover {
  background: #1ebe5a;
  color: #fff;
}

.whatsapp-btn svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

@keyframes whatsapp-pulse {
  0%   { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Offset above the WhatsApp button so the two never overlap. */
.back-to-top {
  position: fixed;
  right: var(--space-6);
  bottom: calc(var(--space-6) + 70px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary);
}

.back-to-top svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* forms.css */
/* ==========================================================================
   Forms — the contact form and the quote-request form.
   Both post to the same PHP handler, so they share one set of styles.
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: var(--space-2);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
}

.field .required {
  color: var(--color-primary);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--text-base);
  color: #fff;
  transition: border-color var(--transition), background var(--transition);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-muted);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  background: rgba(255, 255, 255, 0.1);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: var(--color-error);
}

.field__error {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-error);
}

/* Bot trap. Hidden from people and from assistive tech, but a bot filling
   every field will trip it. */
.field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-message {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

.form-message[hidden] {
  display: none;
}

.form-message--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.form-message--error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.form-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* header.css */
/* ==========================================================================
   Header — one dark row: logo left, nav centre, actions right.

   (An earlier pass built this as Woodmart's three-row layout on white. The
   live site uses the theme's single-row dark header; see
   data/verify/baseline/shots/desktop/home.png.)
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.site-header {
  position: relative;
  z-index: var(--z-sticky);
  background: var(--color-bg-raised);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

/* The logo SVG carries a viewBox but no width/height attributes, so it has no
   intrinsic size. In a flex row `width: auto` collapses it to nothing --
   fixing the height and letting the viewBox ratio drive the width is what
   actually makes it render. */
.site-logo img {
  height: 54px;
  width: auto;
  max-width: none;
}

/* --- navigation ---------------------------------------------------------- */

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.main-nav a {
  display: block;
  padding: var(--space-2) 0;
  color: #fff;
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.main-nav a:hover,
.main-nav a[aria-current='page'] {
  color: var(--color-primary);
}

/* --- header actions ------------------------------------------------------ */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.header-actions a,
.header-actions button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  color: #fff;
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.header-actions a:hover,
.header-actions button:hover {
  color: var(--color-primary);
}

.header-actions svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* Count bubble on the wishlist and quote-basket links. */
.count-badge {
  position: absolute;
  top: -7px;
  right: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.count-badge[hidden] {
  display: none;
}

/* --- mobile -------------------------------------------------------------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 26px;
  color: #fff;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  transform: translateX(-100%);
  transition: transform var(--transition);
  overflow-y: auto;
  visibility: hidden;
}

.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--container-pad);
  border-bottom: 1px solid var(--color-border);
}

.mobile-drawer__close {
  font-size: 26px;
  line-height: 1;
  color: #fff;
}

.mobile-drawer nav {
  padding: var(--space-4) var(--container-pad);
}

.mobile-drawer nav a {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  color: #fff;
  font-family: var(--font-nav);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
}

.mobile-drawer nav a:hover {
  color: var(--color-primary);
}

.mobile-drawer__foot {
  margin-top: auto;
  padding: var(--space-5) var(--container-pad);
  border-top: 1px solid var(--color-border);
}

/* --- search overlay ------------------------------------------------------ */
/* Woodmart ran a full-screen AJAX product search. With four products the whole
   catalogue ships in the page, so this filters client-side. */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  padding: 10vh var(--container-pad) var(--space-6);
  background: rgba(20, 20, 20, 0.97);
  overflow-y: auto;
}

.search-overlay.is-open {
  display: block;
}

.search-overlay__inner {
  max-width: 720px;
  margin: 0 auto;
}

.search-overlay__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-6);
  font-size: 30px;
  line-height: 1;
  color: #fff;
}

.search-overlay input[type='search'] {
  width: 100%;
  padding: var(--space-4) 0;
  border: none;
  border-bottom: 2px solid #fff;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: #fff;
}

.search-overlay input[type='search']:focus {
  outline: none;
  border-color: var(--color-primary);
}

.search-results {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.search-result {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.search-result img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: var(--color-bg-tile);
  flex-shrink: 0;
}

.search-result__name {
  font-family: var(--font-heading);
  color: #fff;
}

.search-empty {
  margin-top: var(--space-6);
  color: var(--color-muted);
}

/* footer.css */
/* ==========================================================================
   Footer — four columns on #212121, then the copyright bar.
   Col 1: logo + blurb + social. Col 2: Fossils. Col 3: Useful links.
   Col 4: contact details.

   Links are the accent colour and underlined, as on the live site. The
   Woodmart payment-methods strip is dropped: nothing here takes card payments,
   so advertising card logos would be misleading.
   ========================================================================== */

.site-footer {
  background: var(--color-bg-raised);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
}

.site-footer a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer a:hover {
  color: var(--color-primary-light);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: var(--space-7);
  padding: var(--space-8) 0 var(--space-7);
}

.footer-col__title {
  margin-bottom: var(--space-4);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.footer-logo {
  margin-bottom: var(--space-4);
}

/* The logo SVG has no intrinsic size -- see the note in header.css. */
.footer-logo img {
  height: 60px;
  width: auto;
  max-width: none;
}

.footer-links li {
  margin-bottom: var(--space-2);
}

.footer-contact li {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.footer-contact svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 6px;
  fill: var(--color-muted);
}

/* Address and phone are plain text on the live footer; only the real links
   carry the accent underline. */
.footer-contact li > span {
  color: var(--color-text);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: #3b5998;
  color: #fff;
  text-decoration: none;
}

.footer-social a:hover {
  background: var(--color-primary);
  color: #fff;
}

.footer-social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: var(--text-xs);
  text-align: center;
}

/* cards.css */
/* ==========================================================================
   Cards

   Both card types follow the live site: the photograph sits on a WHITE tile
   (the product shots are cut out on white, so a dark tile would show a hard
   rectangle), and the label sits below the tile on the dark page ground.
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

/* --- product card -------------------------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.product-card__media {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: var(--color-bg-tile);
}

.product-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: var(--space-3);
  transition: transform 0.6s ease;
}

.product-card:hover .product-card__media img {
  transform: scale(1.05);
}

.product-card__actions {
  position: absolute;
  right: var(--space-3);
  top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--transition), transform var(--transition);
}

.product-card:hover .product-card__actions,
.product-card:focus-within .product-card__actions {
  opacity: 1;
  transform: translateX(0);
}

.product-card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(20, 20, 20, 0.85);
  color: #fff;
}

.product-card__action:hover,
.product-card__action[aria-pressed='true'] {
  background: var(--color-primary);
  color: #fff;
}

.product-card__action svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* On the live site the product name is white and underlined, with the
   category in the accent colour beneath it. */
.product-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
}

.product-card__title a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product-card__title a:hover {
  color: var(--color-primary);
}

.product-card__cat {
  font-size: var(--text-sm);
}

.product-card__cat a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product-card__foot {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* No product has ever had a price set in WooCommerce, so the price slot is a
   quote prompt rather than a number. */
.price-on-request {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-muted);
}

/* --- category card ------------------------------------------------------- */

.category-card {
  display: block;
  text-align: center;
}

.category-card__media {
  overflow: hidden;
  background: var(--color-bg-tile);
}

.category-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.category-card:hover img {
  transform: scale(1.06);
}

.category-card__name {
  display: block;
  margin-top: var(--space-4);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.category-card:hover .category-card__name {
  color: var(--color-primary);
}

.category-card__count {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

/* --- empty state --------------------------------------------------------- */

.empty-state {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-muted);
}

.empty-state__title {
  margin-bottom: var(--space-3);
  color: #fff;
}

/* sections.css */
/* ==========================================================================
   Section scaffolding — headings, breadcrumbs, page title blocks
   ========================================================================== */

.section {
  padding: var(--section-pad) 0;
}

.section--tight {
  padding: var(--space-7) 0;
}

/* Elementor sets #141414 on the About and FAQ sections; everything else sits
   on the page's own #1a1a1a. */
.section--alt {
  background: var(--color-bg-alt);
}

/* --- section headings ---------------------------------------------------- */
/* Woodmart's title widget: a small uppercase kicker above a large title,
   optionally followed by intro copy. */

.section-head {
  margin-bottom: var(--space-7);
}

.section-head--center {
  text-align: center;
}

.section-head--right {
  text-align: right;
}

.section-head__kicker {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.section-head__title {
  font-size: var(--text-xxl);
  font-weight: 500;
  color: var(--color-title);
}

.section-head__title--hero {
  font-size: var(--text-hero);
}

.section-head__intro {
  margin-top: var(--space-4);
  line-height: var(--leading-loose);
}

.section-head--center .section-head__intro {
  margin-left: auto;
  margin-right: auto;
  max-width: 780px;
}

/* --- divider ------------------------------------------------------------- */

.divider {
  height: 1px;
  margin: var(--space-6) 0;
  background: var(--color-border);
  border: none;
}

.divider--short {
  width: 60px;
  height: 2px;
  background: var(--color-primary);
}

/* --- page title band ----------------------------------------------------- */

.page-title {
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  text-align: center;
}

.page-title__heading {
  font-size: var(--text-xxl);
  color: var(--color-title);
}

/* --- breadcrumbs --------------------------------------------------------- */

.breadcrumb {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li + li::before {
  content: '/';
  margin-right: var(--space-2);
  color: var(--color-muted);
}

.breadcrumb a {
  color: var(--color-muted);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb [aria-current='page'] {
  color: var(--color-text);
}

/* --- info boxes ---------------------------------------------------------- */
/* The Production / Import / Sale / Export blocks on the homepage. */

.infobox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

.infobox__title {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: #fff;
}

.infobox__icon {
  margin-bottom: var(--space-3);
}

.infobox__icon img,
.infobox__icon svg {
  width: 40px;
  height: 40px;
}

/* --- team ---------------------------------------------------------------- */
/* On the live site the name and role sit OVER the bottom of the photograph,
   not underneath it. */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

.team-member {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.team-member__image {
  overflow: hidden;
}

.team-member__image img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team-member:hover .team-member__image img {
  transform: scale(1.04);
}

.team-member__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}

.team-member__name {
  font-size: var(--text-md);
  font-weight: 400;
  color: #fff;
}

.team-member__role {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* --- contact detail list ------------------------------------------------- */

.contact-list {
  display: grid;
  gap: var(--space-4);
}

.contact-list li {
  display: flex;
  gap: var(--space-4);
}

.contact-list svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  fill: var(--color-primary);
}

.contact-list__label {
  display: block;
  color: #fff;
  font-weight: 600;
}

/* accordion.css */
/* ==========================================================================
   Accordion — the FAQ blocks.
   Built on <details>/<summary> so it works with JavaScript disabled, which
   the Woodmart original did not.
   ========================================================================== */

.accordion {
  border-top: 1px solid var(--color-border);
}

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  list-style: none;
}

/* The live accordion turns the open question the accent colour. */
.accordion__item[open] summary {
  color: var(--color-primary);
}

.accordion__item summary::-webkit-details-marker {
  display: none;
}

.accordion__item summary:hover {
  color: var(--color-primary);
}

.accordion__item summary::after {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}

.accordion__item[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.accordion__body {
  padding: 0 0 var(--space-5);
  line-height: var(--leading-loose);
}

/* gallery.css */
/* ==========================================================================
   Gallery — the /gallery/ masonry grid and the lightbox
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.gallery-item {
  display: block;
  overflow: hidden;
  background: var(--color-bg-tile);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s ease, opacity var(--transition);
}

.gallery-item:hover img {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Two-up strip used inside the homepage About section. */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

/* --- lightbox ------------------------------------------------------------ */
/* Hand-rolled rather than pulling in GLightbox/PhotoSwipe: the whole
   behaviour is open, close, previous, next. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(0, 0, 0, 0.92);
}

.lightbox.is-open {
  display: flex;
}

.lightbox__img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-5);
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
}

.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.1);
}

.lightbox__btn:hover {
  background: var(--color-primary);
}

.lightbox__close { top: var(--space-5); right: var(--space-5); }
.lightbox__prev  { left: var(--space-5); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--space-5); top: 50%; transform: translateY(-50%); }

/* shop.css */
/* ==========================================================================
   Shop — the /for-sale/ index, category archives and tag archives
   ========================================================================== */

.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-7);
  align-items: start;
}

.shop-sidebar__block + .shop-sidebar__block {
  margin-top: var(--space-7);
}

.shop-sidebar__title {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
}

.shop-sidebar a {
  color: var(--color-text);
}

.shop-sidebar a:hover,
.shop-sidebar a[aria-current='page'] {
  color: var(--color-primary);
}

.cat-list li {
  margin-bottom: var(--space-2);
}

.cat-list__children {
  margin: var(--space-2) 0 var(--space-3) var(--space-4);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border);
}

.cat-list__count {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag-cloud a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-xs);
}

.tag-cloud a:hover,
.tag-cloud a[aria-current='page'] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.shop-sidebar .cat-list a,
.shop-sidebar .tag-cloud a {
  color: var(--color-text);
}

.shop-result-count {
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* product.css */
/* ==========================================================================
   Product detail
   ========================================================================== */

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.product-gallery__main {
  background: var(--color-bg-tile);
  cursor: zoom-in;
}

.product-gallery__main img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: var(--space-4);
}

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.product-gallery__thumb {
  border: 2px solid transparent;
  background: var(--color-bg-tile);
  padding: 0;
}

.product-gallery__thumb[aria-current='true'] {
  border-color: var(--color-primary);
}

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

.product-summary__cat {
  font-size: var(--text-xs);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.product-summary__title {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-xxl);
}

.product-summary__quote {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-left: 3px solid var(--color-primary);
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--text-sm);
}

.product-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

.product-stock::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-success);
}

.product-stock--out::before {
  background: var(--color-error);
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.product-meta {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.product-meta dt {
  display: inline;
  color: #fff;
  font-weight: 600;
}

.product-meta dd {
  display: inline;
  margin: 0 0 0 var(--space-1);
}

.product-meta div {
  margin-bottom: var(--space-2);
}

/* Quantity stepper, shared with the quote basket. */
.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border-strong);
}

.qty__btn {
  width: 38px;
  color: var(--color-title);
  font-size: var(--text-md);
  line-height: 1;
}

.qty__btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.qty__input {
  width: 52px;
  background: transparent;
  color: #fff;
  border: none;
  border-left: 1px solid var(--color-border-strong);
  border-right: 1px solid var(--color-border-strong);
  text-align: center;
  padding: 10px 0;
  -moz-appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* cart.css */
/* ==========================================================================
   Quote basket — /cart/, /checkout/, /thank-you/ and /wishlist/
   No prices anywhere: WooCommerce never had any set, and the flow is a
   request for a quote rather than a purchase.
   ========================================================================== */

.quote-lines {
  border-top: 1px solid var(--color-border);
}

.quote-line {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.quote-line__media img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: var(--color-bg-tile);
}

.quote-line__name {
  font-size: var(--text-md);
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quote-line__cat {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted);
}

.quote-line__remove {
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-decoration: underline;
}

.quote-line__remove:hover {
  color: var(--color-error);
}

.quote-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
}

.quote-count {
  font-size: var(--text-md);
  color: #fff;
}

/* --- checkout ------------------------------------------------------------ */

.checkout-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.checkout-summary {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.04);
}

.checkout-summary__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
}

.checkout-summary__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.checkout-summary__qty {
  color: var(--color-muted);
}

.checkout-note {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-left: 3px solid var(--color-primary);
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--text-sm);
}

/* --- thank you ----------------------------------------------------------- */

.thanks {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-9) 0;
  text-align: center;
}

.thanks__ref {
  display: inline-block;
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-5);
  border: 1px dashed var(--color-border-strong);
  font-family: monospace;
  font-size: var(--text-md);
  color: #fff;
}

/* blog.css */
/* ==========================================================================
   Blog
   ========================================================================== */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.post-card__media {
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: var(--color-bg-tile);
}

.post-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.post-card:hover .post-card__media img {
  transform: scale(1.05);
}

.post-card__meta {
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.post-card__title {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-lg);
}

.post-card__title a {
  color: #fff;
}

.post-card__title a:hover {
  color: var(--color-primary);
}

.post-article {
  max-width: 800px;
  margin: 0 auto;
}

.post-article__meta {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.post-article__hero {
  margin-bottom: var(--space-6);
}

/* legal.css */
/* ==========================================================================
   Legal pages — privacy, refunds, shipping, terms
   ========================================================================== */

.legal {
  max-width: 860px;
  margin: 0 auto;
}

.legal h2,
.legal h3 {
  margin: var(--space-7) 0 var(--space-3);
}

.legal h2 { font-size: var(--text-lg); }
.legal h3 { font-size: var(--text-md); }

.legal__updated {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted);
}

/* home.css */
/* ==========================================================================
   Homepage

   The hero is a full-bleed photograph with a translucent black panel holding
   the copy on the right. Both the image and the panel colour come from
   Elementor's per-page CSS via the section data — see
   scripts/lib/elementor-css.js — rather than being hard-coded here.
   ========================================================================== */

.hero {
  position: relative;
  background-color: #0d0d0d;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero__inner {
  display: flex;
  justify-content: flex-end;
  min-height: 620px;
  padding: var(--space-8) 0;
}

/* The translucent panel: right half, full height of the section. */
.hero__panel {
  width: min(52%, 620px);
  padding: 60px 50px;
  background: rgba(0, 0, 0, 0.49);
  color: #fff;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}

.hero__intro {
  margin-top: var(--space-4);
  color: rgba(255, 255, 255, 0.88);
  line-height: var(--leading-loose);
}

.hero__intro strong {
  color: #fff;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --- about block --------------------------------------------------------- */

.about-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.about-block__body > * + * {
  margin-top: var(--space-4);
}

/* The live heading pair: a large uppercase "ABOUT US" with a lighter
   "COMPANY HISTORY & FACTS" beneath it. */
.about-block__body .section-head__title {
  font-size: var(--text-xxl);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- contact block ------------------------------------------------------- */

.contact-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.hours {
  margin-bottom: var(--space-5);
  color: var(--color-text);
}

.hours__label {
  display: block;
  margin-bottom: var(--space-1);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* utilities.css */
/* ==========================================================================
   Utilities
   ========================================================================== */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-7); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-7); }

.narrow  { max-width: 800px; margin-left: auto; margin-right: auto; }
.narrower{ max-width: 640px; margin-left: auto; margin-right: auto; }

.stack > * + * { margin-top: var(--space-4); }

.muted { color: var(--color-muted); }

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[hidden] { display: none !important; }

/* responsive.css */
/* ==========================================================================
   Responsive — everything above is written desktop-first, matching the
   Woodmart original's breakpoints.
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --section-pad: 56px;
    --text-hero: 34px;
    --text-xxl: 28px;
  }

  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .shop-layout,
  .checkout-layout,
  .product-detail,
  .about-block,
  .contact-block {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .hero__panel {
    width: 65%;
    padding: var(--space-7) var(--space-6);
  }

  /* The shop sidebar reads as an index once it is above the grid rather than
     beside it. */
  .shop-sidebar {
    order: 2;
  }
}

@media (max-width: 860px) {
  /* The single header row collapses to logo + actions, with the menu moving
     into the drawer. */
  .main-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .header-inner {
    min-height: 68px;
  }

  .site-logo img {
    height: 44px;
  }

  .hero__inner {
    min-height: 0;
    padding: 0;
  }

  /* The panel goes full width on a phone; a 52% column over a photograph is
     unreadable at that size. */
  .hero__panel {
    width: 100%;
    padding: var(--space-7) var(--space-5);
  }
}

@media (max-width: 640px) {
  :root {
    --section-pad: 44px;
    --text-hero: 28px;
    --text-xxl: 24px;
    --text-xl: 21px;
    --container-pad: 16px;
  }

  .grid--5,
  .grid--4,
  .grid--3,
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid,
  .infobox-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .footer-main {
    grid-template-columns: 1fr;
    padding: var(--space-7) 0 var(--space-6);
  }

  .quote-line {
    grid-template-columns: 72px 1fr;
    row-gap: var(--space-3);
  }

  .quote-line__media img {
    width: 72px;
    height: 72px;
  }

  /* Quantity and remove drop under the name rather than squeezing four
     columns into a phone width. */
  .quote-line__qty,
  .quote-line__remove {
    grid-column: 2;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .whatsapp-btn {
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .back-to-top {
    right: var(--space-4);
    bottom: calc(var(--space-4) + 66px);
  }
}

@media (max-width: 420px) {
  .grid--5,
  .grid--4,
  .grid--3,
  .grid--2 {
    grid-template-columns: 1fr;
  }
}