@charset "UTF-8";
:root{--ink:#171717;--muted:#6d6d6d;--line:#dcdcdc;--paper:#fff;--panel:#f7f7f7;--olive:#687047;--olive-dark:#555e38;--error:#9d3428}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{font-size:14px;line-height:1.45;background:linear-gradient(90deg,#fff 0,#fff 61%,var(--panel) 61%,var(--panel) 100%)}
a{color:var(--olive);text-decoration:underline}
a:hover{color:var(--olive-dark)}
button,input{font:inherit}
.checkout-top{height:151px;background:#fff;border-bottom:1px solid #e3e3e3}
.top-inner{max-width:1180px;height:100%;margin:0 auto;padding:30px 42px;display:flex;align-items:flex-start}
.brand{display:block;width:190px;line-height:0}
.brand img{display:block;width:100%;height:auto;max-height:48px;object-fit:contain;object-position:left center}
.checkout-layout{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,760px) 420px;align-items:stretch;min-height:calc(100vh - 151px)}
.checkout-main{min-width:0;padding:36px 58px 34px 42px;background:#fff}
.breadcrumbs{display:flex;align-items:center;gap:10px;margin:0 0 17px;color:#888;font-size:12px;white-space:nowrap}
.breadcrumbs a{color:var(--olive)}
.breadcrumbs strong{color:#222;font-weight:650}
.secure-callout{min-height:42px;border:1px solid #dedede;border-radius:7px;display:flex;align-items:center;gap:11px;padding:9px 13px;margin:0 0 27px;color:#666;font-size:12px;background:#fff}
.lock{width:13px;height:11px;flex:0 0 13px;display:inline-block;position:relative;border:1.4px solid var(--olive);border-radius:2px;margin:4px 0 0}
.lock:before{content:"";position:absolute;width:6px;height:6px;left:2px;top:-7px;border:1.4px solid var(--olive);border-bottom:0;border-radius:6px 6px 0 0}
.contact-section h1,.payment-section h2,.order-summary h2{margin:0;font-size:20px;line-height:1.25;font-weight:650;color:#171717}
.contact-section h1{margin-bottom:16px}
#checkout-form{margin:0}
label{display:block;margin:0 0 7px;font-size:13px;font-weight:600;color:#333}
input[type=email]{display:block;width:100%;height:56px;padding:0 14px;border:1px solid #d2d2d2;border-radius:8px;background:#fff;color:#222;outline:none}
input[type=email]::placeholder{color:#777;opacity:1}
input[type=email]:focus{border-color:#888;box-shadow:0 0 0 2px rgba(104,112,71,.12)}
input.invalid{border-color:var(--error)}
.field-hint{margin:7px 0 0;color:#777;font-size:12px}
.field-error{margin:7px 0 0;color:var(--error);font-size:13px}
.payment-section{border-top:1px solid var(--line);margin-top:31px;padding-top:21px}
.payment-section h2{margin-bottom:4px}
.payment-copy{margin:0 0 12px;color:#6e6e6e;font-size:13px}
.charge-copy{margin:0 0 13px;color:#555;font-size:13px}
.charge-copy strong{color:#222;font-weight:650}
.payment-prompt{min-height:305px;border:1px solid #dedede;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:#666;font-size:14px}
.loading{min-height:305px;margin:0;border:1px solid #dedede;border-radius:8px;padding:25px;display:flex;align-items:center;justify-content:center;color:#666;background:#fff}
.cashier-shell{position:relative;margin:0;min-height:430px;border:1px solid #dedede;border-radius:8px;background:#fff;overflow:hidden}
.photonpay-frame{width:100%;min-height:430px;background:#fff}
.preview-blocker{position:absolute;z-index:8;inset:0;background:transparent;cursor:not-allowed;pointer-events:auto}
.preview-blocker span{display:block;padding:10px 14px;border-bottom:1px solid #e5e5e5;background:#f7f7f7;color:#656565;font-size:11px;font-weight:650;text-align:center}
.photonpay-frame iframe{pointer-events:none!important}
.alert{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #e3c5c0;border-radius:7px;background:#fff8f6;color:#8c3025;padding:13px 14px;margin:12px 0;font-size:13px}
#retry-payment{border:1px solid #aaa;border-radius:5px;background:#fff;color:#333;padding:7px 11px;white-space:nowrap;cursor:pointer}
.preview-note{margin:10px 0 0;text-align:center;color:#777;font-size:11px}
.checkout-footer{border-top:1px solid var(--line);padding-top:16px;margin-top:26px}
.legal-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px}
.legal-links a{color:#1769aa;text-decoration:underline}
.company-line{margin:14px 0 0;color:#777;font-size:11px}
.order-summary{min-width:0;min-height:calc(100vh - 151px);padding:38px 34px;background:var(--panel);border-left:1px solid #e2e2e2}
.order-summary h2{padding:0 0 19px;border-bottom:1px solid #dedede}
.continue-shopping{display:inline-block;margin:10px 0 1px;font-size:12px;color:var(--olive)}
.product-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:13px;align-items:center;padding:17px 0 20px;border-bottom:1px solid #dedede}
.product-thumb{width:72px;height:72px;border-radius:4px;background-color:#eee;background-image:url('/checkout/assets/ethiope-product-thumb.webp');background-size:210% 210%;background-position:70% 82%;border:1px solid #ddd;overflow:hidden}
.product-copy{display:grid;gap:3px;min-width:0}
.product-copy strong{font-size:14px;line-height:1.25;font-weight:650}
.product-copy span{font-size:12px;color:#777;line-height:1.35}
.product-copy b{font-size:12px;font-weight:600;color:#444;margin-top:2px}
.summary-line{display:flex;justify-content:space-between;gap:14px;margin:16px 0;color:#666;font-size:13px}
.summary-line strong{font-weight:600;color:#333;text-align:right}
.summary-line.total{border-top:1px solid #d8d8d8;padding-top:17px;margin-top:20px;color:#171717;font-size:15px}
.summary-line.total strong{font-size:15px;color:#171717}
.summary-note{margin:13px 0 0;color:#707070;font-size:12px;line-height:1.55}
.mobile-summary{display:none}
@media(max-width:820px){
  body{background:#fff}
  .checkout-top{height:82px}
  .top-inner{padding:19px 16px;justify-content:center}
  .brand{width:194px}
  .brand img{max-height:42px;object-position:center}
  .mobile-summary{display:block;background:#f7f7f7;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2}
  .summary-toggle{width:100%;min-height:53px;padding:0 17px;border:0;background:transparent;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;color:#666;cursor:pointer}
  .summary-toggle-label{display:flex;align-items:center;gap:9px;font-size:13px}
  .summary-toggle-price{font-size:14px;font-weight:650;color:#222}
  .chevron{width:8px;height:8px;flex:0 0 8px;border-right:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
  .summary-toggle[aria-expanded="true"] .chevron{transform:rotate(225deg) translateY(-2px)}
  .summary-toggle:focus-visible{outline:2px solid var(--olive);outline-offset:-3px}
  input[type=email]{font-size:16px}
  .mobile-summary-body{padding:0 17px 15px}
  .mobile-summary-body .product-row{grid-template-columns:58px minmax(0,1fr);gap:11px;padding:10px 0 14px}
  .mobile-summary-body .product-thumb{width:58px;height:58px}
  .mobile-summary-body .summary-line{margin:12px 0;font-size:12px}
  .mobile-summary-body .summary-note{font-size:11px}
  .checkout-layout{display:block;min-height:0}
  .checkout-main{max-width:none;padding:22px 17px 26px}
  .breadcrumbs{margin-bottom:15px}
  .secure-callout{margin-bottom:24px}
  .contact-section h1,.payment-section h2{font-size:19px}
  .payment-section{margin-top:27px;padding-top:19px}
  .payment-prompt,.loading{min-height:280px}
  .cashier-shell,.photonpay-frame{min-height:420px}
  .order-summary{display:none}
  .checkout-footer{margin-top:23px}
}
@media(max-width:360px){
  .top-inner{padding-left:12px;padding-right:12px}
  .brand{width:176px}
  .checkout-main{padding-left:13px;padding-right:13px}
  .summary-toggle{padding-left:13px;padding-right:13px}
  .payment-prompt,.loading{min-height:260px}
}