/* ==========================================================================
   Al Masood Elementor Widgets — shared front-end styles
   Mobile-first: every layout below is written for a phone screen first,
   then progressively enhanced at 481px / 769px / 1025px. Column counts
   set via each widget's Elementor "Columns" control only take over at
   1025px+ — below that, layouts always collapse to safe, tested column
   counts no matter what value is chosen in the editor.
   Every color/background/typography value here is only a *default*;
   each widget's Style tab (in Elementor) overrides it per-instance.
   ========================================================================== */

.am-section,
.am-section *,
.am-section *::before,
.am-section *::after {
  box-sizing: border-box;
}

.am-section {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  font-family: inherit;
}

.am-section img {
  max-width: 100%;
  height: auto;
  display: block;
}

.am-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.am-section > *:not(.am-overlay) {
  position: relative;
  z-index: 1;
}

.am-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.am-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}

.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  max-width: 100%;
  text-align: center;
}
.am-btn:hover { transform: translateY(-2px); opacity: 0.92; }
.am-btn-secondary { background: transparent; border-width: 1.5px; border-style: solid; }

/* ---------------- Hero ---------------- */
.am-hero-section {
  background: radial-gradient(circle at 18% 20%, #1d6249, #0a2e22 62%);
  color: #faf6ee;
  padding: clamp(44px, 9vw, 90px) clamp(20px, 5vw, 40px);
}
.am-hero-inner { max-width: 680px; }
.am-hero-section .am-heading {
  font-size: clamp(1.7rem, 6vw, 3.1rem);
  line-height: 1.18;
  margin: 0 0 14px;
  font-weight: 700;
  word-wrap: break-word;
}
.am-arabic { font-size: clamp(1.05rem, 3vw, 1.35rem); margin-bottom: 16px; opacity: 0.9; }
.am-lead { font-size: 0.98rem; line-height: 1.7; max-width: 520px; margin: 0 0 28px; }
.am-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.am-hero-cta .am-btn { flex: 0 1 auto; }
.am-hero-stats { display: flex; gap: 24px 30px; flex-wrap: wrap; }
.am-stat { border-left: 1px solid rgba(255,255,255,0.25); padding-left: 12px; }
.am-stat strong { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.am-stat span { font-size: 0.72rem; letter-spacing: 0.02em; }

/* ---------------- Category Grid ---------------- */
.am-category-grid-section { padding: clamp(36px, 7vw, 60px) clamp(16px, 4vw, 20px); }
.am-grid-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.am-grid-head .am-heading { font-size: clamp(1.5rem, 4vw, 1.9rem); margin: 4px 0 0; }
.am-grid-text { max-width: 380px; color: #78715f; font-size: 0.92rem; }
.am-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.am-tile {
  position: relative;
  display: flex; align-items: flex-end;
  aspect-ratio: 3 / 4;
  padding: 18px;
  color: #fff;
  text-decoration: none;
  background-size: cover;
  background-position: center;
}
.am-tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,46,34,0.05) 30%, rgba(10,46,34,0.85));
}
.am-tile-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.am-tile-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.am-tile-title { font-size: 1.1rem; font-weight: 600; word-wrap: break-word; }

/* ---------------- Product Showcase ---------------- */
.am-showcase-section { padding: clamp(28px, 6vw, 40px) clamp(16px, 4vw, 20px); }
.am-widget-block-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}
.am-showcase-section .am-heading { font-size: clamp(1.25rem, 3.5vw, 1.5rem); margin: 4px 0 0; }
.am-view-all { font-size: 0.86rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.am-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.am-product-card {
  background: #fff;
  border: 1px solid #e4d9c0;
  box-shadow: 0 10px 30px -14px rgba(32,29,24,0.22);
  min-width: 0;
}
.am-product-thumb {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, #1d6249, #0f3d2c);
  overflow: hidden;
}
.am-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.am-product-initial {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.2rem; font-weight: 700; color: rgba(255,255,255,0.92);
}
.am-swatch-1 { background: linear-gradient(150deg, #1d6249, #0f3d2c); }
.am-swatch-2 { background: linear-gradient(150deg, #8a6a2f, #5c451d); }
.am-swatch-3 { background: linear-gradient(150deg, #154937, #0a2e22); }
.am-swatch-4 { background: linear-gradient(150deg, #6f5320, #3f2f13); }
.am-swatch-5 { background: linear-gradient(150deg, #22553f, #0a2e22); }
.am-sale-tag {
  position: absolute; top: 10px; left: 10px;
  background: #0a2e22; color: #e6d3a3;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 4px 9px; border-radius: 999px; z-index: 2;
}
.am-product-info { padding: 14px 16px 18px; }
.am-product-cat { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: #b7924f; font-weight: 600; }
.am-product-title { font-size: 0.92rem; margin: 6px 0 0; line-height: 1.35; word-wrap: break-word; }
.am-product-title a { color: inherit; text-decoration: none; }
.am-product-price { margin-top: 10px; font-weight: 700; color: #0f3d2c; font-size: 0.92rem; }
.am-product-price ins { text-decoration: none; }
.am-product-price del { opacity: 0.55; font-weight: 400; font-size: 0.85em; margin-right: 6px; }
.am-add-cart {
  margin-top: 14px; display: block; text-align: center; width: 100%;
  padding: 10px; border-radius: 999px;
  border: 1.5px solid #0f3d2c; background: transparent; color: #0f3d2c;
  font-weight: 600; font-size: 0.8rem; text-decoration: none; cursor: pointer;
  transition: all 0.2s ease;
}
.am-add-cart:hover { background: #0f3d2c; color: #fff; }
.am-empty-notice {
  padding: 28px 20px; text-align: center; color: #78715f;
  border: 1px dashed #e4d9c0; border-radius: 12px; font-size: 0.88rem;
}

/* ---------------- Trust Strip ---------------- */
.am-trust-section { padding: clamp(22px, 5vw, 30px) clamp(16px, 4vw, 20px); background: #fff; }
.am-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.am-trust-item { display: flex; align-items: center; gap: 14px; min-width: 0; }
.am-trust-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #f4ecdb; color: #b7924f;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex: none;
}
.am-trust-item > div { min-width: 0; }
.am-trust-icon svg { width: 20px; height: 20px; display: block; }
.am-trust-icon img { width: 20px; height: 20px; object-fit: contain; display: block; }
.am-trust-title { display: block; font-size: 0.9rem; color: #0f3d2c; margin-bottom: 2px; }
.am-trust-text { display: block; font-size: 0.78rem; color: #78715f; }

/* ---------------- Testimonials ---------------- */
.am-testimonials-section { padding: clamp(36px, 7vw, 60px) clamp(16px, 4vw, 20px); text-align: center; }
.am-testi-head { margin-bottom: 32px; }
.am-testi-head .am-eyebrow { justify-content: center; }
.am-testi-head .am-heading { font-size: clamp(1.5rem, 4vw, 2rem); }
.am-testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: left;
}
.am-testi-card {
  background: #fff; border: 1px solid #e4d9c0; border-radius: 18px;
  padding: 22px; box-shadow: 0 10px 30px -14px rgba(32,29,24,0.2);
  min-width: 0;
}
.am-testi-stars { color: #c9a961; letter-spacing: 2px; margin-bottom: 12px; }
.am-testi-quote { font-style: italic; color: #4a453c; font-size: 0.9rem; margin: 0; word-wrap: break-word; }
.am-testi-person { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.am-testi-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #0f3d2c; color: #e6d3a3;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex: none;
}
.am-testi-avatar-img { object-fit: cover; }
.am-testi-person strong { display: block; font-size: 0.85rem; color: #0f3d2c; }
.am-testi-person span { font-size: 0.72rem; color: #78715f; }
.am-rating-banner-wrap { display: flex; justify-content: center; margin-top: 36px; }
.am-rating-banner {
  display: inline-flex; align-items: center; gap: 14px;
  background: #f4ecdb; border-radius: 999px; padding: 14px 24px;
  color: #0f3d2c; font-weight: 700; flex-wrap: wrap; justify-content: center;
  max-width: 100%;
}
.am-rating-note { font-size: 0.8rem; font-weight: 400; color: #78715f; }

/* ---------------- Widget Builder ---------------- */
.am-widget-builder-section { padding: clamp(28px, 6vw, 40px) clamp(16px, 4vw, 20px); }
.am-widget-builder-section .am-grid-head { margin-bottom: 30px; }

.am-wb-panel {
  background: #fff;
  border: 1px solid #e4d9c0;
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: 0 10px 30px -14px rgba(32,29,24,0.22);
  margin-bottom: 40px;
}
.am-wb-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.am-wb-panel-head h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.1rem; margin: 0;
}
.am-wb-panel-head h3 svg { flex: none; }
.am-wb-counter { font-size: 0.76rem; color: #78715f; white-space: nowrap; }
.am-wb-counter-active { font-weight: 700; color: #0f3d2c; }
.am-wb-panel-text { font-size: 0.86rem; margin: 0 0 16px; color: #78715f; }
.am-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.am-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  border: 1.5px solid #e4d9c0; cursor: pointer;
  font-size: 0.82rem; font-weight: 500; background: #faf6ee;
  transition: all 0.2s ease; user-select: none; max-width: 100%;
}
.am-chip input { accent-color: #b7924f; width: 15px; height: 15px; cursor: pointer; flex: none; }
.am-chip.active { border-color: #c9a961; background: #f5ead1; color: #0f3d2c; }
.am-chip-count {
  background: #0f3d2c; color: #e6d3a3; font-size: 0.64rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; flex: none;
}
.am-wb-hint {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed #e4d9c0;
  font-size: 0.78rem; color: #78715f;
}
.am-wb-hint svg { flex: none; margin-top: 1px; }
.am-wb-blocks { display: flex; flex-direction: column; gap: 42px; }

/* ---------------- CTA Banner ---------------- */
.am-cta-section {
  background: linear-gradient(120deg, #c9a961, #e6d3a3);
  border-radius: 22px;
  padding: clamp(28px, 6vw, 48px) clamp(20px, 5vw, 50px);
}
.am-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.am-cta-copy { flex: 1 1 260px; min-width: 0; }
.am-cta-copy .am-heading { font-size: clamp(1.35rem, 4vw, 1.7rem); margin: 0 0 8px; word-wrap: break-word; }
.am-cta-text { max-width: 420px; margin: 0; font-size: 0.92rem; }
.am-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   Progressive enhancement — column counts above only apply from here up.
   Below 481px every grid is always a single column; nothing here can
   collapse back to a wide desktop layout on a phone.
   ========================================================================== */

/* Small tablets / large phones */
@media (min-width: 481px) {
  .am-tile-grid   { grid-template-columns: repeat(2, 1fr); }
  .am-product-grid { grid-template-columns: repeat(2, 1fr); }
  .am-trust-grid  { grid-template-columns: repeat(2, 1fr); }
  .am-hero-cta .am-btn { flex: 0 1 auto; }
}

/* Tablets */
@media (min-width: 769px) {
  .am-tile-grid    { grid-template-columns: repeat(3, 1fr); }
  .am-trust-grid   { grid-template-columns: repeat(4, 1fr); }
  .am-testi-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop — the Elementor "Columns" control takes over from here */
@media (min-width: 1025px) {
  .am-product-grid { grid-template-columns: repeat(var(--am-columns, 4), 1fr); }
  .am-tile-grid    { grid-template-columns: repeat(var(--am-tile-columns, 5), 1fr); }
  .am-trust-grid   { grid-template-columns: repeat(var(--am-trust-columns, 4), 1fr); }
  .am-testi-grid   { grid-template-columns: repeat(3, 1fr); }
}

/* Extra-narrow phones: tighten spacing further */
@media (max-width: 360px) {
  .am-hero-stats { gap: 16px 22px; }
  .am-cta-actions .am-btn,
  .am-hero-cta .am-btn { width: 100%; }
}