/* ==========================================================================
   AllanStore Theme for OpenCart 4 / Bootstrap 5
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;500;600;700&display=swap");

/* Fuente de acento "Of Betty" (script/decorativa), igual a plantilla/css/catalog-showcase-34d905.webflow.css.
   Se sirve local porque no existe en Google Fonts. Usada solo en los títulos de énfasis del home
   ("categorías", "Pan de Xela", "Nuestra Tienda"), igual que heading-2/-11/-12 en la plantilla. */
@font-face {
  font-family: "Of Betty";
  src: url("fonts/Thinking_of_Betty.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Phosphor Icons — peso "Fill" (MIT, https://phosphoricons.com), servido local
   igual que "Of Betty" y Leaflet (sin CDN, ver opencart/CLAUDE.md). Solo se
   incluye el @font-face y las clases de los íconos que realmente se usan en
   el header (extension/allanstore/catalog/view/template/common/header.twig
   y cart.twig), no el set completo de Phosphor (miles de íconos). */
@font-face {
  font-family: "Phosphor-Fill";
  src:
    url("fonts/Phosphor-Fill.woff2") format("woff2"),
    url("fonts/Phosphor-Fill.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ph-fill {
  font-family: "Phosphor-Fill" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph-fill.ph-user::before { content: "\e4c2"; }
.ph-fill.ph-heart::before { content: "\e2a8"; }
.ph-fill.ph-truck::before { content: "\e4b4"; }
.ph-fill.ph-cash-register::before { content: "\ed80"; }
.ph-fill.ph-package::before { content: "\e390"; }
.ph-fill.ph-user-plus::before { content: "\e4d0"; }
.ph-fill.ph-sign-out::before { content: "\e42a"; }
.ph-fill.ph-shopping-cart::before { content: "\e41e"; }

/* Remix Icon — estilo "Fill" (Apache 2.0, https://remixicon.com), servido local
   igual que Phosphor, para comparar alternativas en el header. Mismo criterio:
   solo el @font-face y los glyphs realmente usados, no el set completo. */
@font-face {
  font-family: "remixicon";
  src:
    url("fonts/remixicon.woff2") format("woff2"),
    url("fonts/remixicon.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ri-fill {
  font-family: "remixicon" !important;
  font-style: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ri-fill.ri-user::before { content: "\f25f"; }
.ri-fill.ri-heart::before { content: "\ee0e"; }
.ri-fill.ri-truck::before { content: "\f230"; }
.ri-fill.ri-bank-card::before { content: "\ea91"; }
.ri-fill.ri-archive::before { content: "\ea47"; }
.ri-fill.ri-user-add::before { content: "\f25d"; }
.ri-fill.ri-logout-box-r::before { content: "\eed9"; }
.ri-fill.ri-shopping-cart::before { content: "\f11f"; }

/* 01. Tokens
   Paleta y tipografía alineadas a plantilla/ (marca Xelapan).
   Nota: la plantilla pide la fuente "Nexa" vía Google Fonts, pero Nexa no es
   una fuente real de Google Fonts y nunca llega a cargar ahí tampoco. Usamos
   Poppins (geométrica, también referenciada en la plantilla) como reemplazo
   real y funcional; Nunito Sans queda como fallback ya cargado previamente.
   ========================================================================== */

:root {
  --allan-font-base: "Poppins", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --allan-font-accent: "Of Betty", cursive, var(--allan-font-base);
  --allan-bg: #ffffff;
  --allan-surface: #ffffff;
  --allan-surface-soft: #f7f4f1;
  --allan-surface-warm: #eae6e1;
  --allan-border: #e2d8cf;
  --allan-border-strong: #D8C9AF;
  --allan-text: #211713;
  --allan-muted: #716158;
  --allan-soft: #98887d;
  --allan-primary: #70402f;
  --allan-primary-hover: #4a2f22;
  --allan-primary-soft: #D8C9AF;
  --allan-accent: #E2A615;
  --allan-accent-hover: #b27f08;
  --allan-accent-soft: #CADBBF;
  --allan-accent-soft-dark: #84B464;
  --allan-success: #3d6b48;
  --allan-danger: #9b4337;
  --allan-shadow-xs: 0 4px 12px rgba(33, 23, 19, 0.06);
  --allan-shadow-sm: 0 10px 24px rgba(33, 23, 19, 0.09);
  --allan-shadow-md: 0 18px 38px rgba(33, 23, 19, 0.13);
  --allan-radius-xs: 4px;
  --allan-radius-sm: 8px;
  --allan-radius-md: 12px;
  --allan-radius-lg: 16px;
  --allan-radius-pill: 999px;
  --allan-space-1: 4px;
  --allan-space-2: 8px;
  --allan-space-3: 12px;
  --allan-space-4: 16px;
  --allan-space-5: 20px;
  --allan-space-6: 24px;
  --allan-space-7: 32px;
  --allan-space-8: 40px;
  --allan-space-9: 48px;
  --allan-control: 44px;
  --allan-control-lg: 48px;
  --allan-transition: 0.2s ease;

  /* Red de seguridad: .allan-cart-page/.allan-checkout-page/.allan-product-page
     redeclaran estos mismos valores como --cart-*/--checkout-* para themear
     componentes compartidos (stepper de cantidad, checkout-panel). Si algún
     componente que los usa se reutiliza en una página SIN ese wrapper, sin
     este bloque la variable queda sin resolver y el navegador cae a un valor
     roto en silencio. Declararlos también aquí, en :root, hace que siempre
     tengan un valor razonable por defecto — el bloque por página sigue
     funcionando igual, esto es solo el fallback. */
  --cart-ink: var(--allan-text);
  --cart-muted: var(--allan-muted);
  --cart-line: var(--allan-border);
  --cart-line-strong: var(--allan-border-strong);
  --cart-panel: var(--allan-surface-soft);
  --cart-surface: var(--allan-surface);
  --cart-primary: var(--allan-primary);
  --cart-primary-hover: var(--allan-primary-hover);
  --cart-shadow: var(--allan-shadow-md);
  --cart-shadow-soft: var(--allan-shadow-sm);
  --checkout-surface: var(--allan-surface);
  --checkout-surface-soft: var(--allan-surface-soft);
  --checkout-border: var(--allan-border);
  --checkout-border-strong: var(--allan-border-strong);
  --checkout-ink: var(--allan-text);
  --checkout-ink-soft: var(--allan-muted);
  --checkout-accent: var(--allan-primary);
  --checkout-accent-strong: var(--allan-primary-hover);
  --checkout-shadow: var(--allan-shadow-sm);
  --checkout-shadow-soft: var(--allan-shadow-sm);
}

/* 02. Base
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--allan-text);
  background: var(--allan-bg) url("../image/bg/fondo-web.png") repeat 0 0;
  background-size: 960px auto;
  font-family: var(--allan-font-base);
  font-size: 16px;
  line-height: 1.5;
}

/* Reemplaza el layout absoluto del core de OpenCart con un sticky-footer flexbox.
   Core original: #container{position:absolute}, footer{position:absolute;bottom:-1px},
   #content{padding-bottom:730px} — ese hack ya no es necesario con este layout. */
#container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin-bottom: 0;
}

/* El core pone padding-bottom gigante en #content para compensar el footer absoluto.
   Con el footer en flujo normal esto ya no se necesita. */
#content,
#column-left,
#column-right {
  padding-bottom: 0;
}

main {
  position: relative;
  flex: 1 0 auto;
}

.allan-header-stack + main {
  padding-top: var(--allan-space-6);
}

img {
  max-width: 100%;
}

a {
  color: var(--allan-primary);
  text-decoration: none;
  transition: color var(--allan-transition), opacity var(--allan-transition), transform var(--allan-transition);
}

a:hover,
a:focus {
  color: var(--allan-primary-hover);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--allan-text);
  font-family: var(--allan-font-base);
  font-weight: 600;
  letter-spacing: 0;
}

.btn,
button {
  border-radius: var(--allan-radius-sm);
}

.btn {
  transition: color var(--allan-transition), background-color var(--allan-transition), border-color var(--allan-transition), box-shadow var(--allan-transition), transform var(--allan-transition);
}

.btn:hover,
.btn:focus {
  transform: translateY(-1px);
}

.btn-primary,
.allan-btn-primary {
  border-color: var(--allan-primary);
  background: var(--allan-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(112, 64, 47, 0.16);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.allan-btn-primary:hover,
.allan-btn-primary:focus,
.allan-btn-primary:active {
  border-color: var(--allan-primary-hover);
  background: var(--allan-primary-hover);
  color: #fff;
  box-shadow: 0 12px 28px rgba(112, 64, 47, 0.24);
}

.btn-primary:disabled,
.allan-btn-primary:disabled {
  border-color: var(--allan-border-strong);
  background: var(--allan-border-strong);
  color: #fff;
  box-shadow: none;
  transform: none;
}

.btn-light,
.allan-btn-secondary {
  border-color: var(--allan-border);
  background: var(--allan-surface);
  color: var(--allan-text);
  box-shadow: 0 4px 12px rgba(33, 23, 19, 0.04);
}

.btn-light:hover,
.btn-light:focus,
.allan-btn-secondary:hover,
.allan-btn-secondary:focus {
  border-color: var(--allan-border-strong);
  background: var(--allan-surface-soft);
  color: var(--allan-text);
}

.form-control,
.form-select {
  min-height: var(--allan-control);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-md);
  background-color: var(--allan-surface);
  color: var(--allan-text);
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--allan-primary);
  box-shadow: 0 0 0 0.18rem rgba(112, 64, 47, 0.16);
}

.alert {
  border-radius: var(--allan-radius-md);
}

#alert {
  top: var(--allan-space-4);
  right: var(--allan-space-5);
  left: auto;
  width: min(calc(100vw - var(--allan-space-7)), 390px);
  margin-left: 0;
  transform: none;
}

#alert .allan-cart-alert {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: var(--allan-space-3);
  margin-bottom: var(--allan-space-3);
  padding: var(--allan-space-4);
  padding-right: var(--allan-space-6);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-sm);
  background: var(--allan-surface);
  color: var(--allan-text);
  box-shadow: var(--allan-shadow-md), 0 16px 38px rgba(33, 23, 19, 0.16);
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--allan-transition), transform var(--allan-transition);
}

#alert .allan-cart-alert.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

.allan-cart-minimum-alert {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: var(--allan-space-3);
  margin: 0 0 var(--allan-space-5);
  padding: var(--allan-space-4);
  padding-right: var(--allan-space-6);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-sm);
  background: var(--allan-surface);
  color: var(--allan-text);
  box-shadow: var(--allan-shadow-md), 0 16px 38px rgba(33, 23, 19, 0.12);
}

.allan-cart-alert-media {
  display: flex;
  grid-row: span 2;
  align-items: center;
  justify-content: center;
}

.allan-cart-alert-thumb-link,
.allan-cart-alert-thumb,
.allan-cart-alert-thumb-placeholder {
  width: 70px;
  height: 70px;
}

.allan-cart-alert-thumb-link,
.allan-cart-alert-thumb-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-sm);
  background: var(--allan-surface);
}

.allan-cart-alert-thumb {
  display: block;
  padding: var(--allan-space-1);
  object-fit: contain;
}

.allan-cart-alert-thumb-placeholder {
  color: var(--allan-primary);
  font-size: 22px;
}

.allan-cart-alert-copy {
  min-width: 0;
  padding-right: var(--allan-space-1);
}

.allan-cart-alert-title {
  margin: 0 0 var(--allan-space-1);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.allan-cart-alert-title a {
  color: var(--allan-text);
}

.allan-cart-alert-message {
  color: var(--allan-muted);
  font-size: 12px;
  line-height: 1.4;
}

.allan-cart-alert-message a {
  color: var(--allan-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.allan-cart-alert-message a:hover,
.allan-cart-alert-message a:focus {
  color: var(--allan-primary-hover);
}

.allan-cart-alert-minimum-note {
  display: grid;
  gap: 2px;
  margin-top: var(--allan-space-2);
  padding-top: var(--allan-space-2);
  border-top: 1px solid var(--allan-border);
}

.allan-cart-alert-minimum-note strong {
  color: var(--allan-primary-hover);
  font-size: 12px;
}

.allan-cart-alert-minimum-note span {
  color: var(--allan-muted);
}

.allan-cart-alert-close {
  position: absolute;
  top: var(--allan-space-2);
  right: var(--allan-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--allan-radius-pill);
  background: transparent;
  color: var(--allan-muted);
  font-size: 15px;
  line-height: 1;
}

.allan-cart-alert-close:hover,
.allan-cart-alert-close:focus {
  background: var(--allan-surface-soft);
  color: var(--allan-text);
}

.allan-cart-alert-actions {
  /* Un solo botón ("Ver carrito") desde que se quitó "Realizar pedido" — 1fr para
     que ocupe todo el ancho del mensaje en vez de la mitad de una grilla de 2
     columnas pensada para los dos botones que había antes. */
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--allan-space-2);
}

.allan-cart-alert-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: var(--allan-space-2) var(--allan-space-3);
  border: 1px solid var(--allan-primary);
  border-radius: var(--allan-radius-pill);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.allan-cart-alert-button-secondary {
  background: var(--allan-surface);
  color: var(--allan-primary-hover);
}

.allan-cart-alert-button-primary {
  background: var(--allan-primary);
  color: #fff;
}

.allan-cart-alert-button-secondary:hover,
.allan-cart-alert-button-secondary:focus {
  background: var(--allan-primary-soft);
  color: var(--allan-primary-hover);
}

.allan-cart-alert-button-primary:hover,
.allan-cart-alert-button-primary:focus {
  background: var(--allan-primary-hover);
  color: #fff;
}

.allan-cart-alert-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

.allan-cart-alert-button[aria-disabled="true"],
.allan-cart-alert-button.is-disabled {
  cursor: not-allowed;
  border-color: var(--allan-border-strong);
  background: var(--allan-border-strong);
  color: #fff;
  opacity: 0.72;
}

.allan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--allan-space-2);
  min-height: var(--allan-control-lg);
  padding: 12px 28px;
  border: 1px solid var(--allan-border-strong);
  border-radius: var(--allan-radius-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: color var(--allan-transition), background-color var(--allan-transition), border-color var(--allan-transition), box-shadow var(--allan-transition), transform var(--allan-transition);
}

.allan-btn:hover,
.allan-btn:focus {
  transform: translateY(-1px);
}

/* 03. Header
   ========================================================================== */

.allan-header-stack {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--allan-primary-hover);
  box-shadow: 0 8px 22px rgba(33, 23, 19, 0.16);
}

.allan-site-header {
  position: relative;
  background: var(--allan-primary);
}

.allan-site-header .container {
  padding-top: var(--allan-space-2);
  padding-bottom: var(--allan-space-2);
}

.allan-header-row {
  row-gap: var(--allan-space-3);
}

#logo img {
  max-height: 56px;
}

#logo a,
#logo h1 a {
  display: inline-flex;
  align-items: center;
}

.allan-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--allan-space-3);
  flex-wrap: nowrap;
}

.allan-header-search-wrap {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
}

.allan-header-search-form {
  margin-bottom: 0;
}

.allan-header-search-group {
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-surface);
  box-shadow: 0 10px 24px rgba(33, 23, 19, 0.14);
  transition: border-color var(--allan-transition), box-shadow var(--allan-transition);
}

.allan-header-search-group:focus-within {
  border-color: rgba(226, 166, 21, 0.72);
  box-shadow: 0 0 0 3px rgba(226, 166, 21, 0.18), 0 12px 26px rgba(33, 23, 19, 0.16);
}

.allan-header-search-input {
  min-height: 42px;
  padding-right: 0;
  padding-left: var(--allan-space-4);
  border: 0;
  background: transparent;
  color: var(--allan-text);
  font-size: 14px;
}

.allan-header-search-input:focus {
  box-shadow: none;
}

.allan-header-search-input::placeholder {
  color: var(--allan-muted);
}

.allan-header-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 var(--allan-space-4);
  border: 0;
  border-radius: 0 var(--allan-radius-pill) var(--allan-radius-pill) 0;
  background: transparent;
  color: var(--allan-primary);
  box-shadow: none;
}

.allan-header-search-button:hover,
.allan-header-search-button:focus {
  background: var(--allan-surface-soft);
  color: var(--allan-primary-hover);
  transform: none;
}

.allan-header-quicklinks {
  display: inline-flex;
  align-items: center;
  gap: var(--allan-space-2);
  flex: 0 0 auto;
}

.allan-header-icon-link,
.allan-header-cart-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  box-shadow: none;
}

.allan-header-icon-link:hover,
.allan-header-icon-link:focus,
.allan-header-cart-toggle:hover,
.allan-header-cart-toggle:focus,
.allan-header-cart-toggle:active,
.allan-header-cart-toggle.show {
  border-color: transparent;
  background: transparent;
  color: #fff;
  box-shadow: none;
  opacity: 0.82;
}

/* User dropdown */
.allan-user-dropdown {
  position: relative;
  display: inline-flex;
}

.allan-user-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--allan-success);
  border: 2px solid var(--allan-primary-hover);
  pointer-events: none;
}

.allan-user-menu {
  min-width: 190px;
  padding: var(--allan-space-2);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-md);
  background: var(--allan-surface);
  box-shadow: var(--allan-shadow-md);
}

.allan-user-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--allan-space-3);
  padding: var(--allan-space-3) var(--allan-space-3);
  border-radius: var(--allan-radius-sm);
  color: var(--allan-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: background var(--allan-transition), color var(--allan-transition);
}

.allan-user-menu .dropdown-item:hover,
.allan-user-menu .dropdown-item:focus {
  background: var(--allan-surface-soft);
  color: var(--allan-primary);
}

.allan-user-menu .dropdown-item i {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.7;
}

.allan-user-logout {
  color: var(--allan-danger) !important;
}

.allan-user-logout i {
  opacity: 1 !important;
}

.allan-user-logout:hover,
.allan-user-logout:focus {
  background: rgba(155, 67, 55, 0.1) !important;
  color: var(--allan-danger) !important;
}

.allan-user-menu .dropdown-divider {
  border-color: var(--allan-border);
}

/* 04. Header Cart
   ========================================================================== */

.allan-header-cart-wrap {
  min-width: 0;
  flex: 0 0 auto;
}

#cart {
  margin-bottom: 0;
}

.allan-header-cart-dropdown,
.allan-header-cart-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

.allan-header-cart-toggle {
  position: relative;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}

.allan-header-cart-toggle::after {
  display: none;
}

.allan-header-cart-toggle i {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-size: 22px;
  line-height: 1;
}

.allan-header-cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--allan-space-1);
  border: 2px solid var(--allan-primary);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-accent);
  color: var(--allan-primary-hover);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--allan-shadow-xs);
}

.allan-header-cart-menu {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  display: block;
  width: min(100vw, 440px);
  min-width: min(100vw, 440px);
  height: 100dvh;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--allan-surface);
  box-shadow: -20px 0 38px rgba(33, 23, 19, 0.16), 0 0 0 100vmax rgba(33, 23, 19, 0.30);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(32px, 0, 0) !important;
  transition: opacity 0.26s ease, visibility 0.26s ease, transform 0.26s ease;
  z-index: 1080;
}

.allan-header-cart-menu.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) !important;
}

.allan-header-cart-menu > li {
  height: 100%;
  list-style: none;
}

.allan-header-cart-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.allan-header-cart-panel-head,
.allan-header-cart-panel-foot {
  background: var(--allan-surface-soft);
}

.allan-header-cart-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Barra más baja a propósito (antes space-5=20px arriba/abajo, ~76px de alto total
     con el botón de cerrar de 36px) — el título no necesita tanto aire. */
  padding: var(--allan-space-3) var(--allan-space-6);
  border-bottom: 1px solid var(--allan-border);
}

.allan-header-cart-panel-title {
  margin: 0;
  color: var(--allan-text);
  font-size: 17px;
  font-weight: 600;
}

.allan-header-cart-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--allan-radius-pill);
  background: transparent;
  color: var(--allan-muted);
  font-size: 20px;
}

.allan-header-cart-panel-close:hover,
.allan-header-cart-panel-close:focus {
  background: var(--allan-surface);
  color: var(--allan-text);
}

.allan-header-cart-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--allan-space-5) var(--allan-space-6);
}

.allan-header-cart-list {
  display: grid;
  gap: var(--allan-space-5);
}

/* Un solo layout de 2 columnas (miniatura + contenido) para escritorio Y móvil — antes
   había un grid de 3 columnas en escritorio (miniatura/texto/columna lateral angosta de
   108px con cantidad+precio+borrar apilados) que se colapsaba a otro grid distinto en
   móvil. La columna lateral de 108px nunca tuvo espacio real para un stepper de
   cantidad editable + precio + botón de borrar, y por eso el texto/íconos se
   amontonaban. Ahora cantidad/precio/borrar viven en su propia fila
   (.allan-header-cart-row) a todo el ancho de la columna de contenido, debajo del
   nombre — el mismo patrón en cualquier ancho de pantalla, sin overrides duplicados
   por breakpoint. */
.allan-header-cart-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: var(--allan-space-4);
}

.allan-header-cart-thumb-cell,
.allan-header-cart-thumb-link,
.allan-header-cart-thumb {
  width: 64px;
  height: 64px;
}

.allan-header-cart-thumb-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Sin borde/padding/fondo a propósito: las fotos de producto de este catálogo ya
   vienen cuadradas, así que ese "marco" solo encogía la foto real dentro de una caja
   más grande y vacía alrededor — desperdiciaba espacio en vez de aprovecharlo. La foto
   ahora llena las 64×64 (56×56 en móvil) por completo, recortando con object-fit:cover
   si algún día llega una foto no cuadrada; el radio queda como único acabado. También
   se quitó la clase `img-thumbnail` de Bootstrap en el twig — dejarla puesta habría
   vuelto a agregar su propio borde/padding por debajo de estas reglas. */
.allan-header-cart-thumb {
  display: block;
  border-radius: var(--allan-radius-sm);
  object-fit: cover;
}

.allan-header-cart-copy {
  display: grid;
  min-width: 0;
  gap: var(--allan-space-2);
  padding-top: var(--allan-space-1);
}

.allan-header-cart-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--allan-space-3);
}

.allan-header-cart-product {
  display: block;
  min-width: 0;
  color: var(--allan-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.allan-header-cart-meta {
  color: var(--allan-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Cantidad (editable) + precio + borrar, siempre en su propia fila a todo el ancho —
   nunca compitiendo por espacio con el nombre del producto. */
.allan-header-cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--allan-space-3);
  margin-top: var(--allan-space-1);
}

.allan-header-cart-row form {
  margin: 0;
  min-width: 0;
}

.allan-header-cart-total {
  flex-shrink: 0;
  color: var(--allan-text);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

/* El stepper .allan-qty-* (compartido con carrito de página completa y producto) viene
   dimensionado para esas páginas más anchas — aquí, junto a una miniatura de 64px y una
   fila compacta, se veía desproporcionadamente grande. Se reduce SOLO el tamaño
   (botones/ancho del input), nunca el font-size del input: ese campo es un
   <input type="text"> real y bajarlo de 16px reintroduce el zoom automático de
   Safari/iOS (ver fix de zoom del 2026-08-21) — por eso font-size no se toca aquí. */
.allan-header-cart-row .allan-qty-stepper {
  padding: var(--allan-space-1) var(--allan-space-2);
  gap: var(--allan-space-1);
}

.allan-header-cart-row .allan-qty-control .allan-qty-minus,
.allan-header-cart-row .allan-qty-control .allan-qty-plus {
  width: 24px;
  height: 24px;
}

.allan-header-cart-row .allan-qty-button i {
  font-size: 10px;
}

.allan-header-cart-row .allan-qty-input {
  width: 26px;
  min-width: 26px;
  height: 24px;
}

.allan-header-cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-surface);
  color: var(--allan-primary);
}

.allan-header-cart-remove:hover,
.allan-header-cart-remove:focus {
  border-color: var(--allan-primary);
  background: var(--allan-primary-soft);
  color: var(--allan-primary-hover);
}

.allan-header-cart-empty {
  color: var(--allan-muted);
  font-size: 14px;
}

.allan-header-cart-panel-foot {
  display: grid;
  flex: 0 0 auto;
  gap: var(--allan-space-5);
  margin-top: auto;
  padding: var(--allan-space-5) var(--allan-space-6) var(--allan-space-6);
  border-top: 1px solid var(--allan-border);
}

.allan-header-cart-totals,
.allan-header-cart-actions {
  display: grid;
  gap: var(--allan-space-3);
}

.allan-header-cart-minimum {
  display: grid;
  gap: var(--allan-space-1);
  padding: var(--allan-space-3);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-sm);
  background: var(--allan-primary-soft);
  color: var(--allan-text);
  font-size: 12px;
  line-height: 1.4;
}

.allan-header-cart-minimum strong {
  color: var(--allan-primary-hover);
  font-size: 13px;
}

.allan-header-cart-minimum span {
  color: var(--allan-muted);
}

.allan-header-cart-total-row {
  display: flex;
  justify-content: space-between;
  gap: var(--allan-space-4);
  color: var(--allan-muted);
  font-size: 14px;
}

.allan-header-cart-total-row.is-total {
  color: var(--allan-text);
  font-size: 16px;
  font-weight: 700;
}

.allan-header-cart-actions .allan-btn {
  width: 100%;
}

/* 05. Main Navigation
   ========================================================================== */

#menu.navbar {
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  background: var(--allan-primary-hover) !important;
  box-shadow: none;
}

.allan-site-menu-container {
  padding-bottom: var(--allan-space-2);
  background: var(--allan-primary-hover);
}

#navbar-menu {
  width: 100%;
}

/* Barra móvil que agrupa el botón "Categoría" + el selector de ciudad en una sola
   fila (antes el selector de ciudad vivía en .allan-site-location-mobile, una fila
   entera aparte solo para él). En escritorio no se usa — d-lg-none. */
.allan-menu-mobile-bar {
  width: 100%;
}

/* Selector "#menu .nav-link, ..." de más abajo no aplica aquí: se usa el compuesto
   ".allan-site-location.allan-menu-mobile-location" (2 clases) a propósito, para
   garantizar que estas reglas le ganen a ".allan-site-location" (1 clase, definida
   más abajo en el archivo) sin depender del orden de las reglas en el CSS. */
.allan-menu-mobile-location.allan-site-location {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--allan-space-1);
  padding: var(--allan-space-3) var(--allan-space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  white-space: nowrap;
}

/* Miniatura de categoría (solo nivel 1, ver theme.php::addMenuCategoryImages) y
   flecha de "esto tiene subcategorías" — ambas ocultas en escritorio a propósito
   (el usuario prefirió dejar el nav de escritorio como está) y solo visibles en el
   acordeón móvil, dentro de @media (max-width: 991.98px) más abajo. */
.allan-menu-cat-thumb,
.allan-menu-cat-caret {
  display: none;
}

.allan-menu-cat-label {
  min-width: 0;
}

#menu .navbar-nav {
  width: 100%;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--allan-space-1);
  padding: var(--allan-space-1) 0 0;
}

#menu .nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Categorías de nivel 1, con o sin subcategorías, usan la MISMA clase .nav-link
   (antes las sin subcategorías usaban .dropdown-item — se unificó a .nav-link para
   que no queden sujetas a ningún default de Bootstrap para .dropdown-item que
   .nav-link no tenga, y viceversa. .dropdown-item queda reservado para los links
   DENTRO de un .dropdown-menu ya abierto, ver más abajo). */
#menu .nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--allan-space-3) var(--allan-space-4);
  border-radius: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

#menu .nav-link.dropdown-toggle::after {
  margin-left: var(--allan-space-2);
}

/* :focus-visible en vez de :focus — un <a> clickeado (ej. el toggle de una
   categoría con subcategorías, que no navega, solo abre/cierra) retiene el foco
   de teclado después del clic aunque el mouse ya se haya movido a otra parte.
   Con :focus plano ese foco "pegado" se veía como un fondo café claro persistente
   sobre el café oscuro del menú. :focus-visible solo se activa con navegación por
   teclado (Tab), no con clic de mouse — mismo patrón ya usado en .checkout-switches. */
#menu .nav-link:hover,
#menu .nav-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

#menu .nav-item::after {
  content: "";
  position: absolute;
  right: var(--allan-space-4);
  bottom: 0;
  left: var(--allan-space-4);
  height: 2px;
  border-radius: var(--allan-radius-pill);
  background: var(--allan-accent);
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: center;
  transition: opacity var(--allan-transition), transform var(--allan-transition);
}

#menu .nav-item:hover::after,
#menu .nav-item:focus-within::after {
  opacity: 1;
  transform: scaleX(1);
}

#menu .dropdown-menu {
  top: calc(100% + 1px);
  left: 0;
  margin-top: 0;
  padding: var(--allan-space-3);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-md);
  background: var(--allan-surface);
  box-shadow: var(--allan-shadow-md);
  z-index: 1030;
}

#menu .nav-item.dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--allan-space-3);
}

#menu .dropdown-menu .dropdown-item {
  display: block;
  min-height: auto;
  padding: 10px var(--allan-space-3);
  border-radius: var(--allan-radius-sm);
  color: var(--allan-text);
}

#menu .dropdown-menu .dropdown-item:hover,
#menu .dropdown-menu .dropdown-item:focus {
  color: var(--allan-primary-hover);
  background: var(--allan-primary-soft);
}

#menu .dropdown-divider {
  margin: var(--allan-space-2) 0;
  border-color: var(--allan-border);
}

#menu .dropdown-inner ul {
  margin-bottom: 0;
}

#category.navbar-toggler {
  /* Ya no ocupa toda la fila — comparte espacio con .allan-menu-mobile-location
     (ver arriba), que ahora vive en la misma barra en vez de en una fila aparte. */
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  min-height: 48px;
  padding: var(--allan-space-3) 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  box-shadow: none;
}

#category.navbar-toggler::after {
  content: "\f107";
  float: right;
  font: var(--fa-font-solid);
  line-height: 1.5;
  transition: transform var(--allan-transition);
}

/* Usada por #menu .nav-item.dropdown.is-open > .dropdown-menu, dentro del media
   query móvil más abajo — fade + slide-down corto al abrir el acordeón de
   subcategorías. */
@keyframes allanMenuSubmenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.allan-menu-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: var(--allan-space-2);
}

#category.navbar-toggler[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.allan-site-location {
  align-items: center;
  gap: var(--allan-space-2);
  padding: var(--allan-space-3) var(--allan-space-4);
  color: var(--allan-accent);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.allan-site-location:hover,
.allan-site-location:focus {
  color: var(--allan-accent-hover);
}

@media (min-width: 992px) and (hover: hover) {
  #menu .nav-item.dropdown:hover .dropdown-menu,
  #menu .nav-item.dropdown:focus-within .dropdown-menu {
    display: block;
  }
}

/* 05b. City Selection Modal
   ========================================================================== */

#allan-city-modal .modal-content {
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-lg);
  box-shadow: var(--allan-shadow-md);
}

#allan-city-modal .modal-title {
  color: var(--allan-text);
  font-family: var(--allan-font-base);
}

#allan-city-modal .allan-city-btn.btn-outline-secondary {
  border-color: var(--allan-border-strong);
  color: var(--allan-text);
}

#allan-city-modal .allan-city-btn.btn-outline-secondary:hover,
#allan-city-modal .allan-city-btn.btn-outline-secondary:focus {
  border-color: var(--allan-primary);
  background: var(--allan-surface-soft);
  color: var(--allan-primary);
}

#allan-city-modal .spinner-border.text-primary {
  color: var(--allan-primary) !important;
}

/* 06. Shared Page Elements
   ========================================================================== */

/* Hero de página interior compartido (contacto/nosotros/careers/tracking) —
   antes eran 4 copias idénticas de este mismo bloque, una por página. */
.allan-page-hero-banner {
  position: relative;
  width: 100%;
  height: min(30vw, 280px);
  overflow: hidden;
}

.allan-page-hero-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.allan-page-hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
}

.allan-page-hero-breadcrumb-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.allan-page-hero-breadcrumb {
  margin-bottom: 0;
  padding: var(--allan-space-3) 0;
}

.allan-page-hero-breadcrumb.breadcrumb .breadcrumb-item,
.allan-page-hero-breadcrumb.breadcrumb a,
.allan-page-hero-breadcrumb.breadcrumb > li:first-child > a::before {
  color: rgba(255, 255, 255, 0.92);
}

.allan-page-hero-breadcrumb.breadcrumb a:hover,
.allan-page-hero-breadcrumb.breadcrumb a:focus {
  color: #fff;
}

.allan-page-hero-breadcrumb.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.6);
}

.allan-header-stack + main:has(> .allan-page-hero-banner) {
  padding-top: 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-bottom: var(--allan-space-5);
  padding: var(--allan-space-2) 0 var(--allan-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: var(--allan-muted);
  margin: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  float: none;
  padding: 0 var(--allan-space-2);
  color: var(--allan-soft);
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--allan-space-1);
  color: var(--allan-muted);
}

.breadcrumb > li:first-child > a::before {
  content: "\f015";
  margin-right: var(--allan-space-1);
  color: var(--allan-muted);
  font: var(--fa-font-solid);
  font-size: 12px;
}

.breadcrumb i {
  display: none;
}

.carousel {
  overflow: hidden;
  border-radius: var(--allan-radius-lg);
  background: var(--allan-surface-warm);
  box-shadow: var(--allan-shadow-md);
}

.carousel .carousel-item img,
.carousel .img-fluid {
  width: 100%;
  object-fit: cover;
}

.carousel-indicators {
  gap: var(--allan-space-2);
  bottom: var(--allan-space-4);
}

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.carousel-indicators .active {
  background-color: var(--allan-primary);
}

.carousel-control-prev,
.carousel-control-next {
  width: 64px;
  opacity: 1;
}

.carousel-control-prev span,
.carousel-control-next span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--allan-primary);
  box-shadow: var(--allan-shadow-sm);
}

.carousel.allan-banner-secondary {
  width: min(100%, 360px);
  margin-inline: auto;
  background: transparent;
  box-shadow: var(--allan-shadow-sm);
}

.carousel.allan-banner-secondary .carousel-item img,
.carousel.allan-banner-secondary .img-fluid {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  padding: 0;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

footer {
  /* Core OpenCart pone position:absolute;bottom:-1px — esto lo anula. */
  position: static;
  bottom: auto;
  flex-shrink: 0;
  margin-top: var(--allan-space-9);
  color: #f8efe8;
  background: var(--allan-primary-hover);
}

footer .container {
  padding-top: var(--allan-space-8);
  padding-bottom: var(--allan-space-7);
}

footer h5 {
  position: relative;
  margin-bottom: var(--allan-space-4);
  color: #fff;
  font-size: 18px;
}

footer h5::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin-top: var(--allan-space-2);
  background: rgba(255, 255, 255, 0.34);
}

footer a,
footer p,
footer li {
  color: #f8efe8;
}

footer a:hover,
footer a:focus {
  color: #fff;
}

footer hr {
  margin-top: var(--allan-space-6);
  margin-bottom: var(--allan-space-5);
  border-color: rgba(255, 255, 255, 0.16);
}

footer p {
  margin-bottom: 0;
  font-size: 14px;
  text-align: center;
}

.allan-footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--allan-space-4);
}

.allan-footer-logo img {
  display: block;
  height: 72px;
  width: auto;
}

.allan-footer-logo {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}

.allan-footer-social {
  display: flex;
  gap: var(--allan-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.allan-footer-social-link {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #f8efe8;
}

.allan-footer-social-link svg {
  width: 22px;
  height: 22px;
}

.allan-footer-social-link:hover,
.allan-footer-social-link:focus {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.allan-footer-brand-divider {
  margin-top: var(--allan-space-5);
  margin-bottom: var(--allan-space-6);
  border-color: rgba(255, 255, 255, 0.16);
}

/* 07. Home and Banners
   ========================================================================== */

.allan-home-page {
  padding-top: 0;
}

/* Video de fondo a todo el ancho, arriba del contenido */
.allan-home-video-banner {
  position: relative;
  width: 100%;
  height: min(60vw, 520px);
  overflow: hidden;
  background: var(--allan-text);
}

.allan-home-video-banner-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Buscador + categorías */
.allan-home-search {
  padding: var(--allan-space-7) 0 var(--allan-space-6);
  text-align: center;
}

.allan-home-search-bar {
  display: flex;
  align-items: center;
  max-width: 640px;
  margin: 0 auto var(--allan-space-7);
  padding: var(--allan-space-2) var(--allan-space-2) var(--allan-space-2) var(--allan-space-4);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-surface);
  box-shadow: var(--allan-shadow-sm);
}

.allan-home-search-icon {
  color: var(--allan-soft);
  margin-right: var(--allan-space-3);
}

.allan-home-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--allan-text);
  font-size: 15px;
}

.allan-home-search-input:focus {
  outline: none;
}

.allan-home-search-btn {
  flex: 0 0 auto;
  padding: var(--allan-space-3) var(--allan-space-6);
  border: 0;
  border-radius: var(--allan-radius-pill);
  background: var(--allan-primary);
  color: #fff;
  font-weight: 700;
  transition: background var(--allan-transition);
}

.allan-home-search-btn:hover {
  background: var(--allan-primary-hover);
}

.allan-home-section-title {
  margin-bottom: var(--allan-space-6);
  color: var(--allan-primary);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
}

.allan-home-section-title span {
  font-family: var(--allan-font-accent);
  font-weight: 400;
}

.allan-home-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--allan-space-5);
}

.allan-home-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--allan-space-3);
  padding: var(--allan-space-4);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-lg);
  background: var(--allan-surface);
  color: var(--allan-text);
  text-align: center;
  transition: transform var(--allan-transition), box-shadow var(--allan-transition), border-color var(--allan-transition);
}

.allan-home-cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--allan-accent);
  box-shadow: var(--allan-shadow-sm);
  color: var(--allan-text);
}

.allan-home-cat-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--allan-radius-md);
  background: var(--allan-surface-soft);
}

.allan-home-cat-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.allan-home-cat-name {
  font-size: 14px;
  font-weight: 700;
}

/* Hero: video + encabezado grande */
.allan-home-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--allan-space-8);
  padding: var(--allan-space-7) 0;
}

.allan-home-hero-media {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--allan-radius-lg);
  box-shadow: var(--allan-shadow-md);
}

.allan-home-hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.allan-home-hero-heading {
  margin: 0 0 var(--allan-space-4);
  color: var(--allan-primary);
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
}

.allan-home-hero-heading span {
  display: block;
  color: var(--allan-primary);
  font-family: var(--allan-font-accent);
  font-weight: 400;
}

.allan-home-hero-text {
  color: var(--allan-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* Marquesina de imágenes de producto */
.allan-home-marquee {
  overflow: hidden;
  margin: var(--allan-space-7) -0.75rem var(--allan-space-7);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.allan-home-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--allan-space-5);
  animation: allanMarqueeScroll 32s linear infinite;
}

.allan-home-marquee-img {
  flex: 0 0 auto;
  width: 220px;
  height: 160px;
  border-radius: var(--allan-radius-md);
  object-fit: cover;
  box-shadow: var(--allan-shadow-xs);
}

@keyframes allanMarqueeScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Visítanos: video + texto (orden invertido respecto al hero) */
.allan-home-visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--allan-space-8);
  padding: var(--allan-space-6) 0 var(--allan-space-8);
}

.allan-home-visit-media {
  order: 2;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--allan-radius-lg);
  box-shadow: var(--allan-shadow-md);
}

.allan-home-visit-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.allan-home-visit-copy {
  order: 1;
}

.allan-home-visit-text {
  color: var(--allan-muted);
  font-size: 16px;
  line-height: 1.7;
}

.allan-home-visit-text + .allan-home-visit-text {
  margin-top: var(--allan-space-4);
}

/* Imagen de cierre a todo el ancho */
.allan-home-banner-image {
  margin: 0 -0.75rem var(--allan-space-7);
}

.allan-home-banner-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Botones flotantes de redes sociales */
.allan-social-float {
  position: fixed;
  left: var(--allan-space-5);
  bottom: var(--allan-space-5);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  gap: var(--allan-space-3);
}

.allan-social-float-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  box-shadow: var(--allan-shadow-md);
  transition: transform var(--allan-transition);
}

.allan-social-float-btn:hover {
  transform: scale(1.08);
  color: #fff;
}

.allan-social-float-btn.is-whatsapp {
  background: #25d366;
}

.allan-social-float-btn.is-facebook {
  background: #1877f2;
}

.allan-social-float-btn.is-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.allan-hero-slider {
  position: relative;
  width: 100%;
  margin-bottom: var(--allan-space-7);
}

.allan-hero-viewport {
  overflow: hidden;
  border-radius: var(--allan-radius-lg);
  background: linear-gradient(180deg, var(--allan-primary-soft) 0%, var(--allan-accent) 100%);
  box-shadow: var(--allan-shadow-md);
}

.allan-hero-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: max-content;
  animation: allanHeroScroll 46s linear infinite;
}

.allan-hero-slide {
  position: relative;
  flex: 0 0 auto;
  width: min(72vw, 980px);
  min-width: min(72vw, 980px);
}

.allan-hero-link {
  display: block;
  height: 100%;
}

.allan-hero-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: contain;
}

.allan-hero-slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(33, 23, 19, 0.08));
  pointer-events: none;
}

@keyframes allanHeroScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 08. Category Page
   ========================================================================== */

.allan-category-page {
  max-width: 1480px;
  padding-right: var(--allan-space-6);
  padding-bottom: var(--allan-space-8);
  padding-left: var(--allan-space-6);
}

.allan-category-page #column-left,
.allan-category-page #column-right {
  display: none;
}

.allan-category-content,
.allan-category-hero-main {
  width: 100%;
  min-width: 0;
}

.allan-category-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr);
  align-items: center;
  gap: var(--allan-space-6);
  margin-bottom: var(--allan-space-5);
  /*padding: var(--allan-space-5);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-lg);
  background: var(--allan-surface);
  box-shadow: var(--allan-shadow-sm);*/
}

.allan-category-title {
  margin: 0;
  color: var(--allan-primary);
  font-family: var(--allan-font-accent);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  text-align: left;
}

.allan-category-hero-media {
  display: flex;
  justify-content: flex-end;
}

.allan-category-hero-image {
  max-height: 180px;
  padding: var(--allan-space-2);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-md);
  background: var(--allan-surface);
  object-fit: contain;
  box-shadow: var(--allan-shadow-xs);
}

.allan-category-refine {
  margin-bottom: var(--allan-space-5);
}

.allan-category-section-title {
  margin: 0 0 var(--allan-space-3);
  color: var(--allan-text);
  font-size: 20px;
}

.allan-category-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--allan-space-3);
}

.allan-category-chip {
  display: flex;
  align-items: center;
  gap: var(--allan-space-3);
  min-height: 56px;
  padding: var(--allan-space-3) var(--allan-space-4);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-surface);
  color: var(--allan-text);
  box-shadow: var(--allan-shadow-xs);
}

.allan-category-chip:hover,
.allan-category-chip:focus {
  border-color: var(--allan-border-strong);
  color: var(--allan-primary-hover);
  box-shadow: var(--allan-shadow-sm);
}

.allan-category-chip-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--allan-radius-pill);
  background: var(--allan-primary-soft);
  color: var(--allan-primary);
  font-size: 12px;
}

.allan-category-chip-label {
  font-size: 14px;
  font-weight: 600;
}

.allan-category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--allan-space-5);
  margin-bottom: var(--allan-space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /*padding: var(--allan-space-4) var(--allan-space-5);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-lg);
  background: var(--allan-surface);
  box-shadow: var(--allan-shadow-xs);*/
}

.allan-category-toolbar-left,
.allan-category-toolbar-right {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--allan-space-4);
}

.allan-category-toolbar .btn-group {
  flex-wrap: nowrap;
}

.allan-category-view-toggle .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--allan-control);
  height: var(--allan-control);
  padding: 0;
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-md);
  background: var(--allan-surface);
  color: var(--allan-muted);
}

.allan-category-view-toggle .btn.active,
.allan-category-view-toggle .btn:hover,
.allan-category-view-toggle .btn:focus {
  border-color: var(--allan-primary);
  color: var(--allan-primary);
  background: var(--allan-primary-soft);
}

.allan-category-compare-link {
  display: inline-flex;
  align-items: center;
  gap: var(--allan-space-2);
  color: var(--allan-text);
  font-size: 15px;
  font-weight: 600;
}

.allan-category-select-group {
  display: flex;
  align-items: center;
  gap: var(--allan-space-3);
}

.allan-category-select-group label {
  margin: 0;
  color: var(--allan-muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.allan-category-select-group .form-select {
  min-width: 168px;
}

.allan-category-limit-group .form-select {
  min-width: 88px;
}

.allan-category-grid {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.25rem;
  row-gap: var(--allan-space-4);
}

.allan-category-list {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  row-gap: 0;
}

.allan-category-grid .col {
  display: flex;
}

.allan-category-grid .product-thumb {
  width: 100%;
  height: 100%;
}

.allan-category-pagination {
  align-items: center;
  margin-top: var(--allan-space-7);
  color: var(--allan-muted);
}

.allan-category-pagination .pagination {
  --bs-pagination-color: var(--allan-primary);
  --bs-pagination-hover-color: var(--allan-primary-hover);
  --bs-pagination-active-bg: var(--allan-primary);
  --bs-pagination-active-border-color: var(--allan-primary);
}

.allan-category-empty {
  padding: var(--allan-space-7);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-lg);
  background: var(--allan-surface);
  text-align: center;
  box-shadow: var(--allan-shadow-xs);
}

/* Vista "Lista" (toggle en category.twig): en el core de OpenCart .product-thumb NO es
   flex por defecto, así que al ponerle display:flex en modo lista queda horizontal
   (fila, el valor por defecto de flex-direction). Acá .product-thumb YA es
   flex TODO el tiempo, pero con flex-direction:column fijo — sin este bloque nunca
   se vuelve fila, así que la vista "lista" se veía idéntica a la cuadrícula (misma
   tarjeta vertical, solo 1 por fila). Se aplica en TODOS los anchos (imagen a la
   izquierda, texto/descripción/precio/botones a la derecha) — no solo en desktop —
   con una imagen más chica en móvil para que el contenido de la derecha tenga espacio. */
.allan-category-list .product-thumb {
  flex-direction: row;
  align-items: stretch;
  /* Mismo borde que la tarjeta de cuadrícula (antes se quitaba por completo en modo
     lista). Como las filas quedan pegadas (row-gap:0), el borde inferior de una fila
     y el superior de la siguiente se solaparían en una línea de ~2px — se evita con
     margin-top:-1px en ".col + .col" (ver abajo), que hace que ambos bordes se
     dibujen exactamente sobre el mismo píxel en vez de uno debajo del otro. */
  border: 1px solid var(--thumb-card-border);
  border-radius: 0;
  box-shadow: none;
}

.allan-category-list .col + .col {
  margin-top: -1px;
}

.allan-category-list .product-thumb:hover {
  /* Sin fondo de hover (antes var(--allan-surface-soft), un café claro) — el usuario
     no lo quiere en la vista lista. border-color/box-shadow/transform se mantienen
     para anular el "lift" (sombra + translateY) del hover de la tarjeta base. */
  border-color: var(--thumb-card-border);
  box-shadow: none;
  transform: none;
}

.allan-category-list .product-thumb .image {
  flex: 0 0 220px;
  width: 220px;
  /* Menos aire alrededor de la imagen que en la tarjeta de cuadrícula, para que la
     fila quede compacta de arriba a abajo. */
  padding: var(--allan-space-2);
}

.allan-category-list .product-thumb .content {
  align-items: flex-start;
  text-align: left;
  position: relative;
  /* Ídem: menos padding arriba/lados que en cuadrícula (el de abajo se deja igual,
     está reservado para la altura de la barra de botones, ver .content más abajo). */
  padding-top: var(--allan-space-2);
  padding-right: var(--allan-space-3);
  padding-left: var(--allan-space-3);
}

.allan-category-list .product-thumb .description p {
  text-align: left;
}

.allan-category-list .product-thumb .button {
  width: auto;
  margin-left: 0;
  /* El border-left que tenía antes (copiado del patrón del core de OpenCart) se ve
     como un borde suelto/descolgado en esta tarjeta. El border-top (heredado de la
     tarjeta base, separa descripción de botones) también se quita a pedido del
     usuario — sin línea divisoria entre el texto y los 3 botones. */
  border-left: none;
  border-top: none;
}

/* 09. Product Cards
   ========================================================================== */

.product-thumb {
  --thumb-card-bg: var(--allan-surface);
  --thumb-card-border: var(--allan-border);
  --thumb-card-border-hover: var(--allan-border-strong);
  --thumb-card-shadow: var(--allan-shadow-xs);
  --thumb-card-shadow-hover: 0 16px 34px rgba(33, 23, 19, 0.12);
  --thumb-title-color: var(--allan-text);
  --thumb-copy-color: var(--allan-muted);
  --thumb-price-color: var(--allan-primary);
  --thumb-action-color: var(--allan-muted);
  --thumb-divider: var(--allan-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  border: 1px solid var(--thumb-card-border);
  border-radius: var(--allan-radius-sm);
  background: var(--thumb-card-bg);
  box-shadow: var(--thumb-card-shadow);
  transition: border-color var(--allan-transition), box-shadow var(--allan-transition), transform var(--allan-transition);
  position: relative;
}

/* Guard (hover: hover) — sin esto, un tap en pantalla táctil puede dejar la tarjeta
   "pegada" con la sombra/elevación (y el zoom de la imagen) hasta que el usuario
   toca otra parte: es un efecto pensado para mouse que se filtraba a touch. Mismo
   patrón de guard que ya usa el dropdown del menú (sección 05, min-width:992px). */
@media (hover: hover) {
  .product-thumb:hover {
    border-color: var(--allan-border-strong);
    box-shadow: var(--thumb-card-shadow-hover);
    transform: translateY(-4px);
    z-index: 1;
  }

  .product-thumb:hover .image img {
    transform: scale(1.04);
  }
}

.product-thumb .image {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--allan-space-3);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--allan-surface);
}

.product-thumb .image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--allan-radius-xs);
  object-fit: contain;
  transition: transform 0.3s ease;
}

.product-thumb .content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--allan-space-3) var(--allan-space-4) calc(38px + var(--allan-space-2) * 2 + var(--allan-space-1));
}

.product-thumb .description {
  margin-bottom: var(--allan-space-2);
}

.product-thumb .content h4 {
  margin-bottom: var(--allan-space-2);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.product-thumb .content h4 a {
  color: var(--thumb-title-color);
}

.product-thumb .content h4 a:hover,
.product-thumb .content h4 a:focus {
  color: var(--allan-primary);
}

.product-thumb .description p {
  display: -webkit-box;
  min-height: 38px;
  text-align: center;
  margin-bottom: var(--allan-space-2);
  overflow: hidden;
  color: var(--thumb-copy-color);
  font-size: 13px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.price {
  margin-top: var(--allan-space-1);
  margin-bottom: 0;
  color: var(--thumb-price-color);
}

.price-new {
  display: inline-block;
  color: var(--allan-primary);
  font-size: 19px;
  font-weight: 700;
}

.price-old {
  margin-left: var(--allan-space-2);
  color: var(--allan-muted);
  font-size: 14px;
  text-decoration: line-through;
}

.price-tax {
  display: block;
  margin-top: var(--allan-space-1);
  color: var(--thumb-copy-color);
  font-size: 12px;
}

.rating {
  margin-bottom: var(--allan-space-2);
  color: #a67c3d;
}

.product-thumb form {
  margin: 0;
}

.product-thumb .button {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding-top: var(--allan-space-2);
  padding-bottom: var(--allan-space-2);
  border-top: 1px solid var(--thumb-divider);
  gap: var(--allan-space-2);
  padding-left: var(--allan-space-4);
  padding-right: var(--allan-space-4);
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), var(--thumb-card-bg));
}

.product-thumb .button button {
  width: auto !important;
  float: none !important;
  margin: 0 !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--allan-radius-sm);
  background: transparent;
  color: var(--thumb-action-color);
  box-shadow: none;
  transition: all var(--allan-transition);
}

.product-thumb .button button:hover,
.product-thumb .button button:focus {
  background-color: var(--allan-surface-soft);
  color: var(--allan-primary);
  transform: translateY(-1px);
}

.product-thumb .button .button-cart-main {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  padding: 0 var(--allan-space-3);
  border: 1px solid var(--allan-primary);
  gap: var(--allan-space-2);
  background: var(--allan-primary);
  box-shadow: 0 8px 18px rgba(112, 64, 47, 0.18);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  color: #fff !important;
}

.product-thumb .button .button-cart-main:hover,
.product-thumb .button .button-cart-main:focus {
  border-color: var(--allan-primary-hover);
  background-color: var(--allan-primary-hover);
  color: #fff !important;
}

.product-thumb .button .button-cart-main i {
  font-size: 14px;
  text-align: center;
}

.product-thumb .button .button-cart-main span {
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}

.product-thumb .button .button-icon {
  flex: 0 0 38px;
  width: 38px;
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-surface);
  color: var(--allan-muted);
}

.product-thumb .button .button-icon:hover,
.product-thumb .button .button-icon:focus {
  border-color: var(--allan-primary);
  background: var(--allan-primary-soft);
  color: var(--allan-primary);
}

.product-thumb .button button i {
  font-size: 15px;
  line-height: 1;
}

/* 10. Product Detail
   ========================================================================== */

.allan-product-page {
  --cart-ink: var(--allan-text);
  --cart-line-strong: var(--allan-border-strong);
  --cart-panel: var(--allan-surface-soft);
  --cart-surface: var(--allan-surface);
  --cart-primary: var(--allan-primary);
  --checkout-surface: var(--allan-surface);
  --checkout-surface-soft: var(--allan-surface-soft);
  --checkout-border: var(--allan-border);
  --checkout-border-strong: var(--allan-border-strong);
  --checkout-ink: var(--allan-text);
  --checkout-ink-soft: var(--allan-muted);
  --checkout-accent: var(--allan-primary);
  --checkout-accent-strong: var(--allan-primary-hover);
  --checkout-shadow: var(--allan-shadow-sm);
  --checkout-shadow-soft: var(--allan-shadow-sm);
  max-width: 1480px;
  padding-right: var(--allan-space-6);
  padding-bottom: var(--allan-space-8);
  padding-left: var(--allan-space-6);
}

.allan-product-page #column-left,
.allan-product-page #column-right {
  display: none;
}

.allan-product-content {
  min-width: 0;
}

.allan-product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  align-items: start;
  gap: var(--allan-space-7);
  margin-bottom: var(--allan-space-7);
}

.allan-product-gallery,
.allan-product-summary {
  min-width: 0;
}

.allan-product-gallery-panel {
  overflow: hidden;
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-sm);
  background: var(--allan-surface);
  box-shadow: var(--allan-shadow-sm);
}

.allan-product-main-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(66vw, 620px);
  padding: var(--allan-space-7);
  background: var(--allan-surface);
  cursor: zoom-in;
}

.allan-product-main-image {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.allan-product-main-link:hover .allan-product-main-image {
  transform: scale(1.08);
}

.allan-product-zoom-icon {
  position: absolute;
  right: var(--allan-space-4);
  bottom: var(--allan-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--allan-primary);
  box-shadow: var(--allan-shadow-sm);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--allan-transition), transform var(--allan-transition);
}

.allan-product-main-link:hover .allan-product-zoom-icon {
  opacity: 1;
  transform: scale(1);
}

.allan-product-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--allan-space-3);
  padding: var(--allan-space-4);
  border-top: 1px solid var(--allan-border);
  background: var(--allan-surface-soft);
}

.allan-product-thumb-link {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: var(--allan-space-2);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-sm);
  background: var(--allan-surface);
  transition: border-color var(--allan-transition), box-shadow var(--allan-transition), transform var(--allan-transition);
}

.allan-product-thumb-link:hover,
.allan-product-thumb-link:focus {
  border-color: var(--allan-primary);
  box-shadow: var(--allan-shadow-xs);
  transform: translateY(-1px);
}

.allan-product-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.allan-product-summary-card {
  position: sticky;
  top: calc(var(--allan-space-7) + 120px);
  overflow: hidden;
}

.allan-product-summary-head {
  padding: var(--allan-space-6);
  border-bottom: 1px solid var(--allan-border);
}

.allan-product-brand {
  display: inline-flex;
  margin-bottom: var(--allan-space-2);
  color: var(--allan-primary);
  font-size: 14px;
  font-weight: 700;
}

.allan-product-title {
  margin: 0;
  color: var(--allan-text);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
}

.allan-product-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--allan-space-3);
  margin-top: var(--allan-space-4);
  margin-bottom: 0;
}

.allan-product-stars {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.allan-product-review-links {
  display: inline-flex;
  align-items: center;
  gap: var(--allan-space-2);
  color: var(--allan-muted);
  font-size: 14px;
}

.allan-product-review-links a {
  color: var(--allan-primary);
  font-weight: 600;
}

.allan-product-description {
  padding: var(--allan-space-5) var(--allan-space-6);
  border-bottom: 1px solid var(--allan-border);
  color: var(--allan-muted);
  font-size: 14px;
  line-height: 1.65;
}

.allan-product-description p {
  margin: 0 0 var(--allan-space-3);
}

.allan-product-description p:last-child {
  margin-bottom: 0;
}

.allan-product-description .allan-product-tags {
  margin-top: var(--allan-space-4);
}

.allan-product-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--allan-space-3);
  padding: var(--allan-space-5) var(--allan-space-6);
  border-top: 1px solid var(--allan-border);
}

.allan-product-meta-item {
  min-width: 0;
  padding: var(--allan-space-3);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-sm);
  background: var(--allan-surface);
}

.allan-product-meta-item span {
  display: block;
  color: var(--allan-muted);
  font-size: 12px;
}

.allan-product-meta-item strong {
  display: block;
  margin-top: var(--allan-space-1);
  overflow: hidden;
  color: var(--allan-text);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.allan-product-meta-item--stock strong {
  display: inline-block;
  max-width: 100%;
  padding: 2px var(--allan-space-2);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-accent-soft);
  color: var(--allan-success);
  font-size: 12px;
}

.allan-product-price-panel {
  display: grid;
  gap: var(--allan-space-2);
  padding: var(--allan-space-5) var(--allan-space-6);
  border-bottom: 1px solid var(--allan-border);
  background: var(--allan-surface);
}

.allan-product-price {
  color: var(--allan-primary);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
}

.allan-product-price-old {
  color: var(--allan-soft);
  font-size: 18px;
  text-decoration: line-through;
}

.allan-product-price-notes,
.allan-product-discounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--allan-space-2) var(--allan-space-4);
  color: var(--allan-muted);
  font-size: 13px;
}

.allan-product-discounts span {
  display: inline-flex;
  padding: var(--allan-space-1) var(--allan-space-3);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-primary-soft);
  color: var(--allan-primary);
  font-weight: 600;
}

.allan-product-quick-actions {
  display: flex;
  gap: var(--allan-space-3);
  margin-top: var(--allan-space-4);
}

.allan-product-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--allan-space-2);
  flex: 1 1 0;
  height: var(--allan-control-lg);
  padding: 0 var(--allan-space-4);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-surface);
  color: var(--allan-primary);
  font-size: 13px;
  font-weight: 600;
}

.allan-product-icon-btn:hover,
.allan-product-icon-btn:focus {
  border-color: var(--allan-primary);
  background: var(--allan-primary-soft);
  color: var(--allan-primary-hover);
}

.allan-product-purchase {
  padding: var(--allan-space-5) var(--allan-space-6) var(--allan-space-6);
}

.allan-product-options {
  margin-bottom: var(--allan-space-5);
  padding-bottom: var(--allan-space-5);
  border-bottom: 1px solid var(--allan-border);
}

.allan-product-section-title {
  margin: 0 0 var(--allan-space-4);
  color: var(--allan-text);
  font-size: 18px;
  line-height: 1.2;
}

.allan-product-purchase .form-label {
  margin-bottom: var(--allan-space-2);
  color: var(--allan-text);
  font-size: 14px;
  font-weight: 600;
}

.allan-product-purchase .form-control,
.allan-product-purchase .form-select {
  min-height: var(--allan-control-lg);
}

.allan-product-option-list {
  display: grid;
  gap: var(--allan-space-2);
}

.allan-product-option-list--chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--allan-space-2);
}

.allan-product-option-list--chips .allan-product-option-choice {
  flex: 0 0 auto;
  padding: var(--allan-space-2) var(--allan-space-4);
  border-radius: var(--allan-radius-pill);
}

.allan-product-option-choice {
  display: flex;
  align-items: center;
  gap: var(--allan-space-3);
  margin: 0;
  padding: var(--allan-space-3);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-sm);
  background: var(--allan-surface);
  color: var(--allan-text);
  cursor: pointer;
  transition: border-color var(--allan-transition), background-color var(--allan-transition), box-shadow var(--allan-transition);
}

.allan-product-option-choice:hover,
.allan-product-option-choice:focus-within {
  border-color: var(--allan-border-strong);
  box-shadow: var(--allan-shadow-xs);
}

.allan-product-option-choice:has(input:checked) {
  border-color: var(--allan-accent-soft-dark);
  background: var(--allan-accent-soft);
}

.allan-product-option-choice input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--allan-accent-soft-dark);
}

/* .checkout-panel .form-check-input:checked (shared with the checkout page) would
   otherwise paint this native radio/checkbox brown — override it here so it matches
   the accent-color above instead of fighting it. */
.checkout-panel .allan-product-option-choice input:checked {
  border-color: var(--allan-accent-soft-dark);
  background-color: var(--allan-accent-soft-dark);
}

.allan-product-option-choice span {
  display: flex;
  align-items: center;
  gap: var(--allan-space-2);
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}

.allan-product-option-price {
  color: var(--allan-primary);
  font-size: 13px;
  font-weight: 700;
}

.allan-product-option-choice .img-thumbnail {
  width: 42px;
  height: 42px;
  padding: var(--allan-space-1);
  border-color: var(--allan-border);
  border-radius: var(--allan-radius-xs);
  object-fit: contain;
}

.allan-product-buybox {
  display: grid;
  gap: var(--allan-space-2);
}

.allan-product-buyrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--allan-space-3);
}

.allan-product-qty-stepper {
  justify-content: center;
}

.allan-product-qty {
  text-align: center;
  font-weight: 700;
}

.allan-product-cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--allan-space-2);
  min-height: 54px;
  border-radius: var(--allan-radius-pill);
  font-weight: 700;
}

.allan-product-minimum {
  margin-top: var(--allan-space-4);
  margin-bottom: 0;
}

.allan-product-detail-card {
  margin-bottom: var(--allan-space-7);
  overflow: hidden;
}

.allan-product-tabs {
  gap: var(--allan-space-2);
  padding: var(--allan-space-3) var(--allan-space-6) 0;
  border-bottom: 1px solid var(--allan-border);
  background: linear-gradient(180deg, var(--allan-surface-soft), var(--allan-surface));
}

.allan-product-tabs .nav-link {
  min-height: 44px;
  padding: var(--allan-space-3) var(--allan-space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--allan-muted);
  font-weight: 700;
}

.allan-product-tabs .nav-link:hover,
.allan-product-tabs .nav-link:focus {
  color: var(--allan-primary);
}

.allan-product-tabs .nav-link.active {
  border-bottom-color: var(--allan-primary);
  background: transparent;
  color: var(--allan-primary);
}

.allan-product-tab-content {
  padding: var(--allan-space-6);
  color: var(--allan-text);
}

.allan-product-tab-content p,
.allan-product-tab-content li {
  color: var(--allan-muted);
  line-height: 1.65;
}

.allan-product-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--allan-space-2);
  margin-top: var(--allan-space-5);
}

.allan-product-tags span {
  color: var(--allan-muted);
  font-size: 14px;
  font-weight: 600;
}

.allan-product-tags a {
  display: inline-flex;
  padding: var(--allan-space-1) var(--allan-space-3);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-surface);
  color: var(--allan-primary);
  font-size: 13px;
  font-weight: 600;
}

.allan-product-spec-table {
  margin-bottom: 0;
}

.allan-product-spec-table thead td {
  background: var(--allan-surface-soft);
  color: var(--allan-primary);
  font-weight: 700;
}

.allan-product-spec-table td {
  padding: var(--allan-space-3) var(--allan-space-4);
  border-color: var(--allan-border);
  color: var(--allan-text);
}

.allan-product-related {
  margin-top: var(--allan-space-7);
}

.allan-product-related > h3 {
  margin: 0 0 var(--allan-space-5);
  color: var(--allan-text);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
}

.allan-product-related .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.25rem;
}

.allan-product-related .col {
  display: flex;
}

#tab-review #form-review > h2 {
  margin: var(--allan-space-6) 0 var(--allan-space-4);
  color: var(--allan-text);
  font-size: 20px;
}

#tab-review .table {
  overflow: hidden;
  border-color: var(--allan-border);
  border-radius: var(--allan-radius-sm);
}

#tab-review .table td {
  padding: var(--allan-space-4);
  border-color: var(--allan-border);
  background: var(--allan-surface);
}

#tab-review .table-striped tr:first-child td {
  background: var(--allan-surface-soft);
}

#tab-review #button-review {
  min-height: var(--allan-control-lg);
  padding-right: var(--allan-space-6);
  padding-left: var(--allan-space-6);
  border-radius: var(--allan-radius-pill);
}

/* 10. Checkout
   ========================================================================== */

.checkout-intro {
  margin-bottom: var(--allan-space-5);
  color: var(--allan-muted);
  font-size: 15px;
  text-align: center;
}

.allan-checkout-page {
  --checkout-surface: var(--allan-surface);
  --checkout-surface-soft: var(--allan-surface-soft);
  --checkout-border: var(--allan-border);
  --checkout-border-strong: var(--allan-border-strong);
  --checkout-ink: var(--allan-text);
  --checkout-ink-soft: var(--allan-muted);
  --checkout-accent: var(--allan-primary);
  --checkout-accent-strong: var(--allan-primary-hover);
  --checkout-shadow: var(--allan-shadow-sm);
  --checkout-shadow-soft: var(--allan-shadow-sm);
  padding-bottom: var(--allan-space-7);
}

.allan-checkout-title {
  margin-bottom: var(--allan-space-6);
  color: var(--allan-text);
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.15;
  text-align: left;
}

.allan-checkout-layout {
  row-gap: var(--allan-space-5);
}

.allan-checkout-main,
.allan-checkout-side,
.checkout-stack {
  display: flex;
  flex-direction: column;
  gap: var(--allan-space-5);
}

.checkout-stack {
  flex: 1 1 auto;
  width: 100%;
}

.allan-checkout-top {
  align-items: stretch;
  row-gap: var(--allan-space-5);
}

.allan-checkout-top > div {
  display: flex;
}

.allan-checkout-top > div > *,
#checkout-shipping-method,
#checkout-payment-method,
.allan-checkout-confirm {
  width: 100%;
}

#checkout-shipping-method,
#checkout-payment-method {
  display: flex;
}

.checkout-panel {
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
  border: 1px solid var(--checkout-border);
  border-radius: var(--allan-radius-sm);
  background: var(--checkout-surface);
  box-shadow: var(--checkout-shadow);
}

.checkout-panel legend {
  width: 100%;
  margin-bottom: 0;
  padding: var(--allan-space-5) var(--allan-space-6);
  border-bottom: 1px solid var(--checkout-border);
  color: var(--checkout-ink);
  font-size: 18px;
  font-weight: 600;
}

.checkout-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: var(--allan-space-2);
  border-bottom: 1px solid var(--checkout-border);
  background: var(--checkout-surface-soft);
}

.checkout-switches .form-check {
  flex: 1 1 0;
  margin: 0;
}

.checkout-switches .form-check-inline {
  display: block;
}

.checkout-switches .form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkout-switches .form-check-input:focus-visible + .form-check-label {
  outline: 2px solid var(--allan-primary);
  outline-offset: 2px;
}

.checkout-switches .form-check-label {
  display: block;
  width: 100%;
  padding: var(--allan-space-3) var(--allan-space-4);
  border: 1px solid transparent;
  border-radius: var(--allan-radius-pill);
  background: rgba(255, 255, 255, 0.78);
  color: var(--checkout-ink-soft);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: color var(--allan-transition), background-color var(--allan-transition), border-color var(--allan-transition), box-shadow var(--allan-transition);
}

.checkout-switches .form-check-input:checked + .form-check-label {
  border-color: var(--checkout-accent);
  background: var(--checkout-accent);
  color: #fff;
  box-shadow: 0 10px 20px rgba(112, 64, 47, 0.20);
}

.checkout-account-row {
  align-items: end;
  padding: var(--allan-space-6) var(--allan-space-6) 0;
}

.checkout-account-switches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--allan-space-3) var(--allan-space-5);
  padding-top: var(--allan-space-2);
}

.checkout-account-switches .form-check,
.checkout-account-switches .form-check-inline {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--allan-space-2);
  margin: 0;
}

.checkout-account-switches .form-check-input {
  position: static;
  margin: 0;
  opacity: 1;
  pointer-events: auto;
}

.checkout-account-switches .form-check-label {
  padding: 0;
  background: transparent;
  color: var(--checkout-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.checkout-account-switches .form-check-input:checked + .form-check-label {
  color: var(--checkout-accent-strong);
}

.checkout-customer-group {
  padding-left: var(--allan-space-3);
}

.checkout-address-select {
  margin: var(--allan-space-5) var(--allan-space-6);
  padding: var(--allan-space-4) var(--allan-space-5);
  border: 1px solid var(--checkout-border);
  border-radius: var(--allan-radius-sm);
  background: var(--checkout-surface);
}

.checkout-grid {
  padding: var(--allan-space-6) var(--allan-space-6) var(--allan-space-4);
  row-gap: var(--allan-space-2);
}

.checkout-panel .form-label {
  margin-bottom: var(--allan-space-2);
  color: var(--checkout-ink);
  font-size: 14px;
  font-weight: 600;
}

.checkout-panel .form-check-label {
  color: var(--checkout-ink);
  font-weight: 600;
}

.checkout-panel .checkout-switches .form-check-label {
  color: var(--checkout-ink-soft);
  font-weight: 600;
}

.checkout-panel .checkout-switches .form-check-input:checked + .form-check-label {
  color: #fff;
}

.checkout-panel .form-check-input:checked {
  border-color: var(--checkout-accent);
  background-color: var(--checkout-accent);
}

.checkout-panel .form-control,
.checkout-panel .form-select {
  min-height: var(--allan-control-lg);
  border-color: var(--checkout-border);
  border-radius: var(--allan-radius-md);
  background-color: var(--checkout-surface);
  color: var(--checkout-ink);
}

.checkout-panel .form-control:focus,
.checkout-panel .form-select:focus {
  border-color: var(--checkout-accent);
  box-shadow: 0 0 0 0.18rem rgba(112, 64, 47, 0.16);
}

.checkout-panel textarea.form-control {
  min-height: 110px;
}

.checkout-divider {
  height: 1px;
  margin: 0 var(--allan-space-6);
  background: var(--checkout-border);
}

.checkout-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0 var(--allan-space-6) var(--allan-space-6);
}

.checkout-actions .btn,
.allan-btn-checkout-step,
.allan-btn-confirm-order {
  min-width: 180px;
  min-height: var(--allan-control-lg);
  padding: 12px 28px;
  border-radius: var(--allan-radius-pill);
  font-size: 15px;
  font-weight: 600;
}

.allan-btn-confirm-order {
  min-width: 220px;
  box-shadow: 0 12px 28px rgba(112, 64, 47, 0.22);
}

.checkout-panel .custom-field {
  margin-bottom: 1rem;
}

.checkout-panel .invalid-feedback {
  font-size: 13px;
  color: var(--allan-danger);
}

.checkout-panel .form-control.is-invalid,
.checkout-panel .form-select.is-invalid {
  border-color: var(--allan-danger);
}

.checkout-choice-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.checkout-choice-card .checkout-option-list {
  flex: 1 1 auto;
  padding: var(--allan-space-6) var(--allan-space-6) var(--allan-space-2);
}

.checkout-custom-card {
  padding: var(--allan-space-6);
}

.checkout-summary-card {
  padding: 0;
}

#checkout-payment-method .checkout-stack,
#checkout-payment-method .checkout-stack > .checkout-panel {
  min-height: 100%;
}

#checkout-shipping-method .checkout-choice-card {
  flex: 1 1 auto;
}

.checkout-password-card .checkout-grid {
  padding-top: var(--allan-space-6);
  padding-bottom: var(--allan-space-4);
}

.checkout-autosave-status {
  margin-top: var(--allan-space-3);
  color: var(--allan-muted);
  font-size: 13px;
  font-weight: 600;
}

.checkout-autosave-status.is-saving {
  color: var(--allan-primary);
}

.checkout-autosave-status.is-success {
  color: var(--allan-success);
}

.checkout-autosave-status.is-error {
  color: var(--allan-danger);
}

.checkout-option-group + .checkout-option-group {
  margin-top: var(--allan-space-5);
}

.checkout-option-group-title {
  margin-bottom: var(--allan-space-3);
  color: var(--checkout-accent-strong);
  font-size: 14px;
  font-weight: 700;
}

.checkout-option-item {
  display: flex;
  align-items: flex-start;
  gap: var(--allan-space-3);
  margin-bottom: var(--allan-space-3);
  padding: var(--allan-space-4);
  border: 1px solid var(--checkout-border);
  border-radius: var(--allan-radius-sm);
  background: var(--checkout-surface);
  color: var(--checkout-ink);
  cursor: pointer;
  transition: border-color var(--allan-transition), box-shadow var(--allan-transition), transform var(--allan-transition);
}

.checkout-option-item:hover,
.checkout-option-item:focus-within {
  border-color: var(--checkout-border-strong);
  box-shadow: var(--checkout-shadow-soft);
  transform: translateY(-1px);
}

.checkout-option-item input {
  margin-top: 3px;
  accent-color: var(--checkout-accent);
}

.checkout-option-item:has(input:checked) {
  border-color: var(--checkout-accent);
  background: var(--allan-primary-soft);
  box-shadow: 0 12px 28px rgba(112, 64, 47, 0.10);
}

.checkout-option-copy {
  display: flex;
  flex-direction: column;
  gap: var(--allan-space-1);
}

.checkout-option-copy strong {
  color: var(--checkout-accent-strong);
  font-size: 14px;
  font-weight: 700;
}

.checkout-option-copy small {
  color: var(--checkout-ink-soft);
  font-size: 13px;
}

.checkout-option-item input:checked + .checkout-option-copy strong {
  color: var(--checkout-accent);
}

.checkout-option-item input:checked + .checkout-option-copy small {
  color: var(--checkout-ink);
}

.checkout-loading {
  color: var(--checkout-ink-soft);
  font-size: 14px;
}

.checkout-payment-output > * {
  margin-top: 0;
}

.allan-summary-table {
  margin: 0 var(--allan-space-6);
  border-top: 1px solid var(--checkout-border);
  background: var(--checkout-surface);
}

.allan-summary-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--allan-space-5);
  padding: var(--allan-space-5) 0;
  border-bottom: 1px solid var(--checkout-border);
}

.allan-summary-item.has-thumb {
  grid-template-columns: 132px minmax(0, 1fr) auto;
}

.allan-summary-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
}

.allan-summary-thumb .img-thumbnail {
  display: block;
  width: 112px;
  max-width: none;
  height: 112px;
  padding: var(--allan-space-2);
  border: 1px solid var(--checkout-border);
  border-radius: var(--allan-radius-sm);
  background: var(--checkout-surface);
  object-fit: contain;
}

.allan-summary-name {
  margin-bottom: var(--allan-space-2);
  color: var(--checkout-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.allan-summary-name a {
  color: var(--checkout-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.allan-summary-main small {
  color: var(--checkout-ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.allan-summary-total {
  min-width: 120px;
  align-self: start;
  color: var(--checkout-ink);
  font-size: 17px;
  font-weight: 700;
  text-align: right;
}

.allan-summary-totals {
  width: min(100%, 320px);
  margin-top: var(--allan-space-5);
  margin-left: auto;
  padding: 0 var(--allan-space-6) var(--allan-space-6);
}

.allan-summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--allan-space-4);
  padding: var(--allan-space-2) 0;
  color: var(--checkout-ink-soft);
}

.allan-summary-row.is-total {
  margin-top: var(--allan-space-3);
  padding: var(--allan-space-3) var(--allan-space-4);
  border-radius: var(--allan-radius-sm);
  background: var(--allan-primary-soft);
  color: var(--checkout-accent-strong);
  font-size: 18px;
  font-weight: 700;
}

/* 11. Cart Page
   ========================================================================== */

.allan-cart-page {
  --cart-ink: var(--allan-text);
  --cart-muted: var(--allan-muted);
  --cart-line: var(--allan-border);
  --cart-line-strong: var(--allan-border-strong);
  --cart-panel: var(--allan-surface-soft);
  --cart-surface: var(--allan-surface);
  --cart-primary: var(--allan-primary);
  --cart-primary-hover: var(--allan-primary-hover);
  --cart-shadow: var(--allan-shadow-md);
  --cart-shadow-soft: var(--allan-shadow-sm);
  padding-bottom: var(--allan-space-8);
}

.allan-cart-shell {
  align-items: flex-start;
}

.allan-cart-main,
.allan-cart-card,
.allan-cart-totals-card,
.allan-cart-empty {
  background: var(--cart-surface);
}

.allan-cart-title {
  margin: 0 0 var(--allan-space-7);
  color: var(--cart-ink);
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
}

.allan-cart-title span {
  font-weight: 600;
}

.allan-cart-attention,
.allan-cart-attention *,
.allan-cart-minimum,
.allan-cart-minimum * {
  font-size: 0.92rem;
  line-height: 1.45;
}

.allan-cart-attention,
.allan-cart-minimum {
  padding: var(--allan-space-3) var(--allan-space-4);
}

.allan-cart-table-wrap {
  overflow: hidden;
  border: 1px solid var(--cart-line);
  border-radius: var(--allan-radius-sm);
  background: var(--cart-surface);
  box-shadow: var(--cart-shadow-soft);
}

.allan-cart-table {
  margin-bottom: 0;
  border-color: var(--cart-line);
  color: var(--cart-ink);
  table-layout: auto;
}

.allan-cart-table > :not(caption) > * > * {
  padding: var(--allan-space-6) var(--allan-space-4);
  border-color: var(--cart-line);
  vertical-align: middle;
}

.allan-cart-table thead th {
  padding-top: var(--allan-space-5);
  padding-bottom: var(--allan-space-5);
  color: var(--cart-primary);
  font-size: 13px;
  font-weight: 700;
}

.allan-col-image {
  width: 120px;
}

.allan-col-name {
  width: auto;
}

.allan-col-quantity {
  width: 220px;
}

.allan-col-price,
.allan-col-total {
  width: 135px;
  white-space: nowrap;
}

.allan-cart-image-cell,
.allan-cart-name-cell {
  min-width: 0;
}

.allan-cart-image-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  padding: var(--allan-space-2);
  border: 1px solid var(--cart-line);
  border-radius: var(--allan-radius-sm);
  background: var(--cart-surface);
}

.allan-cart-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.allan-cart-product-link {
  color: var(--cart-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
}

.allan-cart-product-link:hover,
.allan-cart-product-link:focus {
  color: var(--cart-primary);
}

.allan-cart-meta {
  margin-top: var(--allan-space-3);
  color: var(--cart-muted);
  font-size: 13px;
  line-height: 1.55;
}

.allan-cart-price-cell {
  min-width: 120px;
  color: var(--cart-muted);
  font-size: 15px;
  font-weight: 400;
}

.allan-cart-total-cell {
  min-width: 120px;
  color: var(--cart-ink);
  font-size: 17px;
  font-weight: 700;
}

.allan-cart-form {
  margin: 0;
}

.allan-cart-qty-cell {
  min-width: 210px;
  white-space: nowrap;
}

.allan-qty-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--allan-space-3);
  padding: 0;
  border: 0;
  background: transparent;
}

.allan-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--allan-space-2);
  padding: var(--allan-space-2) var(--allan-space-3);
  border: 1px solid var(--cart-line-strong);
  border-radius: var(--allan-radius-pill);
  background: var(--cart-panel);
}

.allan-qty-input {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cart-ink);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.allan-qty-input:focus {
  background: transparent;
  box-shadow: none;
}

.allan-qty-button,
.allan-cart-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--cart-line-strong);
  border-radius: var(--allan-radius-pill);
  background: var(--cart-surface);
  color: var(--cart-ink);
  box-shadow: none;
}

.allan-cart-icon-btn {
  text-decoration: none;
}

.allan-qty-control .allan-qty-minus,
.allan-qty-control .allan-qty-plus {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
}

.allan-qty-button:hover,
.allan-qty-button:focus,
.allan-cart-icon-btn:hover,
.allan-cart-icon-btn:focus {
  border-color: var(--cart-primary);
  color: var(--cart-primary);
  transform: translateY(-1px);
}

.allan-qty-button i,
.allan-cart-icon-btn i {
  font-size: 14px;
  line-height: 1;
}

.allan-cart-refresh,
.allan-cart-remove {
  border-color: var(--cart-line-strong);
  background: var(--cart-surface);
  color: var(--cart-ink);
}

.allan-cart-refresh:hover,
.allan-cart-refresh:focus {
  border-color: var(--cart-primary);
  background: var(--allan-primary-soft);
  color: var(--cart-primary);
}

.allan-cart-remove:hover,
.allan-cart-remove:focus {
  border-color: var(--allan-danger);
  background: rgba(155, 67, 55, 0.08);
  color: var(--allan-danger);
}

.allan-cart-summary {
  display: grid;
  gap: var(--allan-space-6);
}

.allan-cart-card {
  padding: var(--allan-space-7);
  border: 1px solid var(--cart-line-strong);
  border-radius: var(--allan-radius-sm);
  /*background: var(--cart-panel);*/
  box-shadow: var(--cart-shadow);
}

.allan-cart-accordion .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--cart-line-strong);
  border-radius: 0;
  background: transparent;
}

.allan-cart-accordion .accordion-header {
  margin: 0;
}

.allan-cart-accordion .accordion-button {
  padding: var(--allan-space-5) 0;
  background: transparent;
  color: var(--cart-ink);
  box-shadow: none;
  font-size: 16px;
  font-weight: 600;
}

.allan-cart-accordion .accordion-button::after {
  width: 16px;
  height: 16px;
  background-size: 16px;
}

.allan-cart-accordion .accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--cart-ink);
}

.allan-cart-accordion .accordion-button:focus {
  box-shadow: none;
}

.allan-cart-accordion .accordion-body {
  padding: 0 0 var(--allan-space-5);
}

.allan-cart-accordion p,
.allan-cart-accordion .col-form-label {
  color: var(--cart-muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

.allan-cart-accordion .form-control,
.allan-cart-accordion .form-select {
  min-height: var(--allan-control-lg);
  border-color: var(--cart-line);
  border-radius: var(--allan-radius-md);
  color: var(--cart-ink);
  font-size: 0.95rem;
}

.allan-cart-accordion .form-control:focus,
.allan-cart-accordion .form-select:focus {
  border-color: var(--cart-primary);
  box-shadow: 0 0 0 0.18rem rgba(112, 64, 47, 0.16);
}

.allan-cart-accordion .btn {
  min-height: var(--allan-control);
  padding: 0.72rem 1.2rem;
  border-radius: var(--allan-radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
}

.allan-cart-accordion .btn-primary {
  border-color: var(--cart-primary);
  background: var(--cart-primary);
}

.allan-cart-accordion .btn-primary:hover,
.allan-cart-accordion .btn-primary:focus {
  border-color: var(--cart-primary-hover);
  background: var(--cart-primary-hover);
}

.allan-cart-accordion .btn-danger {
  border-color: var(--cart-line);
  background: var(--cart-surface);
  color: var(--cart-ink);
}

.allan-cart-accordion .btn-danger:hover,
.allan-cart-accordion .btn-danger:focus {
  border-color: var(--cart-line-strong);
  background: var(--allan-surface-soft);
  color: var(--cart-ink);
}

.allan-cart-totals-card {
  overflow: hidden;
  border: 1px solid var(--cart-line-strong);
  border-radius: var(--allan-radius-sm);
  box-shadow: var(--cart-shadow-soft);
}

.allan-cart-totals-table {
  margin-bottom: 0;
}

.allan-cart-totals-table th,
.allan-cart-totals-table td {
  padding: var(--allan-space-4) var(--allan-space-5);
  border-color: var(--cart-line);
  background: var(--cart-surface);
  font-size: 16px;
  font-weight: 400;
  text-align: right;
}

.allan-cart-totals-table th {
  color: var(--cart-muted);
}

.allan-cart-totals-table td {
  width: 145px;
  color: var(--cart-ink);
}

.allan-cart-totals-table tbody tr:last-child th,
.allan-cart-totals-table tbody tr:last-child td {
  background: var(--allan-primary-soft);
  color: var(--cart-primary);
  font-size: 18px;
  font-weight: 700;
}

.allan-cart-actions {
  display: grid;
  gap: var(--allan-space-4);
}

.allan-cart-actions .allan-btn {
  min-height: var(--allan-control-lg);
}

.allan-cart-empty {
  padding: var(--allan-space-8) var(--allan-space-7);
  border: 1px solid var(--cart-line);
  border-radius: var(--allan-radius-lg);
  box-shadow: var(--cart-shadow-soft);
}

/* 12. Contact Page
   ========================================================================== */

.allan-contact-intro {
  padding: var(--allan-space-7) 0 var(--allan-space-6);
  text-align: center;
}

.allan-contact-intro-title {
  margin: 0 0 var(--allan-space-3);
  color: var(--allan-primary);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
}

.allan-contact-intro-text {
  margin: 0 auto;
  max-width: 560px;
  color: var(--allan-muted);
  font-size: 16px;
}

.allan-contact-form-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--allan-space-8);
  padding: var(--allan-space-6) 0 var(--allan-space-8);
}

.allan-contact-form-heading {
  margin: 0 0 var(--allan-space-3);
  color: var(--allan-primary);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
}

.allan-contact-form-lead {
  margin: 0 0 var(--allan-space-6);
  color: var(--allan-muted);
  font-size: 15px;
  line-height: 1.7;
}

.allan-contact-form-image {
  border-radius: var(--allan-radius-lg);
  overflow: hidden;
  box-shadow: var(--allan-shadow-md);
}

.allan-contact-form-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.allan-contact-field {
  margin-bottom: var(--allan-space-5);
}

.allan-contact-field label {
  display: block;
  margin-bottom: var(--allan-space-2);
  color: var(--allan-text);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.allan-contact-input {
  display: block;
  width: 100%;
  padding: var(--allan-space-3) var(--allan-space-4);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-md);
  background: var(--allan-surface);
  color: var(--allan-text);
  font-size: 15px;
}

.allan-contact-input:focus {
  outline: none;
  border-color: var(--allan-primary);
}

.allan-contact-textarea {
  min-height: 160px;
  resize: vertical;
}

.allan-contact-submit {
  padding: var(--allan-space-3) var(--allan-space-7);
  border: 0;
  border-radius: var(--allan-radius-pill);
  background: var(--allan-primary);
  color: #fff;
  font-weight: 700;
  transition: background var(--allan-transition);
}

.allan-contact-submit:hover,
.allan-contact-submit:focus {
  background: var(--allan-primary-hover);
  color: #fff;
}

.allan-contact-section-title {
  margin: 0 0 var(--allan-space-6);
  color: var(--allan-primary);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  text-align: center;
}

.allan-contact-info {
  padding: var(--allan-space-6) 0;
}

.allan-contact-info-card {
  padding: var(--allan-space-6);
  margin-bottom: var(--allan-space-7);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-lg);
  background: var(--allan-surface);
  box-shadow: var(--allan-shadow-sm);
}

.allan-contact-locations .accordion-button {
  font-weight: 700;
  color: var(--allan-primary);
}

.allan-contact-locations .accordion-button:not(.collapsed) {
  background: var(--allan-surface-soft);
  color: var(--allan-primary);
  box-shadow: none;
}

.allan-contact-faq {
  padding: var(--allan-space-6) 0 var(--allan-space-8);
  text-align: center;
}

.allan-contact-faq-subtitle {
  margin: 0 0 var(--allan-space-6);
  color: var(--allan-muted);
  font-size: 15px;
}

.allan-contact-faq-accordion {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.allan-contact-faq-accordion .accordion-item {
  margin-bottom: var(--allan-space-3);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-md);
  overflow: hidden;
}

.allan-contact-faq-accordion .accordion-button {
  font-weight: 700;
  color: var(--allan-text);
}

.allan-contact-faq-accordion .accordion-button:not(.collapsed) {
  background: var(--allan-surface-soft);
  color: var(--allan-primary);
  box-shadow: none;
}

.allan-contact-faq-cta-text {
  margin: var(--allan-space-6) 0 var(--allan-space-3);
  color: var(--allan-muted);
}

.allan-contact-faq-cta {
  display: inline-block;
  padding: var(--allan-space-3) var(--allan-space-7);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-primary);
  color: #fff;
  font-weight: 700;
  transition: background var(--allan-transition);
}

.allan-contact-faq-cta:hover,
.allan-contact-faq-cta:focus {
  background: var(--allan-primary-hover);
  color: #fff;
}

.allan-contact-bottom-banner {
  width: 100%;
  height: min(25vw, 260px);
  overflow: hidden;
}

.allan-contact-bottom-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 13. About Page
   ========================================================================== */

.allan-about-history {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--allan-space-8);
  padding: var(--allan-space-7) 0;
}

.allan-about-history-title {
  margin: 0 0 var(--allan-space-4);
  color: var(--allan-primary);
  font-family: var(--allan-font-accent);
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 400;
}

.allan-about-history-text {
  margin: 0 0 var(--allan-space-4);
  color: var(--allan-muted);
  font-size: 15px;
  line-height: 1.7;
}

.allan-about-history-media {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--allan-radius-lg);
  box-shadow: var(--allan-shadow-md);
}

.allan-about-history-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.allan-about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--allan-space-7);
  padding: var(--allan-space-6) 0 var(--allan-space-8);
}

.allan-about-value-card {
  text-align: center;
}

.allan-about-value-photo {
  height: 220px;
  margin-bottom: var(--allan-space-5);
  border-radius: var(--allan-radius-lg);
  overflow: hidden;
  background: var(--allan-surface-soft);
}

.allan-about-value-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.allan-about-value-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--allan-space-3);
}

.allan-about-value-title {
  margin: 0 0 var(--allan-space-3);
  color: var(--allan-primary);
  font-family: var(--allan-font-accent);
  font-size: 28px;
  font-weight: 400;
}

.allan-about-value-text {
  margin: 0;
  color: var(--allan-muted);
  font-size: 14px;
  line-height: 1.7;
}

.allan-about-value-list {
  margin: var(--allan-space-3) 0 0;
  padding: 0;
  list-style: none;
  color: var(--allan-muted);
  font-size: 14px;
  line-height: 1.9;
}

.allan-about-bottom-banner {
  width: 100%;
}

.allan-about-bottom-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* 14. Gallery Page
   ========================================================================== */

.allan-gallery-hero {
  padding: var(--allan-space-7) 0 var(--allan-space-6);
  text-align: center;
}

.allan-gallery-hero-title {
  margin: 0 0 var(--allan-space-3);
  color: var(--allan-primary);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
}

.allan-gallery-hero-title span {
  display: block;
  font-family: var(--allan-font-accent);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 48px);
}

.allan-gallery-hero-subtitle {
  margin: 0 auto var(--allan-space-6);
  max-width: 560px;
  color: var(--allan-muted);
  font-size: 16px;
}

.allan-gallery-hero-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--allan-space-7);
}

.allan-gallery-hours {
  width: min(100%, 460px);
  padding: var(--allan-space-7);
  border: 1px solid var(--allan-border);
  border-bottom: 4px solid var(--allan-primary);
  border-radius: var(--allan-radius-lg);
  background: var(--allan-surface);
  box-shadow: var(--allan-shadow-sm);
  text-align: left;
}

.allan-gallery-hours-title {
  margin: 0 0 var(--allan-space-5);
  color: var(--allan-primary);
  font-family: var(--allan-font-accent);
  font-size: 28px;
  font-weight: 400;
  text-align: center;
}

.allan-gallery-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--allan-space-2);
  margin-bottom: var(--allan-space-2);
  border-bottom: 1px dashed var(--allan-border);
}

.allan-gallery-hours-row:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.allan-gallery-hours-day {
  color: var(--allan-text);
  font-weight: 700;
}

.allan-gallery-hours-time {
  color: var(--allan-primary);
  font-weight: 600;
}

.allan-gallery-hours-note {
  margin: var(--allan-space-4) 0 0;
  color: var(--allan-muted);
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

.allan-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--allan-space-6);
  padding: var(--allan-space-6) 0 var(--allan-space-8);
}

.allan-gallery-card {
  display: block;
  border-radius: var(--allan-radius-lg);
  overflow: hidden;
  box-shadow: var(--allan-shadow-sm);
  color: inherit;
  transition: transform var(--allan-transition), box-shadow var(--allan-transition);
}

.allan-gallery-card:hover,
.allan-gallery-card:focus {
  transform: translateY(-4px);
  box-shadow: var(--allan-shadow-md);
  color: inherit;
}

.allan-gallery-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--allan-surface-soft);
}

/* Tienda sin foto subida todavía en su campo "Imagen" (admin) */
.allan-gallery-card-media--empty {
  background: linear-gradient(135deg, var(--allan-surface-soft) 0%, var(--allan-border) 100%);
}

.allan-gallery-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.allan-gallery-card:hover .allan-gallery-card-media img {
  transform: scale(1.06);
}

.allan-gallery-card-pin {
  position: absolute;
  top: var(--allan-space-3);
  right: var(--allan-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--allan-shadow-sm);
  transition: transform var(--allan-transition);
}

.allan-gallery-card:hover .allan-gallery-card-pin {
  transform: scale(1.1);
}

.allan-gallery-card-pin img {
  width: 18px;
  height: 18px;
}

.allan-gallery-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--allan-space-4);
  background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0.6) 35%, rgba(10, 10, 12, 0.92) 100%);
}

.allan-gallery-card-title {
  margin: 0 0 var(--allan-space-1);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.allan-gallery-card-address {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 15. Careers Page
   ========================================================================== */

.allan-careers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--allan-space-8);
  padding: var(--allan-space-7) 0 var(--allan-space-8);
}

.allan-careers-cta-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--allan-space-9) var(--allan-space-7);
  border-radius: var(--allan-radius-lg);
  background: var(--allan-primary);
  box-shadow: var(--allan-shadow-md);
}

.allan-careers-cta-icon {
  color: var(--allan-accent);
  font-size: 40px;
  margin-bottom: var(--allan-space-5);
}

.allan-careers-cta-title {
  margin: 0 0 var(--allan-space-3);
  color: #fff;
  font-family: var(--allan-font-accent);
  font-size: 30px;
  font-weight: 400;
}

.allan-careers-cta-desc {
  margin: 0 0 var(--allan-space-6);
  max-width: 380px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.7;
}

.allan-careers-cta-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--allan-space-3);
  margin: 0 0 var(--allan-space-7);
  padding: 0;
  list-style: none;
  text-align: left;
}

.allan-careers-cta-highlight {
  display: flex;
  align-items: center;
  gap: var(--allan-space-3);
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 600;
}

.allan-careers-cta-highlight-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--allan-accent);
  font-size: 14px;
}

.allan-careers-cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--allan-space-2);
  padding: var(--allan-space-4) var(--allan-space-8);
  border-radius: var(--allan-radius-pill);
  background: var(--allan-accent);
  color: var(--allan-primary-hover);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--allan-transition), transform var(--allan-transition);
}

.allan-careers-cta-button:hover,
.allan-careers-cta-button:focus {
  background: var(--allan-accent-hover);
  color: #fff;
  transform: translateY(-2px);
}

.allan-careers-info-col {
  padding: var(--allan-space-7) var(--allan-space-6);
}

.allan-careers-slider {
  margin-bottom: var(--allan-space-6);
  border-radius: var(--allan-radius-lg);
  overflow: hidden;
  box-shadow: var(--allan-shadow-sm);
}

.allan-careers-slider .carousel-item img {
  height: 320px;
  object-fit: cover;
}

.allan-careers-info-title {
  margin: 0 0 var(--allan-space-3);
  color: var(--allan-primary);
  font-family: var(--allan-font-accent);
  font-size: 28px;
  font-weight: 400;
}

.allan-careers-info-desc {
  margin: 0 0 var(--allan-space-5);
  color: var(--allan-muted);
  font-size: 15px;
  line-height: 1.7;
}

.allan-careers-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--allan-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.allan-careers-benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--allan-space-3);
}

.allan-careers-benefit-icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--allan-accent);
  font-size: 16px;
}

.allan-careers-benefit span {
  color: var(--allan-text);
  font-size: 14px;
  line-height: 1.6;
}

/* 16. Tracking Page
   ========================================================================== */

.allan-tracking-card {
  max-width: 800px;
  margin: var(--allan-space-7) auto var(--allan-space-8);
  padding: var(--allan-space-7) var(--allan-space-6);
  background: var(--allan-surface);
  border-radius: var(--allan-radius-lg);
  box-shadow: var(--allan-shadow-md);
}

.allan-tracking-header {
  text-align: center;
  margin-bottom: var(--allan-space-6);
}

.allan-tracking-title {
  margin: 0 0 var(--allan-space-2);
  color: var(--allan-primary);
  font-family: var(--allan-font-accent);
  font-size: 32px;
  font-weight: 400;
}

.allan-tracking-subtitle {
  margin: 0;
  color: var(--allan-muted);
  font-size: 15px;
}

.allan-tracking-form {
  display: flex;
  gap: var(--allan-space-4);
}

.allan-tracking-input {
  flex-grow: 1;
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-md);
  padding: 14px 20px;
  font-size: 15px;
  color: var(--allan-text);
  outline: none;
  transition: border-color var(--allan-transition);
}

.allan-tracking-input:focus {
  border-color: var(--allan-primary);
}

.allan-tracking-button {
  flex: 0 0 auto;
  color: #fff;
  background-color: var(--allan-primary);
  border: 0;
  border-radius: var(--allan-radius-md);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--allan-transition);
}

.allan-tracking-button:hover,
.allan-tracking-button:focus {
  background-color: var(--allan-primary-hover);
}

/* 17. Account Login
   ========================================================================== */

.allan-login-page {
  padding-top: var(--allan-space-5);
  padding-bottom: var(--allan-space-8);
}

.allan-login-grid {
  margin-top: var(--allan-space-2);
}

/* Un solo formulario centrado (antes 2 tarjetas lado a lado — "Nuevo cliente" se
   quitó a pedido del usuario, el registro ahora es un link chico bajo "olvidé mi
   contraseña"). Ancho acotado para que se sienta como un formulario enfocado, no
   una tarjeta perdida en un contenedor ancho. */
.allan-login-grid--single {
  display: flex;
  justify-content: center;
}

.allan-login-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  padding: var(--allan-space-6);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-lg);
  background: var(--allan-surface);
  box-shadow: var(--allan-shadow-xs);
}

/* Al quedar como única tarjeta de la página, se resalta con borde de marca +
   sombra más marcada + una barra de acento arriba, en vez del borde neutro
   genérico que tenía cuando competía visualmente con la de "Nuevo cliente". */
.allan-login-card--highlight {
  max-width: 460px;
  position: relative;
  border-color: var(--allan-border-strong);
  box-shadow: var(--allan-shadow-md);
}

.allan-login-card--highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--allan-radius-lg) var(--allan-radius-lg) 0 0;
  background: linear-gradient(90deg, var(--allan-primary), var(--allan-accent));
}

.allan-login-card-header {
  display: flex;
  align-items: center;
  gap: var(--allan-space-3);
  margin-bottom: var(--allan-space-4);
}

.allan-login-card-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--allan-primary-soft);
  color: var(--allan-primary);
  font-size: 20px;
}

.allan-login-card-title {
  margin-bottom: var(--allan-space-1);
  color: var(--allan-text);
  font-size: 22px;
  font-weight: 700;
}

.allan-login-card-lead {
  margin: 0;
  color: var(--allan-muted);
}

.allan-login-form .form-label {
  color: var(--allan-muted);
  font-size: 14px;
  font-weight: 600;
}

.allan-login-forgot-link {
  display: inline-block;
  margin-top: var(--allan-space-1);
  color: var(--allan-primary);
  font-size: 14px;
  font-weight: 600;
}

.allan-login-forgot-link:hover,
.allan-login-forgot-link:focus {
  color: var(--allan-primary-hover);
}

.allan-login-register-hint {
  margin: var(--allan-space-3) 0 0;
  color: var(--allan-muted);
  font-size: 14px;
}

.allan-login-register-hint a {
  color: var(--allan-primary);
  font-weight: 600;
}

.allan-login-register-hint a:hover,
.allan-login-register-hint a:focus {
  color: var(--allan-primary-hover);
}

.allan-login-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: var(--allan-space-3);
}

.allan-login-card-actions .btn {
  min-height: var(--allan-control);
}

/* El botón de "Iniciar sesión" ocupa todo el ancho de la tarjeta destacada — con
   una sola tarjeta angosta, un botón alineado a la derecha se veía perdido. */
.allan-login-submit {
  width: 100%;
}

/* 18. Account Menu & Dashboard
   ========================================================================== */

#column-right {
  padding-left: var(--allan-space-4);
}

.allan-account-menu-card {
  overflow: hidden;
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-lg);
  background: var(--allan-surface);
  box-shadow: var(--allan-shadow-xs);
}

.allan-account-menu-header {
  display: flex;
  align-items: center;
  gap: var(--allan-space-3);
  padding: var(--allan-space-4);
  background: linear-gradient(135deg, var(--allan-primary), var(--allan-primary-hover));
  color: #fff;
}

.allan-account-menu-avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.allan-account-menu-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.allan-account-menu-hello {
  font-size: 12px;
  opacity: 0.85;
}

.allan-account-menu-name {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.allan-account-menu.list-group {
  border-radius: 0;
}

.allan-account-menu .list-group-item {
  display: flex;
  align-items: center;
  gap: var(--allan-space-3);
  padding: var(--allan-space-3) var(--allan-space-4);
  border: 0;
  border-bottom: 1px solid var(--allan-border);
  border-radius: 0;
  color: var(--allan-text);
  font-size: 14px;
  font-weight: 600;
}

.allan-account-menu .list-group-item:last-child {
  border-bottom: 0;
}

.allan-account-menu .list-group-item i {
  flex: 0 0 16px;
  color: var(--allan-primary);
  font-size: 15px;
  text-align: center;
}

.allan-account-menu .list-group-item:hover,
.allan-account-menu .list-group-item:focus {
  background: var(--allan-primary-soft);
  color: var(--allan-primary-hover);
}

/* Mismo tratamiento "café rojizo" que .allan-user-logout (menú de usuario del
   header) — separar visualmente cerrar sesión del resto de acciones. */
.allan-account-menu-logout,
.allan-account-menu-logout i {
  color: var(--allan-danger) !important;
}

.allan-account-menu-logout:hover,
.allan-account-menu-logout:focus {
  background: rgba(155, 67, 55, 0.1) !important;
}

.allan-account-page {
  padding-top: var(--allan-space-5);
  padding-bottom: var(--allan-space-8);
}

.allan-account-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--allan-space-4);
  margin-bottom: var(--allan-space-6);
  padding: var(--allan-space-5) var(--allan-space-6);
  border-radius: var(--allan-radius-lg);
  background: linear-gradient(135deg, var(--allan-primary), var(--allan-primary-hover));
  color: #fff;
  box-shadow: var(--allan-shadow-sm);
}

.allan-account-welcome-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}

.allan-account-welcome-email {
  margin: var(--allan-space-1) 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}

.allan-account-reward-chip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--allan-space-3);
  padding: var(--allan-space-3) var(--allan-space-4);
  border-radius: var(--allan-radius-md);
  background: rgba(255, 255, 255, 0.16);
}

.allan-account-reward-chip i {
  font-size: 22px;
}

.allan-account-reward-chip strong {
  display: block;
  font-size: 20px;
  line-height: 1.1;
}

.allan-account-reward-chip span {
  font-size: 12px;
  opacity: 0.85;
}

.allan-account-section {
  margin-bottom: var(--allan-space-6);
}

.allan-account-section-title {
  margin: 0 0 var(--allan-space-3);
  color: var(--allan-text);
  font-size: 18px;
  font-weight: 700;
}

.allan-account-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--allan-space-3);
}

.allan-account-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--allan-space-2);
  padding: var(--allan-space-4) var(--allan-space-3);
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-md);
  background: var(--allan-surface);
  color: var(--allan-text);
  text-align: center;
  box-shadow: var(--allan-shadow-xs);
  transition: border-color var(--allan-transition), box-shadow var(--allan-transition), transform var(--allan-transition);
}

.allan-account-tile:hover,
.allan-account-tile:focus {
  border-color: var(--allan-primary);
  color: var(--allan-primary-hover);
  box-shadow: var(--allan-shadow-sm);
  transform: translateY(-2px);
}

.allan-account-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--allan-primary-soft);
  color: var(--allan-primary);
  font-size: 18px;
}

.allan-account-tile-label {
  font-size: 13px;
  font-weight: 600;
}

/* 19. Account Register
   ========================================================================== */

.allan-register-page {
  padding-top: var(--allan-space-5);
  padding-bottom: var(--allan-space-8);
}

/* Un poco más ancha que la tarjeta de login (.allan-login-card, 460px) — este
   formulario tiene muchos más campos y se ve apretado en un ancho angosto. */
.allan-register-card {
  position: relative;
  max-width: 720px;
  margin: var(--allan-space-2) auto 0;
  padding: var(--allan-space-6);
  border: 1px solid var(--allan-border-strong);
  border-radius: var(--allan-radius-lg);
  background: var(--allan-surface);
  box-shadow: var(--allan-shadow-md);
}

.allan-register-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--allan-radius-lg) var(--allan-radius-lg) 0 0;
  background: linear-gradient(90deg, var(--allan-primary), var(--allan-accent));
}

.allan-register-card-header {
  display: flex;
  align-items: center;
  gap: var(--allan-space-3);
  margin-bottom: var(--allan-space-5);
}

.allan-register-card-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--allan-primary-soft);
  color: var(--allan-primary);
  font-size: 20px;
}

.allan-register-card-title {
  margin: 0 0 var(--allan-space-1);
  color: var(--allan-text);
  font-size: 24px;
  font-weight: 700;
}

.allan-register-card-lead {
  margin: 0;
  color: var(--allan-muted);
  font-size: 14px;
}

.allan-register-fieldset {
  padding: 0;
  margin: 0 0 var(--allan-space-5);
  border: 0;
}

.allan-register-fieldset + .allan-register-fieldset {
  padding-top: var(--allan-space-5);
  border-top: 1px solid var(--allan-border);
}

.allan-register-legend {
  float: none;
  width: auto;
  margin-bottom: var(--allan-space-3);
  padding: 0;
  color: var(--allan-primary);
  font-size: 16px;
  font-weight: 700;
  border: 0;
}

.allan-register-form .col-form-label {
  color: var(--allan-muted);
  font-size: 14px;
  font-weight: 600;
}

/* Mismo patrón que .allan-product-option-choice — accent-color de Bootstrap por
   defecto es azul, choca con la marca. Escopeado a esta página nada más, no toca
   el checkbox/switch global. */
.allan-register-page .form-check-input {
  accent-color: var(--allan-accent-soft-dark);
}

.allan-register-page .form-check-input:checked {
  background-color: var(--allan-accent-soft-dark);
  border-color: var(--allan-accent-soft-dark);
}

.allan-register-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--allan-space-3);
  padding-top: var(--allan-space-4);
  border-top: 1px solid var(--allan-border);
}

.allan-register-agree {
  margin: 0 !important;
}

.allan-register-submit {
  min-height: var(--allan-control);
}

/* 20. Responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
  .allan-cart-summary {
    max-width: 720px;
  }
}

/* Rango exclusivo del breakpoint "lg" de Bootstrap (992px-1199.98px): el
   contenedor mide 960px y las proporciones col-lg-4/5/3 originales no dejan
   suficiente ancho a la columna de acciones (usuario + wishlist + tracking +
   checkout + carrito), que se desborda y se monta sobre la barra de búsqueda.
   Se reequilibra el ancho de las 3 columnas solo en este rango usando clases
   propias (no se toca col-lg-* para no afectar el resto del sitio). */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .allan-header-col-logo {
    flex: 0 0 25%;
    width: 25%;
  }

  .allan-header-col-search {
    flex: 0 0 33.3333%;
    width: 33.3333%;
  }

  .allan-header-col-actions {
    flex: 0 0 41.6667%;
    width: 41.6667%;
  }

  .allan-header-actions {
    gap: var(--allan-space-2);
  }

  .allan-header-quicklinks {
    gap: var(--allan-space-1);
  }
}

@media (max-width: 991.98px) {
  .allan-home-hero,
  .allan-home-visit {
    grid-template-columns: 1fr;
  }

  .allan-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .allan-home-visit-media,
  .allan-home-visit-copy {
    order: initial;
  }

  .allan-home-video-banner {
    height: 60vw;
  }

  .allan-site-header .container {
    padding-top: var(--allan-space-2);
    padding-bottom: var(--allan-space-2);
  }

  .allan-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--allan-space-1);
    --bs-gutter-y: var(--allan-space-1);
  }

  #logo {
    order: 1;
    flex: 0 0 auto;
    width: auto;
  }

  .allan-header-actions {
    order: 2;
    flex: 1;
    justify-content: flex-end;
    margin-bottom: 0;
  }

  .allan-header-search-wrap {
    order: 3;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .allan-header-quicklinks {
    order: 2;
    margin-left: auto;
  }

  .allan-header-cart-wrap {
    order: 3;
  }

  .allan-header-stack + main {
    padding-top: var(--allan-space-4);
  }

  #category.navbar-toggler {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  #category.navbar-toggler::after {
    float: none;
  }

  #navbar-menu {
    padding: 0 0 var(--allan-space-2);
  }

  #menu .navbar-nav {
    gap: 0;
    padding: var(--allan-space-1) 0 0;
  }

  #menu .nav-item {
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  #menu .nav-link {
    /* Antes min-height:44px + padding var(--allan-space-3) (12px) — con ~10-15
       categorías de panadería apiladas en el acordeón, esa altura por fila hacía
       el menú móvil muy largo. Se reduce el padding vertical; el min-height se
       apoya en la miniatura de 28px (ver .allan-menu-cat-thumb) para no perder
       área de toque. */
    min-height: 40px;
    padding: var(--allan-space-2) 0;
  }

  /* Reserva el mismo espacio que ocupa la flecha real (.allan-menu-cat-caret) en
     las categorías CON subcategorías, para que las categorías SIN subcategorías
     (que ya no llevan flecha real, solo esta invisible) arranquen su texto exactamente
     en la misma posición — mismo elemento, mismo tamaño, solo sin mostrarse. */
  .allan-menu-cat-caret-spacer {
    visibility: hidden;
  }

  .allan-menu-cat-thumb {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: var(--allan-space-2);
    border-radius: var(--allan-radius-sm);
    overflow: hidden;
    background: var(--allan-surface);
  }

  .allan-menu-cat-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .allan-menu-cat-label {
    flex: 1 1 auto;
  }

  .allan-menu-cat-caret {
    display: inline-block;
    flex: 0 0 auto;
    margin-left: var(--allan-space-2);
    font-size: 12px;
    transition: transform var(--allan-transition);
  }

  /* Mismo patrón que #category.navbar-toggler[aria-expanded="true"]::after (rota
     180° al abrir) — aquí es por categoría individual, vía la clase is-open que ya
     pone menu.twig al expandir/colapsar cada acordeón. */
  #menu .nav-item.dropdown.is-open > .dropdown-toggle .allan-menu-cat-caret {
    transform: rotate(180deg);
  }

  #menu .nav-item::after,
  #menu .nav-item.dropdown::before {
    display: none;
  }

  #menu .nav-item.dropdown:hover .dropdown-menu {
    display: none;
  }

  /* Animación de entrada al abrir el acordeón de subcategorías: display:none→block
     es instantáneo (no se puede transicionar de forma confiable en todos los
     navegadores), pero una @keyframes que arranca en el mismo instante en que la
     clase is-open/.show aparece sí corre — fade + slide-down corto. Respeta
     prefers-reduced-motion vía la regla global *,*::before,*::after ya existente
     más abajo en el archivo (animation-duration:0.01ms). */
  #menu .nav-item.dropdown.is-open > .dropdown-menu {
    display: block;
    animation: allanMenuSubmenuIn var(--allan-transition) ease;
  }

  #menu .dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    margin-top: var(--allan-space-2);
    padding: var(--allan-space-2);
    border-radius: var(--allan-radius-md);
    background: var(--allan-surface);
    box-shadow: none;
    transform: none;
  }

  #menu .dropdown-menu.show {
    display: block;
  }

  #menu .dropdown-inner {
    display: grid;
    gap: var(--allan-space-2);
  }

  .allan-product-page {
    padding-right: var(--allan-space-4);
    padding-left: var(--allan-space-4);
  }

  .allan-product-hero {
    grid-template-columns: 1fr;
    gap: var(--allan-space-5);
  }

  .allan-product-summary-card {
    position: static;
  }

  .allan-product-main-link {
    min-height: min(78vw, 540px);
  }

  .allan-category-page {
    padding-right: var(--allan-space-4);
    padding-left: var(--allan-space-4);
  }

  .allan-category-hero {
    grid-template-columns: 1fr;
    gap: var(--allan-space-4);
  }

  .allan-category-hero-media {
    justify-content: flex-start;
  }

  .allan-category-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .allan-category-toolbar-left,
  .allan-category-toolbar-right {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .allan-category-select-group {
    flex: 1 1 220px;
    justify-content: space-between;
  }

  .allan-category-select-group .form-select {
    width: 100%;
    max-width: 220px;
    min-width: 0;
  }

  /* Página de categoría y búsqueda: cuadrícula/lista/comparar/ordenar/mostrar quedan en
     una sola fila deslizable (sin las etiquetas "Ordenar por"/"Mostrar", ver
     category.twig/search.twig, que usan aria-label en vez de <label> visible) en vez de
     apilarse en columnas. Se sobreescribe con #product-category/#product-search (mayor
     especificidad) para no afectar el toolbar de manufacturer_list.twig, que sí conserva
     sus etiquetas y su comportamiento apilado. */
  #product-category .allan-category-toolbar,
  #product-search .allan-category-toolbar {
    flex-direction: row;
    align-items: center;
  }

  #product-category .allan-category-toolbar-left,
  #product-category .allan-category-toolbar-right,
  #product-search .allan-category-toolbar-left,
  #product-search .allan-category-toolbar-right {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  #product-category .allan-category-select-group,
  #product-search .allan-category-select-group {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
  }

  #product-category .allan-category-select-group .form-select,
  #product-search .allan-category-select-group .form-select {
    width: auto;
    max-width: none;
    min-width: 0;
  }
}

@media (max-width: 767.98px) {
  /* Fix del "zoom" de Safari/iOS al enfocar un input, textarea o select: Safari
     hace zoom automático cuando el font-size COMPUTADO del campo es menor a 16px
     (para que el texto no se vea microscópico) — no pasa en Chrome/Android ni en
     escritorio porque ahí no existe esa regla. .form-control/.form-select heredan
     el font-size de Bootstrap (--bs-body-font-size: 0.8125rem = 13px), de ahí el
     bug. 14-15px lo reduce pero no lo elimina — tiene que ser 16px exactos (o más)
     para que Safari no vea motivo para hacer zoom. Global y solo en este
     breakpoint: en escritorio no hay bug que corregir y el tamaño de texto de los
     formularios no cambia ahí. Selectores más específicos que sí necesitan un
     tamaño más chico (ej. #product-category .allan-category-select-group
     .form-select, toolbar compacta) siguen ganando por especificidad — esto no
     los toca. */
  .form-control,
  .form-select,
  textarea {
    font-size: 16px;
  }

  /* Mismo fix de zoom de Safari/iOS que la regla de arriba, pero para inputs/textarea
     propios del tema que NO llevan clase .form-control (buscador del home, formulario
     de contacto, tracking) o que sí la llevan pero un selector más específico del tema
     vuelve a bajar el font-size por debajo de 16px (acordeón del carrito) — en ambos
     casos la regla genérica de arriba no les gana por especificidad o no aplica. */
  .allan-home-search-input,
  .allan-contact-input,
  .allan-tracking-input,
  .allan-cart-accordion .form-control,
  .allan-cart-accordion .form-select {
    font-size: 16px;
  }

  .allan-hero-slide {
    width: 92vw;
    min-width: 92vw;
  }

  .allan-login-page {
    padding-top: var(--allan-space-4);
  }

  .allan-login-card {
    padding: var(--allan-space-4);
  }

  .allan-login-card-actions {
    justify-content: stretch;
  }

  .allan-login-card-actions .btn {
    width: 100%;
  }

  .allan-register-card {
    padding: var(--allan-space-4);
  }

  .allan-register-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .allan-register-agree {
    order: -1;
  }

  .allan-register-submit {
    width: 100%;
  }

  .allan-account-welcome {
    flex-direction: column;
    align-items: stretch;
    padding: var(--allan-space-4);
  }

  .allan-account-reward-chip {
    justify-content: center;
  }

  .allan-account-tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  }

  .allan-contact-form-section {
    grid-template-columns: 1fr;
  }

  .allan-contact-form-image {
    order: -1;
  }

  .allan-about-history {
    grid-template-columns: 1fr;
  }

  .allan-about-history-media {
    order: -1;
  }

  .allan-about-values {
    grid-template-columns: 1fr;
  }

  .allan-gallery-hero-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .allan-careers-grid {
    grid-template-columns: 1fr;
  }

  .allan-tracking-form {
    flex-direction: column;
  }

  #logo {
    margin-bottom: 0;
    text-align: left;
  }

  .allan-header-search-input {
    min-height: 44px;
    padding-left: var(--allan-space-3);
    /* 16px, no menos — es un <input> real (buscador del header), por debajo de
       16px Safari/iOS le hace zoom a la página al enfocarlo. Ver nota grande al
       inicio de este media query. */
    font-size: 16px;
  }

  .allan-header-search-button {
    min-width: 44px;
    height: 44px;
  }

  .allan-header-quicklinks {
    display: flex;
    gap: var(--allan-space-1);
  }

  .allan-header-icon-link {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .allan-header-cart-toggle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .allan-header-cart-menu {
    width: min(100vw, 390px);
    min-width: min(100vw, 390px);
  }

  .product-thumb .content {
    padding: var(--allan-space-3) var(--allan-space-3) calc(38px + var(--allan-space-2) * 2 + var(--allan-space-1));
  }

  /* Vista "Lista" en móvil: imagen más chica (220px es demasiado ancho en un
     teléfono) para que el texto/precio/botones de la derecha tengan espacio real. */
  .allan-category-list .product-thumb .image {
    flex: 0 0 110px;
    width: 110px;
    padding: var(--allan-space-2);
  }

  .allan-category-list .product-thumb .content h4 {
    font-size: 14px;
  }

  .allan-product-page {
    padding-right: var(--allan-space-3);
    padding-bottom: 88px;
    padding-left: var(--allan-space-3);
  }

  .allan-product-hero {
    gap: var(--allan-space-4);
    margin-bottom: var(--allan-space-5);
  }

  /* Sticky add-to-cart bar on mobile: the same quantity stepper + Agregar button used
     in-flow on desktop gets pinned to the bottom of the viewport instead of being
     duplicated, so there's a single #input-quantity/name="quantity" field either way. */
  .allan-product-buybox > .form-label,
  .allan-product-buybox > #error-quantity {
    display: none;
  }

  .allan-product-buyrow {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    grid-template-columns: auto auto;
    justify-content: center;
    padding: var(--allan-space-3) var(--allan-space-4);
    border-top: 1px solid var(--allan-border);
    background: var(--allan-surface);
    box-shadow: 0 -8px 24px rgba(33, 23, 19, 0.12);
  }

  .allan-product-main-link {
    min-height: 72vw;
    padding: var(--allan-space-4);
  }

  .allan-product-main-image {
    max-height: 420px;
  }

  .allan-product-thumbs {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: var(--allan-space-2);
    padding: var(--allan-space-3);
  }

  .allan-product-summary-head,
  .allan-product-description,
  .allan-product-meta-grid,
  .allan-product-price-panel,
  .allan-product-purchase,
  .allan-product-tab-content {
    padding-right: var(--allan-space-4);
    padding-left: var(--allan-space-4);
  }

  .allan-product-title {
    font-size: 28px;
  }

  .allan-product-meta-grid {
    grid-template-columns: 1fr;
  }

  .allan-product-tabs {
    padding-right: var(--allan-space-4);
    padding-left: var(--allan-space-4);
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .allan-product-tabs .nav-link {
    white-space: nowrap;
  }

  .product-thumb .content h4 {
    font-size: 15px;
  }

  .price-new {
    font-size: 17px;
  }

  /* Categoría: en móvil se oculta la imagen de portada de la categoría (poco valor en
     pantallas chicas) y las subcategorías pasan de grid a una sola fila deslizable. */
  .allan-category-hero-media {
    display: none;
  }

  .allan-category-refine {
    margin-bottom: var(--allan-space-2);
  }

  .allan-category-chip-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--allan-space-2);
    padding-bottom: var(--allan-space-2);
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Barra de scroll nativa oculta; se puede seguir deslizando con el dedo (táctil,
       nativo) o arrastrando con el mouse (ver JS al final de category.twig). */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .allan-category-chip-grid::-webkit-scrollbar {
    display: none;
  }

  /* Pista de "hay más subcategorías a la derecha": un mask-image que desvanece el
     borde, no un div superpuesto — a diferencia del degradado/flecha que se probó y
     se quitó en 2026-08-20 (ver nota en opencart/CLAUDE.md), un mask solo afecta el
     render del propio contenedor, nunca intercepta el clic del chip de abajo. La
     clase .has-overflow la agrega/quita el JS al final de category.twig, solo
     mientras realmente falte contenido por deslizar a la derecha — así no sugiere
     "hay más" cuando ya se ven todas las subcategorías o cuando el usuario ya llegó
     al final del scroll. */
  .allan-category-chip-grid.has-overflow {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
  }

  .allan-category-chip-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .allan-category-chip-grid.is-dragging .allan-category-chip {
    pointer-events: none;
  }

  .allan-category-chip {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* Las subcategorías no tienen imagen propia: se quita el ícono placeholder y queda
     solo el texto. */
  .allan-category-chip-icon {
    display: none;
  }

  /* Toolbar de categoría/búsqueda en móvil: todo compacto para que cuadrícula/lista/
     comparar/ordenar/mostrar quepan siempre en una sola fila a ancho completo, sin
     necesitar deslizar (a diferencia de las chips de subcategoría, que sí deslizan). */
  #product-category .allan-category-toolbar,
  #product-search .allan-category-toolbar {
    gap: var(--allan-space-1);
  }

  #product-category .allan-category-toolbar-left,
  #product-category .allan-category-toolbar-right,
  #product-search .allan-category-toolbar-left,
  #product-search .allan-category-toolbar-right {
    gap: var(--allan-space-2);
  }

  #product-category .allan-category-view-toggle .btn,
  #product-search .allan-category-view-toggle .btn {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  #product-category .allan-category-compare-link,
  #product-search .allan-category-compare-link {
    gap: var(--allan-space-1);
    font-size: 12px;
  }

  #product-category .allan-category-select-group .form-select,
  #product-search .allan-category-select-group .form-select {
    min-width: 0;
    height: 34px;
    /* .form-select trae min-height: var(--allan-control) (44px) global; sin pisarlo
       aquí, ese mínimo le gana al height:34px y el select se sigue viendo alto. */
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 28px;
    padding-left: var(--allan-space-2);
    font-size: 12px;
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #product-category .allan-category-select-group.allan-category-limit-group .form-select,
  #product-search .allan-category-select-group.allan-category-limit-group .form-select {
    max-width: 56px;
  }

  #product-category .allan-category-select-group:not(.allan-category-limit-group) .form-select,
  #product-search .allan-category-select-group:not(.allan-category-limit-group) .form-select {
    max-width: 100px;
  }

  /* Paginación: por defecto Bootstrap deja el área de tap en ~30px de alto
     (--bs-pagination-padding-y:0.375rem + texto), por debajo del mínimo recomendado
     de ~44px para dedo. Con varias páginas de productos y clientela mayormente en
     celular, vale la pena un objetivo de tap más generoso solo en móvil. */
  .allan-category-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .allan-checkout-top > div,
  .allan-checkout-top > div > *,
  #checkout-payment-method .checkout-stack,
  #checkout-payment-method .checkout-stack > .checkout-panel {
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
  }

  .checkout-panel {
    border-radius: var(--allan-radius-md);
  }

  .checkout-panel legend {
    padding: var(--allan-space-4);
    font-size: 18px;
  }

  .checkout-choice-card .checkout-option-list,
  .checkout-custom-card,
  .checkout-grid,
  .checkout-actions {
    padding-right: var(--allan-space-4);
    padding-left: var(--allan-space-4);
  }

  .checkout-actions .btn,
  .allan-btn-checkout-step,
  .allan-btn-confirm-order {
    width: 100%;
    min-width: 0;
  }

  .checkout-switches {
    flex-direction: column;
    gap: var(--allan-space-2);
  }

  .checkout-account-row {
    padding: var(--allan-space-4) var(--allan-space-4) 0;
  }

  .checkout-account-switches {
    margin-bottom: var(--allan-space-3);
  }

  .checkout-customer-group {
    padding-left: 0;
  }

  .allan-cart-title {
    margin-bottom: var(--allan-space-5);
    font-size: 30px;
  }

  .allan-cart-table-wrap {
    overflow-x: auto;
  }

  .allan-cart-table {
    min-width: 680px;
  }

  .allan-cart-table thead th,
  .allan-cart-price-cell,
  .allan-cart-total-cell,
  .allan-cart-meta,
  .allan-cart-attention,
  .allan-cart-attention * {
    font-size: 0.88rem;
  }

  .allan-cart-table > :not(caption) > * > * {
    padding: var(--allan-space-5) var(--allan-space-3);
  }

  .allan-col-image {
    width: 100px;
  }

  .allan-col-quantity {
    width: 190px;
  }

  .allan-cart-image-link {
    width: 72px;
    height: 72px;
  }

  .allan-cart-product-link {
    font-size: 0.92rem;
  }

  .allan-qty-control {
    gap: var(--allan-space-2);
  }

  .allan-qty-stepper {
    gap: var(--allan-space-2);
    padding: var(--allan-space-1) var(--allan-space-2);
  }

  .allan-qty-input {
    /* Un poco más ancho que antes (28px→32px) para que un font-size de 16px
       (obligatorio para no disparar el zoom de Safari/iOS al enfocarlo — es un
       <input type="text"> real) no quede apretado con 2 dígitos. */
    width: 32px;
    min-width: 32px;
    height: 30px;
    font-size: 16px;
  }

  .allan-qty-button,
  .allan-cart-icon-btn {
    width: 34px;
    height: 34px;
  }

  .allan-cart-card {
    padding: var(--allan-space-6) var(--allan-space-5);
  }
}

@media (max-width: 575.98px) {
  .allan-gallery-grid {
    grid-template-columns: 1fr;
  }

  #alert {
    top: var(--allan-space-3);
    right: var(--allan-space-3);
    left: var(--allan-space-3);
    width: auto;
  }

  #alert .allan-cart-alert {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: var(--allan-space-2);
    padding: var(--allan-space-3);
    padding-right: var(--allan-space-6);
  }

  .allan-cart-alert-thumb-link,
  .allan-cart-alert-thumb,
  .allan-cart-alert-thumb-placeholder {
    width: 58px;
    height: 58px;
  }

  .allan-cart-alert-title {
    font-size: 14px;
  }

  .allan-cart-alert-message {
    font-size: 12px;
  }

  .allan-cart-alert-actions {
    gap: var(--allan-space-2);
    grid-template-columns: minmax(0, 1fr);
  }

  .allan-cart-alert-button {
    min-height: 36px;
    padding: var(--allan-space-2);
    font-size: 12px;
  }

  #logo img {
    max-height: 42px;
  }

  /* Miniatura un poco más chica en móvil angosto (el layout de 2 columnas ya es el
     mismo en todos los anchos, ver sección "04. Header Cart" — esto solo le da un poco
     más de aire a la columna de contenido en pantallas de ~360-390px). */
  .allan-header-cart-item {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .allan-header-cart-thumb-cell,
  .allan-header-cart-thumb-link,
  .allan-header-cart-thumb {
    width: 56px;
    height: 56px;
  }

  .allan-category-page {
    padding-right: var(--allan-space-3);
    padding-left: var(--allan-space-3);
  }

  .allan-category-title {
    font-size: 24px;
  }

  .allan-category-chip {
    min-height: 52px;
  }

  .allan-category-toolbar {
    padding: var(--allan-space-4);
  }

  /* :not(.allan-category-list) — si no se excluye, esta regla le gana en cascada (va
     después en el archivo) a la de la vista lista y le reintroduce --bs-gutter-y:1rem,
     separando las filas que deberían quedar pegadas. */
  .allan-category-grid:not(.allan-category-list) {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }

  /* Debajo de 576px Bootstrap solo trae row-cols-1 (1 columna); en vista de cuadrícula
     mostramos 2 en su lugar, igual que ya se ve de 576px a 991px. La vista de lista
     (.allan-category-list, sin row-cols-sm-2/lg-4) queda igual, 1 sola columna. */
  .allan-category-grid:not(.allan-category-list) > .col {
    flex: 0 0 auto;
    width: 50%;
  }

  /* A 2 columnas, cada tarjeta queda muy angosta (~150-170px) y la barra de 3 botones
     (2 íconos de 38px + el botón "Agregar") no le deja casi ancho al texto del botón
     principal, que termina cortado en "Agre...". Se achican padding/gap/íconos para
     liberar esos ~35px y que "Agregar" entre completo sin elipsis. */
  .allan-category-grid:not(.allan-category-list) .product-thumb .button {
    padding-left: var(--allan-space-2);
    padding-right: var(--allan-space-2);
    gap: var(--allan-space-1);
  }

  .allan-category-grid:not(.allan-category-list) .product-thumb .button .button-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }

  .allan-category-grid:not(.allan-category-list) .product-thumb .button .button-cart-main {
    padding: 0 var(--allan-space-2);
    font-size: 12px;
  }

  .allan-category-select-group {
    flex-direction: column;
    align-items: stretch;
    gap: var(--allan-space-2);
  }

  .allan-category-select-group .form-select {
    max-width: none;
  }

  .allan-summary-item,
  .allan-summary-item.has-thumb {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
    gap: var(--allan-space-4);
  }

  .allan-summary-thumb,
  .allan-summary-thumb .img-thumbnail {
    width: 92px;
    height: 92px;
  }

  .allan-summary-thumb .img-thumbnail {
    padding: var(--allan-space-1);
  }

  .allan-summary-total {
    grid-column: 2;
    justify-self: end;
  }
}

/* After-hours notice banner */
.allan-after-hours-notice {
  background-color: var(--allan-accent-soft);
  border-bottom: 1px solid var(--allan-accent);
  color: var(--allan-primary-hover);
  font-size: 0.9rem;
  padding: var(--allan-space-2) 0;
  text-align: center;
}

.allan-after-hours-notice .fa-clock {
  margin-right: 0.35rem;
  color: var(--allan-accent-hover);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }

  .allan-hero-track,
  .allan-home-marquee-track {
    animation: none;
  }
}

/* GPS map (compartido entre checkout/payment_address y confirm) */
#confirm-gps-map-wrap {
  margin-bottom: 0;
  padding: 12px 16px 0;
}

.allan-gps-map-label {
  margin-bottom: var(--allan-space-2);
  color: var(--allan-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.allan-gps-map {
  width: 100%;
  height: 200px;
  border: 1px solid var(--allan-border);
  border-radius: var(--allan-radius-sm);
  overflow: hidden;
}

.allan-gps-map--compact {
  height: 160px;
}

.allan-gps-refresh-btn {
  margin-left: var(--allan-space-2);
  padding: 0;
  border: none;
  background: none;
  color: var(--allan-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.allan-gps-refresh-btn:hover {
  color: var(--allan-primary-hover);
  text-decoration: underline;
}

.allan-gps-refresh-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.allan-gps-refresh-btn.is-loading i {
  animation: allanGpsSpin 0.8s linear infinite;
}

@keyframes allanGpsSpin {
  to { transform: rotate(360deg); }
}

.allan-gps-accuracy-note {
  display: none;
  margin-top: var(--allan-space-2);
  color: var(--allan-muted);
  font-size: 0.78rem;
}

.allan-gps-accuracy-note.is-low-accuracy {
  color: var(--allan-danger);
  font-weight: 600;
}