/* =====================================================
   SOFTLYSTUDIOS — PREMIUM SINGLE-ROW HEADER

   Theme: Ivory / Cream / Forest Green
   Desktop: One Horizontal Row
   Mobile: Visible Swipeable Navigation
   Motion: Subtle & Refined
===================================================== */

.site-header.ss-one-header {
    --sh-green: #28513a;
    --sh-dark: #1e402d;
    --sh-text: #526757;
    --sh-ivory: #fffefa;
    --sh-border: #e2e9df;

    position: sticky !important;
    top: 0;
    z-index: 9999 !important;

    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 12px 20px !important;

    background: rgba(249, 249, 245, .96) !important;
    border: 0 !important;
    box-shadow: none !important;

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

.ss-one-header,
.ss-one-header * {
    box-sizing: border-box;
}

/* ==================================
   MAIN ROUNDED BAR
================================== */

.ss-one-header .ss-one-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;

    gap: clamp(12px, 1.4vw, 24px);

    width: min(1570px, 100%);
    max-width: 1570px;
    min-height: 77px;

    margin: 0 auto;
    padding: 10px 22px;

    background: var(--sh-ivory);
    border: 1px solid var(--sh-border);
    border-radius: 22px;

    box-shadow:
        0 9px 30px rgba(35, 71, 43, .055),
        0 2px 8px rgba(35, 71, 43, .02);

    overflow: visible;

    animation: ss-one-entrance .65s
        cubic-bezier(.2, .8, .2, 1) both;

    transition:
        box-shadow .3s ease,
        border-color .3s ease;
}

/* SCROLL SHADOW */

.ss-one-header.ss-is-scrolled .ss-one-shell {
    border-color: #dce6d9;

    box-shadow:
        0 13px 37px rgba(30, 66, 41, .1),
        0 3px 8px rgba(30, 66, 41, .025);
}

/* ==================================
   ORIGINAL BRAND LOGO
================================== */

.ss-one-header .ss-one-logo {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;

    flex: 0 0 135px;
    width: 135px;
    min-width: 135px;
    max-width: 135px;

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

    background: transparent;
    line-height: 0;
    text-decoration: none;
}

.ss-one-header .ss-one-logo img {
    display: block;

    width: 100%;
    height: auto;
    max-height: 61px;

    object-fit: contain;
    object-position: left center;

    /* Brand artwork in forest green */
    filter:
        brightness(0)
        saturate(100%)
        invert(24%)
        sepia(15%)
        saturate(1150%)
        hue-rotate(88deg)
        brightness(89%)
        contrast(93%);

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.ss-one-header .ss-one-logo:hover img {
    transform: translateY(-2px);
    opacity: .88;
}

/* ==================================
   MAIN NAVIGATION — SAME ROW
================================== */

.ss-one-header .ss-one-links {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap !important;

    flex: 1 1 auto;
    min-width: 0;

    gap: clamp(10px, 1.18vw, 22px);

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

    background: transparent !important;
    border: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible;
}

.ss-one-header .ss-one-links > a {
    position: relative;

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

    flex: 0 0 auto;

    min-height: 37px;
    margin: 0 !important;
    padding: 8px 0 !important;

    color: var(--sh-text) !important;
    background: transparent !important;

    font: inherit;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3;

    text-decoration: none !important;
    white-space: nowrap !important;

    opacity: 1 !important;
    visibility: visible !important;

    transition: color .25s ease;
}

.ss-one-header .ss-one-links > a:hover,
.ss-one-header .ss-one-links > a.is-active {
    color: var(--sh-green) !important;
}

/* ANIMATED UNDERLINE */

.ss-one-header .ss-one-links > a::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;

    height: 2px;
    border-radius: 3px;
    background: #477a55;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .3s
        cubic-bezier(.2, .8, .2, 1);
}

.ss-one-header .ss-one-links > a:hover::after,
.ss-one-header .ss-one-links > a.is-active::after {
    transform: scaleX(1);
}

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

.ss-one-header .ss-one-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex: 0 0 auto;

    gap: 11px;
    min-width: 0;
}

/* DETAILS / SUMMARY */

.ss-one-header .ss-one-dropdown {
    position: relative;
    display: block;
    flex: 0 0 auto;
}

.ss-one-header .ss-one-dropdown summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.ss-one-header .ss-one-dropdown summary::-webkit-details-marker {
    display: none;
}

.ss-one-header .ss-one-dropdown summary::marker {
    content: "";
}

/* ==================================
   MY SPACE BUTTON
================================== */

.ss-one-header .ss-one-space-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;
    min-height: 38px;
    padding: 7px 4px;

    border: 0;
    background: transparent;

    color: #4d6854;

    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;

    transition: color .2s ease;
}

.ss-one-header .ss-one-space-trigger:hover,
.ss-one-header .ss-one-space[open] .ss-one-space-trigger {
    color: #23583a;
}

.ss-one-header .ss-one-space-trigger svg {
    display: block;
    flex: 0 0 17px;

    width: 17px;
    height: 17px;
}

.ss-one-header .ss-one-space-trigger .ss-one-chevron {
    flex-basis: 12px;
    width: 12px;
    height: 12px;

    transition: transform .25s ease;
}

.ss-one-header .ss-one-space[open] .ss-one-chevron {
    transform: rotate(180deg);
}

/* ==================================
   BAG — COMPACT
================================== */

.ss-one-header .ss-one-bag {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    gap: 5px !important;
    min-width: 0 !important;
    min-height: 39px;

    margin: 0 !important;
    padding: 7px 4px !important;

    border: 0 !important;
    background: transparent !important;
    color: #315640 !important;

    font-family: inherit;
    font-size: 12px;
    font-weight: 750;

    cursor: pointer;
    white-space: nowrap;

    transition: transform .25s ease;
}

.ss-one-header .ss-one-bag:hover {
    transform: translateY(-2px);
}

.ss-one-header .ss-one-bag > svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.ss-one-header .ss-one-bag .ss-header-cart-label {
    display: inline;
    font-size: 12px;
}

.ss-one-header .ss-one-bag .ss-header-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    min-height: 20px;

    padding: 2px 5px;

    border-radius: 50px;
    background: #e7f0e3;
    color: #305d3c;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

/* ==================================
   ACCOUNT ICON ONLY
================================== */

.ss-one-header .ss-one-account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 9px;

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

    background: #f5f8f2;
    color: #315a40;

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

.ss-one-header .ss-one-account-trigger:hover,
.ss-one-header .ss-one-account[open]
.ss-one-account-trigger {
    background: #eaf3e6;
    border-color: #c8dfc6;
    transform: translateY(-1px);
}

.ss-one-header .ss-one-account-trigger svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* ==================================
   COMPACT ANALYZE BUTTON
================================== */

.ss-one-header .ss-one-analyze {
    position: relative;
    isolation: isolate;
    overflow: hidden;

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

    gap: 9px;

    flex: 0 0 auto;

    min-height: 41px;
    padding: 10px 16px;

    border: 1px solid #28513a;
    border-radius: 11px;

    background: #28513a;
    color: #fff !important;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;

    white-space: nowrap;
    text-decoration: none !important;

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

.ss-one-header .ss-one-analyze:hover {
    background: #193e29;
    color: white !important;

    transform: translateY(-2px);
    box-shadow: 0 8px 19px rgba(38, 76, 45, .17);
}

.ss-one-header .ss-one-analyze span {
    font-size: 16px;
    font-weight: 500;
}

/* ==================================
   SHARED DROPDOWN PANELS
================================== */

.ss-one-header .ss-one-menu {
    position: absolute;
    z-index: 100;

    top: calc(100% + 13px);
    right: 0;

    display: grid;
    gap: 3px;

    width: 225px;
    padding: 9px;

    border: 1px solid #e2e9df;
    border-radius: 15px;

    background: #fffefa;

    box-shadow:
        0 20px 48px rgba(33, 65, 42, .13);

    animation: ss-one-menu-in .22s ease both;
}

.ss-one-header .ss-one-menu::before {
    content: "";

    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;

    height: 14px;
}

.ss-one-header .ss-one-menu-caption {
    padding: 9px 11px 10px;

    color: #91a093;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;

    overflow-wrap: anywhere;
}

.ss-one-header .ss-one-menu > a,
.ss-one-header .ss-one-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    width: 100%;
    min-height: 40px;

    padding: 9px 10px;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: #3b5d45;

    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;

    text-align: left;
    text-decoration: none;
    cursor: pointer;

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

.ss-one-header .ss-one-menu > a:hover,
.ss-one-header .ss-one-menu button:hover {
    background: #edf5e9;
    color: #265139;
}

.ss-one-header .ss-one-menu-icon {
    display: inline-grid;
    place-items: center;

    flex: 0 0 25px;

    width: 25px;
    height: 25px;

    border-radius: 7px;

    background: #eff5ec;
    color: #4d7757;

    font-size: 15px;
}

.ss-one-header .ss-one-menu-text {
    flex: 1 1 auto;
}

.ss-one-header .ss-one-menu-arrow {
    color: #9ca99d;
    font-size: 14px;
}

.ss-one-header .ss-one-wishlist-count {
    display: inline-grid;
    place-items: center;

    min-width: 22px;
    min-height: 22px;
    padding: 3px 6px;

    border-radius: 50px;
    background: #e6f1e2;
    color: #3a7348;

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

.ss-one-header .ss-one-menu form {
    display: block;
    width: 100%;

    margin: 0;
    padding: 0;
}

.ss-one-header .ss-one-menu .ss-one-logout {
    color: #a05248;
}

.ss-one-header .ss-one-menu .ss-one-logout:hover {
    color: #923f37;
    background: #fff0ed;
}

/* ==================================
   RESPONSIVE DESKTOP
================================== */

@media (min-width: 1121px) and (max-width: 1450px) {
    .ss-one-header .ss-one-shell {
        gap: 12px;
        padding-inline: 17px;
    }

    .ss-one-header .ss-one-logo {
        flex-basis: 118px;
        width: 118px;
        min-width: 118px;
        max-width: 118px;
    }

    .ss-one-header .ss-one-links {
        gap: 11px;
    }

    .ss-one-header .ss-one-links > a,
    .ss-one-header .ss-one-space-trigger {
        font-size: 11px !important;
    }

    .ss-one-header .ss-one-actions {
        gap: 8px;
    }

    .ss-one-header .ss-one-analyze {
        padding-inline: 12px;
    }
}

/* ==================================
   TABLET: ALL PAGE NAMES STILL VISIBLE
   Horizontal swipe, no hamburger
================================== */

@media (max-width: 1120px) {
    .site-header.ss-one-header {
        padding: 10px 13px !important;
    }

    .ss-one-header .ss-one-shell {
        display: grid;

        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logo actions"
            "nav nav";

        gap: 8px 12px;

        padding: 10px 16px;
    }

    .ss-one-header .ss-one-logo {
        grid-area: logo;
    }

    .ss-one-header .ss-one-actions {
        grid-area: actions;
    }

    .ss-one-header .ss-one-links {
        grid-area: nav;

        justify-content: flex-start;

        width: 100%;
        max-width: 100%;

        gap: 21px;

        padding: 11px 2px 3px !important;
        border-top: 1px solid #edf0e9 !important;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ss-one-header .ss-one-links::-webkit-scrollbar {
        display: none;
    }
}

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

@media (max-width: 650px) {
    .site-header.ss-one-header {
        padding: 8px 9px !important;
    }

    .ss-one-header .ss-one-shell {
        padding: 9px 11px;
        border-radius: 17px;
        gap: 7px;
    }

    .ss-one-header .ss-one-logo {
        flex-basis: 110px;
        width: 110px;
        min-width: 110px;
        max-width: 110px;
    }

    .ss-one-header .ss-one-logo img {
        max-height: 53px;
    }

    .ss-one-header .ss-one-actions {
        gap: 7px;
    }

    .ss-one-header .ss-one-space-trigger {
        width: 35px;
        height: 35px;
        padding: 7px;
        border-radius: 10px;
        background: #f3f7ef;
    }

    .ss-one-header .ss-one-space-trigger > span,
    .ss-one-header .ss-one-space-trigger
    .ss-one-chevron {
        display: none;
    }

    .ss-one-header .ss-one-bag {
        width: auto;
        min-height: 35px;
        padding: 5px 1px !important;
    }

    .ss-one-header .ss-one-bag
    .ss-header-cart-label {
        display: none;
    }

    .ss-one-header .ss-one-account-trigger {
        width: 35px;
        height: 35px;
        padding: 7px;
        border-radius: 10px;
    }

    .ss-one-header .ss-one-analyze {
        min-height: 35px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 10px;
    }

    .ss-one-header .ss-one-links {
        gap: 18px;
    }

    .ss-one-header .ss-one-links > a {
        min-height: 32px;
        font-size: 11px !important;
    }

    .ss-one-header .ss-one-menu {
        width: min(220px, calc(100vw - 35px));
    }
}

/* VERY SMALL PHONES */

@media (max-width: 390px) {
    .ss-one-header .ss-one-logo {
        flex-basis: 95px;
        width: 95px;
        min-width: 95px;
        max-width: 95px;
    }

    .ss-one-header .ss-one-actions {
        gap: 5px;
    }

    .ss-one-header .ss-one-analyze {
        gap: 0;
        font-size: 0;
        width: 35px;
        padding: 6px;
    }

    .ss-one-header .ss-one-analyze span {
        font-size: 19px;
    }
}

/* ==================================
   ANIMATIONS
================================== */

@keyframes ss-one-entrance {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

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

@keyframes ss-one-menu-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

/* KEYBOARD SUPPORT */

.ss-one-header a:focus-visible,
.ss-one-header button:focus-visible,
.ss-one-header summary:focus-visible {
    outline: 2px solid #77a385 !important;
    outline-offset: 3px;
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .ss-one-header *,
    .ss-one-header *::before,
    .ss-one-header *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}




/* =============================================
   SOFTLYSTUDIOS — SIGNATURE LOGO REVEAL
   Elegant • Minimal • Premium Skincare
============================================= */

.ss-one-header .ss-one-logo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Elegant left-to-right logo reveal */

.ss-one-header .ss-one-logo img {
    display: block;

    animation: softlySignatureReveal
        1.65s
        cubic-bezier(.22, 1, .36, 1)
        both;

    will-change: clip-path;
}

@keyframes softlySignatureReveal {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

/* Gentle light reflection */

.ss-one-header .ss-one-logo::after {
    content: "";

    position: absolute;
    inset: 0;

    width: 35%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .34),
        transparent
    );

    transform: translateX(-150%) skewX(-15deg);

    animation: softlySignatureGlow
        1.8s
        ease-out
        .35s
        both;

    pointer-events: none;
}

@keyframes softlySignatureGlow {
    0% {
        transform: translateX(-150%) skewX(-15deg);
        opacity: 0;
    }

    35% {
        opacity: .6;
    }

    100% {
        transform: translateX(400%) skewX(-15deg);
        opacity: 0;
    }
}

/* Refined hover */

.ss-one-header .ss-one-logo:hover img {
    transform: translateY(-2px) scale(1.015);
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .ss-one-header .ss-one-logo img,
    .ss-one-header .ss-one-logo::after {
        animation: none !important;
        clip-path: none !important;
        opacity: 1;
        will-change: auto;
    }
}

/* =====================================================
   SOFTLYSTUDIOS — FOREST GREEN NAVBAR + NAV ICONS
   Normal state: no golden circle, no glow, no fill.
   Preserve original layout, dropdowns, mobile scrolling.
===================================================== */
.site-header.ss-one-header {
    background: #f9f9f5 !important;
}
.ss-one-header .ss-one-shell {
    background: linear-gradient(135deg, #123526 0%, #102e22 50%, #091f17 100%) !important;
    border-color: rgba(232, 240, 223, .17);
}
.ss-one-header.ss-is-scrolled .ss-one-shell {
    border-color: rgba(232, 240, 223, .24);
}
.ss-one-header .ss-one-logo img {
    filter: brightness(0) invert(1);
}
.ss-one-header .ss-one-links > a {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    color: #e1e9dd !important;
}
.ss-one-header .ss-one-links > a:hover,
.ss-one-header .ss-one-links > a.is-active {
    color: #fffdf6 !important;
}
.ss-one-header .ss-one-links > a::after { background: #d4af37; }
.ss-one-header .ss-one-links .ss-nav-icon {
    display: block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: #e0c77a;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    transition: color .2s ease;
}
.ss-one-header .ss-one-links > a:hover .ss-nav-icon,
.ss-one-header .ss-one-links > a.is-active .ss-nav-icon { color: #f0d78e; }
.ss-one-header .ss-one-space-trigger,
.ss-one-header .ss-one-bag { color: #e1e9dd !important; }
.ss-one-header .ss-one-space-trigger:hover,
.ss-one-header .ss-one-space[open] .ss-one-space-trigger { color: #fffdf6; }
.ss-one-header .ss-one-bag .ss-header-cart-count {
    background: #dcebd8;
    color: #183b29;
}
.ss-one-header .ss-one-account-trigger {
    background: rgba(255,255,255,.08);
    border-color: rgba(232,240,223,.25);
    color: #f6f5eb;
}
.ss-one-header .ss-one-account-trigger:hover,
.ss-one-header .ss-one-account[open] .ss-one-account-trigger {
    background: rgba(255,255,255,.16);
    border-color: rgba(232,240,223,.4);
}
.ss-one-header .ss-one-analyze {
    background: #dcebd8;
    border-color: #dcebd8;
    color: #183b29 !important;
}
.ss-one-header .ss-one-analyze:hover {
    background: #fff;
    border-color: #fff;
    color: #183b29 !important;
}
/* Dropdown panels remain cream for readability. */
.ss-one-header .ss-one-menu { background: #fffefa; border-color: #e2e9df; }
@media (max-width: 1120px) {
    .ss-one-header .ss-one-links {
        border-top-color: rgba(232,240,223,.20) !important;
    }
}
@media (max-width: 650px) {
    .ss-one-header .ss-one-space-trigger {
        background: rgba(255,255,255,.08);
        color: #f6f5eb;
    }
    .ss-one-header .ss-one-links > a { gap: 5px; }
    .ss-one-header .ss-one-links .ss-nav-icon {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }
}

/* =====================================================
   NAV ICONS ABOVE LABELS — SIZE ONLY / LAYOUT REFINEMENT
   Keeps forest-green theme and original navigation behavior.
===================================================== */
.ss-one-header .ss-one-links > a {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center;
    line-height: 1.2;
}
.ss-one-header .ss-one-links .ss-nav-icon {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
}
@media (max-width: 650px) {
    .ss-one-header .ss-one-links > a {
        gap: 3px !important;
    }
    .ss-one-header .ss-one-links .ss-nav-icon {
        width: 21px !important;
        height: 21px !important;
        flex-basis: 21px !important;
    }
}





/* More breathing space between navbar items */
.ss-one-header .ss-one-links {
    gap: clamp(18px, 1.8vw, 30px) !important;
}

/* Space between icon and its text */
.ss-one-header .ss-one-links > a {
    gap: 7px !important;
    padding-inline: 3px !important;
}

/* Keep mobile navigation compact */
@media (max-width: 1120px) {
    .ss-one-header .ss-one-links {
        gap: 20px !important;
    }
}