/* ================================================================ GAURISHANKAR DECORE HOME — cart-system.css v6.0 FINAL FIX COLOR THEME: Warm Artisan ROOT CAUSE OF MOBILE SCROLL FAILURE: ───────────────────────────────────── shopStyle.css sets: body { overflow-x: hidden } On mobile Safari + Chrome, overflow-x:hidden on creates a scroll container. This breaks position:fixed children because they now scroll WITH the body instead of being fixed to the viewport. It also makes height:100dvh unreliable. THE FIX: Cart drawer is appended to by JS. We need the drawer to work DESPITE body overflow:hidden. Strategy: 1. The drawer uses position:fixed — this is correct. 2. We use height:100% on the drawer, NOT height:100dvh. When body has overflow:hidden, 100dvh can be wrong. height:100% on a position:fixed element = viewport height. 3. We add top:0; bottom:0; explicitly — this is more reliable than height:100% on broken mobile contexts. 4. The scroll-lock adds overflow:hidden to NOT (body already has overflow-x:hidden — adding overflow:hidden to html is the reliable cross-browser scroll lock). LAYOUT CONTRACT: ──────────────── .gdh-cart-drawer [fixed, top:0 bottom:0, flex col, overflow:hidden] ├─ .gdh-cart-header [flex-shrink:0] ├─ .gdh-cart-progress [flex-shrink:0] ├─ .gdh-cart-view [flex:1, min-height:0, overflow-y:auto] ← SCROLLS └─ .gdh-cart-footer [flex-shrink:0] ← ALWAYS VISIBLE ================================================================ */ /* ================================================================ §0 · DESIGN TOKENS — WARM ARTISAN PALETTE ───────────────────────────────────────────── Old (Luxury Onyx dark) → New (Warm Artisan) --c-bg: #0c0a08 → #2E1F14 Deep Walnut --c-bg-card: #131109 → #261810 Walnut mid --c-bg-surface:#1a1712 → #3A2418 Walnut surface --c-bg-elevated:#211e18 → #4A3328 Walnut elevated --c-gold: #c4a265 → #B87841 Amber Oak --c-gold-lt: #dcc89b → #D4A96A Amber light --c-gold-dk: #a8853a → #9A6528 Amber dark --c-gold-xdk: #8a6c2c → #7D5120 Amber xdark --c-gold-pale: rgba(196,162,101,0.10) → rgba(184,120,65,0.10) --c-gold-glow: rgba(196,162,101,0.22) → rgba(184,120,65,0.22) --c-text: #f0e8d8 → #F0E8DC Parchment --c-text-md: #c8b89c → #C8A880 Warm tan --c-text-lt: #8c7c64 → #9A8070 Dusty brown --c-text-xs: #564a3a → #6B5547 Deep muted --c-border: rgba(196,162,101,0.16) → rgba(184,120,65,0.16) --c-border-lt: rgba(196,162,101,0.07) → rgba(184,120,65,0.07) --c-border-md: rgba(196,162,101,0.28) → rgba(184,120,65,0.28) ================================================================ */ #gdhCartDrawer, .gdh-cart-overlay, .gdh-cart-toasts, #gdhFloatBubble, .gdh-cart-bubble { --c-bg: #2E1F14; --c-bg-card: #261810; --c-bg-surface: #3A2418; --c-bg-elevated: #4A3328; --c-gold: #B87841; --c-gold-lt: #D4A96A; --c-gold-dk: #9A6528; --c-gold-xdk: #7D5120; --c-gold-pale: rgba(184,120,65,0.10); --c-gold-glow: rgba(184,120,65,0.22); --c-text: #F0E8DC; --c-text-md: #C8A880; --c-text-lt: #9A8070; --c-text-xs: #6B5547; --c-border: rgba(184,120,65,0.16); --c-border-lt: rgba(184,120,65,0.07); --c-border-md: rgba(184,120,65,0.28); --c-green: #2d7a4f; --c-red: #b5341e; --c-red-pale: rgba(181,52,30,0.12); --c-wa: #25d366; --c-wa-dk: #1da851; --c-white: #ffffff; --c-font-display: 'Cormorant Garamond', Georgia, serif; --c-font-body: 'DM Sans', system-ui, sans-serif; --c-drawer-w: min(440px, 100vw); --c-spring: cubic-bezier(0.32,1.25,0.40,1.00); --c-ease-out: cubic-bezier(0.20,0.90,0.40,1.00); --c-sharp: cubic-bezier(0.40,0.00,0.20,1.00); } /* ================================================================ §1 · KEYFRAMES ================================================================ */ @keyframes gdhSlideIn { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:translateX(0)} } @keyframes gdhSlideOut { to{opacity:0;transform:translateX(52px);max-height:0;padding:0;margin:0;overflow:hidden} } @keyframes gdhPulseItem { 0%{box-shadow:0 0 0 0 rgba(184,120,65,0.4)} 70%{box-shadow:0 0 0 10px rgba(184,120,65,0)} 100%{box-shadow:0 0 0 0 transparent} } @keyframes gdhFlashVal { 0%{background:var(--c-gold);color:var(--c-bg)} 100%{background:transparent;color:var(--c-text)} } @keyframes gdhBadgePop { 0%{transform:scale(1)} 45%{transform:scale(1.55)} 100%{transform:scale(1)} } @keyframes gdhConfirmPop{ 0%{transform:scale(0) rotate(-20deg);opacity:0} 70%{transform:scale(1.14) rotate(4deg)} 100%{transform:scale(1) rotate(0);opacity:1} } @keyframes gdhRing { 0%{transform:scale(1)} 22%{transform:scale(1.22) rotate(-8deg)} 55%{transform:scale(.95) rotate(5deg)} 100%{transform:scale(1) rotate(0)} } @keyframes gdhShimmer { 0%{background-position:-200% center} 100%{background-position:200% center} } /* ================================================================ §2 · SCROLL LOCK ───────────────────────────────────────────────────────────── IMPORTANT: We lock , NOT . shopStyle.css already has overflow-x:hidden on body. Adding overflow:hidden to html is the correct cross-browser approach — it doesn't interfere with existing body rules. ================================================================ */ html.gdh-cart--scroll-lock { overflow: hidden; } /* Keep body class for backwards compat but make it no-op since html handles the lock */ body.gdh-cart--scroll-lock { /* intentionally empty — html rule handles this */ } /* ================================================================ §3 · OVERLAY ================================================================ */ .gdh-cart-overlay { /* Use fixed with explicit coordinates — more reliable than height:100vh when body has overflow rules on mobile */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9000; background: rgba(6,4,2,0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; cursor: pointer; } .gdh-cart-overlay--open { opacity: 1; pointer-events: auto; } /* ================================================================ §4 · DRAWER SHELL ───────────────────────────────────────────────────────────── KEY CHANGES from previous versions: ✓ top:0; bottom:0; instead of height:100vh/dvh Reason: When body has overflow-x:hidden, height:100dvh is unreliable on mobile Safari/Chrome. top:0 + bottom:0 on a position:fixed element ALWAYS equals viewport height. ✓ overflow:hidden on the drawer itself Reason: Required to contain flex children within the drawer bounds. Without this, children can overflow. ✓ NO transform on the closed state (use right:-100% instead) Actually we keep transform but ensure it doesn't affect the fixed positioning calculation. ================================================================ */ .gdh-cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; /* top+bottom = full viewport height, always */ left: auto; z-index: 9010; width: var(--c-drawer-w); /* THE LAYOUT ENGINE — these 3 rules must never change */ display: flex; flex-direction: column; overflow: hidden; /* contains children within drawer bounds */ background: var(--c-bg-card); box-shadow: -12px 0 48px rgba(0,0,0,0.45), -1px 0 0 var(--c-border); /* Slide-in animation */ transform: translateX(calc(100% + 8px)); transition: transform 0.46s var(--c-spring); will-change: transform; } .gdh-cart-drawer--open { transform: translateX(0); } /* Gold hairline at top of drawer */ .gdh-cart-drawer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 10; pointer-events: none; background: linear-gradient(90deg, transparent, var(--c-gold-dk) 25%, var(--c-gold-lt) 50%, var(--c-gold-dk) 75%, transparent); } /* ================================================================ §5 · HEADER [flex-shrink:0 — never moves] ================================================================ */ .gdh-cart-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 12px; background: var(--c-bg); border-bottom: 1px solid var(--c-border); flex-shrink: 0; position: relative; z-index: 2; /* Prevent this from shrinking on very small screens */ min-height: 52px; } .gdh-cart-header__left { display: flex; align-items: center; gap: 10px; min-width: 0; } .gdh-cart-header__icon { color: var(--c-gold); display: flex; align-items: center; flex-shrink: 0; } .gdh-cart-header__title { font-family: var(--c-font-display); font-size: 1.05rem; font-weight: 500; color: var(--c-text); letter-spacing: 0.04em; white-space: nowrap; } .gdh-cart-header__badge { background: var(--c-gold); color: var(--c-bg); font-family: var(--c-font-body); font-size: 0.62rem; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; transition: transform 0.22s var(--c-spring); } .gdh-cart-header__badge.gdh-badge-pop { animation: gdhBadgePop 0.4s var(--c-spring); } .gdh-cart-header__close { background: rgba(255,255,255,0.05); border: 1px solid var(--c-border); border-radius: 8px; width: 34px; height: 34px; min-width: 34px; /* prevent squashing */ display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-text-lt); transition: all 0.18s; flex-shrink: 0; } .gdh-cart-header__close:hover { border-color: var(--c-red); color: var(--c-red); background: var(--c-red-pale); } .gdh-cart-header__close:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; } /* ================================================================ §6 · PROGRESS BAR [flex-shrink:0 — never moves] ================================================================ */ .gdh-cart-progress { background: var(--c-bg-surface); padding: 9px 16px 10px; border-bottom: 1px solid var(--c-border-lt); flex-shrink: 0; min-height: 44px; } .gdh-cart-progress__track { height: 4px; background: var(--c-bg-elevated); border-radius: 99px; overflow: hidden; margin-bottom: 6px; } .gdh-cart-progress__fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--c-gold-xdk), var(--c-gold-lt)); border-radius: 99px; transition: width 0.65s var(--c-ease-out); } .gdh-cart-progress__fill--done { background: linear-gradient(90deg, #2d7a4f, #52c98a); } .gdh-cart-progress__msg { font-family: var(--c-font-body); font-size: 0.72rem; color: var(--c-text-lt); margin: 0; line-height: 1.4; } .gdh-cart-progress__msg strong { color: var(--c-text); font-weight: 600; } .gdh-cart-progress__msg--done { color: var(--c-green); font-weight: 600; } /* ================================================================ §7 · SCROLLABLE VIEW ← THE ONLY SCROLLING ELEMENT ───────────────────────────────────────────────────────────── THREE RULES THAT MAKE IT WORK — all three are required: flex: 1 fills all space not taken by header+progress+footer min-height: 0 allows flex to shrink past content size (CRITICAL) overflow-y:auto enables scroll when content > available height ================================================================ */ .gdh-cart-view { flex: 1; min-height: 0; /* THE critical rule */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--c-bg-elevated) transparent; } .gdh-cart-view::-webkit-scrollbar { width: 3px; } .gdh-cart-view::-webkit-scrollbar-track { background: transparent; } .gdh-cart-view::-webkit-scrollbar-thumb { background: var(--c-bg-elevated); border-radius: 3px; } .gdh-cart-view[hidden] { display: none !important; } .gdh-cart-view--confirm { justify-content: center; } /* ================================================================ §8 · EMPTY STATE ================================================================ */ .gdh-cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 22px; gap: 12px; } .gdh-cart-empty__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--c-bg-surface); border: 1px solid var(--c-border-lt); display: flex; align-items: center; justify-content: center; color: var(--c-bg-elevated); } .gdh-cart-empty__title { font-family: var(--c-font-display); font-size: 1.1rem; font-weight: 400; color: var(--c-text); margin: 0; } .gdh-cart-empty__sub { font-family: var(--c-font-body); font-size: 0.8rem; color: var(--c-text-lt); margin: 0; max-width: 210px; line-height: 1.6; } /* ================================================================ §9 · ITEM LIST (inside view — scrolls with it) No flex:1 — height = natural content height. The view scrolls when this is taller than available space. ================================================================ */ .gdh-cart-item-list { list-style: none; margin: 0; padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 10px; /* NO flex:1 here */ } /* ================================================================ §10 · CART ITEM CARD ================================================================ */ .gdh-cart-item { display: grid; grid-template-columns: 68px 1fr 20px; gap: 10px; align-items: start; background: var(--c-bg-surface); border: 1px solid var(--c-border-lt); border-radius: 10px; padding: 11px; position: relative; transition: border-color 0.2s; animation: gdhSlideIn 0.3s var(--c-ease-out) both; } .gdh-cart-item--removing { animation: gdhSlideOut 0.26s var(--c-sharp) forwards; pointer-events: none; overflow: hidden; } .gdh-cart-item--added { animation: gdhPulseItem 0.5s var(--c-spring); } .gdh-cart-item:hover { border-color: var(--c-border-md); } .gdh-cart-item::before { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%; border-radius: 10px 0 0 10px; background: linear-gradient(180deg, var(--c-gold-dk), var(--c-gold-lt)); opacity: 0; transition: opacity 0.2s; } .gdh-cart-item:hover::before { opacity: 0.5; } .gdh-cart-item__thumb { width: 68px; height: 68px; border-radius: 8px; overflow: hidden; background: var(--c-bg-elevated); border: 1px solid var(--c-border-lt); flex-shrink: 0; } .gdh-cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--c-ease-out); } .gdh-cart-item:hover .gdh-cart-item__thumb img { transform: scale(1.05); } .gdh-cart-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .gdh-cart-item__cat { font-family: var(--c-font-body); font-size: 0.57rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-gold); font-weight: 700; } .gdh-cart-item__name { font-family: var(--c-font-display); font-size: 0.92rem; font-weight: 500; color: var(--c-text); line-height: 1.22; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gdh-cart-item__material { font-family: var(--c-font-body); font-size: 0.62rem; color: var(--c-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gdh-cart-item__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 6px; } .gdh-cart-item__line { font-family: var(--c-font-display); font-size: 0.9rem; font-weight: 600; color: var(--c-gold-lt); white-space: nowrap; } .gdh-cart-item__remove { background: none; border: none; cursor: pointer; color: var(--c-red); padding: 5px; border-radius: 5px; line-height: 0; transition: color 0.16s, background 0.16s; align-self: flex-start; margin-top: 1px; flex-shrink: 0; width: 30px; } .gdh-cart-item__remove:hover { color: var(--c-red); background: var(--c-red-pale); } .gdh-cart-item__remove:focus-visible { outline: 4px solid var(--c-red); outline-offset: 2px; } /* ================================================================ §11 · QTY STEPPER ================================================================ */ .gdh-qty-stepper { display: flex; align-items: center; background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: 7px; overflow: hidden; } .gdh-qty-stepper__btn { background: none; border: none; width: 28px; height: 26px; cursor: pointer; color: var(--c-text-md); font-size: 1rem; font-weight: 700; font-family: var(--c-font-body); display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; flex-shrink: 0; } .gdh-qty-stepper__btn:hover { background: var(--c-gold); color: var(--c-bg); } .gdh-qty-stepper__btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -2px; } .gdh-qty-stepper__val { font-family: var(--c-font-body); font-size: 0.78rem; font-weight: 700; min-width: 28px; text-align: center; color: var(--c-text); border-left: 1px solid var(--c-border-lt); border-right: 1px solid var(--c-border-lt); line-height: 26px; } .gdh-qty-stepper__val--flash { animation: gdhFlashVal 0.3s ease forwards; } /* ================================================================ §12 · TRUST STRIP (inside view — scrolls with content) ================================================================ */ .gdh-cart-trust { display: flex; border-top: 1px solid var(--c-border-lt); margin: 8px 14px 14px; padding: 12px 0 6px; } .gdh-cart-trust__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; font-family: var(--c-font-body); font-size: 0.6rem; color: var(--c-text-lt); font-weight: 500; letter-spacing: 0.04em; text-align: center; line-height: 1.3; padding: 0 4px; border-right: 1px solid var(--c-border-lt); } .gdh-cart-trust__item:last-child { border-right: none; } .gdh-cart-trust__item svg { color: var(--c-gold); flex-shrink: 0; } /* ================================================================ §13 · FOOTER [flex-shrink:0 — ALWAYS VISIBLE AT BOTTOM] ───────────────────────────────────────────────────────────── This sits OUTSIDE .gdh-cart-view as a flex sibling. flex-shrink:0 means the drawer never lets this shrink or hide. JS controls visibility with removeAttribute('hidden'). ================================================================ */ .gdh-cart-footer { flex-shrink: 0; flex-grow: 0; /* Explicit height budget so flex knows how much to reserve */ padding: 12px 16px; /* Safe area for iPhone notch / Android gesture bar */ padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)); background: var(--c-bg-surface); border-top: 1px solid var(--c-border-md); position: relative; z-index: 5; /* Shadow cast upward — visual separation from scrollable content */ box-shadow: 0 -6px 20px rgba(0,0,0,0.35); } .gdh-cart-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold-dk), var(--c-gold-lt), var(--c-gold-dk), transparent); opacity: 0.45; } .gdh-cart-footer__subtotal { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } .gdh-cart-footer__label { font-family: var(--c-font-body); font-size: 0.66rem; color: var(--c-text-lt); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } .gdh-cart-footer__val { font-family: var(--c-font-display); font-size: 1.12rem; font-weight: 600; background: linear-gradient(90deg, var(--c-gold-xdk) 0%, var(--c-gold-lt) 40%, var(--c-gold-xdk) 80%, var(--c-gold-lt) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gdhShimmer 4s linear infinite; } .gdh-cart-footer__note { font-family: var(--c-font-body); font-size: 0.62rem; color: var(--c-text-lt); margin: 0 0 10px; line-height: 1.4; } /* ================================================================ §14 · BUTTONS ================================================================ */ .gdh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; border-radius: 9px; font-family: var(--c-font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; padding: 13px 18px; transition: all 0.2s var(--c-ease-out); white-space: nowrap; line-height: 1; } .gdh-btn--full { width: 100%; } .gdh-btn--primary { background: var(--c-gold); color: var(--c-bg); } .gdh-btn--primary:hover { background: var(--c-gold-lt); transform: translateY(-1px); box-shadow: 0 4px 16px var(--c-gold-glow); } .gdh-btn--primary:active { transform: translateY(0); } .gdh-btn--outline { background: transparent; border: 1.5px solid var(--c-border-md); color: var(--c-text-md); } .gdh-btn--outline:hover { border-color: var(--c-gold); color: var(--c-gold); background: var(--c-gold-pale); } .gdh-btn--wa { background: var(--c-wa); color: var(--c-white); } .gdh-btn--wa:hover { background: var(--c-wa-dk); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,211,102,0.30); } .gdh-btn--wa:active { transform: translateY(0); } .gdh-btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; } /* ================================================================ §15 · CHECKOUT VIEW ================================================================ */ .gdh-co-head { padding: 13px 16px 0; } .gdh-co-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--c-text-lt); font-family: var(--c-font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; padding: 0; transition: color 0.15s; } .gdh-co-back:hover { color: var(--c-gold); } .gdh-co-back:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 3px; } .gdh-co-head__title { font-family: var(--c-font-display); font-size: 1.18rem; font-weight: 400; color: var(--c-text); margin-top: 9px; letter-spacing: -0.01em; } .gdh-co-head__sub { font-family: var(--c-font-body); font-size: 0.72rem; color: var(--c-text-lt); margin: 4px 0 13px; line-height: 1.5; } .gdh-co-form { padding: 0 16px 18px; display: flex; flex-direction: column; gap: 12px; } .gdh-co-field { display: flex; flex-direction: column; gap: 5px; } .gdh-co-field__label { font-family: var(--c-font-body); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-md); display: flex; align-items: center; gap: 4px; } .gdh-co-field__opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--c-text-lt); font-size: 0.63rem; } .gdh-required { color: var(--c-red); } .gdh-co-field__input { background: var(--c-bg-surface); border: 1.5px solid var(--c-border); border-radius: 8px; padding: 9px 12px; font-family: var(--c-font-body); font-size: 0.83rem; color: var(--c-text); caret-color: var(--c-gold); transition: border-color 0.2s, box-shadow 0.2s; resize: none; -webkit-appearance: none; } .gdh-co-field__input::placeholder { color: var(--c-text-xs); } .gdh-co-field__input:focus { outline: none; border-color: var(--c-gold-dk); box-shadow: 0 0 0 3px var(--c-gold-pale); } .gdh-co-field__input--textarea { min-height: 76px; line-height: 1.5; } .gdh-co-field__input--invalid { border-color: var(--c-red) !important; box-shadow: 0 0 0 3px rgba(181,52,30,0.12) !important; } .gdh-co-field__err { font-family: var(--c-font-body); font-size: 0.65rem; color: var(--c-red); min-height: 13px; } /* ================================================================ §16 · ORDER SUMMARY ================================================================ */ .gdh-order-summary { background: var(--c-bg-elevated); border: 1px solid var(--c-border-lt); border-radius: 9px; padding: 11px 13px; } .gdh-order-summary__title { font-family: var(--c-font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 8px; } .gdh-order-summary__row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--c-border-lt); } .gdh-order-summary__row:last-of-type { border-bottom: none; } .gdh-order-summary__name { font-family: var(--c-font-body); font-size: 0.73rem; color: var(--c-text-md); flex: 1; min-width: 0; line-height: 1.35; } .gdh-order-summary__price { font-family: var(--c-font-display); font-size: 0.78rem; font-weight: 600; color: var(--c-text); flex-shrink: 0; } .gdh-order-summary__total { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--c-border-md); margin-top: 5px; } .gdh-order-summary__total span:first-child { font-family: var(--c-font-body); font-size: 0.7rem; font-weight: 700; color: var(--c-text); text-transform: uppercase; letter-spacing: 0.08em; } .gdh-order-summary__total span:last-child { font-family: var(--c-font-display); font-size: 1rem; font-weight: 600; color: var(--c-gold-lt); } /* ================================================================ §17 · CONFIRM VIEW ================================================================ */ .gdh-confirm { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 20px; gap: 14px; } .gdh-confirm__icon { width: 66px; height: 66px; border-radius: 50%; background: var(--c-green); display: flex; align-items: center; justify-content: center; color: var(--c-white); animation: gdhConfirmPop 0.5s var(--c-spring) forwards; transform: scale(0); opacity: 0; box-shadow: 0 6px 22px rgba(45,122,79,0.4); } .gdh-confirm__title { font-family: var(--c-font-display); font-size: 1.45rem; font-weight: 400; color: var(--c-text); letter-spacing: -0.01em; margin: 0; } .gdh-confirm__msg { font-family: var(--c-font-body); font-size: 0.79rem; color: var(--c-text-lt); max-width: 255px; line-height: 1.65; margin: 0; } .gdh-confirm__msg strong { color: var(--c-text); } .gdh-confirm__ref { background: var(--c-bg-elevated); border: 1px dashed var(--c-border-md); border-radius: 9px; padding: 12px 15px; font-family: var(--c-font-body); font-size: 0.71rem; color: var(--c-text-lt); line-height: 1.8; text-align: left; width: 100%; max-width: 300px; } .gdh-confirm__ref div { padding: 1px 0; } .gdh-confirm__ref strong { color: var(--c-text); } /* ================================================================ §18 · FLOATING BUBBLE ================================================================ */ .gdh-cart-bubble, #gdhFloatBubble { position: fixed; bottom: 28px; right: 22px; z-index: 8990; width: 52px; height: 52px; border-radius: 50%; background: var(--c-gold); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--c-bg); box-shadow: 0 4px 18px var(--c-gold-glow), 0 2px 6px rgba(0,0,0,0.28); transition: transform 0.2s var(--c-spring), box-shadow 0.2s; will-change: transform; } .gdh-cart-bubble:hover, #gdhFloatBubble:hover { transform: scale(1.1); box-shadow: 0 8px 26px var(--c-gold-glow); } .gdh-cart-bubble:focus-visible, #gdhFloatBubble:focus-visible { outline: 2px solid var(--c-gold-lt); outline-offset: 3px; } .gdh-cart-bubble--ring, #gdhFloatBubble.gdh-cart-bubble--ring { animation: gdhRing 0.58s var(--c-spring); } .gdh-cart-bubble__badge, #gdhBubbleBadge { position: absolute; top: -4px; right: -4px; background: var(--c-red); color: var(--c-white); font-family: var(--c-font-body); font-size: 0.55rem; font-weight: 800; min-width: 17px; height: 17px; border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--c-bg-card); } .gdh-badge-pop { animation: gdhBadgePop 0.35s var(--c-spring); } /* ================================================================ §19 · TOASTS ================================================================ */ .gdh-cart-toasts { position: fixed; bottom: 96px; right: 18px; z-index: 9030; display: flex; flex-direction: column-reverse; gap: 7px; pointer-events: none; } .gdh-cart-toast { background: var(--c-bg-elevated); border: 1px solid var(--c-border-md); border-left: 3px solid var(--c-gold); color: var(--c-text); font-family: var(--c-font-body); font-size: 0.73rem; font-weight: 500; padding: 9px 13px; border-radius: 9px; box-shadow: 0 6px 20px rgba(0,0,0,0.32); display: flex; align-items: center; gap: 8px; max-width: 255px; transform: translateX(120px); opacity: 0; transition: all 0.32s var(--c-spring); pointer-events: auto; } .gdh-cart-toast--show { transform: translateX(0); opacity: 1; } .gdh-cart-toast--success { border-left-color: var(--c-wa); } .gdh-cart-toast--warning { border-left-color: #e67e22; } .gdh-cart-toast--error { border-left-color: var(--c-red); } .gdh-cart-toast__icon { color: var(--c-gold); flex-shrink: 0; display: flex; } .gdh-cart-toast--success .gdh-cart-toast__icon { color: var(--c-wa); } .gdh-cart-toast--warning .gdh-cart-toast__icon { color: #e67e22; } .gdh-cart-toast--error .gdh-cart-toast__icon { color: var(--c-red); } .gdh-cart-toast__msg { flex: 1; min-width: 0; line-height: 1.4; } /* ================================================================ §20 · RESPONSIVE ================================================================ */ /* ─── 📱 ≤480px · Portrait Mobile ─── */ @media (max-width: 480px) { #gdhCartDrawer, .gdh-cart-overlay, .gdh-cart-toasts, #gdhFloatBubble, .gdh-cart-bubble { --c-drawer-w: 100vw; } .gdh-cart-drawer { /* FULL SCREEN on mobile — no width restriction */ width: 100vw; left: 0; right: 0; /* top:0 + bottom:0 already set on base rule — guaranteed full height */ } /* No bubble — bottom nav handles it */ .gdh-cart-bubble, #gdhFloatBubble { display: none !important; } /* Toasts above bottom nav (~58px) */ .gdh-cart-toasts { bottom: 68px; right: 10px; } /* Compact header */ .gdh-cart-header { padding: 10px 14px 9px; min-height: 48px; } .gdh-cart-header__title { font-size: 0.95rem; } /* Compact progress */ .gdh-cart-progress { padding: 8px 14px 9px; min-height: 40px; } .gdh-cart-progress__msg { font-size: 0.68rem; } /* Compact item list */ .gdh-cart-item-list { padding: 10px 12px 4px; gap: 8px; } .gdh-cart-item { grid-template-columns: 58px 1fr 18px; gap: 8px; padding: 9px; border-radius: 9px; } .gdh-cart-item__thumb { width: 58px; height: 58px; } .gdh-cart-item__name { font-size: 0.84rem; } .gdh-cart-item__line { font-size: 0.85rem; } .gdh-cart-item__material { display: none; } /* Compact trust strip */ .gdh-cart-trust { margin: 6px 12px 10px; padding: 10px 0 4px; } .gdh-cart-trust__item { font-size: 0.57rem; } /* FOOTER — tighter padding, always fully visible */ .gdh-cart-footer { padding: 10px 14px; padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)); } .gdh-cart-footer__val { font-size: 1.02rem; } .gdh-cart-footer__note { font-size: 0.59rem; margin-bottom: 8px; } /* Proceed button — readable size */ .gdh-cart-footer .gdh-btn--primary { font-size: 0.75rem; padding: 12px 14px; } /* Checkout */ .gdh-co-head { padding: 10px 14px 0; } .gdh-co-form { padding: 0 14px 14px; gap: 10px; } .gdh-co-field__input { padding: 9px 11px; font-size: 0.8rem; } /* Confirm */ .gdh-confirm { padding: 24px 15px; } .gdh-confirm__ref{ max-width: 100%; } } /* ─── 📲 481–768px · Small Tablets ─── */ @media (min-width: 481px) and (max-width: 768px) { #gdhCartDrawer, .gdh-cart-overlay, .gdh-cart-toasts, #gdhFloatBubble, .gdh-cart-bubble { --c-drawer-w: min(400px, 100vw); } /* Keep bubble above bottom nav */ .gdh-cart-bubble, #gdhFloatBubble { bottom: 72px; right: 16px; } .gdh-cart-toasts { bottom: 78px; } .gdh-cart-footer { padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)); } } /* ─── 📟 769–1024px · Tablets ─── */ @media (min-width: 769px) and (max-width: 1024px) { #gdhCartDrawer, .gdh-cart-overlay, .gdh-cart-toasts, #gdhFloatBubble, .gdh-cart-bubble { --c-drawer-w: min(420px, 100vw); } } /* ─── 💻 1025–1440px · Laptop/Desktop ─── */ @media (min-width: 1025px) and (max-width: 1440px) { #gdhCartDrawer, .gdh-cart-overlay, .gdh-cart-toasts, #gdhFloatBubble, .gdh-cart-bubble { --c-drawer-w: 440px; } } /* ─── 🖥 ≥1441px · Large Screens ─── */ @media (min-width: 1441px) { #gdhCartDrawer, .gdh-cart-overlay, .gdh-cart-toasts, #gdhFloatBubble, .gdh-cart-bubble { --c-drawer-w: 480px; } .gdh-cart-item { padding: 14px; } .gdh-cart-item__thumb{ width: 78px; height: 78px; } .gdh-cart-item__name { font-size: 1rem; } .gdh-cart-footer__val{ font-size: 1.22rem; } } /* ─── Touch ─── */ @media (hover: none) { .gdh-cart-item::before { display: none; } .gdh-cart-item:hover .gdh-cart-item__thumb img { transform: none; } .gdh-cart-bubble:hover, #gdhFloatBubble:hover { transform: none; } } /* ─── Reduced motion ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .gdh-cart-footer__val { animation: none !important; -webkit-text-fill-color: var(--c-gold-lt) !important; } } /* ─── High contrast ─── */ @media (forced-colors: active) { .gdh-btn, .gdh-cart-bubble, #gdhFloatBubble, .gdh-cart-header__badge { forced-color-adjust: none; } } /* ===================================================== FINAL CART DRAWER HEADER + BOTTOM NAV OVERLAP FIX Paste at VERY END of cart-system.css ===================================================== */ /* Cart must be above shop header and bottom mobile nav */ .gdh-cart-overlay { z-index: 2147483000 !important; } .gdh-cart-drawer { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important; max-height: none !important; z-index: 2147483001 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; isolation: isolate !important; } /* Keep cart header/close button always visible */ .gdh-cart-header { position: sticky !important; top: 0 !important; z-index: 5 !important; flex-shrink: 0 !important; } /* Only middle area scrolls */ .gdh-cart-view { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 12px !important; } /* Footer/proceed button always visible above bottom safe area */ .gdh-cart-footer { flex-shrink: 0 !important; position: relative !important; z-index: 6 !important; padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important; } /* When cart is open, hide mobile bottom nav so it cannot cover Proceed */ html.gdh-cart--scroll-lock .bottom-nav, body.gdh-cart--scroll-lock .bottom-nav { display: none !important; } /* Prevent shop header from covering cart */ html.gdh-cart--scroll-lock .shop-header, body.gdh-cart--scroll-lock .shop-header { z-index: 1 !important; } /* Mobile full-screen cart */ @media (max-width: 768px) { .gdh-cart-drawer { left: 0 !important; width: 100vw !important; } .gdh-cart-header { min-height: 54px !important; padding: 12px 16px !important; } .gdh-cart-item-list { padding-bottom: 18px !important; } .gdh-cart-footer { padding: 14px 16px max(16px, env(safe-area-inset-bottom, 0px)) !important; } } /* Hide floating cart bubble */ #gdhFloatBubble, .gdh-cart-bubble { display: none !important; } /* Step 1 — widen the third column of the item grid */ .gdh-cart-item { grid-template-columns: 68px 1fr 32px; /* was 20px → now 32px */ } /* Step 2 — make the button itself bigger */ .gdh-cart-item__remove { background: none; border: none; cursor: pointer; color: var(--c-red); padding: 0; border-radius: 6px; line-height: 0; transition: color 0.16s, background 0.16s; align-self: flex-start; margin-top: 1px; flex-shrink: 0; width: 32px; /* fixed width */ height: 32px; /* fixed height */ display: flex; align-items: center; justify-content: center; } /* Step 3 — icon size inside the button */ .gdh-cart-item__remove svg, .gdh-cart-item__remove i { width: 18px; height: 18px; font-size: 18px; } @media (max-width: 480px) { .gdh-cart-item { grid-template-columns: 58px 1fr 32px; /* was 18px → now 32px */ } .gdh-cart-item__remove { width: 32px; height: 32px; } } /* ================================================================ GAURISHANKAR — CART BRAND + SIZING PATCH ---------------------------------------------------------------- Paste this block at the VERY END of cart-system.css (after every existing rule) so it wins on specificity/order. What it does: 1. Re-themes the cart from the brown "Warm Artisan" walnut palette to the home-page CRIMSON + GOLD brand (deep crimson surfaces, gold accents, parchment text) — so the drawer matches the site. 2. Scales the content up: larger product name, price, buttons, thumbnails, headings and spacing so it reads bigger and more premium (less squinting). 3. Keeps every structural rule (scroll, footer, layout) untouched. ================================================================ */ /* ---- 1. BRAND PALETTE (overrides the walnut tokens) ---- */ #gdhCartDrawer, .gdh-cart-overlay, .gdh-cart-toasts, #gdhFloatBubble, .gdh-cart-bubble { /* Crimson surfaces (deep → elevated), matching the site's brand-crimson */ --c-bg: #2d040c; /* deepest crimson — header / base */ --c-bg-card: #3a0810; /* drawer body */ --c-bg-surface: #4a0b18; /* cards / progress / footer */ --c-bg-elevated: #5e1426; /* steppers / chips / elevated surfaces */ /* Gold accents — same family as home page --brand-gold (#c4a265) */ --c-gold: #c4a265; --c-gold-lt: #dcc89b; --c-gold-dk: #a8853a; --c-gold-xdk: #8a6c2c; --c-gold-pale: rgba(196,162,101,0.12); --c-gold-glow: rgba(196,162,101,0.28); /* Warm parchment text on crimson */ --c-text: #fbf3e7; /* primary — near-white parchment */ --c-text-md: #e7cda3; /* secondary warm tan */ --c-text-lt: #c9a98a; /* muted */ --c-text-xs: #a07d6a; /* faint labels */ /* Gold-tinted borders on crimson */ --c-border: rgba(196,162,101,0.22); --c-border-lt: rgba(196,162,101,0.10); --c-border-md: rgba(196,162,101,0.38); --c-green: #2d7a4f; --c-red: #e0654f; /* lighter red — readable on crimson */ --c-red-pale: rgba(224,101,79,0.16); /* Match the home page font pairing (Cormorant + Jost) */ --c-font-display: 'Cormorant Garamond', Georgia, serif; --c-font-body: 'Jost', system-ui, sans-serif; /* Slightly wider drawer so larger content breathes */ --c-drawer-w: min(460px, 100vw); } /* ---- 2. BIGGER, MORE PREMIUM CONTENT ---- */ /* Header */ .gdh-cart-header { padding: 16px 18px 15px; min-height: 60px; } .gdh-cart-header__title { font-size: 1.3rem; letter-spacing: 0.03em; } .gdh-cart-header__icon svg { width: 21px; height: 21px; } .gdh-cart-header__badge { font-size: 0.7rem; min-width: 23px; height: 23px; border-radius: 12px; } .gdh-cart-header__close { width: 38px; height: 38px; min-width: 38px; border-radius: 10px; } .gdh-cart-header__close svg { width: 18px; height: 18px; } /* Free-delivery progress */ .gdh-cart-progress { padding: 12px 18px 13px; min-height: 50px; } .gdh-cart-progress__track { height: 5px; } .gdh-cart-progress__msg { font-size: 0.82rem; } /* Item list spacing */ .gdh-cart-item-list { padding: 16px 16px 6px; gap: 13px; } /* Item card */ .gdh-cart-item { grid-template-columns: 84px 1fr 34px; gap: 13px; padding: 14px; border-radius: 13px; } .gdh-cart-item__thumb { width: 84px; height: 84px; border-radius: 10px; } .gdh-cart-item__cat { font-size: 0.64rem; letter-spacing: 0.14em; } .gdh-cart-item__name { font-size: 1.12rem; line-height: 1.25; } .gdh-cart-item__material { font-size: 0.72rem; } .gdh-cart-item__controls { margin-top: 10px; } .gdh-cart-item__line { font-size: 1.05rem; } /* Qty stepper — bigger tap targets */ .gdh-qty-stepper { border-radius: 9px; } .gdh-qty-stepper__btn { width: 34px; height: 32px; font-size: 1.15rem; } .gdh-qty-stepper__val { min-width: 34px; font-size: 0.9rem; line-height: 32px; } /* Remove button */ .gdh-cart-item__remove { width: 34px; height: 34px; } .gdh-cart-item__remove svg { width: 19px; height: 19px; } /* Trust strip */ .gdh-cart-trust { margin: 12px 16px 16px; padding: 16px 0 8px; } .gdh-cart-trust__item { font-size: 0.68rem; gap: 7px; } .gdh-cart-trust__item svg { width: 18px; height: 18px; } /* Footer / subtotal */ .gdh-cart-footer { padding: 16px 18px; padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)); } .gdh-cart-footer__label { font-size: 0.74rem; } .gdh-cart-footer__val { font-size: 1.4rem; } .gdh-cart-footer__note { font-size: 0.72rem; margin-bottom: 13px; } /* Buttons */ .gdh-btn { font-size: 0.9rem; padding: 16px 20px; border-radius: 11px; letter-spacing: 0.07em; } /* Empty state */ .gdh-cart-empty__title { font-size: 1.35rem; } .gdh-cart-empty__sub { font-size: 0.9rem; max-width: 240px; } .gdh-cart-empty__icon { width: 84px; height: 84px; } /* Checkout heading + fields */ .gdh-co-head__title { font-size: 1.45rem; } .gdh-co-head__sub { font-size: 0.82rem; } .gdh-co-field__label { font-size: 0.72rem; } .gdh-co-field__input { font-size: 0.95rem; padding: 12px 14px; border-radius: 9px; } /* Order summary */ .gdh-order-summary { padding: 14px 16px; border-radius: 11px; } .gdh-order-summary__name { font-size: 0.84rem; } .gdh-order-summary__price { font-size: 0.88rem; } .gdh-order-summary__total span:last-child { font-size: 1.15rem; } /* Confirm view */ .gdh-confirm__title { font-size: 1.65rem; } .gdh-confirm__msg { font-size: 0.9rem; max-width: 280px; } .gdh-confirm__icon { width: 76px; height: 76px; } /* Mobile: keep the upsized content readable, full-screen drawer */ @media (max-width: 480px) { #gdhCartDrawer, .gdh-cart-overlay, .gdh-cart-toasts { --c-drawer-w: 100vw; } .gdh-cart-item { grid-template-columns: 74px 1fr 34px; } .gdh-cart-item__thumb { width: 74px; height: 74px; } .gdh-cart-item__name { font-size: 1.05rem; } .gdh-cart-item__material { display: block; } /* keep material visible */ .gdh-cart-footer__val { font-size: 1.3rem; } } /* ===================================================== GAURISHANKAR CART — TEXT SHARPNESS ONLY Paste at VERY END of cart-system.css ===================================================== */ /* Stop GPU text blur from drawer transform */ .gdh-cart-drawer { will-change: auto !important; } /* Keep open/close behavior unchanged */ .gdh-cart-drawer--open { transform: translateX(0) !important; } /* Remove text blur/shadow/filter only */ #gdhCartDrawer, #gdhCartDrawer * { text-shadow: none !important; filter: none !important; -webkit-text-size-adjust: 100%; } /* Use sharper font only for text, no layout change */ .gdh-cart-header__title, .gdh-cart-item__name, .gdh-cart-item__line, .gdh-cart-progress__msg, .gdh-cart-progress__msg strong, .gdh-cart-footer__label, .gdh-cart-footer__val, .gdh-cart-footer__note, .gdh-cart-trust__item, .gdh-cart-item__cat, .gdh-qty-stepper__btn, .gdh-qty-stepper__val, .gdh-btn { font-family: "Jost", "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; opacity: 1 !important; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* Make existing text clearer without changing size/layout */ .gdh-cart-header__title, .gdh-cart-item__name, .gdh-cart-progress__msg, .gdh-cart-progress__msg strong, .gdh-cart-trust__item { font-weight: 800 !important; } .gdh-cart-item__line, .gdh-cart-footer__val, .gdh-btn { font-weight: 900 !important; } /* Remove animated gradient blur from subtotal only */ .gdh-cart-footer__val { background: none !important; animation: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--c-gold-lt) !important; color: var(--c-gold-lt) !important; } /* Keep small text readable */ .gdh-cart-footer__note { color: #f4dfbd !important; font-weight: 600 !important; } .gdh-cart-item__cat, .gdh-cart-footer__label { color: var(--c-gold-lt) !important; font-weight: 900 !important; }