:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #131313;
  --bg-card: #1a1a1a;
  --bg-soft: #202020;
  --text-primary: #f5f5f5;
  --text-secondary: #a3a3a3;
  --accent: #f97316;
  --accent-rgb: 249, 115, 22;
  --accent-hover: #ea580c;
  --border: #2b2b2b;
  --success: #22c55e;
  --error: #ef4444;
  --warning: #f59e0b;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 11px;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
  --container: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Cairo", Arial, sans-serif;
  line-height: 1.7;
}

body.is-locked {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.container {
  width: min(calc(100% - 36px), var(--container));
  margin-inline: auto;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 12px;
  font-weight: 800;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.primary-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.2);
}

.primary-button:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  transform: translateY(-2px);
}

.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

.secondary-button {
  border: 1px solid var(--border);
  background: #202020;
  color: var(--text-primary);
}

.secondary-button:hover {
  border-color: #444;
  background: #272727;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  border-bottom: 1px solid transparent;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(16px);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-header.is-scrolled,
body.product-route .site-header {
  border-color: var(--border);
  background: rgba(10, 10, 10, 0.94);
}

.navbar {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.brand::before {
  display: inline-flex;
  width: 38px;
  height: 38px;
  margin-inline-end: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  content: "\f54e";
  font-family: "Font Awesome 6 Free";
  font-size: 1rem;
  font-weight: 900;
  vertical-align: middle;
}

.nav-order-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  color: #ddd;
  font-size: 0.9rem;
  font-weight: 700;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.nav-order-link:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}

.hero {
  position: relative;
  display: flex;
  min-height: 92vh;
  align-items: center;
  overflow: hidden;
  background: url("https://picsum.photos/seed/algeria-direct-store/1920/1080") center/cover no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 38%, rgba(var(--accent-rgb), 0.2), transparent 36%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.97) 10%, rgba(10, 10, 10, 0.78) 48%, rgba(10, 10, 10, 0.38) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 90px;
}

.hero-content > * {
  max-width: 700px;
}

.hero-eyebrow,
.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 5.6rem);
  line-height: 1.13;
  letter-spacing: -0.055em;
}

.hero-content > p:not(.hero-eyebrow) {
  margin: 24px 0 30px;
  color: #d0d0d0;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.hero-button {
  min-width: 190px;
}

.trust-bar {
  border-block: 1px solid var(--border);
  background: #101010;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trust-item {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 24px;
  border-inline-start: 1px solid var(--border);
}

.trust-item:last-child {
  border-inline-start: 0;
}

.trust-item > i {
  color: var(--accent);
  font-size: 1.7rem;
}

.trust-item strong,
.trust-item span {
  display: block;
}

.trust-item strong {
  color: #f1f1f1;
  font-size: 0.95rem;
}

.trust-item span {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.products-section {
  padding-block: 100px 120px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 34px;
}

.section-heading span {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 900;
}

.section-heading h2 {
  margin: 6px 0 0;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.25;
}

.section-heading > p {
  max-width: 430px;
  margin: 0;
  color: var(--text-secondary);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.product-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.product-card:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
}

.product-card-link {
  display: block;
  height: 100%;
}

.product-image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #111;
}

.product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.product-card:hover .product-image-wrap img {
  transform: scale(1.045);
}

.cash-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 999px;
  background: rgba(9, 31, 17, 0.86);
  color: #86efac;
  font-size: 0.7rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.product-card-body {
  padding: 18px;
}

.product-card-body h3 {
  margin: 0;
  font-size: 1.05rem;
}

.product-card-body p {
  display: -webkit-box;
  min-height: 48px;
  margin: 8px 0 17px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.79rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-price {
  color: var(--accent);
  font-size: 1.04rem;
  font-weight: 900;
}

.details-button {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.8rem;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 70px 30px;
  border: 1px dashed #333;
  border-radius: 18px;
  color: var(--text-secondary);
  text-align: center;
}

.empty-state i,
.empty-state strong {
  display: block;
}

.empty-state i {
  margin-bottom: 13px;
  color: var(--accent);
  font-size: 2.2rem;
}

.empty-state strong {
  color: var(--text-primary);
}

.product-view {
  min-height: 100vh;
  padding-block: 112px 90px;
  background:
    radial-gradient(circle at 10% 6%, rgba(var(--accent-rgb), 0.08), transparent 28%),
    var(--bg-primary);
}

.product-page {
  animation: pageEnter 0.28s ease;
}

.back-products-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  color: #c6c6c6;
  font-size: 0.86rem;
  font-weight: 700;
  transition: color 0.2s ease;
}

.back-products-link:hover {
  color: var(--accent);
}

.product-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(370px, 0.74fr);
  align-items: start;
  gap: 26px;
}

.product-showcase {
  min-width: 0;
}

.product-main-image {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #101010;
}

.landing-main-image {
  aspect-ratio: 1.18 / 1;
  box-shadow: var(--shadow);
}

.product-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-thumbnails {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.thumbnail-button {
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #111;
  aspect-ratio: 1 / 1;
  opacity: 0.68;
  transition: border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.thumbnail-button:hover,
.thumbnail-button.is-active {
  border-color: var(--accent);
  opacity: 1;
}

.thumbnail-button:hover {
  transform: translateY(-2px);
}

.thumbnail-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info-card,
.direct-order-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.product-info-card {
  margin-top: 18px;
  padding: 26px;
}

.product-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
}

.product-title-row h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.25;
}

.landing-price {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  white-space: nowrap;
}

.landing-description {
  margin: 18px 0;
  color: #c0c0c0;
}

.delivery-strip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.07);
  color: #e9e9e9;
  font-size: 0.84rem;
}

.delivery-strip i {
  color: var(--accent);
}

.product-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.product-benefits span {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid #2d2d2d;
  border-radius: 11px;
  background: #151515;
  color: #cfcfcf;
  font-size: 0.75rem;
  text-align: center;
}

.product-benefits i {
  color: var(--accent);
}

.direct-order-card {
  position: sticky;
  top: 96px;
  overflow: hidden;
}

.order-card-header {
  padding: 25px 25px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.11), transparent 65%);
}

.order-card-header p {
  margin: 0;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
}

.order-card-header h2 {
  margin: 5px 0 11px;
  font-size: 1.35rem;
  line-height: 1.4;
}

.order-card-header span {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  color: #86efac;
  font-size: 0.72rem;
  font-weight: 800;
}

.direct-order-form {
  display: grid;
  gap: 15px;
  padding: 24px 25px 26px;
}

.form-group {
  min-width: 0;
}

.form-group label {
  display: block;
  margin-bottom: 7px;
  color: #efefef;
  font-size: 0.83rem;
  font-weight: 700;
}

.required-marker {
  color: var(--error);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 49px;
  padding: 11px 13px;
  border: 1px solid #393939;
  border-radius: 10px;
  outline: none;
  background: #111;
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #686868;
}

.form-group select:disabled {
  cursor: not-allowed;
  border-color: #303030;
  background: #0e0e0e;
  color: #777;
  opacity: 0.82;
}

.field-help {
  display: block;
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 0.68rem;
  line-height: 1.6;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  background: #141414;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.field-error {
  display: block;
  min-height: 18px;
  margin-top: 4px;
  color: #f87171;
  font-size: 0.72rem;
}

.quantity-control {
  display: grid;
  grid-template-columns: 46px minmax(70px, 1fr) 46px;
  overflow: hidden;
  border: 1px solid #393939;
  border-radius: 10px;
  background: #111;
}

.quantity-control button,
.quantity-control input {
  min-height: 47px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: center;
}

.quantity-control button {
  color: var(--accent);
  transition: background-color 0.2s ease;
}

.quantity-control button:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.quantity-control input {
  width: 100%;
  border-inline: 1px solid #2f2f2f;
  outline: none;
  -moz-appearance: textfield;
}

.quantity-control input::-webkit-outer-spin-button,
.quantity-control input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.order-total-box {
  display: grid;
  gap: 9px;
  padding: 15px;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  background: #111;
}

.order-total-box > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.order-total-box strong {
  color: #e7e7e7;
}

.order-total-box .grand-total-row {
  padding-top: 9px;
  border-top: 1px solid #2b2b2b;
  color: #eee;
  font-weight: 800;
}

.order-total-box .grand-total-row strong {
  color: var(--accent);
  font-size: 1.14rem;
}

.direct-order-submit {
  width: 100%;
  min-height: 54px;
  margin-top: 2px;
  font-size: 0.92rem;
}

.order-privacy-note {
  margin: -3px 0 0;
  color: #828282;
  font-size: 0.69rem;
  text-align: center;
}

.order-privacy-note i {
  margin-inline-end: 4px;
}

.site-footer {
  border-top: 1px solid var(--border);
  background: #0d0d0d;
}

.footer-content {
  display: flex;
  min-height: 130px;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.footer-content strong {
  font-weight: 900;
}

.footer-content p {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.footer-content > a {
  color: var(--text-secondary);
  font-size: 0.8rem;
  transition: color 0.2s ease;
}

.footer-content > a:hover {
  color: var(--accent);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
}

.modal.is-open {
  display: flex;
}

.modal-card {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
  animation: modalSlide 0.25s ease;
}

.modal-close-button {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid #313131;
  border-radius: 50%;
  background: #212121;
  color: #ddd;
}

.success-card {
  padding: 42px 30px 30px;
  text-align: center;
}

.success-icon {
  display: inline-flex;
  width: 74px;
  height: 74px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  font-size: 1.7rem;
}

.success-card h2 {
  margin: 0;
  font-size: 1.7rem;
}

.success-subtitle {
  margin: 10px auto 16px;
  color: var(--text-secondary);
}

.order-reference {
  display: inline-flex;
  padding: 8px 13px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 900;
}

.success-order-summary {
  margin-top: 22px;
  padding: 17px;
  border: 1px solid #303030;
  border-radius: 14px;
  background: #111;
  text-align: start;
}

.success-order-summary h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.success-order-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.success-order-summary li,
.summary-address,
.success-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-block: 9px;
  border-bottom: 1px solid #292929;
  color: #c9c9c9;
  font-size: 0.8rem;
}

.success-total {
  border-bottom: 0;
  color: #fff;
  font-weight: 900;
}

.success-total strong {
  color: var(--accent);
}

.success-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.success-actions > * {
  flex: 1;
}

.toast-container {
  position: fixed;
  top: 90px;
  right: 18px;
  z-index: 300;
  display: grid;
  width: min(360px, calc(100vw - 36px));
  gap: 10px;
}

.toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-inline-start-width: 4px;
  border-radius: 12px;
  background: #1c1c1c;
  box-shadow: var(--shadow);
  font-size: 0.82rem;
  animation: toastIn 0.25s ease;
}

.toast-success {
  border-inline-start-color: var(--success);
}

.toast-error {
  border-inline-start-color: var(--error);
}

.toast-warning {
  border-inline-start-color: var(--warning);
}

.toast-success .toast-icon {
  color: var(--success);
}

.toast-error .toast-icon {
  color: var(--error);
}

.toast-warning .toast-icon {
  color: var(--warning);
}

.toast-close {
  border: 0;
  background: transparent;
  color: #999;
}

.toast.is-leaving {
  opacity: 0;
  transform: translateX(25px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@keyframes modalSlide {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(25px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1280px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-page-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .direct-order-card {
    position: static;
  }

  .landing-main-image {
    aspect-ratio: 1.35 / 1;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(calc(100% - 24px), var(--container));
  }

  .navbar {
    min-height: 66px;
  }

  .brand {
    font-size: 1.02rem;
  }

  .brand::before {
    width: 34px;
    height: 34px;
  }

  .nav-order-link span {
    display: none;
  }

  .nav-order-link {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
  }

  .hero {
    min-height: 82vh;
    background-position: 62% center;
  }

  .hero-overlay {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.58) 0%, rgba(10, 10, 10, 0.92) 70%, #0a0a0a 100%);
  }

  .hero-content {
    align-self: end;
    padding-block: 130px 70px;
  }

  .hero h1 {
    font-size: clamp(2.1rem, 11vw, 3.5rem);
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-item {
    min-height: 90px;
    justify-content: start;
    border-inline-start: 0;
    border-bottom: 1px solid var(--border);
  }

  .trust-item:last-child {
    border-bottom: 0;
  }

  .products-section {
    padding-block: 68px 80px;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 11px;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-card-body p {
    min-height: 0;
  }

  .product-view {
    padding-block: 90px 55px;
  }

  .product-page-grid {
    gap: 16px;
  }

  .landing-main-image {
    border-radius: 17px;
    aspect-ratio: 1 / 0.88;
  }

  .product-thumbnails {
    gap: 7px;
  }

  .thumbnail-button {
    border-radius: 9px;
  }

  .product-info-card,
  .direct-order-card {
    border-radius: 17px;
  }

  .product-info-card {
    padding: 19px;
  }

  .product-title-row {
    flex-direction: column;
    gap: 7px;
  }

  .product-title-row h1 {
    font-size: 1.65rem;
  }

  .product-benefits {
    grid-template-columns: 1fr;
  }

  .product-benefits span {
    min-height: 52px;
    justify-content: start;
  }

  .order-card-header,
  .direct-order-form {
    padding-inline: 18px;
  }

  .footer-content {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .success-actions {
    flex-direction: column;
  }

  .modal {
    align-items: end;
    padding: 0;
  }

  .modal-card {
    width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
  }
}

@media (max-width: 420px) {
  .hero-content {
    padding-bottom: 54px;
  }

  .hero-button {
    width: 100%;
  }

  .product-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .details-button {
    width: 100%;
  }

  .landing-thumbnails {
    overflow-x: auto;
    grid-template-columns: repeat(5, 72px);
    padding-bottom: 4px;
  }

  .direct-order-submit {
    font-size: 0.82rem;
  }
}

/* خيارات التوصيل */
.delivery-method-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.delivery-method-fieldset legend {
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 0.83rem;
  font-weight: 700;
}

.delivery-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.delivery-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 92px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.delivery-option:hover {
  border-color: rgba(var(--accent-rgb), 0.52);
  transform: translateY(-1px);
}

.delivery-option.is-selected {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.09);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}

.delivery-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.delivery-option-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.11);
  color: var(--accent);
}

.delivery-option-content strong,
.delivery-option-content small {
  display: block;
}

.delivery-option-content strong {
  color: var(--text-primary);
  font-size: 0.78rem;
}

.delivery-option-content small {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 0.65rem;
  line-height: 1.45;
}

.delivery-option > b {
  grid-column: 1 / -1;
  color: var(--accent);
  font-size: 0.78rem;
}

/* الوضع النهاري للمتجر */
html[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #f5f7fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-soft: #eef1f5;
  --text-primary: #171717;
  --text-secondary: #62666d;
  --border: #dfe3e8;
  --shadow: 0 18px 50px rgba(17, 24, 39, 0.11);
}

html[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .nav-order-link,
html[data-theme="light"] .secondary-button,
html[data-theme="light"] .modal-close-button {
  background: #f1f3f5;
  color: #252525;
}

html[data-theme="light"] .trust-bar,
html[data-theme="light"] .site-footer {
  background: #ffffff;
}

html[data-theme="light"] .trust-item strong,
html[data-theme="light"] .product-card-body h3,
html[data-theme="light"] .form-group label,
html[data-theme="light"] .delivery-method-fieldset legend,
html[data-theme="light"] .order-total-box .grand-total-row,
html[data-theme="light"] .success-total {
  color: var(--text-primary);
}

html[data-theme="light"] .product-image-wrap,
html[data-theme="light"] .product-main-image,
html[data-theme="light"] .thumbnail-button {
  background: #eef1f4;
}

html[data-theme="light"] .product-view {
  background:
    radial-gradient(circle at 10% 6%, rgba(var(--accent-rgb), 0.08), transparent 28%),
    var(--bg-primary);
}

html[data-theme="light"] .landing-description,
html[data-theme="light"] .delivery-strip,
html[data-theme="light"] .product-benefits span {
  color: #4f545b;
}

html[data-theme="light"] .product-benefits span,
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .quantity-control,
html[data-theme="light"] .order-total-box,
html[data-theme="light"] .success-order-summary,
html[data-theme="light"] .delivery-option {
  border-color: var(--border);
  background: #f8f9fb;
  color: var(--text-primary);
}

html[data-theme="light"] .form-group select:disabled {
  border-color: #e2e8f0;
  background: #f1f5f9;
  color: #94a3b8;
}

html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group select:focus,
html[data-theme="light"] .form-group textarea:focus {
  background: #ffffff;
}

html[data-theme="light"] .quantity-control button,
html[data-theme="light"] .quantity-control input {
  color: var(--text-primary);
}

html[data-theme="light"] .quantity-control input {
  border-color: var(--border);
}

html[data-theme="light"] .order-total-box strong {
  color: #2f3338;
}

html[data-theme="light"] .success-order-summary li,
html[data-theme="light"] .summary-address,
html[data-theme="light"] .success-total {
  border-bottom-color: var(--border);
  color: #4d5157;
}

html[data-theme="light"] .modal {
  background: rgba(20, 25, 32, 0.55);
}

html[data-theme="light"] .toast {
  background: #ffffff;
}

@media (max-width: 520px) {
  .delivery-options {
    grid-template-columns: 1fr;
  }

  .delivery-option {
    min-height: 78px;
  }
}

/* هوية متجر قابلة للتخصيص */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand::before {
  display: none !important;
  content: none !important;
}

.brand-fallback-icon,
.brand-logo-wrap {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.brand-logo-wrap img,
.footer-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-brand-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo-wrap {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 11px;
  background: rgba(var(--accent-rgb), 0.1);
}

.footer-contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin-top: 14px;
}

.footer-contact-list a,
.footer-contact-list span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 0.83rem;
}

.footer-contact-list a:hover {
  color: var(--accent);
}

.footer-contact-list i {
  color: var(--accent);
}

html[data-theme="light"] .brand-fallback-icon,
html[data-theme="light"] .brand-logo-wrap,
html[data-theme="light"] .footer-logo-wrap {
  background: rgba(var(--accent-rgb), 0.1);
}

@media (max-width: 560px) {
  .brand-logo-wrap,
  .brand-fallback-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .footer-contact-list {
    flex-direction: column;
  }
}

/* توضيح تسعير التوصيل حسب الولاية */
.delivery-method-fieldset legend small {
  margin-inline-start: 8px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
}

/* ضمان ظهور جميع بطاقات المنتجات على الهواتف حتى إذا لم يعمل مراقب التمرير */
@media (max-width: 760px) {
  .product-card {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card {
    opacity: 1;
    transform: none;
  }
}


.optional-marker {
  color: var(--text-secondary);
  font-size: 0.82em;
  font-weight: 600;
}