/* ============================================================
   Digital Commerce Integration — Marketplace polish layer (tj-polish)
   ------------------------------------------------------------
   Foundations v1 pass over the light storefront, on the brand
   palette in tj-tokens.css. Loaded after tj-web.css.
   Flat surfaces, hairline depth, 2–3px radii, one indigo action
   per view, motion only for state changes (100ms colour, 140ms
   card edge). No glass, no glow, no lift.
   Touches only safe hooks: never the Electro grid cell
   (.products .product), never carousel internals.
   ============================================================ */

/* ── Header: ONE dark chrome for every page ──
   The marketplace, content pages, auth and the B2B portal all
   share this header so the brand never "changes colour" between
   routes. Flat slate-navy sidebar step (#0d1424) on a hairline
   rule — no blur, no gradient line, no glow on scroll. */
.tj-header{
    background: #0d1424 !important;
    border-bottom: 1px solid #263049 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none;
}
.tj-header::after{ content: none; }
body.tj-scrolled .tj-header{
    background: #0d1424 !important;
    box-shadow: none !important;
}
/* logo is a PNG on white — keep it on a white tile, never inverted */
.tj-header .tj-brand-link img{ filter: none; background: var(--tj-surface); border-radius: var(--tj-r); padding: 4px; box-shadow: none; }

/* nav links: text only; the active item gets a 2px indigo underline marker */
.tj-header .tj-nav-link{ color: #98a1b8 !important; background: transparent !important; border-radius: 0 !important; transition: color 100ms ease-out; }
.tj-header .tj-nav-link:hover{ color: #f3f5fa !important; background: transparent !important; }
.tj-header .tj-nav-link.active{
    color: #f3f5fa !important;
    font-weight: 600;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--tj-orange-400) !important;
}

/* header buttons / chips: flat panel step + hairline */
.tj-header .tj-icon-btn,
.tj-header .tj-btn-ghost-nav,
.tj-header .tj-user-btn,
.tj-header .tj-burger{
    background: #131a2c !important;
    border: 1px solid #263049 !important;
    color: #c3cbdb !important;
    border-radius: var(--tj-r) !important;
    box-shadow: none !important;
    transition: border-color 100ms ease-out, color 100ms ease-out, background 100ms ease-out;
}
.tj-header .tj-icon-btn:hover,
.tj-header .tj-btn-ghost-nav:hover{
    background: var(--tj-ink-2) !important;
    border-color: #465575 !important;
    color: var(--tj-bg) !important;
    box-shadow: none !important;
}
.tj-header .tj-user-btn:hover{ border-color: #465575 !important; }
.tj-header .tj-user-btn i{ color: #98a1b8; }
.tj-header .tj-burger span{ background: #e5e9f2; }
.tj-header .tj-dot-badge{
    background: var(--tj-orange);
    color: #fff;
    border-radius: var(--tj-r);
    box-shadow: 0 0 0 2px #0d1424;
}
.tj-header .tj-btn-cta{
    background: var(--tj-orange) !important;
    color: #fff !important;
    border-radius: var(--tj-r) !important;
    box-shadow: none !important;
    transition: background 100ms ease-out, box-shadow 100ms ease-out !important;
}
.tj-header .tj-btn-cta:hover{ background: var(--tj-orange-hover) !important; box-shadow: none !important; }
.tj-header .tj-btn-cta:active{ background: var(--tj-orange-deep) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.22) !important; }
.tj-header .tj-pill-status{
    background: #2c2010;
    border-color: #5f4718;
    border-radius: var(--tj-r);
    color: #fbbf24 !important;
}

/* dropdown menus → raised slate panel, real shadow (the only shadow in the header) */
.tj-header .tj-menu-panel{
    background: var(--tj-ink-2) !important;
    border: 1px solid #3a4763 !important;
    border-radius: var(--tj-r-lg) !important;
    box-shadow: 0 24px 48px -18px rgba(0,0,0,.7) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.tj-header .tj-menu-panel > a{ color: #c3cbdb !important; border-radius: 0 !important; }
.tj-header .tj-menu-panel > a:hover{ background: rgba(var(--tj-brand-rgb),.14); color: #f3f5fa !important; }
.tj-header .tj-menu-panel > a.tj-menu-danger:hover{ background: rgba(248,113,113,.12); color: #f87171 !important; }
.tj-header .tj-menu-sep{ background: #33405c; }
.tj-header .tj-menu-head{ color: #f3f5fa; border-bottom-color: #33405c; }
.tj-header .tj-count-chip{ background: rgba(var(--tj-brand-rgb),.18); color: var(--tj-brand-300); border-radius: var(--tj-r); }
.tj-header .tj-notif-item:hover{ background: #26324a; }
.tj-header .tj-notif-icon{ background: rgba(var(--tj-brand-rgb),.18); border-color: #465575; color: var(--tj-brand-300); border-radius: var(--tj-r); }
.tj-header .tj-notif-body strong{ color: #f3f5fa; }
.tj-header .tj-notif-body small{ color: #98a1b8; }
.tj-header .tj-menu-empty{ color: #98a1b8; }
.tj-header .tj-menu-empty i{ color: #6e7891; }
.tj-header .tj-menu-foot{ border-top-color: #33405c; color: var(--tj-brand-300) !important; }

/* mobile drawer: flat sidebar step */
@media (max-width: 860px){
    .tj-header .tj-nav{
        background: #0d1424;
        border-block-end-color: #263049;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .tj-header .tj-nav-drawer-extra{ border-top-color: #263049; }
}

/* ── Product cards: hairline at rest, darker edge + short shadow on hover (no lift) ── */
.products .product .product-outer{
    border: 1px solid var(--tj-border) !important;
    border-radius: var(--tj-r-lg) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 140ms ease-out, box-shadow 140ms ease-out !important;
}
.products .product .product-outer:hover{
    transform: none !important;
    border-color: var(--tj-muted-2) !important;
    box-shadow: 0 4px 14px -6px rgba(16,20,32,.18) !important;
}

/* ── Buttons: flat fill, press by inset shadow ── */
.tj-btn-cta{
    position: relative;
    overflow: hidden;
    background: var(--tj-orange) !important;
    border-radius: var(--tj-r) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 100ms ease-out, box-shadow 100ms ease-out !important;
}
.tj-btn-cta:hover{ background: var(--tj-orange-hover) !important; transform: none; box-shadow: none !important; }
.tj-btn-cta:active{ background: var(--tj-orange-deep) !important; transform: none; box-shadow: inset 0 2px 4px rgba(0,0,0,.22) !important; }
.site-content .add_to_cart_button,
.site-content .single_add_to_cart_button,
.site-content .button.product_type_simple{
    border-radius: var(--tj-r) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 100ms ease-out, box-shadow 100ms ease-out !important;
}
.site-content .add_to_cart_button:hover,
.site-content .single_add_to_cart_button:hover,
.site-content .button.product_type_simple:hover{
    transform: none;
    box-shadow: none !important;
}
.site-content .add_to_cart_button:active,
.site-content .single_add_to_cart_button:active,
.site-content .button.product_type_simple:active{
    box-shadow: inset 0 2px 4px rgba(0,0,0,.22) !important;
}
.tj-icon-btn:hover{ box-shadow: none !important; }

/* ── Section entrances: retired. Motion confirms state, it never decorates. ── */
.animate-in-view{ opacity: 1; }
.animate-in-view.animated{ opacity: 1; animation: none; }

/* ── Section heads: numbered hairline, no glow dot ── */
.tj-sec-head-eyebrow{
    box-shadow: none;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tj-orange);
}
html[lang="ar"] .tj-sec-head-eyebrow,
[dir="rtl"] .tj-sec-head-eyebrow{ letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 600; }

/* ── Account pages: flat list nav + hairline tables ── */
.container.account-details .nav-pills{
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r-lg);
    box-shadow: none;
    padding: 6px 0;
    gap: 0;
}
.container.account-details .nav-pills .nav-link,
.container.account-details .nav-pills > li > a{
    border-radius: 0 !important;
    font-weight: 500;
    color: var(--tj-muted) !important;
    transition: background 100ms ease-out, color 100ms ease-out;
}
.container.account-details .nav-pills .nav-link:hover,
.container.account-details .nav-pills > li > a:hover{
    background: var(--tj-surface-alt) !important;
    color: var(--tj-ink) !important;
}
.container.account-details .nav-pills .nav-link.active,
.container.account-details .nav-pills > li.active > a{
    background: var(--tj-orange-50) !important;
    color: var(--tj-ink) !important;
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--tj-orange);
}
.profile-card,
.site-content .card{
    border: 1px solid var(--tj-border) !important;
    border-radius: var(--tj-r-lg) !important;
    box-shadow: none !important;
    transition: none;
}
.profile-card:hover,
.site-content .card:hover{ box-shadow: none !important; }
.site-content .shop_table{
    border: 1px solid var(--tj-border) !important;
    border-radius: var(--tj-r-lg) !important;
    overflow: hidden;
    box-shadow: none !important;
}
.site-content .shop_table thead th{
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tj-muted-2) !important;
    background: var(--tj-surface-alt) !important;
    border-bottom: 1px solid var(--tj-border) !important;
    padding: 11px 16px !important;
}
.site-content .shop_table tbody td{
    border-bottom: 1px solid var(--tj-border-2) !important;
    padding: 14px 16px !important;
    transition: background 100ms ease-out;
}
.site-content .shop_table tbody tr:hover td{ background: var(--tj-surface-alt); }
.site-content .shop_table td.product-price,
.site-content .shop_table td.product-subtotal,
.site-content .shop_table td.product-total,
.site-content .shop_table .amount{
    text-align: end;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
html[lang="ar"] .site-content .shop_table thead th,
[dir="rtl"] .site-content .shop_table thead th{ letter-spacing: 0; text-transform: none; font-size: 11px !important; font-weight: 700 !important; }
.site-content .modal-content{
    border-radius: var(--tj-r-lg) !important;
    border: 1px solid var(--tj-border) !important;
    box-shadow: 0 24px 48px -20px rgba(16,20,32,.34) !important;
}
.site-content .modal-footer{
    background: var(--tj-surface-alt);
    border-top: 1px solid var(--tj-border-2);
}

/* ── Footer: flat CTA band, hairline socials ── */
.tj-foot-cta{ box-shadow: none; border-radius: var(--tj-r-lg); }
.tj-foot-socials a{
    border-radius: var(--tj-r) !important;
    transition: border-color 100ms ease-out, background 100ms ease-out, color 100ms ease-out !important;
    transform: none !important;
}
.tj-foot-socials a:hover{ box-shadow: none !important; transform: none !important; }

/* (image shimmer lives in tj-skeleton.css — shared, all surfaces) */

/* ── Product images: constrained wells, no more giant cards ── */
.site-content .products .product .product-thumbnail,
.site-content .onsale-product .product-thumbnail{
    height: 185px !important;
    padding: 0 !important; /* kill Electro's padding-bottom aspect hack */
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--tj-surface-alt);
    border-radius: 0;
    border-bottom: 1px solid var(--tj-border);
}
/* images that fail to load: keep the well tidy with a soft placeholder */
.site-content .product-thumbnail img[src$="blank.gif"]{ opacity: 0; }
.site-content .products .product .product-thumbnail img,
.site-content .onsale-product .product-thumbnail img{
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* ── Product card body: eyebrow / title / price / meta rhythm from the mock ── */
.site-content .products .product .product-inner .brand,
.site-content .products .product .product-inner .product-brand,
.site-content .products .product .product-inner .posted_in{
    font-size: 11px; font-weight: 500; line-height: 1;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--tj-muted-2); margin-bottom: 8px;
}
.site-content .products .product .product-inner .product-title,
.site-content .products .product .product-inner h2.woocommerce-loop-product__title{
    font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--tj-ink); margin-bottom: 10px;
}
.site-content .products .product .product-inner .price,
.site-content .products .product .product-inner .price .amount{
    font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
    color: var(--tj-ink); font-variant-numeric: tabular-nums;
}
.site-content .products .product .product-inner .price del,
.site-content .products .product .product-inner .price del .amount{
    font-size: 12px; font-weight: 500; color: var(--tj-muted-2); letter-spacing: 0;
}
.site-content .products .product .product-inner .price .woocommerce-Price-currencySymbol{
    font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--tj-muted-2); margin-inline-start: 4px;
}
.site-content .products .product .onsale,
.site-content .products .product .tj-card-badge{
    background: var(--tj-ink) !important; color: var(--tj-bg) !important;
    font-size: 10px; font-weight: 600; line-height: 1;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 7px; border-radius: var(--tj-r) !important;
    inset-block-start: 8px; inset-inline-start: 8px;
}
html[lang="ar"] .site-content .products .product .product-inner .brand,
html[lang="ar"] .site-content .products .product .product-inner .posted_in,
html[lang="ar"] .site-content .products .product .onsale,
[dir="rtl"] .site-content .products .product .product-inner .brand,
[dir="rtl"] .site-content .products .product .product-inner .posted_in,
[dir="rtl"] .site-content .products .product .onsale{ letter-spacing: 0; text-transform: none; }

/* ── Fallback home hero (shown when no slides exist): flat slate panel ── */
.tj-home-hero{
    position: relative;
    overflow: hidden;
    background: #0d1424;
    color: #fff;
    border: 1px solid #263049;
    border-radius: var(--tj-r-lg);
    padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px);
    margin: 10px 0 30px;
    box-shadow: none;
}
.tj-home-hero-eyebrow{
    display: inline-flex; align-items: center;
    background: #131a2c;
    border: 1px solid #263049;
    border-radius: var(--tj-r);
    padding: 6px 12px;
    margin-bottom: 14px;
    font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tj-brand-300);
}
html[lang="ar"] .tj-home-hero-eyebrow,
[dir="rtl"] .tj-home-hero-eyebrow{ letter-spacing: 0; text-transform: none; font-size: 12px; }
.tj-home-hero h2{
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
}
html[lang="ar"] .tj-home-hero h2,
[dir="rtl"] .tj-home-hero h2{ letter-spacing: 0; line-height: 1.25; }
.tj-home-hero p{
    margin: 0 0 22px;
    color: #c3cbdb;
    font-size: 15.5px;
    max-width: 60ch;
}
.tj-home-hero .tj-btn-cta{ display: inline-flex; }

/* ── "Best Selling" cards: clean grid (replaces the broken carousel) ── */
.tj-cards-grid .products{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 16px; padding: 0;
    list-style: none;
    float: none !important;
    width: 100% !important;
}
.tj-cards-grid .products .product{
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}
.tj-cards-grid .product-card .product-outer{ height: 100%; }
.tj-cards-grid .product-card .product-inner{
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 14px !important;
}
.tj-cards-grid .product-card .media-left{
    flex: 0 0 110px;
    height: 110px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tj-surface-alt);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r);
    overflow: hidden;
    padding: 0 !important;
}
.tj-cards-grid .product-card .media-left img{
    max-width: 100% !important; max-height: 100% !important;
    width: auto !important; height: auto !important;
    object-fit: contain;
}
.tj-cards-grid .product-card .media-body{ flex: 1 1 auto; min-width: 0; }
@media (max-width: 1100px){ .tj-cards-grid .products{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .tj-cards-grid .products{ grid-template-columns: minmax(0, 1fr); } }

/* hide any owl carousel that initialized with zero items (no data) */
.owl-carousel.owl-loaded:not(:has(.owl-item)){ display: none !important; }

/* ── Home product rows: responsive grid (replaces the owl carousels) ── */
.tj-grid-6{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    width: auto !important;
}
.tj-grid-6 .product{
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    display: block;
}
.tj-grid-6 .product .product-outer{ height: 100%; }
/* only the first row's worth needs to show — keep the section tidy */
.tj-grid-6 .product:nth-child(n+6){ display: none; }
@media (max-width: 1200px){
    .tj-grid-6{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tj-grid-6 .product:nth-child(n+5){ display: none; }
}
@media (max-width: 991px){
    .tj-grid-6{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tj-grid-6 .product:nth-child(n+4){ display: none; }
}
@media (max-width: 640px){
    .tj-grid-6{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tj-grid-6 .product:nth-child(n+5){ display: none; }
    .tj-grid-6 .product:nth-child(-n+4){ display: block; }
}

/* ── Category-tab product panes: clean 3-col grid ── */
.products-carousel-tabs .tab-pane .products{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: auto !important;
    margin: 0; padding: 0;
    list-style: none;
}
.products-carousel-tabs .tab-pane .products .product{
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}
.products-carousel-tabs .tab-pane .products .product .product-outer{ height: 100%; }
@media (max-width: 991px){
    .products-carousel-tabs .tab-pane .products{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
    .products-carousel-tabs .tab-pane .products{ grid-template-columns: minmax(0, 1fr); }
}

/* ── Featured 2-1-2 band: grid with a hero card in the middle ── */
.columns-2-1-2{
    display: grid !important;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 16px;
    align-items: stretch;
}
.columns-2-1-2 .products{
    display: grid !important;
    gap: 16px;
    width: auto !important;
    margin: 0 !important; padding: 0;
    float: none !important;
    list-style: none;
    align-content: start;
}
.columns-2-1-2 .products .product{
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}
.columns-2-1-2 .products .product .product-outer{ height: 100%; }
.columns-2-1-2 .product-main-2-1-2 .product-thumbnail{ height: 420px !important; }
@media (max-width: 991px){
    .columns-2-1-2{ grid-template-columns: minmax(0, 1fr); }
    .columns-2-1-2 .product-main-2-1-2 .product-thumbnail{ height: 240px !important; }
}

/* ── Motion off ── */
@media (prefers-reduced-motion: reduce){
    .tj-header, .tj-btn-cta, .products .product .product-outer,
    .tj-header .tj-nav-link, .tj-header .tj-icon-btn, .tj-foot-socials a,
    .container.account-details .nav-pills .nav-link{ transition: none !important; }
}