/* ==========================================================================
   Mobile (≤ 749px), loaded only on small screens. A calmer home and product
   cards in the style of the big classifieds apps: a big photo, plain text under
   it, the heart and the cart one tap away.
   ========================================================================== */

/* Less chrome */
.announce { display: none; }
.acct-btn, .cart-btn { display: none; }
.section { padding: 32px 0; }
.sechead { margin-bottom: 16px; align-items: center; }
.sechead .h1 { font-size: 24px; }

/* Hero: the headline, one button, the rating, then the departments */
.hero { padding: 18px 0 6px; }
.hero__inner { grid-template-columns: minmax(0, 1fr); } /* the sideways rails must not widen the column */
.hero__title { margin-bottom: 0; font-size: 30px; line-height: 1.1; }
.hero__text, .hero .btn--ghost-light, .hero__proof li:not(:first-child) { display: none; }
.hero .btn-row { margin-top: 16px; }
.hero .btn--accent { flex: 1 1 100%; }
.hero__proof { margin-top: 12px; }

.mcats {
  display: grid; grid-auto-flow: column; grid-auto-columns: 80px; gap: 6px;
  margin: 18px calc(var(--gutter) * -1) 0; padding: 2px var(--gutter) 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.mcats::-webkit-scrollbar { display: none; }
.mcats a { display: grid; justify-items: center; align-content: start; gap: 7px; text-align: center; text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text); }
.mcats__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--green); box-shadow: 0 0 0 1px var(--line-2), 0 4px 12px -8px rgba(14, 17, 14, 0.4); }
.home-cats { display: none; }

/* Featured product: same family as the cards */
.hero__media { margin-top: 20px; }
.hfeat::before, .hfeat__media::before, .hfeat__panel::before { content: none; }
.hfeat__media { width: 100%; aspect-ratio: 1; border-radius: 20px; clip-path: none; }
.hfeat__media img { object-position: 50% 50%; }
.hfeat__off { top: auto; right: auto; bottom: 14px; left: 14px; padding: 8px 14px 7px; border-radius: 999px; clip-path: none; font-size: 18px; }
.hfeat__card { width: 100%; margin: 0; filter: none; }
.hfeat__panel { padding: 14px 2px 0; background: none; clip-path: none; }
.hfeat__brand, .hfeat__specs { display: none; }
.hfeat__title { margin-top: 6px; font-family: var(--font); font-size: 21px; font-weight: 600; line-height: 1.25; }
.hfeat__price { margin-top: 8px; }
.hfeat__price .price--lg { font-size: 30px; }

/* Promotions: rounded like the cards */
.promo { border-radius: 20px; clip-path: none; }
.promo::before { content: none; }

/* Why us: four small tiles instead of a long list */
.trust__list { grid-template-columns: 1fr 1fr; gap: 0 14px; }
.trust__list li { padding: 12px 0; gap: 10px; font-size: 13px; }
.trust__list strong { font-size: 14.5px; }
.trustx__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.trustx__grid a { grid-template-columns: 1fr; gap: 8px; padding: 14px; border-radius: 16px; }
.trustx__grid .tn-icon { grid-row: auto; }
.trustx__grid strong { font-size: 15px; line-height: 1.25; }
.trustx__grid span, .howto { display: none; }

/* Product cards: one per row, big square photo, text underneath */
.pgrid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.pcard {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none;
  grid-template-areas: 'media media' 'body add'; align-items: end; column-gap: 12px;
  background: none; border: 0; box-shadow: none; clip-path: none;
}
.pcard::before { content: none; }
.pcard:hover { transform: none; }
.pcard__media { grid-area: media; aspect-ratio: 1; min-height: 0; border-radius: 20px; overflow: hidden; clip-path: none; }
.pcard__media img { object-fit: cover; }
.pcard__badges { top: auto; right: auto; bottom: 12px; left: 12px; }
.badge-sale { padding: 6px 12px 5px; border-radius: 999px; background: var(--green-fill); color: #fff; font-size: 15px; }
.badge-out { padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 14px; }
.pcard__save { top: 12px; right: 12px; width: 46px; height: 46px; }
.pcard__body { grid-area: body; padding: 12px 2px 0; border: 0; gap: 3px; }
.pcard__brand { display: none; }
.pcard__title { padding: 0; font-family: var(--font); font-size: 18px; font-weight: 500; line-height: 1.3; }
.pcard__price { margin-top: 2px; }
.pcard__price .price { font-size: 23px; color: var(--text); }
.pcard__price .price-was { font-size: 15px; }
.pcard__stock { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--muted); }
.pcard__stock .tn-icon { display: inline; flex-shrink: 0; color: var(--green); }
.pcard__stock.is-low { color: var(--warn); }
.pcard__add {
  grid-area: add; position: relative; z-index: 5; right: auto; bottom: auto;
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 0 2px; padding: 0;
  border-radius: 50%; clip-path: none;
}
.pcard__addtxt { display: none; }

/* Home: the chosen products scroll sideways */
.pgrid--rail {
  grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; gap: 14px;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scroll-padding-left: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pgrid--rail::-webkit-scrollbar { display: none; }
.pgrid--rail > .pcard { scroll-snap-align: start; }
.pgrid--rail .pcard__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Product page photo matches the cards */
.pdp__media { border-radius: 20px; clip-path: none; }
.pdp__media::before { content: none; }

/* Account pages */
.auth { padding: 20px 0 40px; }
.auth__title, .acct__h { text-transform: none; }
.auth__title { font-size: 28px; }
.acct__nav { grid-template-columns: 1fr 1fr; }

/* Promotions on phones: like the product cards, a big whole photo on top and the text under it */
.promo { flex: 0 0 80%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; gap: 0; padding: 0; min-height: 0; }
.promo__img { order: -1; width: 100%; aspect-ratio: 1; border-radius: 0; clip-path: none; }
.promo__body { padding: 16px 18px 20px; align-content: start; }
.promo--light { border: 1px solid var(--line-2); }
.map__open { left: 12px; top: 12px; }

/* Home: brand shortcuts under the departments, brand tiles that scroll sideways */
.mbrands {
  display: flex; gap: 8px; overflow-x: auto; margin: 14px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 4px;
  scrollbar-width: none;
}
.mbrands::-webkit-scrollbar { display: none; }
.mbrands .chip { border-radius: 999px; background: #fff; font-size: 15px; padding: 9px 16px; }
.btiles--rail {
  grid-auto-flow: column; grid-auto-columns: 40%; grid-template-columns: none; gap: 12px;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scroll-padding-left: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.btiles--rail::-webkit-scrollbar { display: none; }
.btiles--rail > li { scroll-snap-align: start; }
.btile { border-radius: 18px; overflow: hidden; }
.btile__img { border-radius: 12px; }
.frow__label { padding-left: 2px; }