﻿/* ==========================================================================
   Drive Thru Electronics â€” theme.css
   All visual styling for the theme lives in this file (Section 10).
   ========================================================================== */

:root {
  /* Exact hex parity with Lovable src/index.css :root (HSL â†’ hex). Do not diverge. */
  /* background: 0 0% 100% */
  --color-background: #ffffff;
  /* foreground: 220 16% 11% */
  --color-foreground: #181b21;
  /* primary: 216 88% 46% */
  --color-primary: #0e61dd;
  /* primary-foreground: 0 0% 100% */
  --color-primary-foreground: #ffffff;
  /* accent: 214 92% 54%  (also marigold) */
  --color-accent: #1e7bf6;
  /* accent-foreground: 0 0% 100% */
  --color-accent-foreground: #ffffff;
  /* card: 220 16% 97% */
  --color-card: #f6f7f9;
  /* secondary: 220 16% 96%  (also butter) */
  --color-secondary: #f3f4f6;
  /* muted: 220 14% 94% */
  --color-muted: #eeeff2;
  /* muted-foreground: 220 9% 42% */
  --color-muted-foreground: #616875;
  /* border: 220 13% 88% */
  --color-border: #dcdfe4;
  /* destructive: 0 72% 45% */
  --color-destructive: #c52020;
  /* Scrolled fixed header (site-specific; not a Lovable :root token) */
  --color-header-solid: #000000;
  --logo-height: 104px;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 0.9rem;
  --shadow-soft: 0 4px 18px -6px color-mix(in srgb, var(--color-foreground) 12%, transparent);
  --shadow-elevated: 0 16px 40px -16px color-mix(in srgb, var(--color-foreground) 28%, transparent);
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --btn-radius: 999px;
  --btn-height: 48px;
  --btn-padding: 0.9rem 2rem;
  --btn-font-size: 12px;
  --btn-font-weight: 600;
  --btn-letter-spacing: 0.2em;
  --btn-text-transform: uppercase;
  --btn-icon-padding: 0.6rem;
  --header-height: 88px;
  --checkout-gap: 2rem;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: clip; }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: inherit; font-size: inherit; letter-spacing: 0.005em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; cursor: pointer; }
a[aria-disabled="true"] { cursor: not-allowed; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, textarea, select { font-family: inherit; }
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], textarea { cursor: text; }
input[type="range"] { cursor: grab; }
input[type="range"]:active { cursor: grabbing; }
label[for] { cursor: pointer; }
.theme-card-link, .theme-product-card__link, .woocommerce-loop-product__link, .site-logo-link, .site-footer__logo-link,
.social-link, .dte-nav-link, .js-contact-open, .cart-toggle, .mobile-menu-toggle,
.catalog-sidebar__all-btn, .catalog-sidebar__cat-toggle, .catalog-sidebar__see-all,
.catalog-sidebar__series-toggle, .catalog-sidebar__model-btn, .catalog-sidebar__pill,
.theme-card-add-btn, .theme-cart-item__name, .footer-shop-link, .footer-anchor-link,
.footer-contact-link, .shop-browse-toggle, .contact-modal__close, .theme-cart-qty-btn,
.theme-cart-item__remove, [data-cart-open], [data-cart-close], [data-contact-close],
[data-mobile-filters-open], [data-mobile-filters-close], [data-filter-clear] {
  cursor: pointer;
}
img { max-width: 100%; height: auto; display: block; }
img:not(.cover-img):not(.hero-section__bg):not(.product-card-img):not(.site-logo-img):not(.site-footer__logo):not(.theme-product-gallery__img):not(.theme-product-thumb__img) {
  max-width: 100%;
  height: auto;
}
.cover-img, .hero-section__bg, .product-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.text-primary { color: var(--color-primary); }

.container-wide { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; box-sizing: border-box; }
@media (min-width: 1024px) { .container-wide { padding: 0 2rem; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  transition: transform 0.3s var(--transition-smooth), opacity 0.3s var(--transition-smooth), box-shadow 0.3s var(--transition-smooth), background-color 0.2s ease;
  min-height: var(--btn-height);
  white-space: nowrap;
  max-width: 100%;
}
.btn-primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); }
.btn-outline { border: 1px solid var(--color-border); color: var(--color-foreground); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-hero-primary, .btn-hero-outline { text-transform: none; }
.btn-hero-primary { background: var(--color-primary); color: var(--color-primary-foreground); padding: 0.9rem 2.2rem; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.btn-hero-outline { border: 1px solid color-mix(in srgb, var(--color-primary-foreground) 40%, transparent); color: var(--color-primary-foreground); padding: 0.9rem 2rem; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.btn-hero-outline:hover { background: color-mix(in srgb, var(--color-primary-foreground) 10%, transparent); }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; font-size: 11px; }

/* ---------- Reveal / scroll animation ---------- */
.reveal-item { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--transition-smooth), transform 0.6s var(--transition-smooth); }
.reveal-item.is-visible, body.is-customizer .reveal-item, .theme-product-card-wrap.reveal-item.is-visible { opacity: 1; transform: translateY(0); }
body.is-customizer .reveal-item { transform: none !important; }
.reveal-item[data-reveal="fade"] { transform: none; }

@keyframes dteFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dteSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: dteFadeIn 0.3s var(--transition-smooth) forwards; }
.animate-slide-up { animation: dteSlideUp 0.4s var(--transition-smooth) forwards; }

@keyframes dteShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.shimmer-loading {
  background: linear-gradient(90deg, var(--color-muted) 0%, var(--color-secondary) 50%, var(--color-muted) 100%);
  background-size: 200% 100%;
  animation: dteShimmer 1.6s ease-in-out infinite;
}

@keyframes dteKenBurns {
  0%, 100% { transform: scale(1.05) translateX(0); }
  50% { transform: scale(1.14) translateX(-1.5%); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-section__bg-wrapper { animation: none !important; }
}

/* ---------- Scroll progress (Lovable ScrollProgress) ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 100;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  will-change: transform;
}
body.admin-bar .scroll-progress {
  top: var(--dte-admin-bar-height, 32px);
}

/* ---------- Header ---------- */
body.admin-bar {
  --dte-admin-bar-height: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar {
    --dte-admin-bar-height: 46px;
  }
}
body.admin-bar .site-header {
  top: var(--dte-admin-bar-height, 32px);
}
body.admin-bar .mobile-menu-panel {
  max-height: calc(100dvh - var(--header-height) - var(--dte-admin-bar-height, 32px));
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  width: 100%;
  height: var(--header-height);
  background-color: transparent;
  background-image: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  color: var(--color-primary-foreground);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Scrolled fixed header â€” solid black bar (site requirement) */
header.site-header.is-solid,
.site-header.is-solid {
  background: var(--color-header-solid) !important;
  background-color: var(--color-header-solid) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--color-header-solid) 35%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary-foreground) 8%, transparent) !important;
  color: var(--color-primary-foreground) !important;
}
.site-header.is-solid .site-logo-img {
  filter: none;
}
/* Desktop nav only â€” never style .mobile-menu-panel with these colors */
.site-header.is-solid .site-nav__side .dte-nav-link,
.site-header.is-solid .site-nav__side .js-contact-open,
.site-header.is-solid .dte-nav-list a {
  color: color-mix(in srgb, var(--color-primary-foreground) 90%, transparent);
}
.site-header.is-solid .site-nav__side .dte-nav-link:hover,
.site-header.is-solid .site-nav__side .js-contact-open:hover,
.site-header.is-solid .dte-nav-list a:hover {
  color: var(--color-primary-foreground);
}
.site-header.is-solid .site-nav__side .social-link { color: color-mix(in srgb, var(--color-primary-foreground) 90%, transparent); }
.site-header.is-solid .site-nav__side .social-link:hover { background: color-mix(in srgb, var(--color-primary-foreground) 10%, transparent); color: var(--color-primary-foreground); }
.site-header.is-solid .site-nav__side .site-socials { border-left-color: color-mix(in srgb, var(--color-primary-foreground) 20%, transparent); }
.site-header.is-solid .cart-toggle { border-color: color-mix(in srgb, var(--color-primary-foreground) 50%, transparent); color: var(--color-primary-foreground); }
.site-header.is-solid .cart-toggle:hover { border-color: var(--color-primary-foreground); color: var(--color-primary-foreground); }
.site-header.is-solid .mobile-menu-toggle { color: var(--color-primary-foreground); }
.site-header .container-wide {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  background: transparent;
}

@media (min-width: 768px) { .site-header { height: 128px; } }

.site-nav { display: flex; align-items: center; justify-content: space-between; height: 100%; position: relative; }
.site-nav__side { display: none; align-items: center; flex: 1; min-width: 0; }
.site-nav__side--left { justify-content: flex-start; }
.site-nav__side--right { justify-content: flex-end; gap: 2rem; }
@media (min-width: 1024px) {
  .site-nav__side { display: flex; }
}

.site-nav__mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  gap: 0.5rem;
  min-width: 0;
}
.site-nav__mobile-bar .site-logo-link--mobile {
  min-width: 0;
  flex-shrink: 1;
}
@media (min-width: 1024px) {
  .site-nav__mobile-bar { display: none; }
}

.dte-nav-list { display: flex; align-items: center; gap: 2.5rem; list-style: none; margin: 0; padding: 0; }
/* Desktop link styles scoped to sides only (Lovable leftNav / rightNav) */
.site-nav__side .dte-nav-link,
.site-nav__side .js-contact-open,
.dte-nav-list a {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  transition: color 0.3s ease; position: relative; padding-bottom: 0; line-height: 1.2;
  background: none;
  border: none;
  color: inherit;
}
.site-nav__side .dte-nav-link::after,
.site-nav__side .js-contact-open::after,
.dte-nav-list a::after {
  content: ""; position: absolute; left: 0; bottom: -0.375rem; width: 100%; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease;
}
.site-nav__side .dte-nav-link:hover::after,
.site-nav__side .js-contact-open:hover::after,
.dte-nav-list a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-header:not(.is-solid) .site-nav__side .dte-nav-link,
.site-header:not(.is-solid) .site-nav__side .js-contact-open,
.site-header:not(.is-solid) .dte-nav-list a { color: color-mix(in srgb, var(--color-primary-foreground) 90%, transparent); }
.site-header:not(.is-solid) .site-nav__side .dte-nav-link:hover,
.site-header:not(.is-solid) .site-nav__side .js-contact-open:hover,
.site-header:not(.is-solid) .dte-nav-list a:hover { color: var(--color-primary-foreground); }

.site-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.5s ease;
}
.site-logo-link:hover { transform: scale(1.05); }
.site-logo-link--desktop { display: none; margin: 0 1rem; }
.site-logo-link--mobile { height: 100%; justify-content: flex-start; }
@media (min-width: 1024px) {
  .site-logo-link--desktop { display: flex; }
  .site-logo-link--mobile { display: none; }
}

.site-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  padding-block: 0.375rem;
}
.site-logo-mark--desktop {
  height: min(var(--logo-height, 104px), 104px);
  max-height: calc(var(--header-height) - 1rem);
  padding-block: 0.5rem;
}
@media (min-width: 768px) {
  .site-logo-mark--desktop {
    height: min(var(--logo-height, 104px), 104px);
    max-height: calc(128px - 1rem);
  }
}
.site-logo-img { height: 100% !important; width: auto !important; max-height: 100%; display: block; object-fit: contain; }
.site-logo-text { font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; line-height: 1.2; display: block; }
.site-header:not(.is-solid) .site-logo-img { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--color-primary-foreground) 35%, transparent)); }

.social-link {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; transition: all 0.3s ease; color: color-mix(in srgb, var(--color-primary-foreground) 90%, transparent);
}
.social-link:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--color-primary-foreground) 10%, transparent); }
/* Desktop right cluster only â€” Lovable: pl-2 border-l on socials next to Contact */
.site-nav__side--right .site-socials {
  display: flex; align-items: center; gap: 0.5rem; padding-left: 0.5rem; margin-left: 0.25rem;
  border-left: 1px solid color-mix(in srgb, var(--color-primary-foreground) 20%, transparent);
}
/* Mobile bar: no divider (Lovable flex gap-2 without border-l) */
.site-nav__mobile-bar .site-socials {
  display: flex; align-items: center; gap: 0.5rem;
  padding-left: 0; margin-left: 0; border-left: none;
}
.site-footer__socials.site-socials,
.site-socials {
  display: flex; align-items: center; gap: 0.5rem;
}

.cart-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-primary-foreground) 50%, transparent);
  color: var(--color-primary-foreground); transition: border-color 0.2s ease, color 0.2s ease;
}
.cart-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.theme-cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--color-accent); color: var(--color-accent-foreground);
}
.theme-cart-count:empty { display: none; }

.site-nav__mobile-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; min-width: 0; }
.mobile-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.5rem; margin-right: -0.5rem; color: inherit;
  transition: opacity 0.3s ease;
}
.mobile-menu-toggle:hover { opacity: 0.6; }
.icon-close { display: none; }
body.mobile-menu-open .icon-menu { display: none; }
body.mobile-menu-open .icon-close { display: inline; }

/* Lovable mobile panel: absolute under header, stacked column, py-4 links, border-b */
.mobile-menu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  background: var(--color-background);
  color: var(--color-foreground);
  box-shadow: var(--shadow-elevated);
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior: contain;
  animation: dteFadeIn 0.3s var(--transition-smooth) forwards;
}
.mobile-menu-panel[hidden] { display: none !important; }
body.mobile-menu-open .mobile-menu-panel { display: block; }
@media (min-width: 1024px) {
  .mobile-menu-panel,
  body.mobile-menu-open .mobile-menu-panel { display: none !important; }
}
.mobile-menu-panel .container-wide { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.mobile-menu-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.mobile-menu-list > li {
  display: block;
  width: 100%;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.mobile-menu-list > li:last-child { border-bottom: none; }
.mobile-menu-list a,
.mobile-menu-list button,
.mobile-menu-list .mobile-menu-link,
.mobile-menu-list .dte-nav-link,
.mobile-menu-list .js-contact-open {
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 1rem 0 !important;
  margin: 0;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  line-height: 1.4 !important;
  color: var(--color-foreground) !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  position: static !important;
  transition: color 0.3s ease;
}
.mobile-menu-list a::after,
.mobile-menu-list button::after,
.mobile-menu-list .dte-nav-link::after,
.mobile-menu-list .js-contact-open::after {
  content: none !important;
  display: none !important;
}
.mobile-menu-list a:hover,
.mobile-menu-list button:hover,
.mobile-menu-list .mobile-menu-link:hover {
  color: var(--color-accent) !important;
}

/* Home hero fills viewport under the fixed transparent header */
main.home-main { padding-top: 0; }
body.dte-not-home .site-main,
body.dte-not-home .page-main,
body.dte-not-home .not-found-main {
  padding-top: calc(var(--header-height) + 2rem);
}
/* ProductDetail: App pt-[73/81] + main pt-6 / lg:pt-8 â€” clear fixed header without WC chrome */
body.dte-not-home .site-main.single-product-main {
  padding-top: calc(var(--header-height) + 1.5rem) !important;
  padding-bottom: 6rem;
}
@media (min-width: 768px) {
  body.dte-not-home .site-main, body.dte-not-home .page-main, body.dte-not-home .not-found-main { padding-top: calc(128px + 2rem); }
  body.dte-not-home .site-main.single-product-main { padding-top: calc(128px + 1.5rem) !important; }
}
@media (min-width: 1024px) {
  body.dte-not-home .site-main.single-product-main { padding-top: calc(128px + 2rem) !important; }
}

/* ---------- Hero ---------- */
.hero-section { position: relative; width: 100%; min-height: 100svh; overflow: hidden; background: var(--color-foreground); }
.hero-section__bg-wrapper { position: absolute; inset: 0; animation: dteKenBurns 26s ease-in-out infinite; }
.hero-section__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-foreground) 40%, transparent), color-mix(in srgb, var(--color-foreground) 20%, transparent), color-mix(in srgb, var(--color-foreground) 60%, transparent));
}
.hero-section__content {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding-top: 7rem; padding-bottom: 4rem;
}
@media (min-width: 768px) { .hero-section__content { padding-top: 10rem; padding-bottom: 5rem; } }
.hero-section__card {
  width: 100%; max-width: 48rem; padding: 1.75rem 1rem; border-radius: 1.25rem;
  background: color-mix(in srgb, var(--color-foreground) 25%, transparent); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--color-primary-foreground) 10%, transparent);
  box-shadow: var(--shadow-elevated);
}
@media (min-width: 640px) { .hero-section__card { padding: 2.5rem 1.5rem; } }
@media (min-width: 768px) { .hero-section__card { padding: 3rem 2.5rem; border-radius: 2rem; } }
.hero-section__badge {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-primary-foreground) 30%, transparent);
  background: color-mix(in srgb, var(--color-primary-foreground) 10%, transparent); padding: 0.4rem 1rem; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 600; color: var(--color-primary-foreground);
}
.hero-section__title {
  color: var(--color-primary-foreground); text-transform: uppercase; line-height: 0.92; margin-top: 1.25rem;
  font-size: 2.25rem;
}
@media (min-width: 640px) { .hero-section__title { font-size: 3rem; } }
@media (min-width: 768px) { .hero-section__title { font-size: 4.5rem; } }
@media (min-width: 1024px) { .hero-section__title { font-size: 6rem; } }
.hero-section__subtext { margin-top: 1.5rem; max-width: 36rem; margin-inline: auto; color: color-mix(in srgb, var(--color-primary-foreground) 85%, transparent); font-size: 1rem; line-height: 1.6; }
@media (min-width: 768px) { .hero-section__subtext { font-size: 1.25rem; } }
.hero-section__ctas { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0.75rem; }
@media (min-width: 640px) { .hero-section__ctas { flex-direction: row; align-items: center; } }
.hero-section__tags {
  margin-top: 1.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.25rem;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-primary-foreground) 75%, transparent); justify-content: center;
}
@media (min-width: 640px) { .hero-section__tags { display: flex; flex-wrap: wrap; } }
.hero-section__tags span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-section__tags svg { color: var(--color-primary); }
.hero-section__chevron { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: color-mix(in srgb, var(--color-primary-foreground) 80%, transparent); animation: dteChevronBounce 1.8s ease-in-out infinite; }
@keyframes dteChevronBounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* ---------- Shop section ---------- */
.shop-section { position: relative; background: var(--color-background); padding: 2.5rem 0; }
@media (min-width: 768px) { .shop-section { padding: 4rem 0; } }
.shop-section__heading h2 { font-size: 1.875rem; text-transform: uppercase; line-height: 0.95; }
@media (min-width: 768px) { .shop-section__heading h2 { font-size: 3rem; } }
.shop-section__heading p { margin-top: 0.75rem; color: var(--color-muted-foreground); max-width: 36rem; }
.shop-section__heading { margin-bottom: 2rem; }
.shop-section__layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .shop-section__layout { grid-template-columns: 280px 1fr; gap: 3rem; } }
.shop-sidebar--desktop { display: none; }
@media (min-width: 1024px) {
  .shop-sidebar--desktop { display: block; position: sticky; top: 140px; max-height: calc(100dvh - 160px); overflow-y: auto; }
}
.shop-section__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.shop-section__count { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted-foreground); }
.shop-browse-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  background: color-mix(in srgb, var(--color-muted) 40%, transparent); padding: 0.5rem 1rem; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600;
}
@media (min-width: 1024px) { .shop-browse-toggle { display: none; } }
.shop-browse-toggle:hover { background: var(--color-muted); }

.theme-product-grid { display: grid; grid-template-columns: 1fr; gap: 1rem 1rem; align-items: stretch; }
@media (min-width: 390px) { .theme-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .theme-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.related-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .related-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.shop-section__empty { border: 1px dashed var(--color-border); border-radius: 1rem; padding: 4rem 1rem; text-align: center; }
.shop-section__empty p { color: var(--color-muted-foreground); margin-bottom: 1rem; }

.shop-mobile-browse-fab {
  position: fixed; left: 0; bottom: calc(1.5rem + env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 0.6rem; border-radius: 0 999px 999px 0;
  background: var(--color-foreground); color: var(--color-background); padding: 0.9rem 1.25rem 0.9rem 1rem;
  box-shadow: var(--shadow-elevated); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  animation: dteFabBounce 1.8s ease-in-out infinite;
}
@keyframes dteFabBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (min-width: 1024px) { .shop-mobile-browse-fab { display: none; } }

.mobile-filter-drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.mobile-filter-drawer.is-open { display: block; }
.mobile-filter-drawer__overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-foreground) 60%, transparent); backdrop-filter: blur(4px); }
.mobile-filter-drawer__panel {
  position: absolute; inset-block: 0; left: 0; width: 92%; max-width: 24rem; background: var(--color-background);
  overflow-y: auto; padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem max(6rem, env(safe-area-inset-bottom));
  transform: translateX(-100%); transition: transform 0.3s var(--transition-smooth);
}
.mobile-filter-drawer.is-open .mobile-filter-drawer__panel { transform: translateX(0); }
.mobile-filter-drawer__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.mobile-filter-drawer__header span { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; }
.mobile-filter-drawer__show { margin-top: 1.5rem; }
@media (min-width: 1024px) { .mobile-filter-drawer { display: none !important; } }

/* ---------- Catalog sidebar ---------- */
.catalog-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.catalog-sidebar__search { position: relative; }
.catalog-sidebar__search svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--color-muted-foreground); }
.catalog-sidebar__search-input {
  width: 100%; height: 44px; border-radius: 0.75rem; background: var(--color-card); border: 1px solid var(--color-border);
  padding: 0 2.25rem; font-size: 14px;
}
.catalog-sidebar__search-clear { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--color-muted-foreground); }
.catalog-sidebar__tree { border-radius: 0.75rem; border: 1px solid var(--color-border); background: var(--color-card); overflow: hidden; }
.catalog-sidebar__all-btn {
  width: 100%; text-align: left; padding: 0.75rem 1rem; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--color-foreground);
}
.catalog-sidebar__all-btn.is-active { background: var(--color-primary); color: var(--color-primary-foreground); }
.catalog-sidebar__cat { border-top: 1px solid var(--color-border); }
.catalog-sidebar__cat-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-foreground);
}
.catalog-sidebar__cat-toggle:hover { color: var(--color-primary); }
.catalog-sidebar__cat.is-active > .catalog-sidebar__cat-toggle { color: var(--color-primary); }
.catalog-sidebar__cat-meta { display: flex; align-items: center; gap: 0.5rem; }
.catalog-sidebar__count { font-size: 12px; color: var(--color-muted-foreground); }
.catalog-sidebar__cat-toggle svg { transition: transform 0.3s ease; }
.catalog-sidebar__cat.is-open .catalog-sidebar__cat-toggle svg { transform: rotate(180deg); }
.catalog-sidebar__cat-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.catalog-sidebar__cat.is-open .catalog-sidebar__cat-panel { max-height: 1400px; }
.catalog-sidebar__see-all {
  display: block; width: 100%; text-align: left; padding: 0.5rem 1rem 0.5rem 1.5rem; font-size: 13px; color: var(--color-muted-foreground);
}
.catalog-sidebar__see-all:hover { color: var(--color-foreground); }
.catalog-sidebar__see-all.is-active { color: var(--color-primary); font-weight: 600; }
.catalog-sidebar__series-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem 0.5rem 1.5rem;
  font-size: 13px; color: color-mix(in srgb, var(--color-foreground) 90%, transparent);
}
.catalog-sidebar__series-toggle:hover { color: var(--color-primary); }
.catalog-sidebar__series-toggle svg { transition: transform 0.3s ease; }
.catalog-sidebar__series.is-open .catalog-sidebar__series-toggle svg { transform: rotate(180deg); }
.catalog-sidebar__models { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.catalog-sidebar__series.is-open .catalog-sidebar__models { max-height: 600px; }
.catalog-sidebar__model-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem 0.5rem 2.5rem;
  font-size: 13px; color: var(--color-muted-foreground);
}
.catalog-sidebar__model-btn:hover { color: var(--color-foreground); }
.catalog-sidebar__model-btn.is-active { color: var(--color-primary); font-weight: 600; }
.catalog-sidebar__model-btn.is-empty { color: color-mix(in srgb, var(--color-muted-foreground) 60%, transparent); }
.catalog-sidebar__group-label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--color-muted-foreground); margin-bottom: 0.75rem; }
.catalog-sidebar__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.catalog-sidebar__pill { border-radius: 999px; border: 1px solid var(--color-border); padding: 0.35rem 0.85rem; font-size: 12px; color: var(--color-muted-foreground); transition: all 0.3s ease; }
.catalog-sidebar__pill.is-active { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); }
.catalog-sidebar__pill:hover { color: var(--color-foreground); border-color: color-mix(in srgb, var(--color-foreground) 50%, transparent); }
.catalog-sidebar__price-labels { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 13px; color: var(--color-muted-foreground); }
.catalog-sidebar__clear {
  width: 100%; border-radius: 999px; border: 1px solid var(--color-border); padding: 0.6rem; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--color-muted-foreground);
}
.catalog-sidebar__clear:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* Dual-range price slider (Section 31.4) */
.price-range-wrapper { position: relative; height: 1.5rem; }
.range-track-bg, .range-track-fill { position: absolute; height: 4px; top: 50%; transform: translateY(-50%); pointer-events: none; border-radius: 999px; }
.range-track-bg { left: 0; right: 0; background: var(--color-border); }
.range-track-fill { background: var(--color-primary); }
.range-input {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-primary); border: 2px solid var(--color-primary-foreground); box-shadow: 0 1px 4px color-mix(in srgb, #000 30%, transparent); cursor: pointer;
}
.range-input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-primary-foreground); cursor: pointer; }
.range-input--max { z-index: 3; }
.range-input--min { z-index: 4; }

/* ---------- Product card (Pattern A hit-area overlay) ---------- */
.theme-product-card-wrap { display: flex; }
.theme-product-card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; }
.theme-product-card > .theme-card-link { position: absolute; inset: 0; z-index: 2; pointer-events: auto; }
.theme-product-card *:not(.theme-card-link) { pointer-events: none; }
.theme-product-card__image-wrapper {
  position: relative; aspect-ratio: 1 / 1; background: var(--color-card); border-radius: 1rem; overflow: hidden;
  margin-bottom: 0.75rem; border: 1px solid var(--color-border); transition: box-shadow 0.3s ease;
}
@media (min-width: 768px) { .theme-product-card__image-wrapper { border-radius: 1.25rem; margin-bottom: 1.25rem; } }
.theme-product-card:hover .theme-product-card__image-wrapper { box-shadow: var(--shadow-elevated); }
.theme-product-card__image-wrapper .product-card-img { transition: transform 0.7s var(--transition-smooth); }
.theme-product-card:hover .theme-product-card__image-wrapper .product-card-img { transform: scale(1.05); }
.theme-product-card__status {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; padding: 0.25rem 0.7rem; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; backdrop-filter: blur(4px);
}
@media (min-width: 768px) { .theme-product-card__status { top: 1rem; right: 1rem; } }
.theme-product-card__status--in-stock { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); }
.theme-product-card__status--out-of-stock { background: var(--color-muted); color: var(--color-muted-foreground); border: 1px solid var(--color-border); }
.theme-product-card__status--preorder { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); }
.theme-card-add-btn,
.theme-product-card a.add_to_cart_button.theme-card-add-btn {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 3;
  pointer-events: auto;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 2.75rem !important;
  padding: 0.625rem 0.75rem !important;
  border-radius: 999px !important;
  background: var(--color-primary) !important;
  color: var(--color-primary-foreground) !important;
  border: 1px solid var(--color-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  text-align: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
@media (min-width: 768px) {
  .theme-card-add-btn,
  .theme-product-card a.add_to_cart_button.theme-card-add-btn {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 0.75rem 1rem !important;
    letter-spacing: 0.22em !important;
    opacity: 0;
    transform: translateY(0.5rem);
  }
  .theme-product-card:hover .theme-card-add-btn,
  .theme-product-card:hover a.add_to_cart_button.theme-card-add-btn {
    opacity: 1;
    transform: translateY(0);
  }
}
.theme-card-add-btn:hover,
.theme-product-card a.add_to_cart_button.theme-card-add-btn:hover {
  opacity: 1 !important;
  background: var(--color-background) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.theme-card-add-btn.theme-btn-loading,
.theme-card-add-btn.loading,
.theme-product-card a.add_to_cart_button.theme-card-add-btn.loading {
  opacity: 0.6 !important;
  pointer-events: none !important;
  cursor: wait !important;
}
.theme-card-add-btn.loading::after,
.theme-product-card a.add_to_cart_button.theme-card-add-btn.loading::after {
  display: none !important;
}
.theme-product-card__info { flex: 1; padding: 0 0.25rem; display: flex; flex-direction: column; gap: 0.35rem; }
.theme-product-card__subcat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted-foreground); }
.theme-product-card__title {
  font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--color-foreground); transition: color 0.3s ease;
  min-width: 0; overflow: hidden;
}
@media (min-width: 768px) { .theme-product-card__title { font-size: 1.125rem; } }
.theme-product-card:hover .theme-product-card__title { color: var(--color-primary); }
.theme-product-card__price { font-size: 1rem; color: color-mix(in srgb, var(--color-foreground) 85%, transparent); }
.theme-product-card__condition { margin-left: 0.5rem; font-size: 13px; color: var(--color-muted-foreground); }

/* WooCommerce add-to-cart style override (Section 11.4.1) */
.single_add_to_cart_button.button, .add_to_cart_button.button, a.single_add_to_cart_button, a.add_to_cart_button {
  background-color: var(--color-primary) !important; color: var(--color-primary-foreground) !important; border: none !important;
  border-radius: var(--btn-radius) !important; min-height: var(--btn-height) !important; padding: var(--btn-padding) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-body) !important;
  font-size: var(--btn-font-size) !important; font-weight: var(--btn-font-weight) !important; letter-spacing: var(--btn-letter-spacing) !important;
  text-transform: var(--btn-text-transform) !important; cursor: pointer !important; transition: opacity 0.2s ease !important;
}
.single_add_to_cart_button.button:hover, .add_to_cart_button.button:hover {
  opacity: 0.85 !important; background-color: var(--color-primary) !important; color: var(--color-primary-foreground) !important;
}
.single_add_to_cart_button.button:disabled, .single_add_to_cart_button.button.disabled,
.add_to_cart_button.button:disabled, .add_to_cart_button.button.disabled {
  cursor: not-allowed !important; opacity: 0.4 !important; pointer-events: none !important;
}
.single_add_to_cart_button.button:disabled:hover, .single_add_to_cart_button.button.disabled:hover,
.add_to_cart_button.button:disabled:hover, .add_to_cart_button.button.disabled:hover {
  opacity: 0.4 !important; background-color: var(--color-primary) !important;
}
.single-product .single_add_to_cart_button.loading::after, .ajax_add_to_cart.loading::after { display: none !important; }

/* Hide "View cart" injected by WooCommerce after AJAX add (Section 11.4.2) */
.woocommerce-page a.added_to_cart.wc-forward, .single-product a.added_to_cart.wc-forward, body a.added_to_cart.wc-forward { display: none !important; }

/* Notices â€” scoped visibility (Section 14.1) */
.single-product .woocommerce-message, .single-product .woocommerce-info { display: none; }
#theme-cart-drawer .woocommerce-message { display: none; }
.woocommerce-message, .woocommerce-info {
  border-radius: 0.75rem; border: 1px solid var(--color-border); padding: 1rem 1.25rem; background: var(--color-card);
  font-family: var(--font-body); font-size: 14px; margin-bottom: 1.5rem; list-style: none;
}
.woocommerce-error { border-radius: 0.75rem; border: 1px solid var(--color-destructive); padding: 1rem 1.25rem; background: color-mix(in srgb, var(--color-destructive) 8%, transparent); color: var(--color-destructive); font-size: 14px; margin-bottom: 1.5rem; }

/* ---------- Sell / trade section ---------- */
.tradein-section { background: var(--color-background); padding: 3.5rem 0; }
@media (min-width: 768px) { .tradein-section { padding: 7rem 0; } }
.tradein-section__inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .tradein-section__inner { grid-template-columns: 0.85fr 1fr; gap: 5rem; } }
.tradein-section__media { position: relative; order: 1; }
@media (min-width: 1024px) { .tradein-section__media { order: 2; } }
.tradein-section__image-wrap { position: relative; border-radius: 1.5rem; overflow: hidden; box-shadow: var(--shadow-elevated); aspect-ratio: 4 / 5; }
.tradein-section__image-wrap img { transition: transform 1.2s var(--transition-smooth); }
.tradein-section__media:hover .tradein-section__image-wrap img { transform: scale(1.05); }
.tradein-section__badge {
  position: absolute; bottom: -1.25rem; left: 0.75rem; display: flex; align-items: center; gap: 0.75rem;
  border-radius: 1rem; background: var(--color-background); border: 1px solid var(--color-border); box-shadow: var(--shadow-elevated);
  padding: 0.75rem 1.25rem;
}
@media (min-width: 640px) { .tradein-section__badge { left: 1.5rem; } }
.tradein-section__badge-icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); }
.tradein-section__badge-title { display: block; font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; line-height: 1; }
.tradein-section__badge-sub { display: block; margin-top: 0.25rem; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted-foreground); }
.tradein-section__copy { order: 2; }
@media (min-width: 1024px) { .tradein-section__copy { order: 1; } }
.tradein-section__label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; margin-bottom: 1rem; }
.tradein-section__heading { font-size: 1.875rem; text-transform: uppercase; line-height: 0.95; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .tradein-section__heading { font-size: 2.25rem; } }
@media (min-width: 768px) { .tradein-section__heading { font-size: 3rem; } }
@media (min-width: 1024px) { .tradein-section__heading { font-size: 3.75rem; } }
.tradein-section__body { color: color-mix(in srgb, var(--color-foreground) 85%, transparent); font-size: 1rem; line-height: 1.7; margin-bottom: 2rem; }
@media (min-width: 768px) { .tradein-section__body { font-size: 1.125rem; } }
.tradein-section__steps { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.25rem; }
.tradein-section__steps li { display: flex; gap: 1rem; }
.tradein-section__step-num {
  flex-shrink: 0; margin-top: 0.1rem; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; border: 1px solid var(--color-border); font-size: 12px; font-weight: 600; color: var(--color-primary);
  transition: all 0.3s ease;
}
.tradein-section__steps li:hover .tradein-section__step-num { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-foreground); }
.tradein-section__step-title { display: block; font-family: var(--font-display); font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.02em; }
.tradein-section__step-text { display: block; font-size: 14px; color: var(--color-muted-foreground); margin-top: 0.15rem; }
.tradein-section__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.tradein-section__ctas .btn {
  min-height: unset;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  justify-content: center;
  gap: 0.5rem;
}
.tradein-section__ctas .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}
.tradein-section__ctas .btn-outline:hover {
  transform: none;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.tradein-section__ctas .btn svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
.tradein-section__ctas .btn-primary svg {
  transition: transform 0.3s var(--transition-smooth);
}
.tradein-section__ctas .btn-primary:hover svg {
  transform: translateX(0.25rem);
}
@media (min-width: 640px) {
  .tradein-section__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .tradein-section__ctas .btn {
    width: auto;
    max-width: 100%;
    padding: 0.875rem 2rem;
  }
}

/* ---------- Contact modal (Lovable Dialog: fixed center 50%/50% + translate) ---------- */
.contact-modal { position: fixed; inset: 0; z-index: 70; display: none; }
.contact-modal.is-open { display: block; }
.contact-modal__overlay {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-foreground) 80%, transparent);
}
.contact-modal__panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: calc(100% - 2rem);
  max-width: 32rem; /* max-w-lg */
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: clip;
  margin: 0;
  box-sizing: border-box;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-elevated);
}
@media (min-width: 640px) {
  .contact-modal__panel {
    width: 100%;
    padding: 1.5rem;
    border-radius: 0.5rem;
  }
}
.contact-modal__close { position: absolute; top: 1rem; right: 1rem; padding: 0.4rem; color: var(--color-muted-foreground); }
.contact-modal__title { font-size: 1.875rem; text-transform: uppercase; letter-spacing: 0.02em; }
.contact-modal__desc { margin-top: 0.5rem; color: var(--color-muted-foreground); }
.contact-modal__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; font-size: 14px; color: var(--color-muted-foreground); }
.contact-modal__meta a { display: inline-flex; align-items: center; gap: 0.5rem; }
.contact-modal__meta a:hover { color: var(--color-accent); }
.contact-modal__form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.contact-modal__row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .contact-modal__row { grid-template-columns: 1fr 1fr; } }
.contact-modal__field label { display: block; margin-bottom: 0.4rem; font-size: 14px; font-weight: 500; }
.contact-modal__field input, .contact-modal__field select, .contact-modal__field textarea {
  width: 100%; padding: 0.65rem 0.75rem; background: var(--color-background); border: 1px solid var(--color-border);
  border-radius: 0.5rem; font-size: 15px;
}
.contact-modal__field input:focus, .contact-modal__field select:focus, .contact-modal__field textarea:focus {
  outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.contact-modal__actions { display: flex; justify-content: flex-end; }
.contact-modal__success-state { display: none; text-align: center; padding: 2rem 0; }
.contact-modal.is-success .contact-modal__form-state { display: none; }
.contact-modal.is-success .contact-modal__success-state { display: block; }
.contact-modal__success-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-foreground);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
}
.contact-modal__success-state h3 { font-size: 1.5rem; text-transform: uppercase; margin-bottom: 0.5rem; }
.contact-modal__success-state p { color: var(--color-muted-foreground); font-size: 14px; }

/* ---------- Side cart drawer ---------- */
#theme-cart-overlay { position: fixed; inset: 0; z-index: 55; background: color-mix(in srgb, var(--color-foreground) 20%, transparent); display: none; }
body.cart-open #theme-cart-overlay { display: block; }
#theme-cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 28rem; background: var(--color-background);
  z-index: 56; box-shadow: var(--shadow-elevated); display: none; flex-direction: column; transform: translateX(100%);
  transition: transform 0.3s var(--transition-smooth);
}
body.cart-open #theme-cart-drawer { display: flex; transform: translateX(0); }
#theme-cart-drawer.is-updating { opacity: 0.6; pointer-events: none; }
.theme-cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--color-border); }
.theme-cart-drawer__title { font-size: 1.125rem; font-weight: 700; }
.theme-cart-drawer__close { padding: 0.25rem; }
.theme-cart-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; gap: 1rem; }
.theme-cart-drawer__empty svg { color: var(--color-muted-foreground); }
.theme-cart-drawer__empty p { color: var(--color-muted-foreground); }
.theme-cart-drawer__items { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.theme-cart-item { display: flex; gap: 1rem; }
.theme-cart-item__image { width: 5rem; height: 6rem; flex-shrink: 0; background: var(--color-secondary); overflow: hidden; border-radius: 0.4rem; }
.theme-cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.theme-cart-item__body { flex: 1; min-width: 0; }
.theme-cart-item__name { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-cart-item__price { margin-top: 0.15rem; font-size: 14px; color: var(--color-muted-foreground); }
.theme-cart-item__variation { font-size: 12px; color: var(--color-muted-foreground); }
.theme-cart-item__controls { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; }
.theme-cart-qty-btn { padding: 0.25rem 0.5rem; border-radius: 0.3rem; transition: background 0.2s ease; }
.theme-cart-qty-btn:hover { background: var(--color-secondary); }
.theme-cart-qty-value { min-width: 1.5rem; text-align: center; font-size: 14px; }
.theme-cart-item__remove { margin-left: auto; font-size: 13px; color: var(--color-muted-foreground); }
.theme-cart-item__remove:hover { color: var(--color-foreground); }
.theme-cart-drawer__footer { padding: 1.5rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 1rem; }
.theme-cart-drawer__subtotal { display: flex; justify-content: space-between; font-size: 14px; }
.theme-cart-drawer__shipping-note { font-size: 13px; color: var(--color-muted-foreground); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-card); }
.site-footer .container-wide.site-footer__inner {
  padding: 4rem 1.5rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .site-footer .container-wide.site-footer__inner { padding: 5rem 2rem; }
}
.site-footer__top {
  display: flex; flex-direction: column; gap: 1.5rem;
  margin-bottom: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--color-border);
}
@media (min-width: 640px) {
  .site-footer__top { flex-direction: row; align-items: center; justify-content: space-between; }
}
.site-footer__logo-link {
  flex-shrink: 0;
  display: inline-block;
  max-width: 7rem;
}
@media (min-width: 768px) {
  .site-footer__logo-link { max-width: 9rem; }
}
.site-footer__logo {
  display: block;
  height: 7rem !important;
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
  border-radius: 1rem;
  transition: transform 0.5s ease;
}
@media (min-width: 768px) {
  .site-footer__logo { height: 9rem !important; border-radius: 1rem; }
}
.site-footer__logo-link:hover .site-footer__logo { transform: scale(1.04); }
.site-footer__contact { max-width: 36rem; width: 100%; }
@media (min-width: 640px) { .site-footer__contact { text-align: right; } }
.site-footer__tagline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-foreground);
}
@media (min-width: 768px) { .site-footer__tagline { font-size: 1.875rem; } }
.site-footer__desc {
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
  line-height: 1.625;
}
@media (min-width: 768px) { .site-footer__desc { font-size: 1rem; } }
.site-footer__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1rem; font-family: var(--font-body); font-size: 14px;
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent); transition: color 0.3s ease;
}
.site-footer__link:hover { color: var(--color-accent); }
.site-footer__address {
  display: inline-flex; align-items: flex-start; gap: 0.5rem;
  margin-top: 0.5rem; font-family: var(--font-body); font-size: 14px;
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
}
@media (min-width: 640px) { .site-footer__address { justify-content: flex-end; } }
.site-footer__socials { margin-top: 1rem; border-left: none; padding-left: 0; gap: 0.75rem; }
@media (min-width: 640px) { .site-footer__socials { justify-content: flex-end; } }
.site-footer__socials .social-link { color: color-mix(in srgb, var(--color-foreground) 70%, transparent); border: 1px solid var(--color-border); }
.site-footer__socials .social-link:hover { border-color: var(--color-accent); color: var(--color-accent); }
.site-footer__columns {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
}
@media (min-width: 640px) { .site-footer__columns { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .site-footer__columns { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .site-footer__columns { gap: 3rem; } }
.site-footer__col-title {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase;
  letter-spacing: 0.02em; margin-bottom: 1.25rem; color: var(--color-foreground);
}
.site-footer__col-title svg { color: var(--color-accent); flex-shrink: 0; }
.site-footer__link-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.site-footer__col:first-child .site-footer__link-grid {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .site-footer__col:first-child .site-footer__link-grid {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    column-gap: 2rem;
    row-gap: 0.75rem;
  }
}
.site-footer__link-grid a,
.site-footer__link-grid button {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
  transition: color 0.3s ease, transform 0.3s ease;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}
.site-footer__link-grid a:hover,
.site-footer__link-grid button:hover { color: var(--color-accent); transform: translateX(4px); }
.site-footer__bottom {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 0.75rem;
  align-items: center; text-align: center;
}
@media (min-width: 640px) {
  .site-footer__bottom {
    flex-direction: row; justify-content: space-between;
    align-items: center; text-align: left;
  }
}
.site-footer__slogan {
  font-family: var(--font-body);
  font-size: 13px; color: var(--color-accent); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.24em;
}
.site-footer__copyright {
  font-family: var(--font-body);
  font-size: 12px; color: var(--color-muted-foreground); letter-spacing: 0.02em;
}

/* ---------- Single product page (ProductDetail.tsx parity) ---------- */
.single-product-main { background: var(--color-background); }
.single-product__breadcrumb {
  padding: 0.75rem 0;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  font-family: var(--font-body);
}
.single-product__breadcrumb a { transition: color 0.2s ease; }
.single-product__breadcrumb a:hover { color: var(--color-foreground); }
.single-product__breadcrumb span[aria-hidden] { margin: 0 0.5rem; opacity: 0.5; }
.single-product__breadcrumb-current { color: var(--color-foreground); }

.theme-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-top: 1rem;
  padding-bottom: 6rem;
  align-items: start;
  min-width: 0;
}
@media (min-width: 1024px) {
  .theme-product-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
  }
}

.theme-product-gallery,
.theme-product-info { min-width: 0; max-width: 100%; }
@media (min-width: 1024px) {
  .theme-product-info {
    position: sticky;
    top: 7rem;
    padding-left: 1rem;
    align-self: start;
  }
}

.theme-product-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-secondary);
  overflow: hidden;
}
.theme-product-gallery__img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--transition-smooth), opacity 0.7s ease, filter 0.7s ease;
}
.theme-product-gallery__main:hover .theme-product-gallery__img { transform: scale(1.03); }

.theme-product-thumbnails {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 100%;
}
@media (min-width: 768px) {
  .theme-product-thumbnails { gap: 0.75rem; }
}
.theme-product-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-secondary);
  border: 1px solid transparent;
  padding: 0;
  transition: border-color 0.2s ease;
}
.theme-product-thumb.is-active { border-color: var(--color-foreground); }
.theme-product-thumb:hover { border-color: color-mix(in srgb, var(--color-foreground) 40%, transparent); }
.theme-product-thumb__img {
  position: static !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.theme-product-info__cat {
  display: block;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  font-family: var(--font-body);
}
.theme-product-info__title {
  font-family: var(--font-display) !important;
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1.1;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
  letter-spacing: 0.005em;
}
@media (min-width: 768px) { .theme-product-info__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .theme-product-info__title { font-size: 2.75rem; } }

.theme-product-info__price {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
  color: var(--color-foreground);
}
.theme-product-info__lead {
  color: var(--color-muted-foreground);
  line-height: 1.625;
  margin-bottom: 2rem;
  font-size: 1rem;
  font-family: var(--font-body);
}
.theme-product-info__description {
  white-space: pre-line;
  margin-bottom: 1rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--color-muted-foreground);
}

.theme-product-info__group { margin-bottom: 1.5rem; }
.theme-product-info__qty-group { margin-bottom: 1rem; }
.theme-product-info__group h3 {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
  font-weight: 400;
}

.theme-swatch-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.theme-swatch-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.theme-swatch-pill:hover { border-color: color-mix(in srgb, var(--color-foreground) 60%, transparent); }
.theme-swatch-pill.is-active {
  border-color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
}
.theme-swatch-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* Variable attributes: hide native select, show pills (scoped to PDP) */
.single-product-page .theme-attr-select-hidden,
.theme-variable-form .theme-attr-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.single-product-page .theme-variation-attr { position: relative; }
.single-product-page .theme-variation-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.single-product-page .theme-variation-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--font-body);
  background: transparent;
  color: var(--color-foreground);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.single-product-page .theme-variation-pill:hover {
  border-color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
}
.single-product-page .theme-variation-pill.is-selected {
  border-color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
}
.single-product-page .theme-variation-pill:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.theme-cart-item__meta {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--color-muted-foreground);
}
.theme-cart-item__meta li { margin: 0; }
.theme-cart-item__meta-key { font-weight: 500; margin-right: 0.25rem; }

.theme-quantity-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.theme-qty-minus,
.theme-qty-plus {
  padding: 0.5rem 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.theme-qty-minus:hover,
.theme-qty-plus:hover { background: var(--color-secondary); }
.theme-qty-value {
  padding: 0.5rem 1rem;
  min-width: 44px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.875rem;
}
.theme-qty-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.theme-product-purchase { width: 100%; }
.theme-add-to-cart-area {
  display: block;
  width: 100%;
  margin-bottom: 0;
}
.theme-single-atc {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--color-foreground) !important;
  color: var(--color-background) !important;
  border: none !important;
  padding: 1rem 1.5rem !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  line-height: 1.2;
  text-align: center;
  transition: background 0.2s ease, opacity 0.2s ease;
  text-decoration: none !important;
}
.theme-single-atc:hover {
  background: color-mix(in srgb, var(--color-foreground) 90%, transparent) !important;
  color: var(--color-background) !important;
}
.theme-single-atc.is-disabled,
.theme-single-atc[disabled],
.theme-single-atc.loading,
.theme-single-atc.theme-btn-loading {
  opacity: 0.6;
  cursor: not-allowed;
}
.theme-single-atc__label { pointer-events: none; }

/* Kill leftover WC floats / widths inside our layout */
.theme-product-layout.product,
.theme-product-layout .summary,
.theme-product-layout .images {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.theme-accordions { margin-top: 2.5rem; border-top: 1px solid var(--color-border); }
.theme-accordion { border-bottom: 1px solid var(--color-border); }
.theme-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  text-align: left;
}
.theme-accordion__trigger span {
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-family: var(--font-body);
}
.theme-accordion__trigger svg { transition: transform 0.3s ease; flex-shrink: 0; }
.theme-accordion.is-open .theme-accordion__trigger svg { transform: rotate(180deg); }
.theme-accordion__panel {
  display: none;
  padding-bottom: 1.5rem;
  color: var(--color-muted-foreground);
  font-size: 15px;
  line-height: 1.7;
  font-family: var(--font-body);
}
.theme-accordion.is-open .theme-accordion__panel { display: block; }
.theme-accordion__panel p + p { margin-top: 0.75rem; }
.theme-detail-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.theme-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 15px;
  color: var(--color-muted-foreground);
}
.theme-detail-list li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: 0.55rem;
  background: var(--color-foreground);
  border-radius: 50%;
  flex-shrink: 0;
}

.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-variation-description,
.single-product .posted_in,
.single-product .woocommerce-tabs,
.single-product .woocommerce-product-gallery,
.single-product .product_meta,
.single-product .woocommerce-breadcrumb { display: none !important; }

.related-products-section {
  padding: 5rem 0;
  border-top: 1px solid var(--color-border);
  margin-top: 0;
}
.related-products__heading { text-align: center; margin-bottom: 3rem; }
.related-products__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-muted-foreground);
  margin-bottom: 0.5rem;
}
.related-products__heading h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.875rem;
}
@media (min-width: 768px) { .related-products__heading h2 { font-size: 2.25rem; } }

/* Lovable related: grid-cols-2 lg:grid-cols-4 — override shop 3-col grid */
.related-products__grid.theme-product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .related-products__grid.theme-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}
/* Related cards visible immediately (no stuck reveal-item) */
.related-products__grid .reveal-item {
  opacity: 1 !important;
  transform: none !important;
}

/* Variations layout (if any variable products are added later) */
.single-product .variations.shop_attributes tbody, .single-product .variations tbody tr, .single-product .variations tbody td { display: block; width: 100%; }
.single-product .variations tbody td.label { padding-bottom: 0.25rem; }
.single-product .variations tbody td.value { padding-top: 0; }
.theme-attr-select-hidden { display: none !important; }

/* ---------- Page templates ---------- */
.page-title { font-size: 2rem; text-transform: uppercase; margin-bottom: 1.5rem; }
.entry-content { line-height: 1.7; max-width: 60rem; }
.not-found-main { min-height: 60vh; display: flex; align-items: center; }
.not-found__inner { text-align: center; }
.not-found__code { font-size: 5rem; font-family: var(--font-display); }
.not-found__text { margin: 1rem 0 2rem; color: var(--color-muted-foreground); font-size: 1.25rem; }

/* ---------- Shop archive (category pages) ---------- */
.shop-archive { padding: 2.5rem 0 4rem; }
.shop-archive__header { margin-bottom: 2rem; }
.shop-archive__title { font-size: 2rem; text-transform: uppercase; }
.shop-archive__empty { color: var(--color-muted-foreground); padding: 4rem 0; text-align: center; }

/* ---------- Cart / Account width ---------- */
body.woocommerce-cart .site-main,
body.woocommerce-account .site-main {
  max-width: 80rem;
  margin: 0 auto;
}

/* ==========================================================================
   WooCommerce Blocks Checkout — Lovable parity
   ========================================================================== */
:root {
  --checkout-max-width: 1280px;
  --checkout-gap: 3rem;
}

/* Main does not add header offset — shell owns it */
body.woocommerce-checkout.dte-not-home .theme-checkout-main.site-main,
body.woocommerce-checkout.dte-not-home .theme-checkout-main.page-main,
body.woocommerce-checkout .theme-checkout-main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*
 * Fixed-header clearance. Lovable: App pt-[73/81] + main pt-6/8 + container py-10.
 * WP header is 88px / 128px — clear it, then add ~2.5–3rem breathing room.
 * IMPORTANT: never set padding-top:0 on this shell in later rules.
 */
.theme-checkout-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-top: calc(var(--header-height) + 2.5rem) !important;
  padding-bottom: 5rem;
  padding-inline: 1.5rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .theme-checkout-shell {
    padding-top: calc(128px + 3rem) !important;
    padding-bottom: 6rem;
  }
}
@media (min-width: 1024px) {
  .theme-checkout-shell {
    padding-inline: 2rem;
    --checkout-gap: 4rem;
  }
}

body.woocommerce-checkout .theme-checkout-main > .container-wide,
body.woocommerce-checkout .theme-checkout-main .entry-content,
.entry-content:has(.wc-block-checkout) {
  max-width: none;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
}
body.woocommerce-checkout .theme-checkout-main .entry-content {
  padding-inline: 0;
}

/* Page header */
.theme-checkout-header,
.dte-checkout-header {
  max-width: var(--checkout-max-width);
  width: 100%;
  margin: 0 auto 2.5rem;
  padding: 0;
  box-sizing: border-box;
}
.checkout-continue-link,
.dte-checkout-continue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 2rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted-foreground);
  transition: color 0.2s ease;
}
.checkout-continue-link:hover,
.dte-checkout-continue:hover { color: var(--color-foreground); }
.theme-checkout-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.15;
  color: var(--color-foreground);
}
.theme-checkout-intro,
.dte-checkout-subtext {
  margin: 0;
  max-width: 36rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted-foreground);
}

/* Block root */
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-checkout .wc-block-checkout,
.entry-content .wp-block-woocommerce-checkout,
.entry-content .wc-block-checkout {
  max-width: var(--checkout-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 !important;
  box-sizing: border-box;
  min-width: 0;
}
body.woocommerce-checkout .wc-block-checkout.alignwide,
.entry-content .wc-block-checkout.alignwide {
  max-width: var(--checkout-max-width);
  margin-top: 0;
}
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-components-main,
.entry-content .wc-block-checkout__main,
.entry-content .wc-block-components-main {
  margin: 0;
  padding: 0;
}

/* Notices */
body.woocommerce-checkout .wc-block-components-notices,
.entry-content .wc-block-components-notices {
  max-width: var(--checkout-max-width);
  width: 100%;
  margin: 0 auto 1.5rem;
  padding: 0;
  box-sizing: border-box;
}
body.woocommerce-checkout .wc-block-checkout > .wc-block-components-notices:empty,
.entry-content .wc-block-checkout > .wc-block-components-notices:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Tablet 2-col: form | summary */
@media (min-width: 768px) and (max-width: 1023px) {
  body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout,
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout,
  .entry-content .wc-block-checkout.wc-block-components-sidebar-layout,
  .entry-content .wc-block-checkout .wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: 1fr minmax(260px, 340px);
    gap: 2rem;
    align-items: start;
    margin: 0;
    padding: 0;
  }
  body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-checkout__main,
  body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-checkout__sidebar,
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__main,
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Desktop: Lovable order — summary left, form right */
@media (min-width: 1024px) {
  body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout,
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout,
  body.woocommerce-checkout .wc-block-checkout.wc-block-checkout-sidebar-layout,
  .entry-content .wc-block-checkout.wc-block-components-sidebar-layout,
  .entry-content .wc-block-checkout .wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.15fr);
    gap: var(--checkout-gap);
    align-items: start;
    flex-direction: unset !important;
    margin: 0;
    padding: 0;
  }
  body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-checkout__sidebar,
  body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-components-sidebar,
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar,
  .entry-content .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-checkout__sidebar {
    order: 1;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-checkout__main,
  body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-components-main,
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__main,
  .entry-content .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-checkout__main {
    order: 2;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Sidebar wrappers clear; card only on order summary */
body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block,
.entry-content .wc-block-checkout__sidebar,
.entry-content .wc-block-components-sidebar,
.entry-content .wp-block-woocommerce-checkout-totals-block {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
.entry-content .wp-block-woocommerce-checkout-order-summary-block {
  width: 100%;
  background-color: var(--color-card) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
  .entry-content .wp-block-woocommerce-checkout-order-summary-block {
    padding: 2rem;
  }
}

/* Section titles */
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title,
.entry-content .wc-block-checkout .wc-block-components-checkout-step__title {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em;
  text-transform: none !important;
  color: var(--color-foreground) !important;
  margin: 0 0 1rem !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step {
  border-color: var(--color-border) !important;
  padding-bottom: 2rem !important;
  margin-bottom: 2rem !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__description {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

/* Fields */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-textarea textarea,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-block-components-combobox input.wc-block-components-combobox-control__input,
.entry-content .wc-block-checkout .wc-block-components-text-input input,
.entry-content .wc-block-checkout .wc-block-components-textarea textarea,
.entry-content .wc-block-checkout .wc-block-components-select select,
.entry-content .wc-block-checkout .wc-blocks-components-select__select {
  width: 100% !important;
  max-width: none !important;
  min-height: 3rem;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.4;
  color: var(--color-foreground) !important;
  background: var(--color-background) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
}
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-textarea label {
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  color: var(--color-muted-foreground) !important;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-textarea textarea:focus,
body.woocommerce-checkout .wc-block-components-select select:focus,
body.woocommerce-checkout .wc-blocks-components-select__select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px var(--color-primary) !important;
  outline: none !important;
}

/* Billing address: align Blocks selects (country/state) with text inputs */
body.woocommerce-checkout #billing .wc-blocks-components-select,
.entry-content .wc-block-checkout #billing .wc-blocks-components-select {
  margin-top: 0 !important;
}
body.woocommerce-checkout #billing .wc-blocks-components-select__container,
.entry-content .wc-block-checkout #billing .wc-blocks-components-select__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
body.woocommerce-checkout #billing .wc-blocks-components-select__select,
.entry-content .wc-block-checkout #billing .wc-blocks-components-select__select {
  order: 1 !important;
}
body.woocommerce-checkout #billing .wc-blocks-components-select__label,
.entry-content .wc-block-checkout #billing .wc-blocks-components-select__label {
  position: static !important;
  display: block !important;
  order: 2 !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0.35rem 0 0 !important;
  padding: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--color-muted-foreground) !important;
}
body.woocommerce-checkout #billing .wc-block-components-country-input,
body.woocommerce-checkout #billing .wc-block-components-state-input,
.entry-content .wc-block-checkout #billing .wc-block-components-country-input,
.entry-content .wc-block-checkout #billing .wc-block-components-state-input {
  align-self: flex-start;
  min-height: 4.75rem;
  box-sizing: border-box;
}
body.woocommerce-checkout #billing .wc-block-components-country-input,
.entry-content .wc-block-checkout #billing .wc-block-components-country-input {
  margin-bottom: 0;
  width: 100%;
}

body.woocommerce-checkout .wc-block-components-checkbox label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-foreground);
}

/* Checkbox — custom box + checkmark only when checked (do not force mark visible) */
body.woocommerce-checkout .wc-block-components-checkbox,
.entry-content .wc-block-checkout .wc-block-components-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
body.woocommerce-checkout .wc-block-components-checkbox label,
.entry-content .wc-block-checkout .wc-block-components-checkbox label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  line-height: 1.4;
  cursor: pointer;
}
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input,
.entry-content .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  margin: 0 !important;
  flex-shrink: 0;
  border: 1px solid var(--color-border) !important;
  border-radius: 0.25rem !important;
  background: var(--color-background) !important;
  box-shadow: none !important;
  cursor: pointer;
}
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input:checked,
.entry-content .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input:checked {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark,
.entry-content .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
  width: 12px !important;
  height: 10px !important;
  max-width: 12px !important;
  max-height: 10px !important;
  position: absolute !important;
  left: 3px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: none !important;
  pointer-events: none;
  overflow: visible;
}
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark,
.entry-content .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark {
  display: block !important;
}
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark path,
.entry-content .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark path {
  fill: var(--color-primary-foreground) !important;
}

/* Order notes — compact step (not a full section) */
body.woocommerce-checkout #order-notes.wc-block-components-checkout-step,
.entry-content .wc-block-checkout #order-notes.wc-block-components-checkout-step {
  padding-bottom: 0 !important;
  margin-bottom: 1rem !important;
  border-bottom: none !important;
}
body.woocommerce-checkout #order-notes .wc-block-components-checkout-step__content,
.entry-content .wc-block-checkout #order-notes .wc-block-components-checkout-step__content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Place order */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
.entry-content .wc-block-components-checkout-place-order-button {
  width: 100% !important;
  min-height: var(--btn-height) !important;
  margin-top: 0.5rem !important;
  padding: var(--btn-padding) !important;
  background: var(--color-primary) !important;
  color: var(--color-primary-foreground) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  font-family: var(--font-body) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  letter-spacing: var(--btn-letter-spacing) !important;
  text-transform: var(--btn-text-transform) !important;
  box-shadow: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  opacity: 0.92;
}

/* Order summary items / totals */
body.woocommerce-checkout .wc-block-components-order-summary-item {
  font-family: var(--font-body);
  font-size: 0.875rem;
  gap: 1rem;
  padding: 0 0 1.25rem !important;
  border-color: var(--color-border) !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
  border-radius: 0.5rem;
}
body.woocommerce-checkout .wc-block-components-product-metadata,
body.woocommerce-checkout .wc-block-components-product-details {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}
body.woocommerce-checkout .wc-block-components-product-details__name,
body.woocommerce-checkout .wc-block-components-product-details__value {
  display: inline;
}
body.woocommerce-checkout .wc-block-components-totals-item,
body.woocommerce-checkout .wc-block-components-totals-wrapper {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  border: none !important;
  border-color: transparent !important;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 1rem !important;
  font-weight: 600 !important;
}
body.woocommerce-checkout .wc-block-components-panel {
  border: none !important;
}

/*
 * Order summary dividers — only two lines:
 * 1) after “Add coupons” (before Subtotal)
 * 2) before Total
 * Strip WC Blocks’ default borders on every totals-wrapper.
 */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:not(.wp-block-woocommerce-checkout-order-summary-coupon-form-block),
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-totals-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-subtotal-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-discount-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-fee-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-shipping-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-taxes-block,
.entry-content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:not(.wp-block-woocommerce-checkout-order-summary-coupon-form-block) {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Hide empty fee/discount wrappers that still reserve a border line */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-discount-block:empty,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-fee-block:empty,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-discount-block:not(:has(.wc-block-components-totals-item)),
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-fee-block:not(:has(.wc-block-components-totals-item)) {
  display: none !important;
}

/* Line 1 — after Add coupons */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.entry-content .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
  margin: 0.75rem 0 0 !important;
  padding: 0 0 1rem !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
}
body.woocommerce-checkout .wc-block-components-totals-coupon.wc-block-components-panel,
.entry-content .wc-block-components-totals-coupon.wc-block-components-panel {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button,
.entry-content .wc-block-components-totals-coupon .wc-block-components-panel__button {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  width: auto !important;
  min-height: 2.25rem;
  margin: 0 !important;
  padding: 0.35rem 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-primary) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button:hover,
.entry-content .wc-block-components-totals-coupon .wc-block-components-panel__button:hover {
  color: var(--color-foreground) !important;
  text-decoration: underline;
}
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__content,
.entry-content .wc-block-components-totals-coupon .wc-block-components-panel__content {
  margin-top: 0.75rem;
  padding-top: 0;
}

/* Subtotal block — breathing room under coupons line */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-totals-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-subtotal-block {
  margin-top: 0 !important;
  padding-top: 1rem !important;
  padding-bottom: 0 !important;
  border: none !important;
}

/* Line 2 — before Total (single border on the footer row only) */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:has(> .wc-block-components-totals-footer-item) {
  margin-top: 0.75rem !important;
  padding-top: 0 !important;
  border: none !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item,
.entry-content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item {
  margin-top: 0 !important;
  padding-top: 1rem !important;
  border: none !important;
  border-top: 1px solid var(--color-border) !important;
}
body.woocommerce-checkout .wc-block-checkout__sidebar.is-sticky {
  position: static !important;
  top: auto !important;
}

/* Empty cart */
body.woocommerce-checkout .wc-block-checkout-empty,
.entry-content .wc-block-checkout-empty {
  margin: 3rem auto;
  max-width: 36rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body);
}
body.woocommerce-checkout .wc-block-checkout-empty__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
}

/* ---------- Thank-you page ---------- */
body.theme-thankyou-page { overflow-x: clip; }
body.theme-thankyou-page .site-main { padding-top: calc(var(--header-height) + 2rem); }
body.theme-thankyou-page .woocommerce-order { max-width: 60rem; margin: 0 auto; }
body.theme-thankyou-page .woocommerce-order h2,
body.theme-thankyou-page .woocommerce-order-details__title {
  font-size: 1.5rem;
  text-transform: uppercase;
  padding: 0 0 1rem;
}
body.theme-thankyou-page .woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
body.theme-thankyou-page .woocommerce-order-details table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
body.theme-thankyou-page .woocommerce-order-details table th,
body.theme-thankyou-page .woocommerce-order-details table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
body.theme-thankyou-page .woocommerce-order-details tfoot th { text-align: left; }
body.theme-thankyou-page .woocommerce-order-details tfoot td { text-align: right; }
body.theme-thankyou-page .woocommerce-customer-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
body.theme-thankyou-page .woocommerce-customer-details address {
  max-width: 30rem;
  overflow-wrap: break-word;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  font-style: normal;
}
@media (min-width: 768px) {
  body.theme-thankyou-page .woocommerce-customer-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
  body.theme-thankyou-page .woocommerce-customer-details address {
    min-width: 0;
    max-width: none;
  }
}

/* ---------- Customizer media control ---------- */
.theme-media-control { display: flex; flex-direction: column; gap: 0.5rem; }
.theme-media-url-input { width: 100%; min-width: 0; box-sizing: border-box; }
.theme-media-preview { max-width: 100%; height: auto; display: block; margin-top: 0.5rem; }

