/* =========================================================
   NIRAYA — SEA BUCKTHORN PRODUCT HERO
========================================================= */

.niraya-sb-product-hero {
    position: relative;
    overflow: hidden;

    min-height: 800px;

    background: #F8F5EC;

    padding: 70px 6% 60px;

    color: #173D18;
}


/* =========================================================
   INNER
========================================================= */

.sb-product-hero-inner {
    max-width: 1350px;

    min-height: 670px;

    margin: auto;

    display: grid;

    grid-template-columns: 52% 52%;

    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.sb-product-hero-content {
    position: relative;
    z-index: 5;
    padding-right: 70px;
}


/* Label */

.sb-product-label {
    display: flex;
    align-items: center;

    gap: 12px;

    color: #A77A1D;
    margin-top: 65px;
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3px;
}

.sb-product-label span {
    width: 35px;
    height: 1px;

    background: #A77A1D;
}


/* =========================================================
   TITLE
========================================================= */

.sb-product-title {
    margin: 30px 0 0;
width: 630px;
font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    font-size:100px !important;

    line-height: .78;

    letter-spacing: -7px;

    font-weight: 600;

    color: #173D18;
}

.sb-product-title em {
    display: block;

    margin-left: 70px;

    color: #A77A1D;

    font-family: Georgia, "Times New Roman", serif;

    font-weight: 400;
    font-style: italic;

    letter-spacing: -6px;
}


/* =========================================================
   SUBTITLE
========================================================= */

.sb-product-subtitle {
    margin-top: 38px;

    color: rgba(23,61,24,.68);

    font-size: 25px;

    line-height: 1.5;
}

.sb-product-subtitle strong {
    color: #A77A1D;

    font-family: Georgia, "Times New Roman", serif;

    font-style: italic;

    font-weight: 400;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.sb-product-description {
    max-width: 460px;

    margin: 18px 0 0;

    color:black;

    font-size: 18px;

    line-height: 1.9;
}


/* =========================================================
   ACTIONS
========================================================= */

.sb-product-actions {
    display: flex;
    align-items: center;

    gap: 25px;

    margin-top: 32px;
}


/* Primary */

.sb-product-primary {
    min-height: 55px;

    padding: 0 8px 0 22px;

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

    gap: 22px;

    background: #173D18;

    color: #F8F5EC;

    text-decoration: none;

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

    transition: .35s ease;
}

.sb-product-primary span {
    width: 35px;
    height: 35px;

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

    border-radius: 50%;

    background: #A77A1D;

    font-size: 17px;

    transition: .35s ease;
}

.sb-product-primary:hover {
    background: #A77A1D;
}

.sb-product-primary:hover span {
    background: #173D18;

    transform: translateX(4px);
}


/* Secondary */

.sb-product-secondary {
    color: #173D18;

    text-decoration: none;

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

    padding-bottom: 6px;

    border-bottom: 1px solid #A77A1D;
}


/* =========================================================
   META
========================================================= */

.sb-product-meta {
    display: grid;

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

    gap: 20px;

    max-width: 560px;

    margin-top: 55px;

    padding-top: 20px;

    border-top: 1px solid rgba(23,61,24,.13);
}

.sb-product-meta div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.sb-product-meta small {
    color: #A77A1D;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.sb-product-meta span {
    color:black;
    font-size: 15px;
}


/* =========================================================
   VISUAL
========================================================= */

.sb-product-hero-visual {
    position: relative;
isolation: isolate;
    height: 650px;
 overflow: hidden;
    display: flex;

    align-items: center;

    justify-content: center;
}

.sb-product-hero-visual::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(167, 122, 29, .16) 0%,
            rgba(167, 122, 29, .07) 35%,
            rgba(167, 122, 29, 0) 72%
        );

    z-index: 0;

    animation: sbBreathingGlow 6s ease-in-out infinite;
}


/* =========================================================
   ORGANIC GOLD ARC
========================================================= */

.sb-product-hero-visual::after {
    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%) rotate(-25deg);

    border-radius: 48% 52% 45% 55%;

    border: 1px solid rgba(167, 122, 29, .22);

    border-left-color: transparent;
    border-bottom-color: transparent;

    z-index: 1;

    animation: sbOrganicRotate 14s ease-in-out infinite;
}


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

.sb-product-main-image {
    position: relative;

    z-index: 5;

    animation: sbNaturalFloat 5.5s ease-in-out infinite;
}


/* =========================================================
   FAKE FLOATING PARTICLES
   Created using box-shadow
========================================================= */

.sb-product-hero-visual {
    --particle:
        0 0 0 rgba(167,122,29,.45);

}


/* Particle layer */

.sb-product-hero-visual .sb-product-main-image {
    filter:
        drop-shadow(0 25px 25px rgba(0,0,0,.18));
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes sbBreathingGlow {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.88);

        opacity: .55;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.08);

        opacity: 1;
    }

}


@keyframes sbOrganicRotate {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(-25deg)
            scale(.94);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(10deg)
            scale(1.03);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(35deg)
            scale(.94);
    }

}


@keyframes sbNaturalFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-9px) rotate(.5deg);
    }

}


/* =========================================================
   EXTRA FLOATING GOLD PARTICLES
   Using visual-visual background
========================================================= */

.sb-product-hero-visual {
    background-image:
        radial-gradient(
            circle at 17% 28%,
            rgba(167,122,29,.55) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 82% 20%,
            rgba(167,122,29,.35) 0 1.5px,
            transparent 3px
        ),
        radial-gradient(
            circle at 12% 72%,
            rgba(167,122,29,.4) 0 1.5px,
            transparent 3px
        ),
        radial-gradient(
            circle at 87% 70%,
            rgba(167,122,29,.45) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 28% 87%,
            rgba(167,122,29,.3) 0 1px,
            transparent 3px
        ),
        radial-gradient(
            circle at 73% 88%,
            rgba(167,122,29,.4) 0 1.5px,
            transparent 3px
        );

    animation: sbParticleDrift 9s ease-in-out infinite;
}


@keyframes sbParticleDrift {

    0%,
    100% {
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }

    50% {
        background-position:
            5px -12px,
            -7px 8px,
            8px -6px,
            -6px -10px,
            5px 9px,
            -8px -5px;
    }

}



/* Gold outline */

.sb-product-visual-bg::before {
    content: "";

    position: absolute;

    inset: 15px;

    border: 1px solid rgba(167,122,29,.55);

    clip-path: polygon(
        12% 0,
        88% 4%,
        100% 88%,
        78% 100%,
        8% 94%,
        0 15%
    );
}


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

.sb-product-main-image {
    position: relative;

    z-index: 4;

    width: 570px;
    height: 500px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 35px 30px rgba(0,0,0,.28)
        );

    transition: .5s ease;
    margin-top: -40px;
}

.sb-product-hero-visual:hover .sb-product-main-image {
    transform: translateY(-10px);
}


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

.sb-product-badge {
    position: absolute;

    z-index: 6;

    top: 70px;
    left: 35px;

    display: flex;
    align-items: center;

    gap: 10px;
}

.sb-product-badge span {
    color: #A77A1D;

    font-family: Georgia, serif;

    font-size: 25px;
}

.sb-product-badge small {
    color: rgba(248,245,236,.5);

    font-size: 7px;

    line-height: 1.5;

    letter-spacing: 1.5px;
}


/* =========================================================
   PRODUCT NAME
========================================================= */

.sb-product-name-card {
    position: absolute;

    z-index: 7;

    right: 0;
    bottom: 50px;

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding-left: 15px;

    border-left: 1px solid #A77A1D;
}

.sb-product-name-card span {
    color: rgba(248,245,236,.45);

    font-size: 7px;

    letter-spacing: 1.5px;
}

.sb-product-name-card strong {
    color: #F8F5EC;

    font-size: 13px;

    letter-spacing: 1px;
}



/* =========================================================
   NIRAYA — ABOUT SEA BUCKTHORN
   UI V3 — BOTANICAL PRODUCT STORY
========================================================= */

.niraya-sb-about {
    position: relative;
    overflow: hidden;

    padding: 110px 6%;

    background: #F2EEE3;

    color: #173D18;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.sb-about-inner {
    position: relative;

    max-width: 1320px;

    min-height: 620px;

    margin: auto;

    display: grid;

    grid-template-columns: 46% 54%;

    align-items: center;
}


/* =========================================================
   LEFT — VISUAL / STATEMENT AREA
========================================================= */

.sb-about-intro {
    position: relative;

    height: 100%;

    padding: 55px 50px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background: #173D18;

    overflow: hidden;
}


/* Gold corner */

.sb-about-intro::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -70px;
    left: -70px;

    border-radius: 50%;

    border: 1px solid rgba(167,122,29,.5);
}


/* Second corner */

.sb-about-intro::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -45px;
    bottom: -45px;

    border: 1px solid rgba(167,122,29,.35);

    transform: rotate(45deg);
}


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

.sb-about-eyebrow {
    position: relative;
    z-index: 2;

    color: #D1A44C;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;
}

.sb-about-eyebrow::before {
    content: "✦";

    margin-right: 10px;

    font-size: 9px;
}


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

.sb-about-intro h2 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #F8F5EC;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-style:italic;
    font-size:52px;

    line-height: .9;

    letter-spacing: -4px;


}

.sb-about-intro h2 em {
    display: block;
    margin-top: 12px;
    color: #D1A44C;
    font-size:44px;
    line-height: 1.1;
    letter-spacing: -1px;
font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 600 !important;
    font-style:italic !important;
}


/* =========================================================
   INDEX
========================================================= */

.sb-about-index {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;

    gap: 13px;

    margin: 0;
}

.sb-about-index span {
    color: #D1A44C;

    font-family: Georgia, serif;

    font-size: 24px;

    font-style: italic;
}

.sb-about-index i {
    width: 35px;
    height: 1px;

    background: rgba(248,245,236,.3);
}

.sb-about-index small {
    color:white;

    font-size: 13px;

    letter-spacing: 1.5px;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.sb-about-content {
    position: relative;

    max-width: none;

    padding: 60px 55px 60px 75px;
}


/* Small label */

.sb-about-content::before {
    content: "THE BOTANICAL STORY";

    display: block;

    margin-bottom: 28px;

    color: #A77A1D;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


/* =========================================================
   LEAD
========================================================= */

.sb-about-content .sb-about-lead {
    max-width: 610px;

    margin: 0;

    color: #173D18;

    font-family: Georgia, "Times New Roman", serif;

    font-size:30px;

    line-height: 1.25;

    letter-spacing: -1.5px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.sb-about-content > p:not(.sb-about-lead) {
    max-width: 520px;

    margin: 28px 0 0;

    color:black;

    font-size: 18px;

    line-height: 1.95;
}


/* =========================================================
   DETAILS — CARD STYLE
========================================================= */

.sb-about-details {
    display: grid;

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

    gap: 10px;

    margin-top: 45px;

    border: 0;
}


/* individual cards */

.sb-about-detail {
    min-height: 125px;

    padding: 18px;

    background: #F8F5EC;

    border: 1px solid rgba(23,61,24,.08);

    box-shadow: 0 12px 30px rgba(23,61,24,.035);

    transition:
        transform .35s ease,
        border-color .35s ease;
}

.sb-about-detail:hover {
    transform: translateY(-6px);

    border-color: rgba(167,122,29,.45);
}

.sb-about-detail:not(:last-child) {
    border-right: 1px solid rgba(23,61,24,.08);

    margin-right: 0;
}


/* number */

.sb-about-detail span {
    display: block;

    margin: 0 0 25px;

    color: #A77A1D;

    font-family: Georgia, serif;

    font-size: 20px;

    font-style: italic;
}


/* title */

.sb-about-detail strong {
    display: block;

    color: #173D18;

    font-size: 14px;

    letter-spacing: 1.5px;
}


/* text */

.sb-about-detail p {
    margin: 8px 0 0;

    color:black;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.sb-about-statement {
    position: relative;

    max-width: 1320px;

    margin: 55px auto 0;

    padding: 25px 0 0;

    display: flex;

    align-items: center;

    gap: 40px;

    border-top: 1px solid rgba(23,61,24,.12);
}

.sb-about-statement span {
    flex-shrink: 0;

    color: #A77A1D;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;
}

.sb-about-statement p {
    margin: 0;

    color: rgba(23,61,24,.65);

    font-family: Georgia, serif;

    font-size: 23px;

    line-height: 1.5;
}

.sb-about-statement em {
    color: #173D18;

    font-style: italic;
}


/* =========================================================
   DECORATIVE GOLD DOTS
========================================================= */

.niraya-sb-about {
    background-image:
        radial-gradient(
            circle at 94% 12%,
            rgba(167,122,29,.25) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 91% 16%,
            rgba(167,122,29,.12) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 7% 91%,
            rgba(167,122,29,.18) 0 2px,
            transparent 3px
        );
}



/* =========================================================
   NIRAYA — SEA BUCKTHORN
   KEY BENEFITS — EDITORIAL V2
========================================================= */

.niraya-sb-benefits-v2 {
    position: relative;
    overflow: hidden;

    background: #F8F5EC;
    color: #173D18;

    padding: 120px 6% 85px;
}


/* =========================================================
   TOP
========================================================= */

.sb-benefits-v2-top {
    max-width: 1350px;
    margin: 0 auto 95px;
}


.sb-benefits-v2-kicker {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 45px;
}


.sb-benefits-v2-kicker span {
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: #A77A1D;
}


.sb-benefits-v2-kicker i {
    width: 48px;
    height: 1px;

    background: #A77A1D;
}


.sb-benefits-v2-kicker small {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 2.5px;

    color:black;
}


.sb-benefits-v2-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;
}


.sb-benefits-v2-title > span {
    padding-bottom: 15px;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 3px;

    color: #A77A1D;
}


.sb-benefits-v2-title h2 {
    max-width: 850px;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size:82px;
    font-weight: 600;
    color: #173D18;
    line-height: .9;
    letter-spacing: -4px;
font-style:italic;
    text-align: right;
}


.sb-benefits-v2-title h2 em {
    display: block;
    color: #A77A1D;
    font-family: Georgia, "Times New Roman", serif;
    font-style:italic;
    font-weight: 600;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.sb-benefits-v2-layout {
    max-width: 1350px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 34% 66%;

    border-top: 1px solid rgba(23,61,24,.18);
}


/* =========================================================
   LEFT INTRO
========================================================= */

.sb-benefits-v2-intro {
    position: relative;

    min-height: 650px;

    padding: 55px 60px 50px 0;

    border-right: 1px solid rgba(23,61,24,.18);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.sb-benefits-v2-word {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(50px, 6vw, 85px);
    font-weight: 600;

    line-height: .82;
    letter-spacing: -5px;

    writing-mode: vertical-rl;
    transform: rotate(180deg);

    color: rgba(23,61,24,.08);
}


.sb-benefits-v2-intro > p {
    max-width: 270px;

    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 18px;
    line-height: 1.9;

    color:black;
}


.sb-benefits-v2-badge {
    width: 145px;
    height: 145px;

    border: 1px solid rgba(167,122,29,.55);

    border-radius: 50%;

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

    text-align: center;

    transform: rotate(-8deg);
}


.sb-benefits-v2-badge span {
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    letter-spacing: 2px;

    color: #A77A1D;
}


.sb-benefits-v2-badge strong {
    margin-top: 7px;

    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 400;
}


/* =========================================================
   BENEFIT LIST
========================================================= */

.sb-benefits-v2-list {
    padding-left: 60px;
}


.sb-benefit-v2 {
    position: relative;

    min-height: 162px;

    display: grid;
    grid-template-columns: 55px 1fr 45px;
    gap: 20px;

    align-items: center;

    border-bottom: 1px solid rgba(23,61,24,.15);

    transition:
        padding-left .35s ease,
        background .35s ease;
}


.sb-benefit-v2:first-child {
    border-top: none;
}


.sb-benefit-v2:hover {
    padding-left: 18px;
}


.sb-benefit-v2-no {
    align-self: start;

    padding-top: 43px;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 2px;

    color: #A77A1D;
}


.sb-benefit-v2-main {
    padding: 34px 0;
}


.sb-benefit-v2-main > span {
    display: block;

    margin-bottom: 9px;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 2.5px;

    color: #A77A1D;
}


.sb-benefit-v2-main h3 {
    margin: 0 0 9px;
    font-family: "Playfair Display", serif;
    font-size: clamp(25px, 2.4vw, 38px);
    font-weight: 400;
    color: #173D18;
    line-height: 1.05;
}


.sb-benefit-v2-main h3 em {
    color: #A77A1D;
    font-weight: 400;
}


.sb-benefit-v2-main p {
    max-width: 490px;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color:black;
}


.sb-benefit-v2-mark {
    width: 38px;
    height: 38px;

    border: 1px solid rgba(23,61,24,.25);
    border-radius: 50%;

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

    font-family: "Manrope", sans-serif;
    font-size: 18px;
    font-weight: 300;

    color: #173D18;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}


.sb-benefit-v2:hover .sb-benefit-v2-mark {
    transform: rotate(90deg);

    background: #173D18;
    color: #F8F5EC;
}


/* =========================================================
   FOOTER LINE
========================================================= */

.sb-benefits-v2-footer {
    max-width: 1350px;
    margin: 55px auto 0;

    display: grid;
    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 25px;
}


.sb-benefits-v2-footer > span {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 2.5px;
    color: #A77A1D;
}


.sb-benefits-v2-footer > div {
    height: 1px;

    background: rgba(23,61,24,.18);
}


.sb-benefits-v2-footer p {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: 25px;
}


.sb-benefits-v2-footer p em {
    color: #A77A1D;
    font-weight: 400;
}



/* =========================================================
   NIRAYA — SEA BUCKTHORN
   INGREDIENTS — BOTANICAL ANATOMY
========================================================= */

.niraya-sb-ingredients-v2 {
    position: relative;
    overflow: hidden;

    background: #173D18;
    color: #F8F5EC;

    padding: 125px 6% 90px;
}


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

.sb-ing-v2-header {
    max-width: 1350px;
    margin: 0 auto 90px;
}


.sb-ing-v2-number {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 48px;
}


.sb-ing-v2-number span {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 2px;

    color: #A77A1D;
}


.sb-ing-v2-number i {
    width: 45px;
    height: 1px;

    background: rgba(167,122,29,.6);
}


.sb-ing-v2-number small {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 3px;

    color: rgba(248,245,236,.45);
}


.sb-ing-v2-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 40px;
}


.sb-ing-v2-heading > span {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 3px;

    color: #A77A1D;
}


.sb-ing-v2-heading h2 {
    margin: 0;
color:white;
    font-size:71px;
    line-height: .88;
width: 1220px;
    letter-spacing: -4px;
font-family: Georgia, "Times New Roman", serif;
    font-style:italic;
    font-weight: 600;
    text-align: right;
}


.sb-ing-v2-heading h2 em {
    display: block;
    color: #D8C99D;
   font-family: Georgia, "Times New Roman", serif;
    font-style:italic;
    font-weight: 600;
}


/* =========================================================
   ANATOMY AREA
========================================================= */

.sb-ing-v2-anatomy {
    max-width: 1350px;
    min-height: 650px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 28% 44% 28%;

    align-items: center;

    border-top: 1px solid rgba(248,245,236,.13);
    border-bottom: 1px solid rgba(248,245,236,.13);
}


/* =========================================================
   SIDE INFORMATION
========================================================= */

.sb-ing-v2-side {
    display: flex;
    flex-direction: column;

    gap: 0;
}


.sb-ing-v2-left {
    padding-right: 55px;
}


.sb-ing-v2-right {
    padding-left: 55px;
}


.sb-ing-v2-info {
    position: relative;

    padding: 38px 0;

    display: grid;
    grid-template-columns: 35px 1fr;

    gap: 14px;

    border-bottom: 1px solid rgba(248,245,236,.12);
}


.sb-ing-v2-info:first-child {
    border-top: 1px solid rgba(248,245,236,.12);
}


.sb-ing-v2-info-no {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;

    color: #A77A1D;
}


.sb-ing-v2-info small {
    display: block;

    margin-bottom: 13px;

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    letter-spacing: 2px;

    color: rgba(248,245,236,.4);
}


.sb-ing-v2-info h3 {
    margin: 0 0 9px;

    font-family: "Playfair Display", serif;
    font-size: 25px;
    line-height: 1.1;

    font-weight: 400;

    color:#A77A1D;
}


.sb-ing-v2-info p {
    max-width: 230px;

    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1.7;

    color:white;
}


/* =========================================================
   CENTER
========================================================= */

.sb-ing-v2-center {
    position: relative;

    height: 650px;

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


.sb-ing-v2-product {
    position: relative;
    z-index: 5;

    width: 350px;
    height: 500px;

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

    background: #F8F5EC;

    clip-path: polygon(
        0 8%,
        8% 0,
        92% 0,
        100% 8%,
        100% 92%,
        92% 100%,
        8% 100%,
        0 92%
    );
}


.sb-ing-v2-product::before {
    content: "";

    position: absolute;
    inset: 14px;

    border: 1px solid rgba(167,122,29,.35);

    clip-path: inherit;
}


.sb-ing-v2-product-label {
    position: absolute;

    top: 28px;
    left: 30px;

    z-index: 5;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 3px;

    color: #A77A1D;
}


.sb-ing-v2-product img {
    position: relative;
    z-index: 3;

    width: 75%;
    max-width: 280px;

    height: auto;

    object-fit: contain;

    filter: drop-shadow(0 25px 25px rgba(23,61,24,.2));

    animation: sbIngredientFloat 5s ease-in-out infinite;
}


.sb-ing-v2-product-bottom {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 25px;

    z-index: 5;

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

    border-top: 1px solid rgba(23,61,24,.16);

    padding-top: 12px;
}


.sb-ing-v2-product-bottom span {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 2px;

    color: rgba(23,61,24,.5);
}


.sb-ing-v2-product-bottom strong {
    font-family: "Playfair Display", serif;
    font-size: 18px;

    font-weight: 400;

    color: #A77A1D;
}


/* =========================================================
   DECORATIVE RINGS
========================================================= */

.sb-ing-v2-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.orbit-one {
    width: 500px;
    height: 500px;

    border: 1px solid rgba(167,122,29,.25);

    transform: rotate(20deg);
}


.orbit-two {
    width: 580px;
    height: 330px;

    border: 1px solid rgba(248,245,236,.08);

    transform: rotate(-25deg);
}


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

.sb-ing-v2-bottom {
    max-width: 1350px;

    margin: 60px auto 0;

    display: grid;
    grid-template-columns: 1fr auto auto;

    align-items: center;

    gap: 30px;
}


.sb-ing-v2-bottom-line {
    height: 1px;

    background: rgba(248,245,236,.15);
}


.sb-ing-v2-bottom > span {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: 2.5px;

    color: #A77A1D;
}


.sb-ing-v2-bottom p {
    margin: 0;

    font-family: "Playfair Display", serif;
    font-size: 25px;

    color: rgba(248,245,236,.7);
}


.sb-ing-v2-bottom p em {
    color: #D8C99D;
    font-weight: 400;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes sbIngredientFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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

/* =========================================================
   NIRAYA — SEA BUCKTHORN
   HOW TO USE / NEW PREMIUM UI
========================================================= */

.niraya-sb-howto-new {
    position: relative;
    overflow: hidden;
    background: #f8f5ec;
    padding: 125px 6% 115px;
    color: #173d18;
}

.sb-howto-new-inner {
    max-width: 1380px;
    margin: 0 auto;
}


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

.sb-howto-new-header {
    display: grid;
    grid-template-columns: 0.7fr 1.5fr 0.9fr;
    align-items: end;
    gap: 50px;
    margin-bottom: 85px;
}

.sb-howto-new-label {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 12px;
}

.sb-howto-new-label span {
    font-family: Georgia, serif;
    font-size: 28px;
    color: #a77a1d;
}

.sb-howto-new-label i {
    width: 38px;
    height: 1px;
    background: #a77a1d;
}

.sb-howto-new-label small {
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #173d18;
}


.sb-howto-new-heading span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 5px;
    margin-bottom: 8px;
    opacity: 0.65;
}

.sb-howto-new-heading h2 {
    margin: 0;
font-family: Georgia, "Times New Roman", serif;
    font-style:italic;
    font-weight: 600;
    font-size: clamp(60px, 7vw, 108px);
    line-height: 0.9;
    letter-spacing: -4px;
}

.sb-howto-new-heading h2 em {
    color: #a77a1d;
    font-family: Georgia, "Times New Roman", serif;
    font-style:italic;
    font-weight: 600;
}


.sb-howto-new-intro {
    max-width: 330px;
    margin: 0 0 3px auto;
    font-size: 18px;
    line-height: 1.9;
    color:black;
}


/* =========================================================
   MAIN RITUAL
========================================================= */

.sb-howto-new-ritual {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    min-height: 650px;
    border-top: 1px solid rgba(23, 61, 24, 0.16);
    border-bottom: 1px solid rgba(23, 61, 24, 0.16);
}


/* =========================================================
   VISUAL
========================================================= */

.sb-howto-new-visual {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #173d18;
}


.sb-howto-new-circle {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: #f8f5ec;
    opacity: 0.96;
}


/* organic rings */

.sb-howto-new-orbit {
    position: absolute;
    border: 1px solid rgba(167, 122, 29, 0.5);
    border-radius: 50%;
    pointer-events: none;
}

.orbit-a {
    width: 560px;
    height: 560px;
    transform: rotate(-17deg);
}

.orbit-b {
    width: 650px;
    height: 390px;
    transform: rotate(22deg);
}


.sb-howto-new-number {
    position: absolute;
    left: 42px;
    top: 38px;
    color: #f8f5ec;
    font-family: Georgia, serif;
    font-size: 18px;
    letter-spacing: 2px;
}


.sb-howto-new-product {
    position: relative;
    z-index: 4;
    width: 280px;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-howto-new-product img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.18));
    animation: sbHowtoFloat 5s ease-in-out infinite;
}


@keyframes sbHowtoFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

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

}


.sb-howto-new-caption {
    position: absolute;
    z-index: 5;
    bottom: 38px;
    left: 42px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sb-howto-new-caption span {
    color: #a77a1d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
}

.sb-howto-new-caption strong {
    color: #f8f5ec;
    font-size: 12px;
    letter-spacing: 2px;
}


/* =========================================================
   CONTENT
========================================================= */

.sb-howto-new-content {
    padding: 45px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f2eee3;
}


.sb-howto-new-card {
    position: relative;
    padding: 27px 0 28px;
    border-bottom: 1px solid rgba(23, 61, 24, 0.16);
    transition: padding 0.35s ease;
}

.sb-howto-new-card:first-child {
    padding-top: 5px;
}


.sb-howto-new-card-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 14px;
}

.sb-howto-new-card-top span {
    color: #a77a1d;
    font-family: Georgia, serif;
    font-size: 20px;
}

.sb-howto-new-card-top small {
    font-size: 13px;
    letter-spacing: 2.5px;
    font-weight: 700;
    color: rgba(23, 61, 24, 0.55);
}


.sb-howto-new-card h3 {
    margin: 0 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(27px, 2.5vw, 40px);
    font-weight: 400;
    line-height: 1.1;
}

.sb-howto-new-card h3 em {
    color: #a77a1d;
}


.sb-howto-new-card p {
    max-width: 520px;
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color:black;
}


/* active accent */

.sb-howto-new-card.active {
    padding-left: 25px;
}

.sb-howto-new-card.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: #a77a1d;
}


/* =========================================================
   REMINDER
========================================================= */

.sb-howto-new-reminder {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
    padding: 20px 22px;
    background: #173d18;
    color: #f8f5ec;
}

.sb-howto-reminder-mark {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(167, 122, 29, 0.7);
    font-size:25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a77a1d;
    flex-shrink: 0;
}

.sb-howto-new-reminder span {
    display: block;
    margin-bottom: 5px;
    color: #a77a1d;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sb-howto-new-reminder p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color:white;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.sb-howto-new-bottom {
    display: grid;
    grid-template-columns: auto 1fr 1.4fr;
    align-items: center;
    gap: 28px;
    padding-top: 45px;
}

.sb-howto-new-bottom > span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #a77a1d;
}

.sb-howto-new-line {
    height: 1px;
    background: rgba(23, 61, 24, 0.2);
}

.sb-howto-new-bottom p {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 21px;
    line-height: 1.4;
}

.sb-howto-new-bottom p em {
    color: #a77a1d;
}


/* =========================================================
   NIRAYA — WHY NIRAYA
   UNIQUE BOTANICAL SEAL UI
========================================================= */

.niraya-sb-why-unique {
    position: relative;
    overflow: hidden;
    background: #f8f5ec;
    color: #173d18;
    padding: 120px 6% 115px;
}

.sbwu-inner {
    max-width: 1380px;
    margin: auto;
}


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

.sbwu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(23, 61, 24, 0.18);
}

.sbwu-label {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sbwu-label span {
    color: #a77a1d;
    font-family: Georgia, serif;
    font-size: 24px;
}

.sbwu-label i {
    width: 40px;
    height: 1px;
    background: #a77a1d;
}

.sbwu-label small {
    font-size: 13px;
    letter-spacing: 3px;
    font-weight: 700;
}

.sbwu-header > p {
    margin: 0;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 700;
    opacity: 0.45;
}


/* =========================================================
   CANVAS
========================================================= */

.sbwu-canvas {
    position: relative;
    height: 730px;
    margin-top: 40px;
}


/* =========================================================
   CENTER
========================================================= */

.sbwu-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 380px;
    height: 380px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}


/* rings */

.sbwu-ring {
    position: absolute;
    border: 1px solid rgba(23, 61, 24, 0.18);
    border-radius: 50%;
}

.ring-outer {
    width: 370px;
    height: 370px;
}

.ring-middle {
    width: 295px;
    height: 295px;
    border-color: rgba(167, 122, 29, 0.35);
}

.ring-inner {
    width: 220px;
    height: 220px;
    border-color: rgba(23, 61, 24, 0.22);
}


/* seal */

.sbwu-seal {
    position: relative;
    z-index: 4;
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background:white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 55px rgba(23, 61, 24, 0.18);
}

.sbwu-seal img{
    width: 133px;
    height: auto;
}


.sbwu-center-caption {
    position: absolute;
    bottom: -30px;
    font-size: 13px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #a77a1d;
}


/* =========================================================
   POINTS
========================================================= */

.sbwu-point {
    position: absolute;
    width: 300px;
    display: flex;
    gap: 18px;
}

.sbwu-point-no {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 1px solid #a77a1d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 14px;
    color: #a77a1d;
}

.sbwu-point small {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    letter-spacing: 2.5px;
    font-weight: 700;
    opacity: 0.5;
}

.sbwu-point h3 {
    margin: 0 0 8px;
    font-family: Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
}

.sbwu-point h3 em {
    color: #a77a1d;
    font-weight: 400;
}

.sbwu-point p {
    margin: 0;
    max-width: 200px;
    font-size: 16px;
    line-height: 1.7;
    color:black;
}


/* =========================================================
   POSITIONS
========================================================= */

.sbwu-point-1 {
    left: 3%;
    top: 80px;
}

.sbwu-point-2 {
    right: 3%;
    top: 80px;
}

.sbwu-point-3 {
    left: 3%;
    bottom: 75px;
}

.sbwu-point-4 {
    right: 3%;
    bottom: 75px;
}


/* =========================================================
   CONNECTING LINES
========================================================= */

.sbwu-line {
    position: absolute;
    height: 1px;
    background: rgba(23, 61, 24, 0.16);
    transform-origin: left center;
}

.sbwu-line-1 {
    width: 250px;
    left: 20%;
    top: 147px;
    transform: rotate(18deg);
}

.sbwu-line-2 {
    width: 250px;
    right: 19%;
    top: 224px;
    transform: rotate(-18deg);
}

.sbwu-line-3 {
    width: 250px;
    left: 20%;
    bottom: 145px;
    transform: rotate(-18deg);
}

.sbwu-line-4 {
    width: 250px;
        right: 18%;
    bottom: 233px;
    transform: rotate(18deg);
}


/* =========================================================
   BOTANICAL DECOR
========================================================= */

.sbwu-botanical {
    position: absolute;
    width: 80px;
    height: 120px;
    opacity: 0.18;
}

.botanical-left {
    left: -15px;
    top: 300px;
    transform: rotate(-25deg);
}

.botanical-right {
    right: -15px;
    top: 300px;
    transform: rotate(25deg) scaleX(-1);
}

.sbwu-botanical span {
    position: absolute;
    width: 28px;
    height: 48px;
    border: 1px solid #173d18;
    border-radius: 100% 0 100% 0;
    transform-origin: bottom center;
}

.sbwu-botanical span:nth-child(1) {
    left: 25px;
    top: 10px;
    transform: rotate(-30deg);
}

.sbwu-botanical span:nth-child(2) {
    left: 5px;
    top: 38px;
    transform: rotate(-65deg);
}

.sbwu-botanical span:nth-child(3) {
    left: 42px;
    top: 42px;
    transform: rotate(20deg);
}

.sbwu-botanical span:nth-child(4) {
    left: 20px;
    top: 70px;
    transform: rotate(-45deg);
}


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

.sbwu-bottom {
    display: grid;
    grid-template-columns: 0.7fr 1.5fr 0.8fr;
    gap: 50px;
    align-items: end;
    padding-top: 45px;
    border-top: 1px solid rgba(23, 61, 24, 0.18);
}

.sbwu-bottom > span {
    font-size: 13px;
    letter-spacing: 2.5px;
    font-weight: 700;
    color: #a77a1d;
}

.sbwu-bottom h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(30px, 4vw, 25px);
    line-height: 1;
    font-weight: 400;
}

.sbwu-bottom h2 em {
    color: #a77a1d;
}

.sbwu-bottom p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color:black;
}


/* =========================================================
   HOVER MOTION
========================================================= */

.sbwu-point {
    transition: transform 0.4s ease;
}

.sbwu-point:hover {
    transform: translateY(-7px);
}

.sbwu-point:hover .sbwu-point-no {
    background: #173d18;
    color: #f8f5ec;
}

/* =========================================================
   NIRAYA — SEA BUCKTHORN
   WHATSAPP CTA — EDITORIAL POSTER
========================================================= */

.niraya-sb-wa-editorial {
    position: relative;
    overflow: hidden;
    background: #f8f5ec;
    color: #173d18;
    padding: 105px 6% 80px;
}

.sbwae-inner {
    max-width: 1380px;
    margin: 0 auto;
}


/* =========================================================
   TOP
========================================================= */

.sbwae-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 24px;

    border-bottom: 1px solid rgba(23, 61, 24, 0.18);
}

.sbwae-top-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sbwae-top-left span {
    font-family: Georgia, serif;
    font-size: 24px;
    color: #a77a1d;
}

.sbwae-top-left i {
    width: 42px;
    height: 1px;
    background: #a77a1d;
}

.sbwae-top-left small,
.sbwae-top-right {
    font-size: 13px;
    letter-spacing: 2.5px;
    font-weight: 700;
}

.sbwae-top-right {
    opacity: 0.4;
}


/* =========================================================
   POSTER
========================================================= */

.sbwae-poster {
    position: relative;

    display: grid;
    grid-template-columns: 190px 1fr 100px;

    min-height: 620px;
    margin-top: 42px;

    background: #173d18;

    overflow: hidden;
}


/* =========================================================
   LEFT PANEL
========================================================= */

.sbwae-panel {
    position: relative;

    border-right: 1px solid rgba(248, 245, 236, 0.18);
}

.sbwae-panel-number {
    position: absolute;
    top: 30px;
    left: 30px;

    font-family: Georgia, serif;
    font-size: 18px;
    color: #c99b35;
}

.sbwae-vertical-text {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%) rotate(-90deg);

    width: 300px;

    text-align: center;

    font-size:13px;
    letter-spacing: 5px;
    font-weight: 700;

    color: rgba(248, 245, 236, 0.45);
}

.sbwae-symbol {
    position: absolute;

    left: 50%;
    bottom: 105px;

    transform: translateX(-50%);

    width: 62px;
    height: 62px;

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

    border: 1px solid rgba(201, 155, 53, 0.65);

    color: #c99b35;

    font-size: 26px;
}

.sbwae-panel-bottom {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 28px;

    display: flex;
    justify-content: space-between;

    font-size: 7px;
    letter-spacing: 2px;
    font-weight: 700;

    color: rgba(248, 245, 236, 0.4);
}


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

.sbwae-main {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 9%;
}

.sbwae-small-title {
    margin-bottom: 20px;

    color: #c99b35;

    font-size: 13px;
    letter-spacing: 4px;
    font-weight: 700;
}

.sbwae-main h2 {
    margin: 0;
    max-width: 760px;
    color:white;
    font-style:italic;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(58px, 7vw, 105px);
    line-height: 0.9;
    font-weight: 600;
    letter-spacing: -5px;
}

.sbwae-main h2 em {
    color: #c99b35;
   font-family: Georgia, "Times New Roman", serif;
    font-style:italic;
    font-weight: 600;
}

.sbwae-main > p {
    max-width: 520px;

    margin: 32px 0 0;

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

    color:white;
}


/* =========================================================
   CTA STRIP
========================================================= */

.sbwae-cta {
    position: relative;

    display: flex;
    align-items: center;

    width: min(580px, 100%);

    margin-top: 42px;

    padding: 13px 15px 13px 13px;

    box-sizing: border-box;

    background: #f8f5ec;

    text-decoration: none;
    color: #173d18;

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

.sbwae-cta:hover {
    transform: translateX(10px);
    background: #c99b35;
}


.sbwae-cta-icon {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

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

    background: #173d18;

    color: #c99b35;

    font-size: 24px;
}

.sbwae-cta-text {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding-left: 20px;
}

.sbwae-cta-text span {
    font-size: 13px;
    letter-spacing: 2.5px;
    font-weight: 700;

    color: rgba(23, 61, 24, 0.5);
}

.sbwae-cta-text strong {
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 400;
}

.sbwae-cta-arrow {
    margin-left: auto;

    width: 40px;
    height: 40px;

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

    background: #173d18;
    color: #c99b35;

    font-size: 18px;
}


/* =========================================================
   NOTE
========================================================= */

.sbwae-note {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 25px;
}

.sbwae-note > span {
    color: #c99b35;
    font-size: 13px;
}

.sbwae-note p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    color:white;
}


/* =========================================================
   RIGHT SIDE TYPE
========================================================= */

.sbwae-side-type {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 8px;

    border-left: 1px solid rgba(248, 245, 236, 0.18);
}

.sbwae-side-type span {
    writing-mode: vertical-rl;

    font-size: 13px;
    letter-spacing: 3px;
    font-weight: 700;

    color: rgba(248, 245, 236, 0.3);
}

.sbwae-side-type span:nth-child(2) {
    color: #c99b35;
}


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

.sbwae-bottom {
    display: grid;
    grid-template-columns: 1fr 1.7fr 1fr;

    align-items: center;

    gap: 30px;

    padding-top: 28px;

    border-top: 1px solid rgba(23, 61, 24, 0.18);
}

.sbwae-bottom > span {
    font-size: 13px;
    letter-spacing: 2.5px;
    font-weight: 700;

    color: rgba(23, 61, 24, 0.45);
}

.sbwae-bottom > span:last-child {
    text-align: right;
}

.sbwae-bottom p {
    margin: 0;

    text-align: center;

    font-family: Georgia, serif;

    font-size: 25px;
}

.sbwae-bottom p em {
    color: #a77a1d;
}



/* =========================================================
   NIRAYA — PRODUCT NAVIGATION
   Premium Editorial Product Journey
========================================================= */

.niraya-product-nav {
    position: relative;
    background: #f8f5ec;
    padding: 105px 6% 90px;
    overflow: hidden;
}


/* INNER
========================================================= */

.npnav-inner {
    max-width: 1450px;
    margin: 0 auto;
}


/* TOP
========================================================= */

.npnav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 24px;
    border-bottom: 1px solid rgba(23, 61, 24, 0.18);
}


.npnav-label {
    font-size: 13px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #173d18;
}


.npnav-count {
    font-size: 11px;
    letter-spacing: 2px;
    color: #a77a1d;
    font-weight: 700;
}


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

.npnav-main {
    min-height: 470px;

    display: grid;
    grid-template-columns: 1fr 1.05fr 1fr;
    align-items: center;

    border-bottom: 1px solid rgba(23, 61, 24, 0.18);
}


/* PRODUCT ITEMS
========================================================= */

.npnav-item {
    min-height: 350px;

    display: flex;
    align-items: center;
    gap: 30px;

    text-decoration: none;
    color: inherit;

    transition: all 0.45s ease;
}


.npnav-prev {
    justify-content: flex-start;
    padding-right: 40px;
}


.npnav-next {
    justify-content: flex-end;
    padding-left: 40px;
}


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

.npnav-image-wrap {
    width: 150px;
    height: 190px;

    flex-shrink: 0;

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

    background: #173d18;

    position: relative;
    overflow: hidden;

    transition: transform 0.45s ease;
}


.npnav-image-wrap::after {
    content: "";
    position: absolute;

    width: 90px;
    height: 90px;

    border: 1px solid rgba(248, 245, 236, 0.3);
    border-radius: 50%;

    pointer-events: none;
}


.npnav-image-wrap img {
    width: 105px;
    height: 135px;

    object-fit: contain;

    position: relative;
    z-index: 2;

    transition: transform 0.45s ease;
}


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

.npnav-item:hover .npnav-image-wrap {
    transform: translateY(-8px);
}


.npnav-item:hover .npnav-image-wrap img {
    transform: scale(1.06);
}


/* INFO
========================================================= */

.npnav-info {
    max-width: 180px;
}


.npnav-direction {
    display: block;

    font-size: 9px;
    letter-spacing: 2px;

    color: #a77a1d;

    margin-bottom: 18px;

    font-weight: 700;
}


.npnav-info h3 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 36px;
    line-height: 1.05;

    font-weight: 400;

    color: #173d18;

    transition: color 0.3s ease;
}


.npnav-item:hover h3 {
    color: #a77a1d;
}


.npnav-info p {
    margin: 12px 0 0;

    font-size: 14px;
    line-height: 1.6;

    color:black;
}


/* CENTER
========================================================= */

.npnav-center {
    min-height: 350px;

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

    text-align: center;

    position: relative;

    padding: 40px;

    border-left: 1px solid rgba(23, 61, 24, 0.12);
    border-right: 1px solid rgba(23, 61, 24, 0.12);
}


.npnav-center-small {
    font-size: 13px;
    letter-spacing: 4px;

    color: #a77a1d;

    font-weight: 700;

    margin-bottom: 22px;
}


.npnav-center h2 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
font-style:italic;
    font-size: clamp(42px, 4vw, 65px);

    line-height: 0.95;

    font-weight: 600;

    color: #173d18;
}


.npnav-center h2 em {
    display: block;

    color: #a77a1d;

  font-family: Georgia, "Times New Roman", serif;
    font-style:italic;
    font-weight: 600;

    margin-top: 5px;
}


.npnav-line {
    width: 55px;
    height: 1px;

    background: #a77a1d;

    margin: 28px 0;
}


.npnav-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #173d18;

    text-decoration: none;

    font-size: 11px;
    letter-spacing: 1.5px;

    font-weight: 700;

    border-bottom: 1px solid #173d18;

    padding-bottom: 7px;

    transition: all 0.3s ease;
}


.npnav-all span {
    font-size: 16px;

    transition: transform 0.3s ease;
}


.npnav-all:hover {
    color: #a77a1d;
    border-color: #a77a1d;
}


.npnav-all:hover span {
    transform: translate(4px, -4px);
}


/* PRODUCT STRIP
========================================================= */

.npnav-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 28px;
}


.npnav-strip-item {
    min-height: 65px;

    display: grid;
    grid-template-columns: 35px 1fr auto;
    align-items: center;
    gap: 12px;

    padding: 10px 20px;

    text-decoration: none;

    border-right: 1px solid rgba(23, 61, 24, 0.14);

    color: #173d18;

    transition: all 0.3s ease;
}


.npnav-strip-item:last-child {
    border-right: none;
}


.npnav-strip-item > span {
    font-size: 12px;
    letter-spacing: 1px;

    color: #a77a1d;
}


.npnav-strip-item strong {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 20px;

    font-weight: 400;
}


.npnav-strip-item i {
    font-style: normal;
color: gray;
    font-size: 10px;
    letter-spacing: 1.5px;

    text-transform: uppercase;

    opacity: 0.45;
}


.npnav-strip-item:hover,
.npnav-strip-item.active {
    background: #173d18;
    color: #f8f5ec;
}


.npnav-strip-item:hover > span,
.npnav-strip-item.active > span {
    color: #d1a74a;
}


.npnav-strip-item:hover i,
.npnav-strip-item.active i {
    opacity: 0.8;
}








/* =========================================================
   NIRAYA SEA BUCKTHORN — MOBILE RESPONSIVE
   Desktop CSS remains unchanged
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL
    ===================================================== */

    .niraya-sb-product-hero,
    .niraya-sb-about,
    .niraya-sb-benefits-v2,
    .niraya-sb-ingredients-v2,
    .niraya-sb-howto-new,
    .niraya-sb-why-unique,
    .niraya-sb-wa-editorial,
    .niraya-product-nav {
        width: 100%;
        box-sizing: border-box;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .niraya-sb-product-hero {
        min-height: auto;
        padding: 45px 20px 55px;
    }

    .sb-product-hero-inner {
        min-height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .sb-product-hero-content {
        width: 100%;
        padding-right: 0;
        box-sizing: border-box;
        margin-top:65px;
    }

    .sb-product-label {
        margin-top: 10px;
        gap: 9px;
        font-size: 10px;
        letter-spacing: 2px;
    }

    .sb-product-label span {
        width: 25px;
    }

    .sb-product-title {
        width: 100%;
        margin-top: 25px;
        font-size:57px !important;
        line-height: .82;
        letter-spacing: -4px;
    }

    .sb-product-title em {
        margin-left: 35px;
        letter-spacing: -3px;
    }

    .sb-product-subtitle {
        margin-top: 25px;
        font-size: 19px;
        line-height: 1.4;
    }

    .sb-product-description {
        max-width: 100%;
        margin-top: 15px;
        font-size: 15px;
        line-height: 1.75;
    }

    .sb-product-actions {
        flex-wrap: wrap;
        gap: 18px;
        margin-top: 25px;
    }

    .sb-product-primary {
        min-height: 50px;
        padding-left: 17px;
        gap: 15px;
        font-size: 13px;
    }

    .sb-product-primary span {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .sb-product-secondary {
        font-size: 13px;
    }

    .sb-product-meta {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
        margin-top: 35px;
        padding-top: 17px;
    }

    .sb-product-meta small {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .sb-product-meta span {
        font-size: 12px;
    }


    /* HERO VISUAL */

    .sb-product-hero-visual {
        width: 100%;
        height: 430px;
        overflow: hidden;
    }

    .sb-product-hero-visual::before {
        width: 300px;
        height: 300px;
    }

    .sb-product-hero-visual::after {
        width: 285px;
        height: 285px;
    }

    .sb-product-main-image {
        width: 330px;
        max-width: 90%;
        height: 350px;
        margin-top: -10px;
    }

    .sb-product-badge {
        top: 25px;
        left: 15px;
    }

    .sb-product-badge span {
        font-size: 20px;
    }

    .sb-product-badge small {
        font-size: 6px;
    }

    .sb-product-name-card {
        right: 10px;
        bottom: 25px;
        padding-left: 10px;
    }

    .sb-product-name-card span {
        font-size: 6px;
    }

    .sb-product-name-card strong {
        font-size: 10px;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .niraya-sb-about {
        padding: 70px 20px;
    }

    .sb-about-inner {
        min-height: auto;
        display: flex;
        flex-direction: column;
    }

    .sb-about-intro {
        min-height: 430px;
        height: auto;
        padding: 35px 25px;
    }

    .sb-about-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .sb-about-intro h2 {
        font-size:35px;
        line-height: .88;
        letter-spacing: -3px;
    }

    .sb-about-intro h2 em {
        margin-top: 8px;
        font-size:31px;
        letter-spacing: -2px;
    }

    .sb-about-index {
        gap: 9px;
    }

    .sb-about-index span {
        font-size: 19px;
    }

    .sb-about-index i {
        width: 25px;
    }

    .sb-about-index small {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .sb-about-content {
        padding: 40px 5px 10px;
    }

    .sb-about-content::before {
        margin-bottom: 20px;
        font-size: 10px;
        letter-spacing: 2px;
    }

    .sb-about-content .sb-about-lead {
        max-width: 100%;
        font-size: 23px;
        line-height: 1.3;
        letter-spacing: -0.5px;
    }

    .sb-about-content > p:not(.sb-about-lead) {
        max-width: 100%;
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.8;
    }

    .sb-about-details {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 30px;
    }

    .sb-about-detail {
        min-height: auto;
        padding: 20px;
    }

    .sb-about-detail span {
        margin-bottom: 15px;
        font-size: 18px;
    }

    .sb-about-detail strong {
        font-size: 13px;
    }

    .sb-about-detail p {
        font-size: 12px;
    }

    .sb-about-statement {
        margin-top: 35px;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .sb-about-statement span {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .sb-about-statement p {
        font-size: 18px;
        line-height: 1.45;
    }


    /* =====================================================
       BENEFITS
    ===================================================== */

    .niraya-sb-benefits-v2 {
        padding: 75px 20px 60px;
    }

    .sb-benefits-v2-top {
        margin-bottom: 50px;
    }

    .sb-benefits-v2-kicker {
        gap: 9px;
        margin-bottom: 25px;
    }

    .sb-benefits-v2-kicker span {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .sb-benefits-v2-kicker i {
        width: 25px;
    }

    .sb-benefits-v2-kicker small {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .sb-benefits-v2-title {
        display: block;
    }

    .sb-benefits-v2-title > span {
        display: block;
        padding-bottom: 12px;
        font-size: 10px;
        letter-spacing: 2px;
    }

    .sb-benefits-v2-title h2 {
        max-width: 100%;
        font-size:35px;
        line-height: .88;
        letter-spacing: -3px;
        text-align: left;
    }

    .sb-benefits-v2-layout {
        display: flex;
        flex-direction: column;
    }

    .sb-benefits-v2-intro {
        min-height: auto;
        padding: 30px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(23,61,24,.18);
        gap: 30px;
    }

    .sb-benefits-v2-word {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 45px;
        letter-spacing: -3px;
    }

    .sb-benefits-v2-intro > p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.75;
    }

    .sb-benefits-v2-badge {
        width: 105px;
        height: 105px;
        align-self: flex-end;
    }

    .sb-benefits-v2-badge span {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .sb-benefits-v2-badge strong {
        font-size: 16px;
    }

    .sb-benefits-v2-list {
        padding-left: 0;
    }

    .sb-benefit-v2 {
        min-height: auto;
        grid-template-columns: 35px 1fr 35px;
        gap: 10px;
    }

    .sb-benefit-v2:hover {
        padding-left: 0;
    }

    .sb-benefit-v2-no {
        padding-top: 28px;
        font-size: 10px;
    }

    .sb-benefit-v2-main {
        padding: 28px 0;
    }

    .sb-benefit-v2-main > span {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .sb-benefit-v2-main h3 {
        font-size: 24px;
        line-height: 1.1;
    }

    .sb-benefit-v2-main p {
        font-size: 14px;
        line-height: 1.65;
    }

    .sb-benefit-v2-mark {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    .sb-benefits-v2-footer {
        margin-top: 35px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .sb-benefits-v2-footer > span {
        font-size: 10px;
    }

    .sb-benefits-v2-footer > div {
        width: 100%;
    }

    .sb-benefits-v2-footer p {
        font-size: 19px;
    }


    /* =====================================================
       INGREDIENTS
    ===================================================== */

    .niraya-sb-ingredients-v2 {
        padding: 75px 20px 60px;
    }

    .sb-ing-v2-header {
        margin-bottom: 50px;
    }

    .sb-ing-v2-number {
        gap: 9px;
        margin-bottom: 25px;
    }

    .sb-ing-v2-number span {
        font-size: 10px;
    }

    .sb-ing-v2-number i {
        width: 25px;
    }

    .sb-ing-v2-number small {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .sb-ing-v2-heading {
        display: block;
    }

    .sb-ing-v2-heading > span {
        display: block;
        margin-bottom: 15px;
        font-size: 10px;
    }

    .sb-ing-v2-heading h2 {
        width: 100%;
        font-size:28px;
        line-height: .88;
        letter-spacing: -3px;
        text-align: left;
    }

    .sb-ing-v2-anatomy {
        min-height: auto;
        display: flex;
        flex-direction: column;
        border-top: 1px solid rgba(248,245,236,.13);
        border-bottom: 0;
    }

    .sb-ing-v2-side {
        width: 100%;
    }

    .sb-ing-v2-left,
    .sb-ing-v2-right {
        padding: 0;
    }

    .sb-ing-v2-left {
        order: 1;
    }

    .sb-ing-v2-center {
        order: 2;
    }

    .sb-ing-v2-right {
        order: 3;
    }

    .sb-ing-v2-info {
        padding: 25px 0;
        grid-template-columns: 30px 1fr;
        gap: 10px;
    }

    .sb-ing-v2-info-no {
        font-size: 10px;
    }

    .sb-ing-v2-info small {
        margin-bottom: 8px;
        font-size: 9px;
    }

    .sb-ing-v2-info h3 {
        font-size: 22px;
    }

    .sb-ing-v2-info p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.65;
    }

    .sb-ing-v2-center {
        width: 100%;
        height: 460px;
        min-height: 460px;
        margin: 20px 0;
    }

    .sb-ing-v2-product {
        width: 270px;
        height: 390px;
    }

    .sb-ing-v2-product-label {
        top: 23px;
        left: 23px;
        font-size: 10px;
        letter-spacing: 2px;
    }

    .sb-ing-v2-product img {
        width: 72%;
        max-width: 210px;
    }

    .sb-ing-v2-product-bottom {
        left: 22px;
        right: 22px;
        bottom: 20px;
    }

    .sb-ing-v2-product-bottom span {
        font-size: 9px;
    }

    .sb-ing-v2-product-bottom strong {
        font-size: 15px;
    }

    .orbit-one {
        width: 360px;
        height: 360px;
    }

    .orbit-two {
        width: 400px;
        height: 250px;
    }

    .sb-ing-v2-bottom {
        margin-top: 35px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .sb-ing-v2-bottom-line {
        width: 100%;
    }

    .sb-ing-v2-bottom > span {
        font-size: 10px;
    }

    .sb-ing-v2-bottom p {
        font-size: 19px;
    }


    /* =====================================================
       HOW TO USE
    ===================================================== */

    .niraya-sb-howto-new {
        padding: 75px 20px 65px;
    }

    .sb-howto-new-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 45px;
    }

    .sb-howto-new-label {
        padding-bottom: 0;
        gap: 9px;
    }

    .sb-howto-new-label span {
        font-size: 20px;
    }

    .sb-howto-new-label i {
        width: 25px;
    }

    .sb-howto-new-label small {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .sb-howto-new-heading span {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .sb-howto-new-heading h2 {
        font-size: clamp(48px, 15vw, 72px);
        line-height: .88;
        letter-spacing: -3px;
    }

    .sb-howto-new-intro {
        max-width: 100%;
        margin: 0;
        font-size: 15px;
        line-height: 1.75;
    }

    .sb-howto-new-ritual {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .sb-howto-new-visual {
        min-height: 450px;
        height: 450px;
    }

    .sb-howto-new-circle {
        width: 300px;
        height: 300px;
    }

    .sb-howto-new-orbit {
        transform-origin: center;
    }

    .orbit-a {
        width: 370px;
        height: 370px;
    }

    .orbit-b {
        width: 420px;
        height: 260px;
    }

    .sb-howto-new-number {
        left: 22px;
        top: 25px;
        font-size: 15px;
    }

    .sb-howto-new-product {
        width: 220px;
        height: 310px;
    }

    .sb-howto-new-caption {
        left: 22px;
        bottom: 25px;
    }

    .sb-howto-new-caption span {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .sb-howto-new-caption strong {
        font-size: 10px;
    }

    .sb-howto-new-content {
        padding: 30px 22px;
    }

    .sb-howto-new-card {
        padding: 24px 0;
    }

    .sb-howto-new-card:first-child {
        padding-top: 5px;
    }

    .sb-howto-new-card-top {
        gap: 10px;
        margin-bottom: 10px;
    }

    .sb-howto-new-card-top span {
        font-size: 17px;
    }

    .sb-howto-new-card-top small {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .sb-howto-new-card h3 {
        font-size: 24px;
    }

    .sb-howto-new-card p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.7;
    }

    .sb-howto-new-card.active {
        padding-left: 15px;
    }

    .sb-howto-new-reminder {
        gap: 12px;
        margin-top: 20px;
        padding: 15px;
    }

    .sb-howto-reminder-mark {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    .sb-howto-new-reminder span {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .sb-howto-new-reminder p {
        font-size: 12px;
    }

    .sb-howto-new-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-top: 30px;
    }

    .sb-howto-new-bottom > span {
        font-size: 10px;
    }

    .sb-howto-new-line {
        width: 100%;
    }

    .sb-howto-new-bottom p {
        font-size: 18px;
    }


    /* =====================================================
       WHY NIRAYA
    ===================================================== */

    .niraya-sb-why-unique {
        padding: 75px 20px 65px;
    }

    .sbwu-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding-bottom: 20px;
    }

    .sbwu-label {
        gap: 9px;
    }

    .sbwu-label span {
        font-size: 20px;
    }

    .sbwu-label i {
        width: 25px;
    }

    .sbwu-label small {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .sbwu-header > p {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .sbwu-canvas {
        height: auto;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .sbwu-center {
        position: relative;
        left: auto;
        top: auto;
        width: 300px;
        height: 300px;
        transform: none;
        margin: 0 auto 45px;
    }

    .ring-outer {
        width: 290px;
        height: 290px;
    }

    .ring-middle {
        width: 235px;
        height: 235px;
    }

    .ring-inner {
        width: 175px;
        height: 175px;
    }

    .sbwu-seal {
        width: 130px;
        height: 130px;
    }

    .sbwu-seal img {
        width: 105px;
    }

    .sbwu-center-caption {
        bottom: -30px;
        font-size: 9px;
        letter-spacing: 2px;
    }

    .sbwu-point {
        position: relative;
        width: 100%;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        gap: 12px;
    }

    .sbwu-point-no {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .sbwu-point small {
        margin-bottom: 6px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .sbwu-point h3 {
        font-size: 25px;
    }

    .sbwu-point p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.65;
    }

    .sbwu-line,
    .sbwu-botanical {
        display: none;
    }

    .sbwu-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding-top: 30px;
        margin-top: 35px;
    }

    .sbwu-bottom > span {
        font-size: 10px;
    }

    .sbwu-bottom h2 {
        font-size: 25px;
        line-height: 1.1;
    }

    .sbwu-bottom p {
        font-size: 13px;
        line-height: 1.7;
    }


    /* =====================================================
       WHATSAPP CTA
    ===================================================== */

    .niraya-sb-wa-editorial {
        padding: 70px 20px 55px;
    }

    .sbwae-top {
        padding-bottom: 18px;
    }

    .sbwae-top-left {
        gap: 8px;
    }

    .sbwae-top-left span {
        font-size: 20px;
    }

    .sbwae-top-left i {
        width: 25px;
    }

    .sbwae-top-left small,
    .sbwae-top-right {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .sbwae-top-right {
        display: none;
    }

    .sbwae-poster {
        display: flex;
        flex-direction: column;
        min-height: auto;
        margin-top: 30px;
    }

    .sbwae-panel {
        min-height: 90px;
        border-right: 0;
        border-bottom: 1px solid rgba(248,245,236,.18);
    }

    .sbwae-panel-number {
        top: 20px;
        left: 20px;
        font-size: 15px;
    }

    .sbwae-vertical-text {
        position: absolute;
        left: 50%;
        top: 45px;
        transform: translate(-50%, -50%);
        width: auto;
        white-space: nowrap;
        font-size: 8px;
        letter-spacing: 3px;
    }

    .sbwae-symbol {
        left: auto;
        right: 20px;
        bottom: 14px;
        transform: none;
        width: 42px;
        height: 42px;
        font-size: 19px;
    }

    .sbwae-panel-bottom {
        display: none;
    }

    .sbwae-main {
        padding: 45px 22px;
    }

    .sbwae-small-title {
        margin-bottom: 15px;
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .sbwae-main h2 {
        max-width: 100%;
        font-size:42px;
        line-height: .88;
        letter-spacing: -3px;
    }

    .sbwae-main > p {
        max-width: 100%;
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.75;
    }

    .sbwae-cta {
        width: 100%;
        margin-top: 28px;
        padding: 10px;
    }

    .sbwae-cta-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .sbwae-cta-text {
        padding-left: 12px;
    }

    .sbwae-cta-text span {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .sbwae-cta-text strong {
        font-size: 16px;
    }

    .sbwae-cta-arrow {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .sbwae-note {
        margin-top: 18px;
        align-items: flex-start;
    }

    .sbwae-note p {
        font-size: 12px;
    }

    .sbwae-side-type {
        display: none;
    }

    .sbwae-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-top: 22px;
    }

    .sbwae-bottom > span,
    .sbwae-bottom > span:last-child {
        text-align: left;
        font-size: 9px;
    }

    .sbwae-bottom p {
        text-align: left;
        font-size: 18px;
    }


    /* =====================================================
       PRODUCT NAVIGATION
    ===================================================== */

    .niraya-product-nav {
        padding: 70px 20px 60px;
    }

    .npnav-top {
        padding-bottom: 18px;
    }

    .npnav-label {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .npnav-count {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .npnav-main {
        min-height: auto;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid rgba(23,61,24,.18);
    }

    .npnav-center {
        order: 1;
        width: 100%;
        min-height: 260px;
        padding: 35px 10px;
        box-sizing: border-box;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(23,61,24,.12);
    }

    .npnav-center-small {
        font-size: 9px;
        letter-spacing: 2.5px;
        margin-bottom: 15px;
    }

    .npnav-center h2 {
        font-size: 42px;
        line-height: .9;
    }

    .npnav-line {
        width: 40px;
        margin: 20px 0;
    }

    .npnav-all {
        font-size: 9px;
    }

    .npnav-item {
        width: 100%;
        min-height: 220px;
        gap: 18px;
        box-sizing: border-box;
    }

    .npnav-prev {
        order: 2;
        padding: 25px 0;
        justify-content: flex-start;
        border-bottom: 1px solid rgba(23,61,24,.12);
    }

    .npnav-next {
        order: 3;
        padding: 25px 0;
        justify-content: flex-start;
    }

    .npnav-image-wrap {
        width: 105px;
        height: 140px;
    }

    .npnav-image-wrap::after {
        width: 70px;
        height: 70px;
    }

    .npnav-image-wrap img {
        width: 75px;
        height: 105px;
    }

    .npnav-info {
        max-width: calc(100% - 125px);
    }

    .npnav-direction {
        margin-bottom: 10px;
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .npnav-info h3 {
        font-size: 27px;
        line-height: 1;
    }

    .npnav-info p {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.5;
    }

    .npnav-strip {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 20px;
    }

    .npnav-strip-item {
        min-height: 55px;
        grid-template-columns: 25px 1fr;
        gap: 8px;
        padding: 8px 10px;
        border-right: 1px solid rgba(23,61,24,.14);
        border-bottom: 1px solid rgba(23,61,24,.14);
    }

    .npnav-strip-item:nth-child(2n) {
        border-right: none;
    }

    .npnav-strip-item > span {
        font-size: 9px;
    }

    .npnav-strip-item strong {
        font-size: 15px;
    }

    .npnav-strip-item i {
        display: none;
    }

}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

    .niraya-sb-product-hero,
    .niraya-sb-about,
    .niraya-sb-benefits-v2,
    .niraya-sb-ingredients-v2,
    .niraya-sb-howto-new,
    .niraya-sb-why-unique,
    .niraya-sb-wa-editorial,
    .niraya-product-nav {
        padding-left: 15px;
        padding-right: 15px;
    }

    .sb-product-title,
    .sb-benefits-v2-title h2,
    .sb-ing-v2-heading h2,
    .sb-howto-new-heading h2,
    .sbwae-main h2 {
        font-size: 48px;
    }

    .sb-product-main-image {
        width: 300px;
    }

    .sb-ing-v2-product {
        width: 250px;
    }

    .sbwu-center {
        transform: scale(.9);
        margin-left: auto;
        margin-right: auto;
    }

    .npnav-image-wrap {
        width: 90px;
        height: 125px;
    }

    .npnav-info {
        max-width: calc(100% - 108px);
    }

    .npnav-info h3 {
        font-size: 23px;
    }

}