/* One page per product (tools/build-product-pages.cjs, audits C1 and J2). Top to bottom: the piece on its theme (photo,
   and with product-landing.js the 3D model that turns), the category badge, name, price with the Pix price, the original
   colors as chips, the two actions (add first), the inline color picker, the accordions and the description. */
.pl-main { max-width: 1148px; margin: 18px auto 72px; padding: 0 32px; }
.pl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 13px; color: var(--muted, #71656c); }
.pl-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pl-crumbs [aria-current] { color: var(--ink, #282326); }
.pl { --pl-ease: cubic-bezier(.25, .8, .25, 1); --pl-spring: cubic-bezier(.34, 1.56, .64, 1); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: start; }

/* ── the piece: photo, then the 3D model in the same frame ── */
.pl-stage { position: sticky; top: 104px; display: grid; justify-items: center; gap: 14px; }
.pl-art { position: relative; width: 100%; display: grid; place-items: center; aspect-ratio: 1; border-radius: 28px; background: radial-gradient(85% 85% at 50% 40%, var(--pl-stops)); overflow: hidden; isolation: isolate; }
.pl-photo { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 18px 22px #2a1c2226); transition: opacity .5s var(--pl-ease), transform .6s var(--pl-ease); }
.pl-3d { position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--pl-ease); }
.pl-3d[hidden] { display: none; }
.pl-3d canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.pl-3d canvas:active { cursor: grabbing; }
.pl-art[data-view="3d"].is-3d-ready .pl-photo { opacity: 0; transform: scale(.94); }
.pl-art[data-view="3d"].is-3d-ready .pl-3d { opacity: 1; }
.pl-status { position: absolute; left: 50%; bottom: 18px; max-width: calc(100% - 32px); margin: 0; padding: 8px 14px; border-radius: 999px; background: #ffffffd9; backdrop-filter: blur(8px); box-shadow: 0 4px 16px #2a1c2214; transform: translateX(-50%); font-size: 13px; line-height: 1.4; text-align: center; color: var(--pl-ink); }
.pl-status[hidden] { display: none; }
/* "Arraste para girar": some no primeiro toque */
.pl-drag { position: absolute; left: 50%; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #ffffffc7; backdrop-filter: blur(8px); box-shadow: 0 4px 16px #2a1c2212; transform: translate(-50%, 8px); font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--pl-ink); opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .4s var(--pl-ease); }
.pl-drag svg { width: 18px; height: 18px; color: var(--pl-accent); }
.pl-art[data-view="3d"].is-3d-ready:not(.is-touched) .pl-drag { opacity: 1; transform: translate(-50%, 0); transition-delay: .6s; }
.pl-views { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #2a1c2214; border-radius: 999px; background: #ffffff9e; backdrop-filter: blur(10px); }
.pl-views[hidden] { display: none; }
.pl-views button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--pl-ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .3s var(--pl-ease), color .3s var(--pl-ease); }
.pl-views button svg { width: 18px; height: 18px; }
.pl-views button[aria-pressed="true"] { background: var(--pl-accent); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--pl-accent) 30%, transparent); }

/* ── name, price, colors ── */
.pl-badge { display: inline-flex; align-items: center; min-height: 26px; margin: 4px 0 0; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--pl-accent) 11%, #fff); font: 650 12px/1.2 'DM Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--pl-accent); }
.pl-info h1 { margin: 14px 0 8px; font: 500 clamp(36px, 4.2vw, 56px)/1.05 'Playfair Display', Georgia, serif; letter-spacing: -.02em; color: var(--pl-ink); }
.pl-sub { margin: 0; font-size: 18px; color: var(--pl-muted); }
.pl-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 22px 0 4px; }
.pl-price strong { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pl-ink); }
.pl-pix { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 13px; border-radius: 999px; background: #1f7a4d; color: #fff; font-size: 15px; font-weight: 650; white-space: nowrap; box-shadow: 0 6px 14px #1f7a4d2e; }
.pl-installments { margin: 0; font-size: 14px; color: var(--muted, #71656c); }
.pl-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 6px; border: 1px solid #2a1c221a; border-radius: 999px; background: #fff; color: var(--ink, #282326); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--pl-ease); }
.pl-chip i { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--chip); border: 1px solid #38232630; box-shadow: inset 0 0 0 2px #ffffff88; transition: background-color .35s ease; }
/* as cores da peça em bolinhas no canto de cima da imagem (foto ou 3D); um clique abre a escolha naquela parte */
.pl-dots { position: absolute; top: 18px; left: 18px; z-index: 3; display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.pl-dot { display: block; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .25s var(--pl-spring), box-shadow .25s ease; }
.pl-dot i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--chip); border: 1.5px solid #ffffffd9; box-shadow: 0 2px 6px #2a1c2224; transition: background-color .35s ease; }
.pl-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pl-accent); }
.pl-dot.is-changed i { animation: pl-dot-pop .45s var(--pl-spring); }
@keyframes pl-dot-pop { 40% { transform: scale(1.25); } }
.pl-note { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted, #71656c); }
.pl-note span { font-weight: 650; color: var(--ink, #282326); }
/* o carrinho da peça: no celular, escolhendo as cores, só quando a peça presa no alto cobre o botão "Adicionar" (.show-fab) */
.pl-fab { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--pl-accent); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--pl-accent) 40%, transparent); cursor: pointer; opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .3s ease, transform .35s var(--pl-spring); }
.pl-fab .icon { width: 22px; height: 22px; }
.pl-fab-plus { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: #1f7a4d; font-size: 14px; font-weight: 700; line-height: 1; }
.pl.show-fab .pl-fab { opacity: 1; transform: none; pointer-events: auto; }
.pl-fab.is-adding .icon { animation: pl-fab-spin .6s cubic-bezier(.45, .05, .3, 1); }
@keyframes pl-fab-spin { 55% { transform: rotate(300deg) scale(1.18); } 100% { transform: rotate(360deg); } }
.pl-fab:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 3px; }

/* ── actions: add (primary) and "Personalizar o meu" (secondary) ── */
.pl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.pl-add, .pl-customize { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 1 1 auto; min-height: 54px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 650; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .3s var(--pl-ease), box-shadow .3s var(--pl-ease), background-color .3s ease, filter .3s ease; }
.pl-add { border: 0; background: var(--pl-accent); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--pl-accent) 30%, transparent); }
.pl-customize { border: 1.5px solid var(--pl-accent); background: #ffffffb3; color: var(--pl-accent); }
.pl-actions .icon { width: 20px; height: 20px; flex-shrink: 0; }
.pl-add:active, .pl-customize:active { transform: scale(.98); }
/* "Personalizar o meu" ativo: a cor entra da esquerda para a direita, como se o botão fosse pintado, e fica correndo
   devagar sob uma trama fina de quadradinhos; o × diz que um clique fecha as cores. */
.pl-customize { position: relative; isolation: isolate; overflow: hidden; transition: transform .3s var(--pl-ease), box-shadow .3s var(--pl-ease), background-color .3s ease, color .35s ease, border-color .35s ease; }
.pl-customize > * { position: relative; z-index: 1; }
.pl-customize::before { content: ''; position: absolute; inset: -2px; z-index: 0; background:
    linear-gradient(90deg, #ffffff26 1px, transparent 1px) 0 0 / 7px 7px,
    linear-gradient(#ffffff26 1px, transparent 1px) 0 0 / 7px 7px,
    linear-gradient(100deg, #5b4fc4, #8b5cc6, #c95b8f, #db7a3c, #2f9a83, #2c84c4, #5b4fc4, #8b5cc6, #c95b8f, #db7a3c, #2f9a83, #2c84c4, #5b4fc4) 0 0 / 200% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path .75s cubic-bezier(.65, 0, .35, 1); }
.pl-customize[aria-expanded="true"] { border-color: transparent; color: #fff; text-shadow: 0 1px 2px #0000002e; box-shadow: 0 10px 26px #5b4fc440; }
.pl-customize[aria-expanded="true"]::before { clip-path: inset(0 0 0 0); animation: pl-flow 9s linear infinite; }
@keyframes pl-flow { to { background-position: 0 0, 0 0, 100% 0; } }
.pl-customize-x { width: 0; height: 12px; margin-inline-start: -10px; opacity: 0; transform: rotate(-90deg); transition: width .3s var(--pl-ease), margin .3s var(--pl-ease), opacity .3s ease, transform .4s var(--pl-spring); }
.pl-customize-x::before, .pl-customize-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.pl-customize-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pl-customize[aria-expanded="true"] .pl-customize-x { width: 12px; margin-inline-start: 0; opacity: .9; transform: none; transition-delay: .35s; }
/* escolhendo as cores no celular, o header não aparece por cima da peça */
html.pl-focus .header.site-header.is-floating, html.pl-focus .header.site-header.is-floating.is-revealed { translate: 0 -110%; pointer-events: none; }
/* the check that draws itself when the piece goes to the cart */
.pl-check { order: -1; width: 0; height: 22px; flex-shrink: 0; opacity: 0; transition: width .25s var(--pl-ease), opacity .2s ease; }
.pl-check path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
.pl-add.is-added { animation: pl-pop .55s var(--pl-spring); }
.pl-add.is-added .icon { display: none; }
.pl-add.is-added .pl-check { width: 22px; opacity: 1; }
.pl-add.is-added .pl-check path { animation: pl-draw .45s .1s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes pl-pop { 0% { transform: scale(1); } 35% { transform: scale(.96); } 70% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
@keyframes pl-tilt { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-14deg); } 70% { transform: rotate(8deg); } }
.pl :is(a, button, summary):focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 3px; }

/* ── the colors, right on the page (opens under the actions) ── */
.pl-custom { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--pl-ease), opacity .3s ease; }
.pl-custom[hidden] { display: none; }
.pl-custom.is-open { grid-template-rows: 1fr; opacity: 1; }
.pl-custom-inner { min-height: 0; overflow: hidden; padding: 0 14px 24px; margin: 0 -14px -24px; }
.pl-custom-card { margin-top: 14px; padding: 18px; border: 1px solid #2a1c2214; border-radius: 22px; background: #fff; box-shadow: 0 12px 30px #2a1c220d; }
.pl-custom-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pl-custom-head p { margin: 0; font-size: 15px; font-weight: 650; color: var(--pl-ink); }
.pl-reset { min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--pl-accent); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pl-reset[hidden] { display: none; }
.pl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pl-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border: 1px solid #2a1c221a; border-radius: 999px; background: transparent; color: var(--ink, #282326); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .25s ease, background-color .25s ease; }
.pl-tabs i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #38232630; transition: background-color .35s ease; }
.pl-tabs button[aria-pressed="true"] { border-color: var(--pl-accent); background: color-mix(in srgb, var(--pl-accent) 8%, #fff); font-weight: 650; }
.pl-hint { margin: 10px 0 12px; font-size: 13px; color: var(--muted, #71656c); }
.pl-palette { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-swatch { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .25s var(--pl-spring); }
.pl-swatch i { width: 100%; height: 100%; border-radius: 50%; background: var(--swatch); border: 1px solid #38232633; box-shadow: inset 0 0 0 2px #ffffff70; }
.pl-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pl-accent); }
.pl-swatch:active { transform: scale(.92); }
.pl-now { min-height: 20px; margin: 12px 0 0; font-size: 13px; color: var(--muted, #71656c); }

/* ── production, delivery and returns: accordions ── */
.pl-facts { margin-top: 28px; border-top: 1px solid var(--line, #eadde1); }
.pl-acc { border-bottom: 1px solid var(--line, #eadde1); }
.pl-acc summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: center; gap: 14px; padding: 16px 2px; list-style: none; cursor: pointer; }
.pl-acc summary::-webkit-details-marker { display: none; }
.pl-acc summary > svg { width: 22px; height: 22px; color: var(--pl-accent); }
.pl-acc strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink, #282326); }
.pl-acc small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted, #71656c); }
.pl-acc-mark { position: relative; width: 14px; height: 14px; }
.pl-acc-mark::before, .pl-acc-mark::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: var(--pl-ink); transition: transform .3s var(--pl-ease); }
.pl-acc-mark::after { transform: rotate(90deg); }
.pl-acc[open] .pl-acc-mark::after { transform: rotate(0); }
.pl-acc-body p { margin: 0; padding: 0 0 18px 38px; font-size: 14px; line-height: 1.6; color: var(--muted, #71656c); }
.pl-acc-body a { color: var(--pl-accent); text-decoration: underline; text-underline-offset: 3px; }
@supports selector(::details-content) {
  .pl-acc { interpolate-size: allow-keywords; }
  .pl-acc::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--pl-ease), content-visibility .35s allow-discrete; }
  .pl-acc[open]::details-content { block-size: auto; }
}
.pl-about { margin-top: 30px; }
.pl-about h2 { margin: 0 0 10px; font: 500 24px/1.2 'Playfair Display', Georgia, serif; letter-spacing: -.01em; color: var(--pl-ink); }
.pl-desc { margin: 0; font-size: 16px; line-height: 1.65; }

@media (hover: hover) {
  .pl-dot:hover { transform: scale(1.12); }
  .pl-add:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 30px color-mix(in srgb, var(--pl-accent) 36%, transparent); }
  .pl-customize:hover { background-color: color-mix(in srgb, var(--pl-accent) 7%, #fff); transform: translateY(-1px); }
  .pl-customize:hover svg { animation: pl-tilt .6s var(--pl-spring); }
  .pl-swatch:hover { transform: scale(1.1); }
  .pl-views button[aria-pressed="false"]:hover { background: #ffffffd9; }
  .pl-acc summary:hover strong { color: var(--pl-accent); }
}
@media (max-width: 860px) {
  .pl-main { padding: 0 16px; margin-top: 8px; }
  .pl { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pl-stage { position: static; }
  .pl-art { border-radius: 22px; }
  .pl-actions { flex-direction: column; }
  /* choosing colors on the phone: the piece stays in view, smaller, above the palette */
  .pl.is-pinned .pl-stage { position: sticky; top: 8px; z-index: 6; will-change: transform; }
  /* atrás da peça presa, uma faixa de vidro do tom da página: o que rola por baixo não aparece nas bordas */
  .pl.is-pinned .pl-stage::before { content: ''; position: absolute; top: -8px; left: -16px; right: -16px; bottom: -14px; z-index: -1; background: color-mix(in srgb, var(--bg, #f3faf6) 84%, transparent); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .pl-price strong { font-size: 28px; }
  .pl.is-customizing .pl-art { aspect-ratio: auto; height: min(40svh, 320px); }
  .pl.is-pinned .pl-art { box-shadow: 0 10px 26px #2a1c221f; }
  .pl-drag { bottom: 12px; }
  .pl.is-customizing .pl-views { display: none; }
  .pl-swatch { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl *, .pl *::before, .pl *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
  .pl-customize[aria-expanded="true"]::before { animation: none; }
}