/* Nahleh design system — brand tokens + shape/type overrides for Dawn.
   Load order: base.css, then this file, so equal-specificity :root wins here. */

:root {
  /* Brand — Amber (commerce) */
  --nh-amber: #e3a11c;
  --nh-amber-gold: #ebb134;
  --nh-amber-deep: #b07d14;
  --nh-logo-top: #efb942;
  --nh-logo-bottom: #d4870f;

  /* Medical — Sage (trust) */
  --nh-sage: #4e7a60;
  --nh-sage-tint: #eaf0ea;
  --nh-sage-text: #9fbba9;

  /* Neutrals */
  --nh-charcoal: #2b2722;
  --nh-ink: #3a352d;
  --nh-body: #5a5347;
  --nh-muted: #9a9082;
  --nh-cream: #fbf8f3;
  --nh-cream-2: #fbf3e2;
  --nh-white: #ffffff;
  --nh-border: #efe6d6;
  --nh-border-2: #e7dece;

  /* Supporting tints */
  --nh-sand: #fbf1dc;
  --nh-blush: #f3e9e4;
  --nh-cool-grey: #edeef2;

  /* Alert & sale */
  --nh-coral: #c8543b;
  --nh-coral-soft: #fbe9e4;
  --nh-whatsapp: #25d366;

  /* Radii */
  --nh-radius-sm: 0.8rem;
  --nh-radius-md: 1.3rem;
  --nh-radius-lg: 1.6rem;
  --nh-radius-xl: 2.2rem;
  --nh-radius-pill: 3rem;

  /* Shadows */
  --nh-shadow-soft: 0 0.6rem 1.8rem rgba(43, 39, 34, 0.08);
  --nh-shadow-card: 0 1.2rem 2.8rem rgba(43, 39, 34, 0.1);
  --nh-shadow-amber: 0 0.8rem 2.2rem rgba(227, 161, 28, 0.34);
  --nh-shadow-amber-hover: 0 1rem 2.8rem rgba(227, 161, 28, 0.45);

  /* ---- Override Dawn's own tokens (non-color, non-scheme) ---- */
  --font-heading-family: 'Tajawal', 'Assistant', sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 800;
  --font-body-family: 'Tajawal', 'Assistant', sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 700;

  --page-width: 120rem;

  --media-radius: 22px;
  --product-card-corner-radius: 1.8rem;
  --collection-card-corner-radius: 1.8rem;
  --blog-card-corner-radius: 1.8rem;
  --badge-corner-radius: 3rem;
  --popup-corner-radius: 20px;
  --buttons-radius: 15px;
  --buttons-border-width: 0px;
  --buttons-border-opacity: 0;
  --inputs-radius: 13px;
  --variant-pills-radius: 30px;

  --product-card-shadow-opacity: 0;
  --collection-card-shadow-opacity: 0;
  --blog-card-shadow-opacity: 0;
}

/* Rating stars + sale price accents (shared by product cards and the buy box) */
.rating-star {
  --color-rating-star: var(--nh-amber-gold);
}

.price--on-sale .price-item--regular {
  color: var(--nh-muted) !important;
}

.price-item--sale {
  font-weight: 800;
}

/* Arabic-tuned type: Dawn's positive heading letter-spacing reads poorly in Arabic script */
h1,
h2,
h3,
h4,
h5,
h6,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  letter-spacing: -0.02em;
}

body {
  letter-spacing: normal;
}

/* ============ Nahleh component classes ============ */

.nahleh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  border-radius: var(--nh-radius-pill);
  line-height: 1;
}

.nahleh-eyebrow--sage {
  background: var(--nh-sage-tint);
  color: var(--nh-sage);
}

.nahleh-eyebrow--sand {
  background: var(--nh-sand);
  color: var(--nh-amber-deep);
}

.nahleh-eyebrow--coral {
  background: var(--nh-coral-soft);
  color: var(--nh-coral);
}

.nahleh-badge-sale {
  position: absolute;
  top: 1.6rem;
  inset-inline-start: 1.6rem;
  background: var(--nh-coral);
  color: var(--nh-white);
  font-size: 1.3rem;
  font-weight: 800;
  padding: 0.7rem 1.3rem;
  border-radius: var(--nh-radius-pill);
  box-shadow: 0 0.4rem 1.4rem rgba(200, 84, 59, 0.35);
  z-index: 2;
  white-space: nowrap;
}

.nahleh-save-chip {
  background: var(--nh-coral-soft);
  color: var(--nh-coral);
  font-size: 1.25rem;
  font-weight: 800;
  padding: 0.4rem 0.9rem;
  border-radius: 0.7rem;
  display: inline-block;
}

.nahleh-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--nh-sage-tint);
  color: var(--nh-sage);
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  border-radius: var(--nh-radius-pill);
  margin-bottom: 1.4rem;
}

.nahleh-trust-chip svg {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}

.nahleh-benefits {
  list-style: none;
  margin: 0 0 2.6rem;
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-lg);
}

.nahleh-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--nh-ink);
}

.nahleh-benefits li .nahleh-check {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--nh-sage-tint);
  color: var(--nh-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

.nahleh-btn {
  width: 100%;
  height: 5.8rem;
  border: none;
  border-radius: var(--nh-radius-md);
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition:
    transform 0.12s,
    box-shadow 0.2s,
    background-color 0.2s;
}

.nahleh-btn--amber {
  background: var(--nh-amber);
  color: var(--nh-white);
  box-shadow: var(--nh-shadow-amber);
}

.nahleh-btn--amber:not([disabled]):hover {
  box-shadow: var(--nh-shadow-amber-hover);
  transform: translateY(-1px);
}

.nahleh-btn--amber:not([disabled]):active {
  transform: translateY(0);
}

.nahleh-btn--charcoal {
  background: var(--nh-charcoal);
  color: var(--nh-cream-2);
}

.nahleh-btn--charcoal:not([disabled]):hover {
  background: #1c1915;
}

.nahleh-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2.2rem;
}

.nahleh-trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  padding: 1.4rem 0.8rem;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-md);
}

.nahleh-trust-strip__item span {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--nh-ink);
}

.nahleh-trust-strip__item svg {
  color: var(--nh-sage);
  fill: currentColor;
  width: 2.2rem;
  height: 2.2rem;
}

.nahleh-section-heading {
  text-align: center;
  margin: 6.4rem 0 3.6rem;
}

.nahleh-section-heading h2 {
  font-size: 2.8rem;
  font-weight: 900;
  margin: 1.6rem 0 0;
  letter-spacing: -0.02em;
}

/* ============ Product page ============ */

.product__title h1,
.product__title .h1 {
  font-weight: 900;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.product__media-wrapper .product__media-item {
  background: linear-gradient(150deg, var(--nh-sand) 0%, var(--nh-blush) 55%, var(--nh-sage-tint) 100%);
  border-radius: var(--media-radius);
}

.product-form__submit.button {
  min-height: 5.8rem;
  font-size: 1.7rem;
  font-weight: 800;
  box-shadow: var(--nh-shadow-amber);
  transition:
    transform 0.12s,
    box-shadow 0.2s;
}

.product-form__submit.button:not([disabled]):hover {
  box-shadow: var(--nh-shadow-amber-hover);
  transform: translateY(-1px);
}

.product-form__submit.button:not([disabled]):active {
  transform: translateY(0);
}

.product__description {
  margin: 0 0 2.6rem;
  padding: 2rem 1.8rem;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-lg);
  color: var(--nh-body);
}

.product__description > *:first-child {
  margin-top: 0;
}

.product__description > *:last-child {
  margin-bottom: 0;
}

.product__description p {
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--nh-ink);
  margin: 0 0 1.3rem;
}

.product__description ul,
.product__description ol {
  margin: 0 0 1.3rem;
  padding-inline-start: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.product__description li {
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--nh-ink);
}

.product__description h2,
.product__description h3,
.product__description h4 {
  font-weight: 800;
  color: var(--nh-ink);
  margin: 0 0 1rem;
}

.product__description strong,
.product__description b {
  color: var(--nh-charcoal);
  font-weight: 800;
}

.product__description a {
  color: var(--nh-amber-deep);
  text-decoration-color: var(--nh-amber);
}

.product__description img {
  max-width: 100%;
  height: auto;
  border-radius: var(--nh-radius-md);
}

.product__description svg {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  flex-shrink: 0;
}

.product__accordion.accordion summary {
  font-weight: 700;
}

.product__accordion .icon-caret {
  color: var(--nh-amber);
}

.icon-with-text {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.icon-with-text__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  padding: 1.4rem 0.8rem;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-md);
}

.icon-with-text .icon-accordion,
.icon-with-text svg {
  color: var(--nh-sage);
}

.rating-wrapper .rating-count,
.rating-wrapper .rating-text {
  color: var(--nh-muted);
}

.nahleh-star-rating {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

.nahleh-star-rating__value {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--nh-ink);
}

.nahleh-star-rating__count {
  color: var(--nh-muted);
  font-size: 1.35rem;
  font-weight: 500;
}

.nahleh-star-rating__availability {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--nh-sage);
  font-size: 1.3rem;
  font-weight: 700;
}

.nahleh-star-rating__availability svg {
  width: 1.4rem;
  height: 1.4rem;
}

.product-form__quantity .quantity {
  border-radius: var(--nh-radius-md);
  min-height: 5.2rem;
  background: var(--nh-white);
}

.product-form__quantity .quantity:after {
  border-radius: var(--nh-radius-md);
  box-shadow: inset 0 0 0 1px var(--nh-border-2);
}

.product-form__quantity .quantity:before {
  border-radius: var(--nh-radius-md);
  box-shadow: none;
}

.product-form__quantity .quantity__button:hover {
  color: var(--nh-amber);
}

.product-form__quantity .quantity__input {
  font-weight: 700;
  opacity: 1;
  color: var(--nh-ink);
}

.quantity__label {
  font-weight: 700;
  color: var(--nh-ink);
  margin-bottom: 0.8rem;
  display: inline-block;
}

.product-form__input--pill input[type='radio']:checked + label {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
}

@media screen and (max-width: 749px) {
  .nahleh-section-heading {
    margin: 4.4rem 0 2.8rem;
  }

  .nahleh-section-heading h2 {
    font-size: 2.2rem;
  }
}

/* Breadcrumbs (snippets/breadcrumbs.liquid) — used on product and collection pages */
.nh-breadcrumbs {
  margin: 0 0 1.6rem;
}

.nh-breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: right;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--nh-muted);
}

.nh-breadcrumbs__list a {
  color: var(--nh-muted);
  text-decoration: none;
}

.nh-breadcrumbs__list a:hover {
  color: var(--nh-ink);
}

.nh-breadcrumbs__list [aria-current='page'] {
  color: var(--nh-ink);
  font-weight: 600;
}

/* iOS horizontal-scroll fix. Dawn's closed header search modal is only faded
   out (opacity: 0) and its collapsed layout leaves the search input hanging
   ~50px past the screen edge — Safari on iOS counts that as scrollable
   overflow, so pages wiggle left-right. Drop the closed modal from layout
   entirely; the open state (details[open]) is untouched and renders
   full-width as before. */
details:not([open]) > .search-modal {
  display: none;
}

/* Safety net: never allow sideways page scroll. overflow-x: clip (unlike
   hidden) doesn't create a scroll container, so position: sticky — e.g. the
   sticky header — keeps working. */
html,
body {
  overflow-x: clip;
}

/* iOS auto-zoom fix. Safari on iPhone zooms the whole page in when a focused
   input's font-size is under 16px — and stays zoomed after the field is left,
   which makes the entire layout look about double size ("half a product card
   fills the screen"). Dawn's inputs are 1.3rem (~13px), and the search input
   is even autofocused when the search icon is tapped. Force a 16px floor on
   text-entry controls on touch-size screens so the zoom never triggers.
   max() keeps it correct even if the theme's body-scale setting changes. */
@media screen and (max-width: 989px) {
  .field__input,
  .select__select,
  .customer .field input,
  .customer select,
  .quantity__input,
  input[type='search'],
  textarea {
    font-size: max(16px, 1.6rem);
  }
}