/* =========================================================
   AWOAD INDIA EST. — additions for the multi-page build
   Loads after styles.css. RTL, products, blog, about, contact.
   ========================================================= */

/* ---------------------------------------------------------
   RTL — logical properties so one rule serves both directions
   --------------------------------------------------------- */
[dir="rtl"] .nav__links{margin-left:0;margin-right:auto}
[dir="rtl"] .nav__actions{margin-left:0;margin-right:12px}
[dir="rtl"] .acc{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:38px}
[dir="rtl"] .people__copy{border-left:0;border-right:1px solid var(--butter);padding-left:0;padding-right:30px}
[dir="rtl"] .btn:hover .arw{transform:translateX(-4px)}
[dir="rtl"] .arw{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .wa{right:auto;left:22px}
[dir="rtl"] .panel__side{border-left:0;border-right:1px solid var(--line)}
[dir="rtl"] .hero__veil{
  background:
    linear-gradient(260deg,rgba(16,10,24,.72) 0%,rgba(16,10,24,.42) 44%,rgba(16,10,24,.06) 76%),
    linear-gradient(rgba(16,10,24,.44),rgba(16,10,24,0) 30%,rgba(16,10,24,.5));
}
[dir="rtl"] .sec--people::after{
  background:linear-gradient(270deg,rgba(16,10,24,.8) 0%,rgba(16,10,24,.34) 42%,rgba(16,10,24,.12) 70%,rgba(16,10,24,.34) 100%);
}
[dir="rtl"] .foot__legal,[dir="rtl"] .cta__row{direction:rtl}

/* Arabic wants a little more line height and no tight tracking */
[lang="ar"] body,[dir="rtl"] body{font-family:"Noto Kufi Arabic","Poppins",sans-serif}
[dir="rtl"] .d1,[dir="rtl"] .d2{letter-spacing:0;line-height:1.28}
[dir="rtl"] .eyebrow{letter-spacing:0}
[dir="rtl"] .brand__word{letter-spacing:0}

/* ---------------------------------------------------------
   Language toggle
   --------------------------------------------------------- */
.lang{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  border-radius:999px;padding:3px;
  box-shadow:inset 0 0 0 1px currentColor;
  font-size:12px;font-weight:500;
}
.lang a{padding:5px 11px;border-radius:999px;opacity:.6;transition:opacity var(--dur) var(--ez),background var(--dur) var(--ez)}
.lang a:hover{opacity:1}
.lang a[aria-current="true"]{opacity:1;background:var(--butter);color:var(--plum)}

/* ---------------------------------------------------------
   Inner page header
   --------------------------------------------------------- */
.phead{padding-top:calc(var(--nav-h) + clamp(56px,8vw,104px));padding-bottom:clamp(40px,5vw,64px);background:var(--bone)}
.phead--dark{background:var(--plum);color:var(--bone)}
.phead__sub{margin-top:20px;max-width:56ch;color:var(--grey);font-size:17px}
.phead--dark .phead__sub{color:rgba(251,248,240,.7)}
.crumb{display:flex;gap:8px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:22px}
.crumb a:hover{opacity:.65}

/* ---------------------------------------------------------
   Product grid — shop style
   --------------------------------------------------------- */
.pgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding-bottom:clamp(72px,10vw,120px);
}
.pcard{
  display:flex;flex-direction:column;
  background:var(--bone);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform var(--dur) var(--ez),box-shadow var(--dur) var(--ez);
}
.pcard:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(36,23,51,.16)}
.pcard__media{aspect-ratio:4/5;overflow:hidden;background:#0B0710}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ez)}
.pcard:hover .pcard__media img{transform:scale(1.04)}
.pcard__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.pcard__form{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
.pcard__name{font-size:25px;font-weight:300;letter-spacing:-.01em;margin-bottom:10px}
.pcard__short{font-size:14.5px;color:var(--grey);margin-bottom:20px;flex:1}
.pcard__cta{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--plum)}
.pcard__cta:hover{color:var(--violet)}

/* ---------------------------------------------------------
   Product detail
   --------------------------------------------------------- */
.pdp{padding-top:calc(var(--nav-h) + 44px);padding-bottom:clamp(72px,10vw,120px)}
.pdp__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.pdp__media{border-radius:18px;overflow:hidden;background:#0B0710;position:sticky;top:calc(var(--nav-h) + 24px)}
.pdp__media img{width:100%;display:block}
.pdp__form{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:18px}
.pdp h1{font-size:clamp(36px,4.6vw,56px);font-weight:200;line-height:1.06;letter-spacing:-.02em;margin-bottom:22px}
.pdp__short{font-size:19px;color:var(--ink);margin-bottom:26px;max-width:46ch}
.pdp__body p{color:var(--grey);font-size:16px;margin-bottom:16px;max-width:52ch}
.notes{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0}
.notes span{
  padding:6px 14px;border-radius:999px;font-size:12.5px;
  background:rgba(185,163,217,.2);color:var(--violet);
}
.usebox{
  margin-top:28px;padding:22px 24px;border-radius:14px;
  background:var(--bone-2);border:1px solid var(--line);
}
.usebox h2,.usebox h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
.usebox p{font-size:15px;color:var(--ink)}
.buybox{
  margin-top:30px;padding:26px;border-radius:16px;
  background:var(--plum);color:var(--bone);
}
.buybox p{font-size:14.5px;color:rgba(251,248,240,.72);margin-bottom:18px}
.buybox__row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------------------------------------------------------
   Blog
   --------------------------------------------------------- */
.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding-bottom:clamp(72px,10vw,120px)}
.bcard{
  display:flex;flex-direction:column;padding:30px 30px 32px;
  background:var(--bone);border:1px solid var(--line);border-radius:16px;
  transition:transform var(--dur) var(--ez),box-shadow var(--dur) var(--ez);
}
.bcard:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(36,23,51,.14)}
.bcard__date{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin-bottom:14px}
.bcard__title{font-size:27px;font-weight:300;line-height:1.16;letter-spacing:-.01em;margin-bottom:12px}
.bcard__ex{font-size:15px;color:var(--grey);flex:1;margin-bottom:18px}

.post{padding-top:calc(var(--nav-h) + 52px);padding-bottom:clamp(72px,10vw,120px)}
.post__inner{max-width:70ch;margin-inline:auto}
.post h1{font-size:clamp(34px,4.4vw,52px);font-weight:200;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}
.post__meta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin-bottom:30px}
.post__body h2{font-size:27px;font-weight:300;margin:38px 0 14px}
.post__body p{font-size:17px;line-height:1.75;color:#3B3444;margin-bottom:18px}
.post__body ul{margin:0 0 20px;padding-inline-start:22px}
.post__body li{font-size:17px;line-height:1.7;color:#3B3444;margin-bottom:8px}

/* ---------------------------------------------------------
   About / contact
   --------------------------------------------------------- */
.prose{max-width:68ch;padding-bottom:clamp(64px,8vw,104px)}
.prose p{font-size:17px;line-height:1.75;color:#3B3444;margin-bottom:18px}
.prose h2{font-size:29px;font-weight:300;margin:40px 0 14px}

.ccards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding-bottom:clamp(64px,8vw,104px)}
.ccard{
  padding:32px 30px 34px;border-radius:16px;
  background:var(--bone);border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.ccard__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:16px}
.ccard h2,.ccard h3{font-size:27px;font-weight:300;margin-bottom:10px}
.ccard p{color:var(--grey);font-size:15px;margin-bottom:22px;flex:1}

/* Phone numbers inside Arabic text.
   Arabic-Indic digits are bidi class AN, which the bidi algorithm reorders
   even inside an LTR isolate: "+٩٦٦ ٥٣ ٥٥٠ ٦٧٩١" came out as
   "+٦٧٩١ ٥٥٠ ٥٣ ٩٦٦". bidi-override forces strict visual order.
   Safe here because the span contains nothing but the number. */
.num{
  direction:ltr;
  unicode-bidi:bidi-override;
  white-space:nowrap;
  display:inline-block;
}

/* ---------------------------------------------------------
   Store / location page
   --------------------------------------------------------- */
.storepage{
  display:grid;grid-template-columns:1fr 380px;gap:clamp(32px,5vw,64px);
  align-items:start;padding-bottom:clamp(48px,6vw,80px);
}
.storepage__h{font-size:26px;font-weight:300;margin:0 0 12px}
.storepage__h + .storepage__p,.storepage__h + .storepage__list{margin-bottom:34px}
.storepage__p{font-size:17px;line-height:1.75;color:#3B3444;max-width:62ch}
.storepage__list{margin:0 0 34px;padding-inline-start:20px;list-style:disc}
.storepage__list li{font-size:16.5px;line-height:1.8;color:#3B3444}
.storepage__list a{color:var(--plum);border-bottom:1px solid var(--line)}
.storepage__list a:hover{color:var(--violet)}

.infocard{
  padding:28px 26px 30px;border-radius:16px;
  background:var(--bone);border:1px solid var(--line);
}
.infocard__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
.infocard__name{font-size:26px;font-weight:300;margin-bottom:12px}
.infocard__addr{font-size:15px;line-height:1.7;color:var(--grey)}
.infocard__cta{margin-top:14px;width:100%;justify-content:center}

.hours{width:100%;border-collapse:collapse;font-size:14px}
.hours th{
  text-align:start;font-weight:400;color:var(--ink);
  padding:7px 14px 7px 0;white-space:nowrap;vertical-align:top;
}
[dir="rtl"] .hours th{padding:7px 0 7px 14px}
.hours td{text-align:end;color:var(--grey);padding:7px 0;line-height:1.5}

.storepage__img{margin:20px 0 0;border-radius:14px;overflow:hidden}
.storepage__img img{width:100%;display:block}
.storepage__other{
  padding-bottom:clamp(56px,7vw,96px);font-size:16px;color:var(--grey);
}
.storepage__other a{color:var(--plum);border-bottom:1px solid var(--line)}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.sec--faq{background:var(--bone)}
.faq{margin-top:40px;max-width:74ch;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;
  padding:22px 40px 22px 0;
  font-size:19px;font-weight:400;color:var(--plum);
  position:relative;transition:color var(--dur) var(--ez);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--violet)}
.faq__item summary::after{
  content:"";position:absolute;inset-inline-end:6px;top:50%;
  width:10px;height:10px;margin-top:-6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform var(--dur) var(--ez);
}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__item p{padding:0 0 24px;color:var(--grey);font-size:16px;line-height:1.7;max-width:66ch}

/* ---------------------------------------------------------
   Wood strip — one line of agarwood, sliding left to right
   --------------------------------------------------------- */
/* Solid ground. The mask must NOT go here, or the background fades out too
   and the page colour shows through at the ends. */
.wood{background:var(--bone);padding:clamp(48px,6vw,80px) 0}
/* Images only, no reading order: force LTR so the marquee maths is identical in
   both languages. In RTL a flex track starts at the right edge and the negative
   transform would push it off-screen. */
.wood,.wood__viewport,.wood__track{direction:ltr}
.wood__viewport{
  overflow:hidden;width:100%;
  /* feathered: only the tiles dissolve, the ground stays solid edge to edge */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
}
.wood__track{display:flex;align-items:center;gap:22px;width:max-content;will-change:transform}
.wood__tile{
  margin:0;flex:none;
  width:clamp(160px,15vw,215px);
  aspect-ratio:1/1;
  overflow:hidden;border-radius:12px;
}
/* full colour, as shot */
.wood__tile img{width:100%;height:100%;object-fit:cover;display:block}

@media (prefers-reduced-motion:reduce){
  .wood__track{transform:none !important}
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:1080px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .pdp__inner{grid-template-columns:1fr;gap:34px}
  .pdp__media{position:static}
  .bgrid,.ccards{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* Language switch sits in the top bar beside the menu button so it can be
     reached without opening the menu. The base stylesheet hides .nav__actions
     entirely at this width, so bring it back with only the switch inside. */
  .nav__actions{
    display:flex;
    margin-inline-start:auto;
    margin-inline-end:10px;
    margin-left:0;
  }
  .nav__actions .btn{display:none}
  .burger{margin-left:0;margin-inline-start:0}
  .drawer .lang{display:none}
  .lang{font-size:12.5px}
  .lang a{padding:6px 10px}
}
@media (max-width:560px){
  .pgrid{grid-template-columns:1fr}
}

/* products an article discusses — the blog's only internal links to the pages
   that sell, so they are given their own block rather than buried in prose */
.postlinks{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.postlinks__h{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--grey-2);margin-bottom:14px}
.postlinks ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.postlinks li{font-size:15px;color:var(--grey)}
.postlinks a{color:var(--plum);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ez)}
.postlinks a:hover{border-bottom-color:currentColor}