/* ==========================================================================
   RoasTronix V2 - Shop Page Styles
   ========================================================================== */

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

/* Hero */
.shop-hero {
    padding: 80px 0 60px;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(160, 28, 46, 0.15) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.shop-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(160, 28, 46, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.shop-hero .section-label {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(160, 28, 46, 0.1);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-gold);
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.shop-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.shop-hero-desc {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Product Grid (fallback catalog) */
.shop-catalog {
    padding: 80px 0;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.shop-product-card {
    background: var(--bg-dark-card);
    border: 1px solid var(--border-dark);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.3s;
}

.shop-product-card:hover {
    border-color: var(--primary-gold);
    transform: translateY(-5px);
}

.shop-product-image {
    height: 260px;
    overflow: hidden;
}

.shop-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}

.shop-product-card:hover .shop-product-image img {
    transform: scale(1.05);
}

.shop-product-placeholder {
    background: linear-gradient(135deg, rgba(160, 28, 46, 0.1) 0%, rgba(10, 10, 10, 0.5) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.shop-product-info {
    padding: 25px;
}

.shop-product-badge {
    display: none !important;
}

.shop-product-info h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.shop-product-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 15px;
}

.shop-product-price {
    font-size: 0.9rem;
    color: var(--primary-gold);
    font-weight: 700;
    margin-bottom: 18px;
}

.shop-product-actions {
    display: flex;
    gap: 10px;
}

.shop-product-actions .btn-primary,
.shop-product-actions .btn-secondary {
    flex: 1;
    padding: 10px;
    font-size: 0.78rem;
    text-align: center;
}

/* Leasing Section */
.shop-leasing {
    padding: 0 0 80px;
}

.shop-leasing-card {
    background: var(--bg-dark-card);
    border: 1px solid var(--border-dark);
    border-radius: 24px;
    padding: 50px;
    text-align: center;
}

.shop-leasing-card h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    margin-bottom: 15px;
}

.shop-leasing-card > p {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto 35px;
    line-height: 1.7;
}

.shop-leasing-features {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-bottom: 30px;
}

.shop-leasing-feature {
    text-align: center;
}

.shop-leasing-feature strong {
    display: block;
    font-size: 1.3rem;
    color: var(--primary-gold);
    margin-bottom: 5px;
}

.shop-leasing-feature span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   Shopify Dark Theme Integration
   Supports BOTH:
   - Official Shopify WP plugin (BEM classes + ::part() for Shadow DOM)
   - ShopWP plugin (`.shopwp`, `.wps-*` classes, React Modal)
   ========================================================================== */

.shop-shopify {
    padding: 80px 0;
}

/* ==========================================================================
   A) Official Shopify Plugin — BEM classes + ::part() selectors
   ========================================================================== */

/* ---------- Product Cards ---------- */

.product-card {
    background: var(--bg-dark-card, #161616) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 20px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card:hover {
    border-color: var(--primary-gold, #a01c2e) !important;
    transform: translateY(-5px);
}

.product-card__title {
    color: var(--text-primary, #ffffff) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}

.product-card__price {
    color: var(--text-primary, #ffffff) !important;
    font-weight: 700 !important;
}

.product-card__image-container {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Quick Shop hover button — remove red bg, match dark theme */
.product-card__hover-button,
.product-card__hover-button__button,
.product-card__hover-button__button__text,
[class*="product-card__hover-button"] {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
}

/* ---------- Product Modal (Quick View) ---------- */

.product-modal {
    background: var(--bg-dark-card, #161616) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 20px !important;
    color: var(--text-primary, #ffffff) !important;
}

.product-modal * {
    color: var(--text-primary, #ffffff) !important;
}

.product-modal__title {
    color: var(--text-primary, #ffffff) !important;
}

.product-modal__price-container,
.product-modal__price-container * {
    color: var(--text-primary, #ffffff) !important;
}

.product-modal__compare-price {
    color: var(--text-muted, #808080) !important;
}

.product-modal__description,
.product-modal__description-text {
    color: var(--text-secondary, #b3b3b3) !important;
}

.product-modal__add-button {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
}

/* Buy Now button — red CTA to stand out */
.product-modal__buy-button,
.product-buy-now__button {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

.product-modal__close {
    color: var(--text-secondary, #b3b3b3) !important;
}

.product-modal__close:hover {
    color: var(--text-primary, #ffffff) !important;
}

/* Modal variant labels */
.product-modal label,
.product-modal__variant-label {
    color: var(--text-primary, #ffffff) !important;
}

/* Modal quantity controls */
.product-modal__quantity-input,
.product-modal input[type="number"] {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 8px !important;
}

.product-modal__quantity-button,
.product-modal button[aria-label*="quantity"],
.product-modal button[aria-label*="Decrease"],
.product-modal button[aria-label*="Increase"] {
    color: var(--text-primary, #ffffff) !important;
    border-color: var(--border-dark, #2a2a2a) !important;
    background: transparent !important;
}

/* Modal select/dropdown */
.product-modal select {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 8px !important;
}

/* Modal dividers */
.product-modal hr {
    border-color: var(--border-dark, #2a2a2a) !important;
}

/* ---------- Single Product Detail Page ---------- */

.inner-page .product-detail,
.inner-page .product-detail * {
    color: var(--text-primary, #ffffff) !important;
}

.inner-page label {
    color: var(--text-primary, #ffffff) !important;
}

.inner-page select {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
}

.inner-page input[type="number"] {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
}

/* ---------- <shopify-cart> — Shadow DOM via ::part() ---------- */

shopify-cart {
    z-index: 99998 !important;
}

shopify-cart::part(toggle) {
    z-index: 99999 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background-color: var(--bg-dark-card, #161616) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    color: var(--text-primary, #ffffff) !important;
}

shopify-cart::part(toggle):hover {
    border-color: var(--primary-gold, #a01c2e) !important;
    box-shadow: 0 4px 25px rgba(160, 28, 46, 0.3) !important;
}

shopify-cart::part(toggle-count) {
    background: var(--primary-gold, #a01c2e) !important;
    color: #ffffff !important;
}

shopify-cart::part(toggle-icon) {
    fill: var(--text-primary, #ffffff) !important;
    color: var(--text-primary, #ffffff) !important;
}

shopify-cart::part(dialog) {
    background: var(--bg-dark-card, #161616);
    color: var(--text-primary, #ffffff);
    border: 1px solid var(--border-dark, #2a2a2a);
    border-radius: 16px;
}

shopify-cart::part(header) {
    color: var(--text-primary, #ffffff);
}

shopify-cart::part(title) {
    color: var(--text-primary, #ffffff);
}

shopify-cart::part(close),
shopify-cart::part(close-button),
shopify-cart::part(close-icon),
shopify-cart::part(dismiss) {
    color: var(--text-primary, #ffffff) !important;
    fill: var(--text-primary, #ffffff) !important;
    stroke: var(--text-primary, #ffffff) !important;
}

shopify-cart::part(close):hover,
shopify-cart::part(close-button):hover {
    color: var(--text-primary, #ffffff) !important;
}

shopify-cart::part(footer) {
    border-top: 1px solid var(--border-dark, #2a2a2a);
    color: var(--text-primary, #ffffff);
}

shopify-cart::part(primary-button) {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522));
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

shopify-cart::part(secondary-button) {
    background: transparent !important;
    color: var(--text-primary, #ffffff) !important;
    fill: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 12px;
}

shopify-cart::part(tertiary-button) {
    color: var(--primary-gold, #a01c2e);
}

shopify-cart::part(line-heading) {
    color: var(--text-primary, #ffffff);
}

shopify-cart::part(line-price) {
    color: var(--text-primary, #ffffff);
}

shopify-cart::part(line-image) {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
}

shopify-cart::part(line-options) {
    color: var(--text-secondary, #b3b3b3);
}

shopify-cart::part(line-remove),
shopify-cart::part(remove),
shopify-cart::part(remove-button),
shopify-cart::part(delete),
shopify-cart::part(delete-button),
shopify-cart::part(line-delete) {
    color: var(--text-primary, #ffffff) !important;
    fill: var(--text-primary, #ffffff) !important;
    stroke: var(--text-primary, #ffffff) !important;
}

shopify-cart::part(quantity) {
    color: var(--text-primary, #ffffff);
    border-color: var(--border-dark, #2a2a2a);
}

shopify-cart::part(quantity-input) {
    color: var(--text-primary, #ffffff);
    background: var(--bg-dark, #0a0a0a);
    border-color: var(--border-dark, #2a2a2a);
}

shopify-cart::part(quantity-button) {
    color: var(--text-primary, #ffffff);
    border-color: var(--border-dark, #2a2a2a);
}

shopify-cart::part(input-field) {
    background: var(--bg-dark, #0a0a0a);
    border: 1px solid var(--border-dark, #2a2a2a);
    color: var(--text-primary, #ffffff);
    border-radius: 10px;
}

shopify-cart::part(subtotal) {
    color: var(--text-primary, #ffffff);
}

shopify-cart::part(subtotal-label) {
    color: var(--text-primary, #ffffff);
}

shopify-cart::part(subtotal-price) {
    color: var(--text-primary, #ffffff);
}

shopify-cart::part(discount-label) {
    color: var(--text-primary, #ffffff);
}

shopify-cart::part(empty-message) {
    color: var(--text-secondary, #b3b3b3);
}

/* Force ALL buttons and SVGs inside shopify-cart to be white */
shopify-cart::part(button) {
    color: var(--text-primary, #ffffff) !important;
    fill: var(--text-primary, #ffffff) !important;
    stroke: var(--text-primary, #ffffff) !important;
}

shopify-cart::part(icon) {
    color: var(--text-primary, #ffffff) !important;
    fill: var(--text-primary, #ffffff) !important;
    stroke: var(--text-primary, #ffffff) !important;
}

shopify-cart::part(svg) {
    color: var(--text-primary, #ffffff) !important;
    fill: var(--text-primary, #ffffff) !important;
    stroke: var(--text-primary, #ffffff) !important;
}

/* Try styling shopify-cart with CSS custom properties (some web components read these) */
shopify-cart {
    --color-foreground: #ffffff;
    --color-background: #161616;
    --color-button: #a01c2e;
    --color-button-text: #ffffff;
    --color-icon: #ffffff;
    --color-text: #ffffff;
    --color-text-secondary: #b3b3b3;
    --color-border: #2a2a2a;
    --icon-color: #ffffff;
    --text-color: #ffffff;
    --bg-color: #161616;
    --close-color: #ffffff;
    --remove-color: #ffffff;
    color-scheme: dark;
}

/* ---------- <shopify-variant-selector> — Shadow DOM via ::part() ---------- */

shopify-variant-selector::part(form) {
    color: var(--text-primary, #ffffff);
}

shopify-variant-selector::part(label) {
    color: var(--text-primary, #ffffff);
    font-weight: 600;
}

shopify-variant-selector::part(radio) {
    border-color: var(--border-dark, #2a2a2a);
    color: var(--text-primary, #ffffff);
}

shopify-variant-selector::part(radio-selected) {
    border-color: var(--primary-gold, #a01c2e);
    box-shadow: 0 0 0 2px rgba(160, 28, 46, 0.3);
}

shopify-variant-selector::part(color-swatch) {
    border-color: var(--border-dark, #2a2a2a);
    border-radius: 10px;
}

shopify-variant-selector::part(select) {
    background: var(--bg-dark, #0a0a0a);
    color: var(--text-primary, #ffffff);
    border: 1px solid var(--border-dark, #2a2a2a);
    border-radius: 8px;
}

shopify-variant-selector::part(option-name) {
    color: var(--text-primary, #ffffff);
}

/* ---------- <shopify-payment-button> ---------- */

shopify-payment-button::part(buy-now) {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

shopify-payment-button::part(add-to-cart) {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
}

/* ==========================================================================
   B) ShopWP Plugin — .shopwp / .wps-* classes + React Modal
   ========================================================================== */

/* ---------- ShopWP Product Cards ---------- */

.shopwp [data-wpshopify-component] {
    color: var(--text-primary, #ffffff) !important;
}

.shopwp .wps-component-products-title,
.shopwp .wps-component-products-title * {
    color: var(--text-primary, #ffffff) !important;
}

.shopwp .wps-component-products-pricing,
.shopwp .wps-component-products-pricing * {
    color: var(--text-primary, #ffffff) !important;
}

.shopwp .wps-component-products-description,
.shopwp .wps-component-products-description * {
    color: var(--text-secondary, #b3b3b3) !important;
}

.shopwp .wps-btn.wps-add-to-cart,
.shopwp .wps-btn.wps-btn-secondary,
.shopwp .wps-btn-wrapper .wps-btn,
.shopwp .wps-component-products-add-button .wps-btn {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

/* ---------- ShopWP Modal (React Modal) ---------- */

.shopwp .ReactModal__Overlay {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

.shopwp .ReactModal__Content {
    background: var(--bg-dark-card, #161616) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 20px !important;
    color: var(--text-primary, #ffffff) !important;
}

.shopwp .wps-modal,
.shopwp .wps-modal-inner,
.shopwp .wps-modal-row > div {
    color: var(--text-primary, #ffffff) !important;
}

.shopwp .ReactModal__Content .wps-add-to-cart,
.shopwp .ReactModal__Content .wps-component-products-add-button .wps-btn {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
}

.shopwp .ReactModal__Content .wps-component-products-buy-button a {
    background: transparent !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 12px !important;
}

/* ---------- ShopWP Cart Drawer ---------- */

.shopwp .wps-cart {
    background: var(--bg-dark-card, #161616) !important;
    color: var(--text-primary, #ffffff) !important;
}

.shopwp .wps-cart * {
    color: var(--text-primary, #ffffff) !important;
}

.shopwp .wps-btn-close {
    color: var(--text-secondary, #b3b3b3) !important;
    background: transparent !important;
    border: none !important;
}

.shopwp .wps-cart-lineitem-img {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 12px !important;
}

.shopwp .wps-btn-checkout {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
}

.shopwp .wps-cart-footer {
    border-top: 1px solid var(--border-dark, #2a2a2a) !important;
    color: var(--text-primary, #ffffff) !important;
}

.shopwp .wps-cart-footer * {
    color: var(--text-primary, #ffffff) !important;
}

.shopwp .wps-discount-row input {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
}

.shopwp .wps-discount-row button {
    background: transparent !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
}

/* ---------- ShopWP Quantity Controls ---------- */

.shopwp .wps-quantity-input {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border-color: var(--border-dark, #2a2a2a) !important;
}

.shopwp .wps-quantity-decrement,
.shopwp .wps-quantity-increment {
    color: var(--text-primary, #ffffff) !important;
    border-color: var(--border-dark, #2a2a2a) !important;
    background: transparent !important;
}

.shopwp .wps-quantity-icon {
    background: var(--text-primary, #ffffff) !important;
}

.shopwp .wps-quantity-increment-icon::after {
    background: var(--text-primary, #ffffff) !important;
}

/* ---------- ShopWP Generic Overrides ---------- */

.shopwp p, .shopwp span, .shopwp div, .shopwp label,
.shopwp h1, .shopwp h2, .shopwp h3, .shopwp h4, .shopwp h5, .shopwp h6 {
    color: var(--text-primary, #ffffff);
}

.shopwp a {
    color: var(--text-primary, #ffffff);
}

.shopwp input, .shopwp textarea {
    color: var(--text-primary, #ffffff) !important;
    background: var(--bg-dark, #0a0a0a) !important;
}

.shopwp select {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
}

/* ==========================================================================
   C) Broad Dark Theme Overrides — catch-all for Shopify plugin elements
   The Shopify WP plugin renders modals, product detail, and cart via JS.
   We can't know exact class names, so use attribute/wildcard selectors.
   ========================================================================== */

/* --- Any modal/dialog/overlay rendered on the page --- */
[class*="modal"],
[class*="Modal"],
[class*="dialog"],
[class*="Dialog"],
[class*="drawer"],
[class*="Drawer"],
[class*="overlay"][role="dialog"],
[role="dialog"] {
    background: var(--bg-dark-card, #161616) !important;
    color: var(--text-primary, #ffffff) !important;
}

[class*="modal"] *,
[class*="Modal"] *,
[role="dialog"] * {
    color: var(--text-primary, #ffffff) !important;
}

/* Keep product images with white background inside modals */
[class*="modal"] img,
[class*="Modal"] img,
[role="dialog"] img {
    color: initial !important;
}

[class*="modal"] [class*="image"],
[class*="Modal"] [class*="image"],
[class*="Modal"] [class*="Image"],
[role="dialog"] [class*="image"],
[role="dialog"] [class*="Image"] {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 12px !important;
}

/* Modal description text — slightly muted */
[class*="modal"] [class*="description"],
[class*="Modal"] [class*="description"],
[class*="Modal"] [class*="Description"] {
    color: var(--text-secondary, #b3b3b3) !important;
}

/* Modal close button */
[class*="modal"] [class*="close"],
[class*="Modal"] [class*="close"],
[class*="Modal"] [class*="Close"] {
    color: var(--text-secondary, #b3b3b3) !important;
    background: transparent !important;
}

/* Modal compare/sale price strikethrough */
[class*="modal"] [class*="compare"],
[class*="Modal"] [class*="compare"],
[class*="Modal"] s,
[class*="modal"] s,
[role="dialog"] s {
    color: var(--text-muted, #808080) !important;
}

/* Any dividers inside modals/dialogs */
[class*="modal"] hr,
[class*="Modal"] hr,
[role="dialog"] hr {
    border-color: var(--border-dark, #2a2a2a) !important;
}

/* Any inputs/selects inside modals */
[class*="modal"] select,
[class*="Modal"] select,
[role="dialog"] select {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
}

[class*="modal"] input,
[class*="Modal"] input,
[role="dialog"] input {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
}

/* --- Product detail pages (Shopify renders inside .inner-page .page-body) --- */
.inner-page .page-body {
    color: var(--text-primary, #ffffff) !important;
}

.inner-page .page-body * {
    color: var(--text-primary, #ffffff) !important;
}

.inner-page .page-body img {
    color: initial !important;
}

.inner-page .page-body [class*="image"],
.inner-page .page-body [class*="Image"] {
    background: rgba(255, 255, 255, 0.95) !important;
}

.inner-page .page-body select {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
}

.inner-page .page-body input {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
}

/* --- Cart drawer/sidebar catch-all --- */
[class*="cart"][class*="drawer"],
[class*="cart"][class*="Drawer"],
[class*="Cart"][class*="drawer"],
[class*="Cart"][class*="Drawer"],
[class*="cart-sidebar"],
[class*="CartSidebar"] {
    background: var(--bg-dark-card, #161616) !important;
    color: var(--text-primary, #ffffff) !important;
}

[class*="cart"][class*="drawer"] *,
[class*="Cart"][class*="Drawer"] * {
    color: var(--text-primary, #ffffff) !important;
}

/* --- Buy Now button catch-all — red CTA everywhere --- */
[class*="buy-now"],
[class*="buy_now"],
[class*="BuyNow"],
[class*="buyNow"],
button[class*="buy"],
a[class*="buy-now"],
[class*="modal"] [class*="buy"],
[class*="Modal"] [class*="buy"],
[role="dialog"] [class*="buy"] {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

/* --- Add to Cart button catch-all --- */
[class*="add-to-cart"],
[class*="AddToCart"],
[class*="addToCart"],
button[class*="add-to-cart"],
[class*="modal"] button[class*="add"],
[role="dialog"] button[class*="add"] {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

/* --- Cart trash/remove icon — make visible on dark bg --- */
[class*="cart"] [class*="remove"],
[class*="cart"] [class*="delete"],
[class*="cart"] [class*="trash"],
[class*="Cart"] [class*="remove"],
[class*="Cart"] [class*="delete"],
[class*="Cart"] [class*="trash"],
[class*="cart"] button svg,
[class*="Cart"] button svg {
    color: var(--text-secondary, #b3b3b3) !important;
    fill: var(--text-secondary, #b3b3b3) !important;
    stroke: var(--text-secondary, #b3b3b3) !important;
}

/* Cart quantity +/- buttons */
[class*="cart"] [class*="quantity"] button,
[class*="Cart"] [class*="quantity"] button,
[class*="cart"] [class*="Quantity"] button {
    color: var(--text-primary, #ffffff) !important;
    border-color: var(--border-dark, #2a2a2a) !important;
    background: transparent !important;
}

[class*="cart"] [class*="quantity"] input,
[class*="Cart"] [class*="quantity"] input {
    color: var(--text-primary, #ffffff) !important;
    background: var(--bg-dark, #0a0a0a) !important;
    border-color: var(--border-dark, #2a2a2a) !important;
}

/* Cart close/X button */
[class*="cart"] [class*="close"],
[class*="Cart"] [class*="close"],
[class*="Cart"] [class*="Close"] {
    color: var(--text-secondary, #b3b3b3) !important;
    background: transparent !important;
}

/* Cart checkout button */
[class*="cart"] [class*="checkout"],
[class*="Cart"] [class*="checkout"],
[class*="Cart"] [class*="Checkout"] {
    background: linear-gradient(135deg, var(--primary-gold, #a01c2e), var(--primary-gold-dark, #7a1522)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

/* Cart discount/coupon input */
[class*="cart"] [class*="discount"] input,
[class*="Cart"] [class*="discount"] input {
    background: var(--bg-dark, #0a0a0a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
}

/* ==========================================================================
   D) Custom Floating Cart Button — Shopify toggle is unreliable
   ========================================================================== */

#roastronix-floating-cart {
    position: fixed;
    bottom: 33px;
    right: 100px;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--bg-dark-card, #161616);
    border: 1px solid var(--border-dark, #2a2a2a);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    outline: none;
    color: var(--text-primary, #ffffff);
}

/* When nav moves to bottom, shift cart button up (matches .chat-widget.nav-bottom) */
body.nav-at-bottom #roastronix-floating-cart,
.nav-bottom ~ #roastronix-floating-cart,
#roastronix-floating-cart.nav-bottom {
    bottom: 93px;
}

#roastronix-floating-cart:hover {
    border-color: var(--primary-gold, #a01c2e);
    box-shadow: 0 4px 25px rgba(160, 28, 46, 0.3);
    transform: scale(1.05);
}

#roastronix-floating-cart svg {
    width: 22px;
    height: 22px;
    color: var(--text-primary, #ffffff);
    stroke: var(--text-primary, #ffffff);
}

#roastronix-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--primary-gold, #a01c2e);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    line-height: 1;
    padding: 0 4px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .shop-container { padding: 0 40px; }
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
    .shop-leasing-features { gap: 25px; }
}

@media (max-width: 768px) {
    .shop-hero { padding: 60px 0 40px; }
    .shop-container { padding: 0 25px; }
    .shop-catalog, .shop-shopify { padding: 50px 0; }
    .shop-grid { grid-template-columns: 1fr; }
    .shop-leasing-card { padding: 30px 25px; }
    .shop-leasing-features { flex-direction: column; gap: 15px; }
    .shop-product-actions { flex-direction: column; }
}