/* =============================================================
   ProPluginsLab — Patch v3
   ADD AFTER patch-final.css (or replace it entirely)
   
   Fixes:
   1. Product gallery — featured image clean, thumbnails in grid
   2. Product page — no distortion, proper image quality
   3. Cart — proper 2-column even inside WC wrappers
   4. Checkout — proper 2-column, full-width fields
   5. Variation selector — styled cards instead of dropdown
   ============================================================= */


/* =============================================
   PRODUCT GALLERY — Clean display
   ============================================= */

/* Featured image — clean, full quality */
.ppl-gallery-wrap {
  margin-bottom: 48px;
}
.ppl-featured-image {
  margin-bottom: 12px;
}
.ppl-featured-image .ppl-product-img,
.ppl-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: block;
  /* Ensure image renders at full quality */
  image-rendering: auto;
  -webkit-image-smoothing: high;
}

/* Gallery thumbnails grid */
.ppl-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.ppl-thumb-link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.2s;
  aspect-ratio: 1;
}
.ppl-thumb-link:hover {
  border-color: var(--red);
  box-shadow: var(--shadow-md);
  transform: scale(1.03);
}
.ppl-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ppl-thumb-more {
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 600;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 0.2s;
}
.ppl-thumb-more:hover {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red);
}

/* Hide WooCommerce's default gallery if it somehow renders */
.woocommerce div.product div.images.woocommerce-product-gallery {
  display: none !important;
}


/* =============================================
   PRODUCT PAGE — sidebar improvements
   ============================================= */

/* Ensure sidebar doesn't have double borders */
.product-sidebar {
  position: sticky;
  top: 88px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.product-sidebar .sidebar-inner {
  padding: 28px;
}

/* Price in sidebar — make it prominent */
.product-sidebar .price,
.product-sidebar p.price {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 48px !important;
  color: var(--ink) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
  font-variation-settings: "opsz" 144, "wght" 600 !important;
}
.product-sidebar .price del {
  font-size: 22px !important;
  color: var(--ink-faint) !important;
  margin-right: 10px;
}
.product-sidebar .price ins {
  background: none !important;
  text-decoration: none !important;
}
/* "From: $X" for variable products */
.product-sidebar .price .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}

/* WooVR variation swatches — styled as card selectors */
.product-sidebar .woovr-variations,
.product-sidebar .variations {
  margin: 20px 0;
}
.product-sidebar .woovr-variation,
.product-sidebar .woovr-variations .woovr-variation {
  padding: 16px 18px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--line) !important;
  margin-bottom: 10px !important;
  background: var(--surface) !important;
  transition: all 0.2s;
  cursor: pointer;
}
.product-sidebar .woovr-variation:hover,
.product-sidebar .woovr-variations .woovr-variation:hover {
  border-color: var(--line-strong) !important;
  background: var(--bg-2) !important;
}
.product-sidebar .woovr-variation.woovr-variation-active,
.product-sidebar .woovr-variation.active,
.product-sidebar .woovr-variations .woovr-variation.woovr-variation-active {
  border-color: var(--red) !important;
  background: var(--red-soft) !important;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1) !important;
}

.product-sidebar .woovr-variation-name,
.product-sidebar .woovr-variation .woovr-variation-name {
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  margin-bottom: 4px;
}
.product-sidebar .woovr-variation-price,
.product-sidebar .woovr-variation .woovr-variation-price {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.product-sidebar .woovr-variation-description,
.product-sidebar .woovr-variation .woovr-variation-description {
  font-size: 12px !important;
  color: var(--ink-mute) !important;
  margin-top: 4px;
  line-height: 1.4;
}

/* Standard WC variation dropdown — if WooVR isn't active */
.product-sidebar .variations select {
  width: 100% !important;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  font-family: var(--font-body);
}
.product-sidebar .variations th,
.product-sidebar .variations td {
  display: block !important;
  padding: 0 !important;
  border: none !important;
}
.product-sidebar .variations th label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  display: block;
}

/* Add to cart button in sidebar */
.product-sidebar .single_add_to_cart_button,
.product-sidebar button.button {
  width: 100% !important;
  padding: 16px 24px !important;
  font-size: 15px !important;
  margin-top: 8px;
}

/* Quantity in sidebar */
.product-sidebar .quantity {
  margin-bottom: 12px;
}
.product-sidebar .quantity .qty {
  width: 80px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 15px;
  text-align: center;
}

/* Google Pay / PayPal buttons in sidebar */
.product-sidebar #wc-stripe-payment-request-wrapper,
.product-sidebar .gpay-button-container,
.product-sidebar .wc-stripe-payment-request-button-separator {
  margin-top: 10px;
}

/* Hide the product meta line (SKU: N/A Categories: Tags:) from WC default output */
.product-sidebar .product_meta {
  display: none;
}

/* One-time payment label in sidebar */
.product-sidebar .ppl-one-time-label {
  display: block;
  margin: 8px 0 20px;
  text-align: left;
}


/* =============================================
   CART PAGE — force 2-column layout
   The issue: WooCommerce wraps content in
   additional <div class="woocommerce"> containers
   that break our grid. Fix with wider selectors.
   ============================================= */

/* Target the form directly */
form.woocommerce-cart-form.cart-layout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 40px !important;
  width: 100% !important;
  max-width: none !important;
}
/* Make main and aside fill their grid cells */
form.cart-layout > main {
  grid-column: 1;
  min-width: 0;
}
form.cart-layout > aside {
  grid-column: 2;
  grid-row: 1 / 10;
}

/* If the form doesn't have cart-layout class (fallback for default WC) */
.woocommerce-cart .woocommerce {
  max-width: var(--max) !important;
  margin: 0 auto !important;
  padding: 0 var(--gutter) !important;
}

/* Style the cart item rows inside our custom template */
.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}
.cart-item:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}


/* =============================================
   CHECKOUT — force 2-column layout
   Same WooCommerce wrapper issue as cart.
   ============================================= */

form.checkout.ck-layout,
form.woocommerce-checkout.ck-layout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 40px !important;
  width: 100% !important;
  max-width: none !important;
}
form.ck-layout > main {
  grid-column: 1;
  min-width: 0;
}
form.ck-layout > aside {
  grid-column: 2;
  grid-row: 1 / 20;
}

/* Checkout fields — full width within their container */
.woocommerce-checkout .form-row {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  width: 100% !important;
  float: none !important;
}
/* 2-col for first/last name */
.woocommerce-checkout #billing_first_name_field,
.woocommerce-checkout #billing_last_name_field,
.woocommerce-checkout #shipping_first_name_field,
.woocommerce-checkout #shipping_last_name_field {
  width: 48% !important;
  float: left !important;
}
.woocommerce-checkout #billing_last_name_field,
.woocommerce-checkout #shipping_last_name_field {
  float: right !important;
}

/* Make the "Your order" review section full width in its container */
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
  width: 100%;
}

/* Checkout inputs full width */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100% !important;
  max-width: none !important;
}

/* WC wrappers — remove default constraints */
.woocommerce-checkout .woocommerce {
  max-width: var(--max) !important;
  margin: 0 auto !important;
  padding: 0 var(--gutter) !important;
}


/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  form.woocommerce-cart-form.cart-layout,
  form.checkout.ck-layout,
  form.woocommerce-checkout.ck-layout {
    grid-template-columns: 1fr !important;
  }
  form.cart-layout > aside,
  form.ck-layout > aside {
    grid-column: 1;
    grid-row: auto;
  }
  .ppl-gallery-thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .ppl-gallery-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
  .cart-item {
    grid-template-columns: 48px 1fr;
    gap: 12px;
  }
}