/* L-TEX Components — header, footer, cards, filters, buttons */

/* === HEADER === */
.site-header{
  position:sticky;top:0;z-index:50;
  width:100%;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.site-header__inner{
  max-width:var(--container);margin-inline:auto;
  display:flex;align-items:center;gap:1rem;
  padding:0 1rem;height:var(--header-h);
}
.site-header__logo{
  font-size:1.5rem;font-weight:800;
  color:var(--primary);
  letter-spacing:-.02em;
  white-space:nowrap;
}
.site-header__nav{
  display:none;align-items:center;gap:1.5rem;
  font-size:.875rem;font-weight:500;color:var(--muted-fg);
}
.site-header__nav a{transition:color var(--transition)}
.site-header__nav a:hover,.site-header__nav a.active{color:var(--fg)}
.site-header__nav a.active{color:var(--primary);font-weight:600}
.site-header__search{display:none;flex:1;max-width:28rem;position:relative}
.site-header__search input{
  width:100%;padding:.5rem 2.25rem .5rem 1rem;
  background:var(--gray-50);border:1px solid var(--border);
  border-radius:var(--radius-full);
  font-size:.875rem;outline:none;
  transition:all var(--transition);
}
.site-header__search input:focus{
  background:#fff;border-color:var(--primary);
  box-shadow:0 0 0 3px rgb(22 163 74 / .1);
}
.site-header__search-icon{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  color:var(--muted-fg);pointer-events:none;
}
.site-header__actions{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:var(--radius-full);
  color:var(--muted-fg);transition:all var(--transition);
}
.icon-btn:hover{background:var(--gray-100);color:var(--fg)}
.icon-btn .badge{
  position:absolute;top:-2px;right:-2px;
  min-width:1rem;height:1rem;padding:0 .25rem;
  border-radius:var(--radius-full);
  background:var(--destructive);color:#fff;
  font-size:.625rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}
.icon-btn .badge.cart{background:var(--primary)}
.site-header__phone{
  display:none;font-size:.875rem;font-weight:600;color:var(--fg);
  padding:.375rem .75rem;border-radius:var(--radius-md);
  transition:background var(--transition);
}
.site-header__phone:hover{background:var(--gray-100)}
.site-header__burger{display:inline-flex}
@media(min-width:768px){.site-header__search{display:block}}
@media(min-width:1024px){
  .site-header__nav{display:flex}
  .site-header__phone{display:inline-flex}
  .site-header__burger{display:none}
}

/* === MOBILE MENU ===
   Implemented as a native <dialog> opened via showModal(). The browser
   puts it in the top layer (above the entire document), so no ancestor
   property — backdrop-filter, transform, contain, overflow:hidden — can
   clip it. Position properties below assume the top-layer placement. */
dialog.mobile-menu{
  position:fixed;
  top:0;left:0;
  margin:0;
  padding:0;
  border:none;
  width:85vw;
  max-width:20rem;
  height:100vh;     /* fallback */
  height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  background:#fff;
  color:var(--fg);
  display:none;
  flex-direction:column;
  overflow-y:auto;
  overscroll-behavior:contain;
  z-index:100;
  -webkit-overflow-scrolling:touch;
}
dialog.mobile-menu[open]{
  display:flex;
  animation:ltexMenuSlideIn 180ms cubic-bezier(.4,0,.2,1);
}
dialog.mobile-menu::backdrop{
  background:rgba(0,0,0,.5);
}
@keyframes ltexMenuSlideIn{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(0); }
}
/* Pre-dialog fallback: if the browser doesn't recognise <dialog>, treat
   the [open] attribute as the visibility trigger. */
@supports not (selector(dialog[open])){
  dialog.mobile-menu{display:none}
  dialog.mobile-menu[open]{display:flex}
}
.mobile-menu__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem;border-bottom:1px solid var(--border);
}
.mobile-menu__nav{padding:.5rem}
.mobile-menu__nav a{
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1rem;
  font-size:.95rem;font-weight:500;
  border-radius:var(--radius-md);
  transition:background var(--transition);
  position:relative;
}
.mobile-menu__nav a > span:not(.icon):not(.mobile-menu__badge){flex:1}
.mobile-menu__nav a:hover{background:var(--gray-100)}
.mobile-menu__nav a.active{background:var(--green-50);color:var(--primary)}
.mobile-menu__nav a .icon{color:var(--muted-fg);flex-shrink:0}
.mobile-menu__nav a.active .icon{color:var(--primary)}
.mobile-menu__badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.25rem;height:1.25rem;padding:0 .375rem;
  border-radius:var(--radius-full);background:var(--destructive);color:#fff;
  font-size:.6875rem;font-weight:700;
}
.mobile-menu__badge.cart{background:var(--primary)}

.mobile-menu__search{
  padding:.75rem 1rem;border-bottom:1px solid var(--border);
  position:relative;
}
.mobile-menu__search input{
  width:100%;padding:.5rem 2.25rem .5rem .875rem;
  background:var(--gray-50);border:1px solid var(--border);
  border-radius:var(--radius-full);
  font-size:.875rem;outline:none;
  transition:all var(--transition);
}
.mobile-menu__search input:focus{
  background:#fff;border-color:var(--primary);
  box-shadow:0 0 0 3px rgb(22 163 74 / .1);
}
.mobile-menu__search .icon{
  position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);
  color:var(--muted-fg);pointer-events:none;
}

.mobile-menu__section{padding:.5rem;border-top:1px solid var(--border)}
.mobile-menu__section-title{
  padding:.5rem 1rem .25rem;
  font-size:.6875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--gray-500);
}
.mobile-menu__cats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:.375rem;padding:0 .5rem .25rem;
}
.mobile-menu__cat{
  display:flex;align-items:center;gap:.5rem;
  padding:.625rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:#fff;
  font-size:.8125rem;font-weight:500;color:var(--fg);
  transition:all var(--transition);
}
.mobile-menu__cat:hover{border-color:var(--primary);background:var(--green-50)}
.mobile-menu__cat-emoji{font-size:1.125rem;line-height:1;flex-shrink:0}
.mobile-menu__cat-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-menu__cat-count{
  font-size:.6875rem;font-weight:700;color:var(--gray-500);
  background:var(--gray-100);
  padding:.125rem .375rem;border-radius:var(--radius-full);
  flex-shrink:0;
}

.mobile-menu__foot{margin-top:auto;padding:1rem;border-top:1px solid var(--border)}

/* === FOOTER === */
.site-footer{background:var(--gray-900);color:var(--gray-300);margin-top:4rem}
.site-footer__inner{
  max-width:var(--container);margin-inline:auto;
  padding:3rem 1rem 2rem;
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.site-footer h4{
  color:#fff;font-size:.875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:.875rem;
}
.site-footer ul{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem}
.site-footer a{transition:color var(--transition)}
.site-footer a:hover{color:#fff}
.site-footer__bottom{
  border-top:1px solid var(--gray-800);
  padding:1.25rem 1rem;font-size:.8rem;
  text-align:center;color:var(--gray-400);
}
.site-footer__socials{display:flex;gap:.5rem;margin-top:.5rem}
.site-footer__socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:var(--radius-full);
  background:var(--gray-800);color:#fff;
  transition:background var(--transition);
}
.site-footer__socials a:hover{background:var(--primary)}

/* === BREADCRUMBS === */
.breadcrumbs{font-size:.875rem;color:var(--gray-500)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}
.breadcrumbs a{transition:color var(--transition)}
.breadcrumbs a:hover{color:var(--green-700)}
.breadcrumbs li:not(:first-child)::before{content:'/';margin:0 .25rem;color:var(--gray-300)}
.breadcrumbs li:last-child{color:var(--gray-700)}

/* === BUTTONS === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:var(--radius-md);
  font-size:.875rem;font-weight:500;line-height:1;
  border:1px solid transparent;
  cursor:pointer;transition:all var(--transition);
  white-space:nowrap;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--primary-hover)}
.btn-outline{border-color:var(--border);background:#fff;color:var(--fg)}
.btn-outline:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.btn-outline-primary{border-color:var(--primary);background:#fff;color:var(--primary);border-width:2px}
.btn-outline-primary:hover:not(:disabled){background:var(--green-50)}
.btn-ghost{background:transparent;color:var(--fg)}
.btn-ghost:hover:not(:disabled){background:var(--gray-100)}
.btn-quick{
  border:2px solid var(--amber-500);
  background:var(--amber-50);
  color:var(--amber-800);
}
.btn-quick:hover:not(:disabled){background:#fef3c7}
.btn-lg{padding:.75rem 1.5rem;font-size:1rem}
.btn-sm{padding:.375rem .75rem;font-size:.8125rem}
.btn-xs{padding:.25rem .625rem;font-size:.75rem}

/* === BADGE / CHIP === */
.badge-pill{
  display:inline-flex;align-items:center;
  padding:.125rem .625rem;border-radius:var(--radius-full);
  border:1px solid var(--border);
  font-size:.75rem;font-weight:600;
  background:#fff;color:var(--gray-700);
}
.chip{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.25rem .75rem;border-radius:var(--radius-full);
  border:1px solid var(--border);
  font-size:.875rem;color:var(--gray-700);
  transition:all var(--transition);
  cursor:pointer;
  background:#fff;
}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.active{
  border-color:var(--primary);
  background:var(--green-50);
  color:var(--green-700);
  font-weight:600;
}
.tag{
  display:inline-flex;align-items:center;
  padding:.125rem .5rem;border-radius:.25rem;
  font-size:.6875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;
  white-space:nowrap;
}
.tag-new{background:var(--blue-600);color:#fff}
.tag-sale{background:var(--red-600);color:#fff}
.tag-status-free{background:var(--green-600);color:#fff}
.tag-status-sale{background:var(--red-600);color:#fff}
.tag-status-reserved{background:var(--gray-500);color:#fff}
.tag-status-sold{background:var(--gray-400);color:#fff}

/* === PRODUCT CARD === */
.product-card{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:box-shadow var(--transition),border-color var(--transition);
  height:100%;
}
.product-card:hover{box-shadow:var(--shadow-md);border-color:var(--gray-300)}
.product-card.akciya{border-color:var(--red-300)}
.product-card__media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--gray-100);
}
.product-card__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transition:transform 300ms ease;
}
.product-card:hover .product-card__img{transform:scale(1.05)}
.product-card__media-empty{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;color:var(--gray-400);
  background:var(--gray-100);
}
.product-card__badges{
  position:absolute;top:.5rem;left:.5rem;z-index:10;
  display:flex;flex-direction:column;gap:.25rem;
}
.product-card__wish{
  position:absolute;top:.5rem;right:.5rem;z-index:20;
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:var(--radius-full);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow-md);
  color:var(--gray-400);
  transition:all var(--transition);
}
.product-card__wish:hover{background:#fff;color:var(--red-500)}
.product-card__wish.active{color:var(--red-500)}
.product-card__wish.active svg{fill:currentColor}
.product-card__video{
  position:absolute;bottom:.5rem;right:.5rem;z-index:15;
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.25rem .5rem;border-radius:var(--radius-full);
  background:rgba(0,0,0,.65);color:#fff;
  font-size:.6875rem;font-weight:600;
  cursor:pointer;transition:background var(--transition),transform var(--transition);
  border:none;
}
.product-card__video:hover{background:rgba(220,38,38,.9);transform:scale(1.05)}
.product-card__video:focus-visible{outline:2px solid #fff;outline-offset:2px}
.product-card__body{
  padding:.75rem;flex:1;
  display:flex;flex-direction:column;gap:.5rem;
}
.product-card__title{
  font-size:.875rem;font-weight:500;line-height:1.3;
  color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.275rem;
}
.product-card__tags{display:flex;flex-wrap:wrap;gap:.25rem}
.product-card__price-block{margin-top:auto;padding-top:.5rem}
.product-card__price{font-size:1rem;font-weight:700;color:var(--red-600);line-height:1.1}
.product-card__price .unit{font-size:.75rem;font-weight:400;color:var(--gray-500)}
.product-card__price-old{font-size:.75rem;color:var(--gray-400);text-decoration:line-through;margin-left:.25rem}
.product-card__price-eur{font-size:.6875rem;color:var(--gray-400);margin-top:.125rem}
.product-card__sub{font-size:.75rem;color:var(--gray-500)}

/* List view */
.product-card.list{flex-direction:row}
.product-card.list .product-card__media{flex-shrink:0;width:8rem;aspect-ratio:1;align-self:stretch}
.product-card.list .product-card__body{padding:1rem}
.product-card.list .product-card__title{font-size:1rem;-webkit-line-clamp:3}
@media(min-width:640px){
  .product-card.list .product-card__media{width:12rem}
}

/* === LOT CARD === */
.lot-card{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:box-shadow var(--transition),border-color var(--transition);
}
.lot-card:hover{box-shadow:var(--shadow-md);border-color:var(--gray-300)}
.lot-card.in-cart{border:2px solid var(--green-500);background:var(--green-50)}
.lot-card.on-sale{border:2px solid var(--red-300)}
.lot-card__media{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--gray-900);
  display:block;width:100%;
}
.lot-card__thumb{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.9;
  transition:opacity var(--transition);
}
.lot-card:hover .lot-card__thumb{opacity:1}
.lot-card__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:3rem;height:3rem;border-radius:var(--radius-full);
  background:rgba(220,38,38,.9);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);color:#fff;
  transition:all var(--transition);
}
.lot-card:hover .lot-card__play{background:var(--red-600);transform:translate(-50%,-50%) scale(1.05)}
.lot-card__badges{
  position:absolute;top:.5rem;left:.5rem;z-index:10;
  display:flex;flex-direction:column;gap:.25rem;
}
.lot-card__wish{
  position:absolute;top:.5rem;right:.5rem;z-index:20;
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:var(--radius-full);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow-md);
  color:var(--gray-400);
  transition:all var(--transition);
}
.lot-card__wish:hover{color:var(--red-500)}
.lot-card__wish.active{color:var(--red-500)}
.lot-card__wish.active svg{fill:currentColor}
.lot-card__media-empty{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;color:rgba(255,255,255,.6);
}
.lot-card__body{padding:.75rem}
.lot-card__code{font-family:'JetBrains Mono','Menlo',monospace;font-size:.625rem;color:var(--gray-400)}
.lot-card__title{
  margin-top:.125rem;font-size:.875rem;font-weight:500;
  line-height:1.3;color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--transition);
}
.lot-card:hover .lot-card__title{color:var(--green-700)}
.lot-card__stats{
  margin-top:.5rem;display:flex;gap:.75rem;
  font-size:.75rem;color:var(--gray-500);
}
.lot-card__stats strong{color:var(--gray-900);font-weight:700}
.lot-card__price-block{margin-top:.5rem}
.lot-card__price{font-size:1rem;font-weight:700;color:var(--red-600);line-height:1.1}
.lot-card__price-eur{font-size:.6875rem;color:var(--gray-400);margin-top:.125rem}
.lot-card__actions{margin-top:.625rem;display:flex;gap:.5rem}
.lot-card__actions .btn{flex:1;padding:.5rem .75rem;font-size:.75rem}
.lot-card__quick{margin-top:.5rem;width:100%;padding:.5rem;font-size:.75rem}

/* List view for lots */
.lot-card.list{flex-direction:row}
.lot-card.list .lot-card__media{flex-shrink:0;width:14rem;aspect-ratio:16/9;align-self:flex-start}
.lot-card.list .lot-card__body{flex:1;padding:1rem;display:flex;flex-direction:column}
.lot-card.list .lot-card__actions{margin-top:auto}

/* === FILTERS SIDEBAR === */
.filter-trigger{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .75rem;
  border:1px solid var(--border);background:#fff;
  border-radius:var(--radius-md);
  font-size:.875rem;font-weight:500;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition);
}
.filter-trigger:hover{background:var(--gray-50)}
.filter-trigger .badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.25rem;height:1.25rem;padding:0 .375rem;
  border-radius:var(--radius-full);background:var(--primary);color:#fff;
  font-size:.6875rem;font-weight:700;
}
.filters-aside{display:none}
@media(min-width:1024px){
  .filters-aside{display:block;width:18rem;flex-shrink:0}
}
.filters-aside__inner{
  position:sticky;top:calc(var(--header-h) + 1rem);
  max-height:calc(100vh - var(--header-h) - 2rem);
  overflow-y:auto;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1rem;
}
.filters-mobile{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;
  transition:all var(--transition);
}
.filters-mobile.open{opacity:1;visibility:visible}
.filters-mobile__panel{
  position:absolute;left:0;right:0;bottom:0;
  max-height:85vh;overflow-y:auto;
  background:#fff;
  border-radius:1rem 1rem 0 0;
  transform:translateY(100%);
  transition:transform var(--transition);
}
.filters-mobile.open .filters-mobile__panel{transform:translateY(0)}
.filters-mobile__head{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem;background:#fff;border-bottom:1px solid var(--border);
}
.filters-mobile__body{padding:1rem;padding-bottom:5rem}
.filters-mobile__foot{
  position:sticky;bottom:0;z-index:1;
  padding:.75rem 1rem;background:#fff;
  border-top:1px solid var(--border);
  display:flex;gap:.5rem;
}

.filter-block{padding-block:1rem;border-bottom:1px solid var(--border)}
.filter-block:first-child{padding-top:0}
.filter-block:last-child{border-bottom:none}
.filter-block__title{
  font-size:.8125rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--gray-700);
  margin-bottom:.625rem;
}
.filter-options{display:flex;flex-direction:column;gap:.375rem}
.filter-option{
  display:flex;align-items:center;gap:.5rem;
  font-size:.875rem;cursor:pointer;
  user-select:none;
  padding:.25rem 0;
  color:var(--gray-700);
}
.filter-option input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:1rem;height:1rem;
  border:1.5px solid var(--gray-300);
  border-radius:var(--radius-sm);
  cursor:pointer;
  flex-shrink:0;
  transition:all var(--transition);
  position:relative;
}
.filter-option input[type=checkbox]:hover{border-color:var(--primary)}
.filter-option input[type=checkbox]:checked{
  background:var(--primary);
  border-color:var(--primary);
}
.filter-option input[type=checkbox]:checked::after{
  content:'';
  position:absolute;
  top:1px;left:4px;
  width:4px;height:8px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.filter-option:hover{color:var(--fg)}
.filter-option__count{margin-left:auto;color:var(--gray-400);font-size:.75rem}
.filter-range{display:flex;align-items:center;gap:.5rem}
.filter-range input{
  flex:1;width:100%;
  padding:.375rem .5rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:.8125rem;
  background:#fff;
  outline:none;
  transition:border var(--transition);
}
.filter-range input:focus{border-color:var(--primary)}
.filter-range span{color:var(--gray-400);font-size:.8125rem}

/* === STATUS PILLS (sale / new / in-stock quick filter) === */
.status-pills{display:flex;flex-wrap:wrap;gap:.375rem}
.status-pill{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.5rem .75rem;
  border:1.5px solid var(--border);
  background:#fff;color:var(--gray-700);
  border-radius:var(--radius-full);
  font-size:.8125rem;font-weight:600;
  cursor:pointer;
  transition:all var(--transition);
  user-select:none;
}
.status-pill:hover{border-color:var(--primary);color:var(--primary)}
.status-pill.sale.active{
  background:var(--red-50,#fef2f2);
  border-color:var(--red-600,#dc2626);
  color:var(--red-700,#b91c1c);
}
.status-pill.new.active{
  background:var(--blue-50,#eff6ff);
  border-color:var(--blue-600,#2563eb);
  color:var(--blue-700,#1d4ed8);
}
.status-pill.stock.active{
  background:var(--green-50);
  border-color:var(--primary);
  color:var(--green-700);
}
.filter-select{
  width:100%;
  padding:.5rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:.875rem;
  background:#fff;
  outline:none;
  cursor:pointer;
  transition:border var(--transition);
}
.filter-select:focus{border-color:var(--primary)}

/* === LAYOUT TOGGLE === */
.layout-toggle{
  display:inline-flex;gap:.125rem;padding:.25rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:#fff;
}
.layout-toggle button{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.875rem;height:1.875rem;
  border-radius:var(--radius-sm);
  color:var(--gray-400);
  transition:all var(--transition);
}
.layout-toggle button:hover{color:var(--gray-600)}
.layout-toggle button.active{background:var(--green-100);color:var(--green-700)}

/* === PAGINATION === */
.pagination{
  margin-top:2rem;
  display:flex;align-items:center;justify-content:center;gap:.25rem;
  flex-wrap:wrap;
}
.pagination a,.pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.25rem;height:2.25rem;padding:0 .625rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:.875rem;
  background:#fff;color:var(--gray-700);
  transition:all var(--transition);
}
.pagination a:hover{background:var(--gray-50);border-color:var(--gray-300)}
.pagination .current{
  background:var(--green-50);border-color:var(--green-200);
  color:var(--green-700);font-weight:600;
  pointer-events:none;
}
.pagination .gap{
  border:none;background:none;
  color:var(--gray-400);min-width:auto;padding:0 .25rem;
}
.pagination .disabled{opacity:.5;pointer-events:none}

/* === GRID/LIST CONTAINERS === */
.products-grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:640px){.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.products-list{display:flex;flex-direction:column;gap:1rem}
.lots-grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media(min-width:640px){.lots-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.lots-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.lots-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lots-list{display:flex;flex-direction:column;gap:1rem}

/* === EMPTY STATE === */
.empty-state{
  margin:3rem auto;max-width:24rem;
  text-align:center;color:var(--gray-500);
  padding:2.5rem 1rem;
  border:1px dashed var(--border);
  border-radius:var(--radius-lg);
}
.empty-state h3{color:var(--fg);font-size:1.125rem;margin-bottom:.5rem}

/* === TOAST === */
.toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(2rem);
  background:var(--gray-900);color:#fff;
  padding:.75rem 1.25rem;border-radius:var(--radius-md);
  box-shadow:var(--shadow-xl);
  font-size:.875rem;
  opacity:0;pointer-events:none;
  transition:all var(--transition);
  z-index:200;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* === SEARCH AUTOCOMPLETE === */
.search-results{
  position:absolute;top:calc(100% + .5rem);left:0;right:0;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  max-height:24rem;overflow-y:auto;
  z-index:60;
  display:none;
}
.search-results.open{display:block}
.search-result{
  display:flex;align-items:center;gap:.75rem;
  padding:.625rem .875rem;
  transition:background var(--transition);
  border-bottom:1px solid var(--gray-100);
}
.search-result:last-child{border-bottom:none}
.search-result:hover{background:var(--gray-50)}
.search-result__img{
  width:3rem;height:3rem;flex-shrink:0;
  border-radius:var(--radius-md);overflow:hidden;
  background:var(--gray-100);
}
.search-result__img img{width:100%;height:100%;object-fit:cover}
.search-result__title{font-size:.875rem;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-result__meta{font-size:.75rem;color:var(--gray-500);margin-top:.125rem}
.search-result__price{font-size:.875rem;font-weight:700;color:var(--red-600);white-space:nowrap}
.search-empty{padding:1.5rem;text-align:center;color:var(--gray-500);font-size:.875rem}

/* === MODAL === */
.modal{
  position:fixed;inset:0;z-index:120;
  background:rgba(0,0,0,.6);
  opacity:0;visibility:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  transition:all var(--transition);
}
.modal.open{opacity:1;visibility:visible}
.modal__panel{
  background:#fff;border-radius:var(--radius-xl);
  max-width:32rem;width:100%;max-height:90vh;
  overflow-y:auto;
  transform:scale(.96);
  transition:transform var(--transition);
}
.modal.open .modal__panel{transform:scale(1)}
.modal__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;border-bottom:1px solid var(--border);
}
.modal__body{padding:1.25rem}
.modal__foot{padding:1rem 1.25rem;border-top:1px solid var(--border);display:flex;gap:.5rem;justify-content:flex-end}

/* === FORM === */
.form-field{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1rem}
.form-field label{font-size:.875rem;font-weight:500;color:var(--gray-700)}
.form-field input,.form-field textarea,.form-field select{
  padding:.5rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:.875rem;
  background:#fff;outline:none;
  transition:all var(--transition);
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgb(22 163 74 / .1);
}

/* === CATALOG TOP-BAR === */
.catalog-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.catalog-toolbar__sort{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.875rem;
}
/* === SHARE MODAL === */
.share-modal__panel{max-width:28rem}
.share-link-wrap{
  display:flex;gap:.375rem;
  margin-bottom:1rem;
}
.share-link-input{
  flex:1;min-width:0;
  padding:.5rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:.875rem;
  background:var(--gray-50);
  font-family:'JetBrains Mono','Menlo',monospace;
  color:var(--gray-700);
  outline:none;
  overflow:hidden;text-overflow:ellipsis;
}
.share-link-input:focus{background:#fff;border-color:var(--primary)}
.share-options{
  display:grid;gap:.5rem;
  grid-template-columns:repeat(2,1fr);
}
.share-option{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.625rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:#fff;
  color:var(--share-color,var(--fg));
  font-weight:600;font-size:.875rem;
  transition:all var(--transition);
}
.share-option:hover{
  border-color:var(--share-color,var(--primary));
  background:color-mix(in srgb, var(--share-color,#16a34a) 8%, #fff);
}
.share-option__icon{display:inline-flex;color:var(--share-color,var(--fg))}
@supports not (color: color-mix(in srgb, red, blue)){
  .share-option:hover{background:var(--gray-50)}
}

/* === VIDEO MODAL === */
.video-modal{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  opacity:0;visibility:hidden;
  transition:opacity var(--transition),visibility var(--transition);
}
.video-modal.open{opacity:1;visibility:visible}
.video-modal__panel{
  position:relative;
  width:100%;max-width:64rem;
  aspect-ratio:16/9;
  background:#000;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-2xl);
  transform:scale(.96);
  transition:transform var(--transition);
}
.video-modal.open .video-modal__panel{transform:scale(1)}
.video-modal__close{
  position:absolute;top:.5rem;right:.5rem;z-index:5;
  width:2.5rem;height:2.5rem;border-radius:9999px;
  background:rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--transition);
}
.video-modal__close:hover{background:rgba(0,0,0,.85)}
.video-modal__close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.video-modal__title{
  position:absolute;top:.625rem;left:1rem;z-index:1;
  color:#fff;font-weight:600;font-size:.9375rem;
  padding-right:3.25rem;line-height:1.3;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  pointer-events:none;
}
.video-modal__frame{width:100%;height:100%}
.video-modal__frame iframe{width:100%;height:100%;border:none;display:block}
@media(max-width:640px){
  .video-modal{padding:0}
  .video-modal__panel{border-radius:0;max-width:none;aspect-ratio:auto;height:100%}
}

/* Make any [data-video] trigger feel clickable */
[data-video]{cursor:pointer}

/* === LOTS PAGE PRODUCT BANNER === */
.lots-banner{
  display:grid;
  grid-template-columns:5rem 1fr auto;
  gap:1rem;
  align-items:center;
  background:linear-gradient(135deg,var(--green-50),#ffffff);
  border:1px solid var(--green-200);
  border-radius:var(--radius-lg);
  padding:1rem;
}
.lots-banner__img{
  display:block;width:5rem;height:5rem;
  border-radius:var(--radius-md);
  overflow:hidden;background:#fff;
  border:1px solid var(--border);
  flex-shrink:0;
}
.lots-banner__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition)}
.lots-banner__img:hover img{transform:scale(1.04)}
.lots-banner__info{min-width:0}
.lots-banner__title{
  display:block;margin-top:.125rem;
  font-size:1.05rem;font-weight:700;
  line-height:1.3;color:var(--fg);
  transition:color var(--transition);
}
.lots-banner__title:hover{color:var(--green-700)}
.lots-banner__meta{
  display:flex;flex-wrap:wrap;gap:.375rem;
  margin-top:.5rem;font-size:.75rem;
}
.lots-banner__actions{display:flex;gap:.5rem;flex-wrap:wrap;flex-shrink:0}

@media(max-width:640px){
  .lots-banner{grid-template-columns:4rem 1fr;gap:.75rem;padding:.75rem}
  .lots-banner__img{width:4rem;height:4rem}
  .lots-banner__actions{grid-column:1/-1}
  .lots-banner__title{font-size:.95rem}
}

.active-filters{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:1rem}
.active-filter{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.25rem .625rem;
  border:1px solid var(--green-200);
  background:var(--green-50);
  color:var(--green-700);
  border-radius:var(--radius-full);
  font-size:.75rem;
}
.active-filter button{color:var(--green-700);opacity:.7;line-height:1}
.active-filter button:hover{opacity:1}

/* === KEY FACTS === */
.key-facts{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;padding:1rem;
}
.key-facts ul{display:flex;flex-direction:column;gap:.5rem}
.key-facts li{display:flex;gap:.5rem;font-size:.875rem;align-items:baseline}
.key-facts__check{color:var(--primary);font-weight:700;flex-shrink:0;width:1rem}
.key-facts__label{width:8rem;flex-shrink:0;color:var(--gray-500)}
.key-facts__value{font-weight:500;flex:1}

/* === GALLERY === */
.gallery__main{
  position:relative;aspect-ratio:4/3;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--gray-100);
}
.gallery__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--transition)}
.gallery__main:hover img{transform:scale(1.02)}
.gallery__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.25rem;height:2.25rem;border-radius:var(--radius-full);
  background:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);color:var(--gray-700);
  transition:all var(--transition);
  z-index:5;
}
.gallery__nav:hover{background:#fff}
.gallery__nav.prev{left:.5rem}
.gallery__nav.next{right:.5rem}
.gallery__counter{
  position:absolute;bottom:.5rem;right:.5rem;z-index:5;
  background:rgba(0,0,0,.6);color:#fff;
  padding:.125rem .5rem;
  border-radius:var(--radius-full);
  font-size:.75rem;
}
.gallery__thumbs{
  display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem;
  margin-top:.75rem;scrollbar-width:thin;
}
.gallery__thumb{
  width:4rem;height:4rem;flex-shrink:0;
  border:2px solid transparent;
  border-radius:var(--radius-md);overflow:hidden;
  cursor:pointer;
  transition:border var(--transition);
}
.gallery__thumb img{width:100%;height:100%;object-fit:cover}
.gallery__thumb.active{border-color:var(--primary)}

/* === LIGHTBOX === */
.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.95);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:all var(--transition);
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:96vw;max-height:90vh;object-fit:contain}
.lightbox__close{
  position:absolute;top:1rem;right:1rem;
  width:2.5rem;height:2.5rem;border-radius:var(--radius-full);
  background:rgba(255,255,255,.1);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.lightbox__close:hover{background:rgba(255,255,255,.2)}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:3rem;height:3rem;border-radius:var(--radius-full);
  background:rgba(255,255,255,.1);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.lightbox__nav:hover{background:rgba(255,255,255,.2)}
.lightbox__nav.prev{left:1rem}
.lightbox__nav.next{right:1rem}
.lightbox__counter{
  position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-size:.875rem;
}

/* === PRICE HEAD (product page) === */
.price-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem}
.price-head__primary{font-size:2.25rem;font-weight:700;color:var(--red-600);line-height:1}
.price-head__secondary{font-size:1rem;color:var(--gray-500)}
.price-head__old{font-size:1.125rem;color:var(--gray-400);text-decoration:line-through}

/* === STOCK INDICATOR === */
.stock{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500}
.stock__dot{width:.5rem;height:.5rem;border-radius:var(--radius-full)}
.stock.in .stock__dot{background:var(--primary)}
.stock.in{color:var(--green-700)}
.stock.out .stock__dot{background:var(--amber-500)}
.stock.out{color:var(--amber-700)}

/* === SCROLLBARS === */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}