/* Shared mobile navigation and full-bleed horizontal rails. */
@media (max-width:768px) {
  .reference-brand-row {grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
  .reference-brand-row .logo {justify-self:center}
  .reference-brand-row .logo img {width:230px}
  .reference-tools {display:flex;justify-content:center}
  .reference-tools>a[href="/search"] {display:none}
  .reference-tools>a[href="/cart"] {display:flex;align-items:center;justify-content:center;width:44px;height:44px;position:relative}
  .reference-tools>a .icon {width:22px;height:22px}
  .reference-tools #header-cart-count {right:0;top:0}
  .reference-header .mobile-menu-button {width:44px;height:44px;border-radius:0;background:transparent}
  .mobile-menu-button[aria-expanded="true"] svg {display:none}
  .mobile-menu-button[aria-expanded="true"]:before,.mobile-menu-button[aria-expanded="true"]:after {content:"";position:absolute;width:22px;height:1.5px;background:currentColor;transform:rotate(45deg)}
  .mobile-menu-button[aria-expanded="true"]:after {transform:rotate(-45deg)}
  body.mobile-menu-open {position:fixed;left:0;right:0;overflow:hidden}
  .mobile-menu-open .reference-header {position:fixed;top:0;left:0;width:100%;height:80px;z-index:400;background:#faf9f6}
  .mobile-menu-open .reference-main-nav {visibility:hidden}
  .reference-header .mobile-navigation.is-open {position:fixed;inset:80px 0 0;display:flex;flex-direction:column;gap:0;padding:24px 20px max(32px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:#faf9f6;box-shadow:none;border-top:1px solid #e4dfd6}
  .mobile-search {display:flex;align-items:center;flex-shrink:0;background:#eeebe5;border-radius:8px;margin-bottom:24px}
  .mobile-search input {width:100%;min-width:0;border:0;background:transparent;padding:16px;font:16px Inter,sans-serif;color:#30302d}
  .mobile-search button {display:grid;place-items:center;flex-shrink:0;width:48px;height:52px;border:0;background:transparent;color:#30302d;cursor:pointer}
  .mobile-menu-primary {display:grid}
  .mobile-menu-primary a {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid #ddd7cd;font-family:Montserrat,sans-serif;font-size:20px;line-height:1.4;letter-spacing:-.03em}
  .mobile-menu-primary .icon {flex-shrink:0;color:#857963}
  .mobile-menu-secondary {display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:0;padding:24px 0}
  .mobile-menu-secondary a {font-size:13px;padding:12px 0;color:#686256}
  .mobile-menu-contact {margin-top:auto;padding-top:24px;border-top:1px solid #ddd7cd;display:grid;gap:16px}
  .mobile-menu-contact>span {font-size:13px;color:#777064}
  .mobile-menu-contact .btn {width:100%;padding:16px 24px;min-height:52px}
  .reference-main-nav,.material-tabs,.collection-index-nav,.menu-categories {
    width:calc(100% + 2 * var(--container-pad));max-width:none;
    margin-left:calc(-1 * var(--container-pad));margin-right:calc(-1 * var(--container-pad));
    padding-left:var(--container-pad);padding-right:var(--container-pad);
    overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--container-pad);scroll-snap-type:x proximity;
    border-radius:0;justify-content:flex-start;
  }
  .reference-main-nav::-webkit-scrollbar,.material-tabs::-webkit-scrollbar,.collection-index-nav::-webkit-scrollbar,.menu-categories::-webkit-scrollbar {display:none}
  .reference-main-nav>*,.material-tabs>*,.collection-index-nav>*,.menu-categories>* {flex-shrink:0;scroll-snap-align:start}
  .reference-main-nav>:last-child,.material-tabs>:last-child,.collection-index-nav>:last-child,.menu-categories>:last-child {scroll-snap-align:end}
  .material-tabs {background:transparent}
}

/* Consultation dialog uses the same restrained typography as the pages. */
#modal-callback {height:100dvh;background:#24232080;backdrop-filter:blur(5px);padding:20px}
#modal-callback .modal-card {max-width:520px;padding:48px;border:0;border-radius:12px;box-shadow:0 24px 80px #17171530;max-height:calc(100dvh - 40px)}
#modal-callback .modal-close {top:16px;right:16px;width:44px;height:44px;display:grid;place-items:center;color:#686258}
#modal-callback .modal-close:hover {background:#ede9e2;color:#30302e}
#modal-callback .modal-close:focus-visible {outline:2px solid #a3947c;outline-offset:2px}
.callback-eyebrow {display:block;margin:8px 32px 20px 0;font:13px Inter,sans-serif;letter-spacing:.09em;color:#8c7d67}
#modal-callback h2 {font-family:Montserrat,sans-serif;font-weight:400;font-size:31px;line-height:1.2;letter-spacing:-.04em;margin:0 0 16px;color:#30302e}
#modal-callback #callback-description {font:16px/1.6 Inter,sans-serif;color:#797268;margin:0 0 32px}
#modal-callback .form-group {margin:0 0 20px}
#modal-callback .form-label {font:13px/1.5 Inter,sans-serif;text-transform:none;letter-spacing:0;margin-bottom:8px;color:#625c53}
#modal-callback .form-input,#modal-callback .form-select {appearance:none;-webkit-appearance:none;display:block;width:100%;height:54px;min-height:54px;padding:14px 16px;border:1px solid #d5cec2;background:#faf9f6;border-radius:6px;font:16px/1.4 Inter,sans-serif;color:#30302e;box-shadow:none}
#modal-callback input::placeholder {color:#9b9489;opacity:1}
#modal-callback .form-select {padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c6356' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
#modal-callback .form-input:focus,#modal-callback .form-select:focus {border-color:#95836a;outline:2px solid #95836a33;outline-offset:2px}
#modal-callback .btn,.mobile-menu-contact .btn {background:#30302e;border:1px solid #30302e;color:#fff;box-shadow:none}
#modal-callback .btn:hover,.mobile-menu-contact .btn:hover {background:#49443d;border-color:#49443d;color:#fff}
#modal-callback .btn {margin-top:8px;padding:16px 24px;min-height:54px;display:flex;justify-content:center;align-items:center;gap:16px;font:13px/1.5 Inter,sans-serif}
@media(max-width:768px) {
 #modal-callback {padding:16px}
 #modal-callback .modal-card {padding:40px 24px 28px;max-height:calc(100dvh - 32px)}
 #modal-callback h2 {font-size:25px;max-width:280px}
 #modal-callback #callback-description {font-size:13px;line-height:1.7;margin-bottom:28px}
 .callback-eyebrow {font-size:13px;letter-spacing:.04em;margin:8px 24px 20px 0}
}