/* ==========================================================================
   Bilbao — WooCommerce (arquivo + card + produto único)
   Ref. Figma: Produtos (4134:291) e Interna produto (4306:379)
   ========================================================================== */

.wc-page { padding-block: 40px 96px; }

/* --- Breadcrumb --- */
.wc-breadcrumb,
.woocommerce-breadcrumb {
  font: var(--t-body-xs);
  color: var(--c-neutral-700);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.wc-breadcrumb a,
.woocommerce-breadcrumb a { color: var(--c-neutral-700); }
.wc-breadcrumb__sep { margin: 0 8px; color: var(--c-neutral-100); }

/* --- Cabeçalho da categoria --- */
.shop-head { margin-bottom: 28px; }
.shop-head__title {
  font-size: 28px;
  letter-spacing: 0.28em;
  color: var(--c-neutral-900);
  margin-bottom: 12px;
}
.shop-head__desc { color: var(--c-neutral-700); max-width: 520px; line-height: 1.6; }

/* --- Toolbar (ordenar + filtros de subcategoria + contagem) --- */
.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 40px;
}
.shop-toolbar__pills {
  display: flex;
  gap: 12px;
  flex: 1 1 auto;
  justify-content: center;
  flex-wrap: wrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  font: var(--t-label-md);
  letter-spacing: var(--ls-nav);
  text-transform: capitalize;
  color: var(--c-neutral-900);
}
.pill.is-active,
.pill:hover { background: var(--c-brand-900); border-color: var(--c-brand-900); color: #fff; opacity: 1; }
.shop-toolbar__count { font: var(--t-body-xs); color: var(--c-neutral-700); white-space: nowrap; }
.shop-toolbar__count .woocommerce-result-count { margin: 0; }

/* Select de ordenação estilizado como pill */
.shop-toolbar__order select,
.woocommerce-ordering select {
  appearance: none;
  padding: 10px 36px 10px 16px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232a2a2a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  font: var(--t-label-md);
  letter-spacing: var(--ls-nav);
  cursor: pointer;
}

/* ==========================================================================
   Grid + Card de produto
   ========================================================================== */
ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  margin: 0;
  list-style: none;
}
ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
/* (.product-card* fica em base.css — compartilhado com a home) */

/* Banner de alfaiataria injetado no grid (após a 1ª linha) */
ul.products .shop-inline-banner {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: #1c1c1c;
  color: #fff;
  overflow: hidden;
  margin: 16px 0;
  list-style: none;
}
.shop-inline-banner__text {
  padding: 48px clamp(24px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.shop-inline-banner__kicker { color: rgba(255, 255, 255, 0.65); }
.shop-inline-banner__title { font: var(--t-title-lg); font-size: 26px; max-width: 22ch; }
.shop-inline-banner__media { height: 280px; min-height: 0; }
@media (max-width: 700px) {
  ul.products .shop-inline-banner { grid-template-columns: 1fr; }
  .shop-inline-banner__media { height: 200px; }
}

/* ==========================================================================
   Produto único
   ========================================================================== */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 64px;
  align-items: start;
}
/* Coluna direita sticky: fica fixa enquanto a galeria rola. */
.single-product .summary.entry-summary {
  position: sticky;
  top: 100px;
  align-self: start;
}

/* Galeria em mosaico (sem slider) */
.woocommerce-product-gallery { margin: 0; }
.woocommerce-product-gallery__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
.woocommerce-product-gallery__image { margin: 0; }
.woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; }
.woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; }
.woocommerce-product-gallery__trigger { display: none; }

/* Resumo */
.single-product .summary.entry-summary { margin: 0; }
.product-brand {
  display: block;
  font: var(--t-label-sm-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-neutral-500);
  margin-bottom: 10px;
}
.single-product .product_title {
  font: var(--t-title-lg);
  font-size: 26px;
  color: var(--c-neutral-900);
  margin-bottom: 12px;
}
.single-product .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.single-product .woocommerce-product-rating__count { color: var(--c-neutral-700); font-size: 13px; }
.single-product p.price,
.single-product .price {
  font: var(--t-title-sm);
  color: var(--c-neutral-900);
  margin-bottom: 4px;
}
.single-product .price del { color: var(--c-neutral-500); font-weight: 400; font-size: 15px; margin-right: 8px; }
.single-product .price ins { text-decoration: none; }
.product-installments { font: var(--t-body-xs); color: var(--c-neutral-700); margin-bottom: 24px; }
.single-product .woocommerce-product-details__short-description { color: var(--c-neutral-700); margin-bottom: 24px; border-top: 1px solid var(--c-border); padding-top: 24px; }

/* Formulário de variações */
.variations_form .variations { width: 100%; margin-bottom: 20px; border-top: 1px solid var(--c-border); padding-top: 24px; }
.variations_form .variations tr { display: block; margin-bottom: 20px; }
.variations_form .variations th.label {
  display: block;
  text-align: left;
  font: var(--t-body-sm);
  color: var(--c-neutral-700);
  margin-bottom: 10px;
  font-weight: 400;
}
.variations_form .reset_variations { font: var(--t-body-xs); color: var(--c-accent); margin-left: 8px; }

/* Selects escondidos após virarem swatches */
.bilbao-hidden-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Swatches */
.bilbao-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--c-neutral-100);
  border-radius: 4px;
  background: #fff;
  font: var(--t-label-md);
  letter-spacing: var(--ls-nav);
  color: var(--c-neutral-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.swatch:hover { border-color: var(--c-brand-900); }
.swatch.is-active { background: var(--c-brand-900); border-color: var(--c-brand-900); color: #fff; }
.swatch.is-disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.bilbao-swatches--color .swatch { text-transform: capitalize; }

/* Guia de tamanhos */
.product-size-guide { display: inline-block; font: var(--t-body-sm); text-decoration: underline; color: var(--c-neutral-700); margin-bottom: 24px; }

/* Botão adicionar */
.single-product .single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-brand-900);
  color: #fff;
  border-radius: 4px;
  padding: 18px 40px;
  font: var(--t-label-md-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: background var(--ease);
}
.single-product .single_add_to_cart_button { width: 100%; }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.single-product .single_add_to_cart_button:hover { background: #3f2016; opacity: 1; }

.single-product .quantity { margin-bottom: 16px; }
.single-product form.cart { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }

/* Botões genéricos */
.woocommerce .button {
  background: #fff;
  color: var(--c-neutral-900);
  border: 1px solid var(--c-neutral-900);
  border-radius: 4px;
  padding: 12px 24px;
  font: var(--t-label-md);
  letter-spacing: var(--ls-nav);
}

/* Abas (dentro da coluna de resumo, à direita) */
.single-product .summary .woocommerce-tabs { margin-top: 32px; border-top: 1px solid var(--c-border); padding-top: 24px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 24px; margin: 0 0 18px; padding: 0; list-style: none; border: 0; }
.woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; }
.woocommerce-tabs ul.tabs li a {
  padding: 0 0 6px; font: var(--t-label-md); letter-spacing: var(--ls-nav);
  text-transform: capitalize; color: var(--c-neutral-500); border-bottom: 1px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--c-neutral-900); border-bottom-color: var(--c-neutral-900); }
.woocommerce-tabs .panel { font: var(--t-body-sm); color: var(--c-neutral-700); line-height: 1.7; margin: 0; }
.woocommerce-tabs .panel h2 { display: none; }

/* Relacionados / avaliações */
.related.products,
.up-sells { margin-top: 80px; }
.related.products > h2,
.up-sells > h2,
.related-head > h2 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 18px;
  color: var(--c-neutral-700);
  margin: 0;
}
/* Cabeçalho com nav à direita (injetado via JS) */
.related-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.related-nav { display: flex; gap: 12px; }

/* Grid vira carrossel horizontal */
.related.products ul.products {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, calc((100% - 72px) / 4));
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.related.products ul.products::-webkit-scrollbar { display: none; }
.related.products ul.products > li { scroll-snap-align: start; }
@media (max-width: 700px) {
  .related.products ul.products { grid-auto-columns: minmax(200px, 60%); }
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: 3px solid var(--c-brand-900);
  background: var(--c-brand-300);
  padding: 16px 20px;
  font: var(--t-body-sm);
  list-style: none;
  margin-bottom: 24px;
}

/* Paginação */
.woocommerce-pagination { margin-top: 56px; text-align: center; }
.woocommerce-pagination ul { display: inline-flex; gap: 8px; border: 0 !important; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
}
.woocommerce-pagination ul li span.current { background: var(--c-brand-900); color: #fff; border-color: var(--c-brand-900); }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1024px) {
  ul.products { grid-template-columns: repeat(3, 1fr); }
  .single-product div.product { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
  ul.products { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .shop-toolbar { flex-wrap: wrap; }
  .shop-toolbar__pills { order: 3; width: 100%; justify-content: flex-start; }
}
