/* ==========================================
   INNER PAGES
   Shop, About, Contact
========================================== */

.page-hero{
    position:relative;
    overflow:hidden;
    padding:64px 5% 58px;
    text-align:center;
    background:
        radial-gradient(ellipse at 50% 120%,rgba(255,250,245,.5),transparent 62%),
        radial-gradient(circle at 12% 30%,rgba(185,139,78,.18),transparent 38%),
        radial-gradient(circle at 88% 70%,rgba(207,164,99,.13),transparent 40%);
    border-bottom:1px solid var(--line);
}

/* Jewellery drawn in gold, hanging in the two top corners */

.page-hero::before,
.page-hero::after{
    content:"";
    position:absolute;
    top:0;
    background:no-repeat top center / contain;
    opacity:.62;
    pointer-events:none;
    transform-origin:top center;
    animation:sway 8s ease-in-out infinite alternate;
}

.page-hero::before{
    left:max(1.5%,calc(50% - 650px));
    width:236px;
    height:197px;
    background-image:url("../images/decor/necklace.svg");
}

.page-hero::after{
    right:max(1.5%,calc(50% - 650px));
    width:206px;
    height:179px;
    background-image:url("../images/decor/earrings.svg");
    animation-duration:6.4s;
    animation-delay:-2s;
}

/* On a narrower screen the drawings shrink, so they stay clear of the heading */

@media(max-width:1100px){

    .page-hero::before{
        left:-10px;
        width:184px;
        height:154px;
        opacity:.48;
    }

    .page-hero::after{
        right:0;
        width:158px;
        height:137px;
        opacity:.48;
    }

}

.page-hero > *{
    position:relative;
    z-index:1;
    animation:fadeUp .9s var(--ease) both;
}

.page-hero > :nth-child(2){ animation-delay:.12s; }
.page-hero > :nth-child(3){ animation-delay:.24s; }

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

.page-hero h1{
    font-size:clamp(2.3rem,5vw,3.6rem);
    margin:10px 0 8px;
}

.page-hero p{
    max-width:620px;
    margin:auto;
}

/* ==========================================
   HOME - VIEW ALL
========================================== */

.view-all{
    text-align:center;
    margin-top:46px;
}

/* ==========================================
   SHOP
========================================== */

.shop-section{
    padding:44px 5% 90px;
}

.shop-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    max-width:1400px;
    margin:0 auto 26px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
    color:var(--muted);
    font-size:.9rem;
}

.shop-sort{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:.76rem;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.shop-sort select{
    height:42px;
    padding:0 16px;
    border-radius:40px;
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--line);
    font-size:.9rem;
    cursor:pointer;
    transition:border-color .3s;
}

.shop-sort select:focus,
.shop-sort select:hover{
    border-color:var(--gold);
}

/* ==========================================
   RELATED PRODUCTS
========================================== */

.related-section{
    padding:60px 5% 80px;
    background:var(--surface);
    border-top:1px solid var(--line);
}

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

.about-section{
    padding:64px 5% 80px;
}

.about-story{
    max-width:760px;
    margin:auto;
    text-align:center;
}

.about-story p{
    margin-bottom:20px;
    font-size:1.1rem;
}

.about-story p:first-of-type{
    font-family:var(--font-head);
    font-size:1.7rem;
    font-style:italic;
    line-height:1.45;
    color:var(--accent);
}

.about-values{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    max-width:1100px;
    margin:50px auto 0;
}

.about-values .feature-card,
.contact-grid .feature-card{
    padding:38px 26px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s;
}

.about-values .feature-card:hover,
.contact-grid .feature-card:hover{
    transform:translateY(-8px);
    border-color:var(--gold);
    box-shadow:var(--shadow);
}

.about-cta{
    text-align:center;
    margin-top:50px;
}

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

.contact-section{
    padding:64px 5% 80px;
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    max-width:1100px;
    margin:auto;
}

.contact-grid .feature-card p{
    word-break:break-word;
    color:var(--text);
}

.contact-grid .feature-card a{
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:4px;
}

/* A small icon inside a link, not one of the round card icons */

.contact-grid .feature-card a i{
    width:auto;
    height:auto;
    margin:0 4px 0 0;
    border:none;
    border-radius:0;
    background:none;
    color:inherit;
    font-size:1rem;
    transform:none;
}

.contact-form{
    max-width:640px;
    margin:44px auto 0;
    padding:34px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
}

.contact-form h2{
    font-size:1.9rem;
    margin-bottom:6px;
}

.contact-form label,
.track-problem label{
    display:block;
    margin:18px 0 8px;
    font-size:.74rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.contact-form input,
.contact-form textarea,
.track-problem select,
.track-problem textarea{
    width:100%;
    padding:13px 16px;
    border-radius:10px;
    background:var(--bg-soft);
    color:var(--text);
    border:1px solid var(--line);
    font-family:inherit;
    font-size:1rem;
    line-height:1.5;
    outline:none;
    resize:vertical;
    transition:border-color .3s,box-shadow .3s,background .3s;
}

.contact-form input:focus,
.contact-form textarea:focus,
.track-problem select:focus,
.track-problem textarea:focus{
    background:#fff;
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(185,139,78,.14);
}

.contact-error{
    min-height:20px;
    margin:10px 0 6px;
    color:var(--danger);
    font-size:.9rem;
    line-height:1.4;
}

/* ==========================================
   ACCOUNT
========================================== */

.account-section{
    padding:44px 5% 80px;
}

.account-loading{
    max-width:460px;
    margin:auto;
}

.account-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:30px;
}

.auth-card{
    max-width:460px;
    margin:auto;
}

.account-card h2{
    font-size:1.8rem;
    margin-bottom:6px;
}

.account-grid{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:24px;
    max-width:1100px;
    margin:auto;
    align-items:start;
}

.auth-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    padding:4px;
    margin-bottom:10px;
    border-radius:40px;
    background:var(--bg-soft);
}

.auth-tabs button{
    padding:11px;
    border-radius:40px;
    font-size:.78rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    transition:background .3s,color .3s;
}

.auth-tabs button.active{
    background:var(--surface);
    color:var(--accent);
    box-shadow:var(--shadow-sm);
}

.auth-form label{
    display:block;
    margin:16px 0 7px;
    font-size:.74rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.auth-form input{
    width:100%;
    height:48px;
    padding:0 16px;
    border-radius:10px;
    background:var(--bg-soft);
    color:var(--text);
    border:1px solid var(--line);
    font-family:inherit;
    font-size:1rem;
    outline:none;
    transition:border-color .3s,box-shadow .3s,background .3s;
}

.auth-form input:focus{
    background:#fff;
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(185,139,78,.14);
}

.auth-form input:disabled{
    opacity:.7;
}

.auth-form .btn{
    width:100%;
    margin-top:22px;
}

.link-btn{
    display:block;
    margin:16px auto 0;
    font-size:.9rem;
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:3px;
}

.auth-note{
    margin-top:14px;
    font-size:.84rem;
    line-height:1.5;
    text-align:center;
}

.auth-note a{
    color:var(--accent);
    text-decoration:underline;
}

.auth-message{
    min-height:20px;
    margin-top:14px;
    font-size:.92rem;
    line-height:1.5;
    color:var(--danger);
    text-align:center;
}

.auth-message:empty{
    min-height:0;
    margin:0;
}

.auth-message.success{
    color:var(--success);
}

.account-empty{
    margin:10px 0 18px;
}

.my-order{
    padding:16px 0;
    border-bottom:1px solid var(--line);
}

.my-order:last-child{
    border-bottom:none;
}

.my-order-top,
.my-order-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.my-order p{
    margin:6px 0;
    color:var(--text);
}

.my-order-foot{
    font-size:.88rem;
    color:var(--muted);
}

.my-order-foot a{
    color:var(--accent);
    text-decoration:underline;
}

.my-order-foot strong{
    color:var(--text);
    font-size:1rem;
}

.my-order-status{
    padding:4px 12px;
    border-radius:40px;
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    background:var(--bg-deep);
}

.my-order-status.status-placed{ background:#f6dfa8; color:#5b3d05; }
.my-order-status.status-confirmed{ background:#cfe0f5; color:#173e6b; }
.my-order-status.status-shipped{ background:#ddd3f3; color:#3d2578; }
.my-order-status.status-delivered{ background:#cdebd8; color:#14532d; }
.my-order-status.status-rejected,
.my-order-status.status-cancelled,
.my-order-status.status-returned{ background:#f3d2cd; color:#7a1f15; }

.my-order-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 14px;
    margin-top:8px;
}

.my-order-actions .link-btn{
    margin:0;
    color:var(--danger);
}

.my-order-actions .link-btn:disabled{
    opacity:.5;
    cursor:wait;
}

.my-order-message{
    font-size:.86rem;
    line-height:1.4;
    color:var(--danger);
}

/* ==========================================
   TRACK ORDER
========================================== */

.track-form{
    max-width:520px;
    margin-top:0;
}

.track-form .btn{
    width:100%;
}

.track-hint{
    margin-top:16px;
    font-size:.86rem;
    line-height:1.55;
}

.track-hint a,
.track-help a{
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:3px;
}

.track-result{
    max-width:520px;
    margin:24px auto 0;
}

.track-card{
    padding:28px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
}

.track-id{
    font-size:1.1rem;
    letter-spacing:.06em;
}

.track-date{
    margin-top:4px;
    font-size:.88rem;
}

.track-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin:26px 0 18px;
    list-style:none;
}

.track-steps li{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
    color:var(--muted);
}

/* The line joining one step to the next */

.track-steps li + li::before{
    content:"";
    position:absolute;
    top:19px;
    right:50%;
    width:100%;
    height:2px;
    background:var(--line);
}

.track-steps li.done + li.done::before{
    background:var(--gold);
}

.track-dot{
    position:relative;
    z-index:1;
    width:40px;
    height:40px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:.9rem;
    background:var(--bg-deep);
    border:2px solid var(--line);
}

.track-steps li.done .track-dot{
    background:var(--fill);
    border-color:transparent;
    color:var(--on-fill);
}

.track-steps li.current .track-dot{
    box-shadow:0 0 0 5px rgba(185,139,78,.2);
}

.track-step-name{
    font-size:.68rem;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.track-steps li.done .track-step-name{
    color:var(--text);
}

.track-message{
    margin:6px 0 16px;
    color:var(--text);
}

.track-parcel{
    width:100%;
    margin-bottom:18px;
}

/* Reviews on a product page */

.reviews-section{
    padding:60px 5% 30px;
    scroll-margin-top:calc(var(--header-h) + 20px);
}

.review-summary{
    max-width:760px;
    margin:0 auto 24px;
    text-align:center;
    line-height:1.6;
}

.review-summary i,
.review-stars i{
    color:#e0a526;
    font-size:.9rem;
}

.review-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:16px;
    max-width:1100px;
    margin:0 auto;
}

.review-card{
    padding:20px 22px;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:var(--surface);
    overflow-wrap:anywhere;
}

.review-card p{
    margin:10px 0 12px;
    line-height:1.6;
    color:var(--text);
}

.review-card small{
    display:block;
    margin-top:8px;
    color:var(--muted);
    font-size:.84rem;
}

/* Rating a piece, under a delivered order */

.track-items .summary-row{
    align-items:center;
    gap:10px;
}

.track-rate{
    margin:0;
    white-space:nowrap;
    font-size:.86rem;
}

.track-reviewed{
    white-space:nowrap;
    font-size:.86rem;
    color:var(--muted);
}

.track-reviewed i{
    color:#e0a526;
}

.star-choice{
    display:flex;
    gap:6px;
}

.star-choice button{
    width:44px;
    height:44px;
    border-radius:10px;
    border:1px solid var(--line);
    background:var(--bg-soft);
    font-size:1.25rem;
    color:var(--muted);
    transition:color .2s,border-color .2s,transform .2s var(--ease);
}

.star-choice button.lit{
    color:#e0a526;
    border-color:#e0a526;
}

.star-choice button:active{
    transform:scale(.92);
}

.track-review .optional{
    text-transform:none;
    letter-spacing:0;
    color:var(--muted);
}

/* Report a problem, under a shipped or delivered order */

.track-problem{
    margin-top:14px;
    padding-top:4px;
    border-top:1px solid var(--line);
}

.track-problem .btn{
    width:100%;
}

.track-problem-done{
    margin-top:16px;
    padding:16px 18px;
    border-radius:12px;
    border:1px solid var(--line);
    background:var(--bg-soft);
    line-height:1.55;
}

.track-problem-done p + p{
    margin-top:8px;
}

.track-problem-done .fa-circle-check{
    margin-right:4px;
    color:var(--success);
}

.track-problem-done .btn{
    width:100%;
    margin-top:14px;
}

.track-items{
    padding-top:14px;
    border-top:1px solid var(--line);
}

.track-items .summary-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:5px 0;
    color:var(--text);
}

.track-items .summary-total{
    margin-top:8px;
    padding-top:12px;
    border-top:1px solid var(--line);
    font-size:.92rem;
}

.track-items .summary-total strong{
    font-size:1.15rem;
    color:var(--accent);
}

.track-place{
    margin-top:14px;
    font-size:.9rem;
}

.track-place i{
    margin-right:6px;
    color:var(--gold);
}

.track-cancel{
    margin-top:14px;
}

.track-help{
    margin-top:12px;
    font-size:.88rem;
}

/* ==========================================
   QUESTIONS & ANSWERS
========================================== */

.faq-card h2{
    margin-bottom:8px;
}

.faq-item{
    border-bottom:1px solid var(--line);
}

.faq-item:last-child{
    border-bottom:none;
}

.faq-item summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:16px 0;
    font-weight:500;
    line-height:1.4;
    color:var(--text);
    cursor:pointer;
    list-style:none;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary::after{
    content:"+";
    flex:none;
    width:28px;
    height:28px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:1.1rem;
    color:var(--accent);
    background:var(--bg-deep);
    transition:transform .3s var(--ease),background .3s,color .3s;
}

.faq-item[open] summary::after{
    content:"−";
    background:var(--accent);
    color:#fff;
}

.faq-item summary:hover{
    color:var(--accent);
}

.faq-item summary:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
    border-radius:6px;
}

.faq-item p{
    padding:0 44px 18px 0;
}

.faq-item p a{
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:3px;
}

.faq-more{
    text-align:center;
    margin-top:36px;
}

.faq-more p{
    margin-bottom:14px;
    font-family:var(--font-head);
    font-size:1.5rem;
    color:var(--text);
}

/* ==========================================
   PAGE NOT FOUND
========================================== */

.notfound-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
}

.notfound-actions .btn{
    margin-top:0;
}

/* ==========================================
   POLICIES
========================================== */

.policy-section{
    max-width:860px;
    margin:auto;
    padding:40px 5% 80px;
}

.policy-nav{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:28px;
}

.policy-nav a{
    padding:9px 20px;
    border-radius:40px;
    border:1px solid var(--line);
    background:var(--surface);
    font-size:.78rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    transition:border-color .3s,color .3s;
}

.policy-nav a:hover{
    border-color:var(--accent);
    color:var(--accent);
}

.policy-card{
    margin-bottom:20px;
    padding:30px 32px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    scroll-margin-top:calc(var(--header-h) + 20px);
}

.policy-card h2{
    font-size:2rem;
    margin-bottom:14px;
}

.policy-card h3{
    font-family:var(--font-body);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--gold);
    margin:20px 0 8px;
}

.policy-card ul{
    list-style:disc;
    padding-left:20px;
}

.policy-card li{
    margin-bottom:9px;
    line-height:1.65;
    color:var(--text);
}

.policy-card a{
    color:var(--accent);
    text-decoration:underline;
}

.policy-lead{
    margin-bottom:12px;
    color:var(--text);
    font-size:1.05rem;
}

.policy-updated{
    margin-top:18px;
    font-size:.85rem;
}

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

@media(max-width:992px){

    .about-values,
    .contact-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .page-hero{
        padding:44px 20px 40px;
    }

    /* Smaller and fainter, so the words stay easy to read */

    .page-hero::before{
        left:-34px;
        width:150px;
        height:125px;
        opacity:.34;
    }

    .page-hero::after{
        right:-22px;
        width:124px;
        height:108px;
        opacity:.34;
    }

    .shop-section{
        padding:30px 12px 60px;
    }

    .related-section{
        padding:44px 12px 60px;
    }

    .about-section,
    .contact-section{
        padding:44px 18px 60px;
    }

    .about-story p:first-of-type{
        font-size:1.4rem;
    }

    .contact-form{
        padding:24px 18px;
    }

    .account-section{
        padding:28px 14px 60px;
    }

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

    .account-card{
        padding:24px 18px;
    }

    .policy-section{
        padding:28px 14px 60px;
    }

    .policy-card{
        padding:24px 18px;
    }

    .shop-toolbar{
        padding-inline:4px;
    }

    .shop-sort span{
        display:none;
    }

}