/* Estilos de enamoratemoda.com — base sacada de la demo (demo/index.html) */
:root{
  /* colores del logo: negro, rosa y blanco */
  --paper:#FFFFFF; --paper2:#FBF1F5; --ink:#0A0A0A; --mute:#6B6566;
  --line:#E6DFE1; --accent:#E46F97; --accent-d:#B8436E; --photo:#EFEDEE;
  --serif:'Marcellus', Georgia, serif; --script:'Cormorant Garamond', Georgia, serif; --sans:'Work Sans', Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth}
/* Nada puede ensanchar la página en el móvil (sin crear barra de desplazamiento, para no romper la cabecera fija) */
html,body{overflow-x:clip;max-width:100%}
body{background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select{font:inherit;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1360px;margin:0 auto;padding:0 28px}
.caps{text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;font-weight:500}
.serif{font-family:var(--serif)}
.mute{color:var(--mute)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
hr{border:0;border-top:1px solid var(--line)}
em{font-family:var(--script);font-style:italic;font-weight:500;color:var(--accent-d);letter-spacing:0}

/* barra superior */
.strip{background:var(--ink);color:var(--paper);font-size:12px;letter-spacing:.06em;overflow:hidden;white-space:nowrap}
.strip-in{display:inline-block;padding:8px 0;animation:run 42s linear infinite}
.strip-in span{margin:0 34px}
@keyframes run{to{transform:translateX(-50%)}}

/* cabecera en dos pisos */
header{background:var(--paper);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--ink)}
.hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:70px}
.hd .left{font-size:12.5px;color:var(--mute)}
.logo{display:flex;align-items:center;gap:12px;line-height:1}
.logo img{height:44px;width:auto}
.logo b{display:block;font:400 17px/1 var(--serif);letter-spacing:.14em;white-space:nowrap}
.logo small{display:block;font:500 15px/1 var(--script);margin-top:5px;font-variant-numeric:oldstyle-nums;color:var(--mute)}
.tools{display:flex;justify-content:flex-end;gap:22px;font-size:13px}
.tools a:hover{text-decoration:underline;text-underline-offset:4px}
.nav{display:flex;justify-content:center;gap:26px;border-top:1px solid var(--line);font-size:13px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.nav a{padding:11px 0 10px;border-bottom:2px solid transparent}
.nav a:hover,.nav a.on{border-color:var(--ink)}

/* botones */
.btn{display:inline-block;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:14px 26px;cursor:pointer;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:500}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.red{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn.red:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.full{width:100%;text-align:center}
.link{border-bottom:1px solid currentColor;padding-bottom:1px;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0}

/* fotos */
.ph{position:relative;display:block;background:var(--photo);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.fill{position:absolute;inset:0}

/* portada: portada de revista */
.cover{display:grid;grid-template-columns:3fr 5fr 3fr;border-bottom:1px solid var(--ink)}
.cover > *{min-width:0}
.cover-l{padding:40px 30px 30px 0;border-right:1px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between}
.issue{font:400 92px/.8 var(--serif)}
.issue sup{font:500 11px/1 var(--sans);letter-spacing:.2em;vertical-align:top;margin-left:6px}
.cover-t{font:400 clamp(34px,3.6vw,56px)/1.05 var(--serif);margin:30px 0 20px}
.cover-t em{font-size:1.15em}
.cover h1 em{color:var(--accent)}
.cover-m{position:relative;min-height:760px}
.cover-m figcaption{position:absolute;left:0;bottom:0;background:var(--paper);padding:14px 18px;font-size:13px;border-top:1px solid var(--ink);border-right:1px solid var(--ink)}
.cover-m figcaption b{display:block;font:400 19px/1.2 var(--serif)}
.cover-r{border-left:1px solid var(--ink);display:grid;grid-template-rows:auto 1fr auto}
.cover-r .ph{aspect-ratio:3/4}
.cover-r .txt{padding:22px 0 22px 26px;font-size:14px}
.cover-r .txt b{font:400 21px/1.15 var(--serif);display:block;margin-bottom:8px}
.vert{writing-mode:vertical-rl;transform:rotate(180deg);font:500 10.5px/1 var(--sans);letter-spacing:.35em;text-transform:uppercase;color:var(--mute)}

.sec{padding-top:84px;padding-bottom:84px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:34px;gap:20px}
.sec-h h2{font:400 38px/1.05 var(--serif)}
.sec-h h2 em{color:var(--accent)}

/* índice de secciones con foto al pasar */

/* rejilla de productos */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 18px;grid-auto-flow:dense}
.card{display:block}
.card .ph{aspect-ratio:3/4}
.card .ph .alt{position:absolute;inset:0;opacity:0;transition:opacity .35s;background:#fff}
.card .ph .alt img{object-fit:contain}
.card:hover .ph .alt{opacity:1}
.card .nm{margin-top:12px;display:flex;justify-content:space-between;gap:10px;font-size:14px}
.card .nm span:last-child{white-space:nowrap}
.sw{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:12px;color:var(--mute)}
.sw i{width:12px;height:12px;background:var(--h);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.tag{position:absolute;top:10px;left:10px;background:var(--accent);color:var(--ink);font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;z-index:1}
/* cada cinco prendas, una ocupa doble: rompe la cuadrícula de siempre */
.grid.mag > :nth-child(7n+3){grid-column:span 2;grid-row:span 2}
.grid.mag > :nth-child(7n+3) .ph{aspect-ratio:auto;height:calc(100% - 64px)}

/* look */
.look{display:grid;grid-template-columns:6fr 5fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.look .ph{min-height:720px}
.look ol{list-style:none;counter-reset:l}
.look li{counter-increment:l;border-top:1px solid var(--line)}
.look li a{display:grid;grid-template-columns:40px 90px 1fr auto;gap:18px;align-items:center;padding:16px 0}
.look li a::before{content:counter(l,decimal-leading-zero);font:italic 500 20px/1 var(--script);color:var(--accent-d)}
.look li .ph{aspect-ratio:3/4;min-height:0}
.look-t{padding:52px 0 40px 52px}
.look-t h2{font:400 42px/1.05 var(--serif);margin-bottom:18px}

.band{background:var(--ink);color:var(--paper)}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:90px;padding-bottom:90px}
.band h2{font:400 48px/1.05 var(--serif)}
.band h2 em{color:var(--accent)}
.band ol{list-style:none;counter-reset:s}
.band li{counter-increment:s;padding:20px 0;border-top:1px solid #333;display:grid;grid-template-columns:48px 1fr}
.band li::before{content:counter(s,decimal-leading-zero);font-family:var(--script);font-style:italic;font-size:19px;color:var(--accent)}

.shop-info{display:grid;grid-template-columns:7fr 5fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.shop-info .ph{min-height:460px}
.shop-info .ph img,.look > .ph img{position:absolute;inset:0}
.fachada img{object-position:50% 40%}
.shop-info .ph.fachada{min-height:0;aspect-ratio:3/2;align-self:center}
.shop-info > div:last-child{padding:52px 0 52px 48px}
.shop-info h2{font:400 32px/1.1 var(--serif);margin-bottom:24px}
.hours{width:100%;border-collapse:collapse;margin:22px 0}
.hours td{padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.hours td:last-child{text-align:right}

footer{padding:60px 0 30px;font-size:13px}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.ft h3{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.ft a,.ft li{display:block;padding:3px 0;color:var(--mute)}
.ft a:hover{color:var(--ink)}
.big-word{display:flex;align-items:flex-end;gap:3vw;margin-top:60px;overflow:hidden}
.big-word img{height:clamp(70px,13vw,190px);width:auto}
.big-word span{font:400 clamp(30px,7.4vw,112px)/.9 var(--serif);letter-spacing:.06em;white-space:nowrap}

/* tienda */
.shop-top{padding:44px 0 26px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.shop-top h1{font:400 52px/1 var(--serif)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin-bottom:34px}
.chip{border:1px solid var(--line);background:none;padding:7px 13px;font-size:12.5px;cursor:pointer}
.chip.on,.chip:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.filters select{margin-left:auto;border:1px solid var(--line);background:none;padding:7px 10px;font-size:12.5px}

/* ficha */
.pdp{display:grid;grid-template-columns:90px 6fr 5fr;gap:24px 36px;padding:30px 0 90px}
.thumbs{display:flex;flex-direction:column;gap:8px;position:sticky;top:130px;align-self:start;max-height:calc(100vh - 150px);overflow-y:auto;scrollbar-width:none}
.thumbs button{border:0;padding:0;background:none;cursor:pointer;opacity:.55}
.thumbs button.on,.thumbs button:hover{opacity:1;outline:1px solid var(--ink)}
.thumbs .ph{aspect-ratio:3/4}
.shots{display:flex;flex-direction:column;gap:10px}
.shots .ph{aspect-ratio:3/4}
.shots .ph.sola{background:#fff}
.shots .ph.sola img{object-fit:contain}
.pdp aside{position:sticky;top:130px;align-self:start}
.pdp h1{font:400 34px/1.1 var(--serif);margin:10px 0 12px}
.price{font-size:20px;margin-bottom:22px}
.colors{display:flex;gap:8px;margin:10px 0 22px}
.colors button{width:34px;height:34px;border:1px solid var(--line);background:var(--h);cursor:pointer;outline-offset:3px}
.colors button.on{outline:1px solid var(--ink)}
.sizes{display:grid;grid-template-columns:repeat(6,1fr);border-left:1px solid var(--ink);border-top:1px solid var(--ink);margin:10px 0 22px}
.sizes button{border:0;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:none;padding:12px 0;cursor:pointer}
.sizes button.on{background:var(--ink);color:var(--paper)}
.sizes button:disabled{color:var(--line);text-decoration:line-through;cursor:not-allowed}
.acc{border-top:1px solid var(--ink);margin-top:28px}
.acc details{border-bottom:1px solid var(--line);padding:14px 0}
.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.acc summary::after{content:'+'}
.acc details[open] summary::after{content:'–'}
.acc p{padding-top:10px;color:var(--mute);font-size:14px}

/* cesta y formularios */
.two{display:grid;grid-template-columns:8fr 4fr;gap:56px;padding:44px 0 90px}
.page-h{font:400 46px/1.05 var(--serif);padding:44px 0 0}
.line{display:grid;grid-template-columns:110px 1fr auto;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.line .ph{aspect-ratio:3/4}
.qty{display:inline-flex;border:1px solid var(--ink);margin-top:12px}
.qty button{width:32px;height:32px;border:0;background:none;cursor:pointer}
.qty span{width:32px;text-align:center;line-height:32px}
.sum{border:1px solid var(--ink);padding:26px;align-self:start;position:sticky;top:130px}
.sum .r{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px}
.sum .r.t{border-top:1px solid var(--ink);margin-top:10px;padding-top:14px;font-size:17px;font-weight:600}
.bar{height:3px;background:var(--line);margin:8px 0 18px}
.bar i{display:block;height:100%;background:var(--accent)}
label{display:block;font-size:12px;letter-spacing:.06em;margin:16px 0 6px}
.inp{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:9px 0;outline:none}
.inp:focus{border-bottom-width:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fs{border-top:1px solid var(--ink);padding:24px 0 30px}
.fs h3{font:400 22px/1.1 var(--serif);margin-bottom:6px}
.stripe-box{border:1px solid var(--line);background:#fff;padding:14px 16px;font-size:14px;margin-top:8px;display:grid;grid-template-columns:1fr 90px 70px;gap:10px;color:#999}
.radio{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px}
.radio input{margin-top:4px;accent-color:var(--ink)}

/* seguimiento */
.track{padding:40px 0 90px;max-width:820px}
.steps{list-style:none;margin:34px 0}
.steps li{display:grid;grid-template-columns:28px 1fr auto;gap:18px;padding:16px 0;border-top:1px solid var(--line);color:var(--mute)}
.steps li::before{content:'';width:11px;height:11px;border:1px solid var(--mute);margin-top:6px}
.steps li.done{color:var(--ink)}
.steps li.done::before{background:var(--ink);border-color:var(--ink)}
.steps li.now{color:var(--accent)}
.steps li.now::before{background:var(--accent);border-color:var(--accent)}
.eta{display:flex;justify-content:space-between;align-items:baseline;border:1px solid var(--ink);padding:22px 26px;gap:20px;flex-wrap:wrap}
.eta b{font:400 28px/1.1 var(--serif)}

/* probador */
.try{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);margin-top:34px}
.try > div{padding:34px 34px 60px 0}
.try > div + div{border-left:1px solid var(--ink);padding-left:34px;padding-right:0}
.drop{border:1px dashed var(--ink);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;position:relative;background:var(--paper2)}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop.gen img{filter:grayscale(1) contrast(.9) brightness(1.05)}
.gen-note{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--paper);padding:14px 16px;font-size:13px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);margin:8px 0 18px}
.seg button{border:0;background:none;padding:11px;cursor:pointer}
.seg button.on{background:var(--ink);color:var(--paper)}
.mini{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 20px}
.mini .ph{width:62px;aspect-ratio:3/4}
.warn{font-size:12.5px;color:var(--mute);border-left:2px solid var(--accent);padding-left:12px;margin:18px 0}

/* páginas legales */
.legal{max-width:760px}
.legal h2{font:400 22px/1.2 var(--serif);margin:34px 0 10px}
.legal p,.legal li{font-size:14.5px;margin-bottom:10px}
.legal mark{background:var(--paper2);color:var(--accent-d);padding:0 3px;box-shadow:inset 0 -1px 0 var(--accent)}
.legal a:not(.link){text-decoration:underline;text-underline-offset:3px}
.legal-t td{vertical-align:top;padding-right:14px;font-size:13.5px}
.legal-t td:last-child{text-align:left}
.legal-l{list-style:disc;padding-left:20px;margin-bottom:12px}
.legal-links a:hover{color:var(--ink)}

/* mapa de la tienda */
.mapa{height:300px;margin-top:26px;border:1px solid var(--ink);background:var(--paper2);position:relative;z-index:0}
.mapa .leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.06)}
.mapa .leaflet-control-attribution{font-size:9.5px;background:rgba(255,255,255,.8)}
.mapa .leaflet-bar a{border-radius:0;color:var(--ink)}
.pin{position:relative}
.pin span{position:absolute;left:0;top:0;width:46px;height:46px;background:#fff;border:2px solid var(--accent);border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.pin img{width:30px;transform:rotate(45deg)}
/* Leaflet pone width:auto !important a las imágenes de los marcadores; en iPhone el SVG salía gigante */
.mapa .leaflet-marker-pane .pin img{width:30px !important;height:24px !important;max-width:30px !important;max-height:24px !important}
.pin::after{content:'';position:absolute;left:13px;top:50px;width:20px;height:8px;border-radius:50%;background:rgba(228,111,151,.45);animation:onda 2.2s ease-out infinite}
@keyframes onda{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}
.pin-tip{background:var(--ink);color:#fff;border:0;border-radius:0;font:500 11px/1 var(--sans);letter-spacing:.08em;padding:7px 10px;box-shadow:none}
.pin-tip::before{border-top-color:var(--ink)}

/* panel */
.hoja{overflow-x:auto;margin-top:16px;border:1px solid var(--line)}
.hoja table{border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.hoja th{background:#1D6F42;color:#fff;font-weight:500;text-align:left;padding:8px 10px}
.hoja td{padding:8px 10px;border-top:1px solid var(--line);border-right:1px solid var(--line)}
.hoja td:nth-child(11){white-space:normal;min-width:280px}
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:24px}
.tbl th{text-align:left;font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:12px 8px;border-bottom:1px solid var(--ink)}
.tbl td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl select{border:1px solid var(--ink);background:var(--paper);padding:6px 8px}
.mail{border-top:1px solid var(--line);padding:14px 0;font-size:13.5px;display:grid;grid-template-columns:60px 1fr;gap:14px}
.mail b{display:block}

dialog{border:1px solid var(--ink);background:var(--paper);padding:40px;max-width:430px;width:92vw;margin:auto}
dialog::backdrop{background:rgba(22,19,17,.55)}
dialog h2{font:400 32px/1 var(--serif);margin-bottom:8px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;border:1px solid var(--ink);background:#fff;padding:13px;cursor:pointer;margin:24px 0 8px;font-size:14px}
.or{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:12px;margin:14px 0}
.or::before,.or::after{content:'';flex:1;border-top:1px solid var(--line)}
.x{position:absolute;top:14px;right:18px;background:none;border:0;font-size:22px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,200%);visibility:hidden;background:var(--ink);color:var(--paper);padding:14px 22px;font-size:13.5px;z-index:50;transition:transform .3s;max-width:92vw}
.toast.show{transform:translate(-50%,0);visibility:visible}

@media (max-width:1100px){
  .cover{grid-template-columns:1fr 1fr}
  .cover-r{display:none}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .wrap{padding:0 16px}
  .hd{grid-template-columns:1fr auto;height:60px}
  .hd .left{display:none}
  .logo{gap:9px}.logo img{height:34px}.logo b{font-size:13.5px;letter-spacing:.1em}.logo small{font-size:13px;margin-top:3px}
  .tools{gap:14px}
  .tools .hide-m{display:none}
  .nav{justify-content:flex-start;gap:20px}
  .cover,.shop-info,.band .wrap,.two,.try,.look{grid-template-columns:1fr}
  .cover-l{border-right:0;padding:22px 0 30px}
  .issue{font-size:54px}
  .cover-t{margin:18px 0 14px}
  .cover-m{order:-1;min-height:0;aspect-ratio:4/5;margin:0 -16px}
  .cover-m figcaption{font-size:12px;padding:10px 14px}
  .cover-m figcaption b{font-size:16px}
  .sec{padding-top:56px;padding-bottom:56px}
  .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 10px}
  .card .nm{flex-direction:column;gap:2px;font-size:13.5px}
  .grid.mag > :nth-child(7n+3){grid-column:span 2;grid-row:auto}
  .grid.mag > :nth-child(7n+3) .ph{aspect-ratio:4/5;height:auto}
  .look > .ph{min-height:0;aspect-ratio:4/5;margin:0 -16px}
  .look li a{grid-template-columns:30px 64px 1fr auto;gap:12px}
  .look-t{padding:30px 0}
  .look-t h2{font-size:30px}
  .shop-info > div:last-child{padding:36px 0}
  .band h2{font-size:34px}
  .band .wrap{padding-top:60px;padding-bottom:60px;gap:30px}
  .shop-info .ph{min-height:0;aspect-ratio:3/2;margin:0 -16px}
  .shop-info h2{font-size:26px}
  .ft{grid-template-columns:1fr 1fr}
  .try > div,.try > div + div{padding:26px 0;border-left:0}
  .try > div + div{border-top:1px solid var(--ink)}
  .shop-top h1,.page-h{font-size:34px}
  .sec-h h2{font-size:28px}
  .pdp h1{font-size:28px}
  .big-word{margin-top:40px}
  .pdp{grid-template-columns:1fr;gap:18px}
  .thumbs{display:none}
  .shots{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;gap:4px}
  .shots .ph{flex:0 0 86%;scroll-snap-align:start}
  .line{grid-template-columns:80px 1fr}
  .line > div:last-child{grid-column:2}
  .tbl{font-size:13px}.tbl .hide-m{display:none}
}

/* ---------- versión real (PHP): formularios en lugar de botones con JavaScript ---------- */
.sizes label{display:block;margin:0;letter-spacing:0;font-size:inherit;cursor:pointer;position:relative;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);text-align:center}
.sizes label input{position:absolute;opacity:0;pointer-events:none}
.sizes label span{display:block;padding:12px 0}
.sizes label input:checked + span{background:var(--ink);color:var(--paper)}
.sizes label input:focus-visible + span{outline:2px solid var(--accent);outline-offset:-4px}
.sizes label.off{cursor:not-allowed}
.sizes label.off span{color:var(--line);text-decoration:line-through}
.colors a{display:block;width:34px;height:34px;border:1px solid var(--line);background:var(--h);outline-offset:3px}
.colors a.on{outline:1px solid var(--ink)}
.thumbs a{display:block;opacity:.55}
.thumbs a.on,.thumbs a:hover{opacity:1;outline:1px solid var(--ink)}
.qty{align-items:center}
.qty button{width:32px;height:32px;border:0;background:none;cursor:pointer}
.warn p{margin:4px 0}
.filters form select{border:1px solid var(--line);background:none;padding:7px 10px;font-size:12.5px}
a.chip{display:inline-block}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
textarea.inp{resize:vertical;font:inherit;line-height:1.5}
label.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;letter-spacing:0;margin-top:14px;cursor:pointer}
label.check input{margin-top:3px;accent-color:var(--ink)}

/* ---------- panel de la tienda ---------- */
body.admin .hd .left{font-weight:500}
.estado{display:inline-block;padding:4px 8px;font-size:11.5px;letter-spacing:.04em;background:var(--paper2)}
.estado.e1{background:var(--accent);color:var(--ink)}
.estado.e2,.estado.e3,.estado.e4{background:#f3e3b8}
.estado.e5{background:#d9e8f3}
.estado.e6{background:#dcefdc}
.estado.e9{background:#eee;color:var(--mute);text-decoration:line-through}
.adm-form{max-width:760px}
.adm-color h3{display:flex;align-items:center;gap:10px}
.sw-big{display:inline-block;width:20px;height:20px;background:var(--h);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.adm-fotos{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.adm-foto{width:140px}
.adm-foto .ph{aspect-ratio:3/4}
.adm-foto .ph.sola{background:#fff}
.adm-foto .ph.sola img{object-fit:contain}
.adm-foto-acc{display:flex;justify-content:space-between;font-size:12px;margin-top:6px}
.adm-foto-acc form{display:inline}
.adm-subir{border:1px dashed var(--ink);padding:14px 16px;max-width:560px}
.adm-subir input[type=file]{margin-top:6px;font-size:13px}
.adm-tallas{display:flex;flex-wrap:wrap;gap:10px}
.adm-tallas div{width:92px}
.adm-tallas span{display:block;font-size:12px;color:var(--mute)}
.tbl a.ph{display:block}

/* ---------- modo tienda (administradora editando sobre la web) ---------- */
.barra-admin{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;padding:9px 16px;background:var(--accent);color:var(--ink);font-size:13px}
.barra-admin .modo{margin-right:auto}
.barra-admin a{text-decoration:underline;text-underline-offset:3px}
.barra-admin a i{font-style:normal;background:var(--ink);color:#fff;padding:1px 6px;margin-left:2px;font-size:11.5px}
.barra-admin form{display:inline}
.barra-admin button{background:var(--ink);color:#fff;border:0;padding:6px 12px;cursor:pointer;font-size:12px;letter-spacing:.06em}
body:has(.barra-admin) header{top:38px}
.card-wrap{display:flex;flex-direction:column}
.card-wrap.oculta .card{opacity:.55}
.card-admin{display:flex;gap:6px;margin-top:8px}
.card-admin a,.card-admin button{flex:1;display:block;text-align:center;border:1px solid var(--ink);background:#fff;padding:7px 4px;font-size:12px;cursor:pointer;color:var(--ink)}
.card-admin form{display:contents}
.card-admin a:hover,.card-admin button:hover{background:var(--ink);color:#fff}
.tag-oculta{background:var(--ink) !important;color:#fff !important}
.ph.sin-foto{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:13px}
.tile-nueva{aspect-ratio:3/4;border:2px dashed var(--accent);background:var(--paper2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;font:500 14px/1.3 var(--sans);color:var(--ink);text-align:center;padding:16px}
.tile-nueva .mas,.subir-fotos .mas{font:400 54px/1 var(--serif);color:var(--accent-d)}
.tile-nueva:hover{background:#fff}
.dlg-admin{max-width:520px;width:94vw;padding:30px 24px;max-height:92vh;overflow-y:auto}
.dlg-admin h2{font:400 30px/1 var(--serif);margin-bottom:8px}
.drop-fotos{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;border:2px dashed var(--accent);background:var(--paper2);padding:20px 14px;margin:6px 0 4px;cursor:pointer;letter-spacing:0}
.drop-fotos input{width:100%;font-size:12.5px}
.drop-lista{font-size:12.5px;color:var(--accent-d)}
.tallas-chips{display:flex;flex-wrap:wrap;gap:6px}
.tallas-chips label{margin:0;cursor:pointer;letter-spacing:0}
.tallas-chips input{position:absolute;opacity:0;pointer-events:none}
.tallas-chips span{display:inline-block;border:1px solid var(--line);padding:7px 11px;font-size:13px;min-width:40px;text-align:center}
.tallas-chips input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)}
.aviso-edicion{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;padding:12px 14px;background:var(--paper2);border-left:3px solid var(--accent);font-size:13.5px}
.foto-edit{position:relative}
.foto-acc{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:8px;padding:8px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.foto-acc span,.foto-acc button{background:#fff;color:var(--ink);border:0;padding:6px 10px;font-size:12px;cursor:pointer}
.foto-acc form{display:inline}
.subir-fotos{aspect-ratio:3/4;border:2px dashed var(--accent);background:var(--paper2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.subir-fotos > label:first-of-type{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;font-size:14px;letter-spacing:0;margin:0}
.subir-fotos input[type=file]{position:absolute;opacity:0;width:1px;height:1px}
.edit-ficha{border:1px solid var(--line);padding:16px 16px 18px;background:#fff}
.edit-cat{border:0;border-bottom:1px dashed var(--line);background:none;color:var(--mute);padding:2px 0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.edit-h1{display:block;width:100%;border:0;border-bottom:1px dashed var(--accent);background:none;font:400 32px/1.15 var(--serif);margin:10px 0 8px;resize:none;overflow:hidden;padding:2px 0;color:var(--ink)}
.edit-precio{display:flex;align-items:baseline;gap:6px;margin-bottom:14px}
.edit-precio input{width:120px;border:0;border-bottom:1px dashed var(--accent);font-size:22px;padding:2px 0;background:none}
.edit-lbl{display:block;font-size:12px;letter-spacing:.06em;margin:14px 0 4px}
.edit-bloque{border:1px solid var(--line);padding:16px;margin-top:16px;background:#fff}
.color-mas{width:34px;height:34px;border:1px dashed var(--ink);background:#fff;font-size:20px;cursor:pointer}
.stock-tallas{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.stock-tallas label{margin:0;border:1px solid var(--ink);padding:6px;text-align:center;letter-spacing:0}
.stock-tallas span{display:block;font-size:13px;font-weight:500}
.stock-tallas input{width:100%;border:0;border-top:1px solid var(--line);text-align:center;padding:4px 0;margin-top:4px;font-size:14px}
.quitar-tallas{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
.quitar-tallas form{display:inline}
.quitar-tallas button{background:none;border:0;padding:0;font-size:12px;color:var(--mute);text-decoration:underline;cursor:pointer}
.rojo,.quitar-tallas button.rojo{color:var(--accent-d) !important}
@media (max-width:900px){
  .barra-admin{gap:12px;font-size:12.5px}
  body:has(.barra-admin) header{top:36px}
  .subir-fotos{flex:0 0 86%}
  .edit-h1{font-size:26px}
}

/* redes sociales en el pie */
.redes{display:flex;gap:14px;margin-top:20px}
.ft .redes a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--ink);color:var(--ink)}
.ft .redes a:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}