/* Tablou.md catalog — code badge + live search bar */

.tw-card-code {
  display: inline-block;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #876BFF;
  background: rgba(135, 107, 255, .08);
  padding: 3px 9px;
  border-radius: 999px;
  margin: 0 0 6px;
  font-weight: 600;
  line-height: 1.2;
}

/* Search bar — spans full width of the products container (catalog-main grid) */
.tw-catalog-search-wrap {
  width: 100%;
  margin: 8px 0 16px;
  padding: 0;
  box-sizing: border-box;
  grid-column: 1 / -1; /* span all columns when inside a CSS grid */
}
.tw-catalog-search-inner {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(28, 26, 23, .1);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(28, 26, 23, .05);
  transition: border-color .15s, box-shadow .15s;
}
.tw-catalog-search-inner:focus-within {
  border-color: #3D7BFF;
  box-shadow: 0 8px 26px rgba(61, 123, 255, .16);
}
.tw-catalog-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #5c544c;
  pointer-events: none;
}
.tw-catalog-search {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 11px 44px 11px 44px;
  font-family: Fraunces, serif;
  font-size: 14px;
  color: #1c1a17;
  width: 100%;
  border-radius: 999px;
  -webkit-appearance: none;
}
.tw-catalog-search::placeholder { color: #8d847a; opacity: 1; }
.tw-catalog-search::-webkit-search-cancel-button { display: none; }
.tw-catalog-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  background: rgba(28, 26, 23, .06);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: #5c544c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s, color .15s;
}
.tw-catalog-search-clear:hover { background: #3D7BFF; color: #fff; }
.tw-catalog-search-clear[hidden] { display: none; }

.tw-catalog-search-status {
  margin-top: 10px;
  font-family: Fraunces, serif;
  font-size: 13px;
  color: #5c544c;
  text-align: center;
  min-height: 0;
}
.tw-catalog-search-status.is-empty {
  color: #1c1a17;
  background: rgba(28, 26, 23, .04);
  padding: 10px 14px;
  border-radius: 12px;
}

/* Suggestions dropdown — site-wide catalog search */
.tw-catalog-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid rgba(28, 26, 23, .08);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(28, 26, 23, .12);
  max-height: 480px;
  overflow-y: auto;
  z-index: 50;
  padding: 6px;
}
.tw-catalog-search-wrap { position: relative; }
.tw-catalog-suggest[hidden] { display: none !important; }
.tw-catalog-suggest-empty {
  padding: 22px 16px;
  text-align: center;
  font-family: Fraunces, serif;
  font-size: 14px;
  color: #5c544c;
}
.tw-catalog-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #1c1a17;
  transition: background .12s;
}
.tw-catalog-suggest-item:hover,
.tw-catalog-suggest-item:focus {
  background: rgba(61, 123, 255, .07);
  outline: none;
}
.tw-catalog-suggest-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(28, 26, 23, .04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tw-catalog-suggest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tw-catalog-suggest-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tw-catalog-suggest-cod {
  display: inline-block;
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #876BFF;
  background: rgba(135, 107, 255, .08);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  align-self: flex-start;
  line-height: 1.3;
}
.tw-catalog-suggest-name {
  font-family: Fraunces, serif;
  font-size: 14px;
  color: #1c1a17;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-catalog-suggest-price {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 12px;
  color: #3D7BFF;
  font-weight: 600;
}

/* === Tablet 769-1024px === */
@media (min-width: 769px) and (max-width: 1024px) {
  .tw-catalog-search-wrap { margin: 6px 0 14px; }
  .tw-catalog-search { font-size: 14px; padding: 12px 44px 12px 46px; }
  .tw-catalog-suggest { max-height: 440px; }
  .tw-catalog-suggest-item { padding: 9px 11px; gap: 11px; }
  .tw-catalog-suggest-thumb { flex: 0 0 50px; width: 50px; height: 50px; }
  .tw-catalog-suggest-name { font-size: 13px; }
  .tw-catalog-suggest-price { font-size: 12px; }
  /* Catalog grid: 3 columns on tablet (ID-level specificity to beat Bricks inline rule) */
  body .brxe-block.catalog-main,
  body div[id^="brxe-"].catalog-main { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
}

/* === Mobile ≤768px === */
@media (max-width: 768px) {
  /* Lift the search bar above the sidebar on mobile so it's the first thing users see */
  body .catalog-layout { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  body .catalog-layout > .sidebar { order: 2 !important; }
  body .catalog-layout > .catalog-main { order: 1 !important; }

  /* Catalog grid: 2 columns on mobile — bump specificity to beat Bricks inline #id rule */
  body .brxe-block.catalog-main,
  body div[id^="brxe-"].catalog-main { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  /* Iteration wrappers must keep block layout filling their grid cell */
  body .brxe-block.catalog-main > .brxe-block.products { display: block !important; width: 100% !important; min-width: 0 !important; }

  /* Search bar — compact on mobile, full width */
  .tw-catalog-search-wrap { margin: 4px 0 10px; padding: 0; }
  .tw-catalog-search { font-size: 14px; padding: 10px 38px 10px 42px; }
  .tw-catalog-search-icon { left: 14px; width: 15px; height: 15px; }
  .tw-catalog-search-clear { right: 8px; width: 24px; height: 24px; }

  /* Dropdown — full width within column, taller list */
  .tw-catalog-suggest { max-height: 65vh; border-radius: 14px; padding: 4px; }
  .tw-catalog-suggest-item { padding: 8px 10px; gap: 10px; }
  .tw-catalog-suggest-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; }
  .tw-catalog-suggest-name { font-size: 13px; }
  .tw-catalog-suggest-price { font-size: 11px; }
  .tw-catalog-suggest-cod { font-size: 8px; padding: 1px 6px; }

  /* Card text compact on 2-col mobile grid */
  .brxe-block.catalog-main .product__name,
  .brxe-block.catalog-main h3 {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-top: 6px !important;
  }
  .brxe-block.catalog-main .price,
  .brxe-block.catalog-main .woocommerce-Price-amount {
    font-size: 11px !important;
    letter-spacing: -.01em !important;
  }
  .brxe-block.catalog-main .tw-card-code { font-size: 9px; padding: 2px 6px; }
}

/* === Small mobile ≤480px — keep 2-col, just tighten gaps & text === */
@media (max-width: 480px) {
  body .brxe-block.catalog-main,
  body div[id^="brxe-"].catalog-main { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .brxe-block.catalog-main .product__name,
  .brxe-block.catalog-main h3 { font-size: 12px !important; }
  .brxe-block.catalog-main .price,
  .brxe-block.catalog-main .woocommerce-Price-amount { font-size: 10.5px !important; }
}

/* Mobile compact */
@media (max-width: 768px) {
  .tw-card-code {
    font-size: 9px;
    padding: 2px 7px;
    letter-spacing: .06em;
    margin: 0 0 4px;
  }
  .tw-catalog-search-wrap {
    margin: 4px 0 12px;
    padding: 0 12px;
  }
  .tw-catalog-search {
    font-size: 14px;
    padding: 10px 38px 10px 42px;
  }
  .tw-catalog-search-icon { left: 14px; width: 15px; height: 15px; }
  .tw-catalog-search-clear { right: 8px; width: 24px; height: 24px; }
}