/*
 * replica-product.css - product page (area D: product-page agent).
 *
 * Everything here is a port of the per-section inline <style> blocks of the live product pages
 * (raw/analysis/inline-styles-products_*.css). Generated section / block ids were replaced by stable ones:
 *   template--20781336395915__blocks_mPhwab            -> #shopify-section-product-countdown  (.ai-countdown-timer*)
 *   ai_gen_block_64f4596 (viewing count)               -> .ai-viewing-count*
 *   ai_gen_block_d961955 (info list / size chart)      -> .ai-product-info-list*, .ub-acc-*, .ub-sc*
 *   template--20781336395915__geowild_features_tNxY8N  -> #shopify-section-product-features (.gw-*)
 * The Horizon component CSS (media gallery, slideshow, zoom dialog, variant picker, buy buttons, sticky bar)
 * comes from base.css / styles.css and is reused through the live class names, nothing is redefined here.
 */

/* ===== countdown block (template--...__blocks_mPhwab, ai_gen_block_9324ed2) ===== */
.ai-countdown-timer {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 4px;
  background-color: #ffffff;
  border-radius: 8px;
  text-align: center;
  transform: scale(0.7);
  transform-origin: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
}

.ai-countdown-timer__heading {
  margin: 0 0 4px 0;
  color: #000000;
  font-size: 20px;
}

.ai-countdown-timer__subtext {
  margin: 0 0 6px 0;
  color: #666666;
  font-size: 12px;
}

.ai-countdown-timer__display {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-countdown-timer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}

.ai-countdown-timer__value {
  font-size: 32px;
  font-weight: 700;
  color: #000000;
  line-height: 1;
  margin-bottom: 8px;
  display: inline-block;
  min-width: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  background-color: #ffffff;
  will-change: contents;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ai-countdown-timer__label {
  font-size: 10px;
  color: #666666;
  text-transform: uppercase;
}

.ai-countdown-timer__expired {
  color: #999999;
  font-size: 20px;
}

@media screen and (max-width: 749px) {
  .ai-countdown-timer {
    transform-origin: center;
  }

  .ai-countdown-timer__display {
    justify-content: center;
  }
}

/* ===== main section: media fit (product-media-gallery-content-styles) ===== */
.media-fit-contain {
  --product-media-fit: contain;
}

/* Media fit for all media elements */
.media-fit-contain :is(img, video, iframe, .deferred-media__poster-image) {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* 3D Models (no object-fit support, just sizing) */
.media-fit-contain model-viewer {
  width: 100%;
  height: 100%;
}

/* Add background color so carousel arrows' mix-blend-mode works correctly even on transparent areas. */
.media-fit-contain :is(img, .deferred-media__poster-image) {
  background-color: var(--color-background);
}

::view-transition-old(gallery-item-open),
::view-transition-new(gallery-item-open),
::view-transition-old(gallery-item-close),
::view-transition-new(gallery-item-close) {
  height: auto;
  width: 100%;
  object-fit: contain;
  top: 50%;
  transform: translateY(-50%);
}

:root { --gallery-media-border-radius: 0px; }

/* ===== main section: review summary widget (custom liquid block custom_liquid_K6CL3d) ===== */
/* Container principal */
.review-summary-widget {
  display: inline-flex;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1b1b1b;
  line-height: 1;
}

/* Container das estrelas */
.summary-stars-container {
  display: flex;
  gap: 2px;
  margin-right: 10px;
}

/* O quadrado verde (18px) */
.summary-star-box {
  background-color: #05B67A;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

/* O icone da estrela (11px) */
.summary-star-box svg {
  fill: white;
  width: 11px;
  height: 11px;
}

/* Texto "4.87" */
.rating-score {
  font-weight: 700;
  font-size: 15px;
  color: #333;
}

/* Separador "|" */
.summary-separator {
  margin: 0 8px;
  color: #ccc;
  font-weight: 300;
  font-size: 15px;
}

/* Texto "247" */
.review-count {
  font-weight: 400;
  color: #333;
  font-size: 15px;
}

/* ===== main section: viewing count (ai_gen_block_64f4596) ===== */
.ai-viewing-count {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0px 0px;
}

.ai-viewing-count-text {
  font-size: 13px;
  font-weight: 500;
  background: linear-gradient(to right, #116cc1, #d91a1a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  text-align: left;
}

/* ===== main section: tagline + gender switch (snippets/ub-on-hero.liquid) ===== */
.ub-hero{margin:14px 0 4px}
.ub-hero__tag{margin:0 0 18px;font-size:1rem;line-height:1.5;color:inherit;opacity:.82;max-width:46ch}
.ub-hero__gen{display:inline-flex;align-items:stretch;border-radius:999px;
  background:rgba(128,128,128,.13);padding:3px;gap:2px}
.ub-hero__gen-b{display:inline-flex;align-items:center;justify-content:center;
  min-width:104px;padding:9px 20px;border-radius:999px;font-size:.92rem;font-weight:600;
  text-decoration:none;color:inherit;white-space:nowrap;transition:background .18s ease}
a.ub-hero__gen-b:hover{background:rgba(128,128,128,.14)}
.ub-hero__gen-b.is-on{background:var(--color-background,#fff);
  box-shadow:0 0 0 1px rgba(0,0,0,.16);cursor:default}
@media (max-width:749px){
  .ub-hero__tag{font-size:.95rem;margin-bottom:14px}
  .ub-hero__gen-b{min-width:92px;padding:8px 16px;font-size:.88rem}
}

/* ===== main section: info list accordions (ai_gen_block_d961955) ===== */
.ai-product-info-list {
  display: block;
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  padding: 20px;
}

.ai-product-info-list__items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ai-product-info-list__item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e6e6e6;
  cursor: default;
}

.ai-product-info-list__item:last-child {
  border-bottom: none;
}

.ai-product-info-list__item--accordion {
  cursor: pointer;
}

.ai-product-info-list__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-product-info-list__icon svg {
  width: 100%;
  height: 100%;
  stroke: #000000;
  fill: none;
  stroke-width: 1.5;
}

.ai-product-info-list__content {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-product-info-list__title {
  font-size: 14px;
  color: #000000;
  margin: 0;
  font-weight: 500;
}

.ai-product-info-list__chevron {
  width: 20px;
  height: 20px;
  margin-left: 12px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.ai-product-info-list__chevron svg {
  width: 100%;
  height: 100%;
  stroke: #000000;
  fill: none;
  stroke-width: 1.5;
}

.ai-product-info-list__item--accordion.active .ai-product-info-list__chevron {
  transform: rotate(180deg);
}

.ub-acc-list { margin:0; padding:14px 0 18px; list-style:none; display:grid; gap:9px; }
.ub-acc-list li { position:relative; padding-left:16px; font-size:.95rem; line-height:1.45; opacity:.9; }
.ub-acc-list li::before { content:"\2022"; position:absolute; left:2px; opacity:.7; }
.ub-acc-mat { padding:14px 0 18px; display:grid; gap:6px; }
.ub-acc-mat-l { margin:8px 0 0; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; opacity:.65; }
.ub-acc-mat-v { margin:0; font-size:.95rem; line-height:1.5; }
.ai-product-info-list__accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.ai-product-info-list__accordion-content.active {
  max-height: 1000px;
  padding-top: 16px;
}

.ai-product-info-list__image-wrapper {
  width: 100%;
}

.ai-product-info-list__image {
  width: 100%;
  height: auto;
  display: block;
}

.ai-product-info-list__empty-state {
  padding: 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
  font-style: italic;
}

/* size chart table inside the Size Chart accordion (same block) */
.ub-sc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.ub-sc{border-collapse:collapse;width:100%;min-width:340px;font-size:.85rem;line-height:1.45}
.ub-sc th,.ub-sc td{border:1px solid rgba(128,128,128,.3);padding:.5rem .6rem;text-align:center;white-space:nowrap}
.ub-sc th{font-weight:600;background:rgba(128,128,128,.1)}
@media (max-width:480px){.ub-sc{font-size:.78rem}.ub-sc th,.ub-sc td{padding:.4rem .45rem}}

/* ===== ub_on_specs section (snippets/ub-on-specs.liquid) ===== */
/* The theme puts the section in a GRID (40px | content | 40px); width:100% + justify-self:stretch keep the block page wide. */
.ub-spec{width:100%;justify-self:stretch;grid-column:1/-1;max-width:var(--page-width,1520px);margin:0 auto;padding:8px 40px 44px;box-sizing:border-box}
.ub-spec__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;
  padding-bottom:4px;margin-bottom:34px}
.ub-spec__fact{display:flex;align-items:center;gap:14px;padding:10px 0 18px;
  border-bottom:1px solid rgba(128,128,128,.32)}
.ub-spec__icon{flex:0 0 auto;width:44px;height:44px;object-fit:contain}
.ub-spec__fact-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.ub-spec__label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.72;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ub-spec__value{font-size:1.42rem;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.ub-spec__title{font-size:1.5rem;font-weight:700;margin:0 0 16px;letter-spacing:-.01em}
.ub-spec__list{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.ub-spec__list li{position:relative;padding-left:18px;font-size:1.02rem;line-height:1.45}
.ub-spec__list li::before{content:"\2022";position:absolute;left:2px;top:-.04em;opacity:.85}
@media (max-width:749px){
  .ub-spec{padding:4px 16px 34px}
  .ub-spec__facts{grid-template-columns:1fr;gap:0;margin-bottom:26px}
  .ub-spec__fact{padding:12px 0}
  .ub-spec__value{font-size:1.2rem}
  .ub-spec__title{font-size:1.28rem}
  .ub-spec__list li{font-size:.96rem}
}

/* ===== geowild features section (sections/geowild-features.liquid) ===== */
/* --- Reset e Fontes Locais da Secao --- */
#shopify-section-product-features {
  background-color: #FFFFFF;
  color: #ffffffff;
  line-height: 1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- Container Principal --- */
.gw-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 52px 26px;
}

/* --- Cabecalho da Secao --- */
.gw-header {
  text-align: center;
  margin-bottom: 105px;
}

.gw-header h2 {
  font-size: 2.6rem;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 26px;
  color: #1a1a1a;
  line-height: 1.2;
}

.gw-header p {
  max-width: 910px;
  margin: 0 auto;
  font-size: 1.2rem;
  color: #555;
  font-weight: 500;
}

/* --- Grid dos Itens (Feature Row) --- */
.gw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 46px 34px;
  align-items: start;
}

.gw-feature-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin-bottom: 0;
}

.gw-feature-row:last-child {
  margin-bottom: 0;
}

.gw-feature-row.reverse {
  flex-direction: column;
}

/* --- Colunas --- */
.gw-image-col, .gw-text-col {
  flex: 1;
}

.gw-text-col {
  padding: 0;
}

.gw-text-col h3 {
  font-size: 1.5rem;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
}

.gw-text-col div, .gw-text-col p {
  font-size: 1.02rem;
  color: #444;
  max-width: none;
}

/* --- Imagens --- */
.gw-image-wrapper {
  --ub-card-bg: #EDEAE8;
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  height: auto;
  background: transparent;
  padding: 6px;
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
}

.gw-image-wrapper--mat {
  background: var(--ub-card-bg);
}

.gw-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(0.94);
  transition: transform 0.3s ease;
  display: block;
}

.gw-image-wrapper:hover img {
  transform: scale(1);
}

/* --- Responsividade (Mobile) --- */
@media (max-width: 900px) {
  .gw-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .gw-feature-row, .gw-feature-row.reverse {
    flex-direction: column;
    text-align: left;
    gap: 16px;
    margin-bottom: 0;
  }

  .gw-text-col p, .gw-text-col div {
    margin: 0 auto;
  }

  .gw-header h2 {
    font-size: 2rem;
  }

  .gw-image-wrapper {
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* --- Video depois dos cards (so nos tenis da colecao ON) --- */
.gw-video {
  margin-top: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.gw-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .gw-video { margin-top: 40px; }
}

/* ===== recommendations section: static product card settings (templates/product.json, product_recommendations_qggXJq) ===== */
/* The live "You may also like" cards are rendered with their OWN _product-card block: product_card_gap 8 and
   padding-block-end 8 (the collection grid uses 4 / 0). partials/product-card.html (area C) writes the collection values
   as inline custom properties on .product-card__content, so the section override needs !important to win over them.
   .product-grid__card consumes them as `gap` and `padding-block-end` (base.css). Round 3: title/price/swatches sat
   4 / 8 / 12px too close to the image. */
.product-recommendations .product-card__content.product-grid__card {
  --product-card-gap: 8px !important;
  --padding-block-end: 8px !important;
}

/* ===== replica-only helpers (not in the live CSS) ===== */
/* The live error span uses the Horizon `.hidden` utility; app.js toggles the `hidden` attribute instead. Support both. */
.product-form-text__error[hidden] { display: none; }
.product-form-text__error .product-form-text__error-text { line-height: 1.4; }
/* Slides filtered out for the selected color (Horizon re-renders the gallery server side; the replica toggles `hidden`). */
slideshow-slide[hidden], .dialog-zoomed-gallery > li[hidden], .dialog-thumbnails-list__thumbnail[hidden] { display: none; }
/* The live thumbnails strip fades in through a keyframe that lands at opacity 1; keep it visible when the animation is unavailable. */
zoom-dialog dialog[open] .dialog-thumbnails-list { opacity: 1; }
/* Mouse drag on the slideshow (Horizon sets `dragging` while the pointer is down). */
slideshow-component[dragging] slideshow-slides { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }