/* =========================================================
   SATRUPA MASTER CUSTOMER UI
   Home page is the visual source of truth.
   Loaded after page-specific CSS. No JS/API selectors changed.
   ========================================================= */

:root{
  --sat-bg:#EDE5D8;
  --sat-surface:#fff;
  --sat-ink:#171a10;
  --sat-olive:#3D4B2A;
  --sat-gold:#D4AF37;
  --sat-gold-soft:#f0eadf;
  --sat-muted:rgba(0,0,0,.48);
  --sat-line:rgba(0,0,0,.08);
  --sat-shadow:0 14px 40px rgba(23,26,16,.07);
}

html{scroll-behavior:smooth}
body{background:var(--sat-bg)!important;color:var(--sat-ink);font-family:"DM Sans",sans-serif}
button,input,select,textarea{font-family:"DM Sans",sans-serif}

/* ---------- shared content ---------- */
.checkout-banner,.track-header,.orders-page-header,.contact-title,.details-heading{text-align:center}
.checkout-banner h1,.track-header h1,.orders-page-header h1,.contact-title h1,.details-heading h2{font-family:"Playfair Display",serif!important;color:var(--sat-olive)!important;font-weight:500!important}
.section-label,.checkout-banner .eyebrow,.track-eyebrow,.orders-eyebrow,.contact-eyebrow,.popup-label{color:var(--sat-gold)!important;letter-spacing:.22em!important;font-weight:700!important}

/* ---------- customer cards ---------- */
.checkout-card,.order-summary,.cart-items-section,.cart-summary,.contact-box,.track-card,.timeline-card,.orders-toolbar-wrap,.order-card,.team-card,.product-details-section,.product-cta{
  border:1px solid var(--sat-line)!important;
  box-shadow:var(--sat-shadow)!important;
  background:var(--sat-surface)!important;
  border-radius:20px!important;
}

/* =========================================================
   CHECKOUT — MOBILE FIRST / PREMIUM
   ========================================================= */
.checkout-banner{
  width:min(1240px,calc(100% - 32px));
  margin:16px auto 0;
  padding:54px 24px 38px;
  background:var(--sat-ink)!important;
  border-radius:24px!important;
  color:#fff!important;
}
.checkout-banner h1{margin:0;color:#fff!important;font-size:clamp(38px,5vw,56px);line-height:1.05}
.checkout-banner p{margin:12px auto 0;max-width:650px;color:rgba(255,255,255,.58);font-size:14px;line-height:1.7}

.checkout-progress{
  width:min(760px,calc(100% - 32px));
  margin:0 auto 38px;
  padding:12px 10px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:12px!important;
  background:#fff;
  border:1px solid var(--sat-line);
  border-radius:999px;
  box-shadow:0 8px 25px rgba(23,26,16,.05);
}
.progress-step{display:flex!important;align-items:center;gap:8px;flex:0 0 auto;color:#9a9a94;font-size:12px;font-weight:600}
.progress-step.active,.progress-step.completed{color:var(--sat-olive)}
.progress-circle{width:34px!important;height:34px!important;border-radius:50%;display:grid!important;place-items:center;background:#eeeade!important;color:#777!important;font-size:14px!important}
.progress-step.active .progress-circle,.progress-step.completed .progress-circle{background:var(--sat-gold)!important;color:var(--sat-ink)!important}
.progress-line{height:1px!important;flex:1;min-width:20px;max-width:90px;background:#ddd8ca!important}

.checkout-page{padding:0 0 80px!important}
.checkout-container{width:min(1180px,calc(100% - 32px))!important;display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr)!important;gap:22px!important;align-items:start}
.checkout-left,.checkout-right{min-width:0}
.checkout-card{padding:30px!important}
.checkout-card h2,.order-summary h2{font-family:"Playfair Display",serif!important;color:var(--sat-olive)!important;font-size:26px!important;font-weight:500!important;margin:0 0 8px!important}
.checkout-card>p,.summary-subtitle{color:var(--sat-muted)!important;font-size:13px!important;line-height:1.7!important}
.checkout-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px!important;margin-top:25px}
.form-group{min-width:0}
.form-group label{display:block!important;margin:0 0 7px!important;color:#3c4136!important;font-size:12px!important;font-weight:700!important}
.form-group input,.form-group select,.form-group textarea{width:100%!important;min-height:48px!important;padding:0 14px!important;border:1px solid #dedbd2!important;border-radius:12px!important;background:#fff!important;color:var(--sat-ink)!important;outline:none!important;font-size:14px!important;transition:.2s!important}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--sat-olive)!important;box-shadow:0 0 0 3px rgba(58,73,33,.08)!important}
.payment-section{margin-top:30px;padding-top:28px;border-top:1px solid var(--sat-line)}
.payment-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.payment-card{min-width:0!important;display:flex!important;align-items:flex-start!important;gap:12px!important;padding:16px!important;border:1px solid #e3dfd5!important;border-radius:14px!important;background:#fff!important;cursor:pointer;transition:.2s}
.payment-card:hover{border-color:#b7aa83!important;background:#fcfaf5!important}
.payment-card:has(input:checked){border-color:var(--sat-olive)!important;background:#f4f5ed!important;box-shadow:0 0 0 2px rgba(58,73,33,.06)}
.payment-card input{accent-color:var(--sat-olive);margin-top:3px}
.payment-card h4{margin:0;color:var(--sat-ink);font-size:13px}.payment-card h4 i{color:var(--sat-olive);width:18px;margin-right:5px}
.payment-card p{margin:4px 0 0;color:var(--sat-muted);font-size:11px;line-height:1.5}
.terms-box{margin-top:22px;padding:14px 16px;border-radius:12px;background:#f8f6f0;color:#666;font-size:11px;line-height:1.6}
.terms-box label{display:flex;align-items:flex-start;gap:9px}
.terms-box input{accent-color:var(--sat-olive);margin-top:2px}
.checkout-actions{margin-top:18px}
.place-order-btn{width:100%!important;min-height:52px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;border:0!important;border-radius:999px!important;background:var(--sat-ink)!important;color:#fff!important;font-size:14px!important;font-weight:700!important;cursor:pointer!important;box-shadow:0 12px 28px rgba(23,26,16,.18)!important;transition:.2s!important}
.place-order-btn:hover{background:var(--sat-olive)!important;transform:translateY(-1px)}

.order-summary{padding:26px!important;position:sticky;top:98px}
#orderItems{margin-top:18px}
.checkout-product{display:grid!important;grid-template-columns:64px minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;padding:13px 0!important;border-bottom:1px solid var(--sat-line)!important}
.checkout-product-img{width:64px!important;height:78px!important;object-fit:cover!important;border-radius:10px!important;background:#eee9df}
.checkout-product-info{min-width:0!important}
.checkout-product-info h4{margin:0!important;color:var(--sat-ink)!important;font-size:13px!important;line-height:1.4!important;overflow-wrap:anywhere}
.checkout-product-info p{margin:5px 0 0!important;color:var(--sat-muted)!important;font-size:10px!important}
.checkout-product-price{color:var(--sat-olive)!important;font-size:13px!important;font-weight:700!important;white-space:nowrap}
.summary-total{margin-top:18px}
.summary-row{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:15px!important;padding:8px 0!important;color:#666!important;font-size:12px!important}
.summary-row span:last-child{color:var(--sat-ink);font-weight:600}
.total-row{padding-top:15px!important;color:var(--sat-olive)!important;font-size:16px!important;font-weight:700!important}
.total-row span:last-child{color:var(--sat-olive)!important;font-size:20px!important}
.coupon-box{margin-top:18px;padding:14px;border-radius:14px;background:#f8f6f0}
.available-offers h3{margin:0 0 10px;color:var(--sat-olive);font-size:12px}
.offers-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
#couponCode{width:calc(100% - 90px);height:42px;padding:0 12px;border:1px solid #ddd8ca;border-radius:10px 0 0 10px;outline:none;background:#fff}
#applyCouponBtn{width:90px;height:42px;margin-left:-4px;border:0;border-radius:0 10px 10px 0;background:var(--sat-olive);color:#fff;font-weight:700;cursor:pointer}
#removeCoupon{margin-top:8px;border:0;background:transparent;color:#b33;font-size:11px;cursor:pointer}
.secure-box{margin-top:18px;padding:14px;border-radius:14px;background:#f4f5ed;color:var(--sat-olive);font-size:11px;line-height:1.8}
.secure-box p{margin:0}

/* =========================================================
   OTHER CUSTOMER PAGES — SAME HOME VISUAL LANGUAGE
   ========================================================= */
.track-page,.orders-page,.contact-page{background:var(--sat-bg)!important}
.track-page,.orders-page{padding-top:58px!important}
.track-header h1,.orders-page-header h1{font-size:clamp(36px,5vw,52px)!important}
.track-card,.timeline-card,.orders-toolbar-wrap,.contact-box{padding:28px!important}
.track-card h2,.timeline-title,.orders-page-header h2,.contact-box-header h2{font-family:"Playfair Display",serif!important;color:var(--sat-olive)!important;font-weight:500!important}
.track-info-box{background:#f8f6f0!important;border-color:#e6e1d7!important;border-radius:13px!important}
.orders-toolbar-wrap{background:#fff!important}
.orders-search input,.orders-toolbar select,.contact-field input,.contact-field textarea{border-color:#ddd8ca!important;border-radius:12px!important;background:#fff!important}
.contact-box-header span{color:var(--sat-gold)!important}
.contact-field input:focus,.contact-field textarea:focus,.orders-search input:focus{border-color:var(--sat-olive)!important;box-shadow:0 0 0 3px rgba(58,73,33,.08)!important}

/* cart */
.cart-main{background:var(--sat-bg)!important}
.cart-items-section,.cart-summary{background:#fff!important;border-radius:20px!important}
.cart-summary h2,.cart-header h1,.summary-header h2{font-family:"Playfair Display",serif!important;color:var(--sat-olive)!important;font-weight:500!important}
.cart-summary .checkout-btn,.checkout-btn{background:var(--sat-ink)!important;color:#fff!important;border-radius:999px!important}

/* auth pages */
.auth-page{background:var(--sat-bg)!important}
.brand-section{background:var(--sat-ink)!important}
.brand-logo,.brand-line,.small-title{color:var(--sat-gold)!important}
.brand-line{background:var(--sat-gold)!important}
.auth-card{border-color:var(--sat-line)!important;border-radius:22px!important;box-shadow:var(--sat-shadow)!important}
.auth-btn{background:var(--sat-ink)!important;border-radius:999px!important}
.auth-btn:hover{background:var(--sat-olive)!important}
.auth-icon{background:var(--sat-gold-soft)!important;color:var(--sat-olive)!important}

/* =========================================================
   RESPONSIVE CHECKOUT / CUSTOMER
   ========================================================= */
@media(max-width:900px){
  .checkout-container{grid-template-columns:1fr!important}
  .order-summary{position:static}
}
@media(max-width:700px){
  .checkout-banner{width:100%;margin:0;border-radius:0!important;padding:44px 20px 30px}
  .checkout-banner h1{font-size:40px}
  .checkout-banner p{font-size:12px}
  .checkout-progress{width:calc(100% - 24px);margin-bottom:24px;border-radius:18px;overflow-x:auto;justify-content:flex-start!important;padding:10px 12px}
  .progress-step span{font-size:10px}
  .progress-line{min-width:18px}
  .checkout-container{width:calc(100% - 20px)!important;gap:14px!important}
  .checkout-card,.order-summary{padding:18px!important;border-radius:17px!important}
  .checkout-card h2,.order-summary h2{font-size:23px!important}
  .checkout-grid{grid-template-columns:1fr!important;gap:14px!important}
  .form-group input,.form-group select{min-height:47px!important;font-size:16px!important}
  .payment-options{grid-template-columns:1fr!important}
  .payment-card{padding:14px!important}
  .checkout-product{grid-template-columns:54px minmax(0,1fr) auto!important}
  .checkout-product-img{width:54px!important;height:68px!important}
  .checkout-product-info h4{font-size:12px!important}
  .checkout-product-price{font-size:12px!important}
  #couponCode{width:calc(100% - 82px)}
  #applyCouponBtn{width:82px}
  .track-page,.orders-page{padding:44px 12px 60px!important}
  .track-card,.timeline-card,.orders-toolbar-wrap,.contact-box{padding:18px!important}
  .orders-toolbar{flex-direction:column!important;align-items:stretch!important}
  .orders-toolbar select{width:100%!important}
  .orders-search{width:100%!important}
  .contact-grid{grid-template-columns:1fr!important}
  .footer-inner{grid-template-columns:1fr!important}
}
@media(max-width:380px){
  .checkout-banner h1{font-size:34px}
  .progress-step span{display:none}
  .checkout-product{grid-template-columns:48px minmax(0,1fr) auto!important}
  .checkout-product-img{width:48px!important;height:60px!important}
}