/* =========================================================
   GPRO Scripts — Floating Cart (FAB + Drawer)

   Everything site-specific about the FAB — position, size, background,
   icon colour, badge colour, the glyph itself, and the shadow — is a CSS
   custom property with a sensible fallback. Override any of them in the
   child theme's style.css; nothing here needs editing per site:

     :root {
       --gpro-cart-fab-x: 16px;              right offset
       --gpro-cart-fab-y: 116px;             bottom offset
       --gpro-cart-fab-size: 52px;           button diameter
       --gpro-cart-fab-icon-size: 22px;      glyph size (independent of
                                              button diameter, so the icon
                                              can be enlarged on its own)
       --gpro-cart-fab-bg: #333;             background
       --gpro-cart-fab-color: #fff;          icon colour
       --gpro-cart-fab-count-bg: #e33;       count badge colour
       --gpro-cart-fab-glyph: "\e015";       Divi ETmodules glyph (quoted)
       --gpro-cart-fab-shadow: 0 4px 14px rgba(0,0,0,.25);  resting shadow
       --gpro-cart-fab-shadow-hover: 0 6px 20px rgba(0,0,0,.3);
     }
   ========================================================= */

/* ---------- FAB ---------- */
#gpro-cart-fab {
    position: fixed;
    right: var(--gpro-cart-fab-x, 16px);
    bottom: calc(var(--gpro-cart-fab-y, 116px) + env(safe-area-inset-bottom, 0px));
    z-index: 999999;
}
.gpro-cart-fab__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--gpro-cart-fab-size, 52px);
    height: var(--gpro-cart-fab-size, 52px);
    padding: 0;
    border-radius: 999px;
    background: var(--gpro-cart-fab-bg, #333);
    border: 1px solid var(--gpro-cart-fab-bg, #333);
    color: var(--gpro-cart-fab-color, #fff);
    cursor: pointer;
    /* Present at rest, not just on hover — a shadow-less flat icon reads
       too similarly to other fixed corner buttons (e.g. WhatsApp widgets)
       sitting nearby; the resting shadow gives it its own visual weight. */
    box-shadow: var(--gpro-cart-fab-shadow, 0 4px 14px rgba(0, 0, 0, .25));
    transition: box-shadow .18s ease;
}
.gpro-cart-fab__btn:hover {
    box-shadow: var(--gpro-cart-fab-shadow-hover, 0 6px 20px rgba(0, 0, 0, .3));
}

.gpro-cart-fab__icon {
    font-size: var(--gpro-cart-fab-icon-size, 22px);
    color: inherit;
}
.gpro-cart-fab__icon::before {
    content: var(--gpro-cart-fab-glyph, "\e015");
}

.gpro-cart-fab__count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--gpro-cart-fab-count-bg, #e33);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ---------- Drawer ---------- */
#gpro-cart-drawer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 999998;
}
#gpro-cart-drawer.is-open { opacity: 1; pointer-events: auto; }

.gpro-cart-drawer__inner {
    position: absolute;
    right: 0;
    top: 0;
    width: min(420px, 92vw);
    height: 100%;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    transform: translateX(100%);
    transition: transform .25s ease;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
}
#gpro-cart-drawer.is-open .gpro-cart-drawer__inner { transform: translateX(0); }

/* ---------- Header ---------- */
.gpro-cart-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    margin: -16px -16px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.gpro-cart-drawer__title { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.gpro-cart-drawer__close { background: none; border: 0; font-size: 26px; cursor: pointer; }

/* ---------- Mini cart reset ---------- */
#gpro-cart-drawer ul.woocommerce-mini-cart,
#gpro-cart-drawer li.woocommerce-mini-cart-item {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Hide all item meta / variations */
#gpro-cart-drawer .woocommerce-mini-cart-item dl,
#gpro-cart-drawer .woocommerce-mini-cart-item .variation,
#gpro-cart-drawer .woocommerce-mini-cart-item .wc-item-meta,
#gpro-cart-drawer .woocommerce-mini-cart-item .item-data,
#gpro-cart-drawer .woocommerce-mini-cart-item .product-meta {
    display: none !important;
}

/* ---------- Cart item layout ----------
   Woo nests the thumbnail inside the title link, so the layout is:
   [ image + title ] (row 1) / [ qty x price ] (row 2) / [ remove ] (top right)
-------------------------------------- */
#gpro-cart-drawer li.woocommerce-mini-cart-item.mini_cart_item {
    display: grid;
    grid-template-columns: 1fr 18px;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 6px;
    min-width: 0;
    overflow: hidden;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
#gpro-cart-drawer li.woocommerce-mini-cart-item:last-child { border-bottom: none; }

/* Product link: thumbnail + title side by side */
#gpro-cart-drawer li.woocommerce-mini-cart-item.mini_cart_item > a:not(.remove) {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    line-height: 1.25;
    text-decoration: none;
}
#gpro-cart-drawer li.woocommerce-mini-cart-item.mini_cart_item > a:not(.remove) img {
    width: 56px;
    height: auto;
    flex: 0 0 56px;
    object-fit: cover;
    margin: 0;
}

/* Qty x price */
#gpro-cart-drawer li.woocommerce-mini-cart-item.mini_cart_item .quantity {
    grid-column: 1;
    grid-row: 2;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
}

/* Remove, top right */
#gpro-cart-drawer li.woocommerce-mini-cart-item.mini_cart_item a.remove {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: currentColor !important;
    opacity: .6;
}
#gpro-cart-drawer li.woocommerce-mini-cart-item.mini_cart_item a.remove:hover { opacity: 1; }

/* ---------- Footer ---------- */
#gpro-cart-drawer .woocommerce-mini-cart__total { margin-top: 14px; }

#gpro-cart-drawer .woocommerce-mini-cart__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
#gpro-cart-drawer .woocommerce-mini-cart__buttons a { display: block; width: 100%; }

/* View Cart / Checkout inside the drawer: layout only, no forced colour.
   These should look exactly like every other button on the site, so the
   theme's own .button / .et_pb_button styling is left alone here — only
   the block/full-width/spacing needed to sit correctly in a narrow
   drawer is set. (Previously forced a background colour with !important,
   which is why these looked flat black instead of matching the site.) */
#gpro-cart-drawer a.button {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Hide the FAB on the cart and checkout pages — no point floating over
   the page that already shows the cart. */
body.woocommerce-cart #gpro-cart-fab,
body.woocommerce-checkout #gpro-cart-fab {
    display: none !important;
}

/* Any element with a "gpro-add-to-cart-<id>" class — dims briefly while
   the AJAX request is in flight, so a double-click doesn't fire twice. */
[class*="gpro-add-to-cart-"].gpro-add-to-cart--loading {
    opacity: .6;
    pointer-events: none;
}

/* Failure message for the add-to-cart trigger (e.g. a sold-individually
   product already in the cart) — small, auto-dismissing, above the FAB
   so it doesn't collide with a WhatsApp-style widget in the same corner. */
.gpro-cart-toast {
    position: fixed;
    right: var(--gpro-cart-fab-x, 16px);
    bottom: calc(
        var(--gpro-cart-fab-y, 116px) +
        var(--gpro-cart-fab-size, 52px) +
        12px +
        env(safe-area-inset-bottom, 0px)
    );
    max-width: min(320px, 80vw);
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(20, 20, 20, .92);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    z-index: 1000000;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.gpro-cart-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}