:root{ --border:#e7e7e7; --muted:#6b7280; --brand:#111; --accent:#ff7a1a; }
body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

.checkout.container{ padding-top:20px; }
.checkout-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:36px; align-items:start; }
@media (max-width:980px){ .checkout-grid{ grid-template-columns:1fr; } }

.gallery-card{ border:1px solid var(--border); background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.carousel{ position:relative; aspect-ratio:16/10; background:#f5f5f5; overflow:hidden; }
.carousel .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .35s ease; }
.carousel .slide.is-active{ opacity:1; }
.carousel .c-prev,.carousel .c-next{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--border); background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12); cursor:pointer; font-weight:900; font-size:20px; color:#111; }
.carousel .c-prev{ left:16px; } .carousel .c-next{ right:16px; }
.carousel .c-prev:hover,.carousel .c-next:hover{ transform:translateY(-50%) scale(1.05); }

/* dots container */
.carousel .c-dots{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex;
  align-items:center;          /* prevent vertical stretch */
  gap:6px; padding:6px 8px; border-radius:999px;
  background:rgba(255,255,255,.85); border:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(6px);
}

/* single, square dot rule */
.carousel .c-dot{
  --size: 10px;
  width: var(--size);
  height: var(--size);
  /*aspect-ratio: 1 / 1;*/
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: 50%;
  display: inline-block;
  padding: 0;
  margin: 0;
  background: #b9b9b9;
  border: 1px solid #b9b9b9;
  cursor: pointer;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
}
.carousel .c-dot.is-active{ background:#111; border-color:#111; }

/* mobile size only */
@media (max-width:560px){
  .carousel .c-prev,.carousel .c-next{ width:40px; height:40px; }
  .carousel .c-dot{ --size: 8px; }
}

/*
.carousel .c-dots{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:6px; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,.85); border:1px solid var(--border); backdrop-filter:saturate(140%) blur(6px); }
.carousel .c-dot{ width:8px; height:9px; border-radius:50%; background:#b9b9b9; border:1px solid #b9b9b9; cursor:pointer; position:relative; }
.carousel .c-dot.is-active{ background:#111; border-color:#111; }
@media (max-width:560px){ .carousel .c-prev,.carousel .c-next{ width:40px; height:40px; } .carousel .c-dot{ width:6px; height:9px; } }*/
.carousel .c-dot::after{ content:""; position:absolute; inset:-6px; }
.p-name{ margin:0 0 10px; line-height:1.05; font-weight:900; font-size:clamp(22px,3.7vw,40px); letter-spacing:-.01em; }
.p-desc{ margin:0 0 14px; color:var(--muted); font-weight:700; font-size:clamp(16px,2.4vw,24px); line-height:1.35; }
.price-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0 14px; }
.price{ font-weight:900; font-size:clamp(24px,4.6vw,40px); }
.badge{ font-weight:800; font-size:14px; background:var(--accent); color:#fff; padding:8px 12px; border-radius:10px; box-shadow:0 6px 18px rgba(255,122,26,.35); white-space:nowrap; }

.qty-row{ display:flex; align-items:center; gap:18px; margin:8px 0 22px; }
.qty-label{ font-weight:800; font-size:clamp(16px,2.2vw,22px); }
.qty{ display:inline-flex; align-items:center; gap:12px;  border-radius:999px; background:#f3f4f6; border:1px solid var(--border); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 14px rgba(0,0,0,.06); }
.qty input{ width:60px; text-align:center; font-weight:800; font-size:22px; border:none; background:transparent; outline:none; }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-btn{ width:38px; height:38px; border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer; display:grid; place-items:center; font-size:22px; line-height:1; color:#111; }
.qty-btn:active{ transform:translateY(1px); }

.section-title{ margin:8px 0 10px; font-size:clamp(18px,2.6vw,28px); font-weight:900; }
.specs{ display:grid; gap:12px; border-top:1px solid var(--border); padding-top:12px; max-width:720px; }
.spec-row{ display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:start; }
@media (max-width:560px){ .spec-row{ grid-template-columns:1fr; } }
.spec-row dt{ font-weight:800; color:#111; } .spec-row dd{ margin:0; color:#111; }

.cta-next{ margin-top:30px; display:inline-block; border:1px solid #d1d5db; background:linear-gradient(180deg,#6b7280,#4b5563); color:#fff; font-weight:300; font-size:clamp(18px,2.6vw,20px); box-shadow:0 14px 28px rgba(0,0,0,.15); text-decoration:none; }
.cta-next:hover{ filter:brightness(1.05); }

/* Center the Next button on small screens */
@media (max-width: 640px){
.cta-next{
    display: block;          /* break the inline flow */
     width: max-content;      /* shrink to content */
    margin: 30px auto 0;     /* auto left/right = centered */
}
} 
 
/* ---- Modal overlay ---- */
.modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.7); /* dim page */
}
.modal-backdrop[hidden]{ display:none; }

/* glass panel like the nav */
.glass-panel{
  background: #f7fff4a1;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
}

.modal{ width:min(600px,92vw); padding:clamp(16px,3vw,28px); position:relative; }
.modal h3{ margin:38px 3px 8px 0; text-align:center; font-size:clamp(28px,2.6vw,28px); font-weight:900; }
.modal-sub{ margin:8px 0 18px; text-align:center; color:#333;  line-height:1.35; font-size: 17px; }

.modal-form{ display:grid; gap:16px; width:min(560px,82%); margin:0 auto; }
.modal-form input{ background:transparent; border:none; border-bottom:2px solid #333; padding:10px 6px 12px; font-size:clamp(16px,2.2vw,18px); outline:none; }
.modal-form input::placeholder{ color:#9b9b9b; }
.modal-form input:focus{ border-bottom-color:#111; }
.modal-ready{ margin:10px auto 0; font-size:clamp(16px,2.2vw,22px); }

.modal-close{
  color:#000000;
  -webkit-text-fill-color:#000000; 
  position:absolute; top:10px; right:12px;
  width:40px; height:40px;
  display:flex;                     /* center the glyph */
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;                    /* don't use line-height for centering */
  border-radius: 25%;
  font-size:14px; font-weight:900;
  border-width: 1px;
  cursor:pointer;
  .modal-close { transform: translateY(-1px); } /* optional tiny tweak */

}

.modal-close:hover{ filter:brightness(0.96); }
/* All inputs in your modal */
.modal-form input::placeholder {
  color: #000000;  /* pick your color */
  opacity: 1;      /* Safari sometimes lowers opacity */
}
@media (prefers-reduced-motion:no-preference){
    

.modal{ animation:modalIn .22s ease-out; }
  @keyframes modalIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
}