/* =============================================================
   sp-gallery.css — Galería + Lightbox single product
   Añadir a: yourtheme/assets/css/sp-gallery.css
   (y encolar en functions.php con wp_enqueue_style)
   ============================================================= */

/* ── Galería principal ─────────────────────────────────────── */
.sp-gallery {
    width: 100%;
    margin-bottom: 32px;
}

.sp-gallery__main {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    cursor: zoom-in;
    border-radius: 4px;
}

.sp-gallery__main--single {
    cursor: zoom-in;
}

.sp-gallery__main-img {
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
    display: block;
    transition: opacity .15s ease;
}

.sp-gallery__main-img.is-loading {
    opacity: .5;
}

/* Botones prev/next sobre la imagen */
/* Botones prev/next sobre la imagen */
.sp-gallery__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #321a0030;
    border: none;
    color: #f3f3f3;
    width: auto;
    height: auto;
    padding: 34px 8px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    z-index: 2;
    line-height: 1;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background .2s;
}
.sp-gallery__btn:hover { background: #321a0064; }
.sp-gallery__prev { left: 6px; }
.sp-gallery__next { right: 6px; }

/* Contador sobre la imagen */
.sp-gallery__counter {
    position: absolute;
    bottom: 12px;
    right: 14px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: .75rem;
    padding: 2px 8px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 2;
}

/* Thumbnails */
.sp-gallery__thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.sp-gallery__thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    transition: border-color .2s;
    flex-shrink: 0;
}
.sp-gallery__thumb:hover,
.sp-gallery__thumb.is-active {
    border-color: #007fad;
}
.sp-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ── Lightbox ──────────────────────────────────────────────── */
.sp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Oculto por defecto */
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.sp-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
}

.sp-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .9);
    cursor: zoom-out;
}

/* Imagen y contador */
.sp-lightbox__wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 92vw;
    max-height: 90vh;
}
.sp-lightbox__img {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    display: block;
    border-radius: 3px;
    transition: opacity .15s ease;
}
.sp-lightbox__img.is-loading { opacity: .3; }

.sp-lightbox__counter {
    margin-top: 10px;
    color: rgba(255, 255, 255, .65);
    font-size: .8rem;
}

/* Botón cerrar */
.sp-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, .15);
    border: none;
    color: #fff;
    padding: 12px 8px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 1000px!important;
    z-index: 2;
    transition: background .2s;
}
.sp-lightbox__close:hover { background: rgba(255, 255, 255, .3); }

/* Prev/Next del lightbox */
.sp-lightbox__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #321a0030;
    border: none;
    color: #f3f3f3;
    width: auto;
    height: auto;
    padding: 34px 8px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    z-index: 2;
    line-height: 1;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background .2s;
}
.sp-lightbox__btn:hover { background: #321a0064; }
.sp-lightbox__prev { left: 16px; }
.sp-lightbox__next { right: 16px; }

/* Ocultar prev/next si solo hay 1 imagen */
.sp-lightbox[data-total="1"] .sp-lightbox__btn { display: none; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sp-gallery__main-img { max-height: 300px; }
    .sp-gallery__thumb    { width: 56px; height: 56px; }
    .sp-lightbox__btn     { width: 36px; height: 36px; }
    .sp-lightbox__prev    { left: 6px; }
    .sp-lightbox__next    { right: 6px; }
}

/* ── Accesibilidad: reducir movimiento ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sp-gallery__main-img,
    .sp-lightbox,
    .sp-lightbox__img { transition: none; }
}



/* ── Layout 2 columnas ─────────────────────────────────────── */
.sp-layout {
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: 32px;
    align-items: start;
    margin-top: 32px;
}

.sp-layout__main {
    min-width: 0;
}

.sp-layout__sidebar {
    align-self: stretch;
}

/* FORMULARIO */

.sp-layout__sidebar-inner {
    position: sticky;
    top: 48px;
    background-color: #fff7ef!important;
    border: 1px solid #fa972d40 !important;
}

.sp-layout__sidebar-inner h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #545454;
}

.sp-layout__sidebar-inner p {
    font-size: .8rem;
    margin-bottom: -16px;
    color: #969696;
}

@media (max-width: 768px) {
    .sp-layout {
        grid-template-columns: 1fr;
    }
    .sp-layout__sidebar-inner {
        position: static;
    }
}





/* TITULO */
.single-product-title__container, .sp-layout__sidebar-inner {
    background-color: #f9f8f8;
    border: 1px solid #f7f3f3;
    border-radius: 8px;
    overflow: hidden;
    padding: 16px;
    margin-bottom: 32px;
}
.single-product-title__container h1 {
  font-weight: 500;
  color: #545454;
  font-size: 28px;
  margin-bottom: 4px;
}


/* PRECIO */
.single-product-price_container {
    font-weight: 500;
    font-size: 36px;
    display: flex;
    align-items: end;
    color: #222;
    margin-top: 4px;
}

.single-product-price_container p{
	margin-bottom:24px;
}

/* CUSTOM POST TYPE */
.single-product-info__container {
  display: flex;
  justify-content: flex-start;
  margin: 4px 0;
  flex-wrap: wrap;
  gap: 12px;
}
.cpt-element-style {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #969696;
  background: #ffffff;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #f7f3f3;
  font-size: 1rem;
}
.single-product-icon {
  display: flex;
  align-items: center;
}

/* PESTAÑAS CONTENIDO DESCRIPCION */
.wc-tabs {
    margin-bottom: 24px !important;
    border-bottom: 1px solid #fa972d !important;
}

ul.tabs.wc-tabs li {
    background-color: #f9f8f8 !important;
    border: 1px solid #f7f3f3 !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 0px 16px !important;
    position: relative;
}

ul.tabs.wc-tabs li.active {
    background-color: #fff7ef !important;
    border-color: #fa972d !important;
    border-bottom-color: #fff7ef !important; /* tapa el borde inferior */
    bottom: -1px; /* baja 1px para solapar el borde del ul */
}

ul.tabs.wc-tabs li a {
    color: #222 !important;
    text-decoration: none !important;
}

ul.tabs.wc-tabs li.active a {
    color: #fa972d !important;
}

ul.tabs.wc-tabs li:first-child {
    border-radius: 8px 0 0 0 !important;
}

ul.tabs.wc-tabs li:last-child {
    border-radius: 0 8px 0 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    border-bottom: unset!important;
}