/* Icon */
.icon {
  inline-size: 1.125em;
  block-size: 1.125em;
  flex-shrink: 0;
  fill: currentColor;
}
.icon--sm { inline-size: 0.875em; block-size: 0.875em; }
.icon--lg { inline-size: 1.5em; block-size: 1.5em; }

[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  line-height: 1;
  min-block-size: 48px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition:
    background var(--duration-base) var(--ease-out-quart),
    color var(--duration-base) var(--ease-out-quart),
    transform var(--duration-fast) var(--ease-out-quart);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-apothecary-green);
  color: var(--color-warm-sand);
}
.btn--primary:hover { background: var(--color-apothecary-green-deep); color: var(--color-warm-sand); }

.btn--secondary {
  background: var(--color-warm-sand-soft);
  color: var(--color-ink);
  border: 1px solid var(--color-stone);
}
.btn--secondary:hover { background: var(--color-warm-sand); border-color: var(--color-stone-deep); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  padding-inline: var(--space-3);
}
.btn--ghost:hover { color: var(--color-apothecary-green-deep); background: var(--color-apothecary-green-tint); }

.btn--clay {
  background: var(--color-counter-clay);
  color: var(--color-warm-sand-soft);
}
.btn--clay:hover { background: var(--color-counter-clay-deep); }

.btn--sm { min-block-size: 38px; padding-block: var(--space-2); padding-inline: var(--space-4); font-size: var(--size-label); }
.btn--lg { min-block-size: 56px; padding-inline: var(--space-8); font-size: var(--size-body-lg); }

.btn--block { inline-size: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--color-stone-soft);
  color: var(--color-ink-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.btn--icon {
  min-block-size: 44px;
  inline-size: 44px;
  padding: 0;
  border-radius: var(--radius-md);
}

/* Field */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field__label {
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
}
.field__hint {
  font-size: var(--size-label-sm);
  color: var(--color-ink-muted);
}
.field__input,
.field__textarea,
.field__select {
  background: var(--color-warm-sand-soft);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-md);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  font-size: var(--size-body);
  color: var(--color-ink);
  min-block-size: 48px;
  transition: border-color var(--duration-fast) var(--ease-out-quart), box-shadow var(--duration-fast) var(--ease-out-quart);
  inline-size: 100%;
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--color-ink-muted); }
.field__input:hover,
.field__textarea:hover,
.field__select:hover { border-color: var(--color-stone-deep); }
.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  outline: none;
  border-color: var(--color-apothecary-green);
  box-shadow: 0 0 0 3px oklch(38% 0.08 155 / 0.18);
}
.field--error .field__input,
.field--error .field__textarea,
.field--error .field__select { border-color: var(--color-warning); }
.field--error .field__input:focus { box-shadow: 0 0 0 3px oklch(58% 0.14 38 / 0.18); }
.field__error {
  font-size: var(--size-label-sm);
  color: var(--color-warning);
}
.field__textarea {
  min-block-size: 120px;
  resize: vertical;
  line-height: var(--leading-normal);
}

.field--icon { position: relative; }
.field--icon .field__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-4);
  transform: translateY(-50%);
  color: var(--color-ink-muted);
  pointer-events: none;
}
.field--icon .field__input { padding-inline-start: calc(var(--space-4) * 2 + 1.125em); }

/* Search (oversized input used in hero + medicines page) */
.search {
  display: flex;
  align-items: center;
  background: var(--color-warm-sand-soft);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-full);
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  gap: var(--space-2);
  transition: border-color var(--duration-fast) var(--ease-out-quart), box-shadow var(--duration-fast) var(--ease-out-quart);
}
.search:focus-within {
  border-color: var(--color-apothecary-green);
  box-shadow: 0 0 0 3px oklch(38% 0.08 155 / 0.16);
}
.search__icon { color: var(--color-ink-muted); margin-inline-start: var(--space-3); }
.search__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  min-block-size: 44px;
  font-size: var(--size-body);
  padding-inline: var(--space-2);
}
.search__input::placeholder { color: var(--color-ink-muted); }
.search__action { padding-inline: var(--space-5); }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  background: var(--color-warm-sand-deep);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-stone);
}
.badge--rx {
  background: var(--color-prescription-indigo-tint);
  color: var(--color-prescription-indigo);
  border-color: oklch(85% 0.03 268);
}
.badge--success {
  background: var(--color-success-tint);
  color: var(--color-success);
  border-color: oklch(82% 0.06 155);
}
.badge--warning {
  background: var(--color-warning-tint);
  color: var(--color-warning);
  border-color: oklch(85% 0.05 40);
}
.badge--clay {
  background: var(--color-counter-clay-tint);
  color: var(--color-counter-clay-deep);
  border-color: oklch(85% 0.05 50);
}
.badge--soft {
  background: transparent;
  border: 1px solid var(--color-stone);
  color: var(--color-ink-soft);
}

/* Chip (filter pill) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-warm-sand-soft);
  border: 1px solid var(--color-stone);
  font-size: var(--size-label);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
  white-space: nowrap;
}
.chip:hover { border-color: var(--color-stone-deep); color: var(--color-ink); }
.chip[aria-pressed="true"],
.chip--active {
  background: var(--color-apothecary-green);
  border-color: var(--color-apothecary-green);
  color: var(--color-warm-sand);
}

/* Card */
.card {
  background: var(--color-warm-sand-soft);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--duration-base) var(--ease-out-quart), box-shadow var(--duration-base) var(--ease-out-quart);
}
.card:hover { border-color: var(--color-stone-deep); }

.card--interactive { cursor: pointer; }
.card--interactive:hover { box-shadow: var(--shadow-hover); }

/* Product card (medicine tile) */
.product {
  display: flex;
  flex-direction: column;
  background: var(--color-warm-sand-soft);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out-quart), box-shadow var(--duration-base) var(--ease-out-quart);
}
.product:hover { border-color: var(--color-stone-deep); box-shadow: var(--shadow-hover); }
.product__media {
  --ph-ratio: 1;
  margin: var(--space-3);
  border-radius: var(--radius-md);
}
.product__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.product__title { font-size: var(--size-body); font-weight: var(--weight-medium); color: var(--color-ink); }
.product__meta { font-size: var(--size-label-sm); color: var(--color-ink-muted); }
.product__price { display: flex; align-items: baseline; gap: var(--space-2); margin-block-start: var(--space-2); }
.product__price-current { font-family: var(--font-mono); font-size: var(--size-title); font-weight: var(--weight-semibold); color: var(--color-ink); }
.product__price-old { font-family: var(--font-mono); font-size: var(--size-label); color: var(--color-ink-muted); text-decoration: line-through; }
.product__price-currency { font-size: var(--size-caption); color: var(--color-ink-muted); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); }
.product__actions { padding: 0 var(--space-4) var(--space-4); }

/* Lab test card */
.lab {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-warm-sand-soft);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-out-quart), box-shadow var(--duration-base) var(--ease-out-quart);
}
.lab:hover { border-color: var(--color-stone-deep); box-shadow: var(--shadow-hover); }
.lab__title { font-size: var(--size-title); font-weight: var(--weight-semibold); }
.lab__category { font-size: var(--size-label-sm); color: var(--color-ink-muted); }
.lab__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lab__price { display: flex; align-items: baseline; gap: var(--space-2); margin-block-start: var(--space-2); }
.lab__price-current { font-family: var(--font-mono); font-size: var(--size-title); font-weight: var(--weight-semibold); }

/* Doctor card */
.doctor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-warm-sand-soft);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-out-quart), box-shadow var(--duration-base) var(--ease-out-quart);
}
.doctor:hover { border-color: var(--color-stone-deep); box-shadow: var(--shadow-hover); }
.doctor__header { display: flex; gap: var(--space-4); align-items: center; }
.doctor__avatar {
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--radius-full);
  --ph-ratio: 1;
}
.doctor__name { font-size: var(--size-title); font-weight: var(--weight-semibold); }
.doctor__specialty { font-size: var(--size-label); color: var(--color-ink-soft); }
.doctor__years { font-size: var(--size-label-sm); color: var(--color-ink-muted); }
.doctor__modes { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-block-start: var(--space-2); }
.doctor__fee { font-family: var(--font-mono); font-weight: var(--weight-semibold); }

/* Article card */
.article {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.article__media { --ph-ratio: 16 / 10; border-radius: var(--radius-md); }
.article__category { font-size: var(--size-label-sm); color: var(--color-counter-clay-deep); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); }
.article__title { font-size: var(--size-title); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.article:hover .article__title { color: var(--color-apothecary-green-deep); }
.article__excerpt { font-size: var(--size-label); color: var(--color-ink-soft); }
.article__byline { font-size: var(--size-label-sm); color: var(--color-ink-muted); margin-block-start: auto; padding-block-start: var(--space-2); }

/* Language switcher */
.lang-switch {
  display: inline-flex;
  background: var(--color-warm-sand);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}
.lang-switch__btn {
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--size-label-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
  min-block-size: 32px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
}
.lang-switch__btn[aria-pressed="true"] {
  background: var(--color-apothecary-green);
  color: var(--color-warm-sand);
}

/* Cart badge */
.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-stone);
  background: var(--color-warm-sand);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  transition: border-color var(--duration-fast) var(--ease-out-quart);
  min-block-size: 40px;
}
.cart-pill:hover { border-color: var(--color-stone-deep); color: var(--color-ink); }
.cart-pill__count {
  font-family: var(--font-mono);
  font-size: var(--size-label-sm);
  background: var(--color-apothecary-green);
  color: var(--color-warm-sand);
  border-radius: var(--radius-full);
  min-inline-size: 22px;
  block-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 6px;
}
.cart-pill__count:empty,
.cart-pill__count[data-count="0"] { display: none; }

/* Dropzone */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  background: var(--color-warm-sand-soft);
  border: 2px dashed var(--color-stone-deep);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: border-color var(--duration-base) var(--ease-out-quart), background var(--duration-base) var(--ease-out-quart);
  cursor: pointer;
}
.dropzone:hover,
.dropzone--active {
  border-color: var(--color-apothecary-green);
  background: var(--color-apothecary-green-tint);
}
.dropzone__icon { color: var(--color-counter-clay); }
.dropzone__title { font-size: var(--size-title); font-weight: var(--weight-semibold); }
.dropzone__hint { font-size: var(--size-label-sm); color: var(--color-ink-muted); }

/* Sheet (modal replacement) */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(20% 0.02 155 / 0.45);
  display: grid;
  place-items: end center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out-quart);
}
@media (min-width: 768px) {
  .sheet-backdrop { place-items: center; }
}
.sheet-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.sheet {
  background: var(--color-warm-sand);
  border-start-start-radius: var(--radius-xl);
  border-start-end-radius: var(--radius-xl);
  inline-size: 100%;
  max-inline-size: 540px;
  padding: var(--space-6);
  max-block-size: 90dvh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-out-quint);
}
@media (min-width: 768px) {
  .sheet { border-radius: var(--radius-xl); margin-block: var(--space-6); }
}
.sheet-backdrop[data-open="true"] .sheet { transform: translateY(0); }
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}
.sheet__title { font-size: var(--size-title-lg); font-weight: var(--weight-semibold); }
.sheet__close { color: var(--color-ink-muted); padding: var(--space-2); }
.sheet__close:hover { color: var(--color-ink); }
.sheet__body { display: flex; flex-direction: column; gap: var(--space-4); }
.sheet__footer { margin-block-start: var(--space-6); display: flex; gap: var(--space-3); justify-content: flex-end; }

/* Status steps (used in prescription upload band) */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}
.step { display: flex; flex-direction: column; gap: var(--space-2); }
.step__num {
  font-family: var(--font-mono);
  font-size: var(--size-label-sm);
  color: var(--color-counter-clay-deep);
  letter-spacing: var(--tracking-label);
}
.step__title { font-size: var(--size-title); font-weight: var(--weight-semibold); }
.step__body { font-size: var(--size-label); color: var(--color-ink-soft); max-inline-size: 36ch; }

/* Trust marks */
.trust-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .trust-row { grid-template-columns: repeat(5, 1fr); }
}
.trust {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.trust__icon {
  color: var(--color-apothecary-green);
  inline-size: 28px;
  block-size: 28px;
  flex-shrink: 0;
}
.trust__title { font-size: var(--size-label); font-weight: var(--weight-semibold); }
.trust__body { font-size: var(--size-label-sm); color: var(--color-ink-muted); margin-block-start: var(--space-1); }

/* Inline link */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-apothecary-green-deep);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.link:hover { color: var(--color-apothecary-green); text-decoration: underline; }
.link .icon { transition: transform var(--duration-fast) var(--ease-out-quart); }
.link:hover .icon { transform: translateX(2px); }
[dir="rtl"] .link:hover .icon { transform: translateX(-2px); }

/* Tag (small inline marker) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--size-label-sm);
  color: var(--color-ink-soft);
}
.tag .icon { color: var(--color-apothecary-green); }

/* Section heading row (title + view-all link) */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
  flex-wrap: wrap;
}
.section-head__title { font-size: var(--size-headline); font-weight: var(--weight-semibold); }
.section-head__sub { font-size: var(--size-label); color: var(--color-ink-muted); margin-block-start: var(--space-1); }

/* Quantity stepper */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-md);
  background: var(--color-warm-sand-soft);
  overflow: hidden;
}
.qty__btn {
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quart);
}
.qty__btn:hover { background: var(--color-apothecary-green-tint); color: var(--color-apothecary-green-deep); }
.qty__value {
  min-inline-size: 36px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--size-label);
}

/* Empty state */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-6);
  text-align: center;
  background: var(--color-warm-sand-soft);
  border: 1px dashed var(--color-stone);
  border-radius: var(--radius-lg);
}
.empty__icon { color: var(--color-stone-deep); }
.empty__title { font-size: var(--size-title); font-weight: var(--weight-semibold); }
.empty__body { font-size: var(--size-label); color: var(--color-ink-muted); max-inline-size: 40ch; }