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

.shipping-bar {
    background: var(--klein-blue);
    color: white;
    text-align: center;
    padding: 0.35rem 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    font-weight: 500;
}

:root {
    --cream: #F8F8F6;
    --charcoal: #1A1A1A;
    --klein-blue: #002FA7;
    --warm-gray: #6B6B6B;
    --border: #002FA7;
}

body {
    font-family: 'Lato', sans-serif;
    background: var(--cream);
    color: var(--klein-blue);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    letter-spacing: 0.02em;
}

header {
    position: fixed;
    top: 25px;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 3px solid var(--klein-blue);
    z-index: 100;
    padding: 1.4rem 3rem 0.5rem;
}

body:not(.home) header {
    padding: 0.95rem 3rem;
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.logo {
    display: block;
    height: 56px;
    flex-shrink: 0;
}

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

nav {
    display: flex;
    align-items: center;
    gap: 2.25rem;
}

nav a {
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--klein-blue);
    text-decoration: none;
    transition: color 0.3s;
    white-space: nowrap;
}

nav a:hover {
    color: var(--klein-blue);
}

main {
    padding-top: 105px;
}

/* Item 10: anchor jumps (logo → #home, nav links) must clear the fixed header
   so section content isn't tucked under the nav bar */
#home, #work {
    scroll-margin-top: 150px;
}

.hero {
    padding: 5rem 3rem 3.25rem;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 300;
    -webkit-text-stroke: 0.5px currentColor;
    margin-bottom: 1.25rem;
    line-height: 1.1;
}

.hero p {
    font-size: 1.125rem;
    color: var(--klein-blue);
    max-width: 600px;
    margin: 0 auto;
    font-style: italic;
}

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

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.product-card {
    cursor: pointer;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-4px);
}

.product-image {
    width: 100%;
    aspect-ratio: 1;
    background: #D4CFC7;
    background-size: cover;
    background-position: center;
    margin-bottom: 1rem;
    overflow: hidden;
    position: relative;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

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

.product-name {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
    text-transform: uppercase;
}

.product-price {
    font-size: 1rem;
    color: var(--klein-blue);
    font-weight: 700;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    overflow-y: auto;
    padding: 2rem;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--cream);
    max-width: 900px;
    width: 90%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    padding: 2rem;
    position: relative;
    margin: auto;
}

.modal-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

.modal-care {
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--klein-blue);
    white-space: pre-line;
}

/* Item 7 (v4): CARE text and FAQ link block inside modal */
.modal-care-text {
    margin-bottom: 1rem;
    white-space: pre-line;
}

.modal-care-text strong {
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.7rem;
    display: block;
    margin-bottom: 0.4rem;
}

.modal-header {
    position: sticky;
    top: 0;
    background: var(--cream);
    padding-bottom: 0.75rem; /* Reduced from 1rem - FIX 5 */
    margin-bottom: 0.75rem; /* Reduced from 1rem - FIX 5 */
    border-bottom: 1px solid var(--border);
    z-index: 10;
}

.modal-title-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem; /* Reduced from 1.5rem - FIX 5 */
    margin-top: 0.25rem; /* Reduced from 0.5rem - FIX 5 */
}

#modalTitle {
    font-size: 1.25rem;
    margin-bottom: 0.5rem; /* Reduced from 0.75rem - FIX 5 */
    line-height: 1.3;
}

.modal-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--klein-blue);
    margin: 0;
    white-space: nowrap; /* Prevent price wrapping - FIX 5 */
}

.modal-details {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 80vh;
    padding-right: 8px;
}

/* Custom scrollbar styling - FIX 2 */
.modal-details::-webkit-scrollbar {
    width: 6px;
}

.modal-details::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 100px; /* Start scrollbar below sticky header */
}

.modal-details::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.modal-details::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 0;
    color: var(--klein-blue);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    z-index: 1001;
    transition: opacity 0.2s;
}

.modal-close::before,
.modal-close::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 1.5px;
    background: var(--klein-blue);
    border-radius: 0;
}

.modal-close::before { transform: rotate(45deg); }
.modal-close::after  { transform: rotate(-45deg); }

.modal-close:hover {
    opacity: 0.5;
    transform: none;
}

.modal-image {
    width: 100%;
    aspect-ratio: 1;
    max-height: 500px;
    background-size: cover;
    background-position: center;
    background-color: #D4CFC7;
    position: relative;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 47, 167, 0.7);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.gallery-nav:hover {
    background: rgba(0, 47, 167, 0.9);
}

.gallery-prev {
    left: 10px;
}

.gallery-next {
    right: 10px;
}

.gallery-counter {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 47, 167, 0.8);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.875rem;
}

.modal-details h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.modal-price {
    font-size: 1.5rem;
    color: var(--klein-blue);
    margin-bottom: 2rem;
    font-weight: 700;
}

.modal-description {
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: var(--klein-blue);
    white-space: pre-line;
    text-wrap: pretty; /* Prevent orphan words - FIX 3 */
    hyphens: none; /* Don't hyphenate technical terms */
}

.buy-button {
    display: inline-block;
    background: #DC143C;
    color: white;
    padding: 0.4rem 1rem;
    text-decoration: none;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    border-radius: 50px;
    white-space: nowrap;
    flex-shrink: 0;
}

.buy-button:hover {
    background: #B01030;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 20, 60, 0.3);
}

.availability {
    font-size: 0.875rem;
    color: var(--klein-blue);
    margin-top: 1rem;
}

/* About Section */
.about-section, .contact-section {
    max-width: 800px;
    margin: 6rem auto;
    padding: 0 3rem;
    scroll-margin-top: 150px;
}

.about-section h2, .contact-section h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.about-section p, .contact-section p {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: var(--klein-blue);
}

.contact-section a {
    color: var(--klein-blue);
    text-decoration: none;
}

.contact-section a:hover {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

/* FIX #7: Instagram logo link in brand blue */
.contact-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

.instagram-link {
    display: inline-flex;
    align-items: center;
    color: var(--klein-blue);
    transition: opacity 0.2s, transform 0.2s;
    line-height: 0;
}

.instagram-link:hover {
    opacity: 0.75;
    text-decoration: none;
    transform: translateY(-1px);
}

.instagram-link svg {
    width: 32px;
    height: 32px;
    pointer-events: none; /* ensures mobile taps register on the anchor, not the svg */
    display: block;
}

.contact-email {
    font-size: 1.125rem;
    font-weight: 400;
}

footer {
    border-top: 1px solid var(--border);
    padding: 1.25rem 1.5rem;
    margin-top: 3rem;
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    font-weight: 300;
    color: var(--klein-blue);
}

/* v16: STUDIO CERAMIX in the footer styled to match the logo PNG —
   light weight, generous kerning. */
.brand-mark {
    font-weight: 300;
    letter-spacing: 0.12em;
}

footer p {
    margin: 0;
    line-height: 1.5;
}

footer p + p {
    margin-top: 0.25rem;
}

/* Privacy notice banner */
.privacy-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--klein-blue);
    color: white;
    padding: 1rem 1.5rem;
    z-index: 200;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.privacy-banner[hidden] {
    display: none;
}

.privacy-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.privacy-banner p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
    min-width: 240px;
}

.privacy-banner a {
    color: white;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.privacy-ok {
    background: white;
    color: var(--klein-blue);
    border: none;
    padding: 0.5rem 1.5rem;
    font-size: 0.75rem;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    border-radius: 50px;
    font-weight: 700;
    transition: all 0.2s;
    flex-shrink: 0;
}

.privacy-ok:hover {
    background: var(--cream);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
    header {
        padding: 1.5rem 1rem 0.6rem;
    }

    .header-content {
        align-items: center;
        gap: 0.75rem;
    }

    /* FIX #1 (v4): Bigger logo on mobile — works with newly-cropped image */
    .logo {
        height: 52px;
    }

    nav {
        gap: 1rem;
    }

    nav a {
        font-size: 0.7rem;
        margin-left: 0;
    }

    .hero {
        padding: 3.25rem 1.5rem 2.5rem;
    }

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

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

    /* Item 8: 2 columns on mobile so customers see more product per screen */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0.75rem;
    }

    .product-name {
        font-size: 0.8rem;
        letter-spacing: 0.04em;
    }

    .product-price {
        font-size: 0.9rem;
    }

    /* FIX #3: Restructured mobile modal — flatten nested wrappers and use grid areas
       for the correct order: image → title/price/buy → description → care */
    .modal {
        padding: 0; /* full-screen feel on mobile */
    }

    .modal-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "header"
            "description"
            "availability"
            "sku"
            "care";
        padding: 1.25rem;
        gap: 1.25rem;
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
    }

    /* Display: contents flattens these wrappers so children participate
       in the parent grid and grid-template-areas can place them */
    .modal-left,
    .modal-details {
        display: contents;
    }

    /* Cancel desktop sticky positioning + overflow constraints on mobile */
    .modal-left { position: static; }
    .modal-details { overflow: visible; max-height: none; padding-right: 0; }

    .modal-image {
        grid-area: image;
        height: 50vh;
        max-height: 50vh;
        /* Item 11: photo stays at the top of the screen while content scrolls under it */
        position: sticky;
        top: 0;
        z-index: 5;
        background-color: var(--cream);
        margin: -1.25rem -1.25rem 0;
        width: calc(100% + 2.5rem);
    }

    /* Item 12: On mobile, the price already shows in the sticky bottom bar,
       so hide the duplicated one under the title. Tighten the gap between
       the title and the description below.
       Item 6: the product name stays sticky just below the photo while
       the description scrolls underneath. */
    .modal-header {
        grid-area: header;
        position: sticky;
        top: 50vh;
        z-index: 4;
        background: var(--cream);
        padding: 0.85rem 1.25rem 0.6rem;
        margin: 0 -1.25rem;
        width: calc(100% + 2.5rem);
        border-bottom: 1px solid var(--border);
    }

    .modal-header .modal-title-price {
        display: none;
    }

    .modal-header h2 {
        margin-bottom: 0;
    }

    /* Give the description a little breathing room below the sticky name */
    .modal-description {
        grid-area: description;
        padding-top: 0.25rem;
    }

    .modal-description { grid-area: description; }
    .availability { grid-area: availability; }
    .product-sku { grid-area: sku; }

    .modal-care {
        grid-area: care;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border);
    }

    /* FIX #4: Smaller, less obtrusive gallery nav buttons on mobile */
    .gallery-nav {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .gallery-prev { left: 6px; }
    .gallery-next { right: 6px; }

    /* FIX #4: Floating close button that stays visible while scrolling
       so customers can always get back to the products grid */
    .modal-close {
        position: fixed;
        top: 0.75rem;
        right: 0.75rem;
        width: 44px;
        height: 44px;
        font-size: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Item 2 (v4): Sticky bottom BUY NOW bar — only on mobile, only with modal open */
    .mobile-buy-bar:not([hidden]) {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--cream);
        padding: 0.75rem 1rem;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        z-index: 1003;
        box-shadow: 0 -2px 16px rgba(0, 47, 167, 0.18);
        border-top: 1px solid var(--border);
    }

    .mobile-buy-price {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--klein-blue);
        white-space: nowrap;
    }

    /* Item 5 (v10): reverted to compact button size — price + button balanced */
    .mobile-buy-bar .buy-button {
        padding: 0.75rem 2rem;
        font-size: 0.85rem;
        letter-spacing: 0.1em;
        flex-shrink: 0;
    }

    /* Hide the in-flow buy button on mobile to avoid duplication with sticky bar.
       The modal-header still shows title + price for context as the customer scrolls. */
    .modal-header .buy-button {
        display: none;
    }

    .modal-title-price {
        justify-content: flex-start;
    }

    /* Add bottom padding so scrolling content isn't covered by the sticky buy bar */
    .modal-content {
        padding-bottom: 90px;
    }

    .about-section, .contact-section {
        padding: 0 1.5rem;
        margin: 4rem auto;
    }

    .about-section h2, .contact-section h2 {
        font-size: 2rem;
    }

    /* Privacy banner on mobile */
    .privacy-banner {
        padding: 0.75rem 1rem;
    }

    .privacy-banner p {
        font-size: 0.75rem;
        min-width: 0;
    }

    .privacy-ok {
        font-size: 0.7rem;
        padding: 0.4rem 1.1rem;
    }
}

/* Mobile sticky buy bar — hidden on desktop, only visible when modal is open on mobile */
.mobile-buy-bar {
    display: none;
}

/* ==========================================================================
   FAQ page styles
   ========================================================================== */

.faq-hero {
    padding: 3rem 3rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.faq-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
    font-weight: 300;
    -webkit-text-stroke: 0.5px currentColor;
    letter-spacing: 0.02em;
}

.faq-hero p {
    font-size: 1rem;
    color: var(--klein-blue);
    font-style: italic;
    max-width: 580px;
    margin: 0 auto;
}

.faq-container {
    max-width: 780px;
    margin: 0 auto;
    padding: 2rem 3rem 6rem;
}

.faq-section {
    margin-bottom: 4rem;
}

.faq-section:last-child {
    margin-bottom: 0;
}

.faq-section h2 {
    font-size: 1.5rem;
    color: var(--klein-blue);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

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

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-item h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--klein-blue);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.faq-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--klein-blue);
    margin-bottom: 0.75rem;
}

.faq-item p:last-child {
    margin-bottom: 0;
}

.faq-item a {
    color: var(--klein-blue);
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.faq-item ul {
    margin: 0.5rem 0 0.75rem 1.5rem;
    color: var(--klein-blue);
    font-size: 1rem;
    line-height: 1.7;
}

.faq-item li {
    margin-bottom: 0.25rem;
}

/* Pending-confirmation flag — visible during development, easy to remove */
.faq-pending {
    display: inline-block;
    background: rgba(220, 20, 60, 0.08);
    color: #B01030;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Closing "any other questions" block at the bottom of the FAQ */
.faq-closing {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border);
    text-align: center;
}

.faq-closing p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--klein-blue);
    margin: 0;
}

.faq-closing a {
    color: var(--klein-blue);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

/* Back-to-shop link at top of FAQ page */
.faq-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--klein-blue);
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: opacity 0.2s;
}

.faq-back:hover {
    opacity: 0.7;
}

/* Modal link to FAQ page (replaces the long care/commissions text in modal) */
.modal-faq-link {
    display: inline-block;
    color: var(--klein-blue);
    text-decoration: none;
    font-size: 0.875rem;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.2s;
}

.modal-faq-link:hover {
    opacity: 0.7;
    border-bottom-color: transparent;
}

@media (max-width: 768px) {
    .faq-hero {
        padding: 2rem 1.5rem 1rem;
    }

    .faq-hero h1 {
        font-size: 2rem;
    }

    .faq-container {
        padding: 1rem 1.5rem 4rem;
    }

    .faq-section h2 {
        font-size: 1.25rem;
    }

    .faq-item h3 {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Item 6: Scroll-to-top button (work/products page)
   ========================================================================== */

.scroll-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--klein-blue);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
    box-shadow: 0 2px 12px rgba(0, 47, 167, 0.3);
    padding: 0;
}

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

.scroll-top-btn:hover {
    background: #00237a;
}

.scroll-top-btn svg {
    width: 22px;
    height: 22px;
    pointer-events: none;
}

@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   Item 11: About & Contact standalone pages
   ========================================================================== */

/* v16 — Editorial title treatment (Option C):
   lowercase, large, left-aligned title with small italic lede underneath.
   The italic phrase is no longer a centred subtitle but a quiet caption. */
.page-hero {
    padding: 3rem 1.5rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.page-hero h1 {
    font-size: 4rem;
    font-weight: 300;
    -webkit-text-stroke: 0;
    margin-bottom: 0;
    line-height: 0.95;
    letter-spacing: -0.005em;
    text-transform: lowercase;
}

.page-hero p {
    font-size: 0.95rem;
    color: var(--klein-blue);
    font-style: italic;
    font-weight: 300;
    max-width: 22rem;
    margin: 1.5rem 0 0;
    line-height: 1.55;
    opacity: 0.75;
}

.page-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 3rem 6rem;
}

.about-content p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--klein-blue);
    margin-bottom: 1.5rem;
}

.about-content p:last-child {
    margin-bottom: 0;
}

.about-content a,
.about-content a:visited {
    color: var(--klein-blue);
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.contact-content {
    text-align: center;
    padding-top: 1rem;
}

.contact-content .contact-intro {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--klein-blue);
    margin-bottom: 2rem;
}

.contact-content .contact-email {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.contact-content .contact-email a {
    color: var(--klein-blue);
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.contact-content .contact-links {
    justify-content: center;
    margin-top: 0;
}

@media (max-width: 768px) {
    .page-hero {
        padding: 2rem 1.5rem 1rem;
    }

    .page-hero h1 {
        font-size: 2.75rem;
    }

    .page-hero p {
        font-size: 0.9rem;
        margin-top: 1.25rem;
    }
    }

    .page-container {
        padding: 1rem 1.5rem 4rem;
    }

    .contact-content .contact-email {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Item 7: Homepage image carousel
   ========================================================================== */

.carousel {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

.carousel-frame {
    position: relative;
    width: 100%;
    /* Fill viewport from below the header to the bottom of the screen */
    height: calc(100vh - 105px);
    max-height: 880px;
    overflow: hidden;
    background: #D4CFC7;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Ken Burns: slow drift while active */
    transform: scale(1.0);
    transition: opacity 1.8s ease-in-out, transform 8s ease-out;
}

.carousel-slide.active img {
    transform: scale(1.04);
}

.carousel-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Item 5: CTA overlaid on the fullscreen image — no background, just text.
   v15: removed the border-bottom underline (was making it look split when
   the text wrapped). white-space: nowrap forces one line. */
.carousel-cta {
    position: absolute;
    left: 50%;
    bottom: 4rem;
    transform: translateX(-50%);
    background: transparent;
    color: var(--klein-blue);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.5rem 0.25rem;
    border: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 3;
    white-space: nowrap;
}

.carousel-cta:hover {
    opacity: 0.7;
    transform: translateX(-50%) translateY(-2px);
}

/* Dots overlaid at the bottom of the image, white styling so they're visible */
.carousel-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    z-index: 3;
}

.carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--klein-blue);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.carousel-dot.active {
    background: var(--klein-blue);
}

@media (max-width: 768px) {
    .carousel {
        padding: 0;
        margin: 0;
    }

    /* Mobile fullscreen: svh handles dynamic URL bars cleanly */
    .carousel-frame {
        height: calc(100svh - 95px);
        max-height: none;
    }

    /* CTA stays overlaid (no background) on mobile too — just smaller text */
    .carousel-cta {
        font-size: 0.75rem;
        letter-spacing: 0.15em;
        bottom: 3.25rem;
    }

    .carousel-dots {
        bottom: 1.25rem;
    }
}

/* ==========================================================================
   Item 12: Product image hover-swap (shows the styled "in-use" shot)
   ========================================================================== */

.product-image .hover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-card:hover .product-image .hover-img {
    opacity: 1;
}

/* ==========================================================================
   Item 3: Mobile burger menu
   ========================================================================== */

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    /* v15: stay above the slide-in menu so the burger morphs to X in place
       and stays clickable to close (Zara-style behaviour). */
    position: relative;
    z-index: 250;
}

/* v15: 2-line minimal burger that converges into an X. Editorial feel. */
.nav-toggle span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--klein-blue);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    transform-origin: center center;
}
.nav-toggle span:first-child {
    margin-bottom: 7px;
}

/* Open state: the two lines converge at the centre and rotate into an X */
.nav-toggle.open span:first-child {
    transform: translateY(4.25px) rotate(45deg);
}
.nav-toggle.open span:last-child {
    transform: translateY(-4.25px) rotate(-45deg);
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    /* (slide-in nav rules moved out of @media to apply on desktop too) */
}

/* ==========================================================================
   v15 — Item 10: Burger menu on every viewport (mobile + desktop).
   Slide-in nav with frosted-glass cream background. Item 1: 0.7 opacity
   so the page shows through faintly underneath.
   ========================================================================== */

nav#mainNav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    max-width: 320px;
    min-width: 220px;
    background: rgba(250, 247, 242, 0.7);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 4rem 2rem 1.5rem;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    box-shadow: -8px 4px 28px rgba(0, 47, 167, 0.08);
    border-left: 1px solid var(--border);
    max-height: 100vh;
    overflow-y: auto;
}

nav#mainNav.open {
    transform: translateX(0);
}

nav#mainNav a {
    font-size: 1rem;
    padding: 0.55rem 0;
    border: none;
    letter-spacing: 0.1em;
    width: auto;
    text-align: left;
    text-transform: uppercase;
    color: var(--klein-blue);
    text-decoration: none;
}

/* Porcelain face decoration — v16 was a defined block at the bottom of the panel.
   v17: now a full-panel watermark sitting behind the nav links at low opacity.
   Option A from the burger-watermark mockups. */
.menu-decoration {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

.menu-decoration img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0.18;
}

/* Make sure the nav links sit ON TOP of the watermark */
nav#mainNav a {
    position: relative;
    z-index: 2;
}

/* Hide the original inline desktop nav layout — replaced entirely by the burger panel */
header .nav-toggle {
    display: flex;
}

/* Close button hidden on desktop (nav is inline there) */
.nav-close {
    display: none;
}

/* v15: menu decoration shown on all viewports now that burger is universal */
.menu-decoration {
    display: block;
}

/* ==========================================================================
   Item 8: Gallery page — masonry grid
   ========================================================================== */

.gallery-grid {
    column-count: 3;
    column-gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem 6rem;
}

.gallery-grid img {
    width: 100%;
    display: block;
    margin-bottom: 1rem;
    break-inside: avoid;
    background: #D4CFC7;
}

@media (max-width: 900px) {
    .gallery-grid {
        column-count: 2;
        padding: 1rem 1.5rem 4rem;
        column-gap: 0.75rem;
    }
    .gallery-grid img {
        margin-bottom: 0.75rem;
    }
}

/* ==========================================================================
   Item 15: Image copy/download deterrence (CSS layer)
   ========================================================================== */

img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Modal product image uses a background-image, so it's already not draggable. */

/* Item 8: back-to-shop link above the gallery grid */
.gallery-back-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem 0.5rem;
}

@media (max-width: 900px) {
    .gallery-back-wrap {
        padding: 0 1.5rem 0.5rem;
    }
}

/* ==========================================================================
   Items 1 & 2 (v10): Homepage — fullscreen carousel under an overlay header
   ========================================================================== */

/* Carousel fills the ENTIRE viewport on the homepage; the shipping bar
   overlays the top 25px of the image (its blue background covers cleanly).
   v14: was calc(100dvh - 25px) which can leave a rounding/sub-pixel gap on
   some devices — going full 100dvh + zeroing main padding eliminates the
   white strip the user was seeing. */
body.home main {
    padding-top: 0;
}

body.home header {
    background: transparent;
    border-bottom: none;
}

body.home .carousel-frame {
    height: 100svh;
    height: 100dvh;
    max-height: none;
}

/* Item 2: no whitespace or blue line between the photos and the footer */
body.home footer {
    margin-top: 0;
    border-top: none;
}

@media (max-width: 768px) {
    body.home main {
        padding-top: 0;
    }
    body.home .carousel-frame {
        height: 100svh;
        height: 100dvh;
    }
}

/* ==========================================================================
   Item 5: Commissions page — process, showcase, auto-flick image
   ========================================================================== */

.commissions-container {
    max-width: 820px;
}

.commissions-intro p,
.commission-process li,
.commission-cta p,
.commission-caption p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--klein-blue);
}

.commissions-intro p {
    margin-bottom: 1.5rem;
}

.commissions-intro p:last-child {
    margin-bottom: 0;
}

/* Showcase block: large auto-flick image with caption */
.commission-showcase {
    margin: 3.5rem 0 3.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.commission-flick {
    position: relative;
    width: 100%;
    aspect-ratio: 896 / 1195; /* matches the source images */
    background: #D4CFC7;
    overflow: hidden;
}

.flick-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Cross-fade between the two images on a 5s cycle:
   A holds 2s, fades to B, B holds 2s, fades back. Smooth and unobtrusive. */
.flick-a { animation: flickA 5s ease-in-out infinite; }
.flick-b { animation: flickB 5s ease-in-out infinite; }

@keyframes flickA {
    0%, 45%   { opacity: 1; }
    55%, 95%  { opacity: 0; }
    100%      { opacity: 1; }
}

@keyframes flickB {
    0%, 45%   { opacity: 0; }
    55%, 95%  { opacity: 1; }
    100%      { opacity: 0; }
}

.commission-caption h2 {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.commission-caption p {
    margin: 0;
}

/* Process steps */
.commission-process {
    margin: 3.5rem 0;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}

.commission-process h2 {
    font-size: 1.5rem;
    font-weight: 300;
    -webkit-text-stroke: 0.4px currentColor;
    margin-bottom: 1.5rem;
    letter-spacing: 0.04em;
}

.process-steps {
    list-style: decimal;
    padding-left: 1.5rem;
    margin: 0;
}

.process-steps li {
    margin-bottom: 1.25rem;
    padding-left: 0.5rem;
}

.process-steps li:last-child {
    margin-bottom: 0;
}

.process-steps li strong {
    font-weight: 700;
}

/* Closing CTA */
.commission-cta {
    margin-top: 3rem;
    padding-top: 0;
    text-align: center;
}

.commission-cta a {
    color: var(--klein-blue);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

@media (max-width: 768px) {
    .commission-showcase {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 0;
    }

    .commission-flick {
        max-width: 380px;
        margin: 0 auto;
    }

    .commission-process {
        margin: 2rem 0;
        padding-top: 1.75rem;
    }

    .commissions-intro p,
    .commission-process li,
    .commission-cta p,
    .commission-caption p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .commission-caption h2,
    .commission-process h2 {
        font-size: 1.25rem;
    }
}

/* Links in page-hero subtitles inherit italic; keep them visibly underlined */
.page-hero p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

/* ==========================================================================
   v13 — Item 5: Mobile horizontal text logo on non-home pages
   Stacked image stays on the homepage; everything else gets a tighter,
   single-line "STUDIO CERAMIX" text mark on mobile to save vertical space.
   ========================================================================== */

/* Default state: image visible, text hidden (desktop on all pages) */
.logo-inline {
    display: none;
}

@media (max-width: 768px) {
    /* On mobile non-home pages: hide the stacked image, show the text mark */
    body:not(.home) .logo {
        height: auto;
    }
    body:not(.home) .logo-stacked {
        display: none;
    }
    body:not(.home) .logo-inline {
        display: inline-block;
        /* v15: match the homepage stacked logo exactly — Lato Light (300),
           no text-stroke, moderate letter-spacing to match the PNG. */
        font-family: 'Lato', sans-serif;
        font-size: 1.1rem;
        font-weight: 300;
        -webkit-text-stroke: 0;
        letter-spacing: 0.1em;
        color: var(--klein-blue);
        white-space: nowrap;
    }

    /* v15 — Item 4: blue underline closer to the logo (less white below). */
    body:not(.home) header {
        padding: 1.5rem 1rem 0.6rem;
    }
}

/* ==========================================================================
   v13 — Item 2: Android home page white bar fix
   svh on some Android Chrome builds doesn't account for the address bar
   dynamics the same way. dvh adjusts to whatever the current visible viewport
   is — best for "fills the device".
   v14: this override no longer needed — the main body.home .carousel-frame
   rule (line ~1520) now uses 100dvh natively.
   ========================================================================== */

/* (removed — see line ~1520) */

/* Back-to-shop link at the BOTTOM of pages (moved per UX feedback).
   v14: no border, left-aligned per user request. */
.faq-back-bottom {
    display: inline-block;
    margin-top: 3rem;
    padding-top: 0;
    border-top: none;
    width: auto;
    text-align: left;
}

@media (max-width: 768px) {
    .faq-back-bottom {
        margin-top: 2rem;
        padding-top: 0;
    }
}

/* ==========================================================================
   v13 — Items 8, 11: Second commission showcase (amphora) with 360° rotation
   ========================================================================== */

/* Alternate showcase orientation so the two cases don't look identical */
.commission-showcase-reverse {
    direction: rtl;
}
.commission-showcase-reverse > * {
    direction: ltr;
}

.commission-rotation {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #FAF7F2;
}

.rotation-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    display: block;
}

.rotation-frame.active {
    opacity: 1;
}

/* On mobile, force the rotation block to land before its caption (RTL reverse breaks down) */
@media (max-width: 768px) {
    .commission-showcase-reverse {
        direction: ltr;
    }
    .commission-rotation {
        max-width: 380px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   v13 — Item 6: Tighter mobile contact page (less white space before footer)
   ========================================================================== */

@media (max-width: 768px) {
    body.contact-page footer,
    .contact-content + .faq-back-bottom + footer {
        margin-top: 1.5rem;
    }

    /* Reduce footer's own internal padding on contact */
    .contact-page footer {
        padding: 1rem 1.5rem;
    }

    /* Tighten the gap between Instagram icon block and the back-link below */
    .contact-page .contact-content {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   v14 — Item 9: Zara-style burger animates to X in place. No separate close
   button needed (the burger itself toggles, since its z-index sits above the
   open menu).
   ========================================================================== */

.nav-close,
nav#mainNav .nav-close {
    display: none !important;
}

/* The burger needs extra top padding when menu opens so the X sits cleanly
   above any nav content (visual safety margin). */

/* ==========================================================================
   v14 — Item 10: tighten whitespace above/below page titles on mobile.
   ========================================================================== */

@media (max-width: 768px) {
    .page-hero {
        padding: 0.75rem 1.5rem 0.5rem;
    }

    /* With the shorter header on non-home pages, the main can also start
       higher (less padding-top compensating for the fixed header). */
    body:not(.home) main {
        padding-top: 105px;
    }
}

/* ==========================================================================
   v15 — Item 6: Editorial homepage — footer overlays the bottom of the
   carousel image with a frosted-glass cream background. No white gap.
   Applies to both mobile and desktop on homepage.
   ========================================================================== */

body.home {
    position: relative;
}

body.home footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(250, 247, 242, 0.62);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    margin-top: 0;
    border-top: none;
    z-index: 5;
    padding: 0.85rem 1.5rem;
}

/* Push dots and CTA well above the overlaid footer so they're never hidden */
body.home .carousel-dots {
    bottom: 4.5rem;
}

body.home .carousel-cta {
    bottom: 5.0rem;
}

@media (max-width: 768px) {
    body.home footer {
        padding: 0.75rem 1rem;
        font-size: 0.62rem;
    }
    body.home .carousel-dots {
        bottom: 4.25rem;
    }
    body.home .carousel-cta {
        bottom: 6.25rem;
    }
}

/* ==========================================================================
   v17 — Item 4: Gallery hover zoom. Subtle scale + a touch of shadow on
   pointer-capable devices, no transform on touch screens (would look broken).
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    .gallery-grid img {
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    box-shadow 0.5s ease;
        cursor: zoom-in;
        transform-origin: center center;
    }
    .gallery-grid img:hover {
        transform: scale(1.04);
        box-shadow: 0 8px 28px rgba(0, 47, 167, 0.12);
        z-index: 2;
        position: relative;
    }
}


/* v18 — mobile shipping bar slightly larger */
@media (max-width: 768px) {
    .shipping-bar {
        font-size: 0.82rem;
        padding: 0.45rem 0.5rem;
    }
}