/* JB product card — shop-only rules (JB Toolkit "product-card" module). jbpc.css is the mockup's stylesheet, copied unchanged. This file holds what
   exists only on the shop: the photo the server paints before the gallery
   mounts, the real WooCommerce form under the option card, and Revolut's payment frames inside that form (measured 07-10-2026: two .wc-revolut-payment-request-instance,52px frames,inline margin 1.5em 0,shown only once a variation is found). */ /* The shop's theme rules the mockup never had (measured on the tarp, 07-10-2026):
   Divi prints p { padding-bottom: 1em } inline — under the 52px price range
   that is a 52px hole, under the price by the quantity 44px — and
   WooCommerce's .woocommerce img / Divi's img cap every image at
   max-width: 100%, height: auto, which squeezed the hover zoom (the full-size
   photo must keep its own 2048px) and let a colour swatch collapse to 0px
   until its photo loaded. */
.jbpc p {
    padding-bottom: 0;
}
.jbpc-gallery .jbpc-gallery__main img.jbpc-gallery__zoomimg {
    max-width: none !important;
    max-height: none !important;
}
.jbpc .jbpc-tile .jbpc-tile__swatch {
    height: 34px;
}

/* the server's first photo until the gallery takes over — the frame of .jbpc-gallery__main */ .jbpc-mount__img{display: block;width: 100%;height: auto;aspect-ratio: 1 / 1;object-fit: contain;border-radius: 10px;background: #ffffff;box-shadow: 0 12px 18px -6px rgba(76,29,161,.2);}.jbpc-card .jbpc-wc form.cart{margin: 0 !important;padding: 0;}.jbpc-card .jbpc-wc table.variations,.jbpc-card .jbpc-wc .reset_variations,.jbpc-card .jbpc-wc .single_variation,.jbpc-card .jbpc-wc .wc-no-matching-variations,.jbpc-card .jbpc-wc .quantity,.jbpc-card .jbpc-wc .single_add_to_cart_button{display: none !important;}.jbpc-card.jbpc-failed .jbpc-wc :is(table.variations,.reset_variations,.single_variation,.quantity,.single_add_to_cart_button){display: revert !important;}.jbpc-card.jbpc-failed .jbpc-mount--options{display: none;}.jbpc-atc[aria-busy="true"]{cursor: progress;opacity: .75;}/* Express payments: the frames stay where WooCommerce put them (moving a frame reloads it);the row around them is the mockup's .jbpc-express — side by
   side, 14px apart, 10px corners, the hover on our wrapper. */
.jbpc-card .jbpc-wc .jbpc-pay-row {
    position: relative;
    display: flex;
    gap: 14px;
    margin: 14px 0 0;
    padding: 0;
}
.jbpc-card .jbpc-wc .jbpc-pay-row--none {
    margin: 0;
}
.jbpc-card .jbpc-wc .jbpc-pay-row > .wc-revolut-payment-request-instance {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;   /* Revolut writes margin: 1.5em 0 inline */
    overflow: hidden;
    border-radius: 10px;
    /* always there, not only on hover: Google's white button vanished on the white section (owner 07-10);the mockup's light black shadow (--jbpc-shadow-photo) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: box-shadow .2s, transform .2s;
}
/* Revolut makes its frame 5px wider than the slot (min-width: calc(100% + 5px)
   inline); in our rounded slot that cut the button's right edge off */ .jbpc-card .jbpc-wc .jbpc-pay-row > .wc-revolut-payment-request-instance iframe{min-width: 100% !important;}/* The edge is drawn over the frame: Revolut's button is square (radius "none"
   in its settings) and its border vanished at our rounded corners. Black round
   Apple Pay's light button,Google's grey #dadce0 round its white one — the
   mockup's look. On a dark button the black line simply does not show. */ .jbpc-card .jbpc-wc .jbpc-pay-row > .wc-revolut-payment-request-instance::after{content: "";position: absolute;inset: 0;z-index: 1;border-radius: inherit;box-shadow: inset 0 0 0 1px #dadce0;pointer-events: none;}.jbpc-card .jbpc-wc .jbpc-pay-row > .wc-revolut-payment-request-instance:has(#revolut-payment-request-apple-pay-button)::after{box-shadow: inset 0 0 0 1px #000000;}.jbpc-card .jbpc-wc .jbpc-pay-row > .wc-revolut-payment-request-instance:hover{box-shadow: 0 14px 24px -6px rgba(76,29,161,.4);transform: translateY(-1px);}.jbpc-card .jbpc-wc .jbpc-pay-row > .jbpc-pay--empty{position: absolute;top: 0;left: 0;width: 100%;visibility: hidden;pointer-events: none;}