/* ============================================================
   Yara Cookies — compact & modern layout pass
   Tightens the generous whitespace baked into styles.css so
   sections feel shorter/denser on every page, without touching
   any copy. Loaded after styles.css so these rules win.
   ============================================================ */

:root {
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-pill: 999px;
    --shadow-soft: 0 10px 26px rgba(23, 17, 10, .08);
    --shadow-lift: 0 16px 36px rgba(23, 17, 10, .14);
}


/* ---- Homepage sections ---- */

.section-title {
    padding: 64px 20px 32px
}

.cookie-showcase {
    padding: 0 28px 64px
}

.gifts-section {
    padding-bottom: 70px
}

.story-section {
    padding: 70px 28px;
    gap: 60px
}

.collection-nav {
    padding: 32px 24px 40px
}

.brand-promises article {
    padding: 36px clamp(22px, 4vw, 60px)
}


/* ---- Inner-page hero / section / info blocks ---- */

.page-hero {
    min-height: 0
}

.page-hero>div {
    padding: clamp(40px, 5vw, 64px) clamp(28px, 6vw, 88px)
}

.page-hero>img {
    min-height: 380px
}

.page-section {
    padding: 64px 32px
}

.info-hero {
    padding: 52px 28px 40px
}

.info-content {
    padding: 44px 24px 68px
}

.contact-layout {
    padding: 60px 32px
}

.story-editorial {
    padding: 68px 28px
}

.faq-section {
    padding: 12px 28px 32px
}

.page-cta {
    padding: 60px 28px
}

.occasion-grid img,
.product-tile>img {
    height: 300px
}

.story-values article,
.process-strip article {
    padding: 34px clamp(20px, 4vw, 56px)
}


/* ---- Desktop proportion fix: the hero image only had a min-height, so its
   natural aspect ratio was free to blow the whole section up to an
   oversized, disproportionate height. Give it a real, capped height instead
   so "website mode" matches the tighter mobile sizing. ---- */

@media(min-width:901px) {
    .page-hero {
        height: clamp(380px, 34vw, 460px)
    }
    .page-hero>img {
        height: 100%;
        min-height: 0
    }
    .hero {
        height: clamp(440px, 40vw, 560px)
    }
    .cookie-photo {
        height: 360px
    }
    .gift-feature,
    .gift-feature-reverse {
        min-height: 380px
    }
    .gift-feature>img {
        min-height: 380px;
        height: 380px
    }
    .story-section {
        padding: 64px 28px;
        gap: 56px
    }
    .story-section img {
        height: 400px
    }
    .section-title {
        padding: 56px 20px 28px
    }
}

@media(max-width:600px) {
    .section-title {
        padding: 48px 18px 26px
    }
    .page-section {
        padding: 48px 18px
    }
    .info-hero {
        padding: 40px 20px 32px
    }
    .info-content {
        padding: 36px 18px 52px
    }
    .contact-layout {
        padding: 44px 18px
    }
    .story-editorial {
        padding: 48px 18px
    }
    .page-cta {
        padding: 48px 20px
    }
    .cookie-showcase {
        padding: 0 18px 44px
    }
}


/* Final shared subpage footer treatment. Keeping this in patch.css ensures
   Story and Contact cannot inherit an older, larger footer variation. */

.subpage .simple-footer {
    padding: 18px 20px 14px!important;
    gap: 9px!important;
}

.subpage .simple-footer-brand {
    gap: 14px!important;
}

.subpage .simple-footer-brand>a>img {
    width: 38px!important;
    height: 38px!important;
}

.subpage .simple-footer nav {
    display: flex!important;
    flex-direction: row!important;
    flex-wrap: wrap!important;
    justify-content: center!important;
    gap: 7px 20px!important;
    margin: 0!important;
}

.subpage .simple-footer nav a {
    font-size: 11px!important;
    line-height: 1.3
}

.subpage .simple-footer-help {
    padding-top: 8px!important
}

.subpage .simple-footer>small {
    font-size: 10px!important
}

.subpage .simple-footer-social {
    width: 34px!important;
    height: 34px!important;
}

.subpage .simple-footer .footer-language-switch {
    justify-self: center!important;
    margin: 0!important;
    padding: 4px 2px 6px!important;
    gap: 8px!important;
    font-size: 12px!important;
    line-height: 1.2;
}

.subpage .simple-footer .footer-language-switch svg {
    width: 18px!important;
    height: 18px!important;
}


/* CTA section before the footer now stays the same dark style on every
   page (Cookies, Gifts, Story, Contact) for a consistent hand-off into
   the shared footer. Overrides the cream variant still defined in
   styles.css so Story matches Cookies/Gifts exactly. */

.story-page .page-cta {
    background: var(--dark)!important;
    color: #fff!important;
    border-top: 0!important;
}

.story-page .page-cta>p {
    color: var(--gold)!important
}

.story-page .page-cta a {
    color: var(--gold)!important
}

.story-page .page-hero h1,
.story-page .story-editorial h2,
.story-page .story-values h3 {
    color: #030202!important;
}

.page-hero {
    border: 0!important;
    outline: 0!important;
    box-shadow: none!important;
    gap: 0!important;
    column-gap: 0!important;
}

.page-hero>img {
    display: block!important;
    border: 0!important;
    outline: 0!important;
    box-shadow: none!important;
    vertical-align: top!important;
}

.page-hero>div {
    border: 0!important;
    outline: 0!important;
    box-shadow: none!important;
}


/* Language remains easy to notice while the shared footer stays compact. */

.subpage .simple-footer .footer-language-switch {
    font-size: 13px!important;
    font-weight: 700!important;
}

.subpage .simple-footer .footer-language-switch svg {
    width: 20px!important;
    height: 20px!important;
}

@media(max-width:600px) {
    .subpage .simple-footer {
        padding: 15px 12px 12px!important;
        gap: 8px!important
    }
    .subpage .simple-footer-brand {
        gap: 10px!important
    }
    .subpage .simple-footer-brand>a>img {
        width: 34px!important;
        height: 34px!important
    }
    .subpage .simple-footer nav {
        gap: 6px 14px!important
    }
    .subpage .simple-footer .footer-language-switch {
        font-size: 13px!important
    }
    .subpage .simple-footer-social {
        width: 30px!important;
        height: 30px!important
    }
}


/* ---- Modern card treatment (rounded corners + soft lift on hover) ---- */

.cookie-card,
.product-tile,
.info-card,
.cart-item img,
.gift-feature {
    border-radius: var(--radius-sm);
    overflow: hidden
}

.cookie-card,
.product-tile {
    transition: box-shadow .25s ease, transform .25s ease
}

.cookie-card:hover,
.product-tile:hover {
    box-shadow: var(--shadow-soft);
    transform: translateY(-3px)
}

dialog {
    border-radius: var(--radius-md);
    overflow-y: auto;
    overflow-x: hidden
}

.cart-drawer {
    box-shadow: -18px 0 50px rgba(0, 0, 0, .16)
}

.toast {
    border-radius: var(--radius-sm)
}

.chat-panel {
    border-radius: var(--radius-md);
    overflow: hidden
}


/* ---- Add-to-bag action: a real, modern button instead of a plain underline ---- */

.add-button {
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--dark);
    color: #fff;
    padding: 11px 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.add-button:hover {
    background: var(--gold);
    transform: translateY(-1px)
}

.add-button:active {
    transform: translateY(0)
}


/* Price + add-to-bag row for the full menu grid (mirrors the homepage cookie-info row) */

.product-tile-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #ded6cc;
}

.product-tile-action strong {
    font-size: 12px;
    font-weight: 500;
    color: #8b817a
}


/* Testimonials page: "See more on Instagram" as a real pill button with icon */

.testimonial-more {
    text-align: center;
    margin-top: 44px
}

.instagram-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--dark);
    color: #fff;
    padding: 14px 26px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.instagram-button:hover {
    background: var(--gold);
    transform: translateY(-1px)
}

.instagram-button:active {
    transform: translateY(0)
}

.instagram-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    flex-shrink: 0;
}

.instagram-button span {
    display: inline-flex
}


/* Hamper/event cards on the Gifts page can be added to the bag too */

.occasion-grid article .add-button {
    margin-top: 16px
}

.occasion-price {
    display: block;
    margin: 16px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: #8b817a
}


/* ---- Price line inside the checkout order summary ---- */

.checkout-summary span {
    justify-content: space-between
}

.checkout-summary span em {
    font-style: normal;
    color: var(--dark);
    font-weight: 600
}

.checkout-total {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: 2px;
    border-top: 1px solid #e2d5bb;
    font-weight: 700;
    color: var(--dark)
}


/* ---- Header cart icon on every page (added via script for consistency) ---- */

.header-icon {
    margin-left: 4px
}


/* ---- Dialog + drawer buttons keep the pill treatment ---- */

.drawer-footer button,
.dialog-submit {
    border-radius: var(--radius-pill)
}

.qty button {
    border-radius: 50%
}


/* ---- Fix logo footer ----
   Logo aslinya (lingkaran hitam + cincin & tulisan emas) memang didesain
   untuk tampil di atas background gelap - TIDAK butuh mix-blend-mode atau
   filter apa pun, itu cuma bikin rusak (invisible / jadi putih polos).
   Akar masalah sebenarnya cuma border-radius: ada aturan lain di file ini
   yang nimpa border-radius jadi kecil (var(--radius-sm)), jadi sudut PUTIH
   kanvas persegi file gambarnya ikut kelihatan alih-alih ke-crop jadi
   lingkaran penuh. Fix: paksa balik border-radius:50% + tampilan normal. */

.site-footer .footer-logo img,
.footer-brand-block .footer-logo img,
.simple-footer-brand img,
.simple-footer img {
    filter: none;
    mix-blend-mode: normal;
    background: transparent;
    border-radius: 50% !important;
    overflow: hidden;
}


/* ---- Fix hero link clickability ---- */

.hero-shade {
    pointer-events: none !important;
}

.hero-slide {
    pointer-events: none !important;
}

.hero-slide.active {
    pointer-events: auto !important;
}

.hero-slide.active .hero-copy {
    pointer-events: auto !important;
    position: absolute;
    z-index: 10 !important;
}

.hero-slide.active .light-link,
.hero-slide.active .hero-copy a {
    pointer-events: auto !important;
    position: relative;
    z-index: 11 !important;
    cursor: pointer !important;
    display: inline-flex;
}


/* Fix footer logo */

.site-footer .footer-logo img {
    filter: none;
    mix-blend-mode: normal;
    border-radius: 50% !important;
}