:root {
            --blue: #1677ff;
            --blue-dark: #0759c9;
            --blue-soft: #eaf4ff;
            --navy: #08182e;
            --text: #101828;
            --muted: #667085;
            --line: #e7eef7;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: #fff;
            color: var(--text);
            font-family: Arial, Helvetica, sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        .container {
            width: 90%;
            max-width: 1240px;
        }

        /* --------------------------------
           NAVBAR
        -------------------------------- */

        nav {
            background: rgba(255,255,255,.95);
            box-shadow: 0 1px 0 rgba(0,0,0,.06);
            position: fixed;
            top: 0;
            z-index: 999;
        }

        nav .brand-logo {
            color: var(--blue);
            font-weight: 900;
            letter-spacing: -2px;
            font-size: 31px;
        }

        nav ul a {
            color: #344054;
            font-size: 14px;
            font-weight: 600;
        }

        nav ul a:hover {
            background: transparent;
            color: var(--blue);
        }

        .nav-cta {
            background: var(--blue) !important;
            color: #fff !important;
            border-radius: 30px;
            height: 42px;
            line-height: 42px;
            margin-top: 9px;
            padding: 0 20px;
        }

        /* --------------------------------
           HERO
        -------------------------------- */

        .hero {
            min-height: 850px;
            padding-top: 120px;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at 75% 35%,
                    rgba(22,119,255,.18),
                    transparent 32%
                ),
                linear-gradient(
                    120deg,
                    #ffffff 0%,
                    #f7fbff 55%,
                    #e9f4ff 100%
                );
        }

        .hero:after {
            content: "";
            position: absolute;
            width: 700px;
            height: 700px;
            border-radius: 50%;
            background: rgba(22,119,255,.04);
            right: -300px;
            bottom: -250px;
        }

        .hero-content {
            padding-top: 90px;
            position: relative;
            z-index: 2;
        }

        .small-label {
            color: var(--blue);
            font-weight: 800;
            letter-spacing: 2px;
            font-size: 12px;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .hero h1 {
            font-size: clamp(48px, 7vw, 88px);
            line-height: .94;
            letter-spacing: -6px;
            font-weight: 900;
            margin: 0 0 30px;
        }

        .hero h1 span {
            color: var(--blue);
        }

        .hero-description {
            color: var(--muted);
            font-size: 18px;
            line-height: 1.8;
            max-width: 580px;
            margin-bottom: 35px;
        }

        .hero-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

   .whatsapp-button {
background: #25D366;
border-radius: 40px;
padding: 0 28px;
height: 50px;
line-height: 50px;
box-shadow: 0 12px 30px rgba(37, 211, 102, .28);
font-weight: 700;
color: #fff;
border: none;
        }
   .dark-button {
          background: #101828;
border-radius: 40px;
padding: 0 28px;
height: 50px;
line-height: 50px;
box-shadow: 0 12px 30px rgba(16, 24, 40, .25);
font-weight: 700;
color: #fff;
        }
        .blue-button {
            background: var(--blue);
            border-radius: 40px;
            padding: 0 28px;
            height: 50px;
            line-height: 50px;
            box-shadow: 0 12px 30px rgba(22,119,255,.25);
            font-weight: 700;
        }

        .blue-button:hover {
            background: var(--blue-dark);
        }

        .white-button {
            background: #fff;
            color: var(--text);
            border: 1px solid var(--line);
            border-radius: 40px;
            padding: 0 28px;
            height: 50px;
            line-height: 48px;
            font-weight: 700;
        }

        /* HERO PRODUCT */

        .hero-visual {
            height: 650px;
            position: relative;
        }

        .orb {
            position: absolute;
            width: 510px;
            height: 510px;
            border-radius: 50%;
            background: linear-gradient(
                145deg,
                #dff0ff,
                #a9d5ff
            );
            top: 50px;
            left: 60px;
            box-shadow:
                inset 0 0 100px rgba(255,255,255,.9),
                0 30px 80px rgba(22,119,255,.12);
        }

        .product-main {
            position: absolute;
            z-index: 4;
            width: 205px;
            height: 410px;
            border-radius: 35px;
            left: 210px;
            top: 90px;

            background:
                linear-gradient(
                    155deg,
                    #075ad2,
                    #1499ff 50%,
                    #6848f3
                );

            transform: rotate(9deg);

            box-shadow:
                25px 40px 65px rgba(0,70,160,.32),
                inset 8px 8px 25px rgba(255,255,255,.22);
        }

        .product-main:before {
            content: "";
            position: absolute;
            width: 65px;
            height: 52px;
            background: #151a20;
            top: -43px;
            left: 70px;
            border-radius: 17px 17px 8px 8px;
        }

        .product-main:after {
            content: "STORE";
            position: absolute;
            color: #fff;
            font-size: 29px;
            font-weight: 900;
            transform: rotate(90deg);
            top: 175px;
            left: 57px;
        }

        .product-back {
            position: absolute;
            width: 165px;
            height: 335px;
            border-radius: 30px;
            background: linear-gradient(
                145deg,
                #ffffff,
                #d9ecff
            );
            left: 375px;
            top: 190px;
            transform: rotate(19deg);
            box-shadow: 20px 30px 50px rgba(0,60,130,.15);
            z-index: 2;
        }

        .product-back:before {
            content: "";
            position: absolute;
            width: 53px;
            height: 42px;
            background: #181c21;
            left: 56px;
            top: -34px;
            border-radius: 13px 13px 7px 7px;
        }

        .floating-tag {
            position: absolute;
            z-index: 6;
            background: rgba(255,255,255,.92);
            border: 1px solid rgba(255,255,255,.7);
            padding: 15px 20px;
            border-radius: 16px;
            box-shadow: 0 15px 40px rgba(0,70,150,.12);
        }

        .floating-tag.one {
            top: 90px;
            left: 0;
        }

        .floating-tag.two {
            bottom: 90px;
            right: 0;
        }

        .floating-tag strong {
            display: block;
            color: var(--blue);
            font-size: 17px;
        }

        .floating-tag span {
            color: var(--muted);
            font-size: 11px;
        }

        /* --------------------------------
           MARQUEE
        -------------------------------- */

        .brand-strip {
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            padding: 22px 0;
            background: #fff;
        }

        .brand-strip-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .brand-strip span {
            color: #98a2b3;
            font-weight: 800;
            letter-spacing: 1px;
            font-size: 12px;
        }

        /* --------------------------------
           INTRO
        -------------------------------- */

        .section {
            padding: 110px 0;
        }

        .section-label {
            color: var(--blue);
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 2px;
            margin-bottom: 15px;
        }

        .section-title {
            font-size: clamp(38px,5vw,60px);
            line-height: 1;
            letter-spacing: -3px;
            font-weight: 900;
            margin: 0 0 22px;
        }

        .section-text {
            color: var(--muted);
            font-size: 16px;
            line-height: 1.8;
        }

        .intro-number {
            font-size: 150px;
            font-weight: 900;
            color: #edf6ff;
            line-height: .8;
            text-align: right;
        }

        /* --------------------------------
           FEATURE CARDS
        -------------------------------- */

        .feature-section {
            background: #f6faff;
        }

        .feature-card {
            background: #fff;
            border-radius: 24px;
            padding: 35px;
            min-height: 270px;
            border: 1px solid #e8f0f8;
            transition: .3s;
        }

        .feature-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 25px 60px rgba(30,100,170,.10);
        }

        .feature-icon {
            width: 58px;
            height: 58px;
            border-radius: 17px;
            background: var(--blue-soft);
            color: var(--blue);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
        }

        .feature-card h3 {
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .feature-card p {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.7;
        }

        /* --------------------------------
           PRODUCTS
        -------------------------------- */

        .products-section {
            background: #fff;
        }

        .product-card-new {
            border-radius: 25px;
            overflow: hidden;
            border: 1px solid var(--line);
            background: #fff;
            transition: .3s;
        }

        .product-card-new:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 70px rgba(0,80,160,.12);
        }

        .product-picture {
            height: 330px;
            background:
                radial-gradient(
                    circle,
                    #e7f4ff,
                    #f7fbff
                );
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .mini-product {
            width: 105px;
            height: 235px;
            border-radius: 23px;
            background: linear-gradient(
                145deg,
                #0759cf,
                #26a0ff,
                #6250ed
            );
            box-shadow: 18px 25px 40px rgba(0,70,170,.20);
            position: relative;
        }

        .mini-product:before {
            content: "";
            position: absolute;
            width: 34px;
            height: 27px;
            background: #15191e;
            top: -22px;
            left: 35px;
            border-radius: 8px 8px 4px 4px;
        }

        .mini-product:after {
            content: "STORE";
            position: absolute;
            color: #fff;
            font-size: 14px;
            font-weight: 900;
            transform: rotate(90deg);
            top: 105px;
            left: 29px;
        }

        .product-content {
            padding: 28px;
        }

        .product-number {
            color: var(--blue);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 2px;
        }

        .product-content h3 {
            font-weight: 900;
            margin: 8px 0 10px;
        }

        .product-content p {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        /* --------------------------------
           BLUE STORY
        -------------------------------- */

        .story {
            background: var(--navy);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .story:before {
            content: "";
            position: absolute;
            width: 650px;
            height: 650px;
            border-radius: 50%;
            background: rgba(22,119,255,.22);
            right: -200px;
            top: -250px;
            filter: blur(2px);
        }

        .story .section-label {
            color: #65adff;
        }

        .story .section-text {
            color: #9db0c8;
        }

        .story-box {
            position: relative;
            z-index: 2;
            padding: 40px;
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 25px;
            background: rgba(255,255,255,.04);
            backdrop-filter: blur(10px);
        }

        .story-stat {
            border-left: 1px solid rgba(255,255,255,.15);
            padding-left: 25px;
        }

        .story-stat strong {
            display: block;
            color: #fff;
            font-size: 36px;
            font-weight: 900;
        }

        .story-stat span {
            color: #8da0b8;
            font-size: 12px;
        }

        /* --------------------------------
           AROMA / OPTIONS
        -------------------------------- */

        .options {
            background: #fff;
        }

        .option-box {
            min-height: 230px;
            border-radius: 24px;
            padding: 30px;
            position: relative;
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line);
        }

        .option-circle {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            position: absolute;
            right: -25px;
            bottom: -30px;
            opacity: .9;
        }

        .blue-circle {
            background: #9ed0ff;
        }

        .cyan-circle {
            background: #91eee8;
        }

        .purple-circle {
            background: #c1a9ff;
        }

        .pink-circle {
            background: #ffb0cb;
        }

        .option-box h4 {
            font-weight: 900;
            position: relative;
            z-index: 2;
        }

        .option-box p {
            max-width: 230px;
            color: var(--muted);
            font-size: 13px;
            position: relative;
            z-index: 2;
        }

        /* --------------------------------
           INFORMATION TABLE
        -------------------------------- */

        .info-table {
            border-radius: 25px;
            overflow: hidden;
            border: 1px solid var(--line);
        }

        .info-table table {
            margin: 0;
        }

        .info-table th {
            background: #f2f8ff;
            color: #344054;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .info-table td {
            font-size: 14px;
            color: var(--muted);
        }

        /* --------------------------------
           FAQ
        -------------------------------- */

        .faq {
            max-width: 900px;
            margin: auto;
        }

        .faq .collapsible {
            border: 0;
            box-shadow: none;
        }

        .faq .collapsible-header {
            border-bottom: 1px solid var(--line);
            padding: 25px 5px;
            font-weight: 800;
            font-size: 16px;
            background: transparent;
        }

        .faq .collapsible-body {
            border-bottom: 1px solid var(--line);
            color: var(--muted);
            line-height: 1.8;
            padding: 20px 5px;
        }

        /* --------------------------------
           CONTACT CTA
        -------------------------------- */

        .contact-box {
            background:
                radial-gradient(
                    circle at 80% 20%,
                    rgba(255,255,255,.2),
                    transparent 25%
                ),
                linear-gradient(
                    135deg,
                    #0966df,
                    #218fff
                );

            color: #fff;
            border-radius: 30px;
            padding: 65px;
            text-align: center;
            box-shadow: 0 30px 70px rgba(0,100,220,.20);
        }

        .contact-box h2 {
            font-size: clamp(35px,5vw,58px);
            letter-spacing: -3px;
            font-weight: 900;
            margin: 0 0 18px;
        }

        .contact-box p {
            max-width: 650px;
            margin: auto auto 30px;
            color: rgba(255,255,255,.82);
        }

        .contact-box .white-button {
            border: 0;
            color: var(--blue);
        }

        /* --------------------------------
           AGE NOTICE
        -------------------------------- */

        .age-notice {
            background: #f8fafc;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            padding: 18px 0;
            text-align: center;
            color: #667085;
            font-size: 12px;
        }

        .age-notice strong {
            color: #344054;
        }

        /* --------------------------------
           FOOTER
        -------------------------------- */

        footer {
            background: #061326;
            color: #fff;
            padding: 70px 0 25px;
        }

        .footer-logo {
            color: #4b9dff;
            font-size: 34px;
            font-weight: 900;
            letter-spacing: -2px;
        }

        .footer-about {
            color: #8496ad;
            font-size: 13px;
            line-height: 1.8;
            max-width: 330px;
        }

        .footer-title {
            font-size: 13px;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .footer-links a {
            display: block;
            color: #8496ad;
            font-size: 12px;
            margin-bottom: 12px;
        }

        .footer-links a:hover {
            color: #fff;
        }

        .footer-bottom {
            margin-top: 45px;
            padding-top: 22px;
            border-top: 1px solid rgba(255,255,255,.08);
            color: #62748c;
            font-size: 11px;
        }

        /* --------------------------------
           MOBILE
        -------------------------------- */

        @media(max-width: 992px) {

            .hero {
                min-height: auto;
                padding-bottom: 70px;
            }

            .hero-content {
                padding-top: 40px;
            }

            .hero-visual {
                height: 560px;
                transform: scale(.85);
                transform-origin: center;
            }

            .intro-number {
                text-align: left;
                margin-top: 30px;
            }

            .story-stat {
                border-left: 0;
                border-top: 1px solid rgba(255,255,255,.15);
                padding: 20px 0 0;
                margin-top: 20px;
            }
        }

        @media(max-width: 600px) {

            .container {
                width: 92%;
            }

            nav .brand-logo {
                font-size: 27px;
            }

            .hero h1 {
                letter-spacing: -4px;
            }

            .hero-description {
                font-size: 15px;
            }

            .hero-visual {
                height: 440px;
                transform: scale(.66);
                margin-top: -20px;
            }

            .orb {
                left: 0;
            }

            .floating-tag.one {
                left: -25px;
            }

            .floating-tag.two {
                right: -25px;
            }

            .section {
                padding: 31px 0;
            }

            .section-title {
                letter-spacing: -2px;
            }

            .contact-box {
                padding: 40px 22px;
            }

            .brand-strip-inner {
                justify-content: center;
            }

            .story-box {
                padding: 25px;
            }
        }

    


/* ===== DYNAMIC STORE EXTENSIONS ===== */
body { padding-top:64px; }
a { text-decoration:none; }
img { max-width:100%; display:block; }
.store-nav { height:64px; line-height:64px; }
.store-nav .nav-wrapper { height:64px; }
.store-nav .brand-logo { position:relative; transform:none; left:auto; }
.store-nav .nav-actions { float:right; display:flex; align-items:center; gap:10px; height:64px; }
.cart-link { display:flex; align-items:center; gap:8px; height:42px; line-height:42px; margin-top:11px; padding:0 16px; border:1px solid var(--line); border-radius:999px; color:var(--text); font-weight:800; background:#fff; }
.cart-badge { display:inline-flex; min-width:22px; height:22px; padding:0 6px; align-items:center; justify-content:center; border-radius:999px; background:var(--blue); color:#fff; font-size:11px; line-height:1; }
.mobile-category-trigger { display:none; width:42px; height:42px; margin-top:11px; border:1px solid var(--line); background:#fff; border-radius:50%; align-items:center; justify-content:center; cursor:pointer; }
.mobile-category-trigger span { display:block; width:18px; height:2px; background:var(--text); margin:3px 0; border-radius:2px; }
.category-drawer-backdrop { position:fixed; inset:0; background:rgba(6,19,38,.45); opacity:0; visibility:hidden; transition:.25s; z-index:1100; }
.category-drawer { position:fixed; top:0; left:0; width:min(88vw,360px); height:100vh; background:#fff; z-index:1101; transform:translateX(-100%); transition:.28s ease; padding:24px; box-shadow:30px 0 80px rgba(0,0,0,.16); }
.category-drawer.open { transform:translateX(0); }
.category-drawer-backdrop.open { opacity:1; visibility:visible; }
.drawer-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); }
.drawer-top strong { font-size:20px; }
.drawer-close { width:38px; height:38px; border:0; border-radius:50%; background:#f2f6fb; font-size:24px; cursor:pointer; }
.drawer-list { padding-top:18px; }
.drawer-list a { display:flex; justify-content:space-between; align-items:center; padding:16px 4px; border-bottom:1px solid var(--line); color:var(--text); font-weight:800; }
.drawer-list a span:last-child { color:var(--blue); }

.hero-product-image { position:absolute; z-index:4; width:280px; height:420px; left:170px; top:75px; transform:rotate(5deg); border-radius:34px; background:#fff; box-shadow:25px 40px 65px rgba(0,70,160,.24); overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.7); }
.hero-product-image img { width:100%; height:100%; object-fit:contain; padding:28px; background:linear-gradient(145deg,#fff,#edf6ff); }
.hero-product-image .fallback { font-size:42px; font-weight:900; color:var(--blue); letter-spacing:-2px; }
.hero-product-back { position:absolute; width:170px; height:300px; border-radius:30px; background:linear-gradient(145deg,#fff,#d9ecff); left:365px; top:200px; transform:rotate(18deg); box-shadow:20px 30px 50px rgba(0,60,130,.15); z-index:2; }

.category-strip { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.category-pill { display:inline-flex; align-items:center; gap:10px; padding:13px 18px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--text); font-weight:800; font-size:13px; transition:.2s; }
.category-pill:hover { border-color:#b9d7fb; color:var(--blue); transform:translateY(-2px); }
.category-pill .dot { width:8px; height:8px; border-radius:50%; background:var(--blue); }

.store-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin-top:38px; }
.store-product-card { border-radius:25px; overflow:hidden; border:1px solid var(--line); background:#fff; transition:.3s; }
.store-product-card:hover { transform:translateY(-8px); box-shadow:0 25px 70px rgba(0,80,160,.12); }
.store-product-media {
    height: 390px;
    background: radial-gradient(circle, #e7f4ff, #f7fbff);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px;
    position: relative;
    overflow: hidden;
}

.store-product-media img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    object-position: center;
    border-radius: 26px;
    display: block;
    mix-blend-mode: multiply;
    filter: drop-shadow(14px 20px 24px rgba(0,70,170,.13));
    transition: transform .28s ease;
}

.store-product-card:hover .store-product-media img {
    transform: scale(1.025);
}
.store-product-media .no-image { width:120px; height:250px; border-radius:28px; background:linear-gradient(145deg,#0759cf,#26a0ff,#6250ed); box-shadow:18px 25px 40px rgba(0,70,170,.20); }
.store-product-body { padding:28px; }
.store-product-kicker { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.store-product-body h3 { margin:8px 0 10px; font-size:26px; font-weight:900; }
.store-product-body h3 a { color:var(--text); }
.store-product-body p { color:var(--muted); font-size:13px; line-height:1.7; min-height:44px; }
.price-row { display:flex; justify-content:space-between; align-items:end; gap:15px; margin:20px 0; }
.price-main { font-size:25px; font-weight:900; color:var(--text); }
.price-old { margin-left:7px; color:#98a2b3; text-decoration:line-through; font-size:13px; }
.stock-chip { font-size:11px; font-weight:800; border-radius:999px; padding:7px 10px; background:#ecfdf3; color:#027a48; }
.stock-chip.out { background:#fff1f3; color:#c01048; }
.product-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.product-actions form { margin:0; }
.product-actions .btn, .product-actions button { width:100%; border:0; text-transform:none; letter-spacing:0; box-shadow:none; }
.btn-outline { background:#fff !important; color:var(--text) !important; border:1px solid var(--line) !important; }
.btn-dark { background:var(--navy) !important; color:#fff !important; }

.page-top { background:linear-gradient(120deg,#fff 0%,#f7fbff 58%,#e9f4ff 100%); padding:72px 0 58px; border-bottom:1px solid var(--line); }
.breadcrumbs { color:#98a2b3; font-size:12px; margin-bottom:16px; }
.breadcrumbs a { color:#667085; }
.page-top h1 { margin:0 0 16px; font-size:clamp(42px,6vw,72px); line-height:1; letter-spacing:-4px; font-weight:900; }
.page-top p { max-width:700px; color:var(--muted); font-size:16px; line-height:1.8; }

.detail-wrap { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.detail-media-box {
    min-height: 600px;
    border-radius: 30px;
    background: radial-gradient(circle, #e7f4ff, #f7fbff);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px;
    border: 1px solid var(--line);
    position: sticky;
    top: 95px;
    overflow: hidden;
}

.detail-media-box img {
    width: auto;
    height: auto;
    max-width: 86%;
    max-height: 500px;
    object-fit: contain;
    object-position: center;
    border-radius: 30px;
    display: block;
    margin: auto;
    mix-blend-mode: multiply;
    filter: drop-shadow(16px 24px 28px rgba(0,70,170,.14));
}
.detail-info-box .category-label { color:var(--blue); font-weight:800; letter-spacing:2px; font-size:12px; text-transform:uppercase; }
.detail-info-box h1 { font-size:clamp(40px,5vw,62px); line-height:1; letter-spacing:-3px; margin:12px 0 18px; font-weight:900; }
.detail-info-box .lead { color:var(--muted); font-size:16px; line-height:1.8; }
.detail-price { margin:25px 0; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.detail-price .price-main { font-size:34px; }
.detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.detail-actions form { margin:0; }
.detail-actions .btn, .detail-actions button, .detail-actions a { width:100%; text-align:center; border:0; box-shadow:none; text-transform:none; letter-spacing:0; }
.detail-actions .whatsapp-order { grid-column:1/-1; background:#fff !important; color:#137a44 !important; border:1px solid #b7e6ca !important; }
.trust-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:24px 0 34px;
}
.trust-mini {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:86px;
  padding:15px 14px;
  border:1px solid #e4edf7;
  border-radius:20px;
  background:linear-gradient(145deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 10px 30px rgba(24,82,140,.055);
  overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.trust-mini:after {
  content:"";
  position:absolute;
  width:54px;
  height:54px;
  right:-20px;
  bottom:-24px;
  border-radius:50%;
  background:rgba(22,119,255,.06);
}
.trust-mini:hover {
  transform:translateY(-3px);
  border-color:#d3e5fa;
  box-shadow:0 16px 36px rgba(24,82,140,.09);
}
.trust-icon {
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  color:var(--blue);
  background:var(--blue-soft);
  position:relative;
  z-index:1;
}
.trust-icon .material-icons { font-size:21px; }
.trust-copy { min-width:0; position:relative; z-index:1; }
.trust-mini strong {
  display:block;
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  color:#172033;
}
.trust-mini span {
  display:block;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
  margin-top:4px;
}
.product-description { color:#475467; line-height:1.85; }
.product-description h2,.product-description h3 { color:var(--text); font-weight:900; }

.cart-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:30px; align-items:start; }
.surface-card { background:#fff; border:1px solid var(--line); border-radius:25px; padding:28px; }
.cart-item { display:grid; grid-template-columns:100px 1fr 90px 120px 38px; gap:18px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line); }
.cart-item:last-child { border-bottom:0; }
.cart-thumb { width:100px; height:100px; object-fit:contain; background:#f6faff; border-radius:18px; padding:10px; }
.cart-item h3 { font-size:16px; margin:0 0 6px; font-weight:900; }
.cart-item small { color:var(--muted); }
.qty-field { width:78px !important; margin:0 !important; text-align:center; border:1px solid var(--line) !important; border-radius:12px !important; height:42px !important; box-shadow:none !important; }
.remove-x { width:34px; height:34px; border:0; border-radius:50%; background:#adadf6; cursor:pointer; font-size:18px; }
.summary-card { position:sticky; top:95px; }
.summary-line { display:flex; justify-content:space-between; padding:12px 0; color:var(--muted); }
.summary-total { display:flex; justify-content:space-between; padding:20px 0; margin-top:8px; border-top:1px solid var(--line); font-size:19px; font-weight:900; }
.summary-actions { display:grid; gap:10px; }
.summary-actions .btn { width:100%; text-align:center; text-transform:none; box-shadow:none; }
.empty-box { text-align:center; padding:70px 25px; border:1px solid var(--line); border-radius:25px; background:#fff; }
.empty-box h2 { font-weight:900; }
.empty-box p { color:var(--muted); }

.checkout-layout { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:32px; align-items:start; }
.checkout-card h2 { font-size:25px; font-weight:900; margin-top:0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field.full { grid-column:1/-1; }
.field label { display:block; color:#344054; font-weight:800; font-size:12px; margin-bottom:8px; }
.field input,.field textarea,.field select { width:100%; border:1px solid var(--line) !important; border-radius:13px !important; padding:0 14px !important; box-sizing:border-box !important; box-shadow:none !important; background:#fff; }
.field input,.field select { height:48px !important; }
.field textarea { min-height:120px; padding-top:13px !important; resize:vertical; }
.payment-options { display:grid; gap:10px; margin-top:10px; }
.payment-option { display:flex; gap:12px; align-items:center; border:1px solid var(--line); border-radius:14px; padding:15px; cursor:pointer; }
.checkout-summary-item { display:flex; justify-content:space-between; gap:15px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }

.store-footer { background:#061326; color:#fff; padding:70px 0 25px; }
.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:55px; }
.footer-brand { color:#4b9dff; font-size:34px; font-weight:900; letter-spacing:-2px; }
.footer-copy { color:#8496ad; font-size:13px; line-height:1.8; max-width:340px; }
.footer-heading { font-size:13px; font-weight:800; margin-bottom:18px; }
.footer-links a { display:block; color:#8496ad; font-size:12px; margin-bottom:12px; }
.footer-links a:hover { color:#fff; }
.footer-bottom { margin-top:45px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); color:#62748c; font-size:11px; display:flex; justify-content:space-between; gap:20px; }

@media(max-width:992px){
  .mobile-category-trigger{display:flex}.store-nav .brand-logo{font-size:28px}.cart-link .cart-text{display:none}
  .hero-product-image{left:170px}.store-product-grid{grid-template-columns:1fr 1fr}
  .detail-wrap,.checkout-layout{grid-template-columns:1fr}.detail-media-box,.summary-card{position:relative;top:auto}.cart-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:700px){
  body{padding-top:60px}.store-nav{height:60px;line-height:60px}.store-nav .nav-actions{height:60px}.cart-link{margin-top:9px;height:42px}.mobile-category-trigger{margin-top:9px}
  .hero{padding-top:80px}.hero-visual{margin-top:-30px}.hero-product-image{left:130px;top:70px}
  .store-product-grid{grid-template-columns:1fr}.store-product-media{height:330px}.product-actions{grid-template-columns:1fr 1fr}
  .detail-wrap{gap:30px}.detail-media-box{min-height:410px;padding:28px}.detail-actions{grid-template-columns:1fr}.detail-actions .whatsapp-order{grid-column:auto}.trust-grid{grid-template-columns:1fr}
  .cart-item{grid-template-columns:76px 1fr 70px}.cart-thumb{width:76px;height:76px}.cart-item .item-total{grid-column:2}.cart-item .remove-x{grid-column:3;grid-row:2}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.footer-bottom{flex-direction:column}
}

/* layout fallbacks so the theme remains intact even if the CDN is unavailable */
.store-nav .nav-wrapper{display:flex;align-items:center;justify-content:space-between;}
.store-nav .nav-actions{float:none;}
.row{margin-left:-.75rem;margin-right:-.75rem;margin-bottom:20px;}
.row:after{content:"";display:table;clear:both;}
.col{float:left;box-sizing:border-box;padding:0 .75rem;min-height:1px;}
.col.s12{width:100%;}
.btn,.btn-flat{display:inline-block;border:0;text-decoration:none;cursor:pointer;text-align:center;}
.valign-wrapper{display:flex;align-items:center;}
.center-align{text-align:center;}
@media(min-width:601px){.col.m4{width:33.3333%}.col.m6{width:50%}.col.m8{width:66.6667%}}
@media(min-width:993px){.col.l3{width:25%}.col.l5{width:41.6667%}.col.l6{width:50%}.col.l7{width:58.3333%}}
@media(max-width:600px){.valign-wrapper{display:block}.store-nav .brand-logo{font-size:25px;letter-spacing:-1.5px}.hero-product-image{left:110px;width:250px;height:360px}.hero-product-back{left:300px;top:170px}.floating-tag.two{right:-10px}}


/* V5 additions */
.mobile-category-trigger{flex-direction:column;padding:0;gap:4px}
.mobile-category-trigger span{display:block;width:19px;height:2px;background:#101828;margin:0!important;border-radius:99px;transition:.22s ease}
.mobile-category-trigger.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-category-trigger.active span:nth-child(2){opacity:0}
.mobile-category-trigger.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer-section-title{font-size:10px;font-weight:900;letter-spacing:1.8px;color:#98a2b3;margin:24px 0 8px}
.drawer-other-title{margin-top:30px}
.drawer-empty{padding:14px 0;color:#667085}
.content-page-card{max-width:920px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:26px;padding:42px;box-shadow:0 20px 60px rgba(16,24,40,.06)}
.rich-content{font-size:16px;line-height:1.85;color:#475467}
.rich-content h1,.rich-content h2,.rich-content h3,.rich-content h4{color:#101828;font-weight:900;letter-spacing:-1px;line-height:1.18;margin:34px 0 14px}
.rich-content h2{font-size:32px}.rich-content h3{font-size:24px}
.rich-content p{margin:0 0 18px}.rich-content ul,.rich-content ol{padding-left:24px;margin:0 0 22px}.rich-content li{margin-bottom:8px}
.rich-content img{max-width:100%;height:auto;border-radius:18px}.rich-content a{color:var(--blue);font-weight:700}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;transition:.25s ease}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 24px 70px rgba(0,80,160,.10)}
.blog-card-media{display:block;height:260px;background:linear-gradient(145deg,#f7fbff,#e4f2ff);overflow:hidden}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block}.blog-placeholder{height:100%;display:flex;align-items:center;justify-content:center;font-size:54px;font-weight:900;color:#d6e9ff}
.blog-card-body{padding:28px}.blog-card-body h2{font-size:25px;line-height:1.2;font-weight:900;letter-spacing:-.7px;margin:8px 0 12px}.blog-card-body h2 a{color:#101828}.blog-card-body p{color:#667085;line-height:1.7;margin-bottom:18px}.text-link{color:var(--blue);font-weight:800}
.blog-hero h1{max-width:900px}.blog-date{margin-top:16px;color:#98a2b3;font-size:13px;font-weight:700}.article-cover{max-width:920px;margin:0 auto 28px;border-radius:26px;overflow:hidden;border:1px solid var(--line)}.article-cover img{display:block;width:100%;max-height:520px;object-fit:cover}
@media(max-width:700px){.content-page-card{padding:24px;border-radius:20px}.blog-grid{grid-template-columns:1fr}.blog-card-media{height:220px}}


/* =========================================================
   CHECKOUT V5.5
   ========================================================= */

.checkout-page {
    background:
        radial-gradient(circle at 85% 18%, rgba(22,119,255,.08), transparent 26%),
        #f7faff;
}

.checkout-hero {
    padding: 125px 0 42px;
    background:
        radial-gradient(circle at 82% 30%, rgba(22,119,255,.13), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    border-bottom: 1px solid #e8eef7;
}

.checkout-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.checkout-hero h1 {
    margin: 7px 0 12px;
    font-size: clamp(40px, 5vw, 66px);
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 900;
    color: #0b1628;
}

.checkout-hero p {
    max-width: 620px;
    margin: 0;
    color: #667085;
    font-size: 17px;
    line-height: 1.7;
}

.checkout-steps {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.checkout-step {
    min-width: 82px;
    padding: 13px 14px;
    border: 1px solid #dfe8f4;
    border-radius: 18px;
    background: rgba(255,255,255,.8);
    text-align: center;
}

.checkout-step span {
    width: 30px;
    height: 30px;
    margin: 0 auto 6px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef4fb;
    color: #738094;
    font-size: 12px;
    font-weight: 900;
}

.checkout-step small {
    display: block;
    color: #7b8798;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.checkout-step.done span,
.checkout-step.active span {
    background: #1677ff;
    color: #fff;
}

.checkout-step.active {
    border-color: rgba(22,119,255,.35);
    box-shadow: 0 12px 34px rgba(22,119,255,.11);
}

.checkout-step.active small {
    color: #1677ff;
}

.checkout-section {
    padding: 54px 0 90px;
}

.checkout-modern-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: start;
    gap: 28px;
}

.checkout-form-card,
.checkout-summary-card {
    background: rgba(255,255,255,.94);
    border: 1px solid #e5ecf5;
    border-radius: 28px;
    box-shadow: 0 22px 65px rgba(16,24,40,.07);
}

.checkout-form-card {
    padding: 34px;
}

.checkout-summary-card {
    position: sticky;
    top: 100px;
    padding: 28px;
}

.checkout-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 28px;
}

.checkout-heading-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #edf5ff;
    color: #1677ff;
}

.checkout-heading-icon i {
    font-size: 23px;
}

.checkout-card-heading > div:last-child > span {
    display: block;
    margin-bottom: 3px;
    color: #1677ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.checkout-card-heading h2 {
    margin: 0 0 5px;
    color: #101828;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -1px;
}

.checkout-card-heading p {
    margin: 0;
    color: #7a8698;
    font-size: 14px;
    line-height: 1.55;
}

.checkout-error-box {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    margin: 0 0 24px;
    border: 1px solid #ffd6df;
    border-radius: 16px;
    background: #fff5f7;
    color: #b4234d;
}

.checkout-error-box > i {
    margin-top: 1px;
}

.checkout-error-box strong,
.checkout-error-box span {
    display: block;
}

.checkout-error-box strong {
    margin-bottom: 4px;
}

.checkout-error-box span {
    font-size: 13px;
    line-height: 1.45;
}

.checkout-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.checkout-field {
    display: block;
}

.checkout-field.full {
    grid-column: 1 / -1;
}

.checkout-field > span {
    display: block;
    margin: 0 0 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
}

.checkout-input-wrap {
    min-height: 56px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #dfe7f1;
    border-radius: 15px;
    background: #fbfdff;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.checkout-input-wrap:focus-within {
    border-color: #1677ff;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(22,119,255,.09);
}

.checkout-input-wrap > i {
    flex: 0 0 auto;
    color: #91a0b4;
    font-size: 20px;
}

.checkout-input-wrap:focus-within > i {
    color: #1677ff;
}

.checkout-input-wrap input,
.checkout-input-wrap textarea {
    width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #101828 !important;
    font-family: inherit;
    font-size: 15px !important;
}

.checkout-input-wrap textarea {
    min-height: 116px !important;
    padding: 17px 0 !important;
    resize: vertical;
    line-height: 1.55;
}

.checkout-input-wrap.textarea {
    align-items: flex-start;
}

.checkout-input-wrap.textarea > i {
    margin-top: 17px;
}

.checkout-input-wrap input::placeholder,
.checkout-input-wrap textarea::placeholder {
    color: #a2adbb;
}

.checkout-divider {
    height: 1px;
    margin: 34px 0;
    background: #edf1f6;
}

.payment-heading {
    margin-bottom: 18px;
}

.checkout-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.checkout-payment-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.checkout-payment-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-payment-content {
    min-height: 100px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #dfe7f1;
    border-radius: 18px;
    background: #fbfdff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.checkout-payment-card:hover .checkout-payment-content {
    transform: translateY(-2px);
    border-color: #cbd8e8;
}

.checkout-payment-card > input:checked + .checkout-payment-content {
    border-color: #1677ff;
    background: #f4f9ff;
    box-shadow: 0 10px 30px rgba(22,119,255,.10);
}

.payment-icon {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #fff;
    color: #1677ff;
    box-shadow: 0 6px 18px rgba(16,24,40,.06);
}

.payment-icon i {
    font-size: 21px;
}

.payment-copy {
    min-width: 0;
    flex: 1;
}

.payment-copy strong,
.payment-copy small {
    display: block;
}

.payment-copy strong {
    margin-bottom: 4px;
    color: #182230;
    font-size: 14px;
    font-weight: 900;
}

.payment-copy small {
    color: #7a8698;
    font-size: 12px;
}

.payment-check {
    width: 25px;
    height: 25px;
    border: 1px solid #d7e0eb;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: transparent;
    background: #fff;
}

.payment-check i {
    font-size: 16px;
}

.checkout-payment-card > input:checked + .checkout-payment-content .payment-check {
    border-color: #1677ff;
    background: #1677ff;
    color: #fff;
}

.checkout-submit-row {
    margin-top: 30px;
}

.checkout-security-note {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #718096;
    font-size: 12px;
}

.checkout-security-note i {
    color: #32a46f;
    font-size: 18px;
}

.checkout-submit-button {
    width: 100%;
    min-height: 62px;
    padding: 0 20px;
    border: 0;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px;
    background: #1677ff;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 18px 40px rgba(22,119,255,.24);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.checkout-submit-button:hover {
    transform: translateY(-2px);
    background: #0c68e8;
    box-shadow: 0 22px 46px rgba(22,119,255,.28);
}

.checkout-submit-button span {
    text-align: left;
    font-size: 15px;
    font-weight: 900;
}

.checkout-submit-button strong {
    font-size: 15px;
}

.checkout-submit-button i {
    font-size: 20px;
}

.checkout-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.checkout-summary-head .section-label {
    margin-bottom: 5px;
}

.checkout-summary-head h2 {
    margin: 0;
    color: #101828;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -1px;
}

.checkout-summary-head > a {
    padding-top: 5px;
    color: #1677ff;
    font-size: 12px;
    font-weight: 800;
}

.checkout-order-products {
    display: grid;
    gap: 16px;
}

.checkout-order-product {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.checkout-order-image {
    width: 58px;
    height: 58px;
    position: relative;
    border: 1px solid #e2e9f2;
    border-radius: 15px;
    overflow: visible;
    background: #f6f9fd;
}

.checkout-order-image img,
.checkout-order-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: contain;
}

.checkout-order-placeholder {
    display: grid;
    place-items: center;
    color: #9aa8b9;
}

.checkout-order-image > span {
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    position: absolute;
    top: -7px;
    right: -7px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: #101828;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.checkout-order-copy {
    min-width: 0;
}

.checkout-order-copy strong,
.checkout-order-copy small {
    display: block;
}

.checkout-order-copy strong {
    overflow: hidden;
    color: #182230;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-order-copy small {
    margin-top: 4px;
    color: #8995a6;
    font-size: 11px;
}

.checkout-order-price {
    color: #101828;
    font-size: 13px;
    white-space: nowrap;
}

.checkout-summary-lines {
    margin-top: 24px;
    padding: 20px 0;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
    display: grid;
    gap: 12px;
}

.checkout-summary-lines > div,
.checkout-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.checkout-summary-lines span {
    color: #7b8798;
    font-size: 13px;
}

.checkout-summary-lines strong {
    color: #344054;
    font-size: 13px;
}

.checkout-summary-total {
    padding: 22px 0 4px;
}

.checkout-summary-total span {
    color: #344054;
    font-size: 14px;
    font-weight: 800;
}

.checkout-summary-total strong {
    color: #1677ff;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -1px;
}

.checkout-summary-trust {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #edf1f6;
    display: grid;
    gap: 10px;
}

.checkout-summary-trust > div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #718096;
    font-size: 12px;
}

.checkout-summary-trust i {
    color: #1677ff;
    font-size: 18px;
}

@media (max-width: 980px) {
    .checkout-modern-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary-card {
        position: static;
        order: -1;
    }

    .checkout-hero-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .checkout-hero {
        padding: 104px 0 28px;
    }

    .checkout-hero h1 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .checkout-hero p {
        font-size: 15px;
    }

    .checkout-steps {
        width: 100%;
    }

    .checkout-step {
        min-width: 0;
        flex: 1;
        padding: 10px 7px;
    }

    .checkout-section {
        padding: 28px 0 58px;
    }

    .checkout-form-card,
    .checkout-summary-card {
        border-radius: 22px;
    }

    .checkout-form-card {
        padding: 22px 18px;
    }

    .checkout-summary-card {
        padding: 22px 18px;
    }

    .checkout-fields,
    .checkout-payment-grid {
        grid-template-columns: 1fr;
    }

    .checkout-field.full {
        grid-column: auto;
    }

    .checkout-card-heading h2 {
        font-size: 22px;
    }

    .checkout-submit-button {
        grid-template-columns: 1fr auto;
    }

    .checkout-submit-button i {
        display: none;
    }

    .checkout-order-product {
        grid-template-columns: 52px minmax(0, 1fr) auto;
    }

    .checkout-order-image {
        width: 52px;
        height: 52px;
    }
}


/* =========================================================
   CHECKOUT PAYMENT SECTION V5.5.1
   ========================================================= */

.checkout-payment-section {
    padding: 4px 0 0;
}

.checkout-payment-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}

.checkout-payment-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #1677ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.checkout-payment-section-head h2 {
    margin: 0;
    color: #101828;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -1px;
}

.checkout-payment-badge {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #dce9f8;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    background: #f6faff;
    color: #1677ff;
    font-size: 11px;
    font-weight: 800;
}

.checkout-payment-badge i {
    font-size: 17px;
}

.checkout-payment-description {
    max-width: 620px;
    margin: 0 0 20px;
    color: #7a8698;
    font-size: 13px;
    line-height: 1.65;
}

@media (max-width: 700px) {
    .checkout-payment-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .checkout-payment-badge {
        min-height: 34px;
    }

    .checkout-payment-section-head h2 {
        font-size: 22px;
    }
}


/* =========================================================
   HOME SEO CONTENT
   ========================================================= */

.home-seo-section {
    padding-top: 28px;
    padding-bottom: 84px;
    background: #fff;
}

.home-seo-shell {
    max-width: 1040px;
    margin: 0 auto;
    padding: 38px 42px;
    border: 1px solid #e9eef5;
    border-radius: 24px;
    background: #fbfdff;
}

.home-seo-heading {
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid #e8eef6;
}

.home-seo-heading .section-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.home-seo-content {
    color: #526071;
    font-size: 15px;
    line-height: 1.9;
}

.home-seo-content h2,
.home-seo-content h3,
.home-seo-content h4 {
    color: #101828;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -.5px;
}

.home-seo-content h2 {
    margin: 36px 0 14px;
    font-size: 25px;
}

.home-seo-content h3 {
    margin: 30px 0 12px;
    font-size: 20px;
}

.home-seo-content h4 {
    margin: 24px 0 10px;
    font-size: 17px;
}

.home-seo-content h2:first-child,
.home-seo-content h3:first-child,
.home-seo-content h4:first-child {
    margin-top: 0;
}

.home-seo-content p {
    margin: 0 0 18px;
}

.home-seo-content ul,
.home-seo-content ol {
    margin: 12px 0 22px 22px;
}

.home-seo-content li {
    margin-bottom: 8px;
}

.home-seo-content strong {
    color: #263445;
    font-weight: 800;
}

.home-seo-content a {
    color: #1677ff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-seo-content blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    border-left: 4px solid #1677ff;
    border-radius: 0 14px 14px 0;
    background: #f2f7ff;
    color: #344054;
}

@media (max-width: 700px) {
    .home-seo-section {
        padding-top: 12px;
        padding-bottom: 54px;
    }

    .home-seo-shell {
        padding: 26px 20px;
        border-radius: 18px;
    }

    .home-seo-heading {
        padding-bottom: 18px;
        margin-bottom: 22px;
    }

    .home-seo-content {
        font-size: 14px;
        line-height: 1.82;
    }

    .home-seo-content h2 {
        font-size: 22px;
    }

    .home-seo-content h3 {
        font-size: 18px;
    }
}




/* =========================================================
   PRODUCT IMAGE FIX — SQUARE SOURCE IMAGES
   ========================================================= */

@media (max-width: 700px) {
    .store-product-media {
        height: 330px !important;
        padding: 24px !important;
    }

    .store-product-media img {
        width: 88% !important;
        height: 88% !important;
        border-radius: 22px !important;
    }

    .detail-media-box {
        min-height: 410px !important;
        padding: 30px !important;
    }

    .detail-media-box img {
        max-width: 90% !important;
        max-height: 350px !important;
        border-radius: 24px !important;
    }
}
@media (max-width: 700px) {
    .store-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .store-product-card {
        border-radius: 18px !important;
    }

    .store-product-media {
        height: 190px !important;
        min-height: 190px !important;
        padding: 14px !important;
    }

    .store-product-media img {
        max-width: 100% !important;
        max-height: 160px !important;
    }

    .store-product-body {
        padding: 16px !important;
    }

    .store-product-body h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    .store-product-body p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .price-main {
        font-size: 18px !important;
    }

    .product-actions {
        gap: 7px !important;
    }

    .product-actions .btn {
        padding: 0 10px !important;
        font-size: 11px !important;
    }
}

.product-image-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #dce7f3;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 25px rgba(15, 23, 42, .06),
        inset 0 0 0 1px rgba(255,255,255,.8);
    transition: .25s ease;
}

.product-image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
    display: block;
}

.product-image-box:hover {
    border-color: #b7d4f5;
    box-shadow:
        0 14px 35px rgba(15, 23, 42, .10),
        0 0 0 4px rgba(22,119,255,.05);
    transform: translateY(-3px);
}

@media (max-width: 700px) {
    .product-image-box {
        padding: 8px;
        border-radius: 16px;
    }

    .product-image-box img {
        border-radius: 11px;
    }
}

/* MASAÜSTÜ - 4 ÜRÜN */
.store-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px;
}

/* TABLET - 3 ÜRÜN */
@media (max-width: 1100px) {
    .store-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px;
    }
}

/* MOBİL - 2 ÜRÜN */
@media (max-width: 700px) {
    .store-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-static-link {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 13px;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    transition: .2s ease;
}

.nav-static-link:hover {
    color: #1677ff;
    background: #f1f7ff;
}
.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    height: 44px;
    padding: 0 10px 0 15px;

    background: #ffffff !important;
    color: #1677ff !important;

    border: 1px solid rgba(22, 119, 255, .15);
    border-radius: 14px;

    box-shadow: 0 7px 20px rgba(15, 23, 42, .08);

    text-decoration: none;
    transition: all .25s ease;
}

.cart-link:hover {
    background: #f7fbff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, .12);
}

.cart-icon {
    font-size: 18px;
    line-height: 1;
}

.cart-text {
    color: #101828 !important;
    font-size: 14px;
    font-weight: 700;
}

.cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 25px;
    height: 25px;
    padding: 0 7px;

    background: #1677ff !important;
    color: #ffffff !important;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    box-shadow: 0 4px 10px rgba(22, 119, 255, .25);
}

/* Mobilde statik header linklerini gizle */
@media (max-width: 700px) {
    .nav-static-link {
        display: none !important;
    }
}
@media (max-width: 992px) {

    .category-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;

        height: 100dvh !important;
        max-height: 100dvh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;

        padding-bottom: 50px !important;
    }

    .drawer-top {
        position: sticky !important;
        top: 0 !important;
        z-index: 20;

        background: #fff;
    }

}

.category-drawer::-webkit-scrollbar {
    width: 4px;
}

.category-drawer::-webkit-scrollbar-track {
    background: transparent;
}

.category-drawer::-webkit-scrollbar-thumb {
    background: rgba(22, 119, 255, .32);
    border-radius: 999px;
}

.category-drawer::-webkit-scrollbar-thumb:hover {
    background: rgba(22, 119, 255, .65);
}


/* ==========================================
   MOBILE DRAWER TABS
========================================== */

.drawer-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 5px;

    margin: 14px 18px 18px;
    padding: 5px;

    background: #f2f6fb;

    border: 1px solid #e5edf6;
    border-radius: 15px;
}

.drawer-tab {
    appearance: none;
    border: 0;

    height: 44px;

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

    background: transparent;

    color: #667085;

    border-radius: 11px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

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

.drawer-tab.active {
    background: #ffffff;
    color: #1677ff;

    box-shadow:
        0 4px 14px rgba(15, 23, 42, .08),
        0 1px 2px rgba(15, 23, 42, .04);
}

.drawer-tab:active {
    transform: scale(.98);
}


/* TAB İÇERİKLERİ */

.drawer-tab-panel {
    display: none;
    animation: drawerTabFade .22s ease;
}

.drawer-tab-panel.active {
    display: block;
}

@keyframes drawerTabFade {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

}


/* MENÜ OKLARI */

.drawer-arrow {
    color: #98a2b3;
    transition: .2s ease;
}

.drawer-list a:hover .drawer-arrow {
    color: #1677ff;
    transform: translateX(3px);
}


/* SEPET SAYISI */

.drawer-cart-count {
    min-width: 25px;
    height: 25px;

    padding: 0 7px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #edf5ff;
    color: #1677ff;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 800;
}

 /* Hero görseli kaldırıldığı için alanı kompaktlaştır */
        .hero {
            min-height: auto !important;
            padding-bottom: 70px !important;
        }

        .hero .row {
            margin-bottom: 0 !important;
        }

        .hero-content {
            max-width: 860px;
            padding-bottom: 20px;
        }

        /* Mobil hamburger menü: çok kategori olduğunda kaydırılabilir */
        .sidenav {
            height: 100vh !important;
            max-height: 100vh !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding-bottom: 40px !important;
        }

        @media (max-width: 992px) {
            .hero {
                padding-bottom: 45px !important;
            }

            .hero-content {
                width: 100% !important;
                max-width: 100% !important;
            }
        }

/* Kategori ürün butonları düzeltme */
.product-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

.product-actions > a,
.product-actions > form {
    width: 100% !important;
    grid-column: 1 / -1 !important;
}

.product-actions .btn,
.product-actions button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 20px !important;
    white-space: nowrap !important;
    text-align: center !important;
    overflow: visible !important;
}