/* ========================= MAKATO – GLOBAL STYLES reset, variables, typography, buttons, header, footer, CTA ========================= */ :root {
--makato-cream: #fffaf0;
    --makato-dark: #232323;
    --makato-yellow: #f4b31a;
    --makato-orange: #df8d16;
    --makato-soft: #f8cf65;
    --makato-white: #fff;
    --makato-card: #fff3d6;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top,0px);
    padding-bottom: env(safe-area-inset-bottom,0px)}

 *,*::before,*::after {
box-sizing: inherit}

 html {
scroll-padding-top: env(safe-area-inset-top,0px)}

 body {
margin: 0;
  font-family: 'Manrope', sans-serif;
    background: var(--makato-cream);
    color: var(--makato-dark);
    overflow-x: hidden}

 button,a {
font: inherit;
    color: inherit;
	text-decoration: none;
 }

 :focus-visible {
outline: 3px solid #1b6ef3;
    outline-offset: 3px}

 .bar {
background: var(--makato-dark);
    color: #fff;
    text-align: center;
    font-size: 12px;
    letter-spacing: .08em;
    padding: 9px 12px;
    font-weight: 500}

 header {
    position: fixed;
    top: 34px;
    left: 0;
    width: 100%;
    z-index: 10000;
    background: #fffdf8;}

 /* ========================= FIXED TOP AREA ========================= */ .bar  {
 position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 10001;
     }


 /* Space for fixed bar + header */ 
body  {
 padding-top: 118px;
     }

 .nav {
max-width: 1320px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    height: 80px}

 .logo {
font-weight: 700;
    font-size: 38px;
    color: var(--makato-yellow);
    text-decoration: none;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: 8px
 }

 .logo i {
width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--makato-orange);
    display: inline-block}

 .links {
display: flex;
    gap: 36px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)}

 .links a {
text-decoration: none;
    font-weight: 600;
    font-size: 18px}

 .links a:hover {
color: var(--makato-orange)}

 .icons {
display: flex;
    gap: 8px}

 .icons button,.burger {
background: none;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center}

 .icons svg,.burger svg {
width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--makato-dark);
    stroke-width: 1.8}

 .burger {
display: none}

 .eyebrow {
color: var(--makato-orange);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px}

 .eyebrow i {
width: 20px;
    height: 14px;
    border-radius: 50%;
    background: var(--makato-soft);
    display: inline-block;
    transform: rotate(-25deg)}

 .script {
display: block;
    font-family: 'Protest Riot','Brush Script MT',cursive;
    color: var(--makato-orange);
    font-weight: 400;
    letter-spacing: -.01em;
    font-size: 1.05em;
    line-height: 1;
    position: relative;
    width: max-content;
    max-width: 100%;
    padding-bottom: 14px}

 .script::after {
content: "";
    position: absolute;
    left: 0;
    right: 12%;
    bottom: 0;
    height: 8px;
    border-radius: 8px;
    background: var(--makato-orange)}

 .script b {
display: inline-block;
    width: 16px;
    height: 16px;
    background: var(--makato-orange);
    margin-left: 28px}

 .btn {
display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 99px;
    border: 0;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s}

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

 .btn.y {
background:#df8d16;}

 .btn.k {
background: var(--makato-dark);
    color: #fff}

 .pack {
position: absolute;
    width: 31%;
    aspect-ratio: 3/4.3;
    border-radius: 6% 6% 10% 10%/4% 4% 6% 6%;
    padding: 8% 6%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    filter: drop-shadow(0 18px 18px rgba(0,0,0,.28));
    transition: opacity .7s,transform .9s cubic-bezier(.2,.7,.2,1),background .7s;
    overflow: hidden}

 .pack::before {
content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 7%;
    background: repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 4px,transparent 4px 8px)}

 .pack em {
font-style: normal;
    font-weight: 700;
    font-size: clamp(9px,1.4vw,17px);
    letter-spacing: .08em}

 .pack strong {
font-size: clamp(14px,2.7vw,36px);
    line-height: .9;
    letter-spacing: -.03em;
    color: #fff}

 .pack strong u {
text-decoration: none;
    color: var(--makato-yellow);
    display: block}

 .pack span {
margin-top: 8%;
    background: rgba(0,0,0,.35);
    border-radius: 6px;
    font-size: clamp(7px,1vw,12px);
    font-weight: 700;
    padding: 4px 6px;
    width: max-content;
    letter-spacing: .06em}

 .pack::after {
content: "";
    position: absolute;
    right: 12%;
    top: 20%;
    width: 38%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,#ffd76a,#e89a12);
    opacity: .95}

 .pack {
transform: rotate(var(--r)) translateY(0);
    animation: float 6s ease-in-out infinite}

 @keyframes float {
50% {
translate: 0 -10px    }

}

 .pack.out {
opacity: 0;
    transform: rotate(var(--r)) translateX(-24px) scale(.94)}

/* =========================================================
   CATEGORY SLIDER CONTROLS
========================================================= */

.cc {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 18px;
}

.ar {
    position: relative;
    z-index: 60;

    width: 44px;
    height: 44px;

    min-width: 44px;
    min-height: 44px;

    padding: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;
    border: 1.5px solid var(--makato-dark);

    background: #fff;
    color: var(--makato-dark);

    cursor: pointer;

    font-size: 18px;
    line-height: 1;

    appearance: none;
    -webkit-appearance: none;

    pointer-events: auto;

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

.cc .ar:hover:not(:disabled) {
    background: var(--makato-dark);
    color: #fff;
    transform: translateY(-1px);
}

.cc .ar:active:not(:disabled) {
    transform: translateY(0);
}

.cc .ar:disabled {
    opacity: .45;
    cursor: default;
}


/* =========================================================
   DOTS
========================================================= */

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

.dots button {
    position: relative;
    z-index: 60;

    width: 10px;
    height: 10px;

    padding: 0;

    border: 0;
    border-radius: 99px;

    background: #d8c9a4;

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;

    pointer-events: auto;
}

.dots button::before {
    content: "";
    position: absolute;
    inset: -17px -4px;
}

.dots button[aria-current="true"] {
    width: 28px;
    background: var(--makato-orange);
}


/* =========================================================
   VIEWPORT + TRACK
========================================================= */

.right .view {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.right .track {
    display: flex;
    width: 100%;
    will-change: transform;
}

.right .category-slide {
    flex: 0 0 100%;
    width: 100%;

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

    gap: 20px;
}


/* Tablet/mobile = one card */
@media (max-width: 1100px) {

    .right .category-slide {
        grid-template-columns: 1fr;
    }

}   background: var(--makato-orange)}

 h1,h2,h3,.logo,.links a,.btn,.strip li,.eyebrow {
font-family: 'Manrope',sans-serif}

 .cta {
background: var(--makato-yellow);
    position: relative;
    margin-top: 96px;
    padding: 120px 24px 80px}

 .wave {
position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    height: clamp(36px,6vw,80px);
    display: block}

 .cta .eyebrow {
color: var(--makato-dark)}

 .cta h2 {
margin: 10px 0 0;
    font-size: clamp(40px,6.4vw,88px);
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 800}

 .cta h2 .script {
display: block;
    color: #fffaf0;
    font-size: 1.05em;
    padding: 0;
    width: auto}

 .cta h2 .script::after {
display: none}

 .cta .btn {
background: var(--makato-dark);
    color: #fff;
    transition: transform .25s,background .25s}

 .cta .btn:hover {
background: #000;
    transform: translateY(-3px) scale(1.03)}

 footer {
background: #232120;
    color: #fff;
    overflow: hidden;
    position: relative;
    padding-top: 44px}

 .f-in {
max-width: 1320px;
    margin: auto;
    padding: 0 24px}

 .f-grid {
display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 32px}

 .f-logo {
color: #fff;
    font-size: 22px;
    margin-bottom: 14px}

 .f-logo i {
width: 22px;
    height: 22px;
    background: var(--makato-yellow)}

 .f-grid p {
color: #9c978d;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 22px;
    max-width: 230px}

 .f-acc {
color: var(--makato-yellow);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .14em}

 .f-grid h4 {
margin: 0 0 16px;
    font-family: 'Manrope';
    font-size: 10px;
    letter-spacing: .2em;
    color: #8a857b;
    font-weight: 500}

 .f-grid ul {
list-style: none;
    margin: 0;
    padding: 0}

 .f-grid li {
margin-bottom: 6px}

 .f-grid li a {
color: #FFFFFFBF;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    padding: 4px 0;
    transition: color .2s;
    font-weight: 400;
     font-family: Manrope;
    }

 .f-grid li a:hover {
color: var(--makato-yellow)}

 .f-bar {
display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid #3a3735;
    margin-top: 40px;
    padding: 22px 0 0;
    font-size: 10px;
    letter-spacing: .14em;
    color: #77726a}


/* Large Makato Footer Text */
.big {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 27vw;
    line-height: 0.8;
    height: 0.6em;
    text-align: center;
    white-space: nowrap;
    letter-spacing: -0.04em;
    color: #3a3836;

    width: 100%;
    max-width: 1320px;
    margin: 12px auto 0;
    overflow: hidden;
    user-select: none;

    /* Keep text in its starting position */
    position: relative;
}

.big span {
    display: block;
    transform: translateY(100%);

    /* Smooth upward movement */
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Slide text upward when footer is hovered */
footer.footer-text-active .big span {
    transform: translateY(0.04em);
}




 .wave {
color: var(--makato-cream)}

 /* Reduced motion */ @media(prefers-reduced-motion: reduce) {
*,*::before,*::after {
animation: none!important;
        transition-duration: .01ms!important    }

}

 @media (min-width: 1024px)  {
 .icons button:last-child  {
 display: none !important;
             }

 }





/* ========================================================================== MAKATO — HOMEPAGE SECTION STYLES Clean, sectioned version ========================================================================== */ /* -------------------------------------------------------------------------- 0. FONTS & TOKENS -------------------------------------------------------------------------- */ /* Google fonts are already loaded in header.php. */
 :root  {
 --makato-yellow: #f5b324;
     --makato-soft-bg: #fde896;
     --makato-dark: #212121;
     --body-bg: #fffbf0;
     --text-muted: #666666;
     }

 body  {
 margin: 0;
     background-color: var(--body-bg)!important;
    
     color: var(--makato-dark);
     }

 /* ========================================================================== 1. HERO ========================================================================== */ .hero  {
 max-width: 1320px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1.15fr;
     align-items: center;
     gap: 32px;
     padding: 48px 24px 64px;
     position: relative;
     }

 /* Eyebrow */ .eyebrow  {
 display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     font-weight: 800;
     letter-spacing: 0.12em;
     color: var(--makato-orange);
     /* margin-bottom: 20px; */
     text-transform: uppercase;
     }

 .eyebrow-icon  {
 width: 22px;
     height: 14px;
     background-color: var(--makato-yellow);
     border-radius: 4px;
     clip-path: polygon(0 20%, 30% 0, 100% 30%, 80% 100%, 10% 80%);
     }

 /* Headline */ h1  {
 margin: 0;
     font-size: clamp(48px, 6.5vw, 92px);
     line-height: 0.92;
     letter-spacing: -0.03em;
     font-weight: 800;
     color: var(--makato-dark);
     position: relative;
     }

 .script  {
 font-family: 'Caveat', cursive;
     color: var(--makato-yellow);
     font-size: 1.15em;
     font-weight: 700;
     display: inline-block;
     line-height: 0.8;
     letter-spacing: -0.01em;
     position: relative;
     padding-bottom: 14px;
     }

 .dot  {
 color: var(--makato-yellow);
     font-size: 0.9em;
     font-weight: 900;
     margin-left: 4px;
     }

 .underline  {
 display: block;
     width: 92%;
     height: 7px;
     background-color: var(--makato-yellow);
     border-radius: 4px;
     margin-top: 6px;
     }

 .lead  {
 font-size: 18px;
     line-height: 1.55;
     color: var(--text-muted);
     max-width: 440px;
     margin: 28px 0 36px;
     font-weight: 500;
     }

 /* Buttons */ .btns  {
 display: flex;
     gap: 14px;
     flex-wrap: wrap;
     }

 .btn  {
 display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 16px 32px;
     border-radius: 50px;
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 0.08em;
     text-decoration: none;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     }

 .btn.y  {
 background-color: #df8d16;
     color:#fff;
     }

 .btn.k  {
 background-color: var(--makato-dark);
     color: #ffffff;
     }

 .btn:hover  {
 transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
     }

 /* Stage + Blob */ .stage  {
 position: relative;
     aspect-ratio: 1.15 / 1;
     width: 100%;
     max-width: 680px;
     margin-left: auto;
	 
     }

 .blob  {
 position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 487px;
     height: 487px;
     max-width: 92%;
     max-height: 92%;
     padding: 29.35px;
     background: #F4B419A3;
     border-top-left-radius: 142.37px;
     border-top-right-radius: 154.24px;
     border-bottom-right-radius: 430.08px;
     border-bottom-left-radius: 459.74px;
     box-shadow: 0 27.51px 73.37px 0 #F4B4193D;
     z-index: 1;
     box-sizing: border-box;
     pointer-events: none;
	    order: 2;
     }

 /* Hero packs */ .pack  {
 position: absolute;
     height: auto;
     object-fit: contain;
     z-index: 3;
     filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.22));
     }

 .p1  {
 left: 2%;
     top: 26%;
     /* width: 35%; */
     transform: rotate(-10deg);
     }

 .p2  {
 left: 31%;
     top: 17%;
     /* width: 39%; */
     z-index: 4;
     transform: rotate(-2deg);
     }

 .p3  {
 left: 64%;
     top: 22%;
     /* width: 36%; */
     transform: rotate(8deg);
     }

 /* Decorative shapes (still styled — hide them if not used in HTML) */ .deco  {
 position: absolute;
     z-index: 5;
     pointer-events: none;
     }

 .d1  {
 left: 4%;
     top: 18%;
     width: 54px;
     height: 32px;
     background: #8ec339;
     border-radius: 80% 20% 70% 30%;
     transform: rotate(-30deg);
     }

 .d2  {
 left: -2%;
     top: 45%;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: #8c3210;
     border: 3px solid #fff;
     box-shadow: 0 4px 12px rgba(0,0,0,.15);
     }

 .d3  {
 right: -2%;
     top: 54%;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #b26c27;
     border: 3px solid #fff;
     box-shadow: 0 4px 12px rgba(0,0,0,.15);
     }

 .d4  {
 left: 48%;
     bottom: 12%;
     width: 68px;
     height: 22px;
     background: #d92419;
     border-radius: 50% 10% 50% 10%;
     transform: rotate(20deg);
     }

 .d5  {
 right: 22%;
     top: 18%;
     width: 24px;
     height: 24px;
     background: #2e7d32;
     border-radius: 0 70% 0 70%;
     transform: rotate(45deg);
     }

 /* Ticker bar */ .ticker-bar  {
 width: 100%;
     background-color: var(--makato-yellow);
     padding: 16px 24px;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     gap: 16px;
     box-sizing: border-box;
     }

 .ticker-item  {
 font-size: 12px;
     font-weight: 800;
     letter-spacing: 0.1em;
     color: var(--makato-dark);
     text-transform: uppercase;
     }

 /* Hero pack drop-in animation */ .stage .pack  {
 animation: heroDrop 1.1s cubic-bezier(.2,.8,.2,1) both, float 6s ease-in-out 1.4s infinite;
     }

 .stage .p2  {
 animation-delay: .15s, 1.55s;
     }

 .stage .p3  {
 animation-delay: .3s, 1.7s;
     }

 @keyframes heroDrop  {
 from  {
 opacity: 0;
         transform: translateY(-120%) rotate(var(--r));
             }

 to  {
 opacity: 1;
         transform: translateY(0) rotate(var(--r));
             }

 }

 @keyframes float  {
 50%  {
 translate: 0 -10px;
             }

 }


/* =========================================
   HERO PACKETS: FALL + CONTINUOUS FLOAT
========================================= */

/* Common packet styles */
.hero .stage .pack {
    opacity: 0;
    animation-name: makatoFall;
    animation-duration: 1.4s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    will-change: transform, opacity;
	 order: 1;
}

/* Center packet falls first */
.hero .stage .pack.p2 {
    animation-delay: 0.2s;
}

/* Left packet falls second */
.hero .stage .pack.p1 {
    animation-delay: 1s;
}

/* Right packet falls third */
.hero .stage .pack.p3 {
    animation-delay: 1.8s;
}

/* Smooth vertical fall only */
@keyframes makatoFall {
    from {
        opacity: 0;
        transform: translateY(-450px);
    }

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

/* Start floating after all packets have landed */
.hero .stage.floating .pack {
    animation-name: makatoFloat;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

/* Gentle continuous up-and-down floating */
@keyframes makatoFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero .stage .pack {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
 /* ========================================================================== 2. FEATURE STRIP ========================================================================== */ .strip  {
 background:#f8b719;
     padding: 26px 24px;
     }

 .strip ul  {
 max-width: 1360px;
     margin: auto;
     padding: 0;
     list-style: none;
     display: flex;
     justify-content: space-between;
     gap: 16px 28px;
     flex-wrap: wrap;
     }

 .strip li  {
 font-size: 12px;
     font-weight: 700;
     letter-spacing: .14em;
     text-transform: uppercase;
     }

 .strip li::before  {
 content: "✦";
     margin-right: 14px;
     font-size: 14px;
     }

 /* ========================================================================== 3. SMARTER SNACKING / CATEGORY SLIDER ========================================================================== */ .cats  {
 background: #242322;
     color: #fff;
     padding: 80px 70px 00px 70px;
     /* display: flex;
     */ }

 .wrap  {
 max-width: 1320px;
     margin: auto;
     width: 100%;
     }

 /* Header */ .cats-header  {
 display: grid;
     grid-template-columns: 1.2fr 0.8fr;
     gap: 40px;
     align-items: flex-end;
     margin-bottom: 48px;
     }

 .cats h2  {
 font-family: "Manrope", sans-serif;
     font-weight: 800;
     font-size: clamp(40px, 5.5vw, 72px);
     line-height: 1;
     letter-spacing: -0.05em;
     margin: 0;
     }

 .cats h2 .highlight  {
 font-family: "Protest Riot", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: inherit;
     line-height: inherit;
     letter-spacing: inherit;
     color: #F8B719;
     }

 .cats .sub  {
 color: #b9b3a5;
     font-size: 16px;
     line-height: 1.6;
     margin: 0;
     max-width: 380px;
     }

 .cats-bottom-svg  {
 width: 100%;
     margin-top: -25px;
     }

 .cats-bottom-svg img  {
 display: block;
     width: 100%;
     height: auto;
     }

 /* Split: cards (left) + video (right) */ .split  {
 display: grid;
     grid-template-columns: 625.61px 626px;
     gap: 16px;
     align-items: start;
     }

 .right  {
 order: 1;
     width: 625.61px;
     min-width: 0;
     }

 .video  {
 order: 2;
     top: 24px;
     border-radius: 14.49px;
     overflow: hidden;
     width: 626px;
     height: 370px;
     background: #000;
     }

 .video video, .video canvas  {
 width: 100%;
     height: 100%;
     object-fit: cover;
     }

 .view  {
 overflow: hidden;
     border-radius: 14.49px;
     }

 .track  {
 display: flex;
     transition: transform .7s cubic-bezier(.2,.7,.2,1);
     gap: 16px;
     }

 .slide  {
 flex: 0 0 100%;
     display: grid;
     grid-template-columns: repeat(2, 304.8px);
     gap: 16px;
     padding: 0;
     justify-content: start;
     }

 /* Category card */ .cats .card  {
 width: 304.8px;
     height: 370px;
     min-height: 370px;
     border-radius: 18px;
     padding: 24px 24px 72px 24px;
     background: var(--makato-card, #fff3d6);
     color: var(--makato-dark);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     text-decoration: none;
     position: relative;
     overflow: hidden;
     }

 .cats .card:nth-child(even)  {
 background: #fde8d3;
     }

 .cats .card:nth-child(odd)  {
 background: #eef2e6;
     }

 .cats .card .n  {
 font-family: 'Manrope', sans-serif;
     font-weight: 700;
     font-size: 14px;
     color: var(--makato-orange, #e79f0a);
     margin-bottom: 8px;
     flex: 0 0 auto;
     }

 .cats .card .art  {
 flex: 0 0 auto;
     height: 185px;
     display: grid;
     place-items: center;
     padding: 0;
     margin-bottom: 12px;
     }

 .cats .card .art img.pack, .cats .card .pack  {
 position: static;
     /* width: 100%; */
     /* max-width: 130px; */
     max-height: 160px;
     /* object-fit: contain; */
     animation: none;
     transform: none;
     }

 .cats .card h3  {
 margin: 0 0 6px;
     font-size: 22px;
     line-height: 1.15;
     letter-spacing: -.02em;
     flex: 0 0 auto;
     }

 .cats .card p  {
 margin: 0;
     font-size: 13px;
     line-height: 1.4;
     color: #6a6252;
     padding-right: 44px;
     flex: 1 1 auto;
     overflow: hidden;
     }

 .cats .card .go  {
 position: absolute;
     right: 20px;
     bottom: 20px;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: var(--makato-dark);
     color: #fff;
     display: grid;
     place-items: center;
     font-size: 16px;
     line-height: 1;
     z-index: 2;
     transition: background .3s, transform .3s;
     }

 .cats .card:hover .go  {
 background: var(--makato-orange, #e79f0a);
     transform: rotate(-45deg);
     }

 /* Controls */ .cc  {
 display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 20px;
     }

 .cc .ar  {
 background: none;
     border: 1px solid #444;
     color: #fff;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     cursor: pointer;
     }

 .cc .ar:disabled  {
 opacity: .3;
     cursor: default;
     }

 .cc .dots button  {
 background: #555;
     border: none;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     margin: 0 4px;
     }

 .cc .dots button[aria-current=true]  {
 background: #f5a623;
     }

 /* ========================================================================== 4. PRODUCT SHOPPING SLIDER ========================================================================== */ .shop  {
 max-width: 1320px;
     margin: auto;
     padding: 88px 24px 96px;
     }

 .sh-top  {
 display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 20px;
     margin-bottom: 44px;
     position: relative;
     }

 .sh-top h2  {
 margin: 6px 0 0;
     font-size: clamp(40px, 5.6vw, 76px);
     line-height: .98;
     letter-spacing: -.045em;
     font-weight: 800;
     }

 .sh-top .script  {
 font-size: 1.02em;
     padding-bottom: 0;
     }

 .sh-top .script::after  {
 display: none;
     }

 .viewall  {
 font-family: 'Manrope';
     font-weight: 800;
     font-size: 12px;
     letter-spacing: .12em;
     text-transform: uppercase;
     text-decoration: none;
     padding: 12px 4px;
     white-space: nowrap;
     }

 .viewall:hover  {
 color: var(--makato-orange, #e79f0a);
     }

 .sh-deco  {
 position: absolute;
     right: -2%;
     top: -50px;
     width: 109px;
     height: 102px;
     }

 .sh-dot  {
 position: absolute;
     left: 44%;
     top: 30px;
     width: 69px;
     height: 102px;
     transform: rotate(30.85deg);
     opacity: 0.89;
     }

 .sh-view  {
 overflow: hidden;
     touch-action: pan-y;
     user-select: none;
     padding: 4px 0 12px;
     }

 .sh-track  {
 --n: 4;
     --g: 20px;
     display: flex;
     gap: var(--g);
     }

 .pc  {
 flex: 0 0 calc((100% - var(--g) * (var(--n) - 1)) / var(--n));
     border-radius: 24px;
     padding: 16px;
     display: flex;
     flex-direction: column;
     position: relative;
     min-height: 430px;
     background: var(--pc-bg);
     }

 .tag  {
 position: absolute;
     left: 14px;
     top: 14px;
     background: var(--makato-yellow);
     font-family: 'Manrope';
     font-size: 12px;
     font-weight: 800;
     letter-spacing: .08em;
     text-transform: uppercase;
     padding: 5px 9px;
     border-radius: 99px;
     }

 .heart  {
 position: absolute;
     right: 12px;
     top: 10px;
     width: 44px;
     height: 44px;
     border: 0;
     background: none;
     cursor: pointer;
     display: grid;
     place-items: center;
     }

 .heart span  {
 width: 30px;
     height: 30px;
     border-radius: 50%;
     background: #fff;
     display: grid;
     place-items: center;
     font-size: 15px;
     line-height: 1;
     }

 .heart[aria-pressed=true] span  {
 color: #d3261b;
     }

 .pc .art  {
 flex: 1;
     display: grid;
     place-items: center;
     padding: 34px 0 18px;
     min-height: 210px;
     }

 .pc .pack  {
 position: relative;
     left: auto;
     top: auto;
     width: 46%;
     min-width: 104px;
	 animation:none;
    transition: transform 0.4s ease;
    transform: scale(1) rotate(0deg);
     }

 .pc .pack.pouch  {
 border-radius: 16% 16% 12% 12% / 8% 8% 8% 8%;
     aspect-ratio: 3/4;
     }

 .pc .cat  {
 color: var(--makato-orange, #e79f0a);
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     }

 .pc h3  {
 margin: 4px 0 4px;
     font-size: 18px;
     letter-spacing: -.02em;
     }

 .stars  {
 color: var(--makato-orange, #e79f0a);
     font-size: 12px;
     letter-spacing: 2px;
     }

 .stars small  {
 color: #999;
     letter-spacing: 0;
     margin-left: 4px;
     }

 .price  {
 font-weight: 700;
     margin: 8px 0 12px;
     }

 .price s  {
 color: #999;
     font-weight: 400;
     font-size: 13px;
     margin-left: 6px;
     }

 .buy  {
 display: flex;
     gap: 8px;
     }

 .qty  {
 display: flex;
     align-items: center;
     justify-content: space-between;
     border: 1px solid #23232366;
     border-radius: 99px;
     width: 96px;
     height: 44px;
     padding: 0 4px;
     flex: none;
     }

 .qty button  {
 width: 32px;
     height: 36px;
     border: 0;
     background: none;
     cursor: pointer;
     font-size: 16px;
     }

 .add  {
 flex: 1;
     min-height: 44px;
     border: 0;
     border-radius: 99px;
     background: var(--makato-dark);
     color: #fff !important;
     font-weight: 700;
     font-size: 13px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     transition: background .25s;
     }

 .add:hover  {
 background: var(--makato-orange, #e79f0a);
     }

 .add svg  {
 width: 15px;
     height: 15px;
     fill: none;
     stroke: #fff;
     stroke-width: 2;
     }
 .emptycart svg  {
 width: 70px;
     height: 70px;
     fill: none;
     stroke: #000;
     stroke-width: 2;
     }
 .sh-ctrl  {
 display: flex;
     justify-content: center;
     gap: 12px;
     margin-top: 22px;
     }

 .sh-ctrl .ar  {
 background: #fff;
     }

 /* ========================================================================== 5. TASTE MEETS BETTER CHOICES ========================================================================== */ .why  {
 width: 100%;
     /* max-width: 1440px;
     */ margin: 0 auto;
     background: #fcbf23 center / cover no-repeat;
     padding: 60px 40px 80px;
     box-sizing: border-box;
     position: relative;
     overflow: hidden;
     }



 @media screen and (min-width: 1920px) and (max-width: 2559px)  {
 .why  {
 aspect-ratio: 1920 /790 !important;
         height: auto !important;
             }

 }

 .why::before, .why::after  {
 display: none;
     }

 .why-in  {
 position: relative;
     z-index: 1;
     max-width: 1240px;
     margin: auto;
     padding: 44px 32px 60px;
     text-align: center;
     }

 .yk-img  {
 width: 100%;
     margin-top: -10px;
     }

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

 /* Bene grid */ .bene  {
 display: grid;
     grid-template-columns: 1fr 380px 1fr;
     grid-template-rows: auto auto;
     align-items: center;
     position: relative;
     margin-top: 20px;
     column-gap: 32px;
     }

 .bi  {
 display: flex;
     flex-direction: column;
     position: relative;
     box-sizing: border-box;
     }

 .bi.l  {
 grid-column: 1;
     align-items: flex-end;
     text-align: right;
     padding-right: 40px;
     }

 .bi.r  {
 grid-column: 3;
     align-items: flex-start;
     text-align: left;
     padding-left: 40px;
     }

 /* Center video */ .hero-pack  {
 grid-column: 2;
     grid-row: 1 / 3;
     /* display: flex; */
     align-items: center;
     justify-content: center;
     position: relative;
     background: none;
     }

 .hero-pack video#whyvid  {
 width: 400px;
     height: 405px;
     object-fit: cover;
     display: block;
     position: relative;
     z-index: 2;
     }

 /* Icons + arrows */ .ic  {
 margin-top: 20px;
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: #fffaf0;
     display: grid;
     place-items: center;
     }

 .ic img, .ic svg  {
 width: 24px;
     height: 24px;
     display: block;
     }

 .ic svg  {
 fill: none;
     stroke: #242322;
     stroke-width: 1.7;
     }

 .bi h3  {
 margin: 0;
     font-family: 'Manrope', sans-serif;
     font-weight: 700;
     font-size: 24px;
     color: #242322;
     }

 .bi p  {
 margin: 0;
     font-family: 'DM Sans', sans-serif;
     font-size: 14px;
     line-height: 1.5;
     color: #4a3b10;
     }

 .arrow  {
 position: absolute;
     pointer-events: none;
     z-index: 5;
     width: 110px;
     height: auto;
     }

 .bi.l .arrow-a1  {
 top: 0;
     right: -30px;
     }

 .bi.r .arrow-a3  {
 top: 0;
     left: -30px;
     }

 .bi.l .arrow-a2  {
 top: 100%;
     right: -25px;
     margin-top: 12px;
     }

 .bi.r .arrow-a4  {
 top: 100%;
     left: -25px;
     margin-top: 12px;
     }

/* ==========================================================
   MAKATO STORY / REELS
   ========================================================== */


/* ==========================================================
   MAIN SECTION
   ========================================================== */

.sec {
    max-width: 1320px;

    margin: 0 auto;

    padding: 88px 24px 0;

    text-align: center;
}


.sec:last-of-type {
    padding-bottom: 96px;

    max-width: 1320px;
}


/* ==========================================================
   EYEBROW
   ========================================================== */

.sec .eyebrow {
    justify-content: center;
}


/* ==========================================================
   HEADING
   ========================================================== */

.sec h2 {
    margin: 8px 0 0;

    font-size: clamp(
        36px,
        5vw,
        64px
    );

    letter-spacing: -0.045em;

    line-height: 1.02;

    font-weight: 800;
}


.sec h2 .script {
    display: block;

    margin: 0 auto;

    padding: 0;

    font-size: 1.02em;
}


.sec h2 .script:after {
    display: none;
}


/* ==========================================================
   STORY SLIDER WRAPPER
   ========================================================== */

.story-slider {
    position: relative;

    width: 100%;

    margin-top: 44px;
}


/* ==========================================================
   STORY TRACK
   DESKTOP
   ========================================================== */

.story {
    display: grid;

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

    gap: 16px;

    width: 100%;
}


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

.sc {
    position: relative;

    aspect-ratio: 4 / 5;

    border-radius: 26px;

    overflow: hidden;

    background: #111;

    min-width: 0;
}


/* ==========================================================
   VIDEO
   ========================================================== */

.sc video {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* ==========================================================
   REEL BACKGROUNDS
   ========================================================== */

.sc.a {
    background:
        radial-gradient(
            circle at 30% 30%,
            #f2c48a,
            #8a4a26 70%
        );
}


.sc.b {
    background: #000;
}


.sc.c {
    background:
        linear-gradient(
            180deg,
            #e6ecea 0 45%,
            #6f9fc4 45% 100%
        );
}


.sc.d {
    background:
        repeating-conic-gradient(
            #1f8a4c 0 6deg,
            #177a40 6deg 12deg
        );
}


/* ==========================================================
   CENTER PLAY BUTTON
   ========================================================== */

.reel-play {
    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width: 68px;

    height: 68px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    color: #242322;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 5;

    padding: 0;

    box-shadow:
        0 8px 25px
        rgba(
            0,
            0,
            0,
            0.18
        );

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


/* ==========================================================
   PLAY BUTTON HOVER
   ========================================================== */

.reel-play:hover {
    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.08);

    background: #fff;
}


/* ==========================================================
   PLAY ICON
   ========================================================== */

.play-icon {
    display: block;

    font-size: 22px;

    line-height: 1;

    margin-left: 4px;
}


/* ==========================================================
   PAUSE ICON
   ========================================================== */

.pause-icon {
    display: none;

    font-size: 22px;

    line-height: 1;
}


/* ==========================================================
   WHEN VIDEO IS PLAYING
   ========================================================== */

.sc.is-playing .play-icon {
    display: none;
}


.sc.is-playing .pause-icon {
    display: block;
}


/* ==========================================================
   SLIDER ARROWS
   HIDDEN ON DESKTOP
   ========================================================== */

.story-arrow {
    display: none;

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 46px;

    height: 46px;

    border: none;

    border-radius: 50%;

    background: #fff;

    color: #242322;

    font-size: 22px;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 20;

    box-shadow:
        0 6px 20px
        rgba(
            0,
            0,
            0,
            0.15
        );

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


/* ==========================================================
   ARROW HOVER
   ========================================================== */

.story-arrow:hover {
    transform:
        translateY(-50%)
        scale(1.08);
}


/* ==========================================================
   ARROW POSITION
   ========================================================== */

.story-prev {
    left: 5px;
}


.story-next {
    right: 5px;
}


/* ==========================================================
   SLIDER DOTS
   ========================================================== */

.story-dots {
    display: none;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 22px;
}


/* ==========================================================
   DOT
   ========================================================== */

.story-dot {
    width: 8px;

    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #d4d0ca;

    cursor: pointer;

    transition:
        width 0.25s ease,
        background 0.25s ease;
}


/* ==========================================================
   ACTIVE DOT
   ========================================================== */

.story-dot.active {
    width: 24px;

    border-radius: 10px;

    background: #242322;
}
 /* ========================================================================== 7. AVAILABLE EVERYWHERE — reach grid ========================================================================== */ .reach  {
 display: grid;
     grid-template-columns: 450px minmax(0, 1fr);
     gap: 24px;
     margin-top: 44px;
     text-align: left;
     align-items: stretch;
     }

 .avail  {
 width: 450px;
     height: 313px;
     padding: 41.84px 24px;
     border-radius: 18px;
     gap: 4px;
     flex-shrink: 0;
     background: #000;
     color: #fff;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     }

 .avail h3  {
 margin: 0 0px;
     font-size: 26px;
     letter-spacing: -.02em;
     font-weight: 500;
     }

 .avail p  {
 margin: 0 0 26px;
     color: #bdb8aa;
     font-size: 14px;
     }

 .logos  {
 display: grid;
     grid-template-columns: repeat(3, 125px);
     gap: 10px;
     margin-top: auto;
     justify-content: flex-start;
     }

 .avail .lg  {
 width: 125px;
     height: 60px;
     border-radius: 6.9px;
     display: grid;
     place-items: center;
     overflow: hidden;
     }

 .avail .lg img  {
 display: block;
     max-width: 100%;
     max-height: 100%;
     width: auto;
     height: auto;
     object-fit: contain;
     }

 /* Testimonials */ .tv  {
 overflow: hidden;
     touch-action: pan-y;
     user-select: none;
     min-width: 0;
     padding: 4px 2px 10px;
     margin: -4px -2px -25px;
     }

 .tt  {
 --g: 24px;
     display: flex;
     gap: var(--g);
     }

 .tc  {
 flex: 0 0 400px;
     width: 400px;
     min-width: 400px;
     height: 313px;
     min-height: 313px;
     background: #fff;
     color: #242322;
     border: 1.03px solid #f0e6d0;
     box-shadow: 0 8px 24px rgba(60,40,0,.06);
     border-radius: 18px;
     padding: 28px;
     display: flex;
     flex-direction: column;
     }

 .tc .st  {
 color: var(--makato-orange, #e79f0a);
     letter-spacing: 3px;
     font-size: 14px;
     }

 .tc q  {
 display: block;
     margin: 16px 0 24px;
     font-size: 16px;
     line-height: 1.6;
     color: #333;
     quotes: none;
     }

 .who  {
 display: flex;
     align-items: center;
     gap: 12px;
     margin-top: auto;
     }

 .av  {
 width: 44px;
     height: 44px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: #fff;
     font-weight: 700;
     font-size: 15px;
     flex: none;
     background: var(--av);
     }

 .who b  {
 display: block;
     font-size: 14px;
     }

 .who small  {
 color: #7a7566;
     font-size: 12px;
     }

 .cta-in  {
 max-width: 1320px;
     margin: auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 32px 40px;
     flex-wrap: wrap;
     }

 /* ========================================================================== 8. FIGMA SPEC — text styles ========================================================================== */ .hero .eyebrow, .sh-top .eyebrow  {
 font-family: 'DM Sans', sans-serif;
     font-weight: 800;
     font-size: 11px;
     line-height: 16.5px;
     letter-spacing: 2.42px;
     text-transform: uppercase;
     color: #DF8D16;
     }

 .why .eyebrow  {
 justify-content: center;
     font-family: 'DM Sans', sans-serif;
     font-weight: 800;
     font-size: 11px;
     line-height: 16.5px;
     letter-spacing: 2.42px;
     text-transform: uppercase;
     color: #242322;
     }

 .sec .eyebrow  {
 font-family: 'Manrope', sans-serif;
     font-weight: 800;
     font-size: 11px;
     line-height: 17.28px;
     letter-spacing: 2.65px;
     text-transform: uppercase;
     text-align: center;
     color: #DF8D16;
     }

 .hero h1  {
 font-family: 'Manrope', sans-serif;
     font-weight: 800;
     font-size: 110px;
     line-height: 95px;
     letter-spacing: -5px;
     color: #242322;
     }

 .hero h1 .script  {
 font-family: 'Protest Riot', cursive;
     font-weight: 400;
     font-size: 110px;
     line-height: 95px;
     letter-spacing: -5px;
     color: #F8B719;
     }

 .hero .lead  {
 font-family: 'DM Sans', sans-serif;
     font-weight: 400;
     font-size: 18px;
     line-height: 29.25px;
     letter-spacing: 0;
     color: #242322A6;
     }

 .hero .btn  {
 font-family: 'DM Sans', sans-serif;
     font-weight: 700;
     font-size: 11px;
     line-height: 16.5px;
     letter-spacing: 1.54px;
     text-transform: uppercase;
     text-align: center;
     }

 .shop h2, .sec h2  {
 font-family: 'Manrope', sans-serif;
     font-weight: 800;
     font-size: 72px;
     line-height: 72px;
     letter-spacing: -0.05em;
     color: #1E1E1E;
     }

 .shop h2 .script, .sec h2 .script  {
 font-family: 'Protest Riot', cursive;
     font-weight: 400;
     font-size: 72px;
     line-height: 72px;
     letter-spacing: -0.05em;
     color: #F8B719;
     }

 .sec h2  {
 color: #242322;
     text-align: center;
     }

 .sec h2 .script  {
 color: #F8B719;
     text-align: center;
     }

 .why h2  {
 margin: 8px 0 0;
     font-family: 'Manrope', sans-serif;
     font-weight: 800;
     font-size: 67.2px;
     line-height: 65.86px;
     letter-spacing: -0.05em;
     text-align: center;
     color: #242322;
     }

 .why h2 .script  {
 font-family: 'Protest Riot', cursive;
     font-weight: 400;
     font-size: 67.2px;
     line-height: 65.86px;
     letter-spacing: -0.05em;
     color: #FFFFFF;
     display: inline-block;
     margin: 0 auto;
     }

 .viewall  {
 font-family: 'DM Sans', sans-serif;
     font-weight: 700;
     font-size: 14px;
     line-height: 16.5px;
     letter-spacing: 0.88px;
     text-transform: uppercase;
     color: #242322;
     }

 .cta .eyebrow  {
 font-family: 'Manrope', sans-serif;
     font-weight: 800;
     font-size: 11px;
     line-height: 16.5px;
     letter-spacing: 2.42px;
     text-transform: uppercase;
     color: #242322;
     }

 .cta h2  {
 font-family: 'Manrope', sans-serif;
     font-weight: 800;
     font-size: 86px;
     line-height: 86px;
     letter-spacing: -0.05em;
     }

 .cta h2 .script  {
 font-family: 'Protest Riot', cursive;
     font-weight: 400;
     font-size: 86px;
     line-height: 86px;
     letter-spacing: 0;
     }

 /* ========================================================================== 9. FIGMA SPEC — card sizes ========================================================================== */ .shop .pc  {
 width: 303px;
     height: 514.72px;
     min-height: 514.72px;
     border-radius: 16px;
     padding: 25px;
     }

 .sec .sc  {
 width: 287.55px;
     height: 391.42px;
     border-radius: 26.24px;
     }

 /* ========================================================================== 10. PACK IMAGES (override placeholder styles) ========================================================================== */ img.pack  {
 background: none !important;
     border-radius: 0 !important;
     padding: 0 !important;
     box-shadow: none !important;
     filter: drop-shadow(0 18px 18px rgba(0,0,0,.28));
     overflow: visible;
     object-fit: none;
     display: block;
     }

 img.pack::before, img.pack::after  {
 display: none !important;
     content: none !important;
     }

 /* ========================================================================== 11. EYEBROW CHIP — replace colored pill with chip.svg ========================================================================== */ .eyebrow i, .eyebrow-icon  {
 display: none;
     }

 .eyebrow .eyebrow-chip, .eyebrow img.eyebrow-chip  {
 display: inline-block;
     width: 22px;
     height: 14px;
     object-fit: contain;
     flex-shrink: 0;
     vertical-align: middle;
     }

 /* ========================================================================== 12. HERO — C.svg stroke under "happiness" Figma: 445.14 × 23.73 @ top 93.94px (at 110px font) ========================================================================== */ .script::after  {
 display: none !important;
     content: none !important;
     }

 .script b  {
 display: none !important;
     }

 .script-stroke  {
 position: absolute;
     left: 0;
     top: 93.94px;
     width: 445.14px;
     height: 23.73px;
     max-width: 100%;
     object-fit: contain;
     pointer-events: none;
     display: block;
     }

 @media (max-width: 1100px)  {
 .script-stroke  {
 top: 75.15px;
         width: 356.11px;
         height: 18.98px;
             }

 }

 @media (max-width: 760px)  {
 .script-stroke  {
 top: 47.91px;
         width: 227.02px;
         height: 12.10px;
             }

 }

 /* ========================================================= WHY section — 4 arrow SVGs (a1–a4) around the benefit cards ========================================================= */ .arrow  {
 position: absolute;
     pointer-events: none;
     z-index: 5;
     width: 110px;
     height: auto;
     object-fit: contain;
     }

 /* ensure .bi is positioning context for absolute arrows */ .bi  {
 position: relative;
     }

 /* Top-left arrow (a1) — points to the center/top */ .bi.l .arrow-a1  {
 top: -44px;
     right: -40px;
     }

 /* Top-right arrow (a3) — points to the center/top (mirrored) */ .bi.r .arrow-a3  {
 top: -40px;
     left: -90px;
     }

 /* Bottom-left arrow (a2) — placed below the text block */ .bi.l .arrow-a2  {
 top: 111%;
     right: -65px;
     margin-top: 12px;
     }

 /* Bottom-right arrow (a4) — placed below the text block */ .bi.r .arrow-a4  {
 top: 100%;
     left: -55px;
     margin-top: 12px;
     }

 @media screen and (min-width: 1920px)  {
 .cats-bottom-svg  {
 margin-top: -20px;
         height: 150px;
             }

 .cats-bottom-svg img  {
 width: 100%;
         height: 133px;
         object-fit: cover;
             }

 }






/* ========================================================================== MAKATO — FULL RESPONSIVE OVERRIDES Loaded after style.css + home.css. No markup/design changes;
 these rules only make the existing layout fluid. ========================================================================== */ /* ---------- Fluid safety / large screens ---------- */ html, body  {
 max-width: 100%;
     overflow-x: hidden;
     }

 img, video, svg  {
 max-width: 100%;
     }

 .nav, .hero, .wrap, .shop, .sec, .f-in, .why-in, .cta-in  {
 width: min(100% - 48px, 1320px);
     }

 .hero, .shop, .sec, .f-in, .why-in, .cta-in, .wrap  {
 box-sizing: border-box;
     }

 @media (min-width: 1500px)  {
 .nav, .hero, .wrap, .shop, .sec, .f-in, .why-in, .cta-in  {
 width: min(100% - 64px, 1320px);
             }

 }

 /* ---------- Header ---------- */ .bar  {
 min-height: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     white-space: nowrap;
     overflow: hidden;
     padding: 0 12px;
     font-size: clamp(9px, 0.75vw, 12px);
     }

 /* header  {
 top: 34px;
     } */

 .nav  {
 min-height: 80px;
     height: 80px;
     padding: 16px 0;
     }

 .logo img  {
 width: auto;
     max-width: 170px;
     height: auto;
     display: block;
     }

 /* Keep the desktop navigation centered without causing overflow. */ .links  {
 gap: clamp(18px, 2.3vw, 36px);
     }

 .links a  {
 white-space: nowrap;
     }

 .icons  {
 flex-shrink: 0;
     }

 /* ---------- Hero ---------- */ .hero  {
 grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
     gap: clamp(20px, 3vw, 48px);
     padding: clamp(34px, 4vw, 64px) 0 clamp(48px, 5vw, 72px);
     }

 .hero h1  {
 font-size: clamp(48px, 7vw, 110px);
     line-height: .9;
     letter-spacing: clamp(-4px, -.35vw, -5px);
     }

 .hero h1 .script  {
 font-size: 1em;
     line-height: .9;
     letter-spacing: inherit;
     }

 .hero .lead  {
 max-width: 440px;
     }

 .stage  {
 min-width: 0;
     width: 100%;
     max-width: 680px;
     }

 .blob  {
 width: min(487px, 82%);
     height: auto;
     aspect-ratio: 1;
     }

 /* ---------- Feature strip ---------- */ .strip  {
 padding: 20px 24px;
     }

 .strip ul  {
 width: min(100%, 1360px);
     }

 /* ---------- Category section ---------- */ .cats  {
 padding: clamp(56px, 6vw, 80px) clamp(16px, 4.8vw, 70px) 0;
     }

 .cats .wrap  {
 width: min(100%, 1320px);
     }

 .cats-header  {
 grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
     gap: clamp(24px, 4vw, 40px);
     }

 .cats h2  {
 font-size: clamp(40px, 5.5vw, 72px);
     }

 .split  {
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: 16px;
     }

 .right, .video  {
 width: 100%;
     min-width: 0;
     }

 .video  {
 height: auto;
     aspect-ratio: 626 / 355;
     position: relative;
     top: auto;
     }

 .track  {
 min-width: 0;
     }

 .slide  {
 width: 100%;
     min-width: 100%;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px;
     }

 .cats .card  {
 width: 100%;
     min-width: 0;
     }

 /* ---------- Product slider ---------- */ .shop  {
 padding: clamp(60px, 7vw, 88px) 0 clamp(64px, 7vw, 96px);
     }

 .sh-top  {
 flex-wrap: wrap;
     align-items: flex-end;
     margin-bottom: clamp(28px, 4vw, 44px);
     }

 .sh-top > div:first-child  {
 min-width: 0;
     }

 .sh-top h2  {
 font-size: clamp(40px, 5.6vw, 76px);
     }

 .sh-deco  {
 right: 0;
     max-width: 16vw;
     }

 .sh-dot  {
 max-width: 8vw;
     }

 .sh-view  {
 min-width: 0;
     }

 .sh-track  {
 min-width: 0;
     }

 .shop .pc  {
 width: auto;
     min-width: 0;
     min-height: 514.72px;
     height: 514.72px;
     }

 .pc .pack  {
 max-width: 100%;
     }

 /* ---------- Why Makato ---------- */ .why  {
 padding: clamp(44px, 5vw, 60px) clamp(16px, 4vw, 40px) clamp(56px, 6vw, 80px);
     }

 .why-in  {
 padding: clamp(30px, 4vw, 44px) clamp(12px, 2.5vw, 32px) clamp(44px, 5vw, 60px);
     }

 .why h2  {
 font-size: clamp(42px, 4.7vw, 67.2px);
     line-height: .98;
     }

 .why h2 .script  {
 font-size: 1em;
     line-height: .98;
     }

 .bene  {
 grid-template-columns: minmax(0, 1fr) minmax(240px, 380px) minmax(0, 1fr);
     column-gap: clamp(16px, 3vw, 32px);
     }

 .bi.l  {
 padding-right: clamp(12px, 3vw, 40px);
	 gap:10px;
     }

 .bi.r  {
 padding-left: clamp(12px, 3vw, 40px);
     }

 .hero-pack video#whyvid  {
 width: min(400px, 100%);
     height: auto;
     aspect-ratio: 400 / 405;
     object-fit: cover;
     }

 /* ---------- Story + availability ---------- */ .sec  {
 padding-top: clamp(60px, 7vw, 88px);
     }

 .sec h2, .shop h2  {
 font-size: clamp(40px, 5vw, 72px);
     line-height: .98;
     }

 .sec h2 .script, .shop h2 .script  {
 font-size: 1em;
     line-height: .98;
     }

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

 .sc  {
 width: 100%;
     }

 .reach  {
 grid-template-columns: minmax(300px, 450px) minmax(0, 1fr);
     }

 .avail  {
 width: 100%;
     }

 .logos  {
 grid-template-columns: repeat(3, minmax(0, 125px));
     }

 .avail .lg  {
 width: 100%;
     min-width: 0;
     }

 .tc  {
 width: 400px;
     min-width: 400px;
     }

 /* ---------- CTA + footer ---------- */ .cta  {
 padding-left: 24px;
     padding-right: 24px;
     }

 .cta-in  {
 width: min(100%, 1240px);
     }

 .cta h2  {
 font-size: clamp(42px, 6.4vw, 86px);
     line-height: .98;
     }

 .cta h2 .script  {
 font-size: 1em;
     line-height: .98;
     }

 .f-grid  {
 min-width: 0;
     }

 .f-grid > div, .f-grid > nav  {
 min-width: 0;
     }

 .big  {
 width: 100%;
     max-width: 1320px;
     font-size: clamp(110px, 27vw, 360px);
     }

 /* ================================================================ TABLET — 1100px and below ================================================================ */ @media (max-width: 1100px)  {
 .hero  {
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
             }

 .hero h1  {
 font-size: clamp(48px, 7vw, 78px);
             }

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

 .right  {
 order: 1;
             }

 .video  {
 order: 2;
             }

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

 .cats .card  {
 min-height: 400px;
             }

 .sh-track  {
 --n: 3;
             }

 .bene  {
 grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr);
             }



 .avail  {
 height: auto;
         min-height: 313px;
             }

 .logos  {
 grid-template-columns: repeat(5, minmax(90px, 125px));
             }

 .tc  {
 flex-basis: min(400px, calc(100vw - 64px));
         width: min(400px, calc(100vw - 64px));
         min-width: min(400px, calc(100vw - 64px));
             }

 }

 /* ================================================================ TABLET / SMALL LAPTOP — 900px and below ================================================================ */ @media (max-width: 900px)  {
 .hero  {
 grid-template-columns: 1fr;
         text-align: center;
             }

 .hero > div:first-child  {
 display: flex;
         flex-direction: column;
         align-items: center;
             }

 .hero .lead  {
 max-width: 620px;
             }

 .stage  {
 margin: 0 auto;
         max-width: 620px;
	
             }

 .strip ul  {
 justify-content: center;
             }

 .cats-header  {
 grid-template-columns: 1fr;
         align-items: start;
             }

 .cats .sub  {
 max-width: 620px;
             }

 .video  {
 aspect-ratio: 16 / 10;
             }

 .sh-top  {
 align-items: flex-start;
             }

 .sh-top .viewall  {
 margin-left: auto;
             }

 .sh-deco  {
 display: none;
             }

 .sh-dot  {
 display: none;
             }

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

 .logos  {
 grid-template-columns: repeat(3, minmax(90px, 125px));
             }

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

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

 }

 /* ================================================================ MOBILE — 760px and below ================================================================ */ @media (max-width: 760px)  {
 body  {
 padding-top: 108px;
             }

 .nav  {
 height: 74px;
         min-height: 74px;
             }

 header  {
 top: 34px;
             }

 .logo img  {
 max-width: 130px;
             }

 .icons  {
 gap: 2px;
             }

 .icons button  {
 width: 40px;
         height: 40px;
             }

 .icons button:nth-child(2), .icons button:nth-child(3)  {
 display: none;
             }

 /* Existing burger is commented out in the supplied header, so the links remain horizontally scrollable instead of disappearing on mobile. */ .links  {
 position: static;
         transform: none;
         order: 3;
         display: none;
             }

 .hero  {
 padding-top: 32px;
         padding-bottom: 48px;
             }

 .hero h1  {
 font-size: clamp(44px, 13vw, 68px);
         letter-spacing: -3px;
             }

 .hero .lead  {
 font-size: 16px;
         line-height: 1.55;
         margin: 22px auto 28px;
             }

 .btns  {
 justify-content: center;
         width: 100%;
             }

 .btn  {
 min-height: 46px;
         padding: 0 20px;
         font-size: 10px;
             }

 .stage  {
 width: min(100%, 520px);
         aspect-ratio: 1 / .9;
             }
	 

 .blob  {
 width: 76%;
             }

 .p1  {
 left: 2%;
         top: 25%;
         width: 36%;
             }

 .p2  {
 left: 31%;
         top: 15%;
         width: 40%;
             }

 .p3  {
 left: 63%;
         top: 22%;
         width: 36%;
             }

 .strip  {
 padding: 18px 16px;
             }

 .strip ul  {
 gap: 10px 18px;
             }

 .strip li  {
 font-size: 9px;
         letter-spacing: .09em;
             }

 .strip li::before  {
 margin-right: 7px;
         font-size: 10px;
             }

 .cats  {
 padding: 56px 16px 0;
             }

 .cats-header  {
 margin-bottom: 32px;
             }

 .cats h2  {
 font-size: clamp(38px, 11vw, 58px);
             }

 .cats .sub  {
 font-size: 14px;
             }

 .split  {
 gap: 20px;
             }

 .cats .card  {
 height: 390px;
         min-height: 390px;
         padding: 20px 20px 68px;
             }

 .cats .card .art  {
 height: 150px;
             }

 .cats .card h3  {
 font-size: 21px;
             }

 .cats .card p  {
 font-size: 12px;
             }

 .video  {
 border-radius: 14px;
         aspect-ratio: 16 / 10;
             }

 .cc  {
 margin-top: 16px;
             }

 .shop  {
 padding: 60px 0 68px;
             }

 .sh-top  {
 gap: 18px;
             }

 .sh-top h2  {
 font-size: clamp(38px, 10.5vw, 58px);
             }

 .viewall  {
 font-size: 10px;
         letter-spacing: .08em;
             }

 .sh-track  {
 --n: 2;
         --g: 12px;
             }

 .shop .pc  {
 min-height: 500px;
         height: 500px;
         border-radius: 18px;
         padding: 18px;
             }

 .pc .art  {
 min-height: 190px;
         padding: 26px 0 14px;
             }

 .pc .pack  {
 min-width: 86px;
             }

 .pc h3  {
 font-size: 17px;
             }

 .buy  {
 gap: 6px;
             }

 .qty  {
 width: 86px;
             }

 .why  {
 padding: 42px 14px 54px;
             }

 .why-in  {
 padding: 26px 8px 40px;
             }

 .why h2  {
 font-size: clamp(40px, 10.5vw, 58px);
             }

 .bene  {
 grid-template-columns: 1fr 1fr;
         grid-template-rows: auto auto auto;
         row-gap: 24px;
         column-gap: 14px;
             }

 .hero-pack  {
 grid-column: 1 / -1;
         grid-row: 1;
         max-width: 300px;
         margin: 0 auto;
             }

 .bi.l, .bi.r  {
 grid-column: auto;
         align-items: center;
         text-align: center;
         padding: 0;
             }

 .bi.l:nth-of-type(4), .bi.r:nth-of-type(5)  {
 grid-row: 3;
             }

 .ic  {
 margin-top: 10px;
             }

 .bi h3  {
 font-size: 17px;
             }

 .bi p  {
 font-size: 12px;
         max-width: 190px;
             }

 .arrow  {
 display: none;
             }

 .sec  {
 padding-top: 60px;
             }

 .sec h2  {
 font-size: clamp(38px, 10vw, 58px);
             }

 .story  {
 grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 12px;
         margin-top: 30px;
             }

 .sc  {
 border-radius: 18px;
             }

 .reach  {
 margin-top: 30px;
         gap: 18px;
             }

 .avail  {
 min-height: 0;
         padding: 30px 20px;
             }

 .avail h3  {
 font-size: 24px;
             }

 .logos  {
 grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 8px;
             }

 .avail .lg  {
 height: 56px;
             }

 .tc  {
 height: 300px;
         min-height: 300px;
         padding: 24px;
             }

 .cta  {
 margin-top: 68px;
         padding: 92px 18px 60px;
             }

 .cta-in  {
 gap: 26px;
         justify-content: center;
         text-align: center;
             }

 .cta-in > div  {
 width: 100%;
             }

 .cta .eyebrow  {
 justify-content: center;
             }

 .cta h2  {
 font-size: clamp(40px, 10vw, 58px);
             }

 footer  {
 padding-top: 34px;
             }

 .f-in  {
 padding: 0;
             }

 .f-bar  {
 margin-top: 30px;
             }

 .big  {
 font-size: 34vw;
             }

 }

 /* ================================================================ SMALL MOBILE — 520px and below ================================================================ */ @media (max-width: 520px)  {
 body  {
 padding-top: 104px;
             }

 .nav  {
 width: calc(100% - 28px);
         padding: 14px 0;
             }

 .logo img  {
 max-width: 112px;
             }

 .icons button  {
 width: 38px;
         height: 38px;
             }

 .icons svg  {
 width: 20px;
         height: 20px;
             }

 .hero  {
 width: calc(100% - 28px);
             }

 .hero h1  {
 font-size: clamp(40px, 12.5vw, 56px);
             }

 .hero .eyebrow, .sh-top .eyebrow, .sec .eyebrow, .why .eyebrow  {
 font-size: 9px;
         letter-spacing: 1.8px;
             }

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

 .btns  {
 flex-direction: column;
         align-items: stretch;
         max-width: 330px;
             }

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

 .stage  {
 aspect-ratio: 1 / 1;
             }

 .blob  {
 width: 82%;
             }

 .p1  {
 left: 0;
         width: 39%;
             }

 .p2  {
 left: 29%;
         width: 43%;
             }

 .p3  {
 left: 61%;
         width: 39%;
             }

 .strip ul  {
 display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 9px 12px;
             }

 .strip li  {
 font-size: 8px;
             }

 .cats  {
 padding-left: 14px;
         padding-right: 14px;
             }

 .cats h2  {
 font-size: clamp(34px, 11vw, 50px);
             }

 .cats .sub  {
 font-size: 13px;
         line-height: 1.5;
             }

 .cats .card  {
 height: 370px;
         min-height: 370px;
             }

 .shop  {
 width: calc(100% - 28px);
             }

 .sh-top  {
 align-items: flex-start;
             }

 .sh-top .viewall  {
 width: 100%;
         margin-left: 0;
             }

 .sh-track  {
 --n: 1;
         --g: 0px;
             }

 .shop .pc  {
 min-height: 490px;
         height: 490px;
             }

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

 .hero-pack  {
 grid-column: 1;
         grid-row: 1;
         max-width: 270px;
             }

 .bi.l:nth-of-type(4), .bi.r:nth-of-type(5)  {
 grid-row: auto;
             }

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

 .sc  {
 aspect-ratio: 4 / 5;
             }

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

 .avail .lg  {
 height: 58px;
             }

 .tc  {
 flex-basis: calc(100vw - 56px);
         width: calc(100vw - 56px);
         min-width: calc(100vw - 56px);
             }

 .f-grid  {
 grid-template-columns: 1fr;
         gap: 26px;
             }

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

 .f-bar  {
 flex-direction: column;
         align-items: flex-start;
             }

 .big  {
 font-size: 28vw;
             }

 }

 /* ================================================================ VERY SMALL PHONES — 380px and below ================================================================ */ @media (max-width: 380px)  {
 .bar  {
 font-size: 8px;
         letter-spacing: .05em;
             }

 .nav  {
 width: calc(100% - 22px);
             }

 .logo img  {
 max-width: 98px;
             }

 .icons button  {
 width: 34px;
         height: 34px;
             }

 .icons svg  {
 width: 18px;
         height: 18px;
             }

 .hero  {
 width: calc(100% - 22px);
             }

 .hero h1  {
 font-size: 39px;
         letter-spacing: -2.5px;
             }

 .hero .lead  {
 font-size: 14px;
             }

 .strip  {
 padding-left: 11px;
         padding-right: 11px;
             }

 .strip li  {
 font-size: 7.5px;
             }

 .cats .card  {
 height: 350px;
         min-height: 350px;
         padding: 18px 16px 62px;
             }

 .cats .card .art  {
 height: 135px;
             }

 .cats .card h3  {
 font-size: 19px;
             }

 .shop .pc  {
 min-height: 470px;
         height: 470px;
         padding: 16px;
             }

 .qty  {
 width: 82px;
             }

 .why h2, .sec h2, .sh-top h2, .cta h2  {
 font-size: 36px;
             }

 .avail  {
 padding: 26px 16px;
             }

 .avail p  {
 font-size: 13px;
             }

 .logos  {
 gap: 6px;
             }

 .avail .lg  {
 height: 52px;
             }

 }

 /* ---------- Accessibility / touch ---------- */ @media (hover: none) and (pointer: coarse)  {
 .btn:hover, .cats .card:hover .go, .add:hover  {
 transform: none;
         box-shadow: none;
             }

 }

 /* ---------- Mobile navigation: uses the burger already present in header.php ---------- */ @media (max-width: 860px)  {
 .nav  {
 position: relative;
             }

 .burger  {
 display: grid;
             }

 .links  {
 display: none;
         position: absolute;
         top: 74px;
         left: 0;
         right: 0;
         transform: none;
         flex-direction: column;
         gap: 0;
         padding: 8px 18px 16px;
         background: var(--makato-cream);
         border-bottom: 1px solid #f0e6d0;
         box-shadow: 0 12px 24px rgba(35,35,35,.08);
         z-index: 10002;
             }

 .links.open  {
 display: flex;
             }

 .links a  {
 width: 100%;
         padding: 13px 0;
         border-bottom: 1px solid #f4ead4;
         font-size: 15px;
             }

 .links a:last-child  {
 border-bottom: 0;
             }

 }

 @media (max-width: 760px)  {
 .burger  {
 width: 40px;
         height: 40px;
             }

 .links  {
 top: 74px;
             }

 }

 @media (max-width: 520px)  {
 .burger  {
 width: 38px;
         height: 38px;
             }

 .links  {
 top: 74px;
         padding-left: 14px;
         padding-right: 14px;
             }

 }

 /* ========================================================================== MAKATO — FULL RESPONSIVE OVERRIDES Loaded after style.css + home.css. No markup/design changes;
 these rules only make the existing layout fluid. ========================================================================== */ /* ---------- Fluid safety / large screens ---------- */ html, body  {
 max-width: 100%;
     overflow-x: hidden;
     }

 img, video, svg  {
 max-width: 100%;
     }

 .nav, .hero, .wrap, .shop, .sec, .f-in, .why-in, .cta-in  {
 width: min(100% - 48px, 1320px);
     }

 .hero, .shop, .sec, .f-in, .why-in, .cta-in, .wrap  {
 box-sizing: border-box;
     }

 @media (min-width: 1500px)  {
 .nav, .hero, .wrap, .shop, .sec, .f-in, .why-in, .cta-in  {
 width: min(100% - 64px, 1320px);
             }

 }

 /* ---------- Header ---------- */ .bar  {
 min-height: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     white-space: nowrap;
     overflow: hidden;
     padding: 0 12px;
     font-size: clamp(9px, 0.75vw, 12px);
     }

 header  {
 top: 34px;
     }

 .nav  {
 min-height: 80px;
     height: 80px;
     padding: 16px 0;
     }

 .logo img  {
 width: auto;
     max-width:200px;
     height: auto;
     display: block;
     }

 /* Keep the desktop navigation centered without causing overflow. */ .links  {
 gap: clamp(18px, 2.3vw, 36px);
     }

 .links a  {
 white-space: nowrap;
     }

 .icons  {
 flex-shrink: 0;
     }

 /* ---------- Hero ---------- */ .hero  {
 grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
     gap: clamp(20px, 3vw, 48px);
     padding: 0 0px 20px;
     }

 .hero h1  {
 font-size: clamp(48px, 7vw, 110px);
     line-height: .9;
     letter-spacing: clamp(-4px, -.35vw, -5px);
     }

 .hero h1 .script  {
 font-size: 1em;
     line-height: .9;
     letter-spacing: inherit;
     }

 .hero .lead  {
 max-width: 440px;
     }

 .stage  {
 min-width: 0;
     width: 100%;
     max-width: 680px;
     }

 .blob  {
 width: min(487px, 82%);
     height: auto;
     aspect-ratio: 1;
     }

 /* ---------- Feature strip ---------- */ .strip  {
 padding: 20px 24px;
     }

 .strip ul  {
 width: min(100%, 1360px);
     }

 /* ---------- Category section ---------- */ .cats  {
 padding: clamp(56px, 6vw, 80px) clamp(16px, 4.8vw, 70px) 0;
     }

 .cats .wrap  {
 width: min(100%, 1320px);
     }

 .cats-header  {
 grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
     gap: clamp(24px, 4vw, 40px);
     }

 .cats h2  {
 font-size: clamp(40px, 5.5vw, 72px);
     }

 .split  {
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: 16px;
     }

 .right, .video  {
 width: 100%;
     min-width: 0;
     }

 .video  {
 height: auto;
     aspect-ratio: 626 / 355;
     position: relative;
     top: auto;
     }

 .track  {
 min-width: 0;
     }

 .slide  {
 width: 100%;
     min-width: 100%;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px;
     }

 .cats .card  {
 width: 100%;
     min-width: 0;
     }

 /* ---------- Product slider ---------- */ .shop  {
 padding: clamp(60px, 7vw, 88px) 0 clamp(64px, 7vw, 96px);
     }

 .sh-top  {
 flex-wrap: wrap;
     align-items: flex-end;
     margin-bottom: clamp(28px, 4vw, 44px);
     }

 .sh-top > div:first-child  {
 min-width: 0;
     }

 .sh-top h2  {
 font-size: clamp(40px, 5.6vw, 76px);
     }

 .sh-deco  {
 right: 40;
     max-width: 16vw;
     }

 .sh-dot  {
 max-width: 8vw;
     }

 .sh-view  {
 min-width: 0;
     }

 .sh-track  {
 min-width: 0;
     }

 .shop .pc  {
 width: auto;
     min-width: 0;
     min-height: 514.72px;
     height: 514.72px;
     }

 .pc .pack  {
 max-width: 100%;
     }

 /* ---------- Why Makato ---------- */ .why  {
 padding: clamp(44px, 5vw, 60px) clamp(16px, 4vw, 40px) clamp(56px, 6vw, 80px);
     }

 .why-in  {
 padding: clamp(30px, 4vw, 44px) clamp(12px, 2.5vw, 32px) clamp(44px, 5vw, 60px);
     }

 .why h2  {
 font-size: clamp(42px, 4.7vw, 67.2px);
     line-height: .98;
     }

 .why h2 .script  {
 font-size: 1em;
     line-height: .98;
     }

.bene {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    column-gap: clamp(16px, 3vw, 32px);
}

 .bi.l  {
 padding-right: 10px;
     }

 .bi.r  {
 padding-left: 10px;
	 gap:10px;
     }

 .hero-pack video#whyvid  {
 width: min(400px, 100%);
     height: auto;
     aspect-ratio: 360/ 450;
     object-fit: cover;
     }

 /* ---------- Story + availability ---------- */ .sec  {
 padding-top: clamp(60px, 7vw, 88px);
     }

 .sec h2, .shop h2  {
 font-size: clamp(40px, 5vw, 72px);
     line-height: .98;
     }

 .sec h2 .script, .shop h2 .script  {
 font-size: 1em;
     line-height: .98;
     }

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

 .sc  {
 width: 100%;
     }

 .reach  {
 grid-template-columns: minmax(300px, 450px) minmax(0, 1fr);
     }

 .avail  {
 width: 100%;
     }

 .logos  {
 grid-template-columns: repeat(3, minmax(0, 125px));
     }

 .avail .lg  {
 width: 100%;
     min-width: 0;
     }

 .tc  {
 width: 400px;
     min-width: 400px;
     }

 /* ---------- CTA + footer ---------- */ .cta  {
 padding-left: 24px;
     padding-right: 24px;
     }

 .cta-in  {
 width: min(100%, 1320px);
     }

 .cta h2  {
 font-size: clamp(42px, 6.4vw, 86px);
     line-height: .98;
     }

 .cta h2 .script  {
 font-size: 1em;
     line-height: .98;
     }

 .f-grid  {
 min-width: 0;
     }

 .f-grid > div, .f-grid > nav  {
 min-width: 0;
     }

 .big  {
 width: 100%;
     max-width: 1320px;
     font-size: clamp(110px, 27vw, 360px);
     }

 /* ================================================================ TABLET — 1100px and below ================================================================ */ @media (max-width: 1100px)  {
 .hero  {
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
             }

 .hero h1  {
 font-size: clamp(48px, 7vw, 78px);
             }

 .split  {
  grid-template-columns: 350px minmax(0, 1fr);
             }

 .right  {
 order: 1;
             }

 .video  {
 order: 2;
             }

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

 .cats .card  {
 min-height: 400px;
	 max-width:320px;
             }
	 .video {
		     aspect-ratio: 626 / 448;
	 }

 .sh-track  {
 --n: 3;
             }

 .bene  {
 grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr);
             }

 /* .reach  {
 grid-template-columns: 1fr;
             } */

 .avail  {
 height: auto;
         min-height: 313px;
             }
/* 
 .logos  {
 grid-template-columns: repeat(5, minmax(90px, 125px));
             } */

 .tc  {
 flex-basis: min(400px, calc(100vw - 64px));
         width: min(400px, calc(100vw - 64px));
         min-width: min(400px, calc(100vw - 64px));
             }

 }

 /* ================================================================ TABLET / SMALL LAPTOP — 900px and below ================================================================ */ @media (max-width: 900px)  {
 .hero  {
 grid-template-columns: 1fr;
         text-align: center;
             }

 .hero > div:first-child  {
 display: flex;
         flex-direction: column;
         align-items: center;
             }

 .hero .lead  {
 max-width: 620px;
             }

 .stage  {
 margin: 0 auto;
         max-width: 620px;
             }

 .strip ul  {
 justify-content: center;
             }

 .cats-header  {
 grid-template-columns: 1fr;
         align-items: start;
             }

 .cats .sub  {
 max-width: 620px;
             }

 .video  {
 aspect-ratio: 16 / 19.5;
             }

 .sh-top  {
 align-items: flex-start;
             }

 .sh-top .viewall  {
 margin-left: auto;
             }

 .sh-deco  {
 display: none;
             }

 .sh-dot  {
 display: none;
             }

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

 .logos  {
 grid-template-columns: repeat(4, minmax(90px, 125px));
	 gap:20px;
             }

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

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

 }

 /* ================================================================ MOBILE — 760px and below ================================================================ */ @media (max-width: 760px)  {
 body  {
 padding-top: 108px;
             }

 .nav  {
 height: 74px;
         min-height: 74px;
             }

 header  {
 top: 34px;
             }

 .logo img  {
 max-width: 130px;
             }

 .icons  {
 gap: 2px;
             }

 .icons button  {
 width: 40px;
         height: 40px;
             }

 .icons button:nth-child(2), .icons button:nth-child(3)  {
 display: none;
             }

 /* Existing burger is commented out in the supplied header, so the links remain horizontally scrollable instead of disappearing on mobile. */ .links  {
 position: static;
         transform: none;
         order: 3;
         display: none;
             }

 .hero  {
 padding-top:16px;
         padding-bottom: 48px;
             }

 .hero h1  {
 font-size: clamp(44px, 13vw, 68px);
         letter-spacing: -3px;
             }

 .hero .lead  {
 font-size: 16px;
         line-height: 1.55;
         margin: 6px auto 28px;
             }

 .btns  {
 justify-content: center;
         width: 100%;
             }

 .btn  {
 min-height: 46px;
         padding: 0 20px;
         font-size: 10px;
             }

 .stage  {
 width: min(100%, 520px);
         aspect-ratio: 1 / .9;
             }

 .blob  {
 width: 76%;
             }

 .p1  {
 left: 2%;
         top: 25%;
         width: 36%;
             }

 .p2  {
 left: 31%;
         top: 15%;
         width: 40%;
             }

 .p3  {
 left: 63%;
         top: 22%;
         width: 36%;
             }

 .strip  {
 padding: 18px 16px;
             }

 .strip ul  {
 gap: 10px 18px;
             }

 .strip li  {
 font-size: 9px;
         letter-spacing: .09em;
             }

 .strip li::before  {
 margin-right: 7px;
         font-size: 10px;
             }

 .cats  {
 padding: 56px 16px 0;
             }

 .cats-header  {
 margin-bottom: 32px;
             }

 .cats h2  {
 font-size: clamp(38px, 11vw, 58px);
             }

 .cats .sub  {
 font-size: 14px;
             }

 .split  {
 gap: 20px;
             }

 .cats .card  {
 height: 390px;
         min-height: 390px;
         padding: 42px 20px 68px;
             }

 .cats .card .art  {
 height: 150px;
             }

 .cats .card h3  {
 font-size: 21px;
             }

 .cats .card p  {
 font-size: 12px;
             }

 .video  {
 border-radius: 14px;
         aspect-ratio: 16 / 10;
             }

 .cc  {
 margin-top: 16px;
             }

 .shop  {
 padding: 60px 0 68px;
             }

 .sh-top  {
 gap: 18px;
             }

 .sh-top h2  {
 font-size: clamp(38px, 10.5vw, 58px);
             }

 .viewall  {
 font-size: 10px;
         letter-spacing: .08em;
             }

 .sh-track  {
 --n: 2;
         --g: 12px;
             }

 .shop .pc  {
 min-height: 500px;
         height: 500px;
         border-radius: 18px;
         padding: 18px;
             }

 .pc .art  {
 min-height: 190px;
         padding: 26px 0 14px;
             }

 .pc .pack  {
 min-width: 86px;
             }

 .pc h3  {
 font-size: 17px;
             }

 .buy  {
 gap: 6px;
             }

 .qty  {
 width: 86px;
             }

 .why  {
 padding: 42px 14px 54px;
             }

 .why-in  {
 padding: 26px 8px 40px;
             }

 .why h2  {
 font-size: clamp(40px, 10.5vw, 58px);
             }

 .bene  {
 grid-template-columns: 1fr 1fr;
         grid-template-rows: auto auto auto;
         row-gap: 24px;
         column-gap: 14px;
             }

 .hero-pack  {
 grid-column: 1 / -1;
         grid-row: 1;
         max-width: 300px;
         margin: 0 auto;
             }

 .bi.l, .bi.r  {
 grid-column: auto;
         align-items: center;
         text-align: center;
         padding: 0;
             }

 .bi.l:nth-of-type(4), .bi.r:nth-of-type(5)  {
 grid-row: 3;
             }

 .ic  {
 margin-top: 10px;
             }

 .bi h3  {
 font-size: 21px;
             }

 .bi p  {
 font-size: 12px;
         max-width: 190px;
             }

 .arrow  {
 display: none;
             }

 .sec  {
 padding-top: 60px;
             }

 .sec h2  {
 font-size: clamp(38px, 10vw, 58px);
             }

 .story  {
 grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 12px;
         margin-top: 30px;
             }

 .sc  {
 border-radius: 18px;
             }

 .reach  {
 margin-top: 30px;
         gap: 18px;
             }

 .avail  {
 min-height: 0;
         padding: 30px 20px;
             }

 .avail h3  {
 font-size: 24px;
             }

 .logos  {
 grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 8px;
             }

 .avail .lg  {
 height: 56px;
             }

 .tc  {
 height: 300px;
         min-height: 300px;
         padding: 24px;
             }

 .cta  {
 margin-top:50px;
         padding: 70px 18px 60px;
             }

 .cta-in  {
 gap: 26px;
         justify-content: center;
         text-align: center;
             }

 .cta-in > div  {
 width: 100%;
             }

 .cta .eyebrow  {
 justify-content: center;
             }

 .cta h2  {
 font-size: clamp(40px, 10vw, 58px);
             }

 footer  {
 padding-top: 34px;
             }

 .f-in  {
 padding: 0;
             }

 .f-bar  {
 margin-top: 30px;
             }

 .big  {
 font-size: 34vw;
             }

 }

 /* ================================================================ SMALL MOBILE — 520px and below ================================================================ */ @media (max-width: 520px)  {
 body  {
 padding-top: 104px;
             }

 .nav  {
 width: calc(100% - 28px);
         padding: 14px 0;
             }

 .logo img  {
 /* max-width: 112px; */
             }
	 .sec h2{
		 font-size:35px;
	 }
.story-slider{
	margin-top: 2px;
}
 .icons button  {
 width: 38px;
         height: 38px;
             }

 .icons svg  {
 width: 24px;
 height: 24px;
             }

 .hero  {
 width: calc(100% - 28px);
             }

 .hero h1  {
 font-size: clamp(40px, 12.5vw, 56px);
             }

 .hero .eyebrow, .sh-top .eyebrow, .sec .eyebrow, .why .eyebrow  {
 font-size: 9px;
         letter-spacing: 1.8px;
             }

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

 .btns  {
 flex-direction: column;
         align-items: stretch;
         max-width: 330px;
             }

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

 .stage  {
 aspect-ratio: 1 / 1;
             }

 .blob  {
 width: 82%;
             }

 .p1  {
 left: 8;
         width: 39%;
             }

 .p2  {
 left: 29%;
         width: 43%;
             }

 .p3  {
 left: 61%;
         width: 39%;
             }

 .strip ul  {
 display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 9px 12px;
             }

 .strip li  {
 font-size: 11px;
             }

 .cats  {
 padding-left: 14px;
         padding-right: 14px;
	 padding-bottom:50px;
             }
	 .sh-deco{
	 right: 32px;
    width: 50px;
    top: -15px;
	 }

 .cats h2  {
 font-size: clamp(34px, 11vw, 50px);
             }
	 .bi.l .arrow-a1{
		 display:none!important;
	 }
.bi.r .arrow-a3{
	 display:none!important;
}
	 .bi.l .arrow-a2{
		display:none!important; 
	 }
	 .bi.r .arrow-a4{
	 display:none!important;
}
 .cats .sub  {
 font-size: 14px;
         line-height: 1.5;
             }
	 .split{
		     grid-template-columns:  1fr;
	 }

 .cats .card  {
 height: 300px;
         min-height: 300px;
             }

 .shop  {
 width: calc(100% - 28px);
             }

 .sh-top  {
 align-items: flex-start;
             }

 .sh-top .viewall  {
 width: 100%;
         margin-left: 0;
             }

 .sh-track  {
 --n: 1.1;
         --g: 12px;
             }

 .shop .pc  {
 min-height: 490px;
         height: 490px;
             }

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

 .hero-pack  {
 grid-column: 1;
         grid-row: 1;
         max-width: 270px;
             }

 .bi.l:nth-of-type(4), .bi.r:nth-of-type(5)  {
 grid-row: auto;
             }

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

 .sc  {
 aspect-ratio: 4 / 5;
             }

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

 .avail .lg  {
 height:70px;
             }

 .tc  {
 flex-basis: calc(100vw - 56px);
         width: calc(100vw - 56px);
         min-width: calc(100vw - 56px);
             }

 .f-grid  {
 grid-template-columns: 1fr;
         gap: 26px;
             }

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

 .f-bar  {
 flex-direction: column;
         align-items: flex-start;
             }

 .big  {
 font-size: 28vw;
             }

 }

 /* ================================================================ VERY SMALL PHONES — 380px and below ================================================================ */ @media (max-width: 380px)  {
 .bar  {
 font-size: 8px;
         letter-spacing: .05em;
             }

 .nav  {
 width: calc(100% - 22px);
             }

 /* .logo img  {
 max-width: 98px;
             } */

 .icons button  {
 width: 34px;
         height: 34px;
             }



 .hero  {
 width: calc(100% - 22px);
             }

 .hero h1  {
 font-size: 58px;
         letter-spacing: -2.5px;
             }



 .strip  {
 padding-left: 11px;
         padding-right: 11px;
             }

 .strip li  {
 font-size: 10px;
             }

 .cats .card  {
 height: 300px;
         min-height: 300px;
         padding: 18px 16px 62px;
             }

 .cats .card .art  {
 height: 135px;
             }

 .cats .card h3  {
 font-size: 19px;
             }

 .shop .pc  {
 min-height: 470px;
         height: 470px;
         padding: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
             }
	 
.shop .pc img{
	transition: transform 0.3s ease;
}
.shop .pc:hover
.shop .pc img {
transform:
scale(1.05)
rotate(-1deg);
}
	 
 .qty  {
 width: 82px;
             }

 .why h2, .sec h2, .sh-top h2, .cta h2  {
 font-size: 36px;
             }

 .avail  {
 padding: 26px 16px;
             }

 .avail p  {
 font-size: 13px;
             }

 .logos  {
 gap: 6px;
             }

 .avail .lg  {
 height: 70px;
             }

 }

 /* ---------- Accessibility / touch ---------- */ @media (hover: none) and (pointer: coarse)  {
 .btn:hover, .cats .card:hover .go, .add:hover  {
 transform: none;
         box-shadow: none;
             }

 }

 /* ---------- Mobile navigation: uses the burger already present in header.php ---------- */ @media (max-width: 860px)  {
 .nav  {
 position: relative;
             }

 .burger  {
 display: grid;
             }

 .links  {
 display: none;
         position: absolute;
         top: 74px;
         left: 0;
         right: 0;
         transform: none;
         flex-direction: column;
         gap: 0;
         padding: 8px 18px 16px;
         background: var(--makato-cream);
         border-bottom: 1px solid #f0e6d0;
         box-shadow: 0 12px 24px rgba(35,35,35,.08);
         z-index: 10002;
             }

 .links.open  {
 display: flex;
             }

 .links a  {
 width: 100%;
         padding: 13px 0;
         border-bottom: 1px solid #f4ead4;
         font-size: 15px;
             }

 .links a:last-child  {
 border-bottom: 0;
             }

 }

 @media (max-width: 760px)  {
 .burger  {
 width: 40px;
         height: 40px;
             }

 .links  {
 top: 74px;
             }

 }

 @media (max-width: 520px)  {
 .burger  {
 width: 38px;
         height: 38px;
             }

 .links  {
 top: 74px;
         padding-left: 14px;
         padding-right: 14px;
             }

 }



/* Fix SVG images */
img[src$=".svg"] {
    display: inline-block !important;
    /* width: auto !important; */
    height: auto !important;
    max-width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   MAKATO PRODUCT CARD FIX
   ========================================================= */

.pc {
    background: var(--pc-bg) !important;
}


/* Product image always centered */
.pc .art {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
}

.pc .art .pack {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;

    width: 46% !important;
    min-width: 104px !important;
    max-width: 180px !important;

    height: auto !important;

    margin: 0 auto !important;

   transition: transform 0.4s ease;
    transform: scale(1) rotate(0deg);
}
.art:hover img {
	 transform: scale(1.08) rotate(3deg);
}
/* PRICE */
.pc .price {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;

    font-weight: 700 !important;

    text-decoration: none !important;
}

.pc .price a,
.pc .price span,
.pc .price del,
.pc .price s {
    text-decoration: none;
}

.pc .price .current-price {
    font-size: 16px;
    font-weight: 700;
    color: #242322;
}

.pc .price s {
    color: #999 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}


/* ADD BUTTON */
.pc .add {
    text-decoration: none !important;
    border-bottom: 0 !important;
    outline: none;
}

.pc .add:hover,
.pc .add:focus,
.pc .add:active {
    text-decoration: none !important;
}


/* QUANTITY BUTTONS */
.pc .qty button {
    text-decoration: none !important;
}




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

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    border-radius: 50%;

    background: #242322;
    color: #fff;

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

    line-height: 1;
}

/* =========================================================
   HIDE YITH VISUALLY
   Keep YITH in the DOM so its JS can work
========================================================= */

.pc .makato-yith-wishlist {
    position: absolute !important;
    left: -99999px !important;
    top: 0 !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
    opacity: 0 !important;

    white-space: nowrap !important;
}


.cart-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
	margin: 0px 8px;
}

.cart-button svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.cart-button .cart-count {
    position: absolute;
    top: -10px;
    right: -15px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--makato-orange, #e79f0a);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}



/* ==========================================================
   TABLET
   768px - 1199px
   TWO REELS VISIBLE
   ========================================================== */

@media (max-width: 1199px) {

    .story-slider {
        padding: 0 24px;

        overflow: hidden;
    }


    /*
       Track contains all 4 reels.

       2 reels are visible in viewport.
    */

    .story {
        display: flex;

        gap: 16px;

        width: 200%;

        max-width: none;

        overflow: visible;

        transition:
            transform
            0.55s
            cubic-bezier(
                0.22,
                0.61,
                0.36,
                1
            );

        touch-action: pan-y;

        cursor: grab;
    }


    /* During swipe */

    .story.is-dragging {
        cursor: grabbing;

        transition: none;
    }


    /*
       Each card takes 25% of
       the complete 200% track.

       Therefore 2 cards are visible.
    */

    .sc {
        flex:
            0 0
            calc(
                (100% - 16px) / 4
            );

        width:
            calc(
                (100% - 16px) / 4
            );

        min-width:
            calc(
                (100% - 16px) / 4
            );
    }


    /* SHOW ARROWS */

    .story-arrow {
        display: flex;
    }


    /* SHOW DOTS */

    .story-dots {
        display: flex;
    }

}


/* ==========================================================
   MOBILE
   BELOW 768px
   ONE REEL VISIBLE
   ========================================================== */

@media (max-width: 768px) {

    /* .sec {
        padding-left: 16px;

        padding-right: 16px;
    } */

.script-stroke {
	top: 45.15px;
}
    .story-slider {
        padding: 0 20px;

        overflow: hidden;
    }
 .reach  {
 grid-template-columns: 1fr;
             }

    /*
       Complete track is 400%.

       All 4 reels remain inside it.
    */

    .story {
        display: flex;

        width: 400%;

        gap: 14px;

        overflow: visible;
    }


    /*
       One reel visible.

       Each reel = 25% of
       the complete 400% track.
    */

    .sc {
        flex:
            0 0
            calc(
                (100% - 42px) / 4
            );

        width:
            calc(
                (100% - 42px) / 4
            );

        min-width:
            calc(
                (100% - 42px) / 4
            );

        border-radius: 22px;
    }


    /* MOBILE ARROWS */

    .story-arrow {
        width: 40px;

        height: 40px;

        font-size: 19px;
    }


    .story-prev {
        left: 4px;
    }


    .story-next {
        right: 4px;
    }


    /* MOBILE PLAY BUTTON */

    .reel-play {
        width: 62px;

        height: 62px;
    }

}


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

@media (max-width: 480px) {

    .story-slider {
        padding: 0 16px;
    }


    .story {
        gap: 12px;
    }


    .sc {
        border-radius: 20px;
    }


    .story-arrow {
        width: 36px;

        height: 36px;

        font-size: 17px;
    }


    .story-prev {
        left: 3px;
    }


    .story-next {
        right: 3px;
    }


    .reel-play {
        width: 58px;

        height: 58px;
    }


    .play-icon,
    .pause-icon {
        font-size: 19px;
    }

}

@media screen and (min-width: 1920px) {
.cats-bottom-svg img {
width: 100% !important;
height: 133px !important;
object-fit: cover !important;
}
}


/* =========================================================
   MAKATO GLOBAL CART
   ========================================================= */


/* ---------------------------------------------------------
   HEADER CART BUTTON
--------------------------------------------------------- */

.icons .cart-btn {

  position: relative;

  width: 24px;
  height: 24px;

  padding: 0;
  margin: 0;

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

  background: transparent;

  border: 0;

  color: inherit;

  cursor: pointer;

  flex-shrink: 0;

}


.icons .cart-btn svg {

  width: 24px;
  height: 24px;

  display: block;

}


.icons .cart-btn:hover {

  background: transparent;

}


/* ---------------------------------------------------------
 CART COUNT
--------------------------------------------------------- */

.cart-btn__badge {

  position: absolute;

  top: -7px;
  right: -8px;

  min-width: 15px;
  height: 15px;

  padding: 0 3px;

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

  border-radius: 50%;

  background: var(--orange, #ec9b00);

  color: #fff;

  font-family: var(--font-head, "Manrope", sans-serif);

  font-size: 9px;

  line-height: 1;

  font-weight: 700;

}


/* =========================================================
 CART OVERLAY
========================================================= */

.cart-overlay {

  position: fixed;

  inset: 0;

  z-index: 9998;

  background: rgba(0, 0, 0, .45);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
      opacity .3s ease,
      visibility .3s ease;

}


.cart-overlay.is-open {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}


/* =========================================================
 CART DRAWER
========================================================= */

.cart-drawer {

  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;

  z-index: 9999;

  width: 420px;

  max-width: 100%;

  display: flex;

  flex-direction: column;

  background: var(--cream, #fffaf1);

  box-shadow:
      -10px 0 40px rgba(0, 0, 0, .15);

  transform: translateX(100%);

  visibility: hidden;

  transition:
      transform .35s cubic-bezier(.4, 0, .2, 1),
      visibility .35s;

}


.cart-drawer.is-open {

  transform: translateX(0);

  visibility: visible;

}


body.cart-lock {

  overflow: hidden;

}


/* =========================================================
 CART HEADER
========================================================= */

.cart-drawer__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 22px 24px 14px;

}


.cart-drawer__title {

  margin: 0;

  font-family:
      var(--font-head,
      "Manrope",
      sans-serif);

  font-size: 18px;

  line-height: 1.2;

  font-weight: 700;

  color: var(--ink, #242322);

}


.cart-drawer__title span {

  font-weight: 500;

}


.cart-drawer__close {

  width: 34px;
  height: 34px;

  padding: 0;

  display: grid;

  place-items: center;

  border: 0;

  border-radius: 50%;

  background: transparent;

  color: var(--ink, #242322);

  cursor: pointer;

}


.cart-drawer__close:hover {

  background: rgba(0, 0, 0, .06);

}


/* =========================================================
 SHIPPING PROGRESS
========================================================= */

.cart-ship {

  padding: 0 24px 16px;

  border-bottom: 1px solid var(--line, #e8e4dc);

}


.cart-ship__text {

  margin: 0 0 9px;

  font-size: 12px;

  line-height: 1.4;

  color: #444;

}


.cart-ship__text strong {

  font-weight: 700;

}


.cart-ship__bar {

  width: 100%;

  height: 5px;

  overflow: hidden;

  border-radius: 999px;

  background: #e9e1d2;

}


.cart-ship__bar span {

  display: block;

  width: 0;

  height: 100%;

  border-radius: 999px;

  background:
      var(--orange,
      #ec9b00);

  transition: width .4s ease;

}


/* =========================================================
 CART ITEMS AREA
========================================================= */

.cart-items {

  flex: 1;

  min-height: 0;

  overflow-y: auto;

  overscroll-behavior: contain;

}


/* =========================================================
 CART ITEM
========================================================= */

.cart-item {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px 24px;

  border-bottom:
      1px solid
      var(--line, #e8e4dc);

}


.cart-item__img {

  width: 64px;
  height: 64px;

  flex-shrink: 0;

  display: flex;

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

  overflow: hidden;

  border-radius: 12px;

  background: #eee5d4;

}


.cart-item__img img {

  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;

}


.cart-item__info {

  flex: 1;

  min-width: 0;

}


.cart-item__top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 8px;

}


.cart-item__name {

  margin: 0;

  font-family:
      var(--font-head,
      "Manrope",
      sans-serif);

  font-size: 13px;

  line-height: 1.3;

  font-weight: 700;

  color: var(--ink, #242322);

}


.cart-item__remove {

  width: 24px;
  height: 24px;

  padding: 0;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border: 0;

  background: transparent;

  color: #777;

  cursor: pointer;

}


.cart-item__remove:hover {

  color: #c0392b;

}


.cart-item__variant {

  margin: 3px 0 0;

  font-size: 11px;

  color: #777;

}


.cart-item__bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-top: 9px;

}


/* =========================================================
 QUANTITY
========================================================= */

.cart-qty {

  display: inline-flex;

  align-items: center;

  height: 28px;

  padding: 0 4px;

  border: 1px solid #cfc6b6;

  border-radius: 999px;

}


.cart-qty button {

  width: 22px;
  height: 22px;

  padding: 0;

  display: grid;

  place-items: center;

  border: 0;

  border-radius: 50%;

  background: transparent;

  color: var(--ink, #242322);

  cursor: pointer;

}


.cart-qty button:hover {

  background: rgba(0, 0, 0, .06);

}


.cart-qty span {

  min-width: 22px;

  text-align: center;

  font-size: 12px;

  font-weight: 500;

}


.cart-item__price {

  font-family:
      var(--font-head,
      "Manrope",
      sans-serif);

  font-size: 13px;

  font-weight: 700;

  color: var(--ink, #242322);

}


/* =========================================================
 EMPTY CART
========================================================= */

.cart-empty {

  margin: 0;

  padding: 70px 24px;

  text-align: center;

  color: var(--muted, #766f68);

  font-size: 15px;

}


/* =========================================================
 CART FOOTER
========================================================= */

.cart-foot {

  padding: 18px 24px 22px;

  background: var(--cream, #fffaf1);

  border-top:
      1px solid
      var(--line, #e8e4dc);

}


.cart-sum {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 8px;

  font-size: 12px;

  color: #555;

}


.cart-sum--total {

  margin: 14px 0 18px;

  font-family:
      var(--font-head,
      "Manrope",
      sans-serif);

  font-size: 15px;

  font-weight: 700;

  color: var(--ink, #242322);

}


/* =========================================================
 CHECKOUT BUTTON
========================================================= */

.cart-checkout {

  width: 100%;
  height: 48px;

  display: flex;

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

  border-radius: 999px;

  background: #1c1b1a;

  color: #fff;

  font-family:
      var(--font-head,
      "Manrope",
      sans-serif);

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;

  transition:
      background .2s ease,
      opacity .2s ease;

}


.cart-checkout:hover {

  background: #000;

  color: #fff;

}


.cart-checkout.is-disabled {

  opacity: .45;

  pointer-events: none;

}


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

@media (max-width: 600px) {

  .cart-drawer {

      width: 100%;

  }

  .cart-drawer__head,
  .cart-ship,
  .cart-item,
  .cart-foot {

      padding-left: 18px;
      padding-right: 18px;

  }

}



/* Account page */
.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    /* padding: 60px 20px; */
}
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 240px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid #ddd;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 14px 18px;
    color: #222;
    text-decoration: none;
	font-family: "Manrope", sans-serif;
}
.woocommerce-account .woocommerce-MyAccount-content {
    width: calc(100% - 280px);
	font-family: "Manrope", sans-serif;
	    background: #fff;
    padding: 24px 48px;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    /* max-width: 500px; */
    margin: 40px auto;
    padding: 30px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
}
.woocommerce-account input.input-text {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
}
.woocommerce-account button.button {
 background:#f5b324;
	color:#212121;
	font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 16.5px;
    letter-spacing: 1.54px;
    text-transform: uppercase;
    text-align: center;
	padding: 10px 12px;
    border-radius: 50px;
}
.woocommerce-account button.button:hover{
	 transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	background:#df8d16!important;
	color:#212121;
	
}
.woocommerce table.my_account_orders{
	padding:14px;
}
.woocommerce-cart-form{
	margin-top:50px;
}
.woocommerce-info{
	    border: 1px solid #2196f3;
	border-radius:12px;
	background:#f4fcff;
}
.woocommerce-info::before{
	color:#515151;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message{
	margin:  1.5em 0 ;
}
.woocommerce-form-login-toggle .woocommerce-info{
	margin-top:0;
}
.woocommerce table.my_account_orders .button{
	background:#FEEFC1;
	    margin: 5px;
}
.woocommerce table.my_account_orders td, .woocommerce table.my_account_orders th{
	    padding: 8px 12px;
}
.woocommerce table.my_account_orders{
	background:#fff;
}
.woocommerce .woocommerce-error .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-message .button, .woocommerce-page .woocommerce-error .button, .woocommerce-page .woocommerce-info .button, .woocommerce-page .woocommerce-message .button{
	background:#f5b324;
	color:#212121;
	font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 16.5px;
    letter-spacing: 1.54px;
    text-transform: uppercase;
    text-align: center;
	padding: 16px 32px;
    border-radius: 50px;
}
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register{
	font-family: 'DM Sans', sans-serif;
	border-radius: 14px;
    padding: 24px;
	
}
.woocommerce form .form-row label{
	font-size: 14px;
    font-weight: 500;
    color: var(--label);
    margin-bottom: 5px;
}
.woocommerce form .form-row .input-text, .woocommerce form .form-row select{
	    background: #ffffff;
    border: 1px solid #e6dccb;
    border-radius: 10px;
	font-size:15px;
}
#account_display_name_description{
	 color: #7a7a7a;
	font-size: 12px;
}
.woocommerce form .form-row{
	    margin: 0 0 10px;
}
/* Currently active navigation page */
.links a.is-current {
color: #ec9b00 !important;
}

/* Optional: use Makato orange on hover too */
.links a:hover {
color: #ec9b00;
transition: color 0.2s ease;
}



@media (max-width: 556px) {
    /* Hide the account icon outside the menu by moving it via JS */
    header .links a.mobile-account-link {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 16px 14px;
        margin-top: 8px;
        border-top: 1px solid #eee3d0;
        color: #242322;
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
    }
	 .cats-bottom-svg  {
		     margin-top: -15px;
	 }
	 .hero .lead  {
 font-size: 14px;
	 max-width:300px;
             }
	.sec{
		padding:60px 0;
	}
	.art:hover img {
	 transform: none;
}

    header .links a.mobile-account-link svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    header .burger.is-open svg {
        display: none;
    }

    header .burger.is-open::after {
        content: "\00d7";
        display: block;
        font-size: 30px;
        line-height: 1;
    }
	img.pack{
		object-fit:contain;
		
	}
	.stage{
		 order: 2; 
	}
	.blob{
		 order: 1; 
	}

}


/* Hide play/pause button while video is playing */
.sc.is-playing .reel-play {
opacity: 0;
visibility: hidden;
pointer-events: none;
}

/* Show play/pause button when hovering over a playing reel */
.sc.is-playing:hover .reel-play {
opacity: 0;
visibility: visible;
pointer-events: auto;
}

/* Smooth icon visibility transition */
.reel-play {
transition:
opacity 0.25s ease,
visibility 0.25s ease,
transform 0.25s ease,
background 0.25s ease;
}

/* Keep the button visible when the video is paused */
.sc:not(.is-playing) .reel-play {
opacity: 0;
visibility: visible;
pointer-events: auto;
}


/* =========================================================
   MAKATO CART DRAWER — original sample visual styles
   Append this block to the bottom of your existing style.css.
   Selectors are scoped to the drawer so other page layouts stay intact.
========================================================= */

.mk-cart-overlay.overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 16, .52);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    z-index: 9998;
}

.mk-cart-overlay.overlay.on {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.mk-cart-drawer.drawer {
    --ink: #1b1a19;
    --ink-2: #4a4743;
    --muted: #7b7771;
    --line: #e1dbd2;
    --white: #fff;
    --orange: #f5a62a;
    --orange-d: #e39612;
    --drawer-bg: #f4f2ee;
    --green: #1f7a4d;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 435px;
    max-width: 100%;
    background: var(--drawer-bg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.22, .8, .26, 1);
    box-shadow: -12px 0 40px rgba(0, 0, 0, .12);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    line-height: 1.4;
    text-align: left;
}

.mk-cart-drawer.drawer.on { transform: none; }
body.mk-cart-locked { overflow: hidden; }

.mk-cart-drawer *,
.mk-cart-drawer *::before,
.mk-cart-drawer *::after { box-sizing: border-box; }

.mk-cart-drawer button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}

.mk-cart-drawer button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.mk-cart-drawer svg { display: block; }

.mk-cart-drawer .d-head {
    background: var(--white);
    padding: calc(26px + var(--safe-t)) 20px 0;
    flex: none;
}

.mk-cart-drawer .d-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mk-cart-drawer .d-title h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.2px;
}

.mk-cart-drawer .d-title h2 span {
    font-weight: 400;
    color: var(--ink-2);
}

.mk-cart-drawer .x {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex: none;
    font-size: 0;
}

.mk-cart-drawer .x:hover { background: #f0ece5; }

.mk-cart-drawer .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 18px;
}

.mk-cart-drawer .tab {
    height: 46px;
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.mk-cart-drawer .tab.on {
    color: var(--ink);
    font-weight: 600;
    border-bottom: 2px solid var(--ink);
}

.mk-cart-drawer .d-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mk-cart-drawer .banner {
    background: #F8B719;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 12px;
}

.mk-cart-drawer .reward {
    background: var(--white);
    padding: 18px 20px 22px;
}

.mk-cart-drawer .reward .msg {
    text-align: center;
    font-size: 15px;
    margin: 0 0 22px;
}

.mk-cart-drawer .reward .msg b { font-weight: 700; }
.mk-cart-drawer .reward .msg .woocommerce-Price-amount { white-space: nowrap; }

.mk-cart-drawer .track {
    position: relative;
    height: 6px;
    margin: 0 8px 0 5px;
}

.mk-cart-drawer .track .bg {
    position: absolute;
    inset: 0;
    background: #efe3c9;
    border-radius: 3px;
}

.mk-cart-drawer .track .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--ink);
    border-radius: 3px;
    transition: width .5s ease;
    min-width: 9px;
}

.mk-cart-drawer .node {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid #efe3c9;
    display: grid;
    place-items: center;
    color: var(--ink-2);
    transition: .3s;
}

.mk-cart-drawer .node.done {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--ink);
}

.mk-cart-drawer .lbls {
    position: relative;
    height: 42px;
    margin: 30px 8px 0 5px;
}

.mk-cart-drawer .lbl {
    position: absolute;
    top: 0;
    width: 90px;
    margin-left: -45px;
    text-align: center;
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.35;
}

.mk-cart-drawer .lbl b {
    display: block;
    font-size: 11.5px;
    color: var(--ink-2);
    font-weight: 700;
}

.mk-cart-drawer .lbl .woocommerce-Price-amount { white-space: nowrap; }
.mk-cart-drawer .sec { padding: 16px 0; }
.mk-cart-drawer .box { background: var(--white); border-radius: 16px; overflow: hidden; }

.mk-cart-drawer .item {
    display: flex;
    gap: 16px;
    padding: 16px;
}

.mk-cart-drawer .item + .item { border-top: 1px solid #f0ece5; }

.mk-cart-drawer .thumb {
    width: 50px;
    height: 80px;
    border-radius: 12px;
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f4f0e9;
}

.mk-cart-drawer .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
}

.mk-cart-drawer .item .inf { flex: 1; min-width: 0; position: relative; }

.mk-cart-drawer .item .row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.mk-cart-drawer .item .row span:first-child { min-width: 0; overflow-wrap: anywhere; }
.mk-cart-drawer .item .row span:last-child { font-weight: 700; flex: none; }
.mk-cart-drawer .item .row .woocommerce-Price-amount { white-space: nowrap; }

.mk-cart-drawer .item .var {
    font-size: 13px;
    color: var(--ink-2);
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.mk-cart-drawer .item .var dl.variation { margin: 0; font-size: 12px; }
.mk-cart-drawer .item .var dl.variation dt,
.mk-cart-drawer .item .var dl.variation dd { display: inline; margin: 0 4px 0 0; }

.mk-cart-drawer .qty {
    display: inline-flex;
    align-items: center;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 21px;
    margin-top: 10px;
    padding: 0 4px;
}

.mk-cart-drawer .qty button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    padding: 0;
}

.mk-cart-drawer .qty button:hover { background: #f2eee7; }
.mk-cart-drawer .qty span { min-width: 30px; text-align: center; font-size: 15px; font-weight: 600; }

.mk-cart-drawer .trash {
    position: absolute;
    right: 0;
    bottom: 4px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #9d9890;
    border-radius: 50%;
    padding: 0;
}

.mk-cart-drawer .trash:hover { color: #c0392b; background: #fbeeec; }
.mk-cart-drawer .coupon { padding: 16px; display: flex; gap: 8px; }

.mk-cart-drawer .coupon input {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 1px dashed #c9c2b6;
    border-radius: 10px;
    padding: 0 16px;
    font: inherit;
    font-size: 14px;
    text-transform: uppercase;
    background: var(--white);
    color: var(--ink);
}

.mk-cart-drawer .coupon input::placeholder { text-transform: none; color: #a9a399; }
.mk-cart-drawer .coupon input:focus { outline: none; border-color: var(--ink); border-style: solid; }

.mk-cart-drawer .apply {
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    background: #ddd9d2;
    color: #85807a;
    font-size: 15px;
    font-weight: 600;
    transition: .15s;
}

.mk-cart-drawer .apply.ready { background: var(--ink); color: #fff; }
.mk-cart-drawer .cmsg { padding: 16px 16px 14px; font-size: 13px; margin-top: -6px;text-align:center; }
.mk-cart-drawer .cmsg.err { color: #b3341f; }
.mk-cart-drawer .cmsg[hidden] { display: none; }

.mk-cart-drawer .applied {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 16px 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #e8f4ec;
    color: var(--green);
    font-size: 13.5px;
    font-weight: 600;
}

.mk-cart-drawer .applied button {
    margin-left: auto;
    font-size: 13px;
    text-decoration: underline;
    color: var(--ink-2);
    font-weight: 500;
}

.mk-cart-drawer .offers-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-top: 1px solid #efebe4;
    width: 100%;
    text-align: left;
}

.mk-cart-drawer .ico {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #f0ece5;
    display: grid;
    place-items: center;
    flex: none;
}

.mk-cart-drawer .offers-link .t { flex: 1; font-size: 15px; font-weight: 600; }
.mk-cart-drawer .offers-link small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); margin-top: 2px; }
.mk-cart-drawer .pab { margin-bottom: 16px; padding: 16px 0 16px 16px; overflow: hidden; }
.mk-cart-drawer .pab h3 { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.mk-cart-drawer .scroller { display: flex; gap: 12px; overflow-x: auto; padding-right: 16px; scrollbar-width: none; scroll-snap-type: x proximity; }
.mk-cart-drawer .scroller::-webkit-scrollbar { display: none; }

.mk-cart-drawer .rec {
    flex: none;
    width: 224px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    scroll-snap-align: start;
}

.mk-cart-drawer .rec .thumb { width: 64px; height: 64px; }
.mk-cart-drawer .rec .m { flex: 1; min-width: 0; }
.mk-cart-drawer .rec .nm { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mk-cart-drawer .rec .bt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 15px; font-weight: 700; }
.mk-cart-drawer .rec .bt > span { min-width: 0; }
.mk-cart-drawer .rec .bt .price { white-space: nowrap; }

.mk-cart-drawer .rec .adds {
    flex: none;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mk-cart-drawer .rec .adds:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.mk-cart-drawer .d-foot { flex: none; background: var(--white); padding: 18px 16px calc(14px + var(--safe-b)); box-shadow: 0 -6px 18px rgba(0, 0, 0, .05); }
.mk-cart-drawer .sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px; }
.mk-cart-drawer .sum span { font-size: 15px; font-weight: 600; }
.mk-cart-drawer .sum strong { font-size: 22px; font-weight: 800; letter-spacing: -.4px; white-space: nowrap; }
.mk-cart-drawer .sub { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); padding: 0 4px; margin-bottom: 6px; }

.mk-cart-drawer .buy {
    margin-top: 14px;
    width: 100%;
    min-height: 64px;
    border-radius: 18px;
    background:#F8B719;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px 0 10px;
    text-align: left;
    transition: background .15s, transform .1s;
}

.mk-cart-drawer .buy:hover { transform: translateY(-2px)}; }
.mk-cart-drawer .buy:active { transform: scale(.99); }
.mk-cart-drawer .buy:disabled { background: #e4ded3; color: #8c867c; cursor: not-allowed; }
.mk-cart-drawer .buy .lk { width: 42px; height: 42px; border-radius: 50%; background: var(--white); display: grid; place-items: center; flex: none; }
.mk-cart-drawer .buy .tx { flex: 1; font-size: 17px; font-weight: 700; line-height: 1.2; }
.mk-cart-drawer .buy .tx small { display: block; font-size: 12.5px; font-weight: 400; margin-top: 2px; }
.mk-cart-drawer .buy .am { font-size: 18px; font-weight: 700; white-space: nowrap; }

.mk-cart-drawer .emptycart { text-align: center; padding: 60px 30px; }
.mk-cart-drawer .emptycart > svg { margin: 0 auto; }
.mk-cart-drawer .emptycart h3 { font-size: 18px; margin: 14px 0 6px; }
.mk-cart-drawer .emptycart p { font-size: 14px; color: var(--ink-2); margin: 0 0 20px; }
.mk-cart-drawer .emptycart-link { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; border-radius: 23px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.mk-cart-drawer .offer { display: flex; gap: 14px; padding: 16px; border-bottom: 1px solid #efebe4; align-items: center; }
.mk-cart-drawer .offer:last-child { border: 0; }
.mk-cart-drawer .offer .c { flex: 1; min-width: 0; }
.mk-cart-drawer .offer code { font-family: inherit; font-weight: 800; font-size: 14px; letter-spacing: .8px; border: 1px dashed #c9c2b6; border-radius: 6px; padding: 3px 8px; display: inline-block; overflow-wrap: anywhere; }
.mk-cart-drawer .offer p { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 0; line-height: 1.4; }
.mk-cart-drawer .offer button { min-height: 36px; padding: 0 16px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; flex: none; }
.mk-cart-drawer .offer button:disabled { background: #ddd9d2; color: #85807a; }
.mk-cart-drawer .mk-offer-note { color: #b3341f; }
.mk-cart-drawer .item.gift { border-top: 1px dashed #e1dbd2; background: #fffaf0; border-radius: 0 0 16px 16px; }
.mk-cart-drawer .gtag { font-style: normal; font-size: 11px; font-weight: 700; background: var(--orange); padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.mk-cart-drawer .item.gift .row span:last-child { color: var(--green); }

.mk-cart-toast.toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 30px);
    background: #1b1a19;
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
    z-index: 10000;
    max-width: 90vw;
    text-align: center;
}

.mk-cart-toast.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Cart drawer must appear above the navbar */
.mk-cart-drawer.drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
}

/* Overlay should stay behind the cart but above the page */
.mk-cart-overlay.overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999998 !important;
}

/* Keep the drawer contents above the overlay */
.mk-cart-drawer.drawer.on {
    transform: translateX(0) !important;
}
@media (max-width: 480px) {
    .mk-cart-drawer.drawer { width: 100%; }
    .mk-cart-drawer .d-head { padding-left: 16px; padding-right: 16px; }
    .mk-cart-drawer .sec { padding-left: 10px; padding-right: 10px; }
    .mk-cart-drawer .item { gap: 12px; padding: 12px; }
    .mk-cart-drawer .thumb { width: 68px; height: 68px; }
    .mk-cart-drawer .rec .thumb { width: 58px; height: 58px; }
    .mk-cart-drawer .d-foot { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-cart-drawer.drawer,
    .mk-cart-overlay.overlay,
    .mk-cart-toast.toast { transition: none !important; }
}
.amount{
	text-decoration:none !important;
}
.pc:hover .pack {
    transform: scale(1.08) rotate(-3deg);
}


/* =========================================================
   CATEGORY SLIDER — FIX PARTIAL CARD / SLIDE OVERFLOW
========================================================= */

/* Viewport: show only one complete slide */
.right .view {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
	
    box-sizing: border-box;
}

/* Track: no gap between slides */
#tr {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    gap: 0 !important;
    margin: 0;
    padding: 0;

    will-change: transform;
}

/* Each slide must occupy exactly one viewport width */
#tr > .category-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;

    margin: 0;
}

/* Prevent individual cards from widening their slide */
#tr > .category-slide > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Match the JavaScript breakpoint: one card on tablet/mobile */
@media (max-width: 1100px) {
    #tr > .category-slide {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}
.added_to_cart{
	display:none!important;
}
/* Wishlist indicator dot in header */
.wishlist-header-button {
position: relative;
}

.wishlist-header-button .wishlist-dot {
position: absolute;
top: 3px;
right: 2px;

width: 9px;
height: 9px;

border-radius: 50%;
background: #e53935;
border: 2px solid #fffaf1;

display: block;
pointer-events: none;
}
.wpcf7-spinner {
	display:none;
}
.content{
	padding:50px 0
}
.content p {
	    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 29.25px;
    letter-spacing: 0;
    color: #242322A6;
}
.content ul li {
	    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 29.25px;
    letter-spacing: 0;
    color: #242322A6;
}
.buy-button{
	background:#000!important;
	color:#fff!important;
	padding:8px!important;
	border-radius:6px!important;
}
.buy-button:hover{
	background:#df8d16!important;
	
}
#btn-razorpay{
	background-color: var(--makato-dark)!important;
    color: #ffffff!important;
	transition: transform .25s, background .25s!important;
	display: inline-flex!important;
    align-items: center!important;
    gap: 10px!important;
    padding: 8px 32px!important;
    border-radius: 50px!important;
    font-size: 12px!important;
    font-weight: 800!important;
    letter-spacing: 0.08em!important;
    text-decoration: none!important;
}
#btn-razorpay-cancel{
	border: 1px solid var(--makato-dark)!important;
    color: #000!important;
	transition: transform .25s, background .25s!important;
	display: inline-flex!important;
    align-items: center!important;
    gap: 10px!important;
    padding: 8px 32px!important;
    border-radius: 50px!important;
    font-size: 12px!important;
    font-weight: 800!important;
    letter-spacing: 0.08em!important;
    text-decoration: none!important;
	background:#fffbf0;
}
#btn-razorpay:hover{
	 background-color: #df8d16!important;
	border: 1px solid #df8d16!important;
}
#btn-razorpay-cancel:hover{
	background-color: var(--makato-dark)!important;
	color:#fff!important;
}
.woocommerce-MyAccount-navigation-link--dashboard,.woocommerce-MyAccount-navigation-link--downloads{
	display:none !important;
}
.button{
	    background-color: var(--makato-dark)!important;
    color: #ffffff!important;
	    display: inline-flex!important;
    align-items: center!important;
    gap: 10px!important;
    padding: 16px 32px!important;
    border-radius: 50px!important;
    font-size: 12px!important;
    font-weight: 800!important;
    letter-spacing: 0.08em!important;
    text-decoration: none!important;
    transition: transform 0.2s ease, box-shadow 0.2s ease!important;
}



/* =========================================
   MAKATO HEADER — FIXED ON TOP
   WooCommerce Account Page
========================================= */

/* Announcement bar */
body.woocommerce-account > .bar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 34px !important;

    z-index: 100002 !important;
    box-sizing: border-box !important;
}

/* Main site header */
body.woocommerce-account > header {
    position: fixed !important;
    top: 34px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    z-index: 100001 !important;
    background: #fffdf8 !important;
    box-sizing: border-box !important;
}

/* Navigation stays inside the header */
body.woocommerce-account > header .nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;

    /* width: 100% !important; */
    max-width: 1320px;
    margin: 0 auto !important;

    background: #fffdf8 !important;
    box-sizing: border-box !important;
}

/* Prevent header contents from overflowing */
body.woocommerce-account > header *,
body.woocommerce-account > header *::before,
body.woocommerce-account > header *::after {
    box-sizing: border-box;
}

/* =========================================
   WOOCOMMERCE ADDRESS HEADINGS
   Restore their normal document layout
========================================= */

body.woocommerce-account
.woocommerce-Addresses
.woocommerce-Address-title {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

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

    float: none !important;
    transform: none !important;
    overflow: visible !important;

    visibility: visible !important;
    opacity: 1 !important;

    margin: 0 0 16px !important;
    padding: 0 !important;

    z-index: 1 !important;
    background: transparent !important;
    flex-direction: column !important;
    text-align: left !important;
}

body.woocommerce-account
.woocommerce-Addresses
.woocommerce-Address-title h2 {
    margin: 0 !important;
}

body.woocommerce-account
.woocommerce-Addresses
.woocommerce-Address-title .edit {
    position: static !important;
    float: none !important;
    margin: 0 !important;
}

/* =========================================
   RESPONSIVE HEADER
========================================= */

@media (max-width: 768px) {
    body.woocommerce-account > header .nav {
        /* width: 100% !important; */
        max-width: 100% !important;
    }
}
.woocommerce-message{
	background:#fff;
	margin-bottom:24px;
}
.edit{
	text-decoration:underline;
	color:#df8d16;
}

/* Desktop */
.stage {
    order: 2;
}

.hero-content {
    order: 1;
}

/* Mobile */
@media (max-width:556px) {
    .stage{
        order: 1; /* Moves down */
    }

    .hero-content  {
        order: 2; /* Moves up */
    }
}

/* Video wrapper */
.makato-video-wrapper {
    position: relative;
    overflow: hidden;
}

/* Keep video layout unchanged */
.makato-video-wrapper video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* Controls hidden until hover */
.makato-video-wrapper .video-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 5;
    pointer-events: none;
}

/* Show controls on hover or keyboard focus */
.makato-video-wrapper:hover .video-controls,
.makato-video-wrapper:focus-within .video-controls {
    opacity: 1;
    visibility: visible;
}

/* Control buttons */
.makato-video-wrapper .video-controls button {
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.25s ease, transform 0.25s ease;
}

.makato-video-wrapper .video-controls button:hover {
    background: #ec9b00;
    transform: scale(1.08);
}

.makato-video-wrapper .video-controls svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Play icon filled */
.makato-video-wrapper .play-icon {
    fill: currentColor;
    stroke: none;
}

/* Default: video is playing and muted */
.makato-video-wrapper .play-icon,
.makato-video-wrapper .sound-on-icon {
    display: none;
}

/* Paused video */
.makato-video-wrapper.is-paused .play-icon {
    display: block;
}

.makato-video-wrapper.is-paused .pause-icon {
    display: none;
}

/* Sound enabled */
.makato-video-wrapper.is-unmuted .sound-on-icon {
    display: block;
}

.makato-video-wrapper.is-unmuted .sound-off-icon {
    display: none;
}

/* On touch devices, keep controls visible */
@media (hover: none) {
    .makato-video-wrapper .video-controls {
        opacity: 1;
        visibility: visible;
    }
}

/* Sound button */
.sc {
    position: relative;
}

.sc .reel-sound {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 10;

    width: 38px;
    height: 38px;
    padding: 0;

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

    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;

    font-size: 17px;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease,
                visibility 0.25s ease,
                background 0.25s ease;
}

/* Show controls on hover */
.sc:hover .reel-sound,
.sc:focus-within .reel-sound {
    opacity: 1;
    visibility: visible;
}

.sc .reel-sound:hover {
    background: #ec9b00;
}

/* Sound icon states */
.sc .sound-on {
    display: none;
}

.sc.is-unmuted .sound-off {
    display: none;
}

.sc.is-unmuted .sound-on {
    display: inline;
}

/* Always show sound control on touchscreens */
@media (hover: none) {
    .sc .reel-sound {
        opacity: 1;
        visibility: visible;
    }
}

/* Hamburger icon */
#burger svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

#burger svg path {
    transform-box: view-box;
    transform-origin: center;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Hamburger becomes X when menu opens */
#burger.is-open svg path:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

#burger.is-open svg path:nth-child(2) {
    opacity: 0;
}

#burger.is-open svg path:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}
.woocommerce-privacy-policy-text p{
	font-size:15px!important;
	line-height:20px!important;
}
.woocommerce-form .woocommerce-form-register p{
	font-size:15px!important;
	line-height:20px!important;
}
.lost_password{
		font-size:15px!important;
	line-height:20px!important;
	color:#df8d15!important;
}
.woocommerce-form p{
	font-size:15px!important;
	line-height:25px!important;
}
.woocommerce-error{
	border:1px solid #b81c23;
	border-radius:12px;
	margin-bottom:20px;
	background-color:#fff7f7;
	font-size:16px!important;
}
.woocommerce-message{
	border:1px solid #8fae1b;
	border-radius:12px;
	background-color:#fcfff4;
}
.woocommerce-notices-wrapper{
	margin-bottom:20px!important;
}
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme{
	margin-top:10px;
}
@media (max-width: 556px) {
	.woocommerce-notices-wrapper{
	margin-bottom:0px!important;
}
	.content{
		padding:35px 0;
	}
	.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before{
 left: 1em;
	}
	.woocommerce-error, .woocommerce-info, .woocommerce-message{
		padding: 1em 1em 1em 2.5em;
	}
	.content p{
		font-size:16px;
		line-height:20px
	}
	
}




/* test */
/* Mobile View My Account Custom Grid Layout */
@media screen and (max-width: 556px) {
    /* Main wrapper full width */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px !important;
    }
.woocommerce-error, .woocommerce-info, .woocommerce-message{
	    margin-top: 0;
}
    /* Scrollbar remove & 4 tabs ko 1 line me fit (4-column grid) karne ke liye */
    .woocommerce-MyAccount-navigation ul {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* Exactly 4 equal columns */
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        overflow: hidden !important; /* Scrollbar bilkul hide */
    }

    .woocommerce-MyAccount-navigation ul li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        text-align: center !important;
    }

    /* Buttons Style */
    .woocommerce-MyAccount-navigation ul li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 4px !important;
        background-color: #fff6da !important;
        color: #333 !important;
        /* border-radius: 8px !important; */
        font-size: 13px !important; /* Font size tight fitting ke liye */
        font-weight: 600 !important;
        text-decoration: none !important;
        /* border-bottom: 2px solid #f0e6d3 !important; */
        white-space: nowrap !important;
    }

    /* Active Tab (jis button par click hai) */
    .woocommerce-MyAccount-navigation ul li.is-active a {
        background-color: #fff6da !important;
        color: #333 !important;
        border-bottom: 2px solid #ffc107!important;
    }
	  .woocommerce-table--order-details tr {
        font-size: 12px;
    }
		/* Product and Total column headings */
.woocommerce-table--order-details thead th {
    font-size: 16px !important;
    font-weight: 700;
}

/* Product names, quantities and product prices */
.woocommerce-table--order-details tbody td {
    font-size: 14px !important;
    font-weight: 400;
}

/* Below-table text: Subtotal, Shipping, COD Charge, Total, Payment method */
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    font-size: 12px !important;
    font-weight: 400;
}

/* Keep summary labels and amounts bold if desired */
.woocommerce-table--order-details tfoot tr th,
.woocommerce-table--order-details tfoot tr td {
    font-size: 12px !important;
}
	

    /* Content Area full width */
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        float: none !important;
    }
	.woocommerce-account .woocommerce-MyAccount-content{
		    padding: 24px 16px 14px;
	}
	.woocommerce-error, .woocommerce-info, .woocommerce-message{
		    margin-bottom: 10px;
		font-size:12px;
		
	}
	.button {
	   justify-content: center !important;
		    padding: 12px 15px !important;
		    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
}
	address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
		font-size:12px;
		color:#242322a6;
}
	body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h2{
		font-size:20px;
	}
	.woocommerce .woocommerce-customer-details .woocommerce-column__title{
		font-size:20px;
	}
}
}
.woocommerce-EditAccountForm p:has(input#account_display_name) {
    display: none !important;
}
legend{
	    margin-bottom:0;
	font-size:18px
}

.makato-video-wrapper {
    position: relative;
    overflow: hidden;
}

.makato-video-wrapper iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.hero-pack {
    position: relative;
    overflow: hidden;
	   height: 100%;
}

.hero-pack iframe#whyvid {
    display: initial;
    width: 100%;
    height: 100%;
    border: 0;
}
.fullscreen-action-menu
	    display:none!important;
}




.makato-video-wrapper,
.hero-pack {
    position: relative;
    overflow: hidden;
}

.makato-video-wrapper iframe,
.hero-pack iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.hero-pack {
    position: relative;
    overflow: hidden;
}

.hero-pack iframe#whyvid {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =========================================
   MAKATO HEADER — MOBILE FIX
   Desktop layout remains unchanged
========================================= */

@media (max-width: 767px) {

    /* Fixed header position */
    header {
        position: fixed;
        top: 34px;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 10000;
        background: #fffdf8;
    }

    /* Keep the shipping bar fixed above header */
    .bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10001;
    }

    /* One horizontal row: logo + icons */
    header .nav {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        height: 72px;
        padding: 8px 16px;
        margin: 0;
        gap: 10px;
    }

    /* Logo */
    header .logo {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0;
    }

    header .logo img {
        display: block;
        width: 138px;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Hide desktop navigation by default */
    header .links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        padding: 12px 20px 20px;
        margin: 0;
        background: #fffdf8;
        border-top: 1px solid #eee7dc;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        z-index: 10002;
    }

    /* Open menu state */
    header .links.is-open {
        display: flex;
    }

    header .links a {
        display: block;
        padding: 12px 0;
        font-size: 16px;
        line-height: 1.4;
        border-bottom: 1px solid #eee7dc;
    }

    /* Icons remain together on the same row */
    header .icons {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        margin-left: auto;
    }

    header .icons .cart-button,
    header .icons .burger {
        display: grid;
        flex: 0 0 32px;
        width: 32px;
        height: 40px;
        padding: 0;
        margin: 0;
        place-items: center;
        position: relative;
        text-decoration: none;
    }

    header .icons svg,
    header .burger svg {
        display: block;
        width: 21px;
        height: 21px;
    }

    /* Show hamburger on mobile */
    header .burger {
        display: grid;
        border: 0;
        background: transparent;
        border-radius: 0;
        cursor: pointer;
    }

    /* Hamburger to X animation */
    header .burger .burger-line {
        stroke: #242322;
        stroke-width: 2;
        stroke-linecap: round;
        transform-origin: center;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    header .burger.is-active .line-1 {
        transform: translateY(5px) rotate(45deg);
    }

    header .burger.is-active .line-2 {
        opacity: 0;
    }

    header .burger.is-active .line-3 {
        transform: translateY(-5px) rotate(-45deg);
    }

    /* Cart count stays attached to cart */
    header .cart-count {
        position: absolute;
        top: 0;
        right: -1px;
        min-width: 15px;
        height: 15px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        font-size: 10px;
        line-height: 1;
    }

    /* Wishlist indicator */
    header .wishlist-dot {
        position: absolute;
        top: 3px;
        right: 3px;
    }

    /* Fixed top area spacing */
    /* body {
        padding-top: 36px;
    } */
}

/* Small phones */
@media (max-width: 380px) {
    header .nav {
        padding-left: 10px;
        padding-right: 10px;
        gap: 4px;
    }

    header .logo img {
        width: 112px;
    }

    header .icons {
        gap: 2px;
    }

    header .icons .cart-button,
    header .icons .burger {
        flex-basis: 29px;
        width: 29px;
    }
}