:root{--ink:#48291f;--cream:#fff8ee;--pink:#ffd2df;--purple:#e2d2ef;--yellow:#fce37d;--line:#d9bcb0;--berry:#bd3460}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--berry);outline-offset:3px}.announcement{background:var(--ink);color:var(--cream);padding:9px 12px;text-align:center;font-size:11px;font-weight:700;letter-spacing:1.3px;white-space:nowrap;overflow:hidden}.announcement span{color:#ffa8c6;margin:0 22px}.site-header{height:104px;max-width:1440px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{font:900 45px/1 'Fraunces',serif;letter-spacing:-3px}.logo span{color:#ec608c;font:28px 'DM Sans',sans-serif;vertical-align:top;margin-left:5px}.site-header nav{display:flex;gap:36px;font-weight:600;font-size:14px}.bag-button{display:flex;align-items:center;gap:9px;border:1.5px solid var(--ink);border-radius:40px;background:transparent;padding:10px 12px 10px 16px;font-weight:600}.bag-button b{background:var(--ink);color:var(--cream);border-radius:50%;min-width:25px;height:25px;display:grid;place-items:center;font-size:12px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1440px;margin:0 auto 52px;padding:0 3.3% 0 5%;min-height:615px}.hero-copy{padding:35px 0 20px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.7px;margin:0 0 18px}.hero h1,h2,h3,.cart-modal h2{font-family:'Fraunces',serif}.hero h1{font-size:clamp(65px,6.65vw,100px);line-height:1.04;letter-spacing:-4px;margin:0 0 24px}.hero h1 em,h2 em{color:var(--berry)}.intro{font-size:18px;line-height:1.6;margin:0 0 24px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--ink);color:var(--cream);border:0;border-radius:50px;padding:16px 25px;font-weight:700}.primary:hover{background:#703a2b}.hero-note{font-size:12px;margin-top:18px}.hero-image{min-height:560px;border-radius:170px 170px 14px 14px;overflow:hidden;background:#aebfe6;display:flex;align-items:center;justify-content:center}.hero-image img{width:100%;height:100%;object-fit:contain}.ribbon{display:flex;justify-content:space-around;gap:25px;overflow:hidden;white-space:nowrap;background:#ffc1d5;border-block:1px solid var(--ink);padding:19px;color:#963455;font-size:26px}.ribbon span{font-size:13px;letter-spacing:1.8px;font-weight:700;color:var(--ink)}.pattern-strip{max-width:1250px;margin:48px auto 0;padding:0 5%;display:grid;grid-template-columns:1.7fr 1fr;gap:25px;align-items:center}.pattern-strip img{width:100%;height:155px;object-fit:cover;border:1.5px solid var(--ink);border-radius:24px;box-shadow:0 5px 0 var(--ink)}.pattern-strip p:last-child{font:25px/1.1 'Fraunces',serif;margin:0}.menu{max-width:1250px;margin:auto;padding:80px 5% 64px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px}.section-head h2,.how h2{font-size:clamp(42px,4.5vw,62px);line-height:1.05;letter-spacing:-2px;margin:0}.section-head>p{font-size:14px;margin:0 0 6px}.products{display:grid;grid-template-columns:1fr 1fr;gap:28px}.product{border:1.5px solid var(--ink);border-radius:18px;overflow:hidden;background:var(--pink);box-shadow:0 5px 0 var(--ink)}.product.chocolate{background:var(--purple)}.product-top{display:flex;justify-content:space-between;padding:19px 24px;font-size:11px;font-weight:700;letter-spacing:1.5px}.product>img{display:block;width:calc(100% - 36px);height:300px;margin:0 18px;object-fit:cover;object-position:center 55%;border-radius:110px 110px 12px 12px}.product-bottom{padding:26px 24px}.product h3{font-size:30px;margin:0 0 8px}.product p{font-size:14px;margin:0 0 24px}.product-action{display:flex;justify-content:space-between;align-items:center;gap:10px}.product-action strong{font-size:27px}.product-action small{font-size:12px;font-weight:400}.product-action button{display:flex;gap:15px;align-items:center;background:var(--ink);color:white;border:0;border-radius:40px;padding:14px 19px;font-weight:600}.menu-foot{text-align:center;color:#73544a;font-size:12px;margin:27px 0 0}.how{background:var(--yellow);border-block:1px solid var(--ink);padding:60px max(5%,calc((100% - 1125px)/2));display:grid;grid-template-columns:1fr 1fr;gap:40px}.how ol{list-style:none;padding:0;margin:0;display:grid;gap:25px}.how li{display:flex;align-items:center;gap:20px}.how li>b{display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;min-width:43px;height:43px;font-size:13px}.how h3{font:700 18px 'DM Sans',sans-serif;margin:0 0 4px}.how p{margin:0;font-size:14px}footer{display:flex;align-items:center;justify-content:space-between;padding:38px 5%;gap:20px}footer p{font:italic 18px 'Fraunces',serif}.modal-backdrop{position:fixed;inset:0;z-index:10;background:#48291f66;display:grid;place-items:center;padding:18px}.cart-modal{position:relative;max-height:90vh;overflow:auto;width:min(500px,100%);background:var(--cream);border:1.5px solid var(--ink);border-radius:24px;padding:30px;box-shadow:0 20px 60px #48291f33}.close{position:absolute;top:14px;right:16px;border:0;background:transparent;font-size:30px;color:var(--ink)}.cart-modal h2{font-size:32px;margin:4px 35px 0 0}.modal-subtitle,.payment-note{color:#73544a;font-size:13px}.cart-line{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:15px 0}.cart-line>div:first-child{flex:1}.cart-line small{display:block;color:#73544a}.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:25px;overflow:hidden}.qty button{border:0;background:transparent;padding:9px 11px}.qty span{min-width:20px;text-align:center}.total{display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:15px}.total strong{font-size:27px}.full{width:100%}.checkout-form{display:grid;gap:14px}.checkout-form label{display:grid;gap:5px;font-weight:600;font-size:14px}.checkout-form label span{font-weight:400}.checkout-form input,.checkout-form textarea{width:100%;border:1px solid #bfa798;border-radius:10px;background:#fffdf8;padding:11px;font:16px 'DM Sans',sans-serif;color:var(--ink)}.checkout-form textarea{min-height:76px;resize:vertical}.text-button{display:block;background:none;border:0;text-decoration:underline;margin:13px auto 0}.success{text-align:center;padding:25px 0}.success h3{font-size:27px;margin:0 0 8px}.success p{margin:4px 0}.success-mark{font-size:42px}.empty{text-align:center;padding:28px}.empty h3{font:27px 'Fraunces',serif}.empty button{margin-top:8px}@media(max-width:700px){.site-header{height:83px;padding:0 6%}.site-header nav{display:none}.logo{font-size:37px}.hero{display:flex;flex-direction:column;padding:0 6%;gap:24px;min-height:0}.hero-copy{padding:12px 0 0}.hero h1{font-size:clamp(50px,13vw,68px);letter-spacing:-3px}.hero-image{height:420px;min-height:0;border-radius:140px 140px 12px 12px}.ribbon{justify-content:flex-start;padding:15px;gap:20px}.ribbon span{font-size:11px}.pattern-strip{grid-template-columns:1fr;margin-top:34px;padding:0 6%;gap:18px}.pattern-strip img{height:130px}.pattern-strip p:last-child{font-size:22px}.menu{padding:50px 6% 40px}.section-head{display:block}.section-head>p{margin-top:18px}.products{grid-template-columns:1fr}.product>img{height:270px}.product-action{flex-wrap:wrap}.how{grid-template-columns:1fr;padding:40px 6%;gap:30px}footer{padding:28px 6%;display:grid;gap:12px}footer p{margin:0}.cart-modal{padding:24px 20px}}
[hidden]{display:none!important}

/* ==========================================================================
   Checkout Page Styles
   ========================================================================== */
.checkout-page {
  background: #fdfaf4;
  min-height: 100vh;
}
.checkout-header {
  height: 80px;
  max-width: 1200px;
  margin: auto;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--line);
}
.checkout-badge span {
  background: #f1f8ed;
  color: #276738;
  border: 1px solid #b8dfbe;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.text-link {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
}
.checkout-container {
  max-width: 1200px;
  margin: 36px auto 60px;
  padding: 0 5%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: start;
}
.checkout-card {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 26px;
  margin-bottom: 24px;
  box-shadow: 0 4px 0 var(--ink);
}
.card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.card-head h2 {
  font-size: 22px;
  margin: 0;
  line-height: 1.2;
}
.card-head p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #73544a;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.input-group label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.input-group label span {
  font-weight: 400;
  color: #73544a;
}
.input-group input, .input-group textarea {
  width: 100%;
  border: 1.5px solid #d9bcb0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  background: #fffdf8;
  color: var(--ink);
  transition: border-color 0.2s;
}
.input-group input:focus, .input-group textarea:focus {
  outline: none;
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(189, 52, 96, 0.15);
}
.payment-method-box {
  background: #fff8ee;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}
.payment-method-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.radio-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #276738;
  color: white;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: bold;
}
.shield-badge {
  font-size: 11px;
  font-weight: 700;
  background: #ffd2df;
  color: var(--berry);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
}
.payment-types {
  font-size: 13px;
  color: #73544a;
  margin: 0 0 12px;
}
.payment-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill {
  background: #fff;
  border: 1px solid var(--line);
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.pay-large-btn {
  font-size: 17px;
  padding: 18px 24px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.2);
}
.terms-note {
  text-align: center;
  font-size: 12px;
  color: #73544a;
  margin: 12px 0 0;
}
.summary-card {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 5px 0 var(--ink);
  position: sticky;
  top: 24px;
}
.summary-card h2 {
  font-size: 24px;
  margin: 0 0 18px;
}
.summary-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f0dfd8;
}
.summary-item-img {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
  border: 1.5px solid var(--ink);
}
.summary-item-details {
  flex: 1;
}
.summary-item-details strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
}
.summary-item-details small {
  font-size: 12px;
  color: #73544a;
}
.summary-item-qty {
  font-size: 12px;
  font-weight: 600;
  color: var(--berry);
  margin-top: 2px;
}
.summary-item-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.summary-pricing {
  margin-top: 18px;
}
.price-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}
.free-tag {
  background: #e1f5fe;
  color: #0277bd;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
}
.price-divider {
  height: 1.5px;
  background: var(--line);
  margin: 14px 0;
}
.price-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price-total-row small {
  display: block;
  font-size: 11px;
  color: #73544a;
}
.total-highlight {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  color: var(--berry);
}
.perks-strip {
  margin-top: 24px;
  background: #fff8ee;
  border-radius: 12px;
  padding: 14px;
  display: grid;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.success-screen-container {
  max-width: 650px;
  margin: 50px auto;
  padding: 0 5%;
}
.success-box {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 24px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 8px 0 var(--ink);
}
.success-badge-large {
  font-size: 54px;
  margin-bottom: 10px;
}
.success-title {
  font-size: 34px;
  margin: 0 0 10px;
  color: var(--ink);
}
.success-subtitle {
  font-size: 15px;
  color: #73544a;
  max-width: 450px;
  margin: 0 auto 24px;
}
.receipt-card {
  background: #fffdf8;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  text-align: left;
}
.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f3e6de;
  font-size: 14px;
}
.receipt-row:last-child {
  border-bottom: none;
}
.receipt-row span:first-child {
  color: #73544a;
}
.paid-tag {
  background: #e8f5e9;
  color: #2e7d32;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
}
@media(max-width: 850px) {
  .checkout-container {
    grid-template-columns: 1fr;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.test-helper-card {
  background: #f4faf4;
  border: 1.5px solid #a4d9a8;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #1b4d24;
}
.test-helper-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  color: #123819;
  display: flex;
  align-items: center;
  gap: 6px;
}
.test-row {
  margin-top: 8px;
  line-height: 1.5;
}
.test-row code {
  background: #fff;
  border: 1px solid #c2e5c5;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
  color: #123819;
}

/* ==========================================================================
   Payment Simulator Modal
   ========================================================================== */
.payment-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(72, 41, 31, 0.65);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
}
.payment-modal-card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 24px;
  width: min(460px, 100%);
  padding: 28px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: popIn 0.25s ease-out;
}
@keyframes popIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 26px;
  color: var(--ink);
  cursor: pointer;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 18px;
}
.modal-brand .brand-logo {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  display: block;
}
.brand-tag {
  font-size: 11px;
  color: #73544a;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.modal-amount small {
  display: block;
  font-size: 11px;
  color: #73544a;
}
.modal-amount strong {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  color: var(--berry);
}
.modal-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.tab-btn {
  flex: 1;
  background: #fffdf8;
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.tab-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.sim-input-group {
  margin-bottom: 14px;
  text-align: left;
}
.sim-input-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--ink);
}
.sim-input-group input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
}
.sim-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sim-qr-box {
  background: #fffdf8;
  border: 1.5px dashed var(--ink);
  border-radius: 16px;
  padding: 16px;
  display: inline-block;
  margin: auto;
}
.upi-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 16px;
}
.upi-app-btn {
  background: #fffdf8;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.upi-app-btn:hover {
  background: var(--pink);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.upi-app-btn span {
  font-size: 18px;
}
.bank-list {
  display: grid;
  gap: 8px;
  text-align: left;
}
.bank-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.modal-footer {
  margin-top: 18px;
  font-size: 11px;
  color: #73544a;
  text-align: center;
}