/* ==========================================================================
   PARMANEH — RESPONSIVE DESIGN FIXES (R1-R8)
   ==========================================================================
   Priority: Responsive Design
   Safety: Non-destructive, additive CSS only — no layout-breaking changes
   Test: Apply after existing styles, verify at 320/375/420/560/768/900/1024/1200/1440px
   ========================================================================== */

/* --------------------------------------------------------------------------
   R1: GRID BREAKPOINTS — Fix .pm-progrid4 to 2-col at 420-640px, 1-col ≤420px
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pm-progrid4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 420px) {
  .pm-progrid4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .pm-progrid4 .pm-proprod-img {
    aspect-ratio: 4/3 !important;
  }
}

/* Also fix .pm-progrid3 (category grid) consistency */
@media (max-width: 640px) {
  .pm-progrid3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 420px) {
  .pm-progrid3 {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   R2: HERO VISUAL — Show floating product cards on mobile (≤1024px)
   Instead of hiding, scale down and stack
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .pm-progradhero .pm-gh-visual {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 280px !important;
    margin-top: 24px !important;
    pointer-events: auto !important;
    justify-content: center !important;
  }
  .pm-progradhero .pm-gh-card-main {
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    aspect-ratio: 416/348 !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .pm-progradhero .pm-gh-card-sm {
    display: block !important; /* show small floating cards on mobile too — same size/position/animation as desktop (no scaling down); safe because the hero section has overflow:hidden so a card poking slightly past the edge is simply clipped, never causes page scroll */
  }
  .pm-progradhero {
    flex-wrap: wrap !important;
    text-align: center !important;
    gap: 32px !important;
    padding: 48px 16px !important;
  }
  .pm-progradhero .pm-gh-in {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  .pm-gh-actions,
  .pm-gh-chips,
  .pm-gh-trust {
    justify-content: center !important;
  }
  .pm-gh-title,
  .pm-gh-sub,
  .pm-gh-badge {
    text-align: center !important;
    margin-inline: auto !important;
  }
}

/* --------------------------------------------------------------------------
   R3: HEADER MENU — Prevent wrapping at 1024-1200px
   Reduce padding/font-size progressively, keep nowrap
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  nav.wd-header-main-nav > ul > li > a {
    padding: 10px 7px !important;
    font-size: 12.5px !important;
  }
}
@media (max-width: 1100px) {
  nav.wd-header-main-nav > ul > li > a {
    padding: 9px 6px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 1024px) {
  /* Mobile menu takes over — ensure desktop menu hidden properly */
  nav.wd-header-main-nav .wd-dropdown {
    min-width: 280px !important;
  }
  nav.wd-header-main-nav .wd-dropdown .sub-menu {
    column-count: 1 !important;
    min-width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   R4: FOOTER GRID — Equal height columns at 600-900px
   Use grid-auto-rows + align-content: start
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .pm-f,
  .pmf-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 1fr !important;
    align-items: start !important;
    gap: 28px !important;
  }
  .pmf-about {
    grid-column: 1 / -1 !important; /* Full width for about text */
  }
}
@media (max-width: 600px) {
  .pm-f,
  .pmf-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 24px !important;
  }
  .pmf-about {
    grid-column: auto !important;
  }
}

/* --------------------------------------------------------------------------
   R5: CATEGORY CARDS — Responsive height, no fixed 260px
   Use aspect-ratio, allow content to dictate height on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pm-progrid3 .pm-procat-img,
  .pm-procat-img {
    height: auto !important;
    aspect-ratio: 16/10 !important;
    min-height: 180px !important;
  }
  .pm-progrid3 .pm-procat-cap {
    padding: 32px 14px 12px !important;
  }
  .pm-progrid3 .pm-procat-cap b {
    font-size: 15px !important;
  }
}
@media (max-width: 480px) {
  .pm-progrid3 .pm-procat-img {
    aspect-ratio: 4/3 !important;
    min-height: 160px !important;
  }
}

/* --------------------------------------------------------------------------
   R6: FULL-BLEED SECTIONS — Prevent horizontal overflow
   Use overflow-x: clip on containers, not just body
   -------------------------------------------------------------------------- */
.elementor-section.elementor-section-full_width,
.e-con-full,
.wd-negative-gap {
  overflow-x: clip !important;
  max-width: 100vw !important;
}
.elementor-section[data-settings*="background_background"] {
  width: 100% !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Remove negative margin trick that causes scroll */
  left: 0 !important;
  right: 0 !important;
}

/* --------------------------------------------------------------------------
   R7: RESPONSIVE TYPOGRAPHY — Fluid clamp() for all headings
   Override Elementor's fixed 22px at ≤1024px
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .wd-fontsize-xl,
  .wd-fontsize-xxl,
  .wd-fontsize-xxxl {
    font-size: clamp(22px, 3.5vw, 28px) !important;
  }
  .wd-fontsize-l {
    font-size: clamp(18px, 2.8vw, 22px) !important;
  }
  .wd-fontsize-m {
    font-size: clamp(16px, 2.2vw, 18px) !important;
  }
}
@media (max-width: 768px) {
  .wd-fontsize-xl,
  .wd-fontsize-xxl,
  .wd-fontsize-xxxl {
    font-size: clamp(20px, 4.5vw, 26px) !important;
  }
  .elementor-heading-title {
    font-size: clamp(22px, 5vw, 32px) !important;
    line-height: 1.35 !important;
  }
}

/* --------------------------------------------------------------------------
   R8: STICKY TOOLBAR / MOBILE BAR — Reduce height, smart show/hide
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --wd-sticky-btn-height: 56px !important; /* Reduced from 95px */
  }
  .wd-toolbar {
    height: 56px !important;
    padding-top: env(safe-area-inset-bottom, 0) !important;
  }
  .wd-toolbar-item {
    padding: 6px 0 !important;
  }
  .wd-toolbar-label {
    font-size: 10px !important;
  }
}

/* Scroll-aware toolbar: hide on scroll down, show on scroll up */
.wd-toolbar {
  transition: transform 0.3s ease !important;
}
.wd-toolbar.hidden {
  transform: translateY(100%) !important;
}

/* --------------------------------------------------------------------------
   ADDITIONAL: Fix product grid on shop/archive pages
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pm-prosell-grid,
  .products.columns-4,
  .wd-products-element .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 480px) {
  .pm-prosell-grid,
  .products.columns-4,
  .wd-products-element .products {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   ADDITIONAL: Blog grid responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pm-problog-grid,
  .pm-problog-grid-lg {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .pm-problog-card h3 {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}
@media (max-width: 480px) {
  .pm-problog-grid,
  .pm-problog-grid-lg {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   ADDITIONAL: Testimonials grid
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pm-protesti-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 480px) {
  .pm-protesti-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   ADDITIONAL: Gallery filter grid
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pm-progal {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 480px) {
  .pm-progal {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   ADDITIONAL: Occasion/Category chips horizontal scroll
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pm-proocc-grid,
  .pm-proocc2-chips {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 420px) {
  .pm-proocc-grid,
  .pm-proocc2-chips {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   ADDITIONAL: Fix Card Flip (3D) grid on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .pm-fc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 480px !important;
    gap: 16px !important;
  }
}
@media (max-width: 520px) {
  .pm-fc-grid {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
  }
}
@media (max-width: 420px) {
  .pm-fc-grid {
    grid-template-columns: 1fr !important;
    max-width: 320px !important;
    margin-inline: auto !important;
  }
}

/* --------------------------------------------------------------------------
   ADDITIONAL: Trust badges grid
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pm-protrust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 420px) {
  .pm-protrust-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   ADDITIONAL: Steps/Process grid
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pm-prosteps,
  .pm-prosteps2-line,
  .pm-propdp-steps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
@media (max-width: 480px) {
  .pm-prosteps,
  .pm-prosteps2-line,
  .pm-propdp-steps-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   ADDITIONAL: Related products grid (PDP)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pm-propdp-rel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 480px) {
  .pm-propdp-rel-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   ADDITIONAL: About page grids
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pm-ab-why {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .pm-ab-flow {
    grid-template-columns: 1fr !important;
  }
  .pm-ab-stats {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  .pm-ab-why {
    grid-template-columns: 1fr !important;
  }
  .pm-ab-story {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   ADDITIONAL: Contact page grid
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pm-prohours-contacts {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   PRINT & REDUCED MOTION — Respect user preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pm-gh-card-sm,
  .pm-gh-bubbles i,
  .pm-proarc-hero-cta,
  .pm-proarc-hero-cta::after,
  .pm-proarc-order::after,
  .pm-rv {
    animation: none !important;
    transition: none !important;
  }
  .pm-rv.pm-hide {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* --------------------------------------------------------------------------
   HIGH CONTRAST MODE SUPPORT
   -------------------------------------------------------------------------- */
@media (prefers-contrast: high) {
  :root {
    --pm-br: #4C1D95 !important;
    --pm-ink: #1A0F2E !important;
  }
  .pm-btn,
  .pm-pro-btn {
    border: 2px solid currentColor !important;
  }
  .pm-procat-arrow,
  .pm-proarc-card-zoom {
    border: 2px solid #fff !important;
  }
}

/* --------------------------------------------------------------------------
   PRODUCT GALLERY: broken thumbnail-scroll nav bars (R9)
   Below the theme's desktop gallery breakpoint the vertical thumbnail strip
   collapses to zero height, but its up/down scroll-nav buttons
   (.wd-nav-arrows.wd-thumb-nav) were left visible and stretch to the full
   width of their column, showing as large empty gray bars above the main
   product image on every mobile/tablet/narrow-desktop view. The main image
   already has its own prev/next arrows and swipe/dots, so these are safe
   to hide whenever the thumbnail strip they control is not shown.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .woocommerce-product-gallery .wd-nav-arrows.wd-thumb-nav {
    display: none !important;
  }
}