/* /plugins/shop/assets/css/views/catalog.css */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

/* /plugins/shop/assets/css/views/catalog-aisle.css */
/* Shop catalog (views/catalog.php): the shop front with its best deal, then
   the aisle — category chips, sort and stock filter over the product grid.
   Colours come from each theme's tokens; the cards are the theme's own. */
.sp-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .sp-wrap { padding: 0 1.5rem; } }

.sp-front { display: grid; gap: 1rem; padding: 1.5rem 0 1.25rem; align-items: center; }
@media (min-width: 900px) {
  .sp-front { padding: 2.5rem 0 2rem; }
  .sp-front.has-deal { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; }
}
.sp-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-600, var(--ink-soft)); }
html.dark .sp-eyebrow { color: var(--theme-400, var(--ink-soft)); }
.sp-title { margin-top: .3rem; font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.sp-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.sp-meta span { font-size: 12px; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-soft); }
.sp-meta .sp-meta-sale { border-color: transparent; color: color-mix(in srgb, var(--px-good, #047857) 85%, var(--ink)); background: color-mix(in srgb, var(--px-good, #10b981) 12%, transparent); }
html.dark .sp-meta .sp-meta-sale { color: #6ee7b7; }

.sp-deal {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 1rem;
  padding: 1rem; border-radius: 20px; text-decoration: none; color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-500, #6366f1) 12%, var(--paper)) 0%, var(--paper) 70%);
  border: 1px solid color-mix(in srgb, var(--theme-500, #6366f1) 30%, var(--rule));
  transition: transform .2s ease, box-shadow .2s ease;
}
html.dark .sp-deal { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-500, #6366f1) 22%, var(--paper-2)) 0%, var(--paper-2) 70%); }
.sp-deal:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .35); }
@media (min-width: 640px) { .sp-deal { padding: 1.25rem 1.5rem; gap: 1.5rem; } }
.sp-deal-img { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); }
.sp-deal-img img { width: 82%; height: 82%; object-fit: contain; }
.sp-deal-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.sp-deal-name { font-size: clamp(1.1rem, 2.6vw, 1.6rem); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.sp-deal-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.sp-deal-price strong { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-deal-price s { font-size: 14px; color: var(--ink-soft); }
.sp-deal-save { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--px-good, #047857) 85%, var(--ink)); }
html.dark .sp-deal-save { color: #6ee7b7; }
.sp-deal-cta { margin-top: .35rem; font-size: 14px; font-weight: 700; color: var(--theme-600, var(--ink)); }
html.dark .sp-deal-cta { color: var(--theme-400, var(--ink)); }

.sp-bar {
  position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; gap: .65rem;
  margin: 1rem -1rem 0; padding: .75rem 1rem; background: var(--paper); border-bottom: 1px solid var(--rule);
}
@media (min-width: 768px) { .sp-bar { margin: 1.25rem -1.5rem 0; padding: .85rem 1.5rem; } }
@media (min-width: 1024px) { .sp-bar { flex-direction: row; align-items: center; justify-content: space-between; } }
.sp-chips { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.sp-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none;
  color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule);
}
.sp-chip img { width: 18px; height: 18px; object-fit: contain; }
.sp-chip span { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.sp-chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sp-chip.is-on span { color: inherit; opacity: .7; }
.sp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.sp-stock { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sp-stock input { width: 16px; height: 16px; accent-color: var(--theme-600, currentColor); }
.sp-tools > * { min-width: 0; max-width: 100%; }
/* A long sort choice (Greek "Price: low to high") made the select wider
   than a 360px screen; the word "Sort by" now lets the select drop below it. */
.sp-sort { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: 13px; color: var(--ink-soft); }
.sp-sort select {
  font-size: 13px; font-weight: 600; padding: .4rem 2rem .4rem .75rem; border-radius: 10px; max-width: 100%;
  color: var(--ink); background-color: var(--paper-2); border: 1px solid var(--rule);
}
.sp-count { margin: 1rem 0 .75rem; font-size: 13px; color: var(--ink-soft); }

.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding-bottom: 2.5rem; }
@media (min-width: 640px) { .sp-grid { gap: 1.1rem; } }
@media (min-width: 768px) { .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-cell { display: flex; min-width: 0; }
.sp-cell > * { flex: 1; min-width: 0; }
.sp-cell[hidden] { display: none; }

.sp-none { text-align: center; padding: 3rem 1rem 4rem; color: var(--ink-soft); }
.sp-none p { margin-bottom: 1rem; font-size: 15px; }

/* /plugins/shop/assets/css/views/catalog-search-placeholder.css */
/* The rotating search hint fills the field; a name too long for a phone
   steps its size down and then fades out at its own end edge (each name
   runs in its own direction, so an English name on an Arabic page fades on
   the right) instead of being cut off with an ellipsis. */
.flip-wrapper { width: 100%; min-width: 0; height: 1.5em; overflow: hidden; perspective: 1000px; }
@media (max-width: 400px) { .flip-wrapper { font-size: .8125rem; } }
.flip {
  display: flex;
  flex-direction: column;
  animation: flipCube 8s infinite;
}
.flip div {
  height: 1.5em;
  line-height: 1.5em;
  white-space: nowrap;
  overflow: hidden;
  text-align: start;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  transform-origin: top;
  backface-visibility: hidden;
}
@keyframes flipCube {
  0%, 20%   { transform: translateY(0); }
  25%, 45%  { transform: translateY(-1.5em); }
  50%, 70%  { transform: translateY(-3em); }
  75%, 95%  { transform: translateY(-4.5em); }
  100%      { transform: translateY(0); }
}
.flip div:dir(rtl) {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}
@media (prefers-reduced-motion: reduce) { .flip { animation: none; } }