:root {
    --red: #c8102e;
    --red-dark: #8e1025;
    --ink: #17191a;
    --muted: #6d7471;
    --paper: #f7f7f4;
    --line: #e3e5df;
    --lime: #c9ef61;
    --orange: #ff7a00;
    --font: 'IBM Plex Sans Arabic', 'Manrope', sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    margin: 0
}

a {
    color: inherit;
    text-decoration: none
}

button,
input {
    font: inherit
}

.benefits {
    align-items: center;
    background: #171918;
    color: #fff;
    display: flex;
    font-size: 12px;
    gap: clamp(18px, 5vw, 70px);
    justify-content: center;
    min-height: 42px;
    padding: 7px 5vw
}

.benefits div {
    align-items: center;
    display: flex;
    gap: 8px
}

.benefits strong {
    font-weight: 500
}

.benefits-action {
    margin-inline-start: auto
}

.benefits-action a {
    border-inline-start: 1px solid #5b605d;
    padding-inline: 16px
}

.store-header {
    align-items: center;
    background: var(--red);
    color: #fff;
    display: flex;
    gap: clamp(18px, 3vw, 46px);
    min-height: 78px;
    padding: 0 5vw;
    position: sticky;
    top: 0;
    z-index: 20
}

.store-logo {
    align-items: center;
    display: inline-flex;
    font-family: Manrope, sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.08em;
    white-space: nowrap
}

.store-logo span {
    font-weight: 400
}

.store-logo i {
    background: var(--lime);
    border-radius: 50%;
    height: 7px;
    margin: 0 0 18px 4px;
    width: 7px
}

.store-header nav {
    display: flex;
    gap: clamp(14px, 2.5vw, 34px);
    white-space: nowrap
}

.store-header nav a {
    font-size: 13px;
    opacity: .88
}

.store-header nav a.active,
.store-header nav a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 8px
}

.search {
    background: #fff;
    border-radius: 28px;
    display: flex;
    flex: 1;
    max-width: 470px;
    margin-inline: auto;
    overflow: hidden
}

.search input {
    background: transparent;
    border: 0;
    color: var(--ink);
    min-width: 0;
    outline: 0;
    padding: 12px 20px;
    width: 100%
}

.search button {
    background: var(--ink);
    border: 5px solid #fff;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    height: 42px;
    margin: 3px;
    width: 42px
}

.cart {
    font-size: 22px;
    position: relative
}

.cart em {
    background: var(--lime);
    border-radius: 50%;
    color: var(--ink);
    font-size: 9px;
    font-style: normal;
    padding: 1px 5px;
    position: absolute;
    right: -8px;
    top: -7px
}

.customer-account {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    max-width: 180px;
    min-width: 0;
}

.customer-account span {
    align-items: center;
    background: var(--lime);
    border-radius: 50%;
    color: var(--ink);
    display: inline-flex;
    flex: 0 0 30px;
    font-size: 12px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.customer-account strong {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-menu {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    display: none;
    padding: 7px
}

.store-hero {
    background: #e9eee7;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 390px;
    overflow: hidden;
    padding: 58px 10vw;
    position: relative
}

.hero-copy {
    position: relative;
    z-index: 1
}

.store-eyebrow,
.section-kicker {
    color: var(--red);
    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em
}

.store-hero h1 {
    font-size: clamp(3rem, 6vw, 6.5rem);
    letter-spacing: -.08em;
    line-height: .94;
    margin: 23px 0 18px;
    white-space: pre-line
}

.store-hero p {
    color: var(--muted);
    max-width: 460px
}

.store-hero .store-button {
    margin-top: 22px
}

.store-button {
    border: 1px solid transparent;
    display: inline-flex;
    font-size: 12px;
    gap: 20px;
    padding: 13px 19px
}

.store-button.primary {
    background: var(--red);
    color: #fff
}

.store-button.primary:hover {
    background: var(--red-dark)
}

.store-button.outline {
    border-color: var(--ink);
    margin-inline-start: 8px
}

.hero-art {
    position: relative
}

.hero-circle {
    align-items: center;
    background: var(--lime);
    border-radius: 50%;
    display: flex;
    font-family: Manrope;
    font-size: 110px;
    font-weight: 800;
    height: 300px;
    justify-content: center;
    position: absolute;
    right: 12%;
    top: 0;
    transform: rotate(-10deg);
    width: 300px
}

.hero-circle span {
    font-size: 11px;
    position: absolute;
    right: 22px;
    top: 27px
}

.hero-card {
    border: 1px solid var(--ink);
    font-family: Manrope;
    font-size: 37px;
    line-height: .95;
    padding: 18px;
    position: absolute;
    right: 45%;
    top: 95px;
    transform: rotate(13deg);
    z-index: 2
}

.hero-card b {
    color: var(--red)
}

main {
    background: var(--paper)
}

.catalog-section {
    padding: 75px 7vw 90px
}

.catalog-heading {
    align-items: end;
    display: flex;
    justify-content: space-between
}

.catalog-heading h2 {
    font-size: clamp(2.2rem, 4vw, 4rem);
    letter-spacing: -.07em;
    margin: 14px 0 3px
}

.catalog-heading p {
    color: var(--muted);
    margin: 0
}

.more-link {
    border-bottom: 1px solid var(--ink);
    font-size: 12px;
    padding-bottom: 8px
}

.category-pills {
    display: flex;
    gap: 9px;
    margin: 39px 0 24px;
    overflow: auto;
    padding-bottom: 5px
}

.category-pills button {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    padding: 9px 17px;
    white-space: nowrap
}

.category-pills button.selected,
.category-pills button:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff
}

.product-grid {
    display: grid;
    gap: 17px;
    grid-template-columns: repeat(4, 1fr)
}

.product-card {
    background: #fff;
    border: 1px solid var(--line);
    min-width: 0;
    transition: box-shadow .2s, transform .2s
}

.product-card:hover {
    box-shadow: 0 12px 25px #17191818;
    transform: translateY(-3px)
}

.product-image {
    aspect-ratio: 1/.94;
    background: #edf0ec;
    overflow: hidden;
    position: relative
}

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

.product-card:hover img {
    transform: scale(1.04)
}

.product-badge {
    background: var(--red);
    color: #fff;
    font-size: 10px;
    inset-inline-start: 10px;
    padding: 4px 7px;
    position: absolute;
    top: 10px
}

.quick-view {
    background: #fff;
    border: 0;
    border-radius: 50%;
    bottom: 10px;
    cursor: pointer;
    font-size: 18px;
    height: 31px;
    position: absolute;
    right: 10px;
    width: 31px
}

.product-info {
    padding: 13px
}

.product-rating {
    align-items: center;
    display: flex;
    gap: 6px
}

.product-rating span {
    color: #e87900;
    font-size: 11px
}

.product-rating small {
    color: var(--muted);
    font-size: 9px
}

.product-info h3 {
    font-size: 14px;
    line-height: 1.35;
    margin: 9px 0 2px
}

.product-info p {
    color: var(--muted);
    font-size: 10px;
    margin: 0
}

.product-buy {
    align-items: end;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    margin-top: 13px;
    padding-top: 11px
}

.product-buy small {
    color: var(--red);
    display: block;
    font-size: 9px
}

.product-buy strong {
    display: inline-block;
    font-family: Manrope;
    font-size: 17px
}

.product-buy del {
    color: #9a9e9a;
    font-size: 9px;
    margin-inline-start: 5px
}

.add-cart {
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    height: 33px;
    line-height: 1;
    width: 33px
}

.add-cart:hover {
    background: var(--lime)
}

.load-more {
    background: var(--orange);
    border: 0;
    border-radius: 26px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-weight: 600;
    margin: 43px auto 0;
    padding: 14px 60px
}

.empty-products {
    color: var(--muted);
    grid-column: 1/-1;
    padding: 50px;
    text-align: center
}

.custom-banner {
    background: var(--ink);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 350px;
    overflow: hidden;
    padding: 68px 12vw;
    position: relative
}

.custom-banner h2 {
    font-size: clamp(2.4rem, 5vw, 5rem);
    letter-spacing: -.08em;
    line-height: 1;
    margin: 18px 0
}

.custom-banner h2 b {
    color: var(--lime);
    font-weight: 500
}

.custom-banner p {
    color: #acb2ad;
    max-width: 410px
}

.custom-banner .section-kicker {
    color: var(--lime)
}

.custom-mark {
    align-items: center;
    border: 1px solid #56635a;
    border-radius: 50%;
    color: var(--lime);
    display: flex;
    flex-direction: column;
    font: 800 100px/1 Manrope;
    height: 290px;
    justify-content: center;
    justify-self: end;
    transform: rotate(12deg);
    width: 290px
}

.custom-mark small {
    font: 500 10px Manrope;
    letter-spacing: .15em
}

.quick-quote {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 70px 12vw
}

.quick-quote h2 {
    font-size: clamp(2rem, 4vw, 4rem);
    letter-spacing: -.08em;
    margin: 13px 0 0
}

.quick-quote form {
    display: grid;
    gap: 12px;
    max-width: 440px;
    width: 100%;
}

.quick-quote label {
    color: var(--muted);
    display: grid;
    font-size: 12px;
    gap: 5px;
}

.quick-quote input,
.quick-quote textarea {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    padding: 11px 13px;
    resize: vertical;
}

.quick-quote input:focus,
.quick-quote textarea:focus {
    border-color: var(--red);
    outline: 2px solid rgba(200, 16, 46, .14);
}

.form-feedback {
    color: var(--muted);
    font-size: 12px;
    min-height: 22px;
    margin: 0;
}

.cart-summary {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(23, 25, 26, .16);
    display: none;
    padding: 18px;
    position: fixed;
    right: 5vw;
    top: 90px;
    width: min(360px, calc(100vw - 30px));
    z-index: 30;
}

.cart-summary.is-open {
    display: block;
}

.cart-summary h2 {
    font-size: 18px;
    margin: 0 0 14px;
}

.cart-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cart-heading h2 {
    margin: 0;
}

.cart-close,
.cart-remove {
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 3px 6px;
}

.cart-close:hover,
.cart-remove:hover {
    color: var(--red);
}

.cart-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cart-summary li {
    border-bottom: 1px solid var(--line);
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    padding: 9px 0;
}

.cart-summary li {
    align-items: center;
    gap: 8px;
}

.cart-summary li span {
    flex: 1;
}

.cart-summary li strong {
    white-space: nowrap;
}

.cart-remove {
    font-size: 16px;
}

.cart-summary .cart-total {
    display: flex;
    font-weight: 700;
    justify-content: space-between;
    padding-top: 14px;
}

.cart-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.cart-actions button,
.cart-actions a {
    appearance: none;
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
    flex: 1;
    font-size: 11px;
    font-family: inherit;
    font-weight: 700;
    padding: 10px 8px;
    text-align: center;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.cart-continue {
    background: var(--surface);
    color: var(--ink);
}

.cart-continue:hover {
    background: var(--surface-soft);
    border-color: var(--ink);
    transform: translateY(-1px);
}

.cart-quote {
    background: var(--red);
    border-color: var(--red) !important;
    color: #fff;
}

.cart-quote:hover {
    background: var(--red-dark);
    color: #fff;
    transform: translateY(-1px);
}

.product-card.is-hidden {
    display: none;
}

.store-footer {
    background: #202321;
    color: #fff;
    display: grid;
    gap: 40px;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    padding: 58px 7vw 25px
}

.footer-brand p {
    color: #a4aaa5;
    font-size: 12px;
    line-height: 1.8;
    max-width: 250px
}

.store-footer h3 {
    font-size: 13px;
    margin: 3px 0 17px
}

.store-footer>div>a,
.store-footer>div>span {
    color: #a4aaa5;
    display: block;
    font-size: 11px;
    margin: 11px 0
}

.footer-contact strong {
    color: var(--lime);
    display: block;
    font-family: Manrope;
    font-size: 13px
}

.socials {
    display: flex;
    gap: 12px
}

.socials a {
    color: #fff !important
}

.footer-bottom {
    border-top: 1px solid #414642;
    color: #777f79;
    display: flex;
    font-size: 10px;
    grid-column: 1/-1;
    justify-content: space-between;
    padding-top: 19px
}

@media(max-width:1050px) {
    .store-header {
        gap: 18px
    }

    .store-header nav {
        gap: 14px
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .store-footer {
        grid-template-columns: repeat(3, 1fr)
    }

    .footer-brand {
        grid-column: 1/-1
    }
}

@media(max-width:720px) {
    .benefits {
        font-size: 10px;
        justify-content: space-around
    }

    .benefits>div:nth-child(2),
    .benefits>div:nth-child(3) {
        display: none
    }

    .benefits-action {
        margin: 0
    }

    .store-header {
        flex-wrap: wrap;
        gap: 12px;
        min-height: 72px;
        padding: 12px 5vw
    }

    .store-header nav {
        display: none;
        order: 5;
        width: 100%
    }

    .store-header.nav-open nav {
        display: flex;
        overflow: auto;
        padding: 9px 0
    }

    .store-header .search {
        flex: 1;
        order: 3
    }

    .store-header .cart {
        order: 4
    }

    .store-menu {
        display: block;
        order: 2
    }

    .store-logo {
        font-size: 21px
    }

    .store-hero {
        grid-template-columns: 1fr;
        min-height: 510px;
        padding: 45px 8vw
    }

    .store-hero h1 {
        font-size: clamp(2.8rem, 13vw, 5rem)
    }

    .hero-art {
        height: 170px
    }

    .hero-circle {
        font-size: 65px;
        height: 170px;
        right: 14%;
        width: 170px
    }

    .hero-card {
        font-size: 20px;
        right: 40%;
        top: 35px
    }

    .catalog-section {
        padding: 55px 5vw
    }

    .catalog-heading {
        align-items: start;
        flex-direction: column;
        gap: 20px
    }

    .product-grid {
        gap: 10px;
        grid-template-columns: repeat(2, 1fr)
    }

    .product-info {
        padding: 10px
    }

    .product-info h3 {
        font-size: 12px
    }

    .product-buy strong {
        font-size: 14px
    }

    .custom-banner {
        grid-template-columns: 1fr;
        min-height: 500px;
        padding: 55px 8vw
    }

    .custom-mark {
        height: 190px;
        justify-self: center;
        width: 190px;
        font-size: 65px
    }

    .quick-quote {
        align-items: start;
        flex-direction: column;
        gap: 25px;
        padding: 55px 8vw
    }

    .store-footer {
        gap: 24px;
        grid-template-columns: repeat(2, 1fr);
        padding: 45px 7vw 22px
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-contact {
        grid-column: 1/-1
    }

    .footer-bottom {
        align-items: start;
        flex-direction: column;
        gap: 8px
    }
}

/* SaduFab storefront polish */
:root {
    --store-shadow: 0 18px 45px rgba(23, 25, 26, .08);
    --store-border: rgba(23, 25, 26, .11);
}

body {
    background:
        linear-gradient(rgba(23, 25, 26, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 25, 26, .025) 1px, transparent 1px),
        var(--paper);
    background-size: 34px 34px;
}

.benefits {
    box-shadow: 0 2px 0 rgba(255, 255, 255, .08);
    letter-spacing: .01em;
}

.benefits div:first-child {
    color: var(--lime);
}

.store-header {
    box-shadow: 0 12px 28px rgba(83, 9, 23, .16);
    min-height: 82px;
}

.store-logo {
    font-size: 27px;
}

.search {
    box-shadow: 0 8px 20px rgba(23, 25, 26, .13);
    transition: box-shadow .2s ease, transform .2s ease;
}

.search:focus-within {
    box-shadow: 0 11px 25px rgba(23, 25, 26, .2);
    transform: translateY(-1px);
}

.store-hero {
    background:
        radial-gradient(circle at 85% 25%, rgba(201, 239, 97, .36), transparent 23%),
        #e9eee7;
    min-height: 450px;
}

.store-hero::before {
    border: 1px solid rgba(23, 25, 26, .1);
    border-radius: 50%;
    content: '';
    height: 440px;
    position: absolute;
    right: 8%;
    top: -170px;
    width: 440px;
}

.store-hero h1 {
    font-weight: 800;
    text-shadow: 0 3px 0 rgba(255, 255, 255, .35);
}

.store-button {
    border-radius: 5px;
    box-shadow: 0 8px 18px rgba(23, 25, 26, .08);
    transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.store-button:hover {
    box-shadow: 0 12px 23px rgba(23, 25, 26, .14);
    transform: translateY(-2px);
}

.catalog-section {
    position: relative;
}

.catalog-heading h2 {
    font-weight: 800;
}

.category-pills button {
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.category-pills button:hover {
    transform: translateY(-2px);
}

.product-grid {
    gap: 20px;
}

.product-card {
    border: 1px solid var(--store-border);
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(23, 25, 26, .025);
    overflow: hidden;
}

.product-image {
    background: #eef1ed;
}

.product-badge {
    border-radius: 0 0 4px 0;
    font-weight: 700;
}

/* Unified elevated card language */
:root {
    --paper: #f4edfb;
    --surface: #ffffff;
    --surface-soft: #fbf8ff;
    --line: #e8dcf4;
    --ink: #2e1b4f;
    --muted: #786b88;
    --card-shadow: 0 10px 24px rgba(74, 39, 111, .10), 0 2px 5px rgba(74, 39, 111, .06);
    --card-shadow-hover: 0 18px 36px rgba(74, 39, 111, .16), 0 4px 8px rgba(74, 39, 111, .08);
}

body {
    background: radial-gradient(circle at 10% 12%, rgba(204, 159, 255, .18), transparent 28%), var(--paper);
    color: var(--ink);
    font-family: 'IBM Plex Sans Arabic', 'Manrope', sans-serif;
    line-height: 1.7;
}

.store-hero {
    background: linear-gradient(135deg, #f0e5fb 0%, #fff 100%);
    padding-block: clamp(54px, 8vw, 92px);
}

.store-hero h1,
.catalog-heading h2,
.custom-banner h2,
.quick-quote h2,
.product-info h3 {
    letter-spacing: 0;
    line-height: 1.3;
}

.product-card,
.quick-quote form,
.cart-summary {
    background: var(--surface);
    border: 1px solid rgba(144, 93, 191, .14);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
}

.product-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-5px);
}

.product-info {
    padding: 17px;
}

.category-pills button,
.store-button,
.search,
.add-cart,
.quick-view {
    border-radius: 12px;
}

.custom-banner {
    margin-inline: 5vw;
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(23, 25, 26, .14);
}

.quick-quote {
    gap: clamp(30px, 7vw, 100px);
}

.quick-quote form {
    padding: clamp(20px, 3vw, 32px);
}

.quick-quote input,
.quick-quote textarea {
    background: var(--surface-soft);
    border-color: var(--line);
    border-radius: 12px;
}

.store-footer {
    margin-top: 20px;
    border-radius: 22px 22px 0 0;
}

@media(max-width:720px) {
    .custom-banner {
        margin-inline: 4vw;
    }
}

.product-info h3 {
    font-weight: 700;
}

.product-buy {
    margin-top: 16px;
}

.add-cart {
    transition: background .2s ease, transform .2s ease;
}

.add-cart:hover,
.add-cart.added {
    background: var(--lime);
    transform: scale(1.08);
}

.load-more {
    box-shadow: 0 10px 20px rgba(255, 122, 0, .2);
    transition: box-shadow .2s ease, transform .2s ease;
}

.load-more:hover {
    box-shadow: 0 14px 25px rgba(255, 122, 0, .3);
    transform: translateY(-2px);
}

.custom-banner {
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(255, 255, 255, .04);
}

.custom-mark {
    box-shadow: 0 0 0 18px rgba(201, 239, 97, .035), 0 0 0 36px rgba(201, 239, 97, .02);
}

.quick-quote {
    background: rgba(255, 255, 255, .5);
}

.store-footer {
    box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}

.store-footer a {
    transition: color .2s ease, padding .2s ease;
}

.store-footer a:hover {
    color: var(--lime) !important;
    padding-inline-start: 4px;
}

.footer-admin-link {
    color: var(--lime) !important;
    font-weight: 700;
    margin-top: 18px !important;
}

@media(max-width:720px) {
    .store-header {
        box-shadow: 0 8px 20px rgba(83, 9, 23, .13);
    }

    .store-hero::before {
        height: 280px;
        right: -80px;
        top: 245px;
        width: 280px;
    }

    .product-grid {
        gap: 12px;
    }
}

/* Homepage direction: SaduFab studio edition */
:root {
    --paper: #f3f0ea;
    --surface: #fffdf9;
    --surface-soft: #ebe7df;
    --ink: #171918;
    --muted: #6d716c;
    --line: #d9d8d0;
    --red: #bb1834;
    --red-dark: #861126;
    --lime: #c7ed62;
    --orange: #e36d20;
    --card-shadow: 0 16px 34px rgba(23, 25, 26, .10), 0 3px 8px rgba(23, 25, 26, .05);
    --card-shadow-hover: 0 24px 48px rgba(23, 25, 26, .16), 0 6px 12px rgba(23, 25, 26, .07);
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'IBM Plex Sans Arabic', 'Manrope', sans-serif;
    line-height: 1.75;
}

.benefits {
    background: var(--ink);
    min-height: 38px;
}

.benefits-action a:last-child {
    color: var(--lime);
    font-weight: 700;
}

.store-header {
    background: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 12px 30px rgba(23, 25, 26, .18);
    min-height: 84px;
}

.store-logo {
    font-size: 29px;
}

.store-header nav a {
    color: #f4f1e9;
}

.search {
    box-shadow: none;
}

.search button {
    background: var(--red);
}

.cart em {
    background: var(--lime);
}

.store-hero {
    background:
        linear-gradient(90deg, rgba(243, 240, 234, .98) 0%, rgba(243, 240, 234, .90) 48%, rgba(243, 240, 234, .25) 100%),
        linear-gradient(135deg, #e6e2d9 0%, #f8f6f1 100%);
    min-height: 570px;
    padding: clamp(68px, 9vw, 118px) 9vw;
}

.store-hero::before {
    border: 1px solid rgba(23, 25, 26, .18);
    height: 560px;
    right: 7%;
    top: -180px;
    width: 560px;
}

.hero-copy {
    max-width: 720px;
}

.store-eyebrow,
.section-kicker {
    color: var(--red);
    letter-spacing: .12em;
}

.store-hero h1 {
    color: var(--ink);
    font-size: clamp(3.4rem, 7vw, 7.6rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.02;
    max-width: 760px;
    text-wrap: balance;
}

.store-hero p {
    color: #4f544f;
    font-size: 16px;
    line-height: 1.9;
}

.store-button {
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 15px 22px;
}

.store-button.primary {
    background: var(--red);
    box-shadow: 0 12px 24px rgba(187, 24, 52, .20);
}

.store-button.primary:hover {
    background: var(--red-dark);
}

.store-button.outline {
    border-color: var(--ink);
}

.hero-circle {
    background: var(--lime);
    box-shadow: 18px 18px 0 rgba(23, 25, 26, .08);
}

.hero-card {
    background: var(--surface);
    border: 1px solid var(--ink);
    box-shadow: 12px 14px 0 rgba(23, 25, 26, .12);
}

.catalog-section {
    padding: clamp(72px, 9vw, 120px) 7vw 105px;
}

.catalog-heading {
    border-bottom: 1px solid var(--line);
    padding-bottom: 30px;
}

.catalog-heading h2 {
    font-size: clamp(2.8rem, 5vw, 5.2rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.catalog-heading p {
    font-size: 14px;
}

.more-link {
    border-bottom: 2px solid var(--red);
    font-weight: 700;
}

.category-pills {
    margin: 28px 0 26px;
}

.category-pills button {
    background: transparent;
    border-color: #c9c9c0;
    border-radius: 3px;
    color: #51564f;
    font-weight: 600;
    padding: 10px 19px;
}

.category-pills button.selected,
.category-pills button:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.product-grid {
    gap: 22px;
    grid-template-columns: repeat(3, 1fr);
}

.product-card {
    background: var(--surface);
    border: 1px solid rgba(23, 25, 26, .10);
    border-radius: 4px;
    box-shadow: var(--card-shadow);
}

.product-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-7px);
}

.product-image {
    aspect-ratio: 1 / .82;
    background: #e5e1d7;
}

.product-image img {
    filter: saturate(.82);
}

.product-badge {
    background: var(--red);
    border-radius: 0;
    font-weight: 700;
    inset-inline-start: 0;
    top: 0;
}

.quick-view {
    background: var(--surface);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(23, 25, 26, .14);
}

.product-info {
    padding: 19px;
}

.product-info h3 {
    font-size: 16px;
    font-weight: 800;
}

.product-rating span,
.product-buy small {
    color: var(--red);
}

.add-cart {
    border-radius: 4px;
}

.custom-banner {
    background: var(--ink);
    border-radius: 0;
    box-shadow: 0 22px 42px rgba(23, 25, 26, .18);
    margin-inline: 0;
    min-height: 420px;
    padding: clamp(58px, 8vw, 100px) 12vw;
}

.custom-banner h2 {
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 800;
}

.custom-mark {
    border-color: rgba(199, 237, 98, .55);
}

.quick-quote {
    background: var(--surface);
    padding: clamp(72px, 9vw, 120px) 12vw;
}

.quick-quote h2 {
    font-size: clamp(2.6rem, 5vw, 5.2rem);
    font-weight: 800;
}

.quick-quote form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: var(--card-shadow);
    padding: 30px;
}

.quick-quote input,
.quick-quote textarea {
    background: var(--surface);
    border-color: var(--line);
    border-radius: 3px;
}

.store-footer {
    background: var(--ink);
    border-radius: 0;
    margin-top: 0;
}

@media(max-width:1050px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:720px) {
    .store-hero {
        min-height: 640px;
        padding: 54px 8vw 35px;
    }

    .store-hero h1 {
        font-size: clamp(3rem, 15vw, 5.4rem);
    }

    .store-hero p {
        font-size: 14px;
    }

    .catalog-section {
        padding-inline: 5vw;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-info {
        padding: 12px;
    }

    .product-info h3 {
        font-size: 13px;
    }

    .custom-banner {
        min-height: 540px;
        padding-inline: 8vw;
    }
}

/* Reference-led homepage finish: soft cards and readable Arabic hierarchy */
:root {
    --paper: #f3eafb;
    --surface: #ffffff;
    --surface-soft: #faf7ff;
    --ink: #321c54;
    --muted: #756784;
    --line: #e5d5f3;
    --red: #8b35d4;
    --red-dark: #6720a5;
    --lime: #d8a8ff;
    --card-shadow: 0 14px 30px rgba(83, 42, 126, .12), 0 3px 8px rgba(83, 42, 126, .06);
    --card-shadow-hover: 0 22px 42px rgba(83, 42, 126, .17), 0 5px 12px rgba(83, 42, 126, .08);
}

body {
    background: radial-gradient(circle at 12% 8%, rgba(212, 170, 255, .23), transparent 26%), var(--paper);
    color: var(--ink);
    font-family: 'IBM Plex Sans Arabic', 'Manrope', sans-serif;
    line-height: 1.75;
}

.benefits {
    background: #24133d;
}

.store-header {
    background: linear-gradient(105deg, #542080 0%, #8535cc 100%);
    border-bottom: 0;
    box-shadow: 0 10px 25px rgba(66, 27, 100, .18);
}

.store-header nav a,
.store-header .cart {
    color: #fff;
}

.store-header nav a.active,
.store-header nav a:hover {
    text-decoration-color: #e4bfff;
}

.search {
    box-shadow: 0 7px 18px rgba(44, 13, 71, .18);
}

.search button {
    background: #321c54;
}

.store-hero {
    align-items: center;
    background: linear-gradient(145deg, #eadcf8 0%, #f8f4fc 100%);
    gap: clamp(28px, 5vw, 76px);
    min-height: 520px;
    padding: clamp(40px, 6vw, 78px) 7vw;
}

.store-hero::before {
    border-color: rgba(139, 53, 212, .15);
    height: 500px;
    right: 3%;
    top: -180px;
    width: 500px;
}

.hero-copy {
    background: var(--surface);
    border: 1px solid rgba(139, 53, 212, .13);
    border-radius: 22px;
    box-shadow: var(--card-shadow);
    padding: clamp(28px, 4vw, 54px);
}

.store-eyebrow,
.section-kicker {
    color: var(--red);
    letter-spacing: .04em;
}

.store-hero h1 {
    color: var(--ink);
    font-size: clamp(2.8rem, 5vw, 5.8rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 18px 0 14px;
    text-wrap: balance;
}

.store-hero p {
    color: var(--muted);
    font-size: 15px;
    line-height: 2;
}

.store-button {
    border-radius: 12px;
    box-shadow: none;
    font-weight: 700;
}

.store-button.primary {
    background: linear-gradient(135deg, #bd70f4 0%, #7c22be 100%);
    box-shadow: 0 9px 18px rgba(126, 36, 190, .2);
}

.store-button.primary:hover {
    background: linear-gradient(135deg, #c987fa 0%, #6920a9 100%);
}

.store-button.outline {
    border-color: #a983bf;
}

.hero-art {
    min-height: 360px;
}

.hero-circle {
    background: linear-gradient(135deg, #d9aaff 0%, #9a43df 100%);
    box-shadow: 16px 17px 0 rgba(83, 42, 126, .10);
    color: #fff;
}

.hero-card {
    background: var(--surface);
    border: 1px solid #a47fc0;
    border-radius: 14px;
    box-shadow: 10px 12px 0 rgba(83, 42, 126, .12);
}

.hero-card b {
    color: var(--red);
}

.catalog-section {
    padding: clamp(48px, 7vw, 86px) 7vw 96px;
}

.catalog-heading {
    align-items: center;
    background: var(--surface);
    border: 1px solid rgba(139, 53, 212, .12);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: 28px clamp(22px, 4vw, 42px);
}

.catalog-heading h2,
.quick-quote h2 {
    color: var(--ink);
    font-size: clamp(2.2rem, 4vw, 4.4rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.35;
}

.catalog-heading p {
    color: var(--muted);
}

.more-link {
    border-bottom-color: var(--red);
    color: var(--red);
    font-weight: 700;
}

.category-pills button {
    background: rgba(255, 255, 255, .72);
    border-color: #d6c1e6;
    border-radius: 22px;
    color: var(--muted);
}

.category-pills button.selected,
.category-pills button:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.product-grid {
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.product-card {
    background: var(--surface);
    border: 1px solid rgba(139, 53, 212, .13);
    border-radius: 17px;
    box-shadow: var(--card-shadow);
}

.product-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-5px);
}

.product-image {
    background: #eee4f7;
}

.product-badge {
    background: var(--red);
    border-radius: 0 0 10px 0;
}

.quick-view,
.add-cart {
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(83, 42, 126, .12);
}

.product-info h3 {
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.55;
}

.product-info p,
.product-rating small {
    color: var(--muted);
}

.product-rating span,
.product-buy small {
    color: var(--red);
}

.custom-banner {
    background: linear-gradient(135deg, #2e1750 0%, #4d2477 100%);
    border-radius: 22px;
    margin-inline: 5vw;
    min-height: 370px;
    padding: clamp(50px, 7vw, 85px) 9vw;
}

.custom-banner h2 {
    font-size: clamp(2.6rem, 5vw, 5rem);
    letter-spacing: 0;
    line-height: 1.35;
}

.custom-mark {
    border-color: rgba(216, 168, 255, .55);
    color: #d8a8ff;
}

.quick-quote {
    background: transparent;
    gap: clamp(30px, 6vw, 100px);
    padding: clamp(58px, 8vw, 100px) 9vw;
}

.quick-quote form {
    background: var(--surface);
    border: 1px solid rgba(139, 53, 212, .13);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: clamp(22px, 4vw, 34px);
}

.quick-quote input,
.quick-quote textarea {
    background: var(--surface-soft);
    border-color: var(--line);
    border-radius: 11px;
}

.store-footer {
    background: #24133d;
    border-radius: 22px 22px 0 0;
    margin-top: 18px;
}

@media(max-width:1050px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:720px) {
    .store-hero {
        min-height: 0;
        padding: 28px 5vw 42px;
    }

    .hero-copy {
        border-radius: 17px;
        padding: 25px 21px;
    }

    .store-hero h1 {
        font-size: clamp(2.35rem, 12vw, 4.6rem);
        line-height: 1.35;
    }

    .hero-art {
        min-height: 220px;
    }

    .hero-circle {
        height: 200px;
        width: 200px;
    }

    .hero-card {
        right: 38%;
        top: 55px;
    }

    .catalog-section {
        padding-inline: 5vw;
    }

    .catalog-heading {
        align-items: flex-start;
        gap: 14px;
        padding: 22px 19px;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-info {
        padding: 12px;
    }

    .product-info h3 {
        font-size: 13px;
    }

    .custom-banner {
        margin-inline: 4vw;
        min-height: 470px;
        padding-inline: 8vw;
    }

    .quick-quote {
        padding-inline: 6vw;
    }
}

/* Magical professional finish */
:root {
    --magic-deep: #211235;
    --magic-violet: #7b2db5;
    --magic-lilac: #d9b1ff;
    --magic-glow: rgba(176, 91, 255, .28);
}

body {
    background:
        radial-gradient(circle at 72% 16%, rgba(214, 169, 255, .34), transparent 25%),
        radial-gradient(circle at 12% 68%, rgba(255, 255, 255, .78), transparent 28%),
        var(--paper);
}

.benefits {
    background: var(--magic-deep);
    letter-spacing: .02em;
}

.store-header {
    background: linear-gradient(110deg, #32164f 0%, #6f249f 58%, #963fce 100%);
    box-shadow: 0 14px 34px rgba(42, 14, 65, .24);
}

.store-header::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    content: '';
    height: 1px;
    inset: auto 10% 0;
    position: absolute;
}

.store-logo i {
    background: var(--magic-lilac);
    box-shadow: 0 0 12px var(--magic-glow);
}

.store-hero {
    background:
        linear-gradient(90deg, rgba(247, 241, 253, .72), rgba(247, 241, 253, .92)),
        radial-gradient(circle at 24% 45%, rgba(182, 91, 255, .16), transparent 22%),
        linear-gradient(145deg, #e3d1f3 0%, #faf7fd 100%);
    isolation: isolate;
    overflow: hidden;
}

.store-hero::after {
    background: repeating-linear-gradient(120deg, transparent 0 32px, rgba(123, 45, 181, .035) 33px 34px);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.hero-copy {
    animation: magic-rise .75s ease both;
    box-shadow: 0 22px 46px rgba(74, 39, 111, .15), 0 0 0 1px rgba(255, 255, 255, .55) inset;
    position: relative;
}

.hero-copy::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
    content: '';
    height: 1px;
    inset: 0 12%;
    position: absolute;
}

.store-eyebrow,
.section-kicker {
    color: var(--magic-violet);
    font-weight: 800;
}

.store-hero h1 {
    text-shadow: 0 2px 18px rgba(123, 45, 181, .08);
}

.store-button.primary {
    background: linear-gradient(135deg, #c17afa 0%, #7420b4 100%);
    box-shadow: 0 12px 24px rgba(123, 45, 181, .25), 0 0 22px rgba(176, 91, 255, .18);
}

.store-button.primary:hover {
    box-shadow: 0 16px 30px rgba(123, 45, 181, .32), 0 0 30px rgba(176, 91, 255, .26);
}

.hero-art {
    animation: magic-float 6s ease-in-out infinite;
}

.hero-circle {
    background: linear-gradient(145deg, #e0b4ff 0%, #9a3ed4 48%, #64209b 100%);
    box-shadow: 18px 20px 0 rgba(76, 33, 112, .10), 0 0 48px rgba(174, 90, 248, .26);
}

.hero-card {
    box-shadow: 12px 14px 0 rgba(83, 42, 126, .12), 0 0 22px rgba(176, 91, 255, .16);
}

.catalog-heading,
.product-card,
.quick-quote form {
    box-shadow: 0 16px 34px rgba(83, 42, 126, .12), 0 0 0 1px rgba(255, 255, 255, .5) inset;
}

.catalog-heading {
    position: relative;
}

.catalog-heading::after {
    background: var(--magic-lilac);
    border-radius: 50%;
    box-shadow: 0 0 16px var(--magic-glow);
    content: '';
    height: 7px;
    position: absolute;
    right: 28px;
    top: 28px;
    width: 7px;
}

.product-card {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.product-card:hover {
    border-color: rgba(139, 53, 212, .34);
    box-shadow: 0 24px 44px rgba(83, 42, 126, .18), 0 0 26px rgba(176, 91, 255, .12);
}

.product-image img {
    transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .35s ease;
}

.product-card:hover .product-image img {
    filter: saturate(1) brightness(1.04);
}

.custom-banner {
    background:
        radial-gradient(circle at 78% 35%, rgba(201, 137, 250, .24), transparent 25%),
        linear-gradient(135deg, #211235 0%, #4a1d70 100%);
    box-shadow: 0 24px 48px rgba(44, 17, 68, .24);
}

.custom-mark {
    box-shadow: 0 0 0 16px rgba(216, 168, 255, .035), 0 0 42px rgba(176, 91, 255, .18);
}

.store-footer {
    background: linear-gradient(135deg, #211235 0%, #32164f 100%);
}

@keyframes magic-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes magic-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(.6deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-copy,
    .hero-art {
        animation: none;
    }
}

/* Final premium polish */
.store-logo {
    direction: ltr;
    display: inline-block;
    unicode-bidi: isolate;
}

.store-logo b,
.store-logo span,
.store-logo i {
    display: inline-block;
}

.store-header::before {
    background: radial-gradient(circle, rgba(226, 183, 255, .24), transparent 68%);
    content: '';
    height: 180px;
    left: 28%;
    pointer-events: none;
    position: absolute;
    top: -100px;
    width: 180px;
}

.hero-circle::after {
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    content: '';
    inset: 14px;
    position: absolute;
}

.hero-circle span {
    z-index: 1;
}

.hero-art::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .16), 0 0 18px rgba(255, 255, 255, .9);
    content: '';
    height: 5px;
    position: absolute;
    right: 4%;
    top: 20%;
    width: 5px;
}

.hero-card::after {
    background: var(--magic-lilac);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--magic-glow);
    content: '';
    height: 6px;
    position: absolute;
    right: -17px;
    top: -16px;
    width: 6px;
}

.product-card,
.catalog-heading,
.quick-quote form {
    backdrop-filter: blur(10px);
}

.product-badge {
    box-shadow: 0 5px 14px rgba(83, 42, 126, .16);
}

.footer-admin-link {
    color: #a4aaa5 !important;
    display: block !important;
    font-size: 11px;
    margin: 11px 0;
}

/* Sadu contemporary theme */
:root {
    --paper: #f3eee4;
    --surface: #fffdf8;
    --surface-soft: #eee7da;
    --ink: #201f1b;
    --muted: #706b60;
    --line: #d9d0c1;
    --red: #a94739;
    --red-dark: #7f302b;
    --lime: #b4bd68;
    --orange: #c76d39;
    --card-shadow: 0 16px 34px rgba(52, 39, 24, .11), 0 3px 8px rgba(52, 39, 24, .06);
    --card-shadow-hover: 0 24px 46px rgba(52, 39, 24, .17), 0 6px 12px rgba(52, 39, 24, .08);
}

body {
    background-color: var(--paper);
    background-image:
        linear-gradient(135deg, rgba(169, 71, 57, .035) 25%, transparent 25%),
        linear-gradient(225deg, rgba(169, 71, 57, .035) 25%, transparent 25%),
        linear-gradient(45deg, rgba(32, 31, 27, .025) 25%, transparent 25%),
        linear-gradient(315deg, rgba(32, 31, 27, .025) 25%, var(--paper) 25%);
    background-position: 0 0, 12px 0, 12px -12px, 0 12px;
    background-size: 24px 24px;
    color: var(--ink);
}

.benefits {
    background: #28241e;
}

.benefits div:first-child {
    color: #d5bd78;
}

.store-header {
    background: #28241e;
    border-bottom: 3px solid #b8924e;
    box-shadow: 0 12px 28px rgba(40, 36, 30, .2);
}

.store-header::after {
    background: repeating-linear-gradient(90deg, #b8924e 0 12px, transparent 12px 22px);
    height: 2px;
    inset: auto 5% 4px;
    opacity: .5;
}

.store-logo i {
    background: #d5bd78;
    box-shadow: 0 0 10px rgba(213, 189, 120, .5);
}

.store-header nav a.active,
.store-header nav a:hover {
    text-decoration-color: #d5bd78;
}

.search {
    box-shadow: 0 7px 18px rgba(40, 36, 30, .18);
}

.search button {
    background: var(--red);
}

.cart em {
    background: #d5bd78;
}

.store-hero {
    background:
        linear-gradient(90deg, rgba(243, 238, 228, .96), rgba(243, 238, 228, .83)),
        repeating-linear-gradient(45deg, transparent 0 20px, rgba(169, 71, 57, .04) 20px 22px),
        #e4dccb;
}

.store-hero::before {
    border-color: rgba(169, 71, 57, .18);
}

.store-hero::after {
    background: repeating-linear-gradient(135deg, transparent 0 28px, rgba(32, 31, 27, .045) 29px 31px, transparent 32px 60px);
}

.hero-copy {
    border-color: rgba(169, 71, 57, .16);
    box-shadow: var(--card-shadow);
}

.store-eyebrow,
.section-kicker {
    color: var(--red);
}

.store-hero h1 {
    color: var(--ink);
}

.store-hero p {
    color: var(--muted);
}

.store-button.primary {
    background: linear-gradient(135deg, #bb5a48 0%, #91352f 100%);
    box-shadow: 0 10px 22px rgba(145, 53, 47, .23);
}

.store-button.primary:hover {
    background: linear-gradient(135deg, #c76d58 0%, #7f302b 100%);
}

.store-button.outline {
    border-color: #9d9180;
}

.hero-circle {
    background: linear-gradient(145deg, #d4bc77 0%, #a94739 48%, #702e2b 100%);
    box-shadow: 18px 20px 0 rgba(57, 42, 25, .13), 0 0 42px rgba(169, 71, 57, .2);
}

.hero-card {
    border-color: #8d7d68;
    box-shadow: 10px 12px 0 rgba(57, 42, 25, .13);
}

.hero-card b {
    color: var(--red);
}

.catalog-heading,
.product-card,
.quick-quote form {
    border-color: rgba(131, 101, 60, .18);
    box-shadow: var(--card-shadow);
}

.catalog-heading::after {
    background: #d5bd78;
    box-shadow: 0 0 13px rgba(213, 189, 120, .55);
}

.catalog-heading h2,
.quick-quote h2,
.product-info h3 {
    color: var(--ink);
}

.catalog-heading p,
.product-info p,
.product-rating small {
    color: var(--muted);
}

.more-link,
.product-rating span,
.product-buy small {
    border-bottom-color: var(--red);
    color: var(--red);
}

.category-pills button {
    background: rgba(255, 253, 248, .78);
    border-color: #cfc3b1;
    color: var(--muted);
}

.category-pills button.selected,
.category-pills button:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.product-image {
    background: #e6ddcd;
}

.product-badge {
    background: var(--red);
}

.product-card:hover {
    border-color: rgba(169, 71, 57, .4);
    box-shadow: var(--card-shadow-hover);
}

.custom-banner {
    background:
        linear-gradient(135deg, rgba(40, 36, 30, .98), rgba(67, 48, 34, .98)),
        repeating-linear-gradient(45deg, transparent 0 18px, rgba(213, 189, 120, .08) 18px 20px);
    box-shadow: 0 24px 48px rgba(40, 36, 30, .22);
}

.custom-banner h2 b {
    color: #d5bd78;
}

.custom-mark {
    border-color: rgba(213, 189, 120, .58);
    color: #d5bd78;
    box-shadow: 0 0 0 16px rgba(213, 189, 120, .04), 0 0 42px rgba(213, 189, 120, .14);
}

.quick-quote input,
.quick-quote textarea {
    background: var(--surface-soft);
    border-color: var(--line);
}

.store-footer {
    background: #28241e;
    border-top: 3px solid #b8924e;
}

@media (prefers-reduced-motion: reduce) {

    .hero-copy,
    .hero-art {
        animation: none;
    }
}

/* Real brand logo artwork */
.store-logo-img {
    display: block;
    height: 30px;
    width: auto;
}

.footer-brand .store-logo-img {
    height: 38px;
}

@media (max-width: 720px) {
    .store-logo-img {
        height: 24px;
    }

    .footer-brand .store-logo-img {
        height: 30px;
    }
}
/* ============================================================
   Direct contact — WhatsApp
   Gulf buyers contact by WhatsApp, not email. Surfaced in the
   top bar, studio banner, quote form, footer and a floating
   button so the number is reachable from any scroll position.
   ============================================================ */

.benefits-wa {
    margin-inline-start: auto;
}

.benefits-wa a {
    align-items: center;
    color: var(--lime);
    display: inline-flex;
    gap: 7px;
    white-space: nowrap;
}

.benefits-wa bdi {
    color: #fff;
    direction: ltr;
    font-family: Manrope;
    letter-spacing: .02em;
}

.benefits-action {
    margin-inline-start: 0;
}

.store-button.whatsapp {
    align-items: center;
    background: #25d366;
    color: #06301a;
    font-weight: 600;
    gap: 9px;
    margin-inline-start: 8px;
}

.store-button.whatsapp:hover {
    background: #1ebe5a;
}

.quote-direct {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 10px;
    margin-top: 18px;
}

.quote-direct>span {
    color: #6b716c;
}

.quote-direct a {
    align-items: center;
    white-space: nowrap;
    background: rgba(37, 211, 102, .12);
    border: 1px solid rgba(37, 211, 102, .45);
    border-radius: 5px;
    color: #14853f;
    display: inline-flex;
    font-family: Manrope;
    font-weight: 700;
    gap: 7px;
    padding: 8px 13px;
}

.quote-direct a:hover {
    background: rgba(37, 211, 102, .2);
}

.quote-direct bdi {
    direction: ltr;
}

.footer-contact .footer-wa {
    align-items: center;
    color: #25d366 !important;
    display: inline-flex;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 700;
    gap: 7px;
    margin-bottom: 4px;
}

.footer-contact .footer-wa bdi {
    direction: ltr;
}

.footer-contact .footer-tel {
    color: #a4aaa5 !important;
    display: block;
    font-size: 11px;
    margin-bottom: 9px;
}

.wa-float {
    align-items: center;
    background: #25d366;
    border-radius: 50%;
    bottom: 22px;
    box-shadow: 0 10px 26px rgba(7, 94, 84, .38);
    display: flex;
    height: 56px;
    inset-inline-end: 22px;
    justify-content: center;
    position: fixed;
    transition: transform .2s ease, box-shadow .2s ease;
    width: 56px;
    z-index: 900;
}

.wa-float:hover {
    box-shadow: 0 14px 32px rgba(7, 94, 84, .5);
    transform: translateY(-3px);
}

.wa-float svg {
    fill: #fff;
    height: 32px;
    width: 32px;
}

@media (max-width: 860px) {
    .benefits-wa {
        margin-inline-start: 0;
    }

    .benefits-wa bdi {
        display: none;
    }
}

@media (max-width: 720px) {
    .store-button.whatsapp {
        margin-inline-start: 0;
        margin-top: 10px;
    }

    .wa-float {
        bottom: 16px;
        height: 52px;
        inset-inline-end: 16px;
        width: 52px;
    }

    .wa-float svg {
        height: 29px;
        width: 29px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .wa-float,
    .wa-float:hover {
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Hero v2 (2026 refresh)
   Replaces the abstract "SF" circle with real work. The old hero
   had been redefined five times across this file with conflicting
   gradients; this block is self-contained and scopes its own
   custom properties so none of that cascade reaches it.
   ============================================================ */

.hero-v2 {
    --hv-ink: #16181a;
    --hv-muted: #5f6763;
    --hv-sand: #efece4;
    --hv-sand-deep: #e4e0d5;
    --hv-accent: #c8102e;
    --hv-radius: 20px;

    align-items: center;
    background:
        radial-gradient(120% 90% at 8% 0%, #fbfaf7 0%, transparent 55%),
        radial-gradient(90% 80% at 100% 100%, var(--hv-sand-deep) 0%, transparent 60%),
        var(--hv-sand);
    display: grid;
    gap: clamp(36px, 5vw, 78px);
    grid-template-columns: 1.02fr .98fr;
    overflow: hidden;
    padding: clamp(46px, 6.5vw, 96px) clamp(20px, 7vw, 110px);
    position: relative;
}

/* Hairline grid, echoes a cutting bed without showing a machine. */
.hero-v2::before {
    background-image:
        linear-gradient(rgba(22, 24, 26, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 24, 26, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    content: '';
    inset: 0;
    mask-image: radial-gradient(75% 70% at 65% 45%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(75% 70% at 65% 45%, #000 0%, transparent 78%);
    pointer-events: none;
    position: absolute;
}

.hero-v2-copy {
    position: relative;
    z-index: 1;
}

.hero-v2-eyebrow {
    align-items: center;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(22, 24, 26, .1);
    border-radius: 999px;
    color: var(--hv-muted);
    display: inline-flex;
    font-size: 11.5px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: .04em;
    padding: 7px 15px;
    text-transform: uppercase;
}

.hero-v2-eyebrow i {
    background: var(--hv-accent);
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

.hero-v2 h1 {
    color: var(--hv-ink);
    font-size: clamp(2.6rem, 5.2vw, 5.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    margin: 20px 0 0;
    text-wrap: balance;
}

/* A rule under the baseline, not a highlighter block: Arabic descenders
   sit low, so a background band swallows the word instead of accenting it. */
.hero-v2-mark {
    display: inline-block;
    padding-bottom: .12em;
    position: relative;
    white-space: nowrap;
}

.hero-v2-mark::after {
    background: linear-gradient(90deg, var(--hv-accent), rgba(200, 16, 46, .25));
    border-radius: 2px;
    bottom: 0;
    content: '';
    height: 5px;
    inset-inline: 0;
    position: absolute;
}

.hero-v2-copy>p {
    color: var(--hv-muted);
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.95;
    margin: 18px 0 0;
    max-width: 48ch;
}

.hero-v2-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-v2-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 7px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 12px;
    padding: 15px 24px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.hero-v2-btn.primary {
    background: var(--hv-ink);
    box-shadow: 0 10px 24px rgba(22, 24, 26, .18);
    color: #fff;
}

.hero-v2-btn.primary:hover {
    background: #000;
    box-shadow: 0 14px 30px rgba(22, 24, 26, .26);
    transform: translateY(-2px);
}

.hero-v2-btn.wa {
    background: #fff;
    border-color: rgba(22, 24, 26, .14);
    color: var(--hv-ink);
}

.hero-v2-btn.wa:hover {
    border-color: #25d366;
    box-shadow: 0 12px 26px rgba(37, 211, 102, .2);
    transform: translateY(-2px);
}

.hero-v2-caps {
    border-top: 1px solid rgba(22, 24, 26, .12);
    margin-top: 38px;
    padding-top: 22px;
}

.hero-v2-stat {
    color: var(--hv-muted);
    display: block;
    font-size: 12px;
    margin-bottom: 13px;
}

.hero-v2-stat strong {
    color: var(--hv-ink);
    font-family: Manrope, var(--font);
    font-size: 21px;
    font-weight: 800;
    margin-inline-end: 4px;
}

.hero-v2-caps ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-v2-caps li {
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(22, 24, 26, .09);
    border-radius: 6px;
    color: #3d4442;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 11px;
}

/* ---- Gallery: three real pieces, offset like a contact sheet ---- */

.hero-v2-gallery {
    display: grid;
    gap: 16px;
    grid-template-areas:
        'main top'
        'main bottom';
    grid-template-columns: 1.25fr .95fr;
    grid-template-rows: 1fr 1fr;
    position: relative;
    z-index: 1;
}

.hero-v2-gallery figure {
    border-radius: var(--hv-radius);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 18px 44px rgba(22, 24, 26, .16);
    margin: 0;
    overflow: hidden;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
}

.hero-v2-gallery figure:hover {
    box-shadow: 0 26px 58px rgba(22, 24, 26, .24);
    transform: translateY(-5px);
}

.hero-v2-gallery img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hero-v2-gallery figcaption {
    background: linear-gradient(transparent, rgba(12, 14, 15, .82));
    bottom: 0;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    inset-inline: 0;
    padding: 30px 14px 12px;
    position: absolute;
}

.hv-main {
    aspect-ratio: 3 / 4;
    grid-area: main;
}

.hv-top {
    aspect-ratio: 4 / 3;
    grid-area: top;
}

.hv-bottom {
    aspect-ratio: 4 / 3;
    grid-area: bottom;
}

@media (max-width: 1080px) {
    .hero-v2 {
        gap: 40px;
        grid-template-columns: 1fr;
    }

    .hero-v2-gallery {
        grid-template-columns: 1.2fr 1fr;
        max-width: 620px;
    }
}

@media (max-width: 720px) {
    .hero-v2 {
        padding: 34px 20px 42px;
    }

    .hero-v2 h1 {
        line-height: 1.18;
    }

    .hero-v2-mark {
        white-space: normal;
    }

    .hero-v2-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .hero-v2-caps {
        margin-top: 30px;
    }

    .hero-v2-gallery {
        gap: 11px;
        grid-template-areas:
            'main top'
            'main bottom';
        max-width: none;
    }

    .hero-v2-gallery figcaption {
        font-size: 10px;
        padding: 22px 10px 9px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-v2-btn,
    .hero-v2-btn:hover,
    .hero-v2-gallery figure,
    .hero-v2-gallery figure:hover {
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Vertical rhythm fix
   Measured on the live page: 94px of hero bottom padding met 86px
   of catalog top padding, leaving 180px of dead space between the
   capability chips and the "مختارات سدوفاب" heading. The heading
   card compounded it with 28px padding around a 1.35 line-height
   display heading. Tightened so sections read as one flow.
   ============================================================ */

.hero-v2 {
    padding-bottom: clamp(30px, 3.4vw, 50px);
}

.catalog-section {
    padding-top: clamp(30px, 3.4vw, 50px);
}

.catalog-heading {
    padding-block: clamp(16px, 1.8vw, 22px);
}

.catalog-heading h2,
.quick-quote h2 {
    line-height: 1.16;
}

.catalog-heading .section-kicker {
    margin-bottom: 2px;
}

.catalog-heading p {
    margin-bottom: 0;
    margin-top: 6px;
}

.category-pills {
    margin-block: 20px 18px;
}

@media (max-width: 720px) {
    .hero-v2 {
        padding-bottom: 26px;
    }

    .catalog-section {
        padding-top: 26px;
    }
}

/* Second pass: close the remaining seam and stop the heading card
   from stretching a two-line title across the full page width. */

.hero-v2 {
    padding-bottom: clamp(24px, 2.6vw, 38px);
}

.hero-v2-caps {
    margin-top: 30px;
    padding-top: 18px;
}

.catalog-section {
    padding-top: clamp(24px, 2.6vw, 38px);
}

.catalog-heading>div {
    max-width: 62ch;
}

.catalog-heading .more-link {
    align-self: flex-end;
    margin-bottom: 4px;
    white-space: nowrap;
}

/* Capability bar promoted to a full-width hero row: it now fills the
   empty lower-left quadrant that sat under the gallery, and reads as a
   single rule across the section instead of a stub beside the copy. */

.hero-v2 {
    align-items: start;
    grid-template-areas:
        'copy gallery'
        'caps caps';
    grid-template-rows: auto auto;
    row-gap: 0;
}

.hero-v2-copy {
    align-self: center;
    grid-area: copy;
}

.hero-v2-gallery {
    grid-area: gallery;
}

.hero-v2-caps {
    align-items: center;
    column-gap: 22px;
    display: flex;
    flex-wrap: wrap;
    grid-area: caps;
    margin-top: clamp(26px, 3vw, 44px);
    row-gap: 12px;
}

.hero-v2-stat {
    margin-bottom: 0;
    white-space: nowrap;
}

.hero-v2-caps ul {
    flex: 1 1 auto;
}

@media (max-width: 1080px) {
    .hero-v2 {
        grid-template-areas:
            'copy'
            'gallery'
            'caps';
    }
}

/* ============================================================
   Hero: capability bar removed
   The machine line-up (laser / CNC / UV / DTF) was inward-facing —
   customers buy the product, not the equipment, and the machine list
   is exactly what a competitor would want to know. The hero is a
   two-column layout again.
   ============================================================ */

.hero-v2 {
    align-items: center;
    grid-template-areas: 'copy gallery';
    grid-template-rows: auto;
    padding-bottom: clamp(38px, 4.5vw, 66px);
}

@media (max-width: 1080px) {
    .hero-v2 {
        grid-template-areas:
            'copy'
            'gallery';
    }
}

/* ============================================================
   Category filter
   Was a single overflowing row with a visible native scrollbar —
   the scrollbar itself read as a bug. Now: wraps freely on desktop
   (every category visible, no scrolling at all), and on phones it
   becomes a snap-scrolling strip with the scrollbar hidden and a
   soft fade at the trailing edge to signal "more".
   ============================================================ */

.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 22px 20px;
    overflow: visible;
    padding-bottom: 0;
}

.category-pills button {
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(22, 24, 26, .12);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(22, 24, 26, .04);
    color: #4a5150;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    white-space: nowrap;
}

.category-pills button:hover {
    background: #fff;
    border-color: rgba(22, 24, 26, .3);
    box-shadow: 0 6px 14px rgba(22, 24, 26, .1);
    color: #16181a;
    transform: translateY(-1px);
}

.category-pills button.selected {
    background: #16181a;
    border-color: #16181a;
    box-shadow: 0 8px 18px rgba(22, 24, 26, .22);
    color: #fff;
}

.category-pills button:focus-visible {
    outline: 2px solid var(--red, #c8102e);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .category-pills {
        flex-wrap: nowrap;
        margin-inline: -20px;
        overflow-x: auto;
        padding-inline: 20px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to left, transparent 0, #000 26px);
        mask-image: linear-gradient(to left, transparent 0, #000 26px);
    }

    .category-pills::-webkit-scrollbar {
        display: none;
    }

    .category-pills button {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {

    .category-pills button,
    .category-pills button:hover {
        transform: none;
        transition: none;
    }
}

/* The fade marks the edge the strip scrolls toward, which flips with
   direction: content runs off to the left in RTL, to the right in LTR. */
@media (max-width: 720px) {

    [dir='ltr'] .category-pills {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px);
        mask-image: linear-gradient(to right, transparent 0, #000 26px);
    }
}

/* ============================================================
   Hero typography refinement
   Smaller, more composed display type. Readex Pro is an Arabic-first
   face with a matched Latin, so the headline, the eyebrow and the
   "SaduFab" wordmark share one set of proportions instead of pairing
   two unrelated families. Scoped to the hero — the rest of the site
   keeps IBM Plex Sans Arabic.
   ============================================================ */

.hero-v2 {
    padding-block: clamp(34px, 3.8vw, 58px);
}

.hero-v2 h1 {
    font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3.45rem);
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.42;
    margin-top: 16px;
    max-width: 19ch;
}

/* Readex has generous sidebearings; the rule needs to sit closer. */
.hero-v2-mark {
    padding-bottom: .06em;
}

.hero-v2-mark::after {
    height: 3px;
    opacity: .9;
}

.hero-v2-eyebrow {
    font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .06em;
    padding: 6px 14px;
}

.hero-v2-copy>p {
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 2.05;
    margin-top: 14px;
    max-width: 44ch;
}

.hero-v2-cta {
    margin-top: 26px;
}

.hero-v2-btn {
    font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    padding: 13px 22px;
}

.hero-v2-gallery {
    gap: 14px;
    margin-inline-start: auto;
    max-width: 520px;
}

@media (max-width: 1080px) {
    .hero-v2-gallery {
        margin-inline: 0;
    }
}

@media (max-width: 720px) {
    .hero-v2 h1 {
        font-size: clamp(1.75rem, 7.4vw, 2.3rem);
        line-height: 1.5;
        max-width: none;
    }
}

/* Keep the two-line break from the approved layout: the second line
   ("إلى المنتج تحت سقف واحد") has to fit its column, so the display size
   is capped to what that line needs rather than to the viewport. The
   columns are pulled in so the smaller type does not leave a gulf
   between the copy and the gallery. */

.hero-v2 {
    column-gap: clamp(28px, 3.5vw, 54px);
    grid-template-columns: 1fr 1fr;
    padding-inline: clamp(20px, 9vw, 152px);
}

.hero-v2 h1 {
    font-size: clamp(1.8rem, 2.7vw, 2.6rem);
    line-height: 1.5;
    max-width: none;
}

.hero-v2-gallery {
    max-width: none;
}

/* The two-column rule above is unconditional, so it has to be undone for
   the stacked layout — grid-template-areas alone cannot collapse it. */
@media (max-width: 1080px) {
    .hero-v2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Social icons — top bar
   Instagram and TikTok as round brand-coloured icons next to the
   WhatsApp number, so they are seen before any scrolling. Same
   links as the footer (Settings → social_*).
   ============================================================ */

.benefits .benefits-social {
    align-items: center;
    display: flex;
    gap: 8px;
}

.social-icon {
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    color: #fff;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease;
    width: 28px;
}

.social-icon svg {
    height: 15px;
    width: 15px;
}

.social-icon:hover,
.social-icon:focus-visible {
    box-shadow: 0 5px 14px rgba(0, 0, 0, .35);
    transform: translateY(-2px) scale(1.08);
}

.social-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.social-tiktok {
    background: #010101;
    box-shadow: -1.5px -1.5px 0 #25f4ee, 1.5px 1.5px 0 #fe2c55, 0 2px 8px rgba(0, 0, 0, .25);
}

.social-tiktok:hover,
.social-tiktok:focus-visible {
    box-shadow: -2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55, 0 5px 14px rgba(0, 0, 0, .35);
}

@media (max-width: 720px) {
    .social-icon {
        height: 25px;
        width: 25px;
    }

    .social-icon svg {
        height: 13px;
        width: 13px;
    }
}

/* Cart — quantities and checkout (orders system, 2026-10-13) */
.cart-summary li .cart-qty {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.cart-qty button {
    background: var(--surface-soft, #f4f1ec);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    height: 22px;
    line-height: 1;
    width: 22px;
}

.cart-note {
    color: var(--muted, #6d7471);
    font-size: 11px;
    margin: 8px 0 0;
}

.cart-actions .cart-checkout {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.cart-actions .cart-checkout:hover {
    background: var(--red-dark);
    transform: translateY(-1px);
}

/* ---- Catalogue paging, AI-image note, product window (2026-10-23) ---- */
.load-more[hidden] {
    display: none !important;
}

.load-more.is-loading,
.product-grid.is-loading {
    opacity: .55;
    pointer-events: none;
}

.product-image img {
    cursor: zoom-in;
}

.photo-count {
    background: rgba(23, 25, 26, .72);
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    padding: 3px 9px;
    position: absolute;
    z-index: 2;
}

.ai-note,
.pd-note {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
    margin: 6px 4px 0;
}

.product-dialog {
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(23, 25, 26, .3);
    color: var(--ink);
    display: grid;
    font-family: var(--font);
    gap: 22px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    max-height: calc(100vh - 32px);
    max-width: 920px;
    overflow: auto;
    padding: 22px;
    width: calc(100% - 32px);
}

.product-dialog:not([open]) {
    display: none;
}

.product-dialog::backdrop {
    background: rgba(23, 25, 26, .55);
}

.pd-close {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    height: 36px;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    line-height: 1;
    position: absolute;
    width: 36px;
    z-index: 2;
}

.pd-media {
    min-width: 0;
}

.pd-main {
    aspect-ratio: 1;
    background: var(--paper);
    border-radius: 14px;
    display: block;
    object-fit: cover;
    width: 100%;
}

.pd-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
}

.pd-thumbs button {
    background: none;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    flex: 0 0 64px;
    height: 64px;
    padding: 0;
}

.pd-thumbs button.on {
    border-color: var(--red);
}

.pd-thumbs img {
    border-radius: 8px;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.pd-body h2 {
    font-size: 22px;
    margin: 6px 0 4px;
}

.pd-category {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 12px;
}

.pd-price strong {
    color: var(--red);
    font-size: 22px;
}

.pd-price del {
    color: var(--muted);
    font-size: 13px;
    margin-inline-start: 8px;
}

.pd-description {
    font-size: 14px;
    line-height: 1.9;
    margin: 14px 0;
}

.pd-add {
    background: var(--red);
    border: 0;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 12px 20px;
}

.pd-add:hover,
.pd-add.added {
    background: var(--red-dark);
}

@media (max-width: 720px) {
    .product-dialog {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}

/* ---- «عن سدوفاب» (#about) ---- */
.about-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    margin: 32px auto;
    max-width: 1240px;
    padding: 32px clamp(18px, 4vw, 48px);
    width: calc(100% - 32px);
}

.about-section h2 {
    font-size: clamp(22px, 3vw, 30px);
    margin: 8px 0 12px;
}

.about-section p {
    color: var(--muted);
    font-size: 16px;
    line-height: 2;
    margin: 0;
    max-width: 860px;
}

.footer-mail {
    font-weight: 700;
}