/** Shopify CDN: Minification failed

Line 211:33 Unexpected "*"

**/
/* Muser Boutique — global overrides on top of Horizon's own design-token
   system (settings_data.json already carries the Muser color palette,
   Fraunces/Work Sans fonts, and sharp-edge radii — see config/settings_data.json).
   This file only adds what Horizon's 4-role color_palette has no slot for. */

/* html:root (not a bare :root) is deliberate: Horizon's own
   snippets/theme-styles-variables.liquid defines --color-error/--color-success
   too (native defaults #8B0000/#006400, a generic dark red/green — nothing to
   do with Muser's palette), also on a bare :root, and it's injected later in
   <head> than this file. Same specificity + later source order meant the
   native values silently won every time, so the "Muser" reds/greens below
   were never actually reaching the page — found 2026-08-16 while checking why
   a brand-new icon came out native dark-green instead of the intended sage.
   The extra "html" type selector is the minimal fix: wins regardless of load
   order, no need to rename every var(--color-error)/var(--color-success)
   usage already written against these names. */
html:root {
  /* Semantic colors Horizon's palette (background/foreground/color1/color2)
     doesn't cover — kept as their own tokens, same values as the original
     Impulse-based build. */
  --color-accent: #3C4A47;
  --color-sand: #C9B9A3;
  --color-error: #8C4A3D;
  --color-success: #5C6B4F;
  --color-muted: #6E6858;
  --color-border: #E5E1D8;
  --color-lowstock: var(--color-error);
  --tracking-label: 0.08em;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --radius-pill: 999px;
}

/* Low-stock line in the brand's urgency tone (real stock counts only — see
   PROJECT_STATUS.md "Stock real por variante"), matching the icon's own
   --color-lowstock token since Horizon doesn't color the text span itself. */
.product-inventory__status:has(.product-inventory__icon-low) .product-inventory__text {
  color: var(--color-error);
}

/* Sale price: ink, not red (changed 2026-10-03). It used to render in
   --color-error, inherited from the old "Liquidación Final" framing, which
   put a red price on every reduced product across the whole store. Red is the
   discount-retailer signal and it was working directly against the premium
   positioning. The struck-through comparison price in --color-muted already
   communicates the reduction on its own; the live price does not need to
   shout as well.

   Horizon's real classes (confirmed by reading snippets/product-card.liquid
   and blocks/price.liquid): .price-item--sale / .compare-at-price. */
.price-item--sale,
.price__sale .price {
  color: var(--color-foreground);
}
.compare-at-price,
.price-item--regular.compare-at-price {
  color: var(--color-muted);
  text-decoration: line-through;
  /* Thinner rule than the browser default so the struck price reads as a
     quiet reference rather than a cancelled one. */
  text-decoration-thickness: 1px;
  text-underline-offset: 0;
}

/* Product page: white background for the whole page, distinct from the
   cream (--color-background) used everywhere else on the site. The
   product-information and product-recommendations sections already carry
   their own explicit #FFFFFF background_color (templates/product.json);
   this covers the rest of the page canvas (e.g. the volume-discounts
   section, which has no background setting of its own and would otherwise
   show whatever's behind it) — `data-template` is a native Horizon
   attribute on <main>, no vendor file edited to add it. */
main[data-template='product'] {
  background-color: #FFFFFF;
}

/* Wishlist heart — client-side only (muser-motion.js, localStorage), same
   button on every product card everywhere (snippets/product-card.liquid is
   Horizon's single universal card render point). */
product-card {
  position: relative;
}
.muser-wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 245, 240, 0.85);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
product-card:hover .muser-wishlist-btn,
.muser-wishlist-btn.is-active {
  opacity: 1;
  transform: translateY(0);
}
.muser-wishlist-btn__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-foreground);
  stroke-width: 1.5;
  transition: fill 200ms ease, stroke 200ms ease;
}
.muser-wishlist-btn.is-active .muser-wishlist-btn__icon {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}
@media only screen and (max-width: 768px) {
  .muser-wishlist-btn {
    opacity: 1;
    transform: none;
  }
}

/* Real estimated delivery line on the product page — plain, no countdown,
   no invented numbers, matches the free-shipping threshold used in the
   footer newsletter band. */
.muser-delivery-estimate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.muser-delivery-estimate__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}
.muser-delivery-estimate__text {
  color: var(--color-foreground);
}
.muser-delivery-estimate__sep {
  color: var(--color-border);
}

/* Free-shipping line (cart drawer + full cart page). Rewritten 2026-10-03:
   was a progress bar toward a 100 EUR threshold, which contradicted the
   published policy of free shipping on every order -- see
   snippets/muser-shipping-bar.liquid for the reasoning. Also moved off the
   pure #000/#fff it used to hard-code onto the brand's ink/cream tokens, and
   off --radius-pill, since every other corner in this store is square. */
.muser-shipping-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background-color: var(--color-foreground);
}
.muser-shipping-bar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-background);
  stroke-width: 1.25;
}
.muser-shipping-bar__label {
  margin: 0;
  font-family: var(--font-body--family);
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-background);
}

/* Cart reservation countdown — real timer (localStorage), never auto-empties
   the cart at zero. */
.muser-cart-timer {
  background-color: var(--color-foreground);
  color: var(--color-background);
  text-align: center;
  padding: 8px 16px;
}
.muser-cart-timer__text {
  font-family: var(--font-body--family);
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-label);
  margin: 0;
}
.muser-cart-timer__text span {
  font-variant-numeric: tabular-nums;
  color: var(--color-sand);
}

/* Premium cart drawer redesign (2026-08-27): serif header to match the rest
   of the site's Fraunces/Work Sans system, bigger framed product photos,
   more breathing room between line items, and a heavier/tracked checkout
   CTA. Scoped to #cart-drawer (the drawer's own <theme-drawer> id) so none
   of this bleeds into the search/filter drawers, which reuse the exact same
   .theme-drawer__*/.cart-items__* vendor classes — confirmed by reading
   snippets/theme-drawer-header.liquid and snippets/cart-products.liquid. */
#cart-drawer .theme-drawer__header {
  padding-block: 24px 18px;
  border-bottom: var(--style-border-width) solid var(--color-border);
}
#cart-drawer .theme-drawer__title {
  font-family: var(--font-heading--family);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}
#cart-drawer .theme-drawer__badge {
  background-color: var(--color-accent);
  color: var(--color-background);
}

/* Bigger, framed thumbnails — vendor hardcodes clamp(2.5rem, 15cqi, 7.5rem)
   directly in grid-template-columns (not via a custom property), so the
   column width has to be restated here rather than overridden through a
   variable. Only the mobile/drawer-width grid is touched: the drawer is
   narrower than the 720px the vendor's @container query needs to switch to
   the desktop 4-column layout, so that variant never applies inside it. */
#cart-drawer .muser-cart-timer + .cart-drawer__items {
  padding-top: 20px;
}
#cart-drawer .cart-items__table-row {
  grid-template-columns: clamp(5.5rem, 30cqi, 9.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
  padding-bottom: 28px;
  margin-bottom: 28px;
}
#cart-drawer .cart-items__table-row--full-width-variants {
  grid-template-columns: clamp(5.5rem, 30cqi, 9.5rem) minmax(0, 1fr) auto;
}
#cart-drawer .cart-items__media-container {
  border: var(--style-border-width) solid var(--color-border);
}
#cart-drawer .cart-items__title {
  font-family: var(--font-heading--family);
  font-size: 1.0625rem;
}
#cart-drawer .cart-items__remove {
  opacity: 0.5;
  transition: opacity var(--dur-base) var(--ease);
}
#cart-drawer .cart-items__remove:hover {
  opacity: 1;
}

/* Summary/CTA: tracked uppercase label + serif total, same treatment as the
   shipping-bar label before it, and a taller checkout button so it reads as
   the one deliberate action at the bottom of the drawer. */
#cart-drawer .cart-totals__total-label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-muted);
}
#cart-drawer .cart-totals__total-value {
  font-family: var(--font-heading--family);
  font-size: 1.625rem;
}
#cart-drawer .cart__checkout-button {
  height: 56px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Marquee promo bar — deliberately pure black/white/red, a promo-strip
   accent distinct from the quiet-luxury palette used everywhere else. Pure
   CSS scroll animation; JS only updates the countdown digits once a second. */
.muser-marquee {
  background: #000;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 10;
}
.muser-marquee__track {
  display: flex;
  width: max-content;
  animation: muser-marquee-scroll var(--muser-marquee-duration, 30s) linear infinite;
  will-change: transform;
}
.muser-marquee__group {
  display: flex;
  flex-shrink: 0;
}
.muser-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  font-family: var(--font-body--family);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.muser-marquee__countdown-label {
  opacity: 0.7;
  margin-left: 8px;
}
.muser-marquee__countdown {
  color: #ff3b30;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
}
@keyframes muser-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .muser-marquee__track {
    animation: none;
    transform: translateX(0);
  }
  .muser-marquee__group[aria-hidden='true'] {
    display: none;
  }
}
@media screen and (max-width: 749px) {
  .muser-marquee__item {
    padding: 8px 24px;
    font-size: 11px;
  }
}

/* Volume discount cards (product page, display-only). Rounded corners +
   shadow are a deliberate exception to the sharp-edge system. */
.muser-volume-discounts {
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 64px var(--page-margin, 24px);
  text-align: center;
}
.muser-volume-discounts__heading {
  font-family: var(--font-heading--family);
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  max-width: 40em;
  margin: 0 auto 32px;
}
.muser-volume-discounts__heading p {
  margin: 0;
}
.muser-volume-discounts__grid {
  display: grid;
  grid-template-columns: repeat(var(--tier-count, 4), 1fr);
  gap: 16px;
}
.muser-volume-discounts__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(26, 24, 21, 0.08);
  padding: 32px 16px;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.muser-volume-discounts__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(26, 24, 21, 0.14);
}
.muser-volume-discounts__card.is-highlighted {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
  color: var(--color-background);
}
.muser-volume-discounts__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.muser-volume-discounts__percent {
  font-family: var(--font-heading--family);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1;
}
.muser-volume-discounts__label {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.muser-volume-discounts__card.is-highlighted .muser-volume-discounts__label {
  color: var(--color-sand);
}
.muser-volume-discounts__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.muser-volume-discounts__note p {
  margin: 0;
}
.muser-volume-discounts__note b {
  color: var(--color-foreground);
  font-weight: 700;
}
.muser-volume-discounts__check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-success);
}
@media screen and (max-width: 989px) {
  .muser-volume-discounts__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media screen and (max-width: 480px) {
  .muser-volume-discounts__percent {
    font-size: 1.5rem;
  }
  .muser-volume-discounts__card {
    padding: 24px 12px;
  }
}

/* Footer is intentionally dark (ink background, cream text) — the utilities
   band (copyright/policies/social) has no per-section text-color setting of
   its own in Horizon, so it's forced here rather than left inheriting the
   site-wide (dark) page_text_color, which would be invisible on this bg. */
#shopify-section-footer_utilities_jLGE8U,
#shopify-section-footer_utilities_jLGE8U a {
  color: var(--color-background);
}

/* Product description accordion — "Ideal para" / "Detalles de diseño" /
   "Cómo combinarlo" turned into collapsible rows by
   assets/muser-description-accordion.js, built from the exact same
   <strong>Label:</strong> paragraphs already in the product description.
   Font/color intentionally not redeclared here — inherits from the
   surrounding .text-block--text_aEtTtq.rte container. */
.muser-accordion-group {
  width: 100%;
  border-top: 1px solid var(--color-border);
}

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

.muser-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding-block: 14px;
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.muser-accordion__icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-muted);
  transition: color var(--dur-base) var(--ease);
}

.muser-accordion__trigger[aria-expanded='true'] .muser-accordion__icon {
  color: var(--color-accent);
}

.muser-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  /* 240ms, not --dur-slow (420ms): a disclosure is a direct response to a tap
     and 420ms reads as lag on the thing the visitor is watching. The
     0fr -> 1fr grid technique does animate a layout property, which is a
     deliberate trade-off kept from the original implementation -- it is the
     only approach that animates to auto height without JS measurement and
     with Safari/iOS support, which interpolate-size still lacks. */
  transition: grid-template-rows 240ms var(--ease);
}

.muser-accordion__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.muser-accordion__panel-inner p {
  margin: 0;
  padding-block-end: 16px;
  color: var(--color-muted);
  line-height: 1.6;
}

.muser-accordion[data-open='true'] .muser-accordion__panel {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .muser-accordion__panel {
    transition: none;
  }
}

/* Size guide popup (blocks/muser-size-guide.liquid). The dialog/animation
   itself reuses Horizon's native .popup-link / dialog-component classes —
   only the trigger link and the table need their own rules. */
.muser-size-guide__trigger {
  display: inline-block;
  padding: 0;
  margin-block-start: 6px;
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.muser-size-guide__trigger:hover {
  color: var(--color-accent);
}

.muser-size-guide__note,
.muser-size-guide__tip {
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-block: 8px 20px;
}

.muser-size-guide__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.muser-size-guide__table th,
.muser-size-guide__table td {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.muser-size-guide__table th:first-child,
.muser-size-guide__table td:first-child {
  text-align: left;
  font-weight: 600;
}

.muser-size-guide__table thead th {
  font-weight: 600;
  border-bottom: 1px solid var(--color-foreground);
}

/* Hide the quantity stepper on the product page buy box — Horizon renders
   .quantity-selector-wrapper unconditionally from buy-buttons.liquid (a
   content_for 'block' with a hardcoded type/id) regardless of whether the
   "quantity" block entry exists in the template JSON, so removing it from
   product.json/product.bolso-negro.json alone doesn't hide it — CSS is the
   only lever without editing vendor Liquid. Scoped to .product-form-buttons
   (the buy-buttons block's own wrapper, product page only) rather than a
   bare/global selector — a first version of this rule targeted the class
   sitewide and, since cart-products.liquid renders the exact same
   quantity-selector snippet for cart line-item quantities, it silently also
   hid the quantity stepper on every cart line item. Caught 2026-08-16 when
   checking the cart drawer for an unrelated change — fixed by scoping here.
   Two classes (0,0,2,0) already outranks the compiled_assets/styles.css
   native rule on the bare class, no extra specificity trick needed. */
.product-form-buttons .quantity-selector-wrapper {
  display: none;
}

/* Hide "Más opciones de pago" on the product page buy box — replaced visually
   by muser_payment_icons, which sits right after this in block_order so it
   fills the same spot once this link's line is gone. This is Shopify's own
   link (rendered by the `payment_button` filter inside blocks/accelerated-
   checkout.liquid, class name it assigns itself), not theme content — it
   can't be edited or removed from the JSON, only hidden. Scoped to
   .product-form-buttons so it doesn't touch the cart, which uses a different
   mechanism (<shopify-accelerated-checkout-cart>, no matching class) anyway,
   but the scope is kept narrow on purpose in case that ever changes. */
.product-form-buttons .shopify-payment-button__more-options {
  display: none;
}

/* Tax/duties note in the cart drawer and cart page -- native text from
   snippets/tax-info.liquid, rendered inside cart-summary.liquid (vendor).
   This used to be `display: none`. Hiding it removed price-transparency
   information that consumer distance-selling rules in Spain expect the
   customer to see before paying, so it is visible again (restored
   2026-10-03). Instead of removing it, it is set as quiet secondary type so
   it sits under the total without competing with it. */
.cart-totals__item.cart-totals__tax-note {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-muted);
}


/* ---------------------------------------------------------------------------
   Sticky add-to-cart bar, mobile (added 2026-10-03)

   Horizon's own mobile rules for this bar hide the button's label
   (`.add-to-cart-text__content { display: none }` in
   sections/product-information.liquid) and shrink the button to a square
   icon (`width: var(--height-buy-buttons)`). Two problems with that on a
   phone, which is where nearly all of this store's traffic lands:

   1. The primary conversion action becomes an unlabelled icon.
   2. The only text naming the action sits inside that `display: none` span,
      so it is removed from the accessibility tree too and the button ends up
      with no accessible name at all (WCAG 2.1 4.1.2). The markup has no
      aria-label to fall back on.

   Restoring the visible label fixes both at once. The title/variant column is
   dropped instead to make room: the visitor is already on that product's page
   and the bar still shows its thumbnail, so the title was the least useful
   thing competing for the width. Scoped to the sticky bar so the in-page buy
   button is untouched.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .sticky-add-to-cart__bar .add-to-cart-text__content {
    display: inline;
  }

  .sticky-add-to-cart__bar .sticky-add-to-cart__button {
    width: auto;
    flex: 1 1 auto;
    /* Comfortable touch target; Horizon's square version could land under the
       44px minimum once --height-buy-buttons was scaled down. */
    min-height: 48px;
    padding-inline: var(--padding-lg);
  }

  .sticky-add-to-cart__bar .sticky-add-to-cart__info {
    display: none;
  }
}