/* ====== Local overrides & app pieces ====== */

html { -webkit-text-size-adjust: 100%; }

a { cursor: pointer; }
a:hover { text-decoration: none; }

.content-main { min-height: 55vh; }

.loading {
  padding: 70px 0;
  text-align: center;
  color: #9a8a6c;
  font-size: 1.3rem;
}
.loading::before {
  content: "";
  display: block;
  width: 42px; height: 42px;
  margin: 0 auto 14px;
  border: 3px solid #eadfc9;
  border-top-color: #c7a94d;
  border-radius: 50%;
  animation: yspin 0.9s linear infinite;
}
@keyframes yspin { to { transform: rotate(360deg); } }

/* ---------- hero slider ---------- */
#heroSlider { position: relative; }
#heroSlider .image-slider-container .image-slider-item-container { display: none; }
#heroSlider .image-slider-container .image-slider-item-container.is-not-first { display: none; }
#heroSlider .image-slider-controls-prev,
#heroSlider .image-slider-controls-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  background: rgba(0, 0, 0, 0.35); color: #fff; border: 0; width: 46px; height: 46px;
  border-radius: 50%; font-size: 1.15rem; cursor: pointer;
}
#heroSlider .image-slider-controls-prev { left: 14px; }
#heroSlider .image-slider-controls-next { right: 14px; }

/* ---------- catalog ---------- */
.catalog-holder { padding-top: 18px; padding-bottom: 40px; }
.catalog-holder .ca-title { margin-bottom: 4px; }
.catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-top: 1px solid #ece4d4; margin-top: 16px;
}
.catalog-count { color: #6b5d44; font-size: 1rem; }
.catalog-sort { display: flex; align-items: center; gap: 8px; color: #6b5d44; }
.catalog-sort select { min-width: 190px; }

.cms-listing-row .card.product-box { height: 100%; }
/* product-detail related grid: the theme's -20px row margin is re-applied by
   the nested .cms-listing-row.row inside .product-detail-related.row (which
   already carries -20px), pushing the grid 20px past the viewport. That
   horizontal seam widens the layout viewport on mobile and stretches the
   fixed top bar to viewport+20px. Zero the nested margin. */
.row.product-detail-related .cms-listing-row.row { margin-right: 0; margin-left: 0; }
.product-info .product-name {
  display: block; height: 30px; min-height: 30px; line-height: 30px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.product-info .product-description,
.product-variant-characteristics { display: none; }
.product-image-wrapper { position: relative; }
.product-image-wrapper img.product-image { width: 100%; height: auto; object-fit: cover; }

.product-wishlist {
  position: absolute; top: 8px; right: 8px; z-index: 3;
}
.product-wishlist-action-circle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #e6dcca; background: #fff; color: #98633a; cursor: pointer; font-size: 1rem;
}
.product-wishlist-action-circle.product-wishlist-added { color: #e0457b; }
.product-card-top-actions { position: absolute; z-index: 3; top: 8px; left: 8px; }

.catalog-pager { padding: 26px 0 10px; }
.catalog-live-link { text-align: center; padding: 18px 0 6px; }
.catalog-live-link a { color: #6b5d44; border-bottom: 1px dotted #c7a94d; }

/* ---------- product detail ---------- */
.product-detail-wrap { padding-bottom: 40px; }
.product-detail-gallery { text-align: center; }
.detail-main {
  border: 1px solid #ece4d4; padding: 10px; margin-bottom: 12px; background: #fff;
}
.detail-main img { max-width: 100%; height: auto; }
.detail-thumbs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.detail-thumb {
  width: 74px; height: 74px; border: 2px solid transparent; cursor: pointer;
  padding: 3px; background: #fff;
}
.detail-thumb.active { border-color: #c7a94d; }
.detail-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-detail-info { padding-top: 8px; }
.product-detail-name { font-size: 1.9rem; font-weight: 700; color: #26221a; margin-bottom: 8px; }
.product-detail-sku { color: #8a7a5c; font-size: 0.95rem; margin-bottom: 6px; }
.product-detail-brand { color: #8a7a5c; font-size: 0.95rem; margin-bottom: 6px; }
.product-detail-stock { color: #2e8b57; font-size: 0.9rem; margin-bottom: 14px; }
.product-detail-stock .stock-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #2e8b57; margin-right: 6px;
}
.product-detail-stock.is-out-of-stock { color: #c62828; }
.product-detail-stock.is-out-of-stock .stock-dot { background: #c62828; }
.product-detail-price { font-size: 2rem; font-weight: 700; color: #98633a; margin-bottom: 16px; }
.product-detail-description { margin: 8px 0 18px; color: #4a4436; line-height: 1.7; }
.product-detail-description h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; color: #26221a; margin-bottom: 8px; }
.product-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.product-detail-short-desc { margin-top: 12px; color: #4f4838; font-size: 1.15rem; line-height: 1.65; }

.product-detail-configurator-container { margin-top: 14px; }
.product-detail-configurator { background: #faf7ef; border: 1px solid #e9dfc6; border-radius: 6px; padding: 12px 14px; }
.product-detail-configurator-group { margin-bottom: 4px; }
.product-detail-configurator-group-title { display: block; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: #26221a; margin: 0 0 6px; }
.product-detail-configurator-select-input,
.product-detail-configurator .custom-select {
  width: 100%; height: 42px; border: 1px solid #d6c9a8; border-radius: 4px; background: #fff;
  padding: 6px 10px; font-size: 1rem; color: #26221a; outline: none;
}
.product-detail-configurator-select-input:focus,
.product-detail-configurator .custom-select:focus { border-color: #c7a94d; box-shadow: 0 0 0 2px rgba(199,169,77,.18); }
.product-detail-configurator-guide { margin-top: 8px; }
.product-detail-configurator-guide a {
  display: inline-block; font-size: .86rem; color: #7a5e12; text-decoration: underline; font-weight: 600;
}
.product-detail-configurator-guide a:hover { color: #c7a94d; }
.product-detail-related { margin-top: 34px; }
.product-detail-related .main_title { margin-bottom: 16px; }

/* ---------- wishlist / cart ---------- */
.cart-table { border: 1px solid #ece4d4; background: #fff; }
.cart-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border-bottom: 1px solid #f0eadc; flex-wrap: wrap;
}
.cart-row:last-child { border-bottom: 0; }
.cart-img { width: 70px; height: 70px; flex: 0 0 70px; }
.cart-img img { width: 100%; height: 100%; object-fit: contain; }
.cart-name { flex: 1 1 220px; min-width: 0; }
.cart-name a { color: #26221a; font-weight: 600; }
.cart-price { color: #6b5d44; width: 90px; }
.cart-line-total { width: 100px; font-weight: 700; color: #98633a; }
.cart-qty { display: flex; align-items: center; gap: 8px; }
.cart-qty .btn { width: 32px; height: 32px; padding: 0; line-height: 1; }
.cart-qty span { min-width: 26px; text-align: center; font-weight: 600; }
.cart-remove { color: #c0392b !important; }
.cart-summary {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 12px;
  padding: 18px 14px;
}
.cart-total { font-size: 1.6rem; color: #98633a; }
.cart-checkout-note { text-align: right; color: #8a7a5c; font-size: .92rem; }
.cart-row.is-out-of-stock { background: #fdf6f5; }
.cart-oos { display: block; color: #c62828; font-size: .85rem; font-weight: 600; }
.cart-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; padding: 4px 14px 18px; }

/* ---------- checkout / crypto payment ---------- */
.ca-alert { border-radius: 6px; padding: 12px 16px; margin-bottom: 18px; font-size: .95rem; line-height: 1.55; }
.ca-alert-test { background: #fff8e6; border: 1px solid #e6cf8f; color: #6b5310; }
.ca-alert-warn { background: #fdf3f2; border: 1px solid #e8b4ae; color: #9c2f26; }
.ca-checkout-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ca-checkout-side { background: #faf7ef; border: 1px solid #ece4d4; border-radius: 8px; padding: 18px; }
.ca-side-title { font-size: 1.05rem; font-weight: 700; color: #26221a; margin: 20px 0 10px; }
.ca-checkout-form .ca-side-title:first-child { margin-top: 0; }
.ca-field { margin-bottom: 12px; }
.ca-field label { display: block; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #4a4436; margin-bottom: 5px; }
.ca-optional { text-transform: none; letter-spacing: 0; color: #9a927f; font-weight: 400; }
.ca-field .form-control, .ca-field .form-select { width: 100%; border: 1px solid #ddd2b6; border-radius: 4px; padding: 9px 11px; font-size: .98rem; color: #26221a; }
.ca-field .form-control:focus, .ca-field .form-select:focus { border-color: #c7a94d; box-shadow: 0 0 0 2px rgba(199,169,77,.18); outline: none; }
.ca-field-row { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 10px; }
.ca-side-note { color: #8a7a5c; font-size: .88rem; margin-top: 10px; }
.ca-pay-method-disabled { display: flex; align-items: center; gap: 8px; background: #f4f1e8; border: 1px dashed #d8cfb4; border-radius: 4px; padding: 10px 12px; color: #8a7a5c; font-size: .92rem; margin-bottom: 16px; }
.ca-pay-method-disabled span { margin-left: auto; font-size: .82rem; }
.ca-summary-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.ca-summary-table th, .ca-summary-table td { padding: 8px 6px; border-bottom: 1px solid #ece4d4; vertical-align: middle; }
.ca-summary-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #8a7a5c; }
.ca-summary-table tfoot th { border-bottom: 0; }
.ca-summary-total th { font-size: 1.12rem; color: #98633a; border-top: 2px solid #ddd2b6; }
.ca-sum-item { display: flex; gap: 10px; align-items: center; }
.ca-sum-item img { width: 52px; height: 52px; object-fit: contain; border: 1px solid #ece4d4; border-radius: 4px; }
.ca-sum-item small { display: block; color: #9a927f; font-size: .8rem; }
.ca-pay-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ca-pay-main { background: #fff; border: 1px solid #ece4d4; border-radius: 8px; padding: 20px; }
.ca-pay-side { background: #faf7ef; border: 1px solid #ece4d4; border-radius: 8px; padding: 18px; }
.ca-amount-box { background: #faf7ef; border: 1px solid #e9dfc6; border-radius: 6px; padding: 14px 16px; margin: 14px 0; text-align: center; }
.ca-amount-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #8a7a5c; }
.ca-amount { font-size: 2rem; font-weight: 700; color: #98633a; word-break: break-all; }
.ca-amount-usd { color: #8a7a5c; font-size: .9rem; }
.ca-address-box { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ca-qr { flex: 0 0 auto; }
.ca-qr img { border: 1px solid #ece4d4; border-radius: 6px; background: #fff; }
.ca-address-text { flex: 1 1 260px; min-width: 0; }
.ca-field-label { font-size: .82rem; font-weight: 600; color: #4a4436; margin-bottom: 6px; }
.ca-address-text code { display: block; background: #f7f4ec; border: 1px solid #e9dfc6; border-radius: 4px; padding: 10px 12px; font-size: .9rem; word-break: break-all; color: #26221a; margin-bottom: 10px; }
.ca-status { margin: 18px 0; }
.ca-state { border-radius: 6px; padding: 12px 16px; font-size: .95rem; }
.ca-state-pending { background: #f4f8fc; border: 1px solid #bcd6ec; color: #1e4d75; }
.ca-state-paid { background: #f1f9f3; border: 1px solid #b3ddbe; color: #226b3c; }
.ca-state-expired { background: #fdf3f2; border: 1px solid #e8b4ae; color: #9c2f26; }
.ca-pay-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ca-countdown { margin-top: 12px; font-size: .88rem; color: #8a7a5c; text-align: right; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  background: #26221a; color: #fff; padding: 12px 22px; border-radius: 30px;
  font-size: .95rem; z-index: 12000; box-shadow: 0 4px 18px rgba(0,0,0,.25);
  transition: opacity .25s ease; opacity: 1;
}
.toast.hidden { opacity: 0; pointer-events: none; }

/* ---------- catalog: live-style layout ---------- */
.cms-page { padding-top: 8px; }
/* The theme only zeroes .container-main inside @media (max-width:767.98px), so desktop
   kept the base 20px and left a stray gap between the menu and the full-bleed home hero.
   Match the mobile result (8px from .cms-page + 1px container border = 9px). */
.container-main.home-page { padding-top: 0; }

/* ---------- header logo ---------- */
/* The logo <img> collapses to 0x0 at every breakpoint. <picture> has no intrinsic
   width in Chrome, so `width:auto` plus Bootstrap's `.img-fluid{max-width:100%}`
   resolves against zero and the image never gets a used width (it loads fine:
   natural 300x85, complete:true). A definite width is the only thing that fixes it.
   max-width must be `none` — a percentage would resolve against the zero-width
   <picture> again. */
.ca-header-container .header-row .header-logo-col .header-logo-main-img {
  width: 120px;
  max-width: none;
  height: auto;
  object-fit: contain;
}
/* On mobile the theme makes .header-logo-col a 3-column grid
   (4.8rem / 1fr / 4.8rem) but it only ever has ONE child, so the 1fr track and the
   trailing 4.8rem track are dead space and the logo was squeezed into 4.8rem.
   Size that first track to the logo instead of the other way round. */
@media screen and (max-width: 767.98px) {
  .ca-header-container .header-row .header-logo-col {
    grid-template-columns: max-content minmax(0, 1fr) 4.8rem;
  }
}
@media screen and (min-width: 768px) {
  .ca-header-container .header-row .header-logo-col .header-logo-main-img { width: 220px; }
}
/* The theme paints the logo link `rgba(255,255,255,.52)` on desktop (and `transparent`
   on mobile), so the plate shifts with the breakpoint. Pin it to the gold-tinted
   cream gradient so the logo always sits on the same background. */
.ca-header-container .header-logo-main-link,
.ca-header-container .header-row .header-logo-col .header-logo-main-link {
  background: radial-gradient(circle at 50% -120%, rgba(216, 189, 99, 0.24), transparent 36%),
    linear-gradient(180deg, #fff, #f8f2e2);
}

/* ---------- header compare badge ---------- */
/* The theme only anchors .header-cart-badge / .header-wishlist-badge with
   position:absolute, so the compare badge needs its own anchoring or it falls back
   to .btn .badge{position:relative} and renders inline inside the button.
   right/top are deliberately NOT set here — they come from
   .header-actions-btn .badge so the badge lands exactly like wishlist/cart. */
.header-compare .header-compare-badge { position: absolute; }

/* product detail page compare button — mirrors .compare-button .btn-compare.is-added-to-compare */
#detCompare.is-added-to-compare { color: #212529; background-color: #eee; border-color: #eee; }
#detCompare.is-added-to-compare:hover { color: #212529; background-color: #dbdbdb; border-color: #d5d5d5; }

/* ---------- subcategory thumbnails ---------- */
/* theme only constrains max-width, so portrait images grew past the fixed wrapper
   (measured 100x133.6). Wrapper + box are enlarged and the thumb fills it with
   object-fit:contain so nothing is ever cropped. */
.ca-subcat-section .col-subcategory .box { height: 340px; }
.ca-subcat-section .col-subcategory .box a .img-wraper { overflow: hidden; width: 220px; height: 220px; }
.ca-subcat-section .col-subcategory .box a .img-wraper img.img-fluid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cms-element-sidebar-filter { padding-bottom: 6px; }
.filter-panel-wrapper { display: block; }
@media (max-width: 991.98px) {
  .filter-panel-wrapper { display: none; }
  .filter-panel-wrapper.show { display: block; }
}
.filter-panel-wrapper-toggle { border: 1px solid #eae0c8; color: #26221a; }
.filter-panel-wrapper-toggle .icon { color: #c7a94d; margin-right: 6px; }
.filter-range .filter-panel.btn { background: none; border: 0; width: 100%; text-align: left; padding: 10px 4px; font-weight: 700; color: #26221a; }
.filter-list .filter-panel-item-toggle.btn { background: none; border: 0; border-bottom: 1px solid #eee6d2; width: 100%; text-align: left; padding: 10px 4px; font-weight: 700; color: #26221a; }
.filter-list .filter-panel-item-dropdown { display: block; padding: 4px 0 8px; }
.filter-list-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 4px; color: #4a4436; font-size: .93rem; text-decoration: none; }
.filter-list-item:hover { color: #26221a; text-decoration: none; }
.filter-list-item.is-active { color: #26221a; font-weight: 700; }
.filter-list-item.is-active .filter-list-label::before { content: '\2713'; margin-right: 5px; color: #c7a94d; }
.filter-list-count { color: #8a8270; font-size: .82rem; font-weight: 400; }
.filter-list-clear { display: inline-block; margin-top: 4px; padding: 2px 4px; font-size: .85rem; color: #a08a3c; text-decoration: underline; }
.filter-list-clear:hover { color: #7d6a1f; }
.filter-range-dropdown { display: block; padding: 4px 4px 10px; }
/* theme/all.css me .is--sidebar .filter-range-container .btn-success par position:absolute;
   right:-2px tha, jo Filter button ko flow se nikal kar price row ke upar overlay kar raha tha.
   .is--sidebar .filter-range-container .filter--ranges span rule bhi .dollar-sign par lagta tha,
   isliye $ ka line-height 29px ho jaa raha tha. Yahan poori row ko flex se rebuild kiya hai. */
/* is--sidebar ancestor chain: form ko width:100% dena usse "Price:" span ke saath
   ek line par baithne nahi deta (flex-wrap ke saath agli line par wrap ho jata tha).
   Form ko flex item banao, aur button ka theme wala width:100% override karo
   (.is--sidebar .filter-range-container .btn-success) warna wo bhi apni line par chala jata tha. */
.is--sidebar .filter-range-container .filter--ranges { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; font-size: .92rem; color: #4a4436; }
.is--sidebar .filter-range-container .filter-range-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.is--sidebar .filter-range-container .filter--ranges > span { font-size: .92rem; font-weight: 600; line-height: 1.2; }
.is--sidebar .filter-range-container .filter--ranges .dollar-sign { color: #4a4436; font-size: .9rem; font-weight: 400; line-height: 1; margin-right: 0; }
.is--sidebar .filter-range-container .filter--ranges .filter-range-min,
.is--sidebar .filter-range-container .filter--ranges .filter-range-max { width: auto; flex: 1 1 84px; min-width: 84px; display: flex; align-items: center; gap: 3px; margin-bottom: 0; }
.is--sidebar .filter-range-container .filter--ranges .form-control { width: auto; flex: 1 1 auto; min-width: 0; height: 32px; font-size: .9rem; color: #26221a; background: #fff; border: 1px solid #cfc8b8; border-radius: 2px; padding: 4px 6px; }
.is--sidebar .filter-range-container .filter--ranges .filter-range-divider { width: auto; flex: 0 0 auto; height: auto; line-height: 1; font-size: .9rem; color: #4a4436; }
.filter-range-container #priceBtn { position: static; right: auto; width: auto; margin-top: 0; background: #c7a94d; border-color: #c7a94d; color: #fff; font-size: .92rem; padding: 6px 18px; flex: 0 0 auto; }
.filter-range-container #priceBtn:hover { background: #b6972f; border-color: #b6972f; }
#range-slider input[type=range] { pointer-events: none; background: none; }
#range-slider input[type=range]::-webkit-slider-runnable-track { background: none; border: 0; }
#range-slider input[type=range]::-moz-range-track { background: none; border: 0; }
#range-slider input[type=range]::-webkit-slider-thumb { pointer-events: auto; }
#range-slider input[type=range]::-moz-range-thumb { pointer-events: auto; }
#range-slider::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: #c7a94d; border-radius: 1px; }

.side-men-bottom { padding: 4px 2px 10px; }
.side-men-bottom .imga-1,
.side-men-bottom .imga-2,
.side-men-bottom .imga-3 { margin: 8px 0; }
.side-men-bottom img { width: 100%; height: auto; display: block; border-radius: 4px; }

.ca-sidebar-category { font-size: .95rem; }
.ca-sidebar-category .ca-first-level { padding: 4px 0; }
.ca-sidebar-category .ca-first-level > a { font-weight: 600; color: #26221a; line-height: 1.4; }
.ca-sidebar-category .ysb-sub-cat { padding: 2px 0 4px; }
.ca-sidebar-category .ysb-sub-cat a { display: block; padding: 3px 0 3px 12px; color: #6b6555; border-left: 1px solid #eae0c8; }
.ca-sidebar-category .ysb-sub-cat a:hover { color: #c7a94d; }

.cms-element-product-listing-actions { margin-bottom: 8px; }
.cms-element-product-listing-actions .countbox strong { font-size: 1.02rem; color: #26221a; }
.cms-element-product-listing-actions .ca-sorting select,
.cms-element-product-listing-actions .sorting select {
  height: 38px; font-size: .92rem; border: 1px solid #e4d9bf; border-radius: 4px; padding: 4px 10px; color: #26221a;
}
#view_all { background: #c7a94d; border-color: #c7a94d; color: #fff; padding: 2px 16px; margin-left: auto; font-size: .9rem; }
#view_all:hover { background: #b6972f; border-color: #b6972f; }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  .catalog-sort { width: 100%; margin-top: 6px; }
  .catalog-toolbar { flex-wrap: wrap; }
  .product-detail-name { font-size: 1.45rem; }
  .cart-name { flex-basis: 100%; }
  .ca-checkout-grid, .ca-pay-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ca-field-row { grid-template-columns: minmax(0, 1fr); }
  .ca-cart-actions { justify-content: stretch; }
  .ca-amount { font-size: 1.6rem; }
  .ca-countdown { text-align: center; }
}

/* home image-grid: stop boxes/labels from overhanging the .cms-block clip box.
   .cms-row has margin -20px from the theme; .cms-block (overflow:hidden) then
   slices 20px (19px/10px rendered) off the left box's left edge and the right
   box's right edge. Restore the row to its block so nothing gets cut. */
.cms-block-image-grid .cms-block-container-row.row.cms-row,
.cms-block-container .cms-block-container-row.row.cms-row.has--sidebar-area {
  margin-right: 0;
  margin-left: 0;
}

/* listing grids at <576px: cols that only carry sm/lg/xl-* classes (no base
   xs-* class, e.g. the product-detail related grid) fall back to
   flex-basis:auto, sizing each column to its content's natural width
   (~346px) instead of the 335px container. That widens the row past the
   viewport, stretching the fixed top bar to viewport+20px. Force the same
   full-width behavior the theme's base col classes already give elsewhere. */
@media (max-width: 575.98px) {
  .cms-listing-row.row > .cms-listing-col { flex: 0 0 100%; max-width: 100%; }
  /* the related grid row is itself an auto-basis flex item of the
     .product-detail-related.row; its max-content is driven by the
     nowrap product titles, so it stretches past the viewport. Snap it
     to the parent width and let the columns shrink (titles ellipsize). */
  .row.product-detail-related .cms-listing-row.row { flex: 0 0 100%; max-width: 100%; min-width: 0; }
}
@media (max-width: 767.98px){ .search--bar { display: none !important; } }
@media (max-width:767.98px){ .ca-top-bar-container{padding-top:0!important;padding-bottom:0!important} .header-logo-main-img{max-height:48px!important;width:auto!important} .header-row{padding-top:4px!important;padding-bottom:4px!important} }

@media (max-width:767.98px){ .ca-top-bar-container{padding-top:0!important;padding-bottom:0!important} .header-logo-main-img{max-height:48px!important;width:auto!important} .header-row{padding-top:4px!important;padding-bottom:4px!important} }
@media (max-width:767.98px){ .ca-top-bar-container{padding-top:0!important;padding-bottom:0!important} .header-logo-main-img{max-height:48px!important;width:auto!important} .header-row{padding-top:4px!important;padding-bottom:4px!important} }



@media (max-width:767.98px){
  .ca-top-bar-container{padding-top:0!important;padding-bottom:0!important}
  .header-logo-main-img{max-height:48px!important;width:auto!important}
  .header-row{padding-top:4px!important;padding-bottom:4px!important}
}

.search--bar-hidden { display: none !important; }
.search--bar-visible { display: block !important; }
@media (max-width:767.98px){
  .search--bar-visible { display: none !important; }
  .search--bar-hidden { display: none !important; }
}

.ca-top-bar-container { min-height: 40px; }
@media (max-width:767.98px){
  .ca-top-bar-container{ min-height: 36px !important; padding-top:2px!important;padding-bottom:2px!important; }
  .header-logo-main-img{max-height:40px!important;width:auto!important}
  .header-row{padding-top:2px!important;padding-bottom:2px!important}
}

.ca-top-bar-container { min-height: 40px !important; }
.ca-top-bar-container .container-fluid { min-height: inherit !important; }
@media (max-width:767.98px){
  .ca-top-bar-container{ min-height: 36px !important; padding-top:2px!important;padding-bottom:2px!important; }
  .header-logo-main-img{max-height:40px!important;width:auto!important}
  .header-row{padding-top:2px!important;padding-bottom:2px!important}
}