/* ELYUNEA cart drawer and checkout page. */

:root {
  --ely-pink: #d85d8b;
  --ely-pink-soft: #f8e5eb;
  --ely-ink: #191719;
  --ely-muted: #696568;
  --ely-line: #dedade;
  --ely-paper: #fcfbfc;
}

/* Floating WhatsApp button, present on every page.
   z-index 20: above the sticky cart bar (18) so it never gets clipped by it,
   below the cart drawer (60) so it sits behind the drawer's backdrop while
   the bag is open instead of floating on top of it. */
.ely-whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(39, 21, 27, 0.22);
  transition: bottom 0.25s ease, transform 0.15s ease;
}

.ely-whatsapp-float:hover {
  transform: scale(1.06);
}

.ely-whatsapp-float svg {
  width: 40px;
  height: 40px;
}

/* Pushed up while #stickyCartBar (home-equivalent.css) is visible, so the
   two never overlap on product pages. */
.ely-whatsapp-float.is-raised {
  bottom: 92px;
}

@media (max-width: 700px) {
  .ely-whatsapp-float {
    right: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
  }

  .ely-whatsapp-float svg {
    width: 36px;
    height: 36px;
  }

  .ely-whatsapp-float.is-raised {
    bottom: 78px;
  }
}

/* Item count next to the header bag link. */
.ely-bag-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 7px;
  border-radius: 10px;
  background: var(--ely-pink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.ely-bag-badge[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ drawer */

.ely-cart {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.ely-cart[hidden] {
  display: none !important;
}

.ely-cart__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(39, 21, 27, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.ely-cart.is-open .ely-cart__backdrop {
  opacity: 1;
}

.ely-cart__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  height: 100%;
  padding: 30px 28px 24px;
  background: #fff;
  box-shadow: -18px 0 48px rgba(39, 21, 27, 0.16);
  transform: translateX(100%);
  transition: transform 0.26s ease;
  overflow: hidden;
}

.ely-cart.is-open .ely-cart__panel {
  transform: translateX(0);
}

.ely-cart__head {
  position: relative;
  flex: 0 0 auto;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ely-line);
}

.ely-cart__eyebrow {
  margin: 0 0 6px;
  color: var(--ely-pink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ely-cart__title {
  margin: 0;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.ely-cart__count {
  display: inline-block;
  margin-left: 8px;
  color: var(--ely-muted);
  font-size: 17px;
  font-weight: 500;
  vertical-align: super;
}

.ely-cart__close {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ely-ink);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.ely-cart__close:hover {
  background: var(--ely-pink-soft);
}

.ely-cart__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 4px 12px;
  margin: 0 -4px;
}

.ely-cart__empty {
  padding: 44px 0;
  color: var(--ely-muted);
  text-align: center;
}

.ely-cart__item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--ely-line);
}

.ely-cart__thumb {
  width: 78px;
  height: 78px;
  border-radius: 12px;
  background: var(--ely-pink-soft);
  object-fit: cover;
}

.ely-cart__name {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.25;
}

.ely-cart__meta {
  margin: 0 0 12px;
  color: var(--ely-muted);
  font-size: 13px;
}

.ely-cart__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ely-line);
  border-radius: 10px;
  overflow: hidden;
}

.ely-cart__qty button {
  width: 34px;
  height: 34px;
  border: 0;
  background: var(--ely-paper);
  color: var(--ely-ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.ely-cart__qty button:hover:not(:disabled) {
  background: var(--ely-pink-soft);
  color: var(--ely-pink);
}

.ely-cart__qty button:disabled {
  color: #b9b5b9;
  cursor: not-allowed;
}

.ely-cart__qty span {
  min-width: 40px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.ely-cart__remove {
  display: block;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ely-muted);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.ely-cart__remove:hover {
  color: var(--ely-pink);
}

.ely-cart__price {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

.ely-cart__foot {
  flex: 0 0 auto;
  padding-top: 18px;
  border-top: 1px solid var(--ely-line);
}

.ely-cart__foot[hidden] {
  display: none !important;
}

.ely-cart__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 19px;
}

.ely-cart__line strong {
  font-size: 24px;
}

.ely-cart__savings {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #eef7f0;
  color: #2f6b45;
  font-size: 14px;
  font-weight: 600;
}

.ely-cart__shipping {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--ely-line);
  border-radius: 10px;
  color: var(--ely-muted);
  font-size: 14px;
}

.ely-cart__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 20px;
  border-radius: 34px;
  background: var(--ely-pink);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.ely-cart__cta:hover {
  background: #c44e7b;
}

@media (max-width: 560px) {
  .ely-cart__panel {
    width: 100%;
    padding: 24px 18px 18px;
  }

  .ely-cart__title {
    font-size: 32px;
  }

  .ely-cart__item {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .ely-cart__thumb {
    width: 62px;
    height: 62px;
  }
}

/* ------------------------------------------------------------- checkout */

.ely-checkout {
  padding: 46px 0 90px;
  background: var(--ely-paper);
}

.ely-checkout__inner {
  width: 88%;
  max-width: 1180px;
  margin: 0 auto;
}

.ely-checkout__eyebrow {
  margin: 0 0 6px;
  color: var(--ely-pink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ely-checkout__title {
  margin: 0 0 8px;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.ely-checkout__lead {
  margin: 0 0 34px;
  max-width: 60ch;
  color: var(--ely-muted);
  font-size: 16px;
}

.ely-checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 34px;
  align-items: start;
}

.ely-card {
  padding: 26px 28px;
  margin-bottom: 20px;
  border: 1px solid var(--ely-line);
  border-radius: 18px;
  background: #fff;
}

.ely-card h2 {
  margin: 0 0 18px;
  font-size: 22px;
}

.ely-field {
  display: block;
  margin-bottom: 16px;
}

.ely-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.ely-field input,
.ely-field select,
.ely-field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--ely-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ely-ink);
  font: inherit;
  font-size: 15px;
}

.ely-field input:focus,
.ely-field select:focus,
.ely-field textarea:focus {
  border-color: var(--ely-pink);
  outline: 2px solid rgba(216, 93, 139, 0.18);
  outline-offset: 1px;
}

.ely-field input[aria-invalid="true"],
.ely-field select[aria-invalid="true"] {
  border-color: #c0392b;
}

.ely-field__error {
  display: block;
  margin-top: 5px;
  color: #c0392b;
  font-size: 13px;
  min-height: 1em;
}

.ely-field__hint {
  display: block;
  margin-top: 5px;
  color: var(--ely-muted);
  font-size: 13px;
}

.ely-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ely-payment-methods {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.ely-payment-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--ely-line);
  border-radius: 12px;
  cursor: pointer;
}

.ely-payment-option:has(input:checked) {
  border-color: var(--ely-pink);
  background: var(--ely-pink-soft);
}

.ely-payment-option input {
  margin-top: 3px;
  accent-color: var(--ely-pink);
  flex: 0 0 auto;
}

.ely-payment-option__body b {
  display: block;
  font-size: 15px;
}

.ely-payment-option__body small {
  color: var(--ely-muted);
  font-size: 13px;
}

.ely-transfer-details {
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--ely-pink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.ely-transfer-details p {
  margin: 0 0 8px;
}

.ely-transfer-details p:last-child {
  margin-bottom: 0;
  color: var(--ely-muted);
  font-size: 13px;
}

.ely-transfer-confirmation {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.ely-transfer-confirmation[hidden] {
  display: none !important;
}

.ely-transfer-confirmation__card {
  max-width: 480px;
  width: 100%;
  padding: 32px;
  border: 1px solid var(--ely-line);
  border-radius: 18px;
  background: #fff;
  text-align: center;
}

.ely-transfer-confirmation__card h2 {
  margin: 0 0 14px;
  font-size: 28px;
}

.ely-transfer-confirmation__card p {
  margin: 0 0 12px;
  color: var(--ely-muted);
  font-size: 15px;
  line-height: 1.5;
}

.ely-transfer-confirmation__alias {
  padding: 14px;
  margin-bottom: 14px !important;
  border-radius: 10px;
  background: var(--ely-pink-soft);
  color: var(--ely-pink) !important;
  font-size: 22px !important;
  font-weight: 700;
}

.ely-transfer-confirmation__card .ely-pay {
  display: block;
  margin: 18px 0;
  text-decoration: none;
  text-align: center;
}

.ely-transfer-confirmation__note {
  font-size: 13px !important;
}

.ely-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
}

.ely-consent input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--ely-pink);
  flex: 0 0 auto;
}

/* Summary */

.ely-summary {
  position: sticky;
  top: 20px;
  padding: 26px 26px 28px;
  border: 1px solid var(--ely-line);
  border-radius: 18px;
  background: #fff;
}

.ely-summary h2 {
  margin: 0 0 18px;
  font-size: 22px;
}

.ely-summary__item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--ely-line);
}

.ely-summary__item img {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: var(--ely-pink-soft);
  object-fit: cover;
}

.ely-summary__item b {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}

.ely-summary__item small {
  color: var(--ely-muted);
  font-size: 13px;
}

.ely-summary__item span {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.ely-summary__line {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 15px;
}

.ely-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid var(--ely-line);
  font-size: 18px;
  font-weight: 700;
}

.ely-summary__total strong {
  font-size: 26px;
}

.ely-summary__note {
  margin: 12px 0 18px;
  color: var(--ely-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.ely-pay {
  display: block;
  width: 100%;
  padding: 20px;
  border: 0;
  border-radius: 34px;
  background: var(--ely-pink);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}

.ely-pay:hover:not(:disabled) {
  background: #c44e7b;
}

.ely-pay:disabled {
  background: #cfc9cd;
  cursor: progress;
}

.ely-status {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.ely-status[data-kind="error"] {
  color: #c0392b;
}

.ely-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 16px;
}

.ely-chips span {
  padding: 6px 9px;
  border: 1px solid var(--ely-line);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
}

.ely-checkout__empty {
  padding: 70px 0;
  text-align: center;
}

.ely-checkout__empty p {
  margin: 0 0 22px;
  color: var(--ely-muted);
  font-size: 18px;
}

.ely-checkout__empty a {
  display: inline-block;
  padding: 16px 34px;
  border-radius: 30px;
  background: var(--ely-pink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .ely-checkout__grid {
    grid-template-columns: 1fr;
  }

  .ely-summary {
    position: static;
    order: -1;
  }
}

@media (max-width: 560px) {
  .ely-checkout__inner {
    width: 92%;
  }

  .ely-card {
    padding: 20px 18px;
  }

  .ely-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Elements with their own "display" declaration must also declare [hidden]
   explicitly, since a plain display:flex/grid rule can outrank the
   user-agent stylesheet's [hidden] { display: none } once a stylesheet
   defines display for that selector at all — the same reason .ely-cart,
   .ely-cart__foot and .ely-bag-badge above use !important for this. Found
   via a real bug: the transfer confirmation screen showed through the
   "hidden" attribute. */
.ely-payment-option[hidden],
.ely-summary__line[hidden] {
  display: none !important;
}