*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0px;font-family:Arial,Helvetica,sans-serif;color:#142330;background:#fff;}
a{color:#00bfa5;}
header{max-width:1350px;margin:auto;padding:25px 0px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
#logo{display:block;width:min(300px,100%);height:auto;}
.headerLink{text-decoration:none;font-weight:bold;color:#142330;white-space:nowrap;}
.headerLink:hover{color:#00bfa5;}
section{padding:70px 30px;}
h1,h2,h3,p{margin-top:0px;}
p{line-height:1.65;color:#65717c;}
.eyebrow{display:block;font-size:12px;letter-spacing:2px;font-weight:bold;color:#00ad98;margin-bottom:22px;}
#pitch{max-width:1360px;margin:auto;min-height:650px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px;padding-top:65px;padding-bottom:85px;}
.pitchText{max-width:620px;position:relative;z-index:1;}
#pitch h1{font-size:clamp(43px,5vw,75px);line-height:1.08;letter-spacing:-2.8px;margin-bottom:24px;}
#pitch h1 span{color:#00bea5;}
#pitch .pitchText>p:not(.buttonNote){font-size:18px;max-width:540px;margin-bottom:28px;}
.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;text-decoration:none;background:#00bfa5;color:#fff;font-weight:bold;font-size:18px;padding:20px 28px;border-radius:10px;box-shadow:0px 9px 20px rgba(0,170,148,.17);transition:background .2s,transform .2s;}
.button:hover{background:#009e8b;transform:translateY(-2px);}
.buttonNote{font-size:13px;margin:14px 0px 0px;color:#78848b;}
.productImage{position:relative;align-self:center;}
.productImage img{display:block;width:100%;border-radius:28px;box-shadow:0px 18px 50px rgba(20,35,48,.09);}
.productCaption{position:absolute;right:-5px;bottom:-20px;background:#fff;border-radius:12px;padding:14px 18px;font-size:14px;font-weight:bold;box-shadow:0px 10px 30px rgba(20,35,48,.12);transform:rotate(-4deg);}
.productCaption span{color:#00bfa5;font-size:24px;}
#benefits{max-width:1250px;margin:-15px auto 0px;padding:35px 25px;background:#fff;border:1px solid #edf2f1;box-shadow:0px 16px 50px rgba(20,35,48,.07);border-radius:25px;display:grid;grid-template-columns:repeat(4,1fr);gap:15px;position:relative;z-index:2;}
.benefit{text-align:center;padding:10px 18px;}
.benefit+.benefit{border-left:1px solid #edf0f0;}
.benefitIcon{display:flex;align-items:center;justify-content:center;width:65px;height:65px;margin:0px auto 17px;background:#e0faf5;border-radius:50%;font-size:29px;color:#00bfa5;}
.benefit h2{font-size:18px;margin-bottom:7px;}
.benefit p{font-size:14px;margin-bottom:0px;}
#howItWorks{text-align:center;padding-top:105px;padding-bottom:100px;}
#howItWorks h2,#request h2{font-size:clamp(32px,4vw,48px);letter-spacing:-1.4px;margin-bottom:35px;}
.steps{max-width:1000px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:45px;}
.stepNumber{display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin:0px auto 20px;background:#a6f1e3;border-radius:50%;font-size:26px;font-weight:bold;}
.step h3{font-size:22px;margin-bottom:9px;}
.step p{max-width:240px;margin:auto;}
#request{text-align:center;background:#e9faf6;padding:80px 25px;}
#request h2{margin-bottom:12px;}
#request p{max-width:550px;margin:0px auto 28px;}
footer{text-align:center;padding:24px 15px;color:#7a858b;font-size:14px;background:#f7f9f9;}
footer a{font-weight:bold;}
.orderMain{min-height:calc(100vh - 180px);display:flex;align-items:center;justify-content:center;padding:40px 20px 90px;background:radial-gradient(circle at 50% 25%,#e6faf5,transparent 65%);}
.orderCard{max-width:640px;text-align:center;padding:65px 45px;background:#fff;border:1px solid #e5f0ed;border-radius:24px;box-shadow:0px 18px 60px rgba(20,35,48,.08);}
.orderCard h1{font-size:clamp(32px,4vw,48px);letter-spacing:-1.5px;}
.orderCard p:not(.buttonNote){font-size:17px;margin-bottom:30px;}
@media(max-width:1350px){header{padding-left:35px;padding-right:35px;}}
@media(max-width:850px){header{padding:22px 22px;}#logo{max-width:235px;}#pitch{grid-template-columns:1fr;gap:30px;text-align:center;padding:55px 22px 55px;min-height:0px;}.pitchText{max-width:650px;margin:auto;}#pitch .pitchText>p:not(.buttonNote){margin-left:auto;margin-right:auto;}.productImage{max-width:580px;margin:auto;}.productCaption{right:0px;}#benefits{margin:0px 20px;grid-template-columns:repeat(2,1fr);}.benefit+.benefit{border-left:0px;}.benefit:nth-child(even){border-left:1px solid #edf0f0;}.benefit:nth-child(n+3){border-top:1px solid #edf0f0;padding-top:25px;}.steps{gap:20px;}}
@media(max-width:520px){header{padding:20px 18px;}#logo{max-width:195px;}.headerLink{font-size:13px;}#pitch{padding:45px 20px 50px;}#pitch h1{font-size:clamp(37px,10vw,53px);letter-spacing:-1.8px;}#pitch .pitchText>p:not(.buttonNote){font-size:16px;}.eyebrow{font-size:10px;}.button{width:100%;max-width:370px;font-size:17px;padding:19px 15px;}.productImage{margin-top:10px;}.productCaption{font-size:11px;padding:10px;bottom:-13px;}#benefits{margin:0px 14px;padding:20px 10px;gap:0px;border-radius:20px;}.benefit{padding:18px 8px;}.benefitIcon{width:53px;height:53px;font-size:24px;}.benefit h2{font-size:15px;}.benefit p{font-size:12px;}#howItWorks{padding:80px 20px;}#howItWorks h2{margin-bottom:40px;}.steps{grid-template-columns:1fr;gap:38px;}.step p{max-width:290px;}#request{padding:65px 20px;}.orderCard{padding:45px 23px;}footer{font-size:12px;line-height:1.7;}}

/* Business-specific ordering */
.catalogMain{min-height:calc(100vh - 170px);padding:55px 20px 90px;background:#f1faf8;}
.catalogCard{max-width:900px;margin:auto;padding:45px;background:#fff;border:1px solid #e0efeb;border-radius:24px;box-shadow:0px 16px 50px rgba(20,35,48,.06);}
.catalogCard h1{font-size:clamp(32px,5vw,48px);letter-spacing:-1.5px;margin-bottom:12px;}
.catalogCard>p{margin-bottom:30px;}
#orderMessage{padding:12px 0px;color:#52636b;}
.stickerRow{display:grid;grid-template-columns:100px 1fr auto;gap:24px;align-items:center;padding:20px 0px;border-top:1px solid #e9efed;}
.stickerThumb{width:100px;height:100px;object-fit:contain;border-radius:14px;background:#f5faf8;padding:7px;}
.stickerName{font-size:18px;font-weight:bold;}
.quantityControl{display:flex;align-items:center;border:1px solid #cddbd7;border-radius:10px;overflow:hidden;}
.quantityControl button{width:44px;height:48px;border:0;background:#e8f8f4;color:#142330;font-size:25px;cursor:pointer;}
.quantityControl input{width:66px;height:48px;border:0;text-align:center;font-size:19px;font-weight:bold;color:#142330;appearance:textfield;-moz-appearance:textfield;}
.quantityControl input::-webkit-inner-spin-button,.quantityControl input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.checkoutFooter{border-top:2px solid #e9efed;padding-top:25px;text-align:right;}
.checkoutFooter[hidden]{display:none;}
.checkoutFooter>div{display:flex;justify-content:space-between;margin-bottom:20px;font-size:19px;}
.checkoutFooter .button{border:0;cursor:pointer;}
.checkoutFooter .button:disabled{opacity:.5;cursor:not-allowed;transform:none;}
@media(max-width:600px){.catalogMain{padding:20px 12px 60px;}.catalogCard{padding:28px 18px;border-radius:18px;}.stickerRow{grid-template-columns:75px 1fr;gap:12px;padding:18px 0px;}.stickerThumb{width:75px;height:75px;grid-row:span 2;}.stickerName{font-size:16px;}.quantityControl{justify-self:start;}.quantityControl button{height:42px;width:43px;}.quantityControl input{height:42px;width:62px;}.checkoutFooter{text-align:center;}.checkoutFooter .button{width:100%;}}

.quantityControl input[aria-invalid="true"]{background:#fff0f0;outline:2px solid #c44242;outline-offset:-2px;}
#quantityHint{color:#b33131;font-size:13px;margin:0px 0px 15px;}

@media(max-width:290px){.catalogMain{padding-left:5px;padding-right:5px;}}

/* Private fulfillment dashboard */
.fulfillmentMain{min-height:75vh;background:#f1faf8;padding:45px 18px;}
.fulfillmentCard{max-width:950px;margin:auto;background:white;border-radius:22px;padding:38px;box-shadow:0px 14px 45px rgba(20,35,48,.07);}
.fulfillmentCard h1{font-size:clamp(30px,5vw,46px);}
.fulfillmentTabs{display:flex;gap:10px;margin:25px 0px;}
.fulfillmentTabs button,#loadMoreOrders,.fulfillmentAction{cursor:pointer;border:1px solid #b8dad2;border-radius:9px;padding:12px 18px;background:white;font-weight:bold;color:#142330;}
.fulfillmentTabs button.selected,.fulfillmentAction{background:#00bfa5;color:white;border-color:#00bfa5;}
.fulfillmentOrder{border:1px solid #e0efeb;border-radius:15px;padding:23px;margin:18px 0px;}
.fulfillmentOrderHeading{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fulfillmentOrderHeading h2{margin:0px;font-size:23px;}
.fulfillmentMeta{font-size:13px;margin:10px 0px;}
.fulfillmentOrder li{padding:4px 0px;}
.fulfillmentAddress{background:#f1faf8;border-radius:9px;padding:12px;overflow-wrap:anywhere;}
.fulfillmentAction:disabled{opacity:.6;cursor:wait;}
@media(max-width:520px){.fulfillmentCard{padding:22px 14px;}.fulfillmentOrder{padding:15px;}.fulfillmentTabs button{flex:1;padding:12px 5px;}}

/* Fulfillment dashboard redesign */
.fulfillmentPage{background:#fff;color:#142330;}
.fulfillmentPage .fulfillmentHeader{max-width:1500px;padding:27px 36px;}
.fulfillmentHeaderActions{display:flex;align-items:center;gap:20px;color:#65778a;font-size:13px;}
.fulfillmentMain{max-width:1500px;margin:auto;min-height:calc(100vh - 175px);background:#fff;padding:45px 36px 65px;}
.fulfillmentIntro{display:grid;grid-template-columns:1fr minmax(440px,1fr);gap:32px;align-items:center;margin-bottom:42px;}
.fulfillmentIntro .eyebrow{margin-bottom:12px;font-size:13px;}
.fulfillmentIntro h1{font-size:clamp(35px,4vw,50px);letter-spacing:-1.7px;margin-bottom:8px;}
.fulfillmentIntro p{font-size:16px;margin:0;max-width:640px;}
.fulfillmentStats{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fulfillmentStat{display:flex;align-items:flex-start;gap:17px;border:1px solid #e0e8ed;background:#f8fafb;border-radius:16px;padding:23px 20px;min-width:0;}
.fulfillmentStatAccent{background:#e8faf5;border-color:#c9f1e6;}
.fulfillmentStatIcon{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:50%;background:#e8edf1;color:#142330;font-size:29px;}
.fulfillmentStatAccent .fulfillmentStatIcon{background:#baf5e7;color:#007e71;}
.fulfillmentStat span:not(.fulfillmentStatIcon){display:block;font-size:14px;}
.fulfillmentStat strong{display:block;font-size:36px;line-height:1.25;margin:2px 0;}
.fulfillmentStat small{color:#65778a;font-size:13px;line-height:1.5;}
.fulfillmentToolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px;}
.fulfillmentPage .fulfillmentTabs{margin:0;gap:8px;}
.fulfillmentPage .fulfillmentTabs button{border:1px solid transparent;background:transparent;color:#42566a;padding:15px 20px;border-radius:12px;font-size:15px;white-space:nowrap;}
.fulfillmentPage .fulfillmentTabs button.selected{background:#e1faf3;border-color:#c8f4e8;color:#007d70;}
.fulfillmentFilters{display:flex;align-items:center;gap:12px;}
.fulfillmentSearch input,.fulfillmentFilters select{border:1px solid #d9e2e8;background:white;border-radius:10px;padding:15px;font:inherit;color:#142330;}
.fulfillmentSearch input{width:min(350px,32vw);}
.fulfillmentFilters select{max-width:165px;}
.fulfillmentSecondaryButton,.fulfillmentPrimaryButton{border:1px solid #d9e2e8;background:white;border-radius:11px;padding:13px 20px;font:inherit;font-weight:bold;color:#142330;cursor:pointer;}
.fulfillmentPrimaryButton{background:#aaf1e2;border-color:#aaf1e2;}
.fulfillmentSecondaryButton:hover,.fulfillmentPrimaryButton:hover{border-color:#00bfa5;}
.fulfillmentResults{border:1px solid #e0e8ed;border-radius:16px;min-height:420px;padding:24px;background:white;}
.fulfillmentResults #fulfillmentMessage{margin:0 0 14px;}
.fulfillmentResults #fulfillmentMessage[hidden],.fulfillmentEmpty[hidden],#loadMoreOrders[hidden]{display:none;}
.fulfillmentEmpty{text-align:center;padding:65px 15px 60px;}
.fulfillmentEmptyIcon{margin:0 auto 25px;width:100px;height:100px;display:grid;place-items:center;border-radius:30px;background:#e1faf3;color:#00ad98;font-size:72px;line-height:1;}
.fulfillmentEmpty h2{font-size:28px;letter-spacing:-.7px;margin-bottom:12px;}
.fulfillmentEmpty p{margin:0 auto 28px;max-width:550px;}
.fulfillmentMore{text-align:center;padding-top:12px;}
.fulfillmentPage .fulfillmentOrder{max-width:100%;background:#fff;margin:0 0 15px;border:1px solid #e0e8ed;border-radius:14px;padding:24px;}
.fulfillmentPage .fulfillmentOrderHeading h2{font-size:21px;}
.fulfillmentPage .fulfillmentAction{border:0;background:#00bfa5;color:white;padding:12px 20px;}
.fulfillmentFooter{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:26px max(36px,calc((100vw - 1428px)/2));}
.fulfillmentFooter a{color:#65717c;text-decoration:none;}
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(max-width:1050px){.fulfillmentIntro{grid-template-columns:1fr;}.fulfillmentStats{max-width:700px;}.fulfillmentToolbar{flex-wrap:wrap;}.fulfillmentFilters{flex:1;justify-content:flex-end;}.fulfillmentSearch input{width:min(350px,45vw);}}
@media(max-width:650px){.fulfillmentPage .fulfillmentHeader{padding:20px 17px;align-items:flex-start;}.fulfillmentHeaderActions{flex-direction:column;align-items:flex-end;gap:5px;font-size:11px;}.fulfillmentHeaderActions button{padding:10px 12px;font-size:12px;}.fulfillmentMain{padding:28px 14px 45px;}.fulfillmentIntro{gap:24px;margin-bottom:26px;}.fulfillmentStats{gap:9px;}.fulfillmentStat{padding:15px 10px;gap:8px;}.fulfillmentStatIcon{width:33px;height:33px;font-size:21px;}.fulfillmentStat span:not(.fulfillmentStatIcon){font-size:12px;}.fulfillmentStat strong{font-size:28px;}.fulfillmentStat small{font-size:11px;}.fulfillmentToolbar{display:block;}.fulfillmentPage .fulfillmentTabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px;}.fulfillmentPage .fulfillmentTabs button{font-size:13px;padding:12px 7px;}.fulfillmentFilters{display:grid;grid-template-columns:1fr auto;gap:8px;}.fulfillmentSearch input{width:100%;min-width:0;font-size:13px;padding:12px;}.fulfillmentFilters select{max-width:125px;font-size:12px;padding:12px 6px;}.fulfillmentResults{padding:12px;min-height:350px;}.fulfillmentEmpty{padding:45px 8px;}.fulfillmentEmpty h2{font-size:23px;}.fulfillmentPage .fulfillmentOrder{padding:16px;}.fulfillmentFooter{padding:22px 18px;}}

/* Fulfillment imagery: self-hosted SVGs and real sticker thumbnails */
.fulfillmentStatIcon img{width:29px;height:29px;display:block}.fulfillmentStatAccent .fulfillmentStatIcon img{filter:none}
.fulfillmentTabIcon,.fulfillmentButtonIcon{display:inline-block;vertical-align:middle;width:19px;height:19px;margin-right:7px}
.fulfillmentEmptyIcon{width:116px;height:116px;border-radius:30px;background:#e1faf3}
.fulfillmentEmptyIcon img{width:88px;height:88px;display:block}
.fulfillmentItemList{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px}
.fulfillmentItem{display:flex;align-items:center;gap:15px;border:1px solid #e5eef0;border-radius:12px;padding:10px 14px;background:#fbfefd}
.fulfillmentThumb{width:86px;height:86px;flex:none;border-radius:10px;background:#edf8f5;display:grid;place-items:center;overflow:hidden}
.fulfillmentThumb img{display:block;width:100%;height:100%;object-fit:contain;padding:5px;box-sizing:border-box}
.fulfillmentThumbMissing{font-size:11px;color:#74838c;text-align:center}
.fulfillmentItemName{font-weight:600;flex:1;min-width:0;overflow-wrap:anywhere}
.fulfillmentItemQuantity{white-space:nowrap;font-size:18px}
@media(max-width:650px){.fulfillmentThumb{width:66px;height:66px}.fulfillmentItem{padding:8px;gap:10px}.fulfillmentItemQuantity{font-size:15px}.fulfillmentEmptyIcon img{width:76px;height:76px}}

/* Fulfillment refinements */
.fulfillmentHeaderActions{flex-wrap:nowrap;white-space:nowrap;gap:16px;}
.fulfillmentHeaderActions #lastUpdated{white-space:nowrap;flex-shrink:0;}
.fulfillmentHeaderActions #refreshOrders{white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.fulfillmentEmptyIcon{width:min(320px,85%);height:auto;display:block;background:transparent;border-radius:0;margin:0 auto 20px;}
.fulfillmentEmptyIcon img{display:block;width:100%;height:auto;object-fit:contain;}
.fulfillmentPage footer{display:block;text-align:center;padding:24px 15px;color:#7a858b;font-size:14px;background:#f7f9f9;}
@media(max-width:650px){.fulfillmentHeaderActions{flex-direction:row;align-items:center;gap:8px;}.fulfillmentHeaderActions #refreshOrders{padding:9px 10px;}.fulfillmentHeaderActions #lastUpdated{font-size:11px;}.fulfillmentEmptyIcon{width:min(260px,90%);}.fulfillmentPage footer{font-size:12px;line-height:1.7;}}
@media(max-width:400px){.fulfillmentPage .fulfillmentHeader{gap:8px;}.fulfillmentHeaderActions{gap:6px;}.fulfillmentHeaderActions #refreshOrders{font-size:11px;padding:8px;}.fulfillmentHeaderActions #lastUpdated{font-size:10px;}}

/* Stack fulfillment header controls on narrow screens. */
@media(max-width:450px){.fulfillmentHeaderActions{flex-direction:column;align-items:flex-end;gap:8px;}.fulfillmentHeaderActions #lastUpdated{font-size:11px;white-space:nowrap;}.fulfillmentHeaderActions #refreshOrders{font-size:12px;}}

/* In-store sticker payments */
.customerPayMain .catalogCard{max-width:820px}
.payInstruction{background:#dffaf1;border:1px solid #a3e9d7;border-radius:13px;padding:18px 20px;margin:20px 0;color:#075e54;font-weight:800;font-size:clamp(19px,3vw,26px);line-height:1.3;text-align:center}
.customerPayMain .checkoutFooter .button{width:100%;max-width:none}
.payReceipt{text-align:center}
.receiptVerified{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:40px;background:#dffaf1;color:#007c68;font-weight:900;letter-spacing:.08em;margin-bottom:20px}
.receiptVerified svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.payReceipt h1{font-size:clamp(30px,6vw,48px)}
.receiptItems{margin-top:30px;border-top:1px solid #e3eeea;text-align:left}
.receiptItem{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:18px 4px;border-bottom:1px solid #e3eeea}
.receiptItem span:first-child{overflow-wrap:anywhere}
.receiptTotal{display:flex;justify-content:space-between;align-items:center;padding:25px 4px;font-size:22px}
.receiptMeta{font-size:12px;overflow-wrap:anywhere}
[hidden]{display:none!important}
@media(max-width:450px){.payInstruction{padding:16px 12px}.receiptItem{gap:8px;font-size:14px}.receiptTotal{font-size:19px}}

/* Customer payment page has no site header. */
.customerPayMain{min-height:calc(100vh - 70px)}

/* Clear, friendly notice after returning from cancelled Stripe checkout. */
.customerPayMain #payMessage.payCancelledNotice{display:flex;align-items:center;gap:14px;padding:16px 18px;margin:0 0 22px;border:1px solid #f1d5a5;border-left:4px solid #d89124;border-radius:12px;background:#fff9ee;color:#654717;box-shadow:0 5px 18px rgba(96,68,21,.05)}
.payCancelledIcon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#fce7c2;color:#865410;font-size:21px;font-weight:800}
.payCancelledCopy{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.45}
.payCancelledCopy strong{font-size:16px;color:#583c12}
@media(max-width:450px){.customerPayMain #payMessage.payCancelledNotice{align-items:flex-start;padding:14px;gap:11px}}

/* First-visit business PIN enrollment */
.pinSetup{max-width:500px;margin:24px auto;padding:30px;border:1px solid #c7e9df;border-radius:18px;background:#f3fffb;text-align:center;box-shadow:0 8px 30px rgba(0,70,55,.06)}
.pinSetupIcon{font-size:35px;margin-bottom:8px}.pinSetup h2{font-size:26px;margin:0 0 10px}.pinSetup p{color:#516b66;line-height:1.5}
.pinSetup form{display:grid;gap:10px;text-align:left;margin:24px auto 0;max-width:340px}.pinSetup label{font-weight:700;font-size:14px}
.pinSetup input{width:100%;box-sizing:border-box;border:1px solid #b4cec6;border-radius:10px;padding:13px 14px;font-size:18px;letter-spacing:5px;background:#fff}
.pinSetup input:focus{outline:2px solid #00bfa5;outline-offset:2px}.pinSetup form .button{margin-top:10px;width:100%}
.pinSetup #pinSetupMessage{margin:0;color:#a33323;font-size:14px;min-height:0}.pinSetup #pinSetupMessage:empty{display:none}
.pinSetup .pinSetupWarning{font-size:12px;margin:20px 0 0;color:#876431}
@media(max-width:450px){.pinSetup{padding:22px 16px}.pinSetup h2{font-size:22px}}

/* Blocking first-visit PIN modal */
body.pinModalOpen{overflow:hidden}
.pinSetup{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;max-width:none;margin:0;padding:20px;box-sizing:border-box;border:0;border-radius:0;background:rgba(0,0,0,.5);box-shadow:none;overflow-y:auto}
.pinSetupPanel{width:100%;max-width:500px;box-sizing:border-box;padding:30px;border-radius:18px;background:#f3fffb;text-align:center;box-shadow:0 18px 65px rgba(0,0,0,.22)}
.pinSetup #pinSetupButton{border:0!important;cursor:pointer}
.pinSetup #pinSetupButton:disabled{cursor:wait}
@media(max-width:450px){.pinSetup{padding:16px}.pinSetupPanel{padding:22px 16px}}

/* Business collections */
.businessBalance{margin:24px 0;padding:22px;border-radius:16px;background:#effcf7;border:1px solid #bcebdc}
.businessBalanceTop{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}
.businessBalance h2{font-size:21px;margin:5px 0}.businessBalanceTop strong{font-size:clamp(28px,5vw,38px);color:#087a64}
.balanceDetails{font-size:13px;color:#526c66;line-height:1.7}.balanceActions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.balanceActions .button{border:0;cursor:pointer}.balanceActions .button:disabled{cursor:not-allowed;opacity:.55}
#balanceMessage{font-size:13px;color:#087a64}.cancelCollect{border:0;background:none;cursor:pointer;color:#516b66;padding:12px}
#collectModal .pinSetupPanel{max-width:450px}#collectModal form .button{border:0;cursor:pointer}
.collectionDashboard{background:#fff;border:1px solid #e2ece8;border-radius:18px;padding:22px;margin:0 0 24px}
.collectionDashboardHead{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
.collectionDashboardHead h2{margin:4px 0;font-size:24px}.collectionRow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid #e3ece9}
.collectionRow strong{min-width:120px}.collectionRow span{font-size:20px;font-weight:800;color:#087a64}.collectionRow small{color:#6e807a;flex:1}
.collectionRow button{cursor:pointer}.collectionMailed{opacity:.7}
@media(max-width:500px){.businessBalance{padding:17px}.collectionDashboard{padding:16px}}

/* Keep collection and PIN dialogs fully hidden until opened. */
.pinSetup[hidden], .businessBalance[hidden] { display: none !important; }

/* Restock balance in site header, with detail modal */
.restockHeader{display:flex;align-items:center;justify-content:space-between;gap:14px}
.headerBalance{appearance:none;display:flex;align-items:center;gap:11px;padding:10px 15px;border:1px solid #c9e8df;border-radius:13px;background:#f0fbf7;color:#142330;cursor:pointer;text-align:left;transition:background .15s,box-shadow .15s}
.headerBalance:hover{background:#e2f8f0;box-shadow:0 3px 12px rgba(0,90,65,.1)}
.headerBalance:focus-visible{outline:3px solid #00bfa5;outline-offset:3px}
.headerBalanceLabel{font-size:12px;font-weight:650;color:#54766e}
.headerBalanceValue{font-size:21px;font-weight:800;color:#087a64;white-space:nowrap}
.headerBalanceChevron{font-size:27px;line-height:1;color:#087a64}
.headerBalance[hidden]{display:none!important}
.balanceModalPanel{position:relative;max-width:520px;text-align:left;background:#fff}
.balanceModalClose{position:absolute;right:14px;top:10px;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#40534e;font-size:30px;line-height:1;cursor:pointer}
.balanceModalClose:hover{background:#eaf5f0}
.balanceModalPanel .businessBalance{margin:20px 0 0;border:0;background:#effcf7}
.balanceModalPanel .balanceActions{margin-top:16px}
@media(max-width:520px){.headerBalance{padding:8px 10px;gap:6px}.headerBalanceLabel{display:none}.headerBalanceValue{font-size:17px}.headerBalanceChevron{font-size:23px}.balanceModalPanel{padding:22px 16px}}

/* Match the homepage header height despite the taller balance control.
   Logo aspect ratio: 2078 x 257; homepage uses 300/235/195px logo widths. */
.restockHeader{padding-top:0;padding-bottom:0;min-height:calc(300px * 257 / 2078 + 50px)}
@media(max-width:850px){.restockHeader{min-height:calc(235px * 257 / 2078 + 44px)}}
@media(max-width:520px){.restockHeader{min-height:calc(195px * 257 / 2078 + 40px)}}

/* Unified restock checkout summary */
.catalogCard .checkoutFooter{margin-top:22px;padding:24px;border:1px solid #dfeee9;border-radius:18px;background:#fff;text-align:left;box-shadow:0 8px 30px rgba(20,35,48,.035)}
.catalogCard .checkoutFooter>div{margin-bottom:0}
.restockSummaryHeading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:22px;border-bottom:1px solid #e6efec}
.restockSummaryEyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:1.6px;color:#00a990;margin-bottom:7px}
.restockSummaryTitle h2{font-size:22px;letter-spacing:-.6px;margin:0;color:#142330}
.restockSummaryTotal{text-align:right;display:flex;flex-direction:column;gap:4px}
.restockSummaryTotal #totalQuantity{font-size:13px;color:#6c7c83}
.restockSummaryTotal #totalPrice{font-size:24px;color:#142330;white-space:nowrap}
.catalogCard .checkoutFooter .accountCreditSection{display:block;margin:0;padding:23px 0;border-bottom:1px solid #e6efec}
.catalogCard .checkoutFooter .accountCreditSection[hidden]{display:none}
.creditIntro{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.creditWalletIcon{width:43px;height:43px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#e0f8f1;color:#008c75;font-size:23px;font-weight:800;flex-shrink:0}
.creditIntro label{display:block;font-size:16px;font-weight:750;color:#142330;margin-bottom:4px}
.creditIntro p{margin:0;font-size:13px;color:#617b75;line-height:1.35}
.catalogCard .creditControls{display:flex;align-items:stretch;gap:10px;justify-content:initial}
.creditInputWrap{display:flex;align-items:center;flex:1;min-width:0;border:1px solid #cbded7;border-radius:10px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.creditInputWrap:focus-within{border-color:#00ae95;box-shadow:0 0 0 3px rgba(0,191,165,.12)}
.creditInputWrap>span{padding-left:16px;color:#526b64;font-size:17px;font-weight:700}
.creditInputWrap input{width:100%;min-width:0;border:0!important;outline:none!important;background:transparent;padding:14px 13px 14px 5px;font:700 17px Arial,Helvetica,sans-serif;color:#142330;box-shadow:none!important}
.creditInputWrap input::-webkit-inner-spin-button,.creditInputWrap input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.creditInputWrap input:disabled{color:#869792;background:#f8fbfa}
.catalogCard #useAllCredit{appearance:none;border:1px solid #bcded3;border-radius:10px;background:#ecfaf5;color:#087a64;font-weight:750;font-size:14px;padding:0 18px;cursor:pointer;white-space:nowrap}
.catalogCard #useAllCredit:hover:not(:disabled){background:#d9f5eb}
.catalogCard #useAllCredit:disabled{opacity:.5;cursor:not-allowed}
.creditInputWrap:has(input[aria-invalid="true"]){border-color:#c44242}
.restockDueRow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0!important}
.restockDueRow>div{display:flex;flex-direction:column;gap:5px}
.restockDueRow>div strong{font-size:17px;color:#142330}
.restockDueRow small{font-size:12px;color:#74858a}
.restockDueRow #creditDue{font-size:29px;font-weight:800;color:#142330;white-space:nowrap}
.catalogCard .checkoutFooter #checkoutButton{display:flex;width:100%;max-width:none;margin:0;border-radius:11px;min-height:54px;font-size:17px}
.catalogCard .checkoutFooter .buttonNote{text-align:center;margin:12px 0 0;font-size:12px}
@media(max-width:600px){.catalogCard .checkoutFooter{padding:18px 15px;border-radius:15px}.restockSummaryTitle h2{font-size:19px}.restockSummaryTotal #totalPrice{font-size:21px}.creditIntro label{font-size:15px}.catalogCard #useAllCredit{padding:0 12px;font-size:13px}.restockDueRow #creditDue{font-size:25px}}
@media(max-width:360px){.catalogCard .creditControls{flex-wrap:wrap}.catalogCard #useAllCredit{min-height:44px;width:100%}}

/* Fixed account-credit application: full eligible amount or none. */
.creditIntro .creditHeading{display:block;font-size:16px;font-weight:750;color:#142330;margin-bottom:4px}
.catalogCard .creditControls{align-items:center}
.creditAppliedAmount{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #cbded7;border-radius:10px;background:#f7fcfa;padding:13px 16px}
.creditAppliedAmount span{font-size:13px;color:#617b75}
.creditAppliedAmount strong{font-size:19px;color:#087a64;white-space:nowrap}
.catalogCard #toggleCredit{appearance:none;border:1px solid #bcded3;border-radius:10px;background:#ecfaf5;color:#087a64;font-weight:750;font-size:14px;padding:14px 18px;cursor:pointer;white-space:nowrap}
.catalogCard #toggleCredit:hover:not(:disabled){background:#d9f5eb}
.catalogCard #toggleCredit:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:450px){.catalogCard .creditControls{flex-wrap:wrap}.creditAppliedAmount{width:100%}.catalogCard #toggleCredit{width:100%;min-height:44px}}

/* Simplified restock summary: no nested card, compact single-row account credit. */
.catalogCard .checkoutFooter{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;margin-top:24px}
.restockSummaryHeading{padding-bottom:18px}
.catalogCard .checkoutFooter .accountCreditSection{padding:18px 0;margin:0;border-bottom:1px solid #e6efec;background:transparent;border-left:0;border-right:0;border-top:0;border-radius:0;box-shadow:none}
.creditSingleRow{display:flex;align-items:center;gap:16px;width:100%}
.creditSingleText{display:flex;align-items:center;gap:12px;flex:1;min-width:0;flex-wrap:wrap}
.creditSingleText strong{font-size:15px;color:#142330}
.creditSingleText #creditAvailable{font-size:13px;color:#617b75;margin:0}
.creditSingleAmount{font-size:18px;color:#087a64;white-space:nowrap}
.catalogCard .creditSingleRow #toggleCredit{padding:9px 13px;font-size:13px;border-radius:8px}
.restockDueRow{padding:18px 0!important}
@media(max-width:600px){.catalogCard .checkoutFooter{padding:0;border-radius:0}.creditSingleRow{gap:9px}.creditSingleText{gap:3px;flex-direction:column;align-items:flex-start}.creditSingleText strong{font-size:14px}.creditSingleText #creditAvailable{font-size:12px}.creditSingleAmount{font-size:16px}.catalogCard .creditSingleRow #toggleCredit{width:auto;min-height:38px;padding:8px 10px}}

/* Final compact checkout hierarchy */
.restockSummaryTitle h2{font-size:15px;font-weight:700;letter-spacing:normal}
.restockDueRow>div strong{font-size:22px;font-weight:800;letter-spacing:-.4px}
.creditSingleRow{justify-content:space-between}
.creditSingleText{flex:1}
.creditSingleAmount{margin-left:auto;text-align:right}
.creditToggleLine{display:flex;justify-content:flex-end;margin-top:8px}
.catalogCard .creditToggleLine #toggleCredit{padding:6px 12px;font-size:12px;border-radius:8px}
@media(max-width:600px){.restockSummaryTitle h2{font-size:14px}.restockDueRow>div strong{font-size:20px}.creditSingleRow{gap:10px}.creditSingleAmount{text-align:right}}

/* Refined summary typography and left-aligned account-balance action */
.restockSummaryTotal #totalPrice{font-size:18px}
.creditToggleLine{justify-content:flex-start}
@media(max-width:600px){.restockSummaryTotal #totalPrice{font-size:16px}}

/* Respect dynamically hidden order summary sections. */
.checkoutFooter[hidden], .restockSummaryHeading[hidden], .accountCreditSection[hidden]{display:none!important}

/* Keep checkout button visible at zero while hiding all summary amounts. */
.restockDueRow[hidden]{display:none!important}

/* Shipment tracking */
.recentShipments{margin:0 0 24px;padding:20px 24px;border:1px solid #dcece7;border-radius:12px;background:#f5fbf9}
.recentShipments h2{margin:0 0 12px;font-size:18px}
.recentShipmentRow{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 0;border-top:1px solid #dcece7;flex-wrap:wrap}
.recentShipmentRow div{display:flex;flex-direction:column;gap:3px}
.recentShipmentRow small{font-size:12px;color:#637a75}
.recentShipmentNumber{font-weight:600;overflow-wrap:anywhere}
.fulfillmentTracking{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.fulfillmentTracking input,.fulfillmentTracking select{padding:11px;border:1px solid #ccd9d6;border-radius:8px;font:inherit;max-width:100%}
.fulfillmentTracking input{flex:1;min-width:180px}
/* Recent restock orders: pending immediately after payment, tracking after fulfillment. */
.recentShipmentRow{display:flex;align-items:center;justify-content:space-between;gap:14px}
.recentShipmentDetails{display:flex;flex-direction:column;gap:4px}
.recentShipmentRight{text-align:right;overflow-wrap:anywhere;font-size:13px}
@media(max-width:600px){.recentShipmentRow{align-items:flex-start}.recentShipmentRight{max-width:55%}}

/* Itemized contents for recent shipments */
.recentShipmentDetails{min-width:0;flex:1}
.recentShipmentItems{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.recentShipmentItems li{font-size:13px;line-height:1.4;color:#354c47;overflow-wrap:anywhere}

/* Free first sticker kit request */
.firstKitForm{display:grid;gap:16px;text-align:left;margin-top:24px}
.firstKitForm label{display:grid;gap:7px;font-size:14px;font-weight:700;color:#233c3a}
.firstKitForm label span{font-weight:400;color:#78848b}
.firstKitForm input{width:100%;min-width:0;padding:13px 14px;border:1px solid #cbdcd7;border-radius:9px;font:inherit;font-size:16px;color:#142330;background:#fff}
.firstKitForm input:focus{outline:2px solid #00bfa5;outline-offset:1px}
.firstKitFormRow{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.firstKitForm .button{width:100%;border:0;cursor:pointer;margin-top:6px}
.firstKitForm .button:disabled{opacity:.65;cursor:default}
#firstKitMessage{font-size:14px!important;margin:0!important;min-height:18px;color:#087a64}
.firstKitHoneypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:520px){.firstKitFormRow{grid-template-columns:1fr 1fr}.firstKitForm{gap:13px}}

.firstKitForm select{width:100%;min-width:0;padding:13px 14px;border:1px solid #cbdcd7;border-radius:9px;font:inherit;font-size:16px;color:#142330;background:#fff}
.firstKitForm select:focus{outline:2px solid #00bfa5;outline-offset:1px}

/* Give the state dropdown arrow comfortable space from the right edge. */
.firstKitForm select[name="state"]{appearance:none;-webkit-appearance:none;padding-right:52px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23142330' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 20px center;background-size:18px 18px;}

/* Address line 2 appears only after a street address has been entered. */
.firstKitForm #address2Label[hidden]{display:none}
.firstKitForm #address2Label{color:#777}
.firstKitForm #address2Label.hasContent{color:#233c3a}

/* Optional tracking email is revealed after the shipping address is complete. */
.firstKitForm #trackingEmailLabel[hidden]{display:none}
.firstKitForm #trackingEmailLabel span{font-size:12px;color:#777}

.firstKitDeny{margin-left:12px;background:transparent!important;color:#a33!important;border:1px solid #c99!important}

/* Match the optional address line label behavior for the tracking email label. */
.firstKitForm #trackingEmailLabel{color:#777}
.firstKitForm #trackingEmailLabel.hasContent{color:#233c3a}