/* Right-to-left copy of vehicle_website.css, made by tools/rtl_flip.py. Do not edit: change vehicle_website.css and run the tool again. */
/* =====================================================================
   97 Service website theme: every page (website, shop, product, cart,
   checkout). Header and footer are built to the design mockup.

   Sizing: --u is one mockup pixel. The mockup is 1200 px wide, so every
   size below is "mockup px * var(--u)", scaled with the screen between
   960 and 1440 px wide. Below 960 px the phone layout at the end applies.
   Homepage-only styles live in ../catalog/catalog.css.
   ===================================================================== */

:root {
    --u: calc(clamp(960px, 100vw, 1440px) / 1200);
    --s97-black: #080808;
    --s97-gold: #c99a43;
    --s97-gold-deep: #8f6827;
    --s97-gold-hi: #efd17a;
    --s97-bar: linear-gradient(180deg, #e0c07c 0%, #d2ad63 40%, #bf9650 100%);
    --s97-btn: linear-gradient(180deg, #e8c983 0%, #cfa55a 50%, #a97d34 100%);
    --s97-cond: 'Roboto Condensed', 'Arial Narrow', sans-serif;
    --s97-head: 'Montserrat', 'Arial', sans-serif;
    --s97-brushed:
        radial-gradient(ellipse 60% 70% at 50% 35%, rgba(255, 255, 255, .55), transparent 70%),
        repeating-radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .13) 0 1px, rgba(0, 0, 0, .03) 1px 3px, rgba(255, 255, 255, .06) 3px 4px),
        linear-gradient(180deg, #d9d9d6 0%, #c9c9c5 55%, #b9b9b5 100%);
}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.s97h {
    position: relative;
    z-index: 1030;
    height: calc(139 * var(--u));
    background:
        linear-gradient(180deg, transparent calc(134 * var(--u)), #c9a052 calc(134 * var(--u))),
        linear-gradient(180deg, #1b1a18 calc(60 * var(--u)), #0c0c0b calc(134 * var(--u))),
        #0c0c0b;
    font-family: var(--s97-cond);
}
.s97h::before {                       /* gold top bar, full width */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(60 * var(--u));
    background: var(--s97-bar);
    box-shadow: 0 1px 0 #8a6526, 0 3px 6px rgba(0, 0, 0, .45);
}
.s97h *, .s97h *::before, .s97h *::after { box-sizing: border-box; }
.s97h-in {
    position: relative;
    width: calc(1200 * var(--u));
    height: 100%;
    margin: 0 auto;
}
.s97h-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}

/* logo: the black 97 emblem next to "servicetrading" in black, right on
   the gold bar at the left (owner, 2026-09-28 22:18); straight bars */
.s97h-logo {
    direction: ltr; /*rtl:ignore*/   /* the logo reads the same in Arabic */
    position: absolute;
    left: 0;
    top: 0;
    height: calc(60 * var(--u));
    display: flex;
    align-items: center;
    z-index: 2;
}
#vehicle_header .s97h-logo img { position: static; transform: none; filter: none; }
#vehicle_header .s97h-logo .s97h-logo-97 { width: auto; height: calc(58 * var(--u)); }
.s97h-logo-txt { display: flex; flex-direction: column; margin-left: calc(6 * var(--u)); }
#vehicle_header .s97h-logo-txt img { width: calc(148 * var(--u)); height: auto; }
/* "AUTOMOTIVE SPARE PARTS" under the wordmark, smaller, same width
   (owner, 2026-09-28 22:24) */
.s97h-logo-sub {
    display: flex; justify-content: space-between;
    margin-top: calc(3 * var(--u));
    color: #1c140a; font: 700 calc(9.5 * var(--u))/1 var(--s97-cond);
}
.s97h-logo-sub i { font-style: normal; }
#vehicle_header .s97h-logo, #vehicle_header .s97h-logo:hover { text-decoration: none !important; color: #1c140a !important; }

.s97h-top {
    position: absolute;
    right: calc(52 * var(--u));
    top: 0;
    height: calc(60 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(20 * var(--u));
    z-index: 3;
}
.s97h-nav {
    display: flex;
    align-items: center;
    gap: calc(18 * var(--u));
    height: 100%;
}
.s97h-nav a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    color: #1c140a !important;
    font: 700 calc(20 * var(--u))/1 var(--s97-cond);  /* bold, owner asked for a clearer menu */
    text-decoration: none !important;
    white-space: nowrap;
}
.s97h-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(3 * var(--u));
    height: calc(3 * var(--u));
    background: #2a1f10;
    transform: scaleX(0);
    transition: transform .2s ease;
}
.s97h-nav a.active::after { transform: scaleX(1); }
/* Hover: the word turns into a black-and-gold pill with a soft glow, so it
   clearly stands out (owner, 2026-09-28 21:58). The pill is drawn behind the
   word, so the menu does not move. */
@media (min-width: 960px) {
    .s97h-nav a { z-index: 0; transition: color .18s ease, transform .18s ease; }
    .s97h-nav a::before {
        content: ""; position: absolute; z-index: -1;
        left: calc(-9 * var(--u)); right: calc(-9 * var(--u)); top: 50%;
        height: calc(36 * var(--u)); border-radius: 999px;
        background: linear-gradient(180deg, #24211c 0%, #0c0b09 100%);
        border: 1px solid #e4c47f;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 0 3px rgba(228, 196, 127, .25);
        transform: translateY(-50%) scale(.6); opacity: 0;
        transition: transform .2s ease, opacity .2s ease;
    }
    .s97h-nav a:hover, .s97h-nav a:focus-visible { color: #f2d58c !important; transform: translateY(-1px); }
    .s97h-nav a:hover::before, .s97h-nav a:focus-visible::before { transform: translateY(-50%) scale(1); opacity: 1; }
    .s97h-nav a:hover::after { transform: scaleX(0); }
}
.s97h-nav a.s97h-m { display: none; }

.s97h-search {
    position: relative;
    width: calc(183 * var(--u));
    height: calc(32 * var(--u));
    margin: 0;
}
.s97h-search input {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(110, 80, 30, .35);
    border-radius: 999px;
    background: linear-gradient(180deg, #f1f1ef, #dededb);
    padding: 0 calc(34 * var(--u)) 0 calc(12 * var(--u));
    color: #222;
    font: 400 calc(16 * var(--u))/1 var(--s97-cond);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
}
.s97h-search input::placeholder { color: #8b8b87; }
.s97h-search input::-webkit-search-cancel-button { display: none; }
.s97h-search button {
    position: absolute;
    right: calc(8 * var(--u));
    top: 50%;
    transform: translateY(-50%);
    width: calc(22 * var(--u));
    height: calc(22 * var(--u));
    padding: 0;
    border: 0;
    background: none;
    color: #6b675f;
    cursor: pointer;
}
.s97h-search button svg { width: 100%; height: 100%; }

/* converted prices: the Odoo price stays in the page (hidden), ours shows */
.s97-fx-on { font-size: 0 !important; }
#wrapwrap .s97-fx-on > .oe_currency_value { font-size: 0 !important; }
.s97-fx-on > .s97-currency-value { font-size: var(--s97-fs, 1rem); white-space: nowrap; }

.s97h-cartwrap {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.s97h-cartwrap li.d-none { display: list-item !important; }   /* the cart always shows, like AliExpress */
.s97h-cart {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    border-radius: 50%;
    background: #1c140a;
    color: var(--s97-gold-hi) !important;
    text-decoration: none !important;
}
.s97h-cart svg { width: 58%; height: 58%; }
.s97h-cart .my_cart_quantity {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f6e3a8;
    color: #1c140a;
    font: 700 11px/18px var(--s97-cond);
    text-align: center;
}
.s97h-cart .my_cart_quantity.d-none { display: block !important; }
.s97h-cart .my_cart_quantity:empty::before { content: "0"; }

/* ---------------------------------------------------------------------
   Header tools like AliExpress (owner, 2026-09-28 21:26): ship to /
   language / currency, account, cart. static/src/js/locale.js.
   --------------------------------------------------------------------- */
.s97h-tools { display: flex; align-items: center; gap: calc(22 * var(--u)); }
.s97h-dd { position: relative; }
.s97h-dd-btn, .s97h-cart {
    display: flex; align-items: center; gap: calc(8 * var(--u));
    padding: 0; border: 0; background: none; cursor: pointer;
    color: #e4c47f !important; text-decoration: none !important; text-align: left;
}
.s97h-dd-btn:hover, .s97h-cart:hover { color: #f6e3a8 !important; }
.s97h-two { display: flex; flex-direction: column; line-height: 1.15; }
.s97h-l1 { font: 400 calc(13 * var(--u))/1.15 var(--s97-cond); color: #cdbb93; }
.s97h-l1, .s97h-loc-cur { unicode-bidi: isolate; direction: ltr; /*rtl:ignore*/ }   /* "EN/" and "USD" read left to right in Arabic too */
.s97h-l2 { display: flex; align-items: center; gap: 4px; font: 700 calc(15 * var(--u))/1.15 var(--s97-cond); white-space: nowrap; }
.s97h-chev { width: 10px; height: 7px; flex: 0 0 auto; }
.s97h-loc-flag { width: calc(26 * var(--u)); height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.s97h-ico { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.s97h-cart-ico { position: relative; display: block; width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.s97h-cart-ico svg { width: 100%; height: 100%; }
.s97h-cart-t { font: 700 calc(15 * var(--u))/1 var(--s97-cond); }
/* the old round cart button: now an icon with its label */
#vehicle_header .s97h-cart { width: auto; height: auto; border-radius: 0; background: none; display: flex; }
#vehicle_header .s97h-cart svg { width: 100%; height: 100%; }
#vehicle_header .s97h-cart .my_cart_quantity { top: -6px; right: -9px; background: #e4c47f; color: #111; }

/* pop-up cards (white, rounded, like AliExpress) */
.s97h-pop {
    position: absolute; right: 0; top: calc(100% + 14px); z-index: 1060;
    width: 300px; padding: 22px 24px; border-radius: 18px;
    background: #fff; color: #191919; box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
    font: 400 15px/1.35 var(--s97-cond); text-align: left;
}
.s97h-pop[hidden] { display: none; }
.s97h-pop::before { content: ""; position: absolute; right: 26px; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: #fff; }
.s97h-loc-pop h4 { margin: 0 0 10px; font: 700 18px/1.2 var(--s97-cond); color: #191919; }
.s97h-loc-pop h4:not(:first-child) { margin-top: 18px; }
.s97h-pick { position: relative; }
/* suggested languages for the ship-to country (owner, 2026-09-29 13:48) */
.s97h-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.s97h-sugg small { font-size: 13px; color: #777; }
.s97h-sugg button { padding: 4px 11px; border: 1px solid #d6d6d6; border-radius: 999px; background: #fff; color: #222; font: 500 14px/1.2 var(--s97-cond); cursor: pointer; }
.s97h-sugg button:hover { border-color: #b8913f; }
.s97h-sugg button[aria-pressed="true"] { border-color: #191919; background: #191919; color: #fff; }
.s97h-pick-btn, .s97h-lang {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 14px;
    border: 1px solid #d6d6d6; border-radius: 10px; background: #fff; color: #191919;
    font: 400 15px/1 var(--s97-cond); cursor: pointer; text-align: left;
}
.s97h-pick-btn span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s97h-pick-btn img, .s97h-pick-list img { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); flex: 0 0 auto; }
.s97h-lang { appearance: auto; }
.s97h-pick-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 2;
    background: #fff; border: 1px solid #d6d6d6; border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); overflow: hidden;
}
.s97h-pick-list[hidden] { display: none; }
.s97h-pick-list input { width: calc(100% - 16px); margin: 8px; height: 34px; padding: 0 10px; border: 1px solid #ddd; border-radius: 8px; font: 400 14px var(--s97-cond); }
.s97h-pick-list ul { list-style: none; margin: 0; padding: 0 0 6px; max-height: 240px; overflow-y: auto; }
.s97h-pick-list li { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; font-size: 14.5px; }
.s97h-pick-list li:hover { background: #f4f1ea; }
.s97h-pick-list li[aria-selected] { font-weight: 700; color: #8f6827; }
.s97h-pick-list li[hidden] { display: none; }
.s97h-save {
    display: block; width: 100%; height: 46px; margin-top: 22px; border: 0; border-radius: 999px;
    background: #191919; color: #fff; font: 700 17px/1 var(--s97-cond); cursor: pointer;
}
.s97h-save:hover { background: #000; color: #f6e3a8; }
.s97h-acct-pop { width: 280px; padding: 22px 0 12px; }
.s97h-acct-pop a { display: flex; align-items: center; gap: 12px; padding: 9px 24px; color: #191919 !important; text-decoration: none !important; font-size: 15px; }
.s97h-acct-pop a:hover { background: #f4f1ea; }
.s97h-acct-pop a svg { width: 18px; height: 18px; fill: #444; flex: 0 0 auto; }
.s97h-acct-pop a.s97h-signin {
    justify-content: center; margin: 0 24px; padding: 0; height: 46px; border-radius: 999px;
    background: #191919; color: #fff !important; font: 700 17px/46px var(--s97-cond);
}
.s97h-acct-pop a.s97h-signin:hover { background: #000; color: #f6e3a8 !important; }
.s97h-acct-pop a.s97h-register { justify-content: center; padding: 8px 24px; color: #777 !important; font-size: 14px; }
.s97h-acct-pop .s97h-hello { padding: 0 24px 6px; font-size: 16px; }
.s97h-acct-pop hr { margin: 10px 24px; border: 0; border-top: 1px solid #e6e6e6; opacity: 1; }
.s97h-acct-pop a.s97h-plain { color: #666 !important; font-size: 14.5px; padding: 7px 24px; }

/* Google page translation (languages not installed on the website): hide
   Google's own bar and hover boxes, keep the page where it is */
body { top: 0 !important; }
iframe.skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: none !important; box-shadow: none !important; }

/* Track Your Order: a clear outlined button, first in the black strip */
.s97h-track-btn { padding: calc(7 * var(--u)) calc(12 * var(--u)); border: 1px solid #b8913f; border-radius: 6px; }
.s97h-track-btn:hover { border-color: #e4c47f; background: rgba(228, 196, 127, .08); }
.s97h-track-btn .s97h-ico { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.s97h-track-t { font: 700 calc(15 * var(--u))/1 var(--s97-cond); white-space: nowrap; }
.s97h-track-pop { width: 320px; }
.s97h-track-pop h4 { margin: 0 0 6px; font: 700 18px/1.2 var(--s97-cond); color: #191919; }
.s97h-track-help { margin: 0 0 12px; color: #666; font-size: 14px; }
.s97h-track-form label { display: block; margin-bottom: 10px; font: 700 13px/1.2 var(--s97-cond); color: #333; }
.s97h-track-form input { display: block; width: 100%; height: 42px; margin-top: 5px; padding: 0 12px; border: 1px solid #d6d6d6; border-radius: 10px; font: 400 15px var(--s97-cond); color: #191919; }
.s97h-track-form input:focus { outline: none; border-color: #b8913f; box-shadow: 0 0 0 3px rgba(184, 145, 63, .2); }
.s97h-track-form .s97h-save { margin-top: 14px; }
.s97h-track-mine { display: block; margin-top: 12px; text-align: center; color: #8f6827 !important; font-weight: 700; }

/* desktop: Track Your Order sits by the account tools after the main links. */
@media (min-width: 960px) {
    #vehicle_header .s97h-tools > .s97h-track { flex: 0 0 auto; }
    /* no frame (owner, 05:11): a menu word with a solid fast-delivery truck */
    #vehicle_header .s97h-tools > .s97h-track .s97h-track-btn { padding: 0; border: 0; background: none; color: #1c140a !important; gap: calc(7 * var(--u)); }
    #vehicle_header .s97h-tools > .s97h-track .s97h-track-btn:hover { background: none; color: #000 !important; }
    #vehicle_header .s97h-tools > .s97h-track .s97h-track-t { font: 700 calc(18.5 * var(--u))/1 var(--s97-cond); }
    #vehicle_header .s97h-tools > .s97h-track .s97h-truck { width: calc(34 * var(--u)); height: calc(19 * var(--u)); }
    #vehicle_header .s97h-tools > .s97h-track .s97h-pop { right: 0; left: auto; }
    #vehicle_header .s97h-tools > .s97h-track .s97h-pop::before { right: 26px; left: auto; }
}
/* desktop: the tools sit flush at the far right of the black strip, at the
   header's right edge, mirroring the logo on the left (owner, 2026-10-01
   04:06 and 04:25; the M-Series tab that used to be there is gone). They are
   placed inside .s97h-top, which stops 52u short of that edge, hence -52u. */
@media (min-width: 960px) {
    #vehicle_header .s97h-tools { position: absolute; right: calc(-52 * var(--u)); top: calc(98 * var(--u)); transform: translateY(-50%); z-index: 3; }
}
/* phone: icons only in the top row; pop-ups across the screen */
@media (max-width: 959.98px) {
    .s97h-tools { gap: 12px; }
    .s97h-dd-btn, #vehicle_header .s97h-cart { color: #1c140a !important; }   /* dark on the gold bar */
    .s97h-two, .s97h-cart-t, .s97h-track-t { display: none !important; }
    .s97h-track { display: none; }   /* phones: "Track Order" is in the menu row instead */
    .s97h-loc-flag { width: 24px; }
    .s97h-ico, .s97h-cart-ico { width: 26px; height: 26px; }
    .s97h-dd { position: static; }
    .s97h-pop { position: fixed; left: 10px; right: 10px; top: 62px; width: auto; max-height: calc(100vh - 80px); overflow-y: auto; }
    .s97h-pop::before { display: none; }
}

/* Desktop: logo + menu on the left, search / cart on the
   right, across the full width. The menu sits up to 200 px further right
   than the logo's edge, less when the screen is too narrow for that
   (800u = menu + search + cart + gaps). #vehicle_header outranks the older
   override in the website's user_custom_rules.scss. */
@media (min-width: 960px) {
    #vehicle_header .s97h-in { width: calc(100% - 60px); }
    /* menu right after the logo, on the left (owner, 2026-09-28 23:43) */
    #vehicle_header .s97h-top { left: calc(285 * var(--u)); right: calc(52 * var(--u)); }
    #vehicle_header .s97h-nav { margin-left: 0; }
    #vehicle_header .s97h-search { margin-left: auto; flex: 0 0 calc(183 * var(--u)); }
}
/* Logo size/position the team set in the website builder (it was an inline
   style on the header copy that 19.0.1.10.0 resets). */

/* medium desktops: tighter menu so the search box keeps its size */
@media (min-width: 960px) and (max-width: 1599.98px) {
    #vehicle_header .s97h-nav { gap: calc(10 * var(--u)); }
    #vehicle_header .s97h-nav a { font-size: calc(18.5 * var(--u)); }
    #vehicle_header .s97h-top { gap: calc(14 * var(--u)); }
}

/* phone and small tablet */
@media (max-width: 959.98px) {
    .s97h {
        height: 104px;
        background:
            linear-gradient(180deg, transparent 100px, #c9a052 100px),
            #0c0c0b;
    }
    .s97h::before { height: 56px; }
    .s97h-in { width: 100%; }
    /* phone: the logo on a black block at the left of the top row */
    .s97h-logo { top: 0; width: 138px; height: 56px; padding: 0 4px 0 6px; }
    #vehicle_header .s97h-logo .s97h-logo-97 { height: 34px; }
    .s97h-logo-txt { margin-left: 3px; }
    #vehicle_header .s97h-logo-txt img { width: 68px; }
    .s97h-logo-sub { font-size: 5px; margin-top: 2px; }
    .s97h-top {
        left: 138px;
        right: 12px;
        height: 56px;
        gap: 10px;
    }
    .s97h-nav {
        position: absolute;
        left: 0;
        right: -12px;
        top: 56px;
        height: 44px;
        gap: 16px;
        padding-right: 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .s97h-nav::-webkit-scrollbar { display: none; }
    .s97h-nav a { color: #ead9ae !important; font-size: 16.5px; font-weight: 700; }
    .s97h-nav a::after { background: #e4c47f; bottom: 6px; height: 2px; }
    .s97h-nav a.s97h-m { display: flex; color: #f2d58c !important; font-weight: 700; }
    .s97h-search { flex: 1 1 auto; width: auto; height: 36px; }
    .s97h-search input { font-size: 16px; padding: 0 36px 0 14px; }
    .s97h-search button { right: 10px; width: 20px; height: 20px; }
    .s97h-cart { width: 36px; height: 36px; }
    /* no Global Search any more (owner, 2026-10-01): the icons keep the right side */
    #vehicle_header .s97h-tools { margin-left: auto; }
}

/* ---------------------------------------------------------------------
   Footer bar (Odoo's own footer blocks are kept but hidden)
   --------------------------------------------------------------------- */
footer#bottom {
    background: #0c0c0b !important;
    border-top: 2px solid #c9a052;
    color: #caa45a;
}
footer#bottom > #footer,
footer#bottom > .o_footer_copyright,
footer#bottom .s97f { display: none !important; }

/* full footer (views/footer.xml) */
.s97ft {
    background: linear-gradient(180deg, #151412 0%, #0b0b0a 100%);
    color: #cfc6b4;
    font: 400 15px/1.55 var(--s97-cond);
    border-top: 3px solid #c9a052;
}
.s97ft *, .s97ft *::before, .s97ft *::after { box-sizing: border-box; }
.s97ft-in {
    max-width: 1240px;
    margin: 0 auto;
    padding: 44px 24px 30px;
    display: grid;
    grid-template-columns: 1.25fr .9fr .9fr 1.35fr;
    gap: 36px;
}
.s97ft h4 {
    margin: 4px 0 18px;
    color: #e3c47e;
    font: 700 16px/1.2 var(--s97-cond);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.s97ft a { color: #e8e1d3 !important; text-decoration: none !important; }
.s97ft a:hover { color: var(--s97-gold-hi) !important; }
.s97ft-logo img { width: 230px; max-width: 100%; height: auto; margin-bottom: 18px; }
.s97ft-contact, .s97ft-links { list-style: none; margin: 0; padding: 0; }
.s97ft-contact li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.s97ft-contact svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; fill: #d2ad63; }
.s97ft-links li { margin-bottom: 9px; }
.s97ft-links a { position: relative; padding-right: 16px; }
.s97ft-links a::before {
    content: "";
    position: absolute;
    right: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    background: #c99a43;
    transform: rotate(-45deg);
}
.s97ft-about p { margin: 0 0 18px; }
.s97ft-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 16px 0 6px;
    border: 1px solid #6d5427;
    border-radius: 3px;
    background: #0d0c0b;
    color: #e8e1d3 !important;
}
.s97ft-cta svg {
    width: 34px;
    height: 32px;
    padding: 7px;
    border-radius: 2px;
    background: var(--s97-btn);
    fill: #1a1208;
}
.s97ft-cta:hover { border-color: #c99a43; }
.s97ft-social { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.s97ft-social span { color: #e3c47e; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 13px; }
.s97ft-social a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #6d5427;
    border-radius: 50%;
}
.s97ft-social svg { width: 16px; height: 16px; fill: #e3c47e; }
.s97ft-social a:hover { border-color: #e3c47e; background: #1c1a16; }
.s97ft-bottom {
    border-top: 1px solid #2c2820;
    padding: 14px 24px;
    text-align: center;
    color: #9d9381;
    font-size: 14px;
}
@media (max-width: 991.98px) {
    .s97ft-in { grid-template-columns: 1fr 1fr; gap: 30px 24px; padding: 34px 18px 24px; }
}
@media (max-width: 559.98px) {
    .s97ft-in { grid-template-columns: 1fr; }
}
.s97f {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: calc(4 * var(--u)) calc(7 * var(--u));
    min-height: calc(36 * var(--u));
    padding: calc(6 * var(--u)) 16px;
    font: 400 calc(16 * var(--u))/1.25 var(--s97-cond);
    color: #caa45a;
    text-align: center;
}
.s97f a {
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--u));
    color: #caa45a !important;
    text-decoration: none !important;
}
.s97f a:hover { color: var(--s97-gold-hi) !important; }
.s97f svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex: 0 0 auto; }
.s97f-name { text-transform: uppercase; }
.s97f-sep { color: #b08a45; }
@media (max-width: 959.98px) {
    .s97f { font-size: 14px; gap: 4px 8px; padding: 10px 14px; }
    .s97f svg { width: 13px; height: 13px; }
}

/* ---------------------------------------------------------------------
   Store theme: buttons, headings, shop grid, product page, cart
   --------------------------------------------------------------------- */
/* Odoo / Bootstrap colour variables: links, checks, badges, popups and
   dialogs outside #wrapwrap all follow the gold instead of Odoo's purple. */
:root, body {
    --bs-primary: #c99a43;
    --bs-primary-rgb: 201, 154, 67;
    --bs-link-color: #8f6827;
    --bs-link-color-rgb: 143, 104, 39;
    --bs-link-hover-color: #6b4c1a;
    --bs-link-hover-color-rgb: 107, 76, 26;
    --link-color: #8f6827;
}
.form-check-input:checked {
    background-color: #c99a43 !important;
    border-color: #8f6827 !important;
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(201, 154, 67, .25); }
.o_notification_manager .btn-primary,
.modal .btn-primary,
.o_wsale_cart_notification .btn-primary {
    background: var(--s97-btn) !important;
    border: 1px solid var(--s97-gold-deep) !important;
    color: #1a1208 !important;
    font-weight: 700;
}
#wrapwrap .js_cart_lines a:not(.btn),
#wrapwrap .css_quantity .btn,
#wrapwrap .css_quantity .fa { color: var(--s97-gold-deep) !important; }
#wrapwrap h1, #wrapwrap h2, #wrapwrap h3, #wrapwrap h4,
#wrapwrap .h1, #wrapwrap .h2, #wrapwrap .h3, #wrapwrap .h4 {
    font-family: var(--s97-cond);
}
#wrapwrap .btn-primary {
    background: var(--s97-btn) !important;
    border: 1px solid var(--s97-gold-deep) !important;
    color: #1a1208 !important;
    font-family: var(--s97-cond);
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
}
#wrapwrap .btn-primary:hover,
#wrapwrap .btn-primary:focus { filter: brightness(1.07); }
#wrapwrap .btn-outline-primary {
    border-color: var(--s97-gold-deep) !important;
    color: var(--s97-gold-deep) !important;
}
#wrapwrap .btn-outline-primary:hover {
    background: var(--s97-btn) !important;
    color: #1a1208 !important;
}
#wrapwrap .text-primary { color: var(--s97-gold-deep) !important; }
#wrapwrap .form-control:focus,
#wrapwrap .form-select:focus {
    border-color: var(--s97-gold);
    box-shadow: 0 0 0 .2rem rgba(201, 154, 67, .25);
}

/* shop page on brushed metal, products as dark gold-edged cards */
.o_wsale_products_page {
    background-color: #cfcfcb;
    background-image: var(--s97-brushed);
}
.o_wsale_products_page .oe_product .o_wsale_product_grid_wrapper {
    border: 1px solid #b8913f;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, #2a2823 0%, #141311 70%, #0b0b0a 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}
.o_wsale_products_page .oe_product .o_wsale_product_grid_wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, .4);
}
.o_wsale_products_page .oe_product_cart {
    background: transparent !important;       /* Odoo paints this white */
    border: 0 !important;
}
.o_wsale_products_page .oe_product_image {
    background: radial-gradient(ellipse at 50% 42%, #ffffff, #ececea 75%);
}
/* same-size picture in every shop card: the photo fits inside the box */
.o_wsale_products_page .oe_product_image img,
.o_wsale_products_page .oe_product_image .oe_product_image_img_wrapper img { object-fit: contain !important; }
.o_wsale_products_page .o_wsale_product_information {
    padding: 10px 14px 14px !important;
    border-top: 1px solid rgba(201, 154, 67, .45);
    color: #e9e2d2;
}
.o_wsale_products_page .o_wsale_products_item_title,
.o_wsale_products_page .o_wsale_products_item_title a {
    color: #f3ecdd !important;
    font-family: var(--s97-cond);
    font-size: 1.1rem;
}
.o_wsale_products_page .oe_subdescription { color: #b3aa98 !important; }
.o_wsale_products_page .product_price,
.o_wsale_products_page .product_price .oe_currency_value,
.o_wsale_products_page .product_price .fw-bold {
    color: #e0201b !important;
    font-family: var(--s97-cond);
    font-weight: 700;
}
.o_wsale_products_page .product_price del,
.o_wsale_products_page .product_price del * { color: #000 !important; }
.o_wsale_products_page .o_add_wishlist,
.o_wsale_products_page .o_add_wishlist .fa { color: #e4c47f !important; }
.o_wsale_products_page .o_wsale_products_main_row aside .accordion-button,
.o_wsale_products_page .o_wsale_products_main_row aside h6 { font-family: var(--s97-cond); }

/* product page */
.o_wsale_product_page #product_detail h1 {
    font-family: var(--s97-cond);
    color: #111;
}
.o_wsale_product_page .oe_price,
.o_wsale_product_page .oe_price .oe_currency_value {
    color: #e0201b;
    font-family: var(--s97-cond);
    font-weight: 700;
}

/* breadcrumbs and pagers */
#wrapwrap .breadcrumb a { color: var(--s97-gold-deep); }
#wrapwrap .page-item.active .page-link {
    background: var(--s97-btn);
    border-color: var(--s97-gold-deep);
    color: #1a1208;
}
#wrapwrap .page-link { color: var(--s97-gold-deep); }


/* ---------------------------------------------------------------------
   WhatsApp button, fixed at the bottom-left of every page
   --------------------------------------------------------------------- */
.s97-wa {
    position: fixed; right: 18px; bottom: 18px; z-index: 1040;
    display: grid; place-items: center; width: 58px; height: 58px;
    border-radius: 50%; background: #25d366; color: #fff !important; text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 3px rgba(228, 196, 127, .6);
    transition: transform .18s ease, box-shadow .18s ease;
}
.s97-wa:hover { transform: scale(1.06); box-shadow: 0 10px 22px rgba(0, 0, 0, .4), 0 0 0 3px #e4c47f; }
.s97-wa svg { width: 34px; height: 34px; }
.s97-wa-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* for screen readers */
@media (max-width: 959.98px) { .s97-wa { right: 12px; bottom: 12px; width: 52px; height: 52px; } .s97-wa svg { width: 30px; height: 30px; } }
@media print { .s97-wa { display: none; } }

/* ---------------------------------------------------------------------
   Shipping Policy and Track Your Order pages (views/shipping.xml)
   --------------------------------------------------------------------- */
.s97pol { background-color: #cfcfcb; background-image: radial-gradient(ellipse 60% 70% at 50% 35%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(180deg, #d9d9d6 0%, #c9c9c5 55%, #b9b9b5 100%); color: #1c1a16; font: 400 16px/1.6 var(--s97-cond); padding: 26px 0 64px; }
.s97pol-in { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.s97pol-narrow { max-width: 560px; }
.s97pol-crumbs { font-size: 15px; color: #4d4638; margin-bottom: 14px; }
.s97pol-crumbs a { color: #3a2e18; font-weight: 700; }
.s97pol-crumbs span { margin: 0 8px; color: #8f6827; }
.s97pol h1 { margin: 0 0 8px; font: 700 34px/1.15 var(--s97-head); color: #111; text-transform: uppercase; letter-spacing: .01em; }
.s97pol-lede { margin: 0 0 22px; font-size: 17px; color: #3a3326; }
.s97pol-sec { margin-bottom: 18px; padding: 22px 24px; background: #fbfaf6; border: 1px solid #d8c9a6; border-top: 3px solid #c9a052; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.s97pol-sec h2 { margin: 0 0 14px; font: 700 21px/1.2 var(--s97-cond); color: #1c140a; text-transform: uppercase; letter-spacing: .02em; }
.s97pol-sec h2 a { color: inherit; text-decoration: underline; text-decoration-color: #c9a052; text-underline-offset: 4px; }
.s97pol-sec p { margin: 0 0 8px; }
.s97pol-sec p:last-child { margin-bottom: 0; }
.s97pol a { color: #8f6827; font-weight: 700; }
.s97pol-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.s97pol-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s97pol-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 8px; background: linear-gradient(180deg, #1d1b17, #0e0d0b); border: 1px solid #a98740; color: #cfc6b4; }
.s97pol-card small { font: 700 12px/1.2 var(--s97-cond); text-transform: uppercase; letter-spacing: .06em; color: #b9ae99; }
.s97pol-card b { font: 700 22px/1.25 var(--s97-cond); color: #f2d58c; }
.s97pol-card span { font-size: 13.5px; color: #a89e8a; }
.s97pol-note { padding: 10px 14px; border-right: 3px solid #c9a052; background: #f3eee2; border-radius: 4px; font-size: 15px; }
.s97pol-table { border: 1px solid #d8c9a6; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.s97pol-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid #ece4d1; }
.s97pol-row span:last-child { font-weight: 700; text-align: left; }
.s97pol-head { border-top: 0; background: #1c140a; color: #e4c47f; font: 700 13px/1.2 var(--s97-cond); text-transform: uppercase; letter-spacing: .06em; }
.s97pol ul { margin: 0; padding-right: 20px; }
.s97pol li { margin-bottom: 6px; }
.s97pol-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.s97pol-contact div { padding: 12px 14px; border: 1px solid #d8c9a6; border-radius: 8px; background: #fff; }
.s97pol-contact small { display: block; font: 700 12px/1.2 var(--s97-cond); text-transform: uppercase; letter-spacing: .06em; color: #8f7d5b; margin-bottom: 4px; }
.s97pol-alert { margin-bottom: 14px; padding: 12px 14px; border-radius: 8px; background: #fbe9e6; border: 1px solid #e0a79c; color: #7a2a1d; }
.s97pol-form { padding: 22px 24px; background: #fbfaf6; border: 1px solid #d8c9a6; border-top: 3px solid #c9a052; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.s97pol-form label { display: block; margin-bottom: 14px; font: 700 14px/1.2 var(--s97-cond); color: #333; }
.s97pol-form input { display: block; width: 100%; height: 46px; margin-top: 6px; padding: 0 14px; border: 1px solid #cfc3a6; border-radius: 10px; font: 400 16px var(--s97-cond); background: #fff; }
.s97pol-form input:focus { outline: none; border-color: #b8913f; box-shadow: 0 0 0 3px rgba(184, 145, 63, .2); }
.s97pol-form button { width: 100%; height: 48px; margin-top: 6px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #e8c983 0%, #cfa55a 50%, #a97d34 100%); color: #1c140a; font: 700 17px/1 var(--s97-cond); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.s97pol-form button:hover { filter: brightness(1.07); }
.s97pol-small { margin-top: 14px; font-size: 15px; color: #4d4638; }
@media (max-width: 767.98px) {
    .s97pol h1 { font-size: 26px; }
    .s97pol-sec { padding: 18px 16px; }
    .s97pol-cards, .s97pol-cards-3, .s97pol-contact { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Sticky header (owner, 2026-09-29): the header stays at the top while
   the page scrolls. #wrapwrap clips sideways with "clip" rather than
   "hidden", which would stop the header from sticking.
   --------------------------------------------------------------------- */
#wrapwrap { overflow-x: clip !important; }
#vehicle_header { position: sticky !important; top: 0; }
html { scroll-padding-top: calc(145 * var(--u)); }
@media (max-width: 959.98px) { html { scroll-padding-top: 110px; } }

/* footer logo: the header logo (97 emblem, servicetrading, AUTOMOTIVE SPARE
   PARTS) in gold on the black footer (owner, 2026-09-29 13:12); forced in
   CSS too so a logo swapped in the website builder follows */
#wrapwrap .s97ft-brand .s97ft-logo,
#wrapwrap .s97ft-brand > a:first-child { display: inline-block; padding: 0; background: none; }
#wrapwrap .s97ft-brand .s97ft-logo img,
#wrapwrap .s97ft-brand > a:first-child img { content: url(/vehicle_website/static/src/img/logo-97-autoparts-gold.png); width: 200px; max-width: 100%; height: auto; margin: 0; background: none; }
#wrapwrap .s97ft-brand .s97ft-contact { margin-top: 16px; }

/* ---------------------------------------------------------------------
   About (/about-us) and Contact (/contactus) pages, views/pages.xml
   --------------------------------------------------------------------- */
.s97pg { background-color: #cfcfcb; background-image: radial-gradient(ellipse 60% 70% at 50% 35%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(180deg, #d9d9d6 0%, #c9c9c5 55%, #b9b9b5 100%); color: #1c1a16; font: 400 16px/1.55 var(--s97-cond); padding: calc(22 * var(--u)) 0 calc(64 * var(--u)); }
.s97pg-in { width: calc(1160 * var(--u)); margin: 0 auto; }
.s97pg a:not([class]) { color: #8f6827; font-weight: 700; }

.s97pg-hero { position: relative; min-height: calc(280 * var(--u)); display: flex; align-items: center; overflow: hidden; border: 1px solid #a98740; border-top: 3px solid #c9a052; border-radius: calc(10 * var(--u)); background: #0c0c0b; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.s97pg-hero > img { position: absolute; left: 0; top: 0; width: 72%; height: 100%; object-fit: cover; object-position: left center; }
.s97pg-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, #0c0c0b 30%, rgba(12, 12, 11, .8) 48%, rgba(12, 12, 11, .1) 80%); }
.s97pg-hero-t { position: relative; z-index: 1; max-width: calc(600 * var(--u)); padding: calc(30 * var(--u)) calc(44 * var(--u)); }
.s97pg-crumbs { font: 400 calc(15 * var(--u))/1.2 var(--s97-cond); color: #a89e8a; margin-bottom: calc(10 * var(--u)); }
.s97pg-crumbs a { color: #e4c47f !important; font-weight: 700; }
.s97pg-crumbs span { margin: 0 8px; color: #8f6827; }
.s97pg-hero h1 { margin: 0; font: 700 calc(42 * var(--u))/1.08 var(--s97-head) !important; color: #fff !important; text-transform: uppercase; letter-spacing: .02em; }
.s97pg-hero h1::after { content: ""; display: block; width: calc(70 * var(--u)); height: 3px; margin-top: calc(12 * var(--u)); background: var(--s97-btn); border-radius: 2px; }
.s97pg-hero p { margin: calc(14 * var(--u)) 0 0; font: 400 calc(19 * var(--u))/1.4 var(--s97-cond); color: #d8cfbd; }

.s97pg-sec { margin-top: calc(38 * var(--u)); }
.s97pg-head { padding-bottom: calc(10 * var(--u)); margin-bottom: calc(16 * var(--u)); border-bottom: 1px solid rgba(143, 104, 39, .35); }
.s97pg-head h2, .s97pg-split h2 { margin: 0; font: 700 calc(24 * var(--u))/1.15 var(--s97-cond) !important; text-transform: uppercase; letter-spacing: .02em; color: #1c140a !important; }
.s97pg-eyebrow { display: block; margin-bottom: 6px; font: 700 calc(13 * var(--u))/1.2 var(--s97-cond); text-transform: uppercase; letter-spacing: .12em; color: #8f6827; }

.s97pg-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(34 * var(--u)); align-items: center; padding: calc(30 * var(--u)) calc(34 * var(--u)); background: #fbfaf6; border: 1px solid #d8c9a6; border-top: 3px solid #c9a052; border-radius: calc(10 * var(--u)); box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.s97pg-split p { margin: calc(12 * var(--u)) 0 0; font-size: calc(17 * var(--u)); color: #3a3326; }
.s97pg-split-img { overflow: hidden; border-radius: calc(8 * var(--u)); border: 1px solid #a98740; background: #fff; }
.s97pg-split-img img { display: block; width: 100%; height: calc(330 * var(--u)); object-fit: cover; }

.s97pg-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(20 * var(--u)); }
.s97pg-btn { display: inline-flex; align-items: center; justify-content: center; padding: calc(11 * var(--u)) calc(26 * var(--u)); min-height: 42px; border: 1px solid #8f6827; border-radius: 999px; background: var(--s97-btn); color: #1a1208 !important; font: 700 calc(15 * var(--u))/1.2 var(--s97-cond); text-transform: uppercase; letter-spacing: .05em; text-decoration: none !important; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); }
.s97pg-btn:hover { filter: brightness(1.07); }
.s97pg-btn-o { background: #0c0c0b; color: #e4c47f !important; border-color: #a98740; }

.s97pg-cards { display: grid; gap: calc(18 * var(--u)); }
.s97pg-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s97pg-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* About: What we offer (Accessories removed, owner 2026-10-01) */
.s97pg-card { display: flex; flex-direction: column; gap: 6px; padding: calc(22 * var(--u)) calc(20 * var(--u)); border: 1px solid #a98740; border-radius: calc(8 * var(--u)); background: radial-gradient(ellipse 80% 70% at 50% 30%, #2e2c28, #161513 70%, #0c0c0b); color: #b9ae99; text-decoration: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); transition: transform .2s ease, box-shadow .2s ease; }
a.s97pg-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .32); }
.s97pg-card svg { width: calc(38 * var(--u)); height: calc(38 * var(--u)); min-width: 30px; min-height: 30px; color: #e4c47f; margin-bottom: 4px; }
.s97pg-card b { font: 700 calc(19 * var(--u))/1.2 var(--s97-cond); color: #f2d58c; text-transform: uppercase; letter-spacing: .02em; }
.s97pg-card span { font: 400 calc(15.5 * var(--u))/1.45 var(--s97-cond); color: #cfc6b4; overflow-wrap: anywhere; }
.s97pg-card em { margin-top: auto; padding-top: 6px; font: 700 calc(13 * var(--u))/1.2 var(--s97-cond); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: #e4c47f; }
.s97pg-why .s97pg-card { border-top: 3px solid #c9a052; }

.s97pg-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(18 * var(--u)); }
.s97pg-brands a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: calc(24 * var(--u)) 16px; background: #fbfaf6; border: 1px solid #d8c9a6; border-bottom: 3px solid #c9a052; border-radius: calc(8 * var(--u)); text-decoration: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); }
.s97pg-brands b { font: 700 calc(26 * var(--u))/1.1 var(--s97-head); color: #111; text-transform: uppercase; letter-spacing: .03em; }
.s97pg-brands span { font: 700 calc(13 * var(--u))/1.2 var(--s97-cond); text-transform: uppercase; letter-spacing: .08em; color: #8f7d5b; }
.s97pg-brands a:hover b { color: #8f6827; }

.s97pg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(18 * var(--u)); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.s97pg-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: calc(22 * var(--u)) calc(84 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)); background: #fbfaf6; border: 1px solid #d8c9a6; border-radius: calc(8 * var(--u)); box-shadow: 0 4px 12px rgba(0, 0, 0, .1); }
.s97pg-steps i { position: absolute; right: calc(20 * var(--u)); top: calc(20 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #1d1b17, #0e0d0b); border: 2px solid #c9a052; color: #f2d58c; font: 700 calc(22 * var(--u))/1 var(--s97-head); font-style: normal; }
.s97pg-steps b { font: 700 calc(18 * var(--u))/1.2 var(--s97-cond); text-transform: uppercase; color: #1c140a; }
.s97pg-steps span { font-size: calc(15.5 * var(--u)); color: #4d4638; }

.s97pg-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: calc(40 * var(--u)); padding: calc(28 * var(--u)) calc(40 * var(--u)); border: 1px solid #a98740; border-radius: calc(10 * var(--u)); background: linear-gradient(260deg, #0c0c0b 45%, #2a241a); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.s97pg-cta h2 { margin: 0; font: 700 calc(28 * var(--u))/1.15 var(--s97-head) !important; color: #fff !important; text-transform: uppercase; }
.s97pg-cta p { margin: 8px 0 0; font-size: calc(17 * var(--u)); color: #d8cfbd; }
.s97pg-cta .s97pg-btns { margin-top: 0; flex: 0 0 auto; }

/* contact */
.s97pg-ways { grid-template-columns: repeat(auto-fit, minmax(calc(200 * var(--u)), 1fr)); }
.s97pg-contact { display: grid; grid-template-columns: 1.7fr 1fr; gap: calc(26 * var(--u)); align-items: start; }
.s97pg-form-wrap { padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); background: #fbfaf6; border: 1px solid #d8c9a6; border-top: 3px solid #c9a052; border-radius: calc(10 * var(--u)); box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.s97pg-form label { display: block; margin-bottom: 14px; font: 700 14px/1.2 var(--s97-cond); color: #333; }
.s97pg-form label small { font-weight: 400; color: #8f7d5b; }
.s97pg-form input, .s97pg-form select, .s97pg-form textarea { box-sizing: border-box; display: block; width: 100%; margin-top: 6px; padding: 0 14px; border: 1px solid #cfc3a6; border-radius: 10px; background: #fff; font: 400 16px var(--s97-cond); color: #1c1a16; }
.s97pg-form input, .s97pg-form select { height: 46px; }
.s97pg-form textarea { padding: 12px 14px; resize: vertical; min-height: 140px; }
.s97pg-form input:focus, .s97pg-form select:focus, .s97pg-form textarea:focus { outline: none; border-color: #b8913f; box-shadow: 0 0 0 3px rgba(184, 145, 63, .2); }
.s97pg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.s97pg-form button { width: 100%; height: 50px; margin-top: 4px; border: 0; border-radius: 999px; background: var(--s97-btn); color: #1c140a; font: 700 17px/1 var(--s97-cond); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); }
.s97pg-form button:hover { filter: brightness(1.07); }
.s97pg-hp { position: absolute; right: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s97pg-ok { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 8px; background: #f1f6ec; border: 1px solid #a8c79a; color: #2d5a1f; }
.s97pg-alert { margin-bottom: 14px; padding: 12px 14px; border-radius: 8px; background: #fbe9e6; border: 1px solid #e0a79c; color: #7a2a1d; }
.s97pg-small { margin: 14px 0 0; }
.s97pg-side { display: grid; gap: calc(18 * var(--u)); }
.s97pg-side-box { padding: calc(20 * var(--u)) calc(22 * var(--u)); background: #fbfaf6; border: 1px solid #d8c9a6; border-radius: calc(10 * var(--u)); box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.s97pg-side-box h3 { margin: 0 0 10px; font: 700 18px/1.2 var(--s97-cond) !important; text-transform: uppercase; letter-spacing: .03em; color: #1c140a !important; }
.s97pg-side-box ul { margin: 0; padding: 0; list-style: none; }
.s97pg-side-box li { border-top: 1px solid #ece4d1; }
.s97pg-side-box li:first-child { border-top: 0; }
.s97pg-side-box li a { display: flex; justify-content: space-between; padding: 10px 0; color: #1c1a16 !important; font-weight: 700; text-decoration: none !important; }
.s97pg-side-box li a::after { content: "\203A"; color: #8f6827; }
.s97pg-side-box li a:hover { color: #8f6827 !important; }
.s97pg-side-dark { background: radial-gradient(ellipse 80% 70% at 50% 30%, #2e2c28, #161513 70%, #0c0c0b); border-color: #a98740; }
.s97pg-side-dark h3 { color: #f2d58c !important; }
.s97pg-side-dark p { margin: 0; color: #cfc6b4; }
.s97pg-map { width: 100%; height: 240px; border: 1px solid #a98740; border-radius: calc(10 * var(--u)); }

@media (max-width: 1100px) and (min-width: 960px) {
    .s97pg-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s97pg-cards-3 { grid-template-columns: 1fr; }
}
@media (max-width: 959.98px) {
    .s97pg { padding: 14px 0 48px; }
    .s97pg-in { width: auto; margin: 0 16px; }
    .s97pg-hero { min-height: 0; border-radius: 10px; align-items: flex-end; }
    .s97pg-hero > img { width: 100%; }
    .s97pg-hero::after { background: linear-gradient(180deg, rgba(12, 12, 11, .35) 0%, rgba(12, 12, 11, .8) 45%, #0c0c0b 85%); }
    .s97pg-hero-t { max-width: none; padding: 90px 18px 20px; }
    .s97pg-crumbs { font-size: 14px; }
    .s97pg-hero h1 { font-size: 30px !important; }
    .s97pg-hero h1::after { width: 54px; margin-top: 10px; }
    .s97pg-hero p { font-size: 16px; }
    .s97pg-sec { margin-top: 28px; }
    .s97pg-head h2, .s97pg-split h2 { font-size: 20px !important; }
    .s97pg-eyebrow { font-size: 12px; }
    .s97pg-split { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px; border-radius: 10px; }
    .s97pg-split p { font-size: 16px; margin-top: 10px; }
    .s97pg-split-img img { height: 240px; }
    .s97pg-btn { padding: 10px 20px; font-size: 14px; }
    .s97pg-cards { gap: 12px; }
    .s97pg-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s97pg-card { padding: 16px 14px; border-radius: 8px; }
    .s97pg-card b { font-size: 16px; }
    .s97pg-card span { font-size: 14px; }
    .s97pg-card em { font-size: 12px; }
    .s97pg-brands { grid-template-columns: 1fr; gap: 10px; }
    .s97pg-brands a { padding: 16px; flex-direction: row; justify-content: space-between; border-radius: 8px; }
    .s97pg-brands b { font-size: 20px; }
    .s97pg-brands span { font-size: 12px; }
    .s97pg-steps { grid-template-columns: 1fr; gap: 10px; }
    .s97pg-steps li { padding: 16px 72px 16px 16px; border-radius: 8px; }
    .s97pg-steps i { right: 16px; top: 16px; font-size: 18px; }
    .s97pg-steps b { font-size: 16px; }
    .s97pg-steps span { font-size: 14.5px; }
    .s97pg-cta { flex-direction: column; align-items: flex-start; padding: 22px 18px; border-radius: 10px; }
    .s97pg-cta h2 { font-size: 22px !important; }
    .s97pg-cta p { font-size: 15px; }
    .s97pg-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s97pg-contact { grid-template-columns: 1fr; gap: 18px; }
    .s97pg-form-wrap { padding: 18px 16px 20px; border-radius: 10px; }
    .s97pg-row { grid-template-columns: 1fr; gap: 0; }
    .s97pg-side { gap: 12px; }
    .s97pg-side-box { padding: 16px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .s97pg-card { transition: none; } }


/* ---------------------------------------------------------------------
   Header in right-to-left languages (owner, 2026-09-29 14:53): the logo,
   the search box stay exactly where they are in
   English; the menu and the tools read right-to-left inside their places.
   tools/rtl_flip.py leaves every header rule as it is.
   --------------------------------------------------------------------- */
html[dir="rtl"] #vehicle_header .s97h-in,
html[dir="rtl"] #vehicle_header .s97h-top { direction: ltr; }
html[dir="rtl"] #vehicle_header .s97h-nav,
html[dir="rtl"] #vehicle_header .s97h-tools,
html[dir="rtl"] #vehicle_header .s97h-pop { direction: rtl; }
/* logo and search box: same place and same words in every
   language (owner, 14:55); views/header.xml marks them "notranslate" */
html[dir="rtl"] #vehicle_header .s97h-logo,
html[dir="rtl"] #vehicle_header .s97h-search,
html[dir="rtl"] #vehicle_header .s97h-l1,
html[dir="rtl"] #vehicle_header .s97h-loc-cur { direction: ltr; }

/* ---------------------------------------------------------------------
   One gold header bar (owner, 2026-10-01 11:28): no black band any more.
   Logo + menu + Track Your Order on the left, account (with the currency
   inside its menu) and cart at the far right of the same gold bar.
   --------------------------------------------------------------------- */
.s97h-word { display: flex; align-items: baseline; gap: calc(7 * var(--u)); margin-left: calc(8 * var(--u)); color: #1c140a; line-height: 1; white-space: nowrap; }
.s97h-word b { font: 800 calc(22 * var(--u))/1 var(--s97-head); letter-spacing: .02em; }
.s97h-word span { font: 500 calc(22 * var(--u))/1 var(--s97-head); letter-spacing: .14em; }
.s97h-loc { display: none !important; }     /* currency is in the account menu now */
.s97h-acct-cur { padding: 6px 24px 4px; }
.s97h-acct-cur h4 { margin: 0 0 8px; font: 700 15px/1.2 var(--s97-cond); color: #191919; }
.s97h-acct-pop a.s97h-register { color: #b3261e !important; font-weight: 700; font-size: 15px; }
@media (min-width: 960px) {
    #vehicle_header.s97h {
        height: calc(60 * var(--u));
        background: var(--s97-bar);
        border-bottom: 2px solid #8a6526;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
    }
    #vehicle_header .s97h-tools { position: static; transform: none; margin-left: auto; gap: calc(18 * var(--u)); }
    #vehicle_header .s97h-tools .s97h-dd-btn, #vehicle_header .s97h-tools .s97h-cart { color: #1c140a !important; }
    #vehicle_header .s97h-tools .s97h-dd-btn:hover, #vehicle_header .s97h-tools .s97h-cart:hover { color: #000 !important; }
    #vehicle_header .s97h-tools .s97h-l1 { color: #4a3814; }
    #vehicle_header .s97h-cart .my_cart_quantity { background: #1c140a; color: #efd17a; }
    #vehicle_header .s97h-acct .s97h-pop { top: calc(100% + 12px); }
}
@media (min-width: 960px) { html { scroll-padding-top: calc(70 * var(--u)); } }

/* ---------------------------------------------------------------------
   header layout (owner, 2026-10-01 23:12): the menu (Home ... Track Your
   Order) in the middle of the page and a little bigger; Sign in and the
   cart pushed to the far right; the black line stays under the page you
   are on (hovering another word does not hide it)
   --------------------------------------------------------------------- */
@media (min-width: 960px) {
    #vehicle_header .s97h-in { width: calc(100% - 28px); }
    #vehicle_header .s97h-top { left: 0; right: 0; justify-content: center; pointer-events: none; }
    #vehicle_header .s97h-top > * { pointer-events: auto; }
    #vehicle_header .s97h-tools { position: absolute; right: 0; top: 0; height: 100%; margin: 0; }
    #vehicle_header .s97h-nav { gap: calc(24 * var(--u)); }
    #vehicle_header .s97h-nav a { font-size: calc(23 * var(--u)); }
    #vehicle_header .s97h-tools > .s97h-track .s97h-track-t { font-size: calc(21 * var(--u)); }
    #vehicle_header .s97h-nav a.active::after,
    #vehicle_header .s97h-nav a.active:hover::after { transform: scaleX(1); }
}
@media (min-width: 960px) and (max-width: 1599.98px) {
    #vehicle_header .s97h-nav { gap: calc(16 * var(--u)); }
    #vehicle_header .s97h-nav a { font-size: calc(21 * var(--u)); }
}


@media (min-width: 960px) and (max-width: 1199.98px) {
    #vehicle_header .s97h-tools { gap: calc(12 * var(--u)); }
    #vehicle_header .s97h-tools > .s97h-track .s97h-track-t { display: none; }
    #vehicle_header .s97h-tools > .s97h-track .s97h-truck { width: calc(28 * var(--u)); height: calc(16 * var(--u)); }
}

@media (min-width: 1200px) and (max-width: 1499.98px) {
    #vehicle_header .s97h-nav { transform: translateX(clamp(-130px, calc(50vw - 750px), 0px)); }
}


@media (min-width: 960px) {
    html[dir="rtl"] #vehicle_header .s97h-tools > .s97h-track { order: 1; }
    html[dir="rtl"] #vehicle_header .s97h-tools > .s97h-acct { order: 2; }
    html[dir="rtl"] #vehicle_header .s97h-tools > .s97h-cartwrap { order: 3; }
}

/* straight "97 AUTO PARTS" logo in the top bar, sized to the bar (owner, 2026-10-02 19:30) */
#vehicle_header .s97h-logo .s97h-logo-new { height: calc(50 * var(--u)); width: auto; margin-left: calc(10 * var(--u)); }
@media (max-width: 959.98px) {
    #vehicle_header .s97h-logo .s97h-logo-new { height: 44px; margin-left: 4px; }
}

/* phones: the menu row uses the whole black bar so Home, Store Parts,
   Shipment, About and Contact fit (owner, 2026-10-02 20:50) */
@media (max-width: 959.98px) {
    #vehicle_header .s97h-nav { left: -138px; padding-left: 12px; gap: 14px; }
    #vehicle_header .s97h-nav a { font-size: 15.5px; }
}


/* Hero smaller, to the owner's red frame (2026-10-03 12:30), for both
   slides; search box and both arrows at the exact middle of the photo */
/* kept in the asset bundle so it reaches the edited home page at once */
@media (min-width:960px){
  #wrapwrap .s97-hero{height:clamp(420px, 42.5vw, calc(100vh - 60 * var(--u)))}
  #wrapwrap .s97-fitment{top:50%;transform:translateY(-50%) scale(.86);transform-origin:50% 50%}
  #wrapwrap .s97-arrow{top:50%;transform:translateY(-50%)}
}

/* hero arrows light: 30% visible, full on hover (owner, 2026-10-03 12:49) */
#wrapwrap .s97-arrow{opacity:.3;transition:opacity .2s ease}
#wrapwrap .s97-arrow:hover,#wrapwrap .s97-arrow:focus-visible{opacity:1}

/* Search by Collections: 14 buttons in 7 columns across the page, a bit
   larger than before (owner, 2026-10-03 16:48) */
@media (min-width:960px){
  #wrapwrap .s97-colls .s97-sec-in{width:calc(100% - 48px);max-width:none;margin:0 auto}
  #wrapwrap .s97-colls-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(12 * var(--u)) calc(14 * var(--u))}
  #wrapwrap .s97-coll{padding:calc(12 * var(--u)) calc(14 * var(--u));font-size:calc(16.5 * var(--u))}
  #wrapwrap .s97-coll svg{width:calc(42 * var(--u));height:calc(42 * var(--u))}
}
/* the owner's own collection icons (gold on black pictures) */
#wrapwrap .s97-coll img.s97-ci{flex:0 0 auto;width:calc(38 * var(--u));height:calc(38 * var(--u));border-radius:4px;background:#111;object-fit:contain}
@media (min-width:960px){#wrapwrap .s97-coll img.s97-ci{width:calc(42 * var(--u));height:calc(42 * var(--u))}}
@media (max-width:959.98px){#wrapwrap .s97-coll img.s97-ci{width:32px;height:32px}}

/* Part page (owner, 2026-10-03 20:19): key facts under the title */
.s97pd-facts { list-style: none; margin: 4px 0 16px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; background: #fbf7ee; border: 1px solid #e6dfcf; border-right: 3px solid #c99a43; border-radius: 4px; font-size: 14px; }
.s97pd-facts li { display: flex; gap: 6px; align-items: baseline; }
.s97pd-facts span { color: #7a6e58; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; font-weight: 700; }
.s97pd-facts b { color: #1c1a16; }
.s97pd-facts a { color: #8a6630; font-weight: 700; text-decoration: underline; }

/* Part page sections like the owner's example (2026-10-04 13:04): Fitment
   note, Specifications grid, tabs Description / Fitment / Shipping / Reviews */
.s97pd { margin-top: 28px; margin-bottom: 44px; }
.s97pd-card { background: #fff; border: 1px solid #e6dfcf; border-top: 2px solid #c99a43; border-radius: 8px; margin-bottom: 22px; overflow: hidden; }
.s97pd-card h2 { margin: 0; padding: 16px 16px 12px; font-size: 21px; font-weight: 800; color: #141414; }
.s97pd-fitnote p { margin: 0; padding: 0 16px 16px; color: #5a5245; font-size: 14px; }
.s97pd-specs h2 { border-bottom: 1px solid #e6dfcf; }
.s97pd-grid { display: grid; grid-template-columns: 1fr 1fr; }
.s97pd-cell { padding: 12px 16px; border-bottom: 1px solid #eee7d8; }
.s97pd-cell:nth-child(odd) { border-left: 1px solid #eee7d8; }
.s97pd-cell span { display: block; margin-bottom: 3px; color: #7a6e58; text-transform: uppercase; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; }
.s97pd-cell b { color: #141414; font-size: 15px; white-space: pre-line; }
.s97pd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px !important; font-weight: 600; word-break: break-word; }
.s97pd-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.s97pd-tablist { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; }
.s97pd-tablist label { margin: 0; padding: 14px 30px; background: #ece7dc; color: #5a5245; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; border-top: 2px solid transparent; }
.s97pd-tablist label:hover { color: #141414; }
#s97pd-t1:checked ~ .s97pd-tablist label[for="s97pd-t1"],
#s97pd-t2:checked ~ .s97pd-tablist label[for="s97pd-t2"],
#s97pd-t3:checked ~ .s97pd-tablist label[for="s97pd-t3"],
#s97pd-t4:checked ~ .s97pd-tablist label[for="s97pd-t4"] { background: #fff; color: #141414; border-top-color: #c99a43; }
.s97pd-panel { display: none; background: #fff; padding: 28px 32px 34px; border: 1px solid #e6dfcf; border-radius: 0 0 8px 8px; }
#s97pd-t1:checked ~ .s97pd-p1, #s97pd-t2:checked ~ .s97pd-p2, #s97pd-t3:checked ~ .s97pd-p3, #s97pd-t4:checked ~ .s97pd-p4 { display: block; }
.s97pd-lead { font-size: 16px; line-height: 1.6; color: #3f392e; white-space: pre-line; }
.s97pd-panel h3 { margin: 22px 0 12px; font-size: 24px; font-weight: 500; color: #141414; }
.s97pd-incl { margin: 0 0 22px; padding-right: 20px; color: #3f392e; }
.s97pd-incl li { margin-bottom: 4px; }
.s97pd-note, .s97pd-empty { color: #5a5245; font-size: 14.5px; }
.s97pd-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; }
.s97pd-table th, .s97pd-table td { padding: 11px 14px; border: 1px solid #e6dfcf; text-align: right; vertical-align: top; }
.s97pd-table thead th { background: #111; color: #e4c47f; font-weight: 700; }
.s97pd-fit thead th { text-transform: uppercase; font-size: 12.5px; letter-spacing: .05em; }
.s97pd-fit tbody tr:nth-child(even) td { background: #fbf9f4; }
.s97pd-fit td:nth-child(2) { font-weight: 700; color: #1c1a16; }
.s97pd-scroll { max-height: 460px; overflow: auto; }
@media (max-width: 767.98px) {
    .s97pd-grid { grid-template-columns: 1fr; }
    .s97pd-cell:nth-child(odd) { border-left: 0; }
    .s97pd-tablist { padding: 0; }
    .s97pd-tablist label { padding: 11px 14px; font-size: 13px; }
    .s97pd-panel { padding: 18px 16px; }
    .s97pd-table { font-size: 13px; }
}

/* ---------------------------------------------------------------------
   Part page: one fixed frame and the buy box (owner, 2026-10-05 12:16,
   numbered example). Every part shows at the same size: pictures in a
   fixed square with a row of fixed thumbnails under it, details beside
   them; a long title is cut to three lines so nothing leaves the frame.
   Markup: views/product.xml (s97_product_buybox, s97_product_buy_now).
   --------------------------------------------------------------------- */
.o_wsale_product_page #product_detail_main {
    display: grid !important;
    grid-template-columns: 500px minmax(0, 1fr);
    gap: 40px;
    width: 100%;
    max-width: 1120px;
    min-height: 820px;
    margin: 0 auto !important;
    padding: 28px;
    background: #fff;
    border: 1px solid #e3ddd0;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    align-items: start !important;
}
.o_wsale_product_page #product_detail_main > .col,
.o_wsale_product_page #product_detail_main > div {
    width: auto !important; max-width: none !important; flex: none !important;
    padding: 0 !important; margin: 0 !important; min-width: 0;
}
.o_wsale_product_page #product_detail_main #o_wsale_product_details_content { padding: 0 !important; max-width: none !important; }

/* Keep the whole image column beside the details while they scroll. */
@media (min-width: 992px) {
    .o_wsale_product_page #product_detail_main > .o_wsale_product_images {
        position: sticky;
        top: 76px !important;
        align-self: start;
    }
}

/* pictures: fixed square, photo fitted inside; thumbnails in one row under it */
.o_wsale_product_page #o-carousel-product {
    display: flex !important; flex-direction: column-reverse !important; gap: 12px; margin: 0 !important; width: 500px;
}
.o_wsale_product_page #o-carousel-product .o_carousel_product_outer {
    width: 500px !important; height: 500px !important; aspect-ratio: 1 / 1 !important; flex: none !important;
    background: #fff; border: 1px solid #e8e3d8; border-radius: 6px;
}
.o_wsale_product_page #o-carousel-product .carousel-inner,
.o_wsale_product_page #o-carousel-product .carousel-item { width: 100% !important; height: 100% !important; }
.o_wsale_product_page #o-carousel-product .o_product_detail_img_wrapper,
.o_wsale_product_page #o-carousel-product .carousel-item > div { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; }
.o_wsale_product_page #o-carousel-product img.product_detail_img,
.o_wsale_product_page #o-carousel-product .o_product_detail_img_wrapper img {
    width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; padding: 10px;
}
.o_wsale_product_page .o_carousel_product_indicators { width: 500px !important; max-width: 100%; padding: 0 !important; flex: none !important; }
.o_wsale_product_page .o_carousel_product_indicators ol {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap; gap: 8px;
    margin: 0 !important; padding: 0 0 4px !important; overflow-x: auto; scrollbar-width: thin;
}
.o_wsale_product_page .o_carousel_product_indicators li {
    flex: 0 0 92px !important; width: 92px !important; height: 92px !important; margin: 0 !important;
    border: 1px solid #ddd6c8 !important; border-radius: 4px; background: #fff; overflow: hidden; opacity: 1 !important;
}
.o_wsale_product_page .o_carousel_product_indicators li.active { border: 2px solid #c99a43 !important; }
.o_wsale_product_page .o_carousel_product_indicators li img { object-fit: contain !important; }

/* details column */
.o_wsale_product_page .o_wsale_product_details_content_section_title h1,
.o_wsale_product_page #product_details h1 {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 27px !important; line-height: 1.25 !important; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere;
}
.o_wsale_product_page #product_details .s97pd-facts { overflow-wrap: anywhere; }

/* 2: old price crossed out over the new price, 1: green stock badge beside it */
.o_wsale_product_page .s97bb-price {
    display: grid !important; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 26px; row-gap: 0;
}
.o_wsale_product_page .s97bb-price > * { grid-column: 1 / -1; }
.o_wsale_product_page .s97bb-price > .s97bb-old { grid-column: 1; grid-row: 1; }
.o_wsale_product_page .s97bb-price > .product_price { grid-column: 1; grid-row: 2; }
.o_wsale_product_page .s97bb-price > .s97bb-stock { grid-column: 2; grid-row: 2; }
.s97bb-old { color: #000; font-size: 16px; line-height: 1.2; }
.s97bb-old s { text-decoration-thickness: 1.5px; }
.o_wsale_product_page .s97bb-price .product_price .h5 { justify-content: flex-start !important; margin: 0; }
.o_wsale_product_page .s97bb-price .oe_price,
.o_wsale_product_page .s97bb-price .oe_price .oe_currency_value { font-size: 30px !important; font-weight: 700; color: #e0201b !important; }
.o_wsale_product_page .s97bb-price .oe_compare_list_price { display: none !important; }   /* shown above instead */
.s97bb-stock { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 5px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.s97bb-stock svg { width: 19px; height: 19px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s97bb-stock.s97bb-in { color: #1a7f37; background: #e8f6ec; border: 1px solid #a8dcb5; }
.s97bb-stock.s97bb-in svg circle { fill: #1f9d45; stroke: #1f9d45; }
.s97bb-stock.s97bb-in svg path { stroke: #fff; }
.s97bb-stock.s97bb-out { color: #b42318; background: #fdecea; border: 1px solid #f3b8b2; }
.s97bb-stock.s97bb-out svg circle { fill: #d92d20; stroke: #d92d20; }
.s97bb-stock.s97bb-out svg path { stroke: #fff; }

/* quantity + Add to cart, then 3: Buy it now (full width, black) */
.o_wsale_product_page #add_to_cart_wrap { flex-wrap: wrap !important; width: 100% !important; }
.o_wsale_product_page #add_to_cart_wrap #add_to_cart { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
#wrapwrap .o_wsale_product_page .s97bb-buynow {
    flex: 0 0 100% !important; min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
    background: #1d1d1d; border: 1px solid #1d1d1d; color: #fff !important; font-weight: 600; font-size: 16px; border-radius: 4px;
}
#wrapwrap .o_wsale_product_page .s97bb-buynow:hover { background: #000; color: #e4c47f !important; }
.o_wsale_product_page .o_we_buy_now:not(.s97bb-buynow) { display: none !important; }   /* Odoo's own, if switched on */

/* 4: fitment, 5: delivery, 6: call box + share */
.s97bb { display: grid; gap: 14px; margin-bottom: 8px; }
.s97bb svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s97bb-fit { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.s97bb-fitq { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: #1c1a16; }
.s97bb-fitq svg { color: #2563eb; }
#wrapwrap .s97bb-fitbtn {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 4px;
    background: #ffd600; color: #111 !important; font-size: 14.5px; font-weight: 700; text-decoration: none !important; white-space: nowrap;
}
#wrapwrap .s97bb-fitbtn:hover { background: #f0c800; }
.s97bb-fitbtn svg { fill: #111; stroke: #111; stroke-width: 1.2; }
.s97bb-fitbtn svg .s97bb-ex { stroke: #ffd600; stroke-width: 2.2; }
.s97bb-fitok { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 4px; background: #e8f6ec; color: #1a7f37; font-weight: 700; font-size: 14.5px; }
.s97bb-fitok svg { stroke-width: 2.6; }
.s97bb-fitno { margin: -6px 0 0; color: #b42318; font-size: 13.5px; }
.s97bb-del { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid #e3ddd0; border-radius: 6px; color: #5a5245; font-size: 14.5px; }
.s97bb-del svg { width: 22px; height: 22px; color: #d92d20; }
.s97bb-del b { color: #1c1a16; }
.s97bb-call { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid #e3ddd0; border-radius: 8px; }
.s97bb-call-h { display: flex; gap: 12px; align-items: flex-start; }
.s97bb-call-h svg { width: 22px; height: 22px; color: #d92d20; margin-top: 2px; }
.s97bb-call-h b { display: block; font-size: 15.5px; color: #1c1a16; }
.s97bb-call-h small { color: #6b6457; font-size: 13px; }
.s97bb-avail { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #3f392e; }
.s97bb-avail i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.s97bb-avail.s97bb-in i { background: #1f9d45; box-shadow: 0 0 0 3px #d5f0dc; }
.s97bb-avail.s97bb-in b { color: #1a7f37; }
.s97bb-avail.s97bb-out i { background: #d92d20; box-shadow: 0 0 0 3px #fbd5d1; }
.s97bb-avail.s97bb-out b { color: #b42318; }
.s97bb-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#wrapwrap .s97bb-line {
    display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; padding: 9px 10px;
    background: #f5f4f1; border: 1px solid #e6e2d8; border-radius: 6px; color: #1c1a16 !important; font-weight: 700; font-size: 14.5px; text-decoration: none !important;
}
#wrapwrap .s97bb-line:hover { border-color: #c99a43; background: #fbf7ee; }
.s97bb-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s97bb-line em { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #d92d20; border-radius: 3px; padding: 2px 6px; letter-spacing: .03em; }
.s97bb-line em.s97bb-wa { background: #1f9d45; }
.s97bb-share { display: flex; align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid #ece7dc; }
.s97bb-share > span { font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1c1a16; margin-left: 6px; }
#wrapwrap .s97bb-share a { display: inline-flex; color: #111 !important; }
#wrapwrap .s97bb-share a:hover { color: #c99a43 !important; }
.s97bb-share svg { width: 21px; height: 21px; fill: currentColor; stroke: none; }

/* below 1100 px the frame narrows, below 992 px pictures go above details */
@media (max-width: 1199.98px) {
    .o_wsale_product_page #product_detail_main { grid-template-columns: 420px minmax(0, 1fr); gap: 28px; }
    .o_wsale_product_page #o-carousel-product,
    .o_wsale_product_page #o-carousel-product .o_carousel_product_outer,
    .o_wsale_product_page .o_carousel_product_indicators { width: 420px !important; }
    .o_wsale_product_page #o-carousel-product .o_carousel_product_outer { height: 420px !important; }
}
@media (max-width: 991.98px) {
    .o_wsale_product_page #product_detail_main { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 16px; gap: 22px; }
    .o_wsale_product_page #o-carousel-product,
    .o_wsale_product_page .o_carousel_product_indicators { width: 100% !important; }
    .o_wsale_product_page #o-carousel-product .o_carousel_product_outer { width: 100% !important; height: auto !important; }
    .o_wsale_product_page .o_carousel_product_indicators li { flex-basis: 72px !important; width: 72px !important; height: 72px !important; }
    .o_wsale_product_page .o_wsale_product_details_content_section_title h1,
    .o_wsale_product_page #product_details h1 { font-size: 22px !important; }
    .o_wsale_product_page .s97bb-price .oe_price, .o_wsale_product_page .s97bb-price .oe_price .oe_currency_value { font-size: 26px !important; }
}
@media (max-width: 479.98px) {
    .s97bb-lines { grid-template-columns: 1fr; }
    .o_wsale_product_page .s97bb-price { column-gap: 14px; }
}

/* Mobile header: keep both navigation rows compact while preserving the
   existing links and at least 44px touch targets. Desktop rules are unchanged. */
@media (max-width: 959.98px) {
    #vehicle_header.s97h {
        height: 96px;
        background: linear-gradient(180deg, transparent 94px, #c9a052 94px), #0c0c0b;
    }
    #vehicle_header.s97h::before { height: 50px; }
    #vehicle_header .s97h-logo { height: 50px; }
    #vehicle_header .s97h-top { height: 50px; }
    #vehicle_header .s97h-nav { top: 50px; height: 44px; }
}

/* Body Kit brand menu: desktop hover menu; mobile keeps its existing link. */
.s97h-body-kit { display: contents; }
@media (min-width: 960px) {
    #vehicle_header .s97h-body-kit { position: relative; display: flex; align-items: center; height: 100%; }
    #vehicle_header .s97h-body-kit-toggle {
        position: absolute; inset-inline-end: -15px; top: 50%; transform: translateY(-50%);
        display: flex; align-items: center; justify-content: center;
        width: 15px; height: 30px; padding: 2px; border: 0; background: transparent;
        color: #1c140a; cursor: pointer;
    }
    #vehicle_header .s97h-body-kit-toggle svg { width: 10px; height: 8px; }
    #vehicle_header .s97h-body-kit-toggle:focus-visible { outline: 2px solid #8f6827; outline-offset: 2px; }
    #vehicle_header .s97h-body-kit-menu {
        position: absolute; inset-inline-start: 0; top: 100%; z-index: 1060;
        width: 240px; max-width: calc(100vw - 24px); margin: 0; padding: 8px 0;
        list-style: none; background: rgba(0, 0, 0, .85); border: 1px solid #e4c47f;
        border-radius: 0 0 8px 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
    }
    #vehicle_header .s97h-body-kit-menu a {
        display: block; height: auto; padding: 10px 20px;
        font: 400 16px/1.35 var(--s97-cond); color: #f3e2b4 !important;
        text-align: start; white-space: nowrap; transform: none; transition: none;
    }
    #vehicle_header .s97h-body-kit-menu a::before,
    #vehicle_header .s97h-body-kit-menu a::after { display: none; }
    #vehicle_header .s97h-body-kit-menu a:hover,
    #vehicle_header .s97h-body-kit-menu a:focus-visible { background: rgba(228, 196, 127, .16); color: #fff4d9 !important; }
}
#vehicle_header .s97h-body-kit-toggle[hidden],
#vehicle_header .s97h-body-kit-menu[hidden] { display: none; }
@media (max-width: 959.98px) {
    #vehicle_header .s97h-body-kit-toggle,
    #vehicle_header .s97h-body-kit-menu { display: none; }
}

/* Phone menu (owner, 2026-10-11 10:46; logical sides, so this same block
   is pasted unchanged into vehicle_website.rtl.css): Home, Store Parts and Body Kit stay
   in the menu row; Shipment, About, Contact and Track Order move into a side
   menu opened by the ☰ button. The header sizes follow the screen width so
   small and large phones both fit. Desktop is unchanged. */
.s97h-burger { display: none; }
.s97h-drawer { display: none; }
@media (max-width: 959.98px) {
    #vehicle_header .s97h-logo { width: var(--s97m-logo); padding-block: 0; padding-inline: clamp(4px, 1.6vw, 8px) 4px; }
    #vehicle_header .s97h-logo .s97h-logo-97 { height: auto; width: 100%; max-height: 40px; object-fit: contain; }
    #vehicle_header .s97h-top { inset-inline-start: calc(var(--s97m-logo) + clamp(6px, 2vw, 12px)); inset-inline-end: clamp(6px, 2.5vw, 12px); gap: clamp(6px, 2vw, 10px); }
    #vehicle_header .s97h-tools { gap: clamp(8px, 3vw, 14px); }
    #vehicle_header .s97h-ico, #vehicle_header .s97h-cart-ico { width: clamp(22px, 6.6vw, 28px); height: clamp(22px, 6.6vw, 28px); }
    #vehicle_header .s97h-loc-flag { width: clamp(20px, 6vw, 26px); height: auto; }
    /* Home, Store Parts and Body Kit sit in the gold bar between the logo
       and the icons; no black menu row (owner, 2026-10-11 11:25). "html"
       outranks the two-row grid in views/customer_fixes.xml. */
    #vehicle_header { --s97m-logo: clamp(72px, 21vw, 112px); }
    html #vehicle_header.s97h { height: 50px; background: var(--s97-bar); border-bottom: 2px solid #8a6526; }
    html:root { scroll-padding-top: 60px; }
    html #vehicle_header .s97h-nav {
        position: static; display: flex; flex: 0 1 auto; min-width: 0;
        height: 100%; margin: 0; padding: 0; gap: clamp(8px, 2.6vw, 16px);
        justify-content: flex-start; overflow: visible;
    }
    html #vehicle_header .s97h-nav a {
        height: 100%; padding: 0; white-space: nowrap;
        font-size: clamp(12.5px, 3.6vw, 16px); color: #1c140a !important;
    }
    html #vehicle_header .s97h-nav a::after { background: #2a1f10; bottom: 9px; height: 2px; }
    /* the three links centred between the logo and the icons, and the page
       you are on in a black pill with gold text (owner, 2026-10-11 12:06) */
    html #vehicle_header .s97h-nav { margin-inline: auto; gap: clamp(12px, 3.4vw, 20px); }
    html #vehicle_header .s97h-nav a { z-index: 0; }
    html #vehicle_header .s97h-nav a.active { color: #f2d58c !important; }
    html #vehicle_header .s97h-nav a.active::before {
        content: ""; position: absolute; z-index: -1; inset-inline: -6px; top: 50%;
        height: 30px; transform: translateY(-50%); border-radius: 6px;
        background: linear-gradient(180deg, #24211c 0%, #0c0b09 100%);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .35); opacity: 1;
    }
    html #vehicle_header .s97h-nav a.active::after { display: none; }
    html #vehicle_header .s97h-nav a.s97h-xm,
    html #vehicle_header .s97h-nav a.s97h-m { display: none; }

    #vehicle_header .s97h-burger {
        display: flex; align-items: center; justify-content: center;
        width: clamp(34px, 9.5vw, 40px); height: clamp(34px, 9.5vw, 40px);
        padding: 0; border: 0; border-radius: 6px; background: none;
        color: #1c140a; cursor: pointer;
    }
    #vehicle_header .s97h-burger svg { width: 80%; height: 80%; }
    #vehicle_header .s97h-burger:focus-visible { outline: 2px solid #1c140a; outline-offset: 2px; }

    .s97h-drawer {
        display: block; position: fixed; inset: 0; z-index: 1100;
        visibility: hidden; pointer-events: none;
        font-family: var(--s97-cond);
    }
    .s97h-drawer.is-open { visibility: visible; pointer-events: auto; }
    .s97h-drawer-bg {
        position: absolute; inset: 0; background: rgba(0, 0, 0, .55);
        opacity: 0; transition: opacity .25s ease;
    }
    .s97h-drawer.is-open .s97h-drawer-bg { opacity: 1; }
    .s97h-drawer-panel {
        position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
        width: min(78vw, 300px); overflow-y: auto;
        display: flex; flex-direction: column;
        background: #0c0c0b; border-inline-start: 3px solid #c9a052;
        box-shadow: 0 0 18px rgba(0, 0, 0, .45);
        transform: translateX(100%); transition: transform .25s ease;
    }
    [dir="rtl"] .s97h-drawer-panel { transform: translateX(-100%); }
    .s97h-drawer.is-open .s97h-drawer-panel { transform: translateX(0); }
    .s97h-drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        height: 56px; padding-block: 0; padding-inline: 18px 8px;
        background: var(--s97-bar); color: #1c140a;
        font: 800 18px/1 var(--s97-cond); text-transform: uppercase; letter-spacing: .04em;
    }
    .s97h-drawer-x {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; padding: 0; border: 0; background: none;
        color: #1c140a; cursor: pointer;
    }
    .s97h-drawer-x svg { width: 26px; height: 26px; }
    .s97h-drawer-panel a {
        display: flex; align-items: center; min-height: 54px; padding: 0 20px;
        border-bottom: 1px solid rgba(201, 160, 82, .25);
        color: #ead9ae !important; font: 700 18px/1.2 var(--s97-cond);
        text-decoration: none !important;
    }
    .s97h-drawer-panel a.active { color: #f2d58c !important; border-inline-start: 4px solid #e4c47f; }
    .s97h-drawer-panel a:hover, .s97h-drawer-panel a:focus-visible { background: #1b1a18; color: #f2d58c !important; }
    html.s97h-drawer-on, html.s97h-drawer-on body { overflow: hidden; }
}
@media (max-width: 959.98px) and (prefers-reduced-motion: reduce) {
    .s97h-drawer-bg, .s97h-drawer-panel { transition: none; }
}

/* Part page on phones (owner, 2026-10-11 12:31): the small pictures under the
   main picture instead of Odoo's empty dots, in one row that scrolls, with a
   left and a right arrow (static/src/js/product_thumbs.js). Logical sides, so
   this same block is pasted unchanged into vehicle_website.rtl.css. */
.s97-thumb-arrow { display: none; }
@media (max-width: 991.98px) {
    .o_wsale_product_page .o_carousel_product_indicators {
        display: flex !important; align-items: center; gap: 4px;
        max-height: none !important; transform: none !important; overflow: visible !important;
    }
    .o_wsale_product_page .o_carousel_product_indicators ol {
        position: relative; flex: 1 1 auto; min-width: 0;
        justify-content: flex-start !important; gap: 8px; padding: 2px !important;
        overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
        transform: none !important;
    }
    .o_wsale_product_page .o_carousel_product_indicators ol::-webkit-scrollbar { display: none; }
    .o_wsale_product_page .o_carousel_product_indicators li {
        flex: 0 0 64px !important; width: 64px !important; min-width: 64px !important; height: 64px !important;
        margin: 0 !important; padding: 0 !important; text-indent: 0 !important;
        border: 1px solid #ddd6c8 !important; border-radius: 6px !important;
        background: #fff !important; opacity: 1 !important; overflow: hidden; cursor: pointer;
    }
    .o_wsale_product_page .o_carousel_product_indicators li.active { border: 2px solid #c99a43 !important; background: #fff !important; }
    .o_wsale_product_page .o_carousel_product_indicators li > div { display: block !important; width: 100%; height: 100%; }
    .o_wsale_product_page .o_carousel_product_indicators li img { width: 100%; height: 100%; object-fit: contain !important; padding: 3px; }
    .o_wsale_product_page .s97-thumb-arrow {
        display: flex; align-items: center; justify-content: center; flex: 0 0 34px;
        width: 34px; height: 64px; padding: 0; border: 0; background: none;
        color: #1c140a; cursor: pointer;
    }
    .o_wsale_product_page .s97-thumb-arrow svg { width: 16px; height: 32px; }
    .o_wsale_product_page .s97-thumb-arrow:focus-visible { outline: 2px solid #c99a43; outline-offset: 2px; border-radius: 4px; }
    [dir="rtl"] .o_wsale_product_page .s97-thumb-arrow svg { transform: scaleX(-1); }
}

/* Phones (owner, 2026-10-11 16:05): Home and the account icon leave the
   gold bar and sit in the side menu instead. Desktop unchanged. */
@media (max-width: 959.98px) {
    html #vehicle_header .s97h-nav a.s97h-mhide,
    html #vehicle_header .s97h-tools .s97h-acct { display: none !important; }
    .s97h-drawer-sec {
        padding: 18px 20px 8px; color: #b9ae98;
        font: 700 13px/1 var(--s97-cond); text-transform: uppercase; letter-spacing: .08em;
    }
}

/* Phones (owner, 2026-10-11 17:58): Store Parts and Body Kit in the gold bar
   a little bigger and wider, easier to read. Desktop unchanged. */
@media (max-width: 959.98px) {
    html #vehicle_header .s97h-nav a { font-size: clamp(15px, 4.4vw, 19px); font-weight: 700; letter-spacing: .03em; }
}

/* Product line prices only; delivery, taxes and order totals retain their theme. */
#cart_products [name="website_sale_cart_line_price"] { color: #e0201b; }
#cart_products [name="website_sale_cart_line_price"] :is(del, s),
#cart_products [name="website_sale_cart_line_price"] :is(del, s) * { color: #000 !important; }

/* Store Parts brand menu: desktop click menu; mobile keeps its existing link. */
.s97h-store-parts { display: contents; }
@media (min-width: 960px) {
    #vehicle_header .s97h-store-parts { position: relative; display: flex; align-items: center; height: 100%; }
    #vehicle_header .s97h-store-parts-toggle {
        position: absolute; inset-inline-end: -15px; top: 50%; transform: translateY(-50%);
        display: flex; align-items: center; justify-content: center;
        width: 15px; height: 30px; padding: 2px; border: 0; background: transparent;
        color: #1c140a; cursor: pointer;
    }
    #vehicle_header .s97h-store-parts-toggle svg { width: 10px; height: 8px; }
    #vehicle_header .s97h-store-parts-toggle:focus-visible { outline: 2px solid #8f6827; outline-offset: 2px; }
    #vehicle_header .s97h-store-parts-menu {
        position: absolute; inset-inline-start: 0; top: 100%; z-index: 1060;
        width: 240px; max-width: calc(100vw - 24px); margin: 0; padding: 8px 0;
        list-style: none; background: rgba(0, 0, 0, .85); border: 1px solid #e4c47f;
        border-radius: 0 0 8px 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
    }
    #vehicle_header .s97h-store-parts-menu a {
        display: block; height: auto; padding: 10px 20px;
        font: 400 16px/1.35 var(--s97-cond); color: #f3e2b4 !important;
        text-align: start; white-space: nowrap; transform: none; transition: none;
    }
    #vehicle_header .s97h-store-parts-menu a::before,
    #vehicle_header .s97h-store-parts-menu a::after { display: none; }
    #vehicle_header .s97h-store-parts-menu a:hover,
    #vehicle_header .s97h-store-parts-menu a:focus-visible { background: rgba(228, 196, 127, .16); color: #fff4d9 !important; }
}
#vehicle_header .s97h-store-parts-toggle[hidden],
#vehicle_header .s97h-store-parts-menu[hidden] { display: none; }
@media (max-width: 959.98px) {
    #vehicle_header .s97h-store-parts-toggle,
    #vehicle_header .s97h-store-parts-menu { display: none; }
}

/* Only the marked Store Parts words and its two main navigation links. */
@media (min-width: 960px) {
    html #vehicle_header .s97h-nav > a[href="/"],
    html #vehicle_header .s97h-nav .s97h-store-parts-link { font-size: calc(25 * var(--u)); font-weight: 800; }
}
#wrapwrap .pstore.pl-store-parts .ps-crumbs { font-size: 22px; font-weight: 700; }
#wrapwrap .pstore.pl-store-parts .pl-brand-filter .ps-box-h { font-size: 17px; font-weight: 700; }
#wrapwrap .pstore.pl-store-parts .pl-brand-filter .pl-opts a { font-size: 17px; font-weight: 700; }
#wrapwrap .pstore.pl-store-parts .pl-banner h1 { font-size: 30px; font-weight: 800; }
#wrapwrap .pstore.pl-store-parts .pl-banner p { font-size: 17px; font-weight: 700; }
@media (max-width: 959.98px) {
    #wrapwrap .pstore.pl-store-parts .ps-crumbs { font-size: 19px; }
    #wrapwrap .pstore.pl-store-parts .pl-banner h1 { font-size: 26px; }
}