/* Keep transformed cards inside the visible layout instead of clipping their top edge. */
.product-grid {
  content-visibility: visible;
  overflow: visible;
}

/* Kasir action highlight: consistent with the admin panel, but lighter. */
.button, .category, .admin-link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.button::after, .category::after, .admin-link::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -75%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  transition: left .42s ease;
  pointer-events: none;
}
.button:hover, .category:hover, .admin-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(36,116,201,.14);
}
.button:hover::after, .category:hover::after, .admin-link:hover::after { left: 125%; }
.button:active, .category:active, .admin-link:active { transform: translateY(0); }

/* Match the admin panel's calm typography across the cashier UI. */
body, body * {
  font-weight: 400 !important;
}
.button, .category, .admin-link,
.button *, .category *, .admin-link * {
  font-weight: 500 !important;
}

.buyer-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.buyer-label-row label { margin: 0; }
.buyer-reset {
  border: 1px solid #cfe4fb;
  border-radius: 7px;
  padding: 3px 8px;
  color: #2876c8;
  background: #eef7ff;
  font-size: 10px;
  cursor: pointer;
}
.buyer-reset:hover { background: #dceeff; }

.receipt-dialog {
  width: min(420px, calc(100vw - 28px));
  border: 1px solid #cfe5fb;
  border-radius: 14px;
  padding: 0;
  color: #30455d;
  box-shadow: 0 22px 70px rgba(20, 77, 132, .24);
}
.receipt-dialog::backdrop { background: rgba(18, 52, 86, .35); backdrop-filter: blur(3px); }
.receipt-card { padding: 24px; background: #fff; }
.receipt-card h2 { margin: 8px 0 6px; font-size: 22px; font-weight: 400; }
.receipt-card p { margin: 0; color: #72869d; font-size: 13px; }
.receipt-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 14px; }
.receipt-meta > div { padding: 10px 12px; border: 1px solid #e0eefb; border-radius: 9px; background: #f7fbff; }
.receipt-meta small { display: block; color: #7890a8; font-size: 10px; margin-bottom: 4px; }
.receipt-meta strong { display: block; color: #2d4965; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.receipt-items { display: grid; gap: 7px; max-height: 220px; overflow-y: auto; padding: 2px 0; }
.receipt-items > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #506b85; }
.receipt-items small { color: #8aa0b5; }
.receipt-items strong { color: #2d5f96; font-weight: 500; white-space: nowrap; }
.receipt-total { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 13px; border-top: 1px dashed #cfe2f5; color: #5c7690; font-size: 13px; }
.receipt-total strong { color: #176bc5; font-size: 18px; font-weight: 500; }
.receipt-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }

@media (max-width: 760px) {
  .categories {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
  }
  .categories .category {
    flex: 0 0 auto !important;
    width: max-content;
    white-space: nowrap !important;
  }
}

.product-card {
  position: relative;
  cursor: pointer !important;
  animation: none !important;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 220ms cubic-bezier(.2, .75, .25, 1),
    box-shadow 220ms ease, border-color 220ms ease;
}

.product-card.sold-out {
  cursor: not-allowed !important;
}

.product-card:not(.sold-out):hover {
  z-index: 3;
  animation: none !important;
  transform: perspective(900px) translateY(-6px) rotateX(1.2deg);
  border-color: #76baff;
  box-shadow: 0 18px 28px rgba(24, 105, 194, .16),
    0 3px 0 rgba(255, 255, 255, .9) inset;
}

.product-card:not(.sold-out)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.28), transparent 28%, transparent 72%, rgba(84,170,245,.08));
  opacity: 0;
  transition: opacity 220ms ease;
}

.product-card:not(.sold-out):hover::after {
  opacity: 1;
}

/* Keep every packshot inside a stable media box.  Some source photos have
   large transparent/white margins; allowing them to overflow made the image
   paint over the product name on tablets and desktop. */
.product-image {
  overflow: hidden !important;
  position: relative;
  flex: 0 0 auto;
}
.product-image img {
  display: block;
  object-fit: contain !important;
  object-position: center;
}
.product-name {
  position: relative !important;
  z-index: 1;
  margin-top: 9px !important;
  background: #fff;
}

@media (min-width: 761px) {
  .product-image {
    height: 154px !important;
  }
  .product-name {
    min-height: 35px;
  }
}

/* Mobile cart sheet: only the product list scrolls. Fixed sections remain
   reachable while touch gestures stay inside the sheet instead of leaking to
   the catalogue behind it. */
@media (max-width: 760px) {
  body.cart-open {
    overflow: hidden;
  }

  .cart-panel {
    display: flex !important;
    flex-direction: column;
    height: min(82dvh, 720px) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
  }

  .cart-title-row,
  .buyer-block,
  .cart-summary,
  .cart-actions {
    flex: 0 0 auto;
  }

  .cart-items {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #9acbfa transparent;
    padding-bottom: 8px;
  }

  .cart-item {
    touch-action: pan-y;
  }

  .cart-item button {
    touch-action: manipulation;
  }
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
}

@media (orientation: landscape) and (min-width: 761px) and (max-width: 1100px) {
  .cart-panel {
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
  }

  .cart-empty {
    min-height: 170px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .side-rail {
    height: auto !important;
    position: static !important;
  }

  .cart-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .cart-items {
    max-height: 46vh;
    overflow-y: auto;
  }
}

@media (max-width: 760px) {
  .categories {
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #9acbfa transparent;
  }

  .product-bottom {
    margin-top: 4px;
  }

  .product-card {
    min-height: 0;
  }

  .product-card:not(.sold-out):hover {
    transform: translateY(-3px);
  }
}

@media (min-width: 761px) and (max-width: 1440px) {
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .catalog-panel {
    padding: 16px;
  }

  .product-grid {
    gap: 9px;
  }

  .product-image {
    height: clamp(112px, 17vw, 150px);
  }

  .product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .cart-panel {
    padding: 14px;
  }

  .cart-item {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .cart-item img {
    width: 42px;
    height: 42px;
    max-width: 100%;
  }

  .cart-item-name,
  .cart-item-meta {
    overflow-wrap: anywhere;
  }
}

@media (min-width: 560px) and (max-width: 1024px) and (orientation: portrait) {
  .camera-panel {
    width: 100%;
  }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .product-card {
    min-height: 0;
    padding: 9px;
  }

  .product-image {
    height: 122px;
    overflow: visible;
  }

  .product-image img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    object-fit: contain;
  }

  .product-name {
    font-size: 12px;
    min-height: 33px;
  }

  .product-price {
    font-size: 14px;
  }

  .stock {
    font-size: 9px;
  }
}

/* Tablet portrait override: some browsers expose a wider CSS viewport. */
@media (min-width: 560px) and (max-width: 1400px) and (orientation: portrait) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .product-image {
    height: 190px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }

  .product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    display: block !important;
  }

  .product-name {
    position: relative;
    z-index: 1;
    background: #fff;
    margin-top: 8px !important;
    padding-top: 2px;
  }
}

/* Packshot safety: keep the whole package inside its own media box. */
.product-card .product-image {
  position: relative !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  padding: 7px !important;
  overflow: hidden !important;
  isolation: isolate;
}

.product-card .product-image img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none;
}

.product-card .product-name {
  position: relative !important;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  margin-top: 7px !important;
}

/* Catalog sorting stays compact beside search on desktop and stacks cleanly on mobile. */
.catalog-tools {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 9px;
  width: min(560px, 52%);
}

.catalog-tools .search {
  width: min(320px, 100%);
}

.sort-control {
  display: grid;
  gap: 4px;
  min-width: 154px;
  color: #657b92;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sort-control select {
  width: 100%;
  height: 46px;
  padding: 0 28px 0 11px;
  color: #304b67;
  background: #fff;
  border: 1px solid #cde4ff;
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
}

.sort-control select:focus {
  border-color: #5baaf8;
  box-shadow: 0 0 0 3px rgba(49, 142, 241, .1);
}

@media (max-width: 760px) {
  .catalog-tools {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px;
    align-items: end;
  }

  .catalog-tools .search,
  .sort-control {
    width: 100%;
    min-width: 0;
  }

  .sort-control select {
    height: 43px;
  }
}

@media (max-width: 420px) {
  .catalog-tools {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 560px) and (max-width: 1400px) and (orientation: portrait) {
  .product-image {
    height: 154px !important;
    margin-bottom: 4px !important;
  }
  .product-name {
    margin-top: 6px !important;
  }
}

/* Final packshot safe area. Width/height auto preserves the source ratio on
   desktop, tablet, and mobile, including browsers with unusual grid sizing. */
.product-card .product-image {
  display: grid !important;
  place-items: center !important;
  padding: 8px !important;
  overflow: hidden !important;
}

.product-card .product-image img {
  width: auto !important;
  height: auto !important;
  max-width: 90% !important;
  max-height: 90% !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 760px) {
  .product-card .product-image {
    padding: 5px !important;
  }

  .product-card .product-image img {
    max-width: 92% !important;
    max-height: 92% !important;
  }
}

/* Tall beverage packshots need extra vertical breathing room because several
   source canvases place the bottle very close to the lower edge. */
.product-card .product-image img[src*="/drink-"] {
  max-width: 82% !important;
  max-height: 82% !important;
}

/* Keep product information compact: price follows the name instead of being
   pushed to the bottom of an unnecessarily tall card. */
@media (min-width: 761px) {
  .product-card {
    min-height: 0 !important;
  }

  .product-bottom {
    margin-top: 4px !important;
  }
}

.product-price,
.product-price * {
  font-weight: 700 !important;
}

@media (max-width: 760px) {
  .product-card .product-name {
    display: -webkit-box !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    line-height: 14px !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Cup and pouch noodle source canvases are often cropped tightly around the
   packshot. Keep a wider safe area on desktop/tablet so the top and bottom of
   the packaging remain visible. Mobile already uses a separate compact fit. */
@media (min-width: 761px) {
  .product-card[data-category="Mie"] .product-image img {
    max-width: 80% !important;
    max-height: 80% !important;
  }
}

/* Desktop cart rows stay compact while giving the packshot and primary
   product information enough visual weight. The image spans both content
   rows, removing the unused blank area below it. */
@media (min-width: 761px) {
  .cart-item {
    grid-template-columns: 64px minmax(0, 1fr) auto auto !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    padding: 9px !important;
    height: max-content !important;
  }

  .cart-item > img {
    grid-row: 1 / 3;
    width: 64px !important;
    height: 64px !important;
    align-self: center;
    padding: 3px;
  }

  .cart-item-name {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  .cart-item-meta {
    margin-top: 4px !important;
    font-size: 12px !important;
  }

  .cart-item-price {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  .cart-unit-price,
  .cart-summary strong {
    font-weight: 700 !important;
  }

  .cart-item .quantity {
    grid-column: 2 / 5 !important;
    margin-top: 0 !important;
  }
}