/*
Theme Name: Lala Kahala
Theme URI: https://lalakahala.fit-solutions.jp
Author: fit-solutions.jp
Description: Tema customizado para LA LA KAHALA, replicando o visual da loja Shopify original.
Version: 1.0
Text Domain: lalakahala
*/

:root{
  --font-heading: "Shippori Mincho", serif;
  --font-body: "Jost", sans-serif;

  /* scheme 1 - default/light */
  --s1-text: 92 92 92;
  --s1-bg: 255 255 255;
  --s1-border: 231 231 231;
  --s1-btn-bg: 92 92 92;
  --s1-btn-text: 255 255 255;

  /* scheme 2 - light gray */
  --s2-text: 92 92 92;
  --s2-bg: 243 243 243;
  --s2-border: 220 220 220;

  /* scheme 3 - dark */
  --s3-text: 255 255 255;
  --s3-bg: 28 28 28;
  --s3-border: 62 62 62;

  --color-error-bg: 243 204 204;
  --color-error-text: 203 43 43;

  --container-max: 1360px;
  --gutter: 20px;
}

@media screen and (min-width: 1000px){
  :root{ --gutter: 48px; }
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
  color: rgb(var(--s1-text));
  background: rgb(var(--s1-bg));
}

:lang(ja), :lang(ja) p, :lang(ja) h1, :lang(ja) h2, :lang(ja) h3{
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
}

img{ max-width: 100%; height: auto; display: block; }

a{ color: inherit; text-decoration: none; }

ul{ list-style: none; margin: 0; padding: 0; }

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 1em;
}
h1{ font-size: 18px; }
h2{ font-size: 18px; }
h3{ font-size: 18px; }
h4{ font-size: 16px; }
h5{ font-size: 14px; }
h6{ font-size: 12px; }

@media screen and (min-width: 700px){
  h1{ font-size: 30px; }
  h2{ font-size: 30px; }
  h3{ font-size: 22px; }
  h4{ font-size: 18px; }
}

p{ margin: 0 0 1em; }

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--sm{ max-width: 900px; }
.container--xs{ max-width: 700px; }

.text-center{ text-align: center; }

.button, button.button, input[type="submit"]{
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: rgb(var(--s1-btn-bg));
  color: rgb(var(--s1-btn-text));
  border: 1px solid rgb(var(--s1-btn-bg));
  border-radius: 0;
  padding: 14px 32px;
  cursor: pointer;
  transition: opacity .2s ease;
}
.button:hover, button.button:hover{ opacity: 0.8; }

.section-spacing{ padding: 48px 0; }
@media screen and (min-width: 700px){
  .section-spacing{ padding: 80px 0; }
}
.bordered-section{ border-bottom: 1px solid rgb(var(--s1-border)); }

.color-scheme--scheme-2{ background: rgb(var(--s2-bg)); color: rgb(var(--s2-text)); }
.color-scheme--scheme-3{ background: rgb(var(--s3-bg)); color: rgb(var(--s3-text)); }
.color-scheme--scheme-3 .button{ background: rgb(255 255 255); color: rgb(var(--s3-bg)); border-color: rgb(255 255 255); }

/* ===== Announcement bar ===== */
.announcement-bar{
  background: rgb(var(--s2-bg));
  color: rgb(var(--s2-text));
  text-align: center;
  padding: 10px var(--gutter);
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* ===== Header ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(var(--s1-bg));
  border-bottom: 1px solid rgb(var(--s1-border));
}
.site-header__inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px var(--gutter);
  max-width: var(--container-max);
  margin: 0 auto;
  gap: 16px;
}
.site-header__start{
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-header__logo{
  justify-self: center;
}
.site-header__logo img{
  height: 60px;
  width: auto;
}
@media screen and (min-width: 1000px){
  .site-header__logo img{ height: 90px; }
}
.site-header__nav{
  display: none;
}
.site-header__nav-list{
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-header__nav a{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.site-header__icons{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-header__icons a, .site-header__icons button{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.site-header__icons svg{
  display: block;
}
.hamburger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 22px;
  height: 22px;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hamburger svg{ display: block; width: 100%; height: auto; }
@media screen and (min-width: 1000px){
  .site-header__nav{ display: flex; }
  .hamburger{ display: none; }
}

/* mobile drawer */
.mobile-drawer{
  position: fixed;
  top: 0; left: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: rgb(var(--s2-bg));
  color: rgb(var(--s2-text));
  z-index: 200;
  transform: translateX(-100%);
  transition: transform .3s ease;
  padding: 24px;
  overflow-y: auto;
}
.mobile-drawer.is-open{ transform: translateX(0); }
.mobile-drawer__close{ background: none; border: none; font-size: 20px; cursor: pointer; margin-bottom: 24px; color: inherit; }
.mobile-drawer nav ul{ display: flex; flex-direction: column; gap: 20px; }
.mobile-drawer nav a{ font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; }
.drawer-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 190;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.drawer-overlay.is-open{ opacity: 1; pointer-events: auto; }

/* ===== Footer ===== */
.site-footer{ background: rgb(var(--s2-bg)); color: rgb(var(--s2-text)); padding: 64px 0 24px; }
.footer__inner{
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  margin-bottom: 40px;
}
@media screen and (min-width: 700px){
  .footer__inner{ grid-template-columns: auto 1fr 1fr; align-items: start; }
}
.footer__logo img{ width: 130px; }
.footer__col p.h6{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 16px; font-family: var(--font-heading); }
.footer__col ul{ display: flex; flex-direction: column; gap: 10px; }
.footer__col a{ font-size: 13px; opacity: 0.75; }
.footer__col a:hover{ opacity: 1; }
.footer__social{ display: flex; gap: 16px; margin-bottom: 24px; }
.footer__aside{
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid rgb(var(--s2-border));
  padding-top: 24px;
}
.footer__copyright{ font-size: 11px; opacity: 0.6; }
.footer__payments{ display: flex; flex-wrap: wrap; gap: 8px; }
.footer__payments svg{ display: block; }

/* ===== Slideshow ===== */
.slideshow{
  position: relative;
  overflow: hidden;
  height: 60vh;
  min-height: 340px;
}
.slideshow__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  pointer-events: none;
}
.slideshow__slide.is-active{
  opacity: 1;
  pointer-events: auto;
}
.slideshow__slide img{ width: 100%; height: 100%; object-fit: cover; }
.slideshow__slide img.hero-beach{ object-position: center 100%; }
.slideshow__dots{
  position: absolute;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px;
}
.slideshow__dots button{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.5); border: none; padding: 0; cursor: pointer;
}
.slideshow__dots button.is-active{ background: #fff; }

.bottom-video{
  position: relative;
  overflow: hidden;
  height: 60vh;
  min-height: 340px;
}
.bottom-video video{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Philosophy / multiple-media-with-text ===== */
.philosophy{ }
.philosophy__content--full{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.philosophy__content .h6{ font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--font-heading); margin-bottom: 8px; }
.philosophy__content .h3{ font-size: 22px; margin-bottom: 24px; }
.philosophy__content p{ font-size: 16px; line-height: 2; }

p.philosophy__jp{ font-size: 13px; }
.philosophy__spirit-line{ margin-bottom: 40px; }

/* ===== Product teaser grid ===== */
.teaser-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media screen and (min-width: 700px){
  .teaser-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 1000px){
  .teaser-grid{ grid-template-columns: repeat(4, 1fr); gap: 60px; }
}
.teaser-grid__item{ text-align: center; }
.teaser-grid__item h3{ font-size: 16px; margin-bottom: 20px; }
.teaser-grid__item img{ width: 100%; margin-bottom: 20px; }
.teaser-grid__item p{ font-size: 13px; color: rgb(var(--s1-text)); }

/* ===== Prose / generic page content ===== */
.prose{ font-size: 14px; line-height: 2; }
.prose img{ margin-inline: auto; margin-top: 3.5em; max-width: 440px; width: 100%; }
.prose h2{ text-transform: none; letter-spacing: normal; font-size: 17px; margin: 2em 0 .8em; }
.prose h3{ text-transform: none; letter-spacing: normal; font-weight: 700; font-size: 20px; line-height: 1.4; margin: 1.5em 0 .6em; }
.prose .story-lead{ font-weight: 400; font-size: 16px; line-height: 2.4; }
@media screen and (min-width: 700px){
  .prose h3{ font-size: 24px; }
}
.prose ul, .prose ol{ padding-left: 1.4em; margin: 0 0 1em; }
.prose ul{ list-style: disc; }
.prose ol{ list-style: decimal; }
.prose li{ margin-bottom: .4em; }
.page-title{ text-align: center; margin-bottom: 40px; }
.bordered-section .page-title{ margin-bottom: 8px; }
.bordered-section .page-title--lead{ margin-bottom: 24px; }
.bordered-section .page-title .h2{ margin-bottom: 0; }
.style-select-lead{ margin-top: 0px; font-size: 14px; line-height: 1.8; }
.style-select-subtitle{ margin-top: .2em; margin-bottom: 0; font-size: 16px; letter-spacing: 0.05em; }
.page-title__paragraph{ margin-top: 12px; margin-bottom: 0; font-size: 14px; line-height: 1.8; color: rgb(var(--s1-text) / .75); }

/* Commercial disclosure table */
.sct-list{ margin: 1rem 0 2rem; }
.sct-row{ display: flex; align-items: flex-start; border-bottom: 1px solid rgb(var(--s1-border)); padding: 1.25rem 0; }
.sct-row:last-child{ border-bottom: none; }
.sct-label{ width: 32%; flex-shrink: 0; font-weight: 700; padding-right: 1.5rem; }
.sct-value{ width: 68%; }
@media screen and (max-width: 700px){
  .sct-row{ flex-direction: column; }
  .sct-label{ width: 100%; margin-bottom: .5rem; }
  .sct-value{ width: 100%; }
}

/* ===== Contact form ===== */
.contact-form{ max-width: 500px; margin: 0 auto; text-align: left; }
.contact-form .form-row{ margin-bottom: 20px; }
.contact-form label{ display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.contact-form input, .contact-form textarea{
  width: 100%;
  border: 1px solid rgb(var(--s1-border));
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  background: rgb(var(--s1-bg));
  color: rgb(var(--s1-text));
}
.contact-form textarea{ resize: vertical; }
.contact-form .button{ width: 100%; text-align: center; border: none; }
.form-notice{ padding: 14px; margin-bottom: 20px; font-size: 13px; }
.form-notice--success{ background: rgb(212 227 203); color: rgb(48 122 7); }
.form-notice--error{ background: rgb(var(--color-error-bg)); color: rgb(var(--color-error-text)); }

.pano-description{
  margin: 20px 0;
  padding: 16px;
  background: rgb(var(--s2-bg));
  border-left: 2px solid rgb(var(--s1-btn-bg));
}
.pano-description h3{
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 8px;
}
.pano-description p{
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}
/* PURPLE MOʻO ISLANDS e' o unico pano com quebras de paragrafo de verdade na
   descricao (os outros 39 sao um paragrafo continuo) - escopado so' a esse pano via
   data-pano-slug, pra nao mudar a renderizacao dos outros. */
.pano-description[data-pano-slug="purple-mo%ca%bbo-islands"] p{
  white-space: pre-line;
}
.pano-description[data-pano-slug="rainbow-mask-parade"] p{
  white-space: pre-line;
}
.pano-spec{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--s1-border));
}
.pano-spec h4{
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 4px;
  opacity: .7;
}
.pano-spec p{
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.fabric-note{
  margin: 0 0 10px;
}
.fabric-note p{
  font-size: 12px;
  line-height: 1.7;
  color: rgb(var(--s1-text) / .6);
  margin: 0;
}


/* ===== Estilo (categoria) grid — /shop/ ===== */
.estilo-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 380px;
  margin: 0 auto;
}
.estilo-grid--single{
  grid-template-columns: 1fr;
  max-width: 360px;
}
.estilo-card{
  display: block;
  text-align: center;
  color: inherit;
}
.estilo-card__image{
  overflow: hidden;
  margin-bottom: 20px;
}
.estilo-card__images{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.estilo-card__images .estilo-card__image{
  margin-bottom: 0;
}
.estilo-card img{
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform .6s ease;
}
@media screen and (pointer: fine){
  .estilo-card:hover img{ transform: scale(1.04); }
}
.estilo-card h3{
  font-family: var(--font-heading);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 4px;
}
.estilo-card h3 br.mobile-break{
  display: none;
}
@media screen and (max-width: 700px){
  .estilo-card h3 br.mobile-break{
    display: block;
  }
}
.estilo-card__badge{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(var(--s1-text) / .55);
  margin: 16px 0 0;
}
.estilo-card__desc{
  font-size: 13px;
  line-height: 1.8;
  color: rgb(var(--s1-text) / .75);
  margin: 4px 0 16px;
  white-space: pre-line;
}
.estilo-card__badge + .estilo-card__desc{
  margin-top: 6px;
}
.estilo-card__desc--after{
  margin: 16px 0 0;
}
.estilo-card__desc--tight{
  line-height: 1.5;
}
.estilo-card__note{
  font-size: 11px;
  line-height: 1.8;
  color: rgb(var(--s1-text) / .55);
  white-space: pre-line;
  margin: 12px 0 0;
}

/* ===== Pano grid — página de categoria/estilo ===== */
.pano-subtitle{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(var(--s1-text) / .55);
  text-align: center;
  margin-top: -28px;
  margin-bottom: 48px;
}
.pano-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media screen and (min-width: 700px){
  .pano-grid{ grid-template-columns: repeat(3, 1fr); gap: 36px; }
}
@media screen and (min-width: 1000px){
  .pano-grid{ grid-template-columns: repeat(4, 1fr); }
}
.pano-card{
  display: block;
  text-align: center;
  color: inherit;
}
.pano-card__image{
  overflow: hidden;
  margin-bottom: 14px;
  background: rgb(var(--s2-bg));
}
.pano-card__image img{
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform .5s ease, opacity .3s ease;
}
@media screen and (pointer: fine){
  .pano-card:hover .pano-card__image img{ transform: scale(1.06); opacity: .9; }
}
.pano-card h3{
  font-size: 12px;
  letter-spacing: 0.05em;
  margin: 0;
}

/* ===== WooCommerce — layout geral do produto =====
   div.product (o wrapper da pagina de produto unico), NAO .product sozinho —
   o WooCommerce reusa a classe "product" tambem em cada <li> das grades de
   loja/relacionados, e um seletor sem "div" vazava esse grid pra la, espremendo
   a foto/titulo/preco de cada card relacionado num grid de 2 colunas errado. */
div.product{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media screen and (min-width: 1000px){
  div.product{ grid-template-columns: 1.1fr 1fr; gap: 64px; }
}

.woocommerce-product-gallery__wrapper{
  margin: 0;
}
.woocommerce-product-gallery__image img{
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}

.flex-control-nav.flex-control-thumbs{
  display: grid;
  grid-template-columns: repeat(auto-fill, 90px);
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.flex-control-thumbs li{
  margin: 0;
  width: 90px;
}
.flex-control-thumbs img{
  width: 90px;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity .2s;
}
.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover{
  opacity: 1;
}

@media screen and (min-width: 1000px){
  .woocommerce-product-gallery{
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 14px;
  }
  .woocommerce-product-gallery__wrapper{
    flex: 1;
    min-width: 0;
  }
  .flex-control-nav.flex-control-thumbs{
    display: flex;
    flex-direction: column;
    width: 90px;
    flex-shrink: 0;
    margin: 0;
  }
}

.summary.entry-summary{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media screen and (min-width: 1000px){
  .summary.entry-summary{
    position: sticky;
    top: 130px;
    align-self: start;
  }
}
.product_title.entry-title{
  font-size: 20px;
  margin-bottom: 12px;
}
.summary .price{
  font-size: 16px;
  margin-bottom: 4px;
  display: block;
}
.woocommerce-product-details__short-description{
  font-size: 13px;
  line-height: 1.9;
  color: rgb(var(--s1-text) / .8);
  margin-bottom: 24px;
}

.variations_form.cart{
  margin-top: 8px;
}
table.variations{
  width: 100%;
  border: none;
  margin-bottom: 24px;
}
table.variations th.label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 400;
  text-align: left;
  padding: 0 0 10px;
  width: auto;
}
table.variations td.value{
  padding: 0;
}
table.variations select{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 220px;
  border: 1px solid rgb(var(--s1-border));
  border-radius: 0;
  background: rgb(var(--s1-bg));
  color: rgb(var(--s1-text));
  font-family: var(--font-body);
  font-size: 13px;
  padding: 10px 14px;
}
table.variations tr:has(select[name="attribute_pa_pano"]){
  display: none;
}
.tamanho-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tamanho-button{
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgb(var(--s1-border));
  border-radius: 0;
  background: rgb(var(--s1-bg));
  color: rgb(var(--s1-text));
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.tamanho-button:hover{
  border-color: rgb(var(--s1-btn-bg));
}
.tamanho-button.is-active{
  background: rgb(var(--s1-btn-bg));
  color: rgb(var(--s1-btn-text));
  border-color: rgb(var(--s1-btn-bg));
}
.tamanho-button.is-outofstock{
  position: relative;
  color: rgb(var(--s1-text) / .35);
  border-color: rgb(var(--s1-border));
  cursor: not-allowed;
}
.tamanho-button.is-outofstock::after{
  content: "";
  position: absolute;
  inset: 4px;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 0.5px),
    rgb(var(--s1-text) / .35) calc(50% - 0.5px),
    rgb(var(--s1-text) / .35) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}
.woocommerce-variation-availability{ display: none; }
a.reset_variations{ display: none !important; }

.size-chart{
  margin: 20px 0;
  overflow-x: auto;
}
.size-chart table{
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.size-chart th,
.size-chart td{
  border: 1px solid rgb(var(--s1-border));
  padding: 10px 12px;
  text-align: center;
  white-space: nowrap;
}
.size-chart th{
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.size-chart thead th{
  background: rgb(var(--s2-bg));
  font-weight: 500;
}
.size-chart thead th:first-child{
  text-align: left;
  font-weight: 700;
}
.size-chart tbody th{
  text-align: left;
  font-weight: 400;
  background: rgb(var(--s2-bg));
}

.woocommerce-variation-add-to-cart{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.quantity{
  display: inline-flex;
}
.quantity .qty{
  width: 64px;
  border: 1px solid rgb(var(--s1-border));
  border-radius: 0;
  padding: 12px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  text-align: center;
  background: rgb(var(--s1-bg));
  color: rgb(var(--s1-text));
}

.product_meta{
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgb(var(--s1-border));
  font-size: 11px;
  color: rgb(var(--s1-text) / .6);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product_meta a{ text-decoration: underline; }

/* ===== WooCommerce — abas (descrição / info / reviews) ===== */
.woocommerce-tabs{
  grid-column: 1 / -1;
  margin-top: 64px;
  border-top: 1px solid rgb(var(--s1-border));
  padding-top: 40px;
}
ul.tabs.wc-tabs{
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgb(var(--s1-border));
}
ul.tabs.wc-tabs li{
  padding-bottom: 14px;
}
ul.tabs.wc-tabs a{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgb(var(--s1-text) / .5);
}
ul.tabs.wc-tabs li.active a,
ul.tabs.wc-tabs a:hover{
  color: rgb(var(--s1-text));
}
.woocommerce-Tabs-panel{
  max-width: 640px;
}
.woocommerce-Tabs-panel h2{
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.2em;
}
table.woocommerce-product-attributes{
  width: 100%;
  border: none;
}
table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td{
  padding: 10px 0;
  border-bottom: 1px solid rgb(var(--s1-border));
  font-size: 13px;
  text-align: left;
}
table.woocommerce-product-attributes th{
  font-weight: 400;
  color: rgb(var(--s1-text) / .6);
  width: 30%;
}
table.woocommerce-product-attributes td p{ margin: 0; }

/* ===== WooCommerce — elementos genéricos ===== */
.woocommerce-Price-amount{ font-size: inherit; }
.price ins{ text-decoration: none; }
.price del{ opacity: .5; margin-inline-end: 6px; }
a.button, .single_add_to_cart_button, .checkout-button{
  background: rgb(var(--s1-btn-bg));
  color: rgb(var(--s1-btn-text));
  border: 1px solid rgb(var(--s1-btn-bg));
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
  padding: 14px 32px;
  transition: opacity .2s;
}
a.button:hover, .single_add_to_cart_button:hover{ opacity: .8; }
a.product-inquiry-button{
  display: block;
  text-align: center;
  margin-top: 12px;
  background: transparent;
  color: rgb(var(--s1-btn-bg));
}
a.product-inquiry-button:hover{ opacity: .6; }
.woocommerce-breadcrumb{
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgb(var(--s1-text) / .55);
  margin-bottom: 32px;
}
.woocommerce-breadcrumb a{ text-decoration: underline; }

/* ===== WooCommerce — grids padrão (relacionados etc.) ===== */
.related.products,
.upsells.products{
  grid-column: 1 / -1;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgb(var(--s1-border));
}
.related.products > h2,
.upsells.products > h2{
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 32px;
}
ul.products{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 700px){
  ul.products{ grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
ul.products li.product{
  text-align: center;
}
ul.products li.product img{
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  margin-bottom: 12px;
}
ul.products li.product .woocommerce-loop-product__title{
  font-size: 12px;
  margin: 0 0 4px;
}
ul.products li.product .price{
  font-size: 12px;
  color: rgb(var(--s1-text) / .7);
}
ul.products li.product .button{
  display: none;
}

/* ===== WooCommerce Blocks Checkout — ajustes ===== */
/* offset do resumo do pedido (sticky) pra nao ficar embaixo do header fixo */
.wc-block-components-sidebar.wc-block-checkout__sidebar{
  top: 130px !important;
}

/* campos do checkout (email, nome, pais, etc.) na mesma borda/espessura/cor
   do box "Order summary" (borda fina cinza clara, cantos levemente arredondados) */
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"],
.wc-blocks-components-select__select,
.wc-block-components-textarea textarea{
  border: 1px solid rgba(92, 92, 92, 0.2) !important;
  border-radius: 5px !important;
}

/* ===== Medidas sob medida (LAGOON TIE / BREEZE GATHER) ===== */
.measurement-fields{
  margin: 20px 0;
  padding: 20px;
  border: 1px solid rgb(var(--s1-border));
  background: rgb(var(--s2-bg));
}
.measurement-fields__title{
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: rgb(var(--s1-text));
  margin: 0 0 16px;
}
.measurement-field{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.measurement-field:last-child{ margin-bottom: 0; }
.measurement-field label{
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgb(var(--s1-text));
  width: 90px;
  flex: none;
}
.measurement-field__input-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
}
.measurement-field input[type="number"]{
  width: 100px;
  padding: 8px 10px;
  border: 1px solid rgba(92, 92, 92, 0.3);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgb(var(--s1-text));
  background: rgb(var(--s1-bg));
}
.measurement-field__unit{
  font-family: var(--font-body);
  font-size: 13px;
  color: rgb(var(--s1-text));
}
@media screen and (max-width: 480px){
  .measurement-field label{ width: 72px; font-size: 12px; }
  .measurement-field input[type="number"]{ width: 90px; }
}