@charset "UTF-8";
/* ============================================================================
   COUNTER — storefront UI layer
   Loaded late in the ~/css bundle so it sits on top of bootstrap, style.css and
   the theme accent file. Header, drawer and tab bar live in Content/chrome.css,
   which loads after this file.

   Mobile first. The base rules describe a phone; min-width blocks scale up to
   tablet and desktop. The existing markup is saturated with inline styles and
   per-view <style> blocks, so !important is used the same way
   Content/Themes/*.css already does.

   Delete the bundle lines in App_Start/BundleConfig.cs to revert everything.
   ========================================================================= */

:root {
    --ink: #12161b;          /* chrome, primary buttons, headings */
    --ink-soft: #2a313b;     /* raised chrome */
    --ink-mute: #6b7480;     /* secondary type */
    --paper: #ffffff;        /* surfaces */
    --ground: #edeff1;       /* page ground - keeps product shots forward */
    --price: #d22b2b;        /* money. type only, never a fill */
    --stock: #0e7a5f;        /* availability. dot + micro label only */
    --line: #dce0e4;         /* hairlines */
    --focus: #2f6df6;

    --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
    --display: "Archivo", "IBM Plex Sans", -apple-system, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Touch surfaces get a real radius so the catalogue reads as a shop, not
       a spreadsheet. */
    --r: 12px;
    --r-sm: 8px;
    --lift: 0 1px 2px rgba(18,22,27,.05), 0 4px 14px rgba(18,22,27,.05);
}

/* ---------------------------------------------------------------- base --- */

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--ground) !important;
    color: var(--ink) !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(18,22,27,.06);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, .product-title, .new_title h2 {
    font-family: var(--display) !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
}

a { color: var(--ink); }
a:hover, a:focus { color: var(--price); text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: 2px !important;
}

img { max-width: 100%; }

/* Numbers are data: mono + tabular everywhere they appear. */
.h-p-price, .old-price, .rp-price, .rp-old-price,
.listing-price, .txtQty, .cart-price, .cart-total,
#nav-cart-count, .price-text {
    font-family: var(--mono) !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
}

/* .container sits inside .container11, so both padding sets stacked up and ate
   roughly a fifth of a 390px screen. The inner one owns the gutter. */
.container { padding-left: 12px !important; padding-right: 12px !important; }
.container11 { padding-left: 0 !important; padding-right: 0 !important; }

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

.btn {
    font-family: var(--sans) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: .01em !important;
    border-radius: var(--r-sm) !important;
    padding: 11px 18px !important;
    min-height: 44px;          /* thumb-sized by default */
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease;
}

.btn-primary, .btn-add-to-cart, .btn-filter-price {
    background: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-add-to-cart:hover, .btn-filter-price:hover {
    background: var(--ink-soft) !important;
    border-color: var(--ink-soft) !important;
}

.btn-default {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
}
.btn-default:hover { border-color: var(--ink) !important; background: var(--paper) !important; }

.btn-warning {
    background: var(--paper) !important;
    border: 1px solid var(--ink) !important;
    color: var(--ink) !important;
}
.btn-warning:hover { background: var(--ink) !important; color: #fff !important; }

/* --------------------------------------------------------- section head --- */

.new_title {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 22px 0 10px 0 !important;
    text-align: left !important;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.new_title h2 {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ink) !important;
    background: transparent !important;
}
.new_title .view-more {
    position: static !important;
    top: auto !important;
    right: auto !important;
    float: none !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-mute) !important;
    white-space: nowrap;
}

.homepage-section-container-slick {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    /* Cards carry their own gutter; pull the rail back to the page edge. */
    margin: 0 -4px !important;
}
.homepage-section-container { padding-bottom: 0 !important; }

/* The hero carousel was suppressed on phones by app-view.css. It is the first
   thing a shopper should see, so it comes back - and edge to edge, since the
   container padding and the slide padding together cropped it to 80% width. */
.cat-slider-container {
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 14px;
}
.home-slider .slick-list { border-radius: 0 !important; }
.home-slider .slick-slide,
.home-slider .grid-item { padding: 0 !important; margin: 0 !important; }
.home-slider img { width: 100%; height: auto; display: block; }

/* Carousel arrows are a mouse affordance; a thumb swipes. */
.slider .slick-prev, .slider .slick-next,
.related-product-slider .slick-prev, .related-product-slider .slick-next {
    display: none !important;
}

/* ---------------------------------------------------------------- card --- */
/* Two up on a phone, scaling to six on a wide screen. Each tile is a single
   surface with one product link and one cart action. */

#homepage-item-container_featuredItems,
#search-item-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    float: none !important;
}

/* The featured container carries Bootstrap's .clearfix, whose :before/:after
   are generated boxes - and a generated box on a grid container becomes a grid
   ITEM. That silently ate the first cell (and one at the end), pushing the
   whole first row out of step. The float they were clearing is gone anyway. */
#homepage-item-container_featuredItems::before,
#homepage-item-container_featuredItems::after,
#search-item-container::before,
#search-item-container::after {
    display: none !important;
}

/* Index.js empties the skeleton with $('.grid-item', container).remove(), which
   leaves the wrapping .dummy-item-loader behind - holding a cell of its own.
   It cannot be matched with :empty either, because the markup's whitespace text
   nodes survive the removal. display:contents drops the wrapper from the box
   tree entirely: the skeleton tiles still lay out in the grid while loading,
   and the emptied wrapper occupies nothing afterwards. */
#homepage-item-container_featuredItems > .dummy-item-loader,
#search-item-container > .dummy-item-loader {
    display: contents;
}

/* Defeat the percentage widths set in style1.css and the per-view <style>
   blocks; grid owns the track sizing now. */
.homepage-section-container .grid-item,
#search-item-container .grid-item,
.dummy-item-loader .grid-item {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Slider tiles are sized inline by slick, so they only need the gutter. */
.homepage-section-container-slick .grid-item { padding: 0 4px !important; }

.grid-item {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
}

/* The outer surface is .div-item-container in the carousels and the bare
   .item-link-container in the grids, so both get the box. */
.div-item-container,
.homepage-section-container .item-link-container {
    display: block;
    height: 100%;
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: box-shadow .16s ease, border-color .16s ease;
}
.div-item-container .item-link-container {
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
}
.item-link-container { display: block; color: inherit !important; }

.grid-item-image {
    padding: 12px !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper) !important;
    text-align: center;
}
.grid-item-image img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    /* Product shots are shot on white; multiply drops the seam. */
    mix-blend-mode: multiply;
    transition: transform .22s ease;
}

/* Title spans the card; price and the cart action share the line beneath it.
   Grid rather than flex because the title has to span both tracks. */
.grid-item-info {
    padding: 0 10px 10px 10px !important;
    text-align: left !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title title"
        "price cart";
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
}
.grid-item-info > .h-p-title { grid-area: title; }
.grid-item-info > .price-line { grid-area: price; }
.grid-item-info > div.center { grid-area: cart; }

/* Names wrap to two lines instead of truncating mid-word. The selector matches
   .grid-item-info > .h-p-title in style1.css, which clamps to a single line -
   equal specificity plus a later position wins. */
.grid-item-info > .h-p-title,
.h-p-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-align: left !important;
    font-family: var(--sans) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--ink) !important;
    height: 38px !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
    text-overflow: clip !important;
}

/* Signature: the price line, set like the label on a phone box. The current
   price leads and the struck original follows, so the number that matters is
   the one the eye reaches first on a narrow card. */
.grid-item-info .center { text-align: left !important; }

.price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    min-width: 0;
    line-height: 1.2;
}
.price-line .h-p-price { order: 1; }
.price-line .old-price { order: 2; margin-right: 0 !important; }

.grid-item-info .h-p-price,
.h-p-price {
    color: var(--price) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    display: inline-block !important;
    float: none !important;
    line-height: 1.3 !important;
}
.grid-item-info .old-price,
.old-price {
    color: var(--ink-mute) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    margin-right: 6px !important;
    display: inline-block !important;
}
/* Empty when a product has no discount - do not leave a gap behind. */
.old-price:empty { display: none !important; }

/* The legacy .item-basket carried position:relative/top:12px and a box of its
   own, which pushed the button below the stepper. */
.grid-item-info > div.center {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px;
    margin-top: 0;
    min-height: 38px;
}

/* Choosing a quantity is the job of the product page and the cart. On a tile
   this narrow the stepper only steals the room the price needs. */
.btn-qty-container { display: none !important; }

/* The button surface is the wrapper, never the <img>. Inverting the glyph to
   sit on ink means inverting the element it lives on, and an <img> carrying its
   own background would invert that too - which is why this is split in two. */
.item-basket {
    position: static !important;
    top: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 38px;
    border-radius: 999px;
    background: var(--ink) !important;
    cursor: pointer;
    transition: transform .1s ease;
}
.item-basket:active { transform: translateY(1px); }
.item-basket .h-cart {
    height: 18px !important;
    width: 18px !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    /* Beats the inline float:right in the tile templates. */
    float: none !important;
    cursor: pointer;
    /* The glyph ships as a dark PNG on transparent, so it is inverted to read
       white against the ink fill. */
    filter: invert(1) brightness(3);
}

/* ---------------------------------------------------------- product page --- */

.prod-sec-container {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    padding: 14px !important;
}

.product-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* The gallery is fixed at 488px tall in the markup; on a phone that is taller
   than the viewport. */
.product-thumb { height: auto !important; aspect-ratio: 1 / 1; }
.slider-nav-thumbnails { margin-top: 8px; }

/* SKU reads as what it is: a label off the box. */
.prod-sec-container span[style*="font-size:15px"],
.prod-sec-container span[style*="font-size: 15px"] {
    font-family: var(--mono) !important;
    font-size: 13px !important;
    color: var(--ink-mute) !important;
    letter-spacing: .02em;
}

#product-unit-price { font-family: var(--mono) !important; color: var(--price) !important; }

.tabs {
    border-bottom: 1px solid var(--line) !important;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs li { border: 0 !important; background: transparent !important; }
.tabs li a {
    font-family: var(--display) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--ink-mute) !important;
    padding: 14px 2px !important;
    margin-right: 18px !important;
    white-space: nowrap;
}
.tabs li.active {
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: inset 0 -2px 0 var(--ink);
}
.tabs li.active a { color: var(--ink) !important; }

.tab_container {
    border: 1px solid var(--line) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--r) var(--r) !important;
    padding: 14px !important;
}

#product-description { font-size: 15px !important; line-height: 1.65 !important; color: #333a42 !important; }
#product-description ul { padding-left: 20px; margin: 10px 0; }
#product-description li { margin-bottom: 4px; }

.rp-price { color: var(--price) !important; font-weight: 600 !important; }
.rp-old-price { color: var(--ink-mute) !important; }
.rp-info-title { font-size: 14px !important; font-weight: 500 !important;
                 line-height: 1.45 !important; height: 42px !important; }

/* Docked buy bar, injected by store-chrome.js on the product page. Price left,
   the one action right, sitting on top of the tab bar. */
.sf-buybar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 1034;
    padding: 10px 12px;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(18,22,27,.06);
}
.sf-buybar-price { flex: 0 0 auto; min-width: 0; }
.sf-buybar-price small {
    display: block;
    font-size: 10.5px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.sf-buybar-price span {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 600;
    color: var(--price);
    white-space: nowrap;
}
.sf-buybar .btn { flex: 1 1 auto; height: 46px; font-size: 15px !important; }

/* ----------------------------------------------------------- search page --- */

.refine-search-container, .filter-container {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
}
.filter-container { border: 0 !important; border-bottom: 1px solid var(--line) !important; }
.filter-container:last-child { border-bottom: 0 !important; }

/* Collapsed behind the injected trigger on mobile so results start at the top
   of the screen instead of below a stack of filters. */
.refine-search-container { display: none; margin-bottom: 12px; }
.refine-search-container.is-open { display: block; }

.sf-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
}
.sf-filter-btn svg {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.sf-filter-btn[aria-expanded="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.filter-header {
    background: transparent !important;
    border-bottom: 1px solid var(--line) !important;
    font-family: var(--display) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .09em !important;
    color: var(--ink) !important;
    padding: 12px 14px !important;
}

.filter-price-input {
    font-family: var(--mono) !important;
    font-size: 16px !important;   /* 16px stops iOS zooming on focus */
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm) !important;
    height: 42px !important;
    padding: 0 10px !important;
}
.filter-price-input:focus { border-color: var(--ink) !important; outline: none; }

.btn-filter-price {
    border-radius: var(--r-sm) !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    cursor: pointer;
}

.show-result { padding: 0 !important; }

.no-record-found {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    padding: 48px 20px !important;
    text-align: center !important;
}

.pagination-container {
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
}
.pagination > li > a, .pagination > li > span {
    font-family: var(--mono) !important;
    font-size: 13px !important;
    padding: 9px 14px !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}
.pagination > .active > a, .pagination > .active > a:hover {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------- tables --- */

table.table > thead > tr > th {
    font-family: var(--display) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: var(--ink-mute) !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 12px 14px !important;
}
table.table > tbody > tr > td {
    border-top: 1px solid var(--line) !important;
    padding: 14px !important;
    vertical-align: middle !important;
}

/* ------------------------------------------------------------ cart page --- */

.cart-container, .cart-summary, .tbl-shopping-cart-items { background: var(--paper) !important; }

/* A six-column table does not survive a 360px screen. Each row becomes a card:
   thumbnail left, name and price stacked beside it, quantity under the price,
   remove pinned to the far corner. Column meaning is carried by position, so
   the header row is dropped. The markup is built as an HTML string in
   ShoppingCart.js, hence the nth-child addressing. */
.shopping-cart-container {
    width: auto !important;
    overflow: visible !important;
    border: 0 !important;
}
.tbl-shopping-cart-items { width: 100%; display: block; background: transparent !important; }
.tbl-shopping-cart-items tbody { display: block; }
.tbl-shopping-cart-items .shopping-cart-header { display: none !important; }

.tbl-shopping-cart-items > tbody > tr,
.tbl-shopping-cart-items > tr {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas:
        "img name  remove"
        "img price qty";
    align-items: start;
    column-gap: 12px;
    row-gap: 6px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.tbl-shopping-cart-items > tbody > tr > td,
.tbl-shopping-cart-items > tr > td {
    display: block;
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
.tbl-shopping-cart-items > tbody > tr > td:nth-child(1),
.tbl-shopping-cart-items > tr > td:nth-child(1) { grid-area: img; }
.tbl-shopping-cart-items > tbody > tr > td:nth-child(1) img,
.tbl-shopping-cart-items > tr > td:nth-child(1) img {
    width: 76px; height: 76px;
    object-fit: contain;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    mix-blend-mode: multiply;
}
.tbl-shopping-cart-items > tbody > tr > td:nth-child(2),
.tbl-shopping-cart-items > tr > td:nth-child(2) {
    grid-area: name;
    font-size: 14px;
    line-height: 1.4;
}
.tbl-shopping-cart-items > tbody > tr > td:nth-child(3),
.tbl-shopping-cart-items > tr > td:nth-child(3) {
    grid-area: price;
    align-self: end;
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--price);
}
.tbl-shopping-cart-items > tbody > tr > td:nth-child(4),
.tbl-shopping-cart-items > tr > td:nth-child(4) { grid-area: qty; align-self: end; }
.tbl-shopping-cart-items > tbody > tr > td:nth-child(4) input,
.tbl-shopping-cart-items > tr > td:nth-child(4) input {
    width: 64px !important;
    height: 40px;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm);
    text-align: center;
    font-family: var(--mono);
    font-size: 16px;
}
/* Line total is price x quantity, both already on the card. */
.tbl-shopping-cart-items > tbody > tr > td:nth-child(5),
.tbl-shopping-cart-items > tr > td:nth-child(5) { display: none; }
.tbl-shopping-cart-items > tbody > tr > td:nth-child(6),
.tbl-shopping-cart-items > tr > td:nth-child(6) { grid-area: remove; justify-self: end; }
.tbl-shopping-cart-items > tbody > tr > td:nth-child(6) img,
.tbl-shopping-cart-items > tr > td:nth-child(6) img {
    width: 15px; height: 15px;
    opacity: .45;
}

/* The summary rows in the same table are label/amount pairs, not product rows,
   so they opt out of the card grid. */
.tbl-shopping-cart-items > tbody > tr.summary-row,
.tbl-shopping-cart-items > tr.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    background: var(--paper);
}

.shopping-cart-buttons {
    background: var(--paper) !important;
    border-color: var(--line) !important;
    border-radius: var(--r);
    padding: 12px !important;
    display: flex;
    gap: 8px;
}
.shopping-cart-buttons .btn { flex: 1 1 0; margin: 0 !important; float: none !important; }

.tbl-checkout-total { width: 100%; }
.tbl-checkout-total td { padding: 7px 0 !important; }

/* The order total is money, so it follows the money rule: red type, no fill. */
.checkout-total-row td {
    color: var(--price) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    border-top: 1px solid var(--line) !important;
    padding-top: 12px !important;
}
.checkout-total-row td:first-child {
    font-family: var(--display) !important;
    color: var(--ink) !important;
    font-size: 15px !important;
    text-transform: uppercase;
    letter-spacing: .06em;
}
#checkout-grandTotal, #checkout-subTotal, #checkout-vatAmount, #checkout-shippingAmount {
    font-family: var(--mono) !important;
    font-variant-numeric: tabular-nums !important;
}

#btnPlaceOrder, #btnCheckout { height: 52px; font-size: 16px !important; }

.customer-address, #div-payment-option {
    border-radius: var(--r) !important;
    border-color: var(--line) !important;
}

/* Empty cart is an invitation, not a bare table. */
.cart-empty {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r);
    padding: 48px 20px;
    text-align: center;
}
.cart-empty h3 { font-size: 19px !important; font-weight: 700 !important; margin: 0 0 6px 0 !important; }
.cart-empty p { color: var(--ink-mute); margin-bottom: 20px; font-size: 14px; }

/* --------------------------------------------------------------- forms --- */

.form-control {
    height: 46px !important;
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    /* 16px stops iOS zooming the viewport when a field takes focus. */
    font-size: 16px !important;
    color: var(--ink) !important;
}
textarea.form-control { height: auto !important; padding-top: 10px !important; }
.form-control:focus { border-color: var(--ink) !important; box-shadow: none !important; }

.login-form, .register-form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 20px;
}

/* -------------------------------------------------------------- footer --- */

.footer-bottom { font-size: 14px; }
.footer-bottom .footer-header {
    font-family: var(--display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 10px;
}
.footer-ul li { padding: 3px 0; font-size: 13.5px; }

/* ---------------------------------------------------------------- misc --- */

/* Availability: the only place green appears. */
.stock-dot {
    display: inline-block;
    height: 6px;
    width: 6px;
    border-radius: 999px;
    background: var(--stock);
    margin-right: 6px;
    vertical-align: 1px;
}
.stock-label {
    font-family: var(--mono) !important;
    font-size: 12px !important;
    letter-spacing: .04em;
    color: var(--stock) !important;
    text-transform: uppercase;
}

/* Blinking text is not a design device; an offer is a price signal. */
.blink_me {
    color: var(--price) !important;
    font-weight: 600 !important;
    animation: none !important;
    text-decoration: none !important;
}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (min-width: 600px) {
    .container { padding-left: 16px !important; padding-right: 16px !important; }
    .cat-slider-container { padding-left: 16px !important; padding-right: 16px !important; }
    .home-slider .slick-list { border-radius: var(--r-sm) !important; }

    #homepage-item-container_featuredItems,
    #search-item-container { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

    .prod-sec-container { padding: 20px !important; }
    .product-title { font-size: 24px !important; }
    .new_title { margin-top: 28px !important; }
}

/* ==========================================================================
   DESKTOP — the buy bar and filter sheet retire; hover states come back.
   ========================================================================== */
@media (min-width: 992px) {

    body { font-size: 15px !important; }

    #homepage-item-container_featuredItems,
    #search-item-container { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

    /* Cards lift on hover now that there is a pointer to do it with. */
    .div-item-container:hover,
    .homepage-section-container .item-link-container:hover {
        border-color: #c6ccd2 !important;
        box-shadow: var(--lift) !important;
    }
    .grid-item:hover .grid-item-image img { transform: scale(1.035); }

    .grid-item-info { padding: 0 14px 14px 14px !important; }
    .grid-item-info > .h-p-title, .h-p-title {
        font-size: 14px !important;
        line-height: 1.45 !important;
        height: 41px !important;
        margin-bottom: 6px !important;
    }
    .grid-item-info .h-p-price, .h-p-price { font-size: 17px !important; }
    .old-price { font-size: 13px !important; }
    .grid-item-image { padding: 18px 16px !important; }

    /* The quantity stepper earns its place back on a wide tile. */
    .btn-qty-container {
        display: inline-flex !important;
        border: 1px solid var(--line) !important;
        border-radius: var(--r-sm);
        overflow: hidden;
        float: none !important;
        margin: 0 !important;
    }
    .btn-qty-container .btn-minus,
    .btn-qty-container .btn-plus {
        background: var(--paper) !important;
        border: 0 !important;
        color: var(--ink-mute) !important;
        height: 32px !important;
        width: 28px !important;
        min-height: 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 30px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .btn-qty-container .btn-minus:hover,
    .btn-qty-container .btn-plus:hover { background: var(--ground) !important; color: var(--ink) !important; }
    .btn-qty-container .txtQty {
        background: var(--paper) !important;
        border: 0 !important;
        border-left: 1px solid var(--line) !important;
        border-right: 1px solid var(--line) !important;
        height: 32px !important;
        width: 36px !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--ink) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Wide tiles have room for the stepper again, so the price takes its own
       line and the row below holds the stepper and the cart button together
       (both live inside .center). */
    .grid-item-info {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "price"
            "cart";
        row-gap: 6px;
    }
    .grid-item-info > div.center { justify-content: space-between !important; }

    .item-basket {
        height: 36px;
        width: 44px;
        border-radius: var(--r-sm);
        background: var(--paper) !important;
        border: 1px solid var(--ink) !important;
    }
    .item-basket:hover { background: var(--ground) !important; }
    .item-basket .h-cart { filter: none; }

    /* Section rule returns as a wide-screen device. */
    .new_title {
        border-top: 2px solid var(--ink) !important;
        margin: 34px 0 0 0 !important;
        align-items: center;
    }
    .new_title h2 { font-size: 16px !important; padding: 12px 0 14px 0 !important; }
    .new_title .view-more { padding-top: 2px; }

    .homepage-section-container-slick {
        background: var(--paper) !important;
        border: 1px solid var(--line) !important;
        border-top: 0 !important;
        border-radius: 0 0 var(--r) var(--r) !important;
        padding: 14px 10px !important;
        margin: 0 !important;
    }

    /* Carousel arrows as square ink chips. */
    .slider .slick-prev, .slider .slick-next {
        display: block !important;
        background: var(--ink) !important;
        border-radius: var(--r-sm) !important;
        height: 44px !important;
        width: 30px !important;
        opacity: .92;
    }
    .slider .slick-prev:hover, .slider .slick-next:hover { background: var(--price) !important; opacity: 1; }
    .slider .slick-prev:before, .slider .slick-next:before {
        color: #fff !important;
        font-size: 19px !important;
        line-height: 2.4 !important;
    }

    /* The related-product carousel supplies its arrows as black <img> chevrons
       (Details.js) instead of the :before glyph the other sliders use, so the
       ink chip above would leave them black-on-black. A filter would invert the
       chip along with the glyph, so this variant keeps the chevron and lightens
       the chip. */
    .related-product-slider .slick-prev,
    .related-product-slider .slick-next {
        display: block !important;
        background: var(--paper) !important;
        border: 1px solid var(--ink) !important;
        border-radius: var(--r-sm) !important;
        padding: 12px !important;
        height: 44px !important;
        width: 30px !important;
        object-fit: contain;
        opacity: 1;
    }
    .related-product-slider .slick-prev:hover,
    .related-product-slider .slick-next:hover { background: var(--ground) !important; }
    .related-product-slider .slick-prev.slick-disabled,
    .related-product-slider .slick-next.slick-disabled { opacity: .35; }

    /* Product page: two columns, a taller gallery, no docked bar. */
    .sf-buybar { display: none !important; }
    .prod-sec-container { padding: 28px !important; }
    .product-title { font-size: 28px !important; }
    .product-thumb { aspect-ratio: auto; height: 488px !important; }
    .tabs li a { margin-right: 26px !important; }
    .tab_container { padding: 20px !important; }

    /* Search page: the refine column is always open and the trigger retires. */
    .sf-filter-btn { display: none !important; }
    .refine-search-container { display: block !important; }

    /* Cart returns to a table; the card grid was a small-screen affordance. */
    .tbl-shopping-cart-items { display: table; }
    .tbl-shopping-cart-items tbody { display: table-row-group; }
    .tbl-shopping-cart-items .shopping-cart-header { display: table-row !important; }
    .tbl-shopping-cart-items .shopping-cart-header td {
        font-family: var(--display) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: .08em !important;
        color: var(--ink-mute) !important;
        border-bottom: 1px solid var(--line) !important;
        padding: 12px 14px !important;
    }
    .tbl-shopping-cart-items > tbody > tr,
    .tbl-shopping-cart-items > tr {
        display: table-row;
        grid-template-areas: none;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
    }
    .tbl-shopping-cart-items > tbody > tr > td,
    .tbl-shopping-cart-items > tr > td {
        display: table-cell;
        border-top: 1px solid var(--line) !important;
        padding: 14px !important;
        vertical-align: middle !important;
    }
    .tbl-shopping-cart-items > tbody > tr > td:nth-child(5),
    .tbl-shopping-cart-items > tr > td:nth-child(5) {
        display: table-cell;
        font-family: var(--mono);
        font-weight: 600;
    }
    .tbl-shopping-cart-items > tbody > tr > td:nth-child(1) img,
    .tbl-shopping-cart-items > tr > td:nth-child(1) img {
        width: 64px; height: 64px;
    }
    .tbl-shopping-cart-items > tbody > tr.summary-row,
    .tbl-shopping-cart-items > tr.summary-row { display: table-row; }

    .shopping-cart-buttons { display: block; }
    .shopping-cart-buttons .btn { flex: none; }

    /* The order summary follows you down a long cart. */
    .cart-summary-sticky { position: sticky; top: 130px; }
}

@media (min-width: 1200px) {
    #homepage-item-container_featuredItems,
    #search-item-container { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .grid-item:hover .grid-item-image img { transform: none; }
}