:root{--bg:#FAFAF8;--text:#1E1E1E;--silver:#BFC5C9;--dark-silver:#7D858A;--light:#E8EAEC;--white:#fff;--heading:"Cormorant Garamond",Georgia,serif;--body:"Inter",Arial,sans-serif;--container:1280px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.6}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}.container{width:min(calc(100% - 2rem),var(--container));margin-inline:auto}.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.announcement-bar{padding:.65rem 0;background:var(--text);color:#fff;text-align:center;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.site-header{position:sticky;top:0;z-index:50;background:rgba(250,250,248,.96);border-bottom:1px solid var(--light);backdrop-filter:blur(10px)}.site-header__inner{min-height:74px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem}.site-branding{grid-column:2;justify-self:center}.custom-logo{max-height:46px;width:auto}.site-title,.site-footer__brand{font-family:var(--heading);font-size:2rem;letter-spacing:.12em}
.menu-toggle{width:38px;height:38px;display:grid;align-content:center;gap:5px;border:0;background:transparent}.menu-toggle span:not(.screen-reader-text){display:block;width:24px;height:1px;background:var(--text)}.primary-nav{position:fixed;inset:0 auto 0 0;width:min(86vw,360px);padding:7rem 1.5rem 2rem;background:var(--bg);transform:translateX(-100%);transition:.22s;box-shadow:10px 0 30px rgba(0,0,0,.08)}.primary-nav.is-open{transform:none}.primary-nav ul{list-style:none;margin:0;padding:0}.primary-nav li+li{margin-top:1rem}.site-header__actions{display:flex;gap:.8rem;font-size:.8rem}.site-header__actions a:nth-child(-n+2){display:none}.site-header__cart-count{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:var(--text);color:#fff;font-size:.7rem}
.hero{min-height:70vh;display:grid;place-items:center;text-align:center;background:linear-gradient(rgba(250,250,248,.55),rgba(250,250,248,.55)),url("https://tarafjewels.com/wp-content/uploads/woocommerce-placeholder.webp") center/cover}.hero__content{max-width:760px}.eyebrow{margin:0 0 1rem;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase}h1,h2,h3{font-family:var(--heading);line-height:1.08}h1{font-size:clamp(2.7rem,7vw,5.5rem);margin:0 0 1rem}h2{font-size:clamp(2rem,5vw,3.6rem);margin:0}.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2rem}.button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:.8rem 1.4rem;border:1px solid var(--text);border-radius:0;font-weight:600}.button--primary,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{background:var(--text);color:#fff}.section{padding:5rem 0}.section--muted{background:#fff}.section-heading{text-align:center;margin-bottom:2rem}.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.category-card{position:relative;min-height:260px;overflow:hidden;background:var(--light)}.category-card img{width:100%;height:100%;object-fit:cover}.category-card span{position:absolute;inset:auto 0 0;padding:1rem;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-family:var(--heading);font-size:1.5rem}.site-main{padding:3rem 0}.site-footer{padding:5rem 0 1.5rem;background:var(--text);color:#fff}.site-footer__grid{display:grid;gap:2rem}.site-footer ul{list-style:none;padding:0}.site-footer__bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.15)}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.woocommerce ul.products:before,.woocommerce ul.products:after{display:none}.woocommerce ul.products li.product{float:none;width:auto;margin:0}
@media(min-width:900px){.site-header__inner{grid-template-columns:1fr auto 1fr;min-height:84px}.menu-toggle{display:none}.primary-nav{position:static;width:auto;padding:0;transform:none;box-shadow:none;background:transparent}.primary-nav ul{display:flex;gap:1.25rem}.primary-nav li+li{margin-top:0}.site-branding{grid-column:auto}.site-header__actions{justify-self:end}.site-header__actions a:nth-child(-n+2){display:inline}.category-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.category-card{min-height:420px}.site-footer__grid{grid-template-columns:2fr 1fr 1fr}.woocommerce ul.products{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}}

/* Milestone 2 */
.icon-button{display:inline-grid;place-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}
.announcement-bar__inner{display:flex;justify-content:center;gap:2rem}.announcement-bar__secondary{display:none}
.site-header__actions{align-items:center}.site-header__actions .icon-button{width:38px;height:38px}
.mobile-menu-close{position:absolute;top:1.25rem;right:1.25rem;width:38px;height:38px;font-size:2rem;font-weight:300}
.menu-overlay{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.35)}
.search-panel{position:absolute;inset:100% 0 auto;z-index:45;background:var(--bg);border-bottom:1px solid var(--light);opacity:0;transform:translateY(-8px);transition:.18s}
.search-panel.is-open{opacity:1;transform:none}.search-panel__inner{display:flex;align-items:center;gap:1rem;padding:1rem 0}
.search-panel form{display:flex;flex:1}.search-panel input[type=search]{width:100%;min-height:52px;padding:.8rem 1rem;border:1px solid var(--silver);background:#fff}.search-panel .search-submit{min-width:120px;border:1px solid var(--text);background:var(--text);color:#fff}
.search-close{font-size:2rem;width:42px;height:42px}
.hero__lead{max-width:580px;margin-inline:auto;font-size:1.05rem}
.category-card span{display:grid;gap:.1rem}.category-card span strong{font-size:1.55rem;font-weight:600}.category-card span small{font-family:var(--body);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.story-grid{display:grid;gap:2rem;align-items:center}.story-grid__media{min-height:420px;background:var(--light)}.story-grid__media img{width:100%;height:100%;object-fit:cover}.story-grid__content{max-width:620px}.story-grid__content p:not(.eyebrow){font-size:1.05rem;color:#4a4a4a}
.text-link{display:inline-block;margin-top:1rem;padding-bottom:.25rem;border-bottom:1px solid currentColor;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.trust-strip{padding:2.5rem 0;background:var(--text);color:#fff}.trust-grid{display:grid;gap:1.75rem}.trust-grid div{display:grid;gap:.35rem}.trust-grid strong{font-family:var(--heading);font-size:1.35rem}.trust-grid span{font-size:.85rem;color:rgba(255,255,255,.7)}
.newsletter-section{background:#eef0f1}.newsletter-box{max-width:760px;text-align:center}.newsletter-box p{max-width:560px;margin-inline:auto}.newsletter-form{display:flex;max-width:560px;margin:2rem auto .75rem}.newsletter-form input{flex:1;min-width:0;min-height:50px;padding:.75rem 1rem;border:1px solid var(--silver);background:#fff}.newsletter-form button{min-width:130px;border:1px solid var(--text);background:var(--text);color:#fff}.newsletter-box small{color:var(--dark-silver)}
.site-footer__intro p{max-width:320px}.social-links{display:flex;gap:1rem;margin-top:1.25rem}.text-link--light{color:#fff}.site-footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media(min-width:700px){.trust-grid{grid-template-columns:repeat(2,1fr)}.story-grid{grid-template-columns:1.1fr 1fr}.announcement-bar__secondary{display:inline}}
@media(min-width:900px){.mobile-menu-close{display:none}.trust-grid{grid-template-columns:repeat(4,1fr)}.site-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}

/* v1.1.1 desktop header hotfix */
@media (min-width: 900px) {
    .menu-toggle {
        display: none !important;
    }

    .site-header__inner {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-auto-flow: row;
    }

    .primary-nav {
        grid-column: 1;
        justify-self: start;
        min-width: 0;
        white-space: nowrap;
    }

    .primary-nav ul {
        gap: 1rem;
    }

    .site-branding {
        grid-column: 2;
        justify-self: center;
    }

    .site-header__actions {
        grid-column: 3;
        justify-self: end;
    }
}

/* =========================================================
   TARAF v1.2 — simplified responsive header
   ========================================================= */

body.menu-open {
    overflow: hidden;
}

.announcement-bar {
    padding: 0.55rem 0;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

.announcement-bar__secondary {
    display: none !important;
}

.site-header__inner {
    min-height: 68px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 0.5rem;
}

.site-branding {
    grid-column: 2;
    justify-self: center;
}

.custom-logo {
    width: auto;
    max-width: 112px;
    max-height: 34px;
}

.site-title {
    font-size: 1.65rem;
}

.site-header__actions {
    grid-column: 3;
    justify-self: end;
    gap: 0.15rem;
}

.site-header__actions .icon-button {
    position: relative;
    width: 38px;
    height: 38px;
}

.account-link {
    display: none !important;
}

.site-header__cart-count {
    position: absolute;
    top: 1px;
    right: -1px;
    min-width: 17px;
    height: 17px;
    padding-inline: 3px;
    font-size: 0.62rem;
}

.menu-toggle {
    grid-column: 1;
    justify-self: start;
    width: 38px;
    height: 38px;
}

.primary-nav {
    inset: 0;
    z-index: 110;
    width: 100%;
    height: 100dvh;
    padding: 0 1.25rem 2rem;
    overflow-y: auto;
    background: var(--bg);
    box-shadow: none;
}

.mobile-menu__top {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 76px;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    border-bottom: 1px solid var(--light);
    background: var(--bg);
}

.mobile-menu-close {
    position: static;
    grid-column: 1;
    width: 42px;
    height: 42px;
    justify-self: start;
    font-family: Arial, sans-serif;
    font-size: 1.9rem;
    line-height: 1;
}

.mobile-menu__brand {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    max-width: 112px;
}

.mobile-menu__logo {
    width: auto;
    max-width: 112px;
    max-height: 34px;
}

.mobile-menu__top-spacer {
    grid-column: 3;
}

.primary-nav > ul {
    padding: 1.25rem 0 0;
}

.primary-nav li + li {
    margin-top: 0;
}

.primary-nav li {
    border-bottom: 1px solid var(--light);
}

.primary-nav li a {
    min-height: 56px;
    display: flex;
    align-items: center;
    font-family: var(--heading);
    font-size: 1.55rem;
    line-height: 1.15;
}

.mobile-menu__footer {
    display: grid;
    gap: 0.75rem;
    padding: 1.5rem 0;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.menu-overlay {
    display: none !important;
}

.search-panel {
    z-index: 105;
}

.search-panel__inner {
    padding: 0.75rem 0;
}

.search-panel form {
    min-width: 0;
}

.search-panel .search-submit {
    min-width: 86px;
}

@media (min-width: 960px) {
    .announcement-bar {
        font-size: 0.7rem;
    }

    .site-header__inner {
        min-height: 76px;
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr) 150px;
        gap: 1.5rem;
    }

    .menu-toggle {
        display: none !important;
    }

    .site-branding {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .custom-logo {
        max-width: 126px;
        max-height: 38px;
    }

    .primary-nav {
        grid-column: 2;
        grid-row: 1;
        position: static;
        inset: auto;
        z-index: auto;
        width: auto;
        height: auto;
        padding: 0;
        overflow: visible;
        transform: none;
        background: transparent;
        white-space: nowrap;
    }

    .primary-nav > ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: clamp(0.75rem, 1.35vw, 1.5rem);
        padding: 0;
    }

    .primary-nav li {
        border: 0;
    }

    .primary-nav li a {
        min-height: auto;
        display: inline-flex;
        font-family: var(--body);
        font-size: 0.77rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .primary-nav li a:hover,
    .primary-nav .current-menu-item > a {
        text-decoration: underline;
        text-underline-offset: 0.35rem;
        text-decoration-thickness: 1px;
    }

    .mobile-menu__top,
    .mobile-menu__footer {
        display: none;
    }

    .site-header__actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        gap: 0.25rem;
    }

    .account-link {
        display: inline-grid !important;
    }
}


/* =========================================================
   TARAF editorial imagery — v1.4.0
   ========================================================= */

.taraf-home-hero {
    min-height: min(82vh, 900px);
    background-image:
        linear-gradient(rgba(15, 15, 15, 0.24), rgba(15, 15, 15, 0.24)),
        url("https://tarafjewels.com/wp-content/uploads/2026/07/Hero.webp");
    background-position: center;
    background-size: cover;
    color: #ffffff;
}

.taraf-home-hero .hero__content {
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.16);
}

.taraf-home-hero .button--primary {
    border-color: #ffffff;
    background: #ffffff;
    color: #1e1e1e;
    text-shadow: none;
}

.taraf-home-hero .button--secondary {
    border-color: #ffffff;
    color: #ffffff;
    text-shadow: none;
}

.home-editorial-banner {
    min-height: clamp(520px, 70vw, 760px);
    display: grid;
    align-items: end;
    padding: clamp(2rem, 5vw, 4.5rem) 0;
    background:
        linear-gradient(90deg, rgba(15, 15, 15, 0.62), rgba(15, 15, 15, 0.06)),
        url("https://tarafjewels.com/wp-content/uploads/2026/07/Home-Banner.webp")
        center / cover no-repeat;
    color: #ffffff;
}

.home-editorial-banner__inner {
    width: 100%;
}

.home-editorial-banner__content {
    max-width: 560px;
}

.home-editorial-banner__content h2 {
    margin-bottom: 1rem;
}

.home-editorial-banner__content p:not(.eyebrow) {
    margin-bottom: 1.75rem;
    color: rgba(255, 255, 255, 0.88);
}

.button--light {
    border-color: #ffffff;
    background: #ffffff;
    color: #1e1e1e;
}

.story-grid__media img {
    aspect-ratio: 4 / 5;
}

/* About page */
.about-hero {
    min-height: min(76vh, 820px);
    display: grid;
    align-items: end;
    padding: clamp(3rem, 7vw, 6rem) 0;
    background:
        linear-gradient(rgba(15, 15, 15, 0.24), rgba(15, 15, 15, 0.5)),
        url("https://tarafjewels.com/wp-content/uploads/2026/07/About-us-Hero.webp")
        center / cover no-repeat;
    color: #ffffff;
}

.about-hero__content {
    max-width: 780px;
}

.about-hero h1 {
    margin-bottom: 1rem;
}

.about-hero p:not(.eyebrow) {
    max-width: 620px;
    font-size: 1.05rem;
}

.about-intro {
    display: grid;
    gap: 2rem;
}

.about-intro p {
    color: #4f4f4f;
}

.about-image-grid {
    display: grid;
    gap: 1rem;
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.about-image-grid figure {
    min-height: 360px;
    margin: 0;
    overflow: hidden;
    background: var(--light);
}

.about-image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-values {
    background: #eef0f1;
}

.about-values__grid {
    display: grid;
    gap: 1.25rem;
}

.about-values__grid > div {
    padding: 1.5rem;
    background: #ffffff;
}

.about-values__grid strong {
    font-family: var(--heading);
    font-size: 1.45rem;
}

.about-values__grid p {
    margin-bottom: 0;
    color: var(--dark-silver);
}

@media (min-width: 760px) {
    .about-intro {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(3rem, 8vw, 8rem);
        align-items: start;
    }

    .about-image-grid {
        grid-template-columns: 1.35fr 0.65fr;
        grid-template-rows: repeat(2, minmax(280px, 1fr));
    }

    .about-image-grid__large {
        grid-row: 1 / 3;
    }

    .about-values__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}