.hat-c-cpmodal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--hat-space-4);
  background: var(--hat-color-overlay);
  font-family: var(--hat-font-body);
}

.hat-c-cpmodal.is-open { display: flex; }

.hat-c-cpmodal__box {
  width: 100%;
  max-width: 420px;
  background: var(--hat-color-surface);
  border-radius: var(--hat-radius-md);
  box-shadow: var(--hat-shadow-modal);
  padding: var(--hat-space-6);
  position: relative;
  color: var(--hat-color-text);
}

.hat-c-cpmodal__close {
  position: absolute;
  top: var(--hat-space-3);
  right: var(--hat-space-3);
  border: 0;
  background: transparent;
  font-size: var(--hat-fs-lg);
  line-height: 1;
  cursor: pointer;
  color: var(--hat-color-text-soft);
  padding: var(--hat-space-2);
}

.hat-c-cpmodal__title {
  margin: 0 0 var(--hat-space-4);
  font-family: var(--hat-font-heading);
  font-size: var(--hat-fs-lg);
  font-weight: var(--hat-fw-bold);
}

.hat-c-cpmodal__form {
  display: flex;
  gap: var(--hat-space-2);
}

.hat-c-cpmodal__input {
  flex: 1;
  height: var(--hat-control-height);
  border: 1px solid var(--hat-color-border);
  border-radius: var(--hat-radius-sm);
  padding: 0 var(--hat-space-3);
  font-size: var(--hat-fs-md);
  letter-spacing: 0.12em;
  color: var(--hat-color-text);
  background: var(--hat-color-surface);
  transition: box-shadow var(--hat-transition), border-color var(--hat-transition);
}

.hat-c-cpmodal__input:focus {
  outline: none;
  border-color: var(--hat-color-primary);
  box-shadow: var(--hat-focus-ring);
}

.hat-c-cpmodal__submit {
  height: var(--hat-control-height);
  border: 0;
  border-radius: var(--hat-radius-sm);
  padding: 0 var(--hat-space-4);
  background: var(--hat-color-primary);
  color: var(--hat-color-primary-contrast);
  font-size: var(--hat-fs-md);
  font-weight: var(--hat-fw-bold);
  cursor: pointer;
  transition: opacity var(--hat-transition);
}

.hat-c-cpmodal__submit:hover { opacity: 0.9; }
.hat-c-cpmodal__submit[disabled] { opacity: 0.55; cursor: wait; }

/* "Usar mi ubicacion" (v0.21.7): enlace discreto bajo el campo, con icono de posicion */
.hat-c-cpmodal__geo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--hat-space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--hat-color-primary);
  font-size: var(--hat-fs-sm);
  font-weight: var(--hat-fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hat-c-cpmodal__geo::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Resultado: discreto, como la pildora de las migas de pan de la ficha (v0.21.8) */
.hat-c-cpmodal__result {
  margin-top: var(--hat-space-3);
  padding: 8px 12px;
  border-radius: 8px;
  background: #e8ecec;
  color: var(--hat-color-text);
  font-size: var(--hat-fs-sm);
  line-height: 1.5;
  display: none;
}

.hat-c-cpmodal__result.is-visible { display: block; }
.hat-c-cpmodal__result.is-info { color: var(--hat-color-text-soft); }

.hat-c-cpmodal__result .hat-c-btn {
  height: 34px;
  padding: 0 14px;
  font-size: var(--hat-fs-sm);
}

/* Barra superior de la cabecera: "Enviamos a Granada y alrededores [Comprobar CP]". El boton usa el
   estilo de Impreza us-btn-style_3 (el blanco de "Escribenos"); aqui solo se ajusta al alto de la barra,
   se le pone el icono de ubicacion y se anula la altura de linea del elemento HTML, que lo descentraba. */
.hat-cpbar-wrap,
.hat-cpbar-wrap > * {
  display: flex;
  align-items: center;
  line-height: 1;
}

.hat-cpbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hat-cpbar .hat-cpbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0.6em 1em;
  font-size: 11px;
  line-height: 1;
}

.hat-cpbar .hat-cpbar__btn .w-btn-label { line-height: 1; }

/* 0.21.18: el ::before de los botones de Impreza es su capa de borde y fondo (posicion absoluta);
   el pin va como SVG dentro del boton. */
.hat-cpbar .hat-cpbar__btn .hat-cpbar__pin {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  flex: none;
  display: block;
}
.hat-cpbar .hat-cpbar__btn .w-btn-label { position: relative; z-index: 1; }

@media (max-width: 600px) {
  .hat-cpbar { gap: 8px; font-size: 11px; }
  .hat-cpbar .hat-cpbar__btn { font-size: 10px; }
}

/* 0.21.23: botones del resultado del codigo postal. "Continuar" a todo el ancho. */
.hat-c-cpmodal__actions { display: flex; flex-wrap: wrap; gap: var(--hat-space-2); margin-top: var(--hat-space-3); }
.hat-c-cpmodal__result .hat-c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 var(--hat-space-4);
  border-radius: var(--hat-radius-sm);
  border: 1px solid var(--hat-color-primary);
  font-family: var(--hat-font-body); font-size: var(--hat-fs-md); font-weight: var(--hat-fw-bold);
  text-decoration: none; cursor: pointer; line-height: 1;
}
.hat-c-cpmodal__result .hat-c-btn--primary { background: var(--hat-color-primary); color: var(--hat-color-primary-contrast); }
.hat-c-cpmodal__result .hat-c-btn--ghost { background: transparent; color: var(--hat-color-primary); }
.hat-c-cpmodal__result .hat-c-btn--block { width: 100%; }

/* 0.21.23: la barra superior nunca se parte en dos lineas. Por debajo de 480 px el texto, el boton y
   sus rellenos se van haciendo mas pequenos con el ancho de la pantalla. */
.hat-cpbar { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 480px) {
  .hat-cpbar { gap: 6px; font-size: clamp(8px, 2.6vw, 11px); letter-spacing: 0.01em; }
  .hat-cpbar .hat-cpbar__btn { font-size: clamp(8px, 2.4vw, 10px); padding: 0.55em 0.75em; gap: 4px; }
  .hat-cpbar .hat-cpbar__btn .hat-cpbar__pin { width: 10px; height: 10px; }
}

/* 0.21.23: cabecera de movil (Impreza, estado "mobiles"). Los iconos no se cortan nunca: rellenos
   pequenos, icono de menu de tamano normal y el logo es lo que encoge. */
@media (max-width: 600px) {
  .l-header .l-subheader.at_middle .l-subheader-cell.at_left { flex: 1 1 auto !important; min-width: 0 !important; }
  .l-header .l-subheader.at_middle .l-subheader-cell.at_right { flex: 0 0 auto !important; }
  .l-header .ush_image_2.menu-header-toggler { padding: 8px 6px !important; flex: none !important; }
  .l-header .ush_image_2.menu-header-toggler img { width: 22px !important; height: auto !important; }
  .l-header .ush_image_1.header-logo { flex: 0 1 140px !important; min-width: 0 !important; height: auto !important; margin: 0 0 0 6px !important; }
  .l-header .ush_image_1.header-logo .w-image-h { display: block; }
  .l-header .ush_image_1.header-logo img { width: 100% !important; max-width: 140px !important; height: auto !important; }
  .l-header .ush_hwrapper_1 { gap: 0 !important; }
  .l-header .ush_hwrapper_1 .header-account,
  .l-header .ush_hwrapper_1 .w-search-open,
  .l-header .ush_hwrapper_1 .w-cart-link { padding: 8px 7px !important; }
}
@media (max-width: 360px) {
  .l-header .ush_image_1.header-logo { flex-basis: 120px !important; }
  .l-header .ush_hwrapper_1 .header-account,
  .l-header .ush_hwrapper_1 .w-search-open,
  .l-header .ush_hwrapper_1 .w-cart-link { padding: 8px 5px !important; }
}
/* 0.21.24: todo centrado en vertical en la fila de la cabecera de movil (el logo sin altura fija). */
@media (max-width: 600px) {
  .l-header .l-subheader.at_middle .l-subheader-h,
  .l-header .l-subheader.at_middle .l-subheader-cell,
  .l-header .ush_hwrapper_1 { align-items: center !important; }
  .l-header .ush_image_1.header-logo,
  .l-header .ush_image_2.menu-header-toggler,
  .l-header .ush_hwrapper_1 { align-self: center !important; }
  .l-header .ush_popup_1 { margin: 0 !important; }
}
/* 0.21.25: Impreza da altura fija al contenedor del logo y del icono de menu; la imagen va centrada dentro. */
@media (max-width: 600px) {
  .l-header .ush_image_1.header-logo,
  .l-header .ush_image_1.header-logo .w-image-h,
  .l-header .ush_image_2.menu-header-toggler .w-image-h { display: flex !important; align-items: center !important; }
}

/* 0.21.26: pie en movil. Logo mas pequeno, menos relleno y los tres grupos de enlaces apilados en una
   columna centrada (como el logo y las redes), con una linea fina entre grupos. */
@media (max-width: 600px) {
  .l-footer .l-section:first-child { padding-top: 48px !important; padding-bottom: 40px !important; }
  .l-footer .l-section:first-child .w-image img { width: 150px !important; height: auto !important; }
  .l-footer .l-section:first-child .w-socials { margin-top: 16px !important; margin-bottom: 8px !important; }
  .l-footer .l-section:first-child .w-hwrapper.align_justify { flex-direction: column !important; align-items: center !important; gap: 0 !important; margin-top: 8px !important; }
  .l-footer .l-section:first-child .w-hwrapper.align_justify > .w-vwrapper {
    width: 100% !important; align-items: center !important; text-align: center !important;
    gap: 10px !important; margin: 0 !important; padding: 20px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .l-footer .l-section:first-child .w-hwrapper.align_justify > .w-vwrapper .w-text { margin: 0 !important; width: auto !important; font-size: 17px !important; line-height: 1.3 !important; }
}
@media (max-width: 600px) {
  .l-footer .l-section:first-child .g-cols { row-gap: 12px !important; gap: 12px !important; }
  .l-footer .l-section:first-child .w-image { margin-bottom: 0 !important; }
  .l-footer .l-section:first-child .vc_column-inner > * + .w-socials { margin-top: 20px !important; }
}
@media (max-width: 600px) {
  /* 0.21.28: el bloque de logo y redes tenia 300 px fijos del diseno de escritorio: a todo el ancho y centrado. */
  .l-footer .l-section:first-child .w-vwrapper.align_center { width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
}