/* ========================================================== ELMATJAR — PREMIUM MOBILE MENU DRAWER WARM IVORY / SAND / CHAMPAGNE GOLD NO WATERMARK ========================================================== */ /* ========================================================== COLOR SYSTEM ========================================================== */ :root { --elmatjar-menu-black: #0b0908; --elmatjar-menu-charcoal: #100d0b; --elmatjar-menu-espresso: #18120e; --elmatjar-menu-mocha: #261c14; --elmatjar-menu-ivory: #f5efe5; --elmatjar-menu-champagne: #d8bf8a; --elmatjar-menu-gold: #c6a66d; --elmatjar-menu-bronze: #987044; --elmatjar-menu-muted: rgba(245, 239, 229, 0.67); --elmatjar-menu-faint: rgba(245, 239, 229, 0.42); --elmatjar-menu-line: rgba(216, 191, 138, 0.17); } /* ========================================================== OVERLAY ========================================================== */ [id^="headlessui-dialog"] .fixed.inset-0.bg-black, [id^="headlessui-dialog"] .fixed.inset-0 { background: linear-gradient( 90deg, rgba(5, 4, 3, 0.62), rgba(15, 11, 8, 0.48) ) !important; backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%); } /* ========================================================== MOBILE MENU DRAWER ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl { position: relative; overflow-x: hidden; overflow-y: auto; color: var(--elmatjar-menu-ivory); background: radial-gradient( circle at 100% 0%, rgba(216, 191, 138, 0.13) 0%, rgba(198, 166, 109, 0.045) 28%, transparent 48% ), radial-gradient( circle at 0% 100%, rgba(152, 112, 68, 0.12) 0%, rgba(152, 112, 68, 0.03) 35%, transparent 58% ), linear-gradient( 165deg, rgba(38, 28, 20, 0.98) 0%, rgba(24, 18, 14, 0.99) 42%, rgba(11, 9, 8, 1) 100% ) !important; border: 0 !important; border-left: 1px solid rgba(216, 191, 138, 0.12) !important; box-shadow: -24px 0 65px rgba(0, 0, 0, 0.48), inset 1px 0 0 rgba(255, 255, 255, 0.025); backdrop-filter: blur(32px) saturate(120%); -webkit-backdrop-filter: blur(32px) saturate(120%); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; direction: rtl; } /* ========================================================== REMOVE OLD WATERMARK COMPLETELY ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::before { content: none !important; display: none !important; background: none !important; } /* ========================================================== CINEMATIC LIGHT LAYER ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 248, 232, 0.045) 0%, transparent 21%, transparent 72%, rgba(0, 0, 0, 0.16) 100% ), radial-gradient( ellipse 90% 38% at 50% 0%, rgba(216, 191, 138, 0.07), transparent 72% ); opacity: 1; } /* ========================================================== KEEP CONTENT ABOVE EFFECTS ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl > * { position: relative; z-index: 2; } /* ========================================================== REMOVE WHITE BACKGROUNDS INSIDE DRAWER ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .bg-white, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [class*="bg-white"] { background: transparent !important; background-color: transparent !important; } /* ========================================================== REMOVE DIVIDERS ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .divide-y, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [class*="divide-"], .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .flow-root { border: 0 !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .divide-y > * { border-top: 0 !important; border-bottom: 0 !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl hr { display: none !important; } /* ========================================================== DRAWER TOP AREA ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .flex.justify-end.px-4.pt-5 { min-height: 76px; display: flex; align-items: center; justify-content: flex-end; padding: max(18px, env(safe-area-inset-top)) 18px 8px !important; } /* ========================================================== CLOSE BUTTON ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .flex.justify-end.px-4.pt-5 button { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; border: 1px solid rgba(216, 191, 138, 0.2) !important; border-radius: 50%; color: var(--elmatjar-menu-champagne) !important; background: linear-gradient( 145deg, rgba(216, 191, 138, 0.1), rgba(216, 191, 138, 0.025) ) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055); cursor: pointer; transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .flex.justify-end.px-4.pt-5 button:hover { transform: rotate(4deg); border-color: rgba(216, 191, 138, 0.42) !important; background: rgba(216, 191, 138, 0.13) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .flex.justify-end.px-4.pt-5 button:active { transform: scale(0.96); } /* ========================================================== CONTENT SPACING ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .px-4 { padding-right: 18px !important; padding-left: 18px !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .py-6, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .py-5 { padding-top: 12px !important; padding-bottom: 12px !important; } /* ========================================================== HEADINGS ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .font-bold { margin: 0 0 12px; color: var(--elmatjar-menu-champagne) !important; font-size: 17px; font-weight: 700; line-height: 1.6; letter-spacing: 0.015em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); } /* ========================================================== ALL MENU LINKS ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl a { position: relative; width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 13px 15px !important; border: 1px solid transparent; border-radius: 12px; color: rgba(245, 239, 229, 0.84) !important; background: transparent !important; font-size: 14px; font-weight: 500; line-height: 1.6; text-decoration: none; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl a::after { content: ""; position: absolute; right: 15px; bottom: 6px; width: 0; height: 1px; background: linear-gradient( to left, var(--elmatjar-menu-champagne), transparent ); opacity: 0.7; transition: width 0.28s ease; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl a:hover { color: var(--elmatjar-menu-ivory) !important; background: linear-gradient( 90deg, rgba(216, 191, 138, 0.09), rgba(216, 191, 138, 0.025) ) !important; border-color: rgba(216, 191, 138, 0.12); transform: translateX(-2px); } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl a:hover::after { width: 42px; } /* ========================================================== DISCLOSURE / ACCORDION BUTTONS ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] { width: 100%; height: auto; min-height: 50px; padding: 0 !important; border: 0 !important; border-radius: 12px; color: var(--elmatjar-menu-ivory) !important; background: transparent !important; text-align: right; cursor: pointer; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] > div, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] > span { width: 100%; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] a { color: rgba(245, 239, 229, 0.86) !important; font-size: 14px; font-weight: 600; text-decoration: none; } /* ========================================================== OPEN DISCLOSURE STATE ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] .bg-gray-100, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] [class*="bg-gray"] { color: var(--elmatjar-menu-ivory) !important; background: linear-gradient( 90deg, rgba(216, 191, 138, 0.11), rgba(216, 191, 138, 0.025) ) !important; border: 1px solid rgba(216, 191, 138, 0.12) !important; border-radius: 12px; } /* ========================================================== ACCORDION SUBMENUS ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-panel"] { margin: 4px 10px 10px; padding-right: 10px; border-right: 1px solid rgba(216, 191, 138, 0.13); background: transparent !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-panel"] a { min-height: 43px; padding: 10px 13px !important; color: var(--elmatjar-menu-muted) !important; font-size: 13px; font-weight: 500; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-panel"] a:hover { color: var(--elmatjar-menu-ivory) !important; } /* ========================================================== ICONS ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl svg { color: var(--elmatjar-menu-champagne) !important; flex-shrink: 0; transition: color 0.25s ease, transform 0.25s ease; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl button:hover svg, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl a:hover svg { color: var(--elmatjar-menu-ivory) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl svg path[fill="#131316"], .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl svg path[fill="black"] { fill: currentColor !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl svg path[stroke="#131316"], .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl svg path[stroke="black"] { stroke: currentColor !important; } /* ========================================================== TEXT COLORS ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .text-gray-500, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .text-gray-600, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .text-gray-700, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .text-gray-800, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .text-gray-900, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [class*="text-gray"] { color: var(--elmatjar-menu-muted) !important; } /* ========================================================== BUTTON RESET INSIDE DRAWER ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl button { font-family: inherit; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl button:not( .flex.justify-end.px-4.pt-5 button ) { color: var(--elmatjar-menu-ivory); } /* ========================================================== SCROLLBAR ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl { scrollbar-width: thin; scrollbar-color: rgba(216, 191, 138, 0.35) rgba(255, 255, 255, 0.025); } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::-webkit-scrollbar { width: 5px; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.018); } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient( to bottom, rgba(216, 191, 138, 0.55), rgba(152, 112, 68, 0.3) ); } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::-webkit-scrollbar-thumb:hover { background: rgba(216, 191, 138, 0.65); } /* ========================================================== TEXT SELECTION ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl *::selection { color: var(--elmatjar-menu-black); background: rgba(216, 191, 138, 0.85); } /* ========================================================== FOCUS ACCESSIBILITY ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl a:focus-visible, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl button:focus-visible { outline: 2px solid var(--elmatjar-menu-champagne); outline-offset: 3px; } /* ========================================================== MOBILE SAFE AREA ========================================================== */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl { padding-bottom: max(48px, env(safe-area-inset-bottom)) !important; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl *, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl *::before, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* ========================================================== ELMATJAR — PREMIUM CART DRAWER WARM LUXURY GLASS IVORY / SAND / CHAMPAGNE GOLD ========================================================== */ /* ========================================================== CART DESIGN TOKENS ========================================================== */ [data-cart="panel-inner"] { --elmatjar-cart-black: #0b0908; --elmatjar-cart-charcoal: #100d0b; --elmatjar-cart-espresso: #18120e; --elmatjar-cart-mocha: #261c14; --elmatjar-cart-ivory: #f5efe5; --elmatjar-cart-champagne: #d8bf8a; --elmatjar-cart-gold: #c6a66d; --elmatjar-cart-bronze: #987044; --elmatjar-cart-text: rgba(245, 239, 229, 0.9); --elmatjar-cart-muted: rgba(245, 239, 229, 0.62); --elmatjar-cart-faint: rgba(245, 239, 229, 0.4); --elmatjar-cart-border: rgba(216, 191, 138, 0.2); --elmatjar-cart-soft-border: rgba(216, 191, 138, 0.11); } /* ========================================================== DRAWER OVERLAY ========================================================== */ [id^="headlessui-dialog"] .fixed.inset-0.bg-black, [id^="headlessui-dialog"] .fixed.inset-0 { background: linear-gradient( 90deg, rgba(4, 3, 2, 0.48), rgba(10, 7, 5, 0.3) ) !important; backdrop-filter: blur(14px) saturate(115%); -webkit-backdrop-filter: blur(14px) saturate(115%); } /* ========================================================== MAIN CART PANEL ========================================================== */ [data-cart="panel-inner"] { position: relative; overflow-x: hidden; overflow-y: auto; color: var(--elmatjar-cart-ivory); background: radial-gradient( circle at 100% 0%, rgba(216, 191, 138, 0.13) 0%, rgba(198, 166, 109, 0.04) 31%, transparent 53% ), radial-gradient( circle at 0% 100%, rgba(152, 112, 68, 0.11) 0%, rgba(152, 112, 68, 0.025) 38%, transparent 61% ), linear-gradient( 155deg, rgba(30, 23, 17, 0.76) 0%, rgba(20, 15, 12, 0.72) 48%, rgba(10, 8, 7, 0.82) 100% ) !important; backdrop-filter: blur(34px) saturate(135%) brightness(0.88); -webkit-backdrop-filter: blur(34px) saturate(135%) brightness(0.88); border-left: 1px solid rgba(216, 191, 138, 0.2) !important; box-shadow: -35px 0 80px rgba(0, 0, 0, 0.38), inset 1px 0 0 rgba(255, 255, 255, 0.035); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; isolation: isolate; } /* ========================================================== CINEMATIC GLASS LIGHT ========================================================== */ [data-cart="panel-inner"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 248, 232, 0.052) 0%, rgba(255, 248, 232, 0.012) 19%, transparent 47%, rgba(0, 0, 0, 0.12) 100% ); opacity: 1; } /* ========================================================== SOFT CHAMPAGNE AURA ========================================================== */ [data-cart="panel-inner"]::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse 85% 34% at 50% 0%, rgba(216, 191, 138, 0.09), transparent 72% ), radial-gradient( ellipse 70% 28% at 100% 100%, rgba(152, 112, 68, 0.075), transparent 76% ); } /* ========================================================== CONTENT ABOVE EFFECTS ========================================================== */ [data-cart="panel-inner"] > * { position: relative; z-index: 2; } /* ========================================================== REMOVE INTERNAL WHITE BACKGROUNDS ========================================================== */ [data-cart="panel-inner"] .bg-white, [data-cart="panel-inner"] [class*="bg-white"] { background: transparent !important; background-color: transparent !important; } /* ========================================================== REMOVE GRAY BACKGROUNDS ========================================================== */ [data-cart="panel-inner"] .bg-gray-50, [data-cart="panel-inner"] .bg-gray-100, [data-cart="panel-inner"] [class*="bg-gray"] { background: rgba(255, 255, 255, 0.025) !important; } /* ========================================================== MAIN TYPOGRAPHY ========================================================== */ [data-cart="panel-inner"] { color: var(--elmatjar-cart-text); font-family: "Cairo", "Tajawal", Arial, sans-serif; } [data-cart="panel-inner"] h1, [data-cart="panel-inner"] h2, [data-cart="panel-inner"] h3, [data-cart="panel-inner"] h4, [data-cart="panel-inner"] .font-bold { color: var(--elmatjar-cart-ivory) !important; font-weight: 700; line-height: 1.4; letter-spacing: 0; } /* ========================================================== CART TITLE ========================================================== */ [data-cart="panel-inner"] h2 { color: var(--elmatjar-cart-champagne) !important; font-size: 20px; font-weight: 700; line-height: 1.4; text-transform: none; letter-spacing: 0.015em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.28); } /* ========================================================== PRODUCT LINKS ========================================================== */ [data-cart="panel-inner"] a { color: var(--elmatjar-cart-text) !important; font-size: 14px; font-weight: 600; line-height: 1.65; text-decoration: none; transition: color 0.25s ease, opacity 0.25s ease; } [data-cart="panel-inner"] a:hover { color: var(--elmatjar-cart-champagne) !important; } /* ========================================================== SECONDARY TEXT ========================================================== */ [data-cart="panel-inner"] small, [data-cart="panel-inner"] p, [data-cart="panel-inner"] span { color: var(--elmatjar-cart-muted); line-height: 1.7; } [data-cart="panel-inner"] .text-gray-400, [data-cart="panel-inner"] .text-gray-500, [data-cart="panel-inner"] .text-gray-600, [data-cart="panel-inner"] .text-gray-700, [data-cart="panel-inner"] .text-gray-800, [data-cart="panel-inner"] .text-gray-900, [data-cart="panel-inner"] [class*="text-gray"] { color: var(--elmatjar-cart-muted) !important; } /* ========================================================== PRODUCT PRICE ========================================================== */ [data-cart="panel-inner"] .price, [data-cart="panel-inner"] [class*="price"] { color: var(--elmatjar-cart-champagne) !important; font-size: 15px; font-weight: 800; letter-spacing: 0.01em; } /* ========================================================== CART ITEMS ========================================================== */ [data-cart="panel-inner"] [class*="item"] { position: relative; } [data-cart="panel-inner"] [class*="item"]:not(:last-child) { border-bottom: 1px solid var(--elmatjar-cart-soft-border) !important; } /* ========================================================== PRODUCT IMAGES ========================================================== */ [data-cart="panel-inner"] img { border: 1px solid rgba(216, 191, 138, 0.11); border-radius: 12px; background: rgba(255, 255, 255, 0.025); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); object-fit: cover; } /* ========================================================== QUANTITY AREA ========================================================== */ [data-cart="panel-inner"] input, [data-cart="panel-inner"] .quantity, [data-cart="panel-inner"] [class*="quantity"] { color: var(--elmatjar-cart-ivory) !important; font-size: 14px; font-weight: 700; } /* ========================================================== QUANTITY STEPPER ========================================================== */ [data-cart="panel-inner"] [class*="quantity"] { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 4px; border: 1px solid rgba(216, 191, 138, 0.23) !important; border-radius: 999px; background: rgba(8, 6, 5, 0.3) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); } /* ========================================================== QUANTITY BUTTONS ========================================================== */ [data-cart="panel-inner"] [class*="quantity"] button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; padding: 0 !important; border: 0 !important; border-radius: 50%; color: var(--elmatjar-cart-champagne) !important; background: transparent !important; font-weight: 700; transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease; } [data-cart="panel-inner"] [class*="quantity"] button:hover { color: var(--elmatjar-cart-black) !important; background: var(--elmatjar-cart-champagne) !important; transform: scale(1.04); } /* ========================================================== QUANTITY INPUT ========================================================== */ [data-cart="panel-inner"] [class*="quantity"] input { width: 32px; padding: 0; border: 0 !important; outline: 0; color: var(--elmatjar-cart-ivory) !important; background: transparent !important; text-align: center; appearance: textfield; -moz-appearance: textfield; } [data-cart="panel-inner"] [class*="quantity"] input::-webkit-inner-spin-button, [data-cart="panel-inner"] [class*="quantity"] input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } /* ========================================================== GENERAL BUTTONS ========================================================== */ [data-cart="panel-inner"] button { color: var(--elmatjar-cart-ivory); font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; cursor: pointer; } /* ========================================================== ICONS ========================================================== */ [data-cart="panel-inner"] svg { color: var(--elmatjar-cart-champagne) !important; transition: color 0.25s ease, transform 0.25s ease; } [data-cart="panel-inner"] svg path[fill="#131316"], [data-cart="panel-inner"] svg path[fill="black"] { fill: currentColor !important; } [data-cart="panel-inner"] svg path[stroke="#131316"], [data-cart="panel-inner"] svg path[stroke="black"] { stroke: currentColor !important; } /* ========================================================== CLOSE BUTTON ========================================================== */ [data-cart="close"], [data-cart="panel-inner"] [aria-label*="Close"], [data-cart="panel-inner"] [aria-label*="close"] { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; border: 1px solid rgba(216, 191, 138, 0.2) !important; border-radius: 50%; color: var(--elmatjar-cart-champagne) !important; background: rgba(216, 191, 138, 0.055) !important; transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } [data-cart="close"]:hover, [data-cart="panel-inner"] [aria-label*="Close"]:hover, [data-cart="panel-inner"] [aria-label*="close"]:hover { border-color: rgba(216, 191, 138, 0.45) !important; background: rgba(216, 191, 138, 0.12) !important; transform: rotate(3deg); } /* ========================================================== REMOVE BUTTON / DELETE ACTION ========================================================== */ [data-cart="panel-inner"] [aria-label*="Remove"], [data-cart="panel-inner"] [aria-label*="remove"], [data-cart="panel-inner"] [class*="remove"] { color: rgba(245, 239, 229, 0.48) !important; transition: color 0.25s ease, opacity 0.25s ease; } [data-cart="panel-inner"] [aria-label*="Remove"]:hover, [data-cart="panel-inner"] [aria-label*="remove"]:hover, [data-cart="panel-inner"] [class*="remove"]:hover { color: var(--elmatjar-cart-champagne) !important; } /* ========================================================== SUBTOTAL / TOTAL AREA ========================================================== */ [data-cart="panel-inner"] [class*="subtotal"], [data-cart="panel-inner"] [class*="total"] { padding-top: 16px; border-top: 1px solid rgba(216, 191, 138, 0.2) !important; } [data-cart="panel-inner"] [class*="subtotal"] .price, [data-cart="panel-inner"] [class*="total"] .price { color: var(--elmatjar-cart-champagne) !important; font-size: 21px; font-weight: 800; } /* ========================================================== CHECKOUT BUTTON ========================================================== */ [data-cart="panel-inner"] button[type="submit"], [data-cart="panel-inner"] .checkout-btn, [data-cart="panel-inner"] a[href*="checkout"] { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px !important; border: 1px solid rgba(255, 240, 207, 0.38) !important; border-radius: 12px; color: #18130f !important; background: linear-gradient( 135deg, #ead9af 0%, var(--elmatjar-cart-champagne) 52%, #b99761 100% ) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.34); font-size: 14px; font-weight: 800; letter-spacing: 0.01em; text-transform: none; text-decoration: none; transition: transform 0.28s ease, filter 0.28s ease, box-shadow 0.28s ease; } [data-cart="panel-inner"] button[type="submit"]:hover, [data-cart="panel-inner"] .checkout-btn:hover, [data-cart="panel-inner"] a[href*="checkout"]:hover { color: #18130f !important; filter: brightness(1.045); transform: translateY(-2px); box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.4); } [data-cart="panel-inner"] button[type="submit"]:active, [data-cart="panel-inner"] .checkout-btn:active, [data-cart="panel-inner"] a[href*="checkout"]:active { transform: translateY(0); } /* ========================================================== EMPTY CART ========================================================== */ [data-cart="empty"] { padding: 60px 20px; color: var(--elmatjar-cart-muted) !important; text-align: center; } [data-cart="empty"] svg { color: var(--elmatjar-cart-champagne) !important; opacity: 0.72; } /* ========================================================== INPUTS / NOTES ========================================================== */ [data-cart="panel-inner"] input, [data-cart="panel-inner"] textarea, [data-cart="panel-inner"] select { border: 1px solid rgba(216, 191, 138, 0.17) !important; border-radius: 10px; color: var(--elmatjar-cart-ivory) !important; background: rgba(0, 0, 0, 0.16) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-cart="panel-inner"] input::placeholder, [data-cart="panel-inner"] textarea::placeholder { color: rgba(245, 239, 229, 0.38) !important; } /* ========================================================== SCROLLBAR ========================================================== */ [data-cart="panel-inner"] { scrollbar-width: thin; scrollbar-color: rgba(216, 191, 138, 0.42) transparent; } [data-cart="panel-inner"]::-webkit-scrollbar { width: 5px; } [data-cart="panel-inner"]::-webkit-scrollbar-track { background: transparent; } [data-cart="panel-inner"]::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient( to bottom, rgba(216, 191, 138, 0.58), rgba(152, 112, 68, 0.3) ); } [data-cart="panel-inner"]::-webkit-scrollbar-thumb:hover { background: rgba(216, 191, 138, 0.72); } /* ========================================================== TEXT SELECTION ========================================================== */ [data-cart="panel-inner"] *::selection { color: var(--elmatjar-cart-black); background: rgba(216, 191, 138, 0.85); } /* ========================================================== ACCESSIBILITY ========================================================== */ [data-cart="panel-inner"] a:focus-visible, [data-cart="panel-inner"] button:focus-visible, [data-cart="panel-inner"] input:focus-visible, [data-cart="panel-inner"] textarea:focus-visible, [data-cart="panel-inner"] select:focus-visible { outline: 2px solid var(--elmatjar-cart-champagne); outline-offset: 3px; } /* ========================================================== MOBILE OPTIMIZATION ========================================================== */ @media (max-width: 600px) { [data-cart="panel-inner"] { background: radial-gradient( circle at 100% 0%, rgba(216, 191, 138, 0.12), transparent 42% ), linear-gradient( 155deg, rgba(29, 22, 17, 0.84), rgba(10, 8, 7, 0.9) ) !important; backdrop-filter: blur(28px) saturate(125%); -webkit-backdrop-filter: blur(28px) saturate(125%); } [data-cart="panel-inner"] h2 { font-size: 18px; } [data-cart="panel-inner"] a { font-size: 13px; } [data-cart="panel-inner"] button[type="submit"], [data-cart="panel-inner"] .checkout-btn, [data-cart="panel-inner"] a[href*="checkout"] { min-height: 52px; border-radius: 11px; font-size: 13px; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { [data-cart="panel-inner"] *, [data-cart="panel-inner"] *::before, [data-cart="panel-inner"] *::after { animation: none !important; transition: none !important; } } /* ========================================================== ELMATJAR — FINAL BRAND OVERRIDES WARM IVORY / SAND / CHAMPAGNE GOLD Keep this block at the very end of the file. ========================================================== */ :root { --elmatjar-menu-black: #1f1a14; --elmatjar-menu-charcoal: #30271e; --elmatjar-menu-espresso: #6e5a43; --elmatjar-menu-mocha: #a1845f; --elmatjar-menu-ivory: #241f19; --elmatjar-menu-champagne: #b98028; --elmatjar-menu-gold: #d5a44d; --elmatjar-menu-bronze: #8f6429; --elmatjar-menu-muted: rgba(36, 31, 25, 0.66); --elmatjar-menu-faint: rgba(36, 31, 25, 0.42); --elmatjar-menu-line: rgba(185, 128, 40, 0.18); } /* ========================================================== SHARED DRAWER OVERLAY ========================================================== */ [id^="headlessui-dialog"] .fixed.inset-0.bg-black, [id^="headlessui-dialog"] .fixed.inset-0 { background: linear-gradient( 90deg, rgba(58, 45, 30, 0.28), rgba(103, 79, 47, 0.16) ) !important; backdrop-filter: blur(16px) saturate(112%) !important; -webkit-backdrop-filter: blur(16px) saturate(112%) !important; } /* ========================================================== MOBILE MENU — WARM LIGHT GLASS ========================================================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl { color: var(--elmatjar-menu-ivory) !important; background: radial-gradient( circle at 100% 0%, rgba(213, 164, 77, 0.22) 0%, rgba(213, 164, 77, 0.07) 31%, transparent 55% ), radial-gradient( circle at 0% 100%, rgba(185, 128, 40, 0.13) 0%, rgba(185, 128, 40, 0.035) 40%, transparent 64% ), linear-gradient( 158deg, rgba(255, 253, 248, 0.985) 0%, rgba(247, 240, 228, 0.985) 48%, rgba(235, 222, 201, 0.99) 100% ) !important; border-left: 1px solid rgba(185, 128, 40, 0.22) !important; box-shadow: -28px 0 72px rgba(87, 63, 31, 0.2), inset 1px 0 0 rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(28px) saturate(120%) !important; -webkit-backdrop-filter: blur(28px) saturate(120%) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::after { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.1) 22%, transparent 58%, rgba(157, 113, 48, 0.07) 100% ), radial-gradient( ellipse 92% 40% at 50% 0%, rgba(255, 255, 255, 0.74), transparent 72% ) !important; } /* Menu close button */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .flex.justify-end.px-4.pt-5 button { color: var(--elmatjar-menu-champagne) !important; border: 1px solid rgba(185, 128, 40, 0.24) !important; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.82), rgba(225, 201, 158, 0.34) ) !important; box-shadow: 0 10px 24px rgba(111, 78, 31, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important; } /* Menu headings and links */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .font-bold { color: var(--elmatjar-menu-champagne) !important; text-shadow: 0 2px 12px rgba(255, 255, 255, 0.55) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl a { color: rgba(36, 31, 25, 0.84) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl a:hover { color: #1f1a14 !important; background: linear-gradient( 90deg, rgba(213, 164, 77, 0.16), rgba(255, 255, 255, 0.38) ) !important; border-color: rgba(185, 128, 40, 0.18) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] { color: var(--elmatjar-menu-ivory) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] a { color: rgba(36, 31, 25, 0.88) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] .bg-gray-100, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] [class*="bg-gray"] { color: var(--elmatjar-menu-ivory) !important; background: linear-gradient( 90deg, rgba(213, 164, 77, 0.17), rgba(255, 255, 255, 0.3) ) !important; border: 1px solid rgba(185, 128, 40, 0.17) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-panel"] { border-right: 1px solid rgba(185, 128, 40, 0.2) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-panel"] a { color: var(--elmatjar-menu-muted) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-panel"] a:hover { color: var(--elmatjar-menu-champagne) !important; } /* Menu icons and secondary text */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl svg { color: var(--elmatjar-menu-champagne) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl button:hover svg, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl a:hover svg { color: #8f6429 !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .text-gray-500, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .text-gray-600, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .text-gray-700, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .text-gray-800, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .text-gray-900, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [class*="text-gray"] { color: var(--elmatjar-menu-muted) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl button:not( .flex.justify-end.px-4.pt-5 button ) { color: var(--elmatjar-menu-ivory) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl { scrollbar-color: rgba(185, 128, 40, 0.52) rgba(116, 84, 39, 0.06) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::-webkit-scrollbar-track { background: rgba(116, 84, 39, 0.05) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::-webkit-scrollbar-thumb { background: linear-gradient( to bottom, rgba(213, 164, 77, 0.78), rgba(143, 100, 41, 0.48) ) !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl *::selection { color: #241f19 !important; background: rgba(213, 164, 77, 0.42) !important; } /* ========================================================== CART DRAWER — ELMATJAR BRAND TOKENS ========================================================== */ [data-cart="panel-inner"] { --elmatjar-cart-black: #1f1a14; --elmatjar-cart-charcoal: #30271e; --elmatjar-cart-espresso: #6e5a43; --elmatjar-cart-mocha: #a1845f; --elmatjar-cart-ivory: #241f19; --elmatjar-cart-champagne: #b98028; --elmatjar-cart-gold: #d5a44d; --elmatjar-cart-bronze: #8f6429; --elmatjar-cart-text: rgba(36, 31, 25, 0.9); --elmatjar-cart-muted: rgba(36, 31, 25, 0.63); --elmatjar-cart-faint: rgba(36, 31, 25, 0.4); --elmatjar-cart-border: rgba(185, 128, 40, 0.23); --elmatjar-cart-soft-border: rgba(185, 128, 40, 0.12); } /* Main cart panel */ [data-cart="panel-inner"] { color: var(--elmatjar-cart-text) !important; background: radial-gradient( circle at 100% 0%, rgba(213, 164, 77, 0.2) 0%, rgba(213, 164, 77, 0.055) 34%, transparent 56% ), radial-gradient( circle at 0% 100%, rgba(185, 128, 40, 0.11) 0%, rgba(185, 128, 40, 0.025) 42%, transparent 66% ), linear-gradient( 155deg, rgba(255, 253, 248, 0.92) 0%, rgba(247, 240, 228, 0.9) 48%, rgba(235, 222, 201, 0.94) 100% ) !important; backdrop-filter: blur(32px) saturate(125%) brightness(1.02) !important; -webkit-backdrop-filter: blur(32px) saturate(125%) brightness(1.02) !important; border-left: 1px solid rgba(185, 128, 40, 0.23) !important; box-shadow: -35px 0 80px rgba(87, 63, 31, 0.2), inset 1px 0 0 rgba(255, 255, 255, 0.74) !important; } [data-cart="panel-inner"]::before { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.15) 21%, transparent 52%, rgba(143, 100, 41, 0.06) 100% ) !important; } [data-cart="panel-inner"]::after { background: radial-gradient( ellipse 85% 34% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 72% ), radial-gradient( ellipse 70% 28% at 100% 100%, rgba(213, 164, 77, 0.12), transparent 76% ) !important; } /* Remove dark internal surfaces */ [data-cart="panel-inner"] .bg-gray-50, [data-cart="panel-inner"] .bg-gray-100, [data-cart="panel-inner"] [class*="bg-gray"] { background: rgba(255, 255, 255, 0.3) !important; } /* Cart typography */ [data-cart="panel-inner"], [data-cart="panel-inner"] h1, [data-cart="panel-inner"] h2, [data-cart="panel-inner"] h3, [data-cart="panel-inner"] h4, [data-cart="panel-inner"] .font-bold { color: var(--elmatjar-cart-ivory) !important; } [data-cart="panel-inner"] h2 { color: var(--elmatjar-cart-champagne) !important; text-shadow: 0 2px 14px rgba(255, 255, 255, 0.45) !important; } [data-cart="panel-inner"] a { color: var(--elmatjar-cart-text) !important; } [data-cart="panel-inner"] a:hover { color: var(--elmatjar-cart-champagne) !important; } [data-cart="panel-inner"] small, [data-cart="panel-inner"] p, [data-cart="panel-inner"] span, [data-cart="panel-inner"] .text-gray-400, [data-cart="panel-inner"] .text-gray-500, [data-cart="panel-inner"] .text-gray-600, [data-cart="panel-inner"] .text-gray-700, [data-cart="panel-inner"] .text-gray-800, [data-cart="panel-inner"] .text-gray-900, [data-cart="panel-inner"] [class*="text-gray"] { color: var(--elmatjar-cart-muted) !important; } [data-cart="panel-inner"] .price, [data-cart="panel-inner"] [class*="price"] { color: var(--elmatjar-cart-champagne) !important; } /* Product images */ [data-cart="panel-inner"] img { border: 1px solid rgba(185, 128, 40, 0.16) !important; background: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 12px 28px rgba(103, 76, 38, 0.14) !important; } /* Quantity control */ [data-cart="panel-inner"] input, [data-cart="panel-inner"] .quantity, [data-cart="panel-inner"] [class*="quantity"] { color: var(--elmatjar-cart-ivory) !important; } [data-cart="panel-inner"] [class*="quantity"] { border: 1px solid rgba(185, 128, 40, 0.26) !important; background: rgba(255, 255, 255, 0.36) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; } [data-cart="panel-inner"] [class*="quantity"] button { color: var(--elmatjar-cart-champagne) !important; } [data-cart="panel-inner"] [class*="quantity"] button:hover { color: #fffaf1 !important; background: var(--elmatjar-cart-champagne) !important; } [data-cart="panel-inner"] [class*="quantity"] input { color: var(--elmatjar-cart-ivory) !important; } /* General icons and buttons */ [data-cart="panel-inner"] button { color: var(--elmatjar-cart-ivory) !important; } [data-cart="panel-inner"] svg { color: var(--elmatjar-cart-champagne) !important; } [data-cart="close"], [data-cart="panel-inner"] [aria-label*="Close"], [data-cart="panel-inner"] [aria-label*="close"] { color: var(--elmatjar-cart-champagne) !important; border: 1px solid rgba(185, 128, 40, 0.24) !important; background: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 9px 24px rgba(103, 76, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; } [data-cart="panel-inner"] [aria-label*="Remove"], [data-cart="panel-inner"] [aria-label*="remove"], [data-cart="panel-inner"] [class*="remove"] { color: rgba(76, 64, 50, 0.52) !important; } [data-cart="panel-inner"] [aria-label*="Remove"]:hover, [data-cart="panel-inner"] [aria-label*="remove"]:hover, [data-cart="panel-inner"] [class*="remove"]:hover { color: var(--elmatjar-cart-champagne) !important; } /* Total area */ [data-cart="panel-inner"] [class*="subtotal"], [data-cart="panel-inner"] [class*="total"] { border-top: 1px solid rgba(185, 128, 40, 0.2) !important; } [data-cart="panel-inner"] [class*="subtotal"] .price, [data-cart="panel-inner"] [class*="total"] .price { color: var(--elmatjar-cart-champagne) !important; } /* Checkout button */ [data-cart="panel-inner"] button[type="submit"], [data-cart="panel-inner"] .checkout-btn, [data-cart="panel-inner"] a[href*="checkout"] { color: #241b10 !important; border: 1px solid rgba(255, 249, 235, 0.68) !important; background: linear-gradient( 135deg, #f1d99e 0%, #d6a44d 50%, #b98028 100% ) !important; box-shadow: 0 16px 36px rgba(132, 88, 27, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important; } [data-cart="panel-inner"] button[type="submit"]:hover, [data-cart="panel-inner"] .checkout-btn:hover, [data-cart="panel-inner"] a[href*="checkout"]:hover { color: #241b10 !important; box-shadow: 0 20px 42px rgba(132, 88, 27, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.64) !important; } /* Inputs and notes */ [data-cart="panel-inner"] input, [data-cart="panel-inner"] textarea, [data-cart="panel-inner"] select { color: var(--elmatjar-cart-ivory) !important; border: 1px solid rgba(185, 128, 40, 0.2) !important; background: rgba(255, 255, 255, 0.38) !important; } [data-cart="panel-inner"] input::placeholder, [data-cart="panel-inner"] textarea::placeholder { color: rgba(36, 31, 25, 0.4) !important; } /* Cart scrollbar */ [data-cart="panel-inner"] { scrollbar-color: rgba(185, 128, 40, 0.56) transparent !important; } [data-cart="panel-inner"]::-webkit-scrollbar-thumb { background: linear-gradient( to bottom, rgba(213, 164, 77, 0.82), rgba(143, 100, 41, 0.48) ) !important; } [data-cart="panel-inner"] *::selection { color: #241f19 !important; background: rgba(213, 164, 77, 0.42) !important; } /* ========================================================== MOBILE FINISH ========================================================== */ @media (max-width: 600px) { [data-cart="panel-inner"] { background: radial-gradient( circle at 100% 0%, rgba(213, 164, 77, 0.18), transparent 44% ), linear-gradient( 155deg, rgba(255, 253, 248, 0.96), rgba(238, 225, 205, 0.97) ) !important; backdrop-filter: blur(26px) saturate(120%) !important; -webkit-backdrop-filter: blur(26px) saturate(120%) !important; } }