/* HVACB — app-style booking experience */ .sc-wrap{--gold:#d4a017;--gold-2:#f2c94c;--gold-soft:#fff6df;--ink:#17130e;--body:#3d372f;--muted:#7c7468;--line:#e8dfcf;--panel:#fffdfa;--card:#fff;--success:#287a50;font-family:inherit;color:var(--ink);max-width:1120px;margin:0 auto;padding:1.1rem 1rem 7rem;box-sizing:border-box}.sc-wrap *,.sc-wrap *:before,.sc-wrap *:after{box-sizing:border-box} .sc-category{margin:0 0 2rem}.sc-category-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 .8rem}.sc-category-title{font-size:1.05rem;font-weight:800;margin:0;color:var(--ink);letter-spacing:-.01em}.sc-grid{display:grid;grid-template-columns:1fr;gap:.85rem}@media(min-width:520px){.sc-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:900px){.sc-grid{grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:1rem}} .sc-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 5px 18px rgba(53,39,16,.07);transition:transform .15s ease,box-shadow .15s ease}.sc-card:hover{transform:translateY(-2px);box-shadow:0 9px 25px rgba(53,39,16,.11)}.sc-card-media{aspect-ratio:3/2;background:#f5eee2;overflow:hidden}.sc-card-media img{display:block;width:100%;height:100%;object-fit:cover}.sc-card-body{display:flex;flex-direction:column;gap:.28rem;flex:1;padding:.85rem .9rem .2rem}.sc-card-name{margin:0;font-size:.98rem;font-weight:800;line-height:1.25}.sc-card-desc{margin:0;color:var(--muted);font-size:.76rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sc-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.2rem}.sc-card-meta-spacer{flex:1}.sc-card-price{font-size:1rem;font-weight:850;color:#8f6f12}.sc-add-btn{appearance:none;width:calc(100% - 1.5rem);margin:.55rem .75rem .8rem;border:0;border-radius:11px;padding:.7rem .8rem;background:var(--ink);color:#fff;font-size:.82rem;font-weight:800;cursor:pointer;transition:transform .12s ease,filter .12s ease}.sc-add-btn:hover:not(:disabled){filter:brightness(1.08)}.sc-add-btn:active:not(:disabled){transform:scale(.985)}.sc-add-btn.is-added{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--ink)}.sc-add-btn:disabled{opacity:.55;cursor:not-allowed} .sc-system-message{margin:24px 0;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);display:flex;flex-direction:column;gap:6px}.sc-system-message span{color:var(--muted)} /* Floating app bar */ .sc-float{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:2147483000!important;padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom,0px));pointer-events:none!important;transform:translate3d(0,0,0)}.sc-float[hidden]{display:none!important}.sc-float-btn{pointer-events:auto!important;display:flex;align-items:center;gap:.7rem;width:100%;max-width:560px;margin:0 auto;padding:.72rem .85rem;border:1.5px solid var(--gold-2);border-radius:16px;background:#18130d;color:#fffdf6;box-shadow:0 10px 30px rgba(0,0,0,.3);cursor:pointer;text-align:left}.sc-float-icon{display:grid;place-items:center;width:2.15rem;height:2.15rem;border-radius:11px;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--ink);font-size:1rem;flex:none}.sc-float-label{display:flex;flex-direction:column;gap:.04rem;flex:1;min-width:0}.sc-float-label strong{font-size:.84rem;line-height:1.1}.sc-float-label small{font-size:.67rem;color:#cfc5b4}.sc-float-total{font-size:.95rem;font-weight:850;color:var(--gold-2);white-space:nowrap}.sc-float-count{display:grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;border-radius:999px;background:var(--gold-2);color:var(--ink);font-size:.7rem;font-weight:850}.sc-float-arrow{font-size:1.1rem;color:var(--gold-2)} /* Bottom-sheet / app panel */ .sc-sheet{position:fixed;inset:0;z-index:2147483001;transform:translate3d(0,0,0)}.sc-sheet[hidden]{display:none!important}.sc-sheet-backdrop{position:absolute;inset:0;background:rgba(16,12,7,.62)}.sc-sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:94dvh;background:#fffdfa;border-radius:22px 22px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -18px 50px rgba(39,25,8,.25);padding-bottom:env(safe-area-inset-bottom,0)}.sc-sheet-grabber{width:42px;height:4px;border-radius:99px;background:#d8cfbf;margin:.55rem auto .1rem;flex:none}.sc-sheet-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;padding:.7rem 1rem .8rem;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff9ec 0%,#fffdfa 100%);flex:none}.sc-sheet-header-text{display:flex;flex-direction:column;gap:.1rem}.sc-sheet-kicker{font-size:.58rem;letter-spacing:.13em;font-weight:900;color:#9a7817}.sc-sheet-title{font-size:1.08rem;font-weight:850;letter-spacing:-.02em;line-height:1.2}.sc-sheet-subtitle{font-size:.7rem;color:var(--muted);font-weight:650}.sc-sheet-close{appearance:none;width:2rem;height:2rem;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer;flex:none}.sc-sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.65rem 0 1rem} /* Order summary */ .sc-summary-card{margin:0 .85rem .7rem;border:1px solid var(--line);border-radius:15px;background:#fff;overflow:hidden;box-shadow:0 2px 10px rgba(80,55,16,.04)}.sc-summary-card-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem .8rem;background:#fff9ed;border-bottom:1px solid var(--line)}.sc-summary-card-top div{display:flex;flex-direction:column;gap:.08rem}.sc-summary-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;font-weight:850;color:#947315}.sc-summary-card-top strong{font-size:.78rem}.sc-summary-total{font-size:1rem;font-weight:900;color:#8f6f12}.sc-cart-items{list-style:none;margin:0;padding:.15rem 0}.sc-cart-empty{padding:.7rem .8rem;color:var(--muted);font-size:.78rem}.sc-cart-item{display:flex;align-items:center;gap:.6rem;padding:.58rem .8rem;border-bottom:1px solid #f0eadd}.sc-cart-item:last-child{border-bottom:0}.sc-cart-item-main{display:flex;flex-direction:column;gap:.08rem;flex:1;min-width:0}.sc-cart-item-name{font-size:.8rem;font-weight:750;line-height:1.25}.sc-cart-item-price{font-size:.7rem;color:#8f6f12;font-weight:800}.sc-qty{display:flex;align-items:center;border:1px solid #d9caa9;border-radius:9px;overflow:hidden;background:#fff;flex:none}.sc-qty button{appearance:none;border:0;background:#fff8e7;color:var(--ink);width:1.65rem;height:1.65rem;font-size:.95rem;font-weight:800;cursor:pointer}.sc-qty span{min-width:1.2rem;text-align:center;font-size:.72rem;font-weight:800}.sc-remove-service{appearance:none;border:1px solid #e2d7c4;background:#fff;color:#6d655b;border-radius:8px;padding:.35rem .5rem;font-size:.66rem;font-weight:700} /* Sections */ .sc-block{margin:.65rem .85rem 0;padding:.78rem;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 2px 9px rgba(80,55,16,.035)}.sc-block--type{border-color:#e1c875;background:linear-gradient(180deg,#fffaf0,#fff)}.sc-section-heading{display:flex;align-items:flex-start;gap:.55rem;margin-bottom:.65rem}.sc-step,.sc-payment-icon{display:grid;place-items:center;flex:none;width:1.7rem;height:1.7rem;border-radius:9px;background:#fff3ca;color:#8f6f12;font-size:.72rem;font-weight:900}.sc-payment-icon{font-size:.76rem;background:#18130d;color:var(--gold-2)}.sc-block-title{margin:0;font-size:.66rem;line-height:1.1;text-transform:uppercase;letter-spacing:.075em;color:#8f6f12;font-weight:900}.sc-section-subtitle{margin:.14rem 0 0;color:var(--muted);font-size:.7rem;line-height:1.25}.sc-choice{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.sc-choice--payment{grid-template-columns:1fr 1fr}.sc-choice-card{position:relative;display:flex;align-items:center;gap:.45rem;padding:.6rem .55rem;border:1.5px solid #e1d6c1;border-radius:12px;background:#fffdf9;cursor:pointer;min-height:58px;transition:.15s ease}.sc-choice-card input{position:absolute;opacity:0;pointer-events:none}.sc-choice-card:has(input:checked){border-color:var(--gold);background:linear-gradient(155deg,#fff6d8,#f6d15b);box-shadow:0 4px 13px rgba(212,160,23,.18)}.sc-choice-ico{font-size:1.05rem;line-height:1;flex:none}.sc-choice-text{display:flex;flex-direction:column;gap:.08rem;min-width:0;flex:1}.sc-choice-title{font-size:.77rem;font-weight:850;line-height:1.15}.sc-choice-desc{font-size:.63rem;color:var(--muted);line-height:1.15}.sc-choice-check{display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;background:#eee7d9;color:transparent;font-size:.62rem;font-weight:900;flex:none}.sc-choice-card:has(input:checked) .sc-choice-check{background:var(--ink);color:var(--gold-2)} .sc-fields-row{display:grid;gap:.5rem}.sc-fields-row--2{grid-template-columns:1fr 1fr}.sc-fields-row--details{grid-template-columns:1fr 1fr}.sc-field{display:block;min-width:0}.sc-field span{display:block;margin:0 0 .25rem;font-size:.64rem;font-weight:800;color:#746b60}.sc-field input,.sc-field select{width:100%;max-width:100%;min-height:2.45rem;border:1.5px solid #e1d7c6;border-radius:10px;background:#fffefa;color:var(--ink);padding:.55rem .62rem;font:inherit;font-size:.8rem;line-height:1.2;appearance:none;-webkit-appearance:none}.sc-field input[type=date]{font-size:.77rem}.sc-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238f6f12' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;padding-right:1.5rem}.sc-field input:focus,.sc-field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,160,23,.15)}.sc-field-hint{margin:.45rem 0 0;font-size:.68rem;color:#b33b2e;min-height:1em}.sc-slot-status{min-height:1.1em} /* Payment */ .sc-required-note{margin:-.15rem 0 .6rem;padding:.45rem .55rem;border-radius:9px;background:#fff6df;color:#795e13;font-size:.67rem;font-weight:750}.sc-payment-summary{margin-top:.65rem;border:1px solid #ead8a7;border-radius:12px;overflow:hidden;background:#fffaf0}.sc-payment-summary-head{display:flex;justify-content:space-between;gap:.5rem;padding:.5rem .6rem;border-bottom:1px solid #efdfb7;font-size:.64rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em;color:#806516}.sc-payment-amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.5rem}.sc-payment-amount{padding:.45rem .25rem;border:1px solid #eee2ca;border-radius:9px;background:#fff;text-align:center}.sc-payment-amount span{display:block;font-size:.56rem;color:var(--muted);font-weight:750;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.12rem}.sc-payment-amount strong{font-size:.79rem;font-weight:900;color:#8f6f12}.sc-payment-amount--now{border-color:#d8bd6b;background:#fff7db}.sc-payment-note{margin:0;padding:0 .6rem .55rem;font-size:.64rem;line-height:1.35;color:var(--muted);text-align:center}.sc-pay-block{border-color:#e2ca76;background:linear-gradient(180deg,#fffaf0,#fff)}.sc-pay-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:.15rem 0 .55rem}.sc-pay-qr{width:172px;height:172px;object-fit:contain;padding:6px;border:1px solid var(--line);border-radius:14px;background:#fff}.sc-pay-download{display:inline-flex!important}.sc-pay-name{text-align:center;margin:0 0 .4rem;font-size:.82rem;font-weight:850}.sc-pay-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}.sc-pay-chip{appearance:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid #d7bd68;border-radius:999px;background:#fff7dc;color:var(--ink);padding:.4rem .62rem;font-size:.65rem;font-weight:800;text-decoration:none;cursor:pointer;line-height:1.15}.sc-pay-chip:active{background:#f3d26a}.sc-pay-upi-id{margin:0;text-align:center;font-size:.68rem;color:var(--muted)}.sc-pay-upi-id span{margin-right:.25rem}.sc-pay-upi-id strong{color:var(--ink)}.sc-pay-choices{display:grid;gap:.42rem}.sc-pay-choice{position:relative;display:flex;align-items:center;gap:.55rem;padding:.6rem .65rem;border:1.5px solid #e1d6c1;border-radius:11px;background:#fffdf9;cursor:pointer}.sc-pay-choice input{accent-color:var(--gold);flex:none}.sc-pay-choice:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}.sc-pay-choice-main{display:flex;flex-direction:column;gap:.08rem;flex:1}.sc-pay-choice-main strong{font-size:.77rem}.sc-pay-choice-main small{font-size:.62rem;color:var(--muted)}.sc-pay-choice-check{display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;background:#eee7d9;color:transparent;font-size:.6rem;font-weight:900}.sc-pay-choice:has(input:checked) .sc-pay-choice-check{background:var(--ink);color:var(--gold-2)}.sc-pay-partial-row{margin:.5rem 0 .05rem;padding:.55rem;border-radius:10px;background:#fff9eb;border:1px dashed #dec67d}.sc-partial-help{margin:.35rem 0 0;font-size:.63rem;color:var(--muted);line-height:1.35} /* Details/footer */ .sc-form-message{margin:.65rem .85rem 0;padding:.55rem .65rem;border-radius:10px;background:#fff0ed;color:#a33b2e;font-size:.68rem;font-weight:700}.sc-form-message:not([hidden]){display:block}.sc-form-message[hidden]{display:none}.sc-sheet-footer{flex:none;padding:.65rem .85rem calc(.7rem + env(safe-area-inset-bottom,0));background:#fffdf8;border-top:1px solid var(--line);box-shadow:0 -7px 18px rgba(50,35,10,.06)}.sc-footer-summary{display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem}.sc-footer-summary span{font-size:.63rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--muted)}.sc-footer-summary strong{font-size:1.05rem;font-weight:900;color:var(--ink)}.sc-whatsapp-btn{appearance:none;width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.65rem;border:0;border-radius:12px;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--ink);font-size:.82rem;font-weight:900;cursor:pointer;box-shadow:0 5px 14px rgba(212,160,23,.28)}.sc-whatsapp-btn:disabled{background:#e8e1d5;color:#8b8378;box-shadow:none;cursor:not-allowed}.sc-wa-icon{font-size:1rem;font-weight:900}.sc-footer-hint{margin:.32rem 0 0;text-align:center;font-size:.63rem;color:var(--muted);min-height:1em} body.sc-sheet-open{overflow:hidden} @media(max-width:420px){.sc-choice-card{padding:.55rem .45rem}.sc-choice-title{font-size:.73rem}.sc-choice-desc{font-size:.59rem}.sc-payment-amount strong{font-size:.72rem}.sc-fields-row--details{grid-template-columns:1fr}.sc-pay-qr{width:160px;height:160px}} @media(min-width:900px){.sc-wrap{padding-bottom:2rem}.sc-float{left:auto!important;right:1.5rem!important;bottom:1.5rem!important;width:350px!important;padding:0!important}.sc-float-btn{max-width:none}.sc-sheet-panel{left:auto;right:1.5rem;bottom:6rem;width:430px;max-height:min(88vh,760px);border-radius:20px}.sc-sheet-backdrop{background:transparent;pointer-events:none}.sc-sheet-body{max-height:calc(min(88vh,760px) - 150px)}} /* Catalogue presentation layer */ .sc-catalog-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:0 0 1.15rem;padding:1.15rem 1.15rem 1.05rem;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,#fffaf0,#fff);box-shadow:0 6px 22px rgba(53,39,16,.06)}.sc-catalog-eyebrow{font-size:.58rem;letter-spacing:.14em;font-weight:900;color:#9a7817;margin-bottom:.25rem}.sc-catalog-title{margin:0;font-size:1.35rem;line-height:1.12;font-weight:900;letter-spacing:-.03em}.sc-catalog-subtitle{margin:.3rem 0 0;color:var(--muted);font-size:.74rem;line-height:1.35}.sc-catalog-count{flex:none;border:1px solid #e3d5b9;border-radius:999px;padding:.42rem .62rem;background:#fff8e8;color:#806516;font-size:.64rem;font-weight:850;white-space:nowrap}.sc-filter-bar{display:flex;gap:.45rem;overflow-x:auto;padding:.05rem 0 .8rem;margin-bottom:.1rem;scrollbar-width:none}.sc-filter-bar::-webkit-scrollbar{display:none}.sc-filter{appearance:none;border:1px solid #e1d6c1;border-radius:999px;background:#fff;padding:.48rem .72rem;color:#6d655b;font:inherit;font-size:.67rem;font-weight:800;white-space:nowrap;cursor:pointer}.sc-filter.is-active{border-color:#d2a324;background:#fff3ca;color:#6e5510;box-shadow:0 3px 10px rgba(212,160,23,.12)}.sc-special-section{margin:0 0 1.45rem;padding:.8rem;border:1px solid #ead8a7;border-radius:20px;background:linear-gradient(135deg,#fffaf0,#fff);box-shadow:0 6px 22px rgba(53,39,16,.055)}.sc-special-heading{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0 0 .65rem}.sc-special-title{margin:0;font-size:1rem;font-weight:900}.sc-special-note{font-size:.6rem;color:#9a7817;font-weight:800}.sc-special-grid{display:grid;grid-template-columns:1fr;gap:.7rem}@media(min-width:520px){.sc-special-grid{grid-template-columns:repeat(2,1fr)}}.sc-card-badges{position:absolute;z-index:2;top:.65rem;left:.65rem;display:flex;gap:.3rem;flex-wrap:wrap}.sc-card-badge{padding:.28rem .46rem;border-radius:999px;background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.9);box-shadow:0 3px 10px rgba(0,0,0,.08);font-size:.56rem;font-weight:900;color:#72570b}.sc-card-duration{font-size:.62rem;color:var(--muted);font-weight:700}.sc-card-meta{gap:.4rem}.sc-card-meta-spacer{display:none}.sc-card-price{margin-left:auto}.sc-card.is-filtered-out{display:none}.sc-wrap .sc-grid.sc-grid--filtered{margin-bottom:0}.sc-combo-card .sc-card-name:before{content:'COMBO';display:block;font-size:.52rem;letter-spacing:.1em;color:#9a7817;margin-bottom:.18rem}.sc-special-section .sc-card{height:100%}@media(max-width:520px){.sc-catalog-hero{padding:.95rem}.sc-catalog-title{font-size:1.18rem}.sc-catalog-count{display:none}} /* * Catalogue v2 — app-style browsing layer. * The booking sheet and existing My booking bar remain unchanged. */ #hvacb-app { --sc-app-ink: #17130e; --sc-app-muted: #746d64; --sc-app-line: #e9e2d8; --sc-app-surface: #fff; --sc-app-soft: #f8f5f0; --sc-app-add: #2f6f62; --sc-app-offer: #c89b3c; --sc-app-radius: 18px; max-width: 1180px; padding-top: 18px; } #hvacb-app .sc-app-header { display: grid; grid-template-columns: auto minmax(180px, 430px); align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 16px; } #hvacb-app .sc-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--sc-app-ink); } #hvacb-app .sc-brand-logo, #hvacb-app .sc-brand-mark { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; } #hvacb-app .sc-brand-logo { display: block; object-fit: contain; background: #fff; border: 1px solid var(--sc-app-line); } #hvacb-app .sc-brand-mark { display: grid; place-items: center; background: var(--sc-app-ink); color: #f1d17a; font-size: 20px; } #hvacb-app .sc-brand-name { overflow: hidden; font-size: 18px; font-weight: 850; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } #hvacb-app .sc-search-wrap { position: relative; } #hvacb-app .sc-service-search { width: 100%; min-height: 46px; margin: 0; padding: 11px 42px 11px 40px; border: 1px solid var(--sc-app-line); border-radius: 14px; background: var(--sc-app-soft); color: var(--sc-app-ink); font: inherit; font-size: 14px; box-shadow: none; } #hvacb-app .sc-service-search:focus { border-color: #c7b27f; outline: none; box-shadow: 0 0 0 3px rgba(200, 155, 60, .13); } #hvacb-app .sc-search-icon { position: absolute; top: 50%; left: 14px; z-index: 1; color: var(--sc-app-muted); font-size: 21px; line-height: 1; transform: translateY(-52%); pointer-events: none; } #hvacb-app .sc-search-clear { position: absolute; top: 50%; right: 9px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--sc-app-muted); font-size: 20px; line-height: 1; transform: translateY(-50%); cursor: pointer; } #hvacb-app .sc-category-nav { position: sticky; top: 0; z-index: 100; margin: 0 -1rem 18px; padding: 7px 1rem 11px; border-bottom: 1px solid rgba(233, 226, 216, .9); background: rgba(255, 255, 255, .96); box-shadow: 0 7px 18px rgba(34, 25, 14, .055); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } #hvacb-app .sc-category-nav-inner { display: flex; gap: 13px; overflow-x: auto; padding: 2px 2px 1px; scrollbar-width: none; } #hvacb-app .sc-category-nav-inner::-webkit-scrollbar, #hvacb-app .sc-feature-track::-webkit-scrollbar { display: none; } #hvacb-app .sc-category-filter { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 64px; padding: 3px 2px 5px; border: 0; background: transparent; color: #6e685f; font: inherit; font-size: 11px; font-weight: 750; line-height: 1.1; cursor: pointer; } #hvacb-app .sc-category-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #e5ddd2; border-radius: 16px; background: #fff; color: #625b52; font-family: sans-serif; font-size: 24px; line-height: 1; box-shadow: 0 4px 12px rgba(35, 25, 14, .055); } #hvacb-app .sc-category-filter.is-active { color: var(--sc-app-ink); } #hvacb-app .sc-category-filter.is-active .sc-category-icon { border-color: var(--sc-app-ink); background: var(--sc-app-ink); color: #f1d17a; box-shadow: 0 7px 16px rgba(23, 19, 14, .16); } #hvacb-app .sc-feature-area { display: grid; gap: 22px; margin: 0 0 28px; } #hvacb-app .sc-feature-strip { min-width: 0; padding: 17px; border: 1px solid #eadfcf; border-radius: 20px; background: linear-gradient(135deg, #fffaf0 0%, #fff 75%); box-shadow: 0 7px 24px rgba(53, 39, 16, .055); } #hvacb-app .sc-feature-head, #hvacb-app .sc-services-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #hvacb-app .sc-feature-head { margin-bottom: 12px; } #hvacb-app .sc-feature-kicker, #hvacb-app .sc-section-kicker { display: block; margin-bottom: 3px; color: #9a7817; font-size: 9px; font-weight: 900; letter-spacing: .13em; line-height: 1.1; } #hvacb-app .sc-feature-head h2, #hvacb-app .sc-services-heading h2 { margin: 0; color: var(--sc-app-ink); font-size: 19px; font-weight: 900; letter-spacing: -.025em; line-height: 1.15; } #hvacb-app .sc-carousel-controls { display: flex; gap: 6px; flex: 0 0 auto; } #hvacb-app .sc-carousel-arrow { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #d9cdbd; border-radius: 50%; background: #fff; color: var(--sc-app-ink); font-size: 22px; line-height: 1; cursor: pointer; } #hvacb-app .sc-carousel-arrow:hover, #hvacb-app .sc-carousel-arrow:focus-visible { border-color: #a8894c; background: #fff8e9; } #hvacb-app .sc-feature-track { display: grid; grid-auto-columns: minmax(220px, 270px); grid-auto-flow: column; gap: 11px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 1px 4px; } #hvacb-app .sc-feature-card { scroll-snap-align: start; min-width: 0; box-shadow: 0 5px 15px rgba(53, 39, 16, .08); } #hvacb-app .sc-feature-card .sc-add-btn--offer, #hvacb-app .sc-feature-card[data-offer="1"] .sc-add-btn { background: var(--sc-app-offer); color: #20170b; } #hvacb-app .sc-services-heading { margin: 5px 0 13px; padding: 0 2px; } #hvacb-app .sc-results-count { color: var(--sc-app-muted); font-size: 11px; font-weight: 700; } #hvacb-app .sc-category { scroll-margin-top: 92px; } #hvacb-app .sc-category-title { font-size: 18px; } #hvacb-app .sc-card { border-color: var(--sc-app-line); border-radius: var(--sc-app-radius); box-shadow: 0 4px 14px rgba(42, 31, 17, .055); } #hvacb-app .sc-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(42, 31, 17, .085); } #hvacb-app .sc-card-media { aspect-ratio: 1 / 1; } #hvacb-app .sc-card-body { gap: 5px; padding: 12px 12px 5px; } #hvacb-app .sc-card-name { font-size: 14px; } #hvacb-app .sc-card-desc { font-size: 11px; } #hvacb-app .sc-card-price { color: var(--sc-app-ink); font-size: 14px; } #hvacb-app .sc-add-btn { width: auto; min-height: 38px; margin: 7px 10px 10px; border-radius: 11px; background: var(--sc-app-add); color: #fff; font-size: 11px; } #hvacb-app .sc-add-btn.is-added { background: #e8f1ee; color: #285d52; border: 1px solid #b8d1ca; } #hvacb-app .sc-card[data-offer="1"] .sc-add-btn:not(.is-added) { background: var(--sc-app-offer); color: #20170b; } #hvacb-app .is-category-hidden, #hvacb-app .is-search-hidden { display: none !important; } #hvacb-app .sc-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482990; padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(224, 216, 205, .95); background: rgba(255, 255, 255, .96); box-shadow: 0 -8px 25px rgba(35, 25, 14, .08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } #hvacb-app .sc-bottom-nav-inner { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; width: min(100%, 560px); margin: 0 auto; } #hvacb-app .sc-bottom-nav-btn { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; min-width: 0; min-height: 52px; padding: 4px 3px; border: 0; border-radius: 12px; background: transparent; color: #7a736b; font: inherit; font-size: 9px; font-weight: 750; line-height: 1.1; cursor: pointer; } #hvacb-app .sc-bottom-icon { font-size: 18px; line-height: 1; } #hvacb-app .sc-bottom-nav-btn.is-active { background: #f5efe5; color: var(--sc-app-ink); } @media (max-width: 640px) { #hvacb-app { padding: 12px 12px 9.5rem; } #hvacb-app .sc-app-header { grid-template-columns: 1fr; gap: 11px; margin-bottom: 12px; } #hvacb-app .sc-brand-name { font-size: 17px; } #hvacb-app .sc-brand-logo, #hvacb-app .sc-brand-mark { width: 40px; height: 40px; flex-basis: 40px; border-radius: 13px; } #hvacb-app .sc-service-search { min-height: 44px; font-size: 13px; } #hvacb-app .sc-category-nav { top: 0; margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; } #hvacb-app .sc-category-icon { width: 50px; height: 50px; } #hvacb-app .sc-category-filter { min-width: 65px; } #hvacb-app .sc-feature-strip { padding: 13px; border-radius: 18px; } #hvacb-app .sc-feature-track { grid-auto-columns: minmax(205px, 76vw); } #hvacb-app .sc-feature-head h2, #hvacb-app .sc-services-heading h2 { font-size: 17px; } #hvacb-app .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } #hvacb-app .sc-card { border-radius: 16px; } #hvacb-app .sc-card-body { padding: 9px 9px 4px; } #hvacb-app .sc-card-name { font-size: 12px; } #hvacb-app .sc-card-desc { font-size: 10px; } #hvacb-app .sc-card-meta { padding-top: 6px; } #hvacb-app .sc-card-price { font-size: 13px; } #hvacb-app .sc-add-btn { min-height: 36px; margin: 6px 8px 8px; font-size: 10px; } } @media (min-width: 641px) and (max-width: 899px) { #hvacb-app { padding-right: 22px; padding-left: 22px; padding-bottom: 5rem; } #hvacb-app .sc-category-nav { margin-right: -22px; margin-left: -22px; padding-right: 22px; padding-left: 22px; } #hvacb-app .sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } #hvacb-app .sc-feature-track { grid-auto-columns: minmax(240px, 34vw); } } @media (min-width: 900px) { #hvacb-app { padding-bottom: 3rem; } #hvacb-app .sc-category-nav { top: 0; margin-right: 0; margin-left: 0; border: 1px solid rgba(233, 226, 216, .9); border-radius: 18px; } #hvacb-app .sc-category-nav-inner { justify-content: center; } #hvacb-app .sc-feature-track { grid-auto-columns: minmax(235px, 280px); } #hvacb-app .sc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } } @media (prefers-reduced-motion: reduce) { #hvacb-app .sc-feature-track, #hvacb-app .sc-carousel-arrow { scroll-behavior: auto; transition: none; } } /* Keep the existing My booking bar visually unchanged while reserving space * for the new category navigation dock on mobile/tablet. */ @media (max-width: 899px) { #hvacb-app .sc-float { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; } } /* Category navigation filters the canonical service grid, not the two * presentation-only feature carousels. */ #hvacb-app .sc-feature-card.is-category-hidden { display: flex !important; } /* Offer/combo carousel CTA: keep gold reserved for promotional actions and * present the requested customer-facing label without changing cart logic. */ #hvacb-app .sc-feature-strip .sc-add-btn:not(.is-added) { background: var(--sc-app-offer); color: #20170b; font-size: 0; } #hvacb-app .sc-feature-strip .sc-add-btn:not(.is-added)::after { content: "Grab Now"; font-size: 11px; } /* Catalogue refinement pass — contact actions, richer category navigation, * promotional tiles, premium badges and product CTAs. */ #hvacb-app .sc-header-main{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0} #hvacb-app .sc-brand-copy{display:flex;flex-direction:column;min-width:0;gap:2px} #hvacb-app .sc-brand-powered{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#9a7817} #hvacb-app .sc-header-actions{display:flex;align-items:center;gap:7px;flex:none} #hvacb-app .sc-header-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:7px 10px;border:1px solid #e4ddd3;border-radius:12px;background:#fff;color:#3d372f;text-decoration:none;font-size:10px;font-weight:850;box-shadow:0 3px 10px rgba(35,25,14,.04)} #hvacb-app .sc-header-action:hover,#hvacb-app .sc-header-action:focus-visible{border-color:#c7b27f;background:#fff9ed;color:#17130e} #hvacb-app .sc-header-action svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #hvacb-app .sc-search-wrap{margin-top:0} #hvacb-app .sc-search-icon{display:grid;place-items:center;width:18px;height:18px;top:50%;left:13px} #hvacb-app .sc-search-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} /* Vector category icons: consistent, lightweight and independent of external icon fonts. */ #hvacb-app .sc-category-icon svg,#hvacb-app .sc-bottom-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #hvacb-app .sc-category-filter.is-active .sc-category-icon svg{stroke:#f1d17a} #hvacb-app .sc-category-filter:hover .sc-category-icon{border-color:#cbb88e;background:#fffaf0} /* Promotional cards are deliberately not rectangular photo tiles. The image * becomes a soft rounded portrait block inside a richer editorial card. */ #hvacb-app .sc-feature-strip{position:relative;overflow:hidden;border:1px solid #e5d4b0;background:linear-gradient(120deg,#211b14 0%,#3a2d1c 48%,#fff5dc 48%,#fffaf0 100%);box-shadow:0 10px 30px rgba(55,39,14,.09)} #hvacb-app .sc-feature-strip--combos{background:linear-gradient(120deg,#153b35 0%,#245a4e 48%,#eff8f3 48%,#fbfffc 100%);border-color:#c7ddd6} #hvacb-app .sc-feature-strip .sc-feature-head{position:relative;z-index:2} #hvacb-app .sc-feature-strip .sc-feature-kicker{color:#f1d17a} #hvacb-app .sc-feature-strip--combos .sc-feature-kicker{color:#d6eee7} #hvacb-app .sc-feature-strip .sc-feature-head h2{color:#fff} #hvacb-app .sc-feature-strip--combos .sc-feature-head h2{color:#fff} #hvacb-app .sc-carousel-arrow{width:36px;height:36px;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.13);color:#fff;font-size:17px;box-shadow:none;backdrop-filter:blur(8px)} #hvacb-app .sc-carousel-arrow:hover,#hvacb-app .sc-carousel-arrow:focus-visible{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.23);color:#fff} #hvacb-app .sc-feature-track{position:relative;z-index:2} #hvacb-app .sc-feature-card{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:1fr auto;column-gap:12px;align-items:center;overflow:hidden;min-height:142px;border:1px solid rgba(255,255,255,.58);border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 8px 18px rgba(0,0,0,.13);backdrop-filter:blur(8px)} #hvacb-app .sc-feature-card .sc-card-media{grid-column:1;grid-row:1 / span 2;width:88px;height:88px;margin-left:10px;align-self:center;aspect-ratio:1;border-radius:24px;overflow:hidden;background:#efe5d3;box-shadow:0 5px 14px rgba(0,0,0,.13)} #hvacb-app .sc-feature-card .sc-card-media img{width:100%;height:100%;object-fit:cover} #hvacb-app .sc-feature-card .sc-card-body{grid-column:2;grid-row:1;padding:12px 12px 4px 0;min-width:0} #hvacb-app .sc-feature-card .sc-card-name{font-size:13px;line-height:1.22} #hvacb-app .sc-feature-card .sc-card-desc{font-size:10px;-webkit-line-clamp:2} #hvacb-app .sc-feature-card .sc-card-meta{margin-top:5px} #hvacb-app .sc-feature-card .sc-card-price{font-size:13px;color:#17130e} #hvacb-app .sc-feature-card .sc-add-btn{grid-column:2;grid-row:2;width:auto;min-height:34px;margin:3px 12px 11px 0;border-radius:999px;background:#c89b3c;color:#20170b;font-size:10px;font-weight:900;box-shadow:0 5px 12px rgba(200,155,60,.25)} #hvacb-app .sc-feature-card .sc-add-btn:hover:not(:disabled){filter:brightness(1.04);transform:translateY(-1px)} #hvacb-app .sc-feature-card .sc-add-btn.is-added{background:#e8f1ee;color:#285d52;border-color:#b8d1ca;box-shadow:none} /* Premium Popular / Featured badges. */ #hvacb-app .sc-card-body>.sc-card-badge{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(24,19,13,.88);color:#fff7e4;font-size:9px;font-weight:900;letter-spacing:.035em;line-height:1;box-shadow:0 7px 16px rgba(0,0,0,.17);backdrop-filter:blur(8px)} #hvacb-app .sc-card-body>.sc-card-badge:before{content:'✦';display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#f1d17a;color:#241b0e;font-size:8px} #hvacb-app .sc-card-body>.sc-card-badge{color:#fff} #hvacb-app .sc-card-body>.sc-card-badge:has(+ .sc-card-name){ } #hvacb-app .sc-card[data-offer="1"] .sc-card-body>.sc-card-badge{background:linear-gradient(135deg,#3d2b12,#18130e);border-color:#d6b45c;color:#fff8e9} /* Clear, tactile customer CTAs. Gold is promotional; green is routine add. */ #hvacb-app .sc-card>.sc-add-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;border:0;letter-spacing:.01em;font-size:11px;font-weight:900} #hvacb-app .sc-card>.sc-add-btn:not(.is-added)::before{content:'+';display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.18);font-size:15px;line-height:1} #hvacb-app .sc-card[data-offer="1"]>.sc-add-btn:not(.is-added)::before{content:'✦';background:rgba(32,23,11,.12);font-size:9px} #hvacb-app .sc-card>.sc-add-btn.is-added::before{content:'✓';font-size:11px} #hvacb-app .sc-card>.sc-add-btn:focus-visible{outline:3px solid rgba(200,155,60,.28);outline-offset:2px} /* Bottom navigation now exposes the actual categories and always ends with * the Google review action. It scrolls horizontally when a business has many categories. */ #hvacb-app .sc-bottom-nav{overflow:hidden} #hvacb-app .sc-bottom-nav-inner{display:flex;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:3px;max-width:none;padding:0 2px} #hvacb-app .sc-bottom-nav-inner::-webkit-scrollbar{display:none} #hvacb-app .sc-bottom-nav-btn{flex:0 0 72px} #hvacb-app .sc-bottom-nav-btn.is-active{background:#f2eadc} #hvacb-app .sc-bottom-google{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-family:Arial,sans-serif;font-size:15px;font-weight:900;color:#4285f4;background:#fff;border:1px solid #ded7cd} #hvacb-app .sc-google-review{color:#806516;text-decoration:none} #hvacb-app .sc-google-review:hover{background:#fff8e9;color:#5e4910} #hvacb-app .sc-brand-footer{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 4px 4px;color:#999187;font-size:9px;font-weight:650;letter-spacing:.02em} #hvacb-app .sc-brand-footer strong{color:#74603a;font-weight:900} #hvacb-app .sc-brand-dot{color:#d0c5b7} @media(max-width:640px){ #hvacb-app .sc-header-main{align-items:center} #hvacb-app .sc-header-actions{gap:5px} #hvacb-app .sc-header-action{width:38px;height:38px;padding:0;border-radius:12px} #hvacb-app .sc-header-action span{display:none} #hvacb-app .sc-feature-strip{padding:12px;background:linear-gradient(125deg,#211b14 0%,#3a2d1c 56%,#fff5dc 56%,#fffaf0 100%)} #hvacb-app .sc-feature-strip--combos{background:linear-gradient(125deg,#153b35 0%,#245a4e 56%,#eff8f3 56%,#fbfffc 100%)} #hvacb-app .sc-feature-card{grid-template-columns:74px minmax(0,1fr);min-height:126px;border-radius:16px} #hvacb-app .sc-feature-card .sc-card-media{width:74px;height:74px;margin-left:8px;border-radius:20px} #hvacb-app .sc-feature-card .sc-card-body{padding:9px 9px 2px 0} #hvacb-app .sc-feature-card .sc-add-btn{margin-right:9px;margin-bottom:9px;min-height:31px} #hvacb-app .sc-feature-track{grid-auto-columns:minmax(245px,78vw)} #hvacb-app .sc-card-body>.sc-card-badge{top:8px;left:8px;padding:5px 7px;font-size:8px} } @media(min-width:641px){#hvacb-app .sc-header-main{margin-bottom:1px}} /* Final catalogue card refinement: clear hierarchy and unambiguous actions. */ #hvacb-app .sc-card-body{padding:12px 12px 5px;gap:6px} #hvacb-app .sc-card-name{font-size:15px!important;font-weight:850!important;line-height:1.22!important;letter-spacing:-.01em!important;color:#17130e!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;min-height:36px} #hvacb-app .sc-card-desc{font-size:11px!important;line-height:1.4!important;color:#756e66!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;min-height:31px} #hvacb-app .sc-card-meta{margin-top:2px!important;padding-top:6px!important;border-top:1px solid #f0ebe4!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important} #hvacb-app .sc-card-duration{font-size:10px!important;color:#81796f!important;font-weight:700!important} #hvacb-app .sc-card-price{display:inline-flex!important;align-items:baseline!important;gap:6px!important;margin-left:auto!important;font-size:14px!important;font-weight:900!important;color:#17130e!important;white-space:nowrap!important} #hvacb-app .sc-card-price del{font-size:10px!important;color:#999087!important;font-weight:650!important;text-decoration-thickness:1px!important} #hvacb-app .sc-card-price strong{font-size:15px!important;color:#17130e!important} #hvacb-app .sc-add-btn{min-height:36px!important;margin:7px 10px 10px!important;border-radius:999px!important;font-size:11px!important;font-weight:900!important} #hvacb-app .sc-card:not([data-offer="1"]):not([data-combo="1"])>.sc-add-btn{background:#2f6f62!important;color:#fff!important} #hvacb-app .sc-card[data-offer="1"]>.sc-add-btn,#hvacb-app .sc-card[data-combo="1"]>.sc-add-btn{background:#c89b3c!important;color:#21180b!important} #hvacb-app .sc-card>.sc-add-btn:not(.is-added)::before{display:none!important} #hvacb-app .sc-card>.sc-card-body>.sc-card-badge{position:static!important;align-self:flex-start!important;width:max-content!important;max-width:100%!important;margin:0 0 1px!important;padding:4px 7px!important;border-radius:999px!important;background:#f6f1e8!important;border:1px solid #e5dccd!important;color:#76603a!important;box-shadow:none!important;font-size:8px!important;line-height:1!important} #hvacb-app .sc-card>.sc-card-body>.sc-card-badge:before{display:none!important} #hvacb-app .sc-card>.sc-card-body>.sc-card-type{display:block!important;margin:0!important;font-size:8px!important;line-height:1!important;letter-spacing:.12em!important;color:#9a7817!important;font-weight:900!important} @media(max-width:640px){ #hvacb-app .sc-card-body{padding:9px 9px 4px!important;gap:5px!important} #hvacb-app .sc-card-name{font-size:13px!important;min-height:32px!important} #hvacb-app .sc-card-desc{font-size:10px!important;min-height:28px!important} #hvacb-app .sc-card-price strong{font-size:14px!important} #hvacb-app .sc-add-btn{min-height:35px!important;margin:6px 8px 8px!important;font-size:10px!important} } /* Do not trap vertical page scrolling when a finger starts on a carousel. */ #hvacb-app .sc-feature-track,#hvacb-app .sc-collection-track{touch-action:auto!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important} #hvacb-app .sc-feature-card,#hvacb-app .sc-collection-track .sc-card{touch-action:auto!important} /* Checkout payment summary placement: it is a standalone step after the * payment selection/amount choice, matching the checkout sequence. */ #hvacb-app .sc-payment-summary{margin:.65rem .85rem 0} /* Fixed advance amount: when the salon disables customer editing, present * the configured value as a non-editable amount rather than an input-looking * control. The underlying input remains in place so existing payment logic and * form submission stay unchanged. */ #hvacb-app #sc-pay-partial-amount[readonly]{ border-color:transparent!important; background:transparent!important; box-shadow:none!important; color:var(--sc-app-ink,#17130e)!important; font-weight:900!important; cursor:default!important; caret-color:transparent!important; } #hvacb-app #sc-pay-partial-amount[readonly]:focus{ border-color:transparent!important; box-shadow:none!important; outline:none!important; } #hvacb-app #sc-pay-partial-amount[readonly]::-webkit-inner-spin-button, #hvacb-app #sc-pay-partial-amount[readonly]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; } #hvacb-app #sc-pay-partial-amount[readonly]{ -moz-appearance:textfield; } /* Batch: subtle design fixes. * 1) The qty +/- buttons had no explicit centering, so the glyph could sit * off-center depending on the browser's default button line-height. * 2) The sheet-close (×) button is specified as a true 2rem×2rem circle, but * a browser's default