/* Online shop theme — Yeaksa blue and yellow, in the clean food-delivery style the owner
   pointed at (foodpanda.com.kh, 2026-10-30): white page, big rounded pictures, round
   category tiles, pill buttons. Loaded LAST by sale_online/storefront/layout.html, so it
   only has to restate what it changes. Brand colours live in the tokens below. */

:root {
  --sf-blue: #0a6cff;        /* bright blue (owner, 2026-10-30) */
  --sf-blue-dark: #0052d6;
  --sf-blue-soft: #e8f1ff;
  --sf-yellow: #ffd60a;      /* bright yellow */
  --sf-yellow-dark: #ffc300;
  --sf-ink: #0f172a;
  --sf-muted: #64748b;
  --sf-line: #e5e7eb;
}

/* ── page and header ─────────────────────────────────────────────────────── */
body.bg-gray-50 { background: #fff !important; }
header.bg-white { box-shadow: 0 1px 0 var(--sf-line) !important; }
.bg-indigo-600 { background: var(--sf-blue) !important; }
.hover\:bg-indigo-700:hover { background: var(--sf-blue-dark) !important; }
.text-indigo-700, .text-indigo-600 { color: var(--sf-blue) !important; }
.sf-hbtn { background: var(--sf-blue-soft) !important; color: var(--sf-blue-dark) !important; }
.sf-hbtn:hover { background: var(--sf-yellow) !important; }

/* category tabs under the header */
.sf-tabs { border-top: 0 !important; }
.sf-tab { border: 1px solid var(--sf-line) !important; box-shadow: none !important; font-weight: 600 !important; }
.sf-tab:hover { border-color: var(--sf-blue) !important; color: var(--sf-blue) !important; transform: none !important; }
.sf-tab.active, .sf-chip.active {
  background: var(--sf-blue) !important; color: #fff !important; border-color: var(--sf-blue) !important;
  box-shadow: 0 4px 12px rgba(10, 108, 255, .30) !important;
}

/* ── banners ─────────────────────────────────────────────────────────────── */

/* ── Featured Categories: round picture tiles in a sliding row ───────────── */
.sf-fcats-h, .sf-title { font-size: 22px !important; font-weight: 800 !important; color: var(--sf-ink) !important; letter-spacing: -.01em; }
.sf-fcats-grid {
  display: flex !important; gap: 18px !important; overflow-x: auto; padding: 4px 2px 8px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sf-fcats-grid::-webkit-scrollbar { display: none; }
.sf-fcat {
  flex: 0 0 auto; flex-direction: column !important; gap: 8px !important; width: 96px;
  padding: 0 !important; border: 0 !important; background: none !important; text-align: center;
}
.sf-fcat-img {
  width: 84px !important; height: 84px !important; flex: 0 0 84px !important; border-radius: 50% !important;
  background: var(--sf-blue-soft) !important; font-size: 30px !important;
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--sf-line);
  transition: box-shadow .15s, transform .15s;
}
.sf-fcat:hover .sf-fcat-img { box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px var(--sf-yellow); transform: translateY(-2px); }
.sf-fcat b { font-size: 13px !important; font-weight: 600 !important; color: var(--sf-ink) !important; max-width: 96px; white-space: normal !important; line-height: 1.25; }

/* ── laundry card ────────────────────────────────────────────────────────── */
.sf-pk-card { background: linear-gradient(135deg, var(--sf-blue), var(--sf-blue-dark)) !important; box-shadow: none !important; border-radius: 20px !important; }
.sf-pk-go { background: var(--sf-yellow) !important; color: var(--sf-blue-dark) !important; }

/* ── product cards ───────────────────────────────────────────────────────── */
.sf-grid { gap: 22px 18px !important; }
.sf-card { border: 0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: none !important; }
.sf-card:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important; }
.sf-imgwrap { border-radius: 18px !important; background: #f3f4f6 !important; }
.sf-imgwrap img { transition: transform .3s; }
.sf-card:hover .sf-imgwrap img { transform: scale(1.04); }
.sf-cbody { padding: 10px 4px 6px !important; }
.sf-name { font-size: 15px !important; font-weight: 700 !important; color: var(--sf-ink) !important; min-height: 0 !important; }
.sf-price .now { color: var(--sf-blue) !important; font-weight: 800 !important; }
.sf-price .now.disc { color: #dc2626 !important; }
.sf-add {
  background: var(--sf-yellow) !important; color: var(--sf-blue-dark) !important; border-radius: 999px !important;
  font-weight: 800 !important; padding: 10px 0 !important;
}
.sf-add:hover { background: var(--sf-yellow-dark) !important; }

/* ── product detail ──────────────────────────────────────────────────────── */
.sf-price:not(.is-disc) { background: none !important; -webkit-text-fill-color: var(--sf-blue) !important; color: var(--sf-blue) !important; }

/* ── phone bottom bar ────────────────────────────────────────────────────── */
.sf-tabbar a.on { color: var(--sf-blue) !important; }
.sf-tabbar a.on::after {
  content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 3px; background: var(--sf-yellow);
}

@media (max-width: 640px) {
  .sf-fcats-grid { gap: 12px !important; }
  .sf-fcat { width: 76px; }
  .sf-fcat-img { width: 66px !important; height: 66px !important; flex-basis: 66px !important; }
  .sf-fcat b { font-size: 12px !important; }
  .sf-grid { gap: 16px 12px !important; }
  .sf-name { font-size: 14px !important; }
}

/* ════ foodpanda-style parts (owner, 2026-10-30): dish cards, sidebar, round arrows ════ */

/* ── product card (owner's pick, 2026-10-30): coloured top with an arch behind the
      picture, price pill from the left edge, name, short text, small BUY NOW ─── */
.sf-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 22px !important; }
.sf-card.sf-pc {
  --pc: var(--sf-blue); --pc2: #4f8dff; --pc-ink: #fff;
  display: flex !important; flex-direction: column !important; border: 0 !important; border-radius: 22px !important;
  background: #fff !important; overflow: hidden !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .10) !important;
  transition: transform .18s, box-shadow .18s; padding: 0 !important;
}
.sf-card.sf-pc:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 34px rgba(15, 23, 42, .16) !important; }
/* the card colours, in turn (owner, 2026-10-30: "many colours, not just blue and yellow") */
.sf-pc.c-yellow { --pc: #ffc300; --pc2: var(--sf-yellow); --pc-ink: var(--sf-blue-dark); }
.sf-pc.c-sky    { --pc: #00a3ff; --pc2: #5cc8ff; --pc-ink: #fff; }
.sf-pc.c-pink   { --pc: #ff2d8a; --pc2: #ff7ab8; --pc-ink: #fff; }
.sf-pc.c-purple { --pc: #7c3aed; --pc2: #a78bfa; --pc-ink: #fff; }
.sf-pc.c-green  { --pc: #10b981; --pc2: #5eead4; --pc-ink: #fff; }
.sf-pc.c-orange { --pc: #ff7a00; --pc2: #ffb347; --pc-ink: #fff; }
.sf-pc.c-red    { --pc: #ef233c; --pc2: #ff6b6b; --pc-ink: #fff; }
.sf-pc-top {
  position: relative; aspect-ratio: 1 / 0.82; cursor: pointer; overflow: hidden;
  background: linear-gradient(160deg, var(--pc2), var(--pc));
}
/* the arch: a deeper shape behind the picture, round at the bottom */
.sf-pc-top::before {
  content: ""; position: absolute; left: 13%; right: 13%; top: -10%; bottom: 8%;
  border-radius: 0 0 999px 999px; background: linear-gradient(180deg, var(--pc), rgba(0, 0, 0, .12)); opacity: .55;
}
.sf-pc-top img, .sf-pc-top .sf-noimg {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 14px 18%;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); transition: transform .25s;
}
.sf-pc-top .sf-noimg { display: flex; align-items: center; justify-content: center; font-size: 54px; padding: 0; }
.sf-card.sf-pc:hover .sf-pc-top img { transform: scale(1.05) rotate(-2deg); }
.sf-pc-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2; background: #fff; color: var(--sf-ink);
  font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.sf-pc-tag.is-disc, .sf-pc-tag.is-gift { color: #dc2626; }
.sf-pc-price {
  position: relative; margin: -22px 0 0; z-index: 3; align-self: flex-start; display: flex; align-items: baseline; gap: 8px;
  padding: 7px 22px 7px 16px; border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--pc), var(--pc2)); color: var(--pc-ink); box-shadow: 0 4px 12px rgba(15, 23, 42, .15);
}
.sf-pc-price .now { font-size: 22px; font-weight: 800; color: inherit !important; letter-spacing: -.01em; }
.sf-pc-price s { font-size: 13px; opacity: .8; font-weight: 600; }
.sf-pc-body { padding: 12px 18px 4px; cursor: pointer; flex: 1; }
.sf-pc .sf-name { font-size: 16px !important; font-weight: 700 !important; color: var(--sf-ink) !important; margin: 0 0 6px !important; min-height: 0 !important; -webkit-line-clamp: 2; }
.sf-pc-gift { font-size: 12px; font-weight: 700; color: #dc2626; margin-bottom: 6px; line-height: 1.3; }
.sf-pc-desc { font-size: 12.5px; color: #64748b; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sf-pc-foot { padding: 12px 18px 18px; display: flex; justify-content: center; }
.sf-add.sf-pc-buy {
  width: auto !important; margin: 0 !important; padding: 7px 20px !important; border-radius: 999px !important;
  font-size: 12px !important; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase;
  background: var(--pc) !important; color: var(--pc-ink) !important; box-shadow: 0 4px 10px rgba(15, 23, 42, .15);
}
.sf-add.sf-pc-buy:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sf-add.sf-pc-buy.out { background: #e5e7eb !important; color: #94a3b8 !important; box-shadow: none; }

/* ── sidebar (computer) ──────────────────────────────────────────────────── */
.sf-side { display: none; }
@media (min-width: 1024px) {
  .sf-catalog.has-side { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; max-width: 1180px; margin: 0 auto; align-items: start; }
  .sf-catalog.has-side .sf-shop { max-width: none; margin: 0; }
  .sf-side {
    display: flex; flex-direction: column; gap: 2px; position: sticky; top: 140px;
    max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px;
  }
  .sf-side-h { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sf-muted); margin: 6px 12px 8px; }
  .sf-side-it {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px;
    color: var(--sf-ink); text-decoration: none; font-weight: 600; font-size: 14px; position: relative;
  }
  .sf-side-it:hover { background: #f8fafc; color: var(--sf-blue); }
  .sf-side-it.on { background: var(--sf-blue-soft); color: var(--sf-blue); font-weight: 800; }
  .sf-side-it.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--sf-blue); }
  .sf-side-img {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 34px; background: var(--sf-blue-soft);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
  }
  .sf-side-img img { width: 100%; height: 100%; object-fit: cover; }
  /* the tabs under the header say the same thing as the sidebar here */
  .sf-catalog.has-side ~ * .sf-tabs, body:has(.sf-catalog.has-side) .sf-tabs { display: none; }
}

/* ── round ‹ › buttons ───────────────────────────────────────────────────── */
.sf-arrow, .sf-pg {
  width: 42px !important; height: 42px !important; padding: 0 !important; border-radius: 50% !important;
  background: #fff !important; color: var(--sf-ink) !important; border: 0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .18) !important; display: inline-flex !important;
  align-items: center; justify-content: center; cursor: pointer; font-size: 0 !important; transition: transform .12s, color .12s;
}
.sf-arrow:hover, a.sf-pg:hover { color: var(--sf-blue) !important; transform: scale(1.06); }
.sf-scroll { position: relative; }
.sf-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; }
.sf-arrow:hover { transform: translateY(-50%) scale(1.06); }
.sf-arrow-prev { left: -14px; } .sf-arrow-next { right: -14px; }
.sf-scroll.at-start .sf-arrow-prev, .sf-scroll.at-end .sf-arrow-next { opacity: 0; pointer-events: none; }
@media (hover: none), (max-width: 768px) { .sf-arrow { display: none !important; } }
.sf-pg.disabled { opacity: .35; cursor: default; box-shadow: none !important; background: #f1f5f9 !important; }
.sf-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px 0 8px; }

/* ── "loading more" marker at the end of the list ───────────────────────── */
.sf-more { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 0 8px; color: var(--sf-muted); font-size: 14px; font-weight: 600; }
.sf-more-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--sf-blue-soft); border-top-color: var(--sf-blue); animation: sf-spin .8s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .sf-card.sf-pc { border-radius: 18px !important; }
  .sf-pc-price { margin-top: -18px; padding: 5px 14px 5px 10px; }
  .sf-pc-price .now { font-size: 17px; }
  .sf-pc-body { padding: 10px 12px 2px; }
  .sf-pc .sf-name { font-size: 14px !important; }
  .sf-pc-desc { -webkit-line-clamp: 2; font-size: 12px; }
  .sf-pc-foot { padding: 10px 12px 14px; }
}

/* ── deals strip: every banner as same-size cards, ‹ › at the top right ──── */
.sf-deals { max-width: 1180px; margin: 6px auto 22px; }
.sf-deals-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.sf-deals-head .sf-fcats-h { margin: 0 !important; }
.sf-deals-nav { display: flex; gap: 10px; }
.sf-arrow-inline {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--sf-ink);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .18); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .12s, color .12s, opacity .12s;
}
.sf-arrow-inline:hover:not(:disabled) { color: var(--sf-blue); transform: scale(1.06); }
.sf-arrow-inline:disabled { opacity: .35; cursor: default; box-shadow: none; background: #f1f5f9; }
.sf-deals-row {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding: 2px;
}
.sf-deals-row::-webkit-scrollbar { display: none; }
.sf-deal {
  flex: 0 0 calc((100% - 32px) / 3); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: var(--sf-blue-soft); scroll-snap-align: start; display: block;
  box-shadow: 0 1px 0 var(--sf-line); transition: transform .15s, box-shadow .15s;
}
.sf-deal:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .12); }
.sf-deal img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) {
  .sf-deals { margin: 4px 12px 18px; }
  .sf-deals-nav { display: none; }
  .sf-deals-row { gap: 10px; }
  .sf-deal { flex-basis: 84%; border-radius: 14px; }
}

/* ── banner rows between the products: a full-width line of cards ────────── */
.sf-inrow {
  grid-column: 1 / -1; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 6px 0; padding: 2px;
}
.sf-inrow::-webkit-scrollbar { display: none; }
.sf-inrow-it {
  flex: 1 0 calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2); aspect-ratio: 16 / 7; border-radius: 16px; overflow: hidden;
  background: var(--sf-blue-soft); scroll-snap-align: start; display: block;
}
.sf-inrow-it img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .sf-inrow { gap: 10px; }
  .sf-inrow-it { flex-basis: 84%; max-width: 84%; border-radius: 14px; aspect-ratio: 16 / 8; }
}

/* ── the decorated panel behind the products (random patches + dashes, index.html) ── */
.sf-stage {
  position: relative; border-radius: 28px; overflow: hidden; padding: 28px 30px 34px;
  background: linear-gradient(135deg, #c9d8ff 0%, #ddd0ff 45%, #ffe9a8 100%);
}
.sf-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sf-deco .sf-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; transform: translate(-50%, -50%); }
.sf-deco .sf-streak { position: absolute; width: 520px; height: 90px; border-radius: 90px; filter: blur(26px); opacity: .5; transform: translate(-50%, -50%) rotate(-35deg); }
.sf-deco .sf-dash { position: absolute; height: 8px; border-radius: 8px; transform: rotate(-35deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.sf-stage > .sf-shop { position: relative; z-index: 1; }
.sf-stage .sf-title, .sf-stage .sf-count { position: relative; }
/* three products a line on a computer, two on a phone */
@media (min-width: 900px) { .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 34px 30px !important; } }
@media (max-width: 640px) { .sf-stage { border-radius: 20px; padding: 14px 10px 18px; margin: 0 -4px; } }

/* no empty halves: a banner row with one picture runs the full width, and the Deals strip's
   cards stretch to fill the line when there are fewer than three (owner, 2026-10-30) */
.sf-inrow-it:only-child { flex: 1 1 100% !important; max-width: 100% !important; aspect-ratio: 16 / 5; }
.sf-deal { flex-grow: 1; }
@media (max-width: 640px) { .sf-inrow-it:only-child { aspect-ratio: 16 / 7; } .sf-deal { flex-grow: 0; } }


/* ── random graphics on each card's coloured top (index.html, sfDecorateCards) ── */
.sf-pc-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sf-pc-deco i { position: absolute; display: block; }
.sf-pc-deco .d-dash { height: 5px; border-radius: 5px; transform: rotate(-35deg); }
.sf-pc-deco .d-dot { border-radius: 50%; }
.sf-pc-deco .d-ring { border-radius: 50%; border: 2.5px solid; background: none; }
.sf-pc-top::before { z-index: 0; }
.sf-pc-tag { z-index: 3 !important; }

/* ── full width (owner, 2026-10-30): no centred 1180px column; even side margins ── */
main.max-w-7xl, header .max-w-7xl, .sf-tabs-row.max-w-7xl { max-width: none !important; padding-left: 32px !important; padding-right: 32px !important; }
.sf-deals, .sf-fcats, .sf-pk-card, .sf-shop, .sf-catalog.has-side, .pp, .pp-crumbs, .pp-video { max-width: none !important; }
@media (min-width: 1024px) { .sf-catalog.has-side { grid-template-columns: 250px minmax(0, 1fr) !important; } }
/* very wide screens: more cards a line rather than three huge ones */
@media (min-width: 1500px) { .sf-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; } }
@media (max-width: 768px) { main.max-w-7xl, header .max-w-7xl, .sf-tabs-row.max-w-7xl { padding-left: 12px !important; padding-right: 12px !important; } }