/* =====================================================================
   SEMA BAY — Products page top bar, cart and checkout (with cart.js)
   Plain first version for the owner to review. Colours: navy, orange, green, red.
   Text never below 13px; buttons and tap targets at least 44px.
   ===================================================================== */
.pt-vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.pt-locked{overflow:hidden}

/* ---- top bar ---- */
.pt-bar{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,#0d2a78,#0a2163);color:#fff;box-shadow:0 2px 12px rgba(6,20,60,.25);font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif}
.pt-in{max-width:1500px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.pt-logo{flex:none;display:block;line-height:0;border-radius:8px}
.pt-logo img{display:block;height:46px;width:auto}
.pt-search{flex:1 1 auto;min-width:0;max-width:720px;margin:0 auto;display:flex;align-items:center;height:46px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px transparent}
.pt-search:focus-within{box-shadow:inset 0 0 0 2px #ff8a00,0 0 0 3px rgba(255,138,0,.25)}
.pt-search input{flex:1 1 auto;min-width:0;height:100%;padding:0 6px 0 20px;border:0;background:transparent;font-weight:500;font-size:16px;line-height:1;font-family:inherit;color:#0b1033;outline:0}
.pt-search input::placeholder{color:#6b7389}
.pt-search input::-webkit-search-cancel-button{cursor:pointer}
.pt-search button{flex:none;display:grid;place-items:center;width:44px;height:38px;margin-right:4px;border:0;border-radius:999px;background:#ff8a00;color:#fff;cursor:pointer}
.pt-search button:hover{background:#f07c00}
.pt-search svg{width:20px;height:20px}
.pt-acc,.pt-cart{flex:none;position:relative;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:#fff;font-weight:600;font-size:15px;line-height:1;font-family:inherit;text-decoration:none;cursor:pointer;white-space:nowrap}
.pt-acc:hover,.pt-cart:hover{background:rgba(255,255,255,.12)}
.pt-acc span{max-width:160px;overflow:hidden;text-overflow:ellipsis}
.pt-acc svg{width:22px;height:22px}
.pt-cart svg{width:28px;height:24px}
.pt-count{position:absolute;top:3px;left:30px;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:#e8202d;color:#fff;font-weight:700;font-size:12px;line-height:21px;font-family:inherit;text-align:center;box-shadow:0 0 0 2px #0b2468}
.pt-bar a:focus-visible,.pt-bar button:focus-visible{outline:3px solid #ff8a00;outline-offset:2px}
@media (max-width:820px){
  .pt-in{flex-wrap:wrap;gap:8px 6px;padding:8px 12px 10px}
  .pt-logo img{height:38px}
  .pt-search{order:3;flex:1 1 100%;max-width:none;height:44px}
  .pt-acc{margin-left:auto}
}
@media (max-width:520px){
  .pt-acc span,.pt-cart-t{display:none}
  .pt-acc,.pt-cart{width:46px;padding:0;justify-content:center}
  .pt-count{left:auto;right:0}
}

/* ---- drawer ---- */
.pt-drawer{position:fixed;inset:0;z-index:60;background:rgba(5,15,40,0);transition:background .2s ease;font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;color:#0b1033}
.pt-drawer.is-open{background:rgba(5,15,40,.45)}
.pt-panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);display:flex;flex-direction:column;background:#f5f7fb;box-shadow:-10px 0 30px rgba(5,15,40,.2);transform:translateX(100%);transition:transform .2s ease}
.pt-drawer.is-open .pt-panel{transform:none}
@media (prefers-reduced-motion:reduce){.pt-drawer,.pt-panel{transition:none}}
.pt-dh{flex:none;display:flex;align-items:center;gap:6px;min-height:60px;padding:8px 8px 8px 18px;background:#fff;border-bottom:1px solid #e3e7ef}
.pt-dh h2{flex:1 1 auto;margin:0;font-size:18px;font-weight:700;line-height:1.25;color:#0b1f5c}
.pt-ib{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:#0b1f5c;cursor:pointer}
.pt-ib:hover{background:#eef1f7}
.pt-ib svg{width:22px;height:22px}
.pt-db{flex:1 1 auto;overflow:auto;padding:14px 14px 20px;overscroll-behavior:contain}
.pt-df{flex:none;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e3e7ef;display:grid;gap:8px}
.pt-drawer button:focus-visible,.pt-drawer a:focus-visible,.pt-drawer input:focus-visible,.pt-drawer textarea:focus-visible{outline:3px solid #ff8a00;outline-offset:2px}

.pt-note{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#e8f0ff;color:#123a8c;font-size:14px;font-weight:600;line-height:1.45}
.pt-note.pay{background:#fff4e2;color:#7a4300}
.pt-shop{margin:0 0 12px;padding:4px 12px 12px;border-radius:14px;background:#fff;box-shadow:0 2px 10px rgba(10,30,70,.06)}
.pt-shop.is-off{opacity:.9}
.pt-sh{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eef1f6}
.pt-sh-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#eef2fb;color:#13205e}
.pt-sh-ic svg{width:20px;height:20px}
.pt-sh div{flex:1 1 auto;min-width:0;display:grid}
.pt-sh b{font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-sh small{font-size:13px;font-weight:500;color:#5d6578}
.pt-sub{flex:none;font-size:16px;font-weight:700;color:#03892e}
.pt-line{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"th ln lt" "th qty qty";gap:6px 10px;align-items:center;padding:10px 0;border-bottom:1px solid #f0f2f6}
.pt-line:last-of-type{border-bottom:0}
.pt-th{grid-area:th;align-self:start;width:52px;height:64px;border-radius:8px;overflow:hidden;background:#f1f3f8;display:grid;place-items:center}
.pt-th img{width:100%;height:100%;object-fit:cover}
.pt-noimg{color:#9aa1b1}.pt-noimg svg{width:22px;height:22px}
.pt-ln{grid-area:ln;min-width:0;display:grid;gap:2px}
.pt-ln b{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-ln small{font-size:13px;font-weight:500;color:#5d6578}
.pt-lt{grid-area:lt;font-size:15px;font-weight:700;color:#0b1033}
.pt-qty{grid-area:qty;justify-self:start;display:inline-flex;align-items:center;border:1px solid #d8dde8;border-radius:999px;background:#fff}
.pt-qty button{width:44px;height:40px;border:0;background:transparent;color:#0b1f5c;font-weight:700;font-size:20px;line-height:1;font-family:inherit;cursor:pointer;border-radius:999px}
.pt-qty button:hover:not([disabled]){background:#eef1f7}
.pt-qty button[disabled]{color:#b9bfcc;cursor:not-allowed}
.pt-qty output{min-width:30px;text-align:center;font-size:16px;font-weight:700}
.pt-line.is-sold .pt-ln b{color:#5d6578}
.pt-line.is-sold .pt-ln small{color:#c2410c;font-weight:600}
.pt-off{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fdecec;color:#9b1c1c;font-size:14px;font-weight:600;line-height:1.45}
.pt-link{border:0;background:none;padding:0 2px;color:#0050fc;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;min-height:32px}
.pt-pay{margin-top:10px}
.pt-pay p{margin:0 0 8px;font-size:14px;font-weight:600;color:#33394a}
.pt-pay-opts{display:flex;flex-wrap:wrap;gap:8px}
.pt-pay-opts button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1.5px solid #d8dde8;border-radius:999px;background:#fff;color:#0b1033;font-weight:600;font-size:14px;line-height:1.2;font-family:inherit;cursor:pointer}
.pt-pay-opts button[aria-checked="true"]{border-color:#0b2a6b;background:#0b2a6b;color:#fff}
.pt-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px;font-weight:600}
.pt-total b{font-size:20px;font-weight:700;color:#03892e}
.pt-cur,.pt-fee{margin:0;font-size:13px;color:#5d6578}
.pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;border:0;border-radius:12px;background:#e8202d;color:#fff;font-weight:700;font-size:16px;line-height:1.2;font-family:inherit;text-decoration:none;cursor:pointer}
.pt-btn:hover{background:#d0141f}
.pt-btn[disabled]{background:#c9ced8;cursor:not-allowed}
.pt-btn.ghost{background:#fff;color:#0b1f5c;border:1.5px solid #cfd5e2}
.pt-btn.ghost:hover{background:#f2f4f9}
.pt-btn svg{width:20px;height:20px}
.pt-empty{padding:40px 16px;text-align:center;color:#33394a;font-size:16px;line-height:1.5}
.pt-empty p{margin:4px 0}
.pt-empty-ic{display:inline-grid;place-items:center;width:72px;height:72px;margin-bottom:10px;border-radius:50%;background:#e8eefb;color:#0b2a6b}
.pt-empty-ic svg{width:36px;height:32px}

/* ---- checkout form ---- */
.pt-form{display:grid;gap:12px}
.pt-hi{margin:0;font-size:15px;line-height:1.5;color:#33394a}
.pt-f{display:grid;gap:6px}
.pt-f>span{font-size:14px;font-weight:700;color:#0b1f5c}
.pt-f small{font-weight:500;color:#5d6578}
.pt-f input,.pt-f textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid #cfd5e2;border-radius:12px;background:#fff;color:#0b1033;font-weight:500;font-size:16px;line-height:1.4;font-family:inherit;resize:vertical;box-sizing:border-box}
.pt-f input:focus,.pt-f textarea:focus{border-color:#0b2a6b;outline:0;box-shadow:0 0 0 3px rgba(11,42,107,.15)}
.pt-f.bad input,.pt-f.bad textarea{border-color:#d0141f;box-shadow:0 0 0 3px rgba(208,20,31,.12)}
.pt-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:600;cursor:pointer}
.pt-check input{width:22px;height:22px;accent-color:#0b2a6b}
.pt-err{margin:0;min-height:0;color:#b4121b;font-size:14px;font-weight:700}
.pt-err:empty{display:none}
.pt-acct{display:grid;gap:4px;padding:12px;border-radius:12px;background:#eef3ff;font-size:14px;line-height:1.45;color:#22305a}
.pt-acct a{color:#0050fc;font-weight:700}
.pt-acct small{font-size:13px;color:#5d6578}
.pt-summary,.pt-sent{display:grid;gap:0;border-radius:12px;background:#fff;border:1px solid #e3e7ef}
.pt-summary p,.pt-sent p{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;padding:10px 12px;border-bottom:1px solid #f0f2f6;font-size:14px}
.pt-summary p:last-child,.pt-sent p:last-child{border-bottom:0}
.pt-summary b,.pt-sent p>b{flex:none;color:#03892e}
.pt-sent span{display:grid;gap:2px}
.pt-sent small{font-size:13px;color:#5d6578}

/* ---- order sent ---- */
.pt-done{text-align:center;display:grid;gap:12px;padding:8px 0}
.pt-done-ic{justify-self:center;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#03892e;color:#fff}
.pt-done-ic svg{width:34px;height:34px}
.pt-done h3{margin:0;font-size:22px;font-weight:700;color:#0b1f5c}
.pt-done>p{margin:0;font-size:15px;line-height:1.5;color:#33394a}
.pt-done .pt-sent{text-align:left}
.pt-next{padding:12px;border-radius:12px;background:#e9f8ef;color:#0b5c2a!important;font-weight:600}
/* V30: who you are buying as (a business buys as itself; design phase can test as a guest) */
.pt-as{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#eef3fc;color:#22305a;font-size:13.5px;line-height:1.45}
.pt-aslink{margin-left:4px;padding:0;border:0;background:none;color:#1f5fe0;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}