/* ==========================================================================
   Shop skin — E-commerce Phase 1.7 (classic theme, storefront only)

   Loaded after app.css from layouts/app.blade.php, and only when this file
   exists, so removing it returns the store to its previous look with no code
   change. Everything here is scoped to .sp-page / .sp-* or to .card inside a
   storefront section; the admin area never loads this file.
   ========================================================================== */

/* ── grid: four-to-six across on desktop, tighter than the old rails ───── */
.sp-page .grid {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 14px;
}
@media (max-width: 620px) {
  .sp-page .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* ── cards: white tile, square photo, clamped title, price row ────────── */
.sp-page .card,
.card.sp-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface, #fff);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.sp-page .card:hover,
.card.sp-card:hover {
  box-shadow: 0 12px 30px rgba(16, 24, 40, .10);
  border-color: #d7dee8;
  transform: translateY(-2px);
}
.sp-page .card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2, #f6f6f6);
}
.sp-page .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Photos with their own white background look better contained than cropped. */
.sp-page .card-media img[data-fit="contain"] { object-fit: contain; padding: 10px; }
.sp-page .card-media .badges { top: 8px; left: 8px; right: 8px; gap: 5px; }
.sp-page .card-body { padding: 11px 12px 4px; }
.sp-page .card-body h3 {
  font-size: .93rem;
  line-height: 1.32;
  font-weight: 650;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
  margin: 4px 0 6px;
}
.sp-page .card-desc { display: none; }             /* the shop card is scannable, not wordy */
.sp-page .card-foot { padding: 8px 12px 12px; margin-top: auto; }

.sp-price { font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em; }
.sp-old { color: var(--text-mute, #8a8a8a); text-decoration: line-through; font-size: .8rem; font-weight: 600; }
.sp-off {
  display: inline-flex; align-items: center; gap: 3px;
  background: #e8f7ee; color: #147a3d; border: 1px solid #bde9cd;
  border-radius: var(--radius-pill, 999px); padding: 1px 7px;
  font-size: .72rem; font-weight: 750;
}
.sp-sold { color: var(--text-mute, #8a8a8a); font-size: .74rem; }
.sp-line { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
.sp-note { display: flex; align-items: center; gap: 5px; color: var(--text-dim, #6b6b6b); font-size: .76rem; }

/* ── hero: a strip, not a festival ───────────────────────────────────── */
.sp-hero { padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.sp-hero h1 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.045em; margin: 6px 0 8px; }
.sp-hero .lead { color: var(--text-dim, #6b6b6b); max-width: 46ch; margin: 0 0 14px; }
.sp-hero-cta { display: flex; gap: 9px; flex-wrap: wrap; }
.sp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.sp-stats div {
  background: var(--surface-2, #f6f6f6); border: 1px solid var(--line, #e3e8ef);
  border-radius: var(--radius, 12px); padding: 10px 12px;
}
.sp-stats b { display: block; font-size: 1.16rem; letter-spacing: -.03em; }
.sp-stats span { font-size: .74rem; color: var(--text-mute, #8a8a8a); }
@media (max-width: 860px) { .sp-hero { grid-template-columns: 1fr; padding: 18px; } }

/* ── category tiles (the apki.shop "browse categories" row) ──────────── */
.sp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.sp-cat {
  display: flex; flex-direction: column; gap: 7px; align-items: center; text-align: center;
  padding: 10px 8px 11px; border-radius: var(--radius, 12px);
  border: 1px solid var(--line, #e3e8ef); background: var(--surface, #fff);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.sp-cat:hover { border-color: var(--primary-600, #2b5cff); box-shadow: 0 8px 20px rgba(16, 24, 40, .07); }
.sp-cat img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 9px; background: var(--surface-2, #f6f6f6); }
.sp-cat i {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2, #f6f6f6); color: var(--text-dim, #6b6b6b); font-style: normal;
}
.sp-cat strong { font-size: .8rem; line-height: 1.2; font-weight: 650; }
.sp-cat em { font-size: .68rem; color: var(--text-mute, #8a8a8a); font-style: normal; }

/* ── horizontal rails ───────────────────────────────────────────────── */
.sp-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr);
  gap: 14px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.sp-rail > * { scroll-snap-align: start; }
@media (max-width: 620px) { .sp-rail { grid-auto-columns: minmax(152px, 1fr); gap: 10px; } }

/* ── section headings ───────────────────────────────────────────────── */
.sp-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 0 13px; }
.sp-hd h2 { font-size: clamp(1.12rem, 2.2vw, 1.5rem); letter-spacing: -.035em; margin: 3px 0 0; }
.sp-hd .sub { font-size: .82rem; color: var(--text-mute, #8a8a8a); margin-top: 3px; }

/* ── trust strip + reviews ─────────────────────────────────────────── */
.sp-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.sp-trust div {
  display: flex; gap: 10px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--line, #e3e8ef); border-radius: var(--radius, 12px); background: var(--surface, #fff);
}
.sp-trust b { font-size: .86rem; display: block; }
.sp-trust span { font-size: .76rem; color: var(--text-mute, #8a8a8a); }
.sp-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sp-reviews blockquote { margin: 0; padding: 14px 16px; border: 1px solid var(--line, #e3e8ef); border-radius: var(--radius, 12px); background: var(--surface, #fff); font-size: .88rem; }
.sp-reviews footer { margin-top: 9px; font-size: .74rem; color: var(--text-mute, #8a8a8a); }

/* ── empty state when the catalogue is still being built ────────────── */
.sp-empty { padding: 26px; text-align: center; border: 1px dashed var(--line, #dfe5ee); border-radius: var(--radius-lg, 16px); background: var(--surface, #fff); }

/* ── phase 2: the delivery step in checkout, cart and product page ── */
.co-delivery h4 { font-weight: 700; letter-spacing: -.01em; }
.co-ship-opt { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border: 1px solid var(--border, #e5e9f0); border-radius: var(--radius, 12px); background: var(--surface, #fff); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.co-ship-opt:hover { border-color: var(--primary, #f85606); }
.cd-advance { margin-top: 12px; padding: 11px 13px; border: 1px dashed var(--border, #e5e9f0); border-radius: var(--radius, 12px); background: color-mix(in srgb, var(--primary, #f85606) 5%, var(--surface, #fff)); }
.co-ship-opt.on { border-color: var(--primary, #f85606); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #f85606) 14%, transparent); }
.co-ship-opt input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pdp-ship { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; font-size: .8rem; line-height: 1.45; color: var(--text-mute, #6b7280); border: 1px dashed var(--line, #dfe5ee); border-radius: var(--radius, 12px); background: var(--surface, #fff); }
.co-ship-opt.on .opt-radio { border-color: var(--primary, #f85606); background: radial-gradient(circle at center, var(--primary, #f85606) 0 45%, transparent 46%); }
.co-ship-opt:has(.co-ship-radio:checked) { border-color: var(--primary, #f85606); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #f85606) 14%, transparent); }
.co-ship-opt:has(.co-ship-radio:checked) .opt-radio { border-color: var(--primary, #f85606); background: radial-gradient(circle at center, var(--primary, #f85606) 0 45%, transparent 46%); }
/* A full-card focus outline read as a second selected card next to .on, so the ring
   lives on the radio itself and only for keyboard users. The selected look is drawn
   once, at label.co-ship-opt specificity, so it beats the theme's indigo .opt.on. */
.co-ship-opt:focus-within { outline: none; }
.co-ship-opt .co-ship-radio:focus-visible + .opt-radio { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #f85606) 32%, transparent); }
/* CSS-only fallback: the input sits immediately before the dot, so this needs no
   scripting and no :has(). The card frame still uses :has() where available. */
.co-ship-radio:checked + .opt-radio { border-color: var(--primary, #f85606); background: radial-gradient(circle at center, var(--primary, #f85606) 0 45%, transparent 46%); }
label.co-ship-opt { border-width: 1.5px; background: var(--surface, #fff); }
label.co-ship-opt.on,
.co-ship-opt:has(.co-ship-radio:checked) {
  border-color: var(--primary, #f85606);
  background: color-mix(in srgb, var(--primary, #f85606) 6%, var(--surface, #fff));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #f85606) 12%, transparent);
}
.co-delivery { margin-top: 18px; padding: 14px; border: 1px solid var(--border-soft, #eef1f6); border-radius: 16px; background: var(--surface-2, #fbfcfe); }
.cd-qty { max-width: 200px; }

/* The theme collapses its sidebar at 760px but left the field grids at two
   columns, so the address rows and the plan picker were half a phone each. */
@media (max-width: 760px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .co-ship-opt { flex-wrap: wrap; align-items: center; }
  .co-ship-opt > span:last-child { white-space: normal; }
  .co-delivery > .row { flex-wrap: wrap; }
  .co-delivery h4 { font-size: 13.5px; }
  .cd-advance .tiny { line-height: 1.55; }
}
.pdp-ship svg { flex: none; margin-top: 1px; color: var(--primary, #f85606); }