/* =========================================================================
   СТИЛИ КАРТОЧКИ — переносятся в CSS шаблона
   ========================================================================= */

/* --- Карточка --- */
.sp-card {
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 16px;
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  transition: box-shadow .18s ease, transform .18s ease;
}
.sp-card:hover {
  box-shadow: 0 12px 30px rgba(20,24,40,.09);
}

/* --- Фото товара --- */
.sp-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: transparent;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.sp-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 14px;
  box-sizing: border-box;
}

/* Бейдж акции (выводить только при наличии акции/скидки) */
.sp-badge {
  position: absolute;
  top: 11px;
  left: 11px;
  background: #ef3b2f;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(239,59,47,.3);
  white-space: nowrap; /* keep "АКЦИЯ ДО dd.mm.yyyy" on a single line */
}

/* --- Название --- */
.sp-card__title {
  font-size: 14.5px;
  font-weight: 700;
  color: #1f2530;
  line-height: 1.4;
  text-align: center;
  min-height: 40px;
  margin: 0 0 9px;
}
.sp-card__title a { color: inherit; text-decoration: none; }
.sp-card__title a:hover { color: #f47a20; }

/* --- Строка рейтинга + наличие --- */
.sp-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 13px;
}
.sp-stars { display: inline-flex; gap: 1px; line-height: 0; }
.sp-stars svg { display: block; }
.sp-votes { font-size: 12px; color: #9aa0a8; font-weight: 600; }

.sp-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: #cfd4da; }

.sp-stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #9aa0a8;
  font-weight: 600;
}
.sp-stock__dot { width: 6px; height: 6px; border-radius: 50%; background: #3aa76d; }

/* --- Цена --- */
.sp-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  min-height: 26px;
  margin-bottom: 18px;
}
.sp-price__old { font-size: 13px; color: #b3b9c0; text-decoration: line-through; }
.sp-price__now { font-size: 19px; font-weight: 800; color: #f47a20; }

/* --- Кнопки --- */
.sp-actions { display: flex; gap: 9px; margin-top: auto; }

.sp-btn {
  height: 44px;
  border: none;
  border-radius: 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sp-btn svg { display: block; }

/* «Подробнее» — мягкая оранжевая обводка */
.sp-btn--details {
  flex: 1;
  border: 1.5px solid #ffd9b8;
  background: #fff7f0;
  color: #f47a20;
}
.sp-btn--details:hover { background: #ffefe1; border-color: #ffb877; box-shadow: 0 5px 14px rgba(244,122,32,.20); }

/* «Купить» — фиолетовая заливка */
.sp-btn--buy {
  flex: 1.05;
  background: linear-gradient(135deg, #8b5cf6, #6d3ce0);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 5px 13px rgba(109,60,224,.28);
}
.sp-btn--buy:hover { box-shadow: 0 9px 18px rgba(109,60,224,.42); }

/* =========================================================================
   СОСТОЯНИЕ «НЕТ В НАЛИЧИИ» — модификатор .sp-card--out
   ========================================================================= */
.sp-card--out .sp-card__media { opacity: .55; }
.sp-card--out .sp-stock { color: #9aa0a8; }
.sp-card--out .sp-stock__dot { background: #b6bcc4; }
.sp-card--out .sp-price__now { color: #aab1b9; }

/* Одна кнопка «Подробнее» на всю ширину — оранжевая заливка */
.sp-actions--out { display: flex; margin-top: auto; }
.sp-btn--details-solid {
  width: 100%;
  background: linear-gradient(135deg, #f9952f, #f47a20);
  color: #fff;
  font-weight: 800;
}
.sp-btn--details-solid:hover { filter: brightness(1.06); }

/* ===== Solpower integration deltas (not in the standalone reference) ===== */

/* Neutralize legacy card chrome ONLY on cells that now host .sp-card
   (marked with .sp-cell). Scoped to .sp-cell so we don't touch other VM
   product modules (e.g. "Лидер продаж" #vmgroup, mod_virtuemart_product),
   whose absolutely-positioned discount badge relies on the original
   .spacer/position styling. */
.product.sp-cell {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 24px;
}

/* Card fills the bootstrap cell */
.sp-card { height: 100%; }

/* Keep rating + "в наличии" on ONE line (like the mockup). Site cards are
   narrower than the standalone reference and real vote counts are wider, so
   nowrap + slightly tighter sizing keeps stock level with the rating. */
.sp-meta { flex-wrap: nowrap; gap: 5px; }
.sp-meta .sp-stars svg { width: 14px; height: 14px; }
.sp-votes, .sp-stock { font-size: 11.5px; }
.sp-stock { white-space: nowrap; }

/* "Купить" is a <button> with an inline cart icon + text, flex-centered as a
   group (icon + "Купить" together, perfectly centered). Reset UA/bootstrap
   button chrome so .sp-btn controls the look. */
.sp-actions .sp-btn--buy {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  line-height: normal;
}

/* Equal-width action buttons: the buy <button> lives inside a <form> wrapper,
   so the form must be the flex child and the button fill it (otherwise it
   collapses to its content width and looks ~3x smaller). */
.sp-actions { align-items: stretch; }
.sp-actions > .sp-btn--details { flex: 1 1 0; }
.sp-actions > .sp-buy-form { flex: 1 1 0; display: flex; margin: 0; }
.sp-actions > .sp-buy-form > .sp-btn--buy { flex: 1 1 auto; width: 100%; }

/* Breathing room between the filters bar and the first row of cards */
.browse-view .cnt + .row-fluid { margin-top: 24px; }

/* «Подробнее» stays orange and never underlines on hover (beat the template's
   global a:hover recolor + underline). */
.sp-card a.sp-btn--details,
.sp-card a.sp-btn--details:hover,
.sp-card a.sp-btn--details:focus { color: #f47a20; text-decoration: none; }

/* Out-of-stock card: the solid orange "Подробнее" must keep white text and no
   underline on hover (the template's global a:hover turned it green+underlined). */
.sp-card a.sp-btn--details-solid,
.sp-card a.sp-btn--details-solid:hover,
.sp-card a.sp-btn--details-solid:focus { color: #fff; text-decoration: none; }

/* Hide the "Каталог товаров" + "Лидер продаж" sidebar modules on mobile
   (template's mobile breakpoint is <=640) */
@media (max-width: 640px) {
  .oPos.sidebar-1 { display: none !important; }
}

/* =========================================================================
   mod_virtuemart_product rendered as modern cards (Лидер продаж / featured).
   Clean header instead of the legacy orange "rope" banner + an auto grid of
   the shared sp_card (border, rating, price, Подробнее + Купить).
   ========================================================================= */
.vmgroup--cards .vmheader--clean,
.vmgroup--cards .vmheader {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 0 14px !important;
  margin: 0 0 2px !important;
  font-family: 'Nunito', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: #1f2530 !important;
  text-align: left;
  text-transform: none !important;
  text-shadow: none !important;
}
.vmgroup--cards .vmheader--clean::before,
.vmgroup--cards .vmheader--clean::after,
.vmgroup--cards .vmheader::before,
.vmgroup--cards .vmheader::after { content: none !important; display: none !important; background: none !important; }

.vmgroup--cards .vmgroup-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.vmgroup--cards.vmgroup--vertical .vmgroup-cards { grid-template-columns: 1fr; }
.vmgroup--cards .vmgroup-cell { min-width: 0; display: flex; }
.vmgroup--cards .vmgroup-cell > .sp-card { width: 100%; }
.vmgroup--cards .vmfooter { margin-top: 12px; }

/* Card buttons (Лидер продаж / featured): wide "Подробнее" + small square
   icon-only "Купить" — same treatment as the "Похожие товары" cards. */
.vmgroup--cards .sp-card .sp-actions { gap: 8px; }
.vmgroup--cards .sp-card .sp-actions > .sp-btn--details { flex: 1 1 auto; }
.vmgroup--cards .sp-card .sp-actions > .sp-buy-form { flex: 0 0 48px; width: 48px; }
.vmgroup--cards .sp-card .sp-actions > .sp-buy-form > .sp-btn--buy { width: 48px; min-width: 48px; padding: 0; gap: 0; font-size: 0; }
.vmgroup--cards .sp-card .sp-actions > .sp-buy-form > .sp-btn--buy svg { font-size: initial; }

/* On short inner pages (e.g. Контакты) the left "Каталог + Лидер продаж" column
   is taller than the content and used to butt up against the footer. Reserve
   clearance below the sidebar — it only adds visible space when the sidebar is
   the tallest column (on content-heavy pages the content column governs the row
   height and this margin is absorbed). */
.innerpage .oPos.sidebar-1 { margin-bottom: 40px; }

/* Neutralise any legacy module chrome background/border so only the cards show. */
.vmgroup--cards { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

/* ---- Modern sidebar module titles (Каталог товаров / Лидер продаж) ----
   Replace the legacy purple/orange "rope" banner with a clean bold Nunito
   heading that carries a small orange accent bar — matching the site style.
   The legacy rope is the title's own ::before/::after; we repurpose ::before
   as the accent bar and remove ::after. */
.oPos.sidebar-1 .mod-title,
.ot-mod-outer:has(.vmgroup--cards) .mod-title {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #1f2530 !important;
  margin: 4px 0 18px !important;
  padding: 2px 0 2px 15px !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em;
  font-family: 'Nunito', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-align: left !important;
  text-transform: none !important;
  text-shadow: none !important;
  position: relative !important;
}
.oPos.sidebar-1 .mod-title::before,
.ot-mod-outer:has(.vmgroup--cards) .mod-title::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  height: 18px !important;
  width: 4px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #F9952F, #F47A20) !important;
}
.oPos.sidebar-1 .mod-title::after,
.ot-mod-outer:has(.vmgroup--cards) .mod-title::after {
  content: none !important; display: none !important; background: none !important; background-image: none !important;
}
/* strip any banner backgrounds / decorations left on the module wrappers */
.oPos.sidebar-1 .ot-mod-outer,
.oPos.sidebar-1 .ot-mod-inner,
.oPos.sidebar-1 .mod-content,
.ot-mod-outer:has(.vmgroup--cards),
.ot-mod-outer:has(.vmgroup--cards) .ot-mod-inner,
.ot-mod-outer:has(.vmgroup--cards) .mod-content { background-image: none !important; }
.oPos.sidebar-1 .ot-mod-outer::before,
.oPos.sidebar-1 .ot-mod-outer::after,
.oPos.sidebar-1 .ot-mod-inner::before,
.oPos.sidebar-1 .ot-mod-inner::after,
.ot-mod-outer:has(.vmgroup--cards)::before,
.ot-mod-outer:has(.vmgroup--cards)::after,
.ot-mod-outer:has(.vmgroup--cards) .ot-mod-inner::before,
.ot-mod-outer:has(.vmgroup--cards) .ot-mod-inner::after {
  content: none !important; display: none !important; background: none !important; background-image: none !important;
}

/* ===== "Похожие товары" / "С этим товаром покупают" (mod_virtuemart_randcatproduct) =====
   Render the shared sp-card inside the module's float grid; neutralize the
   module's legacy card chrome and add gaps. */
#mod_rand.mod_rand--cards { overflow: hidden; margin: 0 -12px; }
#mod_rand.mod_rand--cards .mod_rand_product {
  float: left;
  box-sizing: border-box;
  padding: 0 12px 24px;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
#mod_rand.mod_rand--cards .mod_rand_clear { clear: both; }
@media (max-width: 640px) {
  #mod_rand.mod_rand--cards .mod_rand_product { width: 50% !important; }
}
@media (max-width: 420px) {
  #mod_rand.mod_rand--cards .mod_rand_product { width: 100% !important; }
}

/* ===== Homepage "ХИТЫ ПРОДАЖ" (#mod_rand.mod_rand--cards) =====
   The legacy float grid sizes each card as 25% of the inner width but the
   container carries a -12px side margin, so the row fills flush on the LEFT but
   stops ~24px short on the RIGHT. Replace it with a clean 4-up CSS grid (desktop
   /tablet only — the ≤640 float layout is left as-is) so both edges line up with
   the rest of the site. Buttons get the wide-"Подробнее" + small-icon-"Купить"
   treatment used on the product page. */
/* Clean CSS grid at every width (replaces the legacy float layout, which left a
   gap on the right and — on phones — cramped, narrow cards). */
.homepage #mod_rand.mod_rand--cards { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 !important; overflow: visible; }
.homepage #mod_rand.mod_rand--cards .mod_rand_product { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; min-width: 0; }
.homepage #mod_rand.mod_rand--cards .mod_rand_clear { display: none !important; }
/* the legacy card is content-box, so its padding was being added on top of the
   stretched grid-cell height — the card overflowed ~42px into the next row.
   border-box makes the padding fit inside the cell; cards stay equal-height. */
.homepage #mod_rand.mod_rand--cards .sp-card { box-sizing: border-box; }
@media (max-width: 1024px) {
  .homepage #mod_rand.mod_rand--cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* phones: 2 wide cards flush to both edges, tight gutter, bigger photo and a
     compact single-line "АКЦИЯ ДО" badge tucked in the corner. */
  .homepage #mod_rand.mod_rand--cards { gap: 10px; }
  .homepage #mod_rand.mod_rand--cards .sp-card__img { padding: 9px; }
  .homepage #mod_rand.mod_rand--cards .sp-badge { top: 8px; left: 8px; font-size: 9px; padding: 4px 7px; letter-spacing: 0; border-radius: 7px; }
  /* availability indicator on its own row, below the rating (not inline with the
     stars). The rating (stars + count) is nudged a touch smaller so it stays on
     one row on the narrow phone card. */
  .homepage #mod_rand.mod_rand--cards .sp-meta { flex-wrap: wrap; row-gap: 4px; column-gap: 2px; }
  .homepage #mod_rand.mod_rand--cards .sp-meta .sp-votes { font-size: 9px; }
  .homepage #mod_rand.mod_rand--cards .sp-meta .sp-dot-sep { display: none; }
  .homepage #mod_rand.mod_rand--cards .sp-meta .sp-stock { flex-basis: 100%; justify-content: center; }
}
/* wide "Подробнее" + small icon "Купить" (parity with product-page related cards) */
.homepage #mod_rand.mod_rand--cards .sp-card .sp-actions { gap: 8px; }
.homepage #mod_rand.mod_rand--cards .sp-card .sp-actions > .sp-btn--details { flex: 1 1 auto; }
.homepage #mod_rand.mod_rand--cards .sp-card .sp-actions > .sp-buy-form { flex: 0 0 48px; width: 48px; }
.homepage #mod_rand.mod_rand--cards .sp-card .sp-actions > .sp-buy-form > .sp-btn--buy { width: 48px; min-width: 48px; padding: 0; gap: 0; font-size: 0; }
.homepage #mod_rand.mod_rand--cards .sp-card .sp-actions > .sp-buy-form > .sp-btn--buy svg { font-size: initial; }

/* ===== Reading typography for product descriptions + blog/articles =====
   Match the reviews body (Nunito, 15px, line-height 1.62, #3D3D40) so
   long-form copy is comfortable to read, like the redesigned reviews mockup. */
.productdetails-view .product-short-description,
.productdetails-view .product-description,
.productdetails-view [itemprop="description"],
.item-page,
.blog .items-leading,
.blog .items-row {
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.62;
  color: #3D3D40;
}
.productdetails-view .product-short-description p,
.productdetails-view .product-short-description li,
.productdetails-view .product-short-description span,
.productdetails-view .product-description p,
.productdetails-view .product-description li,
.productdetails-view .product-description span,
.productdetails-view [itemprop="description"] p,
.productdetails-view [itemprop="description"] li,
.item-page p, .item-page li, .item-page td, .item-page span,
.blog .items-leading p, .blog .items-leading li,
.blog .items-row p, .blog .items-row li {
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  color: #3D3D40;
}