/* nana-theme — WordPress/WooCommerce additions on top of the static front's style.css.
   Colours come from variables.css; --blue and --header-bg can be changed in «إعدادات القالب». */

:root { --header-bg: #fff; }
.sr-only:focus { position: fixed; inset: 8px auto auto 8px; width: auto; height: auto; clip: auto; padding: 8px 12px; background: #fff; z-index: 999; }

/* ===== Header: top bar, main row (logo · search · delivery · account/wishlist/cart), nav row ===== */
:root { --header-top: 84px; --header-nav: 54px; }
.hdr-in { width: min(var(--wrap), calc(100% - 48px)); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 20px; }

.topbar { background: var(--primary-ink); color: #fff; font-size: 13px; }
.topbar .hdr-in { height: 38px; justify-content: space-between; }
.topbar-msgs { position: relative; flex: 1; align-self: stretch; overflow: hidden; }
.topbar-msg { position: absolute; inset: 0; display: flex; align-items: center; color: #fff; font-weight: 500; opacity: 0; transform: translateY(100%); transition: opacity 0.45s, transform 0.45s; }
.topbar-msg.is-on { opacity: 1; transform: none; }
a.topbar-msg:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar-links { display: flex; align-items: center; gap: 22px; }
.topbar-links a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.9); white-space: nowrap; }
.topbar-links a:hover { color: #fff; }
.topbar-links svg { width: 16px; height: 16px; }

.site-header { transition: box-shadow 0.25s; }
.site-header.is-stuck { box-shadow: 0 8px 24px rgba(36, 36, 36, 0.08); }
.header-top { height: var(--header-top); display: block; padding: 0; background: var(--header-bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.header-top :focus-visible { outline-color: var(--blue); }
.logo { width: 178px; height: 58px; }

.header-top .search-form { flex: 1; max-width: none; padding: 0; }
.header-top .search-form input { height: 50px; border-radius: 999px; background: var(--page); color: var(--ink); border: 1.5px solid var(--primary-tint-2); padding-inline: 48px 104px; font-size: 15px; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.header-top .search-form input:focus { outline: 0; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(106, 168, 79, 0.14); }
.header-top .search-form input::placeholder { color: #7d8a78; }
.header-top .search-form .search-icon { inset-inline-start: 18px; color: var(--muted); }
.search-submit { position: absolute; inset-inline-end: 5px; top: 5px; bottom: 5px; padding-inline: 24px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.2s; }
.search-submit:hover { background: var(--primary-strong); }
.header-top .search-panel { top: calc(100% + 10px); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); }

.ship-btn { color: var(--ink); gap: 10px; padding: 6px 10px; border-radius: 14px; transition: background 0.2s; }
.ship-btn:hover, .ship-btn[aria-expanded="true"] { background: var(--page); }
.pin { width: 40px; height: 40px; padding: 9px; border: 0; background: var(--primary-tint); color: var(--primary-ink); }
.pin svg { width: 100%; height: 100%; }
.ship-text small { font-size: 11px; color: var(--muted); }
.ship-line { font-size: 14px; }
.ship-line b { font-size: 13px; font-weight: 700; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ship-line .chev { color: var(--muted); }
.ship-panel { border-radius: 14px; overflow: hidden; top: calc(100% + 8px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); }

/* Account + wishlist share one outlined pill; the cart is its own green pill with the total and item count. */
.header-tools { gap: 10px; margin: 0; }
.tools-pill { display: flex; align-items: center; height: 50px; padding: 4px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
.tp-btn { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding-inline: 14px; border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.tp-btn svg { width: 22px; height: 22px; color: var(--primary-ink); }
.tp-btn:hover { background: var(--primary-tint); color: var(--primary-ink); }
.tp-sep { width: 1px; height: 24px; background: var(--line); }
.tp-count { min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 99px; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; }
.tp-count[hidden] { display: none; }
.cart-pill { display: flex; align-items: center; gap: 10px; height: 50px; padding-inline: 18px 7px; border-radius: 999px; background: var(--blue); color: #fff; white-space: nowrap; box-shadow: 0 6px 16px rgba(106, 168, 79, 0.3); transition: background 0.2s, box-shadow 0.2s; }
.cart-pill:hover { background: var(--primary-strong); box-shadow: 0 8px 20px rgba(79, 125, 59, 0.35); }
.cart-pill svg { width: 22px; height: 22px; }
.cart-pill .nana-cart-total { font-size: 15px; font-weight: 800; }
.cart-pill .badge, .cart-pill .badge[hidden] { position: static; display: grid; min-width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: var(--primary-ink); font-size: 14px; }

/* Nav row: categories button with a green icon tile, links inside a soft segmented track. */
.header-nav { height: var(--header-nav); display: block; padding: 0; background: #fff; box-shadow: none; border-bottom: 1px solid var(--line); }
.header-nav .hdr-in { gap: 14px; }
/* «جميع الفئات» with a burger icon, set apart from the plain text links by a divider. */
.nav-link.is-cat { height: 40px; padding: 0; padding-inline-end: 28px; margin-inline-end: 12px; gap: 10px; border: 0; border-inline-end: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); font-size: 15px; font-weight: 800; }
.nav-link.is-cat svg:first-child { width: 20px; height: 16px; color: var(--primary-ink); }
.nav-link.is-cat:hover, .nav-link.is-cat[aria-expanded="true"] { color: var(--primary-ink); }
.nav-links { min-width: 0; display: flex; align-items: center; gap: 28px; overflow: hidden; margin-inline-end: auto; }
.nav-links .nav-link { height: 40px; padding: 0; font-size: 14px; font-weight: 600; color: #3a3a3a; white-space: nowrap; transition: color 0.2s; }
.nav-links .nav-link:hover { color: var(--primary-ink); }
.nav-note { display: inline-flex; align-items: center; gap: 10px; }
.nn-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary-ink); }
.nn-ic svg { width: 20px; height: 20px; }
.nn-tx { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
.nn-tx b { font-size: 13px; font-weight: 800; color: var(--primary-ink); }
.nn-tx small { font-size: 11px; color: var(--muted); }
.nav-link img { width: 20px; height: 20px; object-fit: contain; }

/* Menus open under the header's current bottom edge (set by theme.js), lined up with the page container. */
.overlay { inset: var(--hdr-bottom, 176px) 0 0; }
.mega, .mega-sub { top: var(--hdr-bottom, 176px); max-height: calc(100vh - var(--hdr-bottom, 176px)); }
@media (min-width: 1024px) {
  .mega { inset-inline-start: max(0px, calc((100vw - var(--wrap)) / 2)); border-end-start-radius: 14px; }
  .mega-sub { inset-inline-start: calc(max(0px, calc((100vw - var(--wrap)) / 2)) + min(278px, 88vw)); width: min(922px, calc(100vw - 278px)); border-end-end-radius: 14px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ship-wrap, .nav-note { display: none; }
  .tp-btn span:not(.tp-count) { display: none; }
}
@media (max-width: 1023px) {
  .topbar .hdr-in { width: calc(100% - 32px); height: 34px; justify-content: center; }
  .topbar-msg { justify-content: center; font-size: 12px; }
}

.badge[hidden] { display: none; }

.mobile-header { background: var(--header-bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.m-ship { color: var(--ink); background: var(--page); border-bottom-color: var(--line); }
.m-ship .pin { width: 28px; height: 28px; }
.menu-btn { color: var(--ink); }
.m-logo { width: 44px; height: 44px; }
.m-heart { background: var(--primary-tint); border-color: var(--primary-tint-2); }
.mobile-header .search-form input { background: var(--page); border: 1.5px solid var(--primary-tint-2); }

/* Live search results */
.search-panel a { justify-content: space-between; }
.search-panel a span { flex: 1; }
.search-panel a b { font-size: 13px; color: var(--primary-ink); white-space: nowrap; }
.search-all { display: block; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--line); background: var(--page); color: var(--primary-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* Mega menu: «عرض الكل» link */
.sub-link.is-all { color: var(--primary-ink); font-weight: 700; }

/* Bottom bar (mobile) */
.bottom-nav a, .bottom-nav button { position: relative; }
.bottom-nav svg { width: 22px; height: 22px; }

/* WhatsApp «اسأل الصيدلي» button */
.ask { display: grid; place-items: center; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35); }
.ask svg { width: 28px; height: 28px; }

/* ===== Home ===== */
.hero-swiper { aspect-ratio: 2000 / 667; }
.tile-swiper img { aspect-ratio: 1080 / 300; width: 100%; height: auto; object-fit: cover; }
.product-card .out { font-size: 11px; color: var(--red); font-weight: 700; }
.product-card .add.is-loading { opacity: 0.6; pointer-events: none; }
a.add { display: grid; place-items: center; }

/* ===== Generic pages / WooCommerce pages ===== */
.page-section { padding: 16px 0 48px; }
.page-title { margin: 0 0 16px; font-size: 26px; font-weight: 700; }
.page-box { background: #fff; border-radius: 10px; padding: 28px; line-height: 1.9; }
.page-box > :first-child { margin-top: 0; }
.wc-box { min-height: 200px; }
.primary-link, .cart-cta.is-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 8px; font-weight: 700; }
.primary-link { background: var(--blue); color: #fff; }
.cart-cta.is-ghost { background: #fff; color: var(--primary-ink); border: 1px solid var(--blue); }
.not-found .nf-code { display: block; font-size: 72px; font-weight: 800; line-height: 1; color: var(--blue); }
.not-found h1 { margin: 12px 0 0; font-size: 24px; }
.nf-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.wish-loading { padding: 24px; text-align: center; color: var(--muted); }
.cart-empty > svg { width: 64px; height: 64px; color: var(--muted); }

/* WooCommerce: notices, buttons, forms */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; margin: 0 0 16px !important; padding: 14px 16px !important; border: 0 !important; border-radius: 10px;
  background: var(--primary-tint) !important; color: var(--ink) !important; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.woocommerce-error { background: #fdecef !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; }
.woocommerce-message .button, .woocommerce-info .button { margin-inline-start: auto; order: 2; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--blue) !important; color: #fff !important; border-radius: 8px !important; font-family: inherit; font-weight: 700 !important; padding: 12px 20px !important; border: 0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--primary-strong) !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.select2-container .select2-selection--single, .woocommerce .quantity .qty, #coupon_code {
  min-height: 44px; border: 1px solid #d6d6d6 !important; border-radius: 8px !important; padding: 8px 12px; font: inherit; background: #fff;
}
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 26px; }
.woocommerce form .form-row label { font-size: 13px; color: #424242; margin-bottom: 4px; }
.woocommerce form .form-row { padding: 0 0 12px; margin: 0; }

/* Cart */
.is-wc-page .woocommerce { display: block; }
.woocommerce-cart-form, .cart-collaterals .cart_totals, .woocommerce-checkout #order_review, .woocommerce-checkout #customer_details,
.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-form-register, .u-columns .u-column1, .u-columns .u-column2 {
  background: #fff; border-radius: 10px; padding: 20px;
}
.woocommerce table.shop_table { border: 0; border-collapse: collapse; margin: 0; }
.woocommerce table.shop_table th { font-weight: 700; font-size: 13px; color: var(--muted); background: transparent; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 1px solid #f0f0f0; padding: 12px 10px; }
.woocommerce table.shop_table img { width: 72px; height: 72px; object-fit: contain; border: 1px solid #f0f0f0; border-radius: 8px; }
.woocommerce-cart-form td.product-name a { color: var(--ink); font-weight: 600; }
.woocommerce a.remove { color: var(--red) !important; font-size: 22px; }
.woocommerce a.remove:hover { background: #fdecef; }
.cart-collaterals { margin-top: 16px; }
.cart-collaterals .cart_totals { float: none !important; width: 100% !important; max-width: 420px; margin-inline-start: auto; }
.cart_totals h2, .woocommerce-checkout h3, #order_review_heading { font-size: 18px; margin: 0 0 12px; }
.wc-proceed-to-checkout .checkout-button { display: block !important; text-align: center; font-size: 16px !important; }
.woocommerce .cart .coupon { display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce .cart-empty.woocommerce-info { justify-content: center; font-size: 16px; padding: 32px !important; background: #fff !important; }
.return-to-shop { text-align: center; }

/* Checkout */
.woocommerce-checkout .col2-set { width: 100%; }
.woocommerce-checkout #customer_details { margin-bottom: 16px; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none !important; width: 100% !important; }
/* WooCommerce's clearfix pseudo-elements would take grid cells. */
.col2-set::before, .col2-set::after { display: none !important; }
#order_review_heading { margin-top: 0; }
.woocommerce-checkout-payment { background: var(--page) !important; border-radius: 10px !important; }
.woocommerce-checkout #payment div.payment_box { background: #fff; color: var(--ink); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }
@media (min-width: 1024px) {
  form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
  form.checkout > .woocommerce-NoticeGroup, form.checkout > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  form.checkout #order_review_heading, form.checkout #order_review { grid-column: 2; }
  .woocommerce-cart .woocommerce { display: grid !important; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .woocommerce-cart .cart-collaterals { margin: 0; }
  .woocommerce-cart .cart-collaterals .cart_totals { max-width: none; }
}

/* My account */
.woocommerce-account .woocommerce { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { float: none !important; width: 100% !important; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 10px; border-bottom: 1px solid #f0f0f0; color: var(--ink); }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--primary-ink); font-weight: 700; background: var(--primary-tint); border-radius: 8px; }
.u-columns .u-column1, .u-columns .u-column2 { float: none !important; width: 100% !important; }

/* ===== Product page additions ===== */
.pdp-stock { font-size: 12px; font-weight: 700; color: var(--primary-ink); background: var(--primary-tint); padding: 4px 10px; border-radius: 20px; }
.pdp-stock.is-out { color: var(--red); background: #fdecef; }
.pdp-short { font-size: 13px; color: #424242; margin-bottom: 8px; }
.pdp-short p { margin: 0 0 8px; }
.pdp-cart { display: flex; gap: 10px; align-items: center; }
.pdp-cart .pdp-add { flex: 1; }
.pdp-cart .qty-step input { width: 44px; height: 100%; border: 0; text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.pdp-cart .qty-step input::-webkit-outer-spin-button, .pdp-cart .qty-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-step { height: 50px; }
.pdp-add.is-loading { opacity: 0.7; }
.pdp-out { margin: 0; color: var(--red); font-weight: 700; }
.pdp-wc-cart .variations select { min-height: 40px; border-radius: 8px; border: 1px solid #d6d6d6; padding: 0 8px; }
.pdp-desc img { max-width: 100%; height: auto; border-radius: 8px; }
.rev-empty { padding: 20px 24px; margin: 0; color: var(--muted); }
.rev-form { padding: 20px 24px; border-top: 1px solid #f0f0f0; }
.rev-form .comment-reply-title { margin: 0 0 12px; font-size: 16px; }
.rev-form p, .rev-form .comment-form-rating { margin: 0 0 12px; display: grid; gap: 6px; }
.rev-form input[type=text], .rev-form input[type=email], .rev-form textarea, .rev-form select { min-height: 44px; border: 1px solid #d6d6d6; border-radius: 8px; padding: 8px 12px; font: inherit; }
.rev-form .form-submit input { background: var(--blue); color: #fff; border: 0; border-radius: 8px; min-height: 44px; padding: 0 22px; font: inherit; font-weight: 700; cursor: pointer; }
.rev-form .stars a { color: #f39c3c; }
@media (max-width: 1023px) {
  .pdp-cart .qty-step { display: none; }
  .woocommerce table.shop_table_responsive tr td::before { font-weight: 700; }
  .page-box { padding: 18px; }
}

/* Payment logos are white cards — outline them so they show on the light footer band. */
.pay-row img { background: #fff; border: 1px solid #e3e6e1; border-radius: 6px; box-sizing: content-box; padding: 2px; }
/* WooCommerce appends a «View cart» link after AJAX add buttons; the header badge and toast already cover it. */
a.added_to_cart { display: none !important; }

/* Contact Form 7 */
.wpcf7 form { display: grid; gap: 4px; max-width: 640px; }
.wpcf7 label { display: block; font-size: 14px; font-weight: 500; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 12px 14px; border: 1px solid #dfe3dc; border-radius: 10px; font: inherit; background: #fff; }
.wpcf7 textarea { height: 140px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(106, 168, 79, .15); }
.wpcf7 input[type=submit] { background: var(--blue); color: #fff; border: 0; border-radius: 10px; padding: 12px 32px; font: inherit; font-weight: 700; cursor: pointer; }
.wpcf7 .wpcf7-spinner { margin: 0 12px; }
.wpcf7 form .wpcf7-response-output { margin: 12px 0 0; border-radius: 10px; padding: 10px 14px; }

/* ===== Home: main slider ===== */
.hero { padding-top: 20px; }
.hero-box { position: relative; border-radius: 20px; overflow: hidden; isolation: isolate; background: var(--primary-tint-2); box-shadow: 0 12px 32px rgba(55, 87, 41, 0.12); }
.hero-box .hero-swiper { aspect-ratio: 2000 / 667; }
/* Slow zoom-out on the slide that is showing. */
.hero-swiper img { transform: scale(1.07); transition: transform 7s linear; }
.hero-swiper .swiper-slide-active img { transform: scale(1); }
.hero-arrow {
  position: absolute; top: 50%; z-index: 3; width: 50px; height: 50px; margin-top: -25px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.82); color: var(--ink); backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); opacity: 0; transition: opacity 0.25s, transform 0.25s, background 0.2s, color 0.2s;
}
.hero-arrow svg { width: 22px; height: 22px; }
.hero-arrow.is-prev { inset-inline-start: 22px; transform: translateX(12px); }
.hero-arrow.is-next { inset-inline-end: 22px; transform: translateX(-12px); }
.hero-box:hover .hero-arrow, .hero-arrow:focus-visible { opacity: 1; transform: none; }
.hero-arrow:hover { background: #fff; color: var(--primary-ink); }
.hero-box .hero-dots.swiper-pagination-bullets {
  position: absolute; z-index: 3; bottom: 16px; top: auto; left: 50%; width: auto; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(8px);
}
.hero-dots .swiper-pagination-bullet {
  position: relative; overflow: hidden; width: 8px; height: 8px; margin: 0 !important; padding: 0; border: 0;
  border-radius: 99px; background: rgba(36, 36, 36, 0.22); opacity: 1; cursor: pointer; transition: width 0.35s;
}
.hero-dots .swiper-pagination-bullet-active { width: 40px; background: rgba(36, 36, 36, 0.14); }
.hero-dots .swiper-pagination-bullet i { position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform-origin: right; transform: scaleX(0); }
.hero-dots .swiper-pagination-bullet-active i { transform: scaleX(var(--hero-progress, 0)); }
[dir="ltr"] .hero-dots .swiper-pagination-bullet i { transform-origin: left; }
@media (max-width: 1023px) { .hero-arrow { display: none; } }
@media (max-width: 767px) {
  .hero { padding-top: 12px; }
  .hero-box { border-radius: 14px; box-shadow: 0 6px 18px rgba(55, 87, 41, 0.1); }
  .hero-box .hero-dots.swiper-pagination-bullets { bottom: 8px; padding: 5px 8px; gap: 4px; }
  .hero-dots .swiper-pagination-bullet { width: 6px; height: 6px; }
  .hero-dots .swiper-pagination-bullet-active { width: 24px; }
}

/* ===== Home: category circles marquee ===== */
.cat-marquee {
  overflow: hidden; padding: 8px 0 4px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cat-marquee.is-dragging { cursor: grabbing; }
.cat-marquee.is-dragging .cat-item { pointer-events: none; }
.cat-track { gap: 28px; }
.cat-item { flex: none; width: 140px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--ink); -webkit-user-drag: none; }
.cat-circle {
  display: block; width: 140px; height: 140px; border-radius: 50%; overflow: hidden; background: #fff;
  border: 3px solid var(--primary-tint-2); box-shadow: 0 6px 18px rgba(55, 87, 41, 0.08);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.cat-circle img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 0.4s; }
.cat-name { font-size: 14px; font-weight: 700; line-height: 1.4; min-height: 40px; transition: color 0.2s; }
.cat-item:hover .cat-circle, .cat-item:focus-visible .cat-circle { border-color: var(--blue); box-shadow: 0 10px 26px rgba(55, 87, 41, 0.18); transform: translateY(-4px); }
.cat-item:hover .cat-circle img { transform: scale(1.08); }
.cat-item:hover .cat-name { color: var(--primary-ink); }
@media (max-width: 767px) {
  .cat-track { gap: 14px; }
  .cat-item { width: 100px; gap: 8px; }
  .cat-circle { width: 100px; height: 100px; }
  .cat-name { font-size: 12px; min-height: 34px; }
}

/* ===== Home: banners ===== */
.promo { display: block; position: relative; overflow: hidden; border-radius: 18px; background: var(--primary-tint-2); }
.promo img { display: block; width: 100%; height: auto; transition: transform 0.6s ease; }
.promo:hover img { transform: scale(1.03); }
/* Moving banner row: two banners fill the container width (one and a bit on phones); images are never cropped. */
.banner-marquee { container-type: inline-size; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.banner-marquee.is-dragging { cursor: grabbing; }
.banner-marquee.is-dragging .promo { pointer-events: none; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.banner-marquee .marquee-track { gap: 20px; align-items: center; }
.banner-marquee .promo { flex: none; width: calc((100cqw - 20px) / 2); -webkit-user-drag: none; }
.banner-marquee .promo img { pointer-events: none; }
@media (max-width: 767px) {
  .promo { border-radius: 12px; }
  .banner-marquee .marquee-track { gap: 12px; }
  .banner-marquee .promo { width: 86cqw; }
}

/* Home: category block — banner on top, that category's products under it. */
.cat-block { padding: 0; }
.cat-block-banner { margin-bottom: 20px; }
@media (max-width: 767px) {
  .cat-block-banner { margin-bottom: 14px; }
}

/* Home: «سلايدر شبكي» — two rows of compact horizontal cards with the product's rank. */
.grid-swiper .swiper-slide { height: auto; display: flex; flex-direction: column; gap: 16px; }
.grid-cell { position: relative; }
.grid-swiper .product-card {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 16px; align-content: center;
  height: 100%; min-height: 220px; padding: 14px; border-radius: 18px; border: 1px solid transparent;
  box-shadow: 0 4px 18px rgba(36, 36, 36, 0.05); transition: border-color 0.2s, box-shadow 0.2s;
}
.grid-swiper .product-card:hover { border-color: var(--primary-tint-2); box-shadow: 0 10px 26px rgba(55, 87, 41, 0.12); }
.grid-swiper .product-card > * { grid-column: 2; }
.grid-swiper .product-card > .product-media { grid-column: 1; grid-row: 1 / span 6; align-self: center; height: 190px; border-radius: 14px; }
.grid-swiper .product-media img { padding: 4px; }
@media (max-width: 599px) {
  .grid-swiper .product-card { grid-template-columns: 140px minmax(0, 1fr); min-height: 180px; }
  .grid-swiper .product-card > .product-media { height: 150px; }
}
.grid-swiper .wish { display: none; }
.grid-swiper .add { width: 34px; height: 34px; bottom: 6px; inset-inline-start: 6px; }
.grid-swiper .off { justify-self: start; margin: 0 0 6px; }
.grid-swiper .product-card h3 { font-size: 14px; font-weight: 600; min-height: 0; margin: 0 0 8px; }
.grid-swiper .now { font-size: 17px; }
.grid-swiper .meta { margin-top: 8px; min-height: 0; }
.grid-cell { height: 100%; }
.rank {
  position: absolute; z-index: 2; top: 20px; inset-inline-start: 20px; min-width: 34px; height: 24px; padding-inline: 7px;
  display: grid; place-items: center; border-radius: 99px; background: #fff; color: var(--primary-ink); font-size: 12px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(36, 36, 36, 0.1);
}
.grid-cell.is-top .rank { background: var(--blue); color: #fff; }

/* Home: promo mosaic — square banner on the right, two wide banners stacked on the left (RTL).
   Two 1200×580 banners plus the gap stack to exactly the square's height, so nothing is cropped. */
.promo-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.promo-mosaic .is-square { grid-row: 1 / span 2; }
.promo-mosaic .promo img { width: 100%; height: 100%; }
.promo-mosaic .is-square img { aspect-ratio: 1; }
.promo-mosaic .is-stack img { aspect-ratio: 1200 / 580; }
@media (max-width: 767px) {
  .promo-mosaic { grid-template-columns: 1fr; gap: 12px; }
  .promo-mosaic .is-square { grid-row: auto; }
}

/* Wishlist heart on product cards and the product page: bigger. */
.product-card .wish { width: 40px; height: 40px; }
.product-card .wish svg { width: 22px; height: 22px; }
.grid-swiper .wish { display: grid; top: 6px; inset-inline-end: 6px; }
.grid-swiper .rank { top: 20px; }
.pdp-act { width: 44px; height: 44px; }
.pdp-act img { width: 26px; height: 26px; }
.pdp-act[data-share] img { width: 22px; height: 22px; }