/*
Theme Name: Stitch Hair Boutique
Theme URI: https://hairboutiquebyleila.com
Author: Leila
Author URI: https://hairboutiquebyleila.com
Description: Premium hair boutique theme for Leila.
Version: 1.5.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stitch-hair-boutique
Tags: e-commerce, woocommerce, custom-logo, custom-menu, featured-images, translation-ready
*/


/* =====================================================================
   RESET
   ===================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    overflow-x: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

input,
button,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}


/* =====================================================================
   DESIGN TOKENS
   ===================================================================== */

:root {
    /* Palette */
    --cream: #F5F3EE;
    --cream-dark: #EDE9E1;
    --cream-darker: #E3DFD7;
    --mocha: #6B5B4D;
    --mocha-light: #8C7C6D;
    --mocha-pale: rgba(107, 91, 77, 0.08);
    --ink: #2C2926;
    --ink-muted: #7A7471;
    --border: #DDD8CF;
    --border-subtle: rgba(221, 216, 207, 0.6);
    --white: #FFFFFF;
    /* Logo color (beige) */
    --logo-beige: #C8B69A;

    /* Type */
    --ff-serif: "Noto Serif", Georgia, serif;
    --ff-sans: "Manrope", system-ui, sans-serif;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi: 600;
    --fw-bold: 700;

    /* Fluid spacing */
    --s-0: .25rem;
    --s-1: .5rem;
    --s-2: .75rem;
    --s-3: 1rem;
    --s-4: 1.5rem;
    --s-5: 2rem;
    --s-6: 3rem;
    --s-7: 4rem;
    --s-8: 5rem;

    /* Layout */
    --max: 1200px;
    --nav-h: 70px;
    --radius: 8px;
    --radius-pill: 9999px;

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-o: cubic-bezier(.2, 0, 0, 1);
    --t-fast: 180ms;
    --t-base: 300ms;
    --t-slow: 500ms;
}


/* =====================================================================
   BASE
   ===================================================================== */

body {
    font-family: var(--ff-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--cream);
}

/* Fluid wrapper */
.shb-wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.site-container {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--s-3);
    z-index: 9999;
    padding: var(--s-1) var(--s-3);
    background: var(--mocha);
    color: var(--white);
    border-radius: var(--radius);
    font-size: .85rem;
}

.skip-link:focus {
    left: var(--s-3);
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 500;
    height: var(--nav-h);
    background: rgba(245, 243, 238, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--t-base) var(--ease);
}

.site-header.is-scrolled {
    box-shadow: 0 2px 24px rgba(44, 41, 38, .06);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: clamp(1.4rem, 3.8vw, 3.2rem);
    gap: var(--s-4);
}

.nav-main {
    min-width: 0;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 2.8vw, 3rem);
    margin-right: auto;
}

/* === Logo === */
.nav-logo {
    flex: 0 0 auto;
}

.site-logo,
.site-logo,
.site-logo a {
    font-family: var(--ff-serif);
    font-size: clamp(1.48rem, 3vw, 1.95rem);
    font-style: italic;
    font-weight: 500;
    color: var(--logo-beige);
    white-space: nowrap;
    letter-spacing: .015em;
}

/* Logo image sizing when an image is used instead of text */
.site-logo-img {
    max-height: 56px;
    width: auto;
    display: block;
}

/* On small screens we show the logo inside the mobile drawer only to avoid duplication
   (header has limited space and the drawer contains the brand mark). */
@media (max-width: 880px) {
    .nav-main .nav-logo {
        display: none;
    }

    .mobile-drawer .nav-logo {
        display: block;
        text-align: center;
        padding: 0.75rem 0;
    }
}

/* === Desktop nav links === */
.nav-links-desktop {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.9vw, 1.8rem); /* gap between the two menu ul blocks */
}

.nav-links-desktop--primary {
    min-width: 0;
}

.nav-links-desktop--primary>ul {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.9vw, 1.8rem);
}

.nav-links-desktop ul,
.nav-links-desktop .nav-links {
    display: flex;
    gap: clamp(1rem, 1.9vw, 1.8rem);
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-links-desktop li a {
    position: relative;
    font-family: var(--ff-sans);
    font-size: .78rem;
    font-weight: var(--fw-semi);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: .45rem .08rem;
    transition: color var(--t-fast);
}

/* Animated underline */
.nav-links-desktop li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--mocha);
    transition: width var(--t-base) var(--ease);
}

.nav-links-desktop li a:hover {
    color: var(--mocha);
}

.nav-links-desktop li a:hover::after {
    width: 100%;
}

/* Current page */
.nav-links-desktop li.current-menu-item a {
    color: var(--mocha);
    font-weight: var(--fw-semi);
}

.nav-links-desktop li.current-menu-item a::after {
    width: 100%;
}

/* Remove Instagram from the primary desktop nav — it lives in the utilities cluster */
.nav-links-desktop a[href*="instagram.com"],
.nav-links-desktop li a[href*="instagram.com"] {
    display: none !important;
}

/* In case the menu item still renders as text (some menus use an internal anchor),
   force any link pointing at instagram.com to display the masked instagram icon
   and hide the visible text for a compact icon-only appearance. */
.nav-links-desktop a[href*="instagram.com"] {
    position: relative;
    color: var(--mocha);
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}
.nav-links-desktop a[href*="instagram.com"]::before {
    content: "";
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    vertical-align: middle;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8A3.6 3.6 0 0 0 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6A3.6 3.6 0 0 0 16.4 4H7.6m4.4 3a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m5-1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8A3.6 3.6 0 0 0 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6A3.6 3.6 0 0 0 16.4 4H7.6m4.4 3a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m5-1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Mobile drawer: show icon instead of text for Instagram link */
.mobile-menu a[href*="instagram.com"] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.mobile-menu a[href*="instagram.com"] .shb-instagram-icon { margin-right: .45rem; }

.shb-instagram-icon {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    vertical-align: middle;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8A3.6 3.6 0 0 0 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6A3.6 3.6 0 0 0 16.4 4H7.6m4.4 3a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m5-1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8A3.6 3.6 0 0 0 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6A3.6 3.6 0 0 0 16.4 4H7.6m4.4 3a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m5-1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform var(--t-base) var(--ease);
}

/* Header instagram icon sizing in the right utilities cluster */
.nav-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--mocha);
}

.nav-instagram .shb-instagram-icon {
    width: 1.05rem;
    height: 1.05rem;
    background-color: currentColor;
}

.nav-instagram:hover {
    background: rgba(107,91,77,0.06);
}

.nav-links-desktop li a:hover .shb-instagram-icon {
    transform: scale(1.15);
}

/* === Nav right cluster === */
.nav-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .68rem;
    margin-left: 1.25rem;
    padding-left: .95rem;
    /* Separator: pseudo-element with fixed height avoids the full-container border */
    position: relative;
}

.nav-right::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 1px;
    background: var(--border-subtle);
}

/* Uniform size for all icon links in header */
.nav-right .nav-icon-link,
.nav-right .cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

/* === Language switcher (Polylang) === */
.nav-language-switcher {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    background: var(--cream-dark);
}

.nav-language-switcher .lang-link {
    padding: .42rem .5rem;
    font-size: .62rem;
    font-weight: var(--fw-bold);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ink-muted);
    line-height: 1;
}

.nav-language-switcher .lang-link+.lang-link {
    border-left: 1px solid var(--border);
}

.nav-language-switcher .lang-link.is-active {
    color: var(--mocha);
    background: var(--white);
}

/* === Currency switcher (nav) === */
.nav-currency-switcher {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.nav-currency-switcher>.material-symbols-outlined,
.mobile-currency-switcher>.material-symbols-outlined {
    font-size: 1rem;
    color: var(--mocha);
    font-variation-settings: 'FILL' 0, 'wght' 300;
}

/* Style FOX switcher core element */
.nav-currency-switcher select,
.nav-currency-switcher .woocs_switcher,
.nav-currency-switcher .woocs_select,
.mobile-currency-switcher select,
.mobile-currency-switcher .woocs_switcher,
.mobile-currency-switcher .woocs_select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--cream-dark) !important;
    border: 1px solid var(--border) !important;
    padding: .5rem 2rem .5rem .75rem !important;
    font-family: var(--ff-sans) !important;
    font-size: .75rem !important;
    font-weight: var(--fw-semi) !important;
    letter-spacing: .05em !important;
    color: var(--ink) !important;
    border-radius: var(--radius) !important;
    cursor: pointer;
    line-height: 1.4;
    outline: none !important;
    box-shadow: none !important;
    min-width: 8rem;
}

/* Custom caret */
.nav-currency-switcher::after {
    content: "";
    display: block;
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid var(--mocha-light);
    pointer-events: none;
}

.mobile-currency-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.mobile-currency-switcher::after {
    content: "";
    display: block;
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid var(--mocha-light);
    pointer-events: none;
}

/* Hide flags, question marks, images inside switcher */
.nav-currency-switcher img,
.nav-currency-switcher .woocs_flag_img,
.woocs_flag_img {
    display: none !important;
}

/* FOX dropdown menu */
.woocs_switcher_menu {
    border: 1px solid var(--border) !important;
    background: var(--cream) !important;
    box-shadow: 0 8px 24px rgba(44, 41, 38, .08) !important;
    border-radius: var(--radius) !important;
    font-family: var(--ff-sans) !important;
    font-size: .75rem !important;
}

.woocs_switcher_menu a {
    display: block !important;
    padding: .4rem .75rem !important;
    font-size: .72rem !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--ink-muted) !important;
}

.woocs_switcher_menu a:hover {
    background: var(--cream-dark) !important;
    color: var(--mocha) !important;
}

/* === Icon links (person, cart) === */
.nav-icon-link {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--mocha);
    transition: opacity var(--t-fast);
}

.nav-icon-link:hover {
    opacity: .7;
}

.nav-icon-link .material-symbols-outlined {
    font-size: 1.25rem;
    font-variation-settings: 'FILL' 0, 'wght' 300;
}

/* === Cart count badge === */
.cart-icon {
    display: flex;
    align-items: center;
    gap: .3rem;
    color: var(--mocha);
    transition: opacity var(--t-fast);
}

.cart-icon:hover {
    opacity: .7;
}

.cart-icon .material-symbols-outlined {
    font-size: 1.25rem;
    font-variation-settings: 'FILL' 0, 'wght' 300;
}

.cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .2rem;
    background: var(--mocha);
    color: var(--white);
    border-radius: 9999px;
    font-size: .65rem;
    font-weight: var(--fw-bold);
    line-height: 1;
}

/* === Hamburger === */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2rem;
    height: 2rem;
    padding: 0;
    flex-shrink: 0;
}

.hamburger-line {
    display: block;
    height: 1.5px;
    background: var(--mocha);
    transition: transform var(--t-base) var(--ease), opacity var(--t-base);
    transform-origin: center;
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}


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

.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(44, 41, 38, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
    backdrop-filter: blur(2px);
}

.mobile-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(340px, 88vw);
    height: 100dvh;
    background: var(--cream);
    z-index: 700;
    display: flex;
    flex-direction: column;
    transform: translateX(-102%);
    transition: transform var(--t-slow) var(--ease-o);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-drawer.is-open {
    transform: translateX(0);
}

.mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem clamp(1rem, 5vw, 1.5rem);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mobile-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    transition: background var(--t-fast);
}

.mobile-drawer__close:hover {
    background: var(--cream-dark);
}

.mobile-drawer__close .material-symbols-outlined {
    font-size: 1.3rem;
    color: var(--mocha);
}

.mobile-drawer__nav {
    flex: 1;
    padding: var(--s-4) clamp(1rem, 5vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

.mobile-drawer__nav ul {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.mobile-drawer__nav li {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.mobile-drawer.is-open .mobile-drawer__nav li {
    opacity: 1;
    transform: translateX(0);
}

.mobile-drawer.is-open .mobile-drawer__nav li:nth-child(1) {
    transition-delay: 40ms;
}

.mobile-drawer.is-open .mobile-drawer__nav li:nth-child(2) {
    transition-delay: 70ms;
}

.mobile-drawer.is-open .mobile-drawer__nav li:nth-child(3) {
    transition-delay: 100ms;
}

.mobile-drawer.is-open .mobile-drawer__nav li:nth-child(4) {
    transition-delay: 130ms;
}

.mobile-drawer.is-open .mobile-drawer__nav li:nth-child(5) {
    transition-delay: 160ms;
}

.mobile-drawer.is-open .mobile-drawer__nav li:nth-child(6) {
    transition-delay: 190ms;
}

.mobile-drawer__nav li a {
    display: block;
    font-size: .9rem;
    font-weight: var(--fw-medium);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: .75rem 0;
    border-bottom: 1px solid var(--border-subtle);
    transition: color var(--t-fast), padding-left var(--t-base) var(--ease);
}

.mobile-drawer__nav li a:hover {
    color: var(--mocha);
    padding-left: .5rem;
}

.mobile-drawer__nav li.current-menu-item a {
    color: var(--mocha);
}

/* Currency in drawer */
.mobile-currency-switcher {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
}

.mobile-currency-switcher>.material-symbols-outlined {
    display: none;
}

.mobile-language-switcher {
    display: inline-flex;
    width: fit-content;
    border: 1px solid var(--border);
    margin-top: .5rem;
    background: var(--cream-dark);
}

.mobile-language-switcher .lang-link {
    padding: .5rem .7rem;
    font-size: .62rem;
    font-weight: var(--fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.mobile-language-switcher .lang-link+.lang-link {
    border-left: 1px solid var(--border);
}

.mobile-language-switcher .lang-link.is-active {
    color: var(--mocha);
    background: var(--white);
}

.mobile-currency-switcher label {
    display: block;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-muted);
    margin-bottom: var(--s-1);
}

.mobile-currency-switcher select,
.mobile-currency-switcher .woocs_switcher,
.mobile-currency-switcher .woocs_select {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100%;
    background: var(--cream-dark) !important;
    border: 1px solid var(--border) !important;
    padding: .6rem 1rem !important;
    font-size: .8rem !important;
    font-weight: var(--fw-medium) !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink) !important;
    border-radius: var(--radius) !important;
    outline: none !important;
}

.mobile-currency-switcher img,
.mobile-currency-switcher .woocs_flag_img {
    display: none !important;
}

.mobile-drawer__footer {
    flex-shrink: 0;
    padding: var(--s-4) clamp(1rem, 5vw, 1.5rem);
    border-top: 1px solid var(--border);
}

.mobile-drawer__icons {
    display: flex;
    gap: var(--s-4);
}

.mobile-drawer__icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mocha);
    font-weight: var(--fw-semi);
    transition: opacity var(--t-fast);
}

.mobile-drawer__icon-link:hover {
    opacity: .7;
}

.mobile-drawer__icon-link .material-symbols-outlined {
    font-size: 1.3rem;
    font-variation-settings: 'FILL' 0, 'wght' 300;
}

.mobile-drawer a,
.mobile-drawer button,
.nav-hamburger,
.nav-icon-link,
.cart-icon {
    min-height: 44px;
}


/* =====================================================================
   BUTTONS
   ===================================================================== */

.shb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .9rem clamp(2rem, 5vw, 4rem);
    background: #B5A897; /* Soft mocha from reference */
    color: var(--white);
    font-family: var(--ff-sans);
    font-size: .75rem;
    font-weight: var(--fw-semi);
    letter-spacing: .12em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
}

.shb-btn:hover {
    background: #A69988;
    box-shadow: 0 6px 20px rgba(107, 91, 77, .25);
    transform: translateY(-1px);
}

.shb-btn:active {
    transform: scale(.98);
    box-shadow: none;
}

.shb-btn--sm {
    padding: .65rem .9rem;
    font-size: .65rem;
    width: 100%;
}

/* Generic button aliases used by Woo templates */
.btn,
a.btn,
button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .72rem 1rem;
    border: 1px solid var(--mocha);
    border-radius: var(--radius-pill);
    background: var(--mocha);
    color: var(--white);
    font-size: .72rem;
    font-weight: var(--fw-semi);
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.1;
    transition: background var(--t-base), color var(--t-base);
}

.btn::after,
a.btn::after,
button.btn::after {
    content: "arrow_right_alt";
    font-family: "Material Symbols Outlined";
    font-size: .92rem;
    font-variation-settings: 'FILL' 0, 'wght' 300;
    line-height: 1;
}

.btn:hover,
a.btn:hover,
button.btn:hover {
    background: transparent;
    color: var(--mocha);
}

.btn-block {
    width: 100%;
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary {
    background: transparent;
    color: var(--mocha);
}

.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
    background: var(--mocha);
    color: var(--white);
}


/* =====================================================================
   SECTION TITLE  (italic + flanking rules)
   ===================================================================== */

.shb-section-title {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    font-family: var(--ff-serif);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: var(--fw-normal);
    font-style: italic;
    color: var(--ink);
    text-align: center;
    justify-content: center;
}

.shb-section-title span {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.shb-section-title::before,
.shb-section-title::after {
    content: "";
    flex: 1;
    max-width: 6rem; /* Shorter lines */
    height: 1px;
    background: #D8D1C5; /* More subtle color */
    opacity: 0.6;
}


/* =====================================================================
   HERO  (editorial split on desktop, poster on mobile)
   ===================================================================== */

.shb-hero {
    background: radial-gradient(circle at 75% 40%, #FFFFFF 0%, #F5F3EE 100%);
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* DESKTOP: side-by-side */
.shb-hero__inner {
    display: grid;
    grid-template-columns: 46fr 54fr;
    height: 480px; /* Shorter container to raise the background line */
    max-width: var(--max);
    margin-inline: auto;
}

.shb-hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem);
    gap: clamp(.8rem, 1.5vw, 1.2rem);
}

.shb-hero__brand {
    font-family: var(--ff-serif);
    font-size: clamp(.8rem, 1.2vw, .95rem);
    font-style: italic;
    color: var(--mocha-light);
    letter-spacing: .04em;
}

.shb-hero__title {
    font-family: var(--ff-serif);
    font-size: clamp(2.8rem, 6.5vw, 5.8rem);
    font-weight: var(--fw-normal);
    font-style: italic;
    line-height: 1.02;
    color: var(--ink);
    margin-bottom: .5rem;
}

.shb-hero__sub {
    font-size: clamp(.9rem, 1.4vw, 1.05rem);
    color: var(--ink-muted);
    max-width: 30ch;
    line-height: 1.55;
}

.shb-hero__img {
    position: relative;
    overflow: visible;
    z-index: 2;
}

.shb-hero__img img {
    position: absolute;
    top: -2.5rem;
    left: 0;
    right: 0;
    bottom: -7rem;
    width: 100%;
    height: calc(100% + 9.5rem);
    object-fit: contain;
    object-position: center 8%;
    /* Fix for the 'spot' - fade out the bottom tip of the hair */
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}


/* =====================================================================
   COLLECTION
   ===================================================================== */

.shb-collection {
    padding-top: 2rem; /* Brought up closer */
    padding-bottom: clamp(3rem, 7vw, 6rem);
    background: var(--cream);
}

.shb-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
}

/* CARD — Perfected Boutique Gallery Style */
.shb-card {
    display: flex;
    flex-direction: column;
    background: transparent; /* Seamless with section background */
    border: none;
    padding: 0;
    transition: transform var(--t-slow) var(--ease);
}

.shb-card:hover {
    transform: translateY(-8px);
}

.shb-card__img-link {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--white);
    padding: .75rem; /* The White Frame */
    border: 1px solid #EBE7E0;
    box-shadow: 0 10px 30px rgba(107, 91, 77, .05);
    transition: box-shadow var(--t-slow) var(--ease);
}

.shb-card:hover .shb-card__img-link {
    box-shadow: 0 20px 50px rgba(107, 91, 77, .12);
}

.shb-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--t-slow) var(--ease);
}

.shb-card:hover .shb-card__img { transform: scale(1.05); }

.shb-card__body {
    padding: 1.2rem .5rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    text-align: center;
}

.shb-card__name {
    font-family: var(--ff-serif);
    font-size: clamp(.88rem, 1.1vw, 1rem);
    font-style: italic;
    font-weight: var(--fw-normal);
    line-height: 1.3;
    color: var(--ink);
}

.shb-card__price,
.shb-card__price .woocommerce-Price-amount {
    font-family: var(--ff-sans);
    font-size: .85rem;
    font-weight: var(--fw-medium);
    color: var(--mocha);
    margin-bottom: .5rem;
}


/* =====================================================================
   WHY CHOOSE US
   ===================================================================== */

.shb-why {
    padding-block: clamp(2.5rem, 6vw, 5rem);
    background: var(--cream-dark);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.shb-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
}

.shb-why__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    padding: clamp(1.25rem, 3vw, 2rem) 1.5rem;
    background: rgba(255, 255, 255, .5);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    transition: background var(--t-base), box-shadow var(--t-base);
}

.shb-why__item::before {
    content: "workspace_premium";
    font-family: "Material Symbols Outlined";
    font-size: 1.6rem;
    color: var(--mocha);
    font-variation-settings: 'FILL' 0, 'wght' 300;
    line-height: 1;
    margin-bottom: .15rem;
}

.shb-why__item:nth-child(2)::before {
    content: "local_shipping";
}

.shb-why__item:nth-child(3)::before {
    content: "favorite";
}

.shb-why__item:hover {
    background: var(--white);
    box-shadow: 0 4px 20px rgba(107, 91, 77, .07);
}

.shb-why__icon {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--mocha);
    stroke-width: 1.5;
    flex-shrink: 0;
}

.shb-why__item h3 {
    font-family: var(--ff-serif);
    font-size: clamp(.9rem, 1.2vw, 1rem);
    font-style: italic;
    font-weight: var(--fw-normal);
    color: var(--ink);
}

.shb-why__item p {
    font-size: .8rem;
    color: var(--ink-muted);
    line-height: 1.5;
}


/* =====================================================================
   INSTAGRAM STRIP
   ===================================================================== */

.shb-instagram {
    padding-block: clamp(3rem, 7vw, 5rem);
    border-top: 1px solid var(--border);
    background: var(--cream);
    text-align: center;
}

.shb-instagram__tagline {
    font-family: var(--ff-serif);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    font-style: italic;
    line-height: 1.75;
    color: var(--ink-muted);
    margin-top: .5rem;
}

.shb-instagram__tagline::before,
.shb-instagram__tagline::after {
    content: "format_quote";
    font-family: "Material Symbols Outlined";
    font-size: 1rem;
    color: var(--mocha-light);
    font-variation-settings: 'FILL' 0, 'wght' 300;
    vertical-align: middle;
    margin-inline: .35rem;
}


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

.site-footer {
    background: #EDE9E1;
    color: var(--ink);
    padding-top: clamp(4rem, 10vw, 7rem);
    padding-bottom: 2.5rem;
    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
}

.footer-brand .site-logo {
    display: block;
    font-size: 1.1rem;
    margin-bottom: .75rem;
    color: var(--mocha);
}

.footer-tagline {
    font-size: .85rem;
    line-height: 1.7;
    color: var(--ink-muted);
    max-width: 26ch;
}

.footer-heading {
    font-family: var(--ff-sans);
    font-size: .65rem;
    font-weight: var(--fw-bold);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--mocha);
    margin-bottom: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.footer-heading .material-symbols-outlined {
    font-size: .95rem;
    font-variation-settings: 'FILL' 0, 'wght' 300;
}

.footer-menu {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.footer-link,
.footer-menu a {
    font-size: .85rem;
    color: var(--ink-muted);
    transition: color var(--t-fast);
}

.footer-link:hover,
.footer-menu a:hover {
    color: var(--mocha);
}

.footer-tagline a[href^="mailto:"]::before,
.footer-tagline a[href^="tel:"]::before {
    font-family: "Material Symbols Outlined";
    font-size: .92rem;
    color: var(--mocha-light);
    font-variation-settings: 'FILL' 0, 'wght' 300;
    margin-right: .32rem;
    vertical-align: middle;
}

.footer-tagline a[href^="mailto:"]::before {
    content: "mail";
}

.footer-tagline a[href^="tel:"]::before {
    content: "call";
}

/* =====================================================================
   NEWSLETTER
   ===================================================================== */

.shb-newsletter {
    padding-block: clamp(4rem, 10vw, 7rem);
    background: #F0EDE6;
    text-align: center;
}

.shb-newsletter__content {
    max-width: 600px;
    margin-inline: auto;
}

.shb-newsletter__label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--mocha);
    margin-bottom: 1rem;
}

.shb-newsletter__title {
    font-family: var(--ff-serif);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 2.5rem;
    line-height: 1.3;
}

.shb-newsletter__form {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    max-width: 450px;
    margin-inline: auto;
    transition: border-color var(--t-base);
}

.shb-newsletter__form:focus-within {
    border-bottom-color: var(--mocha);
}

.shb-newsletter__form input {
    flex: 1;
    background: transparent;
    border: none;
    padding: .85rem 0;
    font-family: var(--ff-sans);
    font-size: .95rem;
    color: var(--ink);
    outline: none;
}

.shb-newsletter__form button {
    background: transparent;
    border: none;
    font-family: var(--ff-sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mocha);
    padding: 0 1rem;
    cursor: pointer;
    transition: transform var(--t-fast);
}

.shb-newsletter__form button:hover {
    transform: translateX(3px);
}

/* Footer addition */
.footer-tagline a:hover {
    color: var(--mocha);
}


.footer-bottom {
    border-top: 1px solid var(--border);
    margin-top: 0;
    padding-top: 1.5rem;
    text-align: center;
    font-size: .75rem;
    letter-spacing: .04em;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}


/* =====================================================================
   SCROLL TO TOP
   ===================================================================== */

.scroll-top {
    position: fixed;
    right: 1.15rem;
    bottom: 1.15rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--border);
    background: rgba(245, 243, 238, 0.95);
    color: var(--mocha);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
    z-index: 450;
}

.scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top .material-symbols-outlined {
    font-size: 1.25rem;
    font-variation-settings: 'FILL' 0, 'wght' 300;
}

.shb-toast-wrap {
    position: fixed;
    right: 1rem;
    top: calc(70px + 1rem);
    z-index: 10020;
    display: grid;
    gap: .55rem;
    pointer-events: none;
}

.shb-toast {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 220px;
    max-width: min(420px, calc(100vw - 2rem));
    padding: .68rem .8rem;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .96);
    color: var(--mocha);
    box-shadow: 0 10px 28px rgba(44, 41, 38, .12);
    font-size: .78rem;
    font-weight: var(--fw-semi);
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-8px);
    animation: shbToastIn .26s ease forwards;
}

.shb-toast .material-symbols-outlined {
    font-size: 1rem;
    font-variation-settings: 'FILL' 1, 'wght' 300;
}

.shb-toast.is-hiding {
    animation: shbToastOut .22s ease forwards;
}

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

@keyframes shbToastOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@media (max-width: 860px) {
    .shb-toast-wrap {
        left: 1rem;
        right: 1rem;
        top: auto;
        bottom: 1rem;
    }

    .shb-toast {
        width: 100%;
        max-width: none;
    }
}


/* =====================================================================
   INTERNAL PAGE TEMPLATES
   ===================================================================== */

/* Page Header (Centered text as per screenshot) */
.page-header-leila {
    padding-block: clamp(3rem, 7vw, 5rem);
    text-align: center;
    border-bottom: 1px solid var(--border);
    margin-bottom: clamp(3rem, 6vw, 5rem);
    animation: fadeIn .8s var(--ease-o) forwards;
}

.page-header-leila .page-title {
    font-family: var(--ff-serif);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-style: italic;
    font-weight: 500;
    color: var(--mocha);
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.page-header-leila .page-subtitle {
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 600;
}

/* Shared page wrapper */
.site-main-leila {
    padding-bottom: clamp(4rem, 10vw, 8rem);
}

/* Contact page */
.contact-grid-leila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.info-block {
    margin-bottom: 2.5rem;
}

.info-block .info-label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mocha-light);
    margin-bottom: .6rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.info-block .info-label::before {
    content: "contact_mail";
    font-family: "Material Symbols Outlined";
    font-size: .95rem;
    color: var(--mocha-light);
    font-variation-settings: 'FILL' 0, 'wght' 300;
    line-height: 1;
}

.info-block p,
.info-block a {
    font-size: .95rem;
    color: var(--ink);
    line-height: 1.75;
}

.contact-form-wrapper h2 {
    font-family: var(--ff-serif);
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    font-style: italic;
    font-weight: var(--fw-normal);
    margin-bottom: .75rem;
    text-align: left;
    color: var(--mocha);
}

.contact-form-wrapper>p {
    color: var(--ink-muted);
    font-size: .9rem;
    margin-bottom: 2rem;
}

/* Contact form inputs */
.contact-form-leila {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.form-group label {
    font-size: .65rem;
    font-weight: var(--fw-semi);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mocha-light);
}

.form-control {
    width: 100%;
    padding: .7rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: .95rem;
    color: var(--ink);
    outline: none;
    transition: border-color var(--t-base);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
}

.form-control:focus {
    border-bottom-color: var(--mocha);
}

.form-control::placeholder {
    color: var(--border);
}

/* Delivery page */
.delivery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
}

.delivery-column h2 {
    font-family: var(--ff-serif);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-style: italic;
    font-weight: var(--fw-normal);
    margin-bottom: 1.75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    color: var(--mocha);
}

.delivery-item {
    margin-bottom: 2rem;
}

.delivery-item h3 {
    font-size: .72rem;
    font-weight: var(--fw-semi);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mocha);
    margin-bottom: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .32rem;
}

.delivery-item h3::before {
    content: "local_shipping";
    font-family: "Material Symbols Outlined";
    font-size: .98rem;
    color: var(--mocha-light);
    font-variation-settings: 'FILL' 0, 'wght' 300;
    line-height: 1;
}

.delivery-column:last-child .delivery-item h3::before {
    content: "credit_card";
}

.delivery-item p {
    color: var(--ink-muted);
    font-size: .9rem;
    line-height: 1.7;
}

.shb-delivery-hero {
    border: 1px solid var(--border);
    background: linear-gradient(125deg, #f8f6f1 0%, #f1ede5 100%);
    padding: clamp(1.1rem, 2.2vw, 1.8rem);
    margin-bottom: clamp(1.4rem, 3vw, 2.25rem);
}

.shb-delivery-hero__lead {
    margin: 0;
    max-width: 46rem;
    font-size: .96rem;
    line-height: 1.8;
    color: var(--ink-muted);
}

.shb-delivery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.8vw, 2rem);
}

.shb-delivery-card {
    border: 1px solid var(--border);
    background: var(--white);
    padding: clamp(.95rem, 2vw, 1.25rem);
}

.shb-delivery-card__title {
    margin: 0 0 .85rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--mocha);
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: var(--fw-normal);
    font-size: clamp(1.12rem, 2vw, 1.45rem);
}

.shb-delivery-card__title .material-symbols-outlined {
    font-size: 1.05rem;
    color: var(--mocha-light);
    font-variation-settings: 'FILL' 0, 'wght' 300;
}

.shb-delivery-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .75rem;
}

.shb-delivery-list li {
    border: 1px solid var(--border);
    background: var(--cream);
    padding: .65rem .75rem;
    line-height: 1.55;
    font-size: .9rem;
    color: var(--ink);
}

.shb-delivery-note {
    margin-top: clamp(1rem, 2.4vw, 1.6rem);
    padding: .85rem 1rem;
    border: 1px dashed var(--border);
    background: var(--cream-dark);
    font-size: .86rem;
    color: var(--ink-muted);
}

/* Privacy policy page */
.shb-privacy-content {
    max-width: 820px;
    padding-block: clamp(1.5rem, 4vw, 3rem);
}

.shb-privacy-heading {
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: var(--fw-normal);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--mocha);
    margin: 2rem 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}

.shb-privacy-content p {
    margin-bottom: .75rem;
    color: var(--ink-muted);
    font-size: .95rem;
    line-height: 1.75;
}

.shb-privacy-list {
    list-style: disc;
    padding-left: 1.5rem;
    display: block;
    margin: .5rem 0 1rem;
}

.shb-privacy-list li {
    color: var(--ink-muted);
    font-size: .92rem;
    line-height: 1.65;
    margin-bottom: .3rem;
}

/* About page */
.about-story-leila .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}

.about-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.about-text h2 {
    font-family: var(--ff-serif);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-style: italic;
    font-weight: var(--fw-normal);
    margin-bottom: 1.25rem;
    color: var(--mocha);
}

.about-text p {
    margin-bottom: 1.25rem;
    color: var(--ink-muted);
    line-height: 1.75;
    font-size: .95rem;
}

.about-features {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    margin-top: 2rem;
}

.feature-item strong {
    display: block;
    font-family: var(--ff-serif);
    font-size: 2.2rem;
    font-style: italic;
    color: var(--mocha);
}

.feature-item span {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-muted);
}

.why-us-leila {
    background: var(--cream-dark);
    padding-block: clamp(2.5rem, 6vw, 5rem);
    border-top: 1px solid var(--border);
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}

.benefit-item {
    padding: 1.5rem 1rem;
}

.benefit-item h3 {
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: var(--fw-normal);
    margin-top: .5rem;
    font-size: .95rem;
}

.benefit-item p {
    font-size: .82rem;
    color: var(--ink-muted);
    margin-top: .35rem;
}

.benefit-item .material-symbols-outlined {
    color: var(--mocha);
    font-size: 1.75rem;
    font-variation-settings: 'FILL' 0, 'wght' 300;
}


/* =====================================================================
   CLIENT REVIEWS MOSAIC
   ===================================================================== */

.shb-reviews {
    padding-block: clamp(3rem, 7vw, 6rem);
    background: var(--cream-dark);
    border-top: 1px solid var(--border);
}

.shb-reviews__mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: .75rem;
}

.shb-reviews__photo {
    position: relative;
    overflow: hidden;
    background: var(--cream-darker);
}

.shb-reviews__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    aspect-ratio: 3 / 4;
    display: block;
    transition: transform var(--t-slow) var(--ease);
}

.shb-reviews__photo:hover img {
    transform: scale(1.04);
}

.shb-reviews__photo--tall img {
    aspect-ratio: 3 / 5;
}

.shb-reviews__photo--quote {
    position: relative;
}

.shb-reviews__blockquote {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem 1rem 1rem;
    background: linear-gradient(to top, rgba(44, 41, 38, .82) 0%, transparent 100%);
    color: var(--white);
    margin: 0;
}

.shb-reviews__blockquote p {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: clamp(.8rem, 1.2vw, .95rem);
    line-height: 1.45;
    margin-bottom: .35rem;
}

.shb-reviews__blockquote cite {
    font-family: var(--ff-sans);
    font-size: .72rem;
    font-weight: var(--fw-semi);
    letter-spacing: .08em;
    font-style: normal;
    opacity: .8;
}

/* =====================================================================
   ABOUT MINI SECTION (homepage)
   ===================================================================== */

.shb-about-mini {
    padding-block: clamp(4rem, 10vw, 8rem);
    background: var(--cream);
    border-top: 1px solid var(--border);
}

.shb-about-mini__inner {
    display: grid;
    grid-template-columns: 44fr 56fr;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.shb-about-mini__img {
    position: relative;
    overflow: hidden;
}

.shb-about-mini__img img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.shb-about-mini__label {
    display: block;
    font-family: var(--ff-serif);
    font-size: clamp(.75rem, 1vw, .88rem);
    font-style: italic;
    color: var(--mocha-light);
    margin-bottom: .65rem;
    letter-spacing: .04em;
}

.shb-about-mini__title {
    font-family: var(--ff-serif);
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: var(--fw-normal);
    font-style: italic;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.shb-about-mini__desc {
    font-size: clamp(.9rem, 1.2vw, 1rem);
    color: var(--ink-muted);
    line-height: 1.75;
    max-width: 40ch;
    margin-bottom: 2rem;
}

@media (max-width: 860px) {
    .shb-reviews__mosaic {
        grid-template-columns: repeat(2, 1fr);
    }

    .shb-reviews__mosaic>*:last-child {
        display: none;
    }

    .shb-about-mini__inner {
        grid-template-columns: 1fr;
    }

    .shb-about-mini__img {
        max-height: 60vw;
        overflow: hidden;
    }

    .shb-about-mini__img img {
        aspect-ratio: 16 / 9;
        object-position: center 20%;
    }
}

@media (max-width: 480px) {
    .shb-reviews__mosaic {
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }

    .shb-reviews__blockquote {
        padding: .75rem .65rem .65rem;
    }
}

/* =====================================================================
   WOOCOMMERCE NOTICES (inline)
   ===================================================================== */

.woocommerce-message {
    background: #eef5ee;
    border-left: 3px solid #6B9E6B;
    padding: .9rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: .88rem;
    color: #2C4A2C;
    border-radius: 0 var(--radius) var(--radius) 0;
}


/* =====================================================================
   RESPONSIVE BREAKPOINTS
   ===================================================================== */

/* ── Wide / tablet-lg: hide desktop nav partially ── */
@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* ── Tablet 860px: collapse nav to hamburger ── */
@media (max-width: 860px) {
    :root {
        --nav-h: 70px;
    }

    /* Keep height consistent for logo prominence */

    .nav-inner {
        gap: .5rem;
    }

    .nav-main {
        justify-content: center;
        position: relative;
    }

    .nav-logo {
        position: static;
        transform: none;
        width: min(62vw, 320px);
        text-align: center;
    }

    .nav-logo a,
    .nav-logo img {
        margin-inline: auto;
    }

    /* Nav */
    .nav-links-desktop {
        display: none;
    }

    .nav-hamburger {
        display: flex;
        order: -1;
    }

    /* Hamburger on left */
    .mobile-overlay {
        display: block;
    }

    .nav-right {
        display: flex;
        gap: .45rem;
    }

    /* Compact right icons */
    .nav-language-switcher,
    .nav-currency-switcher {
        display: none;
    }

    /* Hero: stays side-by-side but smaller, with image right always visible */
    .shb-hero__inner {
        grid-template-columns: 52fr 48fr;
        min-height: 60svh;
    }

    .shb-hero__text {
        gap: .9rem;
    }

    /* Products: 2 col */
    .shb-products {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Why: 3-card row still works on tablet */
    .shb-why__grid {
        gap: 1rem;
    }

    .shb-why__item {
        padding: 1rem;
    }

    /* Contact / Delivery / About: stack */
    .contact-grid-leila {
        grid-template-columns: 1fr;
    }

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

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

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .wp-block-columns {
        gap: 1rem;
    }

    .wp-block-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

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

    /* HERO: stack vertically — image becomes a tall portrait above text */
    .shb-hero__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        min-height: auto;
    }

    .shb-hero__img {
        height: min(70vw, 420px);
        order: -1;
        /* image on top */
    }

    .shb-hero__img img {
        object-fit: cover;
        object-position: center 14%;
    }

    .shb-hero__text {
        padding: 2rem 1.25rem 2.5rem;
        text-align: center;
        align-items: center;
    }

    .shb-hero__sub {
        max-width: none;
    }

    /* Products: 2 col still (keeps it nice on phones) */
    .shb-products {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }

    /* Why: 1 col on small phone */
    .shb-why__grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

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

    /* Section title smaller */
    .shb-section-title::before,
    .shb-section-title::after {
        max-width: 2.5rem;
    }

    /* Footer: single col */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-tagline {
        max-width: none;
    }

    .nav-inner {
        gap: .5rem;
        padding-inline: .8rem;
    }

    .site-logo,
    .site-logo a {
        font-size: clamp(1.08rem, 6.6vw, 1.35rem);
    }

    .nav-icon-link .material-symbols-outlined,
    .cart-icon .material-symbols-outlined {
        font-size: 1.16rem;
    }

    .cart-count {
        min-width: 1rem;
        height: 1rem;
        font-size: .58rem;
    }

    .mobile-drawer {
        width: min(86vw, 320px);
    }

    .mobile-drawer__header,
    .mobile-drawer__nav,
    .mobile-drawer__footer {
        padding-left: .95rem;
        padding-right: .95rem;
    }

    .mobile-drawer__nav li a {
        font-size: .82rem;
        letter-spacing: .07em;
    }

    .shb-btn {
        width: 100%;
        padding-inline: 1rem;
    }

    .contact-form-wrapper>p,
    .info-block p,
    .info-block a,
    .delivery-item p,
    .about-text p {
        font-size: .88rem;
    }

    .about-features {
        gap: 1rem;
    }

    .feature-item strong {
        font-size: 1.65rem;
    }

    .wp-block-buttons {
        width: 100%;
    }

    .wp-block-buttons .wp-block-button,
    .wp-block-buttons .wp-block-button__link {
        width: 100%;
        text-align: center;
    }

    .wp-block-cover,
    .wp-block-group,
    .wp-block-media-text {
        overflow: hidden;
    }
}

/* ── Very small phones 380px ── */
@media (max-width: 380px) {
    .shb-products {
        grid-template-columns: 1fr;
    }

    .shb-hero__img {
        height: 80vw;
    }

    .scroll-top {
        right: .8rem;
        bottom: .8rem;
        width: 2.25rem;
        height: 2.25rem;
    }

    .nav-right .nav-icon-link:first-child {
        display: none;
    }

    .mobile-drawer {
        width: 100vw;
    }
}




/* =====================================================================
   PRINT
   ===================================================================== */

@media print {

    .site-header,
    .site-footer,
    .nav-hamburger,
    .mobile-overlay {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}


/* =====================================================================
   SCROLL REVEAL ANIMATION  (applied by JS)
   ===================================================================== */

.reveal-target {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.55s var(--ease) var(--reveal-delay, 0ms),
        transform 0.55s var(--ease) var(--reveal-delay, 0ms);
}

.reveal-target.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.is-revealed {
    opacity: 1;
    transform: none;
}

/* Ensure elements are visible if JS doesn't run or is slow */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal-target {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =====================================================================
   MICRO-INTERACTIONS & POLISH
   ===================================================================== */

/* Focus ring — visible for keyboard users only */
:focus-visible {
    outline: 2px solid var(--mocha);
    outline-offset: 3px;
}

/* Selection color */
::selection {
    background: rgba(107, 91, 77, .15);
    color: var(--ink);
}

/* Smooth image loading */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* Section spacing helper */
.section-spacing {
    padding-block: clamp(3rem, 7vw, 6rem);
}

body.nav-open {
    overflow: hidden;
    touch-action: none;
}

/* Accessible hidden text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =====================================================================
   FRONT PAGE — OUR COLLECTION GRID  (shb-col-card)
   ===================================================================== */

.shb-collection {
    padding-top: calc(clamp(3rem, 7vw, 6rem) + 5rem);
    /* extra for protruding hero image */
    padding-bottom: clamp(3rem, 7vw, 6rem);
    background: var(--cream);
}

.shb-collection__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
}

.shb-cats-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.shb-cat-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 2px 14px rgba(44,41,38,.07);
    transition: box-shadow .3s ease, transform .3s ease;
    min-height: 140px;
}

.shb-cat-row:hover {
    box-shadow: 0 8px 32px rgba(107,91,77,.13);
    transform: translateY(-2px);
}

.shb-cat-row__label {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background: var(--white);
}

.shb-cat-row__title {
    font-family: var(--ff-serif);
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    font-style: italic;
    color: var(--ink);
    font-weight: 400;
    line-height: 1.1;
}

.shb-cat-row__sub {
    font-family: var(--ff-sans);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mocha);
}

.shb-cat-row__photos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    height: 180px;
    overflow: hidden;
}

.shb-cat-row__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.shb-cat-row:hover .shb-cat-row__img {
    transform: scale(1.04);
}

@media (max-width: 700px) {
    .shb-cat-row {
        grid-template-columns: 120px 1fr;
        min-height: 110px;
    }
    .shb-cat-row__photos {
        height: 120px;
        grid-template-columns: repeat(2, 1fr);
    }
    .shb-cat-row__img:nth-child(n+3) {
        display: none;
    }
    .shb-cat-row__label {
        padding: 1rem 1.25rem;
    }
    .shb-cat-row__title {
        font-size: 1.1rem;
    }
}

.shb-col-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.shb-col-card:hover {
    box-shadow: 0 12px 40px rgba(107, 91, 77, .1);
    transform: translateY(-3px);
}

.shb-col-card__img-wrap {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--cream-dark);
}

.shb-col-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform var(--t-slow) var(--ease);
}

.shb-col-card:hover .shb-col-card__img {
    transform: scale(1.05);
}

.shb-col-card__img--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream-dark);
    color: var(--mocha-light);
    font-size: 2rem;
}

.shb-col-card__body {
    flex: 1;
    padding: 1rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    border-top: 1px solid var(--border);
    text-align: center;
}

.shb-col-card__name {
    font-family: var(--ff-serif);
    font-size: clamp(.88rem, 1.1vw, 1rem);
    font-style: italic;
    font-weight: var(--fw-normal);
    line-height: 1.3;
    color: var(--ink);
}

.shb-col-card__name a {
    color: inherit;
}

.shb-col-card__name a:hover {
    color: var(--mocha);
}

.shb-col-card__price,
.shb-col-card__price .woocommerce-Price-amount {
    font-family: var(--ff-sans);
    font-size: .88rem;
    font-weight: var(--fw-medium);
    color: var(--mocha);
    margin-bottom: .2rem;
}


/* =====================================================================
   FRONT PAGE — WHY CHOOSE US  (inline icon, no ::before conflict)
   ===================================================================== */

/* Front-page uses inline icon markup — hide the old CSS-injected ::before icons */
.shb-front .shb-why__item::before,
.shb-front .shb-why__item:nth-child(2)::before,
.shb-front .shb-why__item:nth-child(3)::before {
    display: none;
}

.shb-why__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shb-why__icon .material-symbols-outlined {
    font-size: 1.35rem;
    color: var(--mocha);
    font-variation-settings: 'FILL' 0, 'wght' 300;
    line-height: 1;
}

.shb-why__title {
    font-family: var(--ff-serif);
    font-size: clamp(.9rem, 1.2vw, 1rem);
    font-style: italic;
    font-weight: var(--fw-normal);
    color: var(--ink);
}

.shb-why__desc {
    font-size: .8rem;
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 0;
}


/* =====================================================================
   FRONT PAGE — INSTAGRAM STRIP  (label + handle)
   ===================================================================== */

.shb-instagram__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
}

.shb-instagram__label {
    font-family: var(--ff-serif);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-style: italic;
    color: var(--ink);
}

.shb-instagram__handle {
    font-family: var(--ff-sans);
    font-size: .9rem;
    font-weight: var(--fw-medium);
    color: var(--mocha);
    text-decoration: underline;
    text-underline-offset: 3px;
    letter-spacing: .04em;
    transition: opacity var(--t-fast);
}

.shb-instagram__handle:hover {
    opacity: .7;
}


/* =====================================================================
   FRONT PAGE — RESPONSIVE OVERRIDES
   ===================================================================== */

@media (max-width: 860px) {
    .shb-collection__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .shb-collection__grid--cats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 540px) {
    .shb-collection__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }
    .shb-collection__grid--cats {
        grid-template-columns: repeat(2, 1fr);
        gap: .65rem;
    }

    .shb-col-card__body {
        padding: .75rem .85rem .9rem;
    }
}

@media (max-width: 380px) {
    .shb-collection__grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   ANIMATIONS & REVEALS
   ===================================================================== */

.reveal-target {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--ease-o), transform .8s var(--ease-o);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal-target.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Specific reveal directions */
.reveal-left {
    transform: translateX(-30px);
}

.reveal-right {
    transform: translateX(30px);
}

.reveal-target.reveal-left.is-revealed,
.reveal-target.reveal-right.is-revealed {
    transform: translateX(0);
}

/* Hover lift effect */
.hover-lift {
    transition: transform var(--t-base) var(--ease);
}

.hover-lift:hover {
    transform: translateY(-5px);
}

/* Fade in for page headers */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.animate-fade-in {
    animation: fadeIn .6s var(--ease-o) forwards;
}

/* =====================================================================
   HERO ENTRANCE (fires immediately on load, not on scroll)
   ===================================================================== */

@keyframes shbSlideLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: none; }
}

@keyframes shbSlideRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: none; }
}

@keyframes shbFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

.shb-hero__text {
    animation: shbSlideLeft .85s var(--ease-o) .05s both;
}

.shb-hero__img {
    animation: shbSlideRight .85s var(--ease-o) .2s both;
}

/* =====================================================================
   STAGGER REVEAL — for grid children
   ===================================================================== */

.shb-col-card,
.shb-why__item {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--ease-o), transform .6s var(--ease-o), box-shadow var(--t-slow) var(--ease);
    transition-delay: var(--stagger-delay, 0ms);
}

.shb-col-card.is-revealed,
.shb-why__item.is-revealed {
    opacity: 1;
    transform: none;
}

/* Card hover lift (only after revealed) */
.shb-col-card.is-revealed:hover {
    box-shadow: 0 16px 48px rgba(107, 91, 77, .14);
    transform: translateY(-4px);
}

/* =====================================================================
   SECTION TITLE REVEAL
   ===================================================================== */

.shb-section-title {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s var(--ease-o), transform .7s var(--ease-o);
}

.shb-section-title.is-revealed {
    opacity: 1;
    transform: none;
}

/* =====================================================================
   WHY ICON SPIN-IN
   ===================================================================== */

@keyframes shbPopIn {
    from { opacity: 0; transform: scale(.7) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.shb-why__item.is-revealed .shb-why__icon {
    animation: shbPopIn .5s var(--ease-o) var(--stagger-delay, 0ms) both;
}

/* =====================================================================
   REDUCE MOTION — disable all custom animations
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .shb-hero__text,
    .shb-hero__img,
    .shb-col-card,
    .shb-why__item,
    .shb-section-title {
        animation: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
}