/* P&T Made unified product controls. One final source of truth for button design
   on category, home-product, and single-product galleries. */
:root {
  --pt-control-bg: #211d18;
  --pt-control-hover: #3a3129;
  --pt-control-color: #fff;
  --pt-control-size: 32px;
  --pt-control-inset: 8px;
  --pt-control-gap: 5px;
}

/* Same actual control element, same styling, everywhere. */
body .pt-card-control {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 var(--pt-control-size) !important;
  box-sizing: border-box !important;
  width: var(--pt-control-size) !important;
  height: var(--pt-control-size) !important;
  min-width: var(--pt-control-size) !important;
  min-height: var(--pt-control-size) !important;
  max-width: var(--pt-control-size) !important;
  max-height: var(--pt-control-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--pt-control-bg) !important;
  border-radius: 50% !important;
  background: var(--pt-control-bg) !important;
  color: var(--pt-control-color) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
  cursor: pointer !important;
  line-height: 1 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}
body .pt-card-control svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #fff !important;
  color: #fff !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body .pt-card-control.is-favorite svg,
body .pt-favorite-badge.is-favorite svg { fill: #fff !important; }
body .pt-card-control:is(:hover,:focus-visible) {
  background: var(--pt-control-hover) !important;
  border-color: var(--pt-control-hover) !important;
  outline-offset: 2px !important;
}
body .pt-card-control[hidden],
body .pt-gallery-nav[hidden],
body .pt-shared-actions[hidden] { display: none !important; }

/* Legacy theme CSS hid catalog images until an async Store API response.
   Product photography is essential and must paint on the first render,
   regardless of the availability/speed of that secondary API call. */
body.tax-product_cat .wc-block-product-template img,
body.post-type-archive-product .wc-block-product-template img,
body.tax-product_cat .wp-block-post-template img,
body.post-type-archive-product .wp-block-post-template img {
  opacity: 1 !important;
}

/* One sliding action group component. The catalog uses the same controls
   and the same hover/focus behavior as the product gallery. */
body .pt-image-wrap,
body .pt-unified-product-hero { position: relative !important; }
body .pt-shared-actions {
  position: absolute !important;
  z-index: 20 !important;
  right: var(--pt-control-inset) !important;
  bottom: var(--pt-control-inset) !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: var(--pt-control-gap) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
body .pt-shared-actions .pt-card-control {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(22px) scale(.82) !important;
  transition: opacity .18s ease,transform .24s cubic-bezier(.2,.75,.2,1),background .18s ease !important;
}
body .pt-shared-actions .pt-card-control:nth-child(1) { transform: translateX(72px) scale(.82) !important; }
body .pt-shared-actions .pt-card-control:nth-child(2) { transform: translateX(45px) scale(.82) !important; }
body .pt-shared-actions .pt-card-control:nth-child(3) { transform: translateX(18px) scale(.82) !important; }
body .pt-image-wrap:is(:hover,:focus-within) > .pt-shared-actions .pt-card-control,
body .pt-unified-product-hero:is(:hover,:focus-within) .pt-product-overlay .pt-shared-actions .pt-card-control,
body .pt-unified-product-hero:is(:hover,:focus-within) > .pt-shared-actions .pt-card-control {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  pointer-events: auto !important;
}
body .pt-image-wrap > .pt-favorite-badge { top: var(--pt-control-inset) !important; right: var(--pt-control-inset) !important; }
body .pt-favorite-badge:not(.is-visible) { display: none !important; }
body .pt-favorite-badge.is-visible { opacity: 1 !important; visibility: visible !important; transform: none !important; }

/* One gallery arrow group, same inset for product pictures and category cards. */
body .pt-gallery-nav {
  position: absolute !important;
  z-index: 19 !important;
  inset: 50% var(--pt-control-inset) auto var(--pt-control-inset) !important;
  display: flex !important;
  width: auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .16s ease !important;
}
body .pt-gallery-nav .pt-card-control { pointer-events: auto !important; }
body .pt-image-wrap:is(:hover,:focus-within) > .pt-gallery-nav,
body .pt-unified-product-hero:is(:hover,:focus-within) .pt-product-overlay .pt-gallery-nav,
body .pt-unified-product-hero:is(:hover,:focus-within) > .pt-gallery-nav {
  opacity: 1 !important;
}
/* Touch devices do not depend on a hover interaction. */
@media (hover: none) {
  body .pt-gallery-nav:not([hidden]) { opacity: 1 !important; }
  body .pt-shared-actions .pt-card-control { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
}

/* Product-page composition: keep the existing 45/55 grid and 32px gutter.
   Use the containing product area rather than an additional 1000px width cap. */
@media (min-width: 782px) {
  body.single-product .pt-single-product .pt-product-top {
    box-sizing: border-box !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
  body.single-product .pt-single-product .pt-product-top > .wp-block-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 45%) minmax(0, 1fr) !important;
    gap: 32px !important;
    align-items: start !important;
    margin-block: 0 !important;
  }
  body.single-product .pt-single-product .pt-product-top > .wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
    flex-grow: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: start !important;
  }
  body.single-product .pt-single-product .pt-product-top > .wp-block-columns > .wp-block-column:last-child > :first-child {
    margin-block-start: 0 !important;
  }
}
/* WooCommerce itself reserves an extreme vertical aspect ratio on the thumb
   rail (based on thumbnail percentage). That made the GALLERY as tall as the
   rail and centered the photograph far below the purchase panel. Cancel that
   artificial rail aspect ratio; the main-image ratio now establishes height. */
body.single-product .pt-single-product .wc-block-product-gallery {
  --pt-gallery-hero-width: 100%;
  position: relative !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 90px 0 0 !important;
}
body.single-product .pt-single-product .wc-block-product-gallery > .wc-block-product-gallery-large-image {
  position: relative !important;
  box-sizing: border-box !important;
  flex: 0 0 var(--pt-gallery-hero-width) !important;
  width: var(--pt-gallery-hero-width) !important;
  max-width: var(--pt-gallery-hero-width) !important;
  min-width: 0 !important;
  aspect-ratio: var(--pt-gallery-ratio, 3 / 4) !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: flex-start !important;
  overflow: hidden !important;
  margin: 0 !important;
  --wc-block-product-gallery-large-image-ratio-width: 3;
  --wc-block-product-gallery-large-image-ratio-height: 4;
}
body.single-product .pt-single-product .wc-block-product-gallery .wc-block-product-gallery-large-image__wrapper {
  aspect-ratio: var(--pt-gallery-ratio, 3 / 4) !important;
  overflow: hidden !important;
}
body.single-product .pt-single-product .wc-block-product-gallery .wc-block-product-gallery-large-image__container,
body.single-product .pt-single-product .wc-block-product-gallery .wc-block-product-gallery-large-image__wrapper {
  width: 100% !important;
  max-width: 100% !important;
}
body.single-product .pt-single-product .wc-block-product-gallery .wc-block-components-product-image {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
}
body.single-product .pt-single-product .wc-block-product-gallery .wc-block-components-product-image img,
body.single-product .pt-single-product .wc-block-product-gallery .wc-block-components-product-image video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
/* 12px between photo and previews; exactly the same gallery outer box is
   measured by the 32px grid gutter before the purchase panel. */
body.single-product .pt-single-product .wc-block-product-gallery > .wc-block-product-gallery-thumbnails {
  box-sizing: border-box !important;
  position: absolute !important;
  inset-block: 0 !important;
  right: 0 !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: safe center !important;
  aspect-ratio: auto !important;
  flex: none !important;
  width: 78px !important;
  min-width: 0 !important;
  max-width: 78px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}
body.single-product .pt-single-product .wc-block-product-gallery .wc-block-product-gallery-thumbnails__scrollable {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: safe center !important;
  gap: 10px !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Single-image galleries have no thumbnail rail; center the hero instead of
   leaving it stranded against the empty right edge of the gallery column. */
body.single-product .pt-single-product .wc-block-product-gallery:not(:has(> .wc-block-product-gallery-thumbnails)) {
  justify-content: center !important;
  padding-right: 0 !important;
}
body.single-product .pt-single-product .wc-block-product-gallery .wc-block-product-gallery-large-image__inner-blocks {
  position: absolute !important;
  left: 5px !important;
  top: 5px !important;
  width: calc(100% - 10px) !important;
  height: calc(100% - 10px) !important;
  max-height: none !important;
  pointer-events: none !important;
}
/* Existing Woo buttons stay attached for native event handling but disappear
   visually once the shared P&T arrows have been initialized. */
body.single-product .pt-single-product .wc-block-product-gallery .wc-block-next-previous-buttons { opacity: 0 !important; pointer-events: none !important; }
body.single-product .pt-single-product .wc-block-product-gallery .wc-block-next-previous-buttons__button { pointer-events: none !important; }
/* Let the overlaid controls be clicked despite Woo's inert inner-block wrapper. */
body.single-product .pt-single-product .wc-block-product-gallery .pt-gallery-nav,
body.single-product .pt-single-product .wc-block-product-gallery .pt-shared-actions { pointer-events: none !important; }
body.single-product .pt-single-product .wc-block-product-gallery .pt-gallery-nav button,
body.single-product .pt-single-product .wc-block-product-gallery .pt-shared-actions button { pointer-events: auto !important; }

/* Product photos change immediately. Woo's gallery otherwise smoothly
   scrolls its slide container, making the first/last wrap look like a reversal.
   Woo's JS can also request smooth scrolling explicitly; controls.js cancels
   that request after native arrow and thumbnail selection. */
body.single-product .pt-single-product .wc-block-product-gallery-large-image__container {
  scroll-behavior: auto !important;
}

/* One image-bound overlay for both controls. JavaScript measures the rendered
   (object-fit: contain) image, not WooCommerce's often taller gallery wrapper.
   The frame clips the flyout so all actions remain inside the photograph. */
body.single-product .pt-unified-product-hero > .pt-product-overlay {
  position: absolute !important;
  z-index: 28 !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
}
body.single-product .pt-unified-product-hero .pt-product-overlay > .pt-shared-actions {
  right: var(--pt-control-inset) !important;
  bottom: var(--pt-control-inset) !important;
  left: auto !important;
  top: auto !important;
}
body.single-product .pt-unified-product-hero .pt-product-overlay > .pt-gallery-nav {
  left: var(--pt-control-inset) !important;
  right: var(--pt-control-inset) !important;
}
/* The shared favorite state also drives a persistent top-right badge on
   product pages. Position it within the image-bound overlay, not the gallery
   rail; keep it accessible for clicks while the overlay itself is inert. */
body.single-product .pt-unified-product-hero .pt-product-overlay > .pt-favorite-badge {
  position: absolute !important;
  top: var(--pt-control-inset) !important;
  right: var(--pt-control-inset) !important;
  z-index: 29 !important;
  pointer-events: auto !important;
}
/* Accessible, contained product lightbox instead of edge-to-edge Woo fullscreen.
   Its close control is the SAME 32px dark round button as the other actions. */
.pt-product-lightbox {
  position: fixed;
  box-sizing: border-box;
  width: min(960px, calc(100vw - 80px));
  height: min(760px, calc(100dvh - 90px));
  max-width: calc(100vw - 80px);
  max-height: calc(100dvh - 90px);
  margin: auto;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  background: #f0e6d6;
  box-shadow: 0 20px 90px rgba(0,0,0,.45);
  overflow: hidden;
}
.pt-product-lightbox::backdrop { background: rgba(12,10,8,.84); }
.pt-product-lightbox__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.pt-product-lightbox__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
body .pt-product-lightbox .pt-product-lightbox__close {
  position: absolute !important;
  z-index: 3;
  right: 2px;
  top: 2px;
}
@media (max-width: 600px) {
  .pt-product-lightbox { padding: 10px; width: calc(100vw - 16px); max-width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
}

/* WooCommerce purchase controls use a compact neutral treatment distinct from
   the black image-action buttons. Stripe-hosted wallet appearance stays under
   Stripe's own supported Appearance settings; only the OUTER product-page
   payment-area width is sized here. Never alter payment iframe contents. */
body.single-product .pt-single-product form.cart,
body.single-product .pt-single-product .wc-block-add-to-cart-form form {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-block: 16px !important;
}
body.single-product .pt-single-product form.cart .quantity,
body.single-product .pt-single-product .wc-block-add-to-cart-form .quantity {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 74px !important;
  margin: 0 !important;
}
body.single-product .pt-single-product form.cart input.qty,
body.single-product .pt-single-product .wc-block-add-to-cart-form input.qty,
body.single-product .pt-single-product input[type="number"][name="quantity"] {
  box-sizing: border-box !important;
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border: 1px solid #afa18f !important;
  border-radius: 3px !important;
  background: #faf6ef !important;
  color: #211d18 !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  box-shadow: none !important;
}
body.single-product .pt-single-product form.cart button.single_add_to_cart_button,
body.single-product .pt-single-product .wc-block-add-to-cart-form button.single_add_to_cart_button,
body.single-product .pt-single-product form.cart button[type="submit"].single_add_to_cart_button {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 122px !important;
  max-width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 6px 16px !important;
  border: 1px solid #9d8971 !important;
  border-radius: 3px !important;
  background: #eee2d2 !important;
  color: #211d18 !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
body.single-product .pt-single-product form.cart button.single_add_to_cart_button:is(:hover,:focus-visible),
body.single-product .pt-single-product .wc-block-add-to-cart-form button.single_add_to_cart_button:is(:hover,:focus-visible) {
  background: #e2d0ba !important;
  border-color: #6f5e4c !important;
  color: #211d18 !important;
}
/* Product-page wallet buttons: eliminate the giant full-summary-width
   rectangles without scaling or clipping payment provider iframes. Preserve
   native Stripe branding and click/authorization behavior. The width is
   sufficient for Pay/Link labels and shrinks responsively on narrow screens.
   Stripe's own UI governs button theme and height (set to Small/Outline).
   Cart and checkout payment methods intentionally retain their own layout. */
body.single-product .pt-single-product #wc-stripe-express-checkout-element,
body.single-product .pt-single-product #wc-stripe-express-checkout-element-wrapper,
body.single-product .pt-single-product .wc-stripe-express-checkout-element {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 240px !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  justify-content: flex-start !important;
}
/* Only the two user-requested layout/refresh changes below. Neither
   selector reaches Stripe's progress indicator or its pseudo-elements. */
/* Reserve the three 40px wallet rows INSIDE their existing host while they
   remount. Do not change the enclosing purchase block or the loading overlay's
   containing box, which would reposition Stripe's native progress graphic. */
body.single-product .pt-single-product #wc-stripe-express-checkout-element {
  min-height: 140px !important;
}

/* Remove the BlockUI gray tint only while WooCommerce Stripe is processing on
   a single product page. Stripe's own progress graphic, frame, iframe,
   animations and click-blocking are not styled or replaced here. */
body.single-product.wc-stripe-ece-processing .blockUI.blockOverlay {
  background-color: transparent !important;
}

/* Initial Stripe mount only: the gateway prints a display:none element
   AFTER form.cart. Its own min-height cannot reserve space while hidden.
   This separate PHP-rendered wrapper occupies the final wallet area from
   first paint. Never style Stripe's iframe, BlockUI overlay, or native spinner. */
body.single-product .pt-single-product .pt-wallet-initial-slot:has(> #wc-stripe-express-checkout-element) {
  box-sizing: border-box;
  width: 100%;
  max-width: 240px;
  min-height: 176px;
}
body.single-product .pt-single-product .pt-wallet-initial-loading {
  display: none;
  position: relative;
  top: 21px;
  left: 0;
  height: 0;
  overflow: visible;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #6c6052;
  pointer-events: none;
}
body.single-product .pt-single-product .pt-wallet-initial-slot:has(> #wc-stripe-express-checkout-element) > .pt-wallet-initial-loading {
  display: flex;
}
body.single-product .pt-single-product .pt-wallet-initial-slot.pt-wallet-ready > .pt-wallet-initial-loading {
  display: none !important;
}
body.single-product .pt-single-product .pt-wallet-initial-spinner {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid #c7bbaa;
  border-top-color: #635647;
  border-radius: 50%;
  animation: pt-wallet-initial-spin .85s linear infinite;
}
@keyframes pt-wallet-initial-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.single-product .pt-single-product .pt-wallet-initial-spinner { animation: none; }
}

/* Keep Stripe-generated payment iframe contents untouched; resizing its
   parent allows Stripe to lay out its own secure element correctly. */

.pt-favorite-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 12px; }
.pt-favorite-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d9d0c3; padding-bottom: 10px; }
.pt-favorite-list a { display: inline-flex; align-items: center; gap: 12px; color: #211d18; }
.pt-favorite-list img { width: 70px; height: 70px; object-fit: contain; }
.pt-favorites-remove { cursor: pointer; border: 1px solid #211d18; background: transparent; border-radius: 4px; padding: 7px 12px; }
@media (max-width: 781px) {
  body.single-product .pt-single-product .pt-product-top > .wp-block-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  body.single-product .pt-single-product .pt-product-top > .wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.single-product .pt-single-product .wc-block-product-gallery {
    --pt-gallery-hero-width: 100%;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding-right: 0 !important;
  }
  body.single-product .pt-single-product .wc-block-product-gallery > .wc-block-product-gallery-large-image {
    flex: none !important;
    width: var(--pt-gallery-hero-width) !important;
    max-width: var(--pt-gallery-hero-width) !important;
    align-self: center !important;
  }
  body.single-product .pt-single-product .wc-block-product-gallery > .wc-block-product-gallery-thumbnails {
    position: static !important;
    inset: auto !important;
    align-self: center !important;
    flex: none !important;
    aspect-ratio: auto !important;
    width: var(--pt-gallery-hero-width) !important;
    max-width: 100% !important;
    height: 72px !important;
    max-height: 72px !important;
    transform: none !important;
  }
  body.single-product .pt-single-product .wc-block-product-gallery .wc-block-product-gallery-thumbnails__scrollable {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 72px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  body .pt-gallery-nav { --pt-control-inset: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  body .pt-gallery-nav, body .pt-shared-actions .pt-card-control { transition: none !important; }
}