/**
 * SAP Catalog Sync - frontend styles
 * Loaded as a real file so caching/optimisation plugins handle it predictably.
 */

/* ---------- Tunables ----------
   --sap-sticky-offset clears the theme's floating header. Raise it if your
   header is taller; set it to 20px if the header does not stick. */
:root {
    --sap-sticky-offset: 120px;
    --sap-columns: 4;
}

/* ---------- Layout wrappers ---------- */
.sap-catalog-archive,
.sap-single-product { max-width: 1200px; margin: 40px auto; padding: 0 20px; box-sizing: border-box; }

.sap-archive-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.sap-archive-main { min-width: 0; }

/* ---------- Filter sidebar ---------- */
.sap-filter-sidebar {
    background: #fff; border: 1px solid #ececec; border-radius: 10px; padding: 16px;
    position: sticky;
    /* Sits below the theme's sticky header instead of scrolling underneath it. */
    top: var(--sap-sticky-offset, 120px);
    /* Never taller than the space left under the header; scrolls internally. */
    max-height: calc(100vh - var(--sap-sticky-offset, 120px) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sap-filter-field { display: block; position: relative; margin-bottom: 12px; }
.sap-filter-field label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: #FF0205; margin-bottom: 5px; }
.sap-filter-field select,
.sap-filter-field input[type="text"],
.sap-filter-field input[type="search"] {
    width: 100%; padding: 8px 10px; border-radius: 5px; border: 1px solid #e0e0e0;
    font-size: 13px; background: #fafafa; color: #333; box-sizing: border-box;
    -webkit-appearance: none; appearance: none;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.sap-filter-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath fill=%27%23aaa%27 d=%27M5 6L0 0h10z%27/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; padding-right: 26px;
}
.sap-filter-field select:focus,
.sap-filter-field input:focus { outline: none; border-color: #FF0205; background: #fff; box-shadow: 0 0 0 3px rgba(255,2,5,0.08); }

/* Buttons follow the theme's pill-shaped controls (see the site header). */
.sap-filter-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.sap-filter-apply,
.sap-filter-reset {
    display: block; width: 100%; box-sizing: border-box;
    padding: 11px 16px; border-radius: 999px;
    font-weight: 700; font-size: 11px; letter-spacing: .8px; line-height: 1.2;
    text-transform: uppercase; text-align: center; text-decoration: none;
    cursor: pointer; font-family: inherit;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}

/* Themes and page builders style bare <button> elements aggressively, so the
   fill is stated with enough weight to survive. Without this the Apply button
   renders as an outline, which reads as the secondary action. */
.sap-filter-sidebar .sap-filter-apply,
.sap-filter-sidebar button.sap-filter-apply,
.sap-filter-sidebar button[type="submit"].sap-filter-apply {
    background: #FF0205 !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid #FF0205 !important;
    box-shadow: 0 4px 12px rgba(255, 2, 5, 0.22);
    text-shadow: none;
}
.sap-filter-sidebar .sap-filter-apply:hover,
.sap-filter-sidebar .sap-filter-apply:focus,
.sap-filter-sidebar button.sap-filter-apply:hover,
.sap-filter-sidebar button.sap-filter-apply:focus {
    background: #d90204 !important;
    border-color: #d90204 !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(255, 2, 5, 0.3);
    transform: translateY(-1px);
}
.sap-filter-sidebar .sap-filter-apply:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(255, 2, 5, 0.25); }

.sap-filter-reset {
    background: #fff; color: #FF0205; border: 1px solid #ffc9ca;
}
.sap-filter-reset:hover,
.sap-filter-reset:focus { background: #fff5f5; border-color: #FF0205; color: #FF0205; }

.sap-filter-apply:focus-visible,
.sap-filter-reset:focus-visible { outline: 2px solid #FF0205; outline-offset: 2px; }

/* The Apply button is always visible: JS auto-submit is a convenience, never
   the only way to apply a filter. */

/* ---------- Results header ---------- */
.sap-results-meta { margin: 0 0 12px; color: #666; font-size: 13px; }
.sap-active-filters { margin: 0 0 14px; font-size: 12px; color: #555; }
.sap-active-filters .sap-chip { display: inline-block; background: #fff5f5; border: 1px solid #ffd6d6; color: #c80002; border-radius: 20px; padding: 3px 10px; margin: 0 6px 6px 0; }

/* ---------- Product grid ---------- */
.sap-product-grid { display: grid; grid-template-columns: repeat(var(--sap-columns, 4), minmax(0, 1fr)); gap: 20px; margin-top: 10px; }
@media (max-width: 1100px) { .sap-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 782px)  { .sap-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .sap-product-grid { grid-template-columns: minmax(0, 1fr); } }

.sap-product-card {
    display: flex; flex-direction: column; min-width: 0;
    border: 1px solid #eaeaea; border-radius: 12px; background: #fff; padding: 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform .25s ease, box-shadow .25s ease, border-color .2s;
}
.sap-product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); border-color: #FF0205; }

.sap-card-image { overflow: hidden; border-radius: 8px; margin: -18px -18px 14px -18px; background: #f8f8f8; aspect-ratio: 4 / 3; }
.sap-card-image a { display: block; width: 100%; height: 100%; }
.sap-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sap-product-card:hover .sap-card-image img { transform: scale(1.04); }
.sap-card-image-placeholder { display: flex; align-items: center; justify-content: center; color: #c9c9c9; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }

/* Title - forced visible so no theme heading reset can collapse it */
.sap-product-title {
    display: block !important; visibility: visible !important;
    margin: 0 0 12px 0; padding: 0;
    font-size: 15px; font-weight: 600; line-height: 1.35; color: #111;
    overflow-wrap: anywhere;
}
.sap-product-title a { display: block; color: #111; text-decoration: none; transition: color .2s; }
.sap-product-title a:hover { color: #FF0205; }

/* ---------- Card meta rows ---------- */
.sap-meta-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.sap-meta {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
    font-size: 12px; color: #555; padding-bottom: 6px; border-bottom: 1px solid #f4f4f4;
}
.sap-meta:last-child { border-bottom: none; padding-bottom: 0; }
.sap-meta .sap-meta-label { flex: 0 0 auto; color: #222; font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .5px; opacity: .75; padding-top: 1px; }
.sap-meta .sap-meta-value { flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.sap-meta .sap-meta-value a { color: #FF0205; text-decoration: none; font-weight: 500; }
.sap-meta .sap-meta-value a:hover { text-decoration: underline; }
.sap-meta .sap-meta-empty { color: #bbb; }

/* ---------- Empty state ---------- */
.sap-empty-state { background: #fff; border: 1px solid #eaeaea; border-radius: 10px; padding: 36px 24px; color: #666; text-align: center; }

/* ---------- Pagination ---------- */
.sap-pagination { margin-top: 36px; display: flex; justify-content: center; }
.sap-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.sap-pagination .page-numbers {
    display: inline-block; padding: 9px 15px; border: 1px solid #eee; border-radius: 8px;
    color: #444; text-decoration: none; font-weight: 500; font-size: 14px; transition: all .2s;
}
.sap-pagination a.page-numbers:hover { background: #f9f9f9; border-color: #ddd; color: #FF0205; }
.sap-pagination .page-numbers.current { background: #FF0205; color: #fff; border-color: #FF0205; box-shadow: 0 4px 10px rgba(255,2,5,0.2); }
.sap-pagination .page-numbers.dots { border-color: transparent; }

/* ---------- Breadcrumbs & titles ---------- */
.sap-breadcrumbs { margin-bottom: 22px; font-size: 13px; color: #777; font-weight: 500; }
.sap-breadcrumbs a { color: #FF0205; text-decoration: none; }
.sap-breadcrumbs a:hover { text-decoration: underline; }
.sap-page-title { font-size: 2.2em; font-weight: 700; margin: 0 0 10px 0; color: #111; letter-spacing: -.5px; }

/* ---------- Single product ---------- */
.sap-single-content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; margin-top: 10px; }
@media (max-width: 782px) { .sap-single-content { grid-template-columns: 1fr; gap: 30px; } }
.sap-details-col { min-width: 0; }
.sap-details-col .entry-title { font-size: 2em; color: #111; margin: 0 0 10px 0; font-weight: 700; line-height: 1.3; }
.sap-single-title-divider { width: 60px; height: 4px; background: #FF0205; margin: 0 0 26px 0; border-radius: 2px; }

.sap-single-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.03); margin-top: 10px; border: 1px solid #eaeaea; }
.sap-single-table th,
.sap-single-table td { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.sap-single-table tr:last-child th,
.sap-single-table tr:last-child td { border-bottom: none; }
.sap-single-table th { background: #fdfdfd; width: 35%; color: #444; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .5px; }
.sap-single-table td { color: #222; font-size: 15px; }
.sap-single-table a { color: #FF0205; text-decoration: none; font-weight: 500; }
.sap-single-table a:hover { text-decoration: underline; }

/* ---------- Single product gallery ---------- */
.sap-image-gallery-col { position: sticky; top: 30px; min-width: 0; }
.sap-main-image-wrap { position: relative; border-radius: 12px; overflow: hidden; background: #f8f8f8; border: 1px solid #eee; aspect-ratio: 1 / 1; }
.sap-main-img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px; box-sizing: border-box; transition: opacity .18s ease; }
.sap-zoom-hint { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.45); color: #fff; font-size: 11px; padding: 4px 10px; border-radius: 20px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.sap-main-image-wrap:hover .sap-zoom-hint { opacity: 1; }

.sap-slide-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.12); transition: background .2s, transform .2s; z-index: 5; }
.sap-slide-btn:hover { background: #FF0205; color: #fff; transform: translateY(-50%) scale(1.08); }
.sap-slide-prev { left: 12px; }
.sap-slide-next { right: 12px; }

.sap-thumb-strip { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: #ddd transparent; }
.sap-thumb-strip::-webkit-scrollbar { height: 4px; }
.sap-thumb-strip::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.sap-thumb-item { flex: 0 0 72px; height: 72px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: #f8f8f8; transition: border-color .2s, transform .15s; }
.sap-thumb-item:hover { border-color: #ccc; transform: scale(1.05); }
.sap-thumb-item.active { border-color: #FF0205; }
.sap-thumb-item img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; box-sizing: border-box; }

/* ---------- Lightbox ---------- */
.sap-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.93); z-index: 99999; justify-content: center; align-items: center; }
.sap-lightbox.active { display: flex; animation: sap-lb-in .2s ease; }
@keyframes sap-lb-in { from { opacity: 0; } to { opacity: 1; } }
.sap-lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.sap-lightbox-close { position: absolute; top: 16px; right: 24px; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; opacity: .75; background: none; border: none; transition: opacity .2s, transform .2s; }
.sap-lightbox-close:hover { opacity: 1; transform: rotate(90deg); }
.sap-lightbox-prev,
.sap-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 36px; cursor: pointer; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.sap-lightbox-prev { left: 20px; }
.sap-lightbox-next { right: 20px; }
.sap-lightbox-prev:hover,
.sap-lightbox-next:hover { background: rgba(255,2,5,0.75); border-color: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
    .sap-archive-layout { grid-template-columns: minmax(0, 1fr); }
    .sap-filter-sidebar { position: static; }
}