/* ==========================================================================
   HWB app.css — lean Bootstrap-4-compatible shim (grid, display, flex,
   spacing, forms, buttons, modal) so Neto engine templates (cart, checkout,
   customer, product) render correctly without the full 164KB Bootstrap.
   Our own custom pages use the hwb-* classes; this is the compatibility layer.
   ========================================================================== */

/* Grid */
.container { width:100%; max-width:1240px; margin-inline:auto; padding-inline:15px; }
.container-fluid { width:100%; padding-inline:15px; }
.row { display:flex; flex-wrap:wrap; margin-inline:-15px; }
.row > [class*="col"] { padding-inline:15px; min-width:0; }
.no-gutters { margin-inline:0; }
.no-gutters > [class*="col"] { padding-inline:0; }
.col { flex:1 0 0%; max-width:100%; }
.col-auto { flex:0 0 auto; width:auto; }
.col-1{flex:0 0 8.3333%;max-width:8.3333%}.col-2{flex:0 0 16.6667%;max-width:16.6667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.3333%;max-width:33.3333%}.col-5{flex:0 0 41.6667%;max-width:41.6667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.3333%;max-width:58.3333%}.col-8{flex:0 0 66.6667%;max-width:66.6667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.3333%;max-width:83.3333%}.col-11{flex:0 0 91.6667%;max-width:91.6667%}.col-12{flex:0 0 100%;max-width:100%}
@media (min-width:576px){.col-sm-1{flex:0 0 8.3333%;max-width:8.3333%}.col-sm-2{flex:0 0 16.6667%;max-width:16.6667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.3333%;max-width:33.3333%}.col-sm-5{flex:0 0 41.6667%;max-width:41.6667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.3333%;max-width:58.3333%}.col-sm-8{flex:0 0 66.6667%;max-width:66.6667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.3333%;max-width:83.3333%}.col-sm-12{flex:0 0 100%;max-width:100%}}
@media (min-width:768px){.col-md-1{flex:0 0 8.3333%;max-width:8.3333%}.col-md-2{flex:0 0 16.6667%;max-width:16.6667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.3333%;max-width:33.3333%}.col-md-5{flex:0 0 41.6667%;max-width:41.6667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.3333%;max-width:58.3333%}.col-md-8{flex:0 0 66.6667%;max-width:66.6667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.3333%;max-width:83.3333%}.col-md-12{flex:0 0 100%;max-width:100%}}
@media (min-width:992px){.col-lg-1{flex:0 0 8.3333%;max-width:8.3333%}.col-lg-2{flex:0 0 16.6667%;max-width:16.6667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.3333%;max-width:33.3333%}.col-lg-5{flex:0 0 41.6667%;max-width:41.6667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.3333%;max-width:58.3333%}.col-lg-8{flex:0 0 66.6667%;max-width:66.6667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.3333%;max-width:83.3333%}.col-lg-12{flex:0 0 100%;max-width:100%}}

/* Display */
.d-none{display:none!important}.d-block{display:block!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}
@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-block{display:block!important}.d-sm-inline-block{display:inline-block!important}.d-sm-flex{display:flex!important}}
@media (min-width:768px){.d-md-none{display:none!important}.d-md-block{display:block!important}.d-md-inline-block{display:inline-block!important}.d-md-flex{display:flex!important}}
@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-block{display:block!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-flex{display:flex!important}}

/* Flex utilities */
.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}
.justify-content-start{justify-content:flex-start!important}.justify-content-center{justify-content:center!important}.justify-content-end{justify-content:flex-end!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}
.align-items-start{align-items:flex-start!important}.align-items-center{align-items:center!important}.align-items-end{align-items:flex-end!important}
@media (min-width:768px){.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}}

/* Text */
.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-nowrap{white-space:nowrap}.text-uppercase{text-transform:uppercase}.font-weight-bold{font-weight:700}
@media (min-width:576px){.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}}
@media (min-width:768px){.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}

/* Spacing (common subset) */
.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.my-0{margin-block:0!important}
.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}
.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}
.p-0{padding:0!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}
.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.py-3{padding-block:1rem!important}.py-4{padding-block:1.5rem!important}.py-5{padding-block:3rem!important}
.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.ml-1{margin-left:.25rem!important}.mx-auto{margin-inline:auto!important}

/* Forms */
.form-control{display:block;width:100%;padding:.6rem .9rem;font-size:1rem;line-height:1.5;color:var(--hwb-ink);background:#fff;border:1px solid var(--hwb-line);border-radius:10px;transition:border-color var(--hwb-fast),box-shadow var(--hwb-fast)}
.form-control:focus{outline:none;border-color:var(--hwb-orange);box-shadow:0 0 0 3px rgb(var(--hwb-orange-rgb) / 0.15)}
.form-group{margin-bottom:1rem}
label{display:inline-block;margin-bottom:.4rem;font-weight:600;font-size:.9rem}
.input-group{display:flex;align-items:stretch}.input-group>.form-control{flex:1 1 auto;width:1%}
.input-group-append{display:flex}

/* Buttons (engine fallback) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font-weight:600;padding:.6rem 1.2rem;border-radius:var(--hwb-pill);border:2px solid transparent;cursor:pointer;transition:all var(--hwb-fast);text-decoration:none;line-height:1.2}
.btn:hover{text-decoration:none}
.btn-primary,.btn-secondary{background:var(--hwb-orange);color:#fff}.btn-primary:hover,.btn-secondary:hover{background:var(--hwb-orange-ink);color:#fff}
.btn-outline-secondary{background:transparent;color:var(--hwb-ink);border-color:var(--hwb-line)}.btn-outline-secondary:hover{background:var(--hwb-ink);color:#fff}
.btn-default{background:#fff;border-color:var(--hwb-line);color:var(--hwb-ink)}
.btn-block{display:flex;width:100%}.btn-lg{padding:.85rem 1.8rem;font-size:1.1rem}

/* Alerts */
.alert{padding:.9rem 1.1rem;border-radius:12px;margin-bottom:1rem}
.alert-success{background:#e7f4ec;color:#205c39}.alert-danger{background:#fbe8e6;color:#8a2418}.alert-info{background:var(--hwb-orange-50);color:var(--hwb-orange-ink)}

/* Tables */
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:.75rem;border-bottom:1px solid var(--hwb-line);text-align:left}

/* Modal (basic, engine fallback) */
.modal{display:none;position:fixed;inset:0;z-index:600;overflow:auto;background:rgb(var(--hwb-ink-rgb) / 0.5)}
.modal.show{display:block}
.modal-dialog{max-width:540px;margin:6vh auto}.modal-lg{max-width:820px}
.modal-content{background:#fff;border-radius:var(--hwb-r);overflow:hidden}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--hwb-line)}
.modal-body{padding:1.2rem}.modal-footer{padding:1rem 1.2rem;border-top:1px solid var(--hwb-line);text-align:right}
.close{font-size:1.5rem;line-height:1;background:none;border:none;cursor:pointer;color:var(--hwb-muted)}

/* Helpers used by engine */
.badge{display:inline-block;padding:.25em .5em;font-size:.75em;border-radius:var(--hwb-pill)}
.badge-pill{border-radius:var(--hwb-pill)}.badge-secondary{background:var(--hwb-orange);color:#fff}
hr{border:none;border-top:1px solid var(--hwb-line);margin:1.2rem 0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}