/* =========================================================================
   PhoneShowcase theme (Bootstrap 5 + custom)
   ========================================================================= */
:root {
    --brand: #4f46e5;          /* indigo */
    --brand-2: #7c3aed;        /* violet */
    --brand-dark: #1e1b4b;
    --brand-soft: #eef2ff;
    --accent: #f59e0b;         /* amber: stars, search button */
    --price: #059669;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --surface: #ffffff;
    --bg: #f4f6fb;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
    --shadow-md: 0 10px 25px -8px rgba(30, 27, 75, .18);
    --row-hover: #eef2ff;
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
body { background: var(--bg); color: var(--ink); font-family: var(--bs-font-sans-serif); }
h1, h2, h3, .brand-logo, .hero-title, .results-title { font-family: 'Poppins', var(--bs-font-sans-serif); }
a { color: var(--brand); }
a:hover { color: var(--brand-2); }

/* ---------- Site width: 9 of 12 Bootstrap columns on large screens ----------
   Phones/tablets: full width. ≥1200px: 10/12. ≥1400px: 9/12 (75%). */
.site-wrap { width: 100%; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 1200px) { .site-wrap { max-width: 83.3333%; } }
@media (min-width: 1400px) { .site-wrap { max-width: 75%; } }
.navbar > .site-wrap { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; }

/* =========================== Top navigation =========================== */
.site-nav {
    background: linear-gradient(100deg, #1e1b4b 0%, #312e81 45%, #4c1d95 100%);
    box-shadow: 0 4px 18px rgba(30, 27, 75, .35);
    padding-block: .65rem;
}
.brand-logo { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.3rem; color: #fff !important; text-decoration: none; letter-spacing: -.01em; }
.brand-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
              background: linear-gradient(135deg, var(--accent), #f97316); color: #1e1b4b; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(245, 158, 11, .4); }
.site-nav .nav-link { color: rgba(255,255,255,.8); font-weight: 500; padding: .45rem .9rem !important; border-radius: 999px; transition: background .15s, color .15s; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: #fff; background: rgba(255,255,255,.12); }
.site-nav .navbar-toggler { color: #fff; box-shadow: none; }

.search-form { position: relative; display: flex; align-items: center; min-width: 320px; }
.search-form .search-icon { position: absolute; left: 14px; color: #94a3b8; pointer-events: none; }
.search-form .form-control { border-radius: 999px; padding: .5rem 6.2rem .5rem 2.4rem; border: 0; background: rgba(255,255,255,.95); }
.search-form .form-control:focus { box-shadow: 0 0 0 3px rgba(245, 158, 11, .45); }
.search-form .btn-search { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 1rem; font-size: .88rem; }
.btn-search { background: linear-gradient(135deg, var(--accent), #f97316); color: #1e1b4b; border: 0; border-radius: 999px; font-weight: 600; }
.btn-search:hover { filter: brightness(1.05); color: #1e1b4b; }
.btn-compare { border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: .45rem 1rem; align-items: center; }
.btn-compare:hover { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.6); }
.compare-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff;
                 font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #312e81; }

/* Mobile slide-in menu (Bootstrap offcanvas from the left, overlapping the page) */
@media (max-width: 991.98px) {
    .site-offcanvas { background: linear-gradient(180deg, #1e1b4b, #312e81 60%, #4c1d95); color: #fff; width: 290px !important; }
    .site-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.12); }
    .site-offcanvas .navbar-nav .nav-link { padding: .7rem 1rem !important; border-radius: 10px; font-size: 1.02rem; }
    .search-form { min-width: 0; width: 100%; }
}

/* ============================== Home banner ============================== */
.home-hero {
    position: relative; overflow: hidden; border-radius: 20px; padding: 2.4rem 2.6rem; color: #fff;
    background: radial-gradient(circle at 85% 20%, rgba(245,158,11,.35), transparent 40%),
                linear-gradient(120deg, #312e81 0%, #4f46e5 50%, #7c3aed 100%);
    box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.hero-content { position: relative; z-index: 1; max-width: 640px; }
.hero-kicker { display: inline-flex; gap: .4rem; align-items: center; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
               padding: .25rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 500; }
.hero-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; margin: .8rem 0 .5rem; letter-spacing: -.02em; }
.hero-sub { color: rgba(255,255,255,.85); margin-bottom: 1.2rem; font-size: 1.02rem; }
.hero-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-pills a { background: #fff; color: var(--brand-dark); text-decoration: none; padding: .45rem .95rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
                box-shadow: 0 4px 12px rgba(0,0,0,.12); transition: transform .15s; }
.hero-pills a:hover { transform: translateY(-2px); color: var(--brand); }
.hero-pills a i { color: var(--brand-2); }
.hero-art { position: relative; width: 260px; height: 170px; flex: 0 0 260px; }
.hero-phone { position: absolute; width: 78px; height: 150px; border-radius: 16px; border: 4px solid #0f172a;
              background: linear-gradient(160deg, #a5b4fc, #6366f1 55%, #f59e0b); box-shadow: 0 18px 30px rgba(0,0,0,.35); }
.hero-phone.p1 { left: 20px; top: 20px; transform: rotate(-14deg); }
.hero-phone.p2 { left: 95px; top: 0; z-index: 2; background: linear-gradient(160deg, #fde68a, #f59e0b 50%, #7c3aed); }
.hero-phone.p3 { left: 170px; top: 22px; transform: rotate(14deg); background: linear-gradient(160deg, #c4b5fd, #7c3aed 60%, #1e1b4b); }
@media (max-width: 767.98px) { .home-hero { padding: 1.6rem 1.3rem; } .hero-art { display: none; } }

/* ============================ Facet sidebar ============================ */
.facet-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.facet-header { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; background: var(--brand-soft); color: var(--brand-dark); border-bottom: 1px solid var(--line); }
.facet-section { border-bottom: 1px solid var(--line); padding: .7rem .7rem .75rem; }
.facet-section:last-child { border-bottom: 0; }
.facet-title { font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 .35rem .35rem; }
.facet-link { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .28rem .5rem; border-radius: 8px;
              font-size: .88rem; color: #334155; text-decoration: none; line-height: 1.3; transition: background .12s; }
.facet-link:hover { background: #f1f5f9; color: var(--ink); }
.facet-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.facet-link.active .bi-x-lg { font-size: .7rem; }
.facet-scroll { max-height: 220px; overflow-y: auto; }
.facet-count { color: #94a3b8; font-size: .78rem; font-weight: 400; }
.btn-filter { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-weight: 600; box-shadow: var(--shadow-sm); }
.btn-filter .badge { background: var(--brand); }
@media (max-width: 767.98px) {
    .facet-offcanvas { width: 300px !important; background: var(--bg); }
    .facet-offcanvas .offcanvas-body { overflow-y: auto; padding: 0 12px 16px !important; }
    .facet-offcanvas .facet-panel { box-shadow: none; }
}

/* ===================== Results bar, sort links, chips ===================== */
.results-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.results-title { font-size: 1.3rem; font-weight: 700; }
.view-switch .btn { border-color: var(--line); color: #475569; background: #fff; }
.view-switch .btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.sort-links { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; padding: .5rem .6rem; margin-bottom: 1rem;
              background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); }
.sort-link { padding: .3rem .85rem; border-radius: 999px; font-size: .87rem; font-weight: 500; color: #475569; text-decoration: none; }
.sort-link:hover { background: #f1f5f9; color: var(--ink); }
.sort-link.active { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 4px 10px rgba(79,70,229,.3); }
@media (max-width: 575.98px) { .sort-links { border-radius: 14px; } }
.filter-chip { display: inline-flex; align-items: center; gap: .2rem; background: var(--brand-soft); border: 1px solid #c7d2fe; color: var(--brand); border-radius: 999px;
               padding: .2rem .7rem; margin: 0 .3rem .3rem 0; font-size: .82rem; font-weight: 500; text-decoration: none; }
.filter-chip:hover { background: #e0e7ff; color: var(--brand-dark); }

/* ============ Product tiles (fixed picture box: 170px high on every page) ============ */
.product-tile { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit;
                box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s, border-color .18s; overflow: hidden; }
.product-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #c7d2fe; }
.tile-img { height: 170px; display: flex; align-items: center; justify-content: center; padding: .8rem; background: linear-gradient(180deg, #f8fafc, #fff); }
.tile-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }
.product-tile:hover .tile-img img { transform: scale(1.06); }
.tile-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; z-index: 1; }
.tile-badge { font-size: .66rem; font-weight: 700; padding: .15rem .45rem; border-radius: 6px; letter-spacing: .02em; }
.badge-new { background: #fef3c7; color: #b45309; }
.badge-5g { background: var(--brand-soft); color: var(--brand); }
.tile-brand { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.tile-model { font-weight: 600; font-size: .92rem; line-height: 1.25; color: var(--ink); }
.tile-rating { font-size: .7rem; margin: .15rem 0; }
.tile-price { font-size: .95rem; color: var(--price); font-weight: 700; }
/* Catalogue grid next to the filters: up to 5 per row (from 1500px) */
@media (min-width: 1500px) { .tiles-catalog > * { flex: 0 0 auto; width: 20%; } }   /* max 5 per row */

/* ==================== List view (fixed 110 x 110 picture) ==================== */
.product-list { display: flex; flex-direction: column; gap: .7rem; }
.list-item { display: flex; gap: 1.1rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem;
             box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; }
.list-item:hover { border-color: #c7d2fe; box-shadow: var(--shadow-md); }
.list-img { flex: 0 0 110px; width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 10px; }
.list-img img { width: 110px; height: 110px; object-fit: contain; }
.list-body { flex: 1 1 auto; min-width: 0; }
.list-title { font-weight: 600; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.list-title:hover { color: var(--brand); }
.list-side { flex: 0 0 auto; text-align: right; }
.list-side .btn-warning { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: 0; color: #fff; border-radius: 999px; padding-inline: 1rem; }
@media (max-width: 575.98px) {
    .list-item { flex-wrap: wrap; align-items: flex-start; }
    .list-img, .list-img img { flex-basis: 80px; width: 80px; height: 80px; }
    .list-body { flex-basis: calc(100% - 100px); }
    .list-side { flex-basis: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; }
}

.stars { color: var(--accent); white-space: nowrap; }

/* ========== Product header (picture left, fixed 280 x 320 box) ========== */
.product-hero { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
.hero-img { width: 280px; height: 320px; display: flex; align-items: center; justify-content: center; border-radius: 14px;
            background: radial-gradient(circle at 50% 40%, var(--brand-soft), #f8fafc 70%); }
.hero-img img { width: 250px; height: 290px; object-fit: contain; }
@media (max-width: 575.98px) { .hero-img { width: 200px; height: 230px; } .hero-img img { width: 180px; height: 210px; } }
.product-hero h1 { font-weight: 700; letter-spacing: -.02em; }
.product-hero .price { font-size: 2rem; font-weight: 700; color: var(--price); font-family: 'Poppins', sans-serif; }
.product-hero .btn-warning { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: 0; color: #fff; border-radius: 999px; padding: .55rem 1.3rem; font-weight: 600;
                             box-shadow: 0 6px 16px rgba(79,70,229,.3); }
.product-hero .btn-dark { border-radius: 999px; background: var(--brand-dark); }
.product-hero .btn-outline-danger { border-radius: 999px; }
.spec-chip { background: #f1f5f9; border-radius: 999px; padding: .28rem .75rem; font-size: .82rem; display: inline-block; margin: 0 .3rem .4rem 0; color: #334155; }
.section-title { font-size: 1.15rem; font-weight: 700; }

/* ========================== Spec / compare tables ========================== */
.spec-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface); }
.spec-table { width: 100%; table-layout: fixed; background: var(--surface); margin-bottom: 0; --bs-table-border-color: var(--line); }
.spec-table > :not(caption) > * > * { padding: .32rem .7rem; line-height: 1.35; }   /* compact rows: less scrolling */
/* Attributes column now matches the other columns (light), with the group name in bold brand colour */
.spec-table th.attr { width: 16%; background: #f8fafc; color: var(--brand-dark); vertical-align: middle; font-size: .9rem; font-weight: 700; }
.spec-table th.attr-h, .spec-table th.feat-h { width: 16%; }
.spec-table td.feat { width: 16%; font-weight: 600; color: #475569; background: #f8fafc; font-size: .84rem; }
.spec-table td.desc { word-wrap: break-word; font-size: .86rem; }
.spec-table thead th { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.spec-table .group-start > * { border-top: 1px solid #94a3b8; }
/* Row hover: only the row's own cells change colour; the merged Attributes cell (a <th> with rowspan) stays as is. */
.spec-table tbody tr:hover > td { --bs-table-bg-state: var(--row-hover); }
@media (max-width: 575.98px) {
    .spec-table:not(.compare-table) th.attr, .spec-table:not(.compare-table) th.attr-h, .spec-table:not(.compare-table) th.feat-h { width: 27%; }
    .spec-table > :not(caption) > * > * { font-size: .8rem; padding: .3rem .4rem; }
}

.compare-table { min-width: 720px; }
/* Comparison header row: default (white) background, labels at the bottom */
.compare-table thead th { background: var(--surface); color: var(--ink); vertical-align: bottom; text-transform: none; letter-spacing: 0; font-size: .9rem; }
.compare-table thead th.attr-h, .compare-table thead th.feat-h { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.compare-table td.desc.diff { background: #fffbeb; }
.compare-table.no-diff td.desc.diff { background: var(--surface); }
.compare-img { height: 150px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 12px; }
.compare-img img { width: 130px; height: 150px; object-fit: contain; }
.compare-name { font-weight: 600; font-size: .9rem; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) { .compare-name { white-space: normal; font-size: .85rem; } }   /* narrow phone columns: wrap rather than cut the name */

/* ================================ Footer ================================ */
.site-footer { margin-top: 4rem; color: #cbd5e1; background: linear-gradient(180deg, #1e1b4b 0%, #0f0c29 100%); position: relative; }
.site-footer::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--brand-2), var(--brand)); }
.footer-brand { font-size: 1.25rem; }
.footer-text { color: #a5b4fc; font-size: .92rem; max-width: 360px; }
.footer-heading { color: #fff; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.footer-links li { margin-bottom: .45rem; }
.site-footer a { color: #cbd5e1; text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: var(--accent); }
.footer-social { display: flex; gap: .5rem; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); }
.footer-social a:hover { background: var(--accent); color: #1e1b4b; }
.footer-search { position: relative; }
.footer-search .form-control { border-radius: 999px; padding: .55rem 3.4rem .55rem 1rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; }
.footer-search .form-control::placeholder { color: #a5b4fc; }
.footer-search .btn-search { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 42px; padding: 0; }
.footer-pill { font-size: .8rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); }
.footer-pill:hover { border-color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); font-size: .84rem; color: #94a3b8; }

/* Pagination in brand colours */
.pagination { --bs-pagination-color: var(--brand); --bs-pagination-hover-color: var(--brand-2); --bs-pagination-active-bg: var(--brand);
              --bs-pagination-active-border-color: var(--brand); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(79,70,229,.25); gap: 4px; }
.pagination .page-link { border-radius: 8px !important; }
@media (min-width: 992px) { .search-form { width: 360px; flex: 0 0 360px; } }
@media (max-width: 767.98px) { .facet-header strong { visibility: hidden; } }

/* Slightly larger pagination */
.pagination .page-link { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.02rem; font-weight: 500; }

/* ============================ Google ad blocks ============================ */
.ps-slot { text-align: center; }
.ps-slot-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; margin-bottom: .25rem; }
.ps-slot .adsbygoogle { min-height: 90px; }
.ps-slot-vertical .adsbygoogle { min-height: 250px; }
.ps-slot-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 90px; padding: 1rem;
                  border: 2px dashed #c7d2fe; border-radius: var(--radius); background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #eef2ff 10px, #eef2ff 20px);
                  color: var(--brand-dark); font-size: .88rem; font-weight: 600; }
.ps-slot-box i { font-size: 1.4rem; color: var(--brand); }
.ps-slot-box code { font-size: .75rem; color: var(--brand-2); }
.ps-slot-vertical .ps-slot-box { min-height: 250px; }

/* Info pages */
.page-card { max-width: 900px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 2rem; box-shadow: var(--shadow-sm); }
.page-narrow { max-width: 900px; }

/* ============================== Back to top ============================== */
.back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 1030; width: 48px; height: 48px; border: 0; border-radius: 50%;
               background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: 1.25rem;
               box-shadow: 0 8px 20px rgba(79,70,229,.4); opacity: 0; visibility: hidden; transform: translateY(12px);
               transition: opacity .25s, transform .25s, visibility .25s; }
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { filter: brightness(1.1); }
@media (max-width: 575.98px) { .back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; } }

/* Admin preview bar & status badges (also used when staff preview a product) */
.preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
               border-radius: 14px; padding: .7rem 1rem; margin-bottom: 1.2rem; font-size: .9rem; }
.preview-bar .btn { border-radius: 999px; }
.badge-status-draft { background: #e2e8f0; color: #334155; }
.badge-status-disabled { background: #fee2e2; color: #b91c1c; }

/* Brand + model on one line, same font */
.tile-name { font-weight: 600; font-size: .9rem; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-title { font-family: 'Poppins', var(--bs-font-sans-serif); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -.02em; }

/* Header search box: dark, readable text on the white field (the dark navbar theme made it light grey) */
.search-form .form-control { color: #0f172a; caret-color: #4f46e5; }
.search-form .form-control::placeholder { color: #64748b; opacity: 1; }
.search-form .form-control:focus { color: #0f172a; background: #fff; }

/* ======================= Page loader (spinner with a phone) ======================= */
.page-loader { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
               background: rgba(244, 246, 251, .92); backdrop-filter: blur(2px); transition: opacity .3s ease, visibility .3s ease; }
.page-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-ring { width: 84px; height: 84px; border: 5px solid #e0e7ff; border-top-color: var(--brand); border-right-color: var(--brand-2);
               animation: loader-spin .9s linear infinite; }
.loader-phone { position: absolute; font-size: 2rem; color: var(--brand-dark); animation: loader-pulse 1.2s ease-in-out infinite; }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-pulse { 50% { transform: scale(.88); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .loader-ring, .loader-phone { animation-duration: 3s; } }

/* ======================= Share buttons & disclaimer ======================= */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.share-label { font-size: .78rem; color: var(--muted); font-weight: 600; margin-right: 2px; }
.share-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
             color: #fff; border: 0; text-decoration: none; transition: transform .12s, filter .12s; }
.share-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.1); }
.share-fb { background: #1877f2; } .share-x { background: #0f1419; } .share-wa { background: #25d366; }
.share-tg { background: #229ed9; } .share-li { background: #0a66c2; } .share-em { background: #64748b; } .share-copy { background: var(--brand); }
.share-copied { font-size: .75rem; color: var(--price); font-weight: 600; }
.disclaimer { font-size: .78rem; line-height: 1.5; color: var(--muted); background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: .6rem .8rem; }

/* ======================= Sharp, square corners everywhere ======================= */
:root { --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0;
        --bs-border-radius-pill: 0; --radius: 0; --tile-radius: 0; }
*, *::before, *::after { border-radius: 0 !important; }
/* only true circles stay round: the loader spinner and radio buttons */
.loader-ring, .form-check-input[type="radio"] { border-radius: 50% !important; }
.product-hero .price.price-tbc { font-size: 1.3rem; color: var(--muted); }
.ps-slot-box small { font-weight: 500; color: var(--muted); font-size: .72rem; }
.ps-slot-box.is-ready { border-color: #86efac; }
/* Your own banners in ad spaces: exact size, scale down on small screens */
.ps-slot-banner { width: 100%; line-height: 0; }
.ps-slot-banner a { display: block; }
.ps-banner-img { display: block; width: 100%; height: auto; }

/* ---------- Owner reviews ---------- */
.owner-ratings { background: #fff; border: 1px solid var(--line, #e5e7eb); }
.owner-ratings-empty { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .8rem 1rem; color: var(--muted, #64748b); font-size: .9rem; }
.or-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid #eef0f5; background: linear-gradient(90deg, #eef2ff, #fff); }
.or-head h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.or-score { font-size: 1.6rem; font-weight: 800; color: #4338ca; line-height: 1; }
.or-sub { font-size: .8rem; color: #64748b; }
.or-body { padding: 1rem 1.1rem; margin: 0; }
.or-col h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; margin-bottom: .5rem; }
.or-pro h3 { color: #047857; } .or-con h3 { color: #c2410c; }
.or-scale { color: #94a3b8; font-weight: 600; }
.or-row { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .88rem; }
.or-lbl { flex: 1; min-width: 0; }
.or-val { width: 1.9rem; text-align: right; font-weight: 700; font-size: .84rem; }
.dot-meter { display: inline-flex; gap: 3px; flex: none; }
.dot-meter i { width: 7px; height: 7px; border-radius: 50% !important; background: #e5e7eb; }
.dot-pro i.on { background: #10b981; } .dot-con i.on { background: #f97316; }
.or-foot { border-top: 1px solid #eef0f5; padding: .6rem 1.1rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; font-size: .82rem; color: #64748b; }
.or-comments { border-top: 1px solid #eef0f5; padding: .4rem 1.1rem .8rem; }
.or-comment { padding: .6rem 0; border-bottom: 1px dashed #e5e7eb; font-size: .9rem; }
.or-comment:last-child { border-bottom: 0; }
.or-comment-meta { font-size: .78rem; color: #64748b; margin-bottom: .15rem; }
@media (max-width: 575.98px) { .or-row { flex-wrap: wrap; row-gap: 3px; padding: .4rem 0; } .or-lbl { flex-basis: 100%; } .or-val { width: auto; } }

.review-wrap { max-width: 820px; }
.review-product { display: flex; align-items: center; gap: .9rem; }
.review-product img { object-fit: contain; background: #f8fafc; }
.review-card { background: #fff; border: 1px solid var(--line, #e5e7eb); padding: 1.1rem 1.2rem; }
.review-section { margin-bottom: 1.3rem; }
.review-h { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.review-pro .review-h { color: #047857; } .review-con .review-h { color: #c2410c; }
.rq { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .45rem 0; border-bottom: 1px solid #f1f5f9; margin: 0; }
.rq-text { float: none; width: auto; flex: 1 1 260px; font-size: .92rem; margin: 0; padding: 0; }
.rq-scale { display: flex; gap: 4px; }
.rq-btn { width: 2.2rem; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-weight: 600; }
.btn-check:checked + .rq-btn { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.review-con .btn-check:checked + .rq-btn { background: #ea580c; border-color: #ea580c; }
.review-pro .btn-check:checked + .rq-btn { background: #059669; border-color: #059669; }
.rq-missing .rq-text { color: #b91c1c; }
.rq-missing:has(:checked) .rq-text { color: inherit; }
.nav-link-nowrap { white-space: nowrap; }
.btn-google { background: #fff; border: 1px solid #cbd5e1; color: #1f2937; font-weight: 600; padding: .55rem 1.1rem; }
.btn-google:hover { background: #f8fafc; border-color: #94a3b8; }
.btn-google .bi-google { color: #4285f4; margin-right: .3rem; }
.my-review { display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--line, #e5e7eb); padding: .7rem .9rem; margin-bottom: .6rem; }
.my-review-img img { object-fit: contain; background: #f8fafc; }
.my-review-actions { display: flex; gap: .35rem; flex: none; }
.min-w-0 { min-width: 0; }
@media (max-width: 575.98px) { .my-review { flex-wrap: wrap; } .my-review-actions { width: 100%; justify-content: flex-end; } }

.btn-brand { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: 0; color: #fff; font-weight: 600; }
.btn-brand:hover, .btn-brand:focus { color: #fff; filter: brightness(1.07); }

/* ---------- Clickable star ratings ---------- */
a.tile-name { display: block; text-decoration: none; }
a.tile-name:hover { color: var(--brand); }
.stars-link a { color: inherit; text-decoration: none; position: relative; z-index: 2; padding: 0 1px; display: inline-block; transition: transform .12s; }
.stars-link a:hover, .stars-link a:focus-visible { transform: scale(1.25); }
.stars-link:hover a i { color: var(--accent); }
.stars-link a:hover ~ a i { opacity: .35; }            /* hovering star 3 dims stars 4–5: "3 stars and up" */
.stars-none { color: #cbd5e1; }
.rating-num { font-weight: 600; }
.rating-count { color: var(--muted); font-size: .9em; }
.tile-rating .rating-count { font-size: .68rem; }
.hero-rating .stars-link { font-size: 1.05rem; }