:root{
    --ivory:#F4EFE5;
    --ivory-card:#FBF7EF;
    --espresso:#2C1E15;
    --espresso-soft:#4A3524;
    --gold:#B0842A;
    --gold-lite:#D9B14E;
    --gold-deep:#8A6414;
    --muted:#7A6552;
    --line:#D8CDBA;
    --gold-grad:linear-gradient(135deg,#E4C25C 0%,#B8891F 55%,#8A6414 100%);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--ivory);
    color:var(--espresso);
    font-family:'Jost',sans-serif;
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .serif{font-family:'Cormorant Garamond',serif;}
  .gold-text{
    background:var(--gold-grad);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:var(--gold-deep);
  }
  .eyebrow{
    font-family:'Jost',sans-serif;font-weight:400;
    letter-spacing:.32em;text-transform:uppercase;font-size:.72rem;
  }
  .wrap{max-width:1160px;margin:0 auto;padding:0 28px;}

  /* NAV */
  header{
    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(248,245,239,.70);

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(176,132,42,.08);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        height .35s ease;
}

header.scrolled{

    background:rgba(255,255,255,.95);

    box-shadow:0 10px 35px rgba(0,0,0,.06);

    border-bottom:1px solid rgba(176,132,42,.15);
}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--espresso);}
  .brand .mark{width:38px;height:38px;flex:none;}
  .brand .name{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;letter-spacing:.14em;line-height:1;}
  .brand .sub{font-family:'Jost',sans-serif;font-weight:400;font-size:.6rem;letter-spacing:.42em;color:var(--gold-deep);text-transform:uppercase;margin-top:3px;}
  nav.links{display:flex;gap:36px;}
  nav.links a{
    text-decoration:none;color:var(--espresso);font-size:.82rem;letter-spacing:.14em;
    text-transform:uppercase;font-weight:400;position:relative;padding-bottom:4px;
  }
  nav.links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .3s ease;}
  nav.links a:hover::after{width:100%;}
  .menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--espresso);padding:10px;min-width:44px;min-height:44px;}

  /* HERO */
  .hero{position:relative;text-align:center;padding:96px 0 84px;}
  .hero .ornament{width:66px;height:auto;margin:0 auto 26px;display:block;}
  .hero h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(3.4rem,9vw,6.2rem);letter-spacing:.16em;line-height:.98;}
  .hero .boutique{margin-top:6px;letter-spacing:.62em;font-size:clamp(.8rem,2.4vw,1.05rem);font-weight:400;padding-left:.62em;}
  .hero .tag{margin-top:22px;letter-spacing:.34em;font-size:.78rem;color:var(--muted);text-transform:uppercase;}
  .hero .lead{margin:26px auto 0;max-width:560px;font-size:1.06rem;color:var(--espresso-soft);font-weight:300;}
  .hero .lead .ar{font-family:'Tajawal',sans-serif;display:block;margin-top:8px;color:var(--muted);font-size:1rem;}
  .hero .cta{margin-top:38px;}
  .btn{
    display:inline-block;font-family:'Jost',sans-serif;font-weight:400;cursor:pointer;
    letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;text-decoration:none;
    padding:15px 40px;border:none;transition:transform .25s ease,box-shadow .25s ease;
    min-height:44px;line-height:1.1;
  }
  .btn-gold{background:var(--gold-grad);color:#3a2a12;box-shadow:0 8px 22px -12px rgba(138,100,20,.8);}
  .btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(138,100,20,.9);}
  .btn-espresso{background:var(--espresso);color:var(--ivory);}
  .btn-espresso:hover{background:var(--espresso-soft);transform:translateY(-2px);}
  .btn-ghost{background:transparent;border:1px solid var(--espresso);color:var(--espresso);}
  .btn-ghost:hover{background:var(--espresso);color:var(--ivory);}
  .rule-frame{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px auto 0;}
  .rule-frame .l{height:1px;width:52px;background:var(--gold);opacity:.7;}

  /* SECTION HEADS */
  .section{padding:78px 0;}
  .head{text-align:center;margin-bottom:52px;}
  .head .eyebrow{color:var(--gold-deep);}
  .head h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:.04em;margin-top:10px;}
  .head p{color:var(--muted);margin-top:12px;max-width:520px;margin-left:auto;margin-right:auto;}

  /* FILTERS */
  .filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px;}
  .chip{
    font-family:'Jost',sans-serif;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
    padding:9px 20px;border:1px solid var(--line);background:transparent;color:var(--espresso-soft);
    cursor:pointer;transition:all .22s ease;
    min-height:44px;
  }
  .chip:hover{border-color:var(--gold);color:var(--espresso);}
  .chip.active{background:var(--espresso);color:var(--ivory);border-color:var(--espresso);}

  /* PRODUCT GRID */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
  .card{
    background:var(--ivory-card);border:1px solid var(--espresso);
    padding:14px;display:flex;flex-direction:column;
    transition:transform .3s ease,box-shadow .3s ease;position:relative;
  }
  .card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -26px rgba(44,30,21,.55);}
  /* Card link wrapper — the entire card top (photo + info) is one clickable
     anchor. Without these rules the browser paints default blue/underline
     link styling, which was especially visible in the Arabic/RTL view. */
  .card-link{
    text-decoration:none;color:var(--espresso);
    display:flex;flex-direction:column;flex:1;
  }
  .card-link:hover,.card-link:focus,.card-link:visited,.card-link:active{
    text-decoration:none;color:var(--espresso);
  }
  /* Product name inside a card — always espresso, never underlined. */
  .card-link .pname,.card .pname{
    color:var(--espresso);text-decoration:none;
  }
  /* Product price inside a card — gold, never underlined. */
  .card-link .price,.card .price{
    color:var(--gold-deep);text-decoration:none;
  }
  .card-link .price small{color:var(--muted);}
  /* Same guarantees under RTL (Arabic) — no default link styles leak in. */
  [dir="rtl"] .card-link,[dir="rtl"] .card-link:hover,
  [dir="rtl"] .card-link:visited,[dir="rtl"] .card-link .pname{
    color:var(--espresso);text-decoration:none;
  }
  [dir="rtl"] .card-link .price{color:var(--gold-deep);text-decoration:none;}
  .card .photo{
    position:relative;aspect-ratio:4/5;overflow:hidden;background:
      linear-gradient(135deg,#EFE7D6 0%,#E4D8C1 100%);
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line);
  }
  .card .photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
  .card:hover .photo img{transform:scale(1.05);}
  .card .placeholder{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--espresso-soft);opacity:.6;}
  .card .placeholder svg{width:78px;height:78px;}
  .card .placeholder span{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;}
  .card .badge{
    position:absolute;top:10px;left:10px;background:var(--espresso);color:var(--ivory);
    font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;padding:5px 11px;
  }
  .card .body{padding:18px 8px 8px;flex:1;display:flex;flex-direction:column;}
  .card .brand-eyebrow{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);font-weight:400;}
  .card .pname{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;line-height:1.15;margin-top:4px;}
  .card .cond{font-size:.74rem;color:var(--muted);letter-spacing:.05em;margin-top:6px;}
  .card .pricerow{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
  .card .price{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;}
  .card .price small{font-size:.7rem;letter-spacing:.14em;color:var(--muted);font-family:'Jost',sans-serif;}
.card .actions{
    display:none;
}  .card .actions .btn{flex:1;padding:12px;text-align:center;font-size:.72rem;}
  
  /* AUTHENTICITY */
  #authenticity{background:var(--espresso);color:var(--ivory);}
  #authenticity .head h2{color:var(--ivory);}
  #authenticity .head .eyebrow{color:var(--gold-lite);}
  #authenticity .head p{color:#C9B9A6;}
  .promise{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:12px;}
  .promise .item{text-align:center;padding:26px 16px;border:1px solid rgba(217,177,78,.28);}
  .promise .item .ico{width:44px;height:44px;margin:0 auto 16px;}
  .promise .item .ico svg{width:100%;height:100%;stroke:var(--gold-lite);fill:none;stroke-width:1.4;}
  .promise .item h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;margin-bottom:8px;}
  .promise .item p{font-size:.82rem;color:#C9B9A6;line-height:1.55;}

  /* ORDER */
  .order-wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
  .order-intro h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4.5vw,2.9rem);font-weight:600;line-height:1.05;}
  .order-intro .eyebrow{color:var(--gold-deep);}
  .order-intro p{color:var(--muted);margin-top:16px;max-width:400px;}
  .order-intro .stepline{margin-top:28px;display:flex;flex-direction:column;gap:14px;}
  .order-intro .stepline div{display:flex;gap:14px;align-items:flex-start;font-size:.92rem;color:var(--espresso-soft);}
  .order-intro .stepline .n{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--gold-deep);line-height:1;flex:none;width:26px;}
  form.order{background:var(--ivory-card);border:1px solid var(--espresso);padding:32px;}
  form.order label{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--espresso-soft);margin-bottom:7px;margin-top:18px;}
  form.order label:first-child{margin-top:0;}
  form.order input,form.order textarea,form.order select{
    width:100%;background:var(--ivory);border:1px solid var(--line);color:var(--espresso);
    font-family:'Jost',sans-serif;font-size:.95rem;padding:13px 14px;font-weight:300;
    transition:border-color .2s ease;
  }
  form.order input:focus,form.order textarea:focus,form.order select:focus{outline:none;border-color:var(--gold);}
  form.order textarea{resize:vertical;min-height:70px;}
  form.order .btn{width:100%;margin-top:24px;}
  .form-note{font-size:.72rem;color:var(--muted);margin-top:14px;text-align:center;line-height:1.5;}
  .success{
    display:none;text-align:center;padding:40px 20px;border:1px solid var(--gold);background:var(--ivory);
  }
  .success.show{display:block;}
  .success .ico{width:52px;height:52px;margin:0 auto 18px;stroke:var(--gold-deep);fill:none;stroke-width:1.4;}
  .success h3{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;margin-bottom:8px;}
  .success p{color:var(--muted);font-size:.92rem;}

  /* FOOTER */
  footer{background:var(--espresso);color:var(--ivory);padding:56px 0 30px;text-align:center;}
  footer .fmark{width:54px;margin:0 auto 18px;display:block;}
  footer .fname{font-family:'Cormorant Garamond',serif;font-size:1.7rem;letter-spacing:.18em;font-weight:600;}
  footer .fsub{font-size:.64rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-lite);margin-top:6px;}
  footer .flinks{display:flex;gap:26px;justify-content:center;margin:26px 0;flex-wrap:wrap;}
  footer .flinks a{color:#C9B9A6;text-decoration:none;font-size:.82rem;letter-spacing:.1em;transition:color .2s;}
  footer .flinks a:hover{color:var(--gold-lite);}
  footer .fdiv{height:1px;width:100%;max-width:520px;margin:0 auto 22px;background:rgba(217,177,78,.25);}
  footer .fine{font-size:.72rem;color:#9C8C79;letter-spacing:.08em;}

  /* reveal animation */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
  .reveal.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

  /* LANGUAGE SWITCH */
  .lang-switch{display:flex;align-items:center;gap:6px;margin-left:24px;font-family:'Jost',sans-serif;}
  .lang-switch button{
    background:none;border:none;cursor:pointer;font:inherit;
    color:var(--muted);font-size:.78rem;letter-spacing:.14em;
    padding:4px 4px;transition:color .2s ease;
  }
  .lang-switch button.ar-btn{font-family:'Tajawal',sans-serif;font-size:.82rem;letter-spacing:0;line-height:1;}
  .lang-switch button:hover{color:var(--gold-deep);}
  .lang-switch button.active{color:var(--espresso);font-weight:500;}
  .lang-switch .sep{color:var(--line);}

  /* ARABIC / RTL */
  [dir="rtl"] body{font-family:'Tajawal',sans-serif;}
  /* Latin-only elements keep their fonts (brand wordmark, product brand names, prices) */
  [dir="rtl"] .brand .name,[dir="rtl"] .brand .sub,
  [dir="rtl"] .card .brand-eyebrow,[dir="rtl"] .card .price,
  [dir="rtl"] .card .price small,[dir="rtl"] footer .fname,
  [dir="rtl"] footer .fsub,[dir="rtl"] .lang-switch button:not(.ar-btn),
  [dir="rtl"] .chip[data-brand]:not([data-brand="__all__"]){
    font-family:'Jost',sans-serif;
  }
  [dir="rtl"] .brand .name{font-family:'Cormorant Garamond',serif;}
  [dir="rtl"] footer .fname,[dir="rtl"] .card .pname,[dir="rtl"] .card .price,
  [dir="rtl"] .head h2,[dir="rtl"] .hero h1,[dir="rtl"] .order-intro h2,
  [dir="rtl"] .promise .item h3,[dir="rtl"] .success h3{
    /* headings stay in Cormorant except where Arabic content — override selectively */
  }
  /* Arabic headings switch to Tajawal for correct shaping; keep VELOURA/Boutique wordmark serif */
  [dir="rtl"] .head h2,[dir="rtl"] .order-intro h2,
  [dir="rtl"] .promise .item h3,[dir="rtl"] .success h3,
  [dir="rtl"] .card .pname{font-family:'Cormorant Garamond',serif;}
  /* Arabic content that must use Tajawal (headings we translate) */
  [dir="rtl"] .head h2,[dir="rtl"] .order-intro h2,
  [dir="rtl"] .promise .item h3,[dir="rtl"] .success h3{font-family:'Tajawal',sans-serif;font-weight:500;letter-spacing:0;}
  /* Reset letter-spacing where Arabic text lives (breaks Arabic shaping) */
  [dir="rtl"] .eyebrow,[dir="rtl"] nav.links a,
  [dir="rtl"] .btn,[dir="rtl"] .card .cond,
  [dir="rtl"] form.order label,[dir="rtl"] .form-note,
  [dir="rtl"] footer .fine,[dir="rtl"] .hero .tag,
  [dir="rtl"] .hero .boutique,[dir="rtl"] .chip{letter-spacing:0;}
  /* Brand-name chips (English text) keep their spacing */
  [dir="rtl"] .chip[data-brand]:not([data-brand="__all__"]){letter-spacing:.16em;}
  /* Brand eyebrow inside product card stays Latin, keep its tracking */
  [dir="rtl"] .card .brand-eyebrow{letter-spacing:.28em;}
  /* Mirror the product card badge to the top-right */
  [dir="rtl"] .card .badge{left:auto;right:10px;}
  /* Mobile menu on RTL still slides in from below the nav; align padding */
  [dir="rtl"] nav.links.open a{border-top:1px solid var(--line);}
  /* Order intro step numbers: keep the number column on the right */
  [dir="rtl"] .order-intro .stepline .n{text-align:center;}
  /* WhatsApp icon inside the mirrored card action row — no change needed, flex handles it */
  /* Mobile: language switch stays visible next to the menu button */
  @media(max-width:900px){
    .lang-switch{margin-left:auto;margin-right:12px;}
    .lang-switch button{padding:10px 8px;min-width:44px;min-height:44px;font-size:.86rem;}
    .lang-switch button.ar-btn{font-size:.92rem;}
  }

  /* responsive */
  @media(max-width:900px){
    .grid{grid-template-columns:repeat(2,1fr);gap:20px;}
    .promise{grid-template-columns:repeat(2,1fr);}
    .order-wrap{grid-template-columns:1fr;gap:36px;}
    nav.links{display:none;}
    .menu-btn{display:block;}
    nav.links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--ivory);gap:0;border-bottom:1px solid var(--line);}
    nav.links.open a{padding:16px 28px;border-top:1px solid var(--line);}
  }
  @media(max-width:560px){
    .grid{grid-template-columns:1fr;}
    .promise{grid-template-columns:1fr;}
    .wrap{padding:0 20px;}
    .hero{padding:64px 0 56px;}
  }


  /* ===========================================================
     PRODUCT DETAIL PAGE (product.html)
     =========================================================== */
  .product-page{padding:56px 0 80px;}
  .back-link{
    display:inline-block;font-family:'Jost',sans-serif;font-size:.78rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--espresso-soft);text-decoration:none;margin-bottom:36px;
    padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;
  }
  .back-link:hover{color:var(--gold-deep);border-color:var(--gold);}
  [dir="rtl"] .back-link{letter-spacing:0;}

  .product-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
  .gallery .main-photo{
    aspect-ratio:4/5;background:var(--ivory-card);border:1px solid var(--espresso);
    overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;
  }
  .gallery .main-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .gallery .thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
  .gallery .thumb{
    width:72px;height:90px;border:1px solid var(--line);background:var(--ivory-card);
    cursor:pointer;overflow:hidden;flex:none;padding:0;
  }
  .gallery .thumb.active{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);}
  .gallery .thumb img{width:100%;height:100%;object-fit:cover;display:block;}

  .info .brand-eyebrow{
    font-family:'Jost',sans-serif;font-size:.78rem;letter-spacing:.28em;
    text-transform:uppercase;color:var(--gold-deep);
  }
  .info h1.pname{
    font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4.2vw,2.9rem);
    font-weight:600;line-height:1.1;margin-top:8px;letter-spacing:.02em;
  }
  .info .cond{font-size:.9rem;color:var(--muted);letter-spacing:.04em;margin-top:14px;}
  .info .price-row{
    display:flex;align-items:baseline;gap:10px;margin-top:24px;padding-top:22px;
    border-top:1px solid var(--line);
  }
  .info .price-row .price{font-family:'Cormorant Garamond',serif;font-size:2.1rem;font-weight:600;}
  .info .price-row .unit{font-size:.86rem;letter-spacing:.14em;color:var(--muted);font-family:'Jost',sans-serif;}
  .info .description{
    color:var(--espresso-soft);margin-top:26px;font-size:1rem;line-height:1.75;max-width:520px;
  }
  [dir="rtl"] .info .description{font-family:'Tajawal',sans-serif;}
  .product-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;}
  .product-actions .btn{padding:15px 30px;}
  .btn-wa-full{
    background:#128C7E;color:#fff;display:inline-flex;align-items:center;gap:10px;
  }
  .btn-wa-full:hover{background:#0f7568;transform:translateY(-2px);}
  .btn-wa-full svg{width:18px;height:18px;fill:#fff;}

  .order-section{margin-top:88px;padding-top:60px;border-top:1px solid var(--line);}
  .order-section .head{margin-bottom:44px;}
  .order-section form.order input[readonly]{
    background:#EFE7D6;color:var(--espresso-soft);cursor:default;
  }

  .not-found{text-align:center;padding:90px 0 60px;}
  .not-found h1{
    font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:600;margin-bottom:14px;
  }
  .not-found p{color:var(--muted);max-width:440px;margin:0 auto 30px;}

  @media(max-width:900px){
    .product-wrap{grid-template-columns:1fr;gap:34px;}
    .info h1.pname{font-size:2.1rem;}
    .product-actions .btn{flex:1;text-align:center;}
  }


  /* ===========================================================
     ORDER MODAL (product page)
     A centered popup that opens when "Order this bag" is clicked.
     Overlay dims the page; ESC / backdrop / X all close it.
     =========================================================== */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(44,30,21,.62);
    display:flex;align-items:center;justify-content:center;
    z-index:100;padding:20px;
    opacity:0;pointer-events:none;
    transition:opacity .25s ease;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  }
  .modal-overlay.open{opacity:1;pointer-events:auto;}
  .modal-overlay[hidden]{display:none;}
  .modal{
    background:var(--ivory);border:1px solid var(--espresso);
    max-width:480px;width:100%;max-height:90vh;overflow-y:auto;
    padding:36px 32px 32px;position:relative;
    transform:translateY(20px);transition:transform .3s ease;
  }
  .modal-overlay.open .modal{transform:translateY(0);}
  .modal-close{
    position:absolute;top:14px;right:14px;
    background:none;border:none;color:var(--espresso);
    cursor:pointer;padding:6px;line-height:0;
    transition:color .2s ease;
  }
  .modal-close:hover{color:var(--gold-deep);}
  [dir="rtl"] .modal-close{right:auto;left:14px;}
  .modal-header{text-align:center;margin-bottom:22px;}
  .modal-header .eyebrow{color:var(--gold-deep);letter-spacing:.32em;font-size:.72rem;text-transform:uppercase;}
  [dir="rtl"] .modal-header .eyebrow{letter-spacing:0;}
  .modal-header h2{
    font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;
    letter-spacing:.03em;margin-top:10px;
  }
  [dir="rtl"] .modal-header h2{font-family:'Tajawal',sans-serif;letter-spacing:0;}
  /* Reuse the existing form styling, but the modal already has its own frame */
  .modal form.order{background:transparent;border:none;padding:0;}
  .modal .success{border:none;background:transparent;padding:26px 0 6px;}
  body.modal-open{overflow:hidden;}

  @media(max-width:560px){
    .modal{padding:28px 22px 24px;}
    .modal-header h2{font-size:1.6rem;}
  }

  /* ===========================================================
     INLINE VALIDATION (order form)
     Warm rust-red that lives inside the espresso/ivory palette.
     Shown only after the field is touched (JS toggles .show / .invalid).
     =========================================================== */
  .field-error{
    display:none;
    font-size:.74rem;line-height:1.45;color:#B14A2E;
    letter-spacing:.02em;margin-top:6px;
  }
  .field-error.show{display:block;}
  [dir="rtl"] .field-error{
    letter-spacing:0;font-family:'Tajawal',sans-serif;text-align:right;
  }
  form.order input.invalid{
    border-color:#B14A2E;
    background:#FBEEE8;
  }
  form.order input.invalid:focus{
    outline:none;border-color:#B14A2E;
    box-shadow:0 0 0 2px rgba(177,74,46,.10);
  }

  /* ===========================================================
     ANNOUNCEMENT BAR (top of every page)
     =========================================================== */
  .ann-bar{
    background:var(--espresso);color:var(--ivory);
    text-align:center;padding:9px 20px;position:relative;overflow:hidden;
    height:36px;font-family:'Jost',sans-serif;font-size:.72rem;
    letter-spacing:.22em;text-transform:uppercase;line-height:18px;
  }
  .ann-slide{
    position:absolute;inset:9px 20px auto 20px;
    opacity:0;transition:opacity .55s ease;
  }
  .ann-slide.active{opacity:1;}
  [dir="rtl"] .ann-bar{
    letter-spacing:0;font-family:'Tajawal',sans-serif;text-transform:none;
    font-size:.82rem;
  }
  @media(max-width:560px){
    .ann-bar{font-size:.66rem;letter-spacing:.16em;}
  }

  /* ===========================================================
     TRUST HIGHLIGHTS (below hero on homepage)
     =========================================================== */
  .trust-highlights{
    display:flex;gap:44px;justify-content:center;flex-wrap:wrap;
    padding:34px 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,rgba(251,247,239,.55),transparent);
  }
  .trust-hi{
    display:flex;align-items:center;gap:12px;
    font-family:'Jost',sans-serif;font-size:.82rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--espresso);
  }
  [dir="rtl"] .trust-hi{
    letter-spacing:0;font-family:'Tajawal',sans-serif;
    font-size:.92rem;text-transform:none;
  }
  .trust-hi svg{
    width:22px;height:22px;stroke:var(--gold-deep);fill:none;stroke-width:1.4;flex:none;
  }
  @media(max-width:700px){
    .trust-highlights{gap:16px;flex-direction:column;align-items:center;text-align:center;}
  }

  /* ===========================================================
     PRODUCT TRUST BADGES (on product detail page)
     =========================================================== */
  .product-trust{
    display:flex;flex-wrap:wrap;gap:18px;
    margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  }
  .product-trust .trust-item{
    display:flex;align-items:center;gap:8px;
    font-family:'Jost',sans-serif;font-size:.74rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--espresso-soft);
  }
  [dir="rtl"] .product-trust .trust-item{
    letter-spacing:0;font-family:'Tajawal',sans-serif;
    font-size:.86rem;text-transform:none;
  }
  .product-trust .trust-item svg{
    width:15px;height:15px;stroke:var(--gold-deep);fill:none;stroke-width:1.6;flex:none;
  }

  /* ===========================================================
     FAQ ACCORDION
     =========================================================== */
  .faq-list{max-width:760px;margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item:first-child{border-top:1px solid var(--line);}
  .faq-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
    background:none;border:none;cursor:pointer;padding:22px 6px;
    font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:500;
    color:var(--espresso);text-align:left;letter-spacing:.02em;
    transition:color .2s ease;
  }
  .faq-q:hover{color:var(--gold-deep);}
  [dir="rtl"] .faq-q{
    text-align:right;font-family:'Tajawal',sans-serif;
    font-size:1.02rem;letter-spacing:0;
  }
  .faq-chevron{width:18px;height:18px;color:var(--gold-deep);transition:transform .3s ease;flex:none;}
  .faq-item.open .faq-chevron{transform:rotate(180deg);}
  [dir="rtl"] .faq-item.open .faq-chevron{transform:rotate(-180deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease;}
  .faq-item.open .faq-a{max-height:400px;}
  .faq-a p{
    padding:0 6px 24px;color:var(--espresso-soft);
    font-size:.98rem;line-height:1.7;max-width:640px;
  }
  [dir="rtl"] .faq-a p{font-family:'Tajawal',sans-serif;}

  /* ===========================================================
     ABOUT PAGE
     =========================================================== */
  .about-page{padding:96px 0 84px;}
  .about-page .head{margin-bottom:44px;}
  .about-page .head h1{
    font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,5vw,3.2rem);
    font-weight:600;letter-spacing:.04em;margin-top:12px;
  }
  [dir="rtl"] .about-page .head h1{
    font-family:'Tajawal',sans-serif;font-weight:500;letter-spacing:0;
  }
  .about-body{max-width:720px;margin:0 auto;text-align:center;}
  .about-body p{
    font-size:1.08rem;line-height:1.85;color:var(--espresso-soft);
  }
  [dir="rtl"] .about-body p{
    font-family:'Tajawal',sans-serif;font-size:1.1rem;line-height:1.95;
  }

  /* ===========================================================
     KEYBOARD FOCUS RINGS (elegant, no visual noise for mouse users)
     :focus-visible is only shown for keyboard navigation.
     =========================================================== */
  a:focus,button:focus,input:focus,textarea:focus,select:focus,[tabindex]:focus{outline:none;}
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible{
    outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:1px;
  }
  form.order input:focus-visible,
  form.order textarea:focus-visible{
    outline:2px solid var(--gold-deep);outline-offset:2px;
  }
  .lang-switch button:focus-visible{
    outline:2px solid var(--gold-deep);outline-offset:2px;
  }
  .modal-close:focus-visible,
  .faq-q:focus-visible{
    outline:2px solid var(--gold-deep);outline-offset:2px;
  }

  /* ===========================================================
     REDUCED MOTION — respect the OS setting.
     =========================================================== */
  @media (prefers-reduced-motion: reduce){
    .reveal,.card,.card:hover,.btn,.btn-gold,.btn-espresso,.btn-ghost,
    .modal-overlay,.modal,.ann-slide,.faq-chevron,.faq-a{
      transition:none !important;transform:none !important;animation:none !important;
    }
    .reveal{opacity:1 !important;}
    html{scroll-behavior:auto;}
  }

  /* ===========================================================
     MOBILE SPACING — roomier padding, no edge-crowding
     =========================================================== */
  @media(max-width:900px){
    /* Ensure text never touches the edge */
    .wrap{padding:0 24px;}
    .section{padding:64px 0;}
    /* Nav opens with roomier link spacing */
    nav.links.open a{padding:20px 28px;font-size:.9rem;letter-spacing:.16em;min-height:52px;display:flex;align-items:center;}
    /* Modal fits mobile viewport more comfortably */
    .modal{max-height:88vh;padding:44px 24px 26px;}
    .modal-close{top:10px;right:10px;padding:10px;min-width:44px;min-height:44px;}
    [dir="rtl"] .modal-close{left:10px;right:auto;}
  }
  @media(max-width:560px){
    .wrap{padding:0 20px;}
    .section{padding:56px 0;}
    .hero{padding:52px 0 48px;}
    .head{margin-bottom:38px;}
    /* Card action buttons need a proper hit area on a small screen */
    .card .actions .btn{padding:14px 12px;min-height:48px;font-size:.72rem;}
    /* Product page: keep the primary CTA within a thumb reach */
    .product-actions .btn{width:100%;padding:16px 20px;}
    /* Trust rows compress cleanly */
    .product-trust{gap:12px 20px;}
    .trust-highlights{padding:26px 20px;}
    /* Footer breathes on small screens */
    footer{padding:44px 0 26px;}
    footer .flinks{gap:14px 20px;}
  }

  /* ===========================================================
     REDESIGNED FOOTER (statement + nav links + copyright)
     =========================================================== */
  footer .fstatement{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    color:var(--gold-lite);font-size:.98rem;letter-spacing:.16em;
    margin:14px auto 4px;line-height:1.4;
  }
  [dir="rtl"] footer .fstatement{font-family:'Tajawal',sans-serif;letter-spacing:0;font-style:normal;}
  footer .flinks{
    display:flex;gap:26px;justify-content:center;margin:24px 0 18px;flex-wrap:wrap;
  }
  footer .flinks a{
    color:#D9CBB6;text-decoration:none;font-family:'Jost',sans-serif;
    font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
    transition:color .2s;padding:6px 0;min-height:32px;display:inline-block;
  }
  [dir="rtl"] footer .flinks a{letter-spacing:0;font-family:'Tajawal',sans-serif;text-transform:none;font-size:.94rem;}
  footer .flinks a:hover{color:var(--gold-lite);}
  footer .fine{font-size:.72rem;color:#A79684;letter-spacing:.14em;}
  [dir="rtl"] footer .fine{letter-spacing:0;font-family:'Tajawal',sans-serif;}