/* Shared catalog cards, using the storefront's existing theme colors. */
.catalog-page { --catalog-header-height:110px; background: var(--cz-secondary-bg, #f7f7f8); }
.catalog-sticky-controls { position:sticky; top:var(--catalog-header-height); z-index:1025; background:var(--cz-secondary-bg, #f7f7f8); margin-bottom:1.25rem; box-shadow:0 6px 10px -10px rgb(20 25 30 / 30%); }
.catalog-sticky-controls .catalog-toolbar, .catalog-sticky-controls .catalog-categories { margin-bottom:0 !important; }
.catalog-sticky-controls .catalog-toolbar { border-bottom:0; }
.catalog-sticky-controls:has(#advancedFilters.show) { max-height:calc(100dvh - var(--catalog-header-height) - .5rem); overflow-y:auto; }
@media (max-width:991.98px) { .catalog-page { --catalog-header-height:82px; } }
.catalog-page .pagination { flex-wrap:wrap; }
.catalog-toolbar { border-block: 1px solid var(--cz-border-color); }
.catalog-toolbar .form-control, .catalog-toolbar .form-select { background-color: var(--cz-body-bg); min-height: 46px; }
.catalog-categories { display:flex; gap:1.25rem; overflow-x:auto; padding:0; margin-bottom:1.25rem; border-bottom:1px solid var(--cz-border-color); scrollbar-width:thin; scroll-behavior:smooth; }
.catalog-chip { flex:none; border:0; border-bottom:3px solid transparent; padding:.75rem .15rem; font-size:.8rem; font-weight:600; color:var(--cz-body-secondary-color); text-decoration:none; white-space:nowrap; }
.catalog-chip:hover, .catalog-chip.active { color:var(--cz-body-color); border-bottom-color:var(--cz-primary); }
.catalog-chip.active { font-weight:750; }
.catalog-result-count { color:var(--cz-body-secondary-color); font-size:.875rem; margin-bottom:1rem; }
#productGrid.catalog-grid { margin-inline:calc(-.5 * var(--cz-gutter-x)); padding:0; background:transparent; }
.catalog-card.product-card { border:1px solid var(--cz-border-color); border-radius:16px; background:var(--cz-card-bg, var(--cz-body-bg)); overflow:hidden; box-shadow:0 2px 7px rgb(20 25 30 / 5%); transition:box-shadow .18s, transform .18s; }
.catalog-card:hover { box-shadow:0 8px 24px rgb(20 25 30 / 11%); transform:translateY(-2px); }
.catalog-photo { display:block; position:relative; aspect-ratio:1; background:var(--cz-secondary-bg); overflow:hidden; }
.catalog-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.catalog-photo img.is-placeholder, .catalog-detail-image.is-placeholder { padding:22%; background:var(--cz-secondary-bg); }
.catalog-discount, .catalog-sold-out { position:absolute; z-index:1; top:.65rem; font-size:.65rem; }
.catalog-discount { left:.65rem; }
.catalog-sold-out { right:.65rem; }
.catalog-card-body { padding:.85rem; display:flex; flex-direction:column; gap:.55rem; }
.catalog-category { align-self:flex-start; max-width:100%; border-radius:999px; padding:.2rem .55rem; font-size:.65rem; font-weight:700; line-height:1.3; background:var(--cz-primary-bg-subtle, #fcebee); color:var(--cz-body-color); overflow-wrap:anywhere; }
.catalog-card-title { font-size:.9rem; font-weight:600; line-height:1.45; margin:0 0 .5rem; overflow-wrap:anywhere; }
.catalog-card-title a { color:var(--cz-body-color); text-decoration:none; }
.catalog-card-title a:hover { color:var(--cz-primary); }
.catalog-card-bottom { margin-top:auto; }
.catalog-price { color:var(--cz-primary); font-size:1.05rem; font-weight:750; line-height:1.4; }
.catalog-old-price { color:var(--cz-body-secondary-color); font-size:.75rem; }
.catalog-cart { display:flex; justify-content:center; align-items:center; gap:.45rem; width:100%; min-height:44px; margin-top:.8rem; padding:.55rem .35rem; border-radius:10px; font-size:.8rem; white-space:normal; }
.catalog-cart:focus-visible, .catalog-open:focus-visible, .catalog-chip:focus-visible { outline:3px solid var(--cz-primary); outline-offset:3px; }
.catalog-modal .modal-content { border-radius:20px; overflow:hidden; }
.catalog-modal .modal-header { padding:1rem 1.25rem; border-bottom:1px solid var(--cz-border-color); }
.catalog-modal .modal-body { padding:0; }
.catalog-detail { display:grid; grid-template-columns:1fr 1fr; }
.catalog-gallery { min-width:0; background:var(--cz-secondary-bg); }
.catalog-gallery-stage { position:relative; aspect-ratio:1; touch-action:pan-y pinch-zoom; }
.catalog-detail-image { display:block; width:100%; height:100%; aspect-ratio:1; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.catalog-detail-image.gallery-slide-old { position:absolute; inset:0; z-index:0; }
.catalog-detail-image.gallery-slide-in-right,
.catalog-detail-image.gallery-slide-in-left { position:relative; z-index:1; }
.catalog-detail-image.gallery-slide-in-right { animation:catalog-slide-in-right 300ms cubic-bezier(.22,.61,.36,1); }
.catalog-detail-image.gallery-slide-in-left { animation:catalog-slide-in-left 300ms cubic-bezier(.22,.61,.36,1); }
.catalog-detail-image.gallery-slide-out-left { animation:catalog-slide-out-left 300ms cubic-bezier(.22,.61,.36,1); }
.catalog-detail-image.gallery-slide-out-right { animation:catalog-slide-out-right 300ms cubic-bezier(.22,.61,.36,1); }
@keyframes catalog-slide-in-right { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes catalog-slide-in-left { from { transform:translateX(-100%); } to { transform:translateX(0); } }
@keyframes catalog-slide-out-left { from { transform:translateX(0); } to { transform:translateX(-100%); } }
@keyframes catalog-slide-out-right { from { transform:translateX(0); } to { transform:translateX(100%); } }
.catalog-gallery-arrow { position:absolute; top:50%; z-index:2; display:flex; align-items:center; justify-content:center; width:44px; height:72px; padding:0; border:0; border-radius:0; background:rgba(17,25,29,.62); color:#fff; transform:translateY(-50%); cursor:pointer; }
.catalog-gallery-prev { left:0; }
.catalog-gallery-next { right:0; }
.catalog-gallery-arrow::before { content:''; width:16px; height:16px; border:solid currentColor; border-width:0 4px 4px 0; transform:rotate(-45deg); }
.catalog-gallery-prev::before { transform:rotate(135deg); }
.catalog-gallery-arrow:hover { background:rgba(17,25,29,.85); }
.catalog-gallery-arrow:focus-visible, .catalog-thumbnail:focus-visible, .catalog-gallery-stage:focus-visible { outline:3px solid var(--cz-primary); outline-offset:-3px; }
.catalog-gallery-counter { position:absolute; bottom:.75rem; left:50%; z-index:1; transform:translateX(-50%); border-radius:999px; padding:.2rem .65rem; background:rgba(17,25,29,.65); color:#fff; font-size:.75rem; pointer-events:none; }
.catalog-thumbnails { position:relative; display:flex; gap:.5rem; overflow-x:auto; padding:.75rem; overscroll-behavior-x:contain; }
.catalog-thumbnail { border:1px solid var(--cz-border-color); border-radius:8px; background:var(--cz-body-bg); padding:0; flex:0 0 58px; overflow:hidden; }
.catalog-thumbnail.is-active { border:2px solid var(--cz-primary); }
.catalog-thumbnail img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.catalog-info { padding:1.5rem; display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; min-width:0; }
.catalog-detail-title { font-size:1.5rem; line-height:1.35; margin:0; }
.catalog-info .catalog-price { font-size:1.6rem; }
.catalog-description { white-space:pre-line; font-size:.9rem; line-height:1.75; color:var(--cz-body-secondary-color); margin:0; overflow-wrap:anywhere; }
.catalog-stock { font-size:.85rem; margin:0; }
.catalog-purchase { width:100%; padding-top:1rem; margin-top:auto; border-top:1px solid var(--cz-border-color); }
.catalog-quantity { display:flex; align-items:center; border:1px solid var(--cz-border-color); border-radius:10px; width:144px; overflow:hidden; }
.catalog-quantity button { background:var(--cz-secondary-bg); border:0; width:44px; min-height:44px; color:var(--cz-body-color); font-size:1.2rem; }
.catalog-quantity input { width:56px; border:0; background:var(--cz-body-bg); color:var(--cz-body-color); text-align:center; appearance:textfield; }
.catalog-quantity input::-webkit-inner-spin-button { appearance:none; }
.catalog-purchase-row { display:flex; gap:.75rem; align-items:center; }
.catalog-purchase-row .catalog-cart { margin:0; flex:1; }
.catalog-modal-footer { display:grid; grid-template-columns:1fr 1fr; padding:0; flex-shrink:0; background:var(--cz-body-bg); }
.catalog-modal-footer[hidden] { display:none !important; }
.catalog-modal-footer .catalog-purchase { grid-column:2; margin:0; padding:1rem 1.5rem; border:0; position:static; }
.catalog-variant { width:100%; margin-bottom:1rem; }
.catalog-message { padding:3rem 1.5rem; text-align:center; }
.catalog-message a { display:inline-block; margin-top:1rem; }
@media (min-width:576px) {
    .catalog-modal .modal-content { height:min(900px, calc(100dvh - 3.5rem)); }
    .catalog-modal .modal-body { display:flex; min-height:0; overflow:hidden; }
    .catalog-detail { flex:1; min-height:0; grid-template-rows:minmax(0, 1fr); }
    .catalog-gallery { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
    .catalog-gallery-stage { flex:1; min-height:0; aspect-ratio:auto; }
    .catalog-thumbnails { flex-shrink:0; }
    .catalog-info { min-height:0; overflow-y:auto; }
    .catalog-info > * { flex-shrink:0; }
}
@media (max-width:575.98px) {
    .catalog-card-body { padding:.65rem; gap:.45rem; }
    .catalog-card-title { font-size:.8rem; }
    .catalog-price { font-size:.95rem; }
    .catalog-card .catalog-cart { font-size:.75rem; }
    .catalog-page > .container { padding-inline:1rem; }
    .catalog-modal .modal-content { border-radius:0; }
    .catalog-detail { grid-template-columns:1fr; }
    .catalog-info { padding:1rem; }
    .catalog-detail-title { font-size:1.25rem; }
    .catalog-purchase { position:sticky; bottom:0; background:var(--cz-body-bg); padding-block:1rem; }
    .catalog-modal-footer { grid-template-columns:1fr; }
    .catalog-modal-footer .catalog-purchase { grid-column:1; padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
    .catalog-toolbar .col-md-3 { width:50%; }
    .catalog-toolbar select, .catalog-toolbar button { font-size:.75rem; padding-inline:.6rem; }
}
@media (max-width:767.98px) { .catalog-gallery-arrow { display:none; } }
@media (prefers-reduced-motion:reduce) {
    .catalog-card.product-card { transition:none; transform:none; }
    .catalog-detail-image[class*="gallery-slide-"] { animation:none; }
}