/* ==========================================
   AL ZAHRA JEWELLERY
   GLOBAL STYLES

   Fonts
   Cormorant Garamond - Headings
   Jost - Body
========================================== */

:root{
    /* Page colours: rose beige */
    --bg:#e6cdc1;
    --bg-soft:#f4ede7;
    --bg-deep:#ebe1d9;
    --surface:#fffaf5;
    --bg-footer:#3d2a2b;

    /* Text */
    --text:#35221f;
    --muted:#7b6058;
    --line:rgba(90,48,40,.16);

    /* Accents */
    --gold:#9c6f35;
    --gold-light:#ecd6a8;
    --accent:#7b2d42;

    /* Filled buttons, badges and active chips */
    --fill:linear-gradient(135deg,#a8782f,#d6ab62);
    --fill-hover:linear-gradient(135deg,#b98838,#e2bb76);
    --on-fill:#2a1c10;

    --success:#1f7a4d;
    --danger:#b3382c;

    --radius:14px;
    --header-h:78px;

    --shadow-sm:0 6px 16px rgba(84,44,36,.12);
    --shadow:0 20px 42px rgba(84,44,36,.22);

    --ease:cubic-bezier(.22,.8,.26,1);

    --font-head:'Cormorant Garamond',Georgia,serif;
    --font-body:'Jost',system-ui,sans-serif;
}

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

html{
    color-scheme:light;
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--header-h) + 20px);
}

body{
    font-family:var(--font-body);
    font-size:16px;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button{
    border:none;
    outline:none;
    cursor:pointer;
    font-family:inherit;
    background:none;
    color:inherit;
}

input,
select{
    outline:none;
    border:none;
    font-family:inherit;
}

select option{
    background:var(--bg);
    color:var(--text);
}

button:focus-visible,
a:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
}

/* Text boxes show focus with their own border and glow instead */

input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:none;
}

h1,
h2,
h3,
h4{
    font-family:var(--font-head);
    font-weight:600;
    line-height:1.15;
    color:var(--text);
}

p{
    color:var(--muted);
    line-height:1.75;
}

::selection{
    background:var(--fill);
    color:var(--on-fill);
}

::-webkit-scrollbar{
    width:9px;
}

::-webkit-scrollbar-track{
    background:var(--bg-soft);
}

::-webkit-scrollbar-thumb{
    background:var(--gold);
    border-radius:20px;
}

.hidden{
    display:none !important;
}

/* ==========================================
   SECTION HEADING
========================================== */

.section-heading{
    text-align:center;
    margin-bottom:44px;
}

.section-heading span{
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.32em;
    font-size:.74rem;
    font-weight:500;
}

.section-heading h2{
    font-size:clamp(2rem,4vw,3rem);
    margin:10px 0 14px;
}

.section-heading h2::after{
    content:"✦";
    display:block;
    margin-top:10px;
    font-size:.8rem;
    color:var(--gold);
    background:
        linear-gradient(var(--gold),var(--gold)) left center / calc(50% - 16px) 1px no-repeat,
        linear-gradient(var(--gold),var(--gold)) right center / calc(50% - 16px) 1px no-repeat;
    width:150px;
    margin-inline:auto;
}

.section-heading p{
    max-width:600px;
    margin:auto;
}

/* ==========================================
   BUTTONS
========================================== */

.btn{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    padding:15px 34px;
    border-radius:50px;
    font-family:inherit;
    font-size:.82rem;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    cursor:pointer;
    transition:
        transform .4s var(--ease),
        box-shadow .4s var(--ease),
        background .3s,
        color .3s,
        border-color .3s;
}

.btn:hover{
    transform:translateY(-3px);
}

.btn-primary{
    background:var(--fill);
    color:var(--on-fill);
    border:1px solid transparent;
    font-weight:600;
}

.btn-primary:hover{
    background:var(--fill-hover);
    box-shadow:0 14px 28px rgba(207,164,99,.28);
}

.btn-outline{
    background:rgba(255,255,255,.35);
    color:var(--accent);
    border:1px solid var(--accent);
}

.btn-outline:hover{
    background:var(--accent);
    color:#fff;
}

.btn-white{
    background:#fff;
    color:var(--text);
    border:1px solid rgba(53,34,31,.3);
    box-shadow:0 2px 6px rgba(84,44,36,.08);
}

.btn-white:hover{
    border-color:var(--accent);
    color:var(--accent);
    box-shadow:0 12px 24px rgba(84,44,36,.2);
}

.product-link{
    cursor:pointer;
}

/* ==========================================
   EMPTY STATES
========================================== */

.no-products{
    grid-column:1/-1;
    text-align:center;
    padding:70px 20px;
}

.no-products i{
    font-size:52px;
    color:var(--gold);
    margin-bottom:20px;
}

.no-products h2{
    font-size:2rem;
    margin-bottom:8px;
}

.no-products .btn{
    margin-top:24px;
}

/* ==========================================
   TOAST
========================================== */

.toast{
    position:fixed;
    left:50%;
    bottom:30px;
    max-width:calc(100vw - 32px);
    background:#2f1f1e;
    color:#f7ece4;
    border:1px solid var(--gold);
    padding:14px 26px;
    border-radius:50px;
    font-size:.9rem;
    font-weight:500;
    letter-spacing:.03em;
    opacity:0;
    transform:translate(-50%,24px);
    transition:opacity .4s,transform .5s var(--ease);
    pointer-events:none;
    z-index:9999;
    box-shadow:var(--shadow);
}

.toast::before{
    content:"✦";
    color:var(--gold-light);
    margin-right:10px;
}

.toast.show{
    opacity:1;
    transform:translate(-50%,0);
}

.toast.error{
    border-color:#ff8a7a;
    color:#ffb3a8;
}