/*
Theme Name: Brothers Woodcraft
Theme URI: https://brotherswoodcraft.co.za
Description: Custom child theme for Brothers Woodcraft, built on Storefront.
Author: Brothers Woodcraft
Template: storefront
Version: 1.0.0
Text Domain: brothers-woodcraft
*/

/* ==========================================================================
   Design tokens — matches the approved brand (espresso brown / cream / accent)
   ========================================================================== */

:root {
  --bw-background: #201911;
  --bw-surface: #2a2118;
  --bw-foreground: #f2e8d9;
  --bw-muted: #cbb8a2;
  --bw-muted-2: #8f7c67;
  --bw-primary: #e7c9a0;
  --bw-primary-foreground: #201911;
  --bw-accent: #d97a46;
  --bw-accent-foreground: #201911;
  --bw-border: #40332480;

  --bw-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --bw-font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --bw-font-script: "Caveat", cursive;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--bw-background);
  color: var(--bw-foreground);
  font-family: var(--bw-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--bw-font-display);
  font-weight: 600;
  color: var(--bw-foreground);
}

a {
  color: var(--bw-accent);
}

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

/* ==========================================================================
   Header / site branding
   ========================================================================== */

.site-header,
.site-footer,
#masthead,
#colophon {
  background: var(--bw-background);
  border-color: var(--bw-border);
}

.site-title a {
  font-family: var(--bw-font-display);
  color: var(--bw-foreground) !important;
}

.site-description {
  font-family: var(--bw-font-script);
  color: var(--bw-accent);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button,
button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--bw-primary);
  color: var(--bw-primary-foreground);
  border: none;
  border-radius: 999px;
  font-family: var(--bw-font-body);
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--bw-accent);
  color: var(--bw-accent-foreground);
  transform: translateY(-1px);
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--bw-accent);
  color: var(--bw-accent-foreground);
}

/* ==========================================================================
   Cards / surfaces (product cards, widgets, panels)
   ========================================================================== */

.storefront-product-section,
.woocommerce ul.products li.product,
.widget,
.woocommerce-message,
.woocommerce-info {
  background: var(--bw-surface);
  border-color: var(--bw-border);
  color: var(--bw-foreground);
}

.price,
.woocommerce-Price-amount {
  color: var(--bw-primary);
  font-family: var(--bw-font-display);
}

/* ==========================================================================
   Muted / secondary text
   ========================================================================== */

.woocommerce-product-details__short-description,
.site-info,
.entry-summary p {
  color: var(--bw-muted);
}

/* ==========================================================================
   Homepage
   ========================================================================== */

.bw-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 72rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .bw-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.bw-script {
  font-family: var(--bw-font-script);
  color: var(--bw-accent);
  font-size: 1.5rem;
  line-height: 1.2;
}

.bw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-family: var(--bw-font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease-out, background-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
  cursor: pointer;
  text-decoration: none;
  height: 3rem;
  padding: 0 2rem;
  font-size: 1rem;
  border: none;
}

.bw-btn:hover {
  transform: scale(1.02);
}

.bw-btn:active {
  transform: scale(0.97);
}

.bw-btn-primary {
  background-color: var(--bw-primary);
  color: var(--bw-primary-foreground);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bw-btn-primary:hover {
  background-color: var(--bw-accent);
  color: var(--bw-accent-foreground);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.bw-btn-outline {
  background-color: transparent;
  color: var(--bw-primary);
  border: 1px solid #e7c9a080;
}

.bw-btn-outline:hover {
  background-color: var(--bw-primary);
  color: var(--bw-primary-foreground);
}

.bw-btn-ghost {
  background-color: transparent;
  color: var(--bw-foreground);
}

.bw-btn-ghost:hover {
  background-color: #e7c9a01a;
}

.bw-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Wood grain decorative background */
.bw-wood-grain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bw-wood-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: repeating-linear-gradient(
    90deg,
    var(--bw-primary) 0px,
    transparent 2px,
    transparent 3px,
    var(--bw-primary) 4px,
    transparent 40px,
    transparent 96px
  );
}

.bw-wood-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero */
.bw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--bw-border);
  background: var(--bw-background);
}

.bw-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .bw-hero-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

.bw-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--bw-border);
  background: var(--bw-surface);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bw-muted);
}

.bw-hero-badge svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--bw-accent);
}

.bw-hero h1 {
  margin-top: 1.25rem;
  font-family: var(--bw-font-display);
  font-size: 2.5rem;
  line-height: 1.08;
  color: var(--bw-foreground);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .bw-hero h1 { font-size: 3rem; }
}
@media (min-width: 1024px) {
  .bw-hero h1 { font-size: 3.75rem; }
}

.bw-hero h1 em {
  font-style: italic;
  color: var(--bw-primary);
}

.bw-hero-lede {
  margin-top: 1.25rem;
  max-width: 28rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--bw-muted);
}

.bw-hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.bw-hero-image {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 28rem;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 4px solid var(--bw-background);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.bw-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fade-up entrance (hero) */
@keyframes bw-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.bw-fade-up {
  animation: bw-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Trust strip marquee */
.bw-trust-strip {
  overflow: hidden;
  border-bottom: 1px solid var(--bw-border);
  background: var(--bw-primary);
  padding: 0.75rem 0;
}

.bw-trust-strip-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: bw-marquee 32s linear infinite;
}

@keyframes bw-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.bw-trust-strip-item {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #201911d9;
}

.bw-trust-strip-item .dot {
  color: #20191166;
}

/* Generic section rhythm */
.bw-section {
  padding-top: 4rem;
  padding-bottom: 5rem;
}

@media (min-width: 640px) {
  .bw-section {
    padding-top: 5.5rem;
    padding-bottom: 7rem;
  }
}

.bw-section-border {
  border-top: 1px solid var(--bw-border);
  border-bottom: 1px solid var(--bw-border);
  background: var(--bw-surface);
}

.bw-two-col {
  display: grid;
  gap: 2.5rem;
}

.bw-story-images {
  order: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: center;
}

.bw-story-text {
  order: 1;
}

@media (min-width: 1024px) {
  .bw-two-col {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }

  .bw-story-images {
    order: 1;
  }

  .bw-story-text {
    order: 2;
  }
}

.bw-square-image {
  aspect-ratio: 1 / 1;
  border-radius: 1.5rem;
  overflow: hidden;
}

.bw-square-image img,
.bw-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bw-h2 {
  margin-top: 0.25rem;
  font-family: var(--bw-font-display);
  font-size: 1.875rem;
  color: var(--bw-foreground);
}

@media (min-width: 640px) {
  .bw-h2 { font-size: 2.25rem; }
}

.bw-h1 {
  margin-top: 0.25rem;
  font-family: var(--bw-font-display);
  font-size: 2.25rem;
  color: var(--bw-foreground);
}

@media (min-width: 640px) {
  .bw-h1 { font-size: 3rem; }
}

.bw-prose {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1rem;
  line-height: 1.7;
}

.bw-prose p {
  color: var(--bw-muted);
}

/* Featured product highlights */
.bw-highlights {
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0;
  list-style: none;
}

.bw-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--bw-muted);
}

.bw-highlights svg {
  margin-top: 0.5rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--bw-accent);
}

.bw-price {
  margin-top: 1.5rem;
  font-family: var(--bw-font-display);
  font-size: 1.5rem;
  color: var(--bw-foreground);
}

/* Process steps */
.bw-steps-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .bw-steps-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .bw-steps-grid { grid-template-columns: repeat(4, 1fr); }
}

.bw-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: #e7c9a01a;
  color: var(--bw-primary);
}

.bw-step-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.bw-step-label {
  margin-top: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bw-muted-2);
}

.bw-step-title {
  margin-top: 0.25rem;
  font-family: var(--bw-font-display);
  font-size: 1.125rem;
  color: var(--bw-foreground);
}

.bw-step-body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--bw-muted);
}

/* Testimonials */
.bw-testimonials-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .bw-testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}

.bw-testimonial-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid var(--bw-border);
  background: var(--bw-background);
  padding: 1.5rem;
}

.bw-stars {
  display: flex;
  gap: 0.125rem;
  color: var(--bw-accent);
}

.bw-stars svg {
  width: 1rem;
  height: 1rem;
}

.bw-testimonial-quote {
  margin-top: 1rem;
  flex: 1;
  font-family: var(--bw-font-script);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--bw-foreground);
}

.bw-testimonial-author {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bw-muted);
}

/* CTA banner */
.bw-cta-card {
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  max-width: 42rem;
  border-radius: 1.5rem;
  border: 1px solid var(--bw-border);
  background: var(--bw-surface);
  padding: 3.5rem 1.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .bw-cta-card { padding: 3.5rem; }
}

.bw-cta-card p.bw-lede {
  margin: 1rem auto 0;
  max-width: 28rem;
  color: var(--bw-muted);
}

.bw-cta-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Scroll-reveal (IntersectionObserver-driven) */
.bw-reveal {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .bw-reveal, .bw-fade-up {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .bw-reveal { opacity: 1; transform: none; }

  /* The trust-strip marquee loops infinitely, so squeezing its duration to
     near-zero (like the one-shot entrance animations above) doesn't stop it —
     it makes it cycle thousands of times a second, an unreadable flicker.
     Pause it outright instead. */
  .bw-trust-strip-track {
    animation-play-state: paused !important;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

.bw-skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: 100;
  border-radius: 999px;
  background: var(--bw-primary);
  color: var(--bw-primary-foreground);
  padding: 0.625rem 1.25rem;
  text-decoration: none;
}

.bw-skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.bw-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--bw-border);
  background: #201911e6;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bw-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.bw-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.bw-brand-logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .bw-brand-logo { width: 2.5rem; height: 2.5rem; }
}

.bw-brand-name {
  font-family: var(--bw-font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--bw-foreground);
}

@media (min-width: 640px) {
  .bw-brand-name { font-size: 1.5rem; }
}

.bw-nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .bw-nav-desktop { display: flex; }
}

.bw-nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bw-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bw-nav-link:hover,
.bw-nav-link.is-active {
  color: var(--bw-foreground);
}

.bw-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bw-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--bw-foreground);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

.bw-icon-btn:hover {
  transform: scale(1.1);
  background: #e7c9a01a;
}

.bw-icon-btn .bw-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  min-width: 1.25rem;
  min-height: 1.25rem;
  flex-shrink: 0;
}

.bw-menu-toggle {
  display: flex;
}

@media (min-width: 768px) {
  .bw-menu-toggle { display: none; }
}

.bw-icon-close { display: none; }

body.bw-menu-open .bw-icon-menu { display: none; }
body.bw-menu-open .bw-icon-close { display: block; }

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

.bw-cart-badge {
  position: absolute;
  right: 0.3rem;
  top: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--bw-accent);
  color: var(--bw-accent-foreground);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
}

.bw-nav-mobile {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  border-bottom: 0 solid var(--bw-border);
  background: var(--bw-background);
  transition: grid-template-rows 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .bw-nav-mobile { display: none; }
}

.bw-nav-mobile.is-open {
  grid-template-rows: 1fr;
  border-bottom-width: 1px;
}

.bw-nav-mobile-inner {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.bw-nav-mobile-link {
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--bw-foreground);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.bw-nav-mobile-link:hover,
.bw-nav-mobile-link.is-active {
  background: #e7c9a01a;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.bw-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bw-primary);
  color: var(--bw-primary-foreground);
}

.bw-footer-inner {
  position: relative;
  z-index: 1;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 640px) {
  .bw-footer-inner { padding-top: 5rem; padding-bottom: 5rem; }
}

.bw-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .bw-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .bw-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

.bw-footer-brand-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bw-footer-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  object-fit: cover;
}

.bw-footer-name {
  font-family: var(--bw-font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0;
}

.bw-footer-tagline {
  margin-top: 0.25rem;
  font-family: var(--bw-font-script);
  font-size: 1.125rem;
  color: #201911cc;
}

.bw-footer-desc {
  margin-top: 1rem;
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #201911b3;
}

.bw-social {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.75rem;
}

.bw-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid #20191140;
  background: transparent;
  color: var(--bw-primary-foreground);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.bw-social-btn:hover {
  background: #2019111a;
}

.bw-social-btn .bw-icon {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  flex-shrink: 0;
}

.bw-social-note {
  margin-top: 0.75rem;
  max-width: 20rem;
  font-size: 0.875rem;
  color: #201911b3;
}

.bw-footer-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #20191199;
}

.bw-footer-list {
  margin: 1rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.bw-footer-list a {
  color: #201911cc;
  text-decoration: none;
  transition: color 0.15s ease;
}

.bw-footer-list a:hover {
  color: var(--bw-primary-foreground);
}

.bw-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #201911cc;
}

.bw-footer-contact .bw-icon {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  min-width: 1rem;
  min-height: 1rem;
  flex-shrink: 0;
}

.bw-footer-bottom {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid #20191126;
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: #2019118c;
}

@media (min-width: 640px) {
  .bw-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */

.bw-whatsapp-btn {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.bw-whatsapp-btn:hover {
  transform: scale(1.05);
}

.bw-whatsapp-btn:active {
  transform: scale(0.95);
}

.bw-whatsapp-btn .bw-icon {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .bw-whatsapp-btn {
    bottom: 1.75rem;
    right: 1.75rem;
  }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.bw-contact-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .bw-contact-grid {
    grid-template-columns: 2fr 3fr;
    gap: 4rem;
  }
}

.bw-contact-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0;
  list-style: none;
}

.bw-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.bw-contact-list .bw-icon {
  margin-top: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  flex-shrink: 0;
  color: var(--bw-accent);
}

.bw-contact-list a {
  font-size: 0.875rem;
  color: var(--bw-muted);
  text-decoration: none;
}

.bw-contact-list a:hover {
  color: var(--bw-foreground);
}

.bw-contact-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bw-foreground);
}

.bw-contact-form-card {
  border-radius: 1rem;
  border: 1px solid var(--bw-border);
  background: var(--bw-surface);
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .bw-contact-form-card { padding: 2rem; }
}

.bw-field-label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bw-foreground);
}

.bw-input,
input[type="text"].bw-input,
input[type="email"].bw-input,
input[type="tel"].bw-input,
input[type="number"].bw-input,
input[type="url"].bw-input,
input[type="password"].bw-input,
input[type="search"].bw-input {
  display: block;
  width: 100%;
  margin-top: 0.375rem;
  border-radius: 0.75rem;
  border: 1px solid var(--bw-border);
  background-color: var(--bw-background);
  padding: 0.75rem 1rem;
  font-family: var(--bw-font-body);
  font-size: 1rem;
  color: var(--bw-foreground);
  box-shadow: none;
}

select.bw-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbb8a2' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

.bw-input::placeholder {
  color: var(--bw-muted-2);
}

.bw-input:focus-visible {
  outline: none;
  border-color: var(--bw-primary);
}

/* Browsers force a light autofill background (most aggressively on email
   fields) that ignores normal background rules — this is the standard
   trick to override it back to the theme's own input background. */
.bw-input:-webkit-autofill,
.bw-input:-webkit-autofill:hover,
.bw-input:-webkit-autofill:focus,
.bw-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--bw-foreground);
  caret-color: var(--bw-foreground);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px var(--bw-background) inset;
}

.bw-input {
  color-scheme: dark;
}

.bw-form-note {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--bw-muted-2);
}

/* ==========================================================================
   Single product page
   ========================================================================== */

body.single-product div[id^="product-"].product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
  /* Storefront's WooCommerce CSS sets overflow:hidden here as a clearfix
     for the float-based layout we no longer use — with the grid instead,
     it was clipping the summary column whenever it ran taller than the
     gallery, hiding all of the product text/pricing/add-to-cart. */
  overflow: visible;
}

/* Storefront's WooCommerce integration CSS floats .summary (classic
   float-based product layout) — that float and its accompanying width
   survive onto our grid item and fight the grid at certain viewport
   widths (summary shrinks to its floated width). Reset both explicitly
   so the grid, not the float, controls sizing. */
body.single-product div[id^="product-"].product > .summary {
  float: none;
  width: auto;
}

@media (min-width: 1024px) {
  body.single-product div[id^="product-"].product {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  /* Auto-placement alone put gallery and summary in separate rows
     instead of side by side at some viewport widths (root cause not
     fully pinned down — resetting the float above didn't fix it on its
     own). Placing both explicitly is the robust fix either way. */
  body.single-product div[id^="product-"].product > .bw-reveal {
    grid-column: 1;
    grid-row: 1;
  }

  body.single-product div[id^="product-"].product > .summary {
    grid-column: 2;
    grid-row: 1;
  }
}

.bw-product-after-summary {
  grid-column: 1 / -1;
  margin-top: 0;
  padding-top: 1.5rem;
}

.bw-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bw-muted-2);
}

.bw-icon-sm {
  width: 0.875rem;
  height: 0.875rem;
  min-width: 0.875rem;
  min-height: 0.875rem;
  flex-shrink: 0;
}

/* Gallery */
.bw-gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--bw-border);
}

.bw-gallery-main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bw-gallery-main-img.is-active {
  opacity: 1;
}

.bw-gallery-thumbs {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.bw-gallery-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 2px solid var(--bw-border);
  background: none;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.bw-gallery-thumb:hover {
  border-color: #e7c9a066;
}

.bw-gallery-thumb.is-active {
  border-color: var(--bw-primary);
}

.bw-gallery-thumb img {
  width: 100%;
  height: 100%;
}

/* Pricing tiers table */
.bw-pricing-tiers {
  margin-top: 1.25rem;
  max-width: 28rem;
}

.bw-pricing-tiers-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bw-muted-2);
}

.bw-pricing-tiers-table-wrap {
  margin-top: 0.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--bw-border);
}

.bw-pricing-tiers-table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.bw-pricing-tiers-table thead tr {
  border-bottom: 1px solid var(--bw-border);
  background: var(--bw-surface);
  font-size: 0.75rem;
  color: var(--bw-muted-2);
}

.bw-pricing-tiers-table th {
  padding: 0.5rem 1rem;
  font-weight: 500;
  background-color: var(--bw-surface) !important;
}

.bw-pricing-tiers-table td {
  padding: 0.625rem 1rem;
  background-color: var(--bw-background) !important;
  color: var(--bw-muted);
}

.bw-pricing-tiers-table tbody tr {
  border-bottom: 1px solid var(--bw-border);
}

.bw-pricing-tiers-table tbody tr:last-child {
  border-bottom: none;
}

/* Add-to-cart form (real WooCommerce form, restyled) */
[data-bw-add-to-cart-wrap] form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

[data-bw-add-to-cart-wrap] .quantity {
  margin: 0;
}

[data-bw-add-to-cart-wrap] input.qty {
  height: 3rem;
  width: 4.5rem;
  border-radius: 999px;
  border: 1px solid var(--bw-border);
  background: var(--bw-surface);
  text-align: center;
  color: var(--bw-foreground);
  font-family: var(--bw-font-body);
  font-size: 1rem;
}

[data-bw-add-to-cart-wrap] button.single_add_to_cart_button {
  height: 3rem;
  min-width: 12rem;
  padding: 0 2rem;
  border-radius: 999px;
  border: none;
  background: var(--bw-primary);
  color: var(--bw-primary-foreground);
  font-family: var(--bw-font-body);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

[data-bw-add-to-cart-wrap] button.single_add_to_cart_button:hover {
  background: var(--bw-accent);
  color: var(--bw-accent-foreground);
  transform: scale(1.02);
}

.bw-free-shipping-badge[hidden] {
  display: none;
}

.bw-free-shipping-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  background: #4ade801a;
  color: #4ade80;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.bw-tier-nudge {
  margin-top: 0.5rem;
  width: 100%;
  font-size: 0.875rem;
  color: var(--bw-accent);
}

/* Spec grid */
.bw-spec-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  border-top: 1px solid var(--bw-border);
  padding-top: 1.5rem;
}

.bw-spec-grid > div {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.bw-icon-spec {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  flex-shrink: 0;
  color: var(--bw-accent);
}

.bw-spec-grid dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bw-muted-2);
}

.bw-spec-grid dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bw-foreground);
}

/* ==========================================================================
   Checkout (WooCommerce Checkout block)
   ========================================================================== */

.wc-block-checkout__main,
.wc-block-checkout__sidebar {
  color: var(--bw-foreground);
}

.wc-block-components-checkout-step__title {
  font-family: var(--bw-font-display);
  font-weight: 600;
  color: var(--bw-foreground);
}

.wc-block-components-checkout-step__description {
  color: var(--bw-muted);
}

/* Text inputs / selects */
.wc-block-components-text-input input,
.wc-block-components-address-form select,
.wc-block-components-combobox-control input {
  background-color: var(--bw-surface) !important;
  border-color: var(--bw-border) !important;
  border-radius: 0.75rem !important;
  color: var(--bw-foreground) !important;
}

.wc-block-components-text-input label,
.wc-block-components-combobox-control label {
  color: var(--bw-muted-2) !important;
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
  border-color: var(--bw-primary) !important;
  box-shadow: none !important;
}

.wc-block-components-checkbox__input {
  accent-color: var(--bw-primary);
  background-color: var(--bw-surface) !important;
  border-color: var(--bw-border) !important;
}

.wc-block-components-checkbox svg {
  fill: var(--bw-background);
}

.wc-block-components-checkbox__mark {
  fill: var(--bw-primary-foreground);
}

.wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark ~ * {
  color: var(--bw-foreground);
}

/* Radio options (shipping method, payment method) */
.wc-block-components-radio-control__option {
  background-color: var(--bw-background);
  border-color: var(--bw-border) !important;
  border-radius: 0.75rem;
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option--checked-option-highlighted {
  background-color: #e7c9a00d;
  border-color: var(--bw-primary) !important;
}

.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label {
  color: var(--bw-foreground);
}

.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control-accordion-content {
  color: var(--bw-muted);
}

/* Order summary sidebar */
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar > .wc-block-components-totals-wrapper,
.wc-block-checkout-order-summary {
  background: var(--bw-surface);
  border: 1px solid var(--bw-border);
  border-radius: 1rem;
}

.wc-block-components-order-summary {
  background: var(--bw-surface);
  border: 1px solid var(--bw-border);
  border-radius: 1rem;
  padding: 1.5rem;
}

.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__quantity {
  color: var(--bw-muted);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  color: var(--bw-foreground);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--bw-font-display);
  font-size: 1.125rem;
}

/* Place order button */
.wc-block-cart__submit-container {
  background-color: transparent !important;
}

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
  background-color: var(--bw-primary) !important;
  color: var(--bw-primary-foreground) !important;
  border-radius: 999px !important;
  font-family: var(--bw-font-body) !important;
  font-weight: 600 !important;
  height: 3rem !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
  background-color: var(--bw-accent) !important;
  color: var(--bw-accent-foreground) !important;
  transform: scale(1.01);
}

.bw-order-received-icon .bw-icon {
  width: 3.5rem;
  height: 3.5rem;
  min-width: 3.5rem;
  min-height: 3.5rem;
  flex-shrink: 0;
  color: var(--bw-accent);
  margin: 0 auto;
}

/* ==========================================================================
   Full-width content on WooCommerce pages
   Storefront reserves a sidebar column (body.right-sidebar) even when no
   widgets are active, fighting its own storefront-full-width-content class
   on WooCommerce pages — this content-area ends up narrower than its
   parent and floated off-center. Force it to actually take the full width.
   ========================================================================== */

body.woocommerce-page .content-area,
body.woocommerce-checkout .content-area,
body.woocommerce-account .content-area {
  width: 100% !important;
  float: none !important;
}

body.woocommerce-page #secondary,
body.woocommerce-checkout #secondary,
body.woocommerce-account #secondary {
  display: none;
}

/* ==========================================================================
   404 page
   ========================================================================== */

.bw-icon-404 {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  flex-shrink: 0;
  transform: rotate(3deg);
}

/* ==========================================================================
   Shop archive
   ========================================================================== */

.bw-pills {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.bw-pill {
  border-radius: 999px;
  border: 1px solid var(--bw-border);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bw-muted);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.bw-pill:hover {
  border-color: #e7c9a066;
  color: var(--bw-foreground);
}

.bw-pill.is-active {
  border-color: var(--bw-primary);
  background: var(--bw-primary);
  color: var(--bw-primary-foreground);
}

.bw-product-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .bw-product-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .bw-product-grid { grid-template-columns: repeat(3, 1fr); }
}

.bw-product-card {
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--bw-border);
  background: var(--bw-surface);
  text-decoration: none;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.bw-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.bw-product-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.bw-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}

.bw-product-card:hover .bw-product-card-image img {
  transform: scale(1.04);
}

.bw-product-card-body {
  padding: 1.25rem;
}

.bw-product-card-cat {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bw-muted-2);
}

.bw-product-card-title {
  margin: 0.25rem 0 0;
  font-family: var(--bw-font-display);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--bw-foreground);
}

.bw-product-card-tagline {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--bw-muted);
}

.bw-product-card-price {
  margin-top: 0.375rem;
  font-family: var(--bw-font-display);
  font-size: 1.125rem;
  color: var(--bw-foreground);
}

/* ==========================================================================
   Mini Cart (WooCommerce block) — header icon + slide-out drawer
   ========================================================================== */

.bw-mini-cart .wc-block-mini-cart__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--bw-foreground);
  cursor: pointer;
  transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

.bw-mini-cart .wc-block-mini-cart__button:hover {
  transform: scale(1.1);
  background: #e7c9a01a;
}

.bw-mini-cart .wc-block-mini-cart__icon {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  flex-shrink: 0;
  color: var(--bw-foreground);
}

.bw-mini-cart .wc-block-mini-cart__badge {
  background-color: var(--bw-accent) !important;
  color: var(--bw-accent-foreground) !important;
}

/* The drawer itself renders at the end of <body>, outside .bw-mini-cart,
   so these target it globally rather than scoped to the header. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__screen-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__content,
.wc-block-mini-cart__drawer .wc-block-mini-cart__template-part {
  background: var(--bw-surface) !important;
  color: var(--bw-foreground);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close-slot-title {
  font-family: var(--bw-font-display);
  color: var(--bw-foreground);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart-items-table,
.wc-block-mini-cart__drawer .wc-block-cart-item {
  border-color: var(--bw-border) !important;
}

.wc-block-mini-cart__drawer .wc-block-components-product-name {
  color: var(--bw-foreground);
}

.wc-block-mini-cart__drawer .wc-block-components-totals-item__label,
.wc-block-mini-cart__drawer .wc-block-components-totals-item__value,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
  color: var(--bw-foreground);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button {
  border-radius: 999px !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart .wc-block-components-button.wp-element-button {
  background-color: transparent !important;
  color: var(--bw-primary) !important;
  border: 1px solid #e7c9a080 !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout .wc-block-components-button.wp-element-button {
  background-color: var(--bw-primary) !important;
  color: var(--bw-primary-foreground) !important;
}

/* ==========================================================================
   Quantity stepper (−/+ buttons, replacing the plain WC number input)
   ========================================================================== */

.bw-qty-stepper {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--bw-border);
  background: var(--bw-surface);
}

.bw-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--bw-foreground);
  cursor: pointer;
  transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

.bw-qty-btn:hover:not(:disabled) {
  transform: scale(1.1);
  background: #e7c9a01a;
}

.bw-qty-btn:active:not(:disabled) {
  transform: scale(0.9);
}

.bw-qty-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.bw-qty-btn svg {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  flex-shrink: 0;
}

.bw-qty-display {
  width: 2rem;
  text-align: center;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--bw-foreground);
}

.bw-qty-stepper--sm .bw-qty-btn {
  width: 2.25rem;
  height: 2.25rem;
}

/* ==========================================================================
   Cart drawer (custom, replacing the WooCommerce Mini Cart block)
   ========================================================================== */

.bw-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.bw-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.bw-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 32rem;
  height: 100%;
  background: var(--bw-surface);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-drawer.is-open {
  transform: translateX(0);
}

body.bw-drawer-open {
  overflow: hidden;
}

.bw-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--bw-border);
  padding: 1rem 1.25rem;
}

.bw-drawer-title {
  margin: 0;
  font-family: var(--bw-font-display);
  font-size: 1.25rem;
  color: var(--bw-foreground);
}

.bw-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--bw-foreground);
  cursor: pointer;
}

.bw-drawer-close:hover {
  background: #e7c9a01a;
}

.bw-drawer-close svg {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  flex-shrink: 0;
}

.bw-drawer-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.bw-drawer-empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
}

.bw-icon-empty {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  flex-shrink: 0;
  color: var(--bw-muted-2);
}

.bw-drawer-empty p {
  color: var(--bw-muted);
}

.bw-drawer-list {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 0 1.25rem;
  list-style: none;
}

/* Cart row — shared by the drawer and the cart page */

.bw-cart-row {
  display: flex;
  gap: 0.75rem;
  border-bottom: 1px solid var(--bw-border);
  padding: 1rem 0;
}

.bw-cart-row:first-child {
  padding-top: 0.75rem;
}

.bw-cart-page-list .bw-cart-row:last-child,
.bw-drawer-list .bw-cart-row:last-child {
  border-bottom: none;
}

.bw-cart-row-img {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  object-fit: cover;
}

.bw-cart-row-img-lg {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  object-fit: cover;
}

@media (min-width: 640px) {
  .bw-cart-row-img-lg { width: 7rem; height: 7rem; }
}

.bw-cart-row-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.bw-cart-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.bw-cart-row-name {
  margin: 0;
  font-family: var(--bw-font-display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--bw-foreground);
}

.bw-cart-page-list .bw-cart-row-name {
  font-size: 1.125rem;
}

.bw-cart-row-remove {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--bw-muted-2);
  cursor: pointer;
  transition: color 0.15s ease;
}

.bw-cart-row-remove:hover {
  color: #e5776a;
}

.bw-cart-row-price {
  margin: 0;
  font-size: 0.875rem;
  color: var(--bw-muted);
}

.bw-strike {
  color: var(--bw-muted-2);
  text-decoration: line-through;
}

.bw-cart-row-bottom {
  margin-top: 0.125rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.bw-cart-row-total {
  font-family: var(--bw-font-display);
  font-size: 1rem;
  color: var(--bw-foreground);
}

.bw-cart-row-nudge {
  margin: 0;
  font-size: 0.875rem;
  color: var(--bw-accent);
}

.bw-drawer-footer {
  border-top: 1px solid var(--bw-border);
  padding: 1.25rem;
}

.bw-drawer-subtotal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.bw-drawer-subtotal-row span:first-child {
  color: var(--bw-muted);
}

.bw-drawer-subtotal {
  font-family: var(--bw-font-display);
  font-size: 1.25rem;
  color: var(--bw-foreground);
}

.bw-savings-message {
  margin: -0.25rem 0 1rem;
  font-size: 0.875rem;
  color: var(--bw-accent);
}

.bw-drawer-checkout-btn {
  width: 100%;
}

.bw-drawer-note {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--bw-muted-2);
}

/* Cart page */

.bw-cart-page-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 4rem;
  text-align: center;
}

.bw-cart-page-empty p {
  font-size: 1.125rem;
  color: var(--bw-muted);
}

.bw-cart-page-grid {
  margin-top: 2rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .bw-cart-page-grid { grid-template-columns: 2fr 1fr; }
}

.bw-cart-page-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bw-cart-page-summary {
  height: fit-content;
  border-radius: 1rem;
  border: 1px solid var(--bw-border);
  background: var(--bw-surface);
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .bw-cart-page-summary {
    position: sticky;
    top: 6rem;
  }
}

/* ==========================================================================
   Checkout (fully custom, ported from checkout-form.tsx)
   ========================================================================== */

.bw-checkout-grid[hidden] {
  display: none;
}

.bw-checkout-grid {
  margin-top: 2rem;
  display: grid;
  gap: 2.5rem;
}

.bw-checkout-empty[hidden] {
  display: none;
}

.bw-checkout-empty {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .bw-checkout-grid {
    grid-template-columns: 3fr 2fr;
    gap: 4rem;
    align-items: start;
  }
}

.bw-checkout-fields {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.bw-checkout-field-grid {
  margin-top: 1.75rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .bw-checkout-field-grid { grid-template-columns: 1fr 1fr; }
}

.bw-checkout-field-grid .bw-field-label {
  margin-bottom: 0;
}

.bw-span-2 {
  grid-column: 1 / -1;
}

/* Payment method radios */

.bw-payment-options {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bw-payment-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--bw-border);
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bw-payment-option input {
  margin-top: 0.25rem;
  accent-color: var(--bw-primary);
}

.bw-payment-option.is-selected {
  border-color: var(--bw-primary);
  background: #e7c9a00d;
}

.bw-payment-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.bw-payment-option-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--bw-foreground);
}

.bw-payment-option-desc {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--bw-muted);
}

.bw-coming-soon {
  border-radius: 999px;
  background: #8f7c6733;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: var(--bw-muted);
}

/* Order summary sidebar */

.bw-checkout-summary-card {
  border-radius: 1rem;
  border: 1px solid var(--bw-border);
  background: var(--bw-surface);
  padding: 1.5rem;
}

@media (min-width: 1024px) {
  .bw-checkout-summary-card {
    position: sticky;
    top: 6rem;
  }
}

.bw-checkout-summary-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bw-checkout-summary-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--bw-muted);
}

.bw-checkout-summary-qty {
  color: var(--bw-muted-2);
}

.bw-checkout-summary-line-total {
  flex-shrink: 0;
  font-weight: 500;
  color: var(--bw-foreground);
}

.bw-checkout-summary-totals {
  margin-top: 1rem;
  border-top: 1px solid var(--bw-border);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.bw-checkout-summary-row {
  display: flex;
  justify-content: space-between;
  color: var(--bw-muted);
}

.bw-checkout-summary-value {
  color: var(--bw-foreground);
}

.bw-checkout-summary-total {
  border-top: 1px solid var(--bw-border);
  padding-top: 0.5rem;
  font-family: var(--bw-font-display);
  font-size: 1.125rem;
  color: var(--bw-foreground);
}

.bw-checkout-summary-total span {
  color: var(--bw-foreground);
}

.bw-checkout-error {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: #e5776a;
}

/* Submit button + loading state */

.bw-checkout-submit {
  position: relative;
}

.bw-checkout-lock-icon {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  flex-shrink: 0;
}

.bw-checkout-submit-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: bw-spin 0.6s linear infinite;
}

@keyframes bw-spin {
  to { transform: rotate(360deg); }
}

.bw-checkout-submit.is-loading {
  opacity: 0.75;
  cursor: not-allowed;
}

.bw-checkout-submit.is-loading .bw-checkout-submit-spinner {
  display: inline-block;
}

.bw-checkout-submit.is-loading .bw-checkout-lock-icon {
  display: none;
}