/*
 * myaccount.css — Session 16
 * My Account pages: wrapper · nav · dashboard · orders · order detail
 * tracker · addresses · wishlist · delete data · login/register.
 * All colours via --silure-* tokens. border-radius: 0 throughout.
 *
 * "was -0.03em" / "was Italiana, see file header" markers (Session 30
 * close-out, letter-spacing + Italiana removal sweeps): this file
 * predates the site's -0.01em heading standard and CLAUDE.md's
 * Italiana ban, and still declared both old values on
 * .silure-login-heading. Confirmed genuinely orphaned -- live-fetched
 * the real guest My Account login view and its actual H1 ("Welcome")
 * carries no class at all, just an inline style, in
 * woocommerce/myaccount/form-login.php (fixed separately, same round)
 * -- this selector matches nothing in current markup. Corrected anyway
 * rather than left as dead code sitting at the wrong, banned values.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT GREETING & CONTENT
   (.silure-account-wrap/-header/-heading/-nav-wrap/-menu* removed — dead
   code from a superseded sidebar-layout redesign, targeting classes that
   don't exist anywhere in the live my-account.php/navigation.php templates.
   .silure-account-heading also referenced 'Italiana', removed sitewide in
   Session 22 — further confirmation this block predates the current
   templates. .silure-account-greeting and .silure-account-content below
   are the two selectors from the old block that do match the live markup.)
═══════════════════════════════════════════════════════════════════════════ */

.silure-account-greeting {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--silure-muted, #7A7672);
    margin: 0;
    letter-spacing: 0.5px;
}

/* padding-left was 52px (Session 30 fix) -- a leftover from the old
   sidebar-layout redesign this class predates (content used to sit in a
   second column next to a nav sidebar, needing its own indent). In the
   current single-column layout .silure-account-page's own 80px padding
   already positions this correctly, so the extra 52px just pushed content
   52px past the heading/tabs at wider viewports. Only ever masked below
   the 900px breakpoint, where the mobile media query below zeroes this
   rule's padding out entirely -- confirmed live: no visible gap at
   ≤900px, a consistent 52px gap above it, at every width checked. */
.silure-account-content {
    padding: 0;
    min-height: 400px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION TABS — live structure is nav.silure-account-nav > ul > li > a
   (WooCommerce's navigation.php renders <a> with no class; active state is
   the "is-active" class WooCommerce's wc_get_account_menu_item_classes()
   puts on the <li>, confirmed against wc-account-functions.php). No prior
   CSS targeted this structure at all — tabs were rendering fully unstyled.
   Pattern follows the Contact form tabs (brand-pages.css #silure-contact-
   form .silure-form-tab): no background/border/radius at rest, colored
   text + bottom border only when active. Scoped + !important here too —
   not because kill_pink_late's button reset can reach <a> tags (it can't,
   it's scoped to button/[type=button|submit|reset]), but so this doesn't
   silently regress the same way if these ever become buttons.
   font-family corrected to DM Mono (Session 30) — this rule's own comment
   already named the Contact form tabs as the reference, but had actually
   specified Mulish; checked brand-pages.css directly and the Contact
   tabs are DM Mono, so this was out of step with its own stated source.
   font-size/padding/letter-spacing/active-weight now reference the shared
   --silure-tab-* tokens (style.css :root) instead of repeating literal
   values — this component is the confirmed standard those tokens are set
   from; Contact's tabs were updated to reference the same tokens rather
   than their own drifted values. */

nav.silure-account-nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    /* No row-level border here (Session 30) -- the Contact form tabs this
       nav is patterned on only ever use the per-tab active-state underline
       below, nothing on the row itself. This was drawing a second, parallel
       full-width line under every tab, active or not. */
}

nav.silure-account-nav li {
    margin: 0;
}

/* Heading gap against "HI, MANISH" above -- confirmed live: the <a> already
   computes to text-align: start, never center, so this was never a
   text-align problem. It's the first tab's own padding-left (from the
   shared --silure-tab-padding token), which the heading has none of.
   Zeroed out for the first tab only; every other tab keeps the shared
   padding for normal inter-tab spacing. */
nav.silure-account-nav li:first-child a {
    padding-left: 0;
}

/* Real root cause of the "Orders looks off-center vs Dashboard" complaint
   (confirmed via side-by-side screenshots): the active-tab underline used
   to be border-bottom on this <a> itself, so it spanned the <a>'s full
   padded click-target box (text + 20px each side) rather than the text.
   On a long word like DASHBOARD that's barely visible; on a short one
   like ORDERS the underline reads as clearly wider than the label. Fixed
   by splitting --silure-tab-padding's two halves across two elements:
   this <a> keeps only the horizontal half (click-target width / spacing
   between tabs), and the vertical half + the underline itself both move
   onto the inner .silure-account-nav__label span (navigation.php), an
   inline element that naturally hugs its own text width. Because the <a>
   no longer carries any vertical padding of its own, the label's border
   still lands at exactly the same vertical position as before -- only
   the width changed. */
nav.silure-account-nav a {
    display: block;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: -1px;
    padding: 0 20px;
    font-family: 'DM Mono', monospace;
    font-size: var(--silure-tab-font-size, 11px);
    font-weight: var(--silure-tab-weight-base, 400);
    letter-spacing: var(--silure-tab-letter-spacing, 1.5px);
    text-transform: uppercase;
    /* Explicit left-align on every tab uniformly (Dashboard through Sign
       Out), not just relying on the browser's default text-align: start.
       Confirmed live this already computed to "start" everywhere -- no
       tab was actually centered -- but "start" is direction-dependent and
       implicit; this makes the left position guaranteed and explicit
       regardless of any future ancestor direction/writing-mode change. */
    text-align: left;
    color: var(--silure-muted, #7A7672) !important;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

nav.silure-account-nav a .silure-account-nav__label {
    display: inline-block;
    padding: 12px 0;
    border-bottom: 2px solid transparent !important;
    transition: border-color 0.2s ease;
}

nav.silure-account-nav a:hover {
    color: var(--silure-primary, #050505) !important;
}

nav.silure-account-nav li.is-active a {
    color: var(--silure-primary, #050505) !important;
    font-weight: var(--silure-tab-weight-active, 600);
}

nav.silure-account-nav li.is-active a .silure-account-nav__label {
    border-bottom-color: var(--silure-primary, #050505) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════════════════════════════ */

.silure-dashboard-intro {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--silure-text, #444444);
    line-height: 1.7;
    margin: 0;
    letter-spacing: 0.5px;
}

.silure-dashboard-intro a {
    color: var(--silure-primary, #050505);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORDERS TABLE
═══════════════════════════════════════════════════════════════════════════ */

.silure-orders-wrap { overflow-x: auto; }

.silure-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.silure-orders-th {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    padding: 0 12px 12px;
    text-align: left;
    border-bottom: 1px solid var(--silure-border-mid, #C8C4BF);
    white-space: nowrap;
}

.silure-orders-th:first-child { padding-left: 0; }

.silure-orders-td {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--silure-text, #444444);
    padding: 16px 12px;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
    vertical-align: middle;
}

.silure-orders-td:first-child { padding-left: 0; }

.silure-orders-num {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--silure-primary, #050505);
    text-decoration: none;
    letter-spacing: 0.3px;
}

.silure-orders-num:hover { text-decoration: underline; }

/* Product cell */
.silure-orders-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.silure-orders-product-img {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    object-fit: cover;
    background: var(--silure-surface, #F3F0EB);
}

.silure-orders-product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.silure-orders-product-name {
    font-size: 13px;
    font-weight: 400;
    color: var(--silure-text, #444444);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.silure-orders-product-more {
    font-size: 11px;
    color: var(--silure-muted, #7A7672);
    letter-spacing: 0.5px;
}

/* Status badges */
.silure-order-badge {
    display: inline-block;
    font-family: 'Mulish', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 8px;
    white-space: nowrap;
}

.silure-order-badge--pending,
.silure-order-badge--on-hold {
    background: var(--silure-surface, #F3F0EB);
    color: var(--silure-muted, #7A7672);
}

.silure-order-badge--processing {
    background: #EBF4FF;
    color: #1A5FAC;
}

.silure-order-badge--shipped,
.silure-order-badge--wc-shipped {
    background: #E6F9F0;
    color: #0A6640;
}

.silure-order-badge--completed {
    background: #050505;
    color: #FBF9F6;
}

.silure-order-badge--cancelled,
.silure-order-badge--refunded,
.silure-order-badge--failed {
    background: #FDECEA;
    color: #B00020;
}

/* View button */
.silure-orders-view {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--silure-primary, #050505);
    border-bottom: 1px solid var(--silure-primary, #050505);
    padding-bottom: 1px;
    transition: opacity 0.2s;
}

.silure-orders-view:hover { opacity: 0.6; }

/* Pagination */
.silure-orders-pagination {
    display: flex;
    gap: 20px;
    margin-top: 24px;
    align-items: center;
}

.silure-orders-pager {
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--silure-primary, #050505);
    transition: opacity 0.2s;
}

.silure-orders-pager:hover { opacity: 0.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   ORDER DETAIL
═══════════════════════════════════════════════════════════════════════════ */

/* Meta bar */
.silure-order-meta-bar {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
    margin-bottom: 32px;
}

.silure-order-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.silure-order-meta-label {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
}

.silure-order-meta-value {
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--silure-text, #444444);
}

.silure-order-invoice-link {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--silure-primary, #050505);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity 0.2s;
}

.silure-order-invoice-link:hover { opacity: 0.6; }

/* ── Status tracker ───────────────────────────────────────────────────── */

.silure-order-tracker {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    padding: 24px 0;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
    overflow-x: auto;
}

.silure-tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.silure-tracker-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--silure-border-mid, #C8C4BF);
    background: var(--silure-bg, #FBF9F6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s, background 0.3s;
    color: var(--silure-bg, #FBF9F6);
}

.silure-tracker-step.is-done .silure-tracker-dot {
    border-color: var(--silure-primary, #050505);
    background: var(--silure-primary, #050505);
}

.silure-tracker-step.is-active .silure-tracker-dot {
    border-color: var(--silure-primary, #050505);
    background: var(--silure-bg, #FBF9F6);
    box-shadow: 0 0 0 3px rgba(5, 5, 5, 0.12);
}

.silure-tracker-label {
    font-family: 'Mulish', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    white-space: nowrap;
}

.silure-tracker-step.is-active .silure-tracker-label,
.silure-tracker-step.is-done .silure-tracker-label {
    color: var(--silure-primary, #050505);
    font-weight: 600;
}

.silure-tracker-line {
    flex: 1;
    height: 2px;
    background: var(--silure-border-mid, #C8C4BF);
    margin: 0 4px;
    margin-bottom: 24px;
    transition: background 0.3s;
}

.silure-tracker-line.is-done {
    background: var(--silure-primary, #050505);
}

/* Tracking link */
.silure-order-tracking {
    display: flex;
    gap: 12px;
    align-items: center;
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    margin-bottom: 28px;
}

.silure-order-tracking-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    flex-shrink: 0;
}

.silure-order-tracking-link {
    color: var(--silure-primary, #050505);
    text-decoration: none;
    border-bottom: 1px solid var(--silure-primary, #050505);
    padding-bottom: 1px;
    transition: opacity 0.2s;
}

.silure-order-tracking-link:hover { opacity: 0.6; }

/* Order items table */
.silure-order-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.silure-order-items-table thead th {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    padding: 0 12px 12px;
    text-align: left;
    border-bottom: 1px solid var(--silure-border-mid, #C8C4BF);
}

.silure-order-items-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--silure-text, #444444);
    vertical-align: top;
}

.silure-order-item-img-cell {
    width: 60px;
    padding-right: 0 !important;
}

.silure-order-item-img-cell img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    background: var(--silure-surface, #F3F0EB);
    display: block;
}

.silure-order-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 14px !important;
}

.silure-order-item-name {
    font-weight: 400;
    font-size: 13px;
    color: var(--silure-text, #444444);
}

.silure-order-item-purity,
.silure-order-item-qty {
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
}

.silure-order-item-total { text-align: right; }

.silure-order-items-table tfoot tr {
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
}

.silure-order-items-table tfoot th,
.silure-order-items-table tfoot td {
    font-family: 'Mulish', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: var(--silure-muted, #7A7672);
    padding: 10px 12px;
    text-align: right;
}

.silure-order-items-table tfoot th { text-align: left; }

.silure-order-total-row--order-total th,
.silure-order-total-row--order-total td {
    font-size: 15px;
    font-weight: 600;
    color: var(--silure-primary, #050505) !important;
    border-top: 1px solid var(--silure-border-mid, #C8C4BF);
}

/* Delivery address */
.silure-order-addresses { margin: 24px 0 32px; }

.silure-order-address-title {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    margin: 0 0 8px;
}

.silure-order-address-body {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--silure-text, #444444);
    font-style: normal;
    line-height: 1.7;
}

.silure-order-back {
    display: inline-block;
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--silure-muted, #7A7672);
    margin-top: 8px;
    transition: color 0.2s;
}

.silure-order-back:hover { color: var(--silure-primary, #050505); }

/* ═══════════════════════════════════════════════════════════════════════════
   ADDRESSES
═══════════════════════════════════════════════════════════════════════════ */

.silure-addresses-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.silure-address-card {
    border: 1px solid var(--silure-border, #E8E4DF);
    padding: 24px;
}

.silure-address-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
}

.silure-address-card-title {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    margin: 0;
}

/* border-bottom + padding-bottom removed (Session 30) -- this rule's own
   text-decoration: none was already losing to .silure-account-content a's
   text-decoration: underline (higher specificity, confirmed live), so the
   border-bottom was rendering as a second, overlapping line right next to
   that underline. Matches .silure-orders-num's intended pattern (a simple
   underlined text link, no box) rather than fighting the cascade to keep
   the border. */
.silure-address-edit {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--silure-primary, #050505);
    transition: opacity 0.2s;
}

.silure-address-edit:hover { opacity: 0.6; }

.silure-address-body {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 300;
    color: var(--silure-text, #444444);
    font-style: normal;
    line-height: 1.7;
    margin: 0;
}

.silure-address-empty {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--silure-muted, #7A7672);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMS (edit-account, edit-address)
═══════════════════════════════════════════════════════════════════════════ */

.silure-form-section { margin-bottom: 36px; }
.silure-form-section:last-child { margin-bottom: 0; }

/* border-bottom removed (Session 30) -- one shared class used by all three
   section titles on the Account edit page (Personal Details, Email
   Address, Change Password) and by form-edit-address.php's own section
   title, so this single fix covers every current usage. */
.silure-form-section-title {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    margin: 0 0 20px;
    padding-bottom: 10px;
}

.silure-form-field {
    margin-bottom: 16px;
    position: relative;
}

.silure-form-field label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    margin-bottom: 7px;
}

.silure-form-field input[type="text"],
.silure-form-field input[type="email"],
.silure-form-field input[type="tel"],
.silure-form-field input[type="password"],
.silure-form-field input[type="number"],
.silure-form-field select,
.silure-form-field textarea {
    width: 100%;
    padding: 12px 0;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 300;
    color: #050505;
    background: transparent;
    border: none;
    border-bottom: 1px solid #050505;
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.silure-form-field input:focus,
.silure-form-field select:focus,
.silure-form-field textarea:focus {
    border-color: var(--silure-primary, #050505);
}

.silure-form-row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.silure-form-hint {
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: var(--silure-muted, #7A7672);
    margin: 6px 0 0;
    letter-spacing: 0.3px;
}

/* WooCommerce native form-row compatibility.
   font-family/font-size/font-weight/letter-spacing/color removed here
   (Session 30) — silure-woocommerce.css's .silure-account-content label /
   .silure-account-content input[type], select rules already match this
   exact same live markup (the form has both silure-address-form and
   woocommerce-address-fields classes, sitting inside .silure-account-
   content) and were tied with this rule on specificity, decided only by
   load order. Removing the duplicate here instead of trying to out-rank
   it: silure-woocommerce.css is now the only rule declaring typography
   for this form, so there is nothing left to tie-break. Layout properties
   (width/padding/border/background/appearance) are untouched — this task
   was scoped to font consistency only. */
.silure-address-form .form-row { margin-bottom: 14px; }
.silure-address-form .form-row label {
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.silure-address-form .form-row input,
.silure-address-form .form-row select {
    width: 100%;
    padding: 12px 14px;
    background: var(--silure-bg, #FBF9F6);
    border: 1px solid var(--silure-border-mid, #C8C4BF);
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

/* Sitewide form redesign (Session 30): underline fields replacing boxes.
   The actual override lives in silure-woocommerce.css, not here — that
   file enqueues after this one, and its competing box-border rules
   (".input-text", "select:not(.select2-hidden-accessible)", Select2's
   ".select2-selection--single") share identical selectors/specificity
   with a same-scoped override placed here, so this file always loses an
   exact !important tie on load order (confirmed live: Country's plain
   <select> stayed boxed at 0.5px while City/State went underline from a
   higher-specificity rule elsewhere). Only the locked-field readonly
   City input needs anything here, since that one already wins on
   specificity alone (see its own rule above). */

/* silure-woocommerce.css's ".silure-account-content input[type], select"
   rule caps every native field on this form (and others) to max-width:400px
   -- correct, original behavior. State's Select2 widget renders as a
   <span class="select2-container">, which that selector never matches, so
   it was the one field escaping the cap and rendering full grid width
   instead of matching everything else. Scoped to just this one field
   (.validate-state, the row class WooCommerce adds to both billing_state
   and shipping_state) so no other select2 usage on this form or any other
   form sharing the original rule is touched. */
.silure-address-form .form-row.validate-state .select2-container {
    max-width: 400px;
}

/* Same class of bug as the max-width fix above, different property:
   silure-woocommerce.css's generic ".woocommerce-account .input-text"
   rule (built for a different form) also adds margin-bottom:16px
   !important to every native text input here, stacking on top of
   .form-row's own 14px row spacing. City/Postcode/first-last-name (real
   .input-text inputs) ended up with a 30px visible gap to the next
   field's label, while State (Select2 span, not .input-text) and Country
   (plain <select>, not .input-text either) kept the form's intended
   14px -- confirmed via real bounding-rect measurement of the actual
   visible edges (input bottom to next label top), not the <p> wrapper's
   own box, which misleadingly measured 14px uniformly either way since
   the extra margin is trailing/inline and doesn't inflate the wrapper's
   own rect. Neutralizing the extra margin restores a uniform 14px gap
   without touching the .input-text rule for whatever form it serves
   elsewhere. */
.silure-address-form .form-row input.input-text {
    margin-bottom: 0 !important;
}

.silure-address-form .form-row input:focus,
.silure-address-form .form-row select:focus {
    border-color: var(--silure-primary, #050505);
}

/* PIN-code auto-fill (Session 30, PIN-code rearrangement) -- City is
   readonly, State/Country are disabled <select> elements, permanently
   (not toggled by JS) -- Pincode is the only source for City/State, and
   Country is fixed to India. All three must still look/measure exactly
   like the editable fields (same padding/border/height), so a
   disabled/readonly field never reads as visually broken or "smaller"
   next to a normal one -- confirmed via computed-style comparison, not
   just visual impression.

   Country/State are enqueued through wc-country-select (Select2), so
   their real visible/interactive control is the sibling .select2-container
   (see silure-woocommerce.css), not the (visually hidden) <select> itself
   -- both the plain-select and Select2 cases are covered here since either
   could apply depending on WooCommerce's own JS enhancement. Higher
   specificity than silure-woocommerce.css's own
   ".woocommerce-account select:not(.select2-hidden-accessible)" rule
   (needed to win over its `!important` background/color) comes from
   chaining .form-row.silure-pincode-derived onto the same selector,
   not from load order. */
.silure-address-form .form-row input[readonly] {
    /* !important required -- silure-woocommerce.css's ".woocommerce-account
       .input-text" rule sets its own background/color with !important;
       confirmed live via computed style that without this, readonly City
       still rendered white/black, indistinguishable from an editable
       field, despite this rule's higher selector specificity -- specificity
       never gets a chance to matter once the other side has !important.
       Background changed to transparent (Session 30) -- confirmed live the
       grey fill (#F3F0EB) was the only thing distinguishing a locked field
       from an editable one; the grey TEXT already does that job on its
       own, matching every other field's transparent background. */
    background: transparent !important;
    color: var(--silure-muted, #7A7672) !important;
    cursor: not-allowed;
}

.woocommerce-account .form-row.silure-pincode-derived select:disabled:not(.select2-hidden-accessible) {
    background: transparent !important;
    color: var(--silure-muted, #7A7672) !important;
    cursor: not-allowed;
    opacity: 1;
}

.silure-address-form .form-row.silure-pincode-derived .select2-container--disabled .select2-selection--single {
    background: transparent !important;
    cursor: not-allowed;
}

/* padding-left:0 (Session 30) -- silure-woocommerce.css's generic
   ".select2-selection__rendered" rule sets padding-left:14px sitewide (a
   boxed-select visual leftover); every plain input on this form starts
   flush left (padding-left:0), so State's Select2-rendered text sat 14px
   further right than City's, confirmed live via getBoundingClientRect.
   Scoped to just the locked/disabled state here (not the generic select2
   rule) so any other, still-editable Select2 field elsewhere on the site
   keeps its own intended padding. */
.silure-address-form .form-row.silure-pincode-derived .select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--silure-muted, #7A7672) !important;
    padding-left: 0 !important;
}

.silure-address-form .form-row.silure-pincode-derived .select2-container--disabled .select2-selection__arrow {
    display: none;
}

.silure-pincode-note {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.3px;
    color: var(--silure-muted, #7A7672);
    margin: 6px 0 0;
}

.silure-pincode-note--error {
    color: #B3261E;
}

/* Columns capped at minmax(0, 400px) -- not 1fr -- to match the field's own
   max-width:400px (silure-woocommerce.css, .silure-account-content input).
   1fr stretched each column to ~half the content width (~767px on this
   form), leaving ~367px of dead space after every 400px-capped field before
   the real 16px gap ever started -- confirmed live via getBoundingClientRect
   as a ~383px visible gap, not the 16px the gap property alone suggested.
   Capping the track itself at 400px removes that dead space outright, so
   `gap` becomes the actual visible distance between fields; bumped to 24px
   per the approved value. Track still grows to fill available width up to
   its 400px cap (standard grid track-sizing, not a fixed value), so this
   stays safe down to the 900px breakpoint where .silure-form-grid collapses
   to 1 column -- a hard 400px/400px pair would have overflowed before then. */
.silure-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 400px);
    gap: 0 24px;
}

.silure-form-grid .form-row-wide { grid-column: 1 / -1; }

/* Form actions -- border-top removed (Session 30), confirmed live as the
   "line above buttons" on Addresses/Account/Delete My Data. */
.silure-form-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
    padding-top: 24px;
}

/* Checkbox field */
.silure-form-field--checkbox .silure-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--silure-text, #444444);
    cursor: pointer;
    letter-spacing: 0.3px;
    line-height: 1.5;
    text-transform: none;
}

.silure-form-field--checkbox input[type="checkbox"] {
    width: auto !important;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--silure-primary, #050505);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

/* !important on the font properties (Session 30 sitewide 13px text-button
   standardization) -- used on real <button type="submit"> elements (My
   Account Save Changes / Save Address) as well as <a> links, and Hello
   Elementor's reset.css [type="submit"]/button rule ties this plain
   class selector's specificity for the button case, winning by load
   order otherwise -- same root cause documented for .silure-wl-remove
   and .silure-sticky-bar__btn. */
.silure-btn-primary {
    display: inline-block;
    font-family: 'DM Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none;
    padding: 13px 28px;
    cursor: pointer;
    transition: background 0.2s;
}

/* Logged-out My Account page (.silure-login-signin-btn / .silure-login-
   create-btn) — these two buttons previously had no class at all
   (inline style="" only). Classes added in form-login.php so they can
   be targeted; color/background/border/radius (base + hover/focus, both
   buttons now identical per the sitewide standard — Create Account is no
   longer a distinct ghost/outline style) come from the single sitewide
   button hover standard in silure_kill_pink_late(). */

.silure-btn-secondary {
    display: inline-block;
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--silure-primary, #050505);
    background: transparent;
    padding: 12px 28px;
    border: 1px solid var(--silure-primary, #050505);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.silure-btn-secondary:hover {
    background: var(--silure-primary, #050505);
    color: var(--silure-on-dark, #FBF9F6);
}

/* !important on the font properties -- same reset.css [type="submit"]
   tie as .silure-btn-primary above (this is the real GDPR delete
   confirmation <button type="submit">). */
.silure-btn-danger {
    display: inline-block;
    font-family: 'DM Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 13px 28px;
    cursor: pointer;
    transition: background 0.2s;
}

/* color/background/border/radius (base + hover/focus) now come from the
   single sitewide button hover standard in silure_kill_pink_late() — the
   red danger fill is replaced by the uniform sitewide look, no
   exception for the delete-confirmation context. */

/* ═══════════════════════════════════════════════════════════════════════════
   WISHLIST GRID
═══════════════════════════════════════════════════════════════════════════ */

/* 4-per-row at 370px cards: 1550px content width, 24px gutters
   ((1550 - 3*24) / 4 = 369.5px ~= 370px). */
.silure-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px;
}

.silure-wishlist-item {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* aspect-ratio 364/433 (~0.84) is SILURE's actual live shop/product-grid
   card image ratio (shop.css: .silure-products-grid .silure-card-img-wrap)
   -- reused directly rather than inventing a new ratio for this card. */
.silure-wishlist-img-wrap {
    display: block;
    position: relative;
    aspect-ratio: 364 / 433;
    overflow: hidden;
    background: var(--silure-surface, #F3F0EB);
}

.silure-wishlist-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.silure-wishlist-item:hover .silure-wishlist-img-wrap img {
    transform: scale(1.04);
}

.silure-wishlist-sold-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: 'Mulish', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--silure-primary, #050505);
    color: var(--silure-on-dark, #FBF9F6);
    padding: 3px 8px;
}

/* Name + price overlaid on the image, bottom-left, over a dark gradient
   scrim for legibility against the photo. Named .silure-wishlist-scrim,
   NOT -overlay -- .silure-wishlist-overlay is already a live, distinct
   sitewide component (the wishlist drawer's fixed full-screen backdrop,
   silure-core.php ~L3219/L16919): reusing that name here made this card
   element inherit position:fixed/inset:0 from that unrelated rule set.
   Text colours switch to on-dark here specifically (the card's default
   #050505/#7A7672 pair would be near-invisible against this), everything
   else (family/size/strikethrough mechanism) unchanged from the shop-card
   / product-page reference. */
/* Gradient revised again (Session 30) -- the previous fix made the
   scrim's own box (content-height only) darker overall (peak 0.78) to
   compensate for text landing high up a short gradient. This version
   takes the opposite approach per explicit spec: a short, light scrim
   that only covers the bottom ~38% of the IMAGE itself (not a
   content-sized box), so the darkening stops well before it ever
   reaches the product name/photo above it. Height is a percentage of
   .silure-wishlist-img-wrap (position:relative, sized via aspect-ratio
   364/433 -- a definite height for percentage resolution). Content is
   bottom-anchored (justify-content: flex-end) so name/price sit near
   the bottom edge of this shorter region -- the strong end of the
   gradient -- regardless of how tall the text block itself is. */
.silure-wishlist-scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    padding: 16px;
    background: linear-gradient(to top, rgba(5, 5, 5, 0.32), rgba(5, 5, 5, 0));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
}

/* Selector scoped to .silure-wishlist-scrim (not just .silure-wishlist-name
   alone) specifically to out-specificity .silure-account-content p
   (silure-woocommerce.css, loads after this file) -- that compound
   selector's specificity otherwise beats a single class and was winning,
   silently resetting this <p> back to the dark body-text colour. */
.silure-wishlist-scrim .silure-wishlist-name {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1.4;
    color: var(--silure-on-dark, #FBF9F6);
    margin: 0;
}

/* Same-line was/now price: wishlist.php already echoes get_price_html()
   raw (<del>...</del> <ins>...</ins>, naturally inline). The del::after
   strikethrough mechanism matches the product page's own price-comparison
   pattern (.silure-also-like__price / .silure-rv-item__price in
   product.css), reused rather than reinvented. */
/* Full opacity + heavier weight (Session 30) -- 0.75 opacity at weight 300
   was confirmed too faint against variable-brightness product photos
   under the gradient scrim. Scrim itself is unchanged, already correct. */
.silure-wishlist-price {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: rgba(251, 249, 246, 1);
}

.silure-wishlist-price .woocommerce-Price-amount,
.silure-wishlist-price .amount {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.silure-wishlist-price del {
    display: inline-block;
    position: relative;
    text-decoration: none !important;
}

.silure-wishlist-price del .woocommerce-Price-amount {
    display: inline !important;
}

.silure-wishlist-price del::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid currentColor;
    transform: translateY(-50%);
}

/* Single action row: Remove (58px fixed) | Add to Bag (fills remaining
   space) | Share (58px fixed) -- all 58px tall, matching the confirmed
   real reference for this exact size/icon pairing on the product page
   (.silure-heart--cta: a 58x58 button with a 16px icon). */
.silure-wishlist-actions {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin-top: 16px;
}

/* Color/background/border/radius (base + hover/focus) come from the single
   sitewide button hover standard (silure-core.php, SITEWIDE BUTTON HOVER
   STANDARD block) via the .silure-btn-primary class already on this
   element in wishlist.php. text-decoration: none !important is needed
   here specifically -- confirmed live, .silure-account-content a
   (silure-woocommerce.css) was forcing an underline onto this link via a
   specificity tie, the same mechanism found and fixed for the Orders
   empty-state button and the Addresses overview Edit link earlier. */
.silure-wishlist-atc {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    height: 58px;
    text-decoration: none !important;
}

.silure-wishlist-atc--sold {
    background: var(--silure-surface, #F3F0EB);
    color: var(--silure-muted, #7A7672);
    cursor: default;
}

/* Icon-only Remove (×, the same &#215; glyph already used in this exact
   template) and Share (generic share glyph -- box + up arrow, stroke style
   matching the product page's own Copy Link icon: stroke="currentColor"
   stroke-width="1.5", viewBox 0 0 24 24). Both fixed at 58x58 with a 16px
   icon, matching the confirmed real product-page wishlist-button
   reference (.silure-heart--cta), not the product page's separate 14px
   share row this was previously (incorrectly) matched against. */
.silure-wishlist-remove,
.silure-wishlist-share {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    background: none;
    cursor: pointer;
    color: var(--silure-muted, #7A7672);
    transition: color 0.2s;
}

/* !important required here for BOTH -- Remove and Share are now both
   type="button" elements, and Hello Elementor's reset.css has a
   same-specificity [type="button"] rule (an attribute selector is
   specificity-equal to a class) that was winning this exact tie because
   reset.css happens to load after myaccount.css in this document's
   actual <head> order (same root cause as the earlier 'silure-child'
   dependency bug). Share used to be an <a> and was unaffected by this,
   but switching it to a <button> (Session 30, generic Web Share API +
   clipboard fallback, no longer WhatsApp-only) brought it under the same
   reset.css tie. */
.silure-wishlist-remove,
.silure-wishlist-share {
    font-size: 16px !important;
    line-height: 1;
    border: none !important;
    color: var(--silure-muted, #7A7672) !important;
}

.silure-wishlist-share svg {
    width: 16px;
    height: 16px;
}

.silure-wishlist-remove:hover,
.silure-wishlist-share:hover {
    color: var(--silure-primary, #050505) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DELETE DATA
═══════════════════════════════════════════════════════════════════════════ */

.silure-delete-data-wrap { max-width: 560px; }

.silure-delete-intro {
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--silure-text, #444444);
    line-height: 1.7;
    margin: 0 0 16px;
    letter-spacing: 0.3px;
}

.silure-notice {
    padding: 16px 20px;
    margin-bottom: 20px;
    border-left: 3px solid var(--silure-primary, #050505);
    background: var(--silure-surface, #F3F0EB);
}

.silure-notice--info { border-color: #1A5FAC; background: #EBF4FF; }

.silure-notice p {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--silure-text, #444444);
    margin: 0 0 6px;
    line-height: 1.6;
}

.silure-notice p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN / REGISTER PAGE
═══════════════════════════════════════════════════════════════════════════ */

.silure-login-page {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 32px 80px;
}

.silure-login-hero {
    padding: 52px 0 40px;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
    margin-bottom: 56px;
}

.silure-login-heading {
    font-family: 'Mulish', sans-serif; /* was Italiana, see file header */
    font-size: clamp(48px, 7vw, 80px);
    font-weight: 400;
    letter-spacing: -0.01em; /* was -0.03em, see file header */
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--silure-primary, #050505);
    margin: 0;
}

.silure-login-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 80px;
}

.silure-login-col-title {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    margin: 0 0 28px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
}

/* Social login block */
.silure-social-login {
    margin-bottom: 16px;
}

/* Style Super Socializer buttons */
.silure-social-login .theChampLoginShortcode,
.silure-social-login .theChampSocialLogin {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.silure-social-login a.theChampLoginButton {
    flex: 1 !important;
    min-width: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 16px !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1px solid var(--silure-border-mid, #C8C4BF) !important;
    border-radius: 0 !important;
    background: var(--silure-bg, #FBF9F6) !important;
    color: var(--silure-text, #444444) !important;
    transition: border-color 0.2s, background 0.2s !important;
}

.silure-social-login a.theChampLoginButton:hover {
    border-color: var(--silure-primary, #050505) !important;
    background: var(--silure-surface, #F3F0EB) !important;
}

/* Divider */
.silure-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.silure-login-divider::before,
.silure-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--silure-border, #E8E4DF);
}

.silure-login-divider span {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    white-space: nowrap;
}

/* Form fields within login page */
.silure-signin-form .silure-form-field,
.silure-register-form .silure-form-field {
    margin-bottom: 14px;
}

.silure-forgot-link {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    text-decoration: none;
    transition: color 0.2s;
    display: inline-block;
    font-style: normal;
}

.silure-forgot-link:hover { color: var(--silure-primary, #050505); }

.silure-login-submit,
.silure-register-submit {
    width: 100%;
    text-align: center;
}

.silure-register-terms {
    margin-top: 4px;
}

.silure-register-terms a {
    color: var(--silure-primary, #050505);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Divider between login columns */
.silure-login-col--signin {
    border-right: 1px solid var(--silure-border, #E8E4DF);
    padding-right: 80px;
}

/* Empty state */
.silure-account-empty {
    text-align: center;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.silure-account-empty p {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--silure-muted, #7A7672);
    margin: 0;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .silure-account-content {
        padding: 0;
    }

    /* Nav tabs: horizontal scroll instead of wrapping */
    nav.silure-account-nav ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 0 24px;
    }

    nav.silure-account-nav a {
        padding: 0 16px;
        font-size: 10px;
        white-space: nowrap;
    }

    /* Addresses */
    .silure-addresses-wrap { grid-template-columns: 1fr; }

    /* Wishlist: 4 columns is too cramped once cards drop well below 370px */
    .silure-wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    /* Login */
    .silure-login-columns {
        grid-template-columns: 1fr;
        gap: 48px 0;
    }

    .silure-login-col--signin {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--silure-border, #E8E4DF);
        padding-bottom: 48px;
    }

    /* Form grid */
    .silure-form-row-pair,
    .silure-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .silure-wishlist-grid { grid-template-columns: 1fr; }

    .silure-orders-table thead { display: none; }

    .silure-orders-td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
    }

    .silure-orders-td::before {
        content: attr(data-label);
        font-family: 'Mulish', sans-serif;
        font-size: 10px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--silure-muted, #7A7672);
        font-weight: 400;
        flex-shrink: 0;
        margin-right: 12px;
    }

    .silure-orders-row { display: block; border-bottom: 1px solid var(--silure-border, #E8E4DF); padding: 12px 0; }
    .silure-orders-row td { border-bottom: none; }

    .silure-order-meta-bar { gap: 16px; }
}