/* Carrito compartido: el HTML editable pertenece a src/components/cart.html. */
.site-nav .nav-links { margin-left:auto; }
.cart-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 14px; margin-left:14px; border-radius:999px; color:var(--ink); cursor:pointer; font:500 12px var(--mono); }
.cart-toggle:focus-visible, .cart-dialog :is(button,a,input):focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.cart-add { display:inline-flex; justify-content:center; align-items:center; font:600 11px var(--body); border:1px solid rgb(198 165 106 / .35); border-radius:999px; padding:9px 13px; color:var(--lime); background:rgb(255 255 255 / .025); cursor:pointer; margin-top:12px; }
.cart-add.btn { font-family:var(--display); font-size:13px; padding:14px 22px; margin-bottom:12px; color:var(--bg); background:var(--lime); }
.cart-add:disabled, [data-cart-config-add]:disabled { cursor:not-allowed; opacity:.45; box-shadow:none; }
.cart-add:not(:disabled):hover { background:rgb(255 255 255 / .055); }
.cart-add.btn:not(:disabled):hover { background:var(--lime); }
.config-cart { display:grid; gap:12px; border-top:1px solid var(--panel-line); padding-top:22px; }
.config-cart label { font:12px var(--mono); color:var(--dim); }
.config-cart select, .config-cart input { border:1px solid var(--panel-line); background:var(--bg2); color:var(--ink); border-radius:12px; padding:12px; width:100%; min-width:0; font:12px var(--body); }
.config-cart-actions { display:flex; gap:12px; }
.config-cart-actions input { width:72px; }
.config-cart-actions .btn { flex:1; justify-content:center; border:0; cursor:pointer; font-size:12px; }
.cart-announcement { position:fixed; z-index:150; bottom:20px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); border-radius:14px; background:var(--bg2); color:var(--ink); box-shadow:0 8px 35px #0008; font-size:13px; line-height:1.6; }
.cart-announcement:not(:empty) { padding:12px 18px; border:1px solid var(--panel-line); }
.cart-dialog { position:fixed; inset:0 0 0 auto; margin:0; width:min(480px,100%); height:100dvh; max-height:100dvh; max-width:100%; padding:0; border:0; border-left:1px solid var(--panel-line); background:linear-gradient(160deg,var(--tyz-panel),var(--tyz-bg-secondary) 65%); color:var(--ink); box-shadow:-24px 0 80px #0007; overflow:hidden; opacity:0; transform:translateX(100%); transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .2s; }
.cart-dialog[open] { display:flex; flex-direction:column; }
.cart-dialog.is-open { opacity:1; transform:translateX(0); }
.cart-dialog::backdrop { background:rgba(5,5,5,.65); backdrop-filter:blur(5px); }
body.cart-is-open { overflow:hidden; }
.cart-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:30px 28px 24px; border-bottom:1px solid var(--panel-line); }
.cart-eyebrow { display:block; color:var(--lime); font:10px var(--mono); letter-spacing:.18em; margin-bottom:14px; }
.cart-header h2 { font-size:25px; }
.cart-header p { margin-top:10px; font:11px var(--mono); color:var(--dim); }
.cart-live:not(:empty) { padding:12px 28px; background:#ffffff05; color:var(--dim); font-size:12px; line-height:1.6; }
.cart-close,.cart-remove,.cart-continue { color:var(--dim); background:none; border:0; cursor:pointer; font:12px var(--body); }
.cart-close { padding:8px 0 8px 8px; }
.cart-close:hover,.cart-continue:hover { color:var(--cyan); }
.cart-content { flex:1; min-height:0; overflow-y:auto; padding:0 28px; overscroll-behavior:contain; }
.cart-empty { text-align:center; padding:45px 8px; }
.cart-empty[hidden], .cart-line [hidden] { display:none; }
.cart-empty-mark { display:block; color:var(--purple); font-size:66px; margin-bottom:20px; }
.cart-empty h3 { font-size:21px; line-height:1.45; }
.cart-empty p { color:var(--dim); font-size:13px; line-height:1.8; margin:18px 0 24px; }
.cart-empty .btn { font-size:12px; }
.cart-line { display:grid; grid-template-columns:82px minmax(0,1fr); gap:18px; padding:26px 0; border-bottom:1px solid var(--panel-line); }
.cart-line-visual { width:82px; height:94px; display:grid; place-items:center; border-radius:16px; overflow:hidden; background:radial-gradient(circle at 30% 20%,#8e949c18,#ffffff04); color:var(--purple); font-size:30px; }
.cart-line-visual img { height:100%; width:100%; object-fit:contain; }
.cart-line-visual picture { height:100%; width:100%; }
.cart-line-title { font:500 12px/1.7 var(--display); }
.cart-line-title:hover { color:var(--cyan); }
.cart-line-options { font:11px/1.8 var(--mono); color:var(--dim); margin-top:8px; }
.cart-line-design { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:11px; color:var(--dim); overflow-wrap:anywhere; }
.cart-line-design img { width:32px; height:32px; object-fit:contain; border-radius:5px; background:#ffffff12; }
.cart-line-warning { font-size:11px; color:#e39d9d; line-height:1.6; margin-top:8px; }
.cart-line-controls { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; align-items:center; margin-top:16px; }
.cart-quantity { display:flex; border:1px solid var(--panel-line); border-radius:999px; overflow:hidden; }
.cart-quantity button { width:30px; min-height:34px; border:0; color:var(--ink); background:none; cursor:pointer; }
.cart-quantity input { width:42px; appearance:textfield; border:0; background:transparent; color:var(--ink); text-align:center; font:12px var(--mono); }
.cart-quantity input::-webkit-inner-spin-button { appearance:none; }
.cart-quantity :disabled { opacity:.35; cursor:not-allowed; }
.cart-remove { font-size:11px; color:#d87878; }
.cart-line-price { font:13px var(--mono); margin-top:14px; color:var(--lime); }
.cart-summary { padding:24px 28px max(22px,env(safe-area-inset-bottom)); border-top:1px solid var(--panel-line); }
.cart-subtotal { display:flex; justify-content:space-between; gap:16px; font-size:14px; }
.cart-subtotal strong { font:500 16px var(--mono); }
.cart-summary p { color:var(--dim); font-size:11px; line-height:1.7; margin-top:12px; }
.cart-checkout { justify-content:center; border:0; width:100%; margin-top:18px; opacity:.42; cursor:not-allowed; box-shadow:none; font-size:12px; }
.cart-checkout:not(:disabled) { opacity:1; cursor:pointer; }
.cart-checkout[aria-busy="true"] { cursor:wait; }
.cart-shipping-link { display:block; text-align:center; color:var(--cyan); font-size:12px; margin-top:18px; padding:10px; border:1px solid var(--panel-line); border-radius:12px; }
.cart-continue { display:block; margin:16px auto 0; }
/* Solo la envoltura fuente tiene esta clase; el build importa el fragmento sin body. */
.cart-editor-preview .cart-dialog { display:flex; flex-direction:column; opacity:1; transform:none; }
.cart-editor-preview [data-cart-line] { display:block; }
.cart-editor-preview [data-cart-empty] { display:none; }
@media(max-width:1100px) { .cart-toggle { margin-left:auto; margin-right:10px; } }
@media(max-width:480px) { .cart-header { padding:24px 20px 18px; } .cart-content { padding:0 20px; } .cart-summary { padding:18px 20px max(18px,env(safe-area-inset-bottom)); } .cart-header h2 { font-size:22px; } }
@media(prefers-reduced-motion:reduce) { .cart-dialog { transition:none; } }