/* ==========================================================================
   BathroomDeals.au — Global Design System
   Blocksy Free + Elementor Free + WooCommerce
   Load via the mu-plugin (bd-core), NOT via Appearance > Customize > Additional CSS
   (Customizer CSS is inlined on every request and is not cacheable).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — "porcelain and brass". Warm neutrals + a single metallic accent
     that echoes the brushed-brass tapware trend without shouting. */
  --bd-ink:        #12232B;  /* primary text, headers, footer, primary button */
  --bd-ink-2:      #1D3540;  /* hover state for ink surfaces */
  --bd-slate:      #4A626E;  /* body copy on light backgrounds */
  --bd-mute:       #6E828C;  /* captions, meta, fine print */
  --bd-line:       #E4E0D9;  /* hairlines, card borders */
  --bd-porcelain:  #F7F5F2;  /* section tint 1 */
  --bd-sand:       #EFEBE4;  /* section tint 2 */
  --bd-white:      #FFFFFF;

  --bd-brass:      #B08D57;  /* accent — CTAs on dark, eyebrows, focus ring */
  --bd-brass-dk:   #96774A;
  --bd-brass-lt:   #F3EBDD;

  --bd-sale:       #B33A2B;  /* sale badges, urgency — terracotta, not fire-engine */
  --bd-success:    #2E6B4F;  /* in stock, confirmations */

  /* Type — Fraunces (high-contrast variable serif) for display, Inter for
     everything functional. The serif/sans split is what pushes the page from
     "clean template" to editorial; Fraunces carries the brand voice and Inter
     stays invisible where it needs to be (forms, prices, specs, nav). */
  --bd-font-head: "Fraunces", "Times New Roman", Georgia, serif;
  --bd-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* opsz drives the optical size axis; WONK 0 keeps the quirky swashes off,
     SOFT 20 softens the terminals just enough to avoid feeling austere. */
  --bd-wonk: "opsz" 144, "SOFT" 20, "WONK" 0;

  /* Fluid type scale — deliberately wide dynamic range. A big jump between
     display and body is the single strongest "designed, not templated" signal;
     a timid 40→64px hero is what makes a page read as stock. */
  --bd-fs-display: clamp(3rem, 1.9rem + 5.4vw, 6.25rem);      /* 48 → 100 */
  --bd-fs-h1:      clamp(2.5rem, 1.8rem + 3.2vw, 4.25rem);    /* 40 → 68 */
  --bd-fs-h2:      clamp(2rem, 1.5rem + 2.3vw, 3.25rem);      /* 32 → 52 */
  --bd-fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);    /* 20 → 24 */
  --bd-fs-h4:      1.125rem;
  --bd-fs-lede:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17 → 19 */
  --bd-fs-body:    1rem;
  --bd-fs-sm:      0.875rem;
  --bd-fs-xs:      0.75rem;

  --bd-lh-tight: 1.15;
  --bd-lh-head:  1.25;
  --bd-lh-body:  1.7;

  /* Spacing — 8pt base */
  --bd-1: 4px;   --bd-2: 8px;   --bd-3: 12px;  --bd-4: 16px;
  --bd-5: 24px;  --bd-6: 32px;  --bd-7: 48px;  --bd-8: 64px;
  --bd-9: 80px;  --bd-10: 96px; --bd-11: 120px;

  /* Layout */
  --bd-container: 1200px;
  --bd-narrow: 780px;

  /* Radii — near-square. Soft 10-16px corners are the visual signature of
     template-built sites; editorial and luxury retail sit at 0-4px. */
  --bd-r-sm: 2px;
  --bd-r-md: 3px;
  --bd-r-lg: 4px;

  /* Elevation — two levels only. More than that reads cheap. */
  --bd-sh-1: 0 1px 2px rgba(18, 35, 43, .05), 0 1px 3px rgba(18, 35, 43, .04);
  --bd-sh-2: 0 10px 30px rgba(18, 35, 43, .09), 0 2px 6px rgba(18, 35, 43, .05);

  --bd-ease: cubic-bezier(.4, 0, .2, 1);
  --bd-t: .22s var(--bd-ease);

  /* One scrim for every photographic hero — home, shop, About, Contact.
     Defined once so the pages can't drift apart, which they had: shop was
     running ~.75 and the page heroes ~.80 against the homepage's .72. */
  --bd-hero-scrim: linear-gradient(
    100deg,
    rgba(18, 35, 43, .72) 0%,
    rgba(18, 35, 43, .62) 34%,
    rgba(18, 35, 43, .34) 62%,
    rgba(18, 35, 43, .18) 100%);
  /* On a narrow screen the copy sits over the middle of the image rather than
     the darkened left edge, so the gradient rotates and deepens. Carries the
     same 20% reduction as the desktop scrim — that cut was previously applied
     to the desktop token only, which is why mobile looked much darker — plus a
     further 10% off on top of it. */
  --bd-hero-scrim-mobile: linear-gradient(
    180deg,
    rgba(18, 35, 43, .52) 0%,
    rgba(18, 35, 43, .60) 55%,
    rgba(18, 35, 43, .67) 100%);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body {
  font-family: var(--bd-font-body);
  font-size: var(--bd-fs-body);
  line-height: var(--bd-lh-body);
  color: var(--bd-slate);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.bd-h1, .bd-h2, .bd-h3 {
  font-family: var(--bd-font-head);
  color: var(--bd-ink);
  font-weight: 600;
  /* Serifs need far less negative tracking than a geometric sans — over-tighten
     Fraunces and the letterforms collide at display sizes. */
  letter-spacing: -0.015em;
  line-height: 1.08;
  font-variation-settings: var(--bd-wonk);
  text-wrap: balance;
}
h3, h4, h5, h6, .bd-h3 { line-height: 1.2; letter-spacing: -0.01em; }

/* Display sizes get the tightest optical treatment */
.bd-h1 .elementor-heading-title,
.bd-hero-full .bd-h1 .elementor-heading-title {
  letter-spacing: -0.025em;
  line-height: 1.02;
}

/* Accessible focus ring — brass, never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
  outline: 3px solid var(--bd-brass);
  outline-offset: 2px;
  border-radius: 2px;
}

.bd-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Respect reduced-motion. All our motion is decorative. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY BLOCKS
   -------------------------------------------------------------------------- */
.bd-eyebrow .elementor-heading-title,
.bd-eyebrow {
  font-family: var(--bd-font-body);
  font-size: var(--bd-fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bd-brass);
  margin-bottom: var(--bd-3);
}

.bd-h1 .elementor-heading-title { font-size: var(--bd-fs-h1); }
.bd-hero .bd-h1 .elementor-heading-title { font-size: var(--bd-fs-display); }
.bd-h2 .elementor-heading-title { font-size: var(--bd-fs-h2); }
.bd-h2-sm .elementor-heading-title { font-size: var(--bd-fs-h3); letter-spacing: -0.01em; }

.bd-h1 .elementor-heading-title,
.bd-h2 .elementor-heading-title { margin-bottom: var(--bd-4); }

.bd-lede { font-size: var(--bd-fs-lede); color: var(--bd-slate); max-width: 62ch; }
.bd-lede-lg { font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); }
.bd-center .bd-lede, .bd-sechead .bd-lede { margin-inline: auto; }

.bd-prose { max-width: 68ch; }
.bd-prose p { margin-bottom: var(--bd-4); }
.bd-prose strong { color: var(--bd-ink); font-weight: 600; }

.bd-fineprint { font-size: var(--bd-fs-sm); color: var(--bd-mute); }

.bd-center { text-align: center; }
.bd-narrow { max-width: var(--bd-narrow); margin-inline: auto; }
.bd-sechead { max-width: 720px; margin-inline: auto; margin-bottom: var(--bd-7); }

.bd-invert .elementor-heading-title,
.bd-invert, .bd-invert p { color: var(--bd-white); }
.bd-band .bd-lede { color: rgba(255, 255, 255, .82); margin-inline: auto; }

/* In-body links */
.bd-prose a, .bd-lede a, .bd-faq a, .bd-fineprint a {
  color: var(--bd-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--bd-t);
}
.bd-prose a:hover, .bd-lede a:hover, .bd-faq a:hover { color: var(--bd-brass-dk); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.bd-btn .elementor-button,
.bd-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bd-2);
  font-family: var(--bd-font-body);
  font-size: var(--bd-fs-body);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1;
  padding: 17px 32px;
  min-height: 52px;
  border-radius: var(--bd-r-sm);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color var(--bd-t), color var(--bd-t),
              border-color var(--bd-t), transform var(--bd-t), box-shadow var(--bd-t);
  will-change: transform;
}

/* Primary — ink */
.bd-btn-primary .elementor-button,
.bd-a-primary {
  background: var(--bd-ink);
  color: var(--bd-white);
}
.bd-btn-primary .elementor-button:hover,
.bd-a-primary:hover {
  background: var(--bd-ink-2);
  color: var(--bd-white);
  transform: translateY(-2px);
  box-shadow: var(--bd-sh-2);
}

/* Brass — used only on dark bands, one per screen */
.bd-btn-brass .elementor-button {
  background: var(--bd-brass);
  color: var(--bd-ink);
}
.bd-btn-brass .elementor-button:hover {
  background: #C7A470;
  transform: translateY(-2px);
  box-shadow: var(--bd-sh-2);
}

/* Outline — secondary actions */
.bd-btn-outline .elementor-button,
.bd-a-ghost {
  background: transparent;
  color: var(--bd-ink);
  border-color: var(--bd-ink);
}
.bd-btn-outline .elementor-button:hover,
.bd-a-ghost:hover {
  background: var(--bd-ink);
  color: var(--bd-white);
  transform: translateY(-2px);
}

/* Ghost on dark */
.bd-btn-ghost-invert .elementor-button {
  background: transparent;
  color: var(--bd-white);
  border-color: rgba(255, 255, 255, .38);
}
.bd-btn-ghost-invert .elementor-button:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--bd-white);
  color: var(--bd-white);
}

/* Text/link button */
.bd-btn-text .elementor-button {
  background: transparent;
  color: var(--bd-ink);
  padding: 8px 0;
  min-height: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--bd-brass);
}
.bd-btn-text .elementor-button:hover { color: var(--bd-brass-dk); }

.bd-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bd-3);
  margin: var(--bd-5) 0 var(--bd-6);
}

/* Two Button widgets sitting side by side (hero CTAs) */
.bd-btn-inline { display: inline-block !important; width: auto !important; }
.bd-btn-inline:first-of-type { margin-right: var(--bd-3); }
.bd-hero-full .bd-btn-inline { margin-top: var(--bd-5); margin-bottom: var(--bd-5); }

/* Nudge the arrow on hover — the one animation flourish we allow on buttons */
.bd-btn .elementor-button:hover .elementor-button-icon { transform: translateX(3px); }
.bd-btn .elementor-button-icon { transition: transform var(--bd-t); }

/* --------------------------------------------------------------------------
   5. SECTIONS & LAYOUT
   -------------------------------------------------------------------------- */
.bd-section > .elementor-container { max-width: var(--bd-container); }

/* --- Full-bleed hero -----------------------------------------------------
   The section is stretched to the viewport edge in Elementor, so the image
   spans the full width. We re-centre the inner container here so the copy
   still lines up with every section below it. */
.bd-hero-full {
  position: relative;
  overflow: hidden;
}
/* Scrim: dark on the left where the copy sits, clearing to the right so the
   product photography still reads. Without this the white text fails contrast
   over a light bathroom image. */
.bd-hero-full::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bd-hero-scrim);
  pointer-events: none;
}
.bd-hero-full > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: var(--bd-container);
  margin-inline: auto;
  padding-inline: 24px;
}
.bd-hero-full .bd-hero-copy { max-width: 660px; }
.bd-hero-full .bd-h1 .elementor-heading-title { font-size: var(--bd-fs-display); }
.bd-hero-full .bd-lede { color: rgba(255, 255, 255, .88); }

.bd-hero-copy { align-self: center; }
.bd-hero-media img { border-radius: var(--bd-r-lg); }

/* Tick list reversed out on the hero image */
.bd-ticks-invert .elementor-icon-list-text { color: rgba(255, 255, 255, .92); }
.bd-ticks-invert .elementor-icon-list-icon { color: var(--bd-brass); }

/* Anchor variants used inside the hero's HTML widget */
.bd-a-brass {
  background: var(--bd-brass);
  color: var(--bd-ink);
}
.bd-a-brass:hover {
  background: #C7A470;
  color: var(--bd-ink);
  transform: translateY(-2px);
  box-shadow: var(--bd-sh-2);
}
.bd-a-ghost-invert {
  background: transparent;
  color: var(--bd-white);
  border-color: rgba(255, 255, 255, .45);
}
.bd-a-ghost-invert:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--bd-white);
  color: var(--bd-white);
}

.bd-img img {
  border-radius: var(--bd-r-md);
  display: block;
  width: 100%;
  height: auto;
}
.bd-img-round img { border-radius: var(--bd-r-lg); }

.bd-rule .elementor-divider-separator { border-top-color: var(--bd-line); }

/* --------------------------------------------------------------------------
   6. TRUST / VALUE CARDS
   -------------------------------------------------------------------------- */
.bd-trust-card .elementor-icon-box-wrapper { text-align: left; }
.bd-trust-card .elementor-icon-box-icon { margin-bottom: var(--bd-4); }
.bd-trust-card .elementor-icon {
  font-size: 26px;
  color: var(--bd-brass);
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bd-brass-lt);
  border-radius: var(--bd-r-sm);
}
.bd-trust-card .elementor-icon-box-title {
  font-size: var(--bd-fs-h4);
  font-weight: 700;
  color: var(--bd-ink);
  margin-bottom: var(--bd-2);
}
.bd-trust-card .elementor-icon-box-description {
  font-size: var(--bd-fs-sm);
  color: var(--bd-slate);
  line-height: 1.65;
}
.bd-trust-sm .elementor-icon { width: 40px; height: 40px; font-size: 19px; }

.bd-value-card {
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-r-md);
  padding: var(--bd-6);
  height: 100%;
  transition: box-shadow var(--bd-t), transform var(--bd-t);
}
.bd-value-card:hover { box-shadow: var(--bd-sh-2); transform: translateY(-3px); }

.bd-contact-card {
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-r-md);
  padding: var(--bd-6);
  height: 100%;
}

/* --------------------------------------------------------------------------
   7. CATEGORY CARDS
   -------------------------------------------------------------------------- */
/* Four per row, two rows. Wider gutters than Elementor's default so the tiles
   read as separate objects rather than a strip. */
.bd-catgrid .elementor-column { padding-inline: 14px; }
.bd-catgrid > .elementor-container { margin-inline: -14px; }

.bd-cat-card { height: 100%; }
.bd-cat-card .elementor-image-box-wrapper {
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-r-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--bd-t), transform var(--bd-t), border-color var(--bd-t);
}
.bd-cat-card .elementor-image-box-wrapper:hover {
  box-shadow: var(--bd-sh-2);
  transform: translateY(-4px);
  border-color: transparent;
}
.bd-cat-card .elementor-image-box-img { width: 100% !important; margin: 0 !important; }
.bd-cat-card .elementor-image-box-img img {
  width: 100%;
  aspect-ratio: 1 / 1;          /* square tiles */
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
  transition: transform .5s var(--bd-ease);
}
.bd-cat-card .elementor-image-box-wrapper:hover .elementor-image-box-img img {
  transform: scale(1.04);
}
.bd-cat-card .elementor-image-box-content {
  padding: var(--bd-5) var(--bd-5) var(--bd-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.bd-cat-card .elementor-image-box-title {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--bd-ink);
  margin: 0;
  /* Narrow columns were breaking titles mid-word ("Bathroo / m Vanities") */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}
.bd-cat-card .elementor-image-box-title a { color: inherit; text-decoration: none; }
.bd-cat-card .elementor-image-box-description {
  font-size: var(--bd-fs-sm);
  line-height: 1.6;
  color: var(--bd-mute);
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* --------------------------------------------------------------------------
   8. TICK LISTS
   -------------------------------------------------------------------------- */
.bd-ticks .elementor-icon-list-item { margin-bottom: var(--bd-3); align-items: flex-start; }
.bd-ticks .elementor-icon-list-icon {
  color: var(--bd-success);
  font-size: 13px;
  margin-top: 5px;
}
.bd-ticks .elementor-icon-list-text {
  color: var(--bd-slate);
  font-size: var(--bd-fs-body);
  padding-left: var(--bd-3);
}
.bd-ticks-inline .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bd-2) var(--bd-6);
}
.bd-ticks-inline .elementor-icon-list-item { margin-bottom: 0; }
.bd-ticks-inline .elementor-icon-list-text { font-size: var(--bd-fs-sm); }

/* --------------------------------------------------------------------------
   9. BRAND WALL
   -------------------------------------------------------------------------- */
/* Each brand is its own Elementor Button widget so it can be edited, reordered
   or removed in the editor. The column is laid out as a grid here. */
.bd-brandwall-grid > .elementor-widget-wrap,
.bd-brandwall-grid > .elementor-column-wrap > .elementor-widget-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--bd-3);
  align-content: start;
}
.bd-brandwall-grid .elementor-widget { width: 100%; margin: 0 !important; }

.bd-brandtile .elementor-button {
  width: 100%;
  min-height: 88px;
  padding: var(--bd-4);
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-r-sm);
  font-family: var(--bd-font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bd-ink);
}
.bd-brandtile .elementor-button:hover {
  background: var(--bd-white);
  color: var(--bd-ink);
  border-color: var(--bd-brass);
  box-shadow: var(--bd-sh-1);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   10. TESTIMONIALS
   -------------------------------------------------------------------------- */
/* Safety net: equal thirds regardless of how Elementor resolves column widths */
.bd-testgrid > .elementor-container > .elementor-column { width: 33.3333%; }
.bd-testgrid .elementor-column { padding-inline: 14px; }
.bd-testgrid > .elementor-container { margin-inline: -14px; align-items: stretch; }

/* The CARD is the column, so the star rating and the quote share one surface */
.bd-quote-col > .elementor-widget-wrap,
.bd-quote-col > .elementor-column-wrap > .elementor-widget-wrap {
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-r-md);
  padding: var(--bd-6);
  height: 100%;
  align-content: start;
  transition: box-shadow var(--bd-t), transform var(--bd-t);
}
.bd-quote-col:hover > .elementor-widget-wrap,
.bd-quote-col:hover > .elementor-column-wrap > .elementor-widget-wrap {
  box-shadow: var(--bd-sh-2);
  transform: translateY(-3px);
}

.bd-stars { margin-bottom: var(--bd-4) !important; }
.bd-stars .elementor-star-rating {
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--bd-brass);
}
.bd-stars .elementor-star-rating__wrapper { justify-content: flex-start; }
.bd-stars .elementor-star-rating i:before { color: var(--bd-brass); }

.bd-quote .elementor-testimonial-wrapper {
  background: transparent;
  border: 0;
  padding: 0;
}
/* Elementor renders a grey placeholder avatar when the image control is empty.
   A stock face on a real customer review is worse than no face at all. */
.bd-quote .elementor-testimonial-image,
.bd-quote .elementor-testimonial-wrapper .elementor-testimonial-image img { display: none !important; }

.bd-quote .elementor-testimonial-content {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--bd-ink);
  margin-bottom: var(--bd-5);
  /* long words were breaking mid-word in narrow columns */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
/* Brass quote mark in place of the avatar */
.bd-quote .elementor-testimonial-content::before {
  content: "“";
  display: block;
  font-family: var(--bd-font-head);
  font-size: 3rem;
  line-height: .7;
  color: var(--bd-brass);
  margin-bottom: var(--bd-3);
}
.bd-quote .elementor-testimonial-meta,
.bd-quote .elementor-testimonial-meta-inner { padding: 0; }
.bd-quote .elementor-testimonial-details { margin: 0; text-align: left; }
.bd-quote .elementor-testimonial-name {
  font-family: var(--bd-font-head);
  font-weight: 700;
  color: var(--bd-ink);
  font-size: var(--bd-fs-body);
  display: block;
}
.bd-quote .elementor-testimonial-job {
  font-size: var(--bd-fs-sm);
  color: var(--bd-mute);
  display: block;
}

/* --------------------------------------------------------------------------
   11. ACCORDION / FAQ
   -------------------------------------------------------------------------- */
.bd-faq .elementor-accordion-item {
  border: 0;
  border-bottom: 1px solid var(--bd-line);
  background: transparent;
}
.bd-faq .elementor-accordion-item:first-child { border-top: 1px solid var(--bd-line); }
.bd-faq .elementor-tab-title {
  padding: var(--bd-5) 0;
  font-family: var(--bd-font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bd-ink);
  background: transparent;
  border: 0;
  transition: color var(--bd-t);
}
.bd-faq .elementor-tab-title:hover { color: var(--bd-brass-dk); }
.bd-faq .elementor-tab-title.elementor-active { color: var(--bd-ink); }
.bd-faq .elementor-accordion-icon { color: var(--bd-brass); font-size: 14px; }
.bd-faq .elementor-tab-content {
  padding: 0 0 var(--bd-5);
  border: 0;
  background: transparent;
  color: var(--bd-slate);
  font-size: var(--bd-fs-body);
  line-height: var(--bd-lh-body);
}
.bd-faq .elementor-tab-content p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. DARK CTA BAND
   -------------------------------------------------------------------------- */
/* Photo-backed CTA band — the scrim has to be heavy here because the copy is
   centred over the middle of the image, not a darkened edge like the hero. */
.bd-band-photo { position: relative; overflow: hidden; }
.bd-band-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 35, 43, .88) 0%, rgba(18, 35, 43, .93) 100%);
  pointer-events: none;
  z-index: 0;
}
.bd-band-photo > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: var(--bd-container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Brand tiles: wider crop than the square category tiles so the product reads
   at a smaller size, and centred text since the label is just a brand name. */
.bd-brand-card .elementor-image-box-img img { aspect-ratio: 4 / 3; }
.bd-brand-card .elementor-image-box-content { text-align: center; gap: 2px; }
.bd-brand-card .elementor-image-box-title {
  font-size: 1.0625rem;
  letter-spacing: .04em;
}
.bd-brand-card .elementor-image-box-description {
  font-size: var(--bd-fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bd-brass-dk);
}

/* Supporting image tucked into a text column (FAQ, contact) */
.bd-img-inset { margin-top: var(--bd-6) !important; }
.bd-img-inset img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* The ink ground is also set as an Elementor section background, but Elementor
   paints those from a per-post stylesheet that only regenerates when Elementor
   saves the page — a REST deploy leaves it empty, which rendered white text on
   white. Declaring it here means the band is legible regardless. */
/* Category and blog archive H1 — see BD_Core::category_intro(). */
.bd-cat-title {
  font-family: var(--bd-font-head);
  font-variation-settings: var(--bd-wonk);
  font-size: var(--bd-fs-h1, clamp(2rem, 1.2rem + 2.6vw, 3.25rem));
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--bd-ink);
  margin: 0 0 var(--bd-4);
}
.bd-blog-title { margin-bottom: var(--bd-6); }

/* --------------------------------------------------------------------------
   PICKUP-ONLY LABELLING
   Warehouse-collection items have to read as collection-only before the add to
   cart, not first at checkout. Brass rather than red: this is a condition of
   sale, not an error.
   -------------------------------------------------------------------------- */
.bd-pickup-note {
  display: flex;
  gap: var(--bd-3);
  align-items: flex-start;
  margin: var(--bd-5) 0;
  padding: var(--bd-4);
  background: rgba(176, 141, 87, .08);
  border: 1px solid rgba(176, 141, 87, .38);
  border-left: 3px solid var(--bd-brass);
  border-radius: var(--bd-r-sm);
}
.bd-pickup-note__icon { color: var(--bd-brass); font-size: 1.1rem; line-height: 1.4; }
.bd-pickup-note__body {
  font-size: var(--bd-fs-sm);
  line-height: 1.55;
  color: var(--bd-slate);
}
.bd-pickup-note__body strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--bd-font-body);
  font-weight: 600;
  color: var(--bd-ink);
}
.bd-pickup-note a { color: var(--bd-ink); text-decoration: underline; }

.bd-pickup-badge {
  display: inline-block;
  margin: 0 0 var(--bd-2);
  padding: 3px 8px;
  background: var(--bd-ink);
  color: var(--bd-white, #fff);
  font-family: var(--bd-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--bd-r-sm);
}

/* Cart / checkout line meta */
.woocommerce .cart_item .variation dt,
.woocommerce-checkout-review-order .variation dt { font-weight: 600; }

.bd-band { position: relative; overflow: hidden; background-color: var(--bd-ink); }
.bd-band .elementor-heading-title,
.bd-band .bd-invert { color: var(--bd-white, #fff); }
.bd-band::after {
  /* subtle brass wash, top-right — adds depth without an image request */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 85% 0%, rgba(176, 141, 87, .22), transparent 70%);
  pointer-events: none;
}
.bd-band > .elementor-container { position: relative; z-index: 1; }
.bd-band .elementor-widget-button { display: inline-block; margin: var(--bd-2) var(--bd-2) 0; }

/* --------------------------------------------------------------------------
   13. CONTACT LIST / FORMS
   -------------------------------------------------------------------------- */
/* Contact details as an Elementor Icon List widget (editable rows) */
.bd-contactlist { margin-top: var(--bd-5); }
.bd-contactlist .elementor-icon-list-item {
  padding: var(--bd-3) 0;
  border-bottom: 1px solid var(--bd-line);
  font-size: 1.0625rem;
  align-items: center;
}
.bd-contactlist .elementor-icon-list-icon {
  flex: 0 0 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bd-brass-lt);
  color: var(--bd-brass-dk);
  border-radius: var(--bd-r-sm);
  font-size: 14px;
  margin-right: var(--bd-3);
}
.bd-contactlist .elementor-icon-list-text {
  color: var(--bd-ink);
  font-weight: 600;
  padding-left: 0;
}
.bd-contactlist a:hover .elementor-icon-list-text { color: var(--bd-brass-dk); }

/* Form styling — built for WPForms Lite (active on the site), with generic
   input selectors retained so it degrades gracefully if the form plugin changes.
   Set WPForms > Settings > General > Include Form Styling = "Base styling only"
   so these rules win without an !important arms race. */
.bd-form input[type="text"], .bd-form input[type="email"], .bd-form input[type="tel"],
.bd-form input[type="url"], .bd-form input[type="number"],
.bd-form select, .bd-form textarea,
.bd-form .wpforms-container input[type="text"],
.bd-form .wpforms-container input[type="email"],
.bd-form .wpforms-container input[type="tel"],
.bd-form .wpforms-container select,
.bd-form .wpforms-container textarea,
.bd-form .wpforms-field-medium,
.bd-form .wpforms-field-large {
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--bd-font-body);
  font-size: var(--bd-fs-body);
  color: var(--bd-ink);
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-r-sm);
  padding: 14px 16px;
  min-height: 52px;
  box-shadow: none;
  transition: border-color var(--bd-t), box-shadow var(--bd-t);
}
.bd-form textarea,
.bd-form .wpforms-container textarea { min-height: 140px; }

.bd-form input:focus, .bd-form select:focus, .bd-form textarea:focus,
.bd-form .wpforms-container input:focus,
.bd-form .wpforms-container select:focus,
.bd-form .wpforms-container textarea:focus {
  border-color: var(--bd-ink);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, .22);
  outline: none;
}

.bd-form label,
.bd-form .wpforms-field-label {
  font-family: var(--bd-font-body) !important;
  font-size: var(--bd-fs-sm) !important;
  font-weight: 600 !important;
  color: var(--bd-ink) !important;
  margin-bottom: var(--bd-2);
  display: block;
}
.bd-form .wpforms-required-label { color: var(--bd-sale); }
.bd-form .wpforms-field-sublabel,
.bd-form .wpforms-field-description {
  font-size: var(--bd-fs-sm);
  color: var(--bd-mute);
  margin-top: var(--bd-2);
}
.bd-form .wpforms-field { padding: 0 0 var(--bd-5) 0; }

/* Validation — never rely on colour alone; WPForms also sets aria-invalid */
.bd-form .wpforms-error {
  border-color: var(--bd-sale) !important;
}
.bd-form label.wpforms-error {
  color: var(--bd-sale) !important;
  font-weight: 500 !important;
  font-size: var(--bd-fs-sm) !important;
  margin-top: var(--bd-2);
}
.bd-form .wpforms-confirmation-container-full {
  background: var(--bd-brass-lt);
  border: 1px solid var(--bd-brass);
  border-radius: var(--bd-r-md);
  padding: var(--bd-5);
  color: var(--bd-ink);
}

.bd-form button[type="submit"],
.bd-form input[type="submit"],
.bd-form .wpforms-submit {
  background: var(--bd-ink) !important;
  color: var(--bd-white) !important;
  font-family: var(--bd-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--bd-fs-body) !important;
  border: 0 !important;
  border-radius: var(--bd-r-sm) !important;
  padding: 17px 32px !important;
  min-height: 52px;
  cursor: pointer;
  transition: background var(--bd-t), transform var(--bd-t);
}
.bd-form button[type="submit"]:hover,
.bd-form .wpforms-submit:hover {
  background: var(--bd-ink-2) !important;
  transform: translateY(-2px);
}

.bd-form-card {
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-r-lg);
  padding: var(--bd-7);
  box-shadow: var(--bd-sh-1);
}

/* Inline newsletter layout — one field + button on a single row */
/* The newsletter form carries a required Name field whose First and Last
   sub-inputs sit in their own nested row, so the field container cannot be a
   simple two-child flex line — that left the Name field as a tall white box
   beside a short email input. Grid gives first / last / email equal tracks. */
/* This form sits in a half-width column, so three inputs on one line is always
   cramped — first/last share a row, email takes its own, button below. Every
   track is minmax(0,1fr): plain 1fr floors at the inputs' min-content width
   and overflows the column. */
.bd-form-inline form {
  display: grid;
  gap: var(--bd-3);
  justify-items: stretch;
}
.bd-form-inline .wpforms-field-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bd-3);
  align-items: start;
}
.bd-form-inline .wpforms-field {
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

/* First / last side by side inside the Name field's own row.
   Grid kept placing these on two rows despite two columns and two children —
   flex with nowrap cannot produce a second line, so it holds regardless of
   whatever WPForms placement rule was interfering. */
.bd-form-inline .wpforms-container .wpforms-field-name .wpforms-field-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: var(--bd-2);
  max-width: none;
  padding: 0 !important;
}
.bd-form-inline .wpforms-container .wpforms-field-name .wpforms-field-row-block {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* These inputs have no placeholders, so the labels cannot simply be hidden —
   that leaves three blank boxes. The redundant "Name" legend goes; the
   sublabels and the Email label move above their inputs as quiet captions. */
/* WPForms ships selectors like
   `.wpforms-container:not(.wpforms-container-full) .wpforms-field-sublabel`
   — three classes, which outranks a two-class selector. Everything below is
   either scoped through .wpforms-container to win on specificity, or marked
   !important where WPForms itself uses a stronger selector still. */
.bd-form-inline .wpforms-container .wpforms-field-name legend.wpforms-field-label,
.bd-form-inline .wpforms-container .wpforms-field-name > .wpforms-field-label {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0); white-space: nowrap;
}
.bd-form-inline .wpforms-container .wpforms-field-row-block,
.bd-form-inline .wpforms-container .wpforms-field-email {
  display: flex;
  flex-direction: column;
}
.bd-form-inline .wpforms-container .wpforms-field-row-block .wpforms-field-sublabel,
.bd-form-inline .wpforms-container .wpforms-field-email > .wpforms-field-label { order: -1; }
.bd-form-inline .wpforms-container .wpforms-field-sublabel,
.bd-form-inline .wpforms-container .wpforms-field-email > .wpforms-field-label {
  font-family: var(--bd-font-body) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bd-slate, #4A626E) !important;
  min-width: 0 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}
.bd-form-inline .wpforms-required-label { display: none !important; }

/* Nothing inside this form should paint its own panel — the white box behind
   the name field came from a fieldset background, not from the inputs. */
.bd-form-inline .wpforms-container .wpforms-field,
.bd-form-inline .wpforms-container .wpforms-field-row,
.bd-form-inline .wpforms-container .wpforms-field-row-block {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.bd-form-inline .wpforms-container .wpforms-field input[type="text"],
.bd-form-inline .wpforms-container .wpforms-field input[type="email"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
.bd-form-inline .wpforms-submit-container {
  padding-top: 0 !important;
  margin: 0 !important;
  justify-self: start;
}

@media (max-width: 767px) {
  /* Stacked first/last reads better than two 130px boxes on a phone */
  .bd-form-inline .wpforms-field-name .wpforms-field-row { grid-template-columns: minmax(0, 1fr); }
  .bd-form-inline .wpforms-submit-container { justify-self: stretch; }
  .bd-form-inline .wpforms-submit-container .wpforms-submit { width: 100%; }
}

/* --------------------------------------------------------------------------
   14. TABLES
   -------------------------------------------------------------------------- */
.bd-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--bd-4); }
.bd-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--bd-fs-body); }
.bd-table th, .bd-table td {
  text-align: left;
  padding: var(--bd-4);
  border-bottom: 1px solid var(--bd-line);
}
.bd-table thead th {
  font-family: var(--bd-font-head);
  font-size: var(--bd-fs-sm);
  font-weight: 700;
  color: var(--bd-ink);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--bd-porcelain);
  border-bottom: 2px solid var(--bd-ink);
}
.bd-table tbody tr:nth-child(even) { background: rgba(247, 245, 242, .55); }
.bd-table td:first-child { font-weight: 600; color: var(--bd-ink); }

/* --------------------------------------------------------------------------
   15. WOOCOMMERCE
   Elementor Free ships no Woo widgets, so shop / category / cart / checkout /
   product pages use native Woo templates. Everything below styles those.
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bd-5);
  margin: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background: var(--bd-white);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: box-shadow var(--bd-t), transform var(--bd-t);
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--bd-sh-2);
  transform: translateY(-4px);
}
.woocommerce ul.products li.product a img {
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--bd-font-head);
  font-size: var(--bd-fs-body) !important;
  font-weight: 600;
  color: var(--bd-ink);
  line-height: 1.4;
  padding: var(--bd-4) var(--bd-4) var(--bd-2) !important;
}
.woocommerce ul.products li.product .price {
  font-family: var(--bd-font-body);
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bd-ink);
  padding: 0 var(--bd-4) var(--bd-4);
  margin-top: auto;
}
.woocommerce ul.products li.product .price del {
  color: var(--bd-mute);
  font-weight: 400;
  font-size: var(--bd-fs-sm);
  margin-right: var(--bd-2);
}
.woocommerce ul.products li.product .price ins {
  color: var(--bd-sale);
  text-decoration: none;
}
.woocommerce ul.products li.product .button {
  margin: 0 var(--bd-4) var(--bd-4);
  background: var(--bd-ink);
  color: var(--bd-white);
  font-family: var(--bd-font-body);
  font-weight: 600;
  font-size: var(--bd-fs-sm);
  border-radius: var(--bd-r-sm);
  padding: 13px 20px;
  min-height: 46px;
  text-align: center;
  transition: background var(--bd-t);
}
.woocommerce ul.products li.product .button:hover { background: var(--bd-brass); color: var(--bd-ink); }

/* Sale badge */
.woocommerce span.onsale {
  background: var(--bd-sale);
  color: var(--bd-white);
  font-family: var(--bd-font-body);
  font-size: var(--bd-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--bd-r-sm);
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 7px 11px;
  top: var(--bd-3);
  left: var(--bd-3);
  right: auto;
  margin: 0;
}

/* Single product */
.woocommerce div.product .product_title {
  font-size: var(--bd-fs-h2);
  margin-bottom: var(--bd-3);
}
/* Single product price — same reasoning as the grid. 28px is closer to a size
   Fraunces handles, but a price is a number to read, not a headline to admire,
   and matching the grid keeps them consistent. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--bd-font-body);
  font-variation-settings: normal;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bd-ink);
}
.woocommerce div.product p.price ins { color: var(--bd-sale); text-decoration: none; }
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  background: var(--bd-ink);
  color: var(--bd-white);
  font-weight: 600;
  font-size: 1.0625rem;
  border-radius: var(--bd-r-sm);
  padding: 17px 36px;
  min-height: 56px;
  transition: background var(--bd-t), transform var(--bd-t);
}
.woocommerce div.product form.cart .button:hover { background: var(--bd-ink-2); transform: translateY(-2px); }
.woocommerce div.product .stock.in-stock { color: var(--bd-success); font-weight: 600; }
.woocommerce div.product .stock.out-of-stock { color: var(--bd-sale); font-weight: 600; }

.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: 1px solid var(--bd-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 var(--bd-6) 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--bd-font-head);
  font-weight: 600;
  color: var(--bd-mute);
  padding: var(--bd-4) 0;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--bd-ink);
  border-bottom-color: var(--bd-brass);
}

/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb {
  font-size: var(--bd-fs-sm);
  color: var(--bd-mute);
  margin-bottom: var(--bd-5);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--bd-slate); }

/* Cart / checkout buttons inherit the primary style */
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce button.button.alt {
  background: var(--bd-ink) !important;
  color: var(--bd-white) !important;
  border-radius: var(--bd-r-sm) !important;
  font-weight: 600 !important;
  min-height: 54px;
}
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover { background: var(--bd-ink-2) !important; }

/* Category archive intro copy — injected by the mu-plugin */
.bd-cat-intro { max-width: 68ch; margin-bottom: var(--bd-6); }
.bd-cat-intro h1 { margin-bottom: var(--bd-3); }

/* --------------------------------------------------------------------------
   16. HEADER / FOOTER (Blocksy Free)
   -------------------------------------------------------------------------- */
.bd-topbar {
  font-size: var(--bd-fs-sm);
  letter-spacing: .01em;
}
.bd-topbar a { color: inherit; text-decoration: none; }

/* Sticky header shadow only once scrolled — Blocksy adds .ct-sticky-active */
[data-sticky] .ct-header [data-row="middle"] { transition: box-shadow var(--bd-t); }

/* --- Site footer ---------------------------------------------------------
   Blocksy's own footer is hidden (not unhooked) so nothing breaks if the
   Elementor template is ever removed — you'd get the theme footer back. */
.ct-footer { display: none !important; }

.bd-sitefooter {
  display: block;
  background: var(--bd-ink);
  color: rgba(255, 255, 255, .72);
  position: relative;
}
.bd-sitefooter .bd-ft > .elementor-container {
  max-width: var(--bd-container);
  margin-inline: auto;
  padding-inline: 24px;
}
.bd-sitefooter p,
.bd-sitefooter li { color: rgba(255, 255, 255, .72); }
.bd-sitefooter a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.bd-sitefooter a:hover { color: var(--bd-white); }

/* Band 1 — the statement. Oversized contact detail is the whole idea here:
   a phone number at 14px in a footer is a phone number nobody rings. */
.bd-ft-statement-band { border-top: 1px solid rgba(255, 255, 255, .1); }
.bd-ft-statement .elementor-heading-title {
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  color: var(--bd-white);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.bd-ft-contact { margin-bottom: var(--bd-6); }
.bd-ft-contact .elementor-icon-list-item {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding: var(--bd-4) 0;
  align-items: center;
}
.bd-ft-contact .elementor-icon-list-icon { color: var(--bd-brass); font-size: 15px; margin-right: var(--bd-3); }
.bd-ft-contact .elementor-icon-list-text {
  font-family: var(--bd-font-head);
  font-variation-settings: var(--bd-wonk);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 500;
  color: var(--bd-white);
  letter-spacing: -0.01em;
  transition: color var(--bd-t);
}
.bd-ft-contact a:hover .elementor-icon-list-text { color: var(--bd-brass); }

/* Band 2 — link grid */
.bd-ft-links-band { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: var(--bd-8) !important; }
.bd-ft-logo { margin-bottom: var(--bd-5) !important; }
.bd-ft-logo img {
  width: 220px;
  max-width: 70%;
  height: auto;
  border-radius: 0;
  display: block;
}
@media (max-width: 767px) {
  .bd-ft-logo img { width: 180px; }
}

/* retained for any legacy typographic wordmark */
.bd-ft-brand .elementor-heading-title {
  font-family: var(--bd-font-head);
  font-variation-settings: var(--bd-wonk);
  font-size: 1.375rem;
  color: var(--bd-white);
  margin-bottom: var(--bd-3);
}
.bd-ft-blurb p { font-size: var(--bd-fs-sm); line-height: 1.7; max-width: 34ch; }
.bd-ft-meta { margin-top: var(--bd-5); }
.bd-ft-meta .elementor-icon-list-item { margin-bottom: var(--bd-2); font-size: var(--bd-fs-sm); }
.bd-ft-meta .elementor-icon-list-icon { color: var(--bd-brass); font-size: 12px; }

.bd-ft-head .elementor-heading-title {
  font-family: var(--bd-font-body);
  font-size: var(--bd-fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin-bottom: var(--bd-5);
}
.bd-ft-links .elementor-icon-list-item { margin-bottom: 0; }
.bd-ft-links .elementor-icon-list-item a {
  padding: 7px 0;
  display: flex;
  align-items: center;
}
.bd-ft-links .elementor-icon-list-icon {
  color: var(--bd-brass);
  font-size: 10px;
  opacity: 0;
  margin-right: 0;
  width: 0;
  transition: opacity var(--bd-t), width var(--bd-t), margin var(--bd-t);
}
/* The chevron slides in on hover rather than sitting there permanently —
   keeps the list clean at rest and gives the row a reason to respond. */
.bd-ft-links .elementor-icon-list-item:hover .elementor-icon-list-icon {
  opacity: 1;
  width: 10px;
  margin-right: 8px;
}
.bd-ft-links .elementor-icon-list-text {
  font-size: .9375rem;
  transition: color var(--bd-t);
}

.bd-ft-social { margin-top: var(--bd-5); }
.bd-ft-social .elementor-social-icon {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--bd-r-sm);
  width: 42px; height: 42px;
  font-size: 15px;
  color: rgba(255, 255, 255, .8);
  transition: all var(--bd-t);
}
.bd-ft-social .elementor-social-icon:hover {
  background: var(--bd-brass);
  border-color: var(--bd-brass);
  color: var(--bd-ink);
  transform: translateY(-2px);
}

/* Band 3 — legal */
.bd-ft-base { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: var(--bd-6) !important; }
.bd-ft-legal p { font-size: var(--bd-fs-sm); color: rgba(255, 255, 255, .5); margin: 0; }
.bd-ft-pay ul.bd-paywall { justify-content: flex-end; }
.bd-ft-pay { margin: 0; }

@media (max-width: 767px) {
  .bd-ft-statement-band, .bd-ft-links-band { padding-top: var(--bd-7) !important; }
  .bd-ft-contact .elementor-icon-list-text { font-size: 1.25rem; }
  .bd-ft-pay ul.bd-paywall { justify-content: flex-start; margin-top: var(--bd-4); }
  .bd-ft-head .elementor-heading-title { margin-top: var(--bd-6); margin-bottom: var(--bd-3); }
}

.bd-paywall {
  display: flex; flex-wrap: wrap; gap: var(--bd-2);
  list-style: none; margin: 0; padding: 0;
}
.bd-paywall li {
  background: rgba(255, 255, 255, .1);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: var(--bd-fs-xs);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .8);
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   Breakpoints match Elementor's defaults so editor preview == front end.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bd-sechead { margin-bottom: var(--bd-6); }

  /* Tablet: 2 per row rather than 4 cramped ones */
  .bd-catgrid > .elementor-container > .elementor-column { width: 50%; }
  .bd-catgrid .elementor-column { padding-inline: 10px; margin-bottom: 20px; }
  .bd-catgrid > .elementor-container { margin-inline: -10px; }

  /* Three testimonials never fit legibly on a tablet — stack them */
  .bd-testgrid > .elementor-container > .elementor-column { width: 100%; }
  .bd-testgrid .elementor-column { margin-bottom: 20px; }
}

@media (max-width: 767px) {
  :root { --bd-container: 100%; }

  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bd-3); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--bd-fs-sm) !important; }
  .woocommerce ul.products li.product .button { font-size: var(--bd-fs-xs); padding: 12px 14px; }

  /* Full-bleed hero: strengthen the scrim, since on a narrow screen the copy
     sits over the middle of the image rather than the darkened left edge. */
  .bd-hero-full::before { background: var(--bd-hero-scrim-mobile); }
  .bd-hero-full > .elementor-container { padding-inline: 20px; }
  .bd-hero-full .bd-hero-copy { max-width: 100%; }

  /* Legacy split hero (still used if the hero is reverted to two columns) */
  .bd-hero:not(.bd-hero-full) > .elementor-container { flex-direction: column-reverse; }
  .bd-hero-media { margin-bottom: var(--bd-6); }

  /* Full-width tap targets — a 48px minimum everywhere */
  .bd-btnrow { flex-direction: column; }
  .bd-btnrow .bd-a { width: 100%; }
  .bd-btn .elementor-button { width: 100%; }
  .bd-band .elementor-widget-button { display: block; margin: var(--bd-2) 0 0; }

  .bd-form-card { padding: var(--bd-5); }
  .bd-value-card { padding: var(--bd-5); }
  .bd-brandwall { grid-template-columns: repeat(2, 1fr); }

  .bd-ticks-inline .elementor-icon-list-items { flex-direction: column; gap: var(--bd-2); }

  /* Category grid: 2-up on mobile rather than 1-up — more of the range visible
     above the fold, which measurably shortens the path to a category. */
  .bd-catgrid > .elementor-container > .elementor-column { width: 50%; }
  .bd-catgrid .elementor-column { padding-inline: 6px; }
  .bd-catgrid > .elementor-container { margin-inline: -6px; }
  .bd-cat-card .elementor-image-box-content { padding: var(--bd-4); gap: 2px; }
  .bd-cat-card .elementor-image-box-title { font-size: 1rem; }
  .bd-cat-card .elementor-image-box-description { display: none; }
}

@media (max-width: 480px) {
  .bd-brandwall { grid-template-columns: 1fr 1fr; }
  .bd-table { min-width: 480px; }
}

/* ==========================================================================
   19. EDITORIAL LAYER
   The difference between "clean template" and "designed". Kept as one block so
   the whole treatment can be reverted by deleting it.
   ========================================================================== */

/* --- 19.1 Section heads: asymmetric, not centred ------------------------- */
/* Centred headings read as safe. An editorial page anchors left and leaves the
   right side open — the whitespace becomes deliberate rather than leftover. */
.bd-sechead,
.bd-sechead.bd-center {
  text-align: left;
  max-width: 30ch;
  margin-inline: 0;
  margin-bottom: var(--bd-9);
}
.bd-sechead .bd-lede,
.bd-center .bd-sechead .bd-lede { margin-inline: 0; max-width: 46ch; }
.bd-sechead .bd-h2 .elementor-heading-title { font-size: var(--bd-fs-h2); }

/* Testimonial head: heading left, lifestyle shot right. .bd-sechead caps at
   30ch so the heading keeps its narrow editorial measure inside the column
   while the photograph fills the space that was previously empty. */
.bd-tests > .elementor-container { align-items: center; }
.bd-tests .bd-sechead { margin-bottom: 0; }
.bd-tests-img .elementor-widget-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .bd-tests-img { margin-top: var(--bd-6); }
  .bd-tests-img .elementor-widget-image img { aspect-ratio: 16 / 10; }
}

/* Hairline rule above the eyebrow — a small, cheap editorial signal */
.bd-eyebrow { position: relative; padding-top: var(--bd-4); }
.bd-eyebrow::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 1px;
  background: var(--bd-brass);
}
.bd-center:not(.bd-sechead) .bd-eyebrow::before,
.bd-band .bd-eyebrow::before { left: 50%; transform: translateX(-50%); }

/* --- 19.2 Borderless cards ---------------------------------------------- */
/* Boxed cards on tinted panels are the clearest page-builder tell. Remove the
   borders and let the photography and spacing do the work. */
.bd-cat-card .elementor-image-box-wrapper,
.bd-brand-card .elementor-image-box-wrapper {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.bd-cat-card .elementor-image-box-wrapper:hover,
.bd-brand-card .elementor-image-box-wrapper:hover {
  box-shadow: none;
  transform: none;
}
.bd-cat-card .elementor-image-box-img {
  overflow: hidden;
  border-radius: var(--bd-r-lg);
  background: var(--bd-sand);
}
/* Portrait crop — taller images read as editorial, square reads as catalogue */
.bd-cat-card .elementor-image-box-img img { aspect-ratio: 4 / 5; }
.bd-brand-card .elementor-image-box-img img { aspect-ratio: 3 / 4; }
.bd-cat-card .elementor-image-box-wrapper:hover .elementor-image-box-img img {
  transform: scale(1.06);
}
.bd-cat-card .elementor-image-box-content {
  padding: var(--bd-5) 0 0;
  text-align: left;
}
.bd-brand-card .elementor-image-box-content { text-align: left; }
.bd-cat-card .elementor-image-box-title { font-size: 1.25rem; font-weight: 600; }

/* Underline that draws in on hover — replaces the card border as the affordance */
.bd-cat-card .elementor-image-box-title { display: inline-block; }
.bd-cat-card .elementor-image-box-title a { position: relative; }
.bd-cat-card .elementor-image-box-title a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--bd-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--bd-ease);
}
.bd-cat-card .elementor-image-box-wrapper:hover .elementor-image-box-title a::after {
  transform: scaleX(1);
}

/* Value / trust / testimonial cards: hairline top rule instead of a full box */
.bd-value-card,
.bd-contact-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--bd-line);
  border-radius: 0;
  padding: var(--bd-6) 0 0;
}
.bd-value-card:hover { box-shadow: none; transform: none; }
.bd-quote-col > .elementor-widget-wrap,
.bd-quote-col > .elementor-column-wrap > .elementor-widget-wrap {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--bd-line);
  border-radius: 0;
  padding: var(--bd-6) 0 0;
}
.bd-quote-col:hover > .elementor-widget-wrap,
.bd-quote-col:hover > .elementor-column-wrap > .elementor-widget-wrap {
  box-shadow: none;
  transform: none;
}
.bd-quote .elementor-testimonial-content {
  font-family: var(--bd-font-head);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.45;
  font-variation-settings: var(--bd-wonk);
}
.bd-quote .elementor-testimonial-content::before { display: none; }

/* Trust bar: drop the tinted chips, use the icon at size on open ground */
.bd-trust-card .elementor-icon {
  background: transparent;
  width: auto; height: auto;
  font-size: 28px;
  color: var(--bd-brass);
}

/* --- 19.3 Images -------------------------------------------------------- */
.bd-img img, .bd-img-round img { border-radius: var(--bd-r-lg); }
.bd-why .bd-img img { aspect-ratio: 4 / 5; object-fit: cover; }

/* --- 19.4 Scroll reveal -------------------------------------------------- */
/* Staggered rise-and-fade. Driven by IntersectionObserver in bd-core.php,
   which adds .bd-in when the section enters the viewport. */
.bd-reveal > .elementor-container > .elementor-column {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--bd-ease), transform .7s var(--bd-ease);
}
.bd-reveal.bd-in > .elementor-container > .elementor-column { opacity: 1; transform: none; }
.bd-reveal.bd-in > .elementor-container > .elementor-column:nth-child(2) { transition-delay: .08s; }
.bd-reveal.bd-in > .elementor-container > .elementor-column:nth-child(3) { transition-delay: .16s; }
.bd-reveal.bd-in > .elementor-container > .elementor-column:nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .bd-reveal > .elementor-container > .elementor-column {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- 19.7 WooCommerce archive: editorial storefront ----------------------
   Overrides §15's bordered-card treatment to match the rest of the site.
   Cards lose their boxes, images go portrait, and Add to cart reveals on
   hover on desktop while staying permanently visible on touch — where a
   hover-only control would simply be unreachable. */

/* --- Full-bleed banner ---------------------------------------------------
   Elementor's "stretch section" needs the theme to declare a stretch target,
   which Blocksy doesn't do inside the WooCommerce content wrapper. This is the
   reliable escape: 100vw, pulled back by half the difference on each side. */
/* Full-bleed escape from WooCommerce's content wrapper.
   `margin-left: calc(50% - 50vw)` assumes the element's containing block is
   centred in the viewport — inside the Woo wrapper it isn't, so the section
   stayed pinned to the 1200px container. The 50% + translateX(-50%) pair
   makes no such assumption: it centres on the element's own midpoint. */
.woocommerce .bd-shopbannersec,
.bd-shopbannersec,
.bd-fullbleed {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  transform: translateX(-50%);
}
/* The hero image is a background on the SECTION, set here rather than through
   an Image widget or Elementor's background control.
   - An Image widget needed absolute positioning to sit behind the copy, and
     Elementor's own widget CSS kept winning the offsets.
   - Elementor's background control writes to the per-post CSS file, which only
     regenerates when Elementor saves the page — impossible for the WooCommerce
     shop archive, which can't be opened in the editor.
   Setting it here is deterministic: one file, under our control, always applied. */
.bd-shopbannersec {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 46vw, 620px);
  display: flex;
  align-items: center;
  background-image: url("/wp-content/uploads/2026/08/bathroom-deals-header.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--bd-ink);
}
.bd-shopbannersec > .elementor-container { position: relative; z-index: 2; }
/* Scrim. Two layers on purpose: a directional gradient that keeps the right
   side of the photograph visible, over a flat ink wash that raises the
   contrast floor everywhere. A gradient alone left the tail of each line of
   copy sitting on near-white tile — legible in a mockup, not on a real screen.
   In the text zone this puts white on roughly #1B2C34, comfortably past 7:1. */
.bd-shopbannersec::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bd-hero-scrim);
  pointer-events: none;
}
/* Text shadow does the contrast work the scrim no longer has to. It darkens
   only the pixels immediately behind the glyphs, so the photograph stays
   visible while the type keeps its contrast ratio. */
.bd-shopbannersec .elementor-heading-title,
.bd-shopbannersec .bd-lede p,
.bd-shopbannersec .elementor-icon-list-text,
.bd-hero-full .elementor-heading-title,
.bd-hero-full .bd-lede p,
.bd-hero-full .elementor-icon-list-text {
  text-shadow: 0 1px 12px rgba(10, 20, 26, .55), 0 1px 3px rgba(10, 20, 26, .4);
}
.bd-shopbannersec .bd-shop-hero { max-width: 680px; }

@media (max-width: 767px) {
  .bd-shopbannersec { min-height: 340px; }
  .bd-shopbannersec .bd-shop-hero { max-width: 100%; }
  .bd-shopbannersec::after { background: var(--bd-hero-scrim-mobile); }
}

/* --- In-post product figures --------------------------------------------
   Article images are live product shots linked back to the product. The duo
   variant sits two finishes side by side where the copy invites a comparison,
   which is the whole point of a finishes guide. */
.bd-post-figure { margin: var(--bd-6) 0; }
.bd-post-figure img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bd-porcelain);
  border-radius: var(--bd-r-md);
}
.bd-post-figure figcaption {
  margin-top: var(--bd-3);
  font-family: var(--bd-font-body);
  font-size: var(--bd-fs-sm);
  line-height: 1.5;
  color: var(--bd-slate);
  text-align: left;
}
.bd-post-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--bd-4);
}
.bd-post-duo figcaption { grid-column: 1 / -1; }

@media (max-width: 600px) {
  .bd-post-duo { grid-template-columns: minmax(0, 1fr); }
}

/* --- Blog reading width on desktop --------------------------------------
   Blocksy renders single posts in .ct-container-full: no max-width and no
   horizontal padding, so at 1280px the body copy started at left:0 and ran
   1152px per line. That is flush to the viewport edge and roughly twice the
   comfortable measure. Constrain to ~72ch and centre it. */
@media (min-width: 768px) {
  .single-post .ct-container-full,
  .single .ct-container-full {
    padding-left: var(--bd-5) !important;
    padding-right: var(--bd-5) !important;
    box-sizing: border-box;
  }
  .single-post .entry-content,
  .single .entry-content {
    max-width: 72ch;
    margin-inline: auto;
  }
  /* Images may break the measure — they read better a little wider than text */
  .single-post .entry-content > figure,
  .single-post .entry-content > .wp-block-image,
  .single .entry-content > figure,
  .single .entry-content > .wp-block-image {
    max-width: min(88ch, 100%);
    margin-inline: auto;
  }
}

/* --- Blog reading width on mobile ---------------------------------------
   Blocksy leaves .entry-content at zero horizontal padding on small screens,
   so body copy sat flush against the left edge with a 45px gap on the right —
   asymmetric and genuinely hard to read. Symmetrical 20px gutters, matching
   the section padding used everywhere else on the site. */
@media (max-width: 767px) {
  /* Blocksy is using .ct-container-full here (no gutters at all), and the
     imported posts still carry Squarespace <figure class="sqs-block-image-figure">
     wrappers around their paragraphs — so pad at both levels. */
  .single-post .ct-container-full,
  .single .ct-container-full,
  .entry-content,
  .single-post .entry-content,
  article .entry-content,
  .post-type-archive .entry-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* don't double-pad when both wrappers match */
  .single-post .ct-container-full .entry-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .entry-content .sqs-block-image-figure,
  .entry-content figure { margin-left: 0; margin-right: 0; }
  .entry-content > * { max-width: 100%; }
  /* Full-bleed images inside a post read better than 20px-inset ones */
  .entry-content > figure,
  .entry-content > .wp-block-image {
    margin-left: -20px;
    margin-right: -20px;
    max-width: calc(100% + 40px);
  }
  .entry-content > figure img,
  .entry-content > .wp-block-image img { border-radius: 0; width: 100%; }

  /* Post titles and meta need the same gutter */
  .single-post .entry-header,
  .single-post .entry-title,
  .single-post .entry-meta { padding-inline: 20px; }
}

/* --- Blog post meta ------------------------------------------------------
   Hide the author byline. A single-author trade store gains nothing from
   "by admin" on every buying guide, and it invites the question of who wrote
   it rather than answering it. Date and reading time stay — those help.
   Cleaner still: Customize > Blog Posts / Single Post > Post Meta, and remove
   the Author element there so it never renders. */
/* Blocksy emits BOTH .meta-author (outer) and .ct-meta-element-author (inner);
   hiding only the inner one left an empty inline-block and its separator. */
.meta-author,
.ct-meta-element-author,
.entry-meta .meta-author,
.entry-meta .ct-meta-author,
.ct-meta-elements .ct-meta-element-author,
.ct-post-meta .ct-meta-element-author { display: none !important; }
/* separators that would otherwise dangle where the author used to be */
.meta-author + .ct-meta-divider,
.ct-meta-element-author + .ct-meta-divider,
.entry-meta .meta-author + span[class*="divider"] { display: none !important; }

/* --- Photographic page heroes (About, Contact) ---------------------------
   Same reasoning as the shop banner: the image is set here, not through
   Elementor's background control, so it renders on deploy without anyone
   opening the page in the editor. */
.bd-pagehero-photo {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 38vw, 500px);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--bd-ink);
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  transform: translateX(-50%);
}
.bd-pagehero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bd-hero-scrim);
  pointer-events: none;
}
.bd-pagehero-photo > .elementor-container {
  position: relative;
  z-index: 2;
  max-width: var(--bd-container);
  margin-inline: auto;
  padding-inline: 24px;
}
.bd-ph-copy { max-width: 660px; }
.bd-pagehero-photo .elementor-heading-title,
.bd-pagehero-photo .bd-lede p {
  text-shadow: 0 1px 12px rgba(10, 20, 26, .5), 0 1px 3px rgba(10, 20, 26, .38);
}
.bd-ph-about { background-image: url("/wp-content/uploads/2026/08/tarnos-900-wall-hung-oak-vanity-with-solid-surface-top-bathroom-with-lucito-tower-basin-mixer-brushed-brass.png"); }
.bd-ph-contact { background-image: url("/wp-content/uploads/2026/08/lucito-wall-mixer-brushed-brass-in-shower.png"); }

/* Full-width image band between content blocks */
.bd-wideband-sec {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  transform: translateX(-50%);
  line-height: 0;
}
.bd-wideband { margin: 0 !important; }
.bd-wideband img {
  width: 100%;
  height: clamp(220px, 30vw, 420px);
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
}
@media (max-width: 767px) {
  .bd-pagehero-photo { min-height: 300px; }
  .bd-ph-copy { max-width: 100%; }
  .bd-pagehero-photo::after { background: var(--bd-hero-scrim-mobile); }
  .bd-wideband img { height: 200px; }
}

/* Blocksy prints its own page title on the shop archive; the Elementor header
   already supplies the <h1>, so hide the theme's — on the SHOP archive only.
   Category archives still need the theme title as their H1. */
body.post-type-archive-product .ct-page-title,
body.post-type-archive-product .page-header,
body.post-type-archive-product .hero-section { display: none !important; }

/* Shop / category header */
.woocommerce .bd-cat-intro,
.woocommerce-products-header {
  max-width: 62ch;
  margin-bottom: var(--bd-8);
}
.woocommerce-products-header__title,
.woocommerce .page-title {
  font-size: var(--bd-fs-h1) !important;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: var(--bd-4);
}

/* Result count + sorting: a hairline utility bar, not form furniture */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-family: var(--bd-font-body);
  font-size: var(--bd-fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bd-mute);
}
.woocommerce .woocommerce-ordering select {
  border: 0;
  border-bottom: 1px solid var(--bd-line);
  border-radius: 0;
  background: transparent;
  padding: 8px 24px 8px 0;
  min-height: 0;
  color: var(--bd-ink);
  cursor: pointer;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  margin-bottom: var(--bd-6);
  padding-bottom: var(--bd-4);
}

/* Grid */
.woocommerce ul.products { gap: var(--bd-7) var(--bd-5); }
.woocommerce ul.products li.product {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  position: relative;
}
.woocommerce ul.products li.product:hover {
  box-shadow: none;
  transform: none;
}
/* Square crop. Product photography here is mostly packshots on white — a 4:5
   portrait frame added dead space above and below the object rather than
   showing more of it, which portrait crops only earn on lifestyle imagery. */
/* Blocksy wraps each archive image in <a class="ct-media-container"> and drives
   the crop from a --ratio custom property on that wrapper (4/3 by default).
   Restyling the <img> alone never worked, because the wrapper was setting the
   box the image had to fit. Override the wrapper, then the image. */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product a.ct-media-container {
  --ratio: 1/1;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  display: block;
  overflow: hidden;
  border-radius: var(--bd-r-lg);
  background: var(--bd-porcelain);
}
.woocommerce ul.products li.product .ct-media-container img,
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--bd-r-lg);
  background: var(--bd-porcelain);
  object-fit: cover;
  transition: transform .6s var(--bd-ease);
}
/* image needs its own clipping wrapper now the card has no overflow:hidden */
.woocommerce ul.products li.product > a:first-of-type {
  display: block;
  overflow: hidden;
  border-radius: var(--bd-r-lg);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.05); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--bd-font-body) !important;
  font-size: 1rem !important;
  font-weight: 500;
  line-height: 1.45;
  color: var(--bd-ink);
  padding: var(--bd-4) 0 var(--bd-1) !important;
  overflow-wrap: normal;
  word-break: normal;
}
/* Prices are set in Inter, not Fraunces.
   Fraunces carries opsz 144 — its display optical size, drawn with thin strokes
   and tight apertures for headline use. At 18px that makes figures genuinely
   hard to read, which is the worst place on a shop page to lose legibility.
   Inter's numerals are unambiguous small, and tabular-nums gives every digit
   the same width so prices align down the grid instead of sitting ragged. */
.woocommerce ul.products li.product .price {
  font-family: var(--bd-font-body);
  font-variation-settings: normal;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 1.125rem;
  font-weight: 600;
  padding: 0;
  letter-spacing: -0.005em;
}
.woocommerce ul.products li.product .price del {
  font-size: .875rem;
  opacity: .55;
  font-variant-numeric: tabular-nums;
}

/* Add to cart: revealed on hover, reserved space so nothing jumps */
.woocommerce ul.products li.product .button {
  margin: var(--bd-3) 0 0;
  background: transparent;
  color: var(--bd-ink);
  border: 1px solid var(--bd-ink);
  border-radius: var(--bd-r-sm);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 18px;
  min-height: 44px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--bd-t), transform var(--bd-t),
              background var(--bd-t), color var(--bd-t);
}
.woocommerce ul.products li.product:hover .button,
.woocommerce ul.products li.product .button:focus-visible {
  opacity: 1;
  transform: none;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--bd-ink);
  color: var(--bd-white);
}

/* Sale badge — small, quiet, top-left over the image */
.woocommerce span.onsale {
  background: var(--bd-white);
  color: var(--bd-sale);
  border: 1px solid var(--bd-line);
  font-size: 10px;
  letter-spacing: .12em;
  padding: 6px 10px;
  border-radius: var(--bd-r-sm);
  top: var(--bd-3);
  left: var(--bd-3);
  z-index: 2;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: 0; margin-top: var(--bd-8); gap: 4px; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--bd-r-sm);
  font-size: .9375rem;
  color: var(--bd-slate);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--bd-ink);
  color: var(--bd-white);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--bd-ink); color: var(--bd-ink); }

/* Touch: no hover, so the button must always be visible */
@media (hover: none), (max-width: 767px) {
  .woocommerce ul.products li.product .button { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .woocommerce ul.products { gap: var(--bd-6) var(--bd-3); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .875rem !important; }
  .woocommerce ul.products li.product .price { font-size: 1rem; }
}

/* --- 19.8 Reversed tick lists -------------------------------------------
   §8 sets .bd-ticks text to --bd-slate and, being later in the file, was
   beating the .bd-ticks-invert rule declared back in §5 — so the ticks on the
   photographic heroes rendered mid-grey on a dark image. Restated here, after
   both, where it wins on order rather than on an !important. */
.bd-ticks-invert .elementor-icon-list-text,
.bd-hero-full .bd-ticks .elementor-icon-list-text,
.bd-shopbannersec .bd-ticks .elementor-icon-list-text {
  color: rgba(255, 255, 255, .94);
}
.bd-ticks-invert .elementor-icon-list-icon,
.bd-hero-full .bd-ticks .elementor-icon-list-icon,
.bd-shopbannersec .bd-ticks .elementor-icon-list-icon {
  color: var(--bd-brass);
}

/* --- 19.5 Buttons: squarer, wider tracking ------------------------------ */
.bd-btn .elementor-button, .bd-a {
  border-radius: var(--bd-r-sm);
  letter-spacing: .02em;
  font-size: .9375rem;
}
.bd-btn-text .elementor-button { letter-spacing: .06em; text-transform: uppercase; font-size: .8125rem; }

/* --- 19.6 Mobile ---------------------------------------------------------*/
@media (max-width: 767px) {
  .bd-sechead, .bd-sechead.bd-center { max-width: 100%; margin-bottom: var(--bd-7); }
  .bd-cat-card .elementor-image-box-img img { aspect-ratio: 1 / 1; }
  .bd-cat-card .elementor-image-box-content { padding-top: var(--bd-3); }
  .bd-cat-card .elementor-image-box-title { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   20. PRINT — invoices/quotes get printed more than you'd think
   -------------------------------------------------------------------------- */
@media print {
  .ct-header, .ct-footer, .bd-band, .bd-newsletter, .bd-form { display: none !important; }
  body { color: #000; font-size: 11pt; }
}