/* Add custom CSS styles below */ 
/* ============================================================
   TAJAWWAL — brand customization for Allai theme
   Identity: eSIM travel-roaming for young Saudi travelers
   ============================================================ */

/* ---------- 1. Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;800;900&family=Tajawal:wght@300;400;500;700;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- 2. Brand tokens (CSS variables) ---------- */
:root {
    /* Tajawwal palette — OKLCH for perceptual uniformity */
    --tj-ink:     oklch(0.18 0.04 30);    /* primary text + outlines */
    --tj-cream:   oklch(0.97 0.02 80);    /* page background */
    --tj-gold:    oklch(0.83 0.15 85);    /* accent */
    --tj-coral:   oklch(0.62 0.21 28);    /* primary CTA */
    --tj-peach:   oklch(0.92 0.07 65);    /* soft tint */
    --tj-magenta: oklch(0.55 0.24 350);
    --tj-jade:    oklch(0.62 0.12 170);
    --tj-rose:    oklch(0.78 0.13 30);
    --tj-sky:     oklch(0.78 0.10 230);
    --tj-border:  oklch(0.92 0.01 80);

    /* Type system */
    --tj-font-display: 'Rubik', sans-serif;
    --tj-font-body:    'Tajawal', sans-serif;
    --tj-font-label:   'Space Grotesk', sans-serif;
    --tj-font-mono:    'JetBrains Mono', monospace;

    /* Override Salla's primary color so theme components inherit Tajawwal */
    --color-primary:      var(--tj-coral) !important;
    --color-primary-dark: oklch(0.52 0.21 28) !important;
}

/* ---------- 3. Global type + background ---------- */
body,
body * {
    font-family: var(--tj-font-body);
}
body {
    background: var(--tj-cream) !important;
    color: var(--tj-ink);
}

/* Headings → display font */
h1, h2, h3, h4,
.heading,
[class*="title"] {
    font-family: var(--tj-font-display) !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tj-ink);
}

/* Latin text fallback (English headings) */
:lang(en) h1,
:lang(en) h2,
:lang(en) h3 {
    font-family: var(--tj-font-display) !important;
}

/* ---------- 4. Buttons — coral with hard offset shadow ---------- */
.btn,
button.btn-primary,
.salla-button--primary,
[class*="btn-primary"],
.s-button-btn {
    background: var(--tj-coral) !important;
    color: var(--tj-cream) !important;
    border: 2.5px solid var(--tj-ink) !important;
    border-radius: 99px !important;
    font-weight: 700 !important;
    box-shadow: 4px 4px 0 var(--tj-ink) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.btn:hover,
button.btn-primary:hover,
.salla-button--primary:hover,
[class*="btn-primary"]:hover,
.s-button-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--tj-ink) !important;
}

/* ---------- 5. Product cards — outline + lift on hover ---------- */
.product-card,
[class*="product-card"],
[class*="product-item"] {
    border: 2px solid var(--tj-ink) !important;
    border-radius: 24px !important;
    background: white !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.product-card:hover,
[class*="product-card"]:hover,
[class*="product-item"]:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px -8px oklch(0.18 0.04 30 / 0.18) !important;
}

/* ---------- 6. Header / nav — cleaner divider ---------- */
header,
.site-header {
    border-bottom: 1px solid var(--tj-border) !important;
}

/* ---------- 7. Price emphasis — display font, bold ---------- */
.price,
.product-price,
[class*="price"] {
    font-family: var(--tj-font-display) !important;
    font-weight: 800 !important;
    color: var(--tj-ink);
}

/* ---------- 8. Latin labels (eyebrows, codes) get Space Grotesk ---------- */
.eyebrow,
.label-en,
code {
    font-family: var(--tj-font-label) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

code {
    font-family: var(--tj-font-mono) !important;
    text-transform: none;
    letter-spacing: 0.05em;
}
/* ============================================================
   TAJAWWAL — pass 2: precise selectors from real Allai HTML
   ============================================================ */

/* ---------- Header wrapper: cream-on-cream, taller, bordered ---------- */
.header-inner-wrapper {
    background: var(--tj-cream) !important;
    border-bottom: 2px solid var(--tj-ink) !important;
    padding-block: 16px !important;
}

/* ---------- Login + sign-up buttons in header ---------- */
.header-btn.header-signInBtn,
.header-btn {
    background: var(--tj-cream) !important;
    color: var(--tj-ink) !important;
    border: 2px solid var(--tj-ink) !important;
    border-radius: 99px !important;
    padding: 8px 18px !important;
    font-weight: 700 !important;
    box-shadow: 3px 3px 0 var(--tj-coral) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    height: auto !important;
}
.header-btn.header-signInBtn:hover,
.header-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--tj-coral) !important;
    background: var(--tj-coral) !important;
    color: var(--tj-cream) !important;
}

/* ---------- Section headings (Rubik already inherited, just bigger) ---------- */
.s-block__title.section-main-title,
.section-main-title {
    font-family: var(--tj-font-display) !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin-bottom: 32px !important;
}

/* ---------- Eyebrow line above headings (decorative coral underline) ---------- */
.s-block__title.section-main-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--tj-coral);
    border-radius: 99px;
    margin-top: 12px;
}

/* ---------- Product cards: thicker borders, lift, scene background ---------- */
.custom-salla-product-card.enhanced-product-card,
.custom-salla-product-card {
    border: 2.5px solid var(--tj-ink) !important;
    border-radius: 28px !important;
    background: white !important;
    overflow: hidden !important;
    box-shadow: 6px 6px 0 var(--tj-ink) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.custom-salla-product-card:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 9px 9px 0 var(--tj-coral) !important;
}

/* The empty image area inside cards — give it a peach scene background */
.custom-salla-product-card .product-image-wrapper,
.custom-salla-product-card [class*="image"]:not(img) {
    background: var(--tj-peach) !important;
    border-bottom: 2.5px solid var(--tj-ink) !important;
}

/* Product titles inside cards */
.custom-salla-product-card [class*="title"],
.custom-salla-product-card [class*="name"] {
    font-family: var(--tj-font-display) !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    letter-spacing: -0.01em !important;
}

/* ---------- Add-to-cart button inside the card (already coral, refine) ---------- */
.custom-salla-product-card button,
.custom-salla-product-card .btn,
.custom-salla-product-card [class*="add-to-cart"] {
    background: var(--tj-ink) !important;
    color: var(--tj-cream) !important;
    border: none !important;
    border-radius: 0 !important;
    border-top: 2.5px solid var(--tj-ink) !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 14px !important;
    font-weight: 700 !important;
    transition: background 0.18s ease !important;
}
.custom-salla-product-card button:hover {
    background: var(--tj-coral) !important;
    color: var(--tj-cream) !important;
    transform: none !important;
}

/* ---------- Search bar — give it real height + brand border ---------- */
input[type="search"],
.search-input,
[class*="search"] input,
input[placeholder*="بحث"] {
    background: white !important;
    border: 2px solid var(--tj-ink) !important;
    border-radius: 99px !important;
    padding: 12px 20px !important;
    height: auto !important;
    min-height: 44px !important;
    font-family: var(--tj-font-body) !important;
}
input[type="search"]:focus,
[class*="search"] input:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--tj-gold) !important;
    border-color: var(--tj-ink) !important;
}

/* ---------- Cart bag icon: gold count badge instead of generic red ---------- */
.header-btn .badge,
.header-btn [class*="count"],
[class*="cart"] [class*="badge"] {
    background: var(--tj-gold) !important;
    color: var(--tj-ink) !important;
    border: 2px solid var(--tj-ink) !important;
    font-family: var(--tj-font-label) !important;
    font-weight: 700 !important;
}

/* ---------- Body padding so cream doesn't run flush to header ---------- */
main {
    padding-top: 8px;
}
/* ============================================================
   TAJAWWAL — pass 3: precise selectors from confirmed inspections
   ============================================================ */

/* ---------- Top navbar: ground line border ---------- */
.top-navbar {
    background: var(--tj-cream) !important;
    border-bottom: 2.5px solid var(--tj-ink) !important;
    padding-block: 12px !important;
}

/* ---------- Product card image area (the empty white box) ---------- */
.thumb-wrapper {
    background: var(--tj-peach) !important;
    border-bottom: 2.5px solid var(--tj-ink) !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}
/* When a real image exists inside the wrapper, let it fill */
.thumb-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* Decorative pattern in empty image area until products have photos */
.thumb-wrapper:not(:has(img))::before,
.thumb-wrapper:has(img[src=""])::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 14px,
            oklch(0.83 0.15 85 / 0.4) 14px,
            oklch(0.83 0.15 85 / 0.4) 28px
        );
}

/* ---------- Add-to-cart inside card: dark slab, full width ---------- */
.custom-salla-product-card button[type="submit"],
.custom-salla-product-card salla-button,
.custom-salla-product-card .s-button-btn,
.custom-salla-product-card a[class*="cart"],
.custom-salla-product-card button[class*="cart"] {
    background: var(--tj-ink) !important;
    color: var(--tj-cream) !important;
    border: none !important;
    border-top: 2.5px solid var(--tj-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 14px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    transform: none !important;
}
.custom-salla-product-card button[type="submit"]:hover,
.custom-salla-product-card salla-button:hover,
.custom-salla-product-card .s-button-btn:hover {
    background: var(--tj-coral) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* The shadow root inside salla-button (web component) needs custom property override */
salla-button {
    --salla-button-bg: var(--tj-ink);
    --salla-button-color: var(--tj-cream);
    --salla-button-border-radius: 0;
}

/* ---------- Card outer: tighten the offset shadow to be visible ---------- */
.custom-salla-product-card {
    box-shadow: 5px 5px 0 var(--tj-ink) !important;
    margin: 6px !important;  /* room for the shadow to actually show */
}
.custom-salla-product-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 7px 7px 0 var(--tj-coral) !important;
}
/* ---------- Kill the white strip above the header ---------- */
html,
body,
.s-app,
#app,
[class*="layout"]:first-child {
    background: var(--tj-cream) !important;
}
/* ---------- Kill the white footer wrapper ---------- */
.store-footer__inner,
.store-footer,
footer {
    background: var(--tj-cream) !important;
}

/* Ground line above the footer to match the header */
.store-footer__inner {
    border-top: 2.5px solid var(--tj-ink) !important;
    padding-top: 32px !important;
}

/* Footer headings + links: brand-aligned */
.store-footer__inner h3,
.store-footer__inner h4,
.store-footer__inner [class*="title"] {
    font-family: var(--tj-font-display) !important;
    font-weight: 800 !important;
    color: var(--tj-ink) !important;
    font-size: 16px !important;
    margin-bottom: 12px !important;
}

.store-footer__inner a {
    color: var(--tj-ink) !important;
    transition: color 0.15s ease !important;
}
.store-footer__inner a:hover {
    color: var(--tj-coral) !important;
}

/* Footer freelance license + copyright row */
.footer-foot,
.footer_top {
    background: transparent !important;
    color: var(--tj-ink) !important;
    border-top: 1px solid var(--tj-border) !important;
    padding-top: 16px !important;
    margin-top: 24px !important;
}
/* ---------- Kill any white at the absolute page edges ---------- */
html,
body,
#app,
.s-app,
main,
.app-wrapper,
.layout-wrapper,
.page-wrapper {
    background-color: var(--tj-cream) !important;
}

/* Belt-and-suspenders: paint the html document root itself */
:root {
    background-color: var(--tj-cream);
}
/* ---------- Login button icon: ink, not white ---------- */
.header-signInBtn i,
.header-signInBtn svg,
.header-signInBtn .header-btn__icon {
    color: var(--tj-ink) !important;
    fill: var(--tj-ink) !important;
}

/* On hover (button turns coral), icon flips to cream */
.header-signInBtn:hover i,
.header-signInBtn:hover svg,
.header-signInBtn:hover .header-btn__icon {
    color: var(--tj-cream) !important;
    fill: var(--tj-cream) !important;
}
/* ============================================================
   TAJAWWAL — final cleanup pass: real selectors from etjwal.com
   ============================================================ */

/* ---------- 1. KILL THE WHITE EVERYWHERE ---------- */

/* The body has bg-white as a Tailwind utility — beat it */
.app-body,
body.app-body,
body.bg-white,
.app-body.bg-white {
    background-color: var(--tj-cream) !important;
}

/* Header inline style sets --header-bg-color: #ffffff. Override the var itself. */
.store-header {
    --header-bg-color: oklch(0.97 0.02 80) !important;
    --header-text-color: oklch(0.18 0.04 30) !important;
}

/* The main-nav-container has bg-white baked in */
.main-nav-container,
.main-nav-container.bg-white {
    background-color: var(--tj-cream) !important;
    box-shadow: none !important;
}

/* Same for the inner wrapper */
.store-header .inner,
.store-header .inner.bg-inherit {
    background-color: var(--tj-cream) !important;
}

/* Footer also has --footer-bg-color: #ffffff inline */
.store-footer {
    --footer-bg-color: oklch(0.97 0.02 80) !important;
    --footer-text-color: oklch(0.18 0.04 30) !important;
}
.store-footer,
.store-footer__inner {
    background-color: var(--tj-cream) !important;
}

/* Add the ground line above the footer */
.store-footer__inner {
    border-top: 2.5px solid var(--tj-ink) !important;
    padding-top: 32px !important;
}

/* The dashed divider line in the footer becomes a clean ink line */
.store-footer .line {
    border-top: 1px solid var(--tj-border) !important;
    opacity: 1 !important;
}

/* Splash / loading screen (briefly visible on load) */
#splash-screen-2,
.splash-screen {
    background-color: var(--tj-cream) !important;
}

/* Salla "made on Salla" footer link gets coral hover (not its default) */
.store-footer a.hover\\:text-primary:hover,
.store-footer a:hover {
    color: var(--tj-coral) !important;
}

/* ---------- 2. HEADER ICONS — all in ink, coral on hover ---------- */

/* Sign-in user icon (the one currently white) */
.header-signInBtn i,
.header-signInBtn svg,
.header-signInBtn .header-btn__icon {
    color: var(--tj-ink) !important;
    fill: var(--tj-ink) !important;
}
.header-signInBtn:hover i,
.header-signInBtn:hover svg,
.header-signInBtn:hover .header-btn__icon {
    color: var(--tj-cream) !important;
    fill: var(--tj-cream) !important;
}

/* Mobile menu burger icon */
.mburger,
.mburger i,
.header-menu-icon {
    color: var(--tj-ink) !important;
}

/* Dark mode toggle */
.dm-toggler,
.dm-toggler i {
    color: var(--tj-ink) !important;
}

/* Search button */
.search-btn,
.search-btn i {
    color: var(--tj-ink) !important;
}

/* Cart icon */
salla-cart-summary,
salla-cart-summary i,
.cart-sum-icon {
    color: var(--tj-ink) !important;
    fill: var(--tj-ink) !important;
}

/* Cart count badge — gold instead of red (was --cart-count-bg:#f87171) */
.header-inner-wrapper {
    --cart-count-bg: oklch(0.83 0.15 85) !important;
}

/* Wishlist heart */
.header-wishlist-count,
.header-wishlist-count i,
.icon-heart {
    color: var(--tj-ink) !important;
    fill: var(--tj-ink) !important;
}
.header-wishlist-count:hover .icon-heart,
.header-wishlist-count:hover i {
    color: var(--tj-coral) !important;
    fill: var(--tj-coral) !important;
}

/* ---------- 3. CATEGORY NAV (محدود / لامحدود / تخفيضات) ---------- */
.desktop-menu-item,
.desktop-menu-item a,
.desktop-menu-item h4 {
    font-family: var(--tj-font-display) !important;
    font-weight: 700 !important;
    color: var(--tj-ink) !important;
    transition: color 0.15s ease !important;
}
.desktop-menu-item:hover,
.desktop-menu-item a:hover {
    color: var(--tj-coral) !important;
}

/* "تخفيضات" (Offers) deserves coral — it's the deal link */
.offers-link {
    color: var(--tj-coral) !important;
    font-weight: 800 !important;
}
.offers-link:hover {
    color: var(--tj-ink) !important;
}

/* ---------- 4. SECTION TITLES (already styled, just refine spacing) ---------- */
.s-block .s-block__title h2 {
    font-family: var(--tj-font-display) !important;
    font-weight: 900 !important;
    color: var(--tj-ink) !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

/* "View all" link in section titles */
.s-block__display-all {
    font-family: var(--tj-font-label) !important;
    font-weight: 700 !important;
    color: var(--tj-coral) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 12px !important;
}

/* ---------- 5. MOBILE MENU (when opened) ---------- */
#mobile-menu,
.mobile-menu {
    background-color: var(--tj-cream) !important;
}
.mobile-menu-item h4 {
    font-family: var(--tj-font-display) !important;
    color: var(--tj-ink) !important;
}

/* Close button on mobile menu */
.btn--close,
.btn--close-sm,
.close-mobile-menu {
    color: var(--tj-ink) !important;
}
/* ============================================================
   TAJAWWAL — product page styling (precise selectors from real HTML)
   ============================================================ */

/* ---------- 1. PRODUCT PAGE LAYOUT ---------- */
.p-single-container {
    max-width: 1200px !important;
    padding-block: 16px !important;
}

/* ---------- 2. BREADCRUMB ---------- */
.breadcrumbs {
    font-family: var(--tj-font-label) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--tj-ink) !important;
    opacity: 0.75 !important;
}

/* ---------- 3. PRODUCT IMAGE / SLIDER ---------- */
.details-slider,
.image-slider {
    border: 2.5px solid var(--tj-ink) !important;
    border-radius: 28px !important;
    background: var(--tj-peach) !important;
    overflow: hidden !important;
    box-shadow: 6px 6px 0 var(--tj-ink) !important;
}

/* When the placeholder image is showing, give it a friendly stripe pattern */
.details-slider img[src*="placeholder"] {
    opacity: 0.3 !important;
    mix-blend-mode: multiply !important;
}

.details-slider {
    position: relative !important;
}
.details-slider:has(img[src*="placeholder"])::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 16px,
        oklch(0.83 0.15 85 / 0.35) 16px,
        oklch(0.83 0.15 85 / 0.35) 32px
    );
}

/* Wishlist icon overlay on the image (top corner) */
.btn--wishlist {
    --salla-button-bg: var(--tj-cream);
    --salla-button-color: var(--tj-ink);
}
.btn--wishlist .sicon-heart {
    color: var(--tj-coral) !important;
}

/* ---------- 4. PRODUCT TITLE & DESCRIPTION ---------- */
.product-main-title {
    font-family: var(--tj-font-display) !important;
    font-weight: 900 !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    color: var(--tj-ink) !important;
    margin-bottom: 16px !important;
}

.product__description {
    font-family: var(--tj-font-body) !important;
    color: var(--tj-ink) !important;
    line-height: 1.7 !important;
}

/* ---------- 5. PRICE BLOCK ---------- */
.p-price-outer {
    margin-block: 8px 16px !important;
    padding: 16px 0 !important;
    border-block: 2px solid var(--tj-border) !important;
}
.p-price-outer h2,
.p-price-outer .p-price,
.p-price-outer .text-xl {
    font-family: var(--tj-font-display) !important;
    font-weight: 900 !important;
    font-size: 36px !important;
    color: var(--tj-ink) !important;
}
/* Discount price (red) — keep the discount signal but use brand red */
.p-price.t-red,
.p-price.text-red-500 {
    color: var(--tj-coral) !important;
}

/* ---------- 6. AVAILABILITY BADGE — gold pulse, not green ---------- */
.p-available-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    background: var(--tj-cream) !important;
    border: 2px solid var(--tj-ink) !important;
    border-radius: 99px !important;
    margin-block: 8px !important;
}
.p-available-badge__text {
    font-family: var(--tj-font-label) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--tj-ink) !important;
}
.p-available-badge__dot {
    background: var(--tj-jade) !important;  /* keep "available = jade green" — it's a positive signal */
}
.p-available-badge__ring {
    border-color: var(--tj-jade) !important;
}

/* ---------- 7. PRODUCT OPTIONS (day selector pills) ---------- */
salla-product-options {
    display: block !important;
    margin-block: 24px !important;
}
salla-product-options::part(option-button),
salla-product-options::part(option) {
    border: 2px solid var(--tj-ink) !important;
    border-radius: 99px !important;
    font-family: var(--tj-font-display) !important;
    font-weight: 700 !important;
    background: var(--tj-cream) !important;
    color: var(--tj-ink) !important;
}

/* ---------- 8. QUANTITY + ADD-TO-CART BUTTONS ---------- */
salla-quantity-input {
    --salla-quantity-bg: var(--tj-cream);
    --salla-quantity-border: var(--tj-ink);
    --salla-quantity-color: var(--tj-ink);
}

salla-add-product-button {
    --salla-button-bg: var(--tj-coral);
    --salla-button-color: var(--tj-cream);
    --salla-button-border-radius: 99px;
}

/* ---------- 9. SOCIAL SHARE + WISHLIST ROW ---------- */
.p-share {
    margin-block: 24px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--tj-border) !important;
}

/* ---------- 10. INSTALLMENT BANNER (Tabby/Tamara) ---------- */
salla-installment {
    --salla-installment-bg: var(--tj-peach);
    --salla-installment-color: var(--tj-ink);
    --salla-installment-border: var(--tj-ink);
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* ---------- 11. PRODUCT TABS ---------- */
.product-tabs {
    display: flex !important;
    gap: 4px !important;
    border-bottom: 2.5px solid var(--tj-ink) !important;
    margin-bottom: 24px !important;
}
.product-tabs .tab-trigger {
    background: transparent !important;
    border: 2.5px solid transparent !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 12px 20px !important;
    font-family: var(--tj-font-display) !important;
    font-weight: 700 !important;
    color: var(--tj-ink) !important;
    margin-bottom: -2.5px !important;
    transition: all 0.18s ease !important;
}
.product-tabs .tab-trigger:hover {
    background: var(--tj-peach) !important;
}
.product-tabs .tab-trigger.is-active {
    background: var(--tj-ink) !important;
    color: var(--tj-cream) !important;
    border-color: var(--tj-ink) !important;
}
.product-tabs .tab-trigger.is-active i {
    color: var(--tj-cream) !important;
}

/* ---------- 12. RELATED PRODUCTS SLIDER ---------- */
.similar-products {
    margin-top: 64px !important;
    padding-top: 48px !important;
    border-top: 2.5px solid var(--tj-ink) !important;
}

/* ---------- 13. COMMENTS / REVIEWS ---------- */
salla-comments {
    --salla-comments-bg: var(--tj-cream);
    --salla-comments-border: var(--tj-ink);
}

/* ---------- 14. QUICK ORDER LINK ---------- */
salla-quick-order {
    --salla-quick-order-color: var(--tj-coral);
    font-family: var(--tj-font-label) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}
/* ---------- Kill the white surfaces in product page panels ---------- */

/* The two white panels surrounding options and CTAs */
.p-single-container .bg-white,
.p-single-container [class*="bg-white"],
.main-content .bg-white,
.main-content > div[class*="bg-white"],
.main-content section[class*="bg-white"],
.product-form .bg-white {
    background-color: var(--tj-cream) !important;
}

/* Belt-and-suspenders: any direct children of main-content that have white bg */
.prod-main-content > div,
.prod-main-content > section,
.prod-main-content > form > div,
.prod-main-content > form > section {
    background-color: transparent !important;
}

/* Salla's product options + add-to-cart often live in panels with .product-options-card or similar */
[class*="product-options"],
[class*="options-card"],
[class*="cart-card"],
[class*="cart-section"],
salla-product-options,
.product-form section {
    background-color: var(--tj-cream) !important;
}

/* ============================================================
   TAJAWWAL — card sizing & button fix (REPLACES all 4 prior passes)
   - Single source of truth for card width/height/grid
   - Targets confirmed selectors: .s-button-element, .thumb-wrapper
   - No conflicting min/max width rules
   ============================================================ */

/* --- Product card: forced minimum width via flex-basis, not min-width --- */
.custom-salla-product-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 420px !important;
    background: white !important;
    border: 2.5px solid var(--tj-ink) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 5px 5px 0 var(--tj-ink) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.custom-salla-product-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 7px 7px 0 var(--tj-coral) !important;
}

/* --- Card image area: single aspect ratio rule, overrides earlier 1/1 --- */
.custom-salla-product-card .thumb-wrapper,
.custom-salla-product-card a.thumb-wrapper {
    aspect-ratio: 4 / 5 !important;
    width: 100% !important;
    display: block !important;
    background: var(--tj-peach) !important;
    border-bottom: 2.5px solid var(--tj-ink) !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
}
.custom-salla-product-card .thumb-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* --- Content area below image (title, price, button) --- */
.custom-salla-product-card .product-content,
.custom-salla-product-card > div:not(.thumb-wrapper) {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
    min-width: 0 !important;  /* allow flex children to shrink properly */
}

/* --- Card title: 2-line clamp --- */
.custom-salla-product-card h3,
.custom-salla-product-card .product-card-name,
.custom-salla-product-card [class*="title"] {
    font-family: var(--tj-font-display) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: var(--tj-ink) !important;
    margin: 0 0 12px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* ---------- "Reorder it" CTA card: balance white vs red ratio ---------- */
.reorder-product-button,
.reorder-button,
[class*="reorder"] button,
[class*="reorder"] .s-button-element {
    padding: 18px 24px !important;
    font-size: 16px !important;
    min-height: 56px !important;
}

/* If the title area above the button has too much padding, tighten it */
[class*="reorder"] .product-card-name,
[class*="reorder"] h3,
[class*="reorder"] [class*="title"] {
    padding: 16px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}
/* ============================================================
   TAJAWWAL — balance card text/button ratio (confirmed selectors)
   ============================================================ */

/* The white info area: tighter padding so it doesn't dominate */
.product-block__info,
.product-block__info.pb-1 {
    padding: 10px 12px !important;
    gap: 8px !important;
}

/* The title link itself: smaller font + tight margins */
.product-title,
a.product-title,
a.product-title.px-3 {
    font-size: 14px !important;
    line-height: 1.35 !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* The button wrapper "div.w-full" — give it more presence */
.product-block__info .w-full,
.product-block__info > div.w-full {
    margin-top: auto !important;  /* push button to bottom of card */
    width: 100% !important;
}

/* Button itself: thicker for visual weight, balances white area */
.product-block__info .s-button-element,
.product-block__info button.s-button-element,
.product-block__info .s-button-btn {
    width: 100% !important;
    padding: 14px 16px !important;
    min-height: 50px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}
/* TEMP TEST: kill the empty-state pattern entirely to see if image is hiding behind it */
.custom-salla-product-card .thumb-wrapper::before {
    display: none !important;
}
/* ============================================================
   TAJAWWAL — restore image area visibility
   ============================================================ */

/* Force the image area to be visible & sized */
.custom-salla-product-card .thumb-wrapper,
.custom-salla-product-card a.thumb-wrapper {
    display: block !important;
    visibility: visible !important;
    aspect-ratio: 4 / 5 !important;
    width: 100% !important;
    min-height: 240px !important;
    background: var(--tj-peach) !important;
    border-bottom: 2.5px solid var(--tj-ink) !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
}

/* Make sure the image actually displays */
.custom-salla-product-card .thumb-wrapper img,
.custom-salla-product-card .product-image,
.custom-salla-product-card img.product-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Re-enable the empty-state pattern, but only when image is genuinely missing */
.custom-salla-product-card .thumb-wrapper:empty::before,
.custom-salla-product-card .thumb-wrapper:not(:has(img))::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent 0 14px,
        oklch(0.83 0.15 85 / 0.4) 14px 28px
    );
}
/* ---------- EMERGENCY: re-enable scrolling ---------- */
html,
body,
.app-body,
main,
.app-wrapper {
    overflow: visible !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
}