/* ==========================================================================
   Mobile card parity — product (shop) cards and carousel cards keep the
   DESKTOP design on phones.

   Years of mobile-only tweaks (style.css, woocommerce.css, shop-sorting.css)
   had shrunk the cards on small screens: 2-up grid with 176px cards, square
   images, 10px titles, 26px buttons and a stacked price/button footer. This
   file re-declares the desktop values below 769px instead of unpicking those
   rules one by one, so there is a single place to read (or drop) the parity.

   Desktop reference (measured at 1400px):
     shop grid ..... 280px columns, 25px gap
     card frame .... min-height 405px, radius 14px, 1px #ececec border
     image ......... 320px tall, aspect-ratio auto
     info .......... 16px padding, min-height 155px
     title ......... 14px/1.3, centered, min-height 48px
     price ......... 18px, footer row: price left / actions right
     actions ....... 44x44 quickview + 44px tall, 14px button
   Loaded last (priority 1001) so it wins on order as well as specificity.
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Shop grid: always two cards per row -------------------------------- */
  html body.woocommerce-page ul.products,
  html body.woocommerce-page .products-grid,
  html body.woocommerce-page #products-container,
  html body.woocommerce ul.products,
  html body.woocommerce .products-grid,
  html body.woocommerce #products-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* --- Card frame --------------------------------------------------------- */
  html body.woocommerce ul.products li.product.rp-shop-card .rp-card,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-card {
    min-height: 0 !important;
    height: 100% !important;
    border-radius: 14px !important;
  }

  html body .new-popular-carousel .carousel-card,
  html body section[class^="carousel-"] .carousel-card,
  html body .related-carousel .carousel-card,
  html body .carousel-track .carousel-card {
    height: auto !important;
    min-height: 0 !important;
  }

  /* --- Image: desktop proportions (278x320) instead of a square crop ------
     Two-up cards are narrower than a desktop card, so the image band keeps the
     desktop RATIO rather than its 320px height — the card scales down whole. */
  html body.woocommerce ul.products li.product.rp-shop-card .rp-card .rp-img,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-card .rp-img {
    height: auto !important;
    aspect-ratio: 278 / 320 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  html body .new-popular-carousel .carousel-card .card-image,
  html body section[class^="carousel-"] .carousel-card .card-image,
  html body .related-carousel .carousel-card .card-image,
  html body .carousel-track .carousel-card .card-image {
    height: auto !important;
    aspect-ratio: 278 / 320 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* --- Info block --------------------------------------------------------- */
  html body.woocommerce ul.products li.product.rp-shop-card .rp-card .rp-info,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-card .rp-info {
    padding: 16px !important;
    gap: 0 !important;
    min-height: 155px !important;
  }

  html body .new-popular-carousel .carousel-card .card-info,
  html body section[class^="carousel-"] .carousel-card .card-info,
  html body .related-carousel .carousel-card .card-info,
  html body .carousel-track .carousel-card .card-info {
    padding: 16px !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 0 auto !important;
  }

  /* --- Title -------------------------------------------------------------- */
  html body.woocommerce ul.products li.product.rp-shop-card .rp-card .rp-info .rp-title,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-card .rp-info .rp-title {
    /* 12px on mobile (desktop stays 14px); the reserved title slot scales with
       it: 48px * 12/14 ≈ 40px */
    font-size: 12px !important;
    line-height: 1.35 !important;
    min-height: 40px !important;
    max-height: none !important;
    margin: 0 0 8px !important;
    overflow: visible !important;
    text-align: center !important;
    /* mobile shop CSS pushes the title below the price/button row (order:1);
       desktop keeps DOM order, i.e. title first */
    order: 0 !important;
  }

  html body .new-popular-carousel .carousel-card .card-info .card-title,
  html body section[class^="carousel-"] .carousel-card .card-info .card-title,
  html body .related-carousel .carousel-card .card-info .card-title,
  html body .carousel-track .carousel-card .card-info .card-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 0 12px !important;
    overflow: visible !important;
  }

  /* --- Engraving pill ----------------------------------------------------- */
  html body .rp-card .ax-engrave-note,
  html body .carousel-card .ax-engrave-note {
    /* 10px on mobile (desktop keeps 12px) */
    font-size: 10px !important;
    padding: 7px 16px !important;
    margin: 0 auto 14px !important;
    border-radius: 9px !important;
  }

  /* --- Footer: price on the left, actions on the right -------------------- */
  html body .rp-card .rp-info .ax-card-foot,
  html body .carousel-card .card-info .ax-card-foot {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  html body .rp-card .rp-info .ax-card-foot .ax-price-block,
  html body .carousel-card .card-info .ax-card-foot .ax-price-block {
    text-align: left !important;
    align-items: normal !important;
    gap: 2px !important;
  }

  html body .rp-card .rp-info .ax-card-foot .ax-card-cta,
  html body .carousel-card .card-info .ax-card-foot .ax-card-cta {
    justify-content: normal !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  /* --- Price -------------------------------------------------------------- */
  html body.woocommerce ul.products li.product.rp-shop-card .rp-card .rp-info .rp-price,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-card .rp-info .rp-price,
  html body .new-popular-carousel .carousel-card .card-info .card-price,
  html body section[class^="carousel-"] .carousel-card .card-info .card-price,
  html body .related-carousel .carousel-card .card-info .card-price,
  html body .carousel-track .carousel-card .card-info .card-price {
    font-size: 18px !important;
    line-height: 1.15 !important;
    min-height: 0 !important;
    /* on sale the strikethrough price stacks ABOVE the current one (Woo emits
       <del> before <ins>, so column order needs no reordering) */
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin: 0 !important;
  }

  html body .rp-card .rp-info .rp-price del,
  html body .rp-card .rp-info .rp-price del .woocommerce-Price-amount,
  html body .rp-card .rp-info .rp-price del bdi,
  html body .carousel-card .card-info .card-price del,
  html body .carousel-card .card-info .card-price del .woocommerce-Price-amount,
  html body .carousel-card .card-info .card-price del bdi {
    font-size: 14px !important;
  }

  /* --- Actions: quickview + "არჩევა" -------------------------------------- */
  html body .rp-card .ax-card-cta .ax-quickview,
  html body .carousel-card .ax-card-cta .ax-quickview {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 auto !important;
    border-radius: 10px !important;
  }

  /* long selectors on purpose: the 10px mobile button rule in style.css is
     itself specificity (0,4,4), so parity has to outrank it */
  html body.woocommerce ul.products li.product.rp-shop-card .rp-card .ax-card-cta .carousel-add-to-cart-btn,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-card .ax-card-cta .carousel-add-to-cart-btn,
  html body .new-popular-carousel .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn,
  html body section[class^="carousel-"] .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn,
  html body .related-carousel .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn,
  html body .carousel-track .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    padding: 12px 18px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  /* --- Carousel card width: two cards per view + a peek of the third ------
     container padding-left 15px, track gap 12px → 2 cards + 12px peek. */
  html body .new-popular-carousel .carousel-card,
  html body section[class^="carousel-"] .carousel-card,
  html body .related-carousel .carousel-card,
  html body .carousel-track .carousel-card {
    flex: 0 0 calc((100vw - 27px) / 2 - 6px) !important;
    min-width: calc((100vw - 27px) / 2 - 6px) !important;
    max-width: calc((100vw - 27px) / 2 - 6px) !important;
  }
}

/* --- Narrow phones: the footer cannot stay one row -------------------------
   Two-up cards are ~180px wide, i.e. ~148px of inner width, while the desktop
   footer row needs ~230px (price + 44px quickview + "არჩევა"). Below 600px the
   footer wraps: price block on its own line, quickview + button beneath it,
   button filling the rest. Above 600px (2-up cards ≥ ~290px) the desktop row
   still fits and the rules above keep it. */
@media (max-width: 599px) {
  html body .rp-card .rp-info .ax-card-foot,
  html body .carousel-card .card-info .ax-card-foot {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Price keeps the left, the button hugs its label on the right. The footer
     still wraps, so a long label ("არ არის მარაგში") drops to its own line
     instead of pushing past the card edge — and stays right-aligned there. */
  html body .rp-card .rp-info .ax-card-foot .ax-price-block,
  html body .carousel-card .card-info .ax-card-foot .ax-price-block {
    flex: 0 1 auto !important;
  }

  html body .rp-card .rp-info .ax-card-foot .ax-card-cta,
  html body .carousel-card .card-info .ax-card-foot .ax-card-cta {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
  }

  html body.woocommerce ul.products li.product.rp-shop-card .rp-card .ax-card-cta .carousel-add-to-cart-btn,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-card .ax-card-cta .carousel-add-to-cart-btn,
  html body .new-popular-carousel .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn,
  html body section[class^="carousel-"] .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn,
  html body .related-carousel .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn,
  html body .carousel-track .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    /* "არ არის მარაგში" is wider than a two-up card — let that label wrap
       instead of running past the card edge ("არჩევა" is one word, unaffected) */
    white-space: normal !important;
    padding: 12px 14px !important;
  }

  /* the engraving pill has ~148px to live in — let it breathe a little less */
  html body .rp-card .ax-engrave-note,
  html body .carousel-card .ax-engrave-note {
    padding: 6px 10px !important;
    margin: 0 auto 12px !important;
  }
}

/* --- Phones under ~420px: trim the gutters, not the type ------------------
   At 320-400px a two-up card is 139-174px wide, so the 44px quickview plus the
   button would run past the card edge. Only the horizontal padding and the
   quickview shrink — font sizes, button height and the layout stay desktop. */
@media (max-width: 419px) {
  html body.woocommerce ul.products li.product.rp-shop-card .rp-card .rp-info,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-card .rp-info,
  html body .new-popular-carousel .carousel-card .card-info,
  html body section[class^="carousel-"] .carousel-card .card-info,
  html body .related-carousel .carousel-card .card-info,
  html body .carousel-track .carousel-card .card-info {
    padding: 16px 12px !important;
  }

  html body .rp-card .rp-info .ax-card-foot .ax-card-cta,
  html body .carousel-card .card-info .ax-card-foot .ax-card-cta {
    gap: 6px !important;
  }

  html body .rp-card .ax-card-cta .ax-quickview,
  html body .carousel-card .ax-card-cta .ax-quickview {
    width: 40px !important;
    height: 40px !important;
  }

  html body.woocommerce ul.products li.product.rp-shop-card .rp-card .ax-card-cta .carousel-add-to-cart-btn,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-card .ax-card-cta .carousel-add-to-cart-btn,
  html body .new-popular-carousel .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn,
  html body section[class^="carousel-"] .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn,
  html body .related-carousel .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn,
  html body .carousel-track .carousel-card .card-info .ax-card-cta .carousel-add-to-cart-btn {
    padding: 12px 8px !important;
  }
}