/**
 * Atomic Shop — WooCommerce styled for atomicdemolishers.com.
 *
 * Design brief: a working catalogue, in the Amazon mould — plain, dense,
 * legible, and almost colourless. Someone comparing eleven second-hand doors
 * wants to read them, not admire them.
 *
 * The rules that follow from that:
 *
 *   1. FOUR COLOURS ON THE PAGE, and no more. Ink for text, paper for
 *      surfaces, hairlines for structure, and brand red for exactly one job:
 *      things you can act on (buttons, the active tab, the current page) and
 *      focus rings. Green appears once, as the words "in stock". Everything
 *      else is neutral. An accent used everywhere is an accent nowhere.
 *   2. NO DECORATION. No accent rules under headings, no uppercase micro-type
 *      with wide tracking, no tinted panels, no drop shadows, no gradients.
 *      Each of those was tried and removed — they read as designed, and
 *      designed is slower to scan.
 *   3. NO MOVEMENT ON THE GRID. Cards do not lift and photographs do not
 *      zoom on hover; only the title changes colour. Animation is fine on a
 *      landing page and a nuisance on a page of twenty results.
 *   4. TYPE DOES THE HIERARCHY. Titles are regular weight, prices are bold,
 *      labels are sentence case. Size and weight carry the structure so that
 *      colour doesn't have to.
 *
 * Colours derive from the site's own Divi settings (option `et_divi`):
 * accent #d72926, secondary #fceb35, black nav/footer. Neutrals are warmed
 * very slightly toward that red rather than being pure greys, so the page
 * reads as one family rather than a stock template. Type is Open Sans,
 * inherited from Divi and never re-declared here.
 *
 * Scoped to body.atomic-shop, added by the plugin on shop views only.
 */

body.atomic-shop {
    /* Ink & neutrals — warm, never pure black or pure grey */
    --a-ink:        #241f1d;
    --a-ink-soft:   #4d4541;
    --a-muted:      #7a716c;
    --a-line:       #e8e3df;
    --a-line-firm:  #d9d2cc;
    --a-paper:      #faf8f6;

    /* The one accent, and its quietest tint */
    --a-red:        #d72926;
    --a-red-deep:   #b01f1d;
    --a-red-wash:   #fdf2f1;

    /* Divi's nav link yellow — used only in the red header bar */
    --a-yellow:     #fceb35;

    /* Radius system: small and unshowy — a border radius should be a
       courtesy, not a style statement. */
    --a-r-sm:       4px;
    --a-r-md:       6px;
    --a-r-full:     999px;

    /* The only non-neutral besides the accent: in-stock text. Everything
       else on the page is ink, paper or red. */
    --a-green:      #2e7d32;

    /* Motion: ease-out for entrances, never linear */
    --a-fast:       150ms;
    --a-base:       250ms;
    --a-ease:       cubic-bezier(.16, 1, .3, 1);

    /* Elevation: layered and soft, never one hard drop */
    --a-lift:       0 1px 2px rgba(36, 31, 29, .04), 0 10px 30px -12px rgba(36, 31, 29, .18);
}

/* ---------------------------------------------------------------------------
   1. Layout — no sidebar on shop views, content runs the full container width.
   --------------------------------------------------------------------------- */

body.atomic-shop #sidebar {
    display: none !important;
}

body.atomic-shop #left-area {
    width: 100% !important;
    float: none !important;
    padding-right: 0 !important;
}

/* Divi draws the sidebar separator as a :before on the container */
body.atomic-shop.et_right_sidebar #main-content .container:before,
body.atomic-shop.et_left_sidebar  #main-content .container:before {
    display: none !important;
}

/* One focus treatment everywhere, so keyboard users get the same craft. */
body.atomic-shop a:focus-visible,
body.atomic-shop button:focus-visible,
body.atomic-shop input:focus-visible,
body.atomic-shop select:focus-visible,
body.atomic-shop textarea:focus-visible {
    outline: 2px solid var(--a-red);
    outline-offset: 2px;
    border-radius: var(--a-r-sm);
}

/* ---------------------------------------------------------------------------
   1b. Cart icon in the primary menu (added by the plugin on shop views).
       Inherits the nav's yellow link colour from Divi via currentColor.
   --------------------------------------------------------------------------- */

body.atomic-shop .atomic-cart-menu > a {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

/* Yellow pill on the red header bar — the nav's own colour pair, so the count
   reads at a glance without introducing a third colour. */
body.atomic-shop .atomic-cart-count {
    min-width: 18px;
    padding: 1px 6px;
    border-radius: var(--a-r-full);
    background: var(--a-yellow);
    color: var(--a-ink);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 16px;
    text-align: center;
}

body.atomic-shop .atomic-cart-count--empty {
    display: none;
}

/* ---------------------------------------------------------------------------
   2. Page header + breadcrumb
   --------------------------------------------------------------------------- */

body.atomic-shop .woocommerce-breadcrumb {
    margin: 0 0 24px;
    padding: 0;
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--a-muted);
}

body.atomic-shop .woocommerce-breadcrumb a {
    color: var(--a-muted);
    text-decoration: none;
    transition: color var(--a-fast) var(--a-ease);
}

body.atomic-shop .woocommerce-breadcrumb a:hover {
    color: var(--a-red);
}

body.atomic-shop .woocommerce-products-header {
    margin-bottom: 32px;
}

/* No underline, no accent rule, no tracking tricks. On a shop the heading's
   only job is to say where you are and then get out of the way. */
body.atomic-shop .woocommerce-products-header__title,
body.atomic-shop .product_title.entry-title {
    margin-bottom: 0;
    padding-bottom: 0;
    color: var(--a-ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
}

body.atomic-shop .term-description {
    max-width: 62ch;
    margin: 16px 0 0;
    color: var(--a-muted);
}

/* ---------------------------------------------------------------------------
   3. Browsing chrome — collection tabs across the top, faceted sidebar down
      the left, results to the right. On small screens the sidebar becomes a
      drawer; without JavaScript it simply stacks above the results.
   --------------------------------------------------------------------------- */

/* Tabs */
body.atomic-shop .atomic-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 32px;
    border-bottom: 1px solid var(--a-line);
}

body.atomic-shop .atomic-tab {
    position: relative;
    padding: 0 2px 12px;
    margin-right: 24px;
    color: var(--a-muted);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color var(--a-fast) var(--a-ease);
}

body.atomic-shop .atomic-tab:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--a-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--a-base) var(--a-ease);
}

body.atomic-shop .atomic-tab:hover {
    color: var(--a-red);
}

body.atomic-shop .atomic-tab.is-active {
    color: var(--a-ink);
    font-weight: 700;
}

body.atomic-shop .atomic-tab.is-active:after {
    transform: scaleX(1);
}

/* Two-column layout */
body.atomic-shop .atomic-shop-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

body.atomic-shop .atomic-shop-main {
    min-width: 0;
}

/* Sidebar */
body.atomic-shop .atomic-facets {
    position: sticky;
    top: 120px;              /* clears Divi's fixed header */
    min-width: 0;
}

body.atomic-shop .atomic-facets__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--a-line);
}

body.atomic-shop .atomic-facets__heading {
    margin: 0;
    padding: 0;
    color: var(--a-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

body.atomic-shop .atomic-clear {
    margin-left: auto;
    color: var(--a-muted);
    font-size: 12px;
    text-decoration: none;
    border-bottom: 1px solid var(--a-line-firm);
    transition: color var(--a-base) var(--a-ease), border-color var(--a-base) var(--a-ease);
}

body.atomic-shop .atomic-clear:hover {
    color: var(--a-red);
    border-color: var(--a-red);
}

body.atomic-shop .atomic-facets__close {
    display: none;
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--a-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* Facet sections */
body.atomic-shop .atomic-facet {
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--a-line);
}

body.atomic-shop .atomic-facet:last-child {
    border-bottom: none;
}

body.atomic-shop .atomic-facet__title {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    color: var(--a-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

body.atomic-shop .atomic-facet__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.atomic-shop .atomic-facet__list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.atomic-shop .atomic-facet__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    color: var(--a-ink-soft);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: color var(--a-fast) var(--a-ease);
}

body.atomic-shop .atomic-facet__link:hover {
    color: var(--a-red);
}

body.atomic-shop .atomic-facet__link.is-on {
    color: var(--a-ink);
    font-weight: 700;
}

body.atomic-shop .atomic-count {
    margin-left: auto;
    color: var(--a-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Condition rows read as checkboxes, but they are plain links — so they work
   with JavaScript off and every state is a shareable URL. */
body.atomic-shop .atomic-check__box {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid var(--a-line-firm);
    border-radius: 3px;
    background: #fff;
    transition: background-color var(--a-base) var(--a-ease),
                border-color var(--a-base) var(--a-ease);
}

body.atomic-shop .atomic-check:hover .atomic-check__box {
    border-color: var(--a-red);
}

body.atomic-shop .atomic-check.is-on .atomic-check__box {
    border-color: var(--a-red);
    background: var(--a-red)
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
        center / 11px 11px no-repeat;
}

/* Search field with the button tucked inside */
body.atomic-shop .atomic-search {
    position: relative;
    display: flex;
}

body.atomic-shop .atomic-search input {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 14px;
    border: 1px solid var(--a-line-firm);
    border-radius: var(--a-r-sm);
    background: #fff;
    color: var(--a-ink);
    font-size: 14px;
    transition: border-color var(--a-base) var(--a-ease), box-shadow var(--a-base) var(--a-ease);
}

body.atomic-shop .atomic-search input::placeholder {
    color: #b3aaa4;
}

body.atomic-shop .atomic-search input:focus {
    outline: none;
    border-color: var(--a-red);
    box-shadow: 0 0 0 3px var(--a-red-wash);
}

body.atomic-shop .atomic-search button {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    color: var(--a-muted);
    cursor: pointer;
    transition: color var(--a-base) var(--a-ease);
}

body.atomic-shop .atomic-search button:hover {
    color: var(--a-red);
}

/* Price */
body.atomic-shop .atomic-price-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.atomic-shop .atomic-price-row input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--a-line-firm);
    border-radius: var(--a-r-sm);
    background: #fff;
    color: var(--a-ink);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--a-base) var(--a-ease), box-shadow var(--a-base) var(--a-ease);
}

body.atomic-shop .atomic-price-row input:focus {
    outline: none;
    border-color: var(--a-red);
    box-shadow: 0 0 0 3px var(--a-red-wash);
}

body.atomic-shop .atomic-price-sep {
    color: var(--a-muted);
}

body.atomic-shop .atomic-go {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--a-line-firm);
    border-radius: var(--a-r-sm);
    background: #fff;
    color: var(--a-ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--a-base) var(--a-ease),
                color var(--a-base) var(--a-ease);
}

body.atomic-shop .atomic-go:hover {
    border-color: var(--a-red);
    color: var(--a-red);
}

/* Mobile drawer — the button only appears once the script has run, so nothing
   offers a control that wouldn't work. */
body.atomic-shop .atomic-facets-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    padding: 11px 18px;
    border: 1px solid var(--a-line-firm);
    border-radius: var(--a-r-sm);
    background: #fff;
    color: var(--a-ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

body.atomic-shop .atomic-facets-toggle__dot {
    width: 7px;
    height: 7px;
    border-radius: var(--a-r-full);
    background: var(--a-red);
}

body.atomic-shop .atomic-facets-overlay {
    display: none;
}
/* ---------------------------------------------------------------------------
   4. Result count + sorting — a quiet toolbar, not a headline.
   --------------------------------------------------------------------------- */

body.atomic-shop .woocommerce-result-count,
body.atomic-shop .woocommerce-ordering {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--a-muted);
    line-height: 46px;
}

body.atomic-shop .woocommerce-result-count {
    float: left;
}

body.atomic-shop .woocommerce-ordering {
    float: right;
}

body.atomic-shop .woocommerce-ordering select {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--a-line);
    border-radius: var(--a-r-sm);
    background: #fff;
    color: var(--a-ink-soft);
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--a-base) var(--a-ease);
}

body.atomic-shop .woocommerce-ordering select:hover {
    border-color: var(--a-line-firm);
}

body.atomic-shop .woocommerce-ordering select:focus {
    outline: none;
    border-color: var(--a-red);
}

body.atomic-shop ul.products {
    clear: both;
}

/* ---------------------------------------------------------------------------
   5. Product grid.
      CSS grid replaces Divi's float maths — equal-height cards, no broken
      last row. The card is borderless at rest: the photograph is the object,
      the chrome appears on hover.
   --------------------------------------------------------------------------- */

body.atomic-shop ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 24px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

/* Related/upsell rows run full width, so they take Woo's own column count. */
body.atomic-shop ul.products.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

body.atomic-shop ul.products:before,
body.atomic-shop ul.products:after {
    display: none !important;
}

body.atomic-shop ul.products li.product,
body.atomic-shop ul.products li.product:nth-child(n) {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    border-radius: var(--a-r-md);
    transition: transform var(--a-base) var(--a-ease), box-shadow var(--a-base) var(--a-ease);
}

body.atomic-shop ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--a-red);
}

body.atomic-shop ul.products li.product > a {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    text-decoration: none;
}

/* Uniform square crop on tinted paper, so mismatched staff uploads still
   line up and no photo is ever letterboxed against bare white. */
body.atomic-shop ul.products li.product .et_shop_image,
body.atomic-shop ul.products li.product a > img {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 0 12px !important;
    border: 1px solid var(--a-line);
    border-radius: var(--a-r-sm);
    background: #fff;
    overflow: hidden;
}

body.atomic-shop ul.products li.product img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Deliberately no zoom and no lift on hover. Movement is entertainment; on a
   results grid the only thing that should change is the title colour, so the
   eye can scan twenty items without the page shifting under it. */

/* Condition, set as a catalogue spec line above the name. */
body.atomic-shop .atomic-card-condition {
    display: block;
    margin: 0 0 4px;
    color: var(--a-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

/* The site's own custom CSS carries `.product .related h2 {font-size:26px
   !important}`, which lands on related-product card titles as well as the
   section heading — hence the !important on size and padding here. */
body.atomic-shop ul.products li.product .woocommerce-loop-product__title,
body.atomic-shop ul.products li.product h2,
body.atomic-shop ul.products li.product h3 {
    padding: 0 0 6px !important;
    margin: 0;
    color: var(--a-ink);
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.45;
    transition: color var(--a-fast) var(--a-ease);
}

body.atomic-shop ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--a-red);
}

/* Price in ink, not red: it is the fact, not the action. Tabular figures so
   a column of prices aligns like a price list. */
body.atomic-shop ul.products li.product .price {
    display: block;
    margin-top: auto;
    padding: 0;
    color: var(--a-ink) !important;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body.atomic-shop ul.products li.product .price del {
    color: var(--a-muted) !important;
    font-size: 14px;
    font-weight: 400;
    opacity: 1;
}

body.atomic-shop ul.products li.product .price ins {
    color: var(--a-red) !important;
    text-decoration: none;
}

body.atomic-shop ul.products li.product .button {
    margin: 16px 0 0;
}

body.atomic-shop ul.products li.product .et_overlay {
    border: none;
    border-radius: var(--a-r-md);
}

/* Sale badge — a signal, so it keeps the red. */
body.atomic-shop span.onsale,
body.atomic-shop ul.products li.product .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 5;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 5px 12px;
    border-radius: var(--a-r-sm);
    background: var(--a-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

body.atomic-shop .woocommerce-info,
body.atomic-shop .woocommerce-no-products-found {
    clear: both;
}

/* ---------------------------------------------------------------------------
   6. Buttons — the accent's primary job.
   --------------------------------------------------------------------------- */

body.atomic-shop .button,
body.atomic-shop a.button,
body.atomic-shop button.button,
body.atomic-shop input.button,
body.atomic-shop a.button.alt,
body.atomic-shop button.button.alt,
body.atomic-shop .single_add_to_cart_button,
body.atomic-shop #place_order,
body.atomic-shop .checkout-button {
    display: inline-block;
    padding: 13px 26px !important;
    border: none !important;
    border-radius: var(--a-r-sm) !important;
    background: var(--a-red) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: background-color var(--a-fast) var(--a-ease);
}

body.atomic-shop .button:hover,
body.atomic-shop a.button:hover,
body.atomic-shop button.button:hover,
body.atomic-shop input.button:hover,
body.atomic-shop a.button.alt:hover,
body.atomic-shop button.button.alt:hover,
body.atomic-shop .single_add_to_cart_button:hover,
body.atomic-shop #place_order:hover,
body.atomic-shop .checkout-button:hover {
    background: var(--a-red-deep) !important;
    color: #fff !important;
}

body.atomic-shop .button:active,
body.atomic-shop button.button:active,
body.atomic-shop .single_add_to_cart_button:active {
    transform: translateY(1px);
}

body.atomic-shop .button:after,
body.atomic-shop a.button:after,
body.atomic-shop button.button:after {
    display: none !important;
}

body.atomic-shop .button.disabled,
body.atomic-shop .button:disabled {
    background: var(--a-line-firm) !important;
    color: #fff !important;
    box-shadow: none;
    cursor: not-allowed;
}

/* Secondary — quiet outline, so there is never a second equal CTA. */
body.atomic-shop .button[name="update_cart"],
body.atomic-shop .return-to-shop .button,
body.atomic-shop .wc-backward {
    background: #fff !important;
    color: var(--a-ink) !important;
    box-shadow: inset 0 0 0 1px var(--a-line-firm);
}

body.atomic-shop .button[name="update_cart"]:hover,
body.atomic-shop .return-to-shop .button:hover,
body.atomic-shop .wc-backward:hover {
    background: #fff !important;
    color: var(--a-red) !important;
    box-shadow: inset 0 0 0 1px var(--a-red);
}

/* ---------------------------------------------------------------------------
   7. Single product
   --------------------------------------------------------------------------- */

/* Gallery and summary sit in a two-column grid rather than Divi's floats, so
   the two columns are independent and the buy box can stick while a long
   photograph scrolls past. */
/* Placement is explicit, not automatic: the reading column (description and
   specifications) is a sibling of the gallery and the summary, so left to
   auto-flow it would take the second cell and push the buy box onto its own
   row. Photograph and prose stack down the left; the buy box holds the right
   column and stays put while they scroll. */
body.atomic-shop div.product > .clearfix {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0 48px;
    align-items: start;
}

body.atomic-shop div.product .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
}

body.atomic-shop div.product .atomic-detail {
    grid-column: 1;
    grid-row: 2;
}

body.atomic-shop div.product .summary {
    grid-column: 2;
    grid-row: 1 / span 2;
}

body.atomic-shop div.product .woocommerce-product-gallery,
body.atomic-shop div.product .summary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.atomic-shop div.product .woocommerce-product-gallery__image img {
    border-radius: var(--a-r-md);
    box-shadow: inset 0 0 0 1px rgba(36, 31, 29, .06);
}

body.atomic-shop div.product .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

body.atomic-shop div.product .flex-control-thumbs li {
    width: 100% !important;
    margin: 0 !important;
    list-style: none;
}

body.atomic-shop div.product .flex-control-thumbs img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--a-r-sm);
    opacity: .55;
    transition: opacity var(--a-base) var(--a-ease);
}

body.atomic-shop div.product .flex-control-thumbs img.flex-active,
body.atomic-shop div.product .flex-control-thumbs img:hover {
    opacity: 1;
}

body.atomic-shop div.product .summary {
    position: sticky;
    top: 120px;             /* clears Divi's fixed header */
}

/* Logged-in editors have the 32px admin bar above that header. */
body.atomic-shop.admin-bar div.product .summary,
body.atomic-shop.admin-bar .atomic-facets {
    top: 152px;
}

/* The reading column, under the photograph: description then specifications.
   Measure is capped at ~65 characters, which is where prose stops being
   comfortable regardless of how wide the screen is. */
body.atomic-shop .atomic-detail {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--a-line);
}

body.atomic-shop .atomic-detail__text {
    max-width: 65ch;
    color: var(--a-ink-soft);
    font-size: 15px;
    line-height: 1.75;
}

body.atomic-shop .atomic-detail__text p {
    margin: 0 0 1em;
}

body.atomic-shop .atomic-detail__text p:last-child {
    margin-bottom: 0;
}

body.atomic-shop .atomic-detail__heading {
    margin: 32px 0 12px;
    padding: 0;
    color: var(--a-ink);
    font-size: 16px;
    font-weight: 700;
}

body.atomic-shop .atomic-detail__specs {
    width: 100%;
    max-width: 520px;
    border-collapse: collapse;
}

body.atomic-shop .atomic-detail__specs th,
body.atomic-shop .atomic-detail__specs td {
    padding: 12px 0;
    border-bottom: 1px solid var(--a-line);
    text-align: left;
    vertical-align: top;
}

body.atomic-shop .atomic-detail__specs th {
    width: 40%;
    color: var(--a-muted);
    font-size: 13px;
    font-weight: 400;
}

body.atomic-shop .atomic-detail__specs td {
    color: var(--a-ink);
    font-size: 14px;
    font-weight: 600;
}

/* The buy box: price, condition, availability and how to get it, gathered
   into the one panel a buyer has to read before deciding. */
body.atomic-shop .atomic-buybox {
    padding: 20px;
    border: 1px solid var(--a-line-firm);
    border-radius: var(--a-r-sm);
    background: #fff;
}

body.atomic-shop .atomic-buybox__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--a-line);
    color: var(--a-muted);
    font-size: 13px;
    line-height: 1.6;
}

body.atomic-shop .atomic-buybox__note svg {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--a-ink-soft);
}

body.atomic-shop div.product .summary .price,
body.atomic-shop div.product p.price {
    margin: 8px 0 24px;
    color: var(--a-ink);
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.2;
}

body.atomic-shop div.product .summary .price del {
    color: var(--a-muted);
    font-size: 20px;
    font-weight: 400;
    opacity: 1;
}

body.atomic-shop div.product .summary .price ins {
    color: var(--a-red);
    text-decoration: none;
}

/* Condition spec under the price — same catalogue register as the card. */
body.atomic-shop .atomic-spec {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--a-line);
}

body.atomic-shop .atomic-spec__label {
    color: var(--a-muted);
    font-size: 14px;
    font-weight: 400;
}

body.atomic-shop .atomic-spec__value {
    color: var(--a-ink);
    font-size: 15px;
    font-weight: 600;
}

/* Stock is a sentence, not a badge. Coloured text carries it; a pill would
   make it compete with the button for attention. */
body.atomic-shop div.product .stock {
    display: block;
    margin-bottom: 20px;
    padding: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
}

body.atomic-shop div.product .stock.in-stock {
    color: var(--a-green);
}

body.atomic-shop div.product .stock.out-of-stock {
    color: var(--a-red-deep);
}

body.atomic-shop div.product form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

/* Almost everything here is a one-off, and Woo renders the quantity field as a
   hidden input when only one is in stock — leaving an empty box and a stray
   label beside the button. Nothing to choose, so nothing to show. */
body.atomic-shop div.product form.cart .quantity:has(input[type="hidden"]) {
    display: none;
}

body.atomic-shop div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    text-align: center;
}

body.atomic-shop .quantity input.qty {
    width: 72px;
    height: 48px;
    padding: 0 8px;
    border: 1px solid var(--a-line-firm);
    border-radius: var(--a-r-sm);
    background: #fff;
    color: var(--a-ink);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Category and tag are wayfinding, not part of the decision — so they sit
   outside the buy box, small and quiet. */
body.atomic-shop div.product .product_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 20px;
    padding-top: 0;
    border-top: none;
    font-size: 12px;
    color: var(--a-muted);
}

body.atomic-shop div.product .product_meta > span {
    display: inline;
    margin-bottom: 0;
}

body.atomic-shop div.product .product_meta a {
    color: var(--a-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--a-line-firm);
    transition: color var(--a-base) var(--a-ease), border-color var(--a-base) var(--a-ease);
}

body.atomic-shop div.product .product_meta a:hover {
    color: var(--a-red);
    border-color: var(--a-red);
}

/* Tabs */
body.atomic-shop .woocommerce-tabs,
body.atomic-shop div.product .woocommerce-tabs {
    margin-top: 56px;
    border: none !important;
    background: none !important;
}

body.atomic-shop .woocommerce-tabs ul.tabs,
body.atomic-shop div.product .woocommerce-tabs ul.tabs,
body.atomic-shop #content-area div.product .woocommerce-tabs ul.tabs {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--a-line) !important;
    background: none !important;
    list-style: none;
}

body.atomic-shop .woocommerce-tabs ul.tabs:before,
body.atomic-shop .woocommerce-tabs ul.tabs li:before,
body.atomic-shop .woocommerce-tabs ul.tabs li:after {
    display: none !important;
}

/* Divi draws these as folder tabs — a filled, bordered, rounded box per tab
   and a boxed panel below, some of it behind an #id selector and an
   !important. Flattening it to a plain underlined tab strip therefore has to
   be forced rather than out-specified. */
body.atomic-shop .woocommerce-tabs ul.tabs li,
body.atomic-shop div.product .woocommerce-tabs ul.tabs li,
body.atomic-shop #content-area div.product .woocommerce-tabs ul.tabs li,
body.atomic-shop div.product .woocommerce-tabs ul.tabs li.active,
body.atomic-shop #content-area div.product .woocommerce-tabs ul.tabs li.active {
    display: inline-block;
    margin: 0 24px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

body.atomic-shop .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 0 0 14px;
    border-bottom: 2px solid transparent;
    color: var(--a-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    transition: color var(--a-base) var(--a-ease), border-color var(--a-base) var(--a-ease);
}

body.atomic-shop .woocommerce-tabs ul.tabs li a:hover {
    color: var(--a-ink);
}

body.atomic-shop .woocommerce-tabs ul.tabs li.active a {
    color: var(--a-ink);
    border-bottom-color: var(--a-red);
}

body.atomic-shop .woocommerce-tabs .panel,
body.atomic-shop div.product .woocommerce-tabs .panel,
body.atomic-shop #content-area div.product .woocommerce-tabs .panel {
    padding: 28px 0 0 !important;
    border: none !important;
    border-radius: 0;
    background: none !important;
}

body.atomic-shop .woocommerce-tabs .panel > h2 {
    margin-bottom: 16px;
    color: var(--a-ink);
    font-size: 20px;
    font-weight: 600;
}

/* Condition / attributes — a spec table, hairlines only. */
body.atomic-shop table.shop_attributes {
    width: 100%;
    max-width: 560px;
    margin: 0 0 24px;
    border: none;
    border-top: 1px solid var(--a-line);
    border-collapse: collapse;
}

body.atomic-shop table.shop_attributes th,
body.atomic-shop table.shop_attributes td {
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid var(--a-line);
    font-style: normal;
    text-align: left;
}

body.atomic-shop table.shop_attributes th {
    width: 40%;
    background: none;
    color: var(--a-muted);
    font-size: 13px;
    font-weight: 400;
}

body.atomic-shop table.shop_attributes td {
    color: var(--a-ink);
    font-weight: 600;
}

body.atomic-shop table.shop_attributes td p {
    margin: 0;
    padding: 0;
}

body.atomic-shop .related > h2,
body.atomic-shop .upsells > h2,
body.atomic-shop .cross-sells > h2 {
    margin-bottom: 28px;
    color: var(--a-ink);
    font-size: 22px !important;
    font-weight: 600;
    letter-spacing: -.01em;
}

body.atomic-shop .related,
body.atomic-shop .upsells,
body.atomic-shop .cross-sells {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--a-line);
}

/* ---------------------------------------------------------------------------
   8. Classic cart / account tables & forms
   --------------------------------------------------------------------------- */

body.atomic-shop table.shop_table,
body.atomic-shop table.woocommerce-orders-table {
    width: 100%;
    margin-bottom: 32px;
    border: 1px solid var(--a-line);
    border-radius: var(--a-r-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

body.atomic-shop table.shop_table th {
    padding: 14px 16px;
    background: var(--a-paper);
    border-bottom: 1px solid var(--a-line);
    color: var(--a-ink);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

body.atomic-shop table.shop_table td {
    padding: 16px;
    border-bottom: 1px solid var(--a-line);
    color: var(--a-ink-soft);
    vertical-align: middle;
}

body.atomic-shop table.shop_table tr:last-child td {
    border-bottom: none;
}

body.atomic-shop table.cart img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--a-r-sm);
}

body.atomic-shop table.cart .product-name a {
    color: var(--a-ink);
    font-weight: 600;
    text-decoration: none;
}

body.atomic-shop table.cart .product-name a:hover {
    color: var(--a-red);
}

body.atomic-shop a.remove {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: var(--a-r-full);
    background: var(--a-paper);
    color: var(--a-muted) !important;
    font-size: 15px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--a-base) var(--a-ease), color var(--a-base) var(--a-ease);
}

body.atomic-shop a.remove:hover {
    background: var(--a-red);
    color: #fff !important;
}

body.atomic-shop .cart_totals > h2,
body.atomic-shop #order_review_heading,
body.atomic-shop .woocommerce-billing-fields > h3,
body.atomic-shop .woocommerce-shipping-fields > h3,
body.atomic-shop .woocommerce-additional-fields > h3 {
    margin-bottom: 20px;
    color: var(--a-ink);
    font-size: 20px;
    font-weight: 600;
}

body.atomic-shop .cart_totals .order-total th,
body.atomic-shop .cart_totals .order-total td,
body.atomic-shop #order_review .order-total th,
body.atomic-shop #order_review .order-total td {
    color: var(--a-ink);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body.atomic-shop .wc-proceed-to-checkout .checkout-button {
    display: block;
    text-align: center;
}

/* Form fields */
body.atomic-shop .form-row input.input-text,
body.atomic-shop .form-row textarea,
body.atomic-shop .form-row select,
body.atomic-shop #customer_details input,
body.atomic-shop #customer_details textarea,
body.atomic-shop .woocommerce-form input.input-text {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--a-line-firm);
    border-radius: var(--a-r-sm);
    background: #fff;
    color: var(--a-ink);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color var(--a-base) var(--a-ease), box-shadow var(--a-base) var(--a-ease);
}

body.atomic-shop .form-row input.input-text:focus,
body.atomic-shop .form-row textarea:focus,
body.atomic-shop .form-row select:focus {
    outline: none;
    border-color: var(--a-red);
    box-shadow: 0 0 0 3px var(--a-red-wash);
}

body.atomic-shop .form-row label {
    display: block;
    margin-bottom: 6px;
    color: var(--a-ink);
    font-size: 13px;
    font-weight: 600;
}

body.atomic-shop .required {
    color: var(--a-red);
}

body.atomic-shop .coupon input#coupon_code {
    width: auto;
    min-width: 170px;
    height: 46px;
    padding: 0 14px;
    margin-right: 8px;
    border: 1px solid var(--a-line-firm);
    border-radius: var(--a-r-sm);
}

/* ---------------------------------------------------------------------------
   9. Notices.
      Divi paints every notice solid accent-red with white 18px text and forces
      it with !important, so these declarations have to answer in kind.
   --------------------------------------------------------------------------- */

body.atomic-shop .woocommerce-message,
body.atomic-shop .woocommerce-info,
body.atomic-shop .woocommerce-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px !important;
    padding: 18px 22px !important;
    border: 1px solid var(--a-line) !important;
    border-left: 3px solid var(--a-line-firm) !important;
    border-radius: var(--a-r-md);
    background: var(--a-paper) !important;
    color: var(--a-ink) !important;
    font-size: 14px !important;
    line-height: 1.6;
    list-style: none;
}

body.atomic-shop .woocommerce-message:before,
body.atomic-shop .woocommerce-info:before,
body.atomic-shop .woocommerce-error:before {
    display: none !important;
}

/* Two states worth distinguishing — something went wrong, or it didn't.
   A four-colour notice system on a shop this size is noise. */
body.atomic-shop .woocommerce-message {
    border-left-color: var(--a-green) !important;
}

body.atomic-shop .woocommerce-info {
    border-left-color: var(--a-line-firm) !important;
}

body.atomic-shop .woocommerce-error {
    border-left-color: var(--a-red) !important;
}

body.atomic-shop .woocommerce-message a,
body.atomic-shop .woocommerce-info a,
body.atomic-shop .woocommerce-error a {
    color: var(--a-red);
}

/* Errors carry a button too — "we have 1 in stock and you already have 1 in
   your cart. [View cart]" — and without this it sits flush against the last
   word of the sentence. */
body.atomic-shop .woocommerce-message .button,
body.atomic-shop .woocommerce-info .button,
body.atomic-shop .woocommerce-error .button {
    margin-left: auto;
    padding: 9px 18px !important;
}

/* ---------------------------------------------------------------------------
   10. Pagination
   --------------------------------------------------------------------------- */

body.atomic-shop .woocommerce-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    border: none;
    list-style: none;
}

body.atomic-shop .woocommerce-pagination ul.page-numbers li {
    border: none;
}

body.atomic-shop .woocommerce-pagination .page-numbers {
    display: inline-block;
    min-width: 40px;
    padding: 9px 12px;
    border: 1px solid var(--a-line);
    border-radius: var(--a-r-sm);
    color: var(--a-ink-soft);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-decoration: none;
    transition: border-color var(--a-base) var(--a-ease),
                color var(--a-base) var(--a-ease),
                background-color var(--a-base) var(--a-ease);
}

body.atomic-shop .woocommerce-pagination a.page-numbers:hover {
    border-color: var(--a-ink-soft);
    color: var(--a-ink);
}

body.atomic-shop .woocommerce-pagination .page-numbers.current {
    background: var(--a-red);
    border-color: var(--a-red);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   11. My account
   --------------------------------------------------------------------------- */

body.atomic-shop .woocommerce-MyAccount-navigation ul {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

body.atomic-shop .woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--a-line);
}

body.atomic-shop .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 0;
    color: var(--a-muted);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--a-base) var(--a-ease);
}

body.atomic-shop .woocommerce-MyAccount-navigation li.is-active a,
body.atomic-shop .woocommerce-MyAccount-navigation li a:hover {
    color: var(--a-red);
}

body.atomic-shop .woocommerce-form-login,
body.atomic-shop .woocommerce-form-register {
    max-width: 520px;
    padding: 32px;
    border: 1px solid var(--a-line);
    border-radius: var(--a-r-md);
}

/* ---------------------------------------------------------------------------
   12. Block cart & checkout.
       The Cart and Checkout pages are built from WooCommerce blocks, which
       ship their own styling and ignore the classic selectors above.
   --------------------------------------------------------------------------- */

body.atomic-shop.woocommerce-cart .entry-title,
body.atomic-shop.woocommerce-checkout .entry-title,
body.atomic-shop.woocommerce-account .entry-title {
    position: relative;
    padding-bottom: 16px;
    color: var(--a-ink);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -.02em;
}

body.atomic-shop.woocommerce-cart .entry-title:after,
body.atomic-shop.woocommerce-checkout .entry-title:after,
body.atomic-shop.woocommerce-account .entry-title:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: var(--a-red);
}

body.atomic-shop .wc-block-components-button:not(.is-link),
body.atomic-shop .wc-block-cart__submit-button,
body.atomic-shop .wc-block-components-checkout-place-order-button,
body.atomic-shop .wc-block-components-product-button .wp-element-button {
    background-color: var(--a-red) !important;
    border-color: var(--a-red) !important;
    border-radius: var(--a-r-sm) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    transition: background-color var(--a-base) var(--a-ease), box-shadow var(--a-base) var(--a-ease);
}

body.atomic-shop .wc-block-components-button:not(.is-link):hover,
body.atomic-shop .wc-block-cart__submit-button:hover,
body.atomic-shop .wc-block-components-checkout-place-order-button:hover,
body.atomic-shop .wc-block-components-product-button .wp-element-button:hover {
    background-color: var(--a-red-deep) !important;
    border-color: var(--a-red-deep) !important;
    box-shadow: 0 6px 18px -8px rgba(176, 31, 29, .7);
}

body.atomic-shop .wc-block-components-button.is-link {
    color: var(--a-muted) !important;
}

body.atomic-shop .wc-block-components-button.is-link:hover {
    color: var(--a-red) !important;
}

body.atomic-shop .wc-block-components-product-name {
    color: var(--a-ink) !important;
    font-weight: 600;
    text-decoration: none;
}

body.atomic-shop a.wc-block-components-product-name:hover {
    color: var(--a-red) !important;
}

body.atomic-shop .wc-block-cart-items__header {
    color: var(--a-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
}

/* Background on the cells, not the row — the block table uses separate
   borders, so a row background leaves gaps between the columns. */
body.atomic-shop .wc-block-cart-items__header th {
    padding: 14px 16px;
    background: var(--a-paper);
}

body.atomic-shop .wc-block-cart-item__image img {
    border-radius: var(--a-r-sm);
}

body.atomic-shop .wc-block-components-product-price__value,
body.atomic-shop .wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
    color: var(--a-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

body.atomic-shop .wc-block-components-totals-item__value {
    font-variant-numeric: tabular-nums;
}

/* The grand total is the fact the customer is checking — ink, and the
   heaviest thing in the summary. */
body.atomic-shop .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.atomic-shop .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    color: var(--a-ink);
    font-weight: 700;
}

body.atomic-shop .wc-block-components-sidebar .wc-block-components-totals-wrapper,
body.atomic-shop .wp-block-woocommerce-checkout-order-summary-block {
    border-radius: var(--a-r-md);
}

body.atomic-shop .wc-block-components-text-input input:focus,
body.atomic-shop .wc-block-components-textarea:focus,
body.atomic-shop .wc-block-components-select__select:focus {
    outline: 2px solid var(--a-red);
    outline-offset: 0;
}

body.atomic-shop .wc-block-components-text-input.is-active label,
body.atomic-shop .wc-block-components-checkout-step__heading-content a {
    color: var(--a-red);
}

body.atomic-shop .wc-block-components-checkbox__input,
body.atomic-shop .wc-block-components-radio-control__input {
    accent-color: var(--a-red);
}

body.atomic-shop .wc-block-components-checkbox__input:checked {
    background-color: var(--a-red);
    border-color: var(--a-red);
}

body.atomic-shop .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.atomic-shop .wc-block-components-radio-control--highlight-checked:after {
    border-color: var(--a-red) !important;
}

body.atomic-shop .wc-block-components-notice-banner.is-success {
    border-color: var(--a-green);
}

body.atomic-shop .wc-block-components-notice-banner.is-error {
    border-color: var(--a-red);
}

body.atomic-shop .wc-block-cart__empty-cart__title,
body.atomic-shop .wp-block-woocommerce-empty-cart-block h2 {
    color: var(--a-ink);
    font-size: 22px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   13. Responsive — mirrors Divi's own 981px / 768px breakpoints.
   --------------------------------------------------------------------------- */

@media (max-width: 980px) {
    body.atomic-shop ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    body.atomic-shop ul.products li.product,
    body.atomic-shop ul.products li.product:nth-child(n) {
        width: 100% !important;
        margin: 0 !important;
    }

    body.atomic-shop .woocommerce-result-count,
    body.atomic-shop .woocommerce-ordering {
        float: none;
        line-height: 1.7em;
    }

    body.atomic-shop .woocommerce-ordering {
        margin-top: 12px;
    }

    body.atomic-shop .atomic-shop-layout {
        display: block;
    }

    /* One column, and the order changes: photograph, then the decision, then
       the reading. On a phone nobody scrolls past a description to find the
       price. */
    body.atomic-shop div.product > .clearfix {
        grid-template-columns: 1fr;
    }

    body.atomic-shop div.product .woocommerce-product-gallery {
        grid-column: 1;
        grid-row: 1;
    }

    body.atomic-shop div.product .summary {
        grid-column: 1;
        grid-row: 2;
        position: static;
        margin-top: 32px !important;
    }

    body.atomic-shop div.product .atomic-detail {
        grid-column: 1;
        grid-row: 3;
    }

    /* The sidebar becomes a drawer — but only once the script has run.
       Without JavaScript it stays a normal block above the results. */
    html.atomic-js body.atomic-shop .atomic-facets-toggle {
        display: inline-flex;
    }

    html.atomic-js body.atomic-shop .atomic-facets {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 100000;
        width: min(86vw, 340px);
        padding: 24px;
        background: #fff;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform var(--a-base) var(--a-ease);
        box-shadow: 0 0 40px rgba(36, 31, 29, .18);
    }

    html.atomic-js body.atomic-shop.atomic-facets-open .atomic-facets {
        transform: none;
    }

    html.atomic-js body.atomic-shop .atomic-facets__close {
        display: block;
        margin-left: auto;
    }

    html.atomic-js body.atomic-shop.atomic-facets-open .atomic-facets-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(36, 31, 29, .45);
    }

    html.atomic-js body.atomic-shop.atomic-facets-open {
        overflow: hidden;
    }
}

@media (max-width: 600px) {
    body.atomic-shop ul.products {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    body.atomic-shop .woocommerce-products-header__title,
    body.atomic-shop .product_title.entry-title,
    body.atomic-shop.woocommerce-cart .entry-title,
    body.atomic-shop.woocommerce-checkout .entry-title,
    body.atomic-shop.woocommerce-account .entry-title {
        font-size: 25px;
    }

    body.atomic-shop .atomic-buybox {
        padding: 20px;
    }

    body.atomic-shop div.product .summary .price {
        font-size: 25px;
    }

    body.atomic-shop table.shop_table th,
    body.atomic-shop table.shop_table td {
        padding: 12px;
    }
}

/* ---------------------------------------------------------------------------
   14. Motion preference
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body.atomic-shop *,
    body.atomic-shop *:before,
    body.atomic-shop *:after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    body.atomic-shop ul.products li.product:hover {
        transform: none;
    }

    body.atomic-shop ul.products li.product:hover img {
        transform: none;
    }
}