/*
Theme Name: Molasaga Hello Child
Theme URI: https://molasaga.com/
Description: Child theme for Molasaga, based on Hello Elementor.
Author: Molasaga
Template: hello-elementor
Version: 3.0.0
Text Domain: molasaga-hello-child
*/

:root {
    --mola-bg: #fbfaf7;
    --mola-text: #242126;
    --mola-muted: #77716f;
    --mola-line: rgba(36,33,38,.12);
    --mola-blue: #2f6fed;
}

body.molasaga-work-page { margin:0; background:var(--mola-bg); color:var(--mola-text); overflow-x:hidden; }
.mola-work-shell { width:min(1540px,calc(100vw - 56px)); min-height:100vh; margin:0 auto; display:grid; grid-template-columns:82px minmax(460px,1.45fr) minmax(350px,.95fr); gap:28px; align-items:center; padding:28px 0; box-sizing:border-box; }
.admin-bar .mola-work-shell { min-height:calc(100vh - 32px); }
.mola-work-thumbs { align-self:center; display:flex; flex-direction:column; gap:10px; max-height:min(74vh,760px); overflow-y:auto; padding:2px 4px 2px 0; scrollbar-width:thin; }
.mola-work-thumb { width:68px; height:68px; flex:0 0 68px; padding:2px; border:2px solid transparent; border-radius:8px; background:transparent; cursor:pointer; opacity:.62; transition:opacity .15s ease,border-color .15s ease,box-shadow .15s ease; }
.mola-work-thumb:hover { opacity:1; border-color:rgba(47,111,237,.55); }
.mola-work-thumb.is-active { opacity:1; border-color:var(--mola-blue); box-shadow:0 0 0 1px rgba(47,111,237,.12); }
.mola-work-thumb img { display:block; width:100%; height:100%; object-fit:cover; border-radius:5px; }
.mola-work-visual { min-width:0; position:relative; display:flex; align-items:center; justify-content:center; }
.mola-work-stage { width:100%; height:min(78vh,790px); min-height:520px; display:flex; align-items:center; justify-content:center; position:relative; }
.mola-work-stage img { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; }
.mola-work-arrow { position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border:0; border-radius:999px; background:rgba(255,255,255,.94); box-shadow:0 8px 30px rgba(0,0,0,.08); color:#342f35; font-size:34px; line-height:1; cursor:pointer; z-index:3; transition:background .16s ease; }
.mola-work-arrow:hover { background:#fff; }
.mola-work-arrow--prev { left:-18px; }
.mola-work-arrow--next { right:-18px; }
.mola-work-info { align-self:center; min-width:0; max-height:calc(100vh - 76px); overflow-y:auto; padding:6px 10px 6px 8px; scrollbar-width:thin; }
.admin-bar .mola-work-info { max-height:calc(100vh - 108px); }
.mola-work-eyebrow { margin:0 0 10px; color:var(--mola-muted); font-size:12px; line-height:1.45; letter-spacing:.08em; text-transform:uppercase; }
.mola-work-title { margin:0 0 8px; font-size:clamp(30px,3.2vw,48px); line-height:1.02; font-weight:500; letter-spacing:-.025em; }
.mola-work-code { margin:0 0 18px; color:var(--mola-muted); font-size:11px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; }
.mola-work-status { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:0 0 18px; border-bottom:1px solid var(--mola-line); margin-bottom:14px; }
.mola-work-status__label { font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.mola-work-price { font-size:28px; font-weight:500; }


/* Purchase controls */
.mola-work-purchase { padding:2px 0 18px; border-bottom:1px solid var(--mola-line); margin-bottom:14px; }
.mola-work-qty-label { display:block; margin:0 0 7px; font-size:12px; font-weight:600; line-height:1.4; }
.mola-work-qty-select { width:100%; height:48px; padding:0 14px; border:1px solid rgba(36,33,38,.38); border-radius:12px; background:transparent; color:var(--mola-text); font:inherit; font-size:14px; outline:none; }
.mola-work-qty-select:focus { border-color:var(--mola-blue); box-shadow:0 0 0 2px rgba(47,111,237,.12); }
.mola-work-buy-actions { display:grid; gap:10px; margin-top:12px; }
.mola-work-buy-btn { width:100%; min-height:50px; border-radius:999px; padding:12px 18px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:transform .12s ease, background .12s ease, opacity .12s ease; }
.mola-work-buy-btn:hover:not(:disabled) { transform:translateY(-1px); }
.mola-work-buy-btn--now { border:1px solid #312c34; background:transparent; color:#312c34; }
.mola-work-buy-btn--cart { border:1px solid #312c34; background:#312c34; color:#fff; }
.mola-work-buy-btn:disabled { cursor:not-allowed; opacity:.48; }
.mola-work-commerce-note { margin:8px 0 0; color:var(--mola-muted); font-size:10px; line-height:1.4; }

.mola-work-shipping { padding:14px 0 16px; border-bottom:1px solid var(--mola-line); margin-bottom:18px; }
.mola-work-shipping__title { margin:0 0 7px; font-size:14px; line-height:1.35; font-weight:600; }
.mola-work-shipping__line { margin:3px 0; color:var(--mola-muted); font-size:12px; line-height:1.5; }
.mola-work-shipping__badge { display:inline-flex; align-items:center; gap:7px; color:var(--mola-text); }
.mola-work-shipping__badge::before { content:"✓"; display:inline-flex; width:18px; height:18px; border:1px solid rgba(47,111,237,.45); border-radius:999px; align-items:center; justify-content:center; color:var(--mola-blue); font-size:11px; line-height:1; }
.mola-work-details { margin:0; }
.mola-work-row { display:grid; grid-template-columns:118px minmax(0,1fr); gap:18px; padding:10px 0; border-bottom:1px solid var(--mola-line); }
.mola-work-row dt { margin:0; color:var(--mola-muted); font-size:12px; line-height:1.45; }
.mola-work-row dd { margin:0; font-size:13px; line-height:1.5; }
.mola-work-empty-gallery { color:var(--mola-muted); font-size:13px; }
@media (max-width:1100px){ .mola-work-shell{width:min(100% - 36px,1100px);grid-template-columns:70px minmax(0,1.35fr) minmax(300px,.9fr);gap:18px}.mola-work-thumb{width:58px;height:58px;flex-basis:58px}.mola-work-stage{min-height:440px}.mola-work-arrow{width:46px;height:46px;font-size:29px} }
@media (max-width:820px){ body.molasaga-work-page{overflow:auto}.mola-work-shell{width:min(100% - 24px,720px);min-height:0;grid-template-columns:1fr;gap:18px;padding:16px 0 44px}.mola-work-visual{order:1}.mola-work-stage{height:min(62vh,620px);min-height:360px}.mola-work-thumbs{order:2;flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;padding:0 0 4px}.mola-work-thumb{flex:0 0 62px;width:62px;height:62px}.mola-work-info{order:3;max-height:none;overflow:visible;padding:8px 0 0}.mola-work-arrow{width:42px;height:42px;font-size:26px}.mola-work-arrow--prev{left:8px}.mola-work-arrow--next{right:8px}.mola-work-title{font-size:clamp(32px,10vw,48px)} }


/* Commerce Core v2.0 — waiting / reservation interface */
.mola-purchase-wait {
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(251,250,247,.94);
    backdrop-filter:blur(8px);
}
.admin-bar .mola-purchase-wait { top:32px; }
.mola-purchase-wait__card {
    width:min(520px,100%);
    padding:42px 38px;
    border:1px solid var(--mola-line);
    border-radius:22px;
    background:var(--mola-bg);
    box-shadow:0 24px 80px rgba(36,33,38,.12);
    text-align:center;
}
.mola-purchase-wait__pulse {
    width:14px;
    height:14px;
    margin:0 auto 18px;
    border-radius:999px;
    background:var(--mola-blue);
    box-shadow:0 0 0 0 rgba(47,111,237,.24);
    animation:molaWaitPulse 1.6s infinite;
}
@keyframes molaWaitPulse {
    0% { box-shadow:0 0 0 0 rgba(47,111,237,.24); }
    70% { box-shadow:0 0 0 14px rgba(47,111,237,0); }
    100% { box-shadow:0 0 0 0 rgba(47,111,237,0); }
}
.mola-purchase-wait__eyebrow {
    margin:0 0 10px;
    color:var(--mola-muted);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.mola-purchase-wait__title {
    margin:0;
    font-size:clamp(27px,5vw,38px);
    line-height:1.08;
    font-weight:500;
    letter-spacing:-.02em;
}
.mola-purchase-wait__text {
    max-width:430px;
    margin:16px auto 0;
    color:var(--mola-muted);
    font-size:14px;
    line-height:1.65;
}
.mola-purchase-wait__time {
    margin:22px 0 20px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.mola-purchase-wait__back {
    color:var(--mola-text);
    font-size:12px;
    text-underline-offset:4px;
}
@media (max-width:782px) {
    .admin-bar .mola-purchase-wait { top:46px; }
    .mola-purchase-wait__card { padding:34px 24px; }
}


/* v2.3 — public stock availability */
.mola-work-availability-note {
    display:flex;
    align-items:center;
    gap:7px;
    margin:-4px 0 18px;
    color:var(--mola-muted);
    font-size:12px;
    line-height:1.4;
    letter-spacing:.01em;
}
.mola-work-availability-note__count {
    color:var(--mola-text);
    font-weight:600;
}
.mola-work-availability-note__dot {
    opacity:.55;
}
.mola-work-availability-note__kind {
    color:var(--mola-muted);
}


/* v2.4 — quantity control alignment */
.mola-work-qty-row {
    display:grid;
    grid-template-columns:auto minmax(120px, 1fr);
    align-items:center;
    gap:14px;
    margin:0 0 12px;
}
.mola-work-qty-row .mola-work-qty-label {
    margin:0;
    white-space:nowrap;
}
.mola-work-qty-row .mola-work-qty-select {
    width:100%;
    margin:0;
}
@media (max-width:640px) {
    .mola-work-qty-row {
        grid-template-columns:1fr;
        gap:7px;
    }
}


/* v2.5 — compact stock + quantity row */
.mola-work-stock-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin:0 0 14px;
}
.mola-work-stock-row .mola-work-availability-note {
    margin:0;
    flex:0 0 auto;
}
.mola-work-qty-inline {
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
}
.mola-work-qty-inline .mola-work-qty-label {
    margin:0;
    white-space:nowrap;
}
.mola-work-qty-inline .mola-work-qty-select {
    width:110px;
    min-width:110px;
    margin:0;
}
@media (max-width:640px) {
    .mola-work-stock-row {
        align-items:flex-start;
        gap:12px;
    }
    .mola-work-qty-inline {
        gap:8px;
    }
    .mola-work-qty-inline .mola-work-qty-select {
        width:92px;
        min-width:92px;
    }
}


/* v2.6 — tighter stock + quantity grouping */
.mola-work-stock-row {
    justify-content:flex-start;
    gap:26px;
}
.mola-work-qty-inline {
    margin-left:0;
}
.mola-work-qty-inline .mola-work-qty-select {
    width:96px;
    min-width:96px;
}
@media (max-width:640px) {
    .mola-work-stock-row {
        gap:16px;
        flex-wrap:wrap;
    }
    .mola-work-qty-inline .mola-work-qty-select {
        width:88px;
        min-width:88px;
    }
}
/* Journal featured image — preserve original square image */
.single-post .mola-journal-featured-image {
    margin: 0 auto 32px;
    text-align: center;
}

.single-post .mola-journal-featured-image img {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 auto;
}
/* Journal floating navigation — clearer arrows */
.mola-journal-nav-button {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    width: 42px;
    height: 42px;
}

.mola-journal-nav-button:hover {
    font-weight: 800 !important;
    transform: scale(1.08);
}
/* Journal floating navigation — bold SVG arrows */
.mola-journal-nav-button {
    font-size: 0 !important; /* hide ↑ ↓ ← → text */
    color: #2d2b2b !important;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(45,43,43,.22) !important;
}

.mola-journal-nav-button::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* UP */
.mola-journal-nav-button[data-mola-scroll="top"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20V5M5 12l7-7 7 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20V5M5 12l7-7 7 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* DOWN */
.mola-journal-nav-button[data-mola-scroll="bottom"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v15M5 12l7 7 7-7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v15M5 12l7 7 7-7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* PREVIOUS */
.mola-journal-float-nav > :nth-child(3)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M12 5l-7 7 7 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M12 5l-7 7 7 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* NEXT */
.mola-journal-float-nav > :nth-child(4)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mola-journal-nav-button:hover {
    color: #d52f67 !important;
    border-color: #d52f67 !important;
    background: #fff !important;
    transform: scale(1.08);
}

.mola-journal-nav-button.is-disabled {
    opacity: .25;
}
/* Journal navigation — black square buttons */
.mola-journal-float-nav {
    display: grid !important;
    grid-template-columns: 46px !important;
    gap: 8px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
}

.mola-journal-nav-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;

    display: grid !important;
    place-items: center !important;

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

    background: #111 !important;
    border: 1px solid #111 !important;
    border-radius: 9px !important;

    color: #fff !important;

    box-shadow: 0 4px 12px rgba(0,0,0,.14) !important;

    transform: none !important;
}

.mola-journal-nav-button::before {
    width: 22px !important;
    height: 22px !important;
    background-color: #fff !important;
}

.mola-journal-nav-button:hover {
    background: #2a2a2a !important;
    border-color: #2a2a2a !important;
    color: #fff !important;
    transform: none !important;
}

.mola-journal-nav-button.is-disabled {
    background: #111 !important;
    border-color: #111 !important;
    opacity: .28 !important;
}

/* Keep all four buttons perfectly vertical on desktop */
@media (min-width: 901px) {
    .mola-journal-float-nav {
        width: 46px !important;
    }
}
/* =========================================================
   MOLASAGA VISUAL SYSTEM — BASE PALETTE
   ========================================================= */

:root {
    --mola-paper: #F0E1C8;
    --mola-paper-light: #F4E7D2;
    --mola-paper-card: #E8D7BB;

    --mola-ink: #4F4433;
    --mola-text-soft: #786A50;

    --mola-olive: #756C42;
    --mola-brown: #8A694A;
    --mola-dark: #62593B;

    --mola-border: #C3B08E;
    --mola-cream: #FFF8EA;
}


/* =========================================================
   MOLASAGA VISUAL SYSTEM — BASE APPLICATION
   Palette test only — no layout changes
   ========================================================= */

body:not(.molasaga-work-page) {
    background-color: var(--mola-paper-light);
    color: var(--mola-ink);
}

body:not(.molasaga-work-page) h1,
body:not(.molasaga-work-page) h2,
body:not(.molasaga-work-page) h3,
body:not(.molasaga-work-page) h4,
body:not(.molasaga-work-page) h5,
body:not(.molasaga-work-page) h6 {
    color: var(--mola-ink);
}

body:not(.molasaga-work-page) a {
    color: var(--mola-brown);
}

body:not(.molasaga-work-page) a:hover {
    color: var(--mola-olive);
}

body:not(.molasaga-work-page) hr {
    border-color: var(--mola-border);
}
/* =========================================================
   JOURNAL — CARD FINISHING
   ========================================================= */

/* Read More button */
.mola-journal-read-more,
.mola-journal-read-more:visited {
    background: var(--mola-dark) !important;
    color: var(--mola-cream) !important;
}

.mola-journal-read-more:hover {
    background: var(--mola-olive) !important;
    color: #fff !important;
}

/* Remove the visible white margin from Simple Steps thumbnail only */
.mola-journal-card-image[href*="watercolor-illustration-step-by-step"] {
    overflow: hidden;
}

.mola-journal-card-image[href*="watercolor-illustration-step-by-step"] img {
    transform: scale(1.055);
}
/* =========================================================
   JOURNAL — UNIFIED RESPONSIVE COVER IMAGES
   ========================================================= */

.mola-journal-card-image {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;

    overflow: hidden !important;
    border: 0 !important;
    border-radius: 12px !important;

    background: transparent !important;
    box-shadow: none !important;
}

.mola-journal-card-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    /* Slight universal crop removes embedded white edges */
    transform: scale(1.035) !important;

    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Sidebar thumbnails follow the same visual language */
.mola-journal-side-thumb {
    overflow: hidden !important;
    border-radius: 7px !important;
    border: 0 !important;
}

.mola-journal-side-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
}
/* Journal — back to index inside sticky sidebar */
.mola-journal-back-wrap {
    margin: 0 0 24px;
}

.mola-journal-back-link {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    padding: 12px 14px;

    border: 1px solid var(--mola-border);
    border-radius: 9px;

    background: rgba(255, 248, 234, .45);
    color: var(--mola-ink) !important;

    text-decoration: none !important;

    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .035em;
}

.mola-journal-back-arrow {
    flex: 0 0 auto;
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
}

.mola-journal-back-link:hover {
    background: var(--mola-paper-card);
    border-color: var(--mola-olive);
    color: var(--mola-olive) !important;
}
/* =========================================================
   HOMEPAGE — FULL WIDTH + RESPONSIVE FIT
   ========================================================= */

/* Remove Hello Elementor content-width restriction on homepage */
body.home #content,
body.home .site-main,
body.home .page-content,
body.home .entry-content {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Never allow homepage to create horizontal scrolling */
body.home {
    overflow-x: hidden;
}

.mola-home {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip;
    box-sizing: border-box;
}

/* Sections adapt to the actual available screen width */
.mola-home-section {
    width: calc(100% - 48px) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Everything inside the homepage must be shrinkable */
.mola-home *,
.mola-home *::before,
.mola-home *::after {
    box-sizing: border-box;
    min-width: 0;
}

/* Laptop / tablet */
@media (max-width: 1100px) {
    .mola-home-section {
        width: calc(100% - 32px) !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .mola-home-section {
        width: calc(100% - 20px) !important;
    }
}
/* =========================================================
   HOMEPAGE — REMOVE OLD HELLO HEADER + PAGE TITLE
   ========================================================= */

body.home #site-header,
body.home .site-header,
body.home .page-header {
    display: none !important;
}

/* Remove leftover space from the old page header */
body.home #content,
body.home .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* =========================================================
   HOMEPAGE — HERO PROPORTION REFINEMENT
   ========================================================= */

.mola-home-hero {
    min-height: auto !important;
    padding-top: 58px !important;
    padding-bottom: 58px !important;
    align-items: center !important;
}

.mola-home-hero-art .mola-home-placeholder {
    min-height: clamp(430px, 42vw, 610px) !important;
}

.mola-home-hero h1 {
    font-size: clamp(46px, 4.7vw, 72px) !important;
    line-height: 1.02 !important;
}
/* =========================================================
   HOMEPAGE — HERO FINAL FRAME
   ========================================================= */

.mola-home-hero {
    padding-top: 42px !important;
    padding-bottom: 46px !important;
    gap: clamp(36px, 4vw, 64px) !important;
}

.mola-home-hero h1 {
    max-width: 13ch !important;
    font-size: clamp(40px, 3.8vw, 60px) !important;
    line-height: 1.04 !important;
    margin-bottom: 20px !important;
}

.mola-home-hero-art .mola-home-placeholder {
    min-height: clamp(380px, 34vw, 520px) !important;
}

.mola-home-lead {
    font-size: clamp(15px, 1.15vw, 18px) !important;
    margin-bottom: 22px !important;
}
/* =========================================================
   HOMEPAGE — HERO VISUAL BALANCE
   ========================================================= */

.mola-home-hero {
    grid-template-columns:
        minmax(430px, .95fr)
        minmax(0, 1.18fr) !important;

    gap: clamp(18px, 2vw, 30px) !important;

    padding-top: 44px !important;
    padding-bottom: 46px !important;
}

.mola-home-hero h1 {
    max-width: 14ch !important;
    font-size: clamp(50px, 4.35vw, 70px) !important;
    line-height: 1.015 !important;
}

.mola-home-hero-art .mola-home-placeholder {
    min-height: clamp(400px, 35vw, 540px) !important;
}
/* =========================================================
   GUEST AVATAR — ROUND PINK STYLE
   ========================================================= */

.mola-global-nav > a.mola-global-avatar-guest {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;

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

    display: grid !important;
    place-items: center !important;

    border: 1px solid #8a8a8a !important;
    border-radius: 50% !important;

    background: #8a8a8a !important;
    color: #fff !important;

    line-height: 1 !important;
    text-decoration: none !important;
}

.mola-global-nav > a.mola-global-avatar-guest::after {
    display: none !important;
}

.mola-global-nav > a.mola-global-avatar-guest svg {
    width: 18px !important;
    height: 18px !important;

    fill: none !important;
    stroke: #fff !important;
    stroke-width: 1.8 !important;
}

.mola-global-nav > a.mola-global-avatar-guest:hover {
    background: #707070 !important;
    border-color: #707070 !important;
}
/* =========================================================
   HEADER BRAND — SYMBOL + WORDMARK
   ========================================================= */

.mola-global-header .mola-global-brand {
    display: grid !important;
    grid-template-columns: 46px auto;
    grid-template-rows: auto auto;
    column-gap: 8px !important;
    row-gap: 1px !important;
    align-items: center;
}

/* Tách cá và chữ thành 2 phần độc lập trong grid */
.mola-global-header .mola-global-brand-parts {
    display: contents !important;
}

/* Cá */
.mola-global-header .mola-global-brand-symbol {
    grid-column: 1;
    grid-row: 1 / span 2;

    width: 46px !important;
    height: 46px !important;

    object-fit: contain !important;
    align-self: center;
}

/* Chữ Molasaga — cao ngang cá */
.mola-global-header .mola-global-brand-wordmark {
    grid-column: 2;
    grid-row: 1;

    width: auto !important;
    height: 46px !important;
    max-width: none !important;

    object-fit: contain !important;
    object-position: left center !important;
}

/* Stories · Art · Roots nằm giữa dưới chữ Molasaga */
.mola-global-header .mola-global-brand-tagline {
    grid-column: 2;
    grid-row: 2;

    justify-self: center !important;
    text-align: center !important;

    margin: -2px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}

/* Mobile */
@media (max-width: 640px) {

    .mola-global-header .mola-global-brand {
        grid-template-columns: 35px auto;
        column-gap: 6px !important;
    }

    .mola-global-header .mola-global-brand-symbol {
        width: 35px !important;
        height: 35px !important;
    }

    .mola-global-header .mola-global-brand-wordmark {
        height: 35px !important;
    }

    .mola-global-header .mola-global-brand-tagline {
        font-size: 8px !important;
    }
}
/* =========================================================
   HOMEPAGE HERO — FIX TITLE WRAPPING
   ========================================================= */

body.home .mola-home-hero {
    grid-template-columns:
        minmax(500px, .95fr)
        minmax(0, 1.05fr) !important;
}

body.home .mola-home-hero h1 {
    max-width: 14ch !important;
    font-size: clamp(52px, 4.5vw, 68px) !important;
    line-height: 1.02 !important;
}
:root {
  --mola-hero-bg: #b2a088;
}

/* cột ảnh */
body.home .mola-home-hero-art {
  position: relative !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* bỏ toàn bộ khung cũ */
body.home .mola-home-placeholder-has-image {
  position: relative !important;
  display: inline-block !important;
  width: auto !important;
  max-width: min(42vw, 620px) !important;
  max-height: min(74vh, 720px) !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* bỏ overlay/filter cũ */
body.home .mola-home-placeholder-has-image::before {
  content: none !important;
}

/* HERO IMAGE — blend directly into page background */

body.home .mola-home-placeholder-has-image::after {
  content: none !important;
}

body.home .mola-home-hero-image {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  object-fit: contain !important;
  object-position: center center !important;

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

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  mix-blend-mode: multiply !important;
  opacity: 1 !important;
  filter: none !important;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.04) 5%,
      rgba(0,0,0,.18) 10%,
      rgba(0,0,0,.45) 15%,
      rgba(0,0,0,.78) 20%,
      #000 26%,
      #000 74%,
      rgba(0,0,0,.78) 80%,
      rgba(0,0,0,.45) 85%,
      rgba(0,0,0,.18) 90%,
      rgba(0,0,0,.04) 95%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.03) 5%,
      rgba(0,0,0,.14) 10%,
      rgba(0,0,0,.38) 16%,
      rgba(0,0,0,.72) 22%,
      #000 28%,
      #000 72%,
      rgba(0,0,0,.72) 78%,
      rgba(0,0,0,.38) 84%,
      rgba(0,0,0,.14) 90%,
      rgba(0,0,0,.03) 95%,
      transparent 100%
    ) !important;

  -webkit-mask-composite: source-in !important;

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.04) 5%,
      rgba(0,0,0,.18) 10%,
      rgba(0,0,0,.45) 15%,
      rgba(0,0,0,.78) 20%,
      #000 26%,
      #000 74%,
      rgba(0,0,0,.78) 80%,
      rgba(0,0,0,.45) 85%,
      rgba(0,0,0,.18) 90%,
      rgba(0,0,0,.04) 95%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.03) 5%,
      rgba(0,0,0,.14) 10%,
      rgba(0,0,0,.38) 16%,
      rgba(0,0,0,.72) 22%,
      #000 28%,
      #000 72%,
      rgba(0,0,0,.72) 78%,
      rgba(0,0,0,.38) 84%,
      rgba(0,0,0,.14) 90%,
      rgba(0,0,0,.03) 95%,
      transparent 100%
    ) !important;

  mask-composite: intersect !important;

  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;

  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

/* tablet */
@media (max-width: 1200px) {
  body.home .mola-home-placeholder-has-image,
  body.home .mola-home-hero-image {
    max-width: min(44vw, 560px) !important;
    max-height: min(68vh, 640px) !important;
  }
}

/* mobile */
@media (max-width: 767px) {
  body.home .mola-home-hero-art {
    justify-content: center !important;
    margin-top: 24px !important;
  }

  body.home .mola-home-placeholder-has-image,
  body.home .mola-home-hero-image {
    max-width: min(100%, 92vw) !important;
    max-height: 62vh !important;
  }
}
	  /* =========================================================
   ECOSYSTEM CARDS — image blend + pointed hand-drawn corners
   Added after line 1275
   ========================================================= */

/* =========================================================
   ECOSYSTEM CARDS — HAND-DRAWN POINTED FRAME
   Giữ khung, góc nhọn hơi lệch như nét vẽ tay
   ========================================================= */

/* 1) KHUNG CARD — nét tay mềm hơn, góc nhọn tự nhiên */
body.home .mola-home-branch-card.mola-home-layer-card {
  position: relative !important;
  overflow: hidden !important;

  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(
  3.8% 8.2%,
  11.6% 4.6%,
  24.8% 5.4%,
  41.2% 4.1%,
  59.8% 5.1%,
  77.6% 4.3%,
  95.6% 7.1%,
  95.1% 21.8%,
  96.2% 39.7%,
  95.3% 60.9%,
  96% 79.4%,
  95.2% 92.6%,
  83.7% 95%,
  67.5% 94.1%,
  48.4% 95.6%,
  29% 94.5%,
  12% 95.3%,
  4.9% 92.1%,
  4.1% 77.4%,
  3.6% 59.1%,
  4.4% 39.8%,
  3.7% 22.4%
) !important;

  background: #F4E7D2 !important;
}

/* Ẩn khung cũ của plugin */
body.home .mola-home-branch-card.mola-home-layer-card .mola-rough-frame {
  display: none !important;
}

/* 2) NỀN KEM + VIỀN dùng CHUNG một hình SVG */
body.home .mola-home-branch-card.mola-home-layer-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  /* nằm sau ảnh và text */
  z-index: 0 !important;
  pointer-events: none !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3.8 8.2 L11.6 4.6 L24.8 5.4 L41.2 4.1 L59.8 5.1 L77.6 4.3 L95.6 7.1 L95.1 21.8 L96.2 39.7 L95.3 60.9 L96.0 79.4 L95.2 92.6 L83.7 95.0 L67.5 94.1 L48.4 95.6 L29.0 94.5 L12.0 95.3 L4.9 92.1 L4.1 77.4 L3.6 59.1 L4.4 39.8 L3.7 22.4 Z' fill='%23F4E7D2' stroke='%238d765d' stroke-opacity='.56' stroke-width='.72' vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='miter'/%3E%3Cpath d='M4.7 9.3 L13.0 5.7 L26.5 6.6 L43.5 5.2 L61.2 6.1 L79.8 5.4 L94.6 8.5 L94.0 23.1 L95.1 41.0 L94.4 61.5 L95.0 79.1 L94.3 91.3 L81.8 94.0 L65.9 93.2 L46.7 94.4 L27.5 93.3 L10.9 94.3 L5.8 90.8 L5.0 75.8 L4.6 58.0 L5.3 40.7 L4.6 24.0 Z' fill='none' stroke='%238d765d' stroke-opacity='.18' stroke-width='.42' vector-effect='non-scaling-stroke' stroke-dasharray='10 1 18 1.4 7 1 14 1.2' stroke-linecap='round' stroke-linejoin='miter'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;

  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

body.home .mola-home-branch-card.mola-home-layer-card::after {
  content: none !important;
}

/* 4) Giữ text nằm trên hình */
body.home .mola-home-branch-copy {
  position: relative !important;
  z-index: 3 !important;
}

/* 5) Vùng chứa hình */
/* 5) Vùng chứa hình — dùng CHÍNH XÁC cùng hình khung để ảnh không lệch */
body.home .mola-home-branch-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  overflow: hidden !important;
  pointer-events: none !important;

  clip-path: polygon(
    3.8% 8.2%,
    11.6% 4.6%,
    24.8% 5.4%,
    41.2% 4.1%,
    59.8% 5.1%,
    77.6% 4.3%,
    95.6% 7.1%,
    95.1% 21.8%,
    96.2% 39.7%,
    95.3% 60.9%,
    96% 79.4%,
    95.2% 92.6%,
    83.7% 95%,
    67.5% 94.1%,
    48.4% 95.6%,
    29% 94.5%,
    12% 95.3%,
    4.9% 92.1%,
    4.1% 77.4%,
    3.6% 59.1%,
    4.4% 39.8%,
    3.7% 22.4%
  ) !important;
}

/* 6) Ảnh fit theo chiều cao khung, giữ nguyên tỉ lệ */
body.home .mola-home-branch-image {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;

  z-index: 1 !important;
  display: block !important;

  width: auto !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;

  object-fit: contain !important;
  object-position: right center !important;
  transform: none !important;

  mix-blend-mode: multiply !important;
  opacity: 0.90 !important;
  filter: sepia(0.16) saturate(0.90) brightness(0.97) contrast(0.96) !important;

  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 7) Fade ảnh sang nền kem BÊN TRONG khung */
body.home .mola-home-branch-art::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;

  background: linear-gradient(
    to right,
    rgba(244,231,210,1.00) 0%,
    rgba(244,231,210,1.00) 18%,
    rgba(244,231,210,0.96) 28%,
    rgba(244,231,210,0.82) 38%,
    rgba(244,231,210,0.58) 48%,
    rgba(244,231,210,0.28) 56%,
    rgba(244,231,210,0.08) 62%,
    rgba(244,231,210,0.00) 68%
  ) !important;
}
/* =========================================================
   11) HEADER — organic frame + floating fish + muted nav
   ========================================================= */

body.home .mola-global-header {
  position: relative !important;
  z-index: 50 !important;

  background: #efe4d1 !important;
  padding-top: 12px !important;
  padding-bottom: 22px !important;

  overflow: visible !important;
  isolation: isolate !important;

  /* Mép dưới mô phỏng layout mẫu:
     lượn nhẹ tự nhiên + hõm sâu tại vị trí cá */
  clip-path: polygon(
    0 0,
    100% 0,

    100% 72%,
    98% 75%,
    95% 72%,
    92% 74%,
    89% 79%,
    86% 78%,
    83% 74%,
    80% 73%,
    77% 76%,
    74% 77%,
    71% 73%,
    68% 72%,
    65% 75%,
    62% 77%,
    59% 75%,
    56% 72%,
    53% 73%,

    51% 78%,
    50% 84%,
    49% 90%,
    47.5% 93%,
    46% 91%,
    44.5% 86%,
    43% 79%,

    41% 75%,
    38% 72%,
    35% 76%,
    32% 75%,
    29% 72%,
    26% 74%,
    23% 76%,
    20% 73%,
    17% 72%,
    14% 75%,
    11% 76%,
    8% 73%,
    5% 74%,
    2% 71%,
    0 72%
  ) !important;
}

body.home .mola-global-header::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 22px !important;
  background: #efe4d1 !important;
  z-index: -1 !important;

  clip-path: polygon(
    0 38%,
    6% 18%,
    13% 34%,
    20% 22%,
    29% 36%,
    38% 20%,
    47% 34%,
    56% 18%,
    65% 33%,
    74% 17%,
    83% 31%,
    91% 19%,
    100% 35%,
    100% 100%,
    0 100%
  ) !important;
}

body.home .mola-global-header .mola-global-brand {
  position: relative !important;
  z-index: 5 !important;
}

body.home .mola-global-header .mola-global-brand-symbol {
  position: relative !important;
  z-index: 6 !important;
  animation: molaFishFloat 5.2s ease-in-out infinite !important;
  transform-origin: center center !important;
  filter: drop-shadow(0 6px 10px rgba(60, 46, 28, 0.10)) !important;
}

body.home .mola-global-header .mola-global-brand-wordmark,
body.home .mola-global-header .mola-global-brand-tagline {
  opacity: 0.72 !important;
}

body.home .mola-global-header .mola-global-nav > a,
body.home .mola-global-header .mola-global-nav .menu-item > a,
body.home .mola-global-header .mola-global-nav button,
body.home .mola-global-header .mola-global-nav .sub-arrow {
  color: #8f8066 !important;
}

body.home .mola-global-header .mola-global-nav > a:hover,
body.home .mola-global-header .mola-global-nav .menu-item > a:hover,
body.home .mola-global-header .mola-global-nav button:hover {
  color: #6f634f !important;
}

body.home .mola-global-header .mola-global-nav .current-menu-item > a,
body.home .mola-global-header .mola-global-nav .current_page_item > a {
  color: #6f634f !important;
}

body.home .mola-global-header .mola-global-nav .mola-global-search,
body.home .mola-global-header .mola-global-nav .mola-global-search-toggle {
  border-color: rgba(143, 128, 102, 0.42) !important;
  color: #8f8066 !important;
}

@keyframes molaFishFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-6px) rotate(1deg);
  }
}
/* =========================================================
   HEADER LAYOUT V2
   Wordmark left / Fish in dip / Navigation right
   ========================================================= */

body.home .mola-global-header {
  position: relative !important;
  z-index: 50 !important;

  min-height: 118px !important;
  padding: 10px clamp(28px, 3vw, 52px) 28px !important;

  background: #efe4d1 !important;
  overflow: visible !important;
  isolation: isolate !important;

  /* Mép giấy tự nhiên.
     Hõm sâu nhất nằm khoảng 45% — ngay dưới cá */
  clip-path: polygon(
    0 0,
    100% 0,

    100% 74%,
    97% 76%,
    94% 74%,
    91% 78%,
    88% 77%,
    85% 74%,
    82% 76%,
    79% 75%,
    76% 78%,
    73% 76%,
    70% 75%,
    67% 78%,
    64% 76%,
    61% 74%,
    58% 77%,
    55% 76%,
    52% 75%,
    49% 77%,

    47.5% 82%,
    46.5% 88%,
    45.5% 94%,
    44.5% 97%,
    43.5% 95%,
    42.5% 90%,
    41.5% 84%,
    40% 79%,

    37% 76%,
    34% 78%,
    31% 75%,
    28% 77%,
    25% 74%,
    22% 76%,
    19% 75%,
    16% 78%,
    13% 76%,
    10% 75%,
    7% 77%,
    4% 74%,
    0 75%
  ) !important;
}

/* Tắt lớp sóng phụ cũ */
body.home .mola-global-header::after {
  content: none !important;
}

/* BRAND vẫn là link Home,
   nhưng giờ dùng nó như vùng bố cục */
body.home .mola-global-header .mola-global-brand {
  position: relative !important;

  flex: 0 0 47% !important;
  width: 47% !important;
  height: 82px !important;

  display: block !important;

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

  z-index: 5 !important;
}

/* Không dùng grid cũ nữa */
body.home .mola-global-header .mola-global-brand-parts {
  display: contents !important;
}

/* MOLASAGA — bên trái */
body.home .mola-global-header .mola-global-brand-wordmark {
  position: absolute !important;

  left: clamp(42px, 7vw, 120px) !important;
  top: 7px !important;

  width: auto !important;
  height: clamp(38px, 3.4vw, 52px) !important;
  max-width: none !important;

  object-fit: contain !important;

  opacity: 0.48 !important;

  z-index: 6 !important;
}

/* Cá — nằm tại hõm sâu nhất, ngay trước STUDIO */
body.home .mola-global-header .mola-global-brand-symbol {
  position: absolute !important;

  right: -2% !important;
  top: 30px !important;

  width: clamp(68px, 5.8vw, 92px) !important;
  height: clamp(68px, 5.8vw, 92px) !important;

  object-fit: contain !important;

  z-index: 7 !important;

  animation: molaFishFloat 5.2s ease-in-out infinite !important;
  transform-origin: center center !important;

  filter: drop-shadow(0 5px 7px rgba(60,46,28,.10)) !important;
}

/* Không dùng tagline trong header mới */
body.home .mola-global-header .mola-global-brand-tagline {
  display: none !important;
}

/* Bỏ HOME khỏi menu.
   Cá hoặc chữ Molasaga thay vai trò Home */
body.home .mola-global-nav > a:first-child {
  display: none !important;
}

/* Menu bắt đầu bằng STUDIO và có khoảng cách với cá */
body.home .mola-global-nav {
  margin-left: clamp(34px, 4vw, 72px) !important;
}

/* Màu menu nâu nhạt */
body.home .mola-global-nav > a,
body.home .mola-global-nav .menu-item > a,
body.home .mola-global-nav button {
  color: #95846c !important;
}

/* Hover đậm nhẹ */
body.home .mola-global-nav > a:hover,
body.home .mola-global-nav .menu-item > a:hover,
body.home .mola-global-nav button:hover {
  color: #6f624f !important;
}
/* =========================================================
   HEADER V3 — fish restore + nav colors + sticky
   ========================================================= */

/* Header đứng yên khi scroll */
body.home .mola-global-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Khi đang đăng nhập WP, chừa admin bar */
body.admin-bar.home .mola-global-header {
  top: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar.home .mola-global-header {
    top: 46px !important;
  }
}

/* Cho logo và cá định vị trực tiếp theo toàn bộ header */
body.home .mola-global-header .mola-global-brand {
  position: static !important;
}

/* Chữ Molasaga bên trái */
body.home .mola-global-header .mola-global-brand-wordmark {
  position: absolute !important;

  left: 9% !important;
  top: 10px !important;

  width: auto !important;
  height: clamp(40px, 3.5vw, 52px) !important;

  opacity: 0.48 !important;
  z-index: 10 !important;
}

/* Cá nằm chính giữa phần hõm, trước STUDIO */
body.home .mola-global-header .mola-global-brand-symbol {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute !important;

  left: 44.5% !important;
  right: auto !important;
  top: 27px !important;

  width: clamp(72px, 5.2vw, 88px) !important;
  height: clamp(72px, 5.2vw, 88px) !important;

  object-fit: contain !important;

  z-index: 20 !important;

  animation: molaFishFloatV3 5.2s ease-in-out infinite !important;
  transform-origin: center center !important;

  filter: drop-shadow(0 5px 7px rgba(60,46,28,.10)) !important;
}

/* Cá bơi rất nhẹ nhưng vẫn giữ tâm đúng vị trí hõm */
@keyframes molaFishFloatV3 {
  0%, 100% {
    transform: translateX(-50%) translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateX(-50%) translateY(-5px) rotate(1deg);
  }
}

/* Toàn bộ menu cùng một màu nâu nhạt,
   kể cả STUDIO/current item */
body.home .mola-global-header .mola-global-nav > a,
body.home .mola-global-header .mola-global-nav .menu-item > a,
body.home .mola-global-header .mola-global-nav button,
body.home .mola-global-header .mola-global-nav .current-menu-item > a,
body.home .mola-global-header .mola-global-nav .current_page_item > a {
  color: #95846c !important;
}

/* CONTACT: chữ kem sáng */
body.home .mola-global-header .mola-global-nav a[href*="/contact"] {
  color: #F4E7D2 !important;
}

/* CONTACT hover */
body.home .mola-global-header .mola-global-nav a[href*="/contact"]:hover {
  color: #FFF5E5 !important;
}
/* =========================================================
   HEADER V4 — fish motion + nav color sync + wordmark scale
   DÁN Ở CUỐI FILE CSS
   ========================================================= */

/* 1) Chữ Molasaga lớn hơn và đặt lại gần layout mẫu */
body.home .mola-global-header .mola-global-brand-wordmark {
  position: absolute !important;
  left: 12% !important;
  top: 8px !important;

  height: clamp(52px, 4.8vw, 72px) !important;
  width: auto !important;

  opacity: 0.55 !important;
  z-index: 12 !important;
}

/* 2) Con cá nằm ở hõm giữa header và bơi nhẹ lên xuống */
body.home .mola-global-header .mola-global-brand-symbol {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute !important;
  left: 44.6% !important;
  top: 29px !important;

  width: clamp(74px, 5.1vw, 90px) !important;
  height: clamp(74px, 5.1vw, 90px) !important;
  object-fit: contain !important;

  z-index: 20 !important;
  transform-origin: center center !important;

  animation: mola-fish-swim 4.8s ease-in-out infinite !important;
  filter: drop-shadow(0 5px 8px rgba(60, 46, 28, 0.10)) !important;
}

@keyframes mola-fish-swim {
  0%, 100% {
    transform: translateX(-50%) translateY(0px) rotate(-1deg);
  }
  50% {
    transform: translateX(-50%) translateY(-6px) rotate(1deg);
  }
}

/* 3) Đồng bộ màu toàn bộ menu: STUDIO phải giống các mục khác */
body.home .mola-global-header .mola-global-nav > a,
body.home .mola-global-header .mola-global-nav .menu-item > a,
body.home .mola-global-header .mola-global-nav .current-menu-item > a,
body.home .mola-global-header .mola-global-nav .current_page_item > a,
body.home .mola-global-header .mola-global-nav a:visited,
body.home .mola-global-header .mola-global-nav button {
  color: #8e7d67 !important;
}

/* Hover menu nhẹ */
body.home .mola-global-header .mola-global-nav > a:hover,
body.home .mola-global-header .mola-global-nav .menu-item > a:hover,
body.home .mola-global-header .mola-global-nav button:hover {
  color: #6f604d !important;
}

/* 4) CONTACT: chữ màu kem sáng */
body.home .mola-global-header .mola-global-nav a[href*="contact"],
body.home .mola-global-header .mola-global-nav .mola-global-contact,
body.home .mola-global-header .mola-global-nav .menu-item-contact > a {
  color: #f5e8d4 !important;
}

/* Hover CONTACT */
body.home .mola-global-header .mola-global-nav a[href*="contact"]:hover,
body.home .mola-global-header .mola-global-nav .mola-global-contact:hover,
body.home .mola-global-header .mola-global-nav .menu-item-contact > a:hover {
  color: #fff4e4 !important;
}/* =========================================================
   HEADER V5 — studio normalization + brown wordmark
   ========================================================= */

/* Tạm dừng symbol cho tới khi tách cá thành layer riêng */
body.home .mola-global-header .mola-global-brand-symbol {
  animation: none !important;
  transform: translateX(-50%) !important;
}

/* STUDIO phải giống hệt các menu text còn lại */
body.home .mola-global-header .mola-global-nav button {
  color: #8e7d67 !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;

  text-transform: none !important;
}

/* Bỏ dấu v nhỏ cạnh STUDIO */
body.home .mola-global-header .mola-global-nav .sub-arrow {
  display: none !important;
}

/* Chữ Molasaga chuyển sang nâu cùng tông nền web */
body.home .mola-global-header .mola-global-brand-wordmark {
  opacity: 1 !important;

  filter:
    brightness(0)
    saturate(100%)
    invert(68%)
    sepia(12%)
    saturate(720%)
    hue-rotate(355deg)
    brightness(92%)
    contrast(84%) !important;}
/* =========================================================
   HOMEPAGE HERO — larger / closer / slight overlap
   ========================================================= */

@media (min-width: 901px) {

  @media (min-width: 901px) {

  body.home .mola-home-hero {
    min-height: calc(100svh - 118px) !important;
    grid-template-columns: 30% 70% !important;
    gap: 0 !important;

    padding-top: 8px !important;
    padding-bottom: 24px !important;

    align-items: center !important;
    overflow: visible !important;
  }

  body.home .mola-home-hero-copy {
  position: relative !important;
  z-index: 6 !important;

  width: 30vw !important;
  max-width: 30vw !important;

  margin-left: 5vw !important;
  margin-right: -12vw !important;
  margin-top: -15vh !important;
}

  body.home .mola-home-hero h1 {
    width: 100% !important;
    max-width: none !important;

    font-size: clamp(28px, 3.15vw, 52px) !important;
    line-height: 1.08 !important;
    margin-bottom: 18px !important;
  }

  body.home .mola-home-lead {
    max-width: 24vw !important;
    font-size: clamp(14px, .95vw, 17px) !important;
  }

  body.home .mola-home-hero-art {
  position: relative !important;
  z-index: 1 !important;

  width: 80vw !important;
  margin-left: -5vw !important;
  margin-top: -23vh !important;

  justify-content: flex-start !important;
  align-items: flex-start !important;
  overflow: visible !important;
}
    overflow: visible !important;
  }

  body.home .mola-home-placeholder-has-image {
    width: 80vw !important;
    max-width: 80vw !important;
    max-height: none !important;
    margin: 0 !important;
  }

  body.home .mola-home-hero-image {
    width: 100% !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center top !important;
  }
}
body.home .mola-home-hero-copy > :first-child {
  display: none !important;
}
/* =========================================================
   MOLASAGA ECOSYSTEM — ORGANIC BACKGROUND LAYER
   ========================================================= */

body.home .mola-home-ecosystem {
  position: relative !important;
  isolation: isolate !important;

  padding:
    clamp(58px, 5vw, 82px)
    clamp(34px, 4vw, 68px)
    clamp(62px, 5vw, 88px) !important;
}

/* layer giấy phía dưới title + 3 cards */
body.home .mola-home-ecosystem::before {
  content: "" !important;

  position: absolute !important;
  inset:
    clamp(18px, 1.8vw, 30px)
    clamp(18px, 2.2vw, 38px)
    clamp(20px, 2vw, 34px) !important;

  background: #d4c1a5 !important;

  /* đường bao bất toàn kiểu giấy vẽ tay */
  clip-path: polygon(
    0.8% 4%,
    5% 2.1%,
    11% 2.8%,
    17% 1.7%,
    24% 2.5%,
    31% 1.8%,
    39% 2.7%,
    47% 1.9%,
    55% 2.4%,
    63% 1.6%,
    71% 2.6%,
    79% 1.8%,
    87% 2.5%,
    94% 1.9%,
    99.2% 3.4%,

    99.5% 96.1%,

    94% 97.8%,
    87% 97.1%,
    80% 98.2%,
    72% 97.4%,
    64% 98.3%,
    56% 97.3%,
    48% 98.1%,
    40% 97.2%,
    32% 98.2%,
    24% 97.3%,
    16% 98.1%,
    9% 97.1%,
    1% 96%
  ) !important;

  z-index: 0 !important;
  pointer-events: none !important;
}

/* tất cả nội dung nằm trên layer */
body.home .mola-home-ecosystem > * {
  position: relative !important;
  z-index: 1 !important;
}
/* Remove old separator above Ecosystem */
body.home .mola-home-ecosystem {
  border-top: 0 !important;
  box-shadow: none !important;
}
/* Align Featured + Journal with Ecosystem background edges */
body.home .mola-home-featured {
  padding-left: calc(clamp(18px, 2.2vw, 38px) + 12px) !important;
  padding-right: calc(clamp(18px, 2.2vw, 38px) + 12px) !important;
}
/* Thicken outer borders: Projects + Journal */
body.home .mola-home-project-card,
body.home .mola-home-journal-list {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #eadcc3 !important;
}
/* STORIES THAT MATTER — dark brown section */
body.home .mola-home-cta {
  background: #6f604b !important;

  /* kéo màu nền phủ toàn chiều ngang màn hình */
  box-shadow: 0 0 0 100vmax #6f604b !important;
  clip-path: inset(0 -100vmax) !important;
}
/* STORIES THAT MATTER — text + email field colors */

/* Tiêu đề chính */
body.home .mola-home-cta h2,
body.home .mola-home-cta h3 {
  color: #17130f !important;
}

/* Text phụ → màu nâu nền web */
body.home .mola-home-cta p {
  color: #b2a088 !important;
}

body.home .mola-home-newsletter-form {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: stretch !important;

  width: 100% !important;
  min-height: 52px !important;
  padding: 0 !important;

  background: #f4e7d2 !important;
  border: 1px solid #eadcc3 !important;
  border-radius: 999px !important;

  overflow: hidden !important;
}

body.home .mola-home-newsletter-form > span {
  display: flex !important;
  align-items: center !important;

  padding: 0 18px !important;

  background: #f4e7d2 !important;
  color: #4f4433 !important;
  opacity: 1 !important;
}

body.home .mola-home-newsletter-form > button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 22px !important;

  background: #a38d63 !important;
  color: #17130f !important;

  border: 0 !important;
  border-radius: 0 999px 999px 0 !important;

  font-weight: 700 !important;
}
/* FOOTER — black background + brown text + symbol only */

.mola-global-footer {
  background: #000000 !important;
  color: #b2a088 !important;
}

/* Bỏ chữ Molasaga trong logo footer */
.mola-global-brand-footer .mola-global-brand-wordmark {
  display: none !important;
}

/* Giữ con cá */
.mola-global-brand-footer .mola-global-brand-symbol {
  display: block !important;

  filter:
    brightness(0)
    saturate(100%)
    invert(68%)
    sepia(12%)
    saturate(720%)
    hue-rotate(355deg)
    brightness(92%)
    contrast(84%) !important;
}

/* Tất cả chữ và link footer → nâu nền web */
.mola-global-footer h1,
.mola-global-footer h2,
.mola-global-footer h3,
.mola-global-footer p,
.mola-global-footer span,
.mola-global-footer a {
  color: #b2a088 !important;
}

/* Viền và icon social cùng tông */
.mola-global-footer .mola-global-socials a {
  color: #b2a088 !important;
  border-color: #b2a088 !important;
}

.mola-global-footer-bottom {
  border-color: rgba(178,160,136,.45) !important;
}