/*
 * Mobile product card adaptation — WooCommerce loop template.
 *
 * Two visual variants per Figma:
 *   1-col (206:10076)  →  used on home loops (БЕСТСЕЛЕРИ, АКЦІЙНІ),
 *                          full card 343×560, Купити pill button.
 *   2-col (276:13486)  →  used on shop archive grid,
 *                          compact 166×272, icon-only round button.
 *
 * HTML is the same `li.product` — context is detected via the parent
 * container (`ul.products` for archive vs `.elementor-loop-container`
 * for home loops). All selectors are stable WC / mu-plugin classes.
 */

@media (max-width: 768px) {
  /* ============================================================= */
  /* Base card — shared by both 1-col and 2-col variants           */
  /* ============================================================= */

  /* Beat Elementor inline rule .elementor-wc-products ul.products li.product
     which sets a 4px purple border. Match its shape + add :not() to win. */
  .elementor-wc-products ul.products li.product:not(.octo-prefix-card),
  ul.products li.product:not(.octo-prefix-card),
  body li.product:not(.octo-prefix-card) {
    border: 0 !important;
    border-width: 0 !important;
    border-radius: 16px !important;
  }

  /* Base card values from Figma 276:13486 (166px card):
     bg #f9f9f9, rounded 16, pb 8, gap 8. */
  li.product:not(.octo-prefix-card) {
    position: relative !important;
    background: #f9f9f9 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Wishlist heart — 2-COL ONLY (shop archive): 23×23 gray circle, 12×12 heart.
     1-col on home keeps desktop sizing (56×56 button, 28×28 svg) via NO override here.
     Selector bumped to (0,5,3) with body:not(.home) ul.products prefix. */
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap,
  .elementor-wc-products body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap,
  body:not(.home) .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 5 !important;
    width: 23px !important;
    height: 23px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap a.yith-wcwl-add-to-wishlist-button__wrapper,
  .elementor-wc-products body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button,
  body:not(.home) .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap a.yith-wcwl-add-to-wishlist-button__wrapper {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 50% !important;
  }
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button svg,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button img,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-icon,
  .elementor-wc-products body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button svg,
  body:not(.home) .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button img {
    width: 12px !important;
    height: 12px !important;
    color: #ffffff !important;
  }
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button svg path,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button svg circle,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button svg polygon {
    stroke: #ffffff !important;
    stroke-width: 1.8 !important;
    fill: none !important;
  }
  /* --added state: solid purple heart (matches non-mobile rule but with cards-page specificity) */
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button--added svg path,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button--added svg circle,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button--added svg polygon {
    stroke: #5B49F3 !important;
    fill: #5B49F3 !important;
  }
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button__label {
    display: none !important;
  }

  /* Sale badge — top-left. Color RED #ff4548 per Figma 206:10076 (not purple). */
  li.product:not(.octo-prefix-card) .octo-sale-badge,
  li.product:not(.octo-prefix-card) .onsale {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    z-index: 3 !important;
    background: #ff4548 !important;
    color: #ffffff !important;
    font-family: 'e-Ukraine', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    padding: 4px 12px !important;
    border-radius: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: -0.011em !important;
    min-height: 0 !important;
    min-width: 0 !important;
    box-shadow: none !important;
  }

  /* Product image — fills upper area */
  li.product:not(.octo-prefix-card) .woocommerce-loop-product__link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
  }
  li.product:not(.octo-prefix-card) .woocommerce-loop-product__link > img,
  li.product:not(.octo-prefix-card) img.attachment-woocommerce_thumbnail {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    margin: 0 0 8px !important;
    display: block !important;
  }

  /* Title — Figma 276:13568: e-Ukraine Medium 10px, line-height 1.3,
     #131313, uppercase, text-ellipsis (1 line via clamp).
     Padding override included to beat Elementor inline rule
     `.elementor-wc-products ul.products li.product .woocommerce-loop-product__title`
     which adds padding: 16px. */
  .elementor-wc-products ul.products li.product:not(.octo-prefix-card) h2.woocommerce-loop-product__title,
  .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .woocommerce-loop-product__title,
  li.product:not(.octo-prefix-card) h2.woocommerce-loop-product__title {
    font-family: 'e-Ukraine', sans-serif !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #131313 !important;
    text-transform: uppercase !important;
    margin: 0 8px 8px !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* Hide the inner duplicate price (inside the link) */
  li.product:not(.octo-prefix-card) > a .price {
    display: none !important;
  }

  /* Bottom row — price + button, bottom-aligned per Figma 276:13573 (items-end) */
  li.product:not(.octo-prefix-card) .octo-card-bottom {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 8px !important;
    margin-top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Force-show "грн" currency — Elementor hides currency on
     .woocommerce-Price-amount:first-of-type:not(:last-of-type) with !important.
     Stack matching specificity (9 classes + 2 tags) to beat it. */
  .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price .woocommerce-Price-amount .woocommerce-Price-currencySymbol,
  li.product:not(.octo-prefix-card) .octo-card-bottom .price .woocommerce-Price-currencySymbol {
    display: inline !important;
  }
  li.product:not(.octo-prefix-card) .octo-card-bottom .price {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
  }
  li.product:not(.octo-prefix-card) .octo-card-bottom .price del {
    color: #302d81 !important;
    font-family: 'e-Ukraine', sans-serif !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    opacity: 0.5 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.011em !important;
    line-height: 1.5 !important;
  }
  li.product:not(.octo-prefix-card) .octo-card-bottom .price ins {
    color: #5b49f3 !important;
    font-family: 'e-Ukraine', sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: -0.011em !important;
    line-height: 1.5 !important;
  }
  li.product:not(.octo-prefix-card) .octo-card-bottom .price ins span:nth-child(n+2) {
    display: none !important;
  }
  li.product:not(.octo-prefix-card) .octo-card-bottom .screen-reader-text {
    display: none !important;
  }

  /* Variable product price range — hide dash + max price, keep only the
     minimum (".amount" first). Only when there is NO sale (no <ins> sibling).
     Matches Figma 276:13486 which shows a single price like "339 грн". */
  li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > *:nth-child(n+2) {
    display: none !important;
  }
  li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount {
    color: #5b49f3 !important;
    font-family: 'e-Ukraine', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.011em !important;
    line-height: 1.5 !important;
  }

  li.product:not(.octo-prefix-card) .octo-card-bottom .add_to_cart_button {
    background: #5b49f3 !important;
    color: #ffffff !important;
    border: 0 !important;
    text-transform: none !important;
    font-family: 'e-Ukraine', sans-serif !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }

  /* ============================================================= */
  /* 1-COL variant — Home loops (Elementor loop container)         */
  /* Full card with text "Купити" pill button                       */
  /* ============================================================= */
  .elementor-loop-container li.product:not(.octo-prefix-card),
  body.home li.product:not(.octo-prefix-card) {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    border-radius: 32px !important;
  }
  .elementor-loop-container li.product:not(.octo-prefix-card) h2.woocommerce-loop-product__title,
  body.home li.product:not(.octo-prefix-card) h2.woocommerce-loop-product__title {
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin: 16px 16px 8px !important;
  }
  .elementor-loop-container li.product:not(.octo-prefix-card) .octo-sale-badge,
  body.home li.product:not(.octo-prefix-card) .octo-sale-badge,
  .elementor-loop-container li.product:not(.octo-prefix-card) .onsale,
  body.home li.product:not(.octo-prefix-card) .onsale {
    top: 25px !important;
    left: 14px !important;
    font-size: 16px !important;
    padding: 4px 16px !important;
  }
  /* 1-col home wishlist — inherits desktop sizing (56×56 button, 28×28 svg).
     No override here intentionally. */
  .elementor-loop-container li.product:not(.octo-prefix-card) .octo-card-bottom,
  body.home li.product:not(.octo-prefix-card) .octo-card-bottom {
    padding: 0 16px 16px !important;
    gap: 16px !important;
  }
  .elementor-loop-container li.product:not(.octo-prefix-card) .octo-card-bottom .price ins,
  body.home li.product:not(.octo-prefix-card) .octo-card-bottom .price ins,
  .elementor-loop-container li.product:not(.octo-prefix-card) .octo-card-bottom .price ins .amount,
  body.home li.product:not(.octo-prefix-card) .octo-card-bottom .price ins .amount,
  .elementor-loop-container li.product:not(.octo-prefix-card) .octo-card-bottom .price ins bdi,
  body.home li.product:not(.octo-prefix-card) .octo-card-bottom .price ins bdi,
  .elementor-loop-container li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount,
  body.home li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount,
  .elementor-loop-container li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount bdi,
  body.home li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount bdi {
    font-size: 24px !important;
  }
  .elementor-loop-container li.product:not(.octo-prefix-card) .octo-card-bottom .price del,
  body.home li.product:not(.octo-prefix-card) .octo-card-bottom .price del,
  .elementor-loop-container li.product:not(.octo-prefix-card) .octo-card-bottom .price del .amount,
  body.home li.product:not(.octo-prefix-card) .octo-card-bottom .price del .amount,
  .elementor-loop-container li.product:not(.octo-prefix-card) .octo-card-bottom .price del bdi,
  body.home li.product:not(.octo-prefix-card) .octo-card-bottom .price del bdi {
    font-size: 18px !important;
  }
  /* Full pill "Купити" button with bag icon — 1-col only */
  .elementor-wc-products .elementor-loop-container li.product:not(.octo-prefix-card) .button.add_to_cart_button,
  .elementor-loop-container li.product:not(.octo-prefix-card) .button.add_to_cart_button,
  body.home li.product:not(.octo-prefix-card) .button.add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    min-height: 40px !important;
  }
  .elementor-wc-products .elementor-loop-container li.product:not(.octo-prefix-card) .button.add_to_cart_button::before,
  .elementor-loop-container li.product:not(.octo-prefix-card) .button.add_to_cart_button::before,
  body.home li.product:not(.octo-prefix-card) .button.add_to_cart_button::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-color: transparent !important;
    -webkit-mask: none !important;
            mask: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='7' width='14' height='12' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
  }

  /* ============================================================= */
  /* [octo_recently_viewed] override — uses --rv-cols-mobile from   */
  /* inline style set by the shortcode (default 1). Bumped          */
  /* specificity to beat body:not(.home) ul.products below.         */
  /* ============================================================= */
  body:not(.home) .octo-rv-wrap ul.products.elementor-grid,
  body:not(.home) .octo-rv-wrap ul.products,
  body .octo-rv-wrap ul.products.elementor-grid,
  body .octo-rv-wrap ul.products {
    grid-template-columns: repeat(var(--rv-cols-mobile, 1), 1fr) !important;
  }

  /* ============================================================= */
  /* 2-COL variant — Shop archive grid (NOT home)                  */
  /* Compact card with icon-only round button                       */
  /* ============================================================= */
  body:not(.home) ul.products.elementor-grid,
  body:not(.home) ul.products {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 10px !important;
    grid-gap: 16px 10px !important;
    margin: 0 !important;
    list-style: none !important;
  }
  /* Decorative octopus prefix card — show on mobile too (takes first grid slot,
     shifting all products by one, same as desktop). */
  .elementor-wc-products ul.products li.product.octo-prefix-card,
  ul.products li.product.octo-prefix-card {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: hidden !important;
  }
  body:not(.home) ul.products li.product:not(.octo-prefix-card) {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 8px !important;
  }
  /* Title — Figma exact 10px Medium e-Ukraine, 3-line clamp per design */
  body:not(.home) ul.products li.product:not(.octo-prefix-card) h2.woocommerce-loop-product__title {
    font-size: 10px !important;
    line-height: 1.3 !important;
    margin: 8px 8px 8px 8px !important;
    -webkit-line-clamp: 3 !important;
  }
  /* Sale badge — small pill proportional to 2-col card */
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-sale-badge,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .onsale {
    top: 8px !important;
    left: 8px !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
  }
  /* Heart wrap on shop archive — inherits base style (36×36 gray translucent) */
  /* Smak attribute row — Figma 276:13569: gap 4, padding x 8 */
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-attrs,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-attr-row {
    padding: 0 8px !important;
    margin-bottom: 8px !important;
    gap: 4px !important;
  }
  .elementor-wc-products ul.products li.product .octo-product-flavor {
    padding: 8px 8px 0 8px !important;
  }
  .elementor-wc-products .octo-flavor-badge {
    font-size: 8px !important;
    padding: 2px 2px !important;
    border-radius: 2px !important;
  }
  .elementor-wc-products .octo-flavor-value {
    font-size: 8px !important;
  }
  /* Smak badge — Figma 276:13570/13571: p 2px, rounded 2px, 8px font white */
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-attrs .octo-attr-badge,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-attr-row > span:first-child,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) [class*="octo-attr-label"] {
    background: #5b49f3 !important;
    color: #f9f9f9 !important;
    font-family: 'e-Ukraine', sans-serif !important;
    font-weight: 500 !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
    padding: 2px !important;
    border-radius: 2px !important;
    letter-spacing: -0.011em !important;
  }
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-attrs > *:not(:first-child),
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-attr-row > *:not(:first-child) {
    color: #131313 !important;
    font-family: 'e-Ukraine', sans-serif !important;
    font-weight: 500 !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.011em !important;
  }
  /* Bottom row — Figma: padding x 8, gap 8 */
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom {
    padding: 0 8px !important;
    gap: 8px !important;
  }
  /* Price — Figma 276:13576: 12px Bold purple */
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price ins,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price ins .amount,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price ins bdi,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price ins .woocommerce-Price-currencySymbol,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount bdi,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount .woocommerce-Price-currencySymbol {
    font-size: 12px !important;
  }
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price del,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price del .amount,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price del bdi,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price del .woocommerce-Price-currencySymbol {
    font-size: 9px !important;
  }
  /* Cart button — Figma 276:13578: padding 9.143, rounded 32, icon 13.714 */
  .elementor-wc-products body:not(.home) ul.products li.product:not(.octo-prefix-card) .button.add_to_cart_button,
  body:not(.home) .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .button.add_to_cart_button,
  body:not(.home).woocommerce ul.products li.product:not(.octo-prefix-card) .button.add_to_cart_button,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .button.add_to_cart_button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 9px !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    flex: 0 0 32px !important;
    background: #5b49f3 !important;
    position: relative !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
  }
  body:not(.home) .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .button.add_to_cart_button::before,
  body:not(.home) ul.products li.product:not(.octo-prefix-card) .button.add_to_cart_button::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 14px !important;
    height: 14px !important;
    background-color: transparent !important;
    -webkit-mask: none !important;
            mask: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='7' width='14' height='12' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* ============================================================= */
  /* RESTORE 1-COL rich style for [octo_recently_viewed] /          */
  /* [octo_related] wraps that render 1 column on mobile.           */
  /* Selector matches inline style="--rv-cols-mobile:1"; placed     */
  /* AFTER 2-col rules so equal-specificity declarations win.       */
  /* ============================================================= */

  /* Card: full-width with bigger radius */
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    border-radius: 32px !important;
    padding: 0 0 16px !important;
  }
  /* Title — bigger */
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) h2.woocommerce-loop-product__title,
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) h2.woocommerce-loop-product__title {
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin: 16px 16px 8px !important;
    -webkit-line-clamp: 2 !important;
  }
  /* Sale badge — bigger pill */
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-sale-badge,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .onsale {
    top: 25px !important;
    left: 14px !important;
    font-size: 16px !important;
    padding: 4px 16px !important;
    border-radius: 16px !important;
  }
  /* Wishlist — desktop-like 56×56 */
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap {
    top: 18px !important;
    right: 14px !important;
    width: 56px !important;
    height: 56px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-radius: 50% !important;
  }
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap a.yith-wcwl-add-to-wishlist-button__wrapper {
    width: 100% !important;
    height: 100% !important;
  }
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap svg,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap img {
    width: 28px !important;
    height: 28px !important;
  }
  /* Bottom row — wider padding */
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom {
    padding: 0 16px 16px !important;
    gap: 16px !important;
  }
  /* Price — bigger */
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom .price ins,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom .price ins .amount,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom .price ins bdi,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom .price ins .woocommerce-Price-currencySymbol,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount bdi,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount .woocommerce-Price-currencySymbol {
    font-size: 24px !important;
  }
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom .price del,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom .price del .amount,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom .price del bdi,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-card-bottom .price del .woocommerce-Price-currencySymbol {
    font-size: 18px !important;
  }
  /* Full pill "Купити" button with bag icon */
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .button.add_to_cart_button,
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .button.add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    min-height: 40px !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    color: #ffffff !important;
    background: #5b49f3 !important;
    position: relative !important;
    overflow: visible !important;
    text-indent: 0 !important;
    flex: 0 0 auto !important;
  }
  body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .button.add_to_cart_button::before {
    position: static !important;
    transform: none !important;
    width: 16px !important;
    height: 16px !important;
    content: "" !important;
    background-color: transparent !important;
    -webkit-mask: none !important;
            mask: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='7' width='14' height='12' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
  }

  /* Higher-specificity overrides for 1-col rv-wrap: base 2-col rule has
     .elementor-wc-products prefix (specificity 0,6,3) which beats earlier
     0,6,2 versions of the rules below. Re-declare with prefix to win. */
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap,
  body:not(.home) .elementor-wc-products.octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap {
    top: 18px !important;
    right: 14px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-radius: 50% !important;
  }
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button,
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap a.yith-wcwl-add-to-wishlist-button__wrapper,
  body:not(.home) .elementor-wc-products.octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
  }
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap svg,
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap img,
  body:not(.home) .elementor-wc-products.octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-wishlist-wrap svg {
    width: 28px !important;
    height: 28px !important;
  }

  /* "Купити" button — full pill (override icon-only compact button) */
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .button.add_to_cart_button,
  body:not(.home) .elementor-wc-products.octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .button.add_to_cart_button {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    text-indent: 0 !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .button.add_to_cart_button::before,
  body:not(.home) .elementor-wc-products.octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .button.add_to_cart_button::before {
    position: static !important;
    transform: none !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* Smak (flavor) row — bigger size for 1-col rv-wrap (default is 8px compact). */
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-product-flavor,
  body:not(.home) .elementor-wc-products.octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-product-flavor {
    padding: 16px 16px 0 16px !important;
    gap: 8px !important;
  }
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-flavor-badge,
  body:not(.home) .elementor-wc-products.octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-flavor-badge {
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
  }
  .elementor-wc-products body:not(.home) .octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-flavor-value,
  body:not(.home) .elementor-wc-products.octo-rv-wrap[style*="--rv-cols-mobile:1"] li.product:not(.octo-prefix-card) .octo-flavor-value {
    font-size: 14px !important;
  }

  /* ============================================================= */
  /* HOME 1-col cards — extend rich layout (same as single-product  */
  /* cross-sells). Home isn't wrapped in .octo-rv-wrap, so we mirror */
  /* the key 1-col rules with body.home + .elementor-wc-products.   */
  /* ============================================================= */
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) {
    width: 100% !important;
    max-width: none !important;
    border-radius: 32px !important;
    padding: 0 0 16px !important;
  }
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) h2.woocommerce-loop-product__title {
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin: 16px 16px 8px !important;
    -webkit-line-clamp: 2 !important;
  }
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-sale-badge,
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .onsale {
    top: 25px !important;
    left: 14px !important;
    font-size: 16px !important;
    padding: 4px 16px !important;
    border-radius: 16px !important;
  }
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap {
    top: 18px !important;
    right: 14px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-radius: 50% !important;
  }
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button,
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-add-to-wishlist-button--anchor,
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap a.yith-wcwl-add-to-wishlist-button__wrapper {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap svg,
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap img,
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-wishlist-wrap .yith-wcwl-icon {
    width: 28px !important;
    height: 28px !important;
  }
  /* Flavor badge — bigger 1-col size */
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-product-flavor {
    padding: 16px 16px 0 16px !important;
    gap: 8px !important;
  }
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-flavor-badge {
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
  }
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-flavor-value {
    font-size: 14px !important;
  }
  /* Bottom row */
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-card-bottom {
    padding: 0 16px 16px !important;
    gap: 16px !important;
  }
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price ins,
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price ins .amount,
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price ins bdi,
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount,
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price:not(:has(ins)) > .amount bdi {
    font-size: 24px !important;
  }
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .octo-card-bottom .price del {
    font-size: 18px !important;
  }
  body.home .elementor-wc-products ul.products li.product:not(.octo-prefix-card) .button.add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    min-height: 40px !important;
    width: auto !important;
    height: auto !important;
    color: #ffffff !important;
    background: #5b49f3 !important;
  }
}