/**
 * GroKarna UI Polish — loaded LAST in the cascade (see functions.php enqueue,
 * priority 99). Consolidates the product-card hover behavior that was spread
 * across 7 conflicting .product-card:hover blocks in style.css, and applies
 * small cross-page consistency fixes. Keep this file small and final.
 */

/* ---------------------------------------------------------------------------
 * 1. PRODUCT CARD HOVER — single source of truth
 *    Bug fixed: image zoomed (scale 1.06) inside a wrapper with
 *    overflow:visible, so the zoom bled outside the card borders.
 * ------------------------------------------------------------------------- */

.product-card,
.shop-product-card {
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
}

/* Clip the zooming media inside every card variant.
   The !important is required: functions.php injects inline CSS with
   `overflow: visible !important` on .product-image for category pages,
   and this rule loads later so it wins at equal specificity+importance. */
.product-card .product-image,
.product-card [class*="product-image"],
.product-card .card-media,
.shop-product-card .shop-product-image,
body.tax-product_cat ul.products li.product .product-image,
ul.products li.product .product-image {
    overflow: hidden !important;
    border-radius: 12px 12px 0 0;
}

.product-card .product-image img,
.shop-product-card .shop-product-image img {
    transition: transform .35s ease;
}

/* Hover effects only on devices that actually hover (not touch) */
@media (hover: hover) and (pointer: fine) {
    .product-card:hover,
    .shop-product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 28px rgba(26, 60, 36, 0.14) !important;
        z-index: 6;
    }

    .product-card:hover .product-image img,
    .shop-product-card:hover .shop-product-image img {
        transform: scale(1.06);
    }

    /* Badges stay fully readable on hover (a stray rule dimmed them to .6) */
    .product-card:hover .product-badges .badge,
    .shop-product-card:hover .product-badges .badge {
        opacity: 1 !important;
    }
}

/* On touch devices: no zoom-on-tap ghosting, keep cards static */
@media (hover: none) {
    .product-card:hover .product-image img,
    .shop-product-card:hover .shop-product-image img {
        transform: none;
    }
}

/* Wishlist heart: keep above the zooming image and clickable */
.product-card .wishlist-heart-redesign,
.shop-product-card .wishlist-heart-redesign {
    z-index: 12;
}

/* ---------------------------------------------------------------------------
 * 2. FOCUS VISIBILITY — keyboard users get the same affordance as hover
 * ------------------------------------------------------------------------- */

.product-card:focus-within,
.shop-product-card:focus-within {
    box-shadow: 0 10px 28px rgba(26, 60, 36, 0.14), 0 0 0 2px #10b981 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 3. MOTION SAFETY — respect users who turn animations off
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
 * 4. SMOOTH SCROLLING for in-page anchors (header quick links, back-to-top)
 * ------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------------
 * 5. SMALL CONSISTENCY FIXES
 * ------------------------------------------------------------------------- */

/* Buttons: consistent pointer + pressed feedback everywhere */
button,
.button,
.btn {
    cursor: pointer;
}

button:active,
.button:active,
.btn:active {
    transform: translateY(1px);
}

/* Images never drag-ghost on product grids */
.product-card img,
.shop-product-card img {
    -webkit-user-drag: none;
    user-select: none;
}

/* Prevent iOS double-tap zoom on add buttons */
.product-card button,
.shop-product-card button,
.single_add_to_cart_button {
    touch-action: manipulation;
}

/* Long product titles: clamp to 2 lines so card heights stay even */
.product-card .gk-product-title,
.shop-product-card .gk-product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* ---------------------------------------------------------------------------
 * 6. MOBILE HEADER — the theme shipped with no responsive header at all:
 *    ul.nav-menu keeps its 620px desktop inline-style row on a 390px screen
 *    and .header-actions spills off the right edge (visible on checkout,
 *    latent on every page). Pattern: swipeable nav row + compact actions.
 *    !important is required to beat the inline style attributes in header.php.
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {

    /* Nav becomes a horizontally swipeable strip (standard mobile pattern) */
    .main-navigation .container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .main-navigation .container::-webkit-scrollbar {
        display: none;
    }
    .main-navigation .nav-menu {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: max-content;
        padding: 0 12px !important;
    }
    .main-navigation .nav-menu > li > a {
        white-space: nowrap;
        font-size: 14px !important;
        padding: 10px 8px !important;
    }
    .main-navigation .browse-categories-btn {
        padding: 8px 12px !important;
        font-size: 14px !important;
        white-space: nowrap;
    }
    .main-navigation .browse-categories-btn span {
        font-size: 14px;
    }

    /* Header actions: tighten, allow shrink, drop the text labels */
    .header-main .header-inner {
        flex-wrap: wrap;
        gap: 8px;
    }
    .header-actions {
        gap: 8px !important;
        flex-wrap: nowrap !important;
        max-width: 100%;
    }
    .header-actions .location-selector .label,
    .header-actions .location-selector .value,
    .header-actions .action-link span {
        display: none !important;
    }
    .header-actions .action-link {
        padding: 8px !important;
    }
    /* Keep the cart count bubble visible even though spans are hidden */
    .header-actions .cart-count,
    .header-actions .cart-contents-count {
        display: inline-flex !important;
    }
}

@media (max-width: 480px) {
    /* Search bar takes the full row beneath logo on phones */
    .header-main .search-form,
    .header-main .search-form-modern {
        order: 10;
        flex-basis: 100%;
        margin-top: 8px;
    }

    /* Logo: proportionate to a phone header, leaves room for actions */
    .site-logo img.header-logo {
        width: 170px !important;
        height: auto !important;
    }
    .site-logo .tagline {
        font-size: 10px !important;
        letter-spacing: 2px !important;
    }
}

/* ---------------------------------------------------------------------------
 * 7. CHECKOUT: decorative .card-glow rendered 696px wide inside the form
 *    card and forced horizontal scroll on phones. Pure decoration — clip it.
 * ------------------------------------------------------------------------- */

.form-card {
    overflow: hidden;
    position: relative;
}
.card-glow {
    pointer-events: none;
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * 8. BLOCK CART / CHECKOUT — the cart & checkout pages use the WooCommerce
 *    BLOCK templates (wp-block-woocommerce-cart), not the classic templates,
 *    so the brand button color must target the block button classes. The
 *    block "Proceed to Checkout" / "Place Order" shipped near-black.
 * ------------------------------------------------------------------------- */

.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart a.wc-block-cart__submit-button,
.wc-block-components-button.contained,
.wp-block-woocommerce-checkout-place-order-block .wc-block-components-checkout-place-order-button {
    background: linear-gradient(135deg, #2d6e3e 0%, #1a3c24 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(26, 60, 36, 0.25) !important;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout-place-order-block .wc-block-components-checkout-place-order-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(26, 60, 36, 0.32) !important;
}

/* Brand the block totals "estimated total" + coupon link accent */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: #1a3c24 !important;
}
.wc-block-components-totals-coupon-link {
    color: #2d6e3e !important;
}

/* ---------------------------------------------------------------------------
 * 9. MOBILE CHECKOUT OVERFLOW
 *    On phones the .checkout-content grid track stretched to ~410px (wider
 *    than the 348px viewport column) because long order-summary labels
 *    ("Free Delivery (orders over Rs.500)") don't wrap and CSS-grid tracks
 *    expand to fit non-wrapping content. Force tracks to shrink + wrap text.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .checkout-content {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .checkout-content > .checkout-form,
  .checkout-content > .checkout-sidebar,
  .checkout-form .col2-set,
  .checkout-form .col-1,
  .checkout-form .col-2,
  .order-summary-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Order-summary rows: let long shipping/label text wrap instead of pushing width */
  .order-summary-wrapper table,
  .woocommerce-checkout-review-order-table {
    width: 100% !important;
    table-layout: fixed;
  }
  .order-summary-wrapper td,
  .order-summary-wrapper th,
  .woocommerce-checkout-review-order-table td,
  .woocommerce-checkout-review-order-table th {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* shipping method radio list shouldn't force width */
  #shipping_method,
  .woocommerce-shipping-methods {
    padding-left: 0;
    margin: 0;
  }
  #shipping_method li,
  .woocommerce-shipping-methods li {
    list-style: none;
    white-space: normal;
  }
}