/* =========================================================================
   Shuaa (shuaa.gg) — Landing Page Redesign
   Theme: Nextron
   Section 1 / 5 (image1.png): Header + Hero
   ========================================================================= */

/* ---- 1. Tokens — --header-background is the dark-teal token for the
   announcement bar (and any future dark sections); the header navbar row
   itself is white (see §2) and no longer uses this token. ---- */
:root {
  --header-background: #0f2e32;
  --header-text: #ffffff;
  --color-primary: #1cc6c6;
  --color-primary-dark: #14a3a3;
  --color-primary-light: #5fe0e0;
  --color-background: #f5f5f5;
}

/* =========================================================================
   2. Header — white navbar row; dark-teal announcement strip above it
   ========================================================================= */

header.store-header.Nextron-header {
  background: #ffffff;
  border-bottom: 1px solid #e7ecee;
}

/* Announcement bar — static single centered line, no scrolling ticker.
   The theme renders the same text 15x in sibling .top-marquee divs to fake
   an infinite scroll; with the animation stopped we only need the first
   copy, so the rest are hidden (dedup, not a layout-positional selector). */
header.store-header.Nextron-header .main-top-marquee {
  background-color: var(--header-background) !important;
  justify-content: center !important;
  animation: none !important;
  transform: none !important;
}

header.store-header.Nextron-header .main-top-marquee .top-marquee {
  padding-block: 0.5rem !important;
  animation: none !important;
}

header.store-header.Nextron-header .main-top-marquee .top-marquee:not(:first-child) {
  display: none !important;
}

header.store-header.Nextron-header .main-top-marquee p {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

/* Header row — comfortable height + spacing matching image1.png */
header.store-header.Nextron-header #mainnav .container > div {
  padding-block: 0.85rem;
}

/* Reorder the header zones: hamburger → right, icons → left. The logo is
   taken out of flex flow entirely and centered with absolute positioning
   so it stays perfectly centered regardless of the (unequal) widths of the
   icons group vs. the hamburger — flex centering between unequal siblings
   would otherwise pull it off-center toward the narrower side. */
header.store-header.Nextron-header #mainnav .container > div > div.gap-2.justify-start {
  order: 1;
}

header.store-header.Nextron-header #mainnav .container > div > div.icons {
  order: 2;
}

header.store-header.Nextron-header #mainnav .container > div > div.flex.flex-1 {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  flex: none;
}

/* Hamburger bars used `bg-background` (light, for the old dark header) —
   now that the header is white, they need a dark color to stay visible. */
header.store-header.Nextron-header .mburger span {
  background-color: var(--color-font) !important;
}

header.store-header.Nextron-header .the-logo {
  height: 46px !important;
}

@media (min-width: 1024px) {
  header.store-header.Nextron-header .the-logo {
    height: 52px !important;
  }
}

header.store-header.Nextron-header .icons {
  gap: 1.35rem !important;
}

header.store-header.Nextron-header .icons,
header.store-header.Nextron-header .icons a,
header.store-header.Nextron-header .icons button,
header.store-header.Nextron-header .icons i {
  color: var(--color-font);
}

header.store-header.Nextron-header .icons svg {
  width: 22px;
  height: 22px;
}

header.store-header.Nextron-header .icons i {
  font-size: 1.3rem;
}

header.store-header.Nextron-header .icons button:hover,
header.store-header.Nextron-header .icons a:hover {
  color: var(--color-primary);
}

/* =========================================================================
   3. Hero — dark vignette over the product photo + injected text overlay
   ========================================================================= */

.Nextron-hero-section-0 .hero-banner-wrapper {
  position: relative;
}

.Nextron-hero-section-0 .content-wrapper-1 {
  justify-content: flex-start !important;
  text-align: start;
}

/* Hero content injected by custom.js (Hero module) */
.sm-hero {
  position: relative;
  z-index: 3;
  max-width: 480px;
  padding-inline-start: clamp(1.25rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.sm-hero-title {
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.25;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.sm-hero-desc {
  color: #c7d4d8;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  margin: 0;
  max-width: 34ch;
}

.sm-hero-badges {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.sm-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.sm-hero-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(20, 200, 176, 0.4);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sm-hero-cta:hover {
  box-shadow: 0 0 32px rgba(20, 200, 176, 0.45);
  transform: translateY(-1px);
  color: #ffffff;
}

@media (max-width: 767px) {
  .sm-hero {
    max-width: 100%;
    gap: 0.6rem;
  }
}

/* =========================================================================
   4. "تسوّق حسب الفئة" — Shop by Category row
   Real categories already render here (.Nextron-Links-1) as a pill row.
   Off-white section background (matches the rest of the page's light
   sections); each item is a rounded-rectangle light-gray card holding the
   product photo, with the label sitting outside and below the card
   (.name-wrapper is already a DOM sibling of .img-wrapper, not nested
   inside it, so this falls out naturally from the layout). The section
   right after this one (Best Sellers, .AU-products-2) stays white so the
   two sections read as distinct bands — see §6.
   ========================================================================= */

.Nextron-Links-1 {
  background: var(--color-background);
}

.Nextron-Links-1 .subtext {
  color: #7c8b96;
}

.Nextron-Links-1 .categories-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-start;
  gap: 0.85rem;
  padding-inline: 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.Nextron-Links-1 .categories-grid::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .Nextron-Links-1 .categories-grid {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
  }
}

.Nextron-Links-1 .category {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: none;
  width: 136px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  gap: 0.75rem;
}

/* Disable the theme's sliding pill-shaped hover background — no card
   surface remains for it to slide across. */
.Nextron-Links-1 .category::before {
  content: none;
}

.Nextron-Links-1 .img-wrapper {
  width: 130px;
  height: 165px;
  border-radius: 18px !important;
  background: rgba(227, 231, 235, 1);
  border: 2px solid transparent;
  padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.Nextron-Links-1 .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.Nextron-Links-1 .category:hover .img-wrapper,
.Nextron-Links-1 .sm-cat-active .img-wrapper {
  border-color: var(--color-primary);
  box-shadow:
    inset 0 -16px 24px -8px rgba(28, 198, 198, 0.35),
    0 0 0 3px rgba(28, 198, 198, 0.12);
}

.Nextron-Links-1 .name-wrapper {
  flex: none;
  margin-top: 0;
}

.Nextron-Links-1 .name-wrapper span {
  color: var(--color-font);
  font-weight: 500;
  font-size: 0.85rem;
  text-align: center;
  transition: color 0.25s ease;
}

.Nextron-Links-1 .category:hover .name-wrapper span,
.Nextron-Links-1 .sm-cat-active .name-wrapper span {
  color: var(--color-primary);
}

/* =========================================================================
   5. Product cards — consistent white card background at rest + teal
      border/lift on hover (matches the category cards above, image.png)
   ========================================================================= */

.s-product-card-entry {
  background: #ffffff !important;
  border: 1px solid #e7ecee !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 35, 45, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.s-product-card-entry:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 10px 24px rgba(20, 200, 176, 0.18);
  transform: translateY(-3px);
}

/* Quick-view / wishlist icon buttons pick up the teal accent on card hover,
   instead of staying neutral gray (image.png shows the heart icon teal). */
.s-product-card-entry:hover .s-product-card-quick-btn,
.s-product-card-entry:hover .s-product-card-wishlist-btn {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.s-product-card-entry .s-product-card-wishlist-btn:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

/* Current price bold + dark; original price (when a product has a real
   discount) struck through in lighter gray beside it. */
.s-product-card-price {
  font-weight: 700 !important;
  color: var(--color-font);
}

.s-product-card-content-sub .old-price,
.s-product-card-content-sub del {
  color: #9aa3a8;
  font-weight: 400;
  text-decoration: line-through;
}

/* Add to Cart — filled dark-teal button with white text, full width
   (the theme renders this as an outline button by default). */
.s-product-card-content-footer .s-button-element.s-button-primary-outline {
  background: var(--header-background) !important;
  border-color: var(--header-background) !important;
  color: #ffffff !important;
}

.s-product-card-content-footer .s-button-element.s-button-primary-outline:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* =========================================================================
   6. "الأكثر مبيعاً" — Best Sellers (.AU-products-2)
   White section background (contrasts with the off-white category band
   directly above it). Heading on the right, "عرض الكل" (View All) as an
   underlined secondary link on the left — already the natural RTL flex
   order, just restyled.
   ========================================================================= */

.AU-products-2 {
  background: #ffffff;
}

.AU-products-2 .section-top-link {
  text-decoration: underline;
  color: var(--color-graytext);
  transition: color 0.25s ease;
}

.AU-products-2 .section-top-link:hover {
  color: var(--color-primary);
}