/**
 * EcommPaaS Porto V2 — Search Results Page Clean Rewrite
 * Prefix: .sr-  | Scoped: body.catalogsearch-result-index
 * Loaded AFTER porto.css so our rules win.
 */

/* TOKEN SYSTEM */
body.catalogsearch-result-index {
  --sr-blue:          #0088cc;
  --sr-blue-dark:     #006699;
  --sr-text:          #222529;
  --sr-text-light:    #777;
  --sr-bg:            #fff;
  --sr-bg-grey:       #f4f4f4;
  --sr-border:        #e7e7e7;
  --sr-radius:        4px;
  --sr-font:          Poppins, 'Open Sans', Helvetica, Arial, sans-serif;
  --sr-max-width:     1200px;
  --sr-sidebar-w:     295px;
  --sr-gap:           30px;
}

/* BOX-SIZING RESET for sr- components */
body.catalogsearch-result-index [class^="sr-"],
body.catalogsearch-result-index [class*=" sr-"] {
  box-sizing: border-box;
  font-family: var(--sr-font);
}

body.catalogsearch-result-index [class^="sr-"] *,
body.catalogsearch-result-index [class*=" sr-"] * {
  box-sizing: border-box;
}

/* ============================================================
   COLUMN WIDTH OVERRIDE — defeat .column.main constraint
   ============================================================ */
body.catalogsearch-result-index .page-wrapper {
  max-width: 100% !important;
}

body.catalogsearch-result-index .page-main {
  max-width: var(--sr-max-width) !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin: 0 auto !important;
}

/* Defeat porto.css sidebar-RIGHT forced layout for search page */
@media (min-width: 768px) {
  html body.catalogsearch-result-index.page-layout-2columns-left .columns {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--sr-gap) !important;
    align-items: flex-start !important;
  }

  html body.catalogsearch-result-index.page-layout-2columns-left .columns .sidebar.sidebar-main {
    order: -1 !important;
    flex: 0 0 var(--sr-sidebar-w) !important;
    width: var(--sr-sidebar-w) !important;
    float: none !important;
    padding: 0 !important;
  }

  html body.catalogsearch-result-index.page-layout-2columns-left .columns .column.main {
    order: 1 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    float: none !important;
    padding-right: 0 !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   1. SR-PAGE-HEADER — breadcrumbs + H1 + result count
   ============================================================ */
body.catalogsearch-result-index .sr-page-header {
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--sr-border);
  margin-bottom: 24px;
}

body.catalogsearch-result-index .sr-page-header__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--sr-text);
  margin: 0 0 6px;
  font-family: var(--sr-font);
  text-transform: none;
}

body.catalogsearch-result-index .sr-page-header__title span {
  color: var(--sr-blue);
}

/* Breadcrumbs */
body.catalogsearch-result-index .breadcrumbs {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 8px;
  font-size: 12px;
}

body.catalogsearch-result-index .breadcrumbs .items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.catalogsearch-result-index .breadcrumbs .item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--sr-text-light);
  font-size: 12px;
}

body.catalogsearch-result-index .breadcrumbs .item a {
  color: var(--sr-text-light);
  text-decoration: none;
}

body.catalogsearch-result-index .breadcrumbs .item a:hover {
  color: var(--sr-blue);
}

body.catalogsearch-result-index .breadcrumbs .item:not(:last-child)::after {
  content: '\203A';
  color: var(--sr-text-light);
  font-size: 11px;
}

/* ============================================================
   2. SR-TOOLBAR — sort, view-as, count, per-page
   ============================================================ */
body.catalogsearch-result-index .sr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sr-border);
}

/* porto.css TOOLBAR-01 hides .toolbar.toolbar-products for body.page-products,
   which Magento ALSO applies to search results pages. Override with !important. */
body.catalogsearch-result-index .toolbar.toolbar-products {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sr-border);
  background: none;
}

body.catalogsearch-result-index .toolbar-amount {
  font-size: 13px;
  color: var(--sr-text-light);
  order: 0;
}

body.catalogsearch-result-index .toolbar-sorter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  order: 1;
}

body.catalogsearch-result-index .toolbar-sorter label {
  color: var(--sr-text);
  font-weight: 600;
  font-size: 13px;
  margin: 0;
}

body.catalogsearch-result-index .toolbar-sorter select {
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: 5px 28px 5px 10px;
  font-size: 13px;
  color: var(--sr-text);
  background: var(--sr-bg);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23777'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

body.catalogsearch-result-index .modes {
  display: flex;
  gap: 4px;
  order: 2;
}

body.catalogsearch-result-index .modes-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  color: var(--sr-text-light);
  text-decoration: none;
  font-size: 14px;
}

body.catalogsearch-result-index .modes-mode.active,
body.catalogsearch-result-index .modes-mode:hover {
  border-color: var(--sr-blue);
  color: var(--sr-blue);
}

body.catalogsearch-result-index .limiter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  order: 3;
}

body.catalogsearch-result-index .limiter-label {
  color: var(--sr-text);
  font-weight: 600;
}

body.catalogsearch-result-index .limiter-options {
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: 5px 8px;
  font-size: 13px;
  color: var(--sr-text);
  background: var(--sr-bg);
}

/* Bottom toolbar (pagination row) */
body.catalogsearch-result-index .toolbar.toolbar-products + .toolbar.toolbar-products {
  border-top: 1px solid var(--sr-border);
  border-bottom: none;
  padding-top: 20px;
  margin-top: 20px;
  margin-bottom: 0;
}

/* ============================================================
   3. SR-LAYOUT — sidebar LEFT + product grid
   ============================================================ */
body.catalogsearch-result-index .columns {
  margin-top: 20px;
}

/* ============================================================
   4. SR-FILTERS — Shop By sidebar
   ============================================================ */
body.catalogsearch-result-index .sidebar.sidebar-main {
  font-size: 13px;
}

body.catalogsearch-result-index .filter-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sr-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sr-text);
}

body.catalogsearch-result-index .filter-title strong {
  font-weight: 700;
}

body.catalogsearch-result-index .filter-subtitle {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sr-text-light);
  letter-spacing: 0.5px;
  margin: 16px 0 8px;
}

body.catalogsearch-result-index .filter-options {
  margin: 0;
}

body.catalogsearch-result-index .filter-options-item {
  border-bottom: 1px solid var(--sr-border);
  margin-bottom: 0;
}

body.catalogsearch-result-index .filter-options-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--sr-text);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

body.catalogsearch-result-index .filter-options-title::after {
  content: '+';
  font-size: 16px;
  color: var(--sr-text-light);
  line-height: 1;
}

body.catalogsearch-result-index .filter-options-item.active .filter-options-title::after {
  content: '-';
}

body.catalogsearch-result-index .filter-options-content {
  padding-bottom: 12px;
}

body.catalogsearch-result-index .filter-options-content .items {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.catalogsearch-result-index .filter-options-content .item {
  padding: 3px 0;
}

body.catalogsearch-result-index .filter-options-content .item a {
  color: var(--sr-text);
  font-size: 13px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.catalogsearch-result-index .filter-options-content .item a:hover {
  color: var(--sr-blue);
}

body.catalogsearch-result-index .filter-options-content .count {
  color: var(--sr-text-light);
  font-size: 11px;
}

/* Price slider */
body.catalogsearch-result-index .filter-options-content .price {
  font-size: 13px;
}

/* Current filters */
body.catalogsearch-result-index .filter-current {
  margin-bottom: 16px;
}

body.catalogsearch-result-index .filter-current-subtitle {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sr-text-light);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

body.catalogsearch-result-index .filter-current .items {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.catalogsearch-result-index .filter-current .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--sr-text);
  padding: 2px 0;
}

body.catalogsearch-result-index .filter-current .remove {
  color: var(--sr-text-light);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}

body.catalogsearch-result-index .action.clear.filter-clear {
  font-size: 12px;
  color: var(--sr-blue);
  text-decoration: none;
}

/* ============================================================
   5. SR-PRODUCTS — product grid (4 columns desktop)
   ============================================================ */
body.catalogsearch-result-index .products.wrapper.grid.products-grid {
  margin: 0;
}

body.catalogsearch-result-index .products.wrapper.grid .products.list.items.product-items {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

@media (max-width: 1199px) {
  body.catalogsearch-result-index .products.wrapper.grid .products.list.items.product-items {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 767px) {
  body.catalogsearch-result-index .products.wrapper.grid .products.list.items.product-items {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ============================================================
   6. SR-PRODUCT-CARD — image, name, price, rating, add to cart
   ============================================================ */
body.catalogsearch-result-index .product-items .product-item {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none;
}

body.catalogsearch-result-index .product-items .product-item-info {
  width: 100% !important;
  position: relative;
  /* R161: !important needed — porto.css line 12048 `.pt-product-card { border: none !important }`
     beats our (0,3,0) rule. With !important + our higher specificity (0,3,0) vs (0,1,0) we win.
     Transparent border keeps box-model stable, prevents 1px layout shift on hover. */
  border: 1px solid transparent !important;
  border-radius: var(--sr-radius);
  overflow: hidden;
  background: var(--sr-bg);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.catalogsearch-result-index .product-items .product-item-info:hover {
  border-color: var(--sr-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

body.catalogsearch-result-index .product-items .product-item-photo {
  display: block;
  text-align: center;
  overflow: hidden;
  background: var(--sr-bg-grey);
}

body.catalogsearch-result-index .product-items .product-image-container {
  width: 100% !important;
  display: block;
}

body.catalogsearch-result-index .product-items .product-image-wrapper {
  height: 0 !important;
  padding-bottom: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}

body.catalogsearch-result-index .product-items .product-image-photo {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 8px;
}

body.catalogsearch-result-index .product-items .product-item-details {
  padding: 10px 12px 12px;
}

body.catalogsearch-result-index .product-items .product-item-name {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.4;
}

body.catalogsearch-result-index .product-items .product-item-name a {
  color: var(--sr-text);
  text-decoration: none;
  font-weight: 400;
}

body.catalogsearch-result-index .product-items .product-item-name a:hover {
  color: var(--sr-blue);
}

/* Rating stars */
body.catalogsearch-result-index .product-items .product-reviews-summary {
  margin-bottom: 6px;
}

body.catalogsearch-result-index .product-items .rating-summary {
  display: inline-block;
}

/* Price */
body.catalogsearch-result-index .product-items .price-box {
  margin-bottom: 10px;
}

body.catalogsearch-result-index .product-items .price-box .price {
  font-size: 16px;
  font-weight: 600;
  color: #444;
}

body.catalogsearch-result-index .product-items .price-box .old-price .price {
  font-size: 13px;
  font-weight: 400;
  color: var(--sr-text-light);
  text-decoration: line-through;
}

/* R87: Porto Demo 1 uses dark #444 for ALL prices including sale/special prices on search cards.
   porto.css has `color:#ff5b5b!important` for special prices globally — must use !important
   to override it. Previous value #e41e26 (red) was also wrong; reference confirms #444 for all. */
body.catalogsearch-result-index .product-items .price-box .special-price .price {
  color: #444 !important;
}

/* Add to cart */
body.catalogsearch-result-index .product-items .product-item-actions {
  margin-top: 8px;
}

body.catalogsearch-result-index .product-items .action.tocart.primary {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: var(--sr-blue);
  color: #fff;
  border: none;
  border-radius: 0; /* R159: flat 0px — Porto Demo 1 ATC style (matches R55 category ATC) */
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.2s ease;
}

body.catalogsearch-result-index .product-items .action.tocart.primary:hover {
  background: var(--sr-blue-dark);
}

/* ============================================================
   7. SR-PAGINATION — prev/next + page numbers
   ============================================================ */
body.catalogsearch-result-index .pages {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.catalogsearch-result-index .pages .pages-items {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.catalogsearch-result-index .pages .item {
  display: flex;
}

body.catalogsearch-result-index .pages .item a,
body.catalogsearch-result-index .pages .item strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  font-size: 13px;
  color: var(--sr-text);
  text-decoration: none;
  background: var(--sr-bg);
}

body.catalogsearch-result-index .pages .item a:hover {
  border-color: var(--sr-blue);
  color: var(--sr-blue);
}

body.catalogsearch-result-index .pages .item.current strong {
  background: var(--sr-blue);
  border-color: var(--sr-blue);
  color: #fff;
  font-weight: 700;
}

body.catalogsearch-result-index .pages .action.previous,
body.catalogsearch-result-index .pages .action.next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  color: var(--sr-text-light);
  text-decoration: none;
  background: var(--sr-bg);
}

body.catalogsearch-result-index .pages .action.previous:hover,
body.catalogsearch-result-index .pages .action.next:hover {
  border-color: var(--sr-blue);
  color: var(--sr-blue);
}

/* ============================================================
   8. SR-EMPTY — no results state
   ============================================================ */
body.catalogsearch-result-index .message.notice {
  padding: 16px 20px;
  background: #fef9e7;
  border: 1px solid #f1c40f;
  border-radius: var(--sr-radius);
  color: var(--sr-text);
  font-size: 14px;
  margin: 0;
}

body.catalogsearch-result-index .message.notice > *:first-child::before {
  display: none;
}

body.catalogsearch-result-index .search.results .message.notice {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  body.catalogsearch-result-index .page-main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.catalogsearch-result-index .columns {
    flex-direction: column !important;
  }

  html body.catalogsearch-result-index.page-layout-2columns-left .columns .sidebar.sidebar-main {
    width: 100% !important;
    flex: none !important;
  }

  body.catalogsearch-result-index .toolbar.toolbar-products {
    flex-direction: column;
    align-items: flex-start;
  }

  body.catalogsearch-result-index .sr-page-header__title {
    font-size: 20px;
  }
}

/* ============================================================
   ADVANCED SEARCH PAGE — body.catalogsearch-advanced-index
   Porto Demo 1 reference does NOT show a gray page-title-wrapper
   band on the Advanced Search page. The title sits inline in the
   page content area with no gray background or extra padding.
   Suppress the global porto.css gray band for this page.
   ============================================================ */
body.catalogsearch-advanced-index .page-title-wrapper {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
/* R99: Advanced Search page-title fw is 700 (measured live on reference). The R71 comment
   was wrong — it confused the global page-title rule (fw:400 on some pages) with advsearch
   which inherits the standard 700 heading weight. */
body.catalogsearch-advanced-index .page-title-wrapper .page-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0088cc !important;
  text-transform: none !important;
  margin: 0 0 15px !important;
}
body.catalogsearch-advanced-index .pt-page-header-wrap {
  display: none !important;
}

body.catalogsearch-advanced-index form.search.advanced .actions-toolbar {
  margin-left: 0 !important;
}

/* R108: P13 legend — reference Porto Demo 1 measures font-weight:400 (not 700).
   porto.css sets 700!important for both legend and legend>span; override back to 400.
   R105 was a mis-measurement; R108 restores parity with reference.
   Must target span separately — porto.css line 17104 has a specific span rule. */
body.catalogsearch-advanced-index .legend,
body.catalogsearch-advanced-index fieldset.fieldset > legend.legend {
  font-size: 16px !important;
  font-weight: 400 !important;
}
body.catalogsearch-advanced-index .legend > span,
body.catalogsearch-advanced-index fieldset > .legend span,
body.catalogsearch-advanced-index fieldset.fieldset > legend span {
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* R50: porto.css `html body span:not([class]) { color: #777 !important }` overrides
   the inherited white from button.action.search.primary. Fix with explicit span rule. */
body.catalogsearch-advanced-index form.search.advanced .action.search.primary span {
  color: #fff !important;
}

/* R97: advsearch button is blue+flat (0px radius) on Porto Demo 1 reference — R96's pill-right
   was wrong and didn't apply anyway. Button bg is already correct from porto.css. */

/* R97: Porto Demo 1 reference advsearch text inputs are 40px tall (was 50px via porto.css global).
   Use body-class + broad input selector with !important to beat porto.css fieldset rules. */
body.catalogsearch-advanced-index .field .control input[type="text"],
body.catalogsearch-advanced-index .field .control input[type="number"],
body.catalogsearch-advanced-index .field .control input.input-text {
  height: 40px !important;
  box-sizing: border-box !important;
}

/* R81: porto.css line 12099 sets `.fieldset>.field>.control select { height: 50px !important }`
   for all form selects. Advsearch license dropdown should be natural ~37px per reference.
   Must use !important to beat the source rule. */
body.catalogsearch-advanced-index form.search.advanced .field .control select {
  height: auto !important;
}

/* R100: porto.css line 17163 has specificity (0,6,2) with font-weight:600 !important,
   beating the R99 fix which had lower specificity. Selector with .actions-toolbar
   raises specificity to (0,7,2) and wins the cascade to restore the reference value 700.
   R119: reference submit btn is 14px/11.2px 28px; porto.css sets 0.8em (~12.8px) and
   padding:0 on .btn.action elements. Match reference exactly with explicit px values. */
body.catalogsearch-advanced-index form.form.search.advanced .actions-toolbar .action.search {
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 11px 28px !important;
}