/* ============================================
   JARIR BOOKSTORE - COMPLETE DESIGN SYSTEM
   Font: Tajawal | Colors: Jarir.com palette
   Font loaded via <link> in header.php — NOT @import (blocks rendering)
   ============================================ */

:root {
    --primary: #2d3a8c;
    --primary-dark: #1e2a6e;
    --primary-light: #4254b5;
    --accent-red: #dc2626;
    --accent-red-dark: #b91c1c;
    --green: #16a34a;
    --green-light: #dcfce7;
    --orange: #ff952c;
    --bg-body: #f5f6fa;
    --bg-white: #ffffff;
    --bg-light: #f9fafc;
    --bg-topbar: #f9fafc;
    --text-primary: #273444;
    --text-secondary: #42526e;
    --text-muted: #8492a6;
    --text-light: #a0aec0;
    --border: #e0e6ed;
    --border-light: #eff2f7;
    --border-topbar: #e5e9f2;
    --link-blue: #0052cc;
    --hover-bg: #eff2f7;
    --deliver-bg: #e8ebee;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --shadow-dropdown: 0 -2px 15px rgba(0,0,0,0.08), 0 15px 35px rgba(43,64,78,0.15);
    --shadow-pill: 0 1px 4px rgba(0,0,0,0.08);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --font: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transition: 0.2s ease;
    --container: 1200px;
    /* Icon filters matching Jarir specs */
    --icon-filter-default: invert(26%) sepia(76%) saturate(258%) hue-rotate(178deg) brightness(95%) contrast(85%);
    --icon-filter-hover: invert(21%) sepia(54%) saturate(4628%) hue-rotate(240deg) brightness(75%) contrast(106%);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; display: block; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font); }
ul, ol { list-style: none; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }

/* ============================================
   TOP BAR
   ============================================ */
.top-bar {
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border-topbar);
    font-size: 12px;
    color: var(--text-secondary);
}
.top-bar .container {
    display: flex;
    align-items: center;
    height: 40px;
}
.top-bar__list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.top-bar__item {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border-left: 1px solid var(--border-topbar);
}
.top-bar__item:first-child {
    border-left: none;
}
[dir="rtl"] .top-bar__item {
    border-left: none;
    border-right: 1px solid var(--border-topbar);
}
[dir="rtl"] .top-bar__item:first-child {
    border-right: none;
}
.top-bar__item--push {
    margin-inline-start: auto;
}
.top-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
    transition: all var(--transition);
    text-decoration: none;
}
.top-bar__link:hover {
    background: var(--hover-bg);
    color: var(--link-blue);
}
.top-bar__link:hover .top-bar__icon {
    filter: var(--icon-filter-hover);
}
.top-bar__icon {
    width: 16px;
    height: 16px;
    filter: var(--icon-filter-default);
    transition: filter var(--transition);
}
.top-bar__icon--flag, img[src*="/flags/"] {
    filter: none !important;
}
.top-bar__badge {
    background: var(--orange);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-inline-start: 2px;
}
.top-bar__link--lang {
    font-weight: 700;
    color: var(--link-blue) !important;
}

@media (min-width: 992px) {
    .top-bar__link {
        font-size: 14px;
    }
}

/* ============================================
   MAIN HEADER
   ============================================ */
.header {
    position: relative;
    z-index: 100;
}
.header__main {
    background: linear-gradient(to bottom, transparent, #fff);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.header--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.header--fixed .header__main {
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.header__inner {
    display: flex;
    align-items: center;
    height: 72px;
    gap: 12px;
}

/* Burger (mobile only, hidden on desktop) */
.header__burger {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--deliver-bg);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    margin-inline-end: 24px;
}
.header__burger img {
    width: 20px;
    height: 20px;
}

/* Logo */
.header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    max-width: 200px;
}
.header__logo-img {
    height: 32px;
    width: auto;
}
@media (min-width: 768px) {
    .header__logo-img { height: 40px; }
}
.header__logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-red);
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.header__logo-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.2;
}

/* Deliver to pill */
.header__deliver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--deliver-bg);
    border-radius: 24px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 14px;
}
.header__deliver:hover {
    background: #dde0e3;
}
.header__deliver-icon {
    width: 16px;
    height: 16px;
    filter: var(--icon-filter-default);
    flex-shrink: 0;
}
.header__deliver-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.header__deliver-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 300;
}
.header__deliver-city {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.header__deliver-arrow {
    width: 10px;
    height: 10px;
    filter: var(--icon-filter-default);
    margin-inline-start: 4px;
}

/* Search */
.header__search {
    flex: 1;
    max-width: 520px;
    position: relative;
}
.header__search input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 0 16px 0 42px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    background: #fff;
    outline: none;
    transition: border-color var(--transition);
}
[dir="rtl"] .header__search input {
    padding: 0 42px 0 16px;
}
.header__search input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-light);
}
.header__search input:focus {
    border-color: var(--link-blue);
}
.header__search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    filter: var(--icon-filter-default);
    pointer-events: none;
}
[dir="rtl"] .header__search-icon {
    left: auto;
    right: 16px;
}

/* Search suggestions dropdown */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-dropdown);
    z-index: 200;
    display: none;
    max-height: 400px;
    overflow-y: auto;
}
.search-suggestions.active { display: block; }
.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background var(--transition);
}
.search-suggestion-item:hover { background: var(--hover-bg); }
.search-suggestion-item img { width: 40px; height: 40px; object-fit: contain; }
.search-suggestion-item .ssi-name { font-size: 13px; color: var(--text-primary); }
.search-suggestion-item .ssi-price { font-size: 12px; color: var(--accent-red); font-weight: 700; }

/* Nav pills (Browse Categories / Brands) */
.header__nav-pill {
    position: relative;
    flex-shrink: 0;
}
.header__pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 19px;
    background: #fff;
    border-radius: 28px;
    box-shadow: var(--shadow-pill);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
    border: none;
    height: 40px;
}
.header__pill-btn:hover {
    box-shadow: var(--shadow-md);
    color: var(--link-blue);
}
.header__pill-icon {
    width: 16px;
    height: 16px;
    filter: var(--icon-filter-default);
}
.header__pill-btn:hover .header__pill-icon {
    filter: var(--icon-filter-hover);
}
.header__pill-arrow {
    width: 10px;
    height: 10px;
    filter: var(--icon-filter-default);
    transition: transform var(--transition);
}
.header__pill-btn:hover .header__pill-arrow {
    filter: var(--icon-filter-hover);
}

/* Cart icon */
.header__cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
}
.header__cart-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow-pill);
    transition: all var(--transition);
}
.header__cart-icon-wrap:hover {
    box-shadow: var(--shadow-md);
}
.header__cart-icon-wrap img {
    width: 20px;
    height: 20px;
    filter: var(--icon-filter-default);
}
.header__cart-icon-wrap:hover img {
    filter: var(--icon-filter-hover);
}
.cart-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--orange);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}
[dir="rtl"] .cart-badge { right: auto; left: -8px; }

/* ============================================
   MEGA MENU (Categories & Brands dropdowns)
   ============================================ */
.mega-menu-wrapper { position: relative; }
.mega-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 242px;
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-dropdown);
    z-index: 150;
    padding: 4px 0;
    display: none;
    max-height: 480px;
    overflow-y: auto;
}
/* Dropdown caret/arrow */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 4px rgba(0,0,0,0.04);
}
[dir="rtl"] .mega-menu::before {
    left: auto;
    right: 24px;
}
[dir="rtl"] .mega-menu { left: auto; right: 0; }
.mega-menu.active { display: block; animation: menuFadeIn .15s ease; }
@keyframes menuFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.header__pill-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.header__pill-btn.active .header__pill-icon { filter: brightness(0) invert(1); }
.header__pill-btn.active .header__pill-arrow { filter: brightness(0) invert(1); transform: rotate(180deg); }
.header__pill-arrow { transition: transform .2s ease; }
.mega-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all var(--transition);
    text-decoration: none;
}
.mega-menu-item:hover {
    background: var(--hover-bg);
    color: var(--link-blue);
}
.mega-menu-item .count {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-body);
    padding: 2px 8px;
    border-radius: 10px;
}
.mega-menu-search {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 4px;
}
.mega-menu-search input {
    width: 100%;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 12px;
    font-size: 13px;
    outline: none;
}
.mega-menu-search input:focus { border-color: var(--link-blue); }

/* ============================================
   MOBILE HEADER (shown below 768px)
   ============================================ */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-white);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow-y: auto;
}
.mobile-menu-overlay.active { display: flex; }
.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.mobile-menu-header .close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-primary);
}
.mobile-menu-logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-red);
    text-decoration: none;
}
.mobile-menu-items { padding: 8px 0; flex: 1; }
.mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 15px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
    transition: background var(--transition);
}
.mobile-menu-item:hover { background: var(--hover-bg); }
.mobile-menu-item .mmi-icon {
    display: inline-flex;
    width: 24px;
    align-items: center;
    justify-content: center;
    margin-inline-end: 12px;
}
.mobile-menu-item .mmi-icon img {
    width: 18px;
    height: 18px;
    filter: var(--icon-filter-default);
}
.mobile-menu-item .mmi-badge {
    background: var(--accent-red);
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}
.mobile-menu-section-title {
    padding: 16px 20px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile deliver bar */
.mobile-deliver-bar {
    display: none;
    padding: 10px 16px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-topbar);
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    transition: background var(--transition);
}
.mobile-deliver-bar:hover { background: var(--hover-bg); }
.mobile-deliver-bar__inner {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mobile-deliver-bar__icon {
    width: 14px;
    height: 14px;
    filter: var(--icon-filter-default);
}
.mobile-deliver-bar__label {
    color: var(--text-muted);
    font-size: 13px;
}
.mobile-deliver-bar__city {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 13px;
}

/* ============================================
   DELIVERY MODAL
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-overlay.active { display: flex; }
.modal-box {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}
.modal-header h3 { font-size: 18px; font-weight: 700; }
.modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-muted);
    border-radius: 50%;
    transition: all var(--transition);
}
.modal-close:hover { background: var(--hover-bg); color: var(--text-primary); }
.modal-body { padding: 24px; }
.modal-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-body);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    cursor: pointer;
    transition: all var(--transition);
}
.modal-back-btn:hover { background: var(--border); }

/* City list */
.city-search-input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 16px;
    font-size: 14px;
    margin-bottom: 16px;
    outline: none;
}
.city-search-input:focus { border-color: var(--link-blue); }
.city-list { max-height: 300px; overflow-y: auto; }
.city-item {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}
.city-item:hover { background: var(--hover-bg); color: var(--link-blue); }
.city-item.active { background: rgba(0,82,204,0.08); color: var(--link-blue); font-weight: 700; }

/* Delivery preference */
.delivery-pref-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.delivery-pref-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
.delivery-options { display: flex; gap: 12px; margin-bottom: 16px; }
.delivery-option {
    flex: 1;
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.delivery-option.active {
    border-color: var(--link-blue);
    background: rgba(0,82,204,0.03);
}
.delivery-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.delivery-option .do-icon { font-size: 32px; }
.delivery-option .do-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.delivery-note { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ============================================
   CART SIDEBAR (Desktop)
   ============================================ */
/* ============================================
   MINI-CART MODAL (Jarir-style)
   ============================================ */
.modal__wrapper {
    display: flex;
    position: fixed;
    z-index: 100;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.4);
    overflow: auto;
}
.modal {
    display: none;
    max-width: 400px;
    width: 100%;
    position: relative;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2), 0 3px 1px -2px rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.14);
    border-radius: 0;
    background: #fff;
    margin: auto;
}
@media (min-width: 768px) {
    .modal { border-radius: 8px; }
}
.modal--side {
    width: 100%;
    max-width: unset;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}
@media (min-width: 768px) {
    .modal--side {
        position: fixed;
        max-width: 450px;
        top: 0;
        right: 0;
        height: 100%;
        overflow-y: auto;
        margin: 0;
        border-radius: 0;
    }
    [dir="rtl"] .modal--side { right: auto; left: 0; }
}
.modal__header {
    height: 60px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 24px;
}
.modal--mini-cart .modal__header--cart {
    height: auto;
    margin-top: 16px;
    margin-bottom: 16px;
}
.modal__close {
    margin-left: auto;
    color: #42526e;
}
[dir="rtl"] .modal__close { margin-left: 0; margin-right: auto; }
.modal__close .icon { height: 16px; }
.modal__close::after { display: none !important; }
.modal__content {
    height: fit-content;
    padding: 8px 24px 32px;
    border-radius: 0 0 8px 8px;
}
.modal--mini-cart .modal__content--cart {
    padding-top: 0;
    padding-bottom: 48px;
}
.modal__fixed-button {
    position: fixed;
    display: flex;
    z-index: 100;
    justify-content: space-between;
    bottom: 0;
    width: 100%;
    padding: 8px 16px;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.2), 0 3px 3px -2px rgba(0,0,0,0.12), 0 3px 4px 0 rgba(0,0,0,0.14);
    background-color: #fff;
}
@media (min-width: 768px) {
    .modal__fixed-button { max-width: 450px; }
}
.modal__fixed-button .button { margin: 0 4px; }
.modal__fixed-button .button--primary {
    font-weight: bold;
    line-height: 1.8;
    border: 2px solid #0052cc;
    background: #0052cc;
    color: #fff;
    text-decoration: none;
    width: 100%;
    padding: 4px 0;
    border-radius: 4px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.2), 0 3px 3px -2px rgba(0,0,0,0.12), 0 3px 4px 0 rgba(0,0,0,0.14);
}
.modal__fixed-button .button--primary::after { display: none !important; }
.modal__fixed-button .button--primary:hover {
    border-color: #0056d6;
    background: #0056d6;
    color: #fff;
}
.modal__fixed-button .button--primary .icon svg { stroke: #fff; }

/* Mini-cart success notification */
.minicart-success {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 16px;
}
.minicart-success .icon { flex: none; }
.minicart-success .icon svg { stroke: #13ce66; }
.minicart-success__title {
    font-weight: bold;
    font-size: 16px;
    color: #13ce66;
}

/* Mini-cart product card (added to cart popup) */
.minicart-product-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
}
.minicart-product-card__image {
    width: 120px;
    min-width: 120px;
    height: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.minicart-product-card__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
.minicart-product-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.minicart-product-card__brand {
    font-size: 14px;
    font-weight: bold;
    color: #273444;
    margin-bottom: 2px;
    text-transform: uppercase;
}
.minicart-product-card__info .product-title__title {
    font-size: 14px;
    font-weight: bold;
    color: #273444;
    margin-bottom: 4px;
}
.minicart-product-card__info .product-title__info {
    margin: 2px 0 8px;
    max-width: 100%;
}
.minicart-product-card__bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: auto;
    gap: 4px 12px;
    width: 100%;
}
.minicart-product-card__price .price-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.minicart-product-card__price .price-box__row {
    margin-bottom: 0;
}
.minicart-product-card__price .price {
    font-size: 18px;
}
.minicart-product-card__price .price--old-red {
    font-size: 14px;
    margin: 0 0 0 8px;
}
.minicart-product-card__qty {
    font-size: 14px;
    color: #8492a6;
    white-space: nowrap;
    margin-left: auto;
}
.minicart-product-card__qty b {
    color: #273444;
}
@media (max-width: 480px) {
    .minicart-product-card__image {
        width: 80px;
        min-width: 80px;
        height: 80px;
    }
    .minicart-product-card__brand { font-size: 12px; }
    .minicart-product-card__info .product-title__title { font-size: 12px; }
    .minicart-product-card__price .price { font-size: 16px; }
}

/* Mini-cart line item */
.cart-line {
    display: flex;
    flex-direction: column;
    margin: 0 0 8px;
}
.cart-line__container {
    z-index: 1;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15);
    border-radius: 4px;
    background-color: #fff;
    padding: 8px;
}
.cart-line__row { display: flex; }
.cart-line__image {
    width: 72px;
    min-height: 72px;
    margin-right: 8px;
    flex-shrink: 0;
}
[dir="rtl"] .cart-line__image { margin-right: 0; margin-left: 8px; }
.cart-line__image img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    padding: 3px;
    border-radius: 4px;
}
.cart-line__info-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.cart-line__col {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 5px;
}
.cart-line__footer { display: flex; }
.cart-line__vat {
    color: #8492a6;
    font-size: 12px;
    margin-left: auto;
    line-height: 1.17;
}
[dir="rtl"] .cart-line__vat { margin-left: 0; margin-right: auto; }
.cart-line__vat b { color: #42526e; }
.cart-line__title { width: auto; }

/* Mini-cart suggested products */
.minicart-suggested { margin-bottom: 20px; }
.minicart-suggested__title {
    font-family: var(--font);
    font-weight: bold;
    font-size: 16px;
    color: #3c4858;
    margin-bottom: 16px;
}
.minicart-suggested__scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
.minicart-suggested__scroll::-webkit-scrollbar { height: 4px; }
.minicart-suggested__scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* Related tiles in minicart use product-tile with "Add" button */
.minicart-suggested .product-tile { min-width: 180px; max-width: 180px; flex-shrink: 0; }
.minicart-suggested .product-tile .product-tile__image { max-height: 130px; min-height: 130px; }
/* Blue Add button for related in minicart */
.minicart-add-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: #0052cc;
    color: #fff;
    border: none;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    transition: all 0.3s ease-in-out;
    padding: 0;
}
[dir="rtl"] .minicart-add-btn { right: auto; left: 8px; }
.minicart-add-btn:hover { background: #0056d6; }
.minicart-add-btn svg { stroke: #fff; width: 16px; height: 16px; }

/* ============================================
   BANNER CAROUSEL
   ============================================ */
.banner-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: 20px 0;
}
.banner-track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}
.banner-slide {
    min-width: 100%;
    width: 100%;
    flex: 0 0 100%;
}
.banner-slide a { display: block; line-height: 0; }
.banner-slide img { width: 100% !important; height: auto !important; display: block; border-radius: 12px; }
.banner-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.banner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all var(--transition);
}
.banner-dot.active { background: white; width: 24px; border-radius: 5px; }
.banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}
.banner-nav:hover { background: white; box-shadow: var(--shadow-md); }
.banner-nav.prev { left: 16px; }
.banner-nav.next { right: 16px; }
[dir="rtl"] .banner-nav.prev { left: auto; right: 16px; }
[dir="rtl"] .banner-nav.next { right: auto; left: 16px; }

/* ============================================
   SECTION TITLES
   ============================================ */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 32px 0 16px;
}
.section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}
.section-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.section-link:hover { text-decoration: underline; }

/* ============================================
   CATEGORY GRID
   ============================================ */
/* Category Carousel (Jarir-style) */
.cat-carousel-wrapper {
    margin: 12px 0 28px;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}
@media (min-width: 768px) { .cat-carousel-wrapper { padding: 0; } }
.cat-carousel {
    position: relative;
    overflow: hidden;
    height: auto;
}
.cat-carousel__track {
    display: flex;
    transition: transform 0.3s ease-in-out;
    gap: 16px;
}
@media (max-width: 768px) { .cat-carousel__track { gap: 8px; } }
.cat-carousel__item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: 2px 0 4px;
    transition: transform 0.2s;
}
.cat-carousel__item:hover { transform: scale(1.05); }
.cat-carousel__item:hover::after { display: none; }
.cat-carousel__img-wrap {
    width: 101px;
    height: 101px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cat-carousel__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cat-carousel__placeholder {
    font-size: 48px;
    width: 101px;
    height: 101px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 50%;
}
/* Carousel nav buttons (Jarir arrow circles) */
.cat-carousel__nav {
    position: absolute;
    top: 2px;
    height: calc(100% - 6px);
    width: 60px;
    z-index: 1;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
    border-radius: 4px;
}
.cat-carousel__nav--prev {
    left: 0;
    transform: scaleX(-1);
}
.cat-carousel__nav--next {
    right: 0;
}
.cat-carousel__nav-circle {
    display: block;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2342526e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
/* Dynamic widths matching Jarir */
@media (min-width: 992px) {
    .cat-carousel__item { width: calc((100% - (10 * 16px)) / 10.3); }
}
@media (min-width: 768px) and (max-width: 991px) {
    .cat-carousel__item { width: calc((100% - (6 * 16px)) / 6.1); }
}
@media (max-width: 767px) {
    .cat-carousel__item { width: calc((100% - (3 * 8px)) / 3.8); }
    .cat-carousel__img-wrap { width: 80px; height: 80px; }
}

/* ============================================
   PRODUCT TILE (Jarir-style)
   ============================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.product-tile {
    display: block;
    width: 100%;
}
.product-tile__item {
    position: relative;
    display: block;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.14);
    padding: 8px;
    border-radius: 8px;
    background-color: #fff;
    transition: box-shadow 0.3s ease;
    height: 100%;
    box-sizing: border-box;
}
.product-tile__item:hover {
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2), 0 3px 3px -2px rgba(0,0,0,0.12), 0 3px 4px 0 rgba(0,0,0,0.14);
}
.product-tile__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.product-tile__link:hover { color: inherit; text-decoration: none; }
.product-tile__link::after { display: none !important; }
.product-tile__col { display: block; }
.product-tile__image {
    justify-content: center;
    width: 100%;
    max-height: 160px;
    max-width: 160px;
    min-height: 160px;
    position: relative;
    margin: 0 auto;
    padding: 3px;
}
.product-tile__image .lazyload-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    max-height: 100%;
}
.product-tile__image img.image--contain {
    width: 100%;
    object-fit: contain;
    max-height: 100%;
    transition: opacity 0.25s linear;
    margin: 0 auto;
    display: block;
    border-radius: 4px;
}
.product-tile__container { margin: 2px 0 8px 0; }
.product-tile__wrapper { display: block; }
.product-tile__price-container { margin-top: 4px; }
.product-tile__price { margin: 4px 0 0; }
.product-tile__actions { margin-top: auto; }
.product-tile__actions .actions { margin: 8px 0 0; }
.product-tile__product-label { width: fit-content; }

/* Product title */
.product-title { line-height: normal; }
.product-title__title {
    color: #273444;
    font-weight: bold;
    font-size: 13px;
    line-height: 16px;
    overflow: hidden;
    display: block;
    white-space: normal;
    max-height: 48px; /* 3 lines × 16px */
    margin: 0;
    padding: 0;
    text-align: left;
}
.product-title__info {
    font-size: 12px;
    color: #3c4858;
    position: relative;
    max-height: 38px;
    overflow: hidden;
    width: 100%;
    line-height: 1.25;
    margin: 3px 0 4px 0;
    padding: 0;
}
.product-title__info--box {
    display: inline-block;
    vertical-align: top;
    max-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    border: solid 1px #d8dbdf;
    padding: 0 3px;
    border-radius: 4px;
    margin: 0 3px 3px 0;
    font-size: 11px;
}
.product-title__info--box:last-child { margin-right: 0; margin-bottom: 0; }

/* Brand logo overlay */
.product-title__logo { width: auto; display: flex; justify-content: space-between; max-height: 14px; margin: 0 0 2px 0; }
.product-title__logo--bg { background: #fff; padding-right: 8px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; max-width: 75%; }
.product-title__logo--position { position: absolute; width: 100%; bottom: 0; align-items: end; left: 0; }
.brand-label { font-size: 10px; color: #42526e; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; display: block; margin: 4px 0 2px; }

/* Base price styles */
.price { color: #f70008; font-size: 14px; font-weight: bold; line-height: 1.14; display: flex; justify-content: flex-end; }
.price__currency { font-size: 10px; font-weight: normal; color: #42526e; display: contents; line-height: 1; }
.price_alignment { display: flex; align-items: center; }
.price--old-red {
    position: relative;
    width: fit-content;
    color: #8492a6;
    font-size: 12px;
    line-height: 1.17;
    padding: 0 4px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
}
.price--old-red .price__currency { color: #8492a6; font-size: 10px; line-height: 1; }
.price--old-red::before {
    content: "";
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    border: 0.75px solid #d4070e;
    background-color: #d4070e;
    transform: rotate(-5deg);
}

/* Price box */
.price-box { display: inline-block; z-index: 20; vertical-align: middle; }
.price-box__row { display: inline-flex; align-items: center; margin-bottom: 4px; }
.price-box--list-view .price-box__row { justify-content: flex-end; }
.price-box--list-view .price-box__row .price--old-red { margin: 2px 0 0 4px; }
.product-tile .price { color: #f70008; font-size: 14px; font-weight: bold; line-height: 1.14; display: flex; justify-content: flex-start; }
.product-tile .price__currency { font-size: 10px; font-weight: normal; color: #42526e; display: contents; line-height: 1; }
.product-tile .price_alignment { display: flex; justify-content: flex-start; }
.product-tile .price--old-red {
    position: relative;
    width: fit-content;
    color: #8492a6;
    font-size: 12px;
    line-height: 1.17;
    padding: 0 4px;
    margin: -6px 0 0 4px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
}
.product-tile .price--old-red .price__currency { color: #8492a6; font-size: 10px; line-height: 1; }
.product-tile .price--old-red::before {
    content: "";
    position: absolute;
    width: 100%;
    top: 8px;
    left: 0;
    border: 0.75px solid #d4070e;
    background-color: #d4070e;
    transform: rotate(-5deg);
}

/* Save notification */
.product-tile .notification {
    display: flex;
    flex: 1 1;
    align-items: flex-start;
    position: relative;
    font-size: 12px;
    margin: 4px 0 0;
    padding: 2px 3px;
    line-height: 1.25;
}
.product-tile .notification--success { background-color: #e4faef; border-radius: 4px; }
.product-tile .notification__content { width: 100%; color: #273444; padding: 0; }
.product-tile .notification__content--save { flex-direction: row; flex-flow: wrap; display: flex; }
.product-tile .notification__save { display: flex; align-items: center; flex-wrap: wrap; line-height: 1.25; width: fit-content; overflow: hidden; }
.product-tile .notification__save--content { margin-right: 4px; font-weight: 600; color: #16a34a; }
.product-tile .notification__save .notification__price { margin-left: 0; }
.product-tile .notification__save .notification__price .price-box { align-items: flex-end; margin-top: 0; }
.product-tile .notification__save .notification__price .price-box .price { font-size: 14px; color: #1f2d3d; }
.product-tile .notification__save .notification__price .price-box .price__currency { color: #1f2d3d; font-size: 10px; }

/* Divider */
.product-tile .divider--small { display: flex; justify-content: center; border-top: 1px solid #f3f4f6; margin: 4px 0 0; }

/* Card rating (inside tile) */
.product-tile .card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
}
.product-tile .card-rating .stars { color: var(--orange); }
.product-tile .card-rating .count { color: var(--text-muted); }

/* Actions bar */
.product-tile .actions {
    display: flex;
    justify-content: space-evenly;
}
.product-tile .actions .button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 32px;
    min-width: 32px;
    width: 32px;
    height: 32px;
    line-height: 1.9;
    outline: none;
    font-family: var(--font);
    font-size: 16px;
    color: #3c4858;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    padding: 4px;
    border: none;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(23,43,77,0.25);
    position: relative;
    margin: 0;
}
.product-tile .actions .button:hover {
    color: #42526e;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.2), 0 3px 3px -2px rgba(0,0,0,0.12), 0 3px 4px 0 rgba(0,0,0,0.14);
    background-color: #fff;
}
.product-tile .actions .button:focus {
    box-shadow: none;
    border: 1px solid #0052cc;
}
.product-tile .actions .button .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}
.product-tile .actions .button svg {
    width: 16px;
    height: 16px;
    stroke: #42526e;
    transition: all 0.3s ease-in-out;
}
.product-tile .actions .button:hover svg { stroke: #42526e; }
/* Wishlist active state */
.product-tile .wishlist-tile-btn.active svg {
    fill: #d4070e;
    stroke: #d4070e;
}
.product-tile .wishlist-tile-btn:hover svg {
    stroke: #d4070e;
}

/* mt4 helper */
.mt4 { margin-top: 4px; }
.position-relative { position: relative; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* No image placeholder */
.no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 13px;
    min-height: 120px;
}

/* Product label (green) */
.product-label { color: #1f2d3d; font-size: 12px; line-height: 1.25; width: fit-content; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; border-radius: 4px; padding: 2px 3px; margin: 0; }
.product-label--green { background-color: #e4faef; }
.product-label--container { width: fit-content; display: flex; align-items: center; }

/* ============================================
   PRODUCT SCROLL (horizontal)
   ============================================ */
.product-scroll-wrapper { position: relative; }
.product-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}
.product-scroll::-webkit-scrollbar { height: 4px; }
.product-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.product-scroll .product-tile {
    min-width: 220px;
    max-width: 220px;
    flex-shrink: 0;
}
.product-scroll .product-tile .product-tile__image { max-height: 140px; min-height: 140px; }
.scroll-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    z-index: 5;
    font-size: 16px;
    color: var(--text-primary);
    transition: all var(--transition);
}
.scroll-nav:hover { box-shadow: var(--shadow-md); color: var(--primary); }
.scroll-nav.prev { left: -18px; }
.scroll-nav.next { right: -18px; }

/* ============================================
   CATALOG LAYOUT
   ============================================ */
.breadcrumbs {
    padding: 16px 0;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.breadcrumbs a { color: var(--primary); font-weight: 500; }
.breadcrumbs .sep { color: var(--text-light); }

.catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.catalog-sidebar {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--border-light);
    align-self: start;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.sidebar-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); }
.brand-list li { margin-bottom: 2px; }
.brand-list a {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}
.brand-list a:hover, .brand-list a.active {
    background: rgba(45,58,140,0.06);
    color: var(--primary);
}
.brand-list .brand-count { color: var(--text-muted); font-size: 12px; }

.catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.catalog-toolbar .results-count { font-size: 14px; color: var(--text-muted); }
.sort-select {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    background: var(--bg-white);
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
}

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.pagination a, .pagination span {
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    border: 1px solid var(--border);
    transition: all var(--transition);
}
.pagination a { background: var(--bg-white); color: var(--text-secondary); }
.pagination a:hover { background: rgba(45,58,140,0.06); border-color: var(--primary); color: var(--primary); }
.pagination .current { background: var(--primary); color: white; border-color: var(--primary); }

/* ============================================
   PRODUCT PAGE
   ============================================ */
.product-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: 32px;
    margin-top: 16px;
    border: 1px solid var(--border-light);
}
.gallery-main {
    aspect-ratio: 1;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 12px;
}
.gallery-main img { max-height: 400px; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; }
.gallery-thumbs img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 4px;
    background: var(--bg-light);
    transition: border-color var(--transition);
}
.gallery-thumbs img:hover, .gallery-thumbs img.active { border-color: var(--primary); }

.product-info .product-brand {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.product-info h1 { font-size: 22px; font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.product-info .price-block { margin: 16px 0; }
.price-block .main-price { font-size: 28px; font-weight: 800; color: var(--accent-red); }
.price-block .currency { font-size: 14px; color: var(--text-muted); }
.price-block .old { font-size: 16px; color: var(--text-muted); text-decoration: line-through; margin-inline-start: 12px; }
.price-block .save-badge {
    display: inline-block;
    background: var(--green-light);
    color: var(--green);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-inline-start: 12px;
    font-weight: 600;
}

/* Add to cart button on product page */
.add-to-cart-section { margin: 24px 0; }
.qty-selector {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 12px;
}
.qty-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    background: var(--bg-white);
    color: var(--text-primary);
    transition: all var(--transition);
}
.qty-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.qty-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.qty-btn:hover { background: var(--bg-light); color: var(--primary); }
.qty-input {
    width: 50px;
    height: 36px;
    border: 1px solid var(--border);
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    outline: none;
}
.btn-add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: var(--accent-red);
    color: white;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
}
.btn-add-to-cart:hover { background: var(--accent-red-dark); transform: translateY(-1px); }
.btn-wishlist {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    background: var(--bg-white);
    color: var(--text-primary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    margin-top: 8px;
}
.btn-wishlist:hover { border-color: var(--accent-red); color: var(--accent-red); }
.btn-wishlist.active { border-color: var(--accent-red); color: var(--accent-red); background: rgba(220,38,38,0.05); }

/* Specs table */
.specs-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.specs-table tr { border-bottom: 1px solid var(--border-light); }
.specs-table th, .specs-table td { padding: 10px 12px; text-align: start; font-size: 13px; }
.specs-table th { color: var(--text-muted); font-weight: 500; width: 140px; }
.specs-table td { color: var(--text-primary); }

/* Variant selectors */
.variants-section { margin: 16px 0; }
.variants-section h3 { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.variant-btn {
    padding: 6px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    cursor: pointer;
    background: var(--bg-white);
    color: var(--text-secondary);
    transition: all var(--transition);
}
.variant-btn:hover { border-color: var(--primary); }
.variant-btn.active { border-color: var(--primary); background: rgba(45,58,140,0.06); color: var(--primary); font-weight: 600; }

.color-options { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.color-thumb {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    padding: 2px;
    background: var(--bg-white);
    transition: border-color var(--transition);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.color-thumb:hover { border-color: var(--primary); }
.color-thumb.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.color-thumb img { width: 24px; height: 24px; object-fit: contain; }
.color-thumb .color-label { font-size: 7px; color: var(--text-secondary); text-align: center; }

/* Reviews & Related */
.reviews-section, .relations-section {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: 28px;
    margin-top: 20px;
    border: 1px solid var(--border-light);
}
.reviews-section h2, .relations-section h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.review-card { border-bottom: 1px solid var(--border-light); padding: 16px 0; }
.review-card:last-child { border: none; }
.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.review-author { font-weight: 600; font-size: 14px; }
.review-date { font-size: 12px; color: var(--text-muted); }
.review-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.review-text { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.review-rating { color: var(--orange); }
.rating-stars { color: var(--orange); font-size: 16px; }
.rating-text { color: var(--text-muted); font-size: 14px; }

.related-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
}
.related-scroll .product-tile { min-width: 180px; max-width: 180px; flex-shrink: 0; }
.related-scroll .product-tile .product-tile__image { max-height: 120px; min-height: 120px; }

/* ============================================
   CART PAGE
   ============================================ */
/* ============================================
   JARIR-STYLE CART PAGE
   ============================================ */
.jarir-cart-page {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}
@media (min-width: 768px) {
    .jarir-cart-page { flex-wrap: nowrap; }
}
.jarir-cart-main { flex: 1; min-width: 0; }
.jarir-cart-sidebar { width: 100%; }
@media (min-width: 768px) {
    .jarir-cart-sidebar { width: 33.333%; max-width: 380px; flex-shrink: 0; }
}
.jarir-cart-title {
    font-size: 20px;
    font-weight: bold;
    color: #3c4858;
    margin-bottom: 8px;
    display: none;
}
@media (min-width: 768px) { .jarir-cart-title { display: block; } }
.jarir-cart-count { font-size: 14px; font-weight: normal; color: #8492a6; }

/* ---- Page--cart overrides (matching Jarir.com exactly) ---- */
.page--cart .cart-line { margin: 16px 0 0; }
.page--cart .cart-line .product-tile__item {
    margin: 0;
    max-width: initial;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.14);
    padding: 12px;
    border-radius: 16px;
    background-color: #fff;
}
.page--cart .product-tile--list .product-tile__image {
    width: 140px;
    height: 132px;
    min-height: 72px !important;
    max-width: 140px;
    max-height: 132px;
    margin: 0 8px 0 0;
    flex-shrink: 0;
}
[dir="rtl"] .page--cart .product-tile--list .product-tile__image {
    margin: 0 0 0 8px;
}
.page--cart .product-tile--list .product-tile__col {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.page--cart .product-tile--list .product-tile__container {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    width: 100%;
    margin: 0;
}
.page--cart .product-tile--list .product-tile__wrapper {
    display: flex;
    flex-direction: column;
}
.page--cart .product-tile__actions {
    margin: 8px 0 0 0;
}
.page--cart .product-tile__actions .actions {
    gap: 5px;
    margin: 0;
    justify-content: flex-end;
}
/* Hide the empty left actions__col */
.page--cart .product-tile__actions .actions .actions__col:first-child:empty {
    display: none;
}
.page--cart .product-tile--list .product-title {
    width: auto;
}
.page--cart .product-tile--list .product-title__logo {
    width: fit-content;
    justify-content: start;
}
/* Quantity controls row: trash, minus, number, plus — all together right-aligned */
.page--cart .product-tile__quantity {
    display: flex;
    align-items: center;
}
.page--cart .product-tile__btn-container {
    width: 36px;
    height: 36px;
    border: 1px solid #eaeaea;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    color: #42526e;
}
.page--cart .product-tile__btn-container:hover {
    border-color: #c0ccda;
    background: #f9fafc;
}
.page--cart .product-tile__quantity--text-container {
    background: #eaeaea;
    border-radius: 16px;
    padding: 5px 10px;
    margin: 0 4px;
}
.page--cart .product-tile__quantity--text {
    min-width: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
}

/* Summary card */
.jarir-cart-summary-card {
    background: #fff;
    border-radius: 4px;
    padding: 16px;
    position: sticky;
    top: 130px;
}
@media (min-width: 768px) {
    .jarir-cart-summary-card {
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.14);
    }
}
.jarir-summary-section { margin: 0; }
.jarir-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.jarir-summary-label { font-size: 14px; font-weight: bold; color: #42526e; }
.jarir-summary-value { font-size: 14px; font-weight: 600; color: #42526e; }
.jarir-summary-total .jarir-summary-label,
.jarir-summary-total .jarir-summary-value { font-size: 22px; line-height: 0.9; }

/* Promo message */
.promo-message { font-size: 12px; margin-top: 4px; }
.promo-message.success { color: var(--green); }
.promo-message.error { color: var(--accent-red); }

/* Empty cart */
.jarir-cart-empty {
    text-align: center;
    padding: 60px 20px;
    margin: 40px 0 128px;
}
.jarir-cart-empty svg { margin-bottom: 16px; }
.jarir-cart-empty h3 { font-size: 20px; color: #273444; margin-bottom: 8px; }

/* Mobile cart layout */
@media (max-width: 767px) {
    .jarir-cart-page {
        flex-direction: column;
        gap: 0;
        margin-top: 0;
    }
    .jarir-cart-main { order: 1; margin-bottom: 15px; }
    .jarir-cart-sidebar { width: 100%; order: 2; }

    /* Summary card on mobile */
    .jarir-cart-summary-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15);
        padding: 12px;
        position: relative;
        top: auto;
        margin-bottom: 8px;
    }

    /* Cart title visible on mobile */
    .jarir-cart-title {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 18px;
        margin: 8px 0;
    }

    /* Cart items mobile */
    .page--cart .product-tile--list .product-tile__image {
        width: 72px;
        height: 72px;
        min-height: 72px !important;
        max-width: 72px;
        max-height: 72px;
    }

    /* Summary section mobile refinements */
    .jarir-summary-row {
        margin-bottom: 6px;
    }
    .jarir-summary-label {
        font-size: 13px;
    }
    .jarir-summary-value {
        font-size: 13px;
    }
    .jarir-summary-total .jarir-summary-label,
    .jarir-summary-total .jarir-summary-value {
        font-size: 18px;
    }

    /* Related products on mobile */
    .jarir-cart-page + div .product-scroll-wrapper {
        margin: 0 -16px;
        padding: 0 16px;
    }
    .jarir-cart-page + div h2 {
        font-size: 16px;
    }

    /* Brand label in cart */
    .jarir-cart-page .brand-label {
        font-size: 10px;
    }
}

/* Sticky checkout button on mobile */
.jarir-mobile-checkout-sticky {
    display: none;
}
@media (max-width: 767px) {
    .jarir-mobile-checkout-sticky {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5;
        background: #fff;
        padding: 8px 16px;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .jarir-mobile-checkout-sticky .mobile-total {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .jarir-mobile-checkout-sticky .mobile-total-label {
        font-size: 11px;
        color: #8492a6;
        font-weight: 600;
    }
    .jarir-mobile-checkout-sticky .mobile-total-price {
        font-size: 18px;
        font-weight: bold;
        color: #d4070e;
        line-height: 1.2;
    }
    .jarir-mobile-checkout-sticky .mobile-total-price .price__currency {
        font-size: 12px;
        color: #d4070e;
    }
    .jarir-mobile-checkout-sticky .button {
        flex: 1;
        max-width: 200px;
        margin: 0;
        border-radius: 8px;
        min-height: 44px;
    }

    /* Desktop checkout button hidden on mobile */
    .jarir-desktop-checkout {
        display: none;
    }

    /* Add bottom padding to page for sticky button */
    .page--cart-mobile-pad {
        padding-bottom: 80px;
    }
}
@media (min-width: 768px) {
    .jarir-mobile-checkout-sticky {
        display: none;
    }
}

/* ============================================
   CART SUMMARY — Jarir Style
   ============================================ */
.cart-delivery-pill {
    background: #f3f4f6; border-radius: 24px; padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; cursor: pointer;
}
.cart-delivery-pill__text { font-size: 14px; color: #42526e; }
.cart-delivery-date { margin-bottom: 16px; padding: 0 4px; }
.cart-delivery-date__expected { display: block; font-size: 14px; font-weight: 700; color: #13ce66; }
.cart-delivery-date__note { display: block; font-size: 12px; color: #8492a6; margin-top: 2px; }
.cart-summary-divider { height: 1px; background: #e0e6ed; margin: 14px 0; }
.cart-summary-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 6px 0;
}
.cart-summary-row__label { font-size: 14px; font-weight: 700; color: #42526e; }
.cart-summary-row__value { font-size: 14px; font-weight: 700; color: #42526e; white-space: nowrap; }
.cart-summary-row__value--green { color: #13ce66 !important; }
.cart-sr { font-size: 11px; font-weight: normal; color: #8492a6; margin-right: 2px; }
.cart-amount { font-weight: 800; }
.cart-free-ship { font-size: 12px; color: #8492a6; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.cart-card-coupon-row {
    display: flex; gap: 12px; margin: 4px 0 12px;
}
.cart-card-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 8px; border: 1px solid #d3dce6; border-radius: 6px;
    background: white; font-size: 13px; font-weight: 600; color: #1e3799;
    cursor: pointer; font-family: var(--font); transition: all 0.15s;
}
.cart-card-btn:hover { background: #f0f4ff; border-color: #1e3799; }
.cart-terms { font-size: 12px; color: #1f2d3d; line-height: 20px; margin: 8px 0 12px; }
.cart-terms a { color: #1e3799; font-size: 12px; }
.cart-checkout-btn {
    width: 100%; height: 50px; background: #d4070e; color: white; border: none;
    border-radius: 6px; font-size: 16px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font); transition: background 0.15s;
}
.cart-checkout-btn:hover { background: #b50610; }

/* VAT Summary */
.vat-summary {
    margin: 32px 0; padding: 32px 0;
    border-top: 1px solid #e0e6ed;
}
.vat-summary__title { font-size: 28px; font-weight: 800; color: #2c3e50; margin-bottom: 4px; }
.vat-summary__subtitle { font-size: 14px; color: #8492a6; margin-bottom: 24px; }
.vat-summary__grid {
    display: flex; gap: 0; background: #f0f2f5; border-radius: 12px;
    padding: 24px; align-items: stretch;
}
.vat-summary__labels {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-right: 20px; min-width: 100px;
}
.vat-summary__label-item {
    font-size: 14px; font-weight: 600; color: #8492a6;
    height: 44px; display: flex; align-items: center;
    border-top: 1px solid #d3dce6; padding-top: 4px;
}
.vat-summary__label-item:first-child { margin-top: auto; }
.vat-summary__card {
    flex: 1; background: white; border-radius: 10px;
    padding: 16px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: flex; flex-direction: column; align-items: center;
    margin: 0 6px;
}
.vat-summary__card-header { text-align: center; margin-bottom: 8px; }
.vat-summary__card-title { display: block; font-size: 15px; font-weight: 700; color: #2c3e50; }
.vat-summary__card-sub { display: block; font-size: 11px; color: #8492a6; }
.vat-summary__card-divider { width: 100%; height: 1px; background: #e8ecf0; margin: 6px 0; }
.vat-summary__card-value {
    font-size: 18px; font-weight: 700; color: #2c3e50;
    height: 36px; display: flex; align-items: center; justify-content: center;
}
.vat-summary__card-value .cart-sr { font-size: 12px; margin-right: 4px; }

/* Modal small variant */
.modal-box--sm { max-width: 440px; }

@media (max-width: 767px) {
    .vat-summary__grid { flex-direction: column; gap: 12px; padding: 16px; }
    .vat-summary__labels { display: none; }
    .vat-summary__card { margin: 0; }
    .cart-card-coupon-row { flex-direction: column; gap: 8px; }
}

/* ============================================
   WISHLIST PAGE
   ============================================ */
.wishlist-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.wishlist-empty .icon { font-size: 64px; margin-bottom: 16px; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--text-primary);
    color: #c8d1dc;
    margin-top: 40px;
}
.footer-main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding: 40px 0;
}
.footer-col h4 {
    color: white;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col a { color: #9ba8b8; font-size: 13px; transition: color var(--transition); }
.footer-col a:hover { color: white; }
.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.footer-social a {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #9ba8b8;
    transition: all var(--transition);
}
.footer-social a:hover { background: var(--primary); color: white; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #6b7a8d;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-payments { display: flex; gap: 8px; align-items: center; }
.footer-payments span {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: #9ba8b8;
}

/* ============================================
   ADMIN PANEL (basic overrides, main in admin.css)
   ============================================ */

/* ============================================
   SALE SECTION
   ============================================ */
.sale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

/* ============================================
   UTILITY
   ============================================ */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .header__nav-pill { display: none; }
    .header__deliver { display: none; }
    .header__search { max-width: 100%; }
    .footer-main { grid-template-columns: repeat(2, 1fr); }
    /* cart layout handled by jarir-cart-page flexbox */
}

@media (max-width: 768px) {
    .top-bar { display: none; }
    .header__inner {
        height: 56px;
    }
    /* Hide desktop-only elements */
    .header__logo-sub { display: none; }
    .header__deliver { display: none; }
    .header__nav-pill { display: none; }

    /* Show burger on mobile */
    .header__burger {
        display: flex;
    }

    /* Mobile logo: smaller */
    .header__logo-text {
        font-size: 20px;
    }

    /* Mobile search: rounded pill */
    .header__search input {
        height: 38px;
        font-size: 13px;
        font-weight: 400;
        border-radius: 24px;
        background: var(--bg-light);
    }
    .header__search-icon {
        width: 14px;
        height: 14px;
    }

    /* Mobile cart icon: bg pill */
    .header__cart-icon-wrap {
        background: var(--deliver-bg);
        box-shadow: none;
        width: 36px;
        height: 36px;
        padding: 6px;
    }

    /* Show mobile deliver bar */
    .mobile-deliver-bar { display: flex; }

    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-sidebar { position: static; max-height: none; }
    .product-page { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    /* cat-grid replaced by cat-carousel */
    .banner-carousel { margin: 12px 0; border-radius: 8px; }
    .banner-slide img { border-radius: 8px; }
    .banner-nav { width: 32px; height: 32px; font-size: 14px; }
    .banner-nav.prev { left: 8px; }
    .banner-nav.next { right: 8px; }
    .banner-dots { bottom: 8px; gap: 5px; }
    .banner-dot { width: 7px; height: 7px; }
    .banner-dot.active { width: 18px; }
    .footer-main { grid-template-columns: 1fr; gap: 24px; }

    /* Mini-cart modal adjustments for mobile handled by default responsive styles */
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-tile__item { padding: 6px; }
    .product-tile__image { max-height: 120px; min-height: 120px; max-width: 120px; }
    .product-title__title { font-size: 11px; }
    .product-tile .price { font-size: 12px; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ============================================
   RTL SUPPORT
   ============================================ */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .breadcrumbs { direction: rtl; }
[dir="rtl"] .mega-menu { left: auto; right: 0; }
[dir="rtl"] .product-title__info--box { margin: 0 0 3px 3px; }
[dir="rtl"] .product-title__logo--position { left: auto; right: 0; }
[dir="rtl"] .cart-badge { right: auto; left: -8px; }
[dir="rtl"] .scroll-nav.prev { left: auto; right: -18px; }
[dir="rtl"] .scroll-nav.next { right: auto; left: -18px; }
[dir="rtl"] .top-bar__item {
    border-left: none;
    border-right: 1px solid var(--border-topbar);
}
[dir="rtl"] .top-bar__item:first-child {
    border-right: none;
}

/* ============================================
   PDP — PRODUCT DETAIL PAGE (Jarir Style)
   ============================================ */

/* Breadcrumbs */
.pdp-breadcrumbs {
    padding: 12px 0;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pdp-breadcrumbs a { color: var(--text-secondary); }
.pdp-breadcrumbs a:hover { color: var(--link-blue); }
.pdp-breadcrumbs__sep { color: var(--text-light); font-size: 11px; }
.pdp-breadcrumbs__current { color: var(--link-blue); font-weight: 600; }

/* Main 3-column layout */
.pdp {
    display: grid;
    grid-template-columns: 1fr 1fr 340px;
    gap: 0 24px;
    background: var(--bg-white);
    border-radius: 0;
    padding: 16px 0;
    margin-top: 0;
}

/* Gallery */
.pdp__gallery {
    position: sticky;
    top: 88px;
    align-self: start;
}
.pdp__gallery-main {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 5px rgba(0,0,0,0.08), 0 3px 1px -2px rgba(0,0,0,0.06), 0 2px 2px rgba(0,0,0,0.07);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    overflow: hidden;
}
.pdp__gallery-img {
    max-height: 380px;
    max-width: 100%;
    object-fit: contain;
    cursor: zoom-in;
}
.pdp__gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.pdp__gallery-thumbs::-webkit-scrollbar { height: 3px; }
.pdp__gallery-thumbs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.pdp__thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: 4px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: border-color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-white);
}
.pdp__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp__thumb:hover { border-color: var(--border); }
.pdp__thumb--active { border-color: #0052cc !important; }

/* Product info column */
.pdp__info { padding: 0 8px; }
.pdp__sku-row {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.pdp__sku-row b { color: var(--text-secondary); }
.pdp__brand {
    font-size: 13px;
    font-weight: 700;
    color: #7a8599;
    margin-bottom: 4px;
}
.pdp__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.pdp__spec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}
.pdp__spec-tag {
    display: inline-block;
    border: 1px solid #d8dbdf;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Price block */
.pdp__price-block { margin-bottom: 8px; }
.pdp__price-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.pdp__price-col { display: flex; flex-direction: column; }
.pdp__price-col--discount {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-inline-start: 8px;
}
.pdp__price {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f70008;
    font-weight: 700;
}
.pdp__price-currency { font-size: 20px; color: var(--text-secondary); font-weight: 400; }
.pdp__price-value { font-size: 34px; line-height: 1; }
.pdp__price-vat { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.pdp__discount-badge {
    display: inline-block;
    background: #13ce66;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    line-height: 1.3;
}
.pdp__old-price {
    position: relative;
    color: var(--text-muted);
    font-size: 14px;
    padding: 0 4px;
    margin-top: 2px;
}
.pdp__old-price::before {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    border-top: 1.5px solid #8492a6;
}
.pdp__sold-as {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Notifications */
.pdp__notif {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 8px;
}
.pdp__notif--blue {
    background: #e2edf8;
    border-inline-start: 4px solid #0052cc;
    color: var(--text-primary);
}
.pdp__notif--green {
    background: #e4faef;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}
.pdp__notif-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.pdp__notif--blue .pdp__notif-icon { color: #0052cc; }
.pdp__notif--green .pdp__notif-icon { color: #13ce66; }
.pdp__notif-price { font-weight: 700; color: #d4070e; }
.pdp__notif-months { font-weight: 600; }
.pdp__notif-save-amount { font-weight: 700; font-size: 16px; color: #1f2d3d; margin-inline-start: 4px; }

/* Rating */
.pdp__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.pdp__rating-stars { display: flex; gap: 2px; }
.pdp__star {
    width: 16px;
    height: 16px;
    fill: #d3dce6;
    stroke: none;
}
.pdp__star--filled { fill: #ffb005; }
.pdp__star--sm { width: 12px; height: 12px; }
.pdp__rating-link { font-size: 13px; color: #0052cc; }

/* Warranty */
.pdp__warranty {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.pdp__warranty-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

/* Variants */
.pdp__variants { margin-bottom: 12px; }
.pdp__variants-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: capitalize;
    margin-bottom: 8px;
}
.pdp__variants-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp__variant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    border: 1px solid #fff;
    background: var(--bg-white);
    box-shadow: 0 2px 4px rgba(23,43,77,0.2);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}
.pdp__variant-btn:hover { border-color: #0052cc; color: #0052cc; }
.pdp__variant-btn--active {
    border: 2px solid #0052cc !important;
    color: #0052cc;
}

/* Color swatches */
.pdp__color-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp__color-swatch {
    width: 64px;
    height: 64px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    padding: 4px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: border-color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-white);
}
.pdp__color-swatch img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp__color-swatch:hover { border-color: var(--border); }
.pdp__color-swatch--active { border-color: #0052cc !important; }
.pdp__color-label {
    font-size: 10px;
    text-align: center;
    color: var(--text-secondary);
    word-break: break-word;
}

/* Sidebar */
.pdp__sidebar { position: sticky; top: 88px; align-self: start; }
.pdp__sidebar-card {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 2px 1px -1px rgba(0,0,0,0.08), 0 1px 1px rgba(0,0,0,0.1);
    padding: 16px;
}

/* Delivery pill */
.pdp__deliver-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e8ebee;
    border-radius: 24px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.pdp__deliver-pill b { font-weight: 600; }
.pdp__deliver-pill svg { flex-shrink: 0; margin-inline-start: auto; }

/* Delivery info */
.pdp__delivery-info { margin-bottom: 12px; }
.pdp__delivery-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.pdp__delivery-green { font-weight: 600; color: #16a34a; }

/* Add to cart row */
.pdp__add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.pdp__qty-select {
    width: 56px;
    height: 44px;
    border: none;
    border-radius: var(--radius-sm);
    background: #eff2f7;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    appearance: auto;
    padding: 0 4px;
}
.pdp__add-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    background: #d4070e;
    color: #fff;
    border: 2px solid #d4070e;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 1px 8px rgba(0,0,0,0.15);
}
.pdp__add-btn:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* Benefits */
.pdp__benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 12px;
}
.pdp__benefit {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
}
.pdp__benefit svg { color: var(--text-muted); flex-shrink: 0; }

.pdp__divider {
    height: 1px;
    background: var(--border-light);
    margin: 8px 0;
}

/* Actions row */
.pdp__actions-row {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}
.pdp__action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: none;
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all var(--transition);
    box-shadow: 0 1px 3px rgba(23,43,77,0.15);
}
.pdp__action-btn:hover {
    background: var(--text-secondary);
    color: #fff;
    box-shadow: 0 1px 8px rgba(0,0,0,0.15);
}
.pdp__action-btn:hover svg { stroke: #fff; }
.pdp__action-btn--active svg { fill: #d4070e; stroke: #d4070e; }
.pdp__action-btn svg { color: var(--text-secondary); }

/* ====== SECTIONS BELOW PDP ====== */
.pdp__section {
    padding: 24px 0;
    border-top: 1px solid var(--border-light);
    margin-top: 8px;
}
.pdp__section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

/* Related products scroll */
.pdp__related-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-behavior: smooth;
}
.pdp__related-scroll::-webkit-scrollbar { height: 4px; }
.pdp__related-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.pdp__related-card {
    min-width: 180px;
    max-width: 200px;
    flex-shrink: 0;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 2px 1px -1px rgba(0,0,0,0.08), 0 1px 1px rgba(0,0,0,0.1);
    padding: 8px;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition);
}
.pdp__related-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.pdp__related-img {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.pdp__related-img img { max-height: 140px; max-width: 100%; object-fit: contain; }
.pdp__related-body { padding: 4px 0; flex: 1; display: flex; flex-direction: column; }
.pdp__related-brand { font-size: 11px; font-weight: 700; color: #7a8599; margin-bottom: 2px; }
.pdp__related-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.pdp__related-price { margin-top: auto; }
.pdp__related-price-val { font-size: 14px; font-weight: 700; color: #f70008; }
.pdp__related-price-old {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-inline-start: 4px;
}

/* Specs card */
.pdp__card {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 1px rgba(23,43,77,0.15);
    overflow: hidden;
    position: relative;
}
.pdp__card[data-collapsed="true"] .pdp__card-content { max-height: 250px; overflow: hidden; }
.pdp__card[data-collapsed="false"] .pdp__card-content { max-height: none; }
.pdp__card-content { padding: 16px; transition: max-height 0.3s ease; }

.pdp__card-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #0052cc;
    cursor: pointer;
    background: linear-gradient(to top, #fff 60%, rgba(255,255,255,0));
    position: relative;
    z-index: 1;
    margin-top: -40px;
}
.pdp__card[data-collapsed="false"] .pdp__card-toggle {
    margin-top: 0;
    background: none;
    border-top: 1px solid var(--border-light);
}
.pdp__card-toggle svg { transition: transform var(--transition); }
.pdp__card[data-collapsed="false"] .pdp__card-toggle svg { transform: rotate(180deg); }

/* Specs table */
.pdp__specs-table { width: 100%; border-collapse: collapse; }
.pdp__specs-table tr { border-bottom: 1px solid var(--border-light); }
.pdp__specs-table th, .pdp__specs-table td {
    padding: 12px 16px;
    text-align: start;
    font-size: 14px;
}
.pdp__specs-table th { color: var(--text-muted); font-weight: 500; width: 200px; }
.pdp__specs-table td { color: var(--text-primary); font-weight: 600; }

/* Description */
.pdp__description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Reviews */
.pdp__reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pdp__review-summary {
    display: flex;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 16px;
}
.pdp__review-summary-left {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    border-inline-end: 2px solid var(--bg-body);
}
.pdp__review-stars-curve { display: flex; gap: 4px; margin-bottom: 8px; }
.pdp__review-stars-curve .pdp__star { width: 20px; height: 20px; }
.pdp__review-score { display: flex; align-items: baseline; gap: 2px; margin-bottom: 6px; }
.pdp__review-score-big { font-size: 44px; font-weight: 700; color: var(--text-secondary); line-height: 1; }
.pdp__review-score-small { font-size: 22px; color: var(--text-secondary); }
.pdp__review-based { font-size: 12px; color: var(--text-muted); text-align: center; }

.pdp__review-summary-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px;
}
.pdp__review-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pdp__review-bar-label { font-size: 12px; color: var(--text-muted); width: 10px; text-align: center; }
.pdp__review-bar {
    flex: 1;
    height: 8px;
    background: #eff2f7;
    border-radius: 4px;
    overflow: hidden;
}
.pdp__review-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.pdp__review-bar-fill--5 { background: #00a651; }
.pdp__review-bar-fill--4 { background: #bed62f; }
.pdp__review-bar-fill--3 { background: #ff952c; }
.pdp__review-bar-fill--2 { background: #f36f21; }
.pdp__review-bar-fill--1 { background: #d4070e; }

/* Individual reviews */
.pdp__review {
    padding: 16px 0;
    border-top: 1px solid var(--border-light);
}
.pdp__review:first-of-type { border-top: none; }
.pdp__review-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}
.pdp__review-title-text { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.pdp__review-meta { display: flex; align-items: center; gap: 4px; }
.pdp__review-stars-inline { display: flex; gap: 2px; }
.pdp__review-info { text-align: end; }
.pdp__review-author { font-size: 13px; color: var(--text-muted); }
.pdp__review-date { font-size: 12px; color: var(--text-muted); display: block; }
.pdp__review-text { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

/* ============================================
   JARIR FOOTER
   ============================================ */

/* Go to top */
.jf-top { display: flex; justify-content: center; padding-top: 32px; position: relative; top: 20px; }
.jf-top__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border-radius: 20px;
    padding: 8px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    color: #000;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: box-shadow var(--transition);
}
.jf-top__btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); color: #000; }
.jf-top__icon {
    width: 16px;
    height: 16px;
    background: rgba(0,0,0,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Payments bar */
.jf-payments-bar { background: #eff2f7; padding: 20px 0; }
.jf-payments-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.jf-payment-badge {
    font-size: 13px;
    font-weight: 600;
    color: #8492a6;
    letter-spacing: 0.5px;
}

/* Social bar */
.jf-social-bar { background: #eff2f7; padding: 0 0 24px; }
.jf-social-bar__inner {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}
.jf-social-col { flex: 1; min-width: 280px; }
.jf-social-title { font-size: 13px; color: #42526e; margin-bottom: 12px; }
.jf-social-icons { display: flex; gap: 12px; }
.jf-social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition);
}
.jf-social-icon svg { fill: #42526e; }
.jf-social-icon:hover { opacity: 0.7; }

/* Newsletter */
.jf-newsletter-col { flex: 1; min-width: 280px; }
.jf-newsletter-title { font-size: 13px; color: #42526e; margin-bottom: 8px; font-weight: 600; }
.jf-newsletter-form { display: flex; gap: 4px; }
.jf-newsletter-input {
    flex: 1;
    height: 48px;
    border: none;
    border-radius: 24px;
    padding: 0 20px;
    font-size: 14px;
    background: #fff;
    outline: none;
}
.jf-newsletter-btn {
    height: 48px;
    padding: 0 24px;
    border: 2px solid #d4070e;
    border-radius: 24px;
    background: #d4070e;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition);
}
.jf-newsletter-btn:hover { background: #b91c1c; border-color: #b91c1c; }

/* Benefits */
.jf-benefits { background: #eff2f7; padding: 24px 0 32px; }
.jf-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.jf-benefits__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 16px;
    border-inline-end: 1px solid #e0e6ed;
}
.jf-benefits__item:last-child { border-inline-end: none; }
.jf-benefits__icon { color: #7a8599; flex-shrink: 0; margin-top: 2px; }
.jf-benefits__text strong {
    display: block;
    font-size: 13px;
    color: #7a8599;
    margin-bottom: 4px;
}
.jf-benefits__text p {
    font-size: 11px;
    color: #7a8599;
    line-height: 1.5;
}

/* Main footer */
.jf-footer {
    background: #3c4858;
    color: #fff;
    padding: 32px 0 0;
    font-size: 12px;
}
.jf-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.jf-footer__heading {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #7a8599;
}
.jf-footer__list { list-style: none; margin: 0; padding: 0; }
.jf-footer__list li { margin-bottom: 8px; }
.jf-footer__list a {
    color: #fff;
    font-size: 14px;
    transition: color var(--transition);
    display: flex;
    align-items: center;
}
.jf-footer__list a:hover { color: #c0ccda; text-decoration: underline; }

/* Copyright */
.jf-copyright {
    background: #1f2d3d;
    text-align: center;
    margin-top: 24px;
    padding: 16px 0;
}
.jf-copyright p { font-size: 13px; color: #fff; }

/* ============================================
   PDP RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .pdp {
        grid-template-columns: 1fr 1fr;
    }
    .pdp__sidebar {
        grid-column: 1 / -1;
        position: static;
    }
}
@media (max-width: 768px) {
    .pdp {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 8px 0;
    }
    .pdp__gallery { position: static; }
    .pdp__gallery-main { min-height: 280px; }
    .pdp__gallery-img { max-height: 280px; }
    .pdp__sidebar { position: static; }
    .pdp__sidebar-card { box-shadow: none; border: 1px solid var(--border-light); }
    .pdp__title { font-size: 20px; }
    .pdp__price-value { font-size: 28px; }
    .pdp__price-currency { font-size: 16px; }
    .pdp__info { padding: 0; }
    .pdp__review-summary { flex-direction: column; gap: 16px; }
    .pdp__review-summary-left { width: 100%; border-inline-end: none; border-bottom: 2px solid var(--bg-body); padding-bottom: 16px; }
    .pdp__review-summary-right { padding: 0; }
    .pdp__related-card { min-width: 160px; }
    .pdp__specs-table th { width: 120px; }
}

/* Footer responsive */
@media (max-width: 768px) {
    .jf-benefits__grid { grid-template-columns: 1fr 1fr; }
    .jf-benefits__item:nth-child(2) { border-inline-end: none; }
    .jf-benefits__item:nth-child(3), .jf-benefits__item:nth-child(4) { margin-top: 16px; }
    .jf-footer__grid { grid-template-columns: 1fr 1fr; }
    .jf-social-bar__inner { flex-direction: column; }
}
@media (max-width: 480px) {
    .jf-benefits__grid { grid-template-columns: 1fr; }
    .jf-benefits__item { border-inline-end: none !important; padding: 8px 0; }
    .jf-footer__grid { grid-template-columns: 1fr; }
    .jf-newsletter-form { flex-direction: column; }
    .jf-newsletter-input { width: 100%; }
    .jf-newsletter-btn { width: 100%; }
    .pdp__benefits { grid-template-columns: 1fr; }
}

/* PDP RTL */
[dir="rtl"] .pdp__old-price::before { left: auto; right: 0; }
[dir="rtl"] .pdp__sku-row { direction: rtl; }
[dir="rtl"] .pdp__deliver-pill svg { margin-inline-start: auto; margin-inline-end: 0; }