/*
Theme Name: AYLA Digital Printing V5.5.46
Author: AYLA Digital Printing
Description: Tema ringan, mobile-first, tanpa ketergantungan page builder.
Version: 5.5.46.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ayla-digital-printing-v544
*/

/* =========================================================
   AYLA DIGITAL PRINTING V5
   Base styling preserved from the working V4 theme.
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
    --g: #16b879;
    --gd: #087a53;
    --g-dark: #0b6b4a;
    --g-soft: #eaf8f2;
    --g-pale: #f4fbf8;

    --ink: #101828;
    --ink-soft: #344054;
    --muted: #667085;
    --muted-light: #98a2b3;

    --bg: #ffffff;
    --bg-soft: #f7fbf9;

    --border: #e5e7eb;
    --border-soft: #edf0f2;

    --white: #ffffff;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --shadow-sm: 0 4px 14px rgba(16, 24, 40, .05);
    --shadow-md: 0 10px 30px rgba(16, 24, 40, .08);
    --shadow-lg: 0 18px 50px rgba(16, 24, 40, .10);

    --container: 1120px;

    --transition: 180ms ease;
}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;

    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;

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

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}


/* =========================================================
   3. GLOBAL TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -.025em;
}

p {
    color: var(--muted);
}

strong {
    color: var(--ink);
}


/* =========================================================
   4. CONTAINER
   ========================================================= */

.container {
    width: min(
        var(--container),
        calc(100% - 32px)
    );

    margin-inline: auto;
}


/* =========================================================
   5. HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

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

    border-bottom: 1px solid rgba(229, 231, 235, .85);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.header-inner {
    min-height: 74px;

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

    gap: 24px;
}


/* Brand */

.brand {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    font-weight: 800;
}

.brand-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex: 0 0 42px;

    border-radius: 12px;

    background: var(--g);
    color: var(--white);

    font-size: 21px;
    font-weight: 800;

    box-shadow: 0 6px 16px rgba(22, 184, 121, .18);
}

.brand-text {
    line-height: 1.2;
}

.brand-text small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 500;
}


/* Navigation */

.nav {
    display: flex;
    align-items: center;

    gap: 22px;

    font-size: 14px;
    font-weight: 700;
}

.nav a {
    position: relative;

    padding: 8px 0;

    color: var(--ink-soft);

    transition:
        color var(--transition);
}

.nav a:hover {
    color: var(--g);
}


/* Navigation CTA */

.nav-cta {
    padding: 10px 16px !important;

    border-radius: 12px;

    background: var(--g);
    color: var(--white) !important;

    box-shadow: 0 5px 15px rgba(22, 184, 121, .16);

    transition:
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.nav-cta:hover {
    background: var(--gd);

    color: var(--white) !important;

    transform: translateY(-1px);

    box-shadow: 0 8px 20px rgba(22, 184, 121, .22);
}


/* Mobile menu button */

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--white);
    color: var(--ink);

    font-size: 21px;

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


/* =========================================================
   6. HERO FOUNDATION
   ========================================================= */

.hero {
    position: relative;

    padding: 72px 0 76px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(22, 184, 121, .08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f1fff9 0%,
            #ffffff 65%
        );

    overflow: hidden;
}

.hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    align-items: center;

    gap: 56px;
}


/* Hero eyebrow */

.eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    border: 1px solid #d9eee5;
    border-radius: 999px;

    background: var(--white);
    color: var(--gd);

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

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

.eyebrow::before {
    content: "";

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: var(--g);

    box-shadow: 0 0 0 4px rgba(22, 184, 121, .10);
}


/* Hero heading */

.hero h1 {
    max-width: 720px;

    margin: 20px 0 18px;

    font-size: clamp(
        42px,
        6vw,
        68px
    );

    line-height: 1.03;

    letter-spacing: -.045em;
}

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

.hero p {
    max-width: 620px;

    margin: 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.7;
}


/* Hero buttons */

.actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.btn {
    min-height: 48px;

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

    gap: 8px;

    padding: 12px 20px;

    border: 1px solid var(--ink);
    border-radius: 13px;

    background: var(--white);
    color: var(--ink);

    font-size: 14px;
    font-weight: 750;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.btn:hover {
    transform: translateY(-2px);

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

.btn-primary {
    border-color: var(--g);

    background: var(--g);
    color: var(--white);

    box-shadow: 0 7px 18px rgba(22, 184, 121, .18);
}

.btn-primary:hover {
    border-color: var(--gd);

    background: var(--gd);
    color: var(--white);
}

.btn-secondary {
    border-color: var(--border);

    background: var(--white);
}


/* Hero media */

.hero-media {
    min-height: 390px;

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

    overflow: hidden;

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

    background: var(--g-soft);

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

.hero-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.placeholder-media {
    padding: 40px;

    text-align: center;

    color: var(--muted);
}


/* =========================================================
   7. SECTIONS
   ========================================================= */

.section {
    padding: 72px 0;
}

.section-alt {
    background: var(--bg-soft);
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 30px;
}

.section-head > div {
    min-width: 0;
}

.section h2 {
    margin: 0;

    font-size: clamp(
        28px,
        4vw,
        36px
    );

    line-height: 1.15;
}

.section-head p {
    margin: 7px 0 0;

    color: var(--muted);
}


/* =========================================================
   8. GENERIC GRID & CARD
   ========================================================= */

.grid {
    display: grid;

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

    gap: 18px;
}

.card {
    overflow: hidden;

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

    background: var(--white);

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

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.card:hover {
    transform: translateY(-4px);

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

.card-body {
    padding: 18px;
}

.card h3 {
    margin: 0 0 6px;

    font-size: 18px;
    line-height: 1.35;
}

.price {
    color: var(--gd);

    font-weight: 800;
}

.badge {
    display: inline-flex;

    margin-bottom: 10px;

    padding: 5px 9px;

    border-radius: 999px;

    background: #e9fff6;
    color: var(--gd);

    font-size: 11px;
    font-weight: 750;
}

.card-actions {
    margin-top: 14px;
}

.card-actions .btn {
    width: 100%;
}


/* =========================================================
   9. FEATURES
   ========================================================= */

.features {
    display: grid;

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

    gap: 18px;
}

.feature {
    padding: 24px;

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

    background: var(--white);

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

.feature-icon {
    font-size: 25px;
}

.feature h3 {
    margin: 11px 0 5px;

    font-size: 18px;
}

.feature p {
    margin: 0;

    color: var(--muted);
}


/* =========================================================
   10. PAGE TITLE
   ========================================================= */

.page-title {
    padding: 58px 0 30px;

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

.page-title h1 {
    margin: 0 0 8px;

    font-size: clamp(
        34px,
        5vw,
        46px
    );

    line-height: 1.1;
}

.page-title p {
    margin: 0;

    color: var(--muted);
}


/* =========================================================
   11. CONTENT & FORMS
   ========================================================= */

.content {
    padding: 42px 0 80px;
}

.form-card {
    max-width: 760px;

    margin-inline: auto;

    padding: 28px;

    border: 1px solid var(--border);
    border-radius: 20px;

    background: var(--white);

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

.notice {
    padding: 14px 16px;

    border: 1px solid #c9f1df;
    border-radius: 12px;

    background: #f2fdf8;
    color: var(--gd);
}


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

.site-footer {
    margin-top: 40px;

    padding: 54px 0 25px;

    background: #0f172a;
    color: #dbe4ee;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        1.4fr 1fr 1fr;

    gap: 32px;
}

.site-footer h3 {
    margin: 0 0 12px;

    color: var(--white);
}

.site-footer p {
    color: #aab6c4;
}

.footer-bottom {
    margin-top: 34px;
    padding-top: 18px;

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

    color: #9aa8b7;

    font-size: 13px;
}


/* =========================================================
   13. FLOATING WHATSAPP
   ========================================================= */

.floating-wa {
    position: fixed;

    right: 18px;
    bottom: 18px;

    z-index: 1200;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #25d366;
    color: var(--white);

    font-size: 27px;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .18);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.floating-wa:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 32px rgba(0, 0, 0, .22);
}


/* =========================================================
   14. WOOCOMMERCE — BASIC FOUNDATION
   ========================================================= */

.woocommerce ul.products {
    display: grid !important;

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

    gap: 22px !important;

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

.woocommerce ul.products li.product {
    width: auto !important;

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

    overflow: hidden;

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

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

    background: var(--white);

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

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);

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

.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 250px !important;

    margin: 0 0 18px !important;

    object-fit: cover !important;

    border-radius: 0 !important;
}

.woocommerce ul.products li.product
.woocommerce-loop-product__title {
    margin: 0 0 8px !important;
    padding: 0 18px !important;

    color: var(--ink) !important;

    font-size: 18px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
}

.woocommerce ul.products li.product .price {
    display: block !important;

    margin: 10px 0 18px !important;
    padding: 0 18px !important;

    color: var(--gd) !important;

    font-size: 17px !important;
    font-weight: 800 !important;
}

.woocommerce ul.products li.product .price del {
    margin-right: 5px;

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

    font-size: 13px !important;
}

.woocommerce ul.products li.product .button {
    display: block !important;

    margin: 0 18px 20px !important;

    padding: 12px 18px !important;

    border: 1px solid var(--g) !important;
    border-radius: 11px !important;

    background: var(--g) !important;
    color: var(--white) !important;

    text-align: center !important;

    font-weight: 750 !important;

    transition:
        background var(--transition),
        transform var(--transition);
}

.woocommerce ul.products li.product .button:hover {
    background: var(--gd) !important;

    transform: translateY(-1px);
}


/* WooCommerce sale label */

.woocommerce span.onsale {
    top: 12px !important;
    left: 12px !important;
    right: auto !important;

    min-width: auto !important;
    min-height: auto !important;

    margin: 0 !important;

    padding: 7px 11px !important;

    border-radius: 999px !important;

    background: var(--g) !important;
    color: var(--white) !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
}


/* =========================================================
   15. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .hero-grid {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .hero-media {
        min-height: 320px;
    }

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

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

    .woocommerce ul.products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 18px !important;
    }

    .woocommerce ul.products li.product img {
        height: 220px !important;
    }

    .nav {
        display: none;

        position: absolute;

        left: 16px;
        right: 16px;
        top: 70px;

        flex-direction: column;
        align-items: stretch;

        gap: 2px;

        padding: 12px;

        border: 1px solid var(--border);
        border-radius: 16px;

        background: var(--white);

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

    .nav.open {
        display: flex;
    }

    .nav a {
        padding: 11px 10px;
    }

    .menu-toggle {
        display: inline-flex;
    }
}


/* =========================================================
   16. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .container {
        width: min(
            100% - 24px,
            var(--container)
        );
    }

    .header-inner {
        min-height: 68px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .brand-text {
        font-size: 14px;
    }

    .brand-text small {
        font-size: 10px;
    }


    /* Hero */

    .hero {
        padding: 48px 0 44px;
    }

    .hero-grid {
        gap: 30px;
    }

    .hero h1 {
        margin: 18px 0 14px;

        font-size: clamp(
            38px,
            12vw,
            48px
        );

        letter-spacing: -.04em;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.65;
    }

    .actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 22px;
    }

    .btn {
        width: 100%;
    }

    .hero-media {
        min-height: 270px;

        border-radius: 20px;
    }


    /* Sections */

    .section {
        padding: 52px 0;
    }

    .section-head {
        display: block;

        margin-bottom: 22px;
    }

    .section h2 {
        font-size: 28px;
    }


    /* Generic cards */

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

        gap: 12px;
    }

    .card {
        border-radius: 15px;
    }

    .card-body {
        padding: 14px;
    }


    /* Features */

    .features {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .feature {
        padding: 20px;

        border-radius: 16px;
    }


    /* Page title */

    .page-title {
        padding: 42px 0 24px;
    }

    .page-title h1 {
        font-size: 34px;
    }


    /* Content */

    .content {
        padding: 34px 0 60px;
    }

    .form-card {
        padding: 20px;

        border-radius: 16px;
    }


    /* WooCommerce */

    .woocommerce ul.products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }

    .woocommerce ul.products li.product img {
        height: 170px !important;

        margin-bottom: 14px !important;
    }

    .woocommerce ul.products li.product
    .woocommerce-loop-product__title {
        padding: 0 12px !important;

        font-size: 15px !important;
    }

    .woocommerce ul.products li.product .price {
        padding: 0 12px !important;

        font-size: 14px !important;
    }

    .woocommerce ul.products li.product .button {
        margin: 0 12px 14px !important;

        padding: 10px 8px !important;

        font-size: 13px !important;
    }


    /* Floating WhatsApp */

    .floating-wa {
        right: 14px;
        bottom: 14px;

        width: 54px;
        height: 54px;

        font-size: 25px;
    }
}


/* =========================================================
   17. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .container {
        width: min(
            100% - 20px,
            var(--container)
        );
    }

    .brand-text small {
        display: none;
    }

    .hero h1 {
        font-size: 36px;
    }

    .grid {
        gap: 10px;
    }

    .woocommerce ul.products {
        gap: 10px !important;
    }

    .woocommerce ul.products li.product img {
        height: 145px !important;
    }
}
/* =========================================================
   AYLA PRODUCT CARDS — TAHAP 2
   ========================================================= */


/* Section */

.ayla-products-section {
    width: 100%;
    padding: 70px 0 80px;
}

.ayla-products-heading {
    margin-bottom: 32px;
}

.ayla-products-heading h1 {
    margin: 0 0 8px;

    color: var(--ink);

    font-size: clamp(30px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.035em;
}

.ayla-products-heading h1 span {
    color: var(--g);
}

.ayla-products-heading p {
    margin: 0;

    color: var(--muted);

    font-size: 16px;
}


/* Product grid */

.ayla-products-grid {
    display: grid;

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

    gap: 22px;

    align-items: stretch;
}


/* Product card */

.ayla-product-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid #242424;
    border-radius: 20px;

    background: #151515;

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

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ayla-product-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 16px 36px rgba(16, 24, 40, .14);
}


/* Product image */

.ayla-product-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1.35 / 1;

    overflow: hidden;

    background: #eeeeee;
}

.ayla-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 350ms ease;
}

.ayla-product-card:hover .ayla-product-image img {
    transform: scale(1.035);
}


/* No image */

.ayla-no-image {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    padding: 20px;

    background: #eeeeee;

    color: var(--muted);

    text-align: center;

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


/* Badge */

.ayla-product-badge {
    position: absolute;

    top: 14px;
    left: 14px;

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

    min-height: 38px;

    padding: 7px 18px;

    border-radius: 999px;

    background: var(--g);
    color: var(--white);

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 6px 16px rgba(22, 184, 121, .22);
}


/* Product body */

.ayla-product-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 22px 20px 20px;

    background: #151515;
    color: #ffffff;
}


/* Category */

.ayla-product-category {
    margin-bottom: 9px;

    color: #20c987;

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

    text-transform: uppercase;
    letter-spacing: .04em;
}


/* Product title */

.ayla-product-body h2 {
    margin: 0;

    color: #ffffff;

    font-size: 25px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.025em;
}


/* Description */

.ayla-product-body p {
    margin: 12px 0 0;

    color: #a9a9a9;

    font-size: 15px;
    line-height: 1.55;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}


/* Price */

.ayla-product-price-label {
    margin-top: 20px;

    color: #898989;

    font-size: 13px;
}

.ayla-product-price {
    margin-top: 3px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
}

.ayla-product-price del {
    color: #777777;
}

.ayla-product-price ins {
    color: #ffffff;

    text-decoration: none;
}


/* Actions */

.ayla-product-actions {
    display: grid;

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

    gap: 9px;

    margin-top: auto;
    padding-top: 20px;
}


/* Buttons */

.ayla-product-actions a {
    min-width: 0;
    min-height: 46px;

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

    padding: 10px 11px;

    border-radius: 12px;

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

    text-align: center;

    white-space: nowrap;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}


/* Detail */

.ayla-detail-button {
    border: 1px solid #555555;

    background: transparent;
    color: #ffffff;
}

.ayla-detail-button:hover {
    border-color: #777777;

    background: #242424;
    color: #ffffff;

    transform: translateY(-1px);
}


/* Order */

.ayla-order-button {
    border: 1px solid var(--g);

    background: var(--g);
    color: #ffffff;
}

.ayla-order-button:hover {
    border-color: var(--gd);

    background: var(--gd);
    color: #ffffff;

    transform: translateY(-1px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .ayla-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    .ayla-product-body h2 {
        font-size: 22px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .ayla-products-section {
        padding: 52px 0 65px;
    }

    .ayla-products-heading {
        margin-bottom: 24px;
    }

    .ayla-products-heading h1 {
        font-size: 30px;
    }

    .ayla-products-heading p {
        font-size: 15px;
    }

    .ayla-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .ayla-product-card {
        border-radius: 16px;
    }

    .ayla-product-image {
        aspect-ratio: 1.05 / 1;
    }

    .ayla-product-badge {
        top: 10px;
        left: 10px;

        min-height: 32px;

        padding: 5px 12px;

        font-size: 11px;
    }

    .ayla-product-body {
        padding: 15px 12px 13px;
    }

    .ayla-product-category {
        margin-bottom: 7px;

        font-size: 9px;
    }

    .ayla-product-body h2 {
        font-size: 18px;
        line-height: 1.2;
    }

    .ayla-product-body p {
        margin-top: 8px;

        font-size: 12px;
        line-height: 1.45;

        -webkit-line-clamp: 2;
    }

    .ayla-product-price-label {
        margin-top: 14px;

        font-size: 10px;
    }

    .ayla-product-price {
        font-size: 18px;
    }

    .ayla-product-actions {
        grid-template-columns:
            1fr 1fr;

        gap: 6px;

        padding-top: 14px;
    }

    .ayla-product-actions a {
        min-height: 39px;

        padding: 7px 4px;

        border-radius: 9px;

        font-size: 10px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .ayla-products-grid {
        gap: 9px;
    }

    .ayla-product-body {
        padding: 13px 10px 11px;
    }

    .ayla-product-body h2 {
        font-size: 16px;
    }

    .ayla-product-body p {
        font-size: 11px;
    }

    .ayla-product-price {
        font-size: 17px;
    }

    .ayla-product-actions a {
        font-size: 9px;
    }
}
/* =========================================================
   AYLA PRODUCT CARD — FINAL OVERRIDE TAHAP 2.1
   HARUS DILETAKKAN PALING BAWAH STYLE.CSS
   ========================================================= */

.ayla-products-section {
    padding: 60px 0 75px !important;
    background: #ffffff !important;
}

.ayla-products-heading {
    margin-bottom: 30px !important;
    text-align: left !important;
}

.ayla-products-heading h1 {
    margin: 0 0 8px !important;
    color: #101828 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(30px, 4vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.ayla-products-heading h1 span {
    color: #16b879 !important;
}

.ayla-products-heading p {
    margin: 0 !important;
    color: #667085 !important;
    font-size: 16px !important;
}


/* =========================================================
   GRID DESKTOP
   ========================================================= */

.ayla-products-grid {
    display: grid !important;

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

    gap: 22px !important;

    margin: 0 !important;
}


/* =========================================================
   CARD
   ========================================================= */

.ayla-product-card {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;
    width: 100% !important;

    overflow: hidden !important;

    background: #151515 !important;

    border: 1px solid #242424 !important;
    border-radius: 20px !important;

    box-shadow:
        0 8px 24px rgba(16, 24, 40, .10) !important;

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

.ayla-product-card:hover {
    transform: translateY(-4px) !important;

    box-shadow:
        0 16px 35px rgba(16, 24, 40, .16) !important;
}


/* =========================================================
   IMAGE
   ========================================================= */

.ayla-product-image {
    position: relative !important;

    width: 100% !important;

    height: auto !important;

    aspect-ratio: 1.35 / 1 !important;

    overflow: hidden !important;

    background: #eeeeee !important;
}

.ayla-product-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    display: block !important;
}


/* =========================================================
   BADGE
   ========================================================= */

.ayla-product-badge {
    position: absolute !important;

    top: 14px !important;
    left: 14px !important;

    z-index: 5 !important;

    padding: 8px 16px !important;

    border-radius: 999px !important;

    background: #16b879 !important;
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;

    box-shadow:
        0 6px 16px rgba(22, 184, 121, .25) !important;
}


/* =========================================================
   BODY
   ========================================================= */

.ayla-product-body {
    flex: 1 !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 22px 20px 20px !important;

    background: #151515 !important;
}


/* CATEGORY */

.ayla-product-category {
    margin: 0 0 8px !important;

    color: #20c987 !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}


/* TITLE */

.ayla-product-body h2 {
    margin: 0 !important;

    color: #ffffff !important;

    font-family: 'Plus Jakarta Sans', sans-serif !important;

    font-size: 22px !important;
    font-weight: 800 !important;

    line-height: 1.25 !important;

    letter-spacing: -.025em !important;
}


/* DESCRIPTION */

.ayla-product-body p {
    margin: 11px 0 0 !important;

    color: #a9a9a9 !important;

    font-size: 14px !important;
    line-height: 1.55 !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;

    overflow: hidden !important;
}


/* PRICE LABEL */

.ayla-product-price-label {
    margin-top: 18px !important;

    color: #858585 !important;

    font-size: 12px !important;
}


/* PRICE */

.ayla-product-price {
    margin: 3px 0 0 !important;

    color: #ffffff !important;

    font-size: 22px !important;
    font-weight: 800 !important;

    line-height: 1.25 !important;
}


/* =========================================================
   BUTTON AREA
   ========================================================= */

.ayla-product-actions {
    display: grid !important;

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

    gap: 8px !important;

    width: 100% !important;

    margin-top: auto !important;
    padding-top: 18px !important;
}


.ayla-product-actions a {
    width: 100% !important;
    min-width: 0 !important;

    min-height: 44px !important;

    display: flex !important;

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

    margin: 0 !important;

    padding: 8px 6px !important;

    border-radius: 10px !important;

    font-family: 'Plus Jakarta Sans', sans-serif !important;

    font-size: 12px !important;
    font-weight: 750 !important;

    line-height: 1.2 !important;

    text-align: center !important;

    white-space: normal !important;

    overflow-wrap: normal !important;
    word-break: normal !important;

    box-sizing: border-box !important;
}


/* DETAIL */

.ayla-detail-button {
    border: 1px solid #555555 !important;

    background: transparent !important;
    color: #ffffff !important;
}

.ayla-detail-button:hover {
    background: #252525 !important;
    color: #ffffff !important;
}


/* ORDER */

.ayla-order-button {
    border: 1px solid #16b879 !important;

    background: #16b879 !important;
    color: #ffffff !important;
}

.ayla-order-button:hover {
    border-color: #087a53 !important;

    background: #087a53 !important;
    color: #ffffff !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

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

        gap: 18px !important;
    }
}


/* =========================================================
   HP
   ========================================================= */

@media (max-width: 600px) {

    .ayla-products-section {
        padding: 48px 12px 60px !important;
    }

    .ayla-products-heading {
        margin-bottom: 24px !important;
    }

    .ayla-products-heading h1 {
        font-size: 30px !important;
    }

    .ayla-products-heading p {
        font-size: 15px !important;
    }


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

        gap: 12px !important;
    }


    .ayla-product-card {
        border-radius: 16px !important;
    }


    .ayla-product-image {
        aspect-ratio: 1 / .92 !important;
    }


    .ayla-product-badge {
        top: 9px !important;
        left: 9px !important;

        padding: 6px 11px !important;

        font-size: 10px !important;
    }


    .ayla-product-body {
        padding: 15px 12px 13px !important;
    }


    .ayla-product-category {
        margin-bottom: 7px !important;

        font-size: 9px !important;
    }


    .ayla-product-body h2 {
        font-size: 17px !important;

        line-height: 1.22 !important;
    }


    .ayla-product-body p {
        margin-top: 8px !important;

        font-size: 11px !important;
        line-height: 1.45 !important;

        -webkit-line-clamp: 2 !important;
    }


    .ayla-product-price-label {
        margin-top: 13px !important;

        font-size: 9px !important;
    }


    .ayla-product-price {
        font-size: 17px !important;
    }


    .ayla-product-actions {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 6px !important;

        padding-top: 13px !important;
    }


    .ayla-product-actions a {
        min-height: 38px !important;

        padding: 6px 3px !important;

        border-radius: 9px !important;

        font-size: 9px !important;

        white-space: normal !important;
    }


    /* WhatsApp jangan menutupi tombol */

    .floating-wa {
        width: 52px !important;
        height: 52px !important;

        right: 13px !important;
        bottom: 13px !important;

        font-size: 23px !important;
    }
}


/* =========================================================
   HP SANGAT KECIL
   ========================================================= */

@media (max-width: 380px) {

    .ayla-products-grid {
        gap: 9px !important;
    }

    .ayla-product-body {
        padding: 13px 10px 11px !important;
    }

    .ayla-product-body h2 {
        font-size: 15px !important;
    }

    .ayla-product-body p {
        font-size: 10px !important;
    }

    .ayla-product-price {
        font-size: 16px !important;
    }

    .ayla-product-actions a {
        font-size: 8px !important;
    }
}
/* =========================================================
   AYLA PRODUCT CARD — TAHAP 2.2 FINISHING
   Letakkan PALING BAWAH style.css
   ========================================================= */


/* =========================================================
   1. SECTION SPACING
   ========================================================= */

.ayla-products-section {
    padding-top: 70px !important;
    padding-bottom: 80px !important;
}


/* =========================================================
   2. DESKTOP CARD — LEBIH COMPACT & PREMIUM
   ========================================================= */

@media (min-width: 1001px) {

    .ayla-products-grid {
        gap: 24px !important;
    }

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

    .ayla-product-image {
        aspect-ratio: 1.38 / 1 !important;
    }

    .ayla-product-body {
        padding: 20px 19px 18px !important;
    }

    .ayla-product-category {
        font-size: 11px !important;
        margin-bottom: 7px !important;
    }

    .ayla-product-body h2 {
        font-size: 21px !important;
        line-height: 1.25 !important;
    }

    .ayla-product-body p {
        margin-top: 9px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        -webkit-line-clamp: 3 !important;
    }

    .ayla-product-price-label {
        margin-top: 16px !important;
    }

    .ayla-product-price {
        font-size: 21px !important;
    }

    .ayla-product-actions {
        padding-top: 16px !important;
    }

    .ayla-product-actions a {
        min-height: 42px !important;
        font-size: 11px !important;
    }
}


/* =========================================================
   3. BADGE — LEBIH ELEGAN
   ========================================================= */

.ayla-product-badge {
    top: 13px !important;
    left: 13px !important;

    min-height: 34px !important;

    padding: 6px 14px !important;

    font-size: 12px !important;

    box-shadow:
        0 5px 14px rgba(22, 184, 121, .20) !important;
}


/* =========================================================
   4. MOBILE — SECTION TIDAK BOLEH TERTUTUP HEADER
   ========================================================= */

@media (max-width: 600px) {

    .ayla-products-section {
        position: relative !important;

        padding-top: 72px !important;
        padding-bottom: 65px !important;
    }


    /*
     * Judul section dibuat sedikit lebih compact
     */

    .ayla-products-heading {
        margin-bottom: 22px !important;
    }

    .ayla-products-heading h1 {
        font-size: 29px !important;
        line-height: 1.15 !important;
        margin-bottom: 7px !important;
    }

    .ayla-products-heading p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }


    /* Card */

    .ayla-product-card {
        border-radius: 16px !important;

        box-shadow:
            0 5px 18px rgba(16, 24, 40, .10) !important;
    }


    /* Image */

    .ayla-product-image {
        aspect-ratio: 1.04 / 1 !important;
    }


    /* Badge */

    .ayla-product-badge {
        top: 9px !important;
        left: 9px !important;

        min-height: 31px !important;

        padding: 5px 11px !important;

        font-size: 10px !important;
    }


    /* Body */

    .ayla-product-body {
        padding: 15px 12px 13px !important;
    }


    .ayla-product-category {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }


    .ayla-product-body h2 {
        font-size: 17px !important;
        line-height: 1.23 !important;

        letter-spacing: -.015em !important;
    }


    .ayla-product-body p {
        margin-top: 8px !important;

        font-size: 11px !important;
        line-height: 1.48 !important;

        -webkit-line-clamp: 2 !important;
    }


    /* Price */

    .ayla-product-price-label {
        margin-top: 14px !important;

        font-size: 9px !important;
    }

    .ayla-product-price {
        margin-top: 3px !important;

        font-size: 17px !important;
    }


    /* Buttons */

    .ayla-product-actions {
        padding-top: 13px !important;

        gap: 6px !important;
    }

    .ayla-product-actions a {
        min-height: 39px !important;

        padding: 6px 4px !important;

        border-radius: 9px !important;

        font-size: 9px !important;
        line-height: 1.15 !important;
    }
}


/* =========================================================
   5. HP KECIL — 360/375px
   ========================================================= */

@media (max-width: 380px) {

    .ayla-products-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ayla-products-grid {
        gap: 9px !important;
    }

    .ayla-product-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ayla-product-body h2 {
        font-size: 15px !important;
    }

    .ayla-product-body p {
        font-size: 10px !important;
    }

    .ayla-product-price {
        font-size: 16px !important;
    }

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

    .ayla-product-actions a {
        min-height: 37px !important;

        padding-left: 2px !important;
        padding-right: 2px !important;

        font-size: 8px !important;
    }
}
/* =========================================================
   AYLA DIGITAL PRINTING
   TAHAP 3.1 — HERO BERANDA
   ========================================================= */

.hero {
    padding: 90px 0 100px;
    background: #f7faf9;
    overflow: hidden;
}

.hero .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}

/* ---------- TEXT ---------- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    margin-bottom: 20px;

    background: #e5f8ef;
    color: #16b879;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;
}

.hero h1 {
    margin: 0 0 22px;

    color: #101828;

    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 800;
}

.hero h1 span {
    color: #16b879;
}

.hero p {
    max-width: 560px;
    margin: 0 0 32px;

    color: #667085;

    font-size: 18px;
    line-height: 1.7;
}

/* ---------- BUTTONS ---------- */

.hero .actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero .actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;
    padding: 0 24px;

    border-radius: 12px;

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

    text-decoration: none;

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

.hero .actions .btn:hover {
    transform: translateY(-2px);
}

/* Tombol utama */

.hero .actions .btn-primary {
    background: #16b879;
    color: #ffffff;

    box-shadow: 0 10px 24px rgba(22, 184, 121, 0.22);
}

.hero .actions .btn-primary:hover {
    background: #0fa66b;
}

/* Tombol kedua */

.hero .actions .btn-secondary {
    background: #ffffff;
    color: #101828;

    border: 1px solid #d0d5dd;
}

.hero .actions .btn-secondary:hover {
    border-color: #16b879;
    color: #16b879;
}

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

.hero-media {
    width: 100%;
    position: relative;
}

.hero-media img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 520px;

    object-fit: cover;

    border-radius: 28px;

    box-shadow:
        0 25px 60px rgba(16, 24, 40, 0.14);
}

/* Jika belum ada Featured Image */

.placeholder-media {
    min-height: 420px;

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

    padding: 40px;

    text-align: center;

    background: #eaf7f1;
    color: #667085;

    border: 2px dashed #a7dfc5;
    border-radius: 28px;

    line-height: 1.6;
}

.placeholder-media strong {
    color: #16b879;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hero {
        padding: 70px 0 80px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero p {
        max-width: 650px;
    }

    .hero-media {
        max-width: 720px;
        margin: 0 auto;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .hero {
        padding: 48px 0 60px;
    }

    .hero .container {
        padding: 0 20px;
    }

    .hero-grid {
        gap: 32px;
    }

    .eyebrow {
        margin-bottom: 16px;

        padding: 7px 12px;

        font-size: 12px;
    }

    .hero h1 {
        margin-bottom: 18px;

        font-size: 38px;
        line-height: 1.1;
        letter-spacing: -1.2px;
    }

    .hero p {
        margin-bottom: 26px;

        font-size: 16px;
        line-height: 1.6;
    }

    .hero .actions {
        width: 100%;
        gap: 10px;
    }

    .hero .actions .btn {
        flex: 1;
        min-height: 48px;

        padding: 0 16px;

        font-size: 14px;
    }

    .hero-media img {
        max-height: 360px;
        border-radius: 20px;
    }

    .placeholder-media {
        min-height: 280px;
        border-radius: 20px;
    }
}
/* =========================================================
   AYLA DIGITAL PRINTING
   TAHAP 3.2 — KENAPA PILIH AYLA
   ========================================================= */

.section-alt {
    background: #f7faf9;
}

.section-alt .section-head {
    margin-bottom: 42px;
}

.section-alt .section-head h2 {
    margin: 0 0 10px;

    color: #101828;

    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
    letter-spacing: -1px;
    font-weight: 800;
}

.section-alt .section-head p {
    margin: 0;

    color: #667085;

    font-size: 16px;
    line-height: 1.6;
}


/* ---------- FEATURE GRID ---------- */

.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}


/* ---------- FEATURE CARD ---------- */

.feature {
    position: relative;

    padding: 32px 28px;

    background: #ffffff;

    border: 1px solid #e4e7ec;
    border-radius: 20px;

    box-shadow: 0 8px 25px rgba(16, 24, 40, 0.05);

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

.feature:hover {
    transform: translateY(-5px);

    border-color: #b7ead3;

    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.09);
}


/* ---------- ICON ---------- */

.feature-icon {
    width: 58px;
    height: 58px;

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

    margin-bottom: 22px;

    background: #e5f8ef;

    border-radius: 16px;

    font-size: 27px;

    line-height: 1;
}


/* ---------- TITLE ---------- */

.feature h3 {
    margin: 0 0 10px;

    color: #101828;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 750;
}


/* ---------- DESCRIPTION ---------- */

.feature p {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .features {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .feature {
        padding: 26px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .section-alt {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .section-alt .section-head {
        margin-bottom: 28px;
    }

    .section-alt .section-head h2 {
        font-size: 30px;
    }

    .section-alt .section-head p {
        font-size: 15px;
    }

    .features {
        gap: 14px;
    }

    .feature {
        padding: 23px 20px;

        border-radius: 17px;
    }

    .feature-icon {
        width: 52px;
        height: 52px;

        margin-bottom: 17px;

        border-radius: 14px;

        font-size: 24px;
    }

    .feature h3 {
        font-size: 18px;
    }

    .feature p {
        font-size: 14px;
        line-height: 1.6;
    }
}
/* =========================================================
   AYLA DIGITAL PRINTING
   TAHAP 3.3 — PRODUK DI BERANDA
   Khusus #produk agar halaman Produk tidak ikut berubah
   ========================================================= */

#produk {
    background: #ffffff;
}

#produk .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 38px;
}

#produk .section-head h2 {
    margin: 0 0 10px;

    color: #101828;

    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
    letter-spacing: -1px;
    font-weight: 800;
}

#produk .section-head p {
    margin: 0;

    color: #667085;

    font-size: 16px;
    line-height: 1.6;
}

#produk .section-head > a {
    flex-shrink: 0;

    color: #16b879;

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

    text-decoration: none;

    transition: color 0.2s ease;
}

#produk .section-head > a:hover {
    color: #0fa66b;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

#produk .grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

#produk .card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e4e7ec;
    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(16, 24, 40, 0.06);

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

#produk .card:hover {
    transform: translateY(-5px);

    border-color: #b7ead3;

    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.10);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

#produk .card > img {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 0.82;

    object-fit: cover;

    background: #f2f4f7;
}


/* =========================================================
   CARD BODY
   ========================================================= */

#produk .card-body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 22px 20px 20px;
}

#produk .card-body .badge {
    display: inline-flex;
    align-self: flex-start;

    margin-bottom: 10px;

    color: #16b879;

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

    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#produk .card-body h3 {
    margin: 0 0 10px;

    color: #101828;

    font-size: 19px;
    line-height: 1.35;
    font-weight: 750;
}

#produk .card-body .price {
    margin-top: auto;
    padding-top: 12px;

    color: #101828;

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


/* =========================================================
   CARD BUTTON
   ========================================================= */

#produk .card-actions {
    display: flex;

    margin-top: 18px;
}

#produk .card-actions .btn {
    width: 100%;

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

    min-height: 44px;
    padding: 0 16px;

    border: 1px solid #d0d5dd;
    border-radius: 10px;

    color: #101828;
    background: #ffffff;

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

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

#produk .card-actions .btn:hover {
    color: #16b879;

    border-color: #16b879;
    background: #f0fbf6;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

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


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #produk .section-head {
        display: block;

        margin-bottom: 28px;
    }

    #produk .section-head h2 {
        font-size: 30px;
    }

    #produk .section-head p {
        font-size: 15px;
    }

    #produk .section-head > a {
        display: inline-block;

        margin-top: 14px;
    }

    #produk .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #produk .card {
        border-radius: 15px;
    }

    #produk .card > img {
        aspect-ratio: 1 / 0.85;
    }

    #produk .card-body {
        padding: 17px 14px 15px;
    }

    #produk .card-body .badge {
        margin-bottom: 7px;

        font-size: 10px;
    }

    #produk .card-body h3 {
        font-size: 16px;
        line-height: 1.3;
    }

    #produk .card-body .price {
        padding-top: 8px;

        font-size: 17px;
    }

    #produk .card-actions {
        margin-top: 14px;
    }

    #produk .card-actions .btn {
        min-height: 40px;

        padding: 0 8px;

        font-size: 12px;
    }
}
/* =========================================================
   AYLA DIGITAL PRINTING
   TAHAP 3.4 — FOOTER
   ========================================================= */

.site-footer {
    position: relative;

    padding: 65px 0 25px;

    background: #111111;
    color: #ffffff;

    overflow: hidden;
}

.site-footer .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}


/* =========================================================
   FOOTER GRID
   ========================================================= */

.footer-grid {
    display: grid;

    grid-template-columns:
        1.35fr
        1fr
        1fr;

    gap: 55px;

    padding-bottom: 45px;

    border-bottom: 1px solid #292929;
}


/* =========================================================
   FOOTER HEADINGS
   ========================================================= */

.footer-grid h3 {
    margin: 0 0 17px;

    color: #ffffff;

    font-size: 17px;
    line-height: 1.3;
    font-weight: 800;
}

.footer-grid > div:first-child h3 {
    color: #16b879;

    font-size: 20px;
}


/* =========================================================
   FOOTER TEXT
   ========================================================= */

.footer-grid p {
    margin: 0 0 10px;

    color: #9b9b9b;

    font-size: 14px;
    line-height: 1.7;
}

.footer-grid > div:first-child p {
    max-width: 390px;
}


/* =========================================================
   LINKS
   ========================================================= */

.footer-grid a {
    color: #bdbdbd;

    text-decoration: none;

    transition:
        color 0.2s ease;
}

.footer-grid a:hover {
    color: #16b879;
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.footer-bottom {
    padding-top: 23px;

    color: #707070;

    font-size: 13px;
    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */

.floating-wa {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 9999;

    width: 58px;
    height: 58px;

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

    border-radius: 50%;

    background: #16b879;
    color: #ffffff;

    font-size: 27px;
    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .22);

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

.floating-wa:hover {
    transform: translateY(-4px) scale(1.03);

    background: #0fa66b;

    color: #ffffff;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, .28);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .site-footer {
        padding-top: 55px;
    }

    .footer-grid {
        grid-template-columns:
            1fr 1fr;

        gap: 38px;
    }

    .footer-grid > div:first-child {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .site-footer {
        padding: 48px 0 20px;
    }

    .site-footer .container {
        padding: 0 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 28px;

        padding-bottom: 32px;
    }

    .footer-grid > div:first-child {
        grid-column: auto;
    }

    .footer-grid h3 {
        margin-bottom: 10px;

        font-size: 16px;
    }

    .footer-grid > div:first-child h3 {
        font-size: 19px;
    }

    .footer-grid p {
        font-size: 13px;
        line-height: 1.65;
    }

    .footer-bottom {
        padding-top: 19px;

        font-size: 11px;
        line-height: 1.6;
    }

    .floating-wa {
        right: 14px;
        bottom: 14px;

        width: 52px;
        height: 52px;

        font-size: 24px;
    }
}
/* =========================================================
   AYLA V3.1.1 — HEADER REFINEMENT
   ========================================================= */
.site-header {
    background: rgba(255, 255, 255, .96);
    border-bottom-color: rgba(16, 24, 40, .07);
}

.header-inner {
    min-height: 78px;
}

.brand {
    gap: 11px;
    min-width: 0;
}

.brand-mark {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--g), #0fa56e);
    color: #fff;
    box-shadow: 0 8px 20px rgba(22, 184, 121, .18);
}

.brand-mark svg {
    width: 27px;
    height: 27px;
    display: block;
}

.brand-text {
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.brand-text strong {
    color: var(--g);
}

.brand-text small {
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: .01em;
}

.nav a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 99px;
    background: var(--g);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.nav a:not(.nav-cta):hover::after,
.nav .current-menu-item > a:not(.nav-cta)::after,
.nav .current_page_item > a:not(.nav-cta)::after {
    transform: scaleX(1);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.menu-toggle {
    border-color: rgba(16, 24, 40, .10);
    box-shadow: 0 4px 12px rgba(16, 24, 40, .05);
}

.menu-toggle:hover {
    border-color: rgba(22, 184, 121, .35);
    color: var(--g);
}

@media (max-width: 600px) {
    .header-inner {
        min-height: 68px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
    }

    .brand-mark svg {
        width: 25px;
        height: 25px;
    }

    .brand-text {
        font-size: 13px;
    }

    .brand-text small {
        font-size: 9px;
    }
}


/* =========================================================
   AYLA V3.1.2 — HOMEPAGE POLISH
   Final overrides: hero, product cards, spacing & mobile
   ========================================================= */
.hero-copy{position:relative;z-index:2}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:20px;color:var(--ink-soft);font-size:13px;font-weight:700}
.hero-trust span{display:inline-flex;align-items:center;gap:6px}
.hero-trust span::first-letter{color:var(--g)}
.section-kicker{display:block;margin-bottom:6px;color:var(--gd);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.section-link{display:inline-flex;align-items:center;gap:6px;color:var(--gd);font-weight:800;font-size:14px}
.section-link:hover{color:var(--g-dark)}
.card{overflow:hidden;transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d7eee5}
.card-image{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--g-pale)}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform 300ms ease}
.card:hover .card-image img{transform:scale(1.035)}
.card-placeholder{height:100%;display:grid;place-items:center;color:var(--gd);font-weight:800;background:linear-gradient(135deg,#eaf8f2,#f7fbf9)}
.card h3 a:hover{color:var(--gd)}
.card-actions .btn{min-height:44px}
.section-head{align-items:flex-end}
.section-head>div{min-width:0}

@media (max-width:1000px){
 .hero{padding:60px 0 64px}
 .hero-grid{gap:36px}
}
@media (max-width:600px){
 .hero{padding:42px 0 48px}
 .hero h1{font-size:38px;line-height:1.06;margin-top:16px}
 .hero p{font-size:16px;line-height:1.65}
 .actions{margin-top:22px}
 .actions .btn{width:100%}
 .hero-trust{gap:8px 14px;margin-top:17px;font-size:12px}
 .section-head{align-items:flex-start;gap:14px}
 .section-link{margin-top:2px}
 .card{border-radius:16px}
 .card-body{padding:15px}
 .card h3{font-size:16px}
 .price{font-size:15px}
 .card-actions .btn{padding:10px 12px;font-size:13px}
}
@media (max-width:380px){
 .hero h1{font-size:34px}
 .hero-trust{display:grid;grid-template-columns:1fr}
}


/* =========================================================
   V3.1.3 — PRODUCT & DETAIL POLISH
   ========================================================= */
.catalog-hero{padding:72px 0 54px;background:linear-gradient(180deg,#f4fbf8 0%,#fff 100%);border-bottom:1px solid var(--border-soft)}
.catalog-hero h1{max-width:760px;margin:10px 0 12px;font-size:clamp(34px,5vw,54px);line-height:1.08}
.catalog-hero h1 span{color:var(--g)}
.catalog-hero p{max-width:650px;margin:0;font-size:17px}
.catalog-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.catalog-meta span{padding:8px 12px;border:1px solid #d9eee6;background:#fff;border-radius:999px;color:var(--ink-soft);font-size:13px;font-weight:700}
.catalog-section{padding:42px 0 80px}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:26px;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}
.catalog-toolbar>div{display:flex;align-items:center;gap:10px}.catalog-toolbar strong{font-size:17px}.catalog-toolbar span{color:var(--muted);font-size:13px}
.product-card{overflow:hidden}.product-card .card-image{position:relative}.product-card .card-image img{width:100%;aspect-ratio:4/3;object-fit:cover}.image-arrow{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);color:var(--ink);font-weight:800;box-shadow:var(--shadow-sm);opacity:0;transform:translateY(5px);transition:all var(--transition)}.product-card:hover .image-arrow{opacity:1;transform:none}.product-card h2{font-size:19px;line-height:1.3;margin:10px 0 7px}.product-card h2 a:hover{color:var(--g)}
.catalog-pagination{margin-top:38px}.catalog-pagination .nav-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.catalog-pagination a,.catalog-pagination span{padding:9px 13px;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:13px;font-weight:700}.catalog-pagination .current{background:var(--g);border-color:var(--g);color:#fff}
.empty-state{text-align:center;padding:50px 20px}.empty-state p{margin-bottom:22px}
.product-detail-wrap{padding:34px 0 80px;background:linear-gradient(180deg,#f7fbf9 0%,#fff 32%)}
.breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px;color:var(--muted);font-size:13px}.breadcrumbs a:hover{color:var(--g)}.breadcrumbs strong{color:var(--ink);font-weight:700}
.product-detail-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-md)}
.product-detail-media{min-height:500px;background:#f4fbf8}.product-detail-media img{width:100%;height:100%;min-height:500px;object-fit:cover}.product-detail-placeholder{height:100%;min-height:500px;display:grid;place-items:center;padding:30px;text-align:center;color:var(--g-dark);font-weight:800}
.product-detail-content{padding:48px}.product-detail-content h1{margin:12px 0 10px;font-size:clamp(30px,4vw,46px);line-height:1.08}.detail-price-label{margin-top:14px;color:var(--muted);font-size:13px;font-weight:700}.detail-price{margin-top:2px;color:var(--g-dark);font-size:30px;font-weight:850}.detail-divider{height:1px;background:var(--border);margin:24px 0}.detail-description{font-size:15px}.detail-description p{margin-top:0}.detail-benefits{display:grid;gap:9px;margin:24px 0;color:var(--ink-soft);font-size:14px;font-weight:650}.detail-actions{margin-top:20px}.detail-note{margin:18px 0 0;font-size:12px;line-height:1.55;color:var(--muted-light)}
.footer-brand{display:flex;gap:14px;align-items:flex-start}.footer-logo-mark{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;background:var(--g);color:#fff;font-weight:900;font-size:20px}.site-footer a:hover{color:var(--g)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px}.floating-wa{width:56px!important;height:56px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:var(--g)!important;color:#fff!important;box-shadow:0 12px 28px rgba(22,184,121,.28)!important}.floating-wa span{font-size:15px;font-weight:900;letter-spacing:-.04em}
@media(max-width:900px){.product-detail-card{grid-template-columns:1fr}.product-detail-media,.product-detail-media img{min-height:360px}.product-detail-content{padding:32px}.catalog-toolbar{align-items:flex-start;flex-direction:column}.catalog-toolbar .btn{width:100%;text-align:center}}
@media(max-width:640px){.catalog-hero{padding:48px 0 38px}.catalog-meta{display:grid;grid-template-columns:1fr 1fr}.catalog-meta span:last-child{grid-column:1/-1;text-align:center}.catalog-section{padding:28px 0 60px}.catalog-toolbar{padding:14px}.catalog-toolbar>div{width:100%;justify-content:space-between}.product-detail-wrap{padding:22px 0 56px}.product-detail-media,.product-detail-media img{min-height:290px}.product-detail-content{padding:24px}.product-detail-content h1{font-size:32px}.detail-actions{display:grid;grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:4px}}


/* =========================================================
   AYLA V3.1.4 — ORDER EXPERIENCE
   ========================================================= */
.ayla-order-page{padding:46px 0 80px}.order-intro{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:end;margin-bottom:34px}.section-kicker,.summary-kicker{display:inline-flex;color:var(--g-dark);font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.12em}.order-intro h1{max-width:760px;margin:9px 0 12px;font-size:clamp(34px,5vw,58px);line-height:1.03}.order-intro h1 span{color:var(--g)}.order-intro p{max-width:700px;color:var(--muted);font-size:16px;line-height:1.7;margin:0}.order-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.order-trust div{padding:16px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}.order-trust b{display:block;color:var(--g);font-size:12px}.order-trust span{display:block;margin-top:7px;font-size:12px;font-weight:800;color:var(--ink-soft)}
.order-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);gap:24px;align-items:start}.ayla-order-form{display:grid;gap:16px}.form-card{padding:25px;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm)}.form-card-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:22px}.form-number{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;background:#e9faf4;color:var(--g-dark);font-weight:900}.form-card h2{margin:1px 0 3px;font-size:19px}.form-card-head p{margin:0;color:var(--muted);font-size:12px}.ayla-order-form label{display:block;margin-bottom:15px;color:var(--ink-soft);font-size:13px;font-weight:800}.ayla-order-form label>span{color:var(--g-dark)}.ayla-order-form input[type=text],.ayla-order-form input[type=number],.ayla-order-form select,.ayla-order-form textarea{width:100%;margin-top:7px;padding:13px 14px;border:1px solid #dbe9e4;border-radius:12px;background:#fbfefd;color:var(--ink);font:inherit;font-size:14px;outline:none;transition:border .2s,box-shadow .2s}.ayla-order-form input:focus,.ayla-order-form select:focus,.ayla-order-form textarea:focus{border-color:var(--g);box-shadow:0 0 0 4px rgba(22,184,121,.10)}.form-grid{display:grid;grid-template-columns:1fr 180px;gap:14px}.file-box{display:flex!important;align-items:center;gap:12px;padding:15px;border:1px dashed #a9dccc;border-radius:14px;background:#f4fcf9;cursor:pointer}.file-box input{display:none}.file-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#dff7ed;color:var(--g-dark);font-size:20px}.file-box b{display:block;color:var(--ink);font-size:13px}.file-box small{display:block;margin-top:3px;color:var(--muted);font-weight:500}.file-name{margin:-7px 0 13px;padding-left:49px;color:var(--g-dark);font-size:11px;font-weight:700}.delivery-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}.delivery-choice{margin:0!important;display:flex!important;align-items:center;gap:11px;padding:14px;border:1px solid var(--border);border-radius:14px;background:#fff;cursor:pointer}.delivery-choice:has(input:checked){border-color:#8cddc0;background:#f3fcf8}.delivery-choice input{accent-color:var(--g)}.delivery-choice b{display:block;color:var(--ink);font-size:13px}.delivery-choice small{display:block;margin-top:3px;color:var(--muted);font-weight:500}.order-submit{width:100%;padding:15px 18px;border:0;border-radius:13px;background:var(--g);color:#fff;font:inherit;font-size:14px;font-weight:850;cursor:pointer;box-shadow:0 12px 24px rgba(22,184,121,.18);transition:transform .2s,background .2s}.order-submit:hover{background:var(--g-dark);transform:translateY(-1px)}.order-submit span{margin-left:8px}.order-small{margin:0;text-align:center;color:var(--muted);font-size:11px;line-height:1.6}
.order-summary{position:sticky;top:20px;display:grid;gap:14px}.summary-card{padding:25px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(180deg,#f1fbf7,#fff 42%);box-shadow:var(--shadow-sm)}.summary-card h2{margin:7px 0 23px;font-size:24px}.summary-line{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid #e8f0ed;font-size:12px}.summary-line span{color:var(--muted)}.summary-line strong{max-width:58%;text-align:right;color:var(--ink);font-size:12px}.summary-divider{height:1px;margin:6px 0 14px;background:var(--border)}.summary-note{color:var(--muted);font-size:11px;line-height:1.65}.summary-help{display:grid;gap:6px;padding:20px;border:1px solid #d6eee5;border-radius:18px;background:#eaf9f4}.summary-help b{font-size:14px}.summary-help span{color:var(--muted);font-size:12px;line-height:1.5}.summary-help a{margin-top:5px;color:var(--g-dark);font-size:12px;font-weight:850}.order-notice{margin:40px 0;padding:20px;border-radius:14px;background:#fff4f4;color:#9b2c2c}
@media(max-width:900px){.order-intro,.order-layout{grid-template-columns:1fr}.order-summary{position:static}.order-trust{max-width:620px}}
@media(max-width:640px){.ayla-order-page{padding:30px 0 55px}.order-intro h1{font-size:36px}.order-trust{grid-template-columns:1fr 1fr}.order-trust div:last-child{grid-column:1/-1}.form-card{padding:20px}.form-grid,.delivery-options{grid-template-columns:1fr}.order-summary{margin-top:0}}

/* =========================================================
   AYLA V3.1.5 — TRACKING / ABOUT / CONTACT
   ========================================================= */
.ayla-tracking-page,.ayla-info-page{padding:52px 0 82px}.tracking-hero,.info-hero{max-width:820px;margin:0 auto 34px;text-align:center}.tracking-hero h1,.info-hero h1{margin:10px 0 14px;font-size:clamp(36px,5vw,58px);line-height:1.04}.tracking-hero h1 span,.info-hero h1 span{color:var(--g)}.tracking-hero p,.info-hero p{max-width:720px;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.75}.tracking-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;max-width:980px;margin:auto}.tracking-card{padding:34px;border:1px solid var(--border);border-radius:24px;background:#fff;box-shadow:var(--shadow-md)}.tracking-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--g-soft);color:var(--g-dark);font-weight:900;font-size:22px}.tracking-card h2{margin:20px 0 6px;font-size:26px}.tracking-muted{margin:0 0 25px;color:var(--muted);font-size:13px;line-height:1.65}.tracking-card label{display:block;margin-bottom:8px;font-size:13px;font-weight:800;color:var(--ink-soft)}.tracking-input-row{display:grid;grid-template-columns:1fr auto;gap:10px}.tracking-input-row input{min-width:0;padding:14px;border:1px solid #dbe9e4;border-radius:12px;background:#fbfefd;outline:none}.tracking-input-row input:focus{border-color:var(--g);box-shadow:0 0 0 4px rgba(22,184,121,.1)}.tracking-input-row button{padding:14px 18px;border:0;border-radius:12px;background:var(--g);color:#fff;font-weight:850}.tracking-input-row button:hover{background:var(--g-dark)}.tracking-result{display:grid;gap:4px;margin-top:15px;padding:14px;border-radius:13px;background:#edf9f5;color:var(--g-dark);font-size:12px}.tracking-result span{color:var(--muted)}.tracking-side{display:grid;gap:10px}.tracking-step{display:flex;gap:12px;padding:18px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}.tracking-step>b{color:var(--g);font-size:12px}.tracking-step strong,.tracking-step span{display:block}.tracking-step strong{font-size:13px}.tracking-step span{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.5}.tracking-direct{padding:16px;border-radius:15px;background:var(--g-dark);color:#fff;text-align:center;font-size:12px;font-weight:850}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:auto}.info-card{padding:28px;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm)}.info-number{color:var(--g);font-size:12px;font-weight:900}.info-card h2{margin:9px 0 7px;font-size:21px}.info-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.info-cta{max-width:980px;margin:24px auto 0;padding:24px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:20px;background:linear-gradient(135deg,#e9faf4,#f8fcfa);border:1px solid #d7eee5}.info-cta h2{margin:5px 0 0;font-size:24px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:980px;margin:auto}.contact-card{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}.contact-card:hover{border-color:#a9dccb;transform:translateY(-1px)}.contact-icon{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:13px;background:var(--g-soft);color:var(--g-dark);font-size:12px;font-weight:900}.contact-card div{min-width:0;flex:1}.contact-card strong,.contact-card span,.contact-card small{display:block}.contact-card strong{font-size:14px}.contact-card div span{margin-top:2px;color:var(--ink-soft);font-size:13px;font-weight:750}.contact-card small{margin-top:3px;color:var(--muted);font-size:11px}.contact-card>b{color:var(--g-dark)}
@media(max-width:760px){.ayla-tracking-page,.ayla-info-page{padding:34px 0 58px}.tracking-layout,.info-grid,.contact-grid{grid-template-columns:1fr}.tracking-input-row{grid-template-columns:1fr}.tracking-input-row button{width:100%}.tracking-card{padding:24px}.info-cta{align-items:flex-start;flex-direction:column}.info-cta .btn{width:100%;text-align:center}}


/* =========================================================
   AYLA V3.1.6 — FINAL POLISH & ACCESSIBILITY
   ========================================================= */
.skip-link{position:fixed;left:16px;top:12px;z-index:2000;transform:translateY(-180%);padding:10px 14px;border-radius:10px;background:var(--ink);color:#fff;font-weight:800;font-size:13px;transition:transform .18s ease}.skip-link:focus{transform:translateY(0)}
.nav a.is-active:not(.nav-cta){color:var(--g-dark);font-weight:900}.nav a.is-active:not(.nav-cta)::after{transform:scaleX(1)}
.header-brand .custom-logo-link{display:inline-flex;align-items:center}.header-brand .custom-logo{width:auto;max-width:230px;max-height:54px;object-fit:contain}
img{height:auto}.card-image img,.ayla-product-image img{background:var(--g-pale)}
.btn:focus-visible,.nav a:focus-visible,.menu-toggle:focus-visible,.floating-wa:focus-visible,.card a:focus-visible,.tracking-input-row button:focus-visible,.order-submit:focus-visible{outline:3px solid rgba(22,184,121,.28);outline-offset:3px}
@media(max-width:600px){.header-brand .custom-logo{max-width:190px;max-height:46px}.container{width:min(var(--container),calc(100% - 24px))}.site-header{backdrop-filter:blur(10px)}.floating-wa{bottom:16px;right:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* V3.1.7 — penyempurnaan form pesanan */
.ayla-order-form .form-grid{align-items:start}
.ayla-order-form input[type="date"]{min-height:48px}
.ayla-order-form input[type="tel"]{letter-spacing:.01em}
.ayla-order-form .file-name{margin-top:8px}
.ayla-order-form .order-small{line-height:1.65}
@media (max-width:640px){
  .ayla-order-form .form-grid{grid-template-columns:1fr}
  .ayla-order-form .order-submit{width:100%;justify-content:center}
}


/* =========================================================
   18. SMART ORDER FORM — V3.1.8
   ========================================================= */
.ayla-order-page{padding:54px 0 86px}.order-intro{display:grid;grid-template-columns:1.4fr .8fr;gap:34px;align-items:end;margin-bottom:34px}.order-intro h1{margin:10px 0 12px;font-size:clamp(34px,5vw,52px);line-height:1.05;letter-spacing:-.04em}.order-intro h1 span,.section-kicker{color:var(--g)}.order-intro p{max-width:720px;color:var(--muted);line-height:1.7;margin:0}.order-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.order-trust div{padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--white)}.order-trust b{display:block;color:var(--g);font-size:12px;margin-bottom:8px}.order-trust span{font-size:13px;font-weight:750}.order-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:24px;align-items:start}.ayla-order-form{display:grid;gap:16px}.form-card{max-width:none}.form-card-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:22px}.form-card-head h2{margin:0 0 4px;font-size:20px}.form-card-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.form-number{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;background:#e8faf4;color:var(--gd);font-weight:850}.ayla-order-form label{display:block;margin-bottom:15px;color:var(--ink);font-size:13px;font-weight:750}.ayla-order-form label>span{color:var(--g)}.ayla-order-form input,.ayla-order-form select,.ayla-order-form textarea{width:100%;margin-top:7px;padding:12px 13px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--ink);font:inherit;outline:none;transition:border-color .2s,box-shadow .2s}.ayla-order-form input:focus,.ayla-order-form select:focus,.ayla-order-form textarea:focus{border-color:var(--g);box-shadow:0 0 0 4px rgba(22,184,121,.10)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.dynamic-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:2px}.dynamic-option{margin:0!important}.dynamic-option em{color:var(--g);font-style:normal}.smart-price{margin-top:2px;padding:16px;border:1px solid #c9f1df;border-radius:14px;background:#f2fdf8}.smart-price span{display:block;color:var(--muted);font-size:12px}.smart-price strong{display:block;margin:3px 0;color:var(--gd);font-size:24px}.smart-price small{color:var(--muted);line-height:1.5}.file-box{display:flex!important;align-items:center;gap:12px;padding:14px;border:1px dashed #a9dcca!important;border-radius:14px;background:#f7fffb;cursor:pointer}.file-box input{display:none}.file-box .file-icon{width:38px;height:38px;margin:0;display:grid;place-items:center;border-radius:11px;background:#e1f8ef;color:var(--gd);font-size:20px}.file-box small{display:block;margin-top:3px;color:var(--muted);font-weight:500;line-height:1.45}.file-name{margin-top:-7px;color:var(--muted);font-size:12px}.delivery-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.delivery-choice{margin:0!important;display:flex!important;gap:10px;align-items:flex-start;padding:15px;border:1px solid var(--border);border-radius:14px;cursor:pointer}.delivery-choice:has(input:checked){border-color:var(--g);background:#f4fdf9;box-shadow:0 0 0 3px rgba(22,184,121,.08)}.delivery-choice input{width:auto!important;margin:3px 0 0!important}.delivery-choice span{margin:0!important}.delivery-choice b,.delivery-choice small{display:block}.delivery-choice small{margin-top:3px;color:var(--muted);font-weight:500}.address-wrap{margin-top:14px}.order-submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 18px;border:0;border-radius:13px;background:var(--g);color:#fff;font-weight:850;font-size:15px;cursor:pointer;box-shadow:0 10px 22px rgba(22,184,121,.18);transition:.2s}.order-submit:hover{background:var(--gd);transform:translateY(-1px)}.order-small{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.order-summary{position:sticky;top:94px}.summary-card{padding:24px;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm)}.summary-kicker{color:var(--g);font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.summary-card h2{margin:7px 0 18px;font-size:24px}.summary-line{display:flex;justify-content:space-between;gap:18px;padding:9px 0;font-size:13px}.summary-line span{color:var(--muted)}.summary-line strong{text-align:right;max-width:62%;word-break:break-word}.summary-divider{height:1px;background:var(--border);margin:8px 0}.summary-note{padding:12px;border-radius:12px;background:#f6f8fa;color:var(--muted);font-size:12px;line-height:1.55}.summary-help{margin-top:12px;padding:18px;border-radius:16px;background:#0f172a;color:#fff}.summary-help b,.summary-help span{display:block}.summary-help span{margin:5px 0 12px;color:#b9c4d0;font-size:12px;line-height:1.5}.summary-help a{color:#8cf0c7;font-size:13px;font-weight:800}
@media(max-width:1000px){.order-intro{grid-template-columns:1fr}.order-layout{grid-template-columns:1fr}.order-summary{position:static}.summary-card{position:static}}
@media(max-width:600px){.ayla-order-page{padding:38px 0 60px}.order-trust{grid-template-columns:1fr}.form-grid,.dynamic-options,.delivery-options{grid-template-columns:1fr}.form-card{padding:20px}.order-intro h1{font-size:36px}.summary-card{padding:20px}}


/* =========================================================
   AYLA PAYMENT — V3.1.9
   ========================================================= */
.ayla-payment-box{margin:28px 0;padding:28px;border:1px solid #dff3eb;border-radius:24px;background:#fff;box-shadow:0 14px 40px rgba(15,23,42,.06)}
.ayla-payment-head{margin-bottom:20px}.ayla-payment-head h2{margin:6px 0 7px;color:#0f172a;font-size:clamp(22px,3vw,30px)}
.ayla-payment-head p{margin:0;color:#64748b;line-height:1.65}
.ayla-payment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ayla-payment-card{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid #e6f4ee;border-radius:18px;background:#f8fffc}
.ayla-payment-card .payment-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#e9faf3;font-size:20px;flex:0 0 auto}
.ayla-payment-card strong{display:block;color:#0f172a;font-size:15px;margin-bottom:5px}
.ayla-payment-card p{margin:0 0 4px;color:#64748b;font-size:13px}
.ayla-payment-card b{display:block;color:#0f9f69;font-size:16px;letter-spacing:.2px}
.ayla-payment-card small{display:block;margin-top:3px;color:#64748b}
.ayla-qris-card img{width:150px;height:150px;object-fit:contain;display:block;margin-top:10px;border-radius:12px;background:#fff;border:1px solid #e5e7eb}
.ayla-payment-note{margin-top:16px;padding:13px 15px;border-radius:13px;background:#f1fbf6;color:#48605a;font-size:13px;line-height:1.55}
.ayla-payment-empty{padding:15px;border-radius:13px;background:#f8fafc;color:#64748b;font-size:13px}
@media(max-width:900px){.ayla-payment-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ayla-payment-box{padding:20px;border-radius:20px}.ayla-payment-grid{grid-template-columns:1fr}.ayla-qris-card img{width:130px;height:130px}}


/* =========================================================
   ORDER STATUS — V3.2.0
   ========================================================= */
.ayla-track-box{max-width:900px;margin:0 auto;padding:32px 0}
.ayla-track-head h1{margin:7px 0;color:#0f172a;font-size:clamp(28px,5vw,42px)}
.ayla-track-head p{color:#64748b;line-height:1.7}
.ayla-track-form{display:flex;gap:10px;margin:22px 0}
.ayla-track-form input{flex:1;min-width:0;border:1px solid #dbe7e2;border-radius:14px;padding:14px 16px;font-size:15px}
.ayla-track-form button{border:0;border-radius:14px;padding:14px 22px;background:#10b981;color:#fff;font-weight:800;cursor:pointer}
.ayla-track-error{padding:14px 16px;border-radius:14px;background:#fff1f2;color:#be123c}
.ayla-status-result{margin-top:20px;padding:25px;border:1px solid #e1f2eb;border-radius:24px;background:#fff;box-shadow:0 14px 40px rgba(15,23,42,.06)}
.ayla-status-badge{display:inline-flex;padding:8px 12px;border-radius:999px;background:#e9faf3;color:#087f55;font-weight:800;font-size:13px}
.ayla-status-result h2{margin:13px 0 3px;color:#0f172a}
.ayla-status-customer{margin:0;color:#64748b}
.ayla-status-timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:28px 0}
.ayla-timeline-item{text-align:center;color:#94a3b8;font-size:11px}
.ayla-timeline-item span{display:block;width:20px;height:20px;border-radius:50%;margin:0 auto 8px;background:#e2e8f0;border:5px solid #f8fafc}
.ayla-timeline-item.is-done{color:#0f9f69;font-weight:700}
.ayla-timeline-item.is-done span{background:#10b981}
.ayla-status-details{padding:14px;background:#f8fffc;border-radius:14px}
.ayla-status-details summary{cursor:pointer;font-weight:800;color:#0f172a}
.ayla-status-details pre{white-space:pre-wrap;font:inherit;color:#475569;line-height:1.6;margin:12px 0 0}
.ayla-admin-status{display:inline-block;padding:5px 9px;border-radius:999px;background:#e9faf3;color:#087f55}
@media(max-width:680px){
 .ayla-track-form{flex-direction:column}
 .ayla-track-form button{width:100%}
 .ayla-status-timeline{grid-template-columns:repeat(2,1fr);gap:14px}
 .ayla-status-result{padding:20px}
}

.card-actions{display:flex;gap:8px;flex-wrap:wrap}.card-actions .btn{flex:1 1 auto}.product-card .card-actions .btn{min-width:120px}

/* V3.2.2 — ORDER FLOW: Pesan membuka form terlebih dahulu. */


/* =========================================================
   DESIGN UPLOAD — V3.2.3
   ========================================================= */
.ayla-design-upload-field{padding:18px;border:1px dashed #9cdec3;border-radius:18px;background:#f6fffb}
.ayla-design-upload-field input[type=file]{display:block;width:100%;margin:10px 0;padding:12px;border:1px solid #d7ebe3;border-radius:12px;background:#fff;color:#334155}
.ayla-design-upload-field small{display:block;color:#64748b;line-height:1.55}
.ayla-upload-help{margin-top:9px;padding:10px 12px;border-radius:10px;background:#e9faf3;color:#087f55;font-size:12px;line-height:1.5}


/* =========================================================
   KERANJANG — V3.2.5
   ========================================================= */
.header-cart{display:flex;align-items:center;flex:0 0 auto}
.ayla-cart-link{position:relative;display:inline-flex!important;align-items:center;gap:7px;padding:9px 12px!important;border:1px solid #dcefe7;border-radius:12px;background:#fff;color:var(--ink)!important;font-size:13px;font-weight:800;transition:all var(--transition)}
.ayla-cart-link:hover{border-color:#9bdcc3;background:#f2fbf7;color:var(--gd)!important;transform:translateY(-1px)}
.ayla-cart-icon{font-size:17px;line-height:1}
.ayla-cart-count{min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 5px;border-radius:999px;background:var(--g);color:#fff!important;font-size:11px;font-weight:800;line-height:20px}
.menu-item-cart .ayla-cart-link{border:0;background:transparent;padding:8px 0!important}
@media(max-width:980px){
 .header-cart{margin-left:auto;margin-right:8px}
 .header-cart .ayla-cart-label{display:none}
 .header-cart .ayla-cart-link{padding:9px 10px!important}
}
@media(max-width:760px){
 .header-cart{display:flex}
}


/* =========================================================
   JASA DESAIN — V3.2.7
   ========================================================= */
.ayla-design-service-note{margin:12px 0 4px;padding:13px 15px;border:1px solid #bfe8d6;border-radius:14px;background:#effcf6;color:#166534;font-size:13px;line-height:1.55}
.ayla-field .optional{font-weight:500;color:#94a3b8;font-size:12px}

/* V3.2.8 — alamat pengiriman */
.ayla-shipping-address-wrap{margin-top:12px}
.ayla-shipping-address-wrap textarea{width:100%;min-height:110px;padding:12px;border:1px solid #d7ebe3;border-radius:12px;resize:vertical}

/* =========================================================
   STATUS PESANAN AYLA — V3.3.0
   ========================================================= */
.ayla-tracking{max-width:760px;margin:45px auto;padding:28px;background:#fff;border:1px solid #e2eee9;border-radius:22px;box-shadow:0 10px 35px rgba(0,0,0,.05)}
.ayla-tracking-head{text-align:center}.ayla-tracking-head h2{margin:8px 0}.ayla-tracking-form{display:flex;gap:10px;margin:25px 0}.ayla-tracking-form input{flex:1;padding:13px 15px;border:1px solid #d6e9e1;border-radius:12px}.ayla-tracking-form button{border:0;border-radius:12px;padding:0 20px;font-weight:700;cursor:pointer}.ayla-tracking-card{padding:20px;border:1px solid #e2eee9;border-radius:16px}.ayla-timeline{margin-top:22px}.ayla-timeline-step{display:flex;gap:12px;position:relative;padding:0 0 20px 4px;color:#94a3b8}.ayla-timeline-step:before{content:"";position:absolute;left:9px;top:18px;bottom:0;width:2px;background:#e2e8f0}.ayla-timeline-step:last-child:before{display:none}.ayla-timeline-step .dot{width:12px;height:12px;border-radius:50%;background:#cbd5e1;display:block;flex:0 0 12px;margin-top:3px;position:relative;z-index:1}.ayla-timeline-step.done{color:#166534}.ayla-timeline-step.done .dot{background:#16a34a}.ayla-tracking-error{padding:14px;border-radius:12px;background:#fff7ed;color:#9a3412}@media(max-width:600px){.ayla-tracking-form{flex-direction:column}.ayla-tracking-form button{padding:12px}}


/* =========================================================
   AYLA V3.4.2 — RAPAPI FORM PEMESANAN
   ========================================================= */
.ayla-order-page .order-intro{gap:28px;margin-bottom:28px}
.ayla-order-page .order-trust{gap:10px}
.ayla-order-page .order-trust div{padding:14px 15px;min-height:82px}
.ayla-order-page .order-trust b{font-size:11px;margin-bottom:5px}
.ayla-order-page .order-trust span{display:block;font-size:13px;font-weight:850}
.ayla-order-page .order-trust small{display:block;margin-top:4px;color:var(--muted);font-size:10px;font-weight:600;line-height:1.35}

.ayla-order-page .form-card{padding:24px}
.ayla-order-page .form-card + .form-card{margin-top:0}
.ayla-order-page .form-card-head{margin-bottom:20px}
.ayla-order-page .form-number{box-shadow:inset 0 0 0 1px rgba(22,184,121,.08)}
.ayla-order-page .ayla-order-form label{margin-bottom:14px}
.ayla-order-page .ayla-order-form input,
.ayla-order-page .ayla-order-form select,
.ayla-order-page .ayla-order-form textarea{min-height:48px;box-sizing:border-box}
.ayla-order-page .ayla-order-form textarea{min-height:108px;resize:vertical}
.ayla-order-page .dynamic-options{margin:2px 0 4px}
.ayla-order-page .dynamic-option select{margin-top:7px}
.ayla-order-page .smart-price{margin:4px 0 2px}
.ayla-order-page .file-box{margin-top:4px;min-height:72px;box-sizing:border-box}
.ayla-order-page .file-name{padding:0 4px;margin:7px 0 13px;font-size:11px}
.ayla-order-page .delivery-options{margin-top:4px}
.ayla-order-page .address-wrap{margin-bottom:0}
.ayla-order-page .address-wrap[hidden]{display:none!important}
.ayla-order-page .order-submit{min-height:52px;margin-top:2px;font-size:15px}
.ayla-order-page .order-submit:disabled{opacity:.7;cursor:wait;transform:none}
.ayla-order-page .order-security-note{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border:1px solid #d8eee6;border-radius:14px;background:#f5fcf9}
.ayla-order-page .order-security-note>span{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;border-radius:50%;background:#dff7ed;color:var(--gd);font-size:12px;font-weight:900}
.ayla-order-page .order-security-note p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}
.ayla-order-page .order-security-note strong{color:var(--ink)}
.ayla-order-page .order-small{text-align:center}

.ayla-order-page .summary-card{top:0}
.ayla-order-page .summary-line{align-items:flex-start}
.ayla-order-page .summary-line strong{overflow-wrap:anywhere}
.ayla-order-page .summary-help a{display:inline-flex;align-items:center;gap:5px}

@media(max-width:900px){
  .ayla-order-page .order-intro{gap:20px}
  .ayla-order-page .order-summary{order:-1}
  .ayla-order-page .summary-card{background:linear-gradient(180deg,#f1fbf7,#fff 55%)}
}
@media(max-width:640px){
  .ayla-order-page{padding:28px 0 56px}
  .ayla-order-page .order-intro h1{font-size:34px}
  .ayla-order-page .order-intro p{font-size:14px;line-height:1.6}
  .ayla-order-page .order-trust{grid-template-columns:1fr}
  .ayla-order-page .order-trust div,
  .ayla-order-page .order-trust div:last-child{grid-column:auto;min-height:auto}
  .ayla-order-page .form-card{padding:18px 16px;border-radius:17px}
  .ayla-order-page .form-card-head{gap:10px;margin-bottom:17px}
  .ayla-order-page .form-number{width:31px;height:31px;flex-basis:31px;border-radius:9px}
  .ayla-order-page .form-card h2{font-size:18px}
  .ayla-order-page .form-card-head p{font-size:11px}
  .ayla-order-page .dynamic-options{grid-template-columns:1fr}
  .ayla-order-page .delivery-options{grid-template-columns:1fr}
  .ayla-order-page .delivery-choice{padding:13px}
  .ayla-order-page .order-summary{margin-bottom:0}
  .ayla-order-page .summary-card{padding:19px;border-radius:17px}
  .ayla-order-page .summary-card h2{font-size:21px;margin-bottom:17px}
  .ayla-order-page .summary-help{padding:16px}
  .ayla-order-page .order-submit{position:sticky;bottom:10px;z-index:4;box-shadow:0 10px 25px rgba(0,0,0,.12),0 8px 22px rgba(22,184,121,.2)}
}


/* =========================================================
   AYLA ORDER FORM — V3.4.3 POLISH
   Final overrides only; earlier styles remain as backup.
   ========================================================= */

.ayla-order-page .order-intro{
    align-items:start;
}

.ayla-order-page .order-intro > div:first-child{
    padding-top:4px;
}

.ayla-order-page .form-card{
    border-color:#e4ebe8;
    box-shadow:0 8px 24px rgba(15,23,42,.045);
}

.ayla-order-page .form-card:hover{
    border-color:#d7e5df;
}

.ayla-order-page .form-card-head{
    padding-bottom:2px;
}

.ayla-order-page .ayla-order-form label{
    line-height:1.35;
}

.ayla-order-page .ayla-order-form input,
.ayla-order-page .ayla-order-form select,
.ayla-order-page .ayla-order-form textarea{
    background:#fcfefd;
}

.ayla-order-page .ayla-order-form input::placeholder,
.ayla-order-page .ayla-order-form textarea::placeholder{
    color:#9aa7a2;
}

.ayla-order-page .file-box{
    transition:border-color .2s,background .2s,box-shadow .2s;
}

.ayla-order-page .file-box:hover{
    border-color:var(--g)!important;
    background:#f2fcf8;
    box-shadow:0 0 0 3px rgba(22,184,121,.06);
}

.ayla-order-page .delivery-choice{
    min-height:76px;
    align-items:center;
    transition:border-color .2s,background .2s,box-shadow .2s;
}

.ayla-order-page .delivery-choice:hover{
    border-color:#b9dcd0;
}

.ayla-order-page .summary-card{
    border-color:#dfeae6;
}

.ayla-order-page .summary-line{
    min-height:38px;
    align-items:center;
}

.ayla-order-page .order-security-note{
    margin-top:2px;
}

@media (max-width:900px){
    .ayla-order-page .order-summary{
        order:2;
    }

    .ayla-order-page .ayla-order-form{
        order:1;
    }
}

@media (max-width:600px){
    .ayla-order-page .order-intro h1{
        font-size:32px;
    }

    .ayla-order-page .order-intro p{
        font-size:14px;
    }

    .ayla-order-page .order-trust{
        gap:8px;
    }

    .ayla-order-page .order-trust div{
        padding:13px 14px;
    }

    .ayla-order-page .form-card{
        padding:18px 15px;
    }

    .ayla-order-page .form-card-head{
        margin-bottom:15px;
    }

    .ayla-order-page .form-card h2{
        font-size:17px;
    }

    .ayla-order-page .ayla-order-form input,
    .ayla-order-page .ayla-order-form select,
    .ayla-order-page .ayla-order-form textarea{
        font-size:16px;
    }

    .ayla-order-page .order-submit{
        bottom:8px;
        min-height:54px;
        border-radius:14px;
    }
}


/* =========================================================
   AYLA ORDER FORM — V3.4.4 FINISHING
   ========================================================= */

@media (min-width:901px){
  .ayla-order-page .order-summary{
    position:sticky;
    top:92px;
    align-self:start;
  }
}

.ayla-order-page .dynamic-option{
  padding:12px 13px;
  border:1px solid #e4eee9;
  border-radius:14px;
  background:#fbfefd;
  margin-bottom:10px!important;
}
.ayla-order-page .dynamic-option > span{
  display:block;
  font-size:12px;
  color:var(--ink-soft);
}
.ayla-order-page .smart-price{
  border:1px solid #cdeee0;
  background:linear-gradient(135deg,#effcf6,#ffffff);
  border-radius:16px;
  padding:15px 16px;
}
.ayla-order-page .smart-price span{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.ayla-order-page .smart-price strong{
  display:block;
  margin-top:3px;
  color:var(--g-dark);
  font-size:23px;
}
.ayla-order-page .smart-price small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}
.ayla-order-page .delivery-choice:has(input:checked){
  box-shadow:0 0 0 3px rgba(22,184,121,.06);
}
.ayla-order-page .file-name{
  min-height:17px;
}

@media(max-width:640px){
  .ayla-order-page .order-trust{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }
  .ayla-order-page .order-trust div{
    padding:11px 8px;
    text-align:center;
  }
  .ayla-order-page .order-trust b{
    font-size:10px;
  }
  .ayla-order-page .order-trust span{
    font-size:11px;
    line-height:1.25;
  }
  .ayla-order-page .order-trust small{
    font-size:9px;
    line-height:1.25;
  }
  .ayla-order-page .smart-price strong{
    font-size:21px;
  }
  .ayla-order-page .file-box{
    align-items:flex-start;
  }
}


/* =========================================================
   AYLA HOMEPAGE V3.5.0 — PROFESSIONAL FINISH
   ========================================================= */

.order-process{
    background:var(--bg);
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:26px;
}

.process-card{
    position:relative;
    min-height:245px;
    padding:26px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--white);
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}

.process-card:hover{
    transform:translateY(-4px);
    border-color:#cfe8de;
    box-shadow:var(--shadow-md);
}

.process-number{
    position:absolute;
    top:20px;
    right:22px;
    color:#dcefe7;
    font-size:32px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.04em;
}

.process-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    border-radius:15px;
    background:var(--g-soft);
    font-size:24px;
}

.process-card h3{
    margin:0 0 8px;
    font-size:19px;
}

.process-card p{
    margin:0;
    font-size:14px;
    line-height:1.7;
}

.customer-fit{
    padding-top:0;
}

.customer-fit-box{
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:32px;
    align-items:center;
    padding:34px;
    border:1px solid #dcece5;
    border-radius:var(--radius-xl);
    background:linear-gradient(135deg,var(--g-pale),#fff);
}

.customer-fit-box h2{
    margin:0 0 10px;
    font-size:clamp(26px,3vw,38px);
}

.customer-fit-box p{
    margin:0;
    max-width:560px;
}

.fit-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}

.fit-list span{
    display:inline-flex;
    align-items:center;
    min-height:42px;
    padding:9px 14px;
    border:1px solid #dbe8e3;
    border-radius:999px;
    background:#fff;
    color:var(--ink-soft);
    font-size:13px;
    font-weight:800;
    box-shadow:0 3px 10px rgba(16,24,40,.04);
}

.final-cta{
    padding-top:0;
}

.final-cta-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    padding:34px;
    border-radius:var(--radius-xl);
    background:var(--ink);
    box-shadow:var(--shadow-lg);
}

.final-cta-box .section-kicker{
    color:#67d9ab;
}

.final-cta-box h2{
    margin:0 0 10px;
    color:#fff;
    font-size:clamp(26px,3vw,38px);
}

.final-cta-box p{
    max-width:650px;
    margin:0;
    color:#b9c3ce;
}

.final-cta-actions{
    display:flex;
    flex:0 0 auto;
    gap:10px;
}

.final-cta-actions .btn-secondary{
    background:#fff;
    border-color:#fff;
}

@media (max-width:900px){
    .process-grid{
        grid-template-columns:1fr;
    }

    .process-card{
        min-height:auto;
    }

    .customer-fit-box{
        grid-template-columns:1fr;
    }

    .fit-list{
        justify-content:flex-start;
    }

    .final-cta-box{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width:600px){
    .process-grid{
        gap:12px;
    }

    .process-card{
        padding:20px;
    }

    .process-number{
        top:17px;
        right:18px;
        font-size:26px;
    }

    .customer-fit-box,
    .final-cta-box{
        padding:24px 20px;
        border-radius:20px;
    }

    .fit-list{
        gap:8px;
    }

    .fit-list span{
        min-height:40px;
        padding:8px 12px;
        font-size:12px;
    }

    .final-cta-actions{
        width:100%;
        flex-direction:column;
    }

    .final-cta-actions .btn{
        width:100%;
        justify-content:center;
    }
}


/* =========================================================
   AYLA PRODUCT PAGE V3.5.1 — MOBILE POLISH + WHATSAPP
   ========================================================= */

.archive-product .page-hero,
.product-archive .page-hero{
    padding-bottom:34px;
}

.archive-product .products-section,
.product-archive .products-section{
    padding-top:44px;
}

@media (max-width:700px){
    .archive-product .page-hero,
    .product-archive .page-hero{
        padding-top:54px;
        padding-bottom:20px;
    }

    .archive-product .products-section,
    .product-archive .products-section{
        padding-top:28px;
    }

    .archive-product .section-head,
    .product-archive .section-head{
        margin-bottom:20px;
    }

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

    .archive-product .product-card,
    .product-archive .product-card{
        border-radius:20px;
    }

    .archive-product .product-card .product-body,
    .product-archive .product-card .product-body{
        padding:14px 14px 15px;
    }

    .archive-product .product-card h3,
    .product-archive .product-card h3{
        font-size:17px;
        line-height:1.25;
    }

    .archive-product .product-card p,
    .product-archive .product-card p{
        font-size:12px;
        line-height:1.5;
        margin-top:7px;
    }

    .archive-product .product-card .product-actions,
    .product-archive .product-card .product-actions{
        gap:7px;
        margin-top:13px;
    }

    .archive-product .product-card .product-actions .btn,
    .product-archive .product-card .product-actions .btn{
        min-height:45px;
        padding:9px 10px;
        font-size:12px;
        border-radius:11px;
    }
}

/* Floating WhatsApp: cleaner, friendlier, less intrusive */
.ayla-whatsapp-float,
.whatsapp-float,
.floating-whatsapp{
    width:58px!important;
    height:58px!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    z-index:999!important;
    box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
}

.ayla-whatsapp-float svg,
.whatsapp-float svg,
.floating-whatsapp svg{
    width:30px!important;
    height:30px!important;
}

.ayla-whatsapp-float img,
.whatsapp-float img,
.floating-whatsapp img{
    width:31px!important;
    height:31px!important;
    object-fit:contain;
}

.ayla-whatsapp-float::before,
.whatsapp-float::before,
.floating-whatsapp::before{
    content:"";
    position:absolute;
    inset:-5px;
    border:2px solid rgba(37,211,102,.22);
    border-radius:50%;
    animation:ayla-wa-pulse 2.2s ease-out infinite;
    pointer-events:none;
}

@keyframes ayla-wa-pulse{
    0%{transform:scale(.9);opacity:.8}
    70%{transform:scale(1.12);opacity:0}
    100%{transform:scale(1.12);opacity:0}
}

@media (max-width:600px){
    .ayla-whatsapp-float,
    .whatsapp-float,
    .floating-whatsapp{
        width:54px!important;
        height:54px!important;
        right:14px!important;
        bottom:14px!important;
    }
}


/* =========================================================
   AYLA CONTACT PAGE V3.5.2
   ========================================================= */
.ayla-contact-page .page-hero{
    padding-bottom:38px;
}

.contact-grid{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
    gap:20px;
    align-items:start;
}

.contact-main,
.contact-side{
    display:grid;
    gap:18px;
}

.contact-card{
    padding:28px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.contact-card h2{
    margin:0 0 10px;
    font-size:clamp(22px,2.6vw,32px);
}

.contact-card p{
    margin:0 0 20px;
    line-height:1.75;
}

.contact-info-list{
    display:grid;
    gap:12px;
}

.contact-info-list div{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:14px 0;
    border-bottom:1px solid var(--border);
}

.contact-info-list div:last-child{
    border-bottom:0;
}

.contact-info-list span{
    color:var(--muted);
    text-align:right;
}

.contact-card-dark{
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
}

.contact-card-dark h2{
    color:#fff;
}

.contact-card-dark p{
    color:#c2cad2;
}

.contact-card-dark .section-kicker{
    color:#67d9ab;
}

.contact-card .text-link{
    display:inline-flex;
    font-weight:800;
    color:var(--g);
}

@media (max-width:700px){
    .ayla-contact-page .page-hero{
        padding-top:48px;
        padding-bottom:22px;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

    .contact-card{
        padding:21px 18px;
        border-radius:18px;
    }

    .contact-info-list div{
        display:grid;
        gap:4px;
    }

    .contact-info-list span{
        text-align:left;
    }

    .contact-card .btn{
        width:100%;
        justify-content:center;
    }
}


/* =========================================================
   AYLA CONTACT PAGE V3.6.3 — DESKTOP LAYOUT FIX
   ========================================================= */
.ayla-contact-page .contact-main{
    min-width:0;
}

.ayla-contact-page .contact-card{
    min-width:0;
}

.ayla-contact-page .contact-main .contact-card:first-child{
    display:block;
}

.ayla-contact-page .contact-main .contact-card:first-child > .section-kicker,
.ayla-contact-page .contact-main .contact-card:first-child > h2,
.ayla-contact-page .contact-main .contact-card:first-child > p,
.ayla-contact-page .contact-main .contact-card:first-child > .btn{
    max-width:none;
}

.ayla-contact-page .contact-main .contact-card:first-child h2{
    max-width:760px;
}

.ayla-contact-page .contact-main .contact-card:first-child p{
    max-width:760px;
}

@media (min-width:901px){
    .ayla-contact-page .contact-grid{
        grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);
        align-items:stretch;
    }

    .ayla-contact-page .contact-main{
        display:grid;
        grid-template-columns:1fr;
    }

    .ayla-contact-page .contact-main .contact-card:first-child{
        min-height:270px;
    }

    .ayla-contact-page .contact-side{
        grid-template-rows:auto auto;
    }

    .ayla-contact-page .contact-side .contact-card{
        min-height:0;
    }
}

@media (max-width:700px){
    .ayla-contact-page .contact-grid{
        gap:14px;
    }

    .ayla-contact-page .contact-card h2{
        line-height:1.15;
    }
}


/* =========================================================
   AYLA WHATSAPP ICON V3.6.4 — GLOBAL FIX
   ========================================================= */
.ayla-global-whatsapp{
    position:fixed;
    right:18px;
    bottom:18px;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    color:#fff!important;
    background:#25D366!important;
    border-radius:50%;
    text-decoration:none!important;
    z-index:99999;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
    transition:transform .2s ease,box-shadow .2s ease;
}

.ayla-global-whatsapp:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 14px 30px rgba(0,0,0,.25);
}

.ayla-global-whatsapp .ayla-wa-svg{
    width:31px;
    height:31px;
    display:block;
}

.ayla-wa-tooltip{
    position:absolute;
    right:68px;
    top:50%;
    transform:translateY(-50%);
    white-space:nowrap;
    padding:8px 11px;
    border-radius:9px;
    background:#111;
    color:#fff;
    font-size:12px;
    font-weight:800;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
}

.ayla-global-whatsapp:hover .ayla-wa-tooltip{
    opacity:1;
}

@media(max-width:600px){
    .ayla-global-whatsapp{
        right:14px;
        bottom:14px;
        width:54px;
        height:54px;
    }
    .ayla-global-whatsapp .ayla-wa-svg{
        width:29px;
        height:29px;
    }
    .ayla-wa-tooltip{
        display:none;
    }
}

/* Hide older floating WhatsApp text/button when the global button exists. */
body:has(.ayla-global-whatsapp) .floating-whatsapp,
body:has(.ayla-global-whatsapp) .whatsapp-float,
body:has(.ayla-global-whatsapp) .ayla-whatsapp-float{
    display:none!important;
}


/* =========================================================
   AYLA V3.6.6 — HIDE REQUIRED DATE FIELD
   ========================================================= */
.ayla-order-form [name*="tanggal_dibutuhkan"],
.ayla-order-form [name*="tanggal-dibutuhkan"],
.ayla-order-form [name*="needed_date"],
.ayla-order-form [name*="date_needed"]{
    display:none!important;
}


/* =========================================================
   AYLA V3.6.6 — WHATSAPP ICON CONSISTENCY
   ========================================================= */
.ayla-global-whatsapp .ayla-wa-svg,
.ayla-whatsapp-float .ayla-wa-svg,
.whatsapp-float .ayla-wa-svg,
.floating-whatsapp .ayla-wa-svg{
    width:31px!important;
    height:31px!important;
    display:block!important;
}

.ayla-global-whatsapp{
    color:#fff!important;
    background:#25D366!important;
}

body:has(.ayla-global-whatsapp) .whatsapp-float,
body:has(.ayla-global-whatsapp) .floating-whatsapp,
body:has(.ayla-global-whatsapp) .ayla-whatsapp-float{
    display:none!important;
}


/* =========================================================
   AYLA V3.6.7 — CLEAN FLOATING WHATSAPP
   ========================================================= */
.floating-wa{display:none!important;}
.ayla-global-whatsapp{display:grid!important;}

/* V3.6.8 cache-busted build */


/* =========================================================
   AYLA V3.6.9 — UNIVERSAL PRODUCT DETAIL
   ========================================================= */
.ayla-product-detail{padding:70px 0 90px;background:#fff;}
.ayla-product-detail .ayla-container{width:min(1120px,calc(100% - 40px));margin:auto;}
.ayla-product-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:54px;align-items:start;}
.ayla-product-media{border:1px solid #e4e9e6;border-radius:24px;overflow:hidden;background:#f4faf7;}
.ayla-product-media img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;}
.ayla-product-placeholder{min-height:420px;display:grid;place-items:center;text-align:center;color:#21b977;font-weight:800;font-size:28px;line-height:1.3;}
.ayla-product-info h1{margin:8px 0 16px;font-size:clamp(32px,5vw,52px);line-height:1.05;color:#111827;}
.ayla-eyebrow{font-size:13px;letter-spacing:.14em;font-weight:800;color:#20b777;}
.ayla-product-price{font-size:32px;font-weight:900;color:#169b62;margin:18px 0;}
.ayla-product-short,.ayla-product-description{font-size:17px;line-height:1.75;color:#667085;margin:16px 0;}
.ayla-product-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
.ayla-product-actions .ayla-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:14px;text-decoration:none;font-weight:800;}
.ayla-btn-primary{background:#16b978;color:#fff;}
.ayla-btn-secondary{background:#fff;color:#172033;border:1px solid #d8dfdb;}
.ayla-product-note{margin-top:22px;padding:16px 18px;border-radius:14px;background:#effaf5;color:#63736b;font-size:14px;line-height:1.6;}
@media(max-width:760px){
  .ayla-product-detail{padding:36px 0 70px;}
  .ayla-product-detail .ayla-container{width:min(100% - 28px,620px);}
  .ayla-product-detail-grid{grid-template-columns:1fr;gap:28px;}
  .ayla-product-info h1{font-size:34px;}
  .ayla-product-price{font-size:28px;}
  .ayla-product-actions{display:grid;grid-template-columns:1fr;}
  .ayla-product-actions .ayla-btn{width:100%;}
}


/* =========================================================
   AYLA DIGITAL PRINTING V4.0 — POLISH LAYER
   Safe override layer: keeps existing components compatible
   while improving hierarchy, mobile UX, product cards, and
   product-detail presentation.
   ========================================================= */
:root{
  --v4-green:#12b978;
  --v4-green-dark:#087a53;
  --v4-ink:#101828;
  --v4-muted:#667085;
  --v4-line:#e6ece9;
  --v4-soft:#f4fbf8;
  --v4-shadow:0 14px 40px rgba(16,24,40,.08);
  --v4-radius:22px;
}
body{background:#fff;color:var(--v4-ink);}
.site-header{box-shadow:0 1px 0 rgba(16,24,40,.04);}
.header-inner{min-height:78px;}
.header-brand{min-width:0;}
.primary-menu{display:flex;align-items:center;gap:18px;margin:0;padding:0;list-style:none;}
.primary-menu a{font-weight:700;}
.section{padding-block:78px;}
.section-head{margin-bottom:28px;}
.section-head h2{font-size:clamp(28px,4vw,42px);line-height:1.1;margin:.25rem 0 .6rem;}
.hero{padding:82px 0 88px;}
.hero-copy h1{font-size:clamp(42px,6vw,70px);line-height:1.02;letter-spacing:-.045em;}
.hero-copy h1 span{color:var(--v4-green);}
.hero-media{border-radius:28px;overflow:hidden;box-shadow:var(--v4-shadow);background:var(--v4-soft);}
.hero-media img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.card{border:1px solid var(--v4-line);border-radius:var(--v4-radius);overflow:hidden;background:#fff;box-shadow:0 8px 26px rgba(16,24,40,.045);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.card:hover{transform:translateY(-3px);box-shadow:var(--v4-shadow);border-color:#cfe9de;}
.card-image{aspect-ratio:4/3;overflow:hidden;background:#f5f8f7;}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.card:hover .card-image img{transform:scale(1.025);}
.card-body{padding:20px;}
.card-body h2,.card-body h3{line-height:1.25;margin:.5rem 0;}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;font-weight:800;}
.price{font-weight:900;font-size:18px;color:var(--v4-green-dark);margin-top:8px;}
.ayla-product-detail{padding:64px 0 88px;}
.ayla-product-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:start;}
.ayla-product-media{position:sticky;top:100px;border:1px solid var(--v4-line);border-radius:28px;overflow:hidden;background:#f7faf9;box-shadow:var(--v4-shadow);}
.ayla-product-media img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;}
.ayla-product-info{padding-top:12px;}
.ayla-product-info h1{font-size:clamp(34px,5vw,58px);line-height:1.05;margin:10px 0 18px;}
.ayla-product-price{font-size:26px;font-weight:900;color:var(--v4-green-dark);margin-bottom:18px;}
.ayla-product-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;}
.ayla-btn{min-height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;font-weight:800;padding:0 18px;}
.ayla-btn-primary{background:var(--v4-green);color:#fff;}
.ayla-btn-secondary{border:1px solid var(--v4-line);background:#fff;color:var(--v4-ink);}
.ayla-product-note{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--v4-soft);color:var(--v4-muted);font-size:14px;}
.ayla-global-whatsapp{box-shadow:0 12px 30px rgba(18,185,120,.25);}
.site-footer{margin-top:40px;}
@media (max-width:820px){
  .container{width:min(var(--container),calc(100% - 24px));}
  .header-inner{min-height:68px;gap:10px;}
  .nav{position:absolute;left:12px;right:12px;top:74px;display:none;flex-direction:column;align-items:stretch;gap:4px;padding:12px;border:1px solid var(--v4-line);border-radius:18px;background:#fff;box-shadow:var(--v4-shadow);}
  .nav.is-open{display:flex;}
  .primary-menu{flex-direction:column;align-items:stretch;gap:2px;}
  .primary-menu a,.nav a{display:block;padding:12px 14px;border-radius:10px;}
  .menu-toggle{display:inline-flex;}
  .header-cart{margin-left:auto;}
  .hero{padding:48px 0 56px;}
  .hero-grid{grid-template-columns:1fr;gap:28px;}
  .hero-copy h1{font-size:clamp(38px,12vw,56px);}
  .section{padding-block:58px;}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .card-body{padding:14px;}
  .card-actions{grid-template-columns:1fr;gap:8px;}
  .btn{min-height:44px;font-size:14px;}
  .ayla-product-detail{padding:30px 0 56px;}
  .ayla-product-detail-grid{grid-template-columns:1fr;gap:28px;}
  .ayla-product-media{position:static;}
  .ayla-product-info h1{font-size:38px;}
  .ayla-product-actions{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .grid{grid-template-columns:1fr 1fr;}
  .card-image{aspect-ratio:1/1;}
  .card-body h2,.card-body h3{font-size:15px;}
  .price{font-size:16px;}
  .hero-trust{gap:8px;flex-wrap:wrap;}
}

/* =========================================================
   AYLA V5.1 — ORDER FILE & PAYMENT VERIFICATION
   ========================================================= */
.ayla-payment-alert{margin:18px 0;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.5}
.ayla-payment-success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.ayla-payment-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.ayla-order-file-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding:16px;border:1px solid #dfeee8;border-radius:14px;background:#f8fcfa}
.ayla-order-file-box strong{display:block}
.ayla-order-file-box span{color:#64748b;flex:1 1 220px}
.ayla-payment-checkout{margin-top:24px;padding:22px;border:1px solid #dfeee8;border-radius:18px;background:#fff}
.ayla-payment-checkout h3{margin:5px 0 8px}
.ayla-payment-checkout>p{color:#64748b;line-height:1.6}
.ayla-payment-proof-form{display:grid;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid #e5e7eb}
.ayla-payment-proof-form label{display:grid;gap:7px}
.ayla-payment-proof-form input[type=file]{width:100%;box-sizing:border-box;padding:12px;border:1px solid #d0d5dd;border-radius:10px;background:#fff}
.ayla-payment-proof-form small{color:#667085}
.ayla-payment-proof-form .btn{justify-self:start}
.ayla-status-total{color:#475467}
.ayla-status-total strong{color:#172033}

@media(max-width:700px){
  .ayla-order-file-box{align-items:flex-start}
  .ayla-order-file-box .btn{width:100%;text-align:center}
  .ayla-payment-checkout{padding:16px}
  .ayla-payment-proof-form .btn{width:100%;text-align:center}
}


/* =========================================================
   AYLA V5.5 — VISUAL REFRESH / AD FOOTER + MOBILE POLISH
   Inspired by the approved AYLA reference layout.
   Functional PHP, forms, orders and WhatsApp are untouched.
   ========================================================= */
:root{
  --ayla-teal:#10bd86;
  --ayla-teal-2:#08a978;
  --ayla-navy:#0b2039;
  --ayla-dark:#0c1117;
  --ayla-muted:#98a1ad;
  --ayla-line:#273039;
}

/* Keep the existing page structure but give the key surfaces the approved AYLA visual language. */
.site-header{
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 1px 0 rgba(11,32,57,.08),0 8px 24px rgba(11,32,57,.035)!important;
}
.brand strong{color:var(--ayla-navy)!important;}
.brand-text{color:var(--ayla-navy)!important;}
.brand-mark{color:var(--ayla-teal)!important;}
.primary-menu a.is-active,.primary-menu a:hover,.nav a.is-active,.nav a:hover{color:var(--ayla-teal)!important;}
.nav-cta{background:var(--ayla-teal)!important;color:#fff!important;box-shadow:0 8px 20px rgba(16,189,134,.2)!important;}
.btn-primary,.ayla-btn-primary{background:linear-gradient(135deg,var(--ayla-teal),#13c77f)!important;box-shadow:0 10px 24px rgba(16,189,134,.16);}
.section-kicker,.eyebrow{color:var(--ayla-teal)!important;}
.hero h1 span,.catalog-hero h1 span{color:var(--ayla-teal)!important;}

/* Approved tracking/contact card: airy, rounded, green CTA. */
.contact-side .contact-card:last-child{
  border:1px solid #e3e9e6;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 34px rgba(11,32,57,.07);
  padding:28px;
}
.contact-side .contact-card:last-child h2{
  font-size:clamp(26px,4vw,36px);
  line-height:1.08;
  color:var(--ayla-navy);
}
.contact-side .contact-card:last-child p{
  color:#667085;
  font-size:17px;
  line-height:1.8;
}
.contact-side .contact-card:last-child .text-link{
  color:var(--ayla-teal)!important;
  font-size:18px;
  font-weight:900;
}

/* Footer: use the approved dark AYLA reference treatment. */
.site-footer{
  margin-top:56px!important;
  padding:62px 0 24px!important;
  background:linear-gradient(180deg,#0b1117 0%,#0c1117 100%)!important;
  color:#fff!important;
}
.site-footer .container{max-width:1180px!important;}
.footer-grid{
  grid-template-columns:1.55fr 1fr 1fr!important;
  gap:46px!important;
  padding-bottom:40px!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}
.footer-brand{
  display:flex!important;
  align-items:flex-start!important;
  gap:18px!important;
}
.footer-logo-mark.footer-logo-ad{
  width:76px!important;
  height:58px!important;
  flex:0 0 76px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
}
.footer-logo-ad svg{display:block;width:100%;height:auto;overflow:visible;}
.footer-grid > div:first-child h3{
  margin:0 0 10px!important;
  color:var(--ayla-teal)!important;
  font-size:24px!important;
  letter-spacing:-.02em;
}
.footer-grid > div:first-child p{
  max-width:520px!important;
  color:#a5adb7!important;
  font-size:15px!important;
  line-height:1.75!important;
}
.footer-grid h3{
  position:relative;
  display:inline-block;
  margin-bottom:22px!important;
  color:#fff!important;
  font-size:19px!important;
}
.footer-grid h3:after{
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin-top:9px;
  border-radius:999px;
  background:var(--ayla-teal);
}
.footer-grid p,.footer-grid a{
  color:#a7afb9!important;
  font-size:15px!important;
  line-height:1.75!important;
}
.footer-grid a:hover{color:var(--ayla-teal)!important;}
.footer-bottom{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:8px 28px!important;
  flex-wrap:wrap!important;
  padding-top:25px!important;
  color:#737d88!important;
  font-size:13px!important;
}
.footer-bottom span:last-child{color:#7e8791;}

.ayla-global-whatsapp{
  background:linear-gradient(135deg,#16d37f,#10bd86)!important;
  box-shadow:0 14px 32px rgba(16,189,134,.28)!important;
}

@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:34px!important;}
  .footer-grid > div:first-child{grid-column:1/-1;}
}
@media(max-width:640px){
  .site-footer{padding:52px 0 20px!important;margin-top:42px!important;}
  .site-footer .container{padding:0 20px!important;}
  .footer-grid{grid-template-columns:1fr!important;gap:30px!important;padding-bottom:32px!important;}
  .footer-grid > div:first-child{grid-column:auto!important;}
  .footer-brand{gap:15px!important;}
  .footer-logo-mark.footer-logo-ad{width:72px!important;height:55px!important;flex-basis:72px!important;}
  .footer-grid > div:first-child h3{font-size:21px!important;}
  .footer-grid > div:first-child p{font-size:14px!important;}
  .footer-grid h3{font-size:18px!important;margin-bottom:17px!important;}
  .footer-grid p,.footer-grid a{font-size:14px!important;}
  .footer-bottom{flex-direction:column!important;gap:5px!important;text-align:center!important;font-size:12px!important;}
}
\n\n/* =========================================================\n   AYLA V5.5.2 — FEATURED BANNER POLISH\n   Replaces the empty Featured Image placeholder when the\n   homepage has no featured image. Functional systems untouched.\n   ========================================================= */\n.ayla-featured-banner{\n  position:relative;\n  min-height:100%;\n  aspect-ratio:16/10;\n  overflow:hidden;\n  border-radius:28px;\n  background:\n    radial-gradient(circle at 86% 18%,rgba(16,189,134,.28),transparent 28%),\n    radial-gradient(circle at 12% 92%,rgba(16,189,134,.18),transparent 34%),\n    linear-gradient(135deg,#0b2039 0%,#102a45 58%,#0b1b2d 100%);\n  color:#fff;\n  isolation:isolate;\n}\n.ayla-featured-banner::before{\n  content:"";\n  position:absolute;\n  inset:14px;\n  border:1px solid rgba(255,255,255,.12);\n  border-radius:22px;\n  pointer-events:none;\n}\n.ayla-featured-content{\n  position:relative;\n  z-index:2;\n  min-height:100%;\n  display:grid;\n  grid-template-columns:minmax(100px,.7fr) minmax(0,1.7fr);\n  align-items:center;\n  gap:24px;\n  padding:42px 42px 38px;\n}\n.ayla-featured-logo{\n  display:flex;\n  justify-content:center;\n  align-items:center;\n}\n.ayla-featured-logo .custom-logo-link{\n  display:block;\n  line-height:0;\n}\n.ayla-featured-logo .custom-logo{\n  width:min(170px,100%);\n  height:auto;\n  max-height:120px;\n  object-fit:contain;\n  filter:drop-shadow(0 12px 22px rgba(0,0,0,.2));\n}\n.ayla-featured-ad{\n  width:118px;\n  height:118px;\n  display:grid;\n  place-items:center;\n  border-radius:32px;\n  background:linear-gradient(145deg,#19cf92,#0cae78);\n  color:#fff;\n  font-size:34px;\n  font-weight:950;\n  letter-spacing:-.08em;\n  box-shadow:0 18px 35px rgba(16,189,134,.24);\n}\n.ayla-featured-copy{max-width:520px}\n.ayla-featured-kicker{\n  display:inline-block;\n  margin-bottom:10px;\n  color:#49e0aa;\n  font-size:12px;\n  font-weight:900;\n  letter-spacing:.14em;\n}\n.ayla-featured-copy h2{\n  margin:0;\n  color:#fff;\n  font-size:clamp(30px,4vw,48px);\n  line-height:1.04;\n  letter-spacing:-.035em;\n}\n.ayla-featured-copy h2 span{color:#2bd394}\n.ayla-featured-copy p{\n  margin:15px 0 17px;\n  color:rgba(255,255,255,.76);\n  font-size:14px;\n  line-height:1.65;\n}\n.ayla-featured-badge{\n  display:inline-flex;\n  align-items:center;\n  gap:8px;\n  padding:9px 13px;\n  border:1px solid rgba(73,224,170,.25);\n  border-radius:999px;\n  background:rgba(16,189,134,.11);\n  color:#dffcf0;\n  font-size:12px;\n  font-weight:800;\n}\n.ayla-featured-badge span{\n  display:grid;\n  place-items:center;\n  width:19px;\n  height:19px;\n  border-radius:50%;\n  background:#12bd82;\n  color:#fff;\n}\n.ayla-featured-glow{\n  position:absolute;\n  z-index:1;\n  border-radius:50%;\n  filter:blur(2px);\n  pointer-events:none;\n}\n.ayla-featured-glow-one{\n  width:190px;\n  height:190px;\n  right:-65px;\n  top:-75px;\n  background:rgba(16,189,134,.22);\n}\n.ayla-featured-glow-two{\n  width:140px;\n  height:140px;\n  left:-60px;\n  bottom:-70px;\n  background:rgba(30,111,157,.20);\n}\n@media(max-width:820px){\n  .ayla-featured-banner{\n    aspect-ratio:auto;\n    min-height:360px;\n    border-radius:24px;\n  }\n  .ayla-featured-content{\n    grid-template-columns:1fr;\n    gap:14px;\n    text-align:center;\n    padding:34px 24px 30px;\n  }\n  .ayla-featured-logo{justify-content:center}\n  .ayla-featured-logo .custom-logo{width:min(125px,55vw);max-height:90px}\n  .ayla-featured-ad{width:88px;height:88px;border-radius:25px;font-size:27px}\n  .ayla-featured-copy{max-width:100%}\n  .ayla-featured-kicker{font-size:10px;letter-spacing:.11em}\n  .ayla-featured-copy h2{font-size:32px}\n  .ayla-featured-copy p{font-size:13px;margin:12px 0 15px}\n}\n@media(max-width:480px){\n  .hero-media{border-radius:22px}\n  .ayla-featured-banner{min-height:345px}\n  .ayla-featured-content{padding:30px 18px 26px}\n  .ayla-featured-copy h2{font-size:29px}\n  .ayla-featured-copy p{max-width:270px;margin-left:auto;margin-right:auto}\n}\n

/* =========================================================
   AYLA V5.5.3 — HOMEPAGE FEATURED BANNER
   Menggunakan artwork resmi AYLA Digital Printing.
   ========================================================= */
.hero-media-homepage {
    min-height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.ayla-homepage-banner {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 28px;
    box-shadow: 0 25px 60px rgba(16, 24, 40, 0.14);
}

@media (max-width: 1000px) {
    .hero-media-homepage {
        min-height: 0 !important;
    }

    .ayla-homepage-banner {
        border-radius: 20px;
        box-shadow: 0 18px 40px rgba(16, 24, 40, 0.10);
    }
}

@media (max-width: 640px) {
    .ayla-homepage-banner {
        border-radius: 18px;
        box-shadow: 0 14px 30px rgba(16, 24, 40, 0.09);
    }
}


/* =========================================================
   AYLA V5.5.4 — HERO PREMIUM POLISH
   Fokus visual Hero saja. Sistem transaksi/footer tidak disentuh.
   ========================================================= */
.hero{padding:72px 0 76px;}
.hero-grid{grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);gap:48px;align-items:center;}
.hero-copy{max-width:700px;}
.hero-copy h1{max-width:680px;font-size:clamp(42px,5vw,62px);line-height:1.03;letter-spacing:-.045em;margin:14px 0 18px;}
.hero-copy h1 span{color:var(--v4-green);}
.hero-copy p{max-width:610px;font-size:17px;line-height:1.7;}
.hero-media-homepage{align-self:center;}
.ayla-homepage-banner{width:100%;max-width:620px;margin-left:auto;aspect-ratio:auto;object-fit:cover;object-position:center;border-radius:30px;box-shadow:0 24px 60px rgba(16,24,40,.14);border:1px solid rgba(18,185,120,.10);}
@media (max-width:1100px){.hero-grid{gap:32px;}.hero-copy h1{font-size:clamp(40px,5vw,54px);}}
@media (max-width:820px){
.hero{padding:46px 0 54px;}.hero-grid{grid-template-columns:1fr;gap:26px;}.hero-copy{max-width:100%;}.hero-copy h1{max-width:620px;font-size:clamp(38px,11vw,54px);line-height:1.04;margin-top:12px;}.hero-copy p{font-size:16px;}.hero-media-homepage{width:100%;}.ayla-homepage-banner{max-width:none;width:100%;border-radius:24px;box-shadow:0 18px 42px rgba(16,24,40,.11);}
}
@media (max-width:520px){.hero{padding:38px 0 48px;}.hero-copy h1{font-size:clamp(35px,11vw,48px);letter-spacing:-.04em;}.hero-copy p{font-size:15px;line-height:1.65;}.hero-trust{margin-top:16px;}.ayla-homepage-banner{border-radius:20px;}}


/* =========================================================
   AYLA V5.5.5 — HOMEPAGE CLEAN MODERN HERO
   Visual-only homepage refinement.
   Footer, orders, payment, WhatsApp, invoice, uploads and
   database logic are intentionally untouched.
   ========================================================= */

.ayla-hero-premium{
  padding:38px 0 42px !important;
  background:#fff;
}

.ayla-hero-premium .hero-grid{
  grid-template-columns:minmax(0,.94fr) minmax(420px,1.06fr) !important;
  align-items:center !important;
  gap:46px !important;
}

.ayla-hero-premium .hero-copy{
  max-width:600px !important;
  align-self:center;
}

.ayla-hero-premium .eyebrow{
  margin-bottom:10px !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
}

.ayla-hero-premium .hero-copy h1{
  max-width:590px !important;
  margin:10px 0 17px !important;
  font-size:clamp(43px,4.25vw,58px) !important;
  line-height:1.03 !important;
  letter-spacing:-.045em !important;
}

.ayla-hero-premium .hero-copy p{
  max-width:555px !important;
  margin:0 !important;
  font-size:16px !important;
  line-height:1.62 !important;
}

.ayla-hero-premium .actions{
  margin-top:20px !important;
  gap:12px !important;
}

.ayla-hero-premium .actions .btn{
  min-height:48px !important;
  padding:12px 22px !important;
}

.ayla-hero-premium .hero-trust{
  margin-top:16px !important;
  gap:8px 17px !important;
  font-size:12px !important;
  line-height:1.4 !important;
}

.ayla-hero-premium .hero-media-homepage{
  width:100% !important;
  min-height:0 !important;
  align-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  background:transparent !important;
  border-radius:0 !important;
  overflow:visible !important;
  box-shadow:none !important;
}

.ayla-hero-premium .ayla-homepage-banner{
  display:block !important;
  width:100% !important;
  max-width:620px !important;
  height:auto !important;
  max-height:505px !important;
  margin-left:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  border:0 !important;
  border-radius:26px !important;
  box-shadow:0 20px 50px rgba(16,24,40,.10) !important;
}

/* Keep the product section visually close to the hero. */
.ayla-hero-premium + #produk{
  padding-top:30px !important;
}

@media (max-width:1100px) and (min-width:821px){
  .ayla-hero-premium .hero-grid{
    grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr) !important;
    gap:30px !important;
  }
  .ayla-hero-premium .hero-copy h1{
    font-size:clamp(39px,4.5vw,52px) !important;
  }
  .ayla-hero-premium .ayla-homepage-banner{
    max-height:455px !important;
  }
}

@media (max-width:820px){
  .ayla-hero-premium{
    padding:32px 0 38px !important;
  }
  .ayla-hero-premium .hero-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .ayla-hero-premium .hero-copy{
    max-width:100% !important;
  }
  .ayla-hero-premium .hero-copy h1{
    max-width:650px !important;
    font-size:clamp(38px,8.5vw,52px) !important;
  }
  .ayla-hero-premium .hero-media-homepage{
    justify-content:center !important;
  }
  .ayla-hero-premium .ayla-homepage-banner{
    max-width:680px !important;
    max-height:none !important;
    border-radius:22px !important;
  }
  .ayla-hero-premium + #produk{
    padding-top:18px !important;
  }
}

@media (max-width:600px){
  .ayla-hero-premium{
    padding:30px 0 34px !important;
  }
  .ayla-hero-premium .hero-grid{
    gap:22px !important;
  }
  .ayla-hero-premium .eyebrow{
    font-size:11px !important;
  }
  .ayla-hero-premium .hero-copy h1{
    margin:9px 0 14px !important;
    font-size:clamp(35px,10.5vw,48px) !important;
  }
  .ayla-hero-premium .hero-copy p{
    font-size:15px !important;
    line-height:1.62 !important;
  }
  .ayla-hero-premium .actions{
    margin-top:19px !important;
  }
  .ayla-hero-premium .hero-trust{
    margin-top:14px !important;
    gap:7px 12px !important;
    font-size:11px !important;
  }
  .ayla-hero-premium .ayla-homepage-banner{
    border-radius:20px !important;
    box-shadow:0 14px 34px rgba(16,24,40,.09) !important;
  }
}

@media (max-width:380px){
  .ayla-hero-premium .hero-copy h1{
    font-size:34px !important;
  }
  .ayla-hero-premium .hero-trust{
    font-size:10px !important;
  }
}

/* =========================================================
   AYLA V5.5.6 — HERO MATCH REFERENCE
   Fokus: menyamakan proporsi desktop dengan desain referensi.
   ========================================================= */
.ayla-hero-premium{
  padding:58px 0 54px !important;
}
.ayla-hero-premium .hero-grid{
  grid-template-columns:minmax(0,520px) minmax(390px,470px) !important;
  justify-content:space-between !important;
  gap:38px !important;
  align-items:center !important;
}
.ayla-hero-premium .hero-copy{
  max-width:520px !important;
}
.ayla-hero-premium .hero-copy h1{
  max-width:520px !important;
  font-size:clamp(43px,4.15vw,52px) !important;
  line-height:1.02 !important;
  letter-spacing:-.042em !important;
  margin:10px 0 17px !important;
}
.ayla-hero-premium .hero-copy p{
  max-width:500px !important;
  font-size:15px !important;
  line-height:1.62 !important;
}
.ayla-hero-premium .actions{
  margin-top:19px !important;
}
.ayla-hero-premium .hero-trust{
  margin-top:14px !important;
  gap:7px 15px !important;
  font-size:11px !important;
  white-space:nowrap !important;
}
.ayla-hero-premium .hero-media-homepage{
  width:100% !important;
  max-width:470px !important;
  justify-self:end !important;
}
.ayla-hero-premium .ayla-homepage-banner{
  width:100% !important;
  max-width:470px !important;
  max-height:none !important;
  border-radius:24px !important;
  box-shadow:0 18px 42px rgba(16,24,40,.09) !important;
}
.ayla-hero-premium + #produk{
  padding-top:30px !important;
}

@media (max-width:1100px) and (min-width:821px){
  .ayla-hero-premium{
    padding:48px 0 46px !important;
  }
  .ayla-hero-premium .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(350px,430px) !important;
    gap:28px !important;
  }
  .ayla-hero-premium .hero-copy h1{
    font-size:clamp(40px,4.4vw,49px) !important;
  }
  .ayla-hero-premium .hero-trust{
    font-size:10.5px !important;
    gap:6px 11px !important;
  }
}

@media (max-width:820px){
  .ayla-hero-premium{
    padding:34px 0 40px !important;
  }
  .ayla-hero-premium .hero-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .ayla-hero-premium .hero-copy{
    max-width:100% !important;
  }
  .ayla-hero-premium .hero-copy h1{
    max-width:620px !important;
    font-size:clamp(37px,8.5vw,50px) !important;
  }
  .ayla-hero-premium .hero-trust{
    white-space:normal !important;
  }
  .ayla-hero-premium .hero-media-homepage{
    max-width:680px !important;
    justify-self:center !important;
  }
  .ayla-hero-premium .ayla-homepage-banner{
    max-width:680px !important;
    border-radius:22px !important;
  }
}

@media (max-width:520px){
  .ayla-hero-premium{
    padding:30px 0 34px !important;
  }
  .ayla-hero-premium .hero-copy h1{
    font-size:clamp(35px,10.5vw,47px) !important;
  }
  .ayla-hero-premium .hero-copy p{
    font-size:15px !important;
  }
  .ayla-hero-premium .hero-trust{
    font-size:11px !important;
  }
}


/* =========================================================
   AYLA V5.5.7 — HERO IMAGE WIDER
   Menyamakan proporsi dengan referensi desktop:
   teks kiri tetap ringkas, visual produk kanan lebih lebar.
   ========================================================= */

@media (min-width: 901px) {
    .hero-grid {
        grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
        gap: 42px;
        align-items: center;
    }

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

    .hero h1 {
        max-width: 600px;
        font-size: clamp(38px, 4.65vw, 58px);
        line-height: 1.02;
    }

    .hero p {
        max-width: 560px;
        font-size: 16px;
        line-height: 1.6;
    }

    .hero-media.hero-media-homepage {
        width: 100%;
        min-height: 455px;
        border-radius: 24px;
        background: transparent;
        box-shadow: none;
    }

    .hero-media.hero-media-homepage img.ayla-homepage-banner {
        width: 100%;
        height: auto;
        max-width: none;
        display: block;
        object-fit: contain;
        object-position: center;
        transform: scale(1.04);
        transform-origin: center;
    }
}

@media (min-width: 1200px) {
    .hero-grid {
        grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
        gap: 48px;
    }

    .hero h1 {
        font-size: 56px;
    }

    .hero-media.hero-media-homepage {
        min-height: 485px;
    }
}

@media (max-width: 900px) {
    .hero-media.hero-media-homepage {
        min-height: 0;
        background: transparent;
        box-shadow: none;
    }

    .hero-media.hero-media-homepage img.ayla-homepage-banner {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: none;
    }
}


/* =========================================================
   AYLA V5.5.8 — REFERENCE HOMEPAGE STYLE
   Heading 2 baris + service strip seperti referensi.
   ========================================================= */
.ayla-hero-premium .hero-copy h1{
  max-width:620px !important;
  font-size:clamp(34px,3.35vw,46px) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
  white-space:normal !important;
}
.ayla-hero-premium .hero-copy h1 span{color:var(--ayla-teal)!important;}
.ayla-service-strip{padding:0 0 24px;background:#fff;}
.ayla-service-strip-inner{max-width:980px;margin:0 auto;background:#fff;border:1px solid rgba(16,24,40,.06);border-radius:24px;box-shadow:0 12px 32px rgba(16,24,40,.07);padding:12px 18px 10px;}
.ayla-service-title{text-align:center;font-size:13px;font-weight:800;letter-spacing:.02em;color:#111827;margin-bottom:8px;}
.ayla-service-title span{color:var(--ayla-teal);}
.ayla-service-items{display:grid;grid-template-columns:repeat(8,1fr);}
.ayla-service-items a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:66px;padding:5px 8px;color:#111827;text-decoration:none;border-left:1px solid rgba(16,24,40,.10);font-size:10px;font-weight:800;text-align:center;line-height:1.15;}
.ayla-service-items a:first-child{border-left:0;}
.ayla-service-items b{font-size:20px;line-height:1;color:var(--ayla-teal);font-weight:900;}
.ayla-service-items a:hover{color:var(--ayla-teal);}
@media (min-width:1200px){.ayla-hero-premium .hero-copy h1{font-size:44px!important;}.ayla-service-strip{padding-bottom:28px;}}
@media (max-width:900px){.ayla-service-items{grid-template-columns:repeat(4,1fr);}.ayla-service-items a:nth-child(5){border-left:0;}.ayla-service-strip-inner{border-radius:20px;}}
@media (max-width:520px){.ayla-hero-premium .hero-copy h1{font-size:clamp(31px,8.8vw,40px)!important;line-height:1.08!important;}.ayla-service-strip-inner{padding:10px 8px 8px;border-radius:18px;}.ayla-service-title{font-size:11px;margin-bottom:5px;}.ayla-service-items a{font-size:8px;min-height:58px;padding:4px 2px;}.ayla-service-items b{font-size:17px;}}

/* =========================================================
   AYLA V5.5.10 — MOBILE REFERENCE POLISH
   Fokus: heading 2 baris, hero image lebih lebar,
   benefit + kategori memakai ikon outline yang seragam.
   ========================================================= */
.ayla-hero-title{display:flex!important;flex-direction:column!important;gap:0!important;max-width:100%!important;}
.ayla-hero-title .ayla-hero-line{display:block!important;white-space:nowrap!important;}
.ayla-hero-title .ayla-hero-line em{font-style:normal!important;color:var(--ayla-teal)!important;}
.ayla-hero-premium .hero-trust span{display:inline-flex!important;align-items:center!important;gap:7px!important;}
.ayla-hero-premium .hero-trust svg{width:19px;height:19px;fill:none;stroke:var(--ayla-teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.ayla-service-items b{display:grid!important;place-items:center!important;font-size:0!important;}
.ayla-service-items b svg{width:21px;height:21px;fill:none;stroke:var(--ayla-teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ayla-service-items a:hover b svg{stroke:var(--ayla-teal-2);}
.feature-icon,.process-icon{display:grid!important;place-items:center!important;}
.feature-icon svg,.process-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.fit-list span{display:inline-flex!important;align-items:center!important;gap:7px!important;}
.fit-list span svg{width:18px;height:18px;fill:none;stroke:var(--ayla-teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}

@media (min-width:821px){
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{font-size:44px!important;line-height:1.08!important;max-width:610px!important;letter-spacing:-.038em!important;}
  .ayla-hero-premium .hero-media-homepage{max-width:500px!important;}
  .ayla-hero-premium .ayla-homepage-banner{max-width:500px!important;}
  .ayla-hero-premium .hero-trust{gap:8px 18px!important;}
}

@media (max-width:820px){
  .ayla-hero-premium{padding:28px 0 30px!important;}
  .ayla-hero-premium .hero-grid{gap:18px!important;}
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{font-size:30px!important;line-height:1.08!important;letter-spacing:-.052em!important;max-width:none!important;}
  .ayla-hero-premium .hero-copy p{font-size:15px!important;line-height:1.58!important;margin-top:14px!important;}
  .ayla-hero-premium .actions{margin-top:16px!important;}
  .ayla-hero-premium .hero-trust{margin-top:14px!important;gap:8px 15px!important;font-size:11px!important;}
  .ayla-hero-premium .hero-media-homepage{width:100%!important;max-width:none!important;justify-self:stretch!important;margin-top:2px!important;}
  .ayla-hero-premium .ayla-homepage-banner{width:100%!important;max-width:none!important;border-radius:18px!important;box-shadow:0 12px 28px rgba(16,24,40,.08)!important;}
}

@media (max-width:520px){
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{font-size:27px!important;letter-spacing:-.055em!important;}
  .ayla-hero-premium .hero-trust{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px 8px!important;align-items:start!important;}
  .ayla-hero-premium .hero-trust span{font-size:10.5px!important;line-height:1.25!important;justify-content:flex-start!important;}
  .ayla-hero-premium .hero-trust svg{width:18px;height:18px;}
  .ayla-service-strip{padding-bottom:18px!important;}
  .ayla-service-strip-inner{padding:9px 6px 7px!important;border-radius:16px!important;}
  .ayla-service-title{font-size:10px!important;margin-bottom:4px!important;}
  .ayla-service-items a{min-height:54px!important;font-size:7.5px!important;gap:4px!important;line-height:1.1!important;}
  .ayla-service-items b svg{width:18px;height:18px;}
}


/* =========================================================
   AYLA V5.5.11 — FINAL REFERENCE POLISH
   Hero uses the approved 1200x800 AYLA product artwork.
   Mobile categories scroll horizontally; heading uses navy + AYLA green.
   Existing business logic intentionally untouched.
   ========================================================= */
.ayla-hero-premium .hero-copy h1.ayla-hero-title{
  color:#101827!important;
  max-width:620px!important;
}
.ayla-hero-premium .hero-copy h1.ayla-hero-title .ayla-hero-line{
  color:#101827!important;
}
.ayla-hero-premium .hero-copy h1.ayla-hero-title em{
  color:var(--ayla-teal)!important;
}
.ayla-hero-premium .eyebrow{
  margin-top:4px!important;
  margin-bottom:12px!important;
}
.ayla-hero-premium .ayla-homepage-banner{
  width:100%!important;
  max-width:620px!important;
  aspect-ratio:3 / 2!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:26px!important;
}
.ayla-hero-premium .hero-media-homepage{
  max-width:620px!important;
}

@media (min-width:821px){
  .ayla-hero-premium .hero-grid{
    grid-template-columns:minmax(0,520px) minmax(0,620px)!important;
    gap:34px!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    font-size:clamp(38px,3.35vw,46px)!important;
    line-height:1.08!important;
    letter-spacing:-.038em!important;
  }
}

@media (max-width:820px){
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    font-size:clamp(28px,8.2vw,34px)!important;
    line-height:1.08!important;
    letter-spacing:-.045em!important;
  }
  .ayla-hero-premium .eyebrow{
    margin-top:0!important;
    margin-bottom:11px!important;
  }
  .ayla-hero-premium .hero-copy p{
    margin-top:13px!important;
  }
  .ayla-hero-premium .ayla-homepage-banner{
    aspect-ratio:3 / 2!important;
    border-radius:18px!important;
    box-shadow:0 12px 30px rgba(16,24,40,.08)!important;
  }
  .ayla-service-strip-inner{
    overflow:hidden!important;
  }
  .ayla-service-items{
    display:flex!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    justify-content:flex-start!important;
    scroll-snap-type:x proximity!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding-bottom:2px!important;
  }
  .ayla-service-items::-webkit-scrollbar{display:none!important;}
  .ayla-service-items a{
    flex:0 0 92px!important;
    min-height:58px!important;
    border-left:1px solid rgba(16,24,40,.10)!important;
    scroll-snap-align:start!important;
  }
  .ayla-service-items a:first-child{border-left:0!important;}
}

@media (max-width:520px){
  .ayla-hero-premium{
    padding-top:27px!important;
    padding-bottom:28px!important;
  }
  .ayla-hero-premium .hero-grid{gap:19px!important;}
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    font-size:27px!important;
    line-height:1.08!important;
    letter-spacing:-.048em!important;
  }
  .ayla-hero-premium .hero-copy p{
    font-size:15px!important;
    line-height:1.58!important;
  }
  .ayla-hero-premium .actions{
    margin-top:16px!important;
  }
  .ayla-hero-premium .hero-trust{
    margin-top:13px!important;
  }
  .ayla-service-strip{padding-bottom:16px!important;}
  .ayla-service-strip-inner{border-radius:16px!important;}
  .ayla-service-title{font-size:10px!important;}
}

/* =========================================================
   AYLA V5.5.12 — DESKTOP HERO HEADING REFINEMENT
   Desktop heading follows the approved reference:
   two balanced lines, navy main text + AYLA green emphasis.
   Mobile layout remains unchanged.
   ========================================================= */
@media (min-width:821px){
  .ayla-hero-premium .hero-grid{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
    gap:38px!important;
  }
  .ayla-hero-premium .hero-copy{
    max-width:640px!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    width:100%!important;
    max-width:640px!important;
    font-size:clamp(40px,3.25vw,46px)!important;
    line-height:1.08!important;
    letter-spacing:-.038em!important;
    margin:11px 0 17px!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title .ayla-hero-line{
    white-space:nowrap!important;
  }
  .ayla-hero-premium .hero-media-homepage{
    max-width:none!important;
    justify-content:flex-end!important;
  }
  .ayla-hero-premium .ayla-homepage-banner{
    width:100%!important;
    max-width:590px!important;
  }
}

@media (min-width:1200px){
  .ayla-hero-premium .hero-grid{
    grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr)!important;
    gap:42px!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    font-size:45px!important;
    max-width:650px!important;
  }
  .ayla-hero-premium .ayla-homepage-banner{
    max-width:600px!important;
  }
}

@media (min-width:821px) and (max-width:1000px){
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    font-size:39px!important;
    letter-spacing:-.035em!important;
  }
}


/* =========================================================
   AYLA V5.5.13 — DESKTOP HERO OVERFLOW FIX
   Prevents the two-line hero heading from crossing into the
   product artwork. Mobile layout remains unchanged.
   ========================================================= */
@media (min-width:1101px){
  .ayla-hero-premium .hero-grid{
    grid-template-columns:minmax(0,540px) minmax(0,600px)!important;
    gap:38px!important;
    align-items:center!important;
  }
  .ayla-hero-premium .hero-copy{
    min-width:0!important;
    max-width:540px!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    max-width:540px!important;
    font-size:40px!important;
    line-height:1.10!important;
    letter-spacing:-.042em!important;
    overflow:visible!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title .ayla-hero-line{
    display:block!important;
    white-space:nowrap!important;
  }
  .ayla-hero-premium .hero-media-homepage{
    width:100%!important;
    max-width:600px!important;
    min-width:0!important;
    justify-self:end!important;
  }
  .ayla-hero-premium .ayla-homepage-banner{
    width:100%!important;
    max-width:600px!important;
    display:block!important;
  }
}

@media (min-width:821px) and (max-width:1100px){
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    max-width:100%!important;
    font-size:36px!important;
    line-height:1.10!important;
    letter-spacing:-.04em!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title .ayla-hero-line{
    white-space:nowrap!important;
  }
}

/* =========================================================
   AYLA V5.5.14 — DESKTOP HERO FINAL BALANCE
   Final desktop refinement from V5.5.13 screenshot review.
   Goal: keep the two-line heading fully inside the left column,
   move the artwork cleanly to the right, and leave mobile intact.
   ========================================================= */
@media (min-width:1101px){
  .ayla-hero-premium .hero-grid{
    grid-template-columns:minmax(0,500px) minmax(0,560px)!important;
    gap:54px!important;
    justify-content:space-between!important;
    align-items:center!important;
  }
  .ayla-hero-premium .hero-copy{
    width:100%!important;
    max-width:500px!important;
    min-width:0!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    width:100%!important;
    max-width:500px!important;
    font-size:36px!important;
    line-height:1.10!important;
    letter-spacing:-.036em!important;
    margin:11px 0 17px!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title .ayla-hero-line{
    display:block!important;
    width:100%!important;
    white-space:nowrap!important;
  }
  .ayla-hero-premium .hero-copy p{
    max-width:490px!important;
    font-size:15px!important;
    line-height:1.62!important;
  }
  .ayla-hero-premium .hero-media-homepage{
    width:100%!important;
    max-width:560px!important;
    min-width:0!important;
    justify-self:end!important;
  }
  .ayla-hero-premium .ayla-homepage-banner{
    width:100%!important;
    max-width:560px!important;
    height:auto!important;
    max-height:none!important;
    display:block!important;
    margin-left:auto!important;
    object-fit:contain!important;
    transform:none!important;
  }
}

@media (min-width:821px) and (max-width:1100px){
  .ayla-hero-premium .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(360px,440px)!important;
    gap:30px!important;
    align-items:center!important;
  }
  .ayla-hero-premium .hero-copy{
    max-width:100%!important;
    min-width:0!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    max-width:100%!important;
    font-size:34px!important;
    line-height:1.10!important;
    letter-spacing:-.035em!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title .ayla-hero-line{
    white-space:nowrap!important;
  }
  .ayla-hero-premium .hero-media-homepage,
  .ayla-hero-premium .ayla-homepage-banner{
    max-width:440px!important;
  }
}

/* =========================================================
   AYLA V5.5.15 — DESKTOP HERO BALANCE
   Fine-tuning based on V5.5.14 desktop review.
   Mobile/tablet rules are intentionally untouched.
   ========================================================= */
@media (min-width: 1001px){
  .hero.ayla-hero-premium{
    padding: 72px 0 76px;
    overflow: hidden;
  }

  .hero.ayla-hero-premium .container{
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero.ayla-hero-premium .hero-grid{
    grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
    gap: 44px;
    align-items: center;
  }

  .hero.ayla-hero-premium .hero-copy{
    min-width: 0;
    max-width: 610px;
  }

  .hero.ayla-hero-premium .eyebrow{
    margin-bottom: 18px;
    font-size: 13px;
    padding: 7px 13px;
  }

  .hero.ayla-hero-premium .ayla-hero-title{
    max-width: 590px;
    margin: 0 0 18px;
    font-size: clamp(40px,3.45vw,48px);
    line-height: 1.08;
    letter-spacing: -.035em;
    overflow-wrap: normal;
  }

  .hero.ayla-hero-premium .ayla-hero-line{
    display: block;
    white-space: nowrap;
  }

  .hero.ayla-hero-premium .ayla-hero-title em{
    font-style: normal;
    color: var(--v4-green);
  }

  .hero.ayla-hero-premium p{
    max-width: 570px;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.62;
  }

  .hero.ayla-hero-premium .actions{
    gap: 12px;
  }

  .hero.ayla-hero-premium .actions .btn{
    min-height: 48px;
    padding: 0 22px;
    font-size: 14px;
  }

  .hero.ayla-hero-premium .hero-trust{
    margin-top: 16px;
    gap: 8px 18px;
    font-size: 12px;
  }

  .hero.ayla-hero-premium .hero-media-homepage{
    width: 100%;
    max-width: 670px;
    justify-self: end;
    border-radius: 28px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
  }

  .hero.ayla-hero-premium .hero-media-homepage img.ayla-homepage-banner{
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    border-radius: 28px;
    box-shadow: 0 14px 40px rgba(16,24,40,.08);
  }
}

/* =========================================================
   AYLA V5.5.16 — DESKTOP HERO TITLE SCALE
   Requested refinement: smaller desktop heading while keeping
   the approved two-line layout. Mobile remains unchanged.
   ========================================================= */
@media (min-width:821px){
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    font-size:39px!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
    max-width:610px!important;
    margin:10px 0 16px!important;
  }
  .ayla-hero-premium .hero-copy h1.ayla-hero-title .ayla-hero-line{
    display:block!important;
    white-space:nowrap!important;
  }
}
@media (min-width:1200px){
  .ayla-hero-premium .hero-copy h1.ayla-hero-title{
    font-size:40px!important;
    max-width:620px!important;
  }
}

/* =========================================================
   AYLA V5.5.17 — SERVICE STRIP REFERENCE POLISH
   Desktop: closer to approved reference with a clean rounded
   white panel, equal-width service columns, subtle dividers,
   and clearer teal icons. Mobile horizontal-scroll behavior
   remains unchanged.
   ========================================================= */
@media (min-width:821px){
  .ayla-service-strip{
    padding: 8px 0 34px!important;
  }
  .ayla-service-strip .container{
    max-width:1240px!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .ayla-service-strip-inner{
    width:100%!important;
    background:#fff!important;
    border:1px solid rgba(16,24,40,.08)!important;
    border-radius:24px!important;
    box-shadow:0 12px 34px rgba(16,24,40,.055)!important;
    padding:14px 18px 12px!important;
  }
  .ayla-service-title{
    text-align:center!important;
    font-size:15px!important;
    line-height:1.25!important;
    font-weight:800!important;
    letter-spacing:.01em!important;
    margin:0 0 10px!important;
    color:#101827!important;
  }
  .ayla-service-title span{
    color:var(--ayla-teal)!important;
  }
  .ayla-service-items{
    display:grid!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    align-items:stretch!important;
    width:100%!important;
  }
  .ayla-service-items a{
    min-height:74px!important;
    padding:8px 8px 6px!important;
    gap:7px!important;
    border-left:1px solid rgba(16,24,40,.10)!important;
    color:#101827!important;
    transition:transform .18s ease,background .18s ease!important;
  }
  .ayla-service-items a:first-child{
    border-left:0!important;
  }
  .ayla-service-items a:hover{
    background:rgba(24,190,139,.045)!important;
    transform:translateY(-1px)!important;
  }
  .ayla-service-items b{
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
    background:rgba(24,190,139,.07)!important;
    display:grid!important;
    place-items:center!important;
  }
  .ayla-service-items b svg{
    width:21px!important;
    height:21px!important;
    stroke:var(--ayla-teal)!important;
    stroke-width:1.75!important;
  }
  .ayla-service-items a span{
    font-size:10px!important;
    line-height:1.15!important;
    font-weight:800!important;
    letter-spacing:.015em!important;
    text-align:center!important;
  }
}

@media (min-width:821px) and (max-width:1100px){
  .ayla-service-strip-inner{padding-left:8px!important;padding-right:8px!important;}
  .ayla-service-title{font-size:13px!important;}
  .ayla-service-items a{padding-left:4px!important;padding-right:4px!important;}
  .ayla-service-items a span{font-size:9px!important;}
}

@media (max-width:820px){
  .ayla-service-strip-inner{
    border:1px solid rgba(16,24,40,.08)!important;
    box-shadow:0 10px 26px rgba(16,24,40,.045)!important;
  }
  .ayla-service-items b{
    border-radius:8px!important;
    background:rgba(24,190,139,.055)!important;
  }
}

/* =========================================================
   AYLA V5.5.18 — DESKTOP HERO TITLE FINAL SCALE
   Screenshot review: reduce desktop heading so it stays fully
   inside the left column and never crosses the product artwork.
   Keep the approved 2-line wording and mobile behavior intact.
   ========================================================= */
@media (min-width:1101px){
  /* V5.5.19: desktop hero = 40% copy / 60% product image */
  .hero.ayla-hero-premium .hero-grid{
    grid-template-columns:minmax(0,2fr) minmax(0,3fr)!important;
    gap:32px!important;
    align-items:center!important;
    justify-content:stretch!important;
  }
  .hero.ayla-hero-premium .hero-copy{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  .hero.ayla-hero-premium .hero-copy h1.ayla-hero-title{
    width:100%!important;
    max-width:none!important;
    font-size:34px!important;
    line-height:1.08!important;
    letter-spacing:-.032em!important;
    margin:10px 0 16px!important;
    overflow:visible!important;
  }
  .hero.ayla-hero-premium .hero-copy h1.ayla-hero-title .ayla-hero-line{
    display:block!important;
    width:100%!important;
    white-space:nowrap!important;
  }
  .hero.ayla-hero-premium .hero-media-homepage{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    justify-self:stretch!important;
  }
  .hero.ayla-hero-premium .hero-media-homepage img.ayla-homepage-banner{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    display:block!important;
    object-fit:contain!important;
  }
}

@media (min-width:821px) and (max-width:1100px){
  .hero.ayla-hero-premium .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(350px,440px)!important;
    gap:28px!important;
    align-items:center!important;
  }
  .hero.ayla-hero-premium .hero-copy{
    max-width:100%!important;
    min-width:0!important;
  }
  .hero.ayla-hero-premium .hero-copy h1.ayla-hero-title{
    max-width:100%!important;
    font-size:31px!important;
    line-height:1.10!important;
    letter-spacing:-.03em!important;
  }
  .hero.ayla-hero-premium .hero-copy h1.ayla-hero-title .ayla-hero-line{
    white-space:nowrap!important;
  }
}

/* =========================================================
   AYLA V5.5.20 — PRODUCT SECTION REFERENCE POLISH
   Tahap berikutnya setelah hero: Produk AYLA dibuat lebih
   mirip referensi. Tidak mengubah database, checkout,
   WhatsApp, footer, atau fungsi transaksi.
   ========================================================= */
#produk{
  padding-top:54px!important;
  padding-bottom:74px!important;
  background:#fff!important;
}
#produk .section-head{
  margin-bottom:24px!important;
  align-items:flex-end!important;
}
#produk .section-kicker{
  margin-bottom:6px!important;
  color:#19ad79!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:.12em!important;
}
#produk .section-head h2{
  margin:0 0 7px!important;
  color:#101827!important;
  font-size:clamp(30px,3.2vw,42px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}
#produk .section-head p{
  margin:0!important;
  color:#697586!important;
  font-size:14px!important;
  line-height:1.6!important;
}
#produk .section-link{
  color:#16ae78!important;
  font-size:14px!important;
  font-weight:850!important;
  white-space:nowrap!important;
  padding-bottom:5px!important;
}
#produk .grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
}
#produk .card{
  position:relative!important;
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid #e4ebe8!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(16,24,40,.055)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}
#produk .card:hover{
  transform:translateY(-4px)!important;
  border-color:#cce8dc!important;
  box-shadow:0 16px 34px rgba(16,24,40,.10)!important;
}
#produk .card-image{
  position:relative!important;
  aspect-ratio:1/1!important;
  display:block!important;
  overflow:hidden!important;
  background:#f3f8f6!important;
}
#produk .card-image::after{
  content:'♡';
  position:absolute;
  right:11px;
  top:11px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.96);
  color:#16ae78;
  font-size:20px;
  line-height:1;
  box-shadow:0 5px 14px rgba(16,24,40,.10);
  pointer-events:none;
}
#produk .card-image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transition:transform .35s ease!important;
}
#produk .card:hover .card-image img{transform:scale(1.035)!important;}
#produk .card-body{
  padding:16px 16px 17px!important;
}
#produk .card-body .badge{
  display:inline-flex!important;
  align-items:center!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:#eaf9f3!important;
  color:#129a6a!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.03em!important;
}
#produk .card h3{
  margin:9px 0 6px!important;
  font-size:17px!important;
  line-height:1.28!important;
  letter-spacing:-.015em!important;
}
#produk .card h3 a{color:#101827!important;text-decoration:none!important;}
#produk .card h3 a:hover{color:#129a6a!important;}
#produk .price{
  color:#129a6a!important;
  font-size:15px!important;
  font-weight:850!important;
}
#produk .card-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  margin-top:13px!important;
}
#produk .card-actions .btn{
  min-height:40px!important;
  padding:9px 11px!important;
  border-radius:11px!important;
  font-size:12px!important;
}

@media (max-width:1100px) and (min-width:821px){
  #produk .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media (max-width:820px){
  #produk{padding-top:42px!important;padding-bottom:58px!important;}
  #produk .section-head{margin-bottom:20px!important;}
  #produk .section-head h2{font-size:30px!important;}
  #produk .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;}
  #produk .card{border-radius:17px!important;}
  #produk .card-body{padding:13px!important;}
  #produk .card h3{font-size:15px!important;}
  #produk .card-actions{display:none!important;}
}
@media (max-width:520px){
  #produk .section-head{align-items:flex-start!important;gap:10px!important;}
  #produk .section-head p{font-size:13px!important;}
  #produk .section-link{font-size:13px!important;padding-top:5px!important;}
  #produk .grid{gap:12px!important;}
  #produk .card-image::after{width:30px;height:30px;right:8px;top:8px;font-size:18px;}
  #produk .card-body{padding:11px!important;}
  #produk .card-body .badge{font-size:9px!important;padding:4px 7px!important;}
  #produk .card h3{font-size:14px!important;margin:7px 0 5px!important;}
  #produk .price{font-size:13px!important;}
}

/* =========================================================
   AYLA V5.5.21 — SERVICE CATEGORY STRIP REFINEMENT
   Match the approved reference: centered compact white panel,
   stronger title hierarchy, simple teal line icons, equal
   category columns and subtle vertical separators.
   Mobile layout remains untouched.
   ========================================================= */
@media (min-width:821px){
  .ayla-service-strip{
    padding: 10px 0 38px!important;
  }
  .ayla-service-strip .container{
    max-width: 1080px!important;
    padding-left: 20px!important;
    padding-right: 20px!important;
  }
  .ayla-service-strip-inner{
    width:100%!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:1px solid rgba(16,24,40,.075)!important;
    border-radius:26px!important;
    box-shadow:0 10px 28px rgba(16,24,40,.045)!important;
    padding:16px 18px 12px!important;
  }
  .ayla-service-title{
    text-align:center!important;
    font-size:15px!important;
    line-height:1.25!important;
    font-weight:850!important;
    letter-spacing:.015em!important;
    margin:0 0 12px!important;
    color:#101827!important;
  }
  .ayla-service-title span{
    color:var(--ayla-teal)!important;
  }
  .ayla-service-items{
    display:grid!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    align-items:stretch!important;
    width:100%!important;
  }
  .ayla-service-items a{
    min-height:72px!important;
    padding:7px 6px 5px!important;
    gap:6px!important;
    border-left:1px solid rgba(16,24,40,.11)!important;
    border-radius:0!important;
    color:#101827!important;
    background:transparent!important;
    transform:none!important;
  }
  .ayla-service-items a:first-child{
    border-left:0!important;
  }
  .ayla-service-items a:hover{
    background:rgba(24,190,139,.025)!important;
    transform:none!important;
  }
  .ayla-service-items b{
    width:34px!important;
    height:34px!important;
    border-radius:0!important;
    background:transparent!important;
    display:grid!important;
    place-items:center!important;
  }
  .ayla-service-items b svg{
    width:23px!important;
    height:23px!important;
    stroke:var(--ayla-teal)!important;
    stroke-width:1.65!important;
    fill:none!important;
  }
  .ayla-service-items a span{
    font-size:10px!important;
    line-height:1.18!important;
    font-weight:800!important;
    letter-spacing:.01em!important;
    text-align:center!important;
    color:#101827!important;
  }
}

@media (min-width:821px) and (max-width:1100px){
  .ayla-service-strip .container{max-width:1000px!important;}
  .ayla-service-strip-inner{padding-left:10px!important;padding-right:10px!important;}
  .ayla-service-title{font-size:14px!important;margin-bottom:10px!important;}
  .ayla-service-items a{padding-left:3px!important;padding-right:3px!important;}
  .ayla-service-items a span{font-size:9px!important;}
}

/* =========================================================
   AYLA V5.5.22 — REFERENCE CATEGORY ICONS
   Refine only the desktop service/category strip.
   Homepage photo and mobile layout remain unchanged.
   ========================================================= */
@media (min-width:821px){
  .ayla-service-strip{padding:12px 0 34px!important;}
  .ayla-service-strip .container{max-width:1120px!important;}
  .ayla-service-strip-inner{
    max-width:960px!important;
    margin:0 auto!important;
    padding:15px 16px 10px!important;
    border-radius:20px!important;
    border:1px solid rgba(16,24,40,.08)!important;
    box-shadow:0 8px 24px rgba(16,24,40,.035)!important;
  }
  .ayla-service-title{
    font-size:14px!important;
    margin:0 0 9px!important;
    letter-spacing:.01em!important;
  }
  .ayla-service-items a{
    min-height:66px!important;
    padding:5px 4px 4px!important;
    gap:4px!important;
  }
  .ayla-service-items b{
    width:32px!important;height:32px!important;
  }
  .ayla-service-items b svg{
    width:22px!important;height:22px!important;
    stroke-width:1.55!important;
  }
  .ayla-service-items a span{
    font-size:9px!important;
    line-height:1.15!important;
    font-weight:800!important;
  }
}

/* =========================================================
   AYLA V5.5.24 — HERO CTA + BENEFIT FINISHING
   Fokus tahap ini:
   - 3 benefit selalu sejajar di desktop
   - tombol CTA terasa sedikit mengambang seperti referensi
   - tombol tetap normal di mobile
   - foto hero dan sistem WhatsApp tidak disentuh
   ========================================================= */

@media (min-width: 901px){
  .ayla-hero-premium .actions{
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
  }

  .ayla-hero-premium .actions .btn{
    position:relative!important;
    min-height:50px!important;
    border-radius:14px!important;
    padding:13px 24px!important;
    font-weight:850!important;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
  }

  .ayla-hero-premium .actions .btn-primary{
    box-shadow:0 10px 24px rgba(22,184,121,.18)!important;
  }

  .ayla-hero-premium .actions .btn-primary:hover{
    transform:translateY(-3px)!important;
    box-shadow:0 14px 30px rgba(22,184,121,.25)!important;
  }

  .ayla-hero-premium .actions .btn-secondary{
    border:1px solid rgba(16,24,40,.13)!important;
    background:#fff!important;
    box-shadow:0 8px 20px rgba(16,24,40,.07)!important;
  }

  .ayla-hero-premium .actions .btn-secondary:hover{
    transform:translateY(-3px)!important;
    border-color:rgba(22,184,121,.30)!important;
    box-shadow:0 12px 26px rgba(16,24,40,.10)!important;
  }

  /* Three benefits: one clean row, no wrapping */
  .ayla-hero-premium .hero-trust{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    max-width:560px!important;
    margin-top:19px!important;
  }

  .ayla-hero-premium .hero-trust span{
    min-width:0!important;
    white-space:nowrap!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    font-size:13px!important;
    font-weight:750!important;
    color:#344054!important;
  }

  .ayla-hero-premium .hero-trust svg{
    width:21px!important;
    height:21px!important;
    flex:0 0 21px!important;
    stroke-width:1.8!important;
  }

  /* Keep the service panel visually compact and close to the reference */
  .ayla-service-strip{
    padding-top:8px!important;
    padding-bottom:30px!important;
  }

  .ayla-service-strip-inner{
    box-shadow:0 12px 30px rgba(16,24,40,.055)!important;
  }
}

@media (max-width:900px){
  .ayla-hero-premium .actions .btn{
    border-radius:14px!important;
    box-shadow:none!important;
  }

  .ayla-hero-premium .hero-trust{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:12px 18px!important;
  }

  .ayla-hero-premium .hero-trust span{
    white-space:nowrap!important;
  }
}

@media (max-width:520px){
  .ayla-hero-premium .actions{
    gap:12px!important;
  }

  .ayla-hero-premium .actions .btn{
    min-height:50px!important;
    padding:11px 18px!important;
  }

  .ayla-hero-premium .hero-trust{
    gap:10px 16px!important;
  }
}

/* =========================================================
   AYLA V5.5.25 — SERVICE STRIP + PRODUCT SPACING REFINEMENT
   Referensi: card layanan putih yang lebih tegas, ikon outline
   lebih jelas, pembatas antar layanan, dan jarak ke Produk AYLA
   dibuat lebih rapat. Foto hero dan fungsi website tidak disentuh.
   ========================================================= */

@media (min-width:821px){
  .ayla-service-strip{
    padding:10px 0 24px!important;
  }

  .ayla-service-strip .container{
    max-width:1120px!important;
  }

  .ayla-service-strip-inner{
    max-width:1020px!important;
    margin:0 auto!important;
    padding:16px 18px 12px!important;
    border-radius:24px!important;
    border:1px solid rgba(16,24,40,.075)!important;
    background:#fff!important;
    box-shadow:0 12px 32px rgba(16,24,40,.065)!important;
  }

  .ayla-service-title{
    margin:0 0 12px!important;
    font-size:15px!important;
    line-height:1.25!important;
    font-weight:850!important;
    letter-spacing:.012em!important;
  }

  .ayla-service-items{
    display:grid!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    align-items:stretch!important;
  }

  .ayla-service-items a{
    min-height:76px!important;
    padding:7px 5px 6px!important;
    gap:6px!important;
    border-left:1px solid rgba(16,24,40,.10)!important;
    background:transparent!important;
    border-radius:0!important;
    transform:none!important;
  }

  .ayla-service-items a:first-child{
    border-left:0!important;
  }

  .ayla-service-items a:hover{
    background:rgba(18,185,120,.035)!important;
    color:#101827!important;
  }

  .ayla-service-items b{
    width:36px!important;
    height:36px!important;
    display:grid!important;
    place-items:center!important;
    background:transparent!important;
  }

  .ayla-service-items b svg{
    width:25px!important;
    height:25px!important;
    fill:none!important;
    stroke:var(--ayla-teal)!important;
    stroke-width:1.7!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  .ayla-service-items a span{
    font-size:10px!important;
    line-height:1.18!important;
    font-weight:850!important;
    letter-spacing:.012em!important;
    text-align:center!important;
    color:#101827!important;
  }

  /* Bring the next section closer to the service card,
     matching the compact reference composition. */
  #produk{
    padding-top:42px!important;
  }

  #produk .section-head{
    margin-bottom:24px!important;
  }
}

@media (min-width:821px) and (max-width:1100px){
  .ayla-service-strip-inner{
    max-width:980px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .ayla-service-title{
    font-size:14px!important;
  }

  .ayla-service-items a{
    padding-left:3px!important;
    padding-right:3px!important;
  }

  .ayla-service-items a span{
    font-size:9px!important;
  }
}

@media (max-width:820px){
  .ayla-service-strip{
    padding-bottom:20px!important;
  }

  .ayla-service-strip-inner{
    border-radius:20px!important;
    box-shadow:0 10px 28px rgba(16,24,40,.055)!important;
  }

  .ayla-service-title{
    font-size:11px!important;
    margin-bottom:7px!important;
  }

  .ayla-service-items b svg{
    width:20px!important;
    height:20px!important;
  }

  #produk{
    padding-top:42px!important;
  }
}

@media (max-width:520px){
  .ayla-service-strip-inner{
    padding:10px 6px 8px!important;
    border-radius:18px!important;
  }

  .ayla-service-title{
    font-size:10.5px!important;
    margin-bottom:5px!important;
  }

  .ayla-service-items a{
    min-height:58px!important;
    padding:4px 2px!important;
  }

  .ayla-service-items b svg{
    width:19px!important;
    height:19px!important;
  }

  .ayla-service-items a span{
    font-size:8px!important;
  }

  #produk{
    padding-top:34px!important;
  }
}

/* =========================================================
   AYLA V5.5.26 — FINISHING PRODUK AYLA
   Referensi: 5 kartu desktop, foto lebih dominan, heart badge,
   heading lebih ringan, kartu putih dengan shadow lembut.
   Sistem produk, harga, detail dan WhatsApp tetap dipertahankan.
   ========================================================= */

#produk{
  padding-top:46px!important;
  padding-bottom:72px!important;
}

#produk .section-head{
  margin-bottom:22px!important;
  align-items:flex-end!important;
}

#produk .section-kicker{
  display:block!important;
  margin-bottom:6px!important;
  color:var(--ayla-teal,#12b978)!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}

#produk .section-head h2{
  margin:.15rem 0 .45rem!important;
  font-size:clamp(30px,3.2vw,38px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}

#produk .section-head p{
  margin:0!important;
  font-size:14px!important;
  line-height:1.5!important;
  color:#667085!important;
}

#produk .section-link{
  flex:0 0 auto!important;
  margin-bottom:3px!important;
  color:var(--ayla-teal,#12b978)!important;
  font-size:13px!important;
  font-weight:800!important;
}

/* 5 product cards on desktop — closer to reference */
#produk > .container > .grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
}

#produk > .container > .grid .card{
  position:relative!important;
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid #e6ece9!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 8px 26px rgba(16,24,40,.055)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}

#produk > .container > .grid .card:hover{
  transform:translateY(-5px)!important;
  border-color:#cfe9de!important;
  box-shadow:0 16px 34px rgba(16,24,40,.11)!important;
}

#produk > .container > .grid .card-image{
  position:relative!important;
  aspect-ratio:1.08 / 1!important;
  overflow:hidden!important;
  background:#f5f8f7!important;
}

#produk > .container > .grid .card-image img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  transition:transform .35s ease!important;
}

#produk > .container > .grid .card:hover .card-image img{
  transform:scale(1.035)!important;
}

/* Heart badge like the reference — visual only, no product logic changed */
#produk > .container > .grid .card-image::after{
  content:"♡";
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(18,185,120,.18);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#12b978;
  font-size:22px;
  line-height:1;
  box-shadow:0 6px 16px rgba(16,24,40,.10);
  pointer-events:none;
  z-index:3;
}

/* The generic "Produk" badge is unnecessary in the compact homepage card */
#produk > .container > .grid .card-body .badge{
  display:none!important;
}

#produk > .container > .grid .card-body{
  padding:14px 14px 15px!important;
}

#produk > .container > .grid .card h3{
  margin:0 0 5px!important;
  font-size:16px!important;
  line-height:1.28!important;
  letter-spacing:-.01em!important;
}

#produk > .container > .grid .card h3 a{
  color:#101828!important;
}

#produk > .container > .grid .card h3 a:hover{
  color:#087a53!important;
}

#produk > .container > .grid .price{
  margin-top:5px!important;
  color:#087a53!important;
  font-size:15px!important;
  font-weight:850!important;
}

#produk > .container > .grid .card-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
  margin-top:12px!important;
}

#produk > .container > .grid .card-actions .btn{
  min-height:40px!important;
  padding:8px 10px!important;
  border-radius:11px!important;
  font-size:12px!important;
}

#produk > .container > .grid .card-actions .btn-primary{
  box-shadow:0 7px 16px rgba(18,185,120,.16)!important;
}

#produk > .container > .grid .card-actions .btn-secondary{
  background:#fff!important;
}

@media (min-width:821px) and (max-width:1100px){
  #produk > .container > .grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
  }

  #produk > .container > .grid .card h3{
    font-size:15px!important;
  }
}

@media (max-width:820px){
  #produk{
    padding-top:36px!important;
    padding-bottom:54px!important;
  }

  #produk .section-head{
    margin-bottom:18px!important;
    align-items:flex-end!important;
  }

  #produk .section-head h2{
    font-size:30px!important;
  }

  #produk .section-head p{
    font-size:13px!important;
  }

  #produk > .container > .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }

  #produk > .container > .grid .card{
    border-radius:16px!important;
  }

  #produk > .container > .grid .card-image{
    aspect-ratio:1.08 / 1!important;
  }

  #produk > .container > .grid .card-image::after{
    top:8px;
    right:8px;
    width:31px;
    height:31px;
    font-size:20px;
  }

  #produk > .container > .grid .card-body{
    padding:12px 11px 12px!important;
  }

  #produk > .container > .grid .card h3{
    font-size:14px!important;
    line-height:1.25!important;
  }

  #produk > .container > .grid .price{
    font-size:14px!important;
  }

  #produk > .container > .grid .card-actions{
    gap:6px!important;
    margin-top:9px!important;
  }

  #produk > .container > .grid .card-actions .btn{
    min-height:38px!important;
    padding:7px 8px!important;
    font-size:11px!important;
  }
}

@media (max-width:520px){
  #produk .section-head{
    align-items:flex-end!important;
  }

  #produk .section-head h2{
    font-size:28px!important;
  }

  #produk .section-link{
    font-size:12px!important;
  }

  #produk > .container > .grid{
    gap:10px!important;
  }

  #produk > .container > .grid .card h3{
    font-size:13px!important;
  }

  #produk > .container > .grid .card-actions .btn{
    font-size:10.5px!important;
  }
}


/* AYLA FIX V5.5.26 — Produk Beranda: 4 kolom desktop, 2 kolom mobile */
@media (min-width: 769px) {
  .products-grid,
  .product-grid,
  .products-container {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .products-grid,
  .product-grid,
  .products-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   AYLA V5.5.26 FINAL GRID FIX
   Beranda > Produk AYLA:
   Desktop = 4 kolom
   Tablet/HP = 2 kolom
   ========================================================= */
@media (min-width: 1101px) {
  #produk > .container > .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  #produk > .container > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   AYLA V5.5.27 — FINISHING CARD PRODUK BERANDA
   Tidak mengubah data/foto/fungsi produk.
   Desktop tetap 4 kolom, HP tetap 2 kolom.
   ========================================================= */

#produk > .container > .grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:20px!important;
}

/* Card lebih clean + floating seperti referensi */
#produk > .container > .grid .card{
  border:1px solid #e5eee9!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 7px 24px rgba(16,24,40,.065)!important;
  transform:translateY(0);
}

#produk > .container > .grid .card:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 18px 38px rgba(16,24,40,.12)!important;
  border-color:#c9e9dc!important;
}

/* Area foto dibuat konsisten agar foto yang nanti dimasukkan tetap rapi */
#produk > .container > .grid .card-image{
  aspect-ratio:4 / 3!important;
  background:linear-gradient(145deg,#f3faf7,#edf7f3)!important;
}

/* Placeholder sementara tetap terlihat rapi sebelum foto produk dimasukkan */
#produk > .container > .grid .card-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#218765;
  font-size:18px;
  font-weight:850;
  letter-spacing:.06em;
}

/* Foto asli memenuhi area tanpa mengubah file fotonya */
#produk > .container > .grid .card-image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* Ikon favorit lebih halus */
#produk > .container > .grid .card-image::after{
  top:12px!important;
  right:12px!important;
  width:36px!important;
  height:36px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 7px 18px rgba(16,24,40,.12)!important;
}

/* Isi kartu lebih lega */
#produk > .container > .grid .card-body{
  padding:16px 15px 15px!important;
}

#produk > .container > .grid .card h3{
  min-height:41px;
  margin:0 0 6px!important;
  font-size:16px!important;
  line-height:1.3!important;
  font-weight:750!important;
}

#produk > .container > .grid .price{
  margin-top:4px!important;
  font-size:15px!important;
  font-weight:850!important;
}

/* Tombol dibuat seperti tombol floating pada referensi */
#produk > .container > .grid .card-actions{
  gap:8px!important;
  margin-top:13px!important;
}

#produk > .container > .grid .card-actions .btn{
  min-height:41px!important;
  border-radius:12px!important;
  font-size:12px!important;
  font-weight:750!important;
  box-shadow:0 4px 12px rgba(16,24,40,.045)!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}

#produk > .container > .grid .card-actions .btn:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 8px 16px rgba(16,24,40,.09)!important;
}

/* Desktop: kunci 4 kolom */
@media (min-width:1101px){
  #produk > .container > .grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* Tablet & HP: 2 kolom */
@media (max-width:1100px){
  #produk > .container > .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:520px){
  #produk > .container > .grid{
    gap:10px!important;
  }

  #produk > .container > .grid .card{
    border-radius:16px!important;
  }

  #produk > .container > .grid .card-body{
    padding:12px 11px 12px!important;
  }

  #produk > .container > .grid .card h3{
    min-height:36px;
    font-size:13px!important;
  }

  #produk > .container > .grid .price{
    font-size:13px!important;
  }

  #produk > .container > .grid .card-actions .btn{
    min-height:38px!important;
    font-size:10.5px!important;
  }
}


/* =========================================================
   AYLA V5.5.28 — FINISHING HALAMAN KERANJANG
   Visual only: tidak mengubah PHP, database, atau alur WooCommerce.
   ========================================================= */

/* Halaman keranjang */
.woocommerce-cart .site-main,
.woocommerce-cart main{
  background:#fff;
}

.woocommerce-cart .woocommerce{
  width:min(var(--container,1180px),calc(100% - 32px));
  margin:0 auto;
  padding:52px 0 80px;
}

/* Judul */
.woocommerce-cart .woocommerce h1,
.woocommerce-cart .entry-title{
  margin:0 0 34px;
  color:var(--ink,#101828);
  font-size:clamp(32px,4vw,48px);
  line-height:1.08;
  font-weight:850;
  letter-spacing:-.035em;
}

/* Empty cart / blok keranjang kosong */
.woocommerce-cart .cart-empty,
.woocommerce-cart .wc-block-cart__empty-cart__title{
  margin:10px auto 10px;
  text-align:center;
  color:var(--ink,#101828);
  font-weight:850;
}

.woocommerce-cart .cart-empty{
  padding-top:28px;
  font-size:20px;
}

/* Pesan kosong yang menyertai empty state */
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-message{
  border:1px solid #dcefe7;
  border-radius:18px;
  background:#f7fcfa;
  color:#475569;
  box-shadow:0 8px 24px rgba(16,24,40,.045);
}

.woocommerce-cart .return-to-shop{
  text-align:center;
  margin:18px 0 42px;
}

.woocommerce-cart .return-to-shop a,
.woocommerce-cart .wc-block-cart__empty-cart__title + p a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 22px;
  border-radius:13px;
  background:var(--g,#12b978);
  color:#fff!important;
  font-weight:800;
  text-decoration:none!important;
  box-shadow:0 8px 20px rgba(18,185,120,.18);
  transition:transform .18s ease,box-shadow .18s ease;
}

.woocommerce-cart .return-to-shop a:hover,
.woocommerce-cart .wc-block-cart__empty-cart__title + p a:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(18,185,120,.24);
}

/* Judul rekomendasi "Baru di toko" / produk terkait */
.woocommerce-cart .products,
.woocommerce-cart .wc-block-grid__products{
  margin-top:22px!important;
}

.woocommerce-cart .products:before,
.woocommerce-cart .products:after,
.woocommerce-cart .wc-block-grid__products:before,
.woocommerce-cart .wc-block-grid__products:after{
  content:"";
  display:block;
  clear:both;
}

.woocommerce-cart .products .product,
.woocommerce-cart .wc-block-grid__product{
  border:1px solid #e3eee9!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 8px 25px rgba(16,24,40,.06)!important;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.woocommerce-cart .products .product:hover,
.woocommerce-cart .wc-block-grid__product:hover{
  transform:translateY(-5px);
  border-color:#c8e8da!important;
  box-shadow:0 16px 34px rgba(16,24,40,.10)!important;
}

.woocommerce-cart .products .product img,
.woocommerce-cart .wc-block-grid__product-image img{
  width:100%!important;
  aspect-ratio:4 / 3;
  object-fit:cover;
  background:#f2faf6;
}

.woocommerce-cart .products .product .woocommerce-loop-product__title,
.woocommerce-cart .wc-block-grid__product-title{
  padding:0 16px;
  color:var(--ink,#101828);
  font-size:15px!important;
  font-weight:750!important;
}

.woocommerce-cart .products .product .price,
.woocommerce-cart .wc-block-grid__product-price{
  padding:0 16px;
  color:#218765!important;
  font-weight:850!important;
}

.woocommerce-cart .products .product .button,
.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link{
  margin:10px 16px 16px!important;
  width:calc(100% - 32px);
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0!important;
  border-radius:12px!important;
  background:var(--g,#12b978)!important;
  color:#fff!important;
  font-weight:800;
  text-decoration:none!important;
  box-shadow:0 7px 16px rgba(18,185,120,.16);
}

/* Keranjang berisi produk */
.woocommerce-cart table.cart{
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid #e3eee9;
  border-radius:20px;
  box-shadow:0 8px 25px rgba(16,24,40,.055);
}

.woocommerce-cart table.cart th{
  background:#f4fbf8;
  color:#475569;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.woocommerce-cart table.cart td{
  border-color:#edf3f0;
  vertical-align:middle;
}

.woocommerce-cart table.cart .product-name a{
  color:var(--ink,#101828);
  font-weight:750;
  text-decoration:none;
}

.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal{
  color:#218765;
  font-weight:800;
}

.woocommerce-cart .cart_totals{
  margin-top:24px;
  padding:22px;
  border:1px solid #e3eee9;
  border-radius:20px;
  background:#fbfefd;
  box-shadow:0 8px 25px rgba(16,24,40,.055);
}

.woocommerce-cart .cart_totals h2{
  margin-top:0;
  color:var(--ink,#101828);
  font-size:22px;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:var(--g,#12b978)!important;
  color:#fff!important;
  font-weight:850;
  box-shadow:0 9px 22px rgba(18,185,120,.18);
}

@media(max-width:760px){
  .woocommerce-cart .woocommerce{
    width:calc(100% - 24px);
    padding:34px 0 56px;
  }

  .woocommerce-cart .woocommerce h1,
  .woocommerce-cart .entry-title{
    margin-bottom:24px;
    font-size:34px;
  }

  .woocommerce-cart .products .product,
  .woocommerce-cart .wc-block-grid__product{
    border-radius:16px!important;
  }

  .woocommerce-cart .products .product .woocommerce-loop-product__title,
  .woocommerce-cart .wc-block-grid__product-title{
    padding:0 12px;
    font-size:13px!important;
  }

  .woocommerce-cart .products .product .price,
  .woocommerce-cart .wc-block-grid__product-price{
    padding:0 12px;
    font-size:13px;
  }

  .woocommerce-cart .products .product .button,
  .woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link{
    margin:8px 12px 12px!important;
    width:calc(100% - 24px);
    min-height:40px;
    font-size:12px;
  }

  .woocommerce-cart table.cart{
    border-radius:16px;
  }
}


/* =========================================================
   AYLA V5.5.29 — PRODUCT DETAIL: MASUKKAN KE KERANJANG
   ========================================================= */
.ayla-product-actions .ayla-add-to-cart-form{
  margin:0;
  min-width:0;
}
.ayla-product-actions .ayla-add-to-cart-form,
.ayla-product-actions .ayla-add-to-cart-form .ayla-btn{
  width:100%;
}
.ayla-product-actions .ayla-add-cart-button{
  width:100%;
  border:0;
  cursor:pointer;
  font:inherit;
}
.ayla-product-actions .ayla-add-cart-button:hover{
  background:var(--v4-green-dark,#087a53);
  transform:translateY(-1px);
}
@media(max-width:760px){
  .ayla-product-actions .ayla-add-to-cart-form{width:100%;}
}

/* =========================================================
   AYLA V5.5.34 — CHECKOUT FINISHING
   ========================================================= */
.ayla-checkout-page{background:linear-gradient(180deg,#f8fbfa 0%,#fff 48%);padding:54px 0 92px;min-height:60vh}
.ayla-checkout-container{width:min(1120px,calc(100% - 32px));margin:0 auto}
.ayla-checkout-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:26px;padding:0 2px}
.ayla-checkout-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;color:#159b6a;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.ayla-checkout-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:#19b87a;box-shadow:0 0 0 5px #e6f8f0}
.ayla-checkout-head h1{margin:0;color:#101828;font-size:clamp(36px,4.4vw,52px);line-height:1.02;font-weight:900;letter-spacing:-.045em}
.ayla-checkout-head p{max-width:660px;margin:11px 0 0;color:#667085;font-size:15px;line-height:1.65}
.ayla-checkout-back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 17px;border:1px solid #dceae4;border-radius:13px;color:#344054;text-decoration:none;font-weight:850;white-space:nowrap;background:#fff;box-shadow:0 5px 16px rgba(16,24,40,.035);transition:.18s ease}
.ayla-checkout-back:hover{border-color:#8dd8bc;color:#159b6a;transform:translateY(-1px)}
.ayla-checkout-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(330px,.68fr);gap:22px;align-items:start}
.ayla-checkout-form{display:grid;gap:16px}
.ayla-checkout-card{padding:23px;border:1px solid #e1eee9;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 12px 32px rgba(16,24,40,.055)}
.ayla-checkout-card-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:19px}
.ayla-checkout-card-head>span{display:grid;place-items:center;flex:0 0 38px;height:38px;border:1px solid #d4f0e4;border-radius:12px;background:#eefaf5;color:#11966a;font-weight:900;font-size:12px}
.ayla-checkout-card-head h2{margin:1px 0 0;color:#101828;font-size:19px;line-height:1.2;font-weight:900;letter-spacing:-.015em}
.ayla-checkout-card-head p{margin:5px 0 0;color:#667085;font-size:12.5px;line-height:1.45}
.ayla-checkout-card label{display:block;margin-top:14px;color:#344054;font-size:13px;font-weight:850}
.ayla-checkout-card label em{color:#16a673;font-style:normal}
.ayla-checkout-card label>span{font-weight:600;color:#98a2b3}
.ayla-checkout-card input[type=text],.ayla-checkout-card input[type=tel],.ayla-checkout-card textarea{display:block;width:100%;box-sizing:border-box;margin-top:7px;border:1px solid #d8e6e1;border-radius:13px;background:#fff;color:#101828;padding:13px 14px;font:inherit;font-size:14px;outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
.ayla-checkout-card input[type=text]::placeholder,.ayla-checkout-card input[type=tel]::placeholder,.ayla-checkout-card textarea::placeholder{color:#a0abb8}
.ayla-checkout-card textarea{resize:vertical;min-height:96px;line-height:1.55}
.ayla-checkout-card input:focus,.ayla-checkout-card textarea:focus{border-color:#35bd8d;background:#fff;box-shadow:0 0 0 4px rgba(18,185,120,.09)}
.ayla-delivery-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ayla-delivery-choice{position:relative!important;display:flex!important;gap:10px;align-items:flex-start;margin:0!important;padding:15px;border:1px solid #dfeae5;border-radius:14px;background:#fbfefd;cursor:pointer;transition:.18s ease}
.ayla-delivery-choice:hover{border-color:#a8dfca;transform:translateY(-1px)}
.ayla-delivery-choice input{margin:3px 0 0;accent-color:#12b978}
.ayla-delivery-choice strong{display:block;color:#101828;font-size:14px}
.ayla-delivery-choice small{display:block;margin-top:4px;color:#667085;font-size:12px;font-weight:600;line-height:1.4}
.ayla-delivery-choice:has(input:checked){border-color:#62cfa8;background:#f2fbf7;box-shadow:0 0 0 2px rgba(18,185,120,.08)}
#ayla-address-wrap.is-required>span{color:#d97706}
.ayla-checkout-submit{width:100%;min-height:56px;border:0;border-radius:15px;background:linear-gradient(135deg,#10b878,#18c987);color:#fff;font:inherit;font-size:15px;font-weight:900;cursor:pointer;box-shadow:0 13px 28px rgba(18,185,120,.19);transition:transform .18s,box-shadow .18s,opacity .18s}
.ayla-checkout-submit:hover{transform:translateY(-2px);box-shadow:0 17px 32px rgba(18,185,120,.25)}
.ayla-checkout-submit:disabled{opacity:.7;cursor:wait;transform:none}
.ayla-checkout-submit span{margin-left:8px}
.ayla-checkout-safe{margin:-2px 4px 0;color:#667085;font-size:12px;text-align:center;line-height:1.5}
.ayla-checkout-summary{position:sticky;top:24px}
.ayla-summary-card{overflow:hidden}
.ayla-summary-card .ayla-checkout-card-head{margin-bottom:17px}
.ayla-summary-items{display:grid;gap:0}
.ayla-summary-item{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #edf2f0}
.ayla-summary-item:first-child{padding-top:2px}
.ayla-summary-item:last-child{border-bottom:0}
.ayla-summary-thumb{width:60px;height:60px;flex:0 0 60px;overflow:hidden;border-radius:13px;background:#f1faf6;border:1px solid #e4f0eb}
.ayla-summary-thumb img{width:100%;height:100%;object-fit:cover;margin:0!important}
.ayla-summary-item strong{display:block;color:#101828;font-size:13px;line-height:1.35}
.ayla-summary-item small{display:block;margin-top:5px;color:#667085;font-size:12px;line-height:1.4}
.ayla-summary-total{display:flex;justify-content:space-between;gap:15px;margin-top:15px;padding-top:16px;border-top:1px solid #dfeae5;color:#475467;font-size:14px;font-weight:850}
.ayla-summary-total strong{color:#159b6a;font-size:21px}
.ayla-summary-note{margin-top:14px;padding:12px 13px;border:1px solid #e2f0eb;border-radius:12px;background:#f6fbf9;color:#667085;font-size:12px;line-height:1.55}
.ayla-checkout-alert{margin:0 0 17px;padding:14px 16px;border:1px solid #f2d4a7;border-radius:14px;background:#fffaf2;color:#9a5b08;font-size:13px;line-height:1.6}
@media(max-width:820px){
  .ayla-checkout-page{padding:34px 0 60px}
  .ayla-checkout-head{display:block;margin-bottom:20px}
  .ayla-checkout-head h1{font-size:38px}
  .ayla-checkout-back{margin-top:15px}
  .ayla-checkout-grid{grid-template-columns:1fr}
  .ayla-checkout-summary{position:static;grid-row:1}
  .ayla-checkout-form{grid-row:2}
}
@media(max-width:560px){
  .ayla-checkout-container{width:min(100% - 24px,620px)}
  .ayla-checkout-card{padding:18px;border-radius:17px}
  .ayla-delivery-grid{grid-template-columns:1fr}
  .ayla-checkout-head p{font-size:14px}
  .ayla-checkout-head h1{font-size:34px}
  .ayla-checkout-submit{min-height:54px}
  .ayla-summary-thumb{width:54px;height:54px;flex-basis:54px}
}


/* =========================================================
   AYLA V5.5.33 — MODERN PRODUCT CATALOG POLISH
   Safe override: keeps the original product CSS above intact.
   ========================================================= */

.ayla-products-section {
    width: 100%;
    padding: 54px 0 76px;
    background: #fff;
}

.ayla-products-heading {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.ayla-products-heading h1 {
    margin: 0 0 8px;
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: -.035em;
    color: var(--ink);
}

.ayla-products-heading h1 span {
    color: var(--g);
}

.ayla-products-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.desktop-only { display: inline; }

.ayla-products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.ayla-product-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e4e8e6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(16,24,40,.055);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ayla-product-card:hover {
    transform: translateY(-4px);
    border-color: #d4e8df;
    box-shadow: 0 14px 32px rgba(16,24,40,.10);
}

.ayla-product-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1.48 / 1;
    overflow: hidden;
    background: #f3f7f5;
}

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

.ayla-product-card:hover .ayla-product-image img {
    transform: scale(1.025);
}

.ayla-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background:
        radial-gradient(circle at 20% 20%, rgba(22,184,121,.14), transparent 38%),
        linear-gradient(135deg, #f4fbf8, #eaf8f2);
    color: #587067;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.ayla-no-image-mark {
    color: var(--ink);
    font-size: 27px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.06em;
}

.ayla-product-badge {
    display: none !important;
}

.ayla-product-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px 14px 14px;
    background: #fff;
    color: var(--ink);
}

.ayla-product-category {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    margin: 0 0 7px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.ayla-category-icon {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--g);
    color: #fff;
    box-shadow: 0 4px 10px rgba(22,184,121,.16);
}

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

.ayla-product-body h2 {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.02em;
}

.ayla-product-body p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ayla-product-price-label {
    margin-top: 13px;
    color: var(--muted);
    font-size: 11px;
}

.ayla-product-price {
    margin-top: 1px;
    color: var(--gd);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.ayla-product-price del { color: var(--muted); }
.ayla-product-price ins { color: var(--gd); text-decoration: none; }

.ayla-product-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 7px;
    margin-top: auto;
    padding-top: 13px;
}

.ayla-product-actions a {
    min-width: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 7px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.ayla-detail-button {
    border: 1px solid #b9c8c1;
    background: #fff;
    color: var(--ink-soft);
}

.ayla-detail-button:hover {
    border-color: var(--g);
    color: var(--gd);
    background: var(--g-pale);
    transform: translateY(-1px);
}

.ayla-order-button {
    border: 1px solid var(--g);
    background: var(--g);
    color: #fff;
}

.ayla-order-button svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.ayla-order-button:hover {
    border-color: var(--gd);
    background: var(--gd);
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 1100px) {
    .ayla-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .ayla-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 600px) {
    .ayla-products-section {
        padding: 42px 0 58px;
    }

    .ayla-products-heading {
        margin-bottom: 22px;
    }

    .ayla-products-heading h1 {
        font-size: 29px;
    }

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

    .desktop-only { display: none; }

    .ayla-products-grid {
        gap: 10px;
    }

    .ayla-product-card {
        border-radius: 13px;
    }

    .ayla-product-image {
        aspect-ratio: 1.16 / 1;
    }

    .ayla-product-body {
        padding: 11px 10px 10px;
    }

    .ayla-product-category {
        gap: 5px;
        margin-bottom: 6px;
        font-size: 8px;
    }

    .ayla-category-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

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

    .ayla-product-body h2 {
        font-size: 14px;
    }

    .ayla-product-body p {
        font-size: 10px;
    }

    .ayla-product-price-label {
        margin-top: 10px;
        font-size: 9px;
    }

    .ayla-product-price {
        font-size: 15px;
    }

    .ayla-product-actions {
        grid-template-columns: 1fr;
        gap: 6px;
        padding-top: 10px;
    }

    .ayla-product-actions a {
        min-height: 34px;
        font-size: 10px;
        border-radius: 8px;
    }
}


/* =========================================================
   AYLA V5.5.33 — PRODUCT PLACEHOLDER + WHATSAPP FINISHING
   Aman: hanya menimpa tampilan kartu di archive-product.php.
   ========================================================= */
.product-card .card-placeholder{
  min-height:100%;
  width:100%;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:24px 16px;
  text-align:center;
  background:
    radial-gradient(circle at 18% 18%, rgba(22,184,121,.10), transparent 36%),
    linear-gradient(145deg,#f7fbf9 0%,#eef8f4 100%);
  color:#101827;
}
.product-card .placeholder-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  min-height:42px;
  padding:7px 13px;
  border:1px solid rgba(22,184,121,.18);
  border-radius:12px;
  background:#fff;
  color:#16b879;
  font-size:24px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.07em;
  box-shadow:0 8px 20px rgba(16,24,40,.06);
}
.product-card .placeholder-title{
  max-width:92%;
  color:#16201c;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
}
.product-card .placeholder-note{
  color:#73827d;
  font-size:10px;
  line-height:1.3;
}
.product-card .whatsapp-order-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.product-card .whatsapp-order-btn svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  fill:currentColor;
}
@media (max-width:640px){
  .product-card .placeholder-logo{min-width:70px;min-height:36px;font-size:20px}
  .product-card .placeholder-title{font-size:11px}
  .product-card .placeholder-note{font-size:9px}
}


/* =========================================================
   AYLA V5.5.33 — PRODUCT PAGE TITLE CLEANUP
   Remove the generic page title only on /produk/.
   ========================================================= */
.ayla-products-page-content {
    padding-top: 0 !important;
}
.ayla-products-page-content .ayla-products-heading {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================================
   AYLA V7 — DESKTOP PRODUCT HEADER TRUE CENTER
   Center the product heading against the viewport/container axis
   without changing the mobile layout.
   ========================================================= */
@media (min-width: 769px){
    .ayla-products-page-content .ayla-products-heading{
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: min(760px, 100%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }
}

/* =========================================================
   AYLA V5 — PRODUCT HEADER + WHATSAPP ICON FINAL POLISH
   ========================================================= */
.ayla-products-page-content .ayla-products-heading{
    width:100% !important;
    max-width:760px !important;
    margin:0 auto 30px !important;
    text-align:center !important;
}
.ayla-products-page-content .ayla-products-heading h1,
.ayla-products-page-content .ayla-products-heading p{
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
.ayla-products-page-content .ayla-products-heading h1{
    display:block !important;
}
.ayla-products-page-content .ayla-order-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
}
.ayla-products-page-content .ayla-order-button svg{
    display:inline-block !important;
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    flex:0 0 16px !important;
    visibility:visible !important;
    opacity:1 !important;
    overflow:visible !important;
    color:#fff !important;
}
.ayla-products-page-content .ayla-order-button svg path{
    stroke:#fff !important;
}
@media (max-width:600px){
    .ayla-products-page-content .ayla-products-heading{
        margin-bottom:24px !important;
    }
    .ayla-products-page-content .ayla-order-button svg{
        width:14px !important;
        height:14px !important;
        min-width:14px !important;
        min-height:14px !important;
        flex-basis:14px !important;
    }
}

/* AYLA V8 — WhatsApp button icon hardening */
.product-card .whatsapp-order-btn .whatsapp-btn-icon{
  display:inline-block !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  flex:0 0 18px !important;
  color:#fff !important;
  fill:#fff !important;
  stroke:none !important;
  opacity:1 !important;
  visibility:visible !important;
  vertical-align:middle !important;
}
.product-card .whatsapp-order-btn .whatsapp-btn-icon path{
  fill:#fff !important;
  opacity:1 !important;
}


/* =========================================================
   AYLA V9 — WHATSAPP BUTTON ICON HARD FIX
   Use a real image asset instead of inline SVG so cache/minifier
   rules cannot remove or restyle the icon after page load.
   ========================================================= */
.product-card .whatsapp-order-btn,
.ayla-product-actions .ayla-order-button,
.card-actions .whatsapp-order-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
}
.product-card .whatsapp-order-btn .whatsapp-btn-icon,
.ayla-product-actions .ayla-order-button .whatsapp-btn-icon,
.card-actions .whatsapp-order-btn .whatsapp-btn-icon{
    display:inline-block !important;
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
    min-height:15px !important;
    max-width:15px !important;
    max-height:15px !important;
    flex:0 0 15px !important;
    object-fit:contain !important;
    object-position:center !important;
    opacity:1 !important;
    visibility:visible !important;
    vertical-align:middle !important;
}
@media (max-width:600px){
    .product-card .whatsapp-order-btn .whatsapp-btn-icon,
    .ayla-product-actions .ayla-order-button .whatsapp-btn-icon,
    .card-actions .whatsapp-order-btn .whatsapp-btn-icon{
        width:14px !important;
        height:14px !important;
        min-width:14px !important;
        min-height:14px !important;
        max-width:14px !important;
        max-height:14px !important;
        flex-basis:14px !important;
    }
}

/* =========================================================
   AYLA V10 — MODERN PRODUCT DETAIL
   Safe override layer for single WooCommerce product pages.
   ========================================================= */
.ayla-product-detail-v6{background:#fff;padding:34px 0 82px;}
.ayla-product-detail-v6 .ayla-container{width:min(1160px,calc(100% - 40px));margin:0 auto;}
.ayla-detail-breadcrumb{display:flex;align-items:center;gap:9px;margin:0 0 26px;color:#98a2b3;font-size:13px;line-height:1.4;}
.ayla-detail-breadcrumb a{color:#188b60;text-decoration:none;font-weight:800;}
.ayla-product-detail-v6 .ayla-product-detail-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:start;}
.ayla-product-detail-v6 .ayla-product-media{position:relative;top:auto;min-width:0;border:1px solid #e2ece7;border-radius:28px;overflow:hidden;background:#f7faf9;box-shadow:0 16px 42px rgba(16,24,40,.07);}
.ayla-product-detail-v6 .ayla-product-media-frame{padding:0;background:#fff;}
.ayla-product-detail-v6 .ayla-product-media img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff;}
.ayla-product-detail-v6 .ayla-product-placeholder{min-height:540px;display:grid;place-content:center;gap:4px;text-align:center;background:linear-gradient(145deg,#f7fbf9,#edf7f2);color:#14895e;}
.ayla-product-detail-v6 .ayla-product-placeholder strong{font-size:54px;letter-spacing:-.06em;}
.ayla-product-detail-v6 .ayla-product-placeholder span{font-size:12px;letter-spacing:.25em;font-weight:800;}
.ayla-product-detail-v6 .ayla-product-info{padding:20px 0 0;min-width:0;}
.ayla-product-detail-v6 .ayla-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;font-weight:900;color:#159b6a;}
.ayla-product-detail-v6 .ayla-eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#19b87a;box-shadow:0 0 0 5px #e8f8f1;}
.ayla-detail-category{margin-top:13px;color:#159b6a;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;}
.ayla-detail-category a{color:inherit;text-decoration:none;}
.ayla-product-detail-v6 .ayla-product-info h1{margin:8px 0 12px;font-size:clamp(38px,5vw,60px);line-height:1.02;letter-spacing:-.045em;color:#101828;}
.ayla-product-detail-v6 .ayla-product-price{margin:0 0 20px;font-size:30px;font-weight:950;color:#087a53;}
.ayla-product-detail-v6 .ayla-product-price del{color:#98a2b3;font-size:.62em;margin-right:6px;}
.ayla-product-detail-v6 .ayla-product-price ins{text-decoration:none;color:#087a53;}
.ayla-product-detail-v6 .ayla-product-short{max-width:650px;margin:0;color:#667085;font-size:17px;line-height:1.72;}
.ayla-detail-benefits{display:grid;gap:10px;margin:24px 0 0;padding:0;list-style:none;}
.ayla-detail-benefits li{display:flex;align-items:flex-start;gap:10px;color:#344054;font-size:14px;line-height:1.5;}
.ayla-detail-benefits li span:first-child{display:grid;place-items:center;flex:0 0 21px;width:21px;height:21px;border-radius:50%;background:#e8f8f1;color:#119465;font-size:12px;font-weight:900;}
.ayla-product-detail-v6 .ayla-product-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:28px;}
.ayla-product-detail-v6 .ayla-product-actions .ayla-add-to-cart-form{width:100%;margin:0;}
.ayla-product-detail-v6 .ayla-product-actions .ayla-btn{width:100%;min-height:54px;padding:0 18px;border-radius:14px;border:1px solid transparent;font-size:14px;font-weight:850;cursor:pointer;text-decoration:none;}
.ayla-product-detail-v6 .ayla-btn-primary{background:#12b978;color:#fff;box-shadow:0 8px 20px rgba(18,185,120,.18);}
.ayla-product-detail-v6 .ayla-btn-primary:hover{background:#087a53;}
.ayla-product-detail-v6 .ayla-btn-whatsapp{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;background:#0eaa70;color:#fff;border-color:#0eaa70;box-shadow:0 8px 20px rgba(14,170,112,.16);}
.ayla-product-detail-v6 .ayla-btn-whatsapp:hover{background:#087a53;border-color:#087a53;}
.ayla-product-detail-v6 .ayla-btn-whatsapp .whatsapp-btn-icon{display:block!important;width:17px!important;height:17px!important;min-width:17px!important;max-width:17px!important;object-fit:contain!important;opacity:1!important;visibility:visible!important;}
.ayla-detail-order-link{display:block;margin-top:14px;text-align:center;color:#159b6a;font-size:13px;font-weight:800;text-decoration:none;}
.ayla-detail-order-link:hover{text-decoration:underline;}
.ayla-product-detail-v6 .ayla-product-note{margin-top:18px;padding:15px 17px;border:1px solid #e0eee8;border-radius:14px;background:#f5fbf8;color:#667085;font-size:13px;line-height:1.6;}
.ayla-product-detail-v6 .ayla-product-note strong{color:#344054;}
.ayla-detail-description-panel{margin-top:72px;padding:30px 32px;border:1px solid #e3ece8;border-radius:22px;background:#fff;box-shadow:0 10px 28px rgba(16,24,40,.045);}
.ayla-detail-panel-kicker{margin-bottom:7px;color:#159b6a;font-size:11px;font-weight:900;letter-spacing:.14em;}
.ayla-detail-description-panel h2{margin:0 0 14px;font-size:28px;letter-spacing:-.03em;color:#101828;}
.ayla-product-detail-v6 .ayla-product-description{margin:0;color:#667085;font-size:15px;line-height:1.8;}
.ayla-product-detail-v6 .ayla-product-description p:first-child{margin-top:0;}
.ayla-product-detail-v6 .ayla-product-description p:last-child{margin-bottom:0;}
.ayla-detail-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:20px;border:1px solid #e3ece8;border-radius:18px;overflow:hidden;background:#e3ece8;}
.ayla-detail-trust>div{display:grid;grid-template-columns:32px 1fr;column-gap:9px;padding:18px 16px;background:#fff;align-items:center;}
.ayla-detail-trust span{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e8f8f1;color:#129563;font-size:12px;font-weight:900;}
.ayla-detail-trust strong{font-size:12px;color:#344054;line-height:1.2;}
.ayla-detail-trust small{font-size:11px;color:#98a2b3;line-height:1.3;}
.ayla-detail-empty{max-width:620px;margin:40px auto;padding:50px 30px;text-align:center;border:1px solid #e3ece8;border-radius:24px;background:#fff;box-shadow:0 12px 32px rgba(16,24,40,.06);}
@media(max-width:820px){
  .ayla-product-detail-v6{padding:24px 0 60px;}
  .ayla-product-detail-v6 .ayla-container{width:min(100% - 24px,620px);}
  .ayla-detail-breadcrumb{margin-bottom:18px;font-size:12px;}
  .ayla-product-detail-v6 .ayla-product-detail-grid{grid-template-columns:1fr;gap:26px;}
  .ayla-product-detail-v6 .ayla-product-media{border-radius:22px;}
  .ayla-product-detail-v6 .ayla-product-info{padding-top:0;}
  .ayla-product-detail-v6 .ayla-product-info h1{font-size:clamp(34px,10vw,46px);}
  .ayla-product-detail-v6 .ayla-product-price{font-size:28px;}
  .ayla-product-detail-v6 .ayla-product-actions{grid-template-columns:1fr;}
  .ayla-detail-description-panel{margin-top:48px;padding:24px 20px;border-radius:18px;}
  .ayla-detail-trust{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .ayla-product-detail-v6 .ayla-product-detail-grid{gap:22px;}
  .ayla-product-detail-v6 .ayla-product-media img{aspect-ratio:1/1;}
  .ayla-detail-trust{grid-template-columns:1fr;}
  .ayla-detail-trust>div{padding:15px 16px;}
}
/* =========================================================
   AYLA — KERANJANG CART BLOCK FINAL POLISH
   ========================================================= */

/* Area utama keranjang */
.woocommerce-cart .wc-block-cart {
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 0 auto !important;
    padding: 45px 0 70px !important;
}

/* Judul */
.woocommerce-cart .wc-block-cart__title {
    color: var(--ink, #101828) !important;
    font-weight: 800 !important;
    margin-bottom: 35px !important;
}

/* Produk */
.woocommerce-cart .wc-block-cart-items {
    border-top: 1px solid #e5eee9 !important;
}

.woocommerce-cart .wc-block-cart-items__row {
    border-bottom: 1px solid #e5eee9 !important;
}

/* Nama produk */
.woocommerce-cart .wc-block-components-product-name {
    color: var(--ink, #101828) !important;
    font-weight: 750 !important;
}

/* Harga */
.woocommerce-cart .wc-block-components-product-price {
    color: #218765 !important;
    font-weight: 800 !important;
}

/* Quantity */
.woocommerce-cart .wc-block-components-quantity-selector {
    border: 1px solid #cfe3da !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Sidebar ringkasan */
.woocommerce-cart .wc-block-cart__sidebar {
    border: 1px solid #e3eee9 !important;
    border-radius: 20px !important;
    padding: 24px !important;
    background: #fbfefd !important;
    box-shadow: 0 8px 25px rgba(16,24,40,.055) !important;
}

/* Total */
.woocommerce-cart .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-components-totals-item__value {
    color: var(--ink, #101828) !important;
}

.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: #218765 !important;
    font-weight: 850 !important;
}

/* Tombol checkout */
.woocommerce-cart .wc-block-cart__submit-button {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: var(--g, #12b978) !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: 0 9px 22px rgba(18,185,120,.18) !important;
}

/* Mobile */
@media (max-width: 760px) {
    .woocommerce-cart .wc-block-cart {
        width: calc(100% - 24px) !important;
        padding: 32px 0 55px !important;
    }

    .woocommerce-cart .wc-block-cart__title {
        font-size: 34px !important;
        margin-bottom: 28px !important;
    }

    .woocommerce-cart .wc-block-cart__sidebar {
        border: 0 !important;
        border-radius: 0 !important;
        padding: 18px 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .woocommerce-cart .wc-block-cart__submit-button {
        width: 100% !important;
    }
}

/* =========================================================
   AYLA V5.5.34 — MULTI PRODUCT + QUICK CART + SPACING
   ========================================================= */
.ayla-home-product-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:8px!important;
}
.ayla-home-product-actions .whatsapp-order-btn{
  grid-column:1 / -1;
}
.ayla-add-cart.added{
  transform:translateY(-1px);
}
.ayla-order-item{
  padding:16px;
  margin-bottom:12px;
  border:1px solid #e4e7ec;
  border-radius:14px;
  background:#fafcfb;
}
.ayla-order-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.ayla-order-item-head strong{font-size:15px;color:#101828;}
.ayla-remove-product{
  width:32px;height:32px;border:1px solid #e4e7ec;border-radius:9px;
  background:#fff;cursor:pointer;font-size:20px;line-height:1;color:#667085;
}
.ayla-add-product-row{
  width:100%;
  margin-top:2px;
  padding:11px 14px;
  border:1px dashed #98a2b3;
  border-radius:11px;
  background:#fff;
  color:#137a4b;
  font-weight:800;
  cursor:pointer;
}
.ayla-add-product-row:hover{background:#f4fbf7;}
.summary-subline{font-size:12px!important;color:#667085!important;padding-left:10px;}
.section-alt + .order-process{padding-top:34px;}
.order-process + .customer-fit{padding-top:34px;}
.customer-fit + .final-cta{padding-top:34px;}
.site-footer{padding-top:40px!important;}
.site-footer .footer-grid{gap:30px!important;padding-bottom:28px!important;}
.site-footer .footer-bottom{margin-top:20px!important;padding-top:14px!important;}

@media (max-width:600px){
  .ayla-home-product-actions{grid-template-columns:1fr!important;}
  .ayla-home-product-actions .whatsapp-order-btn{grid-column:auto;}
  .section-alt + .order-process{padding-top:28px;}
  .order-process + .customer-fit{padding-top:28px;}
  .customer-fit + .final-cta{padding-top:28px;}
  .site-footer{padding-top:34px!important;}
  .site-footer .footer-grid{gap:22px!important;padding-bottom:22px!important;}
}


/* =========================================================
   AYLA V5.5.36 — MULTI PRODUCT ORDER FINAL
   ========================================================= */
.ayla-order-items{display:flex;flex-direction:column;gap:12px;}
.ayla-order-item{position:relative;}
.ayla-add-product-row{display:flex;align-items:center;justify-content:center;gap:6px;}
@media (max-width:640px){
  .ayla-order-item{padding:14px;}
  .ayla-add-product-row{min-height:46px;font-size:14px;}
}


/* =========================================================
   AYLA V5.5.38 — CART → PESAN → WHATSAPP FLOW
   ========================================================= */
.ayla-order-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:2px;
}
.ayla-import-cart{
  width:100%;
  padding:11px 14px;
  border:1px solid #d0d5dd;
  border-radius:11px;
  background:#fff;
  color:#344054;
  font-weight:800;
  cursor:pointer;
}
.ayla-import-cart:hover{background:#f8fafc;border-color:#98a2b3;}
#ayla-cart-toast{
  position:fixed;
  left:50%;
  bottom:22px;
  z-index:99999;
  width:min(92vw,460px);
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid #d0d5dd;
  border-radius:14px;
  background:#fff;
  box-shadow:0 14px 40px rgba(16,24,40,.18);
  transform:translate(-50%,18px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
#ayla-cart-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.ayla-cart-toast-icon{
  width:28px;height:28px;display:grid;place-items:center;
  border-radius:50%;background:#e8f8ef;color:#137a4b;font-weight:900;flex:0 0 28px;
}
.ayla-cart-toast-text{flex:1;font-size:13px;font-weight:700;color:#344054;}
#ayla-cart-toast a{font-size:12px;font-weight:900;color:#137a4b;text-decoration:none;white-space:nowrap;}
@media(max-width:640px){
  .ayla-order-actions{grid-template-columns:1fr;}
  #ayla-cart-toast{bottom:76px;}
}

/* AYLA V5.5.39 — next-step payment flow */
.ayla-payment-next-step{margin-top:14px;padding:14px 16px;border:1px solid #d0d5dd;border-radius:14px;background:#f8fafc}
.ayla-payment-next-step strong{display:block;margin-bottom:4px}
.ayla-payment-next-step p{margin:0;color:#475467;font-size:13px;line-height:1.55}

/* AYLA V5.5.41 — mobile-safe payment proof uploader */
.ayla-payment-proof-button[disabled]{opacity:.65;cursor:wait;}
.ayla-payment-proof-form{position:relative;}
.ayla-payment-alert{margin:12px 0;padding:12px 14px;border-radius:12px;}
.ayla-payment-success{background:#ecfdf3;border:1px solid #abefc6;color:#067647;}

/* AYLA V5.5.42 — Base64 payment proof upload */
.ayla-payment-proof-button[disabled]{opacity:.65;cursor:wait;}

/* AYLA V5.5.43 — Android-friendly payment proof picker */
.ayla-payment-file-tools{margin:12px 0;}
.ayla-payment-file-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ayla-file-action{
  min-height:44px;padding:9px 8px;border:1px solid #d0d5dd;border-radius:11px;
  background:#fff;color:#344054;font-weight:800;cursor:pointer;
}
.ayla-file-action:active{transform:translateY(1px);}
.ayla-payment-preview{margin-top:10px;padding:12px;border:1px solid #abefc6;border-radius:12px;background:#ecfdf3;color:#344054;}
.ayla-payment-preview-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;}
.ayla-clear-file{border:0;background:transparent;color:#b42318;font-weight:800;cursor:pointer;}
#ayla-payment-file-name{font-size:13px;font-weight:800;overflow-wrap:anywhere;}
#ayla-payment-file-size{font-size:12px;color:#667085;margin-top:3px;}
#ayla-payment-image-preview{display:block;max-width:100%;max-height:260px;margin-top:10px;border-radius:10px;object-fit:contain;}
@media(max-width:640px){
  .ayla-payment-file-actions{grid-template-columns:1fr;}
  .ayla-file-action{width:100%;}
}

/* AYLA V5.5.45 — standalone theme build
   Payment proof Android picker: camera / gallery / file.
*/
.ayla-v544-marker{display:none!important;}

/* AYLA V5.5.46 — clean standalone build */

/* AYLA HOMEPAGE POLISH — requested changes */
.ayla-home-product-actions{gap:8px;}
.ayla-home-product-actions .btn{min-height:40px;}
.order-process{padding-top:42px;padding-bottom:42px;}
.customer-fit{padding-top:36px;padding-bottom:36px;}
.final-cta{padding-top:36px;padding-bottom:36px;}
@media (max-width:640px){
  .order-process{padding-top:30px;padding-bottom:30px;}
  .customer-fit{padding-top:28px;padding-bottom:28px;}
  .final-cta{padding-top:28px;padding-bottom:28px;}
  .ayla-service-strip{padding-top:16px;padding-bottom:16px;}
}

/* AYLA Modern Typography & Mobile Polish */
:root{
  --ayla-font-modern: Inter, "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
}
html{scroll-behavior:smooth;}
body,
button,
input,
select,
textarea{
  font-family:var(--ayla-font-modern);
}
body{
  letter-spacing:-0.01em;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ayla-font-modern);
  letter-spacing:-0.025em;
  line-height:1.15;
  font-weight:800;
}
p,li{
  line-height:1.6;
}
a,button{
  -webkit-tap-highlight-color:transparent;
}
@media (max-width: 768px){
  .site-main > section,
  .home section{
    margin-bottom:clamp(22px,5vw,34px);
  }
  .home h1{font-size:clamp(30px,8vw,42px);}
  .home h2{font-size:clamp(24px,6vw,32px);}
  .home h3{font-size:clamp(18px,4.8vw,24px);}
  .home p{font-size:14px;}
  .home .container,
  .home .content-area{
    padding-left:16px;
    padding-right:16px;
  }
}

/* =========================================================
   AYLA DIGITAL PRINTING — PREMIUM MODERN HOMEPAGE
   Visual-only layer: preserves existing business logic.
   ========================================================= */
:root{
  --ayla-green:#13795b;
  --ayla-green-dark:#0b4f3b;
  --ayla-green-soft:#eaf7f1;
  --ayla-ink:#10231d;
  --ayla-muted:#66756f;
  --ayla-cream:#f7faf8;
  --ayla-white:#ffffff;
  --ayla-gold:#d7a84b;
  --ayla-border:rgba(16,35,29,.10);
  --ayla-shadow:0 14px 40px rgba(16,35,29,.09);
  --ayla-shadow-hover:0 20px 55px rgba(16,35,29,.14);
}

/* Clean premium canvas */
body{
  background:var(--ayla-cream);
  color:var(--ayla-ink);
}
body,button,input,select,textarea{
  font-family:Inter,"Plus Jakarta Sans","Segoe UI",Roboto,Arial,sans-serif;
}

/* Header / navigation */
.site-header,
header{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.site-header{
  border-bottom:1px solid var(--ayla-border);
}
.site-header a,
header a{
  transition:color .2s ease,opacity .2s ease;
}
.site-header a:hover,
header a:hover{
  color:var(--ayla-green);
}

/* Hero — modern, spacious, premium */
.home .hero,
.home .hero-section,
.home .banner,
.home .home-hero{
  position:relative;
  overflow:hidden;
}
.home .hero::after,
.home .hero-section::after,
.home .home-hero::after{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  right:-150px;
  top:-160px;
  border-radius:50%;
  background:rgba(215,168,75,.12);
  pointer-events:none;
}
.home .hero h1,
.home .hero-section h1,
.home .home-hero h1{
  font-weight:850;
  letter-spacing:-.045em;
}
.home .hero p,
.home .hero-section p,
.home .home-hero p{
  color:var(--ayla-muted);
}

/* Primary buttons */
.home a[class*="btn"],
.home button,
.home .button,
.home .wp-element-button{
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.home a[class*="btn"]:hover,
.home .button:hover,
.home .wp-element-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(19,121,91,.18);
}

/* Cards: subtle glass/premium treatment */
.home .card,
.home .product-card,
.home .service-card,
.home .category-card,
.home .feature-card,
.home .why-card,
.home article{
  border:1px solid var(--ayla-border);
  border-radius:18px;
  box-shadow:var(--ayla-shadow);
  background:var(--ayla-white);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.home .card:hover,
.home .product-card:hover,
.home .service-card:hover,
.home .category-card:hover,
.home .feature-card:hover,
.home .why-card:hover,
.home article:hover{
  transform:translateY(-5px);
  box-shadow:var(--ayla-shadow-hover);
  border-color:rgba(19,121,91,.18);
}

/* Images */
.home .product-card img,
.home .service-card img,
.home .category-card img,
.home article img{
  border-radius:14px;
}

/* Section headings */
.home h2{
  color:var(--ayla-ink);
  font-weight:850;
  letter-spacing:-.035em;
}
.home h2::after{
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin-top:10px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--ayla-green),var(--ayla-gold));
}

/* Product prices */
.home .price,
.home .product-price,
.home [class*="price"]{
  color:var(--ayla-green-dark);
  font-weight:850;
}

/* WhatsApp / CTA emphasis */
.home .whatsapp,
.home .btn-whatsapp,
.home a[href*="wa.me"]{
  border-radius:12px;
  font-weight:800;
}

/* Smooth anchor navigation */
html{scroll-behavior:smooth;}
#cara-pesan{scroll-margin-top:90px;}

/* Mobile: compact but luxurious */
@media(max-width:768px){
  body{font-size:14px;}
  .home section{
    margin-bottom:28px;
  }
  .home h1{
    font-size:clamp(30px,8vw,42px);
    line-height:1.08;
  }
  .home h2{
    font-size:clamp(24px,6.5vw,32px);
  }
  .home h3{
    font-size:19px;
  }
  .home p{
    line-height:1.58;
  }
  .home .card,
  .home .product-card,
  .home .service-card,
  .home .category-card,
  .home .feature-card,
  .home .why-card,
  .home article{
    border-radius:16px;
  }
}

/* Accessibility: don't animate for reduced-motion users */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

/* AYLA Premium Primary CTA */
.ayla-primary-cta{
  position:relative;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:54px;
  padding:0 28px!important;
  border:1px solid rgba(19,121,91,.18)!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#15946c 0%,#0d7657 100%)!important;
  color:#fff!important;
  font-weight:800!important;
  letter-spacing:-.01em;
  text-decoration:none!important;
  box-shadow:0 10px 25px rgba(13,118,87,.20)!important;
  overflow:hidden;
}
.ayla-primary-cta::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.22) 48%,transparent 68%);
  transform:translateX(-120%);
  transition:transform .55s ease;
}
.ayla-primary-cta:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 14px 32px rgba(13,118,87,.28)!important;
}
.ayla-primary-cta:hover::after{
  transform:translateX(120%);
}
@media(max-width:768px){
  .ayla-primary-cta{
    min-height:52px;
    padding:0 22px!important;
    border-radius:14px!important;
    font-size:15px!important;
  }
}

/* =========================================================
   AYLA CATEGORY SHOWCASE — PREMIUM
   Visual-only styling; existing category links/content stay intact.
   ========================================================= */
.ayla-category-showcase{
  position:relative;
  margin:26px auto 34px;
  padding:26px 18px 20px;
  border:1px solid rgba(19,121,91,.12);
  border-radius:24px;
  background:
    radial-gradient(circle at 8% 8%,rgba(215,168,75,.10),transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f5fbf8 100%);
  box-shadow:0 16px 42px rgba(16,35,29,.08);
  overflow:hidden;
}
.ayla-category-showcase::before{
  content:"";
  position:absolute;
  width:190px;height:190px;
  right:-90px;top:-100px;
  border-radius:50%;
  background:rgba(19,121,91,.06);
  pointer-events:none;
}
.ayla-category-showcase h2,
.ayla-category-showcase h3{
  position:relative;
  z-index:1;
}
.ayla-category-showcase > h2,
.ayla-category-showcase > h3{
  margin:0 0 18px;
  text-align:center;
  font-weight:850;
  letter-spacing:-.035em;
}
.ayla-category-showcase > h2::after,
.ayla-category-showcase > h3::after{
  content:"";
  display:block;
  width:42px;height:3px;
  margin:10px auto 0;
  border-radius:99px;
  background:linear-gradient(90deg,#15946c,#d7a84b);
}

/* Support common grid/list structures used by the existing theme */
.ayla-category-showcase .grid,
.ayla-category-showcase .categories-grid,
.ayla-category-showcase .category-grid,
.ayla-category-showcase .category-list,
.ayla-category-showcase > div{
  position:relative;
  z-index:1;
}
.ayla-category-showcase a{
  text-decoration:none;
}
.ayla-category-showcase .category-card,
.ayla-category-showcase .service-card,
.ayla-category-showcase .card{
  position:relative;
  min-height:112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:16px 10px;
  border:1px solid rgba(19,121,91,.10);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 24px rgba(16,35,29,.06);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.ayla-category-showcase .category-card:hover,
.ayla-category-showcase .service-card:hover,
.ayla-category-showcase .card:hover{
  transform:translateY(-4px);
  border-color:rgba(19,121,91,.22);
  box-shadow:0 14px 32px rgba(16,35,29,.11);
}
.ayla-category-showcase .category-card::after,
.ayla-category-showcase .service-card::after,
.ayla-category-showcase .card::after{
  content:"→";
  position:absolute;
  right:10px;
  bottom:8px;
  font-weight:800;
  color:#15946c;
  opacity:.75;
}
.ayla-category-showcase img{
  width:54px;
  height:54px;
  object-fit:contain;
  border-radius:14px;
}
.ayla-category-showcase svg,
.ayla-category-showcase i{
  color:#15946c;
}
.ayla-category-showcase a:hover{
  color:#0b4f3b;
}

@media(max-width:768px){
  .ayla-category-showcase{
    margin:20px 12px 28px;
    padding:22px 10px 14px;
    border-radius:20px;
  }
  .ayla-category-showcase > h2,
  .ayla-category-showcase > h3{
    font-size:18px;
    margin-bottom:14px;
  }
  .ayla-category-showcase .category-card,
  .ayla-category-showcase .service-card,
  .ayla-category-showcase .card{
    min-height:96px;
    padding:13px 7px;
    border-radius:15px;
    font-size:12px;
  }
  .ayla-category-showcase img{
    width:42px;height:42px;
  }
}


/*
   AYLA V5.5.48 — PREMIUM HORIZONTAL CATEGORY STRIP
   Keep the existing horizontal swipe behavior; enlarge cards and polish the CTA.
   Existing category URLs and order/payment flow are preserved.
   ========================================================= */
.ayla-category-premium{padding:4px 0 34px;background:#fff;}
.ayla-category-premium .ayla-service-strip-inner{max-width:980px;padding:26px 22px 18px;border:1px solid rgba(16,24,40,.07);border-radius:28px;background:radial-gradient(circle at 92% 0%,rgba(32,201,135,.10),transparent 28%),linear-gradient(180deg,#fff 0%,#f8fcfa 100%);box-shadow:0 18px 46px rgba(16,24,40,.08);}
.ayla-category-heading{text-align:center;margin:0 auto 20px;}
.ayla-category-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:7px;color:var(--ayla-teal,#20c987);font-size:11px;font-weight:850;letter-spacing:.13em;text-transform:uppercase;}
.ayla-category-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ayla-teal,#20c987);box-shadow:0 0 0 5px rgba(32,201,135,.10);}
.ayla-category-heading h2{margin:0;color:#111827;font-size:clamp(20px,3vw,27px);line-height:1.15;letter-spacing:-.035em;font-weight:850;}
.ayla-category-heading h2 span{color:var(--ayla-teal,#20c987);}
.ayla-category-heading p{max-width:570px;margin:8px auto 0;color:#667085;font-size:13px;line-height:1.55;}
.ayla-category-premium .ayla-service-items{display:flex!important;flex-wrap:nowrap!important;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 3px 10px;margin:0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.ayla-category-premium .ayla-service-items::-webkit-scrollbar{display:none;}
.ayla-category-premium .ayla-category-card{position:relative;flex:0 0 148px;min-height:136px;padding:16px 10px 11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;border:1px solid rgba(32,201,135,.16);border-radius:20px;background:rgba(255,255,255,.96);color:#111827;text-decoration:none;box-shadow:0 8px 24px rgba(16,24,40,.06);scroll-snap-align:start;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.ayla-category-premium .ayla-category-card::before{content:"";position:absolute;width:76px;height:76px;left:-34px;top:-38px;border-radius:50%;background:rgba(32,201,135,.07);}
.ayla-category-premium .ayla-category-card:hover,.ayla-category-premium .ayla-category-card:focus-visible{transform:translateY(-3px);border-color:rgba(32,201,135,.34);box-shadow:0 14px 30px rgba(16,24,40,.10);}
.ayla-category-premium .ayla-category-icon{width:48px;height:48px;display:grid!important;place-items:center;border-radius:15px;color:var(--ayla-teal,#20c987);background:linear-gradient(145deg,#effcf6,#fff);border:1px solid rgba(32,201,135,.16);box-shadow:0 6px 16px rgba(32,201,135,.10);font-size:0!important;position:relative;z-index:1;}
.ayla-category-premium .ayla-category-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ayla-category-premium .ayla-category-card strong{position:relative;z-index:1;font-size:11px;line-height:1.2;text-align:center;font-weight:850;letter-spacing:.015em;white-space:nowrap;}
.ayla-category-premium .ayla-category-card small{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:34px;width:100%;padding:7px 8px;border-radius:11px;color:#0b7655;font-size:10px;line-height:1;font-weight:800;background:linear-gradient(135deg,#e9faf3,#f7fffb);border:1px solid rgba(32,201,135,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 10px rgba(32,201,135,.06);transition:all .2s ease;}
.ayla-category-premium .ayla-category-card small span{color:var(--ayla-teal,#20c987);font-size:13px;font-weight:900;margin-left:4px;transition:transform .2s ease;}
.ayla-category-premium .ayla-category-card:hover small,.ayla-category-premium .ayla-category-card:focus-visible small{color:#fff;background:linear-gradient(135deg,#18b978,#20c987);border-color:transparent;box-shadow:0 7px 16px rgba(32,201,135,.22);}
.ayla-category-premium .ayla-category-card:hover small span,.ayla-category-premium .ayla-category-card:focus-visible small span{color:#fff;transform:translateX(2px);}
.ayla-category-premium .ayla-category-more{background:linear-gradient(145deg,#f0fcf7,#fff);}
.ayla-category-premium .ayla-category-more strong{color:#0b6f51;}
.ayla-category-swipe-hint{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:2px;color:#98a2b3;font-size:10px;font-weight:650;}
.ayla-category-swipe-hint span:first-child,.ayla-category-swipe-hint span:last-child{color:#b4c0c9;font-size:17px;line-height:1;}
@media (min-width:901px){.ayla-category-premium .ayla-category-card{flex-basis:158px;}}
@media (max-width:520px){.ayla-category-premium{padding:0 0 28px;}.ayla-category-premium .ayla-service-strip-inner{margin:0 12px;padding:21px 10px 13px;border-radius:22px;}.ayla-category-heading{margin-bottom:16px;}.ayla-category-kicker{font-size:9px;letter-spacing:.11em;}.ayla-category-heading h2{font-size:20px;}.ayla-category-heading p{margin-top:7px;font-size:11px;line-height:1.45;padding:0 6px;}.ayla-category-premium .ayla-service-items{gap:10px;padding:4px 2px 10px;}.ayla-category-premium .ayla-category-card{flex-basis:142px;min-height:132px;padding:14px 9px 10px;border-radius:18px;gap:7px;}.ayla-category-premium .ayla-category-icon{width:44px;height:44px;border-radius:13px;}.ayla-category-premium .ayla-category-icon svg{width:23px;height:23px;}.ayla-category-premium .ayla-category-card strong{font-size:10px;}.ayla-category-premium .ayla-category-card small{font-size:9px;min-height:32px;border-radius:10px;}.ayla-category-swipe-hint{font-size:9px;gap:8px;}}


/* =========================================================
   AYLA V5.5.49 — PREMIUM CATEGORY BUTTON MICRO POLISH
   Tombol "Lihat produk" diperkecil agar lebih elegan,
   tidak memenuhi lebar kartu, tetap nyaman disentuh di mobile.
   Struktur swipe dan kategori tidak diubah.
   ========================================================= */
.ayla-category-premium .ayla-category-card small{
  width:auto;
  min-width:108px;
  max-width:124px;
  min-height:30px;
  padding:6px 11px;
  border-radius:999px;
  font-size:9.5px;
  line-height:1;
  letter-spacing:.005em;
}
.ayla-category-premium .ayla-category-card small span{
  font-size:12px;
  margin-left:4px;
}
@media (max-width:520px){
  .ayla-category-premium .ayla-category-card small{
    min-width:104px;
    max-width:118px;
    min-height:30px;
    padding:6px 10px;
    font-size:9px;
  }
  .ayla-category-premium .ayla-category-card small span{
    font-size:11px;
    margin-left:3px;
  }
}


/* AYLA V5.5.50 — EXTRA SMALL CATEGORY CTA
   Reference-matched compact "Lihat produk" button. */
.ayla-category-premium .ayla-category-card small{
  display:inline-flex !important;
  align-self:center !important;
  width:92px !important;
  min-width:92px !important;
  max-width:92px !important;
  height:30px !important;
  min-height:30px !important;
  box-sizing:border-box !important;
  padding:0 8px !important;
  border-radius:999px !important;
  font-size:9px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.ayla-category-premium .ayla-category-card small span{
  font-size:11px !important;
  margin-left:3px !important;
}
@media (max-width:520px){
  .ayla-category-premium .ayla-category-card small{
    width:88px !important;
    min-width:88px !important;
    max-width:88px !important;
    height:29px !important;
    min-height:29px !important;
    padding:0 7px !important;
    font-size:8.5px !important;
  }
  .ayla-category-premium .ayla-category-card small span{
    font-size:10px !important;
    margin-left:3px !important;
  }
}


/* =========================================================
   AYLA V5.5.51 — REFERENCE PROPORTION POLISH
   Fokus: proporsi kartu kategori + tombol CTA.
   Swipe, link, urutan kategori, dan bagian Produk AYLA
   tidak diubah.
   ========================================================= */

/* Kartu sedikit lebih lega agar tombol kecil terlihat premium */
.ayla-category-premium .ayla-category-card{
  min-height:148px;
  padding:16px 10px 12px;
  gap:9px;
}

/* Tombol mengikuti referensi: compact, tidak memenuhi kartu */
.ayla-category-premium .ayla-category-card small{
  width:auto;
  min-width:96px;
  max-width:116px;
  min-height:34px;
  height:34px;
  padding:0 12px;
  margin-top:1px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  box-sizing:border-box;
  font-size:10px;
  font-weight:800;
  letter-spacing:-.01em;
}

/* Panah tetap kecil dan seimbang */
.ayla-category-premium .ayla-category-card small span{
  font-size:11px;
  margin-left:4px;
}

/* Mobile: kartu tetap compact tetapi lebih lega secara vertikal */
@media (max-width:520px){
  .ayla-category-premium .ayla-category-card{
    flex-basis:148px;
    min-height:148px;
    padding:15px 9px 11px;
    gap:8px;
  }

  .ayla-category-premium .ayla-category-card small{
    min-width:96px;
    max-width:112px;
    height:33px;
    min-height:33px;
    padding:0 11px;
    font-size:9.5px;
    border-radius:999px;
  }

  .ayla-category-premium .ayla-category-card small span{
    font-size:11px;
    margin-left:4px;
  }
}

/* =========================================================
   AYLA V5.5.52 — FULL WIDTH + TALLER SWIPE CATEGORY
   ========================================================= */
@media (max-width:768px){
  .ayla-category-showcase{
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin-left:12px!important;
    margin-right:12px!important;
    box-sizing:border-box;
    padding-left:10px!important;
    padding-right:10px!important;
    border-radius:22px!important;
  }

  .ayla-category-showcase .category-card,
  .ayla-category-showcase .service-card,
  .ayla-category-showcase .card{
    min-height:158px!important;
    padding:18px 9px 14px!important;
    justify-content:flex-start;
    gap:9px;
  }

  .ayla-category-showcase .category-card small,
  .ayla-category-showcase .service-card small,
  .ayla-category-showcase .card small{
    min-height:34px!important;
    height:34px!important;
    min-width:96px!important;
    max-width:112px!important;
    padding:0 11px!important;
    margin-top:auto!important;
    font-size:10px!important;
  }

  .ayla-category-showcase .category-card img,
  .ayla-category-showcase .service-card img,
  .ayla-category-showcase .card img{
    width:48px!important;
    height:48px!important;
  }
}

@media (min-width:769px){
  .ayla-category-showcase{
    width:min(96%,1180px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* =========================================================
   AYLA V5.5.53 — SERVICE PANEL MATCHES HERO IMAGE WIDTH
   Mobile: align the Layanan AYLA panel edges with the
   homepage banner, while preserving horizontal swipe.
   ========================================================= */
@media (max-width:768px){
  .ayla-category-premium .ayla-service-strip-inner{
    width:calc(100% - 96px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:520px){
  .ayla-category-premium .ayla-service-strip-inner{
    width:calc(100% - 48px)!important;
  }
}

/* =========================================================
   AYLA V5.5.54 — ACTUAL MOBILE WIDTH FIX
   The previous selector targeted a non-existing wrapper.
   The live markup uses .ayla-category-premium >
   .container > .ayla-service-strip-inner.
   Match the panel width to the shared homepage container
   used by the hero/banner. Keep horizontal swipe intact.
   ========================================================= */
@media (max-width:820px){
  .ayla-category-premium > .container{
    width:min(var(--container),calc(100% - 24px))!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  .ayla-category-premium .ayla-service-strip-inner{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:380px){
  .ayla-category-premium > .container{
    width:min(var(--container),calc(100% - 20px))!important;
  }
}

/* =========================================================
   AYLA V5.5.58 — PREMIUM HOME PRODUCT CARDS
   Visual-only: preserves product links, cart AJAX and WA.
   ========================================================= */
#produk .section-head{
  margin-bottom:20px;
}
#produk .section-kicker{
  letter-spacing:.10em;
}
#produk .grid{
  gap:16px;
}
#produk .card{
  border:1px solid rgba(19,121,91,.10);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 28px rgba(16,35,29,.07);
  overflow:hidden;
}
#produk .card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(16,35,29,.11);
  border-color:rgba(19,121,91,.18);
}
#produk .card-image{
  aspect-ratio:1/1;
  background:linear-gradient(145deg,#eef9f4,#f8fbfa);
}
#produk .card-image img{
  transition:transform .35s ease;
}
#produk .card:hover .card-image img{
  transform:scale(1.035);
}
#produk .card-body{
  padding:15px;
}
#produk .badge{
  margin-bottom:8px;
  padding:5px 9px;
  background:#edf8f3;
  color:#0b7655;
  border:1px solid rgba(19,121,91,.08);
}
#produk .card h3{
  margin-bottom:6px;
  font-size:17px;
  letter-spacing:-.025em;
}
#produk .price{
  font-size:17px;
  color:#0b7655;
  font-weight:850;
}
#produk .ayla-home-product-actions{
  margin-top:13px;
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:7px!important;
}
#produk .ayla-home-product-actions .btn{
  min-height:40px;
  padding:9px 10px;
  border-radius:11px;
  font-size:12px;
  font-weight:800;
}
#produk .ayla-home-product-actions .btn-secondary{
  border:1px solid rgba(19,121,91,.18);
  background:#fff;
  color:#0b7655;
}
#produk .ayla-home-product-actions .ayla-add-cart{
  background:linear-gradient(135deg,#15946c,#0b7655);
  box-shadow:0 7px 16px rgba(11,118,85,.15);
}
#produk .ayla-home-product-actions .whatsapp-order-btn{
  grid-column:1/-1;
  background:#fff;
  color:#0b7655;
  border:1px solid rgba(19,121,91,.18);
}
#produk .ayla-home-product-actions .whatsapp-order-btn:hover{
  background:#edf8f3;
}
#produk .whatsapp-btn-icon{
  margin-right:5px;
  vertical-align:-2px;
}

@media(max-width:600px){
  #produk .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  #produk .card{
    border-radius:16px;
  }
  #produk .card-body{
    padding:12px;
  }
  #produk .card h3{
    font-size:15px;
    line-height:1.3;
    min-height:39px;
  }
  #produk .price{
    font-size:15px;
  }
  #produk .ayla-home-product-actions{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
  #produk .ayla-home-product-actions .whatsapp-order-btn{
    grid-column:auto;
  }
  #produk .ayla-home-product-actions .btn{
    min-height:38px;
    padding:8px 9px;
    font-size:11.5px;
  }
}

/* =========================================================
   AYLA V5.5.59 — PREMIUM "KENAPA AYLA?"
   Visual-only. Product/order/payment logic untouched.
   ========================================================= */
.section-alt{
  background:linear-gradient(180deg,#f7fbf9 0%,#fff 100%)!important;
}
.section-alt .section-head{
  margin-bottom:22px;
}
.section-alt .section-kicker{
  color:#0b7655;
  letter-spacing:.11em;
}
.section-alt .features{
  gap:14px;
}
.section-alt .feature{
  position:relative;
  padding:20px 18px;
  border:1px solid rgba(19,121,91,.10);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 28px rgba(16,35,29,.06);
  transition:transform .22s ease,box-shadow .22s ease;
}
.section-alt .feature:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(16,35,29,.10);
}
.section-alt .feature-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#edf8f3;
  color:#0b7655;
}
.section-alt .feature-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.section-alt .feature h3{
  margin:12px 0 6px;
  font-size:17px;
  letter-spacing:-.02em;
}
.section-alt .feature p{
  margin:0;
  color:#66756f;
  font-size:13px;
  line-height:1.55;
}

@media(max-width:600px){
  .section-alt{
    padding-top:30px!important;
    padding-bottom:32px!important;
  }
  .section-alt .section-head{
    margin-bottom:17px;
  }
  .section-alt .features{
    grid-template-columns:1fr!important;
    gap:10px;
  }
  .section-alt .feature{
    min-height:0;
    padding:16px;
    display:grid;
    grid-template-columns:44px 1fr;
    column-gap:12px;
    align-items:center;
    border-radius:16px;
  }
  .section-alt .feature-icon{
    grid-row:1 / span 2;
  }
  .section-alt .feature h3{
    margin:0 0 3px;
    font-size:16px;
  }
  .section-alt .feature p{
    font-size:12.5px;
  }
}

/* =========================================================
   AYLA V5.5.60 — PREMIUM CARA PESAN
   Visual-only. Existing order links/process are preserved.
   ========================================================= */
.order-process{
  background:linear-gradient(180deg,#fff 0%,#f7fbf9 100%)!important;
}
.order-process .section-head{
  margin-bottom:24px;
}
.order-process .section-kicker{
  color:#0b7655;
  letter-spacing:.11em;
}
.order-process .process-grid{
  gap:14px;
}
.order-process .process-card{
  position:relative;
  padding:22px 20px 20px;
  border:1px solid rgba(19,121,91,.10);
  border-radius:20px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 28px rgba(16,35,29,.06);
  overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.order-process .process-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(16,35,29,.10);
  border-color:rgba(19,121,91,.18);
}
.order-process .process-number{
  position:absolute;
  top:13px;
  right:15px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  color:#c7d8d1;
}
.order-process .process-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#edf8f3;
  color:#0b7655;
  margin-bottom:13px;
}
.order-process .process-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.order-process .process-card h3{
  margin:0 0 6px;
  font-size:18px;
  letter-spacing:-.025em;
}
.order-process .process-card p{
  margin:0;
  color:#66756f;
  font-size:13px;
  line-height:1.6;
}

@media(max-width:600px){
  .order-process{
    padding-top:32px!important;
    padding-bottom:34px!important;
  }
  .order-process .section-head{
    margin-bottom:17px;
  }
  .order-process .process-grid{
    grid-template-columns:1fr!important;
    gap:10px;
    position:relative;
  }
  .order-process .process-card{
    min-height:0;
    padding:16px 16px 16px 74px;
    border-radius:16px;
  }
  .order-process .process-icon{
    position:absolute;
    left:16px;
    top:16px;
    width:44px;
    height:44px;
    margin:0;
    border-radius:13px;
  }
  .order-process .process-icon svg{
    width:23px;
    height:23px;
  }
  .order-process .process-card h3{
    font-size:16px;
    margin-bottom:3px;
  }
  .order-process .process-card p{
    font-size:12.5px;
    line-height:1.5;
  }
  .order-process .process-number{
    top:11px;
    right:12px;
    font-size:11px;
  }
}

/* =========================================================
   AYLA V5.5.61 — HOMEPAGE FINAL FINISH
   Footer + section rhythm only. No order/payment logic.
   ========================================================= */

/* Final rhythm between the homepage sections */
#produk{
  padding-top:44px;
  padding-bottom:48px;
}
.section-alt{
  padding-top:46px!important;
  padding-bottom:46px!important;
}
.order-process{
  padding-top:46px!important;
  padding-bottom:48px!important;
}

/* Keep section headings visually connected */
#produk .section-head,
.section-alt .section-head,
.order-process .section-head{
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
}

/* Premium footer, still simple and lightweight */
.site-footer{
  margin-top:0!important;
  padding:48px 0 22px!important;
  background:linear-gradient(180deg,#101b18 0%,#0b1412 100%)!important;
  color:#dce8e3;
  border-top:1px solid rgba(255,255,255,.06);
}
.site-footer .footer-grid{
  gap:28px!important;
}
.site-footer h3{
  margin-bottom:10px;
  font-size:16px;
  letter-spacing:-.015em;
}
.site-footer p{
  margin-top:0;
  color:#aebdb7;
  line-height:1.65;
}
.site-footer a{
  color:#dce8e3;
  transition:color .18s ease,opacity .18s ease;
}
.site-footer a:hover{
  color:#7ee0bb;
}
.site-footer .footer-bottom{
  margin-top:26px!important;
  padding-top:16px!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  color:#8fa29b;
  font-size:12px;
}

/* Prevent the footer from feeling oversized on phones */
@media(max-width:600px){
  #produk{
    padding-top:34px;
    padding-bottom:34px;
  }
  .section-alt{
    padding-top:32px!important;
    padding-bottom:32px!important;
  }
  .order-process{
    padding-top:34px!important;
    padding-bottom:36px!important;
  }
  .site-footer{
    padding:38px 0 18px!important;
  }
  .site-footer .footer-grid{
    gap:20px!important;
  }
  .site-footer .footer-bottom{
    margin-top:20px!important;
    padding-top:14px!important;
    line-height:1.5;
  }
}

/* =========================================================
   V5.5.61 — cache/version marker
   ========================================================= */

/* AYLA V5.5.62.1 — category link mapping correction */

/* AYLA V5.5.62.2 — intelligent category resolver */