/*
 Theme Name: seoCon
 Theme URI:  https://www.seocon.at
 Author:     seoCon
 Author URI: https://www.seocon.at
 Template:   bricks
 Version:    1.0
*/

body.single-product .shop-link > .brx-submenu-toggle > a, body.single-post .blog-link, body.single-seoc-stores .stores-link, body.single-grouped .looks-link {
    text-decoration: underline;
}
body.single-grouped .shop-link > .brx-submenu-toggle > a {
    text-decoration: none;
}
@media(max-width: 767px) {
    body * {
        word-wrap: break-word;
        -webkit-hyphens: auto;
        moz-hyphens: auto;
        hyphens: auto;
    }
}

/* Header mega-menu dropdown — subtle shadow on the dropped panel */
.oska--header-nav .brx-dropdown-content {
    background: #ffffff;
    box-shadow: 0 12px 24px -4px rgba(20, 20, 20, 0.07);
}

/* Header cart icon + badge */
.oska--cart-toggle.brxe-block {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: inherit;
    width: auto;
}
.oska--cart-toggle > i {
    font-size: 22px;
    line-height: 1;
}
.oska--cart-toggle .brxe-shortcode {
    position: static;
    line-height: 0;
}
.oska-cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #141414;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
.oska-cart-count.hidden {
    display: none;
}

/* Header Shop mega-menu list — rendered by [oska_header_shop_menu] */
.oska--mm-links {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 15px;
    column-gap: 20px;
}
.oska--mm-links .oska--mm-link {
    list-style: none;
    width: calc(50% - 10px);
    margin: 0;
    padding: 0;
}
.oska--mm-links .oska--mm-link > a {
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    text-decoration: none;
    color: inherit;
}
.oska--mm-links .oska--mm-link > a:hover,
.oska--mm-links .oska--mm-link.current-menu-item > a {
    text-decoration: underline;
}

/* Mobile header layout (≤991px): hamburger left, logo center, cart right */
.oska--header-mobile-toggle {
    display: none;
    cursor: pointer;
    padding: 8px;
    color: #141414;
}
@media (max-width: 991px) {
    .oska--header-mobile-toggle {
        display: inline-flex !important;
        order: 1;
        font-size: 24px;
    }
    #brxe-nh005 {
        display: none !important;
    }
    #brxe-nh015,
    #brxe-nh017,
    .oska--header-search {
        display: none !important;
    }
    .oska--header-con.brxe-container {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        column-gap: 0 !important;
        height: 76px !important;
    }
    .oska--header-left.brxe-block {
        order: 2 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        margin: 0 !important;
    }
    .oska--header-right.brxe-block {
        order: 3 !important;
        width: auto !important;
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        column-gap: 0 !important;
    }
}

/* ===== Mobile nav drawer (.nav-overlay offcanvas) -- rebuilt 2026-06-02 ===== */
/* nvcnt (.brx-offcanvas-inner / #brxe-nvcnt): flex column with a scrolling
   body and a pinned footer. Horizontal gutter (48/30) comes from the
   shared offcanvas-content class (qkndsv); regions below pad vertically only. */
/* The content shell carries BOTH .oska--offcanvas-content and (via Bricks)
   .brx-offcanvas-inner on the SAME node. Bricks' default .brx-offcanvas-inner
   is display:flex with no direction (=> row), and the qkndsv typed-control
   forces .oska--offcanvas-content{display:block}. Target the content block by
   its OWN class (robust even if Bricks stops merging the inner class) and
   force a full-width flex COLUMN so head -> body -> foot stack vertically. */
.nav-overlay .oska--offcanvas-content,
.nav-overlay .brx-offcanvas-inner.oska--offcanvas-content {
    display: flex !important;
    flex-direction: column !important;
    /* MOBILE FIX (2026-06-02): the content node is also a .brxe-block, and Bricks
       core applies `@media (max-width:767px){.brxe-block{flex-wrap:wrap}}`. With
       flex-direction:column + a bounded height (100%) + flex-wrap:wrap, the tall
       drawer body WRAPS into extra columns to the right (Menu top-left, body as a
       clipped right column) on phones. Force nowrap so head->body->foot stay in ONE
       vertical column. This is the property the previous pass was missing. */
    flex-wrap: nowrap !important;
    width: 100%;
    /* MOBILE FIX (2026-06-02): bound the fixed offcanvas panel to the VISIBLE
       (dynamic) viewport, not the large layout viewport. The previous value
       `height:100%` won (via the .brx-offcanvas-inner.oska--offcanvas-content
       compound selector) over Bricks' own `height:calc(var(--bricks-vh,1vh)*100)`.
       On a real phone `100%` of a position:fixed node resolves to the LARGE
       layout viewport (URL-bar height included), so the lower region (SHOP
       megamenu tail + MORE links + EN.DE footer) rendered BELOW the visible
       area and was physically unreachable, while the body thought it fit and
       did not scroll. dvh / --bricks-vh track the visible area; max-height
       clamps the panel even if Bricks adds a top admin-bar offset. */
    height: 100vh; /* fallback for engines without dvh */
    height: calc(var(--bricks-vh, 1vh) * 100); /* Bricks JS-driven visible height */
    height: 100dvh; /* modern dynamic viewport -- excludes mobile browser chrome */
    max-height: 100vh;
    max-height: calc(var(--bricks-vh, 1vh) * 100);
    max-height: 100dvh;
}

/* Scrolling body: search -> My Account -> Shop -> More */
.oska--drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* MOBILE FIX (2026-06-02): keep scroll chaining inside the drawer body */
}

/* Pinned footer (language switcher) -- held at the bottom by the flex
   column + body flex:1, NOT position:sticky. */
.oska--drawer-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--line);
    padding: 16px 0;
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Section wrappers (Shop, More) */
.oska--drawer-section {
    padding: 24px 0 8px;
    border-top: 1px solid var(--line);
}
.oska--drawer-sec-head {
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1;
}

/* My Account: a single top row with an icon + label + divider */
#brxe-nvi6 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    list-style: none;
    margin: 0;
}
#brxe-nvi6 > .brxe-icon {
    font-size: 20px;
    line-height: 1;
    color: var(--ink);
    flex: 0 0 auto;
}
#brxe-nvi6 > a {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-decoration: none;
}
#brxe-nvi6 > a:hover { text-decoration: underline; }

/* MORE section: 2-column grid of links (Shop section stays full-width) */
ul.oska--drawer-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 4px;
}
ul.oska--drawer-grid > li {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.oska--drawer-grid > li > a {
    display: block;
    padding: 8px 0;
    font-size: 1.0625rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration: none;
}
ul.oska--drawer-grid > li > a:hover { text-decoration: underline; }

/* Shop section megamenu keeps its own column layout (.oska--mm-cols) */
.oska--drawer-shop .oska--mm-cols {
    justify-content: flex-start;
    column-gap: 40px;
}

/* Inline FiboSearch input at the top of the drawer body */
.brxe-nvfs {
    margin: 0 0 8px;
}
.nav-overlay .dgwt-wcas-search-wrapp {
    margin: 4px 0 8px;
}

/* Desktop header search input — slim by default, expands on focus.
   The wrapper takes a CONSTANT slot in nh013 so neither the logo,
   center nav, nor the mega menu shift when the input expands.
   The FiboSearch widget inside is absolutely positioned, anchored to the
   right edge of the slot, and animates its width on focus. */
@media (min-width: 992px) {
    /* Center the nav using grid — sides share remaining space dynamically,
       so a wider search slot or longer nav doesn't push items to a new line. */
    .oska--header-con.brxe-container {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        column-gap: 16px;
    }
    .oska--header-left.brxe-block,
    .oska--header-right.brxe-block {
        flex: initial !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .oska--header-left.brxe-block {
        justify-self: start !important;
    }
    .oska--header-right.brxe-block {
        justify-self: end !important;
        justify-content: flex-end !important;
    }
    .oska--header-search {
        flex: 0 0 340px !important;
        width: 340px !important;
        margin-right: 12px;
        position: relative;
        z-index: 2;
        align-self: center;
        height: 40px;
    }
    .oska--header-search > .dgwt-wcas-search-wrapp {
        position: absolute !important;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 130px;
        transition: width 0.25s ease;
    }
    .oska--header-search:focus-within > .dgwt-wcas-search-wrapp {
        width: 340px;
    }
    .oska--header-search .dgwt-wcas-search-form,
    .oska--header-search .dgwt-wcas-sf-wrapp,
    .oska--header-search .dgwt-wcas-search-input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
}
/* Shop submenu (WC categories) inside the drawer — 2-column layout */
.nav-overlay .oska--mm-links {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    row-gap: 4px !important;
    column-gap: 12px !important;
    margin: 0 0 16px;
    padding-left: 0;
    list-style: none;
}
.nav-overlay .oska--mm-col-hd { margin-bottom: 8px; }
.nav-overlay .oska--mm-link,
.nav-overlay .oska--mm-links .oska--mm-link {
    width: auto !important;
    list-style: none;
}
.nav-overlay .oska--mm-links .oska--mm-link > a,
.nav-overlay .oska--mm-links a {
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #141414 !important;
    padding: 6px 0 !important;
    display: block !important;
    text-decoration: none !important;
}

/* Full mega-menu component instance inside the drawer */
.nav-overlay .oska--mm,
.nav-overlay .brxe-b4f151 {
    display: flex !important;
    flex-direction: column !important;
    column-gap: 0 !important;
    row-gap: 24px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px 0 32px !important;
    margin-bottom: 16px !important;
    align-items: stretch !important;
}
.nav-overlay .oska--mm > .brxe-block,
.nav-overlay [class*="brxe-mc"].brxe-block {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
}
/* Column section headers (Collection / Accessoires / Specials / Featured) */
.nav-overlay [class^="brxe-m"][class$="he"],
.nav-overlay [class*=" brxe-m"][class*="he "] {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #999 !important;
}
/* Specials list (m3u) */
.nav-overlay .brxe-m3u {
    list-style: none !important;
    margin: 8px 0 0 !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    row-gap: 4px !important;
}
.nav-overlay .brxe-m3u li {
    list-style: none !important;
    width: 100% !important;
    margin: 0 !important;
}
.nav-overlay .brxe-m3u a {
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 6px 0 !important;
    color: #141414 !important;
}
/* Featured tiles (m4g grid + mft1/mft2 gradient cards) */
.nav-overlay .brxe-m4g {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding-left: 0 !important;
    margin: 8px 0 0 !important;
}
.nav-overlay .brxe-mft1,
.nav-overlay .brxe-mft2 {
    aspect-ratio: 3/4 !important;
    overflow: hidden !important;
    position: relative !important;
    cursor: pointer !important;
}
.nav-overlay .brxe-mft1 {
    background: linear-gradient(135deg, #d8c9b4 0%, #b8a484 100%) !important;
}
.nav-overlay .brxe-mft2 {
    background: linear-gradient(135deg, #2a2724 0%, #4a4540 100%) !important;
}
.nav-overlay .brxe-mft1 > a,
.nav-overlay .brxe-mft2 > a {
    position: absolute !important;
    left: 14px !important;
    bottom: 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}
.nav-overlay .brxe-mft1 > a {
    color: #1a1a1a !important;
}
.nav-overlay .brxe-mft2 > a {
    color: #ffffff !important;
}

/* See more loop component (smg) inside drawer — compact 2-col blog cards */
.nav-overlay .brxe-587699 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 12px 0 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}
.nav-overlay [class*="brxe-smcl"] {
    cursor: pointer !important;
    margin: 0 !important;
}
.nav-overlay [class*="brxe-smli"] {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #efe9e0 !important;
    display: block !important;
    line-height: 0 !important;
    margin-bottom: 6px !important;
}
.nav-overlay [class*="brxe-smli"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.nav-overlay [class*="brxe-smli"] figcaption {
    display: none !important;
}
.nav-overlay [class*="brxe-smlt"] {
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #999 !important;
    margin-bottom: 0 !important;
}
.nav-overlay [class*="brxe-smlh"] {
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: #141414 !important;
    text-decoration: none !important;
}

/* Brand mark <sup> sizing — unified across surfaces (card eyebrow, PDP h1, cart, order, FiboSearch). Emitted via .oska--brand-mark wrapper from seoc_display_prod_brand + seoc_format_product_name_with_brand. */
.oska--brand-mark sup {
  font-weight: 400;
  font-size: 0.6em;
  vertical-align: 0.15em;
  letter-spacing: 0;
}

/* Task #78 — PDP add-to-cart success notice layout (supersedes Task #76 CSS) */
/* (1) Apply base styling to ALL WC notices (success/info/error) */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    padding-left: 16px !important;  /* defeat WC default 3.5em icon-room padding */
    list-style: none;
    margin-left: 0;
}
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
    display: none;  /* hide WC's ::before icon that the left-padding was reserving room for */
}
.woocommerce-notices-wrapper ul,
.woocommerce-notices-wrapper li {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

/* (2) The custom add-to-cart success message: text above + buttons below */
.woocommerce-message:has(.oska--cart-msg-buttons) {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
.oska--cart-msg-text {
    margin: 0;
}
.oska--cart-msg-buttons {
    display: flex;
    gap: 12px;
}
.oska--cart-msg-buttons > .oska--cart-msg-btn {
    flex: 1 1 0;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* (3) Mobile (≤768px): stack the buttons vertically */
@media (max-width: 768px) {
    .oska--cart-msg-buttons {
        flex-direction: column;
    }
}

/* (4) Ink fill on the Go to checkout button (monochrome funnel CTA, 2026-06-01) */
.oska--cart-msg-btn.go-to-checkout {
    background-color: var(--color-3, #141414) !important;
    border-color: var(--color-3, #141414) !important;
    color: #ffffff !important;
}
.oska--cart-msg-btn.go-to-checkout:hover {
    background-color: var(--color-3, #141414) !important;
    border-color: var(--color-3, #141414) !important;
    color: #ffffff !important;
    opacity: 0.92;
}

/* ============================================================
 * Checkout page pivot — Task #32 (checkout) 2026-05-30 — /checkout/
 * Stock-WooCommerce checkout markup (native #customer_details fields,
 * stock woocommerce-checkout-review-order-table, stock ul.wc_payment_methods)
 * inside the shared shop-page shell (.shop + .shop__crumbs/.shop__h1).
 * Ported faithfully from claude-design shop.css; scoped under .shop so the
 * tokens come from the .shop block below (no global :root dependency).
 * Supersedes the bespoke .ck__/.ck checkout skin (removed this session).
 *
 * NOTE: on OSKA the <form name="checkout"> wraps the whole Bricks shell
 * (crumbs+h1+grid), so the 2-col grid lives on the inner .checkout__grid
 * container (the Bricks grid div), NOT on form.checkout as in the raw design.
 * ============================================================ */

/* 2-col checkout grid (form column left, order-review right) */
.shop .checkout__grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:start }
@media (min-width:880px){ .shop .checkout__grid{ grid-template-columns:minmax(0,1fr) 360px; gap:48px } }
@media (min-width:1100px){ .shop .checkout__grid{ grid-template-columns:minmax(0,1fr) 400px; gap:72px } }
@media (min-width:1280px){ .shop .checkout__grid{ grid-template-columns:minmax(0,1fr) 440px; gap:96px } }

/* ── Form primitives (native WC .form-row fields) ───────────── */
.shop .form-row{ margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0 }
.shop .form-row > label,.shop .woocommerce-form__label{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); line-height:1.3;
}
.shop .form-row abbr.required,.shop .form-row .required{ color:var(--ink); text-decoration:none; border:0 }
.shop .form-row .optional{ color:var(--muted); font-weight:400; letter-spacing:.04em; text-transform:none }
.shop .woocommerce-input-wrapper{ display:block; width:100% }
.shop .input-text,.shop .form-row select,.shop .form-row textarea,.shop #order_comments{
  appearance:none; width:100%; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink);
  padding:0 14px; height:48px; font:inherit; font-size:15px; line-height:1; border-radius:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.shop textarea.input-text,.shop #order_comments{ height:auto; min-height:120px; padding:14px; line-height:1.5; resize:vertical }
.shop .input-text:hover,.shop .form-row select:hover,.shop .form-row textarea:hover{ border-color:var(--ink) }
.shop .input-text:focus,.shop .form-row select:focus,.shop .form-row textarea:focus{
  outline:0; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);
}
.shop .input-text::placeholder,.shop .form-row textarea::placeholder{ color:var(--muted) }
.shop .form-row select,.shop select.country_select,.shop select.state_select{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23141414' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
}
/* select2 (enhanced country/state selects) align to the 48px field box */
.shop .select2-container .select2-selection--single{ height:48px; border:1px solid var(--line-strong); border-radius:0 }
.shop .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:46px; padding-left:14px; color:var(--ink) }
.shop .select2-container--default .select2-selection--single .select2-selection__arrow{ height:46px; right:10px }
.shop .select2-container--default.select2-container--focus .select2-selection--single{ border-color:var(--ink) }
.shop .select2-dropdown{ border-color:var(--line-strong); border-radius:0 }
/* WC validation states */
.shop .form-row.woocommerce-invalid .input-text,.shop .form-row.woocommerce-invalid select{ border-color:var(--ink) }

/* checkbox / radio rows (ship-to-different, terms) — label is a flex row */
.shop .woocommerce-form__label-for-checkbox,.shop .checkbox{
  display:flex; flex-direction:row; align-items:flex-start; gap:12px; cursor:pointer; text-transform:none; letter-spacing:0;
  font-size:14px; font-weight:400; color:var(--ink); line-height:1.45;
}
.shop input[type=checkbox]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:0 0 18px; margin:1px 0 0;
  border:1px solid var(--line-strong); background:var(--bg); display:inline-grid; place-items:center; cursor:pointer;
}
.shop input[type=checkbox]:hover{ border-color:var(--ink) }
.shop input[type=checkbox]:checked{ background:var(--ink); border-color:var(--ink) }
.shop input[type=checkbox]:checked::after{
  content:""; width:5px; height:9px; border:solid var(--bg); border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
.shop #payment input[type=radio],.shop .wc_payment_method input[type=radio]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:0 0 18px;
  border:1px solid var(--line-strong); border-radius:50%; background:var(--bg); cursor:pointer;
  display:inline-grid; place-items:center; vertical-align:-3px; margin:0 8px 0 0;
}
.shop #payment input[type=radio]:checked{ border-color:var(--ink) }
.shop #payment input[type=radio]:checked::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink) }

/* ── Customer details (left) ────────────────────────────────── */
.shop #customer_details{ min-width:0 }
/* Bricks renders #customer_details as .col2-set > .col-1/.col-2; flatten so the
   billing column fills the left grid track (shipping col is empty on OSKA). */
.shop #customer_details.col2-set{ display:block }
.shop #customer_details .col-1,.shop #customer_details .col-2{ width:100%; max-width:none; float:none }
.shop .woocommerce-billing-fields > h3,
.shop .woocommerce-additional-fields > h3,
.shop #order_review_heading{
  margin:0 0 20px; padding:0 0 12px; border-bottom:1px solid var(--line);
  font-size:16px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.shop .woocommerce-additional-fields{ margin-top:40px }
.shop .woocommerce-billing-fields__field-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px }
.shop .woocommerce-billing-fields__field-wrapper .form-row{ grid-column:1 / -1 }
.shop .woocommerce-billing-fields__field-wrapper .form-row-first{ grid-column:1 }
.shop .woocommerce-billing-fields__field-wrapper .form-row-last{ grid-column:2 }
@media (max-width:560px){
  .shop .woocommerce-billing-fields__field-wrapper{ grid-template-columns:1fr }
  .shop .woocommerce-billing-fields__field-wrapper .form-row-first,
  .shop .woocommerce-billing-fields__field-wrapper .form-row-last{ grid-column:1 / -1 }
}
.shop .woocommerce-additional-fields .form-row{ width:100% }
.shop #customer_details .clear{ clear:both }

/* ── Order review (right) ───────────────────────────────────── */
.shop .checkout__col-right{ min-width:0 }
@media (min-width:960px){ .shop .checkout__col-right{ position:sticky; top:24px } }
.shop #order_review{ background:var(--color-2); padding:32px }
@media (min-width:960px){ .shop #order_review{ padding:36px } }
.shop .woocommerce-checkout-review-order-table{ width:100%; border-collapse:collapse; margin:0 0 24px; table-layout:fixed }
.shop .woocommerce-checkout-review-order-table thead th{
  text-align:left; padding:0 0 14px; border-bottom:1px solid var(--ink);
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.shop .woocommerce-checkout-review-order-table thead .product-total{ text-align:right }
.shop .woocommerce-checkout-review-order-table .cart_item td{
  padding:18px 0; border-bottom:1px solid var(--line-strong); vertical-align:top; font-size:14px;
}
.shop .woocommerce-checkout-review-order-table .product-name{ color:var(--ink); font-weight:500; width:60% }
.shop .woocommerce-checkout-review-order-table .product-name .product-quantity{ color:var(--ink-soft); font-weight:400 }
.shop .woocommerce-checkout-review-order-table .product-name .variation{
  margin:6px 0 0; padding:0; font-size:12px; color:var(--ink-soft); font-weight:400;
}
.shop .woocommerce-checkout-review-order-table .product-name .variation dt{ display:inline; margin:0; font-weight:400 }
.shop .woocommerce-checkout-review-order-table .product-name .variation dd{ display:inline; margin:0 12px 0 4px }
.shop .woocommerce-checkout-review-order-table .product-name .variation dd p{ display:inline; margin:0 }
.shop .woocommerce-checkout-review-order-table .product-total{ text-align:right; white-space:nowrap; width:40% }
.shop .woocommerce-checkout-review-order-table tfoot th{
  text-align:left; padding:12px 0; border-bottom:1px solid var(--line-strong); font-size:13px; color:var(--ink-soft); font-weight:400;
}
.shop .woocommerce-checkout-review-order-table tfoot td{
  text-align:right; padding:12px 0; border-bottom:1px solid var(--line-strong); color:var(--ink); white-space:normal;
}
.shop .woocommerce-checkout-review-order-table tfoot .order-total th{
  border-bottom:0; padding-top:16px; color:var(--ink); font-weight:500; text-transform:uppercase; letter-spacing:.08em;
}
.shop .woocommerce-checkout-review-order-table tfoot .order-total td{
  border-bottom:0; border-top:1px solid var(--line-strong); padding-top:16px; font-size:20px; font-weight:500;
}
.shop .woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount{ font-size:20px; white-space:nowrap }
.shop .woocommerce-checkout-review-order-table tfoot small,
.shop .woocommerce-checkout-review-order-table tfoot .includes_tax{ color:var(--muted); font-weight:400 }
.shop .woocommerce-checkout-review-order-table tfoot .order-total td{ position:relative }
.shop .woocommerce-checkout-review-order-table tfoot .order-total td .includes_tax,.shop .woocommerce-checkout-review-order-table tfoot .order-total td small{ position:absolute; top:100%; right:0; left:auto; margin-top:6px; display:block; white-space:normal; text-align:right; line-height:1.4; font-size:12px; width:max-content; max-width:min(340px,78vw); color:var(--muted) }

/* ── Payment (stock ul.wc_payment_methods) ──────────────────── */
/* Bug #3 (second audit 2026-05-30): payment method must sit INLINE in the grey
   #order_review box (design), not as a detached white bordered card. Drop the
   white bg + border on .wc_payment_method; make the box transparent; tidy the
   radio/label/description spacing so it reads as part of the grey summary. */
.shop #payment{ margin-top:24px; background:transparent }
.shop #payment .payment_methods{ list-style:none; margin:0 0 8px; padding:0 }
.shop #payment .wc_payment_method{ background:var(--bg); border:1px solid var(--line-strong); padding:18px 20px }
.shop #payment .wc_payment_method + .wc_payment_method{ margin-top:8px }
.shop #payment .wc_payment_method > label{
  display:flex; align-items:center; gap:0; padding:0; cursor:pointer;
  font-size:14px; font-weight:500; color:var(--ink); text-transform:none; letter-spacing:0;
}
.shop #payment .wc_payment_method > label img{ margin-left:auto; max-height:24px }
.shop #payment .payment_box{ padding:8px 0 0 30px; margin:6px 0 0; background:transparent; border:0 }
.shop #payment .payment_box::before{ display:none }
.shop #payment .payment_box p{ margin:0; font-size:13px; line-height:1.55; color:var(--ink-soft) }

.shop #payment .woocommerce-privacy-policy-text p,
.shop #payment .woocommerce-terms-and-conditions-wrapper{ margin:20px 0 0 }
.shop #payment .woocommerce-privacy-policy-text p{ font-size:12px; line-height:1.55; color:var(--ink-soft) }
.shop #payment .woocommerce-terms-and-conditions-wrapper .form-row{ margin-top:16px }
.shop #payment .place-order{ margin:0 }
.shop #payment .place-order .button{ width:100%; height:56px; margin-top:20px; font-size:13px; letter-spacing:.18em }
.shop #payment .place-order .button svg{ width:14px; height:14px }

/* secure line */
.shop .checkout__secure{
  margin:14px 0 0; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.shop .checkout__secure svg{ width:12px; height:12px; flex:0 0 auto }
/* end checkout pivot 2026-05-30 */
/* ============================================================
 * Order-confirmation redesign -- Task #32 (order-confirmation) 2026-05-30
 * Renders via woocommerce/checkout/thankyou.php + order/order-details*.php
 * overrides, inside the Bricks woocommerce-checkout-thankyou element on
 * templates 525 (EN) / 286186 (DE).
 * Design ref: claude-design/pages/order-confirmation.html (oc__ namespace).
 * Self-contained --oc-* vars (mirrors the .ck self-contained pattern; the
 * design's --ink/--line/etc are NOT in :root on this site).
 * The .btn rule is scoped to .oc so it does not leak to the global namespace.
 * ============================================================ */
.oc{
  --oc-c1:#fff; --oc-c9:#000;
  --oc-ink:#141414; --oc-ink-soft:#666; --oc-muted:#aaa;
  --oc-line:#eee; --oc-line-strong:#ccc; --oc-bg:#fff;
  --oc-pad:20px;
  max-width:1440px;
  margin:0 auto;
  padding:32px var(--oc-pad) 96px;
  font-size:14px; line-height:1.5; color:var(--oc-ink);
}
@media (min-width:640px){ .oc{ --oc-pad:32px } }
@media (min-width:960px){ .oc{ --oc-pad:48px; padding:56px var(--oc-pad) 128px } }
@media (min-width:1280px){ .oc{ --oc-pad:64px } }
.oc a{ color:var(--oc-ink); text-underline-offset:3px }

/* --- Hero confirmation --- */
.oc__hero{
  display:flex; flex-direction:column; align-items:center;
  gap:20px; text-align:center;
  padding:0 0 48px;
  border-bottom:1px solid var(--oc-line);
  margin:0 0 48px;
}
.oc__check{
  width:64px; height:64px; border-radius:50%;
  border:1.5px solid var(--oc-ink);
  display:grid; place-items:center; color:var(--oc-ink);
}
.oc__check svg{ width:28px; height:28px }
.oc__title{
  margin:0; font-size:clamp(36px,5vw,56px);
  line-height:1; font-weight:300; letter-spacing:-0.02em;
}
.oc__sub{
  margin:0; max-width:48ch; color:var(--oc-ink-soft);
  font-size:16px; line-height:1.6;
}
.oc__sub strong{ color:var(--oc-ink); font-weight:500 }

/* --- Meta strip --- */
.oc__meta{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--oc-line); border:1px solid var(--oc-line);
  margin:0 0 48px;
}
@media (min-width:640px){ .oc__meta{ grid-template-columns:1fr 1fr } }
@media (min-width:900px){ .oc__meta{ grid-template-columns:repeat(4,1fr) } }
.oc__meta-cell{
  background:var(--oc-bg); padding:20px 24px;
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.oc__meta-cell dt{
  margin:0; font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--oc-ink-soft);
}
.oc__meta-cell dd{
  margin:0; font-size:16px; font-weight:500;
  color:var(--oc-ink); word-break:break-word;
}
.oc__meta-cell dd.tab{ font-variant-numeric:tabular-nums }

/* --- Section heading --- */
.oc__sec-h{
  margin:0 0 20px; padding:0 0 12px;
  font-size:16px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; border-bottom:1px solid var(--oc-line);
}

/* --- Order line items + totals --- */
.oc__section{ margin:0 0 56px }
.oc__line{
  display:grid; grid-template-columns:72px 1fr auto;
  gap:14px; padding:0 0 20px;
  border-bottom:1px solid var(--oc-line); margin:0 0 20px;
}
.oc__line__thumb{
  width:72px; height:96px; background:#3a3835;
  flex:0 0 72px; overflow:hidden;
}
.oc__line__thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.oc__line__body{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.oc__line__brand{
  font-size:10px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--oc-muted); margin:0; line-height:1.2;
}
.oc__line__title{
  margin:0; font-size:15px; font-weight:500;
  line-height:1.3; color:var(--oc-ink);
}
.oc__line__attrs{
  margin:2px 0 0; font-size:12px; color:var(--oc-ink-soft); line-height:1.4;
}
.oc__line__attrs span + span::before{ content:"\00b7"; margin:0 6px; color:var(--oc-muted) }
.oc__line__price{
  text-align:right; font-size:14px; font-weight:500;
  color:var(--oc-ink); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.oc__line__qty{
  margin-top:2px; text-align:right; font-size:11px;
  color:var(--oc-muted); letter-spacing:.04em;
}
.oc__totals{
  display:flex; flex-direction:column; gap:10px;
  margin:0; max-width:480px; margin-left:auto;
}
.oc__total{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; font-size:14px;
}
.oc__total dt{ margin:0; color:var(--oc-ink-soft) }
.oc__total dd{ margin:0; color:var(--oc-ink); font-variant-numeric:tabular-nums }
.oc__total .note{
  font-size:12px; color:var(--oc-muted); font-weight:400;
  margin-left:6px; letter-spacing:.02em;
}
.oc__total--grand{
  padding-top:14px; border-top:1px solid var(--oc-line-strong);
  font-size:18px; font-weight:500;
}
.oc__total--grand dt{
  color:var(--oc-ink); font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; font-size:14px;
}
.oc__total--grand dd{ font-size:20px }
.oc__tax-note{
  margin:6px 0 0; font-size:12px; color:var(--oc-muted); text-align:right;
}

/* FIX (2026-06-02, mobile): grand-total row -- mirror the checkout treatment
   (review-order tfoot, see ~L689). On narrow screens the native inclusive-VAT
   <small class="includes_tax"> wraps awkwardly inline after the amount, so
   right-align the amount and drop the tax note to its OWN line below it.
   Scoped to the order-confirmation grand total only (.oc__total--grand);
   does NOT touch checkout or the My-Account order table. */
@media (max-width:639px){
  .oc__total--grand{ position:relative; }
  .oc__total--grand dd{
    position:relative; text-align:right; padding-bottom:22px;
  }
  .oc__total--grand dd .includes_tax,
  .oc__total--grand dd small,
  .oc__total--grand .note{
    position:absolute; top:100%; right:0; left:auto; margin-top:6px;
    display:block; white-space:normal; text-align:right; line-height:1.4;
    font-size:12px; font-weight:400; width:max-content; max-width:min(340px,78vw);
    color:var(--oc-muted); margin-left:0;
  }
}

/* --- Addresses --- */
.oc__addrs{ display:grid; grid-template-columns:1fr; gap:40px }
@media (min-width:720px){ .oc__addrs{ grid-template-columns:1fr 1fr; gap:48px } }
.oc__addr address{
  font-style:normal; font-size:14px; line-height:1.6; color:var(--oc-ink);
}
.oc__addr .oc__line__brand{ margin-bottom:8px }
.oc__addr .soft{ color:var(--oc-ink-soft) }

/* --- Payment block --- */
.oc__payment-method{ margin:0 0 6px; font-weight:500 }
.oc__payment-desc{
  margin:0; color:var(--oc-ink-soft); max-width:64ch; line-height:1.6;
}
.oc__payment-desc strong{ color:var(--oc-ink); font-weight:500 }

/* --- Footer actions --- */
.oc__actions{
  margin:64px 0 0; padding:32px 0 0;
  border-top:1px solid var(--oc-line);
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
@media (min-width:640px){ .oc__actions{ flex-direction:row; align-items:center; justify-content:space-between; gap:24px } }
.oc .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 24px;
  background:var(--oc-ink); color:var(--oc-bg);
  border:1px solid var(--oc-ink);
  font:inherit; font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; text-decoration:none; gap:10px;
  transition:background .15s ease;
}
.oc .btn svg{ width:14px; height:14px }
.oc .btn:hover{ background:var(--oc-c9) }
.oc__help{ font-size:13px; color:var(--oc-ink-soft) }
.oc__help a{ font-weight:500 }
/* end order-confirmation redesign 2026-05-30 */

/* ============================================================
 * Order-confirmation — VERIFY-EMAIL GATED STATE 2026-05-30 (Task #32 order-confirmation)
 * Renders via woocommerce/checkout/order-received.php + checkout/form-verify-email.php
 * overrides when WC's guest email-verification gate fires (stale/anonymous order-received
 * link past the grace period). Reuses the .oc shell + --oc-* vars (self-contained).
 * ============================================================ */
.oc--gate{ padding-bottom:0 }
.oc--gate .oc__sub{
  max-width:none; text-align:center; margin:0 auto;
  font-size:15px; color:var(--oc-ink-soft);
}

.oc--verify{ padding-top:8px }
.oc__verify{
  max-width:480px; margin:0 auto; width:100%;
  display:flex; flex-direction:column;
}
.oc__verify-head{
  text-align:center; margin:0 0 32px;
  padding:0 0 28px; border-bottom:1px solid var(--oc-line);
}
.oc__verify-title{
  margin:0 0 14px; font-weight:300; letter-spacing:-0.02em;
  font-size:clamp(28px,4vw,40px); line-height:1.05; color:var(--oc-ink);
}
.oc__verify-text{
  margin:0 auto; max-width:42ch;
  font-size:14px; line-height:1.6; color:var(--oc-ink-soft);
}
.oc__verify-text a{ color:var(--oc-ink); text-underline-offset:3px }

.oc__verify-row{ margin:0 0 4px; display:flex; flex-direction:column; gap:8px }
.oc__verify-label{
  font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--oc-ink-soft);
}
.oc__verify-label .required{ color:var(--oc-ink); border:0; text-decoration:none }
.oc__verify-input{
  appearance:none; -webkit-appearance:none; width:100%;
  border:1px solid var(--oc-line-strong); background:var(--oc-bg); color:var(--oc-ink);
  padding:0 14px; height:48px; font:inherit; font-size:15px; line-height:1;
  border-radius:0;
}
.oc__verify-input:focus{ outline:none; border-color:var(--oc-ink) }

.oc__verify-actions{ margin:24px 0 0 }
.oc__verify-btn{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  height:56px; background:var(--oc-ink); color:var(--oc-bg); border:1px solid var(--oc-ink);
  font:inherit; font-size:13px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; cursor:pointer; text-decoration:none;
  border-radius:0; transition:background .15s ease;
}
.oc__verify-btn:hover{ background:var(--oc-c9) }
/* WC default notices inside the verify form inherit the storefront notice styles */
.oc__verify .woocommerce-error,
.oc__verify .woocommerce-info,
.oc__verify .woocommerce-message{ margin:0 0 20px; font-size:13px }
/* end order-confirmation verify-email gated state 2026-05-30 */


/* ============================================================
 * Cart page pivot — Task #32 (cart) 2026-05-30 — /cart/
 * Stock-WooCommerce cart markup (shop_table.cart + cart_totals)
 * inside the shared shop-page shell. Ported faithfully from the
 * claude-design shop.css cart section (self-contained — vars scoped
 * to .shop so they don't depend on global :root token defs).
 * Supersedes the bespoke .cart__* / .oska--cart-qty cart skin.
 * Empty cart (Bricks 506/286188) reuses .shop + .shop__crumbs/.shop__h1.
 * ============================================================ */
.shop{
  --color-1:#fff; --color-2:#eee; --color-3:#141414; --color-4:#ccc;
  --color-5:#aaa; --color-6:#666; --color-9:#000;
  --ink:var(--color-3); --ink-soft:var(--color-6); --muted:var(--color-5);
  --line:var(--color-2); --line-strong:var(--color-4); --bg:var(--color-1);
  --pad:20px;
  max-width:calc(1440px + var(--pad) * 2); margin:0 auto; padding:32px var(--pad) 96px;
  font-size:14px; line-height:1.5; color:var(--ink);
}
@media (min-width:640px){ .shop{ --pad:32px } }
@media (min-width:960px){ .shop{ --pad:48px; padding:48px var(--pad) 128px } }
@media (min-width:1280px){ .shop{ --pad:64px } }

/* Fix 1 (cart-width align to footer, 2026-05-30): Bricks emits
   `#brx-content.wordpress{width:1280px}` + `.woocommerce main.site-main{width:1280px}`
   (the global container width), which constrains the cart/checkout content
   NARROWER than the site/footer container (footer = max-width 1440px, padding
   20/32/48/64px via #brxe-frinr _widthMax:1440 + #brxe-frsec padding). Neutralise
   the 1280 cap on the cart+checkout WP-content frame so .shop / .oc own the width
   and align edge-to-edge with the footer. Scoped to the two money pages only. */
.woocommerce-cart #brx-content.wordpress,
.woocommerce-checkout #brx-content.wordpress{ width:100%; max-width:none; margin:0 }
.woocommerce-cart .woocommerce main.site-main,
.woocommerce-checkout .woocommerce main.site-main{ width:100%; max-width:none }
body.woocommerce-cart,body.woocommerce-checkout,body.woocommerce-account{ min-height:100vh }
body.woocommerce-cart #brx-content,body.woocommerce-checkout #brx-content,body.woocommerce-account #brx-content{ flex:1 0 auto }

.shop__crumbs{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 12px; display:flex; gap:10px; align-items:center;
}
.shop__crumbs a{ color:var(--ink-soft); text-decoration:none }
.shop__crumbs a:hover{ color:var(--ink) }
.shop__crumbs span{ color:var(--muted) }
.shop__h1{ margin:0 0 32px; font-size:clamp(36px,5vw,56px); line-height:1; font-weight:300; letter-spacing:-0.02em }
@media (min-width:960px){ .shop__h1{ margin-bottom:48px } }

/* Notices */
.shop .woocommerce-notices-wrapper{ margin:0 0 28px }
.shop .woocommerce-notices-wrapper:empty{ display:none; margin:0 }
.shop .woocommerce-message,.shop .woocommerce-info,.shop .woocommerce-warning,.shop .woocommerce-error{
  list-style:none; margin:0 0 12px; padding:18px 20px;
  display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap;
  font-size:14px; line-height:1.5; background:var(--bg); color:var(--ink); border:1px solid var(--line-strong);
  border-left:3px solid var(--muted);
}
.shop .woocommerce-message{ border-left-color:#198754 }
.shop .woocommerce-info{ border-left-color:#2b6cb0 }
.shop .woocommerce-warning{ border-left-color:#c8772a }
.shop .woocommerce-error{ border-left-color:#b03a2e }
.shop .woocommerce-message .button,.shop .woocommerce-info .button{ margin-left:auto }

/* Buttons inside the cart shop shell */
.woocommerce-cart .shop a.button,.woocommerce-cart .shop button.button,.woocommerce-cart .shop input.button,
.woocommerce-cart .shop .button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 24px; width:auto; white-space:nowrap;
  background:var(--bg); color:var(--ink); border:1px solid var(--ink); border-radius:0;
  font:inherit; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; text-decoration:none; transition:background .15s ease, color .15s ease;
}
.woocommerce-cart .shop .button:hover{ background:var(--ink); color:var(--bg) }
.woocommerce-cart .shop .button.alt{ background:var(--ink); color:var(--bg); border-color:var(--ink) }
.woocommerce-cart .shop .button.alt:hover{ background:var(--color-9) }
.woocommerce-cart .shop .button svg{ width:14px; height:14px }

.shop .woocommerce-Price-amount{ font-variant-numeric:tabular-nums; white-space:nowrap }

/* Grid: items left, totals right */
.woocommerce-cart .shop .shop__grid{ display:grid; grid-template-columns:1fr; gap:48px }
@media (min-width:880px){
  .woocommerce-cart .shop .shop__grid{ grid-template-columns:minmax(0,1fr) 360px; gap:48px; align-items:flex-start }
}
@media (min-width:1100px){ .woocommerce-cart .shop .shop__grid{ grid-template-columns:minmax(0,1fr) 400px; gap:72px } }
@media (min-width:1280px){ .woocommerce-cart .shop .shop__grid{ grid-template-columns:minmax(0,1fr) 440px; gap:96px } }

.shop .woocommerce-cart-form{ width:100%; float:none; min-width:0 }
.shop .cart-collaterals,.shop .cart-collateral{ width:100%; float:none; margin:0 }
.shop .shop_table.cart{ width:100%; border-collapse:collapse }
.shop .shop_table.cart thead th{
  text-align:left; padding:0 0 14px; border-bottom:1px solid var(--ink);
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.shop .shop_table.cart thead .product-subtotal{ text-align:right }
.shop .shop_table.cart td{
  padding:24px 16px 24px 0; border-top:0; border-bottom:1px solid var(--line-strong); vertical-align:middle;
}
.shop .shop_table.cart .product-remove{ width:36px; padding-right:0 }
.shop .shop_table.cart .product-remove .remove{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  font-size:20px; line-height:1; color:var(--muted); text-decoration:none; border:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.shop .shop_table.cart .product-remove .remove:hover{ color:var(--ink); border-color:var(--line-strong); background:none }
.shop .shop_table.cart .product-thumbnail{ width:112px }
.shop .shop_table.cart .product-thumbnail a{ display:block }
.shop .shop_table.cart .product-thumbnail img{ width:96px; height:128px; object-fit:cover; display:block; background:#3a3835 }
.shop .shop_table.cart .product-name{ min-width:0 }
.shop .shop_table.cart .product-name > a{ font-size:16px; font-weight:500; color:var(--ink); text-decoration:none }
.shop .shop_table.cart .product-name > a:hover{ text-decoration:underline; text-underline-offset:3px }
.shop .shop_table.cart .product-name .variation{
  margin:6px 0 0; padding:0; font-size:13px; color:var(--ink-soft);
}
.shop .shop_table.cart .product-name .variation dt{ display:inline; margin:0; font-weight:400 }
.shop .shop_table.cart .product-name .variation dd{ display:inline; margin:0 14px 0 4px }
.shop .shop_table.cart .product-name .variation dd p{ display:inline; margin:0 }
.shop .shop_table.cart .product-name .variation dd:last-child{ margin-right:0 }
.shop .shop_table.cart td.product-price{ color:var(--ink-soft); font-size:14px }
.shop .shop_table.cart td.product-subtotal{ text-align:right; font-size:15px; font-weight:500; color:var(--ink) }

/* Design .qty stepper (cart): single hairline outer border, no internal dividers,
   48/56/48 borderless transparent buttons + input (piece 2b 2026-05-31). The qty
   input is rendered INLINE in cart/cart.php (no woocommerce_quantity_input call),
   so the Bricks parent-theme injects NO span.action spinner. */
.shop .quantity.qty{ display:inline-flex; align-items:center; border:1px solid var(--line-strong); background:var(--color-1); height:48px; width:max-content; max-width:100% }
.shop .quantity.qty .qty,
.shop .quantity.qty input.qty{
  width:56px; text-align:center; border:0; box-shadow:none;
  font:inherit; font-size:15px; font-variant-numeric:tabular-nums; background:transparent; height:48px; padding:0;
  color:var(--ink); -moz-appearance:textfield;
}
.shop .quantity.qty .qty::-webkit-outer-spin-button,.shop .quantity.qty .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.shop .quantity.qty .qty:focus{ outline:0 }
.shop .quantity.qty .qty-minus,
.shop .quantity.qty .qty-plus{
  background:transparent; border:0; width:48px; min-width:48px; height:48px; font-size:18px; color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease; user-select:none; padding:0;
}
.shop .quantity.qty .qty-minus svg,
.shop .quantity.qty .qty-plus svg{ width:16px; height:16px }
.shop .quantity.qty .qty-minus:hover,
.shop .quantity.qty .qty-plus:hover{ background:var(--color-2) }
/* FIX (2026-06-01): neutralise Bricks parent woocommerce-layer.min.css
   `form.cart .quantity input { order:1 }` which floated our inline input AFTER
   both buttons (our buttons are .qty-minus/.qty-plus, not Bricks' .minus/.plus,
   so its order:0/2 button rules never matched) -> visual `- + 1`. Pin order. */
.shop .quantity.qty .qty-minus{ order:1 }
.shop .quantity.qty input.qty,
.shop .quantity.qty .qty{ order:2 }
.shop .quantity.qty .qty-plus{ order:3 }
.shop .quantity.qty.sold-individually .qty-minus,
.shop .quantity.qty.sold-individually .qty-plus{ display:none }

/* actions row (coupon + update cart) */
.shop .shop_table.cart td.actions{ padding:32px 0 0; border-bottom:0 }
.shop .shop_table.cart td.actions::after{ content:""; display:block; clear:both }
/* coupon = input + APPLY joined side-by-side on the left (design), Update cart
   on the right. Mobile (<=719px) stacks full-width via the responsive block below. */
.shop .shop_table.cart td.actions .coupon{ float:left; display:flex; flex-direction:row; gap:0; width:100%; max-width:440px }
.shop .shop_table.cart td.actions .coupon .input-text{ flex:1; min-width:0; height:48px; border:1px solid var(--line-strong); border-right:0 }
.shop .shop_table.cart td.actions .coupon .button{ flex:0 0 auto; width:auto }
.shop .shop_table.cart td.actions > button[name="update_cart"]{ float:right }

/* continue-shopping link (design keeps it below the table) */
.shop .cart__continue{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); text-decoration:none; margin-top:20px;
}
.shop .cart__continue:hover{ color:var(--ink) }
.shop .cart__continue svg{ width:14px; height:14px; flex:0 0 auto }

/* responsive stacking — block layout so cells fill width */
@media (max-width:719px){
  .shop .shop_table.cart,
  .shop .shop_table.cart tbody,
  .shop .shop_table.cart td{ display:block; width:100% }
  .shop .shop_table.cart thead{ display:none }
  .shop .shop_table.cart tr.cart_item{
    display:grid; grid-template-columns:96px 1fr; gap:4px 16px;
    padding:20px 0; border-bottom:1px solid var(--line-strong); position:relative;
  }
  .shop .shop_table.cart td{ padding:0; border:0 }
  .shop .shop_table.cart .product-remove{ position:absolute; top:18px; right:0; width:auto }
  .shop .shop_table.cart .product-thumbnail{ grid-row:1 / span 4; width:96px }
  .shop .shop_table.cart .product-price::before,
  .shop .shop_table.cart .product-subtotal::before{
    content:attr(data-title) ": "; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  }
  .shop .shop_table.cart .product-price,.shop .shop_table.cart .product-subtotal{ text-align:left; margin-top:6px }
  .shop .shop_table.cart .product-quantity{ margin-top:8px }
  .shop .shop_table.cart tr:has(td.actions){ padding:0; border:0 }
  .shop .shop_table.cart td.actions{ padding-top:8px }
  .shop .shop_table.cart td.actions .coupon{ float:none; width:100%; max-width:none; margin-bottom:12px }
  .shop .shop_table.cart td.actions .coupon .input-text,.shop .shop_table.cart td.actions .coupon .button{ width:100% }
  .shop .shop_table.cart td.actions .coupon .input-text{ border-right:1px solid var(--line-strong) }
  .shop .shop_table.cart td.actions > button[name="update_cart"]{ float:none; width:100% }
}

/* cart totals card (stock .cart_totals) */
.shop .cart-collaterals .cart_totals,.shop .cart_totals{ background:var(--color-2); padding:32px }
/* Fix 2 (2026-06-02): un-stick the cart totals box so it scrolls with the page
   (operator request). Was position:sticky;top:24px; now static. Desktop padding
   bump kept. Scoped to .shop cart only — checkout .checkout__col-right sticky untouched. */
@media (min-width:960px){ .shop .cart-collaterals .cart_totals,.shop .cart_totals{ padding:36px } }
.shop .cart_totals > h2{ margin:0 0 20px; font-size:16px; font-weight:700; letter-spacing:.04em; text-transform:uppercase }
.shop .cart_totals .shop_table{ width:100%; border-collapse:collapse; margin:0 0 8px; border:0 }
.shop .cart_totals .shop_table th,.shop .cart_totals .shop_table td{
  text-align:left; padding:14px 0; border-top:0; border-bottom:1px solid var(--line-strong); vertical-align:top; font-size:14px;
}
.shop .cart_totals .shop_table th{ font-weight:400; color:var(--ink-soft) }
.shop .cart_totals .shop_table td{ text-align:right; color:var(--ink) }
.shop .cart_totals tr:first-child th,.shop .cart_totals tr:first-child td{ padding-top:0 }
.shop .cart_totals .shop_table tr:last-child th,.shop .cart_totals .shop_table tr:last-child td{ border-bottom:0 }
/* Shipping row (Fix 2, 2026-05-30): stock WC renders the method as
   ul.woocommerce-shipping-methods > li > label (FedEx: €12,00), then a
   separate p.woocommerce-shipping-destination (“Shipping to …”) and the
   change-address toggle as a.shipping-calculator-button inside
   form.woocommerce-shipping-calculator. The old CSS targeted .shipping-method/
   .shipping-to/.shipping-change which DON'T exist → the row rendered cramped &
   left-aligned. Right-align the method line; put destination + CHANGE ADDRESS
   on their own clean right-aligned lines below. */
.shop .cart_totals .shipping td{ text-align:right }
.shop .cart_totals .shipping .woocommerce-shipping-methods{ margin:0; padding:0; list-style:none; text-align:right }
.shop .cart_totals .shipping .woocommerce-shipping-methods li{ margin:0; list-style:none }
.shop .cart_totals .shipping .woocommerce-shipping-methods label{ display:inline; color:var(--ink) }
.shop .cart_totals .shipping .woocommerce-shipping-methods input.shipping_method{ display:none }
.shop .cart_totals .shipping .woocommerce-shipping-destination{
  margin:4px 0 0; font-size:12px; line-height:1.4; color:var(--ink-soft); text-align:right;
}
.shop .cart_totals .shipping .woocommerce-shipping-destination strong{ font-weight:400 }
.shop .cart_totals .shipping .woocommerce-shipping-calculator{ margin:4px 0 0; text-align:right }
.shop .cart_totals .shipping .shipping-calculator-button{
  display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
}
.shop .cart_totals .shipping .shipping-calculator-button:hover{ color:var(--ink) }
.shop .cart_totals .shipping .shipping-calculator-form{ margin-top:12px; text-align:left }
.shop .cart_totals .shipping .shipping-calculator-form .form-row{ margin:0 0 10px }
.shop .cart_totals .shipping .shipping-calculator-form .button{ width:100%; margin-top:4px }

/* Total row: amount large right; inclusive-tax (small.includes_tax) small,
   muted, on its own right-aligned line below — stock WC nests it in the td. */
.shop .cart_totals .order-total th{ color:var(--ink); font-weight:500; text-transform:uppercase; letter-spacing:.08em }
.shop .cart_totals .order-total td{ font-size:22px; font-weight:500; text-align:right }
.shop .cart_totals .order-total td strong{ font-weight:500 }
.shop .cart_totals .order-total .woocommerce-Price-amount{ font-size:22px }
.shop .cart_totals .order-total small.includes_tax,
.shop .cart_totals .order-total small{
  display:block; margin-top:6px; font-size:12px; font-weight:400; color:var(--muted); text-align:right; white-space:normal;
}
.shop .cart_totals .order-total small.includes_tax .woocommerce-Price-amount{ font-size:12px }
.shop .cart_totals .tax-note{ margin:6px 0 0; font-size:12px; color:var(--muted); text-align:right }
.shop .wc-proceed-to-checkout{ margin-top:24px }
.woocommerce-cart .shop .wc-proceed-to-checkout a.checkout-button{ display:flex; width:100%; max-width:none; height:56px; font-size:13px; letter-spacing:.18em }
.woocommerce-cart .shop .wc-proceed-to-checkout a.checkout-button::after{ content:""; width:16px; height:16px; flex:0 0 16px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='m9 4 4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='m9 4 4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat }
.shop .cart__secure{
  margin:14px 0 0; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.shop .cart__secure svg{ width:12px; height:12px; flex:0 0 auto }

/* empty cart (Bricks 506/286188 render the shop shell with this state) */
/* redesigned 2026-05-30 — design cart-empty.html */
.shop .shop__empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:48px 0 8px; border-top:1px solid var(--line) }
.shop .shop__empty .shop__empty-ico{ width:56px; height:56px; color:var(--ink); margin:0 0 28px; display:block }
.shop .shop__empty .shop__empty-ico svg{ width:100%; height:100%; display:block }
.shop .shop__empty .shop__empty-h{ margin:0 0 12px; font-size:22px; font-weight:300; letter-spacing:-0.01em; line-height:1.3; color:var(--ink) }
.shop .shop__empty .shop__empty-sub{ margin:0 0 32px; font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:44ch }
.shop .shop__empty a.brxe-button{ display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 32px; background:var(--ink); color:var(--bg); border:1px solid var(--ink); text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; transition:background .15s ease }
.shop .shop__empty a.brxe-button:hover{ background:#000 }
/* end cart pivot 2026-05-30 */

/* 404 search field 2026-05-30 */
.error404 .oska--404-search{ position:relative; width:100%; max-width:380px; margin:6px auto 0 }
.error404 .oska--404-search form{ position:relative; width:100%; margin:0 }
.error404 .oska--404-search input[type=search]{ width:100%; height:48px; padding:0 16px 0 44px; border:1px solid var(--line-strong); background:var(--bg); font:inherit; font-size:15px; color:var(--ink); border-radius:0; -webkit-appearance:none; appearance:none }
.error404 .oska--404-search input[type=search]::placeholder{ color:var(--muted) }
.error404 .oska--404-search input[type=search]:focus{ outline:0; border-color:var(--ink) }
.error404 .oska--404-search .search-ico{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ink-soft); pointer-events:none }
.error404 .oska--404-search button[type=submit]{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
/* end 404 search field */

/* Global form controls (design-system, 2026-05-30) */
/* Low-specificity BASE so bare and native inputs (my-account login/register,
 * comment forms, 404 search, etc.) get the OSKA field treatment now that the
 * greyscale tokens (color-1..9, ink, bg, line, line-strong, muted) live in a
 * global :root. Element / single-class specificity ONLY: every existing scoped
 * rule (.shop checkout/cart, .oska--header-search [FiboSearch], the #brxe-frsec
 * footer selects, .oska--header-lang) MUST keep winning. No important flags.
 * FiboSearch search input and the Bricks/Polylang native selects are excluded
 * via zero-specificity :where(:not()) guards so this base never reaches them. */
.input-text,
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
input[type=url],
input[type=search]:where(:not(.dgwt-wcas-search-input)),
textarea,
select:where(:not(.pll-switcher-select)):where(:not(.brxe-seoc-country-select)){
  appearance:none; -webkit-appearance:none; width:100%;
  border:1px solid var(--line-strong); background:var(--bg); color:var(--ink);
  padding:0 14px; height:48px; font:inherit; font-size:15px; line-height:1;
  border-radius:0; transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{ height:auto; min-height:120px; padding:12px 14px; line-height:1.5; resize:vertical }
/* select chevron (matches the .shop / checkout select) */
select:where(:not(.pll-switcher-select)):where(:not(.brxe-seoc-country-select)){
  cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23141414' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
}
/* hover / focus */
.input-text:hover,
input[type=text]:hover,
input[type=email]:hover,
input[type=password]:hover,
input[type=number]:hover,
input[type=tel]:hover,
input[type=url]:hover,
input[type=search]:where(:not(.dgwt-wcas-search-input)):hover,
textarea:hover,
select:where(:not(.pll-switcher-select)):where(:not(.brxe-seoc-country-select)):hover{ border-color:var(--ink) }
.input-text:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=search]:where(:not(.dgwt-wcas-search-input)):focus,
textarea:focus,
select:where(:not(.pll-switcher-select)):where(:not(.brxe-seoc-country-select)):focus{
  outline:0; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);
}
/* placeholder */
.input-text::placeholder,
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=url]::placeholder,
input[type=search]:where(:not(.dgwt-wcas-search-input))::placeholder,
textarea::placeholder{ color:var(--muted) }
/* form label */
label{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); line-height:1.3 }
/* custom checkbox */
input[type=checkbox]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:0 0 18px; margin:1px 0 0;
  border:1px solid var(--line-strong); background:var(--bg); display:inline-grid; place-items:center; cursor:pointer;
  border-radius:0;
}
input[type=checkbox]:hover{ border-color:var(--ink) }
input[type=checkbox]:checked{ background:var(--ink); border-color:var(--ink) }
input[type=checkbox]:checked::after{
  content:""; width:5px; height:9px; border:solid var(--bg); border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
input[type=checkbox]:focus{ outline:0; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }
/* custom radio */
input[type=radio]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:0 0 18px;
  border:1px solid var(--line-strong); border-radius:50%; background:var(--bg); cursor:pointer;
  display:inline-grid; place-items:center; vertical-align:-3px; margin:0 8px 0 0;
}
input[type=radio]:hover{ border-color:var(--ink) }
input[type=radio]:checked{ border-color:var(--ink) }
input[type=radio]:checked::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink) }
input[type=radio]:focus{ outline:0; border-color:var(--ink) }
/* end Global form controls */

/* WC notices + button fixes (design-system, 2026-05-30) */
/* P5 - global coloured WooCommerce notices (grey card + 3px left accent).
   Scoped .shop shell already styles these at higher specificity and keeps winning;
   this is the LOW-specificity global fallback for every other surface (PDP add-to-cart,
   homepage, account, native WC templates). Matches styleguide .sg-note spec:
   bg var(--color-2), padding 15px 18px, 14px/1.5, ink text, 3px solid left accent. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background:var(--color-2); color:var(--ink);
  padding:15px 18px; margin:0 0 12px;
  font-size:14px; line-height:1.5;
  border-left:3px solid var(--muted);
  list-style:none;
}
.woocommerce-message{ border-left-color:var(--success) }
.woocommerce-info{ border-left-color:var(--info) }
.woocommerce-error{ border-left-color:var(--danger) }
/* operator decision: 4th warning state maps into the info family - low-stock /
   backorder context gets the warning accent if such a notice renders. */
.woocommerce-info.woocommerce-info--warning{ border-left-color:var(--warning) }
p.stock.low-stock{ color:var(--warning) }

/* P3b.1 - .wc-backward (Return to shop / continue shopping) - currently unstyled.
   Standard OSKA secondary/outline WC button (styleguide .sg-wbtn). */
.wc-backward{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px; width:auto; white-space:nowrap;
  background:var(--bg); color:var(--ink); border:1px solid var(--ink); border-radius:0;
  font:inherit; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.wc-backward:hover{ background:var(--ink); color:var(--bg) }

/* P3b.3 - standard WC / site button to spec 48px at LOW specificity only.
   Single-class selectors (0,1,0) so the .shop checkout/proceed buttons and Bricks
   UI buttons (.brxe-button, .oska--filter-*, .oska--icon-button, filter pills) all
   keep winning on their own higher-specificity rules. */
.button,
a.button,
input.button{
  min-height:48px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* P3b.2 - disabled state (styleguide .sg-wbtn.is-disabled / [disabled]). */
.button:disabled,
.button[disabled],
button[type=submit]:disabled{
  background:var(--color-4); border-color:var(--color-4);
  cursor:not-allowed;
}
/* end */

/* ============================================================
 * Checkout design-audit fixes (2026-05-30) — CSS-only.
 * #4 .shop padding (Bricks .brxe-section inline padding:72px 20px
 *    beats .shop at equal specificity → raise specificity on the two
 *    WC money pages so the intended .shop gutters win).
 * #3 place-order button trailing arrow (mirror the cart
 *    .wc-proceed-to-checkout a.checkout-button::after mask).
 * #10 country/state select chevron rendered as a black square:
 *    select2 enhances the field; its arrow <b> relies on transparent
 *    L/R borders to form a triangle, but the global
 *    `:where(:root) *{border-color:var(--color-9 #000)}` paints all 4
 *    borders black (select2 default arrow CSS not enqueued) → solid
 *    block. Replace with the same stroked down-chevron mask as the
 *    native .shop select.
 * Inverse: restore uploads/seocsync-tests/checkoutfix-pre-style.css
 *    (or delete this block).
 * ============================================================ */
/* #4 */
body.woocommerce-checkout .brxe-section.shop,
body.woocommerce-cart .brxe-section.shop{ padding:32px var(--pad) 96px }
@media (min-width:960px){
  body.woocommerce-checkout .brxe-section.shop,
  body.woocommerce-cart .brxe-section.shop{ padding:48px var(--pad) 128px }
}
/* #3 */
.shop #payment .place-order .button::after{
  content:""; width:16px; height:16px; flex:0 0 16px; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='m9 4 4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='m9 4 4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* #10 */
.shop .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border:0; width:12px; height:8px; margin:0; top:50%; left:50%; transform:translate(-50%,-50%);
  background-color:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* end checkout-audit fixes */

/* ============================================================
 * Checkout MAJOR-bug fixes — second audit (2026-05-30).
 * Four bugs the first audit missed, each verified against the
 * live render with computed styles + screenshots (EN page 153 /
 * DE page 286198, [woocommerce_checkout] shortcode under .shop).
 *
 * #1 NAME FIELDS NARROW + PAIRS STACK.
 *    The billing field-wrapper is display:grid (1fr 1fr) and the
 *    .form-row-first/.form-row-last rows are placed in cols 1/2,
 *    BUT WooCommerce core's .form-row-first{width:47%} shrinks each
 *    grid item to ~215px inside its track. Force width:auto so the
 *    row fills its column. Postcode/city + phone/email arrive as
 *    .form-row-wide on the AT/DE locale (WC does not pair them), so a
 *    minimal woocommerce_checkout_fields filter in inc/woocommerce.php
 *    appends form-row-first/last to those four fields (class-only,
 *    variable-data-safe); the grid placement rules below then pair them.
 *
 * #2 CHECKBOXES = SOLID BLACK SQUARES.
 *    WC's woocommerce-layer.min.css sets
 *    `.woocommerce-checkout .woocommerce-form__input-checkbox{display:inline!important}`.
 *    That !important beats our appearance:none custom-checkbox
 *    (display:inline-grid), so the box renders as an inline replaced
 *    control: width is ignored, and when :checked the ink background
 *    fills with NO visible tick (grid centering is gone) -> a black
 *    square. Re-assert the custom box with matching !important, scoped
 *    to .shop, so unchecked = white box + 1px var(--line-strong),
 *    checked = ink fill + white tick.
 *
 * #3 PAYMENT-METHOD DETACHED WHITE BOX (handled above in the payment
 *    block) + payment_box grey override below (WC default #f5f6f7 ->
 *    transparent so it reads inside the #eee order box).
 *
 * #4 SHIPPING ROW CRAMPED.
 *    The checkout review-order table's shipping row renders a
 *    ul.woocommerce-shipping-methods that our cart-only rules
 *    (.shop .cart_totals .shipping ...) never reach, so the method
 *    label inherits an 11px micro size and a flex ul -> cramped /
 *    misaligned. Style it for the checkout table: label left, value
 *    right, normal size.
 *
 * Inverse: restore uploads/seocsync-tests/checkoutform-pre-style.css
 *    (style.css) + uploads/seocsync-tests/checkoutform-pre-woocommerce.php
 *    (inc/woocommerce.php), or delete this block + remove the filter.
 * ============================================================ */

/* #1 — name/first/last + paired postcode-city / phone-email fill their grid track */
.shop .woocommerce-billing-fields__field-wrapper .form-row-first,
.shop .woocommerce-billing-fields__field-wrapper .form-row-last{
  width:auto; max-width:none; float:none; margin:0;
}
/* the phone/email + postcode/city pairs are .form-row-wide in the DOM but get
   form-row-first/last appended by the PHP filter; ensure the (now removed) wide
   full-span only applies to rows still carrying form-row-wide WITHOUT a pair class */
.shop .woocommerce-billing-fields__field-wrapper .form-row-wide:not(.form-row-first):not(.form-row-last){ grid-column:1 / -1 }

/* #2 — custom checkbox must beat WC's display:inline !important (scoped to .shop) */
.shop input[type=checkbox],
.shop .woocommerce-form__input-checkbox,
.shop .input-checkbox{
  appearance:none !important; -webkit-appearance:none !important;
  width:18px !important; height:18px !important; flex:0 0 18px !important;
  min-width:18px; max-width:18px; margin:1px 0 0 !important; padding:0 !important;
  border:1px solid var(--line-strong) !important; background:var(--bg) !important;
  display:inline-grid !important; place-items:center; vertical-align:top;
  border-radius:0 !important; cursor:pointer; box-sizing:border-box; float:none !important;
}
.shop input[type=checkbox]:hover,
.shop .woocommerce-form__input-checkbox:hover{ border-color:var(--ink) !important }
.shop input[type=checkbox]:checked,
.shop .woocommerce-form__input-checkbox:checked{ background:var(--ink) !important; border-color:var(--ink) !important }
.shop input[type=checkbox]:checked::after,
.shop .woocommerce-form__input-checkbox:checked::after{
  content:""; width:5px; height:9px; border:solid var(--bg); border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
.shop input[type=checkbox]:focus,
.shop .woocommerce-form__input-checkbox:focus{ outline:0; border-color:var(--ink) !important; box-shadow:inset 0 0 0 1px var(--ink) }

/* #3 — payment_box grey: WC paints it #f5f6f7; keep it transparent inside the #eee box */
.shop #payment .payment_box{ background:transparent !important }

/* #4 — checkout review-order shipping row: label left, value (method) right, normal size */
.shop .woocommerce-checkout-review-order-table tfoot .shipping td{ text-align:right }
.shop .woocommerce-checkout-review-order-table .woocommerce-shipping-methods{
  margin:0; padding:0; list-style:none; text-align:right;
}
.shop .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li{
  margin:0; padding:0; list-style:none; display:block;
}
.shop .woocommerce-checkout-review-order-table .woocommerce-shipping-methods label{
  display:inline; font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); line-height:1.4;
}
.shop .woocommerce-checkout-review-order-table .woocommerce-shipping-methods input.shipping_method{ display:none }
.shop .woocommerce-checkout-review-order-table .woocommerce-shipping-destination{
  margin:4px 0 0; font-size:12px; line-height:1.4; color:var(--ink-soft); text-align:right;
}

/* #1b — phone field hardening: WooCommerce address-i18n.js re-renders the phone
   field client-side from its locale field set (phone IS in wc_address_i18n_params
   locale_fields) and rebuilds it WITHOUT our woocommerce_billing_fields class, so
   the JS reverts billing_phone to .form-row-wide after load. Target the field by
   its stable id so it pairs left (email already keeps .form-row-last; email is not
   in the i18n field set so it is not rebuilt). Immune to the JS class rebuild. */
.shop .woocommerce-billing-fields__field-wrapper #billing_phone_field{
  grid-column:1; width:auto; max-width:none; float:none; margin:0;
}

/* #2b — checkbox checkmark via background-image, NOT ::after.
   Real <input> elements are REPLACED elements and do not render ::before/::after
   pseudo-elements in Chrome/Safari, so the design's :checked::after tick never
   painted — leaving a solid black filled square (the reported bug). Paint the
   white tick as a background-image SVG on the :checked box instead; this works
   on replaced inputs regardless of display mode. Scoped + !important to beat WC.
   Also force the checkbox label to a flex row so the box sits next to its text
   (WC's .form-row-wide + default styling floated the ship-to box to the far right). */
.shop input[type=checkbox]:checked,
.shop .woocommerce-form__input-checkbox:checked,
.shop .input-checkbox:checked{
  background-color:var(--ink) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:12px 12px !important;
}
.shop .woocommerce-form__label-for-checkbox,
.shop p.form-row .checkbox,
.shop label.checkbox{
  display:flex !important; flex-direction:row !important; align-items:flex-start !important;
  gap:12px; cursor:pointer; text-transform:none; letter-spacing:0;
  font-size:14px; font-weight:400; color:var(--ink); line-height:1.45;
}

/* #2c — some checkout checkboxes (notably ship_to_different_address) inherit
   position:absolute; right:0 from a checkout stylesheet, which pins the box to
   the far right of its 904px-wide label while the text flows left. Force them
   back into the normal flex flow so the box sits next to its label text. */
.shop input[type=checkbox],
.shop .woocommerce-form__input-checkbox,
.shop .input-checkbox{
  position:static !important; inset:auto !important; top:auto !important; right:auto !important; left:auto !important;
}
/* end checkout MAJOR-bug fixes (second audit) */
/* Checkout grey-box: match cart width/align + fix radio (2026-05-31) */
.shop #payment{ padding:0 !important }
.shop #payment input[type=radio],.shop #payment .wc_payment_method input[type=radio]{ padding:0 !important; width:18px !important; height:18px !important; min-width:18px !important; max-width:18px !important; box-sizing:border-box }
.shop .checkout__secure{ width:100%; text-align:center }
/* end checkout grey-box cart-match */

/* Checkbox single-checkmark: SVG only (remove redundant ::after border-triangle that rendered as a stray white line) 2026-05-31 */
.shop input[type=checkbox]:checked::after,.shop .woocommerce-form__input-checkbox:checked::after,.shop .input-checkbox:checked::after{ content:none !important; display:none !important; border:0 !important }

/* Shipping address fields: mirror the billing grid (was display:block -> cramped labels) 2026-05-31 */
.shop .woocommerce-shipping-fields__field-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px }
.shop .woocommerce-shipping-fields__field-wrapper .form-row{ grid-column:1 / -1 }
.shop .woocommerce-shipping-fields__field-wrapper .form-row-first{ grid-column:1 }
.shop .woocommerce-shipping-fields__field-wrapper .form-row-last{ grid-column:2 }
.shop .woocommerce-shipping-fields__field-wrapper .form-row-first,.shop .woocommerce-shipping-fields__field-wrapper .form-row-last{ width:auto; max-width:none; float:none; margin:0 }
.shop .woocommerce-shipping-fields__field-wrapper .form-row-wide:not(.form-row-first):not(.form-row-last){ grid-column:1 / -1 }
@media (max-width:560px){ .shop .woocommerce-shipping-fields__field-wrapper{ grid-template-columns:1fr } .shop .woocommerce-shipping-fields__field-wrapper .form-row-first,.shop .woocommerce-shipping-fields__field-wrapper .form-row-last{ grid-column:1 / -1 } }

/* Ship-to checkbox: single-line H3 label -> center 18px box with text (was flex-start = box too high) 2026-05-31 */
.shop #ship-to-different-address label{ align-items:center !important; }
.shop #ship-to-different-address input[type=checkbox]{ transform:none !important; }
/* Create-account: space above so the checkbox isn't flush against the email input 2026-05-31 */
.shop .woocommerce-account-fields{ margin-top:20px; }

/* ============================================================
 * 404 page fix — Task: design parity audit (2026-05-31)
 * Root cause: the existing .error404 .oska--404-search rules (L1166-1172)
 * and the design numeral colour reference --ink/--bg/--line-strong/--muted/
 * --ink-soft, but those tokens are scoped to .shop (L919-927) and the 404
 * page has NO .shop ancestor -> the var()s collapse and the search field
 * renders unstyled. Define the tokens on the .oska--404 container so they
 * inherit into .oska--404-search descendants (custom props inherit), which
 * makes the existing search-form geometry rules resolve. Plus fix the big
 * numeral (was weight 500 / var(--color-4) #ccc) to design weight 300 +
 * var(--ink). style.css loads BEFORE the Bricks inline css, so the numeral
 * override needs specificity > the inline .oska--404-top-1.brxe-text-basic
 * (0,2,0); .oska--404 .oska--404-top-1.brxe-text-basic = (0,3,0) wins.
 * ============================================================ */
:root{ --color-1:#fff; --color-2:#eee; --color-3:#141414; --color-4:#ccc; --color-5:#aaa; --color-6:#666; --color-7:#444; --color-8:#222; --color-9:#000; --ink:var(--color-3); --ink-soft:var(--color-6); --muted:var(--color-5); --line:var(--color-2); --line-strong:var(--color-4); --bg:var(--color-1); }
/* Numeral: design weight 300 + --ink (override inline Bricks weight 500 / --color-4) */
.oska--404 .oska--404-top-1.brxe-text-basic{ font-weight:300; color:var(--ink); letter-spacing:-0.04em }

/* ============================================================
 * Breadcrumbs (CC-4): generic global crumb, used on the Journal/See More
 * listing header (Bricks pages 2462/59795). Greyscale tokens resolve from
 * the global :root block above. Element/single-class specificity only.
 * ============================================================ */
.oska--crumbs{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft) }
.oska--crumbs a{ color:inherit; text-decoration:none }
.oska--crumbs a:hover{ color:var(--ink) }

/* ===== WS-2 Journal listing: feature read-more CTA (raw-HTML span, not Bricks global class) ===== */
.oska--sm-read-more{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); text-decoration:none }
.oska--sm-read-more svg{ width:15px; height:15px; transition:transform .15s ease }
a:hover .oska--sm-read-more svg, .oska--sm-read-more:hover svg{ transform:translateX(3px) }


/* === DS primitives P3 buttons / P4 lists / P5 pagination (style-guide parity) 2026-05-31 === */
.wp-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s;border:1px solid transparent} .wp-btn.small{height:40px;padding:0 18px;font-size:11px} .wp-btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)} .wp-btn.primary:hover{background:transparent;color:var(--ink)} .wp-btn.outline{background:transparent;color:var(--ink);border-color:var(--ink)} .wp-btn.outline:hover{background:var(--ink);color:var(--bg)} .wp-btn.ghost{background:transparent;color:var(--ink);padding:0;border:0;height:auto;border-bottom:1px solid currentColor;padding-bottom:4px} .wp-btn.ghost:hover{color:#888} .wp-btn.light{background:var(--bg);color:var(--ink);border-color:var(--bg)} .wp-btn.light:hover{background:transparent;color:var(--bg)} .wp-btn.light-outline{background:transparent;color:var(--bg);border-color:var(--bg)} .wp-btn.light-outline:hover{background:var(--bg);color:var(--ink)} .wp-btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .wp-btn-row.dark{background:var(--ink);padding:24px} .wp-ul,.wp-ol{margin:0;padding-left:24px;font-size:16px;line-height:1.7;max-width:65ch} .wp-ul li,.wp-ol li{margin-bottom:6px} .wp-ul{list-style:disc} .wp-ol{list-style:decimal} .wp-dl{margin:0;max-width:60ch} .wp-dl dt{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#888;margin:0 0 4px} .wp-dl dt:not(:first-of-type){margin-top:16px} .wp-dl dd{font-size:14px;line-height:1.6;margin:0 0 4px;padding:0;color:var(--ink)} .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;color:var(--ink);text-decoration:none;font-size:14px;font-variant-numeric:tabular-nums;transition:background .15s ease} a.page-numbers:hover{background:var(--line)} .page-numbers.current{background:var(--ink);color:var(--bg);font-weight:500} .page-numbers.dots{min-width:20px} .page-numbers.next,.page-numbers.prev{font-size:16px} /* global WC notices (white card, updated design) — off-.shop parity 2026-05-31 */ .woocommerce-message,.woocommerce-info,.woocommerce-warning,.woocommerce-error{list-style:none;margin:0 0 12px;padding:18px 20px;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;font-size:14px;line-height:1.5;background:var(--bg);color:var(--ink);border:1px solid var(--line-strong);border-left:3px solid var(--muted)} .woocommerce-message{border-left-color:#198754} .woocommerce-info{border-left-color:#2b6cb0} .woocommerce-warning{border-left-color:#c8772a} .woocommerce-error{border-left-color:#b03a2e} /* === DS primitives P2 forms (.wp-* scoped, global) 2026-05-31 === */ .wp-form-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:640px} @media(min-width:640px){.wp-form-grid{grid-template-columns:1fr 1fr}} .wp-field{display:flex;flex-direction:column;gap:8px} .wp-field.full{grid-column:1 / -1} .wp-field label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#888} .wp-field input,.wp-field textarea{appearance:none;-webkit-appearance:none;width:100%;border:1px solid var(--line-strong);background:var(--bg);padding:14px;font-size:14px;font-family:inherit;color:var(--ink);border-radius:0;transition:border-color .15s ease} .wp-field input{height:48px;padding:0 14px} .wp-field textarea{min-height:90px;line-height:1.5;resize:vertical} .wp-field input:focus,.wp-field textarea:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .wp-field input::placeholder,.wp-field textarea::placeholder{color:var(--muted)} .wp-form-row{display:flex;flex-wrap:wrap;gap:16px 24px;margin-bottom:12px} .wp-check,.wp-radio{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer} .wp-check input[type=checkbox],.wp-radio input[type=radio]{-webkit-appearance:auto;appearance:auto;width:18px;height:18px;min-width:18px;max-width:18px;padding:0;border:0;background:none;box-shadow:none;box-sizing:border-box;accent-color:var(--ink);flex:0 0 18px} .wp-newsletter{display:flex;max-width:480px} .wp-newsletter input{flex:1;height:48px;border:1px solid var(--line-strong);border-right:0;padding:0 14px;font-size:14px;font-family:inherit} .wp-newsletter input:focus{outline:none;border-color:var(--ink)} .wp-newsletter button{height:48px;padding:0 24px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--ink);cursor:pointer} .wp-newsletter button:hover{background:#2a2724}
/* WP editor primitives — Table / Image (added 2026-05-31 style-guide expansion) */
.wp-table{width:100%;max-width:640px;border-collapse:collapse;font-size:13px}
.wp-table th,.wp-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.wp-table th{font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#888;background:#fafaf7}
.wp-table td{color:var(--ink)}
.wp-table tr:hover td{background:#fafaf7}
.wp-figure{margin:0;max-width:720px}
.wp-figure figcaption{font-size:13px;color:#888;line-height:1.5;margin-top:12px}
.wp-image{position:relative;aspect-ratio:4 / 3;background:#fafaf7;overflow:hidden}
.wp-image.small{aspect-ratio:3 / 4}
.wp-image .garment{position:absolute;inset:18% 26%;border-radius:4px;background:rgba(255,255,255,0.4);mix-blend-mode:overlay}
.wp-image-inline-wrap{max-width:720px}
.wp-image-inline-wrap::after{content:"";display:table;clear:both}
.wp-figure.inline-right{float:right;max-width:280px;margin:0 0 16px 24px}
@media (max-width:600px){.wp-figure.inline-right{float:none;max-width:100%;margin:0 0 16px}}


/* === WC notice leading STATUS ICONS (design .sg-note parity, 2026-05-31) ===
   Adds the per-type coloured status icon to the four WC notices so the
   /style-guide/ demo AND real cart/checkout/account notices match the design.
   Notices already render display:flex;align-items:flex-start (see .shop block +
   the off-.shop parity block above); here we set the design gap (14px) and add a
   20x20 ::before with a per-type inline-SVG data-URI (stroke colour baked in).
   Selectors include .woocommerce-notices-wrapper (spec 0,2,1) to OVERRIDE the
   Task #78 '.woocommerce-notices-wrapper .woocommerce-*::before{display:none}'
   rule, and a bare form (0,1,1) for notices rendered outside the wrapper. Success
   icon is scoped :not(.woocommerce-warning) because the warning notice ships as
   class='woocommerce-message woocommerce-warning'. .sg-note keeps its own SVG. */
.woocommerce-message,.woocommerce-info,.woocommerce-warning,.woocommerce-error{ gap:14px }
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-warning::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-message::before,.woocommerce-info::before,
.woocommerce-warning::before,.woocommerce-error::before{
  content:""; display:block; flex:0 0 20px; width:20px; height:20px; margin-top:1px;
  background-repeat:no-repeat; background-position:center; background-size:20px 20px;
  font:inherit;
}
.woocommerce-notices-wrapper .woocommerce-message:not(.woocommerce-warning)::before,
.woocommerce-message:not(.woocommerce-warning)::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23198754%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%2F%3E%3C%2Fsvg%3E") }
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-info::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232b6cb0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v5%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E") }
.woocommerce-notices-wrapper .woocommerce-warning::before,
.woocommerce-warning::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c8772a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%2016H3z%22%2F%3E%3Cpath%20d%3D%22M12%2010v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E") }
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-error::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b03a2e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M15%209l-6%206M9%209l6%206%22%2F%3E%3C%2Fsvg%3E") }
/* === end WC notice status icons === */

/* Notice text left-align (2026-05-31): override space-between that pushed message text right */
.shop .woocommerce-message,.shop .woocommerce-info,.shop .woocommerce-warning,.shop .woocommerce-error,.woocommerce-message,.woocommerce-info,.woocommerce-warning,.woocommerce-error{justify-content:flex-start;}

/* Product card colour-swatch row (#19) - verbatim from styleguide.css .pcard__sw*.
   Markup is PHP-rendered via the {prod_swatches} Bricks dynamic tag (inc/bricks.php),
   so Bricks does not emit class CSS for it; raw stylesheet is the correct primitive
   (see feedback_bricks_styles_discipline.md PHP-rendered-markup exception). */
.pcard__swatches { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; min-height: 12px; }
.pcard__sw { width: 12px; height: 12px; border-radius: 50%; background: var(--c, #ccc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); display: block; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
a.pcard__sw:hover, a.pcard__sw:focus-visible { transform: scale(1.18); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px rgba(0,0,0,.18); outline: none; }
.pcard__sw--light { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.pcard__swmore { font-size: 11px; color: #666; letter-spacing: .02em; margin-left: 2px; line-height: 1; }


/* ============================================================
 * Task #133 (2026-06-01) — Reconcile REAL WC notices to the
 * style-guide .sg-note family. Two fixes:
 *  (1) BUG: Bricks parent woocommerce-layer.min.css styles
 *      '.woocommerce-notices-wrapper .woocommerce-error a' (and
 *      '.woocommerce-message a') as a FILLED PILL (var(--bricks-text-danger)
 *      bg, #fff text, inline-flex, min-height 40px) — so the product link
 *      ('Trousers 520') in add-to-cart errors rendered as a RED button.
 *      That Bricks layer loads AFTER seocon/style.css, so we need a
 *      HIGHER-specificity reset. Plain links inside WC notices now render
 *      as inline underlined links inheriting text colour. Intentional CTAs
 *      (.button / .wc-forward / .oska--cart-msg-btn) are EXCLUDED.
 *  (2) Success add-to-cart notice (.woocommerce-message): its View cart /
 *      Go to checkout CTAs reconciled to the .sg-wbtn token (48px,
 *      12px/700/.16em uppercase). View cart = ink-outline (.sg-wbtn);
 *      Go to checkout = kept GREEN (.sg-wbtn.checkout demo) — see operator
 *      green/Ink flag in the task report.
 * ============================================================ */
/* (1) plain links inside ANY WC notice = inline underlined links, not pills.
   Specificity (0,4,1) beats Bricks' (0,2,1) '.woocommerce-notices-wrapper
   .woocommerce-error a'; bare-form (0,3,1) fallback for notices rendered
   outside the wrapper. :not() guards keep the real button CTAs as buttons. */
.woocommerce-notices-wrapper .woocommerce-error a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn),
.woocommerce-notices-wrapper .woocommerce-message a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn),
.woocommerce-notices-wrapper .woocommerce-info a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn),
.woocommerce-notices-wrapper .woocommerce-warning a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn),
.woocommerce-error a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn),
.woocommerce-message a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn),
.woocommerce-info a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn),
.woocommerce-warning a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn){
  display:inline; align-items:initial; justify-content:initial;
  min-height:0; height:auto; padding:0; margin:0;
  background:none; background-color:transparent; border:0;
  color:inherit; font:inherit; font-weight:inherit; letter-spacing:inherit;
  text-transform:none; text-decoration:underline; text-underline-offset:2px;
  order:initial; box-shadow:none;
}
.woocommerce-notices-wrapper .woocommerce-error a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn):hover,
.woocommerce-notices-wrapper .woocommerce-message a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn):hover,
.woocommerce-error a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn):hover,
.woocommerce-message a:not(.button):not(.wc-forward):not(.oska--cart-msg-btn):hover{
  text-decoration:none; color:inherit; background:none;
}
/* (2) Success add-to-cart notice CTAs -> .sg-wbtn token (off-.shop the
   Bricks '.woocommerce-message a' rule would otherwise paint View cart green).
   Specificity (0,4,1) > Bricks (0,2,1). View cart = ink-outline; the
   .go-to-checkout green fill is preserved by the existing lines 485-494. */
.woocommerce-notices-wrapper .woocommerce-message a.oska--cart-msg-btn,
.woocommerce-message a.oska--cart-msg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; min-height:48px; padding:0 24px; white-space:nowrap;
  border:1px solid var(--ink); background:var(--bg); color:var(--ink);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; border-radius:0; transition:background .2s,color .2s,border-color .2s;
}
.woocommerce-notices-wrapper .woocommerce-message a.oska--cart-msg-btn:not(.go-to-checkout):hover,
.woocommerce-message a.oska--cart-msg-btn:not(.go-to-checkout):hover{
  background:var(--ink); color:var(--bg);
}

/* WP-menu lists via [seoc_menu] shortcode (Task #147 2026-06-01) */
ul.oska--menu{ list-style:none; margin:0; padding:0; }
ul.oska--menu[class*="--footer_"]{ display:flex; flex-direction:column; gap:10px; }
ul.oska--menu[class*="--footer_"] li{ margin:0; }
ul.oska--menu[class*="--footer_"] a{ color:var(--color-3); text-decoration:none; font-size:14px; line-height:1.4; transition:color .15s ease; }
ul.oska--menu[class*="--footer_"] a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Shop megamenu (WP-menu shortcode) — Task #147 2026-06-01 */
#brxe-mss{ justify-content:flex-start; width:100%; }
#brxe-mss > *{ width:100%; max-width:none; }
.oska--mm-col{ flex:0 0 280px; min-width:0; display:flex; flex-direction:column; }
.oska--mm-col-hd{ display:flex; flex-direction:row; align-items:baseline; column-gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.oska--mm-eyebrow{ font-size:13px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#999; }
.oska--mm-title{ font-size:11px; font-weight:400; letter-spacing:0.16em; text-transform:uppercase; color:#999; }
ul.oska--mm-links{ list-style:none; margin:0; padding:0; display:block; columns:2; column-gap:28px; }
ul.oska--mm-links li{ margin:0; break-inside:avoid; }
ul.oska--mm-links a{ display:block; width:fit-content; color:#141414; text-decoration:none; font-size:15px; line-height:2; }
ul.oska--mm-links a:hover{ text-decoration:underline; text-underline-offset:3px; }
/* Column grid wrapper: max 1440, centered, responsive (N = filled columns). */
.oska--mm-cols{ width:100%; max-width:1440px; margin-inline:auto; display:flex; flex-wrap:wrap; justify-content:center; column-gap:72px; row-gap:36px; }
@media (max-width:767px){ .oska--mm-col{ flex:0 0 100%; } ul.oska--mm-links{ columns:2; } }
@media (min-width:992px){
  .oska--mm-cols--1{ grid-template-columns:minmax(0,360px); }
  .oska--mm-cols--2{ grid-template-columns:repeat(2,1fr); }
  .oska--mm-cols--3{ grid-template-columns:repeat(3,1fr); }
  .oska--mm-cols--4{ grid-template-columns:repeat(4,1fr); }
}

/* === My Account (account.css port, 2026-06-01, Phase 0) === */
/* Ported from claude-design/account.css — shared chrome (.ac*) + WooCommerce
   markup hooks (Half B). EVERY selector scoped under .woocommerce-account
   (the account-page body class) so nothing leaks to cart/checkout. Tokens
   reconciled to the existing :root (--ink/--ink-soft/--muted/--line/
   --line-strong/--bg/--pad/--color-*); status tokens (--success/--info/
   --warning/--danger) resolve from the global Bricks vars + theme-style :root.
   DEFERRED (Phase 2, decision-gated): .woocommerce-orders-table + .badge*,
   .woocommerce-table--order-details. Notices already styled (#133).
   .dash__* dashboard cards ADDED 2026-06-02 (Task FIX 1) below. */

/* ─── Dashboard cards (.dash__*) — ported from account.css; SVGs in
   dashboard.php carry no width/height so the .ico/.go svg rules size them.
   Scoped under .woocommerce-account; grid restored under the WC-account element
   because Bricks core ships .woocommerce-account .woocommerce:not(#brx-content)
   {display:flex} (specificity 1,2,0, loads after this file) which would otherwise
   turn .dash__cards into a flex row. ─── */
.woocommerce-account .dash__cards{
  display:grid; grid-template-columns:1fr; gap:16px; margin:0 0 8px;
}
.woocommerce-account .brxe-woocommerce-account-page .dash__cards{ display:grid }
@media (min-width:600px){ .woocommerce-account .dash__cards{ grid-template-columns:1fr 1fr } }
.woocommerce-account .dash__card{
  display:flex; flex-direction:column; gap:8px; padding:28px;
  background:var(--color-2); text-decoration:none; color:var(--ink);
  min-height:160px; transition:background .15s ease;
}
.woocommerce-account .dash__card:hover{ background:var(--color-4) }
.woocommerce-account .dash__card .ico{ width:28px; height:28px; color:var(--ink) }
.woocommerce-account .dash__card .ico svg{ width:28px; height:28px; display:block; stroke-width:1.4 }
.woocommerce-account .dash__card h3{
  margin:auto 0 0;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.woocommerce-account .dash__card p{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.5 }
.woocommerce-account .dash__card .go{
  margin-top:6px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
}
.woocommerce-account .dash__card .go svg{ width:14px; height:14px; flex:none }

/* ─── Page shell (.ac) ─── */
.woocommerce-account .ac{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:32px var(--pad) 96px;
}
@media (min-width:960px){ .woocommerce-account .ac{ padding:48px var(--pad) 128px } }
/* TASK C (2026-06-02): Bricks core ships .woocommerce-account .woocommerce:not(#brx-content){display:flex} in a dynamic sheet (specificity 1,2,0 via :not(#id), and it loads AFTER this file). That turns the WC account-element' inner .woocommerce wrappers into flex parents, so .ac and .ac__grid (flex items with no width) shrink to content -> narrow left band + squeezed forms on the form sub-pages. Restore normal block flow for the wrappers inside the account element so .ac/.ac__grid fill the 1440 shell. !important is required to beat the :not(#id) specificity + later load order. Scoped to .woocommerce-account + the account element, so cart/checkout are untouched. */
.woocommerce-account .brxe-woocommerce-account-page .woocommerce{ display:block !important }

.woocommerce-account .ac__crumbs{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 12px;
  display:flex; gap:10px; align-items:center;
}
.woocommerce-account .ac__crumbs a{ color:var(--ink-soft); text-decoration:none }
.woocommerce-account .ac__crumbs a:hover{ color:var(--ink) }
.woocommerce-account .ac__crumbs span{ color:var(--muted); white-space:nowrap }
/* FIX B (#146, 2026-06-02): keep each crumb on one line so a wrap only happens
   BETWEEN crumbs (was breaking inside "MY ACCOUNT"); tighten the trail on mobile. */
.woocommerce-account .ac__crumbs a{ white-space:nowrap }
@media (max-width:560px){
  .woocommerce-account .ac__crumbs{ font-size:10px; letter-spacing:.14em; gap:7px }
}

.woocommerce-account .ac__head{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:8px 24px;
  margin:0 0 32px;
}
@media (min-width:960px){ .woocommerce-account .ac__head{ margin-bottom:48px } }
.woocommerce-account .ac__h1{
  margin:0;
  font-size:clamp(36px,5vw,56px);
  line-height:1; font-weight:300; letter-spacing:-0.02em;
}
.woocommerce-account .ac__greeting{
  font-size:13px; color:var(--ink-soft);
}
.woocommerce-account .ac__greeting b{ color:var(--ink); font-weight:500 }

/* ─── Layout: sidebar + content ─── */
.woocommerce-account .ac__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}
@media (min-width:880px){
  .woocommerce-account .ac__grid{
    grid-template-columns:240px minmax(0,1fr);
    gap:64px;
    align-items:flex-start;
  }
}
@media (min-width:1280px){
  .woocommerce-account .ac__grid{ grid-template-columns:260px minmax(0,1fr); gap:96px }
}

/* ─── Content building blocks ─── */
.woocommerce-account .ac__sec-h{
  margin:0 0 20px;
  padding:0 0 14px;
  border-bottom:1px solid var(--ink);
  font-size:16px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.woocommerce-account .ac__lead{
  font-size:16px; line-height:1.6; color:var(--ink-soft);
  max-width:60ch; margin:0 0 28px;
}
.woocommerce-account .ac__lead a{ color:var(--ink); font-weight:500 }

/* Buttons (shell .ac__btn / .ac__link) */
.woocommerce-account .ac__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 24px;
  background:var(--ink); color:var(--bg); border:0;
  font:inherit; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; text-decoration:none; transition:background .15s ease;
}
.woocommerce-account .ac__btn:hover{ background:var(--color-9) }
.woocommerce-account .ac__btn svg{ width:14px; height:14px }
.woocommerce-account .ac__btn--ghost{
  background:var(--bg); color:var(--ink); border:1px solid var(--ink);
}
.woocommerce-account .ac__btn--ghost:hover{ background:var(--ink); color:var(--bg) }
.woocommerce-account .ac__btn--sm{ height:40px; padding:0 18px; font-size:11px }

.woocommerce-account .ac__link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
}
.woocommerce-account .ac__link:hover{ color:var(--ink) }
.woocommerce-account .ac__link svg{ width:14px; height:14px }

/* empty state */
.woocommerce-account .ac__empty{
  padding:48px 0; text-align:left;
}
.woocommerce-account .ac__empty p{ font-size:16px; color:var(--ink-soft); margin:0 0 20px }

/* ═══ WOOCOMMERCE MARKUP HOOKS (Half B) — real WC class names, scoped ═══ */

/* ─── Account navigation (woocommerce_account_menu) ─── */
.woocommerce-account .woocommerce-MyAccount-navigation{ position:static }
/* TASK A (2026-06-02): Bricks core ships .woocommerce-account .woocommerce-MyAccount-navigation{background-color:var(--bricks-bg-light)} in a dynamic sheet that loads AFTER this file, so an equal-specificity reset loses. Bump specificity with the WC-account-element wrapper to keep the nav a transparent hairline list per design. */
.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation{ background:transparent }
@media (min-width:880px){ .woocommerce-account .woocommerce-MyAccount-navigation{ position:sticky; top:24px } }
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  /* FIX C (#146, 2026-06-02): tighter rhythm per operator — 16px -> 10px (~63% of design value). */
  padding:10px 0;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color .15s ease, padding .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link:first-child a{ border-top:1px solid var(--line) }
.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover{ color:var(--ink); padding-left:6px }
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a{
  color:var(--ink); font-weight:700; border-bottom-color:var(--ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--muted) }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover{ color:var(--danger) }
/* hover / active arrow — masked so it inherits currentColor */
.woocommerce-account .woocommerce-MyAccount-navigation-link a::after{
  content:""; width:14px; height:14px; flex:0 0 auto; opacity:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='m9 4 4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='m9 4 4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::after{ display:none }
.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover::after{ opacity:.5 }
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a::after{ opacity:1 }

/* ─── Content column ─── */
.woocommerce-account .woocommerce-MyAccount-content{ min-width:0 }
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{
  font-size:16px; line-height:1.6; color:var(--ink-soft); max-width:60ch; margin:0 0 28px;
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child a{ color:var(--ink); font-weight:500 }

/* ─── Edit-account & address forms (.form-row grid) ─── */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields__field-wrapper{
  display:grid; grid-template-columns:1fr 1fr; gap:16px 24px;
}
.woocommerce-account .woocommerce-EditAccountForm > .clear,
.woocommerce-account .woocommerce-address-fields__field-wrapper > .clear{ display:none }
.woocommerce-account .woocommerce-form-row{
  margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0;
}
.woocommerce-account .woocommerce-form-row--first{ grid-column:1 }
.woocommerce-account .woocommerce-form-row--last{ grid-column:2 }
.woocommerce-account .woocommerce-form-row--wide{ grid-column:1 / -1 }
.woocommerce-account .woocommerce-EditAccountForm fieldset{ grid-column:1 / -1 }
/* FIX A (#146, 2026-06-02): Bricks woocommerce-layer.min.css ships
   `.woocommerce .form-row-first{float:left;width:49%}` / `--last{float:right;width:49%}`
   (equal specificity to the rules above but loads AFTER seocon/style.css, so it wins).
   On the EditAccountForm grid that fixed 49% width fights the 1fr tracks, leaving
   first/last narrow (~60% combined) while the --wide rows fill 100%. Bump specificity
   with the .brxe-woocommerce-account-page wrapper and hand sizing back to the grid so
   first + last each fill their column = true 50/50. */
.woocommerce-account .brxe-woocommerce-account-page .woocommerce-form-row--first,
.woocommerce-account .brxe-woocommerce-account-page .woocommerce-form-row--last,
.woocommerce-account .brxe-woocommerce-account-page .woocommerce-form-row--wide{ float:none; width:auto }
@media (max-width:560px){
  .woocommerce-account .woocommerce-EditAccountForm,
  .woocommerce-account .woocommerce-address-fields__field-wrapper{ grid-template-columns:1fr }
  .woocommerce-account .woocommerce-form-row--first,
  .woocommerce-account .woocommerce-form-row--last{ grid-column:1 / -1 }
}
.woocommerce-account .woocommerce-form-row > label{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  line-height:1.3;
}
.woocommerce-account .woocommerce-form-row .required{ color:var(--ink); text-decoration:none; border:0 }
.woocommerce-account .woocommerce-form-row .optional{ color:var(--muted); font-weight:400; letter-spacing:.04em; text-transform:none }
.woocommerce-account .woocommerce-form-row > span:last-child em,
.woocommerce-account .woocommerce-form-row em{ display:block; font-style:normal; font-size:12px; color:var(--muted); margin-top:2px }

/* ─── Inputs / selects (scoped) ─── */
.woocommerce-account .woocommerce-Input,
.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce-EditAccountForm input,
.woocommerce-account .woocommerce-address-fields input.input-text,
.woocommerce-account .woocommerce-address-fields select{
  appearance:none; width:100%;
  border:1px solid var(--line-strong); background:var(--bg); color:var(--ink);
  padding:0 14px; height:48px; font:inherit; font-size:15px; line-height:1; border-radius:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-account .woocommerce-Input:hover,
.woocommerce-account .woocommerce input.input-text:hover{ border-color:var(--ink) }
.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account .woocommerce input.input-text:focus{ outline:0; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }

.woocommerce-account .woocommerce-EditAccountForm fieldset{
  border:1px solid var(--line-strong); padding:28px 24px 24px; margin:12px 0 0;
  display:flex; flex-direction:column; gap:20px;
}
.woocommerce-account .woocommerce-EditAccountForm legend{
  padding:0 10px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}

/* Woo native password show/hide ( .password-input + .show-password-input ) */
.woocommerce-account .woocommerce-password-hint{ display:block; font-size:12px; color:var(--muted); margin-top:6px }
.woocommerce-account .woocommerce .password-input{ position:relative; display:block; width:100% }
.woocommerce-account .woocommerce .password-input input{ padding-right:48px }
.woocommerce-account .woocommerce .show-password-input{
  position:absolute; right:0; top:0; height:48px; width:48px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft);
}
.woocommerce-account .woocommerce .show-password-input:hover{ color:var(--ink) }
.woocommerce-account .woocommerce .show-password-input::after{
  content:""; width:18px; height:18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.woocommerce-account .woocommerce .show-password-input.display-password{ color:var(--ink) }

/* ─── Buttons (.button / .woocommerce-Button) — scoped ─── */
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .woocommerce-Button.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 24px; width:auto; white-space:nowrap;
  background:var(--ink); color:var(--bg); border:0; border-radius:0;
  font:inherit; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; text-decoration:none; transition:background .15s ease;
}
.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input.button:hover,
.woocommerce-account .woocommerce-Button.button:hover{ background:var(--color-9); color:var(--bg) }
.woocommerce-account .woocommerce .button.button--ghost,
.woocommerce-account .woocommerce a.button.alt--ghost{
  background:var(--bg); color:var(--ink); border:1px solid var(--ink);
}

/* ─── Addresses (.woocommerce-Addresses) ─── */
.woocommerce-account .woocommerce-Addresses{
  display:grid; grid-template-columns:1fr; gap:40px;
}
@media (min-width:680px){ .woocommerce-account .woocommerce-Addresses{ grid-template-columns:1fr 1fr; gap:48px } }
.woocommerce-account .woocommerce-Address-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 16px; padding:0 0 12px; border-bottom:1px solid var(--line-strong);
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{
  margin:0; font-size:16px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
}
.woocommerce-account .woocommerce-Address-title .edit{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
}
.woocommerce-account .woocommerce-Address-title .edit:hover{ color:var(--ink) }
.woocommerce-account .woocommerce-Address address{
  font-style:normal; font-size:15px; line-height:1.7; color:var(--ink-soft);
}
.woocommerce-account .woocommerce-Address address::first-line{ color:var(--ink); font-weight:500 }

/* ─── Edit address form (woocommerce_form_field output uses .form-row) ─── */
.woocommerce-account .screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.woocommerce-account .woocommerce-address-fields .form-row{
  margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0;
  grid-column:1 / -1;
}
.woocommerce-account .woocommerce-address-fields .form-row-first{ grid-column:1 }
.woocommerce-account .woocommerce-address-fields .form-row-last{ grid-column:2 }
@media (max-width:560px){
  .woocommerce-account .woocommerce-address-fields .form-row-first,
  .woocommerce-account .woocommerce-address-fields .form-row-last{ grid-column:1 / -1 }
}
.woocommerce-account .woocommerce-address-fields .form-row > label{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); line-height:1.3;
}
.woocommerce-account .woocommerce-address-fields .form-row abbr.required,
.woocommerce-account .woocommerce-address-fields .form-row .required{ color:var(--ink); text-decoration:none; border:0 }
.woocommerce-account .woocommerce-address-fields .form-row .optional{ color:var(--muted); font-weight:400; letter-spacing:.04em; text-transform:none }
.woocommerce-account .woocommerce-input-wrapper{ display:block; width:100% }
.woocommerce-account .woocommerce-address-fields input::placeholder{ color:var(--muted) }
.woocommerce-account .woocommerce-address-fields select{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23141414' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
  padding-right:40px; cursor:pointer;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper{ margin:0 0 28px }
.woocommerce-account .woocommerce address + .woocommerce-address-fields,
.woocommerce-account .woocommerce-address-fields + p{ margin-top:0 }
/* === /My Account (account.css port) === */

/* === My Account (Phase 2, 2026-06-01) — logged-in dashboard surfaces === */
/* Orders table + .sg-status badges + order-details (view-order reuses the #32
   .oc__ overrides; this is the account-scoped Half-B set) + view-order intro /
   back-link / customer-details columns. EVERY selector scoped under
   .woocommerce-account so nothing leaks to cart/checkout/order-received.
   Status badge = the catalog' .sg-status primitive (NOT account.css .badge),
   per the locked operator decision. Tokens reconciled to the existing
   theme-style :root (--success/--info/--warning/--danger/--muted, etc.);
   NO new :root, NO undefined var. Dashboard + addresses are default WC +
   the Phase-0 ported CSS (no new rules needed here). */

/* ─── Orders status badge: the catalog .sg-status dot-pill ───
   (orders.php + view-order.php emit <span class="sg-status sg-status--{map}">).
   on-hold→--hold(warning) · processing→--processing(info) ·
   completed→--complete(success) · cancelled→--cancelled(danger) ·
   failed→--failed(danger) · pending/refunded→base muted grey. */
.woocommerce-account .sg-status{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}
.woocommerce-account .sg-status::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--muted); flex:0 0 auto;
}
.woocommerce-account .sg-status--hold::before{ background:var(--warning) }
.woocommerce-account .sg-status--processing::before{ background:var(--info) }
.woocommerce-account .sg-status--complete::before{ background:var(--success) }
.woocommerce-account .sg-status--cancelled::before{ background:var(--danger) }
.woocommerce-account .sg-status--failed::before{ background:var(--danger) }
/* pending / refunded keep the base muted dot (no modifier). */

/* ─── Orders table (.woocommerce-orders-table / shop_table) ─── */
.woocommerce-account .woocommerce-orders-table{ width:100%; border-collapse:collapse }
.woocommerce-account .woocommerce-orders-table thead th{
  text-align:left; padding:0 24px 14px 0; border-bottom:1px solid var(--ink);
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.woocommerce-account .woocommerce-orders-table tbody td,
.woocommerce-account .woocommerce-orders-table tbody th{
  padding:22px 24px 22px 0; border-bottom:1px solid var(--line-strong);
  font-size:14px; color:var(--ink); vertical-align:middle; font-weight:400; text-align:left;
}
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number,
.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number{ font-weight:500 }
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a{ color:var(--ink); text-decoration:none }
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a:hover{ text-decoration:underline }
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total{ font-variant-numeric:tabular-nums }
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-date{ color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap }
.woocommerce-account .woocommerce-orders-table .woocommerce-button{ white-space:nowrap }
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{ text-align:right }

/* responsive stacking (Woo's shop_table_responsive) */
@media (max-width:719px){
  .woocommerce-account .woocommerce-orders-table thead{ display:none }
  .woocommerce-account .woocommerce-orders-table tbody tr{
    display:block; padding:18px 0; border-bottom:1px solid var(--line-strong);
  }
  .woocommerce-account .woocommerce-orders-table tbody td,
  .woocommerce-account .woocommerce-orders-table tbody th{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:8px 0; border:0; text-align:right;
  }
  .woocommerce-account .woocommerce-orders-table tbody td::before,
  .woocommerce-account .woocommerce-orders-table tbody th::before{
    content:attr(data-title);
    font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
    text-align:left;
  }
  .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{ justify-content:flex-start; padding-top:12px }
  .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before{ display:none }
}

/* ─── view-order intro (<p> order #/date + .sg-status) + back-link ───
   (the order-details TABLE + addresses render via the #32 order/order-details*.php
   .oc__ overrides; those selectors are DISJOINT from the rules below, so no
   double-styling — see the conflict-audit note in the session report). */
.woocommerce-account .woocommerce-order > p:first-of-type{
  font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 0 32px;
}
.woocommerce-account .woocommerce-order > p:first-of-type strong{ color:var(--ink); font-weight:500 }
.woocommerce-account .woocommerce-order .order-status-line{ display:inline-flex; vertical-align:middle }
.woocommerce-account .woocommerce-order .order-status-line .sg-status{ margin-left:2px }

.woocommerce-account .addr-back{ margin:0 0 8px }
.woocommerce-account .addr-back a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
}
.woocommerce-account .addr-back a:hover{ color:var(--ink) }
.woocommerce-account .addr-back a svg{ width:14px; height:14px }

/* ─── Order-details table (.woocommerce-table--order-details) ───
   Account-scoped Half-B port. On view-order the order/order-details.php #32
   override renders the .oc__ design (this table is not emitted there), and on
   /checkout/order-received/ the body class is .woocommerce-order-received (NOT
   .woocommerce-account) so these rules never match there either — inert +
   conflict-free, kept for any in-account context that emits the stock table. */
.woocommerce-account .woocommerce-table--order-details{ width:100%; border-collapse:collapse; margin:0 0 48px }
.woocommerce-account .woocommerce-table--order-details thead th{
  text-align:left; padding:0 24px 14px 0; border-bottom:1px solid var(--ink);
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.woocommerce-account .woocommerce-table--order-details thead th.product-total,
.woocommerce-account .woocommerce-table--order-details td.product-total,
.woocommerce-account .woocommerce-table--order-details tfoot td{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.woocommerce-account .woocommerce-table--order-details tbody td{
  padding:20px 24px 20px 0; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle;
}
.woocommerce-account .woocommerce-table--order-details th.product-total,
.woocommerce-account .woocommerce-table--order-details td.product-total{ padding-right:0 }
.woocommerce-account .woocommerce-table--order-details td.product-name{ font-weight:500; color:var(--ink) }
.woocommerce-account .woocommerce-table--order-details td.product-name .wc-item-meta{
  margin:6px 0 0; padding:0; list-style:none; font-size:12px; color:var(--ink-soft); font-weight:400;
}
.woocommerce-account .woocommerce-table--order-details tfoot th{
  text-align:left; padding:14px 24px 14px 0; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.woocommerce-account .woocommerce-table--order-details tfoot td{ padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink) }
/* FIX D (#146, 2026-06-02): the grand-total row is keyed `order_total` and is NOT the
   last <tr> (WC appends a Payment-method row after it), so tr:last-child mis-targeted
   Payment method. view-order.php now stamps `.order-total` on the Total row; target it. */
.woocommerce-account .woocommerce-table--order-details tfoot tr.order-total th,
.woocommerce-account .woocommerce-table--order-details tfoot tr.order-total td{
  border-bottom:0; border-top:1px solid var(--line-strong); padding-top:18px; font-size:18px; color:var(--ink);
}
.woocommerce-account .woocommerce-table--order-details tfoot tr.order-total td{ font-weight:500 }
.woocommerce-account .woocommerce-table--order-details tfoot small,
.woocommerce-account .woocommerce-table--order-details tfoot .includes_tax{
  display:block; margin-top:6px; text-align:right; line-height:1.4; font-size:12px;
  color:var(--muted); font-weight:400; letter-spacing:0; text-transform:none;
}

/* ─── Customer details columns (.woocommerce-customer-details) ───
   Account-scoped; the #32 override renders .oc__addrs on both view-order and
   order-received, so these stock-column rules are a harmless safety net here. */
.woocommerce-account .woocommerce-customer-details{ margin-top:8px }
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses{
  display:grid; grid-template-columns:1fr; gap:40px; margin:0;
}
@media (min-width:680px){ .woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses{ grid-template-columns:1fr 1fr; gap:48px } }
.woocommerce-account .woocommerce-customer-details .col-1,
.woocommerce-account .woocommerce-customer-details .col-2{ min-width:0 }
.woocommerce-account .woocommerce-customer-details address{
  font-style:normal; font-size:15px; line-height:1.7; color:var(--ink-soft);
}
.woocommerce-account .woocommerce-customer-details .addr-back{ margin-top:48px }
/* === /My Account (Phase 2) === */

/* === My Account (Phase 3, 2026-06-01) -- logged-out form pages (login / register / lost-password) === */
/* Ported from claude-design/account-login.html + account-lost-password.html (inline <style> deltas).
   EVERY selector scoped under .woocommerce-account so nothing leaks. Targets the REAL rendered
   classes: .oska--login-register / .oska--woo-half / .brxe-woocommerce-account-form-login|register,
   WC .form-group rows, .woocommerce-ResetPassword, .pw / .pw__* (added to the lost-pw / confirmation
   Bricks templates). Inputs + ink buttons already covered by the Phase 0 base block; here we add the
   2-col confirm, the LOGIN/REGISTER heads, the remember-me checkbox skin, register intro/hint/privacy
   spacing, and the lost-password .pw column + states. Tokens reconciled to the existing :root
   (--ink/--ink-soft/--muted/--line/--line-strong/--bg/--color-9/--success). No new :root, no new vars. */

/* --- Login / Register: equal 2-column --- */
.woocommerce-account .oska--login-register{
  display:flex; flex-wrap:wrap; gap:48px 64px; align-items:flex-start;
}
@media (min-width:1100px){ .woocommerce-account .oska--login-register{ column-gap:96px } }
.woocommerce-account .oska--login-register > .oska--woo-half{
  flex:1 1 320px; min-width:0; width:auto;
}
@media (max-width:759px){
  .woocommerce-account .oska--login-register{ gap:48px }
  .woocommerce-account .oska--login-register > .oska--woo-half{ flex:1 1 100% }
}

/* --- LOGIN / REGISTER column heads (added to template as .oska--woo-head) --- */
.woocommerce-account .oska--woo-head{
  margin:0 0 24px; padding:0 0 14px; border-bottom:1px solid var(--ink);
  font-size:16px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  line-height:1;
}

/* --- Register intro / hint --- */
.woocommerce-account .oska--woo-intro{
  font-size:14px; line-height:1.6; color:var(--ink-soft);
  margin:0 0 28px; max-width:46ch;
}
.woocommerce-account .oska--login-register .generate-password-text{
  font-size:13px; line-height:1.6; color:var(--ink-soft); margin:20px 0 0; max-width:48ch;
}
.woocommerce-account .oska--login-register .woocommerce-privacy-policy-text{
  font-size:12px; line-height:1.6; color:var(--ink-soft); margin:20px 0 0; max-width:48ch;
}
.woocommerce-account .oska--login-register .woocommerce-privacy-policy-text a{
  color:var(--ink); font-weight:500;
}

/* --- Login / register form-group rows --- */
.woocommerce-account .oska--login-register .form-group{
  margin:0 0 20px; display:flex; flex-direction:column; gap:6px;
}
.woocommerce-account .oska--login-register .form-group > label{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); line-height:1.3;
}
.woocommerce-account .oska--login-register .form-group .required{
  color:var(--ink); text-decoration:none; border:0;
}
.woocommerce-account .oska--login-register .form-group.submit{ margin-bottom:0 }

/* --- Remember-me (style WC native checkbox like .wp-check) --- */
.woocommerce-account .oska--login-register .form-group.remember{ margin:0 0 20px }
.woocommerce-account .oska--login-register .woocommerce-form-login__rememberme{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font-size:13px; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--ink); cursor:pointer;
}
.woocommerce-account .oska--login-register .woocommerce-form-login__rememberme .woocommerce-form__input-checkbox,
.woocommerce-account .oska--login-register .woocommerce-form-login__rememberme input[type=checkbox]{
  appearance:none; -webkit-appearance:none; flex:0 0 18px;
  width:18px; height:18px; margin:0; border:1px solid var(--line-strong);
  background:var(--bg); display:inline-grid; place-items:center;
  cursor:pointer; border-radius:0; position:relative;
}
.woocommerce-account .oska--login-register .woocommerce-form-login__rememberme input[type=checkbox]:checked{
  background:var(--ink); border-color:var(--ink);
}
.woocommerce-account .oska--login-register .woocommerce-form-login__rememberme input[type=checkbox]:checked::after{
  content:""; width:5px; height:9px; border:solid #fff; border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
.woocommerce-account .oska--login-register .woocommerce-form-login__rememberme input[type=checkbox]:focus-visible{
  outline:0; box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--ink);
}

/* --- Lost-password link under login --- */
.woocommerce-account .oska--login-register .woocommerce-LostPassword{ margin:16px 0 0 }
.woocommerce-account .oska--login-register .woocommerce-LostPassword a{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); text-underline-offset:3px;
}
.woocommerce-account .oska--login-register .woocommerce-LostPassword a:hover{ color:var(--ink) }

/* --- Password show/hide eye toggle (.pw-wrap + .pw-toggle) -- added to templates --- */
.woocommerce-account .pw-wrap{ position:relative; display:block; width:100% }
.woocommerce-account .pw-wrap .input-text{ padding-right:48px }
.woocommerce-account .pw-toggle{
  position:absolute; right:0; top:0; height:48px; width:48px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--ink-soft); cursor:pointer;
}
.woocommerce-account .pw-toggle:hover{ color:var(--ink) }
.woocommerce-account .pw-toggle svg{ width:18px; height:18px }

/* === Lost password (.pw column + .pw__* + 3 states) === */
.woocommerce-account .pw{ max-width:560px }
.woocommerce-account .pw__intro{
  font-size:14px; line-height:1.7; color:var(--ink-soft); margin:0 0 36px; max-width:50ch;
}
.woocommerce-account .pw__intro a{ color:var(--ink); font-weight:500 }
.woocommerce-account .pw__h2{
  margin:48px 0 24px; padding:0 0 14px; border-bottom:1px solid var(--ink);
  font-size:16px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}

/* lost-pw form rows (the real WC ResetPassword markup uses .woocommerce-form-row p) */
.woocommerce-account .pw .woocommerce-form-row,
.woocommerce-account .woocommerce-ResetPassword .woocommerce-form-row{
  margin:0 0 20px; display:flex; flex-direction:column; gap:6px;
}
.woocommerce-account .pw .woocommerce-form-row label,
.woocommerce-account .woocommerce-ResetPassword .woocommerce-form-row label{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.woocommerce-account .pw .woocommerce-form-row .required,
.woocommerce-account .woocommerce-ResetPassword .woocommerce-form-row .required{
  color:var(--ink); text-decoration:none; border:0;
}
.woocommerce-account .woocommerce-ResetPassword > .clear{ display:none }

/* lost-pw actions: reset/save button + back-to-login link */
.woocommerce-account .pw__actions{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:28px;
}
.woocommerce-account .pw__back{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.woocommerce-account .pw__back:hover{ color:var(--ink) }
.woocommerce-account .pw__back svg{ width:14px; height:14px }

/* State 2 -- email-sent success card (real WC .woocommerce-message) */
.woocommerce-account .pw .woocommerce-message{
  display:flex; align-items:flex-start; gap:14px; max-width:560px;
  margin:0 0 36px; padding:18px 20px;
  border:1px solid var(--line-strong); border-left:3px solid var(--success);
  background:var(--bg); font-size:14px; line-height:1.6;
}
.woocommerce-account .pw .woocommerce-message svg{
  width:20px; height:20px; flex:0 0 20px; color:var(--success); margin-top:1px;
}
.woocommerce-account .pw .woocommerce-message::before{ display:none }

/* form-hint reused on reset (state 3) -- already defined in Phase 0 as .woocommerce-password-hint;
   add the design's inline .form-hint variant if the template emits it */
.woocommerce-account .form-hint{
  font-size:12px; color:var(--muted); margin:4px 0 0; line-height:1.5; display:block;
}
/* === /My Account (Phase 3) === */

/* ===== FIX (2026-06-02): PDP gallery image fill on mobile =====
   The product carousel's slide <a> has aspect-ratio:2/3 (carousel-products.css)
   but the <img>/<picture> only get height:100%+object-fit:contain inside the
   gallery's desktop-only @media (min-width:992px) block. Below 992px the image
   keeps height:auto, so it sizes to its natural ratio (shorter than the 2:3
   cell) and leaves a tall empty white area. Make the image FILL its cell at all
   widths (mirrors the desktop rule, minus the desktop viewport max-height/width).
   CSS-only: does NOT touch the carousel JS, Flickity init, or variant image-swap.
   Selector carries 2 classes so it wins over the later single-class
   carousel-products.css img rule regardless of source order. */
.oska--prod-d-gallery .brxe-seoc-carousel-products figure a{
  overflow: hidden;
}
.oska--prod-d-gallery .brxe-seoc-carousel-products picture{
  display: block;
  width: 100%;
  height: 100%;
}
.oska--prod-d-gallery .brxe-seoc-carousel-products img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== FIX (2026-06-02): PDP gallery Flickity viewport height on mobile =====
   REAL CAUSE: Flickity sets an INLINE pixel height on .flickity-viewport equal to
   the tallest cell measured AT INIT-TIME WIDTH. The desktop sizing system lives in
   the oska--prod-d-gallery global-class _cssCustom, gated @media(min-width:992px)
   (max-width:calc((100vh-200px)*2/3) + max-height on the cell). BELOW 992px there is
   NO sizing rule, so the slide self-sizes small via aspect-ratio:2/3 while the
   viewport stays locked at the tall desktop-measured inline px height -> a huge empty
   white area below the image (or, on some widths, an oversized/overflowing image).
   FIX: below 992px, make the viewport derive its height from its own (live) width via
   aspect-ratio:2/3, overriding Flickity's stale inline height (!important needed to
   beat the inline style). All 8 slide cells are 2:3, so this matches every slide and
   is identical to current behaviour at the 992px boundary (W*3/2 == measured px).
   CSS-ONLY: does NOT touch Flickity init, variant selection, add-to-cart, or the
   variant->image swap. Complements (does not overlap) the >=992px _cssCustom block. */
@media (max-width: 991px) {
  .oska--prod-d-gallery .brxe-seoc-carousel-products .flickity-viewport {
    height: auto !important;
    aspect-ratio: 2 / 3;
  }
}

/* ===== FIX (2026-06-02): PDP gallery WIDTH on mobile (overflow) =====
   REAL CAUSE: the PDP two-column container .oska--prod-d-con IS a .brxe-container,
   and the Bricks theme default rule '.brxe-container{width:1440px}' (no media query)
   forces an EXPLICIT width:1440px on it at every viewport. Its parent section
   .oska--prod-d is display:flex; flex-direction:column, so .oska--prod-d-con is a
   CROSS-AXIS flex item -- an explicit width is honoured (NOT shrunk to fit), so it
   stays 1440px and overflows the ~375px mobile viewport. Everything inside inherits
   that 1440px: the gallery (_width:100% at mobile_landscape == 100% of 1440),
   .brxe-seoc-carousel-products / .main-carousel / .flickity-viewport / .flickity-slider
   (no width constraint below the desktop @media(min-width:992px) _cssCustom block),
   the slide figure>a (width:100%) and finally the <img> (width:100%) -> full-size,
   overflowing image (confirmed on a real phone).
   FIX: below 992px, constrain the container to the viewport (width/max-width:100%),
   then mirror that down the carousel chain (carousel root / main-carousel / viewport /
   slider) so the slide + image fit. Flickity sets NO inline px width on the slider or
   slides here (only the inline VIEWPORT HEIGHT, already overridden by the height fix
   above), so plain CSS reflows the whole chain on a fresh init -- NO JS required.
   !important beats the single-class Bricks-default .brxe-container{width:1440px} and
   the figure>a max-width:none regardless of source order. Complements (does not
   overlap) the >=992px _cssCustom sizing block. CSS-ONLY: does NOT touch Flickity
   init/options, variant selection, add-to-cart, or the variant->image swap. */
@media (max-width: 991px) {
  .oska--prod-d-con {
    width: 100% !important;
    max-width: 100% !important;
  }
  .oska--prod-d-gallery,
  .oska--prod-d-gallery .brxe-seoc-carousel-products,
  .oska--prod-d-gallery .brxe-seoc-carousel-products .main-carousel,
  .oska--prod-d-gallery .brxe-seoc-carousel-products .flickity-viewport,
  .oska--prod-d-gallery .brxe-seoc-carousel-products .flickity-slider {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== FIX (2026-06-02): PDP 'You Might Also Like' = 2-col grid on mobile =====
   .oska--pdp-rec-track is a horizontal-scroll flex carousel
   (flex-wrap:nowrap; overflow-x:auto; scroll-snap). On mobile the operator wants
   a wrapping 2-column GRID matching the shop archive (.oska--prod-cols-item is
   calc(50% - 16px) at mobile_landscape <=767px). Below 768px, convert the track
   to a 2-col grid and neutralise the scroller (flex-basis / scroll-snap / overflow)
   so the pcardb cards wrap into rows of two. >=768px keeps the existing carousel.
   !important is required to beat the global-class typed-control + _cssCustom rules
   (which render as inline Bricks CSS later in the document). CSS-only. */
@media (max-width:767px){
  .oska--pdp-rec-track{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 16px;
    row-gap: 32px;
    overflow: visible !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 0;
  }
  .oska--pdp-rec-track > *{
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: auto !important;
    scroll-snap-align: none !important;
    min-width: 0;
  }
}


/* order-detail table -- match design: no box border, no grey footer fills, plain qty (override Bricks-core WC table CSS) */
.woocommerce-account .woocommerce-table--order-details{ border:0 !important; }
.woocommerce-account .woocommerce-table--order-details,
.woocommerce-account .woocommerce-table--order-details thead,
.woocommerce-account .woocommerce-table--order-details tbody,
.woocommerce-account .woocommerce-table--order-details tfoot,
.woocommerce-account .woocommerce-table--order-details tr,
.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td{ background:transparent !important; border-left:0 !important; border-right:0 !important; }
.woocommerce-account .woocommerce-table--order-details .product-quantity{ background:none !important; padding:0 !important; border:0 !important; border-radius:0 !important; color:var(--ink-soft); font-weight:400; }


/* edit-address form: enforce 2-col grid + kill Bricks .form-row 49% float (legacy form-row-first/-last; FIX A only covered edit-account BEM --first/--last) */
.woocommerce-account .brxe-woocommerce-account-page .woocommerce-address-fields__field-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
.woocommerce-account .brxe-woocommerce-account-page .woocommerce-address-fields__field-wrapper .form-row{ grid-column:1 / -1; float:none; width:auto; max-width:none; }
.woocommerce-account .brxe-woocommerce-account-page .woocommerce-address-fields__field-wrapper .form-row-first{ grid-column:1; }
.woocommerce-account .brxe-woocommerce-account-page .woocommerce-address-fields__field-wrapper .form-row-last{ grid-column:2; }
@media (max-width:560px){ .woocommerce-account .brxe-woocommerce-account-page .woocommerce-address-fields__field-wrapper{ grid-template-columns:1fr; } .woocommerce-account .brxe-woocommerce-account-page .woocommerce-address-fields__field-wrapper .form-row-first, .woocommerce-account .brxe-woocommerce-account-page .woocommerce-address-fields__field-wrapper .form-row-last{ grid-column:1 / -1; } }


/* drawer body must NOT wrap -- Bricks core @max-767 .brxe-block{flex-wrap:wrap} made the body wrap SHOP/MORE into off-screen side columns; earlier nowrap fix was on the panel only */
.nav-overlay .oska--drawer-body{ flex-wrap:nowrap !important; }


/* ===== Mobile header + drawer fixes (2026-06-03) =====================
   STAGING child-theme additions. Mobile breakpoint = max-width:991px,
   matching the header's hamburger/offcanvas switch (see line ~109 and the
   `Mobile header layout (≤991px)` block). Bricks page-inline CSS loads
   AFTER this stylesheet, so the mobile header overrides that must beat the
   inline `.oska--header-lang...` rules use !important (same pattern the
   existing mobile-header block above already uses). ============== */

/* --- Fix 1: hide top-nav language switcher on mobile + truly center logo --- */
@media (max-width: 991px) {
    /* Beats Bricks page-inline `.oska--header-lang.brxe-polylang-language-switcher{margin-left:auto}` */
    .oska--header-lang,
    .oska--header-lang.brxe-polylang-language-switcher {
        display: none !important;
    }
    /* Absolutely center the logo in the bar so it is independent of the
       (unequal) side-zone widths: hamburger toggle pins left, cart/account
       cluster pins right (container is already justify-content:space-between),
       and the logo sits dead-center. */
    .oska--header-con.brxe-container {
        position: relative !important;
    }
    .oska--header-left.brxe-block {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 1;
    }
}

/* --- Fix 2: drawer "My Account" item inline (icon + text on one row) ---
   The account block has no class of its own. On the DE template it carries
   #brxe-nvi6; on EN it is a bare .brxe-block holding the person icon. Bricks'
   default .brxe-block is flex-direction:column, so the icon stacks above the
   text on EN. Force a single centered row on BOTH templates. */
.nav-overlay #brxe-nvi6,
.nav-overlay .oska--drawer-body > .brxe-block:has(> i[class*="ion-md-person"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 0 16px !important;
    border-bottom: 0 !important;
}
/* Normalize the gap between the account row and the hairline (the SHOP
   section's border-top) so it matches the drawer's vertical rhythm. */
.nav-overlay #brxe-nvi6 + .oska--drawer-section,
.nav-overlay .oska--drawer-body > .brxe-block:has(> i[class*="ion-md-person"]) + .oska--drawer-section {
    padding-top: 16px !important;
}

/* --- Fix 3: hide the drawer scrollbar but keep it scrollable --- */
.oska--drawer-body {
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* legacy Edge / IE */
}
.oska--drawer-body::-webkit-scrollbar { display: none; }  /* WebKit / Blink */

/* --- Fix 4: bottom breathing room so the last drawer items are not flush
   against the pinned footer (.oska--drawer-foot ~64px tall) --- */
.oska--drawer-body {
    padding-bottom: 64px;
}

/* --- Fix 5: footer language section left-aligned + styled <select> ---
   The switcher is being converted to a Polylang dropdown <select> in parallel.
   Left-align the footer and give the select a clean drawer-matched look.
   (The global form-control base excludes .pll-switcher-select, so these are
   the only rules that style it.) */
.oska--drawer-foot {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}
.oska--drawer-foot select,
.oska--drawer-foot .pll-switcher-select {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    min-width: 96px;
    max-width: 100%;
    margin: 0;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
    background: #fff url(/wp-content/uploads/select-2.svg) no-repeat right 10px center;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    padding: 8px 32px 8px 12px;
    cursor: pointer;
}
.oska--drawer-foot select:focus,
.oska--drawer-foot .pll-switcher-select:focus {
    outline: none;
    border-color: var(--ink);
}
/* ===== end mobile header + drawer fixes (2026-06-03) ===== */