/* shop */




/* ============================================================
   GOLD BLISS REUSABLE HEADER — CLEAN FINAL VERSION
   FILE: gb-header.css
   UNIQUE PREFIX: gbx-

   Add this in <head> (font):
   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

   HOW IT WORKS
   - Glass box = the header itself (inset:0), so the logo can never go outside.
   - Logo, nav, icons are normal flex items (no left:% / transform tricks).
   - Hamburger menu from 991px and below.
============================================================ */

/* ============================================================
   VARIABLES + HEADER FRAME
============================================================ */
.gbx-header{
    --gbx-burgundy:#65151f;
    --gbx-burgundy-dark:#4f0d16;
    --gbx-gold:#c9953e;
    --gbx-gold-light:#e3bd79;
    --gbx-white:#ffffff;
    --gbx-cream:#f8f5f0;
    --gbx-text:#2b1715;
    --gbx-muted:#6b5a52;
    --gbx-font:"DM Sans","Poppins",Arial,sans-serif;

    position:absolute;
    top:20px;
    left:0;
    right:0;
    margin:0 auto;              /* centers without transform */

    width:calc(100% - 32px);
    max-width:1180px;           /* change this to make header longer / shorter */
    height:84px;

    z-index:99999;
    box-sizing:border-box;
    background:transparent;
    font-family:var(--gbx-font);
}

.gbx-header *,
.gbx-header *::before,
.gbx-header *::after{
    box-sizing:border-box;
}

/* GLASS BOX — covers the full header, logo always stays inside */
.gbx-header::before{
    content:"";
    position:absolute;
    inset:0;

    border:1.5px solid rgba(255,255,255,.60);
    border-radius:20px;

    background:rgba(255,255,255,.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 8px 32px rgba(0,0,0,.16);

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

    pointer-events:none;
}

/* ============================================================
   INNER (flex row: logo | nav | icons | hamburger)
============================================================ */
.gbx-header__inner{
    position:relative;
    width:100%;
    height:100%;
    padding:0 14px;

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

/* ============================================================
   LOGO — white rounded card (inside glass, normal flow)
============================================================ */
.gbx-header__logo{
    position:static;
    flex:0 0 auto;

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

    width:80px;
    height:62px;
    padding:7px 10px;

    background:#ffffff;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(30,5,8,.16);
    overflow:hidden;

    text-decoration:none !important;
}

.gbx-header__logo img{
    display:block;
    width:auto;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    position:static;
    transform:none;
}

/* ============================================================
   NAV PILL
============================================================ */
.gbx-header__nav{
    flex:0 1 auto;
    margin-left:auto;
    min-width:0;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:2px;
    padding:4px;

    background:rgba(255,255,255,.97);
    border-radius:40px;
    box-shadow:0 6px 18px rgba(40,10,10,.16);
}

/* ============================================================
   NAV LINK
============================================================ */
.gbx-header__nav-link{
    position:relative;
    height:46px;
    padding:0 18px;

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

    color:var(--gbx-text) !important;
    font-family:var(--gbx-font);
    font-size:15px;
    font-weight:600;
    letter-spacing:.2px;
    white-space:nowrap;
    text-decoration:none !important;

    background:transparent;
    border:0;
    border-radius:28px;
    cursor:pointer;

    transition:color .25s ease, background .25s ease;
}

.gbx-header__nav-link:hover{
    color:var(--gbx-burgundy) !important;
    background:#f7ebdd;
}

.gbx-header__nav-link.gbx-is-active{
    color:#ffffff !important;
    background:linear-gradient(135deg,var(--gbx-burgundy),var(--gbx-burgundy-dark));
    box-shadow:0 4px 10px rgba(101,21,31,.22);
}

.gbx-header__nav-link.gbx-is-active:hover{
    color:#ffffff !important;
    background:linear-gradient(135deg,var(--gbx-burgundy),var(--gbx-burgundy-dark));
}

.gbx-header__nav-link i{
    font-size:10px;
    color:var(--gbx-burgundy);
    transition:transform .25s ease;
}

.gbx-header__nav-link.gbx-is-active i{
    color:#ffffff;
}

.gbx-header__dropdown:hover .gbx-header__nav-link i,
.gbx-our-collection:hover .gbx-header__nav-link i{
    transform:rotate(180deg);
}

/* ============================================================
   DROPDOWNS (All Jewelry + Our Collection)
============================================================ */
.gbx-header__dropdown,
.gbx-our-collection{
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
}

/* invisible bridge so menu doesn't close while moving the mouse */
.gbx-header__dropdown::after,
.gbx-our-collection::after{
    content:"";
    position:absolute;
    left:-20px;
    right:-20px;
    top:100%;
    height:26px;
    background:transparent;
}

.gbx-header__dropdown-menu{
    position:absolute;
    top:calc(100% + 14px);
    left:50%;
    transform:translateX(-50%) translateY(8px);

    width:580px;
    max-width:90vw;
    padding:22px;

    background:#ffffff;
    border:1px solid rgba(201,149,62,.25);
    border-radius:20px;
    box-shadow:0 22px 55px rgba(50,20,20,.22);

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

    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index:100000;
}

.gbx-header__dropdown:hover .gbx-header__dropdown-menu,
.gbx-header__dropdown:focus-within .gbx-header__dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

/* ---------- All Jewelry grid ---------- */
.gbx-header__category-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.gbx-category-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;

    padding:12px 8px;
    border-radius:14px;

    color:var(--gbx-text) !important;
    text-decoration:none !important;

    transition:background .25s ease, transform .25s ease;
}

.gbx-category-card:hover{
    background:#faf0e7;
    transform:translateY(-3px);
}

.gbx-category-card img{
    width:78px;
    height:62px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid rgba(201,149,62,.28);
}

.gbx-category-card span{
    color:var(--gbx-text) !important;
    font-family:var(--gbx-font);
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    text-align:center;
}

.gbx-category-card:hover span{
    color:var(--gbx-burgundy) !important;
}

.gbx-category-view-more{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    margin-top:6px;
    padding-top:14px;
    border-top:1px solid rgba(201,149,62,.22);

    color:var(--gbx-burgundy) !important;
    font-family:var(--gbx-font);
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none !important;
}

.gbx-category-view-more:hover{
    color:var(--gbx-gold) !important;
}

/* ---------- Our Collection menu ---------- */
.gbx-our-collection:hover .gbx-collection-menu,
.gbx-our-collection:focus-within .gbx-collection-menu,
.gbx-header__dropdown:hover .gbx-collection-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0) translateY(0);
}

.gbx-collection-menu{
    width:350px;
    max-width:min(350px,88vw);
    padding:12px;

    left:auto;
    right:-30px;
    transform:translateX(0) translateY(8px);
}

.gbx-collection-links{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.gbx-collection-link{
    display:flex;
    align-items:center;
    gap:14px;

    width:100%;
    padding:13px 14px;

    color:var(--gbx-text) !important;
    text-decoration:none !important;

    border-radius:12px;
    background:transparent;

    transition:background .25s ease, transform .25s ease;
}

.gbx-collection-link:hover{
    background:#faf0e7;
    transform:translateX(3px);
}

.gbx-collection-link > i{
    flex:0 0 40px;
    width:40px;
    height:40px;

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

    border-radius:50%;
    background:rgba(101,21,31,.09);
    color:var(--gbx-burgundy);
    font-size:15px;
}

.gbx-collection-link span{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.gbx-collection-link strong{
    color:var(--gbx-text) !important;
    font-family:var(--gbx-font);
    font-size:15px;
    font-weight:700;
    line-height:1.3;
}

.gbx-collection-link small{
    color:var(--gbx-muted) !important;
    font-family:var(--gbx-font);
    font-size:12.5px;
    font-weight:500;
    line-height:1.4;
}

.gbx-collection-link:hover strong{
    color:var(--gbx-burgundy) !important;
}

/* ============================================================
   ACTION ICONS
============================================================ */
.gbx-header__actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
}

.gbx-header__icon{
    position:relative;

    width:42px;
    height:42px;
    padding:0;

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

    border:0 !important;
    background:transparent !important;
    border-radius:50%;

    color:var(--gbx-burgundy) !important;
    font-size:18px;

    text-decoration:none !important;
    cursor:pointer;
    overflow:visible;

    transition:color .25s ease, background .25s ease, transform .25s ease;
}

.gbx-header__icon:hover{
    color:var(--gbx-gold) !important;
    background:rgba(101,21,31,.07) !important;
    transform:translateY(-1px);
}

/* ---------- Cart ---------- */
.gbx-header__cart{
    position:relative;
    overflow:visible;
}

.gbx-cart-count{
    position:absolute;
    top:-3px;
    right:-3px;

    min-width:20px;
    height:20px;
    padding:0 4px;

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

    border-radius:50%;
    background:var(--gbx-gold);
    color:#ffffff;

    font-family:var(--gbx-font);
    font-size:11px;
    font-weight:700;
    line-height:1;

    border:2px solid #ffffff;
    box-shadow:0 2px 5px rgba(101,21,31,.25);
    z-index:2;
}

/* ============================================================
   RATE POPUP
============================================================ */
.gbx-header__action-wrap{
    position:relative;
}

.gbx-rate-popup{
    position:absolute;
    top:calc(100% + 14px);
    right:-10px;

    width:240px;
    padding:18px;

    background:#ffffff;
    border:1px solid rgba(201,149,62,.25);
    border-radius:16px;
    box-shadow:0 18px 45px rgba(60,25,20,.20);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(8px);

    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index:100000;
}

.gbx-header__action-wrap:hover .gbx-rate-popup{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

.gbx-rate-popup__title{
    margin-bottom:12px;
    color:var(--gbx-gold);
    font-family:var(--gbx-font);
    font-size:12px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.gbx-rate-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.gbx-rate-row span{
    color:var(--gbx-muted);
    font-family:var(--gbx-font);
    font-size:14px;
    font-weight:500;
}

.gbx-rate-row strong{
    color:var(--gbx-text);
    font-family:var(--gbx-font);
    font-size:14px;
    font-weight:700;
}

.gbx-rate-divider{
    width:100%;
    height:1px;
    margin:11px 0;
    background:rgba(201,149,62,.22);
}

.gbx-rate-empty{
    color:var(--gbx-muted);
    font-family:var(--gbx-font);
    font-size:14px;
}

/* ============================================================
   USER MENU
============================================================ */
.gbx-header__user{
    position:relative;
}

.gbx-user-menu{
    position:absolute;
    top:calc(100% + 14px);
    right:0;

    width:210px;
    padding:10px;

    background:#ffffff;
    border:1px solid rgba(201,149,62,.25);
    border-radius:16px;
    box-shadow:0 18px 45px rgba(60,25,20,.20);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(8px);

    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index:100000;
}

.gbx-header__user:hover .gbx-user-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

.gbx-user-menu__name{
    padding:8px 12px 12px;
    margin-bottom:6px;
    border-bottom:1px solid rgba(201,149,62,.22);

    color:var(--gbx-burgundy);
    font-family:var(--gbx-font);
    font-size:14px;
    font-weight:700;
}

.gbx-user-menu a{
    display:flex;
    align-items:center;
    gap:11px;

    padding:10px 12px;

    color:var(--gbx-text) !important;
    font-family:var(--gbx-font);
    font-size:14px;
    font-weight:500;
    text-decoration:none !important;

    border-radius:9px;
    transition:background .2s ease, color .2s ease;
}

.gbx-user-menu a:hover{
    color:var(--gbx-burgundy) !important;
    background:#faf0e7;
}

.gbx-user-menu a i{
    width:17px;
    color:var(--gbx-gold);
    font-size:14px;
}

/* ============================================================
   MOBILE TOGGLE (hamburger)
============================================================ */
.gbx-mobile-toggle{
    display:none;
    flex:0 0 auto;
    margin-left:auto;

    width:44px;
    height:44px;
    padding:10px;

    border:0;
    background:transparent;

    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;

    cursor:pointer;
    z-index:5;
}

.gbx-mobile-toggle span{
    display:block;
    width:24px;
    height:2.5px;
    border-radius:2px;
    background:white;
    transition:transform .3s ease, opacity .3s ease;
}

.gbx-mobile-toggle.gbx-mobile-toggle--open span:nth-child(1){
    transform:translateY(7.5px) rotate(45deg);
}

.gbx-mobile-toggle.gbx-mobile-toggle--open span:nth-child(2){
    opacity:0;
}

.gbx-mobile-toggle.gbx-mobile-toggle--open span:nth-child(3){
    transform:translateY(-7.5px) rotate(-45deg);
}

/* ============================================================
   MOBILE MENU — SLIDE-IN PANEL
============================================================ */
.gbx-mobile-menu{
    display:none;
}

.gbx-mobile-menu.gbx-mobile-menu--open{
    display:flex;
    flex-direction:column;

    position:fixed;
    top:0;
    left:0;

    width:min(330px,85vw);
    height:100vh;
    height:100dvh;
    padding:22px 18px;

    background:linear-gradient(180deg,#5c1119,#3d0a11);
    box-shadow:0 25px 60px rgba(20,0,3,.40);

    z-index:999999;
    overflow-y:auto;
    font-family:var(--gbx-font);
}

.gbx-mobile-menu__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:26px;
}

.gbx-mobile-menu__logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:70px;
    height:60px;
    padding:6px 8px;

    background:#ffffff;
    border-radius:14px;
    box-shadow:0 6px 16px rgba(0,0,0,.18);
    overflow:hidden;
}

.gbx-mobile-menu__logo img{
    display:block;
    width:auto;
    height:100%;
    max-width:100%;
    object-fit:contain;
}

.gbx-mobile-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;
    padding:0;

    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#ffffff;

    font-size:16px;
    cursor:pointer;
    transition:background .25s ease, transform .25s ease;
}

.gbx-mobile-close:hover{
    background:rgba(255,255,255,.18);
    transform:rotate(90deg);
}

.gbx-mobile-menu a{
    padding:15px 6px;

    color:#ffffff !important;
    font-family:var(--gbx-font);
    font-size:17px;
    font-weight:500;
    text-decoration:none !important;

    border-bottom:1px solid rgba(255,255,255,.14);
}

.gbx-mobile-menu a:last-child{
    border-bottom:0;
}

.gbx-mobile-menu a:hover{
    color:var(--gbx-gold-light) !important;
}

/* mobile "Our Collection" group */
.gbx-mobile-collection{
    margin:4px 0 2px;
    padding:3px 0 6px;
    border-bottom:1px solid rgba(255,255,255,.14);
}

.gbx-mobile-collection__title{
    padding:14px 6px 8px;
    color:var(--gbx-gold-light);
    font-family:var(--gbx-font);
    font-size:17px;
    font-weight:700;
}

.gbx-mobile-collection a{
    display:block;
    margin-left:8px;
    padding:11px 12px;

    border-bottom:0 !important;
    color:rgba(255,255,255,.92) !important;
    font-size:15px;
}

.gbx-mobile-collection a:hover{
    color:var(--gbx-gold-light) !important;
}

/* ============================================================
   RESPONSIVE — SMALL LAPTOP (≤1280px)
============================================================ */
@media (max-width:1280px){

    .gbx-header__inner{
        gap:12px;
    }

    .gbx-header__nav-link{
        padding:0 13px;
        font-size:14px;
    }

    .gbx-header__icon{
        width:38px;
        height:38px;
        font-size:16px;
    }
}

/* ============================================================
   RESPONSIVE — TABLET LANDSCAPE (≤1100px)
============================================================ */
@media (max-width:1100px){

    .gbx-header{
        width:calc(100% - 24px);
        height:78px;
    }

    .gbx-header__logo{
        width:72px;
        height:56px;
    }

    .gbx-header__nav{
        height:52px;
    }

    .gbx-header__nav-link{
        height:42px;
        padding:0 10px;
        font-size:13.5px;
    }

    .gbx-header__icon{
        width:36px;
        height:36px;
        font-size:15px;
    }

    .gbx-header__dropdown-menu{
        width:500px;
    }
}

/* ============================================================
   RESPONSIVE — HAMBURGER MODE (≤991px)
============================================================ */
@media (max-width:991px){

    .gbx-header{
        top:12px;
        width:calc(100% - 20px);
        height:64px;
    }

    .gbx-header::before{
        border-radius:18px;
    }

    .gbx-header__inner{
        padding:0 10px;
    }

    .gbx-header__logo{
        width:62px;
        height:50px;
        border-radius:13px;
    }

    .gbx-header__nav{
        display:none;
    }

    .gbx-mobile-toggle{
        display:flex;
    }

    /* if icons sit outside the nav pill, keep them next to the toggle */
    .gbx-header__inner > .gbx-header__actions{
        margin-left:auto;
    }

    .gbx-header__inner > .gbx-header__actions ~ .gbx-mobile-toggle{
        margin-left:0;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤767px)
============================================================ */
@media (max-width:767px){

    .gbx-header{
        top:10px;
        height:60px;
    }

    .gbx-header::before{
        border-radius:17px;
    }

    .gbx-header__logo{
        width:58px;
        height:46px;
        padding:5px 7px;
        border-radius:12px;
    }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤480px)
============================================================ */
@media (max-width:480px){

    .gbx-header{
        top:8px;
        width:calc(100% - 14px);
        height:56px;
    }

    .gbx-header::before{
        border-radius:16px;
    }

    .gbx-header__inner{
        padding:0 8px;
    }

    .gbx-header__logo{
        width:52px;
        height:42px;
        padding:4px 6px;
        border-radius:11px;
    }

    .gbx-mobile-toggle{
        width:40px;
        height:40px;
    }

    .gbx-mobile-menu.gbx-mobile-menu--open{
        width:min(300px,88vw);
        padding:18px 14px;
    }
}

/* ============================================================
   RESPONSIVE — VERY SMALL MOBILE (≤360px)
============================================================ */
@media (max-width:360px){

    .gbx-header{
        width:calc(100% - 10px);
        height:52px;
    }

    .gbx-header__logo{
        width:46px;
        height:38px;
    }

    .gbx-mobile-toggle{
        width:36px;
        height:36px;
        padding:8px;
    }

    .gbx-mobile-toggle span{
        width:21px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
    .gbx-header *,
    .gbx-header *::before,
    .gbx-header *::after{
        transition:none !important;
        animation:none !important;
    }
}