/* ============================================================ NORTH STAR 555 — Maqueta v1 (Fase 1) Diseño base: 1280px (PDFs del cliente) Fuentes provisionales (Google Fonts) hasta recibir las finales: - Serif : Cormorant Garamond (logo, nav, footer) - Mono : Space Mono (títulos y cuerpo) - Brush : Caveat Brush (títulos de colección) ============================================================ */ @font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap} @font-face{font-family:"Space Mono";src:url("../fonts/space-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Space Mono";src:url("../fonts/space-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap} @font-face{font-family:"NS555 Carrotflower";src:url("../fonts/carrotflower-regular.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Caveat Brush";src:url("../fonts/caveat-brush-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap} :root{ --c-red: #C82128; /* Tibetan Year */ --c-orange: #D26813; /* Spirits of the Woods — oscurecido vs. maqueta original (#EE8F44) para que el título brush en crema pase 3:1 (era 2.06:1). Mismo tono, más profundo. */ --c-peri: #647FBE; /* Animal Medicine */ --c-magenta: #DD47A4; /* Cosmic Vibes */ --c-footer: #34569B; --c-cream: #F8EEAE; /* texto brush sobre color */ --c-btn-orange:#EB7219; /* oscurecido igual que --c-orange: blanco sobre este tono era 2.59:1, ahora 3.02:1 (texto grande, 23px bold). */ --c-btn-blue: #3D5AA5; --c-ink: #111111; --c-paper: #FBF7EF; --f-serif: "Cormorant Garamond", Garamond, serif; --f-mono: "Space Mono", "Courier New", monospace; --f-brush: "Caveat Brush", cursive; --f-about: "NS555 Carrotflower", "Caveat Brush", cursive; /* Capas suaves siempre (DESIGN.md — Elevation & Depth): sombra ambiental en reposo para toda superficie interactiva, más profunda al hover/focus. Nunca negro puro: tinte de --c-ink para que la sombra combine con el papel cálido. */ --sh-rest: 0 2px 10px rgba(17,17,17,.08); --sh-hover: 0 10px 28px rgba(17,17,17,.16); --sh-float: 0 8px 24px rgba(0,0,0,.12); --ease-tactile: cubic-bezier(.22,1,.36,1); /* Pill total (999px), no un radio fijo: cart-badge/invoice-badge son insignias de texto corto (contador, estatus) — con un px fijo un contenido más largo deja de verse como píldora; 999px siempre resuelve a semicírculo real. */ --r-badge: 999px; } *{margin:0;padding:0;box-sizing:border-box} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} /* Stripe Payment Element inyecta inputs ocultos de autofill fuera del ancho normal del documento (invisibles, pero cuentan para scrollWidth) — sin esto aparece un scroll horizontal fantasma en checkout una vez montado. */ html{overflow-x:hidden} body{font-family:var(--f-mono);color:var(--c-ink);background:#fff;overflow-x:hidden} .wrap{max-width:1280px;margin:0 auto} /* ---------- Header ---------- */ .site-header{background:#fff;position:relative;z-index:50;box-shadow:0 0 0 rgba(17,17,17,0);transition:box-shadow .3s var(--ease-tactile)} /* .scrolled la agrega site-v12.js tras pasar el header de scrollY:0 — feedback de continuidad: el header pegado (position:sticky) gana peso visual solo cuando ya dejó de estar "en la página", no desde el primer pixel de scroll. */ .site-header.scrolled{box-shadow:var(--sh-float)} .site-header .bar{display:flex;align-items:center;justify-content:space-between;height:93px;padding:0 24px} .menu-toggle{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;font-family:var(--f-serif);font-size:22px;color:var(--c-ink)} .menu-toggle .burger{width:26px;height:18px;display:flex;flex-direction:column;justify-content:space-between} .menu-toggle .burger span{height:2px;background:var(--c-ink)} .logo{font-family:var(--f-serif);font-weight:500;font-size:34px;letter-spacing:.35em;white-space:nowrap;position:absolute;left:50%;transform:translateX(-50%)} .header-right{display:flex;align-items:center;gap:18px;font-family:var(--f-serif);font-size:22px} .header-right svg{width:20px;height:20px;fill:var(--c-ink)} /* Drop menu (según NOTAS) */ /* Antes: display:none↔block (instantáneo). Ahora siempre en el árbol, oculto por opacidad+transform+visibility para poder animar la apertura — visibility evita que el menú cerrado se pueda tabular/clickear. */ .drop-menu{position:absolute;top:93px;left:24px;background:#fff;border:1px solid #bbb;box-shadow:var(--sh-float);padding:26px 30px 30px;min-width:220px; opacity:0;visibility:hidden;transform:translateY(-8px);transform-origin:top left; transition:opacity .22s var(--ease-tactile),transform .22s var(--ease-tactile),visibility 0s linear .22s} .drop-menu.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .22s var(--ease-tactile),transform .22s var(--ease-tactile),visibility 0s} .drop-menu ul{list-style:none;font-size:12px;line-height:1.6;text-transform:uppercase} .drop-menu ul.sub{padding-left:22px;margin:6px 0 14px} .drop-menu a:hover{text-decoration:underline} /* Announcement bar */ .announce{background:var(--c-ink);color:#fff;text-align:center;font-family:var(--f-serif);font-size:16px;letter-spacing:.04em;padding:11px 0} /* ---------- Hero ---------- */ /* El hero histórico era una sola imagen con el título, el nombre de colección y el CTA ya quemados en el archivo (export del mockup en video) — por eso no había forma de ponerle un tope de alto sensato (la "banda" completa era una sola pieza) ni de animar texto y botón por separado. Con headline/cta_label en el config (admin, opcionales) se activa .has-overlay: capa de imagen + capa de texto real, cada una con su propia entrada. Un hero SIN esos campos (imagen vieja, todavía con el texto quemado) sigue exactamente igual que antes — .hotspot cubre toda el área como único link, cero regresión visual hasta que el cliente suba una foto limpia y el admin llene los campos. */ .hero{position:relative;overflow:hidden} .hero picture{display:block;height:clamp(420px,62vw,760px)} .hero picture img{width:100%;height:100%;object-fit:cover;object-position:center} .hero .hotspot{position:absolute;inset:0} .hero.has-overlay picture{animation:hero-img-in .8s var(--ease-tactile) both} /* .hero-text-img: rotulado PNG del diseñador, capa aparte sobre la imagen base (ver comentario de views/home.php) — sin esto queda en flujo normal, abajo de la imagen en vez de encima. */ .hero-text-img{position:absolute;inset:0;z-index:1;pointer-events:none;display:flex;align-items:flex-end} .hero .hero-text-img img{width:100%;height:100%;object-fit:contain;object-position:bottom left} /* :not(.has-text-img) a propósito: el scrim es para legibilidad del texto BLANCO tecleado (headline/subtitle/cta_label) sobre una foto cualquiera — el rotulado del diseñador (text_img) ya trae su propio contraste (relleno claro + contorno de color) y no lo necesita; oscurecer la foto ahí solo lo ensuciaría sin motivo (ver migración 050_hero_tibetan_text_overlay.sql). */ .hero.has-overlay:not(.has-text-img)::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(17,17,17,.6),rgba(17,17,17,0) 58%); } .hero-copy{position:absolute;left:0;right:0;bottom:0;padding:28px 28px 34px;color:#fff;max-width:640px;z-index:1} /* Sin botón (cta_label vacío), el bloque de texto es puramente decorativo y no debe robarle el clic al .hotspot que cubre toda la imagen debajo — si no, el área exacta bajo el título/subtítulo dejaría de ser parte del link. */ .hero-copy--passthrough{pointer-events:none} .hero-copy-title{ font-family:var(--f-serif);font-weight:700;font-size:clamp(28px,5vw,44px);line-height:1.05;margin:0 0 10px; clip-path:inset(0 100% 0 0);animation:hero-wipe-in .55s cubic-bezier(.65,0,.35,1) .5s both; } .hero-copy-subtitle{ font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase; margin:0 0 20px;animation:hero-fade-up .45s var(--ease-tactile) .85s both; } /* Mismo botón que .btn-view (CTA de "ver colección" en las tiles de producto): mismo color, forma y sombra — el hero necesita el mismo lenguaje de "aquí se compra", solo con su propio texto de admin (cta_label) en vez de "View collection" fijo. Las propiedades compartidas viven en el selector combinado con .btn-view (ver "Collection page" más abajo); aquí solo lo que lo hace distinto: flujo normal en vez de absolute, sin subrayado, y su animación de entrada. */ .hero-cta{display:inline-block;text-decoration:none;animation:hero-pop-in .4s var(--ease-tactile) 1.15s both} @keyframes hero-img-in{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:scale(1)}} @keyframes hero-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes hero-wipe-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes hero-pop-in{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}} @media (max-width:700px){ .hero picture{height:clamp(480px,118vw,720px)} .hero-copy{padding:22px 20px 28px} .hero-copy-title{font-size:clamp(24px,8vw,34px)} } /* ---------- Headings ---------- */ .h-block{font-weight:700;font-size:42px;text-align:center;margin:88px 0 70px} .h-carousel{font-weight:700;font-size:34px;text-align:center;margin:80px 0 60px} /* ---------- Collection feature blocks ---------- */ .feature{display:grid;grid-template-columns:1fr 1fr;min-height:705px} .feature .photo{overflow:hidden} .feature .photo a{display:block;width:100%;height:100%} .feature .photo img{width:100%;height:100%;object-fit:cover} .feature .panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px;padding:60px 40px;text-align:center} .feature .panel h3{font-family:var(--f-brush);font-weight:400;color:var(--c-cream);font-size:88px;line-height:1.15;letter-spacing:.02em} .view-link{font-family:var(--f-mono);font-weight:700;color:var(--c-cream);font-size:26px;border-bottom:1px solid var(--c-cream);padding-bottom:10px} .view-link:hover{opacity:.85} .bg-orange{background:var(--c-orange)} .bg-peri{background:var(--c-peri)} .bg-magenta{background:var(--c-magenta)} .bg-red{background:var(--c-red)} /* Momento focal (DESIGN.md — Overview): cada bloque de colección se revela como si se volteara una página del fanzine — la foto entra primero con un ligero avance/escala, el panel de color y su título brush llegan un instante después. Una sola vez por bloque (site-v12.js con IntersectionObserver, unobserve tras disparar). Sin JS o con animaciones reducidas: visible de inmediato, ver .no-reveal / prefers-reduced-motion al final del archivo. */ .feature > .photo,.checker > .cell{opacity:0;transform:translateY(26px) scale(1.035);transition:opacity .65s var(--ease-tactile),transform .65s var(--ease-tactile)} .feature > .photo.in-view,.checker > .cell.in-view{opacity:1;transform:none} .feature > .panel,.checker > .panel{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ease-tactile) .12s,transform .55s var(--ease-tactile) .12s} .feature > .panel.in-view,.checker > .panel.in-view{opacity:1;transform:none} /* ---------- Carousels (totes / prints) ---------- */ .carousel{display:flex;justify-content:center;gap:56px;padding:0 40px;margin-bottom:40px} .carousel .item{width:330px;text-align:center} .carousel .item img{width:100%;aspect-ratio:1.03;object-fit:cover;box-shadow:var(--sh-rest);transition:box-shadow .22s var(--ease-tactile),transform .22s var(--ease-tactile)} .carousel .item .label{margin-top:52px;font-weight:400;font-size:24px;line-height:1.4;letter-spacing:.02em;text-transform:uppercase} .carousel .item a:hover .label{text-decoration:underline} .carousel .item a:hover img,.carousel .item a:focus-visible img{box-shadow:var(--sh-hover);transform:translateY(-3px)} .section-gap{margin-bottom:96px} /* ---------- Footer ---------- */ .site-footer{background:var(--c-footer);color:#fff;position:relative;overflow:hidden;margin-top:0} .site-footer .art{position:absolute;right:0;top:0;height:100%;width:50%;background:url("../img/footer-art-v2.jpg") right center/cover no-repeat;opacity:.95;pointer-events:none} .site-footer .inner{position:relative;padding:56px 48px 24px;font-family:var(--f-serif)} .site-footer .cols{display:flex;gap:110px} .site-footer h5{font-size:24px;font-weight:500;margin-bottom:22px} .site-footer ul{list-style:none;font-size:18px;line-height:1.65} .site-footer a:hover{text-decoration:underline} .site-footer .rule{border:0;border-top:1px solid rgba(255,255,255,.5);margin:44px 0 40px;width:47%} .site-footer .brand p{font-size:18px;line-height:1.55} .site-footer .brand .name{font-size:22px;letter-spacing:.06em;font-weight:600;margin-bottom:8px} .site-footer .legal{position:relative;display:flex;align-items:center;justify-content:center;padding:16px 48px;font-family:var(--f-serif);font-size:16px;background:#fff;color:var(--c-ink)} .site-footer .legal .icons{position:absolute;right:48px;display:flex;gap:20px} .site-footer .legal svg{width:26px;height:26px;fill:none;stroke:var(--c-ink);stroke-width:1.6} /* ---------- All Collections ---------- */ .checker{display:grid;grid-template-columns:1fr 1fr} .checker .cell{min-height:690px;position:relative} .checker .cell img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .checker .panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px;text-align:center;min-height:690px;padding:60px 40px} .checker .panel h3{font-family:var(--f-brush);color:var(--c-cream);font-size:88px;line-height:1.2} /* ---------- Collection page ---------- */ .col-head{position:relative;margin:56px 0 64px} .col-head h1{font-weight:700;font-size:44px;text-align:center} .col-others{position:absolute;left:88px;top:-6px;border:1px solid var(--c-ink);padding:14px 20px;font-size:12px;line-height:1.7} .col-others li{list-style:none} .col-others li::before{content:"* "} .prod-grid{display:grid;grid-template-columns:1fr 1fr} .prod-grid .tile{position:relative;overflow:hidden;box-shadow:var(--sh-rest);transition:box-shadow .22s var(--ease-tactile),transform .22s var(--ease-tactile)} .prod-grid .tile:hover,.prod-grid .tile:focus-within{box-shadow:var(--sh-hover);transform:translateY(-3px)} .prod-grid .tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:.93} .tile-price{position:absolute;top:18px;left:18px;background:var(--c-ink);color:#fff;font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.02em;padding:6px 13px;border-radius:999px} .btn-view,.hero-cta{background:var(--c-btn-orange);color:#fff;font-family:var(--f-mono);font-weight:700;font-size:23px;padding:16px 33px;border-radius:34px;box-shadow:0 0 0 4px var(--c-btn-orange);transition:filter .22s,box-shadow .22s var(--ease-tactile),transform .22s var(--ease-tactile)} .btn-view{position:absolute;right:22px;bottom:26px} .btn-view:hover,.btn-view:focus-visible,.hero-cta:hover,.hero-cta:focus-visible{filter:brightness(1.06);box-shadow:0 0 0 4px var(--c-btn-orange),var(--sh-hover);transform:translateY(-3px)} .col-desc{max-width:840px;margin:120px auto;text-align:center} .col-desc h2{font-weight:700;font-size:40px} .col-desc .sub{font-weight:700;font-size:24px;margin:4px 0 56px} .col-desc p{font-size:19px;line-height:1.55;margin-bottom:26px} /* ---------- Product page ---------- */ .breadcrumb{font-size:20px;padding:44px 0 40px;margin-left:10px} .breadcrumb b{font-weight:700} .product{display:grid;grid-template-columns:220px 440px 1fr;gap:0 30px;align-items:start} .gallery-thumbs{display:flex;flex-direction:column} .gallery-thumbs button{border:1px solid #ccc;background:none;padding:0;cursor:pointer} .gallery-thumbs button+button{border-top:0} .gallery-main{border:1px solid #eee} .p-info{padding:8px 40px 0 30px} .p-info h1{font-weight:700;font-size:34px;line-height:1.15} .p-info .type{font-weight:700;font-size:24px;margin:10px 0 18px} .p-info .price{font-size:23px;margin-bottom:34px} .p-info p{font-size:16px;line-height:1.5;margin-bottom:22px} .p-options{display:flex;align-items:center;gap:8px;margin:36px 0 0;flex-wrap:wrap} .size{width:44px;height:44px;border:1px solid #444;background:#fff;font-family:var(--f-serif);font-size:19px;cursor:pointer;transition:box-shadow .18s var(--ease-tactile),transform .18s var(--ease-tactile)} .size:hover,.size:focus-visible{box-shadow:var(--sh-rest);transform:translateY(-2px)} .size[aria-pressed="true"]{background:var(--c-ink);color:#fff} .swatches{display:inline-flex;gap:8px;margin-left:26px} .swatch{width:44px;height:44px;border:1px solid #444;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:box-shadow .18s var(--ease-tactile),transform .18s var(--ease-tactile)} .swatch:hover,.swatch:focus-visible{box-shadow:var(--sh-rest);transform:translateY(-2px)} .lang-switch{display:inline-flex;gap:7px;align-items:center;font-size:18px;margin-right:6px} .lang-switch a.active{font-weight:600;text-decoration:underline} .btn-cart{margin-left:auto;background:var(--c-btn-blue);color:#fff;font-family:var(--f-serif);font-size:19px;padding:12px 26px;border:0;cursor:pointer;box-shadow:var(--sh-rest);transition:filter .22s,box-shadow .22s var(--ease-tactile),transform .22s var(--ease-tactile)} .btn-cart:hover,.btn-cart:focus-visible{filter:brightness(1.08);box-shadow:var(--sh-hover);transform:translateY(-3px)} .illustration{max-width:900px;margin:130px auto 110px;text-align:center} .illustration h2{font-weight:700;font-size:40px} .illustration .sub{font-weight:700;font-size:24px;margin:2px 0 64px} .illustration p{font-size:19px;line-height:1.6;margin-bottom:26px} /* Antes vivía como `.illustration .view-dark` — solo pegaba dentro de esa sección de producto. La clase se usa suelta en cart/wishlist/order-detail/order-received también, donde el selector nunca matcheaba: texto negro sin subrayado, invisible como link. Desacoplada del contenedor para que funcione en las 5 vistas. */ .view-dark{display:inline-block;margin-top:56px;font-weight:400;font-size:24px;color:var(--c-ink);border-bottom:1px solid var(--c-ink);padding-bottom:8px;transition:opacity .18s var(--ease-tactile)} .view-dark:hover,.view-dark:focus-visible{opacity:.75} /* ---------- About ---------- */ .about-hero img{width:100%} /* ---------- Responsive (base) ---------- */ @media (max-width:900px){ .site-header .bar{flex-wrap:wrap;height:auto;padding:10px 16px 12px;row-gap:4px} .logo{position:static;transform:none;width:100%;text-align:center;order:-1;margin:4px 0 6px;font-size:22px;letter-spacing:.2em} .header-right a[href="#contacto"]{display:none} .drop-menu{top:auto} .feature,.checker,.prod-grid{grid-template-columns:1fr} .feature .panel h3,.checker .panel h3{font-size:60px} .carousel{flex-direction:column;align-items:center} .product{grid-template-columns:1fr;gap:24px} .gallery-thumbs{flex-direction:row;flex-wrap:wrap} .gallery-thumbs button{width:64px;flex-shrink:0} .p-info{padding:0 24px} .site-footer .cols{flex-direction:column;gap:40px} .site-footer .art{opacity:.25;width:100%} .col-others{position:static;margin:0 auto 30px;width:max-content} .h-block{font-size:30px;margin:56px 0 40px} } /* ===== NS555 adiciones dinámicas (no tocar lo de arriba: es la maqueta aprobada) ===== */ .btn-cart.soldout { opacity: .45; cursor: not-allowed; } .content-page { min-height: 40vh; } /* Header pegado al hacer scroll (pedido 12-ago) */ .site-header { position: sticky; top: 0; } /* El drop menu obedece la posición de la hamburguesa: la barra interior (.wrap) está centrada a max 1280px, así que el menú se ancla a (ancho − 1280)/2 + 24px de padding */ .drop-menu { left: calc((100% - min(100%, 1280px)) / 2 + 24px); } @media (max-width: 900px) { .drop-menu { left: 16px; } } /* Logo oficial SVG (altura explícita, ancho automático) */ .logo img { display: block; height: 28px; width: auto; } @media (max-width: 900px) { .logo img { height: 20px; margin: 0 auto; } } /* Honeypot del formulario de contacto — oculto a la vista, visible para un bot que no ejecuta CSS. position:absolute en vez de display:none: algunos bots ignoran display:none/visibility:hidden a propósito para saltarse ese truco. */ .hp-field { position: absolute; left: -9999px; } /* Título accesible fuera de pantalla: home y "todas las colecciones" no llevan un h1 visible aparte del logo (duplicarlo se vería raro), pero necesitan un h1 real en el DOM para la jerarquía de encabezados. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ===== Shop: carrito, cuenta, checkout, wishlist (sistema visual de la maqueta) ===== */ .store-flash { text-align: center; font-family: var(--f-mono); font-size: 14px; padding: 12px 16px; background: #F8EEAE; } .store-flash.error { background: #C82128; color: #fff; } /* Toast (reemplaza alert() nativo, ver nsToast() en site-v6.js) */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 999; font-family: var(--f-mono); font-size: 14px; padding: 12px 20px; border-radius: 4px; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: calc(100vw - 32px); text-align: center; } .toast.error { background: #C82128; } .toast.warning { background: #B8860B; } .toast.success { background: #2E7D32; } .cart-link { position: relative; } .cart-badge { position: absolute; top: -8px; right: -10px; background: #C82128; color: #fff; font-family: var(--f-mono); font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: var(--r-badge); } /* Feedback de "se agregó al carrito": site-v12.js dispara este WAAPI keyframe en la carga de order-received/producto cuando NS_CART_ADDED viene presente — la badge confirma la acción sin depender de un toast que el usuario pueda perderse. */ .cart-badge.bump { animation: cart-bump .5s var(--ease-tactile); } @keyframes cart-bump { 0%{transform:scale(1)} 35%{transform:scale(1.45)} 60%{transform:scale(.92)} 100%{transform:scale(1)} } .shop-wrap { max-width: 960px; margin: 60px auto 110px; padding: 0 20px; font-family: var(--f-mono); } .shop-wrap.narrow { max-width: 430px; } .shop-wrap.center { text-align: center; } .shop-title { font-family: var(--f-mono); font-weight: 700; font-size: clamp(26px, 4vw, 34px); margin-bottom: 28px; } .shop-sub { font-family: var(--f-mono); font-weight: 700; font-size: 17px; margin: 34px 0 14px; } .shop-empty { font-size: 14px; margin: 18px 0; } .mini { font-size: 12px; color: #555; } .shop-links { margin-top: 22px; font-size: 13px; line-height: 2; } .shop-links a:hover, .link-btn:hover { text-decoration: underline; } .reset-link { font-size: 12px; word-break: break-all; margin: 10px 0 26px; } .shop-form label { display: block; font-size: 12px; margin: 16px 0 6px; letter-spacing: .02em; } .shop-form input, .shop-form select, .shop-form textarea, .qty-input { width: 100%; padding: 11px 12px; border: 1px solid var(--c-ink); background: #fff; font-family: var(--f-mono); font-size: 14px; color: var(--c-ink); box-shadow: var(--sh-rest); transition: box-shadow .2s var(--ease-tactile), border-color .15s; } .shop-form textarea { resize: vertical; } .shop-form input:disabled { background: #f1ede2; color: #777; box-shadow: none; } .shop-form input:focus-visible, .shop-form select:focus-visible, .shop-form textarea:focus-visible, .qty-input:focus-visible { outline: none; border-color: var(--c-btn-blue); box-shadow: var(--sh-hover); } /* min-width: 0 es necesario: un