/* ==========================================================================
   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: match the actual (square) product photos --------------------
     Every product photo on the site is a 1:1 square (verified across shop +
     carousel: 1200x1200/1800x1800/2560x2560, no exceptions found). The image
     box previously borrowed desktop's 278x320 PORTRAIT ratio, which is taller
     than the square photo it holds; with the photo top-aligned inside that
     box (object-fit: contain, align-items: flex-start), the extra ~42px of
     empty box below the photo sat directly above the title - that dead zone,
     not the info block's padding, was the real source of the "title too far
     from the photo" gap. Using the photo's own ratio removes the dead zone
     at the source instead of papering over it with more negative margin. */
  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: 1 / 1 !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: 1 / 1 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* --- Info block --------------------------------------------------------- */
  /* Top padding removed entirely (16px -> 0): the title is the info block's
     first child (order: 0, no top margin of its own - see Title below), so
     this top padding was the entire gap between the image and the title.
     What little breathing room remains comes from the title's own line-height
     leading, not padding. Right/bottom/left stay 16px so the footer/price/
     button spacing and the card's side margins are untouched. */
  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: 0 16px 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: 0 16px 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;
    /* Info block's top padding is already 0 (see Info block above), and the
       image box now matches the photo's own ratio (see Image above), so the
       only thing left separating the title from the photo is the title's own
       line-height leading (the invisible space a text line reserves above
       its glyphs). This small negative margin pulls the title up through
       that leading until it sits flush against the photo. */
    margin: 8px 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;
    /* Same reasoning as .rp-title above: pull the title up through its own
       line-height leading, now that both the info block's top padding and
       the image box's dead space are gone. */
    margin: 8px 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 real peek of the third -
     The old formula ((100vw-27px)/2-6px) left card 2's right edge exactly
     at the viewport edge - zero peek, so the row read as a static 2-up grid
     instead of a scrollable carousel. Solved for a fixed ~28px peek instead:
     container padding-left 15px + card + gap 12px + card + gap 12px + 28px
     peek = 100vw, i.e. card width = (100vw - 15 - 12 - 12 - 28) / 2
                                    = (100vw - 67px) / 2. */
  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 - 67px) / 2) !important;
    min-width: calc((100vw - 67px) / 2) !important;
    max-width: calc((100vw - 67px) / 2) !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 {
    /* Keep the same top padding as the base <=768px rule (0) - only the
       horizontal gutter shrinks further at this width. */
    padding: 0 12px 16px !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;
  }
}