list (wc_cart_totals_shipping_html()),
which carries the browser default disc bullet and the default
ul/li margin/padding -- confirmed live. Both zeroed so the text
sits flush, matching every other value in this row (Subtotal,
Total) which are plain text with no list markup at all. */
body.woocommerce-checkout #shipping_method,
body.woocommerce-checkout ul.woocommerce-shipping-methods {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout #shipping_method li,
body.woocommerce-checkout ul.woocommerce-shipping-methods li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout #order_review > div,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* FIX 3 — Always-visible coupon input in summary col */
/* Session 30 (checkout redesign Pass A): border-bottom removed per
explicit request, same as the login toggle border above -- this
is the winning declaration for the coupon form divider line
(highest-specificity match, confirmed the same way). */
/* Session 30 (checkout follow-up): display changed block -> flex on
the FORM itself, not just each .form-row individually. The coupon
form real markup is two separate sibling
elements (one holding the input, one the button) plus a trailing
clearfix div -- flexing each .form-row internally (kept below)
only lays out that paragraph own single child, it does nothing
to make the two paragraphs sit next to each other, so input and
button were stacking vertically instead of sharing one row.
Flexing the form itself makes its direct children -- the two
.form-row paragraphs -- the actual flex items. */
/* width:100% added (checkout redesign round 2) -- confirmed live the
form was only 251px inside a 513px-wide column despite already
being display:flex; a block-level flex container should span its
parent full width by default, so an explicit width here is what
actually guarantees it regardless of that. box-sizing so the
column own padding is not doubled into this element too. */
/* max-width:100% added (checkout redesign round 3) -- width:100%
above was already winning against the old, lower-specificity
"FIX 3/FIX 5" .checkout_coupon rules further up this file
(max-width: 53%, from a pre-grid single-column layout draft), but
max-width is a separate property that only those old rules were
setting -- unopposed, it still clamped the rendered box to 53% of
its container regardless of width:100% winning, confirmed live
via getComputedStyle (width: 330px, maxWidth: 53%). Same class of
bug as the min-width/width precedent elsewhere on this page --
fixed the same way, by setting the competing property here rather
than hunting down every old rule that still touches this
selector. */
body.woocommerce-checkout .silure-checkout-col--summary
.checkout_coupon {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background: transparent !important;
border: none !important;
padding: 0 0 16px !important;
margin: 0 0 24px !important;
border-bottom: 0 none !important;
}
body.woocommerce-checkout .silure-checkout-col--summary
.woocommerce-form-coupon-toggle {
display: none !important;
}
body.woocommerce-checkout .silure-checkout-col--summary
.checkout_coupon .clear {
display: none !important;
}
body.woocommerce-checkout .silure-checkout-col--summary
.checkout_coupon .form-row {
display: flex !important;
gap: 8px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout .silure-checkout-col--summary
.checkout_coupon .form-row-first {
flex: 1 1 auto !important;
min-width: 140px !important;
}
body.woocommerce-checkout .silure-checkout-col--summary
.checkout_coupon .form-row-last {
flex: 0 0 auto !important;
}
body.woocommerce-checkout .silure-checkout-col--summary
.checkout_coupon input[type="text"] {
width: 100% !important;
height: 44px !important;
border: 1px solid #C8C4BE !important;
border-radius: 0 !important;
background: transparent !important;
font-family: "DM Mono", monospace !important;
font-size: 12px !important;
padding: 0 12px !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout .silure-checkout-col--summary
.checkout_coupon button[type="submit"] {
height: 44px !important;
padding: 0 20px !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;
white-space: nowrap !important;
}
/* color/background/border/radius (base + hover) now come from the
single sitewide button hover standard block at the end of
silure_kill_pink_late(). */
/* FIX 4 — Hide duplicate price note and verbose tax rows */
/* Retargeted to .silure-order-totals-table (checkout redesign,
duplicate-Total-row fix) -- .woocommerce-checkout-review-order-table
now lives on the items table only, see review-order.php own
header comment. */
body.woocommerce-checkout .silure-order-totals-table
tfoot .fee + tr,
body.woocommerce-checkout p.woocommerce-notices-wrapper + p,
body.woocommerce-checkout .shop_table tfoot tr.tax-rate + tr.tax-rate {
display: none !important;
}
body.woocommerce-checkout #order_review > p:last-of-type {
display: none !important;
}
body.woocommerce-checkout .shop_table tfoot .tax-rate:not(:last-child) {
display: none !important;
}
/* FIX 5 — Body gradient fallback (JS overrides with exact px at runtime) */
body.woocommerce-checkout {
background: linear-gradient(
to right,
#FBF9F6 0px, #FBF9F6 684px,
#F0EDE8 684px, #F0EDE8 100%
) !important;
min-height: 100vh !important;
width: 100% !important;
overflow-x: hidden !important;
}
/* FIX 1 — Login form: removed (Session 30) -- the native
.woocommerce-form-login fields (p, .form-row, input[type=...],
label, submit button, .lost_password link) no longer render;
checkout/form-login.php theme override drops the
woocommerce_login_form() call entirely, keeping only the toggle
notice. This block (and its .form-row/input/label/button/
lost_password sub-rules) styled fields that no longer exist. */
/* FIX 2 — Hide CGST/SGST rows + duplicate paragraphs */
body.woocommerce-checkout .shop_table tfoot tr.tax-rate {
display: none !important;
}
body.woocommerce-checkout .shop_table tfoot tr td.amount small {
display: none !important;
}
/* Coupon-invisible fix (checkout redesign follow-up) -- the
unscoped descendant rule that used to sit here
("#order_review p", no ">") was written back when the only real
tags anywhere near #order_review were direct-child stray
disclaimer paragraphs -- confirmed dormant for anything else at
the time. Once the coupon form got JS-moved to sit inside
#order_review (checkout redesign, coupon reposition round), its
own native
elements became genuine, nested
#order_review descendants too, and this rule silently started
matching and hiding them -- confirmed live (getComputedStyle:
display none, height 0, on both form-row paragraphs), same
ID-beats-any-number-of-classes specificity pattern as the
earlier coupon max-width bug (#order_review has ID specificity,
beating the coupon own 4-class rule regardless of class count).
The direct-child version immediately below already covers the
original "stray disclaimer paragraph" intent without this
collateral hit, so the unscoped duplicate was removed outright
rather than patched. */
body.woocommerce-checkout #order_review > p,
body.woocommerce-checkout .silure-checkout-col--summary > p {
display: none !important;
}
/* Session 30 (checkout redesign Pass A): removed a dead flexbox
"order" block that used to live here (display:flex on the summary
column + order:1/2/3/4 on the coupon toggle/form/#order_review_
heading/#order_review). Its own comment said "coupon below order
table" -- stale, from an earlier design where the coupon sat
below the totals, before silure_checkout_dom_fix() (wp_footer JS)
started inserting the coupon toggle+form at the TOP of this
column instead. #order_review_heading does not exist in this
template at all (confirmed) so that part of the rule matched
nothing regardless. The rest was fully redundant with plain DOM
order once the JS insertion already places the coupon
toggle/form ahead of #order_review in the actual document --
removing the flex context changes nothing visually, confirmed
live before deploy. */
/* FIX 1 — Hide CGST/SGST breakdown inside Total row */
body.woocommerce-checkout .order-total .amount small,
body.woocommerce-checkout .order-total td small,
body.woocommerce-checkout .order-total .woocommerce-Price-amount small {
display: none !important;
}
/* FIX 2 — Hide "All prices reflect today's silver market rate" row */
body.woocommerce-checkout .silure-rate-row {
display: none !important;
}
/* Remove woocommerce container padding on checkout —
fills 1710px so grid 53% split matches body gradient exactly */
body.woocommerce-checkout .woocommerce {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ================================================================
CHECKOUT REDESIGN: 50/50 BODY BG + CENTRED 1400px GRID
All rules use !important to override earlier scattered blocks.
================================================================ */
/* Body: true 50/50 split — no JS needed */
body.woocommerce-checkout {
background: linear-gradient(to right, #FBF9F6 0% 50%, #F0EDE8 50% 100%) !important;
background-attachment: fixed !important;
min-height: 100vh !important;
}
/* Order Received page fix -- WooCommerce gives this page the same
"woocommerce-checkout" body class as the real two-column Checkout
form (confirmed live: both "woocommerce-checkout" and
"woocommerce-order-received" are present together in the body
class list), so it was inheriting the 50/50 split gradient above
too, even though thankyou.php is a single centred column with no
.silure-checkout-col--form/--summary to visually justify a split.
Result was a plain, unexplained two-tone background behind a
centred receipt -- confirmed live via screenshot, a real bug, not
a content-structure difference. The compound selector below (both
classes) is more specific than the plain rule above regardless of
source order, so it wins outright on this page only; the real
Checkout form page (which never carries "woocommerce-order-received")
is completely unaffected. */
body.woocommerce-checkout.woocommerce-order-received {
background: #FBF9F6 !important;
}
/* Order-pay page fix (Session 30 close-out, 2026-08-10) -- identical
bug, same root cause, confirmed live: order-pay (/checkout/order-pay/
{id}/) also carries the bare "woocommerce-checkout" body class
(WooCommerce own wc_body_class() gives every checkout-page
endpoint that class, since is_checkout() itself is true for both
order-pay and order-received, not just the real Checkout page),
so it inherited the same 50/50 split gradient meant only for the
real two-column form. order-receipt.php (the actual content
template for this page, themed the same day) is a single centred
column with no .silure-checkout-col--form/--summary either, same
as thankyou.php. Checked whether any THIRD checkout-page endpoint
shares this same collision risk: confirmed directly in
WooCommerce core own endpoint registration
(class-wc-query.php) that only "order-pay" and "order-received"
are registered under the checkout page itself
(woocommerce_checkout_pay_endpoint / woocommerce_checkout_
order_received_endpoint) -- "add-payment-method" is a My Account
endpoint (woocommerce_myaccount_add_payment_method_endpoint), so
it gets "woocommerce-account", never "woocommerce-checkout", and
was never at risk. Both real checkout-page endpoints are now
covered; there is no third. */
body.woocommerce-checkout.woocommerce-order-pay {
background: #FBF9F6 !important;
}
/* Columns: transparent — body supplies the colour */
body.woocommerce-checkout .silure-checkout-col--form,
body.woocommerce-checkout .silure-checkout-col--summary {
background: transparent !important;
}
/* Grid: centered 1400px, equal 1fr/1fr */
body.woocommerce-checkout .silure-checkout-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
max-width: 1400px !important;
width: 100% !important;
margin: 0 auto !important;
gap: 0 !important;
align-items: start !important;
}
/* Bust Hello Elementor container and form width constraints */
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout form.woocommerce-checkout {
max-width: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Left column */
body.woocommerce-checkout .silure-checkout-col--form {
padding: 40px 60px 64px 60px !important;
box-sizing: border-box !important;
width: 100% !important;
min-height: 100vh !important;
}
/* Right column — sticky so it stays visible as form scrolls */
body.woocommerce-checkout .silure-checkout-col--summary {
padding: 40px 48px 64px 48px !important;
box-sizing: border-box !important;
width: 100% !important;
min-height: 100vh !important;
position: sticky !important;
top: 0 !important;
align-self: start !important;
}
/* Notices: constrained to align with form content */
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
max-width: 700px !important;
padding: 0 60px !important;
box-sizing: border-box !important;
}
/* ── Responsive: tablet ─────────────────────────────────── */
@media (max-width: 768px) {
body.woocommerce-checkout {
background: #FBF9F6 !important;
}
body.woocommerce-checkout .silure-checkout-grid {
grid-template-columns: 1fr !important;
max-width: 100% !important;
}
body.woocommerce-checkout .silure-checkout-col--form {
padding: 32px 24px !important;
min-height: auto !important;
}
body.woocommerce-checkout .silure-checkout-col--summary {
background: #F0EDE8 !important;
padding: 32px 24px !important;
position: static !important;
min-height: auto !important;
}
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
padding: 0 24px !important;
max-width: 100% !important;
}
}
/* ── Responsive: phone ──────────────────────────────────── */
@media (max-width: 480px) {
body.woocommerce-checkout .silure-checkout-col--form {
padding: 24px 16px !important;
}
body.woocommerce-checkout .silure-checkout-col--summary {
padding: 24px 16px !important;
}
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
padding: 0 16px !important;
}
}
/* ================================================================
CHECKOUT PADDING — 38px MEJURI UNIFORM + CENTRED GRID
Grid is 1400px centered in viewport; 50/50 body bg splits at
exactly the column midpoint. 38px inner padding on both cols.
================================================================ */
body.woocommerce-checkout .silure-checkout-col--form {
padding: 40px 38px 64px 38px !important;
background: transparent !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout .silure-checkout-col--summary {
padding: 40px 38px 64px 38px !important;
background: transparent !important;
box-sizing: border-box !important;
min-height: calc(100vh - 64px) !important;
}
/* Full-width breakout for the Returning Customer notice, coupon,
and Subtotal/Shipment/Total table -- moved to JS
(silure_checkout_width_breakout_js(), wp_footer). A pure-CSS
calc(100% + 76px) + negative-margin version was tried here first
and DID move these three from 623px to ~699px (real progress,
not nothing), but never reliably closed the last ~1px against
the column own live-measured width even after ruling out every
specificity/cascade explanation (confirmed live: bumping the
calc offset, hardcoding a literal px value, even stacking a
second later !important stylesheet rule on top all produced the
identical result -- getComputedStyle kept reporting a value 1px
under whatever was declared). A genuine inline style.setProperty
call using the important priority flag, applied directly to the
element itself, by contrast, hit the column own live width
exactly every time it was tested. The real
fix reads each column own actual rendered width + padding at
runtime and applies it the same way -- also more correct than a
fixed calc() offset, since it stays exact across the responsive
breakpoints below instead of assuming a fixed 38px padding. */
/* Grid centered so column split aligns with background */
body.woocommerce-checkout .silure-checkout-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
align-items: start !important;
}
/* Notices match left col padding */
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
float: none !important;
position: static !important;
padding: 16px 38px !important;
max-width: 700px !important;
width: 100% !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Mobile */
@media (max-width: 768px) {
body.woocommerce-checkout .silure-checkout-grid {
grid-template-columns: 1fr !important;
max-width: 100% !important;
}
body.woocommerce-checkout .silure-checkout-col--form,
body.woocommerce-checkout .silure-checkout-col--summary {
padding: 24px 20px !important;
}
body.woocommerce-checkout .silure-checkout-col--summary {
background: #F0EDE8 !important;
min-height: auto !important;
}
body.woocommerce-checkout .woocommerce-form-login-toggle {
padding: 16px 20px !important;
max-width: 100% !important;
}
}
/* Kill Elementor woocommerce grid — form fills full 1710px parent */
body.woocommerce-checkout .woocommerce {
display: block !important;
grid-template-columns: none !important;
}
/* Panel width: parent+panel specificity beats all old 1-class width:40% rules */
.silure-cart-drawer .silure-cart-panel,
.silure-wishlist-drawer .silure-wishlist-panel,
.silure-search-drawer .silure-search-panel {
width: 100% !important;
max-width: 100% !important;
position: relative !important;
left: 0 !important;
right: 0 !important;
box-sizing: border-box !important;
}
/* Panel z-index above overlay — panel selectors only, no broad > * */
.silure-cart-drawer .silure-cart-panel { z-index: 3001 !important; }
.silure-wishlist-drawer .silure-wishlist-panel { z-index: 3001 !important; }
.silure-search-drawer .silure-search-panel { z-index: 3001 !important; }
/* ── WooCommerce lost-password page ─────────────────────────────── */
body.woocommerce-account.woocommerce-lost-password #main,
body.woocommerce-account.woocommerce-lost-password .site-main {
max-width: 560px !important;
margin: 80px auto !important;
padding: 0 24px !important;
}
body.woocommerce-account.woocommerce-lost-password h1,
body.woocommerce-account.woocommerce-lost-password h2 {
font-family: "Mulish", sans-serif !important;
font-size: 22px !important;
font-weight: 700 !important;
color: #050505 !important;
margin-bottom: 24px !important;
text-transform: uppercase !important;
}
body.woocommerce-account.woocommerce-lost-password .woocommerce-ResetPassword p {
font-family: "DM Mono", monospace !important;
font-size: 13px !important;
font-weight: 300 !important;
color: #7A7672 !important;
margin-bottom: 24px !important;
line-height: 1.7 !important;
}
body.woocommerce-account.woocommerce-lost-password label {
font-family: "DM Mono", monospace !important;
font-size: 10px !important;
font-weight: 300 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: #7A7672 !important;
display: block !important;
margin-bottom: 6px !important;
}
body.woocommerce-account.woocommerce-lost-password input[type="text"],
body.woocommerce-account.woocommerce-lost-password input[type="email"] {
width: 100% !important;
border: none !important;
border-bottom: 1px solid #050505 !important;
border-radius: 0 !important;
background: transparent !important;
font-family: "DM Mono", monospace !important;
font-size: 13px !important;
font-weight: 300 !important;
padding: 13px 0 !important;
box-sizing: border-box !important;
margin-bottom: 16px !important;
}
body.woocommerce-account.woocommerce-lost-password input[type="submit"],
body.woocommerce-account.woocommerce-lost-password button[type="submit"] {
width: 100% !important;
height: 49px !important;
background: #050505 !important;
color: #FBF9F6 !important;
border: none !important;
border-radius: 0 !important;
font-family: "DM Mono", monospace !important;
font-size: 13px !important;
font-weight: 300 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
cursor: pointer !important;
}
/* [Session 22] 5 text-editor widgets: standardise to 13px/1.7 DM Mono.
Overrides Elementor per-widget font-size/line-height (post-4240.css,
post-69.css). Font-family and letter-spacing come from the global p reset. */
.elementor-element-brdtxt01 p,
.elementor-element-abtsttx1 p,
.elementor-element-abtvtx1 p,
.elementor-element-abtvtx2 p,
.elementor-element-abtvtx3 p {
font-size: 13px !important;
line-height: 1.7 !important;
}
/* ── FILTERS DRAWER (Session 136, exact mockup spec) ────────────────────
Deliberately mirrors .silure-cart-drawer/.silure-cart-overlay/
.silure-cart-panel's own mechanism exactly (same z-index scheme, same
transition timing/easing, same overlay colour/opacity) — genuinely
the same drawer pattern under a new component name, sliding from the
LEFT instead of the right, registered into the same shared JS
controller (window.silureDrawer, silure-drawers.js) rather than a
one-off reimplementation.
Background — verified live via getComputedStyle() against the real
.silure-cart-panel on production (rgb(255, 255, 255)), not assumed
from the design-system's own --silure-bg token: the real cart drawer
is genuinely white, not cream, so this panel matches that confirmed
real value rather than the token, per explicit instruction to defer
to whichever is actually true. */
.silure-filters-drawer {
position: fixed;
inset: 0;
z-index: 3000;
visibility: hidden;
pointer-events: none;
}
.silure-filters-drawer.is-open {
visibility: visible;
pointer-events: all;
}
.silure-filters-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 2998;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.silure-filters-overlay.is-open {
opacity: 1;
pointer-events: all;
}
.silure-filters-panel {
/* Session 138 — width/max-width removed from here: now comes from
the real UNIVERSAL DRAWER WIDTH shared rule this panel joined
(see that rule's own comment) — one source of truth instead of a
second, driftable number in this file. */
position: absolute;
top: 0;
left: 0;
height: 100%;
display: flex;
flex-direction: column;
background: #FFFFFF;
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
overflow: hidden;
}
.silure-filters-drawer.is-open .silure-filters-panel {
transform: translateX(0);
}
/* Header — its own real flex row now (title + close together), not an
absolutely-positioned close button floating over scrollable content.
Exact mockup spec: padding 22px 26px. */
.silure-filters-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 26px;
flex-shrink: 0;
}
.silure-filters-close {
background: none;
border: none;
cursor: pointer;
padding: 0;
}
/* Session 138 — was a font-size "×" glyph; now the identical SVG the
Account drawer's own close button uses (same path, 14x14, stroke-
width 1.5), per this session's explicit "match the Account drawer
exactly" call. Color lives on the SVG itself, not the button — same
reason as .silure-jump-icon above: silure-core.php's sitewide "kill
button pink" rule forces `color: inherit !important` on every real
button/[type=button] and never touches descendants (an SVG child is
neither a button nor a [type=button] itself), so this is the one
place real color reliably applies. */
/* Session 138 — real bug found via getComputedStyle(): the Account
drawer's own close button DECLARES color:#050505 in its source
(.silure-acct-close), but that's set on the BUTTON element itself,
which is subject to the same sitewide "!important color:inherit"
rule diagnosed elsewhere this session — its real, live computed
color is #444444 (rgb(68,68,68)), not #050505. Matched to that real,
actual value here (not the source's stated-but-never-applied one),
per the explicit instruction to mirror Account's real current
values. Not fixed on the Account drawer itself — out of this
session's scope, flagged for Manish separately rather than changed
here without being asked. */
.silure-filters-close svg {
display: block;
color: #444444;
}
.silure-filters-body {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 26px;
}
/* Session 136 — deliberately NO border-top/line here: the explicit
requirement was no divider lines anywhere in this drawer. The sticky
footer is separated from the scrollable content purely by a soft
upward shadow + its own background, not a hard rule. */
.silure-filters-footer {
flex-shrink: 0;
padding: 20px 26px;
background: #FFFFFF;
box-shadow: 0 -8px 16px -8px rgba(5, 5, 5, 0.08);
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
/* Session 139 — real bug, confirmed via source read against the
real Account/cart mobile rule ("Mobile: all drawers full-screen",
earlier in this file): this override was `width:100%;
max-width:none;`, with no `!important` — but the shared desktop
"UNIVERSAL DRAWER WIDTH" rule this panel joined (Session 138) is
`width:40% !important; max-width:560px !important;`, and that
rule is NOT conditioned to desktop only, so it still matches at
mobile widths too. A non-important rule can never override an
already-applied !important one, at any media width, regardless
of load order or specificity — so this override was silently
never taking effect at all, leaving the drawer stuck at ~40% of
the viewport (a real, narrow sliver) on every real mobile
device, not the full-screen width every other drawer correctly
gets there. Account/cart's own real mobile value is `100vw
!important; max-width:100vw !important;` (not `100%`, and
genuinely !important) — matched here exactly, same technique,
same values; their own rule is untouched. */
.silure-filters-panel {
width: 100vw !important;
max-width: 100vw !important;
}
.silure-filters-body {
padding: 0 20px;
}
.silure-filters-footer {
padding: 16px 20px;
}
}