/* Dar Costume components. Load after design-tokens/tokens.css.
   Typography comes from the type-style classes in tokens.css (.eyebrow, .title, .price ...);
   this sheet adds layout, colour, and the Arabic / right-to-left rules at the end.
   Uses logical properties (inline-start/end) so every component mirrors correctly in RTL. */

body { margin: 0; font-family: var(--font-sans); background: var(--ivory); color: var(--ink); -webkit-font-smoothing: antialiased; }
.dc-stage { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; padding: var(--space-6); }
.dc-stage-sand { background: var(--sand); }
.dc-upper { text-transform: uppercase; }
.dc-muted { color: var(--ink-muted); }
.dc-rule { height: 1px; border: 0; margin: 0; background: var(--line); }
.eyebrow, .label { text-transform: uppercase; }
.price { white-space: nowrap; }
.price, .heading, .display-xl { font-variant-numeric: lining-nums; }

/* Button */
.dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-6); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); background: var(--ink); color: var(--on-dark); text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; }
.dc-btn-accent { background: var(--ocre); border-color: var(--ocre); }
.dc-btn-outline { background: transparent; color: var(--ink); }
.dc-btn-on-ink { background: transparent; border-color: var(--brass); color: var(--brass); }
.dc-btn-block { display: flex; width: 100%; box-sizing: border-box; }
.dc-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Grade badge */
.dc-grade { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding-inline-end: var(--space-3); background: var(--sand); color: var(--ink); white-space: nowrap; }
.dc-grade b { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: var(--on-dark); font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.dc-grade-a { background: var(--zellige-soft); color: var(--zellige); }
.dc-grade-a b { background: var(--zellige); }
.dc-grade-c { background: var(--ocre-soft); }
.dc-grade-c b { background: var(--ocre); }

/* Hang tag */
.dc-tag { position: relative; width: 216px; box-sizing: border-box; padding: var(--space-12) var(--space-6) var(--space-6); background: var(--paper); text-align: center; clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px); }
.dc-tag-ink { background: var(--ink); color: var(--on-dark); }
.dc-tag-hole { position: absolute; top: var(--space-4); left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: var(--radius-arch); background: var(--sand); }
.dc-tag-mark { display: block; height: 52px; margin: 0 auto var(--space-4); }
.dc-tag .eyebrow { margin: 0 0 var(--space-2); }
.dc-tag .title { margin: 0 0 var(--space-3); }
.dc-tag .heading { margin: 0 0 var(--space-4); }
.dc-tag-specs { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); margin: var(--space-4) 0; padding: var(--space-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: start; }
.dc-tag-specs dt, .dc-tag-specs dd { margin: 0; }
.dc-tag-specs dt { color: var(--ink-muted); }
.dc-tag .price { margin: var(--space-4) 0 var(--space-1); }
.dc-tag-seal { display: block; width: 136px; margin: 0 auto var(--space-6); }
.dc-tag-quote { margin: 0 0 var(--space-6); }
.dc-tag-ref { margin: 0; }
.dc-tag-proofs { list-style: none; margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--brass); }
.dc-tag-proofs li { color: var(--brass); padding: var(--space-1) 0; }

/* Product card */
.dc-card { width: 280px; background: var(--paper); }
.dc-arch { position: relative; aspect-ratio: 4 / 5; margin: var(--space-4) var(--space-4) 0; border-radius: var(--radius-arch) var(--radius-arch) var(--radius-0) var(--radius-0); background: var(--sand); overflow: hidden; display: grid; place-items: end center; }
.dc-arch svg { width: 74%; height: auto; display: block; }
.dc-arch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-card-body { padding: var(--space-4) var(--space-6) var(--space-6); }
.dc-card-body .eyebrow { margin: 0 0 var(--space-2); }
.dc-card-body .title { margin: 0 0 var(--space-2); }
.dc-card-body .caption { margin: 0 0 var(--space-4); }
.dc-card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.dc-card-row .price { margin: 0; }

/* Social post (1:1, shown at 300px) */
.dc-post { position: relative; width: 300px; height: 300px; box-sizing: border-box; overflow: hidden; }
.dc-post-ink { background: var(--ink); color: var(--on-dark); padding: var(--space-6); display: flex; flex-direction: column; }
.dc-post-ink .eyebrow { color: var(--brass); margin: 0 0 var(--space-4); }
.dc-post-ink .heading { margin: 0; max-width: 228px; }
.dc-post-ink .caption { color: var(--brass); margin: var(--space-3) 0 0; }
.dc-post-frame { position: absolute; inset-inline-end: var(--space-6); bottom: -2px; width: 64px; height: 116px; border: 1px solid var(--brass); border-bottom: 0; border-radius: var(--radius-arch) var(--radius-arch) var(--radius-0) var(--radius-0); }
.dc-post-foot { margin-top: auto; }
/* the on-ink wordmark carries its own navy margin: these offsets line its letters up with the text edge */
.dc-post-foot img { display: block; width: 190px; height: auto; margin-block-end: -14px; margin-inline-start: -15px; }
.dc-post-light { background: var(--ivory); display: grid; grid-template-columns: 124px 1fr; gap: var(--space-4); padding: var(--space-6); align-items: end; }
.dc-post-light .dc-arch { margin: 0; height: 100%; aspect-ratio: auto; }
.dc-post-light .eyebrow { margin: 0 0 var(--space-2); }
.dc-post-light .title { margin: 0 0 var(--space-3); }
.dc-post-light .price { margin: var(--space-3) 0 var(--space-2); }
.dc-post-light .caption { margin: var(--space-3) 0 0; }

/* Business card (85 x 55 mm, shown at 300 x 194) */
.dc-bcard { width: 300px; height: 194px; box-sizing: border-box; }
.dc-bcard-front { background: var(--ink); display: grid; place-items: center; }
.dc-bcard-front img { width: 164px; height: 164px; }
.dc-bcard-back { background: var(--paper); padding: var(--space-6); display: flex; flex-direction: column; }
.dc-bcard-back .heading { margin: 0; }
.dc-bcard-back .eyebrow { margin: var(--space-1) 0 0; color: var(--ocre); }
.dc-bcard-back .caption { margin: 0; }
.dc-bcard-details { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; }
.dc-bcard-details img { width: 34px; height: auto; }

/* ---------- Arabic and right-to-left ----------
   Set lang="ar" dir="rtl" on <html> (or on any container) for Arabic pages.
   Arabic is never letter-spaced or uppercased; display styles switch to Amiri, text styles to Tajawal.
   Digits stay Western (0-9), as used on Moroccan price tags. */
:lang(ar) .display-xl, :lang(ar) .heading, :lang(ar) .price, :lang(ar) .quote {
  font-family: var(--font-arabic-display); font-weight: 700; font-style: normal; letter-spacing: 0;
}
:lang(ar) .display-xl { font-size: 52px; line-height: 80px; }
:lang(ar) .heading { font-size: 30px; line-height: 48px; }
:lang(ar) .quote { font-size: 22px; line-height: 36px; }
:lang(ar) .eyebrow, :lang(ar) .label, :lang(ar) .title, :lang(ar) .body, :lang(ar) .caption {
  font-family: var(--font-arabic); letter-spacing: 0; text-transform: none;
}
:lang(ar) .eyebrow { font-size: 14px; line-height: 20px; }
:lang(ar) .label { font-size: 15px; line-height: 20px; }
:lang(ar) .caption { font-size: 13px; line-height: 22px; }
:lang(ar) .dc-grade b { font-family: var(--font-display); }
.dc-ltr { direction: ltr; unicode-bidi: isolate; } /* designer names, reference codes and phone numbers inside Arabic text */

/* Announcement post with the transparent ivory wordmark (website and kit version) */
.dc-post-foot-plain img { width: 156px; margin: 0; }
:lang(ar) .dc-post-foot-plain img { width: auto; height: 52px; }