/* ------------------------------------------------------------ */
/* Shop (tech / minimal)                                        */
/* Safe cleanup: keep existing class names                      */
/* ------------------------------------------------------------ */

:root{
  /* Palette */
  --bg:var(--surface);
  --line:var(--gray-light);
  --soft:var(--surface-muted);

  /* Shape */
  --radius:16px;
  --shadow:0 10px 25px var(--overlay-06);
}

/* ------------------------------------------------------------ */
/* Legacy minimal blocks                                        */
/* ------------------------------------------------------------ */

.shop-wrap h2{
  margin:8px 0 16px;
  font-size:18px;
  line-height:1.2;
  font-weight:700;
}

.shop-card{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
}

.shop-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #f1f1f1;
}

.shop-row:last-child{
  border-bottom:none;
}

.shop-alert{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-hover);
}

.shop-alert--success{
  border-color:#cfe8d6;
  background:#f3fbf5;
}

.shop-alert--info{
  border-color:#d7e6ff;
  background:#f4f8ff;
}

.shop-alert--error{
  border-color:#f3c0c0;
  background:#fff5f5;
}

.shop-desc{
  margin:12px 0;
  line-height:1.5;
}

/* ------------------------------------------------------------ */
/* Category / tag pills                                         */
/* ------------------------------------------------------------ */

.shop-cats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 16px;
}

.shop-cat{
  display:inline-block;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:inherit;
  text-decoration:none;
  font-size:13px;
  line-height:1;
  font-family:var(--font-sans);
}

.shop-cat.is-active{
  border-color:var(--text);
}

.shop-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 14px;
}

.shop-tag{
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:inherit;
  text-decoration:none;
  font-size:13px;
  line-height:1;
  font-family:var(--font-sans);
}

select[multiple]{
  width:100%;
  padding:8px;
  border:1px solid var(--gray-light);
  border-radius:10px;
  background:var(--surface);
  font-family:var(--font-sans);
}

/* ------------------------------------------------------------ */
/* Search + pager                                               */
/* ------------------------------------------------------------ */

.shop-search{
  margin:10px 0 16px;
}

.shop-search__row{
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, 170px) auto;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shop-search__input{
  flex:1;
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--gray-light);
  border-radius:10px;
  background:var(--surface);
  font-family:var(--font-sans);
}

.shop-search__select{
  padding:10px 12px;
  border:1px solid var(--gray-light);
  border-radius:10px;
  background:var(--surface);
  font-size:14px;
  font-family:var(--font-sans);
}

.shop-search__check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #d9d9d9;
  border-radius:10px;
  background:var(--surface);
  font-size:13px;
  font-family:var(--font-sans);
}

.shop-search__check input{
  margin:0;
}

/* The label sits next to the switch, inside the box (not floating above it as in the admin). */
.shop-search__check .btn-switch__label{
  position:static;
  font-size:inherit;
  color:inherit;
}

.shop-search__meta{
  margin-top:8px;
  font-size:13px;
  font-family:var(--font-sans);
}

@media (max-width:980px){
  .shop-search__row{
    grid-template-columns:minmax(0, 1fr) minmax(160px, auto);
  }

  .shop-search__input{
    grid-column:1 / -1;
  }
}

@media (max-width:560px){
  .shop-search__row{
    grid-template-columns:1fr;
  }

  .shop-search__input{
    grid-column:auto;
  }
}

.shop-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 10px;
}

.shop-pager__btn{
  display:inline-block;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:inherit;
  text-decoration:none;
  font-size:13px;
  font-family:var(--font-sans);
}

.shop-pager__btn.is-disabled{
  opacity:.5;
  pointer-events:none;
}

.shop-pager__info{
  font-size:13px;
  font-family:var(--font-sans);
}

/* ------------------------------------------------------------ */
/* Catalog page layout                                          */
/* ------------------------------------------------------------ */

.shop{
  max-width:1180px;
  margin:0 auto;
  padding:28px 16px 50px;
}

.shop__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:18px;
}

.shop__title h1{
  margin:0;
  font-size:28px;
  letter-spacing:-.02em;
  font-weight:700;
}

.shop__subtitle{
  max-width:60ch;
  margin:6px 0 0;
  color:var(--muted);
  font-family:var(--font-sans);
}

.shop__tools{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.shop__tool{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.shop__label{
  font-size:12px;
  color:var(--muted);
  font-family:var(--font-sans);
}

.shop__select,
.shop__input{
  min-width:220px;
  height:40px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  outline:none;
  font-family:var(--font-sans);
}

.shop__select:focus,
.shop__input:focus{
  box-shadow:0 0 0 4px var(--overlay-06);
}

/* ------------------------------------------------------------ */
/* Grid                                                         */
/* ------------------------------------------------------------ */

.shop-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

@media (max-width:1100px){
  .shop-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (max-width:820px){
  .shop-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:520px){
  .shop-grid{
    grid-template-columns:1fr;
  }
}

/* ------------------------------------------------------------ */
/* Product cards                                                */
/* ------------------------------------------------------------ */

.card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  transition:transform .15s ease, box-shadow .15s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.card__media{
  display:block;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--surface);
}

.card__media img{
  display:block;
  margin:0 auto;
  max-height:100%;
  object-fit:cover;
  transition:transform .25s ease;
}

.card__placeholder{
  width:100%;
  aspect-ratio:4 / 3;
  background:linear-gradient(135deg, #f0f2f7 0%, #fbfcff 100%);
}

.card:hover .card__media img{
  transform:scale(1.02);
}

.card__body{
  padding:14px 14px 12px;
}

/* Grid view: cards of a row share one height, and the price + actions block
   (the "View" button) stays at the bottom whatever the description length. */
.shop-products--grid .card{
  display:flex;
  flex-direction:column;
}

.shop-products--grid .card__body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
}

.shop-products--grid .card__bottom{
  margin-top:auto;
}

.card__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

/* ------------------------------------------------------------ */
/* Tags + stock                                                 */
/* ------------------------------------------------------------ */

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag{
  padding:5px 5px;
  border:1px solid var(--line);
  /* border-radius:999px; */
  background:var(--surface);
  color:var(--text);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  /* line-height:1; */
  text-transform:uppercase;
  font-family:var(--font-sans);
}

.tag--new{
  background:#f5f3ff;
  border-color:#ddd6fe;
}

.tag--sale{
  background:var(--text);
  border-color:var(--text);
  color:var(--surface);
}

.stock{
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  white-space:nowrap;
  font-size:11px;
  font-family:var(--font-sans);
}

.stock--ok{
  background:#f0fdf4;
  border-color:#bbf7d0;
  color:#166534;
}

.stock--out{
  background:#fef2f2;
  border-color:#fecaca;
  color:#991b1b;
}

.stock--low{
  position:relative;
  overflow:hidden;
  background:#fffbeb;
  border-color:#fde68a;
  color:#92400e;
  animation:stockPulse 2.2s infinite;
}

@keyframes stockPulse{
  0%   { box-shadow:0 0 0 0 rgba(245,158,11,.35); }
  70%  { box-shadow:0 0 0 6px rgba(245,158,11,0); }
  100% { box-shadow:0 0 0 0 rgba(245,158,11,0); }
}

/* ------------------------------------------------------------ */
/* Card typography                                              */
/* ------------------------------------------------------------ */

.card__title{
  margin:0;
  min-height:50px;
  font-size:14px;
  line-height:1.25;
  letter-spacing:-.01em;
  font-weight:700;
}

.card__title a{
  display:-webkit-box;
  overflow:hidden;
  color:#2162a1;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.card__desc{
  display:-webkit-box;
  overflow:hidden;
  height:2.8em;
  margin:8px 0 12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
  font-family:var(--font-sans);
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* ------------------------------------------------------------ */
/* Card price                                                   */
/* ------------------------------------------------------------ */

.card__bottom{
  display:flex;
  min-height: 50px;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.price__line{
  display:flex;
  align-items:center;
  gap:8px;
}

.price__current{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
  font-family:var(--font-sans);
}

.price__sub{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  font-family:var(--font-sans);
}

.chip{
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  font-size:11px;
  font-weight:700;
  font-family:var(--font-sans);
}

.chip--sale{
  background:var(--text);
  border-color:var(--text);
  color:var(--surface);
}

/* ------------------------------------------------------------ */
/* Card actions                                                 */
/* ------------------------------------------------------------ */

.card__cta{
  display:flex;
  align-items:center;
  gap:8px;
}

a.btn--primary{
  background:var(--surface);
  color:var(--black);
  border:1px solid var(--line);
}

.btn--primary:hover{
  opacity:.92;
}

.btn--ghost{
  width:38px;
  padding:0;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
}

.btn--ghost:hover{
  background:var(--soft);
}

/* ------------------------------------------------------------ */
/* Trust block                                                  */
/* ------------------------------------------------------------ */

.card__trust{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  font-family:var(--font-sans);
}

.dot{
  width:4px;
  height:4px;
  border-radius:999px;
  background:currentColor;
  opacity:.55;
}

/* ------------------------------------------------------------ */
/* Infinite scroll + fallback                                   */
/* ------------------------------------------------------------ */

.shop-infinite-status{
  padding:16px 0 24px;
  color:var(--muted, var(--muted));
  text-align:center;
  font-size:14px;
}

.shop-infinite-sentinel{
  width:100%;
  height:1px;
}

.shop-pagination-fallback.is-hidden{
  display:none;
}

/* ------------------------------------------------------------ */
/* Admin pagination                                             */
/* ------------------------------------------------------------ */

.admin-pagination{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:20px;
}

.admin-pagination__meta{
  font-size:14px;
  color:var(--muted, var(--muted));
}

.admin-pagination__links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.admin-pagination__dots{
  padding:0 4px;
  color:var(--muted, var(--muted));
}

/* ------------------------------------------------------------ */
/* Shop display mode                                            */
/* ------------------------------------------------------------ */

.shop-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.shop-head__title h1{
  margin:0;
  font-size:28px;
  letter-spacing:-.02em;
  font-weight:700;
}

.shop-head__subtitle{
  /* margin:6px 0 0; */
  /* max-width:60ch; */
  color:var(--muted);
  font-family:var(--font-sans);
}

.shop-view{
  display:flex;
  align-items:center;
  gap:8px;
}

.shop-view__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

.shop-view__btn:hover{
  background:var(--soft);
}

.shop-view__btn.is-active{
  background:var(--text);
  color:var(--surface);
  border-color:var(--text);
}

/* ------------------------------------------------------------ */
/* Products container                                           */
/* ------------------------------------------------------------ */

.shop-products{
  display:grid;
  gap:16px;
}

.shop-products > .shop-alert{
  grid-column:1 / -1;
}

.shop-products--grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

@media (max-width:1100px){
  .shop-products--grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (max-width:820px){
  .shop-products--grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:520px){
  .shop-products--grid{
    grid-template-columns:1fr;
  }
}

/* ------------------------------------------------------------ */
/* Shop view toggle (light UI)                                  */
/* ------------------------------------------------------------ */

.shop-view{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#f9fafb;
}

/* Buttons */
.shop-view__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:34px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}

.shop-view__btn:hover{
  background:#f1f5f9;
  color:var(--text);
}

.shop-view__btn.is-active{
  background:#1f2937;
  color:var(--surface);
}

/* ------------------------------------------------------------ */
/* List mode - cleaner ecommerce style                          */
/* ------------------------------------------------------------ */

.shop-products--list{
  grid-template-columns:1fr;
  gap:14px;
}

.shop-products--list .card{
  display:grid;
  grid-template-columns:180px minmax(0, 1fr);
  gap:0;
  align-items:stretch;
}

.shop-products--list .card__media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  aspect-ratio:auto;
  border-right:1px solid var(--line);
  background:var(--surface);
}

.shop-products--list .card__media img{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:contain;
  padding:14px;
  box-sizing:border-box;
}

.shop-products--list .card__placeholder{
  width:100%;
  height:100%;
  aspect-ratio:auto;
}

.shop-products--list .card__body{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 190px;
  grid-template-areas:
    "top side"
    "title side"
    "desc side"
    "trust side"
    "actions side";
  gap:10px 18px;
  padding:16px 18px;
  align-items:start;
}

.shop-products--list .card__row{
  grid-area:top;
  margin:0;
}

.shop-products--list .card__title{
  grid-area:title;
  margin:0;
  font-size:18px;
  line-height:1.3;
}

.shop-products--list .card__title a{
  -webkit-line-clamp:2;
}

.shop-products--list .card__desc{
  grid-area:desc;
  height:auto;
  min-height:0;
  margin:0;
  font-size:14px;
  line-height:1.45;
  -webkit-line-clamp:2;
}

.shop-products--list .card__bottom{
  grid-area:side;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:10px;
  min-width:0;
}

.shop-products--list .price{
  width:100%;
  text-align:right;
}

.shop-products--list .price__line{
  justify-content:flex-end;
  flex-wrap:wrap;
}

.shop-products--list .price__current{
  font-size:22px;
}

.shop-products--list .price__sub{
  justify-content:flex-end;
  margin-top:2px;
}

.shop-products--list .card__trust{
  margin-top:0;
}

.shop-products--list .card__trust:first-of-type{
  grid-area:trust;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

.shop-products--list .card__trust:last-of-type{
  grid-area:actions;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

.shop-products--list .card__cart-form{
  display:inline-flex;
}

.shop-products--list .btn{
  min-width:120px;
  white-space:nowrap;
}

.shop-products--list .tags{
  flex-wrap:wrap;
}

.shop-products--list .stock{
  margin-left:auto;
}

/* ------------------------------------------------------------ */
/* Responsive list mode                                         */
/* ------------------------------------------------------------ */

@media (max-width:860px){
  .shop-products--list .card{
    grid-template-columns:140px minmax(0, 1fr);
  }

  .shop-products--list .card__media{
    min-height:140px;
  }

  .shop-products--list .card__body{
    grid-template-columns:1fr;
    grid-template-areas:
      "top"
      "title"
      "desc"
      "side"
      "trust"
      "actions";
  }

  .shop-products--list .card__bottom{
    align-items:flex-start;
  }

  .shop-products--list .price{
    text-align:left;
  }

  .shop-products--list .price__line,
  .shop-products--list .price__sub{
    justify-content:flex-start;
  }
}

@media (max-width:560px){
  .shop-products--list .card{
    grid-template-columns:1fr;
  }

  .shop-products--list .card__media{
    min-height:220px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .shop-products--list .card__body{
    padding:14px;
  }

  .shop-products--list .card__trust:last-of-type{
    flex-direction:column;
    align-items:stretch;
  }

  .shop-products--list .btn,
  .shop-products--list .card__cart-form{
    width:100%;
  }

  .shop-products--list .card__cart-form .btn{
    width:100%;
  }
}

/* ------------------------------------------------------------ */
/* Fancy price                                                  */
/* ------------------------------------------------------------ */

.price__current--fancy{
  display:inline-flex;
  align-items:flex-start;
  gap:2px;
  line-height:1;
  color:var(--text);
}

.price__main{
  font-size:2rem;
  font-weight:800;
  line-height:.88;
  letter-spacing:-.05em;
}

.price__top{
  display:inline-flex;
  align-items:flex-start;
  gap:1px;
  padding-top:2px;
}

.price__dec,
.price__cur{
  font-size:.78rem;
  font-weight:700;
  line-height:1;
}

.shop-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.shop-price__old {
  color: #777;
  text-decoration: line-through;
  font-size: 0.95rem;
}

.shop-price__current {
  font-weight: 700;
  color: var(--text);
}

.shop-price--sale .shop-price__current {
  color: #b42318;
}

.product-price--fancy{
  display:inline-flex;
  align-items:flex-start;
  gap:2px;
  line-height:1;
  color:var(--text);
}

.product-price--fancy .price__main{
  font-size:2.4rem;
  font-weight:800;
  line-height:.88;
  letter-spacing:-.05em;
}

.product-price--fancy .price__top{
  display:inline-flex;
  align-items:flex-start;
  gap:1px;
  padding-top:3px;
}

.product-price--fancy .price__dec,
.product-price--fancy .price__cur{
  font-size:.9rem;
  font-weight:700;
  line-height:1;
}


/* ------------------------------------------------------------ */
/* Cart fly animation and toast notifications                   */
/* ------------------------------------------------------------ */

.cart-fly-ghost {
  overflow: hidden;
  backface-visibility: hidden;
  contain: layout style paint;
}

.is-cart-bump {
  animation: cart-bump .34s ease;
}

.is-cart-badge-pop {
  animation: cart-badge-pop .30s ease;
}

@keyframes cart-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.10); }
  100% { transform: scale(1); }
}

@keyframes cart-badge-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-fly-ghost,
  .is-cart-bump,
  .is-cart-badge-pop {
    animation: none !important;
    transition: none !important;
  }
}