/*
 * Tienda. Todo el diseño sale de variables CSS que arma App\Core\Theme desde la configuración:
 * --brand --accent --bg --text --muted --border --surface --header-bg --footer-bg --radius --radius-btn
 * --font-body --font-heading --heading-transform --logo-h --cols-m/t/d --img-ratio --hero-h
 * y de clases en <body>: card-*, card-align-*, header-*, cats-*, fit-*, no-hover-image, theme-dark.
 */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.hero-title, .section-title, .brand-name, .footer-title {
  font-family: var(--font-heading);
  text-transform: var(--heading-transform);
  letter-spacing: -.01em;
}

a { color: var(--brand); }
.theme-dark a:not([class]) { color: color-mix(in srgb, var(--brand) 70%, #fff); } /* links de texto común */
.text-secondary { color: var(--muted) !important; }
.link-secondary { color: var(--muted) !important; }
.border, .border-top, .border-bottom { border-color: var(--border) !important; }
.card, .list-group-item { background-color: var(--bg); border-color: var(--border); }
.form-control, .form-select { background-color: var(--bg); color: var(--text); border-color: var(--border); }
.btn { --bs-btn-border-radius: var(--radius-btn); }

.btn-brand {
  --bs-btn-color: var(--brand-contrast);
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 88%, #000);
  --bs-btn-active-color: var(--brand-contrast);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand) 80%, #000);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-disabled-color: var(--brand-contrast);
}
.btn-outline-dark {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--text);
  --bs-btn-hover-bg: var(--text);
  --bs-btn-hover-border-color: var(--text);
  --bs-btn-hover-color: var(--bg);
  --bs-btn-active-bg: var(--text);
  --bs-btn-active-color: var(--bg);
}

.announcement { background: var(--brand); color: var(--brand-contrast); }

/* ---------- Encabezado ---------- */
.site-header {
  z-index: 1020;
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid color-mix(in srgb, var(--header-text) 12%, var(--header-bg));
}
.header-inner { display: flex; align-items: center; gap: 1rem; padding-top: .5rem; padding-bottom: .5rem; }
.brand { display: flex; align-items: center; margin-right: auto; min-width: 0; }
.brand-logo { height: var(--logo-h); max-width: calc(var(--logo-h) * 4.5); object-fit: contain; }
.brand-name { font-weight: 700; font-size: 1.35rem; color: var(--header-text); }
.header-tools { display: flex; align-items: center; gap: .75rem; }
.header-icon, .header-icon:hover { color: var(--header-text); }
.search-form { width: min(380px, 38vw); }
.site-header .form-control { background: color-mix(in srgb, var(--header-text) 6%, var(--header-bg)); color: var(--header-text); border-color: color-mix(in srgb, var(--header-text) 18%, var(--header-bg)); }
.site-header .form-control::placeholder { color: color-mix(in srgb, var(--header-text) 55%, var(--header-bg)); }
.cart-badge { background: var(--accent); color: var(--accent-contrast); font-size: .7rem; }

/* Logo centrado: los íconos quedan a la derecha y las categorías centradas */
.header-center .header-inner { justify-content: center; position: relative; padding-top: .9rem; padding-bottom: .9rem; }
.header-center .brand { margin-right: 0; }
.header-center .header-tools { position: absolute; right: calc(var(--bs-gutter-x, 1.5rem) * .5); top: 50%; transform: translateY(-50%); }
.header-center .category-nav { justify-content: center; }

.category-nav { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.category-nav::-webkit-scrollbar { display: none; }
.cat-link { white-space: nowrap; text-decoration: none; font-size: .9rem; color: var(--header-text); }
.cats-chips .cat-link {
  padding: .3rem .85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--header-text) 20%, var(--header-bg));
}
.cats-chips .cat-link:hover { border-color: color-mix(in srgb, var(--header-text) 45%, var(--header-bg)); color: var(--header-text); }
.cats-chips .cat-link.active { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.cats-links .category-nav { gap: 1.25rem; padding-top: .15rem; }
.cats-links .cat-link { padding: .25rem 0; border-bottom: 2px solid transparent; opacity: .8; }
.cats-links .cat-link:hover { opacity: 1; color: var(--header-text); }
.cats-links .cat-link.active { opacity: 1; border-bottom-color: var(--brand); font-weight: 600; }

/* ---------- Portada ---------- */
.hero { position: relative; overflow: hidden; }
.hero-content { position: relative; z-index: 1; }
.hero-title { font-weight: 800; font-size: clamp(2rem, 6vw, 3.75rem); margin: 0; line-height: 1.05; }
.hero-tagline { font-size: clamp(1rem, 2.4vw, 1.25rem); opacity: .9; max-width: 40rem; margin-top: .5rem; }
.hero-align-center { text-align: center; }
.hero-align-center .hero-tagline { margin-left: auto; margin-right: auto; }

.hero-plain { background: color-mix(in srgb, var(--brand) 9%, var(--bg)); min-height: calc(var(--hero-h) * .6); display: flex; align-items: center; padding: 3rem 0; }
.hero-overlay { min-height: var(--hero-h); display: flex; align-items: flex-end; padding: 3rem 0; color: #fff; }
.hero-overlay.hero-align-center { align-items: center; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.08) 65%); }
.hero-overlay.hero-align-center::after { background: rgba(0,0,0,.35); }

.hero-split { padding: 2.5rem 0; }
.hero-split .split-img { width: 100%; height: var(--hero-h); object-fit: cover; border-radius: var(--radius); }
.hero-image-only img { width: 100%; height: auto; display: block; }

.section-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; }

/* Categorías con foto en el inicio */
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px) { .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.category-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--surface); text-decoration: none; }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.category-card:hover img { transform: scale(1.04); }
.category-card span {
  position: absolute; inset: auto 0 0 0; padding: .75rem; color: #fff; font-weight: 700;
  font-family: var(--font-heading); text-transform: var(--heading-transform);
  background: linear-gradient(transparent, rgba(0,0,0,.65));
}

/* ---------- Grilla de productos ---------- */
.product-grid { display: grid; grid-template-columns: repeat(var(--cols-m), minmax(0, 1fr)); gap: 1rem .75rem; }
@media (min-width: 576px) { .product-grid { grid-template-columns: repeat(var(--cols-t), minmax(0, 1fr)); } }
@media (min-width: 992px) { .product-grid { grid-template-columns: repeat(var(--cols-d), minmax(0, 1fr)); gap: 1.5rem 1.25rem; } }

.product-card { display: block; color: inherit; text-decoration: none; height: 100%; }
.product-card:hover { color: inherit; }
.product-media {
  position: relative;
  aspect-ratio: var(--img-ratio);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s, transform .35s; }
.fit-contain .product-media img { object-fit: contain; background: #fff; }
.product-media .img-alt { opacity: 0; }
.no-hover-image .product-media .img-alt { display: none; }
@media (hover: hover) {
  .product-card:hover .img-alt { opacity: 1; }
  .product-card:hover .img-main { transform: scale(1.03); }
}
.product-badge { position: absolute; top: .5rem; left: .5rem; }
.badge-accent { background: var(--accent); color: var(--accent-contrast); }
.sold-out .product-media img { filter: grayscale(.6); opacity: .7; }
.product-info { padding: .5rem .15rem 0; }
.product-name { font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-price { font-weight: 700; margin-top: .15rem; }
.card-align-center .product-info { text-align: center; }

/* Tarjeta con borde / con sombra: la foto queda adentro con un poco de aire */
.card-bordered .product-card, .card-shadow .product-card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: .5rem;
  transition: box-shadow .2s, border-color .2s;
}
.card-bordered .product-card { border: 1px solid var(--border); }
.card-bordered .product-card:hover { border-color: color-mix(in srgb, var(--text) 35%, var(--bg)); }
.card-shadow .product-card { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.card-shadow .product-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.14); }
.theme-dark.card-shadow .product-card { box-shadow: 0 2px 10px rgba(0,0,0,.5); background: var(--surface); }
.card-bordered .product-media, .card-shadow .product-media { border-radius: calc(var(--radius) * .7); }
.card-bordered .product-info, .card-shadow .product-info { padding: .6rem .35rem .25rem; }

/* ---------- Ficha de producto ---------- */
.gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius);
  background: var(--surface);
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: var(--img-ratio); }
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-thumbs { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; }
.gallery-thumbs button { border: 2px solid transparent; padding: 0; border-radius: calc(var(--radius) * .6); overflow: hidden; background: none; flex: 0 0 64px; height: 64px; }
.gallery-thumbs button.active { border-color: var(--brand); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.qty-input { width: 5.5rem; }
.product-description { color: color-mix(in srgb, var(--text) 85%, var(--bg)); line-height: 1.6; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--muted); --bs-breadcrumb-item-active-color: var(--muted); }

/* Botones de compartir */
.share-row { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.share-label { font-size: .9rem; color: var(--muted); margin-right: .25rem; }
.share-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff !important;
  text-decoration: none;
  transition: transform .12s, filter .12s;
}
.share-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.share-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.share-wa { background: #25d366; }
.share-fb { background: #1877f2; }
.share-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.share-link { background: var(--surface); color: var(--text) !important; border: 1px solid var(--border); }

/* ---------- Carrito y checkout ---------- */
.cart-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: calc(var(--radius) * .6); background: var(--surface); }
.min-w-0 { min-width: 0; }
.shipping-option { cursor: pointer; }
.shipping-option:has(input:checked) { border-color: var(--brand) !important; background: color-mix(in srgb, var(--brand) 6%, var(--bg)); }
@media (min-width: 992px) { .checkout-summary { position: sticky; top: 7rem; } }

/* ---------- Pie ---------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid color-mix(in srgb, var(--footer-text) 12%, var(--footer-bg));
}
.site-footer a { color: var(--footer-text) !important; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-muted { color: color-mix(in srgb, var(--footer-text) 62%, var(--footer-bg)); }

/* ---------- Flotantes ---------- */
.wa-float {
  position: fixed;
  bottom: 1rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  z-index: 1030;
}
.wa-right { right: 1rem; }
.wa-left { left: 1rem; }
.wa-float:hover { filter: brightness(1.05); }

.toast-cart {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 1080;
  max-width: calc(100vw - 2rem);
}