:root {
    --bg: #f6efe6;
    --text-dark: #3b3026;
    --text-light: #8a6f55;
    --accent: #b89b7a;
    --soft-bg: #faf6f1;
}

/* ===== GLOBAL ===== */
body {
    margin:0;
    font-family:'Montserrat', sans-serif;
    background:var(--bg);
    color:var(--text-dark);
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4 {
    font-family:'Playfair Display', serif;
    font-weight:600;
    letter-spacing:.5px;
}

p {
    line-height:1.8;
    color:var(--text-light);
    font-size:15px;
}

.section {
    padding:90px 20px;
    text-align:center;
    scroll-margin-top:90px;
}

.bg-light {
    background:var(--soft-bg);
}

/* ===== NAVBAR ===== */
/* ===== NAVBAR FIXED CLEAN ===== */

.navbar {
    position:fixed;
    top:0;
    width:100%;
    background:rgba(246,239,230,0.95);
    backdrop-filter: blur(8px);
    z-index:1000;
}

.navbar-inner {
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 30px;
}

/* Logo */
.logo a {
    text-decoration:none;
    color:var(--text-dark);
    font-family:'Playfair Display', serif;
    font-weight:600;
    font-size:22px;
    white-space:nowrap;
}

/* Right wrapper */
.nav-right {
    display:flex;
    align-items:center;
    gap:18px;
}

/* Desktop Menu */
.desktop-menu {
    display:flex;
    gap:36px;
}

.desktop-menu a {
    text-decoration:none;
    color:var(--text-dark);
    font-size:14px;
    letter-spacing:1px;
    white-space:nowrap;
}

.desktop-menu a:hover {
    color:var(--accent);
}

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

.menu-toggle {
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.menu-toggle span {
    width:22px;
    height:2px;
    background:var(--text-dark);
    transition:.3s;
}

/* Mobile dropdown menu */
@media (max-width:768px){

    .desktop-menu {
        position:absolute;
        top:100%;
        right:20px;
        background:#f6efe6;
        flex-direction:column;
        width:200px;
        text-align:right;
        padding:12px 18px;
        gap:18px;
        opacity:0;
        pointer-events:none;
        transform:translateY(-10px);
        transition:.3s ease;
        box-shadow:0 4px 15px rgba(0,0,0,0.08);
        border-radius:0 0 12px 12px;
    }

    .desktop-menu.active {
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }

    .menu-toggle {
        display:flex;
    }

    /* Hide desktop spacing rule */
    .desktop-menu a {
        font-size:14px;
    }
}

/* Hamburger animation */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
    opacity:0;
}
.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.desktop-menu {
    z-index: 999;
}

.menu-toggle {
    position: relative;
    z-index: 10001; /* pastikan di atas semua layer */
}
.mobile-cart-icon {
    position: relative;
    z-index: 10001;
}
.logo {
    position: relative;
    z-index: 10001;
}


/* ===== HERO ===== */
.hero {
    height:100vh;
    background:url('/images/hero.jpg') center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
    padding-top:100px;
}

.hero-inner h1 {
    font-size:60px;
    margin-bottom:10px;
}

.hero-inner p {
    font-size:18px;
    margin-bottom:25px;
}

.btn-primary {
    padding:12px 30px;
    background:var(--accent);
    color:white;
    text-decoration:none;
    border-radius:30px;
    font-size:13px;
    letter-spacing:1px;
    transition:.3s;
}

.btn-primary:hover {
    background:#a88765;
}

/* ===== GRID COLLECTION ===== */
.grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:40px;
    margin-top:50px;
}

.card img {
    width:100%;
    border-radius:14px;
    aspect-ratio:3/4;
    object-fit:cover;
    transition:.4s;
}

.card:hover img {
    transform:scale(1.02);
}

.collection-btn {
    display:inline-block;
    margin-top:12px;
    font-family:'Playfair Display', serif;
    font-size:18px;
    letter-spacing:.5px;
    color:var(--text-dark);
    text-decoration:none;
    position:relative;
    padding-bottom:4px;
    transition:.3s;
}

.collection-btn::after {
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:0%;
    height:1px;
    background:var(--accent);
    transition:.3s;
}

.collection-btn:hover {
    color:var(--accent);
}

.collection-btn:hover::after {
    width:100%;
}

/* ===== COLLECTION PAGE ===== */
.collection-hero-img {
    max-width:420px;
    border-radius:10px;
    margin:20px auto;
    display:block;
}

.collection-desc {
    max-width:700px;
    margin:0 auto 30px;
}

.btn-back {
    display:inline-block;
    margin-bottom:25px;
    text-decoration:none;
    color:var(--accent);
    font-weight:500;
    font-size:14px;
}

.btn-back:hover {
    text-decoration:underline;
}

/* ===== PRODUCT IMAGE HOVER SWAP ===== */
.product-image-wrapper {
    position:relative;
    border-radius:14px;
    overflow:hidden;
}

.product-image-wrapper img {
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    border-radius:14px;
    transition:opacity .5s ease, transform .5s ease;
}

.img-hover {
    position:absolute;
    top:0; left:0;
    opacity:0;
}

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

.product-card:hover .img-main,
.product-slide:hover .img-main {
    opacity:0;
}

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

/* ===== PRODUCT SLIDER ===== */
.slider-wrapper {
    position:relative;
    display:flex;
    align-items:center;
}

.product-slider {
    display:flex;
    gap:25px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding:20px 5px;
    scroll-snap-type:x mandatory;
}

.product-slide {
    flex:0 0 260px;
    scroll-snap-align:start;
    text-decoration:none;
    color:var(--text-dark);
    text-align:center;
}

.product-slide span {
    display:block;
    margin-top:10px;
    font-family:'Playfair Display',serif;
}

.product-slider::-webkit-scrollbar {
    display:none;
}

/* Slider arrows */
.slider-arrow {
    background:rgba(255,255,255,0.9);
    border:none;
    font-size:26px;
    cursor:pointer;
    padding:8px 14px;
    border-radius:50%;
    color:var(--text-dark);
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
    transition:.3s ease;
    z-index:5;
}

.slider-arrow:hover {
    background:var(--accent);
    color:#fff;
}

.slider-arrow.disabled {
    opacity:0.3;
    pointer-events:none;
}

/* Swipe hint */
.swipe-hint {
    margin-top:8px;
    font-size:13px;
    letter-spacing:1px;
    color:#a08b76;
    text-align:center;
    font-style:italic;
}

/* ===== FOOTER ===== */
footer {
    padding:30px;
    text-align:center;
    font-size:13px;
    color:#777;
}

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

    .hero-inner h1 {
        font-size:36px;
    }

    .navbar-inner {
        padding:14px 20px;
    }

    .navbar nav {
        gap:18px;
    }

    .section {
        padding:70px 20px;
    }

    .slider-arrow {
        display:none;
    }
}

@media (min-width:769px){
    .swipe-hint {
        display:none;
    }
}


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

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

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

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.menu-toggle span {
    transition: all .3s ease;
}


/* ===== STICKY SCROLL EFFECT ===== */

.navbar.scrolled {
    background:rgba(246,239,230,0.98);
    box-shadow:0 4px 18px rgba(0,0,0,0.06);
    transition:background .3s ease, box-shadow .3s ease;
}


/* === LOGO LINK POLISH === */

.logo a {
    text-decoration: none;
    color: #3b3026;            /* default brand text color */
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: .5px;
}

.logo a:visited {
    color: #3b3026;            /* prevent purple visited color */
}

.logo a:hover {
    color: #8b6f55;            /* soft luxury hover */
}

.logo a:active {
    color: #3b3026;
}


/* === OUR VALUES POLISH === */

#values {
    background:#fbf7f2;
}

.values-wrapper {
    max-width:900px;
    margin:40px auto 0;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px 60px;
    text-align:left;
}

.value-item {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.value-title {
    font-family:'Playfair Display', serif;
    font-size:20px;
    color:#3b3026;
    letter-spacing:.5px;
}

.value-item p {
    margin:0;
    font-size:15px;
    color:#8a6f55;
    line-height:1.6;
}

/* Mobile layout */
@media (max-width:768px){
    .values-wrapper {
        grid-template-columns:1fr;
        text-align:center;
        gap:22px;
    }
}

#values {
    scroll-margin-top:90px;
}


/* === CONTACT POLISH === */

/* === CONTACT SECTION === */

/* Title from CKEditor */
.contact-title p {
    font-family:'Playfair Display', serif;
    font-size:42px;
    color:var(--text-dark);
    margin-bottom:20px;
    text-align:center;
}

/* Contact info wrapper */
.contact-info {
    margin-top:10px;
    font-size:15px;
    color:#8a6f55;
    line-height:2;
    text-align:center;
}

/* Content paragraphs from CKEditor */
.contact-content p {
    margin-bottom:8px;
}

/* QR CODE */
.qr-wrapper {
    margin-top:35px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.qr-wrapper img {
    width:140px;
    height:140px;
    border-radius:12px;
    background:#fff;
    padding:8px;
    box-shadow:0 4px 14px rgba(0,0,0,0.06);
}

.qr-wrapper span {
    font-size:13px;
    letter-spacing:1px;
    color:#a08b76;
    font-style:italic;
}

/* Mobile scale */
@media(max-width:768px){
    .contact-title p {
        font-size:28px;
    }

    .qr-wrapper img {
        width:120px;
        height:120px;
    }
}



/* === COLLECTION CONCEPT SECTION === */

.collection-concept {
    padding:90px 8%;
    background: var(--soft-bg);
}

.concept-wrapper {
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    gap:60px;
    align-items:center;
}

/* ===== TITLE from CKEditor ===== */
.concept-text .concept-title p {
    margin:0 0 18px 0;
    font-family:'Playfair Display', serif;
    font-size:42px;
    line-height:1.1;
    color:var(--text-dark);
}


/* ===== CONTENT PARAGRAPHS ===== */
.concept-text .concept-content p {
    font-size:16px;
    line-height:1.9;
    color:var(--text-light);
    margin-bottom:18px;
}

/* ===== BOLD WORDS ===== */
.concept-text .concept-content strong {
    font-weight:600;
    color:var(--text-dark);
}

/* ===== BULLET LIST ===== */
.concept-text .concept-content ul {
    margin-top:22px;
    list-style:none;
    padding:0;
}

.concept-text .concept-content li {
    font-size:16px;
    color:var(--text-dark);
    margin-bottom:12px;
    display:flex;
    align-items:center;
    gap:10px;
}

.concept-text .concept-content li::before {
    content:"✓";
    font-weight:600;
    color:var(--accent);
    font-size:18px;
}

/* ===== IMAGE ===== */
.concept-image img {
    width:100%;
    border-radius:12px;
    box-shadow:0 8px 30px rgba(0,0,0,0.12);
    object-fit:cover;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
    .concept-wrapper {
        grid-template-columns:1fr;
        text-align:center;
    }

    .concept-text .concept-title p {
        font-size:34px;
    }

    .concept-text .concept-content ul {
        display:inline-block;
        text-align:left;
    }

    .concept-image {
        margin-top:30px;
    }
}




/* Ensure readable text when using bg-light in collection concept */

.collection-concept.bg-light {
    background: var(--soft-bg); /* pakai warna bg-light default */
}

/* Override text colors ONLY inside this section */
.collection-concept.bg-light h2 {
    color: var(--text-dark);
}

.collection-concept.bg-light p {
    color: var(--text-light);
}

.collection-concept.bg-light strong {
    color: var(--text-dark);
}

.collection-concept.bg-light .concept-points li {
    color: var(--text-dark);
}

.collection-concept.bg-light .concept-points li::before {
    color: var(--accent);
}


/* === OUR VALUES SECTION === */

.values-section {
    padding:90px 8%;
}

.values-wrapper {
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:60px;
    align-items:center;
}

/* ===== TITLE from CKEditor (<p>) ===== */
.values-title p {
    font-family:'Playfair Display', serif;
    font-size:42px;
    margin-bottom:25px;
    color:var(--text-dark);
}

/* ===== LIST from CKEditor (<ul><li>) ===== */
.values-list ul {
    list-style:none;
    padding:0;
    margin:0;
}

.values-list li {
    font-size:16px;
    color:var(--text-light);
    margin-bottom:18px;
    line-height:1.8;
}

/* Heading text inside list (<strong> from CKEditor bold button) */
.values-list li strong {
    display:block;
    font-family:'Playfair Display', serif;
    font-size:20px;
    color:var(--text-dark);
    margin-bottom:4px;
    font-weight:400;
}

/* ===== IMAGE ===== */
.values-image img {
    width:100%;
    border-radius:14px;
    box-shadow:0 8px 28px rgba(0,0,0,0.08);
    object-fit:cover;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
    .values-wrapper {
        grid-template-columns:1fr;
        text-align:center;
    }

    .values-title p {
        font-size:34px;
    }

    .values-list {
        max-width:420px;
        margin:0 auto;
        text-align:left;
    }

    .values-image {
        margin-top:30px;
    }
}



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

/* === ABOUT FULL WIDTH BACKGROUND SECTION === */

.about-full-bg {
    background:url('/images/about.png') center/cover no-repeat;
    width:100%;
    border-radius:0;           /* no card */
    overflow:hidden;
}

/* soft overlay */
.about-full-overlay {
    background:rgba(246,239,230,0.90);
    padding:60px 12%;
    text-align:center;
}

/* Title dari CKEditor (<p>) */
.about-title p {
    margin: 0 0 22px 0;
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    line-height: 1.15;
    color: var(--text-dark);
}

/* Content paragraphs dari CKEditor */
.about-content p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-light);
    margin-bottom: 18px;
}

/* Bold text dari CKEditor */
.about-content strong {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: var(--text-dark);
    font-weight: 400;
}

/* remove horizontal padding only for about section */
.about-section {
    padding-left:0 !important;
    padding-right:0 !important;
}

/* mobile spacing */
@media(max-width:768px){
    .about-full-overlay {
        padding:50px 18px;
    }

    .about-title p {
        font-size:28px;
    }
}



/* === MEANING SECTION === */

.meaning-section {
    padding:90px 8%;
}

.meaning-grid {
    display:grid;
    grid-template-columns: 1fr 0.9fr 1fr;
    align-items:center;
    gap:40px;
}

/* Title dari CKEditor (dibungkus <p>) */
.meaning-text .meaning-title p {
    margin:0;
    font-family:'Playfair Display', serif;
    font-size:38px;
    line-height:1.1;
    color:var(--text-dark);
}

/* Jika di editor ada <span> untuk kata tertentu */
.meaning-text .meaning-title p span {
    font-style:italic;
}

/* Content text dari CKEditor */
.meaning-text .meaning-content p {
    font-size:15px;
    /* line-height:1.8; */
    color:var(--text-light);
    /* margin-bottom:18px; */
}

/* Bold text jika ada <strong> di editor */
.meaning-text .meaning-content strong {
    font-family:'Playfair Display', serif;
    font-size:18px;
    color:var(--text-dark);
    /* font-weight:2400; */
}

/* Image */
.meaning-image img {
    width:100%;
    max-width:320px;
    margin:auto;
    display:block;
}


/* ===== Responsive ===== */

@media(max-width:900px){
    .meaning-grid {
        grid-template-columns:1fr;
        text-align:center;
    }

    .meaning-image img {
        max-width:260px;
        margin:25px auto;
    }
}


/* ===== VISION & MISSION ===== */
/* ===== VISION SECTION WITH SOFT BACKGROUND IMAGE ===== */
.vision-section {
    position: relative;
    text-align: center;
    padding:120px 20px;
    overflow: hidden;
}

/* background image */
.vision-section::before {
    content:"";
    position:absolute;
    inset:0;
    background:url('/images/vision-mission.png') center/cover no-repeat;
    opacity:0.12;
    z-index:0;
}

/* content overlay */
.vision-overlay {
    position:relative;
    z-index:1;
    max-width:700px;
    margin:auto;
}

/* Title from CKEditor (<p>) */
.vision-title p {
    margin-bottom:35px;
    font-family:'Playfair Display',serif;
    font-size:42px;
    line-height:1.15;
    color:var(--text-dark);
}

/* Sub headings Vision / Mission (<h4> from CKEditor) */
.vision-content h4 {
    font-family:'Playfair Display',serif;
    font-size:22px;
    color:var(--text-dark);
    margin-bottom:12px;
}

/* Paragraph text from CKEditor */
.vision-content p {
    font-size:16px;
    line-height:1.9;
    color:var(--text-light);
    margin-bottom:35px;
}

/* mobile spacing */
@media(max-width:768px){
    .vision-section {
        padding:90px 25px;
    }

    .vision-title p {
        font-size:28px;
    }
}



/* ===== FOUNDERS SECTION ===== */

.founder-intro {
    max-width:640px;
    margin:15px auto 35px;
    font-size:15px;
    line-height:1.8;
    color:var(--text-light);
}

.founder-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:45px;
    max-width:760px;
    margin:0 auto;
}

.founder-card {
    text-align:center;
}

.founder-card img {
    width:100%;
    max-width:260px;
    aspect-ratio:3/4;
    object-fit:cover;
    border-radius:14px;
    box-shadow:0 8px 22px rgba(0,0,0,0.08);
    transition:.4s ease;
}

.founder-card img:hover {
    transform:translateY(-5px);
}

.founder-card h4 {
    margin-top:18px;
    font-size:18px;
}

.founder-card span {
    display:block;
    margin-top:6px;
    font-size:14px;
    color:var(--text-light);
    letter-spacing:.3px;
}

/* ===== Mobile ===== */

@media(max-width:768px){
    .founder-grid {
        grid-template-columns:1fr;
        gap:35px;
    }
    .founder-card img {
        max-width:240px;
    }
}


/* === PRODUCT DETAIL PAGE === */

.product-gallery {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:20px;
    margin:30px 0;
}

/* Product images */
.product-gallery img {
    width:100%;
    height:auto;
    border-radius:12px;
    object-fit:cover;
    display:block;
}

/* Back button */
.btn-back {
    display:inline-block;
    margin-bottom:18px;
    font-size:14px;
    color:var(--text-light);
    text-decoration:none;
}

.btn-back:hover {
    text-decoration:underline;
}


/* === Mobile Optimized === */

@media(max-width:768px){

    .product-gallery {
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        gap:15px;
        padding-bottom:10px;
    }

    .product-gallery img {
        flex:0 0 85%;
        scroll-snap-align:start;
        border-radius:10px;
    }

    .btn-back {
        display:block;
        text-align:center;
    }

}

/* ===== CART PAGE ===== */

.cart-wrapper {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
    text-align: center;
}

.cart-title {
    font-size: 28px;
    margin-bottom: 40px;
}

/* Cart Item */
.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.cart-item-left {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
}

.cart-item-left img {
    width: 90px;
    border-radius: 8px;
}

.cart-item-info strong {
    font-size: 16px;
}

.cart-item-info p {
    margin: 4px 0;
    font-size: 14px;
}

/* Remove Button */
.cart-remove-btn {
    border: 1px solid #000;
    background: transparent;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}

.cart-remove-btn:hover {
    background: #000;
    color: #fff;
}

/* Cart Total */
.cart-total {
    margin-top: 30px;
    font-size: 18px;
}

/* Checkout Button */
.cart-checkout-btn {
    margin-top: 20px;
    background: #b89b7a;
    color: #fff;
    padding: 12px 26px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.cart-checkout-btn:hover {
    background: #9f8466;
}


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

    .cart-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .cart-item-left {
        width: 100%;
    }

    .cart-remove-btn {
        align-self: flex-end;
    }

    .cart-wrapper {
        margin-top: 40px;
    }
}


/* ===== CHECKOUT PAGE ===== */

.checkout-wrapper {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
    text-align: center;
}

.checkout-title {
    font-size: 28px;
    margin-bottom: 40px;
}

/* Checkout Form Layout */
.checkout-form {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Input Fields */
.checkout-input {
    padding: 10px 12px;
    border: 1px solid #999;
    font-size: 14px;
    min-width: 180px;
    border-radius: 6px;
    background: transparent;
}

.checkout-input:focus {
    outline: none;
    border-color: #b89b7a;
}

/* Address textarea */
.checkout-input textarea {
    resize: none;
}

/* Submit Button */
.checkout-submit-btn {
    background: #b89b7a;
    color: #fff;
    padding: 10px 22px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.checkout-submit-btn:hover {
    background: #9f8466;
}

/* ===== Mobile ===== */
@media(max-width:768px){
    .checkout-form {
        flex-direction: column;
        align-items: stretch;
    }

    .checkout-input {
        width: 93%;
    }

    .checkout-submit-btn {
        width: 100%;
    }
}



/* ===== NAV RIGHT WRAPPER ===== */
.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ===== MOBILE CART ICON ===== */
.mobile-cart-icon {
    position: relative;
    text-decoration: none;
    color: #b89b7a;
    font-size: 20px;
    display: none;
}

.mobile-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #b89b7a;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    line-height: 1;
}

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

    /* Mobile cart icon visible */
    .mobile-cart-icon {
        display: inline-block;
    }

    /* Desktop menu becomes dropdown */
    .desktop-menu {
        display: flex;              /* <-- IMPORTANT */
        position: absolute;
        top: 100%;
        right: 20px;
        background: #f6efe6;
        flex-direction: column;
        width: 200px;
        text-align: right;
        padding: 12px 18px;
        gap: 18px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: .3s ease;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        border-radius: 0 0 12px 12px;
    }

    /* When active */
    .desktop-menu.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Show hamburger */
    .menu-toggle {
        display: flex;
    }
}

/* ===== DESKTOP ===== */
@media(min-width:769px){
    .desktop-menu {
        display:flex;
        position:static;
        flex-direction:row;
        opacity:1;
        pointer-events:auto;
        transform:none;
        background:none;
        box-shadow:none;
        padding:0;
        gap:36px;
    }

    .mobile-cart-icon {
        display:none;
    }

    .menu-toggle {
        display:none;
    }
}


/* ===== PRODUCT OPTIONS ===== */

.product-option {
    margin-top:25px;
    text-align:left;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
}

.option-header {
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:8px;
}

.size-guide {
    font-size:13px;
    color:var(--accent);
    text-decoration:none;
}

.size-selector {
    display:flex;
    gap:10px;
}

.size-selector label {
    position:relative;
}

.size-selector input {
    display:none;
}

.size-selector span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:1px solid #ccc;
    border-radius:50%;
    font-size:13px;
    cursor:pointer;
    transition:.2s;
}

.size-selector input:checked + span {
    border-color: var(--accent);
    background: var(--accent);
    color:#fff;
}

/* Quantity */
.qty-selector {
    display:flex;
    align-items:center;
    border:1px solid #ccc;
    border-radius:6px;
    width:110px;
    margin-top:8px;
}

.qty-selector button {
    border:none;
    background:none;
    width:32px;
    font-size:18px;
    cursor:pointer;
    color:var(--text-dark);
}

.qty-selector input {
    border:none;
    width:46px;
    text-align:center;
    font-size:14px;
    background:transparent;
}

.qty-selector input:focus {
    outline:none;
}


/* ===== COLLECTION HERO SECTION (ISOLATED) ===== */

.collection-hero-section {
    padding:90px 20px;
    text-align:center;
}

.collection-hero-section h2 {
    font-family:'Playfair Display', serif;
    font-size:32px;
    margin-bottom:12px;
    color:var(--text-dark);
}

.collection-hero-section img {
    max-width:420px;
    width:100%;
    height:auto;
    border-radius:12px;
    margin:18px auto;
    display:block;
}

.collection-hero-section p {
    max-width:720px;
    margin:0 auto;
    font-size:15px;
    line-height:1.8;
    color:var(--text-light);
}

/* Back button only inside collection */
.collection-hero-section .btn-back {
    display:inline-block;
    margin-bottom:18px;
    font-size:14px;
    color:var(--text-light);
    text-decoration:none;
}

.collection-hero-section .btn-back:hover {
    text-decoration:underline;
}

/* Mobile */
@media(max-width:768px){
    .collection-hero-section {
        padding:65px 18px;
    }

    .collection-hero-section h2 {
        font-size:26px;
    }

    .collection-hero-section p {
        font-size:14px;
    }
}