/* ============================================================
   Sweet Center Theme — extracted from Figma design
   Frame: "Home Screen Arabic Sweet center" (1400×4477px)
   Direction: RTL | Fonts: Rubik (primary), Inter (secondary)
   ============================================================ */

/* Fonts loaded via <link> in the template head slot */

/* ── Hide Odoo's built-in header/footer when our page is active ── */
body:has(.sc-page) #o_main_nav,
body:has(.sc-page) header.o_top_fixed_element,
body:has(.sc-page) footer.o_footer,
body:has(.sc-page) #wrapwrap>footer,
body:has(.sc-page) .o_cookies_bar {
    display: none !important;
}

/* Remove default padding/margin Odoo adds to <main> */
body:has(.sc-page) #wrapwrap,
body:has(.sc-page) #wrap,
body:has(.sc-page) main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* sc-valueprop text colors */
.sc-valueprop__title {
    color: var(--sc-black);
}

.sc-valueprop__desc {
    color: var(--sc-black);
}

/* ── CSS Variables — exact Figma palette ─────────────────── */
:root {
    /* Primary — 175 uses */
    --sc-gold: #E5B157;
    /* Brand dark — 25 uses */
    --sc-navy: #16016E;
    /* Accent teal — 15 uses */
    --sc-teal: #4CD0C4;
    /* Accent blue (gradient start) — 3 uses */
    --sc-blue: #3159A1;
    /* Deep navy variant — 1 use */
    --sc-deep-navy: #131C3D;
    /* Teal dark — 1 use */
    --sc-teal-dark: #007187;

    /* Neutrals */
    --sc-black: #000000;
    /* 145 uses */
    --sc-white: #FFFFFF;
    /*  42 uses */
    --sc-surface: #F4F4F4;
    /*  32 uses — card/section bg */
    --sc-divider: #DCDCDC;
    /*  12 uses */
    --sc-border: #E7E7E7;
    /*  11 uses */
    --sc-muted: #8F8F8F;
    /*  11 uses — secondary text */
    --sc-subtle: #9A9A9A;
    /*   7 uses — placeholder */
    --sc-sage: #899C91;
    /*   4 uses */
    --sc-dark: #343434;
    /*   3 uses */
    --sc-mid-gray: #D9D9D9;
    /*   3 uses */
    --sc-light-gray: #C1C1C1;
    /*   2 uses */
    --sc-caption: #D5D3D3;
    /*   1 use  — "see more" link */
    --sc-icon-gray: #494949;
    /*   1 use  */

    /* Gradient: Frame 42 OTC banner */
    --sc-gradient: linear-gradient(135deg, #3159A1 0%, rgba(153, 153, 153, 0) 100%);

    /* Typography */
    --sc-font-main: 'Cairo', sans-serif;
    --sc-font-alt: 'Cairo', sans-serif;
}

/* ── Global RTL Reset ────────────────────────────────────── */
.sc-page,
.sc-page * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.sc-page {
    direction: rtl;
    font-family: var(--sc-font-main);
    font-size: 14px;
    color: var(--sc-black);
    background: var(--sc-white);
    max-width: 100% !important;
    overflow-x: hidden;
}

/* ── Top Bar ─────────────────────────────────────────────── */
.sc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 40px;
    border-bottom: 1px solid #E7E7E7;
    font-size: 10px;
    font-weight: 400;
    gap: 8px;
    direction: rtl;
}

.sc-topbar__nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sc-topbar__sep {
    width: 1px;
    height: 22px;
    background: var(--sc-divider);
    flex-shrink: 0;
}

.sc-topbar__link {
    text-decoration: none;
    color: var(--sc-black);
    font-family: var(--sc-font-main);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

.sc-topbar__welcome {
    color: var(--sc-black);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.sc-topbar__link--icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sc-topbar__link--icon svg {
    flex-shrink: 0;
    color: var(--sc-black);
}

.sc-topbar__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    direction: rtl;
    flex-shrink: 0;
}

.sc-topbar__login {
    font-size: 12px;
    font-weight: 700;
    color: var(--sc-black);
    text-decoration: none;
    white-space: nowrap;
}

.sc-topbar__login:hover {
    color: var(--sc-teal);
}

.sc-topbar__currency {
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

/* ── Main Navbar ─────────────────────────────────────────── */
.sc-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 40px;
    gap: 16px;
    border-bottom: 1px solid var(--sc-border);
    direction: rtl;
}

.sc-navbar__logo img {
    height: 41px;
    width: auto;
}

.sc-navbar__search {
    flex: 0 0 auto;
    max-width: 340px;
    width: 340px;
    display: flex;
    align-items: center;
    background: var(--sc-border);
    border-radius: 4px;
    overflow: hidden;
    direction: ltr;
    /* ltr so navy btn is on the left, dropdown on the right */
    height: 36px;
}

.sc-navbar__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-navy);
    border: none;
    padding: 0 12px;
    height: 100%;
    cursor: pointer;
    flex-shrink: 0;
}

.sc-navbar__search-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.sc-navbar__search-input {
    flex: 1;
    padding: 0 10px;
    border: none;
    outline: none;
    font-family: var(--sc-font-main);
    font-size: 12px;
    color: var(--sc-icon-gray);
    direction: rtl;
    text-align: right;
    background: var(--sc-border);
    height: 100%;
}

.sc-navbar__search-sep {
    width: 1px;
    height: 20px;
    background: var(--sc-muted);
    flex-shrink: 0;
}

.sc-navbar__search-cat {
    padding: 0 12px;
    font-size: 11px;
    font-weight: 400;
    color: var(--sc-black);
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    direction: rtl;
}

.sc-navbar__links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    direction: rtl;
    flex-wrap: nowrap;
    overflow: hidden;
}

.sc-navbar__link {
    font-size: 13px;
    font-weight: 500;
    color: var(--sc-black);
    text-decoration: none;
    padding: 4px 8px;
    white-space: nowrap;
    transition: color 0.2s;
}

.sc-navbar__link:hover {
    color: var(--sc-teal);
}

.sc-navbar__link-sep {
    width: 1px;
    height: 14px;
    background: var(--sc-divider);
    flex-shrink: 0;
}

.sc-navbar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.sc-navbar__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--sc-divider);
    background: var(--sc-white);
    cursor: pointer;
    text-decoration: none;
}

.sc-navbar__action-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0);
}

.sc-navbar__login {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--sc-black);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

/* ── Nav Menu ────────────────────────────────────────────── */
.sc-navmenu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 40px;
    border-bottom: 1px solid var(--sc-border);
    direction: rtl;
}

.sc-navmenu__item {
    padding: 10px 18px;
    font-size: 10px;
    font-weight: 400;
    color: var(--sc-black);
    text-decoration: none;
    border-left: 1px solid var(--sc-divider);
    white-space: nowrap;
}

.sc-navmenu__item:first-child {
    border-left: none;
}

.sc-navmenu__item--active {
    font-weight: 700;
    color: var(--sc-navy);
}

/* ── Service Bar (delivery options) ─────────────────────── */
/* Figma: 3 items — Frame 155 #3159A1 | Frame 154 #16016E | Frame 159 #4CD0C4 */
.sc-servicebar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    direction: rtl;
    overflow: hidden;
}

.sc-servicebar__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 30px;
    font-size: 14px;
    font-weight: 400;
    color: var(--sc-white);
    font-family: var(--sc-font-main);
    cursor: pointer;
    white-space: nowrap;
}

/* RTL order: item 1 = navy (استلام), item 2 = blue (توصيل), item 3 = teal (كيف..) */
.sc-servicebar__item:nth-child(1) {
    background: var(--sc-navy);
}

.sc-servicebar__item:nth-child(2) {
    background: var(--sc-blue);
}

.sc-servicebar__item:nth-child(3) {
    background: var(--sc-teal);
    color: var(--sc-black);
}

.sc-servicebar__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    /* all icons are white per Figma */
}

/* ── Hero Banner Slider ─────────────────────────────────── */
.sc-hero {
    position: relative;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
    direction: rtl;
     box-shadow: 0px 7px 18px -2px rgba(0, 0, 0, 0.25);
}

/* Each slide — hidden by default, shown when active */
.sc-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-hero-slide.sc-slide--active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* Prev / Next arrows — each absolutely positioned at left/right, vertically centered */
.sc-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(22, 1, 110, 0.55);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.sc-slider-arrow--prev {
    left: 16px;
}

.sc-slider-arrow--next {
    right: 16px;
}

.sc-slider-arrow:hover {
    background: rgba(22, 1, 110, 0.85);
}

/* Dot indicators */
.sc-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.sc-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.sc-slider-dot.sc-dot--active {
    background: #fff;
}

/* Edit button — website designers only */
.sc-slider-edit-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    background: rgba(22, 1, 110, 0.8);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    direction: rtl;
    transition: background 0.2s;
}

.sc-slider-edit-btn:hover {
    background: rgba(22, 1, 110, 1);
    color: #fff;
}

.sc-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Features Trust Strip — Figma Frame 35 (full-width, h=192, bg=#16016E) ── */
.sc-features {
    position: relative;
    width: 100%;
    height: 192px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    background-color: var(--sc-navy);
    direction: rtl;
    gap: 0;
    overflow: hidden;
    margin-bottom: 125px !important;
}

.sc-features__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 150px;
    width: auto;
    filter: grayscale(1) invert(1) brightness(0.6);
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
    display: block;
}

/* 3 equal items, each ~349px wide */
.sc-features__item {
    position: relative;
    z-index: 1;
    flex: 1;
    max-width: 349px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

/* Teal SVG icon — no background, directly on navy */
.sc-features__svg {
    display: block;
    flex-shrink: 0;
}

.sc-features__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--sc-white);
    margin: 0;
    line-height: 1.3;
}

.sc-features__desc {
    font-size: 16px;
    font-weight: 400;
    color: var(--sc-white);
    margin: 0;
    line-height: 1.4;
}

/* ── Featured Product — Figma Frame 70: flex row, image left + card right ── */
.sc-featured {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 171px;
    width: 100%;
    max-width: 960px;
    direction: ltr;
    position: relative;
    z-index: 1;
}

/* LEFT — media column */
.sc-featured__media {
    flex: 0 0 auto;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* main product image */
.sc-featured__main-img {
    width: 200px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sc-featured__main-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
}

/* Thumbnails — square card previews below main image */
.sc-featured__thumbs {
    display: flex;
    gap: 30px;
    direction: ltr;
    justify-content: center;
}

.sc-featured__thumb {
    width: 70px;
    height: 70px;
    border-radius: 0;
    overflow: hidden;
    /* border: 2px solid #D8D8D8; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sc-featured__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.sc-featured__thumb--active {
    border-color: var(--sc-navy);
    box-shadow: 0 0 0 1px var(--sc-navy);
    border-radius: 0;
    background: #fff;
}

/* RIGHT — white card: 383×293px from Figma */
.sc-featured__card {
    flex: 0 0 383px;
    width: 383px;
    height: 293px;
    background: var(--sc-white);
    border-radius: 10px;
    box-shadow: 0px 7px 18px -2px rgba(0, 0, 0, 0.25);
    padding: 0;
    direction: rtl;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* Padded content area above the buttons */
.sc-featured__card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 11px 19px 12px;
    overflow: hidden;
    min-height: 0;
}

.sc-featured__card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
    margin-bottom: 8px;
}

/* Title — 24/600 #000 */
.sc-featured__title {
    font-family: var(--sc-font-main);
    font-size: 24px;
    font-weight: 600;
    color: var(--sc-black);
    line-height: 1.2;
    text-align: right;
}

/* Desc — 10/600 #000 */
.sc-featured__desc {
    font-family: var(--sc-font-main);
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-black);
    line-height: 1.6;
    text-align: right;
}

/* Price — 20/600 #16016E */
.sc-featured__price {
    font-family: var(--sc-font-main);
    font-size: 20px;
    font-weight: 600;
    color: var(--sc-navy);
    text-align: right;
}

/* Stars + see-more row */
.sc-featured__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    margin-top: 4px;
}

.sc-featured__stars {
    display: flex;
    gap: 2px;
    direction: ltr;
}

.sc-star {
    font-size: 16px;
    color: var(--sc-gold);
    /* #E5B157 */
    line-height: 1;
}

.sc-star--empty {
    color: var(--sc-light-gray);
    /* #C1C1C1 */
}

/* "See more" — 10/600 #D5D3D3, arrow icon */
.sc-featured__more {
    font-family: var(--sc-font-main);
    font-size: 10px;
    font-weight: 600;
    color: var(--sc-caption);
    /* #D5D3D3 */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* Divider — #E7E7E7, 1px */
.sc-featured__divider {
    width: 100%;
    height: 1px;
    background: var(--sc-border);
    margin: 8px 0;
    flex-shrink: 0;
}

/* Category + swatches row */
.sc-featured__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    margin-bottom: 0;
}

.sc-featured__category {
    font-family: var(--sc-font-main);
    font-size: 13px;
    font-weight: 500;
    color: var(--sc-black);
}

.sc-featured__swatches {
    display: flex;
    gap: 6px;
    direction: ltr;
}

.sc-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: inline-block;
    cursor: pointer;
}

.sc-swatch--active {
    border-color: var(--sc-navy);
    box-shadow: 0 0 0 1px var(--sc-navy);
}

/* CTA buttons — full-width at card bottom edge */
.sc-featured__actions {
    display: flex;
    flex-direction: row;
    gap: 0;
    direction: rtl;
    width: 100%;
    flex-shrink: 0;
    margin-top: auto;
    overflow: hidden;
}

.sc-featured__actions .sc-btn,
.sc-featured__actions button.sc-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 12px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: 0;
}

/* btn-grey #8F8F8F — Buy Now */
.sc-btn--grey {
    background: var(--sc-muted);
    color: var(--sc-white);
    border-radius: 0;
}

/* btn-navy #16016E — Add to Cart */
.sc-btn--navy {
    background: var(--sc-navy);
    color: var(--sc-white);
    border-radius: 0;
}

.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-family: var(--sc-font-main);
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.sc-btn:hover {
    opacity: 0.85;
}

/* Figma: "أضف إلى السلة" button = #16016E navy */
.sc-btn--gold {
    background: var(--sc-navy);
    color: var(--sc-white);
    padding: 8px 20px;
    font-size: 10px;
    font-weight: 500;
}

.sc-btn--navy {
    background: var(--sc-navy);
    color: var(--sc-white);
    padding: 8px 20px;
    font-size: 10px;
    font-weight: 500;
}

.sc-btn--outline {
    background: transparent;
    color: var(--sc-navy);
    border: 1px solid var(--sc-navy);
    padding: 8px 20px;
    font-size: 10px;
    font-weight: 500;
}

/* ── Section Header ──────────────────────────────────────── */
.sc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    margin-bottom: 20px;
    direction: rtl;
}

.sc-section-header__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--sc-black);
    direction: rtl;
}

.sc-section-header__more {
    font-size: 13px;
    font-weight: 300;
    color: var(--sc-muted);
    text-decoration: none;
}

/* ── Product Card Grid ───────────────────────────────────── */
.sc-product-grid {
    padding: 20px 60px 40px;
    direction: rtl;
}

.sc-product-grid__inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.sc-product-card {
    background: var(--sc-white);
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    overflow: hidden;
    direction: rtl;
    display: flex;
    flex-direction: column;
}

.sc-product-card__img {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--sc-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-product-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-product-card__body {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    direction: rtl;
    text-align: right;
}

.sc-product-card__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--sc-black);
    line-height: 1.3;
}

.sc-product-card__desc {
    font-size: 10px;
    font-weight: 400;
    color: var(--sc-black);
    line-height: 1.5;
    text-align: right;
}

.sc-product-card__price {
    font-size: 18px;
    font-weight: 600;
    color: var(--sc-black);
    margin-top: 4px;
}

.sc-product-card__footer {
    padding: 8px 12px 12px;
}

.sc-product-card__footer .sc-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 400;
    justify-content: center;
}

/* ── Best Sellers Section ────────────────────────────────── */
.sc-bestsellers {
    padding: 40px 60px;
    direction: rtl;
}

.sc-bestsellers__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sc-bestsellers__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    background: var(--sc-white);
    direction: rtl;
}

.sc-bestsellers__card-img {
    width: 100px;
    height: 120px;
    flex-shrink: 0;
    object-fit: contain;
}

.sc-bestsellers__card-info {
    flex: 1;
    direction: rtl;
    text-align: right;
}

.sc-bestsellers__card-name {
    font-size: 20px;
    font-weight: 500;
    color: var(--sc-black);
    margin-bottom: 6px;
    line-height: 1.3;
}

.sc-bestsellers__card-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--sc-black);
    margin-bottom: 10px;
    line-height: 1.5;
    text-align: right;
}

.sc-bestsellers__card-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--sc-black);
    margin-bottom: 12px;
}

/* ── Chocolate Section — Figma Frame 81 (1039×834) ─────── */
.sc-choco {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 0 40px;
    direction: rtl;
    position: relative;
    overflow: visible;
}

.sc-choco-edit-wrap {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    direction: rtl;
}

.sc-choco-edit-btn {
    background: rgba(22, 1, 110, 0.8);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    direction: rtl;
    transition: background 0.2s;
}

.sc-choco-edit-btn:hover {
    background: rgba(22, 1, 110, 1);
    color: #fff;
}

.sc-choco-cats {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 21;
}

.sc-choco-cats--open {
    display: block;
}

.sc-choco-cats__item {
    display: block;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
    direction: rtl;
}

.sc-choco-cats__item:last-child {
    border-bottom: none;
}

.sc-choco-cats__item:hover {
    background: #f5f0ff;
    color: rgba(22, 1, 110, 1);
}

.sc-choco-cats__item--active {
    background: rgba(22, 1, 110, 0.08);
    color: rgba(22, 1, 110, 1);
    font-weight: 700;
}

.sc-choco__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 32px;
}

.sc-choco__title {
    font-size: 30px;
    font-weight: 700;
    color: var(--sc-black);
    text-align: center;
}

.sc-choco__deco {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-choco__deco img {
    width: 29px;
    height: 29px;
    object-fit: contain;
}

.sc-choco__heart {
    width: 16px;
    height: 14px;
    object-fit: contain;
}

/* 4-column grid, card=235px, gap=33px */
.sc-choco__grid {
    display: grid;
    grid-template-columns: repeat(4, 260px);
    gap: 25px 33px;
    justify-content: center;
}

/* Each card: 235×368 */
.sc-choco-card {
    width: 235px;
    height: 368px;
    display: flex;
    flex-direction: column;
    direction: rtl;
}

/* Image area: 235×270, bg=#F4F4F4, radius=2px */
.sc-choco-card__img-wrap {
    position: relative;
    width: 235px;
    height: 270px;
    background: #F4F4F4;
    border-radius: 2px;
    flex-shrink: 0;
    overflow: visible;
}

.sc-choco-card__img-wrap>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 2px;
}

/* Add button: navy circle 40×40, overlapping bottom-left of image (Figma: x=12 from left, y=237) */
.sc-choco-card__add-btn {
    position: absolute;
    left: 12px;
    top: 237px;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: var(--sc-navy);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
}

.sc-choco-card__add-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Info area below image: 235×98 */
.sc-choco-card__info {
    width: 235px;
    padding: 10px 0 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-choco-card__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--sc-black);
    margin: 0;
    text-align: right;
    line-height: 1.3;
}

.sc-choco-card__desc {
    font-size: 12px;
    color: var(--sc-muted);
    margin: 0;
    text-align: right;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stars + price on same row */
.sc-choco-card__meta {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}

.sc-choco-card__stars {
    display: flex;
    flex-direction: row-reverse;
    gap: 2px;
}

.sc-choco-card__stars .sc-star {
    font-size: 16px;
    color: var(--sc-gold);
}

.sc-choco-card__stars .sc-star--empty {
    color: #D9D9D9;
}

.sc-choco-card__price {
    font-size: 18px;
    font-weight: 600;
    color: var(--sc-black);
    margin: 0;
}

/* ── Manufacturer Section ────────────────────────────────── */
.sc-mfr {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 0 40px;
    direction: rtl;
    position: relative;
    overflow: visible;
}

.sc-mfr-edit-wrap {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    direction: rtl;
}

.sc-mfr-edit-btn {
    background: rgba(22, 1, 110, 0.8);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    direction: rtl;
    transition: background 0.2s;
}

.sc-mfr-edit-btn:hover {
    background: rgba(22, 1, 110, 1);
    color: #fff;
}

.sc-mfr-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 21;
}

.sc-mfr-list__item {
    display: block;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
    direction: rtl;
}

.sc-mfr-list__item:last-child {
    border-bottom: none;
}

.sc-mfr-list__item:hover {
    background: #f5f0ff;
    color: rgba(22, 1, 110, 1);
}

.sc-mfr-list__item--active {
    background: rgba(22, 1, 110, 0.08);
    color: rgba(22, 1, 110, 1);
    font-weight: 700;
}

.sc-mfr__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 32px;
}

.sc-mfr__title {
    font-size: 30px;
    font-weight: 700;
    color: var(--sc-black);
    text-align: center;
}

.sc-mfr__deco {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-mfr__deco img {
    width: 29px;
    height: 29px;
    object-fit: contain;
}

.sc-mfr__heart {
    width: 16px;
    height: 14px;
    object-fit: contain;
}

.sc-mfr__grid {
    display: grid;
    grid-template-columns: repeat(4, 260px);
    gap: 25px 33px;
    justify-content: center;
}

.sc-mfr__empty {
    text-align: center;
    padding: 40px;
    color: #888;
    direction: rtl;
    font-size: 14px;
    grid-column: 1 / -1;
}

/* ── Promo / CTA Banner ──────────────────────────────────── */
.sc-promo {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 20px 0;
}

.sc-promo__bg {
    width: 100%;
    height: 291px;
    object-fit: cover;
    display: block;
}

.sc-promo__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 60px;
    direction: ltr;
}

.sc-promo__title {
    font-family: var(--sc-font-main);
    font-size: 18px;
    font-weight: 700;
    color: var(--sc-white);
    margin-bottom: 8px;
    max-width: 360px;
}

.sc-promo__sub {
    font-family: var(--sc-font-main);
    font-size: 18px;
    font-weight: 700;
    color: var(--sc-white);
    margin-bottom: 20px;
    max-width: 360px;
}

/* ── Companies Section ────────────────────────────────────── */
.sc-companies {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 0 40px;
    direction: rtl;
}

.sc-companies__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.sc-companies__title {
    font-size: 30px;
    font-weight: 700;
    color: var(--sc-black);
    margin: 0 0 8px;
    text-align: center;
}

.sc-companies__deco {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-companies__deco img {
    width: 29px;
    height: 29px;
    object-fit: contain;
}

.sc-companies__heart {
    width: 16px;
    height: 14px;
    object-fit: contain;
}

/* Slider: arrows sit inline in a flex row — viewport takes the rest */
.sc-companies__slider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    direction: ltr;
}

.sc-companies__viewport {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.sc-companies__list {
    display: flex;
    flex-direction: row;
    direction: rtl;
    gap: 33px;
    transition: transform 0.35s ease;
    padding: 4px 2px;
}

.sc-companies__arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--sc-navy);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, opacity 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.sc-companies__arrow:hover {
    background: rgba(22, 1, 110, 0.08);
}

.sc-companies__arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

/* Each card: same 235px width as original design */
.sc-companies-card {
    flex-shrink: 0;
    width: 235px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    direction: rtl;
    transition: transform 0.2s;
}

.sc-companies-card:hover {
    transform: translateY(-3px);
}

.sc-companies-card__img-wrap {
    width: 235px;
    height: 195px;
    background: #F4F4F4;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.sc-companies-card:hover .sc-companies-card__img-wrap {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sc-companies-card__img-wrap img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

.sc-companies-card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    gap: 4px;
}

.sc-companies-card__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--sc-black);
    margin: 0;
    text-align: center;
}

.sc-companies-card__count {
    font-size: 12px;
    font-weight: 400;
    color: var(--sc-muted);
    margin: 0;
    text-align: center;
}

/* ── Companies title link (homepage) ────────────────────────── */
.sc-companies__title-link {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}
.sc-companies__title-link:hover {
    opacity: 0.75;
    text-decoration: none;
}

/* ── Companies full page (/sweet-center/companies) ──────────── */
.sc-cpage__nav {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 20px 0 0;
    direction: rtl;
}

.sc-cpage__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-navy);
    text-decoration: none;
    transition: opacity 0.15s;
}
.sc-cpage__back:hover { opacity: 0.7; }

.sc-cpage__header {
    width: 100%;
    max-width: 1040px;
    margin: 24px auto 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    direction: rtl;
}

.sc-cpage__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--sc-black);
    margin: 0;
    text-align: center;
}

/* Companies grid: auto-fill columns of 220px */
.sc-cpage__grid {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
    direction: rtl;
    padding: 0 12px;
    box-sizing: border-box;
}

/* Override fixed width on cards when inside the page grid */
.sc-cpage__grid .sc-companies-card,
.sc-cpage__grid .sc-companies-card__img-wrap {
    width: 100%;
}

/* Highlight selected company */
.sc-cpage-card--active .sc-companies-card__img-wrap {
    box-shadow: 0 0 0 3px var(--sc-navy);
}
.sc-cpage-card--active .sc-companies-card__name {
    color: var(--sc-navy);
}

/* Category card (used on /sweet-center/categories page) */
.sc-catpage-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px;
    background: #F4F4F4;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.sc-catpage-card:hover {
    background: #ede8ff;
    transform: translateY(-3px);
    box-shadow: 0 4px 14px rgba(22,1,110,0.12);
}

.sc-catpage-card--active {
    background: rgba(22,1,110,0.08);
    box-shadow: 0 0 0 3px var(--sc-navy);
}

.sc-catpage-card--active .sc-companies-card__name {
    color: var(--sc-navy);
}

.sc-catpage-card__icon {
    color: var(--sc-navy);
    opacity: 0.7;
}

.sc-cpage__empty {
    text-align: center;
    color: #888;
    padding: 40px;
    grid-column: 1 / -1;
    font-size: 15px;
}

/* ── Companies admin edit button ──────────────────────────── */
.sc-companies-edit-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto 12px;
    padding: 0 12px;
    box-sizing: border-box;
}

.sc-companies-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--sc-navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 3px 10px rgba(22,1,110,0.25);
}
.sc-companies-edit-btn:hover {
    background: var(--sc-teal);
    transform: translateY(-1px);
}
.sc-companies-edit-btn svg {
    flex-shrink: 0;
}

/* ── Companies admin image modal ─────────────────────────── */
#sc-companies-admin-modal .sc-mp-modal__box {
    max-width: 900px;
    width: 92vw;
}

#sc-companies-admin-modal .sc-mp-modal__head {
    padding: 20px 28px;
    background: linear-gradient(135deg, var(--sc-navy) 0%, #2a1a8a 100%);
    border-bottom: none;
}

#sc-companies-admin-modal .sc-mp-modal__title {
    color: #fff;
    font-size: 20px;
}

#sc-companies-admin-modal .sc-mp-modal__close {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #fff;
}
#sc-companies-admin-modal .sc-mp-modal__close:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

.sc-companies-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 220px));
    justify-content: center;
    gap: 20px;
    padding: 32px 28px;
    direction: rtl;
    max-height: 62vh;
    overflow-y: auto;
    background: #f5f6fa;
}

.sc-companies-admin-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px 20px;
    background: #fff;
    border: 1.5px solid #e8e8f0;
    border-radius: 16px;
    text-align: center;
    box-sizing: border-box;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.sc-companies-admin-item:hover {
    box-shadow: 0 6px 24px rgba(22,1,110,0.13);
    border-color: var(--sc-navy);
    transform: translateY(-2px);
}

.sc-companies-admin-item__img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #eeeef8;
    background: #f7f7fb;
    flex-shrink: 0;
    transition: border-color 0.2s;
}
.sc-companies-admin-item:hover .sc-companies-admin-item__img {
    border-color: var(--sc-teal);
}

.sc-companies-admin-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-companies-admin-item__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--sc-navy);
    margin: 0;
    line-height: 1.4;
}

.sc-companies-admin-item__upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--sc-navy);
    color: #fff;
    padding: 10px 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    user-select: none;
    box-sizing: border-box;
}
.sc-companies-admin-item__upload-btn:hover {
    background: var(--sc-teal);
    transform: translateY(-1px);
}

.sc-companies-admin-item__status {
    font-size: 13px;
    font-weight: 600;
    min-height: 20px;
    line-height: 20px;
}

/* Products area below the companies grid */
.sc-cpage__products {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto 60px;
    padding: 0 12px;
    box-sizing: border-box;
    direction: rtl;
}

.sc-cpage__products-head {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(22,1,110,0.12);
}

.sc-cpage__products-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--sc-navy);
    margin: 0;
}

/* ── Product Lists — Figma Frame 169 (3 cols × 177px, gap=91px) ─────── */
/* Frame 169 x=344 within 1039px page → left/right margin = 163px */
.sc-prodlists {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 0 40px;
    display: flex;
    flex-direction: row;
    direction: rtl;
    justify-content: center;
    gap: 91px;
}

/* Each column: 177px wide */
.sc-prodlist {
    width: 190px;
    flex-shrink: 0;
    direction: rtl;
}

.sc-prodlist__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--sc-black);
    margin: 0 0 8px;
    text-align: right;
}

.sc-prodlist__rows {
    display: flex;
    flex-direction: column;
}

/* Each row: 177×78 — image RIGHT (first in DOM = right in RTL), info LEFT */
.sc-prodlist__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 177px;
    height: 78px;
    border-bottom: 1px solid var(--sc-border);
}

.sc-prodlist__row:last-child {
    border-bottom: none;
}

.sc-prodlist__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: right;
    padding-left: 6px;
}

.sc-prodlist__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--sc-black);
    margin: 0;
    line-height: 1.3;
    width: 100%;
}

.sc-prodlist__stars {
    display: flex;
    flex-direction: row;
    gap: 1px;
}

.sc-prodlist__stars .sc-star {
    font-size: 16px;
    color: var(--sc-gold);
}

.sc-prodlist__stars .sc-star--empty {
    color: var(--sc-mid-gray);
}

.sc-prodlist__price {
    font-size: 14px;
    font-weight: 500;
    color: var(--sc-black);
    margin: 0;
}

/* Image: 67×70, bg=#F4F4F4 */
.sc-prodlist__img {
    width: 67px;
    height: 70px;
    background: #F4F4F4;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-prodlist__img img {
    width: 43px;
    height: 53px;
    object-fit: contain;
}

/* ── Supermarket Category Section — Figma Frame 114 (1039×772) ── */
/* Override RTL inherited from .sc-page — sidebar is physically LEFT in Figma */
.sc-supercat {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 0 80px;
    display: flex;
    flex-direction: row;
    direction: ltr;
    gap: 8px;
}

/* Left sidebar: 250×772, gradient blue */
.sc-supercat__sidebar {
    width: 250px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #3159A1 0%, rgba(49, 89, 161, 0) 100%);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px 16px 0;
    overflow: hidden;
}

.sc-supercat__sidebar-text {
    font-size: 24px;
    font-weight: 800;
    color: var(--sc-white);
    line-height: 1.5;
    text-align: right;
    direction: rtl;
}

.sc-supercat__sidebar-img {
    width: 100%;
    object-fit: contain;
    display: block;
    margin-top: auto;
}

/* Right product grid: 3 cols × 235px, gap=25px, 2 rows */
.sc-supercat__grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 260px);
    gap: 25px;
    justify-content: center;
}

/* Card: 235×361 — same structure as sc-choco-card */
.sc-supercat-card {
    width: 235px;
    display: flex;
    flex-direction: column;
    direction: rtl;
}

.sc-supercat-card__img-wrap {
    position: relative;
    width: 235px;
    height: 270px;
    background: #F4F4F4;
    border-radius: 2px;
    flex-shrink: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-supercat-card__img-wrap>img {
    max-width: 102px;
    max-height: 217px;
    object-fit: contain;
}

/* Navy circle add button at bottom-left (x=12, y=237 relative to card) */
.sc-supercat-card__add-btn {
    position: absolute;
    left: 12px;
    top: 237px;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: var(--sc-navy);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
}

.sc-supercat-card__add-btn img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
        object-fit: contain;
    filter: brightness(0) invert(1);

}

.sc-supercat-card__info {
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sc-supercat-card__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--sc-black);
    margin: 0;
    text-align: right;
}

.sc-supercat-card__desc {
    font-size: 12px;
    font-weight: 400;
     color: var(--sc-muted);
    margin: 0;
    text-align: right;
    line-height: 1.4;
}

.sc-supercat-card__price {
    font-size: 18px;
    font-weight: 600;
    color: var(--sc-black);
    margin: 0;
    text-align: right;
}

/* ── Supermarket Products Table ──────────────────────────── */
.sc-supermarket {
    padding: 40px 60px;
    direction: rtl;
}

.sc-supermarket__section {
    margin-bottom: 32px;
}

.sc-supermarket__section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--sc-black);
    margin-bottom: 12px;
    text-align: right;
    direction: rtl;
    border-bottom: 2px solid var(--sc-navy);
    padding-bottom: 6px;
}

.sc-supermarket__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    direction: rtl;
}

.sc-supermarket__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--sc-surface);
    border-radius: 6px;
    direction: rtl;
}

.sc-supermarket__item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--sc-black);
    text-align: right;
}

.sc-supermarket__item-price {
    font-size: 14px;
    font-weight: 500;
    color: var(--sc-black);
    white-space: nowrap;
    margin-right: 8px;
}

/* ── OTC / Pharmacy Banner ───────────────────────────────── */
.sc-otc {
    position: relative;
    margin: 20px 60px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--sc-gradient);
    min-height: 323px;
    display: flex;
    align-items: center;
    direction: rtl;
}

.sc-otc__content {
    padding: 40px 60px;
    direction: ltr;
}

.sc-otc__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--sc-black);
    margin-bottom: 8px;
}

.sc-otc__sub {
    font-size: 18px;
    font-weight: 700;
    color: var(--sc-white);
    margin-bottom: 20px;
    max-width: 320px;
}

/* ── Most Purchased — Figma Frame 82: 1040×291 ──────────── */
.sc-mostpurchased {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    background: var(--sc-white);
    margin-top: 25px;
    padding: 35px 0 35px;
    direction: rtl;
    box-sizing: border-box;
}

/* Header: title + deco line */
.sc-mostpurchased__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

.sc-mp-header-btn {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}

.sc-mp-header-btn:hover { opacity: 0.8; }

.sc-mp-header-btn__hint {
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-navy);
    margin-top: 4px;
    direction: rtl;
}

/* ── Most-Purchased Modal ────────────────────────────────── */
.sc-mp-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-mp-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.sc-mp-modal__box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 12px;
    width: 92vw;
    max-width: 1100px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
    direction: rtl;
}

.sc-mp-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.sc-mp-modal__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--sc-black);
    margin: 0;
}

.sc-mp-modal__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.sc-mp-modal__close:hover {
    background: #fee;
    color: #c00;
    border-color: #fcc;
}

.sc-mp-modal__grid {
    overflow-y: auto;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    direction: rtl;
}

.sc-mostpurchased__title {
    font-family: var(--sc-font-main);
    font-size: 25px;
    font-weight: 700;
    color: var(--sc-black);
    text-align: center;
}

/* Decorative row: line–heart–line */
.sc-mostpurchased__deco {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sc-mostpurchased__deco img {
    width: 29px;
    height: 29px;
    object-fit: contain;
}

.sc-mostpurchased__heart {
    width: 16px;
    height: 14px;
    object-fit: contain;
}

/* Slider row: arrows + viewport */
.sc-mostpurchased__slider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
    position: relative;
}

/* Side arrows */
.sc-mostpurchased__arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(22, 1, 110, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s;
    z-index: 1;
}

.sc-mostpurchased__arrow:hover  { background: rgba(22, 1, 110, 0.85); }
.sc-mostpurchased__arrow:disabled { background: rgba(22, 1, 110, 0.25); cursor: default; }

/* Viewport — clips overflow so only N cards show */
.sc-mostpurchased__viewport {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

/* Card list — slides via translateX from JS */
.sc-mostpurchased__list {
    display: flex;
    gap: 16px;
    direction: rtl;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* ── Product card — horizontal: info LEFT, image RIGHT ── */
/* Width = (viewport ~928px - 1 gap 16px) / 2 = 456px → 2 cards visible */
.sc-prodcard {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    direction: ltr;
    border-radius: 8px;
    overflow: hidden;
    width: 435px;
    min-height: 220px;
}

/* Text info — left side */
.sc-prodcard__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px 16px 12px;
    direction: rtl;
    text-align: right;
}

.sc-prodcard__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Name */
.sc-prodcard__name {
    font-family: var(--sc-font-main);
    font-size: 18px;
    font-weight: 600;
    color: var(--sc-black);
    line-height: 1.3;
}

/* Desc */
.sc-prodcard__desc {
    font-family: var(--sc-font-main);
    font-size: 15px;
    font-weight: 400;
    color: var(--sc-icon-gray);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sc-prodcard__stars {
    display: flex;
    gap: 2px;
    direction: ltr;
    justify-content: flex-end;
    margin-top: 2px;
}

.sc-prodcard__stars .sc-star {
    font-size: 16px;
}

.sc-prodcard__stars .sc-star--empty {
    color: var(--sc-light-gray);
}

/* Price */
.sc-prodcard__price {
    font-family: var(--sc-font-main);
    font-size: 18px;
    font-weight: 700;
    color: var(--sc-black);
    margin-top: 2px;
}

/* Footer: icon buttons + add-to-cart */
.sc-prodcard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    margin-top: 10px;
}

.sc-prodcard__actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sc-prodcard__icon-btn {
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.sc-prodcard__icon-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0);
    transition: filter 0.2s;
}

.sc-wishlist-svg {
    fill: none;
    stroke: #333;
    stroke-width: 2;
    transition: fill 0.2s, stroke 0.2s;
}

.sc-wishlist-btn--active .sc-wishlist-svg {
    fill: #e74c3c;
    stroke: #e74c3c;
}

.sc-wishlist-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Add to Cart button */
.sc-prodcard__add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--sc-navy);
    color: var(--sc-white);
    font-family: var(--sc-font-main);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.sc-prodcard__add-btn img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Product image — right side */
.sc-prodcard__img-wrap {
    width: 165px;
    flex-shrink: 0;
    background: var(--sc-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
}

.sc-prodcard__img-wrap img {
    max-width: 100%;
    max-height: 155px;
    object-fit: contain;
}

/* ── Value Props — Figma Frame 168: 1038×195, 3×330px panels, 24px gaps ── */
.sc-valueprops {
    display: flex;
    flex-direction: row-reverse;
    /* RTL: panel1 (عروض) rightmost, panel3 (توصيل) leftmost */
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1040px;
    height: 195px;
    margin: 0 auto;
    padding: 0;
}

/* Each panel: exactly 330×195, border-radius:2, relative for absolute image positioning */
.sc-valueprop {
    position: relative;
    width: 330px;
    flex-shrink: 0;
    height: 195px;
    overflow: hidden;
    border-radius: 2px;
}

.sc-valueprop--teal {
    background: var(--sc-teal);
}

.sc-valueprop--blue {
    background: var(--sc-blue);
}

/* Image: absolute, left edge of panel, vertically centered */
/* Panel1: x=8, y=8, w=175, h=179  |  Panel2: x=23, y=29, w=147, h=137  |  Panel3: x=1, y=31, w=205, h=133 */
.sc-valueprop__img {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 175px;
    height: 179px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-valueprop--blue .sc-valueprop__img {
    left: 23px;
    top: 29px;
    width: 147px;
    height: 137px;
}

.sc-valueprop__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Text block: absolute, right half of panel, vertically centered */
.sc-valueprop__text {
    position: absolute;
    left: 152px;
    top: 50%;
    transform: translateY(-50%);
    width: 155px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: right;
    direction: rtl;
}

/* Title: fs=20, fw=500, #000 */
.sc-valueprop__title {
    font-family: var(--sc-font-main);
    font-size: 20px;
    font-weight: 500;
    color: var(--sc-black);
    line-height: 1;
    margin-bottom: 8px;
    white-space: nowrap;
}

/* Desc: fs=13, fw=300, #000 — 41px below title top */
.sc-valueprop__desc {
    font-family: var(--sc-font-main);
    font-size: 15px;
    font-weight: 300;
    color: var(--sc-black);
    line-height: 1.4;
    margin-bottom: 8px;
}

/* "المزيد": fs=13, fw=300, #8F8F8F */
.sc-valueprop__more {
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    /* RTL: span first (right), icon after (left) */
    gap: 4px;
    font-family: var(--sc-font-main);
    font-size: 14px;
    font-weight: 300;
    color: var(--sc-white);
    text-decoration: none;
    margin-top: 4px;
}

.sc-valueprop__more img {
    width: 8px;
    height: 11px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ── Newsletter ──────────────────────────────────────────── */
.sc-newsletter {
    padding: 40px 60px;
    background: var(--sc-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    direction: rtl;
}

.sc-newsletter__text {
    direction: rtl;
    text-align: right;
}

.sc-newsletter__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--sc-black);
    margin-bottom: 8px;
}

.sc-newsletter__sub {
    font-size: 14px;
    font-weight: 400;
    color: var(--sc-black);
    line-height: 1.5;
}

.sc-newsletter__form {
    display: flex;
    gap: 0;
    direction: rtl;
    flex-shrink: 0;
}

.sc-newsletter__input {
    padding: 10px 16px;
    border: 1px solid var(--sc-divider);
    border-radius: 4px 0 0 4px;
    font-family: var(--sc-font-main);
    font-size: 14px;
    color: var(--sc-subtle);
    width: 280px;
    direction: rtl;
    text-align: right;
    outline: none;
    background: var(--sc-white);
}

.sc-newsletter__submit {
    padding: 10px 24px;
    background: var(--sc-navy);
    color: var(--sc-white);
    border: none;
    border-radius: 0 4px 4px 0;
    font-family: var(--sc-font-main);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.sc-newsletter__submit:hover {
    opacity: 0.85;
}

/* ── Delivery Banner — Figma Frame 137 (full-width, h=133, bg=#8F8F8F) ── */
.sc-delivery {
    width: 100%;
    height: 133px;
    background: #8F8F8F;
    position: relative;
    overflow: visible;
    direction: rtl;
    margin-top: 100px ! important;
    /* Use a centered inner container for text+button, image is absolute */
}

/* Centered inner wrapper — 1039px content area */
.sc-delivery__inner {
    width: 100%;
    max-width: 1040px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

/* Delivery person image: Figma x≈0 relative to content, bottom-aligned, overflows up */
.sc-delivery__img {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 255px;
    width: auto;
    object-fit: contain;
    pointer-events: none;
}

/* Button: Figma x=388 relative to content, vertically centered */
.sc-delivery__btn {
    position: absolute;
    left: 388px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 33px;
    border: 1.5px solid var(--sc-white);
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--sc-white);
    text-decoration: none;
}

.sc-delivery__btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--sc-white);
}

/* Text: Figma x=578 relative to content, white 18px bold */
.sc-delivery__text {
    position: absolute;
    left: 578px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    color: var(--sc-white);
    white-space: nowrap;
    margin: 0;
    direction: rtl;
}

/* ── Brand Marquee Strip ─────────────────────────────────── */
.sc-marquee {
    width: 100%;
    overflow: hidden;
    background: var(--sc-white);
    border-top: 1px solid var(--sc-border);
    border-bottom: 1px solid var(--sc-border);
}

.sc-marquee img {
    width: 100%;
    height: 192px;
    object-fit: cover;
}

/* ── Footer — Figma Frame 148+147 (white body, navy bottom bar) ── */
.sc-footer {
    background: #FFFFFF !important;
    direction: rtl;
}

.sc-footer .sc-footer__inner,
.sc-footer .sc-footer__col,
.sc-footer .sc-footer__col--newsletter {
    background: #FFFFFF !important;
    color: #000000 !important;
}

.sc-footer__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
    display: flex;
    flex-direction: row;
    gap: 48px;
    direction: rtl;
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-white);
    flex-wrap: wrap;
}

/* Contact column gets more space — holds the long address */
.sc-footer__col:nth-child(1) {
    flex: 2;
    min-width: 180px;
}

.sc-footer__col:nth-child(2),
.sc-footer__col:nth-child(3) {
    flex: 1;
    min-width: 120px;
}

.sc-footer__col--newsletter {
    flex: 1.5;
    min-width: 160px;
}

.sc-footer__col {
    direction: rtl;
    text-align: right;
}

.sc-footer__col-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--sc-black) !important;
    margin-bottom: 16px;
    text-align: right;
}

.sc-footer__col-sub {
    font-size: 14px;
    font-weight: 400;
    color: var(--sc-black) !important;
    text-align: right;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Newsletter email form */
.sc-footer__form {
    display: flex;
    flex-direction: row;
    direction: ltr;
    height: 37px;
    margin-bottom: 24px;
    border: 1px solid var(--sc-divider);
    border-radius: 2px;
    overflow: hidden;
}

.sc-footer__form-btn {
    flex-shrink: 0;
    width: 81px;
    height: 100%;
    background: var(--sc-navy);
    color: var(--sc-white);
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

.sc-footer__form-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 12px;
    font-size: 14px;
    font-family: var(--sc-font-main);
    color: var(--sc-black) !important;
    text-align: right;
    background: var(--sc-white) !important;
}

.sc-footer__form-input::placeholder {
    color: var(--sc-subtle);
}

.sc-footer__social {
    display: flex;
    flex-direction: row;
    gap: 10px;
    direction: rtl;
}

.sc-footer__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--sc-divider);
    text-decoration: none;
    flex-shrink: 0;
}

.sc-footer__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    direction: rtl;
    text-align: right;
}

.sc-footer__links a {
    font-size: 14px;
    font-weight: 400;
    color: var(--sc-black) !important;
    text-decoration: none;
    transition: color 0.2s;
}

.sc-footer__links a:hover {
    color: var(--sc-navy) !important;
}

/* Navy bottom bar — Figma Frame 147 (full-width, h=70) */
.sc-footer__bottom {
    background: var(--sc-navy);
    width: 100%;
    height: 70px;
}

.sc-footer__bottom-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    direction: ltr;
}

.sc-footer__bottom-logos {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sc-footer__bottom-logos img {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.sc-footer__bottom-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--sc-white);
    direction: rtl;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Laptop (≤1280px), Tablet (≤1100px), Mobile (≤768px), Small (≤480px)
   ══════════════════════════════════════════════════════════ */

/* ── Laptop: 1101px – 1280px ─────────────────────────────── */
@media (max-width: 1280px) {
    .sc-featured {
        max-width: 860px;
        gap: 80px;
    }

    .sc-featured__card {
        flex: 0 0 360px;
        width: 360px;
    }
}

/* ── Tablet: ≤1100px ─────────────────────────────────────── */
@media (max-width: 1100px) {

    /* Global container unlock */
    .sc-choco,
    .sc-companies,
    .sc-supercat,
    .sc-prodlists,
    .sc-footer__inner,
    .sc-footer__bottom-inner,
    .sc-delivery__inner,
    .sc-valueprops {
        width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box;
    }

    .sc-mostpurchased {
        max-width: 100% !important;
        padding: 20px 16px !important;
    }

    /* Topbar */
    .sc-topbar {
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px 16px;
    }

    /* Navbar */
    .sc-navbar {
        padding: 8px 16px;
        gap: 10px;
    }

    .sc-navbar__search {
        width: 260px;
        max-width: 260px;
    }

    /* Nav links — scrollable on tablet */
    .sc-navbar__links {
        overflow-x: auto;
        scrollbar-width: none;
        flex: 1;
        min-width: 0;
    }

    .sc-navbar__links::-webkit-scrollbar {
        display: none;
    }

    /* Navmenu — horizontal scroll so items don't wrap or overflow */
    .sc-navmenu {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 16px;
        scrollbar-width: none;
    }

    .sc-navmenu::-webkit-scrollbar {
        display: none;
    }

    /* Hero */
    .sc-hero {
        min-height: 580px;
    }

    .sc-featured {
        max-width: 780px;
        gap: 40px;
    }

    .sc-featured__media {
        width: 220px;
    }

    .sc-featured__main-img {
        width: 170px;
        height: 190px;
    }

    .sc-featured__card {
        flex: 0 0 330px;
        width: 330px;
        padding: 14px 16px;
    }

    .sc-featured__title {
        font-size: 18px;
    }

    .sc-featured__price {
        font-size: 18px;
    }

    /* Features — auto height so items can wrap */
    .sc-features {
        height: auto;
        padding: 32px 16px;
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 125px !important;
    }

    .sc-features__item {
        flex: 1 1 30%;
        max-width: none;
    }

    /* Value props — shrink panels proportionally */
    .sc-valueprops {
        height: auto;
        flex-wrap: wrap;
        gap: 16px;
        padding: 16px 24px;
    }

    .sc-valueprop {
        width: calc(33.33% - 16px);
        min-width: 220px;
        height: 160px;
        flex-shrink: 1;
        flex-grow: 1;
    }

    .sc-valueprop__img {
        width: 135px;
        height: 140px;
        top: 10px;
        left: 6px;
    }

    .sc-valueprop--blue .sc-valueprop__img {
        width: 115px;
        height: 110px;
        left: 14px;
        top: 20px;
    }

    .sc-valueprop__text {
        left: 128px;
        width: calc(100% - 138px);
    }

    .sc-valueprop__title {
        font-size: 16px;
    }

    .sc-valueprop__desc {
        font-size: 12px;
    }



    /* Chocolate grid — 4 flexible cols (overridden to 3 at ≤1024px) */
    .sc-choco__grid,
    .sc-mfr__grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px;
    }

    .sc-choco-card {
        width: 100%;
    }

    /* Companies slider — smaller cards at wide-tablet */
    .sc-companies-card {
        width: 200px;
    }

    /* Product lists — stack vertically */
    .sc-prodlists {
        flex-direction: column !important;
        width: 100% !important;
        gap: 32px;
        align-items: center;
    }

    .sc-prodlist {
        width: 100%;
        max-width: 480px;
    }

    .sc-prodlist__row {
        width: 100%;
        height: auto;
        min-height: 78px;
    }

    .sc-prodlist__img {
        flex-shrink: 0;
    }

    /* Supercat — sidebar above grid */
    .sc-supercat {
        flex-direction: column !important;
        width: 100% !important;
        gap: 24px;
    }

    .sc-supercat__sidebar {
        width: 100% !important;
        min-height: 120px;
        padding: 24px;
        flex-direction: row;
        align-items: center;
    }

    .sc-supercat__sidebar-text {
        font-size: 18px;
    }

    .sc-supercat__sidebar-img {
        width: 100px;
        height: auto;
        margin-top: 0;
    }

    .sc-supercat__grid {
        grid-template-columns: repeat(3, 1fr) !important;
        width: 100%;
    }

    .sc-supercat-card {
        width: 100% !important;
    }

    .sc-supercat-card__img-wrap {
        width: 100% !important;
    }

    /* Delivery banner — reset absolute positions */
    .sc-delivery {
        height: 110px;
        padding: 0;
        margin-top: 100px !important;
        overflow: visible;
    }

    .sc-delivery__inner {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        padding: 0 32px 0 200px;
    }

    /* Image overflows above the banner */
    .sc-delivery__img {
        position: absolute;
        left: 24px;
        right: auto;
        bottom: 0;
        height: 200px;
        width: auto;
    }

    .sc-delivery__text {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        font-size: 16px;
        white-space: normal;
    }

    .sc-delivery__btn {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
    }

    /* Footer inner — single column */
    .sc-footer__inner {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
        padding: 32px 24px !important;
        flex-direction: initial;
    }

    .sc-footer__col:nth-child(1),
    .sc-footer__col:nth-child(2),
    .sc-footer__col:nth-child(3),
    .sc-footer__col--newsletter {
        width: auto !important;
        margin-inline-end: 0 !important;
    }

    .sc-footer__bottom-inner {
        width: 100%;
        padding: 0 24px;
    }
}

/* ── Laptop: ≤1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {

    /* Chocolate grid — 3 cols */
    .sc-choco__grid,
    .sc-mfr__grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px;
    }

    .sc-choco-card {
        width: 100%;
    }

    /* Footer — 3 cols */
    .sc-footer__inner {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Product lists — 2 per row on 426px–1024px */
    .sc-prodlists {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }

    .sc-prodlist {
        width: calc(50% - 6px);
        max-width: none;
    }
}

/* ── Mobile: ≤768px ──────────────────────────────────────── */
@media (max-width: 768px) {

    /* Topbar — compact on mobile, all elements visible */
    .sc-topbar {
        padding: 6px 12px;
        gap: 4px;
    }

    .sc-topbar__nav {
        overflow-x: auto;
        scrollbar-width: none;
        gap: 8px;
        flex-shrink: 1;
        min-width: 0;
    }

    .sc-topbar__nav::-webkit-scrollbar {
        display: none;
    }

    .sc-topbar__welcome {
        display: none;
    }

    .sc-topbar__link {
        font-size: 14px;
    }

    .sc-topbar__login {
        font-size: 12px;
    }

    .sc-topbar__currency {
        font-size: 12px;
    }

    /* Navbar — links hidden, search drops to second row */
    .sc-navbar {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .sc-navbar__logo {
        order: 1;
    }

    .sc-navbar__actions {
        order: 2;
    }

    .sc-navbar__search {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        margin-top: 4px;
    }

    /* Nav links — full-width scrollable row below search */
    .sc-navbar__links {
        order: 4;
        flex: 1 1 100%;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 6px 0 2px;
        border-top: 1px solid var(--sc-border);
        gap: 0;
    }

    .sc-navbar__links::-webkit-scrollbar {
        display: none;
    }

    .sc-navbar__link {
        font-size: 12px;
        padding: 4px 10px;
    }

    /* Navmenu — horizontal scroll, smaller items */
    .sc-navmenu {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 12px;
        scrollbar-width: none;
    }

    .sc-navmenu::-webkit-scrollbar {
        display: none;
    }

    .sc-navmenu__item {
        font-size: 11px;
        padding: 10px 10px;
        white-space: nowrap;
    }

    /* Servicebar — stack vertically */
    .sc-servicebar {
        flex-direction: column;
    }

    .sc-servicebar__item {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
    }

    /* Hero */
    .sc-hero {
        min-height: 610px;
    }

    .sc-featured {
        flex-direction: column !important;
        width: 92%;
        max-width: 480px;
        padding: 16px;
        gap: 16px;
    }

    /* Card first, images second when stacked */
    .sc-featured__card  { order: 1; }
    .sc-featured__media { order: 2; width: 100%; max-width: 220px; }

    .sc-featured__main-img {
        width: 160px;
        height: 180px;
    }

    .sc-featured__main-img img {
        max-height: 160px;
    }

    .sc-featured__card {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 0;
    }

    .sc-featured__title {
        font-size: 15px;
    }

    .sc-featured__price {
        font-size: 18px;
    }

    .sc-featured__thumbs {
        gap: 6px;
    }

    .sc-featured__thumb {
        width: 50px;
        height: 50px;
    }

    /* Features — single column */
    .sc-features__item {
        flex: 1 1 100%;
    }

    /* Most purchased — card stacks vertically, near full width */
    .sc-mostpurchased {
        padding: 16px 12px !important;
    }

    /* Slider: overlay arrows so full viewport width is used for 2 cards */
    .sc-mostpurchased__slider { padding: 0; }
    .sc-mostpurchased__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }
    /* RTL: --left (chevron >) on RIGHT edge, --right (chevron <) on LEFT edge */
    .sc-mostpurchased__arrow--left  { right: 6px; }
    .sc-mostpurchased__arrow--right { left: 6px; }
    .sc-mostpurchased__viewport { width: 100%; }

    /* 2 cards fill viewport: (100vw - section_pad24 - card_gap16) / 2 */
    .sc-prodcard {
        width: calc((97vw - 40px) / 2);
        min-height: 200px;
    }

    .sc-prodcard__img-wrap {
        width: 140px;
        flex-shrink: 0;
    }

    .sc-prodcard__info {
        padding: 12px 14px 10px;
    }

    .sc-prodcard__name  { font-size: 15px; }
    .sc-prodcard__desc  { font-size: 13px; }
    .sc-prodcard__price { font-size: 15px; }

    /* Value props — stack vertically, keep absolute layout but adjust sizes */
    .sc-valueprops {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        padding: 12px;
        gap: 10px;
        height: auto;
    }

    .sc-valueprop {
        width: calc(50% - 5px) !important;
        height: 110px;
        min-width: 0;
    }

    .sc-valueprop__img {
        width: 108px;
        height: 100px;
        top: 5px;
        left: 5px;
    }

    .sc-valueprop--blue .sc-valueprop__img {
        width: 90px;
        height: 88px;
        left: 10px;
        top: 11px;
    }

    .sc-valueprop__text {
        left: 116px;
        width: calc(100% - 126px);
    }

    .sc-valueprop__title {
        font-size: 15px;
        white-space: normal;
    }

    .sc-valueprop__desc {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .sc-valueprop__more {
        font-size: 11px;
    }

    /* Choco section — 2 cols */
    .sc-choco {
        padding: 16px 12px;
    }

    .sc-choco__grid,
    .sc-mfr__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .sc-choco-card {
        width: 100% !important;
    }

    .sc-choco-card__img-wrap {
        width: 100% !important;
    }

    /* Companies section — compact on tablet */
    .sc-companies {
        padding: 16px 12px;
    }

    .sc-companies-card {
        width: 160px;
    }

    .sc-companies-card__img-wrap {
        width: 160px;
        height: 140px;
    }

    /* Product lists — full width on mobile (≤768px inherits 2-per-row from ≤1024px) */
    .sc-prodlist {
        max-width: 100%;
    }

    .sc-prodlist__row {
        width: 100%;
        height: auto;
        min-height: 78px;
    }

    .sc-prodlist__title {
        font-size: 16px;
    }

    /* Supercat grid — 2 cols */
    .sc-supercat__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .sc-supercat__sidebar {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
    }

    .sc-supercat__sidebar-text {
        text-align: center;
    }

    /* Delivery banner — column layout: image top, text below */
    .sc-delivery {
        height: auto;
        padding: 0 16px 20px;
        margin-top: 50px !important;
        overflow: visible;
    }

    .sc-delivery__inner {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 0;
        height: auto;
    }

    /* Image: in flow, negative margin-top makes top portion overflow above banner */
    .sc-delivery__img {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        height: 150px;
        width: auto;
        margin-top: -70px;
        flex-shrink: 0;
    }

    .sc-delivery__text {
        font-size: 16px;
        text-align: center;
        white-space: normal;
    }

    .sc-delivery__btn {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
    }

    /* Footer */
    .sc-footer__form {
        flex-direction: row;
    }

    /* Footer — 2 cols on tablet */
    .sc-footer__inner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .sc-footer__bottom-inner {
        flex-direction: column;
        gap: 12px;
        height: auto;
        padding: 16px 24px;
    }

    .sc-footer__bottom {
        height: auto;
    }

    .sc-footer__bottom-name {
        font-size: 16px;
    }
}

/* ── Small mobile: ≤480px ────────────────────────────────── */
@media (max-width: 480px) {

    /* Navbar */
    .sc-navbar__logo img {
        height: 30px;
    }

    .sc-navbar__actions {
        gap: 8px;
    }

    /* Navmenu items smaller */
    .sc-navmenu__item {
        font-size: 10px;
        padding: 8px 8px;
    }

    /* Choco / Mfr — 1 col */
    .sc-choco__grid,
    .sc-mfr__grid {
        grid-template-columns: 1fr !important;
    }

    .sc-choco-card {
        width: 100% !important;
        max-width: 320px;
        margin: 0 auto;
    }

    /* Companies — mobile */
    .sc-companies-card {
        width: 140px;
    }

    .sc-companies-card__img-wrap {
        width: 140px;
        height: 120px;
        margin: 0 auto;
    }

    /* Supercat — 1 col */
    .sc-supercat__grid {
        grid-template-columns: 1fr !important;
        max-width: 320px;
        margin: 0 auto;
    }

    /* Value props — compact height on ≤480px */
    .sc-valueprop {
        height: 95px;
    }

    .sc-valueprop__img {
        width: 88px;
        height: 86px;
        top: 4px;
        left: 4px;
    }

    .sc-valueprop--blue .sc-valueprop__img {
        width: 74px;
        height: 72px;
        left: 8px;
        top: 10px;
    }

    .sc-valueprop__text {
        left: 96px;
        width: calc(100% - 106px);
    }

    .sc-valueprop__title {
        font-size: 13px;
    }

    .sc-valueprop__desc {
        font-size: 12px;
    }

    .sc-valueprop__more {
        font-size: 10px;
    }

    /* Most purchased — 1 card fills full viewport on very small screens */
    .sc-prodcard { width: calc(100vw - 24px); }
    .sc-prodcard__img-wrap { width: 120px; flex-shrink: 0; }

    .sc-prodcard__name {
        font-size: 14px;
    }

    .sc-prodcard__price {
        font-size: 14px;
    }

    /* Features */
    .sc-features {
        padding: 24px 12px;
    }

    .sc-features__title {
        font-size: 14px;
    }

    .sc-features__desc {
        font-size: 13px;
    }

    /* Footer form — stack vertically */
    .sc-footer__form {
        flex-direction: column;
        height: auto;
        gap: 8px;
    }

    .sc-footer__form-btn {
        width: 100%;
        height: 37px;
        border-radius: 2px;
    }

    .sc-footer__form-input {
        height: 37px;
        border: 1px solid var(--sc-divider);
        border-radius: 2px;
    }

    /* Prodlist — tighter */
    .sc-prodlist__title {
        font-size: 15px;
    }

    .sc-prodlist__name {
        font-size: 13px;
    }

    .sc-prodlist__price {
        font-size: 13px;
    }
}

/* ── Very small mobile: ≤425px ──────────────────────────── */
@media (max-width: 425px) {

    /* Value props — 1 per row */
    .sc-valueprop {
        width: 100% !important;
    }

    /* Footer — 1 col on very small screens */
    .sc-footer__inner {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Product lists — 1 per row on very small screens */
    .sc-prodlists {
        flex-direction: column !important;
        gap: 24px;
    }

    .sc-prodlist {
        width: 100% !important;
    }

    /* Delivery banner — compact column on very small screens */
    .sc-delivery {
        margin-top: 25px !important;
    }

    .sc-delivery__img {
        height: 120px;
        margin-top: -55px;
    }

    .sc-delivery__text {
        font-size: 14px;
    }

    .sc-delivery__btn {
        font-size: 13px;
        width: 90px;
        height: 28px;
    }
}

/* ── Wide screen: ≥1441px ────────────────────────────────── */
@media (min-width: 1441px) {

    /* Cap all centered content containers at 1280px */
    .sc-choco,
    .sc-companies,
    .sc-prodlists,
    .sc-mostpurchased,
    .sc-footer__inner,
    .sc-footer__bottom-inner,
    .sc-valueprops {
        max-width: 1280px !important;
    }

    /* Navbar and topbar — increase horizontal padding to match 1280px content */
    .sc-navbar,
    .sc-topbar,
    .sc-navmenu {
        padding-left: calc((100vw - 1280px) / 2);
        padding-right: calc((100vw - 1280px) / 2);
    }

    /* Hero — center featured block */
    .sc-featured {
        max-width: 1000px;
    }

    /* Valueprops — allow panels more space */
    .sc-valueprops {
        height: auto;
        padding: 20px 0;
    }

    .sc-valueprop {
        flex: 1;
        max-width: 400px;
    }

    .sc-valueprop__text {
        left: 190px;
        width: calc(100% - 206px);
    }
}


/* ══════════════════════════════════════════════════════════
   SHOP PAGE  /shop
   Hides Odoo default header; styles Odoo shop content to
   match the Sweet Center home-page (Cairo font, navy/gold,
   RTL direction, sc-choco-card product cards).
   ══════════════════════════════════════════════════════════ */

/* Hide Odoo's default header on any shop/products page */
#wrapwrap:has(.o_wsale_products_page) header#top {
    display: none !important;
}

/* ── Active navbar link ──────────────────────────────────── */
.sc-navbar__link--active {
    color: var(--sc-gold) !important;
    font-weight: 700 !important;
}

/* ── Shop page title ─────────────────────────────────────── */
.sc-shop__page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 0 20px;
}

.sc-shop__page-title {
    font-family: var(--sc-font-main);
    font-size: 30px;
    font-weight: 700;
    color: var(--sc-navy);
    margin: 0;
}

/* ── Odoo shop wrapper ───────────────────────────────────── */
.sc-shop__odoo {
    font-family: var(--sc-font-main) !important;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CARD  (.sc-pitem)
   Mirrors sc-choco-card: gray image bg, navy cart button,
   right-aligned name/price, responsive inside Odoo grid.
   ══════════════════════════════════════════════════════════ */

.sc-pitem {
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    direction: rtl;
    height: 100% !important;
}

/* ── Image area: gray bg, aspect-ratio 1:1, overflow visible for btn ── */
.sc-pitem__img {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: var(--sc-surface) !important;
    border-radius: 2px !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

/* Image link fills the gray box */
.sc-pitem__img-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Direct img tag — same approach as home-page choco-cards */
.sc-pitem__img-el {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* ── Navy circle add-to-cart button ──────────────────────── */
.sc-pitem__add-btn {
    position: absolute;
    left: 10px;
    bottom: -18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sc-navy);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 0;
    transition: background 0.2s;
}

.sc-pitem__add-btn:hover {
    background: var(--sc-deep-navy);
}

.sc-pitem__add-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ── Info area (below image) ──────────────────────────────── */
.sc-pitem__info {
    padding: 24px 0 8px !important;
    direction: rtl !important;
    text-align: right !important;
    background: transparent !important;
    flex: 1;
}

.sc-pitem__name {
    margin: 0 0 8px !important;
}

.sc-pitem__name a {
    font-family: var(--sc-font-main) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--sc-black) !important;
    text-align: right !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.sc-pitem__name a:hover {
    color: var(--sc-navy) !important;
}

.sc-pitem__price {
    direction: rtl !important;
    text-align: right !important;
    margin: 0 !important;
}

.sc-pitem__price-val {
    font-family: var(--sc-font-main) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--sc-black) !important;
}

.sc-pitem__price-del {
    font-family: var(--sc-font-main) !important;
    font-size: 12px !important;
    color: var(--sc-muted) !important;
    margin-right: 4px !important;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sc-page #products_grid_before h6,
.sc-page .o_wsale_categories_header {
    color: var(--sc-navy) !important;
    font-family: var(--sc-font-main) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--sc-gold) !important;
    padding-bottom: 6px !important;
}

.sc-page .o_wsale_categories_header,
.sc-page .products_header {
    direction: rtl !important;
    text-align: right !important;
}

/* ── Toolbar (sort/grid buttons) ─────────────────────────── */
.sc-page .products_header .btn-secondary,
.sc-page .products_header .btn-light,
.sc-page .products_header .btn-outline-secondary {
    background: var(--sc-navy) !important;
    border-color: var(--sc-navy) !important;
    color: var(--sc-white) !important;
}

/* ── Pagination ──────────────────────────────────────────── */
.sc-page .products_pager .page-item.active .page-link {
    background: var(--sc-navy) !important;
    border-color: var(--sc-navy) !important;
    color: var(--sc-white) !important;
}

.sc-page .products_pager .page-link {
    font-family: var(--sc-font-main) !important;
    color: var(--sc-navy) !important;
}