/* ============================================================
 * Joyería Studio · Components CSS
 * Sistema de diseño compartido entre todas las páginas públicas.
 *
 * Sincronizado con /style-guide.php (referencia visual)
 * Última actualización: 18 May 2026
 *
 * Convenciones:
 * - Mobile-first (base styles + media queries up)
 * - No usar #000 — usar #1a1814 (ink-900 charcoal warm)
 * - Transitions ease-in-out, nunca snappy/bouncy
 * - Tokens: cream-* / ink-* / gold-* / semánticos
 *
 * NO editar componentes aquí sin actualizar el style guide
 * ============================================================
 */


/* ============================================================
 * ATOMS · Buttons
 * ============================================================ */

.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-family:'Inter',sans-serif; font-weight:500; letter-spacing:0.05em; cursor:pointer; transition:all 0.25s ease-in-out; border-radius:4px; line-height:1; text-decoration:none; border:1px solid transparent; }
.btn:disabled, .btn.is-disabled { opacity:0.45; cursor:not-allowed; pointer-events:none; }
.btn-lg { padding:1rem 2rem; font-size:0.875rem; letter-spacing:0.1em; text-transform:uppercase; }
.btn-md { padding:0.75rem 1.5rem; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; }
.btn-sm { padding:0.5rem 1rem; font-size:0.75rem; letter-spacing:0.06em; }
.btn-primary { background:linear-gradient(180deg,#d4af37,#b8962f); color:#1a1814; border-color:#b8962f; }
.btn-primary:hover { background:linear-gradient(180deg,#e6c66a,#d4af37); transform:translateY(-1px); box-shadow:0 12px 24px rgba(212,175,55,0.28); }
.btn-secondary { background:#1a1814; color:#FFFDF7; border-color:#1a1814; }
.btn-secondary:hover { background:transparent; color:#1a1814; }
.btn-outline { background:transparent; color:#1a1814; border-color:#1a1814; }
.btn-outline:hover { background:#1a1814; color:#FFFDF7; }
.btn-ghost { background:transparent; color:#3a342c; border-color:transparent; }
.btn-ghost:hover { color:#b8962f; background:#FAF6EE; }
.btn-link { background:transparent; color:#b8962f; border:none; padding:0; text-transform:none; letter-spacing:normal; font-weight:500; text-decoration:none; }
.btn-link:hover { color:#9a7c27; text-decoration:underline; text-underline-offset:3px; }
.btn-icon { padding:0.625rem; width:2.5rem; height:2.5rem; border-radius:999px; }
.btn-loading { position:relative; color:transparent !important; pointer-events:none; }
.btn-loading::after { content:''; position:absolute; left:50%; top:50%; width:1rem; height:1rem; margin:-0.5rem 0 0 -0.5rem; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin 0.7s linear infinite; color:#1a1814; }
.btn-primary.btn-loading::after { color:#1a1814; }
.btn-secondary.btn-loading::after { color:#FFFDF7; }
@keyframes spin { to { transform:rotate(360deg); } }


/* ============================================================
 * ATOMS · Inputs
 * ============================================================ */

.input { width:100%; padding:0.75rem 1rem; font-size:0.9rem; font-family:'Inter',sans-serif; color:#1a1814; background:#FFFDF7; border:1px solid #E5DCC4; border-radius:6px; transition:all 0.2s; }
.input::placeholder { color:#9a8f7e; }
.input:hover { border-color:#d4af37; }
.input:focus { outline:none; border-color:#d4af37; box-shadow:0 0 0 3px rgba(212,175,55,0.15); }
.input.is-error { border-color:#dc2626; }
.input.is-error:focus { box-shadow:0 0 0 3px rgba(220,38,38,0.15); }
.input:disabled { background:#FAF6EE; color:#9a8f7e; cursor:not-allowed; }
.input-wrapper { position:relative; }
.input-icon-left { padding-left:2.5rem; }
.input-icon-right { padding-right:2.5rem; }
.input-icon { position:absolute; top:50%; transform:translateY(-50%); color:#9a8f7e; pointer-events:none; }
.input-icon-l { left:0.75rem; }
.input-icon-r { right:0.75rem; }


/* ============================================================
 * ATOMS · Form field wrapper
 * ============================================================ */

.field { display:block; margin-bottom:1.25rem; }
.field-label { display:block; font-size:0.75rem; font-weight:500; color:#3a342c; margin-bottom:0.5rem; letter-spacing:0.04em; }
.field-required { color:#dc2626; margin-left:0.2rem; }
.field-helper { font-size:0.75rem; color:#5a5148; margin-top:0.4rem; }
.field-error { font-size:0.75rem; color:#dc2626; margin-top:0.4rem; display:flex; align-items:center; gap:0.3rem; }


/* ============================================================
 * ATOMS · Checkbox · Radio · Toggle
 * ============================================================ */

.checkbox, .radio { display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; font-size:0.875rem; color:#1a1814; user-select:none; }
.checkbox input, .radio input { width:1.1rem; height:1.1rem; accent-color:#d4af37; cursor:pointer; }
.checkbox.is-disabled, .radio.is-disabled { opacity:0.5; cursor:not-allowed; }

.toggle { display:inline-flex; align-items:center; gap:0.75rem; cursor:pointer; font-size:0.875rem; user-select:none; }
.toggle-switch { position:relative; width:44px; height:24px; background:#E5DCC4; border-radius:999px; transition:background 0.2s; }
.toggle-switch::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.toggle input { display:none; }
.toggle input:checked + .toggle-switch { background:#d4af37; }
.toggle input:checked + .toggle-switch::after { transform:translateX(20px); }


/* ============================================================
 * ATOMS · Badges
 * ============================================================ */

.badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.25rem 0.65rem; font-size:0.7rem; font-weight:500; letter-spacing:0.05em; border-radius:999px; line-height:1; }
.badge-gold   { background:#FAF6EE; color:#b8962f; border:1px solid #d4af37; }
.badge-dark   { background:#1a1814; color:#FFFDF7; }
.badge-sale   { background:#dc2626; color:#fff; }
.badge-new    { background:#10b981; color:#fff; }
.badge-best   { background:#FAF6EE; color:#1a1814; border:1px solid #1a1814; }
.badge-low    { background:#fef3c7; color:#92400e; }
.badge-out    { background:#9a8f7e; color:#fff; }
.badge-uppercase { text-transform:uppercase; letter-spacing:0.15em; font-size:0.65rem; }


/* ============================================================
 * ATOMS · Display (price, stars, avatars, swatches, stock)
 * ============================================================ */

.price { display:inline-flex; align-items:baseline; gap:0.5rem; font-family:'Inter',sans-serif; }
.price-main { font-size:1.5rem; font-weight:600; color:#1a1814; }
.price-old { font-size:1rem; color:#9a8f7e; text-decoration:line-through; }
.price-currency { font-size:0.7rem; color:#5a5148; letter-spacing:0.1em; }
.price-msi { display:block; font-size:0.75rem; color:#b8962f; margin-top:0.25rem; }

.stars { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.875rem; color:#3a342c; }
.stars-icons { display:inline-flex; color:#d4af37; }
.stars-icons svg { width:1rem; height:1rem; }

.avatar { display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; background:#d4af37; color:#1a1814; border-radius:50%; font-weight:600; font-size:0.875rem; }
.avatar-sm { width:2rem; height:2rem; font-size:0.75rem; }
.avatar-lg { width:3.5rem; height:3.5rem; font-size:1.125rem; }

.swatch { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #E5DCC4; cursor:pointer; transition:all 0.2s; position:relative; }
.swatch:hover { transform:scale(1.1); }
.swatch.is-active { box-shadow:0 0 0 2px #d4af37; }
.swatch-oro-amarillo { background:linear-gradient(135deg,#f5d480,#d4af37); }
.swatch-oro-blanco   { background:linear-gradient(135deg,#f5f5f5,#d4d4d4); }
.swatch-oro-rosa     { background:linear-gradient(135deg,#f5d4c4,#d4a08a); }
.swatch-platino      { background:linear-gradient(135deg,#e5e7eb,#9ca3af); }

.stock { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.75rem; }
.stock-dot { width:0.5rem; height:0.5rem; border-radius:50%; }
.stock-in    .stock-dot { background:#10b981; }
.stock-low   .stock-dot { background:#f59e0b; }
.stock-out   .stock-dot { background:#dc2626; }
.stock-made  .stock-dot { background:#3b82f6; }


/* ============================================================
 * ATOMS · Feedback (spinner, skeleton)
 * ============================================================ */

.spinner { display:inline-block; width:1.5rem; height:1.5rem; border:2px solid #E5DCC4; border-top-color:#d4af37; border-radius:50%; animation:spin 0.7s linear infinite; }
.spinner-sm { width:1rem; height:1rem; border-width:2px; }
.spinner-lg { width:2.5rem; height:2.5rem; border-width:3px; }

.skeleton { background:linear-gradient(90deg,#FAF6EE 0%,#F0E9D8 50%,#FAF6EE 100%); background-size:200% 100%; animation:skeleton-loading 1.4s ease-in-out infinite; border-radius:6px; }
@keyframes skeleton-loading { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.skeleton-text { height:0.875rem; margin-bottom:0.5rem; }
.skeleton-text-lg { height:1.5rem; }


/* ============================================================
 * ATOMS · Decorative (divider)
 * ============================================================ */

.divider { border:none; border-top:1px solid #E5DCC4; margin:1.5rem 0; }
.divider-gold { background:linear-gradient(90deg,transparent,#d4af37,transparent); height:1px; border:none; margin:1.5rem 0; }


/* ============================================================
 * MOLECULES · Navigation (chips, breadcrumbs, pagination, qty)
 * ============================================================ */

.chip { display:inline-flex; align-items:center; gap:0.4rem; padding:0.4rem 0.8rem; background:#FAF6EE; border:1px solid #E5DCC4; border-radius:999px; font-size:0.75rem; color:#3a342c; }
.chip-active { background:#1a1814; color:#FFFDF7; border-color:#1a1814; }
.chip-remove { cursor:pointer; opacity:0.7; padding:0; background:none; border:none; color:inherit; display:inline-flex; }
.chip-remove:hover { opacity:1; }

.breadcrumbs { display:flex; align-items:center; gap:0.4rem; font-size:0.75rem; color:#5a5148; }
.breadcrumbs a:hover { color:#b8962f; }
.breadcrumbs-sep { color:#9a8f7e; }
.breadcrumbs-current { color:#1a1814; font-weight:500; }

.pagination { display:inline-flex; gap:0.25rem; }
.pagination a, .pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; padding:0 0.5rem; font-size:0.875rem; color:#3a342c; border:1px solid #E5DCC4; border-radius:6px; transition:all 0.2s; }
.pagination a:hover { border-color:#d4af37; color:#b8962f; }
.pagination .is-current { background:#1a1814; color:#FFFDF7; border-color:#1a1814; }
.pagination .is-disabled { opacity:0.4; cursor:not-allowed; }

.qty { display:inline-flex; align-items:center; border:1px solid #E5DCC4; border-radius:6px; overflow:hidden; }
.qty button { background:#FAF6EE; border:none; padding:0.5rem 0.75rem; font-size:1rem; cursor:pointer; color:#1a1814; transition:background 0.2s; }
.qty button:hover { background:#F0E9D8; }
.qty input { width:3rem; border:none; text-align:center; font-size:0.875rem; padding:0.5rem 0; background:#fff; }
.qty input:focus { outline:none; }


/* ============================================================
 * MOLECULES · Product info (trust item)
 * ============================================================ */

.trust-item { display:flex; gap:0.75rem; align-items:flex-start; }
.trust-item-icon { flex-shrink:0; width:2rem; height:2rem; color:#b8962f; }
.trust-item-text { font-size:0.875rem; }
.trust-item-title { font-weight:500; color:#1a1814; }
.trust-item-desc { color:#5a5148; font-size:0.75rem; margin-top:0.1rem; }


/* ============================================================
 * MOLECULES · Overlays (toast, accordion)
 * ============================================================ */

.toast { display:flex; align-items:flex-start; gap:0.75rem; padding:1rem 1.25rem; background:#fff; border:1px solid #E5DCC4; border-radius:8px; box-shadow:0 10px 25px rgba(0,0,0,0.08); max-width:24rem; }
.toast-icon { flex-shrink:0; }
.toast-success .toast-icon { color:#10b981; }
.toast-error   .toast-icon { color:#dc2626; }
.toast-warning .toast-icon { color:#f59e0b; }
.toast-info    .toast-icon { color:#3b82f6; }
.toast-body { flex:1; }
.toast-title { font-weight:500; color:#1a1814; font-size:0.875rem; }
.toast-desc { color:#5a5148; font-size:0.8rem; margin-top:0.2rem; }
.toast-close { color:#9a8f7e; cursor:pointer; background:none; border:none; padding:0; }

.accordion-item { border-bottom:1px solid #E5DCC4; }
.accordion-trigger { display:flex; justify-content:space-between; align-items:center; width:100%; padding:1rem 0; font-size:0.875rem; font-weight:500; color:#1a1814; background:none; border:none; cursor:pointer; text-align:left; letter-spacing:0.03em; }
.accordion-trigger:hover { color:#b8962f; }
.accordion-trigger .accordion-icon { transition:transform 0.3s; }
.accordion-item.is-open .accordion-icon { transform:rotate(180deg); }
.accordion-body { max-height:0; overflow:hidden; transition:max-height 0.3s ease; font-size:0.875rem; color:#3a342c; line-height:1.7; }
.accordion-item.is-open .accordion-body { max-height:500px; padding-bottom:1rem; }


/* ============================================================
 * ORGANISMS · Product card (con hover cross-fade BE-style)
 * ============================================================ */

.product-card { display:block; background:#fff; border:1px solid #F0E9D8; border-radius:8px; overflow:hidden; transition:all 0.3s ease-in-out; position:relative; }
.product-card:hover { box-shadow:0 16px 40px rgba(26,24,20,0.08); border-color:#E5DCC4; }
.product-card-media { position:relative; aspect-ratio:1; background:#FAF6EE; overflow:hidden; }
.product-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 350ms ease-in-out; }
.product-card-img-hover { opacity:0; }
.product-card:hover .product-card-img-primary { opacity:0; }
.product-card:hover .product-card-img-hover { opacity:1; }
.product-card-badge-top { position:absolute; top:0.75rem; left:0.75rem; z-index:2; }
.product-card-heart { position:absolute; top:0.75rem; right:0.75rem; z-index:2; padding:0.4rem; background:rgba(255,253,247,0.9); border:none; border-radius:50%; cursor:pointer; transition:all 0.2s; }
.product-card-heart:hover { background:#fff; transform:scale(1.1); }
.product-card-heart.is-active { color:#dc2626; }
.product-card-body { padding:1rem; }
.product-card-title { font-size:0.875rem; font-weight:500; color:#1a1814; margin-bottom:0.4rem; line-height:1.4; }
.product-card-price { font-size:1rem; font-weight:600; color:#1a1814; }
.product-card-swatches { display:flex; gap:0.4rem; margin-top:0.5rem; }
.product-card-swatch { width:0.85rem; height:0.85rem; border-radius:50%; border:1px solid #fff; box-shadow:0 0 0 1px #E5DCC4; }
.product-card-cta { position:absolute; left:1rem; right:1rem; bottom:1rem; opacity:0; transform:translateY(0.5rem); transition:all 0.3s; }
.product-card:hover .product-card-cta { opacity:1; transform:translateY(0); }


/* ============================================================
 * ORGANISMS · Trust stripe + USP row
 * ============================================================ */

.trust-stripe { display:flex; align-items:center; justify-content:center; gap:2rem; padding:0.75rem 1rem; background:#FAF6EE; border-top:1px solid #F0E9D8; border-bottom:1px solid #F0E9D8; font-size:0.75rem; color:#3a342c; flex-wrap:wrap; }
.trust-stripe-item { display:inline-flex; align-items:center; gap:0.4rem; }
.trust-stripe-item svg { color:#b8962f; }

.usp-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; padding:2rem 0; }
@media (max-width:768px) { .usp-row { grid-template-columns:repeat(2,1fr); } }
.usp-item { text-align:center; }
.usp-item-icon { width:2.5rem; height:2.5rem; margin:0 auto 0.75rem; color:#b8962f; }
.usp-item-title { font-size:0.875rem; font-weight:500; color:#1a1814; margin-bottom:0.25rem; }
.usp-item-desc { font-size:0.75rem; color:#5a5148; }


/* ============================================================
 * ORGANISMS · WhatsApp FAB + MSI badge
 * ============================================================ */

.wa-fab { position:fixed; bottom:1.5rem; right:1.5rem; z-index:50; display:flex; align-items:center; gap:0.5rem; padding:0.75rem 1.25rem; background:#25D366; color:#fff; border-radius:999px; box-shadow:0 12px 28px rgba(37,211,102,0.4); text-decoration:none; font-size:0.875rem; font-weight:500; transition:all 0.25s; }
.wa-fab:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(37,211,102,0.5); }
@media (max-width:768px) { .wa-fab { padding:0.85rem; } .wa-fab-text { display:none; } }

.msi-badge { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 0.85rem; background:linear-gradient(135deg,#FAF6EE,#F0E9D8); border:1px solid #d4af37; border-radius:6px; font-size:0.75rem; color:#1a1814; }
.msi-badge-strong { font-weight:600; color:#b8962f; }


/* ============================================================
 * ORGANISMS · Empty state
 * ============================================================ */

.empty-state { text-align:center; padding:3rem 1.5rem; }
.empty-state-icon { width:4rem; height:4rem; margin:0 auto 1rem; color:#d4af37; opacity:0.7; }
.empty-state-title { font-family:'Playfair Display',serif; font-size:1.5rem; color:#1a1814; margin-bottom:0.5rem; }
.empty-state-desc { font-size:0.875rem; color:#5a5148; margin-bottom:1.5rem; max-width:24rem; margin-left:auto; margin-right:auto; }


/* ============================================================
 * CART · Drawer + Badge + Toast
 * ============================================================ */

/* Badge contador en header */
.cart-header-trigger { position:relative; display:inline-flex; align-items:center; justify-content:center; color:#1a1814; transition:color 0.2s; padding:0.4rem; }
.cart-header-trigger:hover { color:#b8962f; }
.cart-badge { position:absolute; top:-2px; right:-4px; background:#dc2626; color:#fff; font-size:10px; font-weight:600; min-width:18px; height:18px; padding:0 4px; border-radius:999px; display:none; align-items:center; justify-content:center; line-height:1; }
.cart-badge.is-visible { display:inline-flex; }

/* Drawer overlay */
.cart-drawer-overlay { display:none; position:fixed; inset:0; background:rgba(26,24,20,0.55); z-index:60; opacity:0; transition:opacity 0.3s; }
.cart-drawer-overlay.is-open { display:block; opacity:1; }

/* Drawer principal (right side) */
.cart-drawer { position:fixed; top:0; right:0; bottom:0; width:100%; max-width:420px; background:#FFFDF7; z-index:61; transform:translateX(100%); transition:transform 0.3s ease-in-out; display:flex; flex-direction:column; box-shadow:-12px 0 32px rgba(26,24,20,0.12); }
.cart-drawer.is-open { transform:translateX(0); }
.cart-drawer-header { display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem; border-bottom:1px solid #E5DCC4; }
.cart-drawer-title { font-family:'Playfair Display',serif; font-size:1.5rem; color:#1a1814; margin:0; }
.cart-drawer-close { background:none; border:none; padding:0.5rem; cursor:pointer; color:#1a1814; transition:color 0.2s; }
.cart-drawer-close:hover { color:#b8962f; }
.cart-drawer-body { flex:1; overflow-y:auto; padding:1rem 1.5rem; }
.cart-drawer-footer { border-top:1px solid #E5DCC4; padding:1.25rem 1.5rem; background:#FFFDF7; }

/* Empty state dentro del drawer */
.cart-empty { text-align:center; padding:3rem 1rem; }
.cart-empty-icon { width:3.5rem; height:3.5rem; margin:0 auto 1rem; color:#d4af37; opacity:0.6; }
.cart-empty-title { font-family:'Playfair Display',serif; font-size:1.25rem; color:#1a1814; margin-bottom:0.4rem; }
.cart-empty-desc { font-size:0.875rem; color:#5a5148; margin-bottom:1.5rem; }

/* Líneas del carrito */
.cart-lines { display:flex; flex-direction:column; gap:1.25rem; }
.cart-line { display:flex; gap:0.85rem; padding-bottom:1.25rem; border-bottom:1px solid #F0E9D8; position:relative; }
.cart-line:last-child { border-bottom:none; padding-bottom:0; }
.cart-line-thumb { display:block; width:80px; height:80px; flex-shrink:0; background:#FAF6EE; border-radius:6px; overflow:hidden; }
.cart-line-thumb img { width:100%; height:100%; object-fit:cover; }
.cart-line-thumb-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:2rem; color:#d4af37; opacity:0.5; }
.cart-line-info { flex:1; min-width:0; padding-right:1.5rem; }
.cart-line-name { font-family:'Playfair Display',serif; font-size:1rem; color:#1a1814; text-decoration:none; line-height:1.2; display:block; margin-bottom:0.25rem; }
.cart-line-name:hover { color:#b8962f; }
.cart-line-variant { font-size:0.7rem; color:#5a5148; margin-bottom:0.5rem; line-height:1.4; }
.cart-line-bottom { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; }
.cart-line-price { font-family:'Playfair Display',serif; font-size:1rem; color:#1a1814; font-weight:500; }
.cart-line-remove { position:absolute; top:0; right:0; background:none; border:none; padding:0.4rem; cursor:pointer; color:#9a8f7e; transition:color 0.2s; }
.cart-line-remove:hover { color:#dc2626; }

/* Quantity selector compacto */
.cart-qty { display:inline-flex; align-items:center; border:1px solid #E5DCC4; border-radius:4px; overflow:hidden; }
.cart-qty button { background:#FAF6EE; border:none; padding:0.25rem 0.55rem; font-size:0.9rem; cursor:pointer; color:#1a1814; line-height:1; }
.cart-qty button:hover { background:#F0E9D8; }
.cart-qty span { min-width:1.75rem; text-align:center; font-size:0.8rem; padding:0.25rem 0; }

/* Summary en footer */
.cart-summary-row { display:flex; justify-content:space-between; align-items:baseline; padding:0.5rem 0; font-size:0.9rem; color:#1a1814; }
.cart-summary-row strong { font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:600; }
.cart-summary-note { font-size:0.7rem; color:#5a5148; text-align:center; margin:0.5rem 0; }
.cart-checkout-btn { width:100%; margin-top:0.75rem; justify-content:center; }
.cart-whatsapp-link { color:#25D366; text-decoration:none; font-weight:500; }
.cart-whatsapp-link:hover { text-decoration:underline; }

/* Toast cuando agregas al carrito */
.cart-toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(120%); display:flex; align-items:center; gap:0.5rem; padding:0.85rem 1.25rem; background:#1a1814; color:#FFFDF7; border-radius:8px; box-shadow:0 12px 32px rgba(26,24,20,0.3); z-index:80; transition:transform 0.35s ease-out; font-size:0.875rem; font-weight:500; }
.cart-toast.is-visible { transform:translateX(-50%) translateY(0); }
@media (max-width:640px) {
    .cart-toast { bottom:5rem; left:1rem; right:1rem; transform:translateY(120%); }
    .cart-toast.is-visible { transform:translateY(0); }
}