/* ==========================================================================
   Shopping board — the /shopping landing page
   --------------------------------------------------------------------------
   Three columns of pre-searched keywords, each block a 2x2 grid of that
   keyword's products. Mobile-first: one stacked column, two from 900px, three
   from 1024px, matching the newniguro board's own breakpoints and 8px rhythm.
   The card shell / header rows are the board's (.nn-card, .nn-chead from
   newniguro.css); everything below is the product-specific part.
   ========================================================================== */

.shp-board { margin: 8px 0 24px; }

/* ── Page shell ─────────────────────────────────────────────────────────────
   The left/right inset for everything on the page: the search form, the
   result grid, the load-more button and the keyword board. It mirrors the
   theme's own rhythm exactly — .nn-wrap's 12px (16px from 640px) on phones and
   Tailwind's px-8 = 32px from lg — so /shopping lines up with the newniguro
   board instead of running flush to the screen edge. */
.shp-shell { padding-inline: 12px; }
@media (min-width: 640px)  { .shp-shell { padding-inline: 16px; } }
@media (min-width: 1024px) { .shp-shell { padding-inline: 32px; } }

/* The landing board's markup already carries .nn-wrap, whose own inset would
   stack on top of the shell's and give that one section twice the gutter of the
   rest of the page. Inside the shell it stands down -- at every width now, not
   just below lg: the page's own gutter is the only one, so the board's columns
   line up with the search field above them and pick up the shell's extra width
   instead of stopping at .nn-wrap's 1150px cap. */
.shopping-template .nn-wrap { padding-inline: 0; max-width: none; }

/* The pill itself. The left inset is set here rather than with a Tailwind
   utility because the compiled sheet has no .pl-3 (it ships pl-2/pl-4/pl-5…),
   so the icon used to sit flush against the field's left edge — 0.8px of border
   was all the separation it had. 12px keeps the 38px icon clear of the rounded
   cap, and the right side keeps its own pr-2 before the Search button. */
.shp-form-shell { padding-left: 12px; }

/* The one icon inside the search form: a link back to the board (the page has no
   title of its own now, so this is the way back). Sized to sit inside the 56px
   pill without changing its geometry. */
.shp-form-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  transition: background 0.18s ease;
}
.shp-form-ico:hover { background: hsl(var(--primary) / 0.18); }
.shp-form-ico:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* ── Header-less blocks (the newniguro board's product rows) ────────────────
   The same tiles, dropped into a feed column as a bare 2x2 grid: no card header
   and no trailing link, so the row ends at the last product like any other card. */
.shp-block { padding: 10px 9px 12px; }

/* The board's own column layout (flex on phones, grid from 900px) comes from
   newniguro.css, which the template enqueues alongside this sheet. */
.shp-col { min-width: 0; }

.shp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 11px 12px;
}

.shp-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.shp-media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: hsl(var(--muted));
}
/* The named keywords (kurtha, saree, nightwear, silk dress, iphones) run the
   taller 3:4 tile the user picked out of the Naver shopping page; the rest stay
   square so the board alternates shape down each column. */
.shp-item.is-tall .shp-media { aspect-ratio: 3 / 4; }

.shp-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.shp-item:hover .shp-media img { transform: scale(1.03); }

.shp-media-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: hsl(var(--muted-foreground));
}
.shp-media-ph i, .shp-media-ph svg { width: 20px; height: 20px; }

.shp-disc {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: hsl(0 72% 51%);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.shp-title {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.36;
  color: hsl(var(--foreground));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shp-item:hover .shp-title { color: hsl(var(--primary)); }

.shp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 800;
  color: hsl(var(--foreground));
}
.shp-price s {
  font-size: 11px;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
}

.shp-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 10.5px;
  color: hsl(var(--muted-foreground));
}
.shp-dot { opacity: 0.6; }
.shp-star {
  width: 10px;
  height: 10px;
  color: hsl(35 92% 50%);
  fill: hsl(35 92% 50%);
}

/* ── Skeletons ─────────────────────────────────────────────────────────────
   A cold keyword block keeps its shape while the loader fetches it, so the
   board never reflows as products arrive. */
.shp-skel { pointer-events: none; }
.shp-skel .shp-media,
.shp-skel-line {
  background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / 0.55) 37%, hsl(var(--muted)) 63%);
  background-size: 400% 100%;
  animation: shp-shimmer 1.4s ease-in-out infinite;
}
.shp-skel-line {
  display: block;
  height: 9px;
  margin-top: 7px;
  border-radius: 5px;
}
.shp-skel-line.is-short { width: 58%; }
@keyframes shp-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ── Loader messages ───────────────────────────────────────────────────────
   One "loading" pill per column, and a single end-of-board line — the same
   contract the newniguro board's columns use. */
.shp-more {
  display: block;
  margin: 2px 0 0;
  padding: 10px 0;
  text-align: center;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
.shp-more[hidden] { display: none; }
.shp-more.is-loading::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 2px solid hsl(var(--primary) / 0.3);
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: shp-spin 0.7s linear infinite;
}
@keyframes shp-spin { to { transform: rotate(360deg); } }

.shp-end {
  margin: 4px 0 8px;
  text-align: center;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
.shp-end[hidden] { display: none; }

/* Keyboard focus: the cards are links inside a dense grid. */
.shp-item:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
  border-radius: 12px;
}

@media (min-width: 1024px) {
  .shp-title { font-size: 12px; }
  .shp-price { font-size: 13px; }
}