/* Identidad de Belora integrada en los espacios de compra y comunidad. */
.ui-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  pointer-events: none;
}
.product-actions { align-items: center; width: 100%; }
.product-add {
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  align-self: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--ink);
  border-radius: 2px;
  line-height: 0;
  vertical-align: middle;
}
.product-add .ui-icon { width: 20px; height: 20px; min-width: 20px; min-height: 20px; transform: none; }
.product-price { line-height: 1.3; }
.quantity-controls { display: inline-flex; align-items: center; height: 46px; padding: 0; vertical-align: middle; }
.quantity-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; line-height: 0; }
.quantity-controls > span { display: grid; place-items: center; min-width: 32px; height: 44px; line-height: 1; }
.quantity-controls button:disabled { opacity: .35; }
.icon-button { display: inline-grid; place-items: center; padding: 0; line-height: 0; }
.masthead #header-search { display: inline-grid; place-items: center; padding: 0; line-height: 0; }
.cart-button .ui-icon { width: 24px; height: 24px; flex-basis: 24px; }
.text-link .ui-icon, .button .ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
.cart-remove { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cart-remove .ui-icon { width: 15px; height: 15px; flex-basis: 15px; }
.footer-links a { display: inline-flex; align-items: center; gap: 8px; }
.footer-links .ui-icon, .footer-bottom .ui-icon { width: 14px; height: 14px; flex-basis: 14px; }
.footer-bottom > a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.footer-bottom > p:first-child { display: inline-flex; align-items: center; gap: 8px; }
.story-signature { display: flex; align-items: center; gap: 12px; }
.shop-help-icon { width: 28px; height: 28px; border: 0; }
.shop-help-icon .ui-icon { width: 24px; height: 24px; }
.testimonial-avatar .ui-icon { width: 18px; height: 18px; }
.faq-list summary .ui-icon { transition: transform .2s; }
.faq-list details[open] summary .ui-icon { transform: rotate(180deg); }
.shop-toast { display: flex; align-items: center; justify-content: center; gap: 10px; }
.shop-toast .ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
@media (prefers-reduced-motion: reduce) { .faq-list summary .ui-icon { transition: none; } }
.brand-mark .brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
  filter: none;
  mix-blend-mode: normal;
}

.campaign-visual { gap: clamp(18px, 3vw, 44px); }
.campaign-visual .campaign-brand-primary {
  justify-self: center;
  width: 100%;
  max-width: 500px;
  height: min(45vw, 490px);
  padding: clamp(8px, 1.5vw, 22px);
  object-fit: contain;
  object-position: center;
  background: transparent;
  filter: none;
  mix-blend-mode: normal;
}

/* La marca de agua queda en la introducción, antes de las fichas y precios. */
.shop-section { position: relative; isolation: isolate; }
.shop-section > .container { position: relative; z-index: 1; }
.shop-brand-watermark {
  position: absolute;
  z-index: 0;
  top: 35px;
  right: max(3vw, 20px);
  display: block;
  width: clamp(180px, 23vw, 270px);
  height: auto;
  max-width: 45%;
  object-fit: contain;
  opacity: .22;
  pointer-events: none;
  user-select: none;
}

.section-brand-lockup {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  flex: 1;
  min-width: 0;
}
.section-brand-lockup > div { min-width: 0; }
.brand-horizontal {
  display: block;
  flex: 0 1 320px;
  width: min(28vw, 320px);
  max-width: 45%;
  height: auto;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
}
.bundles-section .section-heading { align-items: center; }
.bundles-section .heading-aside { max-width: 240px; }
.brand-seal-degrade {
  display: block;
  flex: 0 0 132px;
  width: 132px;
  height: 132px;
  max-width: 100%;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
}
.testimonials-section .section-heading { align-items: center; }
.brand-monogram {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
  margin: 0 0 28px;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
}

.gift-section { background: var(--pink); }
.gift-art { min-height: 0; }
.brand-gift-signature {
  display: block;
  width: min(100%, 260px);
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
}
.gift-inner > .brand-gift-signature { justify-self: center; }

.faq-section { background: var(--white); }
.brand-help-seal {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
  margin: 0 0 28px;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
}

.community-section {
  background: var(--ink);
  color: var(--blush);
  border-block-color: var(--gold);
}
.community-inner > div { min-width: 0; }
.community-inner h2,
.community-inner .eyebrow,
.community-inner p:not(.eyebrow) { color: var(--blush); }
.brand-community-wordmark {
  display: block;
  width: 280px;
  height: 86px;
  max-width: 100%;
  margin: 0 0 24px;
  object-fit: contain;
  background: transparent;
  stroke: none;
  fill: none;
  filter: none;
  mix-blend-mode: normal;
}
.community-inner > .button {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--ink);
}
.community-inner > .button:hover {
  background: var(--lavender);
  border-color: var(--lavender);
  color: var(--ink);
}
.community-section :focus-visible { outline-color: var(--blush); }

.site-footer {
  background: #000;
  color: var(--blush);
  border-top-color: var(--gold);
}
.brand-footer-signature {
  display: block;
  width: 210px;
  max-width: 100%;
  height: auto;
  margin: 0 0 18px;
  object-fit: contain;
  background: #000;
  filter: none;
  mix-blend-mode: normal;
}
.site-footer .footer-wordmark { font-size: inherit; line-height: 1; margin-bottom: 0; }
.site-footer .footer-brand,
.site-footer .footer-brand > p,
.site-footer .footer-links h2,
.site-footer .footer-links a,
.site-footer .footer-bottom,
.site-footer .footer-bottom p,
.site-footer .footer-bottom a { color: var(--blush); }
.site-footer .footer-links a:hover,
.site-footer .footer-bottom a:hover { color: var(--pink); }
.site-footer .footer-bottom { border-top-color: rgb(249 234 243 / 28%); }
.site-footer :focus-visible { outline-color: var(--pink); }

@media (max-width: 1100px) {
  .bundles-section .section-heading { display: block; }
  .bundles-section .heading-aside { max-width: 480px; margin-top: 24px; }
  .brand-horizontal { width: min(32vw, 280px); }
}

@media (max-width: 760px) {
  .campaign-visual .campaign-brand-primary {
    height: clamp(280px, 78vw, 390px);
    max-width: 430px;
    padding: 8px;
  }
  .shop-brand-watermark { width: 180px; top: 30px; right: 16px; max-width: 48%; }
  .section-brand-lockup { gap: 18px; }
  .bundles-section .section-brand-lockup { flex-direction: column; align-items: flex-start; gap: 24px; }
  .brand-horizontal { flex: none; width: min(100%, 320px); max-width: 100%; }
  .brand-seal-degrade { flex-basis: 96px; width: 96px; height: 96px; }
  .testimonials-section .section-brand-lockup { align-items: center; }
  .brand-monogram { width: 120px; margin-bottom: 24px; }
  .gift-art { min-height: 0; }
  .brand-gift-signature { width: min(100%, 240px); }
  .brand-help-seal { width: 130px; margin-bottom: 24px; }
  .brand-community-wordmark { width: 260px; height: 80px; margin-bottom: 22px; }
  .community-inner > .button { margin-top: 28px; }
  .brand-footer-signature { width: 192px; }
}

@media (max-width: 390px) {
  .section-brand-lockup { gap: 14px; }
  .brand-seal-degrade { flex-basis: 88px; width: 88px; height: 88px; }
  .testimonials-section .section-brand-lockup h2 { font-size: 34px; }
  .shop-brand-watermark { width: 160px; }
}

@media print {
  .shop-brand-watermark { display: none; }
  .community-section, .site-footer { background: #fff; color: var(--ink); }
  .community-inner h2, .community-inner p, .community-inner .eyebrow,
  .site-footer .footer-brand, .site-footer .footer-brand > p,
  .site-footer .footer-links h2, .site-footer .footer-links a,
  .site-footer .footer-bottom, .site-footer .footer-bottom p,
  .site-footer .footer-bottom a { color: var(--ink); }
}