/* Mandyju WooCommerce Overrides
 * Scope: Only structural/layout + light visual alignment with theme tokens.
 * Methodology: BEM-ish + utility helpers. Avoid deep descendant chains; keep selectors flat.
 * Prefix: .wc-mj- for wrappers / blocks to reduce collision.
 */

/* 1. Wrapper (optional helper if we wrap shop pages) */
.wc-mj-shop {
  --mj-gap-xs: 0.5rem;
  --mj-gap-sm: 0.75rem;
  --mj-gap: 1.25rem;
  --mj-gap-lg: 2rem;
  --mj-radius-sm: 4px;
  --mj-radius: 8px;
  --mj-color-border: var(--wp--preset--color--contrast-3, #ddd);
  --mj-color-bg-alt: var(--wp--preset--color--base-2, #f8f8f8);
  --mj-color-primary: var(--wp--preset--color--primary, #0a6);
  --mj-color-attn: var(--wp--preset--color--secondary, #e67e22);
}

/* 2. Product Grid */
.wc-mj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--mj-gap);
  margin: var(--mj-gap-lg) 0;
  list-style: none;
  padding: 0;
}
.wc-mj-grid > li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mj-color-border);
  border-radius: var(--mj-radius);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.wc-mj-grid > li.product:focus-within,
.wc-mj-grid > li.product:hover {
  box-shadow: 0 4px 16px -4px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.wc-mj-grid .woocommerce-LoopProduct-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--mj-gap-sm) var(--mj-gap-sm) 0;
}
.wc-mj-grid .woocommerce-LoopProduct-link img {
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--mj-radius-sm);
  background: var(--mj-color-bg-alt);
}
.wc-mj-grid .woocommerce-loop-product__title {
  font-size: clamp(.9rem, .85rem + .3vw, 1.05rem);
  line-height: 1.3;
  margin: var(--mj-gap-sm) 0 var(--mj-gap-xs);
  font-weight: 600;
}
.wc-mj-grid .price {
  font-weight: 600;
  color: var(--mj-color-primary);
  margin-bottom: var(--mj-gap-sm);
}
.wc-mj-grid .star-rating { margin-bottom: var(--mj-gap-sm); }

/* Add to cart buttons */
.wc-mj-grid .add_to_cart_button, .wc-mj-grid .product_type_grouped, .wc-mj-grid .product_type_variable {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .8rem;
  line-height: 1;
  padding: .55em .85em;
  border-radius: var(--mj-radius-sm);
  background: var(--mj-color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease;
}
.wc-mj-grid .add_to_cart_button:hover,
.wc-mj-grid .product_type_grouped:hover,
.wc-mj-grid .product_type_variable:hover {
  background: var(--mj-color-attn);
  color: #fff;
}

/* 3. Badges */
.wc-mj-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  background: var(--mj-color-attn);
  color: #fff;
  padding: .35em .55em;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .5px; /* tiny optical; acceptable exception */
  border-radius: 4px;
  text-transform: uppercase;
}
.wc-mj-badge { max-width: calc(100% - 1rem); overflow: hidden; text-overflow: ellipsis; }

/* 4. Utilities */
.wc-mj-visually-hidden { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.wc-mj-flex { display:flex; }
.wc-mj-flex-center { display:flex; align-items:center; justify-content:center; }
.wc-mj-text-center { text-align:center; }

/* 5. Single Product */
.single-product {
  --mj-gap-xs: 0.5rem;
  --mj-gap-sm: 0.75rem;
  --mj-gap: 1.25rem;
  --mj-gap-lg: 2rem;
  --mj-radius-sm: 4px;
  --mj-radius: 8px;
  --mj-color-border: var(--wp--preset--color--border-subtle, #e5e7eb);
  --mj-color-bg-alt: var(--wp--preset--color--background-base, #f6f5ed);
  --mj-color-primary: var(--wp--preset--color--primary, #0a6);
  --mj-color-attn: var(--wp--preset--color--secondary, #e67e22);
}
.single-product .wc-mj-single-product,
.single-product .product,
.single-product .woocommerce.single-product div.product {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.single-product {
  overflow-x: hidden;
}

.single-product .wp-block-columns,
.single-product .columns-2,
.single-product .columns-3 {
  max-width: 100%;
}
.single-product .wc-mj-product-summary {
  /* Center the product container */
  display: grid;
  gap: var(--mj-gap-lg);
  align-items: start;
  /* Force single column so nothing squeezes the main content */
  grid-template-columns: minmax(0, 1fr);
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wp--preset--spacing--30, 1rem);
  padding-right: var(--wp--preset--spacing--30, 1rem);
  overflow: hidden; /* prevent inner overflow from creating page scroll */
}
@media (max-width: 900px) {
  .single-product .wc-mj-product-summary { grid-template-columns: 1fr; }
}

/* If any unexpected child tries to act like a column, force it to new row */
.single-product .wc-mj-product-summary > * {
  min-width: 0;
}
.single-product .wc-mj-product-summary .price { font-size: 1.25rem; }
.single-product .wc-mj-product-summary form.cart { margin-top: var(--mj-gap); }

/* Prevent variation table cells from exceeding container width */
.single-product .variations_form table.variations,
.single-product .variations_form table.variations td,
.single-product .variations_form table.variations th {
  max-width: 100%;
  white-space: normal;
}

.single-product .variations_form table.variations td.value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  width: 100%;
}

.single-product .variations_form table.variations td.value select {
  max-width: 100%;
}

/* Wrap any potentially long text to avoid layout overflow */
.single-product .wc-mj-product-summary,
.single-product .wc-mj-product-summary * {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Ensure variation details box does not overflow */
.single-product .single_variation {
  max-width: 100%;
}

/* Meta section safety */
.single-product .product_meta {
  max-width: 100%;
}

/* Ensure selects and swatch containers don’t overflow */
.single-product .variations_form .value,
.single-product .variations_form .value select,
.single-product .mandyju-variation-swatches {
  max-width: 100%;
}

/* Gallery tweaks rely on WooCommerce core classes */
.woocommerce-product-gallery { --thumb-size: 36px; }
.woocommerce-product-gallery__wrapper { border-radius: var(--mj-radius); overflow:hidden; }
.woocommerce-product-gallery__image img { width:100%; height:auto; object-fit:cover; }
.single-product .woocommerce-product-gallery, 
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image {
  max-width: 100%;
}
.woocommerce-product-gallery--with-images .flex-control-thumbs { margin-top: var(--mj-gap-sm); gap: var(--mj-gap-xs); display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.woocommerce-product-gallery--with-images .flex-control-thumbs li { list-style:none; width: auto !important; }
.woocommerce-product-gallery--with-images .flex-control-thumbs img { width: 100%; height: auto; border-radius: var(--mj-radius-sm); cursor:pointer; opacity:.8; transition:opacity .2s ease, outline .2s ease; }
.woocommerce-product-gallery--with-images .flex-control-thumbs img:hover,
.woocommerce-product-gallery--with-images .flex-control-thumbs img.flex-active { opacity:1; outline:2px solid var(--mj-color-primary); }

/* Block-based gallery (Woo Blocks) */
.mandyju-product-gallery .wp-block-woocommerce-product-image-gallery {
  border-radius: 12px; /* acceptable 4pt multiple */
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.15);
}
.mandyju-product-gallery .wp-block-woocommerce-product-image-gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

/* Center alignwide inside full-width hero if present */
.mandyju-product-hero .alignwide,
.mandyju-product-content .alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* 5.a Single Product — Mandyju block template alignments */
.mandyju-single-product .mandyju-product-content {
  --mj-card-border: var(--wp--preset--color--border-subtle, #e5e7eb);
  /* Fallback to theme's soft highlight if color-mix unsupported */
  background-color: var(--wp--preset--color--highlight-soft, #f3ede5) !important;
  /* Prefer a subtle mix of primary with white */
  background-color: color-mix(in srgb, var(--wp--preset--color--primary, #C19A5B) 18%, white) !important;
  border-top: 1px solid var(--wp--preset--color--highlight-soft-alt, #cbb8a6);
}
.mandyju-product-hero .wp-block-columns,
.mandyju-product-content .wp-block-columns {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.mandyju-single-product .mandyju-product-content .wp-block-columns { row-gap: var(--wp--preset--spacing--60); }

/* Details panel */
.mandyju-single-product .mandyju-product-details {
  background: var(--wp--preset--color--base, #fff);
  border: 1px solid var(--mj-card-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.15);
}
.mandyju-single-product .mandyju-product-details .wp-block-woocommerce-breadcrumbs,
.mandyju-single-product .mandyju-product-details .woocommerce-breadcrumb {
  color: var(--wp--preset--color--text-muted);
}
.mandyju-single-product .mandyju-product-details .wp-block-post-title {
  margin-top: .25rem;
}
.mandyju-single-product .mandyju-product-details .wp-block-woocommerce-product-rating,
.mandyju-single-product .mandyju-product-details .woocommerce-product-rating { margin-bottom: var(--wp--preset--spacing--20); }

/* Price prominence */
.mandyju-single-product .mandyju-product-details .wp-block-woocommerce-product-price,
.mandyju-single-product .mandyju-product-details .price {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  font-size: clamp(22px, 1.1rem + .6vw, 30px);
}

/* Add to cart form styling (simple + variable) */
.mandyju-single-product .mandyju-product-details form.cart { display: grid; gap: var(--wp--preset--spacing--20); align-items: center; }
.mandyju-single-product .variations_form table.variations { width: 100%; border-collapse: collapse; }
.mandyju-single-product .variations_form td,
.mandyju-single-product .variations_form th { padding: .4rem 0; border: 0; }
.mandyju-single-product .variations_form .value select {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--mj-card-border);
  border-radius: 8px;
  background: #fff;
}
.mandyju-single-product .single_variation .price { font-size: 1.1em; color: var(--wp--preset--color--primary); font-weight: 700; }
.mandyju-single-product .single_variation .woocommerce-variation-description { color: var(--wp--preset--color--text-muted); font-size: .95rem; }

/* Quantity + button row */
.mandyju-single-product .quantity .qty {
  width: 110px;
  padding: .65rem .75rem;
  border: 1px solid var(--mj-card-border);
  border-radius: 8px;
  background: #fff;
}
.mandyju-single-product .single_add_to_cart_button,
.mandyju-related-product-card .wp-block-woocommerce-product-button .wp-block-button__link,
.mandyju-related-product-card .wp-block-woocommerce-product-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.2rem;
  border-radius: 10px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.mandyju-single-product .single_add_to_cart_button:hover { background: var(--wp--preset--color--primary-hover, #b48b48); }

/* Meta rows (Category, Tags, SKU) - Enhanced for modern design */
.mandyju-single-product .mandyju-product-details .wp-block-group > .wp-block-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.mandyju-single-product .mandyju-product-details .wp-block-group p { margin: 0; }
.mandyju-single-product .mandyju-product-details .wp-block-post-terms a { color: var(--wp--preset--color--primary); text-decoration: none; }
.mandyju-single-product .mandyju-product-details .wp-block-post-terms a:hover { text-decoration: underline; }

/* Enhanced meta for modern product pages */
.mandyju-single-product-modern .mandyju-product-meta-enhanced .wp-block-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.mandyju-single-product-modern .mandyju-product-meta-enhanced .wp-block-group p { margin: 0; }
.mandyju-single-product-modern .mandyju-product-meta-enhanced .wp-block-post-terms a { color: var(--wp--preset--color--primary); text-decoration: none; transition: color 0.2s ease; }
.mandyju-single-product-modern .mandyju-product-meta-enhanced .wp-block-post-terms a:hover { color: var(--wp--preset--color--primary-hover); text-decoration: underline; }

/* Share icons - Legacy support */
.mandyju-product-share { display: flex; gap: .5rem; }
.mandyju-product-share .wp-social-link a { width: 40px; height: 40px; border-radius: 999px; display:flex; align-items:center; justify-content:center; background: var(--wp--preset--color--background-base); color: var(--wp--preset--color--contrast); }
.mandyju-product-share .wp-social-link a:hover { background: var(--wp--preset--color--primary); color: #fff; }

/* Tabs styling */
.mandyju-product-tabs .woocommerce-tabs .wc-tabs,
.mandyju-product-tabs .wc-tabs,
.mandyju-product-tabs .components-tab-panel__tabs { display:flex; gap: 1rem; border-bottom: 1px solid var(--mj-card-border); margin-bottom: 1rem; }
.mandyju-product-tabs .woocommerce-tabs .wc-tabs li a,
.mandyju-product-tabs .wc-tabs li a,
.mandyju-product-tabs .components-tab-panel__tabs button {
  display: inline-flex;
  gap: .5rem;
  padding: .75rem 0;
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
  font-weight: 700;
  border-bottom: 2px solid transparent;
}
.mandyju-product-tabs .woocommerce-tabs .wc-tabs li.active a,
.mandyju-product-tabs .wc-tabs li a:focus,
.mandyju-product-tabs .wc-tabs li a:hover,
.mandyju-product-tabs .components-tab-panel__tabs button[aria-selected="true"] { color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); }
.mandyju-product-tabs .woocommerce-Tabs-panel { padding-top: .5rem; }
.mandyju-product-tabs p { line-height: 1.8; }

/* Related products: card hover polish */
.mandyju-related-products .mandyju-related-product-card { border: 1px solid var(--mj-card-border); box-shadow: 0 8px 26px -12px rgba(0,0,0,.15); }
.mandyju-related-products .mandyju-related-product-card:hover { transform: translateY(-2px); transition: transform .2s ease; }
.mandyju-related-products .wp-block-woocommerce-product-price { color: var(--wp--preset--color--primary); }

/* 6. Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--mj-radius-sm);
  padding: .9rem 1rem;
  border: 1px solid var(--mj-color-border);
  background: var(--mj-color-bg-alt);
  font-size: .9rem;
}
.woocommerce-error { border-color: #d33; }
.woocommerce-message { border-color: var(--mj-color-primary); }

/* 7. Forms */
.wc-mj-form-row-inline { display:flex; flex-wrap:wrap; gap: var(--mj-gap-sm); }
.wc-mj-form-row-inline > * { flex:1 1 180px; }

/* 8. Mini cart count alignment (example) */
.wc-mj-cart-count-badge {
  display:inline-block;
  min-width:1.25em;
  padding:.25em .45em;
  background: var(--mj-color-attn);
  color:#fff;
  font-size:.65rem;
  line-height:1;
  border-radius: 999px;
  text-align:center;
  font-weight:600;
}

/* Loading states for enhanced functionality */
.single_add_to_cart_button.loading {
  position: relative;
  color: transparent !important;
}

.single_add_to_cart_button.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: mandyju-spin 1s linear infinite;
}

.single_add_to_cart_button.success {
  background: var(--wp--preset--color--state-success, #00d084) !important;
}

@keyframes mandyju-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Image loading states for gallery */
.woocommerce-product-gallery__image.loading {
  background: var(--wp--preset--color--background-base);
  position: relative;
}

.woocommerce-product-gallery__image.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 2px solid var(--wp--preset--color--border-subtle);
  border-top: 2px solid var(--wp--preset--color--primary);
  border-radius: 50%;
  animation: mandyju-spin 1s linear infinite;
}

/* Quantity button styling */
.quantity-btn {
  transition: all 0.2s ease;
}

.quantity-btn:hover {
  color: var(--wp--preset--color--primary) !important;
  transform: scale(1.1);
}

/* End overrides */