/*
 * The theme has no WooCommerce styles at all. Two things it cannot do on its own:
 * hold the cart/checkout blocks inside the site's own column, and keep the
 * B2B "log in to see prices" call-to-action from reading as body text.
 * Theme container is 1140px — match it rather than inventing a second width.
 */
.page-content > .wp-block-woocommerce-cart,
.page-content > .wp-block-woocommerce-checkout,
.page-content > .woocommerce-account,
.page-content > .woocommerce {
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 15px;
}

/*
 * WooCommerce ships its own grey (#32373c) button, which reads as a third-party
 * widget dropped into the site. Match the theme's own call to action instead —
 * navy from the header button, the mint accent from the footer bar on focus.
 *
 * Selectors hang off `body.woocommerce-page`, not a descendant `.woocommerce`
 * wrapper: this theme has no WooCommerce templates, so that wrapper element never
 * exists — the class lives on <body>. It also breaks the specificity tie with
 * WooCommerce's own rules, which this stylesheet does not always load after.
 */
body.woocommerce-page .button,
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body.woocommerce-page #respond input#submit,
/* WooCommerce's `.alt` primary button carries one more class than the base one,
   so it needs its own selector rather than inheriting from the rule above. */
body.woocommerce-page a.button.alt,
body.woocommerce-page button.button.alt,
body.woocommerce-page input.button.alt,
body.woocommerce-page .single_add_to_cart_button,
body .wc-block-components-button,
body .wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button {
    background-color: #002855;
    color: #fff;
    border: 0;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .15s ease;
}

body.woocommerce-page .button:hover,
body.woocommerce-page a.button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page input.button:hover,
body.woocommerce-page a.button.alt:hover,
body.woocommerce-page button.button.alt:hover,
body.woocommerce-page .single_add_to_cart_button:hover,
body .wc-block-components-button:hover,
body .wc-block-cart__submit-button:hover,
body .wc-block-components-checkout-place-order-button:hover {
    background-color: #013a76;
    color: #fff;
}

/* Keyboard users need to see where they are; the theme provides no focus style. */
body.woocommerce-page .button:focus-visible,
body.woocommerce-page a.button:focus-visible,
body .wc-block-components-button:focus-visible {
    outline: 3px solid #47D7AC;
    outline-offset: 2px;
}

/*
 * Category descriptions. The theme gives paragraphs no bottom margin and lets the
 * text run the full 1120px column — about 150 characters a line, roughly twice a
 * comfortable measure. Constrain and space it; leave the font family alone so it
 * still reads as the same site.
 */
.term-description {
    max-width: 68ch;
    margin-bottom: 2.5rem;
    line-height: 1.65;
}

.term-description p {
    margin: 0 0 1.1em;
}

.term-description h2 {
    font-size: 1.4em;
    line-height: 1.25;
    font-weight: 600;
    margin: 2.2em 0 .6em;
}

.term-description > h2:first-child { margin-top: 0; }

/*
 * Categories with no headings of their own: give the opening paragraph a little
 * weight so the block still has an entry point.
 */
.term-description > p:first-child {
    font-size: 1.15em;
    line-height: 1.5;
    margin-bottom: 1.4em;
}

/* Result count and sorting sit on one line instead of stacking awkwardly. */
.woocommerce-products-header + .woocommerce-notices-wrapper + .woocommerce-result-count,
.term-description + .woocommerce-result-count {
    margin-bottom: 1.5rem;
}

.ramator-shop-more > summary {
    cursor: pointer;
    display: inline-block;
    margin-top: .2em;
    font-weight: 600;
    list-style: none;
}

.ramator-shop-more > summary::-webkit-details-marker { display: none; }

.ramator-shop-more > summary::after { content: " ↓"; }

.ramator-shop-more[open] > summary::after { content: " ↑"; }

.ramator-shop-more__body { padding-top: 1.1em; }

/* ------------------------------------------------------------------------
   Two-column WooCommerce layouts vs. the theme's Bootstrap grid
   ------------------------------------------------------------------------
   The theme ships Bootstrap, whose .col-1 and .col-2 mean one and two twelfths
   of a row (max-width 8.33% and 16.67%). WooCommerce names its two-column
   layouts with the same classes, so every page using them was squeezed: the
   login and application forms rendered one word per line, and the saved
   addresses and the order-confirmation customer details the same way.
   Fix list items 38 and 39. */
.woocommerce .col2-set {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.woocommerce .col2-set::before,
.woocommerce .col2-set::after {
    /* WooCommerce's float clearfix; in a flex row these would become items. */
    content: none;
}
.woocommerce .col2-set > .col-1,
.woocommerce .col2-set > .col-2 {
    flex: 1 1 320px;
    max-width: none;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}