/* Pieces WordPress plugins used to draw (photo viewer), kept in the theme's look. */
.up-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 56px 16px; background: rgba(11, 18, 32, .92); }
.up-lightbox img { max-width: min(100%, 1000px); max-height: 100%; object-fit: contain; border-radius: 12px; background: #fff; }
.up-lightbox button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.up-lightbox button:hover { background: rgba(255, 255, 255, .26); }
.up-lightbox button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.up-lb-close { top: 12px; inset-inline-end: 12px; }
.up-lb-prev { top: 50%; inset-inline-start: 12px; transform: translateY(-50%); }
.up-lb-next { top: 50%; inset-inline-end: 12px; transform: translateY(-50%); }
.up-lb-count { position: absolute; bottom: 16px; color: #c9d6ea; font-size: 14px; }
.woocommerce div.product div.images .woocommerce-product-gallery__image img.wp-post-image { width: 100%; }
/* add-to-cart form and the WhatsApp/compare box below it read as one card */
.up-buy { display: grid; }
.woocommerce div.product .up-buy form.cart { margin: 0; }
.up-page { display: contents; }

/* payment methods (checkout) and the "complete payment" box (thank-you page) */
.ck-pay #payment ul.payment_methods li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 4px; }
.ck-pay #payment ul.payment_methods li > .payment_box { grid-column: 2 / -1; }
.pay-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.pay-icon { display: grid; place-items: center; width: 34px; height: 26px; border-radius: 6px; background: #e8f6ee; font-size: 16px; }
.pay-badge { padding: 3px 8px; border-radius: 5px; color: #fff; font: italic 800 11px/1.4 var(--f-body); white-space: nowrap; direction: ltr; }
.pay-instapay { background: #5b2a86; }
.pay-vodafone { background: #e60000; }
.pay-eand { background: #d71920; }
.pay-orange { background: #ff7900; color: #1a1200; }
.pay-we { background: #5c2d91; }
.pay-box { display: grid; gap: 12px; margin-block: 20px; padding: 22px; border: 1.5px solid var(--blue); border-radius: 18px; background: var(--blue-soft); }
.pay-box-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pay-box h2 { font-size: 20px; }
.pay-amount b { font: 800 24px var(--f-display); }
.pay-box hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid #c4d8f6; }
.pay-instapay-btn { justify-self: start; background: #5b2a86; color: #fff; border-radius: 999px; padding-inline: 26px; }
.pay-instapay-btn:hover { background: #48206b; }
.pay-box .btn-wa { justify-self: start; border-radius: 999px; }
.pay-number { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pay-number b { font-size: 22px; letter-spacing: .04em; }
.ftr-pay { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* tap-to-call: header button, floating button above WhatsApp, phone bottom bar */
.up-call svg { width: 18px; height: 18px; flex: none; }
.up-call .mono { font-size: .95em; }
.hdr-call { display: inline-flex; align-items: center; width: auto; gap: 6px; text-decoration: none; padding: 0 12px; color: var(--blue); border-color: #c4d8f6; background: var(--blue-soft); font-weight: 600; }
.hdr-call svg { width: 20px; height: 20px; }
.hdr-call:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.call-float { position: fixed; z-index: 24; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); left: calc(18px + env(safe-area-inset-left, 0px)); width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.call-float svg { width: 26px; height: 26px; }
.call-float:hover { background: #165dc0; }
.call-float:focus-visible, .wa-float:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
body:has(.sticky-buy) .call-float, body:has(.cmpbar) .call-float { bottom: calc(156px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 960px) { .hdr-call .mono { display: none; } .hdr-call { width: 44px; padding: 0; } }
@media (max-width: 760px) {
  .mob-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mob-nav .mob-call { color: var(--blue); }
  .call-float { bottom: calc(138px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; }
  body:has(.sticky-buy) .call-float, body:has(.cmpbar) .call-float { bottom: calc(206px + env(safe-area-inset-bottom, 0px)); }
}
.sticky-actions { display: flex; gap: 8px; align-items: center; }
.sticky-call { width: 44px; padding: 0; color: var(--blue); }
.sum-call { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: 1px dashed #c4d8f6; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 14px; font-weight: 600; text-decoration: none; }
.sum-call:hover { border-style: solid; }
.sum-call b { font-size: 15px; }
.biz-call { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 600; }
/* cart coupon row: let the code field shrink on narrow phones */
.cart-actions, .cart-actions .coupon { min-width: 0; }
.coupon-row input { min-width: 0; width: 100%; }
.woocommerce .coupon-row .btn-coupon { flex: none; }
/* phones: 16px fields so iOS does not zoom the page when a field is tapped */
@media (max-width: 760px) { input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; } }