/* Phone layouts use the existing Libanco type, surfaces and controls. */
@media (max-width:760px) {
  .wrap {padding-left:20px;padding-right:20px}
  .top .header-tools {gap:10px;align-items:center}
  .header-tools .language-toggle,.top .phone-button {width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:grid;place-items:center;line-height:1;border-radius:50%;flex-shrink:0}
  .top nav[aria-label="Main navigation"] {gap:24px!important;justify-content:center}
  .top nav[aria-label="Main navigation"] a {min-height:44px;display:inline-flex;align-items:center;font-size:16px!important}
  :is(.product-detail-page,.account-page,.owner-page,.company-page)>.top {background:var(--bg);color:var(--ink)}
  :is(.product-detail-page,.account-page,.owner-page,.company-page) .top>.wrap {padding:0 20px}
  :is(.product-detail-page,.account-page,.owner-page,.company-page) .top header:has(nav[aria-label="Main navigation"]) {display:grid;grid-template-columns:1fr auto;gap:12px;height:auto;border:0;padding:20px 0}
  :is(.product-detail-page,.account-page,.owner-page,.company-page) .top .identity {grid-column:1;grid-row:1}
  :is(.product-detail-page,.account-page,.owner-page,.company-page) .top .libanco-logo {filter:none}
  :is(.product-detail-page,.account-page,.owner-page,.company-page) .top .logo-lockup small {color:var(--muted)}
  body:is(.product-detail-page,.account-page,.owner-page,.company-page) .top .header-tools {position:static;grid-column:2;grid-row:1}
  :is(.product-detail-page,.account-page,.owner-page,.company-page) .top .header-tools>* {background:white;color:var(--ink);border-color:var(--line)}
  body:is(.product-detail-page,.account-page,.owner-page,.company-page) .top nav[aria-label="Main navigation"] {grid-column:1/-1;grid-row:2;margin:0;padding:0;width:100%}
  :is(.product-detail-page,.account-page,.owner-page,.company-page) .top nav a {position:relative;background:transparent!important;color:var(--ink);border:0;border-radius:0;padding:12px 4px}
  :is(.product-detail-page,.account-page,.owner-page,.company-page) .top nav a:after {content:'';position:absolute;left:4px;right:4px;bottom:7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 220ms ease-out}
  :is(.product-detail-page,.account-page,.owner-page,.company-page) .top nav a:is(:hover,:focus-visible):after {transform:scaleX(1)}
  .homepage .trade-hero {min-height:300px}
  .homepage .top header {padding-top:20px;gap:12px}
  .homepage .trade-intro {padding-top:28px;padding-bottom:24px;gap:16px}
  .homepage .trade-intro h2 {font-size:28px;line-height:1.2}
  .homepage .trade-intro p {font-size:16px;line-height:1.65}
  .section-title {gap:16px;align-items:center}
  .section-title h2 {font-size:23px}
  .section-title a {min-height:44px;display:flex;align-items:center;flex-shrink:0}
  .home-next a,.trade-account .primary {width:100%;min-height:48px}
  .signin-page .top header:has(nav[aria-label="Main navigation"]) {grid-template-columns:1fr auto;gap:12px;height:72px}
  .signin-page .top nav[aria-label="Main navigation"] {grid-column:1;gap:18px!important}
  .signin-page .header-tools {grid-column:2}
  .signin-page .login-page {padding-top:12px}
  .login-card {padding:26px 22px}
  .login-help,.login-catalog-link {min-height:44px;display:flex;align-items:center;justify-content:center}
  .signup-page .register-page {padding:8px 16px 28px}
  .signup-page .register-card {padding:26px 20px}
  .signup-page .register-card form label {font-size:14px}
  .signup-page .register-card input,.signup-page .register-card textarea {font-size:16px}
  #register-form .register-fields,#register-form .business-fields .register-fields {grid-template-columns:1fr;gap:18px}
  .delivery-notes summary {min-height:44px;display:flex;align-items:center}
  .delivery-notes summary:before {content:'+';margin-right:8px;font-size:20px}
  .delivery-notes[open] summary:before {content:'−'}
  .confirmation-card {padding:28px 22px}
  .confirmation-actions {gap:12px}
  .catalog-page .portal-head {padding-top:12px;padding-bottom:20px}
  .portal-head h1 {font-size:28px;line-height:1.2}
  .portal-head p {font-size:14px;line-height:1.6}
  .portal-head .search {margin-top:16px;min-height:48px}
  .portal-head .search input {font-size:16px;min-width:0}
  .portal .categories {margin:0 -20px 12px;padding:0 20px 8px;scroll-padding:20px;scrollbar-width:none}
  .portal .categories .category {min-height:44px;font-size:14px;padding:10px 16px}
  .portal .categories .category span {font-size:12px}
  .portal .results-bar {gap:12px;flex-wrap:wrap;font-size:14px;margin-bottom:16px}
  .results-bar select {min-height:44px;font-size:14px;max-width:180px}
  .portal .grid {grid-template-columns:minmax(0,1fr);gap:16px}
  .portal .product {display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:16px;align-content:start;padding:16px;background:var(--surface);border-radius:12px}
  .portal .product-view {grid-column:1;grid-row:1/5;align-self:center}
  .portal .product .photo {height:124px;margin:0;border-radius:8px}
  .portal .product .photo img {height:110px;width:100%;max-width:94%;object-fit:contain}
  .portal .product .brand {grid-column:2;margin:0 0 4px;font-size:11px;line-height:1.4}
  .portal .product h3 {grid-column:2;font-size:16px;line-height:1.4;min-height:0;margin:0 0 8px}
  .portal .product .details {grid-column:2;margin:0;align-self:end;gap:10px;flex-wrap:wrap}
  .portal .product .size {font-size:14px}
  .portal .product .price {font-size:20px}
  .portal .product .barcode {grid-column:2;margin:4px 0 0;font-size:11px;overflow-wrap:anywhere}
  .portal .product .order-control {grid-column:1/-1;display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;margin:16px 0 0}
  .order-control .quantity-stepper {grid-template-columns:44px minmax(0,1fr) 44px;height:48px}
  .quantity-stepper input {font-size:16px!important;text-align:center}
  .order-control .quantity-stepper button {height:46px}
  .order-control>button {font-size:14px;min-height:48px;white-space:normal;padding:8px 12px;border-radius:8px}
  .mobile-order-nav {gap:12px;padding:10px 20px calc(10px + env(safe-area-inset-bottom));align-items:center}
  .mobile-order-nav a {min-height:48px;display:flex;align-items:center;font-size:14px}
  .mobile-order-nav #mobile-basket {min-height:48px;font-size:14px;flex:1;border-radius:8px}
  body:has(.mobile-order-nav) {padding-bottom:88px}
  .basket-item {grid-template-columns:44px minmax(0,1fr);gap:14px}
  .basket-item img {width:44px;height:60px}
  .basket-item h3 {font-size:15px;line-height:1.4}
  .basket-item p {font-size:13px}
  .basket-quantity {flex-wrap:wrap;gap:12px}
  .basket-quantity button {min-width:44px;min-height:44px}
  #portal-dialog {max-height:calc(100dvh - 32px);width:calc(100% - 32px);padding:24px;overflow:auto}
  #portal-dialog .primary {width:100%;margin-top:12px;min-height:48px}
  .review-lines li {gap:16px;align-items:start}
  .review-lines li span {min-width:0}
  .review-lines li strong {white-space:nowrap}
  #mobile-basket-sheet {position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:88dvh;padding:0;border-radius:18px 18px 0 0;overflow:auto;color:var(--ink)}
  #mobile-basket-sheet::backdrop {background:rgb(0 0 0 / .45)}
  .basket-sheet-header {position:sticky;top:0;background:var(--surface);display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);z-index:1}
  .basket-sheet-header h2 {font-size:20px;margin:0}
  .basket-sheet-header button {width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:22px;color:var(--ink)}
  #mobile-basket-sheet .basket {position:static;margin:0;padding:20px 20px calc(24px + env(safe-area-inset-bottom));border-radius:0;max-height:none}
  #mobile-basket-sheet .basket-title h2 {display:none}
  body:has(dialog[open]) {overflow:hidden}
  .product-page {padding-top:12px}
  .breadcrumbs {flex-wrap:wrap;gap:8px;font-size:13px}
  .product-page-grid {gap:24px}
  .product-stage {height:240px;padding:20px}
  .product-stage img {height:200px;max-width:100%}
  .product-info {display:flex;flex-direction:column}
  .product-info>.brand,.product-info>h1,.product-info>.product-size,.product-info>.product-pricing {order:0}
  .product-info>.product-purchase {order:1;margin-top:20px}
  .product-info>.product-description {order:2;margin:20px 0 0}
  .product-info>.product-specs {order:3}
  .product-info h1 {font-size:28px}
  .product-size {margin-bottom:12px;font-size:16px}
  .purchase-row {grid-template-columns:132px minmax(0,1fr)}
  .purchase-row .quantity-stepper {grid-template-columns:44px minmax(0,1fr) 44px}
  .product-purchase .text-link {display:inline-flex;align-items:center;min-height:44px}
  .product-purchase #detail-feedback:empty {display:none}
  .app-title {align-items:center;gap:12px;margin-bottom:20px}
  .app-title h1 {font-size:28px;margin:0}
  .app-title p {font-size:14px;line-height:1.6;margin:10px 0 0}
  .owner-page .app-title {flex-wrap:wrap}
  .owner-page .app-title>div {flex:1 1 220px}
  .owner-tabs {gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:12px}
  .owner-tabs button {flex:1;min-height:48px;font-size:15px;padding:10px 12px;white-space:nowrap}
  .app-main input:not([type=checkbox]),.app-main textarea,.app-main select {font-size:16px;min-width:0;max-width:100%}
  .owner-search input {width:100%;min-height:48px}
  .inventory-row {gap:14px;padding:16px 0}
  .inventory-row img {width:54px;height:64px;flex-shrink:0}
  .inventory-row>span:nth-child(2) {min-width:0;overflow-wrap:anywhere}
  .inventory-row small {line-height:1.6}
  .inventory-row>span:last-child {flex-shrink:0}
  .customer-row .actions {flex-wrap:wrap}
  .customer-row .status-tag {margin-bottom:12px}
  .customer-row .actions>* {flex:1;min-height:48px}
  .account-summary {padding:12px 0 28px}
  .account-summary p,.customer-row p,.order-record p {overflow-wrap:anywhere;font-size:15px;line-height:1.65}
  .order-record ul {list-style:none;padding:0}
  .order-record li {display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between}
  .order-record li strong {margin-left:0;white-space:nowrap}
  .app-main #product-editor {max-height:calc(100dvh - 24px);width:calc(100% - 24px);padding:0 20px 24px}
  .editor-heading {position:sticky;top:0;background:var(--surface);z-index:1;padding:16px 0;gap:12px}
  .editor-heading h2 {margin:0;font-size:23px}
  #product-form button[type=submit] {width:100%}
  #product-form input[type=file] {padding:8px;font-size:14px}
  .support-main {padding-top:20px}
  .support-intro .back-link {min-height:44px;align-items:center;margin-bottom:16px}
  .support-account {display:inline-flex;align-items:center;min-height:44px}
  .support-lead {margin-bottom:12px}
  .support-method strong {font-size:18px}
  .support-questions summary {min-height:48px}
  .footer-grid {grid-template-columns:1fr 1fr;gap:28px 20px}
  .footer-grid>div:first-child {grid-column:1/-1}
  .footer-grid>div:last-child {grid-column:1/-1}
  .footer-grid a:not(.logo) {font-size:14px;min-height:44px;display:inline-flex;align-items:center;line-height:1.5}
  .footer-grid>div:not(:first-child)>a {display:flex;margin:0}
  .footer-grid h3 {font-size:15px;margin-bottom:8px}
  .footer-bottom {flex-direction:column;gap:8px;line-height:1.6}
}
/* Landscape phones and small tablets keep ordering out of cramped columns. */
@media (min-width:761px) and (max-width:1100px) {
  .portal-layout {display:block}
  .portal .grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .portal .side h3,.portal .side-note,.portal .side .account-links {display:none}
  .portal .categories {flex-direction:row;overflow:auto;padding-bottom:16px;margin-bottom:16px}
  .portal .category {white-space:nowrap;gap:12px;min-height:44px}
  .mobile-order-nav {display:flex;position:fixed;bottom:0;left:0;right:0;z-index:10;gap:20px;align-items:center;background:var(--surface);border-top:1px solid var(--line);padding:10px 24px calc(10px + env(safe-area-inset-bottom))}
  .mobile-order-nav>* {min-height:48px;font-size:16px}
  .mobile-order-nav a {display:flex;align-items:center}
  #mobile-basket {flex:1;background:var(--ink);color:var(--surface);border:0;border-radius:8px;padding:12px}
  body:has(.mobile-order-nav) {padding-bottom:88px}
  #mobile-basket-sheet {position:fixed;inset:auto 0 0;margin:0 auto;width:min(640px,100%);max-width:none;max-height:88dvh;padding:0;border-radius:18px 18px 0 0;overflow:auto}
  #mobile-basket-sheet::backdrop {background:rgb(0 0 0 / .45)}
  .basket-sheet-header {position:sticky;top:0;background:var(--surface);display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid var(--line);z-index:1}
  .basket-sheet-header h2 {margin:0;font-size:22px}
  .basket-sheet-header button {width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:22px}
  #mobile-basket-sheet .basket {position:static;margin:0;padding:24px;border-radius:0;max-height:none}
  #mobile-basket-sheet .basket-title h2 {display:none}
  .basket-quantity button {min-width:44px;min-height:44px}
  body:has(dialog[open]) {overflow:hidden}
}
@media(max-width:360px) {
  .wrap {padding-left:16px;padding-right:16px}
  .top .libanco-logo {width:130px}
  .top nav[aria-label="Main navigation"] {gap:20px!important}
  .signin-page .top nav[aria-label="Main navigation"] {gap:8px!important}
  .signin-page .top nav[aria-label="Main navigation"] a {font-size:14px!important}
  .portal .product {grid-template-columns:80px minmax(0,1fr);gap:0 12px;padding:14px}
  .portal .product .photo {height:110px}
  .portal .product .photo img {height:98px}
  .portal .product .order-control {grid-template-columns:126px minmax(0,1fr);gap:8px}
  .portal .categories {margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  body:has(.mobile-order-nav) {padding-bottom:110px}
  .order-control .quantity-stepper {grid-template-columns:42px minmax(0,1fr) 42px}
  .support-panel {padding:4px 16px}
  .support-method {gap:10px;grid-template-columns:32px minmax(0,1fr) 12px}
  .support-method strong {font-size:16px}
}
@media(prefers-reduced-motion:reduce) {.top nav a:after {transition:none!important}}
.auth-home-back {display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);flex-shrink:0}
.auth-home-back svg {width:20px;height:20px}
.auth-home-back:hover {background:var(--bg)}
.signin-page .auth-home-back {grid-column:1;grid-row:1;justify-self:start}
.signup-page .auth-home-back {margin-right:auto}
@media(max-width:760px) {
  .signin-page .top header:has(.auth-home-back) {grid-template-columns:44px minmax(0,1fr) 44px;height:auto;min-height:112px;padding:12px 0!important;gap:4px 12px}
  .signin-page .top header:has(.auth-home-back) .header-tools {grid-column:3;grid-row:1}
  .signin-page .top header:has(.auth-home-back) nav[aria-label="Main navigation"] {grid-column:1/-1;grid-row:2;width:100%;gap:24px!important}
}