/* XPROTEC v100.28 — final UI/UX polish layer.
 * Deliberately conservative: spacing, overflow, control states and responsive
 * shell consistency only. It does not alter SEO, hero copy, business logic or
 * the established black/yellow visual identity. */

/* Shared layout resilience. */
.xpc-page,
.xpc-page main,
.xpc-page section,
.xpc-page article,
.xpc-page header,
.xpc-page footer,
.xpc-page nav,
.xpc-page form,
.xpc-page fieldset,
.xpc-page table,
.xpc-page .xpc-header-inner,
.xpc-page .xpc-header-actions,
.xpc-page .xpc-section,
.xpc-page .xpc-account-tab-panel,
.xpc-page .xpc-frontend-admin-workspace,
.xpc-page .xpc-front-admin-tabs{
  min-width:0!important;
}

.xpc-page :where(img,svg,video,canvas){max-width:100%}
.xpc-page :where(input,select,textarea){max-width:100%;font:inherit}
.xpc-page textarea{resize:vertical}
.xpc-page :where(code,kbd,samp,.xpc-account-dropdown-head span,.xpc-footer-bottom span){overflow-wrap:anywhere}
.xpc-page main [id]{scroll-margin-top:128px}

/* Controls remain visually stable in loading/disabled states. */
.xpc-page :where(.xpc-btn,button,[role="button"]){touch-action:manipulation}
.xpc-page :where(.xpc-btn,button,input,select,textarea):disabled,
.xpc-page :where(.xpc-btn,button,[role="button"])[aria-disabled="true"]{
  opacity:.55!important;
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:none!important;
}
.xpc-page .xpc-btn{line-height:1.2!important;text-align:center!important;white-space:normal}

/* Header: preserve the established geometry while removing the narrow-desktop squeeze. */
.xpc-header-inner{gap:clamp(10px,1.6vw,28px)!important}
.xpc-header-actions{gap:10px!important}
.xpc-header-search{margin-right:0!important;flex:0 0 auto!important}
.xpc-menu-toggle{flex:0 0 auto!important}
.xpc-header-account{flex:0 1 auto!important}

@media (min-width:921px) and (max-width:1180px){
  .xpc-header-inner{grid-template-columns:minmax(190px,.8fr) minmax(0,1.4fr) minmax(210px,.8fr)!important}
  .xpc-brand{min-width:0!important}
  .xpc-header .xpc-brand img{width:210px!important;max-width:210px!important}
  .xpc-nav{gap:clamp(14px,1.8vw,24px)!important;font-size:11px!important;letter-spacing:.065em!important}
  .xpc-header-actions{width:auto!important;min-width:0!important}
  .xpc-quote-mini{min-width:150px!important;padding:11px 14px!important;font-size:10px!important}
  .xpc-header-account-trigger{min-width:138px!important}
}

/* WordPress admin bar aware fixed mobile shell. */
@media(max-width:920px){
  body.admin-bar .xpc-nav{top:114px!important;height:calc(100dvh - 114px)!important}
  body.admin-bar .xpc-nav-backdrop{inset:114px 0 0!important}
  body.admin-bar .xpc-header-account-dropdown{top:114px!important;max-height:calc(100dvh - 126px)!important}
  .xpc-header-actions{width:auto!important;max-width:calc(100% - 180px)!important}
  .xpc-header-inner{gap:8px!important}
}
@media(max-width:782px){
  body.admin-bar .xpc-nav{top:128px!important;height:calc(100dvh - 128px)!important}
  body.admin-bar .xpc-nav-backdrop{inset:128px 0 0!important}
  body.admin-bar .xpc-header-account-dropdown{top:128px!important;max-height:calc(100dvh - 140px)!important}
}

/* Product Finder: comfortable viewport-safe sheet on small screens. */
@media(max-width:680px){
  .xpc-search-overlay{padding:10px!important}
  .xpc-search-panel{
    width:100%!important;
    height:calc(100dvh - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
    padding:66px 18px 24px!important;
  }
  .xpc-search-close{top:12px!important;right:12px!important;width:44px!important;height:44px!important;font-size:30px!important}
  .xpc-search-head h2{font-size:clamp(32px,10vw,48px)!important}
  .xpc-search-input{font-size:16px!important}
}

/* Forms: avoid iOS input zoom and keep validation text readable without redesigning fields. */
@media(max-width:680px){
  .xpc-page :where(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="password"],input[type="search"],input[type="number"],select,textarea){font-size:16px!important}
  .xpc-form-row{gap:16px!important}
}

/* Customer and admin panels: long identifiers/content must not force horizontal layout expansion. */
.xpc-account-record-list article>* ,
.xpc-profile-detail-grid>* ,
.xpc-account-overview-grid>* ,
#admin-customer-preview .xpc-bulk-order-table td,
.xpc-front-admin-tabs>*{
  min-width:0!important;
}
.xpc-account-record-list :where(strong,span,p,a),
.xpc-profile-detail-grid :where(strong,span,p),
#admin-customer-preview .xpc-bulk-order-table :where(strong,span,a){overflow-wrap:anywhere!important}

/* Footer: preserve information density without forcing five narrow columns at tablet widths. */
@media (min-width:921px) and (max-width:1180px){
  .xpc-footer-grid{grid-template-columns:1.35fr repeat(2,minmax(0,1fr))!important;gap:34px!important}
}
@media (min-width:601px) and (max-width:920px){
  .xpc-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:34px 28px!important}
  .xpc-footer-brand{grid-column:1 / -1!important}
  .xpc-footer-brand p{max-width:620px!important}
}
@media(max-width:600px){
  .xpc-footer-grid{grid-template-columns:1fr!important;gap:30px!important}
  .xpc-footer{padding-top:52px!important}
  .xpc-footer-bottom{margin-top:38px!important;gap:10px!important}
}

/* 404 and CTA controls remain comfortably tappable on narrow screens. */
@media(max-width:560px){
  .xpc-404-actions,.xpc-actions{width:100%!important}
  .xpc-404-actions .xpc-btn,.xpc-actions .xpc-btn{max-width:100%}
}