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

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

html, body {
    width: 100%;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    background-color: #050816;
}

/* =====================================================================
   THEME SYSTEM — DARK / LIGHT SECTION TONES
   =====================================================================
   The homepage alternates section backgrounds (dark navy / clean off-
   white) so the page doesn't feel like one long dark wall, while every
   section still shares the same shapes, spacing, blur, and brand
   accent colors — it should read as one site, not two designs.

   HOW IT WORKS:
   - Brand accent colors (cyan/pink/orange/gold/green) never change —
     they're the constant that ties every section together.
   - Every section is dark by default (no extra markup needed — this
     matches the site's original look).
   - To make a section light, add the "section-light" class next to
     its existing section class in the PHP file, e.g.:
         <section class="printing-process section-light">
     Then that section's override rules live in the SECTION-LIGHT
     OVERRIDES block below (search "SECTION-LIGHT OVERRIDES" — kept
     together in one place instead of scattered through the file, so
     the whole theme stays easy to audit/adjust).
   - Currently light: .printing-process, .gallery-showcase,
     .transfers-section, .faq-section, .products-section.
   - Currently dark (default, no class needed): .hero, .about-section,
     .testimonials-section, .pricing-section, .contact-section.
   ===================================================================== */

:root{

    /* dark tone (the site's original background) */
    --bg-dark:#050816;
    /* secondary dark tone — subtly lighter navy, used to alternate
       section backgrounds so the page reads with more depth/rhythm
       instead of one flat block of color. Same hue family as
       --bg-dark, no gray/black introduced. */
    --bg-dark-alt:#0b1226;
    --text-on-dark:#ffffff;
    --text-on-dark-soft:#cbd5e1;
    --text-on-dark-muted:#94a3b8;
    --card-bg-dark:rgba(255,255,255,.08);
    --card-border-dark:rgba(255,255,255,.12);
    --divider-dark:rgba(255,255,255,.15);
    /* lighter card surface/border for cards that sit on top of
       --bg-dark-alt sections — keeps cards visibly lighter than
       their *local* parent even when that parent is already the
       lighter of the two section tones */
    --card-bg-alt:rgba(255,255,255,.12);
    --card-border-alt:rgba(255,255,255,.16);
    /* subtle, navy-tinted elevation for glass cards (no pure black,
       softened blur/spread) layered on top of whichever section
       background/tone they sit on */
    --shadow-dark:0 30px 60px -22px rgba(3,8,20,.45), 0 10px 24px -10px rgba(3,8,20,.28), 0 1px 0 rgba(255,255,255,.05) inset;
    --shadow-dark-hover:0 34px 70px -20px rgba(3,8,20,.5), 0 12px 28px -10px rgba(3,8,20,.3), 0 1px 0 rgba(255,255,255,.06) inset;

    /* light tone (new, clean/professional alternate) */
    --bg-light:#f5f7fb;
    --text-on-light:#0f172a;
    --text-on-light-soft:#334155;
    --text-on-light-muted:#64748b;
    --card-bg-light:#ffffff;
    --card-border-light:rgba(15,23,42,.08);
    --divider-light:rgba(15,23,42,.10);
    --shadow-light:0 10px 30px rgba(15,23,42,.06);

    /* brand accents — shared by both tones, this is what keeps the
       page feeling cohesive across dark/light sections */
    --accent-cyan:#67e8f9;
    --accent-pink:#f472b6;
    --accent-orange:#fdba74;
    --accent-gold:#D4AF37;
    --accent-green:#2FA84F;
    --accent-blue:#1E4FA8;
}

/* =====================================================================
   SECTION-LIGHT OVERRIDES
   =====================================================================
   Every rule below only fires inside a section that has the
   "section-light" class added in its PHP file (see THEME SYSTEM note
   above). Each block only touches background/text/border/shadow — the
   same card shapes, icon treatments, spacing, and gradients as the
   dark version stay untouched, so the section still looks like it
   belongs to the same site, just on a lighter backdrop.
   ===================================================================== */

/* ---------- PRINTING PROCESS ---------- */

.printing-process.section-light{ background:var(--bg-light); }
.printing-process.section-light .process-glow-cyan,
.printing-process.section-light .process-glow-pink,
.printing-process.section-light .process-glow-orange{ opacity:.5; }
.printing-process.section-light .process-badge{
    background:#fff;
    border-color:rgba(103,232,249,.35);
    color:#0e7490;
}
.printing-process.section-light .process-header h2{ color:var(--text-on-light); }
.printing-process.section-light .process-header p{ color:var(--text-on-light-soft); }
.printing-process.section-light .process-card{
    background:var(--card-bg-light);
    border-color:var(--card-border-light);
    box-shadow:var(--shadow-light);
}
.printing-process.section-light .process-card:hover{
    border-color:rgba(103,232,249,.55);
    box-shadow:0 20px 45px rgba(15,23,42,.10);
}
.printing-process.section-light .process-arrow{
    background:#fff;
    border-color:var(--card-border-light);
}
.printing-process.section-light .step-number{ color:var(--text-on-light-muted); }
.printing-process.section-light .process-card h3{ color:var(--text-on-light); }
.printing-process.section-light .process-card p{ color:var(--text-on-light-soft); }
.printing-process.section-light .process-stats{
    background:var(--card-bg-light);
    border-color:var(--card-border-light);
    box-shadow:var(--shadow-light);
}
.printing-process.section-light .stat-card{ background:rgba(15,23,42,.03); }
.printing-process.section-light .stat-card h4{ color:var(--text-on-light); }
.printing-process.section-light .stat-card p{ color:var(--text-on-light-muted); }

/* ---------- GALLERY ---------- */

.gallery-showcase.section-light{ background:var(--bg-light); }
.gallery-showcase.section-light .gallery-glow-cyan,
.gallery-showcase.section-light .gallery-glow-pink{ opacity:.45; }
.gallery-showcase.section-light .gallery-badge{
    background:#fff;
    border-color:rgba(103,232,249,.35);
    color:#0e7490;
}
.gallery-showcase.section-light .gallery-header h2{ color:var(--text-on-light); }
.gallery-showcase.section-light .gallery-header p{ color:var(--text-on-light-soft); }
.gallery-showcase.section-light .slider-fade-left{ background:linear-gradient(to right,var(--bg-light),transparent); }
.gallery-showcase.section-light .slider-fade-right{ background:linear-gradient(to left,var(--bg-light),transparent); }
.gallery-showcase.section-light .slide-card{
    background:var(--card-bg-light);
    border-color:var(--card-border-light);
    box-shadow:var(--shadow-light);
}
.gallery-showcase.section-light .slide-card:hover{
    box-shadow:0 20px 45px rgba(15,23,42,.10);
}
/* Photo captions sit on the image itself, so they keep their dark
   scrim/white text for legibility regardless of section tone. */

/* ---------- TRANSFERS ---------- */

.transfers-section.section-light{ background:var(--bg-light); }
.transfers-section.section-light .transfers-frame{
    background:var(--card-bg-light);
    border-color:var(--card-border-light);
    box-shadow:var(--shadow-light);
}
/* .transfers-inner / .shirt-showcase stay dark on purpose — it's a
   self-contained "device screen" style mockup, same idea as a photo
   thumbnail, and reads well set into a light page. */
.transfers-section.section-light .transfers-badge{
    background:#fff;
    border-color:rgba(103,232,249,.35);
    color:#0e7490;
}
.transfers-section.section-light .transfers-content h2{ color:var(--text-on-light); }
.transfers-section.section-light .transfers-description{ color:var(--text-on-light-soft); }
.transfers-section.section-light .transfer-feature{
    background:var(--card-bg-light);
    border-color:var(--card-border-light);
    box-shadow:var(--shadow-light);
}
.transfers-section.section-light .transfer-feature:hover{ background:var(--card-bg-light); }
.transfers-section.section-light .transfer-feature h3{ color:var(--text-on-light); }
.transfers-section.section-light .transfer-feature p{ color:var(--text-on-light-soft); }
.transfers-section.section-light .transfer-btn-secondary{
    border-color:rgba(15,23,42,.15);
    background:rgba(15,23,42,.04);
    color:var(--text-on-light);
}

/* ---------- FAQ ---------- */

.faq-section.section-light{
    background:var(--bg-light);
}
.faq-section.section-light .faq-glow-cyan,
.faq-section.section-light .faq-glow-pink{ opacity:.45; }
.faq-section.section-light .faq-badge{
    background:#fff;
    border-color:rgba(103,232,249,.35);
    color:#0e7490;
}
.faq-section.section-light .faq-left h2{ color:var(--text-on-light); }
.faq-section.section-light .faq-description{ color:var(--text-on-light-soft); }
.faq-section.section-light .faq-info-card{
    background:var(--card-bg-light);
    border-color:var(--card-border-light);
    box-shadow:var(--shadow-light);
}
.faq-section.section-light .faq-info-card h3{ color:var(--text-on-light); }
.faq-section.section-light .faq-info-card p{ color:var(--text-on-light-muted); }
.faq-section.section-light .faq-item{
    background:var(--card-bg-light);
    border-color:var(--card-border-light);
    box-shadow:var(--shadow-light);
}
.faq-section.section-light .faq-question{ color:var(--text-on-light); }
.faq-section.section-light .faq-answer p{
    border-top-color:var(--card-border-light);
    color:var(--text-on-light-soft);
}
.faq-section.section-light .faq-cta h3{ color:var(--text-on-light); }
.faq-section.section-light .faq-cta p{ color:var(--text-on-light-soft); }

/* ---------- PRODUCTS ---------- */

.products-section.section-light{ background:var(--bg-light); }
.products-section.section-light .products-glow-cyan,
.products-section.section-light .products-glow-pink{ opacity:.4; }
.products-section.section-light .products-title{ color:var(--text-on-light); }
.products-section.section-light .view-products-btn{
    border-color:rgba(15,23,42,.15);
    color:var(--text-on-light);
}
.products-section.section-light .product-card{
    background:var(--card-bg-light);
    border-color:var(--card-border-light);
    box-shadow:var(--shadow-light);
}
.products-section.section-light .product-card:hover{
    box-shadow:0 20px 45px rgba(15,23,42,.10);
}
.products-section.section-light .product-content h3{ color:var(--text-on-light); }
.products-section.section-light .product-content p{ color:var(--text-on-light-muted); }


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

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:50;
    padding:16px;
}

.header-container{
    max-width:1280px;
    margin:auto;
}

.header-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-width:0;
    padding:12px 20px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(
        to right,
        rgba(47,168,79,.25),
        rgba(5,8,22,.90) 45%
    );
    backdrop-filter:blur(40px);
    -webkit-backdrop-filter:blur(40px);
    box-shadow:0 0 35px rgba(0,224,240,.15);
}

/* ===========================
LOGO
=========================== */

.logo{
    flex:0 0 auto;
}

.logo img{
    display:block;
    height:100px;
    width:auto;
    max-width:100%;
    object-fit:contain;
}

.f-logo img{
    height:150px;
    width:auto;
    object-fit:contain;
}

/* ===========================
DESKTOP NAV
=========================== */

.desktop-nav{
    display:flex;
    align-items:center;
    gap:28px;
    min-width:0;
}

.nav-link{
    position:relative;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition:.3s;
}

.nav-link:hover{
    color:#1E4FA8;
}

.nav-link::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    border-radius:50px;
    background:linear-gradient(to right,#1E4FA8,#2FA84F,#D4AF37);
    transition:.3s;
}

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

/* ===========================
ACTIONS
=========================== */

.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
}

.icon-btn{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.10);
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.icon-btn:hover{
    background:#1E4FA8;
    color:#050816;
    border-color:#1E4FA8;
}

.user-btn:hover{
    background:#2FA84F;
    color:#fff;
    border-color:#2FA84F;
}

.cart-btn:hover{
    background:#D4AF37;
    color:#fff;
    border-color:#D4AF37;
}

.cart-btn{
    position:relative;
}

.cart-count{
    position:absolute;
    right:-4px;
    top:-4px;
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:900;
    color:#fff;
    background:linear-gradient(to right,#1E4FA8,#2FA84F);
}

/* ===========================
ORDER BUTTON
=========================== */

.order-btn{
    padding:12px 24px;
    border-radius:999px;
    text-decoration:none;
    color:#fff;
    font-size:14px;
    font-weight:900;
    background:linear-gradient(to right,#1E4FA8,#2FA84F,#D4AF37);
    box-shadow:0 0 22px rgba(240,0,176,.35);
    transition:.3s;
}

.order-btn:hover{
    transform:scale(1.05);
}

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

.mobile-toggle{
    display:none;
    width:46px;
    height:46px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.10);
    color:#fff;
    cursor:pointer;
    position:relative;
    flex:0 0 auto;
    transition:background .25s ease,border-color .25s ease,transform .25s ease;
}

.mobile-toggle:hover{
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.24);
}

.mobile-toggle:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-submenu-toggle:focus-visible,
.mobile-nav a:focus-visible,
.mobile-action-btn:focus-visible,
.mobile-order-btn:focus-visible{
    outline:2px solid #67e8f9;
    outline-offset:3px;
}

.mobile-toggle span{
    position:absolute;
    left:50%;
    width:20px;
    height:2px;
    margin:0;
    border-radius:999px;
    background:#fff;
    transform:translateX(-50%);
    transition:transform .28s ease,top .28s ease,opacity .2s ease;
}

.mobile-toggle span:nth-child(1){ top:15px; }
.mobile-toggle span:nth-child(2){ top:22px; }
.mobile-toggle span:nth-child(3){ top:29px; }

.mobile-toggle.active span:nth-child(1){
    top:22px;
    transform:translateX(-50%) rotate(45deg);
}
.mobile-toggle.active span:nth-child(2){ opacity:0; }
.mobile-toggle.active span:nth-child(3){
    top:22px;
    transform:translateX(-50%) rotate(-45deg);
}

/* ===========================
MOBILE OFF-CANVAS MENU
=========================== */

.mobile-menu,
.mobile-menu-overlay{
    display:none;
}

body.mobile-menu-open,
html.mobile-menu-open{
    overflow:hidden;
}

@media(max-width:1024px){

    .desktop-nav,
    .header-actions{
        display:none;
    }

    .mobile-toggle{
        display:block;
        z-index:2103;
    }

    .logo img{
        height:78px;
    }

    .mobile-menu-overlay{
        display:block;
        position:fixed;
        inset:0;
        z-index:2100;
        background:rgba(2,6,18,.66);
        -webkit-backdrop-filter:blur(5px);
        backdrop-filter:blur(5px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .28s ease,visibility .28s ease;
    }

    .mobile-menu-overlay.active{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .mobile-menu{
        display:flex;
        position:fixed;
        top:0;
        right:0;
        z-index:2102;
        width:min(88vw,390px);
        height:100vh;
        height:100dvh;
        margin:0;
        padding:0;
        flex-direction:column;
        overflow:hidden;
        border:0;
        border-left:1px solid rgba(255,255,255,.12);
        border-radius:28px 0 0 28px;
        background:
            radial-gradient(circle at 85% 0%,rgba(47,168,79,.18),transparent 34%),
            radial-gradient(circle at 10% 72%,rgba(30,79,168,.22),transparent 34%),
            rgba(5,8,22,.985);
        -webkit-backdrop-filter:blur(28px);
        backdrop-filter:blur(28px);
        box-shadow:-28px 0 70px rgba(0,0,0,.42);
        transform:translate3d(105%,0,0);
        visibility:hidden;
        pointer-events:none;
        transition:transform .34s cubic-bezier(.22,.8,.25,1),visibility .34s ease;
    }

    .mobile-menu.active{
        transform:translate3d(0,0,0);
        visibility:visible;
        pointer-events:auto;
    }

    .mobile-menu-top{
        flex:0 0 auto;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        padding:calc(18px + env(safe-area-inset-top)) 18px 16px;
        border-bottom:1px solid rgba(255,255,255,.09);
        background:rgba(255,255,255,.025);
    }

    .mobile-menu-brand{
        display:flex;
        align-items:center;
        min-width:0;
        color:#fff;
        text-decoration:none;
    }

    .mobile-menu-brand img{
        display:block;
        width:auto;
        height:54px;
        max-width:190px;
        object-fit:contain;
    }

    .mobile-menu-close{
        width:44px;
        height:44px;
        flex:0 0 44px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        border:1px solid rgba(255,255,255,.12);
        background:rgba(255,255,255,.08);
        color:#fff;
        font-size:18px;
        cursor:pointer;
        transition:.25s ease;
    }

    .mobile-menu-close:hover{
        background:rgba(255,255,255,.15);
        transform:rotate(6deg);
    }

    .mobile-menu-scroll{
        flex:1 1 auto;
        min-height:0;
        overflow-y:auto;
        overflow-x:hidden;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
        scrollbar-color:rgba(103,232,249,.45) transparent;
        padding:16px 16px calc(24px + env(safe-area-inset-bottom));
    }

    .mobile-menu-scroll::-webkit-scrollbar{ width:5px; }
    .mobile-menu-scroll::-webkit-scrollbar-track{ background:transparent; }
    .mobile-menu-scroll::-webkit-scrollbar-thumb{
        border-radius:999px;
        background:rgba(103,232,249,.38);
    }

    .mobile-menu-label{
        display:block;
        margin:4px 10px 10px;
        color:#94a3b8;
        font-size:10px;
        font-weight:900;
        letter-spacing:.16em;
        text-transform:uppercase;
    }

    .mobile-nav{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .mobile-nav > a,
    .mobile-nav-parent > a{
        min-height:52px;
        display:flex;
        align-items:center;
        gap:12px;
        padding:13px 15px;
        border:1px solid transparent;
        border-radius:16px;
        background:rgba(255,255,255,.045);
        color:#fff;
        text-decoration:none;
        font-size:14px;
        font-weight:800;
        line-height:1.25;
        transition:background .24s ease,border-color .24s ease,transform .24s ease;
    }

    .mobile-nav > a:hover,
    .mobile-nav-parent > a:hover,
    .mobile-nav > a.active,
    .mobile-nav-parent > a.active{
        background:linear-gradient(90deg,rgba(30,79,168,.28),rgba(47,168,79,.13));
        border-color:rgba(103,232,249,.16);
        transform:translateX(2px);
        color:#fff;
    }

    .mobile-nav a i.mobile-link-icon{
        width:22px;
        flex:0 0 22px;
        text-align:center;
        color:#67e8f9;
    }

    .mobile-nav-group{
        border-radius:16px;
    }

    .mobile-nav-parent{
        display:grid;
        grid-template-columns:minmax(0,1fr) 48px;
        gap:6px;
        align-items:stretch;
    }

    .mobile-submenu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(255,255,255,.08);
        border-radius:14px;
        background:rgba(255,255,255,.045);
        color:#cbd5e1;
        cursor:pointer;
        transition:.24s ease;
    }

    .mobile-submenu-toggle:hover{
        background:rgba(255,255,255,.10);
        color:#fff;
    }

    .mobile-submenu-toggle i{
        transition:transform .25s ease;
    }

    .mobile-submenu-toggle[aria-expanded="true"] i{
        transform:rotate(180deg);
    }

    .mobile-submenu{
        display:none;
        flex-direction:column;
        gap:6px;
        margin:7px 0 2px 14px;
        padding:8px 0 2px 12px;
        border-left:1px solid rgba(103,232,249,.20);
    }

    .mobile-submenu.is-open{
        display:flex;
    }

    .mobile-submenu a{
        display:flex;
        align-items:center;
        min-height:44px;
        padding:10px 13px;
        border-radius:13px;
        background:rgba(255,255,255,.03);
        color:#cbd5e1;
        text-decoration:none;
        font-size:13px;
        font-weight:700;
        line-height:1.35;
        transition:.2s ease;
    }

    .mobile-submenu a:hover,
    .mobile-submenu a.active{
        background:rgba(255,255,255,.08);
        color:#fff;
    }

    .mobile-menu-actions{
        margin-top:18px;
        padding-top:16px;
        border-top:1px solid rgba(255,255,255,.09);
    }

    .mobile-icons{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:10px;
        margin-top:0;
    }

    .mobile-icons a,
    .mobile-icons button{
        min-width:0;
        height:50px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0;
        border:1px solid rgba(255,255,255,.09);
        border-radius:15px;
        background:rgba(255,255,255,.055);
        color:#fff;
        text-decoration:none;
        cursor:pointer;
        transition:.22s ease;
    }

    .mobile-icons a:hover,
    .mobile-icons button:hover{
        background:rgba(255,255,255,.12);
        border-color:rgba(255,255,255,.16);
    }

    .mobile-icons .cart-btn{
        position:relative;
    }

    .mobile-icons .cart-count{
        right:7px;
        top:5px;
    }

    .mobile-order-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:9px;
        min-height:52px;
        margin-top:12px;
        padding:14px 18px;
        text-align:center;
        border-radius:16px;
        color:#fff;
        font-size:14px;
        font-weight:900;
        text-decoration:none;
        background:linear-gradient(to right,#1E4FA8,#2FA84F,#D4AF37);
        box-shadow:0 12px 30px rgba(30,79,168,.20);
    }
}

@media(max-width:640px){
    .header{
        padding:10px 10px 0;
    }

    .header-bar{
        padding:9px 12px;
        border-radius:24px;
    }

    .logo img{
        height:66px;
        max-width:180px;
    }

    .mobile-toggle{
        width:44px;
        height:44px;
    }

    .mobile-menu{
        width:min(92vw,380px);
        border-radius:22px 0 0 22px;
    }
}

@media(max-width:380px){
    .logo img{
        height:60px;
        max-width:155px;
    }

    .mobile-menu{
        width:94vw;
    }

    .mobile-menu-brand img{
        height:48px;
        max-width:160px;
    }
}


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

.hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    background:rgba(5,8,22,.28);
}

/* VIDEO */

.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.95;
}

/* OVERLAY */

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        #050816,
        rgba(5,8,22,.85),
        rgba(5,8,22,.60)
    );
}

/* GLOW EFFECTS */

.glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.glow-cyan{
    top:0;
    left:0;
    width:500px;
    height:500px;
    background:rgba(34,211,238,.20);
    filter:blur(130px);
}

.glow-pink{
    bottom:0;
    right:0;
    width:500px;
    height:500px;
    background:rgba(236,72,153,.20);
    filter:blur(130px);
}

.glow-orange{
    bottom:80px;
    left:50%;
    transform:translateX(-50%);
    width:350px;
    height:350px;
    background:rgba(251,146,60,.10);
    filter:blur(120px);
}

/* CONTAINER */

.hero-container{
    position:relative;
    z-index:10;

    max-width:1280px;

    min-height:100vh;

    margin:0 auto;

    padding:144px 24px 80px;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:48px;
}

/* LEFT SIDE */

.hero-content{
    position:relative;
}

/* BADGE */

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:24px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    color:#c9f8ff;

    font-size:14px;
    font-weight:700;
}

.hero-badge i{
    color:#67e8f9;
}

/* TITLE */

.hero-content h1{
    max-width:850px;

    color:#ffffff;

    font-size:72px;

    font-weight:900;

    line-height:1.05;

    letter-spacing:-2px;
}

.gradient-text{
background: linear-gradient(
    to right,
    #1E4FA8,
    #2FA84F,
    #D4AF37
);
    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}

/* DESCRIPTION */

.hero-description{
    margin-top:28px;

    max-width:620px;

    color:#cbd5e1;

    font-size:18px;

    line-height:1.8;
}

/* BUTTONS */

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:16px;

    margin-top:36px;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:16px 32px;

    border-radius:999px;

    text-decoration:none;

    font-size:15px;
    font-weight:900;

    color:#ffffff;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    box-shadow:0 0 30px rgba(240,0,176,.35);

    transition:.3s ease;
}

.btn-primary:hover{
    transform:scale(1.05);
}

.btn-secondary{
    padding:16px 32px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.20);

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

    text-decoration:none;

    font-size:15px;
    font-weight:900;

    color:#ffffff;

    transition:.3s;
}

.btn-secondary:hover{
    background:#67e8f9;
    color:#050816;
    border-color:#67e8f9;
}

/* FEATURES */

.hero-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;

    max-width:620px;

    margin-top:40px;
}

.feature-card{
    display:flex;
    align-items:center;
    gap:14px;

    padding:18px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);
}

.feature-card i{
    font-size:22px;
}

.cyan{
    color:#67e8f9;
}

.orange{
    color:#fdba74;
}

.feature-card h4{
    color:#ffffff;
    font-size:16px;
    font-weight:900;
    margin-bottom:4px;
}

.feature-card p{
    color:#94a3b8;
    font-size:13px;
}

/* RIGHT SHOWCASE */

.hero-showcase{
    position:relative;
}

.showcase-glow{
    position:absolute;
    inset:-20px;

    border-radius:48px;

    background:linear-gradient(
        to right,
        #22d3ee,
        #2FA84F,
        #D4AF37
    );

    opacity:.40;

    filter:blur(40px);
}

.showcase-card{
    position:relative;

    border-radius:48px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(32px);

    padding:32px;

    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.showcase-inner{
    padding:40px;

    border-radius:40px;

    background:rgba(0,0,0,.40);
}

.showcase-inner img{
    display:block;

    width:100%;
    max-width:340px;

    margin:0 auto;

    filter:drop-shadow(
        0 0 35px rgba(0,224,240,.35)
    );
}

/* STATS */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;

    margin-top:32px;
}

.stat-box{
    padding:18px;

    text-align:center;

    border-radius:18px;

    background:rgba(255,255,255,.10);
}

.stat-box h3{
    font-size:30px;
    font-weight:900;
}

.cyan-text{
    color:#67e8f9;
}

.pink-text{
    color:#f472b6;
}

.orange-text{
    color:#fdba74;
}

.stat-box p{
    margin-top:4px;

    font-size:12px;
    font-weight:700;

    color:#cbd5e1;
}

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

@media (max-width:1200px){

    .hero-content h1{
        font-size:60px;
    }

}

@media (max-width:1024px){

    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content{
        order:1;
    }

    .hero-showcase{
        display:none;
    }

    .hero-badge{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-description{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-features{
        margin-left:auto;
        margin-right:auto;
    }

}

@media (max-width:768px){

    .hero-container{
        padding-top:140px;
    }

    .hero-content h1{
        font-size:48px;
        line-height:1.1;
    }

    .hero-description{
        font-size:16px;
    }

    .hero-features{
        grid-template-columns:1fr;
    }

}

@media (max-width:480px){

    .hero-content h1{
        font-size:38px;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        justify-content:center;
    }

    .hero-buttons{
        flex-direction:column;
    }

}




/* ==========================================
   PRODUCTS SECTION
========================================== */

.products-section{
    position:relative;
    padding:112px 24px;
    background:var(--bg-dark);
    overflow:hidden;
}

/* ==========================================
   BACKGROUND GLOWS
========================================== */

.products-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.products-glow-cyan{
    top:80px;
    left:0;

    width:320px;
    height:320px;

    background:rgba(34,211,238,.10);

    filter:blur(110px);
}

.products-glow-pink{
    bottom:40px;
    right:0;

    width:320px;
    height:320px;

    background:rgba(236,72,153,.10);

    filter:blur(110px);
}

/* ==========================================
   CONTAINER
========================================== */

.products-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;
}

/* ==========================================
   SECTION HEADER
========================================== */

.products-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;

    margin-bottom:56px;
}

.products-subtitle{
    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.25em;

    color:#67e8f9;
}

.products-title{
    margin-top:16px;

    max-width:700px;

    color:#ffffff;

    font-size:60px;
    font-weight:900;
    line-height:1.1;
}

/* ==========================================
   VIEW BUTTON
========================================== */

.view-products-btn{
    width:max-content;

    padding:16px 28px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.20);

    color:#ffffff;

    text-decoration:none;

    font-size:15px;
    font-weight:900;

    transition:.3s ease;
}

.view-products-btn:hover{
    background:#67e8f9;
    border-color:#67e8f9;
    color:#050816;
}

/* ==========================================
   GRID
========================================== */

.products-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

/* ==========================================
   PRODUCT CARD
========================================== */

.product-card{

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border-radius:32px;

    padding:16px;

    overflow:hidden;

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

.product-card:hover{

    transform:translateY(-8px);

    border-color:rgba(103,232,249,.60);

    box-shadow:
    0 0 35px rgba(0,224,240,.18);
}

/* ==========================================
   IMAGE
========================================== */

.product-image-wrapper{
    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:#ffffff;
}

.product-image{
    width:100%;
    height:288px;

    object-fit:cover;

    transition:transform .7s ease;
}

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

/* ==========================================
   BADGE
========================================== */

.product-badge{
    position:absolute;

    top:16px;
    left:16px;

    padding:8px 16px;

    border-radius:999px;

    background:
    linear-gradient(
        to right,
        #67e8f9,
        #2FA84F
    );

    color:#ffffff;

    font-size:12px;
    font-weight:900;
}

/* ==========================================
   CONTENT
========================================== */

.product-content{
    padding-top:20px;
}

/* ==========================================
   STARS
========================================== */

.product-rating{
    display:flex;
    align-items:center;
    gap:4px;

    margin-bottom:8px;

    color:#fdba74;
}

.product-rating i{
    font-size:16px;
}

/* ==========================================
   TITLE
========================================== */

.product-content h3{
    color:#ffffff;

    font-size:22px;
    font-weight:900;

    line-height:1.3;
}

/* ==========================================
   DESCRIPTION
========================================== */

.product-content p{
    margin-top:8px;

    color:#94a3b8;

    font-size:14px;
    line-height:1.7;
}

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

.product-footer{
    margin-top:20px;

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

/* ==========================================
   PRICE
========================================== */

.product-price{
    color:#67e8f9;

    font-size:32px;
    font-weight:900;
}

/* ==========================================
   CART BUTTON
========================================== */

.product-cart-btn{

    width:48px;
    height:48px;

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

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#ffffff;

    background:
    linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    transition:transform .3s ease;
}

.product-cart-btn:hover{
    transform:scale(1.10);
}

.product-cart-btn i{
    font-size:18px;
}

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

@media (max-width:1200px){

    .products-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .products-title{
        font-size:52px;
    }
}

@media (max-width:768px){

    .products-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .products-title{
        font-size:42px;
    }

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

    .product-image{
        height:260px;
    }
}

@media (max-width:480px){

    .products-section{
        padding:80px 20px;
    }

    .products-title{
        font-size:34px;
    }

    .product-card{
        border-radius:24px;
    }

    .product-image-wrapper{
        border-radius:20px;
    }

    .product-price{
        font-size:28px;
    }
}





/* =====================================
   IMAGE SHOWCASE
===================================== */

.gallery-showcase{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark-alt);
    padding:110px 0;
}

.gallery-bg{
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at 15% 20%, rgba(0,224,240,.15), transparent 32%),
    radial-gradient(circle at 85% 30%, rgba(240,0,176,.15), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(240,112,0,.12), transparent 35%);
}

.gallery-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
}

.gallery-glow-cyan{
    top:80px;
    left:-120px;
    width:430px;
    height:430px;
    background:rgba(34,211,238,.15);
}

.gallery-glow-pink{
    bottom:80px;
    right:-120px;
    width:430px;
    height:430px;
    background:rgba(236,72,153,.15);
}

/* HEADER */

.gallery-header{
    position:relative;
    z-index:5;
    max-width:900px;
    margin:auto;
    text-align:center;
    padding:0 24px;
    margin-bottom:70px;
}

.gallery-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    color:#c9f8ff;

    font-size:14px;
    font-weight:900;
}

.gallery-header h2{
    margin-top:25px;
    font-size:64px;
    font-weight:900;
    color:#fff;
    line-height:1.1;
}

.gallery-header h2 span{
    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.gallery-header p{
    max-width:700px;
    margin:24px auto 0;
    color:#cbd5e1;
    font-size:18px;
    line-height:1.8;
}

/* SLIDER */

.gallery-slider{
    position:relative;
    z-index:5;
}

.slider-fade-left,
.slider-fade-right{
    position:absolute;
    top:0;
    height:100%;
    width:180px;
    z-index:10;
    pointer-events:none;
}

.slider-fade-left{
    left:0;
    background:linear-gradient(to right,#050816,transparent);
}

.slider-fade-right{
    right:0;
    background:linear-gradient(to left,#050816,transparent);
}

/* MARQUEE */

.marquee{
    overflow:hidden;
    margin-bottom:32px;
}

.marquee-track{
    display:flex;
    gap:24px;
    width:max-content;
    animation:scrollLeft 35s linear infinite;
}

.reverse .marquee-track{
    animation:scrollRight 35s linear infinite;
}

/* CARD */

.slide-card{
    flex-shrink:0;

    width:390px;

    padding:12px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.5s;
}

.slide-card:hover{
    transform:translateY(-12px);

    border-color:rgba(103,232,249,.60);

    box-shadow:0 0 35px rgba(0,224,240,.22);
}

.slide-card.small{
    width:330px;
}

.slide-image{
    position:relative;
    overflow:hidden;
    height:270px;
    border-radius:24px;
}

.slide-image.small{
    height:210px;
}

.slide-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s;
}

.slide-card:hover img{
    transform:scale(1.10);
}

.slide-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(5,8,22,.90),
        rgba(5,8,22,.25),
        transparent
    );
}

.slide-tag{
    position:absolute;
    top:20px;
    left:20px;

    padding:8px 16px;

    border-radius:999px;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;
    font-size:12px;
    font-weight:900;
}

.slide-content{
    position:absolute;
    left:20px;
    right:20px;
    bottom:20px;
}

.slide-content h3{
    color:#fff;
    font-size:28px;
    font-weight:900;
}

.slide-content p{
    color:#c9f8ff;
    font-size:14px;
    font-weight:700;
    margin-top:5px;
}

/* CTA */

.gallery-cta{
    text-align:center;
    margin-top:70px;
    position:relative;
    z-index:5;
}

.gallery-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:18px 36px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;
    font-size:14px;
    font-weight:900;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    box-shadow:0 0 30px rgba(240,0,176,.35);

    transition:.3s;
}

.gallery-btn:hover{
    transform:scale(1.05);
}

/* ANIMATIONS */

@keyframes scrollLeft{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

@keyframes scrollRight{
    from{
        transform:translateX(-50%);
    }
    to{
        transform:translateX(0);
    }
}

/* MOBILE */

@media(max-width:768px){

    .gallery-header h2{
        font-size:42px;
    }

    .slide-card{
        width:300px;
    }

    .slide-card.small{
        width:260px;
    }

    .slide-image{
        height:220px;
    }

    .slide-image.small{
        height:190px;
    }
}






/* ===================================
   PRINTING PROCESS
=================================== */

.printing-process{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark-alt);
    padding:144px 24px;
}

/* GLOWS */

.process-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.process-glow-cyan{
    left:-120px;
    top:80px;

    width:420px;
    height:420px;

    background:rgba(34,211,238,.15);

    filter:blur(120px);

    animation:floatSlow 8s ease-in-out infinite;
}

.process-glow-pink{
    right:-120px;
    bottom:40px;

    width:420px;
    height:420px;

    background:rgba(236,72,153,.15);

    filter:blur(120px);

    animation:floatSlow 10s ease-in-out infinite;
}

.process-glow-orange{
    left:50%;
    top:50%;

    width:320px;
    height:320px;

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

    background:rgba(251,146,60,.10);

    filter:blur(130px);
}

/* CONTAINER */

.process-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:auto;
}

/* HEADER */

.process-header{
    max-width:850px;
    margin:auto;
    text-align:center;
    margin-bottom:70px;
}

.process-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    color:#c9f8ff;

    font-size:14px;
    font-weight:900;
}

.process-header h2{
    margin-top:25px;

    color:#fff;

    font-size:64px;
    font-weight:900;
    line-height:1.1;
}

.process-header h2 span{
    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.process-header p{
    max-width:700px;

    margin:25px auto 0;

    color:#cbd5e1;

    font-size:18px;
    line-height:1.8;
}

/* PROCESS GRID */

.process-grid{
    position:relative;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:24px;
}

.process-item{
    position:relative;
}

/* ARROW */

.process-arrow{
    position:absolute;

    right:-22px;
    top:50%;

    transform:translateY(-50%);

    width:44px;
    height:44px;

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

    border-radius:50%;

    border:1px solid rgba(255,255,255,.10);

    background:#050816;

    color:#67e8f9;

    z-index:20;

    box-shadow:0 0 25px rgba(0,224,240,.25);
}

/* CARD */

.process-card{
    position:relative;

    height:100%;

    overflow:hidden;

    padding:28px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.5s;
}

/* PROCESS CARD PHOTO */

.process-card-photo{
    overflow:hidden;

    margin:-28px -28px 24px;

    border-radius:32px 32px 0 0;

    background:#080d22;
}

.process-card-photo img{
    display:block;
    width:100%;
    height:170px;
    object-fit:cover;
}

.process-card:hover{
    transform:translateY(-12px);

    border-color:rgba(103,232,249,.50);

    box-shadow:0 0 40px rgba(0,224,240,.18);
}

/* SHINE EFFECT */

.process-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );

    transform:translateX(-120%);
    transition:.8s;
}

.process-card:hover::before{
    transform:translateX(120%);
}

/* ICON */

.process-icon{
    width:80px;
    height:80px;

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

    border-radius:24px;

    margin-bottom:30px;

    color:#fff;

    font-size:34px;

    transition:.4s;

    box-shadow:0 0 30px rgba(255,255,255,.15);
}

.process-card:hover .process-icon{
    transform:scale(1.1) rotate(3deg);
}

.cyan-gradient{
    background:linear-gradient(135deg,#67e8f9,#3b82f6);
}

.pink-gradient{
    background:linear-gradient(135deg,#2FA84F,#d946ef);
}

.orange-gradient{
    background:linear-gradient(135deg,#D4AF37,#facc15);
}

.green-gradient{
    background:linear-gradient(135deg,#4ade80,#67e8f9);
}

/* TEXT */

.step-number{
    display:block;

    margin-bottom:14px;

    color:#64748b;

    font-size:13px;
    font-weight:900;

    letter-spacing:.25em;
}

.process-card h3{
    color:#fff;

    font-size:30px;
    font-weight:900;
}

.process-card p{
    margin-top:16px;

    color:#94a3b8;

    font-size:14px;
    line-height:1.9;
}

/* STATS */

.process-stats{
    margin-top:70px;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:20px;

    padding:20px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

.stat-card{
    display:flex;
    align-items:center;
    gap:16px;

    padding:24px;

    border-radius:24px;

    background:rgba(255,255,255,.05);
}

.stat-icon{
    width:56px;
    height:56px;

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

    border-radius:18px;

    font-size:24px;
}

.stat-cyan{
    background:rgba(103,232,249,.15);
    color:#67e8f9;
}

.stat-pink{
    background:rgba(236,72,153,.15);
    color:#2FA84F;
}

.stat-orange{
    background:rgba(251,146,60,.15);
    color:#D4AF37;
}

.stat-card h4{
    color:#fff;
    font-size:28px;
    font-weight:900;
}

.stat-card p{
    color:#94a3b8;
    font-size:14px;
}

/* FLOAT */

@keyframes floatSlow{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-30px);
    }

}

/* RESPONSIVE */

@media(max-width:1200px){

    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .process-arrow{
        display:none;
    }
}

@media(max-width:768px){

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

    .process-stats{
        grid-template-columns:1fr;
    }

    .process-header h2{
        font-size:42px;
    }
}






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

.why-choose{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:144px 24px;
}

/* BACKGROUND */

.why-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 20% 20%, rgba(0,224,240,.13), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(240,0,176,.13), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(240,112,0,.12), transparent 35%);
}

.why-circle{
    position:absolute;
    border-radius:50%;
}

.why-circle-cyan{
    left:40px;
    top:96px;

    width:128px;
    height:128px;

    border:1px solid rgba(103,232,249,.20);
}

.why-circle-pink{
    right:80px;
    top:128px;

    width:96px;
    height:96px;

    border:1px solid rgba(236,72,153,.20);
}

.why-circle-orange{
    left:33%;
    bottom:80px;

    width:80px;
    height:80px;

    border:1px solid rgba(251,146,60,.20);
}

/* CONTAINER */

.why-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
}

/* LEFT */

.why-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(236,72,153,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    color:#f9a8d4;

    font-size:14px;
    font-weight:900;
}

.why-content h2{
    margin-top:24px;

    color:#fff;

    font-size:64px;
    font-weight:900;
    line-height:1.1;
}

.why-content h2 span{
    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.why-description{
    margin-top:24px;

    max-width:620px;

    color:#cbd5e1;

    font-size:18px;
    line-height:1.8;
}

/* BUTTONS */

.why-buttons{
    margin-top:36px;

    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.why-btn-primary{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:16px 32px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-weight:900;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    box-shadow:0 0 30px rgba(240,0,176,.35);

    transition:.3s;
}

.why-btn-primary:hover{
    transform:scale(1.05);
}

.why-btn-secondary{
    padding:16px 32px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.20);

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

    color:#fff;

    text-decoration:none;

    font-weight:900;

    transition:.3s;
}

.why-btn-secondary:hover{
    background:#67e8f9;
    color:#050816;
    border-color:#67e8f9;
}

/* TRUST */

.trust-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;

    max-width:620px;

    margin-top:40px;
}

.trust-card{
    padding:20px;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

.trust-title{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:12px;

    font-weight:900;
}

.trust-card p{
    color:#94a3b8;
    font-size:14px;
    line-height:1.7;
}

/* RIGHT FEATURES */

.why-features{
    position:relative;
}

.feature-glow{
    position:absolute;
    inset:-24px;

    border-radius:48px;

    background:linear-gradient(
        to right,
        #22d3ee,
        #2FA84F,
        #D4AF37
    );

    opacity:.20;

    filter:blur(40px);
}

.feature-grid{
    position:relative;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.card-offset{
    transform:translateY(40px);
}

/* CARD */

.why-card{
    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.07);

    backdrop-filter:blur(20px);

    transition:.5s;
}

.why-card:hover{
    transform:translateY(-12px);

    border-color:rgba(103,232,249,.50);

    box-shadow:0 0 35px rgba(0,224,240,.18);
}

.why-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );

    transform:translateX(-120%);
    transition:.7s;
}

.why-card:hover::before{
    transform:translateX(120%);
}

/* ICON */

.why-icon{
    width:68px;
    height:68px;

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

    border-radius:24px;

    margin-bottom:28px;

    color:#fff;

    font-size:30px;

    box-shadow:0 0 30px rgba(255,255,255,.12);

    transition:.5s;
}

.why-card:hover .why-icon{
    transform:scale(1.1) rotate(3deg);
}

.cyan-gradient{
    background:linear-gradient(135deg,#67e8f9,#3b82f6);
}

.pink-gradient{
    background:linear-gradient(135deg,#2FA84F,#d946ef);
}

.orange-gradient{
    background:linear-gradient(135deg,#D4AF37,#facc15);
}

.green-gradient{
    background:linear-gradient(135deg,#4ade80,#67e8f9);
}

/* TEXT */

.why-card h3{
    color:#fff;
    font-size:22px;
    font-weight:900;
}

.why-card p{
    margin-top:16px;

    color:#94a3b8;

    font-size:14px;
    line-height:1.9;
}

/* RESPONSIVE */

@media(max-width:1024px){

    .why-container{
        grid-template-columns:1fr;
    }

    .feature-grid{
        margin-top:30px;
    }
}

@media(max-width:768px){

    .why-content h2{
        font-size:42px;
    }

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

    .card-offset{
        transform:none;
    }

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








/* ===================================
   TRANSFERS SHOWCASE
=================================== */

.transfers-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark-alt);
    padding:144px 24px;
}

.transfers-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 20% 30%, rgba(0,224,240,.15), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(240,0,176,.16), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(240,112,0,.13), transparent 35%);
}

/* GLOWS */

.transfers-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
}

.transfers-glow-cyan{
    left:-100px;
    top:100px;

    width:380px;
    height:380px;

    background:rgba(34,211,238,.15);

    animation:floatSlow 8s ease-in-out infinite;
}

.transfers-glow-pink{
    right:-100px;
    bottom:100px;

    width:380px;
    height:380px;

    background:rgba(236,72,153,.15);

    animation:floatSlow 10s ease-in-out infinite;
}

/* CONTAINER */

.transfers-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:64px;
}

/* LEFT */

.transfers-visual{
    position:relative;
}

.transfers-gradient-glow{
    position:absolute;
    inset:-32px;

    border-radius:48px;

    background:linear-gradient(
        to right,
        #22d3ee,
        #2FA84F,
        #D4AF37
    );

    opacity:.25;
    filter:blur(50px);
}

.transfers-frame{
    position:relative;

    padding:24px;

    border-radius:48px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.07);

    backdrop-filter:blur(20px);

    box-shadow:0 25px 60px rgba(0,0,0,.30);
}

.transfers-inner{
    padding:24px;
    border-radius:40px;
    background:#080b1a;
}

.shirt-showcase{
    position:relative;

    min-height:520px;

    overflow:hidden;

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

    border-radius:32px;

    background:
    linear-gradient(
        135deg,
        #090d1f,
        #0c1028,
        #050816
    );
}

/* SHIRT GLOWS */

.shirt-glow{
    position:absolute;
    border-radius:50%;
}

.shirt-glow-cyan{
    left:32px;
    top:32px;

    width:120px;
    height:120px;

    background:rgba(103,232,249,.20);

    filter:blur(50px);
}

.shirt-glow-pink{
    right:32px;
    bottom:32px;

    width:140px;
    height:140px;

    background:rgba(236,72,153,.20);

    filter:blur(50px);
}

/* FLOATING SHEETS */

.transfer-sheet{
    position:absolute;

    width:176px;
    height:112px;

    border-radius:18px;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(10px);
}

.transfer-sheet-left{
    left:32px;
    top:80px;

    transform:rotate(-14deg);

    border:1px solid rgba(103,232,249,.30);

    box-shadow:0 0 30px rgba(0,224,240,.25);
}

.transfer-sheet-right{
    right:32px;
    top:110px;

    transform:rotate(14deg);

    border:1px solid rgba(236,72,153,.30);

    box-shadow:0 0 30px rgba(240,0,176,.25);
}

/* SHIRT */

.shirt-wrapper{
    position:relative;

    width:360px;
    height:390px;
}

.shirt-body{
    position:absolute;

    left:50%;
    top:0;

    width:260px;
    height:370px;

    transform:translateX(-50%);

    background:#000;

    border-radius:64px 64px 40px 40px;

    box-shadow:0 0 45px rgba(0,0,0,.60);
}

.shirt-sleeve{
    position:absolute;

    width:112px;
    height:128px;

    background:#000;

    border-radius:32px;
}

.shirt-left{
    left:15px;
    top:55px;
    transform:rotate(25deg);
}

.shirt-right{
    right:15px;
    top:55px;
    transform:rotate(-25deg);
}

.shirt-collar{
    position:absolute;

    left:50%;
    top:16px;

    width:96px;
    height:80px;

    transform:translateX(-50%);

    border-bottom:4px solid #475569;

    border-radius:0 0 999px 999px;
}

/* PRINT */

.shirt-print{
    position:absolute;

    left:50%;
    top:150px;

    width:144px;
    height:144px;

    transform:translateX(-50%);

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    box-shadow:0 0 40px rgba(240,0,176,.45);
}

.print-shape{
    position:absolute;
    border-radius:999px;
}

.shape-1{
    left:-32px;
    top:32px;

    width:80px;
    height:48px;

    background:#2FA84F;
    filter:blur(4px);
}

.shape-2{
    right:-32px;
    top:32px;

    width:80px;
    height:48px;

    background:#67e8f9;
    filter:blur(4px);
}

.shape-3{
    left:24px;
    top:-32px;

    width:48px;
    height:80px;

    background:#D4AF37;
    filter:blur(4px);
}

.shape-4{
    left:40px;
    bottom:-22px;

    width:48px;
    height:64px;

    background:#4ade80;
    filter:blur(4px);
}

/* BADGE */

.quality-badge{
    position:absolute;

    left:50%;
    bottom:32px;

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:12px;

    padding:12px 24px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:14px;
    font-weight:900;
}

.quality-badge i{
    color:#67e8f9;
}

/* RIGHT CONTENT */

.transfers-badge{
    display:inline-flex;
    gap:10px;
    align-items:center;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    color:#c9f8ff;

    font-size:14px;
    font-weight:900;
}

.transfers-content h2{
    margin-top:24px;

    color:#fff;

    font-size:64px;
    font-weight:900;
    line-height:1.1;
}

.transfers-content h2 span{
    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.transfers-description{
    margin-top:24px;

    max-width:620px;

    color:#cbd5e1;

    font-size:18px;
    line-height:1.8;
}

/* FEATURES */

.transfers-features{
    margin-top:36px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.transfer-feature{
    display:flex;
    gap:20px;

    padding:20px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.4s;
}

.transfer-feature:hover{
    transform:translateX(-8px);

    border-color:rgba(103,232,249,.50);

    background:rgba(255,255,255,.09);
}

.feature-icon{
    width:64px;
    height:64px;

    flex-shrink:0;

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

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;
    font-size:26px;

    transition:.4s;
}

.transfer-feature:hover .feature-icon{
    transform:scale(1.1) rotate(3deg);
}

.transfer-feature h3{
    color:#fff;
    font-size:22px;
    font-weight:900;
}

.transfer-feature p{
    margin-top:8px;

    color:#94a3b8;
    font-size:14px;
    line-height:1.7;
}

/* BUTTONS */

.transfers-buttons{
    margin-top:36px;

    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.transfer-btn-primary,
.transfer-btn-secondary{
    text-decoration:none;
}

.transfer-btn-primary{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:16px 32px;

    border-radius:999px;

    color:#fff;
    font-weight:900;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    box-shadow:0 0 30px rgba(240,0,176,.35);

    transition:.3s;
}

.transfer-btn-primary:hover{
    transform:scale(1.05);
}

.transfer-btn-secondary{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:16px 32px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.20);

    background:rgba(255,255,255,.10);

    color:#fff;
    font-weight:900;

    transition:.3s;
}

.transfer-btn-secondary:hover{
    background:#67e8f9;
    border-color:#67e8f9;
    color:#050816;
}

/* RESPONSIVE */

@media(max-width:1024px){

    .transfers-container{
        grid-template-columns:1fr;
    }

    .transfers-content{
        order:1;
    }

    .transfers-visual{
        order:2;
    }
}

@media(max-width:768px){

    .transfers-content h2{
        font-size:42px;
    }

    .shirt-wrapper{
        transform:scale(.8);
    }

    .shirt-showcase{
        min-height:420px;
    }
}








/* =====================================
   PRICING SECTION
===================================== */

.pricing-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:144px 24px;
}

.pricing-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 15% 20%, rgba(0,224,240,.14), transparent 34%),
    radial-gradient(circle at 85% 25%, rgba(240,0,176,.14), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(240,112,0,.12), transparent 35%);
}

/* GLOWS */

.pricing-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
}

.pricing-glow-cyan{
    left:-120px;
    top:80px;

    width:420px;
    height:420px;

    background:rgba(34,211,238,.15);
}

.pricing-glow-pink{
    right:-120px;
    bottom:80px;

    width:420px;
    height:420px;

    background:rgba(236,72,153,.15);
}

/* CONTAINER */

.pricing-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:auto;
}

/* HEADER */

.pricing-header{
    max-width:800px;
    margin:auto;
    text-align:center;
    margin-bottom:64px;
}

.pricing-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(251,146,60,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    color:#fdba74;

    font-size:14px;
    font-weight:900;
}

.pricing-header h2{
    margin-top:24px;

    color:#fff;

    font-size:64px;
    font-weight:900;
    line-height:1.1;
}

.pricing-header h2 span{
    display:block;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.pricing-header p{
    max-width:700px;
    margin:24px auto 0;

    color:#cbd5e1;

    font-size:18px;
    line-height:1.8;
}

/* GRID */

.pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

/* CARD */

.pricing-card{
    position:relative;

    overflow:hidden;

    padding:24px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.5s;
}

.pricing-card:hover{
    transform:translateY(-16px);

    border-color:rgba(103,232,249,.50);

    box-shadow:0 0 45px rgba(0,224,240,.18);
}

.pricing-popular{
    border-color:rgba(236,72,153,.60);
    transform:scale(1.05);
}

/* POPULAR */

.popular-badge{
    position:absolute;

    right:24px;
    top:24px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 16px;

    border-radius:999px;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;

    font-size:12px;
    font-weight:900;

    z-index:20;

    box-shadow:0 0 25px rgba(240,0,176,.35);
}

/* SHINE */

.pricing-shine{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );

    transform:translateX(-120%);
    transition:.7s;
}

.pricing-card:hover .pricing-shine{
    transform:translateX(120%);
}

/* INNER */

.pricing-inner{
    position:relative;

    background:rgba(8,11,26,.80);

    padding:28px;

    border-radius:32px;
}

/* ICON */

.pricing-icon{
    width:72px;
    height:72px;

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

    border-radius:24px;

    margin-bottom:32px;

    color:#fff;
    font-size:30px;

    transition:.4s;

    box-shadow:0 0 30px rgba(255,255,255,.14);
}

.pricing-card:hover .pricing-icon{
    transform:scale(1.1) rotate(3deg);
}

.cyan-gradient{
    background:linear-gradient(135deg,#67e8f9,#3b82f6);
}

.pink-gradient{
    background:linear-gradient(135deg,#2FA84F,#d946ef);
}

.orange-gradient{
    background:linear-gradient(135deg,#D4AF37,#facc15);
}

/* TEXT */

.pricing-inner h3{
    color:#fff;
    font-size:32px;
    font-weight:900;
}

.pricing-subtitle{
    margin-top:8px;

    color:#94a3b8;

    font-size:14px;
    font-weight:600;
}

/* PRICE */

.price-area{
    display:flex;
    align-items:flex-end;
    gap:8px;

    margin-top:32px;
}

.price{
    color:#fff;

    font-size:56px;
    font-weight:900;
}

.price-note{
    padding-bottom:10px;

    color:#64748b;

    font-size:14px;
    font-weight:700;
}

/* DIVIDER */

.pricing-divider{
    margin:32px 0;
    height:1px;

    background:
    linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.15),
        transparent
    );
}

/* FEATURES */

.pricing-features{
    list-style:none;
    padding:0;
    margin:0;
}

.pricing-features li{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:18px;

    color:#cbd5e1;

    font-size:14px;
    font-weight:600;
}

.pricing-features i{
    color:#67e8f9;
}

/* BUTTON */

.pricing-btn{
    margin-top:36px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    width:100%;

    padding:16px;

    border-radius:999px;

    text-decoration:none;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.10);

    color:#fff;

    font-size:14px;
    font-weight:900;

    transition:.3s;
}

.pricing-btn:hover{
    background:#67e8f9;
    color:#050816;
    border-color:#67e8f9;
}

.pricing-btn-primary{
    background:
    linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    border:none;

    box-shadow:0 0 28px rgba(240,0,176,.35);
}

.pricing-btn-primary:hover{
    transform:scale(1.05);
    color:#fff;
}

/* NOTE */

.pricing-note{
    margin-top:56px;

    padding:24px;

    text-align:center;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

.pricing-note p{
    color:#cbd5e1;
    font-size:14px;
    line-height:1.8;
}

/* RESPONSIVE */

@media(max-width:1024px){

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

    .pricing-popular{
        transform:none;
    }
}

@media(max-width:768px){

    .pricing-header h2{
        font-size:42px;
    }

    .price{
        font-size:44px;
    }
}








/* =====================================
   TESTIMONIALS
===================================== */

.testimonials-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:144px 24px;
}

.testimonials-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 20% 20%, rgba(0,224,240,.13), transparent 34%),
    radial-gradient(circle at 80% 25%, rgba(240,0,176,.13), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(240,112,0,.12), transparent 35%);
}

.testimonials-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
}

.testimonials-glow-cyan{
    left:-120px;
    top:80px;
    width:420px;
    height:420px;
    background:rgba(34,211,238,.15);
}

.testimonials-glow-pink{
    right:-120px;
    bottom:80px;
    width:420px;
    height:420px;
    background:rgba(236,72,153,.15);
}

/* CONTAINER */

.testimonials-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:auto;
}

/* HEADER */

.testimonials-header{
    max-width:850px;
    margin:auto;
    text-align:center;
    margin-bottom:64px;
}

.testimonials-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    color:#c9f8ff;

    font-size:14px;
    font-weight:900;
}

.testimonials-header h2{
    margin-top:24px;

    color:#fff;

    font-size:64px;
    font-weight:900;
    line-height:1.1;
}

.testimonials-header h2 span{
    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.testimonials-header p{
    max-width:720px;
    margin:24px auto 0;

    color:#cbd5e1;

    font-size:18px;
    line-height:1.8;
}

/* TRUST STRIP */

.trust-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;

    margin-bottom:40px;
}

.trust-box{
    padding:24px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.4s;
}

.trust-box:hover{
    transform:translateY(-8px);
}

.trust-icon{
    width:56px;
    height:56px;

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

    border-radius:18px;

    margin-bottom:16px;

    font-size:24px;
}

.trust-cyan{
    background:rgba(103,232,249,.15);
    color:#67e8f9;
}

.trust-pink{
    background:rgba(236,72,153,.15);
    color:#2FA84F;
}

.trust-orange{
    background:rgba(251,146,60,.15);
    color:#D4AF37;
}

.trust-box h3{
    color:#fff;
    font-size:32px;
    font-weight:900;
}

.trust-box p{
    margin-top:8px;
    color:#94a3b8;
}

/* REVIEWS */

.reviews-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.review-offset{
    transform:translateY(32px);
}

.review-card{
    position:relative;
    overflow:hidden;

    padding:24px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.5s;
}

.review-card:hover{
    transform:translateY(-16px);

    border-color:rgba(103,232,249,.50);

    box-shadow:0 0 40px rgba(0,224,240,.18);
}

.review-shine{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );

    transform:translateX(-120%);
    transition:.7s;
}

.review-card:hover .review-shine{
    transform:translateX(120%);
}

/* AVATAR */

.review-avatar{
    width:64px;
    height:64px;

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

    border-radius:24px;

    color:#fff;

    font-size:26px;
    font-weight:900;

    margin-bottom:24px;

    box-shadow:0 0 30px rgba(255,255,255,.12);
}

/* STARS */

.review-stars{
    color:#fdba74;
    margin-bottom:16px;
}

.review-stars i{
    margin-right:2px;
}

.review-quote{
    color:rgba(103,232,249,.70);
    font-size:34px;
    margin-bottom:16px;
}

.review-text{
    color:#cbd5e1;
    font-size:14px;
    line-height:1.9;
}

.review-footer{
    margin-top:28px;
    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.10);
}

.review-footer h4{
    color:#fff;
    font-size:18px;
    font-weight:900;
}

.review-footer p{
    margin-top:4px;
    color:#64748b;
    font-size:14px;
}

.review-tag{
    display:inline-block;

    margin-top:16px;

    padding:8px 16px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.10);

    color:#c9f8ff;

    font-size:12px;
    font-weight:900;
}

/* CTA */

.testimonials-cta{
    margin-top:80px;

    padding:48px;

    text-align:center;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

.testimonials-cta h3{
    color:#fff;
    font-size:42px;
    font-weight:900;
}

.testimonials-cta p{
    max-width:700px;
    margin:20px auto 0;

    color:#cbd5e1;

    line-height:1.8;
}

.testimonials-btn{
    display:inline-flex;

    margin-top:32px;

    padding:16px 36px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-weight:900;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    box-shadow:0 0 30px rgba(240,0,176,.35);

    transition:.3s;
}

.testimonials-btn:hover{
    transform:scale(1.05);
}

/* RESPONSIVE */

@media(max-width:1200px){

    .reviews-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .review-offset{
        transform:none;
    }
}

@media(max-width:768px){

    .trust-strip{
        grid-template-columns:1fr;
    }

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

    .testimonials-header h2{
        font-size:42px;
    }

    .testimonials-cta h3{
        font-size:30px;
    }
}









/* ===================================
   FAQ SECTION
=================================== */

.faq-section{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg, rgba(5,8,22,.76) 0%, rgba(5,8,22,.70) 45%, rgba(5,8,22,.84) 100%),
        url('../images/faq-bg.webp') center center / cover no-repeat;
    padding:70px 24px;
}

.faq-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 20% 20%, rgba(0,224,240,.13), transparent 34%),
    radial-gradient(circle at 80% 35%, rgba(240,0,176,.13), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(240,112,0,.12), transparent 35%);
}

.faq-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
}

.faq-glow-cyan{
    left:-120px;
    top:80px;

    width:420px;
    height:420px;

    background:rgba(34,211,238,.15);
}

.faq-glow-pink{
    right:-120px;
    bottom:80px;

    width:420px;
    height:420px;

    background:rgba(236,72,153,.15);
}

/* LAYOUT */

.faq-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:auto;

    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:36px;
}

/* LEFT */

.faq-left{
    position:sticky;
    top:130px;
    height:fit-content;
}

.faq-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    color:#c9f8ff;

    font-size:14px;
    font-weight:900;
}

.faq-left h2{
    margin-top:16px;

    color:#fff;

    font-size:42px;
    font-weight:900;
    line-height:1.15;
}

.faq-left h2 span{
    display:block;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.faq-description{
    margin-top:14px;

    color:#cbd5e1;

    font-size:15px;
    line-height:1.6;
}

/* INFO CARDS */

.faq-info-cards{
    margin-top:24px;

    display:grid;
    gap:10px;
}

.faq-info-card{
    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 16px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.4s;
}

.faq-info-card:hover{
    transform:translateX(-8px);

    border-color:rgba(103,232,249,.50);
}

.faq-info-icon{
    width:42px;
    height:42px;

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

    border-radius:14px;

    font-size:18px;
}

.cyan-bg{
    color:#67e8f9;
    background:rgba(103,232,249,.15);
}

.pink-bg{
    color:#2FA84F;
    background:rgba(236,72,153,.15);
}

.orange-bg{
    color:#D4AF37;
    background:rgba(251,146,60,.15);
}

.faq-info-card h3{
    color:#fff;
    font-weight:900;
}

.faq-info-card p{
    margin-top:4px;
    color:#94a3b8;
    font-size:14px;
}

/* FAQ ITEMS */

.faq-right{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.faq-item{
    overflow:hidden;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.4s;
}

.faq-item.active{
    border-color:rgba(103,232,249,.50);
}

.faq-item:hover{
    border-color:rgba(103,232,249,.50);

    box-shadow:0 0 35px rgba(0,224,240,.14);
}

.faq-question{
    width:100%;
    border:none;
    cursor:pointer;

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

    padding:16px 20px;

    background:none;
    color:#fff;
}

.faq-question-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.faq-icon{
    width:38px;
    height:38px;

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

    border-radius:14px;

    background:rgba(255,255,255,.10);

    color:#67e8f9;
}

.active .faq-icon{
    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;
}

.faq-question h3{
    font-size:16px;
    font-weight:900;
}

.faq-arrow{
    color:#67e8f9;
    transition:.4s;
}

.active .faq-arrow{
    transform:rotate(180deg);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .5s ease;
}

.active .faq-answer{
    max-height:220px;
}

.faq-answer p{
    padding:12px 20px 16px 70px;

    border-top:1px solid rgba(255,255,255,.10);

    color:#cbd5e1;

    font-size:15px;
    line-height:1.6;
}

/* CTA */

.faq-cta{
    margin-top:6px;

    padding:20px 24px;

    border-radius:20px;

    background:
    linear-gradient(
        to right,
        rgba(103,232,249,.15),
        rgba(236,72,153,.15),
        rgba(251,146,60,.15)
    );

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(20px);
}

.faq-cta h3{
    color:#fff;
    font-size:22px;
    font-weight:900;
}

.faq-cta p{
    margin-top:8px;
    color:#cbd5e1;
    font-size:15px;
}

.faq-cta-btn{
    display:inline-block;

    margin-top:16px;

    padding:12px 26px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-weight:900;

    background:
    linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    box-shadow:0 0 28px rgba(240,0,176,.35);

    transition:.3s;
}

.faq-cta-btn:hover{
    transform:scale(1.05);
}

/* RESPONSIVE */

@media(max-width:1024px){

    .faq-container{
        grid-template-columns:1fr;
    }

    .faq-left{
        position:relative;
        top:auto;
    }
}

@media(max-width:768px){

    .faq-left h2{
        font-size:32px;
    }

    .faq-question h3{
        font-size:15px;
    }

    .faq-answer p{
        padding-left:20px;
    }

    .faq-cta h3{
        font-size:20px;
    }
}







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

.contact-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark-alt);
    padding:144px 24px;
}

.contact-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 20% 20%, rgba(0,224,240,.14), transparent 34%),
    radial-gradient(circle at 85% 30%, rgba(240,0,176,.14), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(240,112,0,.12), transparent 36%);
}

/* GLOWS */

.contact-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
}

.contact-glow-cyan{
    width:420px;
    height:420px;

    left:-120px;
    top:100px;

    background:rgba(34,211,238,.15);
}

.contact-glow-pink{
    width:420px;
    height:420px;

    right:-120px;
    bottom:80px;

    background:rgba(236,72,153,.15);
}

/* LAYOUT */

.contact-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:auto;

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:48px;
}

/* LEFT */

.contact-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    color:#c9f8ff;

    font-size:14px;
    font-weight:900;
}

.contact-left h2{
    margin-top:24px;

    color:#fff;

    font-size:64px;
    line-height:1.1;
    font-weight:900;
}

.contact-left h2 span{
    display:block;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.contact-description{
    margin-top:24px;

    max-width:600px;

    color:#cbd5e1;

    font-size:18px;
    line-height:1.8;
}

/* INFO CARDS */

.contact-info-list{
    margin-top:40px;

    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-info-card{
    display:flex;
    align-items:center;
    gap:16px;

    padding:20px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.4s;
}

.contact-info-card:hover{
    transform:translateX(-8px);

    border-color:rgba(103,232,249,.50);
}

.contact-icon{
    width:56px;
    height:56px;

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

    border-radius:18px;

    font-size:22px;
}

.contact-info-card h3{
    color:#fff;
    font-weight:900;
}

.contact-info-card p{
    margin-top:4px;

    color:#94a3b8;
    font-size:14px;
}

/* FORM */

.contact-form-wrapper{
    position:relative;
}

.form-glow{
    position:absolute;
    inset:-24px;

    border-radius:48px;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    opacity:.20;
    filter:blur(50px);
}

.contact-form{
    position:relative;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.07);

    backdrop-filter:blur(20px);

    padding:32px;

    box-shadow:0 20px 60px rgba(0,0,0,.30);
}

/* HEADER */

.form-header{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:32px;
}

.form-header-icon{
    width:64px;
    height:64px;

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

    border-radius:24px;

    background:linear-gradient(
        135deg,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;
    font-size:28px;
}

.form-header h3{
    color:#fff;
    font-size:28px;
    font-weight:900;
}

.form-header p{
    color:#94a3b8;
    font-size:14px;
}

/* FORM GRID */

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;

    margin-bottom:20px;
}

.form-group label{
    display:block;

    margin-bottom:10px;

    color:#fff;

    font-size:14px;
    font-weight:900;
}

.form-group input,
.form-group textarea,
.form-group select{
    width:100%;

    border:1px solid rgba(255,255,255,.10);

    background:#080b1a;

    border-radius:18px;

    padding:16px 20px;

    color:#cbd5e1;

    font-size:14px;
    font-weight:600;

    outline:none;

    transition:.3s;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#64748b;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    border-color:#67e8f9;
}

.form-group textarea{
    resize:none;
}

/* UPLOAD */

.upload-box{
    margin-top:20px;

    display:flex;
    align-items:center;
    gap:16px;

    padding:20px;

    border-radius:20px;

    border:1px dashed rgba(103,232,249,.30);

    background:rgba(103,232,249,.05);
}

.upload-icon{
    width:48px;
    height:48px;

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

    border-radius:16px;

    background:rgba(103,232,249,.15);

    color:#67e8f9;

    font-size:22px;
}

.upload-box h4{
    color:#fff;
    font-weight:900;
}

.upload-box p{
    margin-top:4px;

    color:#94a3b8;
    font-size:14px;
}

/* BUTTON */

.contact-submit{
    width:100%;

    margin-top:28px;

    border:none;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:18px;

    cursor:pointer;

    border-radius:999px;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;

    font-weight:900;

    box-shadow:0 0 30px rgba(240,0,176,.35);

    transition:.3s;
}

.contact-submit:hover{
    transform:scale(1.02);
}

/* RESPONSIVE */

@media(max-width:1024px){

    .contact-container{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .contact-left h2{
        font-size:42px;
    }

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

    .contact-form{
        padding:24px;
    }

    .form-header{
        flex-direction:column;
        text-align:center;
    }
}











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

.footer-section{
    position:relative;
    overflow:hidden;

    background:#030511;

    padding:80px 24px 0;
}

.footer-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at 20% 0%,
        rgba(0,224,240,.12),
        transparent 30%
    ),
    radial-gradient(
        circle at 80% 0%,
        rgba(240,0,176,.12),
        transparent 30%
    );
}

/* CONTAINER */

.footer-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:auto;
}

/* NEWSLETTER */

.newsletter-box{
    margin-bottom:64px;

    padding:40px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

.newsletter-content{
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:40px;
    align-items:center;
}

.newsletter-text h3{
    color:#fff;

    font-size:42px;
    font-weight:900;
}

.newsletter-text p{
    margin-top:12px;

    max-width:520px;

    color:#94a3b8;

    line-height:1.8;
}

/* NEWSLETTER FORM */

.newsletter-form{
    display:flex;
    gap:12px;
}

.newsletter-form input{
    flex:1;

    min-height:56px;

    padding:0 24px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:#080b1a;

    color:#fff;

    font-size:14px;
    font-weight:600;

    outline:none;
}

.newsletter-form input::placeholder{
    color:#64748b;
}

.newsletter-form input:focus{
    border-color:#67e8f9;
}

.newsletter-form button{
    border:none;
    cursor:pointer;

    display:flex;
    align-items:center;
    gap:10px;

    padding:0 28px;

    border-radius:999px;

    background:
    linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;

    font-size:14px;
    font-weight:900;

    transition:.3s;
}

.newsletter-form button:hover{
    transform:scale(1.05);
}

/* GRID */

.footer-grid{
    display:grid;
    grid-template-columns:
    1.3fr
    1fr
    1fr
    1fr;

    gap:40px;

    padding-bottom:56px;
}

.footer-logo{
    width:auto;
    height:80px;

    object-fit:contain;

    margin-bottom:20px;
}

.footer-about p{
    max-width:340px;

    color:#94a3b8;

    font-size:14px;
    line-height:2;
}

/* SOCIALS */

.footer-socials{
    display:flex;
    gap:12px;

    margin-top:24px;
}

.footer-socials a{
    width:44px;
    height:44px;

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

    border-radius:50%;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.10);

    color:#fff;

    transition:.3s;
}

.footer-socials a:hover{
    background:#67e8f9;
    border-color:#67e8f9;
    color:#050816;
}

/* LINKS */

.footer-links h4,
.footer-contact h4{
    margin-bottom:20px;

    color:#fff;

    font-size:20px;
    font-weight:900;
}

.footer-links ul{
    list-style:none;
}

.footer-links li{
    margin-bottom:14px;
}

.footer-links a{
    color:#94a3b8;

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    transition:.3s;
}

.footer-links a:hover{
    color:#67e8f9;
}

/* CONTACT */

.footer-contact-item{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:18px;

    color:#94a3b8;

    font-size:14px;
    font-weight:600;
}

.footer-contact-item i{
    color:#67e8f9;
}

.footer-order-btn{
    display:inline-flex;

    margin-top:18px;

    padding:14px 24px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.10);

    color:#fff;

    font-size:14px;
    font-weight:900;

    text-decoration:none;

    transition:.3s;
}

.footer-order-btn:hover{
    background:#67e8f9;
    border-color:#67e8f9;
    color:#050816;
}

/* COPYRIGHT */

.footer-bottom{
    text-align:center;

    padding:24px 0;

    border-top:1px solid rgba(255,255,255,.10);
}

.footer-bottom p{
    color:#64748b;

    font-size:14px;
    font-weight:600;
}

/* RESPONSIVE */

@media(max-width:1024px){

    .newsletter-content{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:
        repeat(2,1fr);
    }
}

@media(max-width:768px){

    .newsletter-box{
        padding:28px;
    }

    .newsletter-text h3{
        font-size:32px;
    }

    .newsletter-form{
        flex-direction:column;
    }

    .newsletter-form button{
        min-height:56px;
        justify-content:center;
    }

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













/* ===================================
   SHOP HERO
=================================== */

.shop-hero{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg, rgba(5,8,22,.82) 0%, rgba(5,8,22,.74) 45%, rgba(5,8,22,.88) 100%),
        url('../images/shop-bg.webp') center center / cover no-repeat;
    padding:180px 24px 80px;
}

.shop-hero-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 15% 10%, rgba(0,224,240,.14), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(240,0,176,.14), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(240,112,0,.10), transparent 35%);
}

.shop-hero-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;

    text-align:center;
}

.shop-breadcrumb{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin-bottom:24px;

    color:#94a3b8;

    font-size:14px;
    font-weight:700;
}

.shop-breadcrumb a{
    color:#94a3b8;
    text-decoration:none;
    transition:.3s;
}

.shop-breadcrumb a:hover{
    color:#67e8f9;
}

.shop-breadcrumb i{
    font-size:11px;
    color:#475569;
}

.shop-breadcrumb span{
    color:#67e8f9;
}

.shop-hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:24px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    color:#c9f8ff;

    font-size:14px;
    font-weight:700;
}

.shop-hero-badge i{
    color:#67e8f9;
}

.shop-hero h1{
    color:#ffffff;

    font-size:64px;
    font-weight:900;
    line-height:1.1;
    letter-spacing:-1px;
}

.shop-hero-description{
    margin:24px auto 0;

    max-width:640px;

    color:#cbd5e1;

    font-size:18px;
    line-height:1.8;
}

@media(max-width:768px){

    .shop-hero{
        padding:160px 20px 64px;
    }

    .shop-hero h1{
        font-size:42px;
    }

    .shop-hero-description{
        font-size:16px;
    }
}

/* ===================================
   SHOP TOOLBAR (SEARCH + FILTERS)
=================================== */

.shop-toolbar-section{
    position:relative;
    background:var(--bg-dark);
    padding:0 24px 56px;
}

.shop-toolbar{
    max-width:1280px;
    margin:0 auto;

    display:flex;
    align-items:center;
    gap:16px;

    padding:24px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.shop-search{
    position:relative;
    flex:1;
}

.shop-search i{
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);

    color:#64748b;

    font-size:14px;
}

.shop-search input{
    width:100%;

    padding:16px 20px 16px 48px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:#080b1a;

    color:#fff;

    font-size:14px;
    font-weight:600;

    outline:none;

    transition:.3s;
}

.shop-search input::placeholder{
    color:#64748b;
}

.shop-search input:focus{
    border-color:#67e8f9;
}

.shop-filter-group{
    display:flex;
    align-items:center;
    gap:16px;
}

.shop-select-wrapper{
    position:relative;
}

.shop-select-wrapper i{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);

    color:#67e8f9;

    font-size:12px;

    pointer-events:none;
}

.shop-select{
    appearance:none;
    -webkit-appearance:none;

    min-width:170px;

    padding:16px 42px 16px 20px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:#080b1a;

    color:#fff;

    font-size:14px;
    font-weight:700;

    outline:none;

    cursor:pointer;

    transition:.3s;
}

.shop-select:focus{
    border-color:#67e8f9;
}

@media(max-width:1024px){

    .shop-toolbar{
        flex-wrap:wrap;
    }

    .shop-search{
        flex:1 1 100%;
    }

    .shop-filter-group{
        flex:1 1 100%;
        flex-wrap:wrap;
    }

    .shop-select-wrapper{
        flex:1;
    }

    .shop-select{
        width:100%;
        min-width:0;
    }
}

@media(max-width:480px){

    .shop-toolbar{
        padding:20px;
        border-radius:24px;
    }

    .shop-filter-group{
        flex-direction:column;
    }

    .shop-select-wrapper{
        width:100%;
    }
}

/* CATEGORY CHIPS */

.shop-categories{
    max-width:1280px;
    margin:20px auto 0;

    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.shop-chip{
    padding:10px 22px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);

    color:#cbd5e1;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.shop-chip:hover{
    border-color:rgba(103,232,249,.50);
    color:#fff;
}

.shop-chip.active{
    border-color:transparent;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;

    box-shadow:0 0 22px rgba(240,0,176,.30);
}

/* ===================================
   SHOP PRODUCT GRID
=================================== */

.shop-grid-section{
    position:relative;
    background:var(--bg-dark-alt);
    padding:0 24px 96px;
    overflow:hidden;
}

.shop-grid-glow-cyan{
    position:absolute;
    top:200px;
    left:0;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(34,211,238,.08);

    filter:blur(110px);

    pointer-events:none;
}

.shop-grid-glow-pink{
    position:absolute;
    bottom:120px;
    right:0;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(236,72,153,.08);

    filter:blur(110px);

    pointer-events:none;
}

.shop-results-bar{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto 32px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
}

.shop-results-count{
    color:#94a3b8;

    font-size:14px;
    font-weight:600;
}

.shop-results-count span{
    color:#67e8f9;
    font-weight:900;
}

.shop-product-grid{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

@media(max-width:1200px){

    .shop-product-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .shop-product-grid{
        grid-template-columns:1fr;
    }
}

/* ===================================
   PAGINATION
=================================== */

.shop-pagination{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:64px auto 0;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.page-btn{
    width:48px;
    height:48px;

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

    border-radius:50%;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:14px;
    font-weight:900;

    cursor:pointer;

    text-decoration:none;

    transition:.3s;
}

.page-btn:hover{
    border-color:#67e8f9;
    color:#67e8f9;
}

.page-btn.active{
    border-color:transparent;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;

    box-shadow:0 0 22px rgba(240,0,176,.30);
}

.page-btn.disabled{
    opacity:.35;
    cursor:not-allowed;
}

.page-btn.disabled:hover{
    border-color:rgba(255,255,255,.10);
    color:#fff;
}

@media(max-width:480px){

    .page-btn{
        width:42px;
        height:42px;
        font-size:13px;
    }

    .shop-pagination{
        gap:8px;
    }
}

/* ===================================
   SHOP CTA
=================================== */

.shop-cta-section{
    position:relative;
    background:var(--bg-dark);
    padding:0 24px 120px;
}

.shop-cta{
    position:relative;
    overflow:hidden;

    max-width:1280px;
    margin:0 auto;

    padding:64px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:linear-gradient(
        to right,
        rgba(103,232,249,.15),
        rgba(236,72,153,.15),
        rgba(251,146,60,.15)
    );

    backdrop-filter:blur(20px);

    text-align:center;
}

.shop-cta h2{
    color:#fff;

    font-size:48px;
    font-weight:900;
    line-height:1.15;
}

.shop-cta h2 span{
    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.shop-cta p{
    margin:16px auto 0;

    max-width:560px;

    color:#cbd5e1;

    font-size:16px;
    line-height:1.8;
}

.shop-cta-buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;

    margin-top:32px;
}

@media(max-width:768px){

    .shop-cta{
        padding:40px 28px;
    }

    .shop-cta h2{
        font-size:34px;
    }
}






/* ===================================
   PRODUCT DETAILS — BREADCRUMB
=================================== */

.pd-breadcrumb-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:160px 24px 56px;
}

.pd-breadcrumb-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 15% 10%, rgba(0,224,240,.14), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(240,0,176,.14), transparent 35%);
}

.pd-breadcrumb-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;
    text-align:center;
}

.pd-breadcrumb{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin-top:28px;

    color:#94a3b8;

    font-size:14px;
    font-weight:700;
}

.pd-breadcrumb a{
    color:#94a3b8;
    text-decoration:none;
    transition:.3s;
}

.pd-breadcrumb a:hover{
    color:#67e8f9;
}

.pd-breadcrumb i{
    font-size:11px;
    color:#475569;
}

.pd-breadcrumb span{
    color:#67e8f9;
}

.pd-category-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:24px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    color:#c9f8ff;

    font-size:13px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.1em;
}

.pd-category-badge i{
    color:#67e8f9;
}

.pd-breadcrumb-container h1{
    max-width:780px;
    margin:0 auto;

    color:#fff;

    font-size:52px;
    font-weight:900;
    line-height:1.15;
    letter-spacing:-1px;
}

@media(max-width:768px){

    .pd-breadcrumb-section{
        padding:140px 20px 48px;
    }

    .pd-breadcrumb-container h1{
        font-size:36px;
    }
}

/* ===================================
   PRODUCT SHOWCASE
=================================== */

.pd-showcase-section{
    position:relative;
    background:var(--bg-dark-alt);
    padding:0 24px 100px;
}

.pd-showcase-container{
    position:relative;

    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:start;
}

/* LEFT — GALLERY */

.pd-gallery{
    position:relative;
}

.pd-main-image-frame{
    position:relative;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    padding:24px;

    box-shadow:0 25px 60px rgba(0,0,0,.30);
}

.pd-main-image-wrapper{
    position:relative;
    overflow:hidden;

    border-radius:28px;

    background:#ffffff;
}

.pd-main-image{
    display:block;

    width:100%;
    height:520px;

    object-fit:cover;

    opacity:0;
    transform:scale(1.03);

    transition:
        opacity .4s ease,
        transform .5s ease;
}

.pd-main-image.is-visible{
    opacity:1;
    transform:scale(1);
}

.pd-main-badge{
    position:absolute;

    top:20px;
    left:20px;

    padding:8px 18px;

    border-radius:999px;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F
    );

    color:#fff;

    font-size:12px;
    font-weight:900;

    z-index:5;
}

.pd-thumbs{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;

    margin-top:20px;
}

.pd-thumb{
    cursor:pointer;
    overflow:hidden;

    border-radius:18px;

    border:2px solid rgba(255,255,255,.10);

    background:#ffffff;

    transition:.3s;
}

.pd-thumb img{
    display:block;
    width:100%;
    height:84px;
    object-fit:cover;

    transition:.3s;
}

.pd-thumb:hover{
    border-color:rgba(103,232,249,.50);
}

.pd-thumb.active{
    border-color:#67e8f9;
    box-shadow:0 0 18px rgba(0,224,240,.30);
}

@media(max-width:480px){

    .pd-thumbs{
        grid-template-columns:repeat(4,1fr);
    }

    .pd-main-image{
        height:340px;
    }
}

/* RIGHT — INFO */

.pd-info{
    position:relative;
}

.pd-info h1{
    color:#fff;

    font-size:38px;
    font-weight:900;
    line-height:1.2;
}

.pd-rating-row{
    display:flex;
    align-items:center;
    gap:12px;

    margin-top:16px;
}

.pd-stars{
    display:flex;
    align-items:center;
    gap:4px;

    color:#fdba74;
    font-size:16px;
}

.pd-review-count{
    color:#94a3b8;

    font-size:14px;
    font-weight:600;
}

.pd-price-row{
    display:flex;
    align-items:baseline;
    gap:14px;

    margin-top:24px;
}

.pd-price{
    color:#67e8f9;

    font-size:44px;
    font-weight:900;
}

.pd-price-old{
    color:#64748b;

    font-size:18px;
    font-weight:700;

    text-decoration:line-through;
}

.pd-summary{
    margin-top:20px;

    max-width:520px;

    color:#cbd5e1;

    font-size:15px;
    line-height:1.85;
}

.pd-divider{
    margin:20px 0;
    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.15),
        transparent
    );
}

/* SIZE SELECTOR */

.pd-option-label{
    display:block;

    margin-bottom:10px;

    color:#fff;

    font-size:14px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.08em;
}

.pd-sizes{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;

    margin-bottom:20px;
    padding-bottom:6px;

    overflow-x:auto;
    scrollbar-width:thin;
}

.pd-sizes::-webkit-scrollbar{
    height:5px;
}

.pd-sizes::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.15);
    border-radius:99px;
}

.pd-size-option{
    flex:0 0 auto;

    min-width:56px;

    padding:10px 16px;

    text-align:center;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);

    color:#cbd5e1;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.pd-size-option:hover{
    border-color:rgba(103,232,249,.50);
    color:#fff;
}

.pd-size-option.active{
    border-color:transparent;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;

    box-shadow:0 0 20px rgba(240,0,176,.30);
}

/* COLOR SWATCHES */

.pd-option-label .pd-selected-color-name{
    margin-left:8px;

    color:#67e8f9;

    font-size:13px;
    font-weight:700;

    text-transform:none;
    letter-spacing:normal;
}

.pd-colors{
    display:flex;
    flex-wrap:nowrap;
    gap:12px;

    margin-bottom:20px;
    padding-bottom:6px;

    overflow-x:auto;
    scrollbar-width:thin;
}

.pd-colors::-webkit-scrollbar{
    height:5px;
}

.pd-colors::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.15);
    border-radius:99px;
}

.pd-color-swatch{
    position:relative;
    flex:0 0 auto;

    width:34px;
    height:34px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.15);

    background-color:var(--swatch-color, #e0e0e0);

    cursor:pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.pd-color-swatch:hover{
    transform:scale(1.12);
    border-color:rgba(103,232,249,.60);
}

.pd-color-swatch.active{
    border-color:#67e8f9;

    box-shadow:
        0 0 0 3px rgba(8,11,26,1),
        0 0 0 5px #67e8f9,
        0 0 18px rgba(0,224,240,.35);
}

.pd-color-swatch.active::after{
    content:'\f00c';

    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:12px;

    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    color:#fff;

    text-shadow:0 0 4px rgba(0,0,0,.65);
}


/* Product Details — tells shoppers that the Designer has extra colors,
   while reusing the page's existing dark glass-card visual language. */
.pd-more-colors-note{
    display:flex;
    align-items:flex-start;
    gap:9px;

    margin-top:-8px;
    padding:10px 12px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;

    background:rgba(255,255,255,.05);

    color:#cbd5e1;

    font-size:12px;
    line-height:1.5;
}

.pd-more-colors-note i{
    margin-top:2px;
    color:var(--accent-cyan);
}

.pd-more-colors-note strong{
    color:#fff;
    font-weight:900;
}

/* PRODUCT GALLERY — COLOR FADE TRANSITION */

.pd-main-image.pd-color-fade{
    opacity:0;
    transition:opacity .2s ease;
}

/* ADD TO CART VALIDATION MESSAGE */

.pd-form-message{
    display:none;

    margin-bottom:20px;
    padding:12px 16px;

    border-radius:14px;

    font-size:13px;
    font-weight:700;
}

.pd-form-message.is-visible{
    display:block;
}

.pd-form-message.is-error{
    border:1px solid rgba(248,113,113,.35);
    background:rgba(248,113,113,.10);

    color:#fca5a5;
}

/* QUANTITY + ACTIONS */

.pd-action-row{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:20px;
}

.pd-qty-stepper{
    display:flex;
    align-items:center;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:#080b1a;

    overflow:hidden;
}

.pd-qty-btn{
    width:48px;
    height:52px;

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

    border:none;

    background:transparent;

    color:#67e8f9;

    font-size:16px;

    cursor:pointer;

    transition:.3s;
}

.pd-qty-btn:hover{
    background:rgba(103,232,249,.12);
}

.pd-qty-value{
    width:48px;

    text-align:center;

    color:#fff;

    font-size:16px;
    font-weight:900;
}

.pd-add-cart-btn{
    flex:1;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:16px 28px;

    border:none;
    cursor:pointer;

    border-radius:999px;

    font-size:15px;
    font-weight:900;

    color:#fff;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    box-shadow:0 0 30px rgba(240,0,176,.35);

    transition:.3s ease;
}

.pd-add-cart-btn:hover{
    transform:scale(1.03);
}

.pd-quote-btn{
    width:100%;

    padding:16px 28px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.20);

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

    text-decoration:none;

    color:#fff;

    font-size:15px;
    font-weight:900;

    transition:.3s;
}

.pd-quote-btn:hover{
    background:#67e8f9;
    color:#050816;
    border-color:#67e8f9;
}

.pd-trust-row{
    display:flex;
    flex-wrap:wrap;
    gap:20px;

    margin-top:28px;
}

.pd-trust-item{
    display:flex;
    align-items:center;
    gap:10px;

    color:#94a3b8;

    font-size:13px;
    font-weight:700;
}

.pd-trust-item i{
    color:#67e8f9;
}

@media(max-width:1024px){

    .pd-showcase-container{
        grid-template-columns:1fr;
        gap:40px;
    }
}

@media(max-width:480px){

    .pd-info h1{
        font-size:30px;
    }

    .pd-price{
        font-size:36px;
    }

    .pd-action-row{
        flex-direction:column;
        align-items:stretch;
    }

    .pd-qty-stepper{
        justify-content:center;
    }
}

/* ===================================
   ARTWORK UPLOAD
=================================== */

.pd-upload-section{
    position:relative;
    background:var(--bg-dark);
    padding:0 24px 100px;
}

.pd-upload-card{
    position:relative;
    overflow:hidden;

    max-width:1280px;
    margin:0 auto;

    padding:48px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

.pd-upload-header{
    display:flex;
    align-items:center;
    gap:20px;

    margin-bottom:32px;
}

.pd-upload-header-icon{
    width:64px;
    height:64px;

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

    border-radius:24px;

    background:linear-gradient(
        135deg,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;

    font-size:28px;
}

.pd-upload-header h3{
    color:#fff;
    font-size:26px;
    font-weight:900;
}

.pd-upload-header p{
    margin-top:6px;
    color:#94a3b8;
    font-size:14px;
}

.pd-dropzone{
    position:relative;

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

    text-align:center;

    padding:40px 32px;

    border-radius:28px;

    border:1px dashed rgba(103,232,249,.35);

    background:rgba(103,232,249,.05);

    cursor:pointer;

    transition:.3s;
}

.pd-dropzone:hover,
.pd-dropzone.is-dragover{
    border-color:#67e8f9;
    background:rgba(103,232,249,.10);
}

.pd-dropzone-icon{
    width:64px;
    height:64px;

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

    margin-bottom:20px;

    border-radius:20px;

    background:rgba(103,232,249,.15);

    color:#67e8f9;

    font-size:26px;
}

.pd-dropzone h4{
    color:#fff;

    font-size:18px;
    font-weight:900;
}

.pd-dropzone p{
    margin-top:8px;

    color:#94a3b8;

    font-size:14px;
}

.pd-browse-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-top:20px;

    padding:14px 28px;

    border:none;
    cursor:pointer;

    border-radius:999px;

    color:#fff;

    font-size:14px;
    font-weight:900;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    box-shadow:0 0 24px rgba(240,0,176,.30);

    transition:.3s;
}

.pd-browse-btn:hover{
    transform:scale(1.05);
}

.pd-formats-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;

    margin-top:24px;
}

.pd-format-chip{
    padding:8px 16px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    color:#cbd5e1;

    font-size:12px;
    font-weight:800;

    letter-spacing:.05em;
}

.pd-upload-list{
    margin-top:24px;
}

.pd-upload-list:empty{
    display:none;
}

.pd-upload-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 18px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);

    margin-bottom:12px;
}

.pd-upload-item i{
    color:#67e8f9;
    font-size:18px;
}

.pd-upload-item-name{
    flex:1;

    color:#fff;

    font-size:14px;
    font-weight:700;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.pd-upload-item-size{
    color:#64748b;

    font-size:13px;
    font-weight:600;
}

.pd-upload-remove{
    width:28px;
    height:28px;

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

    border:none;
    cursor:pointer;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#f87171;

    font-size:12px;

    transition:.3s;
}

.pd-upload-remove:hover{
    background:#f87171;
    color:#fff;
}

@media(max-width:768px){

    .pd-upload-card{
        padding:32px 24px;
    }

    .pd-upload-header{
        flex-direction:column;
        text-align:center;
    }

    .pd-dropzone{
        padding:40px 20px;
    }
}

/* ===================================
   PRODUCT INFO TABS
=================================== */

.pd-tabs-section{
    position:relative;
    background:var(--bg-dark-alt);
    padding:0 24px 100px;
}

.pd-tabs-container{
    max-width:1280px;
    margin:0 auto;
}

.pd-tabs-nav{
    display:flex;
    gap:12px;

    margin-bottom:0;

    border-radius:24px 24px 0 0;

    overflow-x:auto;
}

.pd-tab-btn{
    flex:1;

    padding:20px 24px;

    border:1px solid rgba(255,255,255,.10);
    border-bottom:none;

    background:rgba(255,255,255,.04);

    color:#94a3b8;

    font-size:15px;
    font-weight:900;

    cursor:pointer;

    border-radius:24px 24px 0 0;

    white-space:nowrap;

    transition:.3s;
}

.pd-tab-btn:hover{
    color:#fff;
}

.pd-tab-btn.active{
    color:#fff;

    background:rgba(255,255,255,.07);

    box-shadow:inset 0 3px 0 0 #67e8f9;
}

.pd-tabs-panels{
    padding:40px;

    border-radius:0 24px 24px 24px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

.pd-tab-panel{
    display:none;
}

.pd-tab-panel.active{
    display:block;

    animation:pdFadeIn .4s ease;
}

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

.pd-tab-panel p{
    color:#cbd5e1;

    font-size:15px;
    line-height:1.9;
}

.pd-tab-panel p + p{
    margin-top:16px;
}

/* SPEC TABLE */

.pd-spec-list{
    list-style:none;
    padding:0;
    margin:0;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.pd-spec-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    padding:18px 20px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);
}

.pd-spec-row span:first-child{
    color:#94a3b8;

    font-size:13px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.06em;
}

.pd-spec-row span:last-child{
    color:#fff;

    font-size:14px;
    font-weight:900;

    text-align:right;
}

/* ARTWORK REQUIREMENTS */

.pd-requirements-list{
    list-style:none;
    padding:0;
    margin:0;
}

.pd-requirements-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;

    margin-bottom:18px;

    color:#cbd5e1;

    font-size:15px;
    font-weight:600;

    line-height:1.7;
}

.pd-requirements-list i{
    margin-top:3px;
    color:#67e8f9;
    font-size:16px;
}

@media(max-width:768px){

    .pd-tab-btn{
        padding:16px 18px;
        font-size:13px;
    }

    .pd-tabs-panels{
        padding:28px 24px;
    }

    .pd-spec-list{
        grid-template-columns:1fr;
    }
}

/* ===================================
   PRODUCT DETAILS CTA
=================================== */

.pd-cta-section{
    position:relative;
    background:var(--bg-dark);
    padding:0 24px 120px;
}

.pd-cta{
    position:relative;
    overflow:hidden;

    max-width:1280px;
    margin:0 auto;

    padding:64px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:linear-gradient(
        to right,
        rgba(103,232,249,.15),
        rgba(236,72,153,.15),
        rgba(251,146,60,.15)
    );

    backdrop-filter:blur(20px);

    text-align:center;
}

.pd-cta h2{
    color:#fff;

    font-size:48px;
    font-weight:900;
    line-height:1.15;
}

.pd-cta h2 span{
    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.pd-cta p{
    margin:16px auto 0;

    max-width:560px;

    color:#cbd5e1;

    font-size:16px;
    line-height:1.8;
}

.pd-cta-buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;

    margin-top:32px;
}

@media(max-width:768px){

    .pd-cta{
        padding:40px 28px;
    }

    .pd-cta h2{
        font-size:34px;
    }
}

/* ===================================
   SHARED SECTION HEADER (for Why
   Choose + Related Products on this page)
=================================== */

.pd-section-header{
    max-width:800px;
    margin:0 auto 56px;
    text-align:center;
}

.pd-section-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    color:#c9f8ff;

    font-size:14px;
    font-weight:900;
}

.pd-section-header h2{
    margin-top:24px;

    color:#fff;

    font-size:52px;
    font-weight:900;
    line-height:1.1;
}

.pd-section-header h2 span{
    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.pd-section-header p{
    max-width:640px;
    margin:20px auto 0;

    color:#cbd5e1;

    font-size:16px;
    line-height:1.8;
}

@media(max-width:768px){

    .pd-section-header h2{
        font-size:36px;
    }
}

/* WHY CHOOSE GRID (this page uses 4 cols vs homepage's 2) */

.pd-why-grid{
    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

@media(max-width:1024px){

    .pd-why-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){

    .pd-why-grid{
        grid-template-columns:1fr;
    }
}

/* RELATED PRODUCTS GRID (reuses .product-card) */

.pd-related-section{
    position:relative;
    background:var(--bg-dark-alt);
    padding:112px 24px;
    overflow:hidden;
}

.pd-related-grid{
    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

@media(max-width:1200px){

    .pd-related-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .pd-related-grid{
        grid-template-columns:1fr;
    }
}

/* WHY CHOOSE SECTION WRAPPER (own bg) */

.pd-why-section{
    position:relative;
    background:
        linear-gradient(180deg, rgba(5,8,22,.76) 0%, rgba(5,8,22,.70) 45%, rgba(5,8,22,.84) 100%),
        url('../images/why-choose-bg.webp') center center / cover no-repeat;
    padding:112px 24px;
    overflow:hidden;
}

.pd-why-glow-cyan{
    position:absolute;
    top:60px;
    left:0;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(34,211,238,.10);

    filter:blur(110px);

    pointer-events:none;
}

.pd-why-glow-pink{
    position:absolute;
    bottom:40px;
    right:0;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(236,72,153,.10);

    filter:blur(110px);

    pointer-events:none;
}






/* ===================================
   PRODUCT CARD — DETAILS LINK WRAPPER
=================================== */

.product-card-link{
    display:block;

    color:inherit;
    text-decoration:none;

    cursor:pointer;
}

.shop-hero{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg, rgba(5,8,22,.82) 0%, rgba(5,8,22,.74) 45%, rgba(5,8,22,.88) 100%),
        url('../images/shop-bg.webp') center center / cover no-repeat;
    padding:180px 24px 80px;
}

.shop-hero-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 15% 10%, rgba(0,224,240,.14), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(240,0,176,.14), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(240,112,0,.10), transparent 35%);
}

.shop-hero-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;

    text-align:center;
}

.shop-breadcrumb{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin-bottom:24px;

    color:#94a3b8;

    font-size:14px;
    font-weight:700;
}

.shop-breadcrumb a{
    color:#94a3b8;
    text-decoration:none;
    transition:.3s;
}

.shop-breadcrumb a:hover{
    color:#67e8f9;
}

.shop-breadcrumb i{
    font-size:11px;
    color:#475569;
}

.shop-breadcrumb span{
    color:#67e8f9;
}

.shop-hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:24px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    color:#c9f8ff;

    font-size:14px;
    font-weight:700;
}

.shop-hero-badge i{
    color:#67e8f9;
}

.shop-hero h1{
    color:#ffffff;

    font-size:64px;
    font-weight:900;
    line-height:1.1;
    letter-spacing:-1px;
}

.shop-hero-description{
    margin:24px auto 0;

    max-width:640px;

    color:#cbd5e1;

    font-size:18px;
    line-height:1.8;
}

@media(max-width:768px){

    .shop-hero{
        padding:160px 20px 64px;
    }

    .shop-hero h1{
        font-size:42px;
    }

    .shop-hero-description{
        font-size:16px;
    }
}

/* ===================================
   SHOP TOOLBAR (SEARCH + FILTERS)
=================================== */

.shop-toolbar-section{
    position:relative;
    background:var(--bg-dark);
    padding:0 24px 56px;
}

.shop-toolbar{
    max-width:1280px;
    margin:0 auto;

    display:flex;
    align-items:center;
    gap:16px;

    padding:24px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.shop-search{
    position:relative;
    flex:1;
}

.shop-search i{
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);

    color:#64748b;

    font-size:14px;
}

.shop-search input{
    width:100%;

    padding:16px 20px 16px 48px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:#080b1a;

    color:#fff;

    font-size:14px;
    font-weight:600;

    outline:none;

    transition:.3s;
}

.shop-search input::placeholder{
    color:#64748b;
}

.shop-search input:focus{
    border-color:#67e8f9;
}

.shop-filter-group{
    display:flex;
    align-items:center;
    gap:16px;
}

.shop-select-wrapper{
    position:relative;
}

.shop-select-wrapper i{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);

    color:#67e8f9;

    font-size:12px;

    pointer-events:none;
}

.shop-select{
    appearance:none;
    -webkit-appearance:none;

    min-width:170px;

    padding:16px 42px 16px 20px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:#080b1a;

    color:#fff;

    font-size:14px;
    font-weight:700;

    outline:none;

    cursor:pointer;

    transition:.3s;
}

.shop-select:focus{
    border-color:#67e8f9;
}

@media(max-width:1024px){

    .shop-toolbar{
        flex-wrap:wrap;
    }

    .shop-search{
        flex:1 1 100%;
    }

    .shop-filter-group{
        flex:1 1 100%;
        flex-wrap:wrap;
    }

    .shop-select-wrapper{
        flex:1;
    }

    .shop-select{
        width:100%;
        min-width:0;
    }
}

@media(max-width:480px){

    .shop-toolbar{
        padding:20px;
        border-radius:24px;
    }

    .shop-filter-group{
        flex-direction:column;
    }

    .shop-select-wrapper{
        width:100%;
    }
}

/* CATEGORY CHIPS */

.shop-categories{
    max-width:1280px;
    margin:20px auto 0;

    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.shop-chip{
    padding:10px 22px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);

    color:#cbd5e1;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.shop-chip:hover{
    border-color:rgba(103,232,249,.50);
    color:#fff;
}

.shop-chip.active{
    border-color:transparent;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;

    box-shadow:0 0 22px rgba(240,0,176,.30);
}

/* ===================================
   SHOP PRODUCT GRID
=================================== */

.shop-grid-section{
    position:relative;
    background:var(--bg-dark-alt);
    padding:0 24px 96px;
    overflow:hidden;
}

.shop-grid-glow-cyan{
    position:absolute;
    top:200px;
    left:0;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(34,211,238,.08);

    filter:blur(110px);

    pointer-events:none;
}

.shop-grid-glow-pink{
    position:absolute;
    bottom:120px;
    right:0;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(236,72,153,.08);

    filter:blur(110px);

    pointer-events:none;
}

.shop-results-bar{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto 32px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
}

.shop-results-count{
    color:#94a3b8;

    font-size:14px;
    font-weight:600;
}

.shop-results-count span{
    color:#67e8f9;
    font-weight:900;
}

.shop-product-grid{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

@media(max-width:1200px){

    .shop-product-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .shop-product-grid{
        grid-template-columns:1fr;
    }
}

/* ===================================
   PAGINATION
=================================== */

.shop-pagination{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:64px auto 0;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.page-btn{
    width:48px;
    height:48px;

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

    border-radius:50%;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:14px;
    font-weight:900;

    cursor:pointer;

    text-decoration:none;

    transition:.3s;
}

.page-btn:hover{
    border-color:#67e8f9;
    color:#67e8f9;
}

.page-btn.active{
    border-color:transparent;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;

    box-shadow:0 0 22px rgba(240,0,176,.30);
}

.page-btn.disabled{
    opacity:.35;
    cursor:not-allowed;
}

.page-btn.disabled:hover{
    border-color:rgba(255,255,255,.10);
    color:#fff;
}

@media(max-width:480px){

    .page-btn{
        width:42px;
        height:42px;
        font-size:13px;
    }

    .shop-pagination{
        gap:8px;
    }
}

/* ===================================
   SHOP CTA
=================================== */

.shop-cta-section{
    position:relative;
    background:var(--bg-dark);
    padding:0 24px 120px;
}

.shop-cta{
    position:relative;
    overflow:hidden;

    max-width:1280px;
    margin:0 auto;

    padding:64px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:linear-gradient(
        to right,
        rgba(103,232,249,.15),
        rgba(236,72,153,.15),
        rgba(251,146,60,.15)
    );

    backdrop-filter:blur(20px);

    text-align:center;
}

.shop-cta h2{
    color:#fff;

    font-size:48px;
    font-weight:900;
    line-height:1.15;
}

.shop-cta h2 span{
    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

.shop-cta p{
    margin:16px auto 0;

    max-width:560px;

    color:#cbd5e1;

    font-size:16px;
    line-height:1.8;
}

.shop-cta-buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;

    margin-top:32px;
}

@media(max-width:768px){

    .shop-cta{
        padding:40px 28px;
    }

    .shop-cta h2{
        font-size:34px;
    }
}








/* ===================================
   CART / CHECKOUT FLASH MESSAGES
   BUGFIX: .checkout-error-banner had no CSS at all -- it was
   rendering unstyled, and the success variant was hardcoded with
   light-theme inline colors (#e9f7ee bg, dark green text) that
   clashed hard against the dark glass UI. Both now share the same
   glass-card treatment as the rest of the page, with only the
   accent tint swapped per status.
=================================== */

.cart-flash-section{
    position:relative;
    background:var(--bg-dark);
    padding:24px 24px 0;
}

.checkout-error-banner{
    display:flex;
    align-items:flex-start;
    gap:14px;

    max-width:1280px;
    margin:0 auto;
    padding:18px 22px;

    border-radius:20px;

    border:1px solid rgba(248,113,113,.35);
    background:rgba(248,113,113,.10);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    color:#ffd9d9;

    font-size:14px;
    font-weight:700;
    line-height:1.5;

    animation:cartItemIn .4s cubic-bezier(.16,1,.3,1);
}

.checkout-error-banner i{
    flex-shrink:0;
    margin-top:2px;

    font-size:18px;
    color:#f87171;
}

.checkout-error-banner.is-success{
    border-color:rgba(52,168,83,.35);
    background:rgba(47,168,79,.10);

    color:#c9f7d4;
}

.checkout-error-banner.is-success i{
    color:#4ade80;
}

@media(prefers-reduced-motion:reduce){
    .checkout-error-banner{
        animation:none;
    }
}

/* ADD TO style.css */

/* ===================================
   CART PAGE — ITEMS + SUMMARY
   Refined pass: hover/focus micro-interactions, entrance
   animation, gradient accents on totals, and a redesigned
   empty state. Same dark glassmorphic language throughout —
   no new colors introduced beyond existing brand accents.
=================================== */

.cart-section{
    position:relative;
    background:var(--bg-dark);
    padding:0 24px 100px;
}

.cart-grid{
    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:40px;
    align-items:start;
}

/* ITEMS PANEL */

.cart-items-panel{
    padding:40px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    transition:border-color .4s ease;
}

.cart-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:28px;
}

.cart-panel-header h2{
    color:#fff;
    font-size:26px;
    font-weight:900;
}

.cart-item-count{
    padding:8px 18px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);

    background:rgba(255,255,255,.05);

    color:#c9f8ff;

    font-size:13px;
    font-weight:800;

    transition:border-color .3s ease, background-color .3s ease, transform .3s ease;
}

/* pulses briefly whenever the item count updates (see main.js) */
.cart-item-count.is-updating{
    transform:scale(1.12);
    border-color:rgba(103,232,249,.65);
    background:rgba(103,232,249,.12);
}

/* SINGLE ITEM ROW */

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

    padding:24px 0;

    border-bottom:1px solid rgba(255,255,255,.08);
    border-radius:16px;

    transition:background-color .35s ease, padding .35s ease, opacity .3s ease, transform .3s ease;

    animation:cartItemIn .45s cubic-bezier(.16,1,.3,1) backwards;
}

/* subtle staggered entrance for the first several rows on load */
.cart-item:nth-child(1){ animation-delay:.02s; }
.cart-item:nth-child(2){ animation-delay:.07s; }
.cart-item:nth-child(3){ animation-delay:.12s; }
.cart-item:nth-child(4){ animation-delay:.17s; }
.cart-item:nth-child(5){ animation-delay:.22s; }

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

.cart-item:hover{
    background:rgba(255,255,255,.035);
    padding-left:12px;
    padding-right:12px;
}

.cart-item:first-child{
    padding-top:0;
}

.cart-item:first-child:hover{
    padding-top:8px;
}

.cart-item:last-child{
    padding-bottom:0;
    border-bottom:none;
}

.cart-item:last-child:hover{
    padding-bottom:8px;
}

/* fades down while a remove/qty request is in flight */
.cart-item.is-pending{
    opacity:.45;
    pointer-events:none;
}

/* plays once right before a row is removed from the DOM */
.cart-item.is-removing{
    opacity:0;
    transform:translateX(12px) scale(.98);
    padding-top:0;
    padding-bottom:0;
    margin:0;
    max-height:0;
    overflow:hidden;
}

.cart-item-image-wrapper{
    position:relative;
    flex-shrink:0;

    width:96px;
    height:96px;

    border-radius:20px;
    overflow:hidden;

    background:#ffffff;

    box-shadow:0 8px 20px -10px rgba(3,8,20,.5);

    transition:box-shadow .35s ease;
}

.cart-item:hover .cart-item-image-wrapper{
    box-shadow:0 10px 28px -8px rgba(3,8,20,.65), 0 0 0 2px rgba(103,232,249,.25);
}

.cart-item-image{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.cart-item:hover .cart-item-image{
    transform:scale(1.08);
}

.cart-item-info{
    flex:1;
    min-width:160px;
}

.cart-item-category{
    display:block;

    color:#67e8f9;

    font-size:12px;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.06em;
}

.cart-item-name{
    margin-top:6px;

    color:#fff;

    font-size:18px;
    font-weight:900;
    line-height:1.3;

    transition:color .3s ease;
}

.cart-item:hover .cart-item-name{
    color:#e7fbff;
}

.cart-item-variant{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;

    margin-top:8px;
}

.cart-item-variant-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:4px 10px;

    border-radius:999px;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;
    line-height:1;

    transition:background-color .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}

/* only meaningfully "hoverable" when it's actually a link/button
   (Edit Design, Duplicate) -- static info chips stay put */
a.cart-item-variant-chip:hover{
    background:rgba(103,232,249,.14);
    border-color:rgba(103,232,249,.45);
    color:#e7fbff;
    transform:translateY(-1px);
}

.cart-item-color-dot{
    width:12px;
    height:12px;
    flex-shrink:0;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.3);

    background-color:var(--swatch-color, #e0e0e0);
}

.cart-item-size-chip{
    color:#67e8f9;
}

.cart-item-unit-price{
    display:block;
    margin-top:6px;

    color:#94a3b8;

    font-size:13px;
}

.cart-item-meta{
    display:flex;
    align-items:center;
    gap:24px;

    margin-left:auto;
}

.cart-item-subtotal{
    min-width:90px;

    text-align:right;

    color:#67e8f9;

    font-size:20px;
    font-weight:900;

    transition:color .3s ease, transform .2s ease;
}

/* brief highlight pulse when a line total recalculates (main.js) */
.cart-item-subtotal.is-updating{
    color:#a5f3ff;
    transform:scale(1.06);
}

.cart-item-remove{
    width:40px;
    height:40px;

    flex-shrink:0;

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

    border:none;
    cursor:pointer;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#f87171;

    font-size:14px;

    transition:background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.cart-item-remove:hover{
    background:#f87171;
    color:#fff;
    transform:rotate(90deg);
    box-shadow:0 6px 16px -4px rgba(248,113,113,.55);
}

.cart-item-remove:active{
    transform:rotate(90deg) scale(.9);
}

.cart-item-remove:focus-visible,
.cart-item-variant-chip:focus-visible,
.cart-summary-buttons a:focus-visible{
    outline:2px solid #67e8f9;
    outline-offset:2px;
}

/* scoped qty stepper refinements — smaller footprint inside the
   cart row; base .pd-qty-* rules (product designer) stay untouched */
.cart-item .pd-qty-stepper{
    border-color:rgba(255,255,255,.12);

    transition:border-color .3s ease, box-shadow .3s ease;
}

.cart-item .pd-qty-stepper:focus-within{
    border-color:rgba(103,232,249,.5);
    box-shadow:0 0 0 3px rgba(103,232,249,.12);
}

.cart-item .pd-qty-btn{
    width:38px;
    height:42px;
    font-size:13px;
}

.cart-item .pd-qty-btn:active{
    background:rgba(103,232,249,.22);
}

.cart-item .pd-qty-value{
    width:38px;
}

/* EMPTY STATE */

.cart-empty-message{
    display:none;

    padding:64px 24px 24px;

    color:#94a3b8;

    font-size:15px;
    text-align:center;

    animation:cartItemIn .5s cubic-bezier(.16,1,.3,1);
}

.cart-empty-message.is-visible{
    display:block;
}

.cart-empty-message::before{
    content:'\f07a';

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

    width:72px;
    height:72px;
    margin:0 auto 20px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);

    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:26px;

    color:#67e8f9;
}

.cart-empty-message a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:18px;
    padding:12px 26px;

    border-radius:999px;

    background:rgba(103,232,249,.10);
    border:1px solid rgba(103,232,249,.35);

    color:#c9f8ff;

    font-weight:800;
    text-decoration:none;

    transition:background-color .3s ease, border-color .3s ease, transform .3s ease;
}

.cart-empty-message a:hover{
    background:rgba(103,232,249,.20);
    border-color:rgba(103,232,249,.6);
    transform:translateY(-2px);
}

/* ORDER SUMMARY PANEL */

.cart-summary-panel{
    position:sticky;
    top:130px;

    padding:32px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.07);

    backdrop-filter:blur(20px);

    height:fit-content;
    overflow:hidden;

    transition:border-color .4s ease, box-shadow .4s ease;
}

/* quiet gradient hairline across the top -- the one bit of
   "signature" flair, echoing the brand accent trio */
.cart-summary-panel::before{
    content:'';

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:2px;

    background:linear-gradient(90deg, var(--accent-cyan), var(--accent-pink), var(--accent-orange));

    opacity:.55;
}

.cart-summary-panel h2{
    margin-bottom:24px;

    color:#fff;

    font-size:22px;
    font-weight:900;
}

.cart-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    color:#cbd5e1;

    font-size:15px;
    font-weight:700;
}

.cart-summary-row span:last-child{
    transition:color .25s ease;
}

.cart-summary-total{
    margin-top:8px;
    padding-top:20px;

    border-bottom:none;

    color:#fff;

    font-size:22px;
    font-weight:900;
}

.cart-summary-total span:last-child{
    background:linear-gradient(90deg, #ffffff, #c9f8ff);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.cart-summary-buttons{
    display:flex;
    flex-direction:column;
    gap:14px;

    margin-top:28px;
}

.cart-summary-buttons .btn-primary,
.cart-summary-buttons .btn-secondary{
    width:100%;
    justify-content:center;

    transition:transform .3s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}

.cart-summary-buttons .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px -12px rgba(103,232,249,.45);
}

.cart-summary-buttons .btn-secondary:hover{
    transform:translateY(-2px);
}

/* PRINTING ORDER NOTICE WRAPPER */

.cart-notice-section{
    position:relative;
    background:var(--bg-dark-alt);
    padding:0 24px 80px;
}

.cart-notice-wrapper{
    max-width:1280px;
    margin:0 auto;
}

/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

    .cart-item,
    .cart-empty-message,
    .cart-item-image,
    .cart-item-remove,
    .cart-summary-buttons .btn-primary,
    .cart-summary-buttons .btn-secondary{
        animation:none !important;
        transition:none !important;
    }

    .cart-item:hover .cart-item-image{
        transform:none;
    }
}

/* RESPONSIVE */

@media(max-width:1024px){

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

    .cart-summary-panel{
        position:static;
    }
}

@media(max-width:768px){

    .cart-items-panel{
        padding:28px 24px;
    }

    .cart-item{
        flex-wrap:wrap;
    }

    .cart-item:hover{
        padding-left:0;
        padding-right:0;
    }

    .cart-item-meta{
        width:100%;
        margin-left:0;
        margin-top:16px;

        justify-content:space-between;
    }
}

@media(max-width:480px){

    .cart-item-image-wrapper{
        width:80px;
        height:80px;
    }

    .cart-item-meta{
        flex-wrap:wrap;
        gap:14px;
    }

    .cart-item-subtotal{
        text-align:left;
    }
}






/* ADD TO style.css */

/* Cart icon buttons are now <a> tags (so they actually
   navigate to cart.php) — these were previously <button>
   elements with no text-decoration/cursor rules needed. */

.icon-btn{
    text-decoration:none;
}

.product-cart-btn{
    text-decoration:none;
    cursor:pointer;
}

.pd-add-cart-btn{
    text-decoration:none;
    cursor:pointer;
}

.mobile-icons a{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:14px;

    border-radius:16px;

    background:rgba(255,255,255,.10);

    color:#fff;

    text-decoration:none;
}










/* ADD TO style.css */

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

.checkout-section{
    position:relative;
    background:var(--bg-dark);
    padding:0 24px 100px;
}

.checkout-main{
    display:flex;
    flex-direction:column;
    gap:32px;
}

/* "(Optional)" label tag — used in Billing form */

.optional-tag{
    color:#64748b;
    font-size:12px;
    font-weight:600;
    text-transform:none;
}

/* PAYMENT METHOD OPTIONS */

.payment-options{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.payment-option{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

    padding:24px 16px;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);

    cursor:pointer;
    text-align:center;

    transition:.3s;
}

.payment-option i{
    font-size:26px;
    color:#67e8f9;

    transition:.3s;
}

.payment-option span{
    color:#fff;

    font-size:14px;
    font-weight:800;
}

.payment-option:hover{
    border-color:rgba(103,232,249,.50);
}

.payment-option.active{
    border-color:transparent;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    box-shadow:0 0 20px rgba(240,0,176,.30);
}

.payment-option.active i,
.payment-option.active span{
    color:#fff;
}

/* TERMS & CONDITIONS */

.checkout-terms-row{
    display:flex;
    align-items:flex-start;
    gap:14px;

    padding:24px 28px;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);
}

.checkout-terms-checkbox{
    width:22px;
    height:22px;
    margin-top:2px;

    flex-shrink:0;

    accent-color:#67e8f9;

    cursor:pointer;
}

.checkout-terms-row label{
    color:#cbd5e1;

    font-size:14px;
    font-weight:600;
    line-height:1.7;
}

.checkout-terms-row label a{
    color:#67e8f9;
    font-weight:800;
    text-decoration:none;
}

.checkout-terms-row label a:hover{
    text-decoration:underline;
}

/* PLACE ORDER BUTTON */

.checkout-place-order-btn{
    width:100%;
    justify-content:center;

    font-size:16px;
}

.checkout-place-order-btn:disabled{
    opacity:.40;
    cursor:not-allowed;
    box-shadow:none;
}

.checkout-place-order-btn:disabled:hover{
    transform:none;
}

/* ORDER SUMMARY — MINI ITEM LIST  */

.checkout-summary-items{
    margin-bottom:8px;
}

.checkout-summary-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.checkout-summary-item:first-child{
    padding-top:0;
}

.checkout-summary-item-image{
    flex-shrink:0;

    width:56px;
    height:56px;

    border-radius:14px;
    overflow:hidden;

    background:#ffffff;
}

.checkout-summary-item-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.checkout-summary-item-info{
    flex:1;
    min-width:0;
}

.checkout-summary-item-name{
    display:block;

    color:#fff;

    font-size:14px;
    font-weight:800;
    line-height:1.3;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.checkout-summary-item-qty{
    display:block;
    margin-top:4px;

    color:#94a3b8;

    font-size:12px;
}

.checkout-summary-item-price{
    flex-shrink:0;

    color:#67e8f9;

    font-size:14px;
    font-weight:900;
}

/* RESPONSIVE */

@media(max-width:768px){

    .payment-options{
        grid-template-columns:1fr;
    }

    .checkout-terms-row{
        padding:20px;
    }
}








/* ===================================
   DTF TRANSFERS PAGE — CSS ADDITIONS
   Append to style.css
=================================== */

/* ===================================
   DTF HERO
=================================== */

.dtf-hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    background:var(--bg-dark);
    padding:160px 24px 100px;
}

.dtf-hero-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 15% 10%, rgba(0,224,240,.16), transparent 36%),
    radial-gradient(circle at 85% 15%, rgba(240,0,176,.16), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(240,112,0,.12), transparent 36%);
}

.dtf-hero-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:56px;
}

.dtf-hero-content h1{
    max-width:800px;

    color:#fff;

    font-size:72px;
    font-weight:900;
    line-height:1.05;
    letter-spacing:-2px;
}

@media(max-width:1200px){
    .dtf-hero-content h1{
        font-size:58px;
    }
}

@media(max-width:1024px){
    .dtf-hero-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .dtf-hero-container .hero-showcase{
        display:none;
    }

    .dtf-hero-content .shop-breadcrumb{
        justify-content:center !important;
    }

    .dtf-hero-content .hero-badge{
        margin-left:auto;
        margin-right:auto;
    }

    .dtf-hero-content .hero-description{
        margin-left:auto;
        margin-right:auto;
    }

    .dtf-hero-content .hero-buttons{
        justify-content:center;
    }

    .dtf-hero-content .hero-features{
        margin-left:auto;
        margin-right:auto;
    }
}

@media(max-width:768px){
    .dtf-hero-content h1{
        font-size:44px;
    }
}

@media(max-width:480px){
    .dtf-hero-content h1{
        font-size:36px;
    }
}

/* ===================================
   DTF HERO BANNER — ADD-ONS
=================================== */

.dtf-hero-banner{
    background:
        linear-gradient(180deg, rgba(5,8,22,.88) 0%, rgba(5,8,22,.80) 45%, rgba(5,8,22,.94) 100%),
        url('../images/dtf-hero-bg.jpg') center center / cover no-repeat;
}

.ca-hero{
    background:
        linear-gradient(180deg, rgba(5,8,22,.72) 0%, rgba(5,8,22,.60) 45%, rgba(5,8,22,.82) 100%),
        url('../images/ca-hero-bg.webp') center center / cover no-repeat;
}

.banner-brand-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:22px;

    color:#D4AF37;

    font-size:14px;
    font-weight:800;
    letter-spacing:.3px;
}

.banner-brand-tag i{
    font-size:18px;
    color:#D4AF37;
}

.banner-brand-tag em{
    font-style:normal;
    color:#94a3b8;
    font-weight:600;
}

.hero-tagline{
    margin-top:18px;

    color:#e2e8f0;

    font-size:16px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.banner-icon-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;

    max-width:560px;
    margin-top:32px;
}

.banner-icon-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:20px 10px;

    border-radius:14px;
    border:1.5px solid rgba(212,175,55,.45);

    background:rgba(255,255,255,.03);

    text-align:center;
}

.banner-icon-box.border-green{
    border-color:rgba(47,168,79,.45);
}

.banner-icon-box i{
    font-size:22px;
    color:#D4AF37;
}

.banner-icon-box.border-green i{
    color:#3FAE5A;
}

.banner-icon-box span{
    color:#e2e8f0;
    font-size:12px;
    font-weight:800;
    line-height:1.3;
}

@media(max-width:1024px){
    .banner-icon-row{
        margin-left:auto;
        margin-right:auto;
    }
}

@media(max-width:560px){
    .banner-icon-row{
        grid-template-columns:repeat(2,1fr);
    }
}

/* BOTTOM STRIP */

.dtf-banner-strip{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:64px auto 0;

    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:24px;

    padding-top:32px;
    border-top:1px solid rgba(255,255,255,.10);
}

.banner-strip-item{
    display:flex;
    align-items:center;
    gap:12px;

    color:#cbd5e1;
    font-size:14px;
    font-weight:700;
}

.banner-strip-item i{
    font-size:18px;
    color:#D4AF37;
}

@media(max-width:768px){
    .dtf-banner-strip{
        justify-content:center;
        text-align:center;
    }
}

/* ===================================
   WHAT ARE DTF TRANSFERS?
=================================== */

.dtf-what-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark-alt);
    padding:144px 24px;
}

.dtf-what-glow-cyan{
    position:absolute;
    left:-120px;
    top:80px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(34,211,238,.12);

    filter:blur(120px);

    pointer-events:none;
}

.dtf-what-glow-pink{
    position:absolute;
    right:-120px;
    bottom:60px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(236,72,153,.12);

    filter:blur(120px);

    pointer-events:none;
}

.dtf-what-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:64px;
}

/* Visual card */

.dtf-what-card{
    position:relative;

    padding:32px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    box-shadow:0 25px 60px rgba(0,0,0,.25);
}

.dtf-what-photo{
    overflow:hidden;

    width:55%;
    margin:0 auto 28px;

    border-radius:24px;

    background:#080d22;
}

.dtf-what-photo img{
    display:block;
    width:100%;
    aspect-ratio:1/1;
    height:auto;
    object-fit:cover;
    object-position:center;
}

.dtf-what-card-header{
    display:flex;
    align-items:center;
    gap:20px;

    margin-bottom:32px;
}

.dtf-what-card-header h3{
    color:#fff;
    font-size:24px;
    font-weight:900;
}

.dtf-tag{
    display:block;
    margin-top:4px;

    color:#67e8f9;

    font-size:12px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.1em;
}

/* Mini steps */

.dtf-steps-mini{
    display:flex;
    flex-direction:column;
    gap:20px;

    margin-bottom:28px;
}

.dtf-step-mini{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.dtf-step-dot{
    flex-shrink:0;

    width:36px;
    height:36px;

    border-radius:50%;

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

.dtf-step-mini strong{
    display:block;

    color:#fff;

    font-size:15px;
    font-weight:900;

    margin-bottom:3px;
}

.dtf-step-mini span{
    color:#94a3b8;
    font-size:13px;
    line-height:1.6;
}

/* Compatibility bar */

.dtf-compat-bar{
    margin-top:8px;

    padding:20px;

    border-radius:24px;

    border:1px solid rgba(103,232,249,.20);

    background:rgba(103,232,249,.05);
}

.dtf-compat-label{
    display:block;

    color:#67e8f9;

    font-size:12px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.1em;

    margin-bottom:12px;
}

.dtf-compat-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.dtf-compat-chips span{
    padding:6px 16px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.07);

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;
}

/* Right content reuses transfers-* classes from homepage */

.dtf-what-content h2{
    margin-top:24px;

    color:#fff;

    font-size:52px;
    font-weight:900;
    line-height:1.1;
}

.dtf-what-content h2 span{
    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip:text;
    color:transparent;
}

@media(max-width:1024px){
    .dtf-what-container{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){
    .dtf-what-content h2{
        font-size:36px;
    }
}

/* ===================================
   DTF FEATURES GRID (6 columns → 3 → 2 → 1)
=================================== */

.dtf-features-grid{
    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

@media(max-width:1024px){
    .dtf-features-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){
    .dtf-features-grid{
        grid-template-columns:1fr;
    }
}

/* ===================================
   DTF PROCESS — 5-step override
=================================== */

.dtf-process-grid{
    grid-template-columns:repeat(4,1fr);
}

.dtf-final-step{
    max-width:360px;

    margin:24px auto 0;
}

@media(max-width:1200px){
    .dtf-process-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

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

/* ===================================
   AVAILABLE SIZES
=================================== */

.dtf-sizes-section{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg, rgba(5,8,22,.76) 0%, rgba(5,8,22,.70) 45%, rgba(5,8,22,.84) 100%),
        url('../images/sizes-bg.webp') center center / cover no-repeat;
    padding:144px 24px;
}

.dtf-sizes-glow-cyan{
    position:absolute;
    left:-120px;
    top:80px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(34,211,238,.13);

    filter:blur(120px);

    pointer-events:none;
}

.dtf-sizes-glow-pink{
    position:absolute;
    right:-120px;
    bottom:80px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(236,72,153,.13);

    filter:blur(120px);

    pointer-events:none;
}

.dtf-sizes-grid{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

/* Size card (extends pricing-card pattern) */

.dtf-size-card{
    position:relative;

    overflow:hidden;

    padding:20px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.5s;
}

.dtf-size-card:hover{
    transform:translateY(-16px);

    border-color:rgba(103,232,249,.50);

    box-shadow:0 0 45px rgba(0,224,240,.18);
}

.dtf-size-popular{
    border-color:rgba(236,72,153,.60);
    transform:scale(1.04);
}

.dtf-size-popular:hover{
    transform:scale(1.04) translateY(-16px);
}

.dtf-size-card:hover .pricing-shine{
    transform:translateX(120%);
}

.dtf-size-inner{
    position:relative;

    background:rgba(8,11,26,.80);

    padding:24px;

    border-radius:32px;
}

.dtf-size-icon{
    width:64px;
    height:64px;

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

    border-radius:20px;

    margin-bottom:16px;

    color:#fff;
    font-size:26px;

    transition:.4s;

    box-shadow:0 0 28px rgba(255,255,255,.14);
}

.dtf-size-card:hover .dtf-size-icon{
    transform:scale(1.1) rotate(3deg);
}

.dtf-size-inner h3{
    color:#fff;
    font-size:32px;
    font-weight:900;
}

.dtf-size-use{
    margin-top:12px;
    margin-bottom:0;

    color:#94a3b8;

    font-size:13px;
    line-height:1.7;
}

/* Tighter spacing overrides — these cards reuse the shared
   .price-area / .pricing-divider / .pricing-features / .pricing-btn
   pattern, but that pattern's default spacing is tuned for the wider
   pricing cards elsewhere. Scoping to .dtf-size-inner keeps those
   other cards untouched. */

.dtf-size-inner .price-area{
    margin-top:18px;
}

.dtf-size-inner .price{
    font-size:38px;
}

.dtf-size-inner .pricing-divider{
    margin:18px 0;
}

.dtf-size-inner .pricing-features li{
    margin-bottom:12px;
}

.dtf-size-inner .pricing-btn{
    margin-top:18px;
    padding:14px;
}

@media(max-width:1200px){
    .dtf-sizes-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .dtf-size-popular{
        transform:none;
    }

    .dtf-size-popular:hover{
        transform:translateY(-16px);
    }
}

@media(max-width:640px){
    .dtf-sizes-grid{
        grid-template-columns:1fr;
    }
}

/* ===================================
   ARTWORK GUIDELINES
=================================== */

.dtf-artwork-section{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg, rgba(5,8,22,.76) 0%, rgba(5,8,22,.70) 45%, rgba(5,8,22,.84) 100%),
        url('../images/artwork-guidelines-bg.webp') center center / cover no-repeat;
    padding:144px 24px;
}

.dtf-artwork-glow-cyan{
    position:absolute;
    left:-120px;
    top:80px;

    width:400px;
    height:400px;

    border-radius:50%;

    background:rgba(34,211,238,.12);

    filter:blur(120px);

    pointer-events:none;
}

.dtf-artwork-glow-orange{
    position:absolute;
    right:-120px;
    bottom:80px;

    width:400px;
    height:400px;

    border-radius:50%;

    background:rgba(251,146,60,.12);

    filter:blur(120px);

    pointer-events:none;
}

.dtf-artwork-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:stretch;
}

.dtf-artwork-card{
    display:flex;
    flex-direction:column;

    padding:32px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

/* File Types card: header stays pinned to the top, icon row
   centers in whatever extra space stretch-height creates so it
   doesn't sit at the top with a dead gap below it */

.dtf-artwork-card--types .dtf-file-types{
    margin-top:auto;
    margin-bottom:auto;
}

.dtf-artwork-card-header{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:28px;
}

.dtf-artwork-card-header h3{
    color:#fff;
    font-size:20px;
    font-weight:900;
}

.dtf-artwork-card-header p{
    margin-top:4px;

    color:#94a3b8;
    font-size:13px;
}

/* File types grid */

.dtf-file-types{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:start;
    gap:16px;
}

.dtf-file-type{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

    padding:20px 12px;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);

    text-align:center;

    transition:.3s;
}

.dtf-file-type:hover{
    border-color:rgba(103,232,249,.35);

    background:rgba(255,255,255,.08);

    transform:translateY(-4px);
}

.dtf-file-icon{
    width:44px;
    height:44px;

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

    border-radius:14px;

    color:#fff;
    font-size:18px;
}

.dtf-file-ext{
    color:#fff;

    font-size:13px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.05em;
}

.dtf-file-note{
    color:#64748b;

    font-size:11px;
    font-weight:600;

    line-height:1.4;
}

/* Upload notice spanning both columns */

.dtf-upload-notice{
    grid-column:1 / -1;
}

@media(max-width:1024px){
    .dtf-artwork-container{
        grid-template-columns:1fr;
    }

    .dtf-upload-notice{
        grid-column:1 / 2;
    }
}

@media(max-width:640px){
    .dtf-file-types{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:400px){
    .dtf-file-types{
        grid-template-columns:repeat(2,1fr);
    }
}

/* ===================================
   CUSTOMER SHOWCASE
=================================== */

.dtf-showcase-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:144px 24px;
}

.dtf-showcase-grid{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.dtf-showcase-card{
    position:relative;
    overflow:hidden;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.5s;
}

.dtf-showcase-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:var(--card-glow, rgba(103,232,249,.10));

    opacity:0;

    transition:.4s;
}

.dtf-showcase-card:hover::before{
    opacity:1;
}

.dtf-showcase-card:hover{
    transform:translateY(-12px);

    border-color:rgba(103,232,249,.40);

    box-shadow:0 0 40px rgba(0,224,240,.15);
}

.dtf-showcase-image{
    position:relative;

    height:220px;

    overflow:hidden;
}

.dtf-showcase-image img,
.dtf-showcase-image svg{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.7s;
}

.dtf-showcase-card:hover .dtf-showcase-image svg{
    transform:scale(1.08);
}

.dtf-showcase-badge{
    position:absolute;

    top:16px;
    left:16px;

    padding:8px 16px;

    border-radius:999px;

    background:linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    color:#fff;

    font-size:11px;
    font-weight:900;

    z-index:5;
}

.dtf-showcase-content{
    position:relative;
    z-index:5;

    padding:24px;
}

.dtf-showcase-content h3{
    color:#fff;

    font-size:20px;
    font-weight:900;

    margin-bottom:10px;
}

.dtf-showcase-content p{
    color:#94a3b8;

    font-size:14px;
    line-height:1.7;
}

@media(max-width:1200px){
    .dtf-showcase-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:640px){
    .dtf-showcase-grid{
        grid-template-columns:1fr;
    }
}

/* ===================================
   RESPONSIVE CATCH-ALL TOUCH-UPS
=================================== */

@media(max-width:768px){

    .dtf-what-section,
    .dtf-sizes-section,
    .dtf-artwork-section,
    .dtf-showcase-section{
        padding:80px 20px;
    }

    .dtf-what-card{
        padding:24px;
    }

    .dtf-what-photo{
        width:65%;
        margin:0 auto 20px;
    }

    .dtf-what-photo img{
        aspect-ratio:1/1;
        height:auto;
        object-fit:cover;
        object-position:center;
    }

    .dtf-file-types{
        grid-template-columns:repeat(3,1fr);
    }

    .dtf-steps-mini{
        gap:16px;
    }
}

@media(max-width:375px){

    .dtf-hero-content h1{
        font-size:32px;
    }
}










/* ===================================
   CUSTOM APPAREL PAGE — ADDITIONS
   Append to the bottom of style.css
=================================== */

/* ===================================
   HERO OVERRIDE (apparel page)
=================================== */

.ca-hero .dtf-hero-content h1{
    font-size: 64px;
}

@media(max-width: 768px){
    .ca-hero .dtf-hero-content h1{
        font-size: 44px;
    }
}

@media(max-width: 480px){
    .ca-hero .dtf-hero-content h1{
        font-size: 36px;
    }
}

/* ===================================
   APPAREL CATEGORIES
=================================== */

.ca-categories-section{
    position: relative;
    overflow: hidden;
    background: var(--bg-dark);
    padding: 144px 24px;
}

.ca-categories-glow-cyan{
    position: absolute;
    left: -120px;
    top: 80px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(34,211,238,.12);

    filter: blur(120px);

    pointer-events: none;
}

.ca-categories-glow-pink{
    position: absolute;
    right: -120px;
    bottom: 60px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(236,72,153,.12);

    filter: blur(120px);

    pointer-events: none;
}

.ca-categories-grid{
    position: relative;
    z-index: 10;

    max-width: 1280px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

@media(max-width: 1200px){
    .ca-categories-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 640px){
    .ca-categories-grid{
        grid-template-columns: 1fr;
    }
}

/* Category Card — extends dtf-size-card pattern */

.ca-category-card{
    position: relative;
    overflow: hidden;

    padding: 4px;

    border-radius: 32px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(20px);

    transition: .5s;
}

.ca-category-card:hover{
    transform: translateY(-12px);

    border-color: rgba(103,232,249,.45);

    box-shadow:
        0 0 40px var(--card-glow, rgba(0,224,240,.18));
}

.ca-category-card:hover .pricing-shine{
    transform: translateX(120%);
}

.ca-category-inner{
    position: relative;

    background: rgba(8,11,26,.85);

    padding: 32px 28px;

    border-radius: 29px;

    height: 100%;
}

/* CATEGORY PHOTO */

.ca-category-photo{
    overflow:hidden;

    margin:-32px -28px 20px;

    border-radius:29px 29px 0 0;

    background:#080d22;
}

.ca-category-photo img{
    display:block;
    width:100%;
    height:170px;
    object-fit:cover;
}

.ca-category-inner .why-icon{
    width: 60px;
    height: 60px;
    font-size: 24px;
    border-radius: 20px;
    margin-bottom: 20px;

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

    color: #fff;

    box-shadow: 0 0 24px rgba(255,255,255,.12);

    transition: .4s;
}

.ca-category-card:hover .why-icon{
    transform: scale(1.1) rotate(4deg);
}

.ca-category-inner h3{
    color: #fff;

    font-size: 20px;
    font-weight: 900;

    margin-bottom: 10px;
}

.ca-category-inner p{
    color: #94a3b8;

    font-size: 14px;
    line-height: 1.75;

    margin-bottom: 24px;
}

.ca-explore-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 12px 22px;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.15);

    background: rgba(255,255,255,.08);

    color: #fff;

    font-size: 13px;
    font-weight: 900;

    text-decoration: none;

    transition: .3s;
}

.ca-explore-btn:hover{
    background: #67e8f9;
    border-color: #67e8f9;
    color: #050816;
}

/* ===================================
   PRINTING METHODS
=================================== */

.ca-print-methods-section{
    position: relative;
    overflow: hidden;
    background: var(--bg-dark-alt);
    padding: 144px 24px;
}

.ca-print-glow-cyan{
    position: absolute;
    left: -120px;
    top: 100px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(34,211,238,.12);

    filter: blur(120px);

    pointer-events: none;
}

.ca-print-glow-pink{
    position: absolute;
    right: -120px;
    bottom: 80px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(236,72,153,.12);

    filter: blur(120px);

    pointer-events: none;
}

.ca-print-methods-grid{
    position: relative;
    z-index: 10;

    max-width: 1280px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

@media(max-width: 1200px){
    .ca-print-methods-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 640px){
    .ca-print-methods-grid{
        grid-template-columns: 1fr;
    }
}

.ca-print-card{
    position: relative;
    overflow: hidden;

    padding: 4px;

    border-radius: 36px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(20px);

    transition: .5s;
}

.ca-print-card:hover{
    transform: translateY(-12px);

    border-color: rgba(103,232,249,.45);

    box-shadow: 0 0 45px rgba(0,224,240,.18);
}

.ca-print-card-inner{
    background: rgba(8,11,26,.85);

    padding: 32px 28px;

    border-radius: 33px;

    height: 100%;
}

.ca-print-photo{
    overflow: hidden;

    margin: -32px -28px 24px;

    border-radius: 33px 33px 0 0;

    background: #080d22;
}

.ca-print-photo img{
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.ca-print-icon{
    width: 64px;
    height: 64px;
    font-size: 26px;
    border-radius: 22px;
    margin-bottom: 24px;

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

    color: #fff;

    box-shadow: 0 0 28px rgba(255,255,255,.14);

    transition: .4s;
}

.ca-print-card:hover .ca-print-icon{
    transform: scale(1.1) rotate(3deg);
}

.ca-print-card-inner h3{
    color: #fff;

    font-size: 22px;
    font-weight: 900;

    margin-bottom: 14px;
}

.ca-print-desc{
    color: #94a3b8;

    font-size: 14px;
    line-height: 1.8;

    margin-bottom: 20px;
}

.ca-print-tag{
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 14px 18px;

    border-radius: 18px;

    border: 1px solid rgba(103,232,249,.20);

    background: rgba(103,232,249,.05);

    color: #67e8f9;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.6;
}

.ca-print-tag i{
    margin-top: 2px;
    flex-shrink: 0;
}

/* ===================================
   APPAREL PRODUCTS SECTION OVERRIDE
=================================== */

.ca-products-section{
    padding-top: 0;
}

.ca-products-section .pd-section-header{
    padding-top: 96px;
}

.ca-product-grid{
    grid-template-columns: repeat(3, 1fr) !important;
}

@media(max-width: 1200px){
    .ca-product-grid{
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media(max-width: 640px){
    .ca-product-grid{
        grid-template-columns: 1fr !important;
    }
}

.ca-view-all-row{
    position: relative;
    z-index: 10;

    max-width: 1280px;
    margin: 56px auto 0;

    display: flex;
    justify-content: center;
}

/* ===================================
   PROCESS GRID — APPAREL OVERRIDE
=================================== */

.ca-process-grid{
    grid-template-columns: repeat(4, 1fr);
}

@media(max-width: 1200px){
    .ca-process-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 640px){
    .ca-process-grid{
        grid-template-columns: 1fr;
    }
}

/* ===================================
   BULK ORDERS SECTION
=================================== */

.ca-bulk-section{
    position: relative;
    overflow: hidden;
    background: var(--bg-dark);
    padding: 144px 24px;
}

.ca-bulk-glow-cyan{
    position: absolute;
    left: -120px;
    top: 80px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(34,211,238,.12);

    filter: blur(120px);

    pointer-events: none;
}

.ca-bulk-glow-orange{
    position: absolute;
    right: -120px;
    bottom: 80px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(251,146,60,.12);

    filter: blur(120px);

    pointer-events: none;
}

.ca-bulk-container{
    position: relative;
    z-index: 10;

    max-width: 1280px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 64px;
}

@media(max-width: 1024px){
    .ca-bulk-container{
        grid-template-columns: 1fr;
    }
}

.ca-bulk-content h2{
    margin-top: 0;

    color: #fff;

    font-size: 52px;
    font-weight: 900;
    line-height: 1.1;
}

.ca-bulk-content h2 span{
    background: linear-gradient(
        to right,
        #67e8f9,
        #2FA84F,
        #D4AF37
    );

    -webkit-background-clip: text;
    color: transparent;
}

@media(max-width: 768px){
    .ca-bulk-content h2{
        font-size: 36px;
    }
}

.ca-bulk-description{
    margin-top: 20px;
    margin-bottom: 40px;

    max-width: 540px;

    color: #cbd5e1;

    font-size: 16px;
    line-height: 1.85;
}

.ca-bulk-use-cases{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    margin-bottom: 40px;
}

@media(max-width: 640px){
    .ca-bulk-use-cases{
        grid-template-columns: 1fr;
    }
}

.ca-bulk-item{
    display: flex;
    align-items: flex-start;
    gap: 16px;

    padding: 20px;

    border-radius: 24px;

    border: 1px solid rgba(255,255,255,.08);

    background: rgba(255,255,255,.04);

    backdrop-filter: blur(10px);

    transition: .4s;
}

.ca-bulk-item:hover{
    border-color: rgba(103,232,249,.35);
    background: rgba(103,232,249,.04);
}

.ca-bulk-icon{
    flex-shrink: 0;

    width: 44px;
    height: 44px;

    border-radius: 14px;

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

    color: #fff;
    font-size: 18px;
}

.ca-bulk-item h4{
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 6px;
}

.ca-bulk-item p{
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.65;
}

.ca-bulk-cta{
    display: inline-flex;
}

/* Bulk visual card */

.ca-bulk-visual{
    position: relative;
}

.ca-bulk-card{
    position: relative;

    padding: 32px;

    border-radius: 40px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(20px);

    box-shadow: 0 25px 60px rgba(0,0,0,.25);
}

.ca-bulk-photo{
    overflow:hidden;

    margin:-32px -32px 24px;

    border-radius:40px 40px 0 0;

    background:#080d22;
}

.ca-bulk-photo img{
    display:block;
    width:100%;
    height:220px;
    object-fit:cover;
}

.ca-bulk-card-header{
    display: flex;
    align-items: center;
    gap: 20px;

    margin-bottom: 32px;
}

.ca-bulk-card-header h3{
    color: #fff;
    font-size: 22px;
    font-weight: 900;
}

/* Pricing tiers */

.ca-bulk-tiers{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ca-bulk-tier{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ca-tier-qty{
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.ca-tier-bar{
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}

.ca-tier-fill{
    height: 100%;
    border-radius: 999px;
    transition: width .8s ease;
}

.ca-tier-label{
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
}

.ca-tier-save{
    color: #4ade80;
}

/* ===================================
   SIZE GUIDE
=================================== */

.ca-size-section{
    position: relative;
    overflow: hidden;
    background: var(--bg-dark-alt);
    padding: 144px 24px;
}

.ca-size-glow-cyan{
    position: absolute;
    left: -120px;
    top: 80px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(34,211,238,.12);

    filter: blur(120px);

    pointer-events: none;
}

.ca-size-glow-pink{
    position: absolute;
    right: -120px;
    bottom: 60px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(236,72,153,.12);

    filter: blur(120px);

    pointer-events: none;
}

.ca-size-grid{
    position: relative;
    z-index: 10;

    max-width: 1280px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

@media(max-width: 1200px){
    .ca-size-grid{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 768px){
    .ca-size-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 400px){
    .ca-size-grid{
        grid-template-columns: 1fr;
    }
}

.ca-size-card{
    position: relative;
    overflow: hidden;

    padding: 4px;

    border-radius: 28px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(20px);

    transition: .4s;
}

.ca-size-card:hover{
    transform: translateY(-10px);

    border-color: rgba(103,232,249,.45);

    box-shadow: 0 0 40px rgba(0,224,240,.18);
}

.ca-size-card:hover .pricing-shine{
    transform: translateX(120%);
}

.ca-size-inner{
    background: rgba(8,11,26,.85);

    padding: 24px 20px;

    border-radius: 25px;

    text-align: center;
}

.ca-size-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    border-radius: 22px;

    color: #fff;

    font-size: 28px;
    font-weight: 900;

    margin: 0 auto 20px;

    box-shadow: 0 0 24px rgba(255,255,255,.14);
}

.ca-size-measurements{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ca-size-row{
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 8px 0;

    border-bottom: 1px solid rgba(255,255,255,.06);
}

.ca-size-row:last-child{
    border-bottom: none;
}

.ca-size-key{
    color: #64748b;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.ca-size-val{
    color: #cbd5e1;

    font-size: 13px;
    font-weight: 700;
}

.ca-size-note{
    position: relative;
    z-index: 10;

    max-width: 1280px;
    margin: 40px auto 0;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 20px 28px;

    border-radius: 20px;

    border: 1px solid rgba(103,232,249,.20);

    background: rgba(103,232,249,.05);

    color: #94a3b8;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.7;
}

.ca-size-note i{
    color: #67e8f9;
    font-size: 18px;
    flex-shrink: 0;
}

/* ===================================
   GALLERY SECTION — 3-column grid
=================================== */

.ca-gallery-section{
    padding-bottom: 120px;
}

.ca-gallery-grid{
    position: relative;
    z-index: 10;

    max-width: 1280px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media(max-width: 1200px){
    .ca-gallery-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 640px){
    .ca-gallery-grid{
        grid-template-columns: 1fr;
    }
}












/* =====================================================
   PRICING PAGE — CSS ADDITIONS
   Append to the bottom of style.css
   Logo-inspired gold (#D4AF37 / #F5C542) and
   emerald (#2E8B57 / #3FAE5A) used as accent only.
   Primary cyan / pink / orange theme is unchanged.
====================================================== */

/* ===================================
   LOGO-COLOUR TOKEN UTILITIES
=================================== */

.gold-text   { color: #F5C542; }
.emerald-text{ color: #3FAE5A; }

/* Icon backgrounds */
.gold-bg-icon{
    color: #F5C542;
    background: rgba(212,175,55,.15);
}
.emerald-bg-icon{
    color: #3FAE5A;
    background: rgba(63,174,90,.15);
}

/* Icon gradients (used in plan cards + included grid) */
.gold-gradient{
    background: linear-gradient(135deg, #D4AF37, #F5C542);
    color: #050816;
}
.emerald-gradient{
    background: linear-gradient(135deg, #2E8B57, #3FAE5A);
    color: #fff;
}

/* Why-card icon gradient aliases */
.why-icon.gold-gradient    { background: linear-gradient(135deg, #D4AF37, #F5C542); color: #050816; }
.why-icon.emerald-gradient { background: linear-gradient(135deg, #2E8B57, #3FAE5A); color: #fff; }
.why-icon.cyan-gradient    { background: linear-gradient(135deg, #22d3ee, #67e8f9); color: #050816; }
.why-icon.pink-gradient    { background: linear-gradient(135deg, #2FA84F, #f472b6); color: #fff;    }
.why-icon.orange-gradient  { background: linear-gradient(135deg, #D4AF37, #fdba74); color: #050816; }

/* ===================================
   PRICING HERO
=================================== */

.pricing-hero{
    position: relative;
    overflow: hidden;
    background: var(--bg-dark);
    padding: 180px 24px 96px;
    text-align: center;
}

.pricing-hero-bg{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(0,224,240,.14), transparent 35%),
        radial-gradient(circle at 85% 15%, rgba(240,0,176,.14), transparent 35%),
        radial-gradient(circle at 50% 100%, rgba(240,112,0,.10), transparent 35%),
        url('../images/pricing-hero.jpg');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: center, center, center, center;
    background-size: auto, auto, auto, cover;
    background-attachment: scroll, scroll, scroll, fixed;
}

.pricing-hero-bg::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5,8,22,.55);
}

@media(max-width:1024px){
    .pricing-hero-bg{
        background-attachment: scroll, scroll, scroll, scroll;
    }
}
/* Subtle hero gold glow inspired by the crown */
.pricing-hero-glow-gold{
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 260px;
    border-radius: 50%;
    background: rgba(212,175,55,.08);
    filter: blur(80px);
    pointer-events: none;
}

.pricing-hero-glow-emerald{
    position: absolute;
    bottom: 0;
    right: -100px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(46,139,87,.07);
    filter: blur(100px);
    pointer-events: none;
}

.pricing-hero-container{
    position: relative;
    z-index: 10;
    max-width: 1280px;
    margin: 0 auto;
}

.pricing-hero-badge{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(212,175,55,.40);
    background: rgba(212,175,55,.08);
    backdrop-filter: blur(12px);
    color: #F5C542;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .05em;
}

.pricing-hero h1{
    max-width: 820px;
    margin: 0 auto;
    color: #fff;
    font-size: 68px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -2px;
}

.pricing-hero-desc{
    margin: 24px auto 0;
    max-width: 660px;
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1.8;
}

.pricing-hero-btns{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

/* STATS ROW */

.pricing-hero-stats{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 64px auto 0;
    max-width: 800px;
    padding: 32px 40px;
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(20px);
}

.pricing-stat{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 32px;
}

.pricing-stat-num{
    display: block;
    font-size: 36px;
    font-weight: 900;
    color: #67e8f9;
    line-height: 1;
}

.pricing-stat-label{
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
}

.pricing-stat-divider{
    width: 1px;
    height: 48px;
    background: rgba(255,255,255,.10);
}

@media(max-width:768px){

    .pricing-hero h1{
        font-size: 42px;
    }

    .pricing-hero-stats{
        gap: 24px;
        padding: 28px 24px;
        flex-direction: column;
    }

    .pricing-stat-divider{
        width: 80px;
        height: 1px;
    }
}

/* ===================================
   PRICING PLANS SECTION
=================================== */

.pricing-plans-section{
    position: relative;
    overflow: hidden;
    background: var(--bg-dark-alt);
    padding: 96px 24px 0;
}

.pricing-plans-glow-cyan{
    position: absolute;
    top: 100px;
    left: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(34,211,238,.10);
    filter: blur(120px);
    pointer-events: none;
}

.pricing-plans-glow-pink{
    position: absolute;
    bottom: 80px;
    right: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(236,72,153,.10);
    filter: blur(120px);
    pointer-events: none;
}

.pricing-plans-glow-gold{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    height: 300px;
    border-radius: 50%;
    background: rgba(212,175,55,.05);
    filter: blur(100px);
    pointer-events: none;
}

/* PLANS GRID */

.pricing-plans-grid{
    position: relative;
    z-index: 10;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
}

/* PLAN CARD */

.pricing-plan-card{
    position: relative;
    border-radius: 40px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(24px);
    transition: .4s;
}

.pricing-plan-card:hover{
    transform: translateY(-10px);
    border-color: rgba(103,232,249,.40);
    box-shadow: 0 28px 64px rgba(0,224,240,.14);
}

/* FEATURED / POPULAR CARD */

.pricing-plan-featured{
    border: 2px solid rgba(212,175,55,.60);
    background: rgba(255,255,255,.07);
    box-shadow:
        0 0 0 1px rgba(212,175,55,.20),
        0 0 60px rgba(212,175,55,.10),
        0 0 60px rgba(0,224,240,.08);
}

.pricing-plan-featured:hover{
    border-color: #F5C542;
    box-shadow:
        0 0 0 1px rgba(245,197,66,.40),
        0 28px 64px rgba(212,175,55,.20);
    transform: translateY(-12px);
}

.pricing-popular-badge{
    position: absolute;
    top: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(to right, #D4AF37, #F5C542);
    color: #050816;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: 0 0 20px rgba(212,175,55,.40);
    z-index: 5;
}

.pricing-plan-inner{
    padding: 44px 36px 40px;
}

/* Icon */

.pricing-plan-icon{
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    font-size: 28px;
    margin-bottom: 28px;
}

.pricing-plan-name{
    color: #fff;
    font-size: 30px;
    font-weight: 900;
}

.pricing-plan-subtitle{
    margin-top: 12px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.75;
}

/* Price block */

.pricing-plan-price-block{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 32px;
}

.pricing-plan-from{
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    margin-right: 4px;
}

.pricing-plan-currency{
    color: #67e8f9;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    align-self: flex-start;
    margin-top: 4px;
}

.pricing-plan-amount{
    color: #67e8f9;
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
}

/* Gold price for featured plan */
.gold-price{
    color: #F5C542 !important;
}
.pricing-plan-featured .pricing-plan-currency{
    color: #F5C542;
}

.pricing-plan-unit{
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    margin-top: 4px;
}

/* Dividers */

.pricing-plan-divider{
    height: 1px;
    margin: 32px 0;
    background: rgba(255,255,255,.08);
}

.gold-divider{
    background: linear-gradient(to right, transparent, rgba(212,175,55,.50), transparent);
}

/* Feature list */

.pricing-plan-features{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    margin: 0;
}

.pricing-plan-features li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #d1d5db;
    font-size: 15px;
    line-height: 1.6;
}

.pricing-check-icon{
    flex-shrink: 0;
    margin-top: 3px;
    color: #67e8f9;
    font-size: 14px;
}

.gold-check{
    color: #F5C542 !important;
}

.pricing-feature-disabled{
    opacity: .45;
}

.pricing-cross-icon{
    flex-shrink: 0;
    margin-top: 3px;
    color: #ef4444;
    font-size: 14px;
}

/* CTA button */

.pricing-plan-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 36px;
    padding: 18px 24px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    color: #fff;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
    transition: .3s;
}

.pricing-plan-btn:hover{
    background: linear-gradient(to right, #67e8f9, #2FA84F, #D4AF37);
    border-color: transparent;
    box-shadow: 0 0 28px rgba(240,0,176,.30);
}

/* Gold CTA for featured plan */
.pricing-plan-btn-gold{
    background: linear-gradient(to right, #D4AF37, #F5C542);
    border-color: transparent;
    color: #050816;
    box-shadow: 0 0 28px rgba(212,175,55,.35);
}

.pricing-plan-btn-gold:hover{
    background: linear-gradient(to right, #F5C542, #fff1a8, #F5C542) !important;
    box-shadow: 0 0 40px rgba(212,175,55,.55) !important;
    color: #050816 !important;
}

/* Note */

.pricing-plans-note{
    position: relative;
    z-index: 10;
    margin: 56px auto 0;
    padding-bottom: 96px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
    max-width: 560px;
}

.pricing-plans-note strong{
    color: #F5C542;
}

.pricing-plans-note a{
    color: #67e8f9;
    font-weight: 800;
    text-decoration: none;
}

.pricing-plans-note a:hover{
    text-decoration: underline;
}

@media(max-width:1100px){
    .pricing-plans-grid{
        grid-template-columns: 1fr 1fr;
    }
}

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

    .pricing-plan-inner{
        padding: 36px 28px;
    }
}

/* ===================================
   COMPARISON TABLE
=================================== */

.pricing-compare-section{
    position: relative;
    overflow: hidden;
    background: var(--bg-dark);
    padding: 0 24px 96px;
}

.pricing-compare-glow-cyan{
    position: absolute;
    left: -100px;
    top: 80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(34,211,238,.10);
    filter: blur(120px);
    pointer-events: none;
}

.pricing-compare-glow-gold{
    position: absolute;
    right: -80px;
    top: 200px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(212,175,55,.07);
    filter: blur(100px);
    pointer-events: none;
}

.pricing-compare-wrapper{
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin: 0 auto;
    overflow-x: auto;
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(20px);
}

.pricing-compare-table{
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,.04);
}

.pricing-compare-table thead tr{
    background: rgba(5,8,22,.80);
}

.pricing-compare-table th{
    padding: 24px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.pricing-compare-feature-col{
    text-align: left !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding-left: 28px !important;
    width: 30%;
}

/* Featured column header */
.pricing-compare-featured-col{
    background: rgba(212,175,55,.08);
    color: #F5C542 !important;
    border-left: 1px solid rgba(212,175,55,.25);
    border-right: 1px solid rgba(212,175,55,.25);
}

.pricing-compare-crown{
    display: block;
    color: #F5C542;
    font-size: 14px;
    margin-bottom: 6px;
}

.pricing-compare-table tbody tr{
    transition: .3s;
}

.pricing-compare-table tbody tr:hover{
    background: rgba(255,255,255,.03);
}

.pricing-compare-table td{
    padding: 18px 20px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.06);
}

.pricing-compare-label{
    text-align: left !important;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 700;
    padding-left: 28px !important;
}

/* Featured cell */
.pricing-compare-featured-cell{
    background: rgba(212,175,55,.05);
    border-left: 1px solid rgba(212,175,55,.15);
    border-right: 1px solid rgba(212,175,55,.15);
}

.pricing-table-check{
    color: #F5C542;
    font-size: 18px;
}

.pricing-compare-featured-cell .pricing-table-check{
    color: #F5C542;
}

td:not(.pricing-compare-featured-cell) .pricing-table-check{
    color: #3FAE5A;
}

.pricing-table-cross{
    color: #475569;
    font-size: 16px;
}

.pricing-table-text{
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 700;
}

.pricing-compare-featured-cell .pricing-table-text{
    color: #fef3c7;
}

/* ===================================
   BULK PRICING
=================================== */

.pricing-bulk-section{
    position: relative;
    overflow: hidden;
    background: var(--bg-dark-alt);
    padding: 96px 24px;
}

.pricing-bulk-glow-gold{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 600px;
    height: 300px;
    border-radius: 50%;
    background: rgba(212,175,55,.07);
    filter: blur(100px);
    pointer-events: none;
}

.pricing-bulk-glow-cyan{
    position: absolute;
    right: -100px;
    bottom: 60px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(34,211,238,.09);
    filter: blur(120px);
    pointer-events: none;
}

.pricing-bulk-container{
    position: relative;
    z-index: 10;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.pricing-bulk-content h2{
    color: #fff;
    font-size: 52px;
    font-weight: 900;
    line-height: 1.1;
    margin-top: 8px;
}

.pricing-bulk-content h2 span{
    background: linear-gradient(to right, #67e8f9, #2FA84F, #D4AF37);
    -webkit-background-clip: text;
    color: transparent;
}

.pricing-bulk-desc{
    margin-top: 20px;
    margin-bottom: 36px;
    max-width: 500px;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1.85;
}

.pricing-bulk-perks{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pricing-bulk-perk{
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.pricing-bulk-perk-icon{
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 20px;
}

.pricing-bulk-perk strong{
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 4px;
}

.pricing-bulk-perk span{
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.65;
}

/* BULK VISUAL CARD */

.pricing-bulk-visual{
    position: relative;
}

.pricing-bulk-card{
    padding: 40px;
    border-radius: 40px;
    border: 1px solid rgba(212,175,55,.25);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(24px);
    box-shadow: 0 0 60px rgba(212,175,55,.08);
}

.pricing-bulk-card-header{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 36px;
}

.pricing-bulk-card-icon{
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 24px;
}

.pricing-bulk-card-header h3{
    color: #fff;
    font-size: 22px;
    font-weight: 900;
}

.pricing-bulk-card-sub{
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
}

/* Tier rows */

.pricing-bulk-tiers{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pricing-bulk-tier-row{}

.pricing-bulk-tier-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pricing-bulk-tier-qty{
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.pricing-bulk-tier-label{
    font-style: normal;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
}

.pricing-bulk-tier-right{
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-bulk-tier-price{
    color: #F5C542;
    font-size: 15px;
    font-weight: 900;
}

.pricing-save-pill{
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(63,174,90,.20);
    border: 1px solid rgba(63,174,90,.35);
    color: #3FAE5A;
    font-size: 12px;
    font-weight: 800;
}

.pricing-tier-track{
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    overflow: hidden;
}

.pricing-tier-fill{
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(to right, #67e8f9, #2FA84F, #D4AF37);
    width: 0;
    transition: width 1.2s cubic-bezier(.22,1,.36,1);
}

.pricing-bulk-card-note{
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

.pricing-bulk-card-note i{
    color: #F5C542;
    margin-right: 6px;
}

@media(max-width:1024px){
    .pricing-bulk-container{
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px){
    .pricing-bulk-content h2{
        font-size: 36px;
    }

    .pricing-bulk-card{
        padding: 28px 24px;
    }
}

/* ===================================
   WHAT'S INCLUDED
=================================== */

.pricing-included-section{
    position: relative;
    overflow: hidden;
    background: var(--bg-dark);
    padding: 0 24px 96px;
}

.pricing-included-grid{
    position: relative;
    z-index: 10;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.pricing-included-card{
    padding: 36px 32px;
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(20px);
    transition: .4s;
}

.pricing-included-card:hover{
    transform: translateY(-8px);
    border-color: rgba(103,232,249,.35);
    box-shadow: 0 20px 50px rgba(0,224,240,.10);
}

.pricing-included-icon{
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    font-size: 26px;
    margin-bottom: 24px;
}

.pricing-included-card h3{
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 12px;
}

.pricing-included-card p{
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.75;
}

@media(max-width:1024px){
    .pricing-included-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:640px){
    .pricing-included-grid{
        grid-template-columns: 1fr;
    }
}

/* ===================================
   FINAL CTA
=================================== */

.pricing-final-cta-section{
    position: relative;
    overflow: hidden;
    background: var(--bg-dark-alt);
    padding: 0 24px 120px;
}

.pricing-cta-gold-glow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 700px;
    height: 300px;
    border-radius: 50%;
    background: rgba(212,175,55,.07);
    filter: blur(80px);
    pointer-events: none;
}

.pricing-final-cta{
    position: relative;
    overflow: hidden;
    z-index: 10;
    max-width: 1280px;
    margin: 0 auto;
    padding: 72px 48px;
    border-radius: 40px;
    border: 1px solid rgba(212,175,55,.25);
    background: linear-gradient(
        to right,
        rgba(103,232,249,.12),
        rgba(236,72,153,.12),
        rgba(251,146,60,.12)
    );
    backdrop-filter: blur(20px);
    text-align: center;
    box-shadow: 0 0 0 1px rgba(212,175,55,.10);
}

.pricing-cta-crown{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 22px;
    background: linear-gradient(135deg, #D4AF37, #F5C542);
    color: #050816;
    font-size: 26px;
    margin: 0 auto 28px;
    box-shadow: 0 0 30px rgba(212,175,55,.35);
}

.pricing-final-cta h2{
    color: #fff;
    font-size: 52px;
    font-weight: 900;
    line-height: 1.15;
}

.pricing-final-cta h2 span{
    background: linear-gradient(to right, #67e8f9, #2FA84F, #D4AF37);
    -webkit-background-clip: text;
    color: transparent;
}

.pricing-final-cta p{
    margin: 16px auto 0;
    max-width: 560px;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1.8;
}

@media(max-width:768px){
    .pricing-final-cta{
        padding: 48px 28px;
    }

    .pricing-final-cta h2{
        font-size: 34px;
    }
}











/* =====================================================
   CONTACT PAGE — CSS ADDITIONS
   Append to the bottom of style.css
   Reuses existing tokens, cards, buttons, and the
   logo-inspired gold (#D4AF37 / #F5C542) and emerald
   (#2E8B57 / #3FAE5A) accents already added for the
   pricing page. Primary cyan / pink / orange theme is
   unchanged.
====================================================== */

/* ===================================
   1. CONTACT HERO
=================================== */

.contact-hero{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:180px 24px 96px;
    text-align:center;
}

.contact-hero-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 15% 10%, rgba(0,224,240,.14), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(240,0,176,.14), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(212,175,55,.08), transparent 35%),
    url('../images/contact-hero.png');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: center, center, center, center;
    background-size: auto, auto, auto, cover;
    background-attachment: scroll, scroll, scroll, fixed;
}

.contact-hero-bg::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5,8,22,.55);
}

@media(max-width:1024px){
    .contact-hero-bg{
        background-attachment: scroll, scroll, scroll, scroll;
    }
}
.contact-hero-container{
    position:relative;
    z-index:10;

    max-width:900px;
    margin:0 auto;
}

@media(max-width:768px){
    .contact-hero{
        padding:150px 24px 80px;
    }
}

/* ===================================
   2. CONTACT INFO GRID
   (reuses .contact-info-card / .contact-icon)
=================================== */

.contact-info-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark-alt);
    padding:96px 24px 0;
}

.contact-info-grid{
    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

/* Allow .contact-info-card to render as a standalone
   block (grid item) instead of a sidebar list item */
.contact-info-card-block{
    flex-direction:column;
    align-items:flex-start;
    text-decoration:none;
    height:100%;
}

.contact-info-card-block .contact-icon{
    margin-bottom:8px;
}

@media(max-width:1024px){
    .contact-info-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){
    .contact-info-grid{
        grid-template-columns:1fr;
    }
}

/* ===================================
   3. STANDALONE QUOTE FORM SECTION
   (reuses .contact-form / .form-header /
   .form-grid / .form-group / .contact-submit)
=================================== */

.contact-form-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:96px 24px 120px;
}

.contact-form-wrapper-standalone{
    position:relative;
    z-index:10;

    max-width:860px;
    margin:0 auto;
}

.contact-form-wrapper-standalone .contact-form{
    padding:40px;
}

/* Artwork upload card embedded inside the quote form
   (reuses .pd-upload-card styling, scoped tighter) */
.pd-upload-card-embedded{
    margin:8px 0 0;
    border-radius:32px;
}

@media(max-width:768px){
    .contact-form-wrapper-standalone .contact-form{
        padding:24px;
    }
}

/* ===================================
   4. WHY CONTACT GRID
   (reuses .why-card / .why-icon, 3 columns)
=================================== */

.contact-why-grid{
    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

@media(max-width:1024px){
    .contact-why-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){
    .contact-why-grid{
        grid-template-columns:1fr;
    }
}

/* ===================================
   5. PRINTING PROCESS — 6 STEP GRID
   (reuses .process-card / .process-icon /
   .step-number, overrides column count)
=================================== */

.contact-process-grid{
    grid-template-columns:repeat(3,1fr);
}

.contact-process-grid .process-item:nth-child(3) .process-arrow,
.contact-process-grid .process-item:nth-child(6) .process-arrow{
    display:none;
}

@media(max-width:1200px){
    .contact-process-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .contact-process-grid .process-item:nth-child(2n) .process-arrow{
        display:none;
    }
}

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

    .contact-process-grid .process-arrow{
        display:none;
    }
}

/* ===================================
   6. SERVICE AREAS
=================================== */

.service-areas-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark-alt);
    padding:0 24px 120px;
}

.service-grid{
    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.service-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;

    padding:28px 20px;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(16px);

    transition:.4s;
}

.service-card:hover{
    transform:translateY(-6px);

    border-color:rgba(212,175,55,.40);

    box-shadow:0 16px 40px rgba(212,175,55,.10);
}

.service-icon{
    width:56px;
    height:56px;

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

    border-radius:18px;

    background:linear-gradient(135deg, rgba(212,175,55,.20), rgba(63,174,90,.20));

    color:#F5C542;

    font-size:22px;
}

.service-card:hover .service-icon{
    color:#3FAE5A;
}

.service-card h4{
    color:#fff;
    font-size:15px;
    font-weight:800;
}

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

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

/* ===================================
   7. GOOGLE MAP PLACEHOLDER
=================================== */

.contact-map-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:0 24px 120px;
}

.contact-map-frame{
    position:relative;

    max-width:1280px;
    margin:0 auto;

    min-height:380px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:10px;

    padding:48px 24px;

    border-radius:40px;

    border:1px dashed rgba(212,175,55,.35);

    background:
    radial-gradient(circle at 30% 20%, rgba(212,175,55,.08), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(63,174,90,.08), transparent 45%),
    rgba(255,255,255,.04);

    backdrop-filter:blur(16px);

    overflow:hidden;
}

.contact-map-placeholder-icon{
    width:72px;
    height:72px;

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

    border-radius:50%;

    margin-bottom:8px;

    background:linear-gradient(135deg, #D4AF37, #F5C542);

    color:#050816;

    font-size:28px;

    box-shadow:0 0 35px rgba(212,175,55,.30);
}

.contact-map-frame h4{
    color:#fff;
    font-size:20px;
    font-weight:900;
}

.contact-map-frame p{
    color:#94a3b8;
    font-size:14px;
}

/* Future use: once a real <iframe> is dropped into
   #contactMapFrame, this keeps it filling the card. */
.contact-map-frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    border-radius:40px;
}

@media(max-width:768px){
    .contact-map-frame{
        min-height:300px;
        padding:36px 20px;
    }
}

.c-h1{
    color: #fff;
}










/* =====================================================
   LOGIN / REGISTER PAGES — CSS ADDITIONS
   Append to the bottom of style.css

   Reuses existing tokens, cards, and buttons
   (.hero-badge, .gradient-text, .contact-form,
   .form-header, .form-grid, .form-group,
   .contact-submit, .checkout-terms-row, .why-card,
   .feature-card, .faq-item, .faq-cta, .pd-section-header,
   .gold-gradient / .emerald-gradient, etc).

   Logo-inspired gold (#D4AF37 / #F5C542) and emerald
   (#2E8B57 / #3FAE5A) are used only as small accents.
   Primary cyan / pink / orange theme is unchanged.
====================================================== */

/* ===================================
   1. AUTH HERO
   (centered hero, shared by login & register)
=================================== */

.auth-hero{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:180px 24px 80px;
    text-align:center;
}

.auth-hero-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 15% 10%, rgba(0,224,240,.14), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(240,0,176,.14), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(212,175,55,.08), transparent 35%);
}

.auth-hero-container{
    position:relative;
    z-index:10;

    max-width:760px;
    margin:0 auto;
}

@media(max-width:768px){
    .auth-hero{
        padding:150px 24px 64px;
    }
}

/* ===================================
   2. AUTH FORM SECTION
   (centered single glass card, reuses
   .contact-form / .form-header / .form-grid /
   .form-group / .contact-submit / .form-glow)
=================================== */

.auth-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark-alt);
    padding:0 24px 120px;
}

.auth-card-wrapper{
    position:relative;
    z-index:10;

    max-width:480px;
    margin:0 auto;
}

.auth-card-wrapper.auth-card-wide{
    max-width:680px;
}

.auth-card-wrapper .contact-form{
    padding:40px;
}

@media(max-width:768px){
    .auth-card-wrapper .contact-form{
        padding:28px 24px;
    }
}

/* Remember me + forgot password row */

.auth-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;

    margin-bottom:28px;
}

.auth-checkbox-label{
    display:flex;
    align-items:center;
    gap:10px;

    color:#cbd5e1;

    font-size:14px;
    font-weight:600;

    cursor:pointer;
}

.auth-checkbox{
    width:20px;
    height:20px;

    accent-color:#67e8f9;

    cursor:pointer;
}

.auth-forgot-link{
    color:#67e8f9;

    font-size:14px;
    font-weight:800;

    text-decoration:none;
}

.auth-forgot-link:hover{
    text-decoration:underline;
}

/* "OR" divider */

.auth-divider{
    position:relative;

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

    margin:28px 0;

    color:#64748b;

    font-size:12px;
    font-weight:800;
    letter-spacing:.1em;
}

.auth-divider::before,
.auth-divider::after{
    content:"";
    flex:1;
    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.15),
        transparent
    );
}

.auth-divider span{
    padding:0 16px;
}

/* Social login button */

.social-btn{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:16px 32px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.20);

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

    color:#ffffff;

    font-size:15px;
    font-weight:900;

    cursor:pointer;

    transition:.3s;
}

.social-btn i{
    font-size:18px;
    color:#fdba74;
}

.social-btn:hover{
    background:#67e8f9;
    color:#050816;
    border-color:#67e8f9;
}

.social-btn:hover i{
    color:#050816;
}

/* Switch link text below the form */

.auth-switch-text{
    margin-top:24px;

    text-align:center;

    color:#94a3b8;

    font-size:14px;
    font-weight:600;
}

.auth-switch-text a{
    margin-left:6px;

    color:#67e8f9;

    font-weight:900;

    text-decoration:none;
}

.auth-switch-text a:hover{
    text-decoration:underline;
}

/* ===================================
   3. AUTH TRUST / BENEFITS SECTION
   (reuses .feature-card or .why-card)
=================================== */

.auth-trust-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:0 24px 96px;
}

/* 4-card grid for login trust features
   (reuses .feature-card) */
.auth-features-grid{
    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.auth-features-grid .feature-card{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
}

.auth-features-grid .feature-card i{
    margin-bottom:6px;
}

@media(max-width:1024px){
    .auth-features-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){
    .auth-features-grid{
        grid-template-columns:1fr;
    }
}

/* 3-column grid for register benefits
   (reuses .why-card / .why-icon) */
.auth-benefits-grid{
    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

@media(max-width:1024px){
    .auth-benefits-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){
    .auth-benefits-grid{
        grid-template-columns:1fr;
    }
}

/* ===================================
   4. AUTH FAQ (register page)
   (reuses .faq-item / .faq-question / .faq-answer)
=================================== */

.auth-faq-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark-alt);
    padding:0 24px 120px;
}

.auth-faq-list{
    max-width:760px;
    margin:0 auto;

    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ===================================
   5. AUTH HELP / FINAL CTA (login page)
   (reuses .faq-cta / .faq-cta-btn)
=================================== */

.auth-help-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:0 24px 120px;
}

.auth-help-card{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

@media(max-width:768px){
    .auth-help-card{
        padding:28px 24px;
    }
}


.l-h1{
    color: #fff;
}





.nav-link.active {
    color: #8ff5ff;
}

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







/* ===================================
   6. AUTH ALERT / VALIDATION ERRORS
=================================== */

.auth-alert{
    display:flex;
    align-items:flex-start;
    gap:14px;

    margin-bottom:28px;

    padding:18px 20px;

    border-radius:20px;

    border:1px solid rgba(248,113,113,.35);

    background:rgba(248,113,113,.08);

    backdrop-filter:blur(12px);
}

.auth-alert-icon{
    flex-shrink:0;

    width:36px;
    height:36px;

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

    border-radius:50%;

    background:rgba(248,113,113,.18);

    color:#f87171;

    font-size:15px;
}

.auth-alert-body{
    flex:1;
}

.auth-alert-body strong{
    display:block;

    margin-bottom:4px;

    color:#fecaca;

    font-size:14px;
    font-weight:900;
}

.auth-alert-list{
    list-style:none;

    display:flex;
    flex-direction:column;
    gap:4px;
}

.auth-alert-list li{
    color:#fda4af;

    font-size:13px;
    font-weight:600;
}

/* ===================================
   7. SPACING UTILITY (single-column auth forms)
=================================== */

.form-field-gap{
    margin-top:20px;
}

/* ===================================
   8. "BACK TO WEBSITE" LINK
=================================== */

.auth-back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:24px;

    color:#67e8f9;

    font-size:14px;
    font-weight:800;

    text-decoration:none;
}

.auth-back-link:hover{
    text-decoration:underline;
}

/* ===================================
   9. SUBMIT BUTTON — LOADING STATE
=================================== */

.contact-submit:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none;
}

.auth-btn-spinner{
    width:18px;
    height:18px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.35);
    border-top-color:#ffffff;

    animation:auth-spin .7s linear infinite;
}

@keyframes auth-spin{
    to{ transform:rotate(360deg); }
}











/* =====================================================================
   CUSTOMER DASHBOARD
   (account.php, account-orders.php, account-order.php,
   account-profile.php, account-password.php)
   Reuses the existing auth-hero / auth-section / contact-form /
   feature-card / shop-pagination design language — no redesign.
===================================================================== */

.dash-section{
    padding-bottom:100px;
}

.dash-layout{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:280px 1fr;
    gap:28px;
    align-items:start;
}

/* SIDEBAR */

.dash-sidebar{
    position:sticky;
    top:110px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.07);

    backdrop-filter:blur(20px);

    padding:28px 22px;

    box-shadow:0 20px 60px rgba(0,0,0,.30);
}

.dash-sidebar-profile{
    display:flex;
    align-items:center;
    gap:14px;

    padding-bottom:22px;
    margin-bottom:18px;

    border-bottom:1px solid rgba(255,255,255,.10);
}

.dash-sidebar-avatar{
    width:52px;
    height:52px;
    flex-shrink:0;

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

    border-radius:50%;

    background:linear-gradient(135deg,#67e8f9,#2FA84F,#D4AF37);

    color:#fff;
    font-size:20px;
}

.dash-sidebar-profile h4{
    color:#fff;
    font-size:15px;
    font-weight:900;
    line-height:1.3;
}

.dash-sidebar-profile p{
    color:#94a3b8;
    font-size:12px;
    word-break:break-all;
}

.dash-nav{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.dash-nav a,
.dash-nav-logout{
    display:flex;
    align-items:center;
    gap:12px;

    padding:13px 16px;

    border-radius:16px;

    border:1px solid transparent;
    background:transparent;

    color:#cbd5e1;

    font-family:'Montserrat', sans-serif;
    font-size:14px;
    font-weight:700;

    text-decoration:none;
    cursor:pointer;

    width:100%;
    text-align:left;

    transition:.25s;
}

.dash-nav a i,
.dash-nav-logout i{
    width:18px;
    text-align:center;
    color:#67e8f9;
}

.dash-nav a:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.10);
    color:#fff;
}

.dash-nav a.active{
    background:linear-gradient(to right, rgba(103,232,249,.18), rgba(47,168,79,.10));
    border-color:rgba(103,232,249,.30);
    color:#fff;
}

.dash-nav-logout{
    margin-top:10px;
    border-top:1px solid rgba(255,255,255,.10);
    border-radius:0;
    padding-top:18px;
}

.dash-nav-logout:hover{
    color:#F5C542;
}

.dash-nav-logout i{
    color:#F5C542;
}

/* CONTENT AREA */

.dash-content{
    min-width:0;
}

.dash-welcome-card{
    display:flex;
    align-items:center;
    gap:18px;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(20px);

    padding:26px 28px;

    margin-bottom:24px;
}

.dash-welcome-card h3{
    color:#fff;
    font-size:20px;
    font-weight:900;
}

.dash-welcome-card p{
    color:#94a3b8;
    font-size:13px;
}

.dash-muted{
    color:#94a3b8;
}

.dash-stats-grid{
    margin-bottom:36px;
}

.dash-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;

    margin-bottom:20px;
}

.dash-panel-header h3{
    color:#fff;
    font-size:20px;
    font-weight:900;
}

.dash-link{
    display:flex;
    align-items:center;
    gap:8px;

    color:#67e8f9;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
}

.dash-link:hover{
    color:#fff;
}

.dash-empty{
    color:#94a3b8;
    text-align:center;
    padding:60px 20px;

    border-radius:24px;
    border:1px dashed rgba(255,255,255,.15);
}

/* TABLE */

.table-responsive{
    width:100%;
    overflow-x:auto;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(20px);
}

.dash-table{
    width:100%;
    min-width:640px;
    border-collapse:collapse;
}

.dash-table th{
    text-align:left;
    padding:16px 20px;

    color:#67e8f9;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;

    border-bottom:1px solid rgba(255,255,255,.10);
    white-space:nowrap;
}

.dash-table td{
    padding:16px 20px;

    color:#cbd5e1;
    font-size:14px;
    font-weight:600;

    border-bottom:1px solid rgba(255,255,255,.06);
    white-space:nowrap;
}

.dash-table tr:last-child td{
    border-bottom:none;
}

.dash-table .text-right{
    text-align:right;
}

.dash-icon-link{
    display:inline-flex;
    align-items:center;
    gap:6px;

    color:#67e8f9;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
}

.dash-icon-link:hover{
    color:#fff;
}

/* BADGES */

.dash-badge{
    display:inline-block;

    padding:6px 14px;

    border-radius:999px;

    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;

    white-space:nowrap;
}

.dash-badge-cyan{
    background:rgba(103,232,249,.14);
    color:#67e8f9;
    border:1px solid rgba(103,232,249,.30);
}

.dash-badge-green{
    background:rgba(47,168,79,.16);
    color:#3FAE5A;
    border:1px solid rgba(47,168,79,.30);
}

.dash-badge-gold{
    background:rgba(245,197,66,.14);
    color:#F5C542;
    border:1px solid rgba(245,197,66,.30);
}

.dash-badge-pink{
    background:rgba(240,0,176,.14);
    color:#f060d8;
    border:1px solid rgba(240,0,176,.30);
}

/* SEARCH */

.dash-search-form{
    display:flex;
    align-items:center;
    gap:0;
}

.dash-search-form input{
    width:220px;

    border:1px solid rgba(255,255,255,.10);
    border-right:none;

    background:#080b1a;

    border-radius:18px 0 0 18px;

    padding:13px 18px;

    color:#cbd5e1;
    font-size:13px;
    font-weight:600;

    outline:none;
}

.dash-search-form button{
    border:1px solid rgba(255,255,255,.10);
    border-left:none;

    background:linear-gradient(135deg,#67e8f9,#2FA84F);

    border-radius:0 18px 18px 0;

    padding:0 18px;

    color:#050816;
    cursor:pointer;
}

.dash-pagination{
    margin-top:32px;
}

/* ORDER DETAILS */

.dash-order-meta-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;

    margin-bottom:28px;
}

.dash-meta-card{
    border-radius:20px;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);

    padding:18px;

    display:flex;
    flex-direction:column;
    gap:8px;
}

.dash-meta-card span{
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.dash-meta-card strong{
    color:#fff;
    font-size:14px;
}

.dash-meta-card p{
    color:#cbd5e1;
    font-size:13px;
}

.dash-address-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;

    margin-bottom:36px;
}

.dash-address-card{
    border-radius:24px;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);

    padding:24px;
}

.dash-address-card h4{
    display:flex;
    align-items:center;
    gap:10px;

    color:#fff;
    font-size:15px;
    font-weight:900;

    margin-bottom:14px;
}

.dash-address-card h4 i{
    color:#67e8f9;
}

.dash-address-card p{
    color:#cbd5e1;
    font-size:13px;
    line-height:1.7;
}

.dash-order-items{
    display:flex;
    flex-direction:column;
    gap:14px;

    margin-bottom:28px;
}

.dash-order-item{
    display:grid;
    grid-template-columns:64px 1fr auto auto auto;
    align-items:center;
    gap:18px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);

    padding:14px 18px;
}

.dash-order-item img{
    width:64px;
    height:64px;

    object-fit:cover;
    border-radius:14px;

    border:1px solid rgba(255,255,255,.10);
}

.dash-order-item-info h5{
    color:#fff;
    font-size:14px;
    font-weight:800;
    margin-bottom:4px;
}

.dash-order-item-info p{
    color:#94a3b8;
    font-size:12px;
}

.dash-order-item-qty,
.dash-order-item-price,
.dash-order-item-total{
    color:#cbd5e1;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.dash-order-item-total{
    color:#67e8f9;
    font-weight:900;
}

.dash-order-summary{
    max-width:380px;
    margin-left:auto;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);

    padding:24px;
}

.dash-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:9px 0;

    color:#cbd5e1;
    font-size:14px;
    font-weight:600;
}

.dash-summary-total{
    margin-top:8px;
    padding-top:16px;

    border-top:1px solid rgba(255,255,255,.10);

    color:#fff;
    font-size:18px;
    font-weight:900;
}

.dash-print-btn{
    width:auto;
    padding:14px 26px;
}

/* ALERTS (shared, used across login / register / checkout / account) */

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

    padding:16px 20px;

    border-radius:18px;

    font-size:13px;
    font-weight:700;

    margin-bottom:24px;
}

.alert i{
    font-size:16px;
}

.alert-success{
    background:rgba(47,168,79,.14);
    border:1px solid rgba(47,168,79,.30);
    color:#3FAE5A;
}

.alert-danger{
    background:rgba(240,0,176,.14);
    border:1px solid rgba(240,0,176,.30);
    color:#f060d8;
}

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

@media(max-width:1024px){

    .dash-layout{
        grid-template-columns:240px 1fr;
        gap:20px;
    }

    .dash-order-meta-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){

    .dash-layout{
        grid-template-columns:1fr;
    }

    .dash-sidebar{
        position:relative;
        top:0;
    }

    .dash-nav{
        flex-direction:row;
        flex-wrap:wrap;
    }

    .dash-nav a,
    .dash-nav-logout{
        width:auto;
        flex:1 1 auto;
        justify-content:center;
    }

    .dash-nav-logout{
        border-top:none;
        margin-top:0;
        padding-top:13px;
    }

    .dash-address-grid{
        grid-template-columns:1fr;
    }

    .dash-order-meta-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .dash-order-item{
        grid-template-columns:54px 1fr;
        grid-template-rows:auto auto;
        row-gap:8px;
    }

    .dash-order-item-qty,
    .dash-order-item-price,
    .dash-order-item-total{
        grid-column:2;
    }
}

@media(max-width:480px){

    .dash-search-form input{
        width:160px;
    }

    .dash-order-meta-grid{
        grid-template-columns:1fr 1fr;
    }

    .dash-welcome-card{
        flex-direction:column;
        text-align:center;
    }

    .dash-order-summary{
        max-width:100%;
    }
}

@media(max-width:375px){

    .dash-sidebar{
        padding:20px 16px;
    }

    .dash-search-form{
        width:100%;
    }

    .dash-search-form input{
        width:100%;
    }
}





.product-category {
    color: #67e8f9;
}







/* ===========================
GANG SHEETS DROPDOWN
Append to style.css — matches .header-bar glass theme,
.nav-link underline treatment, and the blue/green/gold
brand gradient used throughout the header.
=========================== */

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-dropdown-caret {
    font-size: 10px;
    color: #94a3b8;
    transition: transform .3s, color .3s;
}

.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret {
    transform: rotate(180deg);
    color: #67e8f9;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);

    width: 300px;
    max-height: 420px;
    overflow-y: auto;
    padding: 22px 10px 10px;
    margin-top: 4px;

    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);

    background: linear-gradient(
        180deg,
        rgba(13,18,38,.98),
        rgba(5,8,22,.98)
    );

    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 30px rgba(0,224,240,.08);

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

    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;

    z-index: 60;
}

/* little pointer arrow, echoes the pill-shaped header */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);

    width: 12px;
    height: 12px;

    background: rgba(13,18,38,.98);
    border-left: 1px solid rgba(255,255,255,.10);
    border-top: 1px solid rgba(255,255,255,.10);

    border-radius: 3px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px;
    margin-bottom: 4px;

    border-radius: 14px;

    color: #fff;
    text-decoration: none;

    transition: background .25s, transform .2s;
}

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

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
    background: rgba(255,255,255,.08);
    transform: translateX(2px);
}

.nav-dropdown-item.active {
    background: rgba(255,255,255,.08);
}

.nav-dropdown-icon {
    flex-shrink: 0;

    width: 38px;
    height: 38px;

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

    border-radius: 12px;

    font-size: 15px;
    color: #fff;
}

.nav-dropdown-icon--blue {
    background: linear-gradient(135deg, rgba(30,79,168,.35), rgba(30,79,168,.15));
    color: #67e8f9;
}

.nav-dropdown-icon--gold {
    background: linear-gradient(135deg, rgba(212,175,55,.35), rgba(212,175,55,.15));
    color: #D4AF37;
}

.nav-dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-dropdown-text strong {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.nav-dropdown-text small {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .nav-dropdown-menu {
        display: none;
    }
}






/* ==========================
   Footer Bottom
========================== */

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    padding-top:25px;
    margin-top:40px;

    border-top:1px solid rgba(255,255,255,.08);

    color:rgba(255,255,255,.65);
    font-size:14px;
}

.footer-bottom p{
    margin:0;
}

.footer-bottom-right a{
    color:var(--primary-color);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.footer-bottom-right a:hover{
    color:var(--secondary-color);
}

@media (max-width:768px){

    .footer-bottom{
        flex-direction:column;
        text-align:center;
        gap:10px;
    }

}
















/* =====================================================================
   SHOP PAGE REDESIGN — ADDITIONS ONLY
   -----------------------------------------------------------------
   Append this block to the END of assets/css/style.css.
   Nothing here modifies or overrides existing rules — every class
   below is new and scoped to shop.php only:
     - .sp-*                → new product card / quick view / trust bar
     - .shop-layout / .shop-sidebar / .sidebar-*  → new filter layout
   Shared/global classes used elsewhere on the site (.product-card,
   .product-image, .product-cart-btn, .btn-primary, .shop-select,
   .shop-search, .shop-results-bar, .page-btn, .shop-product-grid,
   .shop-pagination, .shop-cta, .shop-hero, etc.) are left untouched
   so the homepage, product-details related-products grid, and every
   other page keep looking exactly as they do today.
===================================================================== */


/* ===================================
   TRUST BAR (shop hero)
=================================== */

.sp-trust-bar{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;

    margin:36px auto 0;
    max-width:820px;
}

.sp-trust-item{
    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    color:#cbd5e1;

    font-size:13px;
    font-weight:700;
}

.sp-trust-item i{
    color:#67e8f9;
    font-size:14px;
}

@media(max-width:768px){

    .sp-trust-bar{
        gap:10px;
    }

    .sp-trust-item{
        padding:8px 14px;
        font-size:12px;
    }
}


/* ===================================
   SHOP LAYOUT (SIDEBAR + MAIN)
=================================== */

.shop-layout-section{
    position:relative;
    background:var(--bg-dark);
    padding:48px 24px 96px;
    overflow:hidden;
}

.shop-filter-form{
    position:relative;
    z-index:10;

    max-width:1400px;
    margin:0 auto;
}

.shop-layout{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.sp-visually-hidden{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* ===================================
   SIDEBAR
=================================== */

.shop-sidebar{
    position:relative;

    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:22px 32px;

    padding:24px 28px;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.sidebar-block--search{
    flex:1 1 260px;
    min-width:220px;
}

.sidebar-block--sort{
    flex:0 0 220px;
}

.sidebar-block--category{
    flex:1 1 100%;
    order:3;
}

.sidebar-block--help{
    flex:1 1 100%;
    order:4;
}

/* Search/sort sit on one row, so their labels don't add extra height
   the category row below doesn't have. */
.sidebar-block--search,
.sidebar-block--sort{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.sp-sidebar-header{
    display:none;
    align-items:center;
    justify-content:space-between;
}

.sp-sidebar-header h4{
    color:#fff;
    font-size:18px;
    font-weight:900;
}

.sp-sidebar-close{
    width:36px;
    height:36px;

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

    border-radius:50%;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.08);

    color:#fff;

    cursor:pointer;
}

.sidebar-block-title{
    margin-bottom:14px;

    color:#fff;

    font-size:13px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.08em;
}

.sp-sidebar-select{
    width:100%;
}

.sp-sidebar-select .shop-select{
    width:100%;
    min-width:0;
}

.sidebar-category-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.sidebar-cat-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.04);

    color:#cbd5e1;

    font-size:13px;
    font-weight:700;
    text-align:left;

    cursor:pointer;

    transition:.3s;
}

.sidebar-cat-btn i{
    display:none;
    font-size:11px;
    color:#475569;
    transition:.3s;
}

.sidebar-cat-btn:hover{
    border-color:rgba(103,232,249,.40);
    color:#fff;
}

.sidebar-cat-btn.active{
    border-color:transparent;

    background:linear-gradient(
        to right,
        rgba(103,232,249,.18),
        rgba(47,168,79,.18),
        rgba(212,175,55,.18)
    );

    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(103,232,249,.35);
}

.sidebar-cat-btn.active i{
    color:#67e8f9;
    transform:translateX(2px);
}

.sp-sidebar-help{
    display:flex;
    gap:12px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.08);

    color:#94a3b8;
}

.sp-sidebar-help i{
    flex-shrink:0;
    margin-top:2px;
    color:#67e8f9;
}

.sp-sidebar-help p{
    font-size:13px;
    line-height:1.7;
}

.sp-sidebar-help a{
    color:#67e8f9;
    font-weight:700;
    text-decoration:none;
}

.sp-sidebar-help a:hover{
    text-decoration:underline;
}

.sp-sidebar-overlay{
    display:none;
}

/* ===================================
   MAIN CONTENT
=================================== */

.shop-main{
    min-width:0;
}

.sp-mobile-toolbar{
    display:none;
    gap:12px;
    margin-bottom:20px;
}

.sp-mobile-search{
    flex:1;
}

.sp-filters-toggle{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;

    padding:0 20px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:14px;
    font-weight:700;

    cursor:pointer;
}

.sp-filters-toggle i{
    color:#67e8f9;
}

.shop-results-bar{
    max-width:none;
    margin:0 0 28px;
}

.sp-active-filter-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-left:10px;
    padding:5px 12px;

    border-radius:999px;

    background:rgba(103,232,249,.12);

    color:#67e8f9;

    font-size:12px;
    font-weight:800;
}

.sp-active-filter-pill a{
    color:#67e8f9;
    display:inline-flex;
}

.sp-view-toggle{
    display:flex;
    gap:6px;

    padding:4px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);
}

.sp-view-btn{
    width:36px;
    height:36px;

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

    border:none;
    border-radius:999px;

    background:transparent;

    color:#94a3b8;

    cursor:pointer;

    transition:.3s;
}

.sp-view-btn:hover{
    color:#fff;
}

.sp-view-btn.active{
    background:linear-gradient(to right,#67e8f9,#2FA84F);
    color:#050816;
}

.shop-product-grid{
    max-width:none;
    margin:0;

    grid-template-columns:repeat(3,1fr);
}


/* =====================================================================
   PRODUCT CARD (Shop page only — namespaced .sp-card, independent
   from the shared .product-card used on the homepage and on the
   product-details related-products grid)
===================================================================== */

.sp-card{
    display:flex;
    flex-direction:column;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    overflow:hidden;

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

.sp-card:hover{
    transform:translateY(-8px);
    border-color:rgba(103,232,249,.55);
    box-shadow:0 0 35px rgba(0,224,240,.16);
}

.sp-card-image-wrap{
    position:relative;
    overflow:hidden;

    background:#ffffff;
}

.sp-card-image-link{
    display:block;
}

.sp-card-image{
    width:100%;
    height:260px;

    object-fit:contain;

    display:block;

    transition:transform .7s ease;
}

.sp-card:hover .sp-card-image{
    transform:scale(1.08);
}

.sp-badge-stack{
    position:absolute;
    top:14px;
    left:14px;

    display:flex;
    flex-direction:column;
    gap:8px;
}

.sp-badge{
    padding:6px 14px;

    border-radius:999px;

    background:linear-gradient(to right,#67e8f9,#2FA84F);

    color:#fff;

    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;

    width:fit-content;
}

.sp-badge-sale{
    background:linear-gradient(to right,#ec4899,#f97316);
}

.sp-badge-stock{
    background:#334155;
    color:#e2e8f0;
}

.sp-btn-quickview.sp-quickview-overlay-btn{
    position:absolute;
    left:50%;
    bottom:14px;
    transform:translate(-50%,14px);

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 20px;

    border:none;
    border-radius:999px;

    background:rgba(5,8,22,.85);

    color:#fff;

    font-size:13px;
    font-weight:800;

    opacity:0;

    cursor:pointer;

    transition:opacity .3s ease, transform .3s ease;
}

.sp-card:hover .sp-quickview-overlay-btn{
    opacity:1;
    transform:translate(-50%,0);
}

.sp-quickview-overlay-btn i{
    color:#67e8f9;
}

.sp-card-body{
    padding:20px 20px 4px;
}

.sp-card-category{
    color:#67e8f9;

    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.sp-card-title{
    margin-top:8px;

    font-size:19px;
    font-weight:900;
    line-height:1.3;
}

.sp-card-title a{
    color:#fff;
    text-decoration:none;
}

.sp-card-title a:hover{
    color:#67e8f9;
}

.sp-card-desc{
    margin-top:6px;

    color:#94a3b8;

    font-size:13px;
    line-height:1.6;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.sp-rating{
    display:flex;
    align-items:center;
    gap:8px;

    margin-top:12px;
}

.sp-stars{
    display:flex;
    gap:2px;

    color:#fdba74;
    font-size:13px;
}

.sp-review-count{
    color:#64748b;

    font-size:12px;
    font-weight:700;
}

.sp-swatches{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;

    margin-top:14px;
}

.sp-swatch{
    width:18px;
    height:18px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.55);

    box-shadow:0 0 0 1px rgba(0,0,0,.25);

    cursor:default;
}

/* Storefront color note — only rendered when Designer-only colors exist. */
.sp-more-colors-note{
    display:inline-flex;
    align-items:center;
    gap:6px;

    margin-top:9px;

    color:#94a3b8;

    font-size:11px;
    font-weight:700;
    line-height:1.4;
}

.sp-more-colors-note i{
    color:var(--accent-cyan);
    font-size:10px;
}

.sp-more-colors-note strong{
    color:#cbd5e1;
    font-weight:900;
}

.sp-sizes{
    display:flex;
    flex-wrap:wrap;
    gap:6px;

    margin-top:12px;
}

.sp-size{
    min-width:30px;

    padding:4px 8px;

    text-align:center;

    border-radius:8px;

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.04);

    color:#94a3b8;

    font-size:11px;
    font-weight:800;
}

.sp-card-footer{
    margin-top:16px;
    padding:16px 20px 20px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;
    flex-direction:column;
    gap:14px;
}

.sp-price-block{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.sp-price-label{
    color:#64748b;

    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.sp-price-value .sp-price,
.sp-price-value .sp-price-old + .sp-price{
    color:#67e8f9;

    font-size:24px;
    font-weight:900;
}

.sp-price-old{
    margin-right:6px;

    color:#64748b;

    font-size:14px;
    font-weight:700;
    text-decoration:line-through;
}

.sp-card-actions{
    display:flex;
    gap:10px;
}

.sp-btn-primary,
.sp-btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    flex:1;

    padding:12px 16px;

    border-radius:999px;

    font-size:13px;
    font-weight:800;

    text-decoration:none;

    cursor:pointer;

    transition:.3s ease;
    white-space:nowrap;
}

.sp-btn-primary{
    border:none;

    background:linear-gradient(to right,#67e8f9,#2FA84F,#D4AF37);

    color:#050816;
}

.sp-btn-primary:hover{
    transform:scale(1.03);
}

.sp-btn-secondary{
    border:1px solid rgba(255,255,255,.14);

    background:rgba(255,255,255,.05);

    color:#fff;
}

.sp-btn-secondary:hover{
    border-color:#67e8f9;
    color:#67e8f9;
}


/* ===================================
   LIST VIEW (toggle, visual only)
=================================== */

.shop-product-grid.sp-list-view{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.sp-list-view .sp-card{
    flex-direction:row;
}

.sp-list-view .sp-card-image-wrap{
    flex:0 0 240px;
}

.sp-list-view .sp-card-image{
    height:100%;
    min-height:220px;
}

.sp-list-view .sp-card-body{
    flex:1;
    padding:20px 24px 4px;
}

.sp-list-view .sp-card-footer{
    flex:0 0 220px;
    justify-content:center;
    border-top:none;
    border-left:1px solid rgba(255,255,255,.08);
}

.sp-list-view .sp-card-actions{
    flex-direction:column;
}


/* ===================================
   NO RESULTS
=================================== */

.shop-no-results{
    grid-column:1 / -1;

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

    padding:80px 24px;

    text-align:center;

    border-radius:28px;

    border:1px dashed rgba(255,255,255,.15);

    background:rgba(255,255,255,.03);
}

.shop-no-results i{
    font-size:40px;
    color:#475569;

    margin-bottom:16px;
}

.shop-no-results h3{
    color:#fff;

    font-size:20px;
    font-weight:900;
}

.shop-no-results p{
    margin-top:8px;

    color:#94a3b8;

    font-size:14px;
}


/* =====================================================================
   QUICK VIEW MODAL
===================================================================== */

.sp-quickview-overlay{
    position:fixed;
    inset:0;
    z-index:1000;

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

    padding:24px;

    background:rgba(5,8,22,.85);

    backdrop-filter:blur(6px);

    opacity:0;
    visibility:hidden;

    transition:opacity .3s ease, visibility .3s ease;
}

.sp-quickview-overlay.open{
    opacity:1;
    visibility:visible;
}

.sp-quickview-box{
    position:relative;

    width:100%;
    max-width:880px;
    max-height:88vh;

    overflow-y:auto;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.12);

    background:#0b0f22;

    box-shadow:0 30px 80px rgba(0,0,0,.55);

    transform:translateY(24px) scale(.98);

    transition:transform .3s ease;
}

.sp-quickview-overlay.open .sp-quickview-box{
    transform:translateY(0) scale(1);
}

.sp-quickview-close{
    position:absolute;
    top:16px;
    right:16px;
    z-index:10;

    width:40px;
    height:40px;

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

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.10);

    color:#fff;

    cursor:pointer;
}

.sp-quickview-close:hover{
    background:rgba(255,255,255,.18);
}

.sp-quickview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.sp-quickview-image{
    background:#fff;
}

.sp-quickview-image img{
    width:100%;
    height:100%;
    min-height:340px;

    object-fit:cover;

    display:block;
}

.sp-quickview-info{
    padding:36px;
}

.sp-quickview-info h3{
    margin-top:10px;

    color:#fff;

    font-size:26px;
    font-weight:900;
    line-height:1.25;
}

.sp-quickview-info p{
    margin-top:16px;

    color:#cbd5e1;

    font-size:14px;
    line-height:1.8;
}

.sp-qv-price-block{
    margin-top:20px;
}

.sp-qv-price-block .sp-price-value .sp-price{
    font-size:30px;
}

.sp-qv-block{
    margin-top:22px;
}

.sp-qv-label{
    display:block;

    margin-bottom:10px;

    color:#fff;

    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.sp-qv-block .sp-swatch{
    width:26px;
    height:26px;
}

.sp-qv-block .sp-size{
    min-width:40px;
    padding:8px 12px;
    font-size:13px;
}

.sp-qv-actions{
    margin-top:28px;
}

.sp-qv-actions .sp-btn-primary{
    width:100%;
    padding:16px 24px;
    font-size:14px;
}

body.sp-no-scroll{
    overflow:hidden;
}


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

/* LAPTOP */
@media(max-width:1280px){

    .shop-product-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* TABLET */
@media(max-width:1024px){

    .shop-sidebar{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        z-index:1001;

        width:320px;
        max-width:85vw;

        flex-direction:column;
        flex-wrap:nowrap;
        align-items:stretch;
        gap:28px;

        border-radius:0 28px 28px 0;

        transform:translateX(-100%);

        overflow-y:auto;

        transition:transform .35s ease;
    }

    .shop-sidebar.open{
        transform:translateX(0);
    }

    /* Inside the drawer everything goes back to a simple vertical
       stack — the horizontal desktop arrangement doesn't fit a
       320px-wide panel. */
    .sidebar-block--search,
    .sidebar-block--sort,
    .sidebar-block--category,
    .sidebar-block--help{
        flex:none;
        width:100%;
        order:initial;
    }

    .sidebar-category-list{
        flex-direction:column;
        flex-wrap:nowrap;
    }

    .sidebar-cat-btn{
        justify-content:space-between;
        text-align:left;
        border-radius:16px;
    }

    .sidebar-cat-btn i{
        display:inline-block;
    }

    .sp-sidebar-header{
        display:flex;
    }

    .sp-sidebar-overlay{
        display:block;

        position:fixed;
        inset:0;
        z-index:1000;

        background:rgba(5,8,22,.75);

        opacity:0;
        visibility:hidden;

        transition:opacity .3s ease, visibility .3s ease;
    }

    .sp-sidebar-overlay.open{
        opacity:1;
        visibility:visible;
    }

    .sp-mobile-toolbar{
        display:flex;
    }

    .sp-quickview-grid{
        grid-template-columns:1fr;
    }

    .sp-quickview-image img{
        min-height:260px;
    }
}

@media(max-width:900px){

    .sp-list-view .sp-card{
        flex-direction:column;
    }

    .sp-list-view .sp-card-image-wrap{
        flex:none;
    }

    .sp-list-view .sp-card-image{
        min-height:200px;
    }

    .sp-list-view .sp-card-footer{
        flex:none;
        border-left:none;
        border-top:1px solid rgba(255,255,255,.08);
    }

    .sp-list-view .sp-card-actions{
        flex-direction:row;
    }
}

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

    .shop-layout-section{
        padding:32px 16px 72px;
    }

    .shop-product-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .sp-card-footer{
        flex-direction:column;
    }

    .sp-quickview-info{
        padding:24px;
    }

    .sp-quickview-info h3{
        font-size:22px;
    }
}

@media(max-width:480px){

    .shop-sidebar{
        width:100%;
        max-width:100%;
        border-radius:0;
    }

    .sp-mobile-toolbar{
        flex-wrap:wrap;
    }

    .sp-mobile-search{
        flex:1 1 100%;
    }

    .sp-filters-toggle{
        flex:1 1 100%;
        justify-content:center;
        padding:12px;
    }

    .sp-card-actions{
        flex-direction:column;
    }

    .sp-badge-stack{
        top:10px;
        left:10px;
    }
}










/* =====================================================================
   APPEND TO: style.css
   -----------------------------------------------------------------
   Shop product card — color swatch selection state.
   Swatches were purely decorative before (cursor:default). They are
   now clickable, so this just adds a pointer + a selected ring using
   the existing swatch size/shape. No layout or redesign changes.
===================================================================== */

.sp-swatch{
    cursor:pointer;
}

.sp-swatch.selected{
    border-color:#fff;
    box-shadow:0 0 0 2px rgba(37,99,235,.9);
}

/* =====================================================================
   APPEND TO: style.css
   -----------------------------------------------------------------
   Shop product card — color swatch hover preview cross-fade.
   The card image already had a transform transition (hover zoom);
   this adds an opacity transition alongside it so swapping between
   color-specific images fades smoothly instead of popping instantly.
   Same image, same size, same position — no layout/design changes.
===================================================================== */

.sp-card-image{
    transition:transform .7s ease, opacity .2s ease;
}

.sp-card-image.sp-fade-out{
    opacity:0;
}









/* ── Product image card (sits above Live Preview) ── */
.gs-product-image-card {
    margin-bottom: 32px;
}

.gs-product-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
}








/* =====================================================================
   ORDER SUCCESS PAGE — CSS ADDITIONS
   Append to the bottom of style.css.

   Reuses existing tokens/components as-is:
   .pd-breadcrumb-section, .auth-section, .auth-card-wrapper,
   .contact-form, .form-header, .dash-order-meta-grid, .dash-meta-card,
   .dash-address-grid, .dash-address-card, .dash-order-items,
   .dash-order-item, .dash-order-summary, .dash-summary-row,
   .dash-badge (+ colour variants), .cart-item-variant (+ chips/dot),
   .process-item / .process-card / .process-icon / .step-number /
   .process-arrow, .upload-box, .pd-why-section, .shop-cta-section,
   .btn-primary, .btn-secondary.

   Only two things didn't already exist:
     1. A 5-column variant of the process/step grid (the existing
        .process-grid is fixed at 4 columns; "What Happens Next" has
        5 steps).
     2. A disabled state for .btn-secondary (used by the placeholder
        "Download Invoice" button).
   Both reuse the exact same colors, radii, and breakpoints as the
   components they extend — no new design language.
===================================================================== */

/* 5-STEP "WHAT HAPPENS NEXT" GRID (extends .process-grid pattern) */

.next-steps-grid{
    position:relative;

    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(5,1fr);

    gap:24px;
}

@media(max-width:1200px){

    .next-steps-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){

    .next-steps-grid{
        grid-template-columns:1fr;
    }
}

/* DISABLED BUTTON STATE (placeholder "Download Invoice" action) */

.btn-secondary[disabled]{
    opacity:.45;
    cursor:not-allowed;
    pointer-events:none;
}

.btn-secondary[disabled]:hover{
    background:rgba(255,255,255,.10);
    color:#ffffff;
    border-color:rgba(255,255,255,.20);
}

/* PRINT STYLESHEET — "Print Order Summary" only prints the order card */

@media print{

    header,
    footer,
    .pd-breadcrumb-section,
    .pd-why-section,
    .shop-cta-section{
        display:none !important;
    }

    body,
    .auth-section{
        background:#ffffff !important;
        padding:0 !important;
    }

    .contact-form{
        border:1px solid #cccccc !important;
        background:#ffffff !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
        color:#111111 !important;
    }

    .contact-form *{
        color:#111111 !important;
    }

    .dash-meta-card,
    .dash-address-card,
    .dash-order-item,
    .dash-order-summary{
        border:1px solid #dddddd !important;
        background:#ffffff !important;
    }
}

/* =====================================================================
   PRODUCT CONFIGURATOR — "CUSTOM APPAREL + PRINTING SERVICE" ADDITIONS
   Append to the bottom of style.css.

   ExpressPress no longer sells blank apparel as separate products
   (Front Hoodie, Back Hoodie, 360 Hoodie, etc.) -- customers now
   configure one product (e.g. "Custom Hoodie") through a 7-step
   flow on product-details.php: printing style, color, size, artwork
   upload, quantity, live price, add to cart.

   Reuses existing tokens/components as-is:
   .pd-option-label, .pd-divider, .pd-color-swatch(.active),
   .pd-size-option(.active), .pd-price-row, .pd-action-row,
   .pd-upload-header, .pd-main-badge gradient, glass-card tokens
   shared with .process-card / .pd-upload-card / .pd-main-image-frame
   (rgba(255,255,255,.06) background, 20px blur,
   rgba(255,255,255,.10) border, the #67e8f9 → #2FA84F → #D4AF37
   brand gradient).

   New in this addition:
     - .pd-step-tag / .pd-step-tag-block  → small inline "Step N"
       markers placed next to existing .pd-option-label text so the
       7-step order reads clearly without altering the section it
       labels.
     - .pd-price-live-tag  → Step 6 "live price" marker next to the
       existing .pd-price-row.
     - .pd-style-grid / .pd-style-card (+ states)  → Step 1 printing
       style option cards (replaces plain radio buttons).
     - .pd-step-corner-tag  → Step 7 marker on the existing
       .pd-action-row (Add To Cart).
   No new colors, radii, blur values, or breakpoints were introduced
   — every value below is pulled from the same tokens already used
   throughout the Product Details page.
===================================================================== */

/* INLINE STEP MARKERS */

.pd-step-tag{
    display:inline-flex;
    align-items:center;

    margin-right:10px;

    padding:3px 10px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.35);
    background:rgba(103,232,249,.08);

    color:#67e8f9;

    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
}

.pd-step-tag-block{
    display:inline-flex;
    margin-bottom:10px;
}

/* STEP 6 — LIVE PRICE MARKER */

.pd-price-row{
    flex-wrap:wrap;
    row-gap:10px;
}

.pd-price-live-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;

    margin-left:auto;

    padding:6px 14px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);

    color:#94a3b8;

    font-size:12px;
    font-weight:700;
}

.pd-price-live-tag i{
    color:#2FA84F;
}

/* STEP 1 — PRINTING STYLE CARDS (replaces plain radio buttons) */

.pd-style-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;

    margin-bottom:32px;
}

.pd-style-card{
    position:relative;

    display:flex;
    align-items:flex-start;
    gap:14px;

    text-align:left;

    padding:18px;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);

    cursor:pointer;

    transition:.3s;
}

.pd-style-card:hover{
    border-color:rgba(103,232,249,.50);
    transform:translateY(-2px);
}

.pd-style-card.active{
    border:2px solid transparent;

    background:
        linear-gradient(rgba(8,11,26,.94),rgba(8,11,26,.94)) padding-box,
        linear-gradient(to right,#67e8f9,#2FA84F,#D4AF37) border-box;

    box-shadow:0 0 24px rgba(0,224,240,.20);
}

.pd-style-card-visual{
    flex-shrink:0;

    width:48px;
    height:48px;

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

    border-radius:16px;

    background:linear-gradient(135deg,#67e8f9,#2FA84F,#D4AF37);

    color:#fff;
    font-size:19px;
}

.pd-style-card-body{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.pd-style-card-name{
    color:#fff;

    font-size:14px;
    font-weight:800;
}

.pd-style-card-desc{
    color:#94a3b8;

    font-size:12px;
    line-height:1.5;
}

.pd-style-card-check{
    position:absolute;
    top:12px;
    right:12px;

    color:#67e8f9;
    font-size:16px;

    opacity:0;
    transform:scale(.6);

    transition:.25s;
}

.pd-style-card.active .pd-style-card-check{
    opacity:1;
    transform:scale(1);
}

/* STEP 7 — CORNER MARKER ON THE ADD TO CART ACTION ROW */

.pd-action-row{
    position:relative;
}

.pd-step-corner-tag{
    position:absolute;
    top:-14px;
    right:0;

    padding:4px 12px;

    border-radius:999px;

    background:linear-gradient(to right,#67e8f9,#2FA84F);

    color:#fff;

    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    white-space:nowrap;
}

/* RESPONSIVE */

@media(max-width:1024px){

    .pd-style-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .pd-price-live-tag{
        margin-left:0;
    }

    .pd-step-corner-tag{
        position:static;
        display:inline-block;
        margin-bottom:10px;
    }
}

@media(max-width:480px){

    .pd-style-grid{
        grid-template-columns:1fr;
    }

    .pd-style-card{
        padding:16px;
    }
}











/* =====================================================================
   PRINTING STYLE ILLUSTRATION IMAGES (DB-DRIVEN CONFIGURATOR ADDITION)
   Append to the bottom of style.css.

   .pd-style-card-visual already exists above (48x48, rounded 16px,
   brand gradient background, centers its child). This addition only
   teaches that same box to display a real uploaded illustration image
   -- via getPrintingStylesForProduct()'s icon_url -- instead of (or on
   top of) the Font Awesome glyph, with the same 150-250ms fade used
   for the main product image whenever a style is hovered/selected.
   No new colors, radii, or breakpoints -- same tokens as above.
===================================================================== */

.pd-style-card-visual img{
    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:16px;
}

/* Hover / active lift already defined on .pd-style-card above applies
   to the whole card, including its illustration image, automatically. */

.pd-style-card:hover .pd-style-card-visual,
.pd-style-card.active .pd-style-card-visual{
    box-shadow:0 0 0 2px rgba(255,255,255,.12);
}

/* Hero image cross-fade when hovering/selecting a printing style --
   identical timing/easing to .pd-main-image.pd-color-fade so both
   Step 1 (style) and Step 2 (color) previews feel like the same
   component. */

.pd-main-image.pd-style-fade{
    opacity:0;
    transition:opacity .2s ease;
}

/* "No styles configured yet" notice — mirrors #pdNoSizesNotice so an
   empty configurator step never looks broken, just quietly absent. */

#pdNoStylesNotice{
    margin-bottom:32px;
}

















/* ===================================
   ABOUT US
   Canonical version — this used to also exist as an inline <style>
   block inside includes/sections/about-us.php (which is what was
   actually rendering, since inline <style> in the page body wins
   over this external stylesheet) AND as a second, different
   "ticket strip" version at the old end of this file that nothing
   pointed to anymore. Consolidated here as the one real definition;
   the inline block was removed from about-us.php.
   Tone: dark (default — see THEME SYSTEM notes near the top of this
   file). Uses the shared --bg-dark / --text-on-dark* tokens so it
   automatically stays in sync with the rest of the dark sections.
=================================== */

.about-section{
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
    padding:144px 24px;
}

.about-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 15% 10%, rgba(0,224,240,.12), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(240,0,176,.12), transparent 40%);
}

.about-glow{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    filter:blur(120px);
    pointer-events:none;
}

.about-glow-cyan{
    top:-120px;
    left:-100px;
    background:rgba(0,224,240,.18);
}

.about-glow-pink{
    bottom:-140px;
    right:-100px;
    background:rgba(240,0,176,.16);
}

.about-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:auto;
}

.about-story{
    text-align:center;

    max-width:800px;
    margin:0 auto 64px;
}

.about-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);
    background:rgba(103,232,249,.08);

    color:var(--accent-cyan);

    font-size:14px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;

    margin-bottom:24px;
}

.about-headline{



    font-size: 150px;
    font-weight:900;
    line-height:1.1;
    color:var(--text-on-dark);

    margin-bottom:24px;
}

.about-headline span{
    display:block;

    background:linear-gradient(to right, var(--accent-cyan), var(--accent-pink), var(--accent-orange));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.about-lede{
    max-width:620px;
    margin:0 auto;

    font-size:18px;
    line-height:1.8;
    color:var(--text-on-dark-soft);
}

.about-values{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:32px;
}

.value-card{
    flex:1 1 320px;
    max-width:420px;

    padding:36px 28px;

    border-radius:32px;

    border:1px solid var(--card-border-dark);
    background:var(--card-bg-dark);

    backdrop-filter:blur(20px);

    text-align:center;

    transition:.4s;
}

.value-card:hover{
    transform:translateY(-10px);

    border-color:rgba(103,232,249,.50);

    box-shadow:0 0 35px rgba(0,224,240,.18);
}

.value-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:68px;
    height:68px;

    border-radius:24px;

    font-size:28px;

    margin-bottom:28px;

    box-shadow:0 0 30px rgba(255,255,255,.12);
}

.value-icon-cyan{
    background:linear-gradient(135deg, var(--accent-cyan), #3b82f6);
    color:#fff;
}

.value-icon-pink{
    background:linear-gradient(135deg, var(--accent-green), #d946ef);
    color:#fff;
}

.value-icon-orange{
    background:linear-gradient(135deg, var(--accent-gold), #facc15);
    color:var(--bg-dark);
}

.value-card h3{
    font-size:24px;
    font-weight:900;
    color:var(--text-on-dark);

    margin-bottom:14px;
}

.value-card p{
    font-size:15px;
    line-height:1.8;
    color:var(--text-on-dark-muted);
}

@media(max-width:768px){

    .about-headline{
        font-size:42px;
    }

    .about-story{
        margin-bottom:48px;
    }

    .value-card{
        flex:1 1 100%;
        max-width:none;
    }
}

/* =====================================================================
   PREMIUM VISUAL REFINEMENT — SUPPLEMENTAL CARD DEPTH
   =====================================================================
   Additive only: layers a subtle shadow and slightly firmer border on
   top of the existing glassmorphism cards so they separate more
   clearly from their section background. Does not touch layout,
   radius, blur, spacing, typography, or gradients — reuses the
   existing dark-tone tokens defined in :root above.
   ===================================================================== */

.value-card,
.why-card,
.review-card,
.process-card,
.pricing-card,
.faq-item,
.faq-info-card,
.faq-cta,
.transfer-feature,
.slide-card,
.product-card,
.contact-info-card,
.contact-form-wrapper,
.stat-card,
.feature-card,
.trust-card,
.upload-box{
    border-color:var(--card-border-dark);
    box-shadow:var(--shadow-dark);
}

.value-card:hover,
.why-card:hover,
.review-card:hover,
.process-card:hover,
.pricing-card:hover,
.transfer-feature:hover,
.slide-card:hover,
.product-card:hover{
    box-shadow:var(--shadow-dark-hover);
}

/* =====================================================================
   CARD CONTRAST ON ALT-TONE SECTIONS
   =====================================================================
   Sections alternated to the lighter --bg-dark-alt tone need their
   cards a touch lighter still, so the card-to-background contrast
   stays consistent no matter which of the two tones a card happens
   to sit on. Scoped to the parent section so cards on --bg-dark
   sections are unaffected. Reuses the --card-bg-alt / --card-border-alt
   tokens defined in :root — no new colors introduced.
   ===================================================================== */

.gallery-showcase .slide-card,
.printing-process .process-card,
.printing-process .stat-card,
.transfers-section .transfer-feature,
.contact-section .contact-info-card,
.contact-section .contact-form-wrapper,
.contact-section .upload-box,
.contact-info-section .contact-info-card,
.shop-grid-section .product-card,
.pd-related-section .product-card,
.service-areas-section .service-card,
.auth-faq-section .faq-item,
.pricing-bulk-section .pricing-bulk-card{
    background:var(--card-bg-alt);
    border-color:var(--card-border-alt);
}









/* =====================================================================
   HERO SLIDER — PREMIUM MARKETING BANNER SLIDER
   =====================================================================
   Additive only. Layers on top of the existing .hero / .hero-badge /
   .hero-content h1 / .gradient-text / .hero-description / .hero-buttons
   / .btn-primary / .btn-secondary / .glow rules already defined above
   (see "HERO SECTION"). Nothing in that block is edited — this section
   only overrides layout (grid -> stacked slides) via the more specific
   .hero-slider selector, and adds the slide/arrow/dot machinery.

   Frontend-only build: 5 slides are hardcoded in hero.php for now.
   This CSS has no dependency on that being dynamic later.
   ===================================================================== */

.hero.hero-slider{
    background:#050816;
}

/* ---------- SLIDE BACKGROUNDS ---------- */

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

.hero-slide{
    position:absolute;
    inset:0;

    opacity:0;
    visibility:hidden;

    transition:opacity 1.1s ease, visibility 1.1s ease;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
    z-index:1;
}

.hero-slide-bg{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transform:scale(1);
    will-change:transform;
}

/* Ken Burns — slow subtle zoom, only runs while a slide is active.
   Restarted per-activation from main.js (animation reset trick) so it
   replays cleanly every time a slide comes back around. */
.hero-slide.active .hero-slide-bg{
    animation:heroKenBurns 7s ease-out forwards;
}

@keyframes heroKenBurns{
    0%   { transform:scale(1); }
    100% { transform:scale(1.12); }
}

/* Same dark gradient treatment as the original single hero, plus a
   bottom fade so the arrows/dots stay legible over any image. */
.hero-slide-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(to right, rgba(5,8,22,.78), rgba(5,8,22,.55) 42%, rgba(5,8,22,.20) 100%),
        linear-gradient(to top, rgba(5,8,22,.45), rgba(5,8,22,0) 30%);
}

/* ---------- CONTENT STACK ---------- */
/* Overrides the old two-column grid — the slider is a single, full-
   width column of text sitting on top of the slide images. */

.hero.hero-slider .hero-slider-container{
    display:block;
    min-height:100vh;
    padding:160px 24px 140px;
}

.hero-slider-content-stack{
    position:relative;
    max-width:680px;
}

.hero-slide-content{
    position:absolute;
    top:0;
    left:0;

    opacity:0;
    transform:translateY(28px);
    pointer-events:none;

    transition:opacity .7s ease, transform .7s ease;
}

.hero-slide-content.active{
    position:relative;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

/* Staggered entrance for each element inside the active slide's text —
   badge, then heading, then description, then buttons. */
.hero-slide-content .hero-badge,
.hero-slide-content h1,
.hero-slide-content .hero-description,
.hero-slide-content .hero-buttons{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s ease, transform .6s ease;
}

.hero-slide-content.active .hero-badge{
    opacity:1; transform:translateY(0);
    transition-delay:.15s;
}
.hero-slide-content.active h1{
    opacity:1; transform:translateY(0);
    transition-delay:.28s;
}
.hero-slide-content.active .hero-description{
    opacity:1; transform:translateY(0);
    transition-delay:.40s;
}
.hero-slide-content.active .hero-buttons{
    opacity:1; transform:translateY(0);
    transition-delay:.52s;
}

/* ---------- ARROWS ---------- */

.hero-slider-arrow{
    position:absolute;
    top:50%;
    z-index:20;

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

    width:56px;
    height:56px;

    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);

    background:rgba(255,255,255,.06);
    backdrop-filter:blur(14px);

    color:#ffffff;
    font-size:18px;

    cursor:pointer;

    transform:translateY(-50%);
    transition:.3s ease;
}

.hero-slider-arrow:hover{
    background:#67e8f9;
    border-color:#67e8f9;
    color:#050816;
    box-shadow:0 0 30px rgba(103,232,249,.45);
    transform:translateY(-50%) scale(1.08);
}

.hero-slider-prev{ left:24px; }
.hero-slider-next{ right:24px; }

/* ---------- PAGINATION DOTS ---------- */

.hero-slider-dots{
    position:absolute;
    left:50%;
    bottom:36px;
    z-index:20;

    display:flex;
    align-items:center;
    gap:10px;

    transform:translateX(-50%);
}

.hero-slider-dot{
    width:10px;
    height:10px;

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

    background:rgba(255,255,255,.20);

    cursor:pointer;
    padding:0;

    transition:.35s ease;
}

.hero-slider-dot:hover{
    background:rgba(255,255,255,.45);
}

.hero-slider-dot.active{
    width:34px;

    border-color:transparent;

    background:linear-gradient(to right, #67e8f9, #2FA84F, #D4AF37);
    box-shadow:0 0 16px rgba(103,232,249,.45);
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:1024px){

    .hero.hero-slider .hero-slider-container{
        padding:150px 24px 130px;
    }

    .hero-slider-arrow{
        width:48px;
        height:48px;
        font-size:16px;
    }

    .hero-slider-prev{ left:16px; }
    .hero-slider-next{ right:16px; }
}

@media(max-width:768px){

    .hero-slider-content-stack{
        max-width:100%;
    }

    .hero.hero-slider .hero-slider-container{
        padding:140px 20px 120px;
    }

    .hero-slide-content h1{
        font-size:44px;
        letter-spacing:-1px;
    }

    .hero-description{
        font-size:16px;
    }

    .hero-buttons{
        gap:12px;
    }

    .btn-primary,
    .btn-secondary{
        padding:14px 26px;
        font-size:14px;
    }

    .hero-slider-arrow{
        width:42px;
        height:42px;
        font-size:14px;
    }

    .hero-slider-dots{
        bottom:24px;
    }
}

@media(max-width:480px){

    .hero-slide-content h1{
        font-size:34px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:flex-start;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    /* Arrows step aside on very small screens — swipe is the primary
       navigation gesture there; dots + swipe remain fully usable. */
    .hero-slider-arrow{
        width:36px;
        height:36px;
        opacity:.75;
    }
}

/* Respect reduced-motion preferences — freeze the zoom and use a
   simple cross-fade only. */
@media (prefers-reduced-motion: reduce){

    .hero-slide.active .hero-slide-bg{
        animation:none;
    }

    .hero-slide-content,
    .hero-slide-content .hero-badge,
    .hero-slide-content h1,
    .hero-slide-content .hero-description,
    .hero-slide-content .hero-buttons{
        transition-duration:.3s;
        transform:none !important;
    }
}









/* =====================================================================
   SERVICES SECTION
   Frontend-only addition — new namespace (.services-*, .service-*),
   nothing here touches any other section's rules. Follows the same
   patterns already used across the site: badge/header block (see
   .process-badge / .process-header), glassmorphism card with image
   zoom + lift + glow on hover (see .product-card), and the shared
   pill-button gradient (see .btn-primary).
   ===================================================================== */

.services-section{
    position:relative;
    overflow:hidden;

    background:var(--bg-dark);

    padding:96px 24px;
}

/* ---------- BACKGROUND GLOWS ---------- */

.services-glow{
    position:absolute;

    width:380px;
    height:380px;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;
}

.services-glow-cyan{
    top:-100px;
    left:-80px;

    background:rgba(0,224,240,.16);
}

.services-glow-pink{
    bottom:-120px;
    right:-80px;

    background:rgba(240,0,176,.14);
}

/* ---------- CONTAINER ---------- */

.services-container{
    position:relative;
    z-index:10;

    max-width:1280px;
    margin:0 auto;
}

/* ---------- HEADER ---------- */

.services-header{
    max-width:780px;
    margin:0 auto 48px;

    text-align:center;
}

.services-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(103,232,249,.30);
    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    color:#c9f8ff;

    font-size:14px;
    font-weight:900;
    letter-spacing:.02em;
    text-transform:uppercase;

    margin-bottom:24px;
}

.services-title{
    color:#ffffff;

    font-size:50px;
    font-weight:900;
    line-height:1.1;

    margin-bottom:16px;
}

.services-title span{
    display:block;

    background:linear-gradient(to right, #67e8f9, #f472b6, #fdba74);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.services-description{
    max-width:680px;
    margin:0 auto;

    color:#94a3b8;

    font-size:17px;
    line-height:1.8;
}

/* ---------- GRID ---------- */

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

/* ---------- CARD ---------- */

.service-card{
    position:relative;

    border-radius:26px;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.06);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    overflow:hidden;

    box-shadow:0 20px 45px -20px rgba(3,8,20,.5);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.service-card:hover{
    transform:translateY(-10px);

    border-color:rgba(103,232,249,.55);

    box-shadow:0 0 45px rgba(0,224,240,.22);
}

/* IMAGE */

.service-image-wrapper{
    position:relative;

    overflow:hidden;

    height:190px;
}

.service-image{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s ease;
}

.service-card:hover .service-image{
    transform:scale(1.10);
}

/* fade so the icon badge always sits on a legible surface,
   regardless of the photo underneath */
.service-image-wrapper::after{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(180deg, rgba(5,8,22,.05), rgba(5,8,22,.55));

    pointer-events:none;
}

/* ICON BADGE */

.service-icon{
    position:absolute;
    z-index:2;

    top:16px;
    left:16px;

    width:44px;
    height:44px;

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

    border-radius:15px;

    font-size:17px;
    color:#fff;

    box-shadow:0 0 24px rgba(255,255,255,.14);
}

.service-icon-cyan{
    background:linear-gradient(135deg, #67e8f9, #3b82f6);
}

.service-icon-pink{
    background:linear-gradient(135deg, #f472b6, #d946ef);
}

.service-icon-gold{
    background:linear-gradient(135deg, #D4AF37, #facc15);
    color:#050816;
}

/* CONTENT */

.service-content{
    padding:22px 22px 24px;
}

.service-content h3{
    color:#ffffff;

    font-size:19px;
    font-weight:900;
    line-height:1.3;

    margin-bottom:8px;
}

.service-content p{
    color:#94a3b8;

    font-size:14px;
    line-height:1.7;

    margin-bottom:20px;
}

/* LEARN MORE BUTTON */

.service-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:12px 22px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.20);
    background:rgba(255,255,255,.06);

    color:#ffffff;
    text-decoration:none;

    font-size:13px;
    font-weight:900;

    transition:.3s ease;
}

.service-btn i{
    font-size:12px;
    transition:transform .3s ease;
}

.service-card:hover .service-btn{
    background:linear-gradient(to right, #67e8f9, #2FA84F, #D4AF37);
    border-color:transparent;
    color:#050816;

    box-shadow:0 0 24px rgba(0,224,240,.30);
}

.service-card:hover .service-btn i{
    transform:translateX(4px);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:1024px){

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .services-title{
        font-size:40px;
    }
}

@media (max-width:640px){

    .services-section{
        padding:64px 20px;
    }

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

    .services-title{
        font-size:32px;
    }

    .service-image-wrapper{
        height:200px;
    }
}
/* =====================================================================
   PRODUCT DESIGNER ENGINE — Print Position tabs + Artwork placeholder
   assets/css/style.css addition (Phase 1 — architecture only)
   =====================================================================
   product-designer.php reuses every existing Product Details token and
   component as-is: .pd-showcase-container, .pd-gallery, .pd-main-image-
   frame, .pd-info, .pd-price-row, .pd-option-label, .pd-step-tag,
   .pd-divider, .pd-style-grid/.pd-style-card, .pd-colors/.pd-color-
   swatch, .pd-sizes/.pd-size-option, .pd-action-row, .pd-add-cart-btn —
   nothing below redefines any of those.

   New in this addition (Print Position tabs are the one new UI concept
   this phase introduces):
     - .pd-designer-position-tabs / .pd-designer-position-tab (+.active)
       → Step 4 tab row (Front / Back / Left Chest / Right Sleeve).
         Built with the same glass-card tokens already used by
         .pd-style-card (rgba(255,255,255,.06) background, 20px blur,
         rgba(255,255,255,.10) border) and the same
         #67e8f9 → #2FA84F → #D4AF37 brand gradient for the active state.
     - .pd-designer-artwork-placeholder / .pd-designer-artwork-icon
       → Step 5 static "Artwork upload coming in Phase 2" notice.
         Reuses the same card surface as .pd-upload-card, without any
         dropzone/file-input behavior (no upload wiring is attached).
   No new colors, radii, blur values, or breakpoints were introduced —
   every value below is pulled from the same tokens already used
   throughout the Product Details / Product Designer pages.
===================================================================== */

/* STEP 4 — PRINT POSITION TABS */

.pd-designer-position-tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;

    margin-bottom:16px;
    padding-bottom:6px;

    overflow-x:auto;
    scrollbar-width:thin;
}

.pd-designer-position-tabs::-webkit-scrollbar{
    height:5px;
}

.pd-designer-position-tabs::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.15);
    border-radius:99px;
}


.pd-designer-position-tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;

    margin-bottom:16px;
    padding-bottom:6px;

    overflow-x:auto;
    scrollbar-width:none;        /* Firefox — hide native bar */
    -ms-overflow-style:none;     /* old Edge */

    -webkit-mask-image:linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
}

.pd-designer-position-tabs::-webkit-scrollbar{
    display:none;                /* Chrome/Safari/Edge — hide native bar */
}



.pd-designer-position-tab{
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    color:var(--text-on-dark-soft,#cbd5e1);

    font-size:13px;
    font-weight:700;

    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}

.pd-designer-position-tab i{
    font-size:12px;
    color:var(--text-on-dark-muted,#94a3b8);
    transition:color .2s ease;
}

.pd-designer-position-tab:hover{
    border-color:rgba(103,232,249,.35);
    transform:translateY(-1px);
}

.pd-designer-position-tab.active{
    border-color:transparent;
    background:linear-gradient(135deg,#67e8f9,#2FA84F,#D4AF37);
    color:#050816;
}

.pd-designer-position-tab.active i{
    color:#050816;
}

/* STEP 5 — ARTWORK UPLOAD PLACEHOLDER (Phase 2 notice, not a dropzone) */

.pd-designer-artwork-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;

    padding:32px 20px;

    border-radius:16px;

    border:1px dashed rgba(255,255,255,.16);
    background:rgba(255,255,255,.04);

    margin-bottom:24px;
}

.pd-designer-artwork-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:48px;
    height:48px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    color:var(--text-on-dark-muted,#94a3b8);
    font-size:18px;
}

.pd-designer-artwork-placeholder p{
    margin:0;
    color:var(--text-on-dark-muted,#94a3b8);
    font-size:13px;
    font-weight:600;
}
/* =====================================================================
   PRODUCT DESIGNER ENGINE — Artwork Upload + Live Preview (Phase 2)
   assets/css/style.css addition
   =====================================================================
   product-designer.php only. Reuses every existing token as-is:
   .pd-dropzone / .pd-dropzone-icon / .pd-browse-btn / .pd-formats-row /
   .pd-format-chip (Product Details upload tokens) and .pd-form-message
   (Add To Cart validation tokens) -- nothing below redefines any of
   those. Same brand gradient (#67e8f9 → #2FA84F → #D4AF37) and glass
   surface values (rgba(255,255,255,.06/.10), 20px blur) already used
   throughout Product Details / Product Designer.

   New in this addition:
     - .pd-print-area / .pd-print-area-hint
       → the boundary drawn over #pdMainImage that artwork is dragged
         and resized inside of. Purely a visual + interaction surface;
         no coordinates are persisted anywhere.
     - .pd-artwork-layer / .pd-artwork-handle
       → the uploaded artwork <img> and its 4 corner resize handles,
         injected/positioned by main.js.
     - .pd-designer-artwork-controls / .pd-designer-artwork-filename /
       .pd-designer-artwork-remove
       → the "current file / Remove Artwork" bar shown once artwork
         exists for the active print position.

   RENDERING ENGINE REFACTOR — INDEPENDENT LAYERS
   ----------------------------------------------------------------------
   The canvas is composed of four independent, stacked layers. Each is
   owned by its own DOM subtree and its own state in main.js, and none
   of them know about each other's internals:

       1. Product Mockup    .pd-main-image-wrapper / .pd-main-image
                            (garment photo — swapped instantly on
                            position/color change, never touched by
                            the layers above it. Now wrapped in
                            .pd-garment-layer, isolating garment
                            rendering from artwork rendering so a
                            future recolor step only ever has to
                            touch this one layer)
       2. Artwork           .pd-artwork-layer               (z-index:10)
       3. Text              .pd-text-layer                  (z-index:20)
       4. Selection Handles .pd-artwork-handle /
                            .pd-artwork-rotate-handle /
                            .pd-artwork-rotate-line          (z-index:30)

   Explicit z-index (rather than relying on DOM order) is what keeps
   these truly independent — any layer can be added, removed, or
   re-rendered without disturbing the stacking of the others.

   SELECTION STATE: an artwork/text object only shows its dashed
   outline + handles while selected (.is-selected). Deselected, it
   renders as a plain, finished mockup with no editing chrome — see
   the ".is-selected" rules below and the selection logic in main.js.
===================================================================== */

.pd-garment-layer{
    /* Deliberately position:relative (NOT absolute) so it simply
       wraps #pdMainImage in normal flow -- .pd-main-image-wrapper's
       height still comes from the image exactly as before, and
       .pd-print-area (position:absolute, relative to the wrapper)
       overlays it exactly as before. This wrapper's only job is to
       give the garment its own isolated layer in the DOM: nothing
       artwork/text/selection-related is ever appended inside it, so
       a future "recolor this garment" feature (e.g. a CSS filter or
       blend-mode overlay) only ever needs to touch this one wrapper
       -- never the artwork/text rendering code. Recoloring itself is
       NOT implemented here. */
    position:relative;
    z-index:0;
}

/* GARMENT COLOR ENGINE (Canvas) -- Layer 1, painted just above
   #pdMainImage inside the same .pd-garment-layer wrapper. See the
   "GARMENT COLOR ENGINE" block in main.js for how/when it draws.

   Absolutely positioned over the photo it's standing in for, so it
   never affects .pd-garment-layer's own size (still driven entirely
   by #pdMainImage, exactly as before). Hidden by default -- and
   whenever White is selected -- so the mockup photo shows through
   untouched. pointer-events:none keeps it purely visual, identical
   to #pdMainImage itself, so it never interferes with artwork
   drag/drop, upload, or any interaction above it. */
.pd-garment-canvas{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    z-index:1;

    display:none;
    pointer-events:none;
}

.pd-garment-canvas.is-active{
    display:block;
}

/* PRINT AREA (drawn over the mockup, inside .pd-main-image-wrapper) */

.pd-print-area{
    position:absolute;
    top:14%;
    left:22%;
    right:22%;
    bottom:14%;

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

    border-radius:12px;
    border:1.5px dashed rgba(255,255,255,.35);

    /* Phase 2.5: left/top/width/height are now set per print position
       by main.js (see PRINT_POSITIONS) -- transitioning them here is
       what makes switching Front/Back/Left Chest/etc. visibly slide
       and resize the printable area instead of snapping instantly. */
    transition:border-color .2s ease, box-shadow .2s ease, left .25s ease, top .25s ease, width .25s ease, height .25s ease;

    pointer-events:none;
}

.pd-print-area.has-artwork{
    border-style:solid;
    border-color:rgba(103,232,249,.45);
}

.pd-print-area.is-interacting{
    border-color:#67e8f9;
    box-shadow:0 0 0 4px rgba(103,232,249,.12);
}

/* PRINT POSITION TAG — always visible, even once artwork is placed
   (unlike .pd-print-area-hint below, which hides on .has-artwork).
   Tells the customer which print area they're working in right now
   (Front / Back / Pocket / Left Sleeve / etc.) since the mockup photo
   itself is intentionally blank and carries no printed label. Text is
   kept in sync with the active print position by
   applyPrintAreaGeometry() in main.js. Inherits the parent's own
   left/top/width/height transition so it slides right along with the
   print area box when the position changes. */
.pd-print-area-tag{
    position:absolute;
    top:-30px;
    left:0;

    padding:5px 12px;

    border-radius:999px;

    background:rgba(15,23,42,.85);
    backdrop-filter:blur(6px);

    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    white-space:nowrap;

    pointer-events:none;

    transition:left .25s ease, top .25s ease;
}

/* CURRENT PRINT AREA BAR -- sits above the whole canvas (not drawn on
   the mockup itself, unlike .pd-print-area-tag above) so the customer
   always has a persistent, unambiguous answer to "where will my
   design print", even before the canvas has scrolled into view.
   Matches the .pd-studio-minibar glass-card language already used
   directly above it. */
.pd-current-area-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:12px 18px;
    margin-bottom:14px;

    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.pd-current-area-label{
    color:#94a3b8;

    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.pd-current-area-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:6px 14px;

    border-radius:999px;
    border:1px solid rgba(47,168,79,.30);
    background:rgba(47,168,79,.12);

    color:#f0fdf4;
    font-size:13px;
    font-weight:800;
}

.pd-current-area-dot{
    width:8px;
    height:8px;
    flex-shrink:0;

    border-radius:50%;
    background:#2FA84F;
    box-shadow:0 0 0 rgba(47,168,79,.45);

    animation:pdAreaDotPulse 2s ease-in-out infinite;
}

@keyframes pdAreaDotPulse{
    0%{
        box-shadow:0 0 0 0 rgba(47,168,79,.45);
    }
    70%{
        box-shadow:0 0 0 6px rgba(47,168,79,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(47,168,79,0);
    }
}

/* Whenever main.js swaps the text on a position switch, replaying this
   quick fade/slide gives the change a deliberate, animated feel instead
   of an instant text snap -- main.js re-triggers it by toggling
   .is-updating (see applyPrintAreaGeometry). */
#pdCurrentAreaName{
    display:inline-block;
}

.pd-current-area-badge.is-updating #pdCurrentAreaName{
    animation:pdFadeIn .25s ease;
}

@media(max-width:480px){
    .pd-current-area-bar{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }
}

/* Printable-area placeholder -- shown only while no artwork exists
   for the active print position (see .has-artwork below). Deliberately
   styled as a floating UI card (soft white surface, blurred edge,
   rounded corners) rather than anything resembling ink on the
   garment -- it should read unmistakably as "guidance", never as a
   printed mark. */
.pd-print-area-hint{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    max-width:82%;
    padding:20px 22px;

    border-radius:16px;
    border:1px solid rgba(15,23,42,.06);

    background:rgba(255,255,255,.92);
    box-shadow:0 10px 30px rgba(15,23,42,.10);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    color:#0f172a;
    text-align:center;

    /* .pd-print-area (the parent) is pointer-events:none so drag/
       resize handles work through it -- re-enable events just for
       the hint so it can be clicked to open the file picker. */
    pointer-events:auto;
    cursor:pointer;

    opacity:1;
    transform:scale(1);
    transition:background .2s ease, box-shadow .2s ease, transform .25s ease, opacity .25s ease;
}

.pd-print-area-hint:hover{
    background:#fff;
    box-shadow:0 14px 36px rgba(15,23,42,.14);
    transform:translateY(-1px) scale(1.01);
}

.pd-print-area-hint-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;
    margin-bottom:2px;

    border-radius:50%;
    background:rgba(47,168,79,.12);
}

.pd-print-area-hint-icon i{
    font-size:16px;
    color:#2FA84F;
}

.pd-print-area-hint-title{
    font-size:13.5px;
    font-weight:800;
    letter-spacing:-.01em;
    color:#0f172a;
}

.pd-print-area-hint-sub{
    font-size:11.5px;
    font-weight:600;
    color:#64748b;
}

.pd-print-area-hint small{
    color:#94a3b8;
    font-size:10px;
    font-weight:600;
    text-transform:none;
    letter-spacing:normal;
}

/* Fade the placeholder out (rather than snapping via display:none) so
   both an upload and a print-position switch feel smooth. Visibility
   is delayed on the way out and immediate on the way in, so it never
   intercepts clicks while invisible but still animates cleanly. */
.pd-print-area.has-artwork .pd-print-area-hint{
    opacity:0;
    transform:scale(.96);
    visibility:hidden;
    pointer-events:none;

    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.pd-print-area:not(.has-artwork) .pd-print-area-hint{
    visibility:visible;
    transition:background .2s ease, box-shadow .2s ease, transform .25s ease, opacity .25s ease, visibility 0s linear 0s;
}

/* ARTWORK LAYER (positioned/sized via inline styles by main.js)
   Layer 2 of 4 -- see the "RENDERING ENGINE REFACTOR" note above.
   No outline/chrome by default: a deselected artwork layer should
   read as a finished mockup, not an editing surface. The dashed
   outline only appears once .is-selected is added (click to select,
   click outside to deselect -- see main.js). */

.pd-artwork-layer{
    position:absolute;
    z-index:10;

    display:block;

    object-fit:contain;

    cursor:grab;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;

    pointer-events:auto;

    outline:1.5px dashed transparent;
    outline-offset:4px;

    filter:drop-shadow(0 6px 16px rgba(0,0,0,.25));

    transition:outline-color .15s ease;
}

.pd-artwork-layer:active{
    cursor:grabbing;
}

.pd-artwork-layer.is-selected{
    outline-color:rgba(103,232,249,.65);
}

/* SELECTION HANDLES -- Layer 4 of 4, always the topmost layer.
   Only ever present in the DOM while the artwork is selected (see
   render() in main.js); a deselected artwork therefore shows zero
   editing chrome. */

.pd-artwork-handle{
    position:absolute;
    z-index:30;

    width:16px;
    height:16px;

    border-radius:50%;

    background:linear-gradient(135deg,#67e8f9,#2FA84F,#D4AF37);
    border:2px solid #050816;
    box-shadow:0 2px 6px rgba(0,0,0,.35);

    pointer-events:auto;
    touch-action:none;

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

.pd-artwork-handle--nw{ cursor:nwse-resize; }
.pd-artwork-handle--ne{ cursor:nesw-resize; }
.pd-artwork-handle--sw{ cursor:nesw-resize; }
.pd-artwork-handle--se{ cursor:nwse-resize; }

/* ROTATE HANDLE + connecting line -- same selection-only visibility
   as the corner resize handles above. Sits above the artwork's top
   edge and tracks its rotation, matching the corner handles. */

.pd-artwork-rotate-line{
    position:absolute;
    z-index:30;

    height:2px;

    background:rgba(255,255,255,.55);

    pointer-events:none;
    /* left/top/width/transform-origin/transform are all set inline by
       main.js (updateGeometry) as a point-to-point line between the
       box's top-center and the rotate handle -- correct at any
       rotation angle. */
}

.pd-artwork-rotate-handle{
    position:absolute;
    z-index:30;

    width:18px;
    height:18px;

    border-radius:50%;

    background:linear-gradient(135deg,#67e8f9,#2FA84F,#D4AF37);
    border:2px solid #050816;
    box-shadow:0 2px 6px rgba(0,0,0,.35);

    display:flex;
    align-items:center;
    justify-content:center;
    color:#050816;
    font-size:9px;

    pointer-events:auto;
    touch-action:none;
    cursor:grab;

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

.pd-artwork-rotate-handle:active{
    cursor:grabbing;
}

/* CURRENT FILE / REMOVE BAR */

.pd-designer-artwork-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:14px 18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);

    margin-top:16px;
    margin-bottom:24px;
}

.pd-designer-artwork-filename{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#cbd5e1;
    font-size:13px;
    font-weight:700;
}

.pd-designer-artwork-remove{
    flex-shrink:0;

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 16px;

    border:1px solid rgba(248,113,113,.35);
    background:rgba(248,113,113,.10);
    border-radius:999px;

    color:#fca5a5;

    font-size:12px;
    font-weight:800;

    cursor:pointer;
    transition:.2s;
}

.pd-designer-artwork-remove:hover{
    background:rgba(248,113,113,.20);
    transform:translateY(-1px);
}

@media(max-width:480px){

    .pd-print-area{
        top:10%;
        left:16%;
        right:16%;
        bottom:10%;
    }

    .pd-artwork-handle{
        width:20px;
        height:20px;
    }

    .pd-designer-artwork-controls{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
    }
}

/* =====================================================================
   PRODUCT DESIGNER — "DESIGN STUDIO" REDESIGN
   =====================================================================
   Everything below is scoped under .pd-studio-page (the <main> class
   on product-designer.php only) so none of it can ever leak onto
   product-details.php or any other page that reuses the base .pd-*
   tokens (.pd-colors, .pd-sizes, .pd-price, .pd-add-cart-btn, etc.).
   Those base tokens are left completely untouched above — this block
   only repositions/recomposes them into the new three-area layout
   (floating left toolbar / product canvas / sticky bottom bar) and
   restyles the pieces that are unique to the Designer (print area,
   artwork layer, floating artwork toolbar).
   ===================================================================== */

/* ---------- STUDIO TOP BAR (compact page header) ---------- */

.pd-studio-page .pd-studio-topbar{
    position:relative;
    background:var(--bg-dark);
    padding:148px 24px 28px;
}

.pd-studio-page .pd-studio-topbar-container{
    max-width:1400px;
    margin:0 auto;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
}

.pd-studio-page .pd-studio-title{
    margin-top:14px;
    color:#fff;
    font-size:28px;
    font-weight:900;
    line-height:1.2;
}

.pd-studio-page .pd-studio-topbar-tag{
    margin:0 0 4px;
}

@media(max-width:768px){
    .pd-studio-page .pd-studio-topbar{
        padding:126px 20px 22px;
    }
    .pd-studio-page .pd-studio-title{
        font-size:22px;
    }
    .pd-studio-page .pd-studio-topbar-tag{
        display:none;
    }
}

/* ---------- STUDIO SHELL (toolbar + canvas grid) ---------- */

.pd-studio-page .pd-studio{
    position:relative;
    background:var(--bg-dark-alt);
    padding:8px 24px 64px;
}

.pd-studio-page .pd-studio-shell{
    max-width:1400px;
    margin:0 auto;

    display:grid;
    grid-template-columns:96px minmax(0,1.4fr) minmax(320px,1fr);
    grid-template-areas:"toolbar main order";
    gap:32px;
    align-items:start;
}

/* ---------- LEFT — FLOATING GLASSMORPHISM TOOLBAR ---------- */

.pd-studio-page .pd-studio-toolbar{
    grid-area:toolbar;

    position:sticky;
    top:120px;
    z-index:50;              /* NEW — forces the whole toolbar subtree above .pd-studio-main */


    display:flex;
    flex-direction:column;
    gap:14px;

    padding:16px 10px;

    border-radius:26px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    box-shadow:var(--shadow-dark);
}

.pd-studio-page .pd-tool-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    padding:14px 6px;

    border:1px solid transparent;
    border-radius:18px;
    background:transparent;

    color:var(--text-on-dark-soft,#cbd5e1);
    cursor:pointer;

    transition:border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}

.pd-studio-page .pd-tool-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    font-size:15px;
    color:#67e8f9;

    transition:background .2s ease, color .2s ease;
}

.pd-studio-page .pd-tool-label{
    font-size:11px;
    font-weight:800;
    text-align:center;
    line-height:1.25;
}

.pd-studio-page .pd-tool-btn:hover{
    border-color:rgba(103,232,249,.35);
    background:rgba(255,255,255,.05);
    transform:translateY(-1px);
    color:#fff;
}

.pd-studio-page .pd-tool-btn:hover .pd-tool-icon,
.pd-studio-page .pd-tool-btn.is-active .pd-tool-icon{
    background:linear-gradient(135deg,#67e8f9,#2FA84F,#D4AF37);
    color:#050816;
}

.pd-studio-page .pd-tool-btn.is-active{
    border-color:transparent;
    background:rgba(103,232,249,.10);
    color:#fff;
}

/* Replace/Remove Artwork group — appended below Upload/Add Text,
   only visible once artwork exists for the active print position. */

.pd-studio-page .pd-tool-group{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
}

.pd-studio-page .pd-tool-divider{
    width:60%;
    height:1px;

    background:rgba(255,255,255,.12);
}

.pd-studio-page .pd-tool-btn--danger .pd-tool-icon{
    color:#fca5a5;
}

.pd-studio-page .pd-tool-btn--danger:hover{
    border-color:rgba(248,113,113,.4);
    color:#fecaca;
}

.pd-studio-page .pd-tool-btn--danger:hover .pd-tool-icon{
    background:linear-gradient(135deg,#f87171,#ef4444);
    color:#fff;
}

.pd-studio-page .pd-tool-filename{
    max-width:76px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#64748b;
    font-size:9.5px;
    font-weight:700;
    text-align:center;
}

/* ---------- CENTER — MINI TOOLBAR + CANVAS ---------- */

.pd-studio-page .pd-studio-main{
    grid-area:main;
    min-width:0;
}

.pd-studio-page .pd-studio-minibar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px;

    padding:16px 22px;
    margin-bottom:22px;

    border-radius:20px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.pd-studio-page .pd-studio-minibar-group{
    display:flex;
    align-items:center;
    gap:12px;
}

.pd-studio-page .pd-studio-minibar-label{
    flex-shrink:0;

    color:#94a3b8;

    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.pd-studio-page .pd-studio-minibar-group + .pd-studio-minibar-group{
    padding-left:18px;
    border-left:1px solid rgba(255,255,255,.10);
}

/* Compact the shared pill/swatch tokens down to fit a single-row bar */
.pd-studio-page .pd-studio-minibar .pd-colors,
.pd-studio-page .pd-studio-minibar .pd-sizes,
.pd-studio-page .pd-studio-minibar .pd-designer-position-tabs{
    margin:0;
    padding:0;
}

.pd-studio-page .pd-studio-minibar .pd-color-swatch{
    width:26px;
    height:26px;
}


/* Designer color row — reuse .pd-colors, but give it a real constrained
   flex width so the existing horizontal overflow can actually scroll. */
.pd-studio-page .pd-studio-minibar-group.pd-color-scroll-group{
    flex:1 1 420px;
    min-width:0;
    max-width:560px;
}

.pd-studio-page .pd-studio-minibar-group.pd-color-scroll-group .pd-studio-minibar-label{
    flex:0 0 auto;
}

.pd-studio-page .pd-studio-minibar-group.pd-color-scroll-group .pd-colors{
    flex:1 1 auto;
    min-width:0;
    max-width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    padding:0 0 7px;

    scrollbar-width:thin;
    scrollbar-color:rgba(103,232,249,.45) rgba(255,255,255,.05);
    overscroll-behavior-inline:contain;
}

.pd-studio-page .pd-studio-minibar-group.pd-color-scroll-group .pd-colors::-webkit-scrollbar{
    height:5px;
}

.pd-studio-page .pd-studio-minibar-group.pd-color-scroll-group .pd-colors::-webkit-scrollbar-track{
    background:rgba(255,255,255,.05);
    border-radius:99px;
}

.pd-studio-page .pd-studio-minibar-group.pd-color-scroll-group .pd-colors::-webkit-scrollbar-thumb{
    background:rgba(103,232,249,.45);
    border-radius:99px;
}

.pd-studio-page .pd-studio-minibar-group.pd-color-scroll-group .pd-colors::-webkit-scrollbar-thumb:hover{
    background:rgba(103,232,249,.65);
}

@media(max-width:900px){
    .pd-studio-page .pd-studio-minibar-group.pd-color-scroll-group{
        flex:1 1 100%;
        width:100%;
        max-width:100%;
    }
}

@media(max-width:640px){
    .pd-studio-page .pd-studio-minibar-group.pd-color-scroll-group{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .pd-studio-page .pd-studio-minibar-group.pd-color-scroll-group .pd-colors{
        width:100%;
    }
}

.pd-studio-page .pd-studio-minibar .pd-size-option{
    padding:7px 12px;
    min-width:40px;
    font-size:13px;
}

.pd-studio-page .pd-studio-minibar .pd-designer-position-tab{
    padding:7px 12px;
    font-size:12px;
}

/* ---------- PRODUCT CANVAS (the hero of the page) ---------- */

.pd-studio-page .pd-studio-canvas{
    position:relative;

    max-width:520px;
    margin:0 auto;
}

.pd-studio-page .pd-studio-canvas .pd-main-image-frame{
    padding:14px;
}

.pd-studio-page .pd-studio-canvas .pd-main-image-wrapper{
    background:#f4f5f8;
}

.pd-studio-page .pd-studio-canvas .pd-main-image{
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    object-fit:contain;

    -webkit-user-drag:none;
    user-drag:none;
    -khtml-user-drag:none;
    -moz-user-drag:none;
    -o-user-drag:none;
}

/* Printable area — kept small and centered on the chest so it never
   reads as covering the whole garment; this closely approximates a
   real front-chest print position rather than the full torso. */
.pd-studio-page .pd-studio-canvas .pd-print-area{
    top:24%;
    left:32%;
    right:32%;
    bottom:38%;
}

@media(max-width:480px){
    .pd-studio-page .pd-studio-canvas .pd-print-area{
        top:20%;
        left:28%;
        right:28%;
        bottom:34%;
    }
}

.pd-studio-page .pd-studio-canvas .pd-print-area-hint{
    max-width:90%;
}

.pd-studio-page .pd-print-area-hint small{
    color:#64748b;
    font-size:10px;
    font-weight:600;
    text-transform:none;
    letter-spacing:normal;
}

/* Drag-over feedback when a file is dragged onto the canvas */
.pd-studio-page .pd-studio-canvas.is-dragover .pd-main-image-frame{
    border-color:#67e8f9;
    box-shadow:0 0 0 3px rgba(103,232,249,.25), 0 25px 60px rgba(0,0,0,.30);
}

/* ---------- TEXT LAYER (Add Text tool) ----------
   Layer 3 of 4 -- see the "RENDERING ENGINE REFACTOR" note above.
   Deselected, this renders as plain finished text with no border/
   chrome; selecting it (click the text or its handle) reveals the
   dashed outline + drag handle + remove button, matching the
   artwork layer's selection behavior. */

.pd-studio-page .pd-text-layer{
    position:absolute;
    z-index:20;

    display:inline-flex;
    align-items:center;
    gap:2px;

    min-width:40px;
    padding:4px 6px;

    border:1.5px dashed transparent;
    border-radius:6px;

    background:transparent;

    touch-action:none;
    pointer-events:auto;

    transition:border-color .15s ease, background-color .15s ease;
}

.pd-studio-page .pd-text-layer.is-selected{
    border-color:rgba(103,232,249,.65);
    background:rgba(255,255,255,.35);
}

.pd-studio-page .pd-text-layer.is-dragging{
    border-color:#67e8f9;
    box-shadow:0 0 0 4px rgba(103,232,249,.12);
}

.pd-studio-page .pd-text-layer-handle{
    display:none;
    align-items:center;
    justify-content:center;
    flex-shrink:0;

    width:20px;
    height:20px;

    border-radius:50%;

    background:rgba(103,232,249,.85);
    color:#050816;

    font-size:9px;

    cursor:grab;
    touch-action:none;
}

.pd-studio-page .pd-text-layer.is-selected .pd-text-layer-handle{
    display:flex;
}

.pd-studio-page .pd-text-layer-handle:active{
    cursor:grabbing;
}

.pd-studio-page .pd-text-layer-content{
    min-width:20px;

    color:#0f172a;
    font-family:'Montserrat', sans-serif;
    font-size:22px;
    font-weight:800;
    line-height:1.2;
    white-space:pre;

    cursor:text;
    -webkit-user-select:text;
    user-select:text;

    outline:none;
}

.pd-studio-page .pd-text-layer-remove{
    position:absolute;
    top:-10px;
    right:-10px;

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

    width:20px;
    height:20px;

    border-radius:50%;
    border:2px solid #050816;

    background:#f87171;
    color:#fff;

    font-size:10px;
    line-height:1;

    cursor:pointer;
}

.pd-studio-page .pd-text-layer.is-selected .pd-text-layer-remove{
    display:flex;
}

/* ---------- THUMBNAIL STRIP (secondary, below the canvas) ---------- */

.pd-studio-page .pd-studio-thumbs{
    max-width:420px;
    margin:16px auto 0;
    grid-template-columns:repeat(5,1fr);
}

/* ---------- RIGHT — PREMIUM ORDER PANEL ---------- */

.pd-studio-page .pd-studio-order{
    grid-area:order;

    position:sticky;
    top:120px;

    display:flex;
    flex-direction:column;

    padding:28px 26px;

    border-radius:28px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    box-shadow:var(--shadow-dark);
}

.pd-studio-page .pd-order-title{
    color:#fff;

    font-size:24px;
    font-weight:900;
    line-height:1.25;
}

.pd-studio-page .pd-order-header .pd-rating-row{
    margin-top:10px;
}

.pd-studio-page .pd-order-summary{
    margin-top:14px;

    color:#94a3b8;

    font-size:13.5px;
    line-height:1.7;
}

.pd-studio-page .pd-order-divider{
    margin:22px 0;
    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.15),
        transparent
    );
}

.pd-studio-page .pd-order-selections{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.pd-studio-page .pd-order-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.pd-studio-page .pd-order-row-label{
    display:flex;
    align-items:center;
    gap:8px;

    color:#94a3b8;

    font-size:12.5px;
    font-weight:700;
}

.pd-studio-page .pd-order-row-label i{
    width:14px;

    color:#67e8f9;
    font-size:12px;
}

.pd-studio-page .pd-order-row-value{
    color:#fff;

    font-size:13.5px;
    font-weight:800;

    text-align:right;
}

.pd-studio-page .pd-order-qty-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    margin-bottom:20px;
}

.pd-studio-page .pd-order-qty-row .pd-option-label{
    margin-bottom:0;
}

.pd-studio-page .pd-order-price-row{
    margin-top:0;
    margin-bottom:18px;
}

.pd-studio-page .pd-order-price-row .pd-price{
    font-size:32px;
}

.pd-studio-page .pd-form-message{
    margin-bottom:16px;
}

.pd-studio-page .pd-order-cta{
    width:100%;
}

.pd-studio-page .pd-order-trust-row{
    flex-direction:column;
    gap:12px;

    margin-top:22px;
    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.10);
}

/* ---------- RESPONSIVE ---------- */

/* Tablet — toolbar collapses slightly (icon-first, tighter labels);
   the order panel drops out of the right column and stacks full-width
   below the preview, no longer sticky since it's now in normal flow. */
@media(max-width:1024px){

    .pd-studio-page .pd-studio-shell{
        grid-template-columns:76px 1fr;
        grid-template-areas:
            "toolbar main"
            "toolbar order";
        gap:18px;
    }

    .pd-studio-page .pd-studio-toolbar{
        padding:12px 6px;
    }

    .pd-studio-page .pd-tool-label{
        font-size:10px;
    }

    .pd-studio-page .pd-studio-minibar{
        gap:14px;
        padding:14px 16px;
    }

    .pd-studio-page .pd-studio-order{
        position:static;
        max-width:560px;
        margin:0 auto;
    }
}

/* Mobile — toolbar becomes horizontal on top, preview scales, order
   panel moves below the designer as one full-width flow. */
@media(max-width:768px){

    .pd-studio-page .pd-studio-shell{
        grid-template-columns:1fr;
        grid-template-areas:
            "toolbar"
            "main"
            "order";
    }

    .pd-studio-page .pd-studio-toolbar{
        position:static;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
        gap:10px;

        margin-bottom:18px;
    }

    .pd-studio-page .pd-tool-btn{
        flex-direction:row;
        padding:10px 16px;
    }

    .pd-studio-page .pd-tool-label{
        text-align:left;
    }

    .pd-studio-page .pd-tool-group{
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
    }

    .pd-studio-page .pd-tool-divider{
        display:none;
    }

    .pd-studio-page .pd-tool-filename{
        display:none;
    }

    .pd-studio-page .pd-studio-minibar{
        flex-direction:column;
        align-items:stretch;
        gap:14px;
    }

    .pd-studio-page .pd-studio-minibar-group + .pd-studio-minibar-group{
        padding-left:0;
        padding-top:14px;
        border-left:none;
        border-top:1px solid rgba(255,255,255,.10);
    }

    .pd-studio-page .pd-studio-order{
        max-width:none;
        margin:24px 0 0;
        padding:24px 20px;
    }

    .pd-studio-page .pd-order-price-row .pd-price{
        font-size:26px;
    }
}

@media(max-width:480px){

    .pd-studio-page .pd-order-title{
        font-size:20px;
    }

    .pd-studio-page .pd-order-trust-row{
        gap:10px;
    }
}






/* Artwork Toolbar */
.pd-artwork-toolbar{
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 12px;

    width: 90%;
    max-width: 420px;

    padding: 14px;
    border-radius: 20px;

    background: rgba(25,30,45,.85);
    backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,.08);

    box-shadow: 0 20px 50px rgba(0,0,0,.35);

    z-index: 20;
}

/* Both buttons */
.pd-artwork-toolbar .btn{
    flex: 1;
    min-width: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    padding: 14px 18px;

    border-radius: 14px;

    white-space: nowrap;
}

/* Remove button */
.pd-artwork-toolbar .btn-remove{
    border: 1px solid rgba(255,90,90,.35);
    color: #ff8d8d;
}

/* Replace button */
.pd-artwork-toolbar .btn-replace{
    border: 1px solid rgba(255,255,255,.12);
}












/* =====================================================================
   ARTWORK INSTRUCTIONS
   =====================================================================
   Sits below .pd-studio, on the page's default dark background (not
   the alt tone .pd-studio uses). Reuses the same glass-card tokens as
   .pd-studio-order (rgba(255,255,255,.06) fill, rgba(255,255,255,.12)
   border, blur(24px), var(--shadow-dark)) and the same accent-cyan
   used throughout the Designer, so it reads as one continuous studio
   rather than a bolted-on block.
   ===================================================================== */

.pd-artwork-instructions{
    position:relative;
    background:var(--bg-dark);
    padding:12px 24px 72px;
}

.pd-artwork-instructions-container{
    max-width:960px;
    margin:0 auto;
}

.pd-artwork-instructions-head{
    margin-bottom:22px;
    text-align:center;
}

.pd-artwork-instructions-title{
    color:#fff;

    font-size:26px;
    font-weight:900;
    line-height:1.25;
}

.pd-artwork-instructions-desc{
    margin-top:8px;

    color:#94a3b8;

    font-size:14px;
    line-height:1.7;
}

.pd-artwork-instructions-card{
    padding:28px;

    border-radius:28px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    box-shadow:var(--shadow-dark);
}

/* ---------- GLASSMORPHISM TEXTAREA ---------- */

.pd-artwork-textarea-wrap{
    position:relative;
}

.pd-artwork-textarea{
    width:100%;
    resize:vertical;

    min-height:130px;
    padding:18px 18px 32px;

    border-radius:20px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    color:#fff;

    font-family:'Montserrat', sans-serif;
    font-size:14px;
    line-height:1.7;

    transition:.3s ease;
}

.pd-artwork-textarea::placeholder{
    color:#64748b;
}

.pd-artwork-textarea:focus{
    outline:none;

    border-color:rgba(103,232,249,.5);
    background:rgba(255,255,255,.08);

    box-shadow:0 0 0 4px rgba(103,232,249,.12);
}

.pd-artwork-char-counter{
    position:absolute;
    right:16px;
    bottom:12px;

    padding:4px 10px;

    border-radius:999px;
    background:rgba(5,8,22,.55);

    color:#94a3b8;

    font-size:11.5px;
    font-weight:700;

    pointer-events:none;
}

.pd-artwork-char-counter.is-near-limit{
    color:#fdba74;
}

.pd-artwork-char-counter.is-at-limit{
    color:#fca5a5;
}

/* ---------- CUSTOMER HELP INFO CARD ---------- */

.pd-artwork-help-card{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-top:18px;
    padding:16px 18px;

    border-radius:18px;
    border:1px solid rgba(103,232,249,.20);
    background:rgba(103,232,249,.06);

    backdrop-filter:blur(12px);
}

.pd-artwork-help-icon{
    flex-shrink:0;
    line-height:1;
    font-size:18px;
}

.pd-artwork-help-text{
    color:#cbd5e1;

    font-size:13px;
    line-height:1.7;
}

/* ---------- "CONTACT ME BEFORE PRINTING" CHECKBOX ---------- */

.pd-artwork-checkbox-row{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-top:18px;
    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.10);

    cursor:pointer;
}

.pd-artwork-checkbox-input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.pd-artwork-checkbox-box{
    flex-shrink:0;

    width:20px;
    height:20px;
    margin-top:1px;

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

    border-radius:6px;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.05);

    color:transparent;
    font-size:11px;

    transition:.2s ease;
}

.pd-artwork-checkbox-input:checked ~ .pd-artwork-checkbox-box{
    border-color:#67e8f9;
    background:#67e8f9;
    color:#050816;
}

.pd-artwork-checkbox-input:focus-visible ~ .pd-artwork-checkbox-box{
    box-shadow:0 0 0 4px rgba(103,232,249,.20);
}

.pd-artwork-checkbox-label{
    color:#cbd5e1;

    font-size:13.5px;
    font-weight:600;
    line-height:1.6;
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:768px){
    .pd-artwork-instructions{
        padding:8px 20px 56px;
    }

    .pd-artwork-instructions-card{
        padding:22px;
    }

    .pd-artwork-instructions-title{
        font-size:22px;
    }
}

@media(max-width:480px){
    .pd-artwork-instructions-card{
        padding:18px;
        border-radius:22px;
    }

    .pd-artwork-help-card{
        flex-direction:column;
    }
}
/* =====================================================================
   CLIPART LIBRARY — Product Designer feature
   =====================================================================
   Two independent pieces, matching the existing Design Studio system
   (glassmorphism panel + gold/cyan/green accent gradient, same radii/
   blur/shadow tokens already used by .pd-studio-toolbar and the
   artwork selection handles above):

     1. THE PICKER — a floating glass flyout panel anchored to the
        "Clipart Library" tool button in the left toolbar
        (#pdClipartPanel, .pd-clipart-*), containing the live search
        box and the responsive, scrollable thumbnail grid.

     2. THE CANVAS OBJECTS — one .pd-clipart-obj per clipart item
        placed on the active print position, plus its own selection
        handles/rotate handle/mini toolbar (.pd-clipart-obj-*),
        deliberately styled as siblings of (never replacing)
        .pd-artwork-layer / .pd-artwork-handle above.
===================================================================== */

/* ---------------------------------------------------------------
   1. PICKER PANEL
--------------------------------------------------------------- */

.pd-studio-page .pd-clipart-panel{
    position:absolute;
    left:calc(100% + 14px);
    top:0;
    z-index:100;

    display:flex;
    flex-direction:column;

    width:300px;
    max-height:520px;

    border-radius:22px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(15,23,42,.55);

    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);

    box-shadow:var(--shadow-dark, 0 20px 50px rgba(0,0,0,.45));

    opacity:0;
    transform:translateX(-8px) scale(.98);
    pointer-events:none;

    transition:opacity .18s ease, transform .18s ease;
}

.pd-studio-page .pd-clipart-panel.is-open{
    opacity:1;
    transform:translateX(0) scale(1);
    pointer-events:auto;
}

.pd-studio-page .pd-clipart-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:16px 18px 12px;
    border-bottom:1px solid rgba(255,255,255,.10);
}

.pd-studio-page .pd-clipart-panel-header h3{
    display:flex;
    align-items:center;
    gap:8px;

    margin:0;
    font-size:14px;
    font-weight:800;
    color:#fff;
}

.pd-studio-page .pd-clipart-panel-header h3 i{
    color:#67e8f9;
}

.pd-studio-page .pd-clipart-panel-close{
    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;

    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#cbd5e1;

    cursor:pointer;
    transition:background .15s ease, color .15s ease;
}

.pd-studio-page .pd-clipart-panel-close:hover{
    background:rgba(248,113,113,.18);
    color:#fecaca;
}

.pd-studio-page .pd-clipart-search-wrap{
    position:relative;
    margin:14px 16px 10px;
}

.pd-studio-page .pd-clipart-search-wrap i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);

    font-size:12px;
    color:#67e8f9;
}

.pd-studio-page .pd-clipart-search-input{
    width:100%;
    padding:10px 14px 10px 34px;

    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);

    color:#fff;
    font-size:13px;
    font-weight:600;

    outline:none;
    transition:border-color .15s ease, background .15s ease;
}

.pd-studio-page .pd-clipart-search-input::placeholder{
    color:#94a3b8;
    font-weight:500;
}

.pd-studio-page .pd-clipart-search-input:focus{
    border-color:rgba(103,232,249,.5);
    background:rgba(255,255,255,.09);
}

.pd-studio-page .pd-clipart-grid-wrap{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:4px 16px 16px;
}

.pd-studio-page .pd-clipart-grid-wrap::-webkit-scrollbar{
    width:6px;
}
.pd-studio-page .pd-clipart-grid-wrap::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.18);
    border-radius:6px;
}

.pd-studio-page .pd-clipart-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
}

.pd-studio-page .pd-clipart-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;

    padding:8px 6px 10px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(255,255,255,.05);

    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, transform .12s ease;
}

.pd-studio-page .pd-clipart-item:hover{
    border-color:rgba(103,232,249,.45);
    background:rgba(255,255,255,.09);
    transform:translateY(-2px);
}

.pd-studio-page .pd-clipart-item img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;

    /* checkerboard so a transparent-background PNG is legible on the
       dark glass panel, same visual language admin uses for its own
       clipart thumbnails (.product-thumb--checker). */
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.06) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,.06) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.06) 75%);
    background-size:10px 10px;
    background-position:0 0, 0 5px, 5px -5px, -5px 0;
    border-radius:8px;
}

.pd-studio-page .pd-clipart-item-label{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:10.5px;
    font-weight:700;
    color:#cbd5e1;
    text-align:center;
}

.pd-studio-page .pd-clipart-item[hidden]{
    display:none;
}

.pd-studio-page .pd-clipart-empty{
    padding:24px 8px;
    text-align:center;
    font-size:12.5px;
    font-weight:600;
    color:#94a3b8;
}

@media (max-width: 900px){
    .pd-studio-page .pd-clipart-panel{
        left:0;
        top:calc(100% + 10px);
        width:min(340px, 90vw);
    }
}

/* ---------------------------------------------------------------
   2. CANVAS OBJECTS — one per clipart item on the active position.
   Mirrors .pd-artwork-layer / .pd-artwork-handle exactly (same
   cursor/outline/gradient language) so clipart reads as the same
   kind of object as uploaded artwork, not a separate visual system.
--------------------------------------------------------------- */

.pd-clipart-layer-container{
    position:absolute;
    inset:0;
    /* Sits between the artwork layer (z-index:10) and the text layer
       below -- individual .pd-clipart-obj/-handle elements set their
       own z-index inline (main.js) for correct stacking AMONG
       multiple clipart items on the same position. */
    z-index:15;
    pointer-events:none;
}

.pd-clipart-layer-container > *{
    pointer-events:auto;
}

.pd-clipart-obj{
    position:absolute;

    display:block;
    object-fit:contain;

    cursor:grab;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;

    outline:1.5px dashed transparent;
    outline-offset:4px;

    filter:drop-shadow(0 6px 16px rgba(0,0,0,.25));

    transition:outline-color .15s ease;
}

.pd-clipart-obj:active{
    cursor:grabbing;
}

.pd-clipart-obj.is-selected{
    outline-color:rgba(212,175,55,.7);
}

.pd-clipart-obj-handle{
    position:absolute;

    width:16px;
    height:16px;

    border-radius:50%;

    background:linear-gradient(135deg,#67e8f9,#2FA84F,#D4AF37);
    border:2px solid #050816;
    box-shadow:0 2px 6px rgba(0,0,0,.35);

    touch-action:none;
    transform:translate(-50%,-50%);
}

.pd-clipart-obj-handle--nw{ cursor:nwse-resize; }
.pd-clipart-obj-handle--ne{ cursor:nesw-resize; }
.pd-clipart-obj-handle--sw{ cursor:nesw-resize; }
.pd-clipart-obj-handle--se{ cursor:nwse-resize; }

.pd-clipart-obj-rotate-line{
    position:absolute;
    height:2px;
    background:rgba(255,255,255,.55);
    pointer-events:none;
}

.pd-clipart-obj-rotate-handle{
    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:linear-gradient(135deg,#67e8f9,#2FA84F,#D4AF37);
    border:2px solid #050816;
    box-shadow:0 2px 6px rgba(0,0,0,.35);

    display:flex;
    align-items:center;
    justify-content:center;
    color:#050816;
    font-size:9px;

    touch-action:none;
    cursor:grab;

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

.pd-clipart-obj-rotate-handle:active{
    cursor:grabbing;
}

/* Small floating action bar above a selected clipart item — layering
   (send backward/bring forward), duplicate, delete. Only exists in
   the DOM while that item is selected (see renderClipart() in
   main.js), same "editing chrome only while selected" rule as
   everything else on the canvas. */

.pd-clipart-obj-toolbar{
    position:absolute;

    display:flex;
    align-items:center;
    gap:4px;

    padding:5px;

    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(15,23,42,.85);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-shadow:0 10px 24px rgba(0,0,0,.4);

    touch-action:none;
}

.pd-clipart-obj-toolbar-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:26px;
    height:26px;

    border:none;
    border-radius:8px;
    background:rgba(255,255,255,.06);
    color:#cbd5e1;

    font-size:11px;
    cursor:pointer;

    transition:background .15s ease, color .15s ease;
}

.pd-clipart-obj-toolbar-btn:hover{
    background:linear-gradient(135deg,#67e8f9,#2FA84F,#D4AF37);
    color:#050816;
}

.pd-clipart-obj-toolbar-btn--danger:hover{
    background:linear-gradient(135deg,#f87171,#ef4444);
    color:#fff;
}

.cart-pp{
    color: grey;
}



/* =====================================================================
   GSO2 — GANG SHEET CHECKOUT REVIEW CARD (checkout.php)
   Append to the bottom of style.css.

   Reuses existing tokens/components as-is:
   .contact-form, .form-header (+ .form-header-icon), .dash-order-item
   (+ img, .dash-order-item-info, .dash-order-item-qty/-price/-total),
   .dash-meta-card, .cart-item-variant (+ .cart-item-variant-chip).

   Only three things didn't already exist:
     1. A divider between multiple stacked Gang Sheet review cards in a
        mixed cart (.gs-review-item-block).
     2. A narrower, 3-card variant of the fixed 5-column
        .dash-order-meta-grid, sized for Template/Customer Notes/
        Production Notes (.gs-review-meta-grid).
     3. A placeholder box matching .dash-order-item img's 64x64 slot
        for the "Preview unavailable" state (.gs-review-no-preview).
   All three reuse the exact same colors, radii, and spacing scale as
   the components they extend — no new design language.
===================================================================== */

.gs-review-item-block + .gs-review-item-block{
    margin-top:24px;
    padding-top:24px;

    border-top:1px solid rgba(255,255,255,.08);
}

.dash-order-meta-grid.gs-review-meta-grid{
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));

    margin-top:14px;
    margin-bottom:0;
}

.gs-review-summary{
    margin-top:14px;
}

.gs-review-no-preview{
    width:64px;
    height:64px;
    flex-shrink:0;

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

    border-radius:14px;

    border:1px dashed rgba(255,255,255,.25);
    background:rgba(255,255,255,.05);

    color:#94a3b8;

    font-size:10px;
    font-weight:700;
    line-height:1.2;

    padding:4px;
}






.pd-short-desc{
    color: gray
}














/* =====================================================================
   EXPRESSPRESS — PREMIUM FOOTER UPGRADE
   Append to the VERY BOTTOM of style.css
   ===================================================================== */

/* -----------------------------------------------------
   MAIN FOOTER
----------------------------------------------------- */

.footer{
    position:relative;
    overflow:hidden;

    padding:90px 24px 0;

    background:
        radial-gradient(circle at 12% 5%, rgba(30,79,168,.18), transparent 32%),
        radial-gradient(circle at 88% 10%, rgba(47,168,79,.13), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(212,175,55,.08), transparent 35%),
        #050816;
}

.footer-bg{
    pointer-events:none;
    opacity:.9;
}

.footer-container{
    position:relative;
    z-index:5;

    width:100%;
    max-width:1280px;
    margin:0 auto;
}


/* -----------------------------------------------------
   NEWSLETTER
----------------------------------------------------- */

.newsletter-box{
    position:relative;
    overflow:hidden;

    margin-bottom:70px;
    padding:42px 46px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            rgba(30,79,168,.16),
            rgba(255,255,255,.055) 48%,
            rgba(47,168,79,.10)
        );

    -webkit-backdrop-filter:blur(22px);
    backdrop-filter:blur(22px);

    box-shadow:
        0 30px 70px -28px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.07);
}

.newsletter-box::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;

    top:-130px;
    right:-60px;

    background:rgba(103,232,249,.12);
    filter:blur(30px);
    pointer-events:none;
}

.newsletter-content{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
    align-items:center;
    gap:50px;
}

.newsletter-text h3{
    margin:0;

    color:#fff;

    font-size:clamp(28px,3vw,42px);
    font-weight:900;
    line-height:1.1;
    letter-spacing:-.7px;
}

.newsletter-text p{
    max-width:560px;

    margin:14px 0 0;

    color:#a8b3c7;

    font-size:14px;
    line-height:1.8;
}

.newsletter-form{
    display:flex;
    align-items:center;
    gap:10px;

    padding:6px;

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

    background:rgba(5,8,22,.68);

    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.newsletter-form input{
    min-width:0;
    flex:1;

    min-height:52px;

    padding:0 20px;

    border:0;
    border-radius:999px;

    background:transparent;

    color:#fff;

    font-family:inherit;
    font-size:14px;
    font-weight:600;

    outline:none;
}

.newsletter-form input::placeholder{
    color:#718096;
}

.newsletter-form input:focus{
    border:0;
    box-shadow:none;
}

.newsletter-form button{
    flex-shrink:0;

    min-height:52px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    padding:0 24px;

    border:0;
    border-radius:999px;

    background:linear-gradient(
        135deg,
        #1E4FA8,
        #2FA84F 58%,
        #D4AF37
    );

    color:#fff;

    font-family:inherit;
    font-size:13px;
    font-weight:900;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(30,79,168,.22);

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

.newsletter-form button:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);

    box-shadow:0 14px 36px rgba(47,168,79,.25);
}

.newsletter-form button i{
    transition:transform .25s ease;
}

.newsletter-form button:hover i{
    transform:translateX(4px);
}


/* -----------------------------------------------------
   FOOTER GRID
----------------------------------------------------- */

.footer-grid{
    display:grid;

    grid-template-columns:
        minmax(260px,1.35fr)
        minmax(150px,.75fr)
        minmax(170px,.85fr)
        minmax(260px,1.1fr);

    gap:55px;

    padding-bottom:64px;
}


/* -----------------------------------------------------
   ABOUT / LOGO
----------------------------------------------------- */

.footer-about{
    min-width:0;
}

.footer-about .f-logo{
    display:inline-flex;
    align-items:center;

    margin-bottom:18px;
}

.footer-about .f-logo img{
    display:block;

    width:auto;
    height:auto;
    max-width:190px;
    max-height:105px;

    object-fit:contain;
}

.footer-about p{
    max-width:355px;

    margin:0;

    color:#8f9bb0;

    font-size:14px;
    line-height:1.9;
}


/* -----------------------------------------------------
   COLUMN HEADINGS
----------------------------------------------------- */

.footer-links h4,
.footer-contact h4{
    position:relative;

    display:inline-block;

    margin:0 0 26px;

    color:#fff;

    font-size:17px;
    font-weight:900;
    letter-spacing:.15px;
}

.footer-links h4::after,
.footer-contact h4::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-10px;

    width:34px;
    height:3px;

    border-radius:999px;

    background:linear-gradient(
        to right,
        #1E4FA8,
        #2FA84F,
        #D4AF37
    );
}


/* -----------------------------------------------------
   QUICK LINKS / SERVICES
----------------------------------------------------- */

.footer-links ul{
    margin:0;
    padding:0;

    list-style:none;
}

.footer-links li{
    margin:0 0 5px;
}

.footer-links a{
    position:relative;

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:7px 0;

    color:#8f9bb0;

    font-size:14px;
    font-weight:600;
    line-height:1.45;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.footer-links a::before{
    content:"";

    width:0;
    height:1.5px;

    border-radius:99px;

    background:#67e8f9;

    transition:width .25s ease;
}

.footer-links a:hover{
    color:#fff;
    transform:translateX(3px);
}

.footer-links a:hover::before{
    width:12px;
}


/* -----------------------------------------------------
   CONTACT COLUMN — IMPORTANT FIX
----------------------------------------------------- */

.footer-contact{
    min-width:0;
}

.footer-contact-item{
    display:flex;
    align-items:center;
    gap:13px;

    width:100%;

    margin:0 0 11px;
    padding:11px 12px;

    border:1px solid transparent;
    border-radius:14px;

    color:#9ba7ba;

    font-size:13px;
    font-weight:600;
    line-height:1.55;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.footer-contact-item:hover{
    background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.08);

    transform:translateX(3px);
}

.footer-contact-item > i{
    flex:0 0 38px;

    width:38px;
    height:38px;

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

    border:1px solid rgba(103,232,249,.15);
    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            rgba(30,79,168,.20),
            rgba(47,168,79,.12)
        );

    color:#67e8f9;

    font-size:14px;

    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.footer-contact-item span{
    min-width:0;
    flex:1;

    color:#9ba7ba;

    overflow-wrap:anywhere;
}


/* PHONE + EMAIL LINKS */

.footer-contact-item a{
    color:#cbd5e1 !important;

    font-size:13px;
    font-weight:700;
    line-height:1.55;

    text-decoration:none !important;

    transition:color .25s ease;
}

.footer-contact-item a:hover{
    color:#67e8f9 !important;
    text-decoration:none !important;
}


/* -----------------------------------------------------
   ORDER BUTTON
----------------------------------------------------- */

.footer-order-btn{
    width:100%;
    max-width:220px;

    min-height:48px;

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

    margin-top:14px;
    padding:12px 22px;

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

    background:linear-gradient(
        135deg,
        #1E4FA8,
        #2FA84F 55%,
        #D4AF37
    );

    color:#fff;

    font-size:13px;
    font-weight:900;

    text-decoration:none;

    box-shadow:
        0 12px 30px rgba(30,79,168,.20),
        inset 0 1px 0 rgba(255,255,255,.15);

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

.footer-order-btn:hover{
    transform:translateY(-3px);

    background:linear-gradient(
        135deg,
        #1E4FA8,
        #2FA84F 55%,
        #D4AF37
    );

    border-color:rgba(255,255,255,.15);

    color:#fff;

    filter:brightness(1.08);

    box-shadow:0 16px 36px rgba(47,168,79,.22);
}


/* -----------------------------------------------------
   SOCIAL ICONS
----------------------------------------------------- */

.footer-socials{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:9px;

    margin-top:23px;
}

.footer-socials a{
    width:40px;
    height:40px;

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

    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;

    background:rgba(255,255,255,.045);

    color:#d4dbe7;

    font-size:14px;

    text-decoration:none;

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.footer-socials a:hover{
    transform:translateY(-4px);

    background:linear-gradient(
        135deg,
        rgba(30,79,168,.95),
        rgba(47,168,79,.92)
    );

    border-color:rgba(103,232,249,.35);

    color:#fff;

    box-shadow:0 10px 24px rgba(30,79,168,.22);
}


/* -----------------------------------------------------
   FOOTER BOTTOM
----------------------------------------------------- */

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    width:100%;

    padding:23px 0 25px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:left;
}

.footer-bottom p{
    margin:0;

    color:#6f7b90;

    font-size:12px;
    font-weight:600;
    line-height:1.6;
}

.footer-bottom-right{
    text-align:right;
}

.footer-bottom-right a{
    position:relative;

    color:#b8c5d8;

    font-weight:800;

    text-decoration:none;

    transition:color .25s ease;
}

.footer-bottom-right a:hover{
    color:#67e8f9;
}


/* -----------------------------------------------------
   RESPONSIVE
----------------------------------------------------- */

@media(max-width:1100px){

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:48px 40px;
    }

    .newsletter-content{
        grid-template-columns:1fr;
        gap:28px;
    }

    .newsletter-form{
        max-width:650px;
    }
}


@media(max-width:700px){

    .footer{
        padding:64px 16px 0;
    }

    .newsletter-box{
        margin-bottom:50px;

        padding:28px 20px;

        border-radius:24px;
    }

    .newsletter-content{
        gap:24px;
    }

    .newsletter-form{
        display:flex;
        flex-direction:column;

        padding:0;

        border:0;
        border-radius:0;

        background:transparent;
    }

    .newsletter-form input{
        width:100%;
        min-height:54px;

        padding:0 18px;

        border:1px solid rgba(255,255,255,.10);
        border-radius:16px;

        background:rgba(5,8,22,.72);
    }

    .newsletter-form button{
        width:100%;
        min-height:54px;

        border-radius:16px;
    }

    .footer-grid{
        grid-template-columns:1fr;

        gap:42px;

        padding-bottom:45px;
    }

    .footer-about p{
        max-width:100%;
    }

    .footer-contact-item{
        max-width:100%;
    }

    .footer-order-btn{
        max-width:100%;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:center;

        gap:8px;

        padding:20px 0 22px;

        text-align:center;
    }

    .footer-bottom-right{
        text-align:center;
    }
}


@media(max-width:380px){

    .footer{
        padding-left:13px;
        padding-right:13px;
    }

    .newsletter-box{
        padding:24px 16px;
    }

    .newsletter-text h3{
        font-size:27px;
    }

    .footer-contact-item{
        padding:10px 8px;
    }

    .footer-contact-item > i{
        flex-basis:36px;

        width:36px;
        height:36px;
    }
}

/* =====================================================================
   SHOP — COMING SOON TEASER CATALOGUE
   Separate from purchasable .sp-card products. Uses the site's existing
   dark/glass surfaces and shared cyan/green/gold brand accents.
   ===================================================================== */
.coming-soon-section{
    position:relative;
    overflow:hidden;
    padding:96px 24px;
    background:var(--bg-dark-alt);
}

.coming-soon-container{
    position:relative;
    z-index:2;
    max-width:1280px;
    margin:0 auto;
}

.coming-soon-glow{
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    filter:blur(120px);
    pointer-events:none;
    opacity:.55;
}

.coming-soon-glow-cyan{
    top:-100px;
    left:-120px;
    background:rgba(103,232,249,.14);
}

.coming-soon-glow-gold{
    right:-120px;
    bottom:-120px;
    background:rgba(212,175,55,.12);
}

.coming-soon-header{
    max-width:760px;
    margin:0 auto 44px;
    text-align:center;
}

.coming-soon-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 16px;
    border:1px solid rgba(103,232,249,.22);
    border-radius:999px;
    background:rgba(255,255,255,.05);
    color:var(--accent-cyan);
    font-size:12px;
    font-weight:900;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.coming-soon-header h2{
    margin-top:18px;
    color:var(--text-on-dark);
    font-size:clamp(34px,5vw,56px);
    font-weight:900;
    line-height:1.08;
}

.coming-soon-header h2 span{
    background:linear-gradient(to right,var(--accent-cyan),var(--accent-green),var(--accent-gold));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.coming-soon-header p{
    margin-top:14px;
    color:var(--text-on-dark-soft);
    font-size:16px;
    line-height:1.7;
}

.coming-soon-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px;
    max-width:900px;
    margin:0 auto;
}

.coming-soon-card{
    overflow:hidden;
    border:1px solid var(--card-border-alt);
    border-radius:28px;
    background:var(--card-bg-alt);
    box-shadow:var(--shadow-dark);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.coming-soon-card:hover{
    transform:translateY(-6px);
    border-color:rgba(103,232,249,.45);
    box-shadow:var(--shadow-dark-hover);
}

.coming-soon-image-wrap{
    position:relative;
    height:280px;
    overflow:hidden;
    background:var(--card-bg-alt);
}

.coming-soon-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transition:transform .5s ease;
}

.coming-soon-card:hover .coming-soon-image{
    transform:scale(1.04);
}

.coming-soon-badge{
    position:absolute;
    top:16px;
    left:16px;
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    background:linear-gradient(to right,var(--accent-blue),var(--accent-green),var(--accent-gold));
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    box-shadow:0 10px 25px rgba(5,8,22,.22);
}

.coming-soon-card-body{
    padding:24px;
}

.coming-soon-card-body h3{
    color:var(--text-on-dark);
    font-size:23px;
    font-weight:900;
    line-height:1.25;
}

.coming-soon-card-body p{
    margin-top:10px;
    color:var(--text-on-dark-soft);
    font-size:14px;
    line-height:1.65;
}

.coming-soon-status{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--divider-dark);
    color:var(--text-on-dark-muted);
    font-size:12px;
    font-weight:800;
}

.coming-soon-status i{
    color:var(--accent-cyan);
}

@media(max-width:768px){
    .coming-soon-section{ padding:76px 20px; }
    .coming-soon-grid{ grid-template-columns:1fr; max-width:560px; }
    .coming-soon-image-wrap{ height:260px; }
}

@media(max-width:480px){
    .coming-soon-section{ padding:64px 16px; }
    .coming-soon-header{ margin-bottom:32px; }
    .coming-soon-card{ border-radius:22px; }
    .coming-soon-card-body{ padding:20px; }
    .coming-soon-image-wrap{ height:230px; }
}



/* =====================================================================
   PRODUCT DESIGNER — PROFESSIONAL MULTI-LOCATION SELECTOR
   Native checkbox = include/exclude from print order.
   Location button = open that garment view for editing.
   ===================================================================== */
.pd-designer-position-choice{
    position:relative;
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
}

/* Reserve the left side of each pill for the real checkbox control. */
.pd-designer-position-choice .pd-designer-position-tab{
    padding-left:38px;
}

.pd-location-checkbox-control{
    position:absolute;
    left:10px;
    top:50%;
    z-index:3;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    cursor:pointer;
}

.pd-location-checkbox{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.pd-location-check{
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    border-radius:5px;
    border:1px solid rgba(255,255,255,.30);
    background:rgba(5,8,22,.34);
    color:transparent;
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
    transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease;
}

.pd-location-check i{
    color:inherit;
    font-size:9px;
}

.pd-location-checkbox-control:hover .pd-location-check{
    border-color:rgba(103,232,249,.72);
    background:rgba(103,232,249,.10);
}

.pd-location-checkbox:focus-visible + .pd-location-check{
    outline:2px solid #67e8f9;
    outline-offset:3px;
}

.pd-location-checkbox:checked + .pd-location-check{
    border-color:#67e8f9;
    background:linear-gradient(135deg,#67e8f9,#2FA84F);
    color:#050816;
    box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 0 16px rgba(103,232,249,.18);
}

.pd-location-checkbox:active + .pd-location-check{
    transform:scale(.92);
}

/* Checked and currently open are separate visual concepts. */
.pd-designer-position-choice.is-selected .pd-designer-position-tab:not(.active){
    border-color:rgba(103,232,249,.48);
    background:rgba(103,232,249,.08);
    color:#e9fcff;
}

.pd-designer-position-choice .pd-designer-position-tab.active{
    border-color:transparent;
    background:linear-gradient(135deg,#67e8f9,#2FA84F,#D4AF37);
    color:#050816;
    box-shadow:0 8px 24px rgba(47,168,79,.14);
}

.pd-designer-position-choice .pd-designer-position-tab.active i{
    color:#050816;
}

/* If the open view is unchecked, keep it visibly open without falsely
   making it look included in the print order. */
.pd-designer-position-choice:not(.is-selected) .pd-designer-position-tab.active{
    border-color:rgba(103,232,249,.42);
    background:rgba(255,255,255,.075);
    color:var(--text-on-dark-soft,#cbd5e1);
    box-shadow:0 0 0 1px rgba(103,232,249,.06) inset;
}

.pd-designer-position-choice:not(.is-selected) .pd-designer-position-tab.active i{
    color:var(--text-on-dark-muted,#94a3b8);
}

.pd-selected-locations-summary{
    margin-top:6px;
    color:var(--text-on-dark-soft,#cbd5e1);
    font-size:11px;
    font-weight:600;
    line-height:1.45;
    white-space:normal;
}

.pd-selected-locations-summary.is-empty{
    color:var(--text-on-dark-muted,#94a3b8);
    font-weight:500;
}

.pd-studio-page .pd-studio-minibar-group:has(.pd-designer-position-tabs){
    min-width:280px;
}

@media (max-width:700px){
    .pd-designer-position-choice .pd-designer-position-tab{
        padding-left:36px;
    }

    .pd-location-checkbox-control{
        left:9px;
    }

    .pd-selected-locations-summary{
        width:100%;
        font-size:10px;
    }
}