/* 
 Theme Name:   Erica Prints
 Theme URI:    
 Description:  Started using it for taxonomy edits
 Author:       sekmedia21@gmail.com
 Author URI:   https://ericaprints.com
 Template:     kadence
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================
   EricaPrints – Shared term index grid
   (Subjects, Artists, Styles)
   ============================================ */

/* 2 columns on mobile, 4 on desktop */
ul.products.ep-tax-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

@media (min-width: 768px) {
  ul.products.ep-tax-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Legacy support: if ep-artists-grid is used anywhere, keep same behavior */
ul.products.ep-artists-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

@media (min-width: 768px) {
  ul.products.ep-artists-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Remove bullets & padding on Subjects / Artists / Styles grids */
body.page-template-page-subjects ul.products.ep-tax-grid,
body.page-template-page-artists  ul.products.ep-tax-grid,
body.page-template-page-styles   ul.products.ep-tax-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.page-template-page-subjects ul.products.ep-tax-grid > li,
body.page-template-page-artists  ul.products.ep-tax-grid > li,
body.page-template-page-styles   ul.products.ep-tax-grid > li {
  list-style: none;
}

/* Remove underline on tile links */
body.page-template-page-subjects ul.products.ep-tax-grid a,
body.page-template-page-artists  ul.products.ep-tax-grid a,
body.page-template-page-styles   ul.products.ep-tax-grid a {
  text-decoration: none;
}

/* Match product title font on term index tiles */
body.page-template-page-subjects ul.products.ep-tax-grid li.product-category .woocommerce-loop-product__title,
body.page-template-page-subjects ul.products.ep-tax-grid li.product-category .woocommerce-loop-category__title,
body.page-template-page-artists  ul.products.ep-tax-grid li.product-category .woocommerce-loop-product__title,
body.page-template-page-artists  ul.products.ep-tax-grid li.product-category .woocommerce-loop-category__title,
body.page-template-page-styles   ul.products.ep-tax-grid li.product-category .woocommerce-loop-product__title,
body.page-template-page-styles   ul.products.ep-tax-grid li.product-category .woocommerce-loop-category__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
}

/* ============================================
   Universal square crop for taxonomy tiles
   (Subjects, Styles, Artists + Subject children slider)
   ============================================ */

/* Zoomed square thumbnails for parent tiles AND subcategory slider tiles */
ul.products.ep-tax-grid li.product-category a img,
.ep-subject-slider ul.products li.product-category img {
  width: 100%;
  aspect-ratio: 1 / 1;      /* square */
  object-fit: cover;        /* fill + crop */
  object-position: center;  /* crop from middle */
  display: block;
  transform: scale(1.35);   /* zoom in a bit */
  transform-origin: center;
}

/* Make sure zoomed image doesn’t overflow the card */
ul.products.ep-tax-grid li.product-category,
.ep-subject-slider ul.products li.product-category {
  overflow: hidden;
}

/* ============================================
   Subject archive – hide default subcategory grid
   but keep our child-subject slider tiles visible
   ============================================ */

body.tax-subject ul.products li.product-category {
  display: none;
}

body.tax-subject section.ep-subject-slider ul.products li.product-category {
  display: flex;
  flex-direction: column;
}

/* ============================================
   Product Page – Price size and weight
   ============================================ */

.woocommerce div.product span.price,
.woocommerce div.product p.price {
  font-size: 1.4em;
  font-weight: 700;   /* bold */
}

/* ============================================
   Styles index – ensure product details are visible
   ============================================ */

body.page-template-page-styles ul.products.ep-tax-grid .product-details {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
}

/* ============================================
   Reduce vertical spacing between elements in the product info column
   ============================================ */

.single-product .wp-block-kadence-column > .kt-inside-inner-col {
  row-gap: 14px;
}

/* ============================================
   Product Page - PRODUCT VARIATIONS – NEW LAYOUT
   ============================================ */

/* Scope only to single product pages */
.single-product .kwt-add-to-cart-wrap table.variations {
  width: 100%;
  border: 0;
  border-collapse: separate;
  border-spacing: 0 18px;
}

/* Each attribute row as its own block */
.single-product .kwt-add-to-cart-wrap table.variations tr {
  display: block;
}

/* Put label on top, options underneath */
.single-product .kwt-add-to-cart-wrap table.variations th.label,
.single-product .kwt-add-to-cart-wrap table.variations td.value {
  display: block;
  padding: 0;
}

/* Attribute titles: “Product Type”, “Image Size”, “Frame Finish” */
.single-product .kwt-add-to-cart-wrap table.variations th.label label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 18px;
}

/* Hide the default select dropdowns, we use the radio UI */
.single-product .kwt-add-to-cart-wrap .kt-radio-variation-container select.kt-no-select2 {
  display: none !important;
}

/* Base styling for all radio variation groups */
.single-product .kwt-add-to-cart-wrap fieldset.kad_radio_variations {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Hide native radios – labels act as the buttons */
.single-product .kwt-add-to-cart-wrap fieldset.kad_radio_variations input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Base style for option “buttons” (pills) */
.single-product .kwt-add-to-cart-wrap fieldset.kad_radio_variations label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #d4d4d4;
  background-color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1.3;
}

/* Hover */
.single-product .kwt-add-to-cart-wrap fieldset.kad_radio_variations label:hover {
  border-color: #111111;
}

/* Selected option (Kadence adds .selectedValue to active label) */
.single-product .kwt-add-to-cart-wrap fieldset.kad_radio_variations label.selectedValue {
  border-color: #111111;
  box-shadow: 0 0 0 1px #111111;
}

/* ---------- SIZE “PILLS” (text) ---------- */

.single-product .kwt-add-to-cart-wrap fieldset#pa_size.kad_radio_variations label {
  min-width: 90px;
  text-align: center;
  padding: 10px 14px;
}

/* ============================================
   IMAGE SWATCHES – PRODUCT TYPE & FRAME FINISH
   ============================================ */

/* ------- FRAME FINISH (pa_color) – square tiles ------- */

.single-product .kwt-add-to-cart-wrap
fieldset#pa_color.kad_radio_variations.kt-image-color-sw label {
  padding: 0;
  width: 75px;
  height: 75px;
}

.single-product .kwt-add-to-cart-wrap
fieldset#pa_color.kad_radio_variations.kt-image-color-sw span.kt_color_sw_span {
display: block; width: 100% !important; height: 100% !important;}

.single-product .kwt-add-to-cart-wrap
fieldset#pa_color.kad_radio_variations.kt-image-color-sw img.kt-sw-img {
display: block; width: 100% !important; height: 100% !important; object-fit: cover;
}

.single-product .kwt-add-to-cart-wrap
fieldset#pa_color.kad_radio_variations.kt-image-color-sw label.selectedValue {
  box-shadow: 0 0 0 2px #111111;
}

.single-product .kwt-add-to-cart-wrap
fieldset#pa_color.kad_radio_variations.kt-image-color-sw label {
  font-size: 0;
}

/* ------- PRODUCT TYPE (pa_product-type) – taller icons ------- */

.single-product .kwt-add-to-cart-wrap
fieldset#pa_product-type.kad_radio_variations.kt-image-color-sw label {
  padding: 6px 8px;
  width: 90px;
  min-height: 70px;
  border-radius: 4px;
  overflow: visible;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.single-product .kwt-add-to-cart-wrap
fieldset#pa_product-type.kad_radio_variations.kt-image-color-sw span.kt_color_sw_span {
  display: block;
  width: 70px !important;
  height: 70px !important;
}

.single-product .kwt-add-to-cart-wrap
fieldset#pa_product-type.kad_radio_variations.kt-image-color-sw img.kt-sw-img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background-color: #ffffff;
}

.single-product .kwt-add-to-cart-wrap
fieldset#pa_product-type.kad_radio_variations.kt-image-color-sw label.selectedValue {
  box-shadow: 0 0 0 2px #111111;
}

.single-product .kwt-add-to-cart-wrap
fieldset#pa_product-type.kad_radio_variations.kt-image-color-sw label {
  font-size: 0;
}

/* ------- Mobile tweaks for swatches ------- */
@media (max-width: 480px) {
  .single-product .kwt-add-to-cart-wrap
  fieldset#pa_color.kad_radio_variations.kt-image-color-sw label {
    width: 64px;
    height: 64px;
  }

  .single-product .kwt-add-to-cart-wrap
  fieldset#pa_product-type.kad_radio_variations.kt-image-color-sw label {
    width: 80px;
    min-height: 70px;
  }
}

.single-product .kwt-add-to-cart-wrap
fieldset#pa_product-type.kad_radio_variations.kt-image-color-sw {
  gap: 8px 20px; /* row-gap = 8px, column-gap = 20px */
}

/* Hide price + Add to cart inside variation block on mobile */
@media (max-width: 767px) {
  .single-product .single_variation_wrap .woocommerce-variation-price,
  .single-product .single_variation_wrap .woocommerce-variation-add-to-cart {
    display: none !important;
  }
}

/* ============================================
   Product gallery – base image sizing
   ============================================ */

.single-product .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   Gallery Flicker Fix
   ============================================ */

.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  transition: opacity 0.2s ease-in-out;
  opacity: 1;
}

.woocommerce-product-gallery.ep-rebuilding .woocommerce-product-gallery__wrapper {
  opacity: 0 !important;
}

.single-product .woocommerce-product-gallery {
  opacity: 0;
  transition: none;
}

.single-product .woocommerce-product-gallery.ep-gallery-ready {
  opacity: 1;
  transition: none;
}
/* Only fade during rebuilds (variation changes) */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  transition: opacity 0.2s ease-in-out;
  opacity: 1;
}

.woocommerce-product-gallery.ep-rebuilding .woocommerce-product-gallery__wrapper {
  opacity: 0;
}
/* ============================================
   Product Gallery – fixed height (from JS) + bottom aligned slides
   ============================================ */

/* Wrapper & slides take the full viewport height that Woo/FlexSlider sets.
   (JS sets smoothHeight = false so the viewport height stays constant.) */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  height: 100%;
}

/* Bottom-align slide content */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;  /* push image to bottom */
  align-items: center;
  position: relative;
}

/* Link fills width, does not stretch vertically */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image > a {
  width: 100%;
  display: block;
  height: auto !important;
}


/* ============================================
   WooCommerce PhotoSwipe – don't block page after close
   ============================================ */

.pswp[aria-hidden="true"],
.pswp:not(.pswp--open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ============================================
   Product Selector - Finished size - Frame Finish
   ============================================ */
.ep-frame-caption,
.ep-size-caption {

  margin-top: 4px;
  font-size: 0.85em;
  font-weight: 400;
  color: #555;
}



/* ============================================
   Product Pade - Features layout  
 ============================================ */

.ep-features {
  margin-top: 1.5rem;
}

.ep-features > p:first-child {
  max-width: 56rem;
  margin-bottom: 2rem;
}

/* Each row: image left, text right */
.ep-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 2.5rem;
}

.ep-feature-image {
  flex: 0 0 42%;
}

.ep-feature-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.ep-feature-text {
  flex: 1;
}

.ep-feature-text h5 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.ep-feature-text p {
  margin: 0;
  line-height: 1.6;
  font-size: 1rem;
}

/* Mobile: stack image over text */
@media (max-width: 768px) {
  .ep-feature-row {
    flex-direction: column;
  }

  .ep-feature-image {
    flex: 0 0 auto;
  }
}


@media (min-width: 769px) {
  /* The panel wrapper adds its own display rules, override them */
  .single-product .wp-block-details .dr-panel .ep-feature-row {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .single-product .wp-block-details .dr-panel .ep-feature-image {
    flex: 0 0 42%;
  }

  .single-product .wp-block-details .dr-panel .ep-feature-text {
    flex: 1;
  }
}



/* ============================================
   Homepage - Featured Collection 
 ============================================ */
/* Grid layout stays the same */
.ep-featured-collections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch; /* make all items same height in each row */
}

@media (min-width: 768px) {
  .ep-featured-collections {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Make each card fill the row height */
.ep-featured-collections__item {
  height: 100%;
}

.ep-featured-collections__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Image container: fixed visual height, image anchored to bottom */
.ep-featured-collections__thumb {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;    /* align image to bottom of the thumb */
  justify-content: center;
  /* you can tweak this height; it controls how tall the canvases appear */
  min-height: 260px;
}

/* Image: fill container, crop from the TOP, keep bottom visible */
.ep-featured-collections__img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fill the whole box */
  object-position: bottom;  /* use the bottom part as reference */
  display: block;
}

/* Title: always under image, aligned */
.ep-featured-collections__title {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}


/* Fix frame finish swatches to prevent image stretching */
.single-product .kwt-add-to-cart-wrap fieldset#pa_color.kad_radio_variations.kt-image-color-sw label {
    box-sizing: content-box !important; /* Makes width 75px APPLY to the content, excludes border */
    width: 75px !important;
    height: 75px !important;
    padding: 0 !important;
    flex: 0 0 auto !important; /* Prevents flexbox from stretching the tile */
}