.product-page { background: var(--paper); }

.product-page .site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  color: var(--ink-900);
  backdrop-filter: blur(14px);
}

.product-page main { padding-top: var(--header-h); }

.product-breadcrumb { padding-top: 32px; padding-bottom: 24px; }
.product-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; color: var(--slate); font-size: 12px; list-style: none; }
.product-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--line); }
.product-breadcrumb a:hover { color: var(--ink-900); text-decoration: underline; }

.product-detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(380px, 5fr); align-items: start; gap: clamp(48px, 6vw, 96px); padding-bottom: clamp(80px, 8vw, 128px); }

.product-gallery { position: sticky; top: 98px; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
.product-gallery__thumbs { display: flex; flex-direction: column; gap: 12px; }
.product-gallery__thumbs button { position: relative; width: 80px; aspect-ratio: 4 / 5; overflow: hidden; padding: 0; border: 1px solid transparent; background: var(--bone); cursor: pointer; }
.product-gallery__thumbs button::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; pointer-events: none; }
.product-gallery__thumbs button.is-active::after { border-color: var(--ink-900); }
.product-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumbs button:nth-child(2) img { transform: scale(1.8); object-position: 50% 32%; }
.product-gallery__thumbs button:nth-child(3) img { transform: scale(2.1); object-position: 50% 72%; }

.product-gallery__main { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone); }
.product-gallery__main > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease), object-position .45s var(--ease); }
.product-gallery__main > img.is-detail { transform: scale(1.72); object-position: 50% 30%; }
.product-gallery__main > img.is-material { transform: scale(1.95); object-position: 50% 75%; }
.gallery-label { position: absolute; z-index: 2; bottom: 16px; left: 16px; padding: 7px 10px; background: rgba(255,253,248,.9); color: var(--ink-900); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }

.product-buy { position: relative; padding-top: 12px; }
.product-buy__top { display: flex; align-items: center; justify-content: space-between; }
.product-buy__top .eyebrow { margin-bottom: 8px; }
.product-buy__favorite { position: static; flex: 0 0 auto; }
.product-buy h1 { max-width: 620px; margin: 0 0 13px; font-size: clamp(46px, 4.4vw, 68px); line-height: .98; }

.product-rating { display: flex; align-items: center; gap: 8px; width: max-content; margin-bottom: 22px; color: var(--slate); font-size: 12px; }
.product-rating > span:first-child { color: var(--copper); font-size: 14px; letter-spacing: .09em; }
.product-rating strong { color: var(--ink-900); }
.product-rating:hover > span:last-child { text-decoration: underline; }

.product-price { margin-bottom: 24px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.product-price > strong { margin-right: 10px; font-size: 22px; }
.product-price > s { margin-right: 10px; color: var(--slate); font-size: 13px; }
.product-price p { margin: 5px 0 0; color: var(--slate); font-size: 12px; }
.product-price p b { color: var(--olive); }
.product-discount { display: inline-flex; padding: 4px 7px; background: #f0ded5; color: var(--copper); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.product-description { max-width: 580px; margin-bottom: 28px; color: var(--graphite); font-size: 16px; line-height: 1.7; }

.product-option { margin-bottom: 26px; }
.product-option__label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; }
.product-option__label > span { font-weight: 700; }
.product-option__label > strong { color: var(--slate); font-size: 12px; font-weight: 500; }
.size-guide-link { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; cursor: pointer; color: var(--slate); font-size: 11px; font-weight: 600; }
.size-guide-link svg { width: 15px; height: 15px; }

.color-options, .size-options { display: flex; flex-wrap: wrap; gap: 9px; }
.color-swatch { display: grid; place-items: center; width: 42px; height: 42px; padding: 4px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.color-swatch span { display: block; width: 100%; height: 100%; border: 1px solid rgba(16,39,44,.14); border-radius: 50%; background: #eee9df; }
.color-swatch.is-selected { border-color: var(--ink-900); }
.color-azul-profundo span, .color-azul-noite span { background: #17343e; }
.color-verde-oliva span, .color-verde-profundo span, .color-oliva span { background: #4f604e; }
.color-grafite span { background: #343a3c; }
.color-tabaco span { background: #8a4e2f; }
.color-cafe span { background: #4c2c20; }
.color-preto span { background: #1e2021; }
.color-branco span { background: #fcfaf2; }
.color-areia span, .color-areia-escura span { background: #c7aa86; }
.color-conhaque span { background: #aa633b; }
.color-off-white span { background: #eee9dc; }
.color-cinza-mineral span { background: #868581; }

.size-options button { min-width: 50px; height: 45px; padding-inline: 12px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 12px; font-weight: 700; transition: border-color .18s, background-color .18s, color .18s; }
.size-options button:hover { border-color: var(--ink-900); }
.size-options button.is-selected { border-color: var(--ink-900); background: var(--ink-900); color: var(--white); }
.option-help { margin: 8px 0 0; color: var(--slate); font-size: 11px; }

.stock-note { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--olive); font-size: 12px; font-weight: 600; }
.stock-note > span { width: 7px; height: 7px; border-radius: 50%; background: #4e7a62; box-shadow: 0 0 0 4px rgba(78,122,98,.12); }

.product-actions { display: grid; grid-template-columns: 116px 1fr; gap: 10px; margin-bottom: 22px; }
.quantity { display: grid; grid-template-columns: 38px 1fr 38px; height: 52px; border: 1px solid var(--line); }
.quantity button { display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.quantity button:hover { background: var(--bone); }
.quantity svg { width: 16px; height: 16px; }
.quantity input { min-width: 0; width: 100%; border: 0; background: transparent; text-align: center; -moz-appearance: textfield; }
.quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.product-add { min-height: 52px; }

.shipping-calculator { margin-bottom: 25px; padding: 18px; border: 1px solid var(--line); background: #fff; }
.shipping-calculator > label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 700; }
.shipping-calculator > div { display: grid; grid-template-columns: 1fr auto; }
.shipping-calculator input { min-width: 0; height: 43px; padding: 0 12px; border: 1px solid var(--line); border-right: 0; background: var(--paper); }
.shipping-calculator button { padding: 0 18px; border: 1px solid var(--ink-900); background: var(--ink-900); color: var(--white); cursor: pointer; font-size: 12px; font-weight: 700; }
.shipping-calculator p { margin: 8px 0 0; color: var(--slate); font-size: 11px; }
.shipping-calculator p.is-error { color: var(--error); font-weight: 700; }
.shipping-calculator p.is-success { color: var(--olive); font-weight: 700; }

.product-assurances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.product-assurances > div { display: flex; align-items: flex-start; gap: 9px; padding: 12px 10px; background: var(--bone); }
.product-assurances svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--copper); }
.product-assurances span { color: var(--slate); font-size: 10px; line-height: 1.45; }
.product-assurances strong { display: block; color: var(--ink-900); font-size: 11px; }

.product-accordions { border-top: 1px solid var(--line); }
.product-accordions details { border-bottom: 1px solid var(--line); }
.product-accordions summary { display: flex; align-items: center; justify-content: space-between; min-height: 57px; cursor: pointer; font-size: 12px; font-weight: 700; list-style: none; }
.product-accordions summary::-webkit-details-marker { display: none; }
.product-accordions summary svg { width: 18px; height: 18px; transition: transform .2s; }
.product-accordions details[open] summary svg { transform: rotate(180deg); }
.product-accordions details > p { margin: 0; padding: 0 0 20px; color: var(--slate); font-size: 13px; line-height: 1.65; }
.product-accordions dl { margin: 0; padding-bottom: 18px; }
.product-accordions dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; font-size: 12px; }
.product-accordions dt { color: var(--slate); }
.product-accordions dd { margin: 0; text-align: right; font-weight: 600; }

.product-story { padding-block: clamp(76px, 8vw, 120px); background: var(--ink-900); color: var(--white); }
.product-story__grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; gap: 24px; }
.product-story__image { grid-column: 1 / span 6; height: min(650px, 54vw); overflow: hidden; }
.product-story__image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.45); object-position: center 42%; }
.product-story__content { grid-column: 8 / span 5; max-width: 580px; }
.product-story__content h2 { margin: 0 0 24px; font-size: clamp(48px, 5vw, 72px); line-height: .98; }
.product-story__content > p:not(.eyebrow) { margin-bottom: 30px; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.75; }
.product-story__content ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.product-story__content li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.82); font-size: 13px; }
.product-story__content li svg { width: 18px; height: 18px; color: #e1b18e; }

.reviews-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 24px; }
.review-summary, .review-card { min-height: 270px; padding: 30px; border: 1px solid var(--line); background: #fff; }
.review-summary { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 8px 22px; }
.review-summary > strong { font-family: var(--serif); font-size: 72px; font-weight: 400; line-height: .9; }
.review-summary > div > span, .review-card > span { color: var(--copper); letter-spacing: .09em; }
.review-summary > div > p { margin: 5px 0 0; color: var(--slate); font-size: 11px; }
.review-summary dl { grid-column: 1 / -1; display: grid; gap: 7px; margin: 20px 0 0; }
.review-summary dl > div { display: grid; grid-template-columns: 65px 1fr 35px; align-items: center; gap: 8px; color: var(--slate); font-size: 10px; }
.review-summary dt { white-space: nowrap; }
.review-summary dd { height: 4px; margin: 0; overflow: hidden; background: var(--bone); }
.review-summary dd i { display: block; width: var(--score); height: 100%; background: var(--copper); }
.review-card { display: flex; flex-direction: column; }
.review-card h3 { margin: 18px 0 10px; font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.1; }
.review-card > p { color: var(--slate); font-size: 13px; line-height: 1.7; }
.review-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); font-size: 11px; }
.review-card footer span { color: var(--olive); }

.product-card__image-link { display: block; width: 100%; height: 100%; }
.product-card__image-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .42s var(--ease); }
.product-card:hover .product-card__image-link img { transform: scale(1.018); }
.product-card__info h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }

.size-guide { position: fixed; z-index: 260; inset: 0; visibility: hidden; }
.size-guide.is-open { visibility: visible; }
.size-guide__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(8,21,24,.58); opacity: 0; transition: opacity .25s; }
.size-guide.is-open .size-guide__backdrop { opacity: 1; }
.size-guide > section { position: absolute; top: 50%; left: 50%; width: min(92vw, 580px); max-height: 88vh; overflow-y: auto; padding: 34px; background: var(--paper); opacity: 0; transform: translate(-50%, -46%); transition: opacity .25s, transform .3s var(--ease); }
.size-guide.is-open > section { opacity: 1; transform: translate(-50%, -50%); }
.size-guide > section > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.size-guide .eyebrow { margin: 0; }
.size-guide h2 { margin: 12px 0; font-size: 42px; }
.size-guide > section > p { color: var(--slate); font-size: 13px; }
.size-guide table { width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 12px; }
.size-guide th, .size-guide td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.size-guide thead th { color: var(--slate); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .product-detail { grid-template-columns: minmax(0, 1.15fr) minmax(370px, .85fr); gap: 42px; }
  .product-gallery { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .product-gallery__thumbs button { width: 64px; }
  .product-assurances { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .product-detail { grid-template-columns: 1fr; }
  .product-gallery { position: static; grid-template-columns: 1fr; }
  .product-gallery__main { grid-row: 1; }
  .product-gallery__thumbs { grid-row: 2; flex-direction: row; }
  .product-gallery__thumbs button { width: 72px; }
  .product-buy { max-width: 680px; }
  .product-assurances { grid-template-columns: repeat(3, 1fr); }
  .product-story__image { grid-column: 1 / span 6; }
  .product-story__content { grid-column: 7 / span 6; padding-left: 24px; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .review-summary { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .product-page main { padding-top: var(--header-h); }
  .product-breadcrumb { padding-top: 24px; padding-bottom: 18px; }
  .product-breadcrumb li:last-child { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .product-detail { gap: 38px; padding-bottom: 72px; }
  .product-gallery { width: calc(100% + var(--gutter) * 2); margin-left: calc(var(--gutter) * -1); }
  .product-gallery__main { aspect-ratio: 4 / 5; }
  .product-gallery__thumbs { padding-inline: var(--gutter); }
  .gallery-label { left: var(--gutter); }
  .product-buy { padding-top: 0; }
  .product-buy h1 { font-size: 45px; }
  .product-description { font-size: 15px; }
  .product-assurances { grid-template-columns: 1fr; }
  .product-assurances > div { align-items: center; }
  .product-assurances strong { display: inline; }
  .product-actions { position: sticky; z-index: 20; bottom: 0; margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter); background: rgba(255,253,248,.95); box-shadow: 0 -8px 24px rgba(16,39,44,.08); backdrop-filter: blur(12px); }

  .product-story { padding-block: 0 70px; }
  .product-story__grid { display: block; width: 100%; }
  .product-story__image { height: auto; aspect-ratio: 4 / 5; margin-bottom: 54px; }
  .product-story__image img { transform: scale(1.35); }
  .product-story__content { padding-inline: var(--gutter); }
  .product-story__content h2 { font-size: 49px; }

  .reviews-grid { grid-template-columns: 1fr; }
  .review-summary { grid-column: auto; }
  .review-summary, .review-card { min-height: 0; padding: 24px; }
  .related-products .product-grid.rail-mobile .product-card { flex-basis: 73%; }
  .size-guide > section { padding: 26px 20px; }
  .size-guide h2 { font-size: 36px; }
}

@media (max-width: 430px) {
  .product-actions { grid-template-columns: 102px 1fr; }
  .quantity { grid-template-columns: 34px 1fr 34px; }
  .product-add { padding-inline: 15px; }
  .product-buy h1 { font-size: 41px; }
  .product-price > strong { font-size: 20px; }
}