/* checkout — Cart drawer and the multi-step checkout flow.
   Load order matters: see the <link> order in index.html. */

/* ---------- cart / checkout ---------- */
.cart-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(31, 51, 36, .1);
}

.remove-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.chk-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(31, 51, 36, .16);
  background: #fff;
  font-size: 14px;
  color: var(--leaf-900);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.chk-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(236, 95, 149, .16);
}

.pay-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid rgba(31, 51, 36, .14);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s ease;
}

.pay-option:has(input:checked) {
  border-color: var(--leaf-800);
  background: var(--cream-2);
}

.pay-option input {
  accent-color: var(--leaf-800);
}

/* ---------- faq ---------- */
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq-icon {
  transition: transform .2s ease, color .2s ease;
  color: var(--accent);
}

/* ---------- cart fab ---------- */
.cart-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  background: var(--leaf-900);
  color: #fff;
  border-radius: 999px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 14px 30px -12px rgba(31, 51, 36, .55);
  cursor: pointer;
  border: none;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.cart-fab:hover {
  transform: translateY(-3px) scale(1.03);
}

.cart-fab .badge {
  background: var(--accent);
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}




/* ---------- cart-only assurance + image fixes ---------- */
.drawer-cart-product img {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 11px;
  background: var(--cream-2);
  border: 1px solid rgba(31, 51, 36, .07);
}

.drawer-cart-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(31, 51, 36, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .5);
}

.drawer-cart-assurance span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(31, 51, 36, .62);
}

/* ---------- focused cart + purchase controls ---------- */
.drawer-cart-product {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  background: #fff;
  border: 1px solid rgba(31, 51, 36, .08);
  border-radius: 15px;
}

.drawer-cart-product img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 11px;
  background: var(--cream-2);
}

.drawer-product-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.drawer-product-info>strong {
  font-size: 13px;
  line-height: 1.3;
}

.drawer-product-info>span {
  font-size: 10px;
  color: rgba(31, 51, 36, .5);
}

.drawer-line-total {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  white-space: nowrap;
}

.drawer-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.drawer-qty-row>strong {
  font-size: 12px;
  min-width: 15px;
  text-align: center;
}

.drawer-qty-btn {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  border: 1px solid rgba(31, 51, 36, .14);
  background: var(--cream);
  color: var(--leaf-900);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-qty-btn:hover {
  background: var(--accent-light);
}

.drawer-cart-note {
  font-size: 10px;
  line-height: 1.5;
  color: rgba(31, 51, 36, .5);
  padding: 9px 2px 2px;
}

.drawer-split-note {
  margin: -8px 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--leaf-800);
}

.shop-cart-note {
  font-size: 10px;
  color: rgba(31, 51, 36, .55);
  margin: 8px 0 -2px;
}

.btn:disabled {
  cursor: not-allowed !important;
}

@media(max-width:500px) {
  .drawer-cart-product {
    grid-template-columns: 58px 1fr;
  }

  .drawer-cart-product img {
    width: 58px;
    height: 58px;
  }

  .drawer-line-total {
    grid-column: 2;
    justify-self: start;
  }
}

/* ---------- streamlined page layout ---------- */
.product-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.product-video-card {
  overflow: hidden;
  border-radius: 22px;
  background: #17241a;
  box-shadow: 0 25px 55px -35px rgba(31, 51, 36, .55);
}

.product-video-card video{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;background:#101810;}
.product-video-label {
  padding: 15px 18px 0;
  color: rgba(255, 255, 255, .58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.product-video-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 18px 19px;
  color: #fff;
}

.product-video-copy strong {
  font-size: 15px;
}

.product-video-copy span {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .58);
}

.compact-buy-bar {
  position: sticky;
  bottom: 14px;
  z-index: 40;
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 12px 14px 12px 18px;
  border: 1px solid rgba(31, 51, 36, .12);
  border-radius: 18px;
  background: rgba(250, 246, 239, .94);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px -28px rgba(31, 51, 36, .5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.compact-buy-bar>div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.compact-buy-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  width: 100%;
}

.compact-buy-bar strong {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--leaf-900);
}

.compact-buy-bar small {
  font-size: 10px;
  color: rgba(31, 51, 36, .52);
}

.footer-quick-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.footer-quick-links a {
  font-size: 11px;
  color: rgba(250, 246, 239, .62);
  text-decoration: none;
}

.footer-quick-links a:hover {
  color: #fff;
}

.footer-detail-panel {
  max-width: 720px;
  margin-top: 14px;
  padding: 0;
  display: none;
}

.footer-detail-panel:target {
  display: block;
}

.footer-detail-panel details {
  border-top: 1px solid rgba(250, 246, 239, .09);
  padding: 10px 0;
}

.footer-detail-panel summary {
  cursor: pointer;
  font-size: 11px;
  color: rgba(250, 246, 239, .7);
}

.footer-detail-panel p,
.footer-review {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(250, 246, 239, .52);
  margin: 8px 0;
}

.footer-review {
  display: flex;
  gap: 9px;
  align-items: baseline;
  flex-wrap: wrap;
}

.footer-review strong {
  color: #fff;
}

.footer-review small {
  color: rgba(250, 246, 239, .38);
}

@media(max-width:750px) {
  .product-video-grid {
    grid-template-columns: 1fr;
  }

  .compact-buy-bar {
    margin-left: 12px;
    margin-right: 12px;
    bottom: 9px;
  }
}

/* ---------- full sidebar checkout flow ---------- */
.checkout-drawer {
  width: min(500px, 96vw);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.checkout-brand {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: .08em;
  color: var(--leaf-900);
  display: flex;
  align-items: center;
  gap: 0.35em;
}

.checkout-brand .logo-mark {
  height: 1.5em;
  width: auto;
}

.drawer-step-label {
  font-size: 11px;
  color: rgba(31, 51, 36, .52);
  margin-top: 3px;
}

.drawer-progress {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 14px 0 22px;
}

.progress-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 36px;
}

.progress-caption {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(31, 51, 36, .42);
}

.progress-item.is-current .progress-caption,
.progress-item.is-done .progress-caption {
  color: var(--leaf-800);
}

.progress-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 51, 36, .08);
  color: rgba(31, 51, 36, .45);
  font-size: 11px;
  font-weight: 700;
}

.progress-dot.active,
.progress-dot.done {
  background: var(--leaf-800);
  color: #fff;
}

.progress-line {
  height: 2px;
  flex: 1;
  background: rgba(31, 51, 36, .1);
  margin-top: 13px;
}

.drawer-section-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

.drawer-muted {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(31, 51, 36, .55);
  margin: 0 0 18px;
}

.drawer-group-label {
  margin: 4px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(31, 51, 36, .45);
}

.drawer-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 10px;
  margin-bottom: 18px;
}

.drawer-form-grid .full {
  grid-column: 1/-1;
}

.drawer-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.drawer-field span {
  font-size: 12px;
  font-weight: 600;
  color: rgba(31, 51, 36, .72);
}

.drawer-field .req {
  color: #b42318;
  font-style: normal;
  font-weight: 700;
}

.drawer-muted .req {
  color: #b42318;
  font-weight: 700;
}

.drawer-form-grid .chk-input,
.drawer-step .chk-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(31, 51, 36, .14);
  background: #fff;
  font-size: 15px;
}

.drawer-form-grid .chk-input:focus,
.drawer-step .chk-input:focus {
  border-color: var(--leaf-700);
  box-shadow: 0 0 0 3px rgba(44, 74, 52, .12);
}

.drawer-form-grid .chk-input.is-invalid {
  border-color: #c23b32;
  background: #fff8f7;
}

.drawer-full-btn {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.drawer-back-btn {
  border: 0;
  background: none;
  padding: 13px 0 2px;
  color: rgba(31, 51, 36, .62);
  font-size: 12px;
  cursor: pointer;
  width: 100%;
}

.drawer-inline-note {
  font-size: 11px;
  min-height: 17px;
  color: var(--leaf-800);
  margin-top: 8px;
}

.drawer-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(31, 51, 36, .1);
  padding-top: 15px;
  margin-top: 10px;
  font-size: 14px;
}

.drawer-total-row strong {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--leaf-800);
}

.drawer-payment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(31, 51, 36, .1);
  border-radius: 13px;
  cursor: pointer;
}

.drawer-payment-option:has(input:checked) {
  border-color: var(--leaf-700);
  background: var(--accent-light);
}

.drawer-payment-option>span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-payment-option strong {
  font-size: 13px;
}

.drawer-payment-option small {
  font-size: 10px;
  color: rgba(31, 51, 36, .52);
}

.drawer-payment-option b {
  font-size: 9px;
  color: var(--leaf-800);
}

.drawer-pay-fields {
  padding: 4px 0 8px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-order-mini {
  background: var(--cream-2);
  border-radius: 13px;
  padding: 12px;
  margin: 13px 0;
}

.drawer-mini-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.drawer-mini-meta {
  color: rgba(31, 51, 36, .55);
}

.drawer-mini-total {
  font-family: 'Fraunces', serif;
  font-size: 18px;
}

.drawer-mini-ship {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(31, 51, 36, .62);
}

.drawer-pay-note {
  font-size: 11px;
  color: rgba(31, 51, 36, .52);
  margin: 12px 0 0;
  line-height: 1.6;
}

.drawer-success-title {
  font-size: 25px;
  margin: 14px 0 7px;
  text-align: center;
}

.drawer-demo-warning {
  font-size: 10px;
  line-height: 1.55;
  color: rgba(31, 51, 36, .6);
  background: #fff8e7;
  border: 1px solid #ead9a7;
  padding: 10px 12px;
  border-radius: 11px;
  margin-top: 13px;
}

.drawer-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(31, 51, 36, .12);
  border-top-color: var(--leaf-800);
  border-radius: 50%;
  margin: auto;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.success-check {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--leaf-800);
  color: #fff;
  font-size: 31px;
  margin: 5px auto 0;
}

.confirmation-card {
  background: var(--cream-2);
  border-radius: 15px;
  padding: 13px;
  margin: 18px 0;
}

.confirmation-card>div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(31, 51, 36, .07);
  font-size: 11px;
}

.confirmation-card>div:last-child {
  border-bottom: 0;
}

.confirmation-card span {
  color: rgba(31, 51, 36, .53);
}

.confirmation-card strong {
  font-size: 11px;
  text-align: right;
  overflow-wrap: anywhere;
}

.confirmation-card strong a {
  color: inherit;
  text-decoration: none;
}

.email-confirmation {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--accent-light);
  border-radius: 13px;
  margin: 13px 0;
}

.email-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.email-confirmation strong {
  font-size: 12px;
}

.email-confirmation p {
  font-size: 10px;
  line-height: 1.45;
  color: rgba(31, 51, 36, .58);
  margin: 3px 0 0;
}

.drawer-order-status {
  margin: 18px 0;
}

.status-row {
  display: flex;
  gap: 10px;
  position: relative;
  padding: 8px 0;
  color: rgba(31, 51, 36, .42);
}

.status-row>span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(31, 51, 36, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex: 0 0 auto;
}

.status-row.done,
.status-row.current {
  color: var(--leaf-900);
}

.status-row.done>span {
  background: var(--leaf-800);
  color: #fff;
}

.status-row.current>span {
  background: var(--accent-light);
  color: var(--leaf-800);
  border: 1px solid var(--leaf-700);
}

.status-row strong {
  display: block;
  font-size: 11px;
}

.status-row small {
  display: block;
  font-size: 10px;
  color: rgba(31, 51, 36, .5);
  margin-top: 2px;
}

@media(max-width:500px) {
  .checkout-drawer {
    width: 100%;
    padding: 17px;
  }

  .drawer-form-grid {
    grid-template-columns: 1fr;
  }

  .drawer-form-grid .full {
    grid-column: auto;
  }
}