/* ============================================================
   NW Custom CSS — Claude Design visual styles for Zid theme
   Loads AFTER Tailwind. Overrides Growth Theme defaults.
   ============================================================ */

/* ---- Global ---- */
*, *::before, *::after { box-sizing: border-box; }

/* ---- Breadcrumb links ---- */
.nw-breadcrumb-link:hover { color: #D32F2F !important; }

/* ===== HEADER — mobile-first, no inline styles ===== */
.nw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid #E5E5E5;
  transition: box-shadow .25s ease;
}
.nw-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 0 12px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0; /* allow flex children to shrink */
}
.nw-header-hamburger {
  flex-shrink: 0;
}
.nw-header-logo {
  flex-shrink: 0;
  text-decoration: none;
  direction: ltr;
  unicode-bidi: bidi-override;
  min-width: 0;
}
.nw-header-logo img {
  height: 24px;
  width: auto;
  max-width: 90px;
  display: block;
}
.nw-header-search {
  flex: 1;
  max-width: 420px;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #D1D1D1;
  border-radius: 8px;
  background: #F5F5F5;
}
.nw-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
  flex-shrink: 0;
}
.nw-header-icon-btn {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #1A1A1A;
  padding: 0;
}
.nw-header-cart {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #1A1A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #1A1A1A;
  flex-shrink: 0;
}
.nw-cart-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  background: #D32F2F;
  color: white;
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop header enhancements */
@media (min-width: 1024px) {
  .nw-header-inner {
    padding: 0 48px;
    height: 80px;
    gap: 32px;
  }
  .nw-header-logo img {
    height: 44px;
    max-width: 160px;
  }
  .nw-header-cart {
    width: 44px;
    height: 44px;
  }
  .nw-header-actions {
    gap: 20px;
  }
}

/* ---- Old header responsive (replaced) ---- */

/* ---- Nav link hover (applied via Tailwind or inline) ---- */
.nw-main-nav a { transition: border-color 0.2s; }
.nw-main-nav a:hover { border-bottom-color: #1A1A1A !important; }

/* ---- Footer responsive ---- */
@media (max-width: 900px) {
  .nw-footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .nw-footer-grid { grid-template-columns: 1fr !important; }
}

/* ---- Footer links hover ---- */
.nw-footer-link:hover { color: #fff !important; }

/* ---- Social icon hover ---- */
.nw-social-icon:hover { background: #fff !important; color: #1A1A1A !important; }

/* ---- Product Page responsive ---- */
@media (max-width: 900px) {
  .nw-pdp-main { flex-direction: column !important; }
  .nw-pdp-gallery,
  .nw-pdp-info { width: 100% !important; flex: none !important; }
}

/* ---- Cart responsive ---- */
@media (max-width: 900px) {
  .nw-cart-body { flex-direction: column !important; }
  .nw-cart-summary { width: 100% !important; flex: none !important; position: static !important; }
}

/* ---- Shipping zones responsive ---- */
@media (max-width: 900px) {
  .nw-ship-zones { grid-template-columns: 1fr !important; }
  .nw-ship-steps { grid-template-columns: 1fr !important; }
}

/* ---- Product Card — Override Growth Theme to match Claude Design ---- */
[data-product-card] {
  background: #fff;
  border: 1px solid #EEEEEE;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
[data-product-card]:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

/* Product card image container */
[data-product-card] > a:first-child {
  background: #FAFAFA;
  border-radius: 12px 12px 0 0;
}

/* Product card title */
[data-product-card] h3 a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Product card price */
[data-product-card] .text-foreground.text-sm.font-semibold {
  font-size: 18px;
  font-weight: 700;
}

/* Product card add-to-cart button — Claude Design style */
[data-product-card] .btn-outlined {
  background: transparent;
  border: 1.5px solid #C0392B;
  color: #C0392B;
  border-radius: 25px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
[data-product-card] .btn-outlined:hover {
  background: #C0392B;
  color: #fff;
}

/* ---- Button Styles — Claude Design NW ---- */
.btn-filled,
button[data-add-to-cart-form] {
  background: #F9B8C6 !important;
  color: #1A1A1A !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  transition: filter 0.2s !important;
}
.btn-filled:hover,
button[data-add-to-cart-form]:hover {
  filter: brightness(0.95);
}

/* ---- Checkout button ---- */
.nw-cart-summary .btn-filled,
.nw-cart-summary button[type="submit"] {
  background: #C0392B !important;
  color: #fff !important;
}
.nw-cart-summary .btn-filled:hover,
.nw-cart-summary button[type="submit"]:hover {
  background: #A93226 !important;
}

/* ---- Disclosure panels ---- */
el-disclosure {
  overflow: hidden;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: #E8E8E8; border-radius: 8px; }

/* ---- Badge styles — NW brand ---- */
.badge.badge-filled {
  background: #C0392B;
  color: #fff;
}

/* ---- Reviews section NW styling ---- */
#reviews {
  border-top: 1px solid #EEEEEE;
  margin-top: 24px;
}

/* ---- Announcement bar text ---- */
.nw-announcement-bar {
  font-family: 'Tajawal', sans-serif;
}

/* ---- Input focus state ---- */
input:focus, textarea:focus, select:focus {
  border-color: #C0392B !important;
  outline: none;
}

/* ---- Trust badge grid responsive ---- */
@media (max-width: 480px) {
  .nw-pdp-main [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Mobile padding adjustments ---- */
@media (max-width: 900px) {
  [style*="padding:32px 48px"],
  [style*="padding:24px 48px"],
  [style*="padding:20px 48px"],
  [style*="padding:0 48px"],
  [style*="padding:48px 48px"],
  [style*="padding:16px 48px"],
  [style*="padding:40px 48px"],
  [style*="padding:64px 48px"],
  [style*="padding:72px 48px"],
  [style*="padding:60px 48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---- Page prose ---- */
.prose.prose-theme {
  font-family: 'Tajawal', sans-serif;
  color: #555;
  line-height: 1.9;
}
.prose.prose-theme h2 { font-size: 24px; font-weight: 700; color: #1A1A1A; margin-top: 32px; }
.prose.prose-theme h3 { font-size: 20px; font-weight: 600; color: #1A1A1A; margin-top: 24px; }
.prose.prose-theme p { margin-bottom: 16px; }
.prose.prose-theme a { color: #C0392B; text-decoration: underline; }
.prose.prose-theme a:hover { color: #A93226; }

/* ============================================
   MOBILE RTL FIXES — July 7, 2026
   Root cause: padding-left used instead of padding-inline
   ============================================ */

/* 1. Global RTL padding fix */
@media (max-width: 900px) {
  [style*="padding:0 48px"],
  [style*="padding: 0 48px"],
  section > div[style*="max-width"],
  .theme-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 2. Logo fix — now handled by .nw-header-logo img in header section above */

/* 3. Announcement bar — prevent text clip and duplication */
@media (max-width: 900px) {
  [style*="height:44px"][style*="F8BBD0"] {
    padding: 8px 12px !important;
    font-size: 11px !important;
    white-space: normal !important;
    height: auto !important;
    min-height: 36px !important;
  }
}

/* 4. Header mobile fix — now handled by .nw-header-inner above */

/* 5. Hero text — prevent RTL clipping */
@media (max-width: 900px) {
  [style*="flex:0 0 38%"],
  #hero-text {
    padding: 24px 16px !important;
    width: 100% !important;
    flex: none !important;
  }
  #hero-h1 {
    font-size: 28px !important;
  }
}

/* 6. Trust badges — wrap on mobile */
@media (max-width: 900px) {
  [style*="gap:48px"][style*="justify-content:center"] {
    gap: 16px !important;
    padding: 16px 12px !important;
    justify-content: flex-start !important;
  }
}

/* 7. Category slider — mobile padding */
@media (max-width: 900px) {
  #nw-cat-slider {
    padding: 0 12px !important;
  }
  #nw-cat-slider a {
    flex: 0 0 140px !important;
  }
}

/* 8. Products grid — mobile fix */
@media (max-width: 900px) {
  #nw-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 !important;
  }
  [style*="max-width:1400px"][style*="padding:48px"] {
    padding: 24px 12px !important;
  }
}

/* 9. Promo banner mobile */
@media (max-width: 900px) {
  [style*="FADCE6"][style*="padding:24px 48px"] {
    padding: 16px 12px !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

/* 10. Testimonials mobile */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(3, 1fr)"][style*="gap:20px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* 11. Instagram mobile */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 12. Brand values mobile */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4, 1fr)"][style*="gap:32px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 24px 12px !important;
  }
}

/* 13. Footer mobile */
@media (max-width: 900px) {
  footer > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 !important;
  }
  footer,
  footer > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 14. Breadcrumb — RTL chevron fix */
[style*="breadcrumb"] span,
.nw-breadcrumb span {
  unicode-bidi: plaintext;
}

/* 15. Collection page — product grid padding */
@media (max-width: 900px) {
  [data-grid-root],
  [data-grid] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 16. PDP mobile */
@media (max-width: 900px) {
  .product-gallery-column,
  .product-details-column {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 17. Brand statement mobile */
@media (max-width: 900px) {
  [style*="padding:80px 48px"] {
    padding: 40px 12px !important;
  }
  [style*="font-size:40px"] {
    font-size: 24px !important;
  }
}

/* ============================================
   RESPONSIVE VISIBILITY (replaces Tailwind hidden/lg:block)
   These ALWAYS work regardless of Tailwind
   ============================================ */

/* Mobile only — visible on <1024px, hidden on >=1024px */
.nw-mobile-only { display: flex !important; }
@media (min-width: 1024px) {
  .nw-mobile-only { display: none !important; }
}

/* Desktop only — hidden on <1024px, visible on >=1024px */
.nw-desktop-only { display: none !important; }
@media (min-width: 1024px) {
  .nw-desktop-only { display: flex !important; }
}

/* Desktop only inline */
.nw-desktop-only-inline { display: none !important; }
@media (min-width: 1024px) {
  .nw-desktop-only-inline { display: inline !important; }
}

/* Desktop only block (for nav) */
@media (min-width: 1024px) {
  nav.nw-desktop-only { display: block !important; }
}

/* ============================================
   MOBILE HERO FIX — force column layout + visible text
   ============================================ */
@media (max-width: 1023px) {
  #hero-inner {
    flex-direction: column-reverse !important;
    min-height: auto !important;
  }
  #hero-inner > div {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #hero-text {
    padding: 24px 16px !important;
    text-align: center !important;
  }
  #hero-img {
    min-height: 250px !important;
    height: 40vw !important;
    max-height: 350px !important;
  }
  #hero-h1 {
    font-size: 26px !important;
  }
}

/* MOBILE LOGO FIX — now handled by .nw-header-logo img above */

/* MOBILE HEADER FIX — now handled by .nw-header-inner + .nw-header-cart above */

/* ============================================
   MOBILE ANNOUNCEMENT BAR
   ============================================ */
@media (max-width: 1023px) {
  .nw-ann-bar {
    height: 32px !important;
  }
  .nw-ann-slide {
    padding: 0 12px !important;
    gap: 4px;
  }
  .nw-ann-ar {
    font-size: 11px !important;
  }
  .nw-ann-en {
    display: none !important; /* Hide English on mobile — Arabic takes priority */
  }
}

/* ============================================
   MOBILE FOOTER — ACCORDION
   ============================================ */
@media (max-width: 1023px) {
  .nw-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* Hide footer section content by default on mobile */
  .nw-footer-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nw-footer-section.is-open .nw-footer-section-content {
    max-height: 500px;
  }
  /* Footer section header — tappable */
  .nw-footer-section-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #333;
    cursor: pointer;
  }
  .nw-footer-section-header .nw-footer-chevron {
    transition: transform 0.3s;
  }
  .nw-footer-section.is-open .nw-footer-chevron {
    transform: rotate(180deg);
  }
  /* Brand section stays open on mobile */
  .nw-footer-brand {
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
    margin-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .nw-footer-section-content {
    max-height: none !important;
  }
  .nw-footer-chevron {
    display: none !important;
  }
}

/* ============================================
   MOBILE COLLECTION PAGE FIX
   ============================================ */
@media (max-width: 1023px) {
  [class*="theme-container"],
  .theme-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ============================================
   PRODUCT CARD — text padding + alignment fix
   ============================================ */
[data-product-card] > div:last-child,
[data-product-card] .p-4,
[data-product-card] .px-4 {
  padding: 12px 14px !important;
}

/* Product card text alignment RTL */
[data-product-card] h3,
[data-product-card] .text-foreground {
  text-align: start;
}

/* Product card title spacing */
[data-product-card] h3 {
  margin-bottom: 6px;
}

/* ============================================
   PRODUCT CARD — comprehensive fix
   ============================================ */

/* Card body padding — the text area needs breathing room */
[data-product-card] > div:not(:first-child) {
  padding-inline: 12px !important;
  padding-bottom: 12px !important;
}

/* Card title — proper spacing and alignment */
[data-product-card] h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-align: start !important;
}

/* Price — proper weight and size */
[data-product-card] .text-foreground.text-sm.font-semibold,
[data-product-card] p.text-foreground.text-sm {
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Button — pill shape, proper padding */
[data-product-card] .btn-outlined,
[data-product-card] .btn {
  border-radius: 25px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Hide empty star ratings — 0 reviews = don't show stars at all */
[data-product-card] .flex.items-center.gap-2:has(.text-muted:empty) {
  display: none !important;
}

/* "From" text styling */
[data-product-card] p.text-foreground.text-sm {
  text-align: start !important;
}

/* Card hover effect */
[data-product-card] {
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
[data-product-card]:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}

/* Cart button area — padding */
[data-product-card] > div:last-child {
  padding: 0 12px 14px !important;
}

/* ============================================
   PRODUCT CARD — premium fixes
   ============================================ */

/* 1. HIDE empty star ratings (0 reviews = don't show) */
[data-product-card] .flex.items-center.gap-2:not(:has(.text-muted:not(:empty))) {
  display: none !important;
}
/* Fallback: hide any rating row where total_count text is empty */
[data-product-card] .flex.items-center.gap-2 {
  display: none !important;
}

/* 2. SOLID filled buttons — not outlined */
[data-product-card] .btn-outlined {
  background: #1A1A1A !important;
  color: #fff !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
[data-product-card] .btn-outlined:hover {
  background: #C0392B !important;
  color: #fff !important;
}

/* 3. Remove borders, add soft shadow */
[data-product-card] {
  border: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  border-radius: 12px !important;
}
[data-product-card]:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}

/* 4. Text right-align for RTL */
[data-product-card] h3,
[data-product-card] p,
[data-product-card] .flex.flex-col {
  text-align: start !important;
}

/* ============================================
   PRODUCT CARD — FORCE OVERRIDES (max specificity)
   These use double-class selectors to beat Tailwind @layer
   ============================================ */

/* FORCE: Hide star ratings on product cards */
div[data-product-card] div.flex.items-center.gap-2:has(svg) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Backup: target rating stars directly */
div[data-product-card] .flex.gap-0\.5,
div[data-product-card] div:has(> .flex.gap-0\.5) {
  display: none !important;
}

/* FORCE: Solid black buttons */
div[data-product-card] button.btn.btn-outlined {
  background-color: #1A1A1A !important;
  color: #fff !important;
  border-color: #1A1A1A !important;
  border-width: 0 !important;
  border-radius: 25px !important;
}
div[data-product-card] button.btn.btn-outlined:hover {
  background-color: #C0392B !important;
  border-color: #C0392B !important;
}

/* FORCE: No border on card, shadow instead */
div[data-product-card] {
  border-width: 0 !important;
  border-style: none !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important;
}
div[data-product-card]:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}