/* Shared alignment for the storefront, purchase flow, and owner pages. */
:root{--shop-width:760px;--panel-gap:24px;--page-gutter:24px}
main{padding-inline:var(--page-gutter)}
main h1,main h2,main p,dialog h2,dialog p{text-align:center}
main p,dialog p{overflow-wrap:anywhere}
.buy,.back{line-height:1.4;text-align:center}
select{text-align:center;text-align-last:center}
.price,.total,.cart-line-total,.cart-subtotal-row,.metrics strong{font-variant-numeric:tabular-nums}

/* Corner utilities share a vertical center; the landscape stays unobstructed. */
.utility-bar .header-tools{align-items:center}
.utility-bar .sold-counter{width:fit-content;max-width:100%;align-self:center;justify-items:center;text-align:center}
.utility-bar .sold-label{justify-content:center}
.utility-bar .music-controls{text-align:center}
.utility-bar .music-row{justify-content:center}
.utility-bar .music-row output{text-align:center}

/* A consistent center axis and section width, retaining sticker proportions. */
.design-tabs{align-items:stretch;margin-block:20px}
.design-tabs a{min-height:48px;text-align:center}
#shop-view .intro{padding:0 0 18px}
#grid,.referral-panel{width:100%;max-width:var(--shop-width);margin-inline:auto}
#grid .cardbody{align-items:center}
#grid .card h3,#grid .card .details{width:100%;overflow-wrap:anywhere}
#grid .daily-label{text-align:center}
.referral-panel{margin-top:28px;padding:24px}
.referral-panel .shareactions{align-items:stretch}
.referral-panel .shareactions .buy{height:100%}
#share-status:empty{display:none}
.custom-editor{margin:24px auto 0}
.custom-heading{text-align:center}
.editor-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--panel-gap)}
.editor-layout>div,.editor-layout>form{min-width:0}
.variant-picker{width:100%}
.variant-picker select,#custom-form input{width:100%;text-align:center}
#custom-form>label{margin-block:20px}
#design-photo{width:100%;max-width:360px;margin:16px auto}

/* Footer links form one centered group with no automatic spacer. */
footer{flex-direction:column;gap:16px;padding:28px var(--page-gutter);text-align:center}
footer button,footer .instagram-button,footer #owner-inbox{margin:0;flex:none}
footer .shipping-summary,footer .music-credit{flex-basis:auto;width:100%;max-width:680px;margin:0}
footer #owner-inbox{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.social-follow{width:100%;max-width:var(--shop-width);margin:8px auto;text-align:center}
.social-follow h2{margin:0 0 16px;color:#bafff2;font-size:24px}
.social-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.social-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:84px;padding:16px 12px;border:1px solid #af77e7;border-radius:12px;background:linear-gradient(135deg,#37135c,#191133);color:#f9e9ff;text-decoration:none;box-shadow:0 0 12px #785bff33;transition:background-color .18s,border-color .18s,box-shadow .18s}
footer .social-box strong{font-size:16px;line-height:1.3;letter-spacing:.03em;font-style:normal;text-shadow:none;color:#a8fff0}
footer .social-box span{flex-basis:auto;order:0;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.social-box:hover{border-color:#ff8be6;background:#402061;box-shadow:0 0 16px #ff47da44}
.social-box:focus-visible{outline:3px solid #fff66c;outline-offset:4px}
@media(max-width:600px){.social-links{grid-template-columns:minmax(0,1fr);max-width:360px;margin:auto}.social-box{min-height:76px;padding:12px}}

/* Reserve space for the close control so every dialog title is truly centered. */
dialog,#cart-dialog,#demo-checkout{padding:56px 24px 24px;text-align:center;scrollbar-gutter:stable both-edges}
dialog>.close,.cart-top>.close{position:absolute;inset:8px 8px auto auto;margin:0}
dialog h2{padding:0;overflow-wrap:anywhere}
dialog .eyebrow{padding:0}
#checkout .checkout-art{margin-top:0}
.qty{flex-direction:column;gap:8px}
.qty .stepper{justify-content:center}
.total{align-items:center;gap:16px}
.cart-top{display:block;padding:0;margin-bottom:20px}
.cart-top h2{padding:0;text-align:center}
.cart-item{grid-template-columns:96px minmax(0,1fr) 96px;align-items:center;gap:16px;text-align:center}
.cart-item>img{grid-column:1;width:96px;max-width:100%;align-self:center;justify-self:center}
.cart-item-info{grid-column:2;min-width:0}
.cart-line-total{grid-column:3;justify-self:center}
.cart-item-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;max-width:360px;margin:auto}
.cart-item-controls label{min-width:0;text-align:center}
.cart-item select{width:100%;max-width:none;margin:6px 0 0;text-align:center}
.cart-stepper{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;width:100%}
.cart-stepper button,.cart-stepper input{width:100%;min-width:0}
.cart-subtotal-row{align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.cart-summary,#cart-empty,#cart-status{text-align:center}
#cart-pay,#cart-continue{display:block;max-width:420px;margin-inline:auto}
.demo-fields,.demo-outcome,#demo-order-summary{text-align:center}
.demo-fields input,.demo-fields select,.demo-outcome select{text-align:center}
.demo-fields label:last-child{grid-column:1/-1;justify-self:center;width:100%;max-width:240px}
#demo-checkout h2{padding:0;margin-top:10px}
#demo-order-summary p{margin:12px auto;max-width:460px}

/* Owner pages use the same centered headings, labels, and button rhythm. */
.site-masthead:not(.vapor-header){display:flex;flex-direction:column;align-items:center;gap:16px}
.site-masthead:not(.vapor-header) .brand{display:flex;align-items:center;justify-content:center;gap:.15em;font-size:clamp(20px,7.5vw,96px)}
.site-masthead:not(.vapor-header) .brand .brand-title{font:inherit;white-space:nowrap}
.site-masthead:not(.vapor-header) .brand .ammo-mark{flex:none}
.site-masthead:not(.vapor-header)>a:not(.brand){display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.dash-nav{gap:12px 24px;text-align:center}
.dash-nav a{justify-content:center}
.dashboard>p,.dashboard .dash-note{max-width:760px;margin-inline:auto;line-height:1.6}
.dashboard section>h2{margin:28px 0 18px}
.dash-toolbar{align-items:end;gap:16px}
.dash-toolbar label{display:grid;gap:8px;text-align:center}
.dash-toolbar select{display:block;margin:0;min-height:46px}
.dash-toolbar .buy{min-height:46px}
.metrics{align-items:stretch}
.metrics article{display:flex;flex-direction:column;align-items:center;text-align:center}
.metrics h3{min-height:2.8em}
.metrics strong{margin-top:auto}
#recent article{flex-direction:column;justify-content:center;gap:8px;text-align:center}
#recent a{justify-content:center}
.catalog-forms{align-items:stretch;gap:var(--panel-gap)}
.catalog-form{display:flex;flex-direction:column;text-align:center}
.catalog-form label,.catalog-form input,.catalog-form select{text-align:center}
.catalog-form .buy{margin-top:auto}
.catalog-save-status:empty{display:none}
.order-fulfillment label,.order-fulfillment input{text-align:center}
#checkout-missing{padding:0;list-style-position:inside;line-height:1.8;text-align:center}
.requests{width:100%;max-width:1000px;margin:24px auto}
.request-card{padding:24px;text-align:center}

@media(max-width:760px){
 .editor-layout{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
 :root{--page-gutter:16px;--panel-gap:20px}
 .referral-panel{padding:24px 16px}
 .custom-editor{padding:24px 16px}
 .design-tabs a{padding:12px 8px}
 .cart-item{grid-template-columns:minmax(0,1fr);gap:10px;padding:20px 0}
 .cart-item>img,.cart-item-info,.cart-line-total{grid-column:1}
 .cart-item>img{width:144px}
 .cart-item-info{width:100%}
 .cart-item-controls{max-width:320px}
 .cart-line-total{font-size:20px}
 .cart-remove{padding-bottom:0}
 .catalog-form{padding:20px}
}
@media(max-width:420px){
 dialog,#cart-dialog,#demo-checkout{padding:54px 16px 20px}
 .demo-fields{grid-template-columns:minmax(0,1fr)}
 .demo-fields label:last-child{max-width:none}
 .dash-toolbar{flex-direction:column;align-items:center}
 .dash-toolbar label{display:grid;justify-items:center}
 .dash-toolbar select{max-width:none}
}

/* The purchase flow carries the homepage palette onto a calm, readable surface. */
dialog#checkout,dialog#cart-dialog,dialog#demo-checkout,dialog#design-confirm{
 color-scheme:dark;color:#faf0ff;
 background:radial-gradient(ellipse at 0 0,#582576 0,transparent 65%),linear-gradient(135deg,#29154e,#191230 70%,#202b5b);
 border:1px solid #8bfff0;border-radius:20px;
 box-shadow:0 0 0 4px #a753d522,0 0 30px #5cfff033,0 20px 70px #100720bb;
}
dialog::backdrop{background:#10051bd9;backdrop-filter:blur(7px)}
dialog .checkout-brand{margin:0 0 16px;color:#adfff2;font-size:14px;font-weight:800;letter-spacing:.12em;line-height:1.5;text-align:center}
dialog h2,#demo-receipt h3{color:#ffe4fb;text-shadow:0 0 18px #ff47da55}
dialog .close{color:#bafff2;border:1px solid #9870bd;border-radius:10px;background:#25133e}
dialog .close:hover{color:#fff;background:#503063}
dialog .buy{min-height:48px;color:#250f37;background:#ff83df;border:1px solid #ffbced;box-shadow:0 0 12px #ff47da33;font-size:16px}
dialog .buy:hover:not(:disabled){background:#a5ffed;box-shadow:0 0 16px #5cfff044}
dialog .back{min-height:46px;color:#bafff2;background:#26183e;border:1px solid #9471bb;font-size:16px}
dialog .back:hover{background:#3e285c;box-shadow:0 0 12px #785bff44}
dialog .buy:disabled{opacity:1;color:#bdb0d2;background:#3c2b50;border-color:#675279;box-shadow:none}
dialog .fine,dialog .shipping-note,dialog .cart-shipping,dialog #cart-checkout-note,dialog .demo-totals-note{color:#ddcde9}
dialog #product-status,dialog #cart-status,dialog .cart-warning,dialog #demo-status{color:#ffd5eb}
dialog .demo-label{display:inline-block;margin:0 0 10px;padding:6px 10px;border:1px solid #fd88dc;border-radius:8px;background:#48254e;color:#ffe1f9;font-size:13px;letter-spacing:.04em}
dialog .variant-picker select,dialog .cart-item select,dialog .cart-stepper input,dialog .demo-fields input,dialog .demo-fields select,dialog .demo-outcome select,dialog .custom-quantity input{
 color:#faf3ff;background:#160d28;border:1px solid #aa83c7;font-size:16px;min-height:46px;
}
dialog .cart-stepper,dialog .qty .stepper{border:1px solid #aa83c7;background:#160d28}
dialog .cart-stepper input{border:0}
dialog .qty .stepper input{font-size:16px;color:#fff;background:#160d28;min-height:46px}
dialog .stepper button,dialog .cart-stepper button{min-height:46px;color:#bafff2;background:#3b2456}
dialog .stepper button:hover:not(:disabled),dialog .cart-stepper button:hover:not(:disabled){background:#65417d}
dialog .cart-item,dialog .total{border-color:#81639c}
dialog .cart-unit{color:#ddcde9}
dialog .cart-line-total,dialog .cart-subtotal-row strong,dialog .total strong{color:#a5ffed}
dialog .cart-remove{color:#ffc5ef}
dialog .cart-summary{border-color:#a575d1}
dialog #demo-order-summary{margin-top:24px;padding:16px 12px;border:1px solid #9a75bb;border-radius:12px;background:#150c27}
dialog #demo-order-summary strong{color:#a5ffed;font-size:18px}
dialog .demo-payment{color:#ddcde9;background:#302040;border-color:#a575d1}
dialog #demo-receipt{padding:20px 12px;border:1px solid #83eedb;border-radius:12px;background:#1b233b;overflow-wrap:anywhere}
dialog #demo-receipt strong{color:#a5ffed}
dialog .approve input{accent-color:#ff83df}
dialog input:focus-visible,dialog select:focus-visible,dialog button:focus-visible,dialog a:focus-visible{outline:3px solid #fff66c;outline-offset:3px}
@media(forced-colors:active){dialog#checkout,dialog#cart-dialog,dialog#demo-checkout,dialog#design-confirm{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}dialog h2,dialog p,dialog strong,dialog label{color:CanvasText;text-shadow:none}}
