/*
Theme Name: MF Win Magazine
Theme URI: https://bitbucket.org/mingfu/theme-winmagazine
Description: A custom child theme for Win Magazine
Author: Ming Fu
Author URI: https://mingfu.tw
Template: Avada
Version: 0.11.0
*/

.fusion-page-title-row .entry-title {
    text-shadow: 0 0 2px #000;
}

.awb-menu__login-reg,
.fusion-comments{
    display: none !important;
}

.awb-imageframe-caption-container .awb-imageframe-caption-title{
    font-size: 0.9rem !important;
    margin: 0 !important;
}
.awb-imageframe-caption-container .awb-imageframe-caption-text{
    font-size: 0.8rem !important;
    margin: 0 !important;
}

.cta-row{
    padding: 2em 1.5em !important;
    margin: 0 0 1em !important;
    background-color: rgba(116,116,116,0.1);
    border-radius: 3px;
}
.cta-row > .fusion-layout-column{
    margin: 0;
}
.cta-row.volume-issue {
    align-items: center !important;
}
.cta-row.volume-issue .fusion-text + .fusion-text p:last-child{
    margin: 0;
}
@media (max-width: 640px) {
    .cta-row .fusion-image-element{
        margin-bottom: 1em;
    }
}

.landing-page .fusion-text{
    margin: 0 auto 2em;
}

.issue-list-articles-featured .fusion-builder-placeholder{
    background: transparent !important;
    color: var(--awb-text-color) !important;
    padding: 0 !important;
}
.issue-list-articles .fusion-builder-placeholder{
    display: none;
}

.text-intro{
    font-size: large !important;
}

.text-photo-attribution{
    font-size: small !important;
    font-style: italic !important;
}
.meta-volume-issue a,
.meta-volume-issue a:hover{
    color: inherit;
}

.cta-volume-issue .meta-volume-issue{
    margin-top: 0.5em;
}

/*
 * Archives
 */

/* Parent flex row */
.mf-archive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

/*
 * 75% / 25% columns, with the gap taken out of the bases.
 *
 * These were 75% and 25% with max-widths of 73% and 24%, which with the 30
 * pixel gap needed 97% plus 30 pixels: a fit only from a 1000 pixel row
 * upward. The stacking rule fired at 768 and below, so between 769 and about
 * 1075 pixels of viewport the sidebar wrapped onto its own line at a quarter
 * width, below the listing. Measured 2026-09-10 at 800, 900, 1000 and 1060.
 * Ticket 1ed7b97ec1. calc() makes the two bases and the gap sum to the row at
 * every width, and the stacking rule below now takes over at 1000, the same
 * breakpoint the rankings browser uses.
 */
.mf-archive-main {
    flex: 0 0 calc(75% - 15px);
    max-width: calc(75% - 15px);
}

.mf-archive-side {
    flex: 0 0 calc(25% - 15px);
    max-width: calc(25% - 15px);

    /*
     * The sidebar is FIRST in the markup, so that on a phone it stacks on top
     * of the listing. On a wide screen it belongs on the right, which `order`
     * restores. Ticket 5d7e146dce.
     */
    order: 1;

    /*
     * Its own stacking context, or Avada steals the leftmost 10px.
     *
     * An article card's span.fusion-column-inner-bg-image in the main column
     * is position:absolute and its right edge lands 10px INSIDE this column.
     * With this element static and z-index auto, that span paints on top, and
     * it sits inside an <a> to an article — so a click anywhere in that strip
     * navigates to whichever card happens to overlap instead of reaching the
     * control underneath.
     *
     * The strip had been dead for every control in this sidebar all along.
     * Nothing had put an interactive target there, so nobody had reason to
     * click it, until the Issues plane's "Earlier volumes" disclosure put its
     * arrow exactly in it. Measured 2026-08-17 with elementFromPoint across
     * each control's width; a screenshot cannot see this and neither can any
     * status-code probe. Ticket d7ace23a.
     *
     * Fixed here rather than by padding the picker, because padding moves one
     * control out of the way and leaves the cause for the next one.
     */
    position: relative;
    z-index: 1;
}

/*
 * The planes fold, on a phone only.
 *
 * Each plane is a <details> whose <summary> holds the heading and the current
 * selection. On a wide screen the summary is just the heading: no marker, no
 * selection line, and pointer-events off so a click on the heading does not
 * fold a column that has room to stay open. A keyboard can still toggle it,
 * which is deliberate rather than defended against: it takes a reader
 * focusing a heading and pressing Enter, and nothing is lost by it.
 */
.archive-facet-summary {
    list-style: none;
    pointer-events: none;
}

.archive-facet-summary::-webkit-details-marker {
    display: none;
}

.archive-facet-current {
    display: none;
}

@media only screen and (max-width: 1000px) {
    .mf-archive-main,
    .mf-archive-side {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Document order: the sidebar, then the listing. */
    .mf-archive-side {
        order: 0;
    }

    /*
     * One line per plane when closed: the heading, then where the reader is,
     * in the same grey as the rows. The script after the aside closes the
     * planes on load at this width, so the sidebar costs three lines above
     * the listing until a plane is opened. Ticket 5d7e146dce.
     */
    .archive-facet-summary {
        list-style: revert;
        pointer-events: auto;
        cursor: pointer;
        padding: 0.35em 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .archive-facet-summary::-webkit-details-marker {
        display: revert;
    }

    .archive-facet-summary .archive-sidebar-title {
        display: inline;
        margin: 0;
    }

    .archive-facet-current {
        display: inline;
        margin-left: 0.5em;
        font-size: 0.8em;
        color: var(--awb-color6, #747474);
    }

    .archive-facet[open] > ul {
        margin-top: 0.5em;
        margin-bottom: 1em;
    }

    .archive-sidebar {
        margin-bottom: 1.5em;
    }
}

/*
 * Issues plane — volume folds and the earlier-volumes selector.
 * Ticket cd393ea5.
 */

/*
 * One selector for BOTH disclosures, the volume folds and the earlier-volumes
 * picker. They are the same kind of control and must look it.
 *
 * They did not, until ticket 8ebc9806. The picker was a sibling of
 * .archive-issue-list rather than an item in it, so it rendered outdented and
 * fell back to the default marker while the volume rows kept the native
 * triangle. That outdent is also what put its arrow inside the ten-pixel strip
 * of ticket d7ace23a, so the two defects had one origin.
 */
.archive-volume-group > details > summary,
.archive-volume-picker > summary,
.archive-year-group > details > summary,
.archive-year-picker > summary {
    cursor: pointer;
    list-style: revert;   /* keep the native disclosure triangle */
    /*
     * NOT bold. The weight was making the disclosure triangle heavy along with
     * the text, and it also split the plane in two: a volume with issues in
     * context renders as a <summary> and was bold, while a volume without any
     * renders as a plain <a> and was not — so two rows meaning the same thing
     * looked like different kinds of row. Operator, 2026-08-18.
     */
    font-weight: inherit;
}

.archive-volume-group > details > summary::-webkit-details-marker,
.archive-volume-picker > summary::-webkit-details-marker,
.archive-year-group > details > summary::-webkit-details-marker,
.archive-year-picker > summary::-webkit-details-marker {
    display: revert;
}

.archive-issue-sublist,
.archive-month-sublist {
    list-style: none;
    margin: 0.25em 0 0.75em 0;
    padding-left: 1em;
}

.archive-volume-picker,
.archive-year-picker {
    margin-top: 0.5em;
}

.archive-volume-older,
.archive-year-older {
    list-style: none;
    margin: 0.25em 0 0;
    padding-left: 1em;
    /*
     * Forty volumes of links is a long list once opened, so it scrolls inside
     * itself rather than pushing the rest of the page down. Closed it is one
     * line, which is what bounds the plane.
     */
    max-height: 18em;
    overflow-y: auto;
}

/*
 * The facet count: how many articles are behind a facet.
 *
 * It had NO styling at all — a bare span inheriting the label's type, so
 * "Issue 12 (Sep 2025) 11" read as a label ending in the number 11. It is
 * secondary information and needs to look it.
 *
 * NOT right-aligned into a column, which was the first instinct. The volume
 * rows are <summary> elements and need display: list-item to keep their native
 * disclosure triangle; making them flex to push the count right removes the
 * marker. An inline badge works in all four places the count appears — CPT
 * groups, subcategory terms, volume folds and issue rows — without touching any
 * parent's display.
 *
 * tabular-nums so 1, 11 and 294 occupy the same width per digit and the badges
 * do not jitter down a list.
 */
.facet-count,
.archive-count-badge {
    display: inline-block;
    margin-left: 0.5em;
    border-radius: 0.75em;
    background: rgba(0, 0, 0, 0.07);
    color: rgba(0, 0, 0, 0.62);
    font-size: 0.78em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;

    /*
     * HEIGHT FROM PADDING, NOT FROM LEADING. This was line-height: 1.6 with
     * almost no padding, which made a tall box by adding half-leading above
     * and below the digits — height and position could not then be changed
     * independently. Stating line-height 1 and paying for the height in
     * padding separates the two controls.
     *
     * The padding is UNEVEN, and the smaller number goes at the bottom. A
     * digit has no descender, but the line box still reserves the font's
     * descent below the baseline, so symmetric padding leaves dead space under
     * the numerals and they ride high — measured at 4.78px above against 5.54
     * below. The 0.07em difference is that gap, moved to the top.
     *
     * The total is 0.51em, down from the 0.7em the old leading amounted to:
     * the pill had been taller than the row's own text box, which left the
     * selected row's highlight nothing to clear it by.
     */
    line-height: 1;
    padding: 0.29em 0.5em 0.22em;

    /*
     * MIDDLE, then nudged. Baseline alignment put the badge's own baseline on
     * the row's, so the pill hung below the word beside it. Middle is better
     * but centres the pill on the row's x-height, and the eye reads the row on
     * its cap height — measured here, 6.6px against 9.3px — which still left
     * the pill about a pixel low next to "Volume 32". The offset closes that
     * gap; it is in em so it holds if the row scale changes again.
     */
    vertical-align: middle;
    position: relative;
    top: -0.09em;
}

/* The sidebar rows are at 0.8em, which took the badges down to a shade under
   10px — the smallest text on the page, and these numbers are the reason the
   column is worth reading. Sidebar only; the header and authors badges sit on
   full-size text and are already large enough. */
.facet-count {
    font-size: 0.85em;
}

/*
 * The archive header's own count — "9 articles" above the listing — is the
 * same fact as a facet badge and now reads the same way. It is a <p>, so it
 * needs its own margins back; inline-block makes the pill hug the text rather
 * than stretching the full column width.
 */
/*
 * The header line is `[201 articles] page 1 of 21`. The badge carries the
 * QUANTITY; the page position is plain text beside it. Operator, 2026-08-18:
 * pilling the whole sentence made the position look like part of the count.
 */
.archive-group-count {
    margin: 0 0 1em;
}

/*
 * Whose archive this is, on a faceted page. Sits between the title and the
 * issue, quieter than either, because it qualifies the heading rather than
 * competing with it.
 */
.archive-group-author {
    margin: 0 0 0.5em;
    color: rgba(0, 0, 0, 0.62);
}

/*
 * The qualifier beside the badge. Named `note` and not `page` because it
 * carries two different things: "page 1 of 21" in the single-list modes and
 * "showing 6" in the grouped one.
 */
.archive-count-note {
    margin-left: 0.5em;
    color: rgba(0, 0, 0, 0.62);
    font-size: 0.85em;
}

/*
 * NO BULLETS on either plane.
 *
 * Both top-level lists were inheriting `disc` with 40px of padding-left. In a
 * 288px sidebar that indent alone is 14% of the column, spent on a marker that
 * says nothing the layout does not already say — and against the count badges
 * the discs read as incidental. The sublists already did this; the outer lists
 * had simply been missed.
 *
 * The volume folds keep their disclosure triangle: that marker belongs to the
 * <summary> inside the <li>, not to the list item, and is set separately.
 *
 * THREE PLANES NOW, not two: the date plane joined every rule here rather
 * than getting a parallel block, so its months cannot end up indented
 * differently from the issues beside them. Which is exactly what happened
 * before it was added to them — 40px and hollow circles, against the issue
 * plane's 1em and none.
 */
.archive-category-list,
.archive-issue-list,
.archive-date-list {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

/*
 * The subcategory list too, which was the one left showing hollow circles at
 * 40px of indent after the outer lists were cleared. Indented to 1em to match
 * .archive-issue-sublist, so both planes nest by the same amount rather than
 * one at 16px and the other at 40px.
 */
.archive-subcategory-list {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}

/*
 * Facet links underline on hover.
 *
 * UNDERLINE RATHER THAN COLOUR, operator preference 2026-08-18, and it is the
 * more robust of the two here. Avada sets link colour through `body a` and
 * `a:hover` with var(--link_color) and var(--link_hover_color), so a colour
 * rule of ours is one more voice in that argument even when it wins on
 * specificity. text-decoration is not contested the same way.
 *
 * Applied on focus-visible as well, so a keyboard gets the same signal as a
 * pointer.
 */
/*
 * Facet links underline on hover.
 *
 * UNDERLINE RATHER THAN COLOUR, operator preference 2026-08-18. A colour hover
 * was already working via Avada's own --link_hover_color; this replaces it.
 *
 * THE MARKUP CARRIES .awb-no-decoration, and that is what makes this rule
 * apply at all. Avada enforces its site-wide "no link decoration" setting with
 * a selector that reaches roughly a hundred exclusions and, critically,
 * contains TWO ID selectors inside its first :not() group. A :not() takes the
 * specificity of its most specific argument, so that selector scores two IDs.
 * Scoping ours through #wrapper gave one ID and still lost — measured, the
 * computed value stayed `none`.
 *
 * That same selector excludes .awb-no-decoration, which is Avada's documented
 * opt-out. Using it means our links stop matching the rule entirely rather
 * than out-shouting it, so a plain class selector is enough here and no
 * !important is needed. Verified: with the class present the link no longer
 * matches Avada's selector and the underline lands.
 */
.archive-category-list a:hover,
.archive-category-list a:focus-visible,
.archive-issue-list a:hover,
.archive-issue-list a:focus-visible,
.archive-volume-picker a:hover,
.archive-volume-picker a:focus-visible,
.archive-date-list a:hover,
.archive-date-list a:focus-visible,
.archive-year-picker a:hover,
.archive-year-picker a:focus-visible,
.archive-volume-label:hover,
.archive-year-label:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/*
 * WHERE THE READER IS, in the sidebar.
 *
 * The selected facet renders as a <span> instead of an <a> — no link, because
 * it leads where you already are. But that was the ONLY difference: measured
 * 2026-08-26 on /news/other/2026/07/, the current rows "Other" and "July" came
 * out at weight 400 with no decoration, typographically identical to every
 * sibling. The rule below was written expecting "whatever the active state
 * sets", and nothing ever set anything.
 *
 * FILLED, not bold and not underlined. Underline is this sidebar's hover
 * signal, so a selected row wearing one would read as permanently hovered.
 * Weight was tried and withdrawn: it competed with the section headings, which
 * are the labels telling you what each part of the column filters on. Filling
 * is the treatment the pagination control already uses for "current", so the
 * sidebar, the contents list and the menu now all mark position the same way.
 *
 * IT MUST NOT LAND ON A LINK. Every row renders as a <span> when it is the
 * reader's position and as an <a> when it is somewhere they can go, so
 * `.facet-group-label` alone matched both: selecting College filled BOTH
 * "News" and "College" while News was still a live link back. Restricting to
 * span and summary is not a trick to hit the right elements — it is the same
 * distinction the template makes, read back out. A group wears its label in a
 * <summary>, which is why a volume-scoped page left its own row unmarked
 * before this.
 */
.archive-sidebar li.active > span,
.archive-sidebar li.active > details > summary,
.archive-sidebar .facet-group.active > span.facet-group-label {
    /*
     * MARKED BY BACKGROUND, NOT BY WEIGHT. This carried font-weight: 600,
     * which competed with the section headings; with the weight removed the
     * current row became indistinguishable from its siblings, because a
     * selected row is a span or a summary rather than a link and no theme
     * rule reaches it.
     *
     * Pale blue is what the contents list marks its current entry with, and
     * what the main menu marks a current item with, so the three say "you are
     * here" the same way. Operator, 2026-08-27.
     */
    background: var(--awb-custom_color_3, #e3f2fd);
    color: var(--awb-color8, #211818);

    /* The background needs room, or it reads as a highlighter pen. It also has
       to clear the count pill, which is taller than the text beside it, so the
       vertical padding is stated in em and sized against the pill rather than
       against the words. Negative margin keeps the text aligned with the rows
       above and below it. The row is inline, so this paints without moving
       anything. */
    padding: 0.38em 0.5em;
    margin-left: -0.5em;
    margin-right: -0.5em;
    border-radius: 2px;
}

/*
 * A FOLD'S LABEL IS A <summary>, which is display: list-item — block-level —
 * so the padding above stretched its fill the whole width of the column and
 * made the row 10px taller than the same row unselected, shifting everything
 * below it. fit-content shrinks the box to the words, and the negative margins
 * pay the padding back so the fill paints without moving any row.
 *
 * The left padding covers the disclosure triangle, which sits outside the
 * content box: without it the marker would stand outside its own fill.
 *
 * Triggering URL: /news/high-school/magazine/v32/ stands on the volume itself,
 * so the Volume 32 fold is the reader's position rather than an ancestor.
 */
.archive-sidebar li.active > details > summary {
    width: fit-content;

    /* NO VERTICAL PADDING, unlike the inline rows above. A block gets its
       height from its line box, which is already 25.6px here — the same fill
       the spans reach with padding. Adding padding on top of it made the fold
       10px taller than its unselected neighbours; taking it away leaves the
       row exactly where it sits when it is not selected. */
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;

    /* The left inset covers the disclosure triangle, which sits outside the
       content box; without it the marker would stand outside its own fill. */
    padding-left: 1.1em;
    margin-left: -1.1em;
}

/*
 * ...and only the DEEPEST one.
 *
 * An open year with a selected month inside it is an ancestor, not a position,
 * and filling both says the reader is in two places. Standing on July, "2026"
 * is context and "July" is where you are.
 *
 * :has() is doing the only thing it can do here — select a parent by its
 * contents — and the parent is the one that must yield. The rule read
 * `font-weight: inherit` and had been inert since the weight came off, which
 * left a volume and the issue inside it both filled.
 *
 * Triggering URL: /news/high-school/magazine/v32/i4/.
 */
.archive-sidebar li.active:has(li.active) > details > summary {
    background: none;
    color: inherit;
    padding: 0;
    margin: 0;
    width: auto;
}

/*
 * The badge on a filled row shades a step darker, or the pale blue behind it
 * swallows a 7% grey.
 *
 * The selector mirrors the fill's rather than naming lists: it covered the
 * issue and month sublists but not the category plane, so on /news/high-school/
 * the selected row's count sat at the same 7% as every unselected sibling.
 * Same distinction, so the same shape — a span or a summary, never an anchor.
 *
 * The child combinator is carrying weight here, not just tidiness. A fold that
 * is only an ancestor wears its label in a link, so its badge sits inside that
 * link rather than directly in the summary and correctly stays plain: a badge
 * one level down belongs to a row you can go to, not the row you are on.
 */
.archive-sidebar li.active > span > .facet-count,
.archive-sidebar li.active > details > summary > .facet-count,
.archive-sidebar .facet-group.active > span.facet-group-label > .facet-count {
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
}

/*
 * Issues archive — the volume filter, and the listing it heads.
 * Tickets 15721f0d, e92115d9.
 *
 * Sized in em throughout, so the block scales with whatever type size the
 * theme sets around it rather than being pinned to a pixel ladder that only
 * looks right at one root size.
 */

/*
 * The wrapper does the SEPARATION only. It has exactly one child, the form,
 * so laying it out as a flex row does nothing — the controls are inside the
 * form, not here. Putting the flex on the wrapper was my first attempt and it
 * silently had no effect on the row at all.
 */
.issues-filter {
    margin: 0 0 1.5em;
    padding: 0 0 1.5em;
    border-bottom: 0.0625em solid rgba(0, 0, 0, 0.12);
}

/* The form does the ROW: this is where the controls actually live. */
.issues-filter form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0;
}

.issues-filter label {
    margin: 0;
    font-weight: 600;
}

.issues-filter select {
    margin: 0;
}

/*
 * The no-JS submit control. Inside <noscript>, so it exists only when
 * scripting is off — see templates/issues-archive.php.
 *
 * Coloured from the theme's own palette rather than a chosen value:
 * awb-color-3 is WIN's navy. The fallback is the same colour literally, for
 * the case where the preset variables are not in scope.
 */
.issues-volume-go {
    /*
     * Extra air before the submit control, on top of the container's 0.5em
     * gap. The label and the select belong together and stay tight; the button
     * is a separate action and reads as one only if it is set apart.
     */
    margin-left: 0.75em;
    padding: 0.4em 1em;
    border: 0;
    border-radius: 0.2em;
    background: var(--wp--preset--color--awb-color-3, #002559);
    color: #fff;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.issues-volume-go:hover,
.issues-volume-go:focus-visible {
    background: var(--wp--preset--color--awb-color-4, #ed1c25);
}

/*
 * Names the volume the listing is ACTUALLY showing, as distinct from the one
 * the control says was chosen. Ticket 7f3a936a is what happens when those two
 * can disagree.
 */
.post-content h2.issues-volume-heading,
.issues-volume-heading {
    margin: 0 0 0.75em;
    /*
     * Relative to the SURROUNDING TEXT, not to a heading scale. The theme sets
     * `.post-content h2` to var(--h2_typography-font-size), which computes to
     * 40px here — the same size as the page's own <h1> block and far too loud
     * for a label on a listing.
     *
     * The doubled selector is specificity, not decoration: `.issues-volume-heading`
     * alone is (0,1,0) and loses to `.post-content h2` at (0,1,1), so the rule
     * was silently doing nothing and the heading rendered at the full 40px.
     * `!important` would also have worked and would have hidden the reason.
     */
    font-size: 1.25em;
    line-height: 1.2;
    font-weight: 700;
}

/*
 * A corrected URL announces itself. Standing decision, operator 2026-08-15.
 */
.win-archive-correction {
    margin: 0 0 1em;
    padding: 0.6em 0.9em;
    border-left: 0.1875em solid currentColor;
    font-style: italic;
}

/*
 * Shop Page
 */
.avada-product-images-global,
.product .product_meta,
.product .woocommerce-tabs,
.woocommerce .product-thumbnail,
.fusion-rollover-content .add_to_cart_button,
.fusion-rollover-content .fusion-rollover-linebreak,
form.woocommerce-cart-form .woocommerce_subscription_gifting_checkbox,
form.woocommerce-cart-form .woocommerce_subscription_gifting_checkbox + label,
form.woocommerce-checkout .woocommerce_subscription_gifting_checkbox,
form.woocommerce-checkout .woocommerce_subscription_gifting_checkbox + label,
.cart_totals .recurring-totals,
.cart_totals .shipping.recurring-total,
.cart_totals .cart-subtotal,
.woocommerce-checkout-review-order-table .recurring-totals,
.woocommerce-checkout-review-order-table .shipping.recurring-total,
.woocommerce-checkout-review-order-table .cart-subtotal{
    display: none !important;
}

body .shop_table tbody tr{
    height: auto;
}

.woocommerce .product .entry-summary{
    margin: 0 !important;
}

@media only screen and (min-width: 800px){
    .woocommerce .product .entry-summary .summary-container{
        width: 75%;
    }
}
@media only screen and (min-width: 1000px){
    .woocommerce .product .entry-summary .summary-container{
        width: 50%;
    }
}

form.cart .quantity,
.shop_table .product-quantity {
    display: none;
}
.woocommerce-page #content div.product div.summary {
    width: 100%;
}
.cart:not(.variations_form) > fieldset,
.woocommerce-variation-add-to-cart > fieldset{
    display: block;
    width: 100%;
}
body .woocommerce .product .entry-summary .summary-container{
    width: 100% !important;
    padding-bottom: 2em;
    border-bottom: 1px solid gray;
    margin-bottom: 2em;
}
body .woocommerce .product .entry-summary .summary-container .product_title{
    font-size: var(--h2_typography-font-size);
    margin-bottom: 0.5em !important;
}
body .woocommerce .product .entry-summary .price{
    margin: 0 0 1em !important;
}
@media (min-width: 800px) {
    body .woocommerce .product .entry-summary .summary-container .product-column{
        width: 50% !important;
        margin: 0 !important;
        float: left;
    }
    body .woocommerce .product .entry-summary .summary-container .product-column:first-child{
        padding-right: 2em;
    }
}
body .woocommerce .product .entry-summary .summary-container .product-border,
body .woocommerce .product .entry-summary .summary-container .first-payment-date{
    display: none;
}
body .woocommerce .product .entry-summary .summary-container form.cart{
    margin: 0 !important;
}
body .woocommerce .product .entry-summary .summary-container .single_variation_wrap{
    margin: 1em 0 0 !important;
}
body .woocommerce .product .entry-summary .summary-container .single_add_to_cart_button{
    margin: 1em 0 0 !important;
}
body .woocommerce .product .entry-summary .summary-container table.variations td{
    display: block;
    padding: 0;
}
body .woocommerce .product .entry-summary .summary-container table.variations td.label{
    font-size: small;
}
body .woocommerce .product .entry-summary .summary-container .woocommerce_subscription_gifting_checkbox + label:after{
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f06b';
    padding-left: 0.5em;
}
.woocommerce_subscriptions_gifting_recipient_email {
    margin: 0.5em 0 0.25em !important;
}

/*
 * Cart and Checkout
 */
body .woocommerce .woocommerce-info.cart-empty,
body .woocommerce .return-to-shop{
    height: auto;
    background: #eee;
    padding: 1em;
    font-family: inherit;
    font-size: 1rem;
    font-weight: normal;
    border: none;
    line-height: 1;
}
.woocommerce-MyAccount-content,
.woocommerce-content-box,
.shipping-coupon .coupon,
.cart-collaterals .cart_totals{
    border: none !important;
    padding: 0 !important;
}
.post-content .woocommerce h2,
.post-content .woocommerce h3{
    font-size: var(--h3_typography-font-size) !important;
}
.post-content .woocommerce *{
    border-color: #ccc !important;
}
.shipping-coupon .coupon .input-text{
    width: auto;
    margin-right: 2em;
}
@media (min-width: 800px) {
    body.woocommerce-cart .woocommerce-cart-form{
        float: left;
        width: 65%;
        padding-right: 2em;
        border-right: 1px solid gray;
    }
    body.woocommerce-cart .shipping-coupon,
    body.woocommerce-cart .cart-collaterals .cart_totals{
        width: 100%;
    }
    body.woocommerce-cart .cart-collaterals{
        float: left;
        width: 35%;
        margin: 0;
    }
    body.woocommerce-cart .cart-collaterals .cart_totals{
        padding-left: 2em !important;
    }
}
.woocommerce-notices-wrapper .woocommerce-message{
    padding: 0.75em !important;
    border: none !important;
    background: #eee !important;
    text-align: center;
}
.woocommerce-info:before,
.woocommerce-message:before,
.avada-myaccount-user .username .hello:before,
.avada-myaccount-user .message{
    display: none !important;
}
.woocommerce-notices-wrapper .woocommerce-message .wc-forward{
    float: none;
}
.woocommerce-notices-wrapper .woocommerce-message .wc-forward:after{
    content: "\a";
    white-space: pre;
}
.avada-myaccount-user{
    background: #eee !important;
    padding: 1em !important;
}
.avada-myaccount-user,
.avada-myaccount-user .username{
    border: none !important;
}
.avada-myaccount-user > div,
.avada-myaccount-user .username > span{
    padding: 0 !important;
}
.avada-myaccount-user .avada-myaccount-user-column:last-child{
    display: inline-block;
    text-align: right;
}
.avada-myaccount-user .view-cart a{
    display: inline-block;
    background: #002559;
    color: #fff;
    padding: 0.5em 1em 0.5em 2.5em !important;
    border-radius: 4px;
    margin-top: 0.5em;
    text-transform: capitalize !important;
}

/*
 * My Account
 */


/*
 * Online PDF Reader
 */

iframe.online-pdf{
    width: 100vw;
    height: 100vh;
}
.online-pdf-no-access{
    padding: 45vh 0;
    text-align: center;
}

/*
 * The dashboard strip's way through to its own paginated listing.
 *
 * The grouped author and issue archives show a few articles per CPT and now say
 * what they are a sample of — "Showing 6 of 41 articles" — with a link to that
 * CPT's own route, which does paginate. Ticket 671db440.
 *
 * The count line itself is deliberately left to inherit. No .archive-* class in
 * this template has ever carried CSS; they take Avada's type, and giving this
 * one a custom treatment would make it the odd line on the page. Only the link
 * is styled, and only enough to read as an action rather than as more grey text
 * in the same sentence.
 */
.archive-group-more {
    display: inline-block;
    margin-inline-start: 0.5em;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.archive-group-more:hover,
.archive-group-more:focus-visible {
    text-decoration: underline;
}

@media only screen and (max-width: 640px) {
    /*
     * Its own line on a phone, and a real touch target.
     *
     * Padding rather than a line-height, because the label above it can wrap
     * and a line-height sized for one line would double with it. This element
     * does not change its own font-size, so the em resolves against the
     * inherited size — the trap that produced two different box heights in the
     * paginator above.
     */
    .archive-group-more {
        display: block;
        margin-inline-start: 0;
        padding-block: 0.6em;
        white-space: normal;
    }
}

/*
 * Archive pagination — includes/pagination.php
 *
 * Every page is listed, always. There is no window and no ellipsis, so the
 * only job here is to make a possibly-long set readable and reachable.
 *
 * ONE WRAPPING GRID. Previous, the numbers, and Next are all list items in the
 * same flex flow, so they wrap together. An earlier version had the two steps
 * as siblings OUTSIDE the list, which looked fine on one line and fell apart
 * the moment the numbers wrapped: the steps floated beside a block instead of
 * sitting in a row with it.
 *
 * It WRAPS rather than scrolls. A version before that scrolled horizontally,
 * justified by the claim that wrapping would change the control's height
 * between pages — reasoning carried over from a WINDOWED control, which does
 * not apply here. Every page is shown on every page, so the item count is
 * identical throughout an archive and the wrapped height is constant.
 *
 * The block is CONSTRAINED rather than spanning the content column, and
 * CENTRED within it. Left to fill the width it reads as a stray line of
 * numbers; held to roughly a dozen per row and centred, it reads as a block
 * that belongs to the listing above it.
 *
 * Two centrings are needed and they are not the same thing. `margin-inline:
 * auto` centres the BLOCK in the content column. `justify-content: center`
 * centres the ITEMS within that block, which is what stops a part-full last
 * row hanging off to the left when the count is not a multiple of the row.
 */
.win-pagination {
    margin: 2.5em 0 1em;
    font-family: var(--awb-typography1-font-family, inherit);
}

.win-pagination-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3em;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    /* Roughly a dozen numbers to a row, with room for the two wider steps. */
    max-width: 38em;
}

/*
 * THE ROW HEIGHT IS SET HERE, ON THE LI, AND NOWHERE ELSE. This is structural,
 * not stylistic — putting it on the boxes is a bug that has now been made
 * twice, in both viewports.
 *
 * `min-height: 2.4em` on the shared box rule LOOKS like it gives every item
 * the same height and does not: em resolves against the ELEMENT'S OWN
 * font-size, and .win-pagination-step sets 0.78em. Measured on desktop before
 * this change: number boxes 38.4px, step boxes 29.95px, from one identical
 * declaration. The steps sat visibly short in the row.
 *
 * The li never changes font-size, so 2.4em resolves once, at the container's
 * size, for every item alike. The box below stretches into it (align-items
 * defaults to stretch), so a box can no longer disagree with its neighbours
 * about how tall the row is, whatever type size it chooses for its label.
 */
.win-pagination-pages li {
    margin: 0;
    flex: 0 0 auto;
    display: flex;
    min-height: 2.4em;
}

/*
 * Numbers and steps share a box so the control reads as one object. They
 * differ in width only, which is what lets Previous and Next stay legible
 * without breaking the grid.
 *
 * No height here. See the li above.
 */
.win-pagination-page,
.win-pagination-step {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.6em;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(116, 116, 116, 0.35);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.win-pagination-page {
    min-width: 2.5em;
    font-variant-numeric: tabular-nums;
}

/*
 * Both steps take the width of the longer label, so Previous and Next are the
 * same box. Sized in ch, which tracks the font's own character width, rather
 * than an em value that would need retuning if the type changed.
 *
 * "PREVIOUS" is 8 characters. This said 11ch, with a comment asserting that
 * left room for the letter-spacing and the padding. It did not: measured on
 * desktop, 11ch computed to 62.19px, NEXT sat exactly on it and PREVIOUS
 * overflowed to 64.5px, so the two boxes differed by 2.3px — the very thing
 * the rule exists to prevent. 12ch clears the measured width with margin.
 *
 * If either label is ever translated to something longer, this is the line
 * that needs revisiting — the labels already go through __(), so that is a
 * real possibility rather than a hypothetical. Check it by measuring both
 * boxes, not by counting characters, which is how the 11ch claim went wrong.
 */
.win-pagination-step {
    min-width: 12ch;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78em;
    white-space: nowrap;
}

.win-pagination-page:hover,
.win-pagination-page:focus-visible,
.win-pagination-step:hover,
.win-pagination-step:focus-visible {
    border-color: currentColor;
    background-color: rgba(116, 116, 116, 0.12);
}

/*
 * The current page is filled, not merely bold. Among a dozen tabular numerals
 * a weight change alone is easy to lose, and this is the one thing the control
 * must answer at a glance.
 */
.win-pagination-page.is-current {
    background-color: var(--awb-color8, #2b2b2b);
    border-color: var(--awb-color8, #2b2b2b);
    color: var(--awb-color1, #fff);
    font-weight: 700;
}

/*
 * Kept in the grid when unavailable rather than removed, so the numbers do not
 * shift sideways between page 1 and page 2.
 */
.win-pagination-step.is-disabled {
    opacity: 0.3;
    border-style: dashed;
}

/*
 * MOBILE. Measured at 375px before changing anything, which is the only way
 * this was ever going to be settled:
 *
 *   - PREVIOUS sat inline at the head of the first row and pushed the numbers
 *     out of alignment, so the grid read 6, 8, 7 rather than as even rows.
 *   - NEXT was ORPHANED on a row of its own at the bottom.
 *   - Boxes were about 39px tall, under the 44px touch target guidance.
 *
 * So on small screens the two steps are pulled OUT of the number flow and on
 * to their own row, sharing the width. `order: -1` moves them ahead of the
 * numbers without changing the DOM, so the reading order for a screen reader
 * stays Previous, pages, Next.
 */
@media only screen and (max-width: 640px) {
    .win-pagination-pages {
        gap: 0.3em;
        max-width: none;
    }

    /*
     * flex-shrink must be 0. With `flex: 1 1` the steps shrank and shared row
     * one with the first four numbers — measured, not assumed. At 0 0 the two
     * of them fill the line exactly and nothing else fits beside them.
     */
    /*
     * The `li` in the selector is load-bearing.
     *
     * The base rule is `.win-pagination-pages li { flex: 0 0 auto }`, which at
     * 0-1-1 is MORE specific than a bare `.win-pagination-step-item` at 0-1-0.
     * Its shorthand sets flex-basis to auto and wins, so the steps kept
     * sharing row one with the first four numbers no matter what basis was
     * written here.
     *
     * Measured, after two wrong guesses: I first blamed flex-shrink, then
     * blamed calc() inside the flex shorthand. Reading the computed style in
     * the browser gave the actual answer — flexBasis: "auto" with the rule
     * apparently applied.
     */
    .win-pagination-pages li.win-pagination-step-item {
        order: -1;
        flex-basis: calc(50% - 0.15em);
    }

    /*
     * 44px of touch target, in em so it scales with the reader's type size
     * rather than being pinned to a device pixel.
     *
     * ONE declaration, on the li, for the same reason as the desktop rule
     * above. This was previously two — 2.75em on the number and 3.67em on the
     * step — because each resolved against its own font-size and the step sets
     * 0.75em. Two numbers meaning one height, and the 3.67em was arrived at by
     * dividing 2.75 by 0.75 after an attempt at 2.75em produced a 33px step,
     * which is what sent me reaching for px. Setting the height where the
     * font-size does not change removes the arithmetic entirely.
     */
    .win-pagination-pages li {
        min-height: 2.75em;
    }

    .win-pagination-step {
        width: 100%;
        min-width: 0;
        font-size: 0.75em;
    }

    .win-pagination-page {
        min-width: 2.75em;
        padding: 0 0.4em;
    }
}

/*
 * The writers directory at /authors/.
 *
 * Sized in em throughout, matching the issues archive above, so the block
 * scales with the surrounding type rather than being pinned to a pixel ladder.
 *
 * COLUMNS, NOT A SINGLE LIST. 44 names in one column is a scroll; in columns
 * it is a scan, which is what a directory is for. `columns: 3 16em` sets the
 * count as a maximum and the width as the real constraint, so it collapses to
 * two and then one on narrow viewports without a media query.
 *
 * The letter rules are grouping, not decoration: they are what makes the
 * alphabetical order legible at a glance. They carry aria-hidden in the
 * template because a screen reader announcing "B" between names is noise —
 * the names themselves are already in order.
 */

.mf-authors {
    max-width: 62em;
    margin: 0 auto;
    padding: 2em 1em 3em;
}

.mf-authors-intro {
    margin: 0 0 1.5em;
}

.mf-authors-list {
    columns: 3 16em;
    column-gap: 2.5em;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * A letter and its names are ONE box, and the box is what refuses to break.
 *
 * The first attempt put break-after: avoid on the rule itself, which is the
 * property meant for this and is not reliably honoured in multi-column: "K"
 * ended column one while Klessinger and Klingman opened column two, and "R"
 * stranded the same way. break-inside on a containing box IS honoured, so the
 * group is a box.
 *
 * The cost is that a long group can no longer be split across columns, so the
 * columns balance less evenly. That is the right trade: a ragged column foot
 * reads as layout, an orphaned letter reads as a mistake.
 */
.mf-authors-group {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 1.4em;
}

.mf-authors-group > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mf-authors-letter {
    margin: 0 0 0.4em;
    padding-bottom: 0.15em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.mf-authors-item > a {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.2em 0;
}

.mf-authors-name {
    flex: 1 1 auto;
}

.mf-authors-item .facet-count {
    flex: none;
    margin-left: auto;
}

.mf-authors-empty {
    color: rgba(0, 0, 0, 0.6);
}

/*
 * The feeds directory, /feeds/. The same box as the writers directory, and the
 * same columns: each group's list flows into three columns, and a row, a
 * section with its terms or one writer, is a box that refuses to break, as a
 * letter and its names are on /authors/. The feed address sits UNDER its name
 * rather than beside it, in a smaller monospaced face, so a row stays narrow
 * enough for a column. Operator, 2026-09-11. Ticket f0cbc08a54.
 */
.mf-feeds {
    max-width: 62em;
    margin: 0 auto;
    padding: 2em 1em 3em;
}

.mf-feeds-intro {
    margin: 0 0 1.5em;
}

.mf-feeds-intro .archive-count-badge {
    margin-right: 0.6em;
}

.mf-feeds-group {
    margin: 0 0 1.8em;
}

.mf-feeds-heading {
    margin: 0 0 0.6em;
    padding-bottom: 0.15em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mf-feeds-list {
    columns: 3 16em;
    column-gap: 2.5em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mf-feeds-children {
    margin: 0.3em 0 0 1.1em;
    padding: 0;
    list-style: none;
}

.mf-feeds-list > .mf-feeds-item {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 0.9em;
}

.mf-feeds-item {
    display: block;
    padding: 0.1em 0;
}

.mf-feeds-name,
.mf-feeds-address {
    display: block;
}

/*
 * A term under its section is a sub-heading, and reads as one at a smaller
 * size; at the section's size the longer names wrapped inside a column even on
 * a wide screen. Operator, 2026-09-11. The address keeps its own size.
 */
.mf-feeds-children .mf-feeds-name {
    font-size: 0.85em;
    line-height: 1.3;
}

/*
 * Each name-and-address pair stands apart from the next, so the eye and the
 * pointer can tell where one ends and the next begins. Operator, 2026-09-11.
 */
.mf-feeds-children .mf-feeds-item {
    padding: 0;
    margin: 0 0 0.75em;
}

.mf-feeds-children .mf-feeds-item:last-child {
    margin-bottom: 0;
}

.mf-feeds-address {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7em;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6);
    word-break: break-all;
}

/* A glyph before a site index sublabel, Avada's icon font, sized to the text. */
.mf-sitemap-glyph {
    margin-right: 0.4em;
    font-size: 0.9em;
    vertical-align: baseline;
}

/*
 * The site index — [mf_sitemap].
 *
 * Rendered at /toc/ and inside the Avada Theme Builder 404 body, so every
 * selector is namespaced under .mf-sitemap: it has to survive being dropped
 * into a Fusion column without inheriting or leaking layout.
 *
 * Sized in em, matching the issues archive and the writers directory, so the
 * block scales with the surrounding type.
 */

/*
 * SELF-GROUNDED, and this is not decoration.
 *
 * The block renders in two places with opposite grounds: the /toc/ page, which
 * is white, and the Theme Builder 404 body, whose container is rgb(19,20,15).
 * Written to inherit, it failed in both directions at once on the 404 — band
 * titles at rgba(0,0,0,.55) were black on near-black, and the subcategory
 * links came out rgb(255,255,255) on WHITE cards, because Avada sets a light
 * link colour for that dark container and this block inherited it.
 *
 * So every colour here is declared, none inherited, and the block paints its
 * own background. A component that can be dropped into an arbitrary Fusion
 * column cannot assume anything about what is behind it.
 */
.mf-sitemap {
    --mf-sitemap-gap: 1em;
    --mf-ink: #101d33;
    --mf-ink-muted: rgba(16, 29, 51, 0.62);
    --mf-ink-faint: rgba(16, 29, 51, 0.45);
    --mf-rule: rgba(0, 0, 0, 0.1);
    --mf-surface: #fff;
    --mf-surface-alt: #f4f6fa;
    --mf-navy: #002559;
    --mf-gold: #ffc72c;

    padding: 1.5em;
    border-radius: 0.375em;
    background: var(--mf-surface-alt);
    color: var(--mf-ink);
    text-align: left;
}

/* Links inside the block take the block's ink, never the page's. */
.mf-sitemap a {
    color: var(--mf-ink);
}

/*
 * Hovering underlines, the same as the archive lists do. See the note above
 * .archive-category-list for why .awb-no-decoration in the markup is what makes
 * this land: Avada enforces its no-decoration setting with a selector scoring
 * two IDs, and that class is its documented opt-out, so a plain class selector
 * is enough and no !important is needed.
 */
.mf-sitemap a:hover,
.mf-sitemap a:focus {
    color: var(--mf-navy);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.mf-sitemap .mf-sitemap-cardhead.has-image .mf-sitemap-cardname,
.mf-sitemap .mf-sitemap-cardhead.has-image .mf-sitemap-cardcount {
    color: #fff;
}

/* The count pills are shared with the archive sidebar, where the ground is
   always light. Restated here so they survive the dark container. */
.mf-sitemap .facet-count {
    background: rgba(0, 0, 0, 0.07);
    color: var(--mf-ink-muted);
}

/*
 * Cleared on 2026-08-31, when the page became a set of self-naming cards:
 *
 *   .mf-sitemap-home, -homelink, -homearrow   the "Back to the home page"
 *                                             button, which the site header
 *                                             already carries
 *   .mf-sitemap-bandtitle                     SECTIONS and THE MAGAZINE, AND
 *                                             THE REST, labels above rows of
 *                                             cards that name themselves
 *   .mf-sitemap-bandnote                      the sentence under the topics
 *                                             heading
 *   .mf-sitemap-tag                           the "Tool" pill on Rankings
 *                                             Tables
 *   .mf-sitemap-awards, -awardcard, -medal    the awards band
 *
 * The bands themselves remain as spacing, below.
 */
.mf-sitemap-band {
    margin: 0 0 2.5em;
}

/* ---- sections -----------------------------------------------------------
 * auto-fill with a min track, so the column count falls out of the available
 * width rather than out of a media query. 17em holds the longest subcategory
 * label ("Senior Level & International") on two lines without the count being
 * squeezed off. Below roughly 2 columns it collapses to one by itself, which
 * is the phone case.
 */
.mf-sitemap-sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17em, 1fr));
    gap: var(--mf-sitemap-gap);
}

.mf-sitemap-card {
    display: flex;
    flex-direction: column;
    padding: 0.9em 1em 1em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.375em;
    background: #fff;
    box-shadow: 0 2px 5px rgba(116, 116, 116, 0.2);
}

/* The rule runs the full width of the card, so the head is pulled out through
   .mf-sitemap-card's 1em side padding and the padding put back inside. The
   artwork variant below already does this by its own route; matching here means
   every head on the page carries an edge-to-edge rule whether it has a picture
   or not. No ratio is needed, unlike .mf-sitemap-mini h3: this box inherits the
   card's font size, so -1em here is the card's own 1em. */
.mf-sitemap-cardhead {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    margin: 0 -1em 0.5em;
    padding: 0 1em 0.45em;
    border-bottom: 2px solid #ffc72c;
    font-weight: 700;
}

/*
 * ASPECT RATIO, NOT A FIXED HEIGHT. The source images are 1500x844 and the
 * section name is lettered into the artwork, so any box shorter than 16:9
 * crops that lettering — "USA WRESTLING STATES/COACHES" is two lines and loses
 * the second one. Matching the ratio means the graphic is never cut, at any
 * column width.
 */
.mf-sitemap-cardhead.has-image {
    align-items: flex-end;
    aspect-ratio: 1500 / 844;
    margin: -0.9em -1em 0.7em;
    padding: 0.5em 0.6em;
    border-radius: 0.375em 0.375em 0 0;
    background-color: #002559;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

/*
 * The scrim exists to make OUR type legible over the artwork, so it is drawn
 * only when our type is there. Unconditional, it darkened every image well
 * below how the home page shows the same files, for no reader benefit: the
 * label is suppressed by default because the artwork carries its own, and the
 * count sits on an opaque pill that grounds itself.
 */
.mf-sitemap-cardhead.has-image:not(.is-wordless)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 18, 42, 0.82) 8%, rgba(0, 18, 42, 0) 78%);
}

/*
 * Hovering an artwork card washes it in the head's own fallback navy.
 *
 * The underline the rest of the page gained cannot reach here. Both spans in an
 * artwork head are position:absolute, and text decoration does not propagate to
 * out-of-flow descendants, so the head was the one link on the page that said
 * nothing at all when the pointer was over it. Colour is what is left.
 *
 * ONLY THE ARTWORK CASE NEEDS THIS. Drop .has-image and neither span is
 * positioned any more, so both are back in flow and the underline propagates as
 * it does everywhere else. A head with no picture is already answering.
 *
 * ::before, because ::after is the scrim above. It is generated as the first
 * child, so at equal z-index it paints under the name and the count pill and
 * over the picture, which is the order this wants. overflow:hidden on the head
 * clips it to the rounded top corners.
 *
 * a.mf-sitemap-cardhead, not .mf-sitemap-cardhead: the topic card's head is a
 * div that goes nowhere, and must never take a state that says otherwise.
 *
 * #002559 is the colour the head shows when an image is missing, so a hovered
 * card and an artless one sit in the same family. Every one of these carries
 * its section name as lettering in the picture, so deepening it makes that name
 * easier to read rather than harder.
 */
a.mf-sitemap-cardhead.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 37, 89, 0);
    transition: background-color 0.15s ease-in-out;
}

a.mf-sitemap-cardhead.has-image:hover::before,
a.mf-sitemap-cardhead.has-image:focus-visible::before {
    background-color: rgba(0, 37, 89, 0.38);
}

.mf-sitemap-cardhead.has-image .mf-sitemap-cardname {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 1.35em;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.mf-sitemap-cardname {
    color: var(--mf-navy);
    font-size: 1.1em;
}

/* The section tally names its unit once per card; the subcategory pills below
   inherit it by position rather than repeating "articles" seven times. */
.mf-sitemap-cardcount {
    margin-left: auto;
    flex: none;
    font-size: 0.78em;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--mf-ink-muted);
}

.mf-sitemap-cardhead.has-image .mf-sitemap-cardcount {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    z-index: 1;
    margin: 0;
    padding: 0.2em 0.5em;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(0, 18, 42, 0.74);
    color: #fff;
    font-weight: 700;
}

/* ---- subcategory rows ---------------------------------------------------
 * The alignment the operator asked for. Three rules do the work:
 *   flex + margin-left:auto   pins every count to the same right edge
 *   flex:none on the count    stops a long label squeezing the digits
 *   min-width:0 on the label  lets it wrap instead of forcing the row wider
 * baseline alignment keeps the count on the FIRST line of a wrapped label
 * rather than drifting to the last.
 */
.mf-sitemap-subs {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Set on the row rather than the label, so the count comes down with it and
   the two keep the size relationship they were drawn with. .mf-sitemap-mini's
   rows carry the same size for the same reason. */
.mf-sitemap-subs > li > a {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.18em 0;
    font-size: 0.9em;
}

.mf-sitemap-sublabel {
    flex: 1 1 auto;
    min-width: 0;
}

/* .mf-sitemap-mini carried counts too, beside "All issues" and "All writers",
   until both pills came off on 2026-08-31. */
.mf-sitemap-subs .facet-count {
    flex: none;
    margin-left: auto;
}

/* Rankings Tables is the one row in the sections that is not an archive, so it
   has no article count by kind. It carried an em-dash, which reads as a missing
   value rather than an inapplicable one, then a dashed "Tool" pill. Both are
   gone as of 2026-08-31 and the row simply shows no count, which says the same
   thing and says it quietly. */

/*
 * The topic pages head takes the standing-links treatment, not the section
 * cards'.
 *
 * Declared with .mf-sitemap-mini h3 rather than copied from it, so "The
 * magazine", "Writers" and "Topic pages" cannot drift apart.
 *
 * It was briefly given the section card head's type, navy at 1.1em, which is
 * the other reading of "like the cards". Small uppercase is what the operator
 * chose on seeing both. It also means the h2 keeps Avada's heading family,
 * which is what the h3s beside it already use, so nothing here resets
 * font-family the way the earlier version had to.
 *
 * margin stays 0: .mf-sitemap-cardhead sets the spacing under it and the yellow
 * rule, and a margin here would push the text off that rule.
 *
 * PREFIXED WITH .mf-sitemap, and that prefix is load-bearing. Inside the Theme
 * Builder 404 body the block sits in Avada's .post-content, and Avada's dynamic
 * `.post-content h3` is (0,1,1), the same as `.mf-sitemap-mini h3`, and comes
 * later, so it won: measured 2026-09-10 on the 404 at 375px, the heading was
 * 27.2px and not uppercase against 12.48px uppercase on /toc/, and the rule
 * beneath, whose margins are in the heading's em, overshot the card on both
 * sides. (0,2,1) wins in both places. Same fight as .issues-volume-heading.
 */
.mf-sitemap .mf-sitemap-mini h3,
.mf-sitemap .mf-sitemap-topiccard .mf-sitemap-cardname {
    color: var(--mf-ink-muted);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.mf-sitemap-topiccard .mf-sitemap-cardname {
    margin: 0;
}


/* ---- awards -------------------------------------------------------------
 * Nothing here any more. The awards were a four-track grid of bordered boxes,
 * each with a numbered yellow medal and the first two ringed in yellow; then
 * one card of plain rows; and on 2026-08-31 the band went from the page
 * altogether, along with the two queries that fed it. The About WIN column
 * links to /win-awards/, which is where the seven of them live.
 *
 * MFWinSiteStructure::awards() is still there and still used: the nav menu
 * builds its awards submenu from the same child pages.
 */

/* ---- the rest ----------------------------------------------------------- */
/* The sections grid's track, so a standing-links card is the same width as
   every other card on the page. It was 13.5em, which fitted more of them per
   row and made them the one group that did not line up with anything. */
.mf-sitemap-cols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17em, 1fr));
    gap: var(--mf-sitemap-gap);
}

.mf-sitemap-mini {
    padding: 0.85em 0.95em;
    border: 1px solid var(--mf-rule);
    border-radius: 0.375em;
    background: var(--mf-surface);
}

/* The type is declared with the two card heads that share it, above. The rule
   beneath is .mf-sitemap-cardhead's, restated here rather than shared: these
   are h3s in a plain box, not a .mf-sitemap-cardhead, and the head also carries
   flex and artwork behaviour that a standing-links heading has no use for.
 *
 * THE DIVISION BY 0.78 IS THE POINT. .mf-sitemap-mini pads 0.95em in its own
 * font size, and this heading is 0.78em of that, so a bare -0.95em here would
 * pull back only four fifths of the padding and leave the rule short of the
 * edge. Dividing by the same 0.78 states the padding in the heading's scale,
 * and because both are multiples of one base it stays exact if the page type
 * is ever scaled. A rem would also land today and stop being right the moment
 * anything around it changed size. */
.mf-sitemap-mini h3 {
    margin: 0 calc(-0.95em / 0.78) 0.5em;
    padding: 0 calc(0.95em / 0.78) 0.45em;
    border-bottom: 2px solid #ffc72c;
}

.mf-sitemap-mini ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mf-sitemap-mini li > a {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.16em 0;
    font-size: 0.9em;
}

/* ---- phones -------------------------------------------------------------
 * The grids collapse on their own via minmax, so this only handles what track
 * sizing cannot: the artwork band is proportionally very tall in a single
 * full-width column, where 16:9 of a 375px viewport is over 200px of picture
 * before any content. Capped there, accepting a crop, because at one column
 * the section name is also carried by the card beneath it.
 */
@media (max-width: 480px) {
    .mf-sitemap-cardhead.has-image {
        aspect-ratio: auto;
        min-height: 5.5em;
        max-height: 8em;
    }

}

/*
 * Article table of contents.
 *
 * These rules were GENERATED AND INLINED, printed as a <style> block by
 * Win\Toc\renderer on every article carrying a list — ten static rules,
 * byte-identical every time, in the markup. They are ordinary styling and
 * belong here with everything else the theme owns. Operator, 2026-08-26.
 *
 * THE STICKY VARIANT IS A CLASS, not generated CSS. Whether the list pins as a
 * sidebar is a per-instance flag: false when an Avada column already handles
 * the pinning, true when it does not. That was the one rule the renderer built
 * at runtime, and a variant selected by a class is how it stops being a reason
 * to emit a stylesheet.
 *
 * top: reads --win-header-offset, which the header publishes from its own
 * measured height. The fallback is the TABLET figure plus its gap, because if
 * the property never arrives the safe direction is too far down: too far down
 * is untidy, too far up is invisible behind the menu.
 */
/* No typography of its own: it is an h4 and takes the h4 scale, which is what
   the Related Articles heading beside it does. Only the spacing is stated. */
.win-toc__heading {
    margin: 0 0 12px;
}

.win-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The same step below body copy the archive sidebar's filter rows take, so the
   two lists in the same column read as one scale. Stated on the outer list
   only: the nested list sits inside an item of this one, so a second 0.8em
   there would compound to 10px. Nesting is shown by indent, not by size —
   again as the sidebar does it. */
.win-toc__list--0 {
    font-size: 0.8em;

    /* A DIVIDER, NOT A BRAND MARK. This read var(--awb-color4, #e2e2e2), and
       the #e2e2e2 fallback says a light grey was meant — but color4 is set in
       this palette, to #ed1c25, so the rail rendered as a red line down the
       contents list. The same neutral the issues filter rules with. */
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.win-toc__list--1 {
    margin-left: 14px;
}

.win-toc__item {
    margin: 0;
}

/*
 * FULL WIDTH, unlike the archive sidebar's fill, which hugs its text. A
 * contents entry is a whole section title and wraps to three or four lines on
 * a narrow rail; a fill shaped to that text would be a ragged staircase. Full
 * width also gives the scroll-spy a band to move down, which is what it is
 * for. The rounding matches the sidebar's.
 *
 * Leading is left where it is rather than opened to the sidebar's 2. That
 * value separates single-line rows; here it would open the gaps INSIDE a
 * wrapped entry, and the padding already separates one entry from the next.
 */
.win-toc__link {
    display: block;
    padding: 0.45em 0.75em;
    border-radius: 2px;
    color: var(--awb-color8, #211818);
    text-decoration: none;
}

.win-toc__link::before {
    content: "\203A";
    color: rgba(116, 116, 116, 0.55);
    margin-right: 8px;
}

/* Hover matches the main menu's submenu highlight: Pale Blue in the Avada
   palette, which is --awb-custom_color_3 and the same variable the menu uses
   through --awb-submenu-active-bg. Hovering "Photographs" in the contents list
   on /usaw/magazine/v32/i5/48875-moen-on-a-nission/ shows it. */
.win-toc__link:hover {
    background: var(--awb-custom_color_3, #e3f2fd);
    color: var(--awb-color8, #211818);
}

/* Nested links are grey, and that rule is later in this file with the same
   specificity as the hover above, so it would win and leave a hovered
   sub-item grey on pale blue. Stated here so both levels darken on hover. */
.win-toc__list--1 .win-toc__link:hover {
    color: var(--awb-color8, #211818);
}

/* Shown where a listing would be when a real route has nothing in it, e.g.
   /previews/dual-meet-previews/ before anything is filed under that term. */
.archive-empty {
    margin: 24px 0 40px;
    color: var(--awb-color6, #747474);
    font-size: 15px;
}

/* The section you are looking at. Set by assets/win-toc.js as you scroll and
   left in place after clicking an entry, so the list always says where you
   are. Same colour as hover, which is how the main menu marks a current item. */
.win-toc__link--current,
.win-toc__list--1 .win-toc__link--current {
    background: var(--awb-custom_color_3, #e3f2fd);
    color: var(--awb-color8, #211818);
}

/* A link whose target is not in the document. Should never render; coloured so
   it is obvious rather than silent if it does. */
.win-toc__link--dead {
    color: #c0161d;
}

/* Nested entries are marked by indent and colour. The size came off with the
   scale above: at 0.8em they were 14px against the parent's 12.8px, which put
   a sub-entry LARGER than the entry containing it. */
.win-toc__list--1 .win-toc__link {
    color: var(--awb-color6, #747474);
}

@media (min-width: 768px) {
    .win-toc--sticky {
        position: sticky;
        top: var(--win-header-offset, 149px);
        align-self: start;
    }
}
/*
 * How far below the fixed header anything must start.
 *
 * --win-header-height is the MEASUREMENT and is the one thing here that cannot
 * live in a stylesheet: it is the header's own rendered height, published per
 * breakpoint by Win\header_offset and then corrected by a ResizeObserver when
 * the header outgrows what it declares. That block is the only CSS this theme
 * still generates, and it is three declarations.
 *
 * Everything BUILT on it is static, so it belongs here. It used to be printed
 * into every page alongside the measurement. Operator, 2026-08-26.
 *
 * THE GAP LIVES HERE, in one declaration, and nowhere in PHP. It is breathing
 * room below the header's bottom border — a presentation constant, not a
 * measurement — and keeping it beside the calc means the published value stays
 * a pure height that the script can overwrite without knowing about it.
 *
 * scroll-padding-block-start goes on the SCROLL CONTAINER, not scroll-margin on
 * the targets. Declared once, every anchor jump on the page obeys it — the
 * table of contents, #content, and anything added later. Setting both would
 * offset twice.
 */
:root {
    --win-header-offset: calc(var(--win-header-height) + 16px);
}

html {
    scroll-padding-block-start: var(--win-header-offset);
}
/*
 * Week headings inside a month listing.
 *
 * A month archive is broken out by week rather than by day: at a few posts a
 * week most days hold one article, so day headings would run at nearly one per
 * item. Weeks chunk the same content into four or five groups.
 *
 * A RULE ACROSS THE COLUMN, not a bold line of text. It separates groups of
 * cards, so it has to read as a divider; the cards carry their own weight and a
 * heading competing with them reads as another card.
 *
 * The count sits right, pushed by margin-left:auto rather than a fixed column,
 * so the label and the issue name can be any length without the count moving
 * off the edge.
 *
 * The issue name is the quiet half deliberately. "Week 4" is the structure;
 * "Volume 32 Issue 5" explains why that week has twelve articles in it when the
 * others have one.
 */
.archive-week-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2em 0.75em;
    margin: 2.5em 0 1.2em;
    padding-bottom: 0.4em;
    /*
     * A NEUTRAL hairline, not var(--awb-color4). That token is WIN's brand
     * red on this theme — it is what draws the table of contents accent —
     * and a full-width red rule under every week reads as a warning rather
     * than a divider. Measured 2026-08-26: rgb(237, 28, 37).
     *
     * The same value the facet badge uses, so the two neutrals match.
     */
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 1rem;
    line-height: 1.3;
}

/* The first week opens the listing, where the separating margin is the header's
   job rather than the heading's. */
.archive-week-heading:first-child {
    margin-top: 0.5em;
}

.archive-week-label {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.archive-week-issue {
    color: var(--awb-color6, #747474);
}

.archive-week-count {
    margin-left: auto;
    color: var(--awb-color6, #747474);
    font-size: 0.875em;
    white-space: nowrap;
}

/*
 * Archive header: four lines that describe one listing.
 *
 * They were spaced as four independent blocks — measured 2026-08-26, 193px from
 * the top of "News" to the count, with 28px of collapsed margin between each
 * line. That is the spacing of separate sections, and these are not separate:
 * they are one sentence broken across lines, "News / High School / September
 * 2025 / 1 article".
 *
 * Margins are set on BOTH sides where they meet, because adjacent vertical
 * margins collapse to the larger and setting only one leaves the other in
 * charge.
 */
.archive-group-title {
    margin-bottom: 0.1em;
}

.archive-group-title2,
.archive-group-author,
.archive-group-issue,
.archive-group-date {
    margin-top: 0;
    margin-bottom: 0.15em;
}

/*
 * The subtitle is the TERM, not a second heading.
 *
 * It was 600 at 28px, the same weight as the CPT above it, so the two read as
 * equals when one is a narrowing of the other. Medium carries the hierarchy
 * without shouting. Operator, 2026-08-26.
 */
.archive-group-title2 {
    font-weight: 500;
}

.archive-group-count {
    margin-top: 0.75em;
}

/*
 * The week heading was bold throughout: an h3 at 600, with the label pushed to
 * 700 on top of it, so the issue name and the count came out as heavy as the
 * label. Only the label needs weight, and less of it than it had.
 */
.archive-week-heading {
    font-weight: 400;
}

.archive-week-label {
    font-weight: 600;
}

/*
 * The sidebar is a filter, not a second article.
 *
 * Its body was the theme's 16px on a 27.52px line — 1.72, which is reading
 * measure for prose and loose for a dense list of facets. Its section headings
 * were 28px/600, the SAME SIZE as the page's own subtitle, so "Categories"
 * competed with the listing it filters.
 *
 * Sized in rem so it still scales with the theme's base rather than being
 * pinned to a pixel ladder.
 */
/* The filter rows sit a step below body copy, so the section headings stay the
   loudest thing in the column. The child combinator keeps the headings out of
   it; the nested lists inherit the computed size rather than taking a second
   0.8 of their own.
   
   The leading is stated rather than inherited: the site's 1.72 would have
   scaled down with the text and closed the rows up, and these are targets to
   be clicked as well as lines to be read. */
.archive-facet > ul {
    font-size: 0.8em;
    line-height: 2;
}

/* No typography of its own: an h4, taking the h4 scale, the same as the
   contents heading and Related Articles. Only the spacing is stated. */
.archive-sidebar-title {
    margin-bottom: 0.5em;
}

/*
 * THE WHOLE LIST IS SECONDARY, not just the row you are on.
 *
 * Greying only the selected row inverted the hierarchy: measured 2026-08-26,
 * "College" came out at rgb(116,116,116) against siblings at pure black, so the
 * current row was the FAINTEST thing in its own list and read as disabled
 * rather than as where you are.
 *
 * The column's job is to be scannable and to stay behind the listing it
 * filters. So every row takes the same grey, and the current one is marked by
 * weight alone — which leaves the section headings the only dark thing in the
 * sidebar, which is what "it competes with the headers" was asking for.
 */
.archive-sidebar a,
.archive-sidebar summary {
    color: var(--awb-color6, #747474);
}

/* The headings take the h4 colour, like the contents heading and Related
   Articles. The rule above greys links and summaries, which a heading is
   neither, so nothing here needs restating. */

/*
 * The passkey choice beside a password form.
 *
 * The markup is the theme's own, in passkeys/, served through the Secure
 * Passkeys plugin's theme mechanism (includes/passkeys.php), so nothing here
 * has to outrank the plugin's stylesheet: its selectors match none of these
 * classes.
 *
 * SECONDARY, on purpose. An earlier version drew this in the same red as the
 * Log in button beside it, and the operator's reading was the right one: two
 * identical buttons with two spellings of one verb, and no sign they are
 * alternatives. So the primary action keeps the red, this one is the outline
 * in the palette navy, an "or" rule separates the two, and a line beneath
 * says what a passkey is for a reader who has not met one.
 */
.win-passkey {
    margin-top: 1.25em;
    text-align: center;
}

/* The word "or" on a hairline, the way a sign-in sheet separates its ways in. */
.win-passkey__or {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin: 0 0 1em;
    color: var(--awb-color6, #747474);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.win-passkey__or::before,
.win-passkey__or::after {
    content: "";
    flex: 1;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.win-passkey__button {
    display: inline-block;
    width: 100%;
    padding: 0.7em 1.4em;
    border: 2px solid var(--awb-color3, #002559);
    border-radius: 4px;
    background: transparent;
    color: var(--awb-color3, #002559);
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

/*
 * Inside a WooCommerce block this file's own `.post-content .woocommerce *`
 * paints every border rgb(204,204,204) with !important, so no specificity
 * beats it; only another !important does. Measured 2026-09-11 on
 * /my-account/: the outline came out grey while the text stayed navy, and a
 * first attempt at (0,3,0) without the flag changed nothing. The right fix is
 * to retire that blanket rule, which is older than this file's other
 * WooCommerce work and paints things it never meant to; that is a separate
 * change. Until then this is the one place the flag is answered in kind.
 */
.post-content .woocommerce .win-passkey__button {
    border-color: var(--awb-color3, #002559) !important;
}

.win-passkey__button:hover,
.win-passkey__button:focus-visible {
    background: var(--awb-color3, #002559);
    color: var(--awb-color1, #fff);
}

.win-passkey__button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.win-passkey__hint {
    margin: 0.6em 0 0;
    color: var(--awb-color6, #747474);
    font-size: 0.85em;
    line-height: 1.5;
}

.win-passkey__notice {
    margin: 0 0 0.75em;
    padding: 0.6em 0.85em;
    border-radius: 4px;
    font-size: 0.9em;
    text-align: left;
}

.win-passkey__notice--error {
    color: #721c24;
    background: #fdf1f2;
    border: 1px solid #ffdbdf;
}

.win-passkey__notice--success {
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #c6f0dc;
}

/*
 * The account login form is two fields and a button, and WooCommerce lets it
 * run the full content width: measured 2026-09-11 at a 1400px viewport, form,
 * fields and passkey button all 1200px wide under a label a tenth of that. A
 * reader's eye travels the row to find the end of a field. Capped in em so
 * it follows the type, left-aligned under the Login heading as before. The
 * passkey block sits inside the form and follows. Below the cap the form is
 * as wide as the page, which is the phone layout already measured. Operator,
 * 2026-09-11.
 */
.woocommerce-form-login.login {
    max-width: 28em;
}

/*
 * The key to the asterisks on the account login, printed by
 * MFWinWC::required_note() under the fields. Quiet, because it explains a
 * mark rather than asking for anything. Ticket c35a34c2bc.
 */
.woocommerce-form-login .win-required-note {
    margin: -0.5em 0 1em;
    color: var(--awb-color6, #747474);
    font-size: 0.85em;
}

/*
 * The subscribe offer under the account login, printed by
 * MFWinWC::subscribe_offer(). Same width as the form above it, and set off
 * from it by a rule and a breath, so it reads as a second thing the page
 * offers rather than part of the login. The button is the site's red: on this
 * page it is the primary action of its own section, with nothing beside it to
 * be confused with. Ticket c35a34c2bc.
 */
.win-subscribe-offer {
    max-width: 28em;
    margin-top: 2.5em;
    padding-top: 2em;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.win-subscribe-offer__heading {
    margin: 0 0 0.5em;
}

.win-subscribe-offer__text {
    margin: 0 0 1.25em;
    color: var(--awb-color6, #747474);
}

.win-subscribe-offer__button {
    display: inline-block;
    padding: 0.7em 1.4em;
    border-radius: 4px;
    background-color: var(--awb-color4, #ed1c25);
    color: var(--awb-color1, #fff);
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.win-subscribe-offer__button:hover,
.win-subscribe-offer__button:focus-visible {
    background-color: var(--awb-color3, #002559);
    color: var(--awb-color1, #fff);
    text-decoration: none;
}

/*
 * "Lost your password?" on the account login is a WooCommerce paragraph with
 * no margin of its own, so it started on the very pixel the Log in button
 * ended: measured 2026-09-11 at 375px, button bottom 509, link top 509. A
 * line's worth of air, so the link reads as its own choice and not as the
 * button's caption. Operator, 2026-09-11.
 *
 * The selector is long because Avada's dynamic CSS sets this margin to 0
 * through `.woocommerce #customer_login .login .woocommerce-LostPassword`,
 * an id selector that a class rule cannot outrank however late it comes. The
 * same chain with the element's second class added is one class heavier and
 * wins; measured after a first attempt at `.woocommerce-form-login
 * .woocommerce-LostPassword` left the margin at 0.
 */
.woocommerce #customer_login .login .woocommerce-LostPassword.lost_password {
    margin-top: 1em;
}

/*
 * On the paywall page the shortcode sits in a text element under an Avada
 * login element whose form pads 25px, so its Log in is inset by that:
 * measured 2026-09-11, 265px in a 315px column. The same inset here puts the
 * two on the same edges. Nowhere else is inside a text element.
 */
.fusion-text > .win-passkey {
    padding: 0 25px;
    /*
     * Capped and centred like the login element above it, below, so the two
     * stay one stack whatever the column is. No margin of its own here: the
     * element's 25px bottom padding already separates them, and with the
     * block's default margin on top the Log in button and the "or" rule sat
     * 65px apart at a 1400px viewport. Ticket 010456e1fa.
     */
    max-width: 28em;
    margin: 0 auto;
}

/*
 * The paywall's login element ran the width of its column, 576px at a 1400px
 * viewport and wider on a wider screen, for two fields and a button. The same
 * 28em cap the account form has, centred because its heading is centred.
 * Ticket 010456e1fa.
 *
 * Two classes, because Avada's dynamic CSS sets the element's margins
 * through `.fusion-login-box` and comes later; a single class here computed
 * to margin 0 and left the box against the column's left edge while the
 * passkey block beneath it centred. Measured 2026-09-11 at 1400px: box at
 * x=716, block at x=781.
 */
.fusion-login-box.fusion-login-box-login {
    /* width stated, because the column is a flex column and an item with auto
       side margins stops stretching: without it the box shrank to its content,
       287px, and the passkey block beneath stayed at 448. */
    width: 100%;
    max-width: 28em;
    margin-left: auto;
    margin-right: auto;
}

/*
 * The vote page's buttons are left-aligned and sized to their words, so the
 * passkey one follows suit there rather than stretching.
 */
.vote-auth .win-passkey {
    text-align: left;
}

.vote-auth .win-passkey__button {
    width: auto;
}