/* ================================
   ARTISTIC WORKS 7 - PREMIUM STYLING
   ================================ */

/* Color Palette - Premium Artistic */
:root {
    /* AW7 Unified Studio Palette */

    --cream-bg: #F7F4F0;
    --light-cream: #FCFAF7;
    --warm-beige: #F2ECE5;
    --warm-ivory: #EFE8E0;

    /* Primary palette */
    --muted-terracotta: #D9745B;
    --heading-warm: #2A2028;
    --nav-text: #342832;
    --nav-hover: #E3A857;
    --accent-label: #D9745B;

    --text-dark: #4E4348;
    --deep-taupe: #1E121C;
    --soft-brown: #6B6166;

    --accent-warm: #D9745B;
    --sage-green: #C6B89F;
    --dusty-blush: #E7CBBF;

    --soft-gray: #8E8682;
    --white: #FFFFFF;

    --floral-accent: rgba(217,116,91,0.08);

    /* Shadows */
    --shadow-light: 0 8px 32px rgba(30,18,28,0.06);
    --shadow-medium: 0 12px 48px rgba(30,18,28,0.10);
    --shadow-deep: 0 20px 60px rgba(30,18,28,0.14);

    /* New reusable design tokens */
    --card-bg: #FBF8F4;
    --card-hover: #FCF8F4;
    --navbar-bg: #FFF9F3;
    --navbar-scrolled: #E3A857;


    --button-primary: #D9745B;
    --button-primary-hover: #C7644C;

    --button-secondary-border: #C9B7AA;
    --button-secondary-hover: #E3A857;

    --chip-bg: rgba(217,116,91,0.08);
    --chip-text: #5B4A4F;

    --footer-bg: #1E121C;
    --footer-text: #EDE5DE;
}



.is-hidden {
    display: none !important;
}

/* Typography color hierarchy */
body, p, li, .lead, .card-description, .featured-card-description, .why-card-description {
    color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6, .section-title, .featured-card-title, .explore-card-title, .why-card-title {
    color: var(--heading-warm);
}

nav {
    color: var(--nav-text);
}

nav .nav-links a, .logo-monogram {
    color: var(--nav-text);
}

nav .nav-links a:hover, nav .nav-links a:focus {
    color: var(--nav-hover);
}

.accent-label, .subhead, .section-subtitle {
    color: var(--accent-label);
}

a {
    color: var(--nav-hover);
    transition: color 0.18s ease;
}

/* -----------------------
   Phase 2: Healing Section
   ----------------------- */
.healing-section {
    padding: 4.2rem 0;
    background: linear-gradient(180deg, rgba(255,248,239,0.6), rgba(253,251,248,1));
    position: relative;
}
.healing-section .section-container {
    max-width: 1280px;
    margin: 0 auto;
}
.split-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.8rem;
    justify-items: center;
    text-align: center;
}
.healing-left {
    max-width: 760px;
    width: 100%;
}
.healing-left .left-align { text-align: center; }
.healing-left .section-title { margin-bottom: 0.4rem; }
.healing-left .section-subtitle { margin-bottom: 1.6rem; color: var(--soft-brown); }
.healing-points {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
    max-width: 660px;
}
.healing-points li {
    background: linear-gradient(180deg, var(--white), var(--warm-ivory));
    padding: 1rem 1.2rem;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
    display: flex;
    flex-direction: column;
    text-align: left;
}
.healing-points li strong {
    color: var(--heading-warm);
    font-weight: 600;
    margin-bottom: 4px;
}
.healing-points li span {
    color: var(--text-dark);
    font-size: 0.95rem;
}
.healing-right {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}
.healing-image-placeholder {
    width: 100%;
    max-width: 620px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}
.floating-accent.soft-blob {
    position: absolute;
    right: 50%;
    top: 10%;
    transform: translateX(80px) translateY(-8px);
    width: 160px;
    height: 160px;
    background: radial-gradient(circle at 30% 30%, rgba(200,155,136,0.12), rgba(233,210,200,0.04));
    border-radius: 50%;
    filter: blur(8px);
}

/* -----------------------
   Events / Experiences
   ----------------------- */
.events-section { padding: 3.6rem 0; background: transparent; }

/* Category Filter Buttons */
.category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 2.4rem 0 2.8rem;
}
.category-btn {
    padding: 0.75rem 1.4rem;
    border: 2px solid var(--muted-terracotta);
    background: transparent;
    color: var(--muted-terracotta);
    border-radius: 999px;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.category-btn:hover {
    background: rgba(200, 155, 136, 0.1);
    transform: translateY(-2px);
}
.category-btn.active {
    background: var(--muted-terracotta);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(200, 155, 136, 0.25);
}

/* Premium workshop booking filters */
.workshops-section .workshop-filter-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin: 2.6rem auto 3rem;
    max-width: 1120px;
}

.workshops-section .workshop-filter-card {
    display: block;
    padding: 1.5rem;
    border-radius: 24px;
    background: #FBF8F4;
    border: 1px solid rgba(92, 72, 68, 0.08);
    box-shadow: 0 18px 48px rgba(94,77,71,0.08),
                inset 0 1px 0 rgba(255,255,255,0.72);
}

.workshops-section .workshop-month-card {
    grid-column: 1 / -1;
}

.workshops-section .filter-heading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.workshops-section .filter-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(201,122,115,0.12);
    color: #A56E68;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    font-size: 1.05rem;
}

.workshops-section .filter-label {
    color: var(--deep-taupe);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: 0;
}

.workshops-section .filter-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.workshops-section .month-chip-row {
    justify-content: center;
}

.workshops-section .category-btn {
    border: 1px solid rgba(92, 72, 68, 0.08);
    background: #F6F1EB;
    color: var(--deep-taupe);
    box-shadow: 0 8px 18px rgba(94,77,71,0.04);
    padding: 0.78rem 1.15rem;
    line-height: 1;
}

.workshops-section .category-btn:hover {
    background: #CFB8C7;
    border-color: #BFA5B7;
    color: #4A3335;
    transform: translateY(-2px);
}

.workshops-section .category-btn.active {
    background: #C97A73;
    color: #fff;
    border-color: #C97A73;
    box-shadow: 0 12px 28px rgba(196,109,91,0.25);
}

@media screen and (max-width: 900px) {
    .workshops-section .workshop-filter-panel {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .workshops-section .workshop-month-card {
        grid-column: auto;
    }
}

@media screen and (max-width: 560px) {
    .workshops-section .workshop-filter-panel {
        margin: 2rem auto 2.4rem;
    }

    .workshops-section .workshop-filter-card {
        padding: 1rem;
        border-radius: 20px;
    }

    .workshops-section .filter-chip-row,
    .workshops-section .month-chip-row {
        gap: 0.65rem;
        justify-content: flex-start;
    }

    .workshops-section .category-btn {
        padding: 0.72rem 0.95rem;
        font-size: 0.88rem;
    }
}

.workshop-empty-state {
    max-width: 1040px;
    margin: 0 auto 2.25rem;
    padding: 1.35rem;
    border-radius: 24px;
    background: linear-gradient(180deg,rgba(255,247,238), rgba(248,241,233,0.94));
    border: 1px solid rgba(200,155,136,0.22);
    box-shadow: 0 24px 50px rgba(94,77,71,0.08);
}

.empty-state-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}

.empty-state-label {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--heading-warm);
}

.empty-state-copy,
.empty-state-subtext {
    margin: 0;
    max-width: 720px;
    line-height: 1.75;
    color: var(--text-dark);
}

.empty-state-subtext {
    color: var(--soft-brown);
}

.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 0.4rem;
}

.empty-state-actions .btn {
    min-width: 165px;
}

.workshop-actions-row {
    display: flex;
    justify-content: flex-start;
    margin: 1.4rem 0 0;
}

.workshop-actions-row .btn {
    min-width: 220px;
}

.premium-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(31, 19, 11, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.premium-modal-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
     display: none !important;
}

body.modal-open {
    overflow: hidden;
}

.premium-modal {
    width: min(720px, 96%);
    max-width: 720px;
    max-height: 90vh;
    border-radius: 28px;
    background: linear-gradient(180deg,rgba(255,247,238), rgba(245,236,224,0.98));
    box-shadow: 0 32px 70px rgba(94,77,71,0.22);
    position: relative;
    transform: translateY(20px) scale(0.98);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.premium-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.8rem 2rem 1.2rem;
    scroll-behavior: smooth;
}

.premium-modal-body::-webkit-scrollbar {
    width: 10px;
}

.premium-modal-body::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.4);
    border-radius: 999px;
}

.premium-modal-body::-webkit-scrollbar-thumb {
    background: rgba(200,155,136,0.45);
    border-radius: 999px;
}

.premium-modal-overlay:not(.is-hidden) .premium-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.premium-modal-copy h2 {
    margin: 0 0 0.4rem;
    font-size: 2rem;
    line-height: 1.05;
    color: var(--heading-warm);
}

.premium-modal-copy p {
    margin: 0;
    color: var(--text-dark);
    opacity: 0.9;
    line-height: 1.75;
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.88);
    color: var(--deep-taupe);
    font-size: 1.35rem;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(94,77,71,0.1);
}

.premium-modal-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.modal-field-row {
    display: grid;
    gap: 0.45rem;
}

.modal-row-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.modal-field-column {
    display: grid;
    gap: 0.45rem;
}

.modal-field-row label {
    color: var(--deep-taupe);
    font-weight: 600;
    font-size: 0.95rem;
}

.modal-field-row input,
.modal-field-row select,
.modal-field-row textarea {
    width: 100%;
    border: 1px solid rgba(94,77,71,0.18);
    border-radius: 18px;
    padding: 1rem 1rem;
    background: rgba(255,255,255,0.9);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.97rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal-field-row input:focus,
.modal-field-row select:focus,
.modal-field-row textarea:focus {
    outline: none;
    border-color: rgba(200,155,136,0.85);
    box-shadow: 0 0 0 4px rgba(200,155,136,0.14);
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 0.4rem;
    padding-bottom: 1rem;
}

.modal-actions .btn {
    min-width: 160px;
}

@media screen and (max-width: 720px) {
    .premium-modal-body {
        padding: 1.25rem 1.25rem 1rem;
    }

    .premium-modal-copy h2 {
        font-size: 1.75rem;
    }

    .modal-actions {
        justify-content: center;
    }
}

@media screen and (max-width: 560px) {
    .premium-modal {
        width: min(96%, 100%);
        max-width: 96%;
        padding: 0;
        border-radius: 24px;
    }

    .premium-modal-body {
        padding: 1rem 1rem 0.75rem;
    }

    .premium-modal-copy h2 {
        font-size: 1.45rem;
    }

    .premium-modal-copy p {
        font-size: 0.96rem;
    }

    .modal-close-btn {
        top: 0.8rem;
        right: 0.8rem;
    }

    .modal-row-grid {
        grid-template-columns: 1fr;
    }

    .modal-actions {
        justify-content: stretch;
    }

    .modal-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .modal-field-row input,
    .modal-field-row select,
    .modal-field-row textarea {
        padding: 1rem 0.95rem;
    }
}

@media screen and (max-width: 520px) {
    .workshop-empty-state {
        padding: 1rem;
    }

    .empty-state-label {
        font-size: 1.35rem;
    }

    .modal-close-btn {
        top: 0.8rem;
        right: 0.8rem;
    }
}

/* Experience Cards */
.events-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 2rem;
    width:100%;
}
@media (max-width:1200px){
    .events-grid{
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:768px){
    .events-grid{
        grid-template-columns: 1fr;
    }
}

.experience-card{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.92),
            rgba(250,245,239,0.96)
        );

    border:1px solid rgba(120,90,70,0.08);

    box-shadow:
        0 12px 35px rgba(88,72,66,0.06),
        0 2px 10px rgba(88,72,66,0.04);

    border-radius:28px;
}

.experience-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 28px 60px rgba(88,72,66,0.12);
}
.register-workshop-wrap{
    display:flex;
    justify-content:center;
    margin-top:3rem;
}

.exp-image{
    height: 200px;
    overflow:hidden;
    flex-shrink:0;
}

.exp-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.experience-card:hover .exp-image img{
    transform:scale(1.05);
}

.exp-body{
    padding: 1.35rem;
    display:flex;
    flex-direction:column;
    flex:1;
}

.exp-body h3{
    margin-bottom:.7rem;
    line-height:1.3;
}

.experience-meta{
    margin-top:auto;
    padding-top:1rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.events-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1.6rem; }
/* .experience-card {
    background: linear-gradient(180deg, rgba(255,247,238), rgba(255,247,238,0.95));
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(94,77,71,0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display:flex;
    flex-direction:column;
} */
.experience-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 70px rgba(94,77,71,0.12);
}
.exp-image { height:150px; overflow:hidden; border-bottom:1px solid rgba(94,77,71,0.05); }
.exp-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.exp-body { padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:0.75rem; }
.exp-body h3 { margin:0; color:var(--heading-warm); }
.exp-body p { margin:0; color:var(--text-dark); font-size:0.95rem; }
.exp-link { margin-top:auto; color:var(--nav-hover); font-weight:600; text-decoration:none; }
.exp-link:hover { text-decoration:underline; }

/* -----------------------
   Page-specific premium cards
   ----------------------- */
.page-intro {
    max-width: 760px;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--soft-brown);
    line-height: 1.85;
}
.service-grid,
.collection-grid,
/* .gallery-grid, */
.workshop-grid,
.category-grid,
.location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
    margin-top: 2rem;
}
.location-card {
    background: var(--card-bg);
    border: 1px solid rgba(212,168,153,0.18);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(94,77,71,0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.location-section .location-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

/* Ensure every location-card gets identical internal sizing */
.location-grid > .location-card {
    min-height: 360px;
}

.location-grid > .location-card .card-image-container {
    height: 180px;
}

.location-grid > .location-card .location-card-content {
    min-height: calc(360px - 180px);
}

/* Keep chip row in a consistent place across all cards */
.location-card-content {
    justify-content: flex-start;
}

.location-card-content .location-card-content h3,
.location-card-content .location-types,
.location-card-content .location-sessions,
.location-card-content .btn-small {
    display: block;
}


.location-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 62px rgba(94,77,71,0.12);
}
.location-card .card-image-container {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(249,241,232,1), rgba(238,226,216,1));
}
.location-card .card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.location-card:hover .card-image-container img {
    transform: scale(1.03);
}
.location-card-content {
    padding: 1.5rem 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex-grow: 1;
}
.location-card-content h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--deep-taupe);
}
.location-types {
    color: var(--soft-brown);
    font-size: 0.95rem;
    line-height: 1.7;
}
.location-sessions {
    font-weight: 600;
    color: var(--heading-warm);
}
.location-card-content .btn-small {
    align-self: flex-start;
    padding: 0.85rem 1.3rem;
    font-size: 0.9rem;
}
.location-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.1rem;
    justify-content: center;
    align-items: center;
}
.location-chip {
    font-size: 0.82rem;
    color: var(--deep-taupe);
    background: var(--chip-bg);
    color: var(--chip-text);    padding: 0.7rem 1rem;
    border-radius: 999px;
    letter-spacing: 0.4px;
}

.location-section-cta {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.service-card,
.collection-card,
.gallery-card {
    background: #FFFFFF;
    border: 1px solid rgba(90, 100, 120, 0.08);
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    display: flex;
    justify-content: space-between;
    padding: 22px;
    height: 100%;
}

.collection-card,
.category-card,
.service-card,
.workshop-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.collection-card-content,
.card-content,
.category-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.workshop-card h2,
.workshop-card h3,
.experience-card h2,
.experience-card h3 {
    line-height: 1.25;
    white-space: normal;
}

.service-card:hover,
.collection-card:hover,
.workshop-card:hover,
.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(94,77,71,0.12);
}

.service-card h3,
.workshop-card h3,
.collection-card h3,
.gallery-card h3,
.collection-card h4 {
    color: var(--heading-warm);
    margin-bottom: 0.8rem;
}

.collection-card .gallery-info h4,
.collection-card .card-content h4 {
    margin-bottom: 0.15rem !important;
}

.gallery-card p,
.collection-card .gallery-info p,
.collection-card .card-content p {
    line-height: 1.5 !important;
    margin-top: 0 !important;
}
.service-card p,
.workshop-card p,
.collection-card p,
.gallery-card p {
    color: var(--text-dark);
    margin: 0;
    line-height: 1.75;
}
/* category / mini label text */
.collection-card .card-category,
.workshop-card .card-category,
.category-label {
     display:inline-block;

    margin-top: 8px;
    margin-bottom: 8px;

    color: #b35d4b; /* terracotta */
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;

    position: relative;
    padding-left: 14px;
}
.card-category::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;

    width: 6px;
    height: 6px;
    border-radius: 50%;

    background: #d9745b;
    transform: translateY(-50%);
}
.collection-card-image {
    width: 100%;
    height: 195px;
    overflow: hidden;
    border-radius: 18px;
    margin-bottom: 1.4rem;
    position: relative;
    background: linear-gradient(135deg, rgba(249,241,232,1), rgba(238,226,216,1)); 
}
.collection-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(229,196,179,0.20), transparent 35%);
    pointer-events: none;
}
.collection-card-image .image-placeholder {
    height: 100%;
    width: 100%;
    transition: transform 0.65s ease, filter 0.65s ease;
}
.collection-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 14px;
    margin-bottom: 14px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--nav-hover);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.25s ease, transform 0.25s ease;
}

.collection-link:hover {
    background: var(--heading-warm);
    color: #ffffff;
    transform: translateY(-1px);
}

.sale-highlight {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 14px;
    margin-bottom: 4px;

    border-radius: 6px;
    background: #6B4F5B;
    color: #FFFFFF;

    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    line-height: 1;
}
.collection-card:hover .collection-link {
    color: var(--heading-warm);
}
.collection-card:hover .collection-card-image .image-placeholder {
    transform: scale(1.03);
    filter: brightness(1.03);
}
.community-masonry {
    column-count: 3;
    column-gap: 1.15rem;
    margin-top: 1.05rem;
}
.community-moment-card {
    position: relative;
    margin-bottom: 1.05rem;
    break-inside: avoid;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(94,77,71,0.075);
}
.community-moment-card img {
    width: 100%;
    display: block;

    /* keep editorial crop feel but prevent aggressive dominance */
    height: 180px;
    max-height: 180px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s ease;
}

.community-moment-card:hover img {
    transform: scale(1.02);
}
.community-moment-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.15rem;
    background: linear-gradient(180deg, transparent 0%,rgba(255,247,238), rgba(253,251,248,0.98) 100%);
}
.community-moment-overlay p {
    margin: 0 0 0.3rem;
    color: var(--soft-brown);
    font-size: 0.82rem;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}
.community-moment-overlay h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--heading-warm);
}

.testimonial-carousel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}
.testimonial-track {
    min-height: 180px;
}

.testimonial-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    background: var(--card-bg);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 18px 44px rgba(94,77,71,0.08);
}
.testimonial-card.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
}
.testimonial-quote {
    color: var(--soft-brown);
    font-size: 1rem;
    line-height: 1.9;
    margin: 0 0 1.3rem;
}
.testimonial-meta {
    color: var(--heading-warm);
    font-weight: 600;
}
.testimonial-nav {
    border: none;
    background: linear-gradient(135deg, #d4a899 0%, #c49682 100%);
    color: var(--white);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.45rem;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(94,77,71,0.18);
}

.challenge-card {
    background: linear-gradient(180deg,rgba(255,247,238), rgba(255,247,238,0.95));
    border: 1px solid rgba(212,168,153,0.18);
    border-radius: 28px;
    padding: 2.2rem;
    box-shadow: 0 20px 52px rgba(94,77,71,0.08);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    margin-top: 2rem;
}
.challenge-copy .accent-label {
    display: inline-block;
    margin-bottom: 0.8rem;
}
.challenge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
}

.spotlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.6rem;
    margin-top: 2rem;
}
.spotlight-card {
    background: linear-gradient(180deg,rgba(255,247,238), rgba(255,247,238,0.95));
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(94,77,71,0.08);
    display: flex;
    flex-direction: column;
}
.spotlight-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.spotlight-copy {
    padding: 1.4rem 1.4rem 1.6rem;
}
.spotlight-copy h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}
.spotlight-copy p {
    margin: 0;
    color: var(--soft-brown);
}

.community-cta-card {
    background: linear-gradient(180deg, rgba(255,247,238), rgba(255,247,238,0.98));
    border: 1px solid rgba(212,168,153,0.18);
    border-radius: 28px;
    padding: 2.4rem;
    box-shadow: 0 20px 52px rgba(94,77,71,0.08);
    margin-top: 1rem;
}

.collection-preview-section {
    padding: 3rem 0 2.8rem;
}

.community-moments-section {
    padding: 2.8rem 0 2rem;
}

/* Community Moments - Full Gallery CTA */
.community-gallery-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.community-gallery-cta .btn {
    min-width: 220px;
    text-align: center;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .community-gallery-cta {
        margin-top: 1.5rem;
        padding: 0 1rem;
    }

    .community-gallery-cta .btn {
        width: auto;
        min-width: 210px;
        max-width: 100%;
    }
}

.community-moments-section .section-header,
.testimonials-section .section-header {
    margin-bottom: 1.8rem;
}

.challenge-section,
.spotlight-section {
    padding: 2.6rem 0;
}

.community-cta-section {
    padding: 2.4rem 0 1.4rem;
}
.community-cta-copy {
    display: grid;
    gap: 1.25rem;
}
@media screen and (min-width: 769px) {
    .community-cta-section .community-cta-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
        column-gap: 4rem;
        align-items: start;
    }

    .community-cta-section .community-benefits {
        margin: 0;
        max-width: none;
        align-self: start;
    }
}
.community-benefits {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.6rem;
    color: var(--soft-brown);
    font-weight: 500;
    max-width: 1000px;
}

.community-benefits li {
    background: rgba(200,155,136,0.12);
    padding: 0.65rem 1rem;
    border-radius: 999px;
}

@media screen and (max-width: 1024px) {
    .community-masonry {
        column-count: 2;
    }

    .community-moment-card {
        margin-bottom: 0.95rem;
    }

    .community-moment-card img {
        height: 170px;
        max-height: 170px;
    }

    .testimonial-carousel {
        grid-template-columns: 1fr auto auto;
    }
}

@media screen and (max-width: 768px) {
    .community-masonry {
        column-count: 1;
    }

    .community-moment-card {
        margin-bottom: 0.85rem;
    }

    .community-moment-card img {
        height: 165px;
        max-height: 165px;
    }

    .testimonial-carousel {
        grid-template-columns: 1fr;
    }

    .testimonial-nav {
        width: 36px;
        height: 36px;
    }

    .challenge-card {
        grid-template-columns: 1fr;
        padding: 1.8rem;
    }

    .community-benefits {
        grid-template-columns: 1fr;
    }
}


@media screen and (max-width: 640px) {
    .testimonial-card {
        padding: 1.2rem 1.25rem;
        border-radius: 20px;
    }

    .testimonial-quote {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 0.9rem;
    }

    .testimonial-meta {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .spotlight-card {
    overflow: hidden;
}

.spotlight-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center;
    display: block;
}
}

/* -----------------------
   Gallery cards
   ----------------------- */
.card-note {
    margin-top: auto;
    color: var(--soft-brown);
    font-size: 0.95rem;
}
/* ==========================
   GALLERY PAGE - PREMIUM EDITORIAL
   SAFE REPLACEMENT
   ========================== */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 2rem;
}
.gallery-card {
    background: #f4efe9;
    border: none !important;
    box-shadow: none !important;

    border-radius: 30px;
    overflow: hidden;

    min-height: 440px;
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 0;
    transition: transform 0.35s ease;
}

.gallery-card-content {
    padding: 1.2rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.gallery-card p {
    flex-grow: 1;
}
.gallery-card:hover {
    
    transform: translateY(-8px);
    border-color: rgba(184, 144, 107, 0.28);

    box-shadow:
        0 30px 70px rgba(61, 39, 28, 0.12);
}

/* image wrapper */
/* image wrapper */
.gallery-card-image {
    padding: 1rem 1rem 0;
    display: flex;
    justify-content: center;
}

/* image */
.gallery-card-image img,
.gallery-card img {
    width: 100%;
    height: 230px;

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

    border-radius: 0;
    display: block;

    transition: transform 0.5s ease;
}

/* hover */
.gallery-card:hover img {
    transform: scale(1.03);
}

/* content */
.gallery-card-content {
    padding: 1.1rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* small category text */
.gallery-tag {
    font-size: 0.88rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #887868;
    margin-bottom: 0.55rem;
    font-weight: 500;
}

/* title */
.gallery-card h3 {
    font-size: clamp(1.9rem, 2vw, 2.5rem);
    line-height: 1.15;
    margin-bottom: 0.8rem;
    line-height: 1.15;
    font-weight: 500;
    color: #2f2027;
    font-family: "Cormorant Garamond", serif;
}

/* description */
.gallery-card p {
    color: #665d57;
    line-height: 1.8;
    font-size: 1.02rem;
    margin: 0;
}

/* subtle luxury shine */
.gallery-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.18),
            transparent 35%
        );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.gallery-card:hover::before {
    opacity: 1;
}

/* mobile */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .gallery-card {
        min-height: auto;
        border-radius: 26px;
    }

    .gallery-card img {
        height: 280px;
        border-radius: 22px;
    }

    .gallery-card h3 {
        font-size: 1.6rem;
    }
}
.category-grid .collection-card {
    min-height: 180px;
}

/* ================================
   REUSABLE CARD IMAGE SYSTEM
   ================================ */

/* Global reusable card image container */
.card-image-container {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: #f5f1ec;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.card-image-container img,
.featured-card-image img,
.collection-card-image img,
.explore-card-image img,
.exp-image img,
.community-moment-card img,
/* .spotlight-card img, */
.banner-image,
.gallery-thumb img,
.workshop-card img,
.service-card img,
/* .gallery-card img, */
.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.card-image-container img:hover,
.explore-card-image img:hover,
.featured-card-image img:hover,
.collection-card-image img:hover,
.exp-image img:hover,
.gallery-thumb img:hover,
.workshop-card img:hover,
.service-card img:hover,
/* .gallery-card img:hover, */
.category-card img:hover {
    transform: scale(1.03);
}

/* Optional modifier for images that need contain fit (portraits, odd ratios) */
.card-image-container.image-contain {
    background: #f8f4ef;
    padding: 10px;
}

.card-image-container.image-contain img {
    object-fit: contain;
    object-position: center;
}

/* -----------------------
   Reviews (Premium Google Reviews Section)
   ----------------------- */
.google-reviews-section {
    padding: 3.8rem 0;
    background: linear-gradient(180deg, rgba(255,248,239,0.65), rgba(253,251,248,1));
}

.google-review-summary {
    margin: 0 auto 1.6rem;
    max-width: 520px;
    text-align: center;
    color: var(--soft-brown);
}

.google-review-stars {
    letter-spacing: 1px;
    color: var(--muted-terracotta);
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.google-review-score {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    color: var(--heading-warm);
}

.google-review-source {
    margin-top: 0.35rem;
    font-size: 0.92rem;
}

.google-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.4rem;
    align-items: stretch;
}

.google-reviews-action {
    margin-top: 1.5rem;
}

.google-review-card {
    background: var(--card-bg);    border: 1px solid rgba(200,155,136,0.22);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(94,77,71,0.08);
    padding: 1.4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.google-review-card:hover {
    box-shadow: 0 30px 80px rgba(94,77,71,0.12);
    transform: translateY(-6px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.google-review-top {
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.google-review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212,168,153,0.22), rgba(229,196,179,0.12));
    border: 1px solid rgba(200,155,136,0.25);
    color: var(--deep-taupe);
    font-weight: 700;
    font-family: 'Metamorphous', serif;
}

.google-review-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.google-review-time {
    font-size: 0.9rem;
    color: var(--soft-brown);
}

.google-review-rating {
    color: var(--muted-terracotta);
    font-size: 1rem;
    letter-spacing: 2px;
    margin-top: -0.2rem;
}

.google-review-text {
    color: var(--text-dark);
    font-size: 0.98rem;
    line-height: 1.85;
    font-family: 'Outfit', sans-serif;
    margin-top: 0.1rem;
}

.google-review-more {
    margin-top: 0.1rem;
}

.google-review-more summary {
    cursor: pointer;
    color: var(--nav-hover);
    font-weight: 650;
    font-size: 0.95rem;
    list-style: none;
    padding-left: 0.1rem;
}

.google-review-more summary::-webkit-details-marker {
    display: none;
}

.google-review-more p {
    margin-top: 0.6rem;
    color: var(--soft-brown);
    line-height: 1.8;
}

/* Thumbnails under review text (1-2 small square images) */
.google-review-thumbs {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: nowrap;
}

.google-review-thumbs img {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(212,168,153,0.22);
    box-shadow: 0 14px 32px rgba(94,77,71,0.10);
    background: rgba(255,255,255,0.5);
    flex: 0 0 auto;
}

@media (max-width: 560px) {
    .google-reviews-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .google-review-card {
        padding: 1.15rem;
        border-radius: 22px;
    }

    .google-review-avatar {
        width: 40px;
        height: 40px;
    }

    .google-review-name {
        font-size: 1.05rem;
    }

    .google-review-thumbs img {
        width: 104px;
        height: 104px;
        border-radius: 18px;
    }
}

/* Fallback: keep existing testimonial carousel styles intact */
.testimonials-section {
    padding: 2.4rem 0 1.2rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(250,248,246,0.02));
}
.testimonials-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1.4rem; }
.testimonial-card {
    padding:1.6rem;
    background: linear-gradient(180deg, rgba(255,247,238), rgba(255,247,238,0.95));
    border-radius: 18px;
    box-shadow: 0 15px 42px rgba(94,77,71,0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(94,77,71,0.12);
}
.test-quote { font-style: italic; color: var(--text-dark); margin-bottom:0.8rem; }
.test-meta { font-weight:600; color:var(--soft-brown); font-size:0.92rem; }

/* -----------------------
   FAQ Accordion
   ----------------------- */
.cta-section { margin-top: 70px;padding: 3.6rem 0; background: linear-gradient(180deg, rgba(255,248,239,0.75), rgba(255,247,238)); position: relative; }
.cta-section::before {
    content: '';
    position: absolute;
    top: 16px;
    right: 18%;
    width: 110px;
    height: 110px;
    background: radial-gradient(circle at 30% 30%, rgba(200,155,136,0.18), transparent 55%);
    filter: blur(12px);
    pointer-events: none;
}
.cta-card { max-width: 980px; margin: 0 auto; padding: 2.2rem 2rem; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,248,240,0.96)); box-shadow: 0 26px 72px rgba(94,77,71,0.08); border: 1px solid rgba(212,168,153,0.18); position: relative; overflow: hidden; }
.cta-card::after {
    content: '';
    position: absolute;
    bottom: 18px;
    left: 20px;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, rgba(200,155,136,0.25), rgba(231,210,200,0.05));
}
.cta-copy { max-width: 620px; margin-bottom: 1.8rem; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.2rem; }
.cta-note { margin: 0; color: var(--soft-brown); font-size: 0.95rem; letter-spacing: 0.25px; }

.enquiry-section { position: relative; z-index: 2; }

/* Avoid any fixed-height/tile card styles collapsing the contact form area */
.enquiry-section .enquiry-card { display: block; width: 100%; margin-top: 0; }

.faq-section { padding: 3.8rem 0; background: linear-gradient(180deg, rgba(255,248,239,0.55), rgba(253,251,248,1)); position: relative; z-index: 1; clear: both; }
.faq-grid { display:grid; gap:1rem; max-width:900px; margin:0 auto; }
.faq-item { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,247,238)); border-radius: 18px; box-shadow: 0 18px 44px rgba(94,77,71,0.08); overflow:hidden; }
.faq-question { width:100%; display:flex; justify-content:space-between; align-items:center; font-family:'Cormorant Garamond', serif; font-size:1.05rem; color:var(--deep-taupe); background:none; border:none; padding:1.35rem 1.5rem; text-align:left; cursor:pointer; transition: background 0.3s ease, color 0.3s ease; }
.faq-question:hover { background: rgba(212,168,153,0.08); }
.faq-question::after { content: '+'; font-size:1rem; color:var(--muted-terracotta); transition: transform 0.3s ease; }
.faq-item.expanded .faq-question::after { transform: rotate(45deg); }
.faq-answer { padding:0 1.5rem 1.4rem; color: var(--text-dark); line-height:1.8; max-height:0; overflow:hidden; transition: max-height 0.35s ease, opacity 0.35s ease, transform 0.35s ease; opacity:0; transform: translateY(-8px); }
.faq-item.expanded .faq-answer { max-height: 320px; opacity:1; transform: translateY(0); }
.faq-answer p { margin: 0; padding-top: 0.6rem; color: var(--soft-brown); }

@media (max-width: 760px) {
    .cta-card { padding: 1.8rem 1.4rem; }
    .cta-buttons { flex-direction: column; align-items: stretch; }
    .cta-copy { margin-bottom: 1.4rem; }
    .faq-question { padding:1.15rem 1.2rem; }
    .faq-answer { padding:0 1.2rem 1rem; }
}

/* Responsive tweaks for Phase 2 */
@media (max-width: 900px) {
    .location-section .location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split-container { grid-template-columns: 1fr; }
    .healing-right { order:-1; margin-bottom:1.2rem; }
    .floating-accent.soft-blob { display:none; }
    .exp-image { height:120px; }
}

@media (max-width: 520px) {
    .location-section .location-grid {
        grid-template-columns: 1fr;
    }
}

/* -----------------------
   Page texture & dividers
   ----------------------- */
.page-texture::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

.section-header::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    background: rgba(200,155,136,0.45);
    opacity: 0.8;
}

.section-header::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    margin: 0.75rem auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(200,155,136,0.22), rgba(231,210,200,0.06));
    opacity: 0.9;
}

.section-header .section-subtitle {
    max-width: 640px;
    margin: 0 auto;
}

section {
    position: relative;
}

section + section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,168,153,0.18), transparent);
    opacity: 0.4;
    pointer-events: none;
}

/* -----------------------
   Footer styles
   ----------------------- */
/* ==========================
   ETSY STYLE PREMIUM FOOTER (FIXED)
   - 4-column luxury editorial layout
   - ensures social icons stay inside left column
   - prevents overflow drift and keeps alignment consistent
========================== */

.site-footer {
    background: #1e121c;
    color: #e5d2c8;
    padding: 3.1rem 0 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.site-footer h4 {
    color: #f8f2ee;
    font-weight: 600;
    margin-bottom: 1.1rem;
}

.footer-links a,
.contact-list a {
    color: #e8ded2;
    transition: 0.3s ease;
    font-family: 'Google Sans', sans-serif;
}

/* .footer-links a:hover,
.contact-list a:hover {
    color: #ffd3ac;
} */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 2.2rem;
    padding-top: 1rem;
    text-align: center;
    color: #a08f83;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.footer-container {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
    gap: 2.5rem;
    align-items: start;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;

    box-sizing: border-box;
}

.footer-middle,
.footer-middle2,
.footer-right {
    align-self: start;
    min-width: 0;
}

.footer-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 430px;
    height: auto;
    object-fit: contain;
}

.footer-logo .logo-circle.small {
    width: 110px;
    height: 110px;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
    flex-shrink: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.footer-logo .navbar-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.footer-brand .brand-name {
    font-family: 'Borel', serif;
    font-size: clamp(1.45rem, 1.7vw, 1.75rem);
    font-weight: 500;
    color: #efe4da;
    line-height: 1.1;
    letter-spacing: 0.5px;
    white-space: normal;
}

/* remove any old tagline spacing */
.brand-line {
    display: none;
}

/* Some pages use an extra wrapper around the social icons.
   Normalize it to behave exactly like the left brand column content wrapper. */
.footer-left-social {
    display: block;
    width: 100%;
    margin-top: 0;
}

/* Ensure social row always aligns within the left column layout,
   even if the social row is placed inside/around different wrappers. */
.footer-left .footer-social-row,
.footer-left-social .footer-social-row {
    margin-top: 1.3rem;
    width: 100%;
}

/* If a page duplicates social markup outside the left column, keep it visually consistent.
   This prevents overflow/drift from workshop-specific HTML variants. */
.site-footer .footer-social-row {
    box-sizing: border-box;
}


/* hover */
.footer-social-link:hover{
    transform:translateY(-2px);
    color:#FFD3AC;
} 

/* Other footer columns used in HTML */
.footer-middle,
.footer-middle2,
.footer-right {
    min-width: 0;
}

/* Column headings */
.footer-container h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #F8F2EE;
    margin-bottom: 0.95rem;
}

/* Footer link lists */
.footer-links,
.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}
/* ===== FOOTER CONTACT COLORS ===== */

/* Phone:, Email:, Location: labels */
.contact-list li {
    color: #8E6F79;
    line-height: 1.9;
}

/* Actual links/text */
.contact-list li a {
    color: #F1E7EA;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

/* Hover effect */
.contact-list li a:hover {
    color: #D8A6B5;
}


.footer-links a {
    color: #D8C8CF;
    text-decoration: none;
    font-weight: 500;
}

.footer-links a:hover,
.contact-list a:hover,
.footer-links a:focus-visible,
.contact-list a:focus-visible {
    color: #F4D3DC;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-list a {
    color: #D8C8CF;
    text-decoration: none;
    font-weight: 500;
}

.contact-list a:hover {
    color: #F4D3DC;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* MOBILE */
@media (max-width: 768px) {

    .site-footer {
        width: 100%;
        max-width: 100%;
        padding: 1.7rem 0 0.7rem;
        box-sizing: border-box;
    }

    .footer-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 24px;
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        column-gap: 24px;
        row-gap: 1.3rem;
        box-sizing: border-box;
    }
    /* Social icons - Mobile only */
.footer-social {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-social a:hover,
.footer-social a:focus {
    color: #d9a45b;
}

.footer-social i {
    font-size: 28px;
}

/* Footer links on mobile */
.footer-links a,
.footer-contact a {
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    transition: color .25s ease, text-decoration-color .25s ease;
}

.footer-links a:hover,
.footer-links a:focus,
.footer-contact a:hover,
.footer-contact a:focus {
    color: #d9a45b;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

    /* Brand occupies full width */
    /* Brand occupies full width */
.footer-left {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: 0 0 24px;
}

.footer-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0;
}

.footer-logo {
    width: 54px;
    max-width: 54px;
    height: 54px;
    flex: 0 0 54px;
}

.footer-logo .logo-circle.small {
    width: 68px;
    height: 68px;
    flex: 0 0 54px;
    border-radius: 50%;
}

.footer-brand .brand-name {
    font-size: 1rem;
    line-height: 1.15;
    font-weight: 500;
    white-space: nowrap;
    margin: 0;
}

    /* Hide Workshop Categories on mobile */
    .footer-middle2 {
        display: none;
    }

    /* Quick Links + Contact */
    .footer-middle,
    .footer-right {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        align-self: start;
    }

    .footer-container h4 {
        font-size: 0.95rem;
        line-height: 1.25;
        margin: 0 0 0.75rem;
    }

    .footer-links,
    .contact-list {
        margin: 0;
        padding: 0;
        gap: 0.55rem;
    }

    .footer-links a,
    .contact-list li,
    .contact-list li a {
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .footer-links a {
        font-weight: 500;
    }

    .contact-list li {
        font-weight: 400;
    }

    .contact-list li a {
        font-weight: 600;
    }

    /* Social icons — always one row */
    .footer-social-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 14px;
        margin-top: 1rem;
        width: 100%;
    }

    .footer-social-link,
    .footer-social-row a {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px;
        flex: 0 0 34px;
        padding: 0 !important;
        margin: 0 !important;
    }

    .footer-social-link svg,
    .footer-social-row a svg,
    .footer-social-link img,
    .footer-social-row a img,
    .footer-social-link i,
    .footer-social-row a i {
        width: 22px !important;
        height: 22px !important;
        font-size: 22px !important;
    }

    .footer-bottom {
        width: 100%;
        margin-top: 1.4rem;
        padding: 0.9rem 10px 0;
        box-sizing: border-box;
        text-align: center;
        font-size: 0.78rem;
        line-height: 1.4;
    }
}


.footer-cta-card {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.8rem 1.8rem 1.4rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,247,238));
    border-radius: 24px;
    border: 1px solid rgba(212,168,153,0.24);
    box-shadow: 0 24px 60px rgba(94,77,71,0.08);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
}


.footer-cta-copy .section-title {
    margin-bottom: 0.35rem;
}

.footer-cta-actions {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer-cta-actions .btn {
    min-width: 170px;
}


/* Compact premium floating controls (pill + WhatsApp button) */
/* ==========================================
   FLOATING REGISTER BUTTON
   ========================================== */

.floating-request-btn {
    position: fixed;
    right: 24px;
    bottom: 88px;

    z-index: 9998;

    box-sizing: border-box;

    width: 210px !important;
    max-width: 210px !important;
    font-size: 11px !important;
    min-height: 48px;

    padding: 13px 24px;

    background: #b35d4b;
    color: #fff;

    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 999px;

    box-shadow: 0 12px 30px rgba(179,93,75,0.18);

    text-decoration: none;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(20px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0.35s ease;
}

.floating-request-btn.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.floating-request-btn:hover {
    transform: translateY(-3px);
}

#floating-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 20px;

    width: 48px;
    height: 48px;
    min-width: 48px;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,248,242,0.96);
    border: 1px solid rgba(94, 77, 71, 0.08);
    box-shadow: 0 18px 42px rgba(94, 77, 71, 0.08);

    z-index: 9999;

    /* IMPORTANT */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

#floating-whatsapp::before {
    content: '';
    display: inline-flex;
    width: 24px;
    height: 24px;
    background-image: url("../assets/icon/whatsapp-icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#floating-whatsapp::after {
    display: none;
}

#floating-whatsapp:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(94, 77, 71, 0.12);
}

#floating-whatsapp svg {
    display: none;
}


@media (max-width: 768px) {

    .floating-request-btn,
    .floating-request-btn.show {
        right: 16px !important;
        left: auto !important;
        bottom: 76px !important;

        width: auto !important;
        max-width: calc(100vw - 32px) !important;
        min-width: 0 !important;

        height: 35px !important;
        min-height: 35px !important;

        padding: 8px 10px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;

        box-sizing: border-box !important;
        transform: translateY(0) !important;
    }

    #floating-whatsapp {
        right: 14px !important;
        bottom: 14px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }
}

    #floating-whatsapp{
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* .site-footer {
        width: 100%;
        max-width: 100%;
        padding: 2.4rem 0 1.1rem;
    }

    .site-footer .footer-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.75rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 1rem;
    }

    .footer-left,
    .footer-middle,
    .footer-middle2,
    .footer-right {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        text-align: left;
    }

    .footer-brand {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 0.9rem;
    }

    .footer-logo {
        max-width: min(100%, 300px);
        width: min(100%, 300px);
        height: auto;
    }

    .footer-brand .brand-name {
        font-size: clamp(1.7rem, 8vw, 2.2rem);
        max-width: 100%;
    } */

    /* .footer-links,
    .contact-list {
        gap: 0.5rem;
    } */

    .footer-bottom {
        margin-top: 1.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }


#floating-whatsapp.show {
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 640px) {
    

    /* .floating-request-btn {
    left: 50%;
    right: auto;
    bottom: 76px;
    width: fit-content;
    max-width: calc(100vw - 32px);
    min-width: 0;
    min-height: 42px;
    height: 42px;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
    transform: translateX(-50%);
} */

    .footer-cta-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-cta-actions {
        justify-content: center;
    }

    .footer-cta-actions .btn {
        min-width: 160px;
    }

    #floating-whatsapp {
        width: 42px;
        height: 42px;
        right: 14px;
        bottom: 18px; /* keeps ~12-14px gap to pill */
    }
}

/* -----------------------
   Navbar Instagram icon styling
   ----------------------- */
.nav-item-ig .nav-link { display:inline-flex; align-items:center; gap:0.6rem; padding: 0.65rem 0.9rem; border-radius: 8px; }
.nav-item-ig svg { width: 18px; height: 18px; opacity:0.95; transition: transform 0.18s ease, stroke 0.18s ease, fill 0.18s ease; stroke: var(--nav-text); }
.nav-item-ig .nav-link:hover { background: rgba(200,155,136,0.08); }
.nav-item-ig .nav-link:hover svg { transform: translateY(-1px) scale(1.03); stroke: var(--nav-hover); }

/* -----------------------
   Active Navbar Page
   ----------------------- */
/* Active navbar item */
.nav-link.active {
    background: transparent;
    color: #D9745B !important;    border-radius: 12px;    border-radius: 0;
    font-weight: 600;
    padding: 0.55rem 0.78rem;
    transition: all 0.2s ease;
}

.nav-link.active::after {
    width: 65%;
}

.nav-link.active:hover {
    background: transparent;
    transform: translateY(-1px);
}


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

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

html {
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
}

body {
    font-family: 'Google Sans', sans-serif;
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: linear-gradient(
        180deg,
        #F8F2EC 0%,
        #FDF9F5 100%
    );

    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: clip;
}

html,
body,
header,
footer,
section,
.navbar,
.navbar-container,
.section-container,
.site-footer,
.footer-container,
.hero-image-banner,
.workshop-banner,
.shop-banner,
.gift-banner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.section-container,
.page-intro{
    width: 100%;
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

/* ================================
   NAVBAR STYLES
   ================================ */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;

    background: var(--navbar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0 8px 32px rgba(94, 77, 71, 0.05);
    border-bottom: 1px solid rgba(214, 213, 139, 0.16);

    z-index: 1000;

    transition:
        background 0.34s ease,
        backdrop-filter 0.34s ease,
        box-shadow 0.34s ease,
        border-color 0.34s ease;
}



.navbar.scrolled {
    background: var(--navbar-scrolled);
    backdrop-filter: blur(24px) saturate(1.08);
    -webkit-backdrop-filter: blur(24px) saturate(1.08);
    box-shadow: 0 14px 42px rgba(94, 77, 71, 0.09);
    border-bottom: 1px solid rgba(212, 168, 153, 0.16);
}



.navbar-container {
    max-width: 1700px;
    height: 72px;

    margin: 0 auto;
    padding: 0 2rem;

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

.navbar-logo {
    display: flex;
    align-items: center;
    gap: 12px;

    cursor: pointer;
    transition: all 0.3s ease;
}

.navbar-logo:hover {
    opacity: 0.85;
}

.logo-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4a899 0%, #e5c4b3 100%);
    box-shadow: 0 3px 10px rgba(212,168,153,0.12),
            inset 0 1px 4px rgba(255,255,255,0.2);    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.logo-monogram {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.5px;
    font-family: 'Outfit', sans-serif;
    text-shadow: 0 1px 3px rgba(94, 77, 71, 0.2);
}

.logo-circle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-logo:hover .logo-circle::before {
    opacity: 1;
}

.logo-text-wrapper {
    display: flex;
    align-items: center;
    height: 72px;
}

.logo-text {
    font-family: 'Borel', serif;
    font-size: 1.22rem;
    color: var(--deep-taupe);

    line-height: 1;
    letter-spacing: 0;

    display: flex;
    align-items: center;

    position: relative;
    top: 5px;
}

.navbar-logo:hover .logo-text {
    color: #8a6a5f;
}


.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.18rem;
    align-items: center;
}

.nav-item {
    margin: 0;
}

.nav-link {
    display: block;
    padding: 0.58rem 0.82rem;
    color: var(--nav-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 560;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
    position: relative;
    letter-spacing: 0.18px;
    font-family: 'Plus Jakarta Sans', serif;
}

.nav-whatsapp-cta .nav-link {
    /* premium minimal WhatsApp pill inside navbar */
    background: rgba(179,179,71,0.12);
    border: 1px solid rgba(179,179,71,0.28);
    color: #C46D5B;
    border-radius: 999px;

    padding: 0.42rem 0.7rem;
    min-height: 0;
    height: auto;

    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: 0.1px;
    font-size: 0.9rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    box-shadow: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nav-whatsapp-cta .nav-link::before {
    content: '';
    display: inline-flex;
    width: 20px;
    height: 20px;
    background-image: url("../assets/icon/whatsapp-icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0.35rem;
}

.nav-whatsapp-cta .nav-link .nav-whatsapp-icon {
    display: none;
}

.nav-whatsapp-cta .nav-link:hover,
.nav-whatsapp-cta .nav-link:focus {
    background:#C46D5B;
    color: #ffffff;
    border-color: rgba(179,179,71,0.6);
}

.nav-whatsapp-dot {
    font-size: 0.95rem;
    line-height: 1;
}

.nav-whatsapp-icon {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 auto;
}



.navbar--hero-transparent .nav-whatsapp-cta .nav-link {
    box-shadow: 0 16px 42px rgba(94, 77, 71, 0.08);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    color: #1b1d20;
}

.navbar--hero-transparent .nav-whatsapp-cta .nav-link:hover,
.navbar--hero-transparent .nav-whatsapp-cta .nav-link:focus {
    background: rgba(255, 255, 255, 0.28);
    color: #1b1d20;
}



.nav-link::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 0;
    height: 1.25px;
    background: linear-gradient(90deg, rgba(200,155,136,0.65), rgba(229,196,179,0.55));
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    box-shadow: none;
}


.nav-link:hover {
    background: transparent;
    color: #D9745B;
}

.nav-link:hover::after {
    width: 65%;
}


.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 6px;
    color: var(--nav-text);
    transition: all 0.25s ease;

    padding: 0.58rem 0.82rem;
    font-size: 0.9rem;
    font-weight: 560;
    /* SAME AS NAV */
    font-family: 'Plus Jakarta Sans', serif;
    letter-spacing: 0.02em;
}

.nav-dropdown-toggle:hover {
    color: #D9745B;
}

.dropdown-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-left: 0.12rem;
    position: relative;

}

.nav-dropdown.open .dropdown-arrow {
    transform: rotate(-135deg);
}

.nav-dropdown.open .nav-dropdown-toggle {
    background: rgba(212, 168, 153, 0.18);
    color: #7a6257;
}

.nav-dropdown-panel {
    position: absolute;
    right: 0;
    left: auto;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    background: rgba(253, 251, 248, 0.98);
    border: 1px solid rgba(212, 168, 153, 0.18);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(94, 77, 71, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
    transform: translateY(10px);
    z-index: 1000;
}

.nav-dropdown.open .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-dropdown-panel a {
    display: block;
    color: var(--soft-brown);
    text-decoration: none;
    padding: 0.4rem 0;
    font-size: 0.95rem;
    letter-spacing: 0.1px;
    transition: color 0.25s ease;
}

.nav-dropdown-panel a:hover {
    color: var(--deep-taupe);
}

@media screen and (max-width: 768px) {
    .navbar,
    .navbar--hero-transparent {
        background: rgba(247, 244, 240, 0.97) !important;
        backdrop-filter: blur(18px) saturate(1.08);
        -webkit-backdrop-filter: blur(18px) saturate(1.08);
        box-shadow: 0 12px 30px rgba(94, 77, 71, 0.08) !important;
        border-bottom: 1px solid rgba(212, 168, 153, 0.18) !important;
    }

    .navbar--hero-transparent .nav-link,
    .navbar--hero-transparent .logo-text,
    .navbar--hero-transparent .nav-link.active,
    .navbar--hero-transparent .hamburger-menu span {
        color: var(--nav-text) !important;
        text-shadow: none !important;
    }

    .nav-dropdown-panel {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 2rem 0 2rem;
        display: block;
    }

    .nav-dropdown.open .nav-dropdown-panel {
        max-height: 520px;
    }

    .nav-dropdown-panel a {
        padding-left: 0;
        padding: 0.65rem 0;
    }
}


/* Hamburger Menu */
.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
    z-index: 1001;
}

.hamburger-menu span {
    width: 24px;
    height: 2.5px;
    background-color: var(--deep-taupe);
    border-radius: 2px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar--hero-transparent .hamburger-menu span {
    background-color: var(--deep-taupe);
}

.navbar--hero-transparent.scrolled .hamburger-menu span,
.navbar--hero-transparent .hamburger-menu.active span {
    background-color: var(--deep-taupe);
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(9px, 9px);
    background-color: var(--muted-terracotta);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
    background-color: var(--muted-terracotta);
}

/* Mobile Navigation */
@media screen and (max-width: 768px) {
    .navbar-container {
        padding: 0.95rem 1.1rem;
    }

    .navbar-logo {
        flex: 0 1 auto;
        min-width: 0;
    }

    .logo-text-wrapper {
        flex-shrink: 0;
        min-width: 0;
    }

    .logo-text {
        white-space: nowrap;
    }

    .hamburger-menu {
        display: flex;
        margin-left: auto;
        flex-shrink: 0;
    }

    .nav-menu {
        position: fixed;
        left: 0;
        right: 0;
        top: 68px;
        flex-direction: column;
        background: rgba(253, 251, 248, 0.98);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        text-align: left;
        transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease, visibility 0.24s ease;
        gap: 0;
        padding: 1.5rem 0;
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border-bottom: 1px solid rgba(212, 168, 153, 0.15);
        max-height: calc(100vh - 82px);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-101%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        display: none;
    }

    .nav-menu.active {
        left: 0;
        right: 0;
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: flex;
    }

    .navbar--hero-transparent .nav-menu.active .nav-link {
        color: var(--nav-text) !important;
    }

    .navbar--hero-transparent .nav-menu.active .nav-link.active {
        background: rgba(212, 168, 153, 0.14);
    }

    .nav-item {
        width: 100%;
        margin: 0;
    }

    .nav-link {
        display: block;
        padding: 1rem 1.25rem;
        border-radius: 0;
        font-size: 1rem;
        letter-spacing: 0.16px;
    }

    .nav-link:hover::after {
        width: 0;
    }

    .nav-link:hover {
        background-color: rgba(212, 168, 153, 0.08);
        color: var(--muted-terracotta);
    }

    .nav-dropdown-panel {
        padding: 0 1.25rem 0.8rem;
    }
}

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

.hero {
    min-height: 360px;
    padding: 90px 40px 60px;
    border-radius: 0 0 28px 28px;

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

    background: linear-gradient(
        180deg,
        #F7F4F0 0%,
        #F7F4F0 100%
    );

    position: relative;
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: none; /* removed overlay */
    pointer-events: none;
    z-index: 2;
}

/* Hero Image Banner */
.hero-image-banner {
    position: relative;
    width: 100%;
    height: 525px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin-top: 0;
    border-radius: 0;
    box-shadow: 0 12px 32px rgba(94, 77, 71, 0.08);
}

.hero-image-banner::after {
    background:
        linear-gradient(
            180deg,
            rgba(48,28,22,0.08),
            rgba(48,28,22,0.14)
        );
}

.banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ensure hero content overlays the banner image */
.hero-image-banner .hero-content {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 1100px;
    margin: 0 auto;

    padding: 5rem 2rem 2.5rem;

    box-sizing: border-box;
    text-align: center;
}

.hero-image-banner .hero-text-container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;

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

    text-align: center;
}
.hero-image-banner .hero-title {
    color: #fff;
    font-size: 3.4rem;
    margin: 0;
    text-align: center;
}
/* Banner pages keep the standard navbar shell on mobile; desktop can still use the transparent hero treatment when intentionally enabled. */
.navbar--hero-transparent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(247, 244, 240, 0.9);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    box-shadow: 0 10px 28px rgba(94, 77, 71, 0.08);
    border-bottom: 1px solid rgba(212, 168, 153, 0.18);
}

.navbar--hero-transparent.scrolled {
    background: var(--navbar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 14px 42px rgba(94, 77, 71, 0.09);
    border-bottom: 1px solid rgba(212, 168, 153, 0.18);
}

.navbar--hero-transparent .nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
}

.navbar--hero-transparent .logo-text {
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
}

.navbar--hero-transparent.scrolled .logo-text,
.navbar--hero-transparent.scrolled .nav-link {
    color: var(--nav-text) !important;
    text-shadow: none;
}

.navbar--hero-transparent .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08);
}

.navbar--hero-transparent.scrolled .nav-link:hover {
    color: #6b554f !important;
    background: rgba(212, 168, 153, 0.08);
}

.navbar--hero-transparent .nav-link.active {
    background: transparent;
    color: #D9745B !important;
    border-radius: 0;
}

.navbar--hero-transparent.scrolled .nav-link.active {
    background: transparent;
    color: #ffff !important;
    border-radius: 0;
}

/* .navbar--hero-transparent .nav-link.active::after {
    display: none;
}

.navbar--hero-transparent .nav-link::after {
    display: none;
} */

.navbar--hero-transparent + .hero-image-banner {
    margin-top: 0;
}

/* Extra safety: when navbar is overlay-transparent, avoid any additional top gap */
.navbar--hero-transparent + .hero-image-banner,
.navbar--hero-transparent + .workshop-banner,
.navbar--hero-transparent + .shop-banner,
.navbar--hero-transparent + .gift-banner {
    margin-top: 0;
}


/* Extra safety: prevent the hero overlay pages from reserving space */
.navbar--hero-transparent .hero-image-banner {
    margin-top: 0;
}



.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}

/* WORKSHOP HERO BANNER */

.workshop-banner {
    width: 100%;
    height: 510px;
    overflow: hidden;
    position: relative;
}

.workshop-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.workshop-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.workshop-slide.active {
    opacity: 1;
    z-index: 1;
}

.workshop-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* arrows */

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;

    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);

    color: white;
    font-size: 24px;
    cursor: pointer;

    transition: 0.3s ease;
}

.slider-arrow:hover {
    background: rgba(255,255,255,0.28);
}

.prev {
    left: 24px;
}

.next {
    right: 24px;
}

/* dots */

.slider-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;

    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;

    background: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: 0.3s ease;
}

.dot.active {
    width: 28px;
    border-radius: 30px;
    background: rgba(255,255,255,0.95);
}

/* mobile */
@media (max-width: 768px) {
    .workshop-banner,
    .shop-banner,
    .gift-banner {
        width: 100%;
        height: auto;
        overflow: hidden;
        position: relative;
    }

    .workshop-slider,
    .shop-slider,
    .gift-slider {
        width: 100%;
        position: relative;
        aspect-ratio: 1240 / 300;
        height: auto;
    }

    .workshop-slide,
    .shop-slide,
    .gift-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .workshop-slide.active,
    .shop-slide.active,
    .gift-slide.active {
        opacity: 1;
        z-index: 1;
    }

    .workshop-slide img,
    .shop-slide img,
    .gift-slide img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
        background: #f5f1ed;
    }

}

/* SHOP + GIFT SLIDER SHARED */

.shop-banner,
.gift-banner {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
}

.shop-slider,
.gift-slider {
    width: 100%;
    height: 420PX;
    position: relative;
}

.shop-slide,
.gift-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.shop-slide.active,
.gift-slide.active {
    opacity: 1;
    z-index: 1;
}

.shop-slide img,
.gift-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* arrows */

.shop-arrow,
.gift-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;

    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);

    color: white;
    font-size: 24px;
    cursor: pointer;
}

.prev-shop,
.prev-gift {
    left: 24px;
}

.next-shop,
.next-gift {
    right: 24px;
}

/* dots */

.shop-dots,
.gift-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}

.shop-dot,
.gift-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
}

.shop-dot.active,
.gift-dot.active {
    width: 28px;
    border-radius: 30px;
    background: rgba(255,255,255,0.95);
}

@media (max-width: 768px) {
    .slider-arrow,
    .shop-arrow,
    .gift-arrow {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .prev,
    .prev-shop,
    .prev-gift {
        left: 8px;
    }

    .next,
    .next-shop,
    .next-gift {
        right: 8px;
    }

    .slider-dots,
    .shop-dots,
    .gift-dots {
        gap: 6px;
        bottom: 10px;
    }

    .dot,
    .shop-dot,
    .gift-dot {
        width: 7px;
        height: 7px;
    }

    .dot.active,
    .shop-dot.active,
    .gift-dot.active {
        width: 18px;
        border-radius: 999px;
    }
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 800px at 20% 50%, rgba(229, 196, 179, 0.08) 0%, transparent 50%),
                radial-gradient(circle 600px at 80% 80%, rgba(212, 168, 153, 0.06) 0%, transparent 50%);
    z-index: 1;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.shape-blob {
    position: absolute;
    filter: blur(48px);
    opacity: 0.16;
}

.shape-blob-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #d4a899 0%, transparent 70%);
    top: -150px;
    left: -100px;
    animation: floatBlob 12s ease-in-out infinite;
}

.shape-blob-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #e5c4b3 0%, transparent 70%);
    bottom: -120px;
    right: -80px;
    animation: floatBlob 14s ease-in-out infinite 1s;
}

.gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(217,116,91,0.03) 0%,
        rgba(217,116,91,0.06) 100%
    );
    opacity: 1;
}

.hero-content {
    text-align: center;
    max-width: 850px;
    z-index: 10;
    animation: fadeInUp 1.2s ease-out;
    position: relative;
}

.hero-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.services-section {
    padding: 0.95rem 0 1.1rem;
    background: linear-gradient(180deg, rgba(255, 245, 236, 0.98), rgba(255, 250, 247, 1));
}

/* Premium vertical rhythm tweaks for signature experiences (index.html only, no layout redesign) */
.services-section .section-header {
    margin-bottom: 1.1rem;
}

.services-section .section-header .section-subtitle {
    margin-top: 0.05rem;
    margin-bottom: 0.55rem;
}

.services-section .service-badges {
    margin-top: 0.35rem;
}

.services-section .service-grid {
    margin-top: 1.0rem;
    gap: 1.25rem;
}

.services-section .service-card {
    padding: 0.95rem 0.95rem;
    min-height: 162px;
    height: auto;
    gap: 0.35rem;
}

.services-section .service-card-title {
    margin: 0;
    line-height: 1.15;
}

.services-section .service-card-tags {
    gap: 0.3rem;
    margin-top: 0.1rem;
}

.services-section .service-tag {
    padding: 0.26rem 0.6rem;
}

.services-section .service-card-link {
    margin-top: 0.05rem;
}


.service-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.9rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.service-card {
    background: var(--white);
    border: 1px solid rgba(179, 181, 120, 0.16);
    border-radius: 14px;
    padding: 0.8rem 0.85rem;
    box-shadow: 0 4px 10px rgba(94, 77, 71, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.25rem;
    height: 148px; /* compact card height */
    min-height: 148px;
    flex: 0 1 300px;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
    opacity: 0;
    transform: translateY(10px);
}

.service-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(94, 77, 71, 0.07);
    border-color: rgba(179, 181, 120, 0.2);
    background: rgba(179, 179, 71, 0.01);
}

.service-card-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(179, 179, 71, 0.1), rgba(214, 213, 139, 0.05));
    border: 1px solid rgba(179, 181, 120, 0.14);
}

.service-card-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.service-card-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.18;
    color: var(--heading-warm);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
}

.service-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
}

.service-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.55rem;
    border-radius: 999px;
    background: rgba(179, 179, 71, 0.07);
    border: 1px solid rgba(179, 181, 120, 0.15);
    color: #6f5a52;
    font-size: 0.68rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #C46D5B;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.25s ease, transform 0.25s ease;
    align-self: flex-start;
    margin: 0;
    padding: 0;
}

.service-card-link:hover {
    color: #8b8b2a;
    transform: translateX(2px);
}

.service-card-link span {
    transition: transform 0.25s ease;
}

.service-card-link:hover span {
    transform: translateX(2px);
}

/* Trust badges under services subtitle */
.service-badges {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 0.45rem;
    flex-wrap: wrap;
}

.service-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(179,179,71,0.06);
    border: 1px solid rgba(179,181,120,0.12);
    color: #C46D5B;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.section-header--centered {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
    text-align: center;
}

.services-section .section-header {
    margin-bottom: 1.25rem;
}

.section-header--centered .section-title {
    max-width: 780px;
}

@media screen and (max-width: 992px) {
    .service-grid {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.9rem;
    }

    .service-card {
        flex: 0 1 calc(50% - 0.45rem);
    }
}

/* Contact page: keep Contact Options cards aligned in one responsive grid */
.contact-options-section .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
    align-items: stretch;
    justify-items: stretch;
    margin-top: 0.9rem;
    margin-bottom: 0.6rem;
}

.contact-options-section .service-card {
    height: 100%;
    min-height: 148px;
}

.contact-options-section .service-card > div {
    display: flex;
    align-items: flex-start;
}

/* Ensure Workshops card doesn’t break icon alignment */
.contact-options-section .service-card svg {
    vertical-align: top;
}


@media screen and (max-width: 700px) {
    .services-section {
        padding: 1.5rem 0 0.9rem;
    }

    .service-grid {
        justify-content: center;
        flex-direction: column;
        gap: 0.8rem;
    }

    .service-card {
        flex: 1 1 100%;
        height: auto;
        min-height: 150px;
        padding: 0.85rem 0.85rem;
        gap: 0.35rem;
    }

    .service-card-title {
        font-size: 0.98rem;
    }

    .service-tag {
        font-size: 0.68rem;
        padding: 0.28rem 0.55rem;
    }

    .service-card-link {
        font-size: 0.82rem;
    }
}


.hero-accent {
    font-size: 0.9rem;
    color: #1E121C;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    animation: fadeInDown 1s ease-out 0.1s both;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #1E121C;
    text-shadow:#1E121C;

    line-height: 1.2;
    letter-spacing: -1.5px;
    animation: fadeInDown 1.1s ease-out 0.2s both;
    font-family: 'Cormorant Garamond', serif;
}


/* ABOUT PAGE ONLY */
.about-page #about {
    padding-top: 80px;
    padding-bottom: 30px;
    min-height: auto;
    overflow: visible;
}

.about-page #about .hero-content {
    padding-top: 20px;
}

.hero-handwritten {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.1rem;
    color: #1E121C;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.5px;
    opacity: 0.95;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: #1E121C;
    max-width: 650px;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.3px;
    animation: fadeInUp 1s ease-out 0.4s both;
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 1.2rem;
}

.hero-tag {
    font-size: 0.84rem;
    color: var(--deep-taupe);
    background: rgba(200, 155, 136, 0.14);
    padding: 0.8rem 1rem;
    border-radius: 999px;
    letter-spacing: 0.5px;
}

.hero-buttons {
    display: flex;
    flex-direction: row;
    gap: 1.8rem;
    justify-content: center;
    margin-top: 1.4rem;
    flex-wrap: wrap;
    animation: fadeInUp 1.1s ease-out 0.6s both;
}

/* Buttons */
.btn {
    padding: 1rem 2.8rem;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.4px;
    box-shadow: 0 8px 25px rgba(212, 168, 153, 0.15);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--button-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--button-primary-hover);
}


.btn-secondary {
    background: transparent;
    border: 1.5px solid var(--button-secondary-border);
    color: var(--deep-taupe);
}

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

.btn-whatsapp {
    background: linear-gradient(135deg, #a8b8a8 0%, #96a896 100%);
    color: var(--white);
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #96a896 0%, #7a9c7a 100%);
    box-shadow: 0 16px 48px rgba(168, 184, 168, 0.35);
    transform: translateY(-5px);
}

/* Floral Accents */
.floral-corner {
    position: absolute;
    width: 150px;
    height: 150px;
    opacity: 0.35;
    z-index: 2;
}

.floral-top-left {
    top: 30px;
    left: 20px;
    animation: floatAccent 14s ease-in-out infinite;
}

.floral-bottom-right {
    bottom: 20px;
    right: 20px;
    animation: floatAccent 16s ease-in-out infinite 1s;
}

.floral-corner svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(212, 168, 153, 0.12));
}

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatBlob {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(35px) scale(1.03);
    }
}

@keyframes floatAccent {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(20px) rotate(3deg);
    }
}

@keyframes floatIcon {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

@media screen and (max-width: 1024px) {
    .hero-image-banner {
        height: clamp(240px, 30vw, 360px);
    }

    .navbar-container {
        padding: 1.2rem 2rem;
    }

    .hero {
        padding: 3.5rem 1.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-buttons {
        gap: 1.2rem;
    }

    .btn {
        padding: 0.9rem 2.2rem;
        font-size: 0.9rem;
    }

    .shape-blob-1 {
        width: 300px;
        height: 300px;
        top: -80px;
        left: -50px;
    }

    .shape-blob-2 {
        width: 250px;
        height: 250px;
        bottom: -80px;
        right: -50px;
    }

    .section-container {
        padding: 0 1.5rem;
    }

    .explore-grid,
    .featured-grid,
    .why-grid {
        gap: 1.5rem;
    }

    .section-header {
        margin-bottom: 3rem;
    }
}

@media screen and (max-width: 768px) {
    html,
    body,
    header,
    main,
    footer,
    section,
    .navbar,
    .navbar-container,
    .section-container,
    .hero-image-banner,
    .workshop-banner,
    .shop-banner,
    .gift-banner,
    .site-footer,
    .footer-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .navbar {
position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    background: #f7f4f0 !important;
    }

    .navbar--hero-transparent,
    .navbar--hero-transparent.scrolled {
        position: relative !important;
        background: #f7f4f0 !important;
        box-shadow: 0 10px 28px rgba(94, 77, 71, 0.08) !important;
        border-bottom: 1px solid rgba(212, 168, 153, 0.2) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .navbar-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 72px;
    height: auto;
    }

    .navbar--hero-transparent .nav-link,
    .navbar--hero-transparent .logo-text,
    .navbar--hero-transparent .nav-link.active,
    .navbar--hero-transparent .hamburger-menu span {
        color: var(--nav-text) !important;
        text-shadow: none !important;
    }

    .featured-grid,
    .workshop-grid,
    .collection-grid,
    .service-grid,
    .why-grid,
    .location-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .featured-card,
    .collection-card,
    .workshop-card,
    .service-card,
    .location-card,
    .why-card {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .featured-card-content,
    .collection-card-content,
    .card-content,
    .workshop-card-content,
    .location-card-content,
    .card-image-container {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .cta-buttons {
        width: 100%;
        min-width: 0;
    }

    .hero-image-banner {
        height: auto;
        margin-top: 0;
        border-radius: 0 0 12px 12px;
        overflow: hidden;
    }

    .hero-image-banner .banner-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    .workshop-banner,
    .shop-banner,
    .gift-banner {
        width: 100%;
        height: auto;
        overflow: hidden;
        position: relative;
    }

    .workshop-slider,
    .shop-slider,
    .gift-slider {
        width: 100%;
        position: relative;
        aspect-ratio: 1240 / 300;
        height: auto;
    }

    .workshop-slide,
    .shop-slide,
    .gift-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        opacity: 0;
    }

    .workshop-slide.active,
    .shop-slide.active,
    .gift-slide.active {
        opacity: 1;
        z-index: 1;
    }

    .workshop-slide img,
    .shop-slide img,
    .gift-slide img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .navbar-container {
        padding: 1rem 1.5rem;
    }

    .logo-circle {
        width: 38px;
        height: 38px;
    }

    .logo-monogram {
        font-size: 0.6rem;
    }

    .logo-text {
        font-size: 1rem;
    }

    .hero {
        padding: 2.5rem 1rem;
    }

    .hero-accent {
        font-size: 0.82rem;
    }

    .hero-title {
        font-size: 2rem;
        line-height: 1.3;
    }

    .hero-handwritten {
        font-size: 1rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 0.9rem;
        align-items: stretch;
        margin-top: 2rem;
    }

    .btn {
        width: 100%;
        padding: 1rem 2rem;
        font-size: 0.9rem;
    }

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-whatsapp:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 48px rgba(142, 101, 121, 0.35);
    }

    .floral-corner {
        width: 120px;
        height: 120px;
        opacity: 0.28;
    }

    .floral-top-left {
        top: 20px;
        left: 10px;
    }

    .floral-bottom-right {
        bottom: 10px;
        right: 10px;
    }

    .shape-blob-1 {
        width: 200px;
        height: 200px;
        top: -60px;
        left: -40px;
        opacity: 0.2;
    }

    .shape-blob-2 {
        width: 180px;
        height: 180px;
        bottom: -60px;
        right: -40px;
        opacity: 0.2;
    }

    .section-container {
        padding: 0 1.2rem;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    .explore-grid,
    .featured-grid,
    .why-grid,
    .service-grid,
    .collection-grid,
    .workshop-grid,
    /* .gallery-grid, */ */
    /* /* .category-grid  */
    {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        overflow-x: hidden;
    }

    .explore-card,
    .featured-card,
    .why-card {
        padding: 1.5rem;
        overflow: hidden;
    }

    .explore-card-image,
    .featured-card-image {
        height: 180px;
    }

    .featured-card-title,
    .explore-card-title {
        font-size: 1.1rem;
    }

    .featured-card-title {
    font-size: 1.25rem;
    line-height: 1.2;
    min-height: 0;
    margin-bottom: 0.3rem;
}

.featured-card-content {
    padding: 1rem;
}

.featured-card-meta {
    gap: 0.75rem;
    margin-top: 0;
    margin-bottom: 0.55rem;
}

    .explore-section,
    .featured-section,
    .why-choose-section {
        padding: 3rem 0;
    }
}

@media screen and (max-width: 640px) {
    .navbar-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0.9rem 1rem;
    }

    .logo-circle {
        width: 36px;
        height: 36px;
    }

    .logo-monogram {
        font-size: 0.55rem;
    }

    .logo-text {
        font-size: 0.95rem;
    }

    .hero {
        margin-top: 0;
        padding: 1rem;
    }

    .section-container,
    .page-intro,
    .section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-buttons,
    .cta-buttons,
    .footer-cta-actions,
    .empty-state-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn,
    .cta-buttons .btn,
    .footer-cta-actions .btn,
    .empty-state-actions .btn {
        width: 100%;
        max-width: 100%;
    }

    .btn {
        font-size: 0.92rem;
        padding: 0.85rem 1.6rem;
    }

    .workshop-grid,
    .collection-grid,
    /* .gallery-grid, */
    .category-grid,
    .service-grid,
    .location-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
}

/* .visual-card-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
    width:100%;
    align-items:start;
} */

@media screen and (max-width: 640px) {
    .hero-accent {
        font-size: 0.78rem;
        letter-spacing: 1px;
    }

    .hero-title {
        font-size: 1.6rem;
        line-height: 1.3;
    }

    .hero-handwritten {
        font-size: 0.9rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .hero-buttons {
        gap: 0.8rem;
    }

    .btn {
        font-size: 0.85rem;
        padding: 0.85rem 1.8rem;
    }

    .floral-corner {
        width: 100px;
        height: 100px;
        opacity: 0.25;
    }

    .section-container {
        padding: 0 1rem;
    }

    .section-title {
        font-size: 1.4rem;
        margin-bottom: 0.6rem;
    }

    .section-subtitle {
        font-size: 0.85rem;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .explore-card-image,
    .featured-card-image {
        height: 160px;
    }

    .explore-card-content,
    .featured-card-content,
    .why-card {
        padding: 22px;
    }

    .explore-card-title,
    .featured-card-title,
    .why-card-title {
        line-height: 1.3;
        min-height: 58px;
    }

    .explore-card-description,
    .featured-card-description,
    .why-card-description {
        font-size: 0.85rem;
    }

    .icon-placeholder {
        font-size: 2.2rem;
    }

    .featured-card-pricing {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.85rem;
    }

    .btn {
        font-size: 0.8rem;
        padding: 0.8rem 1.5rem;
    }

    .section-title {
        font-size: 1.3rem;
    }

    .section-subtitle {
        font-size: 0.8rem;
    }

    .explore-card-image,
    .featured-card-image {
        height: 140px;
    }

    .explore-card-content,
    .featured-card-content,
    .why-card {
        padding: 1rem;
    }

    .explore-card-title,
    .featured-card-title,
    .why-card-title {
        font-size: 0.95rem;
    }

    .icon-placeholder {
        font-size: 2rem;
    }
}

/* ================================
   SECTION COMMON STYLES
   ================================ */

.section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media screen and (max-width: 768px) {
    .navbar-container,
    .section-container {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .section-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.section-header {
    text-align: center;
    margin-bottom: 3.2rem; /* reduced vertical spacing ~20% */
    animation: fadeInUp 0.8s ease-out;
}

.section-title {
    font-family: 'Amarante', cursive;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: var(--deep-taupe);
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    color: var(--soft-brown);
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* ================================
   EXPLORE BY EXPERIENCE SECTION
   ================================ */

.explore-section {
    background: linear-gradient(180deg, var(--cream-bg) 0%, #fdfbf8 100%);
    padding: 3rem 0 3.2rem;
    position: relative;
    overflow: hidden;
}

.explore-section .section-header {
    margin-bottom: 2rem;
}

.explore-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 153, 0.2), transparent);
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.6rem;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.explore-card {
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: 18px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 0 18px 48px rgba(94,77,71,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    opacity: 0;
    transform: translateY(24px);
    text-decoration: none;
    color: inherit;
}

.explore-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

.explore-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 72px rgba(94,77,71,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}

.explore-card-image {
    width: 100%;
    height: 158px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(249,241,232,1), rgba(238,226,216,1));
    position: relative;
    border-bottom: 1px solid rgba(94,77,71,0.05);
}

.explore-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.65s ease;
}

.explore-card:hover .explore-card-image img {
    transform: scale(1.03);
}

.image-placeholder {
    width: 100%;
    height: 100%;
    transition: transform 0.65s ease, filter 0.65s ease;
    background: linear-gradient(135deg, rgba(249,241,232,0.97), rgba(237,226,216,0.97));
    position: relative;
}

.image-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 24% 24%, rgba(255,255,255,0.45), transparent 18%), radial-gradient(circle at 70% 70%, rgba(255,255,255,0.24), transparent 16%);
    opacity: 0.85;
    pointer-events: none;
}

.image-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 38%, rgba(255,255,255,0.16));
    pointer-events: none;
}

.explore-card:hover .image-placeholder {
    transform: scale(1.05);
}

.explore-card-content {
    padding: 1.8rem 1.5rem;
    background: transparent;
    position: relative;
    z-index: 2;
}

.explore-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--deep-taupe);
    margin-bottom: 0.5rem;
    letter-spacing: -0.3px;
}

.explore-card-description {
    font-size: 0.9rem;
    color: var(--soft-brown);
    line-height: 1.6;
}

.explore-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--muted-terracotta), var(--accent-warm));
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.explore-card:hover .explore-card-overlay {
    opacity: 1;
}

/* ================================
   FEATURED WORKSHOPS SECTION
   ================================ */

.location-section {
    background: var(--cream-bg);
    padding: 4rem 0;
    position: relative;
}

.location-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 153, 0.15), transparent);
}

.featured-section {
    background: var(--cream-bg);
    padding: 2.7rem 0 2.6rem;
    position: relative;
}

.featured-section .section-header {
    margin-bottom: 2.2rem;
}

.featured-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 153, 0.2), transparent);
}

.brand-story-section {
    background: #f6f1eb;
    padding: 2rem 0;
}

.brand-story-section .section-header {
    max-width: 680px;
    margin: 0 auto;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.8rem;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.featured-section .cta-buttons {
    margin-top: 1.25rem !important;
    margin-bottom: 0;
}

.featured-card {
    background: var(--card-bg);
    border: 1px solid rgba(30,18,28,0.06);
    box-shadow: var(--shadow-light);
    border-radius: 18px;
    overflow: hidden;
    /* box-shadow: 0 16px 42px rgba(94,77,71,0.08), inset 0 1px 0 rgba(255,255,255,0.65); */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px);
}

.featured-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

.featured-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 28px 70px rgba(94,77,71,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}

.featured-card-image {
    width: 100%;
    height: 170px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(249,241,232,1), rgba(238,226,216,1));
    border-bottom: 1px solid rgba(94,77,71,0.05);
}

.featured-card-image .image-placeholder {
    width: 100%;
    height: 100%;
    transition: transform 0.65s ease, filter 0.65s ease;
}

.featured-card:hover .featured-card-image .image-placeholder {
    transform: scale(1.06);
}

.featured-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.featured-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--deep-taupe);
    margin-bottom: 0.75rem;
    letter-spacing: -0.3px;
}

.featured-card-description {
    font-size: 0.9rem;
    color: var(--soft-brown);
    line-height: 1.7;
    margin-bottom: 1rem;
    flex-grow: 0;
}

.featured-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--soft-brown);
    font-size: 0.92rem;
}

.featured-card-meta span {
    background: rgba(200, 155, 136, 0.14);
    color: var(--deep-taupe);
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
}

.featured-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.book-now-btn {
    padding: 0.88rem 1.4rem;
    font-size: 0.9rem;
}

.featured-card-pricing {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--muted-terracotta);
    margin-top: auto;
}

/* ================================
   WHY CHOOSE SECTION
   ================================ */

.why-choose-section {
    background: linear-gradient(180deg, #fdfbf8 0%, var(--cream-bg) 100%);
    padding: 4rem 0; /* reduced spacing */
    position: relative;
}

.why-choose-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 153, 0.2), transparent);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.why-card {
    text-align: center;
    padding: 1.9rem 1.7rem;
    background: linear-gradient(180deg, rgba(255,247,238), rgba(255,247,238,0.95));
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(94, 77, 71, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    position: relative;
    opacity: 0;
    transform: translateY(18px);
}

.why-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

.why-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--muted-terracotta), var(--dusty-blush));
    transform: translateX(-50%);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(212, 168, 153, 0.15);
}

.why-card:hover::after {
    width: 60%;
}

.why-card-icon {
    margin-bottom: 1.5rem;
}

.icon-placeholder {
    font-size: 3rem;
    display: inline-block;
    animation: floatIcon 4s ease-in-out infinite;
}

.why-card:nth-child(1) .icon-placeholder {
    animation-delay: 0s;
}

.why-card:nth-child(2) .icon-placeholder {
    animation-delay: 0.5s;
}

.why-card:nth-child(3) .icon-placeholder {
    animation-delay: 1s;
}

.why-card:nth-child(4) .icon-placeholder {
    animation-delay: 1.5s;
}

.why-card:nth-child(5) .icon-placeholder {
    animation-delay: 2s;
}

.why-card:nth-child(6) .icon-placeholder {
    animation-delay: 2.5s;
}

.why-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--deep-taupe);
    margin-bottom: 0.75rem;
    letter-spacing: -0.2px;
}

.why-card-description {
    font-size: 0.9rem;
    color: var(--soft-brown);
    line-height: 1.7;
}



.site-footer,
footer {
    position: relative;
    z-index: 1;
}

.gallery-card img {
    height: 200px;
    object-fit: contain;
    object-position: center;
    background: #f8f4ef;
}

/* ===== FOOTER SOCIAL ICON FIX ===== */

/* .footer-social-row{
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:24px;
    flex-wrap:nowrap;
}

.footer-social-link,
.footer-social-row a{
    width:36px !important;
    height:36px !important;

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

    padding:0 !important;
    margin:0 !important;
    text-decoration:none;
    flex-shrink:0;
}

/* normalize ALL icon systems */
/* .footer-social-link svg,
.footer-social-link img,
.footer-social-link i,
.footer-social-row a svg,
.footer-social-row a img,
.footer-social-row a i{
    width:22px !important;
    height:22px !important;
    display:block !important;
    object-fit:contain;
} */

/* font awesome fix */
/* .footer-social-link i,
.footer-social-row a i{
    font-size:22px !important;
    line-height:1 !important;
} */ */



/* ===== FOOTER SOCIAL ICON FIX (ETSY STYLE) ===== */

.footer-social-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:26px;
    margin-top:24px;
    flex-wrap:nowrap;
}

/* Desktop footer social icons — horizontal row */
@media screen and (min-width: 993px) {
    .site-footer .footer-social-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 26px !important;
        width: auto !important;
    }

    .site-footer .footer-social-row > a {
        display: flex !important;
        flex-direction: row !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
    }
}

.footer-social-link,
.footer-social-row a{
    width:36px !important;
    height:36px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    text-decoration:none;
    background: transparent;
    color: #F5EFEA;

    transition: all 0.35s ease;
    flex-shrink:0;
}

/* same base size */
.footer-social-link svg,
.footer-social-row a svg{
    width:26px !important;
    height:26px !important;
    display:block;
}

/* optical balance like Etsy */
.footer-social-link[aria-label="Instagram"] svg{
    transform:scale(1);
}

.footer-social-link[aria-label="Facebook"] svg{
    transform:scale(0.92);
}

.footer-social-link[aria-label="WhatsApp"] svg{
    transform:scale(1);
}

.footer-social-link[aria-label="Pinterest"] svg{
    transform:scale(0.96);
}

/* Social icon hover */
/* Social icon hover - only for mouse/trackpad devices */
@media (hover: hover) and (pointer: fine) {
    .footer-social-link:hover,
    .footer-social-row a:hover {
        transform: translateY(-2px);
        color: #E8B7C7;
    }
}

/* Touch devices - never keep the hover colour after tapping */
/* Touch devices - keep icons at normal colour */
@media (hover: none), (pointer: coarse) {
    .footer-social-link,
    .footer-social-row a,
    .footer-social-link:hover,
    .footer-social-row a:hover,
    .footer-social-link:focus,
    .footer-social-row a:focus,
    .footer-social-link:active,
    .footer-social-row a:active {
        color: #F5EFEA !important;
        transform: none !important;
    }

    /* .footer-social-link svg,
    .footer-social-row a svg {
        color: #F5EFEA !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    } */
}



/* ==========================================
   WORKSHOP VIDEO REELS (PREMIUM CIRCULAR)
========================================== */

.workshop-reels-section{
    position: relative;
    padding: 10px 0 8px;
    overflow: hidden;
    min-height: 360px;

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

    background: #F7F3EE;
    overflow: hidden;
}

.workshop-reels-section::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;

    width:700px;
    height:320px;

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

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.06),
            transparent 70%
        );

    pointer-events:none;
}

.workshop-reels-section .reels-track{
    position: relative;
    width: 100%;
    height: 470px;
    overflow: hidden;
    cursor: grab;
    user-select: none;
}

.workshop-reels-section .reels-track::-webkit-scrollbar{
    width: 0;
    height: 0;
}

.workshop-reels-section .reels-track:active{
    cursor: grabbing;
}

/* Cards are absolutely positioned and transformed.
   Visible cards only: center, left-1, left-2, right-1, right-2
*/
.workshop-reels-section .reel-card{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 270px;
    height: 410px;

    border-radius: 34px;
    overflow: hidden;
    background: #000;

    box-shadow:
        0 22px 60px rgba(0,0,0,.18),
        0 1px 0 rgba(255,255,255,.06);

    transition:
        transform 650ms cubic-bezier(.2,.9,.2,1),
        opacity 450ms ease,
        filter 450ms ease;

    transform-origin: center center;
    opacity: 0;
    pointer-events: none;
}

.workshop-reels-section .reel-card video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CENTER */
.workshop-reels-section .reel-card.center{
    opacity: 1;
    pointer-events: auto;
    z-index: 6;
    filter: saturate(1.05) contrast(1.02);

    transform:
        translate(-50%, -52%)
        scale(0.96);
}

/* FIRST LEFT */
.workshop-reels-section .reel-card.left-1{
    opacity: .95;
    pointer-events: auto;
    z-index: 5;
    filter: saturate(.95);

    transform:
        translate(-50%, -50%)
        translateX(-200px)
        scale(.78);
}

/* FIRST RIGHT */
.workshop-reels-section .reel-card.right-1{
    opacity: .95;
    pointer-events: auto;
    z-index: 5;
    filter: saturate(.95);

    transform:
        translate(-50%, -50%)
        translateX(200px)
        scale(.78);
}

/* SECOND LEFT */
.workshop-reels-section .reel-card.left-2{
    opacity: .22;
    pointer-events: auto;
    z-index: 4;

    filter:
        blur(1px)
        brightness(.62);

    transform:
        translate(-50%, -50%)
        translateX(-360px)
        scale(.68);
}

.workshop-reels-section .reel-card.right-2{
    opacity: .22;
    pointer-events: auto;
    z-index: 4;

    filter:
        blur(1px)
        brightness(.62);

    transform:
        translate(-50%, -50%)
        translateX(360px)
        scale(.68);
}

/* HIDDEN */
.workshop-reels-section .reel-card.hidden{
    opacity: 0;
    pointer-events: none;
    z-index: 1;

    transform:
        translate(-50%, -50%)
        scale(.5);
}

.workshop-reels-section .reel-card::after{
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03) 0%,
            rgba(0,0,0,.08) 40%,
            rgba(0,0,0,.22) 100%
        );
}

/* ================================
   VIDEO POPUP MODAL
================================== */

#videoModal{
    position: fixed;
    inset: 0;
    background: rgba(12,12,12,.88);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
    z-index: 999999;
}

#videoModal.show{
    opacity: 1;
    visibility: visible;
}

#modalVideo{
    width: min(920px, 90vw);
    max-height: 86vh;
    border-radius: 26px;
    object-fit: contain;
    box-shadow: 0 35px 120px rgba(0,0,0,.55);
}

.close-video{
    position: absolute;
    top: 22px;
    right: 22px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 34px;
    cursor: pointer;
    z-index: 1000;
    transition: transform .2s ease, background .2s ease;
}

.close-video:hover{
    transform: scale(1.08);
    background: rgba(255,255,255,.20);
}

.mute-btn{
    position: absolute;
    bottom: 22px;
    right: 22px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 1000;
    transition: transform .2s ease, background .2s ease;
}

.mute-btn:hover{
    transform: scale(1.08);
    background: rgba(255,255,255,.20);
}

/* =========================
   WORKSHOP PAGE ONLY
   SAFE PREMIUM CARD DESIGN
========================= */

.workshops-section .visual-card-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(320px, 380px)
    );
    gap: 1.6rem;
    justify-content: center;
    align-items: stretch;
    margin-top: 2rem;
}

.workshops-section .workshop-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            #fffaf4 0%,
            #f7f0e8 100%
        );
    border: 1px solid rgba(160,130,95,.15);

    box-shadow:
        0 15px 40px rgba(95,72,52,.08);

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

.workshops-section .workshop-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 24px 50px rgba(95,72,52,.14);
}

.workshops-section .workshop-card .collection-card-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.workshops-section
.workshop-card
.collection-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.workshops-section
.workshop-card:hover
.collection-card-image img {
    transform: scale(1.06);
}

.workshops-section .workshop-card-content {
    display: flex;
    flex-direction: column;
    padding: 24px;

.workshops-section .workshop-card-content h3 {
    font-size: 1.55rem;
    line-height: 1.2;
    margin-bottom: .8rem;
}
}

.workshops-section .workshop-card-content p{
    color:#68574c;
    line-height:1.55;
    font-size:.95rem;
    margin:0;
}

.workshops-section .card-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1rem 0;
}

.workshops-section .card-meta-row span {
    background: rgba(126,94,67,.08);
    padding: .5rem .9rem;
    border-radius: 999px;
    font-size: .9rem;
}

.workshops-section .pricing-badge {
    display: inline-flex;
    width: fit-content;
    margin-top: auto;
    background: #6f533d;
    color: white;
    padding: .7rem 1rem;
    border-radius: 999px;
    font-weight: 600;
}

.workshops-section .workshop-cta {
    margin: 1rem 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
    border-radius: 14px;
    text-align: center;
    padding: 14px 18px;
    background: linear-gradient(
        135deg,
        #7d5b44,
        #9e7c61
    );
    color: #fff;
    font-weight: 600;
    transition: all .3s ease;
}

.workshops-section .workshop-cta:hover {
    transform: translateY(-2px);
}

.workshops-section .card-note{
    margin-top:0;
    padding-top:0;
    margin-bottom:0;
    line-height:1.45;
    font-size:.9rem;
}

/* mobile */

@media (max-width:768px){

/* workshop grid */

.workshops-section .visual-card-grid,
.workshop-grid,
.featured-grid{
    grid-template-columns:1fr;
    gap:12px;
    padding:0;
}

/* smaller shopping-style cards */
.workshop-card,
.featured-card,
.collection-card{
    border-radius:18px;
    min-width:0;
    width:100%;
    max-width:100%;
}

/* image size */
.featured-card-image {
    overflow: hidden;
}

.featured-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* compact content */
.workshop-content,
.featured-card-content{
    padding:10px;
}

.workshop-content h3{
    font-size:.95rem;
    line-height:1.3;
}
/* card */

.workshops-section .workshop-card{
    border-radius:22px;
    max-width:100%;
}

/* image */

.workshops-section
.workshop-card
/* .collection-card-image{ */
{
    height:170px;
}

/* content */

.workshops-section
/* .workshop-card-content */
{
    padding:1rem;
}

/* title */

.workshops-section
.workshop-card-content h3{
    font-size:1.9rem;
    margin-bottom:.7rem;
}

/* description */

.workshops-section
.workshop-card-content p{
    font-size:.95rem;
    line-height:1.65;
}

/* chips */

/* .workshops-section .card-meta-row{
    gap:.45rem;
    margin:.8rem 0;
} */

.workshops-section .card-meta-row span{
    padding:.45rem .8rem;
    font-size:.82rem;
}

/* CTA */

.workshops-section .workshop-cta{
    padding: 13px 18px;
    border-radius: 16px;
    font-size: .98rem;
    font-weight: 600;
}

/* price */

.workshops-section .pricing-badge{
    font-size:.9rem;
    padding:.65rem .95rem;
}

}

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

@media(max-width:768px){

    .workshop-reels-section{
        padding: 36px 0 28px;
    }

    .workshop-reels-section .reels-track{
        height: 360px;
    }

    .workshop-reels-section .reel-card {
    width: 145px;
    height: 218px;
    border-radius: 20px;
}

/* CENTER */
.workshop-reels-section .reel-card.center {
    opacity: 1;
    z-index: 6;
    transform:
        translate(-50%, -50%)
        scale(1);
}

/* LEFT */
.workshop-reels-section .reel-card.left-1 {
    opacity: .82;
    z-index: 5;
    transform:
        translate(-50%, -50%)
        translateX(-82px)
        scale(.72);
}

/* RIGHT */
.workshop-reels-section .reel-card.right-1 {
    opacity: .82;
    z-index: 5;
    transform:
        translate(-50%, -50%)
        translateX(82px)
        scale(.72);
}

/* FAR LEFT */
.workshop-reels-section .reel-card.left-2 {
    opacity: .25;
    z-index: 4;
    filter: blur(1px) brightness(.85);
    transform:
        translate(-50%, -50%)
        translateX(-145px)
        scale(.52);
}

/* FAR RIGHT */
.workshop-reels-section .reel-card.right-2 {
    opacity: .25;
    z-index: 4;
    filter: blur(1px) brightness(.85);
    transform:
        translate(-50%, -50%)
        translateX(145px)
        scale(.52);
}

    #modalVideo{
        width: 92vw;
        max-height: 84vh;
        border-radius: 22px;
    }

    .close-video{
        top: 16px;
        right: 16px;
    }

    .mute-btn{
        bottom: 16px;
        right: 16px;
    }
}

/* PREMIUM WORKSHOP CARDS */
.workshop-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    align-items:stretch;
}

/* =========================
   WORKSHOP PREMIUM CARDS
   ========================= */

.workshops-section .workshop-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:32px;
    margin-top:50px;
}

.workshops-section .workshop-card{
    background:#fdfaf5;
    border-radius:28px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(120,95,70,.08);
    box-shadow:
        0 10px 35px rgba(91,70,54,.08);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
    cursor:pointer;

    display:flex;
    flex-direction:column;

    min-height:100%;
    height:auto;
}

.workshops-section .workshop-card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 24px 50px rgba(91,70,54,.14);
}

/* IMAGE */

.workshops-section .workshop-card .collection-card-image{
    height:260px;
    overflow:hidden;
    position:relative;
}

.workshops-section
.workshop-card
.collection-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.workshops-section
.workshop-card:hover
.collection-card-image img{
    transform:scale(1.05);
}

/* CONTENT */

.workshops-section .workshop-card-content{
    padding:18px 26px 26px;
    display:flex;
    flex-direction:column;
    flex:1;
    gap:0;
}
/* TITLE */

.workshops-section .workshop-card-content h3{
    font-size:1.7rem;
    line-height:1.2;
    margin-top:5px;

    margin-bottom:8px;
    color:#382b23;
}

/* DESCRIPTION */

.workshops-section .workshop-card-content p{
    color:#68574c;
    line-height:1.7;
    font-size:.97rem;
}

/* BUTTON */

.workshops-section .workshop-cta{
    margin-bottom:4px 0 8px;
    width:fit-content;
    padding:12px 22px;
    border-radius:999px;
    text-decoration:none;
    background:#6d4c41;
    color:white;
    font-weight:500;
    transition:.3s ease;
}

.workshops-section .workshop-cta:hover{
    transform:translateY(-2px);
}

/* META ROW */

.workshops-section .card-meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:4px;
    margin-bottom:2px;
}

.workshops-section .card-meta-row span{
    background:#f4ede5;
    padding:9px 14px;
    border-radius:999px;
    font-size:.85rem;
    color:#5f4d42;
}

/* PRICE */

.workshops-section .pricing-badge{
    margin-top:8px;
    margin-bottom:10px;

    display:inline-flex;
    width:fit-content;
    padding:10px 16px;
    border-radius:999px;
    background:#efe4d7;
    color:#5c4332;
    font-weight:600;
}

/* NOTE */

/* .workshops-section .card-note{
    margin-top:2px;
    padding-top:0;
    font-size:.9rem;
    line-height:0.8;
} */

/* MOBILE */

@media(max-width:768px){

    .workshops-section .workshop-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .workshops-section
    .workshop-card
    .collection-card-image{
        height:220px;
    }

    .workshops-section .workshop-card-content{
        padding:22px;
    }
}

.workshop-card{
    background: #f8f3ed;
    border: 1px solid rgba(151, 123, 95, 0.12);
    border-radius: 34px;
    overflow: hidden;
    min-height: 620px;
    display:flex;
    flex-direction:column;
    height:100%;

    box-shadow:
        0 10px 30px rgba(91,72,58,.06),
        0 2px 10px rgba(91,72,58,.04);

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

.workshop-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 18px 40px rgba(91,72,58,.10),
        0 4px 18px rgba(91,72,58,.08);
}

.workshop-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.workshop-content{
    padding:24px;
    display:flex;
    flex-direction:column;
    flex:1;
    justify-content:space-between;
}

.workshop-content h3{
    font-size:1.45rem;
    margin-bottom:12px;
    color:#3d3028;
    line-height:1.3;
    font-weight:600;
}

.workshop-info{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.workshop-info span {
    background: #f5efe8;
    padding: 8px 14px;
    border-radius: 9999px;
    font-size: 0.85rem;
    color: #7b6555;
    border: 1px solid rgba(188,160,126,0.12);
}

/* workshop 4 info cards only */
.workshop-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
    align-items: start;
}

.workshop-benefits-grid .collection-card {
    margin: 0;
    padding: 28px;
    min-height: auto;   /* remove forced height */
    height: auto;
}

/* tablet */
@media (max-width: 1024px) {
    .workshop-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* mobile */
@media (max-width: 768px) {
    .workshop-benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* CONTACT PAGE ONLY */
.contact-options-section .service-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1024px){
    .contact-options-section .service-grid{
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 768px){
    .contact-options-section .service-grid{
        grid-template-columns: 1fr;
    }
}

/* WHY GIFT CREATIVITY - spacing fix only */
.why-gift-section .collection-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    margin-top: 24px;
}

.why-gift-section .collection-card {
    padding: 34px 30px;
    border-radius: 28px;
    background: #fbfaf8;
    box-shadow: 0 10px 24px rgba(58, 42, 30, 0.04);
    transition: transform 0.3s ease;

    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* fix gap */
    gap: 16px; /* proper spacing between heading & text */

    height: auto;
    min-height: unset; /* remove forced empty space */
}

.why-gift-section .collection-card:hover {
    transform: translateY(-4px);
}

.why-gift-section .collection-card h3 {
    margin: 0;
    line-height: 1.25;
}

.why-gift-section .collection-card p {
    line-height: 1.7;
    margin: 0;
    color: #5f5651;
}


/* tablet */
@media (max-width: 1024px) {
    .why-gift-section .collection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* mobile */
@media (max-width: 640px) {
    .why-gift-section .collection-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .why-gift-section .collection-card {
        min-height: auto;
        padding: 28px 22px;
    }
}

/* EXPERIENCE PAGE META FIX ONLY */
.experience-card .experience-meta,
.workshop-card .experience-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 14px 0 18px;
    font-size: 1rem;
    color: #5f5651;
}

.experience-card .experience-meta span,
.workshop-card .experience-meta span {
    position: relative;
}

/* optional luxury separator */
.experience-card .experience-meta span:not(:last-child)::after,
.workshop-card .experience-meta span:not(:last-child)::after {
    content: "•";
    margin-left: 12px;
    color: #c8a98d;
}

/* Gallery info cards */
.gallery-info-card {
    min-height: unset;
    height: auto;
    justify-content: flex-start;
    padding: 34px 36px;
    border-radius: 24px;
}

.gallery-info-card h4 {
    margin-bottom: 12px;
    line-height: 1.2;
}

.gallery-info-card p {
    margin: 0;
    line-height: 1.65;
    flex-grow: 0;
}
/* Gallery spacing fix */

.gallery-grid {
    margin-bottom: 48px; /* space below top gallery cards */
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

/* =========================================================
   GLOBAL BACK TO TOP BAR
   ========================================================= */

.back-to-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 34px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: #3A2C3A;
    color: #F4EDE7;

    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;

    cursor: pointer;
    box-sizing: border-box;
}

.back-to-top-bar:hover {
    background: #453545;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .back-to-top-bar {
        width: 100%;
        height: 32px;
        font-size: 0.68rem;
    }

    /* Space between logo/brand and Quick Links/Contact */
    .site-footer .footer-brand {
        margin-bottom: 28px;
    }
}

/* =========================================================
   ABOUT PAGE - FINAL MOBILE FIX
   ========================================================= */

@media screen and (max-width: 768px) {


    body.about-page #about {
    padding-top: 10px;
    padding-bottom: 30px;
}

body.about-page #about .hero-content {
    padding-top: 5px;
}
    /* Prevent page-level horizontal sizing */
    html,
    body.about-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Full-width page shell */
    body.about-page > nav.navbar,
    body.about-page > section,
    body.about-page > footer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    /* Mobile navbar */
    body.about-page > nav.navbar {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        background: #f7f4f0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 6px 18px rgba(94, 77, 71, 0.08);
    }

    body.about-page .navbar-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* About hero */
    body.about-page #about {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
        /* About page mobile typography */
    body.about-page .story-text {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 4px;
    box-sizing: border-box;
}

body.about-page .story-text p {
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 1.4rem;
}

    body.about-page .card-description {
        font-size: 0.9rem;
        line-height: 1.65;
    }

    body.about-page #about .hero-content,
    body.about-page #about .hero-text-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Keep hero buttons inside viewport */
    body.about-page .hero-buttons {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.about-page .hero-buttons .btn {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Smaller mobile video reels */
    body.about-page .workshop-reels-section .reel-card {
        width: 190px;
        height: 285px;
        border-radius: 24px;
    }

    body.about-page .workshop-reels-section .reels-track {
        height: 320px;
        overflow: hidden;
    }

    body.about-page .workshop-reels-section .reel-card.center {
        transform:
            translate(-50%, -50%)
            scale(0.92);
    }

    body.about-page .workshop-reels-section .reel-card.left-1 {
        transform:
            translate(-50%, -50%)
            translateX(-105px)
            scale(0.78);
    }

    body.about-page .workshop-reels-section .reel-card.right-1 {
        transform:
            translate(-50%, -50%)
            translateX(105px)
            scale(0.78);
    }

    body.about-page .workshop-reels-section .reel-card.left-2 {
        transform:
            translate(-50%, -50%)
            translateX(-190px)
            scale(0.60);
    }

    body.about-page .workshop-reels-section .reel-card.right-2 {
        transform:
            translate(-50%, -50%)
            translateX(190px)
            scale(0.60);
    }

    /* Floating Register button */
    /* body.about-page .floating-request-btn,
    body.about-page .floating-request-btn.show {
        left: auto !important;
        right: 16px !important;
        bottom: 76px !important;

        width: auto !important;
        max-width: calc(100vw - 32px) !important;
        min-width: 0 !important;

        height: 42px !important;
        min-height: 42px !important;

        padding: 8px 10px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;

        box-sizing: border-box !important;
        transform: translateY(0) !important;
    } */

    /* WhatsApp */
    body.about-page #floating-whatsapp {
        right: 14px;
        left: auto;
        bottom: 18px;
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }

    /* Footer stays inside viewport */
    /* body.about-page > footer.site-footer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    body.about-page .site-footer .footer-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    body.about-page .footer-left,
    body.about-page .footer-middle,
    body.about-page .footer-middle2,
    body.about-page .footer-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    } */
}

/* Very small phones */
@media screen and (max-width: 390px) {

    body.about-page .workshop-reels-section .reel-card {
        width: 175px;
        height: 262px;
    }

    body.about-page .workshop-reels-section .reel-card.left-1 {
        transform:
            translate(-50%, -50%)
            translateX(-92px)
            scale(0.76);
    }

    body.about-page .workshop-reels-section .reel-card.right-1 {
        transform:
            translate(-50%, -50%)
            translateX(92px)
            scale(0.76);
    }
}


/* =========================================================
   SHARED FOOTER - MOBILE RESPONSIVE FOR ALL PAGES
   ========================================================= */

/* =========================================================
   SHARED FOOTER - MOBILE
   Same footer layout on every page
   ========================================================= */

@media screen and (max-width: 768px) {

    .site-footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 1.7rem 0 0.7rem;
    box-sizing: border-box;
}

.site-footer .footer-container {
    width: 100%;
    max-width: 100%;
    padding: 0 24px;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: 1.8rem;
    row-gap: 1.3rem;

    box-sizing: border-box;
}

    .site-footer .footer-middle2 {
    display: none;
    }
    /* Brand gets its own full row */
    @media screen and (max-width: 768px) {

    .site-footer .footer-left {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0 0 3px;
    }

    .site-footer .footer-brand {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        margin: 0;
    }

.site-footer .footer-logo {
    width: auto;
    min-width: 0;
    max-width: none;
    height: 72px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.site-footer .footer-logo .logo-circle.small {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 50%;
    overflow: hidden;
}

.site-footer .footer-logo .logo-circle.small img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.site-footer .footer-brand {
    width: auto;
    min-width: 0;
    flex: 1;
}

    .site-footer .footer-brand .brand-name {
        font-size: 1.1rem;
        line-height: 1.15;
        white-space: nowrap;
        margin: 0;
    }
}

    /* Three footer columns */
    .site-footer .footer-middle,
    .site-footer .footer-middle2,
    .site-footer .footer-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        align-self: start;
    }

    .site-footer .footer-container h4 {
        font-size: 0.95rem;
        line-height: 1.25;
        margin: 0 0 0.65rem;
    }

    .site-footer .footer-links,
    .site-footer .contact-list {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        gap: 0.25rem;
    }

    .site-footer .footer-links a,
    .site-footer .contact-list li,
    .site-footer .contact-list a {
        font-size: 0.75rem;
        line-height: 1.5;
        overflow-wrap: anywhere;
        word-break: normal;
    }   

    /* Social icons stay under the brand */
    .site-footer .footer-social-row {
    width: 100%;
    max-width: 100%;
    margin-top: 0.9rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.site-footer .footer-social-row a,
.site-footer .footer-social-link {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}

    .site-footer .footer-social-row a,
    .site-footer .footer-social-link {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
    }

    /* Copyright */
    .site-footer .footer-bottom {
        width: 100%;
        max-width: 100%;
        margin-top: 1.4rem;
        padding: 0.9rem 14px 0;
        box-sizing: border-box;
        text-align: center;
        overflow-wrap: anywhere;
        font-size: 0.78rem;
        line-height: 1.4;
    }
}


/* Very small phones */
@media screen and (max-width: 390px) {

    .site-footer {
        padding-top: 1.7rem;
    }

    .site-footer .footer-container {
        padding-left: 12px;
        padding-right: 12px;
        gap: 1.35rem 0.75rem;
    }

    .site-footer .footer-logo .logo-circle.small {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }

    .site-footer .footer-brand .brand-name {
        font-size: 1rem;
    }

    /* .site-footer .footer-links a,
    .site-footer .contact-list li,
    .site-footer .contact-list a {
        font-size: 0.58rem;
    } */
}

/* Extra-small phones */
@media screen and (max-width: 390px) {

    .site-footer {
        padding-top: 1.7rem;
    }

    .site-footer .footer-container {
    padding-left: 24px;
    padding-right: 24px;
    column-gap: 1.2rem;
    row-gap: 1.15rem;
}

    .site-footer .footer-logo .logo-circle.small {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }

    .site-footer .footer-brand .brand-name {
        font-size: 0.99rem;
    }

    .site-footer .footer-container h4 {
        font-size: 0.95rem;
    }

    .site-footer .footer-links a,
    .site-footer .contact-list li,
    .site-footer .contact-list a {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .site-footer .footer-social-row {
        gap: 4px;
    }

    .site-footer .footer-bottom {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Hide floating buttons while footer is visible */
.floating-request-btn.footer-visible,
#floating-whatsapp.footer-visible {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(12px) !important;
}
/* Google Review button - footer */
.site-footer .btn.btn-secondary {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

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

    padding: 0 1rem;
    margin-top: 10px;

    background: transparent;
    border: 1px solid rgba(239, 228, 218, 0.75);
    border-radius: 22px;

    color: #efe4da;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.1px;

    box-shadow: none;
    cursor: pointer;
    transition: background 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease;
}

.site-footer .btn.btn-secondary:hover {
    background: rgba(239, 228, 218, 0.08);
    border-color: #efe4da;
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

.site-footer .btn.btn-secondary:focus-visible {
    outline: 2px solid #efe4da;
    outline-offset: 3px;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .site-footer .btn.btn-secondary {
        width: 165px;
        height: 42px;
        padding: 0 0.9rem;
        margin-top: 8px;
        font-size: 0.72rem;
        border-radius: 21px;
        box-shadow: none;
    }
    
}

/* =========================================================
   MOBILE TOUCH FEEDBACK ONLY
   Does not change desktop/laptop hover behaviour.
   ========================================================= */

/* @media (max-width: 768px) and (hover: none) and (pointer: coarse) {

    /* Cards: small movement only while touching */
    /* .experience-card:active,
    .location-card:active,
    .service-card:active,
    .collection-card:active,
    .workshop-card:active,
    .gallery-card:active,
    .explore-card:active {
        transform: translateY(-6px);
        box-shadow: 0 22px 55px rgba(94, 77, 71, 0.12);
    } */

    /* Card image: tiny zoom only while touching */
    /* .experience-card:active .exp-image img,
    .location-card:active .card-image-container img,
    .service-card:active img,
    .collection-card:active .collection-card-image img,
    .workshop-card:active img,
    .gallery-card:active img,
    .explore-card:active .explore-card-image img {
        transform: scale(1.03);
    } */

    /* Primary button: temporary touch feedback */
    /* .btn-primary:active {
        background: var(--button-primary-hover);
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 16px 48px rgba(142, 101, 121, 0.35);
    } */

    /* Secondary button: temporary gold touch feedback */
    /* .btn-secondary:active {
        background: var(--button-secondary-hover);
        border-color: var(--button-secondary-hover);
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 16px 48px rgba(142, 101, 121, 0.35);
    } */

    /* WhatsApp: temporary touch feedback */
    /* .btn-whatsapp:active {
        background: linear-gradient(
            135deg,
            #96a896 0%,
            #7a9c7a 100%
        );
        transform: translateY(-5px);
        box-shadow: 0 16px 48px rgba(168, 184, 168, 0.35);
    } */

    /* Floating button */
    /* .floating-request-btn:active {
        transform: translateY(-3px) !important;
    }
} */

/* =========================================================
   MOBILE TOUCH DEVICES
   Keep laptop hover colours from sticking after a tap.
   Desktop/laptop hover remains completely unchanged.
   ========================================================= */

/* @media (max-width: 768px) and (hover: none) and (pointer: coarse) { */

    /* Primary button — return to normal colour when not touching */
    /* .btn-primary:hover {
        background: var(--button-primary);
        color: #ffffff;
    } */

    /* Secondary button — return to normal colour when not touching */
    /* .btn-secondary:hover {
        background: transparent;
        border-color: var(--button-secondary-border);
        color: var(--deep-taupe);
    } */

    /* WhatsApp — return to its normal sage colour when not touching */
    /* .btn-whatsapp:hover {
        background: linear-gradient(
            135deg,
            #a8b8a8 0%,
            #96a896 100%
        );
        color: var(--white);
    }
} */ 

/* =========================================================
   MOBILE TOUCH FEEDBACK
   Desktop/laptop hover behaviour remains unchanged.
   ========================================================= */
/* =========================================================
   FINAL MOBILE TOUCH FEEDBACK
   Desktop hover behaviour remains unchanged.
   ========================================================= */

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {

    /* BUTTONS — normal state after touch */
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-whatsapp:hover,
    .btn-whatsapp:focus {
        transform: none;
    }

    .btn-primary:hover {
        background: var(--button-primary);
        color: #ffffff;
        box-shadow: 0 8px 25px rgba(212, 168, 153, 0.15);
    }

    .btn-secondary:hover {
        background: transparent;
        border-color: var(--button-secondary-border);
        color: var(--deep-taupe);
        box-shadow: none;
    }

    .btn-whatsapp:hover {
        background: linear-gradient(
            135deg,
            #a8b8a8 0%,
            #96a896 100%
        );
        color: var(--white);
        box-shadow: 0 8px 25px rgba(212, 168, 153, 0.15);
    }

    /* TEMPORARY FEEDBACK WHILE FINGER IS DOWN */
    .btn-primary:active {
        background: var(--button-primary-hover);
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 16px 48px rgba(142, 101, 121, 0.35);
    }

    .btn-secondary:active {
        background: var(--button-secondary-hover);
        border-color: var(--button-secondary-hover);
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 16px 48px rgba(142, 101, 121, 0.35);
    }

    .btn-whatsapp:active {
        background: linear-gradient(
            135deg,
            #96a896 0%,
            #7a9c7a 100%
        );
        color: var(--white);
        transform: translateY(-5px);
        box-shadow: 0 16px 48px rgba(168, 184, 168, 0.35);
    }

    /* CARDS — movement only while touching */
    .experience-card:hover,
    .location-card:hover,
    .service-card:hover,
    .collection-card:hover,
    .workshop-card:hover,
    .gallery-card:hover,
    .explore-card:hover {
        transform: none;
    }

    .experience-card:active,
    .location-card:active,
    .service-card:active,
    .collection-card:active,
    .workshop-card:active,
    .gallery-card:active,
    .explore-card:active {
        transform: translateY(-6px);
    }

    /* CARD IMAGES — zoom only while touching */
    .experience-card:hover .exp-image img,
    .location-card:hover .card-image-container img,
    .service-card:hover img,
    .collection-card:hover .collection-card-image img,
    .workshop-card:hover img,
    .gallery-card:hover img,
    .explore-card:hover .explore-card-image img {
        transform: none;
    }

    .experience-card:active .exp-image img,
    .location-card:active .card-image-container img,
    .service-card:active img,
    .collection-card:active .collection-card-image img,
    .workshop-card:active img,
    .gallery-card:active img,
    .explore-card:active .explore-card-image img {
        transform: scale(1.03);
    }

    /* FLOATING BUTTONS */
    .floating-request-btn:hover {
        transform: translateY(0) !important;
    }

    .floating-request-btn:active {
        transform: translateY(-3px) !important;
    }

    #floating-whatsapp:hover {
        transform: translateY(0) !important;
    }

    #floating-whatsapp:active {
        transform: translateY(-4px) !important;
    }
}
@media screen and (max-width: 768px) {
    .hero-image-banner > h1 {
        display: none !important;
    }
}

/* Google Reviews button - mobile fix */
.testimonials-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
}

.testimonials-cta .btn {
    width: auto;
    min-width: 220px;
    max-width: 100%;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .community-masonry {
        column-count: 1;
    }

    .community-moment-card {
        margin-bottom: 0.85rem;
    }

    .community-moment-card img {
        height: 165px;
        max-height: 165px;
    }

    .testimonial-carousel {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        gap: 0.6rem;
    }

    .testimonial-nav {
        width: 44px;
        height: 44px;
    }

    .challenge-card {
        grid-template-columns: 1fr;
        padding: 1.8rem;
    }

    .community-benefits {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body:has(.contact-options-section) .cta-section {
        margin-top: 0;
        padding: 2.5rem 0;
    }
}

@media (max-width: 760px) {
    body:has(.events-grid) .cta-section {
        margin-top: 0;
        padding-top: 2.5rem;
        padding-bottom: 1rem;
    }
}

@media screen and (max-width: 768px) {
    body.reviews-page .site-footer .footer-social-row a {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
    }

    body.reviews-page .site-footer .footer-social-row a svg {
        width: 24px !important;
        height: 24px !important;
    }

    body.reviews-page .site-footer .footer-links a,
    body.reviews-page .site-footer .contact-list li,
    body.reviews-page .site-footer .contact-list a {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 768px) {
    .site-footer .footer-container {
        grid-template-columns: 1.05fr 0.95fr;

    }

    .site-footer .footer-left {
        grid-column: 1 / -1;
    }

    .site-footer .footer-middle {
        grid-column: 1;
    }

    .site-footer .footer-right {
        grid-column: 2;
    }

    .site-footer .footer-middle2 {
        display: none;
    }
}

/* Wedding Live Painting - FAQ layout */
body.wedding-live-page .faq-list,
body.birthday-events-page .faq-list,
body.corporate-events-page .faq-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    max-width: 1100px;
    margin: 1.8rem auto 0;
}

body.wedding-live-page .faq-item,
body.birthday-events-page .faq-item,
body.corporate-events-page .faq-item  {
    width: 100%;
    box-sizing: border-box;
    padding: 1.4rem 1.5rem;
    margin: 0;
    border-radius: 24px;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.98),
        rgba(255,247,238,0.96)
    );
    box-shadow: 0 14px 36px rgba(94,77,71,0.07);
}

body.wedding-live-page .faq-item h3,
body.birthday-events-page .faq-item h3,
body.corporate-events-page .faq-item h3 {
    margin: 0 0 0.45rem;
    color: var(--heading-warm);
    line-height: 1.4;
}

body.wedding-live-page .faq-item p,
body.birthday-events-page .faq-item p,
body.corporate-events-page .faq-item p  {
    margin: 0;
    color: var(--text-dark);
    line-height: 1.7;
}

/* Wedding Live Painting - FAQ mobile only */
/* Event Pages - FAQ mobile */
@media screen and (max-width: 768px) {
    body.wedding-live-page .faq-list,
    body.birthday-events-page .faq-list,
    body.corporate-events-page .faq-list {
        display: flex;
        flex-direction: column;
        gap: 18px;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body.wedding-live-page .faq-item,
    body.birthday-events-page .faq-item,
    body.corporate-events-page .faq-item {
        width: 100%;
        margin: 0;
        padding: 22px 18px;
        box-sizing: border-box;
        border-radius: 24px;
        overflow: visible;
    }

    body.wedding-live-page .faq-item h3,
    body.birthday-events-page .faq-item h3,
    body.corporate-events-page .faq-item h3 {
        margin: 0 0 8px;
        font-size: 1.15rem;
        line-height: 1.4;
    }

    body.wedding-live-page .faq-item p,
    body.birthday-events-page .faq-item p,
    body.corporate-events-page .faq-item p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* Event pages - reduce excessive vertical spacing */
body.wedding-live-page .section-header,
body.birthday-events-page .section-header,
body.corporate-events-page .section-header {
    margin-bottom: 1.5rem;
}

body.wedding-live-page > main > .section-container,
body.birthday-events-page > main > .section-container,
body.corporate-events-page > main > .section-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

body.wedding-live-page .community-benefits,
body.birthday-events-page .community-benefits,
body.corporate-events-page .community-benefits {
    margin-top: 0;
}

/* =========================================================
   ONLINE BEGINNER ART CLASS PAGE
   Page-specific styling only
   ========================================================= */

body.online-beginner-art-page {
    overflow-x: hidden;
}


/* ---------- Hero ---------- */

body.online-beginner-art-page .online-class-hero {
    padding: 4.5rem 0 4rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(231,203,191,0.25), transparent 30%),
        linear-gradient(180deg, #FCFAF7 0%, #F7F1EB 100%);
}

body.online-beginner-art-page .online-class-hero-content {
    width: min(1280px, calc(100% - 4rem));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.85fr);
    gap: 4rem;
    align-items: center;
}

body.online-beginner-art-page .online-class-hero-copy {
    max-width: 650px;
}

body.online-beginner-art-page .online-class-eyebrow,
body.online-beginner-art-page .online-section-label {
    margin: 0 0 0.7rem;
    color: var(--accent-label);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.online-beginner-art-page .online-class-hero h1 {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 5.5vw, 5rem);
    line-height: 0.98;
    color: var(--deep-taupe);
}

body.online-beginner-art-page .online-class-handwritten {
    margin: 0.8rem 0 1rem;
    font-family: 'Borel', cursive;
    color: var(--muted-terracotta);
    font-size: 1rem;
}

body.online-beginner-art-page .online-class-hero-text {
    max-width: 620px;
    margin: 0;
    color: var(--soft-brown);
    font-size: 1.08rem;
    line-height: 1.8;
}

body.online-beginner-art-page .online-class-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.5rem;
}

body.online-beginner-art-page .online-class-highlights span {
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(217,116,91,0.09);
    color: var(--chip-text);
    font-size: 0.86rem;
    font-weight: 600;
}

body.online-beginner-art-page .online-class-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.7rem;
}

body.online-beginner-art-page .online-class-hero-actions .btn {
    min-width: 210px;
    text-align: center;
}

body.online-beginner-art-page .online-class-hero-image {
    height: 470px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--shadow-deep);
}

body.online-beginner-art-page .online-class-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ---------- Overview ---------- */

body.online-beginner-art-page .online-class-overview {
    padding: 3rem 0 2.5rem;
    background: var(--cream-bg);
}

body.online-beginner-art-page .online-class-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

body.online-beginner-art-page .online-info-card {
    padding: 1.25rem 1rem;
    text-align: center;
    border-radius: 20px;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(94,77,71,0.07);
}

body.online-beginner-art-page .online-info-card strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--heading-warm);
    font-size: 1rem;
}

body.online-beginner-art-page .online-info-card span {
    color: var(--soft-brown);
    font-size: 0.86rem;
}


/* ---------- Categories ---------- */

body.online-beginner-art-page .online-categories-section {
    padding: 4.5rem 0;
    background: #FCFAF7;
}

body.online-beginner-art-page .online-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
    max-width: 1180px;
    margin: 0 auto;
}

body.online-beginner-art-page .online-category-card {
    display: grid;
    grid-template-columns: 42% 58%;
    min-height: 300px;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(180deg, #FFFFFF, #FBF6F0);
    border: 1px solid rgba(94,77,71,0.08);
    box-shadow: 0 16px 42px rgba(94,77,71,0.07);
}

body.online-beginner-art-page .online-category-image {
    min-height: 300px;
    overflow: hidden;
}

body.online-beginner-art-page .online-category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.online-beginner-art-page .online-category-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
}

body.online-beginner-art-page .online-category-number {
    color: var(--muted-terracotta);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

body.online-beginner-art-page .online-category-content h3 {
    margin: 0.35rem 0 0.6rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    line-height: 1.05;
}

body.online-beginner-art-page .online-category-content p {
    margin: 0;
    color: var(--soft-brown);
    line-height: 1.6;
    font-size: 0.92rem;
}

body.online-beginner-art-page .online-medium-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
}

body.online-beginner-art-page .online-medium-tags span {
    padding: 0.38rem 0.62rem;
    border-radius: 999px;
    background: rgba(217,116,91,0.08);
    color: var(--chip-text);
    font-size: 0.73rem;
}

body.online-beginner-art-page .online-category-btn {
    margin-top: auto;
    width: 100%;
    padding: 0.75rem 1rem;
}


/* ---------- Learning ---------- */

body.online-beginner-art-page .online-learning-section {
    padding: 4.2rem 0;
    background: linear-gradient(180deg, #F7F1EB, #FCFAF7);
}

body.online-beginner-art-page .online-learning-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
}

body.online-beginner-art-page .online-learning-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 1rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(94,77,71,0.1);
}

body.online-beginner-art-page .online-learning-item > span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(217,116,91,0.1);
    color: var(--muted-terracotta);
    font-size: 0.75rem;
    font-weight: 700;
}

body.online-beginner-art-page .online-learning-item h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

body.online-beginner-art-page .online-learning-item p {
    margin: 0;
    color: var(--soft-brown);
    line-height: 1.55;
    font-size: 0.9rem;
}


/* ---------- Process ---------- */

body.online-beginner-art-page .online-process-section {
    padding: 4.3rem 0;
    background: #FCFAF7;
}

body.online-beginner-art-page .online-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1180px;
    margin: 0 auto;
}

body.online-beginner-art-page .online-process-step {
    padding: 1.5rem;
    border-radius: 22px;
    background: linear-gradient(180deg, #FFFFFF, #F7F0E9);
    box-shadow: var(--shadow-light);
}

body.online-beginner-art-page .online-process-step > span {
    color: var(--muted-terracotta);
    font-size: 0.75rem;
    font-weight: 700;
}

body.online-beginner-art-page .online-process-step h3 {
    margin: 0.55rem 0 0.45rem;
    font-size: 1.05rem;
}

body.online-beginner-art-page .online-process-step p {
    margin: 0;
    color: var(--soft-brown);
    line-height: 1.6;
    font-size: 0.9rem;
}


/* ---------- Materials ---------- */

body.online-beginner-art-page .online-material-section {
    padding: 4.2rem 0;
    background: #F7F1EB;
}

body.online-beginner-art-page .online-material-layout {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 3rem;
    align-items: center;
    max-width: 1150px;
    margin: 0 auto;
}

body.online-beginner-art-page .online-material-copy p {
    color: var(--soft-brown);
    line-height: 1.7;
}

body.online-beginner-art-page .online-material-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.3rem;
}

body.online-beginner-art-page .online-material-list span {
    color: var(--text-dark);
}

body.online-beginner-art-page .online-material-image {
    height: 330px;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: var(--shadow-medium);
}

body.online-beginner-art-page .online-material-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ---------- Demo CTA ---------- */

body.online-beginner-art-page .online-demo-section {
    padding: 3.5rem 0;
    background: #FCFAF7;
}

body.online-beginner-art-page .online-demo-card {
    max-width: 1050px;
    margin: 0 auto;
    padding: 2.2rem 2.4rem;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background: linear-gradient(135deg, #F3E7DE, #FBF7F1);
    border: 1px solid rgba(217,116,91,0.12);
}

body.online-beginner-art-page .online-demo-card h2 {
    margin: 0 0 0.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.4rem;
}

body.online-beginner-art-page .online-demo-card p {
    max-width: 650px;
    margin: 0;
    color: var(--soft-brown);
    line-height: 1.7;
}


/* ---------- FAQ ---------- */

body.online-beginner-art-page .online-faq-section {
    padding: 4rem 0 4.5rem;
    background: #FCFAF7;
}

body.online-beginner-art-page .online-page-faq {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

body.online-beginner-art-page .online-page-faq .faq-item {
    padding: 1.25rem 1.4rem;
    margin: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, #FFFFFF, #FFF8F0);
    box-shadow: 0 12px 30px rgba(94,77,71,0.06);
}

body.online-beginner-art-page .online-page-faq .faq-item h3 {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
}

body.online-beginner-art-page .online-page-faq .faq-item p {
    margin: 0;
    line-height: 1.65;
}


/* =========================================================
   REGISTRATION MODAL
   ========================================================= */

body.online-beginner-art-page .online-registration-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(30,18,28,0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.online-beginner-art-page .online-registration-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.online-beginner-art-page .online-registration-modal {
    position: relative;
    width: min(760px, 100%);
    max-height: 92vh;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(180deg, #FFF9F2, #F7EEE6);
    box-shadow: 0 30px 80px rgba(30,18,28,0.25);
}

body.online-beginner-art-page .online-modal-body {
    max-height: 92vh;
    overflow-y: auto;
    padding: 2rem;
}

body.online-beginner-art-page .online-modal-heading {
    padding-right: 2.5rem;
}

body.online-beginner-art-page .online-modal-heading h2 {
    margin: 0 0 0.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.3rem;
    color: var(--deep-taupe);
}

body.online-beginner-art-page .online-modal-heading p:last-child {
    margin: 0;
    color: var(--soft-brown);
    line-height: 1.6;
}

body.online-beginner-art-page .online-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: var(--deep-taupe);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

body.online-beginner-art-page .online-registration-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

body.online-beginner-art-page .online-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

body.online-beginner-art-page .online-form-field {
    display: grid;
    gap: 0.4rem;
}

body.online-beginner-art-page .online-form-field label {
    color: var(--deep-taupe);
    font-size: 0.88rem;
    font-weight: 600;
}

body.online-beginner-art-page .online-form-field input,
body.online-beginner-art-page .online-form-field select,
body.online-beginner-art-page .online-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(94,77,71,0.16);
    border-radius: 15px;
    background: rgba(255,255,255,0.92);
    color: var(--text-dark);
    font: inherit;
}

body.online-beginner-art-page .online-form-field textarea {
    resize: vertical;
    min-height: 105px;
}

body.online-beginner-art-page .online-form-field input:focus,
body.online-beginner-art-page .online-form-field select:focus,
body.online-beginner-art-page .online-form-field textarea:focus {
    outline: none;
    border-color: rgba(217,116,91,0.7);
    box-shadow: 0 0 0 4px rgba(217,116,91,0.1);
}

body.online-beginner-art-page .online-demo-payment-note,
body.online-beginner-art-page .online-regular-note {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: rgba(217,116,91,0.09);
}

body.online-beginner-art-page .online-demo-payment-note strong,
body.online-beginner-art-page .online-regular-note strong {
    color: var(--heading-warm);
}

body.online-beginner-art-page .online-demo-payment-note span,
body.online-beginner-art-page .online-regular-note span {
    color: var(--soft-brown);
    font-size: 0.9rem;
    line-height: 1.5;
}

body.online-beginner-art-page .online-form-consent label {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--soft-brown);
    font-size: 0.82rem;
    line-height: 1.45;
}

body.online-beginner-art-page .online-form-consent input {
    margin-top: 0.2rem;
}

body.online-beginner-art-page .online-form-actions {
    display: flex;
    justify-content: flex-end;
}

body.online-beginner-art-page .online-form-status {
    min-height: 1.2rem;
    margin: 0;
    text-align: center;
    color: var(--muted-terracotta);
    font-size: 0.9rem;
}


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

@media screen and (max-width: 1000px) {

    body.online-beginner-art-page .online-class-hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    body.online-beginner-art-page .online-class-hero-copy {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }

    body.online-beginner-art-page .online-class-highlights,
    body.online-beginner-art-page .online-class-hero-actions {
        justify-content: center;
    }

    body.online-beginner-art-page .online-class-hero-image {
        max-width: 700px;
        width: 100%;
        height: 360px;
        margin: 0 auto;
    }

    body.online-beginner-art-page .online-class-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.online-beginner-art-page .online-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.online-beginner-art-page .online-material-layout {
        grid-template-columns: 1fr;
    }

    body.online-beginner-art-page .online-material-image {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

}


@media screen and (max-width: 760px) {

    body.online-beginner-art-page .online-class-hero {
        padding: 2.8rem 0 2.5rem;
    }

    body.online-beginner-art-page .online-class-hero-content {
        width: calc(100% - 2rem);
    }

    body.online-beginner-art-page .online-class-hero h1 {
        font-size: clamp(2.5rem, 12vw, 3.7rem);
    }

    body.online-beginner-art-page .online-class-hero-text {
        font-size: 0.98rem;
    }

    body.online-beginner-art-page .online-class-highlights {
        gap: 0.45rem;
    }

    body.online-beginner-art-page .online-class-highlights span {
        font-size: 0.76rem;
        padding: 0.48rem 0.7rem;
    }

    body.online-beginner-art-page .online-class-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    body.online-beginner-art-page .online-class-hero-actions .btn {
        width: 100%;
        min-width: 0;
    }

    body.online-beginner-art-page .online-class-hero-image {
        height: 250px;
        border-radius: 24px;
    }

    body.online-beginner-art-page .online-class-overview,
    body.online-beginner-art-page .online-categories-section,
    body.online-beginner-art-page .online-learning-section,
    body.online-beginner-art-page .online-process-section,
    body.online-beginner-art-page .online-material-section,
    body.online-beginner-art-page .online-demo-section,
    body.online-beginner-art-page .online-faq-section {
        padding-top: 2.8rem;
        padding-bottom: 2.8rem;
    }

    body.online-beginner-art-page .online-class-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }

    body.online-beginner-art-page .online-info-card {
        padding: 1rem 0.65rem;
    }

    body.online-beginner-art-page .online-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.online-beginner-art-page .online-learning-grid,
body.online-beginner-art-page .online-process-grid {
    grid-template-columns: 1fr;
}
    body.online-beginner-art-page .online-category-card {
        grid-template-columns: 1fr;
    }

    body.online-beginner-art-page .online-category-image {
        height: 210px;
        min-height: 0;
    }

    body.online-beginner-art-page .online-category-content {
        padding: 1.25rem;
    }

    body.online-beginner-art-page .online-category-content h3 {
        font-size: 1.6rem;
    }

    body.online-beginner-art-page .online-demo-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }

    body.online-beginner-art-page .online-demo-card h2 {
        font-size: 2rem;
    }

    body.online-beginner-art-page .online-modal-body {
        padding: 1.25rem;
    }

    body.online-beginner-art-page .online-modal-heading h2 {
        font-size: 1.8rem;
    }

    body.online-beginner-art-page .online-form-grid {
        grid-template-columns: 1fr;
    }

    body.online-beginner-art-page .online-form-actions .btn {
        width: 100%;
    }

}

.navbar.scrolled,
.navbar--hero-transparent.scrolled {
    background: #E3A857 !important;
}

.navbar--hero-transparent .nav-link,
.navbar--hero-transparent .logo-text {
    color: #342832 !important;
    text-shadow: none !important;
}


.navbar.scrolled .nav-link,
.navbar.scrolled .logo-text,
.navbar.scrolled .nav-dropdown-toggle {
    color: #342832 !important;
}

.navbar-brand {
    display: flex;
    align-items: center;
}
/* FINAL MOBILE NAVBAR SIZE */
@media screen and (max-width: 768px) {

    .navbar-container {
        height: 62px !important;
        min-height: 62px !important;
        padding: 0 1rem !important;
        box-sizing: border-box !important;
    }

    .logo-text-wrapper {
        height: 62px !important;
    }

    .logo-circle {
        width: 38px !important;
        height: 38px !important;
    }

    .hamburger-menu {
        gap: 5px;
    }

    .nav-menu {
        top: 62px !important;
    }
}

/* =========================================================
   ARTISTIC WORKS 7 — PREMIUM MEDIA GALLERY
   ========================================================= */

.gallery-categories {
    width: calc(100% - 64px);
    max-width: 1500px;
    margin: 4rem auto 0;
}

.gallery-category {
    margin-bottom: 7rem;
}

.gallery-category-heading {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    margin-bottom: 2.2rem;
}

.gallery-category-number {
    flex: 0 0 auto;
    padding-top: 0.25rem;
    color: var(--accent-label);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.gallery-category-heading h3 {
    margin: 0 0 0.45rem;
    color: var(--heading-warm);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.05;
}

.gallery-category-heading p {
    margin: 0;
    max-width: 760px;
    color: var(--soft-brown);
    font-size: 1rem;
    line-height: 1.7;
}


/* -------------------------
   MEDIA GRID
   ------------------------- */

.gallery-media-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}


/* -------------------------
   MEDIA CARD
   ------------------------- */

.gallery-media-card {
    position: relative;
    height: 220px;
    margin: 0;
    overflow: hidden;
    border-radius: 22px;
    background: #eee7df;
    box-shadow:
        0 12px 32px rgba(30,18,28,0.07),
        0 2px 8px rgba(30,18,28,0.04);
    cursor: zoom-in;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.gallery-media-card:hover {
    transform: translateY(-7px);
    box-shadow:
        0 24px 55px rgba(30,18,28,0.13);
}

.gallery-media-card img,
.gallery-media-card video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-media-card:hover img,
.gallery-media-card:hover video {
    transform: scale(1.045);
}


/* -------------------------
   IMAGE DARK OVERLAY
   ------------------------- */

.gallery-media-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(20,12,16,0) 50%,
        rgba(20,12,16,0.32) 100%
    );
    pointer-events: none;
}


/* -------------------------
   VIEW / PLAY LABEL
   ------------------------- */

.gallery-media-label {
    position: absolute;
    right: 10px;
    bottom: 10px;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);
    color: #2A2028;

    box-shadow: 0 6px 18px rgba(30,18,28,0.16);

    pointer-events: none;
}

.gallery-media-label svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* -------------------------
   VIDEO PLAY BUTTON
   ------------------------- */

.gallery-play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;

    width: 58px;
    height: 58px;

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

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

    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--muted-terracotta);

    font-size: 1.2rem;
    padding-left: 3px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.18);

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

.gallery-media-card:hover .gallery-play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    background: #fff;
}


/* =========================================================
   GALLERY MEDIA POPUP
   ========================================================= */

.gallery-media-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;

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

    padding: 2rem;

    background: rgba(18,12,16,0.88);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.gallery-media-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.gallery-media-modal-box {
    position: relative;

    width: min(1100px, 94vw);
    max-height: 92vh;

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

    border-radius: 24px;
    overflow: hidden;

    background: #151116;

    box-shadow:
        0 30px 90px rgba(0,0,0,0.38);
}

.gallery-modal-image,
.gallery-modal-video {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 88vh;

    object-fit: contain;
}

.gallery-modal-video {
    width: min(1000px, 92vw);
    background: #000;
}


/* -------------------------
   CLOSE BUTTON
   ------------------------- */

.gallery-media-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;

    z-index: 10;

    width: 44px;
    height: 44px;

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

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,0.94);
    color: #261c23;

    font-size: 1.7rem;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 8px 24px rgba(0,0,0,0.2);

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

.gallery-media-modal-close:hover {
    transform: scale(1.06);
    background: #fff;
}


/* -------------------------
   MOBILE
   ------------------------- */

@media screen and (max-width: 1100px) {

    .gallery-media-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .gallery-media-card {
        height: 190px;
    }
}


@media screen and (max-width: 800px) {

    .gallery-media-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .gallery-media-card {
        height: 190px;
        border-radius: 18px;
    }

    .gallery-category {
        margin-bottom: 5rem;
    }

    .gallery-category-heading {
        gap: 0.9rem;
    }

    .gallery-category-heading h3 {
        font-size: 2rem;
    }
}


@media screen and (max-width: 520px) {

    .gallery-media-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .gallery-media-card {
        height: 150px;
    }

    .gallery-media-label {
    width: 32px;
    height: 32px;
    right: 7px;
    bottom: 7px;
}

.gallery-media-label svg {
    width: 16px;
    height: 16px;
}
    .gallery-category-heading {
        align-items: flex-start;
    }

    .gallery-category-number {
        font-size: 0.9rem;
    }

    .gallery-category-heading h3 {
        font-size: 1.8rem;
    }

    .gallery-media-modal {
        padding: 0.7rem;
    }

    .gallery-media-modal-box {
        width: 96vw;
        border-radius: 18px;
    }

    .gallery-media-modal-close {
        top: 9px;
        right: 9px;
        width: 40px;
        height: 40px;
    }
}

/* =========================================
   SALE ARTWORK CARD
   ========================================= */

.sale-art-card {
    grid-column: 1 / -1;
    cursor: zoom-in;
}

.sale-art-card .sale-art-image {
    height: 430px;
    background: #f4eee8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sale-art-card .sale-art-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.sale-art-card:hover {
    transform: translateY(-6px);
}

.sale-view-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.2rem;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    background: var(--muted-terracotta);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    align-self: flex-start;
}


/* =========================================
   SALE ARTWORK POPUP
   ========================================= */

.sale-art-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(28, 20, 17, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.sale-art-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sale-art-modal {
    width: min(1100px, 96vw);
    max-height: 92vh;
    overflow-y: auto;

    background: #fffaf5;
    border-radius: 28px;

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.30);

    position: relative;

    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s ease;

    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
}

.sale-art-modal-overlay.is-open .sale-art-modal {
    transform: translateY(0) scale(1);
}


/* Large artwork */

.sale-art-modal-image {
    min-height: 650px;
    background: #eee7df;

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

    padding: 2rem;
}

.sale-art-modal-image img {
    width: 100%;
    height: 100%;
    max-height: 78vh;

    object-fit: contain;
    display: block;

    border-radius: 10px;
}


/* Artwork information */

.sale-art-modal-content {
    padding: 4rem 3rem;

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

.sale-art-label {
    display: inline-block;
    margin-bottom: 1rem;

    color: var(--muted-terracotta);

    font-size: 0.76rem;
    font-weight: 700;

    letter-spacing: 0.14em;
}

.sale-art-modal-content h2 {
    margin: 0 0 1.2rem;

    color: var(--heading-warm);

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.05;
}

.sale-art-description,
.sale-art-details {
    margin: 0 0 1.2rem;

    color: var(--text-dark);

    font-size: 1rem;
    line-height: 1.85;
}

.sale-art-details {
    color: var(--soft-brown);
}

.sale-art-actions {
    margin-top: 1.2rem;
}

.sale-art-actions .btn {
    min-width: 190px;
}


/* Close button */

.sale-art-close {
    position: absolute;

    top: 1rem;
    right: 1rem;

    width: 44px;
    height: 44px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);
    color: var(--deep-taupe);

    font-size: 1.7rem;
    line-height: 1;

    cursor: pointer;

    z-index: 5;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

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

.sale-art-close:hover {
    transform: rotate(90deg);
    background: #fff;
}


/* Prevent page scrolling while popup is open */

body.sale-modal-open {
    overflow: hidden;
}


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

@media screen and (max-width: 800px) {

    .sale-art-card .sale-art-image {
        height: 320px;
    }

    .sale-art-modal {
        grid-template-columns: 1fr;
        width: min(94vw, 620px);
        max-height: 94vh;
    }

    .sale-art-modal-image {
        min-height: 320px;
        height: 45vh;
        padding: 1rem;
    }

    .sale-art-modal-image img {
        max-height: 42vh;
    }

    .sale-art-modal-content {
        padding: 2rem 1.5rem 2.2rem;
    }

    .sale-art-modal-content h2 {
        font-size: 2.2rem;
    }

    .sale-art-description,
    .sale-art-details {
        font-size: 0.95rem;
        line-height: 1.7;
    }

}