/* HubPlay Studios - Customer Experience V4
   Shared styling for account, cart, checkout, legal and all responsive storefront views. */
:root {
    --customer-max: 1320px;
    --customer-narrow: 780px;
    --surface-1: #0d0d12;
    --surface-2: #121219;
    --surface-3: #171720;
    --line-soft: #23232d;
    --copy-soft: #a5a5af;
    --copy-faint: #777783;
    --success: #36d47d;
    --danger: #ff6666;
    --warning: #f0bd58;
    --radius-lg: 20px;
    --radius-md: 14px;
    --shadow-soft: 0 24px 70px rgba(0,0,0,.28);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 320px; min-height: 100dvh; }
body.menu-open { overflow: hidden; }
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
input, textarea, select { appearance: none; -webkit-appearance: none; }
:focus-visible { outline: 2px solid #6ba8ff; outline-offset: 3px; }

/* iOS safe areas */
.promo-banner { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.store-header-main, .store-category-nav, .store-trust-strip, .footer-grid, .footer-bottom, .footer-newsletter {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}
.store-footer { padding-bottom: env(safe-area-inset-bottom); }
.mobile-nav { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.floating-support { bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)); }

/* Shared customer pages */
.customer-page { width: min(var(--customer-max), calc(100% - 48px)); margin: 0 auto; padding: 62px 0 104px; min-height: 68vh; }
.customer-page.narrow { width: min(var(--customer-narrow), calc(100% - 48px)); }
.customer-kicker, .eyebrow.customer-kicker { display: inline-flex; align-items: center; gap: 8px; color: #6ba8ff; font-size: .69rem; letter-spacing: .18em; font-weight: 700; text-transform: uppercase; }
.customer-kicker::before { content: ''; width: 18px; height: 1px; background: #6ba8ff; }
.customer-title { margin: 9px 0 10px; font-size: clamp(2rem, 4.7vw, 4rem); line-height: .98; letter-spacing: -.055em; font-weight: 650; }
.customer-lead { max-width: 680px; color: var(--copy-soft); line-height: 1.72; font-size: .96rem; }
.customer-heading { margin-bottom: 36px; }
.customer-heading.center { text-align: center; display: flex; align-items: center; flex-direction: column; }
.customer-heading.center .customer-lead { text-align: center; }

.surface-card { background: linear-gradient(145deg, rgba(20,20,28,.94), rgba(10,10,14,.96)); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.panel-card { background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.customer-alert { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; margin-bottom: 20px; font-size: .86rem; line-height: 1.55; }
.customer-alert.success { color: #7ae7aa; background: rgba(54,212,125,.08); border: 1px solid rgba(54,212,125,.25); }
.customer-alert.error { color: #ff9393; background: rgba(255,102,102,.08); border: 1px solid rgba(255,102,102,.23); }
.customer-alert.info { color: #a9caff; background: rgba(107,168,255,.08); border: 1px solid rgba(107,168,255,.22); }

.customer-field { display: grid; gap: 8px; }
.customer-field label { color: #b9b9c1; font-size: .76rem; font-weight: 600; }
.customer-input, .customer-field input, .customer-field textarea, .customer-field select {
    width: 100%; min-height: 49px; padding: 13px 14px; border-radius: 11px; border: 1px solid #292934; background: #09090d; color: #f3f3f6; outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.customer-field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.customer-input:focus, .customer-field input:focus, .customer-field textarea:focus, .customer-field select:focus { border-color: #4b7fc9; box-shadow: 0 0 0 3px rgba(15,82,186,.15); background: #0c0c11; }
.customer-field small { color: var(--copy-faint); line-height: 1.45; }
.customer-form { display: grid; gap: 18px; }
.customer-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.customer-check { display: flex; align-items: center; gap: 10px; cursor: pointer; color: #aaaab4; font-size: .8rem; }
.customer-check input { width: 18px; height: 18px; border: 1px solid #353540; border-radius: 5px; background: #09090d; position: relative; flex: 0 0 auto; }
.customer-check input:checked { background: #f2f2f4; border-color: #f2f2f4; }
.customer-check input:checked::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #08080b; font-size: .7rem; font-weight: 800; }

.customer-btn { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 11px; border: 1px solid transparent; text-decoration: none; cursor: pointer; font-weight: 700; font-size: .78rem; letter-spacing: .02em; transition: transform .18s, background .18s, border-color .18s; }
.customer-btn:hover { transform: translateY(-1px); }
.customer-btn.primary { background: #f3f3f5; color: #09090c; }
.customer-btn.primary:hover { background: #fff; }
.customer-btn.secondary { background: #111117; color: #ececf0; border-color: #292934; }
.customer-btn.secondary:hover { border-color: #464654; }
.customer-btn.danger { color: #ff8e8e; background: rgba(255,102,102,.06); border-color: rgba(255,102,102,.22); }
.customer-btn.full { width: 100%; }
.customer-link { color: #c7d9f6; text-decoration: none; border-bottom: 1px solid rgba(199,217,246,.25); }
.customer-link:hover { color: #fff; border-color: #fff; }

/* Auth */
.auth-page { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 58px 0 96px; min-height: 72vh; display: grid; grid-template-columns: minmax(0, .92fr) minmax(380px, 1fr); gap: 32px; align-items: stretch; }
.auth-story { padding: clamp(32px, 5vw, 64px); border-radius: 24px; border: 1px solid var(--line-soft); position: relative; overflow: hidden; background: radial-gradient(circle at 15% 10%, rgba(15,82,186,.22), transparent 34%), linear-gradient(145deg,#101018,#09090d); display: flex; flex-direction: column; justify-content: space-between; min-height: 600px; }
.auth-story::after { content: ''; position: absolute; right: -34px; bottom: -32px; width: clamp(190px,28vw,320px); aspect-ratio: 1; background: linear-gradient(145deg,rgba(60,139,255,.13),rgba(15,82,186,.02)); clip-path: polygon(20% 8%,92% 50%,20% 92%); filter: drop-shadow(0 0 24px rgba(15,82,186,.14)); opacity:.52; pointer-events:none; }
.auth-story h1 { font-size: clamp(2.6rem,5vw,5rem); line-height: .92; letter-spacing: -.06em; max-width: 620px; margin: 15px 0 20px; position: relative; z-index: 1; }
.auth-story p { max-width: 500px; color: #a8a8b3; line-height: 1.75; position: relative; z-index: 1; }
.auth-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; z-index: 1; }
.auth-benefit { padding: 16px; border-radius: 13px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.065); }
.auth-benefit strong { display: block; font-size: .83rem; margin-bottom: 5px; }
.auth-benefit span { color: #858590; font-size: .72rem; line-height: 1.45; }
.auth-card { padding: clamp(28px,4vw,48px); display: flex; flex-direction: column; justify-content: center; }
.auth-card-head { margin-bottom: 27px; }
.auth-card-head h2 { font-size: clamp(1.7rem,3vw,2.4rem); letter-spacing: -.04em; margin: 8px 0 8px; }
.auth-card-head p { color: var(--copy-soft); font-size: .86rem; line-height: 1.6; }
.auth-switch { margin-top: 22px; padding-top: 20px; border-top: 1px solid #23232d; color: #898994; font-size: .8rem; text-align: center; }
.auth-form-tools { display: flex; justify-content: space-between; align-items: center; gap: 14px; }

/* Cart */
.cart-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(320px,.7fr); gap: 28px; align-items: start; }
.cart-list { display: grid; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 104px minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 14px; background: #0e0e13; border: 1px solid #23232d; border-radius: 15px; }
.cart-item-media { width: 104px; height: 116px; object-fit: cover; border-radius: 10px; background: #15151b; }
.cart-item-copy h3 { font-size: 1rem; font-weight: 600; line-height: 1.35; margin-bottom: 7px; }
.cart-item-meta { display: flex; gap: 8px; flex-wrap: wrap; color: #85858f; font-size: .72rem; }
.cart-item-meta span { padding: 5px 8px; border-radius: 7px; background: #15151b; border: 1px solid #24242d; }
.cart-item-price { text-align: right; min-width: 104px; }
.cart-item-price strong { display: block; font-size: 1.02rem; margin-bottom: 12px; }
.cart-remove { border: 0; background: transparent; color: #ff8585; font-size: .72rem; cursor: pointer; padding: 6px 0; }
.order-summary { position: sticky; top: 132px; padding: 24px; }
.order-summary h2 { font-size: 1.12rem; margin-bottom: 18px; }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; color: #a1a1ac; font-size: .82rem; padding: 7px 0; }
.summary-row strong { color: #eeeeF2; }
.summary-row.discount { color: #67dd9a; }
.summary-total { margin-top: 12px; padding-top: 17px; border-top: 1px solid #292934; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.summary-total span { font-size: .9rem; }
.summary-total strong { font-size: 1.45rem; letter-spacing: -.03em; }
.coupon-box { margin: 20px 0; padding: 14px; background: #09090d; border: 1px solid #202029; border-radius: 12px; }
.coupon-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.coupon-row input { min-width: 0; }
.cart-note { margin-top: 18px; color: #70707b; line-height: 1.55; font-size: .72rem; }

/* Checkout */
.checkout-layout { display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 28px; align-items: start; }
.checkout-form-card { padding: clamp(22px,4vw,36px); }
.checkout-section-title { display: flex; align-items: center; gap: 11px; margin-bottom: 23px; }
.checkout-step { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #bcd5ff; background: rgba(15,82,186,.16); border: 1px solid rgba(107,168,255,.24); font-size: .73rem; font-weight: 800; }
.checkout-section-title h2 { font-size: 1.15rem; font-weight: 600; }
.checkout-summary { padding: 24px; position: sticky; top: 132px; }
.checkout-summary-items { display: grid; gap: 12px; margin: 17px 0; max-height: 350px; overflow: auto; padding-right: 4px; }
.checkout-summary-item { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; }
.checkout-summary-item img { width: 54px; height: 62px; object-fit: cover; border-radius: 8px; background: #15151b; }
.checkout-summary-item p { font-size: .74rem; line-height: 1.35; }
.checkout-summary-item small { display:block; color:#777783; margin-top:3px; }
.checkout-summary-item strong { font-size: .75rem; white-space: nowrap; }
.payment-note { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 13px; border: 1px solid #282833; background: #0b0b10; border-radius: 11px; color: #8e8e99; font-size: .73rem; line-height: 1.5; margin-top: 16px; }
.payment-note b { color: #e2e2e6; display: block; margin-bottom: 2px; }

/* Success */
.success-card { max-width: 720px; margin: 0 auto; padding: clamp(30px,7vw,68px); text-align: center; position: relative; overflow: hidden; }
.success-mark { width: 72px; height: 72px; margin: 0 auto 23px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; }
.success-mark.ok { color: #74e6a5; background: rgba(54,212,125,.08); border: 1px solid rgba(54,212,125,.3); }
.success-mark.fail { color: #ff8c8c; background: rgba(255,102,102,.08); border: 1px solid rgba(255,102,102,.3); }
.success-card h1 { font-size: clamp(2rem,5vw,3.2rem); letter-spacing: -.05em; margin-bottom: 13px; }
.success-card > p { color: #9b9ba6; line-height: 1.7; }
.success-id { margin: 24px auto; padding: 10px 12px; border-radius: 10px; background:#09090d; border:1px solid #21212a; color:#72727d; font-size:.7rem; word-break:break-all; max-width:520px; }
.success-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* Customer dashboard */
.account-shell { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 28px; align-items: start; }
.account-sidebar { position: sticky; top: 132px; padding: 18px; }
.account-user { display: grid; grid-template-columns: 44px 1fr; gap: 11px; align-items:center; padding: 7px 5px 18px; border-bottom:1px solid #24242d; margin-bottom:10px; }
.account-avatar { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#174d9f,#0f52ba); font-weight:800; }
.account-user strong { display:block; font-size:.83rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-user small { display:block; color:#72727d; font-size:.67rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.account-nav { display:grid; gap:4px; }
.account-nav a { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 11px; color:#9999a4; text-decoration:none; border-radius:9px; font-size:.78rem; }
.account-nav a:hover { background:#15151b; color:#fff; }
.account-nav a.active { background:#f2f2f4; color:#09090c; font-weight:700; }
.account-nav a.danger { color:#ff8585; margin-top:8px; border-top:1px solid #23232c; border-radius:0; padding-top:16px; }
.account-content { min-width:0; }
.account-head { margin-bottom:24px; }
.account-head h1 { font-size:clamp(1.7rem,4vw,2.6rem); letter-spacing:-.04em; margin-bottom:7px; }
.account-head p { color:#83838e; font-size:.82rem; line-height:1.55; }
.order-list { display:grid; gap:12px; }
.order-card { padding:20px; }
.order-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding-bottom:16px; border-bottom:1px solid #23232c; }
.order-card-top h3 { font-size:.98rem; margin-bottom:5px; }
.order-card-top p { color:#757580; font-size:.7rem; }
.status-pill { padding:6px 9px; border-radius:999px; background:rgba(107,168,255,.08); border:1px solid rgba(107,168,255,.22); color:#a8cbff; font-size:.66rem; white-space:nowrap; }
.order-card-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:16px; }
.order-card-bottom strong { font-size:1rem; }
.account-empty { padding:44px 22px; text-align:center; }
.account-empty h3 { font-size:1.1rem; margin-bottom:8px; }
.account-empty p { color:#83838e; font-size:.8rem; margin-bottom:18px; }
.order-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.order-detail-block { padding:16px; background:#0a0a0e; border:1px solid #22222b; border-radius:11px; }
.order-detail-block small { display:block; color:#6f6f79; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; }
.order-detail-block p { color:#d4d4da; font-size:.8rem; line-height:1.55; }
.ticket-list { display:grid; gap:10px; }
.ticket-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:17px; color:inherit; text-decoration:none; }
.ticket-row:hover { border-color:#373743; }
.ticket-row h3 { font-size:.86rem; margin-top:5px; }
.ticket-row small { color:#6c6c77; font-size:.66rem; }
.ticket-chat { padding:20px; }
.ticket-messages { display:flex; flex-direction:column; gap:11px; max-height:460px; overflow-y:auto; overscroll-behavior:contain; padding:4px; }
.ticket-message { max-width:min(82%,560px); padding:12px 14px; border-radius:13px; border:1px solid #282832; }
.ticket-message.user { align-self:flex-end; background:#114795; border-color:#1956aa; }
.ticket-message.admin { align-self:flex-start; background:#0a0a0f; }
.ticket-message small { display:block; opacity:.65; font-size:.62rem; margin-bottom:5px; }
.ticket-message p { font-size:.79rem; line-height:1.5; }
.ticket-reply { margin-top:16px; padding-top:16px; border-top:1px solid #24242d; display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end; }
.ticket-reply textarea { min-height:54px; max-height:140px; }
.account-form-card { padding:24px; }

/* Legal */
.legal-shell { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start; }
.legal-nav { position:sticky; top:132px; display:grid; gap:5px; padding:12px; }
.legal-nav a { padding:11px 12px; border-radius:9px; color:#8f8f99; text-decoration:none; font-size:.76rem; }
.legal-nav a.active { background:#f0f0f2; color:#09090c; font-weight:700; }
.legal-content { padding:clamp(25px,5vw,50px); }
.legal-content h1 { font-size:clamp(2rem,4.5vw,3.4rem); letter-spacing:-.05em; margin-bottom:12px; }
.legal-content .legal-intro { color:#9a9aa5; line-height:1.7; margin-bottom:32px; }
.legal-content h2 { font-size:1.12rem; margin:28px 0 9px; }
.legal-content p, .legal-content li { color:#9d9da7; font-size:.85rem; line-height:1.8; }
.faq-list { display:grid; gap:9px; }
.faq-item { background:#09090d; border:1px solid #24242d; border-radius:12px; overflow:hidden; }
.faq-item summary { cursor:pointer; padding:17px 18px; list-style:none; font-weight:600; font-size:.84rem; display:flex; justify-content:space-between; gap:16px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; color:#777782; font-size:1rem; }
.faq-item[open] summary::after { content:'−'; }
.faq-item p { padding:0 18px 18px; }

/* Maintenance */
.maintenance-body { min-height:100dvh; display:grid; place-items:center; padding:max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background:radial-gradient(circle at 50% 15%,rgba(15,82,186,.16),transparent 35%),#070709; color:#fff; font-family:Inter,Arial,sans-serif; }
.maintenance-card { width:min(620px,100%); padding:clamp(30px,8vw,64px); text-align:center; border:1px solid #23232d; border-radius:22px; background:rgba(13,13,18,.92); box-shadow:0 28px 80px rgba(0,0,0,.34); }
.maintenance-logo { width:54px;height:54px;margin:0 auto 24px;border-radius:15px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 38% 50%,rgba(15,82,186,.24),transparent 54%),#050a12;border:1px solid rgba(32,116,255,.30);box-shadow:0 10px 28px rgba(15,82,186,.2); }
.maintenance-logo::after { content:''; width:0;height:0; transform:translateX(2px); border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid #1787ff; filter:drop-shadow(0 0 6px rgba(23,135,255,.9)); }
.maintenance-card h1 { font-size:clamp(2rem,8vw,3.7rem);letter-spacing:-.06em;line-height:.95;margin-bottom:17px; }
.maintenance-card p { color:#95959f;line-height:1.7;font-size:.88rem; }

/* Existing storefront mobile hardening */
.product-card, .premium-card, .product-gallery, .product-buy-panel, .hero-product-tile { min-width:0; }
.product-card img, .premium-card img { transform: translateZ(0); }
.store-search input, .mobile-search input, .footer-newsletter-form input { font-size:16px; }

@media (max-width: 1100px) {
    .customer-page { width:min(100% - 36px, var(--customer-max)); }
    .auth-page { width:min(100% - 36px,1160px); grid-template-columns:.9fr 1fr; }
    .auth-story { min-height:560px; }
    .cart-layout, .checkout-layout { grid-template-columns:minmax(0,1fr) 320px; }
}

@media (max-width: 900px) {
    .customer-page, .customer-page.narrow { width:calc(100% - 28px); padding-top:44px; padding-bottom:82px; }
    .auth-page { width:calc(100% - 28px); grid-template-columns:1fr; padding:34px 0 76px; }
    .auth-story { min-height:auto; padding:36px; }
    .auth-story h1 { max-width:720px; }
    .auth-benefits { margin-top:38px; }
    .cart-layout, .checkout-layout { grid-template-columns:1fr; }
    .order-summary, .checkout-summary { position:static; }
    .checkout-summary { order:-1; }
    .account-shell { grid-template-columns:1fr; }
    .account-sidebar { position:static; padding:12px; overflow-x:auto; scrollbar-width:none; }
    .account-sidebar::-webkit-scrollbar { display:none; }
    .account-user { display:none; }
    .account-nav { display:flex; gap:6px; width:max-content; }
    .account-nav a { white-space:nowrap; border:1px solid #23232c; }
    .account-nav a.danger { margin:0; border-radius:9px; padding-top:10px; }
    .legal-shell { grid-template-columns:1fr; }
    .legal-nav { position:static; display:flex; overflow-x:auto; scrollbar-width:none; }
    .legal-nav::-webkit-scrollbar { display:none; }
    .legal-nav a { white-space:nowrap; border:1px solid #24242d; }
}

@media (max-width: 700px) {
    .store-trust-strip { overflow-x:auto; justify-content:flex-start !important; flex-wrap:nowrap !important; gap:20px !important; scrollbar-width:none; }
    .store-trust-strip::-webkit-scrollbar { display:none; }
    .store-trust-strip span { white-space:nowrap; }
    .customer-title { font-size:clamp(2rem,10vw,3rem); }
    .customer-form-row { grid-template-columns:1fr; }
    .auth-story { display:none; }
    .auth-card { padding:25px 20px; border-radius:17px; }
    .auth-page { align-items:start; }
    .auth-form-tools { align-items:flex-start; flex-direction:column; }
    .cart-item { grid-template-columns:82px minmax(0,1fr); gap:13px; }
    .cart-item-media { width:82px; height:94px; }
    .cart-item-price { grid-column:2; display:flex; align-items:center; justify-content:space-between; min-width:0; text-align:left; }
    .cart-item-price strong { margin:0; }
    .coupon-row { grid-template-columns:1fr; }
    .order-detail-grid { grid-template-columns:1fr; }
    .ticket-reply { grid-template-columns:1fr; }
    .ticket-reply .customer-btn { width:100%; }
    .ticket-message { max-width:92%; }
    .legal-content { border-radius:16px; }
    .success-actions { flex-direction:column; }
    .success-actions .customer-btn { width:100%; }
    .footer-newsletter { gap:22px !important; }
}

@media (max-width: 520px) {
    /* Keep iOS from zooming focused form fields */
    .customer-input, .customer-field input, .customer-field textarea, .customer-field select, .coupon-row input, .store-search input, .mobile-search input, .footer-newsletter-form input { font-size:16px !important; }
    .customer-page, .customer-page.narrow { width:calc(100% - 22px); padding-top:34px; padding-bottom:70px; }
    .customer-heading { margin-bottom:26px; }
    .surface-card { border-radius:15px; }
    .customer-btn { min-height:48px; }
    .cart-item { padding:10px; }
    .order-summary, .checkout-summary, .checkout-form-card, .account-form-card, .ticket-chat { padding:18px; }
    .order-card { padding:16px; }
    .order-card-top, .order-card-bottom { align-items:flex-start; }
    .order-card-bottom { flex-direction:column; }
    .order-card-bottom .customer-btn { width:100%; }
    .account-head h1 { font-size:1.75rem; }
    .success-card { padding:32px 19px; }
    .legal-content { padding:24px 18px; }
    .floating-support b { display:none; }
    .floating-support { width:46px !important; height:46px !important; border-radius:50% !important; padding:0 !important; display:grid !important; place-items:center !important; right:max(14px, env(safe-area-inset-right)) !important; }
    .back-to-top { right:max(14px, env(safe-area-inset-right)) !important; bottom:max(74px, calc(env(safe-area-inset-bottom) + 66px)) !important; }
}

@media (max-width: 380px) {
    .customer-page, .customer-page.narrow, .auth-page { width:calc(100% - 16px); }
    .auth-card { padding:22px 15px; }
    .cart-item { grid-template-columns:70px minmax(0,1fr); }
    .cart-item-media { width:70px; height:82px; }
    .order-summary, .checkout-summary, .checkout-form-card { padding:15px; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
    .mobile-nav { overflow-y:auto; }
    .auth-page { padding-top:22px; }
    .customer-page { padding-top:28px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* Extra compact-screen hardening for existing catalog/product controls */
@media (max-width: 520px) {
    .qty-control input, .sort-control select { font-size: 16px !important; }
    .qty-control button, .size-option span, .sort-control select { min-height: 44px; }
}

@media (max-width: 800px) {
    #aboutValues, #aboutStory { grid-template-columns: 1fr !important; }
}

.account-logout-form{margin:8px 0 0;border-top:1px solid #23232c;padding-top:8px}.account-logout-form button{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border:0;background:transparent;color:#ff8585;border-radius:9px;font:inherit;font-size:.78rem;cursor:pointer}.account-logout-form button:hover{background:#15151b}@media(max-width:850px){.account-logout-form{margin:0;padding:0;border:0}.account-logout-form button{white-space:nowrap;border:1px solid #23232c}}


/* UI HOTFIX 2026-09-14: checkout checkboxes, payment note, account logout */
.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #a9a9b3;
    font-size: .79rem;
    line-height: 1.5;
    cursor: pointer;
}
.terms-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: 0 0 18px;
    border: 1px solid #3b3b47;
    border-radius: 5px;
    background: #09090d;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.terms-check input:checked { background: #f1f1f3; border-color: #f1f1f3; }
.terms-check input:checked::after { content: '✓'; color: #08080b; font-size: 11px; font-weight: 900; line-height: 1; }
.terms-check input:focus-visible, .newsletter-consent input:focus-visible { outline: 2px solid #6ba8ff; outline-offset: 3px; }
.payment-note { align-items: center; }
.payment-note-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #bcd7ff;
    background: linear-gradient(145deg, rgba(15,82,186,.28), rgba(15,82,186,.10));
    border: 1px solid rgba(107,168,255,.22);
    font-size: .72rem;
    font-weight: 850;
}
.account-logout-form .account-logout-btn {
    width: 100%;
    min-height: 44px;
    justify-content: space-between;
    padding: 10px 11px;
    border: 0;
    background: transparent;
    color: #ff8585;
    border-radius: 9px;
    box-shadow: none;
}
.account-logout-form .account-logout-btn:hover { background: #15151b; transform: none; }
@media (max-width: 850px) {
    .account-logout-form .account-logout-btn { border: 1px solid #23232c; white-space: nowrap; }
}


/* UI HOTFIX 2 2026-09-14: account password alignment */
.customer-form-row.password-row {
    align-items: start;
}
.customer-form-row.password-row > .customer-field {
    align-self: start;
    align-content: start;
}
.customer-form-row.password-row .customer-field input {
    height: 49px;
    min-height: 49px;
}


/* ===== FINAL MOBILE / iOS AUDIT 2026-09-14 ===== */
/* Safe-area coverage for customer pages and iPhone landscape/PWA. */
.customer-page,
.auth-page {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
}
.utility-page {
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
}
.mobile-nav {
    padding-top: max(18px, env(safe-area-inset-top));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* Prevent horizontal pressure from long dynamic data. */
.checkout-summary-item { grid-template-columns: 54px minmax(0,1fr) auto; }
.checkout-summary-item p,
.order-detail-block p,
.ticket-row > div,
.ticket-message p,
.legal-content p,
.legal-content li,
.customer-alert span:last-child { min-width:0; overflow-wrap:anywhere; word-break:normal; }
.ticket-row > div { flex:1 1 auto; }

/* iOS lightbox: notch-safe controls and proper background scroll lock. */
.product-lightbox {
    padding-top: max(24px, env(safe-area-inset-top));
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    padding-left: max(18px, env(safe-area-inset-left));
    -webkit-backdrop-filter: blur(12px);
}
.lightbox-close {
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
}
body.lightbox-open { position:fixed; width:100%; overflow:hidden; }

/* Fixed purchase controls must stay inside iPhone safe areas. */
@media (max-width: 600px) {
    .mobile-purchase-bar {
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
    }
    .utility-page {
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }
    .order-card-top { flex-direction:column; align-items:flex-start; }
    .order-card-top .status-pill { align-self:flex-start; }
    .ticket-row { align-items:flex-start; }
}

@media (max-width: 430px) {
    .checkout-summary-item { grid-template-columns: 48px minmax(0,1fr); align-items:start; }
    .checkout-summary-item img { width:48px; height:56px; }
    .checkout-summary-item strong { grid-column:2; justify-self:start; margin-top:3px; }
    .ticket-row { flex-direction:column; }
    .ticket-row .status-pill { align-self:flex-start; }
}

/* Safari iOS may zoom any focused control below 16px, especially in landscape. */
@media (hover: none) and (pointer: coarse) {
    .customer-input,
    .customer-field input,
    .customer-field textarea,
    .customer-field select,
    .coupon-row input,
    .store-search input,
    .mobile-search input,
    .footer-newsletter-form input,
    .catalog-filter-form input,
    .catalog-filter-form select,
    .sort-control select,
    .qty-control input { font-size:16px !important; }
}

/* Standalone iOS PWA: keep the promo strip below the status bar / Dynamic Island. */
@media (display-mode: standalone) {
    .promo-banner { padding-top: env(safe-area-inset-top); }
}


/* Final overflow/PWA refinements found during the template-by-template pass. */
.cart-item-copy,
.cart-item-copy h3,
.product-title-link,
.product-title-link h3 { min-width:0; overflow-wrap:anywhere; }
@media (display-mode: standalone) {
    .store-header { top: env(safe-area-inset-top); }
}

/* ===== MAINTENANCE ADMIN ACCESS 2026-09-14 ===== */
.maintenance-admin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    margin-top: 25px;
    padding: 0 18px;
    border: 1px solid #2e3948;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(18,35,58,.96), rgba(10,18,30,.96));
    color: #dceaff;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 760;
    letter-spacing: .01em;
    box-shadow: 0 10px 28px rgba(0,0,0,.20), 0 0 22px rgba(23,135,255,.08);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.maintenance-admin-link:hover { transform: translateY(-1px); border-color: #4e75a7; background: #111e30; }
.maintenance-admin-link:focus-visible { outline: 2px solid #6ba8ff; outline-offset: 3px; }
.maintenance-admin-link span { color: #5aa3ff; font-size: 1rem; line-height: 1; }
@media (max-width: 520px) {
    .maintenance-admin-link { width: 100%; min-height: 48px; margin-top: 22px; }
}