/* ==========================================================================
   Category page filter bar - assets/css/category-filters.css
   Loaded by views/_getcat.cfm and views/_getsubcat.cfm after site.css.

   Three zones: sort (left) / price range slider (center) / subcategory
   (right). The bar ships with the hidden attribute and the script removes
   it, so browsers without JavaScript never show dead controls.
   ========================================================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 30px;
  margin: 20px 0 5px;
  padding: 12px 15px;
  background-color: #faf6ec;
  border: 1px solid rgba(75, 48, 29, 0.3);
  border-radius: 10px;
}

.filter-zone {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-zone-sort   { order: 1; }
.filter-zone-price  { order: 2; flex: 1 1 260px; margin: 0 auto; max-width: 340px; }
.filter-zone-subcat { order: 3; margin-left: auto; }

.filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(75, 48, 29);
}

.filter-select {
  height: 32px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 14px;
  color: #333333;
  background-color: #ffffff;
  border: 1px solid rgba(75, 48, 29, 0.4);
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Dual-thumb price slider: two native range inputs stacked on one track.
   Track and fill are drawn by the divs; the inputs are transparent except
   for their thumbs.
   -------------------------------------------------------------------------- */

.price-slider {
  position: relative;
  height: 32px;
}

.price-slider-track {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 4px;
  background-color: rgba(75, 48, 29, 0.2);
  border-radius: 2px;
}

.price-slider-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(75, 48, 29);
  border-radius: 2px;
}

.price-slider input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  /* The upper input covers the lower one; only the thumbs take the pointer. */
  pointer-events: none;
}

.price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid rgb(75, 48, 29);
  cursor: pointer;
  pointer-events: auto;
}

.price-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid rgb(75, 48, 29);
  cursor: pointer;
  pointer-events: auto;
}

.price-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid rgb(75, 48, 29);
  outline-offset: 2px;
}

.price-slider input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid rgb(75, 48, 29);
  outline-offset: 2px;
}

.price-slider-values {
  font-size: 13px;
  color: #333333;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

/* site.css carries .content-panel p { margin: 0 0 20px }, which is one class
   plus one type and therefore beats a bare .category-empty however late this
   file loads. The top margin here has to be written at a specificity that
   wins outright, or it is silently discarded - which is what was happening to
   the 30px in site.css's own .category-empty rule as well. All four pages
   that use this class put it inside .content-panel. */
.content-panel p.category-empty {
  margin-top: 40px;
}

.category-empty {
  font-size: 24px;
}

.filter-reset {
  margin-left: 8px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 14px;
  color: #ffffff;
  background-color: #910d10;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.filter-reset:hover,
.filter-reset:focus {
  background-color: #7a0b0d;
}

/* --------------------------------------------------------------------------
   Subcategory page breadcrumb in the gray title bar:
   "Subcategory > Category", the category linked.
   -------------------------------------------------------------------------- */

.page-bar-breadcrumb {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-bar-breadcrumb .page-bar-title {
  margin: 0;
}

.page-bar-breadcrumb-sep {
  color: #666666;
  font-size: 13px;
}

.page-bar-breadcrumb-link {
  /* Same size, leading and small-caps treatment as .page-bar-title, so
     both crumb segments read at one size. The small-caps variant is what
     was missing - at 16px without it, lowercase letters render visibly
     smaller than the title's small capitals. */
  font-size: 16px;
  line-height: 1;
  font-variant-caps: small-caps;
  text-decoration: underline;
}

/* Subcategory page bar: sort left, price slider dead-centre. A grid with
   two equal flanking tracks keeps the middle column on the bar's true
   centre line, so the empty right side cannot pull the slider over -
   flex would centre it in the leftover space instead. */
.filter-bar-sub {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
}

.filter-bar-sub .filter-zone-sort {
  grid-column: 1;
  justify-self: start;
}

.filter-bar-sub .filter-zone-price {
  grid-column: 2;
  width: 340px;
  max-width: 100%;
  margin: 0;
}

/* Narrow screens: zones stack, price slider takes the full row. */
@media (max-width: 700px) {
  .filter-bar-sub {
    display: flex;
  }

  .filter-zone-sort,
  .filter-zone-subcat,
  .filter-zone-price {
    flex: 1 1 100%;
    margin: 0;
    max-width: none;
  }
}

/* ==========================================================================
   Product card extensions: badge, rating, item number, price + add to cart.
   The card itself is now a div; .product-card-link wraps the image and
   title (the parts that navigate), and the buy row sits outside the link
   so the button is a real button, not a link inside a link.
   ========================================================================== */

.product-card-link {
  display: block;
  color: inherit;
}

/* The old rule underlined the title whenever the card was hovered, which now
   includes hovering the add-to-cart button. Scope it to the link. */
.product-card:hover .product-card-title {
  text-decoration: none;
}

.product-card-link:hover .product-card-title,
.product-card-link:focus .product-card-title {
  text-decoration: underline;
}

.product-card-badge {
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 2;
  padding: 5px 16px 5px 12px;
  /* A fallback only. The modifier below carries the colour that matters, so
     a card is never left with an unpainted box if one is ever missing. */
  background-color: #910d10;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Two words at 14px are wide enough to wrap if a card ever gets narrow
     enough; a badge that becomes two lines is not a badge. */
  white-space: nowrap;
}

/* product.flag picks which of these a card gets: 1 New, 2 Best Seller. Both
   name their own colour rather than letting New fall through to the rule
   above, so changing one cannot quietly change the other. Same class count
   as the base rule and written after it, which is what makes them win. */
.product-card-badge-new {
  background-color: #910d10;
}

.product-card-badge-best {
  background-color: #4b301d;
}

.product-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 0;
  color: #ffffff;
}

.product-card-sku {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.product-card-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 6px 8px;
}

.product-card-price {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.product-card-cart {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Star rating: a muted row of stars as the track, a clipped filled row on
   top of it. Width of the fill is the rating percentage, set per card.
   -------------------------------------------------------------------------- */

.star-rating {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.star-row {
  display: block;
  white-space: nowrap;
  font-size: 15px;
  letter-spacing: 2px;
}

.star-row-empty {
  color: rgba(255, 255, 255, 0.35);
}

.star-row-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #e8a33d;
}

/* --------------------------------------------------------------------------
   Shared add-to-cart recipient dialog, styled like the cart page's
   recipient dialog: cream header and footer bands, thumbnail beside the
   product name, ruled recipient rows. The base chrome (.cart-dialog,
   .modal-header/body/footer) comes from site.css; everything here either
   extends it or wins back rules its generic .modal-body selectors set.
   -------------------------------------------------------------------------- */

.addcart-dialog {
  width: 400px;
}

.addcart-dialog .modal-header {
  align-items: center;
  background-color: #eddfbe;
  border-bottom: 1px solid #e0ddd6;
}

.addcart-dialog .modal-header h2 {
  color: #4b301d;
}

.addcart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

.addcart-thumb {
  flex: 0 0 auto;
}

.addcart-thumb[hidden] {
  display: none;
}

.addcart-thumb img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 3px;
}

.addcart-product {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: #4b301d;
}

.addcart-recp-set {
  margin: 0;
  padding: 0;
  border: 0;
}

.addcart-legend {
  padding: 0 0 8px;
  font-size: 13px;
  font-weight: 400;
  color: #666666;
}

.addcart-recp-list {
  display: flex;
  flex-direction: column;
}

/* site.css styles .modal-body label as a block and .modal-body input as a
   full-width 32px text field - both rules out-rank bare classes here, so
   these carry the same ancestry to win them back for the checkbox rows. */
.addcart-dialog .modal-body .addcart-recp-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid #e0ddd6;
  font-size: 15px;
  cursor: pointer;
}

.addcart-dialog .modal-body .addcart-recp-option:last-child {
  border-bottom: 1px solid #e0ddd6;
}

.addcart-dialog .modal-body .addcart-recp-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #2f8a00;
}

/* site.css gives .field-error a display of its own, which beats the hidden
   attribute's UA rule - restore hidden's meaning inside this dialog. */
.addcart-dialog .field-error[hidden] {
  display: none;
}

.addcart-dialog .field-error {
  margin: 10px 0 0;
  color: #910d10;
}

.addcart-dialog .modal-footer {
  background-color: #eddfbe;
  border-top: 1px solid #e0ddd6;
}

.addcart-dialog .modal-footer button[data-addcart-close] {
  padding: 8px 18px;
  background-color: #ffffff;
  border: 1px solid #c9bfa8;
  border-radius: 6px;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
}

.addcart-dialog .modal-footer button[data-addcart-close]:hover,
.addcart-dialog .modal-footer button[data-addcart-close]:focus {
  border-color: #4b301d;
}

/* site.css's .modal-footer button strips backgrounds, which out-ranks the
   bare .btn-add-to-cart class - restate the red here at higher specificity. */
.addcart-dialog .modal-footer .btn-add-to-cart {
  padding: 8px 18px;
  background-color: #910d10;
  color: #ffffff;
}

.addcart-dialog .modal-footer .btn-add-to-cart:hover,
.addcart-dialog .modal-footer .btn-add-to-cart:focus {
  background-color: #7a0b0d;
}

/* Between 768 and 991 site.css crops the whole card to 275px with the title
   overlaid on the photo - there is no room for the meta and buy rows in
   that treatment, so restore the normal stacked card in that band. */
@media (min-width: 768px) and (max-width: 991px) {
  .product-card {
    height: auto;
    overflow: visible;
  }

  .product-card-image {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .product-card-title {
    position: static;
  }
}

/* View Options on a grouped parent's card: the same box as the Add to Cart
   button, worn by a link. The button styles carry everything but the link
   defaults being undone here. */
.product-card-options {
    /* inline-flex, not inline-block: the Add to Cart beside it is a button,
       and a button centres its label inside min-height on its own. An
       inline-block link leaves the text at the top of the 32px box, which
       printed View Options a few pixels higher than Add to Cart. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}