/*rzm:s50*/ /** * Beautiful Fast Cart - Styles * Version: 2.4.0 - $100,000 LEGENDARY EDITION 😢 * * Clean, beautiful, and perfect styling for WooCommerce header cart * with Fast Cart #15 icon featuring speed lines * PLUS perfectly responsive cart page design * PLUS $100,000 LEGENDARY empty cart PAGE with SUPER SAD MOUTH * PLUS advanced gradients, premium buttons, and epic animations */ /* ============================================ */ /* RESET & BASE STYLES */ /* ============================================ */ /* Ensure clean slate for cart elements */ .cart-item .header-button, .cart-item .header-cart-link, .cart-item .nav-dropdown { box-sizing: border-box !important; } /* ============================================ */ /* HIDE OLD CART ICON */ /* ============================================ */ .cart-item .header-button .icon-shopping-cart, .cart-item .header-button i[class*="icon"] { display: none !important; } /* ============================================ */ /* BEAUTIFUL CART BUTTON */ /* ============================================ */ /* --------------------------------------------------------------------------- FLUID UNITS FOR THE HEADER CART BUTTON (RZK 2026-08-02, task 1) --bfc-hdr-u : spatial unit 0.76 -> 1.00 (360px -> 1250px viewport) --bfc-hdr-t : type unit 0.80 -> 1.00 (fonts shrink more gently) Both reach 1px at 1250px, which is this site's content container max-width -- the width at which the page itself stops growing. So the header cart button grows with the page and then holds with it, instead of holding at some number unrelated to the layout. At 768px / 1024px they still reproduce the old fixed breakpoint values to within half a pixel, which is why the old `@media (max-width:1024px)` / `(max-width:768px)` copies of these same properties were REMOVED rather than kept as overrides. --------------------------------------------------------------------------- */ .cart-item .header-button { --bfc-hdr-u: clamp(0.76px, calc(0.6629px + 0.02697vw), 1px); --bfc-hdr-t: clamp(0.80px, calc(0.7191px + 0.02247vw), 1px); } .cart-item .header-button .header-cart-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: calc(var(--bfc-hdr-u) * 12) !important; padding: calc(var(--bfc-hdr-u) * 14) calc(var(--bfc-hdr-u) * 24) !important; background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%) !important; border-radius: 100px !important; box-shadow: 0 4px 14px rgba(157, 78, 221, 0.35), 0 2px 8px rgba(157, 78, 221, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important; position: relative !important; /* RZK 2026-08-02: `overflow: hidden` removed. It was here to keep the ::after shine inside the pill, but that element already carries `border-radius: inherit`, so it clips itself. Keeping it meant this file and -FIXES.css disagreed about the same property on the same element, and the badge (which must overhang the button) was collateral. */ border: none !important; text-decoration: none !important; min-height: calc(var(--bfc-hdr-u) * 46) !important; } /* Fast Cart #15 SVG Icon */ .cart-item .header-button .bfc-header-icon { display: inline-block !important; width: calc(var(--bfc-hdr-u) * 26) !important; height: calc(var(--bfc-hdr-u) * 26) !important; min-width: calc(var(--bfc-hdr-u) * 26) !important; color: #ffffff !important; fill: none !important; stroke: currentColor !important; flex-shrink: 0 !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important; pointer-events: none !important; } /* Cart Title Container */ .cart-item .header-button .header-cart-title { display: inline-flex !important; align-items: center !important; gap: calc(var(--bfc-hdr-u) * 10) !important; color: #ffffff !important; font-weight: 600 !important; font-size: calc(var(--bfc-hdr-t) * 15) !important; white-space: nowrap !important; letter-spacing: -0.01em !important; line-height: 1.4 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; } /* Cart Price Badge */ .cart-item .header-button .cart-price { display: inline-block !important; font-weight: 700 !important; background: rgba(255, 255, 255, 0.25) !important; padding: calc(var(--bfc-hdr-u) * 6) calc(var(--bfc-hdr-u) * 14) !important; border-radius: 100px !important; font-size: calc(var(--bfc-hdr-t) * 14) !important; color: #ffffff !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.1) !important; } /* Distinct Items Badge */ .cart-item .header-button .bfc-cart-badge { position: absolute !important; top: calc(var(--bfc-hdr-u) * -7) !important; bottom: auto !important; right: calc(var(--bfc-hdr-u) * -7) !important; left: auto !important; inset-inline-end: calc(var(--bfc-hdr-u) * -7) !important; min-width: calc(var(--bfc-hdr-u) * 22) !important; height: calc(var(--bfc-hdr-u) * 22) !important; padding: 0 calc(var(--bfc-hdr-u) * 9) !important; width: max-content !important; max-width: none !important; box-sizing: border-box !important; border-radius: 999px !important; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #ffffff !important; font-weight: 600 !important; font-size: calc(var(--bfc-hdr-t) * 10.5) !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 1px 4px rgba(239, 68, 68, 0.28), 0 2px 10px rgba(239, 68, 68, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important; letter-spacing: 0 !important; white-space: nowrap !important; font-variant-numeric: tabular-nums !important; flex: 0 0 auto !important; z-index: 3 !important; pointer-events: none !important; transform: translateZ(0) !important; } .cart-item .header-button .bfc-cart-badge.is-empty { display: none !important; } /* RZK 2026-08-02: the `.is-small` copy and the 849px `.show-for-medium` copy of the badge geometry were deleted -- both existed only to hand-shrink the badge on narrow screens, which --bfc-hdr-u now does continuously and without an override war. Only the badge's vertical nudge inside the compact mobile header remains, because that is a genuine layout difference, not a size. */ @media (max-width: 849px) { #header #masthead .show-for-medium .cart-item .header-button .bfc-cart-badge { top: calc(var(--bfc-hdr-u) * -9) !important; } } /* Hover State - Cart Button */ .cart-item .header-button .header-cart-link:hover { transform: translateY(-4px) scale(1.03) !important; box-shadow: 0 8px 24px rgba(157, 78, 221, 0.45), 0 4px 12px rgba(157, 78, 221, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important; background: linear-gradient(135deg, #b298dc 0%, #9d4edd 100%) !important; } /* Icon Animation on Hover */ .cart-item .header-button .header-cart-link:hover .bfc-header-icon { transform: scale(1.2) rotate(8deg) !important; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important; } @media (max-width: 849px) { #header #masthead .show-for-medium .cart-item .header-button .header-cart-link:hover .bfc-header-icon { transform: none !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important; } } /* Price Badge on Hover */ .cart-item .header-button .header-cart-link:hover .cart-price { background: rgba(255, 255, 255, 0.35) !important; transform: scale(1.05) !important; } /* Active/Click State */ .cart-item .header-button .header-cart-link:active { transform: translateY(-2px) scale(1.01) !important; box-shadow: 0 4px 12px rgba(157, 78, 221, 0.4), 0 2px 6px rgba(157, 78, 221, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important; } /* Shine Effect */ .cart-item .header-button .header-cart-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 45%, transparent 100%); background-size: 220% 100%; background-position: -160% 0; opacity: 0; pointer-events: none; z-index: 1; } .cart-item .header-button .header-cart-link:hover::after { opacity: 1; background-position: 140% 0; } /* ============================================ */ /* MINI CART DROPDOWN */ /* ============================================ */ /* --------------------------------------------------------------------------- THE MINI CART SCALE (RZK 2026-08-02, task 1 rev 2) One declaration defines the panel's width. Both scaling units are then derived from that same declaration, so the panel and everything inside it are mathematically incapable of drifting apart. --bfc-mc-panel : the panel's own width --bfc-mc-u : spatial unit (padding, gaps, radii, images, buttons, svgs) --bfc-mc-t : type unit (fonts -- a gentler slope, because text that shrinks as fast as padding stops being readable) Reading the width right to left: from 272px it tracks 76vw up to a 466px ceiling, and it is additionally capped at 88vw so it can never crowd the edges of a very narrow screen. 466px is where the panel stops growing because that is comfortably inside this site's 1250px content container. REVISION NOTE (2026-08-02, second pass). The first attempt used `min(92vw, clamp(420px, ...))`, which made the panel 359px on a 390px phone -- effectively the full screen width -- and, because the content units are derived from the panel, made everything inside it correspondingly large. Both were wrong. 76vw keeps the panel reading as a dropdown rather than a takeover (296px on a 390px phone, ~76% of the screen), and the units below were re-fitted so a phone genuinely gets smaller type, images and buttons than a desktop instead of merely a narrower copy of it. The units are straight lines fitted so that a 420px panel yields exactly u = 1.000 and t = 1.000, i.e. the historical pixel values. Result: viewport panel panel/vw image title trash svg btn height 320 272 85% 46.1 11.8 11.8 44.0 360 274 76% 46.4 11.8 11.9 44.0 390 296 76% 49.1 11.8 12.6 44.0 430 327 76% 52.8 12.1 13.6 44.0 600 456 76% 68.8 13.9 17.7 51.1 768 466 61% 70.0 14.0 18.0 52.0 1440+ 466 32% 70.0 14.0 18.0 52.0 Desktop is unchanged from the previous pass (466px panel, 70px image, 14px type); everything that moved, moved on phones and small tablets. The 466px ceiling is not cosmetic either: at 480px a four-item cart needed ~14px more vertical room than a 1440x900 screen offers, so the checkout button ended up below the fold of the panel. 466px still gets the real win -- product titles fit on ONE line instead of wrapping to two, which starts at about 460px -- while a four-item cart fits without scrolling on the most common desktop size. Container query units are the textbook tool for "scale with my own box", but a container cannot query itself -- `cqw` in a rule that also declares `container-type` resolves against the nearest ANCESTOR container. Deriving the units from the width expression avoids that trap, needs no @supports fallback, and leaves nothing exotic for RUCSS to mis-parse. --------------------------------------------------------------------------- */ .cart-item .nav-dropdown { --bfc-mc-panel: min(88vw, clamp(272px, 76vw, 466px)); --bfc-mc-u: max(0.62px, calc(0.178px + 0.0017647 * var(--bfc-mc-panel))); --bfc-mc-t: max(0.84px, calc(0.534px + 0.001 * var(--bfc-mc-panel))); /* --------------------------------------------------------------------- FOOTER GEOMETRY (added 2026-08-02, third pass) The two footer buttons have to sit side by side at every width, and the longer of the two labels has to fit on ONE line inside its own half of the row. Rather than pick font sizes by eye and hope, the label was measured: rendered in this font at size F, "مشاهده سبد خرید" occupies 8.1 x F pixels, and "تسویه حساب" 6.1 x F. That ratio is a property of the string and the typeface, so it can be inverted -- given the width a button will actually have, there is a largest font size that still fits on one line, and it can be written down. The row's own width is the panel minus the two insets that stand between them, and those insets are now DECLARED here rather than observed: ul.nav-dropdown <- panel, inset --bfc-mc-pad li.html.widget_shopping_cart <- list, inset --bfc-mc-inset .widget_shopping_cart_content .ux-mini-cart-footer p.buttons <- the row REVISION NOTE (2026-08-02, fourth pass). This used to read `--bfc-mc-panel - 20px`, described as "5px of panel padding plus a 5px list inset on each side", and the note claimed the constant had been verified at 320-768px. It had -- but only there, and for the wrong reason. The outer 5px was not this stylesheet's; it came from the theme's Additional CSS rule `.cart-item .nav-dropdown{padding:5px!important}`, which lives inside `@media (max-width:768px)`. Above 768px that rule stops applying, the panel's horizontal padding falls to 0, and the real row is `panel - 10px` while this formula still said `panel - 20px`. The error was invisible only because on desktop the design ramp is the smaller half of the min() below, so the fit cap never binds. Deriving the row from declared properties removes both problems at once: the number is right at every width, and it no longer depends on a rule in a different stylesheet that a future Customizer edit could delete. So: each button is half the row minus half the gap, the text box inside it is that minus the horizontal padding, and the font size is whichever is smaller -- what the design ramp asks for, or what fits. Dividing by 8.6 rather than 8.1 leaves about 6% of headroom, which absorbs both webfont-vs-fallback metric differences and a future copy edit that makes a label a character or two longer. Worked through at the two extremes, with the fourth-pass derivation: 320px viewport -> panel 272, u 0.658 t = max(0.84, 0.534 + 0.272) = 0.84 <- the FLOOR binds here, not the line; below a ~306px panel the ramp would fall under 0.84 and text would stop being readable. pad 4, inset 4 => row 256, gap 7.90, box 124.05 cap = (124.05 - 14) / 8.6 = 12.80px ramp = 0.84 * 15 = 12.60px <- the smaller, so it wins label needs 8.1 x 12.60 = 102.1px inside 110.05px. 8px of slack. (Measured in Chromium at a 320px viewport: 12.6px. Exactly.) 466px panel (768px viewport and up) -> u 1.000, t 1.000 pad 5, inset 5 => row 446, gap 12.00, box 217.00 cap = (217 - 20) / 8.6 = 22.91px ramp = 15.00px <- the smaller, so it wins So the ramp is the binding half at both ends and the cap is headroom, not a constraint. It exists for the case the ramp cannot see: a longer label. --------------------------------------------------------------------- */ /* the panel's own inset, and the inset of the list item inside it */ --bfc-mc-pad: max(4px, calc(var(--bfc-mc-u) * 5)); --bfc-mc-inset: max(4px, calc(var(--bfc-mc-u) * 5)); /* usable width of any full-width row in the footer */ --bfc-mc-row: calc( var(--bfc-mc-panel) - (var(--bfc-mc-pad) * 2) - (var(--bfc-mc-inset) * 2) ); --bfc-mc-btn-gap: calc(var(--bfc-mc-u) * 12); --bfc-mc-btn-box: calc((var(--bfc-mc-row) - var(--bfc-mc-btn-gap)) / 2); --bfc-mc-btn-pad: max(7px, calc(var(--bfc-mc-u) * 10)); --bfc-mc-btn-fs: min( calc(var(--bfc-mc-t) * 15), calc((var(--bfc-mc-btn-box) - (var(--bfc-mc-btn-pad) * 2)) / 8.6) ); background: #ffffff !important; /* The panel's radius is named here so the empty card can derive its own from it and stay concentric. See --bfc-empty-radius. */ --bfc-mc-radius: calc(var(--bfc-mc-u) * 24); /* The colour of the currency unit beside a price inside this panel, stated once for the quantity chip and the subtotal. One step down from the amount's #9d4edd, so the unit still reads as subordinate to the number without the compounded 0.18 alpha it used to inherit. */ --bfc-mc-unit-color: rgba(157, 78, 221, 0.72); border-radius: var(--bfc-mc-radius) !important; display: block !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1) !important; border: none !important; /* RZK 2026-08-02 (task 1): ONE width rule, and it is the same expression the scaling units are built from (see --bfc-mc-panel above). The original pair width: clamp(280px, 60vw, 420px) max-width: min(92vw, 420px) contradicted itself: on a 390px phone 60vw = 234px lost to the 280px floor, so the panel sat at 280px while 92vw = 359px was free -- a fifth of the screen wasted, and every child then had to fit a box narrower than the design assumed. */ width: var(--bfc-mc-panel) !important; max-width: var(--bfc-mc-panel) !important; min-width: 0 !important; /* * RZK 2026-08-02 (fourth pass): the panel's inset is declared HERE, once, * for every width. It used to be supplied by the theme's Additional CSS * (`padding:5px!important`) but only below 768px, which left the panel with * no horizontal inset at all on desktop and made the button-row formula * above wrong by 10px there. One fluid declaration, no breakpoint cliff. */ padding: var(--bfc-mc-pad) !important; margin-top: calc(var(--bfc-mc-u) * 18) !important; max-height: calc(100vh - clamp(120px, 16vh, 170px)) !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; transform: translateX(var(--bfc-dd-shift, 0px)) !important; } @media (min-width: 1024px) and (max-width: 1600px) { .cart-item .nav-dropdown { right: auto !important; left: 0 !important; } } @keyframes dropdownFadeIn { from { opacity: 0; } to { opacity: 1; } } /* * The list item that Flatsome wraps the whole widget in. Its 5px inset is the * second term of --bfc-mc-row, so it is declared rather than inherited from a * theme default -- otherwise the row arithmetic silently depends on Flatsome. */ .cart-item .nav-dropdown > li.widget_shopping_cart, .cart-item .nav-dropdown > li.html { /* RZK 2026-09-28: all FOUR sides, not just the inline axis. `padding-inline` left top/bottom to the theme's `.nav-dropdown li` defaults (0 and 10px), so the distance from the panel edge to the empty card came out top 4px / sides 8px / bottom 14px. The purple ring is a box-shadow on the card, so it hugged the card correctly - but it sat 1px from the panel at the top and 11px at the bottom, which read as "the top border doesn't match". Declaring the whole box from the same custom property makes the inset uniform by construction and stops the theme reintroducing the asymmetry. */ padding: var(--bfc-mc-inset) !important; } /* Cart Items List */ .cart-item .nav-dropdown .woocommerce-mini-cart { padding: 0 !important; margin: 0 0 calc(var(--bfc-mc-u) * 24) 0 !important; list-style: none !important; max-height: none !important; overflow: visible !important; } .cart-item .nav-dropdown { scrollbar-width: thin !important; scrollbar-color: #9d4edd #f3f4f6 !important; } /* Custom Scrollbar */ .cart-item .nav-dropdown::-webkit-scrollbar { width: 8px !important; } .cart-item .nav-dropdown::-webkit-scrollbar-track { background: #f3f4f6 !important; border-radius: 10px !important; } .cart-item .nav-dropdown::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #9d4edd 0%, #7b2cbf 100%) !important; border-radius: 10px !important; } .cart-item .nav-dropdown::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #b298dc 0%, #9d4edd 100%) !important; } /* Individual Cart Item */ .cart-item .nav-dropdown .mini_cart_item { display: flex !important; gap: calc(var(--bfc-mc-u) * 16) !important; margin-bottom: calc(var(--bfc-mc-u) * 14) !important; background: linear-gradient(135deg, #f9fafb 0%, #f5f6f7 100%) !important; border-radius: calc(var(--bfc-mc-u) * 18) !important; border: 2px solid transparent !important; position: relative !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; /* * RZK 2026-08-02: this row has TWO absolutely-positioned things overlapping it, * one at each end, and the text has to clear both. * * inline-START : the product thumbnail. Flatsome positions it absolutely * (`ul.product_list_widget li img { position:absolute; right:0 }`, * which the Customizer CSS repeats with right:5px under 768px). * inline-END : the remove button, positioned by this stylesheet. * * The original code reserved a single `padding-right: 44 * u`, which on this RTL * site is the thumbnail's side -- so the trash icon at the other end had no * reservation at all and the product name ran straight underneath it. That is * the reported bug. * * Both reservations are now derived from the same expressions that place and * size the elements themselves, including their floors, so the clearance cannot * drift when the unit shrinks. (A flat multiple of the unit left only 1.7px of * clearance at 320px, because the button was pinned to its 22px tap-target floor * while the reservation had shrunk with u.) */ padding-block: calc(var(--bfc-mc-u) * 14) !important; padding-inline-start: calc( (var(--bfc-mc-u) * 5) /* thumbnail inset */ + (var(--bfc-mc-u) * 70) /* thumbnail width */ + max(9px, var(--bfc-mc-u) * 12) /* clearance, floored */ ) !important; padding-inline-end: calc( (var(--bfc-mc-u) * 12) /* button inset */ + max(22px, var(--bfc-mc-u) * 28) /* button width, floored */ + max(8px, var(--bfc-mc-u) * 8) /* clearance, floored */ ) !important; /* flex-direction: row-reverse; */ } .cart-item .nav-dropdown .mini_cart_item:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1), 0 3px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 2px rgba(157, 78, 221, 0.15) !important; background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important; border-color: rgba(157, 78, 221, 0.2) !important; } /* * Product Image * * RZK 2026-08-02 (fourth pass): this rule used to be written twice, the second * copy prefixed `html body` purely to out-specify the theme's Additional CSS, * which carried `img{width:60px!important}` under 768px and * `img{width:50px!important}` under 480px at identical specificity and later in * the cascade. Winning that way worked, but it left two stylesheets asserting * the thumbnail's size and a reader with no way to tell which one was in force. * * The theme's copies have now been deleted from the Customizer, so this is once * again the only rule that sizes the thumbnail, and it needs no prefix. Note * that a global `ul.product_list_widget li img` rule (60px, plus a 100px * margin) still exists in the Customizer and legitimately serves other product * widgets; it loses here on specificity alone -- four classes to one class and * two element selectors -- so there is nothing left to arbitrate. */ .cart-item .nav-dropdown .mini_cart_item img { width: calc(var(--bfc-mc-u) * 70) !important; height: calc(var(--bfc-mc-u) * 70) !important; min-width: calc(var(--bfc-mc-u) * 70) !important; max-width: calc(var(--bfc-mc-u) * 70) !important; min-height: calc(var(--bfc-mc-u) * 70) !important; max-height: calc(var(--bfc-mc-u) * 70) !important; border-radius: calc(var(--bfc-mc-u) * 14) !important; object-fit: cover !important; /* * RZK 2026-08-02: Flatsome anchors this thumbnail with a PHYSICAL `right`, which * means "the same corner in RTL and LTR" -- and in RTL that is the same end the * text starts from. Re-anchoring it to the inline START is visually identical on * this RTL site, but it makes the row's two reservations (thumbnail at the * start, remove button at the end) well defined in both directions instead of * both landing on the right. */ inset-inline-start: calc(var(--bfc-mc-u) * 5) !important; inset-inline-end: auto !important; top: calc(var(--bfc-mc-u) * 10) !important; /* * RZK 2026-08-02: a desktop-only rule (>=850px) also puts `margin-right: 9px` * on this thumbnail -- inline-start on an RTL site -- plus a 100px margin at * the other end. Margins still shift an absolutely-positioned box, so the * thumbnail sat 9px further in than the inset above says it does, while the * row's start reservation is derived from that inset. Net effect: the name had * the intended 12px of clearance on phones but only 3px on desktop. Zeroing * these margins makes the inset the single source of truth at every width. */ margin: 0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important; flex-shrink: 0 !important; display: block !important; } .cart-item .nav-dropdown .mini_cart_item:hover img { transform: scale(1.02) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15) !important; } /* Remove Button */ .cart-item .nav-dropdown .remove { position: absolute !important; top: calc(var(--bfc-mc-u) * 12) !important; /* logical, so it pairs with the item's padding-inline-end above */ inset-inline-end: calc(var(--bfc-mc-u) * 12) !important; width: max(22px, calc(var(--bfc-mc-u) * 28)) !important; height: max(22px, calc(var(--bfc-mc-u) * 28)) !important; min-width: max(22px, calc(var(--bfc-mc-u) * 28)) !important; border-radius: calc(var(--bfc-mc-u) * 8) !important; background: rgba(239, 68, 68, 0.95) !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; cursor: pointer !important; z-index: 10 !important; /* RZK 2026-08-02: visible by default. The old code set `opacity:0` here and then fought itself back to `opacity:1` inside `@media (max-width:1024px)`. The real intent is "reveal on hover only where hovering exists", which is a hover query, not a width query -- a 1280px touch laptop was getting the hidden version with no way to reveal it. */ opacity: 1 !important; } @media (hover: hover) and (pointer: fine) { .cart-item .nav-dropdown .remove { opacity: 0 !important; } .cart-item .nav-dropdown .mini_cart_item:hover .remove, .cart-item .nav-dropdown .mini_cart_item:focus-within .remove { opacity: 1 !important; } } /* Remove any ::before or ::after pseudo-elements that might add × */ .cart-item .nav-dropdown .remove::before, .cart-item .nav-dropdown .remove::after { content: none !important; display: none !important; } /* Style the SVG trash icon inside remove button. RZK 2026-08-02: selector widened to cover every place WooCommerce renders a mini cart, which is what -FIXES.css used to do with a fixed 18px. */ .cart-item .nav-dropdown .remove svg, .woocommerce .widget_shopping_cart .remove svg, .woocommerce-mini-cart .remove svg { width: calc(var(--bfc-mc-u) * 18) !important; height: calc(var(--bfc-mc-u) * 18) !important; stroke: #ffffff !important; color: #ffffff !important; fill: none !important; display: block !important; flex-shrink: 0 !important; } .cart-item .nav-dropdown .mini_cart_item:hover .remove { opacity: 1 !important; } .cart-item .nav-dropdown .remove:hover { transform: scale(1.1) !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important; background: rgba(220, 38, 38, 0.98) !important; } /* Ensure SVG icon stays white on hover */ .cart-item .nav-dropdown .remove:hover svg { stroke: #ffffff !important; color: #ffffff !important; } /* * Product Link Container * * RZK 2026-08-02 (fourth pass): `flex-direction`, `white-space` and the * ::after reset below used to come from the theme's Additional CSS, and only * below 768px. They are declared here so this row renders the same way with or * without that stylesheet -- Flatsome decorates dropdown links with an ::after * marker, which has no business appearing on a product row. */ .cart-item .nav-dropdown .mini_cart_item > a:not(.remove) { display: flex !important; flex-direction: row !important; white-space: normal !important; align-items: center !important; gap: calc(var(--bfc-mc-u) * 16) !important; flex: 1 1 auto !important; text-decoration: none !important; min-width: 0 !important; overflow: hidden !important; /* * RZK 2026-08-02: `calc(100% - 45 * u)` used to live here, hand-subtracting the * thumbnail's width from the row. It is no longer needed: the thumbnail is out * of flow and the ITEM now reserves its width as padding-inline-start, so this * row's 100% is already clear of it. One reservation, in one place. */ max-width: 100% !important; padding-inline-end: 0 !important; } .cart-item .nav-dropdown .mini_cart_item > a:not(.remove)::after { content: none !important; display: none !important; } /* Product Info Wrapper */ .cart-item .nav-dropdown .mini_cart_item .woocommerce-mini-cart-item__product-info { display: flex !important; flex-direction: column !important; gap: calc(var(--bfc-mc-u) * 8) !important; flex: 1 !important; min-width: 0 !important; overflow: hidden !important; max-width: 100% !important; } /* Product Name */ .cart-item .nav-dropdown .mini_cart_item a:not(.remove) { color: #1f2937 !important; font-weight: 600 !important; font-size: calc(var(--bfc-mc-t) * 14) !important; line-height: 1.4 !important; text-decoration: none !important; } .cart-item .nav-dropdown .mini_cart_item .bfc-mini-cart-title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; word-wrap: break-word !important; word-break: break-word !important; max-width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; } .cart-item .nav-dropdown .mini_cart_item a:not(.remove):hover { color: #9d4edd !important; } /* Product Quantity */ .cart-item .nav-dropdown .mini_cart_item .quantity { color: #6b7280 !important; font-size: calc(var(--bfc-mc-t) * 14) !important; font-weight: 500 !important; display: inline-flex !important; padding: calc(var(--bfc-mc-u) * 5) !important; /* RZK 2026-09-29 (round 11): baseline, not centre. * * This is a flex row holding three runs of text at three different sizes - * the «۱ ×» label at `t * 14`, the digits, and the unit. `center` aligns * the BOXES, and boxes with different line-heights do not then share a * text baseline, so the label sat above the price. `baseline` says what was * actually meant and stays true if any of the three sizes is ever retuned. */ align-items: baseline !important; /* RZK 2026-09-29 (round 11): this chip's own opacity, and the chrome that * depended on it. * * Flatsome's flatsome-shop-rtl.css carries * `ul.product_list_widget li .quantity{...opacity:.6}`. Because `opacity` * applies to the whole subtree and cannot be undone by a descendant's * colour, it dimmed the price to 60% - and the unit inside it, which the * Customizer separately sets to `opacity:.3`, to 0.6 x 0.3 = 0.18. That * compounding is why «تومان» read as a ghost. * * Removing the dimming also un-dims the border, background and box-shadow * that the Customizer's site-wide `.quantity` stepper rule contributes to * this chip, so all three are declared here at the values they were * previously COMPOSITING to (#d1d5db, #fff and 15% black at 0.6 over the * row's #f9fafb). The chip's chrome is therefore pixel-unchanged and only * the text got its colour back. */ opacity: 1 !important; background: #fdfdfd !important; border-color: #e1e4e8 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.09) !important; flex-wrap: nowrap !important; white-space: nowrap !important; line-height: 1.5 !important; /* * RZK 2026-08-02 (fourth pass): logical properties, and both ends declared. * The theme's Additional CSS set `margin-right:30px;margin-left:0` below * 768px, so this indent doubled on phones and used the fluid value only on * desktop. One fluid value, both ends, every width. */ margin-inline-start: calc(var(--bfc-mc-u) * 15) !important; margin-inline-end: 0 !important; } .cart-item .nav-dropdown .mini_cart_item .quantity .amount { color: #9d4edd !important; font-weight: 700 !important; font-size: calc(var(--bfc-mc-t) * 15) !important; display: inline !important; margin: 0 4px !important; } /* * THE CURRENCY UNIT (RZK 2026-09-29, round 11) * * «۱۶۵.۰۰۰ تومان» is one price, so the unit belongs on the same line, at the * same size, in a colour one step down from the number rather than two. * * Two outside rules were pulling it apart. Flatsome's rtl.css sets * `.product_list_widget .woocommerce-Price-currencySymbol{font-size:11px}` * against 13px digits - a whole step smaller, which dropped the unit's optical * band below the number and is the main reason the two did not read as one run. * And the Customizer sets a site-wide `opacity:.3` on the unit, which inside * the chip's own 0.6 became 0.18. * * `font-size: 1em` makes the unit exactly the size of the digits it belongs to, * whatever those are, so nothing has to be restated if the ramp changes. The * colour is stated once as --bfc-mc-unit-color (see the panel rule) and used * both here and in the subtotal, so the two can never drift apart. It is an * rgba of the same brand purple as the amount, so the unit still reads as * subordinate to the number - just not as a ghost. * * Scoped to the mini cart on purpose: the site-wide default is a deliberate * choice recorded in the Customizer and is left alone. The Customizer already * makes this same exception for `.cart-price`. */ .cart-item .nav-dropdown .mini_cart_item .quantity .amount .woocommerce-Price-currencySymbol { font-size: 1em !important; } .cart-item .nav-dropdown .mini_cart_item .quantity .woocommerce-Price-currencySymbol, .cart-item .nav-dropdown .total .woocommerce-Price-currencySymbol { opacity: 1 !important; color: var(--bfc-mc-unit-color) !important; -webkit-text-fill-color: var(--bfc-mc-unit-color) !important; } /* ============================================ */ /* CART FOOTER */ /* ============================================ */ /* * RZK 2026-08-02: the footer used to spend `u * 24` of padding-top AND `u * 24` * of margin-top around its 2px separator -- 31.6px of empty vertical space at * 320px before the total row even begins, and 48px on desktop. On a 568px-tall * phone that is space the item list needs. Halved on both sides, with an 8px * floor so the separator still reads as one. * * (Fourth pass: this rule was previously duplicated with an `html body` prefix * to out-specify a copy in the theme's Additional CSS. That copy has been * deleted, so one selector is enough again.) */ .cart-item .nav-dropdown .ux-mini-cart-footer { padding-top: max(8px, calc(var(--bfc-mc-u) * 14)) !important; border-top: 2px solid rgba(229, 231, 235, 0.9) !important; margin-top: max(8px, calc(var(--bfc-mc-u) * 14)) !important; position: relative !important; } /* * Total Section * * RZK 2026-08-02: this row was the tallest thing in the footer -- 53px on a * 320px phone and 70px on desktop -- because its padding rode `u * 18 / u * 22` * and its type `t * 17 / t * 19`. Both are now tighter, and the label and the * amount are `nowrap` because they provably fit: the label measures 4.0x and * the amount 6.7x their own font size, so at 320px they need 50.4 + 92.9 + 6 of * gap = 149.3px inside a 233.6px box. 84px of slack, so nothing can be clipped. */ .cart-item .nav-dropdown .total { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: max(6px, calc(var(--bfc-mc-u) * 8)) !important; margin-bottom: max(8px, calc(var(--bfc-mc-u) * 12)) !important; padding: max(7px, calc(var(--bfc-mc-u) * 11)) max(9px, calc(var(--bfc-mc-u) * 14)) !important; background: linear-gradient(135deg, rgba(157, 78, 221, 0.1) 0%, rgba(123, 44, 191, 0.08) 100%) !important; border-radius: max(8px, calc(var(--bfc-mc-u) * 12)) !important; font-size: calc(var(--bfc-mc-t) * 15) !important; line-height: 1.35 !important; border: 2px solid rgba(157, 78, 221, 0.15) !important; } .cart-item .nav-dropdown .total strong { color: #1f2937 !important; font-weight: 700 !important; font-size: calc(var(--bfc-mc-t) * 15) !important; white-space: nowrap !important; flex: 0 0 auto !important; } .cart-item .nav-dropdown .total .amount { color: #9d4edd !important; font-weight: 800 !important; font-size: calc(var(--bfc-mc-t) * 16.5) !important; white-space: nowrap !important; flex: 0 1 auto !important; min-width: 0 !important; text-align: end !important; } /* * Buttons Container * * RZK 2026-08-02: these two must never stack. * * The original cause was a rule in the theme's Additional CSS -- * `.cart-item .nav-dropdown .buttons{flex-direction:column!important}` inside * `@media (max-width:768px)` -- at identical specificity and later in the * cascade, which is why the buttons appeared one under the other on phones. * The third pass beat it by duplicating this block behind an `html body` * prefix. The fourth pass DELETED it instead: there is now exactly one rule in * the codebase that decides this axis, and it is this one. `flex-wrap: nowrap` * closes the other route to a second row. */ .cart-item .nav-dropdown .buttons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: space-between !important; gap: var(--bfc-mc-btn-gap) !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } /* * RZK 2026-08-02: `flex: 1 1 0` plus `min-width: 0` is what divides the row in * half, and it only works if the buttons are allowed to shrink below their * content width -- hence `width: auto`, which was originally added to neutralise * `.cart-item .nav-dropdown .buttons .button{width:100%!important}` in the * theme's Additional CSS. That rule has since been deleted; `width: auto` stays * because it is also the correct value to state for a flex item that is sized * by its flex-basis, and Flatsome's own button styles set widths of their own. * * font-size is the measured fit cap described where --bfc-mc-btn-fs is defined, * so the longer label sits on one line from 240px upwards. white-space stays * `normal` on purpose: if a future label outgrows even the cap, two lines is a * far better failure than text spilling out of the button. */ .cart-item .nav-dropdown .button { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: max(6px, calc(var(--bfc-mc-u) * 9)) var(--bfc-mc-btn-pad) !important; border-radius: max(8px, calc(var(--bfc-mc-u) * 12)) !important; font-weight: 700 !important; font-size: var(--bfc-mc-btn-fs) !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; border: none !important; cursor: pointer !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; /* never let the fluid ramp push a primary action under a comfortable tap target: max() keeps this a single declaration. */ min-height: max(44px, calc(var(--bfc-mc-u) * 48)) !important; } /* View Cart Button */ .cart-item .nav-dropdown .wc-forward:not(.checkout) { background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important; color: #374151 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; } .cart-item .nav-dropdown .wc-forward:not(.checkout):hover { background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important; transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; color: #1f2937 !important; } /* Checkout Button */ .cart-item .nav-dropdown .checkout { background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%) !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(157, 78, 221, 0.4), 0 3px 8px rgba(157, 78, 221, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .cart-item .nav-dropdown .checkout:hover { background: linear-gradient(135deg, #b298dc 0%, #9d4edd 100%) !important; transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 8px 24px rgba(157, 78, 221, 0.5), 0 4px 12px rgba(157, 78, 221, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } /* ============================================ */ /* EMPTY CART MESSAGE - $2,000,000 LEGENDARY DESIGN */ /* ============================================ */ .cart-item .nav-dropdown .ux-mini-cart-empty { text-align: center !important; padding: clamp(40px, 10vw, 70px) clamp(20px, 6vw, 40px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: clamp(18px, 4vw, 28px) !important; background: radial-gradient(circle at 20% 80%, rgba(167, 139, 250, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(196, 181, 253, 0.15) 0%, transparent 50%), linear-gradient(135deg, #faf5ff 0%, #f3e8ff 30%, #ede9fe 50%, #f3e8ff 70%, #faf5ff 100%) !important; background-size: 200% 200% !important; /* RZK 2026-09-24: the panel radius and the gradient ring's inset are now named once here, because ::before below has to derive its own radius from BOTH of them to stay concentric. See the note on that rule. */ /* RZK 2026-09-29: DERIVED, not chosen. For the purple ring to sit the same distance from the panel along the straight edges AND around the corners, the card's radius has to be the panel's radius minus the inset between them - that is the condition for two rounded rectangles to be concentric: corner gap == side gap <=> Rcard == Rpanel - inset It used to be `clamp(16px, 4vw, 24px)`: a literal picked independently of the panel, which at 428px gave 17.12px where concentricity needs 10.05px. The ring was therefore 5.0px from the panel along each edge but 7.9px away diagonally at each corner, so the two borders visibly failed to follow one another - measured by pixel probe in both Chromium and WebKit before this change. max() floors it at 0 so a very narrow panel can only ever square the card off, never produce a negative radius. RZK 2026-09-29 (round 11): SUPERSEDED, and the reasoning above is kept only because it explains why the previous value was wrong too. Making the two radii concentric was correct and still left the reported defect, because the defect was never the geometry. With the ring 7px inside the panel on all four sides, the pixel at the panel's edge read top rgb(251,248,255) | left/right rgb(245,240,255) | bottom rgb(236,227,253) - white at the top and progressively purple round the other three. The cause is the two DOWNWARD-offset purple drop shadows that used to be in the box-shadow below. They are clipped by the panel's `overflow`, so rather than lifting the card off the panel they smeared purple into the 7px band on three sides and left the fourth white. Hence "the top has a distance from the other thing", the others "still a little bit missing", worst at the bottom where both shadows overlap. The band is therefore removed rather than recoloured. The card cancels the two insets that stand between it and the panel - both named, so this is exact rather than a magic number - adopts the panel's own radius, and the ring becomes an INSET shadow. The result is one border on the outermost rounded rectangle, the same on all four sides and all four corners by construction, and it cannot drift if a padding is ever retuned. `--bfc-empty-radius` is kept as a name and simply follows the panel now, so nothing that referenced it can break. */ --bfc-empty-inset: calc(var(--bfc-mc-pad) + var(--bfc-mc-inset)); --bfc-empty-radius: var(--bfc-mc-radius); --bfc-empty-ring: 3px; margin: calc(-1 * var(--bfc-empty-inset)) !important; border-radius: var(--bfc-empty-radius) !important; position: relative !important; overflow: hidden !important; isolation: isolate !important; /* No animation here on purpose. `emptyCartGlow` animated box-shadow and `backgroundShift` animated background-position; neither can be composited, so both repainted this card every frame for as long as the dropdown was open. The resting box-shadow below was the 0%/100% keyframe anyway, so the card looks identical. */ /* RZK task 11 (2026-09-28): the purple ring is drawn HERE now, as the first two shadows below, instead of by a blurred ::before. The old ring was a pseudo-element inset -3px with `filter: blur(12px)`, relied on this element's `overflow: hidden` + `border-radius` to clip it, and was therefore invisible by design. On iOS it was visible WITH SQUARE CORNERS, because `filter` promotes the pseudo-element to its own compositing layer and iOS Safari does not apply an ancestor's rounded clip to a composited descendant - so the layer painted as a rectangle. Earlier passes re-tuned the ring's border-radius, which could never help: the radius value is irrelevant when the clip is not applied at all. A box-shadow always follows this element's own border-radius, on every engine, and is painted by the element rather than becoming a separate layer - so it cannot escape the corners. Dropping the blur layer is also a paint win. */ /* Every shadow is inset now. An OUTER shadow on this card can only ever be painted into the gap between the card and the panel's clip, and there is no gap any more - so an outer shadow would either be invisible or, as the two 139,92,246 ones were, a one-sided smear. */ box-shadow: inset 0 0 0 var(--bfc-empty-ring, 3px) rgba(157, 78, 221, 0.30), inset 0 0 calc(var(--bfc-empty-ring, 3px) * 4) rgba(157, 78, 221, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(139, 92, 246, 0.1) !important; } .cart-item .nav-dropdown .ux-mini-cart-empty .sad-bag-icon-mini { display: block !important; width: 140px !important; height: 140px !important; margin: 0 auto 12px auto !important; /* `epicSadCartFloat` is transform-only, so it runs on the compositor and is kept on desktop (fine pointers, block below) - it is what gives the empty state its character; touch devices show the same bag standing still. `epicSadCartPulse` is dropped: it animated `filter`, the one non-composited property in the set, which forced a main-thread repaint of the icon every frame. */ filter: drop-shadow(0 12px 24px rgba(139, 92, 246, 0.4)) drop-shadow(0 6px 12px rgba(109, 40, 217, 0.3)) !important; } .cart-item .nav-dropdown .ux-mini-cart-empty .sad-bag-icon-mini svg { width: 100% !important; height: 100% !important; display: block !important; } .cart-item .nav-dropdown .woocommerce-mini-cart__empty-message { text-align: center !important; padding: 0 !important; margin: 0 !important; background: linear-gradient(135deg, #7c3aed 0%, #9d4edd 50%, #6d28d9 100%) !important; background-size: 200% 200% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-size: clamp(15.2px, calc(12.49px + 0.8482vw), 19.0px) !important; font-weight: 700 !important; line-height: 1.6 !important; letter-spacing: -0.03em !important; position: relative !important; z-index: 1 !important; /* `textGradientShift` animated background-position on background-clip:text, which repaints the clipped gradient every frame; `textFloat` bobbed the line. Both removed - the gradient wordmark reads better still, and the icon's float already carries the motion. */ filter: drop-shadow(0 3px 6px rgba(124, 58, 237, 0.25)) drop-shadow(0 1px 3px rgba(109, 40, 217, 0.2)) !important; } @keyframes epicSadCartFloat { 0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); } 15% { transform: translateY(-5px) rotate(-1deg) scale(1.01); } 30% { transform: translateY(-12px) rotate(-3deg) scale(1.02); } 45% { transform: translateY(-15px) rotate(0deg) scale(1.03); } 60% { transform: translateY(-12px) rotate(3deg) scale(1.02); } 75% { transform: translateY(-5px) rotate(1deg) scale(1.01); } } /* ============================================ */ /* PERFORMANCE: pause the empty-cart decorative animations while the */ /* mini-cart dropdown is CLOSED. The dropdown is forced display:block */ /* (so it is always laid out) which means these infinite animations */ /* run on every page load and forever, burning main-thread time */ /* (paint/box-shadow/background-position/filter every frame) even */ /* though the user cannot see them. We only let them run once the cart */ /* is actually opened (BFC adds .mini-cart-open via its own JS). */ /* */ /* NOTE: we use :not(.mini-cart-open) (not a separate .mini-cart-open */ /* rule) on purpose: this selector matches the cart in its DEFAULT */ /* rendered state, so WP Rocket "Remove Unused CSS" keeps it. When the */ /* JS adds .mini-cart-open the :not() stops matching, this override */ /* disappears, and the original "animation: ... running" rules above */ /* take over again -- identical visuals, zero cost while closed. */ /* ============================================ */ /* Only the icon still animates, so only the icon needs pausing. The card, its ::before glow and the message are now static and cost nothing while closed. */ .cart-item:not(.mini-cart-open) .nav-dropdown .ux-mini-cart-empty .sad-bag-icon-mini { } @media (prefers-reduced-motion: reduce) { .cart-item .nav-dropdown .ux-mini-cart-empty, .cart-item .nav-dropdown .ux-mini-cart-empty .sad-bag-icon-mini, .cart-item .nav-dropdown .woocommerce-mini-cart__empty-message { } } /* ============================================ */ /* ============================================ */ /* RESPONSIVE DESIGN FOR HEADER CART */ /* ============================================ */ /* ============================================ */ /* TOUCH DEVICE MINI CART BEHAVIOR (≤1023px) */ /* First touch: show dropdown, Second touch: navigate */ /* ============================================ */ @media (max-width: 1023px) { .cart-item.has-dropdown .nav-dropdown { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-10px) !important; position: absolute !important; top: 100% !important; right: 0 !important; z-index: 9999 !important; } [dir="rtl"] .cart-item.has-dropdown .nav-dropdown, body.rtl .cart-item.has-dropdown .nav-dropdown { right: auto !important; left: 0 !important; } .cart-item.has-dropdown.mini-cart-open .nav-dropdown { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } .cart-item.has-dropdown:hover .nav-dropdown { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .cart-item.has-dropdown.mini-cart-open:hover .nav-dropdown { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } /* RZK 2026-08-02: the `(max-width:1024px)` and `(max-width:768px)` blocks that re-declared padding / icon size / font-size / gap with FIXED pixel values are gone. --bfc-hdr-u reproduces every one of those numbers on a continuous ramp (0.861 at 768px -> icon 22.4px, padding 12.1/20.7; 0.924 at 1024px -> icon 24.0px, padding 12.9/22.2), so there is nothing left to override. */ /* ============================================ */ /* RTL SUPPORT FOR MINI CART */ /* ============================================ */ [dir="rtl"] .cart-item .nav-dropdown .mini_cart_item, body.rtl .cart-item .nav-dropdown .mini_cart_item { flex-direction: column !important; } [dir="rtl"] .cart-item .nav-dropdown .mini_cart_item > a:not(.remove), body.rtl .cart-item .nav-dropdown .mini_cart_item > a:not(.remove) { flex-direction: row-reverse !important; } /* RZK 2026-08-02: the RTL override for the remove button is GONE. It used to be `left:12px`, then `left:3px` under 1024px, then a fluid `left` -- three attempts at saying "put it on the other side in RTL". `inset-inline-end` on the button itself (above) already means "the end of the line", which is the left in RTL and the right in LTR, so there is nothing left to override. */ [dir="rtl"] .cart-item .nav-dropdown .mini_cart_item:hover, body.rtl .cart-item .nav-dropdown .mini_cart_item:hover { /* No transform - prevents box from moving outside container */ } /* ============================================ */ /* ACCESSIBILITY */ /* ============================================ */ .cart-item .header-button .header-cart-link:focus { outline: 3px solid #9d4edd !important; outline-offset: 4px !important; } .cart-item .nav-dropdown .remove:focus { outline: 2px solid #ef4444 !important; outline-offset: 2px !important; } .cart-item .nav-dropdown .button:focus { outline: 3px solid #9d4edd !important; outline-offset: 3px !important; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { .cart-item .header-button .header-cart-link, .cart-item .nav-dropdown .mini_cart_item, .cart-item .nav-dropdown .remove, .cart-item .nav-dropdown .button { } } /* ============================================ */ /* ============================================ */ /* CART PAGE STYLES - PERFECT RESPONSIVE DESIGN */ /* ============================================ */ /* ============================================ */ /* CSS Custom Properties for Fluid Scaling */ /* These variables automatically scale based on viewport width */ /* This ensures smooth transitions between breakpoints without jumps */ :root { /* Viewport-based fluid sizing - scales smoothly from min to max */ --cart-base-padding: clamp(16px, 3vw, 45px); --cart-form-padding: clamp(20px, 3.5vw, 40px); --cart-heading-size: clamp(18px, 2.2vw, 26px); --cart-text-size: clamp(14px, 1.2vw, 17px); --cart-small-text: clamp(12px, 1vw, 15px); --cart-button-padding: clamp(12px, 1.5vw, 20px); --cart-border-radius: clamp(14px, 2vw, 24px); --cart-thumbnail-size: clamp(75px, 8vw, 95px); } /* Aspect ratio adjustments for different screen sizes */ /* Ensures cart components scale proportionally */ @media (max-width: 1920px) and (min-width: 1024px) { :root { --cart-thumbnail-size: clamp(80px, 7vw, 95px); } } @media (max-width: 1023px) and (min-width: 768px) { :root { --cart-thumbnail-size: clamp(70px, 9vw, 85px); } } @media (max-width: 767px) and (min-width: 480px) { :root { --cart-thumbnail-size: clamp(90px, 15vw, 110px); } } @media (max-width: 479px) { :root { --cart-thumbnail-size: clamp(70px, 20vw, 90px); --cart-base-padding: clamp(14px, 4vw, 20px); --cart-form-padding: clamp(16px, 4vw, 24px); --cart-heading-size: clamp(16px, 4.5vw, 20px); --cart-border-radius: clamp(12px, 3vw, 18px); } } /* Only apply to cart page body */ body.woocommerce-cart { background: #f5f7fa !important; } /* ============================================ */ /* FORCE STACKED LAYOUT - OVERRIDE FLATSOME */ /* ============================================ */ /* Force main woocommerce container - EQUAL PADDING */ body.woocommerce-cart .woocommerce, body.woocommerce-cart .woocommerce.row, body.woocommerce-cart .woocommerce > .row, body.woocommerce-cart div.woocommerce, body.theme-flatsome.woocommerce-cart .woocommerce { display: block !important; max-width: 1200px !important; margin: 0 auto !important; padding: 40px 30px !important; width: 100% !important; box-sizing: border-box !important; } /* Force row to stack */ body.woocommerce-cart .woocommerce > .row, body.woocommerce-cart .woocommerce .row.row-large, body.woocommerce-cart .woocommerce .row-divided, body.theme-flatsome.woocommerce-cart .woocommerce .row { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Force cart table column to 100% width */ body.woocommerce-cart .woocommerce .col.large-7, body.woocommerce-cart .woocommerce .large-7.col, body.woocommerce-cart .woocommerce > .row > .col.large-7, body.theme-flatsome.woocommerce-cart .col.large-7 { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 0 40px 0 !important; padding: 0 !important; display: block !important; } /* Force cart totals column to 100% width */ body.woocommerce-cart .cart-collaterals, body.woocommerce-cart .cart-collaterals.large-5, body.woocommerce-cart .woocommerce .large-5.col, body.woocommerce-cart .woocommerce > .row > .cart-collaterals, body.theme-flatsome.woocommerce-cart .cart-collaterals { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; } /* Force cart sidebar to centered 700px */ body.woocommerce-cart .cart-sidebar, body.woocommerce-cart .cart-sidebar.col-inner { width: 100% !important; max-width: 700px !important; margin: 0 auto !important; padding: 0 !important; } /* ============================================ */ /* CART FORM STYLING */ /* ============================================ */ body.woocommerce-cart form.woocommerce-cart-form { background: #ffffff !important; border-radius: var(--cart-border-radius) !important; padding: var(--cart-form-padding) !important; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important; margin: 0 auto !important; } /* Cart wrapper - NO horizontal scroll on desktop/tablet */ body.woocommerce-cart .cart-wrapper { overflow-x: visible !important; overflow-y: visible !important; margin: 0 !important; padding: 0 !important; } /* Only allow horizontal scroll on very small mobile devices if absolutely needed */ @media (max-width: 599px) { body.woocommerce-cart .cart-wrapper { overflow-x: visible !important; overflow-y: visible !important; } } /* ============================================ */ /* CART TABLE */ /* ============================================ */ body.woocommerce-cart table.shop_table { width: 100% !important; border-collapse: collapse !important; border: none !important; margin: 0 auto !important; table-layout: auto !important; } /* Force table display on desktop/tablet (600px and up) */ @media (min-width: 600px) { body.woocommerce-cart table.shop_table { display: table !important; } body.woocommerce-cart table.shop_table thead { display: table-header-group !important; } body.woocommerce-cart table.shop_table tbody { display: table-row-group !important; } body.woocommerce-cart table.shop_table tr { display: table-row !important; } body.woocommerce-cart table.shop_table td, body.woocommerce-cart table.shop_table th { display: table-cell !important; } } /* Table Head */ body.woocommerce-cart table.shop_table thead { background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%) !important; border-radius: 18px 18px 0 0 !important; } body.woocommerce-cart table.shop_table thead th { color: #ffffff !important; font-weight: 700 !important; font-size: clamp(12.0px, calc(9.86px + 0.6696vw), 15.0px) !important; padding: 24px 20px !important; text-align: center !important; border: none !important; text-transform: uppercase !important; letter-spacing: 1px !important; } /* Product header that spans 2 columns - EQUAL PADDING AND CENTERED */ body.woocommerce-cart table.shop_table thead th.product-name[colspan="2"] { text-align: center !important; padding-right: 40px !important; padding-left: 40px !important; } /* First and last header styling */ body.woocommerce-cart table.shop_table thead th:first-child { border-radius: 18px 0 0 0 !important; padding-left: 40px !important; } body.woocommerce-cart table.shop_table thead th:last-child { border-radius: 0 18px 0 0 !important; padding-right: 40px !important; } /* RTL adjustments for headers */ body.rtl.woocommerce-cart table.shop_table thead th:first-child { border-radius: 0 18px 0 0 !important; padding-right: 40px !important; padding-left: 20px !important; } body.rtl.woocommerce-cart table.shop_table thead th:last-child { border-radius: 18px 0 0 0 !important; padding-left: 40px !important; padding-right: 20px !important; } /* Table Body */ body.woocommerce-cart table.shop_table tbody tr { border-bottom: 1px solid #e5e7eb !important; } body.woocommerce-cart table.shop_table tbody tr:last-child { border-bottom: none !important; } body.woocommerce-cart table.shop_table tbody tr:hover { background: #f9fafb !important; } body.woocommerce-cart table.shop_table tbody td { padding: 26px 20px !important; vertical-align: middle !important; border: none !important; text-align: center !important; } /* Ensure first and last cells have equal edge padding */ body.woocommerce-cart table.shop_table tbody td:first-child { padding-left: 40px !important; } /* Override first-child padding for product-remove */ body.woocommerce-cart table.shop_table tbody td.product-remove:first-child { padding-left: 0 !important; } /* RTL adjustments for body cells */ body.rtl.woocommerce-cart table.shop_table tbody td:first-child { padding-right: 40px !important; padding-left: 20px !important; } /* Override first-child padding for product-remove in RTL */ body.rtl.woocommerce-cart table.shop_table tbody td.product-remove:first-child { padding-right: 0 !important; padding-left: 0 !important; } /* ============================================ */ /* PRODUCT CELLS */ /* ============================================ */ /* Product Remove - This is typically the first column */ body.woocommerce-cart table.shop_table td.product-remove { width: 36px !important; max-width: 36px !important; padding: 0 !important; text-align: center !important; vertical-align: middle !important; } /* RTL adjustment for remove column */ body.rtl.woocommerce-cart table.shop_table td.product-remove { text-align: center !important; padding: 0 !important; } body.woocommerce-cart table.shop_table td.product-remove a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; background: rgba(239, 68, 68, 0.1) !important; border-radius: 10px !important; color: #ef4444 !important; text-decoration: none !important; font-size: clamp(16.0px, calc(13.14px + 0.8928vw), 20.0px) !important; font-weight: 700 !important; } body.woocommerce-cart table.shop_table td.product-remove a:hover { background: #ef4444 !important; color: #ffffff !important; transform: scale(1.1) !important; } /* Product Image */ body.woocommerce-cart table.shop_table td.product-thumbnail { width: 120px !important; padding: 20px !important; } body.woocommerce-cart table.shop_table td.product-thumbnail a { display: inline-block !important; width: var(--cart-thumbnail-size) !important; height: var(--cart-thumbnail-size) !important; overflow: hidden !important; border-radius: 16px !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1) !important; } body.woocommerce-cart table.shop_table td.product-thumbnail img { width: var(--cart-thumbnail-size) !important; height: var(--cart-thumbnail-size) !important; object-fit: cover !important; border-radius: 16px !important; display: block !important; } body.woocommerce-cart table.shop_table tr:hover td.product-thumbnail a { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14) !important; } body.woocommerce-cart table.shop_table tr:hover td.product-thumbnail img { transform: scale(1.05) !important; } /* Product Name - Balanced padding for RTL */ body.woocommerce-cart table.shop_table td.product-name { text-align: right !important; padding: 26px 30px !important; padding-right: 35px !important; padding-left: 25px !important; min-width: 200px !important; max-width: 100% !important; }\n\n/* RTL adjustment for product name */ body.rtl.woocommerce-cart table.shop_table td.product-name { text-align: left !important; padding-left: 35px !important; padding-right: 25px !important; } /* Flexible product name for smaller screens but still table layout */ @media (max-width: 1023px) and (min-width: 750px) { /* Hide the price column header */ body.woocommerce-cart table.shop_table thead th.product-price { display: none !important; } /* Hide the price column cells */ body.woocommerce-cart table.shop_table tbody td.product-price { display: none !important; } /* Make product name column wider since price is hidden */ body.woocommerce-cart table.shop_table td.product-name { min-width: 200px !important; max-width: none !important; width: auto !important; padding: 20px 20px !important; } } @media (max-width: 850px) and (min-width: 750px) { body.woocommerce-cart table.shop_table tbody tr { position: relative !important; } /* Hide remove column header */ body.woocommerce-cart table.shop_table thead th.product-remove { display: none !important; } /* Collapse td to zero width */ body.woocommerce-cart table.shop_table td.product-remove { width: 0 !important; max-width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: visible !important; visibility: hidden !important; } /* Show the remove button with absolute positioning */ body.woocommerce-cart table.shop_table td.product-remove a { display: inline-flex !important; visibility: visible !important; position: absolute !important; top: 50% !important; right: 10px !important; transform: translateY(-50%) !important; width: 30px !important; height: 30px !important; font-size: clamp(12.8px, calc(10.51px + 0.7142vw), 16.0px) !important; z-index: 10 !important; } body.woocommerce-cart table.shop_table td.product-name { min-width: 120px !important; padding: 16px 16px !important; font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; } } body.woocommerce-cart table.shop_table td.product-name a { color: #1f2937 !important; font-weight: 600 !important; font-size: clamp(12.8px, calc(10.51px + 0.7142vw), 16.0px) !important; text-decoration: none !important; line-height: 1.6 !important; display: block !important; word-wrap: break-word !important; } body.woocommerce-cart table.shop_table td.product-name a:hover { color: #9d4edd !important; } /* Price */ body.woocommerce-cart table.shop_table td.product-price { font-weight: 700 !important; color: #9d4edd !important; font-size: clamp(13.6px, calc(11.17px + 0.7589vw), 17.0px) !important; padding: 26px 20px !important; min-width: 130px !important; } /* Quantity */ body.woocommerce-cart table.shop_table td.product-quantity { width: 160px !important; padding: 26px 20px !important; } /* Responsive quantity width at medium sizes */ @media (max-width: 1023px) and (min-width: 750px) { body.woocommerce-cart table.shop_table td.product-quantity { width: 140px !important; padding: 20px 12px !important; } } @media (max-width: 850px) and (min-width: 750px) { body.woocommerce-cart table.shop_table td.product-quantity { width: 120px !important; padding: 18px 10px !important; } body.woocommerce-cart table.shop_table td.product-quantity input.qty { width: 45px !important; font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; } body.woocommerce-cart table.shop_table td.product-quantity .quantity button, body.woocommerce-cart table.shop_table td.product-quantity input[type="button"] { width: 28px !important; height: 28px !important; font-size: 12px !important;; } } body.woocommerce-cart table.shop_table td.product-quantity .quantity { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #f3f4f6 !important; border-radius: 12px !important; padding: 6px !important; border: 2px solid #e5e7eb !important; } body.woocommerce-cart table.shop_table td.product-quantity .quantity:focus-within { border-color: #9d4edd !important; box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.1) !important; } body.woocommerce-cart table.shop_table td.product-quantity input.qty { width: 55px !important; text-align: center !important; border: none !important; background: transparent !important; font-weight: 600 !important; font-size: clamp(12.0px, calc(9.86px + 0.6696vw), 15.0px) !important; color: #1f2937 !important; padding: 8px 4px !important; } body.woocommerce-cart table.shop_table td.product-quantity input.qty:focus { outline: none !important; } body.woocommerce-cart table.shop_table td.product-quantity .quantity button, body.woocommerce-cart table.shop_table td.product-quantity input[type="button"] { width: 32px !important; height: 32px !important; background: #e5e7eb !important; border: none !important; border-radius: 8px !important; color: #374151 !important; font-weight: 700 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.woocommerce-cart table.shop_table td.product-quantity .quantity button:hover, body.woocommerce-cart table.shop_table td.product-quantity input[type="button"]:hover { background: #9d4edd !important; color: #ffffff !important; } /* Subtotal - Last column, needs extra right padding */ body.woocommerce-cart table.shop_table td.product-subtotal { font-weight: 700 !important; color: #9d4edd !important; font-size: clamp(14.4px, calc(11.83px + 0.8035vw), 18.0px) !important; padding: 26px 20px !important; padding-right: 40px !important; min-width: 140px !important; } /* Responsive subtotal width to prevent overlap */ @media (max-width: 1023px) and (min-width: 750px) { body.woocommerce-cart table.shop_table td.product-subtotal { min-width: 110px !important; font-size: clamp(12.0px, calc(9.86px + 0.6696vw), 15.0px) !important; padding: 20px 15px !important; padding-right: 32px !important; } body.rtl.woocommerce-cart table.shop_table td.product-subtotal { padding-left: 32px !important; padding-right: 15px !important; } } /* ============================================ */ /* CART ACTIONS ROW - FIX BUTTONS */ /* ============================================ */ body.woocommerce-cart table.shop_table td.actions { padding: 32px 40px !important; background: linear-gradient(135deg, #f9fafb 0%, #f5f6f7 100%) !important; border-radius: 0 0 18px 18px !important; } /* Continue Shopping Container */ body.woocommerce-cart .continue-shopping { display: inline-block !important; float: right !important; margin-left: 12px !important; } body.rtl.woocommerce-cart .continue-shopping { float: left !important; margin-left: 0 !important; margin-right: 12px !important; } /* Continue Shopping Button - FILL CONTAINER */ /* RZK 2026-08-27: `.button-continue-shopping` measured 12.47px inside a `.continue-shopping` wrapper and a flat 15px outside one, because every selector in this list except the second required that ancestor. The bare class and the wc-backward button are now matched wherever they appear, so the same control cannot render at two different sizes on one page. */ body.woocommerce-cart .continue-shopping a, body.woocommerce-cart .button-continue-shopping, body.woocommerce-cart a.button-continue-shopping, body.woocommerce-cart .cart-actions-wrapper .button-continue-shopping, body.woocommerce-cart .cart-actions-wrapper a.button.wc-backward, body.woocommerce-cart a.button.wc-backward, body.woocommerce-cart .continue-shopping .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 32px !important; min-height: 54px !important; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important; color: #374151 !important; border-radius: 12px !important; font-weight: 700 !important; font-size: clamp(12.0px, calc(9.86px + 0.6696vw), 15.0px) !important; text-decoration: none !important; border: 2px solid #e5e7eb !important; cursor: pointer !important; white-space: nowrap !important; } body.woocommerce-cart .continue-shopping a:hover, body.woocommerce-cart .button-continue-shopping:hover { background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important; color: #1f2937 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; border-color: #d1d5db !important; } /* Update Cart Button - MATCH HEIGHT */ body.woocommerce-cart button[name="update_cart"], body.woocommerce-cart input[name="update_cart"], body.woocommerce-cart .button.primary[name="update_cart"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 36px !important; min-height: 54px !important; background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%) !important; color: #ffffff !important; border-radius: 12px !important; font-weight: 700 !important; font-size: clamp(12.0px, calc(9.86px + 0.6696vw), 15.0px) !important; border: none !important; cursor: pointer !important; box-shadow: 0 4px 16px rgba(157, 78, 221, 0.35) !important; float: left !important; margin: 0 !important; white-space: nowrap !important; } body.rtl.woocommerce-cart button[name="update_cart"], body.rtl.woocommerce-cart input[name="update_cart"] { float: right !important; } body.woocommerce-cart button[name="update_cart"]:hover, body.woocommerce-cart input[name="update_cart"]:hover { background: linear-gradient(135deg, #b298dc 0%, #9d4edd 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(157, 78, 221, 0.45) !important; } body.woocommerce-cart button[name="update_cart"]:disabled, body.woocommerce-cart input[name="update_cart"]:disabled { opacity: 0.6 !important; cursor: not-allowed !important; transform: none !important; } /* Coupon Section */ body.woocommerce-cart .coupon { display: none !important; } /* ============================================ */ /* CART TOTALS (CENTERED BELOW) */ /* ============================================ */ body.woocommerce-cart .cart_totals { background: #ffffff !important; border-radius: var(--cart-border-radius) !important; padding: var(--cart-base-padding) !important; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* Hide duplicate header */ body.woocommerce-cart .cart_totals > table:first-of-type { display: none !important; } body.woocommerce-cart .cart_totals h2 { color: #1f2937 !important; font-size: var(--cart-heading-size) !important; font-weight: 800 !important; margin: 0 0 30px 0 !important; padding-bottom: 20px !important; border-bottom: 3px solid #9d4edd !important; text-align: center !important; } /* Cart totals table */ body.woocommerce-cart .cart_totals table.shop_table { width: 100% !important; margin-bottom: 25px !important; border-collapse: collapse !important; } body.woocommerce-cart .cart_totals table tr { border-bottom: 1px solid #f3f4f6 !important; } body.woocommerce-cart .cart_totals table tr:last-child { border-bottom: none !important; } body.woocommerce-cart .cart_totals table th, body.woocommerce-cart .cart_totals table td { padding: 16px 0 !important; border: none !important; } body.woocommerce-cart .cart_totals table th { text-align: right !important; color: #6b7280 !important; font-weight: 600 !important; font-size: clamp(12.8px, calc(10.51px + 0.7142vw), 16.0px) !important; } body.woocommerce-cart .cart_totals table td { text-align: left !important; color: #1f2937 !important; font-weight: 700 !important; font-size: clamp(13.6px, calc(11.17px + 0.7589vw), 17.0px) !important; } /* Order Total */ body.woocommerce-cart .cart_totals .order-total th, body.woocommerce-cart .cart_totals .order-total td { color: #9d4edd !important; font-size: clamp(19.2px, calc(15.77px + 1.0714vw), 24.0px) !important; font-weight: 800 !important; padding-top: 22px !important; padding-bottom: 22px !important; border-top: 3px solid #9d4edd !important; border-bottom: none !important; } /* ============================================ */ /* SHIPPING SECTION */ /* ============================================ */ body.woocommerce-cart .cart_totals .shipping__inner { padding: 0 !important; } body.woocommerce-cart .cart_totals .shipping__table { width: 100% !important; } /* Free shipping badge */ body.woocommerce-cart .cart_totals .shipping__list { list-style: none !important; padding: 0 !important; margin: 0 0 12px 0 !important; } body.woocommerce-cart .cart_totals .shipping__list_label { color: #10b981 !important; font-weight: 700 !important; font-size: clamp(12.8px, calc(10.51px + 0.7142vw), 16.0px) !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; } body.woocommerce-cart .cart_totals .shipping__list_label::before { content: '✓' !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; background: #10b981 !important; color: #ffffff !important; border-radius: 50% !important; font-weight: 700 !important; font-size: clamp(12px, calc(8.54px + 0.5803vw), 13px) !important;; } /* Shipping destination */ body.woocommerce-cart .cart_totals .woocommerce-shipping-destination { font-size: clamp(12px, calc(8.54px + 0.5803vw), 13px) !important;; color: #6b7280 !important; margin-top: 12px !important; line-height: 1.7 !important; word-wrap: break-word !important; } /* Change address button */ body.woocommerce-cart .cart_totals .shipping-calculator-button { color: #ffffff !important; background: #9d4edd !important; text-decoration: none !important; font-weight: 600 !important; font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; margin-top: 12px !important; display: inline-block !important; padding: 10px 20px !important; border-radius: 10px !important; } body.woocommerce-cart .cart_totals .shipping-calculator-button:hover { background: #7b2cbf !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(157, 78, 221, 0.3) !important; } /* Shipping calculator form */ body.woocommerce-cart .cart_totals .shipping-calculator-form { margin-top: 18px !important; padding: 24px !important; background: #f9fafb !important; border-radius: 14px !important; } body.woocommerce-cart .cart_totals .shipping-calculator-form .form-row { margin-bottom: 16px !important; } body.woocommerce-cart .cart_totals .shipping-calculator-form label { font-weight: 600 !important; color: #374151 !important; font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; display: block !important; margin-bottom: 8px !important; } body.woocommerce-cart .cart_totals .shipping-calculator-form input[type="text"], body.woocommerce-cart .cart_totals .shipping-calculator-form select { width: 100% !important; padding: 12px 16px !important; border: 2px solid #e5e7eb !important; border-radius: 10px !important; font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; background: #ffffff !important; } body.woocommerce-cart .cart_totals .shipping-calculator-form input[type="text"]:focus, body.woocommerce-cart .cart_totals .shipping-calculator-form select:focus { border-color: #9d4edd !important; outline: none !important; box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.1) !important; } body.woocommerce-cart .cart_totals .shipping-calculator-form button { width: 100% !important; padding: 14px 24px !important; min-height: 50px !important; background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%) !important; color: #ffffff !important; border-radius: 12px !important; font-weight: 700 !important; font-size: clamp(12.0px, calc(9.86px + 0.6696vw), 15.0px) !important; border: none !important; cursor: pointer !important; box-shadow: 0 4px 16px rgba(157, 78, 221, 0.35) !important; } body.woocommerce-cart .cart_totals .shipping-calculator-form button:hover { background: linear-gradient(135deg, #b298dc 0%, #9d4edd 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(157, 78, 221, 0.45) !important; } /* ============================================ */ /* CHECKOUT BUTTON */ /* ============================================ */ body.woocommerce-cart .wc-proceed-to-checkout { margin-top: 10px !important; } body.woocommerce-cart .wc-proceed-to-checkout a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 20px 40px !important; min-height: 65px !important; background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%) !important; color: #ffffff !important; border-radius: 16px !important; font-weight: 800 !important; font-size: clamp(15.2px, calc(12.49px + 0.8482vw), 19.0px) !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 8px 28px rgba(157, 78, 221, 0.45), 0 3px 10px rgba(157, 78, 221, 0.25) !important; border: none !important; } body.woocommerce-cart .wc-proceed-to-checkout a:hover { background: linear-gradient(135deg, #b298dc 0%, #9d4edd 100%) !important; transform: translateY(-3px) scale(1.01) !important; box-shadow: 0 12px 36px rgba(157, 78, 221, 0.55), 0 5px 14px rgba(157, 78, 221, 0.35) !important; } /* ============================================ */ /* MESSAGES */ /* ============================================ */ body.woocommerce-cart .woocommerce-message, body.woocommerce-cart .woocommerce-info, body.woocommerce-cart .woocommerce-error { background: linear-gradient(135deg, rgba(157, 78, 221, 0.1) 0%, rgba(123, 44, 191, 0.05) 100%) !important; border-left: 4px solid #9d4edd !important; border-radius: 12px !important; padding: 16px 20px !important; margin-bottom: 24px !important; color: #1f2937 !important; } body.woocommerce-cart .woocommerce-error { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%) !important; border-left-color: #ef4444 !important; } /* ============================================ */ /* ============================================ */ /* RESPONSIVE DESIGN - COMPLETELY REWRITTEN */ /* ============================================ */ /* ============================================ */ /* DESKTOP & TABLET: TABLE LAYOUT (600px+) */ /* ============================================ */ /* FORCE TABLE DISPLAY ABOVE 600PX - VERY AGGRESSIVE */ @media (min-width: 600px) { /* Force table and all related elements to display as table */ body.woocommerce-cart table.shop_table { display: table !important; width: 100% !important; } body.woocommerce-cart table.shop_table thead { display: table-header-group !important; } body.woocommerce-cart table.shop_table tbody { display: table-row-group !important; } body.woocommerce-cart table.shop_table tr { display: table-row !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; position: static !important; } body.woocommerce-cart table.shop_table td, body.woocommerce-cart table.shop_table th { display: table-cell !important; } /* NO card styling above 600px */ body.woocommerce-cart table.shop_table td::before { content: none !important; display: none !important; } } /* Large Desktop - 1920px+ */ @media (min-width: 1920px) { body.woocommerce-cart .woocommerce { max-width: 1400px !important; padding: 50px 40px !important; } body.woocommerce-cart .cart_totals { max-width: 800px !important; padding: 50px !important; } } /* Desktop - 1440px to 1919px */ @media (min-width: 1440px) and (max-width: 1919px) { body.woocommerce-cart .woocommerce { max-width: 1300px !important; } } /* Laptop - 1366px to 1439px */ @media (min-width: 1366px) and (max-width: 1439px) { body.woocommerce-cart .woocommerce { max-width: 1200px !important; padding: 35px 25px !important; } } /* Small Laptop - 1024px to 1365px */ @media (min-width: 1024px) and (max-width: 1365px) { body.woocommerce-cart .woocommerce { padding: 30px 20px !important; } body.woocommerce-cart form.woocommerce-cart-form { padding: 30px !important; } body.woocommerce-cart table.shop_table thead th { font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; padding: 20px 16px !important; } body.woocommerce-cart table.shop_table thead th:first-child { padding-left: 32px !important; } body.woocommerce-cart table.shop_table thead th:last-child { padding-right: 32px !important; } body.woocommerce-cart table.shop_table tbody td { padding: 22px 14px !important; } body.woocommerce-cart table.shop_table tbody td:first-child { padding-left: 32px !important; } body.woocommerce-cart table.shop_table td.product-thumbnail a, body.woocommerce-cart table.shop_table td.product-thumbnail img { width: 85px !important; height: 85px !important; } body.woocommerce-cart .cart_totals { max-width: 650px !important; padding: 40px !important; } } /* Tablet - 850px to 1023px */ @media (min-width: 850px) and (max-width: 1023px) { body.woocommerce-cart .woocommerce { padding: 25px 15px !important; } body.woocommerce-cart form.woocommerce-cart-form { padding: 28px !important; } body.woocommerce-cart table.shop_table thead th { font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; padding: 18px 12px !important; } /* Balanced edge padding for headers at 850px */ body.woocommerce-cart table.shop_table thead th:first-child { padding-left: 32px !important; } body.woocommerce-cart table.shop_table thead th:last-child { padding-right: 32px !important; } /* RTL adjustments for 850px */ body.rtl.woocommerce-cart table.shop_table thead th:first-child { padding-right: 32px !important; padding-left: 12px !important; } body.rtl.woocommerce-cart table.shop_table thead th:last-child { padding-left: 32px !important; padding-right: 12px !important; } body.woocommerce-cart table.shop_table tbody td { padding: 20px 12px !important; font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; } /* Balanced edge padding for body cells at 850px */ body.woocommerce-cart table.shop_table tbody td:first-child { padding-left: 32px !important; } /* RTL adjustments for body cells */ body.rtl.woocommerce-cart table.shop_table tbody td:first-child { padding-right: 32px !important; padding-left: 12px !important; } body.woocommerce-cart table.shop_table td.product-thumbnail { width: 100px !important; } body.woocommerce-cart table.shop_table td.product-thumbnail a, body.woocommerce-cart table.shop_table td.product-thumbnail img { width: 80px !important; height: 80px !important; } body.woocommerce-cart table.shop_table td.product-name { padding: 20px 16px !important; min-width: 140px !important; } /* Actions row balanced padding at 850px */ body.woocommerce-cart table.shop_table td.actions { padding: 28px 32px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: stretch !important; } /* Fix buttons at 850px breakpoint */ body.woocommerce-cart button[name="update_cart"], body.woocommerce-cart input[name="update_cart"], body.woocommerce-cart .button.primary[name="update_cart"] { float: none !important; width: 100% !important; margin: 0 !important; } body.rtl.woocommerce-cart button[name="update_cart"], body.rtl.woocommerce-cart input[name="update_cart"] { float: none !important; width: 100% !important; } body.woocommerce-cart .continue-shopping { float: none !important; width: 100% !important; margin: 0 !important; } body.rtl.woocommerce-cart .continue-shopping { float: none !important; margin: 0 !important; } body.woocommerce-cart .continue-shopping a, body.woocommerce-cart .button-continue-shopping, body.woocommerce-cart a.button.wc-backward, body.woocommerce-cart .continue-shopping .button { width: 100% !important; display: flex !important; } /* Fix product-remove positioning at 849px and below */ body.woocommerce-cart table.shop_table tbody tr { position: relative !important; } /* Hide remove column header */ body.woocommerce-cart table.shop_table thead th.product-remove { display: none !important; } /* Collapse td to zero width */ body.woocommerce-cart table.shop_table td.product-remove { width: 0 !important; max-width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: visible !important; visibility: hidden !important; } /* Show the remove button with absolute positioning */ body.woocommerce-cart table.shop_table td.product-remove a { display: inline-flex !important; visibility: visible !important; position: absolute !important; top: 50% !important; right: 10px !important; transform: translateY(-50%) !important; width: 32px !important; height: 32px !important; font-size: clamp(14.4px, calc(11.83px + 0.8035vw), 18.0px) !important; z-index: 10 !important; } /* RTL - position button on left side */ body.rtl.woocommerce-cart table.shop_table td.product-remove a { right: auto !important; } body.woocommerce-cart table.shop_table td.product-remove a { width: 32px !important; height: 32px !important; font-size: clamp(14.4px, calc(11.83px + 0.8035vw), 18.0px) !important; } body.woocommerce-cart .cart_totals { max-width: 600px !important; padding: 35px !important; } } /* Small Tablet - 750px to 849px */ @media (min-width: 750px) and (max-width: 849px) { body.woocommerce-cart .woocommerce { padding: 20px 12px !important; } body.woocommerce-cart form.woocommerce-cart-form { padding: 24px !important; } body.woocommerce-cart table.shop_table thead th { font-size: clamp(12px, calc(8.54px + 0.5803vw), 13px) !important;; padding: 16px 10px !important; } /* Balanced edge padding for headers at 600-849px */ body.woocommerce-cart table.shop_table thead th:first-child { padding-left: 24px !important; } body.woocommerce-cart table.shop_table thead th:last-child { padding-right: 24px !important; } /* RTL adjustments for headers at 600-849px */ body.rtl.woocommerce-cart table.shop_table thead th:first-child { padding-right: 24px !important; padding-left: 10px !important; } body.rtl.woocommerce-cart table.shop_table thead th:last-child { padding-left: 24px !important; padding-right: 10px !important; } body.woocommerce-cart table.shop_table tbody td { padding: 18px 10px !important; font-size: clamp(12px, calc(8.54px + 0.5803vw), 13px) !important;; } /* Balanced edge padding for body cells at 600-849px */ body.woocommerce-cart table.shop_table tbody td:first-child { padding-left: 24px !important; } /* RTL adjustments for body cells at 600-849px */ body.rtl.woocommerce-cart table.shop_table tbody td:first-child { padding-right: 24px !important; padding-left: 10px !important; } body.woocommerce-cart table.shop_table td.product-thumbnail { width: 90px !important; padding: 12px 8px !important; } body.woocommerce-cart table.shop_table td.product-thumbnail a, body.woocommerce-cart table.shop_table td.product-thumbnail img { width: 70px !important; height: 70px !important; } body.woocommerce-cart table.shop_table td.product-name { padding: 18px 12px !important; min-width: 100px !important; font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; } body.woocommerce-cart table.shop_table td.product-price, body.woocommerce-cart table.shop_table td.product-subtotal { font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; padding: 18px 8px !important; } body.woocommerce-cart table.shop_table td.product-quantity { width: 120px !important; padding: 18px 8px !important; } body.woocommerce-cart table.shop_table td.product-quantity input.qty { width: 45px !important; font-size: clamp(12px, calc(8.54px + 0.5803vw), 13px) !important;; } body.woocommerce-cart table.shop_table td.product-quantity .quantity button, body.woocommerce-cart table.shop_table td.product-quantity input[type="button"] { width: 28px !important; height: 28px !important; font-size: 12px !important;; } /* Actions row balanced padding */ body.woocommerce-cart table.shop_table td.actions { padding: 24px 24px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: stretch !important; } /* Fix buttons at 600-849px breakpoint */ body.woocommerce-cart button[name="update_cart"], body.woocommerce-cart input[name="update_cart"], body.woocommerce-cart .button.primary[name="update_cart"] { float: none !important; width: 100% !important; margin: 0 !important; } body.rtl.woocommerce-cart button[name="update_cart"], body.rtl.woocommerce-cart input[name="update_cart"] { float: none !important; width: 100% !important; } body.woocommerce-cart .continue-shopping { float: none !important; width: 100% !important; margin: 0 !important; } body.rtl.woocommerce-cart .continue-shopping { float: none !important; margin: 0 !important; } body.woocommerce-cart .continue-shopping a, body.woocommerce-cart .button-continue-shopping, body.woocommerce-cart a.button.wc-backward, body.woocommerce-cart .continue-shopping .button { width: 100% !important; display: flex !important; } /* Fix product-remove positioning at 600-849px */ body.woocommerce-cart table.shop_table tbody tr { position: relative !important; } /* Hide remove column header */ body.woocommerce-cart table.shop_table thead th.product-remove { display: none !important; } /* Collapse td to zero width */ body.woocommerce-cart table.shop_table td.product-remove { width: 0 !important; max-width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: visible !important; visibility: hidden !important; } /* Show the remove button with absolute positioning */ body.woocommerce-cart table.shop_table td.product-remove a { display: inline-flex !important; visibility: visible !important; position: absolute !important; top: 50% !important; right: 10px !important; transform: translateY(-50%) !important; width: 30px !important; height: 30px !important; font-size: clamp(12.8px, calc(10.51px + 0.7142vw), 16.0px) !important; z-index: 10 !important; } /* RTL - position button on left side */ body.rtl.woocommerce-cart table.shop_table td.product-remove a { left: 10px !important; right: auto !important; } body.woocommerce-cart table.shop_table td.product-remove a { width: 30px !important; height: 30px !important; font-size: clamp(12.8px, calc(10.51px + 0.7142vw), 16.0px) !important; } body.woocommerce-cart .cart_totals { max-width: 100% !important; padding: 30px !important; } body.woocommerce-cart .continue-shopping a, body.woocommerce-cart button[name="update_cart"] { padding: 12px 20px !important; min-height: 48px !important; font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; } } /* ============================================ */ /* FIXES FOR SPECIFIC BREAKPOINTS */ /* ============================================ */ /* Fix buttons and layout for 750px to 1023px */ @media (max-width: 1023px) and (min-width: 750px) { /* Make table row relative for absolute positioning */ body.woocommerce-cart table.shop_table tbody tr { position: relative !important; } /* Hide remove column header */ body.woocommerce-cart table.shop_table thead th.product-remove { display: none !important; } /* Collapse td to zero width but keep it in DOM */ body.woocommerce-cart table.shop_table td.product-remove { width: 0 !important; max-width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: visible !important; visibility: hidden !important; } /* Show only the remove button with absolute positioning */ body.woocommerce-cart table.shop_table td.product-remove a { display: inline-flex !important; visibility: visible !important; position: absolute !important; top: 50% !important; right: 10px !important; transform: translateY(-50%) !important; width: 30px !important; height: 30px !important; font-size: clamp(12.8px, calc(10.51px + 0.7142vw), 16.0px) !important; z-index: 10 !important; } /* Fix actions row to prevent button breaking */ body.woocommerce-cart table.shop_table td.actions { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: stretch !important; padding: 24px 32px !important; } /* Update cart button - full width */ body.woocommerce-cart button[name="update_cart"], body.woocommerce-cart input[name="update_cart"], body.woocommerce-cart .button.primary[name="update_cart"] { float: none !important; width: 100% !important; margin: 0 !important; order: 1 !important; } body.rtl.woocommerce-cart button[name="update_cart"], body.rtl.woocommerce-cart input[name="update_cart"] { float: none !important; width: 100% !important; } /* Continue shopping container - full width */ body.woocommerce-cart .continue-shopping { float: none !important; width: 100% !important; margin: 0 !important; order: 2 !important; } body.rtl.woocommerce-cart .continue-shopping { float: none !important; margin: 0 !important; } /* Continue shopping button - full width */ body.woocommerce-cart .continue-shopping a, body.woocommerce-cart .button-continue-shopping, body.woocommerce-cart a.button.wc-backward, body.woocommerce-cart .continue-shopping .button { width: 100% !important; display: flex !important; } } /* ============================================ */ /* MOBILE: CARD LAYOUT (BELOW 600px ONLY!) */ /* ============================================ */ @media (max-width: 599px) { /* Hide table header */ body.woocommerce-cart table.shop_table thead { display: none !important; } /* Force block display for cards */ body.woocommerce-cart table.shop_table { display: block !important; } body.woocommerce-cart table.shop_table tbody { display: block !important; } body.woocommerce-cart table.shop_table tr.cart_item { display: block !important; background: #ffffff !important; border-radius: 20px !important; padding: 24px !important; margin-bottom: 20px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; border: 2px solid #f3f4f6 !important; position: relative !important; } body.woocommerce-cart table.shop_table td { display: block !important; width: 100% !important; padding: 8px 0 !important; text-align: center !important; border: none !important; } /* Product remove button - top right corner for RTL */ body.woocommerce-cart table.shop_table td.product-remove { position: absolute !important; top: 12px !important; right: 12px !important; width: auto !important; padding: 0 !important; z-index: 5 !important; } /* RTL: Move to top left */ body.rtl.woocommerce-cart table.shop_table td.product-remove { left: 12px !important; right: auto !important; } body.woocommerce-cart table.shop_table td.product-remove a { width: 32px !important; height: 32px !important; font-size: clamp(14.4px, calc(11.83px + 0.8035vw), 18.0px) !important; } /* Product image - centered and large */ body.woocommerce-cart table.shop_table td.product-thumbnail { text-align: center !important; padding: 0 0 16px 0 !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; } body.woocommerce-cart table.shop_table td.product-thumbnail a, body.woocommerce-cart table.shop_table td.product-thumbnail img { width: 120px !important; height: 120px !important; margin: 0 auto !important; display: block !important; } /* Product name - centered */ body.woocommerce-cart table.shop_table td.product-name { text-align: center !important; font-size: clamp(13.6px, calc(11.17px + 0.7589vw), 17.0px) !important; font-weight: 600 !important; padding: 0 20px 14px 20px !important; min-width: 0 !important; line-height: 1.5 !important; } /* Price and Subtotal with labels - centered */ body.woocommerce-cart table.shop_table td.product-price, body.woocommerce-cart table.shop_table td.product-subtotal { display: block !important; width: 100% !important; padding: 10px 16px !important; font-size: clamp(12.0px, calc(9.86px + 0.6696vw), 15.0px) !important; text-align: center !important; } /* Add labels before price/subtotal */ body.woocommerce-cart table.shop_table td.product-price::before { content: "قیمت: " !important; font-weight: 600 !important; color: #6b7280 !important; margin-left: 6px !important; } body.woocommerce-cart table.shop_table td.product-subtotal::before { content: "جمع: " !important; font-weight: 600 !important; color: #6b7280 !important; margin-left: 6px !important; } /* Quantity - centered */ body.woocommerce-cart table.shop_table td.product-quantity { width: 100% !important; padding: 14px 0 !important; display: flex !important; justify-content: center !important; } body.woocommerce-cart table.shop_table td.product-quantity .quantity { margin: 0 auto !important; } /* Actions row */ body.woocommerce-cart table.shop_table td.actions { padding: 20px !important; } /* Stack buttons in actions row */ body.woocommerce-cart table.shop_table td.actions { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: stretch !important; } body.woocommerce-cart .continue-shopping { float: none !important; width: 100% !important; display: block !important; margin: 0 !important; } body.woocommerce-cart button[name="update_cart"], body.woocommerce-cart input[name="update_cart"] { float: none !important; width: 100% !important; display: flex !important; margin: 0 !important; } body.rtl.woocommerce-cart button[name="update_cart"], body.rtl.woocommerce-cart input[name="update_cart"] { float: none !important; } body.rtl.woocommerce-cart .continue-shopping { float: none !important; margin: 0 !important; } body.woocommerce-cart .continue-shopping a, body.woocommerce-cart button[name="update_cart"] { width: 100% !important; } /* Cart totals */ body.woocommerce-cart .cart_totals { max-width: 100% !important; padding: 28px !important; } } /* Mobile - 480px to 599px */ @media (min-width: 480px) and (max-width: 599px) { body.woocommerce-cart .woocommerce { padding: 20px 12px !important; } body.woocommerce-cart form.woocommerce-cart-form { padding: 20px !important; } } /* Small Mobile - 400px to 479px */ @media (min-width: 400px) and (max-width: 479px) { body.woocommerce-cart .woocommerce { padding: 16px 10px !important; } body.woocommerce-cart form.woocommerce-cart-form { padding: 18px !important; } body.woocommerce-cart table.shop_table tr.cart_item { padding: 20px !important; } body.woocommerce-cart table.shop_table td.product-thumbnail a, body.woocommerce-cart table.shop_table td.product-thumbnail img { width: 110px !important; height: 110px !important; } body.woocommerce-cart .cart_totals { padding: 24px !important; } } /* Extra Small Mobile - 328px to 399px */ @media (min-width: 328px) and (max-width: 399px) { body.woocommerce-cart .woocommerce { padding: 14px 8px !important; } body.woocommerce-cart form.woocommerce-cart-form { padding: 16px !important; } body.woocommerce-cart table.shop_table tr.cart_item { padding: 18px !important; border-radius: 16px !important; } body.woocommerce-cart table.shop_table td.product-thumbnail a, body.woocommerce-cart table.shop_table td.product-thumbnail img { width: 100px !important; height: 100px !important; } body.woocommerce-cart table.shop_table td.product-name { padding: 0 16px 12px 16px !important; } body.woocommerce-cart .cart_totals { padding: 20px !important; } body.woocommerce-cart .cart_totals h2 { } } /* Ultra Small - 320px to 327px */ @media (max-width: 327px) { body.woocommerce-cart .woocommerce { padding: 12px 6px !important; } body.woocommerce-cart form.woocommerce-cart-form { padding: 14px !important; border-radius: 14px !important; } body.woocommerce-cart table.shop_table tr.cart_item { padding: 16px !important; border-radius: 14px !important; } body.woocommerce-cart table.shop_table td.product-thumbnail a, body.woocommerce-cart table.shop_table td.product-thumbnail img { width: 90px !important; height: 90px !important; } body.woocommerce-cart table.shop_table td.product-name { padding: 0 12px 10px 12px !important; } body.woocommerce-cart table.shop_table td.product-price, body.woocommerce-cart table.shop_table td.product-subtotal { padding: 8px 12px !important; } body.woocommerce-cart .cart_totals { padding: 18px !important; } body.woocommerce-cart .cart_totals h2 { } body.woocommerce-cart .wc-proceed-to-checkout a { padding: 16px 24px !important; min-height: 56px !important; } } /* ============================================ */ /* HIDE MOBILE PRICE ELEMENT BELOW 549px */ /* ============================================ */ @media (max-width: 549px) { /* Hide show-for-small mobile-product-price element */ body.woocommerce-cart .show-for-small.mobile-product-price, body.woocommerce-cart .mobile-product-price.show-for-small, .woocommerce-cart .show-for-small.mobile-product-price, .show-for-small.mobile-product-price { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } } /* ============================================ */ /* PRINT STYLES */ /* ============================================ */ @media print { .cart-item .header-button, .cart-item .nav-dropdown { display: none !important; } } /* ============================================ */ /* HIGH DPI / RETINA */ /* ============================================ */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .cart-item .header-button .bfc-header-icon { shape-rendering: geometricPrecision; } } /* ============================================ */ /* RESPONSIVE FIXES */ body.woocommerce-cart{overflow-x:hidden!important} @media (min-width:750px) and (max-width:1023px){ body.woocommerce-cart table.shop_table{table-layout:fixed!important} body.woocommerce-cart table.shop_table td,body.woocommerce-cart table.shop_table th{min-width:0!important;white-space:normal!important;word-break:break-word!important;overflow-wrap:anywhere!important} body.woocommerce-cart table.shop_table tbody td:first-child{padding-left:16px!important} body.rtl.woocommerce-cart table.shop_table tbody td:first-child{padding-right:16px!important;padding-left:8px!important} body.woocommerce-cart table.shop_table td.product-remove{width:30px!important;max-width:30px!important;min-width:30px!important;padding:0!important;text-align:center!important} body.woocommerce-cart table.shop_table td.product-thumbnail{width:140px!important;min-width:140px!important;padding:12px 8px!important} body.woocommerce-cart table.shop_table td.product-thumbnail a,body.woocommerce-cart table.shop_table td.product-thumbnail img{width:74px!important;height:74px!important} body.woocommerce-cart table.shop_table td.product-quantity{width:120px!important} body.woocommerce-cart table.shop_table td.product-price,body.woocommerce-cart table.shop_table td.product-subtotal{width:96px!important} body.woocommerce-cart table.shop_table td.product-name{min-width:0!important} body.woocommerce-cart table.shop_table td.actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important;align-items:center!important;justify-content:space-between!important} body.woocommerce-cart .continue-shopping,body.woocommerce-cart button[name="update_cart"]{float:none!important;width:auto!important} } @media (min-width:750px) and (max-width:849px){ body.woocommerce-cart table.shop_table td.product-thumbnail a,body.woocommerce-cart table.shop_table td.product-thumbnail img{width:70px!important;height:70px!important} body.woocommerce-cart table.shop_table td.product-quantity input.qty{width:44px!important} } @media (max-width:599px){ body.woocommerce-cart table.shop_table td.actions{display:block!important} } /* ============================================ */ /* $100,000 LEGENDARY EMPTY CART PAGE DESIGN */ /* ============================================ */ /* Main empty cart container - Premium spacing and centering */ body.woocommerce-cart .woocommerce-notices-wrapper + .wc-empty-cart-message { position: relative !important; min-height: 520px !important; padding: 80px 40px 60px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; background: linear-gradient(135deg, rgba(139, 92, 246, 0.03) 0%, rgba(157, 78, 221, 0.05) 50%, rgba(109, 40, 217, 0.03) 100%) !important; border-radius: 24px !important; margin: 40px auto !important; max-width: 800px !important; overflow: visible !important; } /* The Sad Bag SVG - LEGENDARY $100K DESIGN - Using inline SVG with pattern */ body.woocommerce-cart .wc-empty-cart-message .sad-bag-icon { display: block !important; width: 200px !important; height: 200px !important; margin: 0 auto 32px auto !important; /* transform-only float kept (and it is on the INP optimizer's AMBIENT list, so the animation governor retires it after 20s); the `filter`-animating `legendaryCartPulse` is dropped. The resting drop-shadow below is that animation's 0%/100% keyframe, so the icon looks unchanged. RZK 2026-10-20 (INP): the float itself now runs only on mouse/trackpad devices (rule below). The bag carries two drop-shadow filters; moving it kept the compositor at 60 frames/s on the empty cart / checkout page on phones. On touch screens it rests at the keyframes' 0% position. */ filter: drop-shadow(0 16px 32px rgba(139, 92, 246, 0.35)) drop-shadow(0 8px 16px rgba(109, 40, 217, 0.25)) !important; position: relative !important; z-index: 1 !important; } body.woocommerce-cart .wc-empty-cart-message .sad-bag-icon svg { width: 100% !important; height: 100% !important; display: block !important; } /* Floating animation for the bag */ @keyframes legendaryCartFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.02); } } /* Add beautiful message after the SVG */ body.woocommerce-cart .wc-empty-cart-message::after { content: 'هیچ محصولی در سبد خرید نیست.' !important; display: block !important; font-size: clamp(22.4px, calc(18.4px + 1.2499vw), 28.0px) !important; font-weight: 600 !important; color: #4c1d95 !important; margin: 0 0 24px 0 !important; text-align: center !important; line-height: 1.6 !important; letter-spacing: -0.02em !important; background: linear-gradient(135deg, #8b5cf6 0%, #9d4edd 50%, #6d28d9 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; /* `textShimmer` animated filter: brightness() on background-clip:text - non-composited, repainting the headline every frame. Removed. */ position: relative !important; z-index: 1 !important; } /* Hide the return button wrapper default styling */ body.woocommerce-cart .wc-empty-cart-message + .return-to-shop { position: relative !important; margin: 0 auto !important; padding-top: 20px; text-align: center !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-top: -40px !important; z-index: 2 !important; } /* LEGENDARY PREMIUM BUTTON DESIGN - $100K WORTHY */ body.woocommerce-cart .wc-empty-cart-message + .return-to-shop .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 18px 48px !important; font-size: clamp(14.4px, calc(11.83px + 0.8035vw), 18.0px) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; text-transform: none !important; text-decoration: none !important; color: #ffffff !important; background: linear-gradient(135deg, #8b5cf6 0%, #9d4edd 50%, #6d28d9 100%) !important; border: none !important; border-radius: 16px !important; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4), 0 8px 40px rgba(109, 40, 217, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; transform: translateY(0) !important; min-width: 260px !important; max-width: fit-content; } /* Button shine effect */ body.woocommerce-cart .wc-empty-cart-message + .return-to-shop .button::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%) !important; } /* Button hover state */ body.woocommerce-cart .wc-empty-cart-message + .return-to-shop .button:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5), 0 12px 50px rgba(109, 40, 217, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; background: linear-gradient(135deg, #9d4edd 0%, #8b5cf6 50%, #7c3aed 100%) !important; } /* Button shine on hover */ body.woocommerce-cart .wc-empty-cart-message + .return-to-shop .button:hover::before { left: 100% !important; } /* Button active state */ body.woocommerce-cart .wc-empty-cart-message + .return-to-shop .button:active { transform: translateY(-2px) scale(0.98) !important; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4), 0 6px 30px rgba(109, 40, 217, 0.3) !important; } /* SVG icon styling (added via PHP filter) */ body.woocommerce-cart .wc-empty-cart-message + .return-to-shop .button svg { } /* Icon bounce on hover */ body.woocommerce-cart .wc-empty-cart-message + .return-to-shop .button:hover svg { transform: scale(1.15) !important; } @keyframes iconBounce { 0%, 100% { transform: scale(1.15) translateY(0); } 50% { transform: scale(1.15) translateY(-3px); } } /* Decorative glow elements around the container */ body.woocommerce-cart .woocommerce-notices-wrapper + .wc-empty-cart-message:after { content: none !important; } /* Responsive Design - Mobile & Tablet */ @media (max-width: 768px) { body.woocommerce-cart .woocommerce-notices-wrapper + .wc-empty-cart-message { min-height: 450px !important; padding: 60px 24px 48px !important; margin: 24px 16px !important; border-radius: 20px !important; } body.woocommerce-cart .wc-empty-cart-message .sad-bag-icon { width: 160px !important; height: 160px !important; margin-bottom: 24px !important; } body.woocommerce-cart .wc-empty-cart-message::after { font-size: clamp(17.6px, calc(14.46px + 0.9821vw), 22.0px) !important; margin-bottom: 20px !important; } body.woocommerce-cart .wc-empty-cart-message + .return-to-shop { margin-top: 20px !important; } body.woocommerce-cart .wc-empty-cart-message + .return-to-shop .button { padding: 16px 36px !important; font-size: clamp(12.8px, calc(10.51px + 0.7142vw), 16.0px) !important; min-width: 220px !important; } } @media (max-width: 480px) { body.woocommerce-cart .woocommerce-notices-wrapper + .wc-empty-cart-message { min-height: 400px !important; padding: 48px 20px 40px !important; margin: 20px 12px !important; } body.woocommerce-cart .wc-empty-cart-message .sad-bag-icon { width: 140px !important; height: 140px !important; margin-bottom: 20px !important; } body.woocommerce-cart .wc-empty-cart-message::after { margin-bottom: 16px !important; } body.woocommerce-cart .wc-empty-cart-message + .return-to-shop .button { padding: 14px 32px !important; min-width: 200px !important; } } /* Background container - slightly lighter for contrast */ /* END OF DARK READER OPTIMIZATION */ /* ============================================ */ /* END OF STYLES */ /* ============================================ */ /* ============================================================ RZK FLUID SCALE · canonical design tokens (2026-08-01) ------------------------------------------------------------ ONE source of truth for checkout/cart typography + spacing. Every clamp() UPPER bound equals the value that used to be hard-coded, so desktop rendering is pixel-identical; only small screens shrink. This block replaces the old stacked 550 / 449 / 400 / 320px !important override blocks. This same block is duplicated verbatim in the other client stylesheets so each plugin is self-sufficient (a var() whose token is undefined makes the whole declaration invalid, which would silently drop the property). Duplicating identical *definitions* is safe; duplicating *overrides* is what we removed. Keep the four copies in sync. ============================================================ */ :root { /* type scale */ --rzk-fs-2xs: 12px; /* RZK 2026-08-27: floor raised from 10.5px to the 12px prose minimum. Every consumer is a sentence, not a badge -- the payment-security line, the coupon form paragraph and the order-notes placeholder. Measured 11.31px at 390px. Cap unchanged at 12.5px. Declared in three stylesheets; all three are changed so the result does not depend on enqueue order. */ --rzk-fs-xs: clamp(12px, 11.64px + 0.1116vw, 12.5px); --rzk-fs-sm: clamp(12px, 3.25vw, 14px); --rzk-fs-md: clamp(12.5px, 3.6vw, 15px); --rzk-fs-base: clamp(12px, 3.7vw, 16px); --rzk-fs-lg: clamp(13.5px, 4vw, 17px); --rzk-fs-xl: clamp(15px, 4.6vw, 20px); --rzk-fs-2xl: clamp(16px, 5vw, 24px); --rzk-fs-3xl: clamp(17px, 5.6vw, 32px); /* spacing */ --rzk-sp-1: clamp(3px, 1vw, 5px); --rzk-sp-2: clamp(5px, 1.6vw, 8px); --rzk-sp-3: clamp(7px, 2.2vw, 12px); --rzk-sp-4: clamp(9px, 3vw, 18px); --rzk-sp-5: clamp(12px, 4vw, 32px); --rzk-radius: clamp(8px, 2.2vw, 14px); /* control metrics (inputs, buttons) */ --rzk-in-py: clamp(8px, 2.6vw, 14px); --rzk-in-px: clamp(10px, 3.2vw, 18px); --rzk-in-minh: clamp(38px, 11vw, 50px); --rzk-lbl-fs: clamp(11.5px, 3.1vw, 14px); --rzk-hint-fs: clamp(10px, 2.7vw, 12.5px); /* iOS Safari zooms the page when a focused field is under 16px, so form controls keep a 16px floor. Field *size* still shrinks via --rzk-in-*. */ --rzk-field-fs: clamp(13px, calc(10.53px + 0.77vw), 16px); } /* ------------------------------------------------------------------ RZK 2026-08-01 (task 1) - page-title / breadcrumb typography. The heading at the top of the cart and checkout pages ("سبد خرید", "جزئیات پرداخت", "اتمام عملیات خرید") is rendered by Flatsome as nav.breadcrumbs carrying the theme's .h2 class, so its size came straight from the theme and was effectively fixed. Editing the theme is not an option (Flatsome updates would wipe it and there is no child theme here), so this is the single client-owned declaration that governs it. It is not stacked on top of another client rule - it is the only one, which is why it needs no !important: the two-class selector already out-specifies the theme's .h2. This file is the right home for it because it is the only client stylesheet enqueued on BOTH the cart and the checkout, so one rule covers both pages instead of a copy per page. ------------------------------------------------------------------ */ .checkout-page-title .breadcrumbs, .cart-page-title .breadcrumbs, .page-title .breadcrumbs.checkout-breadcrumbs { font-size: var(--rzk-fs-lg); line-height: 1.45; letter-spacing: 0; } .checkout-page-title .breadcrumbs .divider, .cart-page-title .breadcrumbs .divider, .page-title .breadcrumbs.checkout-breadcrumbs .divider { margin: 0 var(--rzk-sp-1); } .checkout-page-title .page-title-inner, .cart-page-title .page-title-inner { padding-top: var(--rzk-sp-3); padding-bottom: var(--rzk-sp-3); min-height: 0; } /* --- RZK iOS form-control guard (generated; do not edit by hand) --- iOS Safari - and every iOS browser, since they all use WebKit - zooms the whole page in when a focused form control is under 16px. That is the only engine with the bug, so typed text shrinks everywhere else and is pinned to 16px only here. This guard MUST exist in every file that declares --rzk-field-fs, because the file that loads last wins. */ @supports (-webkit-touch-callout: none) { :root { --rzk-field-fs: 16px; } } --------------------------u9qLKXD1iRXb501BXPBOLE--