/* CITY BUILDERS finished demo pages — extends existing Stage 1 design without bottom navigation */
html{scroll-behavior:smooth}body{overflow-x:hidden}.header-actions a{color:inherit;text-decoration:none}.quick-actions a{min-width:0;border:1px solid #e2eaf2;background:#fff;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;min-height:52px;color:#0c4a8b;box-shadow:0 2px 6px rgba(10,46,90,.06);font-weight:800;font-size:11px;padding:6px 4px;text-decoration:none}.quick-actions a span{text-align:left;display:block;line-height:1.15}.quick-actions a small{display:block;font-size:9px;font-weight:500;color:#647b91;margin-top:3px}.category-card{text-decoration:none;color:inherit}.product-image{display:flex;align-items:center;justify-content:center}.product-title-link{color:inherit;text-decoration:none}.product-title-link:hover{color:#005ac3}.view-all{text-decoration:none!important;border:1px solid #c2d4e6;min-height:41px!important;font-size:12px!important;white-space:nowrap}.page-section{padding-top:65px;padding-bottom:80px;min-height:55vh}.page-section h1,.page-intro h1{font-size:clamp(31px,4.4vw,50px);line-height:1.12;color:#092e5d;margin:8px 0 13px;font-weight:850}.page-intro p,.page-section p{color:#52667f;line-height:1.6}.page-intro{padding-bottom:24px}.page-products{min-height:65vh}.catalogue-tools{background:white;display:grid;grid-template-columns:2fr 1fr 1fr;gap:15px;padding:20px;border:1px solid #e1ebf3;border-radius:15px;margin:15px 0}.catalogue-tools label,.contact-form label,.admin-edit label,.settings-form label,.admin-auth-card label{font-size:12px;font-weight:750;display:flex;flex-direction:column;gap:8px;color:#133c61}.catalogue-tools input,.catalogue-tools select,.contact-form input,.contact-form select,.contact-form textarea,.admin-edit input:not([type=file]):not([type=checkbox]),.admin-edit select,.admin-edit textarea,.settings-form input,.settings-form textarea,.admin-auth-card input,.admin-inquiry-actions select{width:100%;min-width:0;border:1px solid #d8e5ee;border-radius:8px;min-height:43px;padding:10px 12px;background:#fff;color:#153858;font:inherit;font-size:14px}.catalogue-tools :is(input,select):focus,.contact-form :is(input,textarea):focus,.admin-edit :is(input,textarea,select):focus{outline:2px solid #438cea;outline-offset:1px}.listing-count{font-size:12px;color:#687a8b;margin:12px 0}.breadcrumbs{margin-bottom:28px;font-size:13px;color:#6f8296}.breadcrumbs a{color:#0864b6}.detail-layout{display:grid;grid-template-columns:1.06fr 1fr;gap:50px;align-items:center}.detail-photo{border-radius:16px;display:grid;place-items:center;min-height:430px;background:linear-gradient(#fff,#edf6ff);border:1px solid #e1eaf3}.detail-photo img{max-width:90%;max-height:360px;object-fit:contain}.detail-info h1{font-size:clamp(29px,4vw,46px)}.detail-price{font-size:36px;font-weight:900;color:#0054ac;margin:25px 0}.detail-price small{display:block;font-size:12px;color:#6c7e93;font-weight:500}.detail-info .btn{border:0;cursor:pointer}.text-link{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:22px;color:#075fbe;font-weight:750}.contact-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:26px;align-items:start}.contact-details,.contact-form{padding:32px;background:#fff;border:1px solid #e4edf4;border-radius:15px;box-shadow:0 7px 25px rgba(13,62,108,.04)}.contact-layout h2{font-size:23px;color:#0c3765;margin:0 0 12px}.contact-details>p,.contact-form>p{font-size:13px;color:#647a8e}.contact-action{display:flex;gap:14px;align-items:center;padding:19px 0;border-bottom:1px solid #e9f0f5;color:#0654a8}.contact-action>div{display:flex;flex-direction:column;gap:5px}.contact-action b{color:#143c60;font-size:14px}.contact-action button{border:0;background:none;text-align:left;cursor:pointer;color:#1768be;padding:0}.contact-action a{color:#1768be;overflow-wrap:anywhere}.contact-action p{margin:0;font-size:13px;color:#778799}.map-placeholder{margin-top:22px;min-height:130px;border:1px dashed #b9cadc;background:#f7fbff;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center;color:#56748f;font-size:13px}.contact-details>.btn{display:flex;margin-top:22px;max-width:280px}.contact-form{display:flex;flex-direction:column;gap:17px}.contact-form>p{margin:0}.contact-form h2{margin:0}.contact-form .form-grid,.admin-fieldgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.contact-form textarea,.admin-edit textarea,.settings-form textarea{resize:vertical}.contact-form>small{font-size:11px;color:#697b8a}.contact-form .btn{align-self:flex-start;min-width:185px;border:0;cursor:pointer}.form-notice{background:#e9f2ff;color:#0d4e87;border-left:3px solid #0068c2;padding:12px 16px;border-radius:6px;line-height:1.5;font-size:13px;margin:8px 0}.view-all:hover{background:#e1efff}
/* Admin */
.admin-shell{min-height:100vh;display:grid;place-items:center;background:linear-gradient(125deg,#082a54,#075fb5);padding:24px}.admin-auth-card{background:white;width:min(100%,455px);padding:34px;border-radius:19px;box-shadow:0 26px 60px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:17px}.admin-auth-card h1{font-size:29px;color:#12365b;margin:6px 0 0}.admin-auth-card p{font-size:13px;line-height:1.65;color:#64748b;margin:0}.admin-auth-card button{border:0;justify-content:center}.admin-auth-card>a{color:#1163a9;text-decoration:none;font-size:12px;margin-top:8px}.admin-brand{display:flex;align-items:center;gap:8px;color:#0650a1}.admin-brand strong{font-size:19px}.admin-warning{background:#fff8e6;border:1px solid #ffe09c;border-radius:9px;padding:12px;color:#875700;font-size:12px;line-height:1.55;overflow-wrap:anywhere}.admin-layout{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;background:#f4f8fd;color:#1c3654}.admin-sidebar{display:flex;flex-direction:column;gap:25px;background:#0a315e;color:#fff;padding:25px 16px}.admin-sidebrand{display:flex;align-items:center;gap:10px;padding:0 5px 25px;border-bottom:1px solid #335b7d}.admin-sidebrand b{font-size:17px;display:block}.admin-sidebrand small{font-size:10px;color:#a5c4dd}.admin-sidebar nav{display:flex;flex-direction:column;gap:5px}.admin-sidebar nav button,.admin-sidebottom button{border:0;background:none;color:#c8d9ed;font-size:14px;text-align:left;border-radius:8px;padding:13px 16px;cursor:pointer}.admin-sidebar nav button.active,.admin-sidebar nav button:hover{background:#126ac3;color:white}.admin-sidebottom{display:flex;flex-direction:column;gap:6px;margin-top:auto}.admin-sidebottom a{color:#cde9fc;padding:10px 15px;text-decoration:none;font-size:13px}.admin-topline{display:flex;align-items:center;justify-content:space-between;gap:18px;background:white;border-bottom:1px solid #dae6f1;padding:17px 38px;color:#7c8b9c;font-size:11px;letter-spacing:.5px}.admin-topline a{color:#005eae;font-weight:750;text-decoration:none;font-size:12px}.admin-main{max-width:1380px;margin:0 auto;padding:34px 36px 75px}.admin-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:26px}.admin-heading h1{margin:6px 0 2px;font-size:31px;color:#0d365d}.admin-heading p{margin:0;color:#75869a;font-size:13px}.admin-heading .btn{white-space:nowrap;text-decoration:none;border:0}.admin-panel{background:#fff;border:1px solid #dfebf5;border-radius:14px;padding:25px;margin-bottom:23px;box-shadow:0 5px 20px rgba(7,42,77,.035)}.admin-panel h2{margin:0 0 13px;font-size:20px;color:#153c61}.admin-panel>p{font-size:14px;color:#536f88;line-height:1.7}.admin-statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}.admin-statgrid>div{background:white;border:1px solid #e0eaf3;border-radius:13px;padding:25px}.admin-statgrid strong{display:block;font-size:34px;color:#005bb2}.admin-statgrid span{font-size:12px;color:#69829b}.admin-intro-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:19px}.admin-mobile-tabs{display:none}.admin-list-header{display:flex;justify-content:space-between;gap:10px;align-items:center}.admin-list-header span{font-size:12px;color:#6e8093}.admin-list-item{display:flex;align-items:center;gap:17px;border-top:1px solid #e5eef5;padding:15px 2px}.admin-list-item>img{width:76px;height:72px;object-fit:contain;border-radius:8px;background:#f1f6fb;padding:6px;flex-shrink:0}.admin-item-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.admin-item-info strong{font-size:14px;color:#1a3b5a;overflow-wrap:anywhere}.admin-item-info small{font-size:12px;color:#77899b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:600px}.admin-item-info span{font-size:11px;color:#0864ae}.admin-item-actions{display:flex;gap:9px}.admin-item-actions button,.admin-edit-title button,.admin-inquiry-actions button{border:1px solid #c9daea;background:#fff;color:#04569d;font-size:12px;padding:8px 13px;border-radius:7px;cursor:pointer}.admin-item-actions .danger,.admin-inquiry-actions button{color:#ae3f3f;border-color:#f1d3d3}.admin-edit{background:#fdfefe;border:2px solid #b5d3f2}.admin-edit-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.admin-fieldgrid{gap:18px 23px}.admin-fieldgrid label{min-width:0}.admin-fieldgrid .check-field{display:flex;flex-direction:row;align-items:center;gap:8px}.admin-fieldgrid input[type=checkbox]{accent-color:#0762bf;width:17px;height:17px}.admin-fieldgrid input[type=file]{font-size:11px;max-width:100%}.admin-image-preview{width:104px;height:85px;object-fit:contain;background:#eef4f8;border-radius:8px;margin-top:4px}.admin-edit>.btn,.settings-form>.btn{margin-top:23px;border:0}.admin-inquiry{padding:17px 0;border-top:1px solid #e5eef4}.admin-inquiry-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.admin-inquiry-head strong{color:#1a3f61}.admin-inquiry-head small{font-size:11px;color:#8495a3}.admin-inquiry p{font-size:13px;color:#45627c;line-height:1.6;overflow-wrap:anywhere}.admin-inquiry-actions{display:flex;gap:9px}.admin-inquiry-actions select{width:110px;min-height:33px;padding:5px}.admin-notice{margin-bottom:18px}.settings-form>.admin-fieldgrid{margin-top:21px}
@media(max-width:900px){.catalogue-tools{grid-template-columns:1fr 1fr}.catalogue-tools label:first-child{grid-column:1/-1}.contact-layout{grid-template-columns:1fr}.detail-layout{gap:25px}.admin-layout{grid-template-columns:1fr}.admin-sidebar{display:none}.admin-mobile-tabs{display:flex;overflow-x:auto;gap:8px;margin-bottom:20px;padding-bottom:8px}.admin-mobile-tabs button{border:1px solid #cbdce9;border-radius:7px;background:white;color:#376286;padding:10px 14px;white-space:nowrap}.admin-mobile-tabs button.active{background:#0964b9;color:white}.admin-main{padding:27px 20px}.admin-statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.quick-actions a{min-height:48px;gap:5px}.quick-actions a>svg{width:19px;height:19px}.quick-actions a span{font-size:10px}.quick-actions a small{font-size:8px}.page-section{padding-top:33px;padding-bottom:48px}.catalogue-tools{grid-template-columns:1fr;padding:15px;gap:10px}.catalogue-tools label:first-child{grid-column:auto}.detail-layout{grid-template-columns:1fr}.detail-photo{min-height:270px}.detail-photo img{max-height:235px}.detail-price{font-size:26px}.contact-details,.contact-form{padding:22px}.contact-form .form-grid,.admin-fieldgrid{grid-template-columns:1fr}.admin-main{padding:22px 13px 60px}.admin-heading{align-items:flex-start;flex-direction:column;gap:14px}.admin-heading h1{font-size:26px}.admin-topline{padding:14px;font-size:9px}.admin-panel{padding:17px}.admin-statgrid{gap:9px}.admin-statgrid>div{padding:18px}.admin-statgrid strong{font-size:25px}.admin-list-item{gap:8px}.admin-list-item>img{height:53px;width:56px}.admin-item-actions{flex-direction:column;gap:4px}.admin-item-actions button{padding:6px 8px;font-size:11px}.admin-inquiry-head{flex-direction:column;align-items:flex-start}.view-all{margin-top:9px}}
fragment{display:contents}

.site-loading{min-height:68vh;background:#f6faff;display:flex;align-items:center;justify-content:center;text-align:center;color:#315c80;font-size:14px}.site-loading .container{width:min(100% - 40px,580px)}.loading-bar{height:6px;background:linear-gradient(90deg,#105bb3,#ffcd18,#105bb3);background-size:200% 100%;border-radius:15px;animation:cityLoad 2s linear infinite}@keyframes cityLoad{from{background-position:0 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){.loading-bar{animation:none}}
.admin-content{min-width:0;width:100%;overflow-x:hidden}.admin-main{min-width:0;max-width:100%}.admin-mobile-tabs{min-width:0;max-width:100%;width:100%}

/* Mobile product cards scroll together with their own name, price and WhatsApp action. */
.mobile-swipe-hint{display:none}
.detail-swipe-region{touch-action:pan-y;min-width:0}
.detail-photo{position:relative;overflow:hidden}
.detail-photo-arrows{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none}
.detail-photo-arrows button{pointer-events:auto;border:1px solid #dbe9f5;background:#fffffff2;color:#084f9b;box-shadow:0 2px 10px #002a5033;border-radius:50%;width:42px;height:42px;font-size:30px;line-height:1;cursor:pointer}
.detail-photo-arrows button:focus-visible{outline:3px solid #ffca18;outline-offset:2px}
.detail-swipe-footer{display:flex;justify-content:center;align-items:center;gap:18px;margin:19px 0 0;color:#53718c;font-size:13px;text-align:center}
.detail-counter{font-weight:800;white-space:nowrap;color:#075bae}
@media(max-width:600px){
 .mobile-swipe-hint{display:block;font-size:12px;font-weight:700;color:#2864a0;margin:0 0 9px}
 .featured-swipe-grid{display:grid;grid-auto-flow:column;grid-auto-columns:85%;grid-template-columns:none;gap:12px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:2px 2px 15px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 .featured-swipe-grid .product-card{scroll-snap-align:start;scroll-snap-stop:always}
 .featured-swipe-grid .product-image{height:235px;padding:14px 10px 0}
 .featured-swipe-grid .product-body{padding:13px 16px 17px}
 .featured-swipe-grid .product-body h3{font-size:16px;min-height:0}
 .featured-swipe-grid .product-body p{font-size:12px}
 .featured-swipe-grid .price{font-size:23px;margin-bottom:12px}
 .featured-swipe-grid .price small{font-size:10px}
 .featured-swipe-grid .enquire-btn{font-size:12px;min-height:44px}
 .featured-swipe-grid .enquire-btn svg{width:18px;height:18px}
 .detail-photo{min-height:330px}
 .detail-photo img{max-height:292px}
 .detail-swipe-footer{font-size:12px;justify-content:space-between;text-align:left;margin:16px 2px 0}
}
@media(max-width:355px){.featured-swipe-grid .product-image{height:208px}}

/* CITY BUILDERS WhatsApp branding: user's green emblem with transparent background */
.wa-logo { display:inline-block; width:20px; height:20px; flex:none; vertical-align:middle; object-fit:contain; max-width:100%; }
.header-action .wa-logo, .quick-actions .wa-logo { width:25px; height:25px; }
.quick-actions .quick-wa { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; }
.quick-actions .quick-wa .wa-logo { width:21px; height:21px; }
.enquire-btn .wa-logo { width:18px; height:18px; padding:2px; box-sizing:border-box; background:#fff; border-radius:50%; }
.btn-blue .wa-logo { width:22px; height:22px; padding:2px; box-sizing:border-box; background:#fff; border-radius:50%; }
.floating-wa { background:#fff; border:2px solid #27d366; }
.floating-wa:hover { background:#f2fff6; }
.floating-wa .wa-logo { width:31px; height:31px; }
.dialog-icon .wa-logo { width:32px; height:32px; }
/* The footer icon uses the same WhatsApp PNG, but must never expand to the image natural size. */
.footer-col button .wa-logo { width:17px; height:17px; flex:0 0 17px; }
@media (max-width:600px) {
  .enquire-btn .wa-logo { width:17px; height:17px; }
  .floating-wa .wa-logo { width:29px; height:29px; }
  .quick-actions .quick-wa .wa-logo { width:20px; height:20px; }
}


/* WhatsApp enquiry: keep the entire popup inside mobile and zoomed visual viewports.
   Overlay dimensions follow visualViewport in App.jsx; these rules are the no-JS
   fallback and the layout constraints for narrow / landscape displays. */
.dialog-layer{
  inset:auto;
  top:0;
  left:0;
  width:100vw;
  height:100dvh;
  max-width:none;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(8px,3vw,18px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.dialog{
  width:min(100%,450px);
  min-width:0;
  max-width:100%;
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  box-sizing:border-box;
  flex:0 1 auto;
  overscroll-behavior:contain;
  margin:auto;
  overflow-wrap:anywhere;
}
.dialog textarea,.dialog label,.dialog-explanation,.dialog h2{min-width:0;max-width:100%}
.dialog-actions{min-width:0;flex-wrap:wrap}
.dialog-actions .btn{max-width:100%;white-space:normal}
.dialog-close{z-index:1;min-width:36px;min-height:36px;display:grid;place-items:center}
@media(max-width:600px){
 .dialog{padding:clamp(14px,4.5vw,22px);border-radius:14px}
 .dialog h2{font-size:clamp(19px,5.5vw,23px);padding-right:24px}
 .dialog-explanation{font-size:12px}
 .dialog textarea{font-size:16px;line-height:1.45;resize:none}
 .dialog-actions .btn{min-height:44px}
}
@media(max-width:260px){.dialog-actions{flex-direction:column}.dialog-actions .btn{width:100%}}

/* City Builders: easy-to-find Admin login shortcut. No authentication bypass. */
.admin-header-link{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 12px;color:#0a477f;background:#f2f7fd;border:1px solid #d6e5f4;border-radius:9px;font-size:12px;font-weight:800;white-space:nowrap}.admin-header-link:hover{background:#e5f1ff;color:#0056ae}.admin-header-link svg{flex:none}.mobile-admin-link{display:none!important}.mobile-admin-link span{display:flex;align-items:center;gap:12px}.mobile-admin-link svg{flex:none}
@media(max-width:900px){.main-header .admin-header-link{margin-left:auto;display:grid;place-content:center;width:43px;height:43px;min-height:43px;padding:0}.admin-header-link span{display:none}.main-header .hamburger{margin-left:0}.mobile-nav .mobile-admin-link{display:flex!important;color:#075cab;background:#f0f6ff;border-radius:8px;padding:13px 10px;margin-top:10px}}
@media(max-width:600px){.main-header .admin-header-link{width:39px;height:39px;min-height:39px}.main-header .header-inner{gap:6px}}
@media(max-width:420px){.main-header .brand{gap:6px}.main-header .brand-icon{width:38px;height:38px}.main-header .brand-words strong{font-size:clamp(17px,4.9vw,20px);letter-spacing:-.7px}.main-header .brand-words small{font-size:6px;letter-spacing:.45px}.main-header .admin-header-link{width:38px;height:38px;min-height:38px}.main-header .hamburger{width:38px;height:38px}}
@media(max-width:345px){.main-header .brand-icon{width:35px;height:35px}.main-header .brand-words strong{font-size:16px}.main-header .brand-words small{font-size:5.5px;letter-spacing:.2px}}

/* Password recovery form: reuse the existing admin card without changing public UI. */
.recovery-form{display:flex;flex-direction:column;gap:16px}
.recovery-form>p{margin:0}
.recovery-form>.btn{border:0;cursor:pointer;width:100%}
.admin-auth-card>a.btn{display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;text-decoration:none}