:root {
  --pink: #c83d70;
  --pink-dark: #9f2854;
  --rose: #f6dce5;
  --blush: #fff6f8;
  --cream: #fffafb;
  --ink: #422b35;
  --muted: #917681;
  --line: #f0dfe5;
  --shadow: 0 18px 55px rgba(143, 53, 88, .09);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "Cairo", sans-serif;
}

button,
input,
select {
  font: inherit;
}

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

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

button {
  cursor: pointer;
}

/* الشريط العلوي */
.announcement {
  min-height: 32px;
  display: grid;
  place-items: center;
  background: #f2b7ca;
  color: #8f3b5a;
  font-size: 12px;
  font-weight: 700;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 250, 251, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #f4e7eb;
  min-height: 104px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px clamp(18px, 5vw, 76px);
  gap: 28px;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  grid-column: 1;
  grid-row: 1;
}

.icon-btn {
  border: 0;
  background: transparent;
  color: var(--pink-dark);
  font-size: 26px;
  min-width: 34px;
  min-height: 38px;
  position: relative;
}

.cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  place-items: center;
  background: var(--pink);
  color: white;
  border-radius: 50%;
  font: 700 10px "Cairo";
  width: 17px;
  height: 17px;
}

.brand {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  line-height: 1;
  min-width: 190px;
}

.brand-name {
  font-family: "Playfair Display", serif;
  font-size: clamp(39px, 4vw, 55px);
  letter-spacing: -2px;
  color: var(--pink);
  line-height: .95;
}

.brand-flower {
  font-size: 23px;
  color: #d55d87;
  margin-bottom: -3px;
}

.brand-tagline {
  font-size: 9px;
  letter-spacing: 2.3px;
  color: #8f5369;
  margin-top: 9px;
  direction: ltr;
}

.main-nav {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 2.2vw, 30px);
  font-size: 13px;
  font-weight: 700;
}

.main-nav a {
  white-space: nowrap;
  position: relative;
  padding: 12px 0;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--pink);
}

.main-nav a.active:after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 0;
  width: 100%;
  height: 2px;
  background: var(--pink);
}

.menu-toggle {
  display: none;
}

/* الواجهة الرئيسية */
.hero {
  min-height: 520px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 225, 234, .08), rgba(255, 224, 234, .9) 45%, #ffe8ee 73%, rgba(255, 236, 241, .15)),
    url("https://images.unsplash.com/photo-1611930022073-b7a4ba5fcccd?auto=format&fit=crop&w=2000&q=90") center / cover;
}

.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(255, 232, 239, .12), transparent 50%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(550px, 50%);
  margin-right: clamp(30px, 9vw, 145px);
  padding: 50px 0;
}

.eyebrow {
  color: var(--pink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
  margin: 0 0 12px;
  direction: ltr;
}

.hero h1 {
  font-size: clamp(29px, 4vw, 49px);
  line-height: 1.35;
  margin: 0;
  font-weight: 600;
}

.hero h1 span {
  font-family: "Playfair Display", serif;
  font-size: clamp(68px, 8vw, 105px);
  color: var(--pink);
  letter-spacing: -4px;
  direction: ltr;
  display: inline-block;
}

.hero h2 {
  font-size: 22px;
  color: var(--pink-dark);
  margin: 2px 0 12px;
}

.hero-copy {
  font-size: 14px;
  line-height: 2;
  color: #775663;
  max-width: 420px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: 100px;
  padding: 13px 28px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 24px #c83d7028;
}

.button-primary {
  background: var(--pink);
  color: white;
}

.button-primary:hover {
  background: var(--pink-dark);
}

.hero .button {
  margin-top: 12px;
  min-width: 165px;
}

.hero-note {
  margin-top: 30px;
  font-size: 11px;
  color: #986477;
}

.hero-note span {
  color: var(--pink);
  font-size: 17px;
  margin-left: 7px;
}

.hero-stamp {
  position: absolute;
  z-index: 1;
  left: 5%;
  bottom: 30px;
  border: 1px solid #c83d7070;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: grid;
  place-content: center;
  text-align: center;
  font: 10px/1.6 "Playfair Display", serif;
  color: var(--pink);
  transform: rotate(-13deg);
  letter-spacing: 2px;
}

.hero-stamp b {
  font-weight: 700;
}

/* عناوين الأقسام */
.section-wrap {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}

.categories {
  padding-top: 55px;
  padding-bottom: 58px;
}

.section-heading {
  text-align: center;
  margin-bottom: 28px;
}

.section-heading h2 {
  font-size: clamp(25px, 3vw, 35px);
  margin: 0 0 6px;
  font-weight: 800;
}

.section-heading > p:last-child {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.compact-heading {
  text-align: center;
  width: 100%;
  margin: 0 auto 30px;
}

.compact-heading .eyebrow {
  margin-bottom: 4px;
}

/* أقسام الجمال */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
}

.category-card {
  width: 100%;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  padding: 19px 8px 15px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 7px;
  color: var(--ink);
  transition: .25s;
}

.category-card:hover,
.category-card.selected {
  background: white;
  border-color: #f2d1dc;
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.category-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #fbe3eb;
  color: var(--pink);
  display: grid;
  place-items: center;
  font-size: 31px;
  font-family: serif;
}

.category-card b {
  font-size: 13px;
}

.category-card small {
  font-size: 10px;
  color: var(--muted);
}

/* المنتجات والبحث */
.products-section {
  background: linear-gradient(180deg, #fff7f9, #fffafb 75%);
  padding: 54px 0 65px;
  border-top: 1px solid #f9edf1;
}

.section-heading .eyebrow {
  margin-bottom: 7px;
}

.heading-flower {
  font-size: 21px;
  color: var(--pink);
  vertical-align: middle;
}

.product-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 23px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 0 16px;
  background: white;
  min-width: min(370px, 100%);
  height: 44px;
  color: var(--pink);
  flex: 1;
  max-width: 410px;
}

.search-box span {
  font-size: 25px;
}

.search-box input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  font-size: 12px;
  color: var(--ink);
}

.product-toolbar select {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: white;
  color: var(--ink);
  padding: 0 18px;
  font-size: 12px;
  outline-color: var(--pink);
}

/* شبكة المنتجات */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.product-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #f2e5e9;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/*
  صور المنتجات:
  الصورة تملأ الإطار بالكامل.
  المنتج في المنتصف.
  cover يزيل الفراغات البيضاء من الأطراف.
*/
.product-photo {
  position: relative;
  width: 100%;
  height: 280px;
  padding: 0;
  margin: 0;
  display: block;
  overflow: hidden;
  background: #f7e5eb;
  isolation: isolate;
}

.product-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  mix-blend-mode: normal;
  transition: transform .4s ease;
}

.product-card:hover .product-photo img {
  transform: scale(1.035);
}

/* شارة المنتج والمفضلة */
.product-label {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  background: #e98da9;
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
}

.new-label {
  background: #d9a0b1;
}

.favorite-btn {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 10px;
  border: 0;
  background: rgba(255, 255, 255, .88);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  color: var(--pink);
  font-size: 22px;
  line-height: 1;
}

.favorite-btn.is-favorite {
  background: var(--pink);
  color: white;
}

/* معلومات المنتجات */
.product-info {
  padding: 15px 15px 17px;
}

.product-category {
  font-size: 10px;
  color: #b47b90;
  margin: 0 0 3px;
}

.product-info h3 {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 3px;
  overflow-wrap: anywhere;
}

.product-desc {
  font-size: 10px;
  color: var(--muted);
  margin: 0 0 7px;
}

.rating {
  font-size: 13px;
  letter-spacing: 1px;
  color: #d34b7c;
}

.rating span {
  font-size: 10px;
  letter-spacing: 0;
  color: #ad929d;
}

.product-bottom {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 10px;
}

.product-bottom strong {
  font-size: 13px;
}

.add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--pink);
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 700;
  transition: background .2s;
}

.add-to-cart:hover {
  background: var(--pink-dark);
}

.add-to-cart span {
  font-size: 16px;
}

.center-action {
  text-align: center;
  margin-top: 32px;
}

.button-outline {
  background: transparent;
  border-color: #dca0b4;
  color: var(--pink-dark);
}

.button-outline:hover {
  background: #fff0f5;
}

.empty-state {
  text-align: center;
  padding: 32px;
  color: var(--muted);
}

/* النشرة البريدية */
.newsletter {
  margin-top: 62px;
  margin-bottom: 62px;
  border-radius: 18px;
  background: #fbe7ed;
  padding: 32px clamp(20px, 5vw, 58px);
  display: grid;
  grid-template-columns: auto 1fr minmax(260px, 390px);
  align-items: center;
  gap: 25px;
}

.newsletter-flower {
  font-size: 55px;
  color: #d56c91;
}

.newsletter h2 {
  font-size: 23px;
  margin: 0 0 5px;
}

.newsletter p:not(.eyebrow) {
  font-size: 12px;
  color: #8c6b78;
  margin: 0;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.newsletter-form input {
  min-width: 0;
  flex: 1;
  border: 1px solid #e9c6d2;
  border-radius: 0 8px 8px 0;
  padding: 12px;
  background: white;
  outline-color: var(--pink);
  font-size: 12px;
}

.newsletter-form button {
  border: 0;
  background: var(--pink);
  color: white;
  border-radius: 8px 0 0 8px;
  padding: 0 17px;
  font-size: 11px;
  font-weight: 700;
}

.newsletter-form small {
  width: 100%;
  font-size: 11px;
  color: var(--pink-dark);
  margin-top: 6px;
}

/* التذييل */
.site-footer {
  background: #fff1f5;
  border-top: 1px solid #f0dbe3;
  padding: 35px clamp(24px, 7vw, 100px) 20px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  align-items: center;
}

.footer-brand .brand-name {
  font-size: 38px;
}

.footer-brand p {
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0;
}

.footer-links {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 12px;
  color: #81596a;
}

.footer-links a:hover {
  color: var(--pink);
}

.copyright {
  grid-column: 1 / -1;
  border-top: 1px solid #efd8e1;
  padding-top: 16px;
  text-align: center;
  color: #a48794;
  font-size: 10px;
  margin: 5px 0 0;
}

/* الإشعارات */
.toast {
  position: fixed;
  z-index: 60;
  bottom: 24px;
  left: 24px;
  max-width: calc(100% - 48px);
  background: #422b35;
  color: white;
  border-radius: 12px;
  padding: 13px 19px;
  font-size: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: .25s;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* سلة التسوق */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.cart-overlay[hidden] {
  display: none;
}

.overlay-dismiss {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(44, 23, 33, 0.4);
  width: 100%;
  height: 100%;
}

.cart-drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(430px, 100%);
  background: #fffafb;
  box-shadow: 0 0 60px rgba(44, 23, 33, 0.2);
  display: flex;
  flex-direction: column;
  padding: 24px;
  animation: slide-in .22s ease-out;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 15px;
}

.cart-header h2 {
  font-size: 21px;
  margin: 0;
}

.cart-items {
  overflow: auto;
  flex: 1;
  padding: 12px 0;
}

.cart-empty {
  text-align: center;
  color: var(--muted);
  padding: 55px 0;
}

.cart-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.cart-row h3 {
  font-size: 13px;
  margin: 0 0 5px;
}

.cart-row p {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}

.quantity-controls button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  color: var(--pink);
}

.cart-row-price {
  font-weight: 700;
  font-size: 12px;
}

.cart-footer {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.checkout-btn {
  width: 100%;
  border: 0;
}

.cart-footer small {
  display: block;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  margin-top: 10px;
}

@keyframes slide-in {
  from {
    transform: translateX(30px);
    opacity: .5;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* التابلت */
@media (max-width: 1050px) {
  .site-header {
    gap: 15px;
    padding-inline: 24px;
  }

  .main-nav {
    gap: 14px;
    font-size: 11px;
  }

  .brand-name {
    font-size: 45px;
  }

  .hero {
    min-height: 470px;
  }

  .hero-content {
    margin-right: 6vw;
  }

  .product-photo {
    height: 240px;
  }

  .product-grid {
    gap: 12px;
  }

  .newsletter {
    grid-template-columns: auto 1fr;
  }

  .newsletter-form {
    grid-column: 2;
    max-width: 480px;
    width: 100%;
  }
}

/* الهاتف */
@media (max-width: 760px) {
  .announcement {
    font-size: 10px;
    min-height: 29px;
  }

  .site-header {
    min-height: 83px;
    grid-template-columns: 1fr auto 1fr;
    padding: 10px 15px;
    gap: 8px;
  }

  .header-tools {
    gap: 5px;
  }

  .header-tools .icon-btn {
    font-size: 23px;
    min-width: 29px;
  }

  .brand {
    min-width: 0;
  }

  .brand-name {
    font-size: 38px;
  }

  .brand-flower {
    font-size: 17px;
  }

  .brand-tagline {
    font-size: 7px;
    letter-spacing: 1.5px;
    margin-top: 6px;
  }

  .menu-toggle {
    display: block;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    font-size: 22px;
  }

  .header-tools {
    grid-column: 1;
    grid-row: 1;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: #fffafb;
    padding: 12px 20px 20px;
    box-shadow: 0 18px 25px #71344a14;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    padding: 11px 4px;
    border-bottom: 1px solid #f7e8ed;
  }

  .main-nav a.active:after {
    display: none;
  }

  .hero {
    min-height: 560px;
    align-items: flex-end;
    background-position: 35% center;
  }

  .hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      0deg,
      rgba(255, 237, 242, .98) 0%,
      rgba(255, 237, 242, .92) 43%,
      rgba(255, 237, 242, .05) 100%
    );
    z-index: 0;
  }

  .hero-content {
    width: 100%;
    margin: 0;
    padding: 210px 26px 36px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .hero h1 span {
    font-size: 76px;
  }

  .hero h2 {
    font-size: 19px;
  }

  .hero-copy {
    font-size: 12px;
    max-width: 390px;
  }

  .hero-stamp {
    width: 72px;
    height: 72px;
    font-size: 8px;
    left: 20px;
    bottom: 25px;
  }

  .hero-note {
    margin-top: 18px;
  }

  .section-wrap {
    width: calc(100% - 32px);
  }

  .categories {
    padding: 38px 0;
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 440px;
  }

  .category-card {
    padding: 13px 4px;
  }

  .category-icon {
    width: 56px;
    height: 56px;
    font-size: 26px;
  }

  .category-card b {
    font-size: 11px;
  }

  .category-card small {
    font-size: 9px;
    text-align: center;
  }

  .products-section {
    padding: 39px 0 45px;
  }

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

  .product-photo {
    height: clamp(190px, 56vw, 280px);
  }

  .product-info {
    padding: 12px 10px;
  }

  .product-info h3 {
    font-size: 13px;
  }

  .product-desc {
    min-height: 30px;
    font-size: 10px;
  }

  .product-bottom {
    gap: 9px;
  }

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

  .search-box {
    max-width: none;
    width: 100%;
  }

  .product-toolbar select {
    width: 100%;
  }

  .newsletter {
    margin-top: 35px;
    margin-bottom: 35px;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 25px 22px;
  }

  .newsletter-flower {
    display: none;
  }

  .newsletter h2 {
    font-size: 20px;
  }

  .newsletter-form {
    grid-column: auto;
    width: 100%;
  }

  .newsletter-form button {
    padding-inline: 12px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 28px 20px 18px;
  }

  .footer-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .copyright {
    grid-column: auto;
  }

  .cart-drawer {
    padding: 19px;
  }
}

/* الهواتف الصغيرة */
@media (max-width: 380px) {
  .header-tools {
    gap: 0;
  }

  .header-tools .icon-btn {
    font-size: 20px;
    min-width: 25px;
  }

  .brand-name {
    font-size: 33px;
  }

  .brand-tagline {
    font-size: 6px;
  }

  .product-grid {
    gap: 8px;
  }

  .product-photo {
    height: 180px;
  }

  .product-info {
    padding: 10px 8px;
  }

  .product-info h3 {
    font-size: 12px;
  }

  .add-to-cart {
    font-size: 10px;
  }

  .category-card b {
    font-size: 10px;
  }
}

/* احترام إعدادات تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* توسيط صورة مرطب الشفاه والخدود */
#productGrid .product-card:nth-child(2) .product-photo img {
  object-position: center center !important;
}
#productGrid .product-card:nth-child(2) .product-photo img {
  object-position: 50% 50% !important;
  transform: none !important;
} 
@media (max-width: 760px) {
  #productGrid .product-card:nth-child(2) .product-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: translateY(0px) scale(1.5) !important;
    transform-origin: center center;
  }
}
@media (max-width: 760px) {
  #productGrid .product-card:nth-child(1) .product-photo img {
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.5) !important;
    transform-origin: center center;
  }
}
@media (max-width: 760px) {
  #productGrid .product-card:nth-child(3) .product-photo img {
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.5) !important;
    transform-origin: center center;
  }
}
@media (max-width: 760px) {
  #productGrid .product-card {
    display: flex !important;
    flex-direction: column !important;
  }

  #productGrid .product-card .product-actions {
    margin-top: auto !important;
    padding-top: 30px !important;
  }
}
@media screen and (max-width: 760px) {
  #productGrid .product-card:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
  }

  #productGrid .product-card:nth-child(2) .product-actions {
    margin-top: auto !important;
  }
}

/* محاذاة السعر وزر السلة في الهاتف فقط */
@media screen and (max-width: 760px) {
  #productGrid .product-card {
    display: flex;
    flex-direction: column;
  }

  #productGrid .product-card .product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  #productGrid .product-card .product-bottom {
    display: flex !important;
    align-items: center !important;
    margin-top: auto !important;
    gap: 8px;
  }

  #productGrid .product-card .product-bottom strong,
  #productGrid .product-card .product-bottom .add-to-cart {
    margin-top: 0 !important;
    align-self: center !important;
  }
}

/* إصلاح مهم: بعض قواعد الهاتف كانت تفرض display:flex !important،
   فتمنع خاصية hidden من إخفاء المنتجات غير المطابقة للفئة. */
#productGrid .product-card[hidden] {
  display: none !important;
}

#emptyState[hidden] {
  display: none !important;
}


/* ===== أسعار ديناميكية وحالات التحميل ===== */
.price-box{display:flex;flex-direction:column;line-height:1.3}
.old-price{font-size:.8em;color:#9a8a91;font-weight:400}
.grid-note{grid-column:1/-1;text-align:center;color:#8a7a82;padding:32px 0}
.add-to-cart:disabled{opacity:.55;cursor:not-allowed}


/* =====================================================
   الوضع الداكن — أسود دافئ، وردي هادئ، ولمسات شامبانيا ذهبية
   ===================================================== */
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.theme-toggle { display: inline-grid; place-items: center; }
.theme-toggle svg { width: .88em; height: .88em; display: block; transform: translateY(var(--theme-icon-shift, .16em)); }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

[data-theme="dark"] {
  color-scheme: dark;
  --pink: #d65a86;
  --pink-dark: #a63a62;
  --rose: #2a1c22;
  --blush: #1a1216;
  --cream: #0f0b0d;
  --ink: #f4eaee;
  --muted: #b3a0a8;
  --line: #2c2126;
  --gold: #d4b48a;
  --shadow: 0 22px 60px rgba(0, 0, 0, .5);
}
[data-theme="dark"] ::selection { background: #d65a86; color: #fff; }
[data-theme="dark"] .eyebrow { color: var(--gold); }
[data-theme="dark"] .heading-flower, [data-theme="dark"] .brand-flower, [data-theme="dark"] .newsletter-flower { color: var(--gold); }

/* الشريط العلوي والهيدر */
[data-theme="dark"] .announcement { background: linear-gradient(90deg, #2a171f, #4a2b38 50%, #2a171f); color: #e8cfa8; letter-spacing: .04em; }
[data-theme="dark"] .site-header { background: rgba(15, 11, 13, .86); border-bottom-color: #2a2025; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
[data-theme="dark"] .brand-tagline { color: #c9a98a; }
[data-theme="dark"] .main-nav a:hover, [data-theme="dark"] .main-nav a.active { color: #f0b3c9; }
[data-theme="dark"] .icon-btn { color: var(--ink); }

/* الواجهة الرئيسية */
[data-theme="dark"] .hero-image { filter: brightness(.78) saturate(.92); }
[data-theme="dark"] .hero:after { background: linear-gradient(0deg, rgba(15, 11, 13, .6), transparent 55%); }
[data-theme="dark"] .hero-copy { color: #cdbac2; }
[data-theme="dark"] .hero-note { color: var(--gold); }
[data-theme="dark"] .hero-stamp { border-color: rgba(212, 180, 138, .5); color: var(--gold); }
[data-theme="dark"] .button-primary { box-shadow: 0 10px 28px rgba(214, 90, 134, .25); }
[data-theme="dark"] .button:hover { box-shadow: 0 12px 32px rgba(214, 90, 134, .35); }
[data-theme="dark"] .button-outline { border-color: rgba(212, 180, 138, .55); color: var(--gold); background: transparent; }
[data-theme="dark"] .button-outline:hover { background: rgba(212, 180, 138, .1); }

/* الأقسام */
[data-theme="dark"] .category-card { background: #181214; border-color: #2c2126; }
[data-theme="dark"] .category-card:hover, [data-theme="dark"] .category-card.selected { border-color: rgba(212, 180, 138, .55); box-shadow: 0 14px 36px rgba(0, 0, 0, .45); }
[data-theme="dark"] .category-icon { background: #2a1c22; color: var(--gold); }

/* المنتجات */
[data-theme="dark"] .products-section { background: linear-gradient(180deg, #140e11, #0f0b0d 75%); border-top-color: #241a1f; }
[data-theme="dark"] .product-card { background: #181214; border-color: #2c2126; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
[data-theme="dark"] .product-card:hover { border-color: rgba(212, 180, 138, .5); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(212, 180, 138, .12); }
[data-theme="dark"] .product-photo { background: #241a1f; }
[data-theme="dark"] .product-photo img { filter: brightness(.94) contrast(1.03); }
[data-theme="dark"] .product-label { background: #a63a62; color: #fff; }
[data-theme="dark"] .new-label { background: #b6935f; color: #1a1210; }
[data-theme="dark"] .favorite-btn { background: rgba(20, 14, 17, .78); color: #f0b3c9; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-theme="dark"] .product-category { color: #d9a9bb; }
[data-theme="dark"] .product-desc { color: var(--muted); }
[data-theme="dark"] .product-bottom strong { color: #f4dfc4; }
[data-theme="dark"] .old-price, [data-theme="dark"] .grid-note { color: #8c7a83; }
[data-theme="dark"] .empty-state { color: var(--muted); }

/* حقول البحث والنماذج */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea,
[data-theme="dark"] .search-box { background: #140f11; color: var(--ink); border-color: #3a2a32; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #86737c; }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--pink); outline-color: var(--pink); }
[data-theme="dark"] .search-box input { background: transparent; }

/* النشرة والفوتر */
[data-theme="dark"] .newsletter { background: linear-gradient(135deg, #1d1317, #150f12); border: 1px solid #2c2126; }
[data-theme="dark"] .newsletter p:not(.eyebrow) { color: var(--muted); }
[data-theme="dark"] .site-footer { background: #0b0809; border-top-color: #241a1f; }
[data-theme="dark"] .footer-links { color: #c2aeb6; }
[data-theme="dark"] .footer-links a:hover { color: var(--gold); }
[data-theme="dark"] .copyright { border-top-color: #241a1f; color: #8c7a83; }

/* السلة والطلب */
[data-theme="dark"] .toast { background: #f4eaee; color: #1a1216; }
[data-theme="dark"] .overlay-dismiss { background: rgba(0, 0, 0, .62); }
[data-theme="dark"] .cart-drawer { background: #140f11; box-shadow: 0 0 60px rgba(0, 0, 0, .6); border-inline-start: 1px solid #2c2126; }
[data-theme="dark"] .cart-header, [data-theme="dark"] .cart-footer { border-color: #2c2126; }
[data-theme="dark"] .cart-empty { color: var(--muted); }

/* قائمة الجوال */
@media (max-width: 860px) {
  [data-theme="dark"] .main-nav { background: #140f11; box-shadow: 0 18px 30px rgba(0, 0, 0, .55); }
  [data-theme="dark"] .main-nav a { border-bottom-color: #2a2025; }
}
@media (prefers-reduced-motion: reduce) { html.theme-anim, html.theme-anim * { transition: none !important; } }

/* ===== محاذاة زر «أضيفي إلى السلة» في مستوى واحد ===== */
/* البطاقات في نفس الصف تتساوى بالارتفاع، والسعر والزر يلتصقان بأسفل كل بطاقة مهما اختلف طول الاسم أو الوصف */
#productGrid { align-items: stretch; }
#productGrid .product-card { display: flex; flex-direction: column; height: 100%; }
#productGrid .product-card .product-info { display: flex; flex-direction: column; flex: 1 1 auto; }
#productGrid .product-card .product-bottom { margin-top: auto; padding-top: 10px; }

/* ===== النجوم والنصوص في مستوى واحد بين كل البطاقات ===== */
/* الاسم والوصف يحجزان سطرين ثابتين، وصف النجوم له ارتفاع ثابت، فتقع النجوم على خط واحد */
#productGrid .product-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 3.4em; }
#productGrid .product-card .product-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.5; min-height: 3em; }
#productGrid .product-card .rating { display: flex; align-items: center; gap: 4px; min-height: 22px; white-space: nowrap; }

/* ===== الوصف ملاصق للاسم، والنجوم والزر في أسفل البطاقة بمستوى واحد ===== */
#productGrid .product-card h3 { min-height: 0; margin: 0 0 2px; }
#productGrid .product-card .product-desc { min-height: 0; margin: 0 0 8px; }
#productGrid .product-card .rating { margin-top: auto; }
#productGrid .product-card .rating + .product-bottom { margin-top: 0; }
#productGrid .product-card .rating:empty { display: none; }
#productGrid .product-card .rating:empty + .product-bottom { margin-top: auto; }

/* ===== إصلاح الهاتف: النجوم تلتصق بالأسفل ولا تتقاسم المساحة مع منطقة الزر ===== */
/* قاعدة الهاتف القديمة تستخدم !important، لذا نكرر الأولوية هنا */
#productGrid .product-card .rating + .product-bottom { margin-top: 0 !important; }
#productGrid .product-card .rating:empty + .product-bottom { margin-top: auto !important; }
#productGrid .product-card .rating { margin-top: auto !important; }

/* ===== شريط علوي زجاجي شفاف ===== */
.site-header {
  background: linear-gradient(180deg, rgba(255, 250, 251, .74), rgba(255, 244, 247, .56));
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  border-bottom: 1px solid rgba(240, 196, 212, .5);
  box-shadow: 0 8px 32px rgba(200, 61, 112, .05), inset 0 -1px 0 rgba(255, 255, 255, .55);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.is-scrolled {
  background: linear-gradient(180deg, rgba(255, 250, 251, .84), rgba(255, 244, 247, .7));
  box-shadow: 0 12px 38px rgba(143, 59, 90, .1), inset 0 -1px 0 rgba(255, 255, 255, .6);
}
[data-theme="dark"] .site-header {
  background: linear-gradient(180deg, rgba(20, 14, 17, .62), rgba(15, 11, 13, .46));
  border-bottom-color: rgba(212, 180, 138, .18);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
[data-theme="dark"] .site-header.is-scrolled {
  background: linear-gradient(180deg, rgba(20, 14, 17, .78), rgba(15, 11, 13, .62));
}


/* ===== أيقونة إنستغرام الزجاجية في الفوتر ===== */
.social-link {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: 12px;
  border-radius: 50%;
  color: var(--pink-dark, #8f3b5a);
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(200, 61, 112, .22);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 8px 22px rgba(200, 61, 112, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.social-link svg { width: 24px; height: 24px; display: block; }
.social-link:hover, .social-link:focus-visible {
  transform: translateY(-3px);
  color: #fff;
  background: linear-gradient(135deg, var(--pink, #c83d70), var(--pink-dark, #8f3b5a));
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(200, 61, 112, .32);
}
.social-link:focus-visible { outline: 2px solid var(--pink, #c83d70); outline-offset: 3px; }
[data-theme="dark"] .social-link {
  color: #e8cfa8;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(212, 180, 138, .3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
}
[data-theme="dark"] .social-link:hover, [data-theme="dark"] .social-link:focus-visible { color: #fff; border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .social-link { transition: none; } .social-link:hover { transform: none; } }

/* ===== أيقونة إنستغرام: حجم أصغر وملاصقة للعبارة ===== */
.social-link { width: 34px; height: 34px; margin-top: 2px; box-shadow: 0 5px 14px rgba(200, 61, 112, .12), inset 0 1px 0 rgba(255, 255, 255, .7); }
.social-link svg { width: 16px; height: 16px; }
.social-link:hover, .social-link:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(200, 61, 112, .3); }

/* ===== ترتيب الفوتر: natassia ← العبارة مباشرة تحتها ← أيقونة إنستغرام ===== */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.footer-brand .brand-name { display: block; line-height: 1.05; margin: 0; }
.footer-brand p { margin: 3px 0 0; line-height: 1.6; }
.footer-brand .social-link { margin-top: 8px; }
@media (max-width: 760px) { .footer-brand { align-items: center; } }

/* ===== أيقونتا التواصل: بجانب بعض وفي منتصف العبارة ===== */
.footer-brand .brand-tag { display: flex; flex-direction: column; align-items: center; }
.footer-brand .social-links { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 8px; }
.footer-brand .social-links .social-link { margin-top: 0; }


/* =====================================================
   صورة الواجهة الرئيسية الجديدة
   حاسوب: الصورة كاملة على اليسار تتلاشى نحو النص | هاتف: قصّة مخصصة أعلى الواجهة
   ===================================================== */
.hero {
  min-height: clamp(520px, 36vw, 720px);
  background: linear-gradient(90deg, #fff4f7, #ffe6ed 55%, #ffe8ee);
}
.hero-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 58%;
  background: url("hero.webp") left center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 74%, transparent 100%);
  mask-image: linear-gradient(to right, #000 74%, transparent 100%);
  pointer-events: none;
}
[data-theme="dark"] .hero { background: linear-gradient(90deg, #140e11, #100b0e); }
[data-theme="dark"] .hero-image { filter: brightness(.74) saturate(.95); }

@media (max-width: 760px) {
  .hero {
    min-height: 0;
    align-items: flex-end;
    background: linear-gradient(180deg, #fff4f7, #ffe8ee);
  }
  .hero:before { display: none; }
  .hero-image {
    inset: 0 0 auto 0;
    width: 100%;
    height: 330px;
    background: url("hero-mobile.webp") 30% top / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
  .hero-content { padding-top: 300px; }
  [data-theme="dark"] .hero { background: linear-gradient(180deg, #140e11, #0f0b0d); }
}

/* =====================================================
   واجهة الحاسوب: الصورة تملأ الواجهة كلها وتبدو واضحة
   طبقة متدرجة ناعمة خلف النص فقط، بلا نصف مسطح ونصف صورة
   ===================================================== */
@media (min-width: 761px) {
  .hero { min-height: clamp(520px, 44vw, 740px); background: #ffe6ed; }
  .hero-image {
    left: 0;
    right: 0;
    width: 100%;
    background: url("hero.webp") 62% 28% / cover no-repeat;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero:after {
    background: linear-gradient(to left,
      rgba(255, 238, 243, .95) 0%,
      rgba(255, 238, 243, .99) 38%,
      rgba(255, 238, 243, .22) 62%,
      rgba(255, 238, 243, 0) 82%);
  }
  .hero-content { text-shadow: 0 1px 14px rgba(255, 240, 245, .55); }

  [data-theme="dark"] .hero { background: #1a1116; }
  [data-theme="dark"] .hero-image { filter: brightness(.88) saturate(1); }
  [data-theme="dark"] .hero:after {
    background: linear-gradient(to left,
      rgba(34, 17, 26, .84) 0%,
      rgba(34, 17, 26, .7) 38%,
      rgba(34, 17, 26, .25) 62%,
      rgba(34, 17, 26, 0) 82%);
  }
  [data-theme="dark"] .hero-content { text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
}

/* ===== الهاتف: المرأة وأحمر الشفاه معاً، والصورة تُعرض كاملة بنسبتها دائماً ===== */
@media (max-width: 760px) {
  .hero-image {
    height: auto;
    aspect-ratio: 1240 / 915;
    background: url("hero-mobile.webp") center top / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  }
  .hero-content { padding-top: calc(73vw - 4px); }
}

/* =====================================================
   الهاتف: صورة قابلة للتحريك يميناً ويساراً + تدرج شفاف من الأسفل ومن اليمين
   غيّري الأرقام الثلاثة التالية فقط:
   --hero-m-x       موضع الصورة: 0% تُظهر المرأة أكثر | 100% تُظهر المنتجات أكثر
   --hero-m-fade-r  عرض التدرج الشفاف على الجهة اليمنى (0% يلغيه)
   --hero-m-fade-b  ارتفاع التدرج الشفاف في الأسفل (0% يلغيه)
   ===================================================== */
:root { --hero-m-x: 40%; --hero-m-fade-r: 10%; --hero-m-fade-b: 14%; }
@media (max-width: 760px) {
  .hero-image {
    aspect-ratio: 1.45;
    background: url("hero-mobile.webp") var(--hero-m-x) top / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-m-fade-b)), transparent 100%), linear-gradient(to left, transparent 0, #000 var(--hero-m-fade-r));
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-m-fade-b)), transparent 100%), linear-gradient(to left, transparent 0, #000 var(--hero-m-fade-r));
    mask-composite: intersect;
  }
  .hero-content { padding-top: calc(100vw / 1.45 - 4px); }
}

/* ===== إصلاح الخط الرفيع أسفل الصورة: منع تكرار القناع الشفاف ===== */
.hero-image {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
@media (max-width: 760px) {
  .hero-image { margin-bottom: -1px; }
}

/* =====================================================
   الهاتف: تدرج الصورة بطبقات بدل القناع (لا خط رفيع في الأسفل)
   الخلفية لون واحد، والتدرجان من نفس اللون فيذوب حدّ الصورة تماماً
   ===================================================== */
@media (max-width: 760px) {
  :root { --hero-bg: #ffe9ef; --hero-ov: 255, 233, 239; }
  [data-theme="dark"] { --hero-bg: #150f12; --hero-ov: 28, 20, 24; } /* مُعوَّض لأن الصورة تُخفَّض إضاءتها في الداكن */

  .hero, [data-theme="dark"] .hero { background: var(--hero-bg); }
  .hero-image {
    -webkit-mask-image: none;
    mask-image: none;
    margin-bottom: 0;
  }
  .hero-image::before,
  .hero-image::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  /* تدرج الأسفل: يمتد 2 بكسل تحت الصورة لتغطية أي فاصل */
  .hero-image::before {
    left: 0;
    right: 0;
    bottom: -2px;
    height: calc(var(--hero-m-fade-b) + 2px);
    background: linear-gradient(to bottom, rgba(var(--hero-ov), 0), rgb(var(--hero-ov)) calc(100% - 2px));
  }
  /* تدرج اليمين */
  .hero-image::after {
    top: 0;
    bottom: -2px;
    right: -1px;
    width: calc(var(--hero-m-fade-r) + 1px);
    background: linear-gradient(to left, rgb(var(--hero-ov)), rgba(var(--hero-ov), 0));
  }
}

/* ===== الوضع الداكن: جودة صور المنتجات في الهاتف + توحيد لون الوسوم ===== */
/* فلاتر CSS على الصور وتمويه الخلفية فوقها يُخفّضان وضوح الصورة في متصفحات الجوال، فنلغيهما */
[data-theme="dark"] .product-photo img { filter: none; }
[data-theme="dark"] .favorite-btn { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 14, 17, .88); }
/* كل الوسوم (جديد / الأكثر مبيعاً / جيد / تخفيض) بنفس اللون الوردي */
[data-theme="dark"] .product-label,
[data-theme="dark"] .new-label { background: #a63a62; color: #fff; }


/* =====================================================
   استمارة تأكيد الطلب — تصميم زجاجي وردي بلمسات ذهبية
   متجاوبة: هاتف (360px) ← كمبيوتر
   ===================================================== */
#orderPage {
  --o-magenta: #c43b75;
  --o-maroon: #8a1c4a;
  --o-gold: rgba(222, 180, 148, .85);
  --o-text: #4a2a38;
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: transparent;
}
#orderPage.open { display: flex; }

#orderPage .order-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 238, 244, .38);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-tap-highlight-color: transparent;
}

/* البطاقة */
#orderPage .order-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  gap: 0;
  border-radius: 30px;
  border: 1.5px solid var(--o-gold);
  background: linear-gradient(165deg, #fffdfd 0%, #fff4f7 45%, #fde9ef 100%);
  box-shadow: 0 30px 80px rgba(150, 40, 85, .28), 0 0 0 5px rgba(255, 255, 255, .35), inset 0 1px 0 #fff;
  color: var(--o-text);
  outline: none;
}

/* الزخارف */
#orderPage .deco { position: absolute; pointer-events: none; z-index: 0; }
#orderPage .deco-leaf { top: 62px; left: 0; width: clamp(90px, 24%, 150px); height: auto; }
#orderPage .deco-corner { bottom: 0; width: clamp(100px, 28%, 170px); height: auto; }
#orderPage .deco-bl { left: 0; }
#orderPage .deco-br { right: 0; width: clamp(70px, 20%, 120px); }

/* المحتوى القابل للتمرير */
#orderPage .order-scroll {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: clamp(16px, 4vw, 26px) clamp(14px, 4vw, 28px) clamp(16px, 3.5vw, 22px);
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 61, 112, .3) transparent;
}
#orderPage .order-scroll::-webkit-scrollbar { width: 6px; }
#orderPage .order-scroll::-webkit-scrollbar-thumb { background: rgba(200, 61, 112, .3); border-radius: 6px; }

/* الرأس: الشعار يمينًا، زر الإغلاق يسارًا */
#orderPage .order-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 clamp(6px, 1.5vw, 10px);
}
#orderPage .order-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
  color: var(--o-magenta);
  direction: ltr;
}
#orderPage .logo-lotus { width: 18px; height: 12px; margin-bottom: -2px; }
#orderPage .logo-text {
  font-family: "Playfair Display", "Cairo", serif;
  font-weight: 700;
  font-size: clamp(26px, 6.5vw, 34px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--o-magenta);
}
#orderPage .logo-line {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 3px;
  background: linear-gradient(90deg, transparent, #d9ad78 25%, #d9ad78 75%, transparent);
}
#orderPage .logo-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: #d9ad78;
  transform: translate(-50%, -50%) rotate(45deg);
}

#orderPage .close-order {
  flex: 0 0 auto;
  width: clamp(42px, 10vw, 52px);
  height: clamp(42px, 10vw, 52px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--o-gold);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #fde6ee);
  color: var(--o-magenta);
  box-shadow: 0 4px 12px rgba(190, 80, 120, .2), inset 0 1px 0 #fff;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
#orderPage .close-order:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(190, 80, 120, .3); }
#orderPage .close-order svg { width: 46%; height: 46%; }

/* العنوان */
#orderPage #orderTitle {
  margin: 0;
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--o-maroon);
}
#orderPage .order-subtitle {
  margin: 4px 0 clamp(12px, 3vw, 18px);
  font-size: clamp(13px, 3.6vw, 16px);
  line-height: 1.5;
  color: #5a3b48;
}

/* ملخص الطلب */
#orderPage #orderSummary {
  margin: 0 0 clamp(14px, 3.5vw, 22px);
  padding: clamp(12px, 3vw, 16px) clamp(14px, 3.5vw, 22px);
  border: 1.5px solid var(--o-gold);
  border-radius: 24px;
  background: linear-gradient(180deg, #fde8ef 0%, #fbdbe6 100%);
  box-shadow: 0 8px 22px rgba(190, 80, 120, .12), inset 0 1px 0 rgba(255, 255, 255, .8);
  font-size: inherit;
  overflow: hidden;
}
#orderPage .summary-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 800;
  color: var(--o-maroon);
}
#orderPage .summary-title svg { width: 24px; height: 24px; flex: 0 0 auto; }
#orderPage .summary-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: clamp(13px, 3.6vw, 16px);
  line-height: 1.5;
  color: var(--o-text);
}
#orderPage .summary-row span:first-child { min-width: 0; overflow-wrap: anywhere; }
#orderPage .summary-row span:last-child { flex: 0 0 auto; white-space: nowrap; }
#orderPage .summary-total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1.5px solid;
  border-image: linear-gradient(90deg, #e58cae, #d4568a, #e58cae) 1;
  font-weight: 800;
  color: var(--o-maroon);
  font-size: clamp(15px, 4vw, 18px);
}
#orderPage .summary-total span:last-child { font-size: clamp(18px, 5vw, 24px); }

/* الحقول: التسمية يمينًا والحقل يسارًا */
#orderPage .order-fields {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.6vw, 14px);
  margin: 0;
}
#orderPage .order-field {
  display: grid;
  grid-template-columns: clamp(118px, 29%, 160px) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
#orderPage .order-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 3.4vw, 16px);
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  color: #3d2230;
}
#orderPage .order-field label svg {
  flex: 0 0 auto;
  width: clamp(20px, 5.5vw, 26px);
  height: clamp(20px, 5.5vw, 26px);
  color: var(--o-magenta);
}
#orderPage .order-field input,
#orderPage .order-field textarea {
  width: 100%;
  min-width: 0;
  height: clamp(46px, 12vw, 56px);
  padding: 0 18px;
  border: 1.5px solid var(--o-gold);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #fff1f5 100%);
  box-shadow: 0 3px 8px rgba(190, 100, 130, .14), inset 0 1px 0 #fff;
  font: inherit;
  font-size: 16px; /* يمنع تكبير iOS التلقائي */
  color: var(--o-text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#orderPage .order-field textarea {
  min-height: clamp(46px, 12vw, 56px);
  max-height: 130px;
  padding-block: clamp(11px, 3vw, 14px);
  line-height: 1.5;
  resize: none;
  field-sizing: content;
}
#orderPage .order-field input::placeholder,
#orderPage .order-field textarea::placeholder { color: #a99ca2; opacity: 1; }
#orderPage .order-field input:focus,
#orderPage .order-field textarea:focus {
  border-color: var(--o-magenta);
  box-shadow: 0 0 0 4px rgba(200, 61, 112, .16), 0 3px 8px rgba(190, 100, 130, .14);
}

/* الأزرار */
#orderPage #submitOrder,
#orderPage .back-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 18px);
  width: 100%;
  margin: 0;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
#orderPage #submitOrder {
  height: clamp(54px, 14vw, 64px);
  margin-top: clamp(6px, 2vw, 12px);
  padding: 0 20px;
  border: 2px solid rgba(236, 200, 160, .95);
  background: linear-gradient(180deg, #d9497f 0%, #b32a60 55%, #94194a 100%);
  color: #fff;
  font-size: clamp(18px, 5vw, 22px);
  box-shadow: 0 10px 22px rgba(160, 30, 80, .38), inset 0 2px 0 rgba(255, 255, 255, .28);
}
#orderPage #submitOrder svg { width: clamp(22px, 6vw, 28px); height: clamp(22px, 6vw, 28px); flex: 0 0 auto; }
#orderPage #submitOrder:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
#orderPage #submitOrder:disabled { opacity: .75; cursor: progress; }
#orderPage .back-order {
  height: clamp(46px, 12vw, 54px);
  padding: 0 20px;
  border: 1.5px solid #c8457a;
  background: linear-gradient(180deg, #fff3f7, #fde4ec);
  color: #b8336a;
  font-size: clamp(15px, 4.2vw, 18px);
}
#orderPage .back-order svg { width: clamp(20px, 5.5vw, 24px); height: clamp(20px, 5.5vw, 24px); flex: 0 0 auto; }
#orderPage .back-order:hover { background: #fdd9e5; transform: translateY(-1px); }

/* الملاحظة السفلية */
#orderPage .order-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: clamp(4px, 1.5vw, 8px) 0 clamp(14px, 4vw, 22px);
  padding-inline: clamp(0px, 6vw, 30px);
  font-size: clamp(11.5px, 3.2vw, 14px);
  line-height: 1.6;
  color: #6b4a58;
  text-align: center;
}
#orderPage .order-note svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--o-magenta); }

/* شاشات صغيرة جدًا */
@media (max-width: 380px) {
  #orderPage { padding: 8px; }
  #orderPage .order-card { border-radius: 24px; max-height: calc(100dvh - 16px); }
  #orderPage .order-field { grid-template-columns: 108px minmax(0, 1fr); gap: 6px; }
  #orderPage .order-field label { font-size: 11.5px; }
  #orderPage .order-field label { gap: 5px; }
  #orderPage .order-field input, #orderPage .order-field textarea { padding-inline: 12px; border-radius: 16px; }
}

/* الكمبيوتر */
@media (min-width: 900px) {
  #orderPage .order-card { max-width: 600px; }
}

/* الكمبيوتر بارتفاع محدود: ضغط بسيط ليظهر كل شيء دون تمرير */
@media (min-width: 600px) and (max-height: 880px) {
  #orderPage .order-scroll { padding-block: 16px 14px; }
  #orderPage .order-subtitle { margin-bottom: 10px; }
  #orderPage #orderSummary { margin-bottom: 12px; padding-block: 10px; }
  #orderPage .order-fields { gap: 8px; }
  #orderPage .order-field input, #orderPage .order-field textarea { height: 46px; min-height: 46px; }
  #orderPage #submitOrder { height: 54px; margin-top: 4px; }
  #orderPage .back-order { height: 44px; }
  #orderPage .order-note { margin-bottom: 14px; }
}
@media (min-width: 600px) and (max-height: 740px) {
  #orderPage #orderTitle { font-size: 26px; }
  #orderPage .order-field input, #orderPage .order-field textarea { height: 42px; min-height: 42px; }
  #orderPage #submitOrder { height: 48px; }
  #orderPage .back-order { height: 40px; }
}

/* الشاشات القصيرة (هاتف أفقي) */
@media (max-height: 560px) {
  #orderPage { padding: 8px; }
  #orderPage .order-card { max-height: calc(100dvh - 16px); }
}

/* ===== الوضع الداكن ===== */
[data-theme="dark"] #orderPage {
  --o-magenta: #e0679a;
  --o-maroon: #f6c9da;
  --o-gold: rgba(212, 180, 138, .5);
  --o-text: #efdde4;
}
[data-theme="dark"] #orderPage .order-backdrop { background: rgba(8, 5, 7, .62); }
[data-theme="dark"] #orderPage .order-card {
  background: linear-gradient(165deg, #201619 0%, #1a1215 55%, #241720 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 5px rgba(255, 255, 255, .04);
}
[data-theme="dark"] #orderPage .deco { opacity: .55; }
[data-theme="dark"] #orderPage .order-subtitle,
[data-theme="dark"] #orderPage .order-note { color: #cdb9c1; }
[data-theme="dark"] #orderPage .order-field label { color: #f1dde6; }
[data-theme="dark"] #orderPage .close-order { background: linear-gradient(145deg, #2c1e25, #231820); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
[data-theme="dark"] #orderPage #orderSummary {
  background: linear-gradient(180deg, #2b1c24, #231720);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
}
[data-theme="dark"] #orderPage .summary-title svg { opacity: .95; }
[data-theme="dark"] #orderPage .order-field input,
[data-theme="dark"] #orderPage .order-field textarea {
  background: linear-gradient(180deg, #181114, #140e11);
  border-color: rgba(212, 180, 138, .35);
  color: var(--o-text);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}
[data-theme="dark"] #orderPage .order-field input::placeholder,
[data-theme="dark"] #orderPage .order-field textarea::placeholder { color: #86737c; }
[data-theme="dark"] #orderPage .back-order { background: #2a1c22; border-color: #b8467a; color: #f0b3c9; }
[data-theme="dark"] #orderPage .back-order:hover { background: #36242d; }


/* ===== تصغير الاستمارة (مقاس مدمج وأنيق) ===== */
#orderPage { padding: 12px; }
#orderPage .order-card { max-width: 380px; border-radius: 24px; max-height: calc(100dvh - 24px); }
#orderPage .order-scroll { padding: 14px 16px 12px; }
#orderPage .order-top { margin-bottom: 4px; }
#orderPage .logo-text { font-size: 24px; }
#orderPage .logo-lotus { width: 15px; height: 10px; }
#orderPage .close-order { width: 38px; height: 38px; }
#orderPage #orderTitle { font-size: 24px; }
#orderPage .order-subtitle { font-size: 12.5px; margin: 2px 0 10px; }
#orderPage #orderSummary { margin-bottom: 12px; padding: 9px 14px; border-radius: 18px; }
#orderPage .summary-title { font-size: 14px; margin-bottom: 3px; }
#orderPage .summary-title svg { width: 20px; height: 20px; }
#orderPage .summary-row { font-size: 12.5px; padding: 2px 0; }
#orderPage .summary-total { font-size: 14px; margin-top: 5px; padding-top: 7px; }
#orderPage .summary-total span:last-child { font-size: 18px; }
#orderPage .order-fields { gap: 8px; }
#orderPage .order-field { grid-template-columns: 104px minmax(0, 1fr); gap: 6px; }
#orderPage .order-field label { font-size: 12px; gap: 5px; }
#orderPage .order-field label svg { width: 18px; height: 18px; }
#orderPage .order-field input,
#orderPage .order-field textarea { height: 40px; min-height: 40px; padding: 0 12px; border-radius: 14px; font-size: 16px; }
#orderPage .order-field textarea { padding-block: 8px; }
#orderPage #submitOrder { height: 46px; margin-top: 4px; font-size: 16px; gap: 10px; }
#orderPage #submitOrder svg { width: 20px; height: 20px; }
#orderPage .back-order { height: 38px; font-size: 13.5px; }
#orderPage .back-order svg { width: 18px; height: 18px; }
#orderPage .order-note { font-size: 11px; margin: 2px 0 14px; padding-inline: 8px; gap: 6px; }
#orderPage .order-note svg { width: 16px; height: 16px; }
#orderPage .deco-leaf { width: 80px; top: 52px; }
#orderPage .deco-corner { width: 90px; }
#orderPage .deco-br { width: 64px; }

/* الكمبيوتر: بدون سكرول */
@media (min-width: 700px) {
  #orderPage .order-card { max-width: 420px; }
  #orderPage .order-scroll { padding: 18px 22px 12px; overflow-y: visible; }
  #orderPage .order-field { grid-template-columns: 110px minmax(0, 1fr); }
  #orderPage .order-field label { font-size: 13px; }
  #orderPage .order-field input, #orderPage .order-field textarea { height: 42px; min-height: 42px; }
  #orderPage .order-field textarea { padding-block: 9px; }
  #orderPage #submitOrder { height: 48px; }
  #orderPage .back-order { height: 40px; }
}
/* شاشات قصيرة جدًا فقط: تمرير احتياطي حتى لا يُقصّ المحتوى */
@media (min-width: 700px) and (max-height: 600px) {
  #orderPage .order-scroll { overflow-y: auto; }
}

/* ===== تعديل: عرض أكبر وطول أقل + إصلاح تداخل تسمية العنوان ===== */
#orderPage .order-field { grid-template-columns: 118px minmax(0, 1fr); }
#orderPage .order-field label { font-size: 11.5px; gap: 4px; }
#orderPage .order-field label span { white-space: nowrap; }
@media (max-width: 380px) {
  #orderPage .order-field { grid-template-columns: 112px minmax(0, 1fr); }
  #orderPage .order-field label { font-size: 11px; }
}
@media (min-width: 700px) {
  #orderPage .order-card { max-width: 500px; }
  #orderPage .order-scroll { padding: 14px 26px 8px; }
  #orderPage .order-field { grid-template-columns: 136px minmax(0, 1fr); gap: 10px; }
  #orderPage .order-field label { font-size: 13px; gap: 6px; }
  #orderPage .order-subtitle { margin-bottom: 8px; }
  #orderPage #orderSummary { margin-bottom: 9px; padding-block: 7px; }
  #orderPage .order-fields { gap: 7px; }
  #orderPage .order-field input, #orderPage .order-field textarea { height: 38px; min-height: 38px; }
  #orderPage .order-field textarea { padding-block: 7px; }
  #orderPage #submitOrder { height: 44px; margin-top: 3px; }
  #orderPage .back-order { height: 36px; }
  #orderPage .order-note { margin-bottom: 12px; }
}

/* وضوح نقاط الحروف في التسميات (ن، ي، ت...) */
#orderPage .order-field label { font-weight: 700; line-height: 1.6; letter-spacing: 0; text-rendering: optimizeLegibility; }
@media (min-width: 700px) {
  #orderPage .order-field label { font-size: 14.5px; }
  #orderPage .order-field { grid-template-columns: 146px minmax(0, 1fr); }
}

/* ===== خيارات التوصيل (أزرار شفافة) ===== */
#orderPage .delivery-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
#orderPage .delivery-opt { position: relative; display: block; cursor: pointer; }
#orderPage .delivery-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
#orderPage .delivery-opt .opt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 8px;
  border: 1.5px solid rgba(222, 180, 148, .7);
  border-radius: 14px;
  background: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #7a5564;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
#orderPage .delivery-opt .opt-box svg { width: 18px; height: 18px; flex: 0 0 auto; }
#orderPage .delivery-opt:hover .opt-box { background: rgba(255, 255, 255, .6); }
#orderPage .delivery-opt input:checked + .opt-box {
  background: rgba(200, 61, 112, .14);
  border-color: var(--o-magenta);
  color: var(--o-magenta);
  box-shadow: 0 4px 12px rgba(200, 61, 112, .18), inset 0 0 0 1px rgba(200, 61, 112, .15);
}
#orderPage .delivery-opt input:focus-visible + .opt-box { outline: 2px solid var(--o-magenta); outline-offset: 2px; }
@media (max-width: 380px) {
  #orderPage .delivery-opt .opt-box { font-size: 12px; gap: 5px; }
}
@media (min-width: 700px) {
  #orderPage .delivery-opt .opt-box { height: 38px; font-size: 14px; }
}
[data-theme="dark"] #orderPage .delivery-opt .opt-box { background: rgba(255, 255, 255, .05); color: #cdb9c1; border-color: rgba(212, 180, 138, .35); }
[data-theme="dark"] #orderPage .delivery-opt input:checked + .opt-box { background: rgba(224, 103, 154, .2); color: #f6c9da; border-color: var(--o-magenta); }

/* ===== الهاتف: استمارة أقصر ===== */
@media (max-width: 699px) {
  #orderPage { padding: 8px; }
  #orderPage .order-card { border-radius: 22px; max-height: calc(100dvh - 16px); }
  #orderPage .order-scroll { padding: 10px 14px 8px; }
  #orderPage .order-top { margin-bottom: 0; }
  #orderPage .logo-text { font-size: 21px; }
  #orderPage .close-order { width: 32px; height: 32px; }
  #orderPage #orderTitle { font-size: 20px; line-height: 1.2; }
  #orderPage .order-subtitle { font-size: 11.5px; margin: 0 0 7px; line-height: 1.4; }
  #orderPage #orderSummary { margin-bottom: 8px; padding: 6px 12px; border-radius: 16px; }
  #orderPage .summary-title { font-size: 13px; margin-bottom: 1px; }
  #orderPage .summary-title svg { width: 17px; height: 17px; }
  #orderPage .summary-row { font-size: 11.5px; padding: 1px 0; line-height: 1.4; }
  #orderPage .summary-total { margin-top: 3px; padding-top: 4px; font-size: 13px; }
  #orderPage .summary-total span:last-child { font-size: 16px; }
  #orderPage .order-fields { gap: 6px; }
  #orderPage .order-field input,
  #orderPage .order-field textarea { height: 36px; min-height: 36px; border-radius: 12px; }
  #orderPage .order-field textarea { padding-block: 6px; }
  #orderPage .order-field label svg { width: 16px; height: 16px; }
  #orderPage .delivery-opt .opt-box { height: 34px; border-radius: 12px; font-size: 12px; }
  #orderPage .delivery-opt .opt-box svg { width: 16px; height: 16px; }
  #orderPage #submitOrder { height: 42px; margin-top: 2px; font-size: 15px; }
  #orderPage .back-order { height: 34px; font-size: 12.5px; }
  #orderPage .order-note { font-size: 10.5px; margin: 0 0 10px; line-height: 1.4; }
  #orderPage .deco-leaf { width: 64px; top: 44px; }
  #orderPage .deco-corner { width: 76px; }
  #orderPage .deco-br { width: 54px; }
}

/* ===== إصلاح: وميض مستطيل عند تبديل خيار التوصيل ===== */
#orderPage .delivery-opt {
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
#orderPage .delivery-opt input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
#orderPage .delivery-opt .opt-box {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-clip: padding-box;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 699px) {
  #orderPage .delivery-opt, #orderPage .delivery-opt input { border-radius: 12px; }
}

/* إخفاء أسهم التمرير داخل خانة العنوان */
#orderPage .order-field textarea {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#orderPage .order-field textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
#orderPage .order-field textarea::-webkit-resizer { display: none; }