/* =========================================================
   WrightyTCG theme styles
   Design tokens from wrightytcg-app mockup
   ========================================================= */

:root {
    --navy: #16234B;
    --navy-deep: #0E1A3C;
    --navy-800: #1D2C57;
    --cream: #FDEFB2;
    --sky: #82CAFF;
    --paper: #fff;
    --gold: #C9A24B;
    --gold-2: #D4A659;
    --gold-hi: #E6C77F;
    --blue: #2E6CC6;
    --green: #2FBF5B;
    --amber: #E8A33D;
    --red: #D84A3B;
    --ink: #16234B;
    --muted: #5d6377;
    --line: #e3e7ef;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(22, 35, 75, .12);
    --shadow-sm: 0 4px 14px rgba(22, 35, 75, .09);
    --font-head: 'Quantico', sans-serif;
    --font-body: 'Barlow', system-ui, sans-serif;
}

/* ============ Global ============ */

/* The announce bar can collapse well after the user has already scrolled
   past it, since header-scroll.js sits on the site's "delay JS execution"
   list and may not run for ~1s. That late height change shrinks the
   sticky header, and Chrome/Firefox's scroll anchoring then "corrects"
   scrollY to keep the same content under the viewport - visible as a
   sudden jump mid-scroll. overflow-anchor:none on the bar itself isn't
   enough (the browser just anchors to a different nearby element
   instead); disabling it document-wide is the reliable fix. */
html {
    overflow-anchor: none;
}

body {
    background: linear-gradient(165deg, #FDEFB2 0%, #cfe6ff 50%, #82CAFF 100%) fixed;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
}

.wp-site-blocks {
    overflow-x: clip;
}

.wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
}

.muted {
    color: var(--muted);
}

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.field {
    margin-bottom: 12px;
}

.field label {
    display: block;
    font-size: 12px;
    font-family: var(--font-head);
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 11px 12px;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--navy);
    background: #fff;
    box-sizing: border-box;
}

.field textarea {
    resize: vertical;
}

.field input[type="file"] {
    padding: 8px 12px;
}

.field input[type="file"]::file-selector-button,
.field input[type="file"]::-webkit-file-upload-button {
    background: transparent;
    border: 1.5px solid var(--navy);
    border-radius: 7px;
    padding: 7px 14px;
    margin-right: 12px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--navy);
    cursor: pointer;
    transition: .16s;
}

.field input[type="file"]::file-selector-button:hover,
.field input[type="file"]::-webkit-file-upload-button:hover {
    background: rgba(22, 35, 75, .06);
}

.frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    letter-spacing: .3px;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
    background-color: var(--gold-hi);
}

/* ============ Announce bar ============ */

.wrighty-announce {
    display: none;
    background: var(--cream);
    color: var(--navy);
    font-size: 13px;
    font-family: var(--font-head);
    letter-spacing: .4px;
    text-align: center;
    padding: 7px 10px;
    margin: 0;
    overflow: hidden;
    transition: max-height .25s ease, padding .25s ease, opacity .2s ease;
    /* Prevents Chrome/Firefox's automatic scroll-anchoring from
       "compensating" for this element's own height animation — without
       this, collapsing/expanding it near the top of the page nudges
       scrollY, which retriggers the scroll listener, which toggles the
       bar again, in a rapid feedback loop (visible as header shaking). */
    overflow-anchor: none;
}

.wrighty-announce.is-collapsed {
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.wrighty-announce strong {
    color: var(--navy-deep);
}

/* ============ Header ============ */

header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 60;
    overflow-anchor: none;
}

body.admin-bar header.wp-block-template-part {
    top: 32px;
}

nav.wrighty-mainnav{
    gap: 0;
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg {
    margin-top: -1px !important;
}

.wp-block-navigation-item.has-child a {
  padding-right: 0;
}

@media (max-width: 782px) {
    body.admin-bar header.wp-block-template-part {
        top: 46px;
    }
}
 
.wrighty-header {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 2px 14px rgba(14, 26, 60, .3);
    margin: 0;
}

/* kill WP's default 24px block gap between header rows */
.wrighty-header > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}
.wrighty-hero-slider {
    margin-block-start: 0 !important;
}

.wrighty-header-main {
    padding: 8px 16px;
    gap: 16px;
}

/* logo */
.wrighty-logo {
    gap: 10px;
    flex-shrink: 0;
}

.wrighty-logo .wp-block-site-logo img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cream);
    border: 2.5px solid var(--gold);
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
}

/* Header and footer logos are a wide icon+wordmark lockup image, not a
   small round mark - overrides the generic circular-badge treatment above
   with a plain, unclipped image. Width/height are set explicitly (matching
   each Site Logo block's own "Image Width" setting) rather than left to
   revert to the <img>'s width/height attributes: the lazy-load plugin's
   "auto sizes" handling stretches the placeholder to fill its container
   before the real image loads if nothing here pins a size, badly
   distorting the footer logo (which sits in a wider column than the
   header) until the swap happens. */
.wrighty-header .wrighty-logo .wp-block-site-logo img,
.wrighty-footer .wrighty-logo .wp-block-site-logo img {
    border-radius: 0;
    background: none;
    border: none;
    padding: 0;
}

.wrighty-header .wrighty-logo .wp-block-site-logo img {
    width: 140px;
    height: 58px;
}

.wrighty-footer .wrighty-logo .wp-block-site-logo img {
    width: 160px;
    height: 67px;
}

.wrighty-logo-text {
    line-height: 1;
}

.wrighty-logo-text > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.wrighty-header .wp-block-site-title,
.wrighty-footer .wp-block-site-title {
    margin: 0;
    font-family: var(--font-head);
    font-size: 20px !important;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
}

.wrighty-header .wp-block-site-title a,
.wrighty-footer .wp-block-site-title a {
    color: #fff;
    text-decoration: none;
}

.wrighty-site-tag {
    margin: 3px 0 0 !important;
    font-family: var(--font-head);
    font-size: 9px;
    color: var(--gold-hi);
    letter-spacing: 5px;
    text-transform: uppercase;
    line-height: 1;
}

/* search */
.wrighty-header-search {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    position: relative;
}

.wrighty-product-search {
    position: relative;
}

.wrighty-product-search__form {
    align-items: center;
    background: #fff;
    border: none !important;
    border-radius: 10px;
    display: flex;
    padding: 3px 4px 3px 14px;
}

.wrighty-product-search__input {
    background: transparent;
    border: none;
    color: var(--navy);
    flex: 1 1 auto;
    font-family: var(--font-body);
    font-size: 15px;
    min-width: 0;
    outline: none;
    padding: 6px 8px;
}

.wrighty-product-search__input:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
}

.wrighty-product-search__button {
    align-items: center;
    background: var(--gold-2);
    border: none;
    border-radius: 8px;
    color: var(--navy);
    cursor: pointer;
    display: flex;
    margin-left: 6px;
    padding: 8px 11px;
    transition: background .16s;
}

.wrighty-product-search__button:hover {
    background: var(--gold-hi);
}

.wrighty-product-search__button svg {
    display: block;
    height: 18px;
    width: 18px;
}

.wrighty-product-search__results {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    color: var(--ink);
    left: 0;
    max-height: min(420px, calc(100vh - 160px));
    overflow-y: auto;
    padding: 4px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 70;
}

.wrighty-product-search__result {
    align-items: center;
    border-radius: 6px;
    color: var(--ink);
    display: grid;
    gap: 10px;
    grid-template-columns: 48px minmax(0, 1fr) max-content;
    min-height: 60px;
    padding: 6px;
    text-decoration: none;
}

.wrighty-product-search__result:hover,
.wrighty-product-search__result:focus-visible {
    background: #f1f5fc;
    outline: none;
}

.wrighty-product-search__result .wrighty-product-search__image {
    background: #eef1f8;
    border-radius: 4px;
    height: 48px;
    object-fit: contain;
    width: 48px;
}

.wrighty-product-search__name {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wrighty-product-search__price {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    justify-self: end;
    white-space: nowrap;
}

.wrighty-product-search__message {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
    padding: 12px 10px;
}

.wrighty-product-search__message.is-error {
    color: var(--red);
}

/* search results */
.wrighty-search-page {
    padding: 36px 18px 56px;
}

.wrighty-search-page .wp-block-query-title {
    color: var(--navy);
    font-size: 28px;
    margin: 0 0 22px;
}

.wrighty-search-results .wp-block-post-template {
    display: grid !important;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.wrighty-search-results .wp-block-post-template > li {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    overflow: hidden;
    transition: transform .16s, box-shadow .16s, border-color .16s;
}

.wrighty-search-results .wp-block-post-template > li:hover {
    border-color: var(--gold-2);
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.wrighty-search-results .wp-block-post-featured-image {
    background: #eef1f8;
    margin: 0 0 12px;
}

.wrighty-search-results .wp-block-post-featured-image a,
.wrighty-search-results .wp-block-post-featured-image img {
    display: block;
    width: 100%;
}

.wrighty-search-results .wp-block-post-featured-image img {
    height: 220px;
    object-fit: cover;
}

.wrighty-search-results .wp-block-post-title {
    font-family: var(--font-body);
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 12px 10px !important;
}

.wrighty-search-results .wp-block-post-title a {
    color: var(--navy);
    text-decoration: none;
}

.wrighty-search-results .wp-block-woocommerce-product-price,
.wrighty-search-results .wc-block-components-product-price {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    margin: 0 12px 14px;
}

.wrighty-search-results .wp-block-query-pagination {
    margin-top: 30px;
}

.wrighty-search-results .wp-block-query-no-results {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin: 0;
    padding: 18px;
}

.wrighty-search-results .wp-block-query-no-results p {
    margin: 0;
}

@media (max-width: 1024px) {
    .wrighty-search-results .wp-block-post-template {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .wrighty-search-page {
        padding: 28px 14px 44px;
    }

    .wrighty-search-results .wp-block-post-template {
        grid-template-columns: 1fr;
    }
}

/* header icons (account + basket) */
.wrighty-header-icons {
    gap: 14px;
    flex-shrink: 0;
}

.wrighty-header-icons .wp-block-woocommerce-customer-account a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-family: var(--font-head);
    color: #dfe5f2;
    text-decoration: none;
}

.wrighty-header-icons .wp-block-woocommerce-customer-account a:hover {
    color: var(--gold-hi);
}

.wrighty-header-icons .wp-block-woocommerce-customer-account svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.wrighty-header-wishlist {
    position: relative;
    display: flex;
    align-items: center;
    color: #dfe5f2;
    text-decoration: none;
}

.wrighty-header-wishlist:hover {
    color: var(--gold-hi);
}

.wrighty-header-wishlist svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.wrighty-header-wishlist-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    display: inline-block;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--gold-2);
    color: var(--navy-deep);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    box-sizing: border-box;
}

.wrighty-header-wishlist-badge[hidden] {
    display: none;
}

.wc-block-mini-cart__button {
    color: #fff;
}

.wc-block-mini-cart__button:hover {
    color: var(--gold-hi);
    opacity: 1;
}

.wc-block-mini-cart__badge {
    background: var(--gold-2) !important;
    color: var(--navy-deep) !important;
    font-family: var(--font-head);
    font-weight: 700;
}

/* Swaps WooCommerce's own default basket icon for the new cart icon. A
   plain content:url() can't be used here (unlike the add-to-cart buttons)
   because this icon sits on the navy header bar and needs to render white
   via currentColor - an externally-referenced SVG doesn't pick up the
   page's color that way. mask-image instead uses the file purely as a
   shape, painted with background-color: currentColor, so it follows
   .wc-block-mini-cart__button's white/gold-hover color like the original
   icon did. */
.wc-block-mini-cart__icon {
    display: none;
}

.wc-block-mini-cart__quantity-badge::before {
    content: '';
    display: block;
    width: 21px;
    height: 21px;
    background-color: currentColor;
    -webkit-mask: url('/wp-content/themes/Wrightyv2/images/cart-large-minimalistic-svgrepo-com.svg') no-repeat center / contain;
    mask: url('/wp-content/themes/Wrightyv2/images/cart-large-minimalistic-svgrepo-com.svg') no-repeat center / contain;
}

/* WooCommerce's own default styles set the mini-cart drawer's subtotal
   label to Barlow weight 600 - a weight we don't otherwise use or
   preload anywhere. The drawer is server-rendered and always present
   in the DOM (just pushed off-screen until opened), so the browser
   still discovers and fetches that font for this hidden text on every
   page load. Weight 700 is already preloaded and visually
   indistinguishable here, so pin to it instead of pulling in a whole
   extra font file for content nobody's looking at yet. */
.wc-block-mini-cart__footer-subtotal {
    font-weight: 700 !important;
}

/* nav row */
.wrighty-header-nav {
    background: var(--navy-deep);
    border-top: 1px solid rgba(201, 162, 75, .22);
    margin: 0;
}

.wrighty-mainnav {
    font-family: var(--font-head);
}

.wrighty-mainnav .wp-block-navigation-item__content,
.wrighty-mainnav .wp-block-home-link__content {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
    color: #e9ecf5;
    padding: 12px 11px;
    border-bottom: 3px solid transparent;
}

.wrighty-mainnav .wp-block-navigation-item__content:hover,
.wrighty-mainnav .wp-block-home-link__content:hover,
.wrighty-mainnav .current-menu-item > .wp-block-navigation-item__content,
.wrighty-mainnav .current-menu-item > .wp-block-home-link__content {
    color: var(--gold-hi);
    border-bottom-color: var(--gold-2);
}

/* SALE nav item */
.wrighty-mainnav .wp-block-navigation-item__content[href*="/product-tag/sale/"] {
    color: #ff8a6b !important;
}

.wrighty-mainnav .wp-block-navigation-item__content[href*="/product-tag/sale/"]:hover {
    color: #ffb199 !important;
    border-bottom-color: #ff8a6b;
}

/* B2B nav item: highlighted tab */
.wrighty-mainnav .wp-block-navigation-item__content[href*="/b2b/"] {
    background: var(--gold-2);
    color: var(--navy-deep) !important;
    border-radius: 7px 7px 0 0;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.wrighty-mainnav .wp-block-navigation-item__content[href*="/b2b/"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    display: inline-block;
    animation: wrighty-gdot-pulse 1.5s infinite;
}

@keyframes wrighty-gdot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(47, 191, 91, .6); }
    70% { box-shadow: 0 0 0 6px rgba(47, 191, 91, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 191, 91, 0); }
}

.wrighty-mainnav .wp-block-navigation__submenu-icon {
    color: #e9ecf5;
}

/* dropdown submenus */
.wrighty-mainnav .wp-block-navigation__submenu-container {
    background: #fff !important;
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold-2);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow);
    padding: 8px;
    min-width: 215px !important;
}

.wrighty-mainnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--navy);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    padding: 9px 12px;
    border-bottom: none;
    border-radius: 8px;
}

.wrighty-mainnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: #f3f6fc;
    color: var(--blue);
}

.wrighty-mainnav .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
    color: var(--blue);
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    margin-bottom: 5px;
}

/* mobile nav overlay: restore dark-on-light */
.wrighty-mainnav .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content,
.wrighty-mainnav .wp-block-navigation__responsive-container.has-modal-open .wp-block-home-link__content {
    color: var(--navy);
    border-bottom: none;
}

.wrighty-mainnav .wp-block-navigation__responsive-container-open,
.wrighty-mainnav .wp-block-navigation__responsive-container-close {
    color: currentColor;
}

/* ============ Mobile header ============
   At 1038px and below - where the nav bar runs out of room and starts
   wrapping to a second row - the top row collapses to just Logo + Cart +
   hamburger. Search/Account/Wishlist aren't hidden - they're duplicated
   as .wrighty-mobilenav-extra items nested inside the nav (see the
   wp_navigation entity, id 77) so WP's own overlay panel picks them up
   automatically; the originals in .wrighty-header-main are hidden here
   instead. Kept hidden by default (not just inside this media query) so
   nothing flashes unstyled on wide screens before this query's rules
   apply. */
/* !important beats WP's own `body .is-layout-flex{display:flex}` utility
   rule, which core auto-applies here since these wrappers use layout:
   "flex" - that rule's (0,1,1) specificity otherwise outranks a plain
   single-class selector like this one (0,1,0). */
.wrighty-mobilenav-extra {
    display: none !important;
}

@media (max-width: 1038px) {
    /* .wrighty-header-nav is a sibling of .wrighty-header-main, not a
       descendant, so it can't be aligned into that row with plain flex or
       position:absolute (the latter would need a fixed top offset that
       drifts as the announce bar above collapses/expands on scroll).
       Grid lets both share row 2 - .wrighty-header-main spans it fully,
       .wrighty-header-nav overlaps the right edge of the same row - with
       row heights driven by content, not a hardcoded pixel offset. */
    .wrighty-header {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .wrighty-announce {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .wrighty-header-main {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: nowrap;
        padding-right: 54px;
    }

    .wrighty-header-main > .wrighty-header-search {
        display: none;
    }

    .wrighty-header-icons .wp-block-woocommerce-customer-account,
    .wrighty-header-icons .wrighty-header-wishlist {
        display: none;
    }

    .wrighty-header-nav {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        justify-self: end;
        background: transparent;
        border-top: none;
        margin: 0;
        padding: 0 16px 0 0;
        width: auto;
        z-index: 2;
    }

    .wrighty-mainnav .wp-block-navigation__responsive-container-open {
        padding: 6px;
    }

    .wrighty-mobilenav-extra {
        display: flex !important;
        width: 100%;
        padding: 12px 20px;
        border-bottom: 1px solid var(--line);
    }

    .wrighty-mobilenav-extra .wp-block-woocommerce-customer-account a,
    .wrighty-mobilenav-extra .wrighty-header-wishlist {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--navy);
        text-decoration: none;
        font-family: var(--font-head);
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .wrighty-mobilenav-extra .wp-block-woocommerce-customer-account svg,
    .wrighty-mobilenav-extra .wrighty-header-wishlist svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }
}

/* WP core hardcodes its own nav-overlay breakpoint at 600px (hidden
   toggle + inline horizontal bar above that, hamburger + overlay below
   it) - independent of, and narrower than, the 1038px point above where
   the nav links first wrap to a second row (the mobile header layout
   above already claims the space needed for the inline search bar even
   earlier, at 861px, but the nav bar itself needs more room than that).
   In the 600-1038px gap, core would otherwise still show the old inline
   nav bar - which has nowhere left to go, and not enough width to avoid
   wrapping even if it did - and hide the toggle that's needed to reach
   the overlay instead. These two rules just swap that range's default
   state to match sub-600px, while leaving the actual click-to-open
   mechanism (WP's own Interactivity API, not viewport-gated) completely
   untouched. */
@media (min-width: 600px) and (max-width: 1038px) {
    .wrighty-mainnav.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }

    .wrighty-mainnav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

/* Mobile nav overlay: accordion-style submenus instead of WP core's
   default "show everything expanded" overlay behaviour. Each toggle's
   aria-expanded already works via WP's own Interactivity API - this just
   restyles what "expanded" looks like and drives show/hide off it.
   js/mobile-nav-accordion.js closes whichever sibling was already open
   when a new one opens, since WP doesn't do that on its own. Not wrapped
   in a media query itself: .is-menu-open only ever gets applied by
   clicking a toggle button that's now only visible at/below 1038px (see
   the pair of override rules just above), so it's already implicitly
   scoped to that range. */
/* WP core's .is-menu-open (the outer overlay box, a separate element from
   -content below) carries its own clamp(1rem, ...) padding on every side
   - that's what was squeezing every row in from both edges even after
   -content's own top padding was already trimmed below. Rows keep their
   own left/right padding (12px 20px, further down) for text inset, so
   dropping it here lets the row backgrounds/borders/dividers reach the
   true edges. */
.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open {
    padding-left: 0;
    padding-right: 0;
}

/* The close (X) button is position:absolute relative to the dialog, not
   a flex sibling of the search row - so instead of sitting inline next
   to search like the design wants, it floats at the dialog's own top-
   right corner (top:0), disconnected from and above the search row
   (which sits lower, under -content's own top padding). Pinning it to
   the search row's vertical center makes it read as "search bar with a
   close button beside it" instead of two unrelated floating elements. */
.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: 40px;
    right: 20px;
}

/* Room for the close button pinned beside it above, so the search
   input's own submit button doesn't sit directly underneath it. */
.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wrighty-mobilenav-extra:has(.wrighty-header-search) {
    padding-right: 60px;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    /* !important: this ties in specificity with WP core's own
       padding-top:calc(2rem + 24px) (~56px, sized to clear the close
       button in core's own default layout) restored earlier - on the
       homepage specifically that core rule ends up later in source order
       and was winning the tie, so this 16px never actually applied.
       The announce bar behind this fixed-position overlay is fully
       covered by it either way, so there's no reason to reserve extra
       room for it up top. */
    padding-top: 16px !important;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    /* WP core's default here is align-items:center (from the nav's own
       "items-justified-center" setting), which makes every row shrink-
       wrap to its own text width - so a border-bottom on a short word
       like "CHINESE" renders as a short line instead of spanning full
       width. Stretching the rows and left-aligning their content inside
       gives full-width dividers instead. */
    align-items: stretch;
    /* align-items:stretch above only controls how *this* list's own
       children (the <li> rows) get sized - it doesn't stop the <ul>
       itself from being centered (shrink-wrapped, with equal gaps on
       both sides) within *its* parent by that same inherited
       align-items:center. width:100% forces the list itself full-width
       regardless. */
    width: 100%;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child {
    flex-direction: row;
    flex-wrap: wrap;
    /* space-between instead of a tight left-aligned cluster: with names
       of different lengths (JAPANESE vs CHINESE), a tight cluster puts
       each chevron at a different x position. This pins every chevron to
       the same right edge regardless of the name's length. */
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    /* The content link keeps its own 20px left padding for the text
       inset; the chevron has none of its own, so without this the row's
       right edge (0px) wouldn't match the left inset. */
    padding-right: 20px;
    /* column-gap only (not the gap shorthand): the collapsed submenu is
       forced onto its own wrapped flex line via flex-basis:100% below, so
       a row-gap - even a shorthand gap - would still insert 16px above
       it despite height:0, inflating every collapsed row's height. */
    column-gap: 16px;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation-item__content {
    flex: 0 1 auto;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    flex-basis: 100%;
    height: 0;
    /* Flex items default to min-height:auto (sized to content) even with
       an explicit height:0 - without this override the collapsed
       submenu still renders a few px tall instead of truly collapsing. */
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    height: auto;
    min-height: 0;
    overflow: visible;
    visibility: visible;
    opacity: 1;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle svg {
    transition: transform .15s ease;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Every row - top-level links, category headers, and (once opened) their
   sub-items - reads as one uniform flat list matching the Login/Wishlist
   rows above: same padding, a border-bottom divider, no floating "card"
   for the opened submenu (that's the desktop hover-dropdown's look,
   which doesn't belong inside the overlay). Sub-items get the same
   Quantico/bold/uppercase/black treatment as the top-level rows, just
   smaller; "Shop all X ->" (always the first sub-item) keeps its own
   distinct blue CTA style. */
.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
    border-bottom: 1px solid var(--line);
    /* Plain (non has-child) items are flex-direction:column with
       align-items:center from WP core (driven by the nav's own
       "items-justified-center" setting) - for a column container that's
       the CROSS axis, i.e. horizontal, so it centers the one child
       instead of left-aligning it. has-child rows aren't affected: their
       own rule below already switches them to row direction. */
    align-items: flex-start;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content,
.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-home-link__content {
    padding: 12px 20px !important;
    text-align: left;
    /* Home's own "current page" gold underline (and every item's default
       transparent 3px one, from the desktop nav styles above) sits on
       this inner content element, separate from - and at a different
       width than - the full-row divider on the <li> above. Left as-is,
       Home reads as differently-styled from every other row instead of
       just another item in the same list; dropping it here keeps that
       desktop-only affordance while this list relies on its own dividers. */
    border-bottom: none !important;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
    color: #000;
    font-size: 12px;
    padding: 10px 20px !important;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
    text-transform: none;
    color: var(--blue);
    /* The desktop dropdown card gives this link its own border-bottom +
       margin-bottom to set it apart from the list below it inside that
       card. This list doesn't have a card - every item already gets its
       own divider from the <li> rule above - so left in place this adds
       a second, closely-spaced line right under the first. */
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
    border-bottom: none;
}

/* Row-level hover/active highlight, reusing the same light tint already
   used for the desktop dropdown items and search results (#f3f6fc)
   elsewhere in this file. Plain rows (and sub-items, which also aren't
   .has-child) just highlight themselves. A category header's whole row -
   including the empty space right of the chevron, not just the label/
   chevron glyphs - highlights via a plain :hover on .has-child itself
   (its box is already full-width); the second rule then cancels that
   tint specifically while the pointer is over one of its own sub-items
   once expanded, since hover bubbles up from a descendant and would
   otherwise tint the whole open section instead of just the one row
   being pointed at. */
.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
    transition: background .1s ease;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item:not(.has-child):hover,
.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item:active,
.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child:hover {
    /* !important: WP core zeroes out background on nav items inside the
       overlay with background:#0000 !important (restored earlier
       alongside the rest of its overlay CSS), which otherwise silently
       wins over this regardless of selector specificity. */
    background: #f3f6fc !important;
}

.wrighty-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child:has(.wp-block-navigation__submenu-container :hover) {
    background: transparent !important;
}

.wrighty-mobilenav-extra {
    transition: background .1s ease;
}

.wrighty-mobilenav-extra:hover,
.wrighty-mobilenav-extra:active {
    background: #f3f6fc;
}

/* ============ Homepage sections ============ */

/* constrain top-level section blocks to the design's 1320px wrap */
.wp-site-blocks > h2.wp-block-heading,
.wp-site-blocks > p.wp-block-paragraph,
.wp-site-blocks > .wp-block-group.is-layout-grid,
.wp-site-blocks > .wp-block-woocommerce-all-reviews,
.wp-site-blocks > .wp-block-woocommerce-product-collection {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
}

/* Homepage "New Products" / "Bestsellers" rails: native WooCommerce
   Product Collection blocks (embedded directly in the homepage's own
   content, not the custom .wrighty-pcard component used on PLP pages),
   restyled to match — left-aligned text, square gold "+" add-to-cart
   button bottom-right instead of centered text + full-width text button.
   Class names captured from the live rendered block, not guessed. Price
   and button are separate sibling divs (no shared row wrapper in the
   block's own markup), so both are placed in the same CSS Grid area and
   pinned to opposite edges with justify-self to sit side by side. */
.wc-block-product-template .wc-block-product {
    display: grid;
    grid-template-areas: "image" "title" "footer";
    grid-template-rows: auto auto auto;
    position: relative;
}

.wc-block-product-template .wc-block-product .wc-block-components-product-image {
    grid-area: image;
}

.wc-block-product-template .wc-block-product .wp-block-post-title {
    grid-area: title;
    text-align: left !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: var(--font-body) !important;
    line-height: 1.3 !important;
    margin: 3px 12px 8px !important;
}

.wc-block-product-template .wc-block-product .wp-block-post-title a {
    color: var(--navy);
    text-decoration: none;
}

.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-price {
    grid-area: footer;
    justify-self: start;
    align-self: end;
    text-align: left !important;
    margin: 0 0 12px 12px !important;
}

.wc-block-product-template .wc-block-product .woocommerce-Price-amount {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    color: var(--navy);
}

.wc-block-product-template .wc-block-product .wc-block-components-product-button {
    grid-area: footer;
    justify-self: end;
    align-self: end;
    margin: 0 12px 12px 0 !important;
    text-align: right !important;
}

.wc-block-product-template .wc-block-product .wc-block-components-product-button__button {
    background: var(--gold-2) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    min-width: 32px;
    color: var(--navy-deep) !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

.wc-block-product-template .wc-block-product .wc-block-components-product-button__button::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url('../images/cart-large-minimalistic-svgrepo-com.svg') no-repeat center / contain;
    mask: url('../images/cart-large-minimalistic-svgrepo-com.svg') no-repeat center / contain;
}

.wc-block-product-template .wc-block-product .wc-block-components-product-button__button:hover {
    background: var(--gold-hi) !important;
}

/* kick line above a heading */
.wp-site-blocks > p.wp-block-paragraph {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--blue);
    margin-top: 36px;
    margin-bottom: 0;
}

/* section heading with gold gradient line */
.wp-site-blocks > h2.wp-block-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 24px;
    color: var(--navy);
    margin-top: 36px;
    margin-bottom: 18px;
}

.wp-site-blocks > h2.wp-block-heading::after {
    content: "";
    flex: 1;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-2), transparent);
    border-radius: 2px;
    margin-bottom: -6px;
}

.wp-site-blocks > p.wp-block-paragraph + h2.wp-block-heading {
    margin-top: 4px;
}

/* ============ Tiles (cover blocks in grid groups) ============ */

.wp-site-blocks > .wp-block-group.is-layout-grid {
    margin-bottom: 36px;
}

/* tile grids = grids of cover blocks */
.wp-site-blocks > .wp-block-group.is-layout-grid:has(.wp-block-cover) {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

/* other top-level grids (e.g. USP row): white cards, auto columns */
.wp-site-blocks > .wp-block-group.is-layout-grid:not(:has(.wp-block-cover)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch;
}

.wp-site-blocks > .wp-block-group.is-layout-grid:not(:has(.wp-block-cover)) > * {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 13px;
    box-shadow: var(--shadow-sm);
    margin: 0 !important;
    box-sizing: border-box;
}

.wp-site-blocks > .wp-block-group.is-layout-grid:not(:has(.wp-block-cover)) svg,
.wp-site-blocks > .wp-block-group.is-layout-grid:not(:has(.wp-block-cover)) img {
    width: 26px;
    height: 26px;
    color: var(--blue);
}

.wp-site-blocks > .wp-block-group.is-layout-grid:not(:has(.wp-block-cover)) h1,
.wp-site-blocks > .wp-block-group.is-layout-grid:not(:has(.wp-block-cover)) h2,
.wp-site-blocks > .wp-block-group.is-layout-grid:not(:has(.wp-block-cover)) h3,
.wp-site-blocks > .wp-block-group.is-layout-grid:not(:has(.wp-block-cover)) h4 {
    font-family: var(--font-head);
    font-size: 13px !important;
    color: var(--navy);
    margin: 4px 0 2px !important;
}

.wp-site-blocks > .wp-block-group.is-layout-grid:not(:has(.wp-block-cover)) p {
    font-size: 11px;
    color: var(--muted);
    margin: 0 !important;
}

.wp-block-group.is-layout-grid .wp-block-cover {
    aspect-ratio: 1 / 1.25;
    min-height: 0;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid var(--gold-2);
    box-shadow: var(--shadow-sm);
    background: var(--navy);
    transition: transform .18s, box-shadow .18s;
    cursor: pointer;
    position: relative;
}

.wp-block-group.is-layout-grid .wp-block-cover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

/* dim overlay -> design gradient */
.wp-block-group.is-layout-grid .wp-block-cover .wp-block-cover__background {
    background: linear-gradient(180deg, rgba(14, 26, 60, .05), rgba(14, 26, 60, .55)) !important;
    opacity: 1 !important;
}

.wp-block-group.is-layout-grid .wp-block-cover .wp-block-cover__inner-container {
    position: static;
}

/* pill label button pinned to the bottom */
.wp-block-group.is-layout-grid .wp-block-cover .wp-block-buttons {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 12px;
    margin: 0;
    z-index: 2;
}

.wp-block-group.is-layout-grid .wp-block-cover .wp-block-button {
    width: 100%;
}

.wp-block-group.is-layout-grid .wp-block-cover .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 9px 8px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, .4);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 10px rgba(0, 0, 0, .35);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* range palette -> design label gradients */
.wp-block-button__link.has-range-red-background-color {
    background: linear-gradient(180deg, #ef5b5b, #b32424) !important;
}

.wp-block-button__link.has-range-blue-background-color {
    background: linear-gradient(180deg, #4aa3e6, #1b66b3) !important;
}

.wp-block-button__link.has-range-yellow-background-color {
    background: linear-gradient(180deg, #f4c84b, #cf9a1e) !important;
}

.wp-block-button__link.has-range-green-background-color {
    background: linear-gradient(180deg, #56c163, #1f8a3a) !important;
}

.wp-block-button__link.has-range-purple-background-color {
    background: linear-gradient(180deg, #a86bd6, #6a31a3) !important;
}

.wp-block-button__link.has-range-teal-background-color {
    background: linear-gradient(180deg, #46c7b8, #1c8a7e) !important;
}

/* ============ Product collections ============ */

.wp-block-woocommerce-product-collection {
    margin-bottom: 36px;
}

/* hide the collection's own inner heading ("New arrivals" etc.) */
.wp-block-woocommerce-product-collection h2.wp-block-heading {
    display: none;
}

.wc-block-product-template {
    gap: 16px !important;
}

.wc-block-product-template li.wc-block-product {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .16s, box-shadow .16s, border-color .16s;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    padding: 0 0 13px;
}

.wc-block-product-template li.wc-block-product:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--gold-2);
}

.wc-block-product .wc-block-components-product-image {
    background: linear-gradient(160deg, #eef1f8, #dfe5f3);
    margin: 0 0 11px;
    position: relative;
    grid-column: 1 / -1;
}

/* stock pill over the image, driven by WooCommerce's li classes */
.wc-block-product .wc-block-components-product-image::after {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(255, 255, 255, .95);
    border-radius: 999px;
    padding: 4px 9px;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

li.wc-block-product.instock .wc-block-components-product-image::after {
    content: "● In Stock";
    color: #1f7a44;
}

li.wc-block-product.outofstock .wc-block-components-product-image::after {
    content: "● Out of Stock";
    color: #9a2c22;
}

li.wc-block-product.onbackorder .wc-block-components-product-image::after {
    content: "● Pre-Order";
    color: #1b4f88;
}

/* Wishlist heart injected into the Product Image block by the
   render_block_woocommerce/product-image filter in functions.php -
   positioned to match .wrighty-pcard .wishbtn on the shop/category cards,
   opposite corner from the stock pill above. */
.wc-block-product .wc-block-components-product-image .wishbtn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
    color: #8a8f9e;
    /* The button is injected as the image wrapper's first child, but the
       WooCommerce block's own "view product" link is also position:absolute
       (inset:0, covering the whole image) and comes after it in the DOM -
       stacking order for same-context positioned elements falls back to
       DOM order, so without this the link paints on top and swallows every
       click/hover meant for the button underneath it. */
    z-index: 2;
}

.wc-block-product .wc-block-components-product-image .wishbtn svg {
    width: 16px;
    height: 16px;
}

.wc-block-product .wc-block-components-product-image .wishbtn:hover,
.wc-block-product .wc-block-components-product-image .wishbtn.is-active {
    color: var(--red);
}

.wc-block-product .wc-block-components-product-image .wishbtn.is-active svg {
    fill: var(--red);
}

.wc-block-product .wc-block-components-product-image img {
    width: 100%;
    height: 280px;
    object-fit: contain !important;
}

/* sale badge — matches the "Sale" badge used on product listing pages
   (.wrighty-pcard .badge / .b-discount) for visual consistency */
.wc-block-product .wc-block-components-product-sale-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    background: #d63c3c;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 6px 11px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35);
}

.wc-block-product .wc-block-components-product-sale-badge__text {
    font-family: inherit;
}

/* title */
.wc-block-product .wp-block-post-title {
    font-family: var(--font-body);
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.3 !important;
    text-align: left;
    margin: 0 12px 8px !important;
    grid-column: 1 / -1;
    align-self: start;
}

/* region tag above the title, driven by product_cat-* classes */
.wc-block-product .wp-block-post-title::before {
    display: block;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--blue);
    margin-bottom: 3px;
}

li[class*="product_cat-japanese"] .wp-block-post-title::before {
    content: "🇯🇵 Japanese";
}

li[class*="product_cat-english"] .wp-block-post-title::before {
    content: "🇬🇧 English";
}

li[class*="product_cat-chinese"] .wp-block-post-title::before {
    content: "🇨🇳 Chinese";
}

li[class*="product_cat-korean"] .wp-block-post-title::before {
    content: "🇰🇷 Korean";
}

li[class*="product_cat-accessories"] .wp-block-post-title::before {
    content: "Accessory";
}

.wc-block-product .wp-block-post-title a {
    color: var(--navy);
    text-decoration: none;
}

.wc-block-product .wp-block-post-title a:hover {
    color: var(--blue);
}

/* price left + add button right on the bottom row */
.wc-block-product .wp-block-woocommerce-product-price {
    text-align: left;
    margin: 0 0 0 12px;
    grid-column: 1;
    grid-row: 3;
    align-self: center;
}

.wc-block-product .wc-block-components-product-price {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    color: var(--navy);
}

/* Custom centered strike line instead of the browser's default line-through:
   the default draws the line using the del's own (much smaller) font
   metrics, which sits noticeably above the middle of tabular numerals
   when a small "was" price sits next to a much larger "now" price. */
.wc-block-product .wc-block-components-product-price del {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    margin-right: 5px;
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 1;
}

.wc-block-product .wc-block-components-product-price del::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    border-top: 1px solid currentColor;
    transform: translateY(-50%);
}

.wc-block-product .wc-block-components-product-price ins {
    text-decoration: none;
}

/* add to cart: compact gold icon button, bottom right */
.wc-block-product .wp-block-woocommerce-product-button {
    margin: 0 12px 0 8px;
    grid-column: 2;
    grid-row: 3;
    align-self: center;
}

.wc-block-product .wp-block-button__link {
    display: block;
    width: 40px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background-color: var(--gold-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1A3C' stroke-width='2'%3E%3Cpath d='M6 6h15l-1.5 9h-12z'/%3E%3Cpath d='M6 6L5 3H2'/%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='18' cy='20' r='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px;
    cursor: pointer;
    transition: background-color .16s;
}

.wc-block-product .wp-block-button__link span {
    display: none;
}

.wc-block-product .wp-block-button__link:hover {
    background-color: var(--gold-hi);
}

/* out of stock: disabled grey */
li.wc-block-product.outofstock .wp-block-button__link {
    background-color: #e3e3e3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2'%3E%3Cpath d='M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M10 21a2 2 0 004 0'/%3E%3C/svg%3E");
}

li.wc-block-product.outofstock .wp-block-button__link:hover {
    background-color: #e3e3e3;
}

/* WooCommerce's classic AJAX add-to-cart flow (used on shop/category/
   home product grids - confirmed live via the real "add ajax_add_to_
   cart add_to_cart_button" markup, not the Blocks button) inserts a
   "View cart" link next to the button after every add. Replaced by
   the toast notification below (js/add-to-cart-toast.js) instead.
   Unscoped and !important since it showed up nested under this
   theme's own .wrighty-pcard/.wrighty-pgrid product-card markup, not
   .wc-block-product - the old scoped rule above never matched it. */
.added_to_cart {
    display: none !important;
}

/* "Added to basket" toast (js/add-to-cart-toast.js), styled to match
   the design's own toast component. */
.wrighty-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--navy);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    border-left: 4px solid var(--green);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
    transition: transform .25s;
    max-width: calc(100vw - 32px);
    text-align: center;
}

.wrighty-toast.show {
    transform: translateX(-50%) translateY(0);
}

/* ============ Category hub & listing pages (components/category-hub.php) ============ */

.wrighty-crumbs {
    font-size: 12.5px;
    color: var(--muted);
    font-family: var(--font-head);
    padding: 16px 0 4px;
}

.wrighty-crumbs a {
    color: inherit;
    text-decoration: none;
}

.wrighty-crumbs a:hover {
    color: var(--blue);
}

.wrighty-crumbs b {
    color: var(--navy);
}

.wrighty-page-hero {
    border-radius: 16px;
    padding: 40px clamp(20px, 5vw, 56px);
    margin: 8px 0 0;
    color: #fff;
}

.wrighty-page-hero h1 {
    font-size: 32px;
    line-height: 1.1;
    margin: 8px 0 10px;
    color: #fff;
}

.wrighty-page-hero p {
    font-size: 15px;
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
}

.wrighty-blk {
    padding: 36px 0;
}

.wrighty-blk-tint {
    background: rgba(255, 255, 255, .5);
    border-radius: 20px;
}

.wrighty-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 14px;
    flex-wrap: wrap;
}

.wrighty-sec-head h2 {
    font-size: 24px;
    color: var(--navy);
    margin: 4px 0 0;
}

.wrighty-sec-line {
    height: 3px;
    flex: 1;
    background: linear-gradient(90deg, var(--gold-2), transparent);
    border-radius: 2px;
    margin: 0 4px 8px;
}

.wrighty-more {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--blue);
    text-decoration: none;
    white-space: nowrap;
}

.wrighty-more:hover {
    color: var(--navy);
}

/* sub-category cards (children of the current hub category) */
.wrighty-catcards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.wrighty-catcard {
    background: #fff;
    border: 2px solid var(--gold-2);
    border-radius: 14px;
    overflow: hidden;
    display: block;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .18s, box-shadow .18s;
}

.wrighty-catcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.wrighty-catcard .ci {
    height: 180px;
    background: linear-gradient(160deg, #eef1f8, #dfe5f3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrighty-catcard .ci img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    padding: 12px;
}

.wrighty-catcard .cb {
    padding: 14px;
}

.wrighty-catcard .cb h3 {
    font-size: 16px;
    color: var(--navy);
    margin: 0 0 5px;
}

.wrighty-catcard .cb p {
    font-size: 12.5px;
    color: var(--muted);
    margin: 0 0 10px;
    line-height: 1.45;
}

.wrighty-catcard .cb .go {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--blue);
}

/* cross-link tiles (other ranges) */
.wrighty-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.wrighty-tile {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1 / 1.25;
    border: 2px solid var(--gold-2);
    box-shadow: var(--shadow-sm);
    background: var(--navy);
    text-decoration: none;
    transition: transform .18s, box-shadow .18s;
}

.wrighty-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.wrighty-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wrighty-tile .ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 26, 60, .05), rgba(14, 26, 60, .55));
}

.wrighty-tile .lab {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 12px;
    text-align: center;
    padding: 9px 8px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, .4);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 10px rgba(0, 0, 0, .35);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.wrighty-tile .lab.r { background: linear-gradient(180deg, #ef5b5b, #b32424); }
.wrighty-tile .lab.b { background: linear-gradient(180deg, #4aa3e6, #1b66b3); }
.wrighty-tile .lab.y { background: linear-gradient(180deg, #f4c84b, #cf9a1e); }
.wrighty-tile .lab.g { background: linear-gradient(180deg, #56c163, #1f8a3a); }
.wrighty-tile .lab.p { background: linear-gradient(180deg, #a86bd6, #6a31a3); }
.wrighty-tile .lab.t { background: linear-gradient(180deg, #46c7b8, #1c8a7e); }

/* product grid + cards (wrighty_render_product_card()) */
.wrighty-pgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.wrighty-pcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform .16s, box-shadow .16s, border-color .16s;
}

.wrighty-pcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--gold-2);
}

.wrighty-pcard .ph-wrap {
    position: relative;
}

.wrighty-pcard .ph {
    display: block;
    height: 280px;
    background: #f1f4fb;
}

.wrighty-pcard .ph img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wrighty-pcard .wishbtn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
    color: #8a8f9e;
}

.wrighty-pcard .wishbtn svg {
    width: 16px;
    height: 16px;
}

.wrighty-pcard .wishbtn:hover,
.wrighty-pcard .wishbtn.is-active {
    color: var(--red);
}

.wrighty-pcard .wishbtn.is-active svg {
    fill: var(--red);
}

.wrighty-pcard .rg {
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--blue);
}

.wrighty-pcard .badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .36px;
    padding: 5px 11px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.wrighty-pcard .b-sale {
    background: var(--red);
    color: #fff;
}

.wrighty-pcard .b-discount {
    left: auto;
    right: 8px;
    background: var(--navy);
    color: #fff;
}

.wrighty-pcard .rag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .95);
    border-radius: 999px;
    padding: 4px 9px;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.wrighty-pcard .rag .d {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.wrighty-pcard .rag.in { color: #1f7a44; }
.wrighty-pcard .rag.in .d { background: var(--green); }
.wrighty-pcard .rag.low { color: #9a6212; }
.wrighty-pcard .rag.low .d { background: var(--amber); }
.wrighty-pcard .rag.out { color: #9a2c22; }
.wrighty-pcard .rag.out .d { background: var(--red); }
.wrighty-pcard .rag.pre { color: #1b4f88; }
.wrighty-pcard .rag.pre .d { background: var(--blue); }

.wrighty-pcard .pb {
    padding: 11px 12px 13px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wrighty-pcard h4 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    margin: 3px 0 8px;
    line-height: 1.3;
    font-family: var(--font-body);
}

.wrighty-pcard .pb > a {
    color: inherit;
    text-decoration: none;
}

.wrighty-pcard .pr {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.wrighty-pcard .price {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    color: var(--navy);
    white-space: nowrap;
}

.wrighty-pcard .price del {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: var(--muted);
    margin-right: 5px;
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 1;
}

.wrighty-pcard .price del::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    border-top: 1px solid currentColor;
    transform: translateY(-50%);
}

.wrighty-pcard .price ins {
    text-decoration: none;
}

.wrighty-pcard .add {
    background: var(--gold-2);
    border: none;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
}

.wrighty-pcard .add svg {
    width: 16px;
    height: 16px;
    display: block;
}

.wrighty-pcard .add:hover {
    background: var(--gold-hi);
}

.wrighty-pcard .add.dis {
    background: #e3e3e3;
    color: #999;
    cursor: pointer;
}

.wrighty-pcard .add.dis:hover {
    background: #cfd8e8;
    color: var(--navy-deep);
}

.wrighty-stock-notify-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgb(14 26 60 / 60%);
}

.wrighty-stock-notify {
    position: relative;
    width: min(100%, 430px);
    padding: 28px;
    border-radius: var(--radius);
    background: #fff;
    color: var(--navy-deep);
    box-shadow: var(--shadow);
}

.wrighty-stock-notify h3 { margin: 0 28px 8px 0; }
.wrighty-stock-notify__product { margin: 0 0 18px; font-weight: 600; }
.wrighty-stock-notify label { display: block; margin-bottom: 6px; font-size: 13px; }
.wrighty-stock-notify input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.wrighty-stock-notify__message { min-height: 20px; margin: 6px 0 14px; font-size: 13px; }
.wrighty-stock-notify__close { position: absolute; top: 12px; right: 12px; border: 0; background: none; font-size: 24px; cursor: pointer; }
.wrighty-stock-notify__actions { display: flex; justify-content: flex-end; gap: 10px; }
.wrighty-stock-notify__actions button { border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
.wrighty-stock-notify__actions .cancel { background: #eef3fb; color: var(--navy-deep); }
.wrighty-stock-notify__actions .submit { background: var(--gold-2); color: var(--navy-deep); }
.wrighty-stock-notify__actions button:disabled { opacity: .6; cursor: wait; }
}

/* pagination (paginate_links() output) */
.wrighty-pager {
    margin-top: 24px;
}

.wrighty-pager-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top:18px;
}

.wrighty-pager .page-numbers {
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border-radius: 9px;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 13px;
    background: #fff;
    color: var(--navy);
    text-decoration: none;
}

.wrighty-pager a.page-numbers:hover {
    border-color: var(--gold-2);
}

.wrighty-pager .page-numbers.current {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

@media (max-width: 1024px) {
    .wrighty-catcards,
    .wrighty-tiles,
    .wrighty-pgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .wrighty-catcards,
    .wrighty-tiles {
        grid-template-columns: 1fr 1fr;
    }

    /* Product cards keep price + add-to-cart on one row no matter how
       long the (sale) price gets - .pr's flex-wrap is only a last-resort
       safety net for that, not something that should trigger in normal
       use. A 2-column mobile card doesn't leave enough width for both,
       so this drops to 1 column instead of relying on that wrap. */
    .wrighty-pgrid {
        grid-template-columns: 1fr;
    }

    .wrighty-page-hero h1 {
        font-size: 26px;
    }
}

/* ============ Product Listing Page (category-hub.php plain grid) ============ */

.wrighty-plp-title {
    font-size: 26px;
    color: var(--navy);
    margin: 0 0 6px;
}

.wrighty-plp-desc {
    font-size: 13px;
    margin: 0 0 14px;
}

.wrighty-plp-togglebtn-wrap {
    margin-bottom: 12px;
}

.wrighty-list-grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 22px;
    align-items: start;
}

/* This grid sits beside the 250px filter sidebar, so at normal desktop
   widths it has noticeably less room per column than the full-width
   homepage/hub rails that share the same .wrighty-pgrid rule (which stays
   a fixed 4 columns there by design). Below 1025px the shared responsive
   rules already drop .wrighty-pgrid to 2 columns, which is wide enough
   even with the sidebar - only the >1024px case forces 4 columns into a
   space that can be too narrow, squeezing card price + add-to-cart
   together. auto-fit/minmax gives each card a guaranteed minimum width
   here instead, settling on however many columns actually fit. */
@media (min-width: 1025px) {
    .wrighty-list-grid .wrighty-pgrid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.wrighty-list-grid.nofilters {
    grid-template-columns: 1fr;
}

.wrighty-list-grid.nofilters > .wrighty-filters {
    display: none;
}

header .wrighty-header-filter-toggle {
    display: flex;
    width: max-content;
    margin: 0 max(18px, calc((100vw - 1320px) / 2 - 130px)) 0 auto;
    border-radius: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    transition:none;
}

/* wpautop() (which runs on this shortcode's rendered output) can still slip
   a stray empty <p></p> in as a direct child of a grid/flex container even
   after wrapping every loose inline element it knows to target — a zero-
   content <p> here is never intentional, so hiding it removes it from grid
   flow entirely rather than letting it consume a track/flex item. */
.wrighty-list-grid > p:empty,
.wrighty-ctrls > p:empty,
.wrighty-perpage > p:empty,
.wrighty-fgroup > p:empty {
    display: none;
}


.wrighty-filters {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0 16px 14px;
    position: fixed;
    left: max(0px, calc((100vw - 1320px) / 2));
    top: 136px;
    width: 250px;
    max-height: calc(100vh - 126px);
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    z-index: 20;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}

.wrighty-filters__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 0 8px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--navy);
}

.wrighty-filters__header .btn {
    flex-shrink: 0;
}

.wrighty-filters__close,
.wrighty-filters__actions {
    display: none;
}

.wrighty-filters__active {
    flex: none;
}

.wrighty-filters__scroll {
    min-height: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    padding-bottom: 8px;
    padding-right: 10px;
}

.wrighty-filters .wrighty-fgroup {
    border-bottom: 1px solid var(--line);
    padding: 13px 0;
}

.wrighty-filters .wrighty-fgroup:last-child {
    border-bottom: none;
}

.wrighty-fgroup h5 {
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--navy);
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.wrighty-fgroup h5 .tg {
    display: inline-block;
    transition: transform .16s;
}

.wrighty-fbody {
    margin-top: 9px;
}

.wrighty-fgroup.is-collapsed .wrighty-fbody {
    display: none;
}

.wrighty-fgroup.is-collapsed h5 .tg {
    transform: rotate(-90deg);
}

.wrighty-fopt {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    padding: 5px 0;
    cursor: pointer;
    color: #3c4257;
}

.wrighty-fopt input {
    accent-color: var(--gold-2);
    width: 15px;
    height: 15px;
}

.wrighty-fopt .c {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
    background: #f0f2f8;
    border-radius: 999px;
    padding: 1px 7px;
}

.wrighty-range input {
    width: 100%;
    accent-color: var(--gold-2);
}

.wrighty-range {
    height: 22px;
    position: relative;
    touch-action: none;
}

.wrighty-range__track {
    background: var(--line);
    border-radius: 999px;
    height: 4px;
    left: 8px;
    position: absolute;
    right: 8px;
    top: 9px;
    cursor: pointer;
}

.wrighty-range__fill {
    background: var(--gold-2);
    border-radius: inherit;
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

.wrighty-range input[type="range"] {
    appearance: none;
    background: transparent;
    inset: 0;
    margin: 0;
    pointer-events: none;
    position: absolute;
}

.wrighty-range input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    height: 4px;
}

.wrighty-range input[type="range"]::-moz-range-track {
    background: transparent;
    height: 4px;
}

.wrighty-range input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    background: var(--gold-2);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    cursor: pointer;
    height: 16px;
    margin-top: -6px;
    pointer-events: auto;
    width: 16px;
}

.wrighty-range input[type="range"]::-moz-range-thumb {
    background: var(--gold-2);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    cursor: pointer;
    height: 12px;
    pointer-events: auto;
    width: 12px;
}

.wrighty-range input[data-wrighty-price-max] {
    z-index: 2;
}

.wrighty-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 0 0 6px;
}

.wrighty-chip {
    font-size: 12px;
    font-family: var(--font-head);
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.wrighty-clear-all {
    font-size: 12px;
    color: var(--blue);
    font-family: var(--font-head);
    cursor: pointer;
    text-decoration: none;
}

.wrighty-list-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.wrighty-res {
    font-size: 13px;
    color: var(--muted);
}

.wrighty-res b {
    color: var(--navy);
}

.wrighty-ctrls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.wrighty-instock-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--navy);
    font-size: 13.5px;
}

.wrighty-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wrighty-ctrls label {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-head);
    text-transform: uppercase;
}

.wrighty-ctrls select {
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
    color: var(--navy);
}

.wrighty-perpage-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.wrighty-perpage-row label {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-head);
    text-transform: uppercase;
}

.wrighty-perpage {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.wrighty-perpage button {
    border: none;
    background: #fff;
    padding: 8px 11px;
    font-family: var(--font-head);
    font-size: 12px;
    cursor: pointer;
    color: var(--muted);
}

.wrighty-perpage button.on {
    background: var(--navy);
    color: #fff;
}

.wrighty-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}

.wrighty-empty a {
    color: var(--blue);
    cursor: pointer;
}

[data-wrighty-grid].is-loading,
.wrighty-pager.is-loading {
    opacity: .5;
    pointer-events: none;
    transition: opacity .16s;
}

.btn.blue {
    background: var(--blue);
    color: #fff;
}

.btn.blue:hover {
    background: #2459a8;
}

.btn.sm {
    font-size: 12px;
    padding: 9px 14px;
}

.btn.ghost {
    background: transparent;
    border: 2px solid var(--navy);
    color: var(--navy);
}

.btn.ghost:hover {
    background: rgba(22, 35, 75, .06);
}

@media (max-width: 860px) {
    .wrighty-list-grid {
        grid-template-columns: 1fr;
    }

    .wrighty-filters {
        position: fixed;
        inset: 0;
        top: 0;
        left: 0;
        width: auto;
        max-height: none;
        overflow: hidden;
        display: flex;
        border: none;
        border-radius: 0;
        z-index: 100000;
        padding: 0;
    }

    .wrighty-filters__header {
        height: 54px;
        box-sizing: border-box;
        padding: 0 16px;
        flex: none;
    }

    .wrighty-filters__close {
        display: block;
        width: 28px;
        height: 28px;
        border: 0;
        outline: 0;
        box-shadow: none;
        background: transparent;
        color: var(--muted);
        font-size: 22px;
        line-height: 1;
        padding: 0;
    }

    .wrighty-filters .wrighty-filters__active{
        flex: none;
        padding: 12px 26px 12px 16px;
    }

    .wrighty-filters__scroll {
        height: auto;
        max-height: none;
        overflow-y: auto;
        flex: 1 1 auto;
        padding: 0 26px 8px 16px;
    }

    .wrighty-filters__actions {
        display: flex;
        gap: 10px;
        min-height: 76px;
        padding: 12px 16px;
        box-sizing: border-box;
        border-top: 1px solid var(--line);
        background: #fff;
        flex: none;
    }

    .wrighty-filters__actions button {
        min-height: 44px;
        border-radius: 8px;
        padding: 10px 16px;
        font-family: var(--font-head);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .wrighty-filters__reset {
        flex: 0 0 auto;
        border: 1px solid var(--line);
        color: var(--navy);
        background: #fff;
    }

    .wrighty-filters__results {
        flex: 1 1 auto;
        border: 1px solid var(--navy);
        color: #fff;
        background: var(--navy);
    }

    .wrighty-filters__scroll {
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* ============ Product detail page (templates/single-product.html) ============ */

.wrighty-product .product-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    max-width: 1320px;
    margin: 20px auto;
    padding: 0 18px;
    box-sizing: border-box;
}

/* store notices (order/cart messages) sit above the gallery+summary row, not beside it */
.wrighty-product .product-top > .wp-block-woocommerce-store-notices {
    grid-column: 1 / -1;
}

.wrighty-product .product-top > .wp-block-woocommerce-store-notices:empty {
    display: none;
}

.wrighty-pdp-gallery.wp-block-woocommerce-product-image-gallery {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    /* WooCommerce's own product-image-gallery.css sets position:relative at
       the exact same selector specificity and happens to load after this
       file, winning the tie — !important forces this rule to win instead. */
    position: sticky !important;
    top: 148px;
}

.wrighty-pdp-gallery img {
    border-radius: 12px;
}

/* WooCommerce's own default olive .onsale badge CSS loads after this file
   (see the sticky-position comment above) and wins ties at equal
   specificity, so !important is needed to match the red used for the
   "Sale" badge on listing-page product cards (.wrighty-pcard .b-sale). */
.onsale {
    background-color: var(--red) !important;
}

.product-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wrighty-pdp-eyebrow.wp-block-post-terms {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 6px !important;
}

.wrighty-pdp-eyebrow a {
    color: var(--muted);
    text-decoration: none;
}

.wrighty-pdp-eyebrow a:hover {
    color: var(--navy);
}

.wrighty-pdp-title.wp-block-post-title {
    font-size: 28px;
    color: var(--navy);
    line-height: 1.12;
    margin: 6px 0 4px !important;
}

.wrighty-pdp-rating {
    margin: 0 0 8px !important;
    color: var(--muted);
    font-size: 13px;
}

.wrighty-pdp-rating .star-rating {
    color: var(--gold-2);
}

.wrighty-pdp-price.wp-block-woocommerce-product-price {
    margin: 6px 0 4px !important;
}

.wrighty-pdp-price .wc-block-components-product-price {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 32px;
    color: var(--navy);
}

.wrighty-pdp-price .wc-block-components-product-price del {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    color: var(--muted);
    margin-right: 8px;
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 1;
}

.wrighty-pdp-price .wc-block-components-product-price del::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    border-top: 1px solid currentColor;
    transform: translateY(-50%);
}

.wrighty-pdp-price .wc-block-components-product-price ins {
    text-decoration: none;
}

.wrighty-pdp-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
    margin: 4px 0 6px !important;
}

.wrighty-pdp-stock::before {
    content: "\2713";
    font-weight: 700;
    flex-shrink: 0;
}

.wrighty-pdp-stock.wc-block-components-product-stock-indicator--out-of-stock,
.wrighty-pdp-stock.wc-block-components-product-stock-indicator--low-stock {
    color: var(--red);
}

.wrighty-pdp-stock.wc-block-components-product-stock-indicator--out-of-stock::before,
.wrighty-pdp-stock.wc-block-components-product-stock-indicator--low-stock::before {
    content: "\2715";
}

.wrighty-pdp-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 6px 0 4px;
}

.wrighty-pdp-trust__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #3a4258;
    font-weight: 600;
}

.wrighty-pdp-trust__ico {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--blue);
}

.wrighty-pdp-trust__ico svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 480px) {
    .wrighty-pdp-trust {
        grid-template-columns: 1fr;
    }
}

.wrighty-pdp-viewers {
    font-size: 12.5px;
    font-weight: 600;
    color: #c0392b;
    margin: 0 0 8px !important;
}

.wrighty-pdp-addtocart.wp-block-woocommerce-add-to-cart-form {
    margin: 6px 0 4px !important;
}

.wrighty-pdp-cart-row.wp-block-group {
    display: flex !important;
    align-items: stretch !important;
    gap: 10px;
    margin: 6px 0 4px !important;
}

.wrighty-pdp-cart-row .wrighty-pdp-addtocart.wp-block-woocommerce-add-to-cart-form {
    flex: 1;
    margin: 0 !important;
}

/* wpautop() wraps the wishlist <button> in a <p> (see PHP comment); this
   makes that wrapper invisible to the flex layout so the button itself
   becomes the real flex item again and can stretch to full height. */
.wrighty-pdp-cart-row .wrighty-pdp-wishlist-wrap {
    display: contents;
}

/* WC Blocks' own form.cart reserves a 3rd grid column sized for express-pay
   buttons that are hidden on this page — collapse it to just [qty, button]
   and let the button fill all remaining width. */
.wrighty-pdp-addtocart form.cart {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: stretch;
}

.wrighty-pdp-addtocart .single_add_to_cart_button {
    width: 100%;
}

.wrighty-pdp-wishlist {
    flex-shrink: 0;
    width: 52px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .16s, color .16s;
}

.wrighty-pdp-wishlist svg {
    width: 20px;
    height: 20px;
}

.wrighty-pdp-wishlist:hover,
.wrighty-pdp-wishlist.is-active {
    color: var(--red);
    border-color: var(--red);
}

/* Per-product wishlist heart icons (product cards, PDP - see
   images/heart-svgrepo-com.svg) now ship two shapes: .ht-outline is a
   hollow heart made of two nested paths, .ht-solid is a genuinely
   filled heart. Recoloring .ht-outline alone (the old behaviour,
   still used for the default state) can only ever look like a
   colored outline - it has no interior to fill - so hover/active
   swaps to .ht-solid instead, which actually reads as a filled heart.
   Both inherit color from their existing hover/active rules above via
   currentColor, so no color is repeated here - just which shape is
   visible. The header wishlist link (parts/header.html) intentionally
   keeps its original single-shape icon and gold hover color - it's a
   plain nav link to the wishlist page, not a per-product toggle, and
   was reverted after this same treatment was tried there and didn't
   fit. */
.ht-solid {
    display: none;
}

.wrighty-pcard .wishbtn:hover .ht-outline,
.wrighty-pcard .wishbtn.is-active .ht-outline,
.wc-block-product .wc-block-components-product-image .wishbtn:hover .ht-outline,
.wc-block-product .wc-block-components-product-image .wishbtn.is-active .ht-outline,
.wrighty-pdp-wishlist:hover .ht-outline,
.wrighty-pdp-wishlist.is-active .ht-outline {
    display: none;
}

.wrighty-pcard .wishbtn:hover .ht-solid,
.wrighty-pcard .wishbtn.is-active .ht-solid,
.wc-block-product .wc-block-components-product-image .wishbtn:hover .ht-solid,
.wc-block-product .wc-block-components-product-image .wishbtn.is-active .ht-solid,
.wrighty-pdp-wishlist:hover .ht-solid,
.wrighty-pdp-wishlist.is-active .ht-solid {
    display: inline;
}

/* WooCommerce's classic add-to-cart template prints its own stock text;
   the separate Product Stock Indicator block already covers that, so hide the duplicate */
.wrighty-pdp-addtocart .stock {
    display: none;
}

/* WC Blocks' own form.cart ships spacious default margins (12px/32px) meant
   for a roomier layout; reset to fit this compact card instead. */
.wrighty-pdp-addtocart form.cart {
    margin: 0 !important;
}

/* Hidden marketing-attribution tracking inputs (Stripe/WooCommerce) — the
   custom element wrapping them isn't suppressed by the browser by default
   and was adding stray height/margin below the button. */
.wrighty-pdp-addtocart wc-order-attribution-inputs {
    display: none !important;
}

.wrighty-pdp-addtocart .quantity .qty {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 10px;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy);
    width: 64px;
}

.wrighty-pdp-addtocart .quantity.wrighty-qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.wrighty-pdp-addtocart .quantity.wrighty-qty-stepper .qty {
    border: none;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-radius: 0;
    width: 44px;
    text-align: center;
    padding: 11px 4px;
    /* WooCommerce's own core stylesheet (not the blocks one) sets
       margin-right:.5em on .qty at higher specificity than this rule —
       that's the real remaining source of the gap next to the plus button. */
    margin: 0 !important;
}

.wrighty-pdp-addtocart .wrighty-qty-btn {
    border: none;
    background: #fff;
    color: var(--navy);
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    width: 36px;
    margin: 0;
    cursor: pointer;
    transition: background-color .16s;
}

.wrighty-pdp-addtocart .wrighty-qty-btn:hover {
    background: var(--paper);
}

.wrighty-pdp-addtocart .single_add_to_cart_button {
    background: var(--gold-2);
    color: var(--navy-deep);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: none;
    border-radius: 10px;
    padding: 14px 24px;
    cursor: pointer;
    transition: background-color .16s;
}

.wrighty-pdp-addtocart .single_add_to_cart_button::after {
    content: " \2192";
}

.wrighty-pdp-addtocart .single_add_to_cart_button:hover {
    background: var(--gold-hi);
}

/* Stripe's "Express Checkout" (Apple/Google/Amazon Pay + Link) is injected by
   the payment gateway plugin itself, not this theme — hidden here to match
   the design's single add-to-cart CTA, scoped to the PDP only. */
.wrighty-pdp-addtocart #wc-stripe-express-checkout-element {
    display: none !important;
}

.wrighty-pdp-price-meta {
    font-size: 12.5px;
    color: var(--muted);
    margin: 2px 0 0 !important;
}

.wrighty-pdp-klarna {
    font-size: 12.5px;
    color: var(--muted);
    margin: 8px 0 4px !important;
}

/* Accordion: Description / Product Details / Shipping & Returns
   (built from WooCommerce's own classic tabs markup by js/product-pdp-polish.js,
   plus the static Shipping & Returns item rendered by [wrighty_pdp_shipping_returns]) */
.wrighty-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 57px;
    box-sizing: border-box;
    background: none;
    border: none;
    border-top: 1px solid var(--line);
    padding: 0;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    text-align: left;
}

.wrighty-accordion-header.is-first {
    border-top: none;
}

.wrighty-accordion-icon {
    font-family: var(--font-head);
    font-size: 17px;
    color: var(--muted);
    flex-shrink: 0;
    margin-left: 12px;
}

.wrighty-accordion-panel {
    padding: 0 0 20px;
    color: #3a4258;
    font-size: 14px;
    line-height: 1.6;
}

.wrighty-accordion-panel table.woocommerce-product-attributes {
    width: 100%;
    border-collapse: collapse;
}

.wrighty-accordion-panel table.woocommerce-product-attributes th,
.wrighty-accordion-panel table.woocommerce-product-attributes td {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 13.5px;
    font-weight: 400;
}

.wrighty-accordion-panel table.woocommerce-product-attributes th {
    width: 160px;
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
}

/* description / attributes / reviews tabs */
.product-tabs {
    max-width: 1320px;
    margin: 30px auto;
    padding: 0 18px;
    box-sizing: border-box;
}

.wrighty-pdp-attributes,
.wrighty-pdp-reviews {
    border-top: 1px solid var(--line);
    padding: 22px 0;
}

/* .wrighty-pdp-details is now the accordion wrapper (Description / Product
   Details / Shipping & Returns, built by js/product-pdp-polish.js) — no
   padding/border of its own so the top and bottom edges match the spacing
   between individual accordion items exactly. */
.wrighty-pdp-details {
    margin-top: 6px;
}

.wrighty-pdp-details h2,
.wrighty-pdp-attributes h2,
.wrighty-pdp-reviews h2 {
    font-family: var(--font-head);
    font-size: 16px;
    color: var(--navy);
    margin: 0 0 12px;
}

.wrighty-pdp-attributes table {
    font-size: 13.5px;
    color: #3a4258;
}

.wrighty-pdp-attributes table th {
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    text-align: left;
    font-weight: 400;
}

.wrighty-pdp-related {
    max-width: 1320px;
    margin: 10px auto 36px;
    padding: 0 18px;
    box-sizing: border-box;
}

.wrighty-pdp-related > h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 24px;
    color: var(--navy);
    margin: 0 0 18px;
}

.wrighty-pdp-related > h2::after {
    content: "";
    flex: 1;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-2), transparent);
    border-radius: 2px;
    margin-bottom: -6px;
}

/* WooCommerce's native related-products block ships its own markup (not our
   wrighty-pcard shortcode template), so it's restyled here to match instead.
   Both the older wc-block-grid__* and newer wc-block-components-product-*
   class families are covered since we can't pin the exact WC Blocks version. */
.wrighty-pdp-related ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wrighty-pdp-related li.wc-block-grid__product,
.wrighty-pdp-related li.wc-block-product-template__item,
.wrighty-pdp-related > ul > li {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 0 0 12px;
}

.wrighty-pdp-related img,
body.single-product .wc-block-product-template .wc-block-components-product-image img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain !important;
    display: block;
}

.wrighty-pdp-related .wc-block-grid__product-title,
.wrighty-pdp-related .wc-block-components-product-title {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    margin: 10px 12px 4px;
    line-height: 1.3;
}

.wrighty-pdp-related .wc-block-grid__product-price,
.wrighty-pdp-related .wc-block-components-product-price {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy);
    margin: 0 12px;
}

.wrighty-pdp-related .wc-block-grid__product-onsale,
.wrighty-pdp-related .wc-block-components-product-sale-badge {
    background: var(--red);
    color: #fff;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 3px 8px;
    margin: 10px 0 0 12px;
}

.wrighty-pdp-related .wp-block-button__link,
.wrighty-pdp-related .add_to_cart_button,
.wrighty-pdp-related .wc-block-components-product-button__button {
    background: var(--gold-2);
    color: var(--navy-deep);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    border-radius: 8px;
    margin: 10px 12px 0;
    padding: 8px 14px;
}

@media (max-width: 1024px) {
    .wrighty-pdp-related ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .wrighty-product .product-top {
        grid-template-columns: 1fr;
    }

    .wrighty-pdp-gallery.wp-block-woocommerce-product-image-gallery {
        /* !important required: an unqualified !important rule (the desktop
           sticky rule above) always beats a plain declaration regardless of
           media query or source order, so without !important here this
           never actually applied — the gallery stayed sticky on mobile too,
           permanently pinned at top:148px while the single-column stacked
           layout scrolled underneath it. */
        position: static !important;
    }
}

/* ============ PDP extras: review summary / Q&A / FBT / popular singles ============ */

.wrighty-review-summary {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px 22px;
    margin-bottom: 18px;
}

.wrighty-review-summary__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
}

.wrighty-review-summary__score {
    flex: 0 0 auto;
    text-align: center;
    min-width: 120px;
}

.wrighty-review-summary__avg {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 40px;
    color: var(--navy);
    line-height: 1;
}

.wrighty-review-summary__stars {
    color: var(--gold-2);
    letter-spacing: 2px;
    font-size: 16px;
    margin: 6px 0 4px;
}

.wrighty-review-summary__count {
    font-size: 12px;
    color: var(--muted);
}

.wrighty-review-summary__bars {
    flex: 1 1 260px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wrighty-review-summary__row {
    display: grid;
    grid-template-columns: 28px 1fr 24px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

.wrighty-review-summary__track {
    height: 7px;
    background: #eef1f8;
    border-radius: 999px;
    overflow: hidden;
}

.wrighty-review-summary__fill {
    display: block;
    height: 100%;
    background: var(--gold-2);
    border-radius: 999px;
}

.wrighty-review-summary__n {
    text-align: right;
}

.wrighty-review-summary__cta {
    flex: 0 0 auto;
    margin-left: auto;
    background: none;
    border: 1px solid var(--navy);
    color: var(--navy);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 8px;
    padding: 11px 20px;
    cursor: pointer;
    transition: background-color .16s, color .16s;
}

.wrighty-review-summary__cta:hover {
    background: var(--navy);
    color: #fff;
}

.wrighty-review-summary__examples {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.wrighty-review-summary__example {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
}

.wrighty-review-summary__example-stars {
    color: var(--gold-2);
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 8px;
}

.wrighty-review-summary__example-quote {
    font-size: 13.5px;
    color: #3a4258;
    line-height: 1.5;
    margin: 0 0 12px;
}

.wrighty-review-summary__example-author {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
}

.wrighty-review-summary__verified {
    font-weight: 600;
    color: var(--green);
    margin-left: 4px;
}

@media (max-width: 720px) {
    .wrighty-review-summary__examples {
        grid-template-columns: 1fr;
    }
}

/* Review form popup — the native review form (#respond) is moved in here by
   js/product-review-modal.js and only shown when "Write a review" is clicked. */
.wrighty-review-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 26, 60, .55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.wrighty-review-modal-overlay.is-open {
    display: flex;
}

.wrighty-review-modal {
    background: #fff;
    border-radius: var(--radius);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
}

.wrighty-review-modal #respond {
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.wrighty-review-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--navy);
}

.wrighty-review-modal-close:hover {
    background: var(--paper);
}

/* Frequently Bought Together */

.wrighty-fbt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px 22px;
}

.wrighty-fbt__items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.wrighty-fbt__plus {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
    color: var(--muted);
}

.wrighty-fbt__item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    max-width: 200px;
}

.wrighty-fbt__item input[type="checkbox"] {
    accent-color: var(--gold-2);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.wrighty-fbt__item img {
    width: 46px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    background: #f1f4fb;
    flex-shrink: 0;
}

.wrighty-fbt__item-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}

.wrighty-fbt__item-price {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    color: var(--navy);
    white-space: nowrap;
}

.wrighty-fbt__footer {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.wrighty-fbt__total {
    font-size: 14px;
    color: var(--navy);
}

.wrighty-fbt__total-price {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
}

/* Bottom trust strip — sits just above the footer */

.wrighty-pdp-bottom-trust {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    max-width: 1320px;
    margin: 10px auto 36px;
    padding: 0 18px;
    box-sizing: border-box;
}

.wrighty-pdp-bottom-trust__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.wrighty-pdp-bottom-trust__ico {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--blue);
}

.wrighty-pdp-bottom-trust__ico svg {
    width: 22px;
    height: 22px;
}

.wrighty-pdp-bottom-trust__title {
    font-family: var(--font-head);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
}

.wrighty-pdp-bottom-trust__sub {
    font-size: 11px;
    color: var(--muted);
}

@media (max-width: 1024px) {
    .wrighty-pdp-bottom-trust {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .wrighty-pdp-bottom-trust {
        grid-template-columns: 1fr;
    }
}

/* Questions & Answers */

.wrighty-qa-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.wrighty-qa-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
}

.wrighty-qa-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11px;
    margin-right: 9px;
    flex-shrink: 0;
}

.wrighty-qa-q {
    display: flex;
    align-items: flex-start;
    font-weight: 600;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.5;
}

.wrighty-qa-q .wrighty-qa-mark {
    background: var(--blue);
    color: #fff;
}

.wrighty-qa-a {
    display: flex;
    align-items: flex-start;
    color: #3a4258;
    font-size: 13.5px;
    line-height: 1.5;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.wrighty-qa-a .wrighty-qa-mark {
    background: var(--gold-2);
    color: var(--navy-deep);
}

.wrighty-qa-pending {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 0 29px;
    font-style: italic;
}

.wrighty-qa-form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    max-width: 560px;
}

.wrighty-qa-status {
    font-size: 13px;
    color: var(--green);
    margin: 10px 0 0;
}

.wrighty-qa-status.is-error {
    color: var(--red);
}

@media (max-width: 860px) {
    .wrighty-review-summary__top {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .wrighty-review-summary__cta {
        margin: 4px auto 0;
    }

    .frow {
        grid-template-columns: 1fr;
    }
}

/* ============ Product News & Guides (components/news.php) ============ */

.wrighty-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.wrighty-news-card {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s;
}

.wrighty-news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(14, 26, 60, .12);
}

.wrighty-news-card .nc-img {
    height: 150px;
    overflow: hidden;
    background: #eef1f8;
}

.wrighty-news-card .nc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wrighty-news-card .nc-body {
    padding: 14px;
}

.wrighty-news-card .nc-body .kick {
    color: var(--blue);
}

.wrighty-news-card h3 {
    font-size: 16px;
    line-height: 1.3;
    margin: 6px 0;
    color: var(--navy);
}

.wrighty-news-card p {
    font-size: 13px;
    margin: 0 0 8px;
}

.wrighty-news-card .go {
    color: var(--blue);
    font-family: var(--font-head);
    font-size: 12px;
}

.wrighty-article {
    max-width: 780px;
    margin: 0 auto;
}

.wrighty-article .kick {
    color: var(--blue);
}

.wrighty-article h1 {
    font-size: 30px;
    line-height: 1.15;
    color: var(--navy);
    margin: 6px 0 14px;
}

.wrighty-article-hero {
    margin-bottom: 18px;
}

.wrighty-article-hero img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 14px;
    background: #eef1f8;
}

.wrighty-article-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
}

.wrighty-article-body p {
    margin: 0 0 16px;
}

/* ============ Static content pages: FAQ, Condition Guide, Policies
   (components/faq.php, components/condition-guide.php, components/policy.php)
   ============ */

.wrighty-narrow {
    max-width: 820px;
}

.wrighty-narrow-title {
    font-size: 30px;
    color: var(--navy);
    margin: 0 0 8px;
}

.wrighty-narrow-intro {
    font-size: 15px;
    margin-bottom: 18px;
}

.wrighty-narrow-footnote {
    font-size: 13px;
    margin-top: 10px;
}

.wrighty-condition-item {
    padding: 18px 20px;
    margin-bottom: 12px;
}

.wrighty-condition-item h3 {
    font-size: 17px;
    color: var(--navy);
    margin: 0 0 5px;
}

.wrighty-condition-item p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.wrighty-faq-list {
    margin-bottom: 14px;
}

.wrighty-faq-item {
    padding: 0;
    margin-bottom: 10px;
    overflow: hidden;
}

.wrighty-faq-item summary {
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 700;
    color: var(--navy);
    font-family: var(--font-head);
    font-size: 15px;
    list-style: none;
}

.wrighty-faq-item summary::-webkit-details-marker {
    display: none;
}

.wrighty-faq-item summary::after {
    content: '\2304';
    float: right;
    transition: transform .15s;
}

.wrighty-faq-item[open] summary::after {
    transform: rotate(180deg);
}

.wrighty-faq-answer {
    padding: 0 20px 16px;
    font-size: 14px;
    line-height: 1.6;
}

.wrighty-faq-answer a {
    color: var(--blue);
}

.wrighty-faq-cta {
    padding: 20px;
    margin-top: 14px;
    text-align: center;
}

.wrighty-faq-cta p {
    font-size: 14px;
    margin: 6px 0 12px;
}

/* ============ Lead-gen forms: Contact, Sell Your Cards
   (components/contact-form.php, components/sell-form.php) ============ */

.wrighty-checkout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: start;
}

.wrighty-lead-card {
    padding: 24px;
}

.wrighty-lead-card h1,
.wrighty-lead-card h2 {
    font-size: 22px;
    color: var(--navy);
    margin: 0 0 8px;
}

.wrighty-lead-card h3 {
    font-size: 17px;
    color: var(--navy);
    margin: 0 0 8px;
}

.wrighty-lead-card > p.muted {
    margin: 0 0 16px;
}

.wrighty-req {
    color: var(--red);
}

.wrighty-checkbox-label {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    text-transform: none !important;
    font-family: var(--font-body) !important;
    color: var(--ink);
}

.wrighty-checkbox-label input {
    width: auto !important;
    margin-top: 3px;
}

.wrighty-lead-status {
    font-size: 13px;
    margin: 10px 0 0;
    color: var(--muted);
}

.wrighty-lead-status.is-error {
    color: var(--red);
}

.wrighty-lead-done {
    padding: 40px 28px;
    text-align: center;
}

.wrighty-lead-done-emoji {
    font-size: 34px;
    margin-bottom: 6px;
}

.wrighty-lead-done h2 {
    color: var(--navy);
    margin: 4px 0 8px;
}

.wrighty-lead-done p {
    margin: 0 0 16px;
}

.wrighty-contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wrighty-contact-sidebar .card {
    padding: 24px;
}

.wrighty-contact-sidebar h3 {
    font-size: 16px;
    color: var(--navy);
    margin: 0 0 10px;
}

.wrighty-support-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-size: 14px;
    margin: 0;
}

.wrighty-support-list dt {
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted);
}

.wrighty-support-list dd {
    margin: 0;
    color: var(--navy);
}

.wrighty-support-list dd a {
    color: inherit;
    text-decoration: none;
}

.wrighty-support-list dd a:hover {
    text-decoration: underline;
}

.wrighty-quick-links {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.wrighty-quick-links li {
    padding: 5px 0;
}

.wrighty-quick-links a {
    color: var(--blue);
}

.wrighty-bullet-list {
    margin: 12px 0 0;
    padding-left: 18px;
    font-size: 14px;
    color: var(--navy);
}

.wrighty-bullet-list li {
    margin-bottom: 6px;
}

/* ============ Order Tracking (components/order-tracking.php) ============ */

.wrighty-track-wrap {
    max-width: 460px;
    margin: 0 auto;
}

.wrighty-track-card,
.wrighty-track-result {
    padding: 24px;
}

.wrighty-track-card h3 {
    font-size: 18px;
    color: var(--navy);
    margin: 0 0 6px;
}

.wrighty-track-card > p.muted {
    margin: 0 0 16px;
}

.wrighty-track-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.wrighty-track-order-num {
    font-family: var(--font-head);
    color: var(--navy);
    font-size: 16px;
}

.wrighty-track-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.wrighty-track-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--muted);
}

.wrighty-track-steps li.is-done {
    color: var(--navy);
    font-weight: 600;
}

.wrighty-track-dot {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    border: 2px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
}

.wrighty-track-steps li.is-done .wrighty-track-dot {
    background: var(--gold-2);
    border-color: var(--gold-2);
}

/* ============ Wishlist page (components/wishlist-page.php) ============ */

.wrighty-wishlist-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--navy);
}

.wrighty-wishlist-summary-actions {
    display: flex;
    gap: 10px;
}

/* ============ Bundles & Deals (components/bundles.php) ============ */

.wrighty-bundle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.wrighty-bundle-card {
    overflow: hidden;
}

.wrighty-bundle-head {
    background: linear-gradient(120deg, var(--navy), #1D2C57 80%);
    padding: 16px 20px;
}

.wrighty-bundle-head h3 {
    color: #fff;
    font-size: 18px;
    margin: 0;
}

.wrighty-bundle-thumbs {
    display: flex;
    gap: 6px;
    padding: 14px 20px 0;
}

.wrighty-bundle-thumbs img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    background: #f1f4fb;
    border: 1px solid var(--line);
}

.wrighty-bundle-body {
    padding: 14px 20px 20px;
}

.wrighty-bundle-desc {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 14px;
}

.wrighty-bundle-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.wrighty-bundle-was {
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 1;
    color: var(--muted);
    font-size: 13px;
    margin-right: 8px;
}

.wrighty-bundle-was::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    border-top: 1px solid currentColor;
    transform: translateY(-50%);
}

.wrighty-bundle-now {
    font-family: var(--font-head);
    font-size: 20px;
    color: var(--navy);
}

.wrighty-bundle-save {
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-family: var(--font-head);
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 6px;
}

.wrighty-bundle-cta {
    width: 100%;
}

/* ============ Hero / promo sliders ============ */

.wrighty-hero-slider {
    position: relative;
    display: grid;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(120deg, #FDEFB2, #82CAFF);
}

/* All slides stack in the same grid cell so the row height is always
   driven by the tallest slide, not whichever one is currently active.
   That keeps the slider's height constant across transitions instead
   of jumping to match each slide's own content height. */
.wrighty-slide {
    grid-area: 1 / 1 / 2 / 2;
    position: relative;
    visibility: hidden;
    min-height: 50vh;
    background: linear-gradient(120deg, #FDEFB2, #82CAFF);
}

.wrighty-slide.is-active {
    visibility: visible;
}

/* Before JS takes over (slider.js-active), show the first slide by default
   so the hero isn't blank. Scoped to :not(.js-active) so it switches off the
   instant JS assigns is-active — otherwise the first slide stays visible
   forever, stacked on top of whatever slide is actually active. */
.wrighty-hero-slider:not(.js-active) .wrighty-slide:first-child {
    visibility: visible;
}

.wrighty-slide:nth-child(even) {
    background: linear-gradient(120deg, #82CAFF, #FDEFB2);
}

/* product image, right side */
.wrighty-slide picture {
    position: absolute;
    top: 0;
    bottom: 0;
    right: clamp(16px, 5vw, 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.wrighty-slide img {
    width: clamp(170px, 26vw, 320px);
    height: auto;
    max-width: none;
    object-fit: contain;
    display: block;
    transform: rotate(-6deg);
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .28));
}

/* Banner slides use the complete image as the slide surface. Keep these
   overrides after the legacy hero rules so the alternating background,
   absolute image positioning, rotation and shadow cannot leak through. */
.wrighty-slide--banner {
    min-height: 0;
    background: transparent;
}

.wrighty-slide--banner picture,
.wrighty-slide--banner .wrighty-banner-link {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
}

.wrighty-slide--banner img {
    width: 100%;
    max-width: 100%;
    height: auto;
    transform: none;
    filter: none;
    object-fit: initial;
}

/* text block */
.wrighty-slide-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 50vh;
    max-width: 660px;
    padding: 40px clamp(20px, 6vw, 90px);
    box-sizing: border-box;
}

.slide-small {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0;
}

.slide-big {
    margin: 8px 0 12px;
    font-family: var(--font-head);
    font-size: 38px;
    line-height: 1.05;
    font-weight: 700;
    color: var(--navy);
}

.slide-big .slide-accent {
    color: var(--blue);
}

.slide-text {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.5;
    color: #33405e;
    max-width: 460px;
}

.slide-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--gold-2);
    color: var(--navy-deep);
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 10px;
    transition: background .16s;
}

.slide-button:hover,
.slide-button:focus {
    background: var(--gold-hi);
    color: var(--navy-deep);
}

/* pagination dots */
.wrighty-slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 7px;
    z-index: 3;
}

.wrighty-slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(22, 35, 75, .3);
    cursor: pointer;
    transition: width .25s ease, background .25s ease, border-radius .25s ease;
}

.wrighty-slider-dot.is-active {
    width: 22px;
    border-radius: 5px;
    background: var(--blue);
}

/* ============ Reviews (All Reviews block) ============ */

.wp-site-blocks > .wp-block-woocommerce-all-reviews {
    margin-bottom: 36px;
}

.wc-block-all-reviews .wc-block-components-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.wc-block-all-reviews .wc-block-components-review-list-item__item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
    margin: 0;
}

.wc-block-all-reviews .wc-block-components-review-list-item__author {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    color: var(--navy);
}

.wc-block-all-reviews .wc-block-components-review-list-item__product {
    font-size: 11px;
    color: var(--muted);
}

.wc-block-all-reviews .wc-block-components-review-list-item__published-date {
    font-size: 11px;
    color: var(--muted);
}

.wc-block-all-reviews .wc-block-components-review-list-item__rating__stars span:before,
.wc-block-all-reviews .wc-block-components-review-list-item__rating__stars:before {
    color: var(--gold-2);
}

.wc-block-all-reviews .wc-block-components-review-list-item__text {
    font-size: 13.5px;
    color: #33405e;
    line-height: 1.5;
}

.wc-block-all-reviews .wc-block-components-review-list-item__text p {
    margin: 8px 0 0;
}

/* ============ Newsletter + USP (pre-footer) ============ */

.wrighty-prefooter .wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 18px;
}

.wrighty-prefooter .blk {
    padding: 36px 0 0;
}

.wrighty-prefooter .wrighty-usp-sec {
    padding: 26px 0 36px;
}

.kick {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--blue);
}

.kick-gold {
    color: var(--gold-hi);
}

/* the "newsletter" group block with the Brevo form inside */
.wp-block-group.newsletter {
    background: linear-gradient(120deg, var(--navy-deep), var(--navy-800));
    color: #fff;
    border-radius: 16px;
    width: min(1284px, calc(100% - 36px));
    margin: 36px auto !important;
    padding: 30px;
    box-sizing: border-box;
}

.newsletter > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    max-width: none !important;
}

.newsletter p {
    color: #c7cde0;
    margin: 0;
    font-size: 14px;
}

/* kick ("Stay in the loop") */
.newsletter > p:first-child {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold-hi);
}

.newsletter h2.wp-block-heading,
.newsletter h3 {
    font-family: var(--font-head);
    font-size: 22px;
    color: #fff;
    margin: 6px 0 4px !important;
}

.newsletter_email{
    width: 40%;
    display: flex;
    gap: 20px;
    float: right;
    margin-top: 27px;


}
.newsletter_checkbox{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 10px;
  clear: both;
}
.newsletter_text{
    width: 50%;
    margin: 0 0 32px 0 !important;
    float: left;
}
/* ---- Brevo (sib) signup form ---- */

.newsletter form.sib_signup_form {
    margin: 0;
}
.newsletter .sib_msg_disp, .newsletter .sib_loader {
    display: none !important;
}

/* pull the form's first row (email + button) up beside the text block */
@media (min-width: 1101px) {
    .newsletter form.sib_signup_form {
        margin-top: -64px;
    }
}

/* stacked layout: email field grows, no right-align */
@media (max-width: 1100px) {
    .newsletter form.sib_signup_form {
        margin-top: 16px;
    }

    .newsletter p.sib-email-area {
        flex: 1 1 260px;
        margin-left: 0 !important;
    }
}

.newsletter form.sib_signup_form br {
    display: none;
}

/* direct <p> children of the form only hold hidden inputs / junk */
.newsletter form.sib_signup_form > p {
    display: none;
}

.newsletter .sib_signup_box_inside_2 {
    display: block;
}


/* forced line break between the email/button row and the pills */
.newsletter .sib_signup_box_inside_2::before {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 3;
}

/* email field, pushed to the right — font-size:0 hides the raw
   "Email Address*" text node */
.newsletter p.sib-email-area {
    order: 1;
    flex: 0 1 420px;
    margin: 0 0 0 auto !important;
    font-size: 0;
    line-height: 0;
}

.newsletter input.sib-email-area,
.newsletter .sib_signup_form input[type="email"] {
    width: 100%;
    border: none !important;
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 15px;
    line-height: 1.4;
    font-family: var(--font-body);
    color: var(--navy);
    background: #fff;
    box-sizing: border-box;
}

/* subscribe button, right of the email field */
.newsletter .sib_signup_box_inside_2 p:has(> .sib-default-btn) {
    display: block !important;
    order: 2;
    margin: 0 !important;
}

.newsletter .sib_signup_form .sib-default-btn {
    background: var(--gold-2) !important;
    color: var(--navy-deep) !important;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: none !important;
    border-radius: 10px;
    padding: 14px 22px;
    cursor: pointer;
    transition: background .16s;
}

.newsletter .sib_signup_form .sib-default-btn:hover {
    background: var(--gold-hi) !important;
}

/* validation / success message */
.newsletter .sib_msg_disp {
    flex-basis: 100%;
    order: 99;
    font-size: 13px;
    color: var(--gold-hi);
}

/* category pills: white pill, circle checkbox left, text right */
.newsletter .sib_signup_box_inside_2 p[class*="-area"]:not(.sib-email-area) {
    order: 4;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    background: #fff;
    border-radius: 999px;
    padding: 7px 14px 7px 9px;
    font-size: 0;
    line-height: 0;
}

.newsletter .sib_signup_box_inside_2 p[class*="-area"]:not(.sib-email-area) label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1;
    cursor: pointer;
}

/* white circle checkbox */
.newsletter .sib_signup_form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    margin: 0;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #c3cbdd;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}

.newsletter .sib_signup_form input[type="checkbox"]:checked {
    background-color: var(--blue);
    border-color: var(--blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gold-2);
    color: var(--navy-deep);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    cursor: pointer;
    transition: .16s;
}

.btn:hover {
    background: var(--gold-hi);
}

.usp-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.usp {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 13px;
    box-shadow: var(--shadow-sm);
}

.usp svg {
    width: 24px;
    height: 24px;
    color: var(--blue);
    flex-shrink: 0;
}

.usp b {
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--navy);
    display: block;
}

.usp span {
    font-size: 11px;
    color: var(--muted);
}

/* ============ Footer ============ */

.wrighty-footer {
    background: var(--navy-deep);
    color: #cdd4e6;
    margin: 0;
}

.wrighty-footer .fmain {
    max-width: 1320px;
    margin: 0 auto;
    padding: 38px 18px 26px;
    gap: 24px;
}

.wrighty-footer .wrighty-logo {
    margin-bottom: 14px;
}

.wrighty-footer h5.wp-block-heading {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--gold-hi);
    margin: 0 0 12px;
}

.wrighty-footer .blurb {
    font-size: 13px;
    line-height: 1.6;
    color: #aab2cc;
    max-width: 300px;
    margin: 0 0 12px;
}

.wrighty-footer .flinks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wrighty-footer .flinks li {
    padding: 5px 0;
    font-size: 13.5px;
}

.wrighty-footer .flinks a {
    color: #cdd4e6;
    text-decoration: none;
}

.wrighty-footer .flinks a:hover {
    color: #fff;
}

.wrighty-footer .socs {
    gap: 9px !important;
    margin-top: 12px;
}

.wrighty-footer .socs .wp-block-social-link {
    background: var(--navy-800) !important;
    border-radius: 8px;
}

.wrighty-footer .socs .wp-block-social-link a {
    color: var(--gold-hi);
}

.wrighty-footer .socs .wp-block-social-link svg {
    fill: var(--gold-hi);
}

.wrighty-footer .fbar {
    border-top: 1px solid rgba(255, 255, 255, .1);
    max-width: 1320px;
    margin: 0 auto;
    padding: 15px 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #8a92ad;
}

.wrighty-footer .pays span {
    background: #fff;
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 700;
    color: var(--navy);
    font-family: var(--font-head);
    margin-left: 4px;
}

/* ============ Responsive ============ */

@media (max-width: 1024px) {

    .wp-site-blocks > .wp-block-group.is-layout-grid:has(.wp-block-cover) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .newsletter {
        padding: 22px;
    }

    /* Mobile/tablet: stack the text and signup-form columns (their
       50%/40% float widths only work with real desktop room), and put
       the checkbox pills above the email+subscribe row - the .order
       rules further up target the -area <p>s expecting them to be
       direct flex children of .sib_signup_box_inside_2, but the actual
       direct children are these two wrapper divs, so re-ordering has to
       happen on them instead for it to have any effect. */
    .newsletter_text,
    .newsletter_email {
        width: 100%;
        float: none;
    }

    .newsletter .sib_signup_box_inside_2 {
        display: flex;
        flex-direction: column;
    }

    .newsletter_checkbox {
        order: 1;
        margin-top: 16px;
    }

    .newsletter_email {
        order: 2;
        margin-top: 16px;
    }

    .usp-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .wc-block-all-reviews .wc-block-components-review-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .wrighty-checkout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {

    .wrighty-header-main {
        flex-wrap: wrap;
    }

    .wrighty-header-search {
        order: 5;
        flex-basis: 100%;
    }

    .usp-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .wrighty-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .wrighty-slide {
        min-height: 0;
        padding-bottom: 48px;
    }

    .wrighty-slide picture {
        position: relative;
        top: auto;
        right: auto;
        margin: 8px auto 0;
    }

    .wrighty-slide img {
        width: min(280px, 70vw);
    }

    .wrighty-slide--banner {
        padding-bottom: 0;
    }

    .wrighty-slide--banner picture {
        margin: 0;
    }

    .wrighty-slide-content {
        min-height: 0;
        max-width: 100%;
        padding: 36px 24px 8px;
        align-items: center;
        text-align: center;
    }

    .slide-big {
        font-size: 28px;
    }

    .wc-block-product .wc-block-components-product-image img {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 520px) {

    .usp-row {
        grid-template-columns: 1fr;
    }

    .wrighty-news-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   WooCommerce Cart / Checkout / My Account
   Cosmetic restyle only (colours, type, spacing, card/button
   treatment) applied to WooCommerce's own markup — both the
   classic shortcode output and the newer Cart/Checkout blocks
   are covered since we can't pin which is active. Deliberately
   does not touch layout mechanics (grid/flex reflow, show/hide
   toggles) that WooCommerce's own JS depends on, since a broken
   checkout is a real business cost and this hasn't been tested
   against a live payment flow yet.
   ========================================================= */

.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header {
    max-width: 1320px;
    margin: 0 auto;
    padding: 16px 18px 0;
    box-sizing: border-box;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.wp-block-woocommerce-cart .wp-block-heading,
.wp-block-woocommerce-checkout .wp-block-heading {
    font-family: var(--font-head);
    color: var(--navy);
}

.woocommerce,
.woocommerce-page {
    color: var(--ink);
    font-family: var(--font-body);
}

/* Cart & Checkout blocks — class names confirmed against the live
   rendered DOM (both /cart/ and /checkout/ render the WooCommerce
   Cart/Checkout blocks on this site, not the classic shortcodes), so
   these selectors are known-accurate rather than guessed. */

/* !important throughout: WooCommerce's own CSS has
   "table.wc-block-cart-items{background:none!important;border:0}" -
   without matching !important here that rule silently wins regardless
   of load order or specificity, which is why this card was rendering
   with a transparent background (showing the page's own gradient
   through it) instead of solid white. */
.wc-block-cart-items {
    width: 100%;
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-top: none !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm) !important;
    margin: 0 !important;
}

/* The design shows "Your Basket (N)" as the first line INSIDE the
   same white card as the item rows - but that heading is actually the
   page's own title (.wp-block-post-title), which lives entirely
   outside the Cart block in the page template, not something CSS can
   relocate. Fused the same way Checkout's Contact+Shipping cards were
   merged: a separate element (inserted by js/cart-polish.js as the
   first child of .wc-block-components-main, right before this table)
   with matching top-half border-radius and no bottom border, so it
   reads as one continuous box with the table below. */
.wrighty-basket-heading {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 18px 18px 6px;
    margin: 0;
    font-family: var(--font-head);
    color: var(--navy);
    font-size: 20px;
    font-weight: 700;
}

.woocommerce-cart .wp-block-post-title {
    display: none;
}

/* The design's basket list has no table header and no separate
   "total" column - each row is a single card: image on the left, then
   name/category stacked above a quantity-selector + price line, with
   Remove below that. WooCommerce's own table (image/product/quantity/
   total as four <td>s) and its own is-mobile/is-small/is-medium/
   @container fallbacks all lay this out differently (and the mobile
   fallback hides the remove link entirely), so this replaces the
   table layout outright at every width rather than only patching one
   of WooCommerce's existing states. Confirmed against WooCommerce's
   real shipped cart.css that image/product/quantity/total are always
   the row's four direct <td> children, regardless of width. */
.wc-block-cart-items__header {
    display: none !important;
}

.wc-block-cart-items,
.wc-block-cart-items tbody {
    display: block !important;
}

.wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 54px 1fr !important;
    column-gap: 11px;
    padding: 11px 18px !important;
    border-bottom: 1px solid var(--line);
    /* The table's own background !important wasn't enough - each row
       still showed the page's gradient through it, confirmed live via
       DevTools (a manual background-color:white on the row itself
       fixed it there). */
    background: var(--paper) !important;
}

.wc-block-cart-items__row:last-child {
    border-bottom: none;
}

.wc-block-cart-items__row td {
    display: block;
    padding: 0 !important;
    border: none !important;
    vertical-align: top;
}

/* grid-column/grid-row need !important on all four cells below:
   WooCommerce's own .is-mobile/.is-small/.is-medium container-width
   rules (e.g. ".is-medium table.wc-block-cart-items .wc-block-cart-
   items__row .wc-block-cart-item__quantity") place these same cells
   at completely different positions, and those selectors are far more
   specific than a single class - confirmed live at a 390px viewport,
   where quantity and total both landed in the wrong row/column and
   the price sat on top of a wrapped product name instead of beside
   the quantity control. */
.wc-block-cart-item__image {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
}

.wc-block-cart-item__image img {
    border-radius: 6px;
    width: 54px;
    height: 70px;
    object-fit: cover;
}

.wc-block-cart-item__product {
    grid-column: 2 !important;
    grid-row: 1 !important;
    /* Grid items default to min-width:auto, which refuses to shrink
       below their content's intrinsic width - without this, a long
       product name pushes this cell wider than the 1fr track actually
       has room for instead of wrapping inside it. */
    min-width: 0;
}

/* Design's cart-row name is smaller/lighter than the shared
   .wc-block-components-product-name rule used elsewhere (mini-cart,
   checkout order summary) - scoped here rather than changed globally
   so it doesn't regress those already-approved contexts. */
.wc-block-cart-items .wc-block-components-product-name {
    /* WooCommerce's own CSS sets max-width:max-content here, sizing
       the name to its full unwrapped width - fine at desktop widths
       where there's room, but at narrow widths it overflowed the grid
       column and sat on top of the price/sale-badge instead of
       wrapping (confirmed visually at a 390px viewport). */
    max-width: 100% !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 0 4px;
}

.wc-block-cart-item__quantity {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
    justify-self: start !important;
    padding-top: 6px !important;
}

/* Design's qty control is two individually-bordered square buttons
   with a plain (unboxed) count between them, not the mini-cart's
   unified pill - scoped to the cart page so the mini-cart's own,
   already-approved pill style is untouched. */
.wc-block-cart-items .wc-block-components-quantity-selector {
    border: none;
    border-radius: 0;
    overflow: visible;
    height: auto;
    gap: 8px;
}

.wc-block-cart-items .wc-block-components-quantity-selector__button {
    width: 26px;
    height: 26px;
    min-width: 0;
    border: 1px solid var(--line) !important;
    border-radius: 6px;
    background: #fff !important;
    color: var(--navy) !important;
    font-size: 15px;
}

.wc-block-cart-items .wc-block-components-quantity-selector__input {
    width: 20px;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
}

.wc-block-cart-item__total {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: start !important;
    padding-top: 6px !important;
}

.wc-block-cart-items .wc-block-components-product-badge.wc-block-components-sale-badge {
    background: var(--green);
}

.wc-block-cart-items .wc-block-components-product-metadata {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--muted);
    margin: 0;
}

/* The Cart block's own "show item description" setting was already on
   and printing each product's full marketing short_description here -
   inconsistent length/tone across products and not what the design
   shows. Hidden in favour of just the category caption below
   (functions.php's woocommerce_get_item_data filter). */
.wc-block-cart-items .wc-block-components-product-metadata__description {
    display: none;
}

.wc-block-cart-items .wc-block-components-product-metadata__variation-data {
    margin: 0;
}

.wc-block-components-product-name {
    font-family: var(--font-head);
    color: var(--navy) !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 14px;
}

.wc-block-components-quantity-selector {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    display: inline-flex;
    height: 34px;
}

.wc-block-components-quantity-selector__input {
    border: none !important;
    width: 44px;
    padding: 0 !important;
    text-align: center;
    font-family: var(--font-body);
    color: var(--navy);
}

.wc-block-components-quantity-selector__button {
    width: 32px;
    border: none;
    background: #fff !important;
    color: var(--navy) !important;
    font-size: 15px;
    cursor: pointer;
}

.wc-block-components-product-price__value,
.wc-block-components-totals-item__value {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--navy) !important;
}

/* Same icon-only rendering issue the mini-cart's remove link had
   (it's the same React component in both places) - forced to plain
   text via ::after the same way. */
.wc-block-cart-items .wc-block-cart-item__remove-link {
    display: inline-flex !important;
    align-items: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 0;
    text-decoration: none !important;
    cursor: pointer;
}

.wc-block-cart-items .wc-block-cart-item__remove-link svg,
.wc-block-cart-items .wc-block-cart-item__remove-link .wc-block-components-sr-only,
.wc-block-cart-items .wc-block-cart-item__remove-link .screen-reader-text {
    display: none !important;
}

.wc-block-cart-items .wc-block-cart-item__remove-link::after {
    content: "Remove";
    font-family: var(--font-head);
    font-size: 11px;
    color: var(--red);
}

.wc-block-cart-items .wc-block-cart-item__remove-link:hover::after {
    color: #a8362a;
}

.wc-block-cart__totals-title {
    display: block !important;
    text-transform: none !important;
    font-family: var(--font-head);
    color: var(--navy);
    font-size: 17px;
    margin: 0 0 12px;
}

/* The design's Summary card orders Subtotal, Delivery, the
   free-delivery bar, then the discount code field, then Total - but
   WooCommerce's own real DOM order is coupon-form-block (where the
   shipbar gets inserted, right before the coupon panel), THEN
   totals-block (subtotal+shipping), THEN the bare grand-total wrapper.
   Confirmed via the actual hydrated DOM (not guessed) - reordered with
   flex `order` on these three stable block-wrapper siblings rather
   than fighting their DOM position. */
.wp-block-woocommerce-cart-order-summary-block {
    display: flex;
    flex-direction: column;
    /* WooCommerce's own rule draws a divider under the whole summary
       block (between Total and the payment buttons below it) - the
       design has no such line there. */
    border-bottom: none !important;
}

/* Express payment buttons (Amazon/Apple/Google Pay, "Pay with Link")
   don't exist in the design at all - it goes straight from Total to
   the gold "Proceed to Checkout" button. */
.wc-block-cart__payment-options {
    display: none !important;
}

.wp-block-woocommerce-cart-order-summary-totals-block {
    order: 1;
    /* WooCommerce's own divider between "Summary" and the Subtotal row -
       the design doesn't use a line there either. */
    border-top: none !important;
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block {
    order: 2;
}

.wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper {
    order: 3;
}

/* Free-delivery progress bar + "Continue shopping" link, inserted into
   the Cart page's totals sidebar by js/cart-polish.js - neither exists
   natively on the Cart block, same as the Mini Cart's own shipbar. */
.wc-block-cart__sidebar .wrighty-shipbar {
    margin: 6px 18px 14px;
}

/* The design's summary just shows "Delivery: FREE/£X" with no carrier
   name - the real shipping method's own sub-label ("1st Class
   Service") is extra detail the design doesn't include. */
.wc-block-cart__sidebar .wc-block-components-totals-shipping__via {
    display: none;
}

/* Inserted as a sibling of .wc-block-cart__submit-button inside the
   same wrapper (see js/cart-polish.js) so it inherits an identical
   horizontal inset from that shared parent - no side margin needed
   here, whatever that ancestor's own padding turns out to be. */
.wrighty-continue-shopping {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    background: #fff !important;
    color: var(--navy) !important;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    margin: 8px 0 0;
    cursor: pointer;
    text-decoration: none !important;
    transition: .16s;
}

.wrighty-continue-shopping:hover {
    border-color: var(--navy) !important;
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: none;
    padding: 4px 18px;
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-of-type {
    border-top: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
}

/* Checkout's order summary already has its own outer card border
   (.wp-block-woocommerce-checkout-order-summary-block) - bordering
   each inner totals-wrapper section too (Cart page's own pattern,
   above) stacked redundant divider lines between every row group.
   Just spacing, no borders, except the one before the Total row
   (matching the design's single divider there). */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
    background: transparent;
    border: none;
    padding: 4px 18px;
}

.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
    border-top: 1px solid var(--line);
    padding-top: 8px;
    margin-top: 4px;
}

.wc-block-components-totals-item {
    padding: 10px 0;
    font-size: 14px;
}

.wc-block-components-totals-item__label {
    color: var(--navy);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 18px;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--gold-2) !important;
    color: var(--navy-deep) !important;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    cursor: pointer;
    transition: .16s;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: var(--gold-hi) !important;
}

/* checkout form fields. The design uses a plain label pinned above a
   flat-padding input - not WooCommerce's default floating label
   (absolutely positioned inside the input, animated on focus/value via
   its .is-active class). Pinning the label to normal flow and dropping
   the input back to flat padding removes the need for any padding
   swap, since there's nothing left for it to make room for. */
/* WooCommerce's real DOM order is input first, label second (the label
   floats on top via position:absolute, so source order doesn't matter
   for the default look) - pinning the label to position:static without
   also fixing visual order left it rendering BELOW the input instead
   of above it. Making the wrapper a flex column and pulling the label
   to order:-1 fixes the visual order without needing to know or change
   the actual DOM order. */
.wc-block-components-text-input {
    display: flex !important;
    flex-direction: column !important;
    margin-top: 0 !important;
}

.wc-block-components-combobox {
    margin-top: 0 !important;
}

.wc-block-components-text-input label {
    position: static !important;
    display: block;
    order: -1;
    transform: none !important;
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 4px;
}

.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-address-form select {
    border: 1px solid var(--line) !important;
    border-radius: 9px !important;
    padding: 11px 12px !important;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--navy);
    background: #fff;
    box-shadow: none !important;
}

/* WooCommerce's default shipping-address field order puts Country
   first (it can affect which other fields/formats apply), but the
   design puts it last, after name/address/city. The address form is
   already a flex-wrap container, so this reorders visually via each
   field's own BEM modifier class without touching field logic/order in
   the DOM. State/phone aren't in the design's simplified field list at
   all, but are left visible (not hidden) since some countries require
   them - positioned late, just ahead of Country. */
.wc-block-components-address-form__first_name { order: 1; }
.wc-block-components-address-form__last_name { order: 2; }
.wc-block-components-address-form__address_1 { order: 3; }
.wc-block-components-address-form__address_2 { order: 4; }
.wc-block-components-address-form__city { order: 5; }
.wc-block-components-address-form__postcode { order: 6; }
.wc-block-components-address-form__state { order: 7; }
.wc-block-components-address-form__phone { order: 8; }
.wc-block-components-country-input {
    order: 9;
    display: flex;
    flex-direction: column;
    margin-top: 16px !important;
}

.wc-block-components-country-input label {
    position: static !important;
    display: block;
    order: -1;
    transform: none !important;
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 4px;
}

.wc-block-components-address-form select {
    height: 44px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235d6377' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 32px !important;
}

.wc-block-checkout__main .wc-block-components-checkout-step {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px;
}

/* Fuses "Contact information" + "Shipping address" into one visual
   card, matching the design's single "Contact & Delivery" card - top
   and bottom halves of one continuous border instead of two boxes.
   Targets WooCommerce's own stable per-step wrapper block names rather
   than positional (:nth-child) guessing. */
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step {
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: 0;
    padding-bottom: 8px;
}

.wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-checkout-step {
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding-top: 8px;
}

/* The merged card reads as one "Contact & Delivery" heading - the
   second half's own step title is redundant once fused, and hidden
   here; js/checkout-polish.js retexts the first half's title since
   that's plain text content a CSS rule can't change. */
.wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-checkout-step__heading-container {
    display: none;
}

.wc-block-checkout__main .wc-block-components-checkout-step__title {
    font-family: var(--font-head);
    color: var(--navy);
    font-size: 16px;
}

.wc-block-checkout__sidebar {
    background: transparent;
}

.wp-block-woocommerce-checkout-order-summary-block {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.wc-block-components-checkout-order-summary__title-text {
    font-family: var(--font-head);
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--navy);
}

/* Design shows only image/name/qty/price per line item - same fix
   already applied to the Mini Cart, extended to Checkout's order
   summary, which reuses the identical shared components. */
.wc-block-components-order-summary .wc-block-components-product-metadata {
    display: none;
}

.wc-block-components-order-summary .wc-block-components-product-name[hidden] {
    display: none !important;
}

/* Design shows the discount code field always visible; WooCommerce
   hides it behind this toggle by default. The previous selector here
   (.wc-block-components-totals-coupon-link) was wrong - that class is
   only a loading-state skeleton placeholder (scoped to
   .wp-block-woocommerce-checkout.is-loading in WooCommerce's own CSS),
   not the real "Add coupons" button, which is a generic collapsible
   Panel component scoped inside .wc-block-components-totals-coupon.
   js/checkout-polish.js clicks it so the (possibly not-yet-rendered)
   form actually mounts - CSS alone can't reveal something that was
   never rendered. */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
    display: none !important;
}

.wc-block-components-totals-coupon .wc-block-components-panel__content {
    display: block !important;
}

/* The coupon input is a .wc-block-components-text-input like any
   other field, so it now carries its own label above it (see the
   flex-column fix above) - taller than a plain single-line input. The
   Apply button sits beside it in the same flex row; without
   align-self it stretches (flex default) to match that full label+
   input height instead of just sitting level with the input itself. */
.wc-block-components-totals-coupon__form {
    align-items: flex-end;
}

.wc-block-components-totals-coupon__button {
    align-self: flex-end;
    min-height: 0 !important;
    padding: 11px 16px !important;
    background: var(--gold-2) !important;
    color: var(--navy-deep) !important;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    border: none !important;
    border-radius: 9px !important;
}

.wc-block-components-totals-coupon__button:hover {
    background: var(--gold-hi) !important;
}

/* shipping-method / payment-method radio options (shared component) */
.wc-block-components-radio-control__option {
    border: 1px solid var(--line);
    border-radius: 9px;
    margin-bottom: 8px;
    padding: 11px 12px;
}

.wc-block-components-radio-control__option-checked {
    border-color: var(--navy);
    background: #f3f7ff;
}

/* The Payment options fieldset only ever has one selectable "method"
   option (the gateway itself, e.g. Stripe) - it's always checked, so
   the selection highlight reads as pointless decoration there rather
   than showing a real choice. Scoped so Delivery Method's own radio
   cards (where there IS a real choice) keep the highlight. */
.wc-block-checkout__payment-method .wc-block-components-radio-control__option-checked {
    background: transparent;
}

.wc-block-components-radio-control__input {
    accent-color: var(--navy);
}

.wc-block-components-radio-control__label {
    font-weight: 700;
    color: var(--navy);
    font-size: 14px;
}

/* The radio circle itself is absolutely positioned (left:16px, 20px
   wide) rather than sitting inline before the text, so without room
   made for it the label/description text renders underneath it -
   confirmed in testing ("1st Class Service" showing as "1[radio
   overlapping]Class Service"). Padding the label/description content
   area clears it instead of relying on the option's own padding alone. */
.wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__description-group {
    padding-left: 36px;
    box-sizing: border-box;
}

/* Delivery Method's empty state before a valid address is entered -
   WooCommerce genuinely can't calculate real shipping rates without
   one, so this can't show the design's 3 hardcoded options; styled to
   at least sit cleanly within the card. */
.wc-block-components-shipping-rates-control__no-results-notice {
    background: #f6f8fc;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 14px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

/* =========================================================
   Order confirmation ("thank you" step, WooCommerce Blocks
   order-confirmation-* blocks that render on the Checkout page
   once an order completes). Class names are WooCommerce's own
   documented block slugs (wc-block-order-confirmation-*), not
   guessed classic-template markup — but unlike the Cart/Checkout/
   Mini Cart sections above, this couldn't be confirmed against a
   real completed order on the live site, so treat as best-effort
   until verified against an actual order-received page.
   ========================================================= */

.woocommerce-order-received .entry-content,
.wc-block-order-confirmation-status {
    max-width: 620px;
    margin: 40px auto;
    padding: 32px 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.wc-block-order-confirmation-status h2 {
    font-family: var(--font-head);
    color: var(--navy);
    font-size: 24px;
    margin: 8px 0;
}

.wc-block-order-confirmation-summary {
    max-width: 620px;
    margin: 0 auto 20px;
    padding: 20px 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.wc-block-order-confirmation-summary-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wc-block-order-confirmation-summary-list-item-key {
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--muted);
}

.wc-block-order-confirmation-summary-list-item-value {
    color: var(--navy);
    font-weight: 600;
}

.wc-block-order-confirmation-totals-wrapper,
.wc-block-order-confirmation-shipping-wrapper,
.wc-block-order-confirmation-billing-wrapper,
.wc-block-order-confirmation-downloads-wrapper {
    max-width: 620px;
    margin: 0 auto 20px;
    padding: 20px 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.wc-block-order-confirmation-totals-wrapper table th,
.wc-block-order-confirmation-totals-wrapper table td {
    padding: 8px 0;
    font-size: 14px;
}

.wc-block-order-confirmation-address-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 620px;
    margin: 0 auto 20px;
}

.wc-block-order-confirmation-address-wrapper .wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-address-wrapper .wc-block-order-confirmation-billing-address {
    flex: 1 1 220px;
    padding: 20px 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* =========================================================
   Mini Cart drawer (WooCommerce Mini Cart block, header icon)
   Class names captured directly from the live rendered drawer
   (opened + inspected via Playwright, not guessed), same caveat
   as above: cosmetic only, no layout/position/transform changes
   since WooCommerce's Interactivity API controls the open/close
   animation via those properties.
   ========================================================= */

.wc-block-components-drawer__screen-overlay {
    background: rgba(14, 26, 60, .45) !important;
}

.wc-block-mini-cart__drawer.wc-block-components-drawer {
    background: var(--paper);
    box-shadow: -10px 0 40px rgba(0, 0, 0, .2);
    border-left: none;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close.wp-element-button {
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover {
    color: var(--gold-hi) !important;
}

/* WooCommerce fades the title's bottom ~24px to transparent via
   mask-image (a scroll-affordance effect) and offsets it with a
   negative margin - both killed here since the design's header is a
   flat navy bar with no fade/shadow at its edge. */
.wc-block-mini-cart__title {
    font-family: var(--font-head) !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: baseline;
    gap: 8px;
    padding: 16px 46px 16px 18px !important;
    margin: 0 !important;
    mask-image: none !important;
    background: var(--navy) !important;
    color: #fff !important;
}

/* An empty notices container sits as the drawer's actual first child,
   before the title. WooCommerce's own :first-child rule is meant to
   zero out its margin-top, but a more heavily-qualified ancestor rule
   (more classes, same file) beats it on specificity, leaving a 16px
   gap above the title even though the div itself has no content. */
.wc-block-mini-cart__drawer .wc-block-components-notices {
    margin-top: 0 !important;
}

.wc-block-mini-cart__title * {
    color: inherit !important;
}

.wc-block-mini-cart-items .wc-block-cart-item__prices {
    display: none !important;
}

.wc-block-mini-cart__title [class*="items-counter"] {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: #cdd4e6;
}

/* WooCommerce injects its own inline padding on this element (block
   spacing support) that lands after this stylesheet, so it wins ties
   on equal specificity without !important here. */
.wc-block-mini-cart__items {
    padding: 0 16px !important;
}

/* "Spend £X more for FREE delivery" banner, inserted above the item
   list by js/mini-cart-shipbar.js since WooCommerce has no built-in
   equivalent. */
/* Sits as a sibling before .wc-block-mini-cart__items (see
   js/mini-cart-shipbar.js), not inside it, so it no longer inherits
   that container's own horizontal padding - given its own margin here
   instead. */
.wrighty-shipbar {
    background: #eef3fb;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--navy);
    margin: 10px 16px;
}

.wrighty-shipbar-track {
    height: 6px;
    background: #d6e0f0;
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}

.wrighty-shipbar-fill {
    height: 100%;
    background: var(--green);
    border-radius: 3px;
    transition: width .2s ease;
}

.wc-block-mini-cart__products-table table.wc-block-cart-items {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.wc-block-mini-cart-items thead {
    display: none;
}

.wc-block-mini-cart-items tbody,
.wc-block-mini-cart-items tr,
.wc-block-mini-cart-items td {
    display: block;
    width: auto;
}

.wc-block-mini-cart-items .wc-block-cart-items__row {
    display: flex;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}

.wc-block-mini-cart-items .wc-block-cart-item__image,
.wc-block-mini-cart-items .wc-block-cart-item__product,
.wc-block-mini-cart-items .wc-block-cart-item__total {
    padding: 0;
    border: none;
}

.wc-block-mini-cart-items .wc-block-cart-item__image {
    flex-shrink: 0;
}

.wc-block-mini-cart-items .wc-block-cart-item__image img {
    width: 54px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
}

.wc-block-mini-cart-items .wc-block-cart-item__product {
    flex: 1;
    min-width: 0;
}

.wc-block-mini-cart-items .wc-block-components-product-name {
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin: 0 0 4px;
}

/* WooCommerce renders a second, non-clickable <span> with this same
   class (a fallback for products hidden from the catalog) alongside
   the real <a>, toggled via the native [hidden] attribute rather than
   React. Setting display:block above (needed for the real link) beats
   the browser's built-in [hidden]{display:none} on specificity alone,
   which was making that fallback visible for every product, not just
   catalog-hidden ones. This restores it. */
.wc-block-mini-cart-items .wc-block-components-product-name[hidden] {
    display: none !important;
}

/* Design shows only image/name/price/qty/remove per row - this repeats
   the product name as a SKU/variation line, which the design omits. */
.wc-block-mini-cart-items .wc-block-components-product-metadata {
    display: none;
}

.wc-block-mini-cart-items .wc-block-components-sale-badge,
.wc-block-mini-cart-items .wc-block-cart-item__sale-badge,
.wc-block-mini-cart-items .wc-block-components-product-badge {
    display: none;
}

.wc-block-mini-cart-items .wc-block-cart-item__quantity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

/* WooCommerce wraps -/number/+ in one bordered pill; the design shows
   three separate elements instead (bordered square buttons either side
   of a plain unboxed number), so the pill's own box is stripped and its
   flex gap creates the spacing between the three. */
.wc-block-mini-cart-items .wc-block-components-quantity-selector {
    height: auto;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    align-items: center;
    gap: 8px;
}

.wc-block-mini-cart-items .wc-block-components-quantity-selector__input {
    width: 30px;
    font-size: 12px;
    background: transparent;
}

.wc-block-mini-cart-items .wc-block-components-quantity-selector__button {
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 15px;
}

/* WooCommerce's own CSS hides the remove control whenever a JS-driven
   container-width class (.is-small/.is-mobile/.is-medium, added by a
   ResizeObserver-based component, not a media query) is present on an
   ancestor - and the ~400px-wide mini-cart drawer virtually always
   triggers one of these. Forcing it back on since the design always
   shows it regardless of width. */
.is-mobile .wc-block-mini-cart-items .wc-block-cart-item__remove-link,
.is-small .wc-block-mini-cart-items .wc-block-cart-item__remove-link,
.is-medium .wc-block-mini-cart-items .wc-block-cart-item__remove-link {
    display: inline-flex !important;
}

/* The design shows a plain red "Remove" text link, not WooCommerce's
   default icon-in-a-button control. Rather than rely on guessing
   whatever WooCommerce actually renders inside it (icon, hidden text,
   or both - confirmed inconsistent across testing), this strips all of
   it and injects the design's own label via ::after, so the visible
   result is identical regardless of the real internal markup. */
.wc-block-mini-cart-items .wc-block-cart-item__remove-link {
    display: inline-flex !important;
    align-items: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 0;
    cursor: pointer;
}

.wc-block-mini-cart-items .wc-block-cart-item__remove-link svg,
.wc-block-mini-cart-items .wc-block-cart-item__remove-link .wc-block-components-sr-only,
.wc-block-mini-cart-items .wc-block-cart-item__remove-link .screen-reader-text {
    display: none !important;
}

.wc-block-mini-cart-items .wc-block-cart-item__remove-link::after {
    content: "Remove";
    font-family: var(--font-head);
    font-size: 11px;
    color: var(--red);
}

.wc-block-mini-cart-items .wc-block-cart-item__total {
    text-align: right;
    align-self: flex-end;
}

.wc-block-mini-cart-items .wc-block-components-product-price__value {
    font-size: 13px;
}

.wc-block-mini-cart__footer {
    border-top: 1px solid var(--line);
    padding: 14px 16px;
    background: var(--paper);
}

.wc-block-mini-cart__footer-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 0;
}

.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
}

.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
    font-size: 18px;
}

/* "Shipping and discounts calculated at checkout" - design's footer is
   just the subtotal row plus one button, no extra caption. */
/* WooCommerce's own rule re-shows this at >=480px width with matching
   specificity to a plain override, so !important is required here. */
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
    display: none !important;
}

.wc-block-mini-cart__footer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.wc-block-mini-cart__footer-checkout {
    display: block;
    width: 100%;
    background: var(--gold-2) !important;
    color: var(--navy-deep) !important;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 10px !important;
    border: none !important;
    padding: 13px 20px !important;
    text-align: center;
    box-sizing: border-box;
}

.wc-block-mini-cart__footer-checkout:hover {
    background: var(--gold-hi) !important;
}

/* Design's footer has one combined button, not a separate "view cart"
   secondary action - js/mini-cart-shipbar.js relabels the checkout
   button above to match, so this one is just hidden rather than styled. */
.wc-block-mini-cart__footer-cart {
    display: none;
}

.wc-block-mini-cart__empty-cart-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    text-align: center;
    padding: 40px 20px 0;
}

/* Pins the "Start shopping" button to the bottom of the drawer with a
   divider above it, matching the design's footer-style placement.
   Purely additive: if WooCommerce doesn't nest the button inside this
   wrapper, this rule simply never matches. */
.wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__shopping-button {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    width: 100%;
}

.wc-block-mini-cart__empty-cart-wrapper p {
    font-family: var(--font-head);
    color: var(--navy);
    font-size: 15px;
    margin-bottom: 16px;
}

.wc-block-mini-cart__shopping-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-2) !important;
    color: var(--navy-deep) !important;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 10px;
    padding: 12px 22px;
}

.wc-block-mini-cart__shopping-button:hover {
    background: var(--gold-hi) !important;
}

/* My Account */
.woocommerce-MyAccount-navigation {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 8px;
    /* WooCommerce sets this element's width as a % (~30%) via float layout;
       without border-box, this rule's own padding+border add on top of that
       %, pushing the combined nav+content width past the container's 100%
       and knocking content down onto the next line instead of beside nav. */
    box-sizing: border-box;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation-link {
    border-radius: 8px;
    overflow: hidden;
}

.woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 11px 14px;
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--navy);
    text-decoration: none;
    border-radius: 8px;
}

.woocommerce-MyAccount-navigation-link:hover a {
    background: rgba(46, 108, 198, .08);
    color: var(--blue);
}

.woocommerce-MyAccount-navigation-link.is-active a {
    background: var(--navy);
    color: #fff;
}

.woocommerce-MyAccount-content {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px;
    box-sizing: border-box;
}

.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content input[type="submit"],
.woocommerce-form-login button,
.woocommerce-form-register button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-2);
    color: var(--navy-deep);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border: none;
    border-radius: 10px;
    padding: 11px 18px;
    cursor: pointer;
    transition: .16s;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-form-login button:hover,
.woocommerce-form-register button:hover {
    background: var(--gold-hi);
}

.woocommerce-MyAccount-content table.shop_table th {
    background: var(--navy);
    color: #fff;
}

.wrighty-coupons-table {
    width: 100%;
    border-collapse: collapse;
}

.wrighty-coupons-table th,
.wrighty-coupons-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

@media (max-width: 782px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        margin-bottom: 18px;
    }
}

/* =========================================================
   Plain content pages (default page template) — e.g. /b2b/,
   which uses a real WooCommerce registration plugin form
   (.wcrf-b2b-form creates an actual pending trade account, not
   a demo) that currently has zero custom styling since it sits
   outside any .woocommerce-wrapped template. Generic enough to
   also apply basic typography to any other plain content page.
   ========================================================= */

.entry-content.wp-block-post-content {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 18px 60px;
    box-sizing: border-box;
}

/* This container has a hard max-width with no grid/negative-margin
   mechanism for WordPress's own "full width" block alignment, so an
   .alignfull block (e.g. the B2B page's hero banner) was just being
   treated as regular content and clipped to the same 1320px column as
   everything else. Break it back out to the true viewport edge. */
.entry-content.wp-block-post-content > .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 90px;
    padding-right: 90px;
    box-sizing: border-box;
}

.entry-content h1.wp-block-heading {
    font-family: var(--font-head);
    color: var(--navy);
    font-size: 28px;
    margin: 0 0 10px;
}

.entry-content p.wp-block-paragraph {
    font-size: 15px;
    line-height: 1.6;
}

.page-id-84 .entry-content p.wp-block-paragraph {
    padding: 6px 0;
    font-size: 14px;
    color: var(--navy);
    font-weight: 500;
}

.entry-content .wcrf-b2b-form {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    max-width: 460px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.wcrf-b2b-form .form-row {
    margin: 0 0 14px;
}

.wcrf-b2b-form label {
    display: block;
    font-size: 12px;
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--muted);
    margin-bottom: 4px;
}

.wcrf-b2b-form label .required {
    color: var(--red);
}

.wcrf-b2b-form input.input-text {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 11px 12px;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--navy);
    background: #fff;
    box-sizing: border-box;
}

.wcrf-b2b-form button[type="submit"] {
    width: 100%;
    font-size: 14px;
    padding: 13px 20px;
}

/* =========================================================
   Category hub pages (/japanese/, /english/, /chinese/, /korean/,
   etc.) — hand-built in the block editor as plain Page content
   (hero banner is a static image, so nothing to style there), not
   via the wrighty_category_hub shortcode/component, which is why
   none of the .wrighty-* section classes exist here and this has
   to hook the raw block markup instead:
     - "kicker" line above a heading = a lone <p> immediately
       before the <h2>, targeted with :has(+ h2) since there's no
       class to hang onto.
     - "Explore Other Ranges" uses a plain <p> AS its heading
       (no <h2> at all), targeted the same way via :has(+ .grid).
     - each card/tile is <a class="wp-block-tiptip-hyperlink-
       group-block"> (that plugin supplies --color-bkg/-hover and
       the hover-swap behaviour, not the shape) - split into two
       variants by whether it wraps a <figure> image: the photo
       "shop by category" cards vs. the flat colour "region" tiles
       (image-less by design - no bug to fix there, just no photo
       ever set on these ones).
   ========================================================= */

.entry-content > p.wp-block-paragraph:has(+ h2.wp-block-heading) {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--blue);
    margin: 0 0 4px;
}

.entry-content > h2.wp-block-heading,
.entry-content > p.wp-block-paragraph:has(+ .wp-block-group.is-layout-grid) {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    margin-top: 36px;
    margin-bottom: 18px;
}

.entry-content > h2.wp-block-heading::after,
.entry-content > p.wp-block-paragraph:has(+ .wp-block-group.is-layout-grid)::after {
    content: "";
    flex: 1;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-2), transparent);
    border-radius: 2px;
    margin-bottom: -6px;
}

.entry-content .wp-block-group.is-layout-grid:has(> .wp-block-tiptip-hyperlink-group-block) {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 1024px) {
    .entry-content .wp-block-group.is-layout-grid:has(> .wp-block-tiptip-hyperlink-group-block) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 520px) {
    .entry-content .wp-block-group.is-layout-grid:has(> .wp-block-tiptip-hyperlink-group-block) {
        grid-template-columns: 1fr !important;
    }
}

/* photo cards: image on top, white body below. The card and its body
   are flex columns (not plain block) so that when the grid stretches
   every card in a row to match the tallest one (whichever has the
   longest description), the slack is absorbed above "Shop →" via its
   margin-top:auto instead of showing up as dead space below it. */
.entry-content .wp-block-tiptip-hyperlink-group-block:has(> figure.wp-block-image) {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--gold-2);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .18s, box-shadow .18s;
    text-decoration: none;
}

.entry-content .wp-block-tiptip-hyperlink-group-block:has(> figure.wp-block-image):hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.entry-content .wp-block-tiptip-hyperlink-group-block > figure.wp-block-image {
    height: 180px;
    flex-shrink: 0;
    margin: 0;
    background: linear-gradient(160deg, #eef1f8, #dfe5f3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.entry-content .wp-block-tiptip-hyperlink-group-block > figure.wp-block-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
}

.entry-content .wp-block-tiptip-hyperlink-group-block:has(> figure.wp-block-image) > .wp-block-group {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.entry-content .wp-block-tiptip-hyperlink-group-block:has(> figure.wp-block-image) h2.wp-block-heading {
    display: block;
    font-size: 16px;
    color: var(--navy);
    margin: 0 0 5px;
}

.entry-content .wp-block-tiptip-hyperlink-group-block:has(> figure.wp-block-image) p.wp-block-paragraph {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.45;
    margin: 0 0 10px;
}

.entry-content .wp-block-tiptip-hyperlink-group-block:has(> figure.wp-block-image) p.wp-block-paragraph:last-child {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0;
    margin-top: auto;
    padding-top: 10px;
}

/* flat colour region tiles: no image, background comes from the
   link-group plugin's own --color-bkg custom property. The label
   paragraph centres in the space above, the pill button is pinned
   to the bottom edge - same anchor-to-bottom placement as the
   homepage's .wrighty-tile .lab pill. */
.entry-content .wp-block-tiptip-hyperlink-group-block:not(:has(> figure.wp-block-image)) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1.25;
    padding: 20px 14px 54px;
    box-sizing: border-box;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid var(--gold-2);
    box-shadow: var(--shadow-sm);
    background: var(--color-bkg, var(--navy));
    text-decoration: none;
    transition: transform .18s, box-shadow .18s;
}

.entry-content .wp-block-tiptip-hyperlink-group-block:not(:has(> figure.wp-block-image)):hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.entry-content .wp-block-tiptip-hyperlink-group-block:not(:has(> figure.wp-block-image)) > p.wp-block-paragraph {
    margin: 0;
    text-align: center;
}

.entry-content .wp-block-tiptip-hyperlink-group-block:not(:has(> figure.wp-block-image)) .wp-block-buttons {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 12px;
    margin: 0;
    width: auto;
}

.entry-content .wp-block-tiptip-hyperlink-group-block:not(:has(> figure.wp-block-image)) .wp-block-button {
    width: 100%;
    margin: 0 !important;
}

.entry-content .wp-block-tiptip-hyperlink-group-block:not(:has(> figure.wp-block-image)) .wp-block-button__link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 9px 8px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, .4);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 10px rgba(0, 0, 0, .35);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* USP-style grids (icon + heading + text, no link-group cards) -
   the .wp-site-blocks-scoped equivalent for these is the "other
   top-level grids" rule above the tile-grid section; same idea,
   mirrored here since this content sits inside .entry-content
   instead of directly under .wp-site-blocks. */
.entry-content .wp-block-group.is-layout-grid:not(:has(> .wp-block-tiptip-hyperlink-group-block)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch;
}

.entry-content .wp-block-group.is-layout-grid:not(:has(> .wp-block-tiptip-hyperlink-group-block)) > * {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 13px;
    box-shadow: var(--shadow-sm);
    margin: 0 !important;
    box-sizing: border-box;
}

.entry-content .wp-block-group.is-layout-grid:not(:has(> .wp-block-tiptip-hyperlink-group-block)) svg,
.entry-content .wp-block-group.is-layout-grid:not(:has(> .wp-block-tiptip-hyperlink-group-block)) img {
    width: 26px;
    height: 26px;
    color: var(--blue);
}

.entry-content .wp-block-group.is-layout-grid:not(:has(> .wp-block-tiptip-hyperlink-group-block)) h1,
.entry-content .wp-block-group.is-layout-grid:not(:has(> .wp-block-tiptip-hyperlink-group-block)) h2,
.entry-content .wp-block-group.is-layout-grid:not(:has(> .wp-block-tiptip-hyperlink-group-block)) h3,
.entry-content .wp-block-group.is-layout-grid:not(:has(> .wp-block-tiptip-hyperlink-group-block)) h4 {
    font-family: var(--font-head);
    font-size: 13px !important;
    color: var(--navy);
    margin: 4px 0 2px !important;
}

.entry-content .wp-block-group.is-layout-grid:not(:has(> .wp-block-tiptip-hyperlink-group-block)) p {
    font-size: 11px;
    color: var(--muted);
    margin: 0 !important;
}

/* =========================================================
   Trade Account blocks (wrighty/trade-login, trade-apply-teaser,
   refer-earn, trade-application-form) — Gutenberg blocks editable
   in Appearance > Editor > Pages, replacing the old static /b2b/
   markup above.
   ========================================================= */

.wrighty-trade-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    box-sizing: border-box;
    width: 100%;
}

.wrighty-refer-card {
    border-color: var(--gold-2);
}

/* Trade Login + Apply for a Trade Account render as a plain flex row
   with no explicit widths, so each card's "auto" flex-basis falls back
   to unreliable content-driven sizing - Trade Login (a short form) ends
   up narrower than Apply (form + benefits list), looking off-center in
   its share of the row instead of filling it. Refer & Earn - a separate
   sibling one level up, not part of that flex row - needs to sit
   directly under Login at the same width, independent of however much
   taller Apply is. Grid/flex both size a "row" to its tallest member,
   which would leave a gap under the shorter Login before Refer & Earn
   starts; floats are the one layout mode where two columns can each
   size to their own content height like this without a wrapper element
   around Login+Refer (which isn't there in the markup - it's a sibling
   of the flex row, not a child of it). */
.entry-content.wp-block-post-content:has(.wrighty-trade-card) > .wp-block-group.is-nowrap.is-layout-flex {
    display: contents;
}

.entry-content.wp-block-post-content:has(.wrighty-trade-card)::after {
    content: "";
    display: table;
    clear: both;
}

.wrighty-trade-login {
    float: left;
    width: calc(50% - 12px);
    margin-top: 24px !important;
}

.wrighty-trade-apply {
    float: right;
    width: calc(50% - 12px);
    margin-top: 24px !important;
}

.wrighty-refer-card {
    float: left;
    clear: left;
    width: calc(50% - 12px);
    margin-top: 24px;
}

@media (max-width: 860px) {
    .wrighty-trade-login,
    .wrighty-trade-apply,
    .wrighty-refer-card {
        float: none;
        clear: none;
        width: 100%;
    }

    .wrighty-trade-apply {
        margin-top: 24px;
    }
}

.wrighty-trade-heading {
    font-family: var(--font-head);
    color: var(--navy);
    font-size: 20px;
    margin: 0 0 6px;
}

.wrighty-trade-heading-spaced {
    margin-top: 22px;
}

.wrighty-trade-subheading {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 16px;
}

.wrighty-refer-eyebrow {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 6px;
}

.wrighty-trade-note {
    font-size: 12px;
    color: var(--muted);
    margin: 12px 0 0;
}

.wrighty-trade-editor-note {
    font-size: 12px;
    font-style: italic;
    color: var(--muted);
    margin: 4px 0 14px;
}

.wrighty-trade-form .form-row,
.wrighty-trade-application .form-row {
    margin: 0 0 14px;
}

.wrighty-trade-form label,
.wrighty-trade-application label {
    display: block;
    font-size: 12px;
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--muted);
    margin-bottom: 4px;
}

.wrighty-trade-form label .required,
.wrighty-trade-application label .required,
.wrighty-trade-terms-row .required {
    color: var(--red);
}

.wrighty-trade-form input.input-text,
.wrighty-trade-application input.input-text,
.wrighty-trade-application select,
.wrighty-trade-application textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 11px 12px;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--navy);
    background: #fff;
    box-sizing: border-box;
}

.wrighty-trade-button {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: var(--gold-2);
    color: var(--navy-deep);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border: none;
    border-radius: 10px;
    padding: 13px 20px;
    cursor: pointer;
    transition: .16s;
}

.wrighty-trade-button:hover {
    background: var(--gold-hi);
}

.wrighty-trade-apply .wrighty-trade-button-primary,
.wrighty-trade-application .wrighty-trade-button-primary {
    background: var(--blue);
    color: #fff;
}

.wrighty-trade-apply .wrighty-trade-button-primary:hover,
.wrighty-trade-application .wrighty-trade-button-primary:hover {
    background: var(--navy);
}

.wrighty-trade-benefits {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.wrighty-trade-benefits li {
    font-size: 13px;
    color: var(--navy);
    padding-left: 20px;
    position: relative;
}

.wrighty-trade-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 700;
}

.wrighty-refer-row,
.wrighty-refer-form .wrighty-refer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.wrighty-trade-application-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

.wrighty-trade-application-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.wrighty-trade-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px 16px;
}

.wrighty-trade-checkbox {
    display: flex !important;
    align-items: flex-start;
    gap: 6px;
    font-family: var(--font-body) !important;
    text-transform: none !important;
    font-size: 13px !important;
    color: var(--navy) !important;
    letter-spacing: 0 !important;
}

.wrighty-trade-checkbox input[type="checkbox"] {
    margin-top: 3px;
}

.wrighty-trade-application-submit {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.wrighty-trade-terms-row a {
    color: var(--blue);
}

@media (max-width: 782px) {
    .wrighty-trade-application-columns,
    .wrighty-trade-application-row,
    .wrighty-refer-row {
        grid-template-columns: 1fr;
    }
}

/* Deferred popups (privacy notice, referral) — hidden nodes printed in the
   footer by components/popups.php and revealed by js/popups.js ~1s after
   window load. Rendered as a non-blocking bottom banner, not a centered
   modal: the overlay is pointer-events:none with no dim backdrop so the
   page behind it stays fully interactive and scrollable (js/popups.js also
   never locks body scroll). The card itself re-enables pointer events.
   Close button styling matches the review modal above. */
.wrighty-popup-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
    padding: 0 20px 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.wrighty-popup-overlay[hidden] {
    display: none;
}

.wrighty-popup-overlay.is-open {
    opacity: 1;
}

.wrighty-popup {
    background: rgb(14, 26, 60);
    color: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
    transform: translateY(12px);
    transition: transform .3s ease;
    pointer-events: auto;
}
.wrighty-popup .wrighty-popup-desc a{
    color: var(--gold-hi);
}

.wrighty-popup-overlay.is-open .wrighty-popup {
    transform: none;
}

.wrighty-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--navy);
}

.wrighty-popup-close:hover {
    background: var(--paper);
}

.wrighty-popup-title {
    margin: 0 40px 10px 0;
}

.wrighty-popup-desc p {
    margin: 0 0 10px;
}

.wrighty-popup-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.wrighty-popup-btn {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--radius);
    text-decoration: none;
}

.wrighty-popup-btn:hover {
    background: var(--blue);
    color: #fff;
}

/* ============ Newsletter offer popup (/my-account/, /b2b/) ============
   Printed by components/popups.php, driven by js/newsletter-popup.js.
   Shares nothing with the privacy popup above: that one is a non-blocking
   bottom banner, this is a real centered modal with a dim backdrop.

   Everything from .sib_signup_form inwards is Brevo's own markup (the
   [sibwp_form id=2] shortcode), so these rules restyle rather than own it:
     - Brevo's form template wraps the field/checkbox groups in
       .newsletter_email / .newsletter_checkbox, which already carry
       unscoped float/width rules from the homepage newsletter block -
       they have to be neutralised here or the popup inherits a 40%-wide
       right-floated column.
     - Brevo's DOM order is email, submit, checkboxes; the design wants
       the submit last, so .newsletter_email is unwrapped with
       display:contents and the parts are reordered with flex order.
     - The "Email Address*" text node and the <br>s Brevo prints between
       label and field are hidden rather than removed, leaving its own
       validation scripts the DOM shape they expect. The visible captions
       are injected by js/newsletter-popup.js from the admin settings. */
.wrighty-nlpop-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(14, 26, 60, .55);
    opacity: 0;
    transition: opacity .3s ease;
    overflow-y: auto;
}

.wrighty-nlpop-overlay[hidden] {
    display: none;
}

.wrighty-nlpop-overlay.is-open {
    opacity: 1;
}

body.wrighty-nlpop-open {
    overflow: hidden;
}

.wrighty-nlpop {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    width: 100%;
    max-width: 400px;
    margin: auto;
    overflow: hidden;
    transform: translateY(14px);
    transition: transform .3s ease;
}

.wrighty-nlpop-overlay.is-open .wrighty-nlpop {
    transform: none;
}

/* header band */
.wrighty-nlpop-head {
    position: relative;
    background: linear-gradient(120deg, var(--navy-deep), var(--navy-800));
    padding: 26px 42px 22px;
    text-align: center;
}

.wrighty-nlpop-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
}

.wrighty-nlpop-close:hover {
    opacity: 1;
}

/* js/newsletter-popup.js focuses this on open so keyboard users land
   inside the dialog; :focus-visible keeps the ring for them without
   painting a heavy default outline box over the header band. */
.wrighty-nlpop-close:focus {
    outline: none;
}

.wrighty-nlpop-close:focus-visible {
    outline: 2px solid var(--gold-hi);
    outline-offset: 2px;
    border-radius: 4px;
    opacity: 1;
}

.wrighty-nlpop-eyebrow {
    margin: 0 0 8px;
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold-hi);
}

.wrighty-nlpop-title {
    margin: 0;
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1.25;
    color: #fff;
}

/* body */
.wrighty-nlpop-body {
    padding: 22px 26px 26px;
}

.wrighty-nlpop-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
    margin-bottom: 18px;
}

.wrighty-nlpop-desc p {
    margin: 0;
}

.wrighty-nlpop-footnote {
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--muted);
    text-align: center;
}

/* --- Brevo form, restyled --- */
.wrighty-nlpop-form .sib_signup_form,
.wrighty-nlpop-form .sib_signup_box_inside_2 {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    width: auto;
    float: none;
}

.wrighty-nlpop-form .sib_signup_box_inside_2 {
    display: flex;
    flex-direction: column;
}

/* unwrap so the submit can be ordered after the checkboxes */
.wrighty-nlpop-form .newsletter_email {
    display: contents;
}

.wrighty-nlpop-form .sib_msg_disp { order: 0; }
.wrighty-nlpop-form .wrighty-nlpop-label { order: 1; }
.wrighty-nlpop-form p.sib-email-area { order: 2; }
.wrighty-nlpop-form .wrighty-nlpop-note { order: 3; }
.wrighty-nlpop-form .newsletter_checkbox { order: 4; }
.wrighty-nlpop-form p:has(> input[type="submit"]) { order: 5; }

/* Brevo prints its own captions as bare text nodes plus <br>s */
.wrighty-nlpop-form br,
.wrighty-nlpop-form .sib_loader,
.wrighty-nlpop-form > .sib_signup_form > p:not([class]) {
    display: none;
}

.wrighty-nlpop-label,
.wrighty-nlpop-note {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
    margin: 0 0 6px;
}

.wrighty-nlpop-note {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    margin: 14px 0 8px;
}

/* email field: font-size:0 kills the raw "Email Address*" text node and
   the whitespace around it without removing anything from the DOM */
.wrighty-nlpop-form p.sib-email-area {
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    float: none;
    width: auto;
}

.wrighty-nlpop-form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--navy);
    background: #fff;
}

.wrighty-nlpop-form input[type="email"]:focus {
    outline: none;
    border-color: var(--blue);
}

/* interest checkboxes: three across, checkbox left of its label
   (Brevo prints label first, hence row-reverse) */
.wrighty-nlpop-form .newsletter_checkbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
    float: none;
    width: auto;
    clear: none;
}

.wrighty-nlpop-form .newsletter_checkbox > p {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin: 0;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0;
    line-height: 1;
    background: #fff;
}

.wrighty-nlpop-form .newsletter_checkbox label {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--navy);
    line-height: 1.2;
    cursor: pointer;
}

.wrighty-nlpop-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin: 0;
    border: 1.5px solid #c3cbdd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.wrighty-nlpop-form input[type="checkbox"]:checked {
    background-color: var(--blue);
    border-color: var(--blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

/* submit */
.wrighty-nlpop-form p:has(> input[type="submit"]) {
    margin: 16px 0 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.wrighty-nlpop-form input[type="submit"] {
    width: 100%;
    box-sizing: border-box;
    background: var(--gold-2) !important;
    color: var(--navy-deep) !important;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: none !important;
    border-radius: 10px;
    padding: 14px 20px;
    cursor: pointer;
    transition: background .16s;
}

.wrighty-nlpop-form input[type="submit"]:hover {
    background: var(--gold-hi) !important;
}

.wrighty-nlpop-form .sib_msg_disp {
    display: none;
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.4;
}

.wrighty-nlpop-form .sib-alert-message {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 500;
}

.wrighty-nlpop-form .sib-alert-message-success {
    background: rgba(47, 191, 91, .12);
    color: #1f8a41;
}

.wrighty-nlpop-form .sib-alert-message-error {
    background: rgba(216, 74, 59, .1);
    color: var(--red);
}

.wrighty-nlpop-form .sib-alert-message-warning {
    background: rgba(212, 166, 89, .16);
    color: var(--navy-deep);
}

.wrighty-nlpop-form input[type="submit"]:disabled {
    opacity: .6;
    cursor: default;
}
.wrighty-nlpop-form .wrighty-nlpop-coupon {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(47, 191, 91, .12);
    color: #1f8a41;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: .02em;
}

@media (max-width: 380px) {
    .wrighty-nlpop-form .newsletter_checkbox {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .hide-on-desktop {
        display: none !important;
    }
}
@media (max-width: 1024px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* ============ Wrighty refresh (September 2026) ============
   1. DM Sans across the site. The site header keeps Quantico and Barlow.
   2. Shop filter sidebar follows you as you scroll (desktop).
   3. Sort menu on listing pages.
   4. Sell Your Cards page. */

body {
    --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-head: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --wp--preset--font-family--barlow: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --wp--preset--font-family--quantico: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-family: var(--font-body);
}

header.wp-block-template-part {
    --font-body: 'Barlow', system-ui, sans-serif;
    --font-head: 'Quantico', sans-serif;
    --wp--preset--font-family--barlow: 'Barlow', system-ui, sans-serif;
    --wp--preset--font-family--quantico: 'Quantico', sans-serif;
}

@media (min-width: 861px) {
    .wrighty-list-grid > .wrighty-filters.wf {
        position: sticky;
        top: calc(var(--wrighty-header-bottom, 140px) + 16px);
        left: auto;
        width: auto;
        align-self: start;
        max-height: calc(100vh - var(--wrighty-header-bottom, 140px) - 32px);
        z-index: 5;
    }

    .wrighty-list-grid > .wrighty-filters.wf + div:empty {
        display: none;
    }
}

.wf-sort {
    position: relative;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.wf-sort__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    min-width: 0 !important;
}

.wf-sort__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 230px;
    background: #fff;
    border: 1.5px solid #cdd2dd;
    border-radius: 10px;
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    color: #141a33;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

.wf-sort__btn:hover,
.wf-sort.is-open .wf-sort__btn {
    border-color: #16234B;
}

.wf-sort__btn:focus-visible {
    outline: 2px solid #2E6CC6;
    outline-offset: 2px;
}

.wf-sort__lbl {
    color: #6f7690;
    font-weight: 500;
}

.wf-sort__val {
    flex: 1;
    text-align: left;
    font-weight: 700;
    color: #16234B;
}

.wf-sort__chev {
    width: 8px;
    height: 8px;
    border-right: 2px solid #16234B;
    border-bottom: 2px solid #16234B;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s;
    flex: none;
}

.wf-sort.is-open .wf-sort__chev {
    transform: translateY(2px) rotate(-135deg);
}

.wf-sort__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 100%;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid #e4e7ee;
    border-radius: 12px;
    box-shadow: 0 18px 40px -16px rgba(22, 35, 75, .35);
    z-index: 50;
}

.wf-sort__menu li {
    position: relative;
    padding: 10px 14px 10px 36px;
    margin: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #3d4460;
    cursor: pointer;
    white-space: nowrap;
}

.wf-sort__menu li:hover,
.wf-sort__menu li:focus {
    background: #f6f7fa;
    color: #16234B;
    outline: none;
}

.wf-sort__menu li[aria-selected="true"] {
    color: #16234B;
    font-weight: 700;
}

.wf-sort__menu li[aria-selected="true"]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 5px;
    height: 10px;
    border: solid #16234B;
    border-width: 0 2px 2px 0;
    transform: translateY(-65%) rotate(42deg);
}

@media (max-width: 640px) {
    .wf-sort__btn {
        min-width: 0;
    }
}
.ws{--ws-navy:#16234B;--ws-navy2:#1f3170;--ws-gold:#D4A659;--ws-ink:#141a33;--ws-ink2:#3d4460;--ws-muted:#6f7690;--ws-rule:#e4e7ee;--ws-sunk:#f6f7fa;font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ws-ink);-webkit-font-smoothing:antialiased}
.ws *{box-sizing:border-box}
.ws h1,.ws h2,.ws h3{font-family:inherit;text-transform:none;letter-spacing:-.02em}
.ws-hero{background:radial-gradient(1200px 500px at 85% -10%,rgba(212,166,89,.22),transparent 60%),linear-gradient(160deg,var(--ws-navy) 0%,var(--ws-navy2) 100%);color:#fff;padding:22px 0 56px}
.ws-crumbs{display:flex;gap:8px;align-items:center;font-size:14px;color:rgba(255,255,255,.7);margin-bottom:28px}
.ws-crumbs a{color:rgba(255,255,255,.75);text-decoration:none}
.ws-crumbs a:hover{color:#fff;text-decoration:underline}
.ws-crumbs b{color:#fff;font-weight:600}
.ws-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.ws-kicker{display:inline-block;background:rgba(212,166,89,.18);color:#f3d9a4;border:1px solid rgba(212,166,89,.45);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;letter-spacing:.02em}
.ws-hero h1{color:#fff;font-size:clamp(32px,4.2vw,50px);font-weight:700;line-height:1.08;margin:18px 0 16px}
.ws-lede{font-size:18px;line-height:1.55;color:rgba(255,255,255,.85);max-width:34em;margin:0 0 22px}
.ws-perks{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
.ws-perks li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:#fff}
.ws-tick{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ws-gold);color:var(--ws-navy);flex:none}
.ws-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:520px}
.ws-stats div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 16px}
.ws-stats b{display:block;font-size:24px;font-weight:700;color:#fff;line-height:1.1}
.ws-stats span{display:block;font-size:13px;color:rgba(255,255,255,.72);margin-top:4px}
.ws-card{background:#fff;color:var(--ws-ink);border-radius:18px;padding:28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55),0 2px 6px rgba(22,35,75,.08)}
.ws-card h2{font-size:24px;font-weight:700;margin:0 0 4px;color:var(--ws-ink)}
.ws-card__sub{font-size:14.5px;color:var(--ws-muted);margin:0 0 20px}
.ws-field{margin:0 0 16px;border:0;padding:0;min-width:0}
.ws-field>label,.ws-field legend{display:block;font-size:14px;font-weight:600;color:var(--ws-ink2);margin:0 0 6px;padding:0;text-transform:none;letter-spacing:0;font-family:inherit}
.ws-opt{font-weight:400;color:var(--ws-muted)}
.ws-field input[type=text],.ws-field input[type=email],.ws-field input[type=tel],.ws-field textarea{width:100%;border:1.5px solid #cdd2dd;border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;color:var(--ws-ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.ws-field textarea{resize:vertical;min-height:110px}
.ws-field input:focus,.ws-field textarea:focus{outline:none;border-color:var(--ws-navy);box-shadow:0 0 0 3px rgba(22,35,75,.12)}
.ws-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ws-drop{display:flex!important;align-items:center;gap:12px;border:1.5px dashed #b9c0cf;border-radius:12px;padding:14px 16px;background:var(--ws-sunk);cursor:pointer;font-size:14px!important;font-weight:400!important;color:var(--ws-ink2)!important;transition:border-color .15s,background .15s}
.ws-drop:hover{border-color:var(--ws-navy);background:#eef1f8}
.ws-drop b{color:var(--ws-ink)}
.ws-drop small{color:var(--ws-muted);font-size:12.5px}
.ws-drop__icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:#fff;color:var(--ws-navy);box-shadow:0 1px 3px rgba(22,35,75,.12);flex:none}
.ws-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ws-file:focus-visible+.ws-drop,.ws-drop:focus-within{outline:2px solid #2E6CC6;outline-offset:2px}
.ws-payout{display:grid;gap:8px}
.ws-choice{display:flex;align-items:center;gap:12px;border:1.5px solid #cdd2dd;border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s;margin:0}
.ws-choice:hover{border-color:var(--ws-navy)}
.ws-choice input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid #b9c0cf;border-radius:50%;margin:0;flex:none;position:relative;cursor:pointer}
.ws-choice input:checked{border-color:var(--ws-navy)}
.ws-choice input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ws-navy)}
.ws-choice input:focus-visible{outline:2px solid #2E6CC6;outline-offset:2px}
.ws-choice span{display:flex;flex-direction:column;line-height:1.3}
.ws-choice b{font-size:15px;font-weight:700;color:var(--ws-ink)}
.ws-choice em{font-style:normal;background:var(--ws-gold);color:var(--ws-navy);border-radius:999px;padding:1px 8px;font-size:12px;margin-left:4px}
.ws-choice small{font-size:13px;color:var(--ws-muted)}
.ws-choice:has(input:checked){border-color:var(--ws-navy);background:#f2f4fa}
.ws-check{display:flex!important;align-items:center;gap:10px;font-size:14px!important;font-weight:400!important;color:var(--ws-ink2)!important;cursor:pointer}
.ws-check input{width:18px;height:18px;accent-color:var(--ws-navy);margin:0;flex:none}
.ws-submit{display:inline-flex;align-items:center;justify-content:center;width:100%;background:var(--ws-gold);color:var(--ws-navy)!important;border:0;border-radius:12px;padding:15px 22px;font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s;box-shadow:0 10px 22px -12px rgba(212,166,89,.9);text-transform:none;letter-spacing:0}
.ws-submit:hover{background:#e0b46a;transform:translateY(-1px)}
.ws-submit:disabled{opacity:.6;cursor:wait;transform:none}
.ws-status{font-size:14px;margin:12px 0 0;color:var(--ws-ink2);min-height:1em}
.ws-status.is-error{color:#c0392b}
.ws-done{text-align:center}
.ws-done__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#e6f4ed;color:#1f7a52;margin-bottom:12px}
.ws-done__icon svg{width:28px;height:28px}
.ws-done p{color:var(--ws-ink2);font-size:15.5px;line-height:1.55;margin:0 0 20px}
.ws-section{padding-top:56px}
.ws-section--last{padding-bottom:64px}
.ws-section h2{font-size:30px;font-weight:700;margin:0 0 20px;color:var(--ws-navy)}
.ws-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:none}
.ws-steps li{background:#fff;border:1px solid var(--ws-rule);border-radius:16px;padding:22px;box-shadow:0 1px 2px rgba(22,35,75,.04)}
.ws-steps__num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ws-navy);color:#fff;font-weight:700;font-size:15px;margin-bottom:12px}
.ws-steps h3{font-size:18px;font-weight:700;margin:0 0 6px;color:var(--ws-ink)}
.ws-steps p{font-size:15px;line-height:1.55;color:var(--ws-ink2);margin:0}
.ws-buy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ws-buy li{background:#fff;border:1px solid var(--ws-rule);border-left:4px solid var(--ws-gold);border-radius:12px;padding:16px 18px}
.ws-buy b{display:block;font-size:16px;font-weight:700;color:var(--ws-ink)}
.ws-buy span{display:block;font-size:14px;color:var(--ws-muted);margin-top:2px}
.ws-faq{display:grid;gap:10px;max-width:820px}
.ws-faq details{background:#fff;border:1px solid var(--ws-rule);border-radius:12px;padding:0 18px}
.ws-faq summary{list-style:none;cursor:pointer;padding:16px 28px 16px 0;font-size:16px;font-weight:700;color:var(--ws-ink);position:relative}
.ws-faq summary::-webkit-details-marker{display:none}
.ws-faq summary::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;border-right:2px solid var(--ws-ink2);border-bottom:2px solid var(--ws-ink2);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.ws-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.ws-faq p{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--ws-ink2)}
.ws-cta{margin:24px 0 0}
.ws-cta .ws-submit{width:auto;padding:14px 28px}
@media (max-width:900px){.ws-hero__grid{grid-template-columns:1fr;gap:28px}.ws-steps,.ws-buy{grid-template-columns:1fr}.ws-stats{max-width:none}}
@media (max-width:520px){.ws-row{grid-template-columns:1fr}.ws-card{padding:20px}.ws-stats{grid-template-columns:1fr 1fr 1fr;gap:8px}.ws-stats div{padding:10px}.ws-stats b{font-size:19px}}
.ws-hero{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
main:has(.ws){overflow-x:clip}

main:has(.ws){margin-top:0!important}
.entry-content:has(> .ws){padding-top:0!important}
.ws-payout>.ws-choice{display:flex;margin:0;font-size:15px;font-weight:400;color:var(--ws-ink)}

.ws-section.wrap{padding-left:0;padding-right:0}
.wrighty-plp-togglebtn,.wrighty-header-filter-toggle{background:#fff!important;color:#16234B!important;border:1.5px solid #cdd2dd!important;border-radius:10px!important;font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;font-size:14px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;box-shadow:0 6px 16px -10px rgba(22,35,75,.4)!important}
.wrighty-plp-togglebtn:hover,.wrighty-header-filter-toggle:hover{border-color:#16234B!important}

/* ===== Wrighty refresh 2 (September 2026): footer, info pages, popup, account, trade ===== */

/* --- Footer --- */
.wrighty-footer{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--navy-deep,#0e1a3c);color:#cdd4e6}
.wrighty-footer .fmain{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1.5fr);gap:48px!important;max-width:1320px;margin:0 auto;padding:56px 24px 40px!important;align-items:start}
.wrighty-footer .fmain>.wp-block-column{flex:none!important;width:auto!important;min-width:0;margin:0!important}
.wrighty-footer .wrighty-logo{margin-bottom:18px}
.wrighty-footer .wrighty-logo .wp-block-site-logo img{width:170px!important;height:auto!important}
.wrighty-footer h5.wp-block-heading{font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi,#f0c878);margin:4px 0 16px}
.wrighty-footer .fmain>.wp-block-column:first-child h5.wp-block-heading{display:none}
.wrighty-footer .blurb{font-size:15px;line-height:1.65;color:#b8c0d8;max-width:360px;margin:0 0 20px}
.wrighty-footer .flinks{list-style:none;margin:0;padding:0}
.wrighty-footer .flinks li{padding:0;margin:0 0 11px;font-size:15px;line-height:1.35;break-inside:avoid}
.wrighty-footer .flinks a{color:#dfe4f1;text-decoration:none;transition:color .15s}
.wrighty-footer .flinks a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.wrighty-footer .fmain>.wp-block-column:last-child .flinks{columns:2;column-gap:32px}
.wrighty-footer .socs{gap:10px!important;margin:0!important}
.wrighty-footer .socs .wp-block-social-link{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08)!important;border-radius:10px;transition:background .15s,transform .15s}
.wrighty-footer .socs .wp-block-social-link:hover{background:rgba(255,255,255,.16)!important;transform:translateY(-1px)}
.wrighty-footer .fbar{max-width:1320px;margin:0 auto;padding:20px 24px 26px!important;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;font-size:13.5px!important;color:#98a1bd}
/* Extra clearance so the fixed back-to-top button (bottom-right, js/back-to-top.js) never sits on top of the last payment logo when a page is scrolled all the way down. Not needed below 480px - .fbar stacks to a column there instead, so .pays is no longer right-aligned. */
@media (min-width:481px){.wrighty-footer .fbar{padding-right:90px!important}}
.wrighty-footer .pays{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.wrighty-footer .pays span{font-family:inherit!important;font-size:11.5px!important;font-weight:700;margin:0!important;padding:4px 9px!important;border-radius:6px;background:#fff;color:var(--navy,#16234B)}
@media (max-width:900px){.wrighty-footer .fmain{grid-template-columns:1fr 1fr;gap:36px 28px!important;padding:44px 20px 32px!important}.wrighty-footer .fmain>.wp-block-column:first-child{grid-column:1/-1}.wrighty-footer .fmain>.wp-block-column:last-child .flinks{columns:1}}
@media (max-width:480px){.wrighty-footer .fmain>.wp-block-column:last-child .flinks{columns:1}.wrighty-footer .fbar{flex-direction:column;align-items:flex-start}}

/* --- Info pages: FAQ, contact, condition guide, shipping, privacy, track order --- */
.wrighty-crumbs{font-family:"DM Sans",sans-serif;font-size:14px;color:#6f7690;padding-top:18px!important;padding-bottom:0!important}
.wrighty-crumbs a{color:#6f7690;text-decoration:none;font-weight:500}
.wrighty-crumbs a:hover{color:#16234B;text-decoration:underline;text-underline-offset:3px}
.wrighty-crumbs b{color:#16234B;font-weight:700}
.wrighty-narrow{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#141a33}
.wrighty-narrow h1,.wrighty-narrow h2,.wrighty-narrow h3,.wrighty-narrow h4,.wrighty-narrow-title{font-family:inherit!important;text-transform:none!important;letter-spacing:-.02em!important;color:#16234B}
.wrighty-narrow-title{font-size:clamp(30px,3.6vw,42px)!important;font-weight:700!important;line-height:1.1!important;margin:8px 0 28px!important}
.wrighty-narrow h2{font-size:24px;font-weight:700;margin:32px 0 12px}
.wrighty-narrow h3{font-size:19px;font-weight:700;margin:24px 0 8px}
.wrighty-narrow p,.wrighty-narrow li{font-size:16px;line-height:1.65;color:#3d4460}
.wrighty-narrow a:not(.btn){color:#2E6CC6;font-weight:600;text-underline-offset:3px}
.wrighty-narrow .muted{color:#3d4460}
.wrighty-narrow .card{background:#fff;border:1px solid #e4e7ee;border-radius:16px;box-shadow:0 1px 2px rgba(22,35,75,.04),0 14px 30px -24px rgba(22,35,75,.35)}
.wrighty-faq-list{display:grid;gap:12px}
.wrighty-faq-item{padding:0!important;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.wrighty-faq-item:hover{border-color:#cdd2dd}
.wrighty-faq-item[open]{border-color:#16234B;box-shadow:0 18px 36px -26px rgba(22,35,75,.5)}
.wrighty-faq-item summary{list-style:none;cursor:pointer;position:relative;padding:20px 60px 20px 22px!important;font-family:"DM Sans",sans-serif!important;font-size:17px!important;font-weight:700!important;color:#141a33!important;text-transform:none!important;letter-spacing:-.01em!important}
.wrighty-faq-item summary::-webkit-details-marker{display:none}
.wrighty-faq-item summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:#f2f4fa;color:#16234B;font-size:20px;font-weight:500;line-height:30px;text-align:center;transition:transform .2s,background .2s,color .2s}
.wrighty-faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg);background:#16234B;color:#fff}
.wrighty-faq-answer{padding:0 22px 22px!important;font-size:16px!important;line-height:1.65!important;color:#3d4460!important}
.wrighty-faq-cta{margin-top:28px;padding:26px 28px!important;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,#16234B,#1f3170)!important;border:0!important;color:#fff}
.wrighty-faq-cta b{display:block;font-size:20px;font-weight:700;color:#fff}
.wrighty-faq-cta p,.wrighty-faq-cta .muted{margin:4px 0 0!important;color:rgba(255,255,255,.8)!important;font-size:15px}
.wrighty-narrow .btn,.wrighty-faq-cta .btn{display:inline-flex;align-items:center;justify-content:center;background:#D4A659!important;color:#16234B!important;border:0!important;border-radius:12px!important;padding:13px 22px!important;font-family:"DM Sans",sans-serif!important;font-size:15px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;text-decoration:none!important;transition:transform .12s,background .12s}
.wrighty-narrow .btn:hover{background:#e0b46a!important;transform:translateY(-1px)}
.wrighty-narrow input[type=text],.wrighty-narrow input[type=email],.wrighty-narrow input[type=tel],.wrighty-narrow input[type=number],.wrighty-narrow select,.wrighty-narrow textarea{font-family:inherit;font-size:15px;border:1.5px solid #cdd2dd;border-radius:10px;padding:12px 14px;background:#fff;color:#141a33}
.wrighty-narrow input:focus,.wrighty-narrow select:focus,.wrighty-narrow textarea:focus{outline:none;border-color:#16234B;box-shadow:0 0 0 3px rgba(22,35,75,.12)}
.wrighty-narrow label{font-family:inherit!important;text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:600!important;color:#3d4460!important}
.wrighty-narrow table{font-size:15px}

/* --- Newsletter popup: interest pills --- */
.wrighty-nlpop,.wrighty-nlpop *{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.wrighty-nlpop-title{text-transform:none!important;letter-spacing:-.02em!important}
.wrighty-nlpop-form .newsletter_checkbox{display:flex!important;flex-wrap:wrap;gap:8px!important}
.wrighty-nlpop-form .newsletter_checkbox>p{position:relative;display:inline-flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:6px!important;margin:0!important;padding:8px 14px!important;border:1.5px solid #d5dae6!important;border-radius:999px!important;background:#fff;font-size:0;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.wrighty-nlpop-form .newsletter_checkbox>p:hover{border-color:#16234B!important}
.wrighty-nlpop-form .newsletter_checkbox>p input[type=checkbox]{position:absolute!important;inset:0;width:100%!important;height:100%!important;margin:0!important;opacity:0;cursor:pointer;z-index:1;border:0!important;background:none!important}
.wrighty-nlpop-form .newsletter_checkbox label{display:inline-block!important;font-size:14px!important;font-weight:600!important;color:#16234B!important;text-transform:lowercase!important;letter-spacing:0!important;line-height:1.2!important;margin-bottom:0!important}
.wrighty-nlpop-form .newsletter_checkbox label::first-letter{text-transform:uppercase}
.wrighty-nlpop-form .newsletter_checkbox>p::before{content:"+";font-size:15px;font-weight:700;color:#8a92ad;line-height:1}
.wrighty-nlpop-form .newsletter_checkbox>p:has(input:checked){background:#16234B;border-color:#16234B!important}
.wrighty-nlpop-form .newsletter_checkbox>p:has(input:checked) label{color:#fff!important}
.wrighty-nlpop-form .newsletter_checkbox>p:has(input:checked)::before{content:"\2713";color:#D4A659}
.wrighty-nlpop-form .newsletter_checkbox>p:has(input:focus-visible){outline:2px solid #2E6CC6;outline-offset:2px}
.wrighty-nlpop-note,.wrighty-nlpop-label{font-size:14px!important;font-weight:600!important;color:#3d4460!important;text-transform:none!important;letter-spacing:0!important}

/* --- My Account: login and register (logged out) --- */
.wrighty-acct-hero{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;max-width:980px;margin:8px auto 22px;padding:26px 30px;border-radius:20px;background:radial-gradient(600px 240px at 90% -20%,rgba(212,166,89,.35),transparent 60%),linear-gradient(135deg,#16234B,#1f3170);color:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.wrighty-acct-hero__kicker{display:inline-block;margin:0 0 8px;padding:5px 12px;border-radius:999px;background:rgba(212,166,89,.2);border:1px solid rgba(212,166,89,.5);color:#f3d9a4;font-size:13px;font-weight:700}
.wrighty-acct-hero h1{font-family:inherit!important;font-size:clamp(26px,3vw,34px)!important;font-weight:700!important;line-height:1.1!important;letter-spacing:-.02em!important;text-transform:none!important;color:#fff!important;margin:0 0 6px!important}
.wrighty-acct-hero p{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.85);max-width:34em}
.wrighty-acct-hero ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wrighty-acct-hero li{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:14px;font-weight:600;color:#fff;white-space:nowrap}
.woocommerce-account:not(.logged-in) .entry-content>.woocommerce{max-width:980px;margin:0 auto 48px;font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.woocommerce-account:not(.logged-in) .u-columns.col2-set{display:grid!important;grid-template-columns:1fr 1fr;gap:20px;width:auto!important;margin:0!important}
.woocommerce-account:not(.logged-in) .u-columns.col2-set::before,.woocommerce-account:not(.logged-in) .u-columns.col2-set::after{display:none!important}
.woocommerce-account:not(.logged-in) .u-columns>.u-column1,.woocommerce-account:not(.logged-in) .u-columns>.u-column2{float:none!important;width:auto!important;max-width:none!important;margin:0!important;padding:26px 28px!important;background:#fff;border:1px solid #e4e7ee;border-radius:18px;box-shadow:0 1px 2px rgba(22,35,75,.04),0 18px 40px -30px rgba(22,35,75,.45)}
.woocommerce-account:not(.logged-in) .u-columns>.u-column2{background:#fbf8f1;border-color:#efe2c6}
.woocommerce-account:not(.logged-in) .u-columns h2{font-family:inherit!important;font-size:24px!important;font-weight:700!important;text-transform:none!important;letter-spacing:-.02em!important;color:#16234B!important;margin:0 0 16px!important}
.woocommerce-account:not(.logged-in) .u-column1 h2::after{content:" \2192  welcome back";font-size:14px;font-weight:600;color:#8a92ad;letter-spacing:0}
.woocommerce-account:not(.logged-in) .u-column2 h2::after{content:" \2192  new here?";font-size:14px;font-weight:600;color:#b08a45;letter-spacing:0}
.woocommerce-account:not(.logged-in) form.login,.woocommerce-account:not(.logged-in) form.register{border:0!important;padding:0!important;margin:0!important;background:none!important}
.woocommerce-account:not(.logged-in) .form-row{margin:0 0 14px!important;padding:0!important}
.woocommerce-account:not(.logged-in) .form-row label:not(.woocommerce-form__label-for-checkbox){display:block;font-family:inherit!important;font-size:14px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;color:#3d4460!important;margin:0 0 6px!important}
.woocommerce-account:not(.logged-in) .form-row .required{color:#c0392b;text-decoration:none}
.woocommerce-account:not(.logged-in) input.input-text{width:100%;box-sizing:border-box;font-family:inherit;font-size:15px!important;border:1.5px solid #cdd2dd!important;border-radius:10px!important;padding:12px 14px!important;background:#fff!important;color:#141a33;transition:border-color .15s,box-shadow .15s}
.woocommerce-account:not(.logged-in) input.input-text:focus{outline:none;border-color:#16234B!important;box-shadow:0 0 0 3px rgba(22,35,75,.12)}
.woocommerce-account:not(.logged-in) form.login>.form-row:has(.woocommerce-form-login__submit){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme{display:inline-flex!important;align-items:center;gap:8px;font-size:14px!important;font-weight:500!important;text-transform:none!important;color:#3d4460!important;margin:0!important}
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input{width:18px;height:18px;accent-color:#16234B;margin:0}
.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit,.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit{order:3;width:100%;margin:6px 0 0!important;float:none!important;display:inline-flex;align-items:center;justify-content:center;background:#16234B!important;color:#fff!important;border:0!important;border-radius:12px!important;padding:14px 22px!important;font-family:inherit!important;font-size:16px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;cursor:pointer;transition:background .15s,transform .12s}
.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit{background:#D4A659!important;color:#16234B!important}
.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit:hover{background:#1f3170!important;transform:translateY(-1px)}
.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit:hover{background:#e0b46a!important;transform:translateY(-1px)}
.woocommerce-account:not(.logged-in) .lost_password{margin:12px 0 0!important;font-size:14px}
.woocommerce-account:not(.logged-in) .lost_password a{color:#2E6CC6;font-weight:600;text-decoration:none}
.woocommerce-account:not(.logged-in) .lost_password a:hover{text-decoration:underline}
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text p{font-size:13px!important;line-height:1.5;color:#6f7690;margin:4px 0 8px}
@media (max-width:760px){.woocommerce-account:not(.logged-in) .u-columns.col2-set{grid-template-columns:1fr}.wrighty-acct-hero{padding:22px}}

/* --- B2B page --- */
.entry-content>.wp-block-group.alignfull.has-primary-background-color:has(~ .wp-block-group .wrighty-trade-card){position:relative;text-align:center;padding-top:40px!important;padding-bottom:44px!important;background:radial-gradient(900px 380px at 85% -20%,rgba(212,166,89,.25),transparent 60%),linear-gradient(160deg,#16234B,#1f3170)!important}
.entry-content>.wp-block-group.alignfull.has-primary-background-color:has(~ .wp-block-group .wrighty-trade-card)::before{content:"";display:block;width:180px;height:76px;margin:0 auto 18px;background:url("https://wrightytcg.com/wp-content/uploads/2026/09/transparent-website-logo.svg") center/contain no-repeat}
.entry-content>.wp-block-group.alignfull.has-primary-background-color:has(~ .wp-block-group .wrighty-trade-card) *{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important}
.entry-content>.wp-block-group.alignfull.has-primary-background-color:has(~ .wp-block-group .wrighty-trade-card) .is-nowrap{justify-content:center;flex-wrap:wrap!important;gap:10px!important}
.entry-content>.wp-block-group.alignfull.has-primary-background-color:has(~ .wp-block-group .wrighty-trade-card) h1{font-size:clamp(30px,4vw,46px)!important;font-weight:700!important;letter-spacing:-.02em!important;text-transform:none!important;margin:0!important}
.entry-content>.wp-block-group.alignfull.has-primary-background-color:has(~ .wp-block-group .wrighty-trade-card)>p:first-child{display:inline-block;margin:0 auto 12px!important;padding:6px 14px;border-radius:999px;background:rgba(212,166,89,.18);border:1px solid rgba(212,166,89,.45);font-size:13px!important;font-weight:700!important;letter-spacing:.02em!important;text-transform:none!important}
.entry-content>.wp-block-group.alignfull.has-primary-background-color:has(~ .wp-block-group .wrighty-trade-card)>p:last-child{max-width:40em;margin:14px auto 0!important;font-size:17px!important;line-height:1.55!important}
.entry-content>.wp-block-group:has(> .wrighty-trade-card){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px!important;align-items:start;max-width:1180px;margin:36px auto 60px!important;padding:0 20px;box-sizing:border-box}
.entry-content .wrighty-trade-card{float:none!important;clear:none!important;width:auto!important;margin:0!important;padding:26px!important;background:#fff!important;border:1px solid #e4e7ee!important;border-radius:18px!important;box-shadow:0 1px 2px rgba(22,35,75,.04),0 18px 40px -30px rgba(22,35,75,.45)!important;font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.entry-content .wrighty-trade-card.wrighty-trade-apply{border-color:#16234B!important;box-shadow:0 24px 50px -32px rgba(22,35,75,.7)!important}
.entry-content .wrighty-refer-card{background:#fbf8f1!important;border-color:#efe2c6!important}
.wrighty-trade-card .wrighty-trade-heading{font-family:inherit!important;font-size:22px!important;font-weight:700!important;letter-spacing:-.02em;text-transform:none!important;color:#16234B!important;margin:0 0 4px!important}
.wrighty-trade-card .wrighty-trade-subheading{font-size:15px!important;line-height:1.5;color:#6f7690!important;margin:0 0 18px!important}
.wrighty-trade-card .wrighty-refer-eyebrow{display:inline-block;font-family:inherit!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.02em!important;text-transform:none!important;color:#8a6427!important;background:#f3e6c8;border-radius:999px;padding:4px 11px;margin:0 0 10px!important}
.wrighty-trade-card .form-row{margin:0 0 12px!important}
.wrighty-trade-card label{font-family:inherit!important;font-size:14px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;color:#3d4460!important;margin:0 0 6px!important}
.wrighty-trade-card input.input-text{font-family:inherit!important;font-size:15px!important;border:1.5px solid #cdd2dd!important;border-radius:10px!important;padding:12px 14px!important}
.wrighty-trade-card input.input-text:focus{outline:none;border-color:#16234B!important;box-shadow:0 0 0 3px rgba(22,35,75,.12)}
.wrighty-trade-button{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;font-size:16px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;border-radius:12px!important;padding:14px 22px!important;margin-top:4px}
.wrighty-trade-card .wrighty-trade-benefits{grid-template-columns:1fr 1fr;gap:10px!important;margin:20px 0 0!important;padding:18px 0 0!important;border-top:1px solid #e4e7ee}
.wrighty-trade-card .wrighty-trade-benefits li{font-size:14px!important;line-height:1.4;color:#141a33!important;padding-left:26px!important}
.wrighty-trade-card .wrighty-trade-benefits li::before{content:"\2713"!important;top:0;width:18px;height:18px;border-radius:50%;background:#e6f4ed;color:#1f7a52!important;font-size:11px;line-height:18px;text-align:center}
.wrighty-trade-card .wrighty-refer-row{gap:12px!important}
@media (max-width:640px){.wrighty-trade-card .wrighty-trade-benefits,.wrighty-trade-card .wrighty-refer-row{grid-template-columns:1fr!important}}

/* --- Trade account application --- */
.wta{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#141a33;max-width:860px;margin:0 auto 64px;padding:0 4px}
.wta *{box-sizing:border-box}
.wta-top{text-align:center;padding:28px 0 26px}
.wta-logo{display:inline-block;margin-bottom:14px;padding:10px 18px;border-radius:14px;background:#16234B}
.wta-logo img{display:block;width:150px;height:auto}
.wta-kicker{margin:0 0 8px;font-size:13px;font-weight:700;color:#8a6427}
.wta-title{font-family:inherit!important;font-size:clamp(28px,3.4vw,40px)!important;font-weight:700!important;line-height:1.1!important;letter-spacing:-.02em!important;text-transform:none!important;color:#16234B!important;margin:0 0 10px!important}
.wta-lede{margin:0 auto 18px;max-width:34em;font-size:16px;line-height:1.55;color:#3d4460}
.wta-steps{list-style:none;margin:0;padding:0;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px}
.wta-steps li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:999px;background:#fff;border:1px solid #e4e7ee;font-size:14px;font-weight:600;color:#16234B}
.wta-steps b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#16234B;color:#fff;font-size:12.5px}
.wta-card{background:#fff;border:1px solid #e4e7ee;border-radius:20px;box-shadow:0 1px 2px rgba(22,35,75,.04),0 24px 50px -36px rgba(22,35,75,.55);padding:8px 32px 30px}
.wta-sec{padding:26px 0 12px;border-bottom:1px solid #eef0f5}
.wta-h{display:flex;align-items:center;gap:12px;font-family:inherit!important;font-size:20px!important;font-weight:700!important;letter-spacing:-.01em!important;text-transform:none!important;color:#16234B!important;margin:0 0 18px!important}
.wta-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#D4A659;color:#16234B;font-size:14px;font-weight:700;flex:none}
.wta-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.wta-grid .wta-wide{grid-column:1/-1}
.wta .form-row{margin:0 0 16px!important;padding:0!important;width:auto!important;float:none!important}
.wta .form-row>label,.wta .wta-label{display:block;font-family:inherit!important;font-size:14px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;color:#3d4460!important;margin:0 0 6px!important}
.wta-opt{font-weight:400;color:#8a92ad}
.wta input.input-text,.wta select,.wta textarea{width:100%;font-family:inherit!important;font-size:15px!important;color:#141a33!important;background-color:#fff!important;border:1.5px solid #cdd2dd!important;border-radius:10px!important;padding:11px 14px!important;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.wta textarea{resize:vertical;min-height:88px}
.wta input.input-text:focus,.wta select:focus,.wta textarea:focus{outline:none;border-color:#16234B!important;box-shadow:0 0 0 3px rgba(22,35,75,.12)}
.wta input[readonly]{background:#f6f7fa!important;color:#6f7690!important}
.wta-pills{display:flex;flex-wrap:wrap;gap:8px}
.wta-pill{position:relative;display:inline-flex!important;align-items:center;margin:0!important;cursor:pointer}
.wta-pill input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.wta-pill span{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border:1.5px solid #d5dae6;border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:#16234B;transition:background .15s,border-color .15s,color .15s}
.wta-pill span::before{content:"+";font-weight:700;color:#8a92ad}
.wta-pill:hover span{border-color:#16234B}
.wta-pill input:checked+span{background:#16234B;border-color:#16234B;color:#fff}
.wta-pill input:checked+span::before{content:"\2713";color:#D4A659}
.wta-pill input:focus-visible+span{outline:2px solid #2E6CC6;outline-offset:2px}
.wta-submit{padding-top:24px}
.wta-terms{display:flex!important;align-items:flex-start;gap:10px;margin:0 0 18px!important;font-family:inherit!important;font-size:14.5px!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important;line-height:1.5;color:#3d4460!important;cursor:pointer}
.wta-terms input{width:18px;height:18px;margin:2px 0 0;accent-color:#16234B;flex:none}
.wta-terms a{color:#2E6CC6;font-weight:600}
.wta .wta-btn{width:100%;background:#16234B!important;color:#fff!important}
.wta .wta-btn:hover{background:#1f3170!important}
.wta-note{margin:12px 0 0;text-align:center;font-size:14px;color:#6f7690}
.wta .woocommerce-error,.wta .woocommerce-message{border-radius:12px;margin:0 0 18px}
@media (max-width:640px){.wta-card{padding:4px 18px 22px}.wta-grid{grid-template-columns:1fr}}


/* B2B page: two-column card grid (login + apply side by side, refer full width underneath) */
.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card){display:grid!important;grid-template-columns:minmax(20px,1fr) minmax(0,580px) minmax(0,580px) minmax(20px,1fr);column-gap:20px;row-gap:20px;padding-bottom:64px!important}
.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card)>*{grid-column:2/4;margin-top:0!important;margin-bottom:0!important;max-width:none!important}
.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card)>.alignfull{grid-column:1/-1;margin-bottom:16px!important}
.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card)>.wp-block-group:has(> .wrighty-trade-card){display:contents!important}
.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card) .wrighty-trade-login{grid-column:2/3}
.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card) .wrighty-trade-login~.wrighty-trade-apply{grid-column:3/4}
.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card) .wrighty-trade-apply,.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card) .wrighty-refer-card{grid-column:2/4}
.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card) .wrighty-trade-login+.wrighty-trade-apply{grid-column:3/4}
main:has(.wrighty-trade-card){margin-top:0!important}
.entry-content:has(> .wp-block-group .wrighty-trade-card){padding-top:0!important}
@media (max-width:860px){.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card){grid-template-columns:16px minmax(0,1fr) 16px}.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card)>*,.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card) .wrighty-trade-card{grid-column:2/3!important}.entry-content.wp-block-post-content:has(> .wp-block-group .wrighty-trade-card)>.alignfull{grid-column:1/-1!important}}
/* Trade application page: remove the stray gap above the form */
main:has(.wta){margin-top:0!important}


.wta .wta-pill,.wta .wta-pill span{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;text-transform:none!important;letter-spacing:0!important;font-size:14px!important;color:#16234B!important}
.wta .wta-pill input:checked+span{color:#fff!important}
.wrighty-footer h5.wp-block-heading{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important}


.woocommerce-account:not(.logged-in) form.login>.form-row:has(.woocommerce-form-login__submit){justify-content:flex-start}
.woocommerce-account:not(.logged-in) .password-input{display:block;position:relative;width:100%}
.woocommerce-account:not(.logged-in) .password-input input.input-text{padding-right:44px!important}
.woocommerce-account:not(.logged-in) .show-password-input{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.woocommerce-account:not(.logged-in) .form-row{display:block;text-align:left}
.woocommerce-account:not(.logged-in) form.login>.form-row:has(.woocommerce-form-login__submit){display:flex}


/* ===== Wrighty refresh 3 (September 2026): tiles, product card badges, colourful footer, account pills ===== */

/* Home category tiles: slimmer, flatter labels */
.wrighty-tile-link .wp-block-button__link{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;font-size:16px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;padding:11px 18px!important;border:0!important;border-radius:12px!important;box-shadow:0 10px 22px -10px rgba(0,0,0,.55)!important;text-shadow:none!important;transition:transform .15s,filter .15s}
.wrighty-tile-link .wp-block-button__link::after{content:"\2192";margin-left:8px;display:inline-block;transition:transform .15s}
.wrighty-tile-link:hover .wp-block-button__link{transform:translateY(-2px);filter:brightness(1.06)}
.wrighty-tile-link:hover .wp-block-button__link::after{transform:translateX(3px)}
.wrighty-tile-link .wp-block-button__link.has-range-red-background-color{background:#d63c3c!important}
.wrighty-tile-link .wp-block-button__link.has-range-blue-background-color{background:#2E6CC6!important}
.wrighty-tile-link .wp-block-button__link.has-range-yellow-background-color{background:#e0a92a!important;color:#16234B!important}
.wrighty-tile-link .wp-block-button__link.has-range-green-background-color{background:#2c9a4b!important}
.wrighty-tile-link .wp-block-button__link.has-range-purple-background-color{background:#7d45bf!important}
.wrighty-tile-link .wp-block-button__link.has-range-teal-background-color{background:#1f9e8f!important}

/* Product cards: heart top right, stock bottom left, sale price tag bottom right */
.wrighty-pcard .wishbtn{top:10px!important;bottom:auto!important;right:10px!important;width:34px!important;height:34px!important}
.wrighty-pcard .badge{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:700!important;padding:6px 11px!important;border-radius:10px!important;box-shadow:0 6px 14px -6px rgba(0,0,0,.35)!important}
.wrighty-pcard .b-sale{top:auto!important;bottom:10px!important;left:auto!important;right:10px!important;background:#d63c3c!important;color:#fff!important}
.wrighty-pcard .b-sale:has(+ .b-discount){display:none!important}
.wrighty-pcard .b-discount{top:auto!important;bottom:10px!important;left:auto!important;right:10px!important;background:#d63c3c!important;color:#fff!important}
.wrighty-pcard .b-discount::before{content:"Sale ";font-weight:600;opacity:.9}
.wrighty-pcard .rag{bottom:10px!important;left:10px!important;font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;text-transform:none!important;font-size:12px!important;padding:5px 10px!important}
@media (max-width:520px){.wrighty-pcard .badge{font-size:11.5px!important;padding:5px 8px!important}.wrighty-pcard .rag{font-size:10.5px!important;padding:4px 8px!important}}

/* Footer: brand-coloured social icons and payment badges */
.wrighty-footer .socs .wp-block-social-link{background:rgba(255,255,255,.08)!important}
.wrighty-footer .socs .wp-social-link-facebook{background:#1877F2!important}
.wrighty-footer .socs .wp-social-link-instagram{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)!important}
.wrighty-footer .socs .wp-social-link-tiktok{background:#000!important;box-shadow:-2px -2px 0 #25F4EE inset,2px 2px 0 #FE2C55 inset}
.wrighty-footer .socs .wp-social-link-youtube{background:#FF0000!important}
.wrighty-footer .socs .wp-block-social-link a,.wrighty-footer .socs .wp-block-social-link svg{color:#fff!important;fill:#fff!important}
.wrighty-footer .socs .wp-block-social-link:hover{filter:brightness(1.1);transform:translateY(-2px)}
.wrighty-footer .fmain>.wp-block-column:nth-child(2) h5.wp-block-heading{color:#f0c878!important}
.wrighty-footer .fmain>.wp-block-column:nth-child(3) h5.wp-block-heading{color:#7fb6ff!important}
.wrighty-footer .flinks a:hover{color:#f0c878!important}
/* Real brand logos (images/payments/*.svg) replaced the coloured text
   badges this used to be - one shared white chip per logo instead of a
   different background-color per nth-of-type, since the logos already
   carry their own brand colour. */
.wrighty-footer .pays span{display:inline-flex!important;align-items:center!important;justify-content:center!important;border:0!important;background:#fff!important;padding:5px 10px!important;border-radius:7px!important;letter-spacing:0!important}
.wrighty-footer .pays span img{display:block;height:16px;width:auto}

/* My Account banner: each perk its own colour */
.wrighty-acct-hero li:nth-child(1){background:rgba(212,166,89,.22)!important;border-color:rgba(240,200,120,.6)!important;color:#ffe3a8!important}
.wrighty-acct-hero li:nth-child(2){background:rgba(46,108,198,.3)!important;border-color:rgba(127,182,255,.6)!important;color:#d6e7ff!important}
.wrighty-acct-hero li:nth-child(3){background:rgba(44,154,75,.28)!important;border-color:rgba(120,220,150,.55)!important;color:#d4f7df!important}


/* ===== Wrighty refresh 4 (September 2026): delivery bar, basket, checkout, wishlist, trust boxes ===== */

/* Free delivery progress bar (mini basket + basket page) */
.wrighty-shipbar{margin:14px 16px 8px!important;padding:0!important;background:none!important;border:0!important;font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;text-align:left!important}
.wrighty-shipbar .wsb{padding:14px 16px 12px;border-radius:14px;background:#fff;border:1px solid #e4e7ee;box-shadow:0 10px 24px -20px rgba(22,35,75,.5)}
.wrighty-shipbar .wsb.is-done{background:#f1fbf5;border-color:#bfe8cf}
.wrighty-shipbar .wsb-row{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.wrighty-shipbar .wsb-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff1d6;color:#b7791f;flex:none}
.wrighty-shipbar .is-done .wsb-ico{background:#d9f3e3;color:#1f7a44}
.wrighty-shipbar .wsb-msg{font-size:15px;line-height:1.35;color:#16234B}
.wrighty-shipbar .wsb-msg b{font-weight:700}
.wrighty-shipbar .wrighty-shipbar-track{height:10px!important;border-radius:999px!important;background:#e9ecf3!important;overflow:hidden;margin:0!important}
.wrighty-shipbar .wrighty-shipbar-fill{height:100%!important;border-radius:999px!important;background-color:transparent!important;background-image:linear-gradient(90deg,#f25c54 0%,#f7b538 50%,#2cb67d 100%)!important;background-repeat:no-repeat!important;transition:width .45s ease}
.wrighty-shipbar .wsb-scale{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;font-weight:600;color:#8a92ad}
.wrighty-shipbar .is-done .wsb-scale span:last-child{color:#1f7a44}

/* Mini basket drawer */
.wc-block-mini-cart__drawer,.wc-block-mini-cart__drawer *{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.wc-block-mini-cart__footer{padding-top:16px!important}
.wc-block-mini-cart__footer-actions{gap:10px!important}
.wc-block-mini-cart__footer-cart,.wc-block-mini-cart__footer-checkout{font-size:16px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;border-radius:12px!important;padding:14px 18px!important;min-height:0!important}
.wc-block-mini-cart__footer-cart{background:#2E6CC6!important;border:0!important;color:#fff!important}
.wc-block-mini-cart__footer-cart:hover{background:#2459a6!important}
.wc-block-mini-cart__footer-checkout{background:#D4A659!important;border:0!important;color:#16234B!important}
.wc-block-mini-cart__footer-checkout:hover{background:#e0b46a!important}

/* Basket page summary */
.wc-block-cart .wc-block-components-totals-coupon__input label,.wc-block-cart .wc-block-components-totals-coupon label{text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:600!important;color:#3d4460!important}
.wc-block-components-totals-coupon__input input{border:1.5px solid #cdd2dd!important;border-radius:10px!important;box-shadow:none!important;outline:none!important}
.wc-block-components-totals-coupon__input input:focus{border-color:#16234B!important;box-shadow:0 0 0 3px rgba(22,35,75,.12)!important}
.wc-block-components-totals-coupon__button{background:#16234B!important;color:#fff!important;border:0!important;border-radius:10px!important;text-transform:none!important;letter-spacing:0!important;font-weight:700!important;opacity:1!important}
.wc-block-components-totals-coupon__button:disabled{background:#8a92ad!important}
.wc-block-cart .wrighty-shipbar{margin:4px 0 14px!important}

/* Checkout: bigger, friendlier text */
.wc-block-checkout,.wc-block-checkout *{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.wc-block-checkout .wc-block-components-checkout-step__title,.wc-block-checkout .wc-block-components-title{font-size:24px!important;font-weight:700!important;letter-spacing:-.02em!important;color:#16234B!important;text-transform:none!important}
.wc-block-checkout .wc-block-components-checkout-step__description{font-size:15px!important;color:#6f7690!important}
.wc-block-checkout .wc-block-components-text-input label,.wc-block-checkout .wc-block-components-combobox label,.wc-block-checkout .wc-blocks-components-select__label{font-size:15px!important;font-weight:600!important;color:#3d4460!important}
.wc-block-checkout .wc-block-components-text-input input,.wc-block-checkout .wc-blocks-components-select__select,.wc-block-checkout .wc-block-components-combobox input{font-size:16px!important;border:1.5px solid #cdd2dd!important;border-radius:10px!important;box-shadow:none!important}
.wc-block-checkout .wc-block-components-text-input input:focus,.wc-block-checkout .wc-blocks-components-select__select:focus,.wc-block-checkout .wc-block-components-combobox input:focus{border-color:#16234B!important;box-shadow:0 0 0 3px rgba(22,35,75,.12)!important;outline:none!important}
.wc-block-checkout .wc-block-components-address-form{row-gap:14px}
.wc-block-checkout .wc-block-checkout__guest-checkout-notice,.wc-block-checkout .wc-block-components-checkbox__label{font-size:15px!important}
.wc-block-checkout .wc-block-components-order-summary-item{padding:12px 0!important}
.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name{font-size:15px!important;font-weight:600!important;line-height:1.35!important}
.wc-block-checkout .wc-block-components-order-summary-item__individual-prices{display:none!important}
.wc-block-checkout .wc-block-components-totals-item{padding:6px 16px!important;font-size:15px!important}
.wc-block-checkout .wc-block-components-totals-wrapper{padding:10px 0!important}
.wc-block-checkout .wc-block-components-totals-wrapper:empty{display:none!important}
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:22px!important;font-weight:700!important;color:#16234B!important}
.wc-block-checkout .wc-block-components-totals-coupon label{text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:600!important}
.wc-block-checkout .wc-block-components-checkout-place-order-button{font-size:17px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;border-radius:12px!important;padding:16px!important}

/* Wishlist empty state */
[data-wrighty-wishlist-page] .wrighty-plp-title{font-family:"DM Sans",sans-serif!important;font-size:clamp(28px,3vw,38px)!important;font-weight:700!important;letter-spacing:-.02em!important}
[data-wrighty-wishlist-page] .wrighty-empty{max-width:720px;margin:10px auto 0;padding:52px 24px 48px!important;text-align:center;border-radius:20px!important;border:1px solid #e4e7ee;box-shadow:0 24px 50px -36px rgba(22,35,75,.55)!important;font-family:"DM Sans",sans-serif}
[data-wrighty-wishlist-page] .wrighty-empty::before{content:"\2665";display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:#ffe8ee;color:#e0405e;font-size:30px;line-height:1}
[data-wrighty-wishlist-page] .wrighty-empty h2,[data-wrighty-wishlist-page] .wrighty-empty h3,[data-wrighty-wishlist-page] .wrighty-empty b{font-size:26px!important;font-weight:700!important;color:#16234B!important;letter-spacing:-.02em}
[data-wrighty-wishlist-page] .wrighty-empty p{font-size:16px!important;color:#3d4460!important}
[data-wrighty-wishlist-page] .wrighty-empty a,[data-wrighty-wishlist-page] .wrighty-empty .btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:14px 26px!important;border-radius:12px!important;background:#16234B!important;color:#fff!important;text-decoration:none!important;text-transform:none!important;letter-spacing:0!important;font-family:"DM Sans",sans-serif!important;font-size:16px!important;font-weight:700!important;border:0!important;transition:transform .12s,background .12s}
[data-wrighty-wishlist-page] .wrighty-empty a:hover{background:#1f3170!important;transform:translateY(-1px)}

/* Home trust boxes: centred, with a coloured icon tile */
.wp-block-group.is-layout-grid:has(img[data-src$="truck.svg"],img[src$="truck.svg"])>.wp-block-group{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 18px!important;min-height:180px}
.wp-block-group.is-layout-grid:has(img[data-src$="truck.svg"],img[src$="truck.svg"])>.wp-block-group>figure{margin:0 auto 6px!important;width:62px;height:62px;border-radius:18px;display:flex!important;align-items:center;justify-content:center;background:#eef3fc}
.wp-block-group.is-layout-grid:has(img[data-src$="truck.svg"],img[src$="truck.svg"])>.wp-block-group>figure img{width:30px!important;height:30px!important}
.wp-block-group.is-layout-grid:has(img[data-src$="truck.svg"],img[src$="truck.svg"])>.wp-block-group:nth-child(1)>figure{background:#fff1d6}
.wp-block-group.is-layout-grid:has(img[data-src$="truck.svg"],img[src$="truck.svg"])>.wp-block-group:nth-child(2)>figure{background:#fde7e7}
.wp-block-group.is-layout-grid:has(img[data-src$="truck.svg"],img[src$="truck.svg"])>.wp-block-group:nth-child(3)>figure{background:#e3f6ea}
.wp-block-group.is-layout-grid:has(img[data-src$="truck.svg"],img[src$="truck.svg"])>.wp-block-group:nth-child(4)>figure{background:#e6effd}
.wp-block-group.is-layout-grid:has(img[data-src$="truck.svg"],img[src$="truck.svg"])>.wp-block-group:nth-child(5)>figure{background:#efe7fb}
.wp-block-group.is-layout-grid:has(img[data-src$="truck.svg"],img[src$="truck.svg"])>.wp-block-group>p{margin:0!important;max-width:none!important}
.wp-block-group.is-layout-grid:has(img[data-src$="truck.svg"],img[src$="truck.svg"])>.wp-block-group>p:nth-of-type(1){margin-top:10px!important;font-size:19px!important}
.wp-block-group.is-layout-grid:has(img[data-src$="truck.svg"],img[src$="truck.svg"])>.wp-block-group>p:nth-of-type(2){margin-top:4px!important;font-size:15px!important;color:#5d6377}

/* ===== Wrighty refresh 5: hub landing pages (Other TCGs and games) ===== */
body:not(:has(.wrighty-filters)) .wrighty-header-filter-toggle,body:not(:has(.wrighty-filters)) .wrighty-plp-togglebtn{display:none!important}
.wrighty-page-hero{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;border-radius:20px!important;padding:34px 36px!important}
.wrighty-page-hero h1{font-family:inherit!important;font-size:clamp(30px,3.6vw,44px)!important;font-weight:700!important;letter-spacing:-.02em!important;text-transform:none!important;margin:6px 0 8px!important}
.wrighty-page-hero p{font-size:17px!important;line-height:1.55!important;max-width:40em;color:rgba(255,255,255,.88)!important}
.wrighty-page-hero .kick{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(212,166,89,.2);border:1px solid rgba(212,166,89,.5);color:#f3d9a4!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.02em!important;text-transform:none!important}
.wrighty-catcards{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}
.wrighty-catcards>p{display:none!important}
.wrighty-catcard{display:flex!important;flex-direction:column;border-radius:18px!important;overflow:hidden;background:#fff;border:1px solid #e4e7ee!important;box-shadow:0 1px 2px rgba(22,35,75,.04),0 18px 40px -30px rgba(22,35,75,.45)!important;text-decoration:none!important;transition:transform .15s,box-shadow .15s}
.wrighty-catcard:hover{transform:translateY(-3px);box-shadow:0 26px 46px -28px rgba(22,35,75,.55)!important}
.wrighty-catcard .ci.ci--ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;height:auto!important;padding:18px;background:radial-gradient(circle at 85% 0%,rgba(255,255,255,.28),transparent 55%),linear-gradient(140deg,var(--ph),#16234B 110%)!important}
.wrighty-catcard .ci-ph{color:#fff;font-family:"DM Sans",sans-serif;font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.02em;text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.25)}
.wrighty-catcard .cb{padding:16px 18px 18px!important;font-family:"DM Sans",sans-serif;flex:1;display:flex;flex-direction:column}
.wrighty-catcard .cb h3{font-family:inherit!important;font-size:19px!important;font-weight:700!important;text-transform:none!important;letter-spacing:-.01em!important;color:#16234B!important;margin:0 0 6px!important}
.wrighty-catcard .cb p{font-size:14.5px!important;line-height:1.5!important;color:#5d6377!important;margin:0 0 12px!important;flex:1}
.wrighty-catcard .go{font-size:14.5px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;color:#2E6CC6!important}
@media (max-width:980px){.wrighty-catcards{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:520px){.wrighty-catcards{gap:12px!important}.wrighty-catcard .ci-ph{font-size:18px}.wrighty-page-hero{padding:24px 20px!important}}
.wrighty-catcard>p,.wrighty-catcard>br,.wrighty-page-hero>p:empty,.wrighty-sec-head p:empty{display:none!important}

/* ===== Wrighty refresh 6: region pages, product rails, range tiles ===== */
/* Spacing between page sections */
.entry-content > .wp-block-html + p{margin-top:26px!important}
.entry-content > .wp-block-group.is-layout-grid + p{margin-top:52px!important}
/* Product rails (block product cards): match the main product cards */
.wc-block-product .wc-block-components-product-image::after{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;text-transform:none!important;letter-spacing:0!important;font-size:12px!important;padding:5px 10px!important;bottom:10px!important;left:10px!important;box-shadow:0 4px 12px -6px rgba(0,0,0,.3)}
.wc-block-product .wp-block-post-title::before{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;text-transform:none!important;letter-spacing:0!important;font-size:12px!important;font-weight:600!important}
.wc-block-product .wishbtn{top:10px!important;bottom:auto!important;right:10px!important;width:34px!important;height:34px!important}
.wc-block-product .wc-block-components-product-button__button span{text-transform:none!important;letter-spacing:0!important;font-family:"DM Sans",sans-serif!important}
.wc-block-product .wp-block-post-title,.wc-block-product .wp-block-post-title a{font-family:"DM Sans",sans-serif!important;font-weight:600!important;letter-spacing:-.01em!important}
/* "Explore other ranges" text tiles: compact, clear, one call to action */
.entry-content a.wp-block-tiptip-hyperlink-group-block:not(:has(img)){aspect-ratio:auto!important;height:auto!important;min-height:132px;display:flex!important;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:14px;padding:22px 22px 20px!important;border-radius:18px!important;background:radial-gradient(circle at 90% 0%,rgba(255,255,255,.22),transparent 55%),linear-gradient(140deg,var(--color-bkg,#16234B),#16234B 120%)!important;box-shadow:0 18px 36px -26px rgba(22,35,75,.7)!important;text-decoration:none!important;transition:transform .15s,box-shadow .15s}
.entry-content a.wp-block-tiptip-hyperlink-group-block:not(:has(img)):hover{transform:translateY(-3px)}
.entry-content a.wp-block-tiptip-hyperlink-group-block:not(:has(img)) > p{text-align:left!important;font-family:"DM Sans",sans-serif!important;font-size:22px!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1.15!important;margin:0!important;color:#fff!important}
.entry-content a.wp-block-tiptip-hyperlink-group-block:not(:has(img)) .wp-block-buttons{display:none!important}
.entry-content a.wp-block-tiptip-hyperlink-group-block:not(:has(img))::after{content:"Shop now \2192";display:inline-flex;padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:700}

.wrighty-empty--soon{max-width:560px;margin:24px auto;padding:36px 28px!important;text-align:center;background:#fff;border:1px solid #e4e7ee;border-radius:20px;box-shadow:0 24px 50px -36px rgba(22,35,75,.55);font-family:"DM Sans",sans-serif}
.wrighty-empty--soon::before{content:"";display:block;width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:#fff1d6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7791f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3C/svg%3E") center/26px no-repeat}
.wrighty-empty--soon b{display:block;font-size:22px;font-weight:700;color:#16234B;letter-spacing:-.02em;margin-bottom:6px}
.wrighty-empty--soon p{font-size:15.5px;color:#3d4460;margin:0 0 18px;line-height:1.5}
.wrighty-empty--soon .btn{display:inline-flex;padding:13px 22px;border-radius:12px;background:#16234B;color:#fff!important;font-weight:700;font-size:15px;text-decoration:none!important}
.wrighty-list-top:has(+ div .wrighty-empty--soon) .wrighty-ctrls,.wrighty-list-grid:has(.wrighty-empty--soon) .wrighty-perpage-row{display:none!important}
.wrighty-empty--soon .btn{text-transform:none!important;letter-spacing:0!important;font-family:"DM Sans",sans-serif!important}
.wrighty-list-grid:has(.wrighty-empty--soon) .wrighty-list-top{display:none!important}

/* ===== Contact page ===== */
body.page-id-242 .wrighty-checkout{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body.page-id-242 .wrighty-checkout::before{content:"Contact us";display:block;font-size:clamp(30px,3.6vw,42px);font-weight:700;letter-spacing:-.02em;color:#16234B;margin:0 0 20px}
body.page-id-242 .card{border-radius:18px!important;border:1px solid #e4e7ee!important;box-shadow:0 1px 2px rgba(22,35,75,.04),0 18px 40px -30px rgba(22,35,75,.45)!important;padding:26px 28px!important}
body.page-id-242 .wrighty-lead-card h2,body.page-id-242 .card h3{font-family:inherit!important;font-weight:700!important;letter-spacing:-.02em!important;color:#16234B!important;text-transform:none!important}
body.page-id-242 .wrighty-lead-card h2{font-size:24px!important}
body.page-id-242 .card h3{font-size:19px!important;margin-bottom:12px!important}
body.page-id-242 .wrighty-lead-card label{text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:600!important;color:#3d4460!important;font-family:inherit!important}
body.page-id-242 .wrighty-lead-card input:not([type=checkbox]),body.page-id-242 .wrighty-lead-card select,body.page-id-242 .wrighty-lead-card textarea{font-family:inherit;font-size:15px!important;border:1.5px solid #cdd2dd!important;border-radius:10px!important;padding:12px 14px!important;background:#fff}
body.page-id-242 .wrighty-lead-card input:focus,body.page-id-242 .wrighty-lead-card select:focus,body.page-id-242 .wrighty-lead-card textarea:focus{outline:none;border-color:#16234B!important;box-shadow:0 0 0 3px rgba(22,35,75,.12)}
body.page-id-242 .wrighty-lead-card label:has(input[type=checkbox]){display:flex!important;align-items:flex-start;gap:10px;font-weight:400!important;font-size:14.5px!important;line-height:1.45}
body.page-id-242 .wrighty-lead-card input[type=checkbox]{width:18px;height:18px;accent-color:#16234B;margin-top:1px;flex:none}
body.page-id-242 .wrighty-lead-card .btn{text-transform:none!important;letter-spacing:0!important;font-family:inherit!important;font-size:16px!important;font-weight:700!important;padding:14px 26px!important;border-radius:12px!important}
body.page-id-242 .card a[href*="wrightytcg.com/"]:not(.btn){display:flex;align-items:center;justify-content:space-between;padding:11px 14px;margin:0 0 8px;border:1px solid #e4e7ee;border-radius:12px;color:#16234B!important;font-weight:600;font-size:15px;text-decoration:none!important;transition:border-color .15s,background .15s}
body.page-id-242 .card a[href*="wrightytcg.com/"]:not(.btn)::after{content:"\2192";color:#2E6CC6}
body.page-id-242 .card a[href*="wrightytcg.com/"]:not(.btn):hover{border-color:#16234B;background:#f6f8fc}
body.page-id-242 .wrighty-checkout::before{grid-column:1/-1}

/* Condition guide: colour per grade */
.wrighty-condition-item{position:relative;padding:18px 22px 18px 26px!important;margin-bottom:12px!important;border-left:6px solid var(--grade,#D4A659)!important;border-radius:14px!important}
.wrighty-condition-item h3{margin:0 0 4px!important;font-size:18px!important;display:flex;align-items:center;gap:10px}
.wrighty-condition-item h3::after{content:attr(data-g);}
.wrighty-condition-item p{margin:0!important}
body.page-id-244 .wrighty-condition-item:nth-of-type(1){--grade:#2c9a4b}
body.page-id-244 .wrighty-condition-item:nth-of-type(2){--grade:#1f9e8f}
body.page-id-244 .wrighty-condition-item:nth-of-type(3){--grade:#e0a92a}
body.page-id-244 .wrighty-condition-item:nth-of-type(4){--grade:#d63c3c}
body.page-id-244 .wrighty-condition-item:nth-of-type(n+5){--grade:#8a92ad}

/* ===== All site forms inside content cards (contact, track order, etc.) ===== */
.wrighty-blk .card{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.wrighty-blk .card:has(form){border-radius:18px!important;border:1px solid #e4e7ee!important;box-shadow:0 1px 2px rgba(22,35,75,.04),0 18px 40px -30px rgba(22,35,75,.45)!important;padding:26px 28px!important}
.wrighty-blk .card:has(form) h2,.wrighty-blk .card:has(form) h3{font-family:inherit!important;font-size:24px!important;font-weight:700!important;letter-spacing:-.02em!important;color:#16234B!important;text-transform:none!important}
.wrighty-blk .card form label{text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:600!important;color:#3d4460!important;font-family:inherit!important}
.wrighty-blk .card form input:not([type=checkbox]):not([type=radio]):not([type=submit]),.wrighty-blk .card form select,.wrighty-blk .card form textarea{font-family:inherit;font-size:15px!important;border:1.5px solid #cdd2dd!important;border-radius:10px!important;padding:12px 14px!important;background:#fff}
.wrighty-blk .card form input:focus,.wrighty-blk .card form select:focus,.wrighty-blk .card form textarea:focus{outline:none;border-color:#16234B!important;box-shadow:0 0 0 3px rgba(22,35,75,.12)}
.wrighty-blk .btn{text-transform:none!important;letter-spacing:0!important;font-family:"DM Sans",sans-serif!important;font-weight:700!important;border-radius:12px!important}
.wrighty-blk .card form .btn{font-size:16px!important;padding:14px 26px!important}
body.page-id-248 .wrighty-blk .card:has(form){width:100%;max-width:520px;margin-left:auto;margin-right:auto}

/* ===== My Account (logged in) ===== */
.woocommerce-account.logged-in .woocommerce{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.woocommerce-MyAccount-navigation ul{padding:10px!important;display:grid;gap:4px}
.woocommerce-MyAccount-navigation li{margin:0!important;padding:0!important;border:0!important}
.woocommerce-MyAccount-navigation li a{display:block;padding:11px 14px!important;border-radius:10px;font-family:inherit!important;font-size:15px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;color:#3d4460!important;text-decoration:none!important;transition:background .15s,color .15s}
.woocommerce-MyAccount-navigation li a:hover{background:#f2f4fa;color:#16234B!important}
.woocommerce-MyAccount-navigation li.is-active a{background:#16234B!important;color:#fff!important}
.woocommerce-MyAccount-navigation-link--downloads{display:none!important}
.woocommerce-MyAccount-navigation-link--customer-logout a{color:#c0392b!important}
.woocommerce-MyAccount-content{font-size:15.5px;line-height:1.6;color:#3d4460}
.woocommerce-MyAccount-content > p:first-child{font-size:20px;font-weight:700;color:#16234B}
.woocommerce-MyAccount-content a{color:#2E6CC6;font-weight:600;text-underline-offset:3px}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{font-family:inherit!important;text-transform:none!important;letter-spacing:-.01em!important;color:#16234B!important}
.wrighty-nlpop-form input[type=submit],.wrighty-nlpop-form .sib-default-btn{text-transform:none!important;letter-spacing:0!important;font-family:"DM Sans",sans-serif!important;font-size:16px!important;font-weight:700!important;border-radius:12px!important}
.wrighty-nlpop-eyebrow{text-transform:none!important;letter-spacing:.02em!important}
/* ============ Wrighty filter sidebar (components/category-hub.php) ============ */
.wf{--card:#fff;--sunk:#f6f7fa;--ink:#141a33;--ink2:#3d4460;--muted:#6f7690;--rule:#e4e7ee;--rule2:#cdd2dd;--navy:#16234B;--navy-soft:#eaedf7;--gold:#D4A659;--focus:#2E6CC6;--shad:0 1px 2px rgba(22,35,75,.05),0 12px 28px -18px rgba(22,35,75,.35);font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.45;color:var(--ink);-webkit-font-smoothing:antialiased}
.wf *{box-sizing:border-box;font-family:inherit}
.wf [hidden]{display:none!important}
.wf :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.wf .wrighty-filters__scroll button,.wf .wrighty-chips button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal;margin:0;min-height:0;border-radius:0}
.wf input{font:inherit;color:inherit}
.wf p{margin:0}
@media (min-width:861px){
.wrighty-filters.wf{background:var(--card);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shad);padding:0}
}
.wf .wrighty-filters__header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 14px;border-bottom:1px solid var(--rule);flex:none;height:auto;text-transform:none;letter-spacing:-.01em;color:var(--ink)}
.wf .wrighty-filters__header span{font-size:17px;font-weight:700}
.wf .wrighty-filters__close{font-size:22px;line-height:1;padding:4px 8px;border-radius:6px;color:var(--ink2);width:auto;height:auto}
.wf .wrighty-filters__active{padding:12px 18px 14px!important;border-bottom:1px solid var(--rule);flex:none;background:var(--sunk)}
.wf .wf-lbl{font-size:12.5px;font-weight:700;color:var(--ink2);display:block;margin-bottom:8px}
.wf .wrighty-chips{display:flex;flex-wrap:wrap;gap:6px}
.wf .chip{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:999px;padding:5px 9px 5px 12px;font-size:12.5px;font-weight:600;line-height:1.2}
.wf .chip .x{font-size:15px;line-height:1;opacity:.75}
.wf .chip:hover .x{opacity:1}
.wf .chip.none{background:transparent;color:var(--muted);border-color:transparent;font-weight:500;padding:2px 0}
.wf .wrighty-clear-all{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.wf .wrighty-filters__scroll{padding:0 0 10px!important;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0}
.wf details.fac{border-bottom:1px solid var(--rule)}
.wf details.fac:last-child{border-bottom:0}
.wf details.fac>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:15px 18px;user-select:none}
.wf details.fac>summary::-webkit-details-marker{display:none}
.wf details.fac>summary:hover .nm{color:var(--navy)}
.wf summary .nm{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);flex:1}
.wf summary .cnt{font-size:11.5px;font-weight:700;background:var(--gold);color:var(--navy);border-radius:999px;padding:1px 8px;min-width:22px;text-align:center}
.wf summary .chev{width:9px;height:9px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s ease;flex:none}
.wf details.fac[open]>summary .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.wf .body{padding:0 18px 16px}
.wf .opt{display:flex;align-items:center;gap:10px;padding:6px 8px;margin:0 -8px;border-radius:8px;cursor:pointer;line-height:1.3;font-size:14px;color:var(--ink2)}
.wf .opt:hover{background:var(--sunk)}
.wf .opt input{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;border:2px solid var(--rule2);border-radius:5px;background:var(--card);position:relative;cursor:pointer;margin:0;transition:background .12s,border-color .12s}
.wf .opt:hover input{border-color:var(--navy)}
.wf .opt input:checked{background:var(--navy);border-color:var(--navy)}
.wf .opt input:checked::after{content:"";position:absolute;left:4.5px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.wf .opt .t{flex:1;font-size:14px;font-weight:500;color:var(--ink2)}
.wf .opt input:checked~.t{color:var(--ink);font-weight:700}
.wf .opt .n{font-size:12px;font-weight:600;color:var(--muted);background:var(--sunk);border-radius:999px;padding:1px 8px;min-width:24px;text-align:center}
.wf .opt:hover .n{background:#fff}
.wf .opt .code{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--rule);border-radius:5px;padding:1px 5px;white-space:nowrap;flex:none}
.wf .grp{font-size:12px;font-weight:700;color:var(--muted);margin:14px 0 4px;padding-top:12px;border-top:1px dashed var(--rule)}
.wf .grp:first-child{margin-top:0;padding-top:0;border-top:0}
.wf .facsearch{width:100%;padding:10px 12px 10px 34px;border:1.5px solid var(--rule2);border-radius:8px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236f7690%27 stroke-width=%272.2%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%277%27/%3E%3Cpath d=%27m20 20-3.5-3.5%27/%3E%3C/svg%3E") no-repeat 11px center;font-size:14px;font-weight:500;margin:0 0 10px;box-shadow:none;height:auto}
.wf .facsearch:focus{border-color:var(--navy);outline:none}
.wf .facsearch::placeholder{color:var(--muted);font-weight:400}
.wf .nores{font-size:13.5px;color:var(--muted);padding:6px 0;line-height:1.45}
.wf .prow{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.wf .pin{flex:1;display:flex;align-items:center;gap:6px;border:1.5px solid var(--rule2);border-radius:8px;padding:8px 10px;background:var(--card);min-width:0}
.wf .pin:focus-within{border-color:var(--navy)}
.wf .pin span{font-size:14px;font-weight:700;color:var(--ink2)}
.wf .pin input{width:100%;border:0;background:none;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;min-width:0;padding:0;box-shadow:none;height:auto;-moz-appearance:textfield}
.wf .pin input::placeholder{color:var(--muted);font-weight:400}
.wf .pin input::-webkit-outer-spin-button,.wf .pin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wf .pin input:focus{outline:none}
.wf .pdash{color:var(--muted);font-size:13px;font-weight:600}
.wf .slider{position:relative;height:28px;margin:0 4px}
.wf .strack{position:absolute;top:12px;left:0;right:0;height:5px;background:var(--rule);border-radius:3px;cursor:pointer}
.wf .sfill{position:absolute;top:12px;height:5px;background:var(--navy);border-radius:3px;pointer-events:none;left:0;width:100%}
.wf .slider input[type=range]{position:absolute;top:6px;left:0;width:100%;height:16px;margin:0;padding:0;-webkit-appearance:none;appearance:none;background:none;pointer-events:none;border:0;box-shadow:none}
.wf .slider input[type=range]::-webkit-slider-runnable-track{background:none;border:0}
.wf .slider input[type=range]::-moz-range-track{background:none;border:0}
.wf .slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--navy);cursor:grab;box-shadow:0 2px 6px rgba(22,35,75,.25)}
.wf .slider input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--navy);cursor:grab}
.wf .pnote{font-size:13px;font-weight:600;color:var(--ink2);margin-top:8px;font-variant-numeric:tabular-nums}
.wf .energy{display:grid;grid-template-columns:1fr;gap:2px}
.wf .ec{display:flex;align-items:center;gap:8px;border:1.5px solid var(--rule2);border-radius:8px;padding:8px 10px;font-size:13px;font-weight:600;line-height:1.2;color:var(--ink2);background:var(--card);white-space:nowrap;cursor:pointer;margin:0;position:relative;transition:border-color .12s,background .12s}
.wf .ec:hover{border-color:var(--navy)}
.wf .ec input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;margin:0}
.wf .ec .d{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.wf .ec.on{border-color:var(--navy);background:var(--navy);color:#fff}
.wf .ec .ecn{font-size:11.5px;font-weight:600;color:var(--muted);margin-left:auto}
.wf .ec.on .ecn{color:#cfd6ea}
.wf .energy .ec{border-color:transparent;border-radius:8px;padding:6px 8px;margin:0 -8px;gap:10px;font-size:14px;font-weight:500;background:none}
.wf .energy .ec:hover{background:var(--sunk);border-color:transparent}
.wf .energy .ec .d{width:14px;height:14px}
.wf .energy .ec .ecn{font-size:12px;font-weight:600;color:var(--muted);background:var(--sunk);border-radius:999px;padding:1px 8px;min-width:24px;text-align:center}
.wf .energy .ec:hover .ecn{background:#fff}
.wf .energy .ec.on{background:var(--navy-soft);color:var(--navy);font-weight:700;border-color:transparent}
.wf .energy .ec.on .ecn{background:#fff;color:var(--navy)}
.wf .ec:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.wf .langs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wf .lg{position:relative;display:block;border:1.5px solid var(--rule2);border-radius:8px;padding:9px 6px;font-size:14px;font-weight:700;color:var(--ink2);background:var(--card);text-align:center;line-height:1.2;cursor:pointer;margin:0;transition:border-color .12s,background .12s}
.wf .lg:hover{border-color:var(--navy);color:var(--navy)}
.wf .lg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;margin:0}
.wf .lg.on{background:var(--navy);border-color:var(--navy);color:#fff}
.wf .lg:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.wf .langnote{margin-top:10px;font-size:13px;line-height:1.45;color:var(--ink2);background:var(--sunk);border-radius:8px;padding:9px 11px}
.wf .era{border:1px solid var(--rule);border-radius:10px;margin-top:8px;overflow:hidden}
.wf .era:first-child{margin-top:0}
.wf .erahead{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;line-height:1.3;background:var(--sunk)!important}
.wf .erahead:hover .en2{color:var(--navy)}
.wf .erahead .ec2{width:8px;height:8px;flex:none;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);transform:rotate(-45deg);transition:transform .16s ease}
.wf .erahead[aria-expanded="true"] .ec2{transform:rotate(45deg)}
.wf .erahead .en2{flex:1;font-size:14px;font-weight:700;color:var(--ink)}
.wf .erahead .n{font-size:12px;font-weight:600;color:var(--muted);background:#fff;border-radius:999px;padding:1px 8px;min-width:24px;text-align:center}
.wf .erahead .pick{font-size:11.5px;font-weight:700;background:var(--gold);color:var(--navy);border-radius:999px;padding:1px 8px;white-space:nowrap}
.wf .erabody{padding:4px 6px 6px;border-top:1px solid var(--rule)}
.wf .erabody .opt{margin:0;padding:6px;gap:8px}
.wf .erabody .opt .t{font-size:13.5px;min-width:0}
.wf .erabody .opt .code{font-size:10px;padding:1px 4px}
.wf .erabody .opt .n{min-width:20px;padding:1px 6px;flex:none}
.wf .opt .sub{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px;line-height:1.3}
.wf .opt input:checked~.t .sub{font-weight:500;color:var(--muted)}
.wrighty-list-grid .wrighty-plp-title{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:30px;font-weight:700;letter-spacing:-.02em;color:#16234B;margin:0 0 4px}
.wrighty-list-grid .wrighty-plp-desc{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:15px;color:#3d4460}
.wrighty-list-grid .wf-crumbs{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:#6f7690;padding:4px 0 14px;margin:0}
.wrighty-list-grid .wf-crumbs a{color:#6f7690;font-weight:500;text-decoration:none}
.wrighty-list-grid .wf-crumbs a:hover{color:#16234B;text-decoration:underline;text-underline-offset:3px}
.wrighty-list-grid .wf-crumbs .sep{color:#b3b9c8;font-size:16px;line-height:1}
.wrighty-list-grid .wf-crumbs b{color:#16234B;font-weight:700}
.wrighty-list-grid .wrighty-list-top{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#fff;border:1px solid #e4e7ee;border-radius:12px;padding:10px 12px 10px 18px;box-shadow:0 1px 2px rgba(22,35,75,.05),0 12px 28px -20px rgba(22,35,75,.35);margin-bottom:18px;gap:12px}
.wrighty-list-grid .wrighty-res{font-size:15px;font-weight:500;color:#3d4460}
.wrighty-list-grid .wrighty-res b{color:#141a33;font-weight:700}
.wrighty-list-grid .wrighty-ctrls{gap:18px}
.wrighty-list-grid .wrighty-ctrls label,.wrighty-list-grid .wrighty-perpage-row label{font-family:inherit;text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:#3d4460}
.wrighty-list-grid .wrighty-perpage-row{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.wrighty-list-grid .wrighty-instock-toggle{gap:10px;cursor:pointer;user-select:none}
.wrighty-list-grid .wrighty-instock-toggle input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:999px;background:#cdd2dd;position:relative;margin:0;cursor:pointer;transition:background .15s;flex:none}
.wrighty-list-grid .wrighty-instock-toggle input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.wrighty-list-grid .wrighty-instock-toggle input:checked{background:#16234B}
.wrighty-list-grid .wrighty-instock-toggle input:checked::after{transform:translateX(16px)}
.wrighty-list-grid .wrighty-instock-toggle input:focus-visible{outline:2px solid #2E6CC6;outline-offset:2px}
.wrighty-list-grid .wrighty-sort{gap:10px}
.wrighty-list-grid .wrighty-sort select{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:14px;font-weight:600;color:#141a33;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M2 4l4 4 4-4%27 fill=%27none%27 stroke=%27%2316234B%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat right 14px center;border:1.5px solid #cdd2dd;border-radius:10px;padding:10px 40px 10px 14px;min-width:200px;cursor:pointer;line-height:1.2;transition:border-color .15s}
.wrighty-list-grid .wrighty-sort select:hover,.wrighty-list-grid .wrighty-sort select:focus{border-color:#16234B;outline:none}
.wrighty-list-grid .wrighty-perpage{border:1.5px solid #cdd2dd;border-radius:10px}
.wrighty-list-grid .wrighty-perpage button{font-family:inherit;font-size:14px;font-weight:600;padding:8px 14px;color:#3d4460}
.wrighty-list-grid .wrighty-perpage button.on{background:#16234B;color:#fff}
.wrighty-list-grid .wrighty-empty{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px;color:#3d4460;line-height:1.5}
.wrighty-list-grid .wrighty-empty a{color:#16234B;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.wrighty-list-grid .wrighty-list-top{padding:12px}.wrighty-list-grid .wrighty-ctrls{width:100%;justify-content:space-between}.wrighty-list-grid .wrighty-sort select{min-width:0}}
@media (prefers-reduced-motion:reduce){.wf *{transition:none!important}}

/* ============ Back to top button (all pages - functions.php wp_footer) ============ */

.wrighty-back-to-top {
    align-items: center;
    background: var(--paper);
    border: 2px solid var(--gold-2);
    border-radius: 50%;
    bottom: max(24px, env(safe-area-inset-bottom, 0px) + 12px);
    box-shadow: var(--shadow);
    color: var(--gold-2);
    cursor: pointer;
    display: flex;
    height: 48px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 24px;
    transform: translateY(12px);
    transition: opacity .2s, transform .2s, background .16s, border-color .16s, color .16s;
    width: 48px;
    z-index: 400;
}

.wrighty-back-to-top svg {
    display: block;
    height: 20px;
    width: 20px;
}

.wrighty-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.wrighty-back-to-top:hover,
.wrighty-back-to-top:focus-visible {
    background: var(--gold-2);
    color: var(--paper);
}

.wrighty-back-to-top:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .wrighty-back-to-top {
        bottom: max(16px, env(safe-area-inset-bottom, 0px) + 8px);
        height: 44px;
        right: 16px;
        width: 44px;
    }

    .wrighty-back-to-top svg {
        height: 18px;
        width: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wrighty-back-to-top {
        transition: opacity .2s;
    }
}