/*
Theme Name: BELARA Atelier Child
Theme URI: https://belara-sa.com/
Description: Official child theme for BELARA Atelier.
Author: BELARA
Template: belara-atelier-v2-safe
Version: 2.0.0
Text Domain: belara-atelier-child
*/

/* ==========================================================
   BELARA ATELIER — GLOBAL DESIGN FOUNDATION V2.0
   ========================================================== */


/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */

:root {
    --belara-chocolate: #2A1210;
    --belara-mocha: #6B4636;
    --belara-soft-mocha: #B28A78;
    --belara-pink: #F6D8D8;
    --belara-cream: #FFF7EF;
    --belara-gold: #C9A35B;

    --belara-text: #2A1210;
    --belara-muted: #756A66;
    --belara-white: #FFFFFF;
    --belara-border: rgba(42, 18, 16, 0.10);

--belara-font-ar:
    "Almarai",
    sans-serif;

--belara-font-en:
    "Almarai",
    sans-serif;
}


/* ==========================================================
   2. RESET / BASE
   ========================================================== */

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;

    color: var(--belara-text);
    background: var(--belara-cream);

    font-family: var(--belara-font-ar);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
}

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

button,
input,
select,
textarea {
    font: inherit;
}


/* ==========================================================
   3. ARABIC / ENGLISH TYPOGRAPHY
   ========================================================== */

html[dir="rtl"] body,
html[lang="ar"] body,
body.rtl {
    font-family: var(--belara-font-ar);
}

:lang(ar) {
    font-family: var(--belara-font-ar);
}

:lang(en) {
    font-family: var(--belara-font-en);
}


/* ==========================================================
   4. HEADINGS
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.entry-title,
.section-title,
.woocommerce-products-header__title {
    margin-top: 0;

    color: var(--belara-chocolate);

    font-family: var(--belara-font-ar);
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
}

h1,
.page-title,
.entry-title {
    font-weight: 600;
    line-height: 1.22;
}

h2,
.section-title {
    font-weight: 600;
    line-height: 1.30;
}

h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.4;
}


/* ==========================================================
   5. BODY TEXT
   ========================================================== */

p {
    margin-top: 0;
    line-height: 1.75;
}

small {
    line-height: 1.6;
}


/* ==========================================================
   6. HEADER / NAVIGATION TYPOGRAPHY
   ========================================================== */

.belara2-header,
.belara2-header a,
.belara2-nav-row,
.belara2-nav-row a,
.belara-nav,
.belara-nav a,
.main-navigation,
.main-navigation a,
nav,
nav a {
    font-family: var(--belara-font-ar);
}

.belara2-nav-row a,
.belara-nav a,
.main-navigation a {
    font-weight: 500;
    letter-spacing: 0;
}


/* ==========================================================
   7. BUTTON FOUNDATION
   ========================================================== */

button,
.button,
.btn,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    font-family: var(--belara-font-ar);
    font-weight: 600;

    letter-spacing: 0;
    text-transform: none;

    cursor: pointer;
}


/* ==========================================================
   8. FORMS
   ========================================================== */

input,
textarea,
select,
option,
label {
    font-family: var(--belara-font-ar);
}

input,
textarea,
select {
    color: var(--belara-text);
}

input::placeholder,
textarea::placeholder {
    color: var(--belara-muted);
    opacity: 1;
}


/* ==========================================================
   9. WOOCOMMERCE PRODUCT TYPOGRAPHY
   ========================================================== */

.woocommerce-loop-product__title,
.belara-product-title,
.product-title,
.wd-entities-title {
    font-family: var(--belara-font-ar);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
}

.belara-product-title {
    margin: 0;
}

.belara-product-title-ar,
.belara-product-title-en,
.belara-product-title-single {
    display: block;
}

.belara-product-title-ar {
    font-family: var(--belara-font-ar);
    font-weight: 500;
}

.belara-product-title-en {
    margin-top: 3px;

    font-family: var(--belara-font-en);
    font-weight: 400;
    line-height: 1.35;

    direction: ltr;
}

.belara-product-title-single {
    font-weight: 500;
}


/* ==========================================================
   10. PRICE
   ========================================================== */

.price,
.woocommerce-Price-amount,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.belara2-price {
    font-family: var(--belara-font-ar);
    font-weight: 600;
}


/* ==========================================================
   11. BREADCRUMBS / META
   ========================================================== */

.woocommerce-breadcrumb,
.breadcrumb,
.product_meta,
.product-meta {
    font-family: var(--belara-font-ar);
    font-weight: 400;

    color: var(--belara-muted);
}


/* ==========================================================
   12. BELARA BRAND TYPOGRAPHY
   ========================================================== */

.belara2-wordmark-ar {
    font-family: var(--belara-font-ar);
    font-weight: 600;
}

.belara2-wordmark-en {
    font-family: var(--belara-font-en);
    font-weight: 700;
}

.belara2-wordmark-divider {
    color: var(--belara-gold);
}


/* ==========================================================
   13. HERO TYPOGRAPHY FOUNDATION
   ========================================================== */

.belara2-hero-copy h1 {
    color: var(--belara-chocolate);

    font-family: var(--belara-font-ar);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
}

.belara2-hero-copy p {
    font-weight: 400;
    line-height: 1.75;
}

.belara2-eyebrow,
.belara2-hero-copy .belara2-eyebrow {
    color: var(--belara-gold);

    font-family: var(--belara-font-ar);
    font-weight: 500;
}


/* ==========================================================
   14. SECTION TITLES
   ========================================================== */

.belara2-section-title,
.belara2-section > h2,
.belara2-categories > h2 {
    color: var(--belara-chocolate);

    font-family: var(--belara-font-ar);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}


/* ==========================================================
   15. CATEGORY CARDS
   ========================================================== */

.belara2-category-card,
.belara2-category-card h3,
.belara2-category-card strong {
    font-family: var(--belara-font-ar);
}

.belara2-category-card h3,
.belara2-category-card strong {
    font-weight: 600;
}


/* ==========================================================
   16. ACCESSIBILITY / FOCUS
   ========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--belara-gold);
    outline-offset: 3px;
}


/* ==========================================================
   17. MOBILE TYPOGRAPHY FOUNDATION
   ========================================================== */

@media (max-width: 767px) {

    body {
        font-size: 15px;
        line-height: 1.65;
    }

    h1,
    .page-title,
    .entry-title {
        font-size: 30px;
        font-weight: 600;
        line-height: 1.25;
    }

    h2,
    .section-title,
    .belara2-section-title,
    .belara2-section > h2 {
        font-size: 23px;
        font-weight: 600;
        line-height: 1.35;
    }

    h3 {
        font-size: 18px;
    }

    .woocommerce-loop-product__title,
    .belara-product-title,
    .product-title {
        font-size: 14px;
        line-height: 1.5;
    }

    .belara-product-title-en {
        font-size: 12px;
    }
}


/* ==========================================================
   END — BELARA GLOBAL FOUNDATION
   ========================================================== */
  /* ==========================================================
   BELARA — Hero brand eyebrow
   ========================================================== */

.belara2-hero-copy .belara2-eyebrow.belara2-hero-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    white-space: nowrap;
    direction: rtl;
}

.belara2-hero-copy .belara2-hero-brand-ar {
    color: #6B4636;
    font-family: "Almarai", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.belara2-hero-copy .belara2-hero-brand-en {
    color: #2A1210;
    font-family: var(--belara-font-en);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
}

.belara2-hero-copy .belara2-hero-brand-divider {
    color: #C9A35B;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

@media (min-width: 1024px) {

    .belara2-hero-copy .belara2-eyebrow.belara2-hero-brand {
        gap: 11px;
        margin-bottom: 17px;
        direction: rtl;
        align-items: center;
    }

    .belara2-hero-copy .belara2-hero-brand-ar {
        font-size: 21px;
        font-weight: 700;
        color: #6B4636;
        line-height: 1;
    }

    .belara2-hero-copy .belara2-hero-brand-en {
        font-size: 21px;
        font-weight: 700;
        color: #2A1210;
        letter-spacing: 0.08em;
        line-height: 1;
    }

    .belara2-hero-copy .belara2-hero-brand-divider {
        font-size: 22px;
        font-weight: 400;
        color: #B88932;
        line-height: 1;
        transform: translateY(-1px);
    }
}

/* =========================================================
   BELARA NON-VAT VISUAL SAFETY V1

   Defensive only:
   old cached/custom VAT notes must never appear.
   ========================================================= */

.belara2-tax-note,
.belara-tax-note,
.woocommerce-price-suffix {
    display: none !important;
}


/* BELARA NON-VAT VISUAL SAFETY V1 */