/* Danh mục sản phẩm: lưới thẻ, trang tìm, trang chi tiết. Lấy từ prototype/shop.css và web-shop.css. */

/* Lưới theo bề rộng khối chứa, không theo màn: năm cột ở trang mua sắm, bốn cột cạnh cột lọc. */
.pgrid-wrap {
  container-type: inline-size;
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
}

@container (min-width: 560px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (min-width: 760px) {
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container (min-width: 960px) {
  .pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Thẻ theo Shop và Instacart trên Mobbin: ảnh trong khung có viền mảnh, giá là số chính,
   tiền hoàn ước tính là nhãn hổ phách nhỏ hơn ngay dưới (luật 4 ở tokens.css). */
.pcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: start;
  gap: var(--sp-1);
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.pcard:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.pcard:active {
  transform: scale(0.98);
}

.pcard__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: var(--sp-2);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-raise);
  transition: box-shadow var(--duration-normal) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo);
}

/* Viền mảnh vẽ đè lên ảnh, để ảnh nền trắng không tan vào trang. */
.pcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-hair);
  border-radius: inherit;
  pointer-events: none;
}

.pcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease-out-expo);
}

.pcard:hover .pcard__media {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.pcard:hover .pcard__img {
  transform: scale(1.04);
}

.pcard__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.4em);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--ink-2);
}

.pcard:hover .pcard__name {
  color: var(--ink);
}

/* Giá và tiền hoàn chung một dòng. Cột hẹp không đủ chỗ thì nhãn hoàn xuống dòng dưới. */
.pcard__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
}

.pcard__price {
  font-size: var(--text-base);
}

.pcard__back {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--pending-soft);
  color: oklch(45% 0.11 62);
  font-size: var(--text-micro);
  font-weight: 600;
}

.pcard__back .money {
  font-size: var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
  .pcard,
  .pcard__media,
  .pcard__img {
    transition: none;
  }

  .pcard:hover .pcard__media,
  .pcard:hover .pcard__img {
    transform: none;
  }
}

.catalog-block {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.catalog-block[hidden] {
  display: none;
}

.catalog-block .section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: 0;
}

.catalog-block .section-head h2 {
  font-size: var(--text-xl);
}

/* Trang tìm: cột lọc bên trái, lưới bên phải. Màn hẹp thì cột lọc gập vào một dòng bấm mở. */
.results {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-5);
}

/* Đầu kết quả: số sản phẩm bên trái, hàng chip bên phải. Màn hẹp xếp chồng. */
.results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}

/* Hàng chip: Lọc và lọc đang chọn (chỉ màn hẹp), rồi sắp xếp. */
.results__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.results__sort {
  display: flex;
  gap: var(--sp-2);
  margin-left: auto;
}

.filters__body {
  display: grid;
  gap: var(--sp-5);
}

.filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip--filter,
.chip--active {
  display: none;
  align-items: center;
  gap: var(--sp-1);
}

.results__bar svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.chip--active {
  border-color: var(--ink);
  color: var(--ink);
}

/* Bảng lọc trượt từ đáy lên, nút chính nói rõ bao nhiêu kết quả. */
.sheet {
  width: min(100%, 32rem);
  max-height: 85dvh;
  padding: var(--sp-5);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.sheet[open] {
  display: grid;
  gap: var(--sp-5);
}

.sheet::backdrop {
  background: var(--scrim);
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet__head h2 {
  font-size: var(--text-xl);
}

.sheet__close {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  margin: calc(-1 * var(--sp-3));
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}

.sheet__close svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.sheet__foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
}

@media (max-width: 900px) {
  .results > .filters {
    display: none;
  }

  .chip--filter,
  .chip--active {
    display: inline-flex;
  }

  /* Một hàng cuộn ngang, không xuống dòng đẩy lưới xuống. */
  .results__head {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .results__bar {
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--shop-gutter, var(--sp-4)));
    padding-inline: var(--shop-gutter, var(--sp-4));
  }

  .results__bar > *,
  .results__sort > * {
    flex-shrink: 0;
  }

  .results__sort {
    margin-left: var(--sp-2);
    padding-left: var(--sp-3);
    border-left: 1px solid var(--line);
  }

  .sheet {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .sheet[open] {
    animation: sheet-up var(--duration-normal) var(--ease-out-expo);
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.pager a:only-child[rel="next"] {
  margin-left: auto;
}

.no-results {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}

.no-results p {
  max-width: 56ch;
  color: var(--ink-2);
}

/* Chi tiết sản phẩm: ảnh trái, thông tin phải. */
.crumbs {
  margin-bottom: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.crumbs a {
  color: var(--ink-2);
}

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp-8);
  align-items: start;
}

.pdp__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}

.pdp__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.pdp__name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pdp__meta {
  margin-top: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.pdp__price {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pdp__buy {
  display: grid;
  gap: var(--sp-2);
}

.pdp__info .btn {
  width: 100%;
  min-height: var(--touch);
}

.pdp__watch {
  display: grid;
  gap: var(--sp-2);
}

.pdp__note {
  font-size: var(--text-sm);
  color: var(--ink-3);
  text-align: center;
}

/* Đầu trang: tên và shop, giá. Có ảnh thì xếp dọc cạnh ảnh. */
.pdp__head {
  display: grid;
  gap: var(--sp-4);
}

/* Món không ảnh, gồm mọi món người dùng dán link (#108): một cột, đầu trang đọc như một dòng sao
   kê, tên bên trái, giá bên phải, kẻ một vạch dưới. */
.pdp--plain {
  grid-template-columns: minmax(0, 40rem);
  justify-content: center;
}

/* Mở từ link dán: dòng nguồn thay breadcrumb, link rút gọn một dòng, nút dán link khác (#106). */
.crumbs--source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
}

.crumbs__link {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
}

.crumbs__action {
  /* Vùng bấm cao 44px mà không đẩy dòng chữ: đệm trên dưới rồi kéo lại bằng margin âm. */
  padding: 12px 0;
  margin-block: -12px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.crumbs__action:hover {
  color: var(--brand-hover);
}

.crumbs:has(+ .pdp--plain) {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

.pdp--plain .pdp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

/* Tên dài hay màn hẹp thì giá xuống dòng thay vì ép tên thành cột hẹp. */
.pdp--plain .pdp__head > div {
  flex: 1 1 14rem;
}

.pdp--plain .pdp__price {
  flex: none;
  font-size: var(--text-2xl);
}

/* Nút chính chiếm phần lớn, nút phụ "Mua trên điện thoại" vừa chữ. */
.pdp__actions {
  display: flex;
  gap: var(--sp-2);
}

.pdp__actions .btn--primary {
  flex: 1;
}

.pdp__info .pdp__actions .btn--ghost,
.pdp .link-share .btn,
.pdp .link-qr .btn {
  width: auto;
}

.pdp .link-share {
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
}

.link-share__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

/* Nút chữ "Lấy link cho đơn khác" trong dòng ghi chú dưới nút mở lại. */
.pdp__again {
  /* Vùng bấm cao 44px mà không đẩy dòng chữ: đệm trên dưới rồi kéo lại bằng margin âm. */
  padding: 12px 0;
  margin-block: -12px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Chép tự động hỏng: ô chứa link để chép tay. */
.link-share__manual {
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-inner);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
}

.link-share__status {
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.link-share__status:empty {
  display: none;
}

/* QR sau nút "Mua trên điện thoại". Nền trắng thật và viền mảnh để máy quét thấy vùng trắng. */
.pdp .link-qr {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.pdp .link-qr__code {
  flex: none;
  background: oklch(100% 0 0);
}

.pdp .link-qr__side {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.pdp .link-qr__title {
  font-size: var(--text-base);
  color: var(--ink);
}

.pdp .link-qr .link-share {
  justify-items: start;
}

.cashback-box--void {
  background: var(--paper-2);
}

.pdp__cashback {
  display: none;
}

@media (max-width: 900px) {
  .results,
  .pdp {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  /* Một cột: ảnh không cao quá, để tiền hoàn và nút mua còn trong màn đầu. Màn hẹp thì thanh mua
     dính đáy không trượt lên quá đầu khối thông tin, nên giới hạn này càng cần. */
  .pdp__img {
    max-height: 36dvh;
    object-fit: contain;
  }
}

/* Màn hẹp: tên món nhỏ lại, nút mua dính ở đáy ngay trên tab bar, mẫu Uber Eats và Alan. */
@media (max-width: 760px) {
  .pdp__name {
    font-size: var(--text-xl);
  }

  /* Số tiền hoàn chuyển vào thanh mua dính đáy, để luôn nằm ngay trên nút dù tên món dài. */
  .pdp__info > .cashback-box:not(.cashback-box--void) {
    display: none;
  }

  .pdp__cashback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    color: var(--ink-2);
  }

  .pdp__cashback .money {
    margin-left: var(--sp-1);
    font-size: var(--text-xl);
  }

  .pdp__cashback > :last-child {
    max-width: 14ch;
    font-size: var(--text-micro);
    text-align: right;
  }



  .pdp__buy {
    position: sticky;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 5;
    margin-inline: calc(-1 * var(--shop-gutter));
    padding: var(--sp-3) var(--shop-gutter);
    border-top: 1px solid var(--line);
    background: var(--surface);
  }

  .shop:not(:has(.site-nav--tabs)) .pdp__buy {
    bottom: env(safe-area-inset-bottom);
  }
}


/* Lưới sản phẩm của trang mua sắm: cột tối thiểu 200px như prototype, màn hẹp vẫn hai cột. */
.site-main .pgrid {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 40vw), 1fr));
}

/* Cột lọc như prototype: tiêu đề đậm, lựa chọn xếp dọc. Dòng "Bộ lọc" chỉ có trên màn hẹp. */
.filters h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 700;
}





.site-main .crumbs {
  margin-bottom: calc(var(--sp-5) * -0.5);
}


/* Dải ba bước cho người mới ở đầu trang mua sắm. Màn hẹp: lướt ngang từng bước. */
.howto {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
}

.howto__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.howto__head h2 {
  font-size: var(--text-lg);
}

.howto__close {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}

.howto__close:hover {
  background: oklch(100% 0 0 / 0.6);
  color: var(--ink);
}

.howto__close svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.howto__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.howto__steps li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--sp-3);
  align-items: center;
}

.howto__steps img {
  grid-row: span 2;
  width: 56px;
  height: 56px;
  mix-blend-mode: multiply;
}

.howto__steps strong {
  align-self: end;
  font-size: var(--text-base);
}

.howto__steps span {
  align-self: start;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.howto__more {
  justify-self: start;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand);
}

@media (max-width: 760px) {
  .howto {
    padding: var(--sp-4);
  }

  .howto__steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .howto__steps li {
    scroll-snap-align: start;
  }
}

@media (max-width: 400px) {
  .howto__steps li {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .howto__steps img {
    width: 44px;
    height: 44px;
  }
}