/**

Theme Name: EINS SHOP

Author: Arqam Web

Author URI: http://www.arqamweb.com/

Description: Arqam Web is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: arqamweb

Template: astra

*/

.topbar-contact span {
  display: flex;
  gap: 1rem;
}

.topbar-contact a {
  display: flex;
  align-items: center;
}

.topbar-contact a:first-child::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  background-color: currentColor;
  mask: url("frontend/assets/svg/phone.svg") no-repeat center / contain;
}

.topbar-contact a:last-child::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  background-color: currentColor;
  mask: url("frontend/assets/svg/mail.svg") no-repeat center / contain;
}

/* ===============================
   Category badges (Concept A)
   =============================== */
.astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product {
  position: relative;
}

/* Astra بيطلع Sale بتاعه على الكارت، والـ stack بتاعنا فيه Sale بالفعل */
.woocommerce ul.products li.product .ast-onsale-card {
  display: none;
}

/* Arqam Web Offers plugin: نفس ألوان الثيم */
:root {
  --arqam-offers-color: hsl(var(--primary));
  --arqam-offers-color-text: hsl(var(--primary-foreground));
}

.eins-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

.eins-badge {
  display: inline-block;
  background: hsl(60 20% 98% / 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.12);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.eins-badge:first-child {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: transparent;
}

/* ===============================
   Offer Pop-up (Reminder)
   =============================== */
.eins-exit-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: hsl(130 12% 12% / 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.eins-exit-overlay.is-open {
  opacity: 1;
}

.eins-exit-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border-radius: 12px;
  padding: 36px 28px 24px;
  text-align: center;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.35s ease;
}

.eins-exit-overlay.is-open .eins-exit-modal {
  transform: none;
}

.eins-exit-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.eins-exit-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--brand-neutral));
}

.eins-exit-title {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.2;
  margin: 6px 0;
  color: hsl(var(--foreground));
}

.eins-exit-text {
  color: hsl(var(--muted-foreground));
  font-size: 0.95rem;
  margin: 0 0 18px;
}

.eins-exit-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px dashed hsl(var(--primary));
  border-radius: 8px;
  background: hsl(var(--brand-cream));
}

.eins-exit-offer-amount {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 2rem;
  line-height: 1.1;
  color: hsl(var(--primary));
}

.eins-exit-offer-plus {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: 0.04em;
}

.eins-exit-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  border-radius: 4px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 500;
  text-decoration: none;
}

.eins-exit-cta:hover,
.eins-exit-cta:focus {
  color: hsl(var(--primary-foreground));
  opacity: 0.92;
}

.eins-exit-later {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.eins-exit-later:hover,
.eins-exit-later:focus {
  background: none;
  color: hsl(var(--foreground));
}

/* ===============================
   Hero slider (images only)
   =============================== */
.eins-hero-slider {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.eins-hero-slider .hero-slide {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.eins-hero-slider .hero-slide:not(:first-child) {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

.eins-hero-slider .hero-slide.is-active {
  opacity: 1;
}

.eins-hero-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.eins-hero-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: hsl(var(--primary-foreground) / 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.eins-hero-dots button.is-active {
  width: 24px;
  background: hsl(var(--primary-foreground));
}

.eins-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: hsl(var(--background) / 0.75);
  color: hsl(var(--primary));
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.eins-hero-arrow:hover,
.eins-hero-arrow:focus {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.eins-hero-prev {
  left: 1.5rem;
}

.eins-hero-next {
  right: 1.5rem;
}

@media (max-width: 640px) {
  .eins-hero-arrow {
    width: 34px;
    height: 34px;
  }

  .eins-hero-arrow svg {
    width: 18px;
    height: 18px;
  }

  .eins-hero-prev {
    left: 0.75rem;
  }

  .eins-hero-next {
    right: 0.75rem;
  }
}

/* ===============================
   November Offer hero (Concept 4)
   =============================== */
.eins-offer {
  display: grid;
  min-height: calc(100vh - 110px);
  background: hsl(var(--brand-cream));
  overflow: hidden;
}

@media (min-width: 992px) {
  .eins-offer {
    grid-template-columns: 1fr 1fr;
  }
}

.eins-offer-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 20px;
}

@media (min-width: 992px) {
  .eins-offer-text {
    padding: 64px 72px;
  }
}

.eins-offer-eyebrow,
.eins-deal-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--brand-neutral));
}

.eins-offer-num {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: clamp(96px, 15vw, 200px);
  line-height: 0.9;
  color: hsl(var(--primary));
  letter-spacing: -0.02em;
  margin-top: 8px;
}

.eins-offer-num sup {
  position: static;
  display: inline-block;
  font-size: 0.35em;
  line-height: 1;
  vertical-align: top;
  margin-top: 0.2em;
  color: hsl(var(--brand-neutral));
}

.eins-offer-title {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.15;
  color: hsl(var(--foreground));
  margin: 14px 0;
}

.eins-offer-sub {
  max-width: 480px;
  font-size: 1.05rem;
  color: hsl(var(--muted-foreground));
  margin: 0;
}

.eins-offer-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.eins-offer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid hsl(var(--primary));
  border-radius: 4px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.eins-offer-btn:hover,
.eins-offer-btn:focus {
  color: hsl(var(--primary-foreground));
  transform: translateY(-2px);
}

.eins-offer-btn--ghost {
  background: transparent;
  color: hsl(var(--primary));
}

.eins-offer-btn--ghost:hover,
.eins-offer-btn--ghost:focus {
  background: hsl(var(--primary));
}

/* نفس أنيميشن زرار الإضافة للسلة في استرا */
.eins-offer-btn.loading {
  opacity: 0.25;
}

.eins-offer-btn.loading::after {
  display: inline-block;
  content: "";
  position: relative;
  top: 0;
  right: -0.5em;
  width: 0.8em;
  height: 0.8em;
  background-color: currentColor;
  border-radius: 100%;
  animation: eins-dot-pulse 0.65s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}

.eins-offer-btn.added::after {
  font-family: WooCommerce;
  content: "\e017";
  margin-left: 0.53em;
  vertical-align: bottom;
}

.eins-offer-ctas a.added_to_cart {
  display: none;
}

@keyframes eins-dot-pulse {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: scale(1.2);
    opacity: 0;
  }
}

.eins-offer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 28px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid hsl(var(--border));
}

.eins-offer-meta-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}

.eins-offer-meta b {
  display: block;
  font-size: 1.4rem;
  color: hsl(var(--primary));
  font-variant-numeric: tabular-nums;
}

.eins-offer-meta span {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}

.eins-offer-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 460px;
  background: var(--gradient-hero, hsl(var(--brand-warm)));
  overflow: hidden;
}

.eins-offer-ring {
  position: absolute;
  width: min(80%, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid hsl(var(--brand-neutral) / 0.5);
}

.eins-offer-ring::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  border: 1px dashed hsl(var(--brand-neutral) / 0.45);
  animation: eins-spin 40s linear infinite;
}

/* الإزازتين: كل واحدة بتطفو في توقيت مختلف وبميل عكس التانية */
.eins-offer-bottles {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: min(70vh, 560px);
  direction: ltr;
}

.eins-offer-bottle {
  height: 100%;
  width: auto;
  filter: drop-shadow(0 40px 40px hsl(130 12% 12% / 0.35));
}

.eins-offer-bottle--1 {
  --tilt: -8deg;
  z-index: 2;
  margin-right: -12%;
  animation: eins-float 6s ease-in-out infinite;
}

.eins-offer-bottle--2 {
  --tilt: 8deg;
  position: relative;
  height: 88%;
  animation: eins-float 6s ease-in-out -3s infinite;
}

.eins-offer-bottle--2 img {
  height: 100%;
  width: auto;
}

.eins-offer-tag {
  position: absolute;
  top: 8%;
  right: 4%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 700;
  font-size: 1rem;
  animation: eins-pulse 2s ease-in-out infinite;
}

.eins-offer-badge {
  position: absolute;
  z-index: 3;
  bottom: 8%;
  inset-inline-start: 8%;
  padding: 14px 18px;
  border-radius: 12px;
  background: hsl(var(--background) / 0.95);
  box-shadow: var(--shadow-product);
  line-height: 1.4;
}

.eins-offer-badge b {
  display: block;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}

.eins-offer-badge ins {
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--primary));
  margin-inline-end: 8px;
}

.eins-offer-badge del {
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
}

@keyframes eins-float {
  0%,
  100% {
    transform: translateY(0) rotate(var(--tilt));
  }
  50% {
    transform: translateY(-18px) rotate(calc(var(--tilt) * 0.5));
  }
}

@keyframes eins-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes eins-pulse {
  50% {
    transform: scale(1.08);
  }
}

@media (max-width: 991px) {
  .eins-offer-visual {
    min-height: 400px;
    padding: 40px 0 100px;
  }

  .eins-offer-bottles {
    height: 340px;
  }
}

/* ===============================
   Deal of the Hour (Concept 3)
   =============================== */
.eins-deal {
  background: hsl(var(--brand-dark));
  color: hsl(var(--primary-foreground));
}

.eins-deal-head {
  text-align: center;
  margin-bottom: 40px;
}

.eins-deal-head h2 {
  color: hsl(var(--primary-foreground));
}

.eins-deal-card {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: 20px;
  border-radius: 16px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

@media (min-width: 900px) {
  .eins-deal-card {
    grid-template-columns: 1fr 1.1fr;
    padding: 32px 48px 32px 32px;
  }
}

.eins-deal-img {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: hsl(var(--brand-cream));
}

.eins-deal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eins-deal-tag {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 1;
  padding: 6px 14px;
  border-radius: 999px;
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  font-weight: 700;
  font-size: 0.9rem;
}

/* منتج الشهر: إزازتين بيدخلوا من الجنبين وبعدين بيتنفّسوا، ووراهم دايرة منقطة بتلف */
.eins-deal-img--pair {
  background: radial-gradient(circle at 50% 60%, hsl(var(--brand-warm)), hsl(var(--brand-cream)));
}

.eins-deal-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1;
  translate: -50% -50%;
  scale: 0.6;
  opacity: 0;
  border-radius: 50%;
  border: 1px solid hsl(var(--brand-neutral) / 0.5);
  transition: opacity 1s, scale 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.eins-deal-ring::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px dashed hsl(var(--brand-neutral) / 0.45);
  animation: eins-spin 40s linear infinite;
}

.eins-deal-img--pair img.eins-deal-bottle {
  position: absolute;
  bottom: 7%;
  height: 84%;
  width: auto;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 30px 30px hsl(130 12% 12% / 0.3));
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s;
}

.eins-deal-img--pair img.eins-deal-bottle--1 {
  --r: -6deg;
  left: 30%;
  z-index: 2;
  transform: translateX(-140%) rotate(-25deg);
}

.eins-deal-img--pair img.eins-deal-bottle--2 {
  --r: 7deg;
  left: 46%;
  height: 78%;
  transform: translateX(140%) rotate(25deg);
  transition-delay: 0.15s;
}

.eins-deal-img--pair.is-in .eins-deal-ring {
  opacity: 1;
  scale: 1;
}

.eins-deal-img--pair.is-in img.eins-deal-bottle {
  opacity: 1;
  transform: rotate(var(--r));
}

.eins-deal-img--pair.is-settled img.eins-deal-bottle--1 {
  animation: eins-deal-breathe 4s ease-in-out infinite;
}

.eins-deal-img--pair.is-settled img.eins-deal-bottle--2 {
  animation: eins-deal-breathe 4s ease-in-out -2s infinite;
}

@keyframes eins-deal-breathe {
  50% {
    transform: translateY(-8px) rotate(var(--r)) scale(1.02);
  }
}

.eins-deal-note {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(var(--brand-neutral));
}

.eins-deal-name {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  margin: 10px 0 6px;
}

.eins-deal-name a {
  color: hsl(var(--primary));
  text-decoration: none;
}

.eins-deal-desc {
  color: hsl(var(--muted-foreground));
  margin: 0;
}

.eins-deal-price {
  margin: 18px 0 6px;
  font-size: 2rem;
  font-weight: 700;
  color: hsl(var(--primary));
}

.eins-deal-price del {
  font-size: 1.1rem;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
}

.eins-deal-price ins {
  text-decoration: none;
}

/* عدد القطع في عروض "اشتري X وخد Y" (2×) */
.eins-deal-qty {
  font-size: 1.1rem;
  font-weight: 600;
  margin-inline-end: 4px;
}

.eins-deal-offer {
  display: inline-block;
  margin: 0 0 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: hsl(var(--brand-cream));
  color: hsl(var(--primary));
  font-size: 0.85rem;
  font-weight: 600;
}

.eins-deal-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.eins-deal-timer strong {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.eins-deal-card a.button.eins-deal-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  border-radius: 4px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.eins-deal-card .added_to_cart {
  display: block;
  margin-top: 10px;
  text-align: center;
}


@media (prefers-reduced-motion: reduce) {
  .eins-offer-bottle,
  .eins-offer-ring::after,
  .eins-offer-tag,
  .eins-deal-ring::after,
  .eins-deal-img--pair img.eins-deal-bottle {
    animation: none !important;
  }

  .eins-deal-img--pair img.eins-deal-bottle,
  .eins-deal-ring {
    transition: none;
  }
}