/* ==========================================================================
   Ambientes Design — Storefront
   Design: Claude Design "Ambientes Storefront" (based on ambientesdesign.com)
   Assistant font, warm palette, terracotta accent, centered logo header.
   ========================================================================== */
:root {
  --ink: #262421; /* warm near-black */
  --ink-2: #4a463f;
  --muted: #6b6459;
  --muted-2: #726c63;
  --muted-3: #9a938a;
  --muted-4: #8a837a;
  --accent: #b94a3d; /* terracotta (prices, badges, sale) */
  --accent-2: #c15b4e; /* eyebrow / lighter accent */
  --dark: #1d1b18; /* dark buttons / borders */
  --paper: #ffffff;
  --hero: #fbf4f1;
  --blush: #ffffff;
  --footer-bg: #ebeced;
  --announce-bg: #ebeced;
  --announce-ink: #1d1b18;
  --line: #e6e2db;
  --line-2: #1d1b18;
  --line-3: #1d1b18;
  --field-border: #d9d3c9;
  --img-bg: #f1f0ec;
  --radius: 4px; /* buttons / small */
  --maxw: 1200px;
}

* {
  box-sizing: border-box;
}
/* El atributo `hidden` sólo vale `display:none` en la hoja del navegador, así que
   CUALQUIER regla propia con `display` (p. ej. `.btn { display:inline-flex }`) lo
   anula y el elemento sigue viéndose aunque el JS lo haya ocultado. Ya había
   parches sueltos por componente (.searchbox[hidden], .imgzoom[hidden]); esta
   regla lo arregla de raíz para todo el sitio. Vino de un botón «Usar esta
   cantidad» que seguía visible cuando no había cantidad que aplicar. */
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  font-family:
    "Assistant",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Sticky footer: on short pages (404, carrito vacío, búsqueda sin resultados,
   confirmaciones…) the content doesn't fill the viewport, and without this the
   footer stops mid-screen leaving white space underneath it. */
body.site {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.site .site-main {
  flex: 1 0 auto;
}
body.site .site-footer {
  margin-top: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--accent);
}
h1,
h2,
h3 {
  letter-spacing: -0.3px;
}
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.msym {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  -webkit-font-feature-settings: "liga";
  vertical-align: middle;
}
.muted {
  color: var(--muted-2);
}

/* --- Announcement bar ---------------------------------------------------- */
.announce {
  background: var(--announce-bg);
  color: var(--announce-ink);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 9px 22px;
  text-align: center;
}
.announce a {
  color: inherit;
}
.announce__link {
  text-decoration: none;
}
.announce__link:hover {
  text-decoration: underline;
}

/* --- Header (centered logo) --------------------------------------------- */
.site-header {
  border-bottom: 0.25px solid var(--line-2);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}
.site-header__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 24px 0;
}
.site-header__side {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 14px;
}
.site-header__side.right {
  justify-content: flex-end;
  gap: 20px;
}
.site-header__side .msym {
  font-size: 22px;
}
.brand-block {
  text-align: center;
}
.brand-logo {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
.site-header .brand-logo {
  height: 92px;
  max-width: 100%;
}
.footer-brand .brand-logo {
  height: 36px;
}
.brand-block .brand-tag {
  display: block;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--muted-3);
  text-transform: uppercase;
  margin-top: -2px;
}
.cart-link {
  position: relative;
}
.cart-link .cart-count {
  position: absolute;
  top: -7px;
  right: -9px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-nav {
  display: flex;
  justify-content: center;
  padding: 10px 24px 8px;
  margin-top: 12px;
  border-top: 0.25px solid var(--line-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
/* Reset list chrome for all menu levels */
.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu--l1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 26px;
}
.nav-item {
  position: relative;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  color: inherit;
}
.nav-link:hover {
  color: var(--accent);
}
.nav-expand {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
}
.nav-item.has-children > .nav-expand {
  display: inline-flex;
  align-items: center;
}
.nav-item.has-children > .nav-expand .msym {
  font-size: 18px;
  transition: transform 0.15s ease;
}

/* Mega-menu columns (shared by desktop panel + mobile accordion) */
.nav-mega__col {
  min-width: 0;
}
.nav-mega__imglink {
  display: block;
}
.nav-mega__img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--img-bg);
}
.nav-mega__title {
  display: block;
  font-weight: 700;
  color: var(--ink);
  padding: 2px 0;
}
.nav-mega__title:hover {
  color: var(--accent);
}
.nav-mega__sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-3);
  margin-bottom: 6px;
}
.nav-mega__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.nav-mega__list a {
  display: block;
  padding: 5px 0;
  font-weight: 500;
  color: var(--ink-2);
}
.nav-mega__list a:hover {
  color: var(--accent);
}

/* Desktop dropdowns (level 2) + flyouts (level 3) */
@media (min-width: 761px) {
  .main-nav {
    position: relative;
  }
  .nav-item.has-children > .nav-link {
    pointer-events: auto;
  }
  /* Full-width mega panel spans the nav row (not confined to the item) */
  .nav-item--mega {
    position: static;
  }
  .nav-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 0.25px solid var(--line-2);
    border-radius: 10px;
    box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.35);
    padding: 24px 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
      opacity 0.14s ease,
      transform 0.14s ease;
    z-index: 45;
  }
  .nav-item--mega.open > .nav-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* Caret feedback when a top-level panel is open (click-to-open). */
  .nav-menu--l1 > .nav-item.open > .nav-expand .msym {
    transform: rotate(180deg);
  }
  .nav-menu--l2,
  .nav-menu--l3 {
    position: absolute;
    min-width: 200px;
    background: #fff;
    border: 0.25px solid var(--line-2);
    border-radius: 10px;
    box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.35);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
      opacity 0.14s ease,
      transform 0.14s ease;
    z-index: 45;
  }
  .nav-menu--l2 {
    top: 100%;
    left: 0;
    margin-top: 4px;
  }
  .nav-menu--l3 {
    top: -7px;
    left: 100%;
    margin-left: 4px;
  }
  /* Top-level panels open on click (.open, toggled by public.js); nested l3
     flyouts still reveal on hover inside the already-open dropdown. */
  .nav-menu--l1 > .nav-item.open > .nav-menu,
  .nav-menu--l2 .nav-item:hover > .nav-menu,
  .nav-menu--l2 .nav-item:focus-within > .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-menu--l2 .nav-item,
  .nav-menu--l3 .nav-item {
    display: block;
  }
  .nav-menu--l2 .nav-link,
  .nav-menu--l3 .nav-link {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border-radius: 7px;
    font-weight: 500;
  }
  .nav-menu--l2 .nav-link:hover,
  .nav-menu--l3 .nav-link:hover {
    background: var(--line-1, #f4f2ee);
    color: var(--accent);
  }
  .nav-menu--l2 .nav-item.has-children > .nav-expand .msym {
    transform: rotate(-90deg);
  }
}
/* Drawer chrome — only visible when the nav is an off-canvas panel (mobile) */
.nav-toggle,
.nav-close {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-2);
  padding: 0;
  align-items: center;
}
.nav-toggle .msym {
  font-size: 24px;
}
.nav-close .msym {
  font-size: 24px;
}
.main-nav__head,
.main-nav__extra {
  display: none;
}
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 24, 0.42);
  z-index: 39;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  line-height: 1.15;
  transition:
    background 0.12s,
    color 0.12s;
}
.btn--primary {
  background: var(--dark);
  color: #fff;
}
.btn--primary:hover {
  background: #000;
  color: #fff;
}
.btn--accent {
  background: var(--accent-2);
  color: #fff;
}
.btn--accent:hover {
  background: var(--accent);
  color: #fff;
}
.btn--outline {
  background: #fff;
  border-color: var(--dark);
  color: var(--dark);
}
.btn--outline:hover {
  background: var(--dark);
  color: #fff;
}
.btn--ghost {
  background: #fff;
  border-color: var(--field-border);
  color: var(--ink-2);
}
.btn--ghost:hover {
  border-color: var(--dark);
}
.btn--block {
  width: 100%;
}
.btn--sm {
  padding: 9px 18px;
  font-size: 13px;
}
.btn--link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font-weight: 600;
  font-family: inherit;
  font-size: 13.5px;
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--hero);
  min-height: 440px;
}
.hero__inner {
  padding: 0 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__media {
  background: repeating-linear-gradient(
    135deg,
    #f1dbd4 0 18px,
    #ecd3cb 18px 36px
  );
}
.hero__eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 14px;
}
.hero__title {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 16px;
}
.hero__lead {
  font-size: 16.5px;
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 430px;
  color: var(--muted);
}
.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- Image with text (homepage section) --------------------------------- */
.img-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.img-text--right {
  direction: rtl;
}
.img-text--right > * {
  direction: ltr;
}
.img-text__media img,
.img-text__ph {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.img-text__ph {
  background: repeating-linear-gradient(
    135deg,
    #f1dbd4 0 18px,
    #ecd3cb 18px 36px
  );
}
.img-text__title {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 14px;
}
.img-text__text {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.6;
}
.rich-section .rich-content {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
  color: var(--ink-2);
}
.rich-section .rich-content h2,
.rich-section .rich-content h3 {
  margin-top: 1.2em;
}
@media (max-width: 760px) {
  .img-text {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .img-text--right {
    direction: ltr;
  }
}

/* --- Sections ------------------------------------------------------------ */
.section {
  padding: 46px 0 8px;
}
.section--muted {
  background: var(--blush);
  padding: 44px 0;
  margin-top: 8px;
}
.section__title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 24px;
  text-align: center;
}
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
}
.section__head .section__title {
  margin: 0;
  text-align: left;
}
.section__link {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}
.section__eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted-3);
  text-align: center;
  margin-bottom: 6px;
}

/* --- Category tiles ------------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.category-card {
  display: block;
}
.category-card__img {
  width: 100%;
  aspect-ratio: 3/2.4;
  object-fit: cover;
  border-radius: 6px;
  background: repeating-linear-gradient(
    135deg,
    #f1dbd4 0 16px,
    #ecd3cb 16px 32px
  );
}
.category-card__title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin-top: 12px;
  display: block;
}

/* --- Product grid & tiles (borderless, per design) ---------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
/* Product card — polished, consistent everywhere (home, listing, collection,
   search, product detail, projects). Matches the homepage collection cards:
   bordered white rounded frame, edge-to-edge cover media, roomy body padding. */
.product-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
  color: inherit;
  transform: translateY(-5px);
  box-shadow: 0 18px 50px -30px rgba(35, 32, 32, 0.3);
}
.product-card:hover .product-card__media img {
  transform: scale(1.05);
}
.product-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #f5f4f2, #ecebe7);
  border-radius: 0;
  overflow: hidden;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.product-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted-3);
  font-size: 0.85rem;
}
.product-card__body {
  padding: 14px 16px 16px;
}
.product-card__vendor {
  font-size: 12px;
  color: var(--muted-4);
  margin: 0 0 5px;
}
.product-card__title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}
.product-card__price {
  font-size: 14.5px;
  font-weight: 600;
  margin-top: 8px;
}
/* Small screens: always two cards per row with a compact card. Without this,
   the auto-fill minmax(200px) grid collapses to ONE full-width column below
   ~440px viewports and each product photo fills the whole screen. */
@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .product-card {
    border-radius: 14px;
  }
  .product-card__body {
    padding: 10px 11px 12px;
  }
  .product-card__vendor {
    font-size: 11px;
    margin-bottom: 3px;
  }
  .product-card__title {
    font-size: 13.5px;
  }
  .product-card__price {
    font-size: 13px;
    margin-top: 6px;
  }
}

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  /* Por encima de la imagen: `.img-skeleton > img` lleva z-index:1, así que sin
     esto la foto (opaca al terminar de cargar) tapaba el badge — se veía sólo
     mientras la imagen cargaba y luego desaparecía. */
  z-index: 2;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
}
.badge--sale {
  background: var(--accent);
}
.badge--soldout {
  background: #6b6b6b;
}
.badge--deal {
  background: #d33; /* lightning deal — hotter than the regular sale red */
}

/* Limited-time deal ("Oferta") — countdown + claimed bar. */
.deal-countdown {
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.product-card .deal-countdown {
  margin-top: 4px;
}
.deal-countdown--urgent {
  color: #d33;
}
.deal-countdown--ended {
  color: #6b6b6b;
}
.deal-panel {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid #f0c9c4;
  background: #fdf3f1;
  border-radius: 8px;
}
.deal-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.deal-panel__flash {
  font-weight: 700;
  color: #d33;
  font-size: 13px;
}
.deal-countdown--lg {
  font-size: 15px;
}
.deal-claim {
  margin-top: 10px;
}
.deal-claim__bar {
  height: 8px;
  background: #f0d5d0;
  border-radius: 999px;
  overflow: hidden;
}
.deal-claim__bar > span {
  display: block;
  height: 100%;
  background: #d33;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.deal-claim__label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.price {
  font-weight: 600;
}
.price--sale {
  color: var(--accent);
}
.price--compare {
  text-decoration: line-through;
  color: var(--muted-3);
  font-weight: 400;
  margin-left: 6px;
  font-size: 13px;
}
.price--lg {
  font-size: 27px;
  font-weight: 700;
}

/* Amazon-style amounts: whole part full size, cents smaller and raised.
   Emitted by h.moneyHtml() as <span class="amount">123<span class="amount-dec">45</span></span>. */
.amount {
  white-space: nowrap;
}
.amount-dec {
  font-size: 0.62em;
  vertical-align: 0.42em;
  margin-left: 0.06em;
  font-weight: inherit;
  letter-spacing: 0.01em;
}

/* --- Listing ------------------------------------------------------------- */
.listing__header {
  padding: 30px 0 6px;
}
.listing__title {
  margin: 0 0 6px;
  font-size: 34px;
  font-weight: 800;
}
.listing__desc {
  color: var(--muted-2);
  max-width: 640px;
}
.listing__layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 34px;
  padding: 22px 0 46px;
}
.listing__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 0.25px solid var(--line-2);
  margin-bottom: 22px;
}
.listing__count {
  color: var(--muted-2);
  font-size: 14px;
}
.listing__empty {
  color: var(--muted-2);
  padding: 40px 0;
}
.filter-form {
  font-size: 14px;
}
.filter-group {
  border-top: 0.25px solid var(--line-2);
  padding: 14px 0;
}
.filter-group__title {
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 10px;
}
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 14px;
}
.check input {
  accent-color: var(--accent);
}
.filter-price {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-price input {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
}
.filter-actions {
  display: flex;
  gap: 8px;
  padding-top: 14px;
}
.sort-form select {
  padding: 8px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-weight: 600;
  font-size: 13.5px;
  background: #fff;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 34px 0 4px;
}
.pagination__link {
  border: 1px solid var(--dark);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--dark);
}
.pagination__link:hover {
  background: var(--dark);
  color: #fff;
}
.pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}
.pagination__page:hover {
  border-color: var(--dark);
}
.pagination__page.is-current {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
  cursor: default;
}
.pagination__gap {
  padding: 0 2px;
  color: var(--muted-2);
  font-size: 14px;
}
.pagination__info {
  color: var(--muted-2);
  font-size: 14px;
  text-align: center;
  margin: 6px 0 0;
}

/* En móvil los números son lo que más se usa: se deja envolver el bloque y se
   aprietan los controles, en vez de esconder texto con trucos frágiles. */
@media (max-width: 560px) {
  .pagination { gap: 6px; flex-wrap: wrap; }
  .pagination__link { padding: 8px 12px; }
  .pagination__page { min-width: 34px; height: 34px; }
}

/* --- Breadcrumbs ---------------------------------------------------------- */
.breadcrumbs {
  font-size: 12.5px;
  color: var(--muted-3);
  padding: 18px 0;
}
.breadcrumbs .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
}
.breadcrumbs a {
  color: var(--muted-2);
}
.breadcrumbs a:hover {
  color: var(--accent);
}
.breadcrumbs__sep {
  margin: 0 7px;
  color: var(--muted-3);
}
.breadcrumbs [aria-current="page"] {
  color: var(--muted-3);
}

/* --- Product detail ------------------------------------------------------ */
.product-detail__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  padding-bottom: 20px;
}
/* La foto de la ficha NUNCA se recorta: es el producto. Un mural horizontal
   (3:2) metido en una caja cuadrada con `cover` perdía los laterales, que es
   justo donde se ve el dibujo completo.

   La caja adopta la proporción REAL de la foto vía --img-ratio, que pone
   public.js#setGalleryRatio al cargarla (no guardamos ancho/alto: las fotos
   importadas de Shopify no tienen MediaFile). Mientras no se conoce —primer
   pintado, o sin JavaScript— vale 4/3, que reserva sitio y evita el salto de
   maquetación; con `contain` esa caja provisional deja bandas, jamás recorta.
   El tope de altura evita que una foto muy vertical ocupe toda la pantalla. */
.product-gallery__main {
  position: relative;
  aspect-ratio: var(--img-ratio, 4 / 3);
  max-height: 78vh;
  background: var(--img-bg);
  border-radius: 4px;
  overflow: hidden;
}
.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-gallery__placeholder {
  aspect-ratio: 1;
}
.product-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.product-gallery__thumbs img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor: pointer;
}
.product-gallery__thumbs img.is-active {
  border-color: var(--dark);
}
.product-info__vendor {
  font-size: 13px;
  color: var(--muted-4);
  margin-bottom: 16px;
}
.product-info__title {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 4px;
}
.product-info__price {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.product-info__meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--muted-4);
  margin: 6px 0 20px;
}
.stock--in {
  color: #1e7a46;
}
.stock--out {
  color: var(--accent);
}
.product-info__short {
  color: var(--ink-2);
  margin-bottom: 20px;
}
.add-to-cart {
  border-top: 0.25px solid var(--line-2);
  padding-top: 18px;
  max-width: 380px;
}
/* ==========================================================================
   Servicios de cortinas — hub page (/servicios)
   Self-contained, scoped under .svc. Uses the storefront design tokens.
   ========================================================================== */
.svc { --svc-a: var(--accent); }
.svc .msym { line-height: 1; }

/* Entrance: a soft staggered fade-up on load (CSS-only, CSP-safe). */
@keyframes svcIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .svc-card, .svc-step, .svc-perk, .svc-hero__inner > * { animation: svcIn .55s cubic-bezier(.22,.61,.36,1) both; }
  .svc-hero__title { animation-delay: .04s; }
  .svc-hero__lead { animation-delay: .10s; }
  .svc-hero__chips { animation-delay: .16s; }
  .svc-card:nth-child(2) { animation-delay: .08s; }
  .svc-card:nth-child(3) { animation-delay: .16s; }
  .svc-step:nth-child(2) { animation-delay: .10s; }
  .svc-step:nth-child(3) { animation-delay: .20s; }
}

/* --- Hero --- */
.svc-hero {
  background:
    radial-gradient(1200px 400px at 50% -140px, #fff 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--hero) 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
  padding: clamp(40px, 8vw, 84px) 0 clamp(36px, 6vw, 64px);
  text-align: center;
  overflow: hidden;
}
.svc-hero__inner { max-width: 760px; }
.svc-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.svc-hero__title { font-size: clamp(30px, 5.4vw, 52px); line-height: 1.06; letter-spacing: -.6px; margin: 0 0 16px; }
.svc-hero__lead { font-size: clamp(15px, 1.9vw, 19px); color: var(--ink-2); max-width: 620px; margin: 0 auto; }
.svc-hero__lead strong { color: var(--ink); }
.svc-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.svc-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.svc-chip .msym { font-size: 18px; color: var(--accent); }

/* --- Service cards --- */
.svc-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px; margin-top: -34px; position: relative; z-index: 2;
}
.svc-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px 24px;
  box-shadow: 0 10px 30px -22px rgba(38,36,33,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(38,36,33,.5); border-color: #ded8cf; }
.svc-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 16px; margin-bottom: 18px;
  background: var(--hero); /* fallback for browsers without color-mix */
  background: color-mix(in srgb, var(--svc-tone, var(--accent)) 12%, #fff);
  color: var(--svc-tone, var(--accent));
}
.svc-card__icon .msym { font-size: 30px; }
.svc-card--a { --svc-tone: #b94a3d; }
.svc-card--b { --svc-tone: #3d7f8c; }
.svc-card--c { --svc-tone: #9a6b2f; }
.svc-card__title { font-size: 19px; letter-spacing: -.2px; margin: 0 0 8px; }
.svc-card__body { color: var(--muted-2); font-size: 14.5px; line-height: 1.55; margin: 0; flex: 1; }
.svc-card__meta { margin: 16px 0 18px; min-height: 26px; display: flex; align-items: center; }
.svc-card__price { font-size: 15px; font-weight: 700; color: var(--ink); }
.svc-tag {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  padding: 5px 11px; border-radius: 999px; background: var(--hero); color: var(--ink-2); border: 1px solid var(--line);
}
.svc-tag--free { background: #e7f4ea; color: #1f7a43; border-color: #c7e6d2; }

/* --- How it works --- */
.svc-steps { margin: clamp(40px, 7vw, 76px) 0 0; text-align: center; }
.svc-heading { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.4px; margin: 0 0 8px; }
.svc-subheading { color: var(--muted-2); margin: 0 auto 34px; max-width: 520px; }
.svc-steps__list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: none;
}
.svc-step { position: relative; padding: 8px 12px 0; }
.svc-step__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 999px; margin-bottom: 16px;
  background: var(--hero); color: var(--accent); border: 1px solid var(--line); position: relative;
}
.svc-step__icon .msym { font-size: 30px; }
.svc-step__num {
  position: absolute; top: -6px; right: -6px;
  width: 26px; height: 26px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff;
}
.svc-step__title { font-size: 17px; margin: 0 0 6px; }
.svc-step__body { color: var(--muted-2); font-size: 14px; line-height: 1.55; margin: 0; max-width: 300px; margin-inline: auto; }

/* --- Why us --- */
.svc-perks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
  margin: clamp(40px, 6vw, 68px) 0 clamp(48px, 7vw, 76px);
  padding: clamp(22px, 3vw, 30px); background: var(--hero); border: 1px solid var(--line); border-radius: 20px;
}
.svc-perk { display: flex; gap: 14px; align-items: flex-start; }
.svc-perk__icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--accent); border: 1px solid var(--line);
}
.svc-perk__icon .msym { font-size: 24px; }
.svc-perk__title { font-size: 15.5px; margin: 2px 0 3px; }
.svc-perk__body { color: var(--muted-2); font-size: 13.5px; line-height: 1.5; margin: 0; }

/* --- Closing CTA band --- */
.svc-cta { background: var(--dark); color: #fff; }
.svc-cta__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding: clamp(32px, 5vw, 52px) 24px;
}
.svc-cta__text { max-width: 640px; }
.svc-cta__title { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.3px; margin: 0 0 6px; }
.svc-cta__body { color: rgba(255,255,255,.72); margin: 0; font-size: 15px; }
.btn--light { background: #fff; color: var(--dark); }
.btn--light:hover { background: var(--hero); color: var(--dark); }
.btn--lg { padding: 15px 34px; font-size: 15.5px; }

@media (max-width: 600px) {
  .svc-br { display: none; }
  .svc-cta__inner { flex-direction: column; align-items: flex-start; }
  .svc-cta .btn { width: 100%; }
}

/* Cortinas: per-m² dimension inputs + live total + measurement guide. */
.curtain-dims { display: flex; gap: 12px; margin-bottom: 12px; }
.curtain-dims .field { flex: 1; margin: 0; }
.curtain-dims input { width: 100%; }
.curtain-total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.curtain-guide { max-width: 380px; margin-top: 14px; font-size: 14px; }
.curtain-guide__lead { margin: 0 0 10px; }
.curtain-guide__tips summary { cursor: pointer; font-weight: 700; }
.curtain-guide__tips ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted, #6b6b6b); }
.curtain-guide__tips li { margin-bottom: 6px; line-height: 1.45; }
.curtain-guide__cta { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--hero, #fbf4f1); }
/* Calculadora «¿Cuánto necesito?» (papel tapiz). Reusa .curtain-guide/.curtain-dims
   y sólo añade el recuadro del resultado. */
.wp-calc__box { margin-bottom: 12px; }
.wp-calc__out { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--hero, #fbf4f1); }
.wp-calc__rolls { display: block; font-size: 16px; }
.wp-calc__out .muted { display: block; margin-top: 2px; line-height: 1.45; }
.qty {
  margin-bottom: 14px;
}
.qty label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}
.qty input {
  width: 90px;
  padding: 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
}
.product-info__collections {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--muted-2);
}
.product-detail__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 24px 0;
  border-top: 0.25px solid var(--line-2);
}
.product-description h2,
.product-specs h2 {
  font-size: 20px;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
}
.spec-table th,
.spec-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 0.25px solid var(--line-2);
  font-size: 0.9rem;
}
.spec-table th {
  color: var(--muted-2);
  font-weight: 600;
  width: 42%;
}

/* --- Cart & checkout ----------------------------------------------------- */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  align-items: start;
}
.cart-table {
  width: 100%;
  border-collapse: collapse;
}
.cart-table th,
.cart-table td {
  text-align: left;
  padding: 12px 8px;
  border-bottom: 0.25px solid var(--line-2);
  font-size: 0.92rem;
  vertical-align: middle;
}
.cart-product {
  display: flex;
  gap: 12px;
  align-items: center;
}
.cart-product img,
.cart-product__ph {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--img-bg);
}
.cart-qty {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cart-qty input {
  width: 64px;
  padding: 7px 8px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
}
.cart-notes textarea,
.checkout-main textarea,
.field textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font-family: inherit;
}
.cart-notes {
  margin-top: 16px;
}
.cart-summary,
.checkout-summary .form-card {
  position: sticky;
  top: 90px;
}
.cart-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  background: #fff;
}
.cart-summary h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.92rem;
}
.summary-row--total {
  border-top: 0.25px solid var(--line-2);
  margin-top: 6px;
  padding-top: 12px;
  font-weight: 700;
  font-size: 1.05rem;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  padding: 4px 0;
  color: var(--ink-2);
}
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
  align-items: start;
}

/* --- Forms (shared) ------------------------------------------------------ */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  margin-bottom: 18px;
}
.form-card h2 {
  margin: 0 0 14px;
  font-size: 1.1rem;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field {
  display: block;
  margin-bottom: 14px;
}
.field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(185, 74, 61, 0.12);
}
.field--full {
  grid-column: 1 / -1;
}
.field__error {
  color: var(--accent);
  font-size: 0.78rem;
  margin-top: 3px;
  display: block;
}
.field__hint {
  font-size: 0.78rem;
  color: var(--muted-3);
  margin-top: 4px;
  display: block;
}
.check-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.check-inline input {
  accent-color: var(--accent);
}
.confirm-hero {
  text-align: center;
  margin-bottom: 24px;
}
.confirm-hero h1 {
  margin: 0 0 8px;
}

/* --- Auth panel / static page ------------------------------------------- */
.auth-panel {
  max-width: 440px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px;
}
.auth-panel h1 {
  margin: 0 0 18px;
  font-size: 1.6rem;
  font-weight: 800;
}
.auth-panel__links {
  margin-top: 16px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted-2);
}
.auth-panel__links a {
  color: var(--accent);
  font-weight: 600;
}
.quote-request {
  max-width: 760px;
  margin: 0 auto;
}
.static-page {
  max-width: 760px;
  margin: 0 auto;
}
.static-page h1 {
  margin-bottom: 18px;
  font-weight: 800;
}
.static-page__body {
  line-height: 1.75;
  color: var(--ink-2);
}
.static-page__body h2 {
  margin-top: 26px;
  font-size: 1.3rem;
}
.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.pill--active {
  background: #e7f4ea;
  color: #1e7a46;
}
.pill--draft {
  background: #edebe7;
  color: var(--muted-2);
}
.pill--archived {
  background: #edebe7;
  color: var(--muted-3);
}

/* --- Account ------------------------------------------------------------- */
.account-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
}
.account-nav {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  position: sticky;
  top: 90px;
}
.account-nav__hi {
  font-size: 0.95rem;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 0.25px solid var(--line-2);
}
.account-nav nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.account-nav nav a {
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.account-nav nav a:hover {
  background: var(--blush);
}
.account-nav nav a.is-active {
  background: var(--accent);
  color: #fff;
}
.account-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.account-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  font-size: 0.88rem;
  color: var(--muted-2);
}
.account-card__value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
}
.address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.address-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  font-size: 0.9rem;
}
.address-card__label {
  font-weight: 700;
  margin-bottom: 4px;
}
.row-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* --- Flash --------------------------------------------------------------- */
.flash,
.alert {
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.flash-stack {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flash--success {
  background: #e7f4ea;
  color: #1e7a46;
  border: 1px solid #bee6c8;
}
.flash--error,
.alert--error {
  background: #fbe9e7;
  color: var(--accent);
  border: 1px solid #f2cfc9;
}
.flash--info {
  background: var(--blush);
  color: var(--announce-ink);
  border: 0.25px solid var(--line-3);
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--muted);
  padding: 46px 0 26px;
  border-top: 0.25px solid var(--line-3);
  margin-top: 40px;
}
.footer-grid {
  /* Flex + wrap so the footer adapts to however many link columns the `footer`
     menu defines (Shopify-style), instead of a fixed column count. */
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 0.25px solid var(--line-3);
}
.footer-col { flex: 1 1 150px; }
.footer-col--brand { flex: 1.6 1 240px; }
.footer-col h4 {
  font-size: 14px;
  margin: 0 0 10px;
  color: var(--ink);
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 8px;
  font-size: 13.5px;
}
.footer-brand {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
}
.footer-muted {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 280px;
}
.footer-form {
  display: flex;
  gap: 8px;
}
.footer-form input {
  flex: 1;
  padding: 11px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: #fff;
}
.footer-contact {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.8;
}
.footer-social {
  margin-top: 12px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.footer-social a {
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
  display: inline-flex;
  opacity: .9;
  transition: opacity .15s ease, transform .15s ease;
}
.footer-social a:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.footer-social a img {
  height: 24px;
  width: 24px;
  display: block;
}
/* Accepted-card logos (checkout payment options) */
.pay-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pay-cards img {
  height: 26px;
  width: auto;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
/* Accepted payment methods */
.footer-payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  margin-top: 22px;
}
.footer-payments img {
  height: 28px;
  width: auto;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.footer-copy {
  padding-top: 18px;
  font-size: 12.5px;
  color: var(--muted-3);
}

/* --- Errors -------------------------------------------------------------- */
.error-page {
  text-align: center;
  padding: 40px 0;
}
.error-page h1 {
  font-size: 3rem;
  margin: 0 0 8px;
}
.error-detail {
  text-align: left;
  background: #f6f6f6;
  padding: 16px;
  border-radius: 8px;
  overflow: auto;
  font-size: 0.82rem;
}

/* --- Responsive tables (auto-wrapped in .table-scroll by public.js) ------- */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .hero,
  .product-detail__grid,
  .product-detail__body,
  .cart-layout,
  .checkout-layout,
  .account-layout {
    grid-template-columns: 1fr;
  }
  .listing__layout {
    grid-template-columns: 1fr;
  }
  .hero__inner {
    padding: 40px 28px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cart-summary,
  .checkout-summary .form-card,
  .account-nav {
    position: static;
  }
}

/* Off-canvas mobile navigation drawer */
@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex;
  }
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    height: 100vh;
    width: 300px;
    max-width: 84vw;
    margin: 0;
    border-top: none;
    background: #fff;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 0 0 24px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.5);
  }
  .main-nav.is-open {
    transform: translateX(0);
  }
  .main-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 0.25px solid var(--line-2);
  }
  .main-nav__title {
    font-weight: 800;
    font-size: 16px;
  }
  .nav-close {
    display: inline-flex;
  }
  /* Nested menu as a vertical accordion inside the drawer */
  .nav-menu--l1 {
    flex-direction: column;
    gap: 0;
  }
  .nav-item {
    border-bottom: 0.25px solid var(--line-2);
  }
  .nav-link {
    display: flex;
    flex: 1;
    padding: 13px 20px;
  }
  .nav-item.has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .nav-item.has-children > .nav-expand {
    padding: 13px 18px;
    margin-left: auto;
  }
  .nav-item.has-children > .nav-expand .msym {
    font-size: 22px;
  }
  .nav-item.is-open > .nav-expand .msym {
    transform: rotate(180deg);
  }
  .nav-menu--l2,
  .nav-menu--l3 {
    flex-basis: 100%;
    display: none;
    background: var(--line-1, #f7f5f1);
  }
  .nav-item.is-open > .nav-menu {
    display: block;
  }
  /* Mega panel collapses to a stacked accordion section in the drawer */
  .nav-mega {
    flex-basis: 100%;
    display: none;
    background: var(--line-1, #f7f5f1);
    padding: 6px 20px 12px;
  }
  .nav-item.is-open > .nav-mega {
    display: block;
  }
  .nav-mega__img {
    display: none;
  }
  .nav-mega__col {
    padding: 6px 0;
    border-top: 0.25px solid var(--line-2);
  }
  .nav-mega__col:first-child {
    border-top: none;
  }
  .nav-mega__list a {
    padding-left: 14px;
  }
  .nav-menu--l2 .nav-link {
    padding-left: 34px;
    font-weight: 500;
  }
  .nav-menu--l3 .nav-link {
    padding-left: 48px;
  }
  .nav-menu--l2 .nav-item,
  .nav-menu--l3 .nav-item {
    border-bottom: none;
    border-top: 0.25px solid var(--line-2);
  }
  .main-nav__extra {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    border-top: 0.25px solid var(--line-2);
  }
  .main-nav__extra a {
    padding: 13px 20px;
  }
  .main-nav__extra a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
  }
  .main-nav__extra .msym {
    font-size: 20px;
  }
}
@media (min-width: 761px) {
  .nav-backdrop {
    display: none !important;
  }
  .main-nav {
    transform: none !important;
  }
}

@media (max-width: 620px) {
  .site-header__row {
    grid-template-columns: auto 1fr auto;
    padding: 14px 16px 0;
  }
  .site-header__label {
    display: none;
  }
  .site-header .brand-logo {
    height: 36px;
  }
  .container {
    padding: 0 16px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .hero__title {
    font-size: 34px;
  }
  .listing__title {
    font-size: 26px;
  }
  .product-info__title {
    font-size: 26px;
  }
  .section__title {
    font-size: 22px;
  }
  .newsletter-band__form {
    flex-direction: column;
  }
  .add-to-cart {
    max-width: none;
  }
  .btn {
    padding: 12px 22px;
  }
}

/* --- Newsletter band ----------------------------------------------------- */
.newsletter-band {
  background: var(--blush);
  padding: 52px 0;
  text-align: center;
  margin-top: 8px;
}
.newsletter-band h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
}
.newsletter-band p {
  color: var(--muted-2);
  font-size: 15px;
  margin: 0 auto 22px;
  max-width: 480px;
}
.newsletter-band__form {
  display: flex;
  gap: 8px;
  max-width: 440px;
  margin: 0 auto;
}
.newsletter-band__form input {
  flex: 1;
  background: #fff;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
}

/* --- Proyectos / obras (installation showcase) --------------------------- */
.section__sub {
  text-align: center;
  color: var(--muted-2);
  font-size: 15px;
  margin: -16px 0 24px;
}
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 26px;
}
.chip {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted-2);
  background: #fff;
}
.chip:hover {
  border-color: var(--dark);
  color: var(--dark);
}
.chip.is-active {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.project-card {
  display: block;
  color: inherit;
}
.project-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--img-bg);
  border-radius: 3px;
  overflow: hidden;
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.project-card:hover .project-card__media img {
  transform: scale(1.03);
}
.project-card__body {
  padding: 12px 2px 4px;
}
.project-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.project-card__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--muted-3);
  margin-top: 4px;
}
.project-card__meta .msym {
  font-size: 15px;
}

/* --- Appointment slot picker (public /agendar) --------------------------- */
.appt-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin: 8px 0 4px;
}
.slot-opt {
  position: relative;
}
.slot-opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.slot-opt span {
  display: block;
  text-align: center;
  padding: 9px 6px;
  border: 1px solid var(--line, #e3e3e1);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.slot-opt input:checked + span {
  border-color: var(--accent, #c15b4e);
  background: var(--accent-soft, #fbedea);
  font-weight: 600;
}
.slot-opt input:focus-visible + span {
  outline: 2px solid var(--accent, #c15b4e);
  outline-offset: 1px;
}
@media (max-width: 560px) {
  .appt-picker {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Skeleton de carga de imágenes
   ----------------------------------------------------------------------------
   El destello va DETRÁS de la imagen (::before, z-index 0; la <img> va encima
   con z-index 1). Eso lo hace seguro sin JavaScript: mientras la imagen no
   tiene datos no pinta nada y se ve el destello; en cuanto carga, la tapa. El
   JS (public.js#initImageSkeletons) sólo añade .is-loaded para DETENER la
   animación — nunca es lo que hace visible la imagen, así que con JS bloqueado
   la página sigue perfecta.

   La caja contenedora ya tiene aspect-ratio en todos los casos, así que no hay
   salto de maquetación (CLS) cuando la imagen aparece.
   ========================================================================== */
.img-skeleton {
  position: relative;
}

.img-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.035) 20%,
    rgba(0, 0, 0, 0.085) 45%,
    rgba(0, 0, 0, 0.035) 70%
  );
  background-size: 220% 100%;
  animation: img-skeleton-sweep 1.3s ease-in-out infinite;
}

.img-skeleton > img {
  position: relative;
  z-index: 1;
  /* Oculta hasta que la imagen esté COMPLETA. Sin esto el navegador la va
     pintando en bandas de arriba abajo conforme llegan los bytes (se veía como
     "carga por trozos" en el hero). Con esto se ve el destello y luego la foto
     entera de golpe. public.js#initImageSkeletons pone .is-loaded al terminar,
     con un plazo de seguridad por si algo fallara; y el <noscript> del layout
     lo anula entero para quien no tenga JavaScript. */
  opacity: 0;
  transition: opacity 0.32s ease;
  /* Red de seguridad SIN JavaScript: si por lo que sea .is-loaded no llegara
     nunca (error de red al cargar public.js, excepción en otro script), esta
     animación revela la imagen igualmente a los 6 s. Una imagen jamás puede
     quedarse invisible por culpa del efecto de carga. */
  animation: img-skeleton-failsafe 1ms linear 6s forwards;
}

.img-skeleton.is-loaded > img {
  opacity: 1;
  animation: none;
}

@keyframes img-skeleton-failsafe {
  to { opacity: 1; }
}

/* Cargada: se retira el destello (y su animación deja de consumir CPU). */
.img-skeleton.is-loaded::before {
  content: none;
}

@keyframes img-skeleton-sweep {
  0%   { background-position: 180% 0; }
  100% { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .img-skeleton::before { animation: none; }
  .img-skeleton > img { transition: none; }
}

/* ===========================================================================
   Buscador de la tienda: capa con sugerencias en vivo
   Ver documentacion/busqueda.md
   =========================================================================== */

.searchbox { position: fixed; inset: 0; z-index: 60; }
.searchbox[hidden] { display: none; }
body.search-open { overflow: hidden; }
.searchbox__backdrop { position: absolute; inset: 0; background: rgba(29, 27, 24, .42); }
.searchbox__panel {
  position: relative; background: var(--paper); max-width: 720px; margin: 0 auto;
  max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5);
}
.searchbox__form {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.searchbox__icon { font-size: 22px; color: var(--muted); flex: 0 0 auto; }
.searchbox__input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 17px; color: var(--ink); padding: 6px 0;
}
.searchbox__input::placeholder { color: var(--muted-3); }
.searchbox__input::-webkit-search-cancel-button { display: none; }
.searchbox__close {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; color: var(--muted);
  display: inline-flex; padding: 4px; border-radius: 50%;
}
.searchbox__close:hover { color: var(--ink); background: var(--hero); }

.searchbox__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 0 14px; }
.searchbox__head {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-3);
}
.searchbox__clear {
  margin-left: auto; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted-3);
}
.searchbox__clear:hover { color: var(--accent); }
.searchbox__msg { padding: 10px 18px; margin: 0; color: var(--muted); font-size: 14.5px; }
.searchbox__msg--tip { font-size: 13.5px; color: var(--muted-3); padding-top: 0; }

.searchbox__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 10px; }
.searchbox__chip {
  border: 1px solid var(--field-border); background: var(--paper); border-radius: 999px;
  padding: 7px 15px; font-family: inherit; font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.searchbox__chip:hover { border-color: var(--accent); color: var(--accent); background: var(--hero); }

.searchbox__products { display: flex; flex-direction: column; }
.searchbox__product {
  display: flex; align-items: center; gap: 13px; padding: 9px 18px;
  text-decoration: none; color: var(--ink); border-left: 3px solid transparent;
}
.searchbox__product:hover, .searchbox__product.is-active { background: var(--hero); border-left-color: var(--accent); }
.searchbox__thumb {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--radius);
  background: var(--img-bg, #f2efea); overflow: hidden; display: block;
}
.searchbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.searchbox__pbody { min-width: 0; flex: 1 1 auto; }
.searchbox__ptitle { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.searchbox__pprice { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.searchbox__pwas { color: var(--muted-3); }
.searchbox__pdeal {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0 7px;
}

.searchbox__link {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 18px;
  text-decoration: none; color: var(--ink); border-left: 3px solid transparent;
}
.searchbox__link:hover, .searchbox__link.is-active { background: var(--hero); border-left-color: var(--accent); }
.searchbox__ltitle { font-size: 14.5px; font-weight: 500; }
.searchbox__lsub { font-size: 13px; color: var(--muted-3); }

.searchbox__all {
  display: block; margin: 10px 18px 0; padding: 12px; text-align: center;
  background: var(--dark); color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 600; border-radius: var(--radius);
}
.searchbox__all:hover { background: var(--accent); }
.searchbox__all.is-active { background: var(--accent); }

@media (min-width: 761px) {
  .searchbox__panel { margin-top: 8vh; border-radius: var(--radius); }
}
@media (max-width: 760px) {
  .searchbox__panel { max-height: 100vh; height: 100%; }
  .searchbox__thumb { width: 46px; height: 46px; }
}

/* Estado vacío de la página de resultados. */
.listing__empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.listing__empty-chip {
  border: 1px solid var(--field-border); border-radius: 999px; padding: 7px 15px;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
}
.listing__empty-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--hero); }
.listing__relaxed { font-size: 13.5px; color: var(--muted); margin: -4px 0 14px; }

/* ===== Support tickets (customer + distributor, shared) ==================== */
.support-list { width:100%; border-collapse:collapse; }
.support-list th, .support-list td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); font-size:14px; }
.support-list th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.support-chip { display:inline-block; font-size:12px; font-weight:600; border-radius:999px; padding:2px 9px; background:#eee; color:#555; margin-right:6px; }
.support-chip--active { background:#e7eef9; color:#3b5ba4; }
.support-chip--ok { background:#e7f3ec; color:#2f7d4f; }
.support-chip--warn { background:#fdf2e2; color:#b4741a; }
.support-chip--muted { background:#eee; color:#888; }
.support-unread { background:var(--accent); color:#fff; border-radius:999px; font-size:11px; padding:1px 7px; font-weight:700; }
.support-thread__meta { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.support-thread__date { color:var(--muted-3); font-size:12.5px; margin-left:auto; }
.support-messages { display:flex; flex-direction:column; gap:12px; }
.support-msg { max-width:78%; padding:10px 14px; border-radius:12px; border:1px solid var(--line); }
.support-msg--me { align-self:flex-end; background:var(--hero); }
.support-msg--them { align-self:flex-start; background:#fff; }
.support-msg__head { font-size:12px; color:var(--muted); margin-bottom:4px; }
.support-msg__body { white-space:pre-wrap; line-height:1.5; }
.support-msg__imgs { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.support-msg__imgs img { width:80px; height:80px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.support-reply { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.support-reply textarea { width:100%; padding:10px 12px; border:1px solid var(--field-border); border-radius:8px; font:inherit; }
.support-reply__row { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.support-attach { display:inline-flex; align-items:center; gap:5px; cursor:pointer; color:var(--muted); font-size:13.5px; }

/* ===== Support UI redesign (cards + filters + empty state) ================ */
.support-search { display:flex; gap:8px; margin:14px 0 10px; }
.support-search input { flex:1; padding:9px 12px; border:1px solid var(--field-border); border-radius:8px; font:inherit; }
.support-filters { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 18px; }
.support-filter { border:1px solid var(--field-border); background:#fff; color:var(--ink); border-radius:999px; padding:5px 13px; font-size:13px; font-weight:600; }
.support-filter:hover { border-color:var(--ink); }
.support-filter.is-active { background:var(--ink); color:#fff; border-color:var(--ink); }
.support-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.support-card { display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; transition:box-shadow .15s, transform .15s; }
.support-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-1px); }
.support-card__top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.support-card__num { font-weight:800; color:var(--muted); font-size:12.5px; letter-spacing:.02em; }
.support-card__subject { font-weight:600; font-size:15px; line-height:1.35; color:var(--ink); }
.support-card__meta { color:var(--muted); font-size:12.5px; margin-top:6px; }
.support-empty { text-align:center; padding:48px 20px; color:var(--muted); background:#fff; border:1px dashed var(--field-border); border-radius:14px; }
.support-empty .msym { font-size:44px; color:var(--muted-3); }
.support-empty p { margin:10px 0 16px; }

/* --- Lupa de imagen (ficha de producto) ----------------------------------- */
/* Mismo patrón que .searchbox: capa fija, se muestra quitando [hidden] desde
   public/js/image-zoom.js. Sin JavaScript nunca aparece. */
.imgzoom {
  position: fixed;
  inset: 0;
  z-index: 70; /* por encima del buscador (60), por debajo del drawer móvil */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.imgzoom[hidden] { display: none; }
.imgzoom__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, 0.88);
}
.imgzoom__panel {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.imgzoom__img {
  max-width: 100%;
  /* Deja sitio para el pie; sin esto la foto desborda en pantallas bajas. */
  max-height: calc(100vh - 110px);
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.imgzoom__hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13.5px;
  text-align: center;
}
.imgzoom__close {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.imgzoom__close:hover { background: var(--dark); color: #fff; }
body.imgzoom-open { overflow: hidden; }

/* Botón de lupa sobre la imagen principal. Lo inyecta el JS, así que sin
   JavaScript este estilo simplemente no se usa. */
.product-gallery__main { position: relative; }
.product-gallery__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--dark);
  cursor: zoom-in;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-gallery__zoom:hover { background: #fff; border-color: var(--dark); }

@media (max-width: 560px) {
  .imgzoom { padding: 12px; }
  .imgzoom__close { top: 2px; right: 2px; }
}

/* --- Facetas del listado -------------------------------------------------- */
/* Enlaces, no casillas: filtrar funciona sin JavaScript y cada combinación
   tiene URL propia. Reutiliza el aspecto de .chip ya existente. */
.facet-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.facet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--dark);
  background: #fff;
}
.facet:hover { border-color: var(--dark); }
.facet.is-active {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
.facet__n {
  font-size: 11.5px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.facet.is-active .facet__n { color: rgba(255, 255, 255, 0.72); }

.applied-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.applied-filters__label {
  font-size: 13px;
  color: var(--muted-2);
}
.applied-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--soft, #f3f0ed);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--dark);
}
.applied-filter:hover {
  border-color: var(--dark);
  background: #fff;
}
.applied-filters__clear {
  font-size: 13px;
  color: var(--muted-2);
  text-decoration: underline;
}

/* --- Código de descuento en el carrito ------------------------------------ */
.cart-discount {
  margin: 10px 0 4px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.cart-discount > summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--muted-2);
  list-style: none;
}
.cart-discount > summary::-webkit-details-marker { display: none; }
.cart-discount > summary::before { content: '+ '; }
.cart-discount[open] > summary::before { content: '– '; }
.cart-discount > summary:hover { color: var(--dark); }
.cart-discount__form {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.cart-discount__form input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
}
.cart-discount__hint {
  font-size: 12px;
  margin: 6px 0 0;
}