/* =========================================================
   SHOP — Internet Explorer chrome + Sweat Dude product page
   ========================================================= */

/* ---------- Browser chrome ---------- */
.ie { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.ie__band {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--shadow);
}
.ie__band > .grip { position: absolute; left: 0.3rem; top: 0.3rem; bottom: 0.3rem; }

.ie__menubar { height: 3rem; padding-left: 1.1rem; }
.ie__menu-item {
  padding: 0.2rem 0.9rem;
  background: none;
  border: 0;
  font-size: 1.6rem;
}
.ie__menu-item:hover { box-shadow: var(--sh-thin-out); }
.ie__menu-item:active { box-shadow: var(--sh-thin-in); }
.ie__menu-item u { text-decoration-thickness: 1px; text-underline-offset: 0.2rem; }

.ie__toolbar { height: 5.8rem; padding-left: 1rem; }
.tb-btn {
  width: 7.5rem;
  height: 5.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background: none;
  border: 0;
  font-size: 1.55rem;
}
.tb-btn__icon { display: flex; align-items: center; gap: 0.3rem; }
.tb-btn .ico { width: 2.8rem; height: 2.8rem; }
.tb-btn:hover:not(:disabled) { box-shadow: var(--sh-thin-out); }
.tb-btn:active:not(:disabled) { box-shadow: var(--sh-thin-in); }
.tb-btn:disabled { color: var(--shadow); text-shadow: 1px 1px var(--white); }
.tb-btn:disabled .ico { opacity: 0.45; }
.tb-btn--caret {
  width: 1.6rem;
  align-self: stretch;
  height: auto;
  margin: 0.3rem 0;
  justify-content: flex-start;
  padding-top: 1.6rem;
}
.caret { width: 0.7rem; height: 0.4rem; fill: currentColor; }
.ie__toolbar .etched-v { height: 4.6rem; margin: 0 0.5rem; }

.ie__address { height: 3rem; padding: 0 0.6rem 0 1.2rem; gap: 0.8rem; }
.ie__address-label { font-size: 1.6rem; }
.ie__address-field {
  flex: 1;
  min-width: 0;
  height: 2.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.3rem 0.3rem 0.6rem;
  background: var(--white);
  box-shadow: var(--sh-field);
}
.ie__address-field .ico { width: 1.9rem; height: 1.9rem; }
.ie__address-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 1.6rem;
}
.ie__address-drop {
  width: 2rem;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
}
.ie__go {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.4rem;
  background: none;
  border: 0;
}
.ie__go .ico { width: 2rem; height: 2rem; }
.ie__go:hover { box-shadow: var(--sh-thin-out); }

.ie__frame {
  flex: 1;
  min-height: 0;
  display: flex;
  margin-top: 0.3rem;
  padding: calc(var(--b) * 2);
  box-shadow: var(--sh-field);
}
.ie__viewport {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: scroll;
  background: #f1f1ef;
}

.ie__status {
  height: 2.2rem;
  flex: none;
  display: flex;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.ie__status-panel { box-shadow: var(--sh-thin-in); }
.ie__status-panel--main { flex: 1; }
.ie__status-panel--zone { width: 2.4rem; }
.ie__grip {
  width: 1.8rem;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 45%, var(--white) 45% 52%, var(--shadow) 52% 60%, transparent 60% 68%,
      var(--white) 68% 75%, var(--shadow) 75% 83%, transparent 83%);
}

/* ---------- Product page ----------
   Monochrome, lightly dirty, scanned. It must never compete with the OS chrome. */
.pdp-page {
  min-height: 100%;
  width: max-content;
  min-width: 100%;
  background-color: #f1f1ef;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  font-family: var(--shop-font);
  color: #000;
  user-select: text;
}

.pdp {
  width: 84.4rem;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  padding: 2.9rem 1rem 1.2rem 2rem;
}

.pdp__thumbs {
  width: 9.7rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-right: 2.4rem;
}
.pdp__thumb {
  height: 10.1rem;
  padding: 0.3rem;
  background: #e7e7e5;
  border: 1px solid #8e8e8c;
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumb[aria-pressed="true"] { border-color: #000; }
.pdp__thumb:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }

.pdp__main {
  width: 38.3rem;
  height: 47.6rem;
  flex: none;
  margin-right: 3.1rem;
  padding: 0.6rem;
  background: #e7e7e5;
  border: 1px solid #8e8e8c;
}
.pdp__main img { width: 100%; height: 100%; object-fit: contain; filter: contrast(1.05); }

.pdp__info { width: 27.9rem; flex: none; padding-top: 0.3rem; }

.pdp__title {
  font-size: 5.4rem;
  font-weight: normal;
  line-height: 0.85;
  letter-spacing: 0.1rem;
  white-space: nowrap;
  text-shadow: 0.1rem 0 0 #000; /* bitmap-style faux bold */
}
.pdp__price {
  margin-top: 1rem;
  font-size: 4.4rem;
  line-height: 0.9;
  letter-spacing: 0.2rem;
  text-shadow: 0.1rem 0 0 #000;
}
.pdp__desc {
  margin-top: 1.9rem;
  font-size: 2.4rem;
  line-height: 2.1rem;
  letter-spacing: 0.1rem;
}
.pdp__tagline {
  margin-top: 2rem;
  font-size: 2.4rem;
  line-height: 2.1rem;
  letter-spacing: 0.1rem;
}
.pdp__label {
  margin-top: 2.1rem;
  font-size: 2.4rem;
  line-height: 2.1rem;
  letter-spacing: 0.1rem;
}

.pdp__sizes { display: flex; gap: 0.7rem; margin-top: 0.7rem; }
.pdp__size {
  width: 5.7rem;
  height: 3.1rem;
  background: #fbfbfa;
  border: 1px solid #4a4a4a;
  box-shadow: inset -1px -1px #b9b9b7;
  font-family: var(--shop-font);
  font-size: 2.4rem;
  line-height: 1;
}
.pdp__size:hover { background: #e3e3e1; }
.pdp__size[aria-pressed="true"] { background: #000; color: #fff; box-shadow: none; }

.pdp__btn {
  display: block;
  width: 24.7rem;
  height: 3.9rem;
  border: 1px solid #3c3c3c;
  font-family: var(--shop-font);
  font-size: 2.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
}
.pdp__btn:active { transform: translate(1px, 1px); }
.pdp__btn--cart { margin-top: 2.3rem; background: #c7c7c5; color: #000; box-shadow: inset 1px 1px #e4e4e2, inset -1px -1px #8d8d8b; }
.pdp__btn--cart:hover { background: #b9b9b7; }
.pdp__btn--buy { margin-top: 0.9rem; height: 3.7rem; background: #000; color: #fff; border-color: #000; }
.pdp__btn--buy:hover { background: #262626; }

.pdp__size:focus-visible,
.pdp__btn:focus-visible,
.pdp__cart:focus-visible,
.pdp__section summary:focus-visible { outline: 1px dotted currentColor; outline-offset: -0.4rem; }

.pdp__extras { margin-top: 0.4rem; }
.pdp__cart {
  float: right;
  width: 13.3rem;
  height: 4.1rem;
  margin: 1rem 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: #efefed;
  border: 1px solid #5a5a58;
  box-shadow: inset -1px -1px #a9a9a7, inset 1px 1px #fff;
  font-family: var(--shop-font);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  white-space: nowrap;
}
.pdp__cart .ico { width: 2.5rem; height: 2.5rem; }
.pdp__cart:active { transform: translate(1px, 1px); }

.pdp__section summary {
  list-style: none;
  white-space: nowrap;
  font-size: 2.2rem;
  line-height: 2.2rem;
  letter-spacing: 0.1rem;
  cursor: default;
}
.pdp__section summary::-webkit-details-marker { display: none; }
.pdp__section summary::before { content: "+\00a0"; }
.pdp__section[open] summary::before { content: "\2212\00a0"; }
.pdp__section-body {
  padding: 0.3rem 0 0.8rem 1.6rem;
  font-size: 2rem;
  line-height: 2rem;
  color: #3a3a3a;
}

/* =========================================================
   MOBILE — SHOP (ver el bloque equivalente en window.css)

   Todo cuelga de <html data-mobile>, que scale.js solo escribe en un dispositivo de
   puntero grueso con el lado corto de teléfono. En escritorio el atributo no existe y
   ninguna de estas reglas puede llegar a aplicarse.

   Y dentro, casi todo cuelga además de `orientation: portrait`. Medido a 844x390: el
   layout de tres columnas YA cabe entero, 0 elementos fuera del viewport. Ahí no hay
   nada que arreglar, así que en horizontal SHOP se queda exactamente como está.
   ========================================================= */

@media (orientation: portrait) {

  /* ---------- chrome de Internet Explorer ----------
     La única banda que desborda es la toolbar: 109 px a 320 de ancho, 134 a 390 y 148 a
     430 (la barra de menús y la de dirección ya caben, con 25 y 4 px de sobra a 320).
     Los botones ya estaban aplastados por flex a 34-57 px y aun así se salían, porque el
     texto fija su ancho mínimo.

     Así que se va el texto y se quedan los iconos. No es una barra moderna: es el modo
     que el propio Internet Explorer tenía en View > Toolbars > Text Labels. Con icono
     solo, Back, Forward, Stop, Refresh, Home y Search entran sin tocar el scroll; lo que
     el brief permite compactar —Favorites, History, Mail, Print— queda detrás de un
     desplazamiento interno de la banda, que nunca ensancha la ventana. */
  [data-mobile] .ie__toolbar {
    height: 3.8rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  [data-mobile] .ie__toolbar::-webkit-scrollbar { display: none; }

  /* `flex: none` es lo que convierte el aplastamiento en desplazamiento: sin esto los
     botones seguirían encogiéndose hasta quedar ilegibles antes de permitir scroll. */
  [data-mobile] .ie__toolbar .tb-btn {
    flex: none;
    width: auto;
    min-width: 3.6rem;
    height: 3.2rem;
    justify-content: center;
    padding: 0 0.4rem;
  }
  [data-mobile] .ie__toolbar .tb-btn > span:not(.tb-btn__icon) { display: none; }
  [data-mobile] .ie__toolbar .tb-btn--caret {
    min-width: 1.8rem;
    padding-top: 0;
    margin: 0;
    justify-content: center;
  }
  [data-mobile] .ie__toolbar .etched-v { height: 2.8rem; }

  /* ---------- la página de producto, en vertical ----------
     `max-content` era lo que hacía que la página midiera 765 px en un viewport de 355 y
     obligara a arrastrar en horizontal para llegar al precio o a las tallas. */
  [data-mobile] .pdp-page { width: auto; min-width: 0; }

  [data-mobile] .pdp {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 1.6rem 1.4rem 2.4rem;
  }

  /* El orden del DOM se queda como está —thumbnails, imagen, info— y solo cambia el
     orden visual, así que ProductPage.js no se toca. */
  [data-mobile] .pdp__main {
    order: 1;
    width: 90%;
    max-width: 38.3rem;
    height: auto;
    aspect-ratio: 383 / 476;   /* la caja exacta del escritorio, sin deformar */
    margin: 0 auto 1.6rem;
  }

  /* De columna a fila. Si los cuatro no caben, se desplazan DENTRO de su fila: el que
     nunca se desplaza es el documento. */
  [data-mobile] .pdp__thumbs {
    order: 2;
    width: 100%;
    flex-direction: row;
    gap: 0.9rem;
    margin: 0 0 2rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  [data-mobile] .pdp__thumbs::-webkit-scrollbar { display: none; }
  /* 8,3rem es la medida a la que los cuatro caben justos sin desplazar: el escritorio
     móvil mide 430 unidades en CUALQUIER teléfono (ver scale.js), así que el ancho
     interior en rem es el mismo a 320 que a 430 y esta cuenta vale para todos:
     (36,3rem de contenido - 3 huecos de 0,9) / 4. El scroll de arriba se queda como red
     de seguridad por si alguna vez son más de cuatro. */
  [data-mobile] .pdp__thumb {
    flex: none;
    width: 8.3rem;
    height: 8.3rem;
  }

  [data-mobile] .pdp__info { order: 3; width: 100%; padding-top: 0; }

  /* ---------- tallas ----------
     El dibujo Win98 crece un poco y el área táctil crece un poco más, por arriba y por
     abajo, donde solo hay márgenes: la etiqueta SIZE queda a 0,7rem y ADD TO CART a
     2,3rem, así que nada puede solaparse. A lo ancho no se estira, para que dos tallas
     contiguas no compartan borde táctil. */
  [data-mobile] .pdp__sizes { gap: 1rem; flex-wrap: wrap; }
  [data-mobile] .pdp__size {
    width: 7.4rem;
    height: 4.4rem;
    font-size: 2.8rem;
  }

  /* ---------- ADD TO CART / BUY NOW ----------
     Ancho completo y alto de dedo. Mismo borde de 1px, mismos colores, mismos bevels:
     no se redondea nada. */
  [data-mobile] .pdp__btn { width: 100%; height: 5rem; }
  [data-mobile] .pdp__btn--buy { height: 5rem; }

  /* ---------- carrito y desplegables ----------
     El carrito deja de flotar a la derecha: flotando, en una columna estrecha, empujaba
     el primer desplegable contra el borde. */
  [data-mobile] .pdp__cart {
    float: none;
    width: 100%;
    height: 5rem;
    margin: 1.6rem 0 0.6rem;
  }
  [data-mobile] .pdp__section-body { padding-right: 0.4rem; }
}

/* ---------- táctil, en las dos orientaciones ----------
   Esto no es layout, es tamaño de dedo, y un dedo mide lo mismo con el teléfono de pie
   que tumbado. En horizontal el producto conserva su composición de tres columnas —ya
   cabía entera, 0 elementos fuera— y solo se le ensancha lo que se toca.

   Las medidas van en PÍXELES, no en rem, por lo mismo: con 4,4rem el desplegable se
   quedaba en 34 px justo en el teléfono más pequeño, porque el rem encoge con la escala
   y el dedo no. */

/* El dibujo Win98 de la talla no cambia; crece un área invisible por arriba y por abajo,
   donde solo hay márgenes (la etiqueta SIZE a 0,7rem, ADD TO CART a 2,3rem). A lo ancho
   no se estira: dos tallas contiguas compartirían borde táctil. */
[data-mobile] .pdp__size { position: relative; }
[data-mobile] .pdp__size::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

[data-mobile] .pdp__section summary {
  display: flex;
  align-items: center;
  min-height: 40px;
}