/* assets/css/pages/product-archive.css */

/* ================= TOP BAR ================= */
.page--product-archive .archive-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.page--product-archive .archive-bar__title{
  font-weight: 950;
  color: var(--color-gray-900);
  font-size: 18px;
  margin: 0;
}

.page--product-archive .archive-bar__meta{
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  margin-top: 6px;
  margin-bottom: 0;
}

.page--product-archive .archive-bar__right{
  min-width: 220px;
}

@media (max-width: 520px){
  /* Mobile: match screenshot (Filters button left, Sort dropdown right) */
  .page--product-archive .archive-bar{
    align-items: center;
  }

  .page--product-archive .archive-bar__right{
    min-width: 0;
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--space-3);
  }

  /* Prevent the select from stretching full-width in the flex row */
  .page--product-archive .archive-bar__right .select{
    width: auto;
    margin-left: auto;
  }
}

/* ================= PHONE GRID ================= */
.page--product-archive .product-grid{
  display:grid;
  gap: var(--space-4);
  /* 2-up on mobile like your screenshot */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px){
  .page--product-archive .product-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px){
  .page--product-archive .product-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ================= PHONE TILE (Screenshot style) ================= */
.page--product-archive .product-tile{
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.page--product-archive .product-tile__link{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 10px;
  padding: 9px 10px;
  padding-bottom: var(--space-3);
  color: inherit;
  text-decoration:none;
}

.page--product-archive .product-tile__link:hover{
  text-decoration:none;
}

.page--product-archive .product-tile__media{
  width: 100%;
  aspect-ratio: 1 / 1;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.page--product-archive .product-tile__media img{
  width: min(100%);
  height: auto;
  display:block;
  object-fit: contain;
}

.page--product-archive .product-tile__title{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--color-gray-900);
  line-height: 1.2;
}

.page--product-archive .product-tile__price{
  margin: 0;
  font-weight: 950;
  font-size: 14px;
  color: #65686C;
}

.page--product-archive .product-tile__compare{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px var(--space-4);
  border-top: var(--border);
  color: #080809;
  font-weight: 750;
  font-size: 13px;
  cursor:pointer;
  user-select:none;
  background: aliceblue;
}

.page--product-archive .product-tile__checkbox{
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-gray-900);
}

.page--product-archive .product-tile__compare:hover{
  background: var(--color-gray-50);
}

/* ================= FILTER SIDEBAR ================= */
.page--product-archive .filter-form{
  display:grid;
  gap: var(--space-4);
}

.page--product-archive .fieldset{
  border: 0;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 10px;
}

.page--product-archive .filter-actions{
  display:flex;
  gap: var(--space-3);
  flex-wrap:wrap;
}


/* ================= PREMIUM FILTER FIELDSETS ================= */
/* Premium, compact, and touch-friendly filter UI (Brand / Price / Network / RAM / Storage / Status) */
.page--product-archive .sidebar .filter-form{
  gap: var(--space-3);
}

.page--product-archive .sidebar .fieldset{
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  padding: 12px;
  gap: 8px;
}

.page--product-archive .sidebar .fieldset > .label{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--color-gray-700);
}

.page--product-archive .sidebar .checkbox{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.page--product-archive .sidebar .checkbox:hover{
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}

.page--product-archive .sidebar .checkbox:active{
  transform: translateY(1px);
}

.page--product-archive .sidebar .checkbox__input{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Custom checkbox box */
.page--product-archive .sidebar .checkbox__box{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.page--product-archive .sidebar .checkbox__box::after{
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.page--product-archive .sidebar .checkbox__text{
  font-size: 13px;
  font-weight: 650;
  color: var(--color-gray-800);
  line-height: 1.2;
}

/* Checked state */
.page--product-archive .sidebar .checkbox__input:checked + .checkbox__box{
  background: var(--color-gray-900);
  border-color: var(--color-gray-900);
}

.page--product-archive .sidebar .checkbox__input:checked + .checkbox__box::after{
  transform: rotate(-45deg) scale(1);
  opacity: 1;
}

/* Keyboard focus (accessibility) */
.page--product-archive .sidebar .checkbox__input:focus-visible + .checkbox__box{
  outline: 3px solid rgba(17,24,39,.18);
  outline-offset: 3px;
}

/* Slightly denser on smaller devices */
@media (max-width: 480px){
  .page--product-archive .sidebar .fieldset{ padding: 10px; }
  .page--product-archive .sidebar .checkbox{ padding: 9px 10px; border-radius: 12px; }
}



/* =========================================================
   Best-practice filters (Accordion + Mobile Drawer + Chips)
   ========================================================= */

.page--product-archive .filter-open{
  display: none;
  gap: 8px;
  align-items: center;
}

/* Active filter chips */
.page--product-archive .active-filters{
  display: none;
  margin: 10px 0 14px;
}
.page--product-archive .active-filters--show{ display:block; }

.page--product-archive .active-filters__inner{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.page--product-archive .chip{
  appearance: none;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.page--product-archive .chip:hover{
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}
.page--product-archive .chip:active{ transform: translateY(1px); }

.page--product-archive .chip--clear{
  border-style: dashed;
  font-weight: 700;
}

.page--product-archive .chip__x{
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--color-gray-200);
}

/* Filter header */
.page--product-archive .filter-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Accordion sections */
.page--product-archive .filter-acc{
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: var(--color-gray-50);
  overflow: hidden;
  margin: 0 0 12px;
}

.page--product-archive .filter-acc__summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--color-gray-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page--product-archive .filter-acc__summary::-webkit-details-marker{ display:none; }
.page--product-archive .filter-acc__summary:after{
  content: "▾";
  font-size: 14px;
  opacity: .7;
  transform: translateY(-1px);
  transition: transform .18s ease;
}
.page--product-archive details[open] > .filter-acc__summary:after{
  transform: rotate(180deg);
}

.page--product-archive .filter-acc__panel{
  border-top: 1px solid var(--color-gray-200);
}

/* Row style like your screenshot */
.page--product-archive .filter-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-white);
}
.page--product-archive .filter-row:last-child{ border-bottom: none; }

.page--product-archive .filter-row span{
  font-size: 15px;
  font-weight: 700;
  color: var(--color-gray-900);
}

.page--product-archive .filter-row input[type="checkbox"]{
  width: 20px;
  height: 20px;
  border-radius: 6px;
  accent-color: var(--color-gray-900);
}

/* Remove old spacing inside filter form when using accordions */
.page--product-archive .filter-form .filter-actions{
  margin-top: 8px;
}

/* Mobile drawer behavior */
@media (max-width: 991px){
  .page--product-archive .filter-open{ display: inline-flex; }
  /* Desktop sidebar hidden on mobile */
  .page--product-archive #filterSidebar{ display: none !important; }
  
  .page--product-archive .archive-bar__title{
    display:none !important;
  }

  .page--product-archive .archive-bar__meta{
    display:none !important;
  }

    .page--product-archive .product-filter-drawer{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(88vw, 380px);
    z-index: 1002;

    /* Slide in from right (like drawer menu) */
    transform: translateX(110%);
    transition: transform .22s ease;

    max-height: 100vh;
    overflow: auto;

    /* Safe-area padding for notches */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .page--product-archive .filter-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.42);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  .page--product-archive.filters-open .filter-overlay,
  .page--product-archive .filter-overlay.active{
    opacity: 1;
    pointer-events: auto;
  }
  .page--product-archive.filters-open .product-filter-drawer,
  .page--product-archive .product-filter-drawer.active{
    transform: translateX(0);
  }
  .no-scroll{
    overflow: hidden;
  }
}


@media (min-width: 992px){
  .page--product-archive #mobileFilterDrawer{ display: none !important; }
  .page--product-archive #filterOverlay{ display: none !important; }
}


.price-range .range-slider{
  position: relative;
  /*
    Keep the thumbs perfectly centered on the visual track across devices.
    We use shared sizing tokens + browser-specific track/thumb alignment.
  */
  --range-pad: 10px;
  --range-track-h: 8px;
  --range-thumb: 18px;
  padding: var(--range-pad);
  margin-top: 15px;
}

.price-range .range-track{
  position: relative;
  height: var(--range-track-h);
  border-radius: 999px;
  background: var(--color-gray-200);
  overflow: hidden;
}

.price-range .range-progress{
  position: absolute;
  height: 100%;
  left: 0%;
  right: 0%;
  background: var(--color-gray-900); /* selected range color */
}

.price-range .range-input{
  position: absolute;
  left: 0;
  /* Align the native input track with the visual .range-track */
  top: var(--range-pad);
  width: 100%;
  height: var(--range-track-h);
  margin: 0;
  pointer-events: none;
  appearance: none;
  background: transparent;
}

/* Make the native track match our visual track height */
.price-range .range-input::-webkit-slider-runnable-track{
  height: var(--range-track-h);
  background: transparent;
}

.price-range .range-input::-moz-range-track{
  height: var(--range-track-h);
  background: transparent;
  border: 0;
}

.price-range .range-input::-moz-range-progress{
  height: var(--range-track-h);
  background: transparent;
}

.price-range .range-input::-webkit-slider-thumb{
  pointer-events: auto;
  appearance: none;
  width: var(--range-thumb);
  height: var(--range-thumb);
  border-radius: 50%;
  background: var(--color-white); /* handle */
  border: 2px solid var(--color-gray-900); /* handle inside selected area color */
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  /* Center thumb on the track (WebKit needs explicit offset) */
  margin-top: calc((var(--range-track-h) - var(--range-thumb)) / 2);
}

.price-range .range-input::-moz-range-thumb{
  pointer-events: auto;
  width: var(--range-thumb);
  height: var(--range-thumb);
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-gray-900);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

.price-range .range-fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.price-range .range-field{
  display: grid;
  gap: 6px;
}

.price-range .range-field__label{
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.price-range .range-number{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  font: inherit;
  background: var(--color-white);
  color: var(--color-gray-900);
}

.price-range .range-number:focus{
  outline: none;
  border-color: var(--color-gray-400);
  box-shadow: 0 0 0 3px rgba(17,24,39,.08);
}



/* Price Range (override) - red full track + black selected */
.price-range .range-track{
  background: #ff3b30 !important;
}
.price-range .range-progress{
  background: #0b1220 !important;
}

/* Ensure range inputs don't paint over track in some browsers */
.price-range .range-input{
  background: transparent !important;
}

/* Remove number input spinners */
.price-range input[type="number"]::-webkit-outer-spin-button,
.price-range input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.price-range input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Price Range (Final Alignment Fix) */
.price-range{
  /*! padding: 20px 20px; */
}

.price-range input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: transparent;
}

/* Full track (red) */
.price-range .range-track{
  background:  #0b1220 !important;
  height: 8px;
  border-radius: 999px;
}

/* Selected area (black) */
.price-range .range-progress{
  background: #0866FF !important;
  height: 8px;
  border-radius: 999px;
}

/* WebKit Thumb */
.price-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0b1220;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  margin-top: -7px; /* Vertical center fix */
}

/* Firefox Thumb */
.price-range input[type="range"]::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0b1220;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Remove number input arrows */
.price-range input[type="number"]::-webkit-outer-spin-button,
.price-range input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.price-range input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}


/* Product archive page title badge (only on this page) */
.page--product-archive .hero__title--with-badge{
  display: flex;
  align-items: center;
  gap: 12px;
}

.page--product-archive .hero__title-badge{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page--product-archive .hero__title-badge img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* ================= DARK MODE FIXES (product-archive filters) ================= */
html[data-theme="dark"] .page--product-archive .filter-acc{
  background: rgba(229,231,235,0.06);
  border-color: rgba(229,231,235,0.12);
}
html[data-theme="dark"] .page--product-archive .filter-acc__summary{
  color: var(--text);
}
html[data-theme="dark"] .page--product-archive .filter-acc__panel{
  border-top-color: rgba(229,231,235,0.12);
}
html[data-theme="dark"] .page--product-archive .filter-row{
  background: rgba(15,23,42,0.65); /* subtle surface */
  border-bottom-color: rgba(229,231,235,0.10);
}
html[data-theme="dark"] .page--product-archive .filter-row span{
  color: var(--text);
}

/* Price range slider: make selected range visible on dark bg */
html[data-theme="dark"] .page--product-archive .price-range .range-track{
  background: #ff3b30 !important;
}
html[data-theme="dark"] .page--product-archive .price-range .range-progress{
  background: var(--text) !important;
  opacity: .9;
}

/* Range thumbs (WebKit + Firefox) */
html[data-theme="dark"] .page--product-archive .price-range input[type="range"]::-webkit-slider-thumb{
  background: var(--text);
  border: 2px solid rgba(229,231,235,0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
html[data-theme="dark"] .page--product-archive .price-range input[type="range"]::-moz-range-thumb{
  background: var(--text);
  border: 2px solid rgba(229,231,235,0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Min/Max number inputs inside price range */
html[data-theme="dark"] .page--product-archive .price-range input[type="number"]{
  background: rgba(15,23,42,0.8);
  color: var(--text);
  border-color: rgba(229,231,235,0.18);
}