/* ============================================================
   SILURE — WooCommerce CSS v2
   Targets actual class names from Sessions 13 + 14 templates.
   archive-product.php / content-product.php / single-product.php
   ============================================================ */

/* ── GLOBAL ─────────────────────────────────────────────────────────── */

/* Heading overrides — Mulish 700 */
/* .silure-modal-brand/.silure-modal-title removed from this list (Session
   30) -- this rule is for page-level headings (shop/product/account/cart),
   but those two bare class names also match two completely unrelated
   components: the login/register modal (.silure-modal-brand is used
   nowhere else at all; .silure-modal-title is also used by the product
   enquiry modal). Both already have their own complete, correct
   typography elsewhere (silure-core.php's .silure-acct-modal-scoped
   rules for the account modal; product.css for the enquiry modal) that
   never needed this rule's involvement -- its !important here was only
   ever colliding with them, confirmed live: the account modal rendered
   with different letter-spacing/line-height on any page that loads this
   file (Product, Checkout, Cart, Account) versus Home (which never loads
   it), despite the modal's own markup and inline styling being identical
   on every page.
   Session 111 — .silure-shop-title removed from this list too, same
   reasoning, found while investigating the real header/breadcrumb
   alignment bug just below in this file: shop.css has its own real,
   complete, non-!important .silure-shop-title rule (font-weight:400,
   letter-spacing:-0.01em, line-height:0.88) that this !important rule
   was silently overriding on every single request regardless of load
   order (!important always beats non-!important) — the actual shop
   heading has been rendering bolder, wider-tracked, and taller-lined
   than shop.css ever intended, this whole time, independent of and in
   addition to the padding/text-align bug fixed below. */
.single-product .product_title,
.woocommerce-account .woocommerce h2,
.woocommerce-cart h1,
.si-page-title,
.silure-acct-drawer-title {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    line-height: normal !important;
}

body.woocommerce,
body.woocommerce-page,
body.post-type-archive-product,
body.single-product {
    background: #FBF9F6;
    font-family: "DM Mono", monospace;
    color: #444444;
}

/* ── SHOP PAGE (.silure-shop-wrap) ──────────────────────────────────── */
/* Session 111 — real bug, same disease as the Session 91 cleanup two
   comments below this one, on a set of selectors that cleanup never
   checked: this file loads at priority 99 (after shop.css), so a
   `.silure-shop-wrap`/`.silure-shop-header`/`.silure-shop-title`/
   `.silure-shop-count` copy sitting here — leftover from before the
   Session 97-110 shop-page redesign — silently won every property it
   shared with shop.css's real, actively-maintained versions, on every
   single request, this whole time. Confirmed directly, not assumed:
   this is exactly why Session 108-110's own verification (rendering
   shop.css alone, without this file) kept passing while Manish's real
   browser — loading every file the real page does — kept seeing a
   64px gap and a 40px text-left mismatch that should have been 10px
   and 0px. `.silure-shop-header`'s own `padding: 64px 40px 32px` here
   is the literal, exact source of the reported 64px gap. Removed
   outright, not patched — `.silure-shop-wrap` and the old
   header/title/count rules below all had real, complete, current
   replacements in shop.css already; `.silure-load-more-wrap` and
   `.silure-empty-state` keep their own max-width/margin rule
   unchanged just below, since shop.css never duplicated that specific
   behavior for those two and removing it would be a real, unrelated
   regression this session has no reason to risk. */

.silure-load-more-wrap,
.silure-empty-state {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

/* Session 91 — the entire "Category tabs" + "Filter bar" block that used
   to live here (`.silure-cat-tabs`, `.silure-cat-tab`, `.silure-filter-
   bar-wrap`, `.silure-filter-bar`, `.silure-filter-label`, `.silure-
   filter-select`/`.silure-price-input`, `.silure-price-inputs`,
   `.silure-price-sep`) removed outright, not just patched. This was a
   full, complete duplicate of shop.css's real, current implementation
   of the exact same component — shop.css's own header comment already
   says as much ("Replaces the former separate .silure-cat-tabs row +
   .silure-filter-bar-wrap"), but the old copy here was never actually
   deleted when that replacement shipped. Because this file loads at
   priority 99 (after shop.css), its declarations silently won on every
   property it happened to redeclare — which is exactly how a real,
   reported bug slipped through Session 90's divider-removal pass: this
   block's own `.silure-cat-tabs { border-bottom: 0.5px solid #E8E4DF }`
   is the actual line Manish saw under the tab row, on a class Session 90
   never thought to check in this file since it had only ever touched
   the tile/header/filter-item selectors here. Confirmed unused anywhere
   else first (grepped the full theme + plugin — these classes only ever
   appear in archive-product.php's markup and shop.css/silure-shop.js,
   both of which are shop.css's real, current implementation) before
   deleting, so this isn't a guess. */

/* Session 116 — same class of leftover this file's own comment right
   above already documents for .silure-shop-wrap/header/tabs: a whole
   "PRODUCT GRID WRAPPER"/"PRODUCT GRID: edge to edge, 5 cols" pair of
   blocks used to live here — a genuinely different, older grid design
   (5 columns, gap:0, "borders separate cards") that doesn't match
   shop.css's real, current implementation (4 cols desktop / 2 mobile,
   16px/8px gap, background-gap borders, Session 90+). Because this
   file loads at priority 99 (after shop.css), its `padding: 0
   !important` on .silure-products-grid silently beat shop.css's own
   plain `padding: 0` the whole time — invisible only because both
   sides happened to be the same value (0), exactly the "same value
   collision" pattern already found and fixed elsewhere in this file
   and in header-footer-drawers.css. It surfaced the moment shop.css's
   value became a real, non-zero 80px (Manish's explicit padding
   standard, matching .silure-also-like) and this dead !important kept
   winning. Removed outright, not patched with a louder !important —
   grid-template-columns/gap were confirmed already dead in practice
   too (Session 104 measured the real live grid as 4/2 columns, so
   shop.css's own rule was already the one actually winning there;
   nothing changes by removing this). */

/* ── EACH CARD ───────────────────────────────────────────────────────── */
/* Session 122 — border-right/border-bottom removed: real, reproduced
   bug (Manish's "thin vertical line appearing randomly in mobile
   product grid"), same root cause and same fix as header-footer-
   drawers.css's identical copy of this block (see that file's own
   comment for the full cascade explanation) — this file loads even
   later (priority 99), so its own now-removed :nth-child(3n) override
   just below was the actual, final, live source of the border.
   Removed the whole dead nth-child/grid-template-columns chain below
   too, not just the border declarations here — same reasoning as
   Session 104 already flagged (real column count only ever came from
   shop.css) but left unfinished as "not urgent" until this made it a
   real, visible bug. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
}

/* ── PRODUCT IMAGE: portrait ratio ──────────────────────────────────── */
.woocommerce ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 4/5 !important;
    object-fit: cover !important;
    display: block !important;
}

/* ── PRODUCT INFO ────────────────────────────────────────────────────── */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-family: "DM Mono", monospace !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #050505 !important;
    padding: 12px 12px 4px !important;
    margin: 0 !important;
}

/* Session 122 — the whole "TABLET: 3 columns"/"600px: 2 columns" pair
   removed. Session 104 already confirmed the grid-template-columns
   here was dead for its stated purpose (shop.css's own rules are the
   only ones that ever actually set the real, live column count) but
   left it as "not urgent" — the nth-child border overrides riding
   along with it were the real, live exception (see the base rule's
   own comment above). Removed entirely, not patched. */
/* Image area */
.silure-card-image-wrap {
    position: relative;
    overflow: hidden;
    background: #F3F0EB;
}
.silure-card-image {
    position: relative;
    overflow: hidden;
    line-height: 0;
}
.silure-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    transition: opacity 0.35s ease;
}
.silure-card-img--primary { position: relative; z-index: 1; }
.silure-card-img--hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.silure-product-card:hover .silure-card-img--hover { opacity: 1; }

/* Tags: SOLD / NEW */
.silure-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    font-family: "DM Mono", monospace;
    font-size: 8px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 9px;
    pointer-events: none;
}
.silure-tag--sold { background: #050505; color: #FBF9F6; }
.silure-tag--new  { background: #FBF9F6; color: #050505; border: 0.5px solid #050505; }

/* Hover actions (heart + add) */
.silure-card-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s, transform 0.25s;
    z-index: 4;
    padding: 10px 12px;
}
.silure-product-card:hover .silure-card-actions {
    opacity: 1;
    transform: translateY(0);
}
.silure-card-heart,
.silure-card-add {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FBF9F6;
    /* Session 58 — sitewide border standard found a real, pre-existing
       bug here: this border was a fixed neutral gray (--silure-border,
       #E8E4DF) that never matched the text colour at either state --
       dark text (#050505) at rest, cream text (#FBF9F6) on hover,
       neither of which is #E8E4DF. currentColor tracks both correctly.
       A genuinely separate .silure-card-add from shop.css's own 30x30
       version (different context/size) -- fixed independently, same
       bug pattern, same fix. */
    border: 0.5px solid currentColor;
    font-family: "Mulish", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #050505;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    line-height: 1;
}
.silure-card-heart:hover,
.silure-card-add:hover { background: #050505; color: #FBF9F6; }
.silure-card-add--sold {
    font-size: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: default;
    color: #7A7672;
    border-color: #E8E4DF;
    background: transparent;
}
/* Hide WC default add-to-cart button in grid */
.silure-product-card > .button,
.woocommerce ul.products li.product > .button { display: none !important; }

/* Card info */
.silure-card-info {
    padding: 12px 10px 16px 16px;
}
.silure-card-name {
    display: block;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #050505;
    line-height: normal;
    text-decoration: none;
    margin-bottom: 4px;
}
.silure-card-name:hover { color: #050505; opacity: 0.7; }
.silure-card-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.silure-card-purity {
    font-family: "DM Mono", monospace;
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
}
.silure-card-price,
.woocommerce ul.products li.product .price {
    font-family: "DM Mono", monospace !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    color: #7A7672 !important;
    margin: 0 !important;
}
.silure-card-price ins,
.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    color: #050505 !important;
}

/* Session 122 — real bug: the base rule here (display:flex;
   justify-content:center; padding:40px 0; border-top:0.5px solid
   #E8E4DF) was a dead, never-cleaned-up duplicate of shop.css's own
   real, actively-maintained .silure-load-more-wrap rule (padding:56px
   80px; text-align:center; border-top:1px solid var(--silure-border))
   — same class of leftover as Sessions 111/116/119 found and removed
   elsewhere, silently winning here too (this file loads at priority
   99, after shop.css) because both sides declare `padding`/`border-
   top` at equal specificity and this one loads later. Confirmed live
   before removing: computed border-top was genuinely this file's
   0.5px/40px values, not shop.css's — the exact unwanted line above
   Load More Manish reported. Removed outright. shop.css's own
   .silure-load-more-wrap has no `display` of its own (relies on
   text-align:center on a block-level div, correct for its one child,
   the button, confirmed via the real markup), so no replacement
   `display` is needed here.
   Session 39's own fix below (.silure-load-more-wrap[hidden]) is now
   redundant — with no competing author `display` rule left anywhere,
   the browser's own [hidden] UA rule already applies cleanly — kept
   as-is rather than removed, since it's harmless and still correctly
   documents a real historical bug. */
.silure-load-more-wrap[hidden] {
    display: none;
}
.silure-load-more {
    background: transparent;
    border: 0.5px solid #050505;
    padding: 13px 40px;
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #050505;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.silure-load-more:hover { background: #050505; color: #FBF9F6; }

/* Empty state */
.silure-empty-state {
    text-align: center;
    padding: 80px 40px;
}
.silure-empty-state__text {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1.7;
    color: #7A7672;
    margin-bottom: 20px;
}

/* Pagination (fallback when load-more not present) */
.woocommerce-pagination ul.page-numbers {
    display: flex;
    gap: 4px;
    list-style: none;
    justify-content: center;
    padding: 40px 0;
    margin: 0;
}
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-family: "DM Mono", monospace;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #7A7672;
    border: 0.5px solid #E8E4DF;
    text-decoration: none;
    transition: all 0.2s;
}
.woocommerce-pagination ul.page-numbers li .current,
.woocommerce-pagination ul.page-numbers li a:hover {
    background: #050505;
    color: #FBF9F6;
    border-color: #050505;
}

/* ── SINGLE PRODUCT (.silure-product-page) ──────────────────────────── */
.silure-product-page {
    max-width: 1440px;
    margin: 0 auto;
}
.silure-product-breadcrumb {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    padding: 14px 40px;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.silure-product-breadcrumb a { color: #7A7672; text-decoration: none; }
.silure-product-breadcrumb a:hover { color: #050505; }

/* Product info column */
.silure-product-info {
    padding: 48px 40px 60px;
}
@media (max-width: 768px) {
    .silure-product-info { padding: 24px 20px 40px; }
}
.silure-product-tag {
    display: inline-block;
    font-family: "DM Mono", monospace;
    font-size: 8px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 9px;
    margin-bottom: 12px;
}
.silure-product-tag--sold { background: #050505; color: #FBF9F6; }
.silure-product-tag--new  { border: 0.5px solid #050505; color: #050505; }

.silure-product-name {
    font-family: "Mulish", sans-serif !important;
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #050505;
    line-height: normal;
    margin: 0 0 8px;
}
.silure-product-purity {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    margin: 0 0 16px;
}
.silure-product-price-wrap { margin: 0 0 4px; }
.silure-product-price {
    font-family: "DM Mono", monospace;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #050505;
    display: block;
}
.silure-product-price .woocommerce-Price-amount { font-weight: 300; }
.silure-product-gst-note {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #7A7672;
}

/* Size guide */
.silure-size-guide-trigger {
    background: none;
    border: none;
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    cursor: pointer;
    padding: 0;
    margin: 12px 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}
.silure-size-guide-trigger:hover { color: #050505; }
.silure-size-guide-panel { padding: 16px 0; }
.silure-size-guide-heading {
    font-family: "Mulish", sans-serif;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0 0 8px;
}
.silure-size-guide-tip {
    font-size: 12px;
    font-weight: 300;
    color: #7A7672;
    line-height: normal;
    margin-bottom: 12px;
}
.silure-size-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-weight: 300;
}
.silure-size-table th {
    font-size: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 300;
    padding: 6px 0;
    border-bottom: 0.5px solid #050505;
    text-align: left;
    color: #050505;
}
.silure-size-table td {
    padding: 8px 0;
    border-bottom: 0.5px solid #E8E4DF;
    color: #444444;
}
.silure-size-label {
    font-size: 9px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    display: block;
    margin-bottom: 6px;
}
.silure-size-input-row { display: flex; align-items: center; gap: 10px; }
.silure-size-input {
    border: 0.5px solid #E8E4DF;
    border-radius: 0;
    padding: 8px 10px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    width: 100px;
}
.silure-size-result {
    font-size: 13px;
    font-weight: 300;
    color: #050505;
}

/* Add to cart */
.silure-add-to-cart-wrap { margin: 20px 0; }
.silure-add-to-cart-wrap .single_add_to_cart_button,
.single-product .single_add_to_cart_button {
    width: 100% !important;
    padding: 15px !important;
    font-family: "DM Mono", monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
}
/* color/background/border/radius (base + hover) now come from the
   single sitewide button hover standard in silure_kill_pink_late(). */
.silure-add-to-cart-wrap .quantity { display: none !important; }

/* Wishlist + enquiry */
.silure-heart--single,
.silure-enquiry-link {
    background: none;
    border: none;
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    cursor: pointer;
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    width: 100%;
}
.silure-heart--single:hover,
.silure-enquiry-link:hover { color: #050505; }

/* Share buttons */
.silure-share-buttons {
    display: flex;
    gap: 10px;
    margin: 16px 0;
}
.silure-share-wa,
.silure-share-copy {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0.5px solid #E8E4DF;
    padding: 8px 14px;
    font-family: "DM Mono", monospace;
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0;
}
.silure-share-wa:hover,
.silure-share-copy:hover { border-color: #050505; color: #050505; }

/* Accordions */
.silure-accordions { margin-top: 24px; border-top: 0.5px solid #E8E4DF; }
.silure-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 16px 0;
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #050505;
    cursor: pointer;
    text-align: left;
}
.silure-accordion-icon { transition: transform 0.2s; flex-shrink: 0; }
.silure-accordion-header[aria-expanded="true"] .silure-accordion-icon {
    transform: rotate(180deg);
}
.silure-accordion-body {
    display: none;
    padding: 0 0 16px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #7A7672;
    line-height: normal;
}
.silure-accordion-body.is-open { display: block; }
.silure-details-table { width: 100%; border-collapse: collapse; }
.silure-details-table td {
    padding: 7px 0;
    border-bottom: 0.5px solid #E8E4DF;
    font-size: 13px;
    font-weight: 300;
    color: #444444;
}
.silure-details-table td:first-child {
    width: 45%;
    color: #7A7672;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Product story */
.silure-product-story {
    border-top: 0.5px solid #E8E4DF;
    padding: 60px 40px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.silure-product-story__title {
    font-family: "Mulish", sans-serif !important;
    font-size: 36px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #050505;
    margin: 0 0 24px;
}
.silure-product-story__body {
    font-family: "DM Mono", monospace;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #7A7672;
    line-height: normal;
}
/* Same class of Elementor kit-5 bleed-through as the sitewide "kill pink"
   pattern (silure-core.php's silure_kill_pink_late()) -- kit-5's own
   generated CSS carries `.elementor-kit-5 a { font-family: Mulish,
   sans-serif }`, a direct match on the anchor itself, at 0,1,1
   specificity. That beats both the plain `a` DM Mono rule (style.css)
   and this container's own DM Mono rule above (0,1,0) purely by being a
   more specific, direct match on the link -- inheritance from the
   container never gets a chance to apply. First surfaced by the internal
   links added to the 51 ring products' descriptions (Session 157/158) --
   confirmed via direct DB query this is the only place any product
   description currently contains a real <a href, so no other page needed
   this. !important, matching the established defensive pattern used
   throughout this codebase against the same kit-5 leak. */
.silure-product-story__body a {
    font-family: "DM Mono", monospace !important;
}

/* You may also like */
.silure-also-like {
    padding: 60px 40px;
    border-top: none;
}
.silure-also-like__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 32px;
}
.silure-also-like__title {
    font-family: "Mulish", sans-serif !important;
    font-size: 32px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #050505;
    margin: 0;
}
.silure-also-like__view-all {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    text-decoration: none;
    transition: color 0.2s;
}
.silure-also-like__view-all:hover { color: #050505; }
.silure-also-like__img-wrap { overflow: hidden; }
.silure-also-like__img-wrap img {
    display: block;
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    transition: opacity 0.3s;
}
.silure-also-like__card:hover img { opacity: 0.85; }
.silure-also-like__name {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #050505;
    margin: 10px 12px 2px;
}
.silure-also-like__price {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #7A7672;
    margin: 0 12px 14px;
}

/* Lightbox */
.silure-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(5,5,5,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
}
.silure-lightbox[hidden] { display: none; }
.silure-lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.silure-lightbox-close,
.silure-lightbox-prev,
.silure-lightbox-next {
    position: fixed;
    background: none;
    border: none;
    color: #FBF9F6;
    font-size: 24px;
    cursor: pointer;
    padding: 12px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.silure-lightbox-close:hover,
.silure-lightbox-prev:hover,
.silure-lightbox-next:hover { opacity: 1; }
.silure-lightbox-close { top: 16px; right: 20px; font-size: 28px; }
.silure-lightbox-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.silure-lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }
.silure-lightbox-counter {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "DM Mono", monospace;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: rgba(251,249,246,0.5);
}

/* Enquiry modal */
.silure-modal[hidden] { display: none; }
.silure-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}
.silure-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5,5,5,0.5);
}
.silure-modal-box {
    position: relative;
    background: #FBF9F6;
    padding: 40px;
    max-width: 440px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}
.silure-modal-close {
    position: absolute;
    top: 14px; right: 18px;
    background: none;
    border: none;
    font-size: 20px;
    color: #7A7672;
    cursor: pointer;
}
/* .silure-modal-title rule removed here (Session 30) -- this whole block
   is a leftover duplicate of the product enquiry modal's own CSS
   (already fully and correctly defined in product.css, which always
   loads alongside this file since the enquiry modal only exists on
   product pages, is_product() implying is_woocommerce()). This specific
   rule was not just redundant but actively harmful: its !important on
   font-family/font-weight plus a plain (non-important) font-size:28px
   was winning the cascade tie against product.css's non-important,
   correctly-responsive clamp(18px, 3vw, 26px) purely on load order
   (this file enqueues at wp_enqueue_scripts priority 99, after
   product.css) -- and, being a bare class selector, it was also
   colliding with the completely unrelated login/register modal, which
   uses the same .silure-modal-title class name for its own heading.
   Confirmed genuinely superseded, not reconciled with, since
   product.css's version already covers every real property this one
   set, correctly, with design tokens instead of hardcoded values. */
.silure-modal-product-name {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    margin: 0 0 24px;
}
.silure-form-row { margin-bottom: 16px; }
.silure-form-row label {
    font-size: 9px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    display: block;
    margin-bottom: 6px;
}
/* #silure-enquiry-form prefix: duplicate of product.css's version of these
   rules (both compete for the same real form) — on an exact-specificity
   tie against Hello Elementor's reset.css, reset.css was winning purely
   by loading later. The ID makes these decisively win regardless.

   Underline style (Session 30): this file enqueues after product.css
   (priority 99 vs. product.css's default), so on the same exact-tie
   selector THIS copy always won -- product.css's own rule was already
   updated to the underline standard in an earlier pass, but this
   duplicate was missed, leaving the enquiry modal on the pre-redesign
   boxed style (0.5px #E8E4DF border, white fill) live regardless of
   product.css's correct version underneath. Brought in line with the
   same rule here rather than deleting it, since deleting it would
   reopen the original reset.css tie-break problem this rule exists to
   solve. */
#silure-enquiry-form .silure-form-row input,
#silure-enquiry-form .silure-form-row textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #050505;
    border-radius: 0;
    padding: 10px 0;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #050505;
    background: transparent;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
#silure-enquiry-form .silure-form-row input:focus,
#silure-enquiry-form .silure-form-row textarea:focus { border-color: #050505; outline: none; }
#silure-enquiry-form .silure-form-row textarea { resize: vertical; min-height: 80px; }
#silure-enquiry-form .silure-enquiry-submit {
    width: 100%;
    padding: 14px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}
/* color/background/border/radius (base + hover) now come from the
   single sitewide button hover standard in silure_kill_pink_late(). */
.silure-form-error,
.silure-enquiry-success {
    font-size: 12px;
    text-align: center;
    padding: 8px 0;
}
.silure-form-error { color: #C0392B; }
.silure-enquiry-success { color: #3B6D11; }

/* ── CART PAGE ──────────────────────────────────────────────────────── */
.woocommerce-cart .woocommerce,
.silure-cart-page {
    max-width: 1100px;
    margin: 48px auto;
    padding: 0 40px;
}
.woocommerce-cart h1.entry-title {
    font-family: "Mulish", sans-serif !important;
    font-size: clamp(32px, 4vw, 56px);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700 !important;
    margin-bottom: 32px;
    color: #050505;
}
.woocommerce-cart table.cart { width: 100%; border-collapse: collapse; }
.woocommerce-cart table.cart th {
    font-family: "DM Mono", monospace;
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    padding: 0 0 14px;
    border-bottom: 0.5px solid #050505;
}
.woocommerce-cart table.cart td {
    padding: 20px 0;
    border-bottom: 0.5px solid #E8E4DF;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #050505;
    vertical-align: middle;
}
.woocommerce-cart table.cart .product-name a {
    font-weight: 300;
    color: #050505;
    text-decoration: none;
}
.woocommerce-cart table.cart .product-thumbnail img {
    max-width: 72px;
    height: auto;
    display: block;
}
.woocommerce-cart .cart-collaterals {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
}
.woocommerce-cart .cart_totals { min-width: 320px; }
.woocommerce-cart .cart_totals h2 {
    font-family: "Mulish", sans-serif !important;
    font-size: 10px;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: #050505;
}
.woocommerce-cart .cart_totals table tr th,
.woocommerce-cart .cart_totals table tr td {
    padding: 12px 0;
    border-bottom: 0.5px solid #E8E4DF;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    font-weight: 300;
    border-bottom: none;
    font-size: 15px;
    padding-top: 16px;
}

/* ── CHECKOUT PAGE ──────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce {
    max-width: 1100px;
    margin: 48px auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 60px;
    align-items: start;
}
@media (max-width: 900px) {
    .woocommerce-checkout .woocommerce { grid-template-columns: 1fr; padding: 0 20px; }
}
.woocommerce-checkout .form-row label {
    font-family: "DM Mono", monospace;
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    display: block;
    margin-bottom: 6px;
}
/* Underline style (Session 30) -- third live copy of this same rule
   (silure-core.php has two more, for the main form and the login-toggle
   sub-form); all three updated together so whichever wins the cascade
   agrees with the others. */
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #050505;
    border-radius: 0;
    padding: 13px 0;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #050505;
    background: transparent;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.woocommerce-checkout .form-row input:focus { border-color: #050505; outline: none; }
.woocommerce-checkout h3 {
    font-family: "Mulish", sans-serif !important;
    font-size: 10px;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 0.5px solid #E8E4DF;
    color: #050505;
}
.woocommerce-checkout #order_review {
    background: #F3F0EB;
    padding: 24px;
    border: 0.5px solid #E8E4DF;
}
.woocommerce-checkout table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce-checkout table.shop_table tr td,
.woocommerce-checkout table.shop_table tr th {
    padding: 10px 0;
    border-bottom: 0.5px solid #E8E4DF;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
}
.woocommerce-checkout table.shop_table tr.order-total th,
.woocommerce-checkout table.shop_table tr.order-total td {
    font-weight: 300;
    border: none;
    padding-top: 16px;
    font-size: 15px;
}

/* ── LOGIN PAGE (logged-out) ─────────────────────────────────────────── */
.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 480px;
    margin: 80px auto;
    padding: 0 40px;
}
.woocommerce-account .woocommerce h2 {
    font-family: "Mulish", sans-serif !important;
    font-size: clamp(28px, 4vw, 48px);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700 !important;
    margin-bottom: 32px;
    color: #050505;
}
.woocommerce-account .input-text {
    width: 100% !important;
    border: 0.5px solid #E8E4DF !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    font-family: "DM Mono", monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    color: #050505 !important;
    margin-bottom: 16px !important;
    background: #FFFFFF !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box !important;
}
.woocommerce-account .input-text:focus { border-color: #050505 !important; outline: none !important; }

/* Country/state dropdowns (Session 30) — .input-text above only ever
   matches WooCommerce's own text-input class, which selects never carry,
   so country_to_state (the plain <select>, e.g. #billing_country) and
   state_select (the Select2-enhanced #billing_state) were both falling
   through to weaker rules: the plain select was picking up myaccount.css's
   .form-row select box style (1px solid var(--silure-border-mid, #C8C4BF),
   height 45.5px — a real, confirmed-live mismatch against inputs' 0.5px
   solid #E8E4DF / 44.5px), and the Select2-enhanced state field was
   rendering Select2's own bundled default theme entirely unstyled (a
   generic 28px-tall grey box, select2.css, since nothing here targeted
   .select2-container at all). Neither is a JS bug or a rule hiding/
   breaking the field -- state_select's native <select> is intentionally
   1px via Select2's own accessibility-hiding technique
   (.select2-hidden-accessible, confirmed live), same as any Select2 field;
   the actual visible/interactive control is the sibling .select2-container
   it replaces it with, which was simply never styled to match. */
.woocommerce-account select:not(.select2-hidden-accessible) {
    width: 100% !important;
    border: 0.5px solid #E8E4DF !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    font-family: "DM Mono", monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    color: #050505 !important;
    background: #FFFFFF !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box !important;
}
.woocommerce-account select:not(.select2-hidden-accessible):focus {
    border-color: #050505 !important;
    outline: none !important;
}

/* Select2's replacement UI for state_select — overriding select2.css's
   bundled default theme (28px tall, #aaa border, 4px radius) to match the
   text-input styling above instead. Height is not set as an explicit
   pixel value on the input-text rule either (it's a natural result of its
   padding + line-height + border); it isn't here either, for the same
   reason -- .select2-selection--single's own line-height is set to match
   its box height per select2.css, so setting line-height instead of a
   fixed height keeps it consistent if input-text's own metrics ever
   change. */
.woocommerce-account .select2-container {
    width: 100% !important;
}
.woocommerce-account .select2-container--default .select2-selection--single {
    height: auto !important;
    border: 0.5px solid #E8E4DF !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    margin: 0 !important;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
    /* 43.5px, not 44.5 -- the outer .select2-selection--single's own
       0.5px+0.5px border adds 1px on top of this, landing the total
       height at 44.5px to match the text inputs exactly (confirmed live:
       44.5px line-height alone produced 45.5px total, 1px over). */
    line-height: 43.5px !important;
    padding-left: 14px !important;
    padding-right: 32px !important;
    font-family: "DM Mono", monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    color: #050505 !important;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
    right: 10px !important;
}
.woocommerce-account .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-account .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #050505 !important;
}

/* Sitewide form redesign (Session 30): underline replacing the box.
   Same selectors as the box rules above/nearby, same !important, but
   placed after them in this same file — confirmed live the address-form
   copy of this override (myaccount.css) tied on specificity with these
   rules and lost on load order (myaccount.css enqueues before this
   file), leaving Country's plain <select> still boxed at 0.5px while
   City/State correctly went underline. Placing the override here,
   after the rules it needs to beat, wins regardless of specificity. */
.woocommerce-account .input-text,
.woocommerce-account select:not(.select2-hidden-accessible) {
    border: none !important;
    border-bottom: 1px solid #050505 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 12px 0 !important;
}
.woocommerce-account .form-row.silure-pincode-derived .input-text,
.woocommerce-account .form-row.silure-pincode-derived select:not(.select2-hidden-accessible) {
    border-bottom-color: #B8B4AE !important;
}
.woocommerce-account .select2-container--default .select2-selection--single {
    border: none !important;
    border-bottom: 1px solid #050505 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.woocommerce-account .form-row.silure-pincode-derived .select2-container--default .select2-selection--single {
    border-bottom-color: #B8B4AE !important;
}

.woocommerce-account label {
    font-family: "DM Mono", monospace !important;
    font-size: 10px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #7A7672 !important;
    display: block !important;
    margin-bottom: 6px !important;
}

/* ── MY ACCOUNT PAGE ─────────────────────────── */
/* max-width:1200px + margin:auto (Session 30, removed) was centering this
   page in the viewport on top of its own 40px padding, landing content at
   40px (padding) + half the leftover viewport width (auto-margin) from the
   edge -- e.g. 80px at 1280px wide, more on wider screens. Ordinary pages
   (checked against the Contact page's Elementor section) use a plain
   full-width container with 40px padding and no centering, landing content
   at a fixed 40px from the edge regardless of viewport width. Matching
   that here instead. */
/* left/right padding matches .silure-also-like's confirmed 80px (product.css)
   — the real sitewide content-padding standard, not the 40px this was
   using before. */
.silure-account-page {
    padding: 60px 80px 80px;
}

/* GREETING — was clamp(40px,6vw,72px), genuinely hero-scale (matches the
   404 page's dramatic full-bleed heading almost exactly). This is a
   utility page title, not a hero, so sized to match .silure-legal h1
   (legal.css) instead — the real, reused convention for simple content-
   page titles (Privacy Policy, Terms, Return/Shipping Policy, Cookie
   Policy all share that same class). */
.silure-account-greeting {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -0.02em;
    color: #050505;
    margin-bottom: 32px;
    line-height: 1;
}

/* HORIZONTAL TABS — removed (Session 30). This entire block was a legacy
   duplicate of the tab system in myaccount.css (nav.silure-account-nav,
   lines 46-86 there) — both matched the exact same live <li class="...
   is-active"><a> markup. Its outline: 2px solid on .is-active a was the
   source of the "border box" around the active tab (myaccount.css never
   declared outline at all, so nothing contested it), and its higher-
   specificity .silure-account-nav ul li a selector (3 elements vs
   myaccount.css's 2) was winning the non-important font-family tie,
   rendering tabs in DM Mono instead of myaccount.css's intended Mulish.
   myaccount.css is now the sole source of truth for this nav. */

/* CONTENT AREA */
/* border-top removed (Session 30) -- this was the actual mechanism behind
   the persistent "line below the tabs" (three investigation passes missed
   it because it's a border-TOP on this sibling element, not a border-
   BOTTOM on the nav/tabs themselves, which is everywhere those checks
   looked). Confirmed live via getComputedStyle before removing: 1px solid
   #E8E4DF, pulled up 1px by margin-top: -1px, rendering ~23px below the
   tab row (the gap coming from the ul's own margin-bottom + this
   negative margin), visually reading as a second, unrelated divider line
   with nothing between it and the tabs. */
.silure-account-content {
    padding-top: 48px;
}

/* CONTENT HEADINGS */
.silure-account-content h2,
.silure-account-content h3 {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #050505;
    margin: 0 0 32px;
}

/* FIELD LABELS — DM Mono (Session 30, was Mulish), matching the FIELD
   VALUES rule below so labels and their values share one family instead
   of switching mid-sentence/mid-form (this also fixes .p strong: paragraph
   text in this content area is already DM Mono via FIELD VALUES, so a
   Mulish <strong> inside one of those paragraphs was previously an
   unintended mid-sentence font switch). */
.silure-account-content p strong,
.silure-account-content .woocommerce-address-fields label,
.silure-account-content table.shop_table th {
    font-family: 'DM Mono', monospace;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #050505;
    display: block;
    margin-bottom: 4px;
}

/* FIELD VALUES */
.silure-account-content p,
.silure-account-content table.shop_table td {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #444444;
}

/* LINKS */
.silure-account-content a {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #050505;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.silure-account-content a:hover {
    opacity: 0.6;
}

/* FORM FIELDS — select added (Session 30): country/state dropdowns are
   <select> elements, not matched by any input[type] selector here, so
   they were the only two fields on this form left rendering whatever
   inherited (Mulish, from myaccount.css's own address-form rule, since
   nothing else on this list contested selects specifically). */
.silure-account-content .woocommerce-Input,
.silure-account-content input[type="text"],
.silure-account-content input[type="email"],
.silure-account-content input[type="password"],
.silure-account-content input[type="tel"],
.silure-account-content select {
    width: 100%;
    max-width: 400px;
    border: none;
    border-bottom: 1px solid #E8E4DF;
    border-radius: 0;
    padding: 10px 0;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #050505;
    background: transparent;
    transition: border-color 0.2s;
}
.silure-account-content input:focus {
    outline: none;
    border-bottom-color: #050505;
}

/* SAVE BUTTON -- this rule, not .silure-btn-primary's own font-size
   !important, is what actually wins for Save Address/Save Changes: it's
   a compound selector (.silure-account-content + button[type="submit"])
   at higher specificity than .silure-btn-primary alone, so even with
   !important added there it could never beat this one. Confirmed live
   via element.matches() against the real button markup (rendered
   server-side via wc_get_template() while impersonating the account
   owner, since browser session auth was unreliable in this environment)
   injected into a page that loads this stylesheet -- this rule was the
   only other match with font-size/letter-spacing declared. Session 30
   sitewide 13px standardization applied here, the actual source. */
.silure-account-content .woocommerce-Button,
.silure-account-content button[type="submit"],
.silure-account-content input[type="submit"] {
    padding: 14px 40px !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    margin-top: 24px !important;
    transition: background 0.2s !important;
}
/* color/background/border/radius (base + hover/focus) now come from the
   single sitewide button hover standard in silure_kill_pink_late(). */

/* ORDERS TABLE */
.silure-account-content table.shop_table {
    width: 100%;
    border-collapse: collapse;
}
.silure-account-content table.shop_table thead th {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #7A7672;
    font-weight: 300;
    padding: 0 0 12px;
    border-bottom: 1px solid #050505;
    text-align: left;
}
.silure-account-content table.shop_table tbody td {
    padding: 16px 0;
    border-bottom: 1px solid #E8E4DF;
    font-size: 13px;
    font-weight: 300;
    vertical-align: middle;
}
.silure-account-content table.shop_table tfoot {
    display: none;
}
.woocommerce-orders-table__cell-order-status {
    font-size: 9px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* REMOVE OLD SIDEBAR LAYOUT */
.woocommerce-account .woocommerce,
.woocommerce-account.logged-in .woocommerce {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce-MyAccount-navigation { display: none !important; }
.woocommerce-MyAccount-content { padding-top: 0 !important; }

/* Social login (Nextend) */
.nextend-social-login {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nextend-social-login a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 0.5px solid #E8E4DF !important;
    font-family: "DM Mono", monospace !important;
    font-size: 10px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #050505 !important;
    text-decoration: none !important;
    background: #FFFFFF !important;
    transition: background 0.2s !important;
    border-radius: 0 !important;
}
.nextend-social-login a:hover { background: #F3F0EB !important; }

/* ── ALL WC BUTTONS ─────────────────────────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .checkout-button,
.wc-proceed-to-checkout .checkout-button {
    padding: 14px 28px !important;
    font-family: "DM Mono", monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
/* color/background/border/radius (base + hover/focus) now come from the
   single sitewide button hover standard in silure_kill_pink_late(). */
/* [Session 30] Product page Add to Bag reads 13px, not the generic 10px
   every other WC button above uses. This element also carries the
   plain "button" class (WooCommerce default markup: <button
   class="single_add_to_cart_button button alt">), so it matches
   .woocommerce button.button above with EQUAL specificity to the
   .silure-add-to-cart-wrap .single_add_to_cart_button rule earlier in
   this file -- and being later in this same file, it was winning the
   tie. Selector here matched to the same specificity deliberately, so
   this position (after) breaks the tie the other way instead. */
.woocommerce button.single_add_to_cart_button {
    font-size: 13px !important;
}
.wc-proceed-to-checkout .checkout-button {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 16px !important;
}

/* ── NOTICES ────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: 0 !important;
    background: #F3F0EB !important;
    border-left: 2px solid #050505 !important;
    font-family: "DM Mono", monospace !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    color: #050505 !important;
    box-shadow: none !important;
    padding: 14px 20px !important;
}
.woocommerce-error { border-left-color: #C0392B !important; }
.woocommerce-info  { border-left-color: #7A7672 !important; }

/* ── BREADCRUMB (generic WC fallback) ───────────────────────────────── */
.woocommerce-breadcrumb {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
    padding: 14px 40px;
    border-bottom: 0.5px solid #E8E4DF;
}
.woocommerce-breadcrumb a { color: #7A7672; text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: #050505; }

/* ── MOBILE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Session 96 — real bug found: this file loads after shop.css
       (priority 99), so this shorthand `padding: 0 20px` was silently
       winning at ≤768px and resetting `.silure-filter-bar-wrap`'s
       padding-bottom back to 0 — the exact 44px gap Session 93/94 added
       (and only ever verified on desktop, where this rule doesn't
       apply) was genuinely gone on every mobile/tablet width ≤768px.
       Removed outright rather than patched: shop.css already has its
       own complete, correct responsive padding-left/right handling for
       this selector at 1024/768/480 (longhand properties, which don't
       clobber padding-bottom the way this shorthand did), so this line
       was a stale, harmful duplicate, not a needed override. `.silure-
       shop-header`/`.silure-cat-tabs` right below have the same
       "shorthand padding in this later-loading file" shape and are
       worth checking if a similar spacing bug is ever reported on
       either — left untouched here since this fix is scoped to the
       filter-row gap specifically. */
    /* Session 111 — .silure-shop-header's own line removed from here:
       this file's own earlier comment (just above) already flagged
       this exact selector as "worth checking if a similar spacing bug
       is ever reported" — it now has been (the real header/breadcrumb
       gap bug, root-caused this same session). This mobile-only
       `padding: 40px 20px 20px` is the exact, literal source of the
       40px mobile gap Manish measured — shop.css's own real mobile
       rule (10px 24px 24px at this same <=768px breakpoint) was being
       silently overridden by this one too, same "later-loading file
       wins" mechanism as the base/desktop rule fixed above. */
    .silure-cat-tabs     { padding: 0 20px; }
    .silure-product-breadcrumb { padding: 12px 20px; }
    .silure-also-like    { padding: 40px 20px; }
    .silure-product-story { padding: 40px 20px; }
    .woocommerce-cart .woocommerce,
    .woocommerce-account .woocommerce { padding: 0 20px; }
    .woocommerce-breadcrumb { padding: 12px 20px; }
}

/* ── WISHLIST — constrain product images ─────────────────────── */
.woocommerce-MyAccount-content .wishlist_table td.product-thumbnail img,
.woocommerce table.wishlist_table td.product-thumbnail img,
.woocommerce .wishlist-item-image img,
.yith-wcwl-wishlist table td img {
    width: 80px !important;
    height: 100px !important;
    object-fit: cover !important;
    max-width: 80px !important;
}