/* ===========================================
   TIENDA LA BROCHERIANA — Frontend CSS
   =========================================== */

:root {
  --bs-tierra:       #3F352E;
  --bs-tierra-dark:  #2a231d;
  --bs-arena:        #C0B599;
  --bs-arena-claro:  #d8cebc;
  --bs-arena-muy-claro: #f5f0e8;
  --bs-blanco:       #ffffff;
  --bs-texto:        #2d2520;
  --bs-texto-claro:  #6b5d52;
  --bs-sombra:       0 4px 20px rgba(63,53,46,.1);
  --bs-sombra-lg:    0 12px 40px rgba(63,53,46,.18);
  --bs-radius:       12px;
  --bs-transition:   all .3s cubic-bezier(.4,0,.2,1);
}

.broch-shop-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* ── Page title ──────────────────────────────── */
.broch-page-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--bs-tierra);
  margin: 0 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--bs-arena);
}

/* ── Filters ─────────────────────────────────── */
.broch-shop-filters {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: 2rem;
}
.broch-filter-btn {
  padding: .45rem 1.1rem;
  border: 2px solid rgba(192,181,153,.4);
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--bs-texto-claro);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  transition: var(--bs-transition);
}
.broch-filter-btn:hover,
.broch-filter-btn.is-active {
  background: var(--bs-tierra);
  border-color: var(--bs-tierra);
  color: var(--bs-arena);
}

/* ── Products grid ───────────────────────────── */
.broch-products-grid {
  display: grid;
  gap: 1.75rem;
}
.broch-cols-3 { grid-template-columns: repeat(3, 1fr); }
.broch-cols-2 { grid-template-columns: repeat(2, 1fr); }
.broch-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .broch-cols-3, .broch-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .broch-products-grid { grid-template-columns: 1fr; } }

/* ── Product card ────────────────────────────── */
.broch-product-card {
  background: var(--bs-blanco);
  border-radius: var(--bs-radius);
  overflow: hidden;
  box-shadow: var(--bs-sombra);
  border: 1px solid rgba(192,181,153,.18);
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              box-shadow .35s cubic-bezier(.4,0,.2,1);
}
.broch-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--bs-sombra-lg);
}
.broch-product-card.is-agotado { opacity: .7; }

.broch-product-card__image-link {
  display: block; overflow: hidden;
  aspect-ratio: 4/3; position: relative;
}
.broch-product-card__image {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.broch-product-card:hover .broch-product-card__image { transform: scale(1.06); }

.broch-product-card__image-placeholder {
  aspect-ratio: 4/3; display: flex;
  align-items: center; justify-content: center;
  font-size: 3.5rem;
  background: linear-gradient(135deg, var(--bs-tierra), #5a4a40);
}

.broch-product-badge {
  position: absolute; top: 10px; left: 10px;
  padding: .2rem .7rem;
  border-radius: 100px;
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.broch-product-badge--digital { background: #17a2b8; color: #fff; }
.broch-product-badge--agotado { background: #dc3545; color: #fff; }

.broch-product-card__body {
  padding: 1.3rem 1.4rem 1.2rem;
  display: flex; flex-direction: column; flex: 1;
}
.broch-product-card__cat {
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--bs-arena); margin: 0 0 .4rem;
}
.broch-product-card__title {
  font-size: 1.05rem; font-weight: 800;
  color: var(--bs-tierra); margin: 0 0 .5rem;
  line-height: 1.3;
}
.broch-product-card__title a { color: inherit; text-decoration: none; }
.broch-product-card__title a:hover { color: #8a7a60; }
.broch-product-card__desc {
  font-size: .85rem; color: var(--bs-texto-claro);
  margin: 0 0 1rem; line-height: 1.55; flex: 1;
}
.broch-product-card__footer {
  display: flex; align-items: center;
  justify-content: space-between; gap: .75rem;
  margin-top: auto; padding-top: .9rem;
  border-top: 1px solid rgba(192,181,153,.2);
}
.broch-product-card__price {
  font-size: 1.2rem; font-weight: 900;
  color: var(--bs-tierra);
}
.broch-badge-agotado {
  font-size: .75rem; color: #dc3545; font-weight: 700;
}

/* ── Buttons ─────────────────────────────────── */
.broch-btn {
  display: inline-flex; align-items: center;
  justify-content: center; gap: .4rem;
  padding: .7rem 1.4rem;
  border-radius: 8px;
  font-weight: 800; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer; border: 2px solid transparent;
  transition: var(--bs-transition);
  text-decoration: none;
}
.broch-btn--primary {
  background: var(--bs-tierra); color: var(--bs-arena);
  border-color: var(--bs-tierra);
}
.broch-btn--primary:hover {
  background: var(--bs-tierra-dark);
  color: var(--bs-arena-claro);
}
.broch-btn--outline {
  background: transparent; color: var(--bs-tierra);
  border-color: var(--bs-tierra);
}
.broch-btn--outline:hover {
  background: var(--bs-tierra); color: var(--bs-arena);
}
.broch-btn--ghost {
  background: transparent; color: var(--bs-texto-claro);
  border-color: rgba(192,181,153,.4);
}
.broch-btn--ghost:hover {
  border-color: var(--bs-tierra); color: var(--bs-tierra);
}
.broch-btn--sm { padding: .4rem .9rem; font-size: .78rem; }
.broch-btn--lg { padding: .9rem 2rem; font-size: .95rem; }
.broch-btn--add {
  background: var(--bs-arena); color: var(--bs-tierra);
  border-color: var(--bs-arena);
}
.broch-btn--add:hover {
  background: var(--bs-tierra); color: var(--bs-arena);
  border-color: var(--bs-tierra);
}

/* ── Single product ──────────────────────────── */
.broch-product-single {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  .broch-product-single { grid-template-columns: 1fr; gap: 2rem; }
}

.broch-product-single__gallery {}
.broch-product-single__main-img {
  border-radius: var(--bs-radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  background: var(--bs-arena-muy-claro);
}
.broch-product-single__main-img img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--bs-radius);
}
.broch-product-single__thumbs {
  display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap;
}
.broch-thumb {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; transition: border-color .2s;
}
.broch-thumb.is-active,
.broch-thumb:hover { border-color: var(--bs-arena); }

.broch-product-single__cat {
  font-size: .75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--bs-arena); margin: 0 0 .5rem;
}
.broch-product-single__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900; color: var(--bs-tierra);
  margin: 0 0 .75rem; line-height: 1.2;
}
.broch-product-single__price {
  font-size: 1.7rem; font-weight: 900;
  color: var(--bs-tierra); margin: 0 0 1.2rem;
}
.broch-product-single__short-desc {
  color: var(--bs-texto-claro); font-size: .95rem;
  line-height: 1.6; margin: 0 0 1.4rem;
}

/* Variants */
.broch-variants-wrap { margin-bottom: 1.4rem; }
.broch-variant-group { margin-bottom: 1rem; }
.broch-variant-label {
  display: block; font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--bs-tierra); margin-bottom: .5rem;
}
.broch-variant-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.broch-variant-btn {
  padding: .4rem .9rem;
  border: 2px solid rgba(192,181,153,.4);
  border-radius: 6px;
  font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: var(--bs-transition);
  background: var(--bs-blanco); color: var(--bs-tierra);
}
.broch-variant-btn:hover { border-color: var(--bs-tierra); }
.broch-variant-btn.is-selected {
  background: var(--bs-tierra); color: var(--bs-arena);
  border-color: var(--bs-tierra);
}
.broch-variant-btn.is-agotado {
  opacity: .4; cursor: not-allowed;
  text-decoration: line-through;
}

/* Qty */
.broch-qty-wrap {
  display: inline-flex; align-items: center;
  border: 2px solid rgba(192,181,153,.4);
  border-radius: 8px; overflow: hidden;
}
.broch-qty-btn {
  width: 38px; height: 38px;
  background: var(--bs-arena-muy-claro);
  border: none; cursor: pointer;
  font-size: 1.2rem; font-weight: 700;
  color: var(--bs-tierra); transition: background .2s;
}
.broch-qty-btn:hover { background: var(--bs-arena-claro); }
.broch-qty-input {
  width: 52px; height: 38px;
  border: none; text-align: center;
  font-size: .95rem; font-weight: 700;
  color: var(--bs-tierra);
}
.broch-qty-wrap--sm .broch-qty-btn { width: 30px; height: 30px; font-size: 1rem; }
.broch-qty-wrap--sm .broch-qty-input { width: 40px; height: 30px; font-size: .88rem; }

.broch-add-to-cart-wrap {
  display: flex; gap: 1rem; align-items: center;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.broch-add-msg {
  padding: .7rem 1.1rem;
  border-radius: 8px; font-size: .88rem; font-weight: 600;
  margin-top: .5rem;
}
.broch-add-msg--success { background: #d4edda; color: #155724; }
.broch-add-msg--error   { background: #f8d7da; color: #721c24; }

.broch-stock-info { font-size: .82rem; color: var(--bs-texto-claro); margin: .5rem 0; }
.broch-back-link {
  display: inline-block; margin-top: 1.5rem;
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--bs-texto-claro);
  text-decoration: none; transition: color .2s;
}
.broch-back-link:hover { color: var(--bs-tierra); }

.broch-product-single__desc {
  border-top: 1px solid rgba(192,181,153,.25);
  padding-top: 2rem; margin-top: 1rem;
}
.broch-product-single__desc h2 {
  font-size: 1.2rem; font-weight: 800; color: var(--bs-tierra); margin-bottom: 1rem;
}
.broch-product-desc-content { color: var(--bs-texto); line-height: 1.8; }

/* ── Cart icon in header ─────────────────────── */
.broch-cart-icon-link {
  position: relative; display: inline-flex;
  align-items: center; color: inherit;
  text-decoration: none;
}
.broch-cart-badge {
  position: absolute; top: -8px; right: -10px;
  background: var(--bs-arena); color: var(--bs-tierra);
  font-size: .65rem; font-weight: 900;
  min-width: 18px; height: 18px;
  border-radius: 100px; display: flex;
  align-items: center; justify-content: center;
  padding: 0 4px;
  transition: var(--bs-transition);
}
.broch-cart-badge--hidden { transform: scale(0); opacity: 0; }

/* ── Cart table ──────────────────────────────── */
.broch-cart-table {
  width: 100%; border-collapse: collapse;
  margin-bottom: 2rem;
}
.broch-cart-table th {
  padding: .75rem 1rem; background: var(--bs-tierra);
  color: var(--bs-arena); font-size: .8rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  text-align: left;
}
.broch-cart-table td {
  padding: .9rem 1rem; border-bottom: 1px solid rgba(192,181,153,.2);
  vertical-align: middle;
}
.broch-cart-table tr:last-child td { border-bottom: none; }
.broch-cart-th--product { width: 40%; }
.broch-cart-td--product { display: flex; align-items: center; gap: 1rem; }
.broch-cart-thumb {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: 6px; flex-shrink: 0;
}
.broch-remove-btn {
  background: none; border: none; cursor: pointer;
  color: #dc3545; font-size: 1.1rem; padding: .3rem;
  transition: transform .2s;
}
.broch-remove-btn:hover { transform: scale(1.2); }
.broch-badge-digital { font-size: .7rem; color: #17a2b8; font-weight: 700; }

/* Cart footer */
.broch-cart-footer { display: flex; justify-content: flex-end; }
.broch-cart-totals {
  width: 340px;
  background: var(--bs-arena-muy-claro);
  border-radius: var(--bs-radius);
  padding: 1.5rem;
  border: 1px solid rgba(192,181,153,.3);
}
.broch-totals-table { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.broch-totals-table th,
.broch-totals-table td {
  padding: .5rem 0; font-size: .95rem;
}
.broch-totals-table th { text-align: left; color: var(--bs-texto-claro); font-weight: 600; }
.broch-totals-table td { text-align: right; color: var(--bs-tierra); font-weight: 700; }
.broch-totals-total th,
.broch-totals-total td {
  font-size: 1.1rem; font-weight: 900;
  border-top: 2px solid var(--bs-arena);
  padding-top: .75rem;
}

/* ── Checkout ────────────────────────────────── */
.broch-checkout-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: 2.5rem; align-items: start;
}
@media (max-width: 900px) {
  .broch-checkout-layout { grid-template-columns: 1fr; }
}

.broch-checkout-section {
  background: var(--bs-blanco);
  border: 1px solid rgba(192,181,153,.2);
  border-radius: var(--bs-radius);
  padding: 1.8rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--bs-sombra);
}
.broch-checkout-section h3 {
  font-size: 1rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--bs-tierra); margin: 0 0 1.4rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--bs-arena);
}

.broch-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .broch-form-grid { grid-template-columns: 1fr; } }
.broch-form-group--full { grid-column: 1 / -1; }
.broch-form-group { display: flex; flex-direction: column; gap: .4rem; }
.broch-form-group label {
  font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--bs-tierra);
}
.broch-form-group label .req { color: #dc3545; }
.broch-form-group input,
.broch-form-group textarea {
  padding: .65rem .9rem;
  border: 2px solid rgba(192,181,153,.35);
  border-radius: 7px;
  font-size: .95rem;
  font-family: inherit;
  color: var(--bs-tierra);
  transition: border-color .2s;
  background: var(--bs-blanco);
}
.broch-form-group input:focus,
.broch-form-group textarea:focus {
  outline: none; border-color: var(--bs-tierra);
}

/* Payment options */
.broch-payment-options { display: flex; flex-direction: column; gap: .75rem; }
.broch-payment-option {
  display: block;
  border: 2px solid rgba(192,181,153,.3);
  border-radius: 10px; padding: 1.1rem 1.2rem;
  cursor: pointer; transition: var(--bs-transition);
}
.broch-payment-option input[type="radio"] { display: none; }
.broch-payment-option__body {
  display: flex; align-items: flex-start; gap: 1rem;
}
.broch-payment-option__icon { font-size: 1.6rem; flex-shrink: 0; }
.broch-payment-option__body strong { display: block; color: var(--bs-tierra); margin-bottom: .2rem; }
.broch-payment-option__body p { margin: 0; font-size: .85rem; color: var(--bs-texto-claro); }
.broch-payment-option.is-selected {
  border-color: var(--bs-tierra);
  background: var(--bs-arena-muy-claro);
}
.broch-transfer-info {
  background: var(--bs-arena-muy-claro);
  border: 1px solid rgba(192,181,153,.4);
  border-radius: 8px; padding: 1.2rem 1.4rem;
  margin-top: 1rem;
}
.broch-transfer-info h4 { color: var(--bs-tierra); margin: 0 0 .75rem; font-size: .95rem; }
.broch-transfer-info p { margin: .3rem 0; font-size: .9rem; color: var(--bs-texto); }
.broch-transfer-info code {
  background: rgba(192,181,153,.2); padding: .15rem .4rem;
  border-radius: 4px; font-size: .88rem;
}

/* Order summary sidebar */
.broch-checkout-summary {
  background: var(--bs-tierra);
  border-radius: var(--bs-radius);
  padding: 1.8rem;
  color: var(--bs-blanco);
  position: sticky; top: 100px;
}
.broch-checkout-summary h3 {
  color: var(--bs-arena); font-size: .9rem;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 1.2rem; padding-bottom: .7rem;
  border-bottom: 1px solid rgba(192,181,153,.25);
}
.broch-summary-item {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.broch-summary-thumb {
  width: 48px; height: 48px; object-fit: cover;
  border-radius: 6px; flex-shrink: 0;
}
.broch-summary-item__info {
  flex: 1; display: flex; flex-direction: column; gap: .15rem;
}
.broch-summary-item__info strong { font-size: .9rem; color: var(--bs-blanco); }
.broch-summary-item__info small { font-size: .75rem; color: rgba(255,255,255,.55); }
.broch-summary-item__price { font-weight: 800; font-size: .9rem; color: var(--bs-arena); }
.broch-summary-totals { margin-top: 1rem; }
.broch-summary-row {
  display: flex; justify-content: space-between;
  padding: .4rem 0; font-size: .9rem; color: rgba(255,255,255,.7);
}
.broch-summary-row--total {
  font-size: 1.05rem; font-weight: 900;
  color: var(--bs-arena);
  border-top: 1px solid rgba(192,181,153,.3);
  padding-top: .75rem; margin-top: .3rem;
}

/* ── Confirmation page ───────────────────────── */
.broch-confirmation {
  text-align: center; max-width: 640px; margin: 0 auto;
  padding: 3rem 2rem;
}
.broch-confirmation__icon { font-size: 4rem; margin-bottom: 1rem; }
.broch-confirmation h2 {
  font-size: 2rem; font-weight: 900;
  color: var(--bs-tierra); margin: 0 0 .75rem;
}
.broch-confirmation p { color: var(--bs-texto-claro); font-size: 1.05rem; margin: 0 0 .75rem; }

.broch-order-summary-box {
  background: var(--bs-arena-muy-claro);
  border: 1px solid rgba(192,181,153,.35);
  border-radius: var(--bs-radius);
  padding: 1.5rem; margin: 1.5rem 0; text-align: left;
}
.broch-order-summary-box h3 {
  font-size: .9rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--bs-tierra); margin: 0 0 1rem;
}
.broch-conf-item {
  display: flex; justify-content: space-between;
  padding: .5rem 0; border-bottom: 1px solid rgba(192,181,153,.2);
  font-size: .9rem; color: var(--bs-texto);
}
.broch-conf-total {
  display: flex; justify-content: space-between;
  padding: .75rem 0 0; font-size: 1.05rem; font-weight: 900; color: var(--bs-tierra);
}

.broch-transfer-box {
  background: var(--bs-tierra); border-radius: var(--bs-radius);
  padding: 1.8rem; margin: 1.5rem 0; text-align: left; color: var(--bs-blanco);
}
.broch-transfer-box h3 { color: var(--bs-arena); font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 1rem; }
.broch-transfer-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .9rem;
}
.broch-transfer-row span:first-child { color: rgba(255,255,255,.6); }
.broch-transfer-row code { background: rgba(255,255,255,.1); padding: .15rem .5rem; border-radius: 4px; }
.broch-transfer-row--total {
  font-size: 1.1rem; border-bottom: none; padding-top: .75rem;
  border-top: 1px solid rgba(192,181,153,.3); color: var(--bs-arena);
}

/* Comprobante upload */
.broch-comprobante-wrap {
  background: var(--bs-arena-muy-claro);
  border: 1px dashed rgba(192,181,153,.5);
  border-radius: var(--bs-radius); padding: 1.8rem; margin: 1.5rem 0;
}
.broch-comprobante-wrap h3 { color: var(--bs-tierra); margin: 0 0 .5rem; }
.broch-file-input { display: block; margin: 1rem 0; font-size: .9rem; }

/* ── Notices ─────────────────────────────────── */
.broch-notice {
  padding: 1rem 1.25rem; border-radius: 8px;
  font-size: .92rem; font-weight: 500;
}
.broch-notice--info    { background: #d1ecf1; color: #0c5460; }
.broch-notice--success { background: #d4edda; color: #155724; }
.broch-notice--error   { background: #f8d7da; color: #721c24; }

/* ── Empty state ─────────────────────────────── */
.broch-empty-state {
  text-align: center; padding: 4rem 2rem;
}
.broch-empty-icon { font-size: 4rem; margin-bottom: 1rem; }
.broch-empty-state h3 { color: var(--bs-tierra); margin: 0 0 .5rem; }
.broch-empty-state p { color: var(--bs-texto-claro); margin: 0 0 1.5rem; }

/* ── Loading spinner (for AJAX) ──────────────── */
.broch-loading { text-align: center; padding: 2rem; }
.broch-spinner {
  display: inline-block; width: 32px; height: 32px;
  border: 3px solid rgba(192,181,153,.3);
  border-top-color: var(--bs-tierra);
  border-radius: 50%;
  animation: broch-spin .7s linear infinite;
}
@keyframes broch-spin { to { transform: rotate(360deg); } }