/* ---------- shared cart, account button and sign-in window (all pages) ---------- */
.acct { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 14px/1 inherit; font-family: inherit; color: var(--graphite); }
.acct svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.acct.in svg { stroke: #6d5bd0; }
.cart, .login { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 20px; }
.cart[hidden], .login[hidden] { display: none; }
.cart .buy-x, .login .buy-x { z-index: 3; }
/* cart bar */
.cart-bar { position: fixed; z-index: 40; left: 50%; bottom: 22px; translate: -50% 0; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 18px; border-radius: 999px;
  animation: barIn .5s var(--spring); }
.cart-bar[hidden] { display: none; }
@keyframes barIn { from { opacity: 0; translate: -50% 30px; } }
.cart-ic { position: relative; display: grid; place-items: center; }
.cart-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--graphite); stroke-width: 1.7; stroke-linejoin: round; }
.cart-n { position: absolute; right: -8px; top: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #6d5bd0; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.cart-sum { font-size: 16px; font-weight: 600; white-space: nowrap; }
.cart-bar.bump { animation: bump .45s var(--spring); }
@keyframes bump { 40% { scale: 1.06; } }

/* cart panel */
.cart { place-items: stretch end; padding: 14px; }
.cart-panel { position: relative; width: min(440px, 100%); height: 100%; border-radius: 30px; padding: 30px 26px 24px; display: flex; flex-direction: column; gap: 14px;
  overflow: hidden auto; animation: slideIn .45s var(--spring); scrollbar-width: thin; }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
.cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cart-list li { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 12px; align-items: center; padding: 8px; border-radius: 18px; background: rgb(255 255 255 / .6);
  box-shadow: inset 0 0 0 1px rgb(132 138 160 / .18); }
.cart-list img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; }
.cart-list b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cart-list em { display: block; font-style: normal; font-size: 12px; color: var(--soft-ink); margin-top: 2px; }
.cart-list .pr { font-size: 14px; font-weight: 600; }
.cart-rm { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--soft-ink); font-size: 15px; }
.cart-rm:hover { background: rgb(35 36 39 / .06); color: var(--graphite); }
.cart-empty { color: var(--soft-ink); font-size: 14px; }
.cart-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid rgb(35 36 39 / .08); }
.cart-foot .buy-price { align-items: baseline; }
.login-card { width: min(440px, 100%); }

.cart-lang { display: inline-flex; gap: 4px; margin-top: 6px; }
.cart-lang button { height: 26px; padding: 0 9px; border: 0; border-radius: 999px; cursor: pointer; font: 600 11.5px/1 inherit; font-family: inherit; color: var(--soft-ink);
  background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(132 138 160 / .3); }
.cart-lang button.on { background: #6d5bd0; color: #fff; box-shadow: none; }
.cart-lang.need button { box-shadow: inset 0 0 0 1.5px rgb(180 71 106 / .7); }
.cart-promo summary { cursor: pointer; font-size: 13px; color: var(--soft-ink); text-decoration: underline; text-underline-offset: 3px; }
.cart-promo-row { display: flex; gap: 8px; margin-top: 8px; }
.cart-promo-row input { flex: 1; height: 40px; padding: 0 14px; border-radius: 14px; border: 0; background: rgb(255 255 255 / .75); box-shadow: inset 0 0 0 1px rgb(132 138 160 / .3); font: inherit; }
.cart-promo-msg { margin: 6px 0 0; font-size: 12.5px; color: var(--soft-ink); }
.cart-note, .login-msg { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--soft-ink); text-align: center; }
.cart-bar .btn { min-height: 42px; }
.pc-add, .cart-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cart-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.cart-add.in { background: #6d5bd0; color: #fff; }
@media (max-width: 900px) {
  .acct span { display: none; }
  .acct { width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 700px) {
  .cart { padding: 8px; place-items: end stretch; }
  .cart-panel { width: 100%; height: auto; max-height: 88svh; border-radius: 26px; animation-name: sheetIn; }
  @keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } }
  .cart-bar { left: 12px; right: 12px; translate: none; justify-content: space-between; }
  @keyframes barIn { from { opacity: 0; transform: translateY(30px); } }
}
.cart-icon { width: 44px; min-width: 44px; padding: 0; }
.btn-sm.cart-icon { width: 40px; min-width: 40px; }
.buybox .cart-icon { width: 56px; min-width: 56px; }
.prod-btns { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.prod-buy .prod-btns .cart-add { min-width: 0; padding: 0 20px; }
@media (max-width: 700px) { .prod-buy .prod-btns { width: 100%; } .prod-buy .prod-btns .btn { flex: 1; } }
.pill:has(.cart-icon) { grid-template-columns: 64px 1fr auto auto auto; }
.buy-row { display: flex; gap: 10px; align-items: stretch; }
@media (max-width: 900px) {
  .pill:has(.cart-icon) { grid-template-columns: 52px 1fr 44px; }
  .pill:has(.cart-icon) > div:not(.ic) { grid-column: 2 / -1; }
  .pill:has(.cart-icon) .price2 { grid-column: 2 / -1; }
  .pill:has(.cart-icon) [data-details] { grid-column: 1 / 3; }
  .pill .btn.cart-icon { grid-column: 3; width: 44px; min-width: 44px; justify-self: end; }
  .buy-row { width: 100%; } .buy-row [data-buy] { flex: 1; }
}

/* sign in / sign up window */
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form [hidden], .login-tabs[hidden], .login-forgot[hidden] { display: none; }
.login-tabs { position: relative; align-self: center; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; margin-top: 4px;
  background: rgb(255 255 255 / .55); box-shadow: inset 0 0 0 1px rgb(132 138 160 / .25); }
.login-tabs button { position: relative; z-index: 1; min-width: 120px; height: 38px; border: 0; background: none; border-radius: 999px; cursor: pointer; font: 500 14px/1 inherit; font-family: inherit; color: var(--soft-ink); }
.login-tabs button[aria-selected="true"] { color: var(--graphite); font-weight: 600; }
.login-knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 6px 14px -8px rgb(60 62 82 / .45), 0 0 0 1px rgb(132 138 160 / .14); transition: transform .4s var(--spring); }
.login-tabs[data-on="1"] .login-knob { transform: translateX(100%); }
.login-forgot { align-self: center; border: 0; background: none; cursor: pointer; font: 13px inherit; font-family: inherit; color: var(--soft-ink); text-decoration: underline; text-underline-offset: 3px; }
.login-tabs:not([hidden]) + .login-h { display: none; }
:root[data-theme="dark"] .login-tabs { background: rgb(255 255 255 / .06); }
:root[data-theme="dark"] .login-knob { background: rgb(255 255 255 / .14); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 48px; }
.pw-eye { position: absolute; right: 8px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--soft-ink); display: grid; place-items: center; }
.pw-eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pw-eye.on { color: #6d5bd0; }

/* official payment logos (plata by mono brandbook) */
.paylogos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.paylogos img { display: block; height: 20px; width: auto; }
.paylogos .pl-plata { height: 22px; }
.paylogos .pl-d { display: none; }
:root[data-theme="dark"] .paylogos .pl-l { display: none; }
:root[data-theme="dark"] .paylogos .pl-d { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .paylogos .pl-l { display: none; }
  :root:not([data-theme="light"]) .paylogos .pl-d { display: block; }
}
.footer-pay { justify-content: flex-start; margin-top: 18px; opacity: .9; }