/* ─────────────────────────────────────────────────────────────────────────────
   fase3.css — ONA Dance Child Theme
   Single product page (single-product.php) — Patrón Tatiana Active
   ───────────────────────────────────────────────────────────────────────────── */

/* ── BREADCRUMB ── */
.ona-bc { padding: 14px 0; border-bottom: 1px solid var(--ona-gray-100); }
.ona-bc__list {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ona-gray-400);
  list-style: none;
  padding-left: 0;
}
.ona-bc__item a { color: var(--ona-gray-400); transition: color var(--t); }
.ona-bc__item a:hover { color: var(--ona-black); }
.ona-bc__sep { color: var(--ona-gray-200); }

/* ── PRODUCT LAYOUT: 2-col sticky ── */
.ona-prod-page { background: var(--ona-white); }
.ona-prod-page .ona-w { padding-bottom: 80px; }

.ona-prod-layout {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 0 56px;
  padding-top: 28px;
  align-items: start;
}

/* ── GALLERY (left, sticky) ── */
.ona-prod-gallery {
  position: sticky;
  top: calc(var(--ona-ann-h) + var(--ona-hdr-h) + 20px);
  display: flex;
  gap: 12px;
}

.ona-gal-thumbs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 68px;
}

.ona-gal-thumb {
  display: block;
  width: 68px;
  height: 90px;
  overflow: hidden;
  border: 1px solid var(--ona-gray-100);
  cursor: pointer;
  padding: 0;
  background: var(--ona-off);
  transition: border-color var(--t);
  flex-shrink: 0;
}
.ona-gal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ts);
}
.ona-gal-thumb:hover { border-color: var(--ona-gray-400); }
.ona-gal-thumb.is-active { border-color: var(--ona-black); }
.ona-gal-thumb.is-active img,
.ona-gal-thumb:hover img { transform: scale(1.04); }

.ona-gal-main {
  position: relative;
  flex: 1;
  background: var(--ona-off);
  overflow: hidden;
}
.ona-gal-main__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}
.ona-gal-main__img.is-loading { opacity: 0.45; }
.ona-gal-main__placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ona-gray-200);
}

.ona-gal-main__badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 4;
}
.ona-bdg {
  font-family: var(--f-ui);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: var(--ls-md);
  text-transform: uppercase;
  padding: 4px 9px;
  display: inline-block;
}
.ona-bdg--bk { background: #2A2A2A; color: var(--ona-white); }
.ona-bdg--gr  { background: var(--ona-green); color: var(--ona-white); }
.ona-bdg--sale {
  background: transparent;
  color: var(--ona-black);
  border: 1px solid var(--ona-black);
}


/* ── DETAILS (right) ── */
.ona-prod-details { padding-top: 4px; }

.ona-pd__cat {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ls-md);
  text-transform: uppercase;
  color: var(--ona-gray-400);
  margin-bottom: 12px;
  line-height: 1.6;
}
.ona-pd__cat a { color: var(--ona-gray-400); transition: color var(--t); }
.ona-pd__cat a:hover { color: var(--ona-black); }

.ona-pd__title {
  font-family: var(--f-ui);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ona-black);
  margin-bottom: 6px;
  line-height: 1.2;
}

.ona-pd__subtitle {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 300;
  color: var(--ona-gray-400);
  margin-bottom: 14px;
}

.ona-pd__price {
  font-size: 22px;
  font-weight: 300;
  color: var(--ona-black);
  margin-bottom: 14px;
  line-height: 1;
}
.ona-pd__price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }
.ona-pd__price del { font-size: 16px; color: var(--ona-gray-200); margin-right: 6px; }
.ona-pd__price ins { text-decoration: none; color: var(--ona-black); }

.ona-pd__eco {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: var(--ls-sm);
  text-transform: uppercase;
  color: var(--ona-green);
  margin-bottom: 18px;
}

.ona-pd__divider {
  border: none;
  border-top: 1px solid var(--ona-gray-100);
  margin: 18px 0;
}

/* ── WOOCOMMERCE FORM OVERRIDES ── */
.ona-pd__form .variations { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.ona-pd__form .variations td,
.ona-pd__form .variations th { padding: 0; border: none; }
.ona-pd__form .variations label {
  font-family: var(--f-ui);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: var(--ls-md);
  text-transform: uppercase;
  color: var(--ona-gray-400);
  display: block;
  margin-bottom: 8px;
}
.ona-pd__form .variations select {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 300;
  border: 1px solid var(--ona-gray-100);
  padding: 10px 12px;
  background: var(--ona-white);
  color: var(--ona-black);
  outline: 0;
  width: 100%;
  cursor: pointer;
  transition: border-color var(--t);
  margin-bottom: 12px;
  -webkit-appearance: none;
  appearance: none;
}
.ona-pd__form .variations select:focus { border-color: var(--ona-black); }

.ona-pd__form .quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--ona-gray-100);
  width: fit-content;
  margin-bottom: 14px;
}
.ona-pd__form .quantity .qty {
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 300;
  width: 52px;
  text-align: center;
  border: none;
  outline: 0;
  padding: 10px 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ona-pd__form .quantity .qty::-webkit-inner-spin-button,
.ona-pd__form .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.ona-pd__form .quantity .minus,
.ona-pd__form .quantity .plus {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  color: var(--ona-gray-400);
  cursor: pointer;
  user-select: none;
  transition: color var(--t);
  background: transparent;
  border: none;
  font-family: var(--f-ui);
}
.ona-pd__form .quantity .minus:hover,
.ona-pd__form .quantity .plus:hover { color: var(--ona-black); }

.ona-pd__form .single_add_to_cart_button,
.ona-pd__form button.button {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--ona-black);
  color: var(--ona-white);
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ls-md);
  text-transform: uppercase;
  border: 1px solid var(--ona-black);
  cursor: pointer;
  transition: all var(--t);
  margin-top: 6px;
}
.ona-pd__form .single_add_to_cart_button:hover,
.ona-pd__form button.button:hover {
  background: transparent;
  color: var(--ona-black);
}
.ona-pd__form .single_add_to_cart_button.loading,
.ona-pd__form .single_add_to_cart_button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ona-pd__form .woocommerce-variation-add-to-cart { display: flex; flex-direction: column; gap: 0; }
.ona-pd__form .reset_variations {
  font-size: 10px;
  color: var(--ona-gray-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-top: 8px;
  text-align: left;
  transition: color var(--t);
}
.ona-pd__form .reset_variations:hover { color: var(--ona-black); }
.ona-pd__form .woocommerce-variation-description p {
  font-size: 12px;
  color: var(--ona-gray-600);
  margin-bottom: 10px;
  line-height: 1.6;
}

/* ── GUARANTEES STRIP ── */
.ona-pd__guarantees {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 0;
  margin-top: 4px;
  border-top: 1px solid var(--ona-gray-100);
  border-bottom: 1px solid var(--ona-gray-100);
}
.ona-guarantee {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: var(--ls-sm);
  text-transform: uppercase;
  color: var(--ona-gray-400);
}
.ona-guarantee svg { flex-shrink: 0; color: var(--ona-gray-400); }

/* ── ACCORDIONS ── */
.ona-desc-wrap { margin-top: 18px; }
.ona-desc { border-bottom: 1px solid var(--ona-gray-100); }
.ona-desc__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ls-md);
  text-transform: uppercase;
  color: var(--ona-black);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.ona-desc__icon { transition: transform var(--t); flex-shrink: 0; }
.ona-desc.is-open .ona-desc__icon { transform: rotate(45deg); }
.ona-desc__body {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ona-gray-600);
  padding-bottom: 18px;
}
.ona-desc__body p { margin-bottom: 10px; }
.ona-desc__body p:last-child { margin-bottom: 0; }
.ona-desc__body ul { margin: 8px 0 8px 18px; list-style: disc; }
.ona-desc__body li { margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════════
   COLLECTION PAGE (shop / archive)
═══════════════════════════════════════════════════════════════ */

/* ── BREADCRUMB ── */
.ona-breadcrumb{padding:14px 0;border-bottom:1px solid var(--ona-gray-100);margin-bottom:28px}
.ona-breadcrumb-inner{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ona-gray-400);list-style:none;padding-left:0}
.ona-breadcrumb-inner a{color:var(--ona-gray-400);transition:color var(--t)}
.ona-breadcrumb-inner a:hover{color:var(--ona-black)}

/* ── COLLECTION HEADER ── */
.ona-coll-header{margin-bottom:28px}
.ona-coll-title{font-family:var(--f-ui);font-size:clamp(20px,2.5vw,28px);font-weight:300;letter-spacing:.05em;text-transform:uppercase;margin:0 0 6px;color:var(--ona-black)}
.ona-coll-claim{font-family:var(--f-serif);font-style:italic;font-size:14px;font-weight:300;color:var(--ona-gray-400);margin:0}

/* ── FILTER BAR ── */
.ona-filter-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.ona-filter-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--ona-gray-100)}
.ona-ftab{font-family:var(--f-ui);font-size:9px;font-weight:400;letter-spacing:var(--ls-md);text-transform:uppercase;color:var(--ona-gray-400);padding:10px 16px;border-bottom:1px solid transparent;margin-bottom:-1px;transition:all var(--t);text-decoration:none;white-space:nowrap}
.ona-ftab:hover{color:var(--ona-black)}
.ona-ftab.is-active{color:var(--ona-black);border-bottom-color:var(--ona-black)}
.ona-filter-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.ona-result-count{font-size:11px;color:var(--ona-gray-400);white-space:nowrap}
.ona-sort-sel{font-family:var(--f-ui);font-size:10px;font-weight:300;border:1px solid var(--ona-gray-100);padding:6px 10px;color:var(--ona-black);background:var(--ona-white);cursor:pointer;outline:0;border-radius:0}
.ona-sort-sel:focus{border-color:var(--ona-black)}

/* ── PRODUCT GRID ── */
.ona-collection ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;list-style:none;margin:0;padding:0;background:var(--ona-gray-100)}
.ona-collection ul.products li.product{margin:0;padding:0;list-style:none;background:var(--ona-white);width:auto;float:none;clear:none}
.ona-collection ul.products li.product .onsale{display:none}

/* ── PAGINATION ── */
.ona-pagination{padding:40px 0}
.ona-pagination ul{display:flex;justify-content:center;gap:4px;list-style:none;padding:0;margin:0}
.ona-pagination li a,.ona-pagination li span{display:block;padding:8px 14px;font-size:11px;color:var(--ona-gray-400);border:1px solid var(--ona-gray-100);transition:all var(--t);text-decoration:none;font-family:var(--f-ui)}
.ona-pagination li a:hover{color:var(--ona-black);border-color:var(--ona-black)}
.ona-pagination li span.current{color:var(--ona-black);border-color:var(--ona-black);background:var(--ona-off)}

/* ── EMPTY STATE ── */
.ona-empty{text-align:center;padding:60px 24px}
.ona-empty p{font-size:13px;color:var(--ona-gray-600);margin-bottom:20px}

/* ── COLLECTION RESPONSIVE ── */
@media (max-width:900px){
  .ona-collection ul.products{grid-template-columns:repeat(2,1fr)}
  .ona-filter-bar{flex-direction:column;align-items:stretch}
  .ona-filter-right{justify-content:space-between}
}
@media (max-width:480px){
  .ona-collection ul.products{grid-template-columns:repeat(2,1fr)}
}

/* ── RESPONSIVE (single product) ── */
@media (max-width: 1024px) {
  .ona-prod-layout { grid-template-columns: 1fr 1fr; gap: 0 32px; }
}

@media (max-width: 768px) {
  .ona-prod-layout {
    grid-template-columns: 1fr;
    gap: 28px 0;
    padding-top: 20px;
  }
  .ona-prod-gallery {
    position: static;
    flex-direction: column-reverse;
  }
  .ona-gal-thumbs {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 6px;
  }
  .ona-gal-thumbs::-webkit-scrollbar { display: none; }
  .ona-gal-thumb { width: 56px; height: 74px; flex-shrink: 0; }
  .ona-gal-main__img { aspect-ratio: 4 / 5; }
  .ona-pd__guarantees { gap: 14px; }
}

@media (max-width: 480px) {
  .ona-prod-page .ona-w { padding-bottom: 56px; }
  .ona-pd__title { font-size: 20px; }
  .ona-gal-thumb { width: 48px; height: 64px; }
}

/* ── RELATED PRODUCTS ── */
.ona-related-wrap {
  border-top: 1px solid var(--ona-gray-100);
}
section.related.products {
  padding: 48px 0 24px;
}
section.related.products h2 {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: var(--ls-md);
  text-transform: uppercase;
  color: var(--ona-black);
  margin-bottom: 24px;
}
section.related.products ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--ona-gray-100);
}
section.related.products ul.products li.product {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--ona-white);
  width: auto;
  float: none;
  clear: none;
}

.ona-related-cta {
  text-align: center;
  padding-bottom: 48px;
}

@media (max-width: 900px) {
  section.related.products ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  section.related.products ul.products { grid-template-columns: repeat(2, 1fr); }
}