/* DUNEUS · Base & typography
 * Part of the modular DUNEUS presentation layer. Load order:
 * tokens -> base -> forms -> header -> footer -> product-card ->
 * product -> collection -> cart -> sections -> responsive
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * 02 · NEUTRALISE
 * Strip the stock theme's visual signature: rounded corners, drop shadows,
 * light card chrome, default weights. This is the step that stops the store
 * reading as "Soft Theme in other colours".
 * ------------------------------------------------------------------------ */
body,
body .card,
body .btn,
body .form-control,
body .modal-content,
body .dropdown-menu,
body .alert,
body .badge,
body .nav-link,
body .input-group-text,
body .custom-select,
body img {
  border-radius: var(--d-radius) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Buttons/inputs keep a 2px tick so they read as hardware, not as paper. */
body .btn,
body .form-control,
body select,
body input[type='text'],
body input[type='email'],
body input[type='tel'],
body input[type='number'],
body input[type='password'],
body textarea {
  border-radius: var(--d-radius-ctl) !important;
}

/* Kill light-theme surfaces that would punch holes in the black canvas. */
body .bg-white,
body .bg-light,
body .card,
body .modal-content,
body .dropdown-menu {
  background-color: var(--d-surface) !important;
  color: var(--duneus-fg, #111111);
  border-color: var(--d-line) !important;
}

/* ---------------------------------------------------------------------------
 * 03 · BASE
 * ------------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }

body {
  /* Light by default. Driven by Theme settings -> Colors -> Background, so a
     dark storefront is still one setting away. */
  background-color: var(--duneus-bg, #FFFFFF) !important;
  color: var(--duneus-fg, #111111);
  font-family: var(--duneus-font-en-body, 'Montserrat'), sans-serif;
  font-size: var(--d-fs-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[dir='rtl'] body,
html[lang='ar'] body { font-family: var(--d-arabic); }

/* Container: wider, with editorial gutters. */
body .container,
body .container-fluid {
  max-width: var(--d-max);
  padding-inline: var(--d-gutter);
}

body a { color: inherit; text-decoration: none; transition: color var(--d-fast) var(--d-ease); }
body a:hover { color: var(--d-orange); text-decoration: none; }

body hr,
body .border-product {
  border: 0;
  border-top: 1px solid var(--d-line);
  opacity: 1;
  margin-block: 1.75rem;
}

::selection { background: var(--d-orange); color: var(--duneus-fg, #111111); }

body :focus-visible {
  outline: 2px solid var(--d-orange);
  outline-offset: 2px;
}

/* Remove the focus ring for MOUSE/touch interaction only (the blue box that
   appeared on click), while keeping a visible ring for KEYBOARD users via
   :focus-visible above — this is the accessible way to do it, not a blanket
   `outline:none`. Also clears Bootstrap's box-shadow focus glow on click. */
body :focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
/* Zid accordion headers / clickable divs use tabindex and can show the same
   ring on click — covered by the rule above, but ensure any inline-styled
   Bootstrap `.form-control`/button glow is gone on mouse focus too. */
body .btn:focus:not(:focus-visible),
body [data-pp-acc]:focus:not(:focus-visible),
body [tabindex]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * 04 · TYPOGRAPHY
 * Display is set heavy, uppercase and tight; body stays quiet. The contrast
 * between the two is what carries the brand.
 * ------------------------------------------------------------------------ */
body h1, body h2, body h3, body h4, body h5, body h6,
body .section-title,
body .product-title {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  color: var(--duneus-fg, #111111);
  margin-block-end: 0.6em;
}

body h1 {
  font-weight: 900;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: var(--d-track-disp);
  text-transform: uppercase;
}

body h2,
body .section-title {
  font-weight: 900;
  font-size: clamp(1.375rem, 2.4vw, 2.125rem);
  line-height: 1.08;
  letter-spacing: var(--d-track-disp);
  text-transform: uppercase;
}

body h3 {
  font-weight: 800;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

body h4,
body .product-title {
  font-weight: 700;
  font-size: var(--d-fs-body);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

body p { color: var(--d-mute); }
body small { color: var(--d-faint); font-size: var(--d-fs-sm); }

/* Arabic never gets uppercase — it has no case, and the transform only
   damages shaping and diacritics. */
[dir='rtl'] body h1,
[dir='rtl'] body h2,
[dir='rtl'] body h3,
[dir='rtl'] body .section-title {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 800;
}

/* -- Signature: the technical label -------------------------------------
   An uppercase micro-label with wide tracking, preceded by a short orange
   tick. Borrowed from the spec tagging on performance apparel. This is the
   one recurring device that ties header, sections, PDP and footer together. */
body .section-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block-end: 1.25rem;
  margin-block-end: 2rem;
  border-bottom: 1px solid var(--d-line);
}

body .section-title::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  height: 1em;
  background: var(--d-orange);
}

.d-label {
  display: inline-block;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: var(--d-fs-micro);
  font-weight: 700;
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-faint);
}


/* ===========================================================================
 * LANGUAGE FACES — final authority
 * English uses the DUNEUS brand face, Arabic uses Almarai. Applied late so no
 * module-level Montserrat declaration can override the Arabic face.
 * ======================================================================== */
[dir='rtl'] body,
[dir='rtl'] body h1, [dir='rtl'] body h2, [dir='rtl'] body h3,
[dir='rtl'] body h4, [dir='rtl'] body h5, [dir='rtl'] body h6,
[dir='rtl'] body p, [dir='rtl'] body a, [dir='rtl'] body span,
[dir='rtl'] body button, [dir='rtl'] body input, [dir='rtl'] body select,
[dir='rtl'] body textarea, [dir='rtl'] body label, [dir='rtl'] body li {
  font-family: var(--duneus-font-ar, 'Almarai', sans-serif);
}
[dir='rtl'] body [class^='icon-'],
[dir='rtl'] body [class*=' icon-'] { font-family: 'icomoon' !important; }

/* Theme-preview marker. Only rendered by duneus-preview.js, which does nothing
   unless the URL already carries Zid's preview parameters. */
.dn-previewtag {
  position: fixed;
  inset-inline-start: 12px;
  bottom: 12px;
  z-index: 9998;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}