/* ========================================
   YUGZEN v4 - 360° Fashion Manufacturing
   Color: #d38f3f (primary), #000, #faf8f5, #fff7f5
   ======================================== */

:root {
    --primary: #d38f3f;
    --primary-dark: #b87a2e;
    --black: #2c3e50;
    --cream: #faf8f5;
    --cream-dark: #f5f0eb;
    --white: #fff;
    --gold: #d38f3f;
    --gray: #5a5a5a;
    --gray-light: #8a8a8a;
    --text: #2c3e50;
    --text-light: #4a5568;
    --shadow: 0 10px 40px rgba(0,0,0,0.08);
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text);
    line-height: 1.75;
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
h1, h2, h3, h4, h5 { font-family: 'Playfair Display', serif; font-weight: 400; color: var(--black); }
p { font-family: 'Montserrat', sans-serif; }
em { font-family: 'Montserrat', sans-serif; font-style: italic; color: var(--primary); }

/* ========================================
   WHATSAPP BUTTON
   ======================================== */
.whatsapp-btn {
    position: fixed;
    bottom: 2rem;
    right: 1.5rem;
    width: 55px;
    height: 55px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 5px 25px rgba(37, 211, 102, 0.4);
    transition: var(--transition);
}
.whatsapp-btn svg { width: 30px; height: 30px; fill: white; }
.whatsapp-btn:hover { transform: scale(1.1); }
.pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ── Leaf Arrow (global nav arrows) ── */
.nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
.nav-arrow svg { width: 28px; height: 28px; transition: transform 0.3s ease; }
.nav-arrow:hover svg { transform: scale(1.15); }

/* ========================================
   MODAL
   ======================================== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.modal.active { display: flex; }
.modal-box {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 15px;
    max-width: 460px;
    width: 100%;
    position: relative;
    animation: modalIn 0.3s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--gray);
}
.modal-box h3 { margin-bottom: 0.3rem; font-size: 1.5rem; }
.modal-sub { font-size: 0.85rem; color: var(--gray); margin-bottom: 1.5rem; }
.modal-box input,
.modal-box select,
.modal-box textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    transition: var(--transition);
    background: var(--white);
    color: var(--black);
    appearance: none;
}
.modal-box input:focus,
.modal-box select:focus,
.modal-box textarea:focus { outline: none; border-color: var(--primary); }
.modal-box button[type="submit"] {
    width: 100%;
    padding: 1rem;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
}
.modal-box button[type="submit"]:hover { background: var(--black); }

/* ========================================
   HEADER
   ======================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--cream);
    z-index: 1000;
    transition: var(--transition);
}
.header.scrolled {
    background: rgba(250, 248, 245, 0.98);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
.header-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.8rem 2rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
}
.nav-left, .nav-right { display: flex; gap: 1rem; align-items: center; }
.nav-left { justify-content: flex-start; }
.nav-right { justify-content: flex-end; }
.nav-left a, .nav-right a {
    color: var(--black);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 2px;
    transition: var(--transition);
}
.nav-left a:hover, .nav-right a:hover { color: var(--primary); }
.nav-left a.nav-active, .nav-right a.nav-active { color: var(--primary); }
.nav-home {
    display: inline-flex !important;
    align-items: center;
    padding: 0.3rem;
    border-right: 1px solid #e0dbd5;
    padding-right: 1.5rem;
    margin-right: -0.5rem;
}
.nav-home svg { transition: all 0.3s ease; }
.nav-home:hover svg { stroke: var(--primary); }
.logo { text-align: center; }
.logo a { display: inline-block; line-height: 0; }
.logo-img {
    height: 46px;
    width: auto;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.crafted-tag {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #2c3e50;
    margin-top: 4px;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Mega Menu */
/* ── Mega Menu ── */
.mega-wrap {
    position: static;
}
.mega-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.mega-trigger svg {
    transition: transform 0.3s ease;
}
.mega-wrap:hover .mega-trigger svg,
.mega-wrap.active .mega-trigger svg {
    transform: rotate(180deg);
}
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--white);
    border-top: 2px solid var(--primary);
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 8px, 0);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    will-change: opacity, transform;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    z-index: 1000;
}
.mega-wrap:hover .mega-menu,
.mega-wrap.active .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}
/* Tabs */
.mega-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    background: #faf8f5;
    border-bottom: 1px solid #e8e4df;
}
.mega-tab {
    padding: 1rem 2.5rem;
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--black);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
.mega-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: var(--primary);
    transition: transform 0.3s ease;
}
.mega-tab:hover {
    color: var(--black);
}
.mega-tab.active {
    color: var(--primary);
}
.mega-tab.active::after {
    transform: translateX(-50%) scaleX(1);
}
.mega-tab[data-tab="collection"] {
    color: var(--primary);
    position: relative;
}
.mega-tab[data-tab="collection"]::before {
    content: 'NEW';
    position: absolute;
    top: 4px;
    right: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 0.45rem;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 1px;
    font-weight: 700;
}
/* Tab Content — CSS Grid auto-scaling */
.mega-tab-content {
    display: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 0.5rem;
}
.mega-tab-content.active {
    display: flex;
    gap: 1.5rem;
}
/* Featured always stays right */
.mega-tab-content .mega-featured {
    margin-left: auto;
    min-width: 220px;
}
/* Columns */
.mega-col {
    width: 170px;
    flex-shrink: 0;
    padding: 0 0.5rem;
    border-right: 1px solid #f0ebe5;
    display: flex;
    flex-direction: column;
}
.mega-col:last-child,
.mega-col.mega-featured {
    border-right: none;
}
.mega-col h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 2px solid var(--primary);
}
.mega-col a {
    display: block;
    position: relative;
    font-size: 0.82rem !important;
    letter-spacing: 0.3px !important;
    color: #555 !important;
    padding: 0.5rem 0 0.5rem 0;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.2, 0, 0.1, 1);
    line-height: 1.5;
}
.mega-col a::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 0;
    background: var(--primary);
    transition: height 0.25s ease;
}
.mega-col a:hover {
    color: var(--primary) !important;
    transform: translateX(6px);
}
.mega-col a:hover::before {
    height: 16px;
}
/* View All link within columns */
.mega-view-all {
    font-size: 0.6rem !important;
    font-weight: 700;
    color: var(--primary) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
    padding: 0.8rem 0 0.3rem !important;
    margin-top: auto;
    border-top: 1px solid #f0ebe5;
}
.mega-view-all::before {
    display: none !important;
}
/* Featured Column */
.mega-featured {
    background: linear-gradient(145deg, #faf8f5, #f3ede6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 0 320px !important;
    min-width: 300px;
    max-width: 340px;
    padding: 1.5rem !important;
    border-right: none !important;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}
.mega-featured:hover {
    box-shadow: 0 8px 24px rgba(211,143,63,0.1);
}
.mega-featured-imgs {
    margin-bottom: 1rem;
}
.mega-feat-product {
    width: 100%;
    max-width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.4s ease;
}
.mega-feat-lifestyle {
    display: none;
}
.mega-featured:hover .mega-feat-product {
    transform: scale(1.03);
}
.mega-featured p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-style: italic;
    color: #888;
    margin-bottom: 0.8rem;
}
.mega-featured .mega-view-all {
    border: 1.5px solid var(--primary);
    margin-top: 0;
    padding: 0.6rem 1.5rem !important;
    background: var(--primary);
    color: var(--white) !important;
    font-size: 0.65rem !important;
    letter-spacing: 2px !important;
    transition: all 0.3s ease;
}
.mega-featured .mega-view-all:hover {
    background: transparent;
    color: var(--primary) !important;
    border-color: var(--primary);
}
.mega-empty {
    display: block;
    font-size: 0.75rem;
    color: #bbb;
    font-style: italic;
    padding: 0.4rem 0;
}

.btn-b2b {
    border: 1.5px solid var(--black) !important;
    padding: 0.4rem 1.2rem !important;
    transition: background 0.3s, color 0.3s, border-color 0.3s !important;
}
.btn-b2b:hover { background: var(--primary) !important; color: var(--white) !important; border-color: var(--primary) !important; }
.currency-wrapper {
    position: relative;
}
.currency-toggle {
    height: 32px;
    border-radius: 4px;
    border: none;
    background: none;
    padding: 0 0.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    font-family: inherit;
}
.currency-flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    flex-shrink: 0;
}
.currency-label {
    font-size: 0.8rem;
    color: var(--black);
    font-weight: 500;
    white-space: nowrap;
}
.currency-caret {
    font-size: 1rem;
    color: var(--black);
    line-height: 1;
}
.currency-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1000;
    min-width: 160px;
    overflow: hidden;
}
.currency-dropdown.active {
    display: block;
}
.currency-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: background 0.2s;
}
.currency-option:hover {
    background: var(--cream);
}
.currency-option .currency-flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.mobile-menu { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; }
.mobile-menu span { width: 22px; height: 2px; background: var(--black); }

/* ========================================
   HERO
   ======================================== */
.hero {
    position: relative;
    height: 85vh;
    min-height: 560px;
    margin-top: 62px;
    overflow: hidden;
}
.hero-slider { position: relative; height: 100%; }
.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}
.slide.active { opacity: 1; z-index: 1; }
.slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.65) 100%);
}
.slide img, .slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    z-index: 2;
    max-width: 700px;
    width: 80%;
    text-align: center;
}
.slide-tag {
    font-size: 0.7rem;
    letter-spacing: 4px;
    display: inline-block;
    background: var(--primary);
    padding: 0.3rem 1rem;
    margin-bottom: 1.2rem;
}
.slide-content h1 {
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 1rem;
    color: #ffffff;
}
.slide-content h1 em { color: var(--white); display: block; }
.slide-content p { margin-bottom: 2rem; opacity: 0.9; font-size: 1rem; }
.slide-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 2.5rem;
    background: var(--primary);
    color: var(--white) !important;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    border: 1.5px solid var(--primary);
    cursor: pointer;
    transition: all 0.3s ease;
    animation: btnHeroPulse 2s ease-in-out infinite;
}
.btn-hero:hover {
    background: transparent;
    color: var(--primary) !important;
}
@keyframes btnHeroPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(148,74,62,0.5); }
    50% { box-shadow: 0 0 0 10px rgba(148,74,62,0); }
}
.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 2.5rem;
    border: 1.5px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.78rem;
    letter-spacing: 2px;
    font-weight: 600;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-hero-outline:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }
.hero-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
    z-index: 10;
}
.hero-nav button {
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: rgba(255,255,255,0.7);
    font-size: 0;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-nav button svg { transition: transform 0.3s ease; }
.hero-nav-prev svg { transform: scaleX(-1); }
.hero-nav button:hover { color: var(--white); }
.hero-nav-next:hover svg { transform: scale(1.2); }
.hero-nav-prev:hover svg { transform: scaleX(-1) scale(1.2); }
.hero-dots {
    position: absolute;
    bottom: 4rem;
    right: 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 10;
}
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: var(--transition);
}
.dot.active { background: var(--white); height: 25px; border-radius: 4px; }
.hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,0.2);
    z-index: 10;
}
.bar { height: 100%; background: var(--primary); animation: progress 5s linear infinite; }
@keyframes progress { from { width: 0; } to { width: 100%; } }
.scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 10%;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 10;
    color: rgba(255,255,255,0.6);
    font-size: 0.7rem;
    letter-spacing: 2px;
}
.scroll-line {
    width: 40px;
    height: 1px;
    background: rgba(255,255,255,0.4);
    animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
    0%, 100% { width: 40px; opacity: 0.4; }
    50% { width: 60px; opacity: 1; }
}

/* ========================================
   SECTION HEAD
   ======================================== */
.section-head { text-align: center; margin-bottom: 2rem; }
.label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 3.5px;
    color: var(--primary);
    display: block;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}
.section-head h2 { font-size: 2.4rem; color: var(--black); line-height: 1.3; }
.section-sub { color: var(--gray); margin-top: 0.6rem; font-size: 0.92rem; line-height: 1.7; }
.deco {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1rem;
}
.deco span { width: 40px; height: 1px; background: var(--primary); }
.deco i {
    font-style: normal;
    font-size: 0;
    width: 25px;
    height: 19px;
    display: inline-block;
    background-image: url("../images/deco-wings.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ========================================
   CLIENTS MARQUEE
   ======================================== */
.clients {
    padding: 1.5rem 0;
    background: var(--white);
    overflow: hidden;
    border-top: 1px solid rgba(211,143,63,0.1);
    border-bottom: 1px solid rgba(211,143,63,0.1);
}
.marquee { overflow: hidden; }
.marquee-track {
    display: flex;
    gap: 2rem;
    animation: marquee 30s linear infinite;
    align-items: center;
}
.marquee-track span {
    font-size: 0.75rem;
    letter-spacing: 2px;
    white-space: nowrap;
    color: var(--gray);
    font-weight: 400;
    text-transform: none;
}
.tag-b2b {
    color: var(--gray) !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-transform: none !important;
    padding: 0 !important;
    background: none !important;
}
.tag-sep { color: var(--primary); opacity: 0.5; }
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ========================================
   PRODUCTS HERO — Clean Card Grid
   ======================================== */
.products-hero {
    padding: 4rem 0 5rem;
    background: var(--cream);
}
.products-hero .section-head { margin-bottom: 3rem; }

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

.pillar-card {
    position: relative;
    background: var(--white);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    padding-bottom: 30px;
}
.pillar-card .bottom_button {
    position: absolute;
    bottom: 40px;
    left: 1.8rem;
}
.pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.1);
}

/* Image area */
.pillar-img {
    position: relative;
    height: 300px;
    overflow: hidden;
}
.pillar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    filter: brightness(0.92);
}
.pillar-card:hover .pillar-img img { transform: scale(1.06); }

/* Ghost number on image */
.pillar-num {
    position: absolute;
    bottom: 0.8rem;
    right: 1.2rem;
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.18);
    line-height: 1;
    user-select: none;
    pointer-events: none;
    transition: color 0.4s ease;
}
.pillar-card:hover .pillar-num { color: rgba(255,255,255,0.1); }

/* Content area */
.pillar-body {
    padding: 1.6rem 1.2rem 2rem;
    border-top: 3px solid transparent;
    transition: border-color 0.35s ease;
}
.pillar-card:hover .pillar-body { border-top-color: var(--primary); }

.pillar-cat {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 2.5px;
    color: var(--primary);
    margin-bottom: 0.7rem;
}

.pillar-body h3 {
    font-size: 1.55rem;
    line-height: 1.2;
    margin-bottom: 0.8rem;
}

.pillar-body p {
    font-size: 0.86rem;
    color: var(--gray);
    line-height: 1.75;
    margin-bottom: 1.2rem;
}

.pillar-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    margin-bottom: 1.4rem;
    overflow: visible;
    width: 100%;
    animation: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}
.pillar-tags span {
    font-size: 0.788rem;
    letter-spacing: 0.5px;
    color: #b3670c;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    border: none !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}
.pillar-tags span::after {
    content: '•';
    margin: 0 0.5rem;
    color: #424242;
    font-size: 1.2rem;
    line-height: 1rem;
}
.pillar-tags span:last-child::after {
    display: none;
}

.pillar-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 3px;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    border-bottom: 1.5px solid var(--black);
    padding-bottom: 6px;
    transition: color 0.3s, border-color 0.3s;
    display: inline-block;
}
.pillar-link:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.grow-strip .btn-view-all {
    color: var(--black);
    border-color:var(--black);
}
.grow-strip .btn-view-all:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* ========================================
   SERVICES — Split Screen
   ======================================== */
.services {
    background: var(--white);
    padding: 5rem 0;
}
.services-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 300px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.1);
}
.services-visual { overflow: hidden; }

/* Left image panel */
.services-visual {
    position: relative;
    overflow: hidden;
    min-height: 260px;
}
.services-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.services-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
}
.services-visual-overlay {
    position: absolute;
    bottom: 2rem;
    left: 2.5rem;
    z-index: 2;
}
.svo-big {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.12);
    line-height: 1;
}
.svo-tag {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--white);
    line-height: 1.25;
    font-weight: 400;
}

/* Right content panel */
.services-content {
    padding: 1.8rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--cream);
    overflow: visible;
    position: relative;
    z-index: 10;
}
.svc-head { margin-bottom: 1.2rem; }
.svc-head .label { margin-bottom: 0.4rem; }
.svc-head h2 { font-size: 1.9rem; line-height: 1.2; margin-bottom: 0.5rem; }
.svc-head p { font-size: 0.85rem; color: var(--gray); line-height: 1.6; }

/* Service list */
.svc-list { list-style: none; margin-bottom: 1.4rem; }
.svc-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 1;
}
.svc-item:first-child { border-top: 1px solid rgba(0,0,0,0.07); }
.svc-item:hover { z-index: 50; }

.svc-num {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(211,143,63,0.7);
    min-width: 28px;
    transition: color 0.3s ease;
    line-height: 1;
}
.svc-item:hover .svc-num { color: var(--primary); }

.svc-info { flex: 1; position: relative; }
.svc-info h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0;
    color: var(--black);
    transition: color 0.3s;
}
.svc-item:hover .svc-info h4 { color: var(--primary); }
.svc-info p {
    position: absolute;
    top: calc(100% - 38px);
    left: -1rem;
    right: -1rem;
    font-size: 0.78rem;
    color: var(--gray);
    line-height: 1.6;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: var(--cream);
    border-left: 3px solid var(--primary);
    padding: 0.25rem 0.5rem;
    transition: opacity 0.3s ease, visibility 0.3s;
    z-index: 100;
    margin: 0;
}
.svc-item:hover .svc-info p {
    opacity: 1;
    visibility: visible;
}

.svc-arr {
    color: rgba(211,143,63,0.3);
    font-size: 1.1rem;
    text-decoration: none;
    transition: color 0.25s, transform 0.25s;
    display: block;
    flex-shrink: 0;
}
.svc-item:hover .svc-arr { color: var(--primary); transform: translateX(5px); }

/* Highlight item */
.svc-highlight .svc-info h4 { color: var(--black); }
.svc-highlight .svc-num { color: rgba(211,143,63,0.5); }

.svc-cta { align-self: flex-start; }

/* ========================================
   CUSTOM SECTION (B2C)
   ======================================== */
.custom-section {
    padding: 6rem 0;
    background: var(--cream-dark);
}
.custom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.custom-text .label { margin-bottom: 0.5rem; }
.custom-text h2 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 1.2rem; }
.custom-text p { color: var(--gray); line-height: 1.8; margin-bottom: 1.5rem; font-size: 0.95rem; }
.custom-list {
    list-style: none;
    margin-bottom: 2rem;
}
.custom-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
    color: var(--black);
}
.custom-list li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    stroke: var(--primary);
    fill: none;
    stroke-width: 2.5;
}
.btn-primary {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 2px;
    transition: var(--transition);
    border: 2px solid var(--primary);
}
.btn-primary {
    border: 1.5px solid var(--primary);
}
.btn-primary:hover {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.custom-visual { position: relative; }
.custom-img-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 420px;
}
.custom-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.custom-badge {
    position: absolute;
    bottom: 2rem;
    left: -1.5rem;
    background: var(--primary);
    color: var(--white);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.65rem;
    letter-spacing: 1px;
    line-height: 1.4;
    box-shadow: 0 10px 30px rgba(211,143,63,0.4);
}
.custom-badge strong { font-size: 1rem; font-family: 'Playfair Display', serif; }
.custom-img-small {
    position: absolute;
    bottom: -2rem;
    right: -2rem;
    width: 160px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    border: 4px solid var(--white);
}
.custom-img-small img { width: 100%; height: 100%; object-fit: cover; }

/* ========================================
   HOW IT WORKS — Individual Customer Journey
   ======================================== */
.how-it-works {
    padding: 5rem 0 4rem;
    background: var(--white);
}

/* ---- Journey rows ---- */
.hiw-journey {
    margin: 3rem 0;
    overflow: hidden;
    border: 1px solid rgba(211,143,63,0.1);
}
.hiw-row {
    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 400px;
    position: relative;
}
.hiw-reverse {
    grid-template-columns: 45% 55%;
}
.hiw-reverse .hiw-img { order: 2; }
.hiw-reverse .hiw-text { order: 1; }

/* ---- Image panel ---- */
.hiw-img {
    position: relative;
    overflow: hidden;
    height: 400px;
}
.hiw-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hiw-row:hover .hiw-img img { transform: scale(1.06); }

/* Gradient overlay on image */
.hiw-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(211,143,63,0.18) 0%, transparent 55%);
    pointer-events: none;
}

/* Step number badge on image */
.hiw-badge {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(211,143,63,0.45);
}
.hiw-reverse .hiw-badge {
    left: auto;
    right: 1.5rem;
}

/* ---- Text panel ---- */
.hiw-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 3.5rem;
    background: var(--cream-dark);
    position: relative;
    overflow: hidden;
}

/* Ghost big number behind text */
.hiw-ghost-num {
    position: absolute;
    font-family: 'Playfair Display', serif;
    font-size: 11rem;
    font-weight: 700;
    color: rgba(211,143,63,0.045);
    line-height: 1;
    bottom: -1.5rem;
    right: -0.5rem;
    letter-spacing: -5px;
    pointer-events: none;
    user-select: none;
}
.hiw-reverse .hiw-text .hiw-ghost-num {
    right: auto;
    left: -0.5rem;
}

.hiw-step-lbl {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 3.5px;
    color: var(--primary);
    font-weight: 700;
    display: block;
    margin-bottom: 0.9rem;
    text-transform: uppercase;
}
.hiw-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 1.2rem;
    color: var(--black);
}
.hiw-text h3 em {
    font-style: italic;
    color: var(--primary);
}
.hiw-text p {
    font-size: 0.88rem;
    color: var(--gray);
    line-height: 1.9;
    max-width: 360px;
    margin-bottom: 1.8rem;
}
.hiw-detail {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: normal;
    color: var(--black);
    border-top: 1px solid rgba(211, 143, 63, 0.12);
    padding-top: 1.2rem;
}
.hiw-dot {
    width: 7px;
    height: 7px;
    background: var(--black);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.55rem;
}

/* ---- Scroll animations ---- */
.hiw-animate-left .hiw-img {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.hiw-animate-left .hiw-text {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}
.hiw-animate-right .hiw-img {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.hiw-animate-right .hiw-text {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}
.hiw-animate-left.in-view .hiw-img,
.hiw-animate-left.in-view .hiw-text,
.hiw-animate-right.in-view .hiw-img,
.hiw-animate-right.in-view .hiw-text {
    opacity: 1;
    transform: translateX(0);
}

.hiw-cta { text-align: center; margin-top: 3.5rem; }

/* ========================================
   PRODUCT SHOWCASE — Tabbed
   ======================================== */
.product-showcase {
    padding: 5rem 0;
    background: var(--cream);
}

/* Tab buttons */
.showcase-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid rgba(0,0,0,0.08);
}
.tab-btn {
    background: none;
    border: none;
    padding: 0.9rem 2.8rem;
    font-size: 0.72rem;
    letter-spacing: 3px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--gray-light);
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
}
.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.tab-btn.active { color: var(--primary); }
.tab-btn.active::after { transform: scaleX(1); }
.tab-btn:hover { color: var(--primary); }

/* Product grid */
.showcase-grid {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.showcase-grid.active { display: grid; }

/* Product card — Roskosh-jewel style */
.showcase-item {
    position: relative;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}
.showcase-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.showcase-item:hover .showcase-wrap {
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
    z-index: 10;
}
.showcase-img {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background: var(--white);
    min-height: 0;
}
.showcase-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}
.showcase-item:hover .showcase-img img {
    transform: scale(1.05);
}
.showcase-badge {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    background: var(--primary);
    color: var(--white);
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    padding: 0.25rem 0.65rem;
    z-index: 2;
}
.showcase-body {
    padding: 0.9rem 0.5rem;
    text-align: center;
    background: var(--white);
    flex-shrink: 0;
}
.showcase-body h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    color: #999;
    letter-spacing: 0.5px;
    margin: 0.3rem 0 0;
    line-height: 1.3;
    text-transform: uppercase;
}
.showcase-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--black);
    font-weight: 500;
    display: inline-block;
    margin: 0;
}
.showcase-desc, .showcase-enquire {
    display: none;
}

/* Footer */
.showcase-footer { text-align: center; }
.showcase-footer p {
    font-size: 0.95rem;
    color: var(--gray);
    margin-bottom: 1.2rem;
}
.showcase-footer p em {
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    color: var(--primary);
    font-size: 1.05rem;
}
.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    border: 1.5px solid var(--black);
    padding: 0.9rem 2.5rem;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-view-all:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* ========================================
   WHY US — Image Background Carousel
   ======================================== */
.why-us {
    padding: 5.5rem 0;
    background: var(--cream-dark);
    position: relative;
}
.why-us .section-head .label { color: var(--primary); }
.why-us .section-head h2 { color: var(--black); }
.why-us .section-sub { color: var(--black); }
.why-us .deco span { background: rgba(212,168,83,0.4); }
.why-us .deco i { filter: brightness(1.5); }

/* ---- Carousel wrapper ---- */
.why-carousel-wrap {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 3rem;
}
.why-carousel {
    flex: 1;
    overflow: hidden;
}
.why-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* ---- Cards ---- */
.why-card {
    flex: 0 0 auto;
    position: relative;
    padding: 2.6rem 2rem 2.4rem;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.08);
    border-top: 3px solid transparent;
    overflow: hidden;
    transition: border-top-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}
.why-card:hover {
    border-top-color: var(--primary);
    background: #ffffff;
    transform: translateY(-4px);
}

/* Ghost number */
.why-card-num {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    font-weight: 700;
    color: rgba(0,0,0,0.06);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    transition: color 0.35s ease;
}
.why-card:hover .why-card-num { color: rgba(211,143,63,0.15); }

/* Icon */
.why-icon {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(211,143,63,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: 1.5rem;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.why-card:hover .why-icon {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--black);
}
.why-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Text */
.why-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--black);
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}
.why-card:hover h4 { color: var(--black); }
.why-card p {
    font-size: 0.82rem;
    color: var(--black);
    line-height: 1.85;
}

/* ---- Nav arrows ---- */
.why-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.why-nav svg { width: 18px; height: 36px; transition: transform 0.3s; fill: var(--primary); }
.why-nav:hover { color: var(--primary); }
.why-nav:hover svg { transform: scale(1.2); fill: var(--primary); }
.why-prev svg { transform: scaleX(-1); }
.why-prev:hover svg { transform: scaleX(-1) scale(1.2); }

/* ---- Dots ---- */
.why-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}
.why-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(50 50 50 / 20%);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
    padding: 0;
}
.why-dot.active {
    background: var(--primary);
    width: 26px;
    border-radius: 4px;
}
.values-section .why-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
}
.values-section .why-card h4,
.values-section .why-card p { color: var(--black); }
.values-section .why-card-num { color: rgba(0,0,0,0.06); }
.values-section .why-card:hover {
    background: #ffffff;
    border-top-color: var(--primary);
}
.co-story-nav.co-story-prev,
.co-story-nav.co-story-next { display: none !important; }

/* ========================================
   ABOUT + NUMBERS
   ======================================== */
.about-section {
    background: linear-gradient(135deg, #282828 0%, #545454 100%);
    padding: 6rem 0;
}
.about-grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 4rem;
    align-items: center;
}

/* Left column — text + stats */
.about-left {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.about-text h2 { font-size: 2.5rem; margin: 0.5rem 0 1.5rem; line-height: 1.2; color: var(--white); }
.about-text p { color: rgba(255,255,255,0.65); margin-bottom: 1.2rem; line-height: 1.8; font-size: 0.95rem; }
.about-section.about-page { background: #F9F7F5; }
.about-section.about-page .about-text h2,
.about-section.about-page .about-text p,
.about-section.about-page .about-text { color: var(--black); }
.about-section.about-page .about-text h2 em { color: var(--primary); }
.link-arrow {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    font-size: 0.9rem;
}
.link-arrow:hover { color: var(--white); }

/* Stats strip — 4 columns inline */
.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgb(46 46 46 / 10%);
}
.about-stats .counter {
    text-align: center;
    padding: 1.5rem 0.8rem;
    background: transparent;
    border-radius: 0;
    border-right: 1px solid rgb(52 52 52 / 10%);
    transition: background 0.3s ease;
}
.about-stats .counter:last-child { border-right: none; }
.about-stats .counter:hover { background: rgba(255,255,255,0.04); }

.counter-val {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.05rem;
    line-height: 1;
    margin-bottom: 0.45rem;
}
.counter-val span {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    color: var(--primary);
    line-height: 1;
}
.counter-val sup {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--primary);
    font-weight: 700;
    line-height: 1;
}
.about-stats .counter p {
    font-size: 0.68rem;
    color: rgb(58 58 58 / 50%);
    letter-spacing: 0.4px;
    line-height: 1.4;
    margin-top: 0;
}

/* Right column — image panel */
.about-visual {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.about-visual img {
    width: 100%;
    display: block;
    aspect-ratio: 15 / 16;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.about-visual:hover img { transform: scale(1.04); }

.about-visual-badge {
    position: absolute;
    bottom: 2.2rem;
    left: -0.8rem;
    background: var(--primary);
    color: var(--white);
    padding: 1.1rem 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    box-shadow: 0 12px 32px rgba(211,143,63,0.4);
}
.about-visual-badge span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.85;
}
.about-visual-badge strong {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--white);
}

/* ========================================
   GROW STRIP
   ======================================== */
.grow-strip {
    background:var(--white);
    padding: 3rem 0;
}
.strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.strip-text h3 {
    font-size: 1.5rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.strip-text p { color: var(--text); font-size: 0.9rem; }
.btn-strip {
    flex-shrink: 0;
    padding: 1rem 2.5rem;
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 1px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1.5px solid var(--primary);
    display: inline-block;
}
.btn-strip:hover {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
/* On dark backgrounds (inside .grow-strip with dark bg) */
.grow-strip[style*="dark"] .btn-strip,
.grow-strip.dark .btn-strip {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
}
.grow-strip[style*="dark"] .btn-strip:hover,
.grow-strip.dark .btn-strip:hover {
    background: transparent;
    color: var(--white);
}

/* ========================================
   PROMISE
   ======================================== */
.promise {
    padding: 5rem 0;
    background: var(--cream-dark);
    border-top: 1px solid rgba(148, 74, 62, 0.1);
}
.promise h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 3.5rem;
    color: var(--primary);
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
}
.promise-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
}
.promise-item { text-align: center; flex: 1; max-width: 180px; }
.promise-item svg {
    width: 50px;
    height: 50px;
    color: var(--primary);
    margin-bottom: 1.2rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
}
.promise-item h5 { font-size: 1rem; font-weight: 400; line-height: 1.6; font-family: 'Montserrat', sans-serif; }

/* ========================================
   COLLECTION CAROUSEL
   ======================================== */
.collection-section {
    background: var(--cream);
    padding: 5rem 0;
}
.col-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.col-header .label { color: var(--primary); }
.col-header h2 { color: var(--black); font-size: 2.2rem; font-weight: 400; }
.col-header h2 em { color: var(--primary); }

/* ---- Carousel wrapper ---- */
.col-carousel {
    position: relative;
    height: 520px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.col-track {
    position: absolute;
    inset: 0;
}

/* ---- Slides ---- */
.col-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}
.col-slide.active {
    opacity: 1;
    pointer-events: all;
}

/* ---- Background image — contained to left side ---- */
.col-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    overflow: hidden;
}
.col-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.06);
    transition: transform 8s ease;
}
.col-slide.active .col-bg img { transform: scale(1); }
.col-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.1) 0%,
        rgba(0,0,0,0.05) 60%,
        rgba(0,0,0,0.25) 100%
    );
}

/* ---- Content panel ---- */
@keyframes colPanelIn {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}
.col-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 3rem 2.5rem 3.5rem;
    background: var(--cream);
    overflow: hidden;
}
.col-slide.active .col-panel {
    animation: colPanelIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
/* Vertical primary accent — removed */

/* Product preview thumbs inside panel */
.col-prod-row {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
.col-prod-thumb {
    width: 140px;
    height: 140px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.col-prod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.col-prod-thumb:hover {
    border-color: var(--primary);
}
.col-prod-thumb:hover img {
    transform: scale(1.1);
}

/* Ghost number */
.col-ghost {
    position: absolute;
    font-family: 'Playfair Display', serif;
    font-size: 14rem;
    font-weight: 700;
    color: rgba(211,143,63,0.05);
    line-height: 1;
    right: -0.5rem;
    bottom: -1.5rem;
    letter-spacing: -7px;
    pointer-events: none;
    user-select: none;
}

/* Meta row */
.col-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.col-count {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 2px;
    color: var(--gray);
    font-weight: 500;
}
.col-count i { color: var(--primary); font-style: normal; }
.col-cat {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.5rem;
    letter-spacing: 3px;
    font-weight: 700;
    color: var(--white);
    background: var(--primary);
    padding: 0.25rem 0.75rem;
}

/* Heading & text */
.col-panel h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 1.1rem;
    color: var(--black);
}
.col-panel h3 em { font-style: italic; color: var(--primary); }
.col-panel p {
    font-size: 0.85rem;
    color: var(--gray);
    line-height: 1.9;
    max-width: 320px;
    margin-bottom: 1.8rem;
}

/* CTA button */
.col-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 2.5px;
    font-weight: 700;
    color: var(--white);
    background: var(--primary);
    padding: 0.9rem 1.8rem;
    text-decoration: none;
    align-self: flex-start;
    width: fit-content;
    max-width: fit-content;
    transition: background 0.3s, gap 0.2s;
}
.col-panel .btn-view-all {
    align-self: flex-start;
    width: fit-content;
    padding: 0.65rem 1.5rem;
    font-size: 0.65rem;
    letter-spacing: 1.5px;
}
.col-cta:hover { background: var(--black); gap: 1rem; }
.col-cta span { display: inline-block; transition: transform 0.25s; }
.col-cta:hover span { transform: translateX(4px); }

/* ---- Arrow buttons ---- */
.col-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.col-nav:hover { color: var(--white); }
.col-nav:hover svg { transform: scale(1.2); }
.col-nav svg { width: 18px; height: 36px; transition: transform 0.3s; }
.col-prev svg { transform: scaleX(-1); }
.col-prev:hover svg { transform: scaleX(-1) scale(1.2); }
.col-prev { left: 2rem; }
.col-next { left: calc(50% - 4.5rem); }

/* ---- Thumbnail strip ---- */
.col-thumbs {
    display: flex;
    border: 1px solid rgba(211,143,63,0.12);
    border-top: none;
    background: var(--white);
}
.col-thumb {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.1rem 0.5rem;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(211,143,63,0.1);
    color: rgba(0,0,0,0.3);
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
    border-bottom: 2px solid transparent;
}
.col-thumb:last-child { border-right: none; }
.col-thumb span {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    transition: color 0.25s;
}
.col-thumb em {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 2px;
    font-style: normal;
    text-transform: uppercase;
}
.col-thumb:hover { background: rgba(211,143,63,0.05); color: rgba(0,0,0,0.65); }
.col-thumb.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(211,143,63,0.06); }
.col-thumb.active span { color: var(--primary); }

/* ---- Progress bar ---- */
@keyframes colProgress {
    from { width: 0; }
    to   { width: 100%; }
}
.col-progress-wrap {
    display: none;
}
.col-progress-bar {
    display: none;
}

/* ========================================
   TESTIMONIALS
   ======================================== */
.testimonials {
    padding: 5rem 0;
    background: var(--cream);
    overflow: hidden;
}
.test-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    position: relative;
}
.test-preview {
    width: 200px;
    text-align: center;
    opacity: 0.5;
    transition: all 0.6s ease;
    cursor: pointer;
}
.test-preview:hover { opacity: 0.85; transform: scale(1.03); }
.test-preview.left { text-align: right; }
.test-preview.right { text-align: left; }
.test-preview img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.8rem;
    border: 3px solid rgba(148, 74, 62, 0.2);
    transition: all 0.6s ease;
}
.test-preview.left img { margin-left: auto; }
.test-preview p { font-size: 0.78rem; color: var(--gray); line-height: 1.5; margin-bottom: 0.4rem; }
.test-preview span { font-size: 0.72rem; color: var(--primary); font-weight: 500; }
.test-btn {
    width: 50px;
    height: 50px;
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.test-btn svg { display: block; }
.test-btn:hover { background: var(--primary); color: var(--white); border-color: var(--primary); transform: scale(1.1); }
.test-main {
    background: var(--white);
    padding: 3rem 4rem;
    min-width: 500px;
    max-width: 560px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}
.test-card {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.test-card.active {
    position: relative;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.test-card.prev { transform: translateX(-100%); opacity: 0; }
.test-card.next { transform: translateX(100%); opacity: 0; }
/* Default: only avatar — centered large circle */
.test-card-top {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
}
.test-card .test-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cream-dark);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.test-card .test-product-img {
    display: none;
}
/* When product image exists — overlapping layout */
.test-card-top.has-product {
    width: 140px;
    height: 140px;
}
.test-card-top.has-product .test-product-img {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: 16px;
    object-fit: cover;
    border: 3px solid var(--cream-dark);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: absolute;
    top: 0;
    left: 0;
}
.test-card-top.has-product .test-avatar {
    width: 65px;
    height: 65px;
    border: 3px solid var(--white);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
}
.test-stars { letter-spacing: 2px; }
.test-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border: 4px solid var(--cream);
    box-shadow: 0 8px 30px rgba(148, 74, 62, 0.15);
}
.test-card p {
    font-size: 1rem;
    color: var(--gray);
    line-height: 1.9;
    margin-bottom: 1.5rem;
    font-style: italic;
}
.test-card span { color: var(--primary); font-weight: 600; font-size: 0.9rem; }

/* ========================================
   CTA SECTION
   ======================================== */
.cta-section {
    position: relative;
    background: #F5F5F5;
    padding: 0;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1600&q=80') center/cover no-repeat;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
.cta-inner {
    background: transparent;
    padding: 6rem 2rem;
    position: relative;
    z-index: 1;
}
.cta-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.cta-content .label { color: #2c3e50; margin-bottom: 1rem; }
.cta-content h2 { font-size: 2.8rem; color: #2c3e50; margin-bottom: 1.2rem; line-height: 1.2; }
.cta-content h2 em { color: #2c3e50; font-style: italic; }
.cta-content p { color: #2c3e50; margin-bottom: 2.5rem; font-size: 1rem; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-section .btn-view-all {
    color: #2c3e50;
    border-color: #2c3e50;
}
.cta-section .btn-view-all:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}
.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 2px;
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
    border: 1.5px solid #2c3e50;
    padding: 0.9rem 2.5rem;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-cta-primary::after {
    content: '→';
}
.btn-cta-primary:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}
.btn-cta-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2.5rem;
    background: transparent;
    color: #2c3e50;
    text-decoration: none;
    font-size: 0.78rem;
    letter-spacing: 2px;
    font-weight: 600;
    border: 1.5px solid #2c3e50;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-cta-wa svg { width: 18px; height: 18px; fill: #25D366; transition: fill 0.3s ease; }
.btn-cta-wa:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}
.btn-cta-wa:hover svg { fill: #ffffff; }

/* ========================================
   FOOTER
   ======================================== */
.footer {
    background: var(--cream);
    position: relative;
}
.footer-main {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 3rem;
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.footer-col h4 { font-size: 1rem; margin-bottom: 1.5rem; }
.footer-col a {
    display: block;
    color: var(--gray);
    text-decoration: none;
    font-size: 0.88rem;
    margin-bottom: 0.8rem;
    transition: var(--transition);
}
.footer-col a:hover { color: var(--primary); }
.footer-col.right { text-align: right; }
.footer-center { text-align: center; }
.footer-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 0.8rem;
}
.footer-logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
}
.footer-tagline {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 1.2rem;
}
.social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.social a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--black);
    border-radius: 50%;
    transition: var(--transition);
}
.social a svg { width: 16px; height: 16px; stroke: var(--black); fill: none; stroke-width: 2; }
.social a:hover { background: var(--primary); border-color: var(--primary); }
.social a:hover svg { stroke: var(--white); }
.divider { width: 1px; height: 35px; background: rgba(0,0,0,0.15); margin: 1.2rem auto; }
.footer-center h5 { font-size: 0.9rem; margin-bottom: 0.8rem; }
.footer-center p { font-size: 0.88rem; color: var(--gray); margin-bottom: 0.4rem; }
.address { margin-top: 0.8rem; line-height: 1.6; }
.footer-bottom {
    text-align: center;
    padding: 1.5rem;
    border-top: 1px solid #e0e0e0;
}
.footer-bottom p { font-size: 0.82rem; color: var(--gray); }
.footer-disclaimer { text-align: center; padding: 1rem 2rem; background: var(--sidebar); }
.footer-disclaimer p, .footer-disclaimer span, .footer-disclaimer div { font-size: 0.68rem !important; color: rgba(255,255,255,0.45) !important; line-height: 1.7 !important; max-width: 800px; margin: 0 auto; }
.footer-disclaimer a { color: rgba(255,255,255,0.6) !important; text-decoration: underline; }
.scroll-top {
    position: fixed;
    bottom: 6.5rem;
    right: 1.5rem;
    width: 55px;
    height: 55px;
    background: rgba(255,255,255,0.9);
    color: var(--primary);
    border: 1px solid rgba(211,143,63,0.2);
    border-radius: 50%;
    font-size: 0;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.scroll-top svg {
    color: var(--primary);
    transition: color 0.3s;
}
.scroll-top:hover {
    background: var(--primary);
    border-color: var(--primary);
}
.scroll-top:hover svg {
    color: #fff;
}
.scroll-top.visible { opacity: 1; visibility: visible; }

/* ========================================
   MOBILE DRAWER
   ======================================== */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 290px;
    height: 100vh;
    background: var(--white);
    z-index: 9999;
    transition: right 0.3s ease;
    box-shadow: -5px 0 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}
.mobile-nav.active { right: 0; }
.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}
.mobile-nav-header span {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--primary);
    letter-spacing: 3px;
}
.close-menu {
    width: 35px;
    height: 35px;
    background: none;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
}
.mobile-nav-links {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.mobile-nav-links::-webkit-scrollbar { width: 4px; }
.mobile-nav-links::-webkit-scrollbar-track { background: transparent; }
.mobile-nav-links::-webkit-scrollbar-thumb { background: rgba(148,74,62,0.2); border-radius: 2px; }
.mobile-nav-links a {
    padding: 14px 15px;
    text-decoration: none;
    color: var(--black);
    font-size: 0.85rem;
    letter-spacing: 1px;
    border-radius: 8px;
    transition: all 0.2s;
}
.mobile-nav-links a:hover { background: var(--cream); color: var(--primary); }
.mobile-nav-links a.nav-active { color: var(--primary); font-weight: 600; }
.mobile-nav-links a.highlight {
    background: var(--primary);
    color: var(--white);
    text-align: center;
    margin-top: 10px;
    border-radius: 8px;
}
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.mobile-overlay.active { opacity: 1; visibility: visible; }

/* ========================================
   RESPONSIVE — TABLET (1024px)
   ======================================== */
@media (max-width: 1024px) {
    /* Pillars — 2 columns on tablet */
    .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .pillar-img { height: 260px; }
    /* Services — reduce padding on tablet */
    .services-wrap { min-height: 260px; }
    .services-content { padding: 1.5rem 1.5rem; }
    .svc-head h2 { font-size: 1.7rem; }
    /* How It Works — compact on tablet */
    .hiw-img { height: 360px; }
    .hiw-text { padding: 2.5rem 3rem; }
    .hiw-text h3 { font-size: 1.8rem; }
    /* Showcase — 3 col on tablet */
    .showcase-grid.active { grid-template-columns: repeat(3, 1fr); }
    .tab-btn { padding: 0.8rem 1.8rem; }
    .why-carousel-wrap { gap: 0.8rem; }
    .custom-grid { grid-template-columns: 1fr; gap: 3rem; }
    .custom-img-small { right: 0; bottom: -1rem; }
    .about-grid { grid-template-columns: 1fr; gap: 3rem; }
    .about-stats { grid-template-columns: repeat(4, 1fr); }
    .about-visual { max-height: 480px; }
    .about-visual img { aspect-ratio: 4 / 3; }
    .about-visual-badge { left: 0; }
    /* Collection Carousel — tablet */
    .col-carousel { height: 460px; }
    .col-panel { width: 50%; padding: 2rem 2rem 2rem 2.5rem; }
    .col-next { left: calc(50% - 4.5rem); }
    .col-panel h3 { font-size: 2rem; }
    .col-ghost { font-size: 10rem; }
    .test-preview { display: none; }
    .footer-main { grid-template-columns: 1fr; text-align: center; }
    .footer-col, .footer-col.right { text-align: center; }
}

/* ========================================
   RESPONSIVE — MOBILE (768px)
   ======================================== */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }
    .container { padding: 0 15px; }

    /* Header */
    .nav-left, .nav-right { display: none; }
    .mobile-menu { display: flex; }
    .header-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
    }
    .logo-img { height: 34px; }

    /* Hero */
    .hero { margin-top: 55px; height: 75vh; min-height: 380px; }
    .slide-content { left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 90%; }
    .slide-tag { font-size: 0.6rem; letter-spacing: 2px; }
    .slide-content h1 { font-size: 2rem; margin-bottom: 0.8rem; }
    .slide-content p { font-size: 0.85rem; margin-bottom: 1.2rem; }
    .slide-btns { gap: 0.6rem; }
    .btn-hero, .btn-hero-outline { padding: 0.7rem 1.4rem; font-size: 0.7rem; }
    .hero-nav { display: none; }
    .hero-dots { bottom: 1.5rem; right: 1.5rem; gap: 5px; }
    .dot { width: 6px; height: 6px; }
    .dot.active { height: 18px; }
    .scroll-hint { display: none; }

    /* Clients marquee */
    .clients { padding: 10px 0; }

    /* Section heads */
    .section-head { margin-bottom: 1.5rem; }
    .section-head h2 { font-size: 1.5rem; }

    /* Pillars — single column on mobile */
    .products-hero { padding: 2rem 0 3rem; }
    .pillars-grid { grid-template-columns: 1fr; gap: 1.2rem; }
    .pillar-img { height: 240px; }
    .pillar-body { padding: 1.4rem 1.5rem 1.8rem; }
    .pillar-body h3 { font-size: 1.4rem; }
    .pillar-body p { font-size: 0.84rem; }

    /* Services — stack on mobile */
    .services { padding: 3rem 0; }
    .services-wrap { grid-template-columns: 1fr; min-height: auto; }
    .services-visual { min-height: 45vw; }
    .svo-big { font-size: 4rem; }
    .svo-tag { font-size: 1.5rem; }
    .services-visual-overlay { bottom: 1.5rem; left: 1.5rem; }
    .services-content { padding: 2.5rem 1.5rem; }
    .svc-head h2 { font-size: 1.7rem; }

    /* How It Works — stack on mobile */
    .how-it-works { padding: 3rem 0 2rem; }
    .hiw-row, .hiw-reverse {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hiw-row .hiw-img,
    .hiw-reverse .hiw-img { order: 1 !important; height: 260px; }
    .hiw-row .hiw-text,
    .hiw-reverse .hiw-text { order: 2 !important; padding: 2rem 1.5rem; }
    .hiw-reverse .hiw-badge { left: 1.5rem; right: auto; }
    .hiw-ghost-num { font-size: 7rem; }
    .hiw-text h3 { font-size: 1.6rem; }
    .hiw-text p { max-width: 100%; }
    /* disable slide-in on small screens — just fade */
    .hiw-animate-left .hiw-img, .hiw-animate-left .hiw-text,
    .hiw-animate-right .hiw-img, .hiw-animate-right .hiw-text {
        transform: translateY(20px);
    }
    .hiw-animate-left.in-view .hiw-img, .hiw-animate-left.in-view .hiw-text,
    .hiw-animate-right.in-view .hiw-img, .hiw-animate-right.in-view .hiw-text {
        transform: translateY(0);
    }

    /* Showcase — 2 col on mobile */
    .product-showcase { padding: 3rem 0; }
    .showcase-grid.active { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .tab-btn { padding: 0.7rem 1.2rem; font-size: 0.65rem; letter-spacing: 2px; }
    .showcase-body h5 { font-size: 0.88rem; }
    .showcase-footer p { font-size: 0.88rem; }

    /* Custom */
    .custom-section { padding: 3rem 0; }
    .custom-grid { gap: 2rem; }
    .custom-img-wrap { height: 300px; }
    .custom-badge { left: 0.5rem; width: 75px; height: 75px; }
    .custom-img-small { width: 120px; height: 120px; right: 0; bottom: -0.5rem; }
    .custom-text h2 { font-size: 1.8rem; }

    /* Why us */
    .why-us { padding: 3rem 0; }
    .why-card { padding: 2rem 1.4rem; }
    .why-card-num { font-size: 4rem; }
    .why-icon { width: 44px; height: 44px; margin-bottom: 1.2rem; }
    .why-icon svg { width: 20px; height: 20px; }
    .why-nav { width: 40px; height: 40px; }
    .why-nav svg { width: 16px; height: 16px; }

    /* About */
    .about-section { padding: 3rem 0; }
    .about-grid { gap: 2rem; }
    .about-left { gap: 2rem; }
    .about-text h2 { font-size: 1.8rem; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .about-stats .counter { padding: 1.2rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .about-stats .counter:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1); }
    .about-stats .counter:nth-child(even) { border-right: none; }
    .counter-val span { font-size: 1.9rem; }
    .counter-val sup { font-size: 1rem; }
    .about-visual img { aspect-ratio: 16 / 9; }
    .about-visual-badge { bottom: 1.5rem; left: 0; padding: 0.9rem 1.2rem; }
    .about-visual-badge strong { font-size: 1.6rem; }

    /* Grow strip */
    .strip-inner { flex-direction: column; text-align: center; gap: 1.5rem; }
    .strip-text h3 { font-size: 1.2rem; }

    /* Promise */
    .promise { padding: 3rem 0; }
    .promise h2 { font-size: 1.5rem; margin-bottom: 2rem; }
    .promise-grid { flex-wrap: wrap; gap: 2rem; justify-content: center; }
    .promise-item { max-width: 130px; }

    /* Collection Carousel — mobile stack */
    .collection-section { padding: 3rem 0 3rem; }
    .col-header { margin-bottom: 1.5rem; }
    .col-header h2 { font-size: 1.6rem; }
    .col-carousel { height: auto; overflow: visible; }
    .col-track { position: relative; inset: auto; }
    .col-slide { position: absolute; opacity: 0; display: none; pointer-events: none; }
    .col-slide.active { position: relative; opacity: 1; display: block; pointer-events: all; }
    .col-slide.active .col-panel { animation: none; }
    .col-bg { width: 100%; height: 280px; position: relative; overflow: hidden; }
    .col-bg img { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1); }
    .col-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4)); }
    .col-panel { position: relative; width: 100%; right: auto; top: auto; bottom: auto; padding: 2rem 1.5rem; }
    .col-panel::before { top: 0; height: 3px; width: 60px; bottom: auto; left: 1.5rem; }
    .col-ghost { font-size: 7rem; }
    .col-panel h3 { font-size: 1.7rem; }
    .col-panel p { max-width: 100%; }
    .col-nav { display: none; }
    .col-thumbs { flex-wrap: wrap; }
    .col-thumb { min-width: 33.33%; border-bottom: 1px solid rgba(211,143,63,0.1); }
    .col-thumb em { display: none; }

    /* Testimonials */
    .testimonials { padding: 3rem 0; }
    .test-main { min-width: 0; flex: 1; padding: 2rem 1.5rem; }
    .test-card p { font-size: 0.88rem; }
    .test-btn { width: 40px; height: 40px; font-size: 1rem; }

    /* CTA */
    .cta-inner { padding: 4rem 1.5rem; }
    .cta-content h2 { font-size: 1.8rem; }
    .cta-btns { flex-direction: column; align-items: center; }
    .btn-cta-primary, .btn-cta-wa { width: 100%; max-width: 280px; justify-content: center; }

    /* Footer */
    .footer-main { grid-template-columns: 1fr; padding: 3rem 1.5rem; gap: 2rem; }
    .footer-col { display: none; }
    .footer-bottom { padding: 1rem; }

    /* Floating */
    .whatsapp-btn { width: 48px; height: 48px; bottom: 1.2rem; right: 1.2rem; }
    .whatsapp-btn svg { width: 24px; height: 24px; }
    .scroll-top { width: 48px; height: 48px; bottom: 5.5rem; right: 1.2rem; }
}

/* ========================================
   EXTRA SMALL (480px)
   ======================================== */
@media (max-width: 480px) {
    .hero { height: 70vh; min-height: 320px; }
    .slide-content h1 { font-size: 1.7rem; }
    .pillar-img { height: 210px; }
    .showcase-grid.active { grid-template-columns: repeat(2, 1fr); }
    .pillar-body h3 { font-size: 1.25rem; }
    /* Collection Carousel — 480px */
    .col-panel h3 { font-size: 1.45rem; }
    .col-ghost { font-size: 5.5rem; }
    .col-thumb { min-width: 50%; }
    .why-card { padding: 1.6rem 1rem; }
    .why-card-num { font-size: 3.5rem; }
    .why-nav { display: none; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .cta-content h2 { font-size: 1.5rem; }
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */
.animate-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   INNER PAGE HERO (Simple title section)
   ======================================== */
.page-hero {
    padding: 5rem 0 3.5rem;
    background: linear-gradient(135deg, #1a1a1a 0%, #1a2a3a 100%);
    text-align: center;
    margin-top: 70px;
}
.page-hero .label { display: block; margin-bottom: 0.8rem; color: var(--gold); }
.page-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.2rem,5vw,3.5rem); color: var(--white); line-height: 1.15; margin-bottom: 1rem; }
.page-hero h1 em { font-style: italic; color: var(--primary); }
.page-hero p { color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto 1.5rem; font-size: 0.95rem; line-height: 1.7; }
.breadcrumb { display: flex; gap: 0.5rem; justify-content: center; align-items: center; font-family: 'Montserrat', sans-serif; font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.breadcrumb a { color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .bc-sep { color: rgba(255,255,255,0.2); }
.breadcrumb .bc-current { color: var(--primary); }
@media (max-width: 768px) {
    .page-hero { margin-top: 0 !important; padding: 2rem 0 2rem !important; }
    /* Override inline "padding: 6rem 0 4rem" on inner page hero sections */
    section[class*="page-hero"][style*="padding"] { padding: 2rem 0 2rem !important; }
    /* Homepage hero — remove fixed-header offset since header is sticky on mobile */
    .hero { margin-top: 0 !important; }
}

/* ========================================
   SERVICES PAGE
   ======================================== */

/* Stats bar */
.svc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 3rem 0; }
.svc-stat { text-align: center; }
.svc-stat .stat-val { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--primary); font-weight: 600; line-height: 1; margin-bottom: 0.4rem; }
.svc-stat .stat-label { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); font-weight: 600; }

/* Service detail row — alternating image + text */
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding: 5rem 0; }
.svc-row.reverse { direction: rtl; }
.svc-row.reverse > * { direction: ltr; }
.svc-row-img { position: relative; border-radius: 4px; overflow: hidden; }
.svc-row-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.6s ease; }
.svc-row-img:hover img { transform: scale(1.04); }
.svc-row-num { position: absolute; top: 1.2rem; left: 1.2rem; width: 52px; height: 52px; border: 2px solid var(--white); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 600; color: var(--white); z-index: 2; background: rgba(0,0,0,0.3); backdrop-filter: blur(6px); }
.svc-row-text .svc-icon {
    width: 50px;
    height: 50px;
    border: 1.5px solid rgba(211,143,63,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: 1.2rem;
}
.svc-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.svc-row-text .svc-label { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; display: block; }
.svc-row-text h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.8rem; line-height: 1.2; }
.svc-row-text > p { color: var(--gray); font-size: 0.9rem; line-height: 1.8; margin-bottom: 1.5rem; }
.svc-row-text ul { list-style: none; margin-bottom: 1.8rem; }
.svc-row-text ul li { font-size: 0.82rem; color: var(--gray); padding: 0.35rem 0; padding-left: 1.8rem; position: relative; line-height: 1.6; }
.svc-row-text ul li::before { content: ''; position: absolute; left: 0; top: 0.75rem; width: 14px; height: 8px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.svc-row-text .svc-btn { display: inline-block; padding: 0.8rem 1.8rem; background: none; border: 1.5px solid var(--black); font-family: 'Montserrat', sans-serif; font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--black); text-decoration: none; transition: var(--transition); }
.svc-row-text .svc-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--white); }

/* Alternating bg */
.svc-section:nth-child(even) { background: var(--cream-dark); }
.svc-section:nth-child(odd) { background: var(--cream); }

/* 6-service mini card grid */
.svc-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 3rem 0; }
.svc-mini-card { background: var(--white); border: 1px solid rgba(0,0,0,0.06); padding: 1.8rem 1.4rem; text-align: center; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.svc-mini-card:hover { transform: translateY(-4px); box-shadow: 0 12px 35px rgba(211,143,63,0.1); border-color: var(--primary); }
.svc-mini-card .svc-mini-icon { width: 48px; height: 48px; border: 1.5px solid rgba(211,143,63,0.3); display: flex; align-items: center; justify-content: center; color: var(--primary); margin: 0 auto 1rem; transition: background 0.3s, border-color 0.3s, color 0.3s; }
.svc-mini-card:hover .svc-mini-icon { background: var(--primary); border-color: var(--primary); color: var(--white); }
.svc-mini-card .svc-mini-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc-mini-card h4 { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 500; margin-bottom: 0.4rem; }
.svc-mini-card p { font-size: 0.78rem; color: var(--gray); line-height: 1.6; }

/* Process strip */
.process-strip { background: linear-gradient(135deg, #1a1a1a 0%, #1a2a3a 50%, #1a1a1a 100%); padding: 5rem 0; position: relative; overflow: hidden; }
.process-strip::before { content: ''; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?w=1600') center/cover; opacity: 0.06; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; z-index: 1; }
.process-steps::before { content: ''; position: absolute; top: 32px; left: 12.5%; right: 12.5%; height: 1px; background: linear-gradient(90deg, transparent, rgba(211,143,63,0.5), transparent); }
.process-step { text-align: center; position: relative; }
.process-step .step-num { width: 64px; height: 64px; border: 2px solid var(--primary); background: transparent; color: var(--primary); font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem; position: relative; z-index: 1; transition: background 0.3s, color 0.3s; }
.process-step:hover .step-num { background: var(--primary); color: var(--white); }
.process-step h4 { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--white); margin-bottom: 0.5rem; }
.process-step p { font-size: 0.78rem; color: rgba(255,255,255,0.5); line-height: 1.7; max-width: 200px; margin: 0 auto; }
.process-step .step-icon { color: var(--primary); margin-bottom: 0.8rem; }
.process-step .step-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

@media (max-width: 992px) {
    .svc-row { gap: 2.5rem; }
    .svc-mini-grid { grid-template-columns: repeat(2, 1fr); }
    .svc-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 768px) {
    .svc-row { grid-template-columns: 1fr; gap: 2rem; }
    .svc-row.reverse { direction: ltr; }
    .svc-mini-grid { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .process-steps::before { display: none; }
    .svc-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================
   B2B PAGE
   ======================================== */
/* B2B Why Grid (responsive for why-card on B2B) */
.b2b-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* Manufacturing Detail Sections */
.mfg-detail-section { padding: 4rem 0; }
.mfg-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}
.mfg-detail.reverse { direction: rtl; }
.mfg-detail.reverse > * { direction: ltr; }
.mfg-detail-gallery { position: sticky; top: 90px; }
.mfg-gallery-main {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 0.8rem;
}
.mfg-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.mfg-gallery-main:hover img { transform: scale(1.04); }
.mfg-detail-num {
    position: absolute;
    bottom: 1rem;
    right: 1.2rem;
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.2);
    line-height: 1;
    pointer-events: none;
}
.mfg-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}
.mfg-thumb {
    aspect-ratio: 1/1;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}
.mfg-thumb:hover { border-color: var(--primary); }
.mfg-thumb img { width: 100%; height: 100%; object-fit: cover; }

.mfg-card-icon {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(211,143,63,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: 1rem;
}
.mfg-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}
.mfg-detail-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.5rem;
    margin-bottom: 1.5rem;
}
.mfg-feat {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--gray);
    line-height: 1.5;
}
.mfg-feat svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.mfg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}
.mfg-tags span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(211,143,63,0.3);
    color: var(--primary);
    transition: background 0.3s, color 0.3s;
}
.mfg-tags span:hover {
    background: var(--primary);
    color: var(--white);
}
.mfg-detail-actions {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    flex-wrap: wrap;
}
.mfg-detail-actions .btn-primary {
    padding: 1rem 2.5rem;
    font-size: 0.85rem;
    line-height: 1.2;
}
.mfg-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gray);
    text-decoration: none;
    border: 1.5px solid rgba(0,0,0,0.15);
    padding: 1rem 2.2rem;
    line-height: 1.2;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.mfg-pdf-btn svg { width: 16px; height: 16px; }
.mfg-pdf-btn:hover {
    color: var(--white);
    border-color: var(--primary);
    background: var(--primary);
}

/* Partner Steps */
.partner-steps { counter-reset: partner-step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 3rem 0; }
.partner-step { text-align: center; padding: 1.5rem 1rem; position: relative; counter-increment: partner-step; }
.partner-step::before { content: counter(partner-step); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: var(--white); font-family: 'Playfair Display', serif; font-size: 1.3rem; line-height: 1; padding-bottom: 2px; margin: 0 auto 0.8rem; position: relative; z-index: 2; border: 0.8px solid var(--primary); box-sizing: border-box; }
.partner-step::after { content: ''; position: absolute; top: calc(1.5rem + 24px); left: 50%; width: 100%; height: 0.5px; background: var(--primary); z-index: 1; }
.partner-step:last-child::after { display: none; }
.partner-step h5 { font-family: 'Montserrat', sans-serif; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.3rem; }
.partner-step p { font-size: 0.78rem; color: var(--gray); }
@media (max-width: 992px) {
    .b2b-why-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .mfg-detail { grid-template-columns: 1fr; gap: 2.5rem; }
    .mfg-detail.reverse { direction: ltr; }
    .mfg-detail-gallery { position: static; }
    .partner-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .mfg-detail-features { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .b2b-why-grid { grid-template-columns: 1fr 1fr !important; }
    .partner-steps { grid-template-columns: repeat(2, 1fr); }
    .mfg-detail-actions { flex-direction: column; align-items: flex-start; }
}

/* ========================================
   ABOUT PAGE
   ======================================== */
.timeline { position: relative; padding: 3rem 0; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(211,143,63,0.3); transform: translateX(-50%); }
.timeline-item { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 1.5rem; align-items: start; margin-bottom: 3rem; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-content-left { text-align: right; padding-top: 0.3rem; }
.timeline-content-right { padding-top: 0.3rem; }
.timeline-dot { width: 60px; height: 60px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 0.75rem; color: var(--white); flex-direction: column; line-height: 1.2; text-align: center; position: relative; z-index: 1; }
.timeline-dot .tl-year { font-size: 1rem; font-weight: 400; }
.timeline-content-left h4,
.timeline-content-right h4 { font-family: 'Playfair Display', serif; font-size: 1.15rem; margin-bottom: 0.4rem; }
.timeline-content-left p,
.timeline-content-right p { font-size: 0.85rem; color: var(--gray); }
/* About Values Grid (uses .why-card from homepage) */
.about-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* Capabilities Grid */
.cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 3rem 0;
}
.cap-card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-top: 3px solid transparent;
    padding: 2.4rem 2rem;
    overflow: hidden;
    transition: border-top-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.cap-card:hover {
    border-top-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.cap-card-num {
    position: absolute;
    top: 0.6rem;
    right: 1rem;
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    font-weight: 700;
    color: rgba(0,0,0,0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    transition: color 0.35s ease;
}
.cap-card:hover .cap-card-num { color: rgba(211,143,63,0.12); }
.cap-card-icon {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(211,143,63,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: 1.3rem;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.cap-card:hover .cap-card-icon {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.cap-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}
.cap-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0.6rem;
    transition: color 0.3s ease;
}
.cap-card:hover h4 { color: var(--primary); }
.cap-card p {
    font-size: 0.82rem;
    color: var(--gray);
    line-height: 1.85;
}
@media (max-width: 768px) {
    .timeline::before { left: 30px; }
    .timeline-item { grid-template-columns: 60px 1fr; grid-template-rows: auto; }
    .timeline-content-left { display: none; }
    .about-values-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .cap-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .about-values-grid { grid-template-columns: 1fr 1fr !important; }
    .cap-grid { grid-template-columns: 1fr; }
}

/* ========================================
   CUSTOM ORDER PAGE
   ======================================== */
/* Custom Order Category Cards */
.co-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}
.co-cat-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.co-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.1);
}
.co-cat-img {
    aspect-ratio: 16/10;
    overflow: hidden;
}
.co-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.co-cat-card:hover .co-cat-img img { transform: scale(1.05); }
.co-cat-body { padding: 2rem 1.8rem 2.2rem; }
.co-cat-icon {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(211,143,63,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: 1rem;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.co-cat-card:hover .co-cat-icon {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.co-cat-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.co-cat-body h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 400; margin-bottom: 0.5rem; }
.co-cat-body > p { font-size: 0.85rem; color: var(--gray); line-height: 1.7; margin-bottom: 1rem; }
.co-cat-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.co-cat-list li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.82rem;
    color: var(--gray);
    line-height: 2;
}
.co-cat-list {
    padding-left: 0.4rem;
}
.co-cat-list li {
    padding-left: 1.8rem !important;
}
.co-cat-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
}
.co-cat-btn {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid var(--primary);
    padding-bottom: 2px;
    transition: color 0.3s, border-color 0.3s;
}
.co-cat-btn:hover { color: var(--black); border-color: var(--black); }

/* Product Story — Slider */
.co-story-slider { position: relative; }
.co-story {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
    opacity: 0;
}
.co-story.active-slide {
    display: grid;
    animation: coSlideIn 0.45s ease forwards;
}
.co-story.reverse { direction: rtl; }
.co-story.reverse > * { direction: ltr; }
@keyframes coSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 4-Image Process Collage */
.co-story-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.co-collage-img {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.co-collage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.co-collage-img:hover img { transform: scale(1.06); }
.co-collage-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.2rem 0.7rem 0.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
}

/* Story Content */
.co-story-content {
    position: relative;
    padding-top: 0.5rem;
}
.co-story-num {
    position: absolute;
    top: -0.5rem;
    right: 0;
    font-family: 'Playfair Display', serif;
    font-size: 6rem;
    font-weight: 700;
    color: rgba(0,0,0,0.04);
    line-height: 1;
    pointer-events: none;
}
.co-story-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0.8rem;
    line-height: 1.2;
}
.co-story-text {
    font-size: 0.88rem;
    color: var(--gray);
    line-height: 1.85;
    margin-bottom: 1.5rem;
}
.co-story-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.2rem 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.co-stat { text-align: center; }
.co-stat strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 0.2rem;
}
.co-stat span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gray);
}
.co-story-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 1.2rem;
    color: var(--black);
}
.co-story-price em {
    font-style: normal;
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 700;
}
.co-story-cta {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary);
    padding: 0.9rem 2rem;
    text-decoration: none;
    transition: background 0.3s;
}
.co-story-cta:hover { background: #b87a2e; }

/* Slider Navigation Arrows */
.co-story-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    cursor: pointer;
    z-index: 3;
    color: var(--primary);
    transition: all 0.3s;
}
.co-story-nav svg { width: 26px; height: 26px; fill: var(--primary); transition: all 0.3s; }
.co-story-nav:hover svg { transform: scale(1.2); fill: var(--primary-dark); }
.co-story-nav:hover {
    background: transparent;
    border: none;
}
.co-story-prev { left: -24px; }
.co-story-next { right: -24px; }
.co-story-prev svg { transform: scaleX(-1); }
.co-story-prev:hover svg { transform: scaleX(-1) scale(1.15); }

/* Slider Dots */
.co-story-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
}
.co-story-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s;
}
.co-story-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}

/* Materials */
.materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2.5rem 0; }
.material-card { background: var(--white); border: 1px solid rgba(0,0,0,0.08); overflow: hidden; transition: var(--transition); }
.material-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.material-card img { width: 100%; height: 180px; object-fit: cover; }
.material-card-body { padding: 1.5rem; }
.material-card-body h4 { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin-bottom: 0.4rem; }
.material-card-body p { font-size: 0.82rem; color: var(--gray); }

/* FAQ */
.faq-list { margin: 2rem 0; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); }
.faq-question { width: 100%; background: none; border: none; text-align: left; padding: 1.2rem 0; font-family: 'Montserrat', sans-serif; font-size: 0.88rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--black); }
.faq-question::after { content: '+'; font-size: 1.4rem; color: var(--primary); transition: transform 0.3s; }
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; }
.faq-answer p { padding-bottom: 1.2rem; font-size: 0.85rem; color: var(--gray); }
.faq-item.open .faq-answer { max-height: 300px; }
@media (max-width: 992px) {
    .co-cat-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
    .co-story.active-slide { grid-template-columns: 1fr; gap: 2rem; }
    .co-story.reverse { direction: ltr; }
    .co-story-collage { max-width: 520px; }
    .co-story-num { font-size: 4rem; }
    .co-story-prev { left: 0; }
    .co-story-next { right: 0; }
}
@media (max-width: 768px) {
    .materials-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
    .materials-grid { grid-template-columns: 1fr; }
    .co-story-stats { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .co-stat strong { font-size: 1.1rem; }
    .co-stat span { font-size: 0.55rem; }
    .co-story-content h3 { font-size: 1.4rem; }
    .co-story-nav { width: 36px; height: 36px; font-size: 1.2rem; }
}

/* ========================================
   CONTACT PAGE
   ======================================== */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; padding: 4rem 0; }
.contact-form { background: var(--white); padding: 3rem; border-radius: 4px; box-shadow: var(--shadow); }
.contact-form h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin-bottom: 0.4rem; }
.contact-form > p { color: var(--gray); font-size: 0.85rem; margin-bottom: 2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 0.4rem; color: var(--black); }
.form-group input,
.form-group select,
.form-group textarea { width: 100%; border: 1px solid rgba(0,0,0,0.15); background: var(--cream); padding: 0.75rem 1rem; font-family: 'Montserrat', sans-serif; font-size: 0.88rem; border-radius: 3px; transition: border-color 0.3s; outline: none; color: var(--black); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--primary); }
.form-group textarea { resize: vertical; min-height: 120px; }
.contact-info { padding-top: 1rem; }
.contact-info h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; margin-bottom: 0.4rem; }
.contact-info > p { color: var(--gray); font-size: 0.85rem; margin-bottom: 2rem; }
.contact-detail { display: flex; gap: 1rem; margin-bottom: 1.8rem; align-items: flex-start; }
.contact-detail .cd-icon { width: 48px; height: 48px; background: rgba(211,143,63,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-detail h5 { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.2rem; }
.contact-detail p { font-size: 0.88rem; color: var(--gray); }
.contact-detail a { font-size: 0.88rem; color: var(--gray); text-decoration: none; }
.contact-detail a:hover { color: var(--primary); }
.social-row { display: flex; gap: 1rem; margin-top: 2rem; }
.social-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; font-size: 1rem; text-decoration: none; color: var(--black); transition: var(--transition); }
.social-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--white); }
.map-strip { background: #1a1a1a; padding: 1rem 0; text-align: center; }
.map-placeholder { background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.15); border-radius: 4px; padding: 4rem 2rem; color: rgba(255,255,255,0.4); font-size: 0.85rem; }
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .form-row { grid-template-columns: 1fr; }
}

/* ========================================
   PRODUCTS PAGE — CATEGORY CAROUSEL
   ======================================== */
.cat-wrapper { position: relative; display: flex; align-items: center; gap: 0.5rem; }
.cat-nav { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 0; color: var(--primary); transition: var(--transition); z-index: 2; }
.cat-nav svg { width: 16px; height: 32px; fill: var(--primary); transition: all 0.3s; }
.cat-nav:hover svg { transform: scale(1.2); fill: var(--primary-dark); }
.cat-prev svg { transform: scaleX(-1); }
.cat-prev:hover svg { transform: scaleX(-1) scale(1.2); }
.cat-scroll { display: flex; gap: 0; overflow: hidden; scroll-behavior: smooth; padding: 1rem 0; scrollbar-width: none; -ms-overflow-style: none; }
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-item { flex: 0 0 12.5%; text-align: center; text-decoration: none; color: var(--black); transition: var(--transition); }
.cat-item:hover { transform: translateY(-4px); }
.cat-circle { width: 115px; height: 115px; border-radius: 50%; overflow: hidden; border: 1px solid rgb(217 200 180 / 36%); margin: 0 auto 0.8rem; transition: var(--transition); }
.cat-item:hover .cat-circle { border-color: var(--primary); box-shadow: 0 8px 30px rgba(211,143,63,0.2); }
.cat-circle img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.cat-item:hover .cat-circle img { transform: scale(1.1); }
.cat-item span { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }

/* ========================================
   PRODUCTS PAGE — GENDER SECTIONS
   ======================================== */
.gender-section { padding: 3rem 0; }
.gender-section.for-her { background: #fff3ec; }
.gender-section.for-him { background: #faeede; }
.gender-section.unisex { background: #fdf9ef; }
.gender-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; }
.gender-head-text h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 0.3rem; }
.gender-head-text p { color: var(--gray); font-size: 0.88rem; }
.btn-view-all-outline { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--black); border: 1.5px solid var(--black); padding: 0.7rem 1.5rem; transition: var(--transition); white-space: nowrap; }
.btn-view-all-outline span { font-size: 0.85rem; line-height: 1; letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; vertical-align: middle; font-family: Arial, sans-serif; }
.btn-view-all-outline:hover { background: var(--primary); border-color: var(--primary); color: var(--white); }

/* ========================================
   PRODUCT CARD (Matches homepage showcase style)
   ======================================== */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 3rem; }
.prod-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Make .prod-card behave exactly like .showcase-item + .showcase-wrap */
.prod-card { aspect-ratio: 1 / 1; }
.prod-card .prod-img { flex: 1 1 0; min-height: 0; }
/* Product Card — matches homepage OUR CREATIONS (.showcase-wrap) */
.prod-card {
    position: relative;
    background: var(--white);
    text-decoration: none;
    color: var(--black);
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    transition: box-shadow 0.35s ease;
}
.prod-card:hover {
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
    z-index: 10;
}
.prod-card .prod-img {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
    background: var(--white);
}
.prod-card .prod-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}
.prod-card:hover .prod-img img { transform: scale(1.05); }
.prod-card .prod-badge {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    background: var(--primary);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    z-index: 2;
}
.prod-card .prod-info {
    padding: 0.9rem 0.5rem;
    text-align: center;
    background: var(--white);
    flex-shrink: 0;
}
.prod-card .prod-cat { display: none; }
.prod-card .prod-info h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    color: #999;
    letter-spacing: 0.5px;
    margin: 0.3rem 0 0;
    line-height: 1.3;
    text-transform: uppercase;
}
.prod-card .prod-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--black);
    font-weight: 500;
    display: inline-block;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--primary);
    margin: 0;
}
.prod-card .prod-price .old-price {
    text-decoration: line-through;
    color: var(--gray-light);
    font-weight: 400;
    font-size: 0.72rem;
    margin-left: 0.5rem;
    border: none;
    padding: 0;
}
.prod-desc, .prod-card .prod-link { display: none; }

/* ========================================
   PRODUCT LIST PAGE
   ======================================== */
.product-list-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; padding: 4rem 0; }
.filter-sidebar { position: sticky; top: 90px; align-self: start; }
.filter-group { margin-bottom: 2rem; }
.filter-group h4 { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--primary); }
.filter-group label { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; font-size: 0.85rem; cursor: pointer; color: var(--gray); transition: color 0.3s; }
.filter-group label:hover { color: var(--black); }
.filter-group input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.filter-group input[type="range"] { width: 100%; accent-color: var(--primary); }
.filter-price-labels { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--gray); margin-top: 0.3rem; }
.active-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filter-tag { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--cream-dark); border: 1px solid rgba(211,143,63,0.2); padding: 0.3rem 0.8rem; font-size: 0.72rem; border-radius: 20px; color: var(--primary); font-weight: 600; letter-spacing: 0.5px; }
.filter-tag .remove-filter { cursor: pointer; font-size: 0.85rem; line-height: 1; }
.list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.list-header h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; }
.list-header .result-count { font-size: 0.82rem; color: var(--gray); }
.sort-select { border: 1px solid rgba(0,0,0,0.15); padding: 0.5rem 1rem; font-family: 'Montserrat', sans-serif; font-size: 0.78rem; background: var(--white); border-radius: 3px; outline: none; cursor: pointer; }
.list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.load-more-wrap { text-align: center; margin-top: 3rem; }
.btn-load-more { display: inline-block; padding: 0.8rem 2.5rem; border: 1.5px solid var(--black); background: none; font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: var(--transition); }
.btn-load-more:hover { background: var(--primary); border-color: var(--primary); color: var(--white); }
.mobile-filter-btn { display: none; position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 99; padding: 0.8rem 2rem; background: var(--black); color: var(--white); border: none; border-radius: 30px; font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
@media (max-width: 992px) {
    .product-list-layout { grid-template-columns: 1fr; }
    .filter-sidebar { position: fixed; top: 0; left: -300px; width: 280px; height: 100vh; background: var(--white); z-index: 1001; padding: 2rem; overflow-y: auto; transition: left 0.3s; box-shadow: 4px 0 20px rgba(0,0,0,0.15); }
    .filter-sidebar.open { left: 0; }
    .mobile-filter-btn { display: block; }
    .list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .list-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
}

/* ========================================
   PRODUCT LIST PAGE — CARD STYLE (image-bleed)
   ======================================== */
.list-grid.pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pl-card { position: relative; display: block; text-decoration: none; color: var(--black); background: var(--white); overflow: hidden; transition: box-shadow 0.35s ease; }
.pl-card:hover { box-shadow: 0 20px 45px rgba(0,0,0,0.12); z-index: 2; }
.pl-card-img { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #eee; }
.pl-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.pl-card:hover .pl-card-img img { transform: scale(1.04); }
.pl-card-badge { position: absolute; top: 0.9rem; left: 0.9rem; background: var(--primary); color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 0.55rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; padding: 0.3rem 0.7rem; z-index: 2; }
.pl-card-info { text-align: center; padding: 1rem 0.5rem 1.4rem; background: var(--white); }
.pl-card-price { font-family: 'Montserrat', sans-serif; font-size: 0.92rem; font-weight: 500; color: var(--black); letter-spacing: 0.3px; }
@media (max-width: 992px) {
    .list-grid.pl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .list-grid.pl-grid { grid-template-columns: repeat(2, 1fr); }
    .pl-card-price { font-size: 0.82rem; }
}

/* ========================================
   PRODUCT DETAIL PAGE
   ======================================== */
.pd-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 4rem 0; align-items: start; }
.pd-gallery { position: sticky; top: 90px; }
.pd-main-img { border-radius: 8px; overflow: hidden; aspect-ratio: 1/1; margin-bottom: 1rem; position: relative; }
.pd-main-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; cursor: zoom-in; }
.pd-main-img:hover img { transform: scale(1.05); }
.pd-thumbs { display: flex; gap: 0.6rem; }
.pd-thumb { width: 72px; height: 72px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: border-color 0.3s; }
.pd-thumb.active { border-color: var(--primary); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-info { padding-top: 0.5rem; }
.pd-info .prod-cat { font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); font-weight: 600; margin-bottom: 0.5rem; display: block; }
.pd-info h1 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.2; margin-bottom: 0.8rem; }
.pd-info .pd-price { font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; }
.pd-info .pd-price .old-price { text-decoration: line-through; color: var(--gray-light); font-weight: 400; font-size: 1.1rem; margin-left: 0.8rem; }
.pd-info .pd-desc { color: var(--gray); line-height: 1.8; font-size: 0.9rem; margin-bottom: 2rem; }
.pd-specs { margin-bottom: 2rem; }
.pd-specs h4 { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; }
.pd-spec-row { display: flex; border-bottom: 1px solid rgba(0,0,0,0.06); padding: 0.6rem 0; }
.pd-spec-row .spec-label { width: 140px; font-size: 0.82rem; color: var(--gray); flex-shrink: 0; }
.pd-spec-row .spec-value { font-size: 0.82rem; font-weight: 500; }
.pd-actions { display: flex; gap: 1rem; margin-bottom: 2rem; }
.pd-actions .btn-enquire { flex: 1; padding: 1rem; background: var(--primary); color: var(--white); border: none; font-family: 'Montserrat', sans-serif; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; cursor: pointer; border-radius: 3px; transition: var(--transition); text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.pd-actions .btn-enquire:hover { background: var(--black); }
.pd-actions .btn-wa { flex: 1; padding: 1rem; background: #25d366; color: var(--white); border: none; font-family: 'Montserrat', sans-serif; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; cursor: pointer; border-radius: 3px; transition: var(--transition); text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.pd-actions .btn-wa:hover { background: #1da851; }
.pd-trust { display: flex; gap: 2rem; padding: 1.5rem 0; border-top: 1px solid rgba(0,0,0,0.06); }
.pd-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--gray); }
.pd-trust-item .trust-icon { font-size: 1.2rem; }



/* Product Detail Tabs */
.pd-tabs { margin-top: 1.5rem; }
.pd-tab-nav { display: flex; gap: 0; border-bottom: 1px solid rgba(0,0,0,0.1); }
.pd-tab-btn { padding: 0.8rem 1.5rem; background: none; border: none; border-bottom: 2px solid transparent; font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); cursor: pointer; transition: all 0.3s; }
.pd-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.pd-tab-btn:hover { color: var(--primary); }
.pd-tab-content { display: none; padding: 1.2rem 0; font-size: 0.88rem; line-height: 1.8; color: var(--text-light); }
.pd-tab-content.active { display: block; }
.pd-tab-content p { margin-bottom: 0.8rem; }
.pd-tab-content .pd-specs { margin-bottom: 0; }

/* Choose Packaging Tab */
.pd-pkg-list-tab { }
.pd-pkg-item { padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.pd-pkg-item:last-child { border-bottom: none; }
.pd-pkg-top { display: flex; gap: 0.8rem; align-items: flex-start; }
.pd-pkg-img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.pd-pkg-info { flex: 1; }
.pd-pkg-info strong { font-size: 0.78rem; color: var(--black); display: block; margin-bottom: 0.3rem; }
.pd-pkg-info p { font-size: 0.72rem; color: var(--gray); line-height: 1.5; margin: 0; }
.pd-pkg-bottom { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.7rem; }
.pd-pkg-select { flex: 1; padding: 0.5rem 0.7rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; font-family: inherit; font-size: 0.75rem; color: var(--black); background: #fff; outline: none; }
.pd-pkg-add { padding: 0.5rem 1.2rem; background: var(--black); color: #fff; border: none; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; transition: background 0.2s; }
.pd-pkg-add:hover { background: var(--primary); }
.pd-pkg-add.selected { background: var(--primary); }

/* 360 View Button */
.pd-360-btn { position: absolute; bottom: 1rem; right: 1rem; display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.1); border-radius: 20px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; color: var(--text); transition: all 0.3s; backdrop-filter: blur(4px); z-index: 2; }
.pd-360-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }
.pd-360-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.pd-360-btn svg { width: 16px; height: 16px; }
.pd-main-img img { transition: transform 0.3s ease; transform-origin: center center; }

.related-section { padding: 4rem 0; background: var(--cream-dark); }
@media (max-width: 768px) {
    .pd-layout { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 0; }
    .pd-gallery { position: static; }
    .pd-main-img { aspect-ratio: 1/1; border-radius: 6px; }
    .pd-thumbs { gap: 0.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .pd-thumb { min-width: 55px; width: 55px; height: 55px; }
    .pd-info h1 { font-size: 1.4rem; margin-bottom: 0.5rem; }
    .pd-info .pd-price { font-size: 1.2rem; margin-bottom: 1rem; }
    .pd-tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 0; }
    .pd-tab-btn { padding: 0.6rem 0.8rem; font-size: 0.65rem; white-space: nowrap; flex-shrink: 0; }
    .pd-actions { flex-direction: column; }
    .pd-actions .btn-enquire, .pd-actions .btn-wa { width: 100%; text-align: center; justify-content: center; }
    .pd-trust { flex-wrap: wrap; gap: 1rem; }
    .pd-pkg-item { padding: 0.8rem 0; }
    .pd-pkg-top { gap: 0.6rem; }
    .pd-pkg-img { width: 50px; height: 50px; }
    .pd-pkg-info strong { font-size: 0.72rem; }
    .pd-pkg-info p { font-size: 0.68rem; }
    .pd-pkg-bottom { flex-direction: row; }
    .pd-pkg-select { font-size: 0.72rem; }
    .pd-pkg-add { padding: 0.45rem 1rem; font-size: 0.65rem; }
    .pd-spec-row { flex-direction: column; gap: 2px; padding: 0.5rem 0; }
    .pd-360-btn { padding: 6px 12px; font-size: 0.6rem; }
    #addressForm { padding: 1rem !important; }
    #addressForm h4 { font-size: 0.95rem !important; }
}
@media (max-width: 480px) {
    .pd-layout { padding: 1rem 0; }
    .pd-info h1 { font-size: 1.2rem; }
    .pd-info .pd-price { font-size: 1.1rem; }
    .pd-tab-btn { padding: 0.5rem 0.6rem; font-size: 0.6rem; letter-spacing: 0.5px; }
    .pd-thumb { min-width: 48px; width: 48px; height: 48px; }
}

/* Product card responsive */
@media (max-width: 992px) {
    .prod-grid { grid-template-columns: repeat(3, 1fr); }
    .cat-circle { width: 110px; height: 110px; }
}
@media (max-width: 768px) {
    .prod-grid { grid-template-columns: repeat(2, 1fr); }
    .prod-card .prod-img { height: 200px; }
    .prod-card .prod-overlay { display: none; }
    .cat-circle { width: 85px; height: 85px; }
    .cat-scroll { gap: 1.2rem; }
    .cat-item span { font-size: 0.6rem; }
    .gender-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (max-width: 480px) {
    .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
    .prod-card .prod-img { height: 170px; }
    .prod-card .prod-info { padding: 0.8rem; }
    .prod-card .prod-info h4 { font-size: 0.85rem; }
    .cat-circle { width: 70px; height: 70px; }
}

/* ========================================
   COLLECTIONS — Editorial Luxury
   lizaborzaya + YUGZEN merge
   ======================================== */

.cl-block {
    background: var(--white);
    padding: 5rem 0 0;
    position: relative;
    overflow: hidden;
}
.cl-block-alt {
    background: var(--cream);
}
/* Section background — banner image with low opacity + parallax */
.cl-block-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.cl-block-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.15;
    filter: grayscale(20%);
    position: sticky;
    top: 0;
}
.cl-block .cl-split,
.cl-block .cl-thumbs,
.cl-block .cl-sep {
    position: relative;
    z-index: 2;
}

/* ── Split: Text + Image ── */
.cl-split {
    display: grid;
    grid-template-columns: 40% 58%;
    gap: 2%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    align-items: center;
    min-height: 520px;
}
.cl-split-reverse {
    grid-template-columns: 58% 40%;
    direction: rtl;
}
.cl-split-reverse > * {
    direction: ltr;
}

/* ── Text ── */
.cl-text {
    padding: 3rem 2rem 3rem 0;
}
.cl-split-reverse .cl-text {
    padding: 3rem 0 3rem 2rem;
}
.cl-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 4px;
    color: var(--gray-light);
    display: block;
    margin-bottom: 1.5rem;
}
.cl-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--black);
    line-height: 1.1;
    margin: 0 0 1rem;
}
.cl-tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-style: normal;
    color: #D4903E;
    margin: 0 0 1.5rem;
}
.cl-desc {
    font-size: 0.92rem;
    color: var(--gray);
    line-height: 2;
    margin: 0 0 2.5rem;
    max-width: 420px;
}
.cl-view {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 3px;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    border-bottom: 1.5px solid var(--black);
    padding-bottom: 6px;
    transition: color 0.3s, border-color 0.3s;
    display: inline-block;
}
.cl-view:hover,
.cl-block a:hover {
    color: var(--cl-theme, var(--primary));
    border-color: var(--cl-theme, var(--primary));
}
a:hover {
    color: var(--cl-theme, var(--primary));
    transition: color 0.3s ease;
}

/* ── Image — Fixed dimensions ── */
.cl-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 6 / 5;
}
.cl-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cl-image:hover img {
    transform: scale(1.04);
}
.cl-image-empty {
    width: 100%;
    aspect-ratio: 6 / 5;
    background: linear-gradient(145deg, #e8e4df, #d4cfc8);
}

/* ── Product Thumbnails ── */
.cl-thumbs {
    display: flex;
    justify-content: center;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 3.5rem 2rem 4rem;
}
.cl-thumb {
    text-align: center;
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
    transition: transform 0.3s ease;
}
.cl-thumb:hover {
    transform: translateY(-5px);
}
.cl-thumb-img {
    width: 160px;
    height: 160px;
    overflow: hidden;
    margin: 0 auto 1rem;
    background: var(--cream-dark);
}
.cl-thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.cl-thumb:hover .cl-thumb-img img {
    transform: scale(1.08);
}
.cl-thumb-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 2.5px;
    font-weight: 600;
    color: var(--black);
    text-transform: uppercase;
    display: block;
}
.cl-thumb:hover .cl-thumb-name {
    color: var(--cl-theme, var(--primary));
}

/* ── Divider ── */
.cl-sep {
    max-width: 80px;
    height: 1px;
    background: rgba(211,143,63,0.15);
    margin: 0 auto;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .cl-split { grid-template-columns: 42% 56%; min-height: 420px; }
    .cl-split-reverse { grid-template-columns: 56% 42%; }
    .cl-title { font-size: 2.5rem; }
    .cl-image { aspect-ratio: 6 / 5; }
    .cl-thumbs { gap: 2rem; }
    .cl-thumb-img { width: 140px; height: 140px; }
}
@media (max-width: 768px) {
    .cl-block { padding: 3rem 0 0; }
    .cl-split { grid-template-columns: 1fr; min-height: auto; }
    .cl-split-reverse { grid-template-columns: 1fr; direction: ltr; }
    .cl-text { padding: 0 1rem 2rem; text-align: center; }
    .cl-split-reverse .cl-text { padding: 0 1rem 2rem; }
    .cl-desc { max-width: 100%; margin-left: auto; margin-right: auto; }
    .cl-image { aspect-ratio: 6 / 5; order: -1; }
    .cl-title { font-size: 2rem; }
    .cl-thumbs { gap: 1.5rem; padding: 2.5rem 1rem 3rem; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
    .cl-thumbs::-webkit-scrollbar { display: none; }
    .cl-thumb-img { width: 120px; height: 120px; }
    .cl-thumb-name { font-size: 0.55rem; }
}
@media (max-width: 480px) {
    .cl-block { padding: 2rem 0 0; }
    .cl-title { font-size: 1.7rem; }
    .cl-desc { font-size: 0.88rem; }
    .cl-image { aspect-ratio: 6 / 5; }
    .cl-thumbs { gap: 1.2rem; padding: 2rem 1rem; }
    .cl-thumb-img { width: 100px; height: 100px; }
    .cl-thumb-name { font-size: 0.5rem; letter-spacing: 1.5px; }
}

/* ========================================
   COLLECTION DETAIL — About Section
   ======================================== */
.cd-about {
    padding: 5rem 0;
    background: var(--white);
}
.cd-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.cd-about-img {
    overflow: hidden;
    height: 450px;
}
.cd-about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 6s ease;
}
.cd-about-img:hover img { transform: scale(1.04); }
.cd-about-text h2 {
    font-size: 2.2rem;
    margin: 0.5rem 0 0;
    line-height: 1.2;
}
.cd-about-tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-style: italic;
    margin-top: 0.5rem;
}
.cd-about-line {
    width: 40px;
    height: 2px;
    margin: 1.5rem 0;
}
.cd-about-desc {
    font-size: 0.92rem;
    color: var(--gray);
    line-height: 2;
    margin-bottom: 2rem;
}
.cd-about-stats {
    display: flex;
    gap: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.cd-about-stat {
    text-align: center;
}
.cd-about-stat strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.3rem;
}
.cd-about-stat span {
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray-light);
}

/* ── Highlight Strip ── */
.cd-highlight {
    padding: 2.5rem 0;
}
.cd-highlight-inner {
    display: flex;
    justify-content: center;
    gap: 4rem;
}
.cd-highlight-stat { text-align: center; }
.cd-highlight-stat strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: #fff;
    font-weight: 400;
}
.cd-highlight-stat span {
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
}

/* ── Editorial / Craft Section ── */
.cd-editorial {
    padding: 5rem 0;
    background: var(--white);
}
.cd-editorial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.cd-editorial-img {
    overflow: hidden;
    height: 400px;
}
.cd-editorial-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 6s ease;
}
.cd-editorial-img:hover img { transform: scale(1.04); }
.cd-editorial-text h3 { font-size: 1.8rem; margin: 0.5rem 0 1.2rem; }
.cd-editorial-text p { font-size: 0.9rem; color: var(--gray); line-height: 1.9; margin-bottom: 1.5rem; }
.cd-craft-list { list-style: none; padding: 0; margin: 0; }
.cd-craft-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
    font-size: 0.88rem;
    color: var(--black);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cd-craft-list li:last-child { border-bottom: none; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .cd-about-grid { gap: 3rem; }
    .cd-about-img { height: 380px; }
    .cd-editorial-grid { gap: 3rem; }
    .cd-editorial-img { height: 340px; }
}
@media (max-width: 768px) {
    .cd-about { padding: 3.5rem 0; }
    .cd-about-grid { grid-template-columns: 1fr; gap: 2rem; }
    .cd-about-img { height: 300px; }
    .cd-about-text h2 { font-size: 1.8rem; }
    .cd-about-stats { gap: 1.5rem; }
    .cd-highlight-inner { gap: 2rem; flex-wrap: wrap; }
    .cd-editorial-grid { grid-template-columns: 1fr; gap: 2rem; }
    .cd-editorial-img { height: 280px; }
}
@media (max-width: 480px) {
    .cd-about-img { height: 240px; }
    .cd-about-text h2 { font-size: 1.5rem; }
    .cd-about-stat strong { font-size: 1.2rem; }
    .cd-highlight-inner { gap: 1.5rem; }
    .cd-highlight-stat strong { font-size: 1.1rem; }
    .cd-editorial-img { height: 220px; }
}

/* ========================================
   BROWSE BY CATEGORY - Homepage Section
   ======================================== */
.browse-categories {
    padding: 5rem 0;
    background: var(--cream);
}
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.cat-card {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--black);
    background: var(--white);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: var(--transition);
}
.cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(211,143,63,0.15);
}
.cat-card-img {
    position: relative;
    height: 200px;
    overflow: hidden;
}
.cat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cat-card:hover .cat-card-img img {
    transform: scale(1.08);
}
.cat-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f1ece8 0%, #e8dfd8 100%);
}
.cat-card-placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--primary);
    opacity: 0.5;
}
.cat-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.25) 0%, transparent 60%);
    pointer-events: none;
    transition: opacity 0.4s;
}
.cat-card:hover .cat-card-overlay {
    opacity: 0.6;
}
.cat-card-body {
    padding: 1.2rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cat-card-body h4 {
    font-size: 1.05rem;
    font-weight: 600;
    flex: 1;
    letter-spacing: -0.01em;
}
.cat-card-count {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-light);
    white-space: nowrap;
}
.cat-card-arrow {
    font-size: 1.2rem;
    color: var(--primary);
    transition: transform 0.3s;
    flex-shrink: 0;
}
.cat-card:hover .cat-card-arrow {
    transform: translateX(4px);
}
.cat-view-all {
    text-align: center;
    margin-top: 1rem;
}
@media (max-width: 768px) {
    .browse-categories { padding: 3rem 0; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .cat-card-img { height: 150px; }
    .cat-card-body { padding: 0.9rem 1rem; }
    .cat-card-body h4 { font-size: 0.9rem; }
}
@media (max-width: 480px) {
    .cat-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    .cat-card-img { height: 130px; }
    .cat-card-body { padding: 0.7rem 0.8rem; }
    .cat-card-body h4 { font-size: 0.82rem; }
    .cat-card-count { display: none; }
}

/* ========================================
   PRODUCTS PAGE — Video + 6 Product Grid
   ======================================== */
.pg-video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.8rem;
    margin-top: 2rem;
}
.pg-video-cell {
    grid-row: 1 / span 2;
    grid-column: 1;
    aspect-ratio: 1 / 2;
    overflow: hidden;
    position: relative;
    background: #000;
}
.pg-video-cell img,
.pg-video-cell video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .pg-video-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .pg-video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pg-video-cell {
        grid-column: 1 / span 2;
        grid-row: 1;
        aspect-ratio: 2 / 1;
    }
}

/* Video Play/Pause button */
.pg-video-cell { cursor: pointer; }
.pg-video-play {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    z-index: 3;
}
.pg-video-play:hover {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}
.pg-video-play svg {
    width: 20px;
    height: 20px;
}
.pg-video-play .pg-icon-pause { display: block; }
.pg-video-play .pg-icon-play { display: none; }
.pg-video-play.paused .pg-icon-play { display: block; }
.pg-video-play.paused .pg-icon-pause { display: none; }

/* Custom Order — Hero CTA */
.co-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2rem;
    background: var(--primary);
    color: var(--white) !important;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    border: 1.5px solid var(--primary);
    transition: all 0.3s ease;
    animation: coCtaPulse 2s ease-in-out infinite;
}
.co-hero-cta:hover {
    background: transparent;
    color: var(--primary) !important;
}
.co-hero-cta span {
    font-size: 1.1rem;
    line-height: 1;
    animation: coArrowBounce 1.5s ease-in-out infinite;
}
@keyframes coCtaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(148,74,62,0.5); }
    50% { box-shadow: 0 0 0 10px rgba(148,74,62,0); }
}
@keyframes coArrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* Custom Order Form section - visual highlight */
#customOrderForm {
    position: relative;
    scroll-margin-top: 80px;
}
#customOrderForm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--primary);
}

/* Custom Order Form — Card Design */
.co-form-card {
    max-width: 900px;
    margin: 2rem auto 0;
    background: var(--white);
    border: 1px solid rgba(148,74,62,0.15);
    padding: 2.5rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
    position: relative;
}
.co-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary);
}
.co-form-card .form-group {
    margin-bottom: 1rem;
}
.co-form-card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-bottom: 0;
}
.co-form-card label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0.4rem;
}
.co-form-card input,
.co-form-card select,
.co-form-card textarea {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(0,0,0,0.15);
    background: var(--white);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--black);
    transition: border-color 0.3s;
}
.co-form-card input:focus,
.co-form-card select:focus,
.co-form-card textarea:focus {
    outline: none;
    border-color: var(--primary);
}
.co-form-card textarea {
    resize: vertical;
    min-height: 90px;
}

/* Submit button — theme color */
.co-submit-btn {
    display: block;
    width: 100%;
    padding: 1rem 2rem;
    background: var(--primary);
    color: var(--white);
    border: 1.5px solid var(--primary);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}
.co-submit-btn:hover {
    background: transparent;
    color: var(--primary);
}

@media (max-width: 768px) {
    .co-form-card { padding: 1.5rem; }
    .co-form-card .form-row { grid-template-columns: 1fr; }
}

/* ========================================
   B2B SLIDER - Dark Background with Better Focus
   ======================================== */
.hb2b-section {
    background: #F5F5F5;
    padding: 4rem 0;
    overflow: hidden;
    position: relative;
}
.hb2b-container { position: relative; z-index: 2; }
.hb2b-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}
.hb2b-header {
    text-align: center;
    margin-bottom: 3rem;
}
.hb2b-header .label { color: var(--primary); }
.hb2b-header h2 { color: var(--black); font-size: 2rem; }
.hb2b-header h2 em { color: var(--primary); }
.hb2b-header p { color: var(--gray); margin-top: 0.8rem; font-size: 0.95rem; }

.hb2b-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.hb2b-nav {
    width: 45px;
    height: 45px;
    background: var(--white);
    border: 1px solid rgba(148,74,62,0.3);
    border-radius: 50%;
    color: var(--primary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(148,74,62,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.hb2b-nav svg { transition: transform 0.3s ease; }
.hb2b-nav.prev svg { transform: scaleX(-1); }
.hb2b-nav:hover svg { transform: scale(1.15); }
.hb2b-nav.prev:hover svg { transform: scaleX(-1) scale(1.15); }
.hb2b-nav:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    box-shadow: 0 6px 20px rgba(148,74,62,0.3);
}

.hb2b-slides {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 320px;
    perspective: 1000px;
}
.hb2b-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 700px;
    display: flex;
    gap: 2rem;
    background: var(--white);
    border: 1px solid rgba(148,74,62,0.15);
    border-radius: 15px;
    padding: 2rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8) rotateY(30deg);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.hb2b-slide.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotateY(0deg);
    pointer-events: auto;
    z-index: 3;
    background: var(--white);
    border-color: rgba(148,74,62,0.25);
    box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}
.hb2b-slide.prev {
    opacity: 0.8;
    transform: translate(-130%, -50%) scale(0.7) rotateY(25deg);
    z-index: 1;
    background: var(--white);
}
.hb2b-slide.next {
    opacity: 0.8;
    transform: translate(30%, -50%) scale(0.7) rotateY(-25deg);
    z-index: 1;
    background: var(--white);
}

.hb2b-image {
    flex: 0 0 180px;
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
}
.hb2b-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hb2b-content {
    flex: 1;
    color: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hb2b-num {
    font-size: 2.5rem;
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    opacity: 0.5;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.hb2b-content h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--black);
}
.hb2b-content h3 em { color: var(--primary); font-style: italic; }
.hb2b-content p {
    font-size: 0.85rem;
    color: var(--gray);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.hb2b-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.hb2b-tags span {
    font-size: 0.65rem;
    letter-spacing: 1px;
    padding: 0.4rem 0.8rem;
    background: rgba(148, 74, 62, 0.12);
    border: 1px solid rgba(148, 74, 62, 0.3);
    border-radius: 20px;
    color: var(--primary);
    font-weight: 600;
}
.hb2b-features {
    display: flex;
    gap: 1.5rem;
}
.hb2b-features div {
    flex: 1;
}
.hb2b-features strong {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: var(--primary);
    margin-bottom: 0.3rem;
}
.hb2b-features span {
    font-size: 0.8rem;
    color: var(--gray);
}

.hb2b-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}
.hb2b-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(148,74,62,0.25);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(148,74,62,0.4);
}
.hb2b-dot.active {
    background: var(--primary);
    width: 25px;
    border-radius: 4px;
}
.hb2b-btn {
    display: inline-block;
    width: fit-content;
    margin: 2.5rem auto 0;
    padding: 0.5rem 0 0.6rem;
    background: transparent;
    color: var(--black);
    border: none;
    border-bottom: 1.5px solid var(--black);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.hb2b-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}
/* Center align since it was inline-block */
.hb2b-section .hb2b-btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* B2B Mobile */
@media (max-width: 768px) {
    .hb2b-section { padding: 25px 0; overflow: hidden; }
    .hb2b-header { margin-bottom: 15px; }
    .hb2b-header .label { font-size: 9px; }
    .hb2b-header h2 { font-size: 1.3rem; }
    .hb2b-container { padding: 0 20px; overflow: hidden; }
    .hb2b-wrapper { padding: 0; position: relative; overflow: hidden; }
    .hb2b-nav { display: none !important; }
    .hb2b-slides { height: auto; perspective: none; display: block; overflow: hidden; position: relative; }
    .hb2b-slide { width: 100%; position: absolute; top: 0; left: 0; padding: 20px; border-radius: 12px; flex-direction: column; gap: 12px; opacity: 0; transform: translateX(100%); transition: all 0.4s ease; display: flex; background: rgba(35, 35, 35, 1); }
    .hb2b-slide.active { position: relative; opacity: 1; transform: translateX(0); }
    .hb2b-slide.prev { transform: translateX(-100%); opacity: 0; }
    .hb2b-slide.next { transform: translateX(100%); opacity: 0; }
    .hb2b-image { flex: none; height: 120px; width: 120px; margin: 0 auto; border-radius: 10px; overflow: hidden; }
    .hb2b-image img { border-radius: 10px; width: 100%; height: 100%; object-fit: cover; }
    .hb2b-content { text-align: center; padding: 0 10px; }
    .hb2b-num { font-size: 1.5rem; margin-bottom: 3px; opacity: 0.15; }
    .hb2b-content h3 { font-size: 1.1rem; margin-bottom: 8px; line-height: 1.3; }
    .hb2b-content h3 em { display: inline; }
    .hb2b-content p { font-size: 0.8rem; line-height: 1.5; margin-bottom: 12px; opacity: 0.75; }
    .hb2b-tags { justify-content: center; gap: 6px; flex-wrap: wrap; }
    .hb2b-tags span { font-size: 8px; padding: 5px 10px; border-radius: 15px; background: rgba(255,255,255,0.1); }
    .hb2b-features { flex-direction: row; gap: 20px; text-align: center; justify-content: center; flex-wrap: wrap; margin-top: 5px; }
    .hb2b-features div { flex: 0 0 auto; }
    .hb2b-features div strong { font-size: 8px; display: block; margin-bottom: 2px; color: var(--primary); }
    .hb2b-features div span { font-size: 0.8rem; }
    .hb2b-dots { margin-top: 18px; gap: 10px; }
    .hb2b-dot { width: 10px; height: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .hb2b-dot.active { width: 25px; border-radius: 5px; }
    .hb2b-btn { margin-top: 18px; padding: 14px 25px; font-size: 0.8rem; border-radius: 25px; width: calc(100% - 40px); max-width: 280px; }
}

/* ==========================================================
   MOBILE RESPONSIVE - PHASE 2
   Products Pages (products.php, product-list.php, product-detail.php)
   ========================================================== */

/* ---------- TABLET (<= 992px) — tighter gaps, slight font compression ---------- */
@media (max-width: 992px) {
    /* Page hero */
    .page-hero { padding: 5rem 0 3rem !important; }
    .page-hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
    .page-hero p { font-size: 0.9rem; }

    /* Category carousel */
    .cat-wrapper { gap: 0.4rem; }
    .cat-item { flex: 0 0 20%; }
    .cat-circle { width: 95px; height: 95px; }
    .cat-item span { font-size: 0.62rem; letter-spacing: 1.5px; }
    .cat-nav { width: 34px; height: 34px; }

    /* Products page video grid — tablet stays multi-col */
    .pg-video-grid { grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
    .pg-video-cell { aspect-ratio: 1 / 2; }
    .gender-head h2 { font-size: 1.6rem; }
    .gender-head p { font-size: 0.82rem; }
    .gender-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }

    /* Product list: 4 col -> 3 col on tablet */
    .product-list-layout { gap: 1.5rem; }
    .list-grid.pl-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px; }
    .filter-sidebar h4 { font-size: 0.82rem; }

    /* Product detail tabs */
    .pd-layout { gap: 2.5rem; padding: 2.5rem 0; }
    .pd-tab-btn { font-size: 0.72rem; padding: 0.7rem 1rem; }

    /* Related products: 4 col -> 3 col on tablet */
    .related-section .prod-grid,
    .related-section .prod-grid-4 { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

    /* Grow strip */
    .strip-inner { gap: 1.2rem; padding: 1.8rem; }

    /* CTA */
    .cta-inner { padding: 4rem 2rem; }
    .cta-section h2 { font-size: 1.8rem; }
}

/* ---------- MOBILE (<= 768px) — stacked, app-style ---------- */
@media (max-width: 768px) {
    /* Page hero — smaller padding, scaled text */
    .page-hero { padding: 3.5rem 0 2.5rem !important; }
    .page-hero h1 { font-size: 1.8rem; line-height: 1.2; margin-bottom: 0.5rem; }
    .page-hero p { font-size: 0.85rem; line-height: 1.55; margin-bottom: 0.8rem; }
    .page-hero .label { font-size: 0.65rem; letter-spacing: 2px; }
    .page-hero .breadcrumb { font-size: 0.72rem; flex-wrap: wrap; }

    /* -------- PRODUCTS.PHP -------- */

    /* Category carousel — touch-friendly horizontal scroll */
    .cat-wrapper { gap: 0.3rem; }
    .cat-nav { display: none; }
    .cat-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 0.8rem 0.25rem 1rem;
        gap: 0.5rem;
    }
    .cat-scroll::-webkit-scrollbar { display: none; }
    .cat-item { flex: 0 0 auto; min-width: 90px; scroll-snap-align: start; }
    .cat-circle { width: 80px; height: 80px; margin-bottom: 0.5rem; }
    .cat-item span { font-size: 0.6rem; letter-spacing: 1px; }

    /* Video + 6 product grid — on mobile: video full-width top, 6 products in 2x3 below */
    .pg-video-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto repeat(3, auto) !important;
        gap: 0.6rem !important;
        margin-top: 1.2rem !important;
    }
    .pg-video-cell {
        grid-column: 1 / span 2 !important;
        grid-row: 1 !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 6px;
    }
    .pg-video-grid .pg-prod-cell,
    .pg-video-grid .showcase-item { grid-column: auto !important; grid-row: auto !important; }
    .pg-video-play { width: 40px; height: 40px; bottom: 0.6rem; right: 0.6rem; }

    /* Gender section heading stacked */
    .gender-section { padding: 2rem 0 !important; }
    .gender-head { flex-direction: column; align-items: stretch; gap: 0.8rem; margin-bottom: 1rem; }
    .gender-head-text h2 { font-size: 1.5rem; margin-bottom: 0.2rem; }
    .gender-head-text .label { font-size: 0.6rem; }
    .gender-head-text p { font-size: 0.8rem; line-height: 1.5; margin-bottom: 0; }
    .btn-view-all-outline {
        align-self: flex-start;
        padding: 0.7rem 1.2rem;
        font-size: 0.7rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Showcase cards - tighter on mobile */
    .pg-video-grid .showcase-body { padding: 0.6rem 0.4rem; }
    .pg-video-grid .showcase-body h5 { font-size: 0.78rem; line-height: 1.3; }
    .pg-video-grid .showcase-price { font-size: 0.72rem; }
    .showcase-badge { font-size: 0.55rem; padding: 3px 8px; }

    /* Grow strip — stacked */
    .grow-strip { padding: 2rem 0; }
    .strip-inner {
        flex-direction: column !important;
        text-align: center;
        gap: 1rem !important;
        padding: 1.5rem !important;
    }
    .strip-text h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
    .strip-text p { font-size: 0.85rem; line-height: 1.5; }
    .btn-strip {
        width: 100%;
        max-width: 300px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.9rem 1.2rem;
        font-size: 0.75rem;
    }

    /* CTA section — stacked buttons full-width */
    .cta-section { padding: 2.5rem 0; }
    .cta-inner { padding: 3rem 1.2rem !important; }
    .cta-content h2 { font-size: 1.5rem !important; line-height: 1.25; }
    .cta-content p { font-size: 0.85rem; line-height: 1.55; }
    .cta-content .label { font-size: 0.65rem; }
    .cta-btns {
        flex-direction: column;
        width: 100%;
        gap: 0.7rem;
        align-items: stretch;
    }
    .btn-cta-primary, .btn-cta-wa {
        width: 100%;
        max-width: none;
        min-height: 48px;
        justify-content: center;
        padding: 0.95rem 1.2rem;
        font-size: 0.75rem;
    }

    /* -------- PRODUCT-LIST.PHP -------- */
    .product-list-layout {
        display: block !important;
        padding: 1.2rem 0;
    }
    /* Filter sidebar — already drawer-styled elsewhere; ensure hidden by default on mobile */
    .filter-sidebar {
        position: fixed !important;
        top: 0; left: -320px;
        width: 280px; height: 100vh;
        background: #fff;
        z-index: 1001;
        padding: 1.5rem;
        overflow-y: auto;
        transition: left 0.3s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    }
    .filter-sidebar.open { left: 0; }
    .list-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.8rem;
        padding: 0.5rem 0 1rem;
    }
    .list-header h3 { font-size: 1.2rem; }
    .result-count { font-size: 0.75rem; }
    .sort-select {
        width: 100%;
        min-height: 44px;
        padding: 0.7rem 0.9rem;
        font-size: 0.8rem;
    }
    /* Grid 4 -> 2 col */
    .list-grid.pl-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .pl-card-info { padding: 0.6rem 0.3rem; }
    .pl-card-price { font-size: 0.75rem; }
    .pl-card-badge { font-size: 0.55rem; padding: 3px 7px; }

    /* -------- PRODUCT-DETAIL.PHP -------- */
    .pd-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 1.2rem 0 !important;
    }
    .pd-gallery { position: static !important; }
    .pd-main-img {
        aspect-ratio: 1/1;
        border-radius: 6px;
        margin-bottom: 0.7rem;
    }
    /* Thumbnails below main image, horizontally scrollable */
    .pd-thumbs {
        gap: 0.4rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .pd-thumbs::-webkit-scrollbar { display: none; }
    .pd-thumb {
        flex: 0 0 auto;
        min-width: 56px;
        width: 56px;
        height: 56px;
        border-radius: 5px;
    }
    .pd-360-btn { top: 0.6rem; right: 0.6rem; padding: 6px 10px; font-size: 0.65rem; }

    /* Info panel full-width below image */
    .pd-info { padding-top: 0.5rem; }
    .pd-info .prod-cat { font-size: 0.6rem; }
    .pd-info h1 { font-size: 1.5rem !important; margin-bottom: 0.5rem; line-height: 1.25; }
    .pd-info .pd-price { font-size: 1.25rem !important; margin-bottom: 1rem; }
    .pd-info .pd-price .pd-compare-price { font-size: 0.75em !important; }
    .pd-info .pd-desc { font-size: 0.85rem; line-height: 1.65; margin-bottom: 1.2rem; }

    /* Tabs — horizontal scroll if overflow */
    .pd-tabs { margin-top: 1.2rem; }
    .pd-tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 0;
        scrollbar-width: none;
    }
    .pd-tab-nav::-webkit-scrollbar { display: none; }
    .pd-tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.7rem;
        padding: 0.75rem 0.9rem;
        min-height: 44px;
        letter-spacing: 0.5px;
    }
    .pd-tab-content { padding: 1rem 0; font-size: 0.85rem; }
    .pd-tab-content p { font-size: 0.85rem; line-height: 1.65; }
    .pd-specs { font-size: 0.82rem; }
    .pd-spec-row { padding: 0.6rem 0; font-size: 0.8rem; }
    .spec-label { font-size: 0.72rem; }
    .spec-value { font-size: 0.82rem; }

    /* Packaging tab on mobile */
    .pd-pkg-item { padding: 0.8rem 0; }
    .pd-pkg-top { gap: 0.6rem; }
    .pd-pkg-img { width: 52px; height: 52px; }
    .pd-pkg-info strong { font-size: 0.75rem; }
    .pd-pkg-info p { font-size: 0.7rem; }
    .pd-pkg-bottom { flex-wrap: wrap; gap: 0.5rem; }
    .pd-pkg-select { min-height: 40px; font-size: 0.75rem; flex: 1 1 55%; }
    .pd-pkg-add { min-height: 40px; padding: 0.55rem 1rem; font-size: 0.7rem; flex: 0 0 auto; }

    /* Actions — stacked, full-width buttons */
    .pd-actions {
        flex-direction: column !important;
        gap: 0.7rem;
        margin-bottom: 1.5rem;
    }
    .pd-actions .btn-enquire,
    .pd-actions .btn-wa {
        width: 100%;
        min-height: 48px;
        padding: 0.95rem 1rem;
        font-size: 0.75rem;
        letter-spacing: 1.5px;
    }

    /* Enquiry address form — stacked inputs */
    #addressForm {
        padding: 1.2rem !important;
        margin-top: 1.2rem !important;
    }
    #addressForm h4 { font-size: 1rem !important; margin-bottom: 1rem !important; }
    #addressForm > form > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    #addressForm input,
    #addressForm textarea {
        font-size: 16px !important; /* prevent iOS zoom on focus */
        padding: 12px 10px !important;
        min-height: 44px;
    }
    #addressForm textarea { min-height: 70px; }
    #addressSubmitBtn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 0.95rem 1rem !important;
        margin-top: 1rem !important;
    }

    /* Trust badges */
    .pd-trust {
        flex-wrap: wrap;
        gap: 0.8rem;
        margin-top: 1.5rem;
        justify-content: space-between;
    }
    .pd-trust-item {
        flex: 1 1 30%;
        font-size: 0.7rem;
        gap: 0.3rem;
        text-align: center;
        flex-direction: column;
    }
    .trust-icon { font-size: 1.1rem; }

    /* Related products — 2 col on mobile */
    .related-section { padding: 2.5rem 0; }
    .related-section .prod-grid,
    .related-section .prod-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .related-section .section-head h2 { font-size: 1.5rem; }
    .related-section .prod-info { padding: 0.6rem 0.4rem; }
    .related-section .prod-info h4 { font-size: 0.82rem; line-height: 1.3; }
    .related-section .prod-price { font-size: 0.78rem; }
    .related-section .prod-cat { font-size: 0.58rem; }
}

/* ---------- SMALL MOBILE (<= 480px) — extra tight ---------- */
@media (max-width: 480px) {
    .page-hero { padding: 3rem 0 2rem !important; }
    .page-hero h1 { font-size: 1.55rem; }
    .page-hero p { font-size: 0.8rem; }

    /* Category carousel even smaller */
    .cat-circle { width: 72px; height: 72px; }
    .cat-item { min-width: 80px; }
    .cat-item span { font-size: 0.56rem; }

    /* Gender heading */
    .gender-head-text h2 { font-size: 1.35rem; }
    .gender-head-text p { font-size: 0.78rem; }

    /* Video + grid — keep 2 col but tiny gap */
    .pg-video-grid { gap: 0.5rem !important; }
    .pg-video-cell { aspect-ratio: 16 / 10 !important; }
    .pg-video-grid .showcase-body h5 { font-size: 0.72rem; }
    .pg-video-grid .showcase-price { font-size: 0.68rem; }

    /* Grow strip */
    .strip-text h3 { font-size: 1.1rem; }
    .strip-text p { font-size: 0.78rem; }

    /* CTA */
    .cta-inner { padding: 2.5rem 1rem !important; }
    .cta-content h2 { font-size: 1.3rem !important; }
    .cta-content p { font-size: 0.8rem; }

    /* Product list grid — keep 2 col, smaller gap */
    .list-grid.pl-grid { gap: 10px !important; }
    .pl-card-info { padding: 0.5rem 0.3rem; }
    .pl-card-price { font-size: 0.72rem; }

    /* Product detail */
    .pd-info h1 { font-size: 1.3rem !important; }
    .pd-info .pd-price { font-size: 1.15rem !important; }
    .pd-tab-btn { font-size: 0.65rem; padding: 0.65rem 0.7rem; }
    .pd-thumb { min-width: 48px; width: 48px; height: 48px; }

    /* Trust badges stacked vertically on tiny screens */
    .pd-trust-item { flex: 1 1 30%; font-size: 0.65rem; }

    /* Related */
    .related-section .prod-grid,
    .related-section .prod-grid-4 { gap: 10px !important; }
    .related-section .prod-info h4 { font-size: 0.75rem; }
}

/* ==========================================================
   MOBILE RESPONSIVE - PHASE 2
   Collections Pages (collections.php, collection.php, collection-product-detail.php)
   ========================================================== */

/* ---- TABLET (<= 992px) ---- */
@media (max-width: 992px) {
    /* collections.php - listing blocks */
    .cl-block { padding: 3.5rem 0 0; }
    .cl-split { gap: 2rem; }
    .cl-title { font-size: 2.2rem; }
    .cl-tagline { font-size: 1rem; }
    .cl-desc { font-size: 0.9rem; }
    .cl-thumbs { gap: 1.5rem; padding: 2.5rem 1rem 3rem; }
    .cl-thumb-img { width: 130px; height: 130px; }
    .cl-block-bg { opacity: 0.5; }

    /* collection.php - detail page */
    .cd-about { padding: 4rem 0; }
    .cd-about-grid { gap: 2.5rem; }
    .cd-about-img { height: 420px; }
    .cd-about-text h2 { font-size: 2rem; }
    .cd-about-desc { font-size: 0.9rem; line-height: 1.8; }
    .cd-highlight { padding: 3rem 0; }
    .cd-highlight-inner { gap: 2.5rem; }
    .cd-highlight-stat strong { font-size: 1.6rem; }
    .cd-editorial { padding: 4rem 0; }
    .cd-editorial-grid { gap: 2.5rem; }
    .cd-editorial-text h3 { font-size: 1.6rem; }

    /* collection-product-detail.php */
    .pd-layout { grid-template-columns: 1fr 1fr; gap: 2.5rem; padding: 2.5rem 0; }
    .pd-gallery { position: static; }
    .pd-thumbs { gap: 0.5rem; }
    .pd-info h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
    .pd-tab-btn { padding: 0.7rem 1rem; font-size: 0.72rem; }

    /* Product grid within collection */
    .prod-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

    /* Related section */
    .related-section { padding: 3rem 0; }
}

/* ---- MOBILE (<= 768px) ---- */
@media (max-width: 768px) {
    /* collections.php - listing blocks */
    .cl-block { padding: 2.5rem 0 0; }
    .cl-block-bg { display: none; } /* disable parallax bg on mobile for performance */
    .cl-split { grid-template-columns: 1fr !important; gap: 1.5rem; min-height: auto; }
    .cl-split-reverse { direction: ltr; }
    .cl-image { order: -1; aspect-ratio: 6 / 5; max-height: 340px; border-radius: 8px; overflow: hidden; }
    .cl-image img { width: 100%; height: 100%; object-fit: cover; }
    .cl-text { padding: 0 1.2rem 1.5rem; text-align: center; }
    .cl-split-reverse .cl-text { padding: 0 1.2rem 1.5rem; }
    .cl-num { font-size: 2.5rem; margin-bottom: 0.5rem; }
    .cl-title { font-size: 1.8rem; line-height: 1.25; margin-bottom: 0.7rem; }
    .cl-tagline { font-size: 0.95rem; margin-bottom: 0.8rem; }
    .cl-desc { font-size: 0.88rem; line-height: 1.7; max-width: 100%; margin: 0 auto 1.2rem; }
    .cl-view { font-size: 0.72rem; padding: 0.6rem 0; min-height: 44px; display: inline-flex; align-items: center; }

    /* horizontal scrollable thumb strip with snap */
    .cl-thumbs {
        gap: 1rem;
        padding: 2rem 1rem 2.5rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .cl-thumbs::-webkit-scrollbar { display: none; }
    .cl-thumb { scroll-snap-align: start; flex: 0 0 auto; }
    .cl-thumb-img { width: 120px; height: 120px; border-radius: 6px; }
    .cl-thumb-name { font-size: 0.6rem; }
    .cl-sep { margin: 2rem auto; width: 60%; }

    /* Page hero (collections.php + collection.php) */
    .page-hero { padding: 4rem 0 2.5rem !important; }
    .page-hero h1 { font-size: 1.8rem !important; line-height: 1.2; }
    .page-hero p { font-size: 0.88rem; line-height: 1.65; padding: 0 1rem; }
    .breadcrumb { flex-wrap: wrap; justify-content: center; font-size: 0.72rem; gap: 0.3rem; row-gap: 0.4rem; }

    /* collection.php - about section */
    .cd-about { padding: 2.8rem 0; }
    .cd-about-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .cd-about-img { height: 260px; border-radius: 8px; }
    .cd-about-img img { border-radius: 8px; }
    .cd-about-text { text-align: center; }
    .cd-about-text h2 { font-size: 1.7rem; line-height: 1.25; }
    .cd-about-tagline { font-size: 0.95rem; }
    .cd-about-line { margin: 0.8rem auto 1rem; }
    .cd-about-desc { font-size: 0.88rem; line-height: 1.75; }
    .cd-about-stats { gap: 1.2rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; }
    .cd-about-stat { flex: 1 1 80px; min-width: 80px; }
    .cd-about-stat strong { font-size: 1.3rem; }
    .cd-about-stat span { font-size: 0.7rem; }

    /* collection.php - highlight strip */
    .cd-highlight { padding: 2rem 0; }
    .cd-highlight-inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1rem;
        flex-wrap: initial;
        text-align: center;
    }
    .cd-highlight-stat strong { font-size: 1.3rem; }
    .cd-highlight-stat span { font-size: 0.7rem; }

    /* collection.php - editorial / craftsmanship */
    .cd-editorial { padding: 2.8rem 0; }
    .cd-editorial-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .cd-editorial-img { height: 240px; border-radius: 8px; }
    .cd-editorial-text { text-align: center; }
    .cd-editorial-text h3 { font-size: 1.5rem; line-height: 1.25; }
    .cd-editorial-text p { font-size: 0.88rem; line-height: 1.75; margin-bottom: 1.2rem; }
    .cd-craft-list li { font-size: 0.85rem; padding: 0.7rem 0; text-align: left; justify-content: flex-start; }

    /* Product grid inside collection */
    .prod-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.9rem; margin-bottom: 2rem; }
    .prod-card .prod-info h4 { font-size: 0.85rem; }
    .prod-card .prod-price { font-size: 0.9rem; }

    /* collection-product-detail.php */
    .pd-layout { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.2rem 0 2rem; }
    .pd-main-img { aspect-ratio: 1/1; border-radius: 6px; }
    .pd-main-img img { cursor: pointer; } /* zoom on hover doesn't apply on touch */
    .pd-360-btn { bottom: 10px; right: 10px; padding: 6px 10px; font-size: 0.65rem; min-height: 36px; }
    .pd-thumbs {
        gap: 0.4rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
    }
    .pd-thumbs::-webkit-scrollbar { display: none; }
    .pd-thumb { flex: 0 0 70px; width: 70px; height: 70px; scroll-snap-align: start; }
    .pd-info { padding-top: 0.5rem; }
    .pd-info .prod-cat { font-size: 0.6rem; }
    .pd-info h1 { font-size: 1.5rem; margin-bottom: 0.5rem; line-height: 1.25; }
    .pd-info .pd-price { font-size: 1.25rem; margin-bottom: 1rem; }
    .pd-info .pd-price .old-price { font-size: 0.9rem; margin-left: 0.5rem; }

    /* Tabs: horizontal scroll */
    .pd-tabs { margin-top: 1rem; }
    .pd-tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .pd-tab-nav::-webkit-scrollbar { display: none; }
    .pd-tab-btn { padding: 0.7rem 0.9rem; font-size: 0.68rem; white-space: nowrap; flex-shrink: 0; min-height: 44px; }
    .pd-tab-content { padding: 1rem 0; font-size: 0.85rem; line-height: 1.75; }

    /* Specs table readable on mobile */
    .pd-specs { display: block; }
    .pd-spec-row {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        padding: 0.7rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .pd-spec-row .spec-label { font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); }
    .pd-spec-row .spec-value { font-size: 0.88rem; color: var(--black); }

    /* Packaging tab */
    .pd-pkg-item { padding: 0.9rem 0; }
    .pd-pkg-top { gap: 0.7rem; }
    .pd-pkg-img { width: 54px; height: 54px; }
    .pd-pkg-info strong { font-size: 0.78rem; }
    .pd-pkg-info p { font-size: 0.7rem; }
    .pd-pkg-bottom { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .pd-pkg-select { width: 100%; padding: 0.7rem; font-size: 0.8rem; min-height: 44px; }
    .pd-pkg-add { width: 100%; padding: 0.8rem; font-size: 0.72rem; min-height: 44px; }

    /* Actions: stack full-width */
    .pd-actions { flex-direction: column; gap: 0.7rem; margin-bottom: 1.5rem; }
    .pd-actions .btn-enquire,
    .pd-actions .btn-wa { width: 100%; padding: 0.95rem; font-size: 0.78rem; min-height: 48px; }

    /* Trust row */
    .pd-trust { flex-wrap: wrap; gap: 0.8rem 1.2rem; padding: 1.2rem 0; justify-content: center; }
    .pd-trust-item { font-size: 0.75rem; }

    /* Address / enquiry form: 2col -> 1col (inline grid overrides) */
    #cpAddressForm { padding: 1.2rem !important; }
    #cpAddressForm h4 { font-size: 1rem !important; margin-bottom: 1rem !important; }
    #cpAddressForm form div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 10px !important; }
    #cpAddressForm input,
    #cpAddressForm textarea { font-size: 0.9rem !important; padding: 12px 10px !important; min-height: 44px; }
    #cpAddressForm textarea { min-height: 72px; }
    #cpAddressForm button[type="submit"] { width: 100%; padding: 1rem !important; font-size: 0.78rem !important; min-height: 48px; }

    /* Related section */
    .related-section { padding: 2.5rem 0; }
    .related-section .section-head h2 { font-size: 1.5rem; }

    /* CTA section - reinforce stacked full-width */
    .cta-section { padding: 3rem 0 !important; }
    .cta-btns { flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .cta-btns .btn-cta-primary,
    .cta-btns .btn-cta-wa { width: 100%; max-width: 100%; padding: 0.95rem; font-size: 0.78rem; min-height: 48px; justify-content: center; }
}

/* ---- SMALL MOBILE (<= 480px) ---- */
@media (max-width: 480px) {
    /* collections.php */
    .cl-block { padding: 2rem 0 0; }
    .cl-image { max-height: 280px; }
    .cl-text { padding: 0 1rem 1.2rem; }
    .cl-num { font-size: 2rem; }
    .cl-title { font-size: 1.5rem; }
    .cl-tagline { font-size: 0.88rem; }
    .cl-desc { font-size: 0.82rem; }
    .cl-thumbs { gap: 0.8rem; padding: 1.5rem 1rem 2rem; }
    .cl-thumb-img { width: 100px; height: 100px; }
    .cl-thumb-name { font-size: 0.55rem; letter-spacing: 1px; }

    /* collection.php */
    .page-hero h1 { font-size: 1.55rem !important; }
    .cd-about { padding: 2.2rem 0; }
    .cd-about-img { height: 220px; }
    .cd-about-text h2 { font-size: 1.45rem; }
    .cd-about-stat strong { font-size: 1.15rem; }
    .cd-highlight-stat strong { font-size: 1.1rem; }
    .cd-highlight-stat span { font-size: 0.65rem; }
    .cd-editorial-img { height: 200px; }
    .cd-editorial-text h3 { font-size: 1.3rem; }

    /* Product grid: still 2 cols but tighter */
    .prod-grid { gap: 0.7rem; }
    .prod-card .prod-info { padding: 0.7rem; }
    .prod-card .prod-info h4 { font-size: 0.78rem; }
    .prod-card .prod-price { font-size: 0.82rem; }

    /* collection-product-detail.php */
    .pd-layout { padding: 1rem 0 1.5rem; }
    .pd-info h1 { font-size: 1.3rem; }
    .pd-info .pd-price { font-size: 1.1rem; }
    .pd-thumb { flex: 0 0 60px; width: 60px; height: 60px; }
    .pd-tab-btn { padding: 0.6rem 0.7rem; font-size: 0.62rem; letter-spacing: 0.5px; }
    .pd-spec-row .spec-value { font-size: 0.82rem; }
    .related-section .section-head h2 { font-size: 1.3rem; }
}

/* ==========================================================
   MOBILE RESPONSIVE - PHASE 2
   About / Services / B2B Pages
   ========================================================== */

/* ---------- TABLET (max 992px) ---------- */
@media (max-width: 992px) {
    /* Page Hero - all 3 pages */
    .page-hero { padding: 5rem 0 3rem !important; }
    .page-hero h1 { font-size: 2.4rem; line-height: 1.15; }
    .page-hero p { font-size: 0.95rem; }

    /* ABOUT - Stats stay 4 col but tighter */
    .about-stats { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .about-stats .counter-val { font-size: 2rem; }
    .about-stats .counter p { font-size: 0.75rem; }

    /* ABOUT - Values 3/4 col -> 2 col */
    .about-values-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem; }

    /* ABOUT - Capabilities 2 col on tablet */
    .cap-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

    .about-grid { gap: 2rem; }

    /* SERVICES - Stats 4 col tighter */
    .svc-stats { gap: 1rem; }
    .svc-stats .stat-val { font-size: 2rem; }
    .svc-stats .stat-label { font-size: 0.75rem; }

    /* SERVICES - rows tighter */
    .svc-row, .svc-row.reverse { gap: 2rem; }
    .svc-row h2 { font-size: 1.8rem; }
    .svc-section { padding: 3.5rem 0; }

    /* SERVICES - Process steps 4 -> 2 col */
    .process-steps { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .process-strip { padding: 4rem 0; }

    .promise-grid { gap: 1.5rem; }
    .promise { padding: 3.5rem 0; }

    .grow-strip .strip-inner { gap: 1.5rem; }

    /* B2B - Mfg detail tighter */
    .mfg-detail, .mfg-detail.reverse { gap: 2rem; }
    .mfg-detail-content h3 { font-size: 1.55rem !important; }

    /* B2B - Partner steps 5 col -> 2 col */
    .partner-steps { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem; }
}

/* ---------- MOBILE (max 768px) ---------- */
@media (max-width: 768px) {
    /* Page Hero */
    .page-hero { padding: 4rem 0 2.5rem !important; }
    .page-hero h1 { font-size: 2rem; line-height: 1.15; }
    .page-hero p { font-size: 0.9rem; line-height: 1.6; }
    .page-hero .label { font-size: 0.7rem; }
    .breadcrumb { font-size: 0.75rem; }

    /* ======= ABOUT PAGE ======= */

    /* Story grid stacks */
    .about-grid { grid-template-columns: 1fr !important; gap: 2rem; }
    .about-left, .about-right, .about-visual { width: 100%; }
    .about-text h2 { font-size: 1.7rem; line-height: 1.25; }
    .about-text p { font-size: 0.9rem; line-height: 1.75; }
    .about-section { padding: 3rem 0; }
    .about-visual img { width: 100%; height: auto; }
    .about-visual-badge { padding: 0.75rem 1rem; }
    .about-visual-badge strong { font-size: 1.5rem; }

    /* Stats 4 -> 2x2 */
    .about-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; margin-top: 1.5rem; }
    .about-stats .counter { padding: 1rem 0.5rem; min-height: 44px; }
    .about-stats .counter-val { font-size: 1.7rem; }
    .about-stats .counter-val sup { font-size: 0.9rem; }
    .about-stats .counter p { font-size: 0.7rem; line-height: 1.3; }

    /* Timeline - single column left-aligned */
    .timeline { padding-left: 40px; }
    .timeline::before { left: 20px !important; right: auto !important; transform: none !important; }
    .timeline-item { display: block !important; margin-bottom: 2rem; position: relative; }
    .timeline-content-left, .timeline-content-right {
        width: 100% !important; text-align: left !important;
        padding: 0 !important; margin-left: 0 !important;
    }
    .timeline-content-left:empty, .timeline-content-right:empty { display: none; }
    .timeline-dot {
        position: absolute !important;
        left: -40px !important;
        top: 0 !important;
        transform: none !important;
        margin: 0 !important;
    }
    .timeline-dot .tl-year { font-size: 0.7rem; }
    .timeline-item h4 { font-size: 1.05rem; margin-bottom: 0.4rem; }
    .timeline-item p { font-size: 0.85rem; line-height: 1.65; }

    /* Values 3 -> 1 col */
    .about-values-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .values-section { padding: 3rem 0 !important; }
    .why-card { padding: 1.5rem !important; }
    .why-card h4 { font-size: 1.05rem; }
    .why-card p { font-size: 0.85rem; line-height: 1.65; }

    /* Capabilities 1 col */
    .cap-grid { grid-template-columns: 1fr !important; gap: 1rem; }
    .cap-card { padding: 1.5rem; }
    .cap-card h4 { font-size: 1.05rem; }
    .cap-card p { font-size: 0.85rem; line-height: 1.65; }

    /* Section headings */
    .section-head h2 { font-size: 1.7rem !important; line-height: 1.2; }
    .section-head .label { font-size: 0.7rem; }
    .section-head p.section-sub { font-size: 0.85rem; }

    /* CTA section */
    .cta-section { padding: 3rem 0; }
    .cta-content h2 { font-size: 1.7rem; line-height: 1.25; }
    .cta-content p { font-size: 0.9rem; }
    .cta-btns { flex-direction: column; gap: 0.75rem; width: 100%; }
    .btn-cta-primary, .btn-cta-wa {
        width: 100%; justify-content: center;
        min-height: 48px; padding: 0.9rem 1.25rem;
        font-size: 0.85rem;
    }

    /* ======= SERVICES PAGE ======= */

    /* Stats 4 -> 2x2 */
    .svc-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; padding: 1.5rem 0; }
    .svc-stats .svc-stat { padding: 1rem 0.5rem; }
    .svc-stats .stat-val { font-size: 1.7rem; }
    .svc-stats .stat-label { font-size: 0.7rem; }

    /* Service rows stack - image above text */
    .svc-section { padding: 2.5rem 0; }
    .svc-row, .svc-row.reverse {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .svc-row .svc-row-img { order: 1 !important; width: 100%; }
    .svc-row .svc-row-text { order: 2 !important; width: 100%; }
    .svc-row-img img { width: 100%; height: auto; border-radius: 6px; }
    .svc-row h2 { font-size: 1.55rem; line-height: 1.25; }
    .svc-row p { font-size: 0.9rem; line-height: 1.7; }
    .svc-row ul { padding-left: 0; list-style: none; }
    .svc-row ul li {
        font-size: 0.85rem; line-height: 1.6;
        position: relative; padding-left: 22px;
        margin-bottom: 0.6rem;
    }
    .svc-row ul li::before {
        content: ''; position: absolute; left: 0; top: 0.45em;
        width: 10px; height: 10px; border-radius: 50%;
        border: 1.5px solid var(--primary); background: transparent;
    }
    .svc-icon { width: 44px; height: 44px; }
    .svc-label { font-size: 0.7rem; }
    .svc-btn {
        display: inline-block; width: 100%;
        text-align: center; padding: 0.85rem 1rem;
        min-height: 44px; font-size: 0.85rem;
    }

    /* Mini grid */
    .svc-mini-grid { grid-template-columns: 1fr !important; gap: 1rem; }

    /* Process steps 4 -> 1 col */
    .process-steps { grid-template-columns: 1fr !important; gap: 1.5rem; }
    .process-strip { padding: 3rem 0; }
    .process-step { padding: 1.5rem; }
    .process-step h4 { font-size: 1rem; }
    .process-step p { font-size: 0.85rem; line-height: 1.6; }
    .step-num { font-size: 2rem; }

    /* Promise grid 4 -> 2x2 */
    .promise { padding: 3rem 0; }
    .promise h2 { font-size: 1.6rem; }
    .promise-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
    .promise-item { padding: 1rem; }
    .promise-item svg { width: 42px; height: 42px; }
    .promise-item h5 { font-size: 0.8rem; line-height: 1.3; }

    /* Grow strip stacked */
    .grow-strip { padding: 2.5rem 0; }
    .grow-strip .strip-inner {
        flex-direction: column !important;
        text-align: center; gap: 1.25rem;
        padding: 1.75rem 1.25rem;
    }
    .grow-strip .strip-text h3 { font-size: 1.3rem; line-height: 1.3; }
    .grow-strip .strip-text p { font-size: 0.85rem; }
    .btn-strip {
        width: 100%; min-height: 48px;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0.9rem 1rem; font-size: 0.85rem;
    }

    /* ======= B2B PAGE ======= */

    /* Why carousel - 1 card visible */
    .why-us { padding: 3rem 0; }
    .why-carousel-wrap { gap: 0 !important; padding: 0 10px; }
    .why-carousel { flex: 1; overflow: hidden; }
    .why-carousel .why-track { gap: 0; }
    .why-carousel .why-card {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        padding: 1.5rem !important;
    }
    .why-nav {
        width: 36px; height: 36px;
        min-width: 36px;
        -webkit-tap-highlight-color: transparent;
    }
    .why-nav svg { width: 14px; height: 28px; }
    .why-dots { margin-top: 1.25rem; }

    /* Mfg detail stack - image above, content below */
    .mfg-detail-section { padding: 2.5rem 0; }
    .mfg-detail, .mfg-detail.reverse {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .mfg-detail .mfg-detail-gallery { order: 1 !important; width: 100%; }
    .mfg-detail .mfg-detail-content { order: 2 !important; width: 100%; }
    .mfg-gallery-main img { width: 100%; height: auto; border-radius: 6px; }
    .mfg-detail-num { font-size: 2.5rem !important; top: 10px; right: 10px; }
    .mfg-gallery-thumbs { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem; }
    .mfg-thumb img { width: 100%; height: 70px; object-fit: cover; border-radius: 4px; }
    .mfg-detail-content h3 { font-size: 1.4rem !important; line-height: 1.25; }
    .mfg-detail-content p { font-size: 0.9rem !important; line-height: 1.7 !important; }
    .mfg-card-icon { width: 48px; height: 48px; }

    /* mfg features */
    .mfg-detail-features {
        display: flex; flex-direction: column;
        gap: 0.5rem; margin-bottom: 1.25rem;
    }
    .mfg-feat {
        font-size: 0.85rem; line-height: 1.5;
        display: flex; align-items: flex-start; gap: 0.5rem;
    }
    .mfg-feat svg { flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; }

    /* Tags wrap */
    .mfg-tags { flex-wrap: wrap !important; gap: 0.4rem !important; }
    .mfg-tags span {
        font-size: 0.7rem; padding: 0.35rem 0.7rem;
    }

    /* Mfg actions stacked full width */
    .mfg-detail-actions {
        display: flex !important; flex-direction: column;
        gap: 0.75rem; width: 100%;
    }
    .mfg-detail-actions .btn-primary,
    .mfg-detail-actions .mfg-pdf-btn {
        width: 100%; justify-content: center;
        text-align: center; min-height: 44px;
        padding: 0.8rem 1rem; font-size: 0.85rem;
        display: inline-flex; align-items: center;
    }

    /* MOQ info */
    .moq-info-strip h3 { font-size: 1.25rem !important; line-height: 1.4; }
    .moq-info-strip p { font-size: 0.85rem !important; }
    .moq-info-strip .btn-primary {
        width: 100%; text-align: center;
        min-height: 48px; padding: 0.9rem 1rem;
        font-size: 0.85rem;
    }

    /* Partner steps 5 col -> 1 col vertical numbered */
    .partner-steps {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        counter-reset: step;
    }
    .partner-step {
        padding: 1.25rem 1.25rem 1.25rem 3.75rem !important;
        position: relative;
        counter-increment: step;
    }
    .partner-step::before {
        content: counter(step, decimal-leading-zero);
        position: absolute;
        left: 1.25rem; top: 1.25rem;
        font-family: 'Playfair Display', serif;
        font-size: 1.5rem;
        color: var(--primary);
        font-weight: 600;
    }
    .partner-step h5 { font-size: 1rem; margin-bottom: 0.4rem; }
    .partner-step p { font-size: 0.85rem; line-height: 1.6; }

    /* B2B Testimonials 1 per view */
    section > .container > div[style*="grid-template-columns: repeat"][style*="1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Generic section padding reductions */
    section[style*="padding: 4rem 0"] { padding: 2.5rem 0 !important; }
    section[style*="padding: 5rem 0"] { padding: 3rem 0 !important; }
}

/* ---------- SMALL MOBILE (max 480px) ---------- */
@media (max-width: 480px) {
    .container { padding-left: 1rem; padding-right: 1rem; }

    .page-hero h1 { font-size: 1.7rem; }
    .page-hero p { font-size: 0.85rem; }

    .section-head h2 { font-size: 1.45rem !important; }

    /* Stats tighter */
    .about-stats .counter-val { font-size: 1.5rem; }
    .about-stats .counter p { font-size: 0.65rem; }
    .svc-stats .stat-val { font-size: 1.5rem; }
    .svc-stats .stat-label { font-size: 0.65rem; }

    /* Timeline spacing */
    .timeline { padding-left: 32px; }
    .timeline::before { left: 14px !important; }
    .timeline-dot { left: -32px !important; width: 28px; height: 28px; }
    .timeline-dot .tl-year { font-size: 0.6rem; }

    /* Service rows */
    .svc-row h2 { font-size: 1.35rem; }
    .svc-section { padding: 2rem 0; }

    /* Mfg detail */
    .mfg-detail-content h3 { font-size: 1.2rem !important; }
    .mfg-gallery-thumbs { grid-template-columns: repeat(2, 1fr) !important; }

    /* Promise 2x2 tighter */
    .promise-grid { gap: 0.75rem; }
    .promise-item svg { width: 36px; height: 36px; }

    /* CTA */
    .cta-content h2 { font-size: 1.45rem; }

    /* Cards */
    .why-card, .cap-card { padding: 1.25rem !important; }
    .why-card h4, .cap-card h4 { font-size: 1rem; }

    /* Partner step */
    .partner-step { padding-left: 3.25rem !important; }
    .partner-step::before { font-size: 1.3rem; }
}

/* ==========================
   MOBILE RESPONSIVE - PHASE 2
   Custom Order / Contact / 404 / Search
   ========================== */

/* ───────── TABLET (≤992px) ───────── */
@media (max-width: 992px) {
    /* Custom Order: Categories 3-col → 2-col */
    .co-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .co-cat-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 520px; margin: 0 auto; }
    .co-cat-img { height: 220px; }
    .co-cat-body { padding: 1.5rem; }
    .co-cat-body h3 { font-size: 1.3rem; }

    /* Materials 4-col → 3-col */
    .materials-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

    /* Stories alternating — tighter gap */
    .co-story { gap: 2rem; }
    .co-story-content h3 { font-size: 1.6rem; }
    .co-story-collage { gap: 8px; }

    /* Contact grid: stack */
    .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .contact-form, .contact-info { padding: 2rem; }

    /* Search: collection grid */
    .search-collection-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }

    /* Form padding */
    .co-form-card { padding: 2rem 1.5rem; }
    .co-form-card .form-row { gap: 1rem; }
}

/* ───────── MOBILE (≤768px) ───────── */
@media (max-width: 768px) {
    /* ====== PAGE HERO ====== */
    .page-hero { padding: 4rem 0 2.5rem !important; }
    .page-hero h1 { font-size: 1.8rem; line-height: 1.25; }
    .page-hero p { font-size: 0.85rem; line-height: 1.6; }
    .page-hero .label { font-size: 0.65rem; letter-spacing: 2px; }
    .page-hero .breadcrumb { font-size: 0.7rem; }

    /* Custom Order Hero CTA */
    .co-hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.9rem 1.6rem;
        font-size: 0.75rem;
        min-height: 44px;
        white-space: nowrap;
    }

    /* ====== CUSTOM ORDER — CATEGORIES (1 col) ====== */
    .co-cat-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .co-cat-card:last-child:nth-child(odd) { max-width: 100%; }
    .co-cat-img { height: 200px; }
    .co-cat-body { padding: 1.5rem 1.2rem; }
    .co-cat-body h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
    .co-cat-body p { font-size: 0.85rem; }
    .co-cat-icon { width: 52px; height: 52px; }
    .co-cat-icon svg { width: 28px; height: 28px; }
    .co-cat-list li {
        font-size: 0.82rem;
        padding-left: 1.5rem;
        line-height: 1.5;
        margin-bottom: 0.4rem;
    }
    .co-cat-list li::before { left: 0; top: 2px; }
    .co-cat-btn {
        width: 100%;
        text-align: center;
        padding: 0.85rem 1rem;
        font-size: 0.72rem;
        min-height: 44px;
        justify-content: center;
        display: inline-flex;
        align-items: center;
    }

    /* ====== CUSTOM ORDER — PROCESS STEPS (stack) ====== */
    .hiw-journey { padding: 1rem 0; }
    .hiw-row,
    .hiw-row.hiw-reverse {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        margin-bottom: 2.5rem;
    }
    .hiw-row.hiw-reverse .hiw-img { order: 1; }
    .hiw-row.hiw-reverse .hiw-text { order: 2; }
    .hiw-img { height: 220px; border-radius: 6px; }
    .hiw-text { padding: 0.5rem 0.2rem; }
    .hiw-text h3 { font-size: 1.3rem; margin: 0.4rem 0 0.7rem; }
    .hiw-ghost-num { font-size: 4rem; top: -20px; left: -5px; }
    .hiw-detail p { font-size: 0.85rem; line-height: 1.65; }

    /* ====== CUSTOM ORDER — MATERIALS (2 col) ====== */
    .materials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.9rem;
    }
    .material-card img { height: 130px; }
    .material-card-body { padding: 0.9rem 0.8rem; }
    .material-card-body h4 { font-size: 0.95rem; }
    .material-card-body p { font-size: 0.75rem; line-height: 1.5; }

    /* ====== CUSTOM ORDER — STORIES (stack) ====== */
    .co-story,
    .co-story.reverse {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 0.2rem;
    }
    .co-story.reverse .co-story-collage { order: 1; }
    .co-story.reverse .co-story-content { order: 2; }
    .co-story-collage {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .co-collage-img { height: 150px; }
    .co-collage-label { font-size: 9px; padding: 3px 8px; }
    .co-story-content { padding: 0.5rem 0; text-align: center; }
    .co-story-content .co-cat-icon { margin: 0 auto 0.6rem; }
    .co-story-content .label { font-size: 0.65rem; }
    .co-story-content h3 { font-size: 1.5rem; margin: 0.5rem 0 0.8rem; }
    .co-story-text { font-size: 0.85rem; line-height: 1.65; }
    .co-story-num { font-size: 3.5rem; top: -15px; right: 0; }
    .co-story-stats {
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .co-stat strong { font-size: 1.1rem; }
    .co-stat span { font-size: 0.7rem; }
    .co-story-price { font-size: 1rem; }
    .co-story-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.85rem 1rem;
        font-size: 0.72rem;
        min-height: 44px;
    }
    .co-story-nav { width: 38px; height: 38px; }
    .co-story-nav svg { width: 14px; height: 28px; }
    .co-story-prev { left: -5px; }
    .co-story-next { right: -5px; }

    /* ====== CUSTOM ORDER — FAQ ====== */
    .faq-question {
        font-size: 0.85rem;
        padding: 1rem 2.5rem 1rem 1rem;
        min-height: 52px;
        line-height: 1.45;
    }
    .faq-answer p {
        font-size: 0.85rem;
        line-height: 1.65;
        padding: 0 1rem 1rem;
    }

    /* ====== CUSTOM ORDER — FORM (2col → 1col) ====== */
    .co-form-card {
        padding: 1.5rem 1.2rem;
        border-radius: 8px;
    }
    .co-form-card .form-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }
    .co-form-card .form-group { margin-bottom: 1.1rem; }
    .co-form-card label {
        font-size: 0.75rem;
        margin-bottom: 0.4rem;
        display: block;
    }
    .co-form-card input[type="text"],
    .co-form-card input[type="email"],
    .co-form-card input[type="tel"],
    .co-form-card input[type="number"],
    .co-form-card input[type="date"],
    .co-form-card select,
    .co-form-card textarea {
        width: 100%;
        min-height: 46px;
        padding: 0.75rem 0.9rem;
        font-size: 0.9rem;
        box-sizing: border-box;
    }
    .co-form-card textarea { min-height: 110px; resize: vertical; }
    .co-form-card input[type="file"] {
        min-height: 46px;
        font-size: 0.82rem;
    }
    .co-submit-btn {
        width: 100%;
        padding: 1rem;
        min-height: 48px;
        font-size: 0.78rem;
        letter-spacing: 1.5px;
    }

    /* CTA section */
    .cta-section { padding: 3rem 0; }
    .cta-inner { padding: 2rem 1.2rem; }
    .cta-content h2 { font-size: 1.6rem; }
    .cta-content p { font-size: 0.88rem; }
    .cta-btns {
        flex-direction: column;
        gap: 0.8rem;
        align-items: stretch;
    }
    .cta-btns .btn-view-all,
    .cta-btns .btn-cta-wa {
        width: 100%;
        text-align: center;
        justify-content: center;
        min-height: 48px;
        padding: 0.9rem 1rem;
        display: inline-flex;
        align-items: center;
    }

    /* Section heads general */
    .section-head h2 { font-size: 1.5rem; line-height: 1.3; }
    .section-head .section-sub,
    .section-head p { font-size: 0.85rem; }
    .section-head .label { font-size: 0.65rem; letter-spacing: 2px; }

    /* ====== CONTACT PAGE ====== */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .contact-form,
    .contact-info {
        padding: 1.5rem 1.2rem;
        border-radius: 8px;
    }
    .contact-form h3,
    .contact-info h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
    .contact-form > p,
    .contact-info > p { font-size: 0.85rem; margin-bottom: 1.2rem; }
    .contact-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }
    .contact-form .form-group { margin-bottom: 1rem; }
    .contact-form label { font-size: 0.75rem; }
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        width: 100%;
        min-height: 46px;
        padding: 0.75rem 0.9rem;
        font-size: 0.9rem;
        box-sizing: border-box;
    }
    .contact-form textarea { min-height: 110px; }
    .contact-form button[type="submit"] {
        width: 100% !important;
        min-height: 48px;
        padding: 1rem !important;
    }

    .contact-detail {
        flex-direction: row;
        gap: 0.9rem;
        padding: 0.9rem 0;
        align-items: flex-start;
    }
    .cd-icon {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
    }
    .cd-icon svg { width: 20px; height: 20px; }
    .contact-detail h5 { font-size: 0.95rem; margin-bottom: 0.2rem; }
    .contact-detail a,
    .contact-detail p { font-size: 0.82rem; word-break: break-word; }

    .social-row {
        justify-content: center;
        gap: 0.8rem;
        margin-top: 1.2rem;
    }
    .social-btn { width: 44px; height: 44px; }

    .map-strip { padding: 3rem 0; }
    .map-placeholder { padding: 2rem 1.2rem; }
    .map-placeholder p { font-size: 0.85rem; line-height: 1.5; }

    /* Quick links strip — 2 col on mobile */
    section .container > div[style*="grid-template-columns: repeat"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.7rem !important;
    }

    /* ====== 404 PAGE ====== */
    .error-page {
        padding: 3rem 1.2rem 2.5rem !important;
        min-height: 65vh !important;
    }
    .error-number {
        font-size: 7rem !important;
        margin-bottom: -1rem;
        -webkit-text-stroke-width: 1.5px;
    }
    .error-title { font-size: 1.6rem !important; margin-bottom: 0.8rem; }
    .error-desc {
        font-size: 0.85rem;
        line-height: 1.65;
        margin-bottom: 1.8rem;
        padding: 0 0.5rem;
    }
    .error-links {
        flex-direction: column;
        gap: 0.6rem;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    .error-links a {
        width: 100%;
        text-align: center;
        padding: 0.85rem 1rem !important;
        font-size: 0.7rem !important;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .error-divider { margin-bottom: 1.2rem; }

    /* ====== SEARCH PAGE ====== */
    .search-page {
        padding: 4rem 0 2.5rem !important;
    }
    .search-header { margin-bottom: 2rem; }
    .search-header h1 { font-size: 1.6rem !important; }
    .search-form {
        max-width: 100%;
        margin: 0 0.2rem 1rem;
    }
    .search-form input {
        font-size: 0.85rem;
        padding: 0.85rem 1rem;
        min-height: 46px;
    }
    .search-form button {
        padding: 0.85rem 1.2rem;
        font-size: 0.7rem;
        min-height: 46px;
        white-space: nowrap;
    }
    .search-meta { font-size: 0.78rem; padding: 0 1rem; }
    .search-section { margin-bottom: 2rem; }
    .search-section-title {
        font-size: 0.65rem;
        margin-bottom: 1rem;
        padding-bottom: 0.6rem;
    }
    /* Products: 4→2 col */
    .search-page .prod-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    .search-collection-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .search-collection-card-info { padding: 0.9rem 1rem 1rem; }
    .search-collection-card-info h4 { font-size: 0.95rem; }
    .search-collection-card-info p { font-size: 0.75rem; }

    .no-results { padding: 2.5rem 1rem; }
    .no-results h2 { font-size: 1.35rem; }
    .no-results p { font-size: 0.85rem; padding: 0 0.5rem; }
    .no-results .suggestion-links {
        flex-direction: column;
        gap: 0.6rem;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    .no-results .suggestion-links a {
        width: 100%;
        text-align: center;
        padding: 0.85rem 1rem !important;
        min-height: 44px;
        font-size: 0.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ───────── SMALL MOBILE (≤480px) ───────── */
@media (max-width: 480px) {
    .page-hero { padding: 3.5rem 0 2rem !important; }
    .page-hero h1 { font-size: 1.6rem; }
    .page-hero p { font-size: 0.82rem; }

    .co-cat-img { width: 100%; height: auto; aspect-ratio: 16/10; }
    .co-cat-body h3 { font-size: 1.2rem; }
    .hiw-img { height: 180px; }
    .hiw-text h3 { font-size: 1.2rem; }

    .materials-grid { gap: 0.7rem; }
    .material-card img { height: 110px; }
    .material-card-body { padding: 0.75rem 0.7rem; }
    .material-card-body h4 { font-size: 0.9rem; }
    .material-card-body p { font-size: 0.72rem; }

    .co-story-collage { grid-template-columns: 1fr; }
    .co-collage-img { height: 180px; }
    .co-story-content h3 { font-size: 1.35rem; }

    .faq-question { font-size: 0.82rem; padding: 0.9rem 2.2rem 0.9rem 0.9rem; }

    .co-form-card { padding: 1.2rem 1rem; }
    .contact-form, .contact-info { padding: 1.2rem 1rem; }

    .error-number { font-size: 5.5rem !important; }
    .error-title { font-size: 1.4rem !important; }

    .search-form { flex-direction: column; border-radius: 6px; }
    .search-form input { border-bottom: 1px solid rgba(0,0,0,0.08); }
    .search-form button { width: 100%; }
    .search-header h1 { font-size: 1.45rem !important; }
    .search-page .prod-grid { gap: 0.6rem; }

    section .container > div[style*="grid-template-columns: repeat"] {
        grid-template-columns: 1fr !important;
    }

    .cta-content h2 { font-size: 1.4rem; }
    .cta-content p { font-size: 0.82rem; }
    .cta-inner { padding: 1.8rem 1rem; }

    .section-head h2 { font-size: 1.35rem; }
}



/* ==========================================================
   MOBILE RESPONSIVE - PHASE 2
   Homepage + Header + Footer refinements
   Mobile = app-like style, Tablet = compressed desktop
   ========================================================== */

/* ----------------------------------------------------------
   TABLET (max-width: 992px) — compressed desktop
   ---------------------------------------------------------- */
@media (max-width: 992px) {
    /* Container tightening */
    .container { padding: 0 24px; }

    /* Header — reduce nav gaps */
    .header-wrap { padding: 12px 20px; }
    .nav-left, .nav-right { gap: 1rem; }
    .nav-left > a, .nav-right > a { font-size: 0.7rem; letter-spacing: 1.5px; }
    .logo-img { height: 40px; }
    .currency-toggle { padding: 6px 8px; }
    .currency-label { font-size: 0.65rem; }

    /* Hero slider tablet */
    .hero { height: 85vh; min-height: 480px; }
    .slide-content { width: 80%; }
    .slide-content h1 { font-size: 2.6rem; }
    .slide-content p { font-size: 0.95rem; }

    /* Section heads tighter */
    .section-head h2 { font-size: 2rem; }

    /* Pillars — 2 col tablet */
    .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }

    /* Showcase — 3 col tablet */
    .showcase-grid.active { grid-template-columns: repeat(3, 1fr); gap: 1rem; }

    /* Why us — 2 cards visible tablet */
    .why-card { width: calc(50% - 0.5rem); min-width: calc(50% - 0.5rem); }

    /* About stats */
    .about-stats { gap: 0.8rem; }
    .about-text h2 { font-size: 2rem; }

    /* Collections carousel tablet */
    .col-carousel { height: 480px; }
    .col-panel h3 { font-size: 1.9rem; }

    /* Testimonials — hide side previews */
    .test-preview { display: none; }
    .test-main { padding: 2rem 1.5rem; }

    /* CTA tablet */
    .cta-inner { padding: 4.5rem 2rem; }
    .cta-content h2 { font-size: 2.2rem; }

    /* Footer — 3 column tablet */
    .footer-main { grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; padding: 3rem 2rem; }
}

/* ----------------------------------------------------------
   TABLET HEADER (769px–1024px) — hamburger layout
   Desktop nav gets cramped in this range, so switch to a
   clean 3-zone header: currency (left area) · logo (center) · hamburger
   ---------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .header-wrap {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 12px 24px !important;
        grid-template-columns: none;
        position: relative;
        min-height: 80px;
    }
    .nav-left { display: none !important; }
    .nav-right > a { display: none !important; }
    .nav-right {
        display: flex !important;
        gap: 0;
        align-items: center;
        margin: 0;
        padding: 0;
    }
    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .logo-img { height: 42px !important; }
    .crafted-tag { font-size: 8px; letter-spacing: 2.5px; margin-top: 3px; }
    .currency-wrapper { display: block !important; }
    .currency-toggle {
        padding: 7px 10px;
        gap: 6px;
    }
    .currency-flag { width: 18px; height: 18px; }
    .currency-label { font-size: 0.68rem; letter-spacing: 0.3px; }
    .mobile-menu {
        display: flex !important;
        width: 44px;
        height: 44px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        margin-left: 10px;
    }
    .mobile-menu span {
        width: 22px;
        height: 1.8px;
        background: #1a1a2e;
        border-radius: 2px;
    }
}

/* ----------------------------------------------------------
   MOBILE (max-width: 768px) — app-like style
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    /* === Global typography baseline === */
    body { font-size: 0.9rem; }

    /* === HEADER === */
    .header-wrap {
        padding: 10px 14px;
        position: relative;
    }
    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .logo-img { height: 32px; }
    .crafted-tag { display: none; }

    /* Hide currency on mobile (declutter) */
    .currency-wrapper { display: none; }

    /* Hamburger proper touch target */
    .mobile-menu {
        width: 44px;
        height: 44px;
        justify-content: center;
        align-items: center;
        margin-left: auto;
    }

    /* Mobile nav drawer — wider + bigger targets */
    .mobile-nav { width: 84%; max-width: 320px; }
    .mobile-nav-links a {
        padding: 14px 14px;
        font-size: 0.95rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* === FLOATING WHATSAPP === */
    .whatsapp-btn { width: 50px; height: 50px; bottom: 14px; right: 14px; }
    .whatsapp-btn svg { width: 24px; height: 24px; }
    .scroll-top { width: 44px; height: 44px; bottom: 76px; right: 16px; }

    /* === HERO === */
    .hero { height: 78vh; min-height: 440px; }
    .slide-content { width: 92%; padding: 0 8px; }
    .slide-tag { font-size: 0.6rem; letter-spacing: 2px; margin-bottom: 0.6rem; }
    .slide-content h1 { font-size: 1.9rem; line-height: 1.2; margin-bottom: 0.7rem; }
    .slide-content p { font-size: 0.85rem; line-height: 1.55; margin-bottom: 1.2rem; }
    .slide-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        width: 100%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    .btn-hero, .btn-hero-outline {
        width: 100%;
        padding: 0.95rem 1.2rem;
        font-size: 0.72rem;
        text-align: center;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }
    .hero-progress { display: none; }

    /* === MARQUEE — smaller + faster === */
    .marquee-track { animation-duration: 18s; gap: 1.2rem; }
    .marquee-track span { font-size: 0.65rem; letter-spacing: 1.5px; }
    .tag-b2b { font-size: 0.65rem !important; letter-spacing: 1.5px !important; }

    /* === SECTION HEADS === */
    .section-head { margin-bottom: 1.5rem; }
    .section-head .label { font-size: 0.6rem; letter-spacing: 2px; }
    .section-head h2 { font-size: 1.6rem; line-height: 1.2; }
    .section-sub { font-size: 0.85rem; line-height: 1.55; padding: 0 5px; }
    .deco { margin-top: 0.8rem; }

    /* === PILLARS — 1 col === */
    .products-hero { padding: 2.2rem 0 2.5rem; }
    .pillars-grid { grid-template-columns: 1fr; gap: 1rem; }
    .pillar-img { height: 230px; border-radius: 10px 10px 0 0; }
    .pillar-body { padding: 1.3rem 1.3rem 1.6rem; }
    .pillar-body h3 { font-size: 1.35rem; }
    .pillar-body p { font-size: 0.85rem; line-height: 1.55; }
    .pillar-tags span { font-size: 0.62rem; padding: 4px 10px; }
    .cl-view { font-size: 0.7rem; }

    /* === SERVICES — stack === */
    .services { padding: 2.5rem 0; }
    .services-wrap { grid-template-columns: 1fr !important; min-height: auto; gap: 0; }
    .services-visual { min-height: 240px; height: 50vw; }
    .services-content { padding: 2rem 1.2rem 2.5rem; }
    .svc-head h2 { font-size: 1.6rem; }
    .svc-head p { font-size: 0.85rem; }
    .svc-item { padding: 1rem 0.5rem; gap: 0.8rem; }
    .svc-num { font-size: 0.85rem; }
    .svc-info h4 { font-size: 0.95rem; }
    .svc-info p { font-size: 0.78rem; }
    .svc-cta {
        width: 100%;
        text-align: center;
        padding: 0.95rem 1.2rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* === CUSTOM SECTION — image above text === */
    .custom-section { padding: 2.5rem 0; }
    .custom-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .custom-text { order: 2; }
    .custom-visual { order: 1; }
    .custom-text h2 { font-size: 1.6rem; }
    .custom-text p { font-size: 0.88rem; }
    .custom-list li { font-size: 0.85rem; padding: 0.5rem 0; }
    .custom-list li svg { width: 16px; height: 16px; }
    .custom-img-wrap { height: 280px; border-radius: 10px; }
    .custom-img-small { width: 110px; height: 110px; border-radius: 10px; }
    .custom-badge { width: 70px; height: 70px; font-size: 0.65rem; }

    /* === PRODUCT SHOWCASE — 2x2 grid + horizontal scrollable tabs === */
    .product-showcase { padding: 2.5rem 0; }
    .showcase-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.4rem;
        margin: 0 -16px 1.5rem;
        padding: 0 16px;
        scrollbar-width: none;
    }
    .showcase-tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
        flex: 0 0 auto;
        padding: 0.7rem 1.1rem;
        font-size: 0.65rem;
        letter-spacing: 1.8px;
        white-space: nowrap;
        min-height: 40px;
    }
    .showcase-grid.active { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
    .showcase-img img { aspect-ratio: 3/4; }
    .showcase-body { padding: 0.7rem 0.4rem; }
    .showcase-body h5 { font-size: 0.82rem; line-height: 1.3; }
    .showcase-price { font-size: 0.72rem; }
    .showcase-desc { display: none; }
    .showcase-badge { font-size: 0.55rem; padding: 3px 7px; }
    .showcase-enquire { font-size: 0.7rem; }
    .showcase-footer { margin-top: 2rem; padding: 1.5rem 0; }
    .showcase-footer p { font-size: 0.85rem; line-height: 1.55; }
    .showcase-footer .btn-view-all { margin-top: 1rem; min-height: 44px; }

    /* === HOW IT WORKS — stack alternating rows === */
    .how-it-works { padding: 2.5rem 0 1.5rem; }
    .hiw-row,
    .hiw-reverse {
        grid-template-columns: 1fr !important;
        min-height: auto;
        margin-bottom: 1.5rem;
    }
    .hiw-row .hiw-img,
    .hiw-reverse .hiw-img {
        order: 1 !important;
        height: 220px;
        border-radius: 10px;
        overflow: hidden;
    }
    .hiw-row .hiw-text,
    .hiw-reverse .hiw-text {
        order: 2 !important;
        padding: 1.5rem 1rem 0;
    }
    .hiw-ghost-num { font-size: 5rem; top: -1rem; }
    .hiw-text h3 { font-size: 1.4rem; margin-bottom: 0.7rem; }
    .hiw-text p { font-size: 0.88rem; line-height: 1.6; }
    .hiw-detail { font-size: 0.75rem; padding: 0.6rem 0; }
    .hiw-cta { margin-top: 1.5rem; }
    .hiw-cta .btn-view-all { width: 100%; max-width: 320px; min-height: 44px; }

    /* === WHY US — 1 card on mobile === */
    .why-us { padding: 2.5rem 0; }
    .why-card {
        width: calc(100vw - 80px) !important;
        min-width: calc(100vw - 80px) !important;
        padding: 1.8rem 1.2rem;
    }
    .why-card h4 { font-size: 1rem; }
    .why-card p { font-size: 0.85rem; line-height: 1.55; }
    .why-card-num { font-size: 3.5rem; }
    .why-carousel-wrap { gap: 0.4rem; }
    .why-nav { display: none; }
    .why-carousel { padding: 0 4px; }

    /* === ABOUT — stack, 2x2 stats === */
    .about-section { padding: 2.5rem 0; }
    .about-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .about-left { gap: 1.5rem; }
    .about-text h2 { font-size: 1.7rem; }
    .about-text p { font-size: 0.88rem; line-height: 1.6; }
    .about-stats { grid-template-columns: repeat(2, 1fr); gap: 0; }
    .about-stats .counter { padding: 1.2rem 0.5rem; text-align: center; }
    .counter-val span { font-size: 1.8rem; }
    .counter-val sup { font-size: 0.95rem; }
    .counter p { font-size: 0.7rem; letter-spacing: 1.5px; }
    .about-visual { max-height: 360px; }
    .about-visual img { aspect-ratio: 4/3; }
    .about-visual-badge strong { font-size: 1.4rem; }
    .about-text .btn-view-all { width: 100%; max-width: 280px; min-height: 44px; }

    /* === GROW STRIP === */
    .grow-strip { padding: 2rem 0; }
    .strip-inner { flex-direction: column; text-align: center; gap: 1.2rem; padding: 1.5rem; }
    .strip-text h3 { font-size: 1.15rem; }
    .strip-text p { font-size: 0.85rem; }

    /* === PROMISE === */
    .promise { padding: 2.5rem 0; }
    .promise h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }
    .promise-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .promise-item { max-width: 100%; }
    .promise-item svg { width: 48px; height: 48px; }
    .promise-item h5 { font-size: 0.85rem; }

    /* === COLLECTIONS — 1 slide === */
    .collection-section { padding: 2.5rem 0; }
    .col-header h2 { font-size: 1.55rem; }
    .col-panel { padding: 1.8rem 1.3rem !important; }
    .col-panel h3 { font-size: 1.5rem; }
    .col-panel p { font-size: 0.85rem; }
    .col-ghost { font-size: 6rem; }
    .col-prod-thumb { width: 50px; height: 50px; }
    .col-thumbs { flex-wrap: wrap; }
    .col-thumb {
        min-width: 33.33%;
        padding: 0.7rem 0.4rem;
        min-height: 48px;
    }
    .col-thumb span { font-size: 0.75rem; }
    .col-panel .btn-view-all {
        width: 100%;
        max-width: 260px;
        min-height: 44px;
        text-align: center;
    }

    /* === TESTIMONIALS — 1 card === */
    .testimonials { padding: 2.5rem 0; }
    .test-wrapper { gap: 0.4rem; }
    .test-preview { display: none; }
    .test-main { min-width: 0; flex: 1; padding: 1.8rem 1.2rem; }
    .test-card p { font-size: 0.88rem; line-height: 1.6; }
    .test-card span { font-size: 0.8rem; }
    .test-btn { width: 40px; height: 40px; flex-shrink: 0; }
    .test-card .test-avatar { width: 60px; height: 60px; }
    .test-card .test-product-img { width: 70px; height: 70px; }

    /* === CTA === */
    .cta-section { padding: 0; }
    .cta-inner { padding: 3rem 1.2rem; border-radius: 0; }
    .cta-content .label { font-size: 0.6rem; }
    .cta-content h2 { font-size: 1.7rem; line-height: 1.2; }
    .cta-content p { font-size: 0.88rem; line-height: 1.6; }
    .cta-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .cta-btns .btn-view-all,
    .cta-btns .btn-cta-primary,
    .cta-btns .btn-cta-wa {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        min-height: 48px;
        padding: 0.95rem 1.2rem;
        font-size: 0.78rem;
    }

    /* === FOOTER — single column with heading separators === */
    .footer { padding-top: 0; }
    .footer-main {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem 1.5rem;
        gap: 0;
        text-align: center;
    }
    .footer-col,
    .footer-col.right,
    .footer-center {
        text-align: center;
        padding: 1.2rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        display: block;
    }
    .footer-col:last-child,
    .footer-center:last-child { border-bottom: none; }
    .footer-col h4,
    .footer-center h5 {
        font-size: 0.78rem;
        letter-spacing: 2px;
        margin-bottom: 0.8rem;
    }
    .footer-col a {
        display: block;
        padding: 0.5rem 0;
        font-size: 0.85rem;
        min-height: 36px;
    }
    .footer-center .footer-logo-img { height: 38px; margin: 0 auto 0.6rem; }
    .footer-center .footer-tagline { font-size: 0.78rem; padding: 0 0.5rem; }
    .footer-center .social { justify-content: center; gap: 0.8rem; }
    .footer-center .social a { width: 38px; height: 38px; }
    .footer-center .divider { margin: 1rem auto; }
    .footer-center p { font-size: 0.8rem; padding: 0.15rem 0; }
    .footer-center .address { font-size: 0.78rem; line-height: 1.55; padding: 0 0.5rem; }
    .footer-bottom { padding: 1rem; text-align: center; }
    .footer-bottom p { font-size: 0.7rem; line-height: 1.5; }
    .footer-disclaimer { padding: 0.8rem 1rem; }
    .footer-disclaimer p,
    .footer-disclaimer span,
    .footer-disclaimer div {
        font-size: 0.62rem !important;
        line-height: 1.6 !important;
    }

    /* === MODAL === */
    .modal-box {
        width: 92%;
        max-width: 92%;
        padding: 1.8rem 1.2rem;
        max-height: 88vh;
        overflow-y: auto;
    }
    .modal-box h3 { font-size: 1.3rem; }
    .modal-box input,
    .modal-box select,
    .modal-box textarea {
        font-size: 0.9rem;
        padding: 0.85rem 0.9rem;
        min-height: 44px;
    }
    .modal-box button[type="submit"] {
        width: 100%;
        padding: 0.95rem 1.2rem;
        min-height: 48px;
        font-size: 0.8rem;
    }
}

/* ----------------------------------------------------------
   EXTRA SMALL (max-width: 480px) — fine tuning
   ---------------------------------------------------------- */
@media (max-width: 480px) {
    .container { padding: 0 14px; }

    /* Hero */
    .hero { height: 72vh; min-height: 380px; }
    .slide-content h1 { font-size: 1.65rem; }
    .slide-content p { font-size: 0.8rem; }

    /* Sections */
    .section-head h2 { font-size: 1.4rem; }

    /* Pillars */
    .pillar-img { height: 200px; }
    .pillar-body h3 { font-size: 1.2rem; }

    /* Showcase tighter */
    .showcase-grid.active { gap: 0.5rem; }
    .showcase-body h5 { font-size: 0.78rem; }

    /* Custom */
    .custom-img-wrap { height: 240px; }
    .custom-img-small { width: 90px; height: 90px; }
    .custom-text h2 { font-size: 1.45rem; }

    /* Why card narrower */
    .why-card {
        width: calc(100vw - 60px) !important;
        min-width: calc(100vw - 60px) !important;
    }

    /* About stats */
    .counter-val span { font-size: 1.6rem; }

    /* Promise — 2x2 */
    .promise-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .promise-item svg { width: 42px; height: 42px; }

    /* Collection */
    .col-panel h3 { font-size: 1.35rem; }
    .col-ghost { font-size: 5rem; }
    .col-thumb { min-width: 50%; }

    /* CTA */
    .cta-content h2 { font-size: 1.45rem; }
    .cta-inner { padding: 2.5rem 1rem; }

    /* Footer */
    .footer-main { padding: 1.5rem 1.2rem; }

    /* Floating buttons */
    .whatsapp-btn { width: 46px; height: 46px; bottom: 12px; right: 12px; }
    .whatsapp-btn svg { width: 22px; height: 22px; }
    .scroll-top { width: 40px; height: 40px; bottom: 70px; right: 14px; }

    /* Header tighter */
    .header-wrap { padding: 8px 12px; }
    .logo-img { height: 28px; }
}

/* ==========================
   MOBILE POLISH - PHASE 3
   Collections Pages - App Polish
   ========================== */

/* ---- MOBILE (<= 768px) ---- */
@media (max-width: 768px) {
    /* ===== collections.php ===== */

    /* Hide decorative parallax bg (verify) + any floating decorative glyphs */
    .cl-block-bg,
    .cl-block::before,
    .cl-block::after { display: none !important; }

    /* Tighter vertical rhythm between blocks */
    .cl-block { padding: 1.8rem 0 0 !important; }
    .cl-split { gap: 1.1rem !important; }

    /* Image refined — smaller max-height */
    .cl-image { max-height: 300px !important; aspect-ratio: 4/5 !important; border-radius: 10px !important; }

    /* Text block: tighter */
    .cl-text { padding: 0 1.1rem 1rem !important; }
    .cl-num { font-size: 1.6rem !important; opacity: 0.55; margin-bottom: 0.25rem !important; letter-spacing: 1px; }
    .cl-title { font-size: 1.55rem !important; line-height: 1.22 !important; margin-bottom: 0.5rem !important; }
    .cl-tagline { font-size: 0.85rem !important; margin-bottom: 0.55rem !important; }
    .cl-desc {
        font-size: 0.82rem !important;
        line-height: 1.6 !important;
        margin: 0 auto 0.9rem !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cl-view { font-size: 0.68rem !important; padding: 0.55rem 0 !important; min-height: 40px; letter-spacing: 1.2px; }

    /* Thumbs strip: smaller, snappier scroll */
    .cl-thumbs { gap: 0.7rem !important; padding: 1.2rem 1rem 1.6rem !important; }
    .cl-thumb-img { width: 88px !important; height: 88px !important; border-radius: 6px !important; }
    .cl-thumb-name { font-size: 0.56rem !important; margin-top: 0.35rem; }

    /* Section separator tighter */
    .cl-sep { margin: 1.3rem auto !important; width: 45% !important; }

    /* Collections page-hero: compressed */
    body .page-hero { padding: 3rem 0 1.8rem !important; }
    body .page-hero h1 { font-size: 1.65rem !important; margin-bottom: 0.5rem; }
    body .page-hero p { font-size: 0.82rem !important; line-height: 1.55; }
    body .page-hero .label { font-size: 0.62rem !important; }

    /* ===== collection.php ===== */

    /* Hero: compressed */
    .cd-about { padding: 2rem 0 !important; }
    .cd-about-grid { gap: 1.3rem !important; }
    .cd-about-img { max-height: 220px !important; height: auto !important; aspect-ratio: 4/3; border-radius: 10px !important; }
    .cd-about-img img { border-radius: 10px !important; object-fit: cover; height: 100%; width: 100%; }
    .cd-about-text h2 { font-size: 1.45rem !important; line-height: 1.22 !important; margin-bottom: 0.5rem; }
    .cd-about-tagline { font-size: 0.85rem !important; margin-bottom: 0.5rem !important; }
    .cd-about-line { width: 30px !important; height: 2px !important; margin: 0.6rem auto 0.8rem !important; }
    .cd-about-desc { font-size: 0.82rem !important; line-height: 1.65 !important; }

    /* Stats grid 2x2, tighter */
    .cd-about-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem !important;
        margin-top: 1.1rem !important;
    }
    .cd-about-stat { flex: none !important; min-width: 0 !important; padding: 0.6rem 0.4rem; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; }
    .cd-about-stat strong { font-size: 1.05rem !important; display: block; }
    .cd-about-stat span { font-size: 0.6rem !important; letter-spacing: 1px; }

    /* Highlight strip: smaller pills, 2x2 */
    .cd-highlight { padding: 1.6rem 0 !important; }
    .cd-highlight-inner {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.9rem 0.6rem !important;
    }
    .cd-highlight-stat {
        padding: 0.5rem 0.4rem;
        background: rgba(255,255,255,0.08);
        border-radius: 6px;
    }
    .cd-highlight-stat strong { font-size: 1rem !important; }
    .cd-highlight-stat span { font-size: 0.58rem !important; letter-spacing: 1px; }

    /* Editorial / craft: compact */
    .cd-editorial { padding: 2rem 0 !important; }
    .cd-editorial-grid { gap: 1.3rem !important; }
    .cd-editorial-img { max-height: 200px !important; height: auto !important; aspect-ratio: 4/3; border-radius: 10px !important; }
    .cd-editorial-text h3 { font-size: 1.3rem !important; line-height: 1.25 !important; margin-bottom: 0.6rem; }
    .cd-editorial-text p { font-size: 0.82rem !important; line-height: 1.65 !important; margin-bottom: 0.9rem !important; }
    .cd-craft-list { padding: 0 !important; margin: 0 !important; }
    .cd-craft-list li {
        font-size: 0.8rem !important;
        padding: 0.55rem 0 !important;
        gap: 0.55rem;
        line-height: 1.4;
    }
    .cd-craft-list li svg { width: 14px !important; height: 14px !important; flex-shrink: 0; }

    /* Products grid inside collection: 2 col, small cards */
    .cd-about + section .prod-grid,
    .cd-editorial + section .prod-grid,
    .related-section .prod-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.7rem !important;
    }
    .prod-card .prod-img { aspect-ratio: 4/5 !important; }
    .prod-card .prod-info { padding: 0.6rem 0.55rem !important; }
    .prod-card .prod-info h4 { font-size: 0.78rem !important; margin-bottom: 0.2rem !important; line-height: 1.3; }
    .prod-card .prod-price { font-size: 0.82rem !important; }
    .prod-card .prod-link { font-size: 0.6rem !important; letter-spacing: 0.8px; }

    /* ===== collection-product-detail.php ===== */

    /* Compressed minimal hero */
    body .page-hero[style*="3.5rem 0 2rem"] { padding: 1rem 0 0.5rem !important; }

    /* Gallery: main image aspect 1:1, max 400px */
    .pd-layout { gap: 1rem !important; padding: 0.8rem 0 1.5rem !important; }
    .pd-main-img { aspect-ratio: 1/1 !important; max-height: 400px !important; border-radius: 10px !important; overflow: hidden; }
    .pd-main-img img { width: 100%; height: 100%; object-fit: cover; }
    .pd-360-btn { bottom: 8px !important; right: 8px !important; padding: 5px 9px !important; font-size: 0.6rem !important; min-height: 32px; }

    /* Thumbs: horizontal scroll, 56px */
    .pd-thumbs { margin-top: 0.55rem !important; gap: 0.35rem !important; }
    .pd-thumb { flex: 0 0 56px !important; width: 56px !important; height: 56px !important; border-radius: 4px !important; }

    /* Info block tighter */
    .pd-info { padding-top: 0.2rem !important; }
    .pd-info .prod-cat { font-size: 0.58rem !important; letter-spacing: 1.3px; }
    .pd-info h1 { font-size: 1.35rem !important; line-height: 1.22 !important; margin-bottom: 0.35rem !important; }
    .pd-info .pd-price { font-size: 1.1rem !important; margin-bottom: 0.9rem !important; }

    /* Tabs: scrollable nav */
    .pd-tabs { margin-top: 0.8rem !important; }
    .pd-tab-nav {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .pd-tab-nav::-webkit-scrollbar { display: none; }
    .pd-tab-btn {
        padding: 0.6rem 0.85rem !important;
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        flex-shrink: 0;
        min-height: 40px;
        scroll-snap-align: start;
        letter-spacing: 0.6px;
    }
    .pd-tab-content { padding: 0.8rem 0 !important; font-size: 0.82rem !important; line-height: 1.7 !important; }

    /* Specs: stacked label over value (verify) */
    .pd-specs { display: block !important; }
    .pd-spec-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.15rem !important;
        padding: 0.6rem 0 !important;
    }
    .pd-spec-row .spec-label { font-size: 0.62rem !important; text-transform: uppercase; letter-spacing: 1.2px; opacity: 0.7; }
    .pd-spec-row .spec-value { font-size: 0.85rem !important; font-weight: 500; }

    /* Packaging cards: compact — image + name, select + button below */
    .pd-pkg-item { padding: 0.7rem 0 !important; border-bottom: 1px solid rgba(0,0,0,0.06); }
    .pd-pkg-top { gap: 0.55rem !important; align-items: center; }
    .pd-pkg-img { width: 46px !important; height: 46px !important; border-radius: 4px; flex-shrink: 0; }
    .pd-pkg-info strong { font-size: 0.74rem !important; line-height: 1.3; display: block; }
    .pd-pkg-info p { font-size: 0.66rem !important; margin-top: 0.15rem; line-height: 1.35; }
    .pd-pkg-bottom { flex-direction: column !important; align-items: stretch !important; gap: 0.4rem !important; margin-top: 0.55rem !important; }
    .pd-pkg-select { width: 100% !important; padding: 0.55rem 0.6rem !important; font-size: 0.76rem !important; min-height: 40px; border-radius: 4px; }
    .pd-pkg-add { width: 100% !important; padding: 0.65rem !important; font-size: 0.68rem !important; min-height: 42px; letter-spacing: 1px; }

    /* Enquiry form: tight 1 col */
    #cpAddressForm { padding: 1rem !important; margin-top: 1rem !important; border-radius: 8px; }
    #cpAddressForm h4 { font-size: 0.95rem !important; margin-bottom: 0.85rem !important; }
    #cpAddressForm form div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    #cpAddressForm input,
    #cpAddressForm textarea {
        font-size: 0.85rem !important;
        padding: 10px 8px !important;
        min-height: 42px;
    }
    #cpAddressForm textarea { min-height: 60px; }
    #cpAddressForm button[type="submit"] {
        width: 100% !important;
        padding: 0.9rem !important;
        font-size: 0.72rem !important;
        min-height: 44px;
        margin-top: 0.9rem !important;
    }

    /* Action buttons: stacked full-width */
    .pd-actions { flex-direction: column !important; gap: 0.55rem !important; margin: 1rem 0 1.1rem !important; }
    .pd-actions .btn-enquire,
    .pd-actions .btn-wa {
        width: 100% !important;
        padding: 0.85rem !important;
        font-size: 0.75rem !important;
        min-height: 46px;
        justify-content: center;
        letter-spacing: 1px;
    }

    /* Trust badges: 3 icons tiny row, centered */
    .pd-trust {
        display: flex !important;
        justify-content: space-around !important;
        gap: 0.5rem !important;
        padding: 0.9rem 0 !important;
        border-top: 1px solid rgba(0,0,0,0.06);
        border-bottom: 1px solid rgba(0,0,0,0.06);
        flex-wrap: nowrap !important;
    }
    .pd-trust-item {
        flex-direction: column !important;
        align-items: center;
        gap: 0.2rem !important;
        font-size: 0.62rem !important;
        text-align: center;
        flex: 1;
        letter-spacing: 0.5px;
    }
    .pd-trust-item .trust-icon { font-size: 1.1rem; }

    /* Related section tighter */
    .related-section { padding: 1.8rem 0 !important; }
    .related-section .section-head { margin-bottom: 1.2rem; }
    .related-section .section-head h2 { font-size: 1.3rem !important; }
    .related-section .section-head .label { font-size: 0.6rem !important; }

    /* Hide decorative deco on mobile for cleaner flow */
    .related-section .deco.simple,
    .cd-about + section .deco.simple { display: none; }
}

/* ---- SMALL MOBILE (<= 480px) ---- */
@media (max-width: 480px) {
    /* collections.php — tightest */
    .cl-block { padding: 1.4rem 0 0 !important; }
    .cl-image { max-height: 260px !important; }
    .cl-num { font-size: 1.4rem !important; }
    .cl-title { font-size: 1.35rem !important; }
    .cl-tagline { font-size: 0.8rem !important; }
    .cl-desc { font-size: 0.78rem !important; -webkit-line-clamp: 3; }
    .cl-thumbs { gap: 0.6rem !important; padding: 1rem 1rem 1.4rem !important; }
    .cl-thumb-img { width: 76px !important; height: 76px !important; }
    .cl-thumb-name { font-size: 0.52rem !important; }

    /* collection.php */
    .cd-about-img { max-height: 200px !important; }
    .cd-about-text h2 { font-size: 1.3rem !important; }
    .cd-about-stat strong { font-size: 0.95rem !important; }
    .cd-highlight-stat strong { font-size: 0.9rem !important; }
    .cd-editorial-img { max-height: 180px !important; }
    .cd-editorial-text h3 { font-size: 1.18rem !important; }
    .cd-craft-list li { font-size: 0.75rem !important; padding: 0.45rem 0 !important; }

    /* Products tighter */
    .prod-card .prod-info h4 { font-size: 0.72rem !important; }
    .prod-card .prod-price { font-size: 0.75rem !important; }

    /* collection-product-detail.php — tightest */
    .pd-main-img { max-height: 340px !important; }
    .pd-thumb { flex: 0 0 48px !important; width: 48px !important; height: 48px !important; }
    .pd-info h1 { font-size: 1.22rem !important; }
    .pd-info .pd-price { font-size: 1rem !important; }
    .pd-tab-btn { padding: 0.55rem 0.7rem !important; font-size: 0.6rem !important; }
    .pd-spec-row .spec-value { font-size: 0.78rem !important; }
    .pd-pkg-img { width: 40px !important; height: 40px !important; }
    .pd-pkg-info strong { font-size: 0.7rem !important; }
    .pd-trust-item { font-size: 0.56rem !important; }
    .pd-trust-item .trust-icon { font-size: 0.95rem; }
    .related-section .section-head h2 { font-size: 1.15rem !important; }
}


/* ==========================
   MOBILE POLISH - PHASE 3
   Products Pages - App Polish
   Targets: products.php, product-list.php, product-detail.php
   ========================== */

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

    /* =====================================================
       products.php
       ===================================================== */

    /* Page hero — smaller, app-like header */
    body .page-hero {
        padding: 3rem 0 1.8rem !important;
    }
    body .page-hero h1 {
        font-size: 1.7rem !important;
        line-height: 1.22;
        margin-bottom: 0.5rem;
    }
    body .page-hero p {
        font-size: 0.82rem !important;
        line-height: 1.5;
        max-width: 92%;
        margin: 0 auto;
    }
    body .page-hero .label {
        font-size: 0.6rem !important;
        letter-spacing: 2px;
    }
    body .page-hero .breadcrumb {
        font-size: 0.7rem !important;
        margin-top: 0.8rem;
    }

    /* Category carousel — smaller circles, touch-scroll */
    .cat-wrapper { padding: 0; }
    .cat-scroll {
        gap: 12px !important;
        padding: 4px 4px 6px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .cat-scroll::-webkit-scrollbar { display: none; }
    .cat-item {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }
    .cat-circle {
        width: 64px !important;
        height: 64px !important;
        border-radius: 50%;
        overflow: hidden;
    }
    .cat-circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .cat-item span {
        font-size: 0.68rem !important;
        letter-spacing: 0.3px;
        margin-top: 6px;
        max-width: 70px;
        display: block;
        text-align: center;
    }
    /* Hide arrow nav on mobile — touch scroll is UX */
    .cat-wrapper .cat-nav,
    .cat-wrapper .nav-arrow { display: none !important; }

    /* Gender section — tighter header row, View All as tiny link */
    .gender-section { padding: 2rem 0 !important; }
    .gender-head {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 10px;
        margin-bottom: 1rem !important;
    }
    .gender-head-text { flex: 1; min-width: 0; }
    .gender-head-text .label { font-size: 0.6rem !important; letter-spacing: 2px; }
    .gender-head-text h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.3rem;
        line-height: 1.2;
    }
    .gender-head-text p {
        font-size: 0.78rem !important;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .btn-view-all-outline {
        font-size: 0.65rem !important;
        letter-spacing: 1px !important;
        padding: 0 0 4px 0 !important;
        border: none !important;
        background: transparent !important;
        color: var(--primary) !important;
        white-space: nowrap;
        flex-shrink: 0;
        text-transform: uppercase;
        font-weight: 600;
        align-self: flex-end;
    }
    .btn-view-all-outline:hover {
        background: transparent !important;
        color: var(--primary) !important;
    }
    .btn-view-all-outline span { margin-left: 3px; }

    /* pg-video-grid REDESIGN — video 16:9 full-width top, 2x2 products below, hide extras */
    .pg-video-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .pg-video-cell {
        grid-column: 1 / -1 !important;
        aspect-ratio: 16 / 9;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        margin-bottom: 4px;
    }
    .pg-video-cell video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .pg-video-play { width: 44px !important; height: 44px !important; }

    /* Show only first 4 product cells (2x2); hide 5th and 6th */
    .pg-video-grid .pg-prod-cell:nth-of-type(n+6) { display: none !important; }

    .pg-prod-cell .showcase-img {
        aspect-ratio: 1 / 1;
        height: auto !important;
        border-radius: 8px;
        overflow: hidden;
    }
    .pg-prod-cell .showcase-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .pg-prod-cell .showcase-body { padding: 8px 4px 4px !important; }
    .pg-prod-cell .showcase-body h5 {
        font-size: 0.78rem !important;
        line-height: 1.3;
        margin: 2px 0 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .pg-prod-cell .showcase-price { font-size: 0.78rem !important; font-weight: 600; }
    /* Remove extra badges on mobile cards */
    .pg-prod-cell .showcase-badge { display: none !important; }

    /* Custom order strip — compact */
    .grow-strip { padding: 2rem 0; }
    .strip-inner {
        flex-direction: column;
        gap: 0.9rem;
        text-align: center;
        padding: 1.4rem 1.1rem;
    }
    .strip-text h3 { font-size: 1.15rem; }
    .strip-text p { font-size: 0.8rem; }
    .btn-strip {
        width: 100%;
        text-align: center;
        padding: 0.85rem 1rem;
        font-size: 0.7rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }


    /* =====================================================
       product-list.php
       ===================================================== */

    .product-list-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Filter drawer — smooth off-canvas slide with overlay */
    .filter-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 82%;
        max-width: 320px;
        background: #fff;
        z-index: 9999;
        transform: translateX(-100%);
        transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.3, 1);
        box-shadow: 2px 0 24px rgba(0,0,0,0.18);
        overflow-y: auto;
        padding: 1.2rem 1.2rem 2rem;
    }
    .filter-sidebar.open { transform: translateX(0); }
    .filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .filter-overlay.open { opacity: 1; pointer-events: auto; }
    .filter-group { margin-bottom: 1.4rem; }
    .filter-group h4 {
        font-size: 0.78rem;
        letter-spacing: 1.5px;
        margin-bottom: 0.6rem;
    }
    .filter-group label {
        padding: 10px 2px;
        font-size: 0.85rem;
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .filter-group label input[type=checkbox] {
        width: 16px;
        height: 16px;
    }

    /* List header — compact row */
    .list-header {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 0 !important;
        gap: 10px;
    }
    .list-header h3 {
        font-size: 1rem !important;
        margin: 0;
        line-height: 1.2;
    }
    .result-count {
        font-size: 0.68rem !important;
        color: #888;
    }

    /* Sort select — native look */
    .sort-select {
        -webkit-appearance: none;
        appearance: none;
        padding: 8px 28px 8px 10px !important;
        font-size: 0.75rem !important;
        border: 1px solid rgba(0,0,0,0.15) !important;
        border-radius: 6px;
        background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23666' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 10px center;
        min-height: 36px;
        max-width: 48%;
        font-family: inherit;
    }

    .active-filters {
        padding: 0 0 0.6rem;
        font-size: 0.72rem;
    }

    /* Product grid — clean 2 col, compact info */
    .list-grid.pl-grid,
    .pl-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .pl-card {
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }
    .pl-card-img {
        aspect-ratio: 1 / 1;
        height: auto;
        overflow: hidden;
    }
    .pl-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .pl-card-info { padding: 8px 8px 10px !important; }
    .pl-card-price {
        font-size: 0.78rem !important;
        font-weight: 600;
        color: var(--primary);
    }
    /* Hide compare prices on mobile */
    .pl-card .pl-card-compare,
    .pl-card .compare-price { display: none !important; }
    .pl-card-badge {
        font-size: 0.55rem !important;
        padding: 3px 7px !important;
        top: 6px !important;
        left: 6px !important;
    }

    /* Optional filter toggle button (if markup adds it) */
    .filter-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        font-size: 0.75rem;
        border: 1px solid rgba(0,0,0,0.15);
        background: #fff;
        border-radius: 6px;
        min-height: 36px;
    }


    /* =====================================================
       product-detail.php
       ===================================================== */

    .pd-layout {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }

    /* Gallery — non-sticky, controlled max-height */
    .pd-gallery {
        position: static !important;
        top: auto !important;
    }
    body .pd-main-img {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 10px;
        cursor: default !important;
    }
    body .pd-main-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none !important;
    }

    /* Hide 360° button on mobile */
    .pd-360-btn { display: none !important; }

    /* Thumbs — smaller (48px), scrollable */
    body .pd-thumbs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto;
        padding: 6px 2px 8px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    body .pd-thumbs::-webkit-scrollbar { display: none; }
    body .pd-thumb {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex: 0 0 48px !important;
        border-radius: 6px;
        overflow: hidden;
        scroll-snap-align: start;
    }
    body .pd-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    body .pd-thumb.active {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
    }

    /* Info column */
    body .pd-info { padding: 0 !important; }
    body .pd-info .prod-cat {
        font-size: 0.62rem !important;
        letter-spacing: 2px;
    }
    body .pd-info h1 {
        font-size: 1.5rem !important;
        line-height: 1.25;
        margin: 0.4rem 0 0.6rem;
    }
    body .pd-info .pd-price {
        font-size: 1.2rem !important;
        font-weight: 700;
    }
    .pd-compare-price {
        font-size: 0.78rem !important;
        margin-left: 0.4rem !important;
    }

    /* Tabs — cleaner horizontal scroll + underline indicator */
    .pd-tabs { margin-top: 1rem; }
    .pd-tab-nav {
        display: flex !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        padding: 0;
        margin-bottom: 0.9rem;
        scroll-snap-type: x proximity;
    }
    .pd-tab-nav::-webkit-scrollbar { display: none; }
    body .pd-tab-btn {
        flex: 0 0 auto;
        padding: 10px 14px !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.8px;
        border: none !important;
        background: transparent !important;
        color: #777 !important;
        position: relative;
        white-space: nowrap;
        scroll-snap-align: start;
        min-height: 40px;
    }
    body .pd-tab-btn.active {
        color: var(--primary) !important;
        font-weight: 600;
    }
    body .pd-tab-btn.active::after {
        content: '';
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: -1px;
        height: 2px;
        background: var(--primary);
        border-radius: 2px 2px 0 0;
    }
    .pd-tab-content {
        padding: 0.4rem 0 !important;
        font-size: 0.85rem;
        line-height: 1.6;
    }
    .pd-tab-content p { font-size: 0.85rem; line-height: 1.6; }

    /* Specs — 2-col label|value inline */
    .pd-specs {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    body .pd-spec-row {
        display: grid !important;
        grid-template-columns: 40% 60% !important;
        align-items: center;
        gap: 10px;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        font-size: 0.82rem;
    }
    body .pd-spec-row:last-child { border-bottom: none; }
    body .pd-spec-row .spec-label {
        font-size: 0.72rem !important;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #888;
        font-weight: 500;
    }
    body .pd-spec-row .spec-value {
        font-size: 0.82rem !important;
        color: #222;
        font-weight: 500;
        text-align: right;
    }

    /* Packaging items — compact */
    .pd-pkg-item {
        padding: 0.8rem !important;
        margin-bottom: 0.6rem !important;
        border-radius: 8px;
    }
    body .pd-pkg-img {
        width: 60px !important;
        height: 60px !important;
    }
    body .pd-pkg-info strong { font-size: 0.82rem !important; }
    .pd-pkg-info p { font-size: 0.75rem; line-height: 1.45; }
    .pd-pkg-add {
        padding: 7px 14px !important;
        font-size: 0.68rem !important;
        min-height: 34px;
    }
    .pd-pkg-select {
        font-size: 0.75rem !important;
        padding: 6px 8px !important;
    }

    /* Action buttons — side by side, thumb-friendly */
    .pd-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 1rem !important;
    }
    .btn-enquire, .btn-wa {
        width: 100%;
        padding: 0.9rem 0.8rem !important;
        font-size: 0.72rem !important;
        letter-spacing: 1px;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 6px;
    }

    /* Enquiry / Address form — compact 1-col */
    #addressForm {
        padding: 1rem !important;
        margin-top: 1.2rem !important;
    }
    #addressForm h4 {
        font-size: 1rem !important;
        margin-bottom: 0.9rem !important;
    }
    #addressForm div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    #addressForm input,
    #addressForm textarea {
        font-size: 0.85rem !important;
        padding: 10px 6px !important;
        min-height: 42px;
    }
    #addressForm textarea { min-height: 64px; }
    #addressSubmitBtn {
        width: 100%;
        margin-top: 1rem !important;
        padding: 0.9rem 1rem !important;
        min-height: 46px;
    }

    /* Trust badges — minimal 3-icon row */
    body .pd-trust {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 1rem 0 !important;
        margin-top: 1.2rem;
        border-top: 1px solid rgba(0,0,0,0.06);
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    body .pd-trust-item {
        flex-direction: column !important;
        text-align: center;
        gap: 4px !important;
        font-size: 0.65rem !important;
        line-height: 1.3;
        padding: 0 !important;
    }
    body .pd-trust-item .trust-icon {
        font-size: 1.3rem !important;
        margin: 0 auto;
    }
    body .pd-trust-item span:last-child {
        font-size: 0.65rem !important;
        color: #555;
    }

    /* Related products — 2 col compact cards, no View Details overlay */
    .related-section { padding: 2rem 0 1.5rem; }
    .related-section .prod-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .related-section .prod-card {
        border-radius: 8px;
        overflow: hidden;
    }
    .related-section .prod-img {
        aspect-ratio: 1 / 1;
        height: auto !important;
    }
    .related-section .prod-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Hide View Details link/overlay on mobile */
    .related-section .prod-overlay,
    .related-section .view-btn { display: none !important; }
    .related-section .prod-info { padding: 8px 8px 10px !important; }
    .related-section .prod-info .prod-cat {
        font-size: 0.58rem !important;
        letter-spacing: 1.5px;
    }
    .related-section .prod-info h4 {
        font-size: 0.8rem !important;
        line-height: 1.3;
        margin: 2px 0 3px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .related-section .prod-info .prod-price {
        font-size: 0.78rem !important;
        font-weight: 600;
        color: var(--primary);
        margin: 0;
    }
    .related-section .prod-badge {
        font-size: 0.52rem !important;
        padding: 3px 6px !important;
        top: 6px !important;
        left: 6px !important;
    }

    /* Overflow fix — prevent pd-info grid column from stretching past container */
    body .pd-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body .pd-info,
    body .pd-gallery {
        min-width: 0 !important;
        max-width: 100%;
        overflow: hidden;
    }
    body .pd-tabs,
    body .pd-tab-content,
    body .pd-tab-content p {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    body .pd-actions {
        min-width: 0;
        width: 100%;
    }
    body .pd-actions > .btn-enquire,
    body .pd-actions > .btn-wa {
        min-width: 0 !important;
        max-width: 100%;
    }

    /* Breadcrumb — wrap gracefully, don't push layout wider */
    body .page-hero .breadcrumb {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
        word-break: break-word;
    }
    body .page-hero .breadcrumb .bc-current {
        display: inline-block;
        max-width: 100%;
    }

    /* Breadcrumb-only hero (product-detail + collection-product-detail) — light & compact on mobile */
    body section.page-hero-bc {
        background: var(--cream) !important;
        padding: 0.9rem 0 0.6rem !important;
        margin-top: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    body section.page-hero-bc .breadcrumb {
        color: #888;
        font-size: 0.58rem !important;
        letter-spacing: 1.2px;
        gap: 0.35rem;
        padding: 0 0.5rem;
    }
    body section.page-hero-bc .breadcrumb a { color: #888; }
    body section.page-hero-bc .breadcrumb a:hover { color: var(--primary); }
    body section.page-hero-bc .breadcrumb .bc-sep { color: rgba(0,0,0,0.2); }
    body section.page-hero-bc .breadcrumb .bc-current { color: var(--primary); font-weight: 600; }

    /* Tighten the product section that immediately follows the breadcrumb */
    body section.page-hero-bc + section { padding-top: 1rem !important; }
}

/* ---- SMALL MOBILE (<= 420px) — extra tight ---- */
@media (max-width: 420px) {
    /* products.php */
    .cat-circle { width: 58px !important; height: 58px !important; }
    .cat-item span { font-size: 0.64rem !important; max-width: 64px; }
    .gender-head-text h2 { font-size: 1.35rem !important; }
    .btn-view-all-outline { font-size: 0.6rem !important; }

    /* product-list.php */
    .list-grid.pl-grid, .pl-grid { gap: 8px !important; }
    .pl-card-price { font-size: 0.74rem !important; }
    .list-header h3 { font-size: 0.92rem !important; }
    .sort-select { font-size: 0.7rem !important; max-width: 52%; }

    /* product-detail.php */
    body .pd-info h1 { font-size: 1.35rem !important; }
    body .pd-info .pd-price { font-size: 1.1rem !important; }
    body .pd-tab-btn { padding: 9px 12px !important; font-size: 0.68rem !important; }
    body .pd-thumb { width: 44px !important; height: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; }
    .btn-enquire, .btn-wa { font-size: 0.68rem !important; padding: 0.85rem 0.6rem !important; }
    body .pd-trust-item span:last-child { font-size: 0.6rem !important; }
    .related-section .prod-info h4 { font-size: 0.75rem !important; }
}

/* ==========================
   MOBILE POLISH - PHASE 3
   Custom Order / Contact / 404 / Search - App Polish
   ========================== */
@media (max-width: 768px) {
    /* ================================
       CUSTOM ORDER PAGE
       ================================ */

    /* Hero CTA prominent */
    .co-hero-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.85rem 1.5rem !important;
        font-size: 0.72rem !important;
        letter-spacing: 1.5px;
        min-height: 44px;
        border-radius: 3px;
    }
    .co-hero-cta span { font-size: 0.9rem; }

    /* Categories: compact 1 col full width */
    .co-cat-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        max-width: 100% !important;
    }
    .co-cat-card { border-radius: 6px; }
    .co-cat-img { width: 100%; height: auto; aspect-ratio: 16/10; }
    .co-cat-img img { width: 100%; height: 100%; object-fit: cover; }
    .co-cat-body { padding: 1rem !important; }
    .co-cat-body h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
    .co-cat-body p { font-size: 0.78rem; margin-bottom: 0.6rem; }
    .co-cat-icon { width: 42px; height: 42px; margin-bottom: 0.5rem; }
    .co-cat-list { margin-bottom: 0.8rem; }
    .co-cat-list li { font-size: 0.74rem; padding: 0.25rem 0; }
    .co-cat-btn {
        padding: 0.75rem 1rem;
        font-size: 0.68rem;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Process steps - compact vertical */
    .how-it-works { padding: 2.5rem 0 !important; }
    .hiw-row {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
        padding: 1rem 0 !important;
        margin-bottom: 0.5rem;
    }
    .hiw-reverse { direction: ltr; }
    .hiw-img { height: 180px; border-radius: 6px; overflow: hidden; }
    .hiw-img img { width: 100%; height: 100%; object-fit: cover; }
    .hiw-text { padding: 0 0.25rem; }
    .hiw-ghost-num { font-size: 3.5rem !important; top: -1rem !important; }
    .hiw-step-lbl { font-size: 0.6rem; letter-spacing: 1.5px; }
    .hiw-text h3 { font-size: 1.05rem; margin: 0.3rem 0 0.4rem; }
    .hiw-text p { font-size: 0.78rem; line-height: 1.55; }
    .hiw-detail { margin-top: 0.6rem; }

    /* Materials: 2 col tight */
    .materials-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.7rem !important;
    }
    .material-card { border-radius: 4px; }
    .material-card img { height: 110px; }
    .material-card-body { padding: 0.7rem !important; }
    .material-card-body h4 { font-size: 0.85rem; margin-bottom: 0.2rem; }
    .material-card-body p { font-size: 0.7rem; line-height: 1.4; }

    /* Stories: single col compact, collage smaller */
    .co-section { padding: 2.5rem 0 !important; }
    .co-story.active-slide {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }
    .co-story-collage {
        max-width: 100% !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem;
    }
    .co-collage-img { border-radius: 4px; }
    .co-collage-label { font-size: 0.55rem; padding: 0.25rem 0.5rem; }
    .co-story-content { padding: 0 0.25rem; }
    .co-story-num { font-size: 3rem !important; }
    .co-story-content h3 { font-size: 1.25rem !important; margin-bottom: 0.5rem; }
    .co-story-text { font-size: 0.8rem; line-height: 1.55; margin-bottom: 0.8rem; }
    .co-story-stats { gap: 0.4rem !important; margin-bottom: 0.8rem; }
    .co-stat strong { font-size: 0.95rem; }
    .co-stat span { font-size: 0.62rem; }
    .co-story-price { font-size: 1.1rem; margin-bottom: 0.8rem; }
    .co-story-cta {
        padding: 0.75rem 1.1rem;
        font-size: 0.68rem;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
    }
    .co-story-nav { display: none !important; }
    .co-story-dots { margin-top: 1rem; }

    /* FAQs: tighter padding, smooth taps */
    .faq-list { padding: 0 0.25rem; }
    .faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); }
    .faq-question {
        padding: 0.9rem 0 !important;
        font-size: 0.82rem !important;
        min-height: 44px;
        gap: 0.5rem;
        line-height: 1.4;
    }
    .faq-question::after { font-size: 1.2rem; }
    .faq-answer p {
        font-size: 0.78rem !important;
        line-height: 1.55;
        padding-bottom: 0.9rem !important;
    }
    .faq-item.open .faq-answer { max-height: 600px; }

    /* Form card: full width, tight padding */
    .co-form-card {
        max-width: 100% !important;
        width: 100% !important;
        padding: 1rem !important;
        margin: 0 !important;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .co-form-card .form-row {
        grid-template-columns: 1fr !important;
        gap: 0.7rem !important;
    }
    .co-form-card .form-group { margin-bottom: 0.7rem; }
    .co-form-card label {
        font-size: 0.62rem !important;
        letter-spacing: 1px;
        margin-bottom: 0.3rem;
        text-transform: uppercase;
        font-weight: 600;
    }
    .co-form-card input,
    .co-form-card select,
    .co-form-card textarea {
        height: 44px;
        padding: 0 0.8rem;
        font-size: 0.85rem;
        border-radius: 4px;
        width: 100%;
        border: 1px solid rgba(0,0,0,0.15);
        background: #fff;
        -webkit-appearance: none;
        appearance: none;
    }
    .co-form-card select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23666' d='M6 9L0 3h12z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 0.8rem center;
        padding-right: 2rem;
    }
    .co-form-card textarea {
        height: auto;
        min-height: 90px;
        padding: 0.7rem 0.8rem;
        resize: vertical;
    }
    .co-form-card input[type="file"] {
        padding: 0.55rem 0.6rem;
        height: auto;
        font-size: 0.75rem;
    }
    .co-submit-btn {
        width: 100%;
        padding: 0.95rem 1rem !important;
        font-size: 0.72rem !important;
        letter-spacing: 1.5px;
        min-height: 48px;
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: 4px;
        margin-top: 0.5rem;
        font-weight: 600;
    }

    /* CTA: stacked */
    .cta-section .cta-btns { flex-direction: column; gap: 0.6rem; }
    .cta-section .cta-btns > a {
        width: 100%;
        justify-content: center;
        text-align: center;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
    }

    /* ================================
       CONTACT PAGE
       ================================ */

    /* Form: full width */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }
    .contact-form {
        padding: 1.1rem !important;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .contact-form h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
    .contact-form > p { font-size: 0.78rem; margin-bottom: 1rem; }
    .contact-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 0.7rem !important;
    }
    .contact-form .form-group { margin-bottom: 0.7rem; }
    .contact-form label {
        font-size: 0.62rem !important;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 0.3rem;
        font-weight: 600;
    }
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        height: 44px;
        padding: 0 0.8rem;
        font-size: 0.85rem;
        border-radius: 4px;
        width: 100%;
        border: 1px solid rgba(0,0,0,0.15);
        background: #fff;
        -webkit-appearance: none;
        appearance: none;
    }
    .contact-form select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23666' d='M6 9L0 3h12z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 0.8rem center;
        padding-right: 2rem;
    }
    .contact-form textarea {
        height: auto;
        min-height: 90px;
        padding: 0.7rem 0.8rem;
        resize: vertical;
    }
    .contact-form button[type="submit"] {
        width: 100% !important;
        padding: 0.95rem 1rem !important;
        font-size: 0.72rem !important;
        min-height: 48px !important;
        letter-spacing: 1.5px !important;
        border-radius: 4px;
    }

    /* Contact info: minimal single col */
    .contact-info { padding-top: 0.5rem; }
    .contact-info h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
    .contact-info > p { font-size: 0.78rem; margin-bottom: 1rem; }
    .contact-detail {
        display: flex;
        gap: 0.75rem;
        margin-bottom: 0.9rem;
        padding: 0.6rem 0;
        align-items: flex-start;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .contact-detail:last-of-type { border-bottom: none; }
    .cd-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cd-icon svg { width: 18px; height: 18px; }
    .contact-detail h5 {
        font-size: 0.72rem;
        margin-bottom: 0.15rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        font-weight: 600;
    }
    .contact-detail a {
        font-size: 0.85rem;
        color: var(--black);
        text-decoration: none;
        display: block;
        margin-bottom: 0.1rem;
    }
    .contact-detail p {
        font-size: 0.7rem;
        color: var(--gray);
        line-height: 1.4;
        margin: 0;
    }

    /* Social row: centered */
    .social-row {
        display: flex !important;
        justify-content: center;
        gap: 0.6rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(0,0,0,0.06);
    }
    .social-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    /* Map strip shorter */
    .map-strip { padding: 2rem 0 !important; }
    .map-placeholder {
        padding: 1.5rem 1rem !important;
        min-height: 200px;
        max-height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .map-placeholder p { font-size: 0.82rem; }

    /* Quick links strip: 2 col grid */
    section[style*="cream-dark"] > .container > div[style*="grid-template-columns: repeat"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.7rem !important;
    }
    section[style*="cream-dark"] > .container > div[style*="grid-template-columns: repeat"] > a {
        padding: 1.1rem 0.6rem !important;
        border-radius: 6px;
    }
    section[style*="cream-dark"] > .container > div[style*="grid-template-columns: repeat"] > a > div[style*="1.8rem"] {
        font-size: 1.4rem !important;
        margin-bottom: 0.35rem !important;
    }
    section[style*="cream-dark"] > .container > div[style*="grid-template-columns: repeat"] > a h5 {
        font-size: 0.85rem !important;
    }
    section[style*="cream-dark"] > .container > div[style*="grid-template-columns: repeat"] > a p {
        font-size: 0.68rem !important;
        line-height: 1.35;
    }

    /* ================================
       404 PAGE
       ================================ */
    .error-page {
        margin-top: 55px !important;
        min-height: calc(100vh - 55px);
        padding: 2.5rem 1rem 2.5rem !important;
    }
    .error-content { max-width: 100%; }
    .error-number {
        font-size: 6rem !important;
        margin-bottom: -0.8rem !important;
        -webkit-text-stroke: 1.5px var(--primary);
    }
    .error-title { font-size: 1.7rem !important; margin-bottom: 0.7rem !important; }
    .error-divider { margin: 0 auto 1rem !important; width: 40px; }
    .error-desc {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
        margin-bottom: 1.5rem !important;
        padding: 0 0.5rem;
    }
    .error-links {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.55rem !important;
        max-width: 320px;
        margin: 0 auto;
    }
    .error-links a {
        padding: 0.85rem 0.6rem !important;
        font-size: 0.62rem !important;
        letter-spacing: 1px !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        text-align: center;
    }

    /* ================================
       SEARCH PAGE
       ================================ */
    .search-page {
        padding: 1.5rem 0 2.5rem !important;
        margin-top: 55px !important;
    }
    .search-header { margin-bottom: 1.5rem !important; padding: 0 0.25rem; }
    .search-header h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.8rem !important;
    }
    .search-form {
        flex-direction: row !important;
        max-width: 100% !important;
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 0.8rem !important;
    }
    .search-form input {
        height: 44px;
        padding: 0 0.9rem !important;
        font-size: 0.85rem !important;
        min-width: 0;
        flex: 1;
    }
    .search-form button {
        padding: 0 1rem !important;
        height: 44px;
        font-size: 0.65rem !important;
        letter-spacing: 1px !important;
        min-width: 80px;
    }
    .search-meta { font-size: 0.72rem !important; }

    /* Results grids: 2 col on mobile */
    .search-page .prod-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.7rem !important;
    }
    .search-collection-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.7rem !important;
    }
    .search-collection-card { border-radius: 6px; }
    .search-collection-card-img { aspect-ratio: 4/3; }
    .search-collection-card-info { padding: 0.7rem !important; }
    .search-collection-card-info h4 { font-size: 0.88rem !important; }
    .search-collection-card-info p { font-size: 0.7rem !important; line-height: 1.4; }

    .search-section { margin-bottom: 1.5rem !important; }
    .search-section-title {
        font-size: 0.62rem !important;
        margin-bottom: 0.9rem !important;
        padding-bottom: 0.5rem !important;
        letter-spacing: 1.5px;
    }

    /* No results centered compact */
    .no-results { padding: 2rem 1rem !important; }
    .no-results h2 { font-size: 1.2rem !important; margin-bottom: 0.5rem !important; }
    .no-results p {
        font-size: 0.8rem !important;
        margin-bottom: 1.2rem !important;
        line-height: 1.5;
    }
    .no-results .suggestion-links {
        gap: 0.5rem !important;
        justify-content: center;
    }
    .no-results .suggestion-links a {
        padding: 0.7rem 1rem !important;
        font-size: 0.64rem !important;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        border-radius: 4px;
    }
}

/* Tablet: 3 col search results */
@media (min-width: 600px) and (max-width: 1024px) {
    .search-page .prod-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .search-collection-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 480px) {
    /* Custom order - extra tight */
    .co-hero-cta { padding: 0.8rem 1.2rem !important; font-size: 0.68rem !important; }
    .materials-grid { gap: 0.5rem !important; }
    .material-card img { height: 95px; }
    .material-card-body { padding: 0.6rem !important; }
    .material-card-body h4 { font-size: 0.78rem; }
    .material-card-body p { font-size: 0.66rem; }

    .co-story-collage { grid-template-columns: 1fr 1fr !important; gap: 0.35rem; }
    .co-story-num { font-size: 2.5rem !important; }
    .co-story-content h3 { font-size: 1.1rem !important; }
    .co-story-stats { grid-template-columns: repeat(3, 1fr); gap: 0.3rem !important; }
    .co-stat strong { font-size: 0.85rem; }
    .co-stat span { font-size: 0.56rem; }

    /* 404 page smaller */
    .error-number { font-size: 4.5rem !important; -webkit-text-stroke: 1px var(--primary); }
    .error-title { font-size: 1.4rem !important; }
    .error-desc { font-size: 0.78rem !important; }

    /* Search tighter */
    .search-form button { min-width: 64px; padding: 0 0.7rem !important; font-size: 0.6rem !important; }
    .search-header h1 { font-size: 1.3rem !important; }

    /* Map slightly shorter */
    .map-placeholder { min-height: 180px; max-height: 180px; }
}

/* ==========================
   MOBILE POLISH - PHASE 3
   About / Services / B2B - App Polish
   ========================== */

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

    /* ========================
       ABOUT PAGE
       ======================== */

    /* Hero: compressed */
    .page-hero { padding: 3rem 0 2rem !important; }
    .page-hero h1 { font-size: 1.65rem !important; margin-bottom: 0.5rem; }
    .page-hero p { font-size: 0.82rem; line-height: 1.55; margin-bottom: 0.75rem; }
    .page-hero .label { font-size: 0.65rem; letter-spacing: 2px; margin-bottom: 0.5rem; }
    .page-hero .breadcrumb { font-size: 0.7rem; }

    /* Hide decorative hero background overlay */
    .page-hero > div[style*="position: absolute"][style*="background: url"] { opacity: 0.05 !important; }

    /* Story section: stacked tight */
    .about-section, .about-section.about-page { padding: 2rem 0 !important; }
    .about-grid { gap: 1.25rem !important; }
    .about-text .label { font-size: 0.65rem; margin-bottom: 0.4rem; }
    .about-text h2 { font-size: 1.4rem !important; line-height: 1.2; margin-bottom: 0.7rem; }
    .about-text p { font-size: 0.85rem !important; line-height: 1.6 !important; margin-bottom: 0.7rem; }
    .about-text .link-arrow { font-size: 0.78rem; margin-top: 0.3rem; }
    .about-visual { margin-top: 0.25rem; }
    .about-visual img { border-radius: 8px; max-height: 260px; object-fit: cover; }
    .about-visual-badge { padding: 0.55rem 0.8rem !important; }
    .about-visual-badge span { font-size: 0.6rem; }
    .about-visual-badge strong { font-size: 1.2rem !important; }

    /* Stats 2x2: smaller numbers, tighter gaps */
    .about-stats { gap: 0.6rem !important; margin-top: 1rem !important; }
    .about-stats .counter { padding: 0.7rem 0.4rem !important; }
    .about-stats .counter-val { font-size: 1.35rem !important; }
    .about-stats .counter-val sup { font-size: 0.75rem !important; }
    .about-stats .counter p { font-size: 0.62rem !important; letter-spacing: 0.5px; margin-top: 0.25rem; }

    /* Section heads compact */
    .section-head { margin-bottom: 1.5rem !important; }
    .section-head h2 { font-size: 1.4rem !important; line-height: 1.2; }
    .section-head .label { font-size: 0.65rem; margin-bottom: 0.4rem; }
    .section-head .deco.simple { margin-top: 0.5rem; transform: scale(0.75); }
    .section-head .deco.simple span { display: none; }
    .section-head .deco.simple i { font-size: 0; }

    /* Timeline: cleaner vertical line, smaller dots, tighter spacing */
    .timeline { padding-left: 30px !important; margin-top: 0.5rem; }
    .timeline::before {
        left: 12px !important;
        width: 1px !important;
        background: rgba(148, 74, 62, 0.25) !important;
    }
    .timeline-item { margin-bottom: 1.25rem !important; }
    .timeline-dot {
        left: -30px !important;
        width: 26px !important;
        height: 26px !important;
        border-width: 2px !important;
        background: var(--cream-dark);
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
    }
    .timeline-dot .tl-year { font-size: 0.58rem !important; font-weight: 600; }
    .timeline-item h4 { font-size: 0.95rem !important; margin-bottom: 0.25rem !important; }
    .timeline-item p { font-size: 0.78rem !important; line-height: 1.55 !important; }

    /* Values: 1-col cards, compact */
    .values-section { padding: 2.25rem 0 !important; }
    .about-values-grid { gap: 0.7rem !important; margin-top: 1rem !important; }
    .why-card { padding: 1.1rem !important; }
    .why-card .why-card-num { font-size: 1.6rem; top: 0.6rem; right: 0.8rem; opacity: 0.25; }
    .why-card .why-icon { width: 36px; height: 36px; margin-bottom: 0.55rem; }
    .why-card .why-icon svg { width: 22px; height: 22px; }
    .why-card h4 { font-size: 0.95rem !important; margin-bottom: 0.3rem; }
    .why-card p { font-size: 0.78rem !important; line-height: 1.55 !important; }

    /* Capabilities: 1-col tight list */
    .cap-grid { gap: 0.6rem !important; }
    .cap-card { padding: 0.9rem 1rem !important; }
    .cap-card .cap-card-num { font-size: 1.4rem; opacity: 0.25; }
    .cap-card .cap-card-icon { width: 32px; height: 32px; margin-bottom: 0.4rem; }
    .cap-card .cap-card-icon svg { width: 20px; height: 20px; }
    .cap-card h4 { font-size: 0.9rem !important; margin-bottom: 0.2rem; }
    .cap-card p { font-size: 0.76rem !important; line-height: 1.5 !important; }

    /* CTA: single button column, compressed */
    .cta-section { padding: 2.25rem 0 !important; }
    .cta-inner { padding: 1.5rem 1rem !important; }
    .cta-content .label { font-size: 0.65rem; margin-bottom: 0.4rem; }
    .cta-content h2 { font-size: 1.35rem !important; line-height: 1.25; margin-bottom: 0.5rem; }
    .cta-content p { font-size: 0.82rem !important; margin-bottom: 1rem; }
    .cta-btns { gap: 0.5rem !important; }
    .btn-cta-primary, .btn-cta-wa {
        padding: 0.8rem 1rem !important;
        font-size: 0.78rem !important;
        min-height: 46px !important;
        border-radius: 6px;
    }

    /* ========================
       SERVICES PAGE
       ======================== */

    /* Stats 2x2 compact */
    .svc-stats { gap: 0.5rem !important; padding: 1rem 0 !important; }
    .svc-stats .svc-stat { padding: 0.7rem 0.4rem !important; }
    .svc-stats .stat-val { font-size: 1.35rem !important; }
    .svc-stats .stat-label { font-size: 0.6rem !important; letter-spacing: 0.5px; margin-top: 0.2rem; }

    /* Service rows: tight stack, image above text */
    .svc-section { padding: 1.75rem 0 !important; }
    .svc-row, .svc-row.reverse { gap: 1.1rem !important; }
    .svc-row-img img { max-height: 220px; object-fit: cover; border-radius: 8px; }
    .svc-icon { width: 38px !important; height: 38px !important; margin-bottom: 0.5rem; }
    .svc-icon svg { width: 22px; height: 22px; }
    .svc-label { font-size: 0.62rem !important; letter-spacing: 1.5px; margin-bottom: 0.3rem; }
    .svc-row h2 { font-size: 1.3rem !important; line-height: 1.2; margin-bottom: 0.5rem; }
    .svc-row p { font-size: 0.82rem !important; line-height: 1.6 !important; margin-bottom: 0.7rem; }

    /* Hollow circle bullets: aligned & compact */
    .svc-row ul { padding-left: 0 !important; margin: 0.5rem 0 0.9rem !important; }
    .svc-row ul li {
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
        padding-left: 18px !important;
        margin-bottom: 0.35rem !important;
    }
    .svc-row ul li::before {
        width: 7px !important;
        height: 7px !important;
        top: 0.55em !important;
        left: 2px !important;
        border-width: 1.5px !important;
    }

    /* Service button: full-width, app-style */
    .svc-btn {
        padding: 0.8rem 1rem !important;
        font-size: 0.78rem !important;
        min-height: 46px !important;
        border-radius: 6px;
        margin-top: 0.3rem;
    }

    /* Mini cards: 2 col tighter */
    .svc-mini-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem !important; }
    .svc-mini-grid .mini-card { padding: 0.9rem 0.7rem !important; }
    .svc-mini-grid .mini-card svg,
    .svc-mini-grid .mini-card .mini-icon { width: 28px !important; height: 28px !important; margin-bottom: 0.4rem; }
    .svc-mini-grid .mini-card h5 { font-size: 0.78rem !important; line-height: 1.25; }

    /* Process steps: 1 col with number badges */
    .process-strip { padding: 2.25rem 0 !important; }
    .process-strip .section-head { margin-bottom: 1.5rem !important; }
    .process-steps { gap: 0.7rem !important; }
    .process-step {
        padding: 1rem 1rem 1rem 3.25rem !important;
        position: relative;
        background: rgba(255,255,255,0.04);
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.06);
    }
    .process-step .step-num {
        position: absolute !important;
        left: 0.75rem !important;
        top: 1rem !important;
        width: 30px; height: 30px;
        background: var(--primary);
        color: #fff;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.75rem !important;
        font-family: 'Inter', sans-serif;
        font-weight: 600;
    }
    .process-step .step-icon { display: none; }
    .process-step h4 { font-size: 0.9rem !important; margin-bottom: 0.25rem !important; color: #fff; }
    .process-step p { font-size: 0.78rem !important; line-height: 1.5 !important; }

    /* Promise grid: 2x2 smaller icons */
    .promise { padding: 2.25rem 0 !important; }
    .promise h2 { font-size: 1.35rem !important; margin-bottom: 1.25rem !important; }
    .promise-grid { gap: 0.6rem !important; }
    .promise-item { padding: 0.9rem 0.5rem !important; }
    .promise-item svg { width: 32px !important; height: 32px !important; margin-bottom: 0.35rem; }
    .promise-item h5 { font-size: 0.72rem !important; line-height: 1.2 !important; }

    /* Grow strip: compact */
    .grow-strip { padding: 1.75rem 0 !important; }
    .grow-strip .strip-inner { padding: 1.25rem 1rem !important; gap: 0.8rem !important; border-radius: 8px; }
    .grow-strip .strip-text h3 { font-size: 1.1rem !important; line-height: 1.3; margin-bottom: 0.3rem; }
    .grow-strip .strip-text p { font-size: 0.78rem !important; line-height: 1.55; }
    .btn-strip { padding: 0.8rem 1rem !important; font-size: 0.78rem !important; min-height: 46px !important; border-radius: 6px; }

    /* ========================
       B2B PAGE
       ======================== */

    /* Why cards carousel: tighter single card */
    .why-us { padding: 2rem 0 !important; }
    .why-us .section-head { margin-bottom: 1rem !important; }
    .why-us .section-head .section-sub { font-size: 0.78rem; margin-top: 0.3rem; }
    .why-carousel-wrap { padding: 0 4px !important; gap: 0 !important; }
    .why-carousel { padding: 0 6px; }
    .why-carousel .why-card {
        padding: 1.1rem !important;
        min-height: auto !important;
    }
    .why-carousel .why-card h4 { font-size: 0.95rem !important; margin-bottom: 0.3rem; }
    .why-carousel .why-card p { font-size: 0.78rem !important; line-height: 1.55 !important; }
    .why-carousel .why-card .why-icon { width: 36px; height: 36px; margin-bottom: 0.5rem; }
    .why-carousel .why-card .why-icon svg { width: 22px; height: 22px; }
    .why-carousel .why-card .why-card-num { font-size: 1.4rem; opacity: 0.22; }
    .why-nav { width: 32px !important; height: 32px !important; min-width: 32px !important; }
    .why-nav svg { width: 12px !important; height: 24px !important; }
    .why-dots { margin-top: 0.9rem !important; gap: 0.3rem; }
    .why-dots span, .why-dots .dot { width: 6px !important; height: 6px !important; }

    /* Manufacturing detail: stacked (image above) — verified */
    .mfg-detail-section { padding: 1.75rem 0 !important; }
    .mfg-detail, .mfg-detail.reverse { gap: 1rem !important; }
    .mfg-gallery-main { position: relative; }
    .mfg-gallery-main img { max-height: 240px; object-fit: cover; border-radius: 8px; }
    .mfg-detail-num { font-size: 1.8rem !important; top: 8px !important; right: 10px !important; }
    .mfg-gallery-thumbs { gap: 0.35rem !important; margin-top: 0.5rem; }
    .mfg-thumb img { height: 56px !important; border-radius: 4px; }
    .mfg-card-icon { width: 40px !important; height: 40px !important; margin-bottom: 0.4rem; }
    .mfg-card-icon svg { width: 22px; height: 22px; }
    .mfg-detail-content .label { font-size: 0.62rem !important; }
    .mfg-detail-content h3 { font-size: 1.2rem !important; margin: 0.3rem 0 0.5rem !important; line-height: 1.25 !important; }
    .mfg-detail-content > p { font-size: 0.82rem !important; line-height: 1.6 !important; margin-bottom: 0.8rem !important; }

    /* mfg-feat bullets: compact 2-col */
    .mfg-detail-features {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.4rem 0.6rem !important;
        margin-bottom: 0.9rem !important;
    }
    .mfg-feat {
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
        gap: 0.3rem !important;
    }
    .mfg-feat svg { width: 13px !important; height: 13px !important; margin-top: 2px !important; }

    /* Tags: smaller, hide overflow */
    .mfg-tags {
        gap: 0.3rem !important;
        max-height: 56px;
        overflow: hidden;
        position: relative;
    }
    .mfg-tags span {
        font-size: 0.62rem !important;
        padding: 0.25rem 0.55rem !important;
        letter-spacing: 0.5px;
    }

    /* MOQ info strip: compact */
    .moq-info-strip .label { font-size: 0.62rem !important; }
    .moq-info-strip h3 { font-size: 1.1rem !important; margin: 0.5rem 0 0.6rem !important; line-height: 1.3 !important; }
    .moq-info-strip p { font-size: 0.78rem !important; line-height: 1.6 !important; margin-bottom: 0.9rem !important; }
    .moq-info-strip .btn-primary {
        padding: 0.8rem 1rem !important;
        font-size: 0.78rem !important;
        min-height: 46px !important;
        border-radius: 6px;
    }

    /* Partner steps: vertical with small numbered circles */
    .partner-steps { gap: 0.6rem !important; }
    .partner-step {
        padding: 0.9rem 1rem 0.9rem 3rem !important;
        background: #fff;
        border-radius: 8px;
        border: 1px solid rgba(0,0,0,0.05);
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }
    .partner-step::before {
        left: 0.7rem !important;
        top: 50% !important;
        transform: translateY(-50%);
        width: 28px; height: 28px;
        background: var(--primary);
        color: #fff;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.72rem !important;
        font-family: 'Inter', sans-serif !important;
        font-weight: 600 !important;
    }
    .partner-step h5 { font-size: 0.88rem !important; margin-bottom: 0.2rem !important; }
    .partner-step p { font-size: 0.76rem !important; line-height: 1.5 !important; }

    /* B2B Testimonials: 1 per view compact */
    section[style*="background: #1a1a1a"] > .container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 0.7rem !important;
        margin-top: 1.25rem !important;
    }
    section[style*="background: #1a1a1a"] > .container > div[style*="grid-template-columns"] > div {
        padding: 1.1rem !important;
        border-radius: 8px !important;
    }
    section[style*="background: #1a1a1a"] > .container > div[style*="grid-template-columns"] > div p {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
        margin-bottom: 0.9rem !important;
    }
    section[style*="background: #1a1a1a"] > .container > div[style*="grid-template-columns"] > div img {
        width: 38px !important;
        height: 38px !important;
    }
    section[style*="background: #1a1a1a"] > .container > div[style*="grid-template-columns"] > div strong { font-size: 0.8rem !important; }
    section[style*="background: #1a1a1a"] > .container > div[style*="grid-template-columns"] > div div p { font-size: 0.68rem !important; }

    /* Generic: shrink inline section padding */
    section[style*="padding: 5rem 0"] { padding: 2rem 0 !important; }
    section[style*="padding: 4rem 0"] { padding: 1.75rem 0 !important; }
    section[style*="padding: 5rem 0 0"] { padding: 2rem 0 0 !important; }

    /* Subtle dividers */
    .section-head .deco { opacity: 0.5; }
}

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

    /* Hero even tighter */
    .page-hero { padding: 2.5rem 0 1.5rem !important; }
    .page-hero h1 { font-size: 1.45rem !important; }
    .page-hero p { font-size: 0.78rem; }

    .section-head h2 { font-size: 1.25rem !important; }

    /* Stats */
    .about-stats .counter-val { font-size: 1.2rem !important; }
    .about-stats .counter p { font-size: 0.58rem !important; }
    .svc-stats .stat-val { font-size: 1.2rem !important; }
    .svc-stats .stat-label { font-size: 0.55rem !important; }

    /* Timeline dots smaller */
    .timeline { padding-left: 26px !important; }
    .timeline::before { left: 10px !important; }
    .timeline-dot { left: -26px !important; width: 22px !important; height: 22px !important; }
    .timeline-dot .tl-year { font-size: 0.52rem !important; }
    .timeline-item h4 { font-size: 0.88rem !important; }
    .timeline-item p { font-size: 0.74rem !important; }

    /* Services */
    .svc-row h2 { font-size: 1.15rem !important; }
    .svc-row-img img { max-height: 190px; }

    /* Process steps */
    .process-step { padding-left: 3rem !important; }
    .process-step .step-num { width: 26px; height: 26px; font-size: 0.68rem !important; left: 0.65rem !important; }

    /* Promise */
    .promise-item svg { width: 28px !important; height: 28px !important; }
    .promise-item h5 { font-size: 0.68rem !important; }

    /* B2B Mfg */
    .mfg-detail-content h3 { font-size: 1.05rem !important; }
    .mfg-gallery-main img { max-height: 200px; }
    .mfg-feat { font-size: 0.7rem !important; }

    /* Partner steps smaller circle */
    .partner-step { padding-left: 2.75rem !important; }
    .partner-step::before { width: 24px; height: 24px; font-size: 0.65rem !important; left: 0.6rem !important; }

    /* CTA tighter */
    .cta-content h2 { font-size: 1.2rem !important; }
    .cta-content p { font-size: 0.76rem !important; }
    .cta-inner { padding: 1.25rem 0.85rem !important; }
}


/* ==========================
   MOBILE POLISH - PHASE 3
   Homepage + Header + Footer
   App-quality refinement
   ========================== */

@media (max-width: 768px) {

    /* ========== HEADER (app-like sticky, subtle) ========== */
    .header {
        position: sticky !important;
        top: 0;
        z-index: 999;
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        background: rgba(255, 255, 255, 0.92) !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.05);
        transition: box-shadow 0.25s ease, background 0.25s ease;
    }
    .header.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
    .header-wrap {
        padding: 8px 14px !important;
        min-height: 52px;
    }
    .logo-img { height: 30px !important; }
    .crafted-tag { display: none !important; }

    /* Cleaner hamburger — refined lines */
    .mobile-menu {
        width: 40px !important;
        height: 40px !important;
        background: transparent;
        border: none;
        padding: 0;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }
    .mobile-menu span {
        width: 20px;
        height: 1.5px;
        background: #1a1a2e;
        border-radius: 2px;
        display: block;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    /* Hide currency in header — declutter */
    .currency-wrapper { display: none !important; }

    /* Mobile drawer — app slide-in, darker overlay */
    .mobile-overlay {
        background: rgba(10, 10, 20, 0.55) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .mobile-nav {
        width: 82% !important;
        max-width: 300px !important;
        box-shadow: -8px 0 40px rgba(0,0,0,0.22) !important;
    }
    .mobile-nav-header {
        padding: 18px 18px 14px !important;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .mobile-nav-links { padding: 8px 6px !important; }
    .mobile-nav-links a {
        padding: 13px 16px !important;
        font-size: 0.82rem !important;
        letter-spacing: 1.8px !important;
        min-height: 46px !important;
        border-bottom: 1px solid rgba(0,0,0,0.04);
    }
    .mobile-nav-links a:last-child { border-bottom: none; }

    /* ========== HERO (compressed, impactful) ========== */
    .hero {
        height: 58vh !important;
        min-height: 380px !important;
        max-height: 560px;
    }
    .slide-content { width: 90% !important; padding: 0 4px !important; }
    .slide-tag {
        font-size: 0.55rem !important;
        letter-spacing: 2.2px !important;
        margin-bottom: 0.5rem !important;
    }
    .slide-content h1 {
        font-size: 1.7rem !important;
        line-height: 1.15 !important;
        margin-bottom: 0.55rem !important;
        letter-spacing: -0.3px;
    }
    .slide-content p {
        font-size: 0.78rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
        opacity: 0.92;
    }
    .slide-btns { max-width: 240px !important; gap: 0.5rem !important; }
    .btn-hero, .btn-hero-outline {
        padding: 0.8rem 1rem !important;
        font-size: 0.68rem !important;
        min-height: 42px !important;
    }
    /* Keep only primary CTA for focus */
    .slide-btns .btn-hero-outline { display: none !important; }

    /* Hide non-essential hero chrome */
    .hero-nav { display: none !important; }
    .hero-progress { display: none !important; }
    .scroll-hint { display: none !important; }
    .hero-dots { bottom: 14px !important; gap: 6px !important; }
    .hero-dots .dot { width: 5px !important; height: 5px !important; }
    .hero-dots .dot.active { width: 18px !important; border-radius: 3px !important; }

    /* ========== MARQUEE (tight) ========== */
    .clients { padding: 0.6rem 0 !important; }
    .marquee-track {
        animation-duration: 20s !important;
        gap: 0.9rem !important;
    }
    .marquee-track span {
        font-size: 0.6rem !important;
        letter-spacing: 1.3px !important;
    }
    .tag-b2b { font-size: 0.6rem !important; letter-spacing: 1.3px !important; padding: 0 !important; }
    .tag-sep { font-size: 0.55rem !important; opacity: 0.5; }

    /* ========== SECTION HEADS (tighter, no deco) ========== */
    .section-head { margin-bottom: 1.2rem !important; }
    .section-head .label {
        font-size: 0.55rem !important;
        letter-spacing: 2.2px !important;
    }
    .section-head h2 {
        font-size: 1.45rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.2px;
    }
    .section-sub {
        font-size: 0.78rem !important;
        line-height: 1.5 !important;
    }
    /* Remove decorative divider on mobile */
    .section-head .deco { display: none !important; }

    /* ========== PILLARS (show only 2 on mobile) ========== */
    .products-hero { padding: 1.8rem 0 2rem !important; }
    .pillars-grid { gap: 0.8rem !important; }
    .pillar-card:nth-child(n+3) { display: none !important; }
    .pillar-img { height: 190px !important; }
    .pillar-num { font-size: 2rem !important; }
    .pillar-body { padding: 1rem 1rem 1.2rem !important; }
    .pillar-cat {
        font-size: 0.55rem !important;
        letter-spacing: 1.5px !important;
    }
    .pillar-body h3 { font-size: 1.2rem !important; margin-bottom: 0.4rem; }
    .pillar-body p {
        font-size: 0.78rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.7rem;
    }
    .pillar-tags { gap: 0.3rem; margin-bottom: 0.8rem; }
    .pillar-tags span { font-size: 0.55rem !important; padding: 3px 8px !important; }
    .cl-view { font-size: 0.65rem !important; letter-spacing: 1.5px; }

    /* ========== SERVICES (tight, compact) ========== */
    .services { padding: 2rem 0 !important; }
    .services-visual {
        min-height: 160px !important;
        height: 38vw !important;
        max-height: 200px;
    }
    .services-visual-overlay .svo-big { font-size: 2.2rem !important; }
    .services-visual-overlay .svo-tag { font-size: 0.65rem !important; }
    .services-content { padding: 1.5rem 1rem 1.8rem !important; }
    .svc-head h2 { font-size: 1.4rem !important; }
    .svc-head p { font-size: 0.78rem !important; line-height: 1.5; }
    .svc-list { margin-top: 1rem; }
    .svc-item {
        padding: 0.8rem 0.3rem !important;
        gap: 0.6rem !important;
    }
    .svc-num { font-size: 0.75rem !important; min-width: 26px; }
    .svc-info h4 { font-size: 0.88rem !important; margin-bottom: 0.15rem; }
    .svc-info p {
        font-size: 0.7rem !important;
        line-height: 1.45 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .svc-arr { font-size: 1rem; }

    /* ========== CUSTOM ORDER (hide deco small img) ========== */
    .custom-section { padding: 2rem 0 !important; }
    .custom-grid { gap: 1.2rem !important; }
    .custom-text h2 { font-size: 1.45rem !important; }
    .custom-text p { font-size: 0.8rem !important; line-height: 1.55; }
    .custom-list li {
        font-size: 0.78rem !important;
        padding: 0.4rem 0 !important;
    }
    /* Remove decorative overlap image */
    .custom-img-small { display: none !important; }
    .custom-img-wrap { height: 240px !important; }
    .custom-badge {
        width: 62px !important;
        height: 62px !important;
        font-size: 0.55rem !important;
    }
    .custom-badge strong { font-size: 0.7rem !important; }

    /* ========== B2B SECTION on homepage (tighter) ========== */
    .hb2b-section { padding: 2rem 0 !important; }
    .hb2b-header h2 { font-size: 1.45rem !important; }
    .hb2b-header p { font-size: 0.78rem !important; }
    .hb2b-nav { display: none !important; }
    .hb2b-image { height: 200px !important; }
    .hb2b-content { padding: 1.2rem 1rem !important; }
    .hb2b-content h3 { font-size: 1.2rem !important; }
    .hb2b-content p { font-size: 0.78rem !important; line-height: 1.5; }
    .hb2b-num { font-size: 1.6rem !important; }
    .hb2b-btn { font-size: 0.7rem !important; padding: 0.85rem 1.4rem !important; }

    /* ========== PRODUCT SHOWCASE (4 products, simpler tabs) ========== */
    .product-showcase { padding: 2rem 0 !important; }
    .showcase-tabs { margin: 0 -14px 1rem !important; padding: 0 14px !important; }
    .tab-btn {
        padding: 0.6rem 0.9rem !important;
        font-size: 0.6rem !important;
        letter-spacing: 1.5px !important;
        min-height: 36px !important;
    }
    .showcase-grid.active {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }
    /* Limit to 4 items (2x2) on mobile */
    .showcase-grid.active .showcase-item:nth-child(n+5) { display: none !important; }
    .showcase-body { padding: 0.55rem 0.35rem 0.9rem !important; }
    .showcase-body h5 { font-size: 0.76rem !important; line-height: 1.3; }
    .showcase-price { font-size: 0.66rem !important; margin-bottom: 0.15rem; }
    .showcase-badge { font-size: 0.5rem !important; padding: 2px 6px !important; }
    .showcase-enquire { font-size: 0.62rem !important; }
    .showcase-footer { margin-top: 1.2rem !important; padding: 1rem 0 0 !important; }
    .showcase-footer p { font-size: 0.78rem !important; }

    /* ========== HOW IT WORKS (show 2 steps, no ghost num) ========== */
    .how-it-works { padding: 2rem 0 1rem !important; }
    /* Scannable — show only first 2 steps on mobile */
    .hiw-journey > .hiw-row:nth-of-type(n+3),
    .hiw-journey > .hiw-reverse:nth-of-type(n+3) { display: none !important; }
    .hiw-row, .hiw-reverse { margin-bottom: 1rem !important; }
    .hiw-row .hiw-img, .hiw-reverse .hiw-img { height: 170px !important; }
    .hiw-row .hiw-text, .hiw-reverse .hiw-text { padding: 1rem 0.5rem 0 !important; }
    /* Remove decorative ghost number */
    .hiw-ghost-num { display: none !important; }
    .hiw-text h3 { font-size: 1.2rem !important; margin-bottom: 0.4rem !important; }
    .hiw-text p { font-size: 0.8rem !important; line-height: 1.55 !important; }
    .hiw-detail { font-size: 0.7rem !important; padding: 0.4rem 0 !important; }
    .hiw-cta { margin-top: 0.8rem !important; }
    .hiw-cta .btn-view-all { font-size: 0.7rem !important; }

    /* ========== WHY US (compact card) ========== */
    .why-us { padding: 2rem 0 !important; }
    .why-card {
        padding: 1.4rem 1rem !important;
        min-height: auto !important;
    }
    .why-card-num { font-size: 2.6rem !important; margin-bottom: 0.3rem; }
    .why-card h4 { font-size: 0.92rem !important; margin-bottom: 0.5rem; }
    .why-card p { font-size: 0.78rem !important; line-height: 1.5 !important; }
    .why-dots { margin-top: 0.8rem; }

    /* ========== ABOUT on homepage (tighter stats, smaller img) ========== */
    .about-section { padding: 2rem 0 !important; }
    .about-grid { gap: 1.3rem !important; }
    .about-text h2 { font-size: 1.5rem !important; line-height: 1.25; }
    .about-text p {
        font-size: 0.8rem !important;
        line-height: 1.55 !important;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .about-stats { gap: 0 !important; }
    .about-stats .counter { padding: 0.8rem 0.3rem !important; }
    .counter-val span { font-size: 1.4rem !important; }
    .counter-val sup { font-size: 0.75rem !important; }
    .counter p {
        font-size: 0.58rem !important;
        letter-spacing: 1.2px !important;
        line-height: 1.3;
    }
    .about-visual { max-height: 280px !important; }
    .about-visual-badge { padding: 0.8rem !important; }
    .about-visual-badge strong { font-size: 1.1rem !important; }
    /* Hide timeline on homepage — link to about page via CTA */
    .about-section .about-timeline,
    .about-section .timeline { display: none !important; }
    .about-text .btn-view-all { font-size: 0.7rem !important; }

    /* ========== COLLECTIONS on homepage (1 compact slide) ========== */
    .collection-section { padding: 2rem 0 !important; }
    .col-carousel { height: auto !important; min-height: 340px; }
    .col-header h2 { font-size: 1.45rem !important; }
    .col-panel { padding: 1.4rem 1rem !important; }
    .col-panel h3 { font-size: 1.3rem !important; }
    .col-panel p { font-size: 0.78rem !important; line-height: 1.5; }
    /* Hide oversized ghost number */
    .col-ghost { display: none !important; }
    /* Compact thumbs — show max 3 */
    .col-thumbs { gap: 0.3rem; }
    .col-thumb:nth-child(n+4) { display: none !important; }
    .col-thumb {
        padding: 0.5rem 0.3rem !important;
        min-height: 42px !important;
    }
    .col-thumb span { font-size: 0.65rem !important; letter-spacing: 0.8px; }
    .col-prod-thumb { width: 40px !important; height: 40px !important; }

    /* ========== TESTIMONIALS (single compact card) ========== */
    .testimonials { padding: 2rem 0 !important; }
    .test-main { padding: 1.4rem 1rem !important; }
    .test-card p { font-size: 0.82rem !important; line-height: 1.55 !important; }
    .test-card span { font-size: 0.72rem !important; }
    .test-card .test-avatar { width: 50px !important; height: 50px !important; }
    .test-card .test-product-img { width: 58px !important; height: 58px !important; }
    .test-btn { width: 34px !important; height: 34px !important; }

    /* ========== HOMEPAGE CTA (single stacked button) ========== */
    .cta-section { padding: 0 !important; }
    .cta-section .cta-inner { padding: 2.2rem 1rem !important; }
    .cta-section .cta-content .label { font-size: 0.55rem !important; }
    .cta-section .cta-content h2 { font-size: 1.4rem !important; line-height: 1.2 !important; }
    .cta-section .cta-content p { font-size: 0.8rem !important; line-height: 1.5 !important; }
    .cta-btns {
        max-width: 280px !important;
        gap: 0.5rem !important;
    }
    /* Keep primary CTA, hide extras */
    .cta-btns > *:nth-child(n+3) { display: none !important; }
    .cta-btns .btn-view-all,
    .cta-btns .btn-cta-primary,
    .cta-btns .btn-cta-wa {
        min-height: 46px !important;
        padding: 0.85rem 1rem !important;
        font-size: 0.72rem !important;
    }

    /* ========== GROW STRIP (compact) ========== */
    .grow-strip { padding: 1.4rem 0 !important; }
    .strip-inner {
        padding: 1.1rem 1rem !important;
        gap: 0.8rem !important;
    }
    .strip-text h3 { font-size: 1rem !important; margin-bottom: 0.2rem; }
    .strip-text p { font-size: 0.76rem !important; line-height: 1.45; }
    .strip-inner .btn-view-all,
    .strip-inner a {
        font-size: 0.68rem !important;
        padding: 0.7rem 1rem !important;
        min-height: 40px;
    }

    /* ========== PROMISE (compact 2x2) ========== */
    .promise { padding: 1.8rem 0 !important; }
    .promise h2 { font-size: 1.3rem !important; margin-bottom: 1rem !important; }
    .promise-grid { gap: 0.9rem !important; }
    .promise-item svg { width: 38px !important; height: 38px !important; }
    .promise-item h5 {
        font-size: 0.76rem !important;
        letter-spacing: 0.5px;
    }

    /* ========== FOOTER (minimal — logo + social + contact only) ========== */
    .footer-main {
        padding: 1.5rem 1rem 0.5rem !important;
        gap: 0 !important;
    }
    /* Hide link columns for minimal app feel */
    .footer-col,
    .footer-col.right { display: none !important; }
    .footer-center {
        padding: 0.5rem 0 1rem !important;
        border-bottom: none !important;
    }
    .footer-center .footer-logo-img { height: 34px !important; }
    .footer-center .footer-tagline {
        font-size: 0.72rem !important;
        line-height: 1.45;
        margin-bottom: 0.8rem;
    }
    .footer-center .social { gap: 0.6rem !important; margin-bottom: 0.8rem; }
    .footer-center .social a { width: 34px !important; height: 34px !important; }
    .footer-center .divider { margin: 0.6rem auto !important; width: 40px; }
    .footer-center h5 {
        font-size: 0.62rem !important;
        letter-spacing: 1.8px !important;
        margin-bottom: 0.4rem !important;
    }
    .footer-center p { font-size: 0.72rem !important; padding: 0.1rem 0 !important; }
    .footer-center .address {
        font-size: 0.68rem !important;
        line-height: 1.5 !important;
        padding: 0 0.5rem;
    }
    .footer-bottom {
        padding: 0.8rem 1rem !important;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .footer-bottom p { font-size: 0.62rem !important; letter-spacing: 0.5px; }
    .footer-disclaimer { padding: 0.6rem 1rem !important; }
    .footer-disclaimer p,
    .footer-disclaimer span,
    .footer-disclaimer div {
        font-size: 0.56rem !important;
        line-height: 1.5 !important;
    }

    /* Floating scroll-top compact */
    .scroll-top {
        width: 38px !important;
        height: 38px !important;
        bottom: 72px !important;
        right: 12px !important;
    }
}

/* ========== EXTRA SMALL (≤ 480px) — final tightening ========== */
@media (max-width: 480px) {
    .hero {
        height: 55vh !important;
        min-height: 360px !important;
    }
    .slide-content h1 { font-size: 1.5rem !important; }
    .slide-content p { font-size: 0.74rem !important; }
    .btn-hero { font-size: 0.64rem !important; padding: 0.75rem 0.9rem !important; }

    .section-head h2 { font-size: 1.3rem !important; }
    .pillar-img { height: 170px !important; }
    .pillar-body h3 { font-size: 1.1rem !important; }

    .services-visual { min-height: 140px !important; }
    .services-visual-overlay .svo-big { font-size: 1.8rem !important; }

    .custom-img-wrap { height: 210px !important; }
    .custom-text h2 { font-size: 1.3rem !important; }

    .showcase-grid.active { gap: 0.45rem !important; }
    .showcase-body h5 { font-size: 0.72rem !important; }

    .hiw-row .hiw-img, .hiw-reverse .hiw-img { height: 150px !important; }
    .hiw-text h3 { font-size: 1.1rem !important; }

    .about-text h2 { font-size: 1.35rem !important; }
    .counter-val span { font-size: 1.25rem !important; }

    .col-panel h3 { font-size: 1.2rem !important; }

    .cta-section .cta-content h2 { font-size: 1.3rem !important; }
    .cta-section .cta-inner { padding: 1.8rem 0.9rem !important; }

    .promise-item svg { width: 34px !important; height: 34px !important; }
    .promise-item h5 { font-size: 0.72rem !important; }

    .footer-center .footer-logo-img { height: 30px !important; }

    .logo-img { height: 28px !important; }
    .header-wrap { padding: 7px 12px !important; min-height: 48px; }
}

/* ==========================
   MOBILE DRAWER — Collapsible Submenu (Products/Collection)
   ========================== */
.mn-group { display: block; }
.mn-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
}
.mn-toggle .mn-arrow {
    transition: transform 0.25s ease;
    flex-shrink: 0;
    color: var(--primary);
}
.mn-group.open .mn-toggle .mn-arrow {
    transform: rotate(180deg);
}
.mn-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: rgba(148,74,62,0.03);
    padding: 0 0.8rem;
}
.mn-group.open .mn-sub {
    max-height: 1200px;
    padding: 0.5rem 0.8rem 0.8rem;
}
.mn-sub-col {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.mn-sub-col:last-child { border-bottom: none; }
.mn-sub-col h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.5rem;
    padding: 0 0.8rem;
}
.mn-sub-col a {
    display: block !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.5px !important;
    font-weight: 400 !important;
    color: var(--black) !important;
    text-transform: none !important;
    min-height: 38px !important;
    border: none !important;
    text-decoration: none;
}
.mn-sub-col a:hover,
.mn-sub-col a:active {
    color: var(--primary) !important;
    background: rgba(148,74,62,0.05);
}
.mn-sub-col a.mn-view-all {
    font-size: 0.7rem !important;
    letter-spacing: 1.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: var(--primary) !important;
    border-top: 1px solid rgba(148,74,62,0.1) !important;
    margin-top: 0.3rem;
    padding-top: 0.7rem !important;
}
.mn-sub-all {
    display: block !important;
    text-align: center;
    padding: 0.7rem !important;
    margin-top: 0.4rem;
    font-size: 0.68rem !important;
    letter-spacing: 2px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: var(--white) !important;
    background: var(--primary);
    border-radius: 4px;
    min-height: 40px !important;
    border: none !important;
}

/* ==========================
   FIX: Collection Detail Products on Mobile
   Ensure 2-col grid fits within viewport
   ========================== */
@media (max-width: 768px) {
    /* Force no horizontal overflow on body */
    body { overflow-x: hidden; }
    /* Collection detail products section — compress padding so grid fits */
    .cd-about + section,
    section[style*="padding: 5rem 0"][style*="var(--cream)"] {
        padding: 2rem 0 !important;
    }
    /* Container: tighter padding on mobile */
    section[style*="padding: 5rem 0"] .container { padding: 0 1rem; }
    /* Product cards: constrain and prevent overflow */
    .prod-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem !important;
        width: 100%;
        max-width: 100%;
    }
    .prod-card {
        min-width: 0;
        width: 100%;
        overflow: hidden;
    }
    .prod-card .prod-img { aspect-ratio: 1 / 1; }
}

/* ==========================
   FIX: Collection Detail .cd-about Image Mobile Overflow
   ========================== */
@media (max-width: 768px) {
    .cd-about { padding: 2rem 0 !important; }
    .cd-about-grid { gap: 1.2rem !important; }
    .cd-about-img {
        max-height: 220px !important;
        overflow: hidden;
        border-radius: 8px;
    }
    .cd-about-img img {
        width: 100%;
        height: 100%;
        max-height: 220px;
        object-fit: cover;
    }
    .cd-about-text h2 { font-size: 1.5rem !important; margin-bottom: 0.4rem; }
    .cd-about-tagline { font-size: 0.9rem !important; }
    .cd-about-desc { font-size: 0.85rem !important; line-height: 1.6 !important; }
    .cd-about-stats { margin-top: 1rem !important; gap: 0.6rem !important; }
    .cd-about-stat strong { font-size: 1.2rem !important; }
    .cd-about-stat span { font-size: 0.7rem !important; }
}
@media (max-width: 480px) {
    .cd-about-img { max-height: 180px !important; }
    .cd-about-img img { max-height: 180px; }
}

/* ==========================
   FIX: Collection Detail Mobile — Full Image + Clean Stats Grid
   ========================== */
@media (max-width: 768px) {
    /* Image: full width, proper aspect ratio */
    .cd-about-img {
        width: 100% !important;
        max-height: 260px !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden;
        border-radius: 10px;
        margin: 0 !important;
    }
    .cd-about-img img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover;
        display: block;
    }
    /* Stats: 3 equal columns in single row */
    .cd-about-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        margin-top: 1.2rem !important;
    }
    .cd-about-stat {
        padding: 0.8rem 0.4rem !important;
        text-align: center;
        background: var(--cream);
        border: 1px solid rgba(148,74,62,0.15);
        border-radius: 8px;
    }
    .cd-about-stat strong {
        display: block;
        font-size: 1.15rem !important;
        line-height: 1.2;
    }
    .cd-about-stat span {
        display: block;
        font-size: 0.6rem !important;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-top: 0.2rem;
    }
}
@media (max-width: 480px) {
    .cd-about-img {
        max-height: 220px !important;
        aspect-ratio: 4 / 3 !important;
    }
    .cd-about-stat strong { font-size: 1rem !important; }
    .cd-about-stat span { font-size: 0.55rem !important; }
}