/* =========================================================
   HNO BEAUTY — MASTER CLEAN REBUILD
   نسخة كاملة نظيفة بدون ترقيع
   - إزالة الإطارات الكثيرة والملخبطة
   - إزالة الأبيض من أزرار الشراء
   - توحيد الألوان والخطوط والمقاسات من :root
   ========================================================= */

/* 00) MASTER CONTROL */
:root {
  --hno-page-bg: #000000;
  --hno-section-bg: #000000;
  --hno-card-bg: #080604;
  --hno-soft-bg: #0D0905;

  --hno-gold: #896C16;
  --hno-gold-light: #E2C15A;
  --hno-gold-dark: #4A370D;

  --hno-text: #B49044;
  --hno-heading: #C79A3A;

  --hno-danger: #CB1709;
  --hno-success: #7FA66A;

  --hno-border-soft: rgba(184, 134, 43, .16);
  --hno-border-mid: rgba(184, 134, 43, .30);
  --hno-border-strong: rgba(226, 193, 90, .48);

  --hno-font-main: "Beiruti", "Tajawal", "Arial", sans-serif;
  --hno-font-heading: "Beiruti", "Tajawal", "Arial", sans-serif;
  --hno-font-price: "Beiruti", "Tajawal", "Arial", sans-serif;

  --hno-size-xs: 12px;
  --hno-size-sm: 13px;
  --hno-size-base: 15px;
  --hno-size-md: 16px;
  --hno-size-lg: 18px;
  --hno-size-xl: 22px;
  --hno-size-2xl: 28px;

  --hno-weight-normal: 400;
  --hno-weight-medium: 500;
  --hno-weight-bold: 800;

  --hno-radius-sm: 8px;
  --hno-radius-md: 12px;
  --hno-radius-lg: 16px;
  --hno-radius-xl: 22px;
  --hno-radius-pill: 999px;

  --hno-header-height: 68px;
  --hno-btn-height: 52px;
  --hno-product-img-height: 310px;

  --hno-btn-bg: #000000;
  --hno-btn-text: #E2C15A;
  --hno-btn-border: #CEB223;
  --hno-btn-hover-bg: #B8862B;
  --hno-btn-hover-text: #000000;



  /* HNO EXTRA COLOR CONTROLS */
  --hno-muted: #6E5A2E;

  /* أزرار الأيقونات الصغيرة: رجوع / مفضلة / إغلاق */
  --hno-icon-btn-size: 44px;
  --hno-icon-btn-bg: #F4F2EA;
  --hno-icon-btn-text: #7B641F;
  --hno-icon-btn-border: rgba(226, 193, 90, .28);
  --hno-icon-btn-radius: 14px;
  --hno-icon-btn-shadow: 0 10px 24px rgba(0, 0, 0, .28);

  --hno-icon-btn-hover-bg: #E2C15A;
  --hno-icon-btn-hover-text: #000000;
  --hno-icon-btn-hover-border: #E2C15A;

  /* زر المفضلة / القلب */
  --hno-wishlist-bg: #F4F2EA;
  --hno-wishlist-text: #17211A;
  --hno-wishlist-border: rgba(226, 193, 90, .25);
  --hno-wishlist-radius: 14px;

  /* زر الإغلاق X — إطار دائري والاكس داخله */
  --hno-close-size: 48px;
  --hno-close-bg: rgba(0, 0, 0, .82);
  --hno-close-text: #EFFF2F;
  --hno-close-border: #EFFF2F;
  --hno-close-radius: 999px;
  --hno-close-border-width: 2px;
  --hno-close-shadow: 0 0 18px rgba(239, 255, 47, .28);

  --hno-close-hover-bg: #EFFF2F;
  --hno-close-hover-text: #000000;
  --hno-close-hover-border: #EFFF2F;

  --hno-transition: .22s ease;
}

/* 01) GLOBAL */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body,
#app,
#main-content,
.main-content,
.page-wrapper,
.site-wrapper,
.store-wrapper,
.store-content,
.app-inner,
.kesra-main-content {
  background: var(--hno-page-bg) !important;
  color: var(--hno-text) !important;
  font-family: var(--hno-font-main) !important;
  font-size: var(--hno-size-base) !important;
  line-height: 1.75 !important;
}

body {
  overflow-x: hidden !important;
}

img {
  max-width: 100%;
}

svg,
i {
  color: inherit;
  fill: currentColor;
  stroke: currentColor;
}

a {
  color: var(--hno-gold) !important;
  text-decoration: none !important;
  transition: var(--hno-transition) !important;
}

a:hover {
  color: var(--hno-gold-light) !important;
}

/* 02) REMOVE WHITE + EXCESS BORDERS */
.bg-white,
.bg-gray-100,
.bg-inherit,
.inherit,
.container,
.wrapper,
.inner,
.content,
.row,
.col,
.section,
.section-header,
.content-box,
.info-box,
.box,
.panel,
.card,
.widget,
.content-card,
.info-card,
.summary-card,
.s-card {
  background-color: transparent !important;
}

.border-top,
.border-bottom,
.border-gray-100,
.border-gray-200,
.border-gray-300,
.separator,
hr {
  border-color: transparent !important;
}

.card,
.s-card,
.panel,
.box,
.widget,
.content-box,
.info-box {
  border: 0 !important;
  box-shadow: none !important;
}

/* 03) TYPOGRAPHY */
.title,
.name,
.section-title,
.block-title,
.footer-title,
.entry-title,
.summary-title,
.cart-title,
.checkout-title,
.s-block__title,
.s-products-list-title,
.product-title,
.product-name,
.s-product-card-content-title,
.product-card__title,
.category-name {
  color: var(--hno-heading) !important;
  font-family: var(--hno-font-heading) !important;
  font-weight: var(--hno-weight-bold) !important;
  line-height: 1.45 !important;
}

.text-muted,
.muted,
.secondary-text,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.caption,
.meta,
.s-block__description,
.product-card__subtitle,
.s-product-card-content-subtitle,
.product-entry__sub-title {
  color: var(--hno-muted) !important;
}

.text-xs { font-size: var(--hno-size-xs) !important; }
.text-sm { font-size: var(--hno-size-sm) !important; }
.text-base { font-size: var(--hno-size-base) !important; }
.text-lg { font-size: var(--hno-size-lg) !important; }
.text-xl { font-size: var(--hno-size-xl) !important; }
.text-2xl { font-size: var(--hno-size-2xl) !important; }

.font-medium { font-weight: var(--hno-weight-medium) !important; }
.font-semibold,
.font-bold { font-weight: var(--hno-weight-bold) !important; }

/* 04) HEADER */
.store-header,
.site-header,
.main-header,
.s-header,
.kesra-store-header,
.kesra-main-nav-container,
.main-nav-container,
.kesra-store-header .kesra-main-nav-container,
.top-navbar,
.navbar,
.main-nav,
.s-main-navbar,
.s-top-nav,
.s-top-navbar,
.mobile-header,
.mobile-navbar,
.mobile-topbar,
.topbar,
.header-wrapper,
.header-inner {
  background: var(--hno-page-bg) !important;
  color: var(--hno-gold-dark) !important;
  min-height: var(--hno-header-height) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.store-header a,
.site-header a,
.main-header a,
.s-header a,
.kesra-store-header a,
.navbar a,
.main-nav a,
.s-main-navbar a,
.top-navbar a,
.mobile-navbar a,
.header-actions a {
  color: var(--hno-gold) !important;
}

.logo-wrapper,
.store-logo,
.site-logo,
.logo,
.brand,
.brand-logo,
.navbar-brand,
.header-tools,
.header-actions,
.header-center,
.header-start,
.header-end,
.search-wrapper,
.user-area,
.account-area,
.cart-area,
.locale-area,
.sicon-menu,
.burger,
.mburger,
.icon-search,
.user-icon,
.account-icon,
.profile-icon,
.dropdown-toggle {
  color: var(--hno-gold) !important;
}

.cart-count,
.notification-count,
.count,
.badge {
  background: var(--hno-danger) !important;
  color: #ffffff !important;
  border-radius: var(--hno-radius-pill) !important;
}

/* 05) SIDE MENU */
.mm-spn,
.mm-spn ul,
.mm-spn li,
.mm-spn a,
.mm-spn span,
.mm-spn--light,
.mm-spn--navbar,
.main-menu.mm-spn--open,
.mm-ocd__wrapper,
.mm-ocd__panel,
.s-menu,
.s-menu-content,
.s-menu-list,
.s-menu-item,
.side-menu,
.mobile-menu,
.nav-drawer,
.menu-panel {
  background: var(--hno-page-bg) !important;
  color: var(--hno-gold) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mm-spn a,
.s-menu-item-link {
  color: var(--hno-gold-dark) !important;
  background: transparent !important;
  text-decoration: none !important;
  font-size: var(--hno-size-md) !important;
}

.mm-spn a::after {
  color: var(--hno-gold) !important;
  border-color: var(--hno-gold) !important;
}

.mm-ocd__blocker,
.overlay,
.page-overlay,
.s-overlay,
.s-backdrop,
.backdrop,
.modal-backdrop,
.drawer-backdrop,
.menu-backdrop,
.s-modal-overlay,
.s-search-modal-overlay {
  background: rgba(0, 0, 0, .72) !important;
}

/* 06) INPUTS */
.header-search,
.header__search,
.navbar-search,
.top-navbar__search,
.search-wrapper,
.search-form,
.search-input-wrapper,
.s-search-input-wrapper {
  background: transparent !important;
  color: var(--hno-text) !important;
}

.search-input,
.s-search-input,
.form-control,
.input,
textarea,
select,
.s-login-modal-input,
.s-search-modal-input,
.s-comment-form-input,
.coupon-input,
.s-cart-summary-coupon-input,
.checkout-field input,
.checkout-field textarea,
.checkout-field select {
  background: var(--hno-section-bg) !important;
  color: var(--hno-text) !important;
  border: 1px solid var(--hno-border-soft) !important;
  border-radius: var(--hno-radius-md) !important;
  box-shadow: none !important;
  font-family: var(--hno-font-main) !important;
}

.search-input::placeholder,
.s-search-input::placeholder,
.form-control::placeholder,
.input::placeholder,
textarea::placeholder {
  color: var(--hno-muted) !important;
}

/* 07) BUTTONS */
.btn,
.button,
.btn-primary,
.s-button-primary,
.s-button-element,
.s-button-btn,
.s-button-solid,
.s-button-wide,
.s-product-card-button,
.add-to-cart,
.add-to-cart-btn,
.btn--add-to-cart,
.checkout-btn,
.btn-checkout,
.s-cart-summary-submit,
.coupon-button,
.s-cart-summary-coupon-button,
.search-btn,
.search-submit {
  background: var(--hno-btn-bg) !important;
  color: var(--hno-btn-text) !important;
  border: 1px solid var(--hno-btn-border) !important;
  border-radius: var(--hno-radius-md) !important;
  min-height: var(--hno-btn-height) !important;
  box-shadow: none !important;
  font-family: var(--hno-font-main) !important;
  font-weight: var(--hno-weight-bold) !important;
  transition: var(--hno-transition) !important;
}

.btn *,
.button *,
.btn-primary *,
.s-button-primary *,
.s-button-element *,
.s-button-btn *,
.s-button-solid *,
.s-button-wide *,
.s-product-card-button *,
.add-to-cart *,
.add-to-cart-btn *,
.checkout-btn *,
.btn-checkout *,
.s-cart-summary-submit *,
.coupon-button *,
.s-cart-summary-coupon-button * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.btn:hover,
.button:hover,
.s-button-btn:hover,
.s-product-card-button:hover,
.add-to-cart:hover,
.checkout-btn:hover,
.s-cart-summary-submit:hover {
  background: var(--hno-btn-hover-bg) !important;
  color: var(--hno-btn-hover-text) !important;
  border-color: var(--hno-btn-hover-bg) !important;
}

.s-button-outline,
.s-button-primary-outline {
  background: transparent !important;
  color: var(--hno-gold) !important;
  border: 1px solid var(--hno-border-mid) !important;
}

/* 08) PRODUCT CARDS */
.product-card,
.product-entry,
.s-product-card,
.s-product-card-entry,
.s-product-card-vertical,
.s-product-card-horizontal {
  background: var(--hno-page-bg) !important;
  color: var(--hno-gold-dark) !important;
  border: 0 !important;
  border-radius: var(--hno-radius-lg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.product-card__content,
.product-card__footer,
.product-card__actions,
.s-product-card-content,
.s-product-card-content-main,
.s-product-card-content-sub,
.s-product-card-content-footer,
.product-content,
.product-details,
.product-info,
.product-footer,
.card-body {
  background: transparent !important;
  color: var(--hno-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.s-product-card-image,
.s-product-card-image-wrapper,
.s-product-card-image-front,
.s-product-card-image-back,
.product-card__image,
.product-image,
.image-wrapper {
  background: var(--hno-section-bg) !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.s-product-card-image img,
.s-product-card-image-wrapper img,
.product-card__image img,
.product-image img {
  object-fit: contain !important;
}

.s-product-card-price,
.s-product-card-sale-price,
.sale-price,
.price,
.product-price,
.kesra-price,
.product-card__price,
.amount {
  color: var(--hno-gold-light) !important;
  font-family: var(--hno-font-price) !important;
  font-weight: 900 !important;
}

.old-price,
.price-before,
.price-old,
.regular-price,
.s-product-card-regular-price,
.line-through {
  color: var(--hno-muted) !important;
  text-decoration-color: var(--hno-muted) !important;
}

.btn-wishlist,
.wishlist-btn,
.favorite-btn,
.fav-btn,
.s-product-card-wishlist-btn,
.share-btn,
.btn-share,
.product-share,
.floating-share,
.share-button,
.social-share,
.share-icon {
  width: var(--hno-icon-btn-size) !important;
  height: var(--hno-icon-btn-size) !important;
  min-width: var(--hno-icon-btn-size) !important;
  min-height: var(--hno-icon-btn-size) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--hno-wishlist-bg) !important;
  color: var(--hno-wishlist-text) !important;
  border: 1px solid var(--hno-wishlist-border) !important;
  border-radius: var(--hno-wishlist-radius) !important;
  box-shadow: var(--hno-icon-btn-shadow) !important;
  line-height: 1 !important;
}

.btn-wishlist *,
.wishlist-btn *,
.favorite-btn *,
.fav-btn *,
.s-product-card-wishlist-btn *,
.share-btn *,
.btn-share *,
.product-share *,
.floating-share *,
.share-button *,
.social-share *,
.share-icon * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.btn-wishlist:hover,
.wishlist-btn:hover,
.favorite-btn:hover,
.fav-btn:hover,
.s-product-card-wishlist-btn:hover,
.share-btn:hover,
.btn-share:hover,
.product-share:hover,
.floating-share:hover,
.share-button:hover,
.social-share:hover,
.share-icon:hover {
  background: var(--hno-icon-btn-hover-bg) !important;
  color: var(--hno-icon-btn-hover-text) !important;
  border-color: var(--hno-icon-btn-hover-border) !important;
}

/* 09) PRODUCT PAGE */
.single-product,
.product-single,
.product-page,
.s-product-page,
.page-product,
.product-summary,
.product__description,
.article,
.article--main,
.details-slider,
.price-wrapper,
.product-price-wrapper,
.price-box,
.price-card,
.price-area,
.share-box,
.share-card,
.kesra-tabby-tamara {
  background: var(--hno-page-bg) !important;
  color: var(--hno-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.product-form,
.product-actions {
  background: transparent !important;
  color: var(--hno-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.single-product .price,
.product-single .price,
.product-page .price,
.s-product-page .price,
.single-product .product-price,
.product-single .product-price,
.product-page .product-price,
.s-product-page .product-price,
.kesra-price {
  color: var(--hno-gold-light) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.accordion-item,
.accordion-body,
.tab-content,
.tabs,
.comments,
.reviews,
.questions,
.s-comments,
.s-comments-product,
.s-comments-container,
.s-comment-form,
.s-comment-form-wrapper,
.s-comment-form-content {
  background: var(--hno-page-bg) !important;
  color: var(--hno-text) !important;
  border: 1px solid var(--hno-page-bg) !important;
  border-radius: var(--hno-radius-lg) !important;
  box-shadow: none !important;
}

.form-label,
.label {
  color: var(--hno-gold) !important;
}

/* 10) PRODUCT PURCHASE CARD */
.s-add-product-button-wrapper,
.s-product-sticky-bar,
.product-sticky-bar,
.sticky-product-bar,
.single-product-sticky-bar {
  background: linear-gradient(145deg, #030201, #000000) !important;
  border: 1px solid var(--hno-page-bg) !important;
  border-radius: 18px !important;
  padding: 10px !important;
  box-shadow: none !important;
}

.s-quantity-input,
.quantity-input,
.quantity-selector,
.s-quantity-input-container,
.quantity-input-container,
.sticky-product-bar__quantity,
.add-product-qty {
  background: #000000 !important;
  color: var(--hno-gold-light) !important;
  border: 1px solid var(--hno-border-mid) !important;
  border-radius: var(--hno-radius-pill) !important;
  min-height: 48px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.s-quantity-input-button,
.quantity-input-button,
.s-quantity-input-increase-button,
.quantity-input-increase-button,
.s-quantity-input-decrease-button,
.quantity-input-decrease-button {
  background: transparent !important;
  color: var(--hno-gold-light) !important;
  border: 0 !important;
  width: 46px !important;
  min-width: 46px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

.s-quantity-input-input,
.quantity-input-input,
.s-quantity-input input,
.quantity-input input {
  background: transparent !important;
  color: var(--hno-gold-light) !important;
  border: 0 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

.s-add-product-button-wrapper,
.product-actions,
.s-product-sticky-bar .s-button-wrap,
.sticky-product-bar .s-button-wrap {
  gap: 8px !important;
}

/* Add to cart — no white */
.s-add-product-button,
.s-add-product-button-main,
.s-product-sticky-bar .s-button-btn,
.product-sticky-bar .s-button-btn,
.sticky-product-bar__button,
button.s-add-product-button,
button.s-add-product-button-main {
  background: #000000 !important;
  background-color: #000000 !important;
  color: var(--hno-gold-light) !important;
  border: 1px solid var(--hno-btn-border) !important;
  border-radius: var(--hno-radius-pill) !important;
  min-height: 54px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.s-add-product-button *,
.s-add-product-button-main *,
.s-product-sticky-bar .s-button-btn *,
.product-sticky-bar .s-button-btn *,
.sticky-product-bar__button * {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--hno-gold-light) !important;
  fill: var(--hno-gold-light) !important;
  stroke: var(--hno-gold-light) !important;
}

.s-add-product-button[disabled],
.s-add-product-button-main[disabled],
.s-button-btn[disabled],
.s-button-disabled,
button[disabled].s-add-product-button,
button[disabled].s-add-product-button-main {
  background: #000000 !important;
  background-color: #000000 !important;
  color: var(--hno-gold-light) !important;
  border: 1px solid var(--hno-btn-border) !important;
  opacity: 1 !important;
}

/* Buy now */
.btn--buy-now,
.buy-now-btn,
.s-fast-checkout-button,
.s-fast-checkout-button-outline {
  background: linear-gradient(135deg, #A5710D 0%, #D7B65A 62%, #E2C15A 100%) !important;
  color: #000000 !important;
  border: 1px solid var(--hno-gold-light) !important;
  border-radius: var(--hno-radius-pill) !important;
  min-height: 54px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.btn--buy-now *,
.buy-now-btn *,
.s-fast-checkout-button *,
.s-fast-checkout-button-outline * {
  background: transparent !important;
  color: #000000 !important;
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* Apple Pay */
.btn--apple-pay,
.apple-pay-button {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(226, 193, 90, .22) !important;
  border-radius: var(--hno-radius-md) !important;
  min-height: 54px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.btn--apple-pay *,
.apple-pay-button * {
  background: transparent !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* 11) CART */
.page-cart,
.cart-page,
.cart-content,
.cart,
.cart-container,
.s-cart-page,
.s-cart-items,
.cart-items,
.cart-products {
  background: var(--hno-page-bg) !important;
  color: var(--hno-text) !important;
}

.cart-item,
.cart-row,
.line-item,
.cart-product,
.s-cart-item,
.cart-list-item,
.cart-table,
.cart-item__content,
.cart-item-details,
.cart-item-content {
  background: var(--hno-page-bg) !important;
  color: var(--hno-text) !important;
  border: 1px solid var(--hno-border-soft) !important;
  border-radius: var(--hno-radius-lg) !important;
  box-shadow: none !important;
}

.cart-item-title,
.cart-item__title {
  color: var(--hno-heading) !important;
  font-weight: 900 !important;
}

.cart-item-price,
.cart-item__price,
.item-price,
.total-price {
  color: var(--hno-gold-light) !important;
  font-weight: 900 !important;
}

.cart-item-options,
.cart-item__options,
.item-options,
.item-offers {
  color: var(--hno-muted) !important;
}

.cart-item-delete,
.cart-item__delete {
  color: var(--hno-danger) !important;
  background: transparent !important;
  border: 0 !important;
}

.cart-item-image,
.cart-item__image {
  background: var(--hno-section-bg) !important;
  border: 0 !important;
  border-radius: var(--hno-radius-md) !important;
}

/* 12) CHECKOUT + SUMMARY */
.cart-summary,
.order-summary,
.s-cart-summary,
.salla-cart-summary,
.cart-summary-wrapper,
.s-cart-summary-wrapper,
.s-cart-summary-items,
.s-cart-summary-item,
.cart-totals,
.order-totals,
.totals-box,
.summary-content,
.summary-body,
.summary-footer,
.cart-total-card,
.checkout-total-card,
.checkout-summary,
.page-checkout,
.checkout-page,
.checkout,
.checkout-wrapper,
.checkout-content,
.checkout-layout,
.checkout-section,
.checkout-card,
.checkout-step,
.checkout-form,
.checkout-fields,
.checkout-methods,
.checkout-method,
.checkout-payment,
.checkout-payment-method,
.checkout-shipping,
.checkout-shipping-method,
.fast-shipping,
.payment-methods,
.shipping-methods,
.free-shipping,
.cart-gifting {
  background: var(--hno-page-bg) !important;
  color: var(--hno-text) !important;
  border: 0 !important;
  border-radius: var(--hno-radius-pill) !important;
  box-shadow: none !important;
}

.s-cart-summary-title,
.cart-summary__header,
.summary-title,
.checkout-section-title,
.checkout-form-title {
  color: var(--hno-heading) !important;
  font-weight: 900 !important;
}

.s-cart-summary-total,
.s-cart-summary-subtotal,
.s-cart-summary-vat,
.s-cart-summary-shipping,
.s-cart-summary-discount,
.s-cart-summary-count,
.order-total,
.grand-total,
.total,
.summary-total,
.subtotal,
.sub-total,
.tax,
.total-discount,
.coupon-discount {
  color: var(--hno-gold-light) !important;
  font-weight: 900 !important;
}

/* 13) MODALS */
.modal,
.modal-dialog,
.modal-content,
.modal-body,
.modal-header,
.modal-footer,
.popup,
.popup-content,
.dialog,
.dialog-content,
.drawer,
.drawer-content,
.cart-drawer,
.cart-drawer-content,
.s-cart-drawer,
.s-cart-drawer-content,
.offcanvas,
.offcanvas-body,
.offcanvas-header,
.offcanvas-footer,
.sidebar,
.s-user-menu-wrapper,
.s-user-menu-dropdown,
.s-user-menu-content,
.s-login-modal,
.s-login-modal-wrapper,
.s-login-modal-content,
.s-login-modal-header,
.s-login-modal-body,
.s-login-modal-footer,
.s-modal,
.s-modal-container,
.s-modal-wrapper,
.s-modal-content,
.s-modal-header,
.s-search-modal,
.s-search-modal-results {
  background: var(--hno-page-bg) !important;
  color: var(--hno-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.s-modal-title,
.s-search-modal-result,
.s-login-modal-link,
.s-user-menu-dropdown-item,
.s-user-menu-dropdown-item-label {
  color: var(--hno-gold) !important;
}

/* Icon buttons — back / arrow / small square controls */
[aria-label="Back"],
[aria-label="رجوع"],
[aria-label="Previous"],
[aria-label="السابق"],
[title="Back"],
[title="رجوع"],
[title="Previous"],
[title="السابق"],
.swiper-button-prev,
.swiper-button-next {
  width: var(--hno-icon-btn-size) !important;
  height: var(--hno-icon-btn-size) !important;
  min-width: var(--hno-icon-btn-size) !important;
  min-height: var(--hno-icon-btn-size) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--hno-icon-btn-bg) !important;
  color: var(--hno-icon-btn-text) !important;
  border: 1px solid var(--hno-icon-btn-border) !important;
  border-radius: var(--hno-icon-btn-radius) !important;
  box-shadow: var(--hno-icon-btn-shadow) !important;
  line-height: 1 !important;
}

[aria-label="Back"] *,
[aria-label="رجوع"] *,
[aria-label="Previous"] *,
[aria-label="السابق"] *,
[title="Back"] *,
[title="رجوع"] *,
[title="Previous"] *,
[title="السابق"] *,
.swiper-button-prev *,
.swiper-button-next * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

[aria-label="Back"]:hover,
[aria-label="رجوع"]:hover,
[aria-label="Previous"]:hover,
[aria-label="السابق"]:hover,
[title="Back"]:hover,
[title="رجوع"]:hover,
[title="Previous"]:hover,
[title="السابق"]:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--hno-icon-btn-hover-bg) !important;
  color: var(--hno-icon-btn-hover-text) !important;
  border-color: var(--hno-icon-btn-hover-border) !important;
}

/* Close X — إطار دائري والاكس داخله */
.s-modal-close,
.s-login-modal-close,
.s-user-menu-close,
.s-menu-close,
.s-search-modal-close,
.modal-close,
.close,
.btn-close,
button[aria-label="Close"],
button[aria-label="إغلاق"],
button[title="Close"],
button[title="إغلاق"] {
  width: var(--hno-close-size) !important;
  height: var(--hno-close-size) !important;
  min-width: var(--hno-close-size) !important;
  min-height: var(--hno-close-size) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--hno-close-bg) !important;
  color: var(--hno-close-text) !important;
  border: var(--hno-close-border-width) solid var(--hno-close-border) !important;
  border-radius: var(--hno-close-radius) !important;
  box-shadow: var(--hno-close-shadow) !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

.s-modal-close *,
.s-login-modal-close *,
.s-user-menu-close *,
.s-menu-close *,
.s-search-modal-close *,
.modal-close *,
.close *,
.btn-close *,
button[aria-label="Close"] *,
button[aria-label="إغلاق"] *,
button[title="Close"] *,
button[title="إغلاق"] * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.s-modal-close:hover,
.s-login-modal-close:hover,
.s-user-menu-close:hover,
.s-menu-close:hover,
.s-search-modal-close:hover,
.modal-close:hover,
.close:hover,
.btn-close:hover,
button[aria-label="Close"]:hover,
button[aria-label="إغلاق"]:hover,
button[title="Close"]:hover,
button[title="إغلاق"]:hover {
  background: var(--hno-close-hover-bg) !important;
  color: var(--hno-close-hover-text) !important;
  border-color: var(--hno-close-hover-border) !important;
}

/* 14) BLOCKS */
.s-block,
.s-block--banners,
.s-block--slider,
.s-block--categories,
.s-block--features,
.s-block--products,
.s-block--fixed-banner,
.s-block--photos-slider,
.s-slider-block,
.main-slider,
.home-slider,
.hero-slider,
.swiper,
.swiper-wrapper,
.swiper-slide,
.slide,
.banner-item,
.hero-item,
.banner-entry,
.category-card,
.category-item,
.s-category-card,
.kesra-main-banner {
  background: var(--hno-page-bg) !important;
  color: var(--hno-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.category-card,
.category-item,
.s-category-card {
  border-radius: var(--hno-radius-pill) !important;
  overflow: hidden !important;
}

.category-name,
.s-block__display-all,
.s-slider-block__title,
.s-slider-block__display-all {
  color: var(--hno-gold) !important;
}

/* 15) FOOTER */
.store-footer,
.site-footer,
.main-footer,
.kesra-store-footer,
.s-footer,
.footer-wrapper,
.footer-main,
.footer-top,
.footer-bottom,
.footer-content,
.footer-inner,
.footer-sections,
.footer-block,
.footer-contact,
.footer-links,
.footer-about,
.footer-social,
.footer-copyright,
.bottom-footer {
  background: var(--hno-page-bg) !important;
  color: var(--hno-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.store-footer a,
.site-footer a,
.main-footer a,
.kesra-store-footer a,
.s-footer a,
.footer-links a,
.footer-social a {
  color: var(--hno-gold) !important;
}

.s-footer-payment,
.s-payments-list,
.s-payment-method,
.s-social-list,
.s-social-link,
.s-contacts-list,
.s-contact-item {
  background: transparent !important;
  color: var(--hno-gold) !important;
}

/* 16) MOBILE */
@media (max-width: 640px) {
  :root {
    --hno-header-height: 64px;
    --hno-btn-height: 50px;
    --hno-product-img-height: 280px;
  }

  .s-add-product-button-wrapper,
  .s-product-sticky-bar,
  .product-sticky-bar,
  .sticky-product-bar,
  .single-product-sticky-bar {
    border-radius: 16px !important;
    padding: 8px !important;
  }

  .single-product .price,
  .product-single .price,
  .product-page .price,
  .s-product-page .price,
  .single-product .product-price,
  .product-single .product-price,
  .product-page .product-price,
  .s-product-page .product-price,
  .kesra-price {
    font-size: 28px !important;
  }

  .s-add-product-button,
  .s-add-product-button-main,
  .btn--buy-now,
  .buy-now-btn,
  .s-fast-checkout-button,
  .btn--apple-pay,
  .apple-pay-button {
    min-height: 52px !important;
    border-radius: 13px !important;
  }

  :root {
    --hno-icon-btn-size: 42px;
    --hno-close-size: 46px;
  }

}

/* =========================================================
   17) HNO BEAUTY — CANVA PRODUCT CARD EMBED
   بطاقة Canva داخل المتجر — تحكم كامل من CSS
   ========================================================= */

:root {
  /* تحكم البطاقة */
  --hno-canva-card-width: 680px;
  --hno-canva-card-margin-top: 24px;
  --hno-canva-card-margin-bottom: 24px;
  --hno-canva-card-radius: 22px;
  --hno-canva-card-padding: 10px;

  /* نسبة التصميم: 1/1 للتصميم المربع الحالي */
  --hno-canva-card-ratio: 1 / 1;

  /* ألوان البطاقة */
  --hno-canva-card-bg: #000000;
  --hno-canva-card-bg-2: #0A0908;
  --hno-canva-card-border: rgba(226, 193, 90, .42);
  --hno-canva-card-border-hover: rgba(226, 193, 90, .75);

  /* الظلال والإضاءة */
  --hno-canva-card-shadow: 0 18px 48px rgba(0, 0, 0, .72), inset 0 0 28px rgba(226, 193, 90, .045);
  --hno-canva-card-shadow-hover: 0 24px 64px rgba(0, 0, 0, .82), 0 0 22px rgba(226, 193, 90, .12), inset 0 0 34px rgba(226, 193, 90, .06);

  /* رابط Canva أسفل البطاقة */
  --hno-canva-credit-display: none;
}

.hno-canva-product-card {
  width: 100% !important;
  max-width: var(--hno-canva-card-width) !important;
  margin: var(--hno-canva-card-margin-top) auto var(--hno-canva-card-margin-bottom) !important;
  padding: var(--hno-canva-card-padding) !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at top, rgba(226, 193, 90, .12), transparent 42%),
    linear-gradient(145deg, var(--hno-canva-card-bg-2), var(--hno-canva-card-bg)) !important;
  border: 1px solid var(--hno-canva-card-border) !important;
  border-radius: var(--hno-canva-card-radius) !important;
  box-shadow: var(--hno-canva-card-shadow) !important;
  isolation: isolate !important;
  transition: transform var(--hno-transition), border-color var(--hno-transition), box-shadow var(--hno-transition) !important;
}

.hno-canva-product-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(135deg, rgba(226, 193, 90, .20), transparent 26%, transparent 72%, rgba(137, 108, 22, .18)) !important;
  opacity: .65 !important;
  z-index: 0 !important;
}

.hno-canva-product-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--hno-canva-card-border-hover) !important;
  box-shadow: var(--hno-canva-card-shadow-hover) !important;
}

.hno-canva-product-frame {
  width: 100% !important;
  aspect-ratio: var(--hno-canva-card-ratio) !important;
  position: relative !important;
  overflow: hidden !important;
  background: #000000 !important;
  border-radius: calc(var(--hno-canva-card-radius) - 8px) !important;
  z-index: 1 !important;
}

.hno-canva-product-frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000000 !important;
}

.hno-canva-product-credit {
  display: var(--hno-canva-credit-display) !important;
  width: fit-content !important;
  margin: 10px auto 0 !important;
  color: var(--hno-gold-light) !important;
  font-family: var(--hno-font-main) !important;
  font-size: var(--hno-size-sm) !important;
  font-weight: var(--hno-weight-bold) !important;
  text-align: center !important;
  text-decoration: none !important;
}

.hno-canva-product-credit:hover {
  color: var(--hno-gold) !important;
}

@media (max-width: 640px) {
  :root {
    --hno-canva-card-width: 100%;
    --hno-canva-card-margin-top: 16px;
    --hno-canva-card-margin-bottom: 18px;
    --hno-canva-card-radius: 18px;
    --hno-canva-card-padding: 7px;
  }

  .hno-canva-product-card {
    width: calc(100% - 20px) !important;
  }
}

/* =========================================================
   HNO BEAUTY — CANVA CARD LINK INSERTED
   الرابط مركب داخل الكود
   CSS لا يشغل iframe من نفسه. هذا الكود ينسّق كود Canva إذا كان موجودًا في وصف المنتج/HTML.
   ========================================================= */

:root {
  --hno-canva-embed-url: "https://www.canva.com/design/DAHJF1V3LCM/Pjd_ORMVV4oKyUMXRiblAg/view?embed";

  --hno-canva-card-radius: 8px;
  --hno-canva-card-shadow: 0 2px 8px 0 rgba(63, 69, 81, 0.16);
  --hno-canva-card-margin-top: 1.6em;
  --hno-canva-card-margin-bottom: 0.9em;
  --hno-canva-card-bg: #000000;
  --hno-canva-card-border: 0px solid transparent;

  --hno-canva-credit-color: #C09667;
  --hno-canva-credit-hover: #EDC774;
}

/* يضبط أي iframe خاص بهذا التصميم من Canva */
iframe[src*="canva.com/design/DAHJF1V3LCM"] {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  background: var(--hno-canva-card-bg) !important;
}

/* يضبط الحاوية التي تحتوي iframe Canva */
div:has(> iframe[src*="canva.com/design/DAHJF1V3LCM"]) {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-top: 100% !important;
  padding-bottom: 0 !important;
  margin-top: var(--hno-canva-card-margin-top) !important;
  margin-bottom: var(--hno-canva-card-margin-bottom) !important;
  overflow: hidden !important;
  border-radius: var(--hno-canva-card-radius) !important;
  box-shadow: var(--hno-canva-card-shadow) !important;
  border: var(--hno-canva-card-border) !important;
  background: var(--hno-canva-card-bg) !important;
  will-change: transform !important;
}

/* تنسيق رابط "بطاقة منتج" أسفل كود Canva */
a[href*="canva.com/design/DAHJF1V3LCM"] {
  color: var(--hno-canva-credit-color) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: none !important;
}

a[href*="canva.com/design/DAHJF1V3LCM"]:hover {
  color: var(--hno-canva-credit-hover) !important;
}

/* =========================================================
   تنبيه:
   هذا السطر مركب فيه رابط Canva، لكنه لن يعمل كصورة خلفية
   لأن الرابط صفحة Embed وليس صورة PNG/WebP مباشرة.
   ========================================================= */

:root {
  --hno-canva-like-image: url("https://www.canva.com/design/DAHJF1V3LCM/Pjd_ORMVV4oKyUMXRiblAg/view?embed");
}

/* CSS ONLY كخلفية داخل وصف المنتج — يحتاج رابط صورة مباشر حتى تظهر الصورة */
.product__description::before,
.single-product .product__description::before,
.product-page .product__description::before,
.s-product-page .product__description::before,
.page-product .product__description::before,
.product-summary .product__description::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 1.6em auto 0.9em auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(63, 69, 81, 0.16);
  background-image: var(--hno-canva-like-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}