/* ==========================================================
   AGWAD SHOP × GoTrade
   Custom UI System v1.0
   Brand / UX / Mobile-first
   ========================================================== */


/* ==========================================================
   01. BRAND TOKENS
   ========================================================== */

:root {
    --ag-blue: #1C50B5;
    --ag-blue-dark: #10213D;
    --ag-blue-hover: #174497;
    --ag-blue-light: #4276DB;

    --ag-bg: #F4F7FC;
    --ag-bg-soft: #F8FAFD;
    --ag-white: #FFFFFF;

    --ag-text: #10213D;
    --ag-body: #344054;
    --ag-muted: #667085;

    --ag-border: #E3EAF4;
    --ag-border-hover: #B9CDF3;

    --ag-radius-sm: 10px;
    --ag-radius: 16px;
    --ag-radius-lg: 22px;
    --ag-radius-xl: 28px;

    --ag-shadow-sm:
        0 4px 14px rgba(16, 33, 61, 0.05);

    --ag-shadow:
        0 10px 30px rgba(16, 33, 61, 0.08);

    --ag-shadow-hover:
        0 16px 38px rgba(16, 33, 61, 0.12);

    /* Override inconsistent GoTrade theme variables */
    --color-primary: #1C50B5;
    --color-primary-dark: #10213D;
    --color-primary-light: #4276DB;
    --color-primary-reverse: #FFFFFF;

    --bg-color: #F4F7FC;
    --card-color: #FFFFFF;
    --text-color: #10213D;
    --bg-promotion: #1C50B5;
}


/* ==========================================================
   02. GLOBAL UX
   ========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    color: var(--ag-body);
    background: var(--ag-white);
}

body.index {
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FFFFFF 70%,
            #F8FAFD 100%
        );
}

::selection {
    background: rgba(28, 80, 181, 0.15);
    color: var(--ag-blue-dark);
}

body.index .container {
    max-width: 1240px;
}


/* Accessible focus */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid rgba(28, 80, 181, 0.28);
    outline-offset: 3px;
}


/* ==========================================================
   03. HEADER / NAVIGATION
   ========================================================== */

.store-header #mainnav {
    background: rgba(255, 255, 255, 0.97) !important;

    border-bottom:
        1px solid rgba(227, 234, 244, 0.95);

    box-shadow:
        0 5px 22px rgba(16, 33, 61, 0.055);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        box-shadow .2s ease,
        background .2s ease;
}

.store-header #mainnav .inner {
    background: transparent !important;
}


/* Logo */

.store-header .navbar-brand {
    transition:
        transform .2s ease,
        opacity .2s ease;
}

@media (hover:hover) {

    .store-header .navbar-brand:hover {
        transform: translateY(-1px);
    }

}


/* Search */

.store-header .got__header_search {
    background: #FFFFFF;

    border:
        1px solid var(--ag-border);

    border-radius: 14px;

    padding: 2px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.store-header .got__header_search:focus-within {
    border-color:
        rgba(28, 80, 181, .52);

    box-shadow:
        0 0 0 4px rgba(28, 80, 181, .08);
}


/* Header actions */

.store-header .header-buttons button,
.store-header .header-btn,
.store-header salla-cart-summary {
    border-radius: 10px;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

@media (hover:hover) {

    .store-header .header-buttons button:hover,
    .store-header .header-btn:hover {
        background:
            rgba(28, 80, 181, .06);

        color: var(--ag-blue);
    }

}


/* ==========================================================
   04. MAIN HOMEPAGE SLIDER
   ========================================================== */

body.index .s-block--photos-slider {
    padding-inline: 16px;
    padding-top: 18px;
}

body.index .photos-slider {
    overflow: hidden;

    border-radius: var(--ag-radius-lg);

    box-shadow:
        0 12px 34px rgba(16, 33, 61, .08);

    background: #FFFFFF;
}

body.index .photos-slider .swiper-slide {
    overflow: hidden;
}

body.index .photos-slider .swiper-slide a {
    display: block;
}

body.index .photos-slider img {
    display: block;

    width: 100%;

    border-radius:
        var(--ag-radius-lg) !important;
}


/* Pagination */

body.index .photos-slider
.swiper-pagination-bullet {
    width: 7px;
    height: 7px;

    opacity: .35;

    background: var(--ag-blue);
}

body.index .photos-slider
.swiper-pagination-bullet-active {
    width: 22px;

    opacity: 1;

    border-radius: 20px;

    background: var(--ag-blue);
}


/* ==========================================================
   05. CATEGORY GRID
   Current GoTrade module: .g_cat
   ========================================================== */

body.index .g_cat {
    margin-top: 42px;
    margin-bottom: 42px;
}

body.index .g_cat > .container {
    padding-inline: 8px;
}


/* Category heading */

body.index .g_cat h2 {
    color:
        var(--ag-blue-dark) !important;

    font-weight: 800 !important;

    letter-spacing: -.3px;

    margin-bottom: 26px !important;
}


/* Actual current category grid */

body.index .g_cat .grid {
    width: 100%;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 20px !important;

    align-items: start;
}


/* Category item */

body.index .g_cat .products-item {
    width: 100% !important;
    max-width: none !important;

    padding: 0;

    cursor: pointer;
}


/* Image frame */

body.index .g_cat .image-parent {
    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F3F7FD
        );

    border:
        1px solid var(--ag-border);

    border-radius:
        var(--ag-radius-lg) !important;

    box-shadow:
        var(--ag-shadow-sm);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

body.index .g_cat .image-parent a {
    display: block;

    width: 100%;
    height: 100%;
}

body.index .g_cat .image-parent img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    display: block;

    transition:
        transform .3s ease;
}


/* Category names */

body.index .g_cat .products-item h3 {
    color:
        var(--ag-blue-dark) !important;

    font-size: 17px !important;

    font-weight: 700 !important;

    line-height: 1.6;

    margin-top: 12px !important;

    transition:
        color .2s ease;
}


/* Desktop hover */

@media (hover:hover) {

    body.index .g_cat .products-item:hover
    .image-parent {

        transform: translateY(-5px);

        border-color:
            var(--ag-border-hover);

        box-shadow:
            var(--ag-shadow-hover);
    }

    body.index .g_cat .products-item:hover
    .image-parent img {

        transform: scale(1.025);
    }

    body.index .g_cat .products-item:hover h3 {
        color:
            var(--ag-blue) !important;
    }

}


/* ==========================================================
   06. FIXED / INTERACTIVE BANNERS
   ========================================================== */

body.index .got_fixedBanner {
    width:
        min(1180px, calc(100% - 32px));

    margin:
        52px auto 0 !important;

    overflow: hidden;

    border-radius:
        var(--ag-radius-xl);

    background-color:
        var(--ag-bg);

    background-position:
        center !important;

    background-size:
        cover !important;

    box-shadow:
        0 16px 44px rgba(16, 33, 61, .09);

    isolation: isolate;
}


/* Main banner content wrapper */

body.index
.got_fixedBanner-allContent {

    min-height: 410px;

    display: flex;

    align-items: center;

    padding:
        42px clamp(26px, 6vw, 80px);
}


/* Banner typography */

body.index
.got_fixedBanner-content {

    width: min(520px, 50%);

    max-width:
        520px !important;
}


/* NEW Banner #2
   products are on LEFT,
   therefore copy should remain RIGHT */

body.index
.got_fixedBanner-2
.got_fixedBanner-content {

    margin-left: auto !important;
    margin-right: 0 !important;

    text-align: right !important;
}


/* Headline */

body.index
.got_fixedBanner-content h3 {

    margin: 0 0 14px;

    font-size:
        clamp(28px, 3.1vw, 43px);

    font-weight: 800;

    line-height: 1.35;

    letter-spacing: -.5px;
}


/* Supporting copy */

body.index
.got_fixedBanner-content p {

    max-width:
        520px !important;

    margin:
        0 0 24px;

    font-size:
        clamp(15px, 1.4vw, 18px);

    line-height: 1.9;

    opacity: .86;
}


/* CTA */

body.index
.got_fixedBanner-content a {

    display:
        inline-flex !important;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    margin: 0 !important;

    padding: 11px 25px;

    border-radius: 12px;

    font-weight: 700 !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

@media (hover:hover) {

    body.index
    .got_fixedBanner-content a:hover {

        transform:
            translateY(-2px);

        box-shadow:
            0 9px 22px
            rgba(16, 33, 61, .16);
    }

}


/* ==========================================================
   07. HOMEPAGE SECTION TITLES
   ========================================================== */

body.index
section.mt-10[data-sal="slide-down"]
h1 {

    color:
        var(--ag-blue-dark) !important;

    font-size:
        clamp(24px, 3vw, 31px) !important;

    font-weight:
        800 !important;

    line-height:
        1.5 !important;
}

body.index
section.mt-10[data-sal="slide-down"]
h2 {

    color:
        var(--ag-muted) !important;

    font-size:
        15px !important;

    line-height:
        1.8 !important;

    margin-top:
        4px;
}


/* ==========================================================
   08. PRODUCT SLIDERS
   ========================================================== */

body.index .go-special-products {
    margin-top: 8px;

    padding-bottom: 8px;
}

body.index
.go-special-products .container {

    overflow: visible;
}


/* Product-card host */

body.index
.go-special-products
custom-salla-product-card {

    display: block;

    height: 100%;

    overflow: hidden;

    background: #FFFFFF;

    border:
        1px solid var(--ag-border);

    border-radius:
        18px;

    box-shadow:
        0 4px 18px
        rgba(16, 33, 61, .045);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* Product card hover */

@media (hover:hover) {

    body.index
    .go-special-products
    custom-salla-product-card:hover {

        transform:
            translateY(-4px);

        border-color:
            rgba(28, 80, 181, .26);

        box-shadow:
            0 14px 34px
            rgba(16, 33, 61, .10);
    }

}


/* Slider progress */

body.index
.got-slider-section__progress-bar {

    height: 4px;

    overflow: hidden;

    margin-top: 22px;

    background:
        #E8EEF8;

    border-radius: 100px;
}

body.index
.got-slider-section__progress-bar__fill {

    height: 100%;

    background:
        var(--ag-blue) !important;

    border-radius:
        100px;
}


/* ==========================================================
   09. CATEGORY + PRODUCTS FEATURE SECTION
   ========================================================== */

body.index
.got-category_products {

    width:
        min(1180px, calc(100% - 32px));

    margin:
        54px auto !important;
}

body.index
.got-category_products_container {

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F4F7FC 100%
        );

    border:
        1px solid var(--ag-border);

    border-radius:
        var(--ag-radius-xl);

    box-shadow:
        var(--ag-shadow);

    padding:
        clamp(20px, 3vw, 34px);
}


/* Heading */

body.index
.got-category_products
.got-title h3 {

    color:
        var(--ag-blue-dark) !important;

    font-size:
        clamp(23px, 2.5vw, 31px);

    font-weight:
        800;

    line-height:
        1.5;
}

body.index
.got-category_products
.got-title p {

    color:
        var(--ag-muted) !important;

    font-size:
        15px;

    line-height:
        1.9;
}


/* Section visual */

body.index
.got-category_image img {

    border-radius:
        var(--ag-radius-lg);

    box-shadow:
        0 8px 24px
        rgba(16, 33, 61, .08);

    object-fit: cover;
}


/* ==========================================================
   10. GOOGLE MAP / STORE LOCATION COMPONENT
   ========================================================== */

body.index
.s-block--bundle-trust-map {

    margin-top: 56px;
    margin-bottom: 40px;
}

body.index
.s-block--bundle-trust-map
salla-custom-component {

    display: block;

    overflow: hidden;

    border-radius:
        var(--ag-radius-xl);
}


/* ==========================================================
   11. FAQ
   ========================================================== */

body.index .faq-section {

    margin-top: 30px;

    padding:
        46px 0;

    background:
        linear-gradient(
            180deg,
            #F8FAFD,
            #F3F7FD
        );

    border-top:
        1px solid var(--ag-border);

    border-bottom:
        1px solid var(--ag-border);
}


body.index
.faq-section .container {

    max-width: 1180px;
}


/* FAQ layout */

body.index
.faq-section .got__fqa {

    gap:
        clamp(28px, 4vw, 55px);

    align-items:
        flex-start;
}


/* FAQ title */

body.index
.got__fqa-title h2 {

    color:
        var(--ag-blue-dark) !important;

    font-size:
        clamp(25px, 3vw, 33px);

    font-weight:
        800;

    line-height:
        1.5;

    margin-bottom:
        9px;
}

body.index
.got__fqa-title p {

    color:
        var(--ag-muted) !important;

    font-size:
        15px;

    line-height:
        1.9;
}


/* FAQ graphic */

body.index
.got__fqa-title + .mt-6 img {

    overflow: hidden;

    background: #FFFFFF;

    border:
        1px solid var(--ag-border);

    border-radius:
        var(--ag-radius-lg);

    box-shadow:
        var(--ag-shadow-sm);
}


/* FAQ item */

body.index
.got__fqa-content {

    background:
        #FFFFFF;

    border:
        1px solid var(--ag-border);

    border-radius:
        15px;

    padding:
        17px 19px;

    box-shadow:
        0 3px 13px
        rgba(16, 33, 61, .035);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

body.index
.got__fqa-content.active {

    border-color:
        rgba(28, 80, 181, .30);

    box-shadow:
        0 8px 22px
        rgba(16, 33, 61, .07);
}


/* FAQ question */

body.index
.got__fqa-content-question {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 15px;

    cursor: pointer;
}

body.index
.got__fqa-content-question h3 {

    color:
        var(--ag-blue-dark) !important;

    font-size:
        16px;

    font-weight:
        700;

    line-height:
        1.7;
}


/* FAQ + / - icon */

body.index
.got__fqa-content-question .sicon {

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color:
        var(--ag-blue);

    background:
        rgba(28, 80, 181, .07);

    border-radius:
        10px;
}


/* FAQ answer */

body.index
.got__fqa-content p {

    color:
        var(--ag-muted);

    line-height:
        1.9;
}


/* ==========================================================
   12. FOOTER
   ========================================================== */

.store-footer {

    margin-top: 55px;

    padding-top:
        45px !important;

    background:
        var(--ag-blue) !important;

    color:
        #FFFFFF !important;

    border-radius:
        30px 30px 0 0;

    box-shadow:
        0 -8px 26px
        rgba(16, 33, 61, .07);
}


/* Footer headings */

.store-footer h3 {

    color:
        #FFFFFF !important;

    font-weight:
        700;

    margin-bottom:
        14px;
}


/* Footer body text */

.store-footer p {

    color:
        rgba(255, 255, 255, .78) !important;

    line-height:
        1.9;
}


/* Footer links */

.store-footer a {

    color:
        rgba(255, 255, 255, .86);

    transition:
        color .2s ease,
        opacity .2s ease;
}

@media (hover:hover) {

    .store-footer a:hover {

        color:
            #FFFFFF !important;
    }

}


/* Footer copyright */

.store-footer
.copyright-text {

    color:
        rgba(255,255,255,.72);
}


/* Footer lower divider */

.store-footer
> .md\:flex {

    margin-top:
        28px;

    border-top:
        1px solid
        rgba(255,255,255,.13);
}


/* ==========================================================
   13. MOBILE / TABLET
   ========================================================== */

@media (max-width: 991px) {

    body.index
    .got_fixedBanner {

        width:
            calc(100% - 24px);

        border-radius:
            22px;
    }

    body.index
    .got_fixedBanner-allContent {

        min-height:
            350px;

        padding:
            30px 28px;
    }

    body.index
    .got_fixedBanner-content {

        width:
            min(520px, 58%);
    }

}


/* Mobile */

@media (max-width: 767px) {

    /* Header */

    .store-header #mainnav {
        box-shadow:
            0 4px 16px
            rgba(16,33,61,.06);
    }

    .store-header
    .got__header_search {

        margin-bottom:
            5px;

        border-radius:
            12px;
    }


    /* Main slider */

    body.index
    .s-block--photos-slider {

        padding-inline:
            10px;

        padding-top:
            10px;
    }

    body.index
    .photos-slider {

        border-radius:
            16px;
    }

    body.index
    .photos-slider img {

        border-radius:
            16px !important;
    }


    /* Categories */

    body.index
    .g_cat {

        margin-top:
            30px;

        margin-bottom:
            30px;
    }

    body.index
    .g_cat h2 {

        font-size:
            24px !important;

        margin-bottom:
            18px !important;
    }

    body.index
    .g_cat .grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            13px !important;
    }

    body.index
    .g_cat .image-parent {

        border-radius:
            16px !important;
    }

    body.index
    .g_cat .products-item h3 {

        font-size:
            15px !important;

        margin-top:
            8px !important;
    }


    /* Fixed banners */

    body.index
    .got_fixedBanner {

        width:
            calc(100% - 20px);

        margin-top:
            36px !important;

        border-radius:
            19px;
    }

    body.index
    .got_fixedBanner-allContent {

        min-height:
            380px;

        align-items:
            center;

        padding:
            26px 22px;
    }

    body.index
    .got_fixedBanner-content,
    body.index
    .got_fixedBanner-2
    .got_fixedBanner-content {

        width:
            100%;

        max-width:
            100% !important;

        margin:
            auto !important;

        text-align:
            center !important;
    }

    body.index
    .got_fixedBanner-content h3 {

        font-size:
            26px;

        line-height:
            1.4;

        margin-bottom:
            10px;
    }

    body.index
    .got_fixedBanner-content p {

        max-width:
            440px !important;

        margin:
            0 auto 19px;

        font-size:
            14px;

        line-height:
            1.8;
    }

    body.index
    .got_fixedBanner-content a {

        min-height:
            45px;

        margin:
            auto !important;

        padding:
            9px 21px;

        font-size:
            14px;
    }


    /* Product/category feature */

    body.index
    .got-category_products {

        width:
            calc(100% - 20px);

        margin:
            38px auto !important;
    }

    body.index
    .got-category_products_container {

        padding:
            18px;

        border-radius:
            20px;
    }


    /* FAQ */

    body.index
    .faq-section {

        padding:
            34px 0;
    }

    body.index
    .faq-section
    .got__fqa {

        gap:
            28px;
    }

    body.index
    .got__fqa-title h2 {

        font-size:
            25px;
    }

    body.index
    .got__fqa-content {

        padding:
            15px 16px;

        border-radius:
            13px;
    }

    body.index
    .got__fqa-content-question h3 {

        font-size:
            15px;
    }


    /* Footer */

    .store-footer {

        margin-top:
            38px;

        border-radius:
            24px 24px 0 0;
    }

}


/* Very small phones */

@media (max-width: 390px) {

    body.index
    .g_cat .grid {

        gap:
            10px !important;
    }

    body.index
    .g_cat .products-item h3 {

        font-size:
            14px !important;
    }

    body.index
    .got_fixedBanner-content h3 {

        font-size:
            23px;
    }

}


/* ==========================================================
   14. REDUCED MOTION / ACCESSIBILITY
   ========================================================== */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

}
/* ==========================================================
   AGWAD SHOP × GoTrade
   PRODUCT PAGE / PDP UI
   Add AFTER the current Agwad custom CSS
   ========================================================== */

body.product-single{
    --pdp-blue:var(--ag-blue,#1C50B5);
    --pdp-blue-hover:var(--ag-blue-hover,#174497);
    --pdp-navy:var(--ag-blue-dark,#10213D);
    --pdp-bg:#F6F8FC;
    --pdp-soft:#F8FAFD;
    --pdp-white:#FFFFFF;
    --pdp-text:#344054;
    --pdp-muted:#667085;
    --pdp-border:#E3EAF4;
    --pdp-border-hover:#B9CDF3;
    --pdp-radius:18px;
    --pdp-radius-lg:24px;
    --pdp-shadow:0 10px 30px rgba(16,33,61,.07);
    --pdp-shadow-hover:0 16px 38px rgba(16,33,61,.11);

    background:var(--pdp-bg);
    color:var(--pdp-text);
}


/* ==========================================================
   01. PRODUCT MAIN LAYOUT
   ========================================================== */

body.product-single div[id^="product-"].grid{
    width:100%;
    max-width:1240px;
    margin-inline:auto;
    padding:22px 16px 42px;
    gap:28px !important;
    align-items:start;
}


/* Better desktop image / info balance */

@media (min-width:1024px){

    body.product-single div[id^="product-"].grid{
        grid-template-columns:
            minmax(0,.92fr)
            minmax(0,1.08fr) !important;
    }

    body.product-single div[id^="product-"].grid > .sidebar,
    body.product-single div[id^="product-"].grid > .main-content{
        grid-column:auto !important;
    }

}


/* ==========================================================
   02. PRODUCT GALLERY
   ========================================================== */

body.product-single .single_slider{
    padding-bottom:0 !important;
}

body.product-single .details-slider{
    display:block;

    padding:12px;

    background:var(--pdp-white);

    border:1px solid var(--pdp-border);
    border-radius:var(--pdp-radius-lg) !important;

    box-shadow:var(--pdp-shadow);
}


/* Main image area */

body.product-single
.details-slider
.s-slider-container{

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F7F9FD
        );

    border-radius:18px;
}


/* Do not crop phones/tablets/accessories */

body.product-single
.details-slider
.s-slider-container
.swiper-slide{

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F7F9FD 100%
        );
}

body.product-single
.details-slider
.s-slider-container
.swiper-slide img{

    object-fit:contain !important;

    padding:18px;

    background:transparent;

    transition:
        transform .3s ease;
}


@media (hover:hover){

    body.product-single
    .details-slider
    .s-slider-container
    .swiper-slide-active:hover img{

        transform:scale(1.025);
    }

}


/* Slider arrows */

body.product-single
.details-slider
.s-slider-nav-arrow{

    width:42px !important;
    height:42px !important;

    color:var(--pdp-blue) !important;

    background:rgba(255,255,255,.94) !important;

    border:
        1px solid var(--pdp-border) !important;

    border-radius:12px !important;

    box-shadow:
        0 5px 16px
        rgba(16,33,61,.09);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

body.product-single
.details-slider
.s-slider-nav-arrow svg{

    width:22px;
    height:22px;

    fill:currentColor;
}


@media (hover:hover){

    body.product-single
    .details-slider
    .s-slider-nav-arrow:not(:disabled):hover{

        transform:translateY(-2px);

        border-color:
            var(--pdp-border-hover) !important;

        box-shadow:
            0 9px 22px
            rgba(16,33,61,.13);
    }

}


/* Disabled arrow */

body.product-single
.details-slider
.s-slider-nav-arrow:disabled{

    opacity:.35 !important;
}


/* ==========================================================
   03. GALLERY THUMBNAILS
   ========================================================== */

body.product-single
.details-slider
.s-slider-thumbs{

    margin-top:12px;
}

body.product-single
.details-slider
.s-slider-thumbs
.swiper-slide{

    overflow:hidden;

    padding:3px;

    opacity:.62;

    cursor:pointer;

    background:#FFFFFF;

    border:
        1px solid var(--pdp-border);

    border-radius:12px;

    transition:
        opacity .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

body.product-single
.details-slider
.s-slider-thumbs
.swiper-slide img{

    object-fit:contain !important;

    padding:4px;

    background:#FFFFFF;

    border-radius:9px !important;
}


body.product-single
.details-slider
.s-slider-thumbs
.swiper-slide-thumb-active{

    opacity:1;

    border-color:
        var(--pdp-blue);

    box-shadow:
        0 0 0 2px
        rgba(28,80,181,.10);
}


@media (hover:hover){

    body.product-single
    .details-slider
    .s-slider-thumbs
    .swiper-slide:hover{

        opacity:1;

        transform:translateY(-2px);

        border-color:
            var(--pdp-border-hover);
    }

}


/* ==========================================================
   04. FLOATING GALLERY WISHLIST
   ========================================================== */

body.product-single
.btn--wisuhlist
.s-button-element{

    width:44px !important;
    height:44px !important;

    color:var(--pdp-navy) !important;

    background:
        rgba(255,255,255,.96) !important;

    border:
        1px solid var(--pdp-border) !important;

    border-radius:13px !important;

    box-shadow:
        0 5px 18px
        rgba(16,33,61,.10);

    transition:
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


@media (hover:hover){

    body.product-single
    .btn--wisuhlist
    .s-button-element:hover{

        color:var(--pdp-blue) !important;

        border-color:
            var(--pdp-border-hover) !important;

        transform:translateY(-2px);
    }

}


/* ==========================================================
   05. PRODUCT INFO CARD
   ========================================================== */

body.product-single .main-content{

    padding:28px !important;

    overflow:visible !important;

    background:var(--pdp-white);

    border:
        1px solid var(--pdp-border);

    border-radius:
        var(--pdp-radius-lg);

    box-shadow:
        var(--pdp-shadow);
}


/* Existing badge e.g. "الأكثر مبيعاً" */

body.product-single
.main-content > p[class*="color-primary"]{

    display:inline-flex;

    align-items:center;

    width:auto;

    padding:6px 11px;

    margin-bottom:13px !important;

    color:
        var(--pdp-blue) !important;

    background:
        rgba(28,80,181,.07);

    border:
        1px solid rgba(28,80,181,.13);

    border-radius:999px;

    font-size:12px;

    font-weight:700;
}


/* ==========================================================
   06. PRODUCT TITLE + SHARE
   ========================================================== */

body.product-single
.got-salla_button{

    display:flex;

    align-items:flex-start;

    justify-content:
        space-between;

    gap:16px !important;

    margin-bottom:8px;
}


body.product-single
.got-salla_button h1{

    flex:1;

    margin:0 !important;

    color:
        var(--pdp-navy) !important;

    font-size:
        clamp(24px,2.4vw,32px) !important;

    font-weight:
        800 !important;

    line-height:
        1.55 !important;

    letter-spacing:
        -.3px;
}


/* Share + wishlist controls */

body.product-single
.got-salla_button
.s-button-element{

    width:42px !important;
    height:42px !important;

    min-width:42px;

    color:
        var(--pdp-navy) !important;

    background:
        var(--pdp-soft) !important;

    border:
        1px solid var(--pdp-border) !important;

    border-radius:
        12px !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


@media (hover:hover){

    body.product-single
    .got-salla_button
    .s-button-element:hover{

        color:
            var(--pdp-blue) !important;

        background:
            rgba(28,80,181,.06) !important;

        border-color:
            var(--pdp-border-hover) !important;

        transform:
            translateY(-2px);
    }

}


/* ==========================================================
   07. SHORT PRODUCT DESCRIPTION
   ========================================================== */

body.product-single
.product__description{

    margin:
        15px 0 14px;

    padding:
        16px 18px !important;

    background:
        var(--pdp-soft);

    border:
        1px solid var(--pdp-border);

    border-radius:
        15px;
}


body.product-single
.product__description
.article{

    color:
        #475467;

    font-size:
        15px;

    line-height:
        1.95;
}


/* "عرض المزيد" */

body.product-single
.product__description
.more-desc{

    display:inline-flex !important;

    align-items:center;

    margin:
        10px 0 0 !important;

    color:
        var(--pdp-blue) !important;

    font-size:
        14px;

    font-weight:
        700 !important;

    transition:
        color .2s ease;
}


@media (hover:hover){

    body.product-single
    .product__description
    .more-desc:hover{

        color:
            var(--pdp-blue-hover) !important;
    }

}


/* ==========================================================
   08. MODEL NUMBER
   ========================================================== */

body.product-single
.main-content >
.flex.item-center.gap-2{

    display:inline-flex;

    align-items:center;

    width:auto;

    padding:7px 11px;

    margin:
        0 0 17px;

    color:
        var(--pdp-muted);

    background:
        #FFFFFF;

    border:
        1px solid var(--pdp-border);

    border-radius:
        10px;

    font-size:
        13px;
}


body.product-single
.main-content >
.flex.item-center.gap-2
span{

    color:
        var(--pdp-muted) !important;
}


/* ==========================================================
   09. PRIMARY PRICE
   ========================================================== */

body.product-single
.main-content >
.flex.whitespace-nowrap.gap-2.items-center{

    align-items:
        baseline !important;

    gap:
        10px !important;

    margin:
        6px 0 15px;
}


body.product-single
.main-content >
.flex.whitespace-nowrap.gap-2.items-center
p{

    color:
        var(--pdp-muted) !important;

    font-size:
        15px !important;

    font-weight:
        600 !important;
}


body.product-single
.main-content >
.flex.whitespace-nowrap.gap-2.items-center
h2,
body.product-single
.main-content >
.flex.whitespace-nowrap.gap-2.items-center
h4{

    color:
        var(--pdp-navy) !important;

    font-size:
        29px !important;

    font-weight:
        800 !important;

    line-height:1.3;
}


body.product-single
.main-content
.sicon-sar{

    font-size:.78em;
}


/* Old price */

body.product-single
.main-content
.line-through{

    color:
        #98A2B3 !important;

    font-size:
        14px;
}


/* ==========================================================
   10. INSTALLMENT WIDGET HOSTS
   Do not alter Tamara/Tabby Shadow DOM
   ========================================================== */

body.product-single
salla-installment{

    display:block;

    margin:
        14px 0 8px;
}


body.product-single
#tabbyPromoWrapper{

    margin-top:9px;
}


/* ==========================================================
   11. PRODUCT FORM
   ========================================================== */

body.product-single
form.product-form{

    margin-top:20px;

    padding-top:18px;

    border-top:
        1px solid var(--pdp-border);
}


/* Total price box */

body.product-single
form.product-form >
section.flex:not(.sticky-product-bar){

    margin-bottom:12px;

    padding:
        15px 16px !important;

    background:
        var(--pdp-soft);

    border:
        1px solid var(--pdp-border);

    border-radius:
        14px !important;
}


body.product-single
form.product-form
.price-wrapper{

    align-items:
        baseline !important;
}


body.product-single
form.product-form
.total-price{

    color:
        var(--pdp-navy) !important;

    font-size:
        25px !important;

    font-weight:
        800 !important;
}


body.product-single
form.product-form
.form-label{

    color:
        var(--pdp-navy) !important;

    font-weight:
        700;
}


/* ==========================================================
   12. QUANTITY
   ========================================================== */

body.product-single
.sticky-product-bar{

    padding:
        15px 0 0 !important;

    background:
        transparent !important;

    border-radius:0 !important;
}


body.product-single
.sticky-product-bar__quantity{

    margin-bottom:
        15px !important;
}


body.product-single
.s-quantity-input-container{

    height:46px;

    overflow:hidden;

    background:#FFFFFF;

    border:
        1px solid var(--pdp-border);

    border-radius:
        12px;

    box-shadow:
        0 2px 7px
        rgba(16,33,61,.03);
}


body.product-single
.s-quantity-input-button{

    width:44px;

    color:
        var(--pdp-blue);

    background:
        var(--pdp-soft);

    transition:
        background .2s ease,
        color .2s ease;
}


body.product-single
.s-quantity-input-button svg{

    width:17px;
    height:17px;
}


@media (hover:hover){

    body.product-single
    .s-quantity-input-button:hover{

        color:#FFFFFF;

        background:
            var(--pdp-blue);
    }

}


body.product-single
.s-quantity-input-input{

    width:52px;

    color:
        var(--pdp-navy);

    background:#FFFFFF;

    border-inline:
        1px solid var(--pdp-border);

    font-size:
        15px;

    font-weight:
        700;

    text-align:center;
}


/* ==========================================================
   13. ADD TO CART
   ========================================================== */

body.product-single
salla-add-product-button.sticky-product-bar__btn{

    display:block;

    margin-top:
        14px !important;
}


body.product-single
.sticky-product-bar__btn
.s-button-primary{

    min-height:
        54px !important;

    color:
        #FFFFFF !important;

    background:
        var(--pdp-blue) !important;

    border-color:
        var(--pdp-blue) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 9px 20px
        rgba(28,80,181,.18);

    font-size:
        16px !important;

    font-weight:
        800 !important;

    transition:
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


@media (hover:hover){

    body.product-single
    .sticky-product-bar__btn
    .s-button-primary:hover{

        background:
            var(--pdp-blue-hover) !important;

        border-color:
            var(--pdp-blue-hover) !important;

        box-shadow:
            0 13px 26px
            rgba(28,80,181,.23);

        transform:
            translateY(-2px);
    }

}


/* ==========================================================
   14. OUT OF STOCK
   ========================================================== */

body.product-single
.out-of-stock:not(.hidden){

    display:inline-flex;

    align-items:center;

    min-height:38px;

    padding:7px 12px;

    color:
        #B42318 !important;

    background:
        #FEF3F2;

    border:
        1px solid #FECDCA;

    border-radius:
        10px;

    opacity:1 !important;

    font-size:
        14px;

    font-weight:
        700;
}


/* ==========================================================
   15. NATIVE SALLA POST-PURCHASE / TRUST COMPONENTS
   ========================================================== */

body.product-single
salla-bought-together,
body.product-single
salla-verified-review,
body.product-single
salla-quick-order{

    display:block;

    margin-top:
        18px;
}


/* ==========================================================
   16. RELATED PRODUCTS
   Does NOT force hidden related products to show
   ========================================================== */

body.product-single
.got-relate_products{

    margin-top:
        30px;
}


body.product-single
.got-relate_container{

    padding:
        22px;

    background:
        #FFFFFF;

    border:
        1px solid var(--pdp-border);

    border-radius:
        var(--pdp-radius-lg);

    box-shadow:
        var(--pdp-shadow);
}


body.product-single
.got-relate_products
custom-salla-product-card{

    overflow:hidden;

    background:
        #FFFFFF;

    border:
        1px solid var(--pdp-border);

    border-radius:
        16px;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


@media (hover:hover){

    body.product-single
    .got-relate_products
    custom-salla-product-card:hover{

        transform:
            translateY(-3px);

        border-color:
            var(--pdp-border-hover);

        box-shadow:
            0 11px 25px
            rgba(16,33,61,.08);
    }

}


body.product-single
.got-relate_products
.s-product-card-image{

    background:
        var(--pdp-soft);
}


body.product-single
.got-relate_products
.s-product-card-image img{

    object-fit:
        contain !important;
}


body.product-single
.got-relate_products
.s-product-card-content-title a{

    color:
        var(--pdp-navy) !important;

    font-weight:
        700;
}


body.product-single
.got-relate_products
.s-product-card-price,
body.product-single
.got-relate_products
.s-product-card-sale-price h4{

    color:
        var(--pdp-navy) !important;

    font-weight:
        800;
}


/* Related product add button */

body.product-single
.got-relate_products
.s-button-primary-outline{

    color:
        var(--pdp-blue) !important;

    border-color:
        rgba(28,80,181,.32) !important;

    border-radius:
        11px !important;
}


@media (hover:hover){

    body.product-single
    .got-relate_products
    .s-button-primary-outline:hover{

        color:#FFFFFF !important;

        background:
            var(--pdp-blue) !important;

        border-color:
            var(--pdp-blue) !important;
    }

}


/* ==========================================================
   17. ACCESSIBILITY
   ========================================================== */

body.product-single
a:focus-visible,
body.product-single
button:focus-visible{

    outline:
        3px solid
        rgba(28,80,181,.28) !important;

    outline-offset:
        3px;
}


/* ==========================================================
   18. TABLET
   ========================================================== */

@media (min-width:768px) and (max-width:1023px){

    body.product-single
    div[id^="product-"].grid{

        gap:
            20px !important;

        padding-inline:
            14px;
    }

    body.product-single
    .main-content{

        padding:
            22px !important;
    }

}


/* ==========================================================
   19. MOBILE
   ========================================================== */

@media (max-width:767px){

    body.product-single{

        background:
            #FFFFFF;
    }


    body.product-single
    div[id^="product-"].grid{

        padding:
            10px 11px 30px;

        gap:
            14px !important;
    }


    /* Gallery */

    body.product-single
    .details-slider{

        padding:
            8px;

        border-radius:
            18px !important;

        box-shadow:
            0 5px 18px
            rgba(16,33,61,.055);
    }


    body.product-single
    .details-slider
    .s-slider-container{

        border-radius:
            14px;
    }


    body.product-single
    .details-slider
    .s-slider-container
    .swiper-slide img{

        padding:
            12px;
    }


    body.product-single
    .details-slider
    .s-slider-nav-arrow{

        width:
            36px !important;

        height:
            36px !important;

        border-radius:
            10px !important;
    }


    body.product-single
    .details-slider
    .s-slider-thumbs{

        margin-top:
            9px;
    }


    body.product-single
    .details-slider
    .s-slider-thumbs
    .swiper-slide{

        border-radius:
            9px;
    }


    /* Main info */

    body.product-single
    .main-content{

        padding:
            18px 15px !important;

        border-radius:
            18px;

        box-shadow:
            0 5px 18px
            rgba(16,33,61,.05);
    }


    body.product-single
    .got-salla_button{

        gap:
            10px !important;
    }


    body.product-single
    .got-salla_button h1{

        font-size:
            21px !important;

        line-height:
            1.65 !important;
    }


    body.product-single
    .got-salla_button
    .s-button-element{

        width:
            38px !important;

        height:
            38px !important;

        min-width:
            38px;
    }


    body.product-single
    .product__description{

        padding:
            14px !important;

        border-radius:
            13px;
    }


    /* Price */

    body.product-single
    .main-content >
    .flex.whitespace-nowrap.gap-2.items-center
    h2,
    body.product-single
    .main-content >
    .flex.whitespace-nowrap.gap-2.items-center
    h4{

        font-size:
            26px !important;
    }


    /* Form */

    body.product-single
    form.product-form{

        margin-top:
            17px;

        padding-top:
            15px;
    }


    body.product-single
    form.product-form >
    section.flex:not(.sticky-product-bar){

        padding:
            13px !important;

        border-radius:
            12px !important;
    }


    body.product-single
    .sticky-product-bar__btn
    .s-button-primary{

        min-height:
            52px !important;

        border-radius:
            13px !important;
    }


    body.product-single
    .got-relate_container{

        padding:
            14px;

        border-radius:
            18px;
    }

}


/* ==========================================================
   20. VERY SMALL MOBILE
   ========================================================== */

@media (max-width:380px){

    body.product-single
    .main-content{

        padding:
            15px 12px !important;
    }

    body.product-single
    .got-salla_button h1{

        font-size:
            19px !important;
    }

}


/* ==========================================================
   21. REDUCED MOTION
   ========================================================== */

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

    body.product-single *,
    body.product-single *::before,
    body.product-single *::after{

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;
    }

}
/* ==========================================================
   AGWAD SHOP × GoTrade
   BLOG PAGE UI
   Scoped to the current Salla blog structure
   ========================================================== */


/* ==========================================================
   01. BLOG DESIGN TOKENS
   ========================================================== */

.main-content:has(#blog-home-slider) {
    --blog-blue: var(--ag-blue, #1C50B5);
    --blog-blue-hover: var(--ag-blue-hover, #174497);
    --blog-navy: var(--ag-blue-dark, #10213D);

    --blog-bg: #F6F8FC;
    --blog-soft: #F4F7FC;
    --blog-white: #FFFFFF;

    --blog-text: #344054;
    --blog-muted: #667085;

    --blog-border: #E3EAF4;
    --blog-border-hover: #B9CDF3;

    --blog-radius: 16px;
    --blog-radius-lg: 22px;

    --blog-shadow:
        0 8px 28px rgba(16, 33, 61, .07);

    --blog-shadow-hover:
        0 15px 36px rgba(16, 33, 61, .11);
}


/* ==========================================================
   02. BLOG WRAPPER
   ========================================================== */

.main-content:has(#blog-home-slider) {
    color: var(--blog-text);
}


/* ==========================================================
   03. FEATURED BLOG SLIDER
   ========================================================== */

#blog-home-slider {
    overflow: hidden !important;

    margin-bottom: 34px !important;

    background: var(--blog-navy);

    border:
        1px solid var(--blog-border);

    border-radius:
        var(--blog-radius-lg) !important;

    box-shadow:
        var(--blog-shadow);
}


#blog-home-slider .s-slider-container {
    border-radius:
        var(--blog-radius-lg);
}


/* Slides */

#blog-home-slider
.blog-slider__slide {

    overflow: hidden;

    min-height: 400px;

    background:
        var(--blog-navy);
}


/* Featured article image */

#blog-home-slider
.blog-slider__slide > img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s ease,
        filter .35s ease;
}


/* Strong readable gradient over slider image */

#blog-home-slider
.blog-slider__slide::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(16, 33, 61, .20) 0%,
            rgba(16, 33, 61, .38) 34%,
            rgba(16, 33, 61, .82) 100%
        );
}


/* RTL gradient correction */

html[dir="rtl"]
#blog-home-slider
.blog-slider__slide::after {

    background:
        linear-gradient(
            270deg,
            rgba(16, 33, 61, .20) 0%,
            rgba(16, 33, 61, .38) 34%,
            rgba(16, 33, 61, .82) 100%
        );
}


/* Content needs to stay above custom overlay */

#blog-home-slider
.blog-slider__slide
> .absolute {

    z-index: 3 !important;
}


/* Slider article content */

#blog-home-slider
.blog-slider__content {

    max-width: 640px;
}


/* Date + Author */

#blog-home-slider
.blog-slider__content
.inline-flex.text-sm {

    gap: 16px;

    padding: 7px 11px;

    background:
        rgba(255, 255, 255, .12);

    border:
        1px solid rgba(255, 255, 255, .16);

    border-radius:
        999px !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    color:
        rgba(255,255,255,.90);
}


/* Featured title */

#blog-home-slider
.blog-slider__content h3 {

    margin-top: 12px !important;
    margin-bottom: 12px !important;

    font-size:
        clamp(23px, 3vw, 36px) !important;

    font-weight:
        800 !important;

    line-height:
        1.5 !important;

    letter-spacing:
        -.3px;
}


#blog-home-slider
.blog-slider__content h3 a {

    color:
        #FFFFFF !important;

    text-decoration:
        none !important;
}


/* Featured description */

#blog-home-slider
.blog-slider__content
.description {

    max-width:
        590px;

    margin:
        0;

    color:
        rgba(255,255,255,.84);

    font-size:
        15px;

    line-height:
        1.85;
}


/* Featured links */

@media (hover:hover) {

    #blog-home-slider
    .blog-slider__content h3 a:hover {

        color:
            #FFFFFF !important;

        text-decoration:
            underline !important;

        text-decoration-thickness:
            1px !important;

        text-underline-offset:
            5px;
    }


    #blog-home-slider
    .swiper-slide:hover
    > img {

        transform:
            scale(1.025);
    }

}


/* ==========================================================
   04. FEATURED SLIDER PAGINATION
   ========================================================== */

#blog-home-slider
.swiper-pagination {

    bottom:
        16px !important;
}


#blog-home-slider
.swiper-pagination-bullet {

    width:
        7px;

    height:
        7px;

    margin-inline:
        4px !important;

    opacity:
        .48;

    background:
        #FFFFFF !important;

    transition:
        width .2s ease,
        opacity .2s ease;
}


#blog-home-slider
.swiper-pagination-bullet-active {

    width:
        24px;

    opacity:
        1;

    border-radius:
        999px;
}


/* ==========================================================
   05. ARTICLE GRID
   Scoped specifically after #blog-home-slider
   ========================================================== */

#blog-home-slider
~ salla-infinite-scroll {

    gap:
        24px !important;
}


/* Article card */

#blog-home-slider
~ salla-infinite-scroll
.post-entry {

    overflow:
        hidden;

    height:
        100%;

    background:
        var(--blog-white);

    border:
        1px solid var(--blog-border);

    border-radius:
        var(--blog-radius-lg) !important;

    box-shadow:
        0 4px 18px
        rgba(16,33,61,.045);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


@media (hover:hover) {

    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry:hover {

        transform:
            translateY(-5px);

        border-color:
            var(--blog-border-hover);

        box-shadow:
            var(--blog-shadow-hover);
    }

}


/* ==========================================================
   06. ARTICLE IMAGE
   ========================================================== */

#blog-home-slider
~ salla-infinite-scroll
.post-entry__image {

    height:
        255px !important;

    overflow:
        hidden;

    background:
        var(--blog-soft);
}


#blog-home-slider
~ salla-infinite-scroll
.post-entry__image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .35s ease,
        opacity .25s ease;
}


@media (hover:hover) {

    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry:hover
    .post-entry__image img {

        transform:
            scale(1.035);
    }

}


/* ==========================================================
   07. ARTICLE BODY
   ========================================================== */

#blog-home-slider
~ salla-infinite-scroll
.post-entry
> .flex-1 {

    padding:
        21px 21px 23px !important;
}


/* Date / author */

#blog-home-slider
~ salla-infinite-scroll
.post-entry
.flex-1
> .text-gray-500 {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        9px 15px;

    margin-bottom:
        12px !important;

    color:
        var(--blog-muted) !important;

    font-size:
        12px !important;
}


#blog-home-slider
~ salla-infinite-scroll
.post-entry
.flex-1
> .text-gray-500 i {

    color:
        var(--blog-blue);
}


/* ==========================================================
   08. ARTICLE TITLE
   ========================================================== */

#blog-home-slider
~ salla-infinite-scroll
.post-entry__title {

    margin:
        0 0 10px !important;

    color:
        var(--blog-navy) !important;

    font-size:
        18px !important;

    font-weight:
        800 !important;

    line-height:
        1.7 !important;
}


#blog-home-slider
~ salla-infinite-scroll
.post-entry__title a {

    color:
        var(--blog-navy) !important;

    text-decoration:
        none;

    transition:
        color .2s ease;
}


@media (hover:hover) {

    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry__title a:hover {

        color:
            var(--blog-blue) !important;
    }

}


/* Keep titles reasonably consistent */

#blog-home-slider
~ salla-infinite-scroll
.post-entry__title {

    display:
        -webkit-box;

    overflow:
        hidden;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}


/* ==========================================================
   09. ARTICLE EXCERPT
   ========================================================== */

#blog-home-slider
~ salla-infinite-scroll
.post-entry
.flex-1
> p.text-gray-500 {

    display:
        -webkit-box;

    overflow:
        hidden;

    margin:
        0 !important;

    color:
        var(--blog-muted) !important;

    font-size:
        14px !important;

    line-height:
        1.9 !important;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        3;
}


/* ==========================================================
   10. TAG AREA
   ========================================================== */

#blog-home-slider
~ salla-infinite-scroll
.post-entry
> .border-t {

    gap:
        7px;

    padding:
        13px 18px !important;

    background:
        #FAFBFD;

    border-color:
        var(--blog-border) !important;
}


/* Individual tag */

#blog-home-slider
~ salla-infinite-scroll
.post-entry
> .border-t a {

    min-height:
        32px;

    padding:
        6px 10px !important;

    color:
        var(--blog-muted) !important;

    background:
        #FFFFFF;

    border:
        1px solid var(--blog-border);

    border-radius:
        999px !important;

    font-size:
        11px !important;

    font-weight:
        600;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}


#blog-home-slider
~ salla-infinite-scroll
.post-entry
> .border-t a i {

    color:
        var(--blog-blue);
}


@media (hover:hover) {

    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry
    > .border-t a:hover {

        color:
            var(--blog-blue) !important;

        background:
            rgba(28,80,181,.05);

        border-color:
            rgba(28,80,181,.22);
    }

}


/* ==========================================================
   11. LOAD MORE / INFINITE SCROLL
   ========================================================== */

#blog-home-slider
~ .s-infinite-scroll-wrapper {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    margin:
        34px 0 10px;

    text-align:
        center;
}


#blog-home-slider
~ .s-infinite-scroll-wrapper
.s-infinite-scroll-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        165px;

    min-height:
        48px;

    padding:
        11px 25px;

    color:
        #FFFFFF !important;

    background:
        var(--blog-blue) !important;

    border:
        1px solid
        var(--blog-blue) !important;

    border-radius:
        12px !important;

    box-shadow:
        0 8px 18px
        rgba(28,80,181,.17);

    font-size:
        14px;

    font-weight:
        700;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


@media (hover:hover) {

    #blog-home-slider
    ~ .s-infinite-scroll-wrapper
    .s-infinite-scroll-btn:hover {

        background:
            var(--blog-blue-hover) !important;

        border-color:
            var(--blog-blue-hover) !important;

        transform:
            translateY(-2px);

        box-shadow:
            0 11px 23px
            rgba(28,80,181,.22);
    }

}


/* Status messages */

#blog-home-slider
~ .s-infinite-scroll-wrapper
.s-infinite-scroll-status {

    color:
        var(--blog-muted);

    font-size:
        13px;
}


/* ==========================================================
   12. ACCESSIBILITY
   ========================================================== */

#blog-home-slider a:focus-visible,
#blog-home-slider button:focus-visible,
#blog-home-slider
~ salla-infinite-scroll
a:focus-visible,
#blog-home-slider
~ .s-infinite-scroll-wrapper
a:focus-visible {

    outline:
        3px solid rgba(28,80,181,.28);

    outline-offset:
        3px;
}


/* ==========================================================
   13. TABLET
   ========================================================== */

@media (min-width:768px) and (max-width:1023px) {

    #blog-home-slider
    .blog-slider__slide {

        min-height:
            365px;
    }


    #blog-home-slider
    .blog-slider__content h3 {

        font-size:
            27px !important;
    }


    #blog-home-slider
    ~ salla-infinite-scroll {

        gap:
            18px !important;
    }


    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry__image {

        height:
            225px !important;
    }

}


/* ==========================================================
   14. MOBILE
   ========================================================== */

@media (max-width:767px) {

    #blog-home-slider {

        margin-bottom:
            24px !important;

        border-radius:
            17px !important;

        box-shadow:
            0 5px 18px
            rgba(16,33,61,.06);
    }


    #blog-home-slider
    .s-slider-container {

        border-radius:
            17px;
    }


    #blog-home-slider
    .blog-slider__slide {

        min-height:
            320px;

        height:
            320px !important;
    }


    /* Stronger bottom gradient for mobile */

    #blog-home-slider
    .blog-slider__slide::after,
    html[dir="rtl"]
    #blog-home-slider
    .blog-slider__slide::after {

        background:
            linear-gradient(
                0deg,
                rgba(16,33,61,.88) 0%,
                rgba(16,33,61,.60) 45%,
                rgba(16,33,61,.12) 100%
            );
    }


    #blog-home-slider
    .blog-slider__slide
    > .absolute {

        right:
            0 !important;

        left:
            0 !important;

        bottom:
            0 !important;

        padding:
            18px 17px 38px !important;
    }


    #blog-home-slider
    .blog-slider__content
    > div {

        width:
            100% !important;
    }


    #blog-home-slider
    .blog-slider__content
    .inline-flex.text-sm {

        gap:
            10px;

        padding:
            5px 8px;

        font-size:
            11px !important;
    }


    #blog-home-slider
    .blog-slider__content h3 {

        margin-top:
            10px !important;

        margin-bottom:
            7px !important;

        font-size:
            20px !important;

        line-height:
            1.55 !important;
    }


    #blog-home-slider
    .blog-slider__content
    .description {

        font-size:
            13px;

        line-height:
            1.75;
    }


    /* One-column feed for comfortable reading */

    #blog-home-slider
    ~ salla-infinite-scroll {

        grid-template-columns:
            minmax(0,1fr) !important;

        gap:
            16px !important;
    }


    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry {

        border-radius:
            17px !important;
    }


    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry__image {

        height:
            215px !important;
    }


    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry
    > .flex-1 {

        padding:
            17px 16px 19px !important;
    }


    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry__title {

        font-size:
            17px !important;

        line-height:
            1.7 !important;
    }


    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry
    .flex-1
    > p.text-gray-500 {

        font-size:
            13px !important;
    }


    /* Tags remain available but compact */

    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry
    > .border-t {

        padding:
            11px 14px !important;

        gap:
            6px;
    }


    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry
    > .border-t a {

        min-height:
            29px;

        padding:
            5px 8px !important;

        font-size:
            10px !important;
    }


    #blog-home-slider
    ~ .s-infinite-scroll-wrapper {

        margin-top:
            25px;
    }


    #blog-home-slider
    ~ .s-infinite-scroll-wrapper
    .s-infinite-scroll-btn {

        width:
            100%;

        min-height:
            47px;
    }

}


/* ==========================================================
   15. VERY SMALL PHONES
   ========================================================== */

@media (max-width:390px) {

    #blog-home-slider
    .blog-slider__slide {

        height:
            300px !important;

        min-height:
            300px;
    }


    #blog-home-slider
    .blog-slider__content h3 {

        font-size:
            18px !important;
    }


    #blog-home-slider
    ~ salla-infinite-scroll
    .post-entry__image {

        height:
            195px !important;
    }

}


/* ==========================================================
   16. REDUCED MOTION
   ========================================================== */

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

    #blog-home-slider *,
    #blog-home-slider
    ~ salla-infinite-scroll *,
    #blog-home-slider
    ~ .s-infinite-scroll-wrapper * {

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}
/* ==========================================================
   AGWAD SHOP × GoTrade
   STORE LOCATION PAGE V2
   Scoped only to page containing .agwad-store
   ========================================================== */


/* ==========================================================
   01. SALLA PAGE WRAPPER CLEANUP
   ========================================================== */

.content.content--single-page:has(.agwad-store) {
    width: 100% !important;
    max-width: none !important;

    margin-top: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* Keep the native H1 visible but integrated with the design */

.content.content--single-page:has(.agwad-store) > h1 {
    width: min(1180px, calc(100% - 32px));

    margin:
        28px auto 8px !important;

    color:
        #10213D !important;

    font-size:
        clamp(22px, 2.5vw, 28px) !important;

    font-weight:
        800 !important;

    line-height:
        1.5;
}


/* Remove extra Salla spacing around our custom content */

.content.content--single-page:has(.agwad-store)
.content-entry {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}


/* Hide page comments only on this location page */

.content.content--single-page:has(.agwad-store)
> salla-comments {
    display: none !important;
}


/* ==========================================================
   02. BASE PAGE POLISH
   ========================================================== */

.content.content--single-page:has(.agwad-store)
.agwad-store {

    --b: #1C50B5;
    --bd: #174497;
    --n: #10213D;

    --ice: #F4F7FC;
    --soft: #F8FAFD;

    --t: #344054;
    --m: #667085;

    --br: #E3EAF4;
    --br-hover: #B9CDF3;

    --r: 20px;
    --r-lg: 26px;

    --sh:
        0 10px 30px
        rgba(16,33,61,.07);

    --sh-hover:
        0 16px 38px
        rgba(16,33,61,.11);

    overflow: visible;

    background:
        #FFFFFF;

    color:
        var(--t);
}


/* Consistent section spacing */

.agwad-store .s {
    padding:
        68px 0;
}


/* ==========================================================
   03. HERO
   ========================================================== */

.agwad-store .hero {

    position: relative;

    overflow: hidden;

    padding:
        68px 0 56px;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(28,80,181,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 96% 92%,
            rgba(28,80,181,.07),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F7F9FD 56%,
            #EAF1FF 100%
        );

    border:
        1px solid var(--br);

    border-inline:
        0;

    border-radius:
        0 0 34px 34px;

    box-shadow:
        0 14px 36px
        rgba(16,33,61,.065);
}


/* Decorative glow */

.agwad-store .hero::before {

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    left: -110px;
    top: -130px;

    border-radius: 50%;

    background:
        rgba(28,80,181,.055);

    pointer-events: none;
}


/* Main hero grid */

.agwad-store .hero-grid {

    position: relative;

    z-index: 1;

    grid-template-columns:
        minmax(0,1.45fr)
        minmax(280px,.65fr);

    gap:
        clamp(28px, 5vw, 58px);
}


/* Location badge */

.agwad-store .badge {

    padding:
        8px 14px;

    margin-bottom:
        18px;

    color:
        var(--b);

    background:
        rgba(28,80,181,.07);

    border:
        1px solid rgba(28,80,181,.15);

    border-radius:
        999px;

    font-size:
        13px;

    font-weight:
        800;
}


/* Pulse only if reduced-motion allows */

.agwad-store .dot {

    box-shadow:
        0 0 0 4px
        rgba(28,80,181,.09);
}


/* Hero heading */

.agwad-store .hero h2 {

    max-width:
        780px;

    margin-bottom:
        17px;

    color:
        var(--n);

    font-size:
        clamp(31px, 4.6vw, 48px);

    line-height:
        1.35;

    letter-spacing:
        -.5px;
}


.agwad-store .hero h2 strong {
    color:
        var(--b);
}


/* Hero supporting copy */

.agwad-store .hero p {

    max-width:
        730px;

    color:
        var(--m);

    font-size:
        clamp(15px, 1.7vw, 18px);

    line-height:
        2;
}


/* ==========================================================
   04. BUTTON SYSTEM
   ========================================================== */

.agwad-store .actions {

    gap:
        11px;

    margin-top:
        26px;
}


.agwad-store .btn {

    min-height:
        48px;

    padding:
        11px 20px;

    border-radius:
        12px;

    font-size:
        14px;

    font-weight:
        800;

    transition:
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.agwad-store .primary {

    color:
        #FFFFFF !important;

    background:
        var(--b);

    border-color:
        var(--b);

    box-shadow:
        0 9px 22px
        rgba(28,80,181,.17);
}


.agwad-store .secondary {

    color:
        var(--n) !important;

    background:
        #FFFFFF;

    border-color:
        var(--br);
}


@media (hover:hover) {

    .agwad-store .btn:hover {

        transform:
            translateY(-2px);
    }


    .agwad-store .primary:hover {

        background:
            var(--bd);

        border-color:
            var(--bd);

        box-shadow:
            0 12px 25px
            rgba(28,80,181,.22);
    }


    .agwad-store .secondary:hover {

        color:
            var(--b) !important;

        border-color:
            var(--br-hover);

        background:
            #F9FBFF;

        box-shadow:
            0 6px 18px
            rgba(16,33,61,.06);
    }

}


/* ==========================================================
   05. STORE SUMMARY CARD
   ========================================================== */

.agwad-store .summary {

    position: relative;

    padding:
        27px;

    background:
        rgba(255,255,255,.97);

    border:
        1px solid var(--br);

    border-radius:
        22px;

    box-shadow:
        0 16px 38px
        rgba(16,33,61,.09);
}


.agwad-store .summary::before {

    content: "";

    position: absolute;

    inset-inline-start:
        0;

    top:
        28px;

    width:
        4px;

    height:
        42px;

    background:
        var(--b);

    border-radius:
        0 5px 5px 0;
}


html[dir="rtl"]
.agwad-store .summary::before {

    border-radius:
        5px 0 0 5px;
}


.agwad-store .summary h3 {

    color:
        var(--n);

    font-size:
        20px;

    font-weight:
        800;
}


.agwad-store .sum {

    padding:
        12px 0;
}


.agwad-store .sum strong {

    margin-bottom:
        3px;

    font-size:
        13px;
}


.agwad-store .sum span {

    font-size:
        13px;

    line-height:
        1.7;
}


/* ==========================================================
   06. QUICK FACTS
   ========================================================== */

.agwad-store .facts {

    gap:
        14px;

    margin-top:
        32px;
}


.agwad-store .fact {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        108px;

    padding:
        18px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid var(--br);

    border-radius:
        16px;

    box-shadow:
        0 4px 15px
        rgba(16,33,61,.035);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.agwad-store .fact::before {

    content: "";

    position:
        absolute;

    inset-inline-start:
        0;

    top:
        0;

    width:
        3px;

    height:
        100%;

    background:
        var(--b);

    opacity:
        .75;
}


.agwad-store .fact strong {

    font-size:
        15px;

    line-height:
        1.6;
}


.agwad-store .fact span {

    font-size:
        13px;

    line-height:
        1.7;
}


@media (hover:hover) {

    .agwad-store .fact:hover {

        transform:
            translateY(-3px);

        border-color:
            var(--br-hover);

        box-shadow:
            var(--sh);
    }

}


/* ==========================================================
   07. SECTION HEADINGS
   ========================================================== */

.agwad-store .head {

    max-width:
        800px;

    margin-bottom:
        31px;
}


.agwad-store .head h2 {

    position:
        relative;

    padding-inline-start:
        15px;

    color:
        var(--n);

    font-size:
        clamp(24px, 3vw, 33px);

    line-height:
        1.5;

    letter-spacing:
        -.25px;
}


.agwad-store .head h2::before {

    content: "";

    position:
        absolute;

    inset-inline-start:
        0;

    top:
        .38em;

    width:
        4px;

    height:
        1.05em;

    background:
        var(--b);

    border-radius:
        10px;
}


.agwad-store .head p {

    max-width:
        760px;

    color:
        var(--m);

    font-size:
        15px;

    line-height:
        1.95;
}


/* ==========================================================
   08. CATEGORY / SERVICE CARDS
   ========================================================== */

.agwad-store .grid4 {

    gap:
        18px;
}


.agwad-store .card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        215px;

    padding:
        24px;

    background:
        #FFFFFF;

    border:
        1px solid var(--br);

    border-radius:
        20px;

    box-shadow:
        0 4px 17px
        rgba(16,33,61,.035);

    transition:
        transform .23s ease,
        border-color .23s ease,
        box-shadow .23s ease;
}


.agwad-store .num {

    width:
        42px;

    height:
        42px;

    margin-bottom:
        16px;

    color:
        var(--b);

    background:
        rgba(28,80,181,.07);

    border:
        1px solid
        rgba(28,80,181,.10);

    border-radius:
        12px;
}


.agwad-store .card h3 {

    color:
        var(--n);

    font-size:
        17px;

    line-height:
        1.65;
}


.agwad-store .card p {

    color:
        var(--m);

    font-size:
        13.5px;

    line-height:
        1.9;
}


@media (hover:hover) {

    .agwad-store .card:hover {

        transform:
            translateY(-5px);

        border-color:
            rgba(28,80,181,.28);

        box-shadow:
            var(--sh-hover);
    }

}


/* ==========================================================
   09. SOFT SECTIONS
   ========================================================== */

.agwad-store .soft {

    background:
        linear-gradient(
            180deg,
            #F7F9FD 0%,
            #F2F6FC 100%
        );

    border-top:
        1px solid rgba(227,234,244,.72);

    border-bottom:
        1px solid rgba(227,234,244,.72);
}


/* ==========================================================
   10. LOCATION DETAILS + MAP
   ========================================================== */

.agwad-store .loc {

    grid-template-columns:
        minmax(300px,.78fr)
        minmax(0,1.35fr);

    gap:
        24px;

    align-items:
        stretch;
}


.agwad-store .loc-card {

    padding:
        27px;

    background:
        #FFFFFF;

    border:
        1px solid var(--br);

    border-radius:
        22px;

    box-shadow:
        var(--sh);
}


.agwad-store .info {

    padding:
        14px 0;
}


.agwad-store .label {

    margin-bottom:
        5px;

    color:
        var(--m);

    font-size:
        12px;
}


.agwad-store .value {

    color:
        var(--n) !important;

    font-size:
        14px;

    font-weight:
        800;

    line-height:
        1.75;
}


.agwad-store a.value {

    transition:
        color .2s ease;
}


@media (hover:hover) {

    .agwad-store a.value:hover {

        color:
            var(--b) !important;
    }

}


/* Map card */

.agwad-store .map {

    position:
        relative;

    min-height:
        455px;

    overflow:
        hidden;

    background:
        var(--ice);

    border:
        1px solid var(--br);

    border-radius:
        22px;

    box-shadow:
        var(--sh);
}


.agwad-store .map iframe {

    min-height:
        455px;

    filter:
        saturate(.92)
        contrast(1.01);
}


/* ==========================================================
   11. OPENING HOURS
   ========================================================== */

.agwad-store .hours {

    overflow:
        hidden;

    background:
        #FFFFFF;

    border:
        1px solid var(--br);

    border-radius:
        20px;

    box-shadow:
        0 6px 22px
        rgba(16,33,61,.05);
}


.agwad-store .hour {

    min-height:
        58px;

    align-items:
        center;

    padding:
        15px 21px;

    transition:
        background-color .18s ease;
}


.agwad-store .hour:nth-child(even) {

    background:
        #FBFCFE;
}


.agwad-store .hour strong {

    color:
        var(--n);

    font-size:
        14px;
}


.agwad-store .hour span {

    color:
        var(--m);

    font-size:
        14px;

    direction:
        rtl;
}


@media (hover:hover) {

    .agwad-store .hour:hover {

        background:
            rgba(28,80,181,.035);
    }

}


/* Friday subtle distinction */

.agwad-store .hour:nth-child(6) {

    background:
        rgba(28,80,181,.045);
}


.agwad-store .hour:nth-child(6) strong {

    color:
        var(--b);
}


/* ==========================================================
   12. VISIT FEATURES
   ========================================================== */

.agwad-store .grid3 {

    gap:
        16px;
}


.agwad-store .feature {

    min-height:
        135px;

    padding:
        21px;

    background:
        #FFFFFF;

    border:
        1px solid var(--br);

    border-radius:
        17px;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.agwad-store .feature strong {

    color:
        var(--n);

    font-size:
        15px;

    line-height:
        1.6;
}


.agwad-store .feature span {

    color:
        var(--m);

    font-size:
        13px;

    line-height:
        1.8;
}


@media (hover:hover) {

    .agwad-store .feature:hover {

        transform:
            translateY(-3px);

        border-color:
            var(--br-hover);

        box-shadow:
            var(--sh);
    }

}


/* ==========================================================
   13. LOCAL PROOF SECTION
   ========================================================== */

.agwad-store .proof {

    position:
        relative;

    overflow:
        hidden;

    padding:
        34px;

    background:
        linear-gradient(
            135deg,
            rgba(28,80,181,.065),
            #F4F7FC 65%,
            #FFFFFF
        );

    border:
        1px solid var(--br);

    border-radius:
        22px;
}


.agwad-store .proof::after {

    content: "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    inset-inline-end:
        -70px;

    bottom:
        -90px;

    background:
        rgba(28,80,181,.05);

    border-radius:
        50%;
}


.agwad-store .proof h2 {

    position:
        relative;

    z-index:
        1;

    color:
        var(--n);

    font-size:
        clamp(22px, 2.6vw, 28px);
}


.agwad-store .proof p {

    position:
        relative;

    z-index:
        1;

    max-width:
        760px;

    color:
        var(--m);

    line-height:
        1.9;
}


/* ==========================================================
   14. FAQ
   ========================================================== */

.agwad-store .faq {

    max-width:
        930px;
}


.agwad-store details {

    overflow:
        hidden;

    margin-bottom:
        11px;

    background:
        #FFFFFF;

    border:
        1px solid var(--br);

    border-radius:
        14px;

    box-shadow:
        0 3px 13px
        rgba(16,33,61,.025);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.agwad-store details[open] {

    border-color:
        rgba(28,80,181,.28);

    box-shadow:
        0 8px 20px
        rgba(16,33,61,.06);
}


.agwad-store summary {

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    padding:
        16px 20px 16px 52px;

    color:
        var(--n);

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1.7;
}


.agwad-store summary::before {

    left:
        17px;

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--b);

    background:
        rgba(28,80,181,.07);

    border-radius:
        9px;

    font-size:
        20px;

    line-height:
        1;
}


.agwad-store .ans {

    padding:
        16px 20px 19px;

    color:
        var(--m);

    background:
        #FBFCFE;

    font-size:
        14px;

    line-height:
        1.95;
}


.agwad-store .ans a {

    color:
        var(--b);

    font-weight:
        700;
}


/* ==========================================================
   15. SOCIAL LINKS
   ========================================================== */

.agwad-store
section:not(.hero)
.actions
.btn.secondary {

    min-width:
        110px;
}


/* ==========================================================
   16. FINAL CTA
   ========================================================== */

.agwad-store .final {

    position:
        relative;

    overflow:
        hidden;

    grid-template-columns:
        minmax(0,1.3fr)
        auto;

    padding:
        44px;

    background:
        linear-gradient(
            135deg,
            #10213D 0%,
            #153466 100%
        );

    border-radius:
        26px;

    box-shadow:
        0 18px 42px
        rgba(16,33,61,.17);
}


.agwad-store .final::before {

    content: "";

    position:
        absolute;

    width:
        230px;

    height:
        230px;

    inset-inline-end:
        -80px;

    top:
        -100px;

    background:
        rgba(255,255,255,.045);

    border-radius:
        50%;
}


.agwad-store .final > * {

    position:
        relative;

    z-index:
        1;
}


.agwad-store .final h2 {

    color:
        #FFFFFF;

    font-size:
        clamp(24px, 3vw, 32px);

    line-height:
        1.5;
}


.agwad-store .final p {

    max-width:
        620px;

    color:
        rgba(255,255,255,.76);

    line-height:
        1.8;
}


.agwad-store .final
.btn.primary {

    background:
        var(--b);

    border-color:
        var(--b);
}


.agwad-store .final
.btn.secondary {

    color:
        #FFFFFF !important;

    background:
        rgba(255,255,255,.08);

    border-color:
        rgba(255,255,255,.22);
}


@media (hover:hover) {

    .agwad-store .final
    .btn.secondary:hover {

        color:
            #FFFFFF !important;

        background:
            rgba(255,255,255,.14);

        border-color:
            rgba(255,255,255,.34);
    }

}


/* ==========================================================
   17. TABLET
   ========================================================== */

@media (max-width:950px) {

    .agwad-store .hero-grid,
    .agwad-store .loc,
    .agwad-store .final {

        grid-template-columns:
            1fr;
    }


    .agwad-store .hero-grid {

        gap:
            28px;
    }


    .agwad-store .summary {

        max-width:
            620px;
    }


    .agwad-store .grid4,
    .agwad-store .facts,
    .agwad-store .grid3 {

        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .agwad-store .final .actions {

        margin-top:
            8px;
    }

}


/* ==========================================================
   18. MOBILE
   ========================================================== */

@media (max-width:600px) {

    .content.content--single-page:has(.agwad-store)
    > h1 {

        width:
            calc(100% - 24px);

        margin:
            18px auto 6px !important;

        font-size:
            21px !important;
    }


    .agwad-store .c {

        width:
            calc(100% - 24px);
    }


    .agwad-store .s {

        padding:
            46px 0;
    }


    /* Hero */

    .agwad-store .hero {

        padding:
            40px 0 36px;

        border-radius:
            0 0 23px 23px;
    }


    .agwad-store .badge {

        margin-bottom:
            13px;

        font-size:
            12px;
    }


    .agwad-store .hero h2 {

        margin-bottom:
            12px;

        font-size:
            28px;

        line-height:
            1.45;
    }


    .agwad-store .hero p {

        font-size:
            14px;

        line-height:
            1.9;
    }


    /* Actions */

    .agwad-store .actions {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            9px;

        margin-top:
            21px;
    }


    .agwad-store .btn {

        width:
            100%;

        min-height:
            48px;
    }


    /* Summary */

    .agwad-store .summary {

        padding:
            21px;

        border-radius:
            17px;
    }


    /* Grids */

    .agwad-store .grid4,
    .agwad-store .facts,
    .agwad-store .grid3 {

        grid-template-columns:
            1fr;
    }


    .agwad-store .facts {

        gap:
            10px;
    }


    .agwad-store .fact {

        min-height:
            0;
    }


    .agwad-store .card {

        min-height:
            0;

        padding:
            20px;
    }


    /* Heading */

    .agwad-store .head {

        margin-bottom:
            23px;
    }


    .agwad-store .head h2 {

        font-size:
            24px;
    }


    .agwad-store .head p {

        font-size:
            14px;
    }


    /* Location */

    .agwad-store .loc {

        gap:
            15px;
    }


    .agwad-store .loc-card {

        padding:
            20px;

        border-radius:
            17px;
    }


    .agwad-store .map,
    .agwad-store .map iframe {

        min-height:
            320px;
    }


    .agwad-store .map {

        border-radius:
            17px;
    }


    /* Hours */

    .agwad-store .hour {

        grid-template-columns:
            1fr auto;

        gap:
            12px;

        padding:
            14px 16px;
    }


    .agwad-store .hour span {

        text-align:
            left;
    }


    /* Feature */

    .agwad-store .feature {

        min-height:
            0;

        padding:
            18px;
    }


    /* Proof */

    .agwad-store .proof {

        padding:
            25px 20px;

        border-radius:
            17px;
    }


    /* FAQ */

    .agwad-store summary {

        padding:
            15px 17px 15px 48px;

        font-size:
            14px;
    }


    .agwad-store summary::before {

        left:
            13px;

        width:
            29px;

        height:
            29px;
    }


    .agwad-store .ans {

        padding:
            14px 17px 17px;

        font-size:
            13px;
    }


    /* Final CTA */

    .agwad-store .final {

        padding:
            29px 21px;

        border-radius:
            20px;
    }


    .agwad-store .final h2 {

        font-size:
            23px;
    }


    .agwad-store .final p {

        font-size:
            14px;
    }

}


/* ==========================================================
   19. VERY SMALL MOBILE
   ========================================================== */

@media (max-width:380px) {

    .agwad-store .hero h2 {

        font-size:
            25px;
    }


    .agwad-store .hour {

        grid-template-columns:
            1fr;

        gap:
            2px;
    }


    .agwad-store .hour span {

        text-align:
            right;
    }

}


/* ==========================================================
   20. ACCESSIBILITY / REDUCED MOTION
   ========================================================== */

.agwad-store a:focus-visible,
.agwad-store summary:focus-visible {

    outline:
        3px solid
        rgba(28,80,181,.28) !important;

    outline-offset:
        3px;
}


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

    .agwad-store *,
    .agwad-store *::before,
    .agwad-store *::after {

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}