* {
    color: white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: black;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow-x: hidden;
}

/* Navbar Styles */
.navbar {
    position: sticky;
    top: 20px;
    z-index: 1000;
    background: rgba(13, 13, 13, 0.356);
    border-radius: 8px;
    margin: 16px auto;
    border: 1px solid rgba(255,255,255,0.18);
    max-width: 720px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(2px);
}

.navbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar-logo-img {
    height: 28px;
    width: 28px;
    border-radius: 4px;
    margin-right: 8px;
}

.navbar-logo-text {
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.navbar-links {
    display: flex;
    gap: 16px;
    align-items: center;
}

.navbar-links a {
    color: #fff;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    display: inline-block;
}

.navbar-cta {
    background: linear-gradient(259deg, #242424 0%, #101010 100%);
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.2);
    margin-left: 16px;
    display: inline-block;
}

.cart-icon {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: 0 8px;
}

.cart-icon i {
    font-size: 18px;
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
}

.mobile-cart {
    margin: 16px 0;
}

/* Hamburger Menu (Mobile) */
.navbar-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    z-index: 1200;
    background: none;
    border: none;
    cursor: pointer;
}

.navbar-hamburger .bar {
    display: block;
    width: 28px;
    height: 4px;
    margin: 4px 0;
    background: #fff;
    border-radius: 2px;
    transition: 0.3s;
}

/* Mobile menu overlay */
.navbar-mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: rgba(20,20,20,0.98);
    z-index: 1100;
    flex-direction: column;
    align-items: center;
    padding: 80px 0 30px 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    border-radius: 0 0 18px 18px;
}

.navbar-mobile-menu a {
    color: #fff;
    font-size: 1.3rem;
    margin: 18px 0;
    text-decoration: none;
    display: block;
    font-weight: 600;
}

/* Hero Section */
.hero-section {
    padding: 20px 20px;
}

.navbar-2 {
    background: linear-gradient(259deg, #242424 0%, #101010 100%);
    border-radius: 8px;
    margin: 16px auto;
    margin-top: 8%;
    border: 1px solid rgba(255,255,255,0.18);
    max-width: fit-content;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.navbar-2 p {
    color: white;
    font-size: 0.9rem;
}

.centered-title {
    text-align: center;
    margin: 48px auto 34px auto;
    font-family: "Outfit", "Outfit Placeholder", sans-serif;
    font-size: 3.7rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.06em;
    max-width: 900px;
    margin-top: 0;
    line-height: 60px;
}

.catchy-slang {
    color: #ada9a9;
    text-align: center;
    margin: 30px auto;
    font-size: 1.0rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    max-width: 550px;
}

/* Buttons */
.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    /* flex-wrap: wrap; */
}

.btn {
    margin: 10px 0;
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-outline {
    background-color: transparent;
    color: rgb(255, 255, 255);
    font-size: 0.9rem;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.3);
    border-image: initial;
    padding: 0.5rem 1rem;
}

.btn-primary {
    background-color: #fff;
    color: #000;
}

.btn-primary:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-secondary:hover {
    background-color: #fff;
    color: #000;
    transform: translateY(-2px);
}

/* Tech Stack List */
.tech-stack-list {
    opacity: 0.8;
    display: flex;
    gap: 2.5rem;
    align-items: center;
    font-size: 2.2rem;
    font-weight: bold;
    margin: 1.5rem auto;
    max-width: 1000px;
    overflow-x: auto;
    padding: 1.5rem 0 1.5rem 2rem;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 25%, #000 75%, rgba(0,0,0,0) 100%);
}

.tech-stack-list::-webkit-scrollbar {
    display: none;
}

.tech-stack-list span {
    white-space: nowrap;
    padding: 0.5rem 1.5rem;
    background: rgba(255,255,255,0.05);
    border-radius: 2rem;
    transition: background 0.2s;
}

.tech-stack-list span:hover {
    background: rgba(0,0,0,0.12);
}

/* Script Store Section */
.script-store {
    padding: 5rem clamp(1.25rem, 4vw, 4.5rem);
    background: rgba(255, 255, 255, 0.02);
}

.section-title {
    font-size: 1.9rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* The marketplace sits full-bleed like the footer/landing page: the shared
   .container keeps its 1200px cap elsewhere, but here the grid spans the
   page's full edge-padded width. */
.script-store .container {
    max-width: none;
    width: 100%;
    margin: 0;
}

/* The marketplace heading reads flush left, not centred. */
.script-store .section-title {
    text-align: left;
}

.filter-container {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 0 0 3rem 0;
    overflow-x: auto;
    padding: 1rem 0;
    scrollbar-width: none;
}

.filter-container::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}


.filter-btn.active, .filter-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.product-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 1.75rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(19px);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.product-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.product-image-container {
    position: relative;
    margin-bottom: 1rem;
}

.quick-view-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.product-card:hover .quick-view-btn {
    opacity: 1;
}

.quick-view-btn:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.view-full-details {
    padding: 0.75rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.view-full-details:hover {
    background: rgba(255,255,255,0.1);
}

.product-category {
    font-size: 0.8rem;
    color: #aaa;
    margin-bottom: 0.5rem;
}

.product-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.product-description {
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.product-price {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}

.product-actions {
    display: flex;
    gap: 0.5rem;
}

.add-to-cart {
    flex-grow: 1;
    padding: 0.75rem;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-to-cart:hover {
    background: #f0f0f0;
}

.view-details {
    /* padding: 0.75rem; */
    background: black;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.view-details:hover {
    background: rgba(255,255,255,0.1);
}

/* Cart Modal */
.cart-modal {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: rgba(20,20,20,0.98);
    backdrop-filter: blur(10px);
    z-index: 2000;
    padding: 2rem;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
}

.cart-modal.open {
    right: 0;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.cart-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.close-cart {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.cart-items {
    margin-bottom: 2rem;
}

.cart-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.cart-item-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.cart-item-details {
    flex-grow: 1;
}

.cart-item-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.cart-item-price {
    color: #aaa;
    font-size: 0.9rem;
}

.cart-item-remove {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.checkout-btn {
    width: 100%;
    padding: 1rem;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout-btn:hover {
    background: #f0f0f0;
}

.empty-cart {
    text-align: center;
    color: #aaa;
    padding: 2rem 0;
}

/* Product Modal */
.product-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.product-modal.open {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: rgba(30,30,30,0.95);
    border-radius: 16px;
    padding: 2rem;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-product-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.modal-product-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.modal-product-price {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #fff;
}

.modal-product-description {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.modal-product-features {
    margin-bottom: 2rem;
}

.modal-product-features h4 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.modal-product-features ul {
    padding-left: 1.5rem;
}

.modal-product-features li {
    margin-bottom: 0.5rem;
    color: #ccc;
}

.modal-actions {
    display: flex;
    gap: 1rem;
}

/* Footer */
.footer {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 3rem 0 1rem;
    margin-top: 50px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #fff;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    text-align: center;
    color: #aaa;
}

/* Responsive Styles */
@media screen and (max-width: 900px) {
    
    .navbar-hamburger {
        display: flex;
    }
    
    .centered-title {
        font-size: 2.5rem;
        line-height: 1.3;
    }
    
    .cart-modal {
        width: 100%;
        right: -100%;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filter-container {
        padding: 1rem 1rem;
    }
}

@media screen and (max-width: 600px) {
    .centered-title {
        font-size: 2rem;
    }
    
    .tech-stack-list {
        font-size: 1.5rem;
        gap: 1.5rem;
    }
    
    .hero-buttons {
        align-items: center;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .filter-container {
        padding: 1rem 0.5rem;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .filter-btn {
        padding: 0.5rem 1rem;
    }
}

.product-div {
    display: flex; 
    gap: 1.5rem; 
    align-items: center;
}

.product-div > img {
    width: 80px; 
    height: 80px;
    object-fit: cover; 
    border-radius: 8px;
}


@media screen and (max-width: 500px) {
    .product-div {
        display:grid; 
        gap: 1.5rem;
    }

    .product-div > img {
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width: 420px) {
    .script-store {
        padding: 20px 10px;
    }

    .hero-buttons {
        display: block;
        width: 100%;
    }

    .btn {
        width: 100%;
    }
    
    .filter-container {
        padding: 1rem 0.25rem;
        gap: 0.75rem;
    }
}

/* Very small screens: more compact filter buttons */
@media screen and (max-width: 320px) {
    .filter-btn {
        padding: 0.45rem 0.8rem;
        font-size: 0.85rem;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

  /* Footer */
  .footer {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 1rem 0 1rem;
    margin-top: 50px;
  }

  .footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 2rem;
  }

  .footer-section h3,
  .footer-section h4 {
    margin-bottom: 1rem;
  }

  .footer-section ul {
    list-style: none;
  }

  .footer-section ul li {
    margin-bottom: 0.5rem;
  }

  .footer-section a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .footer-section a:hover {
    color: #fff;
  }

  ul {
    padding: 0;
  }

  .social-links {
    display: flex;
    gap: 1rem;
  }

  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    text-align: center;
    color: #aaa;
  }

/* Currency Switcher Styles */
.currency-switcher {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 2rem;
}

.currency-btn {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-hover);
    background: transparent;
    color: var(--gray-1);
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.currency-btn:hover {
    background: var(--surface-2);
    color: var(--white);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.currency-btn.active {
    background: var(--accent-tint);
    color: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 768px) {
    .currency-switcher {
        justify-content: center;
        margin-bottom: 1.5rem;
    }
    
    .currency-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* ═════════════════════════════════════════════════════════════
   BRAND ALIGNMENT
   Appended layer that pulls the store onto the same design system
   as the landing page and blog, without rewriting the sheet above.
   Same tokens, same type ramp, same hairline-and-mono language.
   ═════════════════════════════════════════════════════════════ */
:root {
  --white: #ffffff;
  --gray-1: #e8e8e8;
  --gray-2: #b0b0b0;
  --gray-3: #6a6a6a;
  --border: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.28);
  --black: #0a0a0a;
  --black-2: #111111;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --font-main: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --transition: 0.25s ease;

  /* Base tokens carried over from the landing page so the store and
     dimroid.com resolve to the same monochrome ground. */
  --black-3: #161616;
  --gray-4: #2a2a2a;
  --radius-xl: 20px;

  /* Single accent. Light blue is the ONLY hue in the store: it marks
     interaction and selection (focus rings, chosen gateway, active step,
     links). Fills and primary actions stay monochrome so the accent never
     competes with the call to action. */
  --accent: #7fbcff;
  --accent-hover: #a5d3ff;
  --accent-ink: #06121f;
  --accent-tint: rgba(127, 188, 255, 0.10);
  --accent-line: rgba(127, 188, 255, 0.42);
  --focus-ring: 0 0 0 3px rgba(127, 188, 255, 0.32);

  /* Destructive only. Not a brand colour — it appears on hover/focus of a
     remove control and nowhere else, because a delete needs an affordance
     the accent must not supply. */
  --danger: #ff7a7a;
  --danger-tint: rgba(255, 122, 122, 0.10);

  /* Elevation on a near-black ground is expressed as translucency, not shadow. */
  --surface-1: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-3: rgba(255, 255, 255, 0.10);
  --inset: rgba(0, 0, 0, 0.28);
}

/* The sheet above sets Inter for body copy; the rest of the site is Outfit. */
body { font-family: var(--font-main); background: var(--black); color: var(--gray-1); }

/* ── top announce bar: mono kicker strip above the navbar ── */
.announce-bar {
  text-align: center;
  padding: 9px 2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--gray-3);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 10, 0.7);
}

/* ── eyebrow: mono, letterspaced, leading rule — as used sitewide ── */
.hero-badge, .store-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: none !important; border: 0 !important; padding: 0 !important;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gray-3);
}
.hero-badge::before, .store-badge::before {
  content: ''; display: block; width: 20px; height: 1px; background: var(--gray-3);
}
.hero-badge span, .store-badge span { display: none; }

/* ── section titles ── */
.section-title {
  font-family: var(--font-main); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1;
  letter-spacing: -0.025em; color: var(--white);
}

/* ── buttons: match .btn-primary / .btn-secondary ── */
.btn {
  font-family: var(--font-main); font-weight: 600; font-size: 0.88rem;
  border-radius: var(--radius-sm); padding: 0.85rem 1.6rem;
  transition: background var(--transition), border-color var(--transition), opacity var(--transition);
}
.btn-primary { background: var(--white); color: var(--black); border: 1px solid var(--white); }
.btn-primary:hover { opacity: 0.85; }
.btn-secondary { background: transparent; color: var(--white); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.06); }

/* ── filter + currency pills: monochrome, mono type (the currency toggle
      was the one place carrying an off-brand purple/blue gradient) ── */
.filter-btn, .currency-btn, .pagination-link {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px;
  color: var(--gray-2) !important;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 14px;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.filter-btn:hover, .currency-btn:hover, .pagination-link:hover {
  border-color: var(--border-hover) !important; color: var(--white) !important;
}
.filter-btn.active, .currency-btn.active, .pagination-link.active {
  background: var(--white) !important; color: var(--black) !important;
  border-color: var(--white) !important;
}

/* ── product cards: hairline grid, matching the blog's .card ── */
.product-card {
  background: var(--black) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}
.product-card:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.product-image-container { background: var(--black-2); }
.product-category {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-3);
}
.product-title {
  font-family: var(--font-main); font-weight: 600;
  font-size: 1.06rem; line-height: 1.35; color: var(--white);
  letter-spacing: -0.01em;
}
.product-description { font-size: 0.84rem; line-height: 1.7; color: var(--gray-2); }
.product-price {
  font-family: var(--font-main); font-weight: 700;
  font-size: 1.15rem; color: var(--white); letter-spacing: -0.02em;
}
.product-actions .btn { font-size: 0.8rem; padding: 0.7rem 1.2rem; }

/* ── the tech chips read as decoration, not UI; quieten them ── */
.tech-stack-list { opacity: 0.55; }

/* ── hero eyebrow: the store shipped this as a bordered pill with a green
      dot; the rest of the site uses a plain mono kicker (.hero-label). ── */
.navbar-2 {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 auto 1.6rem !important;
  display: inline-flex; align-items: center; gap: 8px;
}
.navbar-2 > div {                       /* the inline-styled dot */
  background-color: var(--gray-1) !important;
  width: 5px !important; height: 5px !important;
  margin-right: 0 !important;
}
.navbar-2 p {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-3) !important;
  margin: 0;
}

/* ── tech chips: shrink to the ticker language used on the landing page ── */
.tech-stack-list { opacity: 1; gap: 0.6rem; }
.tech-stack-list span {
  background: transparent !important;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.62rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-2) !important;
}
.tech-stack-list span i { font-size: 0.72rem; opacity: 0.7; }

/* Section headings sit centred here but left-aligned everywhere else on the
   site; keep the store's centring, just match the type. */
.centered-title {
  font-family: var(--font-main);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
}

/* ═════════════════════════════════════════════════════════════
   STORE HERO
   Mirrors the landing page hero: a two-column grid split 50/50,
   the Dimroid eyebrow up top, a two-tone headline, and pill CTAs
   with the same 3D depth and sweeping gloss. The art keeps its
   colour — a radial mask only fades the edges to transparency.
   ═════════════════════════════════════════════════════════════ */
.hero-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1rem clamp(1.25rem, 4vw, 4.5rem) 4rem;
  width: 100%;
  align-items: stretch;
  background: var(--black);
  text-align: left;
  overflow-x: clip;
  overflow-y: visible;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  align-items: stretch;
  gap: 2rem;
  width: 100%;
  flex: 1 1 auto;
}

.hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}

/* ── the art: a full-height grid cell, edges dissolved by a radial mask ── */
.hero-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(420px, 50vw, 720px);
  overflow: hidden;
  /* Fade the edges out to transparent so the artwork melts into the
     black page without changing its colour. */
  -webkit-mask-image: radial-gradient(ellipse 62% 64% at 50% 50%, #000 28%, rgba(0, 0, 0, 0) 76%);
          mask-image: radial-gradient(ellipse 62% 64% at 50% 50%, #000 28%, rgba(0, 0, 0, 0) 76%);
}

.hero-visual picture, .hero-visual img { display: block; width: 100%; height: 100%; }

.hero-visual img {
  object-fit: cover;
  object-position: 94% 50%;
}

/* ── eyebrow ── */
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--gray-3);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

.hero-label-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--white);
}

/* ── title ── */
.hero-section h1.hero-title {
  font-family: var(--font-main);
  font-size: clamp(2rem, 3.9vw, 4.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--white);
  margin: 0 0 1.8rem;
  max-width: 900px;
  text-align: left;
}

.hero-line { display: block; font-size:1.82em; }

.hero-section h1.hero-title .hero-dim { color: var(--gray-3); }

/* ── sub ── */
.hero-section .hero-sub {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--gray-2);
  max-width: 100%;
  margin: 0 0 2.6rem;
  text-align: left;
}

.hero-section .hero-sub strong {
  color: var(--white);
  font-weight: 600;
}

/* ── actions ── */
.hero-section .hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
.hero-section .btn { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }

/* Pill CTAs, raised off the page: a lit top edge, a shaded lower edge,
   a solid extruded lip underneath and an ambient drop — plus the gloss
   and sheen that cross them. Depth is built from black/white only. */
.hero-actions .btn-primary,
.hero-actions .btn-secondary {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 15px 32px;
  isolation: isolate;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s ease;
}

.hero-actions .btn-primary {
  background-image: linear-gradient(180deg, #ffffff 0%, var(--gray-1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(0, 0, 0, 0.18),
    0 5px 0 -1px var(--gray-2),
    0 12px 24px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(255, 255, 255, 0.10);
}

.hero-actions .btn-secondary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
  border-color: var(--border-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 4px rgba(0, 0, 0, 0.55),
    0 5px 0 -1px rgba(255, 255, 255, 0.07),
    0 12px 24px rgba(0, 0, 0, 0.6);
}

.hero-actions .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(0, 0, 0, 0.18),
    0 8px 0 -1px var(--gray-2),
    0 18px 32px rgba(0, 0, 0, 0.62),
    0 0 38px rgba(255, 255, 255, 0.18);
}

.hero-actions .btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 4px rgba(0, 0, 0, 0.55),
    0 8px 0 -1px rgba(255, 255, 255, 0.10),
    0 18px 32px rgba(0, 0, 0, 0.68);
}

.hero-actions .btn-primary:active,
.hero-actions .btn-secondary:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 0 -1px rgba(0, 0, 0, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Curved gloss over the top half — the giveaway that it's a domed surface. */
.hero-actions .btn-primary::before,
.hero-actions .btn-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  border-radius: 999px 999px 40% 40% / 999px 999px 22% 22%;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
}

.hero-actions .btn-secondary::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
}

/* Sweeping sheen on a loop. */
.hero-actions .btn-primary::after,
.hero-actions .btn-secondary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  transform: skewX(-18deg);
  pointer-events: none;
  animation: hero-sheen 3.6s 1.6s ease-in-out infinite;
}

.hero-actions .btn-primary::after {
  background: linear-gradient(120deg, transparent, rgba(0, 0, 0, 0.10), transparent);
}

.hero-actions .btn-secondary::after {
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

@keyframes hero-sheen {
  from { left: -100%; }
  to   { left: 150%; }
}

.btn-arrow {
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform var(--transition);
}

.hero-actions .btn:hover .btn-arrow { transform: translateX(4px); }

/* ── tags ── */
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; padding: 0; margin: 0;
}
.hero-tags li {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray-2);
}

@media (max-width: 991px) {
  /* Art leads and copy sits under it — the same call the landing page makes
     once its columns stack. */
  .hero-section {
    min-height: 0;
    padding: 0 0 3.5rem;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
  .hero-visual {
    height: clamp(320px, 78vw, 460px);
    min-height: 0;
    order: -1;
  }
  /* Phone: show the whole artwork instead of cropping to the right edge. */
  .hero-visual img {
    object-fit: contain;
    object-position: center;
  }
  .hero-copy {
    padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  }
  .hero-section .hero-sub { max-width: 100%; }

  /* CTAs and tags stay on one line and scroll sideways instead of wrapping. */
  .hero-section .hero-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.75rem;
  }
  .hero-section .hero-actions::-webkit-scrollbar { display: none; }
  .hero-section .hero-actions .btn { flex-shrink: 0; }

  .hero-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }
  .hero-tags::-webkit-scrollbar { display: none; }
  .hero-tags li { flex-shrink: 0; }
}


/* ============================================================
   Store top control bar + card-view toggle
   Currency switch sits left, the one/two view toggle sits right.
   Single-column ("one") is the default; the toggle opts into a
   compact two-per-row layout on phones.
   ============================================================ */
.store-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 2rem 0;
}

/* currency switch lives inside the bar now — align left, drop its old margin */
.store-controls .currency-switcher {
  margin-bottom: 0;
  justify-content: flex-start;
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.view-toggle-btn:hover { background: rgba(255, 255, 255, 0.12); }
.view-toggle-btn.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
}

/* The one/two toggle only changes anything on phones (desktop/tablet are
   already multi-column), so it's a mobile-only control. */
@media screen and (min-width: 601px) {
  .view-toggle-btn { display: none; }
}

/* ── Phone layout ──────────────────────────────────────────────
   Default is one card per row. Tapping the toggle adds .two-up to
   the grid, which switches to a compact two-per-row layout.       */
@media screen and (max-width: 600px) {
  .products-grid { grid-template-columns: 1fr; }

  .products-grid.two-up {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
  .products-grid.two-up .product-card {
    padding: 0.85rem;
    border-radius: 12px;
  }
  .products-grid.two-up .product-image-container { margin-bottom: 0.65rem; }
  .products-grid.two-up .product-image {
    height: 132px;
    border-radius: 9px;
    margin-bottom: 0.65rem;
  }
  .products-grid.two-up .product-category {
    font-size: 0.55rem;
    margin-bottom: 0.35rem;
  }
  .products-grid.two-up .product-title {
    font-size: 0.9rem;
    line-height: 1.25;
    margin-bottom: 0.35rem;
  }
  /* clamp to 3 lines so paired cards keep an even height */
  .products-grid.two-up .product-description {
    font-size: 0.72rem;
    line-height: 1.45;
    margin-bottom: 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .products-grid.two-up .product-price {
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }
  /* stack the two buttons — side by side is too tight at half width */
  .products-grid.two-up .product-actions { flex-direction: column; gap: 0.4rem; }
  .products-grid.two-up .product-actions .add-to-cart,
  .products-grid.two-up .product-actions .view-full-details,
  .products-grid.two-up .product-actions .view-details,
  .products-grid.two-up .product-actions .btn {
    width: 100%;
    padding: 0.55rem;
    font-size: 0.78rem;
  }
  .products-grid.two-up .quick-view-btn {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    opacity: 1;
    top: 7px;
    right: 7px;
  }
}

/* Small phones (<= 380px): tighten the two-up layout a touch more */
@media screen and (max-width: 380px) {
  .products-grid.two-up { gap: 0.6rem; }
  .products-grid.two-up .product-card { padding: 0.7rem; }
  .products-grid.two-up .product-image { height: 114px; }
  .products-grid.two-up .product-title { font-size: 0.84rem; }
  .products-grid.two-up .product-description { -webkit-line-clamp: 2; line-clamp: 2; }
}


/* ═════════════════════════════════════════════════════════════
   CART & CHECKOUT
   Components shared by /store/cart/ and /store/checkout/.
   Every colour resolves to a token above — no literals here, so the
   palette can be retuned in one place.
   ═════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────── */
.shop-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 104px 20px 88px;
}
.shop-page--narrow { max-width: 880px; }

.shop-head { margin-bottom: 2.25rem; }
.shop-head h1 {
    font-family: var(--font-main);
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 0.5rem;
}
.shop-head p {
    color: var(--gray-2);
    font-size: 0.975rem;
    margin: 0;
}

/* ── Step rail ──────────────────────────────────────────────────
   Numbered because cart → details → payment is a genuine sequence
   the shopper moves through, not decoration. */
.steps {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.steps__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--gray-3);
    white-space: nowrap;
}
.steps__num {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-size: 0.65rem;
}
.steps__item.is-done { color: var(--gray-2); }
.steps__item.is-done .steps__num {
    border-color: var(--border-hover);
    color: var(--gray-1);
}
.steps__item.is-current { color: var(--accent); }
.steps__item.is-current .steps__num {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent);
}
.steps__sep {
    width: 18px;
    height: 1px;
    background: var(--border);
    flex-shrink: 0;
}

/* ── Layout: form + summary ─────────────────────────────────── */
.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    gap: 1.75rem;
    align-items: start;
}

/* ── Panel ──────────────────────────────────────────────────── */
.panel {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.85rem;
}
.panel__title {
    font-family: var(--font-main);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 1.4rem;
}

/* ── Line item ──────────────────────────────────────────────── */
.line-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    transition: border-color var(--transition), opacity var(--transition);
}
.line-item:hover { border-color: var(--border-hover); }
.line-item.is-leaving { opacity: 0; }

.line-item__thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--black-3);
    display: block;
}
.line-item__body { min-width: 0; }
.line-item__name {
    font-family: var(--font-main);
    font-size: 0.975rem;
    font-weight: 500;
    line-height: 1.32;
    margin: 0 0 0.55rem;
}
.line-item__meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.line-item__unit {
    font-family: var(--font-mono);
    font-size: 0.775rem;
    color: var(--gray-3);
    font-variant-numeric: tabular-nums;
}
.line-item__side {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.line-item__total {
    font-family: var(--font-mono);
    font-size: 0.975rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Compact variant for the checkout summary column */
.line-item--compact {
    padding: 0.9rem 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    margin-bottom: 0;
    grid-template-columns: 44px minmax(0, 1fr) auto;
}
.line-item--compact:hover { border-color: var(--border); }
.line-item--compact .line-item__thumb { width: 44px; height: 44px; }
.line-item--compact .line-item__name { font-size: 0.9rem; margin-bottom: 0.4rem; }
.line-item--compact .line-item__side { flex-direction: column; align-items: flex-end; gap: 0.4rem; }

/* ── Quantity stepper ───────────────────────────────────────────
   One control, neutral by default. The old orange/green pair read as
   two unrelated status buttons; a stepper reads as one input. */
.qty {
    display: inline-flex;
    align-items: stretch;
    background: var(--inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.qty__btn {
    width: 34px;
    min-height: 34px;
    display: grid;
    place-items: center;
    background: none;
    border: none;
    color: var(--gray-2);
    font-family: var(--font-main);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.qty__btn:hover:not(:disabled) { background: var(--surface-2); color: var(--white); }
.qty__btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    color: var(--white);
}
.qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qty__val {
    min-width: 38px;
    display: grid;
    place-items: center;
    padding: 0 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--white);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.qty--sm .qty__btn { width: 30px; min-height: 30px; font-size: 0.95rem; }
.qty--sm .qty__val { min-width: 32px; font-size: 0.8rem; }

/* ── Icon button (destructive) ──────────────────────────────── */
.icon-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--gray-3);
    font-size: 0.8rem;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.icon-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-tint);
}
.icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    color: var(--white);
}

/* ── Order summary ──────────────────────────────────────────── */
.summary { position: sticky; top: 96px; }
.summary__rows { margin-top: 1.4rem; }
.summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.875rem;
    color: var(--gray-2);
}
.summary__row .money { color: var(--gray-1); }
.summary__row--muted { font-size: 0.8rem; color: var(--gray-3); }
.summary__row--muted .money { color: var(--gray-3); }
.summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: 0.9rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-hover);
}
.summary__total-label {
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 500;
}
.summary__total-value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--white);
}

.money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Note (informational) ───────────────────────────────────── */
.note {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.4rem;
    padding: 0.9rem 1rem;
    background: var(--accent-tint);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-sm);
}
.note__icon { color: var(--accent); font-size: 0.85rem; margin-top: 0.15rem; }
.note__title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent);
    margin: 0 0 0.15rem;
}
.note__body { font-size: 0.775rem; color: var(--gray-2); margin: 0; line-height: 1.5; }

/* ── Form controls ──────────────────────────────────────────── */
.field { margin-bottom: 1.35rem; }
.field__label {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-1);
}
.field__req { color: var(--accent); }
.input {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 0.9rem;
    background: var(--inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-family: var(--font-main);
    font-size: 0.95rem;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input::placeholder { color: var(--gray-3); }
.input:hover { border-color: var(--border-hover); }
.input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--black-3);
    box-shadow: var(--focus-ring);
}
.input[aria-invalid="true"] { border-color: var(--danger); }
.field__hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.775rem;
    color: var(--gray-3);
}
.field__error {
    display: none;
    margin-top: 0.4rem;
    font-size: 0.775rem;
    color: var(--danger);
}
.field.has-error .field__error { display: block; }

/* ── Gateway picker ─────────────────────────────────────────── */
.gw-group { display: grid; gap: 0.65rem; margin-bottom: 1.6rem; }
.gw {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.gw:hover { background: var(--surface-2); border-color: var(--border-hover); }
.gw.is-selected { border-color: var(--accent); background: var(--accent-tint); }
.gw:focus-within { box-shadow: var(--focus-ring); }
.gw__radio {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin: 0.18rem 0 0;
    border: 1px solid var(--border-hover);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.gw__radio:checked {
    border-color: var(--accent);
    border-width: 5px;
}
.gw__body { min-width: 0; flex: 1; }
.gw__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.28rem;
}
.gw__badge {
    padding: 0.1rem 0.45rem;
    background: var(--surface-3);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-2);
}
.gw.is-selected .gw__badge { background: var(--accent-tint); color: var(--accent); }
.gw__desc { font-size: 0.8rem; color: var(--gray-3); line-height: 1.45; }

/* ── Method chips ───────────────────────────────────────────── */
.methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.6rem;
}
.methods__label {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-3);
    margin-bottom: 0.15rem;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.34rem 0.65rem;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.775rem;
    color: var(--gray-2);
}
.chip i { font-size: 0.7rem; color: var(--gray-3); }

/* ── Pay button ─────────────────────────────────────────────── */
.btn-pay {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.9rem 1.5rem;
    background: var(--white, #ffffff);
    /* Hardcoded fallback: the body sets white text, so if --black ever fails
       to resolve the label would vanish into the white button. */
    color: var(--black, #0a0a0a);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), opacity var(--transition);
}
.btn-pay:hover:not(:disabled) { background: var(--gray-1); transform: translateY(-1px); }
.btn-pay:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-pay:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
/* Explicit black on the button and both children — the global `* { color:
   white }` reset would otherwise paint the label white on the white button.
   Stated directly (not via inherit or a var) so nothing can leave it white. */
.btn-pay,
.btn-pay i,
.btn-pay span { color: #0a0a0a; }
.btn-pay i { font-size: 0.85rem; }

.secured {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
    font-size: 0.775rem;
    color: var(--gray-3);
}
.secured i { color: var(--accent); }

/* ── Empty state ────────────────────────────────────────────── */
.empty {
    text-align: center;
    padding: 4.5rem 1.5rem;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.empty__icon {
    font-size: 1.6rem;
    color: var(--gray-3);
    margin-bottom: 1.1rem;
}
.empty__title {
    font-family: var(--font-main);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.45rem;
}
.empty__body {
    color: var(--gray-3);
    font-size: 0.9rem;
    margin: 0 auto 1.85rem;
    max-width: 34ch;
}

/* ── Cart foot ──────────────────────────────────────────────── */
.cart-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.75rem;
    align-items: start;
    margin-top: 2rem;
}
.cart-foot__aside {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.cart-foot__note {
    font-size: 0.8rem;
    color: var(--gray-3);
    line-height: 1.6;
}
.cart-foot__note a { color: var(--accent); text-decoration: none; }
.cart-foot__note a:hover { text-decoration: underline; }

/* ── Toast container (shared with main.js) ──────────────────── */
#toast-container { pointer-events: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 940px) {
    .checkout-grid,
    .cart-foot { grid-template-columns: minmax(0, 1fr); }
    .summary { position: static; }
    .cart-foot__aside { order: -1; }
}
@media (max-width: 560px) {
    .shop-page { padding: 88px 16px 72px; }
    .panel { padding: 1.35rem; }
    .line-item {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 0.85rem;
        row-gap: 1rem;
    }
    .line-item__thumb { width: 48px; height: 48px; }
    .line-item__side {
        grid-column: 1 / -1;
        justify-content: space-between;
        width: 100%;
    }
    .line-item--compact { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .line-item--compact .line-item__side {
        grid-column: auto;
        width: auto;
        justify-content: flex-end;
    }
    .summary__total-value { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .line-item, .qty__btn, .icon-btn, .input, .gw, .btn-pay { transition: none; }
    .btn-pay:hover:not(:disabled) { transform: none; }
}

/* ── Flash messages ─────────────────────────────────────────── */
.flash-stack {
    position: fixed;
    top: 84px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    pointer-events: none;
}
.flash {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: min(360px, calc(100vw - 40px));
    padding: 0.8rem 1rem;
    background: var(--black-2);
    border: 1px solid var(--accent-line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--gray-1);
    font-size: 0.85rem;
    line-height: 1.45;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    animation: slideIn 0.28s ease;
}
.flash i { color: var(--accent); font-size: 0.8rem; flex-shrink: 0; }

@keyframes slideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(16px); }
}

/* Alias: main.js toggles `selected` on the gateway option. */
.gw.selected { border-color: var(--accent); background: var(--accent-tint); }
.gw.selected .gw__badge { background: var(--accent-tint); color: var(--accent); }

/* Gateway description is a span inside a flex item — make it own its line. */
.gw__desc { display: block; }

/* Cart summary sits flush at the top of its own card. */
.summary__rows--flush { margin-top: 0; }

/* The cart's checkout CTA is an <a>, not a <button>. */
a.btn-pay { text-decoration: none; margin-top: 1.35rem; }

/* Chip "New" flag — accent, for a recently added method (e.g. Zap). */
.chip__new {
    margin-left: 0.1rem;
    padding: 0.04rem 0.32rem;
    background: var(--accent-tint);
    border: 1px solid var(--accent-line);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
/* Chips hidden for the current gateway. */
.chip[hidden] { display: none; }