/* ===============================================================
   ShopPro — listing pages and product detail
   Loaded after storefront.css, which owns the design tokens.
   =============================================================== */

/* ---------------- Breadcrumbs & headings ---------------- */

.crumbs { display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
          font-size: 12.5px; color: var(--muted); padding: 16px 0 4px; }
.crumbs a:hover { color: var(--blue); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; }

.listing-head { padding: 10px 0 18px; }
.listing-head h1 { font-size: 26px; font-weight: 750; letter-spacing: -.6px; margin: 0; }
.listing-sub { color: var(--muted); font-size: 14px; margin: 6px 0 0; max-width: 70ch; }

.subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.subcat { display: inline-flex; align-items: center; gap: 7px; background: var(--white);
          border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; }
.subcat:hover { border-color: var(--blue); color: var(--blue); }
.subcat span { background: var(--line-2); border-radius: 999px; padding: 0 7px;
               font-size: 11.5px; color: var(--muted); }

/* ---------------- Listing layout ---------------- */

.listing { display: grid; grid-template-columns: 254px minmax(0, 1fr);
           gap: 26px; align-items: start; padding-bottom: 30px; }

.filters { background: var(--white); border: 1px solid var(--line);
           border-radius: var(--r-lg); padding: 18px; position: sticky; top: 96px; }
.filters-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.filters-head h2 { font-size: 15px; font-weight: 700; margin: 0; flex: 1; }
.fcount { background: var(--blue); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11.5px; }
.clear-all { font-size: 12.5px; color: var(--blue); }
.filters-close { display: none; background: none; border: 0; font-size: 24px;
                 line-height: 1; cursor: pointer; color: var(--muted); }

.fgroup { padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.fgroup:last-of-type { border-bottom: 0; }
.fgroup h3 { font-size: 13px; font-weight: 700; margin: 0 0 10px; }
.fhint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

.fscroll { max-height: 190px; overflow-y: auto; padding-right: 4px; }

.fcheck { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; cursor: pointer; }
.fcheck input { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; flex: 0 0 15px; }
.fcheck span { flex: 1; }
.fcheck em { font-style: normal; font-size: 12px; color: var(--muted); }

.fswatches { display: flex; flex-wrap: wrap; gap: 8px; }
.fswatch { cursor: pointer; position: relative; }
.fswatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fswatch .dot { display: block; width: 26px; height: 26px; border-radius: 999px;
                border: 2px solid var(--line); transition: border-color .12s, transform .12s; }
.fswatch input:checked + .dot { border-color: var(--blue); transform: scale(1.12); }
.fswatch input:focus-visible + .dot { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }

.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs input { width: 100%; padding: 8px 10px; border: 1px solid var(--line);
                      border-radius: var(--r-sm); font: inherit; font-size: 13.5px; }
.price-inputs input:focus { outline: none; border-color: var(--blue);
                            box-shadow: 0 0 0 3px rgba(37, 99, 235, .13); }

.results-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.results-count { flex: 1; font-size: 13.5px; color: var(--muted); margin: 0; }
.sort-select select { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
                      font: inherit; font-size: 13.5px; background: var(--white); cursor: pointer; }
.filters-open { display: none; }

.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.pagination { display: flex; justify-content: center; gap: 5px; align-items: center;
              margin: 30px 0 10px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 38px; text-align: center; padding: 8px 12px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); font-size: 13.5px; }
.pagination a:hover { border-color: var(--blue); color: var(--blue); }
.pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 650; }
.pagination .gap { border: 0; background: none; min-width: auto; padding: 8px 2px; color: var(--muted); }

.suggestions { margin: 0 0 18px; }
.suggestions p { font-size: 13.5px; margin: 0 0 9px; }
.suggestions .btn { margin: 3px; }

/* ---------------- Product detail ---------------- */

.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
       gap: 34px; padding: 8px 0 34px; align-items: start; }

.pdp-gallery { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; }
.thumbs { display: flex; flex-direction: column; gap: 9px; max-height: 560px; overflow-y: auto; }
.thumb { width: 70px; height: 70px; border: 2px solid var(--line); border-radius: var(--r);
         overflow: hidden; background: var(--white); cursor: pointer; padding: 0; flex: 0 0 70px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { border-color: #cbd5e1; }
.thumb.is-active { border-color: var(--navy); }
.thumb-more { display: grid; place-items: center; font-size: 13px; font-weight: 700;
              color: var(--muted); background: var(--line-2); }

.stage { position: relative; background: var(--white); border: 1px solid var(--line);
         border-radius: var(--r-lg); overflow: hidden; }
.stage-img { aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center; }
.stage-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease-out; }
.stage-badge { position: absolute; top: 14px; right: 14px; z-index: 2; }
.stage-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line);
    background: rgba(255, 255, 255, .94); cursor: pointer; font-size: 19px; color: var(--ink-2); }
.stage-arrow:hover { background: #fff; color: var(--blue); }
.stage-prev { left: 12px; }
.stage-next { right: 12px; }

.pdp-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pdp-buy h1 { font-size: 27px; font-weight: 750; letter-spacing: -.7px; margin: 0 0 10px; line-height: 1.25; }
.wish-inline { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
               color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap; padding: 4px; }
.wish-inline:hover { color: var(--red); }

.pdp-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
            font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.pdp-meta .stars strong { color: var(--ink); margin: 0 3px; }
.pdp-meta a { color: var(--blue); }
.pdp-brand a { font-weight: 600; }

.pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pdp-price .price-now { font-size: 30px; font-weight: 800; letter-spacing: -.9px; }
.pdp-price .price-was { font-size: 17px; }
.save-pill { background: #dcfce7; color: #15803d; font-size: 12.5px; font-weight: 700;
             border-radius: var(--r-sm); padding: 3px 9px; }
.from-note { font-size: 12.5px; color: var(--muted); order: -1; }
.save-line { font-size: 13px; color: var(--green); font-weight: 600; margin: 0 0 14px; }

.pdp-summary { color: var(--ink-2); font-size: 14.5px; margin: 0 0 20px; line-height: 1.7; }

.pdp-options { margin-bottom: 20px; }
.option-group { margin-bottom: 16px; }
.option-label { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
.option-label strong { color: var(--ink); }
.option-values { display: flex; flex-wrap: wrap; gap: 8px; }

.option-value { padding: 8px 16px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
    background: var(--white); font-size: 13.5px; font-weight: 600; cursor: pointer;
    color: var(--ink-2); transition: border-color .12s, color .12s, background .12s; }
.option-value:hover { border-color: #cbd5e1; }
.option-value.is-selected { border-color: var(--navy); color: var(--navy); background: #f8fafc; }

.option-values.is-swatch .option-value { padding: 3px; border-radius: 999px; }
.option-values.is-swatch .dot { display: block; width: 30px; height: 30px; border-radius: 999px; }
.option-values.is-swatch .option-value.is-selected { border-color: var(--navy); border-width: 2px; }

.pdp-stock { font-size: 13.5px; margin: 0 0 16px; }
.pdp-stock .in { color: var(--green); font-weight: 600; }
.pdp-stock .low { color: var(--amber); font-weight: 650; }
.pdp-stock .out { color: var(--red); font-weight: 650; }

.pdp-cart { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
            gap: 10px; margin-bottom: 22px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line);
       border-radius: var(--r-sm); background: var(--white); }
.qty button { width: 38px; height: 42px; border: 0; background: none; font-size: 17px;
              cursor: pointer; color: var(--ink-2); }
.qty button:hover { color: var(--blue); }
.qty input { width: 46px; height: 42px; border: 0; text-align: center; font: inherit;
             font-weight: 600; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-cart .btn { height: 42px; }
.pdp-cart .btn[disabled] { opacity: .55; cursor: not-allowed; }

.pdp-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
                border-top: 1px solid var(--line); padding-top: 18px; }
.service { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.service span { font-size: 19px; }
.service strong { display: block; font-size: 13px; }
.service small { color: var(--muted); }

/* ---------------- Tabs, reviews, Q&A ---------------- */

.pdp-lower { display: grid; grid-template-columns: minmax(0, 1fr) 320px;
             gap: 24px; align-items: start; padding-bottom: 20px; }
.pdp-tabs { background: var(--white); border: 1px solid var(--line);
            border-radius: var(--r-lg); overflow: hidden; }
.pdp-tabs .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line);
                  padding: 0 18px; margin: 0; overflow-x: auto; }
.pdp-tabs .tab { background: none; border: 0; border-bottom: 2px solid transparent;
    padding: 13px 14px; font-size: 14px; font-weight: 600; color: var(--muted);
    cursor: pointer; white-space: nowrap; }
.pdp-tabs .tab:hover { color: var(--ink); }
.pdp-tabs .tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }
.pdp-tabs .tab-panel { padding: 22px; display: none; }
.pdp-tabs .tab-panel.is-active { display: block; }

.rte { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.rte h2, .rte h3 { color: var(--ink); font-size: 16px; margin: 20px 0 8px; }
.rte ul, .rte ol { padding-left: 20px; }
.rte p { margin: 0 0 12px; }
.muted { color: var(--muted); }

.feature-list { list-style: none; padding: 0; margin: 18px 0 0; }
.feature-list li { position: relative; padding: 6px 0 6px 24px; font-size: 14px; }
.feature-list li::before { content: "\2022"; position: absolute; left: 6px;
                           color: var(--blue); font-weight: 700; }

.spec-group { font-size: 14px; font-weight: 700; margin: 20px 0 8px; }
.spec-group:first-child { margin-top: 0; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
.spec-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 9px 12px 9px 0;
                 width: 40%; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.spec-table td { padding: 9px 0; border-bottom: 1px solid var(--line-2); }

.review-summary { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px;
                  padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.review-score { text-align: center; }
.review-score strong { display: block; font-size: 40px; font-weight: 800;
                       letter-spacing: -1.4px; line-height: 1.1; }
.review-score .stars-marks { font-size: 15px; }
.review-score small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.review-bars { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.review-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 10px;
              align-items: center; font-size: 12.5px; color: var(--muted); }
.review-bar .bar { height: 7px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.review-bar .bar i { display: block; height: 100%; background: var(--amber); }
.review-bar em { font-style: normal; text-align: right; }

.review { padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.review:last-child { border-bottom: 0; }
.review-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.review-head strong { font-size: 13.5px; }
.review-head time { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.review-head .stars-marks { font-size: 13px; }
.verified { display: inline-block; background: #dcfce7; color: #15803d; font-size: 11px;
            font-weight: 700; border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.review h4 { font-size: 14.5px; margin: 0 0 6px; }
.review p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.7; }
.review-reply { margin-top: 12px; padding: 12px 14px; background: var(--line-2);
                border-radius: var(--r); border-left: 3px solid var(--blue); }
.review-reply strong { display: block; font-size: 12.5px; margin-bottom: 4px; }
.review-reply p { font-size: 13.5px; }

.qa { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.qa:last-child { border-bottom: 0; }
.qa-q, .qa-a { display: flex; gap: 11px; font-size: 14px; margin: 0 0 9px; line-height: 1.65; }
.qa-q span, .qa-a span { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 999px;
    display: grid; place-items: center; font-size: 11.5px; font-weight: 800; }
.qa-q span { background: var(--navy); color: #fff; }
.qa-a span { background: var(--line-2); color: var(--ink-2); }
.qa-a { color: var(--ink-2); }

.pdp-features { background: var(--white); border: 1px solid var(--line);
                border-radius: var(--r-lg); padding: 20px; position: sticky; top: 96px; }
.pdp-features h2 { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.pdp-features ul { list-style: none; margin: 0; padding: 0; }
.pdp-features li { display: flex; gap: 10px; padding: 9px 0; font-size: 13.5px;
                   color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.pdp-features li:last-child { border-bottom: 0; }
.pdp-features li span { color: var(--green); font-weight: 700; }

.brand-directory { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------------- Responsive ---------------- */

@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pdp { grid-template-columns: 1fr; }
    .pdp-lower { grid-template-columns: 1fr; }
    .pdp-features { position: static; }
    .brand-directory { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .listing { grid-template-columns: 1fr; }
    .filters { position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); z-index: 150;
               border-radius: 0; overflow-y: auto; transform: translateX(-100%);
               transition: transform .22s ease; box-shadow: var(--sh-lg); }
    .filters.is-open { transform: translateX(0); }
    .filters-close { display: block; }
    .filters-open { display: inline-flex; }
}

@media (max-width: 760px) {
    .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pdp-gallery { grid-template-columns: 1fr; }
    .thumbs { flex-direction: row; max-height: none; overflow-x: auto; order: 2; }
    .pdp-buy h1 { font-size: 22px; }
    .pdp-price .price-now { font-size: 25px; }
    .pdp-cart { grid-template-columns: auto minmax(0, 1fr); }
    .pdp-cart .btn:last-child { grid-column: 1 / -1; }
    .pdp-services { grid-template-columns: 1fr; gap: 12px; }
    .review-summary { grid-template-columns: 1fr; gap: 16px; }
    .brand-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===============================================================
   Compare table
   =============================================================== */

/* The table scrolls inside this box rather than widening the page. */
.compare-scroll { overflow-x: auto; border: 1px solid var(--line);
                  border-radius: var(--r-lg); background: var(--white);
                  margin-bottom: 44px; }

.compare-table { border-collapse: collapse; width: 100%; min-width: 620px; }

.compare-table th, .compare-table td {
    padding: 14px 16px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line-2); font-size: 13.5px;
}

/* The label column stays put while the products scroll past it. */
.compare-table tbody th[scope="row"],
.compare-table thead th[scope="row"] {
    position: sticky; left: 0; z-index: 1;
    background: var(--line-2); font-weight: 650; width: 180px;
    color: var(--ink-2);
}

.compare-table thead th { background: var(--white); vertical-align: top;
                          border-bottom: 2px solid var(--line); min-width: 200px; }

.compare-name { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35;
                color: inherit; margin-bottom: 6px; }
.compare-name:hover { color: var(--blue); }

.compare-blurb { font-size: 12.5px; color: var(--muted); line-height: 1.5;
                 margin: 0 0 12px; font-weight: 400; }

.compare-head-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.compare-head-actions form { margin: 0; width: 100%; }
.compare-head-actions .btn { width: 100%; }

.compare-group th { background: var(--navy) !important; color: #fff;
                    font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
                    position: static !important; }

.compare-blank { color: var(--muted); }

/* ---------------- PDP compare button ---------------- */

.pdp-compare { margin-top: 10px; }
.pdp-compare-link { display: inline-block; margin-top: 8px; font-size: 13px;
                    color: var(--blue); font-weight: 600; }

/* ---------------- Wishlist buttons ---------------- */

.wish-form { margin: 0; }
.wish-btn.is-saved, .wish-inline.is-saved { color: var(--red); }
.wish-inline.is-saved { border-color: currentColor; }

.haction-count { position: absolute; top: 2px; right: 2px;
                 min-width: 17px; height: 17px; padding: 0 4px;
                 border-radius: 999px; background: var(--red); color: #fff;
                 font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; }
.haction { position: relative; }

/* ===============================================================
   Reviews and Q&A -- the write side
   =============================================================== */

.review-votes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.review-votes form { margin: 0; }
.review-votes button { background: none; border: 1px solid var(--line);
                       border-radius: 999px; padding: 4px 12px; font: inherit;
                       font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.review-votes button:hover { border-color: var(--blue); color: var(--blue); }
.review-votes .review-report { border: 0; text-decoration: underline; color: var(--muted); padding: 4px 2px; }
.review-votes .review-report:hover { color: var(--red); }

.review-form, .qa-form { border: 1px solid var(--line); border-radius: var(--r-lg);
                         padding: 22px; margin-top: 26px; background: var(--white); }
.review-form h3, .qa-form h3 { font-size: 16px; margin: 0 0 14px; font-weight: 700; }

.review-form .field, .qa-form .field { margin-bottom: 15px; }
.review-form label, .qa-form label { display: block; font-size: 13px; font-weight: 600;
                                     margin-bottom: 6px; color: var(--ink-2); }
.review-form .opt, .qa-form .opt { font-weight: 400; color: var(--muted); }

.review-form input[type="text"], .review-form textarea,
.qa-form textarea, .qa-answer-form input[type="text"] {
    width: 100%; padding: 10px 13px; border: 1px solid var(--line);
    border-radius: var(--r-sm); font: inherit; font-size: 14px;
    background: var(--white); resize: vertical;
}
.review-form input:focus, .review-form textarea:focus,
.qa-form textarea:focus, .qa-answer-form input:focus {
    outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}

.review-form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.review-form-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.6; }
.review-form-closed { margin-top: 22px; padding: 16px; background: var(--line-2);
                      border-radius: var(--r); text-align: center; }
.review-form-closed a { color: var(--blue); font-weight: 600; }

/* Star picker: laid out in reverse so the CSS sibling selector can
   light up every star to the left of the one being pointed at. */
.rating-picker { border: 0; padding: 0; margin: 0 0 6px;
                 display: flex; flex-direction: row-reverse;
                 justify-content: flex-end; gap: 2px; }
.rating-picker legend { font-size: 13px; font-weight: 600; color: var(--ink-2);
                        margin-bottom: 6px; float: left; width: 100%; }
.rating-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-picker label { font-size: 27px; line-height: 1; color: var(--line);
                       cursor: pointer; margin: 0; transition: color .1s; }
.rating-picker input:checked ~ label,
.rating-picker label:hover, .rating-picker label:hover ~ label { color: #f59e0b; }
.rating-picker input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }

.qa-answer-form { display: flex; gap: 8px; margin-top: 10px; }
.qa-answer-form input { flex: 1; }

@media (max-width: 640px) {
    .review-form-cols { grid-template-columns: 1fr; }
    .qa-answer-form { flex-direction: column; }
}

/* ===============================================================
   Prose: content pages and blog posts
   =============================================================== */

.prose-page { max-width: 760px; margin: 0 auto 56px; }

.prose-head { padding: 8px 0 22px; }
.prose-head h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 780;
                 letter-spacing: -.9px; line-height: 1.2; margin: 0 0 12px; }
.prose-lead { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 12px; }
.prose-meta { font-size: 13px; color: var(--muted); margin: 0; }

.prose-hero { width: 100%; height: auto; border-radius: var(--r-lg);
              margin-bottom: 30px; display: block; }

/* Styles the sanitised HTML a page or post stores. */
.prose { font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: 23px; font-weight: 720; letter-spacing: -.4px;
            color: var(--ink); margin: 38px 0 12px; line-height: 1.3; }
.prose h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 30px 0 10px; }
.prose h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 24px 0 8px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--navy); }
.prose strong { color: var(--ink); font-weight: 680; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r); margin: 10px 0 22px; }
.prose blockquote { margin: 22px 0; padding: 4px 0 4px 20px;
                    border-left: 3px solid var(--blue); color: var(--ink-2); font-style: italic; }
.prose pre { background: var(--line-2); border: 1px solid var(--line);
             border-radius: var(--r); padding: 14px 16px; overflow-x: auto;
             font-size: 13px; line-height: 1.7; margin: 0 0 20px; }
.prose code { background: var(--line-2); padding: 2px 6px; border-radius: 4px; font-size: 13.5px; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

/* A wide table scrolls inside itself rather than widening the article. */
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px;
               font-size: 14.5px; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--line-2); font-weight: 650; color: var(--ink); }

/* ===============================================================
   Blog listing
   =============================================================== */

.blog-search { display: flex; gap: 8px; }
.blog-search input { padding: 9px 13px; border: 1px solid var(--line);
                     border-radius: var(--r-sm); font: inherit; font-size: 14px;
                     background: var(--white); min-width: 210px; }
.blog-search input:focus { outline: none; border-color: var(--blue);
                           box-shadow: 0 0 0 3px rgba(37, 99, 235, .13); }

.blog-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }

.chip { display: inline-flex; align-items: center; gap: 7px;
        padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
        font-size: 13px; color: var(--ink-2); background: var(--white);
        transition: border-color .12s, color .12s; }
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip span { font-size: 11.5px; opacity: .7; }

.post-grid { display: grid; gap: 22px; margin-bottom: 40px;
             grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.post-card { background: var(--white); border: 1px solid var(--line);
             border-radius: var(--r-lg); overflow: hidden; display: flex;
             flex-direction: column; transition: border-color .12s, transform .12s; }
.post-card:hover { border-color: var(--blue); transform: translateY(-2px); }

.post-card-img { aspect-ratio: 5 / 3; background: var(--line-2);
                 overflow: hidden; display: grid; place-items: center; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column;
                  gap: 8px; flex: 1; }
.post-card-body h2 { font-size: 16.5px; font-weight: 700; line-height: 1.4; margin: 0; }
.post-card-body h2 a { color: inherit; }
.post-card-body h2 a:hover { color: var(--blue); }

.post-meta { font-size: 12.5px; color: var(--muted); margin: 0; }
.post-excerpt { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0; flex: 1; }
.post-more { font-size: 13.5px; font-weight: 650; color: var(--blue); margin-top: 2px; }

.post-cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }

@media (max-width: 560px) {
    .blog-search { width: 100%; }
    .blog-search input { flex: 1; min-width: 0; }
}

/* ===============================================================
   Responsive grids and overflow safety
   ===============================================================
   The homepage used to write its column count as an inline style,
   which outranks every media query -- so a five-column grid stayed
   five columns on a phone and the page scrolled sideways. The count
   now arrives as --cols, and these rules decide the real layout.

   The grids below are intrinsically fluid: the column count follows
   the space available rather than a fixed number per breakpoint, so
   there is no width at which a card is squeezed to nothing. The
   store's chosen column count is applied only once the viewport is
   genuinely wide enough for it to mean anything.
   =============================================================== */

.product-grid,
.cat-grid,
.brand-grid,
.post-grid,
.promo-grid,
.testi-grid {
    /* min(x, 100%) is what stops a single column overflowing a
       viewport narrower than the minimum card width. */
    grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min, 165px), 100%), 1fr));
}

.cat-grid   { --card-min: 140px; }
.brand-grid { --card-min: 120px; }
.post-grid  { --card-min: 260px; }
.promo-grid { --card-min: 260px; }
.testi-grid { --card-min: 260px; }

@media (min-width: 1200px) {
    .product-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
    .cat-grid     { grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); }
    .brand-grid   { grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); }
}

/* The listing pages size their own grids from the same variable. */
@media (max-width: 1199px) {
    .grid-4, .grid-5 {
        grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 1fr));
    }
}

/* ---------------- Cards at small sizes ---------------- */

@media (max-width: 640px) {
    /* A price and a struck-through original on one line is what
       pushed these cards wider than their column. */
    .card-body { padding: 12px; }
    .card-title { font-size: 13.5px; line-height: 1.4; }
    .card-price { flex-wrap: wrap; row-gap: 2px; }
    .card-price .price-now { font-size: 15px; }
    .card-price .price-was { font-size: 12px; }
    .card-cta .btn { padding: 9px 10px; font-size: 13px; }
    .card-brand { font-size: 10.5px; }

    /* Long words in a product name must break rather than widen the
       card -- "WH-1000XM5" has no space to wrap at. */
    .card-title a { overflow-wrap: anywhere; }
}

/* ---------------- Nothing may exceed the viewport ---------------- */

/* No overflow-x:hidden here on purpose. It would hide a layout
   fault rather than fix one, and on html/body it also stops
   position:sticky working -- which this storefront relies on for the
   header, the product sidebar, the cart summary and the account nav.
   The audit at 360-1024px passes without it. */

img, video, svg, iframe, canvas { max-width: 100%; }

/* Wide content scrolls inside its own box rather than widening the
   page, which is what produces a horizontal scrollbar on a phone. */
table { max-width: 100%; }

/* A sticky header would otherwise cover the heading an in-page link
   jumps to, which is why "Trending Products" sat under the bar. */
[id] { scroll-margin-top: 96px; }

@media (max-width: 900px) {
    [id] { scroll-margin-top: 150px; }
}

/* ---------------- Touch targets ---------------- */

@media (max-width: 900px) {
    /* Anything a finger has to hit needs to be reachable; 40px is the
       practical floor before taps start missing. */
    .btn, .wish-btn, .haction, .nav-toggle, .qty button {
        min-height: 40px;
    }

    .wish-btn { width: 40px; height: 40px; }
}

/* ---------------- Tablet navigation ----------------
   The hamburger used to appear only below 900px, but the full nav
   needs about 1080px to lay out. Between those two figures the links
   ran off the side of the page -- which is precisely the width of a
   landscape tablet. The mobile nav now takes over before that gap. */

@media (max-width: 1080px) {
    .nav-toggle { display: flex; }

    .mainnav-inner { display: none; flex-direction: column; align-items: stretch;
                     padding-bottom: 10px; }
    .mainnav.is-open .mainnav-inner { display: flex; }

    .navlink { padding: 11px 4px; border-bottom: 1px solid var(--line-2); }

    .megamenu { position: static; opacity: 1; visibility: visible; transform: none;
                box-shadow: none; border: 0; padding: 0 0 6px 16px; display: none; }
    .navitem.is-open .megamenu { display: block; }
}

/* ---------------- Newsletter band ----------------
   Its two halves were sized from their content, so at phone widths the
   band grew a few pixels wider than the column holding it. */

@media (max-width: 900px) {
    .newsletter { padding: 22px 18px; gap: 18px; }

    /* Without this a flex child refuses to shrink below its content. */
    .newsletter-text,
    .newsletter-form,
    .newsletter-text > div { min-width: 0; }

    .newsletter-text { gap: 14px; }
    .newsletter h2 { font-size: 18px; }
    .newsletter p { font-size: 13px; }
}

@media (max-width: 480px) {
    .newsletter-icon { display: none; }

    /* Side by side there is not enough room for a usable field and a
       readable button, so they stack. */
    .newsletter-form { flex-direction: column; }
    .newsletter-form .btn { width: 100%; }
}

/* ---------------- Header at phone widths ---------------- */

@media (max-width: 560px) {
    .header-inner { gap: 10px; }
    .header-actions { gap: 14px; }
    .brand { font-size: 17px; }
    .brand-mark { width: 32px; height: 32px; }
    .search input { padding: 10px 46px 10px 16px; font-size: 13.5px; }
}

/* ---------------- Section headings ---------------- */

@media (max-width: 560px) {
    .section-head { flex-wrap: wrap; gap: 4px; }
    .section-head h2 { font-size: 17px; }
    .section-head .section-sub { font-size: 13px; }
}

/* ---------------- Two products across on a phone ----------------
   One product per row wastes most of a phone screen and pushes the
   catalogue into an endless scroll. Two is what shoppers expect. The
   figures below are chosen so two columns actually fit rather than
   being asked for and silently collapsing back to one:

     375px screen - 32px padding - 14px gap = 329px for two cards. */

@media (max-width: 900px) {
    .wrap { padding-inline: 16px; }
    .product-grid, .cat-grid, .brand-grid { gap: 14px; }
    .product-grid { --card-min: 150px; }
    .grid-4, .grid-5 {
        grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    }
}

/* Small phones (320-360) cannot hold two 150px cards, so the floor
   drops rather than the layout falling back to a single column. */
@media (max-width: 380px) {
    .wrap { padding-inline: 12px; }
    .product-grid, .cat-grid, .brand-grid { gap: 10px; }
    .product-grid { --card-min: 132px; }
    .grid-4, .grid-5 {
        grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr));
    }

    .card-body { padding: 10px; }
    .card-title { font-size: 13px; }
    .card-cta .btn { padding: 8px 6px; font-size: 12.5px; }
}

/* ---------------- Product page on a landscape tablet ----------------
   The gallery and the buy box used to stack below 1100px, which threw
   away half the screen on a 1024px tablet and pushed the price and the
   Add to Cart button below the fold. They stay side by side until the
   screen is genuinely too narrow for two useful columns. */

@media (min-width: 901px) and (max-width: 1100px) {
    .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
    .pdp-gallery { grid-template-columns: 66px minmax(0, 1fr); gap: 10px; }
    .thumb { width: 58px; height: 58px; flex: 0 0 58px; }
    .pdp-buy h1 { font-size: 23px; }
}


/* ---------------- Data tables ----------------
   An order or address table cannot shrink below its content, so it
   scrolls inside its own box rather than widening the page. */

@media (max-width: 900px) {
    .table-wrap, .acct-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-wrap table { min-width: 520px; }
}

/* ---------------------------------------------------------------
   Error pages (404 uses the storefront layout; 5xx is standalone)
   --------------------------------------------------------------*/

.error-block { padding: 56px 24px; }

.error-block h1 {
    font-size: clamp(22px, 4vw, 28px);
    margin: 0 0 10px;
}

.error-search {
    display: flex;
    gap: 8px;
    max-width: 420px;
    margin: 22px auto;
}

.error-search input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 8px;
    font: inherit;
}

.error-links {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-categories { margin-top: 32px; }

.error-categories h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted, #64748b);
    margin: 0 0 12px;
}

.error-categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.error-categories a {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
}

@media (max-width: 520px) {
    .error-search { flex-direction: column; }
}