/* Shop / Category / Brand listing pages — scoped redesign styles. All
   selectors are prefixed with .shop so this file cannot leak into or
   collide with the rest of the site's Bootstrap-based styling. */

.shop {
  --shop-surface: #ffffff;
  --shop-surface-2: #f8f9fa;
  --shop-ink: #212529;
  --shop-muted: #6c757d;
  --shop-line: #ced4da;
  --shop-accent: var(--primary, #ffd333);
  --shop-radius: 10px;
  /* dark "screen" tile used behind product photos — matches the OXY brand
     store page's card language so the shop grid reads as one system. */
  --shop-screen: #0A0D10;
  --shop-screen-2: #12171B;
  --shop-glow-dim: rgba(47, 224, 214, .16);
  --shop-glow2: #4E7CFF;
  --shop-mono: 'Courier New', monospace;
}

/* breadcrumb */
.shop-crumb-wrap { background: #fff; }
.shop-crumb {
  /* style.css has a bare `nav { position:fixed; height:80px; z-index:999;
     box-shadow:...; }` rule written for the site's main navbar. Since this
     breadcrumb is also an actual <nav> element, it inherits that rule too
     and floats fixed on top of the page instead of sitting in normal flow
     — same root cause fixed on the product detail page. */
  position: static;
  height: auto;
  width: auto;
  z-index: auto;
  box-shadow: none;
  background: #fff !important;
  border: 0;
  padding: 12px 0 4px;
  margin-bottom: 24px !important;
}

/* filter sidebar — same rounded-card / mono-label / pill-button language
   as the product cards and the OXY brand store page. */
.shop-filter-title {
  font-family: var(--shop-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--shop-ink);
  margin-bottom: 10px;
}
.shop-filter-card {
  background: var(--shop-surface);
  border: 1px solid var(--shop-line);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 24px;
  transition: border-color .15s ease;
}
.shop-filter-card:focus-within { border-color: var(--shop-glow2); }
.shop-filter-row {
  /* longhand only — Bootstrap's .custom-control sets padding-left:1.5rem
     to make room for the absolutely-positioned checkbox glyph; a `padding`
     shorthand here would zero that out and clip the glyph off the card's
     left edge. */
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  border-radius: 8px;
  /* style.css has a second, unrelated `.custom-checkbox { margin-top:2.5rem }`
     rule (written for some other toggle component elsewhere on the site).
     Bootstrap's own checkbox markup also carries the class "custom-checkbox",
     so these rows inherit that 40px gap by accident. Override it back. */
  margin-top: 0;
  transition: background-color .12s ease;
}
.shop-filter-row:hover { background-color: var(--shop-surface-2); }
.shop-filter-row:not(:last-child) { border-bottom: 1px solid var(--shop-surface-2); }
/* Bootstrap's custom-checkbox absolutely-positions the checkbox glyph via
   .custom-control-label::before relative to the label's own box — so the
   label (not the row) needs to be the flex container, or that glyph
   renders clipped against the row's edge instead of the label's. */
.shop-filter-row .custom-control-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}
.shop-filter-row .custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--shop-glow2);
  background-color: var(--shop-glow2);
}
.shop-filter-row .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(78, 124, 255, .18);
}
.shop-filter-row .badge {
  font-family: var(--shop-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--shop-muted);
  background: var(--shop-surface-2);
  border-radius: 6px;
}

/* price inputs + apply button */
.shop-filter-card .form-group label {
  font-size: 12px;
  color: var(--shop-muted);
  margin-bottom: 4px;
}
.shop-filter-card .form-control {
  border: 1.5px solid var(--shop-line);
  border-radius: 10px;
  padding: 10px 12px;
  height: auto;
}
.shop-filter-card .form-control:focus {
  border-color: var(--shop-glow2);
  box-shadow: 0 0 0 3px rgba(78, 124, 255, .18);
}
.shop-filter-card .filter-submit {
  font-family: var(--shop-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--shop-ink);
  /* style.css has a blanket `.btn.btn-primary { color: #3d464d !important; }`
     rule that otherwise wins over this regardless of specificity — this
     button uses both classes, so it needs !important to actually be white. */
  color: #fff !important;
  border: none;
  border-radius: 999px;
  padding: 11px 16px;
  margin-top: 6px;
  transition: transform .15s ease, opacity .15s ease;
}
.shop-filter-card .filter-submit:hover,
.shop-filter-card .filter-submit:focus {
  background: var(--shop-ink);
  color: #fff !important;
  transform: translateY(-2px);
  opacity: .92;
}

/* results toolbar */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--shop-line);
}
.shop-count { font-size: 14px; font-weight: 600; color: var(--shop-ink); }
.shop-toolbar-actions { display: flex; }

.shop-empty {
  background: var(--shop-surface-2);
  border: 1px dashed var(--shop-line);
  border-radius: var(--shop-radius);
  padding: 40px 20px;
  text-align: center;
  color: var(--shop-muted);
  width: 100%;
}

/* product cards — dark "screen" tile + rounded card, matching the OXY
   brand store page's product grid design. */
.shop .pc-card {
  background: var(--shop-surface);
  border: 1px solid var(--shop-line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.shop .pc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(20, 21, 26, .3);
}
.shop .pc-shot {
  aspect-ratio: 4 / 3;
  background: linear-gradient(155deg, var(--shop-screen), var(--shop-screen-2));
  position: relative;
  overflow: hidden;
}
.shop .pc-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 45% at 32% 28%, var(--shop-glow-dim), transparent 60%);
}
.shop .pc-shot-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop .pc-shot-link img {
  position: relative;
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
}
.shop .pc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: var(--shop-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.shop .pc-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--shop-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.shop .pc-fav:hover { color: #dc3545; }
.shop .pc-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.shop .pc-title {
  color: var(--shop-ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop .pc-title:hover { color: var(--shop-ink); text-decoration: underline; }
.shop .pc-installment {
  font-size: 11.5px;
  color: var(--shop-muted);
}
.shop .pc-installment b { color: var(--shop-ink); font-weight: 700; }
.shop .pc-pricerow {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--shop-surface-2);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.shop .pc-price em {
  display: block;
  font-style: normal;
  font-family: var(--shop-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--shop-muted);
}
.shop .pc-price b {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--shop-ink);
}
.shop .pc-brand {
  font-family: var(--shop-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--shop-muted);
  white-space: nowrap;
}