/** Shopify CDN: Minification failed

Line 3351:28 Expected identifier but found whitespace
Line 3351:30 Expected identifier but found "%"
Line 3351:73 Unexpected "repeat("
Line 3351:88 Expected identifier but found "%"
Line 3351:97 Unexpected "1fr"
Line 3351:101 Expected identifier but found "%"
Line 3353:4 Unexpected "{"
Line 3353:5 Expected identifier but found "%"
Line 3374:4 Unexpected "{"
Line 3374:5 Expected identifier but found "%"
... and 3 more hidden warnings

**/
/* START_SECTION:panda-apps (INDEX:46) */
.panda-apps {
    padding: 120px 56px;
    position: relative;
    overflow: hidden;
  }
  .panda-apps__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 56px;
  }
  .panda-apps__tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .panda-apps__heading {
    font-size: clamp(40px, 4.5vw, 68px);
    font-weight: 900;
    line-height: 0.9;
    margin-top: 0;
    margin-bottom: 0;
  }
  .panda-apps__handstand {
    font-family: var(--panda-font-display);
    font-weight: normal;
    display: block;
  }
  .panda-apps__subtitle {
    font-size: 15px;
    line-height: 1.7;
    max-width: 520px;
    margin: 16px 0 0;
  }
  .panda-apps__button {
    flex-shrink: 0;
    background: var(--panda-btn-bg, var(--panda-bond));
    color: var(--panda-btn-text, var(--panda-white));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px 28px;
    text-decoration: none;
    border: 2px solid var(--panda-btn-bg, var(--panda-bond));
    box-sizing: border-box;
    transition: opacity 0.2s;
    display: inline-block;
  }
  .panda-apps__button.panda-btn--secundario {
    background: transparent;
    color: var(--panda-btn-bg, var(--panda-bond));
  }
  .panda-apps__button:hover {
    opacity: 0.82;
  }
  .panda-apps__blocks {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .panda-apps__block:empty {
    display: none;
  }

  @media (max-width: 1100px) {
    .panda-apps {
      padding: 100px 24px;
    }
  }
  @media (max-width: 640px) {
    .panda-apps__header {
      align-items: flex-start;
    }
  }
/* END_SECTION:panda-apps */
/* START_SECTION:panda-cart-drawer (INDEX:50) */
.panda-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 700;
    pointer-events: none;
  }
  .panda-cart-drawer.open {
    pointer-events: all;
  }
  .panda-cart-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(9, 5, 5, 0.6);
    opacity: 0;
    transition: opacity 0.4s;
    backdrop-filter: blur(4px);
  }
  .panda-cart-drawer__overlay:empty {
    /* base.css esconde qualquer div:empty por padrão (regra de a11y do Dawn) */
    display: block;
  }
  .panda-cart-drawer.open .panda-cart-drawer__overlay {
    opacity: 1;
  }
  .panda-cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(460px, 95vw);
    background: var(--panda-silk-bg);
    border-left: 1px solid rgba(9, 5, 5, 0.12);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .panda-cart-drawer.open .panda-cart-drawer__panel {
    transform: translateX(0);
  }
  .panda-cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    border-bottom: 1px solid rgba(9, 5, 5, 0.1);
    flex-shrink: 0;
  }
  .panda-cart-drawer__header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .panda-cart-drawer__title {
    font-size: 20px;
    font-weight: 900;
    color: var(--panda-ink);
  }
  .panda-cart-drawer__count {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(9, 5, 5, 0.45);
  }
  .panda-cart-drawer__close {
    background: none;
    border: none;
    color: rgba(9, 5, 5, 0.4);
    cursor: pointer;
    padding: 6px;
    transition: color 0.2s;
  }
  .panda-cart-drawer__close:hover {
    color: var(--panda-ink);
  }
  .panda-cart-drawer__items {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .panda-cart-item {
    display: flex;
    gap: 16px;
    padding: 20px 28px;
    border-bottom: 1px solid rgba(9, 5, 5, 0.08);
    position: relative;
    transition: background 0.2s;
  }
  .panda-cart-item:hover {
    background: rgba(9, 5, 5, 0.03);
  }
  .panda-cart-item__img {
    display: block;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    overflow: hidden;
    background: #e0e1ce;
  }
  .panda-cart-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }
  .panda-cart-item__info {
    flex: 1;
    min-width: 0;
  }
  .panda-cart-item__name {
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: var(--panda-ink);
    margin-bottom: 3px;
    text-decoration: none;
  }
  .panda-cart-item__meta {
    font-size: 11px;
    color: rgba(9, 5, 5, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
  }
  .panda-cart-item__grav {
    font-size: 11px;
    color: rgba(9, 5, 5, 0.4);
    font-family: var(--panda-font-body);
  }
  .panda-cart-item__grav:has(+ .panda-cart-item__bottom) {
    margin-bottom: 10px;
  }
  .panda-cart-item__grav--empty {
    opacity: 0.6;
    font-style: italic;
    font-family: var(--panda-font-body);
  }
  .panda-cart-item__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .panda-cart-qty {
    display: flex;
    align-items: center;
    border: 1px solid rgba(9, 5, 5, 0.18);
  }
  .panda-qty-btn {
    background: none;
    border: none;
    color: var(--panda-ink);
    font-size: 16px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.2s;
    line-height: 1;
  }
  .panda-qty-btn:hover {
    background: var(--panda-bond);
    color: var(--panda-white);
  }
  .panda-qty-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--panda-ink);
    padding: 4px 10px;
    border-left: 1px solid rgba(9, 5, 5, 0.18);
    border-right: 1px solid rgba(9, 5, 5, 0.18);
    min-width: 32px;
    text-align: center;
    display: inline-block;
  }
  .panda-cart-qty--locked .panda-qty-val {
    border-left: none;
    border-right: none;
  }
  .panda-cart-item__price {
    font-size: 16px;
    font-weight: 900;
    color: var(--panda-ink);
  }
  .panda-cart-item__remove {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: rgba(9, 5, 5, 0.2);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
  }
  .panda-cart-item__remove:hover {
    color: var(--panda-bond);
  }
  .panda-cart-item__remove.panda-btn-loading {
    position: absolute;
  }
  .panda-cart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 28px;
    text-align: center;
    color: rgba(9, 5, 5, 0.35);
  }
  .panda-cart-empty__title {
    font-family: var(--panda-font-display);
    font-size: 32px;
    color: var(--panda-ink);
    margin: 16px 0 8px;
  }
  .panda-cart-empty__sub {
    font-size: 14px;
    color: rgba(9, 5, 5, 0.5);
    margin-bottom: 32px;
    line-height: 1.6;
  }
  .panda-cart-empty__btn {
    background: var(--panda-empty-btn-bg, var(--panda-bond));
    color: var(--panda-empty-btn-text, var(--panda-white));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 32px;
    border: 2px solid var(--panda-empty-btn-bg, var(--panda-bond));
    box-sizing: border-box;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s;
  }
  .panda-cart-empty__btn:hover {
    opacity: 0.82;
  }
  .panda-cart-empty__btn.panda-btn--secundario {
    background: transparent;
    color: var(--panda-empty-btn-bg, var(--panda-bond));
  }
  .panda-cart-rec {
    padding: 16px 28px;
    border-top: 1px solid rgba(9, 5, 5, 0.08);
    flex-shrink: 0;
    position: relative;
  }
  .panda-cart-rec__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(9, 5, 5, 0.4);
    margin-bottom: 12px;
  }
  .panda-cart-rec__track {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .panda-cart-rec__track::-webkit-scrollbar {
    display: none;
  }
  .panda-cart-rec__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(9, 5, 5, 0.15);
    background: var(--panda-white);
    color: var(--panda-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
  }
  .panda-cart-rec__nav--prev {
    left: 18px;
  }
  .panda-cart-rec__nav--next {
    right: 18px;
  }
  .panda-cart-rec-card {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--panda-white);
    padding: 10px;
    border: 1px solid rgba(9, 5, 5, 0.07);
    transition: border-color 0.2s;
    flex: 0 0 220px;
    width: 220px;
    scroll-snap-align: start;
  }
  .panda-cart-rec-card:hover {
    border-color: rgba(192, 19, 3, 0.3);
  }
  .panda-cart-rec-img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    background: #e0e1ce;
  }
  .panda-cart-rec-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }
  .panda-cart-rec-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .panda-cart-rec-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--panda-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .panda-cart-rec-price {
    font-size: 11px;
    color: var(--panda-bond);
    font-weight: 700;
  }
  .panda-cart-rec-add {
    background: var(--panda-btn-bg, var(--panda-bond));
    border: 2px solid var(--panda-btn-bg, var(--panda-bond));
    color: var(--panda-btn-text, var(--panda-white));
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 8px;
    cursor: pointer;
    transition: opacity 0.2s;
    align-self: flex-start;
  }
  .panda-cart-rec-add:hover {
    opacity: 0.82;
  }
  .panda-cart-rec-add.panda-btn--secundario {
    background: transparent;
    color: var(--panda-btn-bg, var(--panda-bond));
  }
  .panda-cart-footer {
    padding: 20px 28px;
    border-top: 1px solid rgba(9, 5, 5, 0.1);
    flex-shrink: 0;
    background: var(--panda-white);
  }
  .panda-cart-subtotal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .panda-cart-subtotal-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(9, 5, 5, 0.45);
  }
  .panda-cart-subtotal-val {
    font-size: 26px;
    font-weight: 900;
    color: var(--panda-ink);
  }
  .panda-cart-parcel {
    font-size: 11px;
    color: rgba(9, 5, 5, 0.4);
    margin-bottom: 12px;
  }
  .panda-cart-shipping {
    font-size: 12px;
    padding: 8px 12px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .panda-cart-shipping svg {
    flex-shrink: 0;
  }
  .panda-cart-shipping--ok {
    color: rgba(45, 106, 0, 0.9);
    background: rgba(45, 106, 0, 0.1);
  }
  .panda-cart-shipping--pending {
    color: rgba(140, 80, 0, 0.9);
    background: rgba(200, 120, 0, 0.08);
  }
  .panda-cart-checkout-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--panda-checkout-btn-bg, var(--panda-bond));
    color: var(--panda-checkout-btn-text, var(--panda-white));
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 17px;
    border: 2px solid var(--panda-checkout-btn-bg, var(--panda-bond));
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
  }
  .panda-cart-checkout-btn::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
  }
  .panda-cart-checkout-btn:hover {
    opacity: 0.82;
  }
  .panda-cart-checkout-btn.panda-btn--secundario {
    background: transparent;
    color: var(--panda-checkout-btn-bg, var(--panda-bond));
  }
  .panda-cart-checkout-btn.panda-btn--secundario::after {
    border-color: rgba(9, 5, 5, 0.1);
  }
/* END_SECTION:panda-cart-drawer */
/* START_SECTION:panda-expose (INDEX:59) */
.panda-expose {
    position: relative;
    overflow: hidden;
  }
  .panda-expose__handstand {
    font-family: var(--panda-font-display);
    font-weight: normal;
    color: var(--panda-silk);
    display: block;
  }

  /* full-overlay (expose-1) */
  .panda-expose--full-overlay {
    height: 100vh;
    background: var(--panda-bond);
  }
  .panda-expose__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    filter: contrast(1.1) saturate(0.85);
    mix-blend-mode: multiply;
    opacity: 0.7;
  }
  .panda-expose__fo-text {
    position: absolute;
    top: 50%;
    left: 56px;
    transform: translateY(-50%);
    z-index: 2;
  }
  .panda-expose__fo-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(235, 238, 193, 0.6);
    margin-bottom: 16px;
  }
  .panda-expose__fo-title {
    font-weight: 900;
    font-size: clamp(64px, 8vw, 130px);
    line-height: 0.88;
    color: var(--panda-silk);
    text-shadow: 0 4px 40px rgba(9, 5, 5, 0.4);
  }
  .panda-expose__fo-sub {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(235, 238, 193, 0.8);
    max-width: 420px;
    margin-top: 24px;
  }
  .panda-expose__fo-num {
    position: absolute;
    right: 56px;
    bottom: 40px;
    font-size: 200px;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(235, 238, 193, 0.12);
    line-height: 1;
  }

  /* grid (expose-2) */
  .panda-expose--grid {
    background: var(--panda-ink);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50vh 50vh;
    gap: 2px;
  }
  .panda-expose__cell {
    position: relative;
    overflow: hidden;
  }
  .panda-expose__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform 0.6s;
    filter: grayscale(10%);
    display: block;
  }
  .panda-expose__cell:hover img {
    transform: scale(1.06);
  }
  .panda-expose__cell--big {
    grid-column: span 2;
    grid-row: span 2;
  }
  .panda-expose__cell-label {
    position: absolute;
    z-index: 2;
    background: var(--panda-bond);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--panda-silk);
    padding: 6px 12px;
  }
  .panda-expose__cell-label--tl {
    top: 16px;
    left: 16px;
  }
  .panda-expose__cell-label--br {
    bottom: 16px;
    right: 16px;
  }
  .panda-expose__cell-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    background: linear-gradient(to top, rgba(9, 5, 5, 0.7) 0%, transparent 50%);
  }
  .panda-expose__overlay-title {
    font-family: var(--panda-font-display);
    font-size: clamp(40px, 4vw, 64px);
    color: var(--panda-silk);
    line-height: 1;
    margin-bottom: 8px;
  }
  .panda-expose__overlay-sub {
    font-size: 14px;
    color: rgba(235, 238, 193, 0.7);
    max-width: 320px;
    line-height: 1.5;
  }
  .panda-expose__text-cell {
    background: var(--panda-bond);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
  }
  .panda-expose__text-cell::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: var(--panda-wine);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    opacity: 0.4;
  }
  .panda-expose__text-num {
    font-size: 80px;
    font-weight: 900;
    color: rgba(9, 5, 5, 0.15);
    line-height: 1;
    position: absolute;
    bottom: -10px;
    right: 16px;
  }
  .panda-expose__text-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(235, 238, 193, 0.5);
    margin-bottom: 12px;
  }
  .panda-expose__text-title {
    font-size: 26px;
    font-weight: 900;
    color: var(--panda-silk);
    margin-bottom: 10px;
    line-height: 1.1;
  }
  .panda-expose__text-body {
    font-size: 13px;
    line-height: 1.65;
    color: rgba(235, 238, 193, 0.7);
  }

  /* stats-float (expose-3) */
  .panda-expose--stats-float {
    height: 90vh;
    background: var(--panda-ink);
  }
  .panda-expose__sf-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    filter: contrast(1.05) saturate(0.9);
    display: block;
  }
  .panda-expose--stats-float::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(9, 5, 5, 0.85) 0%, rgba(9, 5, 5, 0.3) 50%, transparent 100%);
  }
  .panda-expose__sf-content {
    position: absolute;
    top: 50%;
    left: 56px;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 500px;
  }
  .panda-expose__sf-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(235, 238, 193, 0.5);
    margin-bottom: 16px;
  }
  .panda-expose__sf-title {
    font-size: clamp(48px, 5.5vw, 88px);
    font-weight: 900;
    line-height: 0.9;
    color: var(--panda-white);
    margin-bottom: 24px;
  }
  .panda-expose__sf-body {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(235, 238, 193, 0.7);
    margin-bottom: 36px;
    max-width: 380px;
  }
  .panda-expose__stats {
    display: flex;
    gap: 32px;
  }
  .panda-expose__stat-n {
    font-size: 36px;
    font-weight: 900;
    color: var(--panda-bond);
    line-height: 1;
  }
  .panda-expose__stat-l {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(235, 238, 193, 0.45);
    margin-top: 4px;
  }
  .panda-expose__float-card {
    position: absolute;
    bottom: 48px;
    right: 56px;
    z-index: 3;
    background: rgba(9, 5, 5, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(192, 19, 3, 0.3);
    padding: 24px 28px;
    width: 260px;
  }
  .panda-expose__fc-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--panda-bond);
    margin-bottom: 10px;
  }
  .panda-expose__fc-price {
    font-size: 40px;
    font-weight: 900;
    color: var(--panda-white);
    line-height: 1;
    margin-bottom: 4px;
  }
  .panda-expose__fc-parcel {
    font-size: 12px;
    color: var(--panda-concrete);
    margin-bottom: 16px;
  }
  .panda-expose__fc-btn {
    display: block;
    background: var(--panda-btn-bg, var(--panda-bond));
    color: var(--panda-btn-text, var(--panda-white));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 13px;
    text-align: center;
    text-decoration: none;
    border: 2px solid var(--panda-btn-bg, var(--panda-bond));
    box-sizing: border-box;
    transition: opacity 0.2s;
  }
  .panda-expose__fc-btn.panda-btn--secundario {
    background: transparent;
    color: var(--panda-btn-bg, var(--panda-bond));
  }
  .panda-expose__fc-btn:hover {
    opacity: 0.82;
  }

  @media (max-width: 1100px) {
    .panda-expose--grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
    }
    .panda-expose__cell--big {
      grid-column: span 2;
      height: 50vw;
    }
  }
  @media (max-width: 640px) {
    .panda-expose--grid {
      grid-template-columns: 1fr;
    }
    .panda-expose__cell--big {
      grid-column: span 1;
      height: 60vw;
    }
    .panda-expose--stats-float {
      height: auto;
    }
    .panda-expose__sf-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .panda-expose__sf-content {
      position: relative;
      top: auto;
      left: 0;
      transform: none;
      padding: 72px 24px 28px;
      max-width: 100%;
    }
    .panda-expose__float-card {
      position: relative;
      bottom: auto;
      right: auto;
      width: calc(100% - 48px);
      margin: 0 24px 48px;
    }
  }
/* END_SECTION:panda-expose */
/* START_SECTION:panda-footer (INDEX:60) */
.panda-footer {
    background: #040202;
    padding: 80px 56px 40px;
    border-top: 1px solid rgba(192, 19, 3, 0.14);
  }
  .panda-footer__top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
  }
  .panda-f-tagline {
    font-family: var(--panda-font-display);
    font-size: 22px;
    color: var(--panda-silk);
    margin-bottom: 14px;
    line-height: 1.3;
  }
  .panda-f-desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--panda-concrete);
    max-width: 270px;
    margin-bottom: 24px;
  }
  .panda-f-social {
    display: flex;
    gap: 12px;
  }
  .panda-f-soc {
    width: 42px;
    height: 42px;
    border: 1.5px solid var(--panda-bond);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--panda-bond);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
  }
  .panda-f-soc:hover {
    background: var(--panda-bond);
    border-color: var(--panda-bond);
    color: var(--panda-white);
  }
  .panda-f-col-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--panda-bond);
    margin-bottom: 22px;
  }
  .panda-f-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 0;
  }
  .panda-f-links a {
    font-size: 13px;
    color: var(--panda-concrete);
    text-decoration: none;
    transition: color 0.2s;
  }
  .panda-f-links a:hover {
    color: var(--panda-white);
  }
  .panda-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .panda-f-copy {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.18);
  }
  .panda-f-panda {
    font-family: var(--panda-font-display);
    font-size: 16px;
    color: rgba(192, 19, 3, 0.4);
  }

  @media (max-width: 1100px) {
    .panda-footer {
      padding: 60px 24px 32px;
    }
    .panda-footer__top {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .panda-footer__bottom {
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
    }
  }

  /* No mobile os textos ficavam pequenos demais (mesmo tamanho do desktop,
     que é visto de mais longe) e os cinzas (--panda-concrete) ficavam
     apagados demais contra o fundo quase preto — aqui aumenta o tamanho e
     clareia a cor especificamente pra esse breakpoint, sem mexer no
     desktop. */
  @media (max-width: 640px) {
    .panda-f-tagline {
      font-size: 24px;
    }
    .panda-f-desc {
      font-size: 14.5px;
      color: rgba(255, 255, 255, 0.6);
      max-width: none;
    }
    .panda-f-col-title {
      font-size: 12px;
      letter-spacing: 0.16em;
    }
    .panda-f-links {
      gap: 14px;
    }
    .panda-f-links a {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.6);
    }
    .panda-f-copy {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
    }
    .panda-f-panda {
      font-size: 17px;
    }
  }
/* END_SECTION:panda-footer */
/* START_SECTION:panda-header (INDEX:63) */
.panda-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 56px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(192, 19, 3, 0.18);
    transition: border-color 0.3s;
  }
  .panda-nav__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }
  .panda-nav__logo-img {
    height: 30px;
    width: auto;
  }
  .panda-nav__logo-txt {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--panda-ink);
    text-transform: capitalize;
  }
  .panda-nav__links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .panda-nav__links a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(9, 5, 5, 0.62);
    text-decoration: none;
    transition: color 0.2s;
  }
  .panda-nav__links a:hover {
    color: var(--panda-bond);
  }
  .panda-nav__cta {
    background: var(--panda-btn-bg, var(--panda-bond)) !important;
    color: var(--panda-btn-text, var(--panda-white)) !important;
    border: 2px solid var(--panda-btn-bg, var(--panda-bond));
    box-sizing: border-box;
    padding: 10px 22px;
    font-weight: 700 !important;
  }
  .panda-nav__cta.panda-btn--secundario {
    background: transparent !important;
    color: var(--panda-btn-bg, var(--panda-bond)) !important;
  }
  .panda-nav__cta:hover {
    opacity: 0.82;
  }
  .panda-nav__has-sub {
    position: relative;
  }
  .panda-nav__has-sub > a {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }
  .panda-nav__arrow {
    opacity: 0.5;
    transition: transform 0.25s;
    display: inline-flex;
    align-items: center;
  }
  .panda-nav__has-sub:hover .panda-nav__arrow {
    transform: rotate(180deg);
  }
  .panda-nav__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: var(--panda-ink);
    border: 1px solid rgba(192, 19, 3, 0.25);
    min-width: 210px;
    padding: 6px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 300;
  }
  .panda-nav__has-sub:hover .panda-nav__sub {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
  }
  .panda-nav__sub a {
    display: block;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
  }
  .panda-nav__sub a:hover {
    color: var(--panda-silk);
    background: rgba(192, 19, 3, 0.1);
  }
  .panda-nav__icons {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .panda-nav__icon-btn {
    background: none;
    border: none;
    color: rgba(9, 5, 5, 0.65);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    position: relative;
    text-decoration: none;
  }
  .panda-nav__icon-btn:hover {
    color: var(--panda-bond);
  }
  /* Ícone do carrinho é o inverso dos outros: vermelho por padrão (chama
     mais atenção pra ação de compra), preto no hover. */
  #panda-cart-toggle {
    color: var(--panda-bond);
  }
  #panda-cart-toggle:hover {
    color: var(--panda-ink);
  }
  .panda-nav__cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--panda-bond);
    color: var(--panda-white);
    font-size: 9px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .panda-nav__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
  }
  .panda-nav__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--panda-ink);
    transition: all 0.35s cubic-bezier(0.77, 0, 0.175, 1);
    transform-origin: center;
  }
  .panda-nav__hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .panda-nav__hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .panda-nav__hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  @media (max-width: 1100px) {
    .panda-nav {
      padding: 16px 24px;
    }
    .panda-nav__hamburger {
      display: flex;
    }
    .panda-nav__links {
      display: none !important;
    }
  }

  @media (max-width: 640px) {
    .panda-nav {
      padding: 14px 16px 14px 10px;
    }
    .panda-nav__logo-img {
      height: 24px;
    }
  }

  /* search overlay */
  .panda-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 800;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .panda-search-overlay.open {
    pointer-events: all;
    opacity: 1;
  }
  .panda-search-overlay__bg {
    position: absolute;
    inset: 0;
    background: rgba(9, 5, 5, 0.85);
    backdrop-filter: blur(8px);
  }
  .panda-search-overlay__bg:empty {
    /* base.css esconde qualquer div:empty por padrão (regra de a11y do Dawn) */
    display: block;
  }
  .panda-search-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--panda-ink);
    border-bottom: 1px solid rgba(192, 19, 3, 0.2);
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .panda-search-overlay.open .panda-search-box {
    transform: translateY(0);
  }
  .panda-search-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 40px 36px;
    position: relative;
  }
  .panda-search-close {
    position: absolute;
    top: 20px;
    right: 28px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 8px;
  }
  .panda-search-close:hover {
    color: var(--panda-white);
  }
  .panda-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 2px solid var(--panda-bond);
    padding-bottom: 16px;
    padding-right: 64px;
    margin-bottom: 28px;
  }
  .panda-search-icon {
    color: var(--panda-bond);
    flex-shrink: 0;
    display: flex;
  }
  .panda-search-submit {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--panda-bond);
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    transition: color 0.2s, transform 0.2s;
  }
  .panda-search-submit:hover {
    color: var(--panda-wine);
    transform: translateX(3px);
  }
  .panda-search-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 700;
    color: var(--panda-white);
    font-family: var(--panda-font-body);
  }
  .panda-search-input::-webkit-search-decoration,
  .panda-search-input::-webkit-search-cancel-button,
  .panda-search-input::-webkit-search-results-button,
  .panda-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
  .panda-search-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
  }
  .panda-search-sug-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--panda-concrete);
    margin-bottom: 14px;
  }
  .panda-search-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .panda-search-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s;
  }
  .panda-search-tag:hover {
    background: var(--panda-bond);
    border-color: var(--panda-bond);
    color: var(--panda-white);
  }

  /* mobile drawer */
  .panda-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 700;
    pointer-events: none;
  }
  .panda-mobile-drawer.open {
    pointer-events: all;
  }
  .panda-mobile-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(9, 5, 5, 0.75);
    opacity: 0;
    transition: opacity 0.4s;
    backdrop-filter: blur(4px);
  }
  .panda-mobile-drawer__overlay:empty {
    /* base.css esconde qualquer div:empty por padrão (regra de a11y do Dawn) */
    display: block;
  }
  .panda-mobile-drawer.open .panda-mobile-drawer__overlay {
    opacity: 1;
  }
  .panda-mobile-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 90vw);
    background: var(--panda-white);
    border-left: 1px solid rgba(9, 5, 5, 0.1);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .panda-mobile-drawer.open .panda-mobile-drawer__panel {
    transform: translateX(0);
  }
  .panda-mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid rgba(9, 5, 5, 0.08);
  }
  .panda-mobile-drawer__close {
    background: none;
    border: none;
    color: rgba(9, 5, 5, 0.5);
    cursor: pointer;
    padding: 6px;
  }
  .panda-mobile-drawer__close:hover {
    color: var(--panda-ink);
  }
  .panda-mobile-nav {
    flex: 1;
    padding: 40px 28px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .panda-mobile-nav-item {
    border-bottom: 1px solid rgba(9, 5, 5, 0.08);
  }
  .panda-mobile-nav-item .panda-mobile-nav-link {
    border-bottom: none;
  }
  .panda-mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: clamp(32px, 7vw, 48px);
    font-weight: 900;
    color: var(--panda-ink);
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid rgba(9, 5, 5, 0.08);
    line-height: 1;
    transition: color 0.2s;
  }
  .panda-mobile-nav-link::after {
    content: attr(data-num);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--panda-bond);
  }
  .panda-mobile-nav-link:hover {
    color: var(--panda-bond);
  }
  .panda-mobile-sub-toggle {
    background: none;
    border: none;
    color: rgba(9, 5, 5, 0.35);
    font-size: 14px;
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.3s, color 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  .panda-mobile-sub-toggle.open {
    transform: rotate(180deg);
    color: var(--panda-bond);
  }
  .panda-mobile-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.77, 0, 0.175, 1);
    background: rgba(9, 5, 5, 0.02);
  }
  .panda-mobile-sub.open {
    max-height: 320px;
  }
  .panda-mobile-sub-link {
    display: block;
    padding: 11px 28px 11px 40px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(9, 5, 5, 0.5);
    text-decoration: none;
    border-bottom: 1px solid rgba(9, 5, 5, 0.06);
    transition: color 0.2s;
  }
  .panda-mobile-sub-link:hover {
    color: var(--panda-bond);
  }
  .panda-mobile-drawer__footer {
    padding: 28px;
    border-top: 1px solid rgba(9, 5, 5, 0.08);
  }
  .panda-mobile-cta {
    display: block;
    background: var(--panda-btn-bg, var(--panda-bond));
    color: var(--panda-btn-text, var(--panda-white));
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 16px;
    border: 2px solid var(--panda-btn-bg, var(--panda-bond));
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s;
  }
  .panda-mobile-cta.panda-btn--secundario {
    background: transparent;
    color: var(--panda-btn-bg, var(--panda-bond));
  }
  .panda-mobile-cta:hover {
    opacity: 0.82;
  }
/* END_SECTION:panda-header */
/* START_SECTION:panda-personalizacao (INDEX:75) */
.panda-pers {
    background: var(--panda-bond);
    padding: 120px 56px;
    position: relative;
    overflow: hidden;
  }
  .panda-pers::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(9, 5, 5, 0.055) 40px,
      rgba(9, 5, 5, 0.055) 41px
    );
  }
  .panda-pers__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1360px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .panda-pers__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(235, 238, 193, 0.5);
    margin-bottom: 8px;
  }
  .panda-pers__title {
    font-weight: 900;
    font-size: clamp(52px, 5.5vw, 90px);
    line-height: 0.88;
    color: var(--panda-silk);
    margin-bottom: 24px;
  }
  .panda-pers__handstand {
    font-family: var(--panda-font-display);
    font-weight: normal;
    color: var(--panda-silk);
    display: block;
  }
  .panda-pers__body {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(235, 238, 193, 0.75);
    margin-bottom: 36px;
    max-width: 440px;
  }
  .panda-pers__opcoes {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .panda-pers__opt {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: rgba(9, 5, 5, 0.15);
    border-left: 3px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
  }
  .panda-pers__opt:hover,
  .panda-pers__opt.panda-is-active {
    border-left-color: var(--panda-silk);
    background: rgba(9, 5, 5, 0.25);
  }
  .panda-pers__opt-icon {
    font-size: 24px;
    flex-shrink: 0;
  }
  .panda-pers__opt-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--panda-silk);
    margin-bottom: 2px;
  }
  .panda-pers__opt-sub {
    font-size: 12px;
    color: rgba(235, 238, 193, 0.55);
  }
  .panda-pers__preview {
    background: rgba(9, 5, 5, 0.2);
    padding: 48px;
    text-align: center;
    position: relative;
    border: 1px solid rgba(235, 238, 193, 0.1);
  }
  .panda-pers__preview-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(235, 238, 193, 0.4);
    margin-bottom: 24px;
  }
  .panda-pers__preview-ring {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 14px solid rgba(235, 238, 193, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    position: relative;
  }
  .panda-pers__preview-ring::before {
    content: '';
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px dashed rgba(235, 238, 193, 0.2);
  }
  .panda-pers__preview-text {
    font-family: var(--panda-font-display);
    font-size: 22px;
    color: var(--panda-silk);
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .panda-pers__input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(235, 238, 193, 0.08);
    border: 1px solid rgba(235, 238, 193, 0.2);
    color: var(--panda-silk);
    font-size: 16px;
    padding: 14px 18px;
    outline: none;
    text-align: center;
    transition: border-color 0.2s;
    margin-bottom: 12px;
  }
  .panda-pers__input::placeholder {
    color: rgba(235, 238, 193, 0.3);
  }
  .panda-pers__input:focus {
    border-color: var(--panda-silk);
  }
  .panda-pers__counter {
    font-size: 11px;
    color: rgba(235, 238, 193, 0.4);
    text-align: right;
    margin-bottom: 20px;
  }
  .panda-pers__add-btn {
    width: 100%;
    box-sizing: border-box;
    background: var(--panda-btn-bg, var(--panda-silk));
    color: var(--panda-btn-text, var(--panda-wine));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px;
    border: 2px solid var(--panda-btn-bg, var(--panda-silk));
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .panda-pers__add-btn.panda-btn--secundario {
    background: transparent;
    color: var(--panda-btn-bg, var(--panda-silk));
  }
  .panda-pers__add-btn:hover {
    opacity: 0.82;
  }

  @media (max-width: 1100px) {
    .panda-pers {
      padding: 100px 24px;
    }
    .panda-pers__grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }
  }
/* END_SECTION:panda-personalizacao */
/* START_SECTION:panda-produto-main (INDEX:77) */
.panda-produto-main {
    background: var(--panda-silk-bg);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 100vh;
    padding-top: 66px;
  }
  .panda-pm-gallery {
    position: sticky;
    top: 66px;
    overflow: hidden;
    background: #e8e9d5;
    display: flex;
    flex-direction: column;
    align-self: start;
  }
  .panda-pm-gallery__badges {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
  }
  .panda-g-badge {
    background: var(--panda-bond);
    color: var(--panda-white);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
  }
  .panda-g-badge--green {
    background: var(--panda-forest);
  }
  .panda-pm-gallery__viewport {
    overflow: hidden;
    height: calc(100vh - 66px);
    flex-shrink: 0;
  }
  .panda-pm-gallery__track {
    display: flex;
    height: 100%;
    cursor: grab;
    touch-action: pan-y;
    will-change: transform;
  }
  .panda-pm-gallery__track.panda-is-dragging {
    cursor: grabbing;
    user-select: none;
  }
  .panda-pm-gallery__slide {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .panda-pm-gallery__slide:not(:has(.panda-is-loaded)) {
    background: linear-gradient(90deg, #e0e1ce 25%, #eceed9 50%, #e0e1ce 75%);
    background-size: 600px 100%;
    animation: panda-pm-shimmer 1.4s infinite linear;
  }
  @keyframes panda-pm-shimmer {
    0% {
      background-position: -300px 0;
    }
    100% {
      background-position: 300px 0;
    }
  }
  .panda-pm-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .panda-pm-gallery__img.panda-is-loaded {
    opacity: 1;
  }
  .panda-pm-gallery__nav {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--panda-ink);
    transition: all 0.2s;
    z-index: 2;
  }
  .panda-pm-gallery__nav:hover {
    background: var(--panda-silk);
    transform: translateY(-50%) scale(1.08);
  }
  .panda-pm-gallery__nav--prev {
    left: 16px;
  }
  .panda-pm-gallery__nav--next {
    right: 16px;
  }
  .panda-pm-gallery__minibanner {
    width: 100%;
    line-height: 0;
    flex-shrink: 0;
  }
  .panda-pm-gallery__minibanner img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  .panda-pm-thumbs-wrap {
    position: relative;
  }
  .panda-pm-gallery__thumbs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(235, 238, 193, 0.4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .panda-pm-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }
  .panda-pm-thumbs-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(9, 5, 5, 0.18);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--panda-ink);
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .panda-pm-thumbs-nav.panda-is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .panda-pm-thumbs-nav:hover {
    background: var(--panda-silk);
  }
  .panda-pm-thumbs-nav--prev {
    left: 4px;
  }
  .panda-pm-thumbs-nav--next {
    right: 4px;
  }
  .panda-pm-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    cursor: pointer;
  }
  .panda-pm-thumb.panda-is-active,
  .panda-pm-thumb:hover {
    border-color: var(--panda-bond);
  }
  .panda-pm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }

  .panda-pm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .panda-pm-lightbox.panda-is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .panda-pm-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(9, 5, 5, 0.9);
  }
  .panda-pm-lightbox__overlay:empty {
    display: block;
  }
  .panda-pm-lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--panda-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
  }
  .panda-pm-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  .panda-pm-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--panda-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .panda-pm-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.08);
  }
  .panda-pm-lightbox__nav--prev {
    left: 24px;
  }
  .panda-pm-lightbox__nav--next {
    right: 24px;
  }
  .panda-pm-lightbox__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
  }
  .panda-pm-lightbox__stage {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
  }
  .panda-pm-lightbox__img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  .panda-pm-lightbox__img.panda-is-loaded {
    opacity: 1;
  }
  .panda-pm-lightbox__img.panda-is-zoomed {
    cursor: zoom-out;
    transform: scale(2.2);
  }

  .panda-pm-info {
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
  }
  .panda-pm-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(9, 5, 5, 0.1), transparent);
  }
  .panda-pi-breadcrumb {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--panda-concrete);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .panda-pi-breadcrumb a {
    color: var(--panda-concrete);
    text-decoration: none;
  }
  .panda-pi-breadcrumb span {
    color: var(--panda-bond);
  }
  .panda-pi-name {
    font-size: clamp(36px, 3.5vw, 54px);
    font-weight: 900;
    line-height: 0.9;
    color: var(--panda-ink);
    margin: 0;
  }
  .panda-pi-name__hl {
    font-family: var(--panda-font-display);
    font-weight: normal;
    color: var(--panda-bond);
    font-size: 0.85em;
    display: block;
  }
  .panda-pi-ref {
    font-size: 11px;
    color: var(--panda-concrete);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 6px;
  }
  .panda-pi-rating {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .panda-pi-stars {
    color: var(--panda-bond);
    font-size: 16px;
  }
  .panda-pi-rating-count {
    font-size: 12px;
    color: var(--panda-concrete);
  }
  .panda-pi-rating-divider {
    width: 1px;
    height: 16px;
    background: rgba(9, 5, 5, 0.15);
  }
  .panda-pi-rating-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--panda-bond);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .panda-pi-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--panda-concrete);
    margin-bottom: 12px;
  }
  .panda-pi-size-guide {
    font-size: 11px;
    font-weight: 700;
    color: var(--panda-bond);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
  }
  .panda-pi-size-guide::after {
    content: '→';
  }
  .panda-pi-materials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .panda-pi-mat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border: 1px solid rgba(9, 5, 5, 0.15);
    color: var(--panda-concrete);
  }
  .panda-pi-gravacao {
    background: rgba(9, 5, 5, 0.04);
    padding: 20px;
    border-left: 3px solid var(--panda-bond);
  }
  .panda-pi-grav-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--panda-bond);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .panda-pi-grav-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--panda-white);
    border: 1px solid rgba(9, 5, 5, 0.15);
    font-size: 14px;
    padding: 12px 16px;
    outline: none;
    color: var(--panda-ink);
    transition: border-color 0.2s;
  }
  .panda-pi-grav-input:focus {
    border-color: var(--panda-bond);
  }
  .panda-pi-grav-hint {
    font-size: 11px;
    color: var(--panda-concrete);
    margin-top: 6px;
  }
  .panda-pi-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .panda-pi-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Sem isso, um item de grid não encolhe além da largura mínima do seu
       conteúdo (min-width:auto por padrão) — o <input> força a coluna a
       ficar larga demais, e as 2 colunas "vazam" da tela em telas estreitas
       em vez de encolher de verdade junto com o viewport. */
    min-width: 0;
  }
  .panda-pi-field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--panda-concrete);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .panda-req {
    color: var(--panda-bond);
  }
  .panda-pi-field-counter {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(9, 5, 5, 0.35);
  }
  .panda-pi-select {
    width: 100%;
    box-sizing: border-box;
    background: var(--panda-white);
    border: 1px solid rgba(9, 5, 5, 0.15);
    font-size: 14px;
    padding: 12px 36px 12px 16px;
    outline: none;
    color: var(--panda-ink);
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23090505' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }
  .panda-pi-select:focus {
    border-color: var(--panda-bond);
  }
  .panda-pi-sol-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--panda-concrete);
    margin-bottom: 12px;
  }
  .panda-pi-sol-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .panda-pi-sol-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--panda-white);
    border: 1.5px solid rgba(9, 5, 5, 0.14);
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
  }
  .panda-pi-sol-card:hover {
    border-color: rgba(192, 19, 3, 0.4);
  }
  .panda-pi-sol-card.panda-is-active {
    border-color: var(--panda-bond);
    background: rgba(192, 19, 3, 0.05);
  }
  .panda-pi-sol-img {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    object-fit: cover;
    background: #e8e9d5;
  }
  .panda-pi-sol-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--panda-ink);
    line-height: 1.35;
  }
  .panda-pi-sol-price {
    font-size: 11px;
    font-weight: 700;
    color: var(--panda-bond);
  }
  .panda-pi-price-block {
    border-top: 1px solid rgba(9, 5, 5, 0.1);
    padding-top: 24px;
  }
  .panda-pi-price-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
  }
  .panda-pi-frete-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--panda-forest);
    color: var(--panda-white);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 30px;
  }
  .panda-pi-price-old {
    font-size: 13px;
    color: var(--panda-concrete);
    text-decoration: line-through;
    margin-bottom: 4px;
  }
  .panda-pi-price {
    font-size: 52px;
    font-weight: 900;
    color: var(--panda-ink);
    line-height: 1;
  }
  .panda-pi-parcel {
    font-size: 15px;
    font-weight: 700;
    color: var(--panda-ink);
    margin-top: 6px;
  }
  .panda-pi-pix {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--panda-forest);
    background: rgba(45, 106, 0, 0.1);
    padding: 9px 16px;
    margin-top: 12px;
    border: 1px solid rgba(45, 106, 0, 0.18);
  }
  .panda-pi-frete-calc {
    position: relative;
    margin-top: 8px;
  }
  .panda-pi-frete-calc__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--panda-ink);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(9, 5, 5, 0.25);
    text-underline-offset: 3px;
    text-align: left;
    transition: color 0.2s;
  }
  /* O texto (resultado + "recalcular") fica num único span, não em 2 itens
     de flex separados — assim ele quebra linha normalmente como texto,
     em vez de cada pedaço competir por espaço isolado no flex e estourar
     a largura do botão. min-width:0 garante que esse item consiga
     encolher de verdade dentro do flex (senão trava na largura do
     conteúdo, mesmo já sendo um span só). */
  .panda-pi-frete-calc__trigger [data-shipping-calc-trigger-text] {
    min-width: 0;
  }
  .panda-pi-frete-calc__trigger:hover {
    color: var(--panda-bond);
  }
  .panda-pi-frete-calc__trigger svg {
    flex-shrink: 0;
    color: var(--panda-bond);
  }
  .panda-pi-frete-calc.panda-is-resolved .panda-pi-frete-calc__trigger {
    color: var(--panda-forest);
    text-decoration-color: rgba(45, 106, 0, 0.3);
  }
  .panda-pi-frete-calc.panda-is-resolved .panda-pi-frete-calc__trigger svg {
    color: var(--panda-forest);
  }
  /* Só aparece quando o estado foi preenchido pela detecção automática por
     IP (panda-is-auto-resolved) — deixa claro que o cliente pode trocar,
     já que ele não escolheu esse estado ativamente. Some de novo assim que
     ele mesmo escolher manualmente. */
  .panda-pi-frete-calc__recalc {
    display: none;
    font-weight: 400;
    opacity: 0.75;
    text-decoration: underline;
  }
  .panda-pi-frete-calc__recalc:not(:empty)::before {
    content: ' · ';
    text-decoration: none;
  }
  .panda-pi-frete-calc.panda-is-auto-resolved .panda-pi-frete-calc__recalc {
    display: inline;
  }
  /* Ícone de clique no fim do texto — sempre verde (não acompanha a cor
     do texto quando não resolvido/ink), reforçando visualmente que aquilo é
     clicável. Fica dentro do mesmo span do texto (não é item de flex
     separado) pra quebrar linha junto com ele em telas estreitas. */
  .panda-pi-frete-calc__click-icon {
    display: inline-block;
    vertical-align: -1px;
    margin-left: 4px;
    /* !important pra vencer a regra .panda-is-resolved ...__trigger svg
       (mais específica), que também mexe na cor dos svgs do botão. */
    color: var(--panda-forest) !important;
  }
  /* Mini popup flutuante (position:absolute) — fica ancorado logo abaixo do
     gatilho, mas NÃO participa do fluxo do documento: abrir/fechar nunca
     empurra o botão de compra/selos abaixo pra baixo (o problema do
     "accordion" antigo, que criava um vão ao fechar). */
  .panda-pi-frete-calc__panel {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    z-index: 30;
    width: 300px;
    max-width: calc(100vw - 48px);
    background: var(--panda-silk-bg);
    box-shadow: 0 20px 44px rgba(9, 5, 5, 0.3), 0 2px 10px rgba(9, 5, 5, 0.14);
  }
  .panda-pi-frete-calc.panda-is-open .panda-pi-frete-calc__panel {
    display: block;
    animation: panda-pfc-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes panda-pfc-pop {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .panda-pi-frete-calc__arrow {
    position: absolute;
    top: -7px;
    left: 22px;
    width: 14px;
    height: 14px;
    background: var(--panda-ink);
    transform: rotate(45deg);
  }
  /* base.css do Dawn esconde qualquer div vazia (div:empty{display:none}) —
     essa div não tem conteúdo, só é o "bico" do popup via background. */
  .panda-pi-frete-calc__arrow:empty {
    display: block;
  }
  .panda-pi-frete-calc__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--panda-ink);
    color: var(--panda-silk);
    padding: 14px 18px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .panda-pi-frete-calc__head svg {
    color: var(--panda-bond);
    flex-shrink: 0;
  }
  .panda-pi-frete-calc__body {
    padding: 18px;
  }
  .panda-pi-frete-calc__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--panda-concrete);
    margin-bottom: 10px;
  }
  .panda-pi-frete-calc__select-wrap {
    position: relative;
  }
  .panda-pi-frete-calc__select-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--panda-bond);
    pointer-events: none;
  }
  .panda-pi-frete-calc__select {
    width: 100%;
    box-sizing: border-box;
    background: var(--panda-white);
    border: 1.5px solid rgba(9, 5, 5, 0.15);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--panda-ink);
    padding: 13px 36px 13px 40px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23C01303' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }
  .panda-pi-frete-calc__select:focus {
    border-color: var(--panda-bond);
  }
  .panda-pi-delivery-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(192, 19, 3, 0.1);
    color: var(--panda-bond);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 9px;
    border-radius: 20px;
  }
  .panda-pi-delivery-tag svg {
    flex-shrink: 0;
  }
  /* Efeito de destaque: anel pulsando ao redor da tag, mesma ideia do
     "sonar" do botão flutuante "Descobrir aro" (panda-tamanho-button.liquid,
     .panda-tb__btn::after) — aqui adaptado ao formato de pílula. */
  .panda-pi-delivery-tag--attention::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 1.5px solid var(--panda-bond);
    opacity: 0;
    animation: panda-pi-delivery-ping 2.6s ease-out infinite;
  }
  @keyframes panda-pi-delivery-ping {
    0% {
      transform: scale(0.92);
      opacity: 0.7;
    }
    70% {
      transform: scale(1.18);
      opacity: 0;
    }
    100% {
      transform: scale(1.18);
      opacity: 0;
    }
  }
  .panda-pi-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .panda-pi-payment__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
  }
  .panda-pi-payment__item {
    display: flex;
    align-items: center;
  }
  .panda-pi-payment__icon {
    width: 38px;
    height: 24px;
  }
  .panda-pi-payment__icon--elo {
    border-radius: 3px;
  }
  .panda-pi-payment__pixwrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 24px;
    box-sizing: border-box;
    background: var(--panda-white);
    border: 1px solid rgba(9, 5, 5, 0.15);
    border-radius: 3px;
  }
  .panda-pi-payment__icon--pix {
    width: 16px;
    height: 16px;
  }
  .panda-pi-btn-main {
    background: var(--panda-btn-bg, var(--panda-bond));
    color: var(--panda-btn-text, var(--panda-white));
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 18px;
    text-align: center;
    border: 2px solid var(--panda-btn-bg, var(--panda-bond));
    box-sizing: border-box;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
  }
  .panda-pi-btn-main.panda-btn--secundario {
    background: transparent;
    color: var(--panda-btn-bg, var(--panda-bond));
  }
  .panda-pi-btn-main::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
  }
  .panda-pi-btn-main.panda-btn-loading::after {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid var(--panda-white);
    border-right-color: transparent;
    border-radius: 50%;
    animation: panda-spin 0.6s linear infinite;
  }
  .panda-pi-btn-main:hover {
    opacity: 0.82;
  }
  .panda-pi-btn-main:disabled {
    background: var(--panda-concrete);
    border-color: var(--panda-concrete);
    color: var(--panda-white);
    opacity: 1;
    cursor: not-allowed;
  }
  .panda-pi-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(9, 5, 5, 0.08);
  }
  .panda-pi-trust-item {
    background: var(--panda-silk-bg);
    padding: 14px 12px;
    text-align: center;
  }
  .panda-pi-trust-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--panda-concrete);
    line-height: 1.3;
  }

  .panda-pi-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    background: rgba(9, 5, 5, 0.95);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(192, 19, 3, 0.25);
    padding: 16px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateY(100%);
    transition: transform 0.4s ease;
  }
  /* position:fixed do sticky pode pintar por cima do menu mobile (z-index:700 em
     panda-header.liquid) mesmo tendo z-index menor — mesmo bug de stacking já visto
     no toolbar da coleção. O menu sempre prevalece enquanto estiver aberto. */
  body.panda-nav-open .panda-pi-sticky {
    visibility: hidden;
  }
  .panda-pi-sticky.panda-is-visible {
    transform: translateY(0);
  }
  .panda-pi-sticky__left {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .panda-pi-sticky__name {
    font-size: 16px;
    font-weight: 900;
    color: var(--panda-white);
  }
  .panda-pi-sticky__price {
    font-size: 22px;
    font-weight: 900;
    color: var(--panda-silk);
  }
  .panda-pi-sticky__parcel {
    font-size: 14px;
    font-weight: 700;
    color: rgba(235, 238, 193, 0.65);
  }
  .panda-pi-sticky__btn {
    background: var(--panda-btn-bg, var(--panda-bond));
    color: var(--panda-btn-text, var(--panda-white));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 36px;
    border: 2px solid var(--panda-btn-bg, var(--panda-bond));
    box-sizing: border-box;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
  }
  .panda-pi-sticky__btn.panda-btn--secundario {
    background: transparent;
    color: var(--panda-btn-bg, var(--panda-bond));
  }
  .panda-pi-sticky__btn:hover {
    opacity: 0.82;
  }
  .panda-pi-sticky__btn:disabled {
    background: var(--panda-concrete);
    border-color: var(--panda-concrete);
    color: var(--panda-white);
    opacity: 1;
    cursor: not-allowed;
  }

  @media (max-width: 1100px) {
    .panda-pi-sticky {
      padding: 14px 24px;
    }
    .panda-produto-main {
      grid-template-columns: 1fr;
    }
    .panda-pm-gallery {
      position: static;
    }
    .panda-pm-gallery__viewport {
      height: 420px;
    }
    .panda-pm-info {
      padding: 40px 24px;
    }
    .panda-pi-sol-grid {
      grid-template-columns: 1fr;
    }
    .panda-pi-trust {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 640px) {
    .panda-pi-sticky {
      padding: 10px 16px;
      gap: 12px;
    }
    .panda-pi-sticky__left {
      gap: 10px;
      min-width: 0;
    }
    .panda-pi-sticky__name {
      font-size: 13px;
      max-width: 96px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .panda-pi-sticky__price {
      font-size: 18px;
    }
    .panda-pi-sticky__parcel {
      font-size: 10px;
    }
    .panda-pi-sticky__btn {
      font-size: 11px;
      padding: 10px 16px;
      letter-spacing: 0.06em;
    }
  }

  /* Os campos de gravação (e a numeração) ficam em 2 colunas até telas bem
     estreitas — só voltam a empilhar (1 por linha) abaixo de 336px, onde
     também não cabe mais o preço no tamanho fixo de 52px; por isso o preço
     passa a ser calculado com base na largura da tela (vw) aqui, em vez de
     um valor fixo, pra nunca estourar a largura disponível. */
  @media (max-width: 336px) {
    .panda-pi-field-row {
      grid-template-columns: 1fr;
    }
    .panda-pi-price {
      font-size: 15vw;
    }
  }

  /* ═══ App Aris Product Options — só aparência (cor/fonte/borda/espaçamento) ═══
     Substitui visualmente a gravação/produto complementar nativos nos produtos
     que usam o app (ver bloco @app acima — a classe abaixo é aplicada só no
     primeiro bloco de app desse slot, já que a Shopify não expõe pro tema qual
     app específico ocupa um bloco @app genérico). Não mexe na estrutura, no
     posicionamento do contador de caracteres nem na lógica de exibir/esconder
     o total adicional — isso é o próprio app quem controla. Native features
     (panda-pi-gravacao, panda-pi-sol-*) continuam
     intocadas em qualquer lugar. */
  .app-avis-product-options-block {
    font-family: var(--panda-font-body);
    color: var(--panda-ink);
  }
  /* O wrapper do bloco de app agora É a própria .panda-pi-gravacao (aplicada
     no Liquid, com .panda-pi-grav-label acima) — então os campos de texto/
     select só precisam ficar em pares de 2 colunas, sem caixa/borda própria
     (o fundo cinza e a borda vermelha já vêm do wrapper, uma única vez).
     Swatch, aviso e total adicional ocupam a linha inteira, com uma margem
     pra separar visualmente dos campos ali em cima. */
  .app-avis-product-options-block .avpoptions-container__v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }
  .app-avis-product-options-block .avp-option {
    margin-bottom: 0;
  }
  .app-avis-product-options-block .avp-option:not(.ap-options__swatch-container):not(.ap-options__heading-container) {
    flex: 1 1 calc(50% - 7px);
    min-width: 130px;
    box-sizing: border-box;
  }
  .app-avis-product-options-block .ap-options__swatch-container,
  .app-avis-product-options-block .ap-options__heading-container,
  .app-avis-product-options-block .avp-productoption-total-add {
    flex: 1 1 100%;
    margin-top: 6px;
  }
  .app-avis-product-options-block .ap-label-tooltip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }
  .app-avis-product-options-block .avp-option-title,
  .app-avis-product-options-block .apo-title {
    font-family: var(--panda-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--panda-concrete) !important;
  }
  .app-avis-product-options-block .avp-required {
    color: var(--panda-bond);
  }
  .app-avis-product-options-block .apo-counter-letter,
  .app-avis-product-options-block .apo-counter-input {
    font-family: var(--panda-font-body) !important;
    font-size: 10px !important;
    color: rgba(9, 5, 5, 0.35) !important;
  }
  .app-avis-product-options-block input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: var(--panda-white) !important;
    border: 1px solid rgba(9, 5, 5, 0.15) !important;
    font-family: var(--panda-font-body) !important;
    font-size: 14px !important;
    padding: 12px 16px;
    outline: none;
    color: var(--panda-ink) !important;
    transition: border-color 0.2s;
  }
  .app-avis-product-options-block input[type="text"]:focus {
    border-color: var(--panda-bond) !important;
  }
  .app-avis-product-options-block select {
    width: 100%;
    box-sizing: border-box;
    background: var(--panda-white) !important;
    border: 1px solid rgba(9, 5, 5, 0.15) !important;
    font-family: var(--panda-font-body) !important;
    font-size: 14px !important;
    padding: 12px 36px 12px 16px;
    outline: none;
    color: var(--panda-ink) !important;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23090505' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }
  .app-avis-product-options-block select:focus {
    border-color: var(--panda-bond) !important;
  }
  .app-avis-product-options-block fieldset {
    border: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .app-avis-product-options-block .apo-swatch-wrapper {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--panda-white) !important;
    border: 1.5px solid rgba(9, 5, 5, 0.14) !important;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
    margin: 0;
    position: relative;
  }
  .app-avis-product-options-block .apo-swatch-wrapper:hover {
    border-color: rgba(192, 19, 3, 0.4) !important;
    z-index: 5;
  }
  .app-avis-product-options-block .apo-swatch-wrapper:has(input:checked) {
    border-color: var(--panda-bond) !important;
    background: rgba(192, 19, 3, 0.05) !important;
  }
  .app-avis-product-options-block .apo-swatch-wrapper:focus-within {
    outline: 2px solid var(--panda-bond);
    outline-offset: 2px;
  }
  .app-avis-product-options-block .apo-swatch-wrapper input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .app-avis-product-options-block .apo-swatch-only-img {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    overflow: hidden;
    background: #e8e9d5;
  }
  /* O zoom deve disparar só ao passar o mouse na IMAGEM pequena, não no
     card inteiro — por isso o hover é em .apo-swatch-only-img, não em
     .apo-swatch-wrapper. overflow:hidden acima corta a ampliação no
     tamanho da caixinha de 46px; no hover, libera o overflow e sobe o
     z-index pra ampliação aparecer por cima do resto do conteúdo sem ser
     cortada. */
  .app-avis-product-options-block .apo-swatch-only-img:hover {
    overflow: visible;
    z-index: 5;
  }
  /* A imagem real é exibida pelo <span> com background-image inline (já vem
     pronta no HTML do app); a <img> ao lado depende de um lazy-load próprio
     do app que não dispara no nosso caso, então ela fica por cima (mesma
     área, opacity:0) só pra continuar recebendo o hover — é nela que o
     hover original do app se baseia. display:none tirava a imagem de tela
     E cancelava o hover; opacity:0 mantém o hover ativo. */
  .app-avis-product-options-block .apo-swatch-only-img .avp-productoptionswatch {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.15s ease;
  }
  /* Nada no app de fato ampliava a imagem — só reaproveitávamos o hover que
     já disparava. Usa transform:scale() em vez de position:absolute de
     propósito: position:absolute tira o elemento do fluxo normal, e como é
     o MESMO elemento que renderiza a miniatura pequena, a caixinha
     original ficava vazia — a miniatura "sumia", dando a impressão de que
     ela mesma tinha se movido (bug real reportado). transform:scale()
     amplia visualmente sem tirar do fluxo: a miniatura nunca desaparece,
     só cresce a partir da própria base (transform-origin: 50% 100%), pra
     crescer pra cima em vez de invadir o texto ao lado. */
  .app-avis-product-options-block .apo-swatch-only-img:hover .avp-productoptionswatch {
    position: relative;
    transform: scale(4);
    transform-origin: 50% 100%;
    box-shadow: 0 10px 30px rgba(9, 5, 5, 0.25);
    outline: 1px solid rgba(9, 5, 5, 0.08);
    z-index: 10;
  }
  .app-avis-product-options-block .apo-swatch-only-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0 !important;
  }
  /* O próprio app tem um estilo nativo que revela essa <img> (do mesmo
     tamanho da miniatura, sem ampliar nada) no hover — competia visualmente
     com a prévia grande acima, mostrando as duas ao mesmo tempo. Força ela
     a continuar invisível mesmo no hover, pra só a prévia grande aparecer. */
  .app-avis-product-options-block .apo-swatch-only-img:hover img,
  .app-avis-product-options-block .apo-swatch-only-img.avp-productoptionswatch-box:hover img {
    opacity: 0 !important;
  }
  .app-avis-product-options-block .swatch-variant-title {
    font-family: var(--panda-font-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--panda-ink) !important;
    line-height: 1.35;
  }
  .app-avis-product-options-block .apo-money {
    color: var(--panda-bond) !important;
  }
  .app-avis-product-options-block .avp-heading {
    font-family: var(--panda-font-body) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--panda-bond) !important;
  }
  .app-avis-product-options-block .avp-productoption-total-add {
    font-family: var(--panda-font-body);
    font-size: 12px;
    color: var(--panda-concrete);
    margin-top: 8px;
  }
  .app-avis-product-options-block .avp-productoption-totalpriceadd {
    font-weight: 700;
    color: var(--panda-bond);
  }
  /* Mobile: o desktop fica como estava (card horizontal, imagem 46px) —
     só o mobile muda. Em vez de forçar 1 card por linha, o fieldset vira
     uma tira horizontal com scroll nativo por toque — sem nenhum JS, só
     flex-nowrap + overflow-x. Os cards viram verticais (imagem grande em
     cima, texto embaixo) e menores (~44% da largura), mostrando 2 quase
     inteiros + uma fatia do 3º na borda direita, indicando que dá pra
     arrastar pros lados — como um mini carrossel de produtos. O app
     injeta seu próprio CSS (com !important e um seletor de
     especificidade alta, ex.: "span.ap-options__swatch.ap-swatch__multi
     fieldset") DEPOIS do nosso no documento, então essas regras
     precisam ganhar tanto em especificidade (por isso repetimos as duas
     classes do app, não só uma) quanto em importância (!important em
     tudo que pode ter equivalente nativo), senão o app vence e os cards
     voltam a empilhar verticalmente (comportamento padrão de bloco, sem
     flex nenhum). */
  @media (max-width: 640px) {
    .app-avis-product-options-block .ap-options__swatch.ap-swatch__multi fieldset {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      gap: 10px !important;
      width: 100% !important;
      max-width: 100% !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* Sem isso, arrastar o slider até o fim "encosta" no limite e o
         gesto vaza pro documento inteiro, arrastando a página junto
         (scroll chaining) — contain trava o overscroll dentro do
         próprio fieldset. */
      overscroll-behavior: contain !important;
      padding: 2px !important;
    }
    .app-avis-product-options-block .ap-options__swatch.ap-swatch__multi fieldset::-webkit-scrollbar {
      display: none;
    }
    .app-avis-product-options-block .ap-options__swatch.ap-swatch__multi .apo-swatch-wrapper {
      flex: 0 0 44% !important;
      max-width: 44% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 0 !important;
      padding: 0 !important;
      margin-right: 0 !important;
      overflow: hidden !important;
    }
    /* O input continua focado depois de tocar pra desmarcar (focus e
       "checked" são independentes) — sem isso, o anel vermelho de foco
       ficava "grudado" no último card tocado mesmo já desmarcado, dando a
       impressão de que ele ainda estava selecionado. A cor/fundo de
       selecionado já vem só de :has(input:checked) logo acima, então o
       anel de foco separado é redundante no touch — tira ele todo aqui. */
    .app-avis-product-options-block .apo-swatch-wrapper:focus-within {
      outline: none !important;
    }
    /* :hover não tem estado real em touch — o navegador só "liga" no toque
       e nunca "desliga" (sem mouseleave), então o card tocado por último
       fica com z-index:5 e a caixinha de imagem com overflow:visible
       PERMANENTEMENTE, sobrepondo os cards vizinhos. Isso bloqueava
       arrastar o fieldset e marcar/desmarcar outra opção — tudo sintoma do
       mesmo hover grudado. Zera os dois efeitos no mobile (o zoom em si já
       era neutralizado abaixo, mas o container que o hover eleva
       continuava sobrepondo). */
    .app-avis-product-options-block .apo-swatch-wrapper:hover {
      z-index: auto !important;
    }
    .app-avis-product-options-block .apo-swatch-only-img:hover {
      overflow: hidden !important;
      z-index: auto !important;
      position: relative !important;
    }
    /* A <img> real (opacity:0, só existia pra receber o :hover nativo do
       app e disparar o zoom) é a origem raiz da sobreposição: mesmo
       invisível, ela ficava por cima capturando toque/arraste, já que
       opacity:0 não desliga pointer-events. Sem zoom nenhum no mobile
       (ver regra abaixo), ela não serve mais pra nada aqui — display:none
       tira ela do caminho por completo. */
    .app-avis-product-options-block .apo-swatch-only-img img {
      display: none !important;
    }
    .app-avis-product-options-block .apo-swatch-only-img {
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 1 / 1 !important;
    }
    .app-avis-product-options-block .swatch-variant-title,
    .app-avis-product-options-block .apo-money {
      overflow-wrap: break-word;
      word-break: break-word;
    }
    /* Zoom ampliado desativado no mobile: hover em touch não faz sentido
       (às vezes fica "grudado" depois de tocar pra selecionar), então a
       prévia grande nunca sai do tamanho normal aqui — só no desktop. */
    .app-avis-product-options-block .apo-swatch-only-img:hover .avp-productoptionswatch {
      position: static !important;
      width: 100% !important;
      height: 100% !important;
      transform: none !important;
      box-shadow: none !important;
      outline: none !important;
      z-index: auto !important;
    }
    .app-avis-product-options-block .swatch-variant-title {
      display: block;
      padding: 8px 10px 10px;
    }
    .app-avis-product-options-block .apo-money {
      display: block;
      margin-top: 3px;
    }
    /* O fieldset em si tem overflow-x:auto e não deveria transbordar a
       página, mas por padrão um item flex não encolhe além do min-content
       do próprio conteúdo (min-width:auto) — como o .ap-options__swatch-
       container (o <div> que envolve o slider) é item flex de
       .avpoptions-container__v2 e não tinha min-width:0, o slider inteiro
       (com todos os cards lado a lado) virava o "tamanho mínimo" desse
       item, empurrando a seção — e a página — pra largura toda do
       conteúdo em vez de cortar em 100vw. min-width:0 permite encolher
       até a largura real da tela; overflow-x:hidden no bloco do app é um
       cinto de segurança extra caso algo mais force overflow. */
    .app-avis-product-options-block .ap-options__swatch-container {
      min-width: 0 !important;
    }
    .app-avis-product-options-block {
      max-width: 100%;
      overflow-x: hidden;
    }
  }
/* END_SECTION:panda-produto-main */
/* START_SECTION:panda-relacionados (INDEX:79) */
.panda-relacionados {
    display: block;
    background: var(--panda-ink);
    padding: 120px 56px;
    position: relative;
    overflow: hidden;
  }
  .panda-relacionados:empty {
    display: none;
  }
  .panda-rel__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--panda-bond);
    margin-bottom: 8px;
  }
  .panda-rel__title {
    font-size: clamp(40px, 4.5vw, 68px);
    font-weight: 900;
    line-height: 0.9;
    color: var(--panda-white);
    margin-top: 0;
    margin-bottom: 64px;
  }
  .panda-rel__handstand {
    font-family: var(--panda-font-display);
    font-weight: normal;
    color: var(--panda-silk);
    display: block;
  }
  .panda-rel__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
  }
  .panda-rel-card {
    background: #111;
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
  }
  .panda-rel-card:has(.panda-rel-img--hover):hover .panda-rel-img {
    transform: scale(1.04);
  }
  .panda-rel-img-wrap {
    height: 300px;
    overflow: hidden;
    position: relative;
  }
  .panda-rel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s, opacity 0.4s;
    display: block;
  }
  .panda-rel-img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  .panda-rel-card:has(.panda-rel-img--hover):hover .panda-rel-img--hover {
    opacity: 1;
  }
  .panda-rel-card:has(.panda-rel-img--hover):hover .panda-rel-img:not(.panda-rel-img--hover) {
    opacity: 0;
  }
  .panda-rel-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--panda-bond);
    color: var(--panda-white);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    z-index: 2;
  }
  .panda-rel-body {
    padding: 20px 22px 24px;
  }
  .panda-rel-name {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--panda-white);
    margin-bottom: 14px;
  }
  .panda-rel-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .panda-rel-prices {
    display: flex;
    flex-direction: column;
  }
  .panda-rel-old {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    text-decoration: line-through;
  }
  .panda-rel-val {
    font-size: 22px;
    font-weight: 900;
    color: var(--panda-silk);
    line-height: 1;
  }
  .panda-rel-parcel {
    font-size: 13px;
    font-weight: 400;
    color: rgba(235, 238, 193, 0.75);
    margin-top: 3px;
  }
  .panda-rel-parcel strong {
    font-weight: 800;
    font-style: normal;
    color: var(--panda-silk);
  }
  .panda-rel-parcel em {
    font-style: italic;
    font-weight: 400;
    opacity: 0.8;
  }
  .panda-rel-btn {
    background: var(--panda-btn-bg, var(--panda-bond));
    border: 2px solid var(--panda-btn-bg, var(--panda-bond));
    box-sizing: border-box;
    color: var(--panda-btn-text, var(--panda-white));
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 16px;
    transition: opacity 0.2s;
    white-space: nowrap;
    display: inline-block;
  }
  .panda-rel-btn.panda-btn--secundario {
    background: transparent;
    color: var(--panda-btn-bg, var(--panda-bond));
  }
  .panda-rel-card:hover .panda-rel-btn {
    opacity: 0.82;
  }

  @media (max-width: 1100px) {
    .panda-relacionados {
      padding: 100px 24px;
    }
    .panda-rel__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 640px) {
    .panda-rel__grid {
      grid-template-columns: {% if section.settings.mobile_two_columns %}repeat(2, 1fr){% else %}1fr{% endif %};
    }
    {% if section.settings.mobile_two_columns %}
      .panda-rel-img-wrap {
        height: 220px;
      }
      .panda-rel-body {
        padding: 14px 14px 16px;
      }
      .panda-rel-name {
        font-size: 15px;
        margin-bottom: 10px;
      }
      .panda-rel-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      .panda-rel-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
      }
    {% endif %}
  }
/* END_SECTION:panda-relacionados */
/* START_SECTION:panda-tamanho-button (INDEX:81) */
.panda-tb {
    position: fixed;
    bottom: 148px;
    right: 28px;
    z-index: 750;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
  }
  .panda-tb.panda-is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  /* Escondido enquanto o carrinho ou o menu mobile estão abertos — os dois
     abrem do lado direito da tela, exatamente onde este botão fica, e com
     z-index mais alto ele ficava boiando por cima do painel (ver
     assets/panda-floating-buttons.js, que observa os dois drawers). */
  .panda-tb.panda-floating-obscured {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .panda-tb__btn {
    position: relative;
    width: 48px;
    height: 48px;
    background: var(--panda-bond);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(192, 19, 3, 0.32);
    transition: background 0.2s, transform 0.2s;
  }
  .panda-tb__btn:hover {
    background: var(--panda-wine);
    transform: scale(1.06);
  }
  .panda-tb__btn svg {
    position: relative;
    z-index: 1;
  }
  /* Anel de "sonar" pulsando — reforça que o botão é clicável/interativo,
     já que só o ícone de mira não deixa claro pra que serve. */
  .panda-tb__btn::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--panda-bond);
    opacity: 0;
    animation: panda-tb-ping 2.8s ease-out infinite;
  }
  @keyframes panda-tb-ping {
    0% {
      transform: scale(0.85);
      opacity: 0.7;
    }
    70% {
      transform: scale(1.5);
      opacity: 0;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }
  .panda-tb__lbl {
    order: -1;
    background: var(--panda-ink);
    color: var(--panda-white);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(9, 5, 5, 0.25);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
  }
  .panda-tb__btn:hover ~ .panda-tb__lbl,
  .panda-tb.panda-tb-peek .panda-tb__lbl {
    opacity: 1;
    transform: translateX(0);
  }

  @media (max-width: 768px) {
    .panda-tb {
      /* Invertido com o botão de WhatsApp só no mobile: aqui vira o botão
         de baixo (era o de cima). */
      bottom: 60px;
      right: 16px;
    }
    .panda-tb__lbl {
      max-width: 46vw;
      white-space: normal;
      font-size: 11px;
    }
  }
/* END_SECTION:panda-tamanho-button */
/* START_SECTION:panda-tamanho-popup (INDEX:82) */
.panda-tp {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
  }
  .panda-tp.panda-is-open {
    pointer-events: all;
  }
  .panda-tp__overlay {
    position: absolute;
    inset: 0;
    background: rgba(9, 5, 5, 0.82);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.35s;
  }
  .panda-tp__overlay:empty {
    display: block;
  }
  .panda-tp.panda-is-open .panda-tp__overlay {
    opacity: 1;
  }
  .panda-tp__scroll {
    position: relative;
    z-index: 2;
    height: 100%;
    /* fechado, fica overflow:hidden (sem scrollbar nenhuma) — .panda-tp é
       position:fixed + inset:0 sempre presente no DOM, então mesmo com o
       conteúdo interno invisível (opacity dos filhos), esse wrapper em si
       tinha opacity:1 e overflow-y:auto o tempo todo; se o passo "entry"
       (sempre o ativo por padrão) for mais alto que a viewport, a barra de
       rolagem nativa dele aparecia por cima do site mesmo com o popup
       "fechado" — daí a sensação de 2 scrollbars. */
    overflow-y: hidden;
    padding: 48px 24px;
    display: flex;
    justify-content: center;
  }
  .panda-tp.panda-is-open .panda-tp__scroll {
    overflow-y: auto;
  }
  .panda-tp__panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    height: fit-content;
    background: var(--panda-silk-bg);
    color: var(--panda-ink);
    transform: translateY(28px) scale(0.98);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  }
  .panda-tp.panda-is-open .panda-tp__panel {
    /* transform some (não fica "translateY(0) scale(1)", que tecnicamente
       ainda é um transform "ativo") assim que abre — deixar um ancestral do
       header com transform diferente de none pode fazer o position:sticky
       dele se comportar errado (some navegadores/engines de composição
       tratam mal sticky quando um ancestral entre ele e o container de
       scroll tem transform), causando conteúdo aparecendo por cima do
       header ao rolar. Como translateY(0) scale(1) é uma transformação
       identidade, remover não muda nada visualmente — a transição de
       abertura anima normalmente do estado fechado até "none". */
    transform: none;
    opacity: 1;
  }
  .panda-tp__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 32px;
    border-bottom: 1px solid rgba(9, 5, 5, 0.1);
    background: var(--panda-white);
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .panda-tp__eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--panda-bond);
    margin-bottom: 4px;
  }
  .panda-tp__heading {
    font-size: 20px;
    font-weight: 900;
    color: var(--panda-ink);
  }
  .panda-tp__close {
    background: none;
    border: none;
    color: rgba(9, 5, 5, 0.4);
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    transition: color 0.2s;
  }
  .panda-tp__close:hover {
    color: var(--panda-ink);
  }
  .panda-tp__body {
    padding: 36px 32px 44px;
  }
  .panda-tp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: rgba(9, 5, 5, 0.5);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 20px;
    padding: 0;
  }
  .panda-tp-back:hover {
    color: var(--panda-ink);
  }

  .panda-tp-step {
    display: none;
  }
  .panda-tp-step.active {
    display: block;
    animation: panda-tp-fade 0.35s ease;
  }
  @keyframes panda-tp-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .panda-tp-lead {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(9, 5, 5, 0.65);
    margin-bottom: 28px;
  }

  /* Entrada */
  .panda-tp-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
  }
  .panda-tp-entry-card {
    background: var(--panda-white);
    border: none;
    padding: 30px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
    transition: transform 0.3s, background 0.3s;
    font-family: inherit;
  }
  .panda-tp-entry-card:hover {
    background: var(--panda-silk);
    transform: translateY(-4px);
  }
  .panda-tp-entry-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(192, 19, 3, 0.08);
    border: 1px solid rgba(192, 19, 3, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--panda-bond);
    margin-bottom: 18px;
  }
  .panda-tp-entry-kicker {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--panda-bond);
    margin-bottom: 8px;
  }
  .panda-tp-entry-title {
    font-size: 19px;
    font-weight: 900;
    line-height: 1.15;
    color: var(--panda-ink);
    margin-bottom: 10px;
  }
  .panda-tp-hs {
    font-family: var(--panda-font-display);
    font-weight: normal;
    color: var(--panda-bond);
    display: block;
    font-size: 1.15em;
  }
  .panda-tp-entry-body {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(9, 5, 5, 0.6);
    margin-bottom: 20px;
    flex: 1;
  }
  .panda-tp-entry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--panda-bond);
    color: var(--panda-white);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 18px;
    transition: background 0.2s;
  }
  .panda-tp-entry-card:hover .panda-tp-entry-btn {
    background: var(--panda-wine);
  }

  /* Linha de ações auxiliares (ver tabela + assistir tutorial) */
  .panda-tp-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
  }
  .panda-tp-actions-row--center {
    justify-content: center;
  }
  .panda-tp-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1.5px solid rgba(9, 5, 5, 0.2);
    padding: 10px 16px;
    color: var(--panda-ink);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
  }
  .panda-tp-mini-btn:hover {
    border-color: var(--panda-bond);
    color: var(--panda-bond);
  }
  .panda-tp-mini-btn.panda-tp-mini-btn--solid {
    background: var(--panda-bond);
    border-color: var(--panda-bond);
    color: var(--panda-white);
  }
  .panda-tp-mini-btn.panda-tp-mini-btn--solid:hover {
    background: var(--panda-wine);
    border-color: var(--panda-wine);
    color: var(--panda-white);
  }
  .panda-tp-mini-btn--full {
    width: 100%;
    justify-content: center;
    margin-bottom: 12px;
  }

  /* Etapa 2 */
  .panda-tp-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
  }
  .panda-tp-opt {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--panda-white);
    border: 1.5px solid rgba(9, 5, 5, 0.12);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-family: inherit;
    width: 100%;
  }
  .panda-tp-opt:hover {
    border-color: var(--panda-bond);
    background: rgba(192, 19, 3, 0.04);
  }
  .panda-tp-opt-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(192, 19, 3, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--panda-bond);
    flex-shrink: 0;
  }
  .panda-tp-opt-text {
    flex: 1;
  }
  .panda-tp-opt-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--panda-ink);
    margin-bottom: 4px;
  }
  .panda-tp-opt-body {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(9, 5, 5, 0.55);
  }
  .panda-tp-opt-arrow {
    flex-shrink: 0;
    color: rgba(9, 5, 5, 0.3);
    transition: transform 0.2s;
  }
  .panda-tp-opt:hover .panda-tp-opt-arrow {
    transform: translateX(3px);
    color: var(--panda-bond);
  }

  .panda-tp-uncertain-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--panda-bond);
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
  }
  .panda-tp-uncertain-btn:hover {
    color: var(--panda-wine);
  }
  .panda-tp-uncertain-btn--tight {
    display: inline-block;
    margin-top: -8px;
    margin-bottom: 22px;
  }
  .panda-tp-uncertain-wrap {
    margin-top: 20px;
  }

  .panda-tp-diagram {
    display: block;
    margin: 0 auto 20px;
  }
  .panda-tp-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(9, 5, 5, 0.5);
    display: block;
    margin-bottom: 10px;
  }
  .panda-tp-input-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
  }
  .panda-tp-input-row input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid rgba(9, 5, 5, 0.15);
    padding: 13px 15px;
    font-size: 15px;
    font-family: inherit;
    background: var(--panda-white);
    color: var(--panda-ink);
  }
  .panda-tp-input-row input:focus {
    outline: none;
    border-color: var(--panda-bond);
  }
  .panda-tp-fio-diagram {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  .panda-tp-list {
    margin: 0 0 20px 20px;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(9, 5, 5, 0.65);
  }

  .panda-tp-btn {
    background: var(--panda-bond);
    color: var(--panda-white);
    border: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 24px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
  }
  .panda-tp-btn:hover {
    background: var(--panda-wine);
  }
  .panda-tp-btn.panda-tp-btn--secondary {
    background: transparent;
    color: var(--panda-ink);
    border: 1.5px solid rgba(9, 5, 5, 0.2);
  }
  .panda-tp-btn.panda-tp-btn--secondary:hover {
    background: var(--panda-ink);
    color: var(--panda-silk);
    border-color: var(--panda-ink);
  }
  .panda-tp-btn--full {
    width: 100%;
  }
  .panda-tp-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Cartão de calibração (anel-tela). O tamanho é definido via JS em px
     diretos (não em cm de CSS) — testamos e confirmamos que a conversão
     nominal do navegador (96px/polegada) NÃO bate com o tamanho físico real
     em telas de verdade (um cartão "8,56cm" de CSS mede uns 9cm de verdade
     na régua). O protótipo original (Tema Panda HTML/popupsV2.html,
     printCalibrate) já evitava esse problema calibrando direto em px; JS
     usa a mesma abordagem aqui, ancorada num valor real verificado com
     régua física (300px = 8,56cm reais nessa mesma tela de teste). */
  .panda-tp-print-card {
    box-sizing: border-box;
    background: linear-gradient(135deg, #ccc, #e8e8e8);
    border: 2px solid var(--panda-ink);
    border-radius: 8px;
    margin: 0 auto 18px;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .panda-tp-print-card::before {
    content: '';
    position: absolute;
    top: 13px;
    left: 13px;
    width: 30px;
    height: 22px;
    background: rgba(9, 5, 5, 0.25);
    border-radius: 3px;
  }
  .panda-tp-print-card-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(9, 5, 5, 0.4);
    position: absolute;
    bottom: 9px;
    right: 12px;
    letter-spacing: 0.05em;
  }
  .panda-tp-print-readout {
    text-align: center;
    font-size: 13px;
    color: rgba(9, 5, 5, 0.55);
    margin-bottom: 18px;
  }
  .panda-tp-print-readout strong,
  .panda-tp-print-readout span {
    color: var(--panda-bond);
    font-size: 16px;
    font-weight: 700;
  }
  .panda-tp-ar-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 22px;
  }
  .panda-tp-ar-controls label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(9, 5, 5, 0.5);
  }
  .panda-tp-slider-note {
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(9, 5, 5, 0.5);
    margin-top: 2px;
  }
  .panda-tp-ar-slider {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    height: 4px;
    background: rgba(9, 5, 5, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
  }
  .panda-tp-ar-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--panda-bond);
    cursor: pointer;
    border: 3px solid var(--panda-white);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  }
  /* Círculo de aliança na tela (anel-tela) */
  .panda-tp-ring-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
    margin: 8px 0;
  }
  .panda-tp-ring-circle {
    border-radius: 50%;
    border: 3px dashed var(--panda-bond);
    background: rgba(192, 19, 3, 0.03);
    transition: width 0.08s, height 0.08s;
  }
  .panda-tp-ring-circle:empty {
    /* base.css do Dawn esconde qualquer div vazia (div:empty{display:none}) —
       o círculo não tem conteúdo dentro, só é dimensionado via JS. */
    display: block;
  }

  /* Régua real de impressão (10cm, escala física em mm) */
  .panda-tp-print-area {
    margin: 8px 0 4px;
    /* garante que os traços (background) da régua realmente saiam impressos —
       por padrão a maioria dos navegadores NÃO imprime cor de fundo, achando
       que é só decoração, e a régua sairia sem nenhuma marcação. */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .panda-tp-print-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(9, 5, 5, 0.5);
    margin-bottom: 12px;
    text-align: center;
  }
  .panda-tp-print-ruler {
    position: relative;
    width: 100mm;
    height: 22mm;
    max-width: 100%;
    margin: 0 auto;
    background: var(--panda-white);
    border: 1px solid rgba(9, 5, 5, 0.2);
  }
  .panda-tp-print-tick {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 4mm;
    background: rgba(9, 5, 5, 0.65);
  }
  .panda-tp-print-tick:empty {
    /* base.css do Dawn esconde qualquer div vazia (div:empty{display:none}) —
       os traços de mm/meio-cm são divs vazias (só o traço de cm tem <span>
       com o número), então sem isso eles nunca apareciam. */
    display: block;
  }
  .panda-tp-print-tick--half {
    width: 1px;
    height: 8mm;
    background: rgba(9, 5, 5, 0.8);
  }
  .panda-tp-print-tick--cm {
    width: 1.5px;
    height: 12mm;
    background: var(--panda-ink);
  }
  .panda-tp-print-tick--cm span {
    position: absolute;
    top: -14px;
    left: 0;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    color: var(--panda-ink);
  }
  .panda-tp-print-instructions {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(9, 5, 5, 0.55);
    text-align: center;
    margin-top: 14px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }

  .panda-tp-note {
    margin-top: 20px;
    padding: 14px 18px;
    background: rgba(192, 19, 3, 0.06);
    border-left: 3px solid var(--panda-bond);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(9, 5, 5, 0.6);
  }
  .panda-tp-note strong {
    color: var(--panda-ink);
  }

  /* Resultado do cálculo (panda-tamanho-result.liquid) */
  .panda-tp-result {
    margin-top: 24px;
    padding: 22px 24px;
    background: rgba(45, 106, 0, 0.08);
    border-left: 3px solid var(--panda-forest);
    display: none;
  }
  .panda-tp-result.show {
    display: block;
    animation: panda-tp-fade 0.4s ease;
  }
  .panda-tp-result-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--panda-forest);
    margin-bottom: 6px;
  }
  .panda-tp-result-val {
    font-size: 28px;
    font-weight: 900;
    color: var(--panda-ink);
    margin-bottom: 4px;
  }
  .panda-tp-result-note {
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(9, 5, 5, 0.55);
    margin-bottom: 16px;
  }
  .panda-tp-result-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  /* Fallback / videochamada (panda-tamanho-fallback.liquid) */
  .panda-tp-fallback {
    display: none;
    margin-top: 16px;
    padding: 20px 22px;
    background: var(--panda-white);
    border: 1.5px solid rgba(9, 5, 5, 0.1);
  }
  .panda-tp-fallback.open {
    display: block;
    animation: panda-tp-fade 0.35s ease;
  }
  .panda-tp-fallback-lead {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(9, 5, 5, 0.6);
    margin-bottom: 16px;
  }
  .panda-tp-days {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
  }
  .panda-tp-day {
    flex-shrink: 0;
    background: var(--panda-white);
    border: 1.5px solid rgba(9, 5, 5, 0.12);
    padding: 12px 18px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 62px;
    font-family: inherit;
  }
  .panda-tp-day:hover {
    border-color: rgba(192, 19, 3, 0.5);
  }
  .panda-tp-day.active {
    background: var(--panda-bond);
    border-color: var(--panda-bond);
    color: var(--panda-white);
  }
  .panda-tp-day-dow {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
  }
  .panda-tp-day-num {
    font-size: 17px;
    font-weight: 900;
    margin-top: 2px;
  }
  .panda-tp-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
  }
  .panda-tp-slot {
    background: var(--panda-white);
    border: 1.5px solid rgba(9, 5, 5, 0.12);
    padding: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--panda-ink);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
  }
  .panda-tp-slot:hover {
    border-color: rgba(192, 19, 3, 0.5);
  }
  .panda-tp-slot.active {
    background: var(--panda-bond);
    border-color: var(--panda-bond);
    color: var(--panda-white);
  }
  .panda-tp-call-confirm {
    display: none;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    margin-top: 20px;
    background: rgba(37, 211, 102, 0.08);
    border-left: 3px solid #25d366;
  }
  .panda-tp-call-confirm.show {
    display: flex;
    animation: panda-tp-fade 0.4s ease;
  }
  .panda-tp-call-confirm-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--panda-white);
    flex-shrink: 0;
  }
  .panda-tp-call-confirm strong {
    display: block;
    font-size: 13px;
    color: var(--panda-ink);
  }
  .panda-tp-call-confirm span {
    font-size: 12px;
    color: rgba(9, 5, 5, 0.55);
  }

  /* Destaque breve no seletor de tamanho da página de produto, depois de
     "usar esse tamanho" selecionar a variante automaticamente. */
  .panda-tp-just-set {
    animation: panda-tp-highlight 1.6s ease;
  }
  @keyframes panda-tp-highlight {
    0%, 100% { box-shadow: none; }
    15% { box-shadow: 0 0 0 4px rgba(192, 19, 3, 0.35); }
  }

  /* Popups independentes (tabela de medidas / vídeo tutorial) */
  .panda-tp-image-popup {
    position: fixed;
    inset: 0;
    z-index: 950;
    pointer-events: none;
  }
  .panda-tp-image-popup.panda-is-open {
    pointer-events: all;
  }
  .panda-tp-image-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(9, 5, 5, 0.85);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .panda-tp-image-popup__overlay:empty {
    display: block;
  }
  .panda-tp-image-popup.panda-is-open .panda-tp-image-popup__overlay {
    opacity: 1;
  }
  .panda-tp-image-popup__scroll {
    position: relative;
    z-index: 2;
    height: 100%;
    /* mesmo motivo do .panda-tp__scroll: parado em overflow:hidden até abrir,
       pra não deixar a barra de rolagem nativa aparecer com o popup "fechado". */
    overflow-y: hidden;
    padding: 48px 24px;
    display: flex;
    justify-content: center;
  }
  .panda-tp-image-popup.panda-is-open .panda-tp-image-popup__scroll {
    overflow-y: auto;
  }
  .panda-tp-image-popup__panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: fit-content;
    background: var(--panda-silk-bg);
    color: var(--panda-ink);
    transform: translateY(28px) scale(0.98);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  }
  .panda-tp-image-popup.panda-is-open .panda-tp-image-popup__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .panda-tp-image-popup__body {
    padding: 24px;
  }
  .panda-tp-image-popup__body img {
    width: 100%;
    height: auto;
    display: block;
  }
  .panda-tp-video-popup .panda-tp-image-popup__panel {
    max-width: 860px;
  }
  .panda-tp-video-slot {
    display: none;
  }
  .panda-tp-video-slot.active {
    display: block;
  }
  .panda-tp-video-slot video,
  .panda-tp-video-slot iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
  }

  /* Alvo exclusivo de impressão: fica vazio e escondido na tela; recebe uma
     cópia (via JS) do conteúdo da régua só no momento de imprimir. O JS clona
     só o innerHTML (não a div .panda-tp-print-area em si), então o
     print-color-adjust precisa estar aqui também — não só na classe original
     — senão os traços da régua (que são background, não borda) não saem
     impressos, já que por padrão os navegadores não imprimem cor de fundo. */
  .panda-tp-print-standalone {
    display: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Impressão: esconde TUDO (usando display:none, não visibility, pra não
     deixar a altura do resto do site "fantasma" no layout — foi essa altura
     fantasma que causava a régua repetir em várias páginas) e mostra só o
     alvo de impressão. A Shopify envolve cada seção no próprio
     #shopify-section-<id>, então isso precisa de 2 níveis: primeiro esconder
     as outras seções (header, conteúdo principal, footer, outras seções
     globais), depois esconder os outros filhos desta MESMA seção (o popup
     em si, o popup de tabela, o popup de vídeo) — só assim o alvo de
     impressão realmente sobra sozinho na página.
     Escala física (mm) só fica correta se a impressão estiver em 100% /
     "tamanho real" — não em "ajustar à página". */
  @media print {
    body > *:not(#shopify-section-{{ section.id }}) {
      display: none !important;
    }
    #shopify-section-{{ section.id }} > *:not(.panda-tp-print-standalone) {
      display: none !important;
    }
    .panda-tp-print-standalone {
      display: block !important;
      padding: 20mm;
    }
    @page {
      size: A4;
      margin: 0;
    }
  }

  @media (max-width: 640px) {
    .panda-tp__scroll {
      padding: 0;
    }
    .panda-tp__panel {
      max-width: 100%;
      min-height: 100%;
    }
    .panda-tp__header {
      padding: 18px 20px;
    }
    .panda-tp__body {
      padding: 24px 20px 36px;
    }
    .panda-tp-entry-grid {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:panda-tamanho-popup */
/* START_SECTION:panda-whatsapp-button (INDEX:83) */
.panda-wa {
    position: fixed;
    bottom: 80px;
    right: 28px;
    /* z-index acima do conteúdo normal da página, mas o carrinho/menu mobile
       (z-index:700) escondem este botão explicitamente via
       .panda-floating-obscured (ver comentário abaixo) — não dependemos só
       de z-index pra isso. */
    z-index: 750;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
  }
  .panda-wa.panda-is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  /* Escondido enquanto o carrinho ou o menu mobile estão abertos — os dois
     abrem do lado direito da tela, exatamente onde este botão fica, e antes
     ele ficava boiando por cima do painel (ver
     assets/panda-floating-buttons.js, que observa os dois drawers). */
  .panda-wa.panda-floating-obscured {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .panda-wa__btn {
    width: 52px;
    height: 52px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.28);
    animation: panda-wa-pulse 2.5s infinite;
  }
  .panda-wa__lbl {
    order: -1;
    background: var(--panda-ink);
    color: var(--panda-white);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(9, 5, 5, 0.25);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
  }
  .panda-wa__btn:hover ~ .panda-wa__lbl {
    opacity: 1;
    transform: translateX(0);
  }
  @keyframes panda-wa-pulse {
    0%, 100% {
      box-shadow: 0 4px 18px rgba(37, 211, 102, 0.28);
    }
    50% {
      box-shadow: 0 4px 28px rgba(37, 211, 102, 0.55);
    }
  }

  @media (max-width: 768px) {
    .panda-wa {
      /* Invertido com o botão "Descobrir aro" só no mobile: aqui vira o
         botão de cima (era o de baixo). */
      bottom: 128px;
      right: 16px;
    }
    .panda-wa__lbl {
      display: none;
    }
  }
/* END_SECTION:panda-whatsapp-button */