* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:#090b0d;
  color:#f5f7f8;
  font-family:Inter,Arial,sans-serif
}

button,input,select {
  font:inherit
}

button,
a,
input,
select {
  -webkit-tap-highlight-color:transparent
}

button,
a {
  transition:
    transform .16s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    opacity .18s ease
}

button:active {
  transform:translateY(1px) scale(.975)
}

.nav {
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(20px,5vw,90px);
  border-bottom:1px solid #20252a;
  background:#0b0e10;
  position:sticky;
  top:0;
  z-index:30;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition:
    background-color .2s ease,
    box-shadow .2s ease
}

.brand img {
  width:135px;
  display:block;
  transition:transform .22s ease,filter .22s ease
}

.brand:hover img {
  transform:scale(1.025);
  filter:brightness(1.08)
}

.nav nav {
  display:flex;
  align-items:center;
  gap:26px
}

.nav a,
.nav button {
  color:#fff;
  text-decoration:none;
  background:none;
  border:0;
  cursor:pointer
}

.nav a:hover,
.nav button:hover {
  color:#8cf28c
}

.cartBtn,
#add,
#checkout,
form button,
.accountActions button {
  background:#58db58!important;
  color:#081009!important;
  font-weight:800;
  border:0!important;
  border-radius:10px;
  padding:12px 18px!important;
  cursor:pointer;
  box-shadow:0 5px 18px rgba(88,219,88,.08)
}

.cartBtn:hover,
#add:hover,
#checkout:hover,
form button:hover,
.accountActions button:hover {
  transform:translateY(-2px);
  box-shadow:0 9px 24px rgba(88,219,88,.2);
  filter:brightness(1.04)
}

.cartBtn:active,
#add:active,
#checkout:active,
form button:active,
.accountActions button:active {
  transform:translateY(0) scale(.975);
  box-shadow:0 3px 10px rgba(88,219,88,.12)
}

.hero {
  width:100%;
  overflow:hidden;
  background:#050607
}

.hero img {
  width:100%;
  height:auto;
  display:block;
  animation:heroReveal .65s ease both
}

@keyframes heroReveal {
  from {
    opacity:.72;
    transform:scale(1.012)
  }

  to {
    opacity:1;
    transform:scale(1)
  }
}

.benefits {
  display:flex;
  justify-content:center;
  gap:48px;
  padding:14px 20px;
  border-block:1px solid #20252a;
  background:#101417;
  font-size:14px
}

.benefits span {
  transition:color .18s ease,transform .18s ease
}

.benefits span:hover {
  color:#fff;
  transform:translateY(-1px)
}

main {
  max-width:1280px;
  margin:auto;
  padding:54px 28px;
  animation:contentReveal .42s ease both
}

@keyframes contentReveal {
  from {
    opacity:0;
    transform:translateY(7px)
  }

  to {
    opacity:1;
    transform:translateY(0)
  }
}

.eyebrow {
  color:#58db58;
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em
}

.controls h1 {
  font-size:36px;
  margin:8px 0 24px
}

.garments,
.filters,
.viewSwitch,
.tabs {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.garments button,
.viewSwitch button,
.tabs button {
  border:1px solid #30373d;
  background:#151a1e;
  color:#fff;
  padding:12px 20px;
  border-radius:999px;
  cursor:pointer;
  transition:
    transform .16s ease,
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease
}

.garments button:hover,
.viewSwitch button:hover,
.tabs button:hover {
  transform:translateY(-2px);
  border-color:#59636b;
  background:#1b2126;
  box-shadow:0 6px 16px rgba(0,0,0,.2)
}

.garments button:active,
.viewSwitch button:active,
.tabs button:active {
  transform:translateY(0) scale(.97)
}

.garments .active,
.viewSwitch .active,
.tabs .active {
  background:#58db58;
  color:#081009;
  border-color:#58db58;
  font-weight:800;
  box-shadow:0 5px 18px rgba(88,219,88,.15)
}

.garments .active:hover,
.viewSwitch .active:hover,
.tabs .active:hover {
  background:#68e768;
  border-color:#68e768
}

.filters {
  margin-top:20px
}

.filters input,
.filters select,
#drawer input,
#drawer select,
dialog input {
  background:#101418;
  color:#fff;
  border:1px solid #343a40;
  border-radius:9px;
  padding:13px;
  outline:none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease
}

.filters input:hover,
.filters select:hover,
#drawer input:hover,
#drawer select:hover,
dialog input:hover {
  border-color:#4b555d
}

.filters input:focus,
.filters select:focus,
#drawer input:focus,
#drawer select:focus,
dialog input:focus {
  border-color:#58db58;
  box-shadow:0 0 0 3px rgba(88,219,88,.11);
  background:#12181c
}

.filters input {
  flex:1;
  min-width:220px
}

.products {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(330px,1fr);
  gap:26px;
  margin-top:30px;
  align-items:start
}

.preview,
.designPanel {
  background:#101417;
  border:1px solid #272d32;
  border-radius:18px;
  padding:20px;
  transition:
    border-color .22s ease,
    box-shadow .22s ease
}

.preview:hover,
.designPanel:hover {
  border-color:#30383e;
  box-shadow:0 12px 34px rgba(0,0,0,.14)
}

.mock {
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:14px;
  background:#080a0c;
  opacity:1;
  transform:scale(1);
  transition:
    opacity .18s ease,
    transform .22s ease,
    box-shadow .22s ease
}

.mock.loading {
  opacity:.3;
  transform:scale(.988)
}

.shirt {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:
    opacity .2s ease,
    transform .28s ease
}

.mock:not(.loading) .shirt {
  opacity:1;
  transform:scale(1)
}

.art {
  position:absolute;
  transform:translate(-50%,-50%);
  max-width:none;
  transition:
    opacity .2s ease,
    filter .2s ease
}

.mock.back .art {
  display:none
}

.viewSwitch {
  justify-content:center;
  margin:14px 0
}

.previewInfo {
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 16px;
  align-items:center
}

.previewInfo h2,
.previewInfo p {
  grid-column:1/-1;
  margin:0
}

.previewInfo strong {
  font-size:24px
}

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  max-height:920px;
  overflow:auto;
  padding:2px;
  scrollbar-width:thin;
  scrollbar-color:#3c444a #101417
}

.grid::-webkit-scrollbar {
  width:8px
}

.grid::-webkit-scrollbar-track {
  background:#101417
}

.grid::-webkit-scrollbar-thumb {
  background:#3c444a;
  border-radius:999px
}

.card {
  position:relative;
  background:#151a1e;
  border:1px solid #30373d;
  border-radius:12px;
  padding:8px;
  color:#fff;
  cursor:pointer;
  text-align:left;
  overflow:hidden;
  transform:translateY(0) scale(1);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease
}

.card:hover {
  transform:translateY(-4px) scale(1.012);
  border-color:#566068;
  background:#192025;
  box-shadow:0 12px 24px rgba(0,0,0,.26)
}

.card:active {
  transform:translateY(-1px) scale(.975);
  transition-duration:.07s
}

.card.active {
  border-color:#58db58;
  box-shadow:
    0 0 0 1px #58db58,
    0 10px 26px rgba(88,219,88,.09);
  background:#172019
}

.card.active:hover {
  border-color:#70ed70;
  box-shadow:
    0 0 0 1px #70ed70,
    0 12px 28px rgba(88,219,88,.15)
}

.card img {
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  background:#090b0d;
  border-radius:8px;
  transform:scale(1);
  transition:
    transform .25s ease,
    filter .2s ease
}

.card:hover img {
  transform:scale(1.025);
  filter:brightness(1.05)
}

.card b,
.card small {
  display:block;
  margin-top:5px
}

.kanji,
.about {
  margin-top:70px;
  padding:34px;
  background:#101417;
  border:1px solid #272d32;
  border-radius:18px;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease
}

.kanji:hover,
.about:hover {
  border-color:#343b41;
  box-shadow:0 14px 35px rgba(0,0,0,.13)
}

.kanji {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:30px;
  align-items:center
}

.kanji img {
  width:100%;
  transition:transform .25s ease,filter .25s ease
}

.kanji:hover img {
  transform:scale(1.025);
  filter:brightness(1.06)
}

.about {
  line-height:1.7
}

footer {
  border-top:1px solid #252a2e;
  margin-top:60px;
  padding:35px max(25px,5vw);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  flex-wrap:wrap
}

footer img {
  width:120px
}

footer div {
  display:flex;
  gap:22px;
  flex-wrap:wrap
}

footer a {
  color:#fff
}

footer a:hover {
  color:#8cf28c;
  transform:translateY(-1px)
}

/* =========================================================
   CARRITO
   ========================================================= */

#drawer {
  position:fixed;
  right:-470px;
  top:0;
  width:min(440px,100%);
  max-width:100vw;
  height:100dvh;
  background:#111518;
  z-index:60;
  padding:18px 20px 26px;
  overflow-x:hidden;
  overflow-y:auto;
  box-shadow:-20px 0 60px rgba(0,0,0,.35);
  transition:right .26s cubic-bezier(.22,.75,.25,1)
}

#drawer.open {
  right:0
}

#shade {
  display:block;
  visibility:hidden;
  opacity:0;
  position:fixed;
  inset:0;
  background:#000a;
  z-index:50;
  pointer-events:none;
  transition:
    opacity .24s ease,
    visibility .24s ease
}

#shade.open {
  visibility:visible;
  opacity:1;
  pointer-events:auto
}

.drawerHead,
.cartRow,
.total {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.drawerHead {
  padding-bottom:7px;
  border-bottom:1px solid #262c30
}

.drawerHead h2,
.drawerHead h3 {
  margin:7px 0
}

.cartRow {
  gap:10px;
  border-bottom:1px solid #2b3034;
  padding:10px 0
}

.cartRow img {
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:7px;
  transition:transform .18s ease
}

.cartRow:hover img {
  transform:scale(1.04)
}

.cartRow div {
  flex:1;
  min-width:0
}

.cartRow small {
  display:block
}

#drawer input,
#drawer select {
  width:100%;
  max-width:100%;
  min-width:0;
  margin:3px 0;
  padding:9px 11px;
  min-height:38px
}

#drawer h3 {
  margin:17px 0 7px
}

#drawer label {
  line-height:1.25
}

.pay {
  display:grid;
  gap:7px
}

.pay label {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:5px 2px;
  cursor:pointer
}

.pay input[type="radio"] {
  appearance:auto;
  -webkit-appearance:radio;
  width:18px!important;
  height:18px;
  min-height:0;
  flex:0 0 18px;
  margin:0!important;
  padding:0!important;
  accent-color:#58db58;
  cursor:pointer
}

.pay label:hover {
  color:#fff
}

.notice {
  font-size:13px;
  color:#bfc7cc;
  margin:9px 0
}

/* Evita que nombres largos de Correo Argentino ensanchen el drawer. */
#agencyBox {
  min-width:0;
  max-width:100%;
  overflow:hidden
}

#agencyBox label {
  min-width:0;
  max-width:100%
}

#agencySelect {
  display:block;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

#agencySelect option {
  max-width:100%
}

/* =========================================================
   CUENTA / DIÁLOGOS
   ========================================================= */

dialog {
  width:min(720px,calc(100% - 24px));
  max-height:90dvh;
  overflow:auto;
  background:#101417;
  color:#fff;
  border:1px solid #30373d;
  border-radius:18px;
  padding:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.55)
}

dialog[open] {
  animation:dialogIn .2s ease both
}

@keyframes dialogIn {
  from {
    opacity:0;
    transform:translateY(8px) scale(.985)
  }

  to {
    opacity:1;
    transform:translateY(0) scale(1)
  }
}

dialog::backdrop {
  background:#000b
}

.dialogClose {
  float:right;
  border:0;
  background:#20262b;
  color:#fff;
  border-radius:50%;
  width:36px;
  height:36px;
  cursor:pointer
}

.dialogClose:hover {
  background:#30383e;
  transform:rotate(4deg) scale(1.05)
}

.tabs {
  margin-bottom:20px
}

.formGrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

dialog label {
  display:grid;
  gap:6px;
  font-size:13px
}

.check {
  display:flex!important;
  align-items:center;
  gap:8px;
  margin:14px 0
}

.authMsg {
  color:#ffb2b2
}

.accountActions {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.secondary {
  background:#20262b!important;
  color:#fff!important
}

.secondary:hover {
  background:#2c343a!important
}

#ordersList {
  margin-top:20px
}

.orderCard {
  border-top:1px solid #30373d;
  padding:12px 0
}

/* =========================================================
   CHECKOUT / FOOTER / MOBILE - PATCH 15
   ========================================================= */

.shippingFields {
  display:grid;
  gap:6px;
  margin-top:3px;
  min-width:0
}

.shippingRow {
  display:grid;
  grid-template-columns:minmax(0,1fr) 110px;
  gap:7px;
  min-width:0
}

.shippingRow > * {
  min-width:0
}

.shippingRow[hidden] {
  display:none
}

.payDisabled {
  opacity:.5
}

.payDisabled small {
  font-size:11px
}

.removeCart {
  width:34px;
  height:34px;
  border:1px solid #3a4146;
  border-radius:9px;
  background:#171c20;
  color:#fff;
  cursor:pointer;
  flex:0 0 auto
}

.removeCart:hover {
  background:#2b3237;
  border-color:#505960;
  transform:scale(1.06)
}

.removeCart:active {
  transform:scale(.92)
}

#checkout:disabled {
  opacity:.65;
  cursor:wait;
  transform:none
}

.siteFooter {
  align-items:center
}

.footerBrand {
  width:120px
}

.footerSocial {
  display:flex;
  align-items:center;
  gap:26px
}

.instagramLink {
  display:inline-flex;
  align-items:center;
  text-decoration:none
}

.instagramLink img {
  width:190px;
  height:auto;
  display:block;
  transition:transform .2s ease,filter .2s ease
}

.instagramLink:hover img {
  transform:translateY(-2px) scale(1.02);
  filter:brightness(1.08)
}

.whatsappLink {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  text-decoration:none
}

.whatsappLink:hover {
  color:#8cf28c;
  transform:translateY(-2px)
}

.whatsappLink[hidden] {
  display:none
}

.waIcon {
  display:inline-grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  font-size:0;
  transition:transform .18s ease
}

.whatsappLink:hover .waIcon {
  transform:scale(1.08)
}

.waIcon::after {
  content:"☎";
  font-size:15px
}

/* =========================================================
   CUENTA / DATOS DE ENTREGA - PATCH 16
   ========================================================= */

.shippingHelp {
  margin:4px 0 8px;
  color:#bfc7cc;
  font-size:12px;
  line-height:1.4
}

.accountPanel {
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #30373d
}

.accountPanel[hidden] {
  display:none
}

.accountHint {
  color:#bfc7cc;
  line-height:1.5
}

.accountActions button.active {
  box-shadow:0 0 0 2px #9aff9a inset
}

#profileForm button[type="submit"] {
  margin-top:16px
}

.profileMsg {
  min-height:20px;
  color:#9aff9a;
  font-size:13px
}

#profileEmail:disabled {
  opacity:.7;
  cursor:not-allowed
}

/* =========================================================
   CORREO ARGENTINO / DETALLE DE PEDIDOS - PATCH 17
   ========================================================= */

.correoQuote {
  margin-top:10px;
  padding:11px;
  border:1px solid #30373d;
  border-radius:12px;
  background:#0c1013;
  min-width:0;
  max-width:100%;
  overflow:hidden
}

.correoQuote[hidden] {
  display:none
}

.correoQuote h4 {
  margin:0 0 9px
}

.shippingMode {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  min-width:0
}

.shippingMode label {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:8px 9px;
  border:1px solid #30373d;
  border-radius:10px;
  cursor:pointer;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .16s ease
}

.shippingMode label:hover {
  background:#13191d;
  border-color:#4a555d;
  transform:translateY(-1px)
}

.shippingMode label:active {
  transform:scale(.985)
}

.shippingMode input {
  width:17px!important;
  height:17px;
  min-height:0;
  flex:0 0 17px;
  margin:0!important;
  padding:0!important;
  accent-color:#58db58
}

.shippingMode span {
  display:grid;
  gap:2px;
  min-width:0
}

.shippingMode small,
.shippingStatus {
  color:#bfc7cc;
  font-size:12px
}

.quoteButton {
  width:100%;
  margin-top:8px;
  cursor:pointer
}

.quoteButton:hover {
  transform:translateY(-2px)
}

.quoteButton:active {
  transform:translateY(0) scale(.985)
}

.quoteButton:disabled {
  opacity:.6;
  cursor:wait;
  transform:none
}

.shippingRateLine {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  padding:9px 10px;
  border-radius:9px;
  background:#151b1f
}

.shippingRateLine strong {
  color:#9aff9a
}

#agencyBox {
  margin-top:8px;
  min-width:0;
  max-width:100%;
  overflow:hidden
}

#agencyBox label {
  display:grid;
  gap:5px;
  min-width:0;
  max-width:100%;
  font-size:13px
}

#agencyBox select {
  width:100%;
  min-width:0;
  max-width:100%
}

.orderDetailLink {
  display:inline-block;
  margin-top:8px;
  color:#9aff9a;
  text-decoration:underline
}

/* =========================================================
   HISTORIAL DE PEDIDOS
   ========================================================= */

.orderCard {
  padding:18px 0;
  border-top:1px solid #30373d;
  transition:
    background-color .18s ease,
    padding-left .18s ease
}

.orderCard:hover {
  padding-left:5px
}

.orderCardHeader {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px
}

.orderNumber {
  display:block;
  margin-bottom:5px;
  font-size:15px;
  color:#fff
}

.orderMeta {
  display:flex;
  align-items:center;
  gap:7px;
  color:#c7cdd1;
  font-size:14px
}

.orderStatus {
  padding:6px 10px;
  border:1px solid #58db58;
  border-radius:999px;
  color:#8cf28c;
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}

.orderDetailLink {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:13px;
  padding:9px 14px;
  border-radius:9px;
  background:#20262b;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:700
}

.orderDetailLink:hover {
  background:#2b3338;
  transform:translateY(-1px)
}

.orderDetailLink:active {
  transform:scale(.975)
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:800px) {
  body {
    overflow-x:hidden
  }

  .nav {
    height:auto;
    padding:12px 16px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:8px 12px;
    align-items:center
  }

  .brand img {
    width:105px
  }

  .nav nav {
    justify-content:flex-end;
    gap:8px 12px;
    flex-wrap:wrap;
    font-size:14px
  }

  .nav nav a,
  .nav nav button {
    padding:6px 4px
  }

  .nav nav a[href="#kanji"] {
    display:none
  }

  .hero img {
    min-height:160px;
    object-fit:cover
  }

  .benefits {
    white-space:normal;
    overflow:visible;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    text-align:center;
    gap:0;
    padding:0
  }

  .benefits span {
    display:grid;
    place-items:center;
    min-height:48px;
    padding:8px;
    border-right:1px solid #252b30;
    line-height:1.25
  }

  .benefits span:last-child {
    border-right:0
  }

  .products {
    grid-template-columns:1fr
  }

  .preview {
    padding:12px
  }

  .mock {
    aspect-ratio:4/5
  }

  .designPanel {
    padding:14px
  }

  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:none
  }

  .kanji {
    grid-template-columns:100px 1fr
  }

  .formGrid {
    grid-template-columns:1fr
  }

  main {
    padding:35px 14px
  }

  .controls h1 {
    font-size:29px
  }

  .filters>* {
    width:100%
  }

  .previewInfo {
    grid-template-columns:1fr
  }

  .previewInfo #add {
    width:100%
  }

  footer {
    align-items:flex-start;
    flex-direction:column
  }

  .cartBtn {
    padding:10px 14px!important
  }

  .garments {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px
  }

  .garments button {
    width:100%;
    min-width:0;
    padding:11px 7px;
    font-size:13px;
    line-height:1.15
  }

  #drawer {
    width:100%;
    padding:15px 14px 26px
  }

  .drawerHead {
    position:sticky;
    top:-15px;
    z-index:2;
    background:#111518;
    padding:9px 0
  }

  #close {
    width:38px;
    height:38px;
    border:1px solid #3a4146;
    border-radius:10px;
    background:#171c20;
    color:#fff
  }

  #drawer h3 {
    margin:16px 0 7px
  }

  #drawer input,
  #drawer select {
    padding:9px 10px;
    min-height:38px
  }

  .shippingRow {
    grid-template-columns:minmax(0,1fr) 100px
  }

  .pay label {
    display:flex;
    align-items:center;
    gap:9px;
    min-height:38px
  }

  .pay input[type="radio"] {
    width:18px!important;
    height:18px;
    flex:0 0 18px;
    margin:0!important
  }

  #checkout {
    width:100%;
    margin-top:6px
  }

  .siteFooter {
    gap:18px
  }

  .footerSocial {
    width:100%;
    justify-content:flex-start;
    gap:18px;
    flex-wrap:wrap
  }

  .instagramLink img {
    width:170px
  }

  #accountBtn {
    border:1px solid #343a40;
    border-radius:9px;
    padding:8px 10px!important
  }

  .accountActions {
    display:grid;
    grid-template-columns:1fr 1fr
  }

  .accountActions button {
    width:100%
  }
}

@media(max-width:600px) {
  .orderCardHeader {
    flex-direction:column;
    gap:9px
  }

  .orderDetailLink {
    width:100%
  }
}

@media(max-width:430px) {
  .nav {
    grid-template-columns:92px 1fr
  }

  .brand img {
    width:92px
  }

  .nav nav {
    justify-content:flex-end
  }

  .benefits {
    font-size:11px
  }

  .controls h1 {
    font-size:28px
  }

  .shippingRow {
    grid-template-columns:minmax(0,1fr) 92px
  }

  .shippingMode {
    grid-template-columns:1fr
  }

  #drawer {
    padding-left:12px;
    padding-right:12px
  }

  #agencySelect {
    font-size:13px
  }
}

/* =========================================================
   ACCESIBILIDAD / MOVIMIENTO REDUCIDO
   ========================================================= */

@media(prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}

/* Lupa real del mockup */
/* Lupa real del mockup */
.mockMagnifier {
  position:absolute;
  z-index:20;
  width:230px;
  height:230px;
  border:2px solid rgba(255,255,255,.92);
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  box-shadow:0 12px 32px rgba(0,0,0,.48), inset 0 0 0 1px rgba(0,0,0,.35);
  transform:translate(-50%,-50%) scale(.92);
  transition:opacity .12s ease, transform .12s ease;
  background:#080a0c;
}

.mockMagnifier.visible {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.mockMagnifierContent {
  position:absolute;
  left:0;
  top:0;
  transform-origin:0 0;
  overflow:hidden;
  background:#080a0c;
}

.mockMagnifierShirt {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mockMagnifierArt {
  position:absolute;
  max-width:none;
}

@media (max-width:760px), (pointer:coarse) {
  .mockMagnifier {
    display:none;
  }
}

/* Organización del catálogo y del carrito */
main { max-width:1640px; }
.storeIntro { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:48px; }
.storeIntro .kanji,.storeIntro .about { margin:0; padding:28px; line-height:1.65; }
.storeIntro .kanji { grid-template-columns:110px minmax(0,1fr); gap:24px; }
.storeIntro h2 { font-size:clamp(24px,2vw,30px); line-height:1.2; margin:10px 0 16px; }
.storeIntro p { margin:10px 0 0; color:#cbd2d7; font-size:15px; }
#kanji,#nosotros,#catalogo,.preview { scroll-margin-top:100px; }
.products { grid-template-columns:minmax(0,1.45fr) minmax(360px,1fr); }
.previewInfo { margin-top:18px; gap:12px 16px; }
.previewInfo #code { grid-column:1/-1; }
.previewInfo h2 { font-size:26px; line-height:1.2; }
.previewInfo p { color:#bfc7cc; font-size:14px; line-height:1.6; }
.previewInfo #price { white-space:nowrap; font-size:28px; }
.viewSwitch button:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.designPanel h2 { margin:8px 0 20px; font-size:24px; }
.card small { line-height:1.35; }
#drawer { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.drawerHead { flex-shrink:0; padding:16px 20px; }
.drawerHead h2 { font-size:24px; }
#close { width:38px; height:38px; border:1px solid #3a4146; border-radius:10px; background:#171c20; color:#fff; cursor:pointer; }
.drawerBody { flex:1; min-height:0; overflow-y:auto; padding:0 20px 20px; overscroll-behavior:contain; }
#drawer .drawerBody h3 { font-size:18px; margin:24px 0 10px; }
#drawer input:not([type=radio]),#drawer select { min-height:44px; font-size:16px; }
.couponSection { margin-top:18px; padding:16px; border:1px solid #30373d; border-radius:12px; background:#0c1013; }
.couponSection > label { display:block; font-weight:700; font-size:14px; margin-bottom:7px; }
.couponActions { display:flex; gap:8px; margin-top:8px; }
.couponActions button,.quoteButton { min-height:40px; padding:9px 12px; border:1px solid #3a4146; border-radius:9px; background:#20262b; color:#fff; cursor:pointer; font-size:14px; }
.couponActions button:first-child { flex:1; }
.couponActions button:disabled { opacity:.6; cursor:wait; }
#couponMessage { margin:10px 0 0; font-size:13px; line-height:1.5; color:#cbd2d7; }
#couponMessage:empty { display:none; }
.pay label { border:1px solid #30373d; border-radius:10px; padding:12px; font-size:15px; }
.pay label:has(input:checked) { border-color:#58db58; background:#172019; }
.checkoutSummary { flex-shrink:0; padding:14px 20px max(16px,env(safe-area-inset-bottom)); border-top:1px solid #343a40; background:#151b1f; box-shadow:0 -8px 24px #0002; }
.summaryLine { display:flex; justify-content:space-between; gap:12px; font-size:13px; line-height:1.6; color:#cbd2d7; }
.summaryLine[hidden] { display:none; }
#cartDiscount { color:#8cf28c; }
.checkoutSummary .total { padding-top:10px; margin-top:8px; border-top:1px solid #343a40; gap:12px; font-size:16px; }
.checkoutSummary .total b { font-size:24px; white-space:nowrap; }
#checkout { width:100%; min-height:46px; margin-top:4px; }
.checkoutSummary .notice { line-height:1.4; }
@media(min-width:1450px) {
  .products { grid-template-columns:minmax(0,2.15fr) minmax(390px,1fr); }
  .preview { display:grid; grid-template-columns:minmax(0,1fr) 225px; gap:0 22px; }
  .mock { grid-column:1; grid-row:1; }
  .viewSwitch { grid-column:1; grid-row:2; }
  .previewInfo { grid-column:2; grid-row:1/3; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:18px; margin:0; }
  .previewInfo #add { width:100%; }
  .grid { max-height:850px; }
}
@media(max-width:1100px) {
  .storeIntro { grid-template-columns:1fr; gap:18px; }
}
@media(max-width:800px) {
  main { padding:30px 14px; }
  .storeIntro { margin-bottom:32px; }
  .storeIntro .kanji,.storeIntro .about { padding:22px; }
  .storeIntro .kanji { grid-template-columns:70px minmax(0,1fr); gap:16px; align-items:start; }
  .storeIntro .kanji img { margin-top:30px; }
  .products { grid-template-columns:1fr; gap:20px; }
  .previewInfo { grid-template-columns:1fr auto; }
  .previewInfo #add { grid-column:1/-1; }
  #drawer { padding:0; }
  .drawerHead { position:static; padding:12px 16px; }
  .drawerBody { padding:0 16px 20px; }
  .checkoutSummary { padding:12px 16px max(14px,env(safe-area-inset-bottom)); }
  .preview { scroll-margin-top:115px; }
}
@media(max-height:540px) {
  #drawer { overflow-y:auto; display:block; }
  .drawerBody { overflow:visible; }
}
.cartItemPrice { display:block; margin-top:6px; color:#8cf28c; font-weight:700; }

/* Catálogo adaptable, controles visibles y contacto */
.emailLink { display:inline-flex; align-items:center; gap:9px; color:#d7dfe3; text-decoration:none; overflow-wrap:anywhere; }
.emailLink[hidden] { display:none; }
.emailLink:hover { color:#8cf28c; }
.emailLink > span:first-child { font-size:22px; color:#8cf28c; }
.checkoutSummary .couponSection { margin:10px 0; padding:10px 12px; }
.checkoutSummary { max-height:60dvh; overflow-y:auto; }
@media(min-width:801px) {
  .preview { position:relative; }
  .viewSwitch { position:absolute; top:32px; left:32px; z-index:21; flex-direction:column; gap:8px; margin:0; padding:7px; border:1px solid #3a4146; border-radius:18px; background:#101417e8; box-shadow:0 6px 20px #0005; }
  .viewSwitch button { padding:10px 14px; min-width:86px; font-size:14px; }
  .grid { grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
}
@media(min-width:1450px) {
  main { max-width:1760px; }
  .products { grid-template-columns:minmax(0,1.85fr) minmax(480px,1fr); }
  .previewInfo { grid-row:1; }
}
@media(max-width:800px) {
  .checkoutSummary { max-height:55dvh; }
  .footerSocial { align-items:flex-start; }
  .emailLink { flex-basis:100%; font-size:15px; }
}

/* Corrección de posición de la botonera y beneficios destacados */
#informacion { scroll-margin-top:100px; }
.benefits { background:#18160f; border-color:#544323; color:#f2cf7b; font-size:16px; font-weight:800; letter-spacing:.015em; }
.benefits span { line-height:1.4; }
.benefits span:hover { color:#ffe4a3; }
.mock > .viewSwitch { position:absolute; grid-area:auto; top:12px; left:12px; right:auto; bottom:auto; z-index:21; display:flex; flex-direction:column; gap:8px; margin:0; padding:7px; border:1px solid #525a60; border-radius:16px; background:#101417ed; box-shadow:0 6px 20px #0005; }
.mock > .viewSwitch button { min-width:86px; padding:10px 14px; font-size:14px; }
@media(max-width:800px) {
  .benefits { font-size:12px; }
  .benefits span { border-color:#544323; padding:10px 7px; min-height:60px; }
  .mock > .viewSwitch { top:9px; left:9px; padding:5px; gap:5px; }
  .mock > .viewSwitch button { min-width:75px; padding:9px 11px; font-size:13px; }
}

/* Carrito móvil: un solo desplazamiento, sin resumen fijo */
@media(max-width:800px), (max-height:540px) {
  #drawer { display:block; overflow-y:auto; overscroll-behavior:contain; }
  #drawer .drawerHead { position:sticky; top:0; z-index:2; background:#111518; }
  #drawer .drawerBody { overflow:visible; min-height:auto; }
  #drawer .checkoutSummary { position:static; max-height:none; overflow:visible; box-shadow:none; }
}

/* Un único scroll para el carrito, independientemente del viewport */
#drawer { display:block; overflow-y:auto; overscroll-behavior:contain; }
#drawer .drawerHead { position:sticky; top:0; z-index:2; background:#111518; }
#drawer .drawerBody { overflow:visible; height:auto; max-height:none; min-height:0; }
#drawer .checkoutSummary { position:static; height:auto; max-height:none; overflow:visible; box-shadow:none; }