/* RESET & BASE */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', sans-serif;
            transition: background 0.3s, color 0.3s;
            padding-bottom: 64px; /* clearance for the fixed footer bar */
        }

        /* DISPLAY FONT — brand, headings, prices */
        .brand-name, .page-heading, .item-total, .summary-total-value {
            font-family: 'Poppins', 'Segoe UI', sans-serif;
        }

        /* THEME — follows OS/browser setting. Dark is the default
           (including browsers that don't support prefers-color-scheme);
           light overrides apply only when the system is explicitly light. */
        body { background: #0a0a0a; color: #ffffff; }
        @media (prefers-color-scheme: light) {
            body { background: #f5f5f5; color: #111111; }
        }

        /* ANNOUNCEMENT BAR */
        .announce { background: #ff2d87; padding: 8px 0; overflow: hidden; white-space: nowrap; }
        .announce-inner { display: inline-block; animation: marquee 22s linear infinite; white-space: nowrap; font-size: 11px; letter-spacing: 2px; color: #fff; font-weight: 600; }
        @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* HEADER */
        header { padding: 0 30px; position: sticky; top: 0; z-index: 100; transition: background 0.3s, border-color 0.3s; }
        header { background: #111111; border-bottom: 1px solid #222222; }
        @media (prefers-color-scheme: light) {
            header { background: #ffffff; border-bottom: 1px solid #eeeeee; }
        }
        .header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 70px; }
        .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
        .brand-logo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #ff2d87; }
        .brand-name { font-size: 20px; font-weight: 700; letter-spacing: 3px; line-height: 1; transition: color 0.3s; }
        .brand-name { color: #ffffff; }
        @media (prefers-color-scheme: light) {
            .brand-name { color: #111111; }
        }
        .brand-sub { font-size: 9px; color: #ff2d87; letter-spacing: 3px; margin-top: 2px; }
        nav { display: flex; gap: 32px; }
        nav a { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; font-weight: 400; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
        nav a { color: #aaaaaa; }
        @media (prefers-color-scheme: light) {
            nav a { color: #777777; }
        }
        nav a:hover, nav a.active { color: #ff2d87; border-bottom-color: #ff2d87; }
        .header-right { display: flex; align-items: center; gap: 14px; }
        .cart-btn { display: flex; align-items: center; gap: 8px; border: 1px solid #ff2d87; border-radius: 25px; padding: 8px 20px; cursor: pointer; background: transparent; text-decoration: none; font-family: 'Segoe UI', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 2px; transition: background 0.2s, color 0.2s; }
        .cart-btn { color: #ffffff; }
        @media (prefers-color-scheme: light) {
            .cart-btn { color: #111111; }
        }
        .cart-btn:hover, .cart-btn.active { background: #ff2d87; color: #ffffff !important; }
        .cart-btn:hover svg, .cart-btn.active svg { stroke: #ffffff; }
        .cart-icon { width: 16px; height: 16px; stroke: #ff2d87; fill: none; stroke-width: 2; transition: stroke 0.2s; }
        .cart-badge { background: #ff2d87; color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }

        /* PAGE */
        .page { max-width: 900px; margin: 0 auto; padding: 50px 20px 80px; }
        .page-tag { font-size: 11px; letter-spacing: 4px; color: #ff2d87; font-weight: 600; text-transform: uppercase; margin-bottom: 6px; }
        .page-heading { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin-bottom: 35px; }
        .cart-count-label { font-size: 1rem; font-weight: 400; color: #555; }

        /* CART TABLE */
        .cart-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
        .cart-table th { text-align: left; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 0 0 14px; }
        .cart-table th { color: #444; border-bottom: 1px solid #1e1e1e; }
        @media (prefers-color-scheme: light) {
            .cart-table th { color: #bbb; border-bottom: 1px solid #e5e5e5; }
        }
        .cart-table td { padding: 18px 0; vertical-align: middle; }
        .cart-table td { border-bottom: 1px solid #141414; }
        @media (prefers-color-scheme: light) {
            .cart-table td { border-bottom: 1px solid #eeeeee; }
        }

        .item-info { display: flex; align-items: center; gap: 14px; }
        .item-img { width: 62px; height: 62px; border-radius: 8px; object-fit: cover; border: 1px solid; }
        .item-img { border-color: #2a1020; }
        @media (prefers-color-scheme: light) {
            .item-img { border-color: #f0d0de; }
        }
        .item-img-placeholder { width: 62px; height: 62px; border-radius: 8px; background: linear-gradient(135deg, #1a0a12, #200d18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .item-img-placeholder svg { width: 24px; height: 24px; stroke: #ff2d87; fill: none; stroke-width: 1.6; }
        .item-name { font-size: 15px; font-weight: 600; }
        .item-name { color: #fff; }
        @media (prefers-color-scheme: light) {
            .item-name { color: #111; }
        }
        .item-unit { font-size: 12px; color: #666; margin-top: 3px; }

        .item-price { font-size: 14px; }
        .item-price { color: #aaa; }
        @media (prefers-color-scheme: light) {
            .item-price { color: #777; }
        }

        .qty-wrap { display: flex; align-items: center; gap: 8px; }
        .qty-btn { width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s; border: 1px solid; }
        .qty-btn { background: #1a1a1a; border-color: #2a2a2a; color: #fff; }
        @media (prefers-color-scheme: light) {
            .qty-btn { background: #f5f5f5; border-color: #ddd; color: #111; }
        }
        .qty-btn:hover { border-color: #ff2d87 !important; color: #ff2d87 !important; }
        .qty-num { font-size: 15px; font-weight: 600; min-width: 24px; text-align: center; }

        .item-total { font-size: 17px; font-weight: 700; }
        .item-total { color: #fff; }
        @media (prefers-color-scheme: light) {
            .item-total { color: #111; }
        }

        .remove-btn { background: none; border: none; font-size: 18px; cursor: pointer; padding: 4px 8px; transition: color 0.2s; }
        .remove-btn { color: #333; }
        @media (prefers-color-scheme: light) {
            .remove-btn { color: #ccc; }
        }
        .remove-btn:hover { color: #ff2d87; }

        /* SUMMARY */
        .summary-wrap { display: flex; justify-content: flex-end; }
        .summary-box { border-radius: 12px; padding: 28px; width: 100%; max-width: 380px; }
        .summary-box { background: #161616; border: 1px solid #222; }
        @media (prefers-color-scheme: light) {
            .summary-box { background: #ffffff; border: 1px solid #e5e5e5; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
        }
        .summary-title { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 14px; }
        .summary-title { color: #fff; border-bottom: 1px solid #222; }
        @media (prefers-color-scheme: light) {
            .summary-title { color: #111; border-bottom: 1px solid #eee; }
        }
        .summary-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; }
        .summary-row { color: #666; }
        @media (prefers-color-scheme: light) {
            .summary-row { color: #999; }
        }
        .discount-tag { color: #ff2d87 !important; font-weight: 600; }
        .summary-total { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 14px; }
        .summary-total { border-top: 1px solid #2a2a2a; }
        @media (prefers-color-scheme: light) {
            .summary-total { border-top: 1px solid #eee; }
        }
        .summary-total-label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
        .summary-total-value { font-size: 22px; font-weight: 700; color: #ff2d87; }

        /* Shipping bar */
        .shipping-bar { margin: 12px 0; }
        .shipping-bar p { font-size: 12px; margin-bottom: 8px; }
        .shipping-bar p { color: #555; }
        @media (prefers-color-scheme: light) {
            .shipping-bar p { color: #aaa; }
        }
        .bar-bg { border-radius: 4px; height: 5px; }
        .bar-bg { background: #2a2a2a; }
        @media (prefers-color-scheme: light) {
            .bar-bg { background: #eee; }
        }
        .bar-fill { width: var(--shipping-progress); background: #ff2d87; height: 100%; border-radius: 4px; transition: width 0.4s; }

        .btn-checkout { display: block; width: 100%; background: #ff2d87; color: #fff; border: none; border-radius: 30px; padding: 15px; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; font-family: 'Segoe UI', sans-serif; margin-top: 20px; transition: background 0.2s; text-decoration: none; text-align: center; }
        .btn-checkout:hover { background: #ff6aaa; }
        .btn-continue { display: block; text-align: center; font-size: 12px; letter-spacing: 2px; text-decoration: none; margin-top: 12px; text-transform: uppercase; transition: color 0.2s; }
        .btn-continue { color: #444; }
        @media (prefers-color-scheme: light) {
            .btn-continue { color: #bbb; }
        }
        .btn-continue:hover { color: #ff2d87; }

        /* EMPTY */
        .empty { text-align: center; padding: 80px 20px; }
        .empty { color: #444; }
        @media (prefers-color-scheme: light) {
            .empty { color: #bbb; }
        }
        .empty-icon { width: 56px; height: 56px; stroke: currentColor; fill: none; stroke-width: 1.5; margin: 0 auto 20px; }
        .empty p { font-size: 16px; margin-bottom: 24px; }
        .btn-shop { display: inline-block; background: #ff2d87; color: #fff; text-decoration: none; padding: 12px 32px; border-radius: 30px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; transition: background 0.2s; }
        .btn-shop:hover { background: #ff6aaa; }

        /* FOOTER — fixed bar, always visible, matches other pages */
        .site-footer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 50;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            column-gap: 12px;
            padding: 12px 20px;
            border-top: 1px solid #ff2d87;
            transition: background 0.3s;
        }
        .site-footer { background: #111111; }
        @media (prefers-color-scheme: light) {
            .site-footer { background: #ffffff; }
        }
        .footer-brand-mini { display: flex; align-items: center; gap: 8px; justify-self: start; }
        .footer-logo-mini {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
            border: 1.5px solid #ff2d87;
        }
        .footer-brand-mini span {
            font-family: 'Poppins', 'Segoe UI', sans-serif;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        .footer-brand-mini span { color: #ffffff; }
        @media (prefers-color-scheme: light) {
            .footer-brand-mini span { color: #111111; }
        }
        .footer-copy-mini {
            justify-self: center;
            font-size: 10px;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }
        .footer-copy-mini { color: #666666; }
        @media (prefers-color-scheme: light) {
            .footer-copy-mini { color: #999999; }
        }
        .footer-social-mini { display: flex; gap: 14px; justify-self: end; }
        .footer-social-mini a { display: flex; color: #999999; transition: color 0.2s; }
        @media (prefers-color-scheme: light) {
            .footer-social-mini a { color: #666666; }
        }
        .footer-social-mini a:hover { color: #ff2d87; }
        .footer-social-mini svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }

        /* MOBILE */
        @media (max-width: 768px) {
            header { padding: 0 15px; }
            .header-inner { height: 65px; gap: 10px; }
            .brand-logo { width: 38px; height: 38px; }
            .brand-name { font-size: 16px; letter-spacing: 2px; }
            .brand-sub { font-size: 7px; }
            nav { gap: 12px; }
            nav a { font-size: 11px; letter-spacing: 1px; }
            .header-right { gap: 8px; }
            .cart-btn { padding: 6px 12px; font-size: 11px; }
            .cart-btn span:nth-child(2) { display: none; }
            .cart-badge { width: 18px; height: 18px; font-size: 9px; }
            .announce { padding: 5px 0; }
            .announce-inner { font-size: 9px; letter-spacing: 1px; }
            .page { padding: 30px 15px 40px; }
            .cart-table th, .cart-table td { padding: 12px 0; }
            .item-img, .item-img-placeholder { width: 48px; height: 48px; }
            .item-img-placeholder svg { width: 18px; height: 18px; }
            .item-name { font-size: 13px; }
            .summary-box { padding: 20px; }

            /* Footer — slightly tighter on mobile */
            body { padding-bottom: 56px; }
            .site-footer { padding: 10px 15px; }
            .footer-brand-mini span { font-size: 10px; }
            .footer-social-mini { gap: 12px; }
        }

        @media (max-width: 480px) {
            .footer-copy-mini { display: none; }
            header { padding: 0 10px; }
            .header-inner { height: 60px; }
            .brand-logo { width: 32px; height: 32px; }
            .brand-name { font-size: 14px; }
            .announce-inner { font-size: 8px; }
            .page { padding: 20px 10px 30px; }
        }