/* Shop-only layout: shop archives, product page, cart, checkout, account.
   Enqueued from inc/shop.php on WooCommerce pages only. Tokens come from
   theme.json; WooCommerce's own stylesheets still load on the product,
   cart, checkout and account pages, so this file only overrides where
   their look fights the theme. */

/* ------------------------------------------------------------------
   Archive: category links and pagination
   ------------------------------------------------------------------ */

/* Pinned under the header while the products scroll, like Portfolio's
   series links. It sits right after the page head, not inside it, or it
   could only stick within the head's own box. */
.cots-shop-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--5);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--step--1);
}
.cots-page > .cots-shop-cats {
    position: sticky;
    top: var(--cots-header-h);
    z-index: 40;
    margin-block: calc(-1 * var(--wp--preset--spacing--5)) var(--wp--preset--spacing--6);
    padding-block: var(--wp--preset--spacing--3);
    background: var(--wp--preset--color--ground);
    border-bottom: 1px solid var(--wp--preset--color--rule);
}
.cots-page > .cots-shop-cats + * {
    margin-block-start: 0;
}
.cots-shop-cats a {
    color: var(--wp--preset--color--ink);
    padding-block: var(--wp--preset--spacing--1);
    border-bottom: 3px solid transparent;
}
.cots-shop-cats a:hover {
    text-decoration: none;
}
@media (hover: hover) {
    .cots-shop-cats a:hover {
        border-bottom-color: var(--wp--preset--color--rule);
    }
}
.cots-shop-cats a[aria-current="page"] {
    border-bottom-color: var(--wp--preset--color--sun);
}
/* Phones: chips, like the other section links (style.css, .cots-jump). */
@media (max-width: 767px) {
    .cots-shop-cats {
        gap: 5px;
        font-size: 0.8125rem;
        line-height: 1.25;
    }
    .cots-shop-cats a {
        padding: 4px 9px;
        border: 1px solid var(--wp--preset--color--rule);
        border-radius: 999px;
        background: var(--wp--preset--color--ground-sunk);
    }
    .cots-shop-cats a[aria-current="page"] {
        background: var(--wp--preset--color--sun);
        border-color: var(--wp--preset--color--sun);
    }
}

.cots-pagination {
    margin-top: var(--wp--preset--spacing--8);
    gap: var(--wp--preset--spacing--4);
    font-weight: 600;
}
.cots-pagination a {
    color: var(--wp--preset--color--ink);
}
.cots-pagination .page-numbers.current {
    border-bottom: 3px solid var(--wp--preset--color--sun);
}

/* ------------------------------------------------------------------
   Product page
   ------------------------------------------------------------------ */

.cots-single--product .cots-single__media {
    display: block;
}
.cots-price {
    margin-top: var(--wp--preset--spacing--3);
    font-size: var(--wp--preset--font-size--step-1);
    font-weight: 600;
}
.cots-single--product .wp-block-post-title {
    font-size: var(--wp--preset--font-size--step-3);
}
.cots-single--product .woocommerce-product-gallery {
    width: 100%;
}
.cots-single--product .woocommerce-product-gallery img {
    width: 100%;
}
/* Four thumbnails at a time; the rest scroll sideways, with arrows added
   by the script in inc/shop.php when there are more than four. */
.cots-thumbs {
    position: relative;
    margin-top: var(--wp--preset--spacing--2);
}
.cots-single--product .flex-control-thumbs {
    display: flex;
    gap: var(--wp--preset--spacing--2);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.cots-single--product .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}
.woocommerce .cots-single--product div.images.woocommerce-product-gallery ol.flex-control-thumbs li {
    /* Four across, sharing the three gaps between them. */
    flex: 0 0 calc((100% - 3 * var(--wp--preset--spacing--2)) / 4);
    scroll-snap-align: start;
}
.cots-thumbs__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 50%;
    background: var(--wp--preset--color--ground);
    color: var(--wp--preset--color--ink);
    box-shadow: 0 2px 8px rgba(26, 24, 21, 0.15);
    cursor: pointer;
    line-height: 1;
}
.cots-thumbs__arrow[hidden] {
    display: none;
}
.cots-thumbs__arrow--prev {
    left: calc(-1 * var(--wp--preset--spacing--4));
}
.cots-thumbs__arrow--next {
    right: calc(-1 * var(--wp--preset--spacing--4));
}
.cots-thumbs__arrow:hover {
    border-color: var(--wp--preset--color--ink);
}
/* Outranks WooCommerce's ".woocommerce div.product div.images
   .flex-control-thumbs li { width: 25%; float: left }", which would
   otherwise shrink each thumbnail to a quarter of its grid cell. */
.woocommerce .cots-single--product div.images.woocommerce-product-gallery ol.flex-control-thumbs li {
    width: auto;
    float: none;
    margin: 0;
}
.cots-single--product .woocommerce-product-gallery .flex-control-thumbs li img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
}
.cots-single--product .flex-control-thumbs img.flex-active,
.cots-single--product .flex-control-thumbs img:hover {
    opacity: 1;
}

/* Variation picker + quantity */
.woocommerce table.variations {
    margin: var(--wp--preset--spacing--5) 0 0;
}
.woocommerce table.variations th.label {
    font-size: var(--wp--preset--font-size--step--1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--ink-soft);
}
.woocommerce .reset_variations {
    margin-left: var(--wp--preset--spacing--3);
    font-size: var(--wp--preset--font-size--step--1);
}
.woocommerce .variations_button,
.woocommerce form.cart:not(.variations_form) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--wp--preset--spacing--3);
    margin-top: var(--wp--preset--spacing--4);
}
.woocommerce .quantity .qty {
    width: 5rem;
    margin: 0;
}

/* Tabs use WooCommerce's own "minimal" style (flat, underlined); only
   the active marker changes, to the sun. Selectors match its specificity. */
.cots-product-details {
    margin-top: var(--wp--preset--spacing--8);
}
html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs {
    margin-bottom: var(--wp--preset--spacing--6);
    border-bottom: 1px solid var(--wp--preset--color--rule);
}
html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li {
    font-weight: 600;
    border-bottom-width: 3px;
}
html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li a {
    padding: var(--wp--preset--spacing--3) 0;
    margin-right: var(--wp--preset--spacing--5);
}
html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li.active {
    border-color: var(--wp--preset--color--sun);
}
.cots-product-details .panel {
    max-width: 65ch;
}

.cots-related {
    margin-top: var(--wp--preset--spacing--9);
    padding-top: var(--wp--preset--spacing--8);
    border-top: 1px solid var(--wp--preset--color--rule);
}

/* ------------------------------------------------------------------
   Cart, checkout, account
   ------------------------------------------------------------------ */

/* WooCommerce's block-theme stylesheet colors everything through these. */
:root {
    --wc-primary: var(--wp--preset--color--ember);
    --wc-primary-text: var(--wp--preset--color--ground);
    --wc-secondary: var(--wp--preset--color--ground-sunk);
    --wc-secondary-text: var(--wp--preset--color--ink);
    --wc-subtext: var(--wp--preset--color--ink-soft);
    --wc-content-bg: var(--wp--preset--color--ground);
    --wc-form-border-color: var(--wp--preset--color--rule);
    --wc-form-border-radius: 2px;
    --wc-card-border-radius: 2px;
}

/* WooCommerce caps these pages at 1000px; use the site's content width. */
.woocommerce-account .wp-block-post-title,
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title {
    max-width: var(--wp--style--global--content-size);
}
.woocommerce-account main .woocommerce,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout main .woocommerce {
    max-width: none;
}
.cots-woo-page .cots-page__title {
    margin-bottom: var(--wp--preset--spacing--7);
}

/* Notices get focused by WooCommerce's JS for screen readers; the sun
   focus ring is for things you can act on, not status messages. */
.wc-block-components-notice-banner:focus {
    outline: none;
}

.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea,
.woocommerce .select2-container .select2-selection--single {
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 2px;
    background: var(--wp--preset--color--ground);
    color: var(--wp--preset--color--ink);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--step-0);
}
.woocommerce .input-text,
.woocommerce select {
    padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}
.woocommerce .select2-container .select2-selection--single {
    height: auto;
}
.woocommerce form .form-row label {
    font-size: var(--wp--preset--font-size--step--1);
    font-weight: 600;
    color: var(--wp--preset--color--ink-soft);
}

.woocommerce table.shop_table {
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border: 0;
    border-bottom: 1px solid var(--wp--preset--color--rule);
}
.woocommerce table.shop_table thead th {
    font-size: var(--wp--preset--font-size--step--1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--ink-soft);
}
.woocommerce table.shop_table .product-name a {
    color: var(--wp--preset--color--ink);
    font-weight: 600;
}
.woocommerce table.cart td.actions {
    border-bottom: 0;
    padding-inline: 0;
}
.woocommerce a.remove {
    color: var(--wp--preset--color--ink-soft) !important;
    font-weight: 400;
}
.woocommerce a.remove:hover {
    background: var(--wp--preset--color--ground-sunk);
}
.woocommerce-page .cart-collaterals h2,
.woocommerce-checkout h3 {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--step-2);
}

.woocommerce-checkout #payment {
    background: var(--wp--preset--color--ground-sunk);
    border-radius: 2px;
}
.woocommerce-checkout #payment div.payment_box {
    background: var(--wp--preset--color--ground);
}
.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--wp--preset--color--ground);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    color: var(--wp--preset--color--ink);
    text-decoration: none;
    border-bottom: 3px solid var(--wp--preset--color--sun);
}