/*
 * Solar System product catalog (Oct 2026)
 * Styles for /products (categories), /products/{category} and
 * /products/{category}/{product}. Loaded only by front.products.
 * Colors reuse the theme's own accents (#f37057 link/CTA, #3a768b hover).
 * Logical properties (inline-start/end) keep everything correct under
 * dir="rtl" for Arabic without separate overrides.
 */
:root {
    --sg-accent: #f37057;
    --sg-accent-dark: #3a768b;
    --sg-ink: #0b1c2c;
    --sg-muted: #5f6b76;
    --sg-line: #e6e9ec;
    --sg-surface: #f6f7f9;
    --sg-radius: 14px;
}

/* ---- Cards (categories + products) ---------------------------------- */
.sg-catalog-card { height: 100%; }
.sg-catalog-card .elementor-image-box-wrapper { height: 100%; }
.sg-catalog-card .elementor-image-box-img {
    /* The theme sizes this figure inline-block to the image's natural
       width, so small source images would render as smaller cards. */
    display: block;
    width: 100% !important;
    overflow: hidden;
    border-radius: var(--sg-radius);
    background: var(--sg-surface);
}
.sg-catalog-card .elementor-image-box-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .5s ease;
}
.sg-catalog-card:hover .elementor-image-box-img img { transform: scale(1.04); }
.sg-catalog-card .elementor-image-box-title { transition: color .2s ease; }
/* The theme paints image-box descriptions white (they overlay photos on
   the original export); catalog cards show them as body copy below. */
.sg-catalog-card .elementor-image-box-description {
    color: var(--sg-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-block: 6px 0;
}
.sg-catalog-card:hover .elementor-image-box-title { color: var(--sg-accent); }

.sg-catalog-meta {
    display: inline-block;
    margin-block: 6px 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--sg-accent-dark);
    text-decoration: none;
}
a.sg-catalog-meta:hover { color: var(--sg-accent); }
.sg-catalog-link {
    display: block;
    margin-block-start: 6px;
    font-weight: 600;
    color: var(--sg-accent);
}
.sg-catalog-link::after { content: " \2192"; }
[dir="rtl"] .sg-catalog-link::after { content: " \2190"; }

.sg-catalog-intro {
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
    color: var(--sg-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* ---- Breadcrumb ----------------------------------------------------- */
.sg-catalog-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    font-size: 14px;
    color: var(--sg-muted);
}
.sg-catalog-breadcrumb li + li::before { content: "/"; margin-inline-end: 6px; color: #b8c0c7; }
.sg-catalog-breadcrumb a { color: var(--sg-accent-dark); text-decoration: none; }
.sg-catalog-breadcrumb a:hover { color: var(--sg-accent); }
.sg-catalog-breadcrumb [aria-current] { color: var(--sg-ink); font-weight: 600; }

/* ---- Detail: carousel ----------------------------------------------- */
.sg-product-detail .elementor-container { align-items: flex-start; }
.sg-carousel { position: relative; width: 100%; }
.sg-carousel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--sg-radius);
    background: var(--sg-surface);
    outline: none;
}
.sg-carousel__viewport::-webkit-scrollbar { display: none; }
.sg-carousel__viewport:focus-visible { box-shadow: 0 0 0 3px rgba(243, 112, 87, .45); }
.sg-carousel__track { display: flex; }
.sg-carousel__slide {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sg-carousel__slide img { width: 100%; height: 100%; object-fit: contain; }
.sg-carousel__slide.is-entering img { animation: sg-fade-in .35s ease; }
@keyframes sg-fade-in { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .sg-carousel__slide.is-entering img { animation: none; }
}

.sg-carousel__nav {
    position: absolute;
    top: calc(50% - 60px);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .92);
    color: var(--sg-ink);
    box-shadow: 0 4px 16px rgba(11, 28, 44, .15);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
    padding: 0;
}
.sg-carousel__nav:hover, .sg-carousel__nav:focus-visible { background: var(--sg-accent); color: #fff; }
.sg-carousel__nav--prev { inset-inline-start: 12px; }
.sg-carousel__nav--next { inset-inline-end: 12px; }
[dir="rtl"] .sg-carousel__nav svg { transform: scaleX(-1); }

.sg-carousel__thumbs {
    display: flex;
    gap: 10px;
    margin-block-start: 12px;
    overflow-x: auto;
    padding-block-end: 4px;
}
.sg-carousel__thumb {
    flex: 0 0 76px;
    height: 76px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: var(--sg-surface);
    cursor: pointer;
    opacity: .65;
    transition: opacity .2s ease, border-color .2s ease;
}
.sg-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-carousel__thumb:hover { opacity: 1; }
.sg-carousel__thumb.is-active { opacity: 1; border-color: var(--sg-accent); }

/* ---- Detail: info column -------------------------------------------- */
.sg-product-info { padding-inline-start: 24px; }
.sg-product-info__title { margin-block: 4px 12px; font-size: 32px; line-height: 1.25; color: var(--sg-ink); }
.sg-product-info__price { font-size: 22px; font-weight: 700; color: var(--sg-accent); margin-block-end: 12px; }
.sg-product-info__summary { color: var(--sg-muted); font-size: 17px; line-height: 1.75; margin-block-end: 24px; }
.sg-product-info__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 28px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sg-btn--primary { background: var(--sg-accent); color: #fff; border: 2px solid var(--sg-accent); }
.sg-btn--primary:hover { background: var(--sg-accent-dark); border-color: var(--sg-accent-dark); color: #fff; }
.sg-btn--ghost { background: transparent; color: var(--sg-ink); border: 2px solid var(--sg-line); }
.sg-btn--ghost:hover { border-color: var(--sg-accent); color: var(--sg-accent); }

/* ---- Detail: rich text ---------------------------------------------- */
.sg-section-title { margin-block: 40px 16px; }
.sg-rich-text { color: var(--sg-muted); font-size: 16px; line-height: 1.8; }
.sg-rich-text h2, .sg-rich-text h3, .sg-rich-text h4 { color: var(--sg-ink); margin-block: 1.4em .5em; }
.sg-rich-text ul, .sg-rich-text ol { padding-inline-start: 1.4em; margin-block-end: 1em; }
/* The theme strips list markers globally; restore them for editor content. */
.sg-rich-text ul { list-style: disc; }
.sg-rich-text ol { list-style: decimal; }
.sg-rich-text li { display: list-item; }
.sg-rich-text li { margin-block-end: .35em; }
.sg-rich-text img { max-width: 100%; height: auto; border-radius: 10px; }
.sg-rich-text blockquote {
    margin: 1.2em 0;
    padding: .8em 1.2em;
    border-inline-start: 4px solid var(--sg-accent);
    background: var(--sg-surface);
}
.sg-rich-text table { width: 100%; border-collapse: collapse; margin-block: 1em; }
.sg-rich-text th, .sg-rich-text td { border: 1px solid var(--sg-line); padding: 10px 14px; text-align: start; }
.sg-rich-text th { background: var(--sg-surface); color: var(--sg-ink); }

@media (max-width: 767px) {
    .sg-product-info { padding-inline-start: 0; margin-block-start: 24px; }
    .sg-product-info__title { font-size: 26px; }
    .sg-carousel__nav { width: 38px; height: 38px; }
    .sg-carousel__thumb { flex-basis: 60px; height: 60px; }
}