/* ========================================================= Satphone cart drawer — restyles Magento's minicart into a right-side slide-in drawer (VIER timings: 0.5s slide, 0.2s fade), dark-navy panel + orange accents. Loaded site-wide. ========================================================= */ :root { overflow-x: clip; } /* contain the off-screen drawer without breaking sticky */ /* Global so they resolve for the drawer once it's reparented onto */ :root { --spc-bg: #0d1b2f; --spc-bg-2: #12233c; --spc-line: rgba(255,255,255,.10); --spc-fg: #eaf0f8; --spc-muted: #9db0c8; --spc-accent: #f27221; --spc-accent2: #f79256; --spc-display: 'Arial Narrow','Roboto Condensed','Helvetica Neue',system-ui,sans-serif; /* Shared page gutter. The header, search overlay and footer are all full-bleed and inset by this much, so their contents share a left and right edge at any viewport width. Anything else that runs edge to edge should use it too — a literal value here is how the header and footer fell out of line before. */ --spc-gutter: clamp(1.5rem, 5vw, 5rem); } /* ---------- Cart icon (trigger) ---------- */ /* Sit neatly inside the Satphone header's flex action row */ .header-actions .minicart-wrapper { display: inline-flex; align-items: center; margin: 0; } .minicart-wrapper .action.showcart { position: relative; display: inline-flex; align-items: center; color: inherit; text-decoration: none; line-height: 0; } .minicart-wrapper .action.showcart::before { content: none !important; } /* drop blank-theme glyph */ .minicart-wrapper .action.showcart .sp-cart-ico svg { width: 22px; height: 22px; display: block; } .minicart-wrapper .action.showcart .text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .minicart-wrapper .action.showcart .counter.qty { position: absolute; top: -9px; right: -11px; min-width: 18px; height: 18px; padding: 0 5px; margin: 0; background: linear-gradient(90deg, var(--spc-accent), var(--spc-accent2)); color: #0a1526; border-radius: 99px; font-size: .64rem; font-weight: 700; line-height: 18px; text-align: center; } .minicart-wrapper .action.showcart .counter.qty.empty { display: none; } .minicart-wrapper .action.showcart .counter-label { display: none; } /* ---------- Backdrop ---------- */ .sp-cart-overlay { position: fixed; inset: 0; z-index: 8887; background: rgba(6, 14, 26, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility 0s linear .4s; } body.sp-cart-open .sp-cart-overlay { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s ease; } /* ---------- Drawer panel ---------- */ body .block-minicart { display: flex !important; flex-direction: column; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 33.333vw !important; min-width: 0 !important; max-width: 100vw; height: 100%; margin: 0 !important; padding: 0 !important; background: var(--spc-bg); color: var(--spc-fg); /* The panel is separated from the page by a hairline, not a shadow. border-left needs its own !important: the `border: 0 !important` above sets border-left-width to 0 as an important declaration, and an important one beats a normal one even later in the same rule — which is why this edge rendered at 0px before. */ border: 0 !important; border-left: 1px solid var(--spc-line) !important; /* No drop shadow anywhere on the drawer. `none` has to be important because styles-m.css sets `.minicart-wrapper .block-minicart` (0,2,0) — Luma's dropdown shadow — which outranks this rule's 0,1,1 for as long as the panel is still nested in the wrapper, i.e. until its first open reparents it to . Simply deleting a declaration here would have left that one showing. */ box-shadow: none !important; transform: translateX(100%); transition: transform .4s cubic-bezier(.4, 0, .2, 1); z-index: 8888; overflow: hidden; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .block-minicart::before, .block-minicart::after { display: none !important; } /* kill dropdown arrow */ body.sp-cart-open .block-minicart { transform: translateX(0); } /* Push the whole layout aside instead of overlaying it (matches the policy drawer). The drawer is reparented onto , so shifting .page-wrapper never moves it. */ .page-wrapper { transition: transform .4s cubic-bezier(.4, 0, .2, 1); } body.sp-cart-open .page-wrapper { transform: translateX(-33.333vw); } /* Row 1: injected drawer header — CART [X] */ .block-minicart .sp-cart-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 32px 32px 0; margin-bottom: 32px; border: 0; } .block-minicart .sp-cart-title { font-family: var(--spc-display); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: 1.1rem; } .block-minicart .sp-cart-close { background: none; border: 0; color: var(--spc-fg); cursor: pointer; padding: 4px; line-height: 0; transition: color .15s ease; } .block-minicart .sp-cart-close svg { width: 22px; height: 22px; display: block; } .block-minicart .sp-cart-close:hover { color: var(--spc-accent); } /* Content wrapper (Knockout) */ .block-minicart #minicart-content-wrapper { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .block-minicart .block-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0; } .block-minicart .block-title, .block-minicart .block-content > .action.close { display: none !important; } /* hide default "My Cart" title + close */ /* Row 2: item count — top/bottom border, 16px padding */ .block-minicart .items-total { flex: 0 0 auto; margin: 0 32px; padding: 16px 0; border-top: 1px solid var(--spc-line); border-bottom: 1px solid var(--spc-line); color: var(--spc-muted); font-size: .95rem; letter-spacing: .01em; } .block-minicart .items-total .count { color: var(--spc-fg); font-weight: 700; } /* Empty state */ .block-minicart .subtitle.empty { flex: 0 0 auto; padding: 3rem 32px; text-align: center; color: var(--spc-muted); font-size: .95rem; } .block-minicart .subtitle.empty::before { content: none; } /* Row 3: items list — 32px gap above */ .block-minicart .minicart-items-wrapper { flex: 1 1 auto; overflow-y: auto; margin: 32px 0 0; padding: 0 32px; border: 0; height: auto !important; } .block-minicart .minicart-items { list-style: none; margin: 0; padding: 0; } .block-minicart .minicart-items .product-item { padding: 0 0 24px; border: 0; } .block-minicart .minicart-items .product-item + .product-item { padding-top: 24px; border-top: 1px solid var(--spc-line); } .block-minicart .minicart-items .product-item > .product { display: flex; align-items: center; gap: 0; } /* Avatar 100 x 100 — same image-placeholder as the homepage (dashed box + picture icon + hatch). A real product photo covers it once uploaded. Sharp corners; 16px to the right. */ .block-minicart .product-item-photo { position: relative; flex: 0 0 100px; width: 100px; height: 100px; overflow: hidden; margin: 0 16px 0 0; border: 1px dashed rgba(255,255,255,.22); border-radius: 0; background-color: var(--spc-bg-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.32' stroke-width='1.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E"), repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, rgba(255,255,255,.05) 12px 24px); background-repeat: no-repeat, repeat; background-position: center, 0 0; background-size: 42px 42px, auto; } .block-minicart .product-item-photo .product-image-photo, .block-minicart .product-item-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; } /* Hide Magento's grey placeholder so our dashed box shows through */ .block-minicart .product-item-photo img[src*="placeholder"] { display: none; } /* Real product photo present → drop the dashed/icon treatment */ .block-minicart .product-item-photo:has(img:not([src*="placeholder"])) { border-style: solid; border-color: var(--spc-line); background-image: none; } /* Column 2: details (name + price) */ .block-minicart .product-item-details { flex: 1 1 auto; min-width: 0; position: static; padding: 0; } .block-minicart .product-item-name { margin: 0 0 .45rem; font-size: .95rem; line-height: 1.3; font-weight: 600; } .block-minicart .product-item-name a { color: var(--spc-fg); text-decoration: none; } .block-minicart .product-item-name a:hover { color: var(--spc-accent2); } .block-minicart .product-item-pricing .price { color: var(--spc-fg); font-weight: 700; font-size: .95rem; } /* Column 3: quantity — display value only (editing lives on the cart page) */ .block-minicart .details-qty { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin: 0 12px; min-width: 40px; } .block-minicart .details-qty .minicart-qty { color: var(--spc-fg); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; } /* Column 4: remove [x] */ .block-minicart .product-item-remove { flex: 0 0 auto; display: flex; align-items: center; } .block-minicart .product-item-remove .action.delete { display: inline-flex; padding: 4px; } .block-minicart .product-item-remove .action.delete span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .block-minicart .product-item-remove .action.delete::before { content: '\00d7'; font-family: inherit; font-size: 22px; line-height: 1; color: var(--spc-muted); transition: color .15s ease; } .block-minicart .product-item-remove .action.delete:hover::before { color: var(--spc-accent); } /* Total: {amount} */ .block-minicart .sp-cart-total { flex: 0 0 auto; display: flex; align-items: baseline; gap: .5rem; margin: 24px 32px 0; } .block-minicart .sp-cart-total-label { font-family: var(--spc-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--spc-fg); font-size: 1.05rem; } .block-minicart .sp-cart-total .subtotal { margin: 0; padding: 0; border: 0; display: flex; align-items: baseline; } .block-minicart .sp-cart-total .subtotal .label { display: none; } .block-minicart .sp-cart-total .subtotal .amount, .block-minicart .sp-cart-total .subtotal .price-container, .block-minicart .sp-cart-total .subtotal .price-wrapper { display: inline; } .block-minicart .sp-cart-total .subtotal .price { color: var(--spc-fg); font-family: var(--spc-display); font-weight: 700; font-size: 1.35rem; } /* Shipping note — 16px below total */ .block-minicart .sp-cart-shipping-note { flex: 0 0 auto; margin: 16px 32px 0; color: var(--spc-muted); font-size: .82rem; } /* Actions: [Edit Cart] [Proceed to Checkout] side by side */ .block-minicart .block-content > .actions { flex: 0 0 auto; display: flex; gap: 12px; margin: 24px 0 0; padding: 24px 32px 32px; } .block-minicart .block-content > .actions > .secondary { flex: 1 1 0; min-width: 0; margin: 0; } .block-minicart .block-content > .actions > .primary { flex: 1.35 1 0; min-width: 0; margin: 0; } /* Shared button shape — matches the homepage hero outline button (no radius, same height). This minicart pair is the SOURCE OF TRUTH for the button look; base.css mirrors it into the reusable .sp-btn classes for other pages. Keep the two in sync. */ .block-minicart .block-content > .actions .action.viewcart, .block-minicart #top-cart-btn-checkout { display: inline-flex; align-items: center; justify-content: center; gap: .5em; width: 100%; box-sizing: border-box; cursor: pointer; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: 0; padding: 15px 16px; line-height: 1; font-family: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: background .18s ease, color .18s ease, border-color .18s ease; } /* Checkout = hero button: transparent w/ orange border, fills orange on hover */ .block-minicart #top-cart-btn-checkout { background: transparent; color: var(--spc-fg); border-color: var(--spc-accent); } .block-minicart #top-cart-btn-checkout:hover { background: var(--spc-accent); color: #10203a; } .block-minicart #top-cart-btn-checkout .sp-btn-arrow { font-size: 1.05em; line-height: 0; transition: transform .18s ease; } .block-minicart #top-cart-btn-checkout:hover .sp-btn-arrow { transform: translate(2px, -2px); } /* Edit = muted outline, same size */ .block-minicart .block-content > .actions .action.viewcart { background: transparent; color: var(--spc-fg); border-color: var(--spc-line); } .block-minicart .block-content > .actions .action.viewcart:hover { border-color: var(--spc-accent); color: var(--spc-accent); } @media (max-width: 900px) { body .block-minicart { width: 85vw !important; } body.sp-cart-open .page-wrapper { transform: translateX(-85vw); } } @media (prefers-reduced-motion: reduce) { .block-minicart, .sp-cart-overlay, .page-wrapper { transition: none; } }