/* =========================================================
   Category and product pages.
   Dimensions measured off the live pages at 1440px and 390px.
   ========================================================= */

/* ---------------------------------------------------------
   BREADCRUMBS   live: row 1440x41, bg #fff, pad 10px 32px
   --------------------------------------------------------- */

.breadcrumbs-row {
    background: #fff;
    padding: 10px 32px;
    text-align: center;
}

#bt-breadcrumbs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.breadcrumb { display: inline-flex; align-items: center; line-height: 20px; }
.breadcrumb + .breadcrumb::before {
    content: "/";
    color: var(--yellow);
    margin: 0 7px;
    font-weight: 700;
}
.breadcrumb-label { color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb-label:hover { color: var(--yellow-dark); }
.breadcrumb.is-active .breadcrumb-label { color: var(--ink); }

/* little house on the Home crumb */
.crumb-home {
    width: 15px; height: 13px;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 42%, 88% 42%, 88% 100%, 60% 100%, 60% 64%, 40% 64%, 40% 100%, 12% 100%, 12% 42%, 0 42%);
}


/* ---------------------------------------------------------
   SHARED DARK PAGE HEADER (category + product)
   live: bg #1a1a1a, 4px yellow rule, 56px grid texture
   --------------------------------------------------------- */

.category-header,
.product-header {
    position: relative;
    overflow: hidden;
    background: var(--dark);
    border-bottom: 4px solid var(--yellow);
}
.category-header::before,
.product-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, rgba(0, 0, 0, 0) 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, rgba(0, 0, 0, 0) 1px);
    background-size: 56px 56px, 56px 56px;
}
.category-header__inner { position: relative; padding: 15px 24px; }
.product-header__inner  { position: relative; padding: 18px 24px; }

.category-header__title,
#producttitle {
    margin: 0;
    font-family: var(--display);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #fff;
}
.category-header__title { font-size: 44px; }
#producttitle { font-size: 40px; }


/* ---------------------------------------------------------
   CATEGORY PAGE   live container 1200 @ x120, pad 0 0 50px
   --------------------------------------------------------- */

.container--category {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 50px;
}

.page { border: 1px solid #ddd; border-top: 0; background: #fff; }

#refImg { padding: 20px; text-align: center; background: #fff; }
#refImg img { display: inline-block; max-width: 100%; height: auto; }

.ref-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: #f4f4f4;
    border-top: 1px solid #ddd;
    font-size: 16px;
    color: #333;
}
.ref-info__icon {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    border: 2px solid #555;
    border-radius: 50%;
    font-family: var(--display);
    font-size: 12px; font-weight: 700; line-height: 15px;
    text-align: center;
    color: #555;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--header-bg);
}
.toolbar-filter { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.toolbar-filter__icon {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    border: 2px solid var(--yellow);
    border-radius: 50%;
    position: relative;
}
.toolbar-filter__icon::after {
    content: "";
    position: absolute;
    right: -5px; bottom: -4px;
    width: 8px; height: 2px;
    background: var(--yellow);
    transform: rotate(45deg);
}
#myInput {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 7px 10.5px;
    border: 0;
    background: #e2e2e2;
    font-family: var(--body);
    font-size: 15px;
    color: #333;
}
#myInput:focus { outline: 2px solid var(--yellow); }

.table-sort-tip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--display);
    font-size: 17px;
    font-weight: 600;
    color: var(--yellow);
    white-space: nowrap;
}
.table-sort-tip__icon {
    width: 16px; height: 16px;
    border: 2px solid var(--yellow);
    border-radius: 50%;
    font-size: 11px; line-height: 13px; text-align: center;
}

#slidetableouter { overflow-x: auto; }

#slidetable { width: 100%; border-collapse: collapse; }

#tableheaders th {
    height: 60px;
    padding: 0 10px;
    background: var(--header-bg);
    color: #fff;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
#tableheaders th:first-child { text-align: center; }

#slidetable tbody tr.productrow { height: 120px; border-bottom: 1px solid #e4e4e4; }
#slidetable tbody tr.productrow:nth-child(even) { background: #eee; }

#slidetable td {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    font-size: 15px;
    color: #333;
}
.cell-ref  { font-family: var(--display); font-weight: 700; color: #7a5b00; width: 62px; }
.cell-img  { width: 120px; }
.cell-img img {
    width: 98px; height: 98px;
    padding: 5px;
    background: #fff;
    border: 1px solid #ddd;
    object-fit: contain;
    display: inline-block;
}
.cell-img__none { font-size: 13px; color: #888; }
.cell-fits { font-weight: 500; }
.cell-part a { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--yellow); }
.cell-part a:hover { background: var(--yellow); }
.cell-price { font-weight: 600; white-space: nowrap; }
.cell-view { width: 140px; }

.viewinfo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: var(--green, #1f8a4c);
    color: #fff;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.viewinfo:hover { background: var(--green-dark, #166b3a); }


/* ---------------------------------------------------------
   PRODUCT PAGE   live container pad 0 84px, view 1240
   --------------------------------------------------------- */

.container--product { padding: 0 84px 50px; }
.productView { max-width: 1240px; margin: 0 auto; }

#pv-topbox {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #ddd;
    border-top: 0;
}

/* gallery */
.productView-images { flex: 0 0 620px; max-width: 620px; padding: 15px; background: #fff; }
.productView-image {
    margin: 0;
    padding: 20px;
    text-align: center;
}
.productView-image--default {
    width: 400px; height: 400px;
    margin: 0 auto;
    object-fit: contain;
}
.productView-thumbnails {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
}
.productView-thumbnail { flex: 0 0 auto; }
.productView-thumbnail-link {
    display: block;
    width: 73px; height: 73px;
    padding: 5px;
    border: 1px solid #ddd;
    background: #fff;
}
.productView-thumbnail.is-active .productView-thumbnail-link { border-color: var(--ink); }
.productView-thumbnail-link img { width: 100%; height: 100%; object-fit: contain; }

/* detail column */
#pv-details { flex: 1 1 auto; min-width: 0; padding: 0 0 15px; border-left: 1px solid #ddd; background: #fff; }

#fitsmodels {
    padding: 15px 30px;
    background: #efefef;
    font-size: 21px;
    color: #333;
}
#fitsmodels strong { font-weight: 700; }

.mm-fitment-nudge {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 30px;
    border-bottom: 1px dashed #ddd;
    font-size: 15px;
    color: #555;
}
.mm-fitment-nudge a { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--yellow); }
.mm-nudge-icon {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    background: #9a9a9a;
    clip-path: polygon(62% 0, 100% 22%, 74% 44%, 100% 100%, 78% 100%, 44% 52%, 18% 74%, 0 40%);
}
.mm-fitment-nudge--low { border-bottom: 0; border-top: 1px solid #ddd; padding: 12px 0; margin-top: 14px; }

#pv-descriptionbox { padding: 26px 30px 10px; }

.pv-h {
    margin: 26px 0 12px;
    font-family: var(--body);
    font-size: 21px;
    font-weight: 700;
    color: #4a4a4a;
}
.pv-h:first-child { margin-top: 0; }
.pv-sub {
    margin: 22px 0 10px;
    font-family: var(--body);
    font-size: 16px;
    font-weight: 700;
    color: #4a4a4a;
}

.pv-list { margin: 0 0 6px; padding-left: 20px; }
.pv-list li { margin-bottom: 7px; font-size: 15px; line-height: 1.5; color: #333; }
.pv-sublist { margin: 6px 0 6px; padding-left: 20px; list-style: circle; }
.pv-sublist li { margin-bottom: 4px; }

.pv-spec { list-style: none; margin: 0; padding: 0; }
.pv-spec li { position: relative; padding-left: 14px; margin-bottom: 5px; font-size: 15px; color: #333; }
.pv-spec li::before { content: "\2022"; position: absolute; left: 0; color: #333; }

.pv-check { list-style: none; margin: 0; padding: 0; }
.pv-check li {
    display: flex; align-items: flex-start; gap: 9px;
    margin-bottom: 6px;
    font-size: 15px; font-weight: 700; color: #333;
}
.pv-tick {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    margin-top: 2px;
    background: #2e9e5b;
    border-radius: 2px;
    position: relative;
}
.pv-tick::after {
    content: "";
    position: absolute;
    left: 5px; top: 2px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.productView-price {
    margin: 26px 0 14px;
    font-family: var(--display);
    font-size: 40px;
    font-weight: 900;
    text-align: right;
    color: var(--ink);
}

.pv-buy { display: flex; gap: 14px; align-items: stretch; }
.pv-qty { display: flex; align-items: stretch; border: 1px solid #ccc; }
.pv-qty__btn {
    width: 44px;
    border: 0; background: #fff;
    color: #666; font-size: 14px;
}
.pv-qty__btn:hover { background: #f2f2f2; }
.pv-qty__input {
    width: 52px;
    border: 0;
    border-left: 1px solid #eee; border-right: 1px solid #eee;
    text-align: center;
    font-family: var(--body); font-size: 16px; color: #333;
}
.pv-addtocart {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    min-height: 62px;
    background: var(--yellow);
    border: 2px solid var(--ink);
    color: var(--ink);
    font-family: var(--display);
    font-size: 22px; font-weight: 900;
    letter-spacing: 0.6px; text-transform: uppercase;
}
.pv-addtocart:hover { background: var(--yellow-dark); }

.pv-cartnote {
    margin: 12px 0 0;
    padding: 12px 16px;
    background: #f2f2f2;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
    color: #666;
}

#pv-help {
    max-width: 450px;
    margin: 22px auto 0;
    padding: 15px;
    border-top: 1px solid #ddd;
    text-align: center;
    font-size: 16px;
}
#pv-help strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--body);
    font-size: 21px;
    font-weight: 700;
    color: #4a4a4a;
}
#pv-help p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: #555; }
.pv-help__btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pv-help__btns a {
    display: inline-flex; align-items: center;
    padding: 10px 16px;
    border: 1px solid #bbb;
    font-family: var(--display);
    font-size: 15px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--ink);
}
.pv-help__btns a:hover { border-color: var(--ink); background: var(--yellow); }

/* featured products */
#ymalwrap1 {
    margin-top: 50px;
    padding: 20px 60px 40px;
    background: #fff;
    border: 1px solid #ddd;
}
#ymalwrap1 h2 {
    margin: 20px 0 30px;
    font-family: var(--display);
    font-size: 30px; font-weight: 900;
    letter-spacing: 0.5px; text-transform: uppercase;
    text-align: center;
    color: #4a4a4a;
}
.ymal-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ymal-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    padding: 16px;
    border: 1px solid #e4e4e4;
    text-align: center;
}
.ymal-card:hover { border-color: #bbb; }
.ymal-card img { width: 120px; height: 120px; object-fit: contain; }
.ymal-card__title { font-size: 14px; line-height: 1.4; color: #333; }
.ymal-card__part  { font-size: 13px; color: #888; }
.ymal-card__price { font-family: var(--display); font-size: 20px; font-weight: 900; color: var(--ink); }
.ymal-card__btn {
    margin-top: 4px;
    padding: 8px 14px;
    background: var(--green, #1f8a4c);
    font-family: var(--display);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    color: #fff;
    transition: background .15s;
}
.ymal-card:hover .ymal-card__btn { background: var(--green-dark, #166b3a); }

/* shipping note */
.pv-shipping {
    margin-top: 40px;
    padding: 0 20px 20px;
}
.pv-shipping h2 {
    margin: 0 0 16px;
    font-family: var(--display);
    font-size: 30px; font-weight: 900;
    letter-spacing: 0.4px; text-transform: uppercase;
    color: #4a4a4a;
}
.pv-shipping p { margin: 0 0 20px; font-size: 16px; line-height: 1.55; color: #444; }
.pv-shipping a { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--yellow); }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1279px) {
    .container--category { max-width: none; margin: 0 20px; }
    .container--product { padding: 0 20px 50px; }
    .productView-images { flex-basis: 45%; max-width: 45%; }
}

@media (max-width: 1023px) {
    #pv-topbox { flex-direction: column; }
    .productView-images { flex-basis: auto; max-width: none; width: 100%; }
    #pv-details { border-left: 0; border-top: 1px solid #ddd; width: 100%; }
    .ymal-row { grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================
   MOBILE   live at 390: table collapses into stacked cards
   ========================================================= */

@media (max-width: 767px) {

    .breadcrumbs-row { padding: 10px 16px; }
    #bt-breadcrumbs { font-size: 12px; }
    .breadcrumb + .breadcrumb::before { margin: 0 5px; }

    .container--category { margin: 0; padding: 0 0 50px; }
    .container--product { padding: 0 0 50px; }

    .category-header__inner { padding: 24px 16px; }
    .category-header__title { font-size: 26px; }
    .product-header__inner { padding: 18px 24px; }
    #producttitle { font-size: 24px; }

    .page { border-left: 0; border-right: 0; }

    #refImg { padding: 20px; }
    .ref-info { padding: 20px; align-items: flex-start; }
    .toolbar { padding: 12px 16px; flex-wrap: wrap; }
    .table-sort-tip { display: none; }

    /* the table becomes a list of cards */
    #slidetableouter { overflow: visible; }
    #slidetable, #slidetable tbody, #slidetable tr, #slidetable td { display: block; width: auto; }
    #slidetable thead { display: none; }

    #slidetable tbody tr.productrow {
        position: relative;
        height: auto;
        padding: 25px 20px 35px 127.5px;
        border-bottom: 1px solid #e4e4e4;
    }
    #slidetable td { padding: 0 0 8px; text-align: left; }

    .cell-img {
        position: absolute;
        left: 20px; top: 27px;
        width: 98px;
        padding: 0;
    }
    .cell-img img { width: 98px; height: 98px; }

    #slidetable td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-family: var(--display);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: #8a8a8a;
    }
    .cell-img::before { display: none; }

    .cell-view { position: absolute; left: 20px; bottom: 18px; padding: 0; }
    .cell-view::before { display: none; }
    .viewinfo { padding: 8px 14px; font-size: 13px; }

    /* product */
    .productView-images { padding: 15px; }
    .productView-image { padding: 20px; }
    .productView-image--default { width: 280px; height: 280px; }
    .productView-thumbnails { flex-wrap: wrap; gap: 8px; }

    #fitsmodels { padding: 15px; font-size: 20px; }
    .mm-fitment-nudge { padding: 10px 15px; }
    #pv-descriptionbox { padding: 26px 15px 10px; }
    .productView-price { font-size: 34px; }
    .pv-addtocart { font-size: 18px; min-height: 56px; }

    #ymalwrap1 { padding: 20px 38px 30px; }
    #ymalwrap1 h2 { font-size: 24px; }
    .ymal-row { grid-template-columns: 1fr; }

    .pv-shipping { padding: 0 20px 20px; }
    .pv-shipping h2 { font-size: 24px; }
}

/* ---------------------------------------------------------
   Corrections measured against the live pages
   --------------------------------------------------------- */

/* 15px of air between the crumb row and the page header */
.container--category, .container--product { margin-top: 15px; }

/* the reference diagram sits flush, no inline-block baseline gap */
#refImg img { display: block; margin: 0 auto; }

/* live table rows are 120 tall (a floor, so they still grow) */
#slidetable tbody tr.productrow { height: 120px; }

/* the collapsed crumb only appears on phones */
.breadcrumb--ellipsis { display: none; }

@media (max-width: 767px) {
    /* live mobile trail is Home / . . . / current, on one line */
    .breadcrumb--ellipsis { display: inline-flex; }
    .breadcrumb--ellipsis .breadcrumb-label { color: #777; letter-spacing: 1px; }
    .breadcrumb--mid { display: none; }
    #bt-breadcrumbs { flex-wrap: nowrap; }

    /* live mobile cards carry no field labels */
    #slidetable td::before { display: none; }
    #slidetable tbody tr.productrow { height: auto; }
}

/* ---------------------------------------------------------
   Second pass, measured off the live pages
   --------------------------------------------------------- */

/* live crumb tracking is 1.04px - this drives the whole trail width */
#bt-breadcrumbs { letter-spacing: 1.04px; }

/* live table cells: 16px, padding 0 10px, fixed column widths */
#slidetable td { padding: 0 10px; font-size: 16px; }
#tableheaders th { padding: 0 10px; }
.cell-ref  { width: 62px; }
.cell-img  { width: 120px; }
.cell-fits { width: 501px; }
.cell-desc { width: 189px; }
.cell-part { width: 106px; }
.cell-price { width: 80px; }
.cell-view { width: 140px; }
.cell-img img { display: block; margin: 0 auto; }

/* category copy under the table */
#categoryDescription {
    padding: 5px 20px 10px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}
#categoryDescription p { margin: 0 0 14px; }
#categoryDescription .cd-heading { margin-top: 20px; }
#categoryDescription ul { margin: 0 0 14px; padding-left: 22px; }
#categoryDescription li { margin-bottom: 4px; }

@media (max-width: 767px) {
    #bt-breadcrumbs { letter-spacing: 0.96px; }

    /* live mobile cells: 14px, no padding, 243 wide */
    #slidetable td { padding: 0; font-size: 14px; }
    .cell-ref, .cell-fits, .cell-desc, .cell-part, .cell-price, .cell-view { width: auto; }
    #slidetable .cell-fits, #slidetable .cell-desc,
    #slidetable .cell-part, #slidetable .cell-price { min-height: 34px; }
    .cell-ref { min-height: 17px; }

    /* the trail keeps to one line and clips the current page name */
    #bt-breadcrumbs { width: 100%; }
    .breadcrumb.is-active { min-width: 0; flex: 0 1 auto; }
    .breadcrumb.is-active .breadcrumb-label {
        display: block;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* live clamps the copy at 400 on phones */
    #categoryDescription { max-height: 400px; }
}

@media (max-width: 767px) {
    /* one line, starting at the left edge, current page clipped to fit */
    #bt-breadcrumbs { display: flex; width: 100%; flex-wrap: nowrap; justify-content: flex-start; }
    .breadcrumb { flex: 0 0 auto; }
    .breadcrumb.is-active { flex: 0 1 auto; min-width: 0; overflow: hidden; }
    .breadcrumb.is-active .breadcrumb-label {
        display: block; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
}

@media (max-width: 767px) {
    /* live has no gap between the trail and the header on phones */
    .container--category, .container--product { margin-top: 0; }
    /* 7px under each stacked cell brings the card to the live 248 */
    #slidetable td { padding: 0 0 7px; }
    .cell-img { padding: 0; }
}

/* ---------------------------------------------------------
   Product page, second pass
   --------------------------------------------------------- */

/* live drops the gallery 75px below the top of the box */
.productView-images { margin-top: 75px; }

/* thumbnail strip runs 600 wide, escaping the 15px padding */
.productView-thumbnails { margin: 11px -5px 0; }

@media (max-width: 767px) {
    /* no offset on phones */
    .productView-images { margin-top: 0; padding: 15px; }
    .productView-image { width: 320px; margin: 0 auto; padding: 20px; }
    /* one scrolling row of thumbs, like the live page */
    .productView-thumbnails {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        margin: 11px 0 0;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }
    .productView-thumbnail { flex: 0 0 73px; }
    /* featured products sit two-up */
    .ymal-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ymal-card img { width: 96px; height: 96px; }
}

/* ---------------------------------------------------------
   CUSTOMER REVIEWS
   live: block 1240 wide, cards 1116, score 4.8
   --------------------------------------------------------- */

.pv-reviews {
    margin-top: 40px;
    padding: 30px 60px 40px;
    background: #fff;
    border: 1px solid #ddd;
}

.rv-headline {
    display: flex;
    align-items: center;
    gap: 48px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e4e4e4;
}

.rv-score { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.rv-score__num {
    font-family: var(--display);
    font-size: 56px; font-weight: 900; line-height: 1;
    color: var(--ink);
}
.rv-score__total { font-size: 13px; color: #777; }

.rv-stars { display: inline-flex; gap: 2px; }
.rv-star { color: #d5d5d5; font-size: 15px; line-height: 1; }
.rv-star.is-on { color: var(--yellow); }
.rv-stars--lg .rv-star { font-size: 20px; }

.rv-bars { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; max-width: 420px; }
.rv-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #666; }
.rv-bar__label { flex: 0 0 34px; display: inline-flex; align-items: center; gap: 3px; }
.rv-bar__track { flex: 1 1 auto; height: 8px; background: #ececec; border-radius: 4px; overflow: hidden; }
.rv-bar__fill { display: block; height: 100%; background: var(--yellow); }
.rv-bar__count { flex: 0 0 18px; text-align: right; }

.rv-write {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    padding: 12px 22px;
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--display);
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
}
.rv-write:hover { background: var(--yellow-dark); }

.rv-list { margin-top: 6px; }

.rv-card {
    display: flex;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid #e4e4e4;
}
.rv-card:last-child { border-bottom: 0; }

.rv-card__who { flex: 0 0 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rv-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #e0e0e0;
    position: relative;
}
.rv-avatar::after {
    content: "";
    position: absolute;
    left: 50%; top: 9px;
    width: 13px; height: 13px;
    margin-left: -6.5px;
    border-radius: 50%;
    background: #b4b4b4;
    box-shadow: 0 17px 0 -2px #b4b4b4;
}
.rv-name { font-weight: 700; font-size: 15px; color: #333; }
.rv-verified { font-size: 12px; color: #6a9a6a; }

.rv-card__body { flex: 1 1 auto; min-width: 0; }
.rv-title { margin: 8px 0 6px; font-size: 16px; font-weight: 700; color: #333; }
.rv-body { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: #444; }
.rv-foot { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 12.5px; color: #999; }
.rv-vote { margin-left: 4px; }

@media (max-width: 767px) {
    .pv-reviews { padding: 24px 20px 30px; border-left: 0; border-right: 0; }
    .rv-headline { flex-direction: column; align-items: flex-start; gap: 20px; }
    .rv-bars { max-width: none; width: 100%; }
    .rv-write { width: 100%; justify-content: center; }
    .rv-card { flex-direction: column; gap: 10px; padding: 20px 0; }
    .rv-card__who { flex: none; flex-direction: row; align-items: center; gap: 10px; }
}

/* live carousel: five 229-wide slides, 523 tall */
.ymal-row { grid-template-columns: repeat(5, 1fr); gap: 21px; }
.ymal-card { justify-content: flex-start; padding: 0 0 16px; border: 0; }
.ymal-card img { width: 100%; height: 302px; object-fit: contain; }
.ymal-card__title { min-height: 40px; }

@media (max-width: 1023px) {
    .ymal-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .ymal-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .ymal-card img { height: 190px; }
}

@media (max-width: 767px) {
    /* live keeps one scrolling row on phones, not a stacked grid */
    .ymal-row {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        gap: 14px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .ymal-card { flex: 0 0 180px; }
    .ymal-card img { height: 240px; }
}

/* ---------------------------------------------------------
   BRAND LANDING PAGE (Case Parts)
   live: hero 1158x81, finder 1158x148, tiles 275x349
   --------------------------------------------------------- */

.container--landing { max-width: 1200px; margin: 15px auto 0; padding: 0 0 50px; }

.land-hero {
    margin: 0 21px;
    background: var(--dark);
    border-bottom: 4px solid var(--yellow);
    position: relative;
    overflow: hidden;
    text-align: left;
}
.land-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, rgba(0, 0, 0, 0) 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, rgba(0, 0, 0, 0) 1px);
    background-size: 56px 56px, 56px 56px;
}
.land-hero .bt-home-hero__inner { position: relative; padding: 14px 20px; }
.land-hero .bt-home-hero__title {
    margin: 0;
    font-family: var(--display);
    font-size: 44px; font-weight: 900; line-height: 1.2;
    letter-spacing: 0.3px; text-transform: uppercase; color: #fff;
    white-space: normal;
}

.land-finder { margin: 0 21px 32px; }
.land-finder .pf-header { height: 37px; padding: 8px 20px; font-size: 15px; }
.land-finder .pf-body { padding: 18px 20px; gap: 26px; }
.land-finder .pf-field label { text-align: left; }

.bt-section-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 20px 24px;
}
.bt-section-head h2 {
    margin: 0;
    font-family: var(--display);
    font-size: 30px; font-weight: 900;
    letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
}
.bt-section-head__sub { font-size: 15px; color: #888; white-space: nowrap; }
.bt-section-head::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #ddd;
}

.cat-subcats ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.subcat {
    flex: 0 0 275px;
    margin: 0 10px 20px;
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
}
.subcat:hover { border-color: #bbb; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.navList-action { display: flex; flex-direction: column; width: 100%; }
.subimgwrap { padding: 15px; text-align: center; }
.subimgwrap img { width: 241px; height: 241px; padding: 2px; object-fit: contain; margin: 0 auto; }
.subcat__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 15px;
    border-top: 1px solid #eee;
    min-height: 73px;
}
.subcat__foot span:first-child {
    font-size: 17px;
    line-height: 1.25;
    color: #333;
}
.subcat__chevron { color: var(--yellow); font-size: 26px; line-height: 1; font-weight: 700; }

@media (max-width: 1279px) {
    .container--landing { max-width: none; margin: 15px 20px 0; }
    .subcat { flex: 0 0 calc(33.333% - 20px); }
    .subimgwrap img { width: 100%; height: auto; max-width: 241px; }
}

@media (max-width: 767px) {
    .container--landing { margin: 0; padding: 0 0 50px; }
    .land-hero { margin: 11px 11px 0; }
    .land-hero .bt-home-hero__inner { padding: 12px 16px; }
    .land-hero .bt-home-hero__title { font-size: 26px; }
    .land-finder { margin: 0 11px 32px; }
    .land-finder .pf-body { flex-direction: column; padding: 16px; gap: 14px; }

    /* "27 Categories · 117,836 Parts" is nowrap so the count never breaks
       across the rule beside it. On a phone there is no room for the
       heading and the count on one line, so the row wraps instead and the
       count keeps its own line - it used to run 32px off the screen and
       drag a horizontal scrollbar onto the page. */
    .bt-section-head { margin: 0 20px 24px; gap: 4px 10px; flex-wrap: wrap; }
    .bt-section-head h2 { font-size: 22px; }
    .bt-section-head__sub { font-size: 13px; }
    .bt-section-head::after { flex-basis: 100%; }

    .subcat { flex: 0 0 calc(50% - 20px); margin: 0 10px 20px; }
    .subimgwrap { padding: 7px; }
    .subimgwrap img { width: 161px; height: 161px; }
    .subcat__foot { padding: 10px 12px; min-height: 56px; }
    .subcat__foot span:first-child { font-size: 14px; }
}

/* ---------------------------------------------------------
   WHATSAPP ENQUIRY (replaces price + cart)
   --------------------------------------------------------- */

.pv-whatsapp {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 26px 0 0;
    padding: 16px 24px;
    background: #25d366;
    border: 2px solid var(--ink);
    color: var(--ink);
    transition: background 0.15s;
}
.pv-whatsapp:hover { background: #1eb855; }

.pv-whatsapp__icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    position: relative;
}
/* handset + speech tail, drawn rather than loaded */
.pv-whatsapp__icon::before {
    content: "";
    position: absolute;
    left: 11px; top: 10px;
    width: 18px; height: 18px;
    border: 3px solid #25d366;
    border-radius: 50% 50% 50% 2px;
}
.pv-whatsapp__icon::after {
    content: "";
    position: absolute;
    left: 16px; top: 15px;
    width: 8px; height: 8px;
    border-right: 3px solid #25d366;
    border-bottom: 3px solid #25d366;
    transform: rotate(-45deg);
    border-radius: 0 0 3px 0;
}

.pv-whatsapp__text { display: flex; flex-direction: column; gap: 2px; }
.pv-whatsapp__lead {
    font-family: var(--display);
    font-size: 22px; font-weight: 900;
    letter-spacing: 0.5px; text-transform: uppercase;
    line-height: 1.1;
}
.pv-whatsapp__sub { font-size: 14px; font-weight: 600; }

@media (max-width: 767px) {
    .pv-whatsapp { padding: 14px 16px; gap: 12px; }
    .pv-whatsapp__lead { font-size: 18px; }
    .pv-whatsapp__sub { font-size: 13px; }
}

/* --- theme: green accents on the catalogue pages --- */
.breadcrumb-label:hover { color: var(--green); }
.cell-part a { border-bottom-color: var(--green); }
.cell-part a:hover { background: var(--green); color: #fff; }
.subcat:hover { border-color: var(--green); }
.subcat__chevron { color: var(--green); }
.ref-info__icon { border-color: var(--green); color: var(--green); }
.pv-help__btns a:hover { border-color: var(--green); background: var(--green); color: #fff; }
.rv-write:hover { background: var(--green); color: #fff; }
.rv-verified { color: var(--green); }
.pv-tick { background: var(--green); }

/* --- green surfaces on the catalogue pages --- */
.toolbar { background: var(--green-deep); }
#tableheaders th { background: var(--green-deep); }
.category-header, .product-header, .land-hero { background: #12241b; }
.land-finder .pf-header, .pf-header { background: #12241b; color: var(--yellow); }
.breadcrumb + .breadcrumb::before { color: var(--green); }

/* --- no grey on the catalogue pages --- */
.breadcrumbs-row { background: #fff; }
.breadcrumb-label { color: #16241c; }

.page, #parts-finder, #pv-topbox, #ymalwrap1, .pv-reviews, .subcat { border-color: var(--line); }
#refImg { background: #fff; }
.ref-info { background: var(--tint); border-top-color: var(--line); color: #1d3327; }
#myInput { background: #fff; color: #16241c; }

#slidetable tbody tr.productrow { border-bottom-color: var(--line); }
#slidetable tbody tr.productrow:nth-child(even) { background: var(--tint); }
#slidetable td { color: #1d3327; }
.cell-ref { color: var(--green-dark); }
.cell-img img { border-color: var(--line); background: #fff; }
.cell-img__none { color: var(--muted-tx); }

#fitsmodels { background: var(--tint); color: #16241c; }
.mm-fitment-nudge { border-bottom-color: var(--line); color: var(--muted-tx); }
.mm-nudge-icon { background: var(--green); }
.pv-cartnote { background: var(--tint); color: var(--muted-tx); }
#pv-details, .productView-images { border-color: var(--line); }
#pv-help { border-top-color: var(--line); }
#pv-help p { color: var(--muted-tx); }
.pv-help__btns a { border-color: var(--line); }
.productView-thumbnail-link { border-color: var(--line); }
.pv-list li, .pv-spec li, .pv-check li { color: #1d3327; }
.pv-h, .pv-sub, #pv-help strong, #ymalwrap1 h2, .pv-shipping h2, .bt-section-head h2 { color: #16241c; }
.pv-shipping p { color: #1d3327; }

.rv-headline, .rv-card { border-bottom-color: var(--line); }
.rv-bar__track { background: var(--tint); }
.rv-avatar { background: var(--tint); }
.rv-avatar::after { background: var(--green); box-shadow: 0 17px 0 -2px var(--green); }
.rv-bar, .rv-score__total, .rv-foot { color: var(--muted-tx); }
.rv-star { color: #bcd8c8; }
.rv-title, .rv-name { color: #16241c; }
.rv-body { color: #1d3327; }

.subcat__foot { border-top-color: var(--line); }
.subcat__foot span:first-child { color: #16241c; }
.bt-section-head__sub { color: var(--muted-tx); }
.bt-section-head::after { background: var(--line); }
.ymal-card { border-color: var(--line); }
.ymal-card__title { color: #1d3327; }
.ymal-card__part { color: var(--muted-tx); }

/* ---------- catalogue additions: stock pill, OEM list, warnings ---------- */

.subcat__count {
    font-weight: 600;
    opacity: .75;
}

.pv-stock {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 3px;
    font: 700 12px/1.4 'Archivo', sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.pv-stock--in  { background: var(--green, #1f7a34); color: #fff; }
.pv-stock--out { background: #d8d2c4; color: #333; }

.pv-oem {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.pv-oem li {
    padding: 4px 9px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 3px;
    background: #fff;
    font: 600 13px/1.3 'Archivo', sans-serif;
}

.pv-warning {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-left: 4px solid var(--yellow, #ffbe00);
    background: rgba(0, 0, 0, .04);
    font-size: 13px;
    line-height: 1.5;
}

/* remote product photos are square - keep table cells tidy */
.cell-img img { max-width: 90px; height: auto; }

/* ---------- parts table: five columns, rebalanced for catalogue data ---------- */

.cell-fits { width: 360px; }
.cell-desc { width: 470px; }
.cell-part { width: 110px; }

#slidetable .cell-desc a { color: var(--ink); font-weight: 600; }
#slidetable .cell-desc a:hover { border-bottom: 2px solid var(--yellow); }
#slidetable tbody tr.productrow { height: auto; }
#slidetable td { padding-top: 14px; padding-bottom: 14px; }

@media (max-width: 860px) {
    .cell-fits, .cell-desc, .cell-part { width: auto; }
}

/* very long part names must not push the breadcrumb onto a second line */
#bt-breadcrumbs .breadcrumb.is-active .breadcrumb-label {
    display: inline-block;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
@media (max-width: 860px) {
    #bt-breadcrumbs .breadcrumb.is-active .breadcrumb-label { max-width: 210px; }
}

/* Homepage tiles now carry category names, which run longer than brand names. */
#hp-top-brands .brand-hero-name {
    max-width: 100%;
    white-space: normal;
    text-overflow: clip;
    /* Brand names were yellow. Category names are ordinary words rather
       than marques, and yellow made them read as a promotion. */
    color: #fff;
}

/* ---------- pagination & inline sub-category chips (big catalogue) ---------- */

.pager {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 24px 0 8px; justify-content: center;
}
.pager__num, .pager__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; padding: 0 12px;
    border-radius: var(--r-sm, 6px);
    background: #fff; color: var(--ink);
    box-shadow: var(--shadow-0, 0 1px 2px rgba(7,35,26,.06));
    font: 700 14px/1 var(--body); text-decoration: none;
    transition: translate .15s, box-shadow .15s, background .15s;
}
.pager__num:hover, .pager__btn:hover {
    translate: 0 -2px; box-shadow: var(--shadow-1, 0 3px 8px rgba(7,35,26,.12));
    background: color-mix(in oklab, var(--yellow) 22%, #fff);
}
.pager__num.is-on {
    background: var(--green-deep); color: #fff;
    pointer-events: none;
}
.pager__gap { padding: 0 4px; color: #5d6b63; }

.cat-subcats--inline { margin: 0 0 16px; }
.cat-subcats--inline ul {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0; padding: 0; list-style: none;
}
.subcat--chip a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: var(--r-pill, 999px);
    background: #fff; color: var(--ink); text-decoration: none;
    box-shadow: var(--shadow-0, 0 1px 2px rgba(7,35,26,.06));
    font-weight: 600; font-size: 14px;
    transition: translate .15s, box-shadow .15s, background .15s;
}
.subcat--chip a:hover {
    translate: 0 -2px;
    box-shadow: var(--shadow-1, 0 3px 8px rgba(7,35,26,.12));
    background: color-mix(in oklab, var(--yellow) 20%, #fff);
}
.subcat--chip .subcat__count {
    padding: 2px 9px; border-radius: var(--r-pill, 999px);
    background: color-mix(in oklab, var(--green) 12%, #fff);
    color: var(--green-dark); font-size: 12px; font-weight: 800;
}

/* ---------- search results ---------- */

.search-again {
    display: flex;
    gap: 10px;
    padding: 18px 20px 0;
    flex-wrap: wrap;
}
.search-again input {
    flex: 1 1 320px;
    min-width: 0;
    padding: 13px 16px;
    border: 2px solid #ddd;
    border-radius: var(--r-sm, 6px);
    font: inherit;
    font-size: 16px;
    background: #fff;
}
.search-again input:focus {
    outline: none;
    border-color: var(--green, #1d5b3f);
}
.search-again button {
    flex: 0 0 auto;
    padding: 13px 26px;
    border: 0;
    border-radius: var(--r-sm, 6px);
    background: var(--yellow, #f5c518);
    color: var(--green-dark, #07231a);
    font-family: var(--display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .15s;
}
.search-again button:hover { filter: brightness(1.06); }

/* the index is missing - this is a setup problem, not a normal result */
.ref-info--warn {
    background: #fffbe8;
    border-top-color: #f3e2a0;
}
.ref-info--warn .ref-info__icon { border-color: #a07b00; color: #a07b00; }
.ref-info--warn code {
    background: #fff;
    border: 1px solid #e8dba6;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 13.5px;
}

@media (max-width: 560px) {
    .search-again { padding: 14px 14px 0; }
    .search-again button { width: 100%; }
}

/* ---------- watermark ----------
   Only the large image on the product page carries it. The listing
   thumbnails are 98px and the gallery thumbnails smaller still: a word
   across those reads as a grey smudge, not as a name, so they are left
   alone. The mark is sized against the image, not the figure, so it can
   never spill past the edge of the photograph. */

.productView-image { position: relative; }

.productView-image:not(.is-placeholder)::after {
    content: "ORCAPARTS";
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: min(400px, 100%);
    text-align: center;
    white-space: nowrap;

    font-family: var(--display);
    font-size: clamp(34px, 8.8vw, 68px);
    font-weight: 800;
    /* twice the size needs tighter tracking: at 68px the word then measures
       399px against a 400px photograph, so it spans it without spilling */
    letter-spacing: .02em;
    text-transform: uppercase;

    color: var(--green-dark, #07231a);
    opacity: .18;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);

    /* it sits on the photograph, never in the way of a click or a selection */
    pointer-events: none;
    user-select: none;
}

/* ---------- certificates on the About Us page ----------
   The certificate itself is the content, so each card is the scan and
   nothing else. Clicking one opens the signed PDF. */

.cert-grid {
    display: grid;
    /* four certificates sit squarest as a 2x2 block */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 18px 0 8px;
}
.cert {
    display: block;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: var(--r-sm, 6px);
    line-height: 0;
    transition: border-color .15s, box-shadow .15s, translate .15s;
}
.cert img {
    width: 100%;
    height: auto;
    display: block;
}
.cert:hover {
    border-color: var(--green, #1d5b3f);
    box-shadow: 0 6px 18px rgba(7, 35, 26, .14);
    translate: 0 -3px;
}
.cert:focus-visible {
    outline: 3px solid var(--yellow, #f5c518);
    outline-offset: 2px;
}

@media (max-width: 420px) {
    .cert-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- home page hero slider ----------
   The banners carry their own wording, so nothing is drawn over the picture
   and nothing is cropped. The frame keeps the artwork's 2:1 shape at every
   width, which is what stops the page jumping while the first image loads.
   The dots go underneath: these banners have a strip of contact details
   along their bottom edge that dots on top would cover. */

.hero-slider { margin: 0 0 18px; }

.hero-slider__frame {
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: var(--green-deep, #07231a);
    border-radius: var(--r-md, 10px);
    touch-action: pan-y;
}

.hero-slider__track { position: absolute; inset: 0; }

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .55s ease;
    pointer-events: none;
}
.hero-slide.is-on { opacity: 1; pointer-events: auto; }

.hero-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* arrows - only while the pointer is on the picture */
.hero-slider__arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
    width: 44px; height: 44px;
    display: grid; place-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(7, 35, 26, .55);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, background .2s;
}
.hero-slider__frame:hover .hero-slider__arrow,
.hero-slider__arrow:focus-visible { opacity: 1; }
.hero-slider__arrow:hover { background: rgba(7, 35, 26, .8); }
.hero-slider__arrow--prev { left: 12px; }
.hero-slider__arrow--next { right: 12px; }

/* dots */
.hero-slider__dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    padding: 12px 0 2px;
}
.hero-slider__dot {
    width: 10px; height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(7, 35, 26, .25);
    cursor: pointer;
    transition: background .2s, width .2s;
}
.hero-slider__dot:hover { background: rgba(7, 35, 26, .45); }
.hero-slider__dot.is-on {
    width: 26px;
    border-radius: 99px;
    background: var(--green, #1f8a4c);
}

/* On a phone the arrows sit where a thumb swipes, so they go. The dots stay
   and are given a tap target larger than they look. */
@media (max-width: 760px) {
    .hero-slider { margin-bottom: 14px; }
    .hero-slider__frame { border-radius: var(--r-sm, 6px); }
    .hero-slider__arrow { display: none; }
    .hero-slider__dots { gap: 4px; padding: 10px 0 2px; }
    .hero-slider__dot {
        width: 8px; height: 8px;
        border: 6px solid transparent;
        background-clip: padding-box;
        box-sizing: content-box;
    }
    .hero-slider__dot.is-on { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}

/* Below 767px the main photograph drops to 280px, so the mark has to come
   down with it - otherwise the word is wider than the picture it sits on. */
@media (max-width: 767px) {
    .productView-image:not(.is-placeholder)::after {
        width: min(280px, 100%);
        font-size: clamp(24px, 12vw, 47px);
    }
}

/* ---------- Jump to Category: the button that runs the search ---------- */

.pf-field--go {
    flex: 0 0 auto;
    justify-content: flex-end;
}
#pf-go {
    height: 44px;
    padding: 0 26px;
    border: 0;
    background: var(--green, #1f8a4c);
    color: #fff;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
}
#pf-go:hover:not(:disabled) { background: var(--green-dark, #166b3a); }
#pf-go:disabled {
    background: #e2e2e2;
    color: #999;
    cursor: default;
}

@media (max-width: 767px) {
    .pf-field--go { justify-content: stretch; }
    #pf-go { width: 100%; }
}

/* ---------- mobile menu: the site links under the system links ----------
   The top bar is hidden on a phone, so About Us, Blog, Contact and the
   account links have no other way in. They are the same list style, set
   apart by a rule and a slightly quieter colour so the browse links stay
   the first thing you see. */

.navPages-list--site {
    margin-top: 2px;
    border-top: 2px solid var(--yellow, #ffbe00);
}
.navPages-list--site .navPages-item a {
    color: color-mix(in oklab, #fff 78%, var(--green, #1f8a4c));
    font-size: 15px;
}
.navPages-list--site .navPages-item a:hover { color: #fff; }

/* ---------------------------------------------------------------------
   Category tiles carry the same mark as the product photograph.

   The tile is a third the size of the product image, so a fixed size
   would either disappear or run off the edge. cqw measures against the
   tile itself: the word lands at the same proportion of the picture on
   a desktop grid, a tablet and a phone alike.

   :has(img) keeps it off the tiles that have no picture - a mark
   floating on an empty grey panel reads as a broken image, not as a
   watermark.
   --------------------------------------------------------------------- */

.subimgwrap { position: relative; container-type: inline-size; }

.subimgwrap:has(img)::after {
    content: "ORCAPARTS";
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: 100%;
    text-align: center;
    white-space: nowrap;

    font-family: var(--display);
    /* The tile keeps a fixed 15px padding as it shrinks, so the picture
       loses width faster than the tile does. 13.5% of the tile leaves
       the word inside the photograph at every size the grid produces;
       15% already spilled past it on a mid-width tile. */
    font-size: 13.5cqw;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;

    color: var(--green-dark, #07231a);
    opacity: .18;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);

    pointer-events: none;
    user-select: none;
}

/* ---------------------------------------------------------------------
   Phone number beside the footer band's buttons.

   It sits on the same row and matches their height, but it is not a
   button: the number itself is the thing worth reading, so it is set
   larger and carries no fill that would make it compete with "Meet the
   Team" next to it.
   --------------------------------------------------------------------- */

.bt-anniv__phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 4px;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--yellow);
    white-space: nowrap;
}
.bt-anniv__phone:hover { color: #fff; }
.bt-anniv__phone .fa { font-size: 15px; opacity: .8; }

@media (max-width: 767px) {
    .bt-anniv__phone { width: 100%; justify-content: center; font-size: 22px; }
}

/* ---------------------------------------------------------------------
   Search results as photographs
   --------------------------------------------------------------------- */

.res-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    margin: 18px 0 6px;
}

.res-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(7, 35, 26, .10);
    border-radius: var(--r-md, 10px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: translate .18s, box-shadow .18s, border-color .18s;
}
.res-card:hover {
    translate: 0 -4px;
    border-color: rgba(7, 35, 26, .2);
    box-shadow: var(--shadow-2, 0 12px 28px rgba(7, 35, 26, .16));
}

.res-card__shot {
    display: block;
    aspect-ratio: 1;
    background: linear-gradient(180deg, #fff, #f3f6f3);
    border-bottom: 1px solid rgba(7, 35, 26, .07);
}
.res-card__shot img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

.res-card__body { padding: 11px 13px 14px; display: flex; flex-direction: column; gap: 5px; }

.res-card__name {
    font-size: 14px;
    line-height: 1.38;
    /* three lines is enough to tell two similar parts apart; more and the
       cards stop lining up */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.res-card__part {
    font-family: var(--display, sans-serif);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--green, #1f8a4c);
}

@media (max-width: 600px) {
    .res-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .res-card__name { font-size: 13px; -webkit-line-clamp: 2; }
}

/* ---------------------------------------------------------------------
   Photo suggestions under the header search box
   --------------------------------------------------------------------- */

#header-search { position: relative; }

.sugg {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border-radius: var(--r-md, 10px);
    box-shadow: 0 18px 44px rgba(7, 35, 26, .22);
    padding: 12px;
    max-height: 70vh;
    overflow: auto;
}

.sugg__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 10px;
}

.sugg__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-radius: var(--r-sm, 6px);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.sugg__card:hover { background: color-mix(in oklab, var(--green, #1f8a4c) 9%, #fff); }

.sugg__shot {
    display: block;
    aspect-ratio: 1;
    background: #f3f6f3;
    border-radius: var(--r-sm, 6px);
    overflow: hidden;
}
.sugg__shot img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.sugg__name {
    font-size: 12.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sugg__part { font-size: 11.5px; font-weight: 700; color: var(--green, #1f8a4c); }

.sugg__more {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(7, 35, 26, .1);
    text-align: center;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--green, #1f8a4c);
    text-decoration: none;
}
.sugg__more:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .sugg__grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

@media (max-width: 767px) {
    /* The search box is a fixed 281px on a phone, so a panel matching its
       width would show two cramped columns. It starts at the left edge of
       the screen, so the panel grows rightwards from there and is capped
       against the viewport - measured at 390px the old version anchored
       to the box's right edge and started 78px off-screen to the left.

       The height comes down too: the on-screen keyboard is open while you
       are typing, and a 70vh panel would put half the photographs behind
       it. */
    .sugg {
        left: 0;
        right: auto;
        width: calc(100vw - 12px);
        max-width: 460px;
        max-height: 46vh;
        padding: 10px;
    }
}