/* Keep text and controls comfortable to read on small screens across every workspace. */
@media (max-width: 760px) {
  html {
    font-size: 17px;
    -webkit-text-size-adjust: 112%;
    text-size-adjust: 112%;
  }

  body {
    font-size: 17px;
  }
}

/* Final, shared select theme for storefront, staff, admin and POS screens. */
select:not([multiple]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: 44px;
  padding: 10px 42px 10px 13px !important;
  border: 1px solid #d8d5d1 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: right 13px center !important;
  background-size: 17px 17px !important;
  background-repeat: no-repeat !important;
  color: #111 !important;
  font: inherit;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
select[multiple] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  min-height: 88px;
  padding: 6px 8px !important;
  border: 1px solid #d8d5d1 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111 !important;
  font: inherit;
}
select:not([multiple]):hover:not(:disabled),select[multiple]:hover:not(:disabled) { border-color: #777 !important; }
select:not([multiple]):focus-visible,select[multiple]:focus-visible { border-color: #111 !important; outline: 2px solid #111 !important; outline-offset: 2px !important; box-shadow: 0 0 0 3px rgba(17,17,17,.08) !important; }
select:disabled { background-color: #f4f3f1 !important; color: #777 !important; cursor: not-allowed; }
select option { background-color: #fff; color: #111; }
select option:checked { background-color: #111; color: #fff; }
select option:disabled { color: #888; }
@media(prefers-reduced-motion:reduce) { select { transition: none !important; } }

/* POS product tiles keep the same softly squared card shape as the catalog. */
body.pos-body .pos-product {
  border-radius: 14px !important;
  border-color: #e6e3df;
  box-shadow: 0 3px 12px rgba(17,17,17,.035);
}
body.pos-body .pos-product:hover,
body.pos-body .pos-product:focus-visible {
  border-color: #111;
  box-shadow: 0 8px 20px rgba(17,17,17,.1);
}
body.pos-body .pos-product-image { border-radius: 10px; }
body.pos-body .pos-product-image.is-image-missing {
  background: linear-gradient(145deg,#f7f6f4,#eeece9);
  color: #777;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (max-width: 680px) {
  body.pos-body .pos-product {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    min-height: 220px;
    height: 100%;
    overflow: hidden;
    padding: 8px !important;
    gap: 6px !important;
    text-align: left;
  }
  body.pos-body .pos-product-image {
    display: grid !important;
    flex: 0 0 88px;
    width: 100%;
    height: 88px !important;
    min-width: 0;
    background: #f3f2f0;
  }
  body.pos-body .pos-product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  body.pos-body .pos-product strong,
  body.pos-body .pos-product small {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  body.pos-body .pos-product strong {
    display: -webkit-box;
    min-height: 2.6em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3;
  }
  body.pos-body .pos-product small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.2;
  }
  body.pos-body .pos-product > small:last-child { -webkit-line-clamp: 1; white-space: nowrap; }
  body.pos-body .pos-product > span:last-of-type { white-space: nowrap; }
  body.pos-body .pos-top nav {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  body.pos-body .pos-top nav::-webkit-scrollbar { display: none; }
  body.pos-body .pos-top nav a,
  body.pos-body .pos-top nav button { flex: 0 0 auto; white-space: nowrap; }
}

/* Ask native date pickers to use a dark calendar while keeping the fields light. */
input[type="date"], input[type="datetime-local"] {
  color-scheme: dark;
  accent-color: #fff;
  background-color: #fff !important;
  color: #111 !important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: brightness(0);
  opacity: .82;
  cursor: pointer;
}

/* Use the customizable native picker where available so the open menu follows the site theme too. */
@supports (appearance: base-select) {
  select:not([multiple]) {
    appearance: base-select !important;
    -webkit-appearance: base-select !important;
    padding-right: 13px !important;
    background-image: none !important;
  }
  select:not([multiple])::picker(select) {
    appearance: base-select;
    max-height: 18rem;
    overflow-y: auto;
    margin-block: 5px;
    padding: 5px;
    border: 1px solid #d8d5d1;
    border-radius: 8px;
    background: #fff;
    color: #111;
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
  }
  select:not([multiple])::picker-icon {
    color: #111;
    transition: transform 180ms ease;
  }
  select:not([multiple]):open::picker-icon { transform: rotate(180deg); }
  select:not([multiple]) option {
    min-height: 38px;
    padding: 9px 11px;
    border-radius: 5px;
    background: #fff;
    color: #111;
  }
  select:not([multiple]) option:hover,
  select:not([multiple]) option:focus {
    background: #111;
    color: #fff;
  }
  select:not([multiple]) option:checked {
    background: #111;
    color: #fff;
  }
  select:not([multiple]) option::checkmark { color: #111; }
  select:not([multiple]) option:checked::checkmark { color: #fff; }
}

/* Keep the signed-out notice clear and ensure its hidden state can dismiss it. */
.public-flash-toast[data-flash-type=success]{display:flex;align-items:center;min-height:48px;padding:10px 48px 10px 15px!important;border:1px solid #dedbd7!important;border-radius:12px!important;background:#fff!important;color:#111!important;box-shadow:0 12px 30px rgba(0,0,0,.14)!important;font:500 13px/1.45 Poppins,sans-serif!important}
.public-flash-toast[data-flash-type=success]::before{content:none!important}
.public-flash-toast[data-flash-type=success]>button{position:absolute;top:50%;right:8px;display:grid;width:30px;height:30px;place-items:center;padding:0;border:1px solid #e7e4df;border-radius:50%;background:#f7f6f4;color:#111;font-size:18px;line-height:1;transform:translateY(-50%)}
.public-flash-toast[data-flash-type=success]>button:hover{background:#eeece8}
.public-flash-toast[hidden]{display:none!important}
@media(max-width:900px){.public-mobile-menu>button[data-public-login-open]{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:52px!important;margin:auto 0 0!important;padding:0 16px!important;border:1px solid #111!important;border-radius:999px!important;background:#111!important;color:#fff!important;text-align:center!important;font-size:13px!important;font-weight:600!important;letter-spacing:.01em;line-height:1.3;white-space:nowrap}.public-mobile-menu>button[data-public-login-open]:hover{background:#292929!important;color:#fff!important}.public-mobile-menu>button[data-public-login-open]:focus-visible{outline:2px solid #111;outline-offset:3px}}
.public-flash-toast[data-flash-type=success]>button{box-sizing:border-box!important;flex:0 0 30px!important;width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;min-height:30px!important;max-height:30px!important;aspect-ratio:1/1;border-radius:50%!important;padding:0!important}