/* ============================================================
   TEMA HOME PARA EL RESTO DE PÁGINAS
   Se carga el último (la Home no lo usa). Mismo lenguaje que la Home:
   negro liso, rojo #C1121F, esquinas cortadas en diagonal y botones de «fuego»
   (relleno blanco que sube desde abajo, texto negro).
   ============================================================ */

:root {
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --shadow-btn: none;
  --shadow-btn-hov: none;
  --shadow-red: none;
  --shadow-card: 0 30px 70px -30px rgba(0, 0, 0, .85);
  --st-chamfer: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --st-chamfer-s: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  --st-ease: cubic-bezier(.1, .4, .2, 1);
}

/* ---------- Botón principal (rojo → relleno blanco) ---------- */
html body .btn-buy,
html body .checkout-pay-btn,
html body .review-submit-btn,
html body .checkout-promo-btn {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  color: #fff;
  background: linear-gradient(#fff, #fff) no-repeat 0 100% / 100% 0 #c1121f !important;
  clip-path: var(--st-chamfer);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 3px;
  transition: background-size .5s var(--st-ease), color .35s var(--st-ease), scale .2s;
}
html body .btn-buy:hover:not(:disabled),
html body .checkout-pay-btn:hover:not(:disabled),
html body .review-submit-btn:hover:not(:disabled),
html body .checkout-promo-btn:hover:not(:disabled) {
  background-size: 100% 100% !important;
  color: #0c0c0f;
}
html body .btn-buy:active,
html body .checkout-pay-btn:active:not(:disabled),
html body .review-submit-btn:active { scale: .98; }

/* ---------- Botón secundario (anillo → relleno blanco) ---------- */
html body .btn-cart,
html body .wishlist-btn {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34) !important;
  background: linear-gradient(#fff, #fff) no-repeat 0 100% / 100% 0 rgba(255, 255, 255, .03) !important;
  color: #fff;
  clip-path: var(--st-chamfer);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 3px;
  transform: none !important;
  transition: background-size .5s var(--st-ease), color .35s var(--st-ease), box-shadow .3s, scale .2s;
}
html body .btn-cart:hover:not(:disabled),
html body .wishlist-btn:hover:not(:disabled) {
  background-size: 100% 100% !important;
  color: #0c0c0f;
  box-shadow: inset 0 0 0 1px #fff !important;
}
html body .wishlist-btn.active { box-shadow: inset 0 0 0 1px #c1121f !important; color: #fff; }
html body .btn-cart:active, html body .wishlist-btn:active { scale: .98; }

html body .btn-buy:disabled,
html body .checkout-pay-btn:disabled,
html body .btn-buy.sold-out-disabled { opacity: .45; cursor: not-allowed; }

html body .btn-buy:focus-visible, html body .btn-cart:focus-visible, html body .wishlist-btn:focus-visible,
html body .checkout-pay-btn:focus-visible, html body .size-option:focus-visible, html body .sizes button:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
}

/* ---------- Tallas: cuadradas con esquina cortada ---------- */
html body .sizes button,
html body .size-option {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28) !important;
  background: rgba(255, 255, 255, .03) !important;
  clip-path: var(--st-chamfer-s);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 2px;
  transition: background .3s var(--st-ease), color .3s var(--st-ease), box-shadow .3s;
}
html body .sizes button:hover:not(.sold-out):not(:disabled) { box-shadow: inset 0 0 0 1px #fff !important; }
html body .sizes button.active,
html body .sizes button[aria-pressed="true"] { background: #c1121f !important; color: #fff; box-shadow: none !important; }
html body .sizes button.sold-out,
html body .sizes button:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }

/* ---------- Formularios ---------- */
html body input[type="text"], html body input[type="email"], html body input[type="tel"],
html body input[type="password"], html body input[type="search"], html body input[type="number"],
html body select, html body textarea { border-radius: 0; }
html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible {
  outline: 2px solid #c1121f; outline-offset: 1px;
}

/* ---------- Barra de anuncios y navbar: líneas finas, sin brillos ---------- */
html body .announcement-bar { background: #050505; border-bottom: 1px solid #c1121f; }
html body .announcement-message { font-family: var(--font-display); font-weight: 800; letter-spacing: 3px; }
html body .navbar { box-shadow: none; border-bottom: 1px solid rgba(244, 242, 237, .12); }
html body .navbar .menu a, html body .nav-catalog-btn { font-family: var(--font-display); font-weight: 700; letter-spacing: 3px; }

@media (prefers-reduced-motion: reduce) {
  html body .btn-buy, html body .btn-cart, html body .wishlist-btn, html body .checkout-pay-btn,
  html body .review-submit-btn, html body .checkout-promo-btn, html body .sizes button { transition: none; }
}

/* ---------- Ficha de producto: titular, precio y cajas con la tipografía de la Home ---------- */
html body .info h1 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.035em; line-height: .95; font-size: clamp(2.2rem, 3.4vw, 3.4rem);
}
html body .info .price { font-family: var(--font-display); font-weight: 900; color: #e11d2b; letter-spacing: -.02em; }
html body .origin-badge, html body .benefits {
  border-radius: 0 !important; background: none !important; box-shadow: none !important;
  border: 0 !important; border-left: 2px solid #c1121f !important; clip-path: none;
}
html body .benefits { border-left-color: rgba(244, 242, 237, .25) !important; }
html body .product-gallery img, html body .main-image, html body .thumbs img, html body .thumbnails img { border-radius: 0 !important; }

/* ---------- Checkout ---------- */
html body .checkout-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; line-height: .95;
}
html body .checkout-block,
html body .success-card,
html body .checkout-summary-card {
  background: rgba(255, 255, 255, .025) !important;
  border: 0 !important;
  border-top: 2px solid #c1121f !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(244, 242, 237, .1) !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
html body .checkout-error { border-radius: 0; border-left: 2px solid #c1121f; }
html body .card-header, html body .checkout-field-label {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
}
html body .checkout-input { background: rgba(255, 255, 255, .04); border-radius: 0; clip-path: var(--st-chamfer-s); }
html body .checkout-input:focus { outline: 2px solid #c1121f; outline-offset: 0; }
html body .shipping-option {
  border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px rgba(244, 242, 237, .16); clip-path: var(--st-chamfer-s);
}
html body .shipping-option:has(input:checked) { box-shadow: inset 0 0 0 1px #c1121f; background: rgba(193, 18, 31, .1); }
html body .checkout-back-link { font-family: var(--font-display); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 10px; }

/* ---------- Guía de tallas ---------- */
html body .sg-overlay { background: rgba(0, 0, 0, .86); backdrop-filter: none; -webkit-backdrop-filter: none; }
html body .sg-modal {
  background: #050505; border: 0; border-top: 2px solid #c1121f; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(244, 242, 237, .1), 0 40px 90px -24px rgba(0, 0, 0, .9);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
html body .sg-title { font: 900 clamp(2rem, 5vw, 3rem)/.9 'Big Shoulders Display', 'Anton', Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em; }
html body .sg-label { font-family: var(--font-display); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #c1121f; }
html body .sg-close { border-radius: 0; clip-path: var(--st-chamfer-s); }
html body .sg-fit-badge, html body .sg-tip, html body .sg-model-note, html body .sg-measure-item { border-radius: 0 !important; }
html body .sg-tab {
  border: 0 !important; border-radius: 0 !important; clip-path: var(--st-chamfer-s);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26) !important; background: rgba(255, 255, 255, .03);
  font-family: var(--font-display); font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
}
html body .sg-tab.sg-tab-active { background: #c1121f; box-shadow: none !important; color: #fff; }
html body .sg-table { border-radius: 0; }
html body .sg-table th { font-family: var(--font-display); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
html body .sg-table tr.sg-row-highlight td { background: rgba(193, 18, 31, .14); }
html body .sg-trigger {
  border: 0 !important; border-radius: 0 !important; clip-path: var(--st-chamfer);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26) !important; font-family: var(--font-display); font-weight: 800; letter-spacing: 3px;
}
html body .sg-trigger:hover, html body .sg-trigger:focus { box-shadow: inset 0 0 0 1px #fff !important; color: #fff; }
