/* Pro Search / OCTemplates Techstore bridge.  The orange accent is the
 * storefront's own #FF6700 palette and is shared by every interactive state. */
.psl {
  --psl-ink: #4f5f6f;
  --psl-muted: #7b8791;
  --psl-soft: #f5f7f8;
  --psl-line: #e5e9ec;
  --psl-accent: #FF6700;
  --psl-accent-dark: #d95300;
  --psl-accent-gradient: linear-gradient(135deg, #FF6700 0%, #ff914d 100%);
  --psl-accent-gradient-hover: linear-gradient(135deg, #d95300 0%, #FF6700 100%);
  --psl-success: #24945b;
  --psl-radius: 10px;
  font-family: Montserrat, "Open Sans", Arial, sans-serif;
}

/* The catalog/search page already has its breadcrumb context.  Do not add a
 * second large module heading above the toolbar or category cards.  The
 * original OpenCart heading remains available automatically when Pro Search
 * is disabled. */
.psl-header,
.psch-head { display: none !important; }

.psl h1, .psl h2, .psl h3, .psl button, .psl input, .psl select { font-family: inherit; }
.psl-header { border-bottom: 1px solid var(--psl-line); margin-bottom: 18px; padding-bottom: 12px; }
.psl-heading-row h1 { color: var(--psl-ink); letter-spacing: -.02em; }
.psl-total, .psl-query-summary { color: var(--psl-muted); }
.psl-query-summary strong, .psl-total strong { color: var(--psl-ink); }

.psl-toolbar {
  /* Keep the toolbar in the theme's normal container and balance the two
   * separator lines around the category controls. */
  border-bottom: 1px solid var(--psl-line);
  border-top: 1px solid var(--psl-line);
  gap: 12px;
  padding: 10px 0;
}
.psl-toolbar-controls, .psl-sort, .psl-sort select { border-radius: var(--psl-radius); }
.psl-sort { background: #fff; border: 1px solid #d5d9dd; color: var(--psl-ink); }
.psl-sort select { color: var(--psl-ink); }
.psl-sort svg { color: var(--psl-accent-dark); transition: color .18s ease, transform .18s ease; }
.psl-category-card { border-color: #d5d9dd; border-radius: var(--psl-radius); color: var(--psl-ink); }
.psl-category-card:hover, .psl-category-card.is-active { background: var(--psl-accent-gradient); border-color: var(--psl-accent); box-shadow: 0 7px 18px rgba(255,103,0,.2); color: #fff; transform: translateY(-1px); }
.psl-category-carousel.is-toolbar .psl-category-card,
.psl[data-mode="category"] .psl-category-carousel.is-compact .psl-category-card {
  background: #fff;
  border-color: #d5d9dd;
  border-radius: var(--psl-radius);
  color: var(--psl-ink);
}
.psl-category-carousel.is-toolbar .psl-category-card:hover,
.psl-category-carousel.is-toolbar .psl-category-card:focus,
.psl-category-carousel.is-toolbar .psl-category-card.is-active,
.psl[data-mode="category"] .psl-category-carousel.is-compact .psl-category-card:hover,
.psl[data-mode="category"] .psl-category-carousel.is-compact .psl-category-card:focus,
.psl[data-mode="category"] .psl-category-carousel.is-compact .psl-category-card.is-active {
  background: var(--psl-accent-gradient);
  border-color: var(--psl-accent);
  box-shadow: 0 7px 18px rgba(255,103,0,.2);
  color: #fff;
}
.psl-toolbar-context .psl-category-carousel.is-toolbar .psl-category-strip,
.psl-toolbar-context .psl-category-carousel.is-compact .psl-category-strip {
  justify-content: flex-start;
}

.psl-filters { border: 1px solid #dfe4e8; border-radius: 14px; box-shadow: 0 12px 28px rgba(79,95,111,.07); }
.psl-facet { border-bottom-color: var(--psl-line); }
.psl-facet-title { color: var(--psl-ink); }
.psl-facet-title:hover { background: #fff3eb; color: var(--psl-accent-dark); }
.psl-facet-title svg, .psl-facet-toggle svg { color: var(--psl-accent-dark); }
.psl-facet-option:hover, .psl-facet-option.is-selected { background: #fff3eb; color: var(--psl-ink); }
.psl-facet-option input:checked + .psl-radio, .psl-facet-option input:checked + .psl-check { border-color: var(--psl-accent); background: var(--psl-accent-gradient); box-shadow: 0 0 0 2px rgba(255,103,0,.12); }
.psl-facet-count, .psl-price-range-count { background: #fff0e6; color: var(--psl-accent-dark); border: 1px solid rgba(255,103,0,.16); border-radius: 8px; transition: background .18s ease, color .18s ease, transform .18s ease; }
.psl-facet-count:hover, .psl-price-range-count:hover { background: var(--psl-accent-gradient); color: #fff; transform: translateY(-1px); }
.psl-mobile-filter i, .psl-quick-control i { background: var(--psl-accent-gradient); box-shadow: 0 3px 8px rgba(255,103,0,.2); }
.psl-quick-chip.is-active, .psl-active-chip { background: var(--psl-accent-gradient); border-color: var(--psl-accent); }
.psl-facet-search, .psl-price-input { border: 1px solid #d5d9dd; border-radius: var(--psl-radius); }
.psl-facet-search:focus, .psl-price-input:focus { border-color: var(--psl-accent); box-shadow: 0 0 0 3px rgba(255,103,0,.14); outline: 0; }
.psl-price-inputs label:focus-within { border-color: var(--psl-accent); box-shadow: 0 0 0 3px rgba(255,103,0,.14); }
.psl-range-track i { background: var(--psl-accent-gradient); box-shadow: 0 1px 3px rgba(255,103,0,.24); }
.psl-dual-range input[type="range"]::-webkit-slider-thumb { background: var(--psl-accent); box-shadow: 0 1px 4px rgba(255,103,0,.28), 0 0 0 1px var(--psl-accent); }
.psl-dual-range input[type="range"]::-moz-range-thumb { background: var(--psl-accent); box-shadow: 0 1px 4px rgba(255,103,0,.28), 0 0 0 1px var(--psl-accent); }
.psl-dual-range input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(255,103,0,.28), 0 0 0 4px rgba(255,103,0,.18); }
.psl-dual-range input[type="range"]:focus::-moz-range-thumb { box-shadow: 0 1px 4px rgba(255,103,0,.28), 0 0 0 4px rgba(255,103,0,.18); }
.psl-price-preset:hover { background: #fff3eb; color: var(--psl-accent-dark); }
.psl-price-preset.is-selected { background: #fff0e6; color: var(--psl-accent-dark); }
.psl-price-preset.is-selected i { border-color: var(--psl-accent); }
.psl-price-preset small, .psl-check-row small { background: #fff0e6; border: 1px solid rgba(255,103,0,.14); border-radius: 8px; color: var(--psl-accent-dark); transition: background .18s ease, color .18s ease, transform .18s ease; }
.psl-price-preset:hover small, .psl-check-row:hover small { background: var(--psl-accent-gradient); color: #fff; transform: translateY(-1px); }
.psl-switch-row:hover { background: rgba(255,103,0,.06); }
.psl-switch-row input:checked + i { background: var(--psl-accent-gradient); box-shadow: 0 3px 9px rgba(255,103,0,.2); }
.psl-switch-row input:focus + i { box-shadow: 0 0 0 3px rgba(255,103,0,.15); }
.psl-check-row:hover { background: #fff7f1; }
.psl-check-row:has(input:checked) { background: #fff0e6; color: var(--psl-accent-dark); }
.psl-check-row input:checked + i { background: var(--psl-accent-gradient); border-color: var(--psl-accent); }
.psl-check-row input:focus + i { box-shadow: 0 0 0 3px rgba(255,103,0,.15); }
.psl-check-row:has(input:checked) small { background: var(--psl-accent-gradient); color: #fff; }

/* The desktop filter is intentionally compact: 272px is 20% below the
 * previous 340px column while the product grid keeps the remaining width. */
@media (min-width: 992px) {
  .psl-layout { grid-template-columns: minmax(248px, 272px) minmax(0, 1fr); }
}

.psl-grid { gap: 18px; }
.psl-card { background: #fff; border: 1px solid #e5e9ec; border-radius: var(--psl-radius); box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.psl-card:hover, .psl-card:focus-within { border-color: #cbdde3; box-shadow: 0 8px 22px rgba(79,95,111,.12); transform: translateY(-2px); }
.psl-card-media { border-radius: var(--psl-radius) var(--psl-radius) 0 0; }
.psl-card-image { background: #fff; }
.psl-card-image img { border-radius: var(--psl-radius); }
.psl-card-kicker { color: #8d99a2; }
.psl-card-title a { color: var(--psl-ink); }
.psl-card-title a:hover { color: var(--psl-accent-dark); }
.psl-card-status.is-available { color: var(--psl-success); }
.psl-card-footer { border-top-color: var(--psl-line); }
.psl-card-price strong { color: var(--psl-ink); }
/* MSK action treatment: a light horizontal icon row with no panel, border or
 * background.  Only the glyph changes on hover; the tooltip stays matte. */
.psl-card-media { overflow: visible; }
.psl-card-actions {
  backdrop-filter: none;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  right: 9px;
  top: 8px;
}
.psl-card:hover .psl-card-actions,
.psl-card:focus-within .psl-card-actions { background: transparent !important; box-shadow: none !important; }
.psl-icon-button { color: #424a51; }
.psl-icon-button { background: transparent; border: 0; border-radius: 50%; box-shadow: none; height: 26px; width: 26px; }
.psl-icon-button:hover, .psl-icon-button:focus { background: transparent; border: 0; box-shadow: none; color: var(--psl-accent-dark); transform: scale(1.1); }
.psl-icon-button.is-wishlist:hover, .psl-icon-button.is-wishlist:focus { background: transparent; color: #d94761; }
.psl-icon-button svg { height: 16px; stroke-width: 1.25; width: 16px; }
.psl-icon-button::after { background: #1d2226; border-radius: 7px; box-shadow: 0 5px 14px rgba(17,29,39,.16); left: auto; right: calc(100% + 10px); top: 50%; transform: translate(5px,-50%); z-index: 30; }
.psl-icon-button:hover::after, .psl-icon-button:focus::after { transform: translate(0,-50%); }
.psl-cart-button, .psl-empty-reset, .psl-load-more, .psl-filter-apply { background: var(--psl-accent-gradient); border-color: var(--psl-accent); border-radius: var(--psl-radius); box-shadow: 0 7px 15px rgba(255,103,0,.16); color: #fff; }
.psl-cart-button:hover, .psl-cart-button:focus, .psl-empty-reset:hover, .psl-load-more:hover, .psl-filter-apply:hover { background: var(--psl-accent-gradient-hover); border-color: var(--psl-accent-dark); box-shadow: 0 10px 21px rgba(255,103,0,.25); color: #fff; transform: translateY(-2px); }
.psl-cart-button::before, .psl-load-more::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); }

.psl-oct-sticker-box { display: flex; flex-wrap: wrap; gap: 5px; left: 8px; position: absolute; right: auto; top: 8px; opacity: 1; z-index: 10; }
.psl-oct-sticker-item { border-radius: 6px; box-shadow: 0 2px 7px rgba(17,29,39,.12); font-size: 10px; line-height: 12px; margin: 0; padding: 4px 6px; text-transform: uppercase; }
.psl-card-media > .category_status-sticker,
.psl-card-media > .category-sticker,
.psl-card-media > .product-sticker,
.psl-card-media > .category_status-status,
.psl-card-media > .category-status,
.psl-card-media > .product-status { z-index: 12; }
.psl-card-media > .category_status-sticker .text,
.psl-card-media > .category-sticker .text,
.psl-card-media > .product-sticker .text,
.psl-card-media > .category_status-status.text,
.psl-card-media > .category-status.text,
.psl-card-media > .product-status.text { border-radius: 6px !important; box-shadow: 0 2px 7px rgba(17,29,39,.12); }
.psl-oct-statuses { align-items: center; gap: 5px; padding: 6px 7px 0; }
.psl-oct-statuses-list { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; }
.psl-oct-statuses .product-sticker,
.psl-oct-statuses .category-sticker,
.psl-oct-statuses .category_status-sticker,
.psl-oct-statuses .product-status,
.psl-oct-statuses .category-status,
.psl-oct-statuses .category_status-status { bottom: auto !important; display: inline-flex !important; left: auto !important; margin: 0 !important; position: static !important; right: auto !important; top: auto !important; transform: none !important; }
.psl-oct-statuses img { border: 0 !important; height: auto; max-height: 20px; max-width: 100%; width: auto; }
.psl-oct-statuses .text { border-radius: 6px !important; box-shadow: none !important; display: inline-flex; font-size: 9px; font-weight: 700; line-height: 1.1; min-height: 20px; padding: 4px 7px; white-space: nowrap; }
.psl-card-badge { border-radius: 8px; background: var(--psl-accent-gradient); box-shadow: 0 4px 10px rgba(255,103,0,.18); }
.psl-progress i { background: #e7ecef; }
.psl-progress i b { background: var(--psl-accent-gradient); }
.psl-empty { border-color: var(--psl-line); border-radius: var(--psl-radius); }
.psl-pagination-status { color: var(--psl-muted); }

/* Artctin compatibility layer.  The payment modifier injects this block
 * into the product template; keep its visual contract isolated from the
 * Pro Search controls and from the theme's generic .btn rules. */
.artctin-credit-wrapper { box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; width: 100%; }
.artctin-credit-wrapper .artctin-credit-item { box-sizing: border-box; width: 100%; }
.artctin-credit-wrapper .artctin-credit-item p { color: #333; font-size: 14px; font-weight: 600; line-height: 1.35; margin: 0 0 6px; }
.artctin-credit-wrapper .artctin-credit-btn { border-radius: 8px !important; box-sizing: border-box; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1.25; min-height: 44px !important; overflow: hidden; padding: 10px 14px !important; position: relative; transition: all .22s ease; width: 100% !important; }
.artctin-credit-wrapper .artctin-credit-btn:before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); content: ""; height: 100%; left: -130%; position: absolute; top: 0; transform: skewX(-18deg); transition: left .65s ease; width: 70%; }
.artctin-credit-wrapper .artctin-credit-btn:hover:before { left: 130%; }
.artctin-credit-wrapper .artctin-btn-yellow { background: #ffdd2d !important; border: 1px solid #ffdd2d !important; box-shadow: 0 6px 16px rgba(0,0,0,.08); color: #000 !important; }
.artctin-credit-wrapper .artctin-btn-yellow:hover { background: #fcc521 !important; border-color: #fcc521 !important; box-shadow: 0 12px 26px rgba(0,0,0,.13); transform: translateY(-2px); }
.artctin-credit-wrapper .artctin-btn-green { background: #206d6c !important; border: 1px solid #206d6c !important; box-shadow: 0 6px 16px rgba(32,109,108,.20); color: #fff !important; }
.artctin-credit-wrapper .artctin-btn-green:hover { background: #42bcb8 !important; border-color: #42bcb8 !important; box-shadow: 0 12px 28px rgba(32,109,108,.28); transform: translateY(-2px); }
.artctin-credit-wrapper .artctin-credit-btn:active { transform: translateY(0); }
.artctin-credit-wrapper .artctin-credit-btn:focus { outline: 0; }
.artctin-credit-wrapper .pulse-anim { animation: artctinPulseAnim .3s ease; }
@keyframes artctinPulseAnim { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (min-width: 768px) {
  .artctin-credit-wrapper .artctin-credit-item { flex: 1 1 calc(50% - 6px); }
  .artctin-credit-wrapper .artctin-credit-item:nth-child(3) { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 767px) {
  .artctin-credit-wrapper { gap: 10px; }
  .artctin-credit-wrapper .artctin-credit-item { flex: 1 1 100%; }
  .artctin-credit-wrapper .artctin-credit-item p { font-size: 13px; }
  .artctin-credit-wrapper .artctin-credit-btn { font-size: 14px; min-height: 43px !important; padding: 10px 12px !important; }
}
@media (max-width: 420px) {
  .artctin-credit-wrapper { gap: 8px; }
  .artctin-credit-wrapper .artctin-credit-item p { font-size: 12px; }
  .artctin-credit-wrapper .artctin-credit-btn { border-radius: 7px !important; font-size: 13px; min-height: 41px !important; }
}
.psl-page-number,
.psl-page-arrow { border-color: #d5d9dd; border-radius: var(--psl-radius); box-shadow: 0 3px 9px rgba(79,95,111,.08); color: var(--psl-ink); }
.psl-page-number:hover,
.psl-page-arrow:hover { background: #fff3eb; border-color: var(--psl-accent); box-shadow: 0 7px 16px rgba(255,103,0,.16); color: var(--psl-accent-dark); }
.psl-page-number.is-current { background: var(--psl-accent-gradient); border-color: var(--psl-accent); box-shadow: 0 7px 16px rgba(255,103,0,.24); color: #fff; }

/* The common header search is injected by OCMOD. Keep it native to OCT. */
#search.pro-search {
  --psl-ink: #4f5f6f;
  --psl-muted: #7b8791;
  --psl-accent: #FF6700;
  --psl-accent-dark: #d95300;
  --psl-accent-gradient: linear-gradient(135deg, #FF6700 0%, #ff914d 100%);
  --psl-accent-gradient-hover: linear-gradient(135deg, #d95300 0%, #FF6700 100%);
  --psl-radius: 10px;
  border-radius: var(--psl-radius);
}
#search.pro-search .pro-search-input-group {
  align-items: stretch;
  background: #fff;
  border: 1px solid #d5d9dd;
  border-radius: var(--psl-radius);
  box-shadow: 0 4px 14px rgba(79,95,111,.08);
  display: flex;
  height: 44px;
  overflow: hidden;
}
#search.pro-search .pro-search-input-group:focus-within { border-color: var(--psl-accent); box-shadow: 0 0 0 3px rgba(255,103,0,.14); }
#search.pro-search .pro-search-input-group .form-control {
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--psl-ink);
  flex: 1 1 auto;
  font-size: 15px;
  height: 42px;
  min-width: 0;
  padding: 0 16px;
}
#search.pro-search .pro-search-input-group .form-control:focus {
  background: #fff;
  border: 0;
  box-shadow: none;
  outline: 0;
}
#search.pro-search .pro-search-input-group .input-group-btn { display: flex; flex: 0 0 74px; width: 74px; }
#search.pro-search .pro-search-input-group .btn,
#search.pro-search .pro-search-input-group [data-pro-search-submit] {
  align-items: center;
  background: var(--psl-accent-gradient);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  display: flex;
  justify-content: center;
  padding: 0 18px;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
  width: 100%;
}
#search.pro-search.pro-search-size-normal .pro-search-input-group .form-control,
#search.pro-search.pro-search-size-large .pro-search-input-group .form-control,
#search.pro-search.pro-search-size-normal .pro-search-input-group .btn,
#search.pro-search.pro-search-size-large .pro-search-input-group .btn {
  height: 42px;
}
#search.pro-search.pro-search-size-large .pro-search-input-group .input-group-btn {
  flex-basis: 74px;
  width: 74px;
}
#search.pro-search.pro-search-size-large .pro-search-input-group .btn {
  padding: 0 18px;
}
#search.pro-search .pro-search-input-group:focus-within .btn { border-color: transparent; }
#search.pro-search .pro-search-input-group .btn:hover,
#search.pro-search .pro-search-input-group .btn:focus,
#search.pro-search .pro-search-input-group [data-pro-search-submit]:hover,
#search.pro-search .pro-search-input-group [data-pro-search-submit]:focus {
  background: var(--psl-accent-gradient-hover);
  border-color: var(--psl-accent-dark);
  box-shadow: 0 5px 13px rgba(255,103,0,.22);
  color: #fff;
  outline: 0;
  transform: translateY(-1px);
}
#search.pro-search .pro-search-dropdown {
  border-color: #d5d9dd;
  border-radius: 0 0 12px 12px;
  border-top: 3px solid var(--psl-accent);
  box-shadow: 0 14px 30px rgba(79,95,111,.16);
  scrollbar-color: rgba(255,103,0,.5) transparent;
  scrollbar-width: thin;
}
#search.pro-search .pro-search-dropdown::-webkit-scrollbar { background: transparent; width: 3px; }
#search.pro-search .pro-search-dropdown::-webkit-scrollbar-track { background: transparent; }
#search.pro-search .pro-search-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255,103,0,.5);
  border: 1px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
#search.pro-search .pro-search-dropdown::-webkit-scrollbar-thumb:hover { background: var(--psl-accent); background-clip: padding-box; }
#search.pro-search .pro-search-dropdown .pro-search-title { color: var(--psl-accent-dark); }
#search.pro-search .pro-search-dropdown .pro-search-item:hover,
#search.pro-search .pro-search-dropdown .pro-search-item.active { background: #fff3eb; border-color: rgba(255,103,0,.2); border-left-color: var(--psl-accent); box-shadow: 0 6px 16px rgba(255,103,0,.12); color: var(--psl-accent-dark); transform: translateY(-1px); }
#search.pro-search .pro-search-dropdown .pro-search-count { background: #fff0e6 !important; border: 1px solid rgba(255,103,0,.16); border-radius: 8px; color: var(--psl-accent-dark); transition: background .18s ease, color .18s ease, transform .18s ease; }
#search.pro-search .pro-search-dropdown .pro-search-item:hover .pro-search-count,
#search.pro-search .pro-search-dropdown .pro-search-chip:hover { background: var(--psl-accent-gradient) !important; border-color: var(--psl-accent); color: #fff; transform: translateY(-1px); }
#search.pro-search .pro-search-dropdown .pro-search-chip { background: #fff7f1; border-color: rgba(255,103,0,.18); border-radius: 8px; color: var(--psl-ink); transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
#search.pro-search .pro-search-dropdown .pro-search-chip:hover,
#search.pro-search .pro-search-dropdown .pro-search-chip.active { background: var(--psl-accent-gradient) !important; border-color: var(--psl-accent); color: #fff; transform: translateY(-1px); }
#search.pro-search .pro-search-dropdown .pro-search-footer { background: var(--psl-accent-gradient); border-top-color: var(--psl-accent); color: #fff; }
#search.pro-search .pro-search-dropdown .pro-search-price { color: var(--psl-accent-dark); }

@media (min-width: 768px) and (max-width: 992px) {
  /* Techstore hides `.ts-search-box` at tablet widths. Keep the shared
   * search reachable there without re-enabling the legacy OCT field. */
  header .middle-header { display: flex; flex-wrap: wrap; }
  header .middle-header > .ts-logo-box { flex: 0 0 50%; order: 1; width: 50%; }
  header .middle-header > .mobile-icons-box { flex: 0 0 50%; order: 2; width: 50%; }
  header .middle-header > .ts-search-box {
    display: block !important;
    flex: 0 0 100%;
    float: none;
    order: 3;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    z-index: 4000;
  }
  header .mobile-search-top-box { display: none !important; }
}

@media (max-width: 767px) {
  /* Use the single Pro Search root in the mobile header as well.  The
   * original OCT mobile inputs are conditionally suppressed by OCMOD, so
   * there is no second autocomplete widget competing for the same query. */
  header .middle-header { display: flex; flex-wrap: wrap; }
  header .middle-header > .ts-logo-box { flex: 0 0 50%; order: 1; width: 50%; }
  header .middle-header > .mobile-icons-box { flex: 0 0 50%; order: 2; width: 50%; }
  header .middle-header > .ts-search-box {
    display: block !important;
    flex: 0 0 100%;
    float: none;
    order: 3;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    z-index: 4000;
  }
 
  header .mobile-search-top-box { display: none !important; }
  .psl-toolbar-context .psl-category-carousel.is-toolbar .psl-category-strip,
  .psl-toolbar-context .psl-category-carousel.is-compact .psl-category-strip {
    justify-content: flex-start;
  }
  #search.pro-search-oct { margin: 8px 0 12px; width: 100%; }

  body.pro-search-mobile-search-open { overflow: hidden; }
  #search.pro-search-oct.pro-search-mobile-open {
    align-items: stretch;
    background: #fff;
    bottom: 0;
    display: flex !important;
    flex-direction: column;
    left: 0;
    margin: 0 !important;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 100000;
  }
  #search.pro-search-oct.pro-search-mobile-open .pro-search-input-group {
    flex: 0 0 auto;
    height: 44px;
    margin-right: 48px;
    width: auto;
  }
  #search.pro-search-oct.pro-search-mobile-open .pro-search-mobile-close {
    align-items: center;
    background: #f1f3f5;
    border: 0;
    border-radius: 3px;
    color: #3e464c;
    display: inline-flex;
    font-size: 23px;
    font-weight: 300;
    height: 40px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 40px;
    z-index: 2;
  }
  #search.pro-search-oct.pro-search-mobile-open .pro-search-mobile-close:hover,
  #search.pro-search-oct.pro-search-mobile-open .pro-search-mobile-close:focus {
    background: #e6e9ec;
    color: #202428;
    outline: 0;
  }
  #search.pro-search-oct.pro-search-mobile-open .pro-search-dropdown {
    background: #fff;
    border: 0;
    border-top: 1px solid #edf0f2;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: auto;
    left: auto;
    margin: 12px -12px 0;
    max-height: none;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    position: static;
    right: auto;
    transform: none;
    width: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  #search.pro-search-oct.pro-search-mobile-open .pro-search-dropdown > .pro-search-mobile-scroll {
    flex: 1 1 0%;
    height: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(255,103,0,.5) transparent;
    scrollbar-width: thin;
  }
  #search.pro-search-oct.pro-search-mobile-open .pro-search-dropdown .pro-search-footer {
    flex: 0 0 auto;
    display: block;
    margin-top: 0;
    position: static;
    width: 100%;
    z-index: 5;
  }
  #search.pro-search-oct.pro-search-mobile-open .pro-search-dropdown > .pro-search-mobile-scroll::-webkit-scrollbar {
    background: transparent;
    width: 3px;
  }
  #search.pro-search-oct.pro-search-mobile-open .pro-search-dropdown > .pro-search-mobile-scroll::-webkit-scrollbar-track { background: transparent; }
  #search.pro-search-oct.pro-search-mobile-open .pro-search-dropdown > .pro-search-mobile-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,103,0,.5);
    border: 1px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
  }

  .psl { margin-bottom: 28px; }
  .psl-header { margin-bottom: 12px; padding-bottom: 8px; }
  .psl-heading-row h1 { font-size: 24px; }
  .psl-grid { gap: 10px; }
  .psl-card { box-shadow: none; }
  .psl-card:hover, .psl-card:focus-within { box-shadow: 0 4px 14px rgba(79,95,111,.12); transform: none; }
  .psl-cart-button { min-height: 36px; padding: 0 10px; }
}