*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f6f8;color:#172033;font-family:"Vazirmatn",Tahoma,Arial,sans-serif}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.storefront{width:min(100%,520px);margin:0 auto;padding:10px 10px 0}.product-section{margin:0 0 18px}.product-shell{position:relative;overflow:hidden;border-radius:30px;padding:24px 18px 22px;isolation:isolate;box-shadow:0 22px 55px rgba(27,36,57,.12)}.sunny .product-shell{background:radial-gradient(circle at 15% 6%,rgba(255,255,255,.58),transparent 24%),radial-gradient(circle at 92% 42%,rgba(255,255,255,.26),transparent 24%),linear-gradient(155deg,#ffe98d 0%,#ffc84d 42%,#ff982f 100%)}.ocean .product-shell{background:radial-gradient(circle at 20% 8%,rgba(255,255,255,.2),transparent 22%),radial-gradient(circle at 86% 44%,rgba(102,211,255,.23),transparent 25%),linear-gradient(155deg,#3b287e 0%,#6546d7 43%,#1d8eea 100%);color:#fff}.decor{position:absolute;border-radius:50%;z-index:-1;filter:blur(1px)}.decor-1{width:180px;height:180px;left:-75px;top:-70px;background:rgba(255,255,255,.18)}.decor-2{width:120px;height:120px;right:-30px;bottom:80px;background:rgba(255,255,255,.12)}.product-head{text-align:center;position:relative}.head-badges{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}.brand-chip,.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:900}.brand-chip{background:#fff;color:#172033;letter-spacing:1.2px}.badge{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.42);color:inherit}.sunny .badge{color:#8b4b00;background:rgba(255,255,255,.48)}.product-head h2{margin:14px 0 6px;font-size:30px;line-height:1.25;letter-spacing:-.7px}.product-head p{margin:0 auto 16px;font-size:13px;line-height:1.9;opacity:.84;max-width:360px}.gallery{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin-top:4px}.main-image{width:min(100%,340px);aspect-ratio:1/1;border-radius:26px;overflow:hidden;background:rgba(255,255,255,.78);box-shadow:0 18px 40px rgba(20,27,42,.14);border:1px solid rgba(255,255,255,.58)}.ocean .main-image{background:rgba(255,255,255,.92)}.main-image img{width:100%;height:100%;display:block;object-fit:cover}.thumbs{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}.thumb{width:58px;padding:0;border:2px solid rgba(255,255,255,.48);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.82);aspect-ratio:1;cursor:pointer;transition:.2s transform,.2s border-color}.thumb:hover{transform:translateY(-1px)}.thumb.active{border-color:#fff;box-shadow:0 0 0 2px rgba(17,24,39,.16)}.thumb img{width:100%;height:100%;display:block;object-fit:cover}.product-info{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:15px}.feature-list{list-style:none;padding:0;margin:0;width:100%;display:grid;gap:8px}.feature-list li{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;line-height:1.7}.sunny .feature-list li{color:#684008}.ocean .feature-list li{color:#fff}.feature-list .icon{width:18px;height:18px}.price-box{margin:18px 0 14px;text-align:center}.price-box del{display:block;font-size:12px;opacity:.65;margin-bottom:2px}.price-box strong{display:block;font-size:27px;line-height:1.3}.order-btn,.submit-btn{border:0;border-radius:16px;padding:15px 18px;font-family:inherit;font-weight:900;font-size:15px;cursor:pointer;color:#fff;width:min(100%,360px);display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 12px 28px rgba(18,24,38,.17)}.sunny .order-btn{background:linear-gradient(135deg,#ff7a00,#ef4f00)}.ocean .order-btn{background:linear-gradient(135deg,#7d4cff,#252ed8)}.order-btn .icon,.submit-btn .icon{width:21px;height:21px}.site-footer{margin:28px 0 0;padding:48px 14px 54px;text-align:center;border-top:1px solid #e3e7ed}.footer-logo{display:flex;align-items:center;justify-content:center;gap:12px;color:#172033}.footer-logo>svg{width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.footer-logo>div{display:flex;flex-direction:column;align-items:flex-start}.footer-logo strong{font-size:23px;line-height:1.15}.footer-logo span{font-size:10px;letter-spacing:2px;color:#8b94a3;font-weight:800}.social-links{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px}.social{width:min(100%,360px);display:flex;align-items:center;justify-content:center;gap:11px;text-decoration:none;color:#172033;background:#fff;border:1px solid #e5e8ee;border-radius:17px;padding:12px 16px;box-shadow:0 9px 24px rgba(35,44,68,.05);direction:ltr}.social .icon{width:25px;height:25px}.social span{display:flex;flex-direction:column;align-items:flex-start;font-weight:800}.social small{font-size:10px;color:#8b94a4;font-weight:500}.instagram{color:#bc2a8d}.whatsapp{color:#128c7e}.modal{position:fixed;inset:0;z-index:100;display:none}.modal.open{display:block}.modal-backdrop{position:absolute;inset:0;background:rgba(8,12,22,.58);backdrop-filter:blur(5px)}.modal-sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,520px);max-height:94vh;overflow:auto;background:#fff;border-radius:28px 28px 0 0;padding:22px 16px calc(24px + env(safe-area-inset-bottom))}.close{position:absolute;left:16px;top:14px;width:38px;height:38px;border:0;border-radius:50%;font-size:24px;cursor:pointer;background:#f1f3f6}.modal-product{display:flex;align-items:center;gap:12px;padding-left:42px}.modal-product img{width:74px;height:74px;object-fit:cover;border-radius:17px;background:#f4f5f7}.modal-product small{color:#81899a}.modal-product h3{margin:2px 0 5px;font-size:18px}.modal-product strong{font-size:15px}.pay-card{margin:17px 0;padding:15px 16px;border-radius:18px;background:#f6f7fa;display:flex;align-items:center;justify-content:center;gap:9px 12px;flex-wrap:wrap;text-align:center}.pay-card span,.pay-card small{font-size:11px;color:#747d8f}.pay-card b{font-size:18px;direction:ltr;letter-spacing:1px}.pay-card em{width:100%;font-style:normal;font-size:12px;font-weight:900;color:#b4323d;background:#fff0f1;border-radius:10px;padding:8px;display:flex;align-items:center;justify-content:center;gap:6px}.pay-card em .icon{width:17px;height:17px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}label{display:block;font-size:12px;font-weight:700;color:#4e586b;margin:10px 0}input,textarea{width:100%;border:1px solid #e1e5ec;border-radius:13px;padding:13px 14px;margin-top:7px;font-family:inherit;font-size:14px;outline:none;background:#fff}input:focus,textarea:focus{border-color:#9fa8b8;box-shadow:0 0 0 3px rgba(17,24,39,.05)}.shipping-method{border:0;padding:0;margin:15px 0}.shipping-method legend{font-size:12px;font-weight:800;color:#4e586b;margin-bottom:5px}.shipping-method label{display:flex;align-items:center;gap:9px;border:1px solid #e1e5ec;border-radius:14px;padding:10px 11px;margin:8px 0;cursor:pointer}.shipping-method input{width:18px;height:18px;margin:0;accent-color:#111827}.shipping-method span{display:flex;flex-direction:column;gap:2px}.shipping-method b{font-size:13px}.shipping-method small{font-size:11px;color:#778194;font-weight:500}.upload-box{border:1.5px dashed #cbd2dd;border-radius:15px;padding:13px 14px;cursor:pointer}.upload-box input{display:none}.upload-box span{display:block;color:#7c8595;font-weight:400;margin-top:5px}.total-line{display:flex;justify-content:space-between;align-items:center;background:#111827;color:#fff;padding:14px 16px;border-radius:14px;margin:15px 0}.total-line span{font-size:12px}.total-line strong{font-size:18px}.submit-btn{background:#111827;width:100%}.form-msg{display:none;margin-top:12px;padding:12px;border-radius:12px;font-size:13px}.form-msg.ok{display:block;background:#eaf8ef;color:#176b38}.form-msg.err{display:block;background:#fff0f1;color:#a52e39}
@media(max-width:460px){.storefront{padding:8px 8px 0}.product-shell{border-radius:26px;padding:22px 14px 20px}.product-head h2{font-size:27px}.main-image{width:min(100%,320px);border-radius:23px}.thumb{width:54px}.feature-list li{font-size:12px}.price-box strong{font-size:25px}.grid2{grid-template-columns:1fr}.site-footer{padding-inline:8px}}

/* v1.3 usability refinements */
.optional{font-size:10px;font-weight:500;color:#9199a8}
.sunny .order-btn{background:#172033;color:#fff;box-shadow:0 12px 28px rgba(23,32,51,.24)}
.sunny .order-btn:hover{background:#0f172a}
.ocean .order-btn{background:#fff;color:#34246f;box-shadow:0 12px 28px rgba(14,16,50,.28)}
.ocean .order-btn:hover{background:#f7f5ff}
.order-btn:active,.submit-btn:active{transform:translateY(1px)}

.modal-backdrop{background:rgba(8,12,22,.42);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.modal-sheet{max-height:86vh;padding-top:34px;overscroll-behavior:contain;box-shadow:0 -18px 55px rgba(8,12,22,.18);will-change:transform}
.sheet-handle-zone{position:absolute;top:0;left:50%;transform:translateX(-50%);width:44%;height:34px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab;z-index:4}
.sheet-handle-zone:active{cursor:grabbing}
.sheet-handle{display:block;width:48px;height:5px;border-radius:999px;background:#d6dbe3}
.close{top:18px}

/* iOS Safari zooms focused fields below 16px. Keep form controls at 16px+. */
input,textarea,select{font-size:16px!important}
button{font-family:inherit}

@media(max-width:460px){
  .modal-sheet{max-height:84vh;border-radius:25px 25px 0 0;padding-top:34px}
  .modal-backdrop{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}


/* v1.4 visual + app-like bottom sheet */
.sunny .product-shell{
  background:
    radial-gradient(circle at 15% 6%,rgba(255,255,255,.22),transparent 24%),
    radial-gradient(circle at 92% 42%,rgba(255,255,255,.14),transparent 24%),
    linear-gradient(155deg,#ffb12b 0%,#f47b20 48%,#e95a18 100%);
  color:#fff;
}
.sunny .product-head p,
.sunny .feature-list li,
.sunny .price-box del,
.sunny .price-box strong{color:#fff}
.sunny .product-head p{opacity:.92}
.sunny .badge{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42)}
.sunny .brand-chip{background:#fff;color:#d85d16}
.sunny .thumb.active{box-shadow:0 0 0 2px rgba(255,255,255,.48)}

/* Order buttons: white on both product cards */
.sunny .order-btn,
.ocean .order-btn{
  background:#fff;
  color:#172033;
  box-shadow:0 12px 28px rgba(14,16,30,.20);
  border:1px solid rgba(255,255,255,.75);
}
.sunny .order-btn:hover,
.ocean .order-btn:hover{background:#f8fafc;color:#172033}

/* Footer social buttons always side by side */
.social-links{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;width:100%}
.social{min-width:0!important;padding:11px 10px!important}
.social span{min-width:0;overflow:hidden}
.social span:not(small){white-space:nowrap}
.social small{display:block}

/* Payment card: clean green confirmation/info card */
.pay-card{
  background:#eefaf1;
  border:1px solid #cfead6;
  color:#174b2b;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:16px;
}
.pay-card span{color:#55705f;font-size:11px}
.pay-card b{color:#143d26;font-size:20px;line-height:1.5;direction:ltr;letter-spacing:1.15px}
.pay-card .card-holder{display:block;color:#2e6841;font-size:12px;font-weight:800}

/* Receipt upload uses blue as its interaction color */
.upload-box{
  border:1.5px dashed #2f80ed;
  background:#f1f7ff;
  color:#1559a6;
}
.upload-box span{color:#4b78ac}
.upload-box:focus-within{box-shadow:0 0 0 3px rgba(47,128,237,.12)}

/* App-like bottom sheet: starts partially open, can expand to full screen */
.modal-sheet{
  max-height:84dvh;
  height:auto;
  transition:max-height .24s ease,border-radius .24s ease,transform .24s ease;
}
.modal-sheet.expanded{
  max-height:100dvh;
  height:100dvh;
  border-radius:0;
  padding-top:36px;
}
.modal-sheet.expanded .sheet-handle-zone{position:sticky;top:-36px;background:linear-gradient(#fff 72%,rgba(255,255,255,0));margin:-36px auto 0;left:auto;transform:none;width:44%;height:36px}
.modal-sheet.dragging{transition:none!important}

@media(max-width:460px){
  .social{font-size:11px!important}
  .social .icon{width:19px;height:19px}
  .modal-sheet{max-height:84dvh}
  .modal-sheet.expanded{max-height:100dvh;height:100dvh;border-radius:0}
}

/* v1.4.1 — keep the drag handle fixed only while the sheet is half-open */
.modal-sheet:not(.expanded) .sheet-handle-zone{
  position:sticky;
  top:0;
  left:auto;
  transform:none;
  margin:-34px auto 0;
  width:44%;
  height:34px;
  z-index:8;
  align-items:flex-start;
  padding-top:3px;
  background:linear-gradient(#fff 74%,rgba(255,255,255,.94) 82%,rgba(255,255,255,0));
}
.modal-sheet.expanded .sheet-handle-zone{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  width:44%;
  height:36px;
  background:transparent;
}

/* v1.4.3 — compact half-open drag handle: no tall white strip */
.modal-sheet:not(.expanded){
  padding-top:14px;
}
.modal-sheet:not(.expanded) .sheet-handle-zone{
  position:sticky;
  top:3px;
  left:auto;
  transform:none;
  margin:-11px auto 0;
  width:44%;
  height:8px;
  min-height:8px;
  padding:0;
  z-index:8;
  align-items:flex-start;
  background:transparent;
  overflow:visible;
}
.modal-sheet:not(.expanded) .sheet-handle{
  width:48px;
  height:5px;
  margin:0 auto;
}